Nested Parenthetical Madness
    Have ideas to improve npm?Join in the discussion! »

    @fdmg/design-system
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.42 • Public • Published

    FD Design System

    Build Publish Code Quality Test coverage NPM version Bundle-size minified+gzip

    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
    • 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

    or

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

    TypeScript support

    TypeDefinitions are available and included.

    Getting started

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

    1. 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).
    2. 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

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/article-image/ArticleImage.css";
    
    import { ArticleImage } from "@fdmg/design-system/components/article-image/ArticleImage";
    
    function Foo() {
        return (
            <ArticleImage
                baseUrl="https://images.example.com"
                caption="What a photo"
                credit="Foto: Willem L."
                fileName="image.jpg"/>
        );
    }
    
    ArticleTags

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/article-tags/ArticleTags.css";
    
    import { ArticleTags } from "@fdmg/design-system/components/article-tags/ArticleTags";
    
    function Foo() {
        return (
            <ArticleTags
                onDisableAlertClick={() => {}}
                onEnableAlertClick={() => {}}
                onFollowClick={() => {}}
                onUnfollowClick={() => {}}
                title="Volgen via mijn nieuws"
                titleLink="https://fd.nl/mijn-nieuws"
                tags={[
                    {
                        tag: 'Detailhandel',
                        uuid: '1',
                    },
                    {
                        selected: true,
                        tag: 'Eten & Drinken',
                        uuid: '2',
                    },
                    {
                        alertSelected: true,
                        selected: true,
                        tag: 'Supermarkt',
                        uuid: '3',
                    },
                ]}
            />
        );
    }
    
    BulletPoint

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/bullet-point/BulletPoint.css";
    
    import { BulletPoint } from "@fdmg/design-system/components/bullet-point/BulletPoint";
    
    function Foo() {
        return (
            <BulletPoint bullets={["bullet 1" "bullet 2"]}/>
        );
    }
    
    Financial Agenda

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/financial-agenda/FinancialAgenda.css";
    
    import { FinancialAgenda } from "@fdmg/design-system/components/financial-agenda/FinancialAgenda";
    
    function Foo() {
        return (
            <FinancialAgenda
                agendaItems={[
                    {
                        date: '25 mei',
                        source: 'VK',
                        description:
                            'Bankholiday - financiële markten gesloten',
                    },
                    {
                        date: '25 mei',
                        source: 'VS',
                        description:
                            'Memorial day - financiële markten gesloten',
                    },
                ]}
            />
        );
    }
    
    Infographic

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/infographic/Infographic.css";
    
    import { Infographic } from "@fdmg/design-system/components/infographic/Infographic";
    
    function Foo() {
        return (
            <Infographic src="https://example.com/image.png" height="400" />
        );
    }
    
    Latest News (article)

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/article-latest-news/ArticlelatestNews.css";
    
    import { ArticleLatestNews } from "@fdmg/design-system/components/article-latest-news/ArticleLatestNews";
    
    function Foo() {
        return (
            <ArticleLatestNews
                news={[
                    {
                        uuid: '1',
                        dateTime: `11:18`,
                        title: `Provinciale lijsttrekkers CDA: stop met 'drammen en dromen' over klimaat`,
                        url: `https://fd.nl/economie-politiek/1288207/provinciale-lijsttrekkers-cda-stop-met-drammen-en-dromen-over-klimaat`,
                    },
                    {
                        uuid: '2',
                        dateTime: `11:15`,
                        title: `Luchtvaartbedrijf Germania valt om`,
                        url: `https://fd.nl/ondernemen/1288215/luchtvaartbedrijf-germania-valt-om`,
                        isRead: true,
                    },
                    {
                        uuid: '3',
                        dateTime: `11:10`,
                        title: `Britse dienstensector krijgt harde tik van brexit`,
                        url: `https://fd.nl/economie-politiek/1288213/britse-dienstensector-krijgt-harde-tik-van-brexit`,
                    },
                    {
                        uuid: '4',
                        dateTime: `11:00`,
                        title: `DNB: Bovag-garantie toch geen verzekering`,
                        url: `https://fd.nl/ondernemen/1288299/dnb-bovag-garantie-toch-geen-verzekering`,
                    },
                ]}
            />
        );
    }
    
    LinkBlock

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/article-link-block/LinkBlock.css";
    
    import { LinkBlock } from "@fdmg/design-system/components/article-link-block/LinkBlock";
    
    function Foo() {
        return (
            <LinkBlock title="Read more" description="Click here to read all about it" url="https://fd.nl"/>
        );
    }
    
    LinkCard

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/article-link-card/LinkCard.css";
    
    import { LinkCard as ArticleLinkCard } from "@fdmg/design-system/components/article-link-card/LinkCard";
    
    function Foo() {
        return (
            <ArticleLinkCard
                link="/mijn-nieuws"
                title="Beheer"
                linkText="Ga naar laatste nieuws"
            />
        );
    }
    
    NumberFrame

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/numberframe/NumberFrame.css";
    
    import { NumberFrame } from "@fdmg/design-system/components/numberframe/NumberFrame";
    
    function Foo() {
        return (
            <NumberFrame
                number=`80%`,
                description=`of the statistiscs found on the internet are lies`
            />
        );
    }
    
    Quote

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/quote/Quote.css";
    
    import { Quote } from "@fdmg/design-system/components/quote/Quote";
    
    function Foo() {
        return (
            <Quote
                blockquote={`This is the quote text`},
                figcaption={`Willem L.`}
    
            />
        );
    }
    
    ReadMore

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/readmore/ReadMore.css";
    
    import { ReadMore } from "@fdmg/design-system/components/readmore/ReadMore";
    
    function Foo() {
        return (
            <ReadMore
                title=`Lees ook`,
                links=[
                    `A <a href="http://fd.nl">link</a>`,
                    `Another <a href="https://www.willemliu.nl">link</a>`
                ]
            />
        );
    }
    
    Summary

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/article-summary/Summary.css";
    
    import { Summary } from "@fdmg/design-system/components/article-summary/Summary";
    
    function Foo() {
        return (
            <Summary
                title="Samenvatting"
                summaries=[
                    "Bulletpoint samenvatting 1"
                    "Bulletpoint samenvatting 2"
                    "Bulletpoint samenvatting 3"
                ]/>
        );
    }
    
    TextFrame

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/textframe/TextFrame.css";
    
    import { TextFrame } from "@fdmg/design-system/components/textframe/TextFrame";
    
    function Foo() {
        return (
            <TextFrame
                title=`TextFrame test`,
                description=`Aenean lacinia bibendum nulla sed consectetur. Donec id elit non
    mi porta gravida at eget metus. Cum sociis natoque penatibus et
    magnis dis parturient montes, nascetur ridiculus mus.`
            />
        );
    }
    
    Toolbar horizontal

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/toolbar/HorizontalToolbar.css";
    
    import { HorizontalToolbar } from "@fdmg/design-system/components/toolbar/HorizontalToolbar";
    
    function Foo() {
        return (
            <HorizontalToolbar
                id="12345"
                bookmarked={bookmarked}
                onClick={handleClick}
            />
        );
    }
    
    Toolbar vertical

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/toolbar/VerticalToolbar.css";
    
    import { VerticalToolbar } from "@fdmg/design-system/components/toolbar/VerticalToolbar";
    
    function Foo() {
        return (
            <VerticalToolbar
                id="12345"
                bookmarked={bookmarked}
                onClick={handleClick}
            />
        );
    }
    
    Vimeo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/vimeo/Vimeo.css";
    
    import { Vimeo } from "@fdmg/design-system/components/vimeo/Vimeo";
    
    function Foo() {
        return (
            <Vimeo id="<vimeo id>" />
        );
    }
    
    WordFrame

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/wordframe/WordFrame.css";
    
    import { WordFrame } from "@fdmg/design-system/components/wordframe/WordFrame";
    
    function Foo() {
        return (
            <WordFrame
                title=`WordFrame test`,
                description=`Aenean lacinia bibendum nulla sed consectetur. Donec id elit non
    mi porta gravida at eget metus. Cum sociis natoque penatibus et
    magnis dis parturient montes, nascetur ridiculus mus.`
            />
        );
    }
    
    Youtube

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/youtube/Youtube.css";
    
    import { Youtube } from "@fdmg/design-system/components/youtube/Youtube";
    
    function Foo() {
        return (
            <Youtube id="<Youtube id>" />
        );
    }
    

    Controls

    Breaking Switch

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/input/BreakingSwitch.css";
    
    import { BreakingSwitch } from "@fdmg/design-system/components/input/BreakingSwitch";
    
    interface Props {
        checked?: boolean;
    }
    
    function Foo(props: Props) {
        const [checked, setChecked] = useState(props.checked);
    
        function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
            setChecked(e.currentTarget.checked);
        }
    
        return (
            <BreakingSwitch
                label="Label of the switch"
                checked={checked}
                onChange={handleChange}
            />
        );
    }
    
    Button

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/button/Button.css";
    
    import { Button } from "@fdmg/design-system/components/button/Button";
    
    function Foo() {
        function handleClick() {
            console.log('clicked');
        }
    
        return (
            <Button onClick={handleClick}>Click me!</Button>
        );
    }
    
    Button CTA (call-to-action)

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/button/ButtonCta.css";
    
    import { ButtonCta } from "@fdmg/design-system/components/button/ButtonCta";
    
    function Foo() {
        function handleClick() {
            console.log('clicked');
        }
    
        return (
            <ButtonCta onClick={handleClick}>Click me!</ButtonCta>
        );
    }
    
    Button Follow

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/button/ButtonFollow.css";
    
    import { useState } from 'react';
    import { ButtonFollow } from "@fdmg/design-system/components/button/ButtonFollow";
    
    function Foo() {
        const [follow, setFollow] = useState(false);
        function handleClick() {
            console.log('clicked');
            setFollow(!follow);
        }
    
        return (
            <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>
        );
    }
    
    Ghost Button

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/button/ButtonGhost.css";
    
    import { ButtonGhost } from "@fdmg/design-system/components/button/ButtonGhost";
    
    function Foo() {
        function handleClick() {
            console.log('clicked');
        }
    
        return (
            <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>
        );
    }
    
    Checkbox

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/input/Checkbox.css";
    
    import { Checkbox } from "@fdmg/design-system/components/input/Checkbox";
    
    function Foo() {
        return (
            <Switch
                id="idOfCheckbox"
                label=`Label of the checkbox`
            />
        );
    }
    
    Date input

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/input/TextInput.css";
    
    import { TextInput } from "@fdmg/design-system/components/input/TextInput";
    
    function Foo() {
        return (
            <TextInput id="demoDateInput" type="date" label="Birthday" />
        );
    }
    
    Email input

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/input/TextInput.css";
    
    import { TextInput, Patterns } from "@fdmg/design-system/components/input/TextInput";
    
    function Foo() {
        return (
            <TextInput id="demoEmailInput" type="email" label="E-mail" pattern={Patterns.EMAIL} required={true} />
        );
    }
    
    Mobile input (tel)

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/input/TextInput.css";
    
    import { TextInput, Patterns } from "@fdmg/design-system/components/input/TextInput";
    
    function Foo() {
        return (
            <TextInput id="demoMobileInput" type="tel" label="E-mail" pattern={Patterns.MOBILE} required={true} />
        );
    }
    
    Radio

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/input/Radio.css";
    
    import { Radio } from "@fdmg/design-system/components/input/Radio";
    
    function Foo() {
        return (
            <>
                <Radio
                    id="idOfRadio"
                    name="groupName"
                    label=`Label of the radio button`
                    defaultChecked={true}
                />
                <Radio
                    id="idOfRadio2"
                    name="groupName"
                    label=`Label of the radio button`
                />
            </>
        );
    }
    
    Select

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/input/Select.css";
    
    import { Select } from "@fdmg/design-system/components/input/Select";
    
    function Foo() {
        return (
            <Select
                id="demoSelect"
                label="Aanhef"
                errorMessage="Kies uw aanhef"
                required={true}
                description="Disabled select field"
            >
                <option value="">-- aanhef --</option>
                <option value="dhr">Dhr.</option>
                <option value="mevr">Mevr.</option>
                <option value="mw">Mw.</option>
                <option value="drs">Drs.</option>
                <option value="Prof">Prof.</option>
            </Select>
        );
    }
    
    Switch

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/input/Switch.css";
    
    import { Switch } from "@fdmg/design-system/components/input/Switch";
    
    function Foo() {
        return (
            <Switch
                id="idOfSwitch"
                label=`Label of the switch`
            />
        );
    }
    
    TextArea

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/input/TextArea.css";
    
    import { TextArea } from "@fdmg/design-system/components/input/TextArea";
    
    function Foo() {
        return (
            <TextArea id="demoTextArea" label="Biography" required={true} />
        );
    }
    
    Text input

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/input/TextInput.css";
    
    import { TextInput } from "@fdmg/design-system/components/input/TextInput";
    
    function Foo() {
        return (
            <TextInput id="demoTextInput" label="Name" placeholder="Willem Liu" />
        );
    }
    

    Cards

    Horizontal Card 1

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/card/HorizontalCard1.css";
    
    import { HorizontalCard1 } from "@fdmg/design-system/components/card/HorizontalCard1";
    
    function Foo() {
        return (
            <HorizontalCard1
                id="1343811"
                url="https://fd.nl/ondernemen/1343811/omzet-alfen-in-eerste-coronakwartaal-58"
                imageUrl="https://images.fd.nl/C_yJRp_QqzybEdlK4D6SibEUxiA.jpg?rect=.0,.0,.73375,.9999999999999999&fit=crop&crop=faces&auto=format&q=45&w=300"
                label="Energie"
                time="08:10"
                title="Omzet Alfen stijgt in eerste coronakwartaal met 58%"
            />
        );
    }
    
    Horizontal Card 2

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/card/HorizontalCard2.css";
    
    import { HorizontalCard2 } from "@fdmg/design-system/components/card/HorizontalCard2";
    
    function Foo() {
        return (
            <HorizontalCard2
                id="1343052"
                url="https://fd.nl/futures/1343052/levensgevaarlijk-libanon"
                label="Levensgevaarlijk Libanon"
                time="13:11"
                title="Omgekeerde kruistocht"
                intro="Ondanks een op het eerste gezicht veel gevaarlijker levensstijl, verschilt de levensverwachting van Libanezen nog maar drie jaar met die van ons."
            />
        );
    }
    
    Horizontal Card 3

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/card/HorizontalCard3.css";
    
    import { HorizontalCard3 } from "@fdmg/design-system/components/card/HorizontalCard3";
    
    function Foo() {
        return (
            <HorizontalCard3
                id="1343052"
                url="https://fd.nl/futures/1343052/levensgevaarlijk-libanon"
                label="Levensgevaarlijk Libanon"
                time="13:11"
                title="Omgekeerde kruistocht"
                printTitle="De kruistocht in reverse"
                intro="Ondanks een op het eerste gezicht veel gevaarlijker levensstijl, verschilt de levensverwachting van Libanezen nog maar drie jaar met die van ons."
            />
        );
    }
    
    Hybrid Card 1

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/card/HybridCard1.css";
    
    import { HybridCard1 } from "@fdmg/design-system/components/card/HybridCard1";
    
    function Foo() {
    
        function handleBookmark(e) {
            console.log(e);
        }
    
        return (
            <HybridCard1
                id="1343052"
                url="https://fd.nl/futures/1343052/levensgevaarlijk-libanon"
                imageUrl="https://images.fd.nl/2V1xFJ-1OddgzcJgKmiPOv0t4yY.jpg?fit=crop&crop=faces&auto=format&q=45&w=300"
                imageUrlS="https://images.fd.nl/2V1xFJ-1OddgzcJgKmiPOv0t4yY.jpg?fit=crop&crop=faces&auto=format&q=45&w=300"
                imageUrlM="https://images.fd.nl/2V1xFJ-1OddgzcJgKmiPOv0t4yY.jpg?fit=crop&crop=faces&auto=format&q=45&w=351&h=234"
                imageUrlL="https://images.fd.nl/2V1xFJ-1OddgzcJgKmiPOv0t4yY.jpg?fit=crop&crop=faces&auto=format&q=45&w=599&h=399"
                label="Levensgevaarlijk Libanon"
                time="13:11"
                title="Omgekeerde kruistocht"
                intro="Ondanks een op het eerste gezicht veel gevaarlijker levensstijl, verschilt de levensverwachting van Libanezen nog maar drie jaar met die van ons."
                bookmarked={false}
                onBookmark={handleBookmark}
            />
        );
    }
    
    Hybrid Card 2

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/card/HybridCard2.css";
    
    import { HybridCard2 } from "@fdmg/design-system/components/card/HybridCard2";
    
    function Foo() {
    
        function handleBookmark(e) {
            console.log(e);
        }
    
        return (
            <HybridCard2
                id="1343052"
                url="https://fd.nl/futures/1343052/levensgevaarlijk-libanon"
                label="Levensgevaarlijk Libanon"
                time="13:11"
                title="Omgekeerde kruistocht"
                intro="Ondanks een op het eerste gezicht veel gevaarlijker levensstijl, verschilt de levensverwachting van Libanezen nog maar drie jaar met die van ons."
                bookmarked={false}
                onBookmark={handleBookmark}
            />
        );
    }
    
    Hybrid Card 3

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/card/HybridCard3.css";
    
    import { HybridCard3 } from "@fdmg/design-system/components/card/HybridCard3";
    
    function Foo() {
    
        function handleBookmark(e) {
            console.log(e);
        }
    
        return (
            <HybridCard3
                id="1343052"
                url="https://fd.nl/futures/1343052/levensgevaarlijk-libanon"
                imageUrl="https://images.fd.nl/2V1xFJ-1OddgzcJgKmiPOv0t4yY.jpg?fit=crop&crop=faces&auto=format&q=45&w=300"
                imageUrlS="https://images.fd.nl/2V1xFJ-1OddgzcJgKmiPOv0t4yY.jpg?fit=crop&crop=faces&auto=format&q=45&w=300"
                imageUrlM="https://images.fd.nl/2V1xFJ-1OddgzcJgKmiPOv0t4yY.jpg?fit=crop&crop=faces&auto=format&q=45&w=351&h=234"
                imageUrlL="https://images.fd.nl/2V1xFJ-1OddgzcJgKmiPOv0t4yY.jpg?fit=crop&crop=faces&auto=format&q=45&w=599&h=399"
                label="Levensgevaarlijk Libanon"
                title="Omgekeerde kruistocht"
                intro="Ondanks een op het eerste gezicht veel gevaarlijker levensstijl, verschilt de levensverwachting van Libanezen nog maar drie jaar met die van ons."
                bookmarked={false}
                onBookmark={handleBookmark}
            />
        );
    }
    
    LinkCard

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/card/LinkCard.css";
    
    import { LinkCard } from "@fdmg/design-system/components/card/LinkCard";
    
    function Foo() {
        return (
            <LinkCard
                link="/mijn-nieuws"
                title="Beheer"
                linkText="Ga naar laatste nieuws"
            />
        );
    }
    
    Vertical Card 1

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/card/VerticalCard1.css";
    
    import { VerticalCard1 } from "@fdmg/design-system/components/card/VerticalCard1";
    
    function Foo() {
    
        function handleBookmark(e) {
            console.log(e);
        }
    
        return (
            <VerticalCard1
                id="1343052"
                url="https://fd.nl/futures/1343052/levensgevaarlijk-libanon"
                imageUrl="https://images.fd.nl/Cz9PTU-el_agiaSDvJOfmwrvu6g.jpg?rect=.0%2c.0428571428571429%2c.9999999999999999%2c.95&fit=crop&crop=faces&auto=format&q=45&w=599&h=399"
                imageUrlS="https://images.fd.nl/Cz9PTU-el_agiaSDvJOfmwrvu6g.jpg?rect=.0%2c.0428571428571429%2c.9999999999999999%2c.95&fit=crop&crop=faces&auto=format&q=45&w=599&h=399"
                imageUrlM="https://images.fd.nl/Cz9PTU-el_agiaSDvJOfmwrvu6g.jpg?rect=.0%2c.0428571428571429%2c.9999999999999999%2c.95&fit=crop&crop=faces&auto=format&q=45&w=351&h=234"
                imageUrlL="https://images.fd.nl/Cz9PTU-el_agiaSDvJOfmwrvu6g.jpg?rect=.0%2c.0428571428571429%2c.9999999999999999%2c.95&fit=crop&crop=faces&auto=format&q=45&w=599&h=399"
                label="Levensgevaarlijk Libanon"
                time="13:11"
                title="Omgekeerde kruistocht"
                intro="Ondanks een op het eerste gezicht veel gevaarlijker levensstijl, verschilt de levensverwachting van Libanezen nog maar drie jaar met die van ons."
                bookmarked={false}
                onBookmark={handleBookmark}
            />
        );
    }
    
    Vertical Card 2

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/card/VerticalCard2.css";
    
    import { VerticalCard2 } from "@fdmg/design-system/components/card/VerticalCard2";
    
    function Foo() {
        return (
            <VerticalCard2
                id="1343052"
                url="https://fd.nl/futures/1343052/levensgevaarlijk-libanon"
                imageUrl="https://images.fd.nl/Cz9PTU-el_agiaSDvJOfmwrvu6g.jpg?rect=.0%2c.0428571428571429%2c.9999999999999999%2c.95&fit=crop&crop=faces&auto=format&q=45&w=599&h=399"
                imageUrlS="https://images.fd.nl/Cz9PTU-el_agiaSDvJOfmwrvu6g.jpg?rect=.0%2c.0428571428571429%2c.9999999999999999%2c.95&fit=crop&crop=faces&auto=format&q=45&w=599&h=399"
                imageUrlM="https://images.fd.nl/Cz9PTU-el_agiaSDvJOfmwrvu6g.jpg?rect=.0%2c.0428571428571429%2c.9999999999999999%2c.95&fit=crop&crop=faces&auto=format&q=45&w=351&h=234"
                imageUrlL="https://images.fd.nl/Cz9PTU-el_agiaSDvJOfmwrvu6g.jpg?rect=.0%2c.0428571428571429%2c.9999999999999999%2c.95&fit=crop&crop=faces&auto=format&q=45&w=599&h=399"
                title="Omgekeerde kruistocht"
                intro="Ondanks een op het eerste gezicht veel gevaarlijker levensstijl, verschilt de levensverwachting van Libanezen nog maar drie jaar met die van ons."
            />
        );
    }
    
    Vertical Card 3

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/card/VerticalCard3.css";
    
    import { VerticalCard3 } from "@fdmg/design-system/components/card/VerticalCard3";
    
    function Foo() {
        return (
            <VerticalCard3
                id="1321841"
                url="https://fd.nl/ondernemen/1321841/den-haag-zet-druk-op-pandeigenaren-om-huurverlaging-winkeliers-te-slikken"
                imageUrl="https://fd-external-development.imgix.net/b2ee977d67c3a1b815ed2855a5ae02f2357e6062.jpg?rect=.0%2c.0018761726078799%2c.9999999999999999%2c.99812382739212&fit=crop&crop=faces&auto=format&q=45&w=560&h=315"
                imageUrlS="https://fd-external-development.imgix.net/b2ee977d67c3a1b815ed2855a5ae02f2357e6062.jpg?rect=.0%2c.0018761726078799%2c.9999999999999999%2c.99812382739212&fit=crop&crop=faces&auto=format&q=45&w=560&h=315"
                imageUrlM="https://fd-external-development.imgix.net/b2ee977d67c3a1b815ed2855a5ae02f2357e6062.jpg?rect=.0%2c.0637898686679174%2c.9999999999999999%2c.8442776735459663&fit=crop&crop=faces&auto=format&q=45&w=944&h=531"
                imageUrlL="https://fd-external-development.imgix.net/b2ee977d67c3a1b815ed2855a5ae02f2357e6062.jpg?rect=.0%2c.0637898686679174%2c.9999999999999999%2c.8442776735459663&fit=crop&crop=faces&auto=format&q=45&w=944&h=531"
                label="Detailhandel"
                title="Den Haag zet druk op verhuurders om huurverlaging te slikken"
                intro="Het Rijk sluit overheidsingrijpen niet uit om een akkoord tussen verhuurders en winkeliers af te dwingen, nu onderhandelingen moeizaam verlopen."
            />
        );
    }
    

    Misc.

    A/B Testing component

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/ab/ab.css"; // For debug options layout
    
    import { Experiment, Variant, ABProvider } from "@fdmg/design-system/components/ab/ab";
    
    function Foo() {
        return (
            <ABProvider>
                <Experiment
                    name="globally-unique-experiment-name"
                    debugUriParam="ABdebug=true"
                    onClick={console.log}
                    onRunExperiment={console.log}
                >
                    <Variant name="A" onClick={console.log}>
                        <h1>Headline 1</h1>
                    </Variant>
                    <Variant name="B" onClick={console.log}>
                        <h1>Headline 2</h1>
                    </Variant>
                </Experiment>
            </ABProvider>
        );
    }
    
    Accordion

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/accordion/Accordion.css";
    
    import { Accordion } from '@fdmg/design-system/components/accordion/Accordion';
    
    function Foo() {
        return (
            <Accordion items={[
                {
                    title: 'title',
                    content: <span>description</span>,
                },
            ]} />
        );
    }
    
    AuthorInfo

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/author-info/AuthorInfo.css";
    
    import { AuthorInfo } from '@fdmg/design-system/components/author-info/AuthorInfo';
    
    function Foo() {
        return (
            <AuthorInfo
                description={
                    <p>
                        Nelleke Trappenburg schrijft bij het FD over pensioenen:
                        dekkingsgraden, beleggingskosten, nieuwe wetgeving etc.
                        Eerder werkte zij onder meer op de beursredactie.
                    </p>
                }
                imageUrl="https://images.fd.nl/ffa583e0c7fbc666934ecc326a88defc2773f4e9.jpeg?fit=crop&amp;crop=faces&amp;auto=format&amp;q=45&amp;cs=tinysrgb&amp;w=640&amp;h=640&amp;fm=jpg"
                title="Nelleke Trappenburg"
                followed={mode === 'dark'}
                onEmailClick={() => {}}
                onFollowAuthorClick={() => {}}
                onLinkedInClick={() => {}}
                onTwitterClick={() => {}}
            />
        );
    }
    
    CookieConsent

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/cookieconsent/CookieConsent.css";
    
    import { CookieConsent } from '@fdmg/design-system/components/cookieconsent/CookieConsent';
    
    function Foo() {
        return (
            <CookieConsent
                description={
                    <>
                        <p>
                            FD Mediagroep (FDMG) en de daarbij horende
                            website: FD.nl en door haar geselecteerde
                            Partners hebben toegang tot uw gegevens en
                            gebruiken deze informatie voor de onderstaande
                            doeleinden. Klik op een doel om uw voorkeuren
                            aan te passen en om meer te weten te komen over
                            wie er om uw toestemming vraagt en/of rechtmatig
                            belang claimt om uw gegevens voor dat doel te
                            verwerken. Houd er rekening mee dat wanneer alle
                            doeleinden zijn geweigerd, dit een negatief
                            effect op bepaalde functies van de website kan
                            hebben.
                        </p>
                        <p>
                            Voor sommige doeleinden kunnen jouw
                            persoonsgegevens worden verwerkt op de
                            juridische grond van rechtmatig belang
                        </p>
                    </>
                }
                title={
                    <header className={styles.header}>
                        <h1>Cookies</h1>
                    </header>
                }
                opened={true}
                onClose={() => {}}
            />
        );
    }
    
    LockedContent

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/cookieconsent/CookieConsent.css";
    
    import { LockedContent } from '@fdmg/design-system/components/cookieconsent/CookieConsent';
    
    function Foo() {
        return (
            <LockedContent
                vendorName="youtube"
                lockDescription={
                    <p>
                        In verband met de door u gekozen
                        cookievoorkeuren kunnen wij deze Youtube-video
                        niet tonen. Klik hier om akkoord te gaan met de
                        cookievoorkeuren die nodig zijn om deze
                        Youtube-video te laden.
                    </p>
                }
            >
                <div className="embed-container">
                    <iframe
                        width="560"
                        height="315"
                        src="https://www.youtube-nocookie.com/embed/T_tN4CnushY"
                        frameBorder="0"
                        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                        allowFullScreen
                    />
                </div>
            </LockedContent>
        );
    }
    
    Grid

    The CSS Grid is an external component and can be found here: Demo Source

    Modal

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/modal/Modal.css";
    
    import { Modal } from '@fdmg/design-system/components/modal/Modal';
    
    function Foo() {
        return (
            <Modal opened={true} onClose={() => {}>
                <>
                    <h2>Abonnement wijzigen of opzeggen</h2>
                    <p>
                        Voor wijzigingen kunt u elk moment bellen. Voor
                        opzeggen geeft u dit uiterlijk 1 maand voor het
                        einde van de abonnements- of actieperiode
                        telefonisch door aan Klantenservice
                    </p>
                    <p>
                        <a href="tel:0800 666 6667">0800 666 6667</a>{' '}
                        (gratis, ma t/m vr 07.30 - 18.00 uur en za 07.30 -
                        11.30 uur).
                    </p>
                    <p>
                        Ook kijken we graag samen met u naar een
                        abonnementsvorm die wellicht beter bij u past.
                    </p>
                </>
            </Modal>
        );
    }
    
    StockTicker

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    import "@fdmg/design-system/components/stockticker/StockTicker.css";
    
    import { StockTicker } from "@fdmg/design-system/components/stockticker/StockTicker";
    
    function Foo() {
        return (
            <StockTicker
                title=`Lees ook`,
                links=[
                    `A <a href="http://fd.nl">link</a>`,
                    `Another <a href="https://www.willemliu.nl">link</a>`
                ]
            />
        );
    }
    
    Typography

    Demo

    Component CSS:

    import "@fdmg/design-system/components/design-tokens/design-tokens.css";
    
    function Foo() {
        return (
            <h1 className="heading serif xs">Heading xs</h1>
            <h1 className="heading serif s">Heading s</h1>
            <h1 className="heading serif m">Heading m</h1>
            <h1 className="heading serif l">Heading l</h1>
            <h1 className="heading serif xl">Heading xl</h1>
            <h1 className="heading serif xxl">Heading xxl</h1>
    
            <h1 className="heading sans xs">Heading xs</h1>
            <h1 className="heading sans s">Heading s</h1>
            <h1 className="heading sans m">Heading m</h1>
            <h1 className="heading sans l">Heading l</h1>
            <h1 className="heading sans xl">Heading xl</h1>
            <h1 className="heading sans xxl">Heading xxl</h1>
    
            <p className="body-text serif xs">body-text serif xs</p>
            <p className="body-text serif s">body-text serif s</p>
            <p className="body-text serif m">Reserved</p>
            <p className="body-text serif l">Reserved</p>
            <p className="body-text serif xl">Reserved</p>
            <p className="body-text serif xxl">Reserved</p>
    
            <p className="body-text serif xs bold">
                body-text serif xs bold
            </p>
            <p className="body-text serif s bold">
                body-text serif s bold
            </p>
            <p className="body-text serif m bold">Reserved</p>
            <p className="body-text serif l bold">Reserved</p>
            <p className="body-text serif xl bold">Reserved</p>
            <p className="body-text serif xxl bold">Reserved</p>
    
            <p className="body-text sans xs">body-text sans xs</p>
            <p className="body-text sans s">body-text sans s</p>
            <p className="body-text sans m">body-text sans m</p>
            <p className="body-text sans l">Reserved</p>
            <p className="body-text sans xl">Reserved</p>
            <p className="body-text sans xxl">Reserved</p>
    
            <p className="body-text sans xs bold">
                body-text sans xs bold
            </p>
            <p className="body-text sans s bold">
                body-text sans s bold
            </p>
            <p className="body-text sans m bold">
                body-text sans m bold
            </p>
            <p className="body-text sans l bold">Reserved</p>
            <p className="body-text sans xl bold">Reserved</p>
            <p className="body-text sans xxl bold">Reserved</p>
    
        );
    }
    

    Keywords

    none

    Install

    npm i @fdmg/design-system

    DownloadsWeekly Downloads

    633

    Version

    0.4.42

    License

    ISC

    Unpacked Size

    1.35 MB

    Total Files

    191

    Last publish

    Collaborators

    • avatar
    • avatar