0.1.0 • Published 6 years ago

@veryaustin/tool-tiles v0.1.0

Weekly downloads
-
License
SEE LICENSE IN LI...
Repository
github
Last release
6 years ago

Tool Tiles

A collection of React components displaying development tools/technology logos & tiles

Build Status Coverage Status npm version

Installation:

Install this package into your project:

npm i @veryaustin/tool-tiles

Components:

Grid Component

Description:

Container component that displays a grid of tiles.

Props:

PropTypeDefaultDescription
toolsarraynullArray of strings of the logoNames

Example:

import React from 'react';
import { Grid } from '@veryaustin/tool-tiles';

const Page = () => {
  const sampleData = [
    'html',
    'css',
    'chrome',
    'email',
    'bootstrap',
    'github',
    'adobeillustrator',
    'node',
    'react',
    'slack',
    'babel',
  ]
  return (
    <Grid tools={sampleData} />
  )
}

Sample Grid

Tile Component

Description:

Displays a square tile with logo.

Props:

PropTypeDefaultDescription
iconstring'pdf'Defines the logo/tile color that will be displayed
colorstringlogoColor of the iconDefines the tile background color

Example:

import React from 'react';
import { Tile } from '@veryaustin/tool-tiles';

const Page = () => {
  return (
    <Tile icon="html" />
  )
}

Sample Tile

Icon Component

Description:

Displays a SVG logo/icon.

Props:

PropTypeDefaultDescription
iconstring'pdf'Defines the SVG logo/icon to be displayed
colorstringlogoColor of the iconDefines the color of the SVG/icon

Example:

import React from 'react';
import { icon } from '@veryaustin/tool-tiles';

const Page = () => {
  return (
    <Icon icon="html" color="red" />
  )
}

Sample Icons

Project Development:

Build the Project:

npm run build

View components in Storybook:

npm run storybook

Run Test Suite:

npm run test

Run Test Suite in Watch Mode:

npm run test:watch

Generate Test Suite Code Coverage:

npm run test:coverage

Generate Test Suite Output for Storybook:

npm run test:generate-output

Included Icons

The names and logos of products and companies shown in this package are the property of their respective owners and may also be trademarks.

Licenses/Attribution:

reactlogostilesstyled-components
@everything-registry/sub-chunk-982
0.1.0

6 years ago

0.0.1

6 years ago