Component Library

Usage

On your project install the component-library:

npm install @gabrielajardimaquino/component-library

Using a component (after the library installed as a dependency):

import React from "react";
import { Button } from "@gabrielajardimaquino/component-library";

const App = () => (
  <div>
    <h1>Hello I'm consuming the component library</h1>
    <Button variant="primary" />
  </div>
);

export default App;

Docs

Global Styles

import '@gabrielajardimaquino/component-library/Styles/Fonts/metropolis.css';
import '@gabrielajardimaquino/component-library/Styles/theme.scss';
# or for just tags and classes
import '@gabrielajardimaquino/component-library/Styles/theme.css';

Colors

The colors and their Sass variable names are provided below.

Colors

• #F0F1F4: $color-blue
• #F3DCE6: $color-pink-light
• #EB0C8F: $color-pink
• #F58720: $color-orange
• #ECB904: $color-yellow
• #008300: $color-green

Greys

• #ffffff: $color-white
• #F8F8F8: $color-grey-1
• #E8E8E8: $color-grey-2
• #D8D8D8: $color-grey-3
• #C8C8C8: $color-grey-4
• #ADADAD: $color-grey-5
• #7D7D7D: $color-grey-6
• #595959: $color-grey-7
• #35383A: $color-grey-8
• #191C1F: $color-black

The padding/margin also can be usd by the classes

# border
className="border-color-white"
className="border-color-grey-1"
className="border-color-grey-2"
className="border-color-grey-3"
className="border-color-grey-4"
className="border-color-grey-5"
className="border-color-grey-6"
className="border-color-grey-7"
className="border-color-grey-8"
className="border-color-black"
className="border-color-blue"
className="border-color-pink"
className="border-color-pink-light"
className="border-color-yellow"
className="border-color-orange"
className="border-color-green"

# background
className="background-color-white"
className="background-color-grey-1"
className="background-color-grey-2"
className="background-color-grey-3"
className="background-color-grey-4"
className="background-color-grey-5"
className="background-color-grey-6"
className="background-color-grey-7"
className="background-color-grey-8"
className="background-color-black"
className="background-color-blue"
className="background-color-pink"
className="background-color-pink-light"
className="background-color-yellow"
className="background-color-orange"
className="background-color-green"

# text
className="text-color-white"
className="text-color-grey-1"
className="text-color-grey-2"
className="text-color-grey-3"
className="text-color-grey-4"
className="text-color-grey-5"
className="text-color-grey-6"
className="text-color-grey-7"
className="text-color-grey-8"
className="text-color-black"
className="text-color-blue"
className="text-color-pink"
className="text-color-pink-light"
className="text-color-yellow"
className="text-color-orange"
className="text-color-green"

Padding/Magin

The padding/margin and their Sass variable names are provided below.

• $padding-xxs: 0.25rem
• $padding-xs: 0.5rem
• $padding-sm: 1rem
• $padding-md: 1.5rem
• $padding-lg: 2rem
• $padding-xl: 3rem
• $padding-xxl: 4rem
• $padding-max: 6rem

The padding/margin also can be usd by the classes

# padding
className="padding-xxs"
className="padding-xs"
className="padding-sm"
className="padding-md"
className="padding-lg"
className="padding-xl"
className="padding-xxl"
className="padding-max"

# padding-left
className="padding-left-xxs"
className="padding-left-xs"
className="padding-left-sm"
className="padding-left-md"
className="padding-left-lg"
className="padding-left-xl"
className="padding-left-xxl"
className="padding-left-max"

# padding-right
className="padding-right-xxs"
className="padding-right-xs"
className="padding-right-sm"
className="padding-right-md"
className="padding-right-lg"
className="padding-right-xl"
className="padding-right-xxl"
className="padding-right-max"

# padding-top
className="padding-top-xxs"
className="padding-top-xs"
className="padding-top-sm"
className="padding-top-md"
className="padding-top-lg"
className="padding-top-xl"
className="padding-top-xxl"
className="padding-top-max"

# padding-bottom
className="padding-bottom-xxs"
className="padding-bottom-xs"
className="padding-bottom-sm"
className="padding-bottom-md"
className="padding-bottom-lg"
className="padding-bottom-xl"
className="padding-bottom-xxl"
className="padding-bottom-max"

# margin
className="margin-xxs"
className="margin-xs"
className="margin-sm"
className="margin-md"
className="margin-lg"
className="margin-xl"
className="margin-xxl"
className="margin-max"

# margin-left
className="margin-left-xxs"
className="margin-left-xs"
className="margin-left-sm"
className="margin-left-md"
className="margin-left-lg"
className="margin-left-xl"
className="margin-left-xxl"
className="margin-left-max"

# margin-right
className="margin-right-xxs"
className="margin-right-xs"
className="margin-right-sm"
className="margin-right-md"
className="margin-right-lg"
className="margin-right-xl"
className="margin-right-xxl"
className="margin-right-max"

# margin-top
className="margin-top-xxs"
className="margin-top-xs"
className="margin-top-sm"
className="margin-top-md"
className="margin-top-lg"
className="margin-top-xl"
className="margin-top-xxl"
className="margin-top-max"

# margin-bottom
className="margin-bottom-xxs"
className="margin-bottom-xs"
className="margin-bottom-sm"
className="margin-bottom-md"
className="margin-bottom-lg"
className="margin-bottom-xl"
className="margin-bottom-xxl"
className="margin-bottom-max"

Breakpoint

The breakpoint Sass variable names are provided below:

• $media-breakpoint-xs: 576px;
• $media-breakpoint-sm: 768px;
• $media-breakpoint-md: 992px;
• $media-breakpoint-lg: 1200px;
• $media-breakpoint-xl: 1599px;

Typography

• Tags:

  You can use the styles by applying tag, h1 to h6 tags are pre defined as well as the htm, body and a tags.

• Mixin:

  You can use the styles include a mixin to yous Sass files. Rememenber to import the theme at the top of the file

@import '~@gabrielajardimaquino/component-library/Styles/theme.scss';

• Classes: you also can use one of thepreset class names to style any tag

import React from 'react';

const Test = () => {
  return (
    <>
      <h1 className="h1-lastest">Your content</h1>
    </>
  );
};

export default Test;

Font

Import the font at the top of the app file

import '@gabrielajardimaquino/component-library/Styles/Fonts/metropolis.css'

Use the font by family:

font-family: 'Metropolis'

or use a preset Mixin:

# Semi Bold (weight: 600)
@include MetropolisSemiBold;
@include MetropolisSemiBoldItalic;

# Medium (weight: 500)
@include MetropolisMedium;
@include MetropolisMediumItalic;

# Normal (weight: 400)
@include Metropolis;
@include MetropolisItalic;

# Light (weight: 200)
@include MetropolisLight;
@include MetropolisLightItalic;

Header

className="h1-largest"
# or
@include h1-largest;

<h1></h1>
#or
@include h1-desktop;

<h2></h2>
# or
@include h2-desktop;
@include h1-mobile;
# same values

<h3></h3>
# or
@include h3-desktop;
@include h2-mobile;
# same values

<h4></h4>
# or
@include h4-desktop;
@include h3-mobile;
# same values

<h5></h5>
# or
@include h5-desktop;
@include h4-mobile;
# same values

<h6></h6>
# or
@include h6-desktop;
@include h5-mobile;
# same values

className="h6-smallest"
# or
@include h6-mobile;

Body

className="body-xxl"
# or
@include body-xxl;

className="body-xl"
# or
@include body-xl;

className="body-lg"
# or
@include body-lg;

className="body-md"
# or
@include body-md;

className="body-sm"
# or
@include body-sm;

className="body-xs"
# or
@include body-xs;

Link

Inline links can be used just by the a tag <a>Inline Link</a> and in block links can be use by the classes:

className="h1-largest-link"
className="h1-link"
className="h2-link"
className="h3-link"
className="h4-link"
className="h5-link"
className="h6-link"
className="h6-smallest-link"
# or
className="standalone-link"

For standalone link with icon use className="standalone-link", className="tooltip" and className="tooltip-icon" as example below:

import React from 'react';
import { Icon } from "@gabrielajardimaquino/component-library";

const LinkWithIcon = () => {
  return (
    <>
      <a className="standalone-link">
        Your link
        <div className="tooltip">
          <span className="tooltip-icon">
            <Icon name="fa-icon-info-circle-solid" size="xs" />
          </span>
      </a>
    </>
  );
};

export default LinkWithIcon;

Grid

The grid is build in 12 column. To use the className="container", className="row" and one off the column classes with max sum of 12:

• column classes

className="col-12"
className="col-11"
className="col-10"
className="col-9"
className="col-8"
className="col-7"
className="col-6"
className="col-5"
className="col-4"
className="col-3"
className="col-2"
className="col-1"

import React from 'react';

const Test = () => {
  return (
    <div className="container">
      <div className="row">
        <div className="col-1">content</div>
        <div className="col-8">content</div>
        <div className="col-3">content</div>
      </div>
    </div>
  );
};

export default Test;

Also avaliable with screen sensitive classes:

import React from 'react';

const Test = () => {
  return (
    <div className="container">
      <div className="row">
        <div className="col-lg-1 col-md-2 col-sm-4 col-xs-12">content</div>
        <div className="col-lg-8 col-md-6 col-sm-4 col-xs-12">content</div>
        <div className="col-lg-3 col-md-4 col-sm-4 col-xs-12">content</div>
      </div>
    </div>
  );
};

export default Test;

• col-xs

className="col-xs-12"
className="col-xs-11"
className="col-xs-10"
className="col-xs-9"
className="col-xs-8"
className="col-xs-7"
className="col-xs-6"
className="col-xs-5"
className="col-xs-4"
className="col-xs-3"
className="col-xs-2"
className="col-xs-1"

• col-sm

className="col-sm-12"
className="col-sm-11"
className="col-sm-10"
className="col-sm-9"
className="col-sm-8"
className="col-sm-7"
className="col-sm-6"
className="col-sm-5"
className="col-sm-4"
className="col-sm-3"
className="col-sm-2"
className="col-sm-1"

• col-md

className="col-md-12"
className="col-md-11"
className="col-md-10"
className="col-md-9"
className="col-md-8"
className="col-md-7"
className="col-md-6"
className="col-md-5"
className="col-md-4"
className="col-md-3"
className="col-md-2"
className="col-md-1"

• col-lg

className="col-lg-12"
className="col-lg-11"
className="col-lg-10"
className="col-lg-9"
className="col-lg-8"
className="col-lg-7"
className="col-lg-6"
className="col-lg-5"
className="col-lg-4"
className="col-lg-3"
className="col-lg-2"
className="col-lg-1"

Tooltip

Tooltip on hover can be used by passing the classes className="tooltip-label", className="tooltip", className="tooltip-icon" and className="tooltip-text".

import React from 'react';
import { Icon } from "@gabrielajardimaquino/component-library";

const Tooltip = () => {
  return (
    <>
      <p className="tooltip-label">
        Your content
        <div className="tooltip">
          <span className="tooltip-icon">
            <Icon name="fa-icon-info-circle-solid" size="xs" />
          </span>
          <span className="tooltip-text">
            This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is needed please use a modal instead.
          </span>
        </div>
      </p>
    </>
  );
};

export default Tooltip;

Tooltip on click can be used by passing the classes className="tooltip", className="tooltiptext" and className="tooltip-active"

import React, { useState } from 'react';
import { Icon } from "@gabrielajardimaquino/component-library";

const Tooltip = () => {
  const [active, setActive] = useState(false);
  const handleOnClick = () => {
    if (active) {
      setActive(false);
    } else {
      setActive(true);
    }
  };
  return (
    <>
      <p className="tooltip-label">
        Your content
        <div
          className={`tooltip ${active ? 'tooltip-active' : ''}`}
          onClick={handleOnClick}
          onKeyPress={handleOnClick}
          tabIndex={0}
          role="button"
          aria-label="tooltip">
          <span className="tooltip-icon">
            <Icon name="fa-icon-info-circle-solid" size="xs" />
          </span>
          <span className="tooltip-text">
            This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is needed please use a modal instead.
          </span>
        </div>
      </p>
    </>
  );
};

export default Tooltip;

( png, svg and favicon.ico icons are also avaliable in the Styles folder )

Development

Description

This project features:

• Rollup
• Gulp
• Lerna
• Sass
• TypeScript
• ESlint
• Prettier
• Storybook to help you create and show off your components
• Jest and React Testing Library enabling testing of the components

First time setup

• Clone the repo

git clone https://github.com/fashionphile/ComponentLibrary.git

• Install NVM

curl -o-
https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

To test if nvm is install

command -v nvm
# Should answer: nvm

Switch your node version to 14.13.0

nvm install 14.13.0
nvm use 14.13.0

• Install Dependences

npm install

Running

• Change node to v14.13.0

nvm use 14.13.0
# Should answer: Now using node v14.13.0 (npm v6.14.8)

• Storybook

To run a live-reload Storybook server on your local machine:

npm run storybook

To export your Storybook as static files:

npm run storybook:export

To deploy storybook to staging

npm run deploy-storybook

It will be staging at: https://fashionphile.github.io/ComponentLibrary

• Testing

npm run test

Generating New Components

This project included a handy NodeJS util file under util called create-component.js. Instead of copy pasting components to create a new component, you can instead run this command to generate all the files you need to start building out a new component. To use it:

npm run generate YourComponentName

This will generate:

/src
  /YourComponentName
    YourComponentName.tsx
    YourComponentName.stories.tsx
    YourComponentName.test.tsx
    YourComponentName.types.ts
    YourComponentName.scss

The default templates for each file can be modified under util/templates.

Don't forget to add the component to your index.ts exports if you want the library to export the component!

Installing Component Library Locally

npm i --save ../@gabrielajardimaquino/component-library

Should show:

  ...
  "dependencies": {
    ...
    "component-library": "file:../@gabrielajardimaquino/component-library",
    ...
  },
  ...

Publishing

Hosting via NPM and Semantic Versioning

npm run publish

• it will ask you to ? Select a new version for <package-name> select with up and down arrow keys.
• it will ask you if ? Are you sure you want to publish these packages? answer y