Skip to content
A collection of React components displaying development tools/technology logos & tiles
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook
docs/img
src
stories
tests
utils
.babelrc
.gitignore
.npmignore
.prettierrc
.travis.yml
LICENSE
README.md
enzyme.config.js
jest.config.js
package-lock.json
package.json
webpack.base.js

README.md

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:

You can’t perform that action at this time.