@dfds-ui/react-components

react-components

Collection of React components

Install

Install with npm:

npm install --save @dfds-ui/react-components

Install with yarn:

yarn add @dfds-ui/react-components

Development

Naming conventions

Prop	Values	Description
Size	small, medium, large	Use Size when a prop controls the size of the component. Use t-shirt styles for values.
Align	left, right, center	Use Align when a prop controls the horizontal alignment of the component
Orientation	horizontal, vertical	Use Orientation when a prop control the direction the component (or children) will expand
Variation	(what makes sense)	Use Variation when a component supports different variations.

Using yarn link when developing

A common problem when using yarn link is that you end of with multiple versions of packages (eg. react). This is because dependencies are resolved upwards from within the symlinked react-components folder.

webpack

If you are using webpack you can try setting resolve.symlinks to false in your webpack.config.js to only resolve dependencies from the apps node_modules folder.

Gatsby

Gatsby uses webpack under the hood, so in order to set resolve.symlinks add the following to the gatsby-node.js file

exports.onCreateWebpackConfig = ({ getConfig, actions, stage }) => {
  const config = getConfig()
  config.resolve.symlinks = false
  actions.replaceWebpackConfig(config)
}