0.0.46 • Published 5 years ago

@canopytax/styleguide v0.0.46

Weekly downloads
1
License
-
Repository
-
Last release
5 years ago

Canopy Styleguide

The Canopy Styleguide is a css and javascript library. It exposes global css classes and custom elements.

Storybook

Canopy uses storybook, an open source UI component explorer to articulate its design system.

A Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product.

The primary components of the design system are 1. Styleguide: the defining of graphic styles (colors, fonts, etc.) 2. Pattern Library: functional components and their usage

Contributing

See Canopy's live storybook

Creating a new story is easy and can be done in any directory. Simply create a file with the extension *.stories.js

If I am looking to create a story that will illustrate a new button, I might add a new file for it like so:

├── button
│   ├── button.component.js
│   ├── button.stories.js

In storybook's new Component Story Format (CSF), stories are defined as ES modules. A default export marks the title and named exports introduce the story functions.

import React from 'react'
import {CprButton} from 'canopy-styleguide'

export default {
  title: 'Button',
  // including component will automagically fill docs around props
  component: CprButton,
}

export const withEmojis = () => <CprButton>😀 😎 👍 💯</CprButton>
export const withText = () => <CprButton>click me</CprBut>

This will give us

Addons we use

storysource: show stories source in the addon panel

knobs: edit props dynamically using the Storybook UI

See CprEmptyState for an example

See CSF docs and stories in this project for more

A useful recent (Jan 2020) blog post about storybook config

GOAT (deprecating)

G.O.A.T website

0.0.46

5 years ago

0.0.44

5 years ago

0.0.45

5 years ago

0.0.41

5 years ago

0.0.42

5 years ago

0.0.43

5 years ago

0.0.40

5 years ago

0.0.38

5 years ago

0.0.39

5 years ago

0.0.37

5 years ago

0.0.36

5 years ago

0.0.33

5 years ago

0.0.34

5 years ago

0.0.32

5 years ago

0.0.30

5 years ago

0.0.31

5 years ago

0.0.29

5 years ago

0.0.28

5 years ago

0.0.26

5 years ago

0.0.27

5 years ago

0.0.25

5 years ago

0.0.24

5 years ago

0.0.23

5 years ago

0.0.22

5 years ago

0.0.20

5 years ago

0.0.21

5 years ago

0.0.18

5 years ago

0.0.19

5 years ago

0.0.17

5 years ago

0.0.16

5 years ago

0.0.15

5 years ago

0.0.14

5 years ago

0.0.13

5 years ago

0.0.10

5 years ago

0.0.11

5 years ago

0.0.12

5 years ago

0.0.9

5 years ago

0.0.8

5 years ago

0.0.7

5 years ago

0.0.6

5 years ago

0.0.5

5 years ago

0.0.4

5 years ago

0.0.3

5 years ago

0.0.2

5 years ago

0.0.1

5 years ago