Giters

veryaustin / tool-tiles

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

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

reactjsstyled-componentsjavascript

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:

Prop Type Default Description
tools array null Array 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:

Prop Type Default Description
icon string 'pdf' Defines the logo/tile color that will be displayed
color string logoColor of the icon Defines 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:

Prop Type Default Description
icon string 'pdf' Defines the SVG logo/icon to be displayed
color string logoColor of the icon Defines 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:

About

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

reactjsstyled-componentsjavascript

License:GNU General Public License v3.0

Languages

Language:JavaScript 100.0%