mirror of
https://github.com/navikt/aksel.git
synced 2026-10-14 01:32:02 +00:00
Compare commits
25
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 github-actions[bot]
|
fe6bc395c2 | ||
|
Ken
|
c8f8e59d78 | ||
|
github-actions[bot]
|
ef6c597021 | ||
|
Ken
|
bc5df7f004 | ||
|
Ken
|
1fcc39c2aa | ||
|
github-actions[bot]
|
92febc6e0c | ||
|
Ken
|
caa4a41df2 | ||
|
github-actions[bot]
|
e6dfbb7a4f | ||
|
Ken
|
d59f8970cc | ||
|
Ken
|
d631913e77 | ||
|
github-actions[bot]
|
28f994a757 | ||
|
Ken
|
e1b383122c | ||
|
github-actions[bot]
|
f47cfdcb9e | ||
|
Ken
|
dc3a09b0c0 | ||
|
Ken
|
594a2df49b | ||
|
github-actions[bot]
|
bf41d8f181 | ||
|
Ken
|
0345b8d045 | ||
|
github-actions[bot]
|
ff89d6e4e8 | ||
|
Ken
|
dea62ab969 | ||
|
Ken
|
25dbcce053 | ||
|
github-actions[bot]
|
3e0e9ad15c | ||
|
Ken
|
bfd929a324 | ||
|
Ken
|
50922a3206 | ||
|
github-actions[bot]
|
2817353f8e | ||
|
Ken
|
1f3dca06d7 |
No files matched your search
@@ -11,6 +11,7 @@ module.exports = {
|
||||
};
|
||||
return config;
|
||||
},
|
||||
staticDirs: ["./public"],
|
||||
devServer: {
|
||||
stats: "errors-only",
|
||||
},
|
||||
|
||||
@@ -1,6 +1,12 @@
|
||||
import { addons } from "@storybook/addons";
|
||||
import NavTheme from "./theme.js";
|
||||
import logoUrl from "./public/logo.svg";
|
||||
|
||||
addons.setConfig({
|
||||
theme: NavTheme,
|
||||
});
|
||||
|
||||
const link = document.createElement("link");
|
||||
link.setAttribute("rel", "shortcut icon");
|
||||
link.setAttribute("href", logoUrl);
|
||||
document.head.appendChild(link);
|
||||
+18
-1
@@ -7,10 +7,27 @@ export const parameters = {
|
||||
options: {
|
||||
storySort: {
|
||||
method: "",
|
||||
order: ["ds-icons", "ds-react", ["Default"]],
|
||||
order: ["Intro", "ds-icons", "ds-react", ["Default"]],
|
||||
locales: "",
|
||||
},
|
||||
},
|
||||
viewMode: "docs",
|
||||
layout: "centered",
|
||||
backgrounds: {
|
||||
default: "Canvas",
|
||||
values: [
|
||||
{
|
||||
name: "Canvas",
|
||||
value: "#ffffff",
|
||||
},
|
||||
{
|
||||
name: "Alternate",
|
||||
value: "#f7f7f7",
|
||||
},
|
||||
{
|
||||
name: "Inverted",
|
||||
value: "#292929",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,20 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="44"
|
||||
height="44"
|
||||
fill="none"
|
||||
viewBox="0 0 44 44"
|
||||
>
|
||||
<path
|
||||
fill="rgba(153, 196, 221, 1)"
|
||||
fill-rule="evenodd"
|
||||
d="M9.07 3.03A10.33 10.33 0 0 1 16.37 0h17.3C39.37 0 44 4.62 44 10.33v17.3c0 2.73-1.09 5.36-3.03 7.3l-6.04 6.04a10.33 10.33 0 0 1-7.3 3.03h-17.3C4.63 44 0 39.38 0 33.67v-17.3c0-2.73 1.09-5.36 3.03-7.3l6.04-6.04Z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
<path
|
||||
fill="rgba(0, 36, 58, 1)"
|
||||
fill-rule="evenodd"
|
||||
d="M12.96 6.92a4.82 4.82 0 0 1 3.42-1.42h17.29a4.83 4.83 0 0 1 4.83 4.83v17.29a4.8 4.8 0 0 1-1.42 3.42l-.37.37-6.65 6.65a1.5 1.5 0 1 1-2.12-2.12l6.64-6.64v-.01c.72-.72.72-1.87 0-2.59L17.3 9.42a1.83 1.83 0 0 0-2.6 0l-6.64 6.64a1.5 1.5 0 1 1-2.12-2.12l7.02-7.02Zm22.54 3.41v13.05L20.62 8.5h13.05c1 0 1.83.82 1.83 1.83ZM20.06 26.06a1.5 1.5 0 0 0-2.12-2.12l-11 11a1.5 1.5 0 1 0 2.12 2.12l11-11Z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 925 B |
@@ -1,6 +1,22 @@
|
||||
import { create } from "@storybook/theming";
|
||||
/* import logoUrl from "./public/logo.svg"; */
|
||||
|
||||
export default create({
|
||||
/* brandImage: process.env.NODE_ENV === "production" ? logoUrl : "/logo.svg", */
|
||||
base: "light",
|
||||
// Typography
|
||||
fontBase: '"Source Sans Pro", sans-serif',
|
||||
fontCode: "monospace",
|
||||
|
||||
// Text colors
|
||||
textColor: "#292929",
|
||||
textInverseColor: "rgba(255,255,255,0.9)",
|
||||
|
||||
colorSecondary: "rgba(0, 36, 58, 1)",
|
||||
colorPrimary: "rgba(153, 196, 221, 1)",
|
||||
|
||||
barTextColor: "rgba(0, 91, 130, 1)",
|
||||
barSelectedColor: "rgba(0, 36, 58, 1)",
|
||||
|
||||
brandTitle: "NAV Designsystem",
|
||||
});
|
||||
@@ -0,0 +1,38 @@
|
||||
import { Meta, Canvas } from "@storybook/addon-docs";
|
||||
|
||||
<Meta title="Intro/Velkommen" />
|
||||
|
||||
# NAV designsystem-komponenter
|
||||
|
||||
- [Dokumentasjon](https://aksel.nav.no/designsystem)
|
||||
- [Komponenter](https://aksel.nav.no/designsystem/side/oversikt-komponenter)
|
||||
|
||||
## Kom i gang
|
||||
|
||||
### Kjernepakke
|
||||
|
||||
```bash
|
||||
yarn add @navikt/ds-react @navikt/ds-css @navikt/ds-icons
|
||||
```
|
||||
|
||||
### Pakke for interne-flater
|
||||
|
||||
```bash
|
||||
yarn add @navikt/ds-react-internal @navikt/ds-css-internal
|
||||
```
|
||||
|
||||
### Bruk
|
||||
|
||||
```jsx
|
||||
import { Heading } from "@navikt/ds-react";
|
||||
|
||||
<Heading level="1" size="xlarge">
|
||||
Sidetitel
|
||||
</Heading>;
|
||||
```
|
||||
|
||||
## Bidra
|
||||
|
||||
Hjelp oss med å forbedre designsystemet med feedback eller kode-hjelp
|
||||
|
||||
- [Kode](https://github.com/navikt/Designsystemet/tree/master/%40navikt)
|
||||
@@ -1,7 +1,7 @@
|
||||
:root {
|
||||
--navds-accordion-color-text: var(--navds-semantic-color-text);
|
||||
--navds-accordion-color-background: var(
|
||||
---navds-semantic-color-component-background-light
|
||||
--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);
|
||||
|
||||
@@ -45,7 +45,7 @@ a {
|
||||
|
||||
/* https://web.dev/prefers-reduced-motion/ */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*:not(.navds-loader *):not(.navds-loader),
|
||||
::before,
|
||||
::after {
|
||||
animation-delay: -1ms !important;
|
||||
|
||||
@@ -5,6 +5,9 @@
|
||||
--navds-confirmation-panel-color-background-checked: var(
|
||||
--navds-global-color-green-50
|
||||
);
|
||||
--navds-confirmation-panel-color-background-error: var(
|
||||
--navds-global-color-red-50
|
||||
);
|
||||
--navds-confirmation-panel-color-border: var(
|
||||
--navds-semantic-color-feedback-warning-border
|
||||
);
|
||||
@@ -12,32 +15,14 @@
|
||||
--navds-semantic-color-feedback-success-border
|
||||
);
|
||||
--navds-confirmation-panel-color-border-error: var(
|
||||
--navds-semantic-color-feedback-danger-background
|
||||
);
|
||||
--navds-confirmation-panel-color-background-error: var(
|
||||
--navds-global-color-red-50
|
||||
);
|
||||
--navds-confirmation-panel-color-checkbox-background-checked-hover: var(
|
||||
--navds-global-color-green-700
|
||||
);
|
||||
--navds-confirmation-panel-color-checkbox-border-checked-hover: var(
|
||||
--navds-global-color-green-700
|
||||
);
|
||||
--navds-confirmation-panel-color-checkbox-background-checked: var(
|
||||
--navds-global-color-green-500
|
||||
);
|
||||
--navds-confirmation-panel-color-checkbox-border-checked: var(
|
||||
--navds-semantic-color-feedback-success-border
|
||||
);
|
||||
--navds-confirmation-panel-color-checkbox-label-checked: var(
|
||||
--navds-semantic-color-text
|
||||
--navds-semantic-color-feedback-danger-border
|
||||
);
|
||||
}
|
||||
|
||||
.navds-confirmation-panel__inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--navds-spacing-4);
|
||||
gap: var(--navds-spacing-3);
|
||||
padding: var(--navds-spacing-4);
|
||||
border-radius: var(--navds-border-radius-medium);
|
||||
border: 1px solid var(--navds-confirmation-panel-color-border);
|
||||
@@ -49,11 +34,6 @@
|
||||
max-width: 80ch;
|
||||
}
|
||||
|
||||
.navds-confirmation-panel--small .navds-confirmation-panel__inner {
|
||||
padding: var(--navds-spacing-3);
|
||||
gap: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-confirmation-panel--checked .navds-confirmation-panel__inner {
|
||||
background-color: var(--navds-confirmation-panel-color-background-checked);
|
||||
border-color: var(--navds-confirmation-panel-color-border-checked);
|
||||
@@ -61,45 +41,5 @@
|
||||
|
||||
.navds-confirmation-panel--error .navds-confirmation-panel__inner {
|
||||
background-color: var(--navds-confirmation-panel-color-background-error);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.navds-confirmation-panel
|
||||
.navds-checkbox__input:hover
|
||||
+ .navds-checkbox__label {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.navds-confirmation-panel--checked
|
||||
.navds-checkbox__input:hover
|
||||
+ .navds-checkbox__label {
|
||||
color: var(--navds-confirmation-panel-color-checkbox-label-checked);
|
||||
}
|
||||
|
||||
.navds-confirmation-panel--checked
|
||||
.navds-checkbox__input
|
||||
+ .navds-checkbox__label::before {
|
||||
transition: none;
|
||||
background-color: var(
|
||||
--navds-confirmation-panel-color-checkbox-background-checked
|
||||
);
|
||||
border-color: var(--navds-confirmation-panel-color-checkbox-border-checked);
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
|
||||
}
|
||||
|
||||
.navds-confirmation-panel--checked
|
||||
.navds-checkbox__input:hover
|
||||
+ .navds-checkbox__label::before {
|
||||
background-color: var(
|
||||
--navds-confirmation-panel-color-checkbox-background-checked-hover
|
||||
);
|
||||
border-color: var(
|
||||
--navds-confirmation-panel-color-checkbox-border-checked-hover
|
||||
);
|
||||
}
|
||||
|
||||
.navds-confirmation-panel--checked
|
||||
.navds-checkbox__input:focus:hover
|
||||
+ .navds-checkbox__label::before {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
|
||||
border-color: var(--navds-confirmation-panel-color-border-error);
|
||||
}
|
||||
@@ -9,12 +9,12 @@
|
||||
|
||||
.navds-error-summary {
|
||||
background-color: var(--navds-error-summary-color-background);
|
||||
padding: var(--navds-spacing-4);
|
||||
padding: var(--navds-spacing-5);
|
||||
border: 4px solid var(--navds-error-summary-color-border);
|
||||
}
|
||||
|
||||
.navds-error-summary--small {
|
||||
padding: var(--navds-spacing-2);
|
||||
padding: var(--navds-spacing-3);
|
||||
}
|
||||
|
||||
.navds-error-summary:focus {
|
||||
@@ -23,12 +23,20 @@
|
||||
}
|
||||
|
||||
.navds-error-summary__list {
|
||||
margin: 1rem 0;
|
||||
margin: var(--navds-spacing-3) 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
gap: var(--navds-spacing-3);
|
||||
padding-left: var(--navds-spacing-6);
|
||||
list-style: inherit;
|
||||
}
|
||||
|
||||
.navds-error-summary__list > * {
|
||||
color: var(--navds-global-color-blue-500);
|
||||
}
|
||||
|
||||
.navds-error-summary--small > .navds-error-summary__list {
|
||||
margin: 0.5rem 0;
|
||||
margin: var(--navds-spacing-2) 0;
|
||||
gap: var(--navds-spacing-2);
|
||||
padding-left: var(--navds-spacing-5);
|
||||
}
|
||||
@@ -1,12 +1,11 @@
|
||||
.navds-form-field > :not(:first-child):not(:empty),
|
||||
.navds-form-field > input:not(:first-child) {
|
||||
margin-top: var(--navds-spacing-2);
|
||||
.navds-form-field {
|
||||
display: grid;
|
||||
justify-items: start;
|
||||
gap: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
/* Applied when hideLabel is applied to form-element */
|
||||
.navds-form-field > .navds-sr-only + :not(:first-child):not(:empty),
|
||||
.navds-form-field > .navds-sr-only + input:not(:first-child) {
|
||||
margin-top: 0;
|
||||
.navds-form-field__description {
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.navds-form-field .navds-error-message,
|
||||
@@ -19,3 +18,12 @@
|
||||
.navds-fieldset .navds-error-message::before {
|
||||
content: "•";
|
||||
}
|
||||
|
||||
.navds-form-field--disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.navds-form-field__error:empty {
|
||||
display: none;
|
||||
}
|
||||
@@ -70,13 +70,6 @@
|
||||
border-color: var(--navds-select-color-border-error);
|
||||
}
|
||||
|
||||
/*
|
||||
Disabled handling
|
||||
*/
|
||||
.navds-select--disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.navds-select__input:disabled {
|
||||
background-color: var(--navds-select-color-background);
|
||||
border-color: var(--navds-select-color-border);
|
||||
|
||||
@@ -45,6 +45,10 @@
|
||||
color: var(--navds-text-field-color-text);
|
||||
}
|
||||
|
||||
.navds-text-field__input[size] {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.navds-text-field__input::placeholder {
|
||||
color: var(--navds-text-field-color-placeholder-text);
|
||||
}
|
||||
@@ -54,10 +58,6 @@
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.navds-form-field--small > .navds-text-field__description:not(:empty) {
|
||||
margin-top: var(--navds-spacing-1);
|
||||
}
|
||||
|
||||
.navds-text-field__input:hover {
|
||||
border-color: var(--navds-text-field-color-border-hover);
|
||||
}
|
||||
@@ -87,7 +87,6 @@
|
||||
border-color: var(--navds-text-field-color-border);
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.navds-text-field__input[readonly] {
|
||||
@@ -97,11 +96,6 @@
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.navds-text-field--disabled > .navds-text-field__label,
|
||||
.navds-text-field--disabled > .navds-text-field__description {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes default search icon
|
||||
*/
|
||||
|
||||
@@ -38,6 +38,7 @@
|
||||
width: 100%;
|
||||
display: block;
|
||||
min-height: 48px;
|
||||
color: var(--navds-text-field-color-text);
|
||||
}
|
||||
|
||||
.navds-textarea--counter {
|
||||
@@ -89,13 +90,6 @@
|
||||
border-color: var(--navds-textarea-color-border-error);
|
||||
}
|
||||
|
||||
/*
|
||||
Disabled handling
|
||||
*/
|
||||
.navds-textarea--disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.navds-textarea__input:disabled {
|
||||
background-color: var(--navds-textarea-color-background);
|
||||
border-color: var(--navds-textarea-color-border);
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
}
|
||||
|
||||
.navds-link-panel:hover {
|
||||
box-shadow: var(--navds-shadow-card);
|
||||
box-shadow: var(--navds-shadow-medium);
|
||||
border-color: var(--navds-link-panel-color-border-hover);
|
||||
}
|
||||
|
||||
|
||||
@@ -48,10 +48,6 @@
|
||||
}
|
||||
|
||||
.navds-link svg {
|
||||
color: var(--navds-link-color-icon);
|
||||
color: inherit;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navds-link:focus svg {
|
||||
color: var(--navds-link-color-icon-focus);
|
||||
}
|
||||
@@ -10,7 +10,7 @@
|
||||
--navds-loader-color-inverted-foreground: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-loader-color-inverted-background: rgb(255 255 255 / 0.3);
|
||||
--navds-loader-color-inverted-background: var(--navds-global-color-gray-600);
|
||||
--navds-loader-color-transparent-background: transparent;
|
||||
}
|
||||
|
||||
@@ -18,11 +18,14 @@
|
||||
width: 1.5rem;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
animation: loader-rotate 1.4s linear infinite;
|
||||
animation: loader-rotate 1.8s linear infinite;
|
||||
stroke-width: 6;
|
||||
|
||||
--navds-loader-background-stroke-width: 5.9;
|
||||
}
|
||||
|
||||
.navds-loader__foreground {
|
||||
animation: loader-dasharray 1.4s ease-in-out infinite;
|
||||
animation: loader-dasharray 1.8s ease-in-out infinite;
|
||||
stroke-dasharray: 80px, 200px;
|
||||
stroke-dashoffset: 0;
|
||||
stroke: var(--navds-loader-color-foreground);
|
||||
@@ -30,6 +33,7 @@
|
||||
|
||||
.navds-loader__background {
|
||||
stroke: var(--navds-loader-color-background);
|
||||
stroke-width: var(--navds-loader-background-stroke-width);
|
||||
}
|
||||
|
||||
.navds-loader--neutral .navds-loader__foreground {
|
||||
@@ -52,28 +56,53 @@
|
||||
stroke: var(--navds-loader-color-transparent-background);
|
||||
}
|
||||
|
||||
.navds-loader--3xlarge {
|
||||
width: 5.5rem;
|
||||
stroke-width: 5;
|
||||
|
||||
--navds-loader-background-stroke-width: 4.8;
|
||||
}
|
||||
|
||||
.navds-loader--2xlarge {
|
||||
width: 4rem;
|
||||
stroke-width: 6;
|
||||
|
||||
--navds-loader-background-stroke-width: 5.8;
|
||||
}
|
||||
|
||||
.navds-loader--xlarge {
|
||||
width: 2.5rem;
|
||||
stroke-width: 6;
|
||||
|
||||
--navds-loader-background-stroke-width: 5.8;
|
||||
}
|
||||
|
||||
.navds-loader--large {
|
||||
width: 2rem;
|
||||
stroke-width: 7;
|
||||
|
||||
--navds-loader-background-stroke-width: 6.8;
|
||||
}
|
||||
|
||||
.navds-loader--medium {
|
||||
width: 1.5rem;
|
||||
stroke-width: 7;
|
||||
|
||||
--navds-loader-background-stroke-width: 6.8;
|
||||
}
|
||||
|
||||
.navds-loader--small {
|
||||
width: 1.25rem;
|
||||
stroke-width: 8;
|
||||
|
||||
--navds-loader-background-stroke-width: 7.8;
|
||||
}
|
||||
|
||||
.navds-loader--xsmall {
|
||||
width: 1rem;
|
||||
stroke-width: 8;
|
||||
|
||||
--navds-loader-background-stroke-width: 7.8;
|
||||
}
|
||||
|
||||
@keyframes loader-rotate {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-css",
|
||||
"version": "0.18.8",
|
||||
"version": "0.18.16",
|
||||
"description": "Css for NAV Designsystem components",
|
||||
"author": "NAV Designsystem team",
|
||||
"keywords": [
|
||||
@@ -20,7 +20,7 @@
|
||||
"watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-tokens": "^0.9.5",
|
||||
"@navikt/ds-tokens": "^0.9.6",
|
||||
"normalize.css": "^8.0.1",
|
||||
"postcss": "^8.3.6",
|
||||
"postcss-cli": "^8.3.1",
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
.navds-popover {
|
||||
z-index: var(--navds-z-index-popover);
|
||||
background-color: var(--navds-popover-color-background);
|
||||
box-shadow: var(--navds-shadow-popover);
|
||||
box-shadow: var(--navds-shadow-medium);
|
||||
border: 1px solid;
|
||||
border-color: var(--navds-popover-color-border);
|
||||
border-radius: var(--navds-border-radius-medium);
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
|
||||
.navds-speechbubble__bubble {
|
||||
padding: 1rem;
|
||||
box-shadow: var(--navds-shadow-popover);
|
||||
box-shadow: var(--navds-shadow-small);
|
||||
width: fit-content;
|
||||
max-width: 37.5rem;
|
||||
background-color: var(--navds-speechbubble-color-background);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-react",
|
||||
"version": "0.19.9",
|
||||
"version": "0.19.14",
|
||||
"description": "NAV designsystem react components",
|
||||
"author": "NAV Designsystem team",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -5,6 +5,15 @@ import { BodyLong, Heading as DsHeading } from "..";
|
||||
export default {
|
||||
title: "ds-react/Alert",
|
||||
component: Alert,
|
||||
argTypes: {
|
||||
variant: {
|
||||
defaultValue: "info",
|
||||
control: {
|
||||
type: "radio",
|
||||
options: ["error", "warning", "info", "success"],
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const variants: Array<"error" | "warning" | "info" | "success"> = [
|
||||
@@ -26,7 +35,6 @@ export const Default = (props) => (
|
||||
);
|
||||
|
||||
Default.args = {
|
||||
variant: "info",
|
||||
children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
|
||||
};
|
||||
|
||||
|
||||
@@ -57,7 +57,12 @@ export const ConfirmationPanel = forwardRef<
|
||||
{label}
|
||||
</Checkbox>
|
||||
</div>
|
||||
<div id={errorId} aria-relevant="additions removals" aria-live="polite">
|
||||
<div
|
||||
className="navds-form-field__error"
|
||||
id={errorId}
|
||||
aria-relevant="additions removals"
|
||||
aria-live="polite"
|
||||
>
|
||||
{showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { forwardRef, SelectHTMLAttributes } from "react";
|
||||
import cl from "classnames";
|
||||
import { Expand } from "@navikt/ds-icons";
|
||||
import { BodyShort, Label, ErrorMessage, omit } from "..";
|
||||
import { BodyShort, Label, ErrorMessage, omit, Detail } from "..";
|
||||
import { FormFieldProps, useFormField } from "./useFormField";
|
||||
|
||||
export interface SelectProps
|
||||
@@ -53,8 +53,8 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
|
||||
"navds-form-field",
|
||||
`navds-form-field--${size}`,
|
||||
{
|
||||
"navds-form-field--disabled": !!inputProps.disabled,
|
||||
"navds-select--error": hasError,
|
||||
"navds-select--disabled": !!inputProps.disabled,
|
||||
}
|
||||
)}
|
||||
>
|
||||
@@ -62,23 +62,38 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
|
||||
htmlFor={inputProps.id}
|
||||
size={size}
|
||||
as="label"
|
||||
className={cl("navds-select__label", {
|
||||
className={cl("navds-form-field__label", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
>
|
||||
{label}
|
||||
</Label>
|
||||
{!!description && (
|
||||
<BodyShort
|
||||
as="div"
|
||||
className={cl("navds-select__description", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size={size}
|
||||
>
|
||||
{description}
|
||||
</BodyShort>
|
||||
<>
|
||||
{size === "medium" ? (
|
||||
<BodyShort
|
||||
className={cl("navds-form-field__description", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size="small"
|
||||
as="div"
|
||||
>
|
||||
{description}
|
||||
</BodyShort>
|
||||
) : (
|
||||
<Detail
|
||||
className={cl("navds-form-field__description", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size="small"
|
||||
as="div"
|
||||
>
|
||||
{description}
|
||||
</Detail>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<div className="navds-select__container">
|
||||
<select
|
||||
@@ -96,7 +111,12 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
|
||||
</select>
|
||||
<Expand className="navds-select__chevron" aria-hidden />
|
||||
</div>
|
||||
<div id={errorId} aria-relevant="additions removals" aria-live="polite">
|
||||
<div
|
||||
className="navds-form-field__error"
|
||||
id={errorId}
|
||||
aria-relevant="additions removals"
|
||||
aria-live="polite"
|
||||
>
|
||||
{showErrorMsg && (
|
||||
<ErrorMessage size={size}>{props.error}</ErrorMessage>
|
||||
)}
|
||||
|
||||
@@ -63,6 +63,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
|
||||
{
|
||||
"navds-text-field--error": hasError,
|
||||
"navds-text-field--disabled": !!inputProps.disabled,
|
||||
"navds-form-field--disabled": !!inputProps.disabled,
|
||||
}
|
||||
)}
|
||||
>
|
||||
@@ -70,7 +71,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
|
||||
htmlFor={inputProps.id}
|
||||
size={size}
|
||||
as="label"
|
||||
className={cl("navds-text-field__label", {
|
||||
className={cl("navds-form-field__label", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
>
|
||||
@@ -81,7 +82,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
|
||||
<>
|
||||
{size === "medium" ? (
|
||||
<BodyShort
|
||||
className={cl("navds-text-field__description", {
|
||||
className={cl("navds-form-field__description", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
@@ -92,7 +93,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
|
||||
</BodyShort>
|
||||
) : (
|
||||
<Detail
|
||||
className={cl("navds-text-field__description", {
|
||||
className={cl("navds-form-field__description", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
@@ -116,7 +117,12 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
|
||||
)}
|
||||
size={htmlSize}
|
||||
/>
|
||||
<div id={errorId} aria-relevant="additions removals" aria-live="polite">
|
||||
<div
|
||||
className="navds-form-field__error"
|
||||
id={errorId}
|
||||
aria-relevant="additions removals"
|
||||
aria-live="polite"
|
||||
>
|
||||
{showErrorMsg && (
|
||||
<ErrorMessage size={size}>{props.error}</ErrorMessage>
|
||||
)}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { forwardRef, useState } from "react";
|
||||
import cl from "classnames";
|
||||
import TextareaAutosize from "@material-ui/core/TextareaAutosize";
|
||||
import { BodyShort, Label, ErrorMessage, omit } from "..";
|
||||
import { BodyShort, Label, ErrorMessage, omit, Detail } from "..";
|
||||
import { FormFieldProps, useFormField } from "./useFormField";
|
||||
import { useId } from "..";
|
||||
|
||||
@@ -90,8 +90,8 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||
"navds-form-field",
|
||||
`navds-form-field--${size}`,
|
||||
{
|
||||
"navds-form-field--disabled": !!inputProps.disabled,
|
||||
"navds-textarea--error": hasError,
|
||||
"navds-textarea--disabled": !!inputProps.disabled,
|
||||
"navds-textarea--resize": resize,
|
||||
}
|
||||
)}
|
||||
@@ -100,23 +100,38 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||
htmlFor={inputProps.id}
|
||||
size={size}
|
||||
as="label"
|
||||
className={cl("navds-textarea__label", {
|
||||
className={cl("navds-form-field__label", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
>
|
||||
{label}
|
||||
</Label>
|
||||
{!!description && (
|
||||
<BodyShort
|
||||
as="div"
|
||||
className={cl("navds-textarea__description", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size={size}
|
||||
>
|
||||
{description}
|
||||
</BodyShort>
|
||||
<>
|
||||
{size === "medium" ? (
|
||||
<BodyShort
|
||||
className={cl("navds-form-field__description", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size="small"
|
||||
as="div"
|
||||
>
|
||||
{description}
|
||||
</BodyShort>
|
||||
) : (
|
||||
<Detail
|
||||
className={cl("navds-form-field__description", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size="small"
|
||||
as="div"
|
||||
>
|
||||
{description}
|
||||
</Detail>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<div className="navds-textarea__wrapper">
|
||||
<TextareaAutosize
|
||||
@@ -144,8 +159,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||
{hasMaxLength && (
|
||||
<>
|
||||
<span id={maxLengthId} className="navds-sr-only">
|
||||
Tekstområde med plass til {maxLength} tegn., Textarea can have{" "}
|
||||
{maxLength} signs.
|
||||
Tekstområde med plass til {maxLength} tegn.
|
||||
</span>
|
||||
<Counter
|
||||
maxLength={maxLength}
|
||||
@@ -155,7 +169,12 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div id={errorId} aria-relevant="additions removals" aria-live="polite">
|
||||
<div
|
||||
className="navds-form-field__error"
|
||||
id={errorId}
|
||||
aria-relevant="additions removals"
|
||||
aria-live="polite"
|
||||
>
|
||||
{showErrorMsg && (
|
||||
<ErrorMessage size={size}>{props.error}</ErrorMessage>
|
||||
)}
|
||||
|
||||
@@ -2,6 +2,7 @@ import React, { forwardRef, HTMLAttributes } from "react";
|
||||
import cl from "classnames";
|
||||
import { Heading, BodyShort } from "../..";
|
||||
import ErrorSummaryItem, { ErrorSummaryItemType } from "./ErrorSummaryItem";
|
||||
import { useId } from "../../util";
|
||||
|
||||
export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
|
||||
/**
|
||||
@@ -43,8 +44,10 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const headingId = useId();
|
||||
|
||||
return (
|
||||
<div
|
||||
<section
|
||||
ref={ref}
|
||||
{...rest}
|
||||
className={cl(
|
||||
@@ -53,12 +56,15 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
|
||||
`navds-error-summary--${size}`
|
||||
)}
|
||||
tabIndex={-1}
|
||||
role="region"
|
||||
aria-live="polite"
|
||||
aria-relevant="all"
|
||||
aria-labelledby={`error-summary-${headingId}`}
|
||||
>
|
||||
<Heading
|
||||
className="navds-error-summary__heading"
|
||||
as={headingTag}
|
||||
size="small"
|
||||
id={`error-summary-${headingId}`}
|
||||
>
|
||||
{heading}
|
||||
</Heading>
|
||||
@@ -67,7 +73,7 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
|
||||
return <li key={child?.toString()}>{child}</li>;
|
||||
})}
|
||||
</BodyShort>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
) as ErrorSummaryComponent;
|
||||
|
||||
@@ -78,10 +78,11 @@ export const SearchContext = React.createContext<SearchContextProps | null>(
|
||||
|
||||
export const Search = forwardRef<HTMLInputElement, SearchProps>(
|
||||
(props, ref) => {
|
||||
const { inputProps, size = "medium", inputDescriptionId } = useSearch(
|
||||
props,
|
||||
"searchfield"
|
||||
);
|
||||
const {
|
||||
inputProps,
|
||||
size = "medium",
|
||||
inputDescriptionId,
|
||||
} = useSearch(props, "searchfield");
|
||||
|
||||
const {
|
||||
className,
|
||||
@@ -153,7 +154,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
|
||||
htmlFor={inputProps.id}
|
||||
size={size}
|
||||
as="label"
|
||||
className={cl("navds-text-field__label", {
|
||||
className={cl("navds-form-field__label", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
>
|
||||
@@ -162,7 +163,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
|
||||
{!!description && (
|
||||
<BodyShort
|
||||
as="div"
|
||||
className={cl("navds-text-field__description", {
|
||||
className={cl("navds-form-field__description", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
|
||||
@@ -61,8 +61,14 @@ export const Description = () => (
|
||||
legend="Mollit eiusmod"
|
||||
description="Esse cupidatat reprehenderit est culpa consectetur sit dolor esse."
|
||||
>
|
||||
<TextField label="Textfield label" hideLabel />
|
||||
<TextField label="Textfield label" hideLabel />
|
||||
<TextField
|
||||
label="Textfield label"
|
||||
description="Amet quis cillum incididunt "
|
||||
/>
|
||||
<TextField
|
||||
label="Textfield label"
|
||||
description="Enim et occaecat voluptate labore sit do exercitation laborum non "
|
||||
/>
|
||||
</Fieldset>
|
||||
);
|
||||
|
||||
|
||||
@@ -44,6 +44,7 @@ export const Default = (props) => {
|
||||
|
||||
Default.args = {
|
||||
maxLength: 100,
|
||||
resize: false,
|
||||
};
|
||||
|
||||
export const Small = () => {
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
import React from "react";
|
||||
import { GuidePanel } from "../index";
|
||||
import { Meta } from "@storybook/react/types-6-0";
|
||||
export default {
|
||||
title: "ds-react/GuidePanel",
|
||||
component: GuidePanel,
|
||||
} as Meta;
|
||||
|
||||
const panelText = `Sit sint eu dolore reprehenderit exercitation labore aute anim sit
|
||||
adipisicing proident. Tempor ipsum ea cupidatat qui esse do veniam
|
||||
cupidatat. Excepteur irure reprehenderit esse tempor nisi duis qui ea
|
||||
enim id.`;
|
||||
|
||||
export const Default = (props) => {
|
||||
const newProps = props?.colorOverride
|
||||
? {
|
||||
style: {
|
||||
["--navds-guide-panel-color-illustration-background" as any]:
|
||||
"var(--navds-global-color-purple-200)",
|
||||
["--navds-guide-panel-color-border" as any]:
|
||||
"var(--navds-global-color-purple-400)",
|
||||
},
|
||||
}
|
||||
: {};
|
||||
|
||||
return (
|
||||
<GuidePanel {...newProps} poster={props?.poster}>
|
||||
{panelText}
|
||||
</GuidePanel>
|
||||
);
|
||||
};
|
||||
|
||||
Default.args = {
|
||||
poster: false,
|
||||
colorOverride: false,
|
||||
};
|
||||
|
||||
export const Poster = () => <GuidePanel poster>{panelText}</GuidePanel>;
|
||||
|
||||
export const ColorOverride = () => (
|
||||
<GuidePanel
|
||||
style={{
|
||||
["--navds-guide-panel-color-illustration-background" as any]:
|
||||
"var(--navds-global-color-purple-200)",
|
||||
["--navds-guide-panel-color-border" as any]:
|
||||
"var(--navds-global-color-purple-400)",
|
||||
}}
|
||||
>
|
||||
{panelText}
|
||||
</GuidePanel>
|
||||
);
|
||||
@@ -1,13 +0,0 @@
|
||||
.sb-guidepanel__tokens--purple {
|
||||
--navds-guide-panel-color-border: var(--navds-global-color-purple-400);
|
||||
--navds-guide-panel-color-illustration-background: var(
|
||||
--navds-global-color-purple-200
|
||||
);
|
||||
}
|
||||
|
||||
.sb-guidepanel__tokens--green {
|
||||
--navds-guide-panel-color-border: var(--navds-global-color-green-400);
|
||||
--navds-guide-panel-color-illustration-background: var(
|
||||
--navds-global-color-green-200
|
||||
);
|
||||
}
|
||||
@@ -1,81 +0,0 @@
|
||||
import { Meta, Canvas } from "@storybook/addon-docs";
|
||||
import { Button, Loader, GuidePanel } from "../../index";
|
||||
import { Success } from "@navikt/ds-react";
|
||||
import "./example.css";
|
||||
|
||||
<Meta title="ds-react/guidepanel/intro" />
|
||||
|
||||
# Hvordan ta i bruk GuidePanel
|
||||
|
||||
```jsx
|
||||
<GuidePanel>
|
||||
Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
|
||||
</GuidePanel>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<GuidePanel>
|
||||
Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
|
||||
</GuidePanel>
|
||||
</Canvas>
|
||||
|
||||
## Varianter
|
||||
|
||||
`poster` endrer på plassering av illustrasjon
|
||||
|
||||
<Canvas>
|
||||
<GuidePanel>
|
||||
Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
|
||||
</GuidePanel>
|
||||
<GuidePanel poster>
|
||||
Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
|
||||
</GuidePanel>
|
||||
</Canvas>
|
||||
|
||||
## Fargebruk
|
||||
|
||||
Istedenfor fargetema/themes slik som tidligere veileder brukte velger man nå selv farge på border/illustrasjons-bakgrunn ved å
|
||||
overskrive tokens. Det anbefalses å gjøre dette med eks Styled-Components eller css-klasser, men kan inlines også
|
||||
|
||||
```css
|
||||
/* Tokens */
|
||||
--navds-guide-panel-color-border
|
||||
--navds-guide-panel-color-illustration-background
|
||||
```
|
||||
|
||||
```jsx
|
||||
/* Css */
|
||||
<GuidePanel className="sb-guidepanel__tokens--purple">
|
||||
Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
|
||||
</GuidePanel>
|
||||
<GuidePanel className="sb-guidepanel__tokens--green">
|
||||
Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
|
||||
</GuidePanel>
|
||||
|
||||
/* Inline */
|
||||
<GuidePanel
|
||||
style={{
|
||||
["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-orange-200)",
|
||||
["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-orange-400)",
|
||||
}}
|
||||
>
|
||||
Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
|
||||
</GuidePanel>
|
||||
<GuidePanel
|
||||
style={{
|
||||
["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-orange-200)",
|
||||
["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-orange-400)",
|
||||
}}
|
||||
>
|
||||
Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
|
||||
</GuidePanel>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<GuidePanel className="sb-guidepanel__tokens--purple">
|
||||
Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
|
||||
</GuidePanel>
|
||||
<GuidePanel className="sb-guidepanel__tokens--green">
|
||||
Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
|
||||
</GuidePanel>
|
||||
</Canvas>
|
||||
@@ -1,68 +0,0 @@
|
||||
import React from "react";
|
||||
import { GuidePanel } from "../index";
|
||||
import { Meta } from "@storybook/react/types-6-0";
|
||||
export default {
|
||||
title: "ds-react/guidepanel",
|
||||
component: GuidePanel,
|
||||
} as Meta;
|
||||
|
||||
const panelText = `Sit sint eu dolore reprehenderit exercitation labore aute anim sit
|
||||
adipisicing proident. Tempor ipsum ea cupidatat qui esse do veniam
|
||||
cupidatat. Excepteur irure reprehenderit esse tempor nisi duis qui ea
|
||||
enim id.`;
|
||||
|
||||
export const All = () => {
|
||||
return (
|
||||
<div>
|
||||
<h1>GuidePanel</h1>
|
||||
<GuidePanel>{panelText}</GuidePanel>
|
||||
<h2>GuidePanel poster</h2>
|
||||
<GuidePanel poster>{panelText}</GuidePanel>
|
||||
<h2>custom colors</h2>
|
||||
<GuidePanel
|
||||
style={{
|
||||
["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-purple-200)",
|
||||
["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-purple-400)",
|
||||
}}
|
||||
>
|
||||
{panelText}
|
||||
</GuidePanel>
|
||||
<GuidePanel
|
||||
style={{
|
||||
["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-green-200)",
|
||||
["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-green-400)",
|
||||
}}
|
||||
>
|
||||
{panelText}
|
||||
</GuidePanel>
|
||||
<GuidePanel
|
||||
style={{
|
||||
["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-orange-200)",
|
||||
["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-orange-400)",
|
||||
}}
|
||||
>
|
||||
{panelText}Ullamco reprehenderit fugiat reprehenderit ad nisi aliqua
|
||||
irure enim id nisi do non magna. Nisi ut incididunt dolor aliqua
|
||||
adipisicing. Cupidatat sint et qui minim sint aute anim non Lorem
|
||||
reprehenderit id et excepteur. Consectetur velit aliqua eiusmod sit. Sit
|
||||
velit minim consectetur deserunt Lorem non elit fugiat consectetur sunt
|
||||
aliqua Lorem minim. Ullamco dolor mollit laboris velit deserunt nisi
|
||||
ipsum minim dolor ad cillum in id do.
|
||||
{panelText}Ullamco reprehenderit fugiat reprehenderit ad nisi aliqua
|
||||
irure enim id nisi do non magna. Nisi ut incididunt dolor aliqua
|
||||
adipisicing. Cupidatat sint et qui minim sint aute anim non Lorem
|
||||
reprehenderit id et excepteur. Consectetur velit aliqua eiusmod sit. Sit
|
||||
velit minim consectetur deserunt Lorem non elit fugiat consectetur sunt
|
||||
aliqua Lorem minim. Ullamco dolor mollit laboris velit deserunt nisi
|
||||
ipsum minim dolor ad cillum in id do.
|
||||
{panelText}Ullamco reprehenderit fugiat reprehenderit ad nisi aliqua
|
||||
irure enim id nisi do non magna. Nisi ut incididunt dolor aliqua
|
||||
adipisicing. Cupidatat sint et qui minim sint aute anim non Lorem
|
||||
reprehenderit id et excepteur. Consectetur velit aliqua eiusmod sit. Sit
|
||||
velit minim consectetur deserunt Lorem non elit fugiat consectetur sunt
|
||||
aliqua Lorem minim. Ullamco dolor mollit laboris velit deserunt nisi
|
||||
ipsum minim dolor ad cillum in id do.
|
||||
</GuidePanel>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -2,27 +2,62 @@ import React from "react";
|
||||
import { TextField, HelpText } from "..";
|
||||
|
||||
export default {
|
||||
title: "ds-react/help-text",
|
||||
title: "ds-react/HelpText",
|
||||
component: HelpText,
|
||||
argTypes: {
|
||||
placement: {
|
||||
control: {
|
||||
type: "radio",
|
||||
options: [
|
||||
"bottom",
|
||||
"right",
|
||||
"left",
|
||||
"top-start",
|
||||
"top-end",
|
||||
"bottom-start",
|
||||
"bottom-end",
|
||||
"right-start",
|
||||
"right-end",
|
||||
"left-start",
|
||||
"left-end",
|
||||
"auto",
|
||||
"auto-start",
|
||||
"auto-end",
|
||||
],
|
||||
},
|
||||
},
|
||||
strategy: {
|
||||
control: {
|
||||
type: "radio",
|
||||
options: ["fixed", "absolute"],
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const All = () => {
|
||||
export const Default = (props: any) => {
|
||||
return (
|
||||
<>
|
||||
<h1>HelpText</h1>
|
||||
<HelpText title="show tooltip">
|
||||
Id ullamco excepteur elit fugiat labore.
|
||||
</HelpText>
|
||||
<TextField
|
||||
label={
|
||||
<div style={{ display: "flex", gap: 8 }}>
|
||||
Text field label
|
||||
<HelpText title="show tooltip">
|
||||
Id ullamco excepteur elit fugiat labore.
|
||||
</HelpText>
|
||||
</div>
|
||||
}
|
||||
></TextField>
|
||||
</>
|
||||
<HelpText title="show tooltip" strategy="fixed" {...props}>
|
||||
Id ullamco excepteur elit fugiat labore.
|
||||
</HelpText>
|
||||
);
|
||||
};
|
||||
|
||||
Default.args = {
|
||||
title: "show tooltip",
|
||||
};
|
||||
|
||||
export const Inline = () => {
|
||||
return (
|
||||
<TextField
|
||||
label={
|
||||
<div style={{ display: "flex", gap: 8 }}>
|
||||
Text field label
|
||||
<HelpText title="show tooltip">
|
||||
Id ullamco excepteur elit fugiat labore.
|
||||
</HelpText>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,57 @@
|
||||
import { Meta } from "@storybook/react/types-6-0";
|
||||
import React from "react";
|
||||
import { LinkPanel } from "..";
|
||||
|
||||
export default {
|
||||
title: "ds-react/LinkPanel",
|
||||
component: LinkPanel,
|
||||
argTypes: {
|
||||
border: {
|
||||
control: {
|
||||
type: "boolean",
|
||||
},
|
||||
},
|
||||
},
|
||||
} as Meta;
|
||||
|
||||
export const Default = (props: any) => {
|
||||
return (
|
||||
<LinkPanel href="#" border={props?.border}>
|
||||
<LinkPanel.Title>
|
||||
Consectetur eu duis aliqua eu irure fugiat fugiat eu.
|
||||
</LinkPanel.Title>
|
||||
{props.description && (
|
||||
<LinkPanel.Description>
|
||||
Aliqua id aliquip Lorem esse
|
||||
</LinkPanel.Description>
|
||||
)}
|
||||
</LinkPanel>
|
||||
);
|
||||
};
|
||||
|
||||
Default.args = {
|
||||
description: false,
|
||||
};
|
||||
|
||||
export const Description = () => {
|
||||
return (
|
||||
<LinkPanel href="#">
|
||||
<LinkPanel.Title>
|
||||
Consectetur eu duis aliqua eu irure fugiat fugiat eu.
|
||||
</LinkPanel.Title>
|
||||
<LinkPanel.Description>
|
||||
Aliqua id aliquip Lorem esse
|
||||
</LinkPanel.Description>
|
||||
</LinkPanel>
|
||||
);
|
||||
};
|
||||
|
||||
export const NoBorder = () => {
|
||||
return (
|
||||
<LinkPanel href="#" border={false}>
|
||||
<LinkPanel.Title>
|
||||
Consectetur eu duis aliqua eu irure fugiat fugiat eu.
|
||||
</LinkPanel.Title>
|
||||
</LinkPanel>
|
||||
);
|
||||
};
|
||||
@@ -1,125 +0,0 @@
|
||||
import React from "react";
|
||||
export const Illustration = (
|
||||
<>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="110" height="110">
|
||||
<defs>
|
||||
<path id="a" d="M.686.654h4.399v5.852H.686z"></path>
|
||||
</defs>
|
||||
<g fill="none" fillRule="evenodd">
|
||||
<path fill="transparent" d="M-287-1518H993V543H-287z"></path>
|
||||
<rect
|
||||
width="796"
|
||||
height="181"
|
||||
fill="transparent"
|
||||
rx="8"
|
||||
transform="translate(-45 -36)"
|
||||
></rect>
|
||||
<circle cx="55" cy="55" r="55" fill="#CCDEE6"></circle>
|
||||
<g fill="#D8D8D8">
|
||||
<path
|
||||
fill="#337C9B"
|
||||
d="M32.034 5.834l-11.606 3.11-9.517 2.55-4.637 1.242 1.284 4.794 9.069 33.843 1.284 4.795 4.637-1.243 9.518-2.55 11.605-3.11c2.561-.686 4.063-3.389 3.353-6.037L37.956 9.385c-.71-2.648-3.361-4.238-5.922-3.551"
|
||||
></path>
|
||||
<path
|
||||
fill="#38363A"
|
||||
d="M38.322 51.833l1.77-.474-12.12-45.233-1.77.474z"
|
||||
></path>
|
||||
<path
|
||||
fill="#CE2128"
|
||||
d="M26.593 57.996l-1.179-.613-.713 1.12-.93-3.47 1.892-.507z"
|
||||
></path>
|
||||
</g>
|
||||
<path
|
||||
fill="#FFF"
|
||||
d="M61.773 69.14l8.95 38.112a2.524 2.524 0 0 0 3.036 1.881l32.913-7.745a2.528 2.528 0 0 0 1.88-3.04L98.279 54.591a2.526 2.526 0 0 0-3.037-1.883L68.425 59.02l-6.652 10.12z"
|
||||
></path>
|
||||
<path
|
||||
fill="#C0C0BE"
|
||||
d="M68.425 59.02l1.326 5.645a2.527 2.527 0 0 1-1.88 3.038l-6.098 1.436 6.652-10.12z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#8E9294"
|
||||
strokeLinecap="round"
|
||||
strokeWidth="2.152"
|
||||
d="M68.902 74.197l11.982-2.82m-10.721 8.19l24.874-5.853M71.424 84.937l24.873-5.853"
|
||||
></path>
|
||||
<path
|
||||
stroke="#8E9294"
|
||||
strokeLinecap="round"
|
||||
strokeWidth="2.264"
|
||||
d="M72.685 90.307l24.873-5.854M73.857 95.297l24.873-5.853M75.021 100.7l24.874-5.853"
|
||||
></path>
|
||||
<path
|
||||
fill="#CCDEE6"
|
||||
d="M21.698 86.68c-5.726-3.643-7.42-11.243-3.78-16.976 3.64-5.733 11.231-7.427 16.958-3.784 5.727 3.643 7.42 11.243 3.78 16.976-3.639 5.733-11.231 7.427-16.958 3.784z"
|
||||
></path>
|
||||
<path
|
||||
fill="#C42B34"
|
||||
d="M9.283 106.905a2.772 2.772 0 0 1-.851-3.823l8.759-13.798a2.765 2.765 0 0 1 3.817-.852 2.77 2.77 0 0 1 .851 3.822l-8.758 13.799a2.764 2.764 0 0 1-3.818.852"
|
||||
></path>
|
||||
<path
|
||||
fill="#2E3137"
|
||||
d="M19.032 90.912c-.86-.547-1.348-1.318-.801-2.179l1.826-2.877a1.841 1.841 0 0 1 2.546-.567 1.847 1.847 0 0 1 .566 2.547l-1.826 2.878c-.547.86-1.452.744-2.31.198"
|
||||
></path>
|
||||
<path
|
||||
fill="#D84B55"
|
||||
d="M16.41 91l-8.266 13.021a.925.925 0 0 0 .283 1.275.92.92 0 0 0 1.272-.284l7.912-12.463c-.713-.47-1.083-1.039-1.2-1.549"
|
||||
></path>
|
||||
<path
|
||||
fill="#2E3137"
|
||||
d="M27.811 87.523a11.115 11.115 0 0 1-1.117-.196 11.283 11.283 0 0 1-3.577-1.48c-5.295-3.369-6.866-10.423-3.502-15.723 3.366-5.301 10.412-6.874 15.709-3.504 5.296 3.368 6.866 10.422 3.5 15.723a11.317 11.317 0 0 1-2.86 3.053 11.4 11.4 0 0 1-4.72 2.029c-1.127.203-2.284.24-3.433.098m12.57-4.19c3.911-6.16 2.085-14.358-4.069-18.271-6.154-3.915-14.342-2.089-18.253 4.072-3.91 6.16-2.085 14.356 4.07 18.271 6.153 3.915 14.343 2.09 18.252-4.072"
|
||||
></path>
|
||||
<path
|
||||
fill="#FFD399"
|
||||
d="M93.445 12.554c2.45 5.367.088 11.707-5.274 14.159-5.361 2.452-11.695.088-14.145-5.279-2.449-5.368-.088-11.707 5.275-14.16 5.361-2.452 11.695-.088 14.144 5.28"
|
||||
></path>
|
||||
<path
|
||||
fill="#FFD399"
|
||||
d="M91.45 28.239l-4.274 1.954a2.697 2.697 0 0 1-3.574-1.334l-2.775-6.08a2.7 2.7 0 0 1 1.333-3.578l4.274-1.955a2.696 2.696 0 0 1 3.575 1.334l2.775 6.08a2.702 2.702 0 0 1-1.333 3.579"
|
||||
></path>
|
||||
<path
|
||||
fill="#5A5C5D"
|
||||
d="M94.1 30.6l-6.9 3.156a1.255 1.255 0 0 1-1.043-2.284l6.902-3.155a1.253 1.253 0 1 1 1.04 2.282m1.275 2.794l-6.9 3.156a1.254 1.254 0 1 1-1.041-2.283l6.9-3.156a1.254 1.254 0 0 1 1.041 2.283m-1.682 1.387l-3.044 1.392c-.458.21-.4.889.09 1.006.685.164 1.425.11 2.115-.207a3.25 3.25 0 0 0 1.54-1.464c.233-.449-.241-.936-.701-.727"
|
||||
></path>
|
||||
<g transform="rotate(-69 92.268 -44.056)">
|
||||
<mask id="b" fill="#fff">
|
||||
<use xlinkHref="#a"></use>
|
||||
</mask>
|
||||
<path
|
||||
fill="#C42B34"
|
||||
d="M.732 4.08l.397-1.844a1.999 1.999 0 1 1 3.91.842l-.396 1.846A2 2 0 1 1 .732 4.08"
|
||||
mask="url(#b)"
|
||||
></path>
|
||||
</g>
|
||||
<path
|
||||
fill="#E1CFB4"
|
||||
d="M86.458 79.011l-1.334 7.43 6.268-4.21-2.12-2.355z"
|
||||
></path>
|
||||
<path
|
||||
fill="#FECB86"
|
||||
d="M103.266 56.87l-1.644-1.073-14.841 22.72 1.643 1.072z"
|
||||
></path>
|
||||
<path
|
||||
fill="#FAA736"
|
||||
d="M104.912 57.945l-1.644-1.074-14.841 22.72 1.644 1.073z"
|
||||
></path>
|
||||
<path
|
||||
fill="#FECB86"
|
||||
d="M90.071 80.664l1.644 1.072 14.842-22.72-1.645-1.072zm-3.306-.951c.31.203.774-.055 1.188.215a.513.513 0 0 1 .152.15l.32-.488-1.644-1.073-.297.453s-.028.542.281.743"
|
||||
></path>
|
||||
<path
|
||||
fill="#FAA736"
|
||||
d="M88.106 80.078c.205.277.111.67.548.956.44.286.764.042 1.098.118l.32-.488-1.648-1.075-.318.489z"
|
||||
></path>
|
||||
<path
|
||||
fill="#FECB86"
|
||||
d="M89.752 81.152a.507.507 0 0 1 .198.08c.414.27.365.797.675 1 .311.204.794-.041.794-.041l.296-.454-1.644-1.073-.32.488z"
|
||||
></path>
|
||||
<path
|
||||
fill="#535756"
|
||||
d="M85.123 86.44l2.22-1.488-1.749-1.14zm21.434-27.423l-4.935-3.22.437-.67 4.935 3.22z"
|
||||
></path>
|
||||
</g>
|
||||
</svg>
|
||||
</>
|
||||
);
|
||||
@@ -1,110 +0,0 @@
|
||||
import { Meta, Canvas } from "@storybook/addon-docs";
|
||||
import { LinkPanel } from "../../index";
|
||||
import { Success } from "@navikt/ds-react";
|
||||
import { Illustration } from "./illustration";
|
||||
|
||||
<Meta title="ds-react/linkPanel/intro" />
|
||||
|
||||
# Hvordan ta i bruk LinkPanel
|
||||
|
||||
```jsx
|
||||
<LinkPanel href="#">
|
||||
<LinkPanel.Title>
|
||||
Consectetur eu duis aliqua eu irure fugiat fugiat eu.
|
||||
</LinkPanel.Title>
|
||||
</LinkPanel>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<LinkPanel href="#">
|
||||
<LinkPanel.Title>
|
||||
Consectetur eu duis aliqua eu irure fugiat fugiat eu.
|
||||
</LinkPanel.Title>
|
||||
</LinkPanel>
|
||||
</Canvas>
|
||||
|
||||
## Med description
|
||||
|
||||
```jsx
|
||||
<LinkPanel href="#">
|
||||
<LinkPanel.Title>
|
||||
Consectetur eu duis aliqua eu irure fugiat fugiat eu.
|
||||
</LinkPanel.Title>
|
||||
<LinkPanel.Description>
|
||||
Velit mollit do commodo elit Lorem aliqua Lorem.
|
||||
</LinkPanel.Description>
|
||||
</LinkPanel>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<LinkPanel href="#">
|
||||
<LinkPanel.Title>
|
||||
Consectetur eu duis aliqua eu irure fugiat fugiat eu.
|
||||
</LinkPanel.Title>
|
||||
<LinkPanel.Description>
|
||||
Velit mollit do commodo elit Lorem aliqua Lorem.
|
||||
</LinkPanel.Description>
|
||||
</LinkPanel>
|
||||
</Canvas>
|
||||
|
||||
## Uten border
|
||||
|
||||
```jsx
|
||||
<LinkPanel href="#" border={false}>
|
||||
<LinkPanel.Title>
|
||||
Veniam cillum cupidatat aliqua id ipsum culpa ea.
|
||||
</LinkPanel.Title>
|
||||
</LinkPanel>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<LinkPanel href="#" border={false}>
|
||||
<LinkPanel.Title>
|
||||
Veniam cillum cupidatat aliqua id ipsum culpa ea.
|
||||
</LinkPanel.Title>
|
||||
</LinkPanel>
|
||||
</Canvas>
|
||||
|
||||
## Custom styling
|
||||
|
||||
```jsx
|
||||
<LinkPanel href="#">
|
||||
<div
|
||||
style={{
|
||||
display: "grid",
|
||||
gridAutoFlow: "column",
|
||||
gap: "var(--navds-spacing-8)",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
{Illustration}
|
||||
<div>
|
||||
<LinkPanel.Title>Consectetur eu duis aliqua</LinkPanel.Title>
|
||||
<LinkPanel.Description>
|
||||
Aliqua id aliquip Lorem esse
|
||||
</LinkPanel.Description>
|
||||
</div>
|
||||
</div>
|
||||
</LinkPanel>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<LinkPanel href="#">
|
||||
<div
|
||||
style={{
|
||||
display: "grid",
|
||||
gridAutoFlow: "column",
|
||||
gap: "var(--navds-spacing-8)",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
{Illustration}
|
||||
<div>
|
||||
<LinkPanel.Title>Consectetur eu duis aliqua</LinkPanel.Title>
|
||||
<LinkPanel.Description>
|
||||
Aliqua id aliquip Lorem esse
|
||||
</LinkPanel.Description>
|
||||
</div>
|
||||
</div>
|
||||
</LinkPanel>
|
||||
</Canvas>
|
||||
@@ -1,51 +0,0 @@
|
||||
import React from "react";
|
||||
import { LinkPanel } from "..";
|
||||
import { Illustration } from "./illustration";
|
||||
|
||||
export default {
|
||||
title: "ds-react/linkPanel",
|
||||
component: LinkPanel,
|
||||
};
|
||||
|
||||
export const All = () => (
|
||||
<>
|
||||
<h1>Link panel</h1>
|
||||
<LinkPanel href="#">
|
||||
<LinkPanel.Title>
|
||||
Consectetur eu duis aliqua eu irure fugiat fugiat eu.
|
||||
</LinkPanel.Title>
|
||||
<LinkPanel.Description>
|
||||
Aliqua id aliquip Lorem esse
|
||||
</LinkPanel.Description>
|
||||
</LinkPanel>
|
||||
|
||||
<h1>No border</h1>
|
||||
<LinkPanel href="#" border={false}>
|
||||
<LinkPanel.Title>
|
||||
Veniam cillum cupidatat aliqua id ipsum culpa ea.
|
||||
</LinkPanel.Title>
|
||||
</LinkPanel>
|
||||
|
||||
<h1>Custom styling</h1>
|
||||
<LinkPanel href="#" className="linkpanel">
|
||||
{Illustration}
|
||||
<div>
|
||||
<LinkPanel.Title>
|
||||
Anim pariatur eiusmod deserunt elit cillum
|
||||
</LinkPanel.Title>
|
||||
<LinkPanel.Description>
|
||||
Ex velit id voluptate labore irure ipsum exercitation sunt et id enim
|
||||
magna veniam consequat. id aliquip Lorem esse
|
||||
</LinkPanel.Description>
|
||||
</div>
|
||||
</LinkPanel>
|
||||
<style>{`
|
||||
.linkpanel .navds-link-panel__content {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
gap: var(--navds-spacing-8);
|
||||
align-items: center;
|
||||
}
|
||||
`}</style>
|
||||
</>
|
||||
);
|
||||
@@ -0,0 +1,77 @@
|
||||
import { Add } from "@navikt/ds-icons";
|
||||
import React from "react";
|
||||
import { ConfirmationPanel as DsConfirmationPanel, Link } from "..";
|
||||
import { Alert as DsAlert, BodyLong } from "../..";
|
||||
export default {
|
||||
title: "ds-react/Link",
|
||||
component: Link,
|
||||
};
|
||||
|
||||
export const Default = (props) => {
|
||||
const LinkD = () => (
|
||||
<Link href="#">
|
||||
{props.icon && <Add />}Ex aliqua incididunt {props.icon && <Add />}
|
||||
</Link>
|
||||
);
|
||||
|
||||
if (props.inline) {
|
||||
return (
|
||||
<BodyLong>
|
||||
Incididunt laborum nisi nisi Lorem <LinkD /> in. Laborum aute fugiat
|
||||
officia adipisicing non veniam dolor nulla non ex consectetur fugiat
|
||||
eiusmod aute. Culpa sit aute est duis minim in in voluptate velit
|
||||
fugiat. Laboris est id deserunt ut ea Lorem eu. Esse elit laboris aute
|
||||
commodo sint laborum fugiat aliqua.
|
||||
</BodyLong>
|
||||
);
|
||||
}
|
||||
return <LinkD />;
|
||||
};
|
||||
|
||||
Default.args = {
|
||||
icon: false,
|
||||
inline: false,
|
||||
};
|
||||
|
||||
const DemoLink = () => (
|
||||
<Link href="#">
|
||||
<Add aria-hidden /> Ex aliqua incididunt <Add aria-hidden />
|
||||
</Link>
|
||||
);
|
||||
|
||||
export const Icon = () => <DemoLink />;
|
||||
|
||||
export const Alert = () => {
|
||||
return (
|
||||
<div className="colgap">
|
||||
<DsAlert variant="info">
|
||||
<DemoLink />
|
||||
</DsAlert>
|
||||
<DsAlert variant="success">
|
||||
<DemoLink />
|
||||
</DsAlert>
|
||||
<DsAlert variant="warning">
|
||||
<DemoLink />
|
||||
</DsAlert>
|
||||
<DsAlert variant="error">
|
||||
<DemoLink />
|
||||
</DsAlert>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const ConfirmationPanel = () => {
|
||||
return (
|
||||
<div className="colgap">
|
||||
<DsConfirmationPanel label="demo">
|
||||
<DemoLink />
|
||||
</DsConfirmationPanel>
|
||||
<DsConfirmationPanel checked label="demo">
|
||||
<DemoLink />
|
||||
</DsConfirmationPanel>
|
||||
<DsConfirmationPanel error="demo" label="demo">
|
||||
<DemoLink />
|
||||
</DsConfirmationPanel>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,26 +0,0 @@
|
||||
import { Meta, Canvas } from "@storybook/addon-docs";
|
||||
import { Link } from "../../index";
|
||||
import { Add } from "@navikt/ds-icons";
|
||||
|
||||
<Meta title="ds-react/link/intro" />
|
||||
|
||||
# Hvordan ta i bruk Link
|
||||
|
||||
Komponeten skal være nesten 1-1 med nav-frontend-lenker for de som er kjent med den.
|
||||
|
||||
```jsx
|
||||
<Link href="#">Dette er en tekstlenke</Link>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<Link href="#">Dette er en tekstlenke</Link>
|
||||
</Canvas>
|
||||
|
||||
## Med ikon
|
||||
|
||||
<Canvas>
|
||||
<Link href="#">
|
||||
<span>Dette er en tekstlenke</span>
|
||||
<Add />
|
||||
</Link>
|
||||
</Canvas>
|
||||
@@ -1,53 +0,0 @@
|
||||
import React from "react";
|
||||
import { Link } from "..";
|
||||
import { Add } from "@navikt/ds-icons";
|
||||
import { Alert } from "../..";
|
||||
import { ConfirmationPanel } from "../../form";
|
||||
export default {
|
||||
title: "ds-react/link",
|
||||
component: Link,
|
||||
};
|
||||
|
||||
export const All = () => {
|
||||
return (
|
||||
<>
|
||||
<h1>Link</h1>
|
||||
<Link href="#">Dette er en tekstlenke</Link>
|
||||
<h2>Icon after</h2>
|
||||
<Link href="#">
|
||||
<span>Dette er en tekstlenke</span>
|
||||
<Add />
|
||||
</Link>
|
||||
<h2>Icon before</h2>
|
||||
<Link href="#">
|
||||
<Add />
|
||||
<span>Dette er en tekstlenke </span>
|
||||
</Link>
|
||||
<h2>På farget bakgrunn</h2>
|
||||
<Alert variant="error">
|
||||
Her er en <Link href="#about">lenke</Link> på farget bakgrunn
|
||||
</Alert>
|
||||
<Alert variant="info">
|
||||
Her er en <Link href="#about">lenke</Link> på farget bakgrunn
|
||||
</Alert>
|
||||
<Alert variant="success">
|
||||
Her er en <Link href="#about">lenke</Link> på farget bakgrunn
|
||||
</Alert>
|
||||
<Alert variant="warning">
|
||||
Her er en <Link href="#about">lenke</Link> på farget bakgrunn
|
||||
</Alert>
|
||||
<ConfirmationPanel label="Samtykke?" checked={false} error="feilmelding">
|
||||
Her er en <Link href="#about">lenke</Link> på farget bakgrunn
|
||||
</ConfirmationPanel>
|
||||
<ConfirmationPanel label="Samtykke?" checked error="feilmelding">
|
||||
Her er en <Link href="#about">lenke</Link> på farget bakgrunn
|
||||
</ConfirmationPanel>
|
||||
<ConfirmationPanel label="Samtykke?" checked={false}>
|
||||
Her er en <Link href="#about">lenke</Link> på farget bakgrunn
|
||||
</ConfirmationPanel>
|
||||
<ConfirmationPanel label="Samtykke?" checked>
|
||||
Her er en <Link href="#about">lenke</Link> på farget bakgrunn
|
||||
</ConfirmationPanel>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -8,7 +8,14 @@ export interface LoaderProps extends SVGProps<SVGSVGElement> {
|
||||
* 64px | 40px | 32px | 24px | 20px | 16px
|
||||
* @default "medium"
|
||||
*/
|
||||
size?: "2xlarge" | "xlarge" | "large" | "medium" | "small" | "xsmall";
|
||||
size?:
|
||||
| "3xlarge"
|
||||
| "2xlarge"
|
||||
| "xlarge"
|
||||
| "large"
|
||||
| "medium"
|
||||
| "small"
|
||||
| "xsmall";
|
||||
/**
|
||||
* Title prop on svg
|
||||
* @default "venter..."
|
||||
@@ -68,18 +75,14 @@ export const Loader = forwardRef<SVGSVGElement, LoaderProps>(
|
||||
cy="25"
|
||||
r="20"
|
||||
fill="none"
|
||||
strokeWidth="5"
|
||||
/>
|
||||
<circle
|
||||
className="navds-loader__foreground"
|
||||
cx="25"
|
||||
cy="25"
|
||||
r="20"
|
||||
stroke={"var(--navds-global-color-gray-400)"}
|
||||
fill="none"
|
||||
strokeWidth="5"
|
||||
strokeDasharray="50 155"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
import React from "react";
|
||||
import { Loader } from "..";
|
||||
import { Meta } from "@storybook/react/types-6-0";
|
||||
export default {
|
||||
title: "ds-react/Loader",
|
||||
component: Loader,
|
||||
argTypes: {
|
||||
size: {
|
||||
control: {
|
||||
type: "radio",
|
||||
options: [
|
||||
"3xlarge",
|
||||
"2xlarge",
|
||||
"xlarge",
|
||||
"large",
|
||||
"medium",
|
||||
"small",
|
||||
"xsmall",
|
||||
],
|
||||
},
|
||||
},
|
||||
variant: {
|
||||
control: {
|
||||
type: "radio",
|
||||
options: ["neutral", "interaction", "inverted"],
|
||||
},
|
||||
},
|
||||
},
|
||||
} as Meta;
|
||||
|
||||
export const Default = (props: any) => {
|
||||
return <Loader {...props} />;
|
||||
};
|
||||
|
||||
Default.args = {
|
||||
transparent: false,
|
||||
};
|
||||
|
||||
export const Size = () => (
|
||||
<div>
|
||||
<Loader size="3xlarge" />
|
||||
<Loader size="2xlarge" />
|
||||
<Loader size="xlarge" />
|
||||
<Loader size="large" />
|
||||
<Loader size="medium" />
|
||||
<Loader size="small" />
|
||||
<Loader size="xsmall" />
|
||||
</div>
|
||||
);
|
||||
|
||||
export const Variant = () => (
|
||||
<div className="colgap">
|
||||
<div>
|
||||
<Loader size="3xlarge" variant="neutral" />
|
||||
<Loader size="3xlarge" variant="inverted" />
|
||||
<Loader size="3xlarge" variant="interaction" />
|
||||
</div>
|
||||
<div style={{ backgroundColor: "#292929" }}>
|
||||
<Loader size="3xlarge" variant="neutral" />
|
||||
<Loader size="3xlarge" variant="inverted" />
|
||||
<Loader size="3xlarge" variant="interaction" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const Transparent = () => (
|
||||
<div className="colgap">
|
||||
<div>
|
||||
<Loader size="3xlarge" transparent variant="neutral" />
|
||||
<Loader size="3xlarge" transparent variant="inverted" />
|
||||
<Loader size="3xlarge" transparent variant="interaction" />
|
||||
</div>
|
||||
<div style={{ backgroundColor: "#292929" }}>
|
||||
<Loader size="3xlarge" transparent variant="neutral" />
|
||||
<Loader size="3xlarge" transparent variant="inverted" />
|
||||
<Loader size="3xlarge" transparent variant="interaction" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -1,65 +0,0 @@
|
||||
import { Meta, Canvas } from "@storybook/addon-docs";
|
||||
import { background } from "@storybook/theming";
|
||||
import { Loader } from "../index";
|
||||
import { Button } from "../../index";
|
||||
|
||||
<Meta title="ds-react/loader/intro" />
|
||||
|
||||
# Hvordan ta i bruk Loader
|
||||
|
||||
```jsx
|
||||
<Loader title="Laster inn ny data" />
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<Loader />
|
||||
</Canvas>
|
||||
|
||||
Her kan `title` proppen brukes for å gi en liten tooltip som sier hvorfor den laster
|
||||
|
||||
## Justering av størrelse
|
||||
|
||||
Loaderen kommer i størrelsene `2xlarge`, `xlarge`, `large`, `medium`, `small` og `xsmall`
|
||||
|
||||
```jsx
|
||||
<Loader size="xlarge" />
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<Loader size="2xlarge" />
|
||||
<Loader size="xlarge" />
|
||||
<Loader size="large" />
|
||||
<Loader size="medium" />
|
||||
<Loader size="small" />
|
||||
<Loader size="xsmall" />
|
||||
</Canvas>
|
||||
|
||||
## Varianter
|
||||
|
||||
Loaderen kommer i variantene `neutral`, `interaction` og `inverted`
|
||||
|
||||
```jsx
|
||||
<Loader size="2xlarge" variant="neutral"/>
|
||||
<Loader size="2xlarge" variant="interaction"/>
|
||||
<Loader size="2xlarge" variant="inverted"/>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<Loader size="2xlarge" variant="neutral" />
|
||||
<Loader size="2xlarge" variant="interaction" />
|
||||
<div style={{ backgroundColor: "black" }}>
|
||||
<Loader size="2xlarge" variant="inverted" />
|
||||
</div>
|
||||
</Canvas>
|
||||
|
||||
## Transparent
|
||||
|
||||
Bakgrunnen kan settes til transparent med `transparent={true}`
|
||||
|
||||
```jsx
|
||||
<Loader transparent />
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<Loader size="2xlarge" transparent />
|
||||
</Canvas>
|
||||
@@ -1,69 +0,0 @@
|
||||
import React from "react";
|
||||
import { Loader } from "..";
|
||||
import { Button } from "../..";
|
||||
import { Meta } from "@storybook/react/types-6-0";
|
||||
export default {
|
||||
title: "ds-react/loader",
|
||||
component: Loader,
|
||||
} as Meta;
|
||||
|
||||
export const All = () => {
|
||||
return (
|
||||
<div>
|
||||
<h1>Loader</h1>
|
||||
<Loader />
|
||||
|
||||
<h2>Transparent</h2>
|
||||
<Loader transparent />
|
||||
|
||||
<h2>Sizing</h2>
|
||||
<Loader size="2xlarge" />
|
||||
<Loader size="xlarge" />
|
||||
<Loader size="large" />
|
||||
<Loader size="medium" />
|
||||
<Loader size="small" />
|
||||
<Loader size="xsmall" />
|
||||
<h2>Sizing transparent</h2>
|
||||
<Loader size="2xlarge" transparent />
|
||||
<Loader size="xlarge" transparent />
|
||||
<Loader size="large" transparent />
|
||||
<Loader size="medium" transparent />
|
||||
<Loader size="small" transparent />
|
||||
<Loader size="xsmall" transparent />
|
||||
<div style={{ backgroundColor: "#c9c9c9" }}>
|
||||
<h2>Varianter</h2>
|
||||
<Loader size="xlarge" variant="neutral" />
|
||||
<Loader size="xlarge" variant="interaction" />
|
||||
<Loader size="xlarge" variant="inverted" />
|
||||
<h2>Varianter transparent</h2>
|
||||
<Loader size="xlarge" variant="neutral" transparent />
|
||||
<Loader size="xlarge" variant="interaction" transparent />
|
||||
<Loader size="xlarge" variant="inverted" transparent />
|
||||
</div>
|
||||
<h2>Brukt i knapper</h2>
|
||||
<div>
|
||||
<Button>
|
||||
Laster...
|
||||
<Loader />
|
||||
</Button>
|
||||
<Button size="small">
|
||||
Laster...
|
||||
<Loader />
|
||||
</Button>
|
||||
<h2>Variants</h2>
|
||||
<Button variant="secondary">
|
||||
Laster...
|
||||
<Loader />
|
||||
</Button>
|
||||
<Button variant="action">
|
||||
Laster...
|
||||
<Loader />
|
||||
</Button>
|
||||
<Button variant="danger">
|
||||
Laster...
|
||||
<Loader />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,69 +1,102 @@
|
||||
import React, { useState } from "react";
|
||||
import { Modal } from "../..";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { BodyLong, Button, Heading, Modal } from "../..";
|
||||
|
||||
export default {
|
||||
title: "ds-react/modal",
|
||||
title: "ds-react/Modal",
|
||||
component: Modal,
|
||||
parameters: {
|
||||
chromatic: { delay: 1000 },
|
||||
},
|
||||
};
|
||||
|
||||
Modal.setAppElement("#root");
|
||||
export const Default = (props) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
export const All = () => {
|
||||
const [open, setOpen] = useState(true);
|
||||
const [openTwo, setOpenTwo] = useState(false);
|
||||
const [openThree, setOpenThree] = useState(false);
|
||||
useEffect(() => {
|
||||
Modal.setAppElement("#root");
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<button onClick={() => setOpen(true)}>Open modal</button>
|
||||
<Button onClick={() => setOpen(true)}>Open</Button>
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={() => setOpen(false)}
|
||||
aria-labelledby="header123"
|
||||
{...props}
|
||||
>
|
||||
<Modal.Content>
|
||||
<h1 id="header123">Header</h1>
|
||||
<h2>subheader</h2>
|
||||
<p>Cupidatat irure ipsum veniam ad in esse.</p>
|
||||
<p>Cillum tempor pariatur amet ut laborum Lorem enim enim.</p>
|
||||
<Heading spacing id="header123" level="1" size="large">
|
||||
Header
|
||||
</Heading>
|
||||
<Heading spacing level="2" size="medium">
|
||||
Header
|
||||
</Heading>
|
||||
<BodyLong>Voluptate laboris mollit dolore qui. Magna elit.</BodyLong>
|
||||
</Modal.Content>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
<button onClick={() => setOpenTwo(true)}>
|
||||
Open modal,shouldCloseOnOverlayClick false{" "}
|
||||
</button>
|
||||
Default.args = {
|
||||
shouldCloseOnOverlayClick: true,
|
||||
closeButton: true,
|
||||
};
|
||||
|
||||
export const Open = () => {
|
||||
const [open, setOpen] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
Modal.setAppElement("#root");
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button onClick={() => setOpen(true)}>Open</Button>
|
||||
<Modal
|
||||
shouldCloseOnOverlayClick={false}
|
||||
open={openTwo}
|
||||
onClose={() => setOpenTwo(false)}
|
||||
open={open ?? true}
|
||||
onClose={() => setOpen(false)}
|
||||
aria-labelledby="header123"
|
||||
>
|
||||
<Modal.Content>
|
||||
<h1 id="header123">Header</h1>
|
||||
<h2>subheader</h2>
|
||||
<p>
|
||||
Cupidatat irure ipsum veniam ad in esse. Voluptate do nulla amet
|
||||
laboris ea ex aliquip. Dolore dolore reprehenderit sint esse commodo
|
||||
aliqua cupidatat incididunt proident laborum qui. Officia fugiat non
|
||||
anim cupidatat. Adipisicing ut aliqua cillum nulla elit. Mollit et
|
||||
id duis cupidatat labore magna consectetur et veniam tempor. In
|
||||
minim exercitation id irure velit sit dolor aliquip velit esse.
|
||||
Excepteur sint non minim nulla excepteur labore non magna eu.
|
||||
</p>
|
||||
<Heading spacing id="header123" level="1" size="large">
|
||||
Header
|
||||
</Heading>
|
||||
<Heading spacing level="2" size="medium">
|
||||
Header
|
||||
</Heading>
|
||||
<BodyLong>Voluptate laboris mollit dolore qui. Magna elit.</BodyLong>
|
||||
</Modal.Content>
|
||||
</Modal>
|
||||
<button onClick={() => setOpenThree(true)}>
|
||||
Open modal without x-button
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const CloseButton = () => {
|
||||
const [open, setOpen] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
Modal.setAppElement("#root");
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button onClick={() => setOpen(true)}>Open</Button>
|
||||
<Modal
|
||||
open={openThree}
|
||||
open={open}
|
||||
onClose={() => setOpen(false)}
|
||||
aria-labelledby="header123"
|
||||
closeButton={false}
|
||||
onClose={() => setOpenThree(false)}
|
||||
aria-label="Min modal"
|
||||
>
|
||||
<Modal.Content>
|
||||
<p>Cupidatat irure ipsum veniam ad in esse.</p>
|
||||
<p>Cillum tempor pariatur amet ut laborum Lorem enim enim.</p>
|
||||
<Heading spacing id="header123" level="1" size="large">
|
||||
Header
|
||||
</Heading>
|
||||
<Heading spacing level="2" size="medium">
|
||||
Header
|
||||
</Heading>
|
||||
<BodyLong>Voluptate laboris mollit dolore qui. Magna elit.</BodyLong>
|
||||
</Modal.Content>
|
||||
</Modal>
|
||||
</>
|
||||
|
||||
+27
-5
@@ -2,14 +2,37 @@ import React from "react";
|
||||
import { Panel } from "../index";
|
||||
import { Meta } from "@storybook/react/types-6-0";
|
||||
export default {
|
||||
title: "ds-react/panel",
|
||||
title: "ds-react/Panel",
|
||||
component: Panel,
|
||||
argTypes: {
|
||||
border: {
|
||||
defaultValue: true,
|
||||
control: {
|
||||
type: "boolean",
|
||||
},
|
||||
},
|
||||
},
|
||||
} as Meta;
|
||||
|
||||
export const All = () => {
|
||||
export const Default = (props) => {
|
||||
return (
|
||||
<div>
|
||||
<h1>Panel</h1>
|
||||
<Panel {...props}>
|
||||
Eu quis exercitation voluptate ex. Aute irure esse occaecat minim
|
||||
cupidatat velit minim duis sint culpa anim laboris. Consectetur nulla eu
|
||||
commodo ea culpa velit commodo incididunt sunt ipsum. Amet anim
|
||||
adipisicing minim ipsum do. Non laborum culpa reprehenderit est sint
|
||||
officia quis excepteur. Fugiat eiusmod eiusmod commodo incididunt nisi
|
||||
minim ex eu cupidatat quis ex. Lorem irure ea ea enim consectetur ea
|
||||
aliqua cupidatat. Officia aute veniam aute exercitation ipsum aliqua
|
||||
adipisicing. Est aliqua ad ullamco aute nostrud amet ea adipisicing
|
||||
consequat id officia irure pariatur. Eu mollit amet culpa culpa velit.
|
||||
</Panel>
|
||||
);
|
||||
};
|
||||
|
||||
export const Border = () => {
|
||||
return (
|
||||
<div className="colgap">
|
||||
<Panel>
|
||||
Eu quis exercitation voluptate ex. Aute irure esse occaecat minim
|
||||
cupidatat velit minim duis sint culpa anim laboris. Consectetur nulla eu
|
||||
@@ -21,7 +44,6 @@ export const All = () => {
|
||||
adipisicing. Est aliqua ad ullamco aute nostrud amet ea adipisicing
|
||||
consequat id officia irure pariatur. Eu mollit amet culpa culpa velit.
|
||||
</Panel>
|
||||
<h2>With border</h2>
|
||||
<Panel border>
|
||||
Eu quis exercitation voluptate ex. Aute irure esse occaecat minim
|
||||
cupidatat velit minim duis sint culpa anim laboris. Consectetur nulla eu
|
||||
@@ -1,42 +0,0 @@
|
||||
import { Meta, Canvas } from "@storybook/addon-docs";
|
||||
import { Panel } from "../../index";
|
||||
|
||||
<Meta title="ds-react/panel/intro" />
|
||||
|
||||
# Hvordan ta i bruk Panel
|
||||
|
||||
Veldig enkel wrapper-komponent for panel-styling. Kan erstattes 1-1 med `nav-frontend-paneler`.
|
||||
|
||||
```jsx
|
||||
<Panel>
|
||||
Eu quis exercitation voluptate ex. Aute irure esse occaecat minim cupidatat
|
||||
velit minim duis sint culpa anim laboris. Consectetur nulla eu commodo ea
|
||||
culpa velit commodo incididunt sunt ipsum.
|
||||
</Panel>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<Panel>
|
||||
Eu quis exercitation voluptate ex. Aute irure esse occaecat minim cupidatat
|
||||
velit minim duis sint culpa anim laboris. Consectetur nulla eu commodo ea
|
||||
culpa velit commodo incididunt sunt ipsum.
|
||||
</Panel>
|
||||
</Canvas>
|
||||
|
||||
## Border
|
||||
|
||||
```jsx
|
||||
<Panel border>
|
||||
Eu quis exercitation voluptate ex. Aute irure esse occaecat minim cupidatat
|
||||
velit minim duis sint culpa anim laboris. Consectetur nulla eu commodo ea
|
||||
culpa velit commodo incididunt sunt ipsum.
|
||||
</Panel>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<Panel border>
|
||||
Eu quis exercitation voluptate ex. Aute irure esse occaecat minim cupidatat
|
||||
velit minim duis sint culpa anim laboris. Consectetur nulla eu commodo ea
|
||||
culpa velit commodo incididunt sunt ipsum.
|
||||
</Panel>
|
||||
</Canvas>
|
||||
@@ -0,0 +1,126 @@
|
||||
import React, { useState } from "react";
|
||||
import { Popover } from "../index";
|
||||
import { placements } from "@popperjs/core";
|
||||
import { Button } from "../button";
|
||||
|
||||
export default {
|
||||
title: "ds-react/Popover",
|
||||
component: Popover,
|
||||
parameters: {
|
||||
chromatic: { disable: true },
|
||||
},
|
||||
argTypes: {
|
||||
open: {
|
||||
control: {
|
||||
type: "boolean",
|
||||
},
|
||||
},
|
||||
arrow: {
|
||||
control: {
|
||||
type: "boolean",
|
||||
},
|
||||
},
|
||||
offset: {
|
||||
control: {
|
||||
type: "number",
|
||||
},
|
||||
},
|
||||
strategy: {
|
||||
defaultValue: "fixed",
|
||||
control: {
|
||||
type: "radio",
|
||||
options: ["fixed", "absolute"],
|
||||
},
|
||||
},
|
||||
placement: {
|
||||
defaultValue: "bottom",
|
||||
control: {
|
||||
type: "radio",
|
||||
options: [
|
||||
"bottom",
|
||||
"right",
|
||||
"left",
|
||||
"top-start",
|
||||
"top-end",
|
||||
"bottom-start",
|
||||
"bottom-end",
|
||||
"right-start",
|
||||
"right-end",
|
||||
"left-start",
|
||||
"left-end",
|
||||
"auto",
|
||||
"auto-start",
|
||||
"auto-end",
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Default = (props: any) => {
|
||||
const [anchorEl, setAnchorEl] = useState(null);
|
||||
const [open, setOpen] = useState<boolean>(false);
|
||||
return (
|
||||
<>
|
||||
<Button ref={(el) => setAnchorEl(el)} onClick={() => setOpen((x) => !x)}>
|
||||
Open
|
||||
</Button>
|
||||
<Popover
|
||||
{...props}
|
||||
open={props.open ?? open}
|
||||
anchorEl={anchorEl}
|
||||
onClose={() => setOpen(false)}
|
||||
>
|
||||
<Popover.Content>
|
||||
Velit in consequat Lorem sunt ut deserunt nostrud enim enim sint
|
||||
cillum ad veniam.
|
||||
</Popover.Content>
|
||||
</Popover>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const Template = (props) => {
|
||||
const [anchorEl, setAnchorEl] = useState(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button ref={(el) => setAnchorEl(el)}>X</Button>
|
||||
<Popover {...props} open anchorEl={anchorEl}>
|
||||
<Popover.Content>
|
||||
Velit in consequat Lorem
|
||||
<br />
|
||||
sunt Pariatur ullamco ullamco
|
||||
</Popover.Content>
|
||||
</Popover>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const Placement = () => {
|
||||
return (
|
||||
<div className="colgap" style={{ gap: "12rem" }}>
|
||||
{placements.map((placement) => (
|
||||
<Template key={placement} placement={placement} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Arrow = () => {
|
||||
return (
|
||||
<div className="colgap" style={{ gap: "12rem" }}>
|
||||
<Template arrow />
|
||||
<Template arrow={false} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Offset = () => {
|
||||
return (
|
||||
<div className="colgap" style={{ gap: "12rem" }}>
|
||||
<Template arrow offset={30} />
|
||||
<Template arrow={false} offset={30} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,23 +0,0 @@
|
||||
import { Meta, Canvas } from "@storybook/addon-docs";
|
||||
import { Popover } from "../../index";
|
||||
import { placements } from "@popperjs/core";
|
||||
|
||||
<Meta title="ds-react/popover/intro" />
|
||||
|
||||
# Hvordan ta i bruk Popover
|
||||
|
||||
```jsx
|
||||
<Popover anchorEl={anchorEl} onClose={() => handleClose} open={open}>
|
||||
<div style={{ margin: "1rem" }}>Contents</div>
|
||||
</Popover>
|
||||
```
|
||||
|
||||
## Plassering
|
||||
|
||||
Plassering er alle mulighetene tilbytt av `import { placements } from "@popperjs/core";`
|
||||
|
||||
`auto` , `auto-start` , `auto-end` , `top` , `bottom` , `right` , `left` , `top` ,`top-start` , `top-end` , `bottom-start` , `bottom-end` , `right-start` , `right-end` , `left-start` , `left-end`
|
||||
|
||||
## Arrow + offset
|
||||
|
||||
`arrow`-proppen toggler om arrow skal rendres med popoveren, mens `offset`-proppen er `px` offset popoveren har fra ankerelementet.
|
||||
@@ -1,56 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import { Popover } from "../index";
|
||||
import { Meta } from "@storybook/react/types-6-0";
|
||||
import { placements } from "@popperjs/core";
|
||||
export default {
|
||||
title: "ds-react/popover",
|
||||
component: Popover,
|
||||
parameters: {
|
||||
chromatic: { disable: true },
|
||||
},
|
||||
} as Meta;
|
||||
|
||||
const Template = (props) => {
|
||||
const [anchorEl, setAnchorEl] = useState(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
background: "var(--navds-global-color-gray-600)",
|
||||
textAlign: "center",
|
||||
width: "2rem",
|
||||
height: "2rem",
|
||||
}}
|
||||
ref={(el) => setAnchorEl(el)}
|
||||
></div>
|
||||
<Popover {...props} anchorEl={anchorEl} onClose={() => {}} open>
|
||||
<Popover.Content>{props.placement}</Popover.Content>
|
||||
</Popover>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const All = () => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
margin: "4rem 8rem 4rem 8rem",
|
||||
gap: "4rem",
|
||||
}}
|
||||
>
|
||||
{placements.map((placement) => (
|
||||
<div
|
||||
style={{
|
||||
width: "20%",
|
||||
height: "100px",
|
||||
}}
|
||||
>
|
||||
<Template placement={placement} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -5,7 +5,7 @@ import { Table } from "../index";
|
||||
import { Loader, Pagination, SortState } from "../..";
|
||||
|
||||
export default {
|
||||
title: "ds-react/table",
|
||||
title: "ds-react/Table",
|
||||
component: Table,
|
||||
parameters: {
|
||||
chromatic: { delay: 500 },
|
||||
|
||||
@@ -3,76 +3,73 @@ import { Table } from "..";
|
||||
import { Link } from "../..";
|
||||
|
||||
export default {
|
||||
title: "ds-react/table",
|
||||
title: "ds-react/Table",
|
||||
component: Table,
|
||||
};
|
||||
|
||||
export const Expandable = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Table zebraStripes>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
{columns.map(({ key, name }) => (
|
||||
<Table.HeaderCell key={key}>{name}</Table.HeaderCell>
|
||||
<Table zebraStripes>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
{columns.map(({ key, name }) => (
|
||||
<Table.HeaderCell key={key}>{name}</Table.HeaderCell>
|
||||
))}
|
||||
<Table.HeaderCell />
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{data.map((data) => (
|
||||
<Table.ExpandableRow
|
||||
expansionDisabled={data.animal === "Sel"}
|
||||
content={data.content}
|
||||
key={data.name}
|
||||
togglePlacement="right"
|
||||
>
|
||||
{columns.map(({ key }) => (
|
||||
<Table.DataCell key={key}>{data[key]}</Table.DataCell>
|
||||
))}
|
||||
<Table.HeaderCell />
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{data.map((data) => (
|
||||
<Table.ExpandableRow
|
||||
expansionDisabled={data.animal === "Sel"}
|
||||
content={data.content}
|
||||
key={data.name}
|
||||
togglePlacement="right"
|
||||
>
|
||||
{columns.map(({ key }) => (
|
||||
<Table.DataCell key={key}>{data[key]}</Table.DataCell>
|
||||
))}
|
||||
</Table.ExpandableRow>
|
||||
</Table.ExpandableRow>
|
||||
))}
|
||||
</Table.Body>
|
||||
</Table>
|
||||
);
|
||||
};
|
||||
|
||||
export const ExpandableSmall = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
return (
|
||||
<Table size="small">
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell />
|
||||
{columns.map(({ key, name }) => (
|
||||
<Table.HeaderCell key={key}>{name}</Table.HeaderCell>
|
||||
))}
|
||||
</Table.Body>
|
||||
</Table>
|
||||
<h2>defaultOpen/controlled + small</h2>
|
||||
<Table size="small">
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell />
|
||||
{columns.map(({ key, name }) => (
|
||||
<Table.HeaderCell key={key}>{name}</Table.HeaderCell>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{data.slice(0, 1).map((data) => (
|
||||
<Table.ExpandableRow content={data.content} key={data.name}>
|
||||
{columns.map(({ key }) => (
|
||||
<Table.DataCell key={key}>{data[key]}</Table.DataCell>
|
||||
))}
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{data.slice(0, 1).map((data) => (
|
||||
<Table.ExpandableRow
|
||||
content={data.content}
|
||||
key={data.name}
|
||||
defaultOpen
|
||||
>
|
||||
{columns.map(({ key }) => (
|
||||
<Table.DataCell key={key}>{data[key]}</Table.DataCell>
|
||||
))}
|
||||
</Table.ExpandableRow>
|
||||
))}
|
||||
{data.slice(1, 2).map((data) => (
|
||||
<Table.ExpandableRow
|
||||
content={data.content}
|
||||
key={data.name}
|
||||
open={open}
|
||||
onOpenChange={(open) => setOpen(open)}
|
||||
>
|
||||
{columns.map(({ key }) => (
|
||||
<Table.DataCell key={key}>{data[key]}</Table.DataCell>
|
||||
))}
|
||||
</Table.ExpandableRow>
|
||||
))}
|
||||
</Table.Body>
|
||||
</Table>
|
||||
</>
|
||||
</Table.ExpandableRow>
|
||||
))}
|
||||
{data.slice(1, 2).map((data) => (
|
||||
<Table.ExpandableRow
|
||||
content={data.content}
|
||||
key={data.name}
|
||||
open={open}
|
||||
onOpenChange={(open) => setOpen(open)}
|
||||
>
|
||||
{columns.map(({ key }) => (
|
||||
<Table.DataCell key={key}>{data[key]}</Table.DataCell>
|
||||
))}
|
||||
</Table.ExpandableRow>
|
||||
))}
|
||||
</Table.Body>
|
||||
</Table>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -200,3 +197,33 @@ const data = [
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
export const ExpandableOpen = () => {
|
||||
return (
|
||||
<Table zebraStripes>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
{columns.map(({ key, name }) => (
|
||||
<Table.HeaderCell key={key}>{name}</Table.HeaderCell>
|
||||
))}
|
||||
<Table.HeaderCell />
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{data.map((data) => (
|
||||
<Table.ExpandableRow
|
||||
expansionDisabled={data.animal === "Sel"}
|
||||
content={data.content}
|
||||
key={data.name}
|
||||
togglePlacement="right"
|
||||
defaultOpen
|
||||
>
|
||||
{columns.map(({ key }) => (
|
||||
<Table.DataCell key={key}>{data[key]}</Table.DataCell>
|
||||
))}
|
||||
</Table.ExpandableRow>
|
||||
))}
|
||||
</Table.Body>
|
||||
</Table>
|
||||
);
|
||||
};
|
||||
@@ -1,376 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import { capitalize } from "@material-ui/core";
|
||||
import { Table } from "../";
|
||||
import { Button } from "../..";
|
||||
import { SortState } from "../..";
|
||||
|
||||
export default {
|
||||
title: "ds-react/table",
|
||||
component: Table,
|
||||
};
|
||||
|
||||
interface Column {
|
||||
key: string;
|
||||
name?: string;
|
||||
sortable?: boolean;
|
||||
render?: (value: any) => React.ReactElement<any, any> | null;
|
||||
value?: (oppgave: any) => any;
|
||||
width?: number;
|
||||
align?: "left" | "center" | "right";
|
||||
}
|
||||
|
||||
export const Hot = () => {
|
||||
const [sort, setSort] = useState<SortState>();
|
||||
|
||||
const columns: Column[] = [
|
||||
{
|
||||
key: "eier",
|
||||
name: "Eier",
|
||||
render: (value) =>
|
||||
value ?? (
|
||||
<Button
|
||||
size="xsmall"
|
||||
style={{ marginTop: -2, marginBottom: -2, marginLeft: -6 }}
|
||||
variant="tertiary"
|
||||
>
|
||||
Start saken
|
||||
</Button>
|
||||
),
|
||||
value: (oppgave) => oppgave.saksbehandler?.navn,
|
||||
width: 152,
|
||||
},
|
||||
{
|
||||
key: "status",
|
||||
name: "Status",
|
||||
value: (oppgave) =>
|
||||
({
|
||||
ALLE: "Alle",
|
||||
VEDTAK_FATTET: "Innvilget",
|
||||
AVVENTER_SAKSBEHANDLER: "Mottatt",
|
||||
SENDT_GOSYS: "Sendt GOSYS",
|
||||
TILDELT_SAKSBEHANDLER: "Under behandling",
|
||||
}[oppgave.status]),
|
||||
width: 154,
|
||||
},
|
||||
{
|
||||
key: "område",
|
||||
name: "Område",
|
||||
value: (oppgave) =>
|
||||
capitalize(oppgave.personinformasjon.funksjonsnedsettelse[0]),
|
||||
width: 152,
|
||||
},
|
||||
{
|
||||
key: "søknadOm",
|
||||
name: "Søknad om",
|
||||
width: 192,
|
||||
},
|
||||
{
|
||||
key: "hjelpemiddelbruker",
|
||||
name: "Hjelpemiddelbruker",
|
||||
value: (oppgave) =>
|
||||
`${oppgave.personinformasjon.etternavn}, ${oppgave.personinformasjon.fornavn}`,
|
||||
width: 188,
|
||||
},
|
||||
{
|
||||
key: "fødselsnr",
|
||||
name: "Fødselsnr.",
|
||||
value: (oppgave) =>
|
||||
`${oppgave.personinformasjon.fnr.slice(
|
||||
0,
|
||||
6
|
||||
)} ${oppgave.personinformasjon.fnr.slice(6)}`,
|
||||
width: 124,
|
||||
align: "right",
|
||||
},
|
||||
{
|
||||
key: "bosted",
|
||||
name: "Bosted",
|
||||
value: (oppgave) => oppgave.personinformasjon.bosted,
|
||||
width: 144,
|
||||
},
|
||||
{
|
||||
key: "formidlerNavn",
|
||||
name: "Formidler",
|
||||
width: 164,
|
||||
},
|
||||
{
|
||||
key: "mottattDato",
|
||||
name: "Mottatt dato",
|
||||
width: 124,
|
||||
},
|
||||
{
|
||||
key: "menu",
|
||||
sortable: false,
|
||||
render: (value) => (
|
||||
<span style={{ display: "flex", marginBlock: -2 }}></span>
|
||||
),
|
||||
value: (oppgave) => oppgave.saksbehandler,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 16,
|
||||
}}
|
||||
>
|
||||
<div style={{ overflow: "auto" }}>
|
||||
<Table
|
||||
size="small"
|
||||
style={{ width: "initial" }}
|
||||
sort={sort}
|
||||
onSortChange={(sortKey) =>
|
||||
setSort({
|
||||
orderBy: sortKey,
|
||||
direction:
|
||||
sort?.direction === "ascending" ? "descending" : "ascending",
|
||||
})
|
||||
}
|
||||
>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
{columns.map(({ key, name, width, sortable = true, align }) => (
|
||||
<Table.ColumnHeader
|
||||
style={{
|
||||
width,
|
||||
minWidth: width,
|
||||
maxWidth: width,
|
||||
}}
|
||||
key={key}
|
||||
sortable={sortable}
|
||||
sortKey={key}
|
||||
align={align}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
}}
|
||||
>
|
||||
{name}
|
||||
</div>
|
||||
</Table.ColumnHeader>
|
||||
))}
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{data
|
||||
.slice()
|
||||
.sort((a, b) => {
|
||||
if (sort) {
|
||||
const comparator = (a, b, orderBy) => {
|
||||
const lookup = (oppgave) => {
|
||||
const column = columns.find(({ key }) => key === orderBy);
|
||||
|
||||
return column.value
|
||||
? column.value(oppgave)
|
||||
: oppgave[orderBy];
|
||||
};
|
||||
|
||||
if (lookup(b) < lookup(a) || lookup(b) === undefined) {
|
||||
return -1;
|
||||
}
|
||||
if (lookup(b) > lookup(a)) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
|
||||
return sort.direction === "ascending"
|
||||
? comparator(b, a, sort.orderBy)
|
||||
: comparator(a, b, sort.orderBy);
|
||||
}
|
||||
return 1;
|
||||
})
|
||||
.map((oppgave) => (
|
||||
<Table.Row key={oppgave.saksid}>
|
||||
{columns.map(
|
||||
({
|
||||
key,
|
||||
value,
|
||||
width,
|
||||
render = (value) => value,
|
||||
align,
|
||||
}) => (
|
||||
<Table.DataCell
|
||||
style={{
|
||||
width,
|
||||
minWidth: width,
|
||||
maxWidth: width,
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
}}
|
||||
title={oppgave[key]}
|
||||
key={key}
|
||||
align={align}
|
||||
>
|
||||
{render(value ? value(oppgave) : oppgave[key])}
|
||||
</Table.DataCell>
|
||||
)
|
||||
)}
|
||||
</Table.Row>
|
||||
))}
|
||||
</Table.Body>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const data = [
|
||||
{
|
||||
saksid: "111111",
|
||||
søknadOm:
|
||||
"Søknad om: Toalettforhøyer; kalender-/minnesystem; støttehåndtak; tidsur; komfyr-/elvakt",
|
||||
mottattDato: "2021-09-19T13:55:45",
|
||||
formidlerNavn: "Kari Johansen",
|
||||
personinformasjon: {
|
||||
fnr: "19044238651",
|
||||
funksjonsnedsettelse: ["bevegelse"],
|
||||
fornavn: "Petter Andreas",
|
||||
etternavn: "Hansen",
|
||||
poststed: "Trondheim",
|
||||
bosted: "TRONDHEIM",
|
||||
},
|
||||
saksbehandler: null,
|
||||
status: "AVVENTER_SAKSBEHANDLER",
|
||||
enhet: [
|
||||
{
|
||||
enhetsnummer: "6969",
|
||||
enhetsnavn: "Enhetsnavn",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
saksid: "222222",
|
||||
søknadOm: "Hjelpemidler",
|
||||
mottattDato: "2021-09-24T13:55:45",
|
||||
formidlerNavn: "Kari Johansen",
|
||||
personinformasjon: {
|
||||
fnr: "13044238651",
|
||||
funksjonsnedsettelse: ["bevegelse"],
|
||||
fornavn: "Mia Cathrine",
|
||||
etternavn: "Svendsen",
|
||||
poststed: "Trondheim",
|
||||
bosted: "TRONDHEIM",
|
||||
},
|
||||
saksbehandler: null,
|
||||
status: "AVVENTER_SAKSBEHANDLER",
|
||||
enhet: [
|
||||
{
|
||||
enhetsnummer: "6969",
|
||||
enhetsnavn: "Enhetsnavn",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
saksid: "5878444",
|
||||
søknadOm: "Hjelpemidler",
|
||||
mottattDato: "2021-09-20T13:55:45",
|
||||
formidlerNavn: "Kari Johansen",
|
||||
personinformasjon: {
|
||||
fnr: "130441386551",
|
||||
funksjonsnedsettelse: ["bevegelse"],
|
||||
fornavn: "Per Bjørkli",
|
||||
etternavn: "Hansen",
|
||||
poststed: "Trondheim",
|
||||
bosted: "TRONDHEIM",
|
||||
},
|
||||
saksbehandler: {
|
||||
epost: "a.b@nav.no",
|
||||
objectId: "23ea7485-1324-4b25-a763-6969",
|
||||
navn: "Geir Markusen",
|
||||
},
|
||||
status: "SENDT_GOSYS",
|
||||
enhet: [
|
||||
{
|
||||
enhetsnummer: "6969",
|
||||
enhetsnavn: "Enhetsnavn",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
saksid: "1234567",
|
||||
søknadOm: "Hjelpemidler",
|
||||
mottattDato: "2021-06-25T13:55:45",
|
||||
formidlerNavn: "Kari Johansen",
|
||||
personinformasjon: {
|
||||
fnr: "06115559891",
|
||||
funksjonsnedsettelse: ["kognisjon"],
|
||||
fornavn: "Iver",
|
||||
etternavn: "Slettan",
|
||||
poststed: "Lade",
|
||||
bosted: "TRONDHEIM",
|
||||
},
|
||||
saksbehandler: {
|
||||
epost: "a.b@nav.no",
|
||||
objectId: "23ea7485-1324-4b25-a763-assdfdfa",
|
||||
navn: "Silje Saksbehandler",
|
||||
},
|
||||
status: "TILDELT_SAKSBEHANDLER",
|
||||
enhet: [
|
||||
{
|
||||
enhetsnummer: "6969",
|
||||
enhetsnavn: "Enhetsnavn",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
saksid: "999999",
|
||||
søknadOm: "Hjelpemidler",
|
||||
mottattDato: "2021-06-25T16:55:45",
|
||||
formidlerNavn: "Kari Johansen",
|
||||
personinformasjon: {
|
||||
fnr: "16120101181",
|
||||
funksjonsnedsettelse: ["bevegelse"],
|
||||
fornavn: "Sondre",
|
||||
etternavn: "Hansen",
|
||||
poststed: "Lade",
|
||||
bosted: "TRONDHEIM",
|
||||
},
|
||||
saksbehandler: {
|
||||
epost: "a.b@nav.no",
|
||||
objectId: "23ea7485-1324-4b25-a763-6969",
|
||||
navn: "Geir Markusen",
|
||||
},
|
||||
status: "TILDELT_SAKSBEHANDLER",
|
||||
enhet: [
|
||||
{
|
||||
enhetsnummer: "6969",
|
||||
enhetsnavn: "Enhetsnavn",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
saksid: "888888",
|
||||
søknadOm: "Hjelpemidler",
|
||||
mottattDato: "2021-09-19T13:55:45",
|
||||
formidlerNavn: "Kari Johansen",
|
||||
personinformasjon: {
|
||||
fnr: "19044238651",
|
||||
funksjonsnedsettelse: ["bevegelse"],
|
||||
fornavn: "Geir",
|
||||
etternavn: "Dalby",
|
||||
poststed: "Trondheim",
|
||||
bosted: "TRONDHEIM",
|
||||
},
|
||||
saksbehandler: {
|
||||
epost: "a.b@nav.no",
|
||||
objectId: "23ea7485-1324-4b25-a763-assdfdfa",
|
||||
navn: "Silje Saksbehandler",
|
||||
},
|
||||
status: "VEDTAK_FATTET",
|
||||
enhet: [
|
||||
{
|
||||
enhetsnummer: "6969",
|
||||
enhetsnavn: "Enhetsnavn",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -1,112 +0,0 @@
|
||||
import { Table } from "../index";
|
||||
import { Meta, Canvas } from "@storybook/addon-docs";
|
||||
|
||||
<Meta title="ds-react/table/intro" />
|
||||
|
||||
# Hvordan ta i bruk Table
|
||||
|
||||
Komponenten er fortsatt WIP. Dette vil si at komponenten ikke er tilpasset for eks ikoner, inputelementer og lignende.
|
||||
Dette er noe vi har planer om å få på plass etterhvert.
|
||||
|
||||
```jsx
|
||||
<Table>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell>ID</Table.HeaderCell>
|
||||
<Table.HeaderCell>Fornavn</Table.HeaderCell>
|
||||
<Table.HeaderCell>Etternavn</Table.HeaderCell>
|
||||
<Table.HeaderCell>Rolle</Table.HeaderCell>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell>1</Table.HeaderCell>
|
||||
<Table.DataCell>Jean-Luc</Table.DataCell>
|
||||
<Table.DataCell>Picard</Table.DataCell>
|
||||
<Table.DataCell>Kaptein</Table.DataCell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell>2</Table.HeaderCell>
|
||||
<Table.DataCell>William</Table.DataCell>
|
||||
<Table.DataCell>Riker</Table.DataCell>
|
||||
<Table.DataCell>Kommandør</Table.DataCell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell>3</Table.HeaderCell>
|
||||
<Table.DataCell>Geordi</Table.DataCell>
|
||||
<Table.DataCell>La Forge</Table.DataCell>
|
||||
<Table.DataCell>Sjefsingeniør</Table.DataCell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<Table>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell>ID</Table.HeaderCell>
|
||||
<Table.HeaderCell>Fornavn</Table.HeaderCell>
|
||||
<Table.HeaderCell>Etternavn</Table.HeaderCell>
|
||||
<Table.HeaderCell>Rolle</Table.HeaderCell>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell>1</Table.HeaderCell>
|
||||
<Table.DataCell>Jean-Luc</Table.DataCell>
|
||||
<Table.DataCell>Picard</Table.DataCell>
|
||||
<Table.DataCell>Kaptein</Table.DataCell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell>2</Table.HeaderCell>
|
||||
<Table.DataCell>William</Table.DataCell>
|
||||
<Table.DataCell>Riker</Table.DataCell>
|
||||
<Table.DataCell>Kommandør</Table.DataCell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell>3</Table.HeaderCell>
|
||||
<Table.DataCell>Geordi</Table.DataCell>
|
||||
<Table.DataCell>La Forge</Table.DataCell>
|
||||
<Table.DataCell>Sjefsingeniør</Table.DataCell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table>
|
||||
</Canvas>
|
||||
|
||||
## Sizing
|
||||
|
||||
Størrelse kan justeres med `size`-proppen. Valg: `medium | small`
|
||||
|
||||
<Canvas>
|
||||
<Table size="small">
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell>ID</Table.HeaderCell>
|
||||
<Table.HeaderCell>Fornavn</Table.HeaderCell>
|
||||
<Table.HeaderCell>Etternavn</Table.HeaderCell>
|
||||
<Table.HeaderCell>Rolle</Table.HeaderCell>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell>1</Table.HeaderCell>
|
||||
<Table.DataCell>Jean-Luc</Table.DataCell>
|
||||
<Table.DataCell>Picard</Table.DataCell>
|
||||
<Table.DataCell>Kaptein</Table.DataCell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell>2</Table.HeaderCell>
|
||||
<Table.DataCell>William</Table.DataCell>
|
||||
<Table.DataCell>Riker</Table.DataCell>
|
||||
<Table.DataCell>Kommandør</Table.DataCell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell>3</Table.HeaderCell>
|
||||
<Table.DataCell>Geordi</Table.DataCell>
|
||||
<Table.DataCell>La Forge</Table.DataCell>
|
||||
<Table.DataCell>Sjefsingeniør</Table.DataCell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table>
|
||||
</Canvas>
|
||||
@@ -3,85 +3,82 @@ import { Table } from "../";
|
||||
import { Alert, Button, Checkbox, Link } from "../..";
|
||||
|
||||
export default {
|
||||
title: "ds-react/table",
|
||||
title: "ds-react/Table",
|
||||
component: Table,
|
||||
};
|
||||
|
||||
export const All = () => {
|
||||
const TableComponent = (props) => (
|
||||
<Table {...props}>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
{props.button && <Table.HeaderCell>Action</Table.HeaderCell>}
|
||||
<Table.HeaderCell>ID</Table.HeaderCell>
|
||||
<Table.HeaderCell>Fornavn</Table.HeaderCell>
|
||||
<Table.HeaderCell>Etternavn</Table.HeaderCell>
|
||||
<Table.HeaderCell>Rolle</Table.HeaderCell>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
{props.button && (
|
||||
<Table.DataCell
|
||||
style={{
|
||||
paddingTop: 6,
|
||||
paddingBottom: 6,
|
||||
}}
|
||||
>
|
||||
<Button size="xsmall">Click me!</Button>
|
||||
</Table.DataCell>
|
||||
)}
|
||||
<Table.HeaderCell>1</Table.HeaderCell>
|
||||
<Table.DataCell>Jean-Luc</Table.DataCell>
|
||||
<Table.DataCell>Picard</Table.DataCell>
|
||||
<Table.DataCell>Kaptein</Table.DataCell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
{props.button && (
|
||||
<Table.DataCell
|
||||
style={{
|
||||
paddingTop: 6,
|
||||
paddingBottom: 6,
|
||||
}}
|
||||
>
|
||||
<Button size="xsmall">Click me!</Button>
|
||||
</Table.DataCell>
|
||||
)}
|
||||
<Table.HeaderCell>2</Table.HeaderCell>
|
||||
<Table.DataCell>William</Table.DataCell>
|
||||
<Table.DataCell>Riker</Table.DataCell>
|
||||
<Table.DataCell>Kommandør</Table.DataCell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
{props.button && (
|
||||
<Table.DataCell
|
||||
style={{
|
||||
paddingTop: 6,
|
||||
paddingBottom: 6,
|
||||
}}
|
||||
>
|
||||
<Button size="xsmall">Click me!</Button>
|
||||
</Table.DataCell>
|
||||
)}
|
||||
<Table.HeaderCell>3</Table.HeaderCell>
|
||||
<Table.DataCell>Geordi</Table.DataCell>
|
||||
<Table.DataCell>La Forge</Table.DataCell>
|
||||
<Table.DataCell>Sjefsingeniør</Table.DataCell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table>
|
||||
);
|
||||
const TableComponent = (props) => (
|
||||
<Table {...props}>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
{props.button && <Table.HeaderCell>Action</Table.HeaderCell>}
|
||||
<Table.HeaderCell>ID</Table.HeaderCell>
|
||||
<Table.HeaderCell>Fornavn</Table.HeaderCell>
|
||||
<Table.HeaderCell>Etternavn</Table.HeaderCell>
|
||||
<Table.HeaderCell>Rolle</Table.HeaderCell>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
{props.button && (
|
||||
<Table.DataCell
|
||||
style={{
|
||||
paddingTop: 6,
|
||||
paddingBottom: 6,
|
||||
}}
|
||||
>
|
||||
<Button size="xsmall">Click me!</Button>
|
||||
</Table.DataCell>
|
||||
)}
|
||||
<Table.HeaderCell>1</Table.HeaderCell>
|
||||
<Table.DataCell>Jean-Luc</Table.DataCell>
|
||||
<Table.DataCell>Picard</Table.DataCell>
|
||||
<Table.DataCell>Kaptein</Table.DataCell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
{props.button && (
|
||||
<Table.DataCell
|
||||
style={{
|
||||
paddingTop: 6,
|
||||
paddingBottom: 6,
|
||||
}}
|
||||
>
|
||||
<Button size="xsmall">Click me!</Button>
|
||||
</Table.DataCell>
|
||||
)}
|
||||
<Table.HeaderCell>2</Table.HeaderCell>
|
||||
<Table.DataCell>William</Table.DataCell>
|
||||
<Table.DataCell>Riker</Table.DataCell>
|
||||
<Table.DataCell>Kommandør</Table.DataCell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
{props.button && (
|
||||
<Table.DataCell
|
||||
style={{
|
||||
paddingTop: 6,
|
||||
paddingBottom: 6,
|
||||
}}
|
||||
>
|
||||
<Button size="xsmall">Click me!</Button>
|
||||
</Table.DataCell>
|
||||
)}
|
||||
<Table.HeaderCell>3</Table.HeaderCell>
|
||||
<Table.DataCell>Geordi</Table.DataCell>
|
||||
<Table.DataCell>La Forge</Table.DataCell>
|
||||
<Table.DataCell>Sjefsingeniør</Table.DataCell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table>
|
||||
);
|
||||
|
||||
export const Default = () => <TableComponent />;
|
||||
export const Zebra = () => <TableComponent zebraStripes />;
|
||||
export const Small = () => <TableComponent size="small" />;
|
||||
export const Buttons = () => <TableComponent size="small" button />;
|
||||
|
||||
export const WithDivs = () => {
|
||||
return (
|
||||
<>
|
||||
<h1>Table</h1>
|
||||
<TableComponent />
|
||||
<h2>Zebra</h2>
|
||||
<TableComponent zebraStripes />
|
||||
<h2>Small Table</h2>
|
||||
<TableComponent size="small" />
|
||||
<h2>Small Table with buttons</h2>
|
||||
<TableComponent size="small" button />
|
||||
<h2>Table with divs</h2>
|
||||
<Alert variant="warning">
|
||||
Obs! Hvis man skal bygge tabeller uten å bruke vanlig {"<tabell> "}
|
||||
-markup er det svært viktig at man supplerer elementene med{" "}
|
||||
@@ -147,15 +144,8 @@ export const All = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export const Selection = () => (
|
||||
<>
|
||||
<h1>Selection</h1>
|
||||
<h2>Medium</h2>
|
||||
<SelectionTable />
|
||||
<h2>Small</h2>
|
||||
<SelectionTable size="small" />
|
||||
</>
|
||||
);
|
||||
export const Selection = () => <SelectionTable />;
|
||||
export const SelectionSmall = () => <SelectionTable size="small" />;
|
||||
|
||||
const SelectionTable = ({ size = "medium" }: { size?: "small" | "medium" }) => {
|
||||
const useToggleList = (initialState) => {
|
||||
|
||||
@@ -1,56 +0,0 @@
|
||||
import { Meta, Canvas } from "@storybook/addon-docs";
|
||||
import { Tag } from "../../index";
|
||||
|
||||
<Meta title="ds-react/tag/intro" />
|
||||
|
||||
# Hvordan ta i bruk Tag
|
||||
|
||||
Veldig enkel Tag-komponent som er lik `nav-frontend-etiketter`
|
||||
|
||||
```jsx
|
||||
<Tag variant="info"> Info tag</Tag>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<Tag variant="info"> Info tag</Tag>
|
||||
</Canvas>
|
||||
|
||||
## Varianter
|
||||
|
||||
```jsx
|
||||
<Tag variant="info"> Info tag</Tag>
|
||||
<Tag variant="warning"> Warning tag</Tag>
|
||||
<Tag variant="success"> Success tag</Tag>
|
||||
<Tag variant="error">Error tag</Tag>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<Tag variant="info"> Info tag</Tag>
|
||||
<Tag variant="warning"> Warning tag</Tag>
|
||||
<Tag variant="success"> Success tag</Tag>
|
||||
<Tag variant="error">Error tag</Tag>
|
||||
</Canvas>
|
||||
|
||||
## Sizing
|
||||
|
||||
```jsx
|
||||
<Tag variant="info" size="small"> Info tag</Tag>
|
||||
<Tag variant="warning" size="small"> Warning tag</Tag>
|
||||
<Tag variant="success" size="small"> Success tag</Tag>
|
||||
<Tag variant="error" size="small">Error tag</Tag>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<Tag variant="info" size="small">
|
||||
Info tag
|
||||
</Tag>
|
||||
<Tag variant="warning" size="small">
|
||||
Warning tag
|
||||
</Tag>
|
||||
<Tag variant="success" size="small">
|
||||
Success tag
|
||||
</Tag>
|
||||
<Tag variant="error" size="small">
|
||||
Error tag
|
||||
</Tag>
|
||||
</Canvas>
|
||||
@@ -1,32 +0,0 @@
|
||||
import React from "react";
|
||||
import { Tag } from "../index";
|
||||
import { Meta } from "@storybook/react/types-6-0";
|
||||
export default {
|
||||
title: "ds-react/tag",
|
||||
component: Tag,
|
||||
} as Meta;
|
||||
|
||||
export const All = () => {
|
||||
return (
|
||||
<div>
|
||||
<h1>Tag</h1>
|
||||
<Tag variant="info"> Info tag</Tag>
|
||||
<Tag variant="warning"> Warning tag</Tag>
|
||||
<Tag variant="success"> Success tag</Tag>
|
||||
<Tag variant="error">Error tag</Tag>
|
||||
<h1>Tag small</h1>
|
||||
<Tag variant="info" size="small">
|
||||
Info tag
|
||||
</Tag>
|
||||
<Tag variant="warning" size="small">
|
||||
Warning tag
|
||||
</Tag>
|
||||
<Tag variant="success" size="small">
|
||||
Success tag
|
||||
</Tag>
|
||||
<Tag variant="error" size="small">
|
||||
Error tag
|
||||
</Tag>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,45 @@
|
||||
import React from "react";
|
||||
import { Tag } from ".";
|
||||
|
||||
export default {
|
||||
title: "ds-react/Tag",
|
||||
component: Tag,
|
||||
argTypes: {
|
||||
variant: {
|
||||
defaultValue: "info",
|
||||
control: {
|
||||
type: "radio",
|
||||
options: ["error", "warning", "info", "success"],
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const variants: Array<"error" | "warning" | "info" | "success"> = [
|
||||
"error",
|
||||
"warning",
|
||||
"info",
|
||||
"success",
|
||||
];
|
||||
|
||||
export const Default = (props) => (
|
||||
<Tag variant={props.variant} size={props.size}>
|
||||
{props.children}
|
||||
</Tag>
|
||||
);
|
||||
|
||||
Default.args = {
|
||||
children: "Id elit esse",
|
||||
};
|
||||
|
||||
export const Small = () => {
|
||||
return (
|
||||
<div className="rowgap">
|
||||
{variants.map((variant, i) => (
|
||||
<Tag key={variant} variant={variant} size="small">
|
||||
{new Array(i + 1).fill("Id elit esse")}
|
||||
</Tag>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,122 +1,104 @@
|
||||
import React, { useState } from "react";
|
||||
import { Attachment, Hamburger, Star, System } from "@navikt/ds-icons";
|
||||
import { ToggleGroup } from "../index";
|
||||
import { Email, EmailOpened, Send } from "@navikt/ds-icons";
|
||||
import { Meta } from "@storybook/react/types-6-0";
|
||||
import React, { useState } from "react";
|
||||
import { ToggleGroup } from "../index";
|
||||
export default {
|
||||
title: "ds-react/toggle-group",
|
||||
title: "ds-react/ToggleGroup",
|
||||
component: ToggleGroup,
|
||||
parameters: {
|
||||
chromatic: { disable: true },
|
||||
argTypes: {
|
||||
size: {
|
||||
control: {
|
||||
type: "radio",
|
||||
options: ["medium", "small"],
|
||||
},
|
||||
},
|
||||
},
|
||||
} as Meta;
|
||||
|
||||
const Items = (icon?: boolean, both?: boolean) => (
|
||||
<>
|
||||
<ToggleGroup.Item value="first">
|
||||
<ToggleGroup.Item value="ulest">
|
||||
{both ? (
|
||||
<>
|
||||
<Hamburger /> First
|
||||
<Email /> Uleste
|
||||
</>
|
||||
) : (
|
||||
<>{icon ? <Hamburger /> : "First"}</>
|
||||
<>{icon ? <Email /> : "Uleste"}</>
|
||||
)}
|
||||
</ToggleGroup.Item>
|
||||
<ToggleGroup.Item value="second">
|
||||
<ToggleGroup.Item value="lest">
|
||||
{both ? (
|
||||
<>
|
||||
<Star /> Second more txt
|
||||
<EmailOpened /> Leste
|
||||
</>
|
||||
) : (
|
||||
<>{icon ? <Star /> : "Second more txt"}</>
|
||||
<>{icon ? <EmailOpened /> : "Leste"}</>
|
||||
)}
|
||||
</ToggleGroup.Item>
|
||||
<ToggleGroup.Item value="third">
|
||||
<ToggleGroup.Item value="sendt">
|
||||
{both ? (
|
||||
<>
|
||||
<Attachment /> Thrid
|
||||
<Send /> Sendte
|
||||
</>
|
||||
) : (
|
||||
<>{icon ? <Attachment /> : "Third"}</>
|
||||
)}
|
||||
</ToggleGroup.Item>
|
||||
<ToggleGroup.Item value="fourth">
|
||||
{both ? (
|
||||
<>
|
||||
<System /> Fourth
|
||||
</>
|
||||
) : (
|
||||
<>{icon ? <System /> : "Fourth"}</>
|
||||
<>{icon ? <Send /> : "Sendte"}</>
|
||||
)}
|
||||
</ToggleGroup.Item>
|
||||
</>
|
||||
);
|
||||
|
||||
export const UUDemo = () => {
|
||||
export const Default = (props) => {
|
||||
const [activeValue, setActiveValue] = useState("ulest");
|
||||
return (
|
||||
<ToggleGroup value={activeValue} onChange={setActiveValue}>
|
||||
<ToggleGroup.Item value="ulest">Ulest</ToggleGroup.Item>
|
||||
<ToggleGroup.Item value="lest">Leste</ToggleGroup.Item>
|
||||
<ToggleGroup.Item value="sendt">Sendte</ToggleGroup.Item>
|
||||
<ToggleGroup
|
||||
size={props?.size}
|
||||
value={activeValue}
|
||||
onChange={setActiveValue}
|
||||
label={props.label ? "Proident minim dolor pariatur." : undefined}
|
||||
>
|
||||
{Items(!!props?.icon, !!props?.text && props.icon)}
|
||||
</ToggleGroup>
|
||||
);
|
||||
};
|
||||
|
||||
export const All = () => {
|
||||
const [activeValue, setActiveValue] = useState("first");
|
||||
Default.args = {
|
||||
icon: true,
|
||||
text: true,
|
||||
label: false,
|
||||
};
|
||||
|
||||
export const Compositions = () => {
|
||||
const [activeValue, setActiveValue] = useState("ulest");
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>ToggleGroup</h2>
|
||||
<h3>{activeValue}</h3>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
|
||||
<ToggleGroup value={activeValue} onChange={setActiveValue}>
|
||||
{Items()}
|
||||
</ToggleGroup>
|
||||
<ToggleGroup value={activeValue} onChange={setActiveValue}>
|
||||
{Items(true)}
|
||||
</ToggleGroup>
|
||||
<ToggleGroup value={activeValue} onChange={setActiveValue}>
|
||||
{Items(true, true)}
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
<h2>ToggleGroup Small</h2>
|
||||
<h3>{activeValue}</h3>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
|
||||
<ToggleGroup size="small" value={activeValue} onChange={setActiveValue}>
|
||||
{Items()}
|
||||
</ToggleGroup>
|
||||
<ToggleGroup size="small" value={activeValue} onChange={setActiveValue}>
|
||||
{Items(true)}
|
||||
</ToggleGroup>
|
||||
<ToggleGroup size="small" value={activeValue} onChange={setActiveValue}>
|
||||
{Items(true, true)}
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
<h2>ToggleGroup label</h2>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
|
||||
<ToggleGroup
|
||||
label="Label msg"
|
||||
value={activeValue}
|
||||
onChange={setActiveValue}
|
||||
>
|
||||
{Items()}
|
||||
</ToggleGroup>
|
||||
<ToggleGroup
|
||||
label="Label msg"
|
||||
value={activeValue}
|
||||
onChange={setActiveValue}
|
||||
aria-describedby="demo-id"
|
||||
>
|
||||
{Items()}
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
|
||||
<h2>Uncontrolled</h2>
|
||||
<ToggleGroup onChange={setActiveValue} defaultValue="second">
|
||||
{Items()}
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
<div className="colgap">
|
||||
<ToggleGroup value={activeValue} onChange={setActiveValue}>
|
||||
{Items()}
|
||||
</ToggleGroup>
|
||||
<ToggleGroup value={activeValue} onChange={setActiveValue}>
|
||||
{Items(true, true)}
|
||||
</ToggleGroup>
|
||||
<ToggleGroup value={activeValue} onChange={setActiveValue}>
|
||||
{Items(true)}
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Small = () => {
|
||||
const [activeValue, setActiveValue] = useState("ulest");
|
||||
|
||||
return (
|
||||
<div className="colgap">
|
||||
<ToggleGroup size="small" value={activeValue} onChange={setActiveValue}>
|
||||
{Items()}
|
||||
</ToggleGroup>
|
||||
<ToggleGroup size="small" value={activeValue} onChange={setActiveValue}>
|
||||
{Items(true, true)}
|
||||
</ToggleGroup>
|
||||
<ToggleGroup size="small" value={activeValue} onChange={setActiveValue}>
|
||||
{Items(true)}
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,75 @@
|
||||
import { Meta } from "@storybook/react";
|
||||
import React from "react";
|
||||
import { Heading } from "..";
|
||||
|
||||
export default {
|
||||
title: "ds-react/Typography/Heading",
|
||||
component: Heading,
|
||||
argTypes: {
|
||||
size: {
|
||||
defaultValue: "large",
|
||||
control: {
|
||||
type: "radio",
|
||||
options: ["xlarge", "large", "medium", "small", "xsmall"],
|
||||
},
|
||||
},
|
||||
level: {
|
||||
defaultValue: "1",
|
||||
control: {
|
||||
type: "radio",
|
||||
options: ["1", "2", "3", "4", "5", "6"],
|
||||
},
|
||||
},
|
||||
},
|
||||
} as Meta;
|
||||
|
||||
const lorem = "Veniam consequat cillum";
|
||||
|
||||
export const Default = (props) => <Heading {...props}>{lorem}</Heading>;
|
||||
|
||||
Default.args = {
|
||||
spacing: false,
|
||||
};
|
||||
|
||||
export const Sizes = () => (
|
||||
<div className="colgap">
|
||||
<Heading level="1" size="xlarge">
|
||||
{lorem}
|
||||
</Heading>
|
||||
<Heading level="2" size="large">
|
||||
{lorem}
|
||||
</Heading>
|
||||
<Heading level="3" size="medium">
|
||||
{lorem}
|
||||
</Heading>
|
||||
<Heading level="4" size="small">
|
||||
{lorem}
|
||||
</Heading>
|
||||
<Heading level="5" size="xsmall">
|
||||
{lorem}
|
||||
</Heading>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const Spacing = () => (
|
||||
<div>
|
||||
<Heading level="1" size="xlarge" spacing>
|
||||
{lorem}
|
||||
</Heading>
|
||||
<Heading level="2" size="large" spacing>
|
||||
{lorem}
|
||||
</Heading>
|
||||
<Heading level="3" size="medium" spacing>
|
||||
{lorem}
|
||||
</Heading>
|
||||
<Heading level="4" size="small" spacing>
|
||||
{lorem}
|
||||
</Heading>
|
||||
<Heading level="5" size="xsmall" spacing>
|
||||
{lorem}
|
||||
</Heading>
|
||||
<Heading level="5" size="xsmall">
|
||||
{lorem}
|
||||
</Heading>
|
||||
</div>
|
||||
);
|
||||
@@ -1,137 +1,210 @@
|
||||
import { Meta } from "@storybook/react";
|
||||
import React from "react";
|
||||
import {
|
||||
Heading,
|
||||
BodyShort,
|
||||
BodyLong,
|
||||
Detail,
|
||||
Ingress,
|
||||
Label,
|
||||
ErrorMessage,
|
||||
BodyLong as DsBodyLong,
|
||||
BodyShort as DsBodyShort,
|
||||
Detail as DsDetail,
|
||||
ErrorMessage as DsErrorMessage,
|
||||
Ingress as DsIngress,
|
||||
Label as DsLabel,
|
||||
} from "..";
|
||||
|
||||
export default {
|
||||
title: "ds-react/typography",
|
||||
component: BodyLong,
|
||||
title: "ds-react/Typography",
|
||||
component: DsBodyLong,
|
||||
subcomponents: {
|
||||
DsBodyShort,
|
||||
DsDetail,
|
||||
DsErrorMessage,
|
||||
DsIngress,
|
||||
DsLabel,
|
||||
},
|
||||
argTypes: {
|
||||
size: {
|
||||
defaultValue: "large",
|
||||
control: {
|
||||
type: "radio",
|
||||
options: ["medium", "small"],
|
||||
},
|
||||
},
|
||||
component: {
|
||||
defaultValue: "BodyLong",
|
||||
control: {
|
||||
type: "radio",
|
||||
options: [
|
||||
"BodyLong",
|
||||
"BodyShort",
|
||||
"Detail",
|
||||
"Ingress",
|
||||
"Label",
|
||||
"ErrorMessage",
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
} as Meta;
|
||||
|
||||
const lorem =
|
||||
"Velit quis in laborum occaecat laborum magna id nisi veniam aliqua velit amet non. In quis sit proident dolore reprehenderit laborum aliquip";
|
||||
|
||||
const compMap = {
|
||||
BodyLong: DsBodyLong,
|
||||
BodyShort: DsBodyShort,
|
||||
Detail: DsDetail,
|
||||
Ingress: DsIngress,
|
||||
Label: DsLabel,
|
||||
ErrorMessage: DsErrorMessage,
|
||||
};
|
||||
|
||||
const lorem = () => <>Veniam consequat cillum pariatur officia duis</>;
|
||||
|
||||
const TitleTemplate = ({ level, size, spacing }) => (
|
||||
<Heading spacing={spacing} size={size} level={level}>
|
||||
{lorem()}
|
||||
</Heading>
|
||||
);
|
||||
|
||||
export const HeadingStory = TitleTemplate.bind({});
|
||||
HeadingStory.args = { level: 1, size: "xlarge", spacing: false };
|
||||
|
||||
const IngressTemplate = ({ spacing }) => (
|
||||
<Ingress spacing={spacing}>{lorem()}</Ingress>
|
||||
);
|
||||
|
||||
export const IngressStory = IngressTemplate.bind({});
|
||||
IngressStory.args = { spacing: false };
|
||||
|
||||
const BodyLongTemplate = ({ spacing, size }) => (
|
||||
<BodyLong size={size} spacing={spacing}>
|
||||
{lorem()}
|
||||
</BodyLong>
|
||||
);
|
||||
|
||||
export const BodyLongStory = BodyLongTemplate.bind({});
|
||||
BodyLongStory.args = { spacing: false, size: "medium" };
|
||||
|
||||
const BodyShortTemplate = ({ spacing, size }) => (
|
||||
<BodyShort size={size} spacing={spacing}>
|
||||
{lorem()}
|
||||
</BodyShort>
|
||||
);
|
||||
|
||||
export const BodyShortStory = BodyShortTemplate.bind({});
|
||||
BodyShortStory.args = { spacing: false, size: "medium" };
|
||||
|
||||
const LabelTemplate = ({ spacing, size }) => (
|
||||
<Label size={size} spacing={spacing}>
|
||||
{lorem()}
|
||||
</Label>
|
||||
);
|
||||
|
||||
export const LabelStory = LabelTemplate.bind({});
|
||||
LabelStory.args = { spacing: false, size: "medium" };
|
||||
|
||||
const DetailTemplate = ({ spacing, size, uppercase }) => (
|
||||
<Detail size={size} spacing={spacing} uppercase={uppercase}>
|
||||
{lorem()}
|
||||
</Detail>
|
||||
);
|
||||
|
||||
export const DetailStory = DetailTemplate.bind({});
|
||||
DetailStory.args = { spacing: false, uppercase: false, size: "medium" };
|
||||
|
||||
const ErrorMessageTemplate = ({ size }) => (
|
||||
<ErrorMessage size={size}>{lorem()}</ErrorMessage>
|
||||
);
|
||||
|
||||
export const ErrorMessageStory = ErrorMessageTemplate.bind({});
|
||||
ErrorMessageStory.args = { size: "medium" };
|
||||
|
||||
export const SideInnholdEksempel = () => {
|
||||
return (
|
||||
<div style={{ maxWidth: 600 }}>
|
||||
<Heading level={"1"} size="xlarge" spacing>
|
||||
Title lvl 1 xlarge
|
||||
</Heading>
|
||||
<BodyLong spacing>
|
||||
BodyLong: Aliqua ad et nisi commodo sit excepteur in commodo proident
|
||||
proident. Nostrud consectetur dolore eu nostrud aliqua. Adipisicing
|
||||
labore aliqua qui velit amet ea amet do. Magna anim velit et incididunt.
|
||||
Lorem ad pariatur pariatur quis magna cupidatat. Exercitation officia
|
||||
occaecat occaecat id nulla fugiat laborum elit laboris non est ex
|
||||
nostrud occaecat. Commodo laboris veniam cillum in aute.
|
||||
</BodyLong>
|
||||
<BodyLong spacing>
|
||||
BodyLong: Cillum consequat velit est ea voluptate. Et elit irure magna
|
||||
sit consequat mollit excepteur ad non excepteur velit exercitation aute.
|
||||
Fugiat deserunt quis nulla cupidatat esse quis ex. Laborum eiusmod culpa
|
||||
labore eu irure quis laborum. Irure veniam et nostrud do. Quis ut ea est
|
||||
culpa tempor anim.
|
||||
</BodyLong>
|
||||
<BodyLong spacing>
|
||||
BodyLong: Dolore commodo ad veniam commodo aute voluptate est officia
|
||||
sunt proident irure consectetur excepteur.
|
||||
</BodyLong>
|
||||
<Heading level={"2"} size="xlarge" spacing>
|
||||
Title lvl 2 large
|
||||
</Heading>
|
||||
<Ingress spacing>
|
||||
Ingress: Mollit incididunt incididunt officia amet est et non aliqua
|
||||
officia nulla et aute aliqua culpa.
|
||||
</Ingress>
|
||||
<BodyLong spacing>
|
||||
BodyLong: Commodo veniam enim laborum pariatur excepteur commodo do
|
||||
cillum. Nisi elit sunt commodo id in adipisicing cupidatat dolore dolore
|
||||
et tempor cupidatat. Cillum quis sunt in dolor occaecat.
|
||||
</BodyLong>
|
||||
<BodyLong spacing>
|
||||
BodyLong: Irure dolore laborum amet occaecat ex laboris mollit
|
||||
reprehenderit nisi laborum voluptate laborum. Ipsum eu sint laborum
|
||||
adipisicing ut incididunt laborum laborum. Ipsum non amet laboris quis
|
||||
Lorem est laborum qui pariatur ex eu. Eiusmod proident amet esse ex.
|
||||
</BodyLong>
|
||||
<BodyLong size="small" spacing>
|
||||
BodyLong small: Irure dolore laborum amet occaecat ex laboris mollit
|
||||
reprehenderit nisi laborum voluptate laborum. Ipsum eu sint laborum
|
||||
adipisicing ut incididunt laborum laborum. Ipsum non amet laboris quis
|
||||
Lorem est laborum qui pariatur ex eu. Eiusmod proident amet esse ex.
|
||||
</BodyLong>
|
||||
<BodyShort spacing>
|
||||
BodyShort: Id consectetur velit sunt laboris consequat ullamco
|
||||
incididunt.
|
||||
</BodyShort>
|
||||
<BodyShort size="small" spacing>
|
||||
BodyShort small: Sunt amet officia sit excepteur sit pariatur sit
|
||||
reprehenderit irure ipsum.
|
||||
</BodyShort>
|
||||
</div>
|
||||
);
|
||||
export const Default = (props) => {
|
||||
const Comp = compMap[props.component];
|
||||
return <Comp {...props}>{lorem}</Comp>;
|
||||
};
|
||||
|
||||
Default.args = {
|
||||
spacing: false,
|
||||
};
|
||||
|
||||
export const Ingress = () => (
|
||||
<>
|
||||
<DsIngress spacing>
|
||||
Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
|
||||
</DsIngress>
|
||||
<DsIngress>
|
||||
Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
|
||||
</DsIngress>
|
||||
</>
|
||||
);
|
||||
|
||||
export const BodyLong = () => (
|
||||
<>
|
||||
<DsBodyLong spacing>
|
||||
Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip. Aute amet
|
||||
occaecat ex aliqua irure elit labore pariatur. Proident pariatur proident
|
||||
pariatur magna consequat velit id commodo quis sunt tempor ullamco aliquip
|
||||
pariatur.
|
||||
</DsBodyLong>
|
||||
<DsBodyLong>
|
||||
Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip. Aute amet
|
||||
occaecat ex aliqua irure elit labore pariatur. Proident pariatur proident
|
||||
pariatur magna consequat velit id commodo quis sunt tempor ullamco aliquip
|
||||
pariatur.
|
||||
</DsBodyLong>
|
||||
</>
|
||||
);
|
||||
|
||||
export const BodyLongSmall = () => (
|
||||
<>
|
||||
<DsBodyLong size="small" spacing>
|
||||
Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip. Aute amet
|
||||
occaecat ex aliqua irure elit labore pariatur. Proident pariatur proident
|
||||
pariatur magna consequat velit id commodo quis sunt tempor ullamco aliquip
|
||||
pariatur.
|
||||
</DsBodyLong>
|
||||
<DsBodyLong size="small">
|
||||
Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip. Aute amet
|
||||
occaecat ex aliqua irure elit labore pariatur. Proident pariatur proident
|
||||
pariatur magna consequat velit id commodo quis sunt tempor ullamco aliquip
|
||||
pariatur.
|
||||
</DsBodyLong>
|
||||
</>
|
||||
);
|
||||
|
||||
export const BodyShort = () => (
|
||||
<>
|
||||
<DsBodyShort spacing>
|
||||
Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
|
||||
</DsBodyShort>
|
||||
<DsBodyShort>
|
||||
Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
|
||||
</DsBodyShort>
|
||||
</>
|
||||
);
|
||||
|
||||
export const BodyShortSmall = () => (
|
||||
<>
|
||||
<DsBodyShort size="small" spacing>
|
||||
Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
|
||||
</DsBodyShort>
|
||||
<DsBodyShort size="small">
|
||||
Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
|
||||
</DsBodyShort>
|
||||
</>
|
||||
);
|
||||
|
||||
export const Label = () => (
|
||||
<>
|
||||
<DsLabel spacing>
|
||||
Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
|
||||
</DsLabel>
|
||||
<DsLabel>
|
||||
Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
|
||||
</DsLabel>
|
||||
</>
|
||||
);
|
||||
|
||||
export const LabelSmall = () => (
|
||||
<>
|
||||
<DsLabel size="small" spacing>
|
||||
Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
|
||||
</DsLabel>
|
||||
<DsLabel size="small">
|
||||
Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
|
||||
</DsLabel>
|
||||
</>
|
||||
);
|
||||
|
||||
export const Detail = () => (
|
||||
<>
|
||||
<DsDetail spacing>
|
||||
Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
|
||||
</DsDetail>
|
||||
<DsDetail>
|
||||
Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
|
||||
</DsDetail>
|
||||
</>
|
||||
);
|
||||
|
||||
export const DetailUppercase = () => (
|
||||
<>
|
||||
<DsDetail spacing uppercase>
|
||||
Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
|
||||
</DsDetail>
|
||||
<DsDetail uppercase>
|
||||
Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
|
||||
</DsDetail>
|
||||
</>
|
||||
);
|
||||
|
||||
export const DetailSmall = () => (
|
||||
<>
|
||||
<DsDetail size="small" spacing>
|
||||
Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
|
||||
</DsDetail>
|
||||
<DsDetail size="small">
|
||||
Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
|
||||
</DsDetail>
|
||||
</>
|
||||
);
|
||||
|
||||
export const ErrorMessage = () => (
|
||||
<>
|
||||
<DsErrorMessage spacing>
|
||||
Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
|
||||
</DsErrorMessage>
|
||||
<DsErrorMessage>
|
||||
Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
|
||||
</DsErrorMessage>
|
||||
</>
|
||||
);
|
||||
|
||||
export const ErrorMessageSmall = () => (
|
||||
<>
|
||||
<DsErrorMessage size="small" spacing>
|
||||
Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
|
||||
</DsErrorMessage>
|
||||
<DsErrorMessage size="small">
|
||||
Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
|
||||
</DsErrorMessage>
|
||||
</>
|
||||
);
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-tailwind",
|
||||
"version": "0.2.6",
|
||||
"version": "0.2.7",
|
||||
"description": "Auto-generated tailwind config based on @navikt/ds-tokens",
|
||||
"author": "NAV Designsystem team",
|
||||
"keywords": [
|
||||
@@ -22,7 +22,7 @@
|
||||
"directory": "@navikt/core/tailwind"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-tokens": "^0.9.5",
|
||||
"@navikt/ds-tokens": "^0.9.6",
|
||||
"@types/jest": "^27.0.1",
|
||||
"@types/node": "^17.0.35",
|
||||
"jest": "^27.2.0",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-tokens",
|
||||
"version": "0.9.5",
|
||||
"version": "0.9.6",
|
||||
"description": "Auto-generated design-tokens for NAV design-systems framework",
|
||||
"author": "NAV Designsystem team",
|
||||
"keywords": [
|
||||
|
||||
@@ -21,12 +21,6 @@
|
||||
},
|
||||
"focus-inverted": {
|
||||
"value": "0 0 0 3px {navds.semantic.color.focus.inverted.value}"
|
||||
},
|
||||
"popover": {
|
||||
"value": "0 2px 4px 0 {navds.global.color.gray.200.value}"
|
||||
},
|
||||
"card": {
|
||||
"value": "0 1px 3px 0 rgba(38,38,38,0.2),0 2px 1px 0 rgba(38,38,38,0.12),0 1px 1px 0 rgba(38,38,38,0.14)"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,42 +1,30 @@
|
||||
import React from "react";
|
||||
import { Meta } from "@storybook/react/types-6-0";
|
||||
import * as tokens from "../dist/tokens.js";
|
||||
|
||||
export default {
|
||||
title: "ds-tokens/Border-radius",
|
||||
} as Meta;
|
||||
|
||||
export const BorderRadius = () => {
|
||||
const allRadius: { [key: string]: string } = Object.entries(tokens).reduce(
|
||||
(old, [key, val]) =>
|
||||
key.startsWith("NavdsBorderRadius") ? { ...old, [key]: val } : { ...old },
|
||||
{}
|
||||
);
|
||||
const Border = ({ token }) => (
|
||||
<>
|
||||
<div className="border" style={{ borderRadius: token }} />
|
||||
<style>{`
|
||||
.border {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
background: #f7f7f7;
|
||||
border: 2px solid #292929;
|
||||
}
|
||||
`}</style>
|
||||
</>
|
||||
);
|
||||
|
||||
const sortObject = Object.fromEntries(
|
||||
Object.entries(allRadius).sort(
|
||||
(a, b) => Number(a[1].replace("px", "")) - Number(b[1].replace("px", ""))
|
||||
)
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="colgap">
|
||||
{Object.entries(sortObject).map(([key, val]) => (
|
||||
<div
|
||||
key={key}
|
||||
style={{
|
||||
width: 600,
|
||||
height: 40,
|
||||
backgroundColor: "thistle",
|
||||
borderRadius: val,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
{key}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export const Small = () => <Border token="var(--navds-border-radius-small)" />;
|
||||
export const Medium = () => (
|
||||
<Border token="var(--navds-border-radius-medium)" />
|
||||
);
|
||||
export const Large = () => <Border token="var(--navds-border-radius-large)" />;
|
||||
export const xLarge = () => (
|
||||
<Border token="var(--navds-border-radius-xlarge)" />
|
||||
);
|
||||
export const Full = () => <Border token="var(--navds-border-radius-full)" />;
|
||||
@@ -6,27 +6,72 @@ export default {
|
||||
title: "ds-tokens/Colors",
|
||||
} as Meta;
|
||||
|
||||
export const Global = () => {
|
||||
const globalColors: { [key: string]: string } = Object.entries(tokens).reduce(
|
||||
const globalColor = (
|
||||
color:
|
||||
| "gray"
|
||||
| "blue"
|
||||
| "red"
|
||||
| "orange"
|
||||
| "limegreen"
|
||||
| "deepblue"
|
||||
| "green"
|
||||
| "lightblue"
|
||||
| "purple"
|
||||
): { [key: string]: string } => {
|
||||
return Object.entries(tokens).reduce(
|
||||
(old, [key, val]) =>
|
||||
key.includes("GlobalColor") ? { ...old, [key]: val } : { ...old },
|
||||
key.includes("GlobalColor") && key.toLowerCase().includes(`color${color}`)
|
||||
? { ...old, [key]: val }
|
||||
: { ...old },
|
||||
{}
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="colgap">
|
||||
{Object.entries(globalColors).map(([key, val]) => (
|
||||
<div key={key}>
|
||||
<span>{key}</span>
|
||||
<div style={{ background: val, width: 600, height: 40 }} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const RenderGlobal = ({ color }) => (
|
||||
<div>
|
||||
{Object.entries(globalColor(color))
|
||||
.sort((a, b) => (a[0].endsWith("50") ? -1 : 1))
|
||||
.map(([key, val]) => (
|
||||
<div
|
||||
style={{
|
||||
background: val,
|
||||
width: "50rem",
|
||||
height: "5rem",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
background: "rgba(39,39,39,0.4)",
|
||||
width: "fit-content",
|
||||
color: "white",
|
||||
padding: 2,
|
||||
fontSize: 14,
|
||||
}}
|
||||
>
|
||||
{`${key}: ${val}`}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
export const GlobalGray = () => <RenderGlobal color="gray" />;
|
||||
export const GlobalBlue = () => <RenderGlobal color="blue" />;
|
||||
export const GlobalDeepBlue = () => <RenderGlobal color="deepblue" />;
|
||||
export const GlobalLightBlue = () => <RenderGlobal color="lightblue" />;
|
||||
export const GlobalRed = () => <RenderGlobal color="red" />;
|
||||
export const GlobalOrange = () => <RenderGlobal color="orange" />;
|
||||
export const GlobalGreen = () => <RenderGlobal color="green" />;
|
||||
export const GlobalLimeGreen = () => <RenderGlobal color="limegreen" />;
|
||||
export const GlobalPurple = () => <RenderGlobal color="purple" />;
|
||||
|
||||
export const Semantic = () => {
|
||||
const globalColors: { [key: string]: string } = Object.entries(tokens).reduce(
|
||||
const semanticColors: { [key: string]: string } = Object.entries(
|
||||
tokens
|
||||
).reduce(
|
||||
(old, [key, val]) =>
|
||||
key.includes("SemanticColor") ? { ...old, [key]: val } : { ...old },
|
||||
{}
|
||||
@@ -34,10 +79,33 @@ export const Semantic = () => {
|
||||
|
||||
return (
|
||||
<div className="colgap">
|
||||
{Object.entries(globalColors).map(([key, val]) => (
|
||||
<div key={key}>
|
||||
<span>{key}</span>
|
||||
<div style={{ background: val, width: 600, height: 40 }} />
|
||||
<p>
|
||||
Semantiske tokens vil oppdateres på sikt. Vi anbefaler å holde seg til
|
||||
globale tokens for nå.
|
||||
</p>
|
||||
{Object.entries(semanticColors).map(([key, val]) => (
|
||||
<div
|
||||
style={{
|
||||
background: val,
|
||||
width: "50rem",
|
||||
height: "5rem",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
background: "rgba(39,39,39,0.4)",
|
||||
width: "fit-content",
|
||||
color: "white",
|
||||
padding: 2,
|
||||
fontSize: 14,
|
||||
}}
|
||||
>
|
||||
{`${key}: ${val}`}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -1,35 +1,30 @@
|
||||
import React from "react";
|
||||
import { Meta } from "@storybook/react/types-6-0";
|
||||
import * as tokens from "../dist/tokens.js";
|
||||
|
||||
export default {
|
||||
title: "ds-tokens/Shadows",
|
||||
} as Meta;
|
||||
|
||||
export const Shadows = () => {
|
||||
const allShadows: { [key: string]: string } = Object.entries(tokens).reduce(
|
||||
(old, [key, val]) =>
|
||||
key.startsWith("NavdsShadow") ? { ...old, [key]: val } : { ...old },
|
||||
{}
|
||||
);
|
||||
const Shadow = ({ token }) => (
|
||||
<>
|
||||
<div className="shadow" style={{ boxShadow: token }} />
|
||||
<style>{`
|
||||
.shadow {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
background: #f7f7f7;
|
||||
border-radius: 16px;
|
||||
}
|
||||
`}</style>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="colgap" style={{ gap: "4rem" }}>
|
||||
{Object.entries(allShadows).map(([key, val]) => (
|
||||
<div
|
||||
key={key}
|
||||
style={{
|
||||
height: 40,
|
||||
width: 600,
|
||||
boxShadow: val,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
{key}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export const XSmall = () => <Shadow token="var(--navds-shadow-xsmall)" />;
|
||||
export const Small = () => <Shadow token="var(--navds-shadow-small)" />;
|
||||
export const Medium = () => <Shadow token="var(--navds-shadow-medium)" />;
|
||||
export const Large = () => <Shadow token="var(--navds-shadow-large)" />;
|
||||
export const XxLarge = () => <Shadow token="var(--navds-shadow-xlarge)" />;
|
||||
export const Focus = () => <Shadow token="var(--navds-shadow-focus)" />;
|
||||
export const FocusInverted = () => (
|
||||
<Shadow token="var(--navds-shadow-focus-inverted)" />
|
||||
);
|
||||
@@ -25,13 +25,12 @@ export const Spacing = () => {
|
||||
<div className="colgap">
|
||||
{Object.entries(sortObject).map(([key, val]) => (
|
||||
<div>
|
||||
{key}
|
||||
<div
|
||||
key={key}
|
||||
style={{
|
||||
width: val,
|
||||
height: 40,
|
||||
backgroundColor: "thistle",
|
||||
backgroundColor: "var(--navds-global-color-lightblue-200)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-react-internal",
|
||||
"version": "0.14.9",
|
||||
"version": "0.14.15",
|
||||
"description": "NAV internal designsystem react components",
|
||||
"author": "NAV Designsystem team",
|
||||
"license": "MIT",
|
||||
@@ -35,7 +35,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@navikt/ds-icons": "^0.8.17",
|
||||
"@navikt/ds-react": "^0.19.9",
|
||||
"@navikt/ds-react": "^0.19.14",
|
||||
"@popperjs/core": "^2.10.1",
|
||||
"classnames": "^2.3.1",
|
||||
"copy-to-clipboard": "^3.3.1",
|
||||
|
||||
@@ -14,6 +14,23 @@ interface MenuProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
* onClose callback
|
||||
*/
|
||||
onClose?: () => void;
|
||||
/**
|
||||
* Default dialog-placement on open
|
||||
* @default "bottom-end"
|
||||
*/
|
||||
placement?:
|
||||
| "top"
|
||||
| "bottom"
|
||||
| "right"
|
||||
| "left"
|
||||
| "top-start"
|
||||
| "top-end"
|
||||
| "bottom-start"
|
||||
| "bottom-end"
|
||||
| "right-start"
|
||||
| "right-end"
|
||||
| "left-start"
|
||||
| "left-end";
|
||||
}
|
||||
|
||||
export interface MenuType<Props = MenuProps>
|
||||
@@ -25,7 +42,7 @@ export interface MenuType<Props = MenuProps>
|
||||
}
|
||||
|
||||
export const Menu = forwardRef<HTMLDivElement, MenuProps>(
|
||||
({ className, onClose, ...rest }, ref) => {
|
||||
({ className, onClose, placement = "bottom-end", ...rest }, ref) => {
|
||||
const context = useContext(DropdownContext);
|
||||
|
||||
if (!context) {
|
||||
@@ -38,8 +55,8 @@ export const Menu = forwardRef<HTMLDivElement, MenuProps>(
|
||||
return (
|
||||
<Popover
|
||||
{...rest}
|
||||
placement={placement}
|
||||
ref={ref}
|
||||
placement="bottom-end"
|
||||
arrow={false}
|
||||
className={cl("navdsi-dropdown__menu", className)}
|
||||
offset={-4}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<h1 align="center">
|
||||
<img src="https://avatars.githubusercontent.com/u/11848947?s=200&v=4" />
|
||||
<br/>Aksel
|
||||
<br/>Designsystemet
|
||||
</h1>
|
||||
|
||||
<div align="center">
|
||||
|
||||
@@ -3095,7 +3095,7 @@ __metadata:
|
||||
resolution: "@navikt/ds-react-internal@workspace:@navikt/internal/react"
|
||||
dependencies:
|
||||
"@navikt/ds-icons": ^0.8.17
|
||||
"@navikt/ds-react": ^0.19.8
|
||||
"@navikt/ds-react": ^0.19.13
|
||||
"@popperjs/core": ^2.10.1
|
||||
"@types/node": ^17.0.35
|
||||
classnames: ^2.3.1
|
||||
@@ -3111,7 +3111,7 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@navikt/ds-react@*, @navikt/ds-react@^0.19.8, @navikt/ds-react@workspace:@navikt/core/react":
|
||||
"@navikt/ds-react@*, @navikt/ds-react@^0.19.13, @navikt/ds-react@workspace:@navikt/core/react":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-react@workspace:@navikt/core/react"
|
||||
dependencies:
|
||||
|
||||
Reference in new issue
Block a user