13.0.15 • Published 11 months ago

@sb1/ffe-datepicker v13.0.15

Weekly downloads
280
License
MIT
Repository
-
Last release
11 months ago

@sb1/ffe-datepicker

This package contains styles for the ffe-datepicker.

Install

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.

All styles

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

@import 'node_modules/@sb1/ffe-datepicker/less/datepicker.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)

<div class="ffe-datepicker">
    <!-- see dateinput section below -->
    <!-- see calendar section below -->
</div>

Only date input styles

@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)

<div class="ffe-dateinput">
    <input class="ffe-dateinput__field ffe-input-field" type="text" />
    <svg class="ffe-dateinput__icon">
        <path ... />
    </svg>
</div>

Only the calendar styles

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

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

<div class="ffe-calendar ffe-calendar--datepicker">
    <div class="ffe-calendar__header">
        <div class="ffe-calendar__header-inner-wrapper">
            <button class="ffe-calendar__month-nav ffe-calendar__previous">
                <svg class="ffe-calendar__icon-prev">
                    <path ... />
                </svg>
            </button>
            <header class="ffe-calendar__title">
                <div id="ffe-calendar-499__month-label">
                    <span class="ffe-calendar__month">Juni</span>
                    <span class="ffe-calendar__year">2016</span>
                </div>
            </header>
            <button class="ffe-calendar__month-nav ffe-calendar__next">
                <svg class="ffe-calendar__icon-next">
                    <path ... />
                </svg>
            </button>
        </div>
    </div>
    <table class="ffe-calendar__grid">
        <thead>
            <tr>
                <th class="ffe-calendar__weekday">
                    <span>Man</span>
                </th>
                <th class="ffe-calendar__weekday">
                    <span>Tir</span>
                </th>
                <th class="ffe-calendar__weekday">
                    <span>Ons</span>
                </th>
                <th class="ffe-calendar__weekday">
                    <span>Tor</span>
                </th>
                <th class="ffe-calendar__weekday">
                    <span>Fre</span>
                </th>
                <th class="ffe-calendar__weekday">
                    <span>Lør</span>
                </th>
                <th class="ffe-calendar__weekday">
                    <span>Søn</span>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="ffe-calendar__day">
                    <span class="ffe-calendar__date">1</span>
                </td>
                <td class="ffe-calendar__day">
                    <span class="ffe-calendar__date">2</span>
                </td>
                <td class="ffe-calendar__day">
                    <span class="ffe-calendar__date">3</span>
                </td>
                <td class="ffe-calendar__day">
                    <span class="ffe-calendar__date">4</span>
                </td>
                <td class="ffe-calendar__day">
                    <span class="ffe-calendar__date">5</span>
                </td>
                <td class="ffe-calendar__day">
                    <span class="ffe-calendar__date">6</span>
                </td>
                <td class="ffe-calendar__day">
                    <span class="ffe-calendar__date">7</span>
                </td>
            </tr>
            <tr>
                ... More td
            </tr>
            <tr>
                ... More td
            </tr>
            <tr>
                ... More td
            </tr>
            <tr>
                ... More td
            </tr>
        </tbody>
    </table>
</div>

Theming with CSS custom properties

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:

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

Development

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

npm install
npm run build
npm start

A local instance of component-overview with live reloading will run at http://localhost:1234/.

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

13.0.15

11 months ago

13.0.12

12 months ago

13.0.13

12 months ago

13.0.14

12 months ago

13.0.11

1 year ago

13.0.10

1 year ago

13.0.8

1 year ago

13.0.9

1 year ago

13.0.6

1 year ago

13.0.7

1 year ago

13.0.4

1 year ago

13.0.5

1 year ago

13.0.2

1 year ago

13.0.3

1 year ago

12.0.57

1 year ago

12.0.56

1 year ago

12.0.59

1 year ago

12.0.58

1 year ago

12.0.53

1 year ago

12.0.52

1 year ago

12.0.55

1 year ago

12.0.54

1 year ago

12.0.51

1 year ago

12.0.50

1 year ago

12.0.49

1 year ago

12.0.46

1 year ago

12.0.45

1 year ago

12.0.48

1 year ago

12.0.47

1 year ago

12.0.42

1 year ago

12.0.41

1 year ago

12.0.44

1 year ago

12.0.43

1 year ago

13.0.0

1 year ago

13.0.1

1 year ago

12.0.40

1 year ago

12.0.39

1 year ago

12.0.38

1 year ago

12.0.37

1 year ago

12.0.36

1 year ago

12.0.35

1 year ago

12.0.34

1 year ago

12.0.33

1 year ago

12.0.31

1 year ago

12.0.32

1 year ago

12.0.30

1 year ago

12.0.29

1 year ago

12.0.28

1 year ago

12.0.27

1 year ago

12.0.26

1 year ago

12.0.25

1 year ago

12.0.23

1 year ago

12.0.22

2 years ago

12.0.21

2 years ago

12.0.20

2 years ago

12.0.19

2 years ago

12.0.18

2 years ago

12.0.17

2 years ago

12.0.16

2 years ago

12.0.13

2 years ago

12.0.15

2 years ago

12.0.14

2 years ago

12.0.12

2 years ago

12.0.11

2 years ago

12.0.10

2 years ago

12.0.9

2 years ago

12.0.8

2 years ago

12.0.7

2 years ago

12.0.6

2 years ago

12.0.5

2 years ago

12.0.3

2 years ago

12.0.4

2 years ago

12.0.0

2 years ago

12.0.1

2 years ago

12.0.2

2 years ago

11.1.1

2 years ago

11.1.0

2 years ago

11.0.9

2 years ago

11.0.8

2 years ago

11.0.7

2 years ago

11.0.6

2 years ago

11.0.5

2 years ago

11.0.4

3 years ago

11.0.2

3 years ago

11.0.3

3 years ago

11.0.0

3 years ago

11.0.1

3 years ago

10.0.46

3 years ago

10.0.45

3 years ago

10.0.44

3 years ago

10.0.43

3 years ago

10.0.48

3 years ago

10.0.47

3 years ago

10.1.0

3 years ago

10.1.1

3 years ago

10.1.2

3 years ago

10.0.42

3 years ago

10.0.41

3 years ago

10.0.40

3 years ago

10.0.39

3 years ago

10.0.35

3 years ago

10.0.34

3 years ago

10.0.38

3 years ago

10.0.37

3 years ago

10.0.36

3 years ago

10.0.33

3 years ago

10.0.32

3 years ago

10.0.31

3 years ago

10.0.30

3 years ago

10.0.29

3 years ago

10.0.28

3 years ago

10.0.27

3 years ago

10.0.24

4 years ago

10.0.23

4 years ago

10.0.22

4 years ago

10.0.21

4 years ago

10.0.26

4 years ago

10.0.25

4 years ago

10.0.20

4 years ago

10.0.19

4 years ago

10.0.18

4 years ago

10.0.17

4 years ago

10.0.16

4 years ago

10.0.15

4 years ago

10.0.14

4 years ago

10.0.13

4 years ago

10.0.12

4 years ago

10.0.11

4 years ago

10.0.10

4 years ago

10.0.9

4 years ago

10.0.8

4 years ago

10.0.5

4 years ago

10.0.6

4 years ago

10.0.7

4 years ago

10.0.4

4 years ago

10.0.3

4 years ago

10.0.2

4 years ago

10.0.1

4 years ago

10.0.0

4 years ago

9.0.0

4 years ago

8.0.11

4 years ago

8.0.10

4 years ago

8.0.9

4 years ago

8.0.8

4 years ago

8.0.7

4 years ago

8.0.6

5 years ago

8.0.5

5 years ago

8.0.4

5 years ago

8.0.3

5 years ago

8.0.2

5 years ago

8.0.1

5 years ago

8.0.0

5 years ago

7.0.2

5 years ago

7.0.1

5 years ago

7.0.0

5 years ago

6.0.17

5 years ago

6.0.16

5 years ago

6.0.15

5 years ago

6.0.14

5 years ago

6.0.13

5 years ago

6.0.12

5 years ago

6.0.11

5 years ago

6.0.10

5 years ago

6.0.9

5 years ago

6.0.8

6 years ago

6.0.7

6 years ago

6.0.6

6 years ago

6.0.5

6 years ago

6.0.4

6 years ago

6.0.3

6 years ago

6.0.2

6 years ago

6.0.1

6 years ago

6.0.0

6 years ago

5.2.0

6 years ago

5.1.5

6 years ago

5.1.4

6 years ago

5.1.3

6 years ago

5.1.2

6 years ago

5.1.1

6 years ago

5.1.0

6 years ago

5.0.54

6 years ago

5.0.53

6 years ago

5.0.52

6 years ago

5.0.51

6 years ago

5.0.50

6 years ago

5.0.49

6 years ago

5.0.48

6 years ago

5.0.47

6 years ago

5.0.46

7 years ago

5.0.45

7 years ago

5.0.44

7 years ago

5.0.43

7 years ago

5.0.42

7 years ago

5.0.41

7 years ago

5.0.40

7 years ago

5.0.39

7 years ago

5.0.38

7 years ago

5.0.37

7 years ago

5.0.36

7 years ago

5.0.35

7 years ago

5.0.34

7 years ago

5.0.33

7 years ago

5.0.32

7 years ago

5.0.31

7 years ago

5.0.30

7 years ago

5.0.29

7 years ago

5.0.28

7 years ago

5.0.27

7 years ago

5.0.26

7 years ago

5.0.25

7 years ago

5.0.24

7 years ago

5.0.23

7 years ago

5.0.22

7 years ago

5.0.21

7 years ago

5.0.20

7 years ago

5.0.19

7 years ago

5.0.18

7 years ago

5.0.17

7 years ago

5.0.16

7 years ago

5.0.15

7 years ago

5.0.14

7 years ago

5.0.13

7 years ago

5.0.12

7 years ago

5.0.11

7 years ago

5.0.10

7 years ago

5.0.9

7 years ago

5.0.8

7 years ago

5.0.7

7 years ago

5.0.6

7 years ago

5.0.5

7 years ago

5.0.4

7 years ago

5.0.3

8 years ago

5.0.2

8 years ago

5.0.1

8 years ago

5.0.0

8 years ago