FLEC Brand UI

A collection of reusable UI Styled Components for the FLEC umbrella brand front-end applications.

Example usage within a FLEC front-end project...

Usage within Applications

Import desired components from the library:

  import { 
    Row,
    Card,
    Name,
    Image
  } from 'flec-brand-ui';

Example Component makeup:

  <Card>
    {/* Row (CSS Grid Container) Block from Flec-Brand-Ui Module  */}
    <Row columns="20% 32% 32% 16%">

      {/* Name Block from Flec-Brand-Ui Module */}
      <Name>
        <Name.Image>
          <Image src="http://placehold.it/200x200" modifiers={['small', 'round']} />
        </Name.Image>
        <Name.Text>Gary Nigel</Name.Text>
      </Name>

      {/* Text Element within Card Block  */}
      <Card.Text>Train Truck Driver</Card.Text>

      {/* Text Element within Card Block  */}
      <Card.Text>Hogwarts, Manchester</Card.Text>

      {/* Icon container within Card Block  */}
      <Card.Icons>
        <Card.Icon>A</Card.Icon>
        <Card.Icon>S</Card.Icon>
        <Card.Icon>H</Card.Icon>
        <Card.Icon>H</Card.Icon>
      </Card.Icons>
    </Row>
  </Card>

Contributing...

Using styled-components, so you'll need to install VS Code extension for handling css syntax

ext install vscode-styled-components

UI Components built up of:

• Blocks
• Elements
• Utils

Tests

Tests reside within respected group folders, e.g

src/blocks/__tests__

src/elements/__tests__

To run tests, use npm test

To run tests and override deprecated snapshots, use npm test -- -u

To test styled-components, need to import import 'jest-styled-components' in your tests.

Story Book

You can visualise your components with Story Book, this will be the foundation of our front-end living 'Style Guide'

To run use npm run storybook

To use, just add another file appended with .story.js to a file named the same as the visual component. For example Text.story.js

Example of a very basic story is below:

  storiesOf('Text', module)
  .add('default', () => (
    <Text>This is an example of Default Text</Text>
  ))

Look at the Storybook User Guide to extending functionality further, in some circumstances 'addons' may need to be added to .storybook/config.js

Publishing

Before publishing, build the library with below code:

    npm run-script build

  npm publish --access public