mirror of
https://github.com/navikt/aksel.git
synced 2026-10-14 17:52:02 +00:00
Compare commits
12
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
0128f5a467 | ||
|
|
0a61ab629a | ||
|
|
4ea5face0c | ||
|
|
248a83221a | ||
|
|
eceaa7e659 | ||
|
|
811c0024c5 | ||
|
|
aaefaddb13 | ||
|
|
f464347f6e | ||
|
|
6608d01c1e | ||
|
|
335bc62922 | ||
|
|
3c230d8f4c | ||
|
|
5bb7de3b4c |
No files matched your search
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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",
|
||||
|
||||
@@ -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: {
|
||||
@@ -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,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.
|
||||
@@ -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 |
@@ -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 |
@@ -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 |
File renamed without changes.
@@ -4,5 +4,5 @@
|
||||
"outDir": "./cjs",
|
||||
"module": "commonjs"
|
||||
},
|
||||
"exclude": ["./figma", "./scripts", "**/stories"]
|
||||
"exclude": ["./figma", "./scripts", "**/*.stories.*"]
|
||||
}
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
+2
-2
@@ -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
-1
@@ -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,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";
|
||||
|
||||
@@ -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;
|
||||
+6
-6
@@ -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}
|
||||
>
|
||||
@@ -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;
|
||||
@@ -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,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",
|
||||
|
||||
@@ -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)"
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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
@@ -6,5 +6,5 @@
|
||||
"target": "es6",
|
||||
"moduleResolution": "node"
|
||||
},
|
||||
"exclude": ["**/stories", "**/*.test.ts", "**/*.test.tsx"]
|
||||
"exclude": ["**/stories", "**/*.stories.*", "**/*.test.ts", "**/*.test.tsx"]
|
||||
}
|
||||
Reference in new issue
Block a user