suntransfers v0.0.42

Sunstransfer Design System

CICD

This is a kubernetes application deployed with Jenkins X

• The Staging env is builded and deployed everytime there is a commit to master branch.
• The Production environment needs to be deployed manually via JX promote command.

Usage

npm install --save @suntransfers/ui

import { Button } from "@suntransfers/ui";

export default () => (
  <div>
    <Button variant="green" onClick={() => {}}>
      Hello Button
    </Button>
  </div>
);

Development

git clone <THIS_REPOSITORY>
cd design.sunstransfers.com
npm install
npm start

Build

npm run build

Build Docs

npm run build:docs

the build directory is storybook-static

How to run in docker

docker build .

will ourput image id, for example: 4633a0f907f6

choose your favourite port, for example: 8081

docker run -p 8081:80 4633a0f907f6

browse localhost:8081

Todos

checkout the todos.md file for the complete list.

Resources

Accessibility

• https://inclusive-components.design
• https://a11yproject.com/
• https://github.com/brunopulis/awesome-a11y
• https://w3c.github.io/aria-practices/
• https://www.w3.org/TR/wai-aria-1.2/
• http://accessibility.voxmedia.com/#engineers

UI Libraries & Design systems

• https://reakit.io/
• https://radix.modulz.app/docs/getting-started/
• https://adele.uxpin.com/

Storybook

• WORKFLOW: https://www.learnstorybook.com/design-systems-for-developers/react/en/workflow/

• https://www.learnstorybook.com/design-systems-for-developers/

• https://storybook.js.org/docs/formats/component-story-format/

TEST pipeline 20190924.16:23

Objective: https://gumdrops.gumgum.com/index.html?path=/story/layout--layoutcontainer

Export: https://medium.com/gumgum-tech/writing-a-shared-react-component-library-with-storybook-78e723438338