Tool Tiles

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

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} />
  )
}

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" />
  )
}

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" />
  )
}

---

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

---

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:

• HTML logo is licensed from W3C under Creative Commons Attribution v3.0. Logo has been adapted for this project
• CSS logo is licensed from Wikimedia Commons under Creative Commons Attribution v3.0 Unported
• SASS logo is licensed from Sass under Attribution-NonCommercial-ShareAlike v3.0 Unported
• JavaScript
• React logo is licensed from Facebook under Creative Commons Attribution v4.0 International
• Redux logo is public domain and licensed under Creative Commons Zero v1.0 Universal
• Ember logo & name is a trademark of Tilde Inc. This package is unaffiliated with the Ember project.
• Webpack logo and project name are trademarks of the JS Foundation.
• Gulp logo is licensed from Gulp under MIT
• Grunt logo is licensed from Grunt under MIT
• Travis CI logo is a trademark of Travis CI
• Jest logo is licensed from Facebook under MIT
• Mocha logo is licensed under Creative Commons Attribution v4.0 International
• Chai logo is licensed under MIT
• jQuery logo is a trademark of the jQuery Foundation.
• Babel logo is licensed under MIT
• NPM logo is a trademark of npm, inc
• GitHub logo is a trademark of Github
• Git logo by Jason Long is licensed under Creative Commons Attribution v3.0 Unported
• Node logo is a registered trademark of the Node.js Foundation
• Bootstrap logo is licensed under Creative Commons Attribution v3.0 Unported
• Handlebars logo is licensed under MIT
• Markdown
• PostgreSQL logo is licensed under the PostgreSQL License
• Craft CMS logo is a trademark of Pixel & Tonic, Inc
• Wordpress logo is licensed from the WordPress Foundation under GNU General Public License
• Ghost logo is a trademark of The Ghost Foundation
• Sketch logo is a trademark of Bohemian Coding
• Amazon Web Services is a registered trademark of Amazon
• Heroku logo is a registered trademark of Heroku
• VSCode logo is licensed from Microsoft under MIT
• CodeKit logo is property of Bryan Jones
• Slack logo is a trademark of Slack
• Trello logo is a trademark of Atlassian
• PDF
• Email
• Twitter logo and name is a registered trademark of Twitter
• LinkedIn logo and name is a registered trademark of Microsoft
• YouTube logo and name is a registered trademark of Alphabet
• Chrome logo and name is a registred trademark of Google
• Adobe Illustrator logo is a trademark of Adobe
• Adobe Photoshop logo is a trademark of Adobe
• Adobe Lightroom logo is a trademark of Adobe
• Adobe Premiere logo is a trademark of Adobe
• Adobe After Effects logo is a trademark of Adobe
• Adobe InDesign logo is a trademark of Adobe
• Adobe Dreamweaver logo is a trademark of Adobe
• Adobe Flash logo is a trademark of Adobe
• Adobe Animate logo is a trademark of Adobe
• Adobe Muse logo is a trademark of Adobe
• Adobe Audition logo is a trademark of Adobe