mirror of
https://github.com/navikt/aksel.git
synced 2026-10-13 09:12:03 +00:00
Compare commits
5
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 github-actions[bot]andgithub-actions[bot]
|
273a0cd78f | ||
|
Halvor Haugan
|
9ab920a288 | ||
|
Ken
|
03cdeff3a0 | ||
|
github-actions[bot]andgithub-actions[bot]
|
a8160ada1c | ||
|
Martin BerglundandKen
|
efad85b383 |
No files matched your search
@@ -1,5 +1,9 @@
|
||||
# @navikt/aksel-icons
|
||||
|
||||
## 5.3.0
|
||||
|
||||
## 5.2.1
|
||||
|
||||
## 5.2.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/aksel-icons",
|
||||
"version": "5.2.0",
|
||||
"version": "5.3.0",
|
||||
"author": "Aksel | NAV",
|
||||
"homepage": "https://aksel.nav.no/ikoner",
|
||||
"repository": {
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
# @navikt/aksel-stylelint
|
||||
|
||||
## 5.3.0
|
||||
|
||||
## 5.2.1
|
||||
|
||||
## 5.2.0
|
||||
|
||||
## 5.1.0
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/aksel-stylelint",
|
||||
"version": "5.2.0",
|
||||
"version": "5.3.0",
|
||||
"author": "Aksel | NAV",
|
||||
"homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
|
||||
"repository": {
|
||||
@@ -35,8 +35,8 @@
|
||||
"dev": "yarn watch:lint"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-css": "^5.2.0",
|
||||
"@navikt/ds-tokens": "^5.2.0",
|
||||
"@navikt/ds-css": "^5.3.0",
|
||||
"@navikt/ds-tokens": "^5.3.0",
|
||||
"@types/jest": "^29.0.0",
|
||||
"concurrently": "7.2.1",
|
||||
"copyfiles": "2.4.1",
|
||||
|
||||
@@ -1,5 +1,19 @@
|
||||
# @navikt/aksel
|
||||
|
||||
## 5.3.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [[`03cdeff3a`](https://github.com/navikt/aksel/commit/03cdeff3a0053e91c45204df92168ae0e824d31c)]:
|
||||
- @navikt/ds-css@5.3.0
|
||||
|
||||
## 5.2.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [[`efad85b38`](https://github.com/navikt/aksel/commit/efad85b38340b31aae1b7ed1496e9c55303062dd)]:
|
||||
- @navikt/ds-css@5.2.1
|
||||
|
||||
## 5.2.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/aksel",
|
||||
"version": "5.2.0",
|
||||
"version": "5.3.0",
|
||||
"description": "Aksel command line interface. Handles css-imports, codemods and more",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"license": "MIT",
|
||||
@@ -29,7 +29,7 @@
|
||||
},
|
||||
"homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
|
||||
"dependencies": {
|
||||
"@navikt/ds-css": "5.2.0",
|
||||
"@navikt/ds-css": "5.3.0",
|
||||
"axios": "1.3.6",
|
||||
"chalk": "4.1.0",
|
||||
"clipboardy": "^2.3.0",
|
||||
|
||||
@@ -1,5 +1,17 @@
|
||||
# @navikt/ds-css
|
||||
|
||||
## 5.3.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- Typography: Oppdatert med typo-klasser for `textColor`, `weight`, `align`, `visuallyHidden` og `truncated`. ([#2211](https://github.com/navikt/aksel/pull/2211))
|
||||
|
||||
## 5.2.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Font: Fikset henting av italic-font ([#2220](https://github.com/navikt/aksel/pull/2220))
|
||||
|
||||
## 5.2.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url("https://cdn.nav.no/aksel/fonts/SourceSans3-italic-latin-semibold") format("woff2");
|
||||
src: url("https://cdn.nav.no/aksel/fonts/SourceSans3-italic-latin-semibold.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Source Sans Pro";
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-css",
|
||||
"version": "5.2.0",
|
||||
"version": "5.3.0",
|
||||
"description": "CSS for NAV Designsystem",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"keywords": [
|
||||
@@ -27,7 +27,7 @@
|
||||
"css:get-version": "node config/get-version.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-tokens": "^5.2.0",
|
||||
"@navikt/ds-tokens": "^5.3.0",
|
||||
"cssnano": "6.0.0",
|
||||
"fast-glob": "3.2.11",
|
||||
"lodash": "4.17.21",
|
||||
|
||||
@@ -103,6 +103,16 @@
|
||||
margin-bottom: var(--a-spacing-7);
|
||||
}
|
||||
|
||||
.navds-body-long--large {
|
||||
font-size: var(--a-font-size-xlarge);
|
||||
letter-spacing: -0.0013em;
|
||||
line-height: var(--a-font-line-height-xlarge);
|
||||
}
|
||||
|
||||
.navds-body-long--large.navds-typo--spacing {
|
||||
margin-bottom: var(--a-spacing-10);
|
||||
}
|
||||
|
||||
.navds-body-long--small {
|
||||
font-size: var(--a-font-size-medium);
|
||||
letter-spacing: 0.002em;
|
||||
@@ -125,6 +135,16 @@
|
||||
margin-bottom: var(--a-spacing-3);
|
||||
}
|
||||
|
||||
.navds-body-short--large {
|
||||
font-size: var(--a-font-size-xlarge);
|
||||
letter-spacing: -0.0013em;
|
||||
line-height: var(--a-font-line-height-large);
|
||||
}
|
||||
|
||||
.navds-body-short--large.navds-typo--spacing {
|
||||
margin-bottom: var(--a-spacing-4);
|
||||
}
|
||||
|
||||
.navds-body-short--small {
|
||||
font-size: var(--a-font-size-medium);
|
||||
letter-spacing: 0.002em;
|
||||
@@ -190,3 +210,47 @@
|
||||
.navds-error-message {
|
||||
color: var(--ac-typo-error-text, var(--a-text-danger));
|
||||
}
|
||||
|
||||
.navds-typo--truncate {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.navds-typo--semibold {
|
||||
font-weight: var(--a-font-weight-bold);
|
||||
}
|
||||
|
||||
.navds-typo--align-start {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.navds-typo--align-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.navds-typo--align-end {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.navds-typo--visually-hidden {
|
||||
border: 0 !important;
|
||||
clip: rect(0, 0, 0, 0) !important;
|
||||
height: 1px !important;
|
||||
margin: -1px !important;
|
||||
overflow: hidden !important;
|
||||
padding: 0 !important;
|
||||
top: 0 !important;
|
||||
position: absolute !important;
|
||||
white-space: nowrap !important;
|
||||
width: 1px !important;
|
||||
}
|
||||
|
||||
.navds-typo--color-subtle {
|
||||
color: var(--a-text-subtle);
|
||||
}
|
||||
|
||||
[data-theme="dark"].navds-typo--color-subtle,
|
||||
[data-theme="dark"] .navds-typo--color-subtle {
|
||||
--a-text-subtle: var(--a-gray-300);
|
||||
}
|
||||
@@ -1,5 +1,29 @@
|
||||
# @navikt/ds-react
|
||||
|
||||
## 5.3.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- Heading: Oppdatert med props `textColor`, `align`, `visuallyHidden`. ([#2211](https://github.com/navikt/aksel/pull/2211))
|
||||
|
||||
- Label: Oppdatert med props `textColor` og `visuallyHidden`. ([#2211](https://github.com/navikt/aksel/pull/2211))
|
||||
|
||||
- BodyLong, BodyShort, Detail: Oppdatert med props `textColor`,`weight`,`align`, `visuallyHidden` og `truncated`. ([#2211](https://github.com/navikt/aksel/pull/2211))
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- :wheelchair: Textarea: Skjermleser-spesifikk tekst leses opp sammenhengende ([#2216](https://github.com/navikt/aksel/pull/2216))
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/aksel-icons@5.3.0
|
||||
|
||||
## 5.2.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/aksel-icons@5.2.1
|
||||
|
||||
## 5.2.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-react",
|
||||
"version": "5.2.0",
|
||||
"version": "5.3.0",
|
||||
"description": "Aksel react-components for NAV designsystem",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"license": "MIT",
|
||||
@@ -38,7 +38,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@floating-ui/react": "0.24.1",
|
||||
"@navikt/aksel-icons": "^5.2.0",
|
||||
"@navikt/aksel-icons": "^5.3.0",
|
||||
"@radix-ui/react-tabs": "1.0.0",
|
||||
"@radix-ui/react-toggle-group": "1.0.0",
|
||||
"clsx": "^1.2.1",
|
||||
|
||||
@@ -171,7 +171,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||
{hasMaxLength && (
|
||||
<>
|
||||
<span id={maxLengthId} className="navds-sr-only">
|
||||
Tekstområde med plass til {maxLength} tegn.
|
||||
{`Tekstområde med plass til ${maxLength} tegn.`}
|
||||
</span>
|
||||
<Counter
|
||||
maxLength={maxLength}
|
||||
|
||||
@@ -1,22 +1,21 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import cl from "clsx";
|
||||
import { OverridableComponent } from "../util/OverridableComponent";
|
||||
import { TypoProps } from "./types";
|
||||
import { typoClassNames } from "./util";
|
||||
|
||||
export interface BodyLongProps
|
||||
extends React.HTMLAttributes<HTMLParagraphElement> {
|
||||
extends TypoProps,
|
||||
React.HTMLAttributes<HTMLParagraphElement> {
|
||||
/**
|
||||
* medium: 18px, small: 16px
|
||||
* large: 20px, medium: 18px, small: 16px
|
||||
* @default "medium"
|
||||
*/
|
||||
size?: "medium" | "small";
|
||||
size?: "large" | "medium" | "small";
|
||||
/**
|
||||
* Paragraph text
|
||||
* Text
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* Adds margin-bottom
|
||||
*/
|
||||
spacing?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -28,8 +27,10 @@ export interface BodyLongProps
|
||||
*
|
||||
* @example
|
||||
* ```jsx
|
||||
* <BodyLong level="1" size="xlarge">
|
||||
* Pengestøtte når du er syk
|
||||
* <BodyLong>
|
||||
* Hvis du ikke bor sammen med begge foreldrene dine,
|
||||
* kan du ha rett til barnebidrag fra en eller begge foreldre mens du
|
||||
* fullfører videregående skole eller tilsvarende.
|
||||
* </BodyLong>
|
||||
* ```
|
||||
*/
|
||||
@@ -38,16 +39,36 @@ export const BodyLong: OverridableComponent<
|
||||
HTMLParagraphElement
|
||||
> = forwardRef(
|
||||
(
|
||||
{ className, size = "medium", spacing, as: Component = "p", ...rest },
|
||||
{
|
||||
className,
|
||||
size = "medium",
|
||||
as: Component = "p",
|
||||
spacing,
|
||||
truncate,
|
||||
weight = "regular",
|
||||
align,
|
||||
visuallyHidden,
|
||||
textColor,
|
||||
...rest
|
||||
},
|
||||
ref
|
||||
) => (
|
||||
<Component
|
||||
{...rest}
|
||||
ref={ref}
|
||||
className={cl(className, "navds-body-long", {
|
||||
"navds-body-long--small": size === "small",
|
||||
"navds-typo--spacing": !!spacing,
|
||||
})}
|
||||
className={cl(
|
||||
className,
|
||||
"navds-body-long",
|
||||
`navds-body-long--${size}`,
|
||||
typoClassNames({
|
||||
spacing,
|
||||
truncate,
|
||||
weight,
|
||||
align,
|
||||
visuallyHidden,
|
||||
textColor,
|
||||
})
|
||||
)}
|
||||
/>
|
||||
)
|
||||
);
|
||||
|
||||
@@ -1,22 +1,21 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import cl from "clsx";
|
||||
import React, { forwardRef } from "react";
|
||||
import { OverridableComponent } from "../util/OverridableComponent";
|
||||
import { TypoProps } from "./types";
|
||||
import { typoClassNames } from "./util";
|
||||
|
||||
export interface BodyShortProps
|
||||
extends React.HTMLAttributes<HTMLParagraphElement> {
|
||||
extends TypoProps,
|
||||
React.HTMLAttributes<HTMLParagraphElement> {
|
||||
/**
|
||||
* medium: 18px, small: 16px
|
||||
* large: 20px, medium: 18px, small: 16px
|
||||
* @default "medium"
|
||||
*/
|
||||
size?: "medium" | "small";
|
||||
size?: "large" | "medium" | "small";
|
||||
/**
|
||||
* Paragraph text
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* Adds margin-bottom
|
||||
*/
|
||||
spacing?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -28,8 +27,8 @@ export interface BodyShortProps
|
||||
*
|
||||
* @example
|
||||
* ```jsx
|
||||
* <BodyShort level="1" size="xlarge">
|
||||
* Pengestøtte når du er syk
|
||||
* <BodyShort>
|
||||
* Du må gjøre en filtrering for å se brukere i listen.
|
||||
* </BodyShort>
|
||||
* ```
|
||||
*/
|
||||
@@ -38,16 +37,36 @@ export const BodyShort: OverridableComponent<
|
||||
HTMLParagraphElement
|
||||
> = forwardRef(
|
||||
(
|
||||
{ className, size = "medium", spacing, as: Component = "p", ...rest },
|
||||
{
|
||||
className,
|
||||
size = "medium",
|
||||
as: Component = "p",
|
||||
spacing,
|
||||
truncate,
|
||||
weight = "regular",
|
||||
align,
|
||||
visuallyHidden,
|
||||
textColor,
|
||||
...rest
|
||||
},
|
||||
ref
|
||||
) => (
|
||||
<Component
|
||||
{...rest}
|
||||
ref={ref}
|
||||
className={cl(className, "navds-body-short", {
|
||||
"navds-body-short--small": size === "small",
|
||||
"navds-typo--spacing": !!spacing,
|
||||
})}
|
||||
className={cl(
|
||||
className,
|
||||
"navds-body-short",
|
||||
`navds-body-short--${size}`,
|
||||
typoClassNames({
|
||||
spacing,
|
||||
truncate,
|
||||
weight,
|
||||
align,
|
||||
visuallyHidden,
|
||||
textColor,
|
||||
})
|
||||
)}
|
||||
/>
|
||||
)
|
||||
);
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import cl from "clsx";
|
||||
import React, { forwardRef } from "react";
|
||||
import { OverridableComponent } from "../util/OverridableComponent";
|
||||
import { TypoProps } from "./types";
|
||||
import { typoClassNames } from "./util";
|
||||
|
||||
export interface DetailProps
|
||||
extends React.HTMLAttributes<HTMLParagraphElement> {
|
||||
extends TypoProps,
|
||||
React.HTMLAttributes<HTMLParagraphElement> {
|
||||
/**
|
||||
* @deprecated Medium === small
|
||||
*/
|
||||
@@ -12,10 +15,6 @@ export interface DetailProps
|
||||
* Paragraph text
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* Adds margin-bottom
|
||||
*/
|
||||
spacing?: boolean;
|
||||
/**
|
||||
* All caps
|
||||
*/
|
||||
@@ -31,8 +30,8 @@ export interface DetailProps
|
||||
*
|
||||
* @example
|
||||
* ```jsx
|
||||
* <Detail level="1" size="xlarge">
|
||||
* Pengestøtte når du er syk
|
||||
* <Detail>
|
||||
* Du må gjøre en filtrering for å se brukere i listen.
|
||||
* </Detail>
|
||||
* ```
|
||||
*/
|
||||
@@ -45,6 +44,11 @@ export const Detail: OverridableComponent<DetailProps, HTMLParagraphElement> =
|
||||
spacing,
|
||||
uppercase,
|
||||
as: Component = "p",
|
||||
truncate,
|
||||
weight = "regular",
|
||||
align,
|
||||
visuallyHidden,
|
||||
textColor,
|
||||
...rest
|
||||
},
|
||||
ref
|
||||
@@ -52,11 +56,22 @@ export const Detail: OverridableComponent<DetailProps, HTMLParagraphElement> =
|
||||
<Component
|
||||
{...rest}
|
||||
ref={ref}
|
||||
className={cl(className, "navds-detail", {
|
||||
"navds-detail--small": size === "small",
|
||||
"navds-typo--spacing": !!spacing,
|
||||
"navds-typo--uppercase": !!uppercase,
|
||||
})}
|
||||
className={cl(
|
||||
className,
|
||||
"navds-detail",
|
||||
typoClassNames({
|
||||
spacing,
|
||||
truncate,
|
||||
weight,
|
||||
align,
|
||||
visuallyHidden,
|
||||
textColor,
|
||||
uppercase,
|
||||
}),
|
||||
{
|
||||
"navds-detail--small": size === "small",
|
||||
}
|
||||
)}
|
||||
/>
|
||||
)
|
||||
);
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import cl from "clsx";
|
||||
import { OverridableComponent } from "../util/OverridableComponent";
|
||||
import { TypoProps } from "./types";
|
||||
import { typoClassNames } from "./util";
|
||||
|
||||
export interface ErrorMessageProps
|
||||
extends React.HTMLAttributes<HTMLParagraphElement> {
|
||||
extends Pick<TypoProps, "spacing">,
|
||||
React.HTMLAttributes<HTMLParagraphElement> {
|
||||
/**
|
||||
* medium: 18px, small: 16px
|
||||
* @default "medium"
|
||||
@@ -13,10 +16,6 @@ export interface ErrorMessageProps
|
||||
* Error text
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* Adds margin-bottom
|
||||
*/
|
||||
spacing?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -28,8 +27,8 @@ export interface ErrorMessageProps
|
||||
*
|
||||
* @example
|
||||
* ```jsx
|
||||
* <ErrorMessage level="1" size="xlarge">
|
||||
* Pengestøtte når du er syk
|
||||
* <ErrorMessage>
|
||||
* Du må fylle ut: Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
|
||||
* </ErrorMessage>
|
||||
* ```
|
||||
*/
|
||||
@@ -41,10 +40,17 @@ export const ErrorMessage: OverridableComponent<
|
||||
<Component
|
||||
{...rest}
|
||||
ref={ref}
|
||||
className={cl("navds-error-message", "navds-label", className, {
|
||||
"navds-label--small": size === "small",
|
||||
"navds-typo--spacing": !!spacing,
|
||||
})}
|
||||
className={cl(
|
||||
"navds-error-message",
|
||||
"navds-label",
|
||||
className,
|
||||
typoClassNames({
|
||||
spacing,
|
||||
}),
|
||||
{
|
||||
"navds-label--small": size === "small",
|
||||
}
|
||||
)}
|
||||
/>
|
||||
)
|
||||
);
|
||||
|
||||
@@ -1,8 +1,12 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import cl from "clsx";
|
||||
import React, { forwardRef } from "react";
|
||||
import { OverridableComponent } from "../util/OverridableComponent";
|
||||
import { TypoProps } from "./types";
|
||||
import { typoClassNames } from "./util";
|
||||
|
||||
export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
|
||||
export interface HeadingProps
|
||||
extends Pick<TypoProps, "spacing" | "visuallyHidden" | "align" | "textColor">,
|
||||
React.HTMLAttributes<HTMLHeadingElement> {
|
||||
/**
|
||||
* Heading level
|
||||
* @default "1"
|
||||
@@ -16,11 +20,6 @@ export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
|
||||
* Heading text
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* Adds margin-bottom
|
||||
* @default false
|
||||
*/
|
||||
spacing?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -33,22 +32,43 @@ export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
|
||||
* @example
|
||||
* ```jsx
|
||||
* <Heading level="1" size="xlarge">
|
||||
* Pengestøtte når du er syk
|
||||
* Hva kan vi hjelpe deg med?
|
||||
* </Heading>
|
||||
* ```
|
||||
*/
|
||||
export const Heading: OverridableComponent<HeadingProps, HTMLHeadingElement> =
|
||||
forwardRef(
|
||||
({ level = "1", size, spacing = false, className, as, ...rest }, ref) => {
|
||||
(
|
||||
{
|
||||
level = "1",
|
||||
size,
|
||||
className,
|
||||
as,
|
||||
spacing,
|
||||
align,
|
||||
visuallyHidden,
|
||||
textColor,
|
||||
...rest
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
let HeadingTag = as ?? (`h${level}` as React.ElementType);
|
||||
|
||||
return (
|
||||
<HeadingTag
|
||||
{...rest}
|
||||
ref={ref}
|
||||
className={cl(className, "navds-heading", `navds-heading--${size}`, {
|
||||
"navds-typo--spacing": spacing,
|
||||
})}
|
||||
className={cl(
|
||||
className,
|
||||
"navds-heading",
|
||||
`navds-heading--${size}`,
|
||||
typoClassNames({
|
||||
spacing,
|
||||
align,
|
||||
visuallyHidden,
|
||||
textColor,
|
||||
})
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -15,6 +15,8 @@ export interface IngressProps
|
||||
}
|
||||
|
||||
/**
|
||||
* @deprecated Use `<BodyLong size="large" />`
|
||||
*
|
||||
* Part of a set of components for displaying text with consistent typography.
|
||||
*
|
||||
* @see [📝 Documentation](https://aksel.nav.no/komponenter/core/typography)
|
||||
@@ -23,8 +25,8 @@ export interface IngressProps
|
||||
*
|
||||
* @example
|
||||
* ```jsx
|
||||
* <Ingress level="1" size="xlarge">
|
||||
* Pengestøtte når du er syk
|
||||
* <Ingress>
|
||||
* Hvis du ikke bor sammen med begge foreldrene dine, kan du ha rett til barnebidrag fra en eller begge foreldre mens du fullfører videregående skole eller tilsvarende.
|
||||
* </Ingress>
|
||||
* ```
|
||||
*/
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import cl from "clsx";
|
||||
import React, { forwardRef } from "react";
|
||||
import { OverridableComponent } from "../util/OverridableComponent";
|
||||
import { TypoProps } from "./types";
|
||||
import { typoClassNames } from "./util";
|
||||
|
||||
export interface LabelProps
|
||||
extends React.LabelHTMLAttributes<HTMLLabelElement> {
|
||||
extends Omit<TypoProps, "weight" | "align" | "truncate">,
|
||||
React.LabelHTMLAttributes<HTMLLabelElement> {
|
||||
/**
|
||||
* medium: 18px, small: 16px
|
||||
* @default "medium"
|
||||
@@ -13,10 +16,6 @@ export interface LabelProps
|
||||
* Paragraph text
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* Adds margin-bottom
|
||||
*/
|
||||
spacing?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -28,24 +27,40 @@ export interface LabelProps
|
||||
*
|
||||
* @example
|
||||
* ```jsx
|
||||
* <Label level="1" size="xlarge">
|
||||
* Pengestøtte når du er syk
|
||||
* <Label>
|
||||
* Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
|
||||
* </Label>
|
||||
* ```
|
||||
*/
|
||||
export const Label: OverridableComponent<LabelProps, HTMLLabelElement> =
|
||||
forwardRef(
|
||||
(
|
||||
{ className, size = "medium", spacing, as: Component = "label", ...rest },
|
||||
{
|
||||
className,
|
||||
size = "medium",
|
||||
as: Component = "label",
|
||||
spacing,
|
||||
visuallyHidden,
|
||||
textColor,
|
||||
...rest
|
||||
},
|
||||
ref
|
||||
) => (
|
||||
<Component
|
||||
{...rest}
|
||||
ref={ref}
|
||||
className={cl(className, "navds-label", {
|
||||
"navds-label--small": size === "small",
|
||||
"navds-typo--spacing": !!spacing,
|
||||
})}
|
||||
className={cl(
|
||||
className,
|
||||
"navds-label",
|
||||
typoClassNames({
|
||||
spacing,
|
||||
visuallyHidden,
|
||||
textColor,
|
||||
}),
|
||||
{
|
||||
"navds-label--small": size === "small",
|
||||
}
|
||||
)}
|
||||
/>
|
||||
)
|
||||
);
|
||||
|
||||
@@ -1,77 +0,0 @@
|
||||
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 = {
|
||||
render: (props) => <Heading {...props}>{lorem}</Heading>,
|
||||
|
||||
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>
|
||||
);
|
||||
@@ -0,0 +1,165 @@
|
||||
import { expect } from "@storybook/jest";
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { within } from "@storybook/testing-library";
|
||||
import React from "react";
|
||||
import { BodyLong } from "..";
|
||||
import { VStack } from "../..";
|
||||
|
||||
const meta = {
|
||||
title: "ds-react/Typography/BodyLong",
|
||||
component: BodyLong,
|
||||
decorators: [(story) => <div style={{ maxWidth: "700px" }}>{story()}</div>],
|
||||
} satisfies Meta<typeof BodyLong>;
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
const lorem =
|
||||
"Hvis du ikke bor sammen med begge foreldrene dine, kan du ha rett til barnebidrag fra en eller begge foreldre mens du fullfører videregående skole eller tilsvarende.";
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
spacing: false,
|
||||
children: lorem,
|
||||
|
||||
truncate: false,
|
||||
visuallyHidden: false,
|
||||
},
|
||||
argTypes: {
|
||||
size: {
|
||||
control: "radio",
|
||||
options: ["large", "medium", "small"],
|
||||
},
|
||||
weight: {
|
||||
control: "radio",
|
||||
options: ["regular", "semibold"],
|
||||
},
|
||||
align: {
|
||||
control: "radio",
|
||||
options: ["start", "center", "end"],
|
||||
},
|
||||
textColor: {
|
||||
control: "radio",
|
||||
options: ["default", "subtle"],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const SizeLarge: Story = {
|
||||
render: () => (
|
||||
<VStack gap="4">
|
||||
<BodyLong size="large">{lorem}</BodyLong>
|
||||
<BodyLong size="large" weight="semibold">
|
||||
{lorem}
|
||||
</BodyLong>
|
||||
<BodyLong size="large" truncate>
|
||||
{lorem}
|
||||
</BodyLong>
|
||||
</VStack>
|
||||
),
|
||||
};
|
||||
|
||||
export const SizeMedium: Story = {
|
||||
render: () => (
|
||||
<VStack gap="2">
|
||||
<BodyLong size="medium">{lorem}</BodyLong>
|
||||
<BodyLong size="medium" weight="semibold">
|
||||
{lorem}
|
||||
</BodyLong>
|
||||
<BodyLong size="medium" truncate>
|
||||
{lorem}
|
||||
</BodyLong>
|
||||
</VStack>
|
||||
),
|
||||
};
|
||||
|
||||
export const SizeSmall: Story = {
|
||||
render: () => (
|
||||
<VStack gap="2">
|
||||
<BodyLong size="small">{lorem}</BodyLong>
|
||||
<BodyLong size="small" weight="semibold">
|
||||
{lorem}
|
||||
</BodyLong>
|
||||
<BodyLong size="small" truncate>
|
||||
{lorem}
|
||||
</BodyLong>
|
||||
</VStack>
|
||||
),
|
||||
};
|
||||
|
||||
export const SpacingLarge: Story = {
|
||||
render: () => (
|
||||
<div>
|
||||
<BodyLong size="large" spacing>
|
||||
{lorem}
|
||||
</BodyLong>
|
||||
<BodyLong size="large" spacing>
|
||||
{lorem}
|
||||
</BodyLong>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
export const SpacingMedium: Story = {
|
||||
render: () => (
|
||||
<div>
|
||||
<BodyLong size="medium" spacing>
|
||||
{lorem}
|
||||
</BodyLong>
|
||||
<BodyLong size="medium" spacing>
|
||||
{lorem}
|
||||
</BodyLong>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
export const SpacingSmall: Story = {
|
||||
render: () => (
|
||||
<div>
|
||||
<BodyLong size="small" spacing>
|
||||
{lorem}
|
||||
</BodyLong>
|
||||
<BodyLong size="small" spacing>
|
||||
{lorem}
|
||||
</BodyLong>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
export const Colors: Story = {
|
||||
render: () => (
|
||||
<VStack gap="2">
|
||||
<BodyLong textColor="default">{lorem}</BodyLong>
|
||||
<BodyLong textColor="subtle">{lorem}</BodyLong>
|
||||
</VStack>
|
||||
),
|
||||
};
|
||||
|
||||
export const Align: Story = {
|
||||
render: () => (
|
||||
<VStack gap="2">
|
||||
<BodyLong align="start">{lorem}</BodyLong>
|
||||
<BodyLong align="center">{lorem}</BodyLong>
|
||||
<BodyLong align="end">{lorem}</BodyLong>
|
||||
</VStack>
|
||||
),
|
||||
};
|
||||
|
||||
export const OverrideTag: Story = {
|
||||
render: () => (
|
||||
<div>
|
||||
<BodyLong spacing>default bodylong</BodyLong>
|
||||
<BodyLong as="legend">legend bodylong</BodyLong>
|
||||
</div>
|
||||
),
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
const defaultBodyLong = canvas.getByText("default bodylong");
|
||||
const legendBodyLong = canvas.getByText("legend bodylong");
|
||||
|
||||
expect(defaultBodyLong.tagName).toEqual("P");
|
||||
expect(legendBodyLong.tagName).toEqual("LEGEND");
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,164 @@
|
||||
import { expect } from "@storybook/jest";
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { within } from "@storybook/testing-library";
|
||||
import React from "react";
|
||||
import { BodyShort } from "..";
|
||||
import { VStack } from "../..";
|
||||
|
||||
const meta = {
|
||||
title: "ds-react/Typography/BodyShort",
|
||||
component: BodyShort,
|
||||
decorators: [(story) => <div style={{ maxWidth: "200px" }}>{story()}</div>],
|
||||
} satisfies Meta<typeof BodyShort>;
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
spacing: false,
|
||||
children: lorem,
|
||||
|
||||
truncate: false,
|
||||
visuallyHidden: false,
|
||||
},
|
||||
argTypes: {
|
||||
size: {
|
||||
control: "radio",
|
||||
options: ["large", "medium", "small"],
|
||||
},
|
||||
weight: {
|
||||
control: "radio",
|
||||
options: ["regular", "semibold"],
|
||||
},
|
||||
align: {
|
||||
control: "radio",
|
||||
options: ["start", "center", "end"],
|
||||
},
|
||||
textColor: {
|
||||
control: "radio",
|
||||
options: ["default", "subtle"],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const SizeLarge: Story = {
|
||||
render: () => (
|
||||
<VStack gap="2">
|
||||
<BodyShort size="large">{lorem}</BodyShort>
|
||||
<BodyShort size="large" weight="semibold">
|
||||
{lorem}
|
||||
</BodyShort>
|
||||
<BodyShort size="large" truncate>
|
||||
{lorem}
|
||||
</BodyShort>
|
||||
</VStack>
|
||||
),
|
||||
};
|
||||
|
||||
export const SizeMedium: Story = {
|
||||
render: () => (
|
||||
<VStack gap="2">
|
||||
<BodyShort size="medium">{lorem}</BodyShort>
|
||||
<BodyShort size="medium" weight="semibold">
|
||||
{lorem}
|
||||
</BodyShort>
|
||||
<BodyShort size="medium" truncate>
|
||||
{lorem}
|
||||
</BodyShort>
|
||||
</VStack>
|
||||
),
|
||||
};
|
||||
|
||||
export const SizeSmall: Story = {
|
||||
render: () => (
|
||||
<VStack gap="2">
|
||||
<BodyShort size="small">{lorem}</BodyShort>
|
||||
<BodyShort size="small" weight="semibold">
|
||||
{lorem}
|
||||
</BodyShort>
|
||||
<BodyShort size="small" truncate>
|
||||
{lorem}
|
||||
</BodyShort>
|
||||
</VStack>
|
||||
),
|
||||
};
|
||||
|
||||
export const SpacingLarge: Story = {
|
||||
render: () => (
|
||||
<div>
|
||||
<BodyShort size="large" spacing>
|
||||
{lorem}
|
||||
</BodyShort>
|
||||
<BodyShort size="large" spacing>
|
||||
{lorem}
|
||||
</BodyShort>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
export const SpacingMedium: Story = {
|
||||
render: () => (
|
||||
<div>
|
||||
<BodyShort size="medium" spacing>
|
||||
{lorem}
|
||||
</BodyShort>
|
||||
<BodyShort size="medium" spacing>
|
||||
{lorem}
|
||||
</BodyShort>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
export const SpacingSmall: Story = {
|
||||
render: () => (
|
||||
<div>
|
||||
<BodyShort size="small" spacing>
|
||||
{lorem}
|
||||
</BodyShort>
|
||||
<BodyShort size="small" spacing>
|
||||
{lorem}
|
||||
</BodyShort>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
export const Colors: Story = {
|
||||
render: () => (
|
||||
<VStack gap="2">
|
||||
<BodyShort textColor="default">{lorem}</BodyShort>
|
||||
<BodyShort textColor="subtle">{lorem}</BodyShort>
|
||||
</VStack>
|
||||
),
|
||||
};
|
||||
|
||||
export const Align: Story = {
|
||||
render: () => (
|
||||
<VStack gap="2">
|
||||
<BodyShort align="start">{lorem}</BodyShort>
|
||||
<BodyShort align="center">{lorem}</BodyShort>
|
||||
<BodyShort align="end">{lorem}</BodyShort>
|
||||
</VStack>
|
||||
),
|
||||
};
|
||||
|
||||
export const OverrideTag: Story = {
|
||||
render: () => (
|
||||
<div>
|
||||
<BodyShort spacing>default bodyshort</BodyShort>
|
||||
<BodyShort as="legend">legend bodyshort</BodyShort>
|
||||
</div>
|
||||
),
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
const defaultBodyShort = canvas.getByText("default bodyshort");
|
||||
const legendBodyShort = canvas.getByText("legend bodyshort");
|
||||
|
||||
expect(defaultBodyShort.tagName).toEqual("P");
|
||||
expect(legendBodyShort.tagName).toEqual("LEGEND");
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,88 @@
|
||||
import { expect } from "@storybook/jest";
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { within } from "@storybook/testing-library";
|
||||
import React from "react";
|
||||
import { Detail } from "..";
|
||||
import { VStack } from "../..";
|
||||
|
||||
const meta = {
|
||||
title: "ds-react/Typography/Detail",
|
||||
component: Detail,
|
||||
decorators: [(story) => <div style={{ maxWidth: "200px" }}>{story()}</div>],
|
||||
} satisfies Meta<typeof Detail>;
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
spacing: false,
|
||||
children: lorem,
|
||||
|
||||
truncate: false,
|
||||
visuallyHidden: false,
|
||||
},
|
||||
argTypes: {
|
||||
weight: {
|
||||
control: "radio",
|
||||
options: ["regular", "semibold"],
|
||||
},
|
||||
align: {
|
||||
control: "radio",
|
||||
options: ["start", "center", "end"],
|
||||
},
|
||||
textColor: {
|
||||
control: "radio",
|
||||
options: ["default", "subtle"],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Spacing: Story = {
|
||||
render: () => (
|
||||
<div>
|
||||
<Detail spacing>{lorem}</Detail>
|
||||
<Detail spacing>{lorem}</Detail>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
export const Colors: Story = {
|
||||
render: () => (
|
||||
<VStack gap="2">
|
||||
<Detail textColor="default">{lorem}</Detail>
|
||||
<Detail textColor="subtle">{lorem}</Detail>
|
||||
</VStack>
|
||||
),
|
||||
};
|
||||
|
||||
export const Align: Story = {
|
||||
render: () => (
|
||||
<VStack gap="2">
|
||||
<Detail align="start">{lorem}</Detail>
|
||||
<Detail align="center">{lorem}</Detail>
|
||||
<Detail align="end">{lorem}</Detail>
|
||||
</VStack>
|
||||
),
|
||||
};
|
||||
|
||||
export const OverrideTag: Story = {
|
||||
render: () => (
|
||||
<div>
|
||||
<Detail spacing>default detail</Detail>
|
||||
<Detail as="legend">legend detail</Detail>
|
||||
</div>
|
||||
),
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
const defaultDetail = canvas.getByText("default detail");
|
||||
const legendDetail = canvas.getByText("legend detail");
|
||||
|
||||
expect(defaultDetail.tagName).toEqual("P");
|
||||
expect(legendDetail.tagName).toEqual("LEGEND");
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,93 @@
|
||||
import { expect } from "@storybook/jest";
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { within } from "@storybook/testing-library";
|
||||
import React from "react";
|
||||
import { ErrorMessage } from "..";
|
||||
import { VStack } from "../..";
|
||||
|
||||
const meta = {
|
||||
title: "ds-react/Typography/ErrorMessage",
|
||||
component: ErrorMessage,
|
||||
} satisfies Meta<typeof ErrorMessage>;
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
const lorem =
|
||||
"Du må fylle ut: Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon";
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
spacing: false,
|
||||
children: lorem,
|
||||
},
|
||||
argTypes: {
|
||||
size: {
|
||||
control: "radio",
|
||||
options: ["medium", "small"],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const SizeMedium: Story = {
|
||||
render: () => (
|
||||
<VStack gap="2">
|
||||
<ErrorMessage size="medium">{lorem}</ErrorMessage>
|
||||
<ErrorMessage size="medium">{lorem}</ErrorMessage>
|
||||
</VStack>
|
||||
),
|
||||
};
|
||||
|
||||
export const SizeSmall: Story = {
|
||||
render: () => (
|
||||
<VStack gap="2">
|
||||
<ErrorMessage size="small">{lorem}</ErrorMessage>
|
||||
<ErrorMessage size="small">{lorem}</ErrorMessage>
|
||||
</VStack>
|
||||
),
|
||||
};
|
||||
|
||||
export const SpacingMedium: Story = {
|
||||
render: () => (
|
||||
<div>
|
||||
<ErrorMessage size="medium" spacing>
|
||||
{lorem}
|
||||
</ErrorMessage>
|
||||
<ErrorMessage size="medium" spacing>
|
||||
{lorem}
|
||||
</ErrorMessage>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
export const SpacingSmall: Story = {
|
||||
render: () => (
|
||||
<div>
|
||||
<ErrorMessage size="small" spacing>
|
||||
{lorem}
|
||||
</ErrorMessage>
|
||||
<ErrorMessage size="small" spacing>
|
||||
{lorem}
|
||||
</ErrorMessage>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
export const OverrideTag: Story = {
|
||||
render: () => (
|
||||
<div>
|
||||
<ErrorMessage spacing>default errormessage</ErrorMessage>
|
||||
<ErrorMessage as="legend">legend errormessage</ErrorMessage>
|
||||
</div>
|
||||
),
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
const defaultErrorMessage = canvas.getByText("default errormessage");
|
||||
const legendErrorMessage = canvas.getByText("legend errormessage");
|
||||
|
||||
expect(defaultErrorMessage.tagName).toEqual("P");
|
||||
expect(legendErrorMessage.tagName).toEqual("LEGEND");
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,143 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
|
||||
import { expect } from "@storybook/jest";
|
||||
import { within } from "@storybook/testing-library";
|
||||
import { default as React } from "react";
|
||||
import { Heading } from "..";
|
||||
import { VStack } from "../..";
|
||||
|
||||
const meta = {
|
||||
title: "ds-react/Typography/Heading",
|
||||
component: Heading,
|
||||
decorators: [(story) => <div style={{ maxWidth: "300px" }}>{story()}</div>],
|
||||
} satisfies Meta<typeof Heading>;
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
const lorem = "Hva kan vi hjelpe deg med?";
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
spacing: false,
|
||||
children: lorem,
|
||||
visuallyHidden: false,
|
||||
},
|
||||
argTypes: {
|
||||
size: {
|
||||
control: "radio",
|
||||
options: ["xlarge", "large", "medium", "small", "xsmall"],
|
||||
},
|
||||
level: {
|
||||
control: "radio",
|
||||
options: ["1", "2", "3", "4", "5", "6"],
|
||||
},
|
||||
align: {
|
||||
control: "radio",
|
||||
options: ["start", "center", "end"],
|
||||
},
|
||||
textColor: {
|
||||
control: "radio",
|
||||
options: ["default", "subtle"],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Sizes: Story = {
|
||||
render: () => (
|
||||
<VStack gap="4">
|
||||
<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>
|
||||
</VStack>
|
||||
),
|
||||
};
|
||||
|
||||
export const Spacing: Story = {
|
||||
render: () => (
|
||||
<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>
|
||||
),
|
||||
};
|
||||
|
||||
export const Colors: Story = {
|
||||
render: () => (
|
||||
<VStack gap="2">
|
||||
<Heading level="1" size="large" textColor="default">
|
||||
{lorem}
|
||||
</Heading>
|
||||
<Heading level="2" size="large" textColor="subtle">
|
||||
{lorem}
|
||||
</Heading>
|
||||
</VStack>
|
||||
),
|
||||
};
|
||||
|
||||
export const Align: Story = {
|
||||
render: () => (
|
||||
<VStack gap="2">
|
||||
<Heading level="1" size="large" align="start">
|
||||
{lorem}
|
||||
</Heading>
|
||||
<Heading level="2" size="large" align="center">
|
||||
{lorem}
|
||||
</Heading>
|
||||
<Heading level="3" size="large" align="end">
|
||||
{lorem}
|
||||
</Heading>
|
||||
</VStack>
|
||||
),
|
||||
};
|
||||
|
||||
export const OverrideTag: Story = {
|
||||
render: () => (
|
||||
<div>
|
||||
<Heading spacing level="1" size="large">
|
||||
default heading
|
||||
</Heading>
|
||||
<Heading as="legend" size="large">
|
||||
legend heading
|
||||
</Heading>
|
||||
</div>
|
||||
),
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
const defaultHeading = canvas.getByText("default heading");
|
||||
const legendHeading = canvas.getByText("legend heading");
|
||||
|
||||
expect(defaultHeading.tagName).toEqual("H1");
|
||||
expect(legendHeading.tagName).toEqual("LEGEND");
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,51 @@
|
||||
import { expect } from "@storybook/jest";
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { within } from "@storybook/testing-library";
|
||||
import React from "react";
|
||||
import { Ingress } from "..";
|
||||
|
||||
const meta = {
|
||||
title: "ds-react/Typography/deprecated/Ingress",
|
||||
component: Ingress,
|
||||
} satisfies Meta<typeof Ingress>;
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
const lorem =
|
||||
"Hvis du ikke bor sammen med begge foreldrene dine, kan du ha rett til barnebidrag fra en eller begge foreldre mens du fullfører videregående skole eller tilsvarende.";
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
spacing: false,
|
||||
children: lorem,
|
||||
},
|
||||
};
|
||||
|
||||
export const Spacing: Story = {
|
||||
render: () => (
|
||||
<div>
|
||||
<Ingress spacing>{lorem}</Ingress>
|
||||
<Ingress spacing>{lorem}</Ingress>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
export const OverrideTag: Story = {
|
||||
render: () => (
|
||||
<div>
|
||||
<Ingress spacing>default ingress</Ingress>
|
||||
<Ingress as="legend">legend ingress</Ingress>
|
||||
</div>
|
||||
),
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
const defaultIngress = canvas.getByText("default ingress");
|
||||
const legendIngress = canvas.getByText("legend ingress");
|
||||
|
||||
expect(defaultIngress.tagName).toEqual("P");
|
||||
expect(legendIngress.tagName).toEqual("LEGEND");
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,98 @@
|
||||
import { expect } from "@storybook/jest";
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { within } from "@storybook/testing-library";
|
||||
import React from "react";
|
||||
import { Label } from "..";
|
||||
import { VStack } from "../..";
|
||||
|
||||
const meta = {
|
||||
title: "ds-react/Typography/Label",
|
||||
component: Label,
|
||||
decorators: [(story) => <div style={{ maxWidth: "400px" }}>{story()}</div>],
|
||||
} satisfies Meta<typeof Label>;
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
const lorem =
|
||||
"Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon";
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
spacing: false,
|
||||
children: lorem,
|
||||
visuallyHidden: false,
|
||||
},
|
||||
argTypes: {
|
||||
size: {
|
||||
control: "radio",
|
||||
options: ["large", "medium", "small"],
|
||||
},
|
||||
textColor: {
|
||||
control: "radio",
|
||||
options: ["default", "subtle"],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const SizeMedium: Story = {
|
||||
render: () => <Label size="medium">{lorem}</Label>,
|
||||
};
|
||||
|
||||
export const SizeSmall: Story = {
|
||||
render: () => <Label size="small">{lorem}</Label>,
|
||||
};
|
||||
|
||||
export const SpacingMedium: Story = {
|
||||
render: () => (
|
||||
<div>
|
||||
<Label size="medium" spacing as="p">
|
||||
{lorem}
|
||||
</Label>
|
||||
<Label size="medium" spacing as="p">
|
||||
{lorem}
|
||||
</Label>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
export const SpacingSmall: Story = {
|
||||
render: () => (
|
||||
<div>
|
||||
<Label size="small" spacing as="p">
|
||||
{lorem}
|
||||
</Label>
|
||||
<Label size="small" spacing as="p">
|
||||
{lorem}
|
||||
</Label>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
export const Colors: Story = {
|
||||
render: () => (
|
||||
<VStack gap="2">
|
||||
<Label textColor="default">{lorem}</Label>
|
||||
<Label textColor="subtle">{lorem}</Label>
|
||||
</VStack>
|
||||
),
|
||||
};
|
||||
|
||||
export const OverrideTag: Story = {
|
||||
render: () => (
|
||||
<div>
|
||||
<Label spacing>default label</Label>
|
||||
<Label as="legend">legend label</Label>
|
||||
</div>
|
||||
),
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
const defaultLabel = canvas.getByText("default label");
|
||||
const legendLabel = canvas.getByText("legend label");
|
||||
|
||||
expect(defaultLabel.tagName).toEqual("LABEL");
|
||||
expect(legendLabel.tagName).toEqual("LEGEND");
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,26 @@
|
||||
export type TypoProps = {
|
||||
/**
|
||||
* Truncate text overflow with ellipsis.
|
||||
*/
|
||||
truncate?: boolean;
|
||||
/**
|
||||
* Adjusts font-weight.
|
||||
*/
|
||||
weight?: "regular" | "semibold";
|
||||
/**
|
||||
* Adjust text-align.
|
||||
*/
|
||||
align?: "start" | "center" | "end";
|
||||
/**
|
||||
* Visually hide text. Text will still be accessible for screenreaders
|
||||
*/
|
||||
visuallyHidden?: boolean;
|
||||
/**
|
||||
* Adds spacing below text
|
||||
*/
|
||||
spacing?: boolean;
|
||||
/**
|
||||
* Adjusts color
|
||||
*/
|
||||
textColor?: "default" | "subtle";
|
||||
};
|
||||
@@ -1,166 +0,0 @@
|
||||
import { Meta } from "@storybook/react";
|
||||
import React from "react";
|
||||
import {
|
||||
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: DsBodyLong,
|
||||
subcomponents: {
|
||||
DsBodyShort,
|
||||
DsDetail,
|
||||
DsErrorMessage,
|
||||
DsIngress,
|
||||
DsLabel,
|
||||
},
|
||||
} as Meta;
|
||||
|
||||
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>
|
||||
</>
|
||||
);
|
||||
@@ -0,0 +1,14 @@
|
||||
import cl from "clsx";
|
||||
import { TypoProps } from "./types";
|
||||
|
||||
export const typoClassNames = (props: TypoProps & { uppercase?: boolean }) => {
|
||||
return cl({
|
||||
"navds-typo--spacing": props.spacing,
|
||||
"navds-typo--truncate": props.truncate,
|
||||
"navds-typo--semibold": props.weight === "semibold",
|
||||
[`navds-typo--align-${props.align}`]: props.align,
|
||||
[`navds-typo--color-${props.textColor}`]: props.textColor,
|
||||
"navds-typo--visually-hidden": props.visuallyHidden,
|
||||
"navds-typo--uppercase": props.uppercase,
|
||||
});
|
||||
};
|
||||
@@ -1,5 +1,9 @@
|
||||
# @navikt/ds-tailwind
|
||||
|
||||
## 5.3.0
|
||||
|
||||
## 5.2.1
|
||||
|
||||
## 5.2.0
|
||||
|
||||
## 5.1.0
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-tailwind",
|
||||
"version": "5.2.0",
|
||||
"version": "5.3.0",
|
||||
"description": "Tailwind config based on @navikt/ds-tokens",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"keywords": [
|
||||
@@ -22,7 +22,7 @@
|
||||
"directory": "@navikt/core/tailwind"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-tokens": "^5.2.0",
|
||||
"@navikt/ds-tokens": "^5.3.0",
|
||||
"@types/jest": "^29.0.0",
|
||||
"color": "4.2.3",
|
||||
"jest": "^29.0.0",
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
# @navikt/ds-tokens
|
||||
|
||||
## 5.3.0
|
||||
|
||||
## 5.2.1
|
||||
|
||||
## 5.2.0
|
||||
|
||||
## 5.1.0
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-tokens",
|
||||
"version": "5.2.0",
|
||||
"version": "5.3.0",
|
||||
"description": "Design-tokens for NAV designsystem",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,5 +1,29 @@
|
||||
# Changelog
|
||||
|
||||
## 5.3.0
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Heading: Oppdatert med props `textColor`, `align`, `visuallyHidden`. ([#2211](https://github.com/navikt/aksel/pull/2211))
|
||||
|
||||
- Label: Oppdatert med props `textColor` og `visuallyHidden`. ([#2211](https://github.com/navikt/aksel/pull/2211))
|
||||
|
||||
- BodyLong, BodyShort, Detail: Oppdatert med props `textColor`,`weight`,`align`, `visuallyHidden` og `truncated`. ([#2211](https://github.com/navikt/aksel/pull/2211))
|
||||
|
||||
<!---->
|
||||
|
||||
- :wheelchair: Textarea: Skjermleser-spesifikk tekst leses opp sammenhengende ([#2216](https://github.com/navikt/aksel/pull/2216))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Typography: Oppdatert med typo-klasser for `textColor`, `weight`, `align`, `visuallyHidden` og `truncated`. ([#2211](https://github.com/navikt/aksel/pull/2211))
|
||||
|
||||
## 5.2.1
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Font: Fikset henting av italic-font ([#2220](https://github.com/navikt/aksel/pull/2220))
|
||||
|
||||
## 5.2.0
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
@@ -15,11 +15,11 @@
|
||||
"website"
|
||||
],
|
||||
"dependencies": {
|
||||
"@navikt/aksel-icons": "^5.2.0",
|
||||
"@navikt/ds-css": "^5.2.0",
|
||||
"@navikt/ds-react": "^5.2.0",
|
||||
"@navikt/ds-tailwind": "^5.2.0",
|
||||
"@navikt/ds-tokens": "^5.2.0"
|
||||
"@navikt/aksel-icons": "^5.3.0",
|
||||
"@navikt/ds-css": "^5.3.0",
|
||||
"@navikt/ds-react": "^5.3.0",
|
||||
"@navikt/ds-tailwind": "^5.3.0",
|
||||
"@navikt/ds-tokens": "^5.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"prettier-plugin-tailwindcss": "^0.2.3"
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
import { BodyLong, VStack } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
const lorem =
|
||||
"Hvis du ikke bor sammen med begge foreldrene dine, kan du ha rett til barnebidrag fra en eller begge foreldre mens du fullfører videregående skole eller tilsvarende.";
|
||||
|
||||
return (
|
||||
<VStack gap="4">
|
||||
<div>
|
||||
<Descriptor>Start</Descriptor>
|
||||
<BodyLong align="start">{lorem}</BodyLong>
|
||||
</div>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>Center</Descriptor>
|
||||
<BodyLong align="center">{lorem}</BodyLong>
|
||||
</div>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>End</Descriptor>
|
||||
<BodyLong align="end">{lorem}</BodyLong>
|
||||
</div>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 7,
|
||||
};
|
||||
|
||||
function Descriptor({ children }) {
|
||||
return <p className="mb-3 text-xl font-semibold">{children}</p>;
|
||||
}
|
||||
|
||||
function Divider() {
|
||||
return <hr className="border-border-subtle" />;
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import { BodyLong, VStack } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
const lorem =
|
||||
"Hvis du ikke bor sammen med begge foreldrene dine, kan du ha rett til barnebidrag fra en eller begge foreldre mens du fullfører videregående skole eller tilsvarende.";
|
||||
|
||||
return (
|
||||
<VStack gap="4">
|
||||
<div>
|
||||
<Descriptor>Default</Descriptor>
|
||||
<BodyLong color="default">{lorem}</BodyLong>
|
||||
</div>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>Subtle</Descriptor>
|
||||
<BodyLong color="subtle">{lorem}</BodyLong>
|
||||
</div>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 6,
|
||||
};
|
||||
|
||||
function Descriptor({ children }) {
|
||||
return <p className="mb-3 text-xl font-semibold">{children}</p>;
|
||||
}
|
||||
|
||||
function Divider() {
|
||||
return <hr className="border-border-subtle" />;
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
import { BodyLong } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
return (
|
||||
<BodyLong>
|
||||
Amet dolore non tempor incididunt dolor est enim aute commodo cillum quis.
|
||||
Ex esse veniam ipsum quis. Pariatur duis do qui exercitation ut laboris
|
||||
sit veniam nostrud nulla esse. In aute sint enim reprehenderit ut
|
||||
voluptate do id. Laborum irure qui officia aute ipsum. Exercitation dolor
|
||||
sunt deserunt non anim.
|
||||
</BodyLong>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 0,
|
||||
};
|
||||
@@ -0,0 +1,46 @@
|
||||
import { BodyLong, VStack } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
const lorem =
|
||||
"Hvis du ikke bor sammen med begge foreldrene dine, kan du ha rett til barnebidrag fra en eller begge foreldre mens du fullfører videregående skole eller tilsvarende.";
|
||||
|
||||
return (
|
||||
<VStack gap="4">
|
||||
<BodyLong size="large">{lorem}</BodyLong>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>Semibold</Descriptor>
|
||||
<BodyLong size="large" weight="semibold">
|
||||
{lorem}
|
||||
</BodyLong>
|
||||
</div>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>Truncate (ellipsis)</Descriptor>
|
||||
<BodyLong size="large" truncate>
|
||||
{lorem}
|
||||
</BodyLong>
|
||||
</div>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 1,
|
||||
};
|
||||
|
||||
function Descriptor({ children }) {
|
||||
return <p className="mb-3 text-xl font-semibold">{children}</p>;
|
||||
}
|
||||
|
||||
function Divider() {
|
||||
return <hr className="border-border-subtle" />;
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import { BodyLong, VStack } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
const lorem =
|
||||
"Hvis du ikke bor sammen med begge foreldrene dine, kan du ha rett til barnebidrag fra en eller begge foreldre mens du fullfører videregående skole eller tilsvarende.";
|
||||
|
||||
return (
|
||||
<VStack gap="4">
|
||||
<BodyLong>{lorem}</BodyLong>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>Semibold</Descriptor>
|
||||
<BodyLong weight="semibold">{lorem}</BodyLong>
|
||||
</div>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>Truncate (ellipsis)</Descriptor>
|
||||
<BodyLong truncate>{lorem}</BodyLong>
|
||||
</div>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 0,
|
||||
};
|
||||
|
||||
function Descriptor({ children }) {
|
||||
return <p className="mb-3 text-xl font-semibold">{children}</p>;
|
||||
}
|
||||
|
||||
function Divider() {
|
||||
return <hr className="border-border-subtle" />;
|
||||
}
|
||||
+3
-8
@@ -1,13 +1,8 @@
|
||||
import { Ingress } from "@navikt/ds-react";
|
||||
import { BodyLong } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
return (
|
||||
<Ingress>
|
||||
Blir du sykmeldt, trenger du å vite hvilke regler som gjelder mens du er
|
||||
syk og hva som kreves for å få utbetalt sykepenger.
|
||||
</Ingress>
|
||||
);
|
||||
return <BodyLong as="span">Dette er nå en span!</BodyLong>;
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
@@ -18,5 +13,5 @@ export const Demo = {
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 0,
|
||||
index: 8,
|
||||
};
|
||||
@@ -1,15 +1,28 @@
|
||||
import { BodyLong } from "@navikt/ds-react";
|
||||
import { BodyLong, VStack } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
const lorem =
|
||||
"Hvis du ikke bor sammen med begge foreldrene dine, kan du ha rett til barnebidrag fra en eller begge foreldre mens du fullfører videregående skole eller tilsvarende.";
|
||||
|
||||
return (
|
||||
<BodyLong size="small">
|
||||
Amet dolore non tempor incididunt dolor est enim aute commodo cillum quis.
|
||||
Ex esse veniam ipsum quis. Pariatur duis do qui exercitation ut laboris
|
||||
sit veniam nostrud nulla esse. In aute sint enim reprehenderit ut
|
||||
voluptate do id. Laborum irure qui officia aute ipsum. Exercitation dolor
|
||||
sunt deserunt non anim.
|
||||
</BodyLong>
|
||||
<VStack gap="4">
|
||||
<BodyLong size="small">{lorem}</BodyLong>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>Semibold</Descriptor>
|
||||
<BodyLong size="small" weight="semibold">
|
||||
{lorem}
|
||||
</BodyLong>
|
||||
</div>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>Truncate (ellipsis)</Descriptor>
|
||||
<BodyLong size="small" truncate>
|
||||
{lorem}
|
||||
</BodyLong>
|
||||
</div>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -23,3 +36,11 @@ export const Demo = {
|
||||
export const args = {
|
||||
index: 2,
|
||||
};
|
||||
|
||||
function Descriptor({ children }) {
|
||||
return <p className="mb-3 text-xl font-semibold">{children}</p>;
|
||||
}
|
||||
|
||||
function Divider() {
|
||||
return <hr className="border-border-subtle" />;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import { BodyLong } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
const lorem =
|
||||
"Hvis du ikke bor sammen med begge foreldrene dine, kan du ha rett til barnebidrag fra en eller begge foreldre mens du fullfører videregående skole eller tilsvarende.";
|
||||
|
||||
return (
|
||||
<div>
|
||||
<BodyLong size="large" spacing>
|
||||
{lorem}
|
||||
</BodyLong>
|
||||
<BodyLong size="large" spacing>
|
||||
{lorem}
|
||||
</BodyLong>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 3,
|
||||
};
|
||||
@@ -0,0 +1,25 @@
|
||||
import { BodyLong } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
const lorem =
|
||||
"Hvis du ikke bor sammen med begge foreldrene dine, kan du ha rett til barnebidrag fra en eller begge foreldre mens du fullfører videregående skole eller tilsvarende.";
|
||||
|
||||
return (
|
||||
<div>
|
||||
<BodyLong spacing>{lorem}</BodyLong>
|
||||
<BodyLong spacing>{lorem}</BodyLong>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 4,
|
||||
};
|
||||
@@ -0,0 +1,29 @@
|
||||
import { BodyLong } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
const lorem =
|
||||
"Hvis du ikke bor sammen med begge foreldrene dine, kan du ha rett til barnebidrag fra en eller begge foreldre mens du fullfører videregående skole eller tilsvarende.";
|
||||
|
||||
return (
|
||||
<div>
|
||||
<BodyLong size="small" spacing>
|
||||
{lorem}
|
||||
</BodyLong>
|
||||
<BodyLong size="small" spacing>
|
||||
{lorem}
|
||||
</BodyLong>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 5,
|
||||
};
|
||||
@@ -1,30 +0,0 @@
|
||||
import { BodyLong } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
return (
|
||||
<div>
|
||||
<BodyLong spacing>
|
||||
Amet dolore non tempor incididunt dolor est enim aute commodo cillum
|
||||
quis. Ex esse veniam ipsum quis. Pariatur duis do qui exercitation ut
|
||||
laboris sit veniam nostrud nulla esse.
|
||||
</BodyLong>
|
||||
<BodyLong>
|
||||
Magna aliqua et adipisicing nostrud elit ea. Id ipsum ut laborum ut
|
||||
adipisicing magna laboris pariatur commodo quis nulla ea aliquip mollit.
|
||||
Nisi aliquip voluptate laboris nisi eiusmod labore eu non.
|
||||
</BodyLong>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 1,
|
||||
};
|
||||
@@ -0,0 +1,44 @@
|
||||
import { BodyShort, VStack } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
|
||||
|
||||
return (
|
||||
<VStack gap="4">
|
||||
<div>
|
||||
<Descriptor>Start</Descriptor>
|
||||
<BodyShort align="start">{lorem}</BodyShort>
|
||||
</div>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>Center</Descriptor>
|
||||
<BodyShort align="center">{lorem}</BodyShort>
|
||||
</div>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>End</Descriptor>
|
||||
<BodyShort align="end">{lorem}</BodyShort>
|
||||
</div>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 7,
|
||||
};
|
||||
|
||||
function Descriptor({ children }) {
|
||||
return <p className="mb-3 text-xl font-semibold">{children}</p>;
|
||||
}
|
||||
|
||||
function Divider() {
|
||||
return <hr className="border-border-subtle" />;
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import { BodyShort, VStack } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
|
||||
|
||||
return (
|
||||
<VStack gap="4">
|
||||
<div>
|
||||
<Descriptor>Default</Descriptor>
|
||||
<BodyShort color="default">{lorem}</BodyShort>
|
||||
</div>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>Subtle</Descriptor>
|
||||
<BodyShort color="subtle">{lorem}</BodyShort>
|
||||
</div>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 6,
|
||||
};
|
||||
|
||||
function Descriptor({ children }) {
|
||||
return <p className="mb-3 text-xl font-semibold">{children}</p>;
|
||||
}
|
||||
|
||||
function Divider() {
|
||||
return <hr className="border-border-subtle" />;
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import { BodyShort, VStack } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
|
||||
|
||||
return (
|
||||
<VStack gap="4">
|
||||
<BodyShort size="large">{lorem}</BodyShort>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>Semibold</Descriptor>
|
||||
<BodyShort size="large" weight="semibold">
|
||||
{lorem}
|
||||
</BodyShort>
|
||||
</div>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>Truncate (ellipsis)</Descriptor>
|
||||
<BodyShort size="large" truncate>
|
||||
{lorem}
|
||||
</BodyShort>
|
||||
</div>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 1,
|
||||
};
|
||||
|
||||
function Descriptor({ children }) {
|
||||
return <p className="mb-3 text-xl font-semibold">{children}</p>;
|
||||
}
|
||||
|
||||
function Divider() {
|
||||
return <hr className="border-border-subtle" />;
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import { BodyShort, VStack } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
|
||||
|
||||
return (
|
||||
<VStack gap="4">
|
||||
<BodyShort>{lorem}</BodyShort>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>Semibold</Descriptor>
|
||||
<BodyShort weight="semibold">{lorem}</BodyShort>
|
||||
</div>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>Truncate (ellipsis)</Descriptor>
|
||||
<BodyShort truncate>{lorem}</BodyShort>
|
||||
</div>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 0,
|
||||
};
|
||||
|
||||
function Descriptor({ children }) {
|
||||
return <p className="mb-3 text-xl font-semibold">{children}</p>;
|
||||
}
|
||||
|
||||
function Divider() {
|
||||
return <hr className="border-border-subtle" />;
|
||||
}
|
||||
+2
-2
@@ -2,7 +2,7 @@ import { BodyShort } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
return <BodyShort>The red fox jumps over the lazy brown dog.</BodyShort>;
|
||||
return <BodyShort as="span">Dette er nå en span!</BodyShort>;
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
@@ -13,5 +13,5 @@ export const Demo = {
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 0,
|
||||
index: 8,
|
||||
};
|
||||
@@ -1,11 +1,27 @@
|
||||
import { BodyShort } from "@navikt/ds-react";
|
||||
import { BodyShort, VStack } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
|
||||
|
||||
return (
|
||||
<BodyShort size="small">
|
||||
The red fox jumps over the lazy brown dog.
|
||||
</BodyShort>
|
||||
<VStack gap="4">
|
||||
<BodyShort size="small">{lorem}</BodyShort>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>Semibold</Descriptor>
|
||||
<BodyShort size="small" weight="semibold">
|
||||
{lorem}
|
||||
</BodyShort>
|
||||
</div>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>Truncate (ellipsis)</Descriptor>
|
||||
<BodyShort size="small" truncate>
|
||||
{lorem}
|
||||
</BodyShort>
|
||||
</div>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -19,3 +35,11 @@ export const Demo = {
|
||||
export const args = {
|
||||
index: 2,
|
||||
};
|
||||
|
||||
function Descriptor({ children }) {
|
||||
return <p className="mb-3 text-xl font-semibold">{children}</p>;
|
||||
}
|
||||
|
||||
function Divider() {
|
||||
return <hr className="border-border-subtle" />;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import { BodyShort } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
|
||||
|
||||
return (
|
||||
<div>
|
||||
<BodyShort size="large" spacing>
|
||||
{lorem}
|
||||
</BodyShort>
|
||||
<BodyShort size="large" spacing>
|
||||
{lorem}
|
||||
</BodyShort>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 3,
|
||||
};
|
||||
+5
-3
@@ -2,10 +2,12 @@ import { BodyShort } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
|
||||
|
||||
return (
|
||||
<div>
|
||||
<BodyShort spacing>The red fox jumps over the lazy brown dog.</BodyShort>
|
||||
<BodyShort>The red fox jumps over the lazy brown dog.</BodyShort>
|
||||
<BodyShort spacing>{lorem}</BodyShort>
|
||||
<BodyShort spacing>{lorem}</BodyShort>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -18,5 +20,5 @@ export const Demo = {
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 1,
|
||||
index: 4,
|
||||
};
|
||||
@@ -0,0 +1,28 @@
|
||||
import { BodyShort } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
|
||||
|
||||
return (
|
||||
<div>
|
||||
<BodyShort size="small" spacing>
|
||||
{lorem}
|
||||
</BodyShort>
|
||||
<BodyShort size="small" spacing>
|
||||
{lorem}
|
||||
</BodyShort>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 5,
|
||||
};
|
||||
@@ -0,0 +1,44 @@
|
||||
import { Detail, VStack } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
|
||||
|
||||
return (
|
||||
<VStack gap="4">
|
||||
<div>
|
||||
<Descriptor>Start</Descriptor>
|
||||
<Detail align="start">{lorem}</Detail>
|
||||
</div>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>Center</Descriptor>
|
||||
<Detail align="center">{lorem}</Detail>
|
||||
</div>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>End</Descriptor>
|
||||
<Detail align="end">{lorem}</Detail>
|
||||
</div>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 3,
|
||||
};
|
||||
|
||||
function Descriptor({ children }) {
|
||||
return <p className="mb-3 text-xl font-semibold">{children}</p>;
|
||||
}
|
||||
|
||||
function Divider() {
|
||||
return <hr className="border-border-subtle" />;
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import { Detail, VStack } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
|
||||
|
||||
return (
|
||||
<VStack gap="4">
|
||||
<div>
|
||||
<Descriptor>Default</Descriptor>
|
||||
<Detail color="default">{lorem}</Detail>
|
||||
</div>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>Subtle</Descriptor>
|
||||
<Detail color="subtle">{lorem}</Detail>
|
||||
</div>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 2,
|
||||
};
|
||||
|
||||
function Descriptor({ children }) {
|
||||
return <p className="mb-3 text-xl font-semibold">{children}</p>;
|
||||
}
|
||||
|
||||
function Divider() {
|
||||
return <hr className="border-border-subtle" />;
|
||||
}
|
||||
@@ -1,8 +1,24 @@
|
||||
import { Detail } from "@navikt/ds-react";
|
||||
import { Detail, VStack } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
return <Detail>The red fox jumps over the lazy brown dog.</Detail>;
|
||||
const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
|
||||
|
||||
return (
|
||||
<VStack gap="4">
|
||||
<Detail>{lorem}</Detail>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>Semibold</Descriptor>
|
||||
<Detail weight="semibold">{lorem}</Detail>
|
||||
</div>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>Truncate (ellipsis)</Descriptor>
|
||||
<Detail truncate>{lorem}</Detail>
|
||||
</div>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
@@ -15,3 +31,11 @@ export const Demo = {
|
||||
export const args = {
|
||||
index: 0,
|
||||
};
|
||||
|
||||
function Descriptor({ children }) {
|
||||
return <p className="mb-3 text-xl font-semibold">{children}</p>;
|
||||
}
|
||||
|
||||
function Divider() {
|
||||
return <hr className="border-border-subtle" />;
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { Detail } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
return <Detail as="span">Dette er nå en span!</Detail>;
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 4,
|
||||
};
|
||||
@@ -2,10 +2,12 @@ import { Detail } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Detail spacing>The red fox jumps over the lazy brown dog.</Detail>
|
||||
<Detail>The red fox jumps over the lazy brown dog.</Detail>
|
||||
<Detail spacing>{lorem}</Detail>
|
||||
<Detail spacing>{lorem}</Detail>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
import { Heading, VStack } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
const lorem = "Hva kan vi hjelpe deg med?";
|
||||
|
||||
return (
|
||||
<VStack gap="4">
|
||||
<div>
|
||||
<Descriptor>Start</Descriptor>
|
||||
<Heading align="start" size="medium">
|
||||
{lorem}
|
||||
</Heading>
|
||||
</div>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>Center</Descriptor>
|
||||
<Heading align="center" size="medium">
|
||||
{lorem}
|
||||
</Heading>
|
||||
</div>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>End</Descriptor>
|
||||
<Heading align="end" size="medium">
|
||||
{lorem}
|
||||
</Heading>
|
||||
</div>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 8,
|
||||
};
|
||||
|
||||
function Descriptor({ children }) {
|
||||
return <p className="mb-3 text-xl font-semibold">{children}</p>;
|
||||
}
|
||||
|
||||
function Divider() {
|
||||
return <hr className="border-border-subtle" />;
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import { Heading, VStack } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
const lorem = "Hva kan vi hjelpe deg med?";
|
||||
|
||||
return (
|
||||
<VStack gap="4">
|
||||
<div>
|
||||
<Descriptor>Default</Descriptor>
|
||||
<Heading color="default" size="medium">
|
||||
{lorem}
|
||||
</Heading>
|
||||
</div>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>Subtle</Descriptor>
|
||||
<Heading color="subtle" size="medium">
|
||||
{lorem}
|
||||
</Heading>
|
||||
</div>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 7,
|
||||
};
|
||||
|
||||
function Descriptor({ children }) {
|
||||
return <p className="mb-3 text-xl font-semibold">{children}</p>;
|
||||
}
|
||||
|
||||
function Divider() {
|
||||
return <hr className="border-border-subtle" />;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import { Heading, VStack } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
const lorem = "Hva kan vi hjelpe deg med?";
|
||||
|
||||
return (
|
||||
<VStack gap="4">
|
||||
<Heading size="large">{lorem}</Heading>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>Spacing </Descriptor>
|
||||
<Heading size="large">{lorem}</Heading>
|
||||
</div>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 2,
|
||||
};
|
||||
|
||||
function Descriptor({ children }) {
|
||||
return <p className="mb-3 text-xl font-semibold">{children}</p>;
|
||||
}
|
||||
|
||||
function Divider() {
|
||||
return <hr className="border-border-subtle" />;
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
import { Heading, VStack } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
const lorem = "Hva kan vi hjelpe deg med?";
|
||||
|
||||
return (
|
||||
<VStack gap="4">
|
||||
<div>
|
||||
<Descriptor>H1</Descriptor>
|
||||
<Heading level="1" size="medium">
|
||||
{lorem}
|
||||
</Heading>
|
||||
</div>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>H2</Descriptor>
|
||||
<Heading level="2" size="medium">
|
||||
{lorem}
|
||||
</Heading>
|
||||
</div>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>H3</Descriptor>
|
||||
<Heading level="3" size="medium">
|
||||
{lorem}
|
||||
</Heading>
|
||||
</div>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>H4</Descriptor>
|
||||
<Heading level="4" size="medium">
|
||||
{lorem}
|
||||
</Heading>
|
||||
</div>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>H5</Descriptor>
|
||||
<Heading level="5" size="medium">
|
||||
{lorem}
|
||||
</Heading>
|
||||
</div>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>H6</Descriptor>
|
||||
<Heading level="6" size="medium">
|
||||
{lorem}
|
||||
</Heading>
|
||||
</div>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 6,
|
||||
};
|
||||
|
||||
function Descriptor({ children }) {
|
||||
return <p className="mb-3 text-xl font-semibold">{children}</p>;
|
||||
}
|
||||
|
||||
function Divider() {
|
||||
return <hr className="border-border-subtle" />;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import { Heading, VStack } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
const lorem = "Hva kan vi hjelpe deg med?";
|
||||
|
||||
return (
|
||||
<VStack gap="4">
|
||||
<Heading size="medium">{lorem}</Heading>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>Spacing </Descriptor>
|
||||
<Heading size="medium">{lorem}</Heading>
|
||||
</div>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 0,
|
||||
};
|
||||
|
||||
function Descriptor({ children }) {
|
||||
return <p className="mb-3 text-xl font-semibold">{children}</p>;
|
||||
}
|
||||
|
||||
function Divider() {
|
||||
return <hr className="border-border-subtle" />;
|
||||
}
|
||||
+3
-3
@@ -3,8 +3,8 @@ import { withDsExample } from "components/website-modules/examples/withDsExample
|
||||
|
||||
const Example = () => {
|
||||
return (
|
||||
<Heading level="1" size="xlarge">
|
||||
Pengestøtte når du er syk
|
||||
<Heading size="medium" as="span">
|
||||
Dette er nå en span!
|
||||
</Heading>
|
||||
);
|
||||
};
|
||||
@@ -17,5 +17,5 @@ export const Demo = {
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 0,
|
||||
index: 9,
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
import { Heading } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
return (
|
||||
<div className="grid gap-2">
|
||||
<Heading level="1" size="xlarge">
|
||||
Pengestøtte når du er syk
|
||||
</Heading>
|
||||
<Heading level="2" size="large">
|
||||
Pengestøtte når du er syk
|
||||
</Heading>
|
||||
<Heading level="3" size="medium">
|
||||
Pengestøtte når du er syk
|
||||
</Heading>
|
||||
<Heading level="4" size="small">
|
||||
Pengestøtte når du er syk
|
||||
</Heading>
|
||||
<Heading level="5" size="xsmall">
|
||||
Pengestøtte når du er syk
|
||||
</Heading>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 1,
|
||||
desc: "Du må selv velge hvilken h-tag Heading rendres som ved hjelp av level-prop.",
|
||||
};
|
||||
@@ -0,0 +1,36 @@
|
||||
import { Heading, VStack } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
const lorem = "Hva kan vi hjelpe deg med?";
|
||||
|
||||
return (
|
||||
<VStack gap="4">
|
||||
<Heading size="small">{lorem}</Heading>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>Spacing </Descriptor>
|
||||
<Heading size="small">{lorem}</Heading>
|
||||
</div>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 3,
|
||||
};
|
||||
|
||||
function Descriptor({ children }) {
|
||||
return <p className="mb-3 text-xl font-semibold">{children}</p>;
|
||||
}
|
||||
|
||||
function Divider() {
|
||||
return <hr className="border-border-subtle" />;
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
import { BodyLong, Heading } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
return (
|
||||
<div>
|
||||
<Heading level="3" size="medium" spacing>
|
||||
Pengestøtte når du er syk
|
||||
</Heading>
|
||||
<BodyLong>
|
||||
Magna aliqua et adipisicing nostrud elit ea. Id ipsum ut laborum ut
|
||||
adipisicing magna laboris pariatur commodo quis nulla ea aliquip mollit.
|
||||
Nisi aliquip voluptate laboris nisi eiusmod labore eu non. Deserunt sint
|
||||
incididunt est sunt ex labore irure irure est eiusmod.
|
||||
</BodyLong>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 2,
|
||||
};
|
||||
@@ -0,0 +1,36 @@
|
||||
import { Heading, VStack } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
const lorem = "Hva kan vi hjelpe deg med?";
|
||||
|
||||
return (
|
||||
<VStack gap="4">
|
||||
<Heading size="xlarge">{lorem}</Heading>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>Spacing</Descriptor>
|
||||
<Heading size="xlarge">{lorem}</Heading>
|
||||
</div>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 1,
|
||||
};
|
||||
|
||||
function Descriptor({ children }) {
|
||||
return <p className="mb-3 text-xl font-semibold">{children}</p>;
|
||||
}
|
||||
|
||||
function Divider() {
|
||||
return <hr className="border-border-subtle" />;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import { Heading, VStack } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
const lorem = "Hva kan vi hjelpe deg med?";
|
||||
|
||||
return (
|
||||
<VStack gap="4">
|
||||
<Heading size="xsmall">{lorem}</Heading>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>Spacing </Descriptor>
|
||||
<Heading size="xsmall">{lorem}</Heading>
|
||||
</div>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 4,
|
||||
};
|
||||
|
||||
function Descriptor({ children }) {
|
||||
return <p className="mb-3 text-xl font-semibold">{children}</p>;
|
||||
}
|
||||
|
||||
function Divider() {
|
||||
return <hr className="border-border-subtle" />;
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
import { BodyLong, Ingress } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
return (
|
||||
<div>
|
||||
<Ingress spacing>
|
||||
Blir du sykmeldt, trenger du å vite hvilke regler som gjelder mens du er
|
||||
syk og hva som kreves for å få utbetalt sykepenger.
|
||||
</Ingress>
|
||||
<BodyLong>
|
||||
Magna aliqua et adipisicing nostrud elit ea. Id ipsum ut laborum ut
|
||||
adipisicing magna laboris pariatur commodo quis nulla ea aliquip mollit.
|
||||
Nisi aliquip voluptate laboris nisi eiusmod labore eu non. Deserunt sint
|
||||
incididunt est sunt ex labore irure irure est eiusmod.
|
||||
</BodyLong>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 1,
|
||||
};
|
||||
@@ -0,0 +1,40 @@
|
||||
import { Label, VStack } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
const lorem =
|
||||
"Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon";
|
||||
|
||||
return (
|
||||
<VStack gap="4">
|
||||
<div>
|
||||
<Descriptor>Default</Descriptor>
|
||||
<Label textColor="default">{lorem}</Label>
|
||||
</div>
|
||||
<Divider />
|
||||
<div>
|
||||
<Descriptor>Subtle</Descriptor>
|
||||
<Label textColor="subtle">{lorem}</Label>
|
||||
</div>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 4,
|
||||
};
|
||||
|
||||
function Descriptor({ children }) {
|
||||
return <p className="mb-3 text-xl font-semibold">{children}</p>;
|
||||
}
|
||||
|
||||
function Divider() {
|
||||
return <hr className="border-border-subtle" />;
|
||||
}
|
||||
+4
-2
@@ -2,7 +2,10 @@ import { Label } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
return <Label>The red fox jumps over the lazy brown dog.</Label>;
|
||||
const lorem =
|
||||
"Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon";
|
||||
|
||||
return <Label>{lorem}</Label>;
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
@@ -14,5 +17,4 @@ export const Demo = {
|
||||
|
||||
export const args = {
|
||||
index: 0,
|
||||
desc: "Label rendres i dag som et 'label'-element. Husk å endre til riktig tag ved bruk av 'as'-prop hvis du vil bruke eks span/p",
|
||||
};
|
||||
@@ -0,0 +1,17 @@
|
||||
import { Label } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
return <Label as="span">Dette er nå en span!</Label>;
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 5,
|
||||
};
|
||||
@@ -2,7 +2,10 @@ import { Label } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
return <Label size="small">The red fox jumps over the lazy brown dog.</Label>;
|
||||
const lorem =
|
||||
"Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon";
|
||||
|
||||
return <Label size="small">{lorem}</Label>;
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
@@ -13,5 +16,5 @@ export const Demo = {
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 2,
|
||||
index: 1,
|
||||
};
|
||||
+6
-5
@@ -2,12 +2,13 @@ import { Label } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
const lorem =
|
||||
"Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon";
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Label spacing as="p">
|
||||
The red fox jumps over the lazy brown dog.
|
||||
</Label>
|
||||
<Label as="p">The red fox jumps over the lazy brown dog.</Label>
|
||||
<Label spacing>{lorem}</Label>
|
||||
<Label spacing>{lorem}</Label>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -20,5 +21,5 @@ export const Demo = {
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 1,
|
||||
index: 2,
|
||||
};
|
||||
@@ -0,0 +1,29 @@
|
||||
import { Label } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
const lorem =
|
||||
"Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon";
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Label size="small" spacing>
|
||||
{lorem}
|
||||
</Label>
|
||||
<Label size="small" spacing>
|
||||
{lorem}
|
||||
</Label>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 3,
|
||||
};
|
||||
@@ -10,8 +10,8 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@navikt/ds-css": "5.2.0",
|
||||
"@navikt/ds-react": "5.2.0",
|
||||
"@navikt/ds-css": "5.3.0",
|
||||
"@navikt/ds-react": "5.3.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
},
|
||||
|
||||
@@ -3438,7 +3438,7 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@navikt/aksel-icons@^5.1.0, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
|
||||
"@navikt/aksel-icons@^5.2.0, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
|
||||
dependencies:
|
||||
@@ -3465,8 +3465,8 @@ __metadata:
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint"
|
||||
dependencies:
|
||||
"@navikt/ds-css": ^5.1.0
|
||||
"@navikt/ds-tokens": ^5.1.0
|
||||
"@navikt/ds-css": ^5.2.0
|
||||
"@navikt/ds-tokens": ^5.2.0
|
||||
"@types/jest": ^29.0.0
|
||||
concurrently: 7.2.1
|
||||
copyfiles: 2.4.1
|
||||
@@ -3483,7 +3483,7 @@ __metadata:
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/aksel@workspace:@navikt/aksel"
|
||||
dependencies:
|
||||
"@navikt/ds-css": 5.1.0
|
||||
"@navikt/ds-css": 5.2.0
|
||||
"@types/inquirer": ^9.0.3
|
||||
"@types/jest": ^29.0.0
|
||||
axios: 1.3.6
|
||||
@@ -3507,11 +3507,11 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@navikt/ds-css@*, @navikt/ds-css@5.1.0, @navikt/ds-css@^5.1.0, @navikt/ds-css@workspace:@navikt/core/css":
|
||||
"@navikt/ds-css@*, @navikt/ds-css@5.2.0, @navikt/ds-css@^5.2.0, @navikt/ds-css@workspace:@navikt/core/css":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-css@workspace:@navikt/core/css"
|
||||
dependencies:
|
||||
"@navikt/ds-tokens": ^5.1.0
|
||||
"@navikt/ds-tokens": ^5.2.0
|
||||
cssnano: 6.0.0
|
||||
fast-glob: 3.2.11
|
||||
lodash: 4.17.21
|
||||
@@ -3524,12 +3524,12 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@navikt/ds-react@*, @navikt/ds-react@5.1.0, @navikt/ds-react@^5.1.0, @navikt/ds-react@workspace:@navikt/core/react":
|
||||
"@navikt/ds-react@*, @navikt/ds-react@5.2.0, @navikt/ds-react@^5.2.0, @navikt/ds-react@workspace:@navikt/core/react":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-react@workspace:@navikt/core/react"
|
||||
dependencies:
|
||||
"@floating-ui/react": 0.24.1
|
||||
"@navikt/aksel-icons": ^5.1.0
|
||||
"@navikt/aksel-icons": ^5.2.0
|
||||
"@radix-ui/react-tabs": 1.0.0
|
||||
"@radix-ui/react-toggle-group": 1.0.0
|
||||
"@testing-library/dom": 8.13.0
|
||||
@@ -3563,11 +3563,11 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@navikt/ds-tailwind@^5.1.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
|
||||
"@navikt/ds-tailwind@^5.2.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
|
||||
dependencies:
|
||||
"@navikt/ds-tokens": ^5.1.0
|
||||
"@navikt/ds-tokens": ^5.2.0
|
||||
"@types/jest": ^29.0.0
|
||||
color: 4.2.3
|
||||
jest: ^29.0.0
|
||||
@@ -3578,7 +3578,7 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@navikt/ds-tokens@^5.1.0, @navikt/ds-tokens@workspace:@navikt/core/tokens":
|
||||
"@navikt/ds-tokens@^5.2.0, @navikt/ds-tokens@workspace:@navikt/core/tokens":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
|
||||
dependencies:
|
||||
@@ -8593,11 +8593,11 @@ __metadata:
|
||||
version: 0.0.0-use.local
|
||||
resolution: "aksel.nav.no@workspace:aksel.nav.no"
|
||||
dependencies:
|
||||
"@navikt/aksel-icons": ^5.1.0
|
||||
"@navikt/ds-css": ^5.1.0
|
||||
"@navikt/ds-react": ^5.1.0
|
||||
"@navikt/ds-tailwind": ^5.1.0
|
||||
"@navikt/ds-tokens": ^5.1.0
|
||||
"@navikt/aksel-icons": ^5.2.0
|
||||
"@navikt/ds-css": ^5.2.0
|
||||
"@navikt/ds-react": ^5.2.0
|
||||
"@navikt/ds-tailwind": ^5.2.0
|
||||
"@navikt/ds-tokens": ^5.2.0
|
||||
prettier-plugin-tailwindcss: ^0.2.3
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
@@ -23686,8 +23686,8 @@ __metadata:
|
||||
version: 0.0.0-use.local
|
||||
resolution: "shadow-dom@workspace:examples/shadow-dom"
|
||||
dependencies:
|
||||
"@navikt/ds-css": 5.1.0
|
||||
"@navikt/ds-react": 5.1.0
|
||||
"@navikt/ds-css": 5.2.0
|
||||
"@navikt/ds-react": 5.2.0
|
||||
"@types/react": ^18.0.0
|
||||
"@types/react-dom": ^18.0.0
|
||||
"@vitejs/plugin-react": ^3.1.0
|
||||
|
||||
Reference in new issue
Block a user