@veryaustin/tool-tiles

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

Usage no npm install needed!

<script type="module">
  import veryaustinToolTiles from 'https://cdn.skypack.dev/@veryaustin/tool-tiles';
</script>

README

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: