Wondering what’s next for npm?Check out our public roadmap! »

    @veryaustin/tool-tiles

    0.1.0 • Public • Published

    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:

    Install

    npm i @veryaustin/tool-tiles

    DownloadsWeekly Downloads

    19

    Version

    0.1.0

    License

    SEE LICENSE IN LICENSE

    Unpacked Size

    180 kB

    Total Files

    16

    Last publish

    Collaborators

    • avatar