DFDS ReactJS components

methodology and strategy

• Semantic HTML
• Atomic design, bottom up.
• BEM naming for styling.
• Eliminate dead CSS. Only needed styling are compiled. The React components import the needed styling.
• Component based architecture. Each component owns the style-guide definition, styling and unit testing.
• A css bundle is generated which can be shared to other projects than ReactJS. (markup pattern)

tech used

• Babel 7, ECMAScript 8
• Webpack, Webpack-dev-server
• React, Storybook
• Context Api using the (Redux + Redux thunk) pattern

quick start

view component library

view storybook

• git clone/download
• yarn install
• yarn storybook
• open localhost:6006 in a browser

demo of prototype

• codesandbox npm modules
• codepen cdn resource

library usage example with npm

import { Button, Icon } from '@dfds-frontend/react-components';

let IconAndButtonExample = () => (
  <div>
    <Icon name="triangle" fill="red" />

    <Button
      modifiers="call-to-action full-width"
      icon={<Icon name="chevron" fill="#ed8b00" className="button__icon" />}
      onClick={event => {}}
    >
      Click me
    </Button>
  </div>
);

cdn

https://unpkg.com/@dfds-frontend/react-components/

use

• https://unpkg.com/@dfds-frontend/react-components/dist/dfds.js
• https://unpkg.com/@dfds-frontend/react-components/dist/dfds.css
• https://unpkg.com/@dfds-frontend/react-components/dist/icons.min.svg
• https://unpkg.com/@dfds-frontend/react-components/dist/fonts/font.css (fonts only)

supported browsers

modern browsers + IE 11

run tests

• yarn test

design principles

• simplicity - BEM and composable components
• overview - component library using storybook with code snippets and responsive web design test using view ports
• portability - css bundle with icons and font. It's just markup and css classnames
• availability - CDN: umd bundle, css bundle, svg icons
• testable - unit tests for all components
• playability - online demo website
• off the shelf and conventions - using BEM, component architecture and standard tools (Webpack, React, Storybook)

documentation

documentation

development

• git clone/download
• yarn install
• yarn storybook
• open localhost:6006 in a browser