mirror of
https://github.com/navikt/aksel.git
synced 2026-10-17 11:12:03 +00:00
Compare commits
12
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
2a468378dd | ||
|
|
626b9069d2 | ||
|
|
49c5e8f284 | ||
|
|
0d549cb87b | ||
|
|
c0ef8a4d7d | ||
|
|
3daa36efa7 | ||
|
|
16bec93d1f | ||
|
|
ad033d9b1a | ||
|
|
b55ead2301 | ||
|
|
92532dd586 | ||
|
|
5d3361615a | ||
|
|
7779d93bf3 |
No files matched your search
@@ -0,0 +1,12 @@
|
||||
import { Meta, Canvas } from "@storybook/addon-docs";
|
||||
|
||||
<Meta title="ds-react(deprecated)/intro" />
|
||||
|
||||
# Utdaterte pakker
|
||||
|
||||
På sikt vil komponentene under bli flyttet ut av ds-react eller erstattes av andre komponenter
|
||||
|
||||
- PageHeader -> @navikt/ds-react-navno
|
||||
- MicroCard -> @navikt/ds-react-navno
|
||||
|
||||
- StepIndicator -> Horisontal `<Stepper />`
|
||||
@@ -0,0 +1,10 @@
|
||||
.rowgap {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.colgap {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-direction: column;
|
||||
}
|
||||
+1
-1
@@ -10,7 +10,7 @@ module.exports = {
|
||||
return config;
|
||||
},
|
||||
devServer: { stats: "errors-only" },
|
||||
stories: () => getStories(),
|
||||
stories: () => [...getStories(), "./*.stories.mdx"],
|
||||
addons: [
|
||||
"@storybook/addon-docs",
|
||||
"@storybook/addon-a11y",
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import "@navikt/ds-css/index.css";
|
||||
import "@navikt/ds-css-internal/index.css";
|
||||
import "./layout.css";
|
||||
import { initialize, mswDecorator } from "msw-storybook-addon";
|
||||
|
||||
initialize();
|
||||
@@ -7,12 +8,14 @@ initialize();
|
||||
export const decorators = [mswDecorator];
|
||||
|
||||
export const parameters = {
|
||||
actions: { argTypesRegex: "^on[A-Z].*" },
|
||||
/* actions: { argTypesRegex: "^on[A-Z].*" }, */
|
||||
options: {
|
||||
storySort: {
|
||||
method: "",
|
||||
order: [],
|
||||
order: ["ds-icons", "ds-react", ["Default"]],
|
||||
locales: "",
|
||||
},
|
||||
},
|
||||
viewMode: "docs",
|
||||
layout: "centered",
|
||||
};
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-css",
|
||||
"version": "0.16.15",
|
||||
"version": "0.16.16",
|
||||
"private": false,
|
||||
"description": "Css for NAV Designsystem components",
|
||||
"author": "NAV Designsystem team",
|
||||
@@ -21,7 +21,7 @@
|
||||
"watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-tokens": "^0.8.6",
|
||||
"@navikt/ds-tokens": "^0.8.7",
|
||||
"normalize.css": "^8.0.1",
|
||||
"postcss": "^8.3.6",
|
||||
"postcss-cli": "^8.3.1",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-icons",
|
||||
"version": "0.8.7",
|
||||
"version": "0.8.8",
|
||||
"private": false,
|
||||
"description": "NAVs egne ikoner i SVG og React format",
|
||||
"repository": {
|
||||
@@ -37,7 +37,7 @@
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^17.0.30",
|
||||
"react": "^17.0.0"
|
||||
"react": "^17.0.0 | ^18.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@svgr/cli": "^5.5.0",
|
||||
@@ -49,7 +49,7 @@
|
||||
"dotenv": "^10.0.0",
|
||||
"lodash.kebabcase": "^4.1.1",
|
||||
"lodash.startcase": "4.4.0",
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
"react": "^18.0.0",
|
||||
"rimraf": "3.0.2",
|
||||
"sharp": "0.29.1",
|
||||
"ts-node": "^10.4.0"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-react",
|
||||
"version": "0.17.19",
|
||||
"version": "0.17.20",
|
||||
"private": false,
|
||||
"description": "NAV designsystem react components",
|
||||
"author": "NAV Designsystem team",
|
||||
@@ -36,7 +36,7 @@
|
||||
"dependencies": {
|
||||
"@floating-ui/react-dom": "0.6.0",
|
||||
"@material-ui/core": "^4.12.3",
|
||||
"@navikt/ds-icons": "^0.8.7",
|
||||
"@navikt/ds-icons": "^0.8.8",
|
||||
"@popperjs/core": "^2.10.1",
|
||||
"@radix-ui/react-tabs": "0.1.5",
|
||||
"@radix-ui/react-toggle-group": "0.1.5",
|
||||
@@ -48,25 +48,25 @@
|
||||
"uuid": "^8.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/jest-dom": "^5.14.1",
|
||||
"@testing-library/react": "^12.1.0",
|
||||
"@testing-library/user-event": "^13.2.1",
|
||||
"@types/faker": "^5.5.8",
|
||||
"@testing-library/jest-dom": "^5.16.0",
|
||||
"@testing-library/react": "^13.0.0",
|
||||
"@testing-library/user-event": "^14.0.0",
|
||||
"@types/faker": "5.5.8",
|
||||
"@types/jest": "^27.0.1",
|
||||
"@types/react-collapse": "^5.0.1",
|
||||
"@types/react-modal": "^3.13.1",
|
||||
"@types/styled-components": "^5.1.14",
|
||||
"copyfiles": "^2.4.1",
|
||||
"faker": "^5.5.3",
|
||||
"jest": "^27.2.0",
|
||||
"react-router-dom": "^6.1.0",
|
||||
"faker": "5.5.3",
|
||||
"jest": "^27.5.0",
|
||||
"react-router-dom": "^6.3.0",
|
||||
"rimraf": "3.0.2",
|
||||
"styled-components": "^5.3.1",
|
||||
"swr": "^1.1.2",
|
||||
"ts-jest": "^27.0.5"
|
||||
"ts-jest": "^27.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^17.0.30",
|
||||
"react": "^17.0.0"
|
||||
"react": "^17.0.0 | ^18.0.0"
|
||||
}
|
||||
}
|
||||
@@ -5,7 +5,7 @@ import AccordionItem from "./AccordionItem";
|
||||
import { Accordion } from ".";
|
||||
|
||||
export default {
|
||||
title: "ds-react/accordion",
|
||||
title: "ds-react/Accordion",
|
||||
component: Accordion,
|
||||
subcomponents: {
|
||||
AccordionItem,
|
||||
@@ -14,77 +14,89 @@ export default {
|
||||
},
|
||||
};
|
||||
|
||||
export const All = () => {
|
||||
const Content = () => (
|
||||
<Accordion.Content>
|
||||
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
|
||||
laboris voluptate officia pariatur.Lorem est ex anim velit occaecat nisi qui
|
||||
nostrud sit consectetur consectetur officia nostrud ullamco. Est ex duis
|
||||
proident nostrud elit qui laborum anim minim eu eiusmod. Veniam in nostrud
|
||||
sunt tempor velit incididunt sint ex dolor qui velit id eu. Deserunt magna
|
||||
sunt velit in. Est exercitation id cillum qui do. Minim adipisicing nostrud
|
||||
commodo proident occaecat aliquip nulla anim proident reprehenderit. Magna
|
||||
ipsum officia veniam cupidatat duis veniam dolore reprehenderit mollit
|
||||
velit.Ut consequat commodo minim occaecat id pariatur. Nisi enim tempor
|
||||
laborum commodo. Tempor sit quis nostrud eu cupidatat sunt commodo
|
||||
reprehenderit irure deserunt eiusmod ipsum. Exercitation quis commodo cillum
|
||||
eiusmod eiusmod. Do laborum qui proident commodo adipisicing eiusmod id.
|
||||
</Accordion.Content>
|
||||
);
|
||||
|
||||
export const Default = (props) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const Item = () =>
|
||||
props.controlled ? (
|
||||
<Accordion.Item
|
||||
open={open}
|
||||
renderContentWhenClosed={props.renderContentWhenClosed}
|
||||
>
|
||||
<Accordion.Header onClick={() => setOpen(!open)}>
|
||||
Accordion header text
|
||||
</Accordion.Header>
|
||||
<Content />
|
||||
</Accordion.Item>
|
||||
) : (
|
||||
<Accordion.Item renderContentWhenClosed={props.renderContentWhenClosed}>
|
||||
<Accordion.Header>Accordion header text</Accordion.Header>
|
||||
<Content />
|
||||
</Accordion.Item>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<h1>Accordion</h1>
|
||||
<h2>Controlled</h2>
|
||||
<Accordion>
|
||||
<Accordion.Item open={open}>
|
||||
<Accordion.Header onClick={() => setOpen(!open)}>
|
||||
Accordion header text
|
||||
</Accordion.Header>
|
||||
<Accordion.Content>
|
||||
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
|
||||
officia laboris voluptate officia pariatur.Lorem est ex anim velit
|
||||
occaecat nisi qui nostrud sit consectetur consectetur officia
|
||||
nostrud ullamco. Est ex duis proident nostrud elit qui laborum anim
|
||||
minim eu eiusmod. Veniam in nostrud sunt tempor velit incididunt
|
||||
sint ex dolor qui velit id eu. Deserunt magna sunt velit in. Est
|
||||
exercitation id cillum qui do. Minim adipisicing nostrud commodo
|
||||
proident occaecat aliquip nulla anim proident reprehenderit. Magna
|
||||
ipsum officia veniam cupidatat duis veniam dolore reprehenderit
|
||||
mollit velit.Ut consequat commodo minim occaecat id pariatur. Nisi
|
||||
enim tempor laborum commodo. Tempor sit quis nostrud eu cupidatat
|
||||
sunt commodo reprehenderit irure deserunt eiusmod ipsum.
|
||||
Exercitation quis commodo cillum eiusmod eiusmod. Do laborum qui
|
||||
proident commodo adipisicing eiusmod id.
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
<h2>Un-controlled</h2>
|
||||
<Accordion>
|
||||
<Accordion.Item>
|
||||
<Accordion.Header>Accordion header text</Accordion.Header>
|
||||
<Accordion.Content>
|
||||
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
|
||||
officia laboris voluptate officia pariatur.Lorem est ex anim velit
|
||||
occaecat nisi qui nostrud sit consectetur consectetur officia
|
||||
nostrud ullamco. Est ex duis proident nostrud elit qui laborum anim
|
||||
minim eu eiusmod. Veniam in nostrud sunt tempor velit incididunt
|
||||
sint ex dolor qui velit id eu. Deserunt magna sunt velit in. Est
|
||||
exercitation id cillum qui do. Minim adipisicing nostrud commodo
|
||||
proident occaecat aliquip nulla anim proident reprehenderit. Magna
|
||||
ipsum officia veniam cupidatat duis veniam dolore reprehenderit
|
||||
mollit velit.Ut consequat commodo minim occaecat id pariatur. Nisi
|
||||
enim tempor laborum commodo. Tempor sit quis nostrud eu cupidatat
|
||||
sunt commodo reprehenderit irure deserunt eiusmod ipsum.
|
||||
Exercitation quis commodo cillum eiusmod eiusmod. Do laborum qui
|
||||
proident commodo adipisicing eiusmod id.
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
<Accordion.Item>
|
||||
<Accordion.Header>Accordion header text</Accordion.Header>
|
||||
<Accordion.Content>
|
||||
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
|
||||
officia laboris voluptate officia pariatur.Lorem est ex anim velit
|
||||
occaecat nisi qui nostrud sit consectetur consectetur officia
|
||||
nostrud ullamco. Est ex duis proident nostrud elit qui laborum anim
|
||||
minim eu eiusmod. Veniam in nostrud sunt tempor velit incididunt
|
||||
sint ex dolor qui velit id eu. Deserunt magna sunt velit in. Est
|
||||
exercitation id cillum qui do. Minim adipisicing nostrud commodo
|
||||
proident occaecat aliquip nulla anim proident reprehenderit. Magna
|
||||
ipsum officia veniam cupidatat duis veniam dolore reprehenderit
|
||||
mollit velit.Ut consequat commodo minim occaecat id pariatur. Nisi
|
||||
enim tempor laborum commodo. Tempor sit quis nostrud eu cupidatat
|
||||
sunt commodo reprehenderit irure deserunt eiusmod ipsum.
|
||||
Exercitation quis commodo cillum eiusmod eiusmod. Do laborum qui
|
||||
proident commodo adipisicing eiusmod id.
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
</>
|
||||
<Accordion>
|
||||
{[...Array(props.nItems ? props.nItems : 2)].map((_, y) => (
|
||||
<Item key={y} />
|
||||
))}
|
||||
</Accordion>
|
||||
);
|
||||
};
|
||||
|
||||
Default.args = {
|
||||
controlled: false,
|
||||
renderContentWhenClosed: false,
|
||||
nItems: 2,
|
||||
};
|
||||
|
||||
export const Controlled = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [open2, setOpen2] = useState(false);
|
||||
|
||||
return (
|
||||
<Accordion>
|
||||
<Accordion.Item open={open}>
|
||||
<Accordion.Header onClick={() => setOpen(!open)}>
|
||||
Accordion header text
|
||||
</Accordion.Header>
|
||||
<Content />
|
||||
</Accordion.Item>
|
||||
<Accordion.Item open={open2}>
|
||||
<Accordion.Header onClick={() => setOpen2(!open2)}>
|
||||
Accordion header text
|
||||
</Accordion.Header>
|
||||
<Content />
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
);
|
||||
};
|
||||
|
||||
export const Uncontrolled = () => (
|
||||
<Accordion>
|
||||
<Accordion.Item>
|
||||
<Accordion.Header>Accordion header text</Accordion.Header>
|
||||
<Content />
|
||||
</Accordion.Item>
|
||||
<Accordion.Item>
|
||||
<Accordion.Header>Accordion header text</Accordion.Header>
|
||||
<Content />
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
);
|
||||
@@ -1,9 +1,9 @@
|
||||
import React from "react";
|
||||
import { Alert } from ".";
|
||||
import { BodyLong, Heading } from "..";
|
||||
import { BodyLong, Heading as DsHeading } from "..";
|
||||
|
||||
export default {
|
||||
title: "ds-react/alert",
|
||||
title: "ds-react/Alert",
|
||||
component: Alert,
|
||||
};
|
||||
|
||||
@@ -14,111 +14,101 @@ const variants: Array<"error" | "warning" | "info" | "success"> = [
|
||||
"success",
|
||||
];
|
||||
|
||||
export const All = () => {
|
||||
export const Default = (props) => (
|
||||
<Alert
|
||||
variant={props.variant}
|
||||
size={props.size}
|
||||
fullWidth={props.fullWidth}
|
||||
inline={props.inline}
|
||||
>
|
||||
{props.children}
|
||||
</Alert>
|
||||
);
|
||||
|
||||
Default.args = {
|
||||
variant: "info",
|
||||
children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
|
||||
};
|
||||
|
||||
export const Small = () => {
|
||||
return (
|
||||
<>
|
||||
<h1>Alert</h1>
|
||||
<div className="colgap">
|
||||
{variants.map((variant, i) => (
|
||||
<Alert key={variant} variant={variant}>
|
||||
<Alert key={variant} variant={variant} size="small">
|
||||
{new Array(i + 1).fill(
|
||||
"Id elit esse enim reprehenderit enim nisi veniam nostrud."
|
||||
)}
|
||||
</Alert>
|
||||
))}
|
||||
<h2>Small</h2>
|
||||
<div>
|
||||
{variants.map((variant, i) => (
|
||||
<Alert key={variant} variant={variant} size="small">
|
||||
{new Array(i + 1).fill(
|
||||
"Id elit esse enim reprehenderit enim nisi veniam nostrud."
|
||||
)}
|
||||
</Alert>
|
||||
))}
|
||||
</div>
|
||||
<h2>Alert fullWidth</h2>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const FullWidth = () => {
|
||||
return (
|
||||
<div className="colgap">
|
||||
{variants.map((variant, i) => (
|
||||
<Alert fullWidth key={variant} variant={variant}>
|
||||
<Alert key={variant} variant={variant} fullWidth>
|
||||
{new Array(i + 1).fill(
|
||||
"Id elit esse enim reprehenderit enim nisi veniam nostrud."
|
||||
)}
|
||||
</Alert>
|
||||
))}
|
||||
<h2>Small</h2>
|
||||
<div>
|
||||
{variants.map((variant, i) => (
|
||||
<Alert fullWidth key={variant} variant={variant} size="small">
|
||||
{new Array(i + 1).fill(
|
||||
"Id elit esse enim reprehenderit enim nisi veniam nostrud."
|
||||
)}
|
||||
</Alert>
|
||||
))}
|
||||
</div>
|
||||
<h2>Inline</h2>
|
||||
<div>
|
||||
{variants.map((variant, i) => (
|
||||
<Alert inline key={variant} variant={variant}>
|
||||
{new Array(i + 1).fill(
|
||||
"Id elit esse enim reprehenderit enim nisi veniam nostrud."
|
||||
)}
|
||||
</Alert>
|
||||
))}
|
||||
</div>
|
||||
<h2>Inline small</h2>
|
||||
<div>
|
||||
{variants.map((variant, i) => (
|
||||
<Alert inline key={variant} variant={variant} size="small">
|
||||
{new Array(i + 1).fill(
|
||||
"Id elit esse enim reprehenderit enim nisi veniam nostrud."
|
||||
)}
|
||||
</Alert>
|
||||
))}
|
||||
</div>
|
||||
<h2>Med Heading</h2>
|
||||
<div>
|
||||
{variants.map((variant, i) => (
|
||||
<Alert key={variant} variant={variant}>
|
||||
<Heading spacing size="small" level="3">
|
||||
Aliquip duis est in commodo pariatur
|
||||
</Heading>
|
||||
<BodyLong spacing>
|
||||
Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
|
||||
laboris ex. Labore ex occaecat proident qui qui fugiat magna.
|
||||
Fugiat sint commodo consequat eu aute.
|
||||
</BodyLong>
|
||||
<Heading level="4" size="xsmall" spacing>
|
||||
Ullamco eiusmod Lorem eiusmod eu.
|
||||
</Heading>
|
||||
<BodyLong>
|
||||
Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
|
||||
laboris ex. Labore ex occaecat proident qui qui fugiat magna.
|
||||
Fugiat sint commodo consequat eu aute.
|
||||
</BodyLong>
|
||||
</Alert>
|
||||
))}
|
||||
</div>
|
||||
<h2>Med Heading small</h2>
|
||||
<div>
|
||||
{variants.map((variant, i) => (
|
||||
<Alert key={variant} variant={variant} size="small">
|
||||
<Heading spacing size="small" level="3">
|
||||
Aliquip duis est in commodo pariatur
|
||||
</Heading>
|
||||
<BodyLong spacing>
|
||||
Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
|
||||
laboris ex. Labore ex occaecat proident qui qui fugiat magna.
|
||||
Fugiat sint commodo consequat eu aute.
|
||||
</BodyLong>
|
||||
<Heading level="4" size="xsmall" spacing>
|
||||
Ullamco eiusmod Lorem eiusmod eu.
|
||||
</Heading>
|
||||
<BodyLong>
|
||||
Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
|
||||
laboris ex. Labore ex occaecat proident qui qui fugiat magna.
|
||||
Fugiat sint commodo consequat eu aute.
|
||||
</BodyLong>
|
||||
</Alert>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
{variants.map((variant, i) => (
|
||||
<Alert key={variant} variant={variant} fullWidth size="small">
|
||||
{new Array(i + 1).fill(
|
||||
"Id elit esse enim reprehenderit enim nisi veniam nostrud."
|
||||
)}
|
||||
</Alert>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Inline = () => {
|
||||
return (
|
||||
<div className="colgap">
|
||||
{variants.map((variant, i) => (
|
||||
<Alert key={variant} variant={variant} inline>
|
||||
{new Array(i + 1).fill(
|
||||
"Id elit esse enim reprehenderit enim nisi veniam nostrud."
|
||||
)}
|
||||
</Alert>
|
||||
))}
|
||||
{variants.map((variant, i) => (
|
||||
<Alert key={variant} variant={variant} inline size="small">
|
||||
{new Array(i + 1).fill(
|
||||
"Id elit esse enim reprehenderit enim nisi veniam nostrud."
|
||||
)}
|
||||
</Alert>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Heading = () => {
|
||||
return (
|
||||
<div className="colgap">
|
||||
<Alert variant="info">
|
||||
<DsHeading spacing size="small" level="3">
|
||||
Aliquip duis est in commodo pariatur
|
||||
</DsHeading>
|
||||
<BodyLong>
|
||||
Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
|
||||
laboris ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat
|
||||
sint commodo consequat eu aute.
|
||||
</BodyLong>
|
||||
</Alert>
|
||||
<Alert variant="info" size="small">
|
||||
<DsHeading spacing size="xsmall" level="3">
|
||||
Aliquip duis est in commodo pariatur
|
||||
</DsHeading>
|
||||
<BodyLong>
|
||||
Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
|
||||
laboris ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat
|
||||
sint commodo consequat eu aute.
|
||||
</BodyLong>
|
||||
</Alert>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,30 +1,29 @@
|
||||
import React, { useState } from "react";
|
||||
import { Star } from "@navikt/ds-icons";
|
||||
import React from "react";
|
||||
import { Button } from "./index";
|
||||
import { Success } from "@navikt/ds-icons";
|
||||
|
||||
export default {
|
||||
title: "ds-react/button",
|
||||
title: "ds-react/Button",
|
||||
component: Button,
|
||||
parameters: {
|
||||
chromatic: { delay: 300 },
|
||||
},
|
||||
argTypes: {
|
||||
variant: {
|
||||
control: {
|
||||
type: "radio",
|
||||
options: ["primary", "secondary", "tertiary", "danger"],
|
||||
},
|
||||
},
|
||||
size: {
|
||||
control: {
|
||||
type: "radio",
|
||||
options: ["medium", "small"],
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Section = ({ children }) => (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: 16,
|
||||
gridAutoFlow: "column",
|
||||
justifyContent: "start",
|
||||
padding: 24,
|
||||
paddingLeft: 0,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
const variants: Array<"primary" | "secondary" | "tertiary" | "danger"> = [
|
||||
"primary",
|
||||
"secondary",
|
||||
@@ -39,119 +38,132 @@ const varSwitch = {
|
||||
danger: "Danger",
|
||||
};
|
||||
|
||||
export const All = () => {
|
||||
const [loadingState, setLoadingState] = useState(true);
|
||||
const [content, setContent] = useState<string>("");
|
||||
|
||||
const toggleLoading = () => {
|
||||
setLoadingState(!loadingState);
|
||||
};
|
||||
|
||||
export const Default = (props) => {
|
||||
return (
|
||||
<div style={{ paddingLeft: "1rem" }}>
|
||||
<h1>Button</h1>
|
||||
<Section>
|
||||
{variants.map((variant) => (
|
||||
<Button key={variant} variant={variant}>
|
||||
{varSwitch[variant]}
|
||||
</Button>
|
||||
))}
|
||||
</Section>
|
||||
<h2>disabled</h2>
|
||||
<Section>
|
||||
{variants.map((variant) => (
|
||||
<Button key={variant} variant={variant} disabled>
|
||||
{varSwitch[variant]}
|
||||
</Button>
|
||||
))}
|
||||
</Section>
|
||||
<h2>As link</h2>
|
||||
<Section>
|
||||
{variants.map((variant) => (
|
||||
<Button as="a" key={variant} variant={variant} href="the-link">
|
||||
{varSwitch[variant]}
|
||||
</Button>
|
||||
))}
|
||||
</Section>
|
||||
<h2>Small</h2>
|
||||
<Section>
|
||||
{variants.map((variant) => (
|
||||
<Button key={variant} variant={variant} size="small">
|
||||
{varSwitch[variant]}
|
||||
</Button>
|
||||
))}
|
||||
</Section>
|
||||
<h2>Xsmall</h2>
|
||||
<Section>
|
||||
{variants.map((variant) => (
|
||||
<Button key={variant} variant={variant} size="xsmall">
|
||||
{varSwitch[variant]}
|
||||
</Button>
|
||||
))}
|
||||
</Section>
|
||||
<h2>Button w/icon</h2>
|
||||
<Section>
|
||||
{variants.map((variant) => (
|
||||
<Button key={variant} variant={variant}>
|
||||
{variant} <Success />
|
||||
</Button>
|
||||
))}
|
||||
</Section>
|
||||
<Section>
|
||||
{variants.map((variant) => (
|
||||
<Button key={variant} variant={variant}>
|
||||
<span className="navds-sr-only">Success ikon</span>
|
||||
<Success />
|
||||
</Button>
|
||||
))}
|
||||
</Section>
|
||||
<h2>Small w/icon</h2>
|
||||
<Section>
|
||||
{variants.map((variant) => (
|
||||
<Button key={variant} variant={variant} size="small">
|
||||
<Success /> {variant}
|
||||
</Button>
|
||||
))}
|
||||
</Section>
|
||||
<Section>
|
||||
{variants.map((variant) => (
|
||||
<Button key={variant} variant={variant} size="small">
|
||||
<span className="navds-sr-only">Success ikon</span>
|
||||
<Success />
|
||||
</Button>
|
||||
))}
|
||||
</Section>
|
||||
<h2>Button w/loader</h2>
|
||||
<Button onClick={toggleLoading}>Toggle loaders</Button>
|
||||
<Button onClick={() => setContent((content) => `${content} wat`)}>
|
||||
Change content
|
||||
</Button>
|
||||
<Section>
|
||||
{variants.map((variant) => (
|
||||
<Button
|
||||
key={variant}
|
||||
variant={variant}
|
||||
loading={loadingState}
|
||||
onClick={toggleLoading}
|
||||
>
|
||||
{content || varSwitch[variant]}
|
||||
</Button>
|
||||
))}
|
||||
</Section>
|
||||
<h2>Small w/loader</h2>
|
||||
<Section>
|
||||
{variants.map((variant) => (
|
||||
<Button
|
||||
key={variant}
|
||||
variant={variant}
|
||||
size="small"
|
||||
loading={loadingState}
|
||||
onClick={toggleLoading}
|
||||
>
|
||||
{varSwitch[variant]}
|
||||
</Button>
|
||||
))}
|
||||
</Section>
|
||||
</div>
|
||||
<Button variant={props.variant} size={props.size} loading={props.loading}>
|
||||
{props.icon ? <Star /> : null}
|
||||
{props.children}
|
||||
{props.icon ? <Star /> : null}
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
Default.args = {
|
||||
icon: false,
|
||||
loading: false,
|
||||
children: "Knapp",
|
||||
};
|
||||
|
||||
export const Small = () => (
|
||||
<div className="rowgap">
|
||||
{variants.map((variant) => (
|
||||
<Button key={variant} variant={variant} size="small">
|
||||
{varSwitch[variant]}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
export const XSmall = () => (
|
||||
<div className="rowgap">
|
||||
{variants.map((variant) => (
|
||||
<Button key={variant} variant={variant} size="xsmall">
|
||||
{varSwitch[variant]}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
export const Loading = () => (
|
||||
<div className="colgap">
|
||||
<div className="rowgap">
|
||||
{variants.map((variant) => (
|
||||
<Button key={variant} variant={variant} loading>
|
||||
{varSwitch[variant]}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
<div className="rowgap">
|
||||
{variants.map((variant) => (
|
||||
<Button key={variant} variant={variant} loading size="small">
|
||||
{varSwitch[variant]}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
<div className="rowgap">
|
||||
{variants.map((variant) => (
|
||||
<Button key={variant} variant={variant} loading size="xsmall">
|
||||
{varSwitch[variant]}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const Icon = () => (
|
||||
<div className="colgap">
|
||||
<div className="rowgap">
|
||||
{variants.map((variant) => (
|
||||
<Button key={variant} variant={variant}>
|
||||
<Star />
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
<div className="rowgap">
|
||||
{variants.map((variant) => (
|
||||
<Button key={variant} variant={variant} size="small">
|
||||
<Star />
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
<div className="rowgap">
|
||||
{variants.map((variant) => (
|
||||
<Button key={variant} variant={variant} size="xsmall">
|
||||
<Star />
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const IconWText = () => (
|
||||
<div className="colgap">
|
||||
<div className="rowgap">
|
||||
{variants.map((variant) => (
|
||||
<Button key={variant} variant={variant}>
|
||||
<Star />
|
||||
{varSwitch[variant]}
|
||||
<Star />
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
<div className="rowgap">
|
||||
{variants.map((variant) => (
|
||||
<Button key={variant} variant={variant} size="small">
|
||||
<Star />
|
||||
{varSwitch[variant]}
|
||||
<Star />
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
<div className="rowgap">
|
||||
{variants.map((variant) => (
|
||||
<Button key={variant} variant={variant} size="xsmall">
|
||||
<Star />
|
||||
{varSwitch[variant]}
|
||||
<Star />
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const Link = () => (
|
||||
<div className="rowgap">
|
||||
{variants.map((variant) => (
|
||||
<Button key={variant} variant={variant} as="a" href="#thecakeisalie">
|
||||
{varSwitch[variant]}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Meta, Canvas } from "@storybook/addon-docs";
|
||||
import { MicroCard } from "../index.ts";
|
||||
|
||||
<Meta title="ds-react/card/intro" />
|
||||
<Meta title="ds-react(deprecated)/card/intro" />
|
||||
|
||||
# Hvordan ta i bruk card
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@ import React from "react";
|
||||
import { MicroCard } from "../index";
|
||||
import { Meta } from "@storybook/react/types-6-0";
|
||||
export default {
|
||||
title: "ds-react/card",
|
||||
title: "ds-react(deprecated)/card",
|
||||
component: MicroCard,
|
||||
} as Meta;
|
||||
|
||||
|
||||
@@ -6,11 +6,12 @@ import { Checkbox, CheckboxGroup } from ".";
|
||||
|
||||
const firstArgumentOfFirstCall = (fn: jest.Mock) => fn.mock.calls[0][0];
|
||||
|
||||
test("checkbox group chains onChange calls", () => {
|
||||
test("checkbox group chains onChange calls", async () => {
|
||||
const onGroupChange = jest.fn();
|
||||
const onChange = jest.fn();
|
||||
const value = faker.datatype.string();
|
||||
const label = faker.datatype.string();
|
||||
const user = userEvent.setup();
|
||||
|
||||
render(
|
||||
<CheckboxGroup legend="legend" onChange={onGroupChange}>
|
||||
@@ -20,7 +21,7 @@ test("checkbox group chains onChange calls", () => {
|
||||
</CheckboxGroup>
|
||||
);
|
||||
|
||||
userEvent.click(screen.getByLabelText(label));
|
||||
await user.click(screen.getByLabelText(label));
|
||||
|
||||
expect(onGroupChange).toBeCalledTimes(1);
|
||||
expect(onGroupChange).toBeCalledWith([value]);
|
||||
@@ -36,21 +37,24 @@ describe("Checkbox handles controlled-state correctly", () => {
|
||||
</CheckboxGroup>
|
||||
);
|
||||
|
||||
test("Checkbox is still checked after click when controlled", () => {
|
||||
test("Checkbox is still checked after click when controlled", async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<CheckboxComponent value={["value1", "value2"]} />);
|
||||
userEvent.click(screen.getByLabelText("label1"));
|
||||
userEvent.click(screen.getByLabelText("label2"));
|
||||
await user.click(screen.getByLabelText("label1"));
|
||||
await user.click(screen.getByLabelText("label2"));
|
||||
|
||||
expect((screen.getByLabelText("label1") as HTMLInputElement).checked).toBe(
|
||||
true
|
||||
);
|
||||
|
||||
expect((screen.getByLabelText("label2") as HTMLInputElement).checked).toBe(
|
||||
true
|
||||
);
|
||||
});
|
||||
|
||||
test("onChange called with expected values", () => {
|
||||
test("onChange called with expected values", async () => {
|
||||
const onGroupChange = jest.fn();
|
||||
const user = userEvent.setup();
|
||||
|
||||
render(
|
||||
<CheckboxComponent
|
||||
@@ -59,11 +63,11 @@ describe("Checkbox handles controlled-state correctly", () => {
|
||||
/>
|
||||
);
|
||||
|
||||
userEvent.click(screen.getByLabelText("label1"));
|
||||
await user.click(screen.getByLabelText("label1"));
|
||||
|
||||
expect(onGroupChange).lastCalledWith(["value2"]);
|
||||
|
||||
userEvent.click(screen.getByLabelText("label2"));
|
||||
await user.click(screen.getByLabelText("label2"));
|
||||
|
||||
expect(onGroupChange).lastCalledWith(["value1"]);
|
||||
});
|
||||
|
||||
@@ -31,7 +31,9 @@ describe("Controlled RadioGroup", () => {
|
||||
});
|
||||
|
||||
describe("Uncontrolled RadioGroup", () => {
|
||||
test("handles state correctly", () => {
|
||||
test("handles state correctly", async () => {
|
||||
const user = userEvent.setup();
|
||||
|
||||
render(<Group />);
|
||||
|
||||
const input1 = screen.getByLabelText(label1) as HTMLInputElement;
|
||||
@@ -40,13 +42,14 @@ describe("Uncontrolled RadioGroup", () => {
|
||||
expect(input1.checked).toBe(false);
|
||||
expect(input2.checked).toBe(false);
|
||||
|
||||
userEvent.click(screen.getByLabelText(label2));
|
||||
await user.click(screen.getByLabelText(label2));
|
||||
|
||||
expect(input1.checked).toBe(false);
|
||||
expect(input2.checked).toBe(true);
|
||||
});
|
||||
|
||||
test("handles defaultValue correctly", () => {
|
||||
test("handles defaultValue correctly", async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<Group defaultValue={value1} />);
|
||||
|
||||
const input1 = screen.getByLabelText(label1) as HTMLInputElement;
|
||||
@@ -55,7 +58,7 @@ describe("Uncontrolled RadioGroup", () => {
|
||||
expect(input1.checked).toBe(true);
|
||||
expect(input2.checked).toBe(false);
|
||||
|
||||
userEvent.click(screen.getByLabelText(label2));
|
||||
await user.click(screen.getByLabelText(label2));
|
||||
|
||||
expect(input1.checked).toBe(false);
|
||||
expect(input2.checked).toBe(true);
|
||||
|
||||
@@ -2,7 +2,7 @@ import { Meta, Canvas } from "@storybook/addon-docs";
|
||||
import { PageHeader } from "../index";
|
||||
import { illustrationPictogram } from "./pictogram";
|
||||
|
||||
<Meta title="ds-react/page-header/intro" />
|
||||
<Meta title="ds-react(deprecated)/page-header/intro" />
|
||||
|
||||
# Hvordan ta i bruk PageHeader
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@ import { PageHeader } from "../index";
|
||||
import { Meta } from "@storybook/react/types-6-0";
|
||||
import { illustrationPictogram } from "./pictogram";
|
||||
export default {
|
||||
title: "ds-react/page-header",
|
||||
title: "ds-react(deprecated)/page-header",
|
||||
component: PageHeader,
|
||||
} as Meta;
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@ import { Meta, Canvas } from "@storybook/addon-docs";
|
||||
import { StepIndicator } from "..";
|
||||
import { Example } from "./Example";
|
||||
|
||||
<Meta title="ds-react/step-indicator/intro" />
|
||||
<Meta title="ds-react(deprecated)/step-indicator/intro" />
|
||||
|
||||
# Hvordan ta i bruk StepIndicator
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ import { Meta } from "@storybook/react/types-6-0";
|
||||
import { Link, HashRouter as Router, useLocation } from "react-router-dom";
|
||||
|
||||
export default {
|
||||
title: "ds-react/step-indicator",
|
||||
title: "ds-react(deprecated)/step-indicator",
|
||||
component: StepIndicator,
|
||||
} as Meta;
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-tailwind",
|
||||
"version": "0.1.8",
|
||||
"version": "0.1.9",
|
||||
"private": false,
|
||||
"description": "Auto-generated tailwind config based on @navikt/ds-tokens",
|
||||
"author": "NAV Designsystem team",
|
||||
@@ -23,7 +23,7 @@
|
||||
"directory": "@navikt/core/tailwind"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-tokens": "^0.8.6",
|
||||
"@navikt/ds-tokens": "^0.8.7",
|
||||
"@types/jest": "^27.0.1",
|
||||
"jest": "^27.2.0",
|
||||
"lodash": "^4.17.21",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-tokens",
|
||||
"version": "0.8.6",
|
||||
"version": "0.8.7",
|
||||
"private": false,
|
||||
"description": "Auto-generated design-tokens for NAV design-systems framework",
|
||||
"author": "NAV Designsystem team",
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
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 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>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,45 @@
|
||||
import React from "react";
|
||||
import { Meta } from "@storybook/react/types-6-0";
|
||||
import * as tokens from "../dist/tokens.js";
|
||||
|
||||
export default {
|
||||
title: "ds-tokens/Colors",
|
||||
} as Meta;
|
||||
|
||||
export const Global = () => {
|
||||
const globalColors: { [key: string]: string } = Object.entries(tokens).reduce(
|
||||
(old, [key, val]) =>
|
||||
key.includes("GlobalColor") ? { ...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>
|
||||
);
|
||||
};
|
||||
|
||||
export const Semantic = () => {
|
||||
const globalColors: { [key: string]: string } = Object.entries(tokens).reduce(
|
||||
(old, [key, val]) =>
|
||||
key.includes("SemanticColor") ? { ...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>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,35 @@
|
||||
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 },
|
||||
{}
|
||||
);
|
||||
|
||||
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>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,43 @@
|
||||
import React from "react";
|
||||
import { Meta } from "@storybook/react/types-6-0";
|
||||
import * as tokens from "../dist/tokens.js";
|
||||
|
||||
export default {
|
||||
title: "ds-tokens/Spacing",
|
||||
} as Meta;
|
||||
|
||||
export const Spacing = () => {
|
||||
const allSpacing: { [key: string]: string } = Object.entries(tokens).reduce(
|
||||
(old, [key, val]) =>
|
||||
key.startsWith("NavdsSpacing") ? { ...old, [key]: val } : { ...old },
|
||||
{}
|
||||
);
|
||||
|
||||
const sortObject = Object.fromEntries(
|
||||
Object.entries(allSpacing).sort(
|
||||
(a, b) =>
|
||||
Number(a[0].replace("NavdsSpacing", "")) -
|
||||
Number(b[0].replace("NavdsSpacing", ""))
|
||||
)
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="colgap">
|
||||
{Object.entries(sortObject).map(([key, val]) => (
|
||||
<div>
|
||||
{key}
|
||||
<div
|
||||
key={key}
|
||||
style={{
|
||||
width: val,
|
||||
height: 40,
|
||||
backgroundColor: "thistle",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,6 +1,8 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"jsx": "react",
|
||||
"esModuleInterop": true,
|
||||
"resolveJsonModule": true
|
||||
}
|
||||
},
|
||||
"include": ["./stories"]
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-react-internal",
|
||||
"version": "0.12.19",
|
||||
"version": "0.12.21",
|
||||
"private": false,
|
||||
"description": "NAV internal designsystem react components",
|
||||
"author": "NAV Designsystem team",
|
||||
@@ -33,8 +33,8 @@
|
||||
"watch": "tsc --watch -p tsconfig.esm.json"
|
||||
},
|
||||
"dependencies": {
|
||||
"@navikt/ds-icons": "^0.8.7",
|
||||
"@navikt/ds-react": "^0.17.19",
|
||||
"@navikt/ds-icons": "^0.8.8",
|
||||
"@navikt/ds-react": "^0.17.20",
|
||||
"@popperjs/core": "^2.10.1",
|
||||
"classnames": "^2.3.1",
|
||||
"copy-to-clipboard": "^3.3.1",
|
||||
@@ -45,6 +45,6 @@
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^17.0.30",
|
||||
"react": "^17.0.0"
|
||||
"react": "^17.0.0 | ^18.0.0"
|
||||
}
|
||||
}
|
||||
@@ -16,7 +16,7 @@ export interface CopyToClipboardProps extends Omit<ButtonProps, "children"> {
|
||||
*/
|
||||
copyText: string;
|
||||
/**
|
||||
* Description of text, examples: "personnummer", "navn", "epost" etc.
|
||||
* Description of text. Example: "Kopierte personnummer til clipboard"
|
||||
*/
|
||||
popoverText: string;
|
||||
/**
|
||||
@@ -24,6 +24,11 @@ export interface CopyToClipboardProps extends Omit<ButtonProps, "children"> {
|
||||
* @default "right"
|
||||
*/
|
||||
popoverPlacement?: Placement;
|
||||
/**
|
||||
* Copy button title attribute
|
||||
* @default `Kopier ${copyText}`
|
||||
*/
|
||||
title?: string;
|
||||
}
|
||||
|
||||
const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
|
||||
@@ -35,6 +40,7 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
|
||||
className,
|
||||
size = "medium",
|
||||
popoverPlacement = "right",
|
||||
title,
|
||||
...rest
|
||||
},
|
||||
ref
|
||||
@@ -53,8 +59,6 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
|
||||
};
|
||||
}, [openPopover]);
|
||||
|
||||
const title = `Kopier ${copyText}`;
|
||||
|
||||
const handleClick = () => {
|
||||
copy(copyText);
|
||||
setOpenPopover(true);
|
||||
@@ -65,14 +69,12 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
|
||||
<Button
|
||||
ref={mergedRef}
|
||||
variant="secondary"
|
||||
title={title}
|
||||
className={cl("navdsi-copy-to-clipboard", className)}
|
||||
onClick={handleClick}
|
||||
size={size}
|
||||
{...rest}
|
||||
>
|
||||
<Copy title="Fil ikon for kopiering" />
|
||||
{children ? children : <span className="navds-sr-only">{title}</span>}
|
||||
<Copy title={title ?? `Kopier ${copyText}`} />
|
||||
</Button>
|
||||
<Popover
|
||||
role="alert"
|
||||
|
||||
@@ -23,12 +23,12 @@
|
||||
Repoet inneholder følgende:
|
||||
|
||||
- [Felleskomponenter](https://github.com/navikt/nav-frontend-moduler/tree/master/@navikt/)
|
||||
- [Storybook](https://5f801fb2aea7820022de2936-rognyzqcpw.chromatic.com/) for komponenter.
|
||||
- [Storybook](https://master--5f801fb2aea7820022de2936.chromatic.com/) for komponenter.
|
||||
- [Gammel dokumentasjon](https://old-design-nav.vercel.app) for komponenter.
|
||||
|
||||
## Dokumentasjon
|
||||
|
||||
[Dokumentasjon side forvaltes i dette repoet](https://github.com/navikt/verktoykassen)
|
||||
[Dokumentasjon side forvaltes i dette repoet](https://github.com/navikt/aksel-website)
|
||||
|
||||
## Endringslogg
|
||||
|
||||
|
||||
+2
-2
@@ -96,14 +96,14 @@
|
||||
"eslint-plugin-react-hooks": "^4.1.2",
|
||||
"prettier": "2.2.1",
|
||||
"prop-types": "^15.5.10",
|
||||
"react": "^17.0.0",
|
||||
"react": "^18.0.0",
|
||||
"stylelint": "^13.13.1",
|
||||
"stylelint-config-standard": "^22.0.0",
|
||||
"stylelint-config-prettier": "^8.0.2",
|
||||
"typescript": "^4.3.5",
|
||||
"webpack": "^5.4.0",
|
||||
"webpack-cli": "^4.2.0",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-dom": "^18.0.0",
|
||||
"msw": "^0.36.5",
|
||||
"msw-storybook-addon": "^1.6.0"
|
||||
}
|
||||
|
||||
@@ -1110,7 +1110,7 @@
|
||||
core-js-pure "^3.20.2"
|
||||
regenerator-runtime "^0.13.4"
|
||||
|
||||
"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.8", "@babel/runtime@^7.15.3", "@babel/runtime@^7.16.3", "@babel/runtime@^7.16.7", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
|
||||
"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.8", "@babel/runtime@^7.15.3", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.8", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
|
||||
version "7.17.8"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.8.tgz#3e56e4aff81befa55ac3ac6a0967349fd1c5bca2"
|
||||
integrity sha512-dQpEpK0O9o6lj6oPu0gRDbbnk+4LeHlNcBpspf6Olzt3GIX4P1lWF1gS+pHLDFlaJvbR6q7jCfQ08zA4QJBnmA==
|
||||
@@ -2275,15 +2275,15 @@
|
||||
write-file-atomic "^3.0.3"
|
||||
|
||||
"@material-ui/core@^4.12.3":
|
||||
version "4.12.3"
|
||||
resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.3.tgz#80d665caf0f1f034e52355c5450c0e38b099d3ca"
|
||||
integrity sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw==
|
||||
version "4.12.4"
|
||||
resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.4.tgz#4ac17488e8fcaf55eb6a7f5efb2a131e10138a73"
|
||||
integrity sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.4.4"
|
||||
"@material-ui/styles" "^4.11.4"
|
||||
"@material-ui/system" "^4.12.1"
|
||||
"@material-ui/styles" "^4.11.5"
|
||||
"@material-ui/system" "^4.12.2"
|
||||
"@material-ui/types" "5.1.0"
|
||||
"@material-ui/utils" "^4.11.2"
|
||||
"@material-ui/utils" "^4.11.3"
|
||||
"@types/react-transition-group" "^4.2.0"
|
||||
clsx "^1.0.4"
|
||||
hoist-non-react-statics "^3.3.2"
|
||||
@@ -2292,15 +2292,15 @@
|
||||
react-is "^16.8.0 || ^17.0.0"
|
||||
react-transition-group "^4.4.0"
|
||||
|
||||
"@material-ui/styles@^4.11.4":
|
||||
version "4.11.4"
|
||||
resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.4.tgz#eb9dfccfcc2d208243d986457dff025497afa00d"
|
||||
integrity sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew==
|
||||
"@material-ui/styles@^4.11.5":
|
||||
version "4.11.5"
|
||||
resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.5.tgz#19f84457df3aafd956ac863dbe156b1d88e2bbfb"
|
||||
integrity sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.4.4"
|
||||
"@emotion/hash" "^0.8.0"
|
||||
"@material-ui/types" "5.1.0"
|
||||
"@material-ui/utils" "^4.11.2"
|
||||
"@material-ui/utils" "^4.11.3"
|
||||
clsx "^1.0.4"
|
||||
csstype "^2.5.2"
|
||||
hoist-non-react-statics "^3.3.2"
|
||||
@@ -2314,13 +2314,13 @@
|
||||
jss-plugin-vendor-prefixer "^10.5.1"
|
||||
prop-types "^15.7.2"
|
||||
|
||||
"@material-ui/system@^4.12.1":
|
||||
version "4.12.1"
|
||||
resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.12.1.tgz#2dd96c243f8c0a331b2bb6d46efd7771a399707c"
|
||||
integrity sha512-lUdzs4q9kEXZGhbN7BptyiS1rLNHe6kG9o8Y307HCvF4sQxbCgpL2qi+gUk+yI8a2DNk48gISEQxoxpgph0xIw==
|
||||
"@material-ui/system@^4.12.2":
|
||||
version "4.12.2"
|
||||
resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.12.2.tgz#f5c389adf3fce4146edd489bf4082d461d86aa8b"
|
||||
integrity sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.4.4"
|
||||
"@material-ui/utils" "^4.11.2"
|
||||
"@material-ui/utils" "^4.11.3"
|
||||
csstype "^2.5.2"
|
||||
prop-types "^15.7.2"
|
||||
|
||||
@@ -2329,10 +2329,10 @@
|
||||
resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2"
|
||||
integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==
|
||||
|
||||
"@material-ui/utils@^4.11.2":
|
||||
version "4.11.2"
|
||||
resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.2.tgz#f1aefa7e7dff2ebcb97d31de51aecab1bb57540a"
|
||||
integrity sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==
|
||||
"@material-ui/utils@^4.11.3":
|
||||
version "4.11.3"
|
||||
resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.3.tgz#232bd86c4ea81dab714f21edad70b7fdf0253942"
|
||||
integrity sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.4.4"
|
||||
prop-types "^15.7.2"
|
||||
@@ -2613,9 +2613,9 @@
|
||||
integrity sha512-Aq58f5HiWdyDlFffbbSjAlv596h/cOnt2DO1w3DOC7OJ5EHs0hd/nycJfiu9RJbT6Yk6F1knnRRXNSpxoIVZ9Q==
|
||||
|
||||
"@pmmmwh/react-refresh-webpack-plugin@^0.5.1":
|
||||
version "0.5.4"
|
||||
resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.4.tgz#df0d0d855fc527db48aac93c218a0bf4ada41f99"
|
||||
integrity sha512-zZbZeHQDnoTlt2AF+diQT0wsSXpvWiaIOZwBRdltNFhG1+I3ozyaw7U/nBiUwyJ0D+zwdXp0E3bWOl38Ag2BMw==
|
||||
version "0.5.5"
|
||||
resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.5.tgz#e77aac783bd079f548daa0a7f080ab5b5a9741ca"
|
||||
integrity sha512-RbG7h6TuP6nFFYKJwbcToA1rjC1FyPg25NR2noAZ0vKI+la01KTSRPkuVPE+U88jXv7javx2JHglUcL1MHcshQ==
|
||||
dependencies:
|
||||
ansi-html-community "^0.0.8"
|
||||
common-path-prefix "^3.0.0"
|
||||
@@ -3882,7 +3882,7 @@
|
||||
dependencies:
|
||||
defer-to-connect "^1.0.1"
|
||||
|
||||
"@testing-library/dom@^8.0.0":
|
||||
"@testing-library/dom@^8.5.0":
|
||||
version "8.12.0"
|
||||
resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.12.0.tgz#fef5e545533fb084175dda6509ee71d7d2f72e23"
|
||||
integrity sha512-rBrJk5WjI02X1edtiUcZhgyhgBhiut96r5Jp8J5qktKdcvLcZpKDW8i2hkGMMItxrghjXuQ5AM6aE0imnFawaw==
|
||||
@@ -3896,7 +3896,7 @@
|
||||
lz-string "^1.4.4"
|
||||
pretty-format "^27.0.2"
|
||||
|
||||
"@testing-library/jest-dom@^5.14.1":
|
||||
"@testing-library/jest-dom@^5.16.0":
|
||||
version "5.16.3"
|
||||
resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.16.3.tgz#b76851a909586113c20486f1679ffb4d8ec27bfa"
|
||||
integrity sha512-u5DfKj4wfSt6akfndfu1eG06jsdyA/IUrlX2n3pyq5UXgXMhXY+NJb8eNK/7pqPWAhCKsCGWDdDO0zKMKAYkEA==
|
||||
@@ -3911,21 +3911,19 @@
|
||||
lodash "^4.17.15"
|
||||
redent "^3.0.0"
|
||||
|
||||
"@testing-library/react@^12.1.0":
|
||||
version "12.1.4"
|
||||
resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-12.1.4.tgz#09674b117e550af713db3f4ec4c0942aa8bbf2c0"
|
||||
integrity sha512-jiPKOm7vyUw311Hn/HlNQ9P8/lHNtArAx0PisXyFixDDvfl8DbD6EUdbshK5eqauvBSvzZd19itqQ9j3nferJA==
|
||||
"@testing-library/react@^13.0.0":
|
||||
version "13.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-13.0.0.tgz#8cdaf4667c6c2b082eb0513731551e9db784e8bc"
|
||||
integrity sha512-p0lYA1M7uoEmk2LnCbZLGmHJHyH59sAaZVXChTXlyhV/PRW9LoIh4mdf7tiXsO8BoNG+vN8UnFJff1hbZeXv+w==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.12.5"
|
||||
"@testing-library/dom" "^8.0.0"
|
||||
"@testing-library/dom" "^8.5.0"
|
||||
"@types/react-dom" "*"
|
||||
|
||||
"@testing-library/user-event@^13.2.1":
|
||||
version "13.5.0"
|
||||
resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-13.5.0.tgz#69d77007f1e124d55314a2b73fd204b333b13295"
|
||||
integrity sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.12.5"
|
||||
"@testing-library/user-event@^14.0.0":
|
||||
version "14.0.4"
|
||||
resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.0.4.tgz#5b430a9c27f25078bff4471661b755115d0db9d4"
|
||||
integrity sha512-VBZe5lcUsmrQyOwIFvqOxLBoaTw1/Qy4Ek+VgmFYs719bs2SxUp42vbsb7ATlQDkHdj4OIQlucfpwxe5WoG1jA==
|
||||
|
||||
"@tootallnate/once@1":
|
||||
version "1.1.2"
|
||||
@@ -4028,10 +4026,10 @@
|
||||
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.51.tgz#cfd70924a25a3fd32b218e5e420e6897e1ac4f40"
|
||||
integrity sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==
|
||||
|
||||
"@types/faker@^5.5.8":
|
||||
version "5.5.9"
|
||||
resolved "https://registry.yarnpkg.com/@types/faker/-/faker-5.5.9.tgz#588ede92186dc557bff8341d294335d50d255f0c"
|
||||
integrity sha512-uCx6mP3UY5SIO14XlspxsGjgaemrxpssJI0Ol+GfhxtcKpv9pgRZYsS4eeKeHVLje6Qtc8lGszuBI461+gVZBA==
|
||||
"@types/faker@5.5.8":
|
||||
version "5.5.8"
|
||||
resolved "https://registry.yarnpkg.com/@types/faker/-/faker-5.5.8.tgz#6649adfdfdbb0acf95361fc48f2d0ca6e88bd1cf"
|
||||
integrity sha512-bsl0rYsaZVHlZkynL5O04q6YXDmVjcid6MbOHWqvtE2WWs/EKhp0qchDDhVWlWyQXUffX1G83X9LnMxRl8S/Mw==
|
||||
|
||||
"@types/glob@*", "@types/glob@^7.1.1":
|
||||
version "7.2.0"
|
||||
@@ -5988,9 +5986,9 @@ camelize@^1.0.0:
|
||||
integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
|
||||
|
||||
caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001317:
|
||||
version "1.0.30001323"
|
||||
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001323.tgz#a451ff80dec7033016843f532efda18f02eec011"
|
||||
integrity sha512-e4BF2RlCVELKx8+RmklSEIVub1TWrmdhvA5kEUueummz1XyySW0DVk+3x9HyhU9MuWTa2BhqLgEuEmUwASAdCA==
|
||||
version "1.0.30001325"
|
||||
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001325.tgz#2b4ad19b77aa36f61f2eaf72e636d7481d55e606"
|
||||
integrity sha512-sB1bZHjseSjDtijV1Hb7PB2Zd58Kyx+n/9EotvZ4Qcz2K3d0lWB8dB4nb8wN/TsOGFq3UuAm0zQZNQ4SoR7TrQ==
|
||||
|
||||
capital-case@^1.0.4:
|
||||
version "1.0.4"
|
||||
@@ -8319,7 +8317,7 @@ fake-tag@^2.0.0:
|
||||
resolved "https://registry.yarnpkg.com/fake-tag/-/fake-tag-2.0.0.tgz#08ea5df950ef8635833186247f569e8406ffb4da"
|
||||
integrity sha512-QDz+8qiNQ9AfBZ31EXlID5JIbUkU3e1nXDWk4tidFzd2gy8XJaEUW1HCuDY6DUy6t2Y0nvhD6PsUc+2WYy5w0w==
|
||||
|
||||
faker@^5.5.3:
|
||||
faker@5.5.3:
|
||||
version "5.5.3"
|
||||
resolved "https://registry.yarnpkg.com/faker/-/faker-5.5.3.tgz#c57974ee484431b25205c2c8dc09fda861e51e0e"
|
||||
integrity sha512-wLTv2a28wjUyWkbnX7u/ABZBkUkIF2fCd73V6P2oFqEGEktDfzWx4UxrSqtPRw0xPRAcjeAOIiJWqZm3pP4u3g==
|
||||
@@ -10121,9 +10119,9 @@ is-npm@^5.0.0:
|
||||
integrity sha512-WW/rQLOazUq+ST/bCAVBp/2oMERWLsR7OrKyt052dNDk4DHcDE0/7QSXITlmi+VBcV13DfIbysG3tZJm5RfdBA==
|
||||
|
||||
is-number-object@^1.0.4:
|
||||
version "1.0.6"
|
||||
resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.6.tgz#6a7aaf838c7f0686a50b4553f7e54a96494e89f0"
|
||||
integrity sha512-bEVOqiRcvo3zO1+G2lVMy+gkkEm9Yh7cDMRusKKu5ZJKPUYSJwICTKZrNKHA2EbSP0Tu0+6B/emsYNHZyn6K8g==
|
||||
version "1.0.7"
|
||||
resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.7.tgz#59d50ada4c45251784e9904f5246c742f07a42fc"
|
||||
integrity sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==
|
||||
dependencies:
|
||||
has-tostringtag "^1.0.0"
|
||||
|
||||
@@ -10212,9 +10210,11 @@ is-set@^2.0.2:
|
||||
integrity sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==
|
||||
|
||||
is-shared-array-buffer@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.1.tgz#97b0c85fbdacb59c9c446fe653b82cf2b5b7cfe6"
|
||||
integrity sha512-IU0NmyknYZN0rChcKhRO1X8LYz5Isj/Fsqh8NJOSf+N/hCOTwy29F32Ik7a+QszE63IdvmwdTPDd6cZ5pg4cwA==
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz#8f259c573b60b6a32d4058a1a07430c0a7344c79"
|
||||
integrity sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==
|
||||
dependencies:
|
||||
call-bind "^1.0.2"
|
||||
|
||||
is-ssh@^1.3.0:
|
||||
version "1.3.3"
|
||||
@@ -10861,7 +10861,7 @@ jest-worker@^27.4.5, jest-worker@^27.5.1:
|
||||
merge-stream "^2.0.0"
|
||||
supports-color "^8.0.0"
|
||||
|
||||
jest@^27.2.0:
|
||||
jest@^27.2.0, jest@^27.5.0:
|
||||
version "27.5.1"
|
||||
resolved "https://registry.yarnpkg.com/jest/-/jest-27.5.1.tgz#dadf33ba70a779be7a6fc33015843b51494f63fc"
|
||||
integrity sha512-Yn0mADZB89zTtjkPJEXwrac3LHudkQMR+Paqa8uxJHCBr9agxztUifWCyiYrjhMPBoUVBjyny0I7XH6ozDr7QQ==
|
||||
@@ -12144,9 +12144,9 @@ modify-values@^1.0.0:
|
||||
integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==
|
||||
|
||||
moment@^2.18.1:
|
||||
version "2.29.1"
|
||||
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
|
||||
integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
|
||||
version "2.29.2"
|
||||
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.2.tgz#00910c60b20843bcba52d37d58c628b47b1f20e4"
|
||||
integrity sha512-UgzG4rvxYpN15jgCmVJwac49h9ly9NurikMWGPdVxm8GZD6XjkKPxDTjQQ43gtGgnV3X0cAyWDdP2Wexoquifg==
|
||||
|
||||
move-concurrently@^1.0.1:
|
||||
version "1.0.1"
|
||||
@@ -13399,11 +13399,11 @@ pnp-webpack-plugin@1.6.4:
|
||||
ts-pnp "^1.1.6"
|
||||
|
||||
polished@^4.0.5:
|
||||
version "4.1.4"
|
||||
resolved "https://registry.yarnpkg.com/polished/-/polished-4.1.4.tgz#640293ba834109614961a700fdacbb6599fb12d0"
|
||||
integrity sha512-Nq5Mbza+Auo7N3sQb1QMFaQiDO+4UexWuSGR7Cjb4Sw11SZIJcrrFtiZ+L0jT9MBsUsxDboHVASbCLbE1rnECg==
|
||||
version "4.2.1"
|
||||
resolved "https://registry.yarnpkg.com/polished/-/polished-4.2.1.tgz#e38cdf4244b3bea63f77b0f8ab2335e22a66bd08"
|
||||
integrity sha512-vRkUnHBwVX7kIeCzCghcLCWoDenV+sV7lkItnmTc7bb6Uzbe8ogU1FxqEW8+dXCxUX8YW8vusQ0HTk2yES7bfQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.16.7"
|
||||
"@babel/runtime" "^7.17.8"
|
||||
|
||||
popper.js@1.16.1-lts:
|
||||
version "1.16.1-lts"
|
||||
@@ -13688,9 +13688,9 @@ prettier@2.2.1:
|
||||
integrity sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w==
|
||||
|
||||
prettier@^2.1.2:
|
||||
version "2.6.1"
|
||||
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.1.tgz#d472797e0d7461605c1609808e27b80c0f9cfe17"
|
||||
integrity sha512-8UVbTBYGwN37Bs9LERmxCPjdvPxlEowx2urIL6urHzdb3SDq4B/Z6xLFCblrSnE4iKWcS6ziJ3aOYrc1kz/E2A==
|
||||
version "2.6.2"
|
||||
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.2.tgz#e26d71a18a74c3d0f0597f55f01fb6c06c206032"
|
||||
integrity sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==
|
||||
|
||||
pretty-error@^2.1.1:
|
||||
version "2.1.2"
|
||||
@@ -14065,14 +14065,13 @@ react-docgen@^5.0.0:
|
||||
node-dir "^0.1.10"
|
||||
strip-indent "^3.0.0"
|
||||
|
||||
react-dom@^17.0.2:
|
||||
version "17.0.2"
|
||||
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
|
||||
integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
|
||||
react-dom@^18.0.0:
|
||||
version "18.0.0"
|
||||
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0.tgz#26b88534f8f1dbb80853e1eabe752f24100d8023"
|
||||
integrity sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==
|
||||
dependencies:
|
||||
loose-envify "^1.1.0"
|
||||
object-assign "^4.1.1"
|
||||
scheduler "^0.20.2"
|
||||
scheduler "^0.21.0"
|
||||
|
||||
react-draggable@^4.4.3:
|
||||
version "4.4.4"
|
||||
@@ -14168,7 +14167,7 @@ react-refresh@^0.11.0:
|
||||
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
|
||||
integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
|
||||
|
||||
react-router-dom@^6.0.0, react-router-dom@^6.1.0:
|
||||
react-router-dom@^6.0.0, react-router-dom@^6.3.0:
|
||||
version "6.3.0"
|
||||
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.3.0.tgz#a0216da813454e521905b5fa55e0e5176123f43d"
|
||||
integrity sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==
|
||||
@@ -14223,13 +14222,12 @@ react-transition-group@^4.4.0:
|
||||
loose-envify "^1.4.0"
|
||||
prop-types "^15.6.2"
|
||||
|
||||
"react@^16.8.0 || ^17.0.0", react@^17.0.0:
|
||||
version "17.0.2"
|
||||
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
|
||||
integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
|
||||
react@^18.0.0:
|
||||
version "18.0.0"
|
||||
resolved "https://registry.yarnpkg.com/react/-/react-18.0.0.tgz#b468736d1f4a5891f38585ba8e8fb29f91c3cb96"
|
||||
integrity sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==
|
||||
dependencies:
|
||||
loose-envify "^1.1.0"
|
||||
object-assign "^4.1.1"
|
||||
|
||||
read-cache@^1.0.0:
|
||||
version "1.0.0"
|
||||
@@ -14873,13 +14871,12 @@ saxes@^5.0.1:
|
||||
dependencies:
|
||||
xmlchars "^2.2.0"
|
||||
|
||||
scheduler@^0.20.2:
|
||||
version "0.20.2"
|
||||
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
|
||||
integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
|
||||
scheduler@^0.21.0:
|
||||
version "0.21.0"
|
||||
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0.tgz#6fd2532ff5a6d877b6edb12f00d8ab7e8f308820"
|
||||
integrity sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==
|
||||
dependencies:
|
||||
loose-envify "^1.1.0"
|
||||
object-assign "^4.1.1"
|
||||
|
||||
schema-utils@2.7.0:
|
||||
version "2.7.0"
|
||||
@@ -16332,7 +16329,7 @@ ts-dedent@^2.0.0:
|
||||
resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-2.2.0.tgz#39e4bd297cd036292ae2394eb3412be63f563bb5"
|
||||
integrity sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==
|
||||
|
||||
ts-jest@^27.0.5:
|
||||
ts-jest@^27.0.5, ts-jest@^27.1.0:
|
||||
version "27.1.4"
|
||||
resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-27.1.4.tgz#84d42cf0f4e7157a52e7c64b1492c46330943e00"
|
||||
integrity sha512-qjkZlVPWVctAezwsOD1OPzbZ+k7zA5z3oxII4dGdZo5ggX/PL7kvwTM0pXTr10fAtbiVpJaL3bWd502zAhpgSQ==
|
||||
@@ -17185,9 +17182,9 @@ webpack@4:
|
||||
webpack-sources "^1.4.1"
|
||||
|
||||
webpack@^5.4.0, webpack@^5.9.0:
|
||||
version "5.70.0"
|
||||
resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.70.0.tgz#3461e6287a72b5e6e2f4872700bc8de0d7500e6d"
|
||||
integrity sha512-ZMWWy8CeuTTjCxbeaQI21xSswseF2oNOwc70QSKNePvmxE7XW36i7vpBMYZFAUHPwQiEbNGCEYIOOlyRbdGmxw==
|
||||
version "5.71.0"
|
||||
resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.71.0.tgz#b01fcf379570b8c5ee06ca06c829ca168c951884"
|
||||
integrity sha512-g4dFT7CFG8LY0iU5G8nBL6VlkT21Z7dcYDpJAEJV5Q1WLb9UwnFbrem1k7K52ILqEmomN7pnzWFxxE6SlDY56A==
|
||||
dependencies:
|
||||
"@types/eslint-scope" "^3.7.3"
|
||||
"@types/estree" "^0.0.51"
|
||||
|
||||
Reference in new issue
Block a user