Neptunian Parity Mnemonic

    @kpn-style/react

    1.2.2 • Public • Published

    KPN STYLE REACT

    Lightweight, easy to use, react components for kpn-style

    Github Actions npm package Conventional Commits GitHub

    import { Button } from "@kpn-style/react";
    
    <Button>KPN</Button>;

    Documentation for react components: https://kpn.github.io/kpn-style-react/

    Documentation for styles: https://style.kpn.com/


    Installation

    yarn add @kpn-style/bundle @kpn-style/react

    This components require kpn-style in order to properly display the components.

    Configuration

    You'll need to import the css or the scss from kpn-style.

    In your main scss file import:

    @import "~@kpn-style/bundle/bundle";
    @include font-face(
      "kpn-ui-icons",
      normal,
      400,
      "~@kpn-style/bundle/base/ui-icon",
      "kpn-ui-icons"
    );

    Read more in the official docs

    Usage

    Import components as you go

    import {
      Button,
      Card,
      CardBody,
      CardFooter,
      CardHeader,
      CardList,
      CardTitle
    } from "@kpn-style/react";
    
    <Button>KPN</Button>;
    
    <Card>
      <CardHeader>
        <CardTitle>Lorem ipsum</CardTitle>
      </CardHeader>
      <CardBody>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
        eiusmod tempor. Nemo enim ipsam voluptatem quia, voluptas sit
        aspernatur aut, odit aut fugit.
      </CardBody>
    </Card>

    Documentation

    Each component is documented in a storybook. Running the storybook locally:

    yarn start

    TODO

    • [ ] Add more components

    Contributing

    All contributions are welcome

    1. Fork this repository
    2. Clone your fork
    3. Install deps: yarn install
    4. Commit changes using conventional commits
    5. Push changes

    Notes:

    • This repo uses conventional-commits
    • Conventional commits and prettier are enforced in git hooks.
    • Run your tests and eslint before pushing in order to avoid problems.
    yarn run test
    yarn run lint

    Creating a new component

    All components follow the same approach, they must receive tag and className as a prop. You can use a script to create the backbone of your component:

    ./scripts/new-component Card

    Install

    npm i @kpn-style/react

    DownloadsWeekly Downloads

    1

    Version

    1.2.2

    License

    MIT

    Unpacked Size

    818 kB

    Total Files

    255

    Last publish

    Collaborators

    • benbesuijen
    • coenkoopmans
    • jordy.bulten
    • woile