FD Design System

Design System for components used by FD.nl.

The Design System is created to be used in the following ways:

Component Library
- Skip to installation if you intend to use it as a Component Library within your own React project. List of components and how to use it is described further below.
Design Documentation
- The Design Documentation is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.
CSS + HTML code generator
- Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the CSS Custom Properties (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.

Installation

Install the Design System as dependency for your project:

NPMJS: npm i @fdmg/design-system

GitHub Packages: https://github.com/FDMediagroep/fd-design-system/packages

Install date-input-polyfill for date-picker polyfill for older browsers.

npm i date-input-polyfill

Optional configuration

You can replace date-input-polyfill with an empty component.

Webpack config

Install null-loader and add the following to your Webpack configuration rules.

module: {
    rules: [
        {
            // Test for a polyfill (or any file) and it won't be included in your
            // bundle
            test: /date-input-polyfill.dist.js$/,
            use: 'null-loader',
        }
    ],
    externals: {
        'date-input-polyfill': 'date-input-polyfill',
    }
}

TypeScript support

TypeDefinitions are available and included.

Getting started

These are the only steps you need to follow in order to use our components.

Import our CSS style(s)
- It's possible to omit this and use your own styles instead.
- You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).
Import and implement our component(s).
- You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.

Example code are listed below.

Components

Global CSS:

import "@fdmg/design-system/main.css";

Contains all the CSS for all the components. It's possible to only include the CSS for each component separately. The individual imports are shown in the code examples.

Main component module:

import { ...component... } from "@fdmg/design-system";

The main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.

The reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate CSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use. When using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.

So as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.

React:

import React from 'react';

All components import React even though the example codes don't reflect that.

Article

ArticleMeta

Component CSS:

import "@fdmg/design-system/components/design-tokens/design-tokens.css";
import "@fdmg/design-system/components/article-meta/ArticleMeta.css";

import { ArticleMeta } from "@fdmg/design-system/components/input/ArticleMeta";

function Foo() {
    return (
        <ArticleMeta authors={["fullName": "Willem L."]}/>
    );
}

ArticleImage