1.2.1 • Published 6 years ago

@flec/flec-brand-ui v1.2.1

Weekly downloads
1
License
ISC
Repository
github
Last release
6 years ago

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 .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
  
1.2.1

6 years ago

1.2.0

6 years ago

1.1.99

6 years ago

1.1.98

6 years ago

1.1.97

6 years ago

1.1.96

6 years ago

1.1.95

6 years ago

1.1.93

6 years ago

1.1.92

6 years ago

1.1.91

6 years ago

1.1.90

6 years ago

1.1.89

6 years ago

1.1.87

6 years ago

1.1.86

6 years ago

1.1.85

6 years ago

1.1.84

6 years ago

1.1.83

6 years ago

1.1.82

6 years ago

1.1.81

6 years ago

1.1.80

6 years ago

1.1.79

6 years ago

1.1.78

6 years ago

1.1.77

6 years ago

1.1.76

6 years ago

1.1.75

6 years ago

1.1.74

6 years ago

1.1.73

6 years ago

1.1.72

6 years ago

1.1.70

6 years ago

1.1.69

6 years ago

1.1.68

6 years ago

1.1.67

6 years ago

1.1.66

6 years ago

1.1.65

6 years ago

1.1.63

6 years ago

1.1.62

6 years ago

1.1.61

6 years ago

1.1.60

6 years ago

1.1.59

6 years ago

1.1.58

6 years ago

1.1.57

6 years ago

1.1.56

6 years ago

1.1.55

6 years ago

1.1.54

6 years ago

1.1.53

6 years ago

1.1.52

6 years ago

1.1.51

6 years ago

1.1.50

6 years ago

1.1.49

6 years ago

1.1.48

6 years ago

1.1.47

6 years ago

1.1.46

6 years ago

1.1.45

6 years ago

1.1.44

6 years ago

1.1.43

6 years ago

1.1.42

6 years ago

1.1.41

6 years ago

1.1.40

6 years ago

1.1.39

6 years ago

1.1.38

6 years ago

1.1.37

6 years ago

1.1.36

6 years ago

1.1.35

6 years ago

1.1.34

6 years ago

1.1.33

6 years ago

1.1.32

6 years ago

1.1.31

6 years ago

1.1.30

6 years ago

1.1.29

6 years ago

1.1.28

6 years ago

1.1.27

6 years ago

1.1.26

6 years ago

1.1.25

6 years ago

1.1.24

6 years ago

1.1.23

6 years ago

1.1.22

6 years ago

1.1.21

6 years ago

1.1.20

6 years ago

1.1.19

6 years ago

1.1.18

6 years ago

1.1.16

6 years ago

1.1.15

6 years ago

1.1.14

6 years ago

1.1.13

6 years ago

1.1.11

6 years ago

1.1.10

6 years ago

1.1.9

6 years ago

1.1.8

6 years ago

1.1.7

6 years ago

1.1.6

6 years ago

1.1.5

6 years ago

1.1.4

6 years ago

1.1.3

6 years ago

1.1.2

6 years ago

1.1.1

6 years ago

1.1.0

6 years ago

1.0.99

6 years ago

1.0.98

6 years ago

1.0.97

6 years ago

1.0.96

6 years ago

1.0.95

6 years ago

1.0.94

6 years ago

1.0.93

6 years ago

1.0.92

6 years ago

1.0.91

6 years ago

1.0.90

6 years ago

1.0.89

6 years ago

1.0.88

6 years ago

1.0.87

6 years ago

1.0.86

6 years ago

1.0.85

6 years ago

1.0.84

6 years ago

1.0.83

6 years ago

1.0.82

6 years ago

1.0.81

6 years ago

1.0.80

6 years ago

1.0.79

6 years ago

1.0.78

6 years ago

1.0.74

6 years ago

1.0.73

6 years ago

1.0.71

6 years ago

1.0.70

6 years ago

1.0.68

6 years ago

1.0.67

6 years ago

1.0.66

6 years ago

1.0.65

6 years ago

1.0.64

6 years ago

1.0.63

6 years ago

1.0.62

6 years ago

1.0.61

6 years ago

1.0.60

6 years ago

1.0.59

6 years ago

1.0.58

6 years ago

1.0.57

6 years ago

1.0.56

6 years ago

1.0.55

6 years ago

1.0.54

6 years ago

1.0.53

6 years ago

1.0.52

6 years ago

1.0.51

6 years ago

1.0.50

6 years ago

1.0.49

6 years ago

1.0.48

6 years ago

1.0.47

6 years ago

1.0.46

6 years ago

1.0.45

6 years ago

1.0.44

6 years ago

1.0.43

6 years ago

1.0.42

6 years ago

1.0.41

6 years ago

1.0.40

6 years ago

1.0.38

6 years ago

1.0.37

6 years ago

1.0.36

6 years ago

1.0.35

6 years ago

1.0.34

6 years ago

1.0.33

6 years ago

1.0.32

6 years ago

1.0.31

6 years ago

1.0.30

6 years ago

1.0.29

6 years ago

1.0.28

6 years ago

1.0.27

6 years ago

1.0.26

6 years ago

1.0.25

6 years ago

1.0.24

6 years ago

1.0.23

6 years ago

1.0.22

6 years ago

1.0.21

6 years ago

1.0.20

6 years ago

1.0.19

6 years ago

1.0.18

6 years ago

1.0.17

6 years ago

1.0.16

6 years ago

1.0.15

6 years ago

1.0.14

6 years ago

1.0.13

6 years ago

1.0.12

6 years ago

1.0.11

6 years ago

1.0.10

6 years ago

1.0.9

6 years ago

1.0.8

6 years ago

1.0.7

6 years ago

1.0.6

6 years ago

1.0.5

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago

0.0.9

6 years ago

0.0.8

6 years ago

0.0.6

6 years ago

0.0.5

6 years ago

0.0.4

6 years ago

0.0.3

6 years ago

0.0.2

6 years ago

0.0.1

6 years ago