KPN STYLE REACT

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

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