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

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

development

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

Keywords

FAQs

What is @dfds-frontend/react-components?

Is @dfds-frontend/react-components popular?

Is @dfds-frontend/react-components well maintained?

Package last updated on 26 Jan 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@dfds-frontend/react-components

DFDS ReactJS components

methodology and strategy