Compare commits

..
Author SHA1 Message Date
github-actions[bot] 0128f5a467 Lerna versionbump [ci skip]
- @navikt/ds-icons@0.8.1
 - @navikt/ds-react@0.15.2
 - @navikt/ds-react-internal@0.10.2
2022-01-31 14:20:25 +00:00
KenandKenAJoh 0a61ab629a [FIX] Ikonsynk Figma (#1405)
Co-authored-by: KenAJoh <KenAJoh@users.noreply.github.com>
2022-01-31 15:13:25 +01:00
github-actions[bot] 4ea5face0c Lerna versionbump [ci skip]
- @navikt/ds-css@0.14.1
 - @navikt/ds-react@0.15.1
 - @navikt/ds-react-internal@0.10.1
2022-01-28 11:54:39 +00:00
Andreas NordahlandKen 248a83221a [fix] Indeterminate checkbox (#1404)
* functional

* styles

* flyttet global token til root

Co-authored-by: Ken <ken.aleksander@gmail.com>
2022-01-28 12:47:01 +01:00
github-actions[bot] eceaa7e659 Lerna versionbump [ci skip]
- @navikt/ds-css@0.14.0
 - @navikt/ds-icons@0.8.0
 - @navikt/ds-react@0.15.0
 - @navikt/ds-react-internal@0.10.0
2022-01-28 09:24:05 +00:00
KenandAndreas Nordahl 811c0024c5 [FEATURE] AccordionMenu -> Menu
Co-authored-by: Andreas Nordahl <andnorda@gmail.com>
2022-01-28 10:17:16 +01:00
Andreas Nordahl aaefaddb13 Purge doc stories (#1403) 2022-01-27 17:31:53 +01:00
github-actions[bot] f464347f6e Lerna versionbump [ci skip]
- @navikt/ds-css@0.13.0
 - @navikt/ds-tokens@0.8.0
2022-01-27 09:54:20 +00:00
github-actions[bot]andKenAJoh 6608d01c1e [FEATURE] Tokens sync Figma (#1402)
Co-authored-by: KenAJoh <KenAJoh@users.noreply.github.com>
2022-01-27 10:47:08 +01:00
github-actions[bot] 335bc62922 Lerna versionbump [ci skip]
- @navikt/ds-css@0.12.14
 - @navikt/ds-react@0.14.15
 - @navikt/ds-react-internal@0.9.15
2022-01-22 17:20:09 +00:00
Ken 3c230d8f4c [FIX] Accordion: Figma 3.0 Beta sync (#1390) 2022-01-22 18:12:10 +01:00
Ken 5bb7de3b4c [ci skip] readme link fix 2022-01-22 18:09:47 +01:00
50 changed files with 801 additions and 844 deletions

No files matched your search

-105
View File
@@ -1,105 +0,0 @@
:root {
--navds-accordion-menu-color-text: var(--navds-semantic-color-link);
--navds-accordion-menu-color-text-focus: var(--navds-semantic-color-text);
--navds-accordion-menu-color-background-hover: var(
--navds-global-color-blue-50
);
--navds-accordion-menu-color-text-active: var(--navds-semantic-color-text);
--navds-accordion-menu-outline-focus: var(--navds-semantic-color-focus);
}
.navds-accordion-menu__list {
list-style: none;
margin: 0;
padding: 0;
font-weight: var(--navds-font-weight-bold);
}
.navds-accordion-menu-collapsable__button {
cursor: pointer;
background-color: transparent;
border: none;
font: inherit;
text-align: inherit;
margin: 0;
padding: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: var(--navds-font-weight-bold);
color: var(--navds-accordion-menu-color-text);
text-decoration: underline;
}
.navds-accordion-menu-item,
.navds-accordion-menu-collapsable__button {
display: flex;
padding: var(--navds-spacing-3) var(--navds-spacing-4);
text-decoration: none;
}
.navds-accordion-menu-collapsable__expand-icon {
font-size: 1.5rem;
color: var(--navds-accordion-menu-color);
flex-shrink: 0;
margin-left: var(--navds-spacing-2);
}
.navds-accordion-menu-collapsable--open
> .navds-accordion-menu-collapsable__button
> .navds-accordion-menu-collapsable__expand-icon {
transform: rotate(180deg);
}
.navds-accordion-menu-collapsable .navds-accordion-menu-item,
.navds-accordion-menu-collapsable
.navds-accordion-menu-collapsable
.navds-accordion-menu-collapsable__button {
padding-left: var(--navds-spacing-8);
}
.navds-accordion-menu-collapsable
.navds-accordion-menu-collapsable
.navds-accordion-menu-item,
.navds-accordion-menu-collapsable
.navds-accordion-menu-collapsable
.navds-accordion-menu-collapsable
.navds-accordion-menu-collapsable__button {
padding-left: var(--navds-spacing-12);
}
.navds-accordion-menu-collapsable
.navds-accordion-menu-collapsable
.navds-accordion-menu-collapsable
.navds-accordion-menu-item,
.navds-accordion-menu-collapsable
.navds-accordion-menu-collapsable
.navds-accordion-menu-collapsable
.navds-accordion-menu-collapsable
.navds-accordion-menu-collapsable__button {
padding-left: var(--navds-spacing-16);
}
.navds-accordion-menu-item:focus,
.navds-accordion-menu-collapsable__button:focus {
outline: 3px solid var(--navds-accordion-menu-outline-focus);
outline-offset: -3px;
color: var(--navds-accordion-menu-color-text-focus);
}
.navds-accordion-menu-collapsable__button:focus
> .navds-accordion-menu-collapsable__expand-icon {
color: var(--navds-accordion-menu-color-focus);
}
.navds-accordion-menu-item:hover,
.navds-accordion-menu-collapsable__button:hover {
background-color: var(--navds-accordion-menu-color-background-hover);
}
.navds-accordion-menu-item--active {
box-shadow: inset 0.5rem 0 var(--navds-semantic-color-link);
color: var(--navds-accordion-menu-color-text-active);
text-decoration: none;
}
+46 -24
View File
@@ -4,11 +4,16 @@
---navds-semantic-color-component-background-light
);
--navds-accordion-color-text-hover: var(--navds-semantic-color-link);
--navds-accordion-color-border: var(--navds-semantic-color-border-muted);
--navds-accordion-color-border-hover: var(
--navds-semantic-color-interaction-primary
);
--navds-accordion-color-border-focus: var(
---navds-semantic-color-component-background-light
--navds-accordion-color-text-open: var(--navds-semantic-color-text);
--navds-accordion-color-text-open-hover: var(
--navds-semantic-color-interaction-primary
);
--navds-accordion-color-background-open: var(
--navds-semantic-color-interaction-primary-hover-subtle
);
}
@@ -20,16 +25,53 @@
background: var(--navds-accordion-color-background);
}
.navds-accordion__header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--navds-spacing-4);
padding: var(--navds-spacing-4) var(--navds-spacing-3);
margin: 0;
text-align: left;
background: transparent;
cursor: pointer;
border: none;
border-bottom: 2px solid var(--navds-accordion-color-border);
}
.navds-accordion__header:focus {
outline: none;
box-shadow: var(--navds-shadow-focus);
border-color: var(--navds-accordion-color-border-focus);
}
.navds-accordion__header:hover {
color: var(--navds-accordion-color-text-hover);
border-color: var(--navds-accordion-color-border-hover);
text-decoration: underline;
}
.navds-accordion__item--open > .navds-accordion__header {
background-color: var(--navds-accordion-color-background-open);
color: var(--navds-accordion-color-text-open);
border-color: transparent;
}
.navds-accordion__item--open > .navds-accordion__header:hover {
border-color: transparent;
color: var(--navds-accordion-color-text-open-hover);
}
.navds-accordion__content {
color: var(--navds-accordion-color-text);
padding: var(--navds-spacing-5) var(--navds-spacing-3) var(--navds-spacing-10);
border-bottom: 2px solid var(--navds-accordion-color-border);
}
.navds-accordion__item--open
> .navds-accordion__header:hover
+ *
.navds-accordion__content {
border-color: var(--navds-accordion-color-border-hover);
}
.navds-accordion__expand-icon {
@@ -42,26 +84,6 @@
transform: rotateZ(180deg);
}
.navds-accordion__header {
padding: var(--navds-spacing-4) var(--navds-spacing-3);
background: transparent;
text-align: left;
border: none;
width: 100%;
margin: 0;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid #a0a0a0;
gap: var(--navds-spacing-4);
}
.navds-accordion__content {
color: var(--navds-accordion-color-text);
padding: var(--navds-spacing-5) var(--navds-spacing-3) var(--navds-spacing-10);
}
.navds-accordion__expand-icon--filled {
display: none;
}
+31 -8
View File
@@ -1,6 +1,6 @@
:root {
--navds-radio-checkbox-color-background: var(
--navds-semantic-color-canvas-background-light
--navds-semantic-color-component-background-light
);
--navds-radio-checkbox-color-background-hover: var(
--navds-semantic-color-interaction-primary-hover-subtle
@@ -107,6 +107,29 @@
var(--navds-shadow-focus);
}
.navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
box-shadow: none;
background-color: var(--navds-radio-checkbox-color-background-checked);
}
.navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
content: "";
position: absolute;
top: 50%;
transform: translate(0.375rem, -50%);
background-color: var(--navds-radio-checkbox-color-background);
width: 0.75rem;
height: 0.25rem;
border-radius: 1px;
flex-shrink: 0;
}
.navds-checkbox--small
.navds-checkbox__input:indeterminate
+ .navds-checkbox__label::after {
transform: translate(0.25rem, -50%);
}
.navds-checkbox__input:checked + .navds-checkbox__label::before {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
background-position: 6px center;
@@ -121,7 +144,7 @@
+ .navds-checkbox__label::before {
background-position: 4px center;
}
.navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
box-shadow: inset 0 0 0 1px white, var(--navds-shadow-focus);
}
@@ -142,28 +165,28 @@
color: var(--navds-radio-checkbox-color-label-hover);
}
.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:focus)
.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
+ .navds-checkbox__label::before,
.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus)
.navds-radio__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
+ .navds-radio__label::before {
box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-hover);
background-color: var(--navds-radio-checkbox-color-background-hover);
}
.navds-checkbox--error
> .navds-checkbox__input:not(:hover):not(:disabled):not(:checked)
> .navds-checkbox__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+ .navds-checkbox__label::before,
.navds-radio--error
> .navds-radio__input:not(:hover):not(:disabled):not(:checked)
> .navds-radio__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+ .navds-radio__label::before {
box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-error);
}
.navds-checkbox--error
> .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked)
> .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+ .navds-checkbox__label::before,
.navds-radio--error
> .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked)
> .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+ .navds-radio__label::before {
box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-error),
var(--navds-shadow-focus);
+1 -1
View File
@@ -3,7 +3,6 @@
@import "grid.css";
@import "accordion.css";
@import "accordion-menu.css";
@import "alert.css";
@import "button.css";
@import "content-container.css";
@@ -12,6 +11,7 @@
@import "help-text.css";
@import "link.css";
@import "loader.css";
@import "menu.css";
@import "modal.css";
@import "popover.css";
@import "tag.css";
+102
View File
@@ -0,0 +1,102 @@
:root {
--navds-menu-color-text: var(--navds-semantic-color-link);
--navds-menu-color-text-hover: var(--navds-semantic-color-text);
--navds-menu-color-text-focus: var(--navds-semantic-color-text);
--navds-menu-color-background-hover: var(--navds-global-color-blue-50);
--navds-menu-color-text-active: var(--navds-semantic-color-text);
--navds-menu-outline-focus: var(--navds-semantic-color-focus);
}
.navds-menu__list {
list-style: none;
margin: 0;
padding: 0;
padding: 0 0.5rem;
}
.navds-menu__list--inner {
padding: 0;
}
.navds-menu-collapse__button {
cursor: pointer;
background-color: transparent;
border: none;
font: inherit;
text-align: inherit;
margin: 0;
width: 100%;
justify-content: space-between;
align-items: center;
font-weight: var(--navds-font-weight-bold);
color: var(--navds-menu-color-text);
}
.navds-menu-item,
.navds-menu-collapse__button {
font-weight: var(--navds-font-weight-bold);
display: flex;
padding: var(--navds-spacing-3) var(--navds-spacing-2);
text-decoration: none;
}
.navds-menu-item:focus,
.navds-menu-collapse__button:focus {
outline: 3px solid var(--navds-menu-outline-focus);
outline-offset: -3px;
color: var(--navds-menu-color-text-focus);
}
.navds-menu-collapse__button:focus > .navds-menu-collapse__expand-icon {
color: var(--navds-menu-color-focus);
}
.navds-menu-item:hover,
.navds-menu-collapse__button:hover {
background-color: var(--navds-menu-color-background-hover);
color: var(--navds-menu-color-text-hover);
}
.navds-menu-item--active {
box-shadow: -0.5rem 0 var(--navds-semantic-color-link);
color: var(--navds-menu-color-text-active);
text-decoration: none;
}
/* Collapse icon */
.navds-menu-collapse__expand-icon {
font-size: 1.5rem;
flex-shrink: 0;
margin-left: var(--navds-spacing-2);
}
.navds-menu-collapse__expand-icon--filled,
.navds-menu-collapse__button:hover > .navds-menu-collapse__expand-icon {
display: none;
}
.navds-menu-collapse__button:hover > .navds-menu-collapse__expand-icon--filled {
display: block;
}
.navds-menu-collapse--open
> .navds-menu-collapse__button
> .navds-menu-collapse__expand-icon {
transform: rotate(180deg);
}
/* Nesting levels */
.navds-menu__list[data-depth="1"] .navds-menu-collapse__button,
.navds-menu__list[data-depth="1"] .navds-menu-item {
padding-left: var(--navds-spacing-6);
}
.navds-menu__list[data-depth="2"] .navds-menu-collapse__button,
.navds-menu__list[data-depth="2"] .navds-menu-item {
padding-left: var(--navds-spacing-10);
}
.navds-menu__list[data-depth="3"] .navds-menu-collapse__button,
.navds-menu__list[data-depth="3"] .navds-menu-item {
padding-left: var(--navds-spacing-14);
}
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/ds-css",
"version": "0.12.13",
"version": "0.14.1",
"private": false,
"description": "Css for NAV Designsystem components",
"author": "NAV Designsystem team",
@@ -21,7 +21,7 @@
"watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
},
"devDependencies": {
"@navikt/ds-tokens": "^0.7.1",
"@navikt/ds-tokens": "^0.8.0",
"normalize.css": "^8.0.1",
"postcss": "^8.3.6",
"postcss-cli": "^8.3.1",
+4 -3
View File
@@ -22,9 +22,10 @@ export const getPublishedIcons = async () => {
throw e;
});
return data?.meta?.components?.filter(
(component: any) => component?.containing_frame?.pageName !== "🔆Pictogram"
);
return data?.meta?.components?.filter((component: any) => {
const page = component?.containing_frame?.pageName;
return page !== "🔆Pictogram" && page !== "🧩Placeholder";
});
};
/**
@@ -2,7 +2,7 @@ import React from "react";
import { storiesOf } from "@storybook/react";
import isChromatic from "chromatic/isChromatic";
import * as Icons from "../src";
import * as Icons from "./src";
export default {
title: "ds-icons/Ikoner",
argTypes: {
+40 -4
View File
@@ -857,6 +857,18 @@
"created_at": "2021-01-11T13:37:55.491Z",
"pageName": "File"
},
{
"name": "FileError",
"description": "",
"created_at": "2022-01-27T12:48:37.583Z",
"pageName": "File"
},
{
"name": "FileErrorFilled",
"description": "",
"created_at": "2022-01-27T12:48:37.605Z",
"pageName": "File"
},
{
"name": "FileFilled",
"description": "",
@@ -875,6 +887,30 @@
"created_at": "2021-04-26T09:24:37.951Z",
"pageName": "File"
},
{
"name": "FileProgressFilled",
"description": "",
"created_at": "2022-01-27T12:48:37.592Z",
"pageName": "File"
},
{
"name": "Files",
"description": "",
"created_at": "2022-01-27T12:48:37.567Z",
"pageName": "File"
},
{
"name": "FileSuccess",
"description": "",
"created_at": "2022-01-27T12:48:37.575Z",
"pageName": "File"
},
{
"name": "FileSuccessFilled",
"description": "",
"created_at": "2022-01-27T12:48:37.598Z",
"pageName": "File"
},
{
"name": "FillForms",
"description": "",
@@ -900,15 +936,15 @@
"pageName": "Interface"
},
{
"name": "FilterFilled",
"name": "Filter2Filled",
"description": "",
"created_at": "2021-01-11T13:37:55.605Z",
"created_at": "2022-01-14T09:16:08.197Z",
"pageName": "Interface"
},
{
"name": "FilterFilled2",
"name": "FilterFilled",
"description": "",
"created_at": "2022-01-14T09:16:08.197Z",
"created_at": "2021-01-11T13:37:55.605Z",
"pageName": "Interface"
},
{
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/ds-icons",
"version": "0.7.3",
"version": "0.8.1",
"private": false,
"description": "NAVs egne ikoner i SVG og React format",
"repository": {
@@ -1,23 +0,0 @@
import { Meta } from "@storybook/addon-docs";
<Meta title="ds-icons/Kom i gang" />
# Ta i bruk ikonpakken `@navikt/ds-icons`
Alle ikoner kan bli funnet her https://design.nav.no/designsystem/resources/icons
## Oppsett
```bash
yarn add @navikt/ds-icons
```
```jsx
Import { Expand } from `@navikt/ds-icons`;
<Expand
title="Åpne meny"
/>
```
Note: Det kan være tilfeller der oppsettet ditt ikke har støtte for SVG, og det må da legges til manuelt i eks en webpack config basert på hva som blir brukt.
+3
View File
@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4142 0H2V22H12V20H4V2H12V7H17V14H19V4.58579L14.4142 0ZM16.5858 5L14 2.41421V5H16.5858ZM18 17.5858L21.2929 14.2929L22.7071 15.7071L19.4142 19L22.7071 22.2929L21.2929 23.7071L18 20.4142L14.7071 23.7071L13.2929 22.2929L16.5858 19L13.2929 15.7071L14.7071 14.2929L18 17.5858Z" fill="#262626"/>
</svg>

After

Width:  |  Height:  |  Size: 445 B

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0V22H11.5L14.5 19L11 15.5L14.5 12L18 15.5L19 14.5V4.5L14.5 0H2ZM13.5 5V2L16.5 5H13.5ZM13.2929 22.2929L16.5858 19L13.2929 15.7071L14.7071 14.2929L18 17.5858L21.2929 14.2929L22.7071 15.7071L19.4142 19L22.7071 22.2929L21.2929 23.7071L18 20.4142L14.7071 23.7071L13.2929 22.2929Z" fill="#262626"/>
</svg>

After

Width:  |  Height:  |  Size: 448 B

@@ -0,0 +1,3 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 22V0H14.5L19 4.5V11H17.3135C11.6605 11 8.31543 17.3293 11.5 22H2ZM13.5 2V5H16.5L13.5 2ZM20.2122 20.7723C18.8453 22.1391 16.6293 22.1391 15.2624 20.7723C13.8956 19.4054 13.8956 17.1893 15.2624 15.8225C16.6293 14.4557 18.8453 14.4557 20.2122 15.8225L20.3897 16H19V18H24.0406V13L22.0406 13V14.8225L21.6264 14.4083C19.4785 12.2604 15.9961 12.2604 13.8482 14.4083C11.7003 16.5562 11.7003 20.0386 13.8482 22.1865C15.9961 24.3344 19.4785 24.3344 21.6264 22.1865L20.2122 20.7723Z" fill="#262626"/>
</svg>

After

Width:  |  Height:  |  Size: 645 B

+4
View File
@@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 1V6H18" stroke="#262626" stroke-width="2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4142 0H2V22H11V20H4V2H13.5858L17 5.41421V16H19V4.58579L14.4142 0ZM22.2689 14.3177L16.0317 21.0004L13.7593 18.3492L12.2407 19.6508L15.9683 23.9996L23.7311 15.6823L22.2689 14.3177Z" fill="#262626"/>
</svg>

After

Width:  |  Height:  |  Size: 410 B

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0V22H12L10 19.5L14 16L16 18L19 15V4.5L14.5 0H2ZM13.5 5V2L16.5 5H13.5ZM22.2689 14.3177L16.0317 21.0004L13.7593 18.3492L12.2407 19.6508L15.9683 23.9996L23.7311 15.6823L22.2689 14.3177Z" fill="#262626"/>
</svg>

After

Width:  |  Height:  |  Size: 356 B

+3
View File
@@ -0,0 +1,3 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4142 0H2V22H11V20H4V2H12V7H17V11H19V4.58579L14.4142 0ZM16.5858 5L14 2.41421V5H16.5858ZM20.2122 20.7723C18.8453 22.1391 16.6293 22.1391 15.2624 20.7723C13.8956 19.4054 13.8956 17.1893 15.2624 15.8225C16.6293 14.4557 18.8453 14.4557 20.2122 15.8225L20.3897 16H19V18H24.0406V13L22.0406 13V14.8225L21.6264 14.4083C19.4785 12.2604 15.9961 12.2604 13.8482 14.4083C11.7003 16.5562 11.7003 20.0386 13.8482 22.1865C15.9961 24.3344 19.4785 24.3344 21.6264 22.1865L20.2122 20.7723Z" fill="#262626"/>
</svg>

After

Width:  |  Height:  |  Size: 645 B

+1 -1
View File
@@ -4,5 +4,5 @@
"outDir": "./cjs",
"module": "commonjs"
},
"exclude": ["./figma", "./scripts", "**/stories"]
"exclude": ["./figma", "./scripts", "**/*.stories.*"]
}
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/ds-react",
"version": "0.14.14",
"version": "0.15.2",
"private": false,
"description": "NAV designsystem react components",
"author": "NAV Designsystem team",
@@ -35,7 +35,7 @@
},
"dependencies": {
"@material-ui/core": "^4.12.3",
"@navikt/ds-icons": "^0.7.3",
"@navikt/ds-icons": "^0.8.1",
"@popperjs/core": "^2.10.1",
"classnames": "^2.2.6",
"react-collapse": "^5.1.0",
@@ -1,39 +0,0 @@
import React, { forwardRef } from "react";
import cl from "classnames";
import MenuItems from "./MenuItems";
import Collapsable, {
AccordionMenuCollapsableType,
} from "./AccordionMenuCollapsable";
import Item, { AccordionMenuItemType } from "./AccordionMenuItem";
export interface AccordionMenuProps extends React.HTMLAttributes<HTMLElement> {
children: React.ReactNode;
}
interface AccordionMenuComponent
extends React.ForwardRefExoticComponent<
AccordionMenuProps & React.RefAttributes<HTMLElement>
> {
Collapsable: AccordionMenuCollapsableType;
Item: AccordionMenuItemType;
}
const AccordionMenu = forwardRef<HTMLElement, AccordionMenuProps>(
({ children, className, ...rest }, ref) => {
return (
<nav
role="navigation"
ref={ref}
className={cl("navds-accordion-menu", className)}
{...rest}
>
<MenuItems>{children}</MenuItems>
</nav>
);
}
) as AccordionMenuComponent;
AccordionMenu.Collapsable = Collapsable;
AccordionMenu.Item = Item;
export default AccordionMenu;
@@ -1,45 +0,0 @@
import React, { forwardRef, HTMLAttributes, useState } from "react";
import cl from "classnames";
import { Expand } from "@navikt/ds-icons";
import MenuItems from "./MenuItems";
export interface AccordionMenuCollapsableProps
extends HTMLAttributes<HTMLDivElement> {
title: string;
defaultOpen?: boolean;
children: React.ReactNode;
}
export type AccordionMenuCollapsableType = React.ForwardRefExoticComponent<
AccordionMenuCollapsableProps & React.RefAttributes<HTMLDivElement>
>;
const Collapsable: AccordionMenuCollapsableType = forwardRef(
({ children, defaultOpen = false, title, className, ...rest }, ref) => {
const [isOpen, setIsOpen] = useState(defaultOpen);
return (
<div
ref={ref}
className={cl("navds-accordion-menu-collapsable", className, {
"navds-accordion-menu-collapsable--open": isOpen,
})}
{...rest}
>
<button
onClick={() => setIsOpen(!isOpen)}
className="navds-accordion-menu-collapsable__button"
>
{title}
<Expand
title={isOpen ? "Pil peker opp" : "Pil peker ned"}
className="navds-accordion-menu-collapsable__expand-icon"
/>
</button>
{isOpen && <MenuItems>{children}</MenuItems>}
</div>
);
}
);
export default Collapsable;
@@ -1,13 +0,0 @@
import React from "react";
const MenuItems = ({ children }: { children: React.ReactNode }) => (
<ul className="navds-accordion-menu__list">
{React.Children.toArray(children).map((child, i) => (
<li key={i} className="navds-accordion-menu__list-item">
{child}
</li>
))}
</ul>
);
export default MenuItems;
@@ -1,3 +0,0 @@
export { default as AccordionMenu, AccordionMenuProps } from "./AccordionMenu";
export { AccordionMenuCollapsableProps } from "./AccordionMenuCollapsable";
export { AccordionMenuItemProps } from "./AccordionMenuItem";
@@ -1,66 +0,0 @@
import { Meta, Canvas } from "@storybook/addon-docs";
import { AccordionMenu } from "../../index";
<Meta title="ds-react/accordion-menu/intro" />
# Hvordan ta i bruk Accordion-menu
```jsx
<AccordionMenu>
<AccordionMenu.item href="#leo">Leo</AccordionMenu.item>
<AccordionMenu.Collapsable title="Proin">
<AccordionMenu.item href="#nulla" active>
Nulla
</AccordionMenu.item>
<AccordionMenu.item href="#luctus">Luctus</AccordionMenu.item>
</AccordionMenu.Collapsable>
<AccordionMenu.Collapsable title="Accumsan">
<AccordionMenu.item href="#justo" aria-current="page">
Justo
</AccordionMenu.item>
<AccordionMenu.Collapsable title="Proin">
<AccordionMenu.item href="#nulla">Nulla</AccordionMenu.item>
<AccordionMenu.item href="#luctus">Luctus</AccordionMenu.item>
</AccordionMenu.Collapsable>
</AccordionMenu.Collapsable>
</AccordionMenu>
```
<Canvas>
<AccordionMenu>
<AccordionMenu.Item href="#leo">Leo</AccordionMenu.Item>
<AccordionMenu.Collapsable title="Proin">
<AccordionMenu.Item href="#nulla" active>
Nulla
</AccordionMenu.Item>
<AccordionMenu.Item href="#luctus">Luctus</AccordionMenu.Item>
</AccordionMenu.Collapsable>
<AccordionMenu.Collapsable title="Accumsan">
<AccordionMenu.Item href="#justo" aria-current="page">
Justo
</AccordionMenu.Item>
<AccordionMenu.Collapsable title="Proin">
<AccordionMenu.Item href="#nulla">Nulla</AccordionMenu.Item>
<AccordionMenu.Item href="#luctus">Luctus</AccordionMenu.Item>
</AccordionMenu.Collapsable>
</AccordionMenu.Collapsable>
</AccordionMenu>
</Canvas>
Accordion-menu støtter opp til maks to-nivårer av `AccordionMenu.Collapsable` akkurat nå.
`AccordionMenu.Item` er implementert med `OverridableComponent`, noe som
gjør at man kan ta i bruk eks react-router slik:
```jsx
<AccordionMenu.item
as={NavLink}
activeClassName="navds-accordion-menu-item--active"
to="/1"
>
Lenketekst
</AccordionMenu.item>
```
Her er `NavLink` fra `react-router-dom` brukt, og man får da
samtidig bruke alle propsene til denne komponenten som da er `activeClassName` her.
@@ -1,141 +0,0 @@
import * as React from "react";
import { AccordionMenu } from "../index";
import { NavLink, HashRouter as Router } from "react-router-dom";
export default {
title: "ds-react/accordion-menu",
component: { AccordionMenu },
};
export const All = () => (
<div
style={{
background: "white",
maxWidth: 288,
}}
>
<AccordionMenu>
<AccordionMenu.Item href="#leo">Leo</AccordionMenu.Item>
<AccordionMenu.Collapsable title="Proin">
<AccordionMenu.Item href="#nulla" active>
Nulla
</AccordionMenu.Item>
<AccordionMenu.Item href="#luctus">Luctus</AccordionMenu.Item>
</AccordionMenu.Collapsable>
<AccordionMenu.Collapsable title="Accumsan">
<AccordionMenu.Item href="#justo" aria-current="page">
Justo
</AccordionMenu.Item>
<AccordionMenu.Item href="#pariatur" active aria-current="page">
Pariatur
</AccordionMenu.Item>
<AccordionMenu.Collapsable title="Proin">
<AccordionMenu.Item href="#nulla" active>
Nulla
</AccordionMenu.Item>
<AccordionMenu.Item href="#luctus">Luctus</AccordionMenu.Item>
</AccordionMenu.Collapsable>
</AccordionMenu.Collapsable>
<AccordionMenu.Item href="#justo" active>
Justo
</AccordionMenu.Item>
<AccordionMenu.Item href="#pariatur">Pariatur</AccordionMenu.Item>
</AccordionMenu>
</div>
);
export const ReactRouter = () => (
<AccordionMenu>
<AccordionMenu.Collapsable title="Nivå 1 – 3 rems høy">
<AccordionMenu.Item
as={NavLink}
activeClassName="navds-accordion-menu-item--active"
to="/1"
>
Nivå 2 innrykk 2 rems
</AccordionMenu.Item>
<AccordionMenu.Item
as={NavLink}
activeClassName="navds-accordion-menu-item--active"
to="/2"
>
Subtitle 3
</AccordionMenu.Item>
</AccordionMenu.Collapsable>
<AccordionMenu.Collapsable title="Skjema og søknad">
<AccordionMenu.Collapsable title="Satser">
<AccordionMenu.Item
as={NavLink}
activeClassName="navds-accordion-menu-item--active"
to="/3"
>
Nivå 3 – 3 rems innrykk Har du rett til dagpenger når du mottar annen
økonomisk støtte fra NAV?
</AccordionMenu.Item>
</AccordionMenu.Collapsable>
<AccordionMenu.Item
as={NavLink}
activeClassName="navds-accordion-menu-item--active"
to="/4"
>
Subtitle 2
</AccordionMenu.Item>
<AccordionMenu.Item
as={NavLink}
activeClassName="navds-accordion-menu-item--active"
to="/5"
>
Subtitle 3
</AccordionMenu.Item>
</AccordionMenu.Collapsable>
<AccordionMenu.Collapsable title="Sakbehandlingstider">
<AccordionMenu.Collapsable title="Subtitle 4 Lang tittel på andre nivå lorem ipsum">
<AccordionMenu.Item
as={NavLink}
activeClassName="navds-accordion-menu-item--active"
to="/6"
>
Subtitle 5
</AccordionMenu.Item>
</AccordionMenu.Collapsable>
</AccordionMenu.Collapsable>
<AccordionMenu.Item
as={NavLink}
activeClassName="navds-accordion-menu-item--active"
to="/7"
>
Internasjonalt
</AccordionMenu.Item>
<AccordionMenu.Collapsable title="Meld fra om endringer lang tittel på første nivå">
<AccordionMenu.Item
as={NavLink}
activeClassName="navds-accordion-menu-item--active"
to="/8"
>
Subtitle 6
</AccordionMenu.Item>
</AccordionMenu.Collapsable>
<AccordionMenu.Item
as={NavLink}
activeClassName="navds-accordion-menu-item--active"
to="/9"
>
Nivå 1
</AccordionMenu.Item>
</AccordionMenu>
);
ReactRouter.decorators = [
(Story) => (
<Router>
<div
style={{
background: "white",
maxWidth: 288,
}}
>
<Story />
</div>
</Router>
),
];
@@ -43,6 +43,7 @@ const AccordionHeader: AccordionHeaderType = forwardRef(
return (
<button
{...rest}
ref={ref}
id={context.buttonId}
className={cl(
@@ -52,17 +53,17 @@ const AccordionHeader: AccordionHeaderType = forwardRef(
"navds-heading--small"
)}
onClick={handleClick}
{...rest}
aria-expanded={context.open}
>
{children}
<Expand
title={context.open ? "Lukk panel ikon" : "Åpne panel ikon"}
aria-hidden
className={cl("navds-accordion__expand-icon", {
"navds-accordion__expand-icon--flip": context.open,
})}
/>
<ExpandFilled
title={context.open ? "Lukk panel ikon" : "Åpne panel ikon"}
aria-hidden
className={cl(
"navds-accordion__expand-icon",
"navds-accordion__expand-icon--filled",
@@ -0,0 +1,90 @@
import React, { useState } from "react";
import AccordionContent from "./AccordionContent";
import AccordionHeader from "./AccordionHeader";
import AccordionItem from "./AccordionItem";
import { Accordion } from ".";
export default {
title: "ds-react/accordion",
component: Accordion,
subcomponents: {
AccordionItem,
AccordionContent,
AccordionHeader,
},
};
export const All = () => {
const [open, setOpen] = useState(false);
return (
<>
<h1>Accordion</h1>
<h2>Controlled</h2>
<Accordion>
<Accordion.Item open={open}>
<Accordion.Header onClick={() => setOpen(!open)}>
Accordion header text
</Accordion.Header>
<Accordion.Content>
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
officia laboris voluptate officia pariatur.Lorem est ex anim velit
occaecat nisi qui nostrud sit consectetur consectetur officia
nostrud ullamco. Est ex duis proident nostrud elit qui laborum anim
minim eu eiusmod. Veniam in nostrud sunt tempor velit incididunt
sint ex dolor qui velit id eu. Deserunt magna sunt velit in. Est
exercitation id cillum qui do. Minim adipisicing nostrud commodo
proident occaecat aliquip nulla anim proident reprehenderit. Magna
ipsum officia veniam cupidatat duis veniam dolore reprehenderit
mollit velit.Ut consequat commodo minim occaecat id pariatur. Nisi
enim tempor laborum commodo. Tempor sit quis nostrud eu cupidatat
sunt commodo reprehenderit irure deserunt eiusmod ipsum.
Exercitation quis commodo cillum eiusmod eiusmod. Do laborum qui
proident commodo adipisicing eiusmod id.
</Accordion.Content>
</Accordion.Item>
</Accordion>
<h2>Un-controlled</h2>
<Accordion>
<Accordion.Item>
<Accordion.Header>Accordion header text</Accordion.Header>
<Accordion.Content>
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
officia laboris voluptate officia pariatur.Lorem est ex anim velit
occaecat nisi qui nostrud sit consectetur consectetur officia
nostrud ullamco. Est ex duis proident nostrud elit qui laborum anim
minim eu eiusmod. Veniam in nostrud sunt tempor velit incididunt
sint ex dolor qui velit id eu. Deserunt magna sunt velit in. Est
exercitation id cillum qui do. Minim adipisicing nostrud commodo
proident occaecat aliquip nulla anim proident reprehenderit. Magna
ipsum officia veniam cupidatat duis veniam dolore reprehenderit
mollit velit.Ut consequat commodo minim occaecat id pariatur. Nisi
enim tempor laborum commodo. Tempor sit quis nostrud eu cupidatat
sunt commodo reprehenderit irure deserunt eiusmod ipsum.
Exercitation quis commodo cillum eiusmod eiusmod. Do laborum qui
proident commodo adipisicing eiusmod id.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item>
<Accordion.Header>Accordion header text</Accordion.Header>
<Accordion.Content>
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
officia laboris voluptate officia pariatur.Lorem est ex anim velit
occaecat nisi qui nostrud sit consectetur consectetur officia
nostrud ullamco. Est ex duis proident nostrud elit qui laborum anim
minim eu eiusmod. Veniam in nostrud sunt tempor velit incididunt
sint ex dolor qui velit id eu. Deserunt magna sunt velit in. Est
exercitation id cillum qui do. Minim adipisicing nostrud commodo
proident occaecat aliquip nulla anim proident reprehenderit. Magna
ipsum officia veniam cupidatat duis veniam dolore reprehenderit
mollit velit.Ut consequat commodo minim occaecat id pariatur. Nisi
enim tempor laborum commodo. Tempor sit quis nostrud eu cupidatat
sunt commodo reprehenderit irure deserunt eiusmod ipsum.
Exercitation quis commodo cillum eiusmod eiusmod. Do laborum qui
proident commodo adipisicing eiusmod id.
</Accordion.Content>
</Accordion.Item>
</Accordion>
</>
);
};
@@ -1,72 +0,0 @@
import { Meta, Canvas, Props } from "@storybook/addon-docs";
import { Accordion } from "../../index";
<Meta title="ds-react/accordion/intro" />
# Hvordan ta i bruk Accordion
```jsx
<Accordion>
<Accordion.Item>
<Accordion.Header>Accordion header text</Accordion.Header>
<Accordion.Content>
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
laboris voluptate officia pariatur.Lorem est ex anim velit occaecat nisi
qui nostrud sit.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item>
<Accordion.Header>Aliquip amet irure consectetur occaecat</Accordion.Header>
<Accordion.Content>
Cupidatat aliqua eu ea et anim excepteur. Labore aliquip dolore laborum
consequat. Reprehenderit ad velit quis eiusmod ex sint aliquip do deserunt
amet exercitation velit Lorem.
</Accordion.Content>
</Accordion.Item>
</Accordion>
```
<Canvas>
<Accordion>
<Accordion.Item>
<Accordion.Header>Accordion header text</Accordion.Header>
<Accordion.Content>
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
officia laboris voluptate officia pariatur.Lorem est ex anim velit
occaecat nisi qui nostrud sit.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item>
<Accordion.Header>
Aliquip amet irure consectetur occaecat
</Accordion.Header>
<Accordion.Content>
Cupidatat aliqua eu ea et anim excepteur. Labore aliquip dolore laborum
consequat. Reprehenderit ad velit quis eiusmod ex sint aliquip do
deserunt amet exercitation velit Lorem.
</Accordion.Content>
</Accordion.Item>
</Accordion>
</Canvas>
## Controlled state
Accordion-komponeten styrer selv open-state, men om man ønsker kan man selv overskrive denne med
`open`-prop + `onClick`-prop slik det er gjort på eksemplet.
```jsx
<Accordion>
<Accordion.Item open={open}>
<Accordion.Header onClick={(open) => setOpen(!open)}>
Accordion header text
</Accordion.Header>
<Accordion.Content>
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
laboris voluptate officia pariatur.Lorem est ex anim velit
</Accordion.Content>
</Accordion.Item>
</Accordion>
```
`renderContentWhenClosed`-prop på `Accordion.Item` bestemmer om innholdet (children) skal beholdes i dom-strukturen mens
Accordion er lukket. Defaulter til `false`.
@@ -1,92 +0,0 @@
import React, { useState } from "react";
import AccordionContent from "../AccordionContent";
import AccordionHeader from "../AccordionHeader";
import AccordionItem from "../AccordionItem";
import { Accordion } from "../index";
export default {
title: "ds-react/accordion",
component: Accordion,
subcomponents: {
AccordionItem,
AccordionContent,
AccordionHeader,
},
};
export const All = () => {
const [open, setOpen] = useState(false);
return (
<>
<div>
<h1>Accordion</h1>
<h2>Controlled</h2>
<Accordion>
<Accordion.Item open={open}>
<Accordion.Header onClick={() => setOpen(!open)}>
Accordion header text
</Accordion.Header>
<Accordion.Content>
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
officia laboris voluptate officia pariatur.Lorem est ex anim velit
occaecat nisi qui nostrud sit consectetur consectetur officia
nostrud ullamco. Est ex duis proident nostrud elit qui laborum
anim minim eu eiusmod. Veniam in nostrud sunt tempor velit
incididunt sint ex dolor qui velit id eu. Deserunt magna sunt
velit in. Est exercitation id cillum qui do. Minim adipisicing
nostrud commodo proident occaecat aliquip nulla anim proident
reprehenderit. Magna ipsum officia veniam cupidatat duis veniam
dolore reprehenderit mollit velit.Ut consequat commodo minim
occaecat id pariatur. Nisi enim tempor laborum commodo. Tempor sit
quis nostrud eu cupidatat sunt commodo reprehenderit irure
deserunt eiusmod ipsum. Exercitation quis commodo cillum eiusmod
eiusmod. Do laborum qui proident commodo adipisicing eiusmod id.
</Accordion.Content>
</Accordion.Item>
</Accordion>
<h2>Un-controlled</h2>
<Accordion>
<Accordion.Item>
<Accordion.Header>Accordion header text</Accordion.Header>
<Accordion.Content>
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
officia laboris voluptate officia pariatur.Lorem est ex anim velit
occaecat nisi qui nostrud sit consectetur consectetur officia
nostrud ullamco. Est ex duis proident nostrud elit qui laborum
anim minim eu eiusmod. Veniam in nostrud sunt tempor velit
incididunt sint ex dolor qui velit id eu. Deserunt magna sunt
velit in. Est exercitation id cillum qui do. Minim adipisicing
nostrud commodo proident occaecat aliquip nulla anim proident
reprehenderit. Magna ipsum officia veniam cupidatat duis veniam
dolore reprehenderit mollit velit.Ut consequat commodo minim
occaecat id pariatur. Nisi enim tempor laborum commodo. Tempor sit
quis nostrud eu cupidatat sunt commodo reprehenderit irure
deserunt eiusmod ipsum. Exercitation quis commodo cillum eiusmod
eiusmod. Do laborum qui proident commodo adipisicing eiusmod id.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item>
<Accordion.Header>Accordion header text</Accordion.Header>
<Accordion.Content>
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
officia laboris voluptate officia pariatur.Lorem est ex anim velit
occaecat nisi qui nostrud sit consectetur consectetur officia
nostrud ullamco. Est ex duis proident nostrud elit qui laborum
anim minim eu eiusmod. Veniam in nostrud sunt tempor velit
incididunt sint ex dolor qui velit id eu. Deserunt magna sunt
velit in. Est exercitation id cillum qui do. Minim adipisicing
nostrud commodo proident occaecat aliquip nulla anim proident
reprehenderit. Magna ipsum officia veniam cupidatat duis veniam
dolore reprehenderit mollit velit.Ut consequat commodo minim
occaecat id pariatur. Nisi enim tempor laborum commodo. Tempor sit
quis nostrud eu cupidatat sunt commodo reprehenderit irure
deserunt eiusmod ipsum. Exercitation quis commodo cillum eiusmod
eiusmod. Do laborum qui proident commodo adipisicing eiusmod id.
</Accordion.Content>
</Accordion.Item>
</Accordion>
</div>
</>
);
};
@@ -1,6 +1,6 @@
import React from "react";
import { Alert } from "..";
import { BodyLong, Heading } from "../..";
import { Alert } from ".";
import { BodyLong, Heading } from "..";
export default {
title: "ds-react/alert",
@@ -1,96 +0,0 @@
import { Meta, Canvas } from "@storybook/addon-docs";
import { Alert, Heading, BodyLong } from "../../index";
<Meta title="ds-react/alert/intro" />
# Hvordan ta i bruk Alert
```jsx
<Alert variant="info">
Id elit esse enim reprehenderit.Tempor tempor ex exercitation id aute
eu.Laborum nulla nisi irure voluptate mollit fugiat.Est quis culpa nostrud et
reprehenderit ea sint.Eu veniam labore enim labore qui eiusmod Lorem amet ad
esse.
</Alert>
```
<Canvas>
<Alert variant="info">
Id elit esse enim reprehenderit.Tempor tempor ex exercitation id aute
eu.Laborum nulla nisi irure voluptate mollit fugiat.Est quis culpa nostrud
et reprehenderit ea sint.Eu veniam labore enim labore qui eiusmod Lorem amet
ad esse.
</Alert>
</Canvas>
## Varianter
`variants`-prop kan brukes for å endre utseende mellom
`info`, `success`, `warning` og `error`.
<Canvas>
<Alert variant="info">Id elit esse enim reprehenderit.</Alert>
<Alert variant="success">Id elit esse enim reprehenderit.</Alert>
<Alert variant="warning">Id elit esse enim reprehenderit.</Alert>
<Alert variant="error">Id elit esse enim reprehenderit.</Alert>
</Canvas>
## Sizing
Alert har to størrelser: Default 64px height og small 32px height default.
<Canvas>
<Alert size="small" variant="info">
Id elit esse enim reprehenderit.
</Alert>
<Alert size="small" variant="success">
Id elit esse enim reprehenderit.
</Alert>
<Alert size="small" variant="warning">
Id elit esse enim reprehenderit.
</Alert>
<Alert size="small" variant="error">
Id elit esse enim reprehenderit.
</Alert>
</Canvas>
## fullWidth
<Canvas>
<div style={{ margin: 32, display: "grid", gap: 16 }}>
<Alert fullWidth variant="info">
Id elit esse enim reprehenderit.
</Alert>
<Alert fullWidth size="small" variant="info">
Id elit esse enim reprehenderit.
</Alert>
</div>
</Canvas>
## Med heading
```jsx
<Alert variant="info">
<Heading spacing size="small" level="2">
Aliquip duis est in commodo pariatur
</Heading>
<BodyLong>
Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui laboris
ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat sint commodo
consequat eu aute.
</BodyLong>
</Alert>
```
<Canvas>
<Alert variant="info">
<Heading spacing size="small" level="3">
Aliquip duis est in commodo pariatur
</Heading>
<BodyLong>
Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui laboris
ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat sint commodo
consequat eu aute.
</BodyLong>
</Alert>
</Canvas>
@@ -1,5 +1,5 @@
import React, { useState } from "react";
import { Button } from "../index";
import { Button } from "./index";
import { Success } from "@navikt/ds-icons";
export default {
@@ -1,76 +0,0 @@
import { Meta, Canvas } from "@storybook/addon-docs";
import { Button, Loader } from "../../index";
import { Success } from "@navikt/ds-icons";
<Meta title="ds-react/button/intro" />
# Hvordan ta i bruk Button
```jsx
<Button>Button</Button>
```
<Canvas>
<Button>Button</Button>
</Canvas>
## Varianter
`variants`-prop kan brukes for å endre utseende mellom
`primary`, `secondary`, `tertiary` og `danger`
<Canvas>
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="tertiary">Tertiary</Button>
<Button variant="danger">Danger</Button>
</Canvas>
## Sizing
Button har to størrelser: Default 48px min-height og small 32px min-height
<Canvas>
<Button size="small" variant="primary">
Primary
</Button>
<Button size="small" variant="secondary">
Secondary
</Button>
<Button size="small" variant="tertiary">
Tertiary
</Button>
<Button size="small" variant="danger">
Danger
</Button>
</Canvas>
## Loading
Button har en egen `loading`-prop setter knappen til disabled og viser `Loader`.
Button width bli automatisk justert basert på innholdet sin bredde.
<Canvas>
<Button loading variant="primary">
Primary
</Button>
<Button loading variant="secondary">
Secondary
</Button>
</Canvas>
## Med ikon
Hvis man setter ikoner (svg) rett på button vil størrelsen
bli justert automatisk og sentrert.
<Canvas>
<Button>
<Success /> Knapp <Success />
</Button>
<Button size="small">
<Success />
Knapp
<Success />
</Button>
</Canvas>
@@ -24,6 +24,11 @@ export interface CheckboxProps
* The value of the HTML element.
*/
value?: string;
/**
* Specify whether the Checkbox is in an indeterminate state
* @default false
*/
indeterminate?: boolean;
}
const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
@@ -52,8 +57,20 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
"hideLabel",
])}
{...inputProps}
type="checkbox"
className="navds-checkbox__input"
ref={ref}
aria-checked={props.indeterminate ? "mixed" : inputProps.checked}
ref={(el) => {
if (el) {
el.indeterminate = props.indeterminate ?? false;
}
if (typeof ref === "function") {
ref(el);
} else if (ref != null) {
ref.current = el;
}
}}
/>
<label htmlFor={inputProps.id} className="navds-checkbox__label">
<div
@@ -1,4 +1,4 @@
import React from "react";
import React, { useState } from "react";
import { Checkbox, CheckboxGroup } from "../../index";
import { Meta } from "@storybook/react/types-6-0";
export default {
@@ -6,6 +6,36 @@ export default {
component: Checkbox,
} as Meta;
export const Indeterminate = () => {
const [checked, setChecked] = useState([true, false]);
return (
<>
<Checkbox
checked={checked[0] && checked[1]}
indeterminate={checked[0] !== checked[1]}
onChange={(e) => setChecked([e.target.checked, e.target.checked])}
>
Parent
</Checkbox>
<div style={{ paddingLeft: "2rem" }}>
<Checkbox
checked={checked[0]}
onChange={(e) => setChecked([e.target.checked, checked[1]])}
>
Child 1
</Checkbox>
<Checkbox
checked={checked[1]}
onChange={(e) => setChecked([checked[0], e.target.checked])}
>
Child 2
</Checkbox>
</div>
</>
);
};
export const All = () => {
const Checkboxes = (props) => (
<CheckboxGroup
@@ -51,6 +81,13 @@ export const All = () => {
<Checkbox value="Orange" description="Laborum ad" disabled defaultChecked>
Orange
</Checkbox>
<h3>Indeterminate</h3>
<Checkbox value="Apple" indeterminate>
Apple
</Checkbox>
<Checkbox value="Orange" indeterminate size="small">
Orange
</Checkbox>
<h2>Checkbox group</h2>
<Checkboxes />
@@ -32,7 +32,6 @@ const useCheckbox = ({ children, ...props }: CheckboxProps) => {
...rest,
inputProps: {
...inputProps,
type: "checkbox",
checked: checkboxGroup?.value
? checkboxGroup.value.includes(props.value as string)
: props.checked,
+1 -1
View File
@@ -1,5 +1,4 @@
export * from "./accordion";
export * from "./accordion-menu";
export * from "./alert";
export * from "./button";
export * from "./form";
@@ -9,6 +8,7 @@ export * from "./guide-panel";
export * from "./link";
export * from "./link-panel";
export * from "./loader";
export * from "./menu";
export * from "./modal";
export * from "./panel";
export * from "./popover";
+36
View File
@@ -0,0 +1,36 @@
import React, { forwardRef } from "react";
import cl from "classnames";
import MenuItems from "./MenuItems";
import Item, { MenuItemType } from "./MenuItem";
import Collapse, { MenuCollapseType } from "./MenuCollapse";
export interface MenuProps extends React.HTMLAttributes<HTMLElement> {
children: React.ReactNode;
}
interface MenuComponent
extends React.ForwardRefExoticComponent<
MenuProps & React.RefAttributes<HTMLElement>
> {
Collapse: MenuCollapseType;
Item: MenuItemType;
}
const Menu = forwardRef<HTMLElement, MenuProps>(
({ children, className, ...rest }, ref) => (
<nav
{...rest}
role="navigation"
ref={ref}
className={cl("navds-menu", className)}
>
<MenuItems>{children}</MenuItems>
</nav>
)
) as MenuComponent;
Menu.Collapse = Collapse;
Menu.Item = Item;
export default Menu;
@@ -0,0 +1,80 @@
import React, {
createContext,
forwardRef,
HTMLAttributes,
useContext,
useState,
} from "react";
import cl from "classnames";
import { Expand, ExpandFilled } from "@navikt/ds-icons";
import MenuItems from "./MenuItems";
export const NestingContext = createContext<{ depth: number }>({ depth: 1 });
const NestingProvider = ({ children }) => {
const context = useContext(NestingContext);
return (
<NestingContext.Provider
value={{
depth: context.depth + 1,
}}
>
{children}
</NestingContext.Provider>
);
};
export interface MenuCollapseProps extends HTMLAttributes<HTMLDivElement> {
title: string;
defaultOpen?: boolean;
children: React.ReactNode;
}
export type MenuCollapseType = React.ForwardRefExoticComponent<
MenuCollapseProps & React.RefAttributes<HTMLDivElement>
>;
const Collapse: MenuCollapseType = forwardRef(
({ children, defaultOpen = false, title, className, ...rest }, ref) => {
const [isOpen, setIsOpen] = useState(defaultOpen);
const context = useContext(NestingContext);
return (
<div
{...rest}
ref={ref}
className={cl("navds-menu-collapse", className, {
"navds-menu-collapse--open": isOpen,
})}
>
<button
onClick={() => setIsOpen(!isOpen)}
className="navds-menu-collapse__button"
>
{title}
<Expand
title={isOpen ? "lukk navigasjons-skuff" : "åpne navigason-skuff"}
className="navds-menu-collapse__expand-icon"
/>
<ExpandFilled
title={isOpen ? "lukk navigasjons-skuff" : "åpne navigason-skuff"}
className="navds-menu-collapse__expand-icon navds-menu-collapse__expand-icon--filled"
/>
</button>
<NestingProvider>
{isOpen && (
<MenuItems
data-depth={context.depth}
className="navds-menu__list--inner"
>
{children}
</MenuItems>
)}
</NestingProvider>
</div>
);
}
);
export default Collapse;
@@ -2,7 +2,7 @@ import React, { forwardRef } from "react";
import { OverridableComponent } from "..";
import cl from "classnames";
export interface AccordionMenuItemProps
export interface MenuItemProps
extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
children: React.ReactNode;
/**
@@ -12,12 +12,12 @@ export interface AccordionMenuItemProps
active?: boolean;
}
export type AccordionMenuItemType = OverridableComponent<
AccordionMenuItemProps,
export type MenuItemType = OverridableComponent<
MenuItemProps,
HTMLAnchorElement
>;
const Item: AccordionMenuItemType = forwardRef(
const Item: MenuItemType = forwardRef(
(
{ children, as: Component = "a", active = false, className, ...rest },
ref
@@ -25,8 +25,8 @@ const Item: AccordionMenuItemType = forwardRef(
return (
<Component
ref={ref}
className={cl("navds-accordion-menu-item", className, {
"navds-accordion-menu-item--active": active,
className={cl("navds-menu-item", className, {
"navds-menu-item--active": active,
})}
{...rest}
>
+21
View File
@@ -0,0 +1,21 @@
import cl from "classnames";
import React from "react";
const MenuItems = ({
children,
className,
...rest
}: {
children: React.ReactNode;
className?: string;
}) => (
<ul {...rest} className={cl("navds-menu__list", className)}>
{React.Children.toArray(children).map((child, i) => (
<li key={i} className="navds-menu__list-item">
{child}
</li>
))}
</ul>
);
export default MenuItems;
+3
View File
@@ -0,0 +1,3 @@
export { default as Menu, MenuProps } from "./Menu";
export { MenuCollapseProps } from "./MenuCollapse";
export { MenuItemProps } from "./MenuItem";
@@ -0,0 +1,93 @@
import { Meta, Canvas } from "@storybook/addon-docs";
import { Menu } from "../../index";
<Meta title="ds-react/menu/intro" />
# Hvordan ta i bruk Menu
```jsx
<Menu>
<Menu.Item href="#leo">Leo</Menu.Item>
<Menu.Collapse title="Proin">
<Menu.Item href="#nulla" active>
Nulla
</Menu.Item>
<Menu.Item href="#luctus">Luctus</Menu.Item>
</Menu.Collapse>
<Menu.Collapse title="Accumsan">
<Menu.Item href="#justo" aria-current="page">
Justo
</Menu.Item>
<Menu.Collapse title="Proin">
<Menu.Item href="#nulla">Nulla</Menu.Item>
<Menu.Item href="#luctus">Luctus</Menu.Item>
</Menu.Collapse>
</Menu.Collapse>
</Menu>
```
<Canvas>
<Menu>
<Menu.Item href="#leo">Leo</Menu.Item>
<Menu.Collapse title="Proin">
<Menu.Item href="#nulla" active>
Nulla
</Menu.Item>
<Menu.Item href="#luctus">Luctus</Menu.Item>
</Menu.Collapse>
<Menu.Collapse title="Accumsan">
<Menu.Item href="#justo">Justo</Menu.Item>
<Menu.Collapse title="Proin">
<Menu.Item href="#nulla">Nulla</Menu.Item>
<Menu.Item href="#luctus">Luctus</Menu.Item>
</Menu.Collapse>
</Menu.Collapse>
</Menu>
</Canvas>
## Elementer i menyen
Menyen har to typer elementer man kan bruke: `Collapse` for nesting og `Item` for navigasjonslenker på siden.
<Canvas>
<div>
<h2>Item</h2>
<Menu>
<Menu.Item href="#leo">Lenke</Menu.Item>
<Menu.Item href="#leo">Lenke</Menu.Item>
<Menu.Item href="#leo">Lenke</Menu.Item>
<Menu.Item href="#leo">Lenke</Menu.Item>
<Menu.Item href="#leo">Lenke</Menu.Item>
</Menu>
<h2>Collapses + Item</h2>
<Menu>
<Menu.Collapse title="Proin">
<Menu.Item href="#nulla" active>
Nulla
</Menu.Item>
<Menu.Item href="#luctus">Luctus</Menu.Item>
</Menu.Collapse>
<Menu.Collapse title="Accumsan">
<Menu.Item href="#justo">Justo</Menu.Item>
<Menu.Collapse title="Proin">
<Menu.Item href="#nulla">Nulla</Menu.Item>
<Menu.Item href="#luctus">Luctus</Menu.Item>
</Menu.Collapse>
</Menu.Collapse>
<Menu.Item href="#leo">Lenke</Menu.Item>
<Menu.Item href="#leo">Lenke</Menu.Item>
</Menu>
</div>
</Canvas>
`Menu.Item` er implementert med `OverridableComponent`, noe som
gjør at man kan ta i bruk eks react-router slik:
```jsx
<Menu.Item as={NavLink} activeClassName="navds-menu-item--active" to="/1">
Lenketekst
</Menu.Item>
```
Her er `NavLink` fra `react-router-dom` brukt, og man får da
samtidig bruke alle propsene til denne komponenten som da er `activeClassName` her.
@@ -0,0 +1,139 @@
import * as React from "react";
import cl from "classnames";
import { Menu } from "../index";
import { NavLink, HashRouter as Router } from "react-router-dom";
import { MenuItemProps } from "../MenuItem";
export default {
title: "ds-react/menu",
component: { Menu },
};
export const All = () => (
<div
style={{
background: "white",
maxWidth: 288,
}}
>
<h2>Only Menu.Items</h2>
<Menu>
<Menu.Item href="#leo">Leo</Menu.Item>
<Menu.Item href="#justo">Justo</Menu.Item>
<Menu.Item href="#pariatur" active aria-current="page">
Pariatur
</Menu.Item>
<Menu.Item href="#nulla">Nulla</Menu.Item>
<Menu.Item href="#luctus">Luctus</Menu.Item>
<Menu.Item href="#justo">Justo</Menu.Item>
<Menu.Item href="#pariatur">Pariatur</Menu.Item>
</Menu>
<h2>With Collapse</h2>
<Menu>
<Menu.Item href="#leo">Leo</Menu.Item>
<Menu.Collapse title="Proin">
<Menu.Item href="#nulla" active>
Nulla
</Menu.Item>
<Menu.Item href="#luctus">Luctus</Menu.Item>
</Menu.Collapse>
<Menu.Collapse title="Accumsan">
<Menu.Item href="#justo" aria-current="page">
Justo
</Menu.Item>
<Menu.Item href="#pariatur" active aria-current="page">
Pariatur
</Menu.Item>
<Menu.Collapse title="Proin">
<Menu.Item href="#nulla" active>
Nulla
</Menu.Item>
<Menu.Collapse title="Proin">
<Menu.Item href="#nulla" active>
Nulla
</Menu.Item>
<Menu.Item href="#luctus">Luctus</Menu.Item>
</Menu.Collapse>
<Menu.Item href="#luctus">Luctus</Menu.Item>
</Menu.Collapse>
</Menu.Collapse>
<Menu.Item href="#justo" active>
Justo
</Menu.Item>
<Menu.Item href="#pariatur">Pariatur</Menu.Item>
</Menu>
</div>
);
export const ReactRouter = () => {
const MenuItemLink = (props: MenuItemProps & { to: string }) => {
const { to } = props;
const CustomLink = React.useMemo(
() => (props: MenuItemProps) => (
<NavLink
{...props}
to={to}
className={({ isActive }) =>
cl(props.className, {
"navds-menu-item--active": isActive,
})
}
/>
),
[to]
);
return (
<Menu.Item {...props} as={CustomLink}>
Nivå 2 innrykk 2 rems
</Menu.Item>
);
};
return (
<Menu>
<Menu.Collapse title="Nivå 1 - 3 rems høy">
<MenuItemLink to="/1">Nivå 2 innrykk 2 rems</MenuItemLink>
<MenuItemLink to="/2">Subtitle 3</MenuItemLink>
</Menu.Collapse>
<Menu.Collapse title="Skjema og søknad">
<Menu.Collapse title="Satser">
<MenuItemLink to="/3">
Nivå 3 - 3 rems innrykk Har du rett til dagpenger når du mottar
annen økonomisk støtte fra NAV?
</MenuItemLink>
</Menu.Collapse>
<MenuItemLink to="/4">Subtitle 2</MenuItemLink>
<MenuItemLink to="/5">Subtitle 3</MenuItemLink>
</Menu.Collapse>
<Menu.Collapse title="Sakbehandlingstider">
<Menu.Collapse title="Subtitle 4 Lang tittel på andre nivå lorem ipsum">
<MenuItemLink to="/6">Subtitle 5</MenuItemLink>
</Menu.Collapse>
</Menu.Collapse>
<MenuItemLink to="/7">Internasjonalt</MenuItemLink>
<Menu.Collapse title="Meld fra om endringer lang tittel på første nivå">
<MenuItemLink to="/8">Subtitle 6</MenuItemLink>
</Menu.Collapse>
<MenuItemLink to="/9">Nivå 1</MenuItemLink>
</Menu>
);
};
ReactRouter.decorators = [
(Story) => (
<Router>
<div
style={{
background: "white",
maxWidth: 288,
}}
>
<Story />
</div>
</Router>
),
];
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/ds-tokens",
"version": "0.7.1",
"version": "0.8.0",
"private": false,
"description": "Auto-generated design-tokens for NAV design-systems framework",
"author": "NAV Designsystem team",
+13 -4
View File
@@ -74,16 +74,25 @@
"value": "rgba(241, 241, 241, 1)"
},
"200": {
"value": "rgba(201, 201, 201, 1)"
"value": "rgba(229, 229, 229, 1)"
},
"300": {
"value": "rgba(207, 207, 207, 1)"
},
"400": {
"value": "rgba(160, 160, 160, 1)"
"value": "rgba(176, 176, 176, 1)"
},
"500": {
"value": "rgba(143, 143, 143, 1)"
},
"600": {
"value": "rgba(106, 106, 106, 1)"
"value": "rgba(112, 112, 112, 1)"
},
"700": {
"value": "rgba(89, 89, 89, 1)"
},
"800": {
"value": "rgba(79, 79, 79, 1)"
"value": "rgba(64, 64, 64, 1)"
},
"900": {
"value": "rgba(38, 38, 38, 1)"
+3 -3
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/ds-react-internal",
"version": "0.9.14",
"version": "0.10.2",
"private": false,
"description": "NAV internal designsystem react components",
"author": "NAV Designsystem team",
@@ -33,8 +33,8 @@
"watch": "tsc --watch -p tsconfig.esm.json"
},
"dependencies": {
"@navikt/ds-icons": "^0.7.3",
"@navikt/ds-react": "^0.14.14",
"@navikt/ds-icons": "^0.8.1",
"@navikt/ds-react": "^0.15.2",
"@popperjs/core": "^2.10.1",
"classnames": "^2.3.1",
"copy-to-clipboard": "^3.3.1",
+1 -1
View File
@@ -40,7 +40,7 @@ Gå til [CONTRIBUTING.md](https://github.com/navikt/nav-frontend-moduler/blob/ma
## Lisenser
Gå til [LICENSE](https://github.com/navikt/nav-frontend-moduler/blob/master/LICENSE)
Gå til [LICENSE](https://github.com/navikt/nav-frontend-moduler/blob/master/LICENCE)
## Contributors
+1 -1
View File
@@ -6,5 +6,5 @@
"target": "es6",
"moduleResolution": "node"
},
"exclude": ["**/stories", "**/*.test.ts", "**/*.test.tsx"]
"exclude": ["**/stories", "**/*.stories.*", "**/*.test.ts", "**/*.test.tsx"]
}