@sb1/ffe-datepicker

This package contains styles for the ffe-datepicker.

Install

``bash
npm install --save @sb1/ffe-datepicker
`

Usage

Full documentation on datepicker usage is available at https://design.sparebank1.no/komponenter/skjemaelementer/#datepicker.

The styles for this package can be used in 3 different ways depending on what you want.
For All styles or Only date input you will need the @sb1/ffe-form package in your project.

$3

You need styles for both the dateinput field and the calendar.

`css
@import 'node_modules/@sb1/ffe-datepicker/less/datepicker.less';
@import 'node_modules/@sb1/ffe-form/less/form.less';
`

$3

If your project does not use Less, you can import the compiled styling:

`css
@import '~@sb1/ffe-datepicker/css/datepicker.css';
`

Example HTML stucture with classes. (Aria-tags and other attributes have been removed for clarity)

`html


`css
@import 'node_modules/@sb1/ffe-datepicker/less/dateinput.less';
@import 'node_modules/@sb1/ffe-form/less/form.less';
`

Example HTML stucture with classes. (Aria-tags and other attributes have been removed for clarity)

`html


`css
@import 'node_modules/@sb1/ffe-datepicker/less/calendar.less';
`

Example HTML stucture with classes. (Aria-tags and other attributes have been removed for clarity)

`html


In order to support theming of components, this package contains styling that depends on a set of custom properties, defined in less/theme.less. These properties in turn depend on a base theme defined in ffe-core.

If your project uses the ffe-core, you're probably good to go. If not, make sure to import the core properties in theme.less:

`css
@import '~@sb1/ffe-core/less/theme';
`

Development

To start a local development server, run the following from the designsystem root folder:

`bash
npm install
npm run build
npm start
`

A local instance of Storybook` with live reloading will run at http://localhost:6006/.

Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.