mirror of
https://github.com/navikt/aksel.git
synced 2026-10-18 19:52:02 +00:00
Compare commits
5
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Ken
|
692acc8aba | ||
|
Ken
|
6d7dbca89e | ||
|
Ken
|
54e1b07a73 | ||
|
Ken
|
1db2ebad72 | ||
|
Ken
|
2c843e51d7 |
No files matched your search
@@ -30,15 +30,10 @@ jobs:
|
||||
- name: install
|
||||
if: steps.node-cache.outputs.cache-hit != 'true'
|
||||
run: yarn install
|
||||
- name: postinstall
|
||||
if: steps.node-cache.outputs.cache-hit == 'true'
|
||||
run: yarn postinstall
|
||||
- name: Boot
|
||||
run: yarn boot
|
||||
- name: Eslint and Stylelint
|
||||
run: yarn lint
|
||||
- name: Test
|
||||
run: yarn test
|
||||
- name: add access token to .env
|
||||
run: echo "ACCESS_TOKEN=${{ secrets.VERKTOYKASSE_INNHOLD_TOKEN }}" >> website/.env
|
||||
- name: add branch token to .env
|
||||
@@ -55,17 +50,15 @@ jobs:
|
||||
publish-npm:
|
||||
needs: test-build
|
||||
runs-on: ubuntu-latest
|
||||
env:
|
||||
NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTOMATION }}
|
||||
if: github.event_name == 'push' && contains(github.event.head_commit.message, '[fix]') || contains(github.event.head_commit.message, '[feature]') || contains(github.event.head_commit.message, '[breaking]')
|
||||
if: github.event_name == 'push'
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
with:
|
||||
fetch-depth: "0"
|
||||
token: ${{secrets.GIT_REPO}}
|
||||
- uses: actions/setup-node@v2
|
||||
- uses: actions/setup-node@v1
|
||||
with:
|
||||
registry-url: https://registry.npmjs.org
|
||||
registry-url: http://registry.npmjs.org
|
||||
node-version: 14
|
||||
- name: Node-modules cache
|
||||
uses: actions/cache@v2
|
||||
@@ -85,19 +78,19 @@ jobs:
|
||||
git remote set-url origin https://github-actions[bot]:$NAV_DS_TOKEN@github.com/$GITHUB_REPOSITORY.git
|
||||
env:
|
||||
NAV_DS_TOKEN: ${{secrets.GIT_REPO}}
|
||||
|
||||
- name: Update changed packages with PATCH
|
||||
if: "contains(github.event.head_commit.message, '[fix]')"
|
||||
- name: Update all package-versions with patch
|
||||
run: yarn lerna version patch --include-merged-tags --yes
|
||||
- name: Update changed packages with MINOR
|
||||
if: "contains(github.event.head_commit.message, '[feature]')"
|
||||
run: yarn lerna version minor --include-merged-tags --yes
|
||||
- name: Update changed packages with MAJOR
|
||||
if: "contains(github.event.head_commit.message, '[breaking]')"
|
||||
run: yarn lerna version major --include-merged-tags --yes
|
||||
- name: Publish to NPM registry
|
||||
run: yarn lerna publish --no-verify-access from-package --yes
|
||||
|
||||
- name: Create a .npmrc file for NPM
|
||||
run: |
|
||||
echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> .npmrc
|
||||
npm whoami
|
||||
env:
|
||||
NPM_TOKEN: ${{secrets.NPM_AUTOMATION}}
|
||||
- name: Publish to NPM registry
|
||||
run: |
|
||||
yarn lerna publish from-package --yes
|
||||
rm .npmrc
|
||||
- name: Create a .npmrc file for the github package repository
|
||||
uses: FerLuisxd/create-npmrc@3
|
||||
with:
|
||||
@@ -111,7 +104,7 @@ jobs:
|
||||
yarn lerna publish --registry https://npm.pkg.github.com from-package --yes
|
||||
|
||||
publish-pages:
|
||||
needs: test-build
|
||||
needs: publish-npm
|
||||
runs-on: ubuntu-latest
|
||||
if: github.event_name == 'push'
|
||||
steps:
|
||||
|
||||
@@ -1,42 +0,0 @@
|
||||
name: Update Icons
|
||||
|
||||
on:
|
||||
# schedule:
|
||||
# - cron: 0 0 * * *
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
update:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 14
|
||||
- name: Node-modules cache
|
||||
uses: actions/cache@v2
|
||||
id: node-cache
|
||||
with:
|
||||
path: "**/node_modules"
|
||||
key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
|
||||
- name: install
|
||||
if: steps.node-cache.outputs.cache-hit != 'true'
|
||||
run: yarn install
|
||||
- name: postinstall
|
||||
if: steps.node-cache.outputs.cache-hit == 'true'
|
||||
run: yarn postinstall
|
||||
- name: Update Icons
|
||||
run: yarn update:icons
|
||||
env:
|
||||
FIGMA_TOKEN: ${{ secrets.FIGMA_IKONER_API }}
|
||||
- name: Create Pull Request
|
||||
uses: peter-evans/create-pull-request@v3
|
||||
with:
|
||||
token: ${{ secrets.GIT_REPO }}
|
||||
commit-message: "Ikoner synket fra figma"
|
||||
branch: figma-icons-sync
|
||||
committer: GitHub <noreply@github.com>
|
||||
author: ${{ github.actor }} <${{ github.actor }}@users.noreply.github.com>
|
||||
signoff: false
|
||||
delete-branch: true
|
||||
title: "[FIX] Ikonsynk Figma"
|
||||
@@ -1,41 +0,0 @@
|
||||
name: Update tokens
|
||||
|
||||
on:
|
||||
schedule:
|
||||
- cron: 0 0 * * *
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
update:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 14
|
||||
- name: Node-modules cache
|
||||
uses: actions/cache@v2
|
||||
id: node-cache
|
||||
with:
|
||||
path: "**/node_modules"
|
||||
key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
|
||||
- name: install
|
||||
if: steps.node-cache.outputs.cache-hit != 'true'
|
||||
run: yarn install
|
||||
- name: postinstall
|
||||
if: steps.node-cache.outputs.cache-hit == 'true'
|
||||
run: yarn postinstall
|
||||
- name: Update tokens
|
||||
run: yarn update:tokens
|
||||
env:
|
||||
FIGMA_TOKEN: ${{ secrets.FIGMA_IKONER_API }}
|
||||
- name: Create Pull Request
|
||||
uses: peter-evans/create-pull-request@v3
|
||||
with:
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
branch: figma-tokens-sync
|
||||
delete-branch: true
|
||||
title: "[FEATURE] Tokens sync Figma"
|
||||
commit-message: "Ikoner synket fra figma"
|
||||
committer: GitHub <noreply@github.com>
|
||||
signoff: false
|
||||
+3
-2
@@ -100,6 +100,7 @@ examples/webpack/out
|
||||
|
||||
*.d.ts
|
||||
*-exports.less
|
||||
**/css/
|
||||
*/figma-api/icons
|
||||
*/ds-icons/png
|
||||
packages/**/css
|
||||
@@ -107,8 +108,8 @@ utilities/**/css
|
||||
|
||||
*/static/*.zip
|
||||
*/static/png
|
||||
@navikt/core/icons/NAV-ikonpakke-png.zip
|
||||
@navikt/core/icons/NAV-ikonpakke-svg.zip
|
||||
@navikt/ds-icons/NAV-ikonpakke-png.zip
|
||||
@navikt/ds-icons/NAV-ikonpakke-svg.zip
|
||||
*/**/NAV-ikonpakke-png.zip
|
||||
*/**/NAV-ikonpakke-svg.zip
|
||||
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
{
|
||||
"repository": "@nav/designsystem",
|
||||
"head": "updated-specify-tokens",
|
||||
"base": "master",
|
||||
"rules": [
|
||||
{
|
||||
"name": "Specify / Icons",
|
||||
"path": "@navikt/ds-icons/svg",
|
||||
"filter": {
|
||||
"types": ["vector"]
|
||||
},
|
||||
"parsers": [
|
||||
{
|
||||
"name": "pascalcasify",
|
||||
"options": {
|
||||
"keys": ["name"]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "name-assets-files-by-pattern",
|
||||
"options": {
|
||||
"pattern": "{{name}}.{{format}}"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Specify / Icons - metadata",
|
||||
"path": "@navikt/ds-icons/figma-api/metadata-specify.json",
|
||||
"filter": {
|
||||
"types": ["vector"]
|
||||
},
|
||||
"parsers": [
|
||||
{
|
||||
"name": "pascalcasify",
|
||||
"options": {
|
||||
"keys": ["name"]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "pick",
|
||||
"options": {
|
||||
"keys": [
|
||||
"name",
|
||||
"createdAt",
|
||||
"updatedAt",
|
||||
"meta.description",
|
||||
"meta.parentFrame",
|
||||
"meta.frame",
|
||||
"page"
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -11,7 +11,6 @@ module.exports = {
|
||||
],
|
||||
addons: [
|
||||
"@storybook/addon-docs",
|
||||
"@storybook/addon-a11y",
|
||||
{
|
||||
name: "@storybook/addon-storysource",
|
||||
options: {
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import "nav-frontend-core";
|
||||
import "@navikt/ds-css/index.css";
|
||||
import "@navikt/ds-css-internal/index.css";
|
||||
|
||||
export const parameters = {
|
||||
actions: { argTypesRegex: "^on[A-Z].*" },
|
||||
|
||||
@@ -20,16 +20,3 @@ import "@navikt/ds-css"
|
||||
Dette vil også legge css-variabler på :root. For å få dette til å fungere med IE11, kan denne pakken tas i bruk: https://jhildenbiddle.github.io/css-vars-ponyfill/#/
|
||||
|
||||
Note: Disse komponentene kan ikke garanteres at fungerer som forventet i IE11 da vi har valgt og ikke unngå styling-valg basert på IE11 støtte eller ikke.
|
||||
|
||||
## Bruke styled-components eller emotion
|
||||
|
||||
Flere av våre komponenter er implementert med OverridableComponent. Dette vil si at komponenten tar i mot en prop, `as` som lar deg endre hvilken tag som blir satt.
|
||||
Bruk for dette er eks hvis du ønsker `Heading` stilen, men ikke en heading-tag. Da kan man lett skrive `<Heading as="div">` og man vil få en `div`-tag istedenfor.
|
||||
|
||||
Flere css-in-js bibliotek har også denne funksjonaliteten bygd inne, noe som kan komplisere ting når alle bruker samme navn `as` for dette.
|
||||
|
||||
### Løsninger
|
||||
|
||||
[Styled-components](https://styled-components.com/docs/api#forwardedas-prop)
|
||||
|
||||
> TLDR: Bruk `forwardedAs` istendenfor `as` på komponentene, SD fikser resten.
|
||||
@@ -1,255 +0,0 @@
|
||||
import { Meta } from "@storybook/addon-docs";
|
||||
|
||||
<Meta title="ds-react/Migration" />
|
||||
|
||||
# Migreringsguider
|
||||
|
||||
## Migrering til ds-react v0.11, ds-css v0.10
|
||||
|
||||
### ErrorSummary
|
||||
|
||||
- ErrorSummaryItem -> ErrorSummary.Item
|
||||
Må da slette import "ErrorSummaryItem" da denne ikke er eksponert alene lengre
|
||||
|
||||
### SearchField
|
||||
|
||||
- SearchFieldButton -> SearchField.Button
|
||||
- SearchFieldClearButton -> SearchField.Clear
|
||||
- SearchFieldInput -> SearchField.Input
|
||||
|
||||
SearchFieldButton, SearchFieldClearButton og SearchFieldInput må da slettes fra imports da de ikke er eksponert lengre.
|
||||
|
||||
### CopyToClipBoard
|
||||
|
||||
Komponenten er flyttet til pakkene "@navikt/ds-react-internal" og "@navikt/ds-css-internal". API er ikke endret
|
||||
så fikses med
|
||||
|
||||
```bash
|
||||
yarn install @navikt/ds-react-internal @navikt/ds-css-internal
|
||||
```
|
||||
|
||||
## Migrering til ds-react, ds-css v0.8.0
|
||||
|
||||
Denne guiden vil være til hjelp for de som allerede har begynt å ta i bruk de nye pakkene våre tidligere enn v0.8.0.
|
||||
For de som ikke har begynt å ta i bruk pakkene kan man se bort fra denne.
|
||||
|
||||
Fra versjon v0.7 til v0.8 er det komment flere store endringer både i ds-react og ds-css. For å lettere
|
||||
oppdatere til v0.8 har vi da laget en liten guide som forklarer de største endringene.
|
||||
|
||||
## Styling
|
||||
|
||||
De fleste komponenter har fått diverse justering på styling. Anbefales da å ta en rask sjekk om alt fortsatt stemmer
|
||||
etter oppdateringen.
|
||||
|
||||
## Sizing
|
||||
|
||||
Alle komponenter som tidligere var implementert med `size`-prop har fått oppdatert
|
||||
props fra "xs", "s", "m", "l", "xl", "2xl" -> "xsmall", "small", "medium", "large", "xlarge", "2xlarge".
|
||||
|
||||
Dette betyr også at css-stylingen er eks endret fra `.navds-body-short--s` -> `.navds-body-short--small`
|
||||
|
||||
## Overridable component
|
||||
|
||||
Komponenter som tidligere implementerte ovveridable component med bruk av `component`-prop bruker nå `as`.
|
||||
Implementasjonen av OverridableComponent er WIP så kan hende typene ender opp med å krangle i enkelte tilfeller. Om så ta gjerne kontakt med oss
|
||||
slik at vi får sett på det tilfellet!
|
||||
|
||||
```jsx
|
||||
/* Før */
|
||||
<BodyShort component="span" />
|
||||
|
||||
/* Etter */
|
||||
<BodyShort as="span" />
|
||||
```
|
||||
|
||||
## Navneendringer
|
||||
|
||||
### Buttons
|
||||
|
||||
- `Primary` -> `Secondary` (Normal)
|
||||
- `Action` -> `Primary` (Hoved)
|
||||
- `Secondary` -> `Tertiary` (Flat)
|
||||
|
||||
For alle som har brukt `<Button />` så må man fikse slik at riktige knapper blir brukt der de skal!
|
||||
|
||||
## Nytt
|
||||
|
||||
- GuidePanel (veilederpanel)
|
||||
- HelpText (Hjeleptext)
|
||||
|
||||
### Typography
|
||||
|
||||
Vi har valgt å endre fra `<Title/>` -> `<Heading/>` i typografien vår da dette ga mer mening i bruk.
|
||||
APIet til komponenten er ikke endret borsett fra "Sizing" endringene nevt lengre opp, så skal bare være en rask search/replace.
|
||||
|
||||
For de som har brukt css-en direkte, eks `navds-title` så må man endre til `navds-heading`
|
||||
|
||||
Endret `Header` -> `PageHeader`, samme som er nevnt ang endringen over gjelder her også: sjekk css hvis brukt direkte.
|
||||
|
||||
## Fjernet komponenter
|
||||
|
||||
Fjernet da den var utdaterte/må ses mer på
|
||||
|
||||
- ProductPageLayout
|
||||
|
||||
## Typography
|
||||
|
||||
Linjehøyder for alle typo-komponentene er oppdatert til å matche figma.
|
||||
|
||||
Lagt til en Heading lvl 6 og size="xsmall"
|
||||
|
||||
## AccordionMenu
|
||||
|
||||
Implementert med dot-notation
|
||||
|
||||
- Trenger bare importere AccordionMenu
|
||||
- AccordionMenuCollapsable -> AccordionMenu.Collapsable
|
||||
- AccordionMenuItem -> AccordionMenu.Item
|
||||
|
||||
## Accordion
|
||||
|
||||
Implementert med dot-notation
|
||||
|
||||
- Trenger bare importere Accordion nå
|
||||
|
||||
Fragmenterte komponenten:
|
||||
|
||||
- Accordion -> Accordion.Item
|
||||
- Header -> Accordion.Header
|
||||
- children -> Accordion.Content
|
||||
|
||||
La til prop: `defaultOpen` på `Accordion.Item`
|
||||
|
||||
```jsx
|
||||
/* Før */
|
||||
<Accordion heading="tittel" open={open} onClick={(open) => setOpen(!open)}>
|
||||
Eu magna fugiat officia
|
||||
</Accordion>
|
||||
<Accordion heading="tittel2" open={open2} onClick={(open2) => setOpen(!open2)}>
|
||||
Eu magna fugiat officia
|
||||
</Accordion>
|
||||
|
||||
/* Etter */
|
||||
<Accordion>
|
||||
<Accordion.Item open={open}>
|
||||
<Accordion.Header onClick={(open) => setOpen(!open)}>
|
||||
Accordion header text
|
||||
</Accordion.Header>
|
||||
<Accordion.Content>
|
||||
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
|
||||
laboris voluptate officia pariatur.Lorem est ex anim velit
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
<Accordion.Item open={open2}>
|
||||
<Accordion.Header onClick={(open2) => setOpen(!open2)}>
|
||||
Accordion header text
|
||||
</Accordion.Header>
|
||||
<Accordion.Content>
|
||||
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
|
||||
laboris voluptate officia pariatur.Lorem est ex anim velit
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
```
|
||||
|
||||
## Alert
|
||||
|
||||
- La til `fullWidth`-prop for alert uten border-radius og width 100%
|
||||
- La til `inline`-prop for alert med transparent border/background og 0 padding.
|
||||
|
||||
## Button
|
||||
|
||||
Oppdatert med Overridablecomponent.
|
||||
|
||||
Håndtering av sentrering, margins er oppdatert. Trenger ikke wrappe tekst med `span` når man skal bruke ikoner lengre.
|
||||
|
||||
Hvis man skal manuelt justere på alignment av innhold, eks bruke `flex-direction: column` må man sette
|
||||
det på css-klassen `.navds-button__inner` da children er wrappet i den.
|
||||
|
||||
## CopyToClipboard
|
||||
|
||||
Ekstender nå ButtonProps, slik at man eks kan ta i bruk `size`-proppen
|
||||
|
||||
`text`-prop -> `copyText`
|
||||
`label`-prop -> `popoverText`
|
||||
|
||||
Fjernet `icon`-prop, la til `popoverPlacement`
|
||||
|
||||
## Modal
|
||||
|
||||
Implementert med dot-notasjon
|
||||
|
||||
Innholds-padding er flyttet fra Modal -> Modal.Content
|
||||
|
||||
```
|
||||
/* Før */
|
||||
<Modal>Modal innhold</Modal>
|
||||
|
||||
/* Etter */
|
||||
<Modal><Modal.Content>Modal innhold</Modal.Content></Modal>
|
||||
```
|
||||
|
||||
## LinkPanel
|
||||
|
||||
Implementert med dot-notasjon
|
||||
|
||||
```jsx
|
||||
/* Før */
|
||||
<LinkPanel href="#">Consectetur eu duis aliqua eu irure fugiat fugiat eu.</LinkPanel>
|
||||
|
||||
/* Etter */
|
||||
<LinkPanel href="#">
|
||||
<LinkPanel.Title>
|
||||
Consectetur eu duis aliqua eu irure fugiat fugiat eu.
|
||||
</LinkPanel.Title>
|
||||
</LinkPanel>
|
||||
```
|
||||
|
||||
Kan nå legge til en beskrivelse med `Linkpanel.Description`
|
||||
|
||||
```jsx
|
||||
<LinkPanel href="#">
|
||||
<LinkPanel.Title>
|
||||
Consectetur eu duis aliqua eu irure fugiat fugiat eu.
|
||||
</LinkPanel.Title>
|
||||
<LinkPanel.Description>Aliqua id aliquip Lorem esse</LinkPanel.Description>
|
||||
</LinkPanel>
|
||||
```
|
||||
|
||||
## Popover
|
||||
|
||||
Implementert med dot-notasjon
|
||||
|
||||
Får nå padding rundt innhold med Popover.Content
|
||||
|
||||
```jsx
|
||||
|
||||
/* Før */
|
||||
|
||||
<Popover>Popover innhold</Popover>
|
||||
|
||||
/* Etter */
|
||||
|
||||
<Popover>
|
||||
<Popover.Content>Modal innhold</Popover.Content>
|
||||
</Popover>
|
||||
```
|
||||
|
||||
## Header -> PageHeader
|
||||
|
||||
Props må fikses for de som har brukt denne komponenten, i tilleg til å endre navn.
|
||||
|
||||
- `variant`-prop -> `align`
|
||||
- `theme`-prop -> `variant`
|
||||
|
||||
## MicroCard
|
||||
|
||||
- Oppdatert med OverridableComponent
|
||||
|
||||
## SpeechBubble
|
||||
|
||||
Implementert med Dot-notasjon
|
||||
|
||||
- `<Bubble/>` -> `<SpeechBubble.Bubble/>`
|
||||
|
||||
Bubble er fortsatt eksportert så vil ikke brekke noe for de som har begynt å ta denne i bruk.
|
||||
@@ -1,269 +0,0 @@
|
||||
import { Table as DsTable } from "@navikt/ds-react";
|
||||
import {
|
||||
SuccessFilled as SuccessIcon,
|
||||
ErrorFilled as ErrorIcon,
|
||||
} from "@navikt/ds-icons";
|
||||
import styled from "styled-components";
|
||||
|
||||
const Success = styled(SuccessIcon)`
|
||||
color: var(--navds-color-green-50);
|
||||
`;
|
||||
|
||||
const Error = styled(ErrorIcon)`
|
||||
color: var(--navds-color-red-50);
|
||||
`;
|
||||
|
||||
const Table = styled(DsTable)`
|
||||
.navds-table__cell > svg,
|
||||
.navds-table__cell > span {
|
||||
vertical-align: middle;
|
||||
margin-left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
`;
|
||||
|
||||
type CompT = {
|
||||
name: string;
|
||||
status: Partial<[boolean, boolean, boolean]>;
|
||||
desc?: React.ReactNode;
|
||||
};
|
||||
|
||||
const Components: CompT[] = [
|
||||
{
|
||||
name: "Alertstriper",
|
||||
status: [true, true, true],
|
||||
desc: "Navn: Alert",
|
||||
},
|
||||
{ name: "Chevron", status: [false], desc: "" },
|
||||
{
|
||||
name: "Core",
|
||||
status: [true, true, false],
|
||||
desc: <code>@navikt/ds-css</code>,
|
||||
},
|
||||
{
|
||||
name: "Ekspanderbartpanel",
|
||||
status: [true, true, true],
|
||||
desc: "Navn: Accordion, styling ikke oppdatert til nyeste versjon",
|
||||
},
|
||||
{ name: "Etiketter", status: [true, true, false], desc: "Navn: Tag" },
|
||||
{
|
||||
name: "Fullbreddeknapp-style",
|
||||
status: [false],
|
||||
desc: "",
|
||||
},
|
||||
{ name: "Grid", status: [true, true, false], desc: "Navn: Grid" },
|
||||
{ name: "Hjelpetekst", status: [true, true, true], desc: "Navn: HelpText" },
|
||||
{
|
||||
name: "Ikoner-assets",
|
||||
status: [true, true, true],
|
||||
desc: <code>@navikt/ds-icons</code>,
|
||||
},
|
||||
{
|
||||
name: "js-utils",
|
||||
status: [true, true, false],
|
||||
desc:
|
||||
"Diverse util-funksjoner blir eksponert gjennom ds-react, men tar for det meste i bruk npm pakker",
|
||||
},
|
||||
{ name: "Knapper", status: [true, true, true], desc: "Navn: Button" },
|
||||
{ name: "Lenkepanel", status: [true, true, true], desc: "Navn: LinkPanel" },
|
||||
{ name: "Lenker", status: [true, true, true], desc: "Navn: Link" },
|
||||
{ name: "Lesmerpanel", status: [false], desc: "" },
|
||||
{ name: "Lukknapp", status: [false], desc: `Bruk Button med "Close"-ikon` },
|
||||
{ name: "Modal", status: [true, true, true], desc: "Navn: Modal" },
|
||||
{ name: "Paneler", status: [true, true, true], desc: "Navn: Panel" },
|
||||
{
|
||||
name: "Bekrefcheckbokspanel",
|
||||
status: [true, true, true],
|
||||
desc: "Navn: ConfirmationPanel",
|
||||
},
|
||||
{
|
||||
name: "Checkbokspanel-gruppe",
|
||||
status: [false],
|
||||
desc: "Panel-versjon vil ikke tas videre i nytt system",
|
||||
},
|
||||
{
|
||||
name: "Checkbokspanel",
|
||||
status: [false],
|
||||
desc: "Panel-versjon vil ikke tas videre i nytt system",
|
||||
},
|
||||
{
|
||||
name: "Checkbox-gruppe",
|
||||
status: [true, true, true],
|
||||
desc: "Navn: CheckboxGroup",
|
||||
},
|
||||
{ name: "Checkbox", status: [true, true, true], desc: "Navn: Checkbox" },
|
||||
{
|
||||
name: "Feiloppsummering",
|
||||
status: [true, true, false],
|
||||
desc: "Navn: ErrorSummary, API vil bli endret for denne",
|
||||
},
|
||||
{
|
||||
name: "Fnr-input",
|
||||
status: [false],
|
||||
desc:
|
||||
"Skjema-elementer med validering vil ikke bli lagt til med det første, men vil diskuteres i fremtiden",
|
||||
},
|
||||
{ name: "Input", status: [true, true, true], desc: "Navn: TextField" },
|
||||
{
|
||||
name: "Label",
|
||||
status: [false],
|
||||
desc: "Skjema-elementer fikser dette selv",
|
||||
},
|
||||
{ name: "Radio-Gruppe", status: [true, true, true], desc: "RadioGroup" },
|
||||
{ name: "Radio", status: [true, true, true], desc: "Navn: Radio" },
|
||||
{
|
||||
name: "Radiopanel-gruppe",
|
||||
status: [false],
|
||||
desc: "Panel-versjon vil ikke tas videre i nytt system",
|
||||
},
|
||||
{
|
||||
name: "Radio-panel",
|
||||
status: [false],
|
||||
desc: "Panel-versjon vil ikke tas videre i nytt system",
|
||||
},
|
||||
{ name: "Select", status: [true, true, true], desc: "Navn: Select" },
|
||||
{ name: "Skjema-gruppe", status: [true, true, true], desc: "Navn: Fieldset" },
|
||||
{
|
||||
name: "Skjemaelement-feilemelding",
|
||||
status: [false],
|
||||
desc: "",
|
||||
},
|
||||
{ name: "Textarea", status: [true, true, true], desc: "Navn: Textarea" },
|
||||
{ name: "Togglegruppe", status: [true, false, false], desc: "" },
|
||||
{ name: "ToggleKnapp", status: [true, false, false], desc: "" },
|
||||
{
|
||||
name: "Toggle",
|
||||
status: [true, false, false],
|
||||
desc: "Vil bli samme komponent som ToggleKnapp",
|
||||
},
|
||||
{ name: "Popover", status: [true, true, true], desc: "Navn: Popover" },
|
||||
{ name: "Snakkeboble", status: [true, true, true], desc: "SpeechBubble" },
|
||||
{ name: "Spinner", status: [true, true, true], desc: "Navn: Loader" },
|
||||
{ name: "Stegindikator", status: [true, false, false], desc: "" },
|
||||
{
|
||||
name: "Tabell-style",
|
||||
status: [true, true, false],
|
||||
desc: "Navn: Table, Er nå publisert som React-component",
|
||||
},
|
||||
{ name: "Tabs", status: [true, false, false], desc: "" },
|
||||
{ name: "Tekstomrade", status: [false], desc: "" },
|
||||
{
|
||||
name: "Typografi",
|
||||
status: [true, true, true],
|
||||
desc: "Navn: se typography-mappen i storybook",
|
||||
},
|
||||
{ name: "veileder", status: [false], desc: "" },
|
||||
{
|
||||
name: "Veilederpanel",
|
||||
status: [true, true, true],
|
||||
desc: "Navn: GuidePanel",
|
||||
},
|
||||
];
|
||||
|
||||
const NewComps: CompT[] = [
|
||||
{
|
||||
name: "AccordionMenu",
|
||||
status: [true, true, true],
|
||||
desc: "",
|
||||
},
|
||||
{
|
||||
name: "SearcField",
|
||||
status: [true, true, false],
|
||||
desc: "Denne vil undergå større endringer",
|
||||
},
|
||||
{
|
||||
name: "MicroCard",
|
||||
status: [true, true, false],
|
||||
desc: "Vil flyttes over i egen navno pakke for eksterne sider",
|
||||
},
|
||||
{
|
||||
name: "PageHeader",
|
||||
status: [true, true, false],
|
||||
desc: "Vil flyttes over i egen navno pakke for eksterne sider",
|
||||
},
|
||||
{
|
||||
name: "CopyToClipboard",
|
||||
status: [true, true, false],
|
||||
desc: "Vil flyttes over til @navikt/ds-react-internal pakke",
|
||||
},
|
||||
{
|
||||
name: "Table",
|
||||
status: [true, true, false],
|
||||
desc:
|
||||
"Implementer stylingen til nav-frontend-table-styles, API vil videreutvikles",
|
||||
},
|
||||
{
|
||||
name: "Switch",
|
||||
status: [true, false, false],
|
||||
desc: "",
|
||||
},
|
||||
{
|
||||
name: "Tooltip",
|
||||
status: [true, false, false],
|
||||
desc: "",
|
||||
},
|
||||
{
|
||||
name: "Timeline",
|
||||
status: [true, false, false],
|
||||
desc: "",
|
||||
},
|
||||
];
|
||||
|
||||
const CompTable = ({ list }) => (
|
||||
<Table>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell>Komponent</Table.HeaderCell>
|
||||
<Table.HeaderCell>Med i nytt system</Table.HeaderCell>
|
||||
<Table.HeaderCell>Publisert i pakker</Table.HeaderCell>
|
||||
<Table.HeaderCell>Fullført**</Table.HeaderCell>
|
||||
<Table.HeaderCell>Info</Table.HeaderCell>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{list.map((comp) => {
|
||||
return (
|
||||
<Table.Row>
|
||||
<Table.HeaderCell>{comp.name}</Table.HeaderCell>
|
||||
<Table.DataCell>
|
||||
{comp.status?.[0] === undefined ? (
|
||||
<span>-</span>
|
||||
) : comp.status?.[0] ? (
|
||||
<Success />
|
||||
) : (
|
||||
<Error />
|
||||
)}
|
||||
</Table.DataCell>
|
||||
<Table.DataCell>
|
||||
{comp.status?.[1] === undefined ? (
|
||||
<span>-</span>
|
||||
) : comp.status?.[1] ? (
|
||||
<Success />
|
||||
) : (
|
||||
<Error />
|
||||
)}
|
||||
</Table.DataCell>
|
||||
<Table.DataCell>
|
||||
{comp.status?.[2] === undefined ? (
|
||||
<span>-</span>
|
||||
) : comp.status?.[1] ? (
|
||||
<Success />
|
||||
) : (
|
||||
<Error />
|
||||
)}
|
||||
</Table.DataCell>
|
||||
<Table.DataCell>{comp.desc ? comp.desc : "-"}</Table.DataCell>
|
||||
</Table.Row>
|
||||
);
|
||||
})}
|
||||
</Table.Body>
|
||||
</Table>
|
||||
);
|
||||
|
||||
export const NewCompTable = () => {
|
||||
return <CompTable list={NewComps} />;
|
||||
};
|
||||
|
||||
export const OldCompTable = () => {
|
||||
return <CompTable list={Components} />;
|
||||
};
|
||||
@@ -1,30 +1,16 @@
|
||||
import { Meta } from "@storybook/addon-docs";
|
||||
import { NewCompTable, OldCompTable } from "./roadmap-table.tsx";
|
||||
|
||||
<Meta title="ds-react/Roadmap" />
|
||||
|
||||
# Roadmap
|
||||
# Plan videre
|
||||
|
||||
## Komponenter
|
||||
Arbeidet med det nye pakke-oppsettet har nå foregått en stund og skulle egentlig vært
|
||||
lengre på vei en det er nå. Men arbeidet har på ingen måte stoppet opp! Vi jobber kontinuerlig med
|
||||
å finne bedre løsninger for å kunne bygge systemet opp fra bunnen av. Dette innegår da
|
||||
ny dokumentasjons-side bygd med Sanity, nye byggeblokker helt fra token-nivå og bedre sizing for eksterne/interne sider. Dette vil da forhåpentligvis la oss
|
||||
bygge mer robuste og fleksible løsninger for fremtiden.
|
||||
|
||||
\*\* Fullført betyr i denne konteksten at vi føler API-et er ok og da kan forvente mindre breaking changes.
|
||||
Komponenten kan fortsatt bli utsatt for endringer i selve designet.
|
||||
|
||||
### Nye komponenter / wip
|
||||
|
||||
<NewCompTable />
|
||||
|
||||
### Migrering av gamle komponenter
|
||||
|
||||
<OldCompTable />
|
||||
|
||||
## Plan videre
|
||||
|
||||
Vi jobber kontinuerlig med å finne bedre løsninger for å kunne bygge systemet opp fra bunnen av. Dette innegår da
|
||||
ny dokumentasjon-side under Verktøykassen, nye byggeblokker helt fra token-nivå og bedre sizing for eksterne/interne sider.
|
||||
Dette vil la oss bygge mer robuste og fleksible løsninger for fremtiden som skal være bedre tilpasset produktene våre.
|
||||
|
||||
(Rekkefølgen representer ikke faktisk tidslinje)
|
||||
(Rekkefølgen representer ikke faktisk tidsline eller prioritet)
|
||||
|
||||
## Tokens
|
||||
|
||||
@@ -34,11 +20,12 @@ Dette vil gjøre styling og overriding av komponenter enklere da man kan bruke c
|
||||
## Intern / Ekstern sizing
|
||||
|
||||
Komponenter tilpasses og standariseres bedre for skillet mellom interne/eksterne flater.
|
||||
Eksempel på dette er `size="small" -> 32px, size="medium"-> 48px`.
|
||||
Løsning er ikke fast bestemt, men eksempel på dette er `size="s" -> 32px, size="m"-> 48px`.
|
||||
Dette vil da eksempelvis kunne være en standard som er gjennomgående for de fleste komponentene.
|
||||
|
||||
## Ny dokumentasjon-side
|
||||
|
||||
Vi bygger en ny side for å dokumentere systemet, og mer rundt utvikling/design i NAV med "Verktøykassen"
|
||||
Vi bygger en ny side for å dokumentere systemet, og mer rundt utvikling/design i nav med "Verktøykassen"
|
||||
|
||||
## Migrere komponenter/styling fra nav-frontend-\* -> `@navikt/ds-css / @navikt/ds-react`
|
||||
|
||||
@@ -57,8 +44,14 @@ eks darkmode.
|
||||
Dette er noe vi ikke har på planene for tiden, men etterhvert som ting faller på plass så vil dette være
|
||||
noe vi kunne ta en titt på hvis vi ser at det trengs.
|
||||
|
||||
## Feature-flagging
|
||||
|
||||
Ideen om å ta i bruk feature-flagging er noe som virker veldig interessant og vil da se på muligheten for å kunne levere
|
||||
større endringe i feature-flags for testing, og da publisere under eks major-bump i faste intervaller. Dette vil da kunne
|
||||
gjøre det enklere for deg som consumer av pakkene å ha oversikt over endringer og hva som må migreres.
|
||||
|
||||
## Versjonering
|
||||
|
||||
De nye pakkene under `@navikt`, da `ds-css` og `ds-react` er nå versjonert under to store pakker med alle komponentene. I fremtiden vil vi se på å
|
||||
To av de nye pakkene under `@navikt`, da `ds-css` og `ds-react` er nå versjonert under to store pakker med alle komponentene. I fremtiden vil vi se på å
|
||||
ha både samversjonering (alle pakker under en eks ds-react versjon) og induvduell verjsonering da eks ds-react/button har en egen versjon
|
||||
slik at man kan ha mer finkontroll over komponentbruk på siden sin.
|
||||
@@ -6,7 +6,7 @@ module.exports = (baseConfig) => {
|
||||
test: /\.css$/,
|
||||
use: ["style-loader", "css-loader"],
|
||||
include: [
|
||||
path.resolve(__dirname, "../node_modules/@navikt/core/css/index.css"),
|
||||
path.resolve(__dirname, "../node_modules/@navikt/ds-css/index.css"),
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
+1
-1
@@ -1,3 +1,3 @@
|
||||
# Designsystem v2
|
||||
# Designsystem v2
|
||||
|
||||
Storybook: https://navikt.github.io/Designsystemet/
|
||||
@@ -1,70 +0,0 @@
|
||||
:root {
|
||||
--navds-accordion-color-text: var(--navds-color-darkgray);
|
||||
--navds-accordion-color-background: var(--navds-color-background);
|
||||
--navds-accordion-color-text-hover: var(--navds-color-blue-50);
|
||||
--navds-accordion-color-border-hover: var(--navds-color-blue-50);
|
||||
--navds-accordion-color-border-focus: var(--navds-color-background);
|
||||
}
|
||||
|
||||
.navds-accordion .ReactCollapse--collapse {
|
||||
transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.navds-accordion {
|
||||
background: var(--navds-accordion-color-background);
|
||||
}
|
||||
|
||||
.navds-accordion__header:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--navds-shadow-focus);
|
||||
border-color: var(--navds-accordion-color-border-focus);
|
||||
}
|
||||
|
||||
.navds-accordion__header:hover {
|
||||
color: var(--navds-accordion-color-text-hover);
|
||||
border-color: var(--navds-accordion-color-border-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.navds-accordion__expand-icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navds-accordion__expand-icon--flip {
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
|
||||
.navds-accordion__header {
|
||||
padding: var(--navds-spacing-4) var(--navds-spacing-3);
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
border: none;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 2px solid #a0a0a0;
|
||||
gap: var(--navds-spacing-4);
|
||||
}
|
||||
|
||||
.navds-accordion__content {
|
||||
color: var(--navds-accordion-color-text);
|
||||
padding: var(--navds-spacing-5) var(--navds-spacing-3) var(--navds-spacing-10);
|
||||
}
|
||||
|
||||
.navds-accordion__expand-icon--filled {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navds-accordion__header:hover
|
||||
> .navds-accordion__expand-icon.navds-accordion__expand-icon--filled {
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.navds-accordion__header:hover > .navds-accordion__expand-icon {
|
||||
display: none;
|
||||
}
|
||||
@@ -1,119 +0,0 @@
|
||||
:root {
|
||||
--navds-alert-color-border: var(--navds-color-gray-40);
|
||||
--navds-alert-color-error-border: var(--navds-color-error-border);
|
||||
--navds-alert-color-error-background: var(--navds-color-error-background);
|
||||
--navds-alert-color-warning-border: var(--navds-color-warning-border);
|
||||
--navds-alert-color-warning-background: var(--navds-color-warning-background);
|
||||
--navds-alert-color-info-border: var(--navds-color-info-border);
|
||||
--navds-alert-color-info-background: var(--navds-color-info-background);
|
||||
--navds-alert-color-success-border: var(--navds-color-success-border);
|
||||
--navds-alert-color-success-background: var(--navds-color-success-background);
|
||||
--navds-alert-color-error-icon: var(--navds-color-red-60);
|
||||
--navds-alert-color-error-icon-background: var(--navds-color-white);
|
||||
--navds-alert-color-warning-icon: var(--navds-color-orange-40);
|
||||
--navds-alert-color-warning-icon-background: var(--navds-color-darkgray);
|
||||
--navds-alert-color-info-icon: var(--navds-color-lightblue-70);
|
||||
--navds-alert-color-info-icon-background: var(--navds-color-white);
|
||||
--navds-alert-color-success-icon: var(--navds-color-green-70);
|
||||
--navds-alert-color-success-icon-background: var(--navds-color-white);
|
||||
}
|
||||
|
||||
.navds-alert {
|
||||
border-radius: 4px;
|
||||
border: 1px solid;
|
||||
border-color: var(--navds-alert-color-border);
|
||||
padding: calc(var(--navds-spacing-4) + 1px) calc(var(--navds-spacing-4) + 1px);
|
||||
display: flex;
|
||||
gap: var(--navds-spacing-3);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navds-alert__wrapper {
|
||||
max-width: 43.5rem;
|
||||
}
|
||||
|
||||
.navds-alert--small {
|
||||
padding: calc(var(--navds-spacing-1) - 1px) var(--navds-spacing-4);
|
||||
}
|
||||
|
||||
.navds-alert--full-width {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.navds-alert > .navds-alert__icon {
|
||||
flex-shrink: 0;
|
||||
font-size: 1.5rem;
|
||||
align-self: flex-start;
|
||||
height: var(--navds-font-line-height-xlarge);
|
||||
}
|
||||
|
||||
.navds-alert--small > .navds-alert__icon {
|
||||
font-size: 1.25rem;
|
||||
height: var(--navds-font-line-height-large);
|
||||
}
|
||||
|
||||
.navds-alert--error {
|
||||
border-color: var(--navds-alert-color-error-border);
|
||||
background-color: var(--navds-alert-color-error-background);
|
||||
}
|
||||
|
||||
.navds-alert--error > .navds-alert__icon {
|
||||
color: var(--navds-alert-color-error-icon);
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
var(--navds-alert-color-error-icon-background) 50%,
|
||||
0,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.navds-alert--warning {
|
||||
border-color: var(--navds-alert-color-warning-border);
|
||||
background-color: var(--navds-alert-color-warning-background);
|
||||
}
|
||||
|
||||
.navds-alert--warning > .navds-alert__icon {
|
||||
color: var(--navds-alert-color-warning-icon);
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
var(--navds-alert-color-warning-icon-background) 50%,
|
||||
0,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.navds-alert--info {
|
||||
border-color: var(--navds-alert-color-info-border);
|
||||
background-color: var(--navds-alert-color-info-background);
|
||||
}
|
||||
|
||||
.navds-alert--info > .navds-alert__icon {
|
||||
color: var(--navds-alert-color-info-icon);
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
var(--navds-alert-color-info-icon-background) 50%,
|
||||
0,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.navds-alert--success {
|
||||
border-color: var(--navds-alert-color-success-border);
|
||||
background-color: var(--navds-alert-color-success-background);
|
||||
}
|
||||
|
||||
.navds-alert--success > .navds-alert__icon {
|
||||
color: var(--navds-alert-color-success-icon);
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
var(--navds-alert-color-success-icon-background) 50%,
|
||||
0,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.navds-alert--inline {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
@@ -1,208 +0,0 @@
|
||||
:root {
|
||||
/* Primary */
|
||||
--navds-button-color-primary-text: var(--navds-color-white);
|
||||
--navds-button-color-primary-border-focus: var(--navds-color-white);
|
||||
--navds-button-color-primary-background: var(--navds-color-action-default);
|
||||
--navds-button-color-primary-background-hover: var(
|
||||
--navds-color-action-hover
|
||||
);
|
||||
--navds-button-color-primary-background-active: var(
|
||||
--navds-color-action-active
|
||||
);
|
||||
|
||||
/* Secondary */
|
||||
--navds-button-color-secondary-text: var(--navds-color-action-default);
|
||||
--navds-button-color-secondary-text-hover: var(--navds-color-text-inverse);
|
||||
--navds-button-color-secondary-text-active: var(--navds-color-text-inverse);
|
||||
--navds-button-color-secondary-border: var(--navds-color-action-default);
|
||||
--navds-button-color-secondary-border-focus-active-hover: var(
|
||||
--navds-color-white
|
||||
);
|
||||
--navds-button-color-secondary-background: var(--navds-color-background);
|
||||
--navds-button-color-secondary-background-hover: var(
|
||||
--navds-color-action-hover
|
||||
);
|
||||
--navds-button-color-secondary-background-active: var(
|
||||
--navds-color-action-active
|
||||
);
|
||||
|
||||
/* Tertiary */
|
||||
--navds-button-color-tertiary-text: var(--navds-color-action-default);
|
||||
--navds-button-color-tertiary-text-active: var(--navds-color-text-inverse);
|
||||
--navds-button-color-tertiary-border-hover: var(--navds-color-action-default);
|
||||
--navds-button-color-tertiary-border-focus: var(--navds-color-action-default);
|
||||
--navds-button-color-tertiary-border-active: var(--navds-color-white);
|
||||
--navds-button-color-tertiary-background-active: var(
|
||||
--navds-color-action-active
|
||||
);
|
||||
|
||||
/* Danger */
|
||||
--navds-button-color-danger-text: var(--navds-color-white);
|
||||
--navds-button-color-danger-background: var(--navds-color-danger-default);
|
||||
--navds-button-color-danger-background-hover: var(--navds-color-danger-hover);
|
||||
--navds-button-color-danger-background-active: var(
|
||||
--navds-color-danger-active
|
||||
);
|
||||
--navds-button-color-danger-border-focus: var(--navds-color-white);
|
||||
|
||||
/* Disabled */
|
||||
--navds-button-color-text-disabled: var(--navds-color-text-inverse);
|
||||
--navds-button-color-background-disabled: var(--navds-color-disabled);
|
||||
}
|
||||
|
||||
.navds-button {
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
background: none;
|
||||
border-radius: 2px;
|
||||
min-width: 48px;
|
||||
padding: var(--navds-spacing-3);
|
||||
}
|
||||
|
||||
.navds-button--small {
|
||||
padding-top: 0.375rem;
|
||||
padding-bottom: 0.375rem;
|
||||
min-width: 32px;
|
||||
}
|
||||
|
||||
.navds-button:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-button__inner {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-button svg {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.navds-button--small svg {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
/*************************
|
||||
* .navds-button--primary *
|
||||
*************************/
|
||||
|
||||
.navds-button--primary {
|
||||
background-color: var(--navds-button-color-primary-background);
|
||||
color: var(--navds-button-color-primary-text);
|
||||
}
|
||||
|
||||
.navds-button--primary:hover {
|
||||
background-color: var(--navds-button-color-primary-background-hover);
|
||||
}
|
||||
|
||||
.navds-button--primary:active {
|
||||
background-color: var(--navds-button-color-primary-background-active);
|
||||
}
|
||||
|
||||
.navds-button--primary:focus {
|
||||
box-shadow: inset 0 0 0 1px var(--navds-button-color-primary-border-focus),
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
/**************************
|
||||
* .navds-button--secondary *
|
||||
**************************/
|
||||
|
||||
.navds-button--secondary {
|
||||
color: var(--navds-button-color-secondary-text);
|
||||
background-color: var(--navds-button-color-secondary-background);
|
||||
box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border);
|
||||
}
|
||||
|
||||
.navds-button--secondary:hover {
|
||||
color: var(--navds-button-color-secondary-text-hover);
|
||||
background-color: var(--navds-button-color-secondary-background-hover);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.navds-button--secondary:focus {
|
||||
box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border),
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-button--secondary:active {
|
||||
color: var(--navds-button-color-secondary-text-active);
|
||||
background-color: var(--navds-button-color-secondary-background-active);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.navds-button--secondary:focus:hover,
|
||||
.navds-button--secondary:focus:active {
|
||||
box-shadow: inset 0 0 0 1px
|
||||
var(--navds-button-color-secondary-border-focus-active-hover),
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
/****************************
|
||||
* .navds-button--tertiary *
|
||||
****************************/
|
||||
|
||||
.navds-button--tertiary {
|
||||
color: var(--navds-button-color-tertiary-text);
|
||||
}
|
||||
|
||||
.navds-button--tertiary:hover {
|
||||
box-shadow: inset 0 0 0 2px var(--navds-button-color-tertiary-border-hover);
|
||||
}
|
||||
|
||||
.navds-button--tertiary:focus {
|
||||
box-shadow: inset 0 0 0 2px var(--navds-button-color-tertiary-border-focus),
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-button--tertiary:active {
|
||||
color: var(--navds-button-color-tertiary-text-active);
|
||||
background-color: var(--navds-button-color-tertiary-background-active);
|
||||
box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active);
|
||||
}
|
||||
|
||||
.navds-button--tertiary:active:focus {
|
||||
box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active),
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
/*************************
|
||||
* .navds-button--danger *
|
||||
*************************/
|
||||
|
||||
.navds-button--danger {
|
||||
background-color: var(--navds-button-color-danger-background);
|
||||
color: var(--navds-button-color-danger-text);
|
||||
}
|
||||
|
||||
.navds-button--danger:hover {
|
||||
background-color: var(--navds-button-color-danger-background-hover);
|
||||
}
|
||||
|
||||
.navds-button--danger:active {
|
||||
background-color: var(--navds-button-color-danger-background-active);
|
||||
}
|
||||
|
||||
.navds-button--danger:focus {
|
||||
box-shadow: inset 0 0 0 1px var(--navds-button-color-danger-border-focus),
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
/**************************
|
||||
* .navds-button:disabled *
|
||||
**************************/
|
||||
|
||||
.navds-button:disabled {
|
||||
color: var(--navds-button-color-text-disabled);
|
||||
background-color: var(--navds-button-color-background-disabled);
|
||||
cursor: not-allowed;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
:root {
|
||||
--navds-card-micro-color-text: var(--navds-color-text-primary);
|
||||
--navds-card-micro-color-background: var(--navds-color-orange-20);
|
||||
--navds-card-micro-color-border: transparent;
|
||||
--navds-card-micro-color-text-hover: var(--navds-color-blue-50);
|
||||
--navds-card-micro-color-background-hover: var(--navds-color-white);
|
||||
--navds-card-micro-color-border-hover: var(--navds-color-blue-50);
|
||||
--navds-card-micro-color-text-focus: var(--navds-color-blue-50);
|
||||
--navds-card-micro-color-background-focus: var(--navds-color-white);
|
||||
--navds-card-micro-color-shadow-focus: var(--navds-color-blue-80);
|
||||
--navds-card-micro-color-background-active: var(--navds-color-blue-70);
|
||||
--navds-card-micro-color-text-active: var(--navds-color-white);
|
||||
}
|
||||
|
||||
/*
|
||||
MicroCard
|
||||
*/
|
||||
|
||||
.navds-card__micro {
|
||||
border-radius: 1rem;
|
||||
color: var(--navds-card-micro-color-text);
|
||||
display: inline-flex;
|
||||
padding: var(--navds-spacing-1) var(--navds-spacing-2);
|
||||
text-decoration: none;
|
||||
background-color: var(--navds-card-micro-color-background);
|
||||
border: 1px solid var(--navds-card-micro-color-border);
|
||||
}
|
||||
|
||||
.navds-card__micro:hover {
|
||||
background-color: var(--navds-card-micro-color-background-hover);
|
||||
border-color: var(--navds-card-micro-color-border-hover);
|
||||
color: var(--navds-card-micro-color-text-hover);
|
||||
}
|
||||
|
||||
.navds-card__micro:focus {
|
||||
background-color: var(--navds-card-micro-color-background-focus);
|
||||
color: var(--navds-card-micro-color-text-focus);
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px var(--navds-card-micro-color-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-card__micro:active {
|
||||
background-color: var(--navds-card-micro-color-background-active);
|
||||
color: var(--navds-card-micro-color-text-active);
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
.navds-checkbox-group--small > .navds-checkboxes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.navds-fieldset.navds-checkbox-group--medium > .navds-checkboxes {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.navds-fieldset.navds-checkbox-group--medium > .navds-fieldset__error {
|
||||
margin-top: 0;
|
||||
}
|
||||
@@ -1,146 +0,0 @@
|
||||
:root {
|
||||
--navds-checkbox-color-background: var(--navds-color-white);
|
||||
--navds-checkbox-color-border: var(--navds-color-gray-60);
|
||||
--navds-checkbox-color-label-hover: var(--navds-color-blue-50);
|
||||
--navds-checkbox-color-border-hover: var(--navds-color-blue-50);
|
||||
--navds-checkbox-color-background-hover: var(--navds-color-blue-10);
|
||||
--navds-checkbox-color-description: var(--navds-color-gray-80);
|
||||
--navds-checkbox-color-border-checked: var(--navds-color-blue-50);
|
||||
--navds-checkbox-color-background-checked: var(--navds-color-blue-50);
|
||||
--navds-checkbox-color-shadow-error: var(--navds-color-red-50);
|
||||
--navds-checkbox-color-border-error: var(--navds-color-red-50);
|
||||
|
||||
/* Disabled */
|
||||
--navds-checkbox-color-label-disabled: var(--navds-color-gray-40);
|
||||
--navds-checkbox-color-border-disabled: var(--navds-color-gray-60);
|
||||
--navds-checkbox-color-background-disabled: var(--navds-color-gray-10);
|
||||
--navds-checkbox-color-border-checked-disabled: var(--navds-color-gray-40);
|
||||
--navds-checkbox-color-background-checked-disabled: var(
|
||||
--navds-color-gray-40
|
||||
);
|
||||
}
|
||||
|
||||
.navds-checkbox {
|
||||
position: relative;
|
||||
padding: var(--navds-spacing-3) 0;
|
||||
}
|
||||
|
||||
.navds-checkbox__input {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
left: -12px;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.navds-checkbox__label {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
gap: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navds-checkbox__description {
|
||||
padding-left: calc(48px - 12px);
|
||||
color: var(--navds-checkbox-color-description);
|
||||
}
|
||||
|
||||
.navds-checkbox--with-description {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.navds-checkbox .navds-error-message {
|
||||
margin-top: var(--navds-spacing-3);
|
||||
}
|
||||
|
||||
.navds-checkbox--with-description .navds-error-message {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.navds-checkbox--with-error-message {
|
||||
padding-bottom: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-checkbox__label::before {
|
||||
content: "";
|
||||
background-color: var(--navds-checkbox-color-background);
|
||||
border: 1px solid var(--navds-checkbox-color-border);
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navds-checkbox--small {
|
||||
padding: var(--navds-spacing-1) 0;
|
||||
}
|
||||
|
||||
.navds-checkbox--small > .navds-checkbox__input {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.navds-checkbox--small > .navds-checkbox__label::before {
|
||||
margin-top: -2px;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
.navds-checkbox__input:hover + .navds-checkbox__label {
|
||||
color: var(--navds-checkbox-color-label-hover);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:hover + .navds-checkbox__label::before {
|
||||
border-color: var(--navds-checkbox-color-border-hover);
|
||||
background-color: var(--navds-checkbox-color-background-hover);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:focus + .navds-checkbox__label::before {
|
||||
box-shadow: var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:checked + .navds-checkbox__label::before {
|
||||
background-image: var(--navds-checkmark-image-white);
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 75%;
|
||||
border: 2px solid var(--navds-checkbox-color-border-checked);
|
||||
background-color: var(--navds-checkbox-color-background-checked);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
|
||||
background-color: white;
|
||||
background-image: var(--navds-checkmark-image-blue);
|
||||
}
|
||||
|
||||
.navds-checkbox--error
|
||||
> .navds-checkbox__input:not(:hover):not(:focus):not(:disabled):not(:checked)
|
||||
+ .navds-checkbox__label::before {
|
||||
box-shadow: 0 0 0 1px var(--navds-checkbox-color-shadow-error);
|
||||
border-color: var(--navds-checkbox-color-border-error);
|
||||
}
|
||||
|
||||
.navds-checkbox--small .navds-error-message {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.navds-checkbox__input:disabled,
|
||||
.navds-checkbox__input:disabled + .navds-checkbox__label {
|
||||
color: var(--navds-checkbox-color-label-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.navds-checkbox__input:disabled + .navds-checkbox__label::before {
|
||||
background-color: var(--navds-checkbox-color-background-disabled);
|
||||
border-color: var(--navds-checkbox-color-border-disabled);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:disabled:checked + .navds-checkbox__label::before {
|
||||
background-color: var(--navds-checkbox-color-background-checked-disabled);
|
||||
border-color: var(--navds-checkbox-color-border-checked-disabled);
|
||||
}
|
||||
@@ -1,98 +0,0 @@
|
||||
:root {
|
||||
--navds-confirmation-panel-color-background: var(
|
||||
--navds-color-warning-background
|
||||
);
|
||||
--navds-confirmation-panel-color-background-checked: var(
|
||||
--navds-color-success-background
|
||||
);
|
||||
--navds-confirmation-panel-color-border-checked: var(
|
||||
--navds-color-success-background
|
||||
);
|
||||
--navds-confirmation-panel-color-background-error: var(
|
||||
--navds-color-error-background
|
||||
);
|
||||
--navds-confirmation-panel-color-checkbox-background-checked-hover: var(
|
||||
--navds-color-green-70
|
||||
);
|
||||
--navds-confirmation-panel-color-checkbox-border-checked-hover: var(
|
||||
--navds-color-green-70
|
||||
);
|
||||
--navds-confirmation-panel-color-checkbox-background-checked: var(
|
||||
--navds-color-green-50
|
||||
);
|
||||
--navds-confirmation-panel-color-checkbox-border-checked: var(
|
||||
--navds-color-green-50
|
||||
);
|
||||
--navds-confirmation-panel-color-checkbox-label-checked: var(
|
||||
--navds-color-darkgray
|
||||
);
|
||||
}
|
||||
|
||||
.navds-confirmation-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--navds-spacing-4);
|
||||
padding: var(--navds-spacing-4);
|
||||
border-radius: 4px;
|
||||
background-color: var(--navds-confirmation-panel-color-background);
|
||||
transition: background-color linear 100ms;
|
||||
}
|
||||
|
||||
.navds-confirmation-panel__content {
|
||||
max-width: 80ch;
|
||||
}
|
||||
|
||||
.navds-confirmation-panel--small {
|
||||
padding: var(--navds-spacing-3);
|
||||
gap: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-confirmation-panel--checked {
|
||||
background-color: var(--navds-confirmation-panel-color-background-checked);
|
||||
border-color: var(--navds-confirmation-panel-color-border-checked);
|
||||
}
|
||||
|
||||
.navds-confirmation-panel--error {
|
||||
background-color: var(--navds-confirmation-panel-color-background-error);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.navds-confirmation-panel
|
||||
.navds-checkbox__input:hover
|
||||
+ .navds-checkbox__label {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.navds-confirmation-panel--checked
|
||||
.navds-checkbox__input:hover
|
||||
+ .navds-checkbox__label {
|
||||
color: var(--navds-confirmation-panel-color-checkbox-label-checked);
|
||||
}
|
||||
|
||||
.navds-confirmation-panel--checked
|
||||
.navds-checkbox__input
|
||||
+ .navds-checkbox__label::before {
|
||||
transition: none;
|
||||
background-color: var(
|
||||
--navds-confirmation-panel-color-checkbox-background-checked
|
||||
);
|
||||
border-color: var(--navds-confirmation-panel-color-checkbox-border-checked);
|
||||
background-image: var(--navds-checkmark-image-white);
|
||||
}
|
||||
|
||||
.navds-confirmation-panel--checked
|
||||
.navds-checkbox__input:hover
|
||||
+ .navds-checkbox__label::before {
|
||||
background-color: var(
|
||||
--navds-confirmation-panel-color-checkbox-background-checked-hover
|
||||
);
|
||||
border-color: var(
|
||||
--navds-confirmation-panel-color-checkbox-border-checked-hover
|
||||
);
|
||||
}
|
||||
|
||||
.navds-confirmation-panel--checked
|
||||
.navds-checkbox__input:focus:hover
|
||||
+ .navds-checkbox__label::before {
|
||||
background-image: var(--navds-checkmark-image-white);
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
:root {
|
||||
--navds-error-message-color-text: var(--navds-color-text-error);
|
||||
}
|
||||
|
||||
.navds-error-message {
|
||||
display: block;
|
||||
color: var(--navds-error-message-color-text);
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
:root {
|
||||
--navds-error-summary-color-background: var(--navds-color-white);
|
||||
--navds-error-summary-color-border: var(--navds-color-error-border);
|
||||
}
|
||||
|
||||
.navds-error-summary {
|
||||
background-color: var(--navds-error-summary-color-background);
|
||||
padding: var(--navds-spacing-4);
|
||||
border: 4px solid var(--navds-error-summary-color-border);
|
||||
}
|
||||
|
||||
.navds-error-summary--small {
|
||||
padding: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-error-summary:focus {
|
||||
box-shadow: var(--navds-shadow-focus);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.navds-error-summary__list {
|
||||
margin: 1rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.navds-error-summary--small > .navds-error-summary__list {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
.navds-radio-group--small > .navds-radio-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.navds-fieldset.navds-radio-group--medium > .navds-radio-buttons {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.navds-fieldset.navds-radio-group--medium > .navds-fieldset__error {
|
||||
margin-top: 0;
|
||||
}
|
||||
@@ -1,150 +0,0 @@
|
||||
:root {
|
||||
--navds-radio-color-description: var(--navds-color-gray-80);
|
||||
--navds-radio-color-background: var(--navds-color-white);
|
||||
--navds-radio-color-border: var(--navds-color-gray-60);
|
||||
--navds-radio-color-label-hover: var(--navds-color-blue-50);
|
||||
--navds-radio-color-border-hover: var(--navds-color-blue-50);
|
||||
--navds-radio-color-background-hover: var(--navds-color-blue-10);
|
||||
--navds-radio-color-border-checked: var(--navds-color-blue-50);
|
||||
--navds-radio-color-shadow-checked: var(--navds-color-blue-50);
|
||||
--navds-radio-color-shadow-checked-focus: var(--navds-color-blue-80);
|
||||
--navds-radio-color-shadow-background-checked-focus: var(--navds-color-white);
|
||||
--navds-radio-color-shadow-dot-checked-focus: var(--navds-color-blue-50);
|
||||
--navds-radio-color-shadow-error: var(--navds-color-red-50);
|
||||
--navds-radio-color-border-error: var(--navds-color-red-50);
|
||||
|
||||
/* Disabled */
|
||||
--navds-radio-color-background-disabled: var(--navds-color-gray-10);
|
||||
--navds-radio-color-border-disabled: var(--navds-color-gray-60);
|
||||
--navds-radio-color-label-disabled: var(--navds-color-gray-40);
|
||||
--navds-radio-color-background-disabled-checked: var(--navds-color-gray-40);
|
||||
--navds-radio-color-border-disabled-checked: var(--navds-color-gray-40);
|
||||
--navds-radio-color-shadow-disabled-checked: var(--navds-color-gray-40);
|
||||
}
|
||||
|
||||
.navds-radio {
|
||||
position: relative;
|
||||
padding: var(--navds-spacing-3) 0;
|
||||
}
|
||||
|
||||
.navds-radio--with-description .navds-error-message {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.navds-radio .navds-error-message {
|
||||
margin-top: var(--navds-spacing-3);
|
||||
}
|
||||
|
||||
.navds-radio__input {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
left: -12px;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.navds-radio__label {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
gap: 12px;
|
||||
min-width: 48px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navds-radio__description {
|
||||
padding-left: calc(48px - 12px);
|
||||
color: var(--navds-radio-color-description);
|
||||
}
|
||||
|
||||
.navds-radio--with-description {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.navds-radio--with-error-message {
|
||||
padding-bottom: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-radio__label::before {
|
||||
content: "";
|
||||
background-color: var(--navds-radio-color-background);
|
||||
border: 1px solid var(--navds-radio-color-border);
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.navds-radio--small {
|
||||
padding: var(--navds-spacing-1) 0;
|
||||
}
|
||||
|
||||
.navds-radio--small > .navds-radio__input {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.navds-radio--small > .navds-radio__label::before {
|
||||
margin-top: -2px;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
.navds-radio__input:hover + .navds-radio__label {
|
||||
color: var(--navds-radio-color-label-hover);
|
||||
}
|
||||
|
||||
.navds-radio__input:hover + .navds-radio__label::before {
|
||||
border-color: var(--navds-radio-color-border-hover);
|
||||
background-color: var(--navds-radio-color-background-hover);
|
||||
}
|
||||
|
||||
.navds-radio__input:focus + .navds-radio__label::before {
|
||||
box-shadow: var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-radio__input:checked + .navds-radio__label::before {
|
||||
border: 2px solid var(--navds-radio-color-border-checked);
|
||||
box-shadow: 0 0 0 3px #fff inset,
|
||||
0 0 0 2rem var(--navds-radio-color-shadow-checked) inset;
|
||||
}
|
||||
|
||||
.navds-radio__input:checked:focus + .navds-radio__label::before {
|
||||
transition: box-shadow 200ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
|
||||
box-shadow: 0 0 0 3px var(--navds-radio-color-shadow-checked-focus),
|
||||
0 0 0 3px var(--navds-radio-color-shadow-background-checked-focus) inset,
|
||||
0 0 0 2rem var(--navds-radio-color-shadow-dot-checked-focus) inset;
|
||||
}
|
||||
|
||||
.navds-radio--error
|
||||
> .navds-radio__input:not(:hover):not(:focus):not(:disabled):not(:checked)
|
||||
+ .navds-radio__label::before {
|
||||
box-shadow: 0 0 0 1px var(--navds-radio-color-shadow-error);
|
||||
border-color: var(--navds-radio-color-border-error);
|
||||
}
|
||||
|
||||
.navds-radio--small .navds-error-message {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.navds-radio__input:disabled,
|
||||
.navds-radio__input:disabled + .navds-radio__label {
|
||||
color: var(--navds-radio-color-label-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.navds-radio__input:disabled + .navds-radio__label::before {
|
||||
background-color: var(--navds-radio-color-background-disabled);
|
||||
border-color: var(--navds-radio-color-border-disabled);
|
||||
}
|
||||
|
||||
.navds-radio__input:disabled:checked + .navds-radio__label::before {
|
||||
background-color: var(--navds-radio-color-background-disabled-checked);
|
||||
border-color: var(--navds-radio-color-border-disabled-checked);
|
||||
box-shadow: 0 0 0 3px #fff inset,
|
||||
0 0 0 2rem var(--navds-radio-color-shadow-disabled-checked) inset;
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
:root {
|
||||
--navds-search-field-color-shadow-error: var(--navds-color-red-50);
|
||||
--navds-search-field-color-border-error: var(--navds-color-red-50);
|
||||
--navds-search-field-color-clearbutton-border: var(--navds-color-gray-60);
|
||||
}
|
||||
|
||||
.navds-search-field__input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.navds-form-field--small .navds-search-field__input {
|
||||
padding: 0.15rem;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.navds-search-field__input-wrapper > *:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.navds-search-field__input-wrapper > :first-child {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.navds-search-field__input-wrapper > :last-child {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.navds-search-field__input-wrapper > :last-child:first-child {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.navds-search-field__input-wrapper :focus {
|
||||
z-index: var(--navds-z-index-focus);
|
||||
}
|
||||
|
||||
.navds-search-field__button,
|
||||
.navds-search-field__clear-button {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navds-search-field--error
|
||||
.navds-search-field__input:not(:hover):not(:focus):not(:disabled) {
|
||||
box-shadow: 0 0 0 1px var(--navds-search-field-color-shadow-error) inset;
|
||||
border-color: var(--navds-search-field-color-border-error);
|
||||
}
|
||||
@@ -1,70 +0,0 @@
|
||||
:root {
|
||||
--navds-select-color-background: var(--navds-color-white);
|
||||
--navds-select-color-border: var(--navds-color-gray-60);
|
||||
--navds-select-color-border-hover: var(--navds-color-blue-50);
|
||||
--navds-select-color-border-error: var(--navds-color-red-50);
|
||||
--navds-select-color-shadow-error: var(--navds-color-red-50);
|
||||
--navds-select-color-border-disabled: var(--navds-color-gray-40);
|
||||
--navds-select-color-background-disabled: var(--navds-color-gray-10);
|
||||
--navds-select-color-text-disabled: var(--navds-color-darkgray);
|
||||
}
|
||||
|
||||
.navds-select__input {
|
||||
appearance: none;
|
||||
padding: 0.5rem;
|
||||
background-color: var(--navds-select-color-background);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--navds-select-color-border);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
min-height: 48px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
|
||||
.navds-select__input:hover {
|
||||
border-color: var(--navds-select-color-border-hover);
|
||||
}
|
||||
|
||||
.navds-select__input:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-select__container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navds-select__chevron {
|
||||
position: absolute;
|
||||
font-size: 1rem;
|
||||
right: 0.5rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.navds-form-field--small .navds-select__input {
|
||||
min-height: 32px;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
/**
|
||||
Error handling
|
||||
*/
|
||||
.navds-select--error > * select:not(:hover):not(:focus):not(:disabled) {
|
||||
box-shadow: 0 0 0 1px var(--navds-select-color-shadow-error);
|
||||
border-color: var(--navds-select-color-border-error);
|
||||
}
|
||||
|
||||
/* Disabled handling */
|
||||
.navds-select__input:disabled,
|
||||
.navds-select__input[read-only] {
|
||||
background-color: var(--navds-select-color-background-disabled);
|
||||
border-color: var(--navds-select-color-border-disabled);
|
||||
box-shadow: none;
|
||||
color: var(--navds-select-color-text-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@@ -1,63 +0,0 @@
|
||||
:root {
|
||||
--navds-text-field-color-background: var(--navds-color-white);
|
||||
--navds-text-field-color-border: var(--navds-color-gray-60);
|
||||
--navds-text-field-color-border-hover: var(--navds-color-blue-50);
|
||||
--navds-text-field-color-border-error: var(--navds-color-red-50);
|
||||
--navds-text-field-color-shadow-error: var(--navds-color-red-50);
|
||||
--navds-text-field-color-border-disabled: var(--navds-color-gray-40);
|
||||
--navds-text-field-color-background-disabled: var(--navds-color-gray-10);
|
||||
--navds-text-field-color-text-disabled: var(--navds-color-darkgray);
|
||||
}
|
||||
|
||||
.navds-text-field__input {
|
||||
appearance: none;
|
||||
padding: 0.5rem;
|
||||
background-color: var(--navds-text-field-color-background);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--navds-text-field-color-border);
|
||||
min-height: 48px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navds-form-field--small > .navds-text-field__input {
|
||||
padding: 0.15rem;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.navds-text-field__input:hover {
|
||||
border-color: var(--navds-text-field-color-border-hover);
|
||||
}
|
||||
|
||||
.navds-text-field__input:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
/**
|
||||
Error handling
|
||||
*/
|
||||
.navds-text-field--error
|
||||
> .navds-text-field__input:not(:hover):not(:focus):not(:disabled) {
|
||||
box-shadow: 0 0 0 1px var(--navds-text-field-color-shadow-error);
|
||||
border-color: var(--navds-text-field-color-border-error);
|
||||
}
|
||||
|
||||
/* Disabled handling */
|
||||
.navds-text-field__input:disabled,
|
||||
.navds-text-field__input[readonly] {
|
||||
background-color: var(--navds-text-field-color-background-disabled);
|
||||
border-color: var(--navds-text-field-color-border-disabled);
|
||||
box-shadow: none;
|
||||
color: var(--navds-text-field-color-text-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes default search icon
|
||||
*/
|
||||
.navds-text-field__input[type="search"]::-webkit-search-decoration,
|
||||
.navds-text-field__input[type="search"]::-webkit-search-cancel-button,
|
||||
.navds-text-field__input[type="search"]::-webkit-search-results-button,
|
||||
.navds-text-field__input[type="search"]::-webkit-search-results-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
@@ -1,88 +0,0 @@
|
||||
:root {
|
||||
--navds-textarea-color-background: var(--navds-color-white);
|
||||
--navds-textarea-color-border: var(--navds-color-gray-60);
|
||||
--navds-textarea-color-border-hover: var(--navds-color-blue-50);
|
||||
--navds-textarea-color-border-error: var(--navds-color-red-50);
|
||||
--navds-textarea-color-shadow-error: var(--navds-color-red-50);
|
||||
--navds-textarea-color-counter-text: var(--navds-color-gray-40);
|
||||
--navds-textarea-color-counter-text-error: var(--navds-color-red-50);
|
||||
--navds-textarea-color-text-disabled: var(--navds-color-darkgray);
|
||||
--navds-textarea-color-border-disabled: var(--navds-color-gray-40);
|
||||
--navds-textarea-color-background-disabled: var(--navds-color-gray-10);
|
||||
}
|
||||
|
||||
.navds-textarea__wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navds-textarea__input {
|
||||
appearance: none;
|
||||
padding: var(--navds-spacing-2);
|
||||
background-color: var(--navds-textarea-color-background);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--navds-textarea-color-border);
|
||||
resize: none;
|
||||
width: 100%;
|
||||
transition: height 0.1s ease-out;
|
||||
display: block;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.navds-textarea--counter {
|
||||
padding-bottom: var(--navds-spacing-8);
|
||||
}
|
||||
|
||||
.navds-textarea__input:hover {
|
||||
border-color: var(--navds-textarea-color-border-hover);
|
||||
}
|
||||
|
||||
.navds-textarea__input:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-form-field--small .navds-textarea__input {
|
||||
padding: var(--navds-spacing-1);
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.navds-form-field--small .navds-textarea--counter.navds-textarea__input {
|
||||
padding-bottom: var(--navds-spacing-7);
|
||||
}
|
||||
|
||||
.navds-textarea__counter {
|
||||
pointer-events: none;
|
||||
color: var(--navds-textarea-color-counter-text);
|
||||
font-style: italic;
|
||||
position: absolute;
|
||||
text-align: right;
|
||||
left: var(--navds-spacing-3);
|
||||
right: var(--navds-spacing-3);
|
||||
bottom: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-textarea__counter--error {
|
||||
color: var(--navds-textarea-color-counter-text-error);
|
||||
}
|
||||
|
||||
/**
|
||||
Error handling
|
||||
*/
|
||||
.navds-textarea--error
|
||||
.navds-textarea__input:not(:hover):not(:focus):not(:disabled) {
|
||||
box-shadow: 0 0 0 1px var(--navds-textarea-color-shadow-error);
|
||||
border-color: var(--navds-textarea-color-border-error);
|
||||
}
|
||||
|
||||
/*
|
||||
Disabled handling
|
||||
*/
|
||||
.navds-textarea__input:disabled,
|
||||
.navds-textarea__input[readonly] {
|
||||
background-color: var(--navds-textarea-color-background-disabled);
|
||||
border-color: var(--navds-textarea-color-border-disabled);
|
||||
box-shadow: none;
|
||||
color: var(--navds-textarea-color-text-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@@ -1,76 +0,0 @@
|
||||
:root {
|
||||
--navds-guide-panel-color-background: var(--navds-color-background);
|
||||
--navds-guide-panel-color-border: var(--navds-color-blue-40);
|
||||
--navds-guide-panel-color-illustration-background: var(--navds-color-blue-20);
|
||||
}
|
||||
|
||||
/**
|
||||
* GuidePanel component
|
||||
*/
|
||||
.navds-guide-panel {
|
||||
position: relative;
|
||||
padding-left: 2.5rem;
|
||||
}
|
||||
|
||||
.navds-guide-panel__content {
|
||||
background-color: var(--navds-guide-panel-color-background);
|
||||
border-radius: 4px;
|
||||
border: 2px solid var(--navds-guide-panel-color-border);
|
||||
min-height: 7.25rem;
|
||||
padding: 1.5rem;
|
||||
padding-left: 3.5rem;
|
||||
}
|
||||
|
||||
.navds-guide-panel--poster {
|
||||
padding-left: 0;
|
||||
padding-top: 3.125rem;
|
||||
}
|
||||
|
||||
.navds-guide-panel--poster .navds-guide-panel__content {
|
||||
padding: 2rem;
|
||||
padding-top: 4.25rem;
|
||||
}
|
||||
|
||||
.navds-guide-panel .navds-guide {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.navds-guide-panel--poster .navds-guide {
|
||||
left: 50%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Guide component
|
||||
*/
|
||||
.navds-guide {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Guide illustration frame */
|
||||
.navds-guide__illustration {
|
||||
background: var(--navds-guide-panel-color-illustration-background);
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.navds-guide__illustration svg,
|
||||
.navds-guide__illustration img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Illustration sizes */
|
||||
.navds-guide__illustration--small {
|
||||
height: 5rem;
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.navds-guide__illustration--medium {
|
||||
height: 6.25rem;
|
||||
width: 6.25rem;
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
:root {
|
||||
--navds-help-text-color-button-background: transparent;
|
||||
--navds-help-text-color-icon: var(--navds-color-blue-50);
|
||||
--navds-help-text-color-icon-hover: var(--navds-color-white);
|
||||
--navds-help-text-color-icon-background-hover: var(--navds-color-blue-50);
|
||||
--navds-help-text-color-icon-shadow-hover: var(--navds-color-blue-50);
|
||||
--navds-help-text-color-icon-focus: var(--navds-color-white);
|
||||
--navds-help-text-color-icon-background-focus: var(--navds-color-blue-50);
|
||||
--navds-help-text-color-icon-shadow-focus: var(--navds-color-blue-80);
|
||||
--navds-help-text-color-popover-background: var(--navds-color-lightblue-10);
|
||||
}
|
||||
|
||||
.navds-help-text__button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
background-color: var(--navds-help-text-color-button-background);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navds-help-text__button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.navds-help-text__icon {
|
||||
border-radius: 50%;
|
||||
font-size: 1.5rem;
|
||||
color: var(--navds-help-text-color-icon);
|
||||
}
|
||||
|
||||
.navds-help-text__button:hover > .navds-help-text__icon {
|
||||
color: var(--navds-help-text-color-icon-hover);
|
||||
background: var(--navds-help-text-color-icon-background-hover);
|
||||
box-shadow: 0 0 0 2px var(--navds-help-text-color-icon-shadow-hover);
|
||||
}
|
||||
|
||||
.navds-help-text__button:focus > .navds-help-text__icon {
|
||||
outline: none;
|
||||
color: var(--navds-help-text-color-icon-focus);
|
||||
background: var(--navds-help-text-color-icon-background-focus);
|
||||
box-shadow: 0 0 0 3px var(--navds-help-text-color-icon-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-help-text__popover > .navds-popover__arrow::before {
|
||||
background-color: var(--navds-help-text-color-popover-background);
|
||||
}
|
||||
|
||||
.navds-help-text__popover.navds-popover {
|
||||
background-color: var(--navds-help-text-color-popover-background);
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
:root {
|
||||
--navds-link-color-text: var(--navds-color-text-link);
|
||||
--navds-link-color-text-focus: var(--navds-color-text-inverse);
|
||||
--navds-link-color-text-active: var(--navds-color-text-inverse);
|
||||
--navds-link-color-background-focus: var(--navds-text-focus);
|
||||
--navds-link-color-background-active: var(--navds-text-focus);
|
||||
--navds-link-color-icon: var(--navds-color-text-link);
|
||||
--navds-link-color-icon-focus: var(--navds-color-text-inverse);
|
||||
--navds-link-color-on-info-background: var(--navds-color-text-primary);
|
||||
--navds-link-color-on-error-background: var(--navds-color-text-primary);
|
||||
}
|
||||
|
||||
.navds-link {
|
||||
color: var(--navds-link-color-text);
|
||||
text-decoration: underline;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--navds-spacing-1);
|
||||
}
|
||||
|
||||
.navds-alert--info .navds-link {
|
||||
color: var(--navds-link-color-on-info-background);
|
||||
}
|
||||
|
||||
.navds-alert--error .navds-link,
|
||||
.navds-confirmation-panel--error .navds-link {
|
||||
color: var(--navds-link-color-on-error-background);
|
||||
}
|
||||
|
||||
.navds-link:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navds-link:focus {
|
||||
outline: none;
|
||||
color: var(--navds-link-color-text-focus);
|
||||
text-decoration: none;
|
||||
background-color: var(--navds-link-color-background-focus);
|
||||
box-shadow: var(--navds-text-shadow);
|
||||
}
|
||||
|
||||
.navds-link:active {
|
||||
outline: none;
|
||||
color: var(--navds-link-color-text-active);
|
||||
text-decoration: none;
|
||||
background-color: var(--navds-link-color-background-active);
|
||||
box-shadow: var(--navds-text-shadow);
|
||||
}
|
||||
|
||||
.navds-link svg {
|
||||
color: var(--navds-link-color-icon);
|
||||
}
|
||||
|
||||
.navds-link:focus svg {
|
||||
color: var(--navds-link-color-icon-focus);
|
||||
}
|
||||
@@ -1,117 +0,0 @@
|
||||
:root {
|
||||
--navds-loader-color-foreground: var(--navds-color-gray-40);
|
||||
--navds-loader-color-background: var(--navds-color-gray-10);
|
||||
--navds-loader-color-neutral-foreground: var(--navds-color-gray-40);
|
||||
--navds-loader-color-interaction-foreground: var(--navds-color-blue-50);
|
||||
--navds-loader-color-inverted-foreground: var(--navds-color-white);
|
||||
--navds-loader-color-inverted-background: rgba(255, 255, 255, 0.3);
|
||||
--navds-loader-color-transparent-background: transparent;
|
||||
--navds-loader-color-on-button-background: rgba(255, 255, 255, 0.3);
|
||||
--navds-loader-color-on-button-foreground: currentColor;
|
||||
}
|
||||
|
||||
.navds-loader {
|
||||
width: 1.5rem;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
animation: loader-rotate 1.4s linear infinite;
|
||||
}
|
||||
|
||||
.navds-loader__foreground {
|
||||
animation: loader-dasharray 1.4s ease-in-out infinite;
|
||||
stroke-dasharray: 80px, 200px;
|
||||
stroke-dashoffset: 0;
|
||||
stroke: var(--navds-loader-color-foreground);
|
||||
}
|
||||
|
||||
.navds-loader__background {
|
||||
stroke: var(--navds-loader-color-background);
|
||||
}
|
||||
|
||||
.navds-loader--neutral .navds-loader__foreground {
|
||||
stroke: var(--navds-loader-color-neutral-foreground);
|
||||
}
|
||||
|
||||
.navds-loader--interaction .navds-loader__foreground {
|
||||
stroke: var(--navds-loader-color-interaction-foreground);
|
||||
}
|
||||
|
||||
.navds-loader--inverted .navds-loader__foreground {
|
||||
stroke: var(--navds-loader-color-inverted-foreground);
|
||||
}
|
||||
|
||||
.navds-loader--inverted .navds-loader__background {
|
||||
stroke: var(--navds-loader-color-inverted-background);
|
||||
}
|
||||
|
||||
.navds-loader--transparent .navds-loader__background {
|
||||
stroke: var(--navds-loader-color-transparent-background);
|
||||
}
|
||||
|
||||
.navds-loader--2xlarge {
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
.navds-loader--xlarge {
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
||||
.navds-loader--large {
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.navds-loader--medium {
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.navds-loader--small {
|
||||
width: 1.25rem;
|
||||
}
|
||||
|
||||
.navds-loader--xsmall {
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Button spesific styling
|
||||
*/
|
||||
|
||||
.navds-button .navds-loader .navds-loader__foreground {
|
||||
stroke: var(--navds-loader-color-on-button-foreground);
|
||||
}
|
||||
|
||||
.navds-button:hover .navds-loader .navds-loader__background {
|
||||
stroke: var(--navds-loader-color-on-button-background);
|
||||
}
|
||||
|
||||
.navds-button:active .navds-loader .navds-loader__background {
|
||||
stroke: var(--navds-loader-color-on-button-background);
|
||||
}
|
||||
|
||||
.navds-button--primary .navds-loader .navds-loader__background,
|
||||
.navds-button--danger .navds-loader .navds-loader__background {
|
||||
stroke: var(--navds-loader-color-on-button-background);
|
||||
}
|
||||
|
||||
@keyframes loader-rotate {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loader-dasharray {
|
||||
0% {
|
||||
stroke-dasharray: 1px, 200px;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
stroke-dasharray: 100px, 200px;
|
||||
stroke-dashoffset: -15px;
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dasharray: 100px, 200px;
|
||||
stroke-dashoffset: -120px;
|
||||
}
|
||||
}
|
||||
@@ -1,70 +0,0 @@
|
||||
:root {
|
||||
--navds-page-header-color-background: var(--navds-color-background);
|
||||
--navds-page-header-color-shadow-situation: var(--navds-color-orange-40);
|
||||
--navds-page-header-color-shadow-product: var(--navds-color-green-40);
|
||||
--navds-page-header-color-shadow-guide: var(--navds-color-deepblue-40);
|
||||
}
|
||||
|
||||
.navds-page-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: var(--navds-page-header-color-background);
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
padding-left: calc((100vw - 100%) / 2);
|
||||
padding-right: calc((100vw - 100%) / 2);
|
||||
margin-left: calc((100vw - 100%) / -2);
|
||||
margin-right: calc((100vw - 100%) / -2);
|
||||
}
|
||||
|
||||
.navds-page-header__wrapper {
|
||||
width: 100%;
|
||||
max-width: 56.5rem;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.navds-page-header__title {
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.navds-page-header--left > .navds-page-header__wrapper {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.navds-page-header--center > .navds-page-header__wrapper {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.navds-page-header__illustration {
|
||||
margin-right: 1.5rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.navds-page-header__illustration > svg {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
|
||||
.navds-page-header--situation {
|
||||
box-shadow: 0 -4px 0 var(--navds-page-header-color-shadow-situation) inset;
|
||||
}
|
||||
.navds-page-header--product {
|
||||
box-shadow: 0 -4px 0 var(--navds-page-header-color-shadow-product) inset;
|
||||
}
|
||||
.navds-page-header--guide {
|
||||
box-shadow: 0 -4px 0 var(--navds-page-header-color-shadow-guide) inset;
|
||||
}
|
||||
|
||||
@media (max-width: 649px) {
|
||||
.navds-page-header__illustration > svg {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
.navds-page-header__title {
|
||||
font-size: var(--navds-font-size-heading-xlarge);
|
||||
}
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
:root {
|
||||
--navds-panel-color-background: var(--navds-color-white);
|
||||
--navds-panel-color-border: var(--navds-color-border);
|
||||
}
|
||||
|
||||
.navds-panel {
|
||||
background-color: var(--navds-panel-color-background);
|
||||
padding: var(--navds-spacing-4);
|
||||
border-radius: var(--navds-border-radius);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.navds-panel--border {
|
||||
border-color: var(--navds-panel-color-border);
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
.navds-table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
display: table;
|
||||
}
|
||||
|
||||
.navds-table__header {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
.navds-table__body {
|
||||
display: table-row-group;
|
||||
}
|
||||
|
||||
.navds-table__row {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.navds-table__cell {
|
||||
display: table-cell;
|
||||
padding: var(--navds-spacing-4);
|
||||
text-align: left;
|
||||
border-bottom: var(--navds-border-default);
|
||||
}
|
||||
|
||||
.navds-table--small .navds-table__cell {
|
||||
padding: var(--navds-spacing-2);
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
:root {
|
||||
--navds-tag-color-border: var(--navds-color-gray-40);
|
||||
--navds-tag-color-background: var(--navds-color-gray-10);
|
||||
--navds-tag-color-info-background: var(--navds-color-tag-info-background);
|
||||
--navds-tag-color-info-border: var(--navds-color-tag-info-border);
|
||||
--navds-tag-color-warning-background: var(
|
||||
--navds-color-tag-warning-background
|
||||
);
|
||||
--navds-tag-color-warning-border: var(--navds-color-tag-warning-border);
|
||||
--navds-tag-color-success-background: var(
|
||||
--navds-color-tag-success-background
|
||||
);
|
||||
--navds-tag-color-success-border: var(--navds-color-tag-success-border);
|
||||
--navds-tag-color-error-background: var(--navds-color-tag-error-background);
|
||||
--navds-tag-color-error-border: var(--navds-color-tag-error-border);
|
||||
}
|
||||
|
||||
.navds-tag {
|
||||
border: 1px solid;
|
||||
border-color: var(--navds-tag-color-border);
|
||||
border-radius: 4px;
|
||||
background-color: var(--navds-tag-color-background);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.125rem var(--navds-spacing-3);
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.navds-tag--small {
|
||||
min-height: 24px;
|
||||
padding-right: var(--navds-spacing-1);
|
||||
padding-left: var(--navds-spacing-1);
|
||||
}
|
||||
|
||||
.navds-tag--error {
|
||||
background-color: var(--navds-tag-color-error-background);
|
||||
border-color: var(--navds-tag-color-error-border);
|
||||
}
|
||||
|
||||
.navds-tag--success {
|
||||
background-color: var(--navds-tag-color-success-background);
|
||||
border-color: var(--navds-tag-color-success-border);
|
||||
}
|
||||
|
||||
.navds-tag--warning {
|
||||
background-color: var(--navds-tag-color-warning-background);
|
||||
border-color: var(--navds-tag-color-warning-border);
|
||||
}
|
||||
|
||||
.navds-tag--info {
|
||||
background-color: var(--navds-tag-color-info-background);
|
||||
border-color: var(--navds-tag-color-info-border);
|
||||
}
|
||||
@@ -1,167 +0,0 @@
|
||||
/* Heading */
|
||||
.navds-heading {
|
||||
font-weight: var(--navds-font-weight-bold);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.navds-heading--2xlarge {
|
||||
font-size: var(--navds-font-size-heading-2xlarge);
|
||||
letter-spacing: -0.01em;
|
||||
line-height: var(--navds-font-line-height-heading-2xlarge);
|
||||
}
|
||||
|
||||
.navds-heading--2xlarge.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-5);
|
||||
}
|
||||
|
||||
.navds-heading--xlarge {
|
||||
font-size: var(--navds-font-size-heading-xlarge);
|
||||
letter-spacing: -0.008em;
|
||||
line-height: var(--navds-font-line-height-heading-xlarge);
|
||||
}
|
||||
|
||||
.navds-heading--xlarge.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-4);
|
||||
}
|
||||
|
||||
.navds-heading--large {
|
||||
font-size: var(--navds-font-size-heading-large);
|
||||
letter-spacing: -0.004em;
|
||||
line-height: var(--navds-font-line-height-heading-large);
|
||||
}
|
||||
|
||||
.navds-heading--large.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-3);
|
||||
}
|
||||
|
||||
.navds-heading--medium {
|
||||
font-size: var(--navds-font-size-heading-medium);
|
||||
letter-spacing: -0.002em;
|
||||
line-height: var(--navds-font-line-height-heading-medium);
|
||||
}
|
||||
|
||||
.navds-heading--medium.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-3);
|
||||
}
|
||||
|
||||
.navds-heading--small {
|
||||
font-size: var(--navds-font-size-heading-small);
|
||||
letter-spacing: -0.001em;
|
||||
line-height: var(--navds-font-line-height-heading-small);
|
||||
}
|
||||
|
||||
.navds-heading--small.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-3);
|
||||
}
|
||||
|
||||
.navds-heading--xsmall {
|
||||
font-size: var(--navds-font-size-heading-xsmall);
|
||||
letter-spacing: -0.001em;
|
||||
line-height: var(--navds-font-line-height-heading-xsmall);
|
||||
}
|
||||
|
||||
.navds-heading--xsmall.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-3);
|
||||
}
|
||||
|
||||
/* Ingress */
|
||||
.navds-ingress {
|
||||
font-size: var(--navds-font-size-xlarge);
|
||||
font-weight: var(--navds-font-weight-regular);
|
||||
letter-spacing: -0.001em;
|
||||
line-height: var(--navds-font-line-height-xlarge);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.navds-ingress.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-10);
|
||||
}
|
||||
|
||||
/* Body */
|
||||
.navds-body-long {
|
||||
font-size: var(--navds-font-size-large);
|
||||
font-weight: var(--navds-font-weight-regular);
|
||||
letter-spacing: 0;
|
||||
line-height: var(--navds-font-line-height-xlarge);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.navds-body-long.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-7);
|
||||
}
|
||||
|
||||
.navds-body-long--small {
|
||||
font-size: var(--navds-font-size-medium);
|
||||
letter-spacing: 0.002em;
|
||||
line-height: var(--navds-font-line-height-large);
|
||||
}
|
||||
|
||||
.navds-body-long--small.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-6);
|
||||
}
|
||||
|
||||
.navds-body-short {
|
||||
font-size: var(--navds-font-size-large);
|
||||
font-weight: var(--navds-font-weight-regular);
|
||||
letter-spacing: 0;
|
||||
line-height: var(--navds-font-line-height-large);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.navds-body-short.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-3);
|
||||
}
|
||||
|
||||
.navds-body-short--small {
|
||||
font-size: var(--navds-font-size-medium);
|
||||
letter-spacing: 0.002em;
|
||||
line-height: var(--navds-font-line-height-medium);
|
||||
}
|
||||
|
||||
.navds-body-short--small.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
/* Label */
|
||||
.navds-label {
|
||||
font-size: var(--navds-font-size-large);
|
||||
font-weight: var(--navds-font-weight-bold);
|
||||
letter-spacing: 0;
|
||||
line-height: var(--navds-font-line-height-large);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.navds-label.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-3);
|
||||
}
|
||||
|
||||
.navds-label--small {
|
||||
font-size: var(--navds-font-size-medium);
|
||||
letter-spacing: 0.002em;
|
||||
line-height: var(--navds-font-line-height-medium);
|
||||
}
|
||||
|
||||
.navds-label--small.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
/* Small text */
|
||||
.navds-detail {
|
||||
font-size: var(--navds-font-size-small);
|
||||
font-weight: var(--navds-font-weight-bold);
|
||||
letter-spacing: 0.004em;
|
||||
line-height: var(--navds-font-line-height-medium);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.navds-detail.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-detail--small {
|
||||
font-weight: var(--navds-font-weight-regular);
|
||||
}
|
||||
|
||||
.navds-detail--small.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-2);
|
||||
}
|
||||
@@ -1,2 +0,0 @@
|
||||
/src
|
||||
/png
|
||||
@@ -1,16 +0,0 @@
|
||||
const template = require("./template");
|
||||
|
||||
module.exports = {
|
||||
typescript: true,
|
||||
ref: true,
|
||||
icon: true,
|
||||
titleProp: true,
|
||||
svgProps: {
|
||||
focusable: false,
|
||||
role: "img",
|
||||
},
|
||||
replaceAttrValues: {
|
||||
"#262626": "currentColor",
|
||||
},
|
||||
template,
|
||||
};
|
||||
@@ -1,28 +0,0 @@
|
||||
# @navikt/ds-icons
|
||||
|
||||
Leverer [NAVs ikoner](https://design.nav.no/resources/icons) i React og SVG.
|
||||
|
||||
## Installering
|
||||
|
||||
```sh
|
||||
// yarn
|
||||
yarn add @navikt/ds-icons
|
||||
|
||||
// npm
|
||||
npm install @navikt/ds-icons
|
||||
```
|
||||
|
||||
## Bruk
|
||||
|
||||
```jsx
|
||||
/* ESM (anbefalt for tree-shaking)*/
|
||||
import { Down } from "@navikt/ds-icons";
|
||||
/* CJS */
|
||||
import { Down } from "@navikt/cjs/ds-icons";
|
||||
|
||||
<Down aria-label="Åpne meny" />;
|
||||
```
|
||||
|
||||
## Dokumentasjon
|
||||
|
||||
- [Ikonsøk](https://design.nav.no/resources/icons)
|
||||
@@ -1,48 +0,0 @@
|
||||
import Axios from "axios";
|
||||
const { create, get } = Axios;
|
||||
|
||||
const FILE_KEY = "UmEVH3pZ71uJPsSz9ilP3Y";
|
||||
|
||||
const FigmaAxion = (token?: string) =>
|
||||
create({
|
||||
headers: {
|
||||
"X-FIGMA-TOKEN": token,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* Published Figma-components
|
||||
* https://www.figma.com/file/UmEVH3pZ71uJPsSz9ilP3Y/%F0%9F%92%A0NAV-ikoner-2.5-Figma
|
||||
*/
|
||||
export const getPublishedIcons = async () => {
|
||||
const { data } = await FigmaAxion(process.env.FIGMA_TOKEN)
|
||||
.get(`https://api.figma.com/v1/files/${FILE_KEY}/components`)
|
||||
.catch((e) => {
|
||||
console.log("Failed getPublishedIcons ");
|
||||
throw e;
|
||||
});
|
||||
return data?.meta?.components;
|
||||
};
|
||||
|
||||
/**
|
||||
* Downloadable link to each icon in SVG-format
|
||||
*/
|
||||
export const getIconsDownloadableUrl = async (nodeIds: string) => {
|
||||
const {
|
||||
data: { images },
|
||||
} = await FigmaAxion(process.env.FIGMA_TOKEN)
|
||||
.get(
|
||||
`https://api.figma.com/v1/images/${FILE_KEY}/?ids=${nodeIds}&format=svg`
|
||||
)
|
||||
.catch((e) => {
|
||||
console.log("Failed getIconsDownloadableUrl ");
|
||||
throw e;
|
||||
});
|
||||
|
||||
return Object.values(images) as string[];
|
||||
};
|
||||
|
||||
/**
|
||||
* Download icon @url
|
||||
*/
|
||||
export const getIconContent = async (url: string) => get(url);
|
||||
@@ -1,85 +0,0 @@
|
||||
import {
|
||||
getPublishedIcons,
|
||||
getIconsDownloadableUrl,
|
||||
getIconContent,
|
||||
} from "./api";
|
||||
import { existsSync, writeFileSync, mkdirSync } from "fs";
|
||||
import { resolve } from "path";
|
||||
import pLimit from "p-limit";
|
||||
import rimraf from "rimraf";
|
||||
import startCase from "lodash.startcase";
|
||||
import { writeMeta } from "./write-meta";
|
||||
import dotenv from "dotenv";
|
||||
dotenv.config();
|
||||
|
||||
export type ComponentT = {
|
||||
key: string;
|
||||
file_key: string;
|
||||
node_id: string;
|
||||
thumbnail_url: string;
|
||||
name: string;
|
||||
description: string;
|
||||
updated_at: string;
|
||||
created_at: string;
|
||||
user: any;
|
||||
containing_frame: any;
|
||||
};
|
||||
|
||||
const main = async () => {
|
||||
if (!process.env.FIGMA_TOKEN) {
|
||||
throw new Error("FIGMA_TOKEN not set in .env");
|
||||
}
|
||||
const iconFolder = "./svg";
|
||||
|
||||
// Limiting to ~20 concurrent downloads seems to lead to less errors
|
||||
const limit = pLimit(20);
|
||||
|
||||
const publishedIconNodes: ComponentT[] = await getPublishedIcons();
|
||||
|
||||
writeMeta(publishedIconNodes);
|
||||
/* Get all urls in one fetch rather than 300+ */
|
||||
const iconUrls: string[] = await getIconsDownloadableUrl(
|
||||
publishedIconNodes.map((node) => node.node_id).join(",")
|
||||
);
|
||||
|
||||
if (existsSync(iconFolder)) {
|
||||
rimraf.sync(iconFolder);
|
||||
}
|
||||
mkdirSync(iconFolder);
|
||||
|
||||
console.log("Total icons: " + publishedIconNodes.length);
|
||||
|
||||
await Promise.all(
|
||||
iconUrls.map((url, x) =>
|
||||
limit(() =>
|
||||
getIconContent(url)
|
||||
.then(({ data }) => {
|
||||
writeFileSync(
|
||||
resolve(
|
||||
iconFolder,
|
||||
`${startCase(publishedIconNodes[x].name).replace(
|
||||
/\s/g,
|
||||
""
|
||||
)}.svg`
|
||||
),
|
||||
data,
|
||||
{
|
||||
encoding: "utf8",
|
||||
}
|
||||
);
|
||||
})
|
||||
.catch((e) => {
|
||||
throw e;
|
||||
})
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
console.log("\nDownloaded all icons from Figma!\n");
|
||||
};
|
||||
|
||||
try {
|
||||
main();
|
||||
} catch (e) {
|
||||
throw e;
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
import { existsSync, unlinkSync, writeFileSync } from "fs";
|
||||
import startCase from "lodash.startcase";
|
||||
import { ComponentT } from ".";
|
||||
|
||||
const generateMetadata = (publishedIconNodes: ComponentT[]) => {
|
||||
return publishedIconNodes
|
||||
.map(({ name, description, created_at, containing_frame }) => {
|
||||
return {
|
||||
name: startCase(name).replace(/\s/g, ""),
|
||||
description,
|
||||
created_at,
|
||||
// strip emojis
|
||||
pageName: containing_frame.pageName.replace(
|
||||
/([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
|
||||
""
|
||||
),
|
||||
};
|
||||
})
|
||||
.sort((a, b) => a.name.localeCompare(b.name));
|
||||
};
|
||||
|
||||
export const writeMeta = (publishedIconNodes: ComponentT[]) => {
|
||||
const metadataFileName = "./meta.json";
|
||||
|
||||
if (existsSync(metadataFileName)) {
|
||||
unlinkSync(metadataFileName);
|
||||
}
|
||||
writeFileSync(
|
||||
metadataFileName,
|
||||
JSON.stringify(generateMetadata(publishedIconNodes)),
|
||||
{
|
||||
encoding: "utf8",
|
||||
}
|
||||
);
|
||||
};
|
||||
@@ -1,57 +0,0 @@
|
||||
{
|
||||
"name": "@navikt/ds-icons",
|
||||
"version": "0.6.3",
|
||||
"private": false,
|
||||
"description": "NAVs egne ikoner i SVG og React format",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/navikt/nav-frontend-moduler/tree/master/%40navikt/ds-icons"
|
||||
},
|
||||
"keywords": [
|
||||
"NAV",
|
||||
"designsystem",
|
||||
"react"
|
||||
],
|
||||
"license": "MIT",
|
||||
"author": "NAV",
|
||||
"sideEffects": false,
|
||||
"main": "./cjs/index.js",
|
||||
"module": "./esm/index.js",
|
||||
"typings": "./esm/index.d.ts",
|
||||
"files": [
|
||||
"/cjs",
|
||||
"/esm",
|
||||
"/src",
|
||||
"/svg",
|
||||
"/meta.json"
|
||||
],
|
||||
"scripts": {
|
||||
"create-package-json-pointers-to-esm": "node ../../../utilities/scripts/createPackageJsonsWithESMPointers.js",
|
||||
"create-icons": "svgr --out-dir src svg",
|
||||
"convert-icons": "node scripts/pngConverter.mjs",
|
||||
"clean": "rimraf src cjs esm png NAV-ikonpakke-png.zip NAV-ikonpakke-svg.zip",
|
||||
"zip-icons": "node scripts/zipIcons.mjs",
|
||||
"build": "yarn clean && yarn create-icons && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm && yarn run convert-icons && yarn zip-icons",
|
||||
"update": "ts-node figma/index.ts dotenv/config"
|
||||
},
|
||||
"dependencies": {
|
||||
"uuid": "^8.3.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@svgr/cli": "^5.5.0",
|
||||
"@types/lodash.startcase": "^4.4.6",
|
||||
"@types/uuid": "^8.3.1",
|
||||
"copyfiles": "^2.4.1",
|
||||
"dotenv": "^10.0.0",
|
||||
"lodash.kebabcase": "^4.1.1",
|
||||
"lodash.startcase": "4.4.0",
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
"rimraf": "3.0.2",
|
||||
"sharp": "0.29.1",
|
||||
"ts-node": "^10.4.0",
|
||||
"zip-dir": "^2.0.0"
|
||||
}
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M13 3C13 4.65685 11.6569 6 10 6C8.34315 6 7 4.65685 7 3C7 1.34315 8.34315 0 10 0C11.6569 0 13 1.34315 13 3ZM24 14.5C24 15.3284 23.3284 16 22.5 16C21.6716 16 21 15.3284 21 14.5C21 13.6716 21.6716 13 22.5 13C23.3284 13 24 13.6716 24 14.5ZM5.68636 6C4.98108 6 4.36366 6.47353 4.18079 7.15469L1.00073 19H2H4.25773V24H6.25773V19H8.25773V24H10.2577V19H12H13.0018L11.1893 11H14C14.5523 11 15 10.5523 15 10C15 9.44771 14.5523 9 14 9H10.5682C9.65406 7.19312 7.78502 6 5.68636 6ZM21 12C21 11.4477 20.5523 11 20 11C19.4477 11 19 11.4477 19 12V14H17.618L17.1708 13.1056C16.832 12.428 16.1395 12 15.382 12H15C14.4477 12 14 12.4477 14 13C14 13.5523 14.4477 14 15 14H15.382L15.8292 14.8944C16.168 15.572 16.8605 16 17.618 16H19C20.1046 16 21 15.1046 21 14V12ZM14 18C14 17.4477 14.4477 17 15 17H23C23.5523 17 24 17.4477 24 18C24 18.5523 23.5523 19 23 19H15C14.4477 19 14 18.5523 14 18Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.0131 1.10889L18.0433 1.07797C19.2857 -0.193723 21.3537 -0.408751 22.7918 0.823966L22.8275 0.854537L22.9935 1.01096L23.0262 1.04481C24.2931 2.3565 24.3049 4.40707 23.1718 5.78656L21.6845 7.59584L14.1605 16.7559L6.9503 20.0199L8.82643 12.2761L15.1821 4.53889L15.1817 4.53857L16.3832 3.07665L16.4505 2.99468L17.8601 1.27963L18.0131 1.10889ZM17.9807 4.28L19.375 2.58351L19.4707 2.47669C20.0324 1.90179 20.9117 1.84497 21.4932 2.3434L21.5908 2.43534C22.1151 2.9782 22.1517 3.88027 21.6295 4.51599L20.2534 6.19L17.9807 4.28ZM10.6593 13.1929L16.7116 5.82501L18.9843 7.73501L12.9138 15.1254L9.85575 16.5098L10.6593 13.1929ZM0 24H23.965V22H0V24Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 811 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 4.06273V0H0.999999V7.99999H8.99999V5.99999H3.99914C5.82464 3.56964 8.72948 2 12 2C17.5228 2 22 6.47714 22 12C22 14.411 21.148 16.6204 19.7276 18.3474L21.2723 19.6178C22.9762 17.5461 24 14.8913 24 12C24 5.37258 18.6274 0 12 0C8.41497 0 5.19798 1.57244 3 4.06273ZM16.3753 16.7808L11 12.4806L11 5.99999L13 5.99999L13 11.5194L17.6247 15.2191L16.3753 16.7808ZM0 11V13H2V11H0ZM0.999999 18V16H3V18H0.999999ZM4.99999 22H6.99999V20H4.99999V22ZM13 24H11V22H13V24ZM17 22H19V20H17V22Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 646 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.99999 6.99999L5.99999 4.99999L5.44642 4.44642C7.20205 2.92183 9.49364 2 12 2V12L20.5 19L20.5054 18.987L21.2723 19.6178C22.9762 17.5461 24 14.8913 24 12C24 5.37258 18.6274 0 12 0C8.94014 0 6.14837 1.14549 4.02948 3.02948L3 2L0.999999 0V2.82842V4.99999V6.99999H3H3.33597L3.33723 7.00072L3.33765 6.99999H5.17157H7.99999ZM0 11V13H2V11H0ZM0.999999 18V16H3V18H0.999999ZM4.99999 20V22H6.99999V20H4.99999ZM11 24V22H13V24H11ZM17 22H19V20H17V22Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 609 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M13 15.9381C16.9463 15.446 20 12.0796 20 8C20 3.58172 16.4183 0 12 0C7.58172 0 4 3.58172 4 8C4 12.0796 7.05369 15.446 11 15.9381V23.9871C10.9997 23.8766 10.9913 23.0662 10.8182 21.9959C10.5766 20.5022 10.014 18.5023 8.70434 17.1927C7.40565 15.894 5.46084 15.3626 4.00003 15.1464C3.57971 15.0842 3.19945 15.048 2.88619 15.0273C2.34303 14.9912 2.00129 15.0013 2.00129 15.0013C2.00129 15.0013 1.99124 15.343 2.02727 15.8862C2.04805 16.1994 2.08416 16.5797 2.14637 17C2.36257 18.4608 2.89398 20.4056 4.19267 21.7043C5.5023 23.014 7.5022 23.5766 8.99595 23.8182C10.1487 24.0047 11 24 11 24H13C13 24 13.8513 24.0047 15.004 23.8182C16.4978 23.5766 18.4977 23.014 19.8073 21.7043C21.106 20.4056 21.6374 18.4608 21.8536 17C21.9158 16.5797 21.9519 16.1994 21.9727 15.8862C22.0088 15.343 21.9987 15.0013 21.9987 15.0013C21.9987 15.0013 21.657 14.9912 21.1138 15.0273C20.8005 15.048 20.4203 15.0842 20 15.1464C18.5392 15.3626 16.5943 15.894 15.2957 17.1927C13.986 18.5023 13.4234 20.5022 13.1818 21.9959C13.0087 23.0662 13.0003 23.8766 13 23.9871V15.9381ZM9.375 12.5V4H12.511C13.015 4 13.3337 4.05133 13.7724 4.154C14.211 4.24733 14.5937 4.41067 14.9204 4.644C15.247 4.868 15.5037 5.17133 15.6904 5.554C15.8864 5.92733 15.9844 6.38933 15.9844 6.94C15.9844 7.472 15.8864 7.934 15.6904 8.326C15.5037 8.718 15.247 9.04 14.9204 9.292C14.5937 9.544 14.2157 9.73066 13.7864 9.852C13.357 9.97333 13.0523 10.034 12.567 10.034H11.375V12.5H9.375ZM11.375 8.396H12.441C13.561 8.396 14.121 7.91066 14.121 6.94C14.121 6.464 13.9717 6.128 13.673 5.932C13.3743 5.736 12.945 5.638 12.385 5.638H11.375V8.396Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.7 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2H14V3H13H11H10V2ZM8 3.58152V2C8 0.89543 8.89543 0 10 0H14C15.1046 0 16 0.895431 16 2V3.58152C18.9318 4.76829 21 7.64262 21 11V20C21 22.2091 19.2091 24 17 24H7C4.79086 24 3 22.2091 3 20V11C3 7.64262 5.06817 4.76829 8 3.58152ZM2 22V20V15V13C0.895431 13 0 13.8954 0 15V20C0 21.1046 0.895431 22 2 22ZM22 20V22C23.1046 22 24 21.1046 24 20V15C24 13.8954 23.1046 13 22 13V15V20ZM9 8C8.44772 8 8 8.44772 8 9C8 9.55228 8.44772 10 9 10H15C15.5523 10 16 9.55228 16 9C16 8.44772 15.5523 8 15 8H9ZM9 15H15V18H9V15ZM7 15C7 13.8954 7.89543 13 9 13H15C16.1046 13 17 13.8954 17 15V18C17 19.1046 16.1046 20 15 20H9C7.89543 20 7 19.1046 7 18V15Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 802 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C13.6569 0 15 1.34315 15 3V9L19.7576 9.4651C22.3164 9.80542 24.1721 12.1379 23.9873 14.7818L22.3697 24H8.74161L2.67411 16.2086C1.69493 14.9513 1.69753 13.206 2.90101 12C4.05636 10.8422 5.77348 11.0077 6.86477 11.6803L9.00001 13V3C9.00001 1.34315 10.3432 0 12 0ZM12 2C11.4872 2 11.0645 2.38604 11.0067 2.88338L11 3V16.5806L5.94903 13.4698L5.86435 13.4147C5.35635 13.0653 4.66307 13.0656 4.31672 13.4127C3.90496 13.8253 3.8554 14.3776 4.17241 14.8679L4.25207 14.9798L9.71801 21.999H20.689L21.995 14.561L21.9997 14.4586C22.0175 12.9968 21.0244 11.744 19.7267 11.483L19.563 11.4556L13 10.814V3C13 2.48716 12.614 2.06449 12.1166 2.00673L12 2Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 813 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C13.6569 0 15 1.34315 15 3V9L19.7576 9.4651C22.3164 9.80542 24.1721 12.1379 23.9873 14.7818L22.3697 24H8.74161L2.67411 16.2086C1.69493 14.9513 1.69753 13.206 2.90101 12C4.05636 10.8422 5.77348 11.0077 6.86477 11.6803L9.00001 13V3C9.00001 1.34315 10.3432 0 12 0Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 437 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.1794 2.30094C11.5577 1.91392 12.1754 1.89816 12.5729 2.26539L16.6089 5.99298L22 5.99298L22 12.1017L18.6014 12.1017L12.8839 6.38425L12.8839 6.38422L11.4697 4.97001L8.28778 8.15198C7.89726 8.5425 7.26409 8.5425 6.87357 8.15198L6.15851 7.43691L11.1794 2.30094ZM11.4697 7.79846L9.70198 9.56619C8.53042 10.7378 6.63093 10.7378 5.45937 9.56619L4.7443 8.85112C3.9695 8.07632 3.9624 6.82234 4.72837 6.03882L4.77319 5.99297L2 5.99297L2.00002 12.5748L10.3952 20.8588C10.587 21.0481 10.8947 21.0501 11.0891 20.8634C11.2901 20.6704 11.2933 20.35 11.0963 20.153L10.0554 19.1121L11.4696 17.6979L11.4696 17.6979L11.4696 17.6979L13.2374 19.4656C13.4327 19.6609 13.7492 19.6609 13.9445 19.4656C14.1398 19.2703 14.1398 18.9538 13.9445 18.7585L12.1768 16.9908L12.1767 16.9907L13.5909 15.5765L13.591 15.5766L15.3587 17.3443L16.0658 18.0514C16.2611 18.2467 16.5777 18.2467 16.7729 18.0514C16.9682 17.8562 16.9682 17.5396 16.7729 17.3443L14.2981 14.8695L14.2981 14.8694L15.7123 13.4552L15.7123 13.4552L18.1871 15.9301L18.8942 16.6372C19.0895 16.8325 19.4061 16.8325 19.6014 16.6372C19.7966 16.4419 19.7966 16.1254 19.6014 15.9301L11.4697 7.79846ZM6.72837 3.99298L9.74926 0.90285C10.8843 -0.258223 12.7371 -0.3055 13.9299 0.796174L17.3911 3.99299L24 3.99299L24 14.1017L20.6014 14.1017L21.0156 14.5159C21.9919 15.4922 21.9919 17.0751 21.0156 18.0514C20.3872 18.6798 19.5076 18.9037 18.7001 18.7232C18.5792 18.9924 18.4082 19.2446 18.1871 19.4656C17.5588 20.094 16.6792 20.3179 15.8717 20.1375C15.7508 20.4066 15.5798 20.6588 15.3587 20.8798C14.7232 21.5154 13.8306 21.7372 13.0156 21.5453C12.8886 21.8227 12.7082 22.0815 12.4745 22.3059C11.4985 23.2432 9.95361 23.2328 8.99041 22.2824L3.12523e-05 13.4111L0 3.99298L6.72837 3.99298Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.8 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 3C15.4049 3 13.7127 4.29773 13.1774 6H18C19.5286 6 20.9237 6.57164 21.9832 7.5128C21.9943 7.39367 22 7.27315 22 7.15143C22 4.91932 20.048 3 17.5 3ZM17.5 1C14.0464 1 11.1243 3.58224 11.0039 6.93607C10.8099 7.24421 10.6977 7.609 10.6977 8V11.0465L7.81573 9.791L4.80976 6.38165C4.37227 5.82567 3.5116 5.88736 3.15786 6.50004L0.134897 11.736C-0.218836 12.3487 0.158084 13.1249 0.858318 13.2258L4.72774 13.8712L10.6977 18.1074V21C10.6977 22.1046 11.5931 23 12.6977 23H22C23.1046 23 24 22.1046 24 21V12C24 11.131 23.8153 10.3052 23.483 9.55967C23.815 8.82127 24 8.00712 24 7.15143C24 3.69343 21.0272 1 17.5 1ZM5.35788 10.0275L4.27048 11.7673L2.58823 11.4867L4.19329 8.70662L5.35788 10.0275ZM6.38032 12.5915L12.6977 17.0742V21H22V12C22 9.79086 20.2092 8 18 8H12.6977V14.0994L6.99156 11.6135L6.38032 12.5915Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 977 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 3C15.4049 3 13.7127 4.29773 13.1774 6H18C19.5286 6 20.9237 6.57164 21.9832 7.5128C21.9943 7.39367 22 7.27315 22 7.15143C22 4.91932 20.048 3 17.5 3ZM17.5 1C14.0464 1 11.1243 3.58224 11.0039 6.93607C10.8099 7.24421 10.6977 7.609 10.6977 8V11.0465L8 10L6 14L10.6977 18.1074V21C10.6977 22.1046 11.5931 23 12.6977 23H22C23.1046 23 24 22.1046 24 21V12C24 11.131 23.8153 10.3052 23.483 9.55967C23.815 8.82127 24 8.00712 24 7.15143C24 3.69343 21.0272 1 17.5 1ZM5 13.5L0.858318 13.2258C0.158084 13.1249 -0.218836 12.3487 0.134897 11.736L3.15786 6.50004C3.5116 5.88736 4.37227 5.82567 4.80976 6.38165L7 9.5L5 13.5Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 781 B |
@@ -1,45 +0,0 @@
|
||||
function defaultTemplate(
|
||||
{ template },
|
||||
opts,
|
||||
{ imports, interfaces, componentName, props, jsx, exports }
|
||||
) {
|
||||
const plugins = ["jsx"];
|
||||
if (opts.typescript) {
|
||||
plugins.push("typescript");
|
||||
}
|
||||
|
||||
imports.push({
|
||||
type: "ImportDeclaration",
|
||||
specifiers: [
|
||||
{
|
||||
type: "ImportSpecifier",
|
||||
imported: {
|
||||
type: "Identifier",
|
||||
name: "v4",
|
||||
},
|
||||
},
|
||||
],
|
||||
source: {
|
||||
type: "StringLiteral",
|
||||
value: "uuid",
|
||||
},
|
||||
});
|
||||
|
||||
props[0].properties.find((prop) => prop.key.name === "titleId").value = {
|
||||
type: "Identifier",
|
||||
name: "_titleId",
|
||||
};
|
||||
|
||||
const typeScriptTpl = template.smart({ plugins });
|
||||
return typeScriptTpl.ast`
|
||||
${imports}
|
||||
${interfaces}
|
||||
function ${componentName}(${props}) {
|
||||
const titleId = _titleId ?? (title ?
|
||||
"icon-title-" + v4() : undefined);
|
||||
return ${jsx};
|
||||
}
|
||||
${exports}`;
|
||||
}
|
||||
|
||||
module.exports = defaultTemplate;
|
||||
@@ -1,9 +0,0 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./esm",
|
||||
"module": "esnext",
|
||||
"sourceMap": true,
|
||||
"declaration": true
|
||||
}
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./cjs",
|
||||
"module": "commonjs"
|
||||
},
|
||||
"exclude": ["./figma", "./scripts", "**/stories"]
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
import "@testing-library/jest-dom/extend-expect";
|
||||
@@ -1,7 +0,0 @@
|
||||
module.exports = {
|
||||
transform: {
|
||||
"^.+\\.tsx?$": "ts-jest",
|
||||
},
|
||||
setupFilesAfterEnv: ["<rootDir>/jest-setup.ts"],
|
||||
testEnvironment: "jsdom",
|
||||
};
|
||||
@@ -1,39 +0,0 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import cl from "classnames";
|
||||
import MenuItems from "./MenuItems";
|
||||
import Collapsable, {
|
||||
AccordionMenuCollapsableType,
|
||||
} from "./AccordionMenuCollapsable";
|
||||
import Item, { AccordionMenuItemType } from "./AccordionMenuItem";
|
||||
|
||||
export interface AccordionMenuProps extends React.HTMLAttributes<HTMLElement> {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
interface AccordionMenuComponent
|
||||
extends React.ForwardRefExoticComponent<
|
||||
AccordionMenuProps & React.RefAttributes<HTMLElement>
|
||||
> {
|
||||
Collapsable: AccordionMenuCollapsableType;
|
||||
Item: AccordionMenuItemType;
|
||||
}
|
||||
|
||||
const AccordionMenu = forwardRef<HTMLElement, AccordionMenuProps>(
|
||||
({ children, className, ...rest }, ref) => {
|
||||
return (
|
||||
<nav
|
||||
role="navigation"
|
||||
ref={ref}
|
||||
className={cl("navds-accordion-menu", className)}
|
||||
{...rest}
|
||||
>
|
||||
<MenuItems>{children}</MenuItems>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
) as AccordionMenuComponent;
|
||||
|
||||
AccordionMenu.Collapsable = Collapsable;
|
||||
AccordionMenu.Item = Item;
|
||||
|
||||
export default AccordionMenu;
|
||||
@@ -1,45 +0,0 @@
|
||||
import React, { forwardRef, HTMLAttributes, useState } from "react";
|
||||
import cl from "classnames";
|
||||
import { Expand } from "@navikt/ds-icons";
|
||||
import MenuItems from "./MenuItems";
|
||||
|
||||
export interface AccordionMenuCollapsableProps
|
||||
extends HTMLAttributes<HTMLDivElement> {
|
||||
title: string;
|
||||
defaultOpen?: boolean;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export type AccordionMenuCollapsableType = React.ForwardRefExoticComponent<
|
||||
AccordionMenuCollapsableProps & React.RefAttributes<HTMLDivElement>
|
||||
>;
|
||||
|
||||
const Collapsable: AccordionMenuCollapsableType = forwardRef(
|
||||
({ children, defaultOpen = false, title, className, ...rest }, ref) => {
|
||||
const [isOpen, setIsOpen] = useState(defaultOpen);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cl("navds-accordion-menu-collapsable", className, {
|
||||
"navds-accordion-menu-collapsable--open": isOpen,
|
||||
})}
|
||||
{...rest}
|
||||
>
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="navds-accordion-menu-collapsable__button"
|
||||
>
|
||||
{title}
|
||||
<Expand
|
||||
title={isOpen ? "Pil peker opp" : "Pil peker ned"}
|
||||
className="navds-accordion-menu-collapsable__expand-icon"
|
||||
/>
|
||||
</button>
|
||||
{isOpen && <MenuItems>{children}</MenuItems>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default Collapsable;
|
||||
@@ -1,39 +0,0 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import { OverridableComponent } from "..";
|
||||
import cl from "classnames";
|
||||
|
||||
export interface AccordionMenuItemProps
|
||||
extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* Sets active styling if true
|
||||
* @default false
|
||||
*/
|
||||
active?: boolean;
|
||||
}
|
||||
|
||||
export type AccordionMenuItemType = OverridableComponent<
|
||||
AccordionMenuItemProps,
|
||||
HTMLAnchorElement
|
||||
>;
|
||||
|
||||
const Item: AccordionMenuItemType = forwardRef(
|
||||
(
|
||||
{ children, as: Component = "a", active = false, className, ...rest },
|
||||
ref
|
||||
) => {
|
||||
return (
|
||||
<Component
|
||||
ref={ref}
|
||||
className={cl("navds-accordion-menu-item", className, {
|
||||
"navds-accordion-menu-item--active": active,
|
||||
})}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</Component>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default Item;
|
||||
@@ -1,3 +0,0 @@
|
||||
export { default as AccordionMenu, AccordionMenuProps } from "./AccordionMenu";
|
||||
export { AccordionMenuCollapsableProps } from "./AccordionMenuCollapsable";
|
||||
export { AccordionMenuItemProps } from "./AccordionMenuItem";
|
||||
@@ -1,66 +0,0 @@
|
||||
import { Meta, Canvas } from "@storybook/addon-docs";
|
||||
import { AccordionMenu } from "../../index";
|
||||
|
||||
<Meta title="ds-react/accordion-menu/intro" />
|
||||
|
||||
# Hvordan ta i bruk Accordion-menu
|
||||
|
||||
```jsx
|
||||
<AccordionMenu>
|
||||
<AccordionMenu.item href="#leo">Leo</AccordionMenu.item>
|
||||
<AccordionMenu.Collapsable title="Proin">
|
||||
<AccordionMenu.item href="#nulla" active>
|
||||
Nulla
|
||||
</AccordionMenu.item>
|
||||
<AccordionMenu.item href="#luctus">Luctus</AccordionMenu.item>
|
||||
</AccordionMenu.Collapsable>
|
||||
<AccordionMenu.Collapsable title="Accumsan">
|
||||
<AccordionMenu.item href="#justo" aria-current="page">
|
||||
Justo
|
||||
</AccordionMenu.item>
|
||||
<AccordionMenu.Collapsable title="Proin">
|
||||
<AccordionMenu.item href="#nulla">Nulla</AccordionMenu.item>
|
||||
<AccordionMenu.item href="#luctus">Luctus</AccordionMenu.item>
|
||||
</AccordionMenu.Collapsable>
|
||||
</AccordionMenu.Collapsable>
|
||||
</AccordionMenu>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<AccordionMenu>
|
||||
<AccordionMenu.Item href="#leo">Leo</AccordionMenu.Item>
|
||||
<AccordionMenu.Collapsable title="Proin">
|
||||
<AccordionMenu.Item href="#nulla" active>
|
||||
Nulla
|
||||
</AccordionMenu.Item>
|
||||
<AccordionMenu.Item href="#luctus">Luctus</AccordionMenu.Item>
|
||||
</AccordionMenu.Collapsable>
|
||||
<AccordionMenu.Collapsable title="Accumsan">
|
||||
<AccordionMenu.Item href="#justo" aria-current="page">
|
||||
Justo
|
||||
</AccordionMenu.Item>
|
||||
<AccordionMenu.Collapsable title="Proin">
|
||||
<AccordionMenu.Item href="#nulla">Nulla</AccordionMenu.Item>
|
||||
<AccordionMenu.Item href="#luctus">Luctus</AccordionMenu.Item>
|
||||
</AccordionMenu.Collapsable>
|
||||
</AccordionMenu.Collapsable>
|
||||
</AccordionMenu>
|
||||
</Canvas>
|
||||
|
||||
Accordion-menu støtter opp til maks to-nivårer av `AccordionMenu.Collapsable` akkurat nå.
|
||||
|
||||
`AccordionMenu.Item` er implementert med `OverridableComponent`, noe som
|
||||
gjør at man kan ta i bruk eks react-router slik:
|
||||
|
||||
```jsx
|
||||
<AccordionMenu.item
|
||||
as={NavLink}
|
||||
activeClassName="navds-accordion-menu-item--active"
|
||||
to="/1"
|
||||
>
|
||||
Lenketekst
|
||||
</AccordionMenu.item>
|
||||
```
|
||||
|
||||
Her er `NavLink` fra `react-router-dom` brukt, og man får da
|
||||
samtidig bruke alle propsene til denne komponenten som da er `activeClassName` her.
|
||||
@@ -1,141 +0,0 @@
|
||||
import * as React from "react";
|
||||
import { AccordionMenu } from "../index";
|
||||
import { NavLink, HashRouter as Router } from "react-router-dom";
|
||||
|
||||
export default {
|
||||
title: "ds-react/accordion-menu",
|
||||
component: { AccordionMenu },
|
||||
};
|
||||
|
||||
export const All = () => (
|
||||
<div
|
||||
style={{
|
||||
background: "white",
|
||||
maxWidth: 288,
|
||||
}}
|
||||
>
|
||||
<AccordionMenu>
|
||||
<AccordionMenu.Item href="#leo">Leo</AccordionMenu.Item>
|
||||
<AccordionMenu.Collapsable title="Proin">
|
||||
<AccordionMenu.Item href="#nulla" active>
|
||||
Nulla
|
||||
</AccordionMenu.Item>
|
||||
<AccordionMenu.Item href="#luctus">Luctus</AccordionMenu.Item>
|
||||
</AccordionMenu.Collapsable>
|
||||
<AccordionMenu.Collapsable title="Accumsan">
|
||||
<AccordionMenu.Item href="#justo" aria-current="page">
|
||||
Justo
|
||||
</AccordionMenu.Item>
|
||||
<AccordionMenu.Item href="#pariatur" active aria-current="page">
|
||||
Pariatur
|
||||
</AccordionMenu.Item>
|
||||
<AccordionMenu.Collapsable title="Proin">
|
||||
<AccordionMenu.Item href="#nulla" active>
|
||||
Nulla
|
||||
</AccordionMenu.Item>
|
||||
<AccordionMenu.Item href="#luctus">Luctus</AccordionMenu.Item>
|
||||
</AccordionMenu.Collapsable>
|
||||
</AccordionMenu.Collapsable>
|
||||
<AccordionMenu.Item href="#justo" active>
|
||||
Justo
|
||||
</AccordionMenu.Item>
|
||||
<AccordionMenu.Item href="#pariatur">Pariatur</AccordionMenu.Item>
|
||||
</AccordionMenu>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const ReactRouter = () => (
|
||||
<AccordionMenu>
|
||||
<AccordionMenu.Collapsable title="Nivå 1 – 3 rems høy">
|
||||
<AccordionMenu.Item
|
||||
as={NavLink}
|
||||
activeClassName="navds-accordion-menu-item--active"
|
||||
to="/1"
|
||||
>
|
||||
Nivå 2 innrykk 2 rems
|
||||
</AccordionMenu.Item>
|
||||
<AccordionMenu.Item
|
||||
as={NavLink}
|
||||
activeClassName="navds-accordion-menu-item--active"
|
||||
to="/2"
|
||||
>
|
||||
Subtitle 3
|
||||
</AccordionMenu.Item>
|
||||
</AccordionMenu.Collapsable>
|
||||
<AccordionMenu.Collapsable title="Skjema og søknad">
|
||||
<AccordionMenu.Collapsable title="Satser">
|
||||
<AccordionMenu.Item
|
||||
as={NavLink}
|
||||
activeClassName="navds-accordion-menu-item--active"
|
||||
to="/3"
|
||||
>
|
||||
Nivå 3 – 3 rems innrykk Har du rett til dagpenger når du mottar annen
|
||||
økonomisk støtte fra NAV?
|
||||
</AccordionMenu.Item>
|
||||
</AccordionMenu.Collapsable>
|
||||
<AccordionMenu.Item
|
||||
as={NavLink}
|
||||
activeClassName="navds-accordion-menu-item--active"
|
||||
to="/4"
|
||||
>
|
||||
Subtitle 2
|
||||
</AccordionMenu.Item>
|
||||
<AccordionMenu.Item
|
||||
as={NavLink}
|
||||
activeClassName="navds-accordion-menu-item--active"
|
||||
to="/5"
|
||||
>
|
||||
Subtitle 3
|
||||
</AccordionMenu.Item>
|
||||
</AccordionMenu.Collapsable>
|
||||
<AccordionMenu.Collapsable title="Sakbehandlingstider">
|
||||
<AccordionMenu.Collapsable title="Subtitle 4 Lang tittel på andre nivå lorem ipsum">
|
||||
<AccordionMenu.Item
|
||||
as={NavLink}
|
||||
activeClassName="navds-accordion-menu-item--active"
|
||||
to="/6"
|
||||
>
|
||||
Subtitle 5
|
||||
</AccordionMenu.Item>
|
||||
</AccordionMenu.Collapsable>
|
||||
</AccordionMenu.Collapsable>
|
||||
<AccordionMenu.Item
|
||||
as={NavLink}
|
||||
activeClassName="navds-accordion-menu-item--active"
|
||||
to="/7"
|
||||
>
|
||||
Internasjonalt
|
||||
</AccordionMenu.Item>
|
||||
<AccordionMenu.Collapsable title="Meld fra om endringer lang tittel på første nivå">
|
||||
<AccordionMenu.Item
|
||||
as={NavLink}
|
||||
activeClassName="navds-accordion-menu-item--active"
|
||||
to="/8"
|
||||
>
|
||||
Subtitle 6
|
||||
</AccordionMenu.Item>
|
||||
</AccordionMenu.Collapsable>
|
||||
<AccordionMenu.Item
|
||||
as={NavLink}
|
||||
activeClassName="navds-accordion-menu-item--active"
|
||||
to="/9"
|
||||
>
|
||||
Nivå 1
|
||||
</AccordionMenu.Item>
|
||||
</AccordionMenu>
|
||||
);
|
||||
|
||||
ReactRouter.decorators = [
|
||||
(Story) => (
|
||||
<Router>
|
||||
<div
|
||||
style={{
|
||||
background: "white",
|
||||
maxWidth: 288,
|
||||
}}
|
||||
>
|
||||
<Story />
|
||||
</div>
|
||||
</Router>
|
||||
),
|
||||
];
|
||||
@@ -1,33 +0,0 @@
|
||||
import cl from "classnames";
|
||||
import React, { forwardRef } from "react";
|
||||
import AccordionItem, { AccordionItemType } from "./AccordionItem";
|
||||
import AccordionContent, { AccordionContentType } from "./AccordionContent";
|
||||
import AccordionHeader, { AccordionHeaderType } from "./AccordionHeader";
|
||||
|
||||
interface AccordionComponent
|
||||
extends React.ForwardRefExoticComponent<
|
||||
AccordionProps & React.RefAttributes<HTMLDivElement>
|
||||
> {
|
||||
Item: AccordionItemType;
|
||||
Header: AccordionHeaderType;
|
||||
Content: AccordionContentType;
|
||||
}
|
||||
|
||||
export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
/**
|
||||
* Content inside accordion
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
|
||||
({ className, ...rest }, ref) => (
|
||||
<div {...rest} className={cl("navds-accordion", className)} ref={ref} />
|
||||
)
|
||||
) as AccordionComponent;
|
||||
|
||||
Accordion.Header = AccordionHeader;
|
||||
Accordion.Content = AccordionContent;
|
||||
Accordion.Item = AccordionItem;
|
||||
|
||||
export default Accordion;
|
||||
@@ -1,45 +0,0 @@
|
||||
import cl from "classnames";
|
||||
import React, { forwardRef, useContext } from "react";
|
||||
import { Collapse, UnmountClosed } from "react-collapse";
|
||||
import { AccordionItemContext } from "./AccordionItem";
|
||||
|
||||
export interface AccordionContentProps
|
||||
extends React.HTMLAttributes<HTMLDivElement> {
|
||||
/**
|
||||
* Accordion panel content
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export type AccordionContentType = React.ForwardRefExoticComponent<
|
||||
AccordionContentProps & React.RefAttributes<HTMLDivElement>
|
||||
>;
|
||||
|
||||
const AccordionContent: AccordionContentType = forwardRef(
|
||||
({ children, className, id, ...rest }, ref) => {
|
||||
const context = useContext(AccordionItemContext);
|
||||
|
||||
if (context === null) {
|
||||
console.error(
|
||||
"<Accordion.Content> has to be used within an <Accordion.Item>"
|
||||
);
|
||||
return null;
|
||||
}
|
||||
|
||||
const CollapseComponent = context.renderContentWhenClosed
|
||||
? Collapse
|
||||
: UnmountClosed;
|
||||
|
||||
return (
|
||||
<div ref={ref} role="region" aria-labelledby={context.buttonId} {...rest}>
|
||||
<CollapseComponent isOpened={context.open}>
|
||||
<div className={cl("navds-accordion__content", className)}>
|
||||
{children}
|
||||
</div>
|
||||
</CollapseComponent>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default AccordionContent;
|
||||
@@ -1,79 +0,0 @@
|
||||
import { Expand, ExpandFilled } from "@navikt/ds-icons";
|
||||
import cl from "classnames";
|
||||
import React, { forwardRef, useContext } from "react";
|
||||
import { AccordionItemContext } from "./AccordionItem";
|
||||
import { useClientLayoutEffect, useId } from "..";
|
||||
|
||||
export interface AccordionHeaderProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
/**
|
||||
* Button content
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export type AccordionHeaderType = React.ForwardRefExoticComponent<
|
||||
AccordionHeaderProps & React.RefAttributes<HTMLButtonElement>
|
||||
>;
|
||||
|
||||
const AccordionHeader: AccordionHeaderType = forwardRef(
|
||||
({ children, className, id, onClick, ...rest }, ref) => {
|
||||
const context = useContext(AccordionItemContext);
|
||||
const newId = useId(id);
|
||||
|
||||
const setButtonId = context && context.setButtonId;
|
||||
|
||||
useClientLayoutEffect(() => {
|
||||
setButtonId && setButtonId(id ? newId : `accordionContent-${newId}`);
|
||||
}, [setButtonId, newId]);
|
||||
|
||||
if (context === null) {
|
||||
console.error(
|
||||
"<Accordion.Header> has to be used within an <Accordion.Item>"
|
||||
);
|
||||
return null;
|
||||
}
|
||||
|
||||
const handleClick = (
|
||||
e: React.MouseEvent<HTMLButtonElement, MouseEvent>
|
||||
) => {
|
||||
context.toggleOpen();
|
||||
onClick && onClick(e);
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
ref={ref}
|
||||
id={context.buttonId}
|
||||
className={cl(
|
||||
"navds-accordion__header",
|
||||
className,
|
||||
"navds-heading",
|
||||
"navds-heading--small"
|
||||
)}
|
||||
onClick={handleClick}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
<Expand
|
||||
title={context.open ? "Lukk panel ikon" : "Åpne panel ikon"}
|
||||
className={cl("navds-accordion__expand-icon", {
|
||||
"navds-accordion__expand-icon--flip": context.open,
|
||||
})}
|
||||
/>
|
||||
<ExpandFilled
|
||||
title={context.open ? "Lukk panel ikon" : "Åpne panel ikon"}
|
||||
className={cl(
|
||||
"navds-accordion__expand-icon",
|
||||
"navds-accordion__expand-icon--filled",
|
||||
{
|
||||
"navds-accordion__expand-icon--flip": context.open,
|
||||
}
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default AccordionHeader;
|
||||
@@ -1,88 +0,0 @@
|
||||
import cl from "classnames";
|
||||
import React, { createContext, forwardRef, useState } from "react";
|
||||
|
||||
export interface AccordionItemProps
|
||||
extends React.HTMLAttributes<HTMLDivElement> {
|
||||
/**
|
||||
* Content inside accordion item
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* Opens component if 'true', closes if 'false'
|
||||
* Using this props removes automatic control of open-state
|
||||
*/
|
||||
open?: boolean;
|
||||
/**
|
||||
* Defaults the accordion to opened state
|
||||
* @default false
|
||||
*/
|
||||
defaultOpen?: boolean;
|
||||
/**
|
||||
* Removes content-element from dom when closed
|
||||
* @default false
|
||||
*/
|
||||
renderContentWhenClosed?: boolean;
|
||||
}
|
||||
|
||||
export type AccordionItemType = React.ForwardRefExoticComponent<
|
||||
AccordionItemProps & React.RefAttributes<HTMLDivElement>
|
||||
>;
|
||||
|
||||
export interface AccordionItemContextProps {
|
||||
open: boolean;
|
||||
toggleOpen: () => void;
|
||||
setButtonId: (id: string) => void;
|
||||
buttonId: string;
|
||||
renderContentWhenClosed: boolean;
|
||||
}
|
||||
|
||||
export const AccordionItemContext = createContext<AccordionItemContextProps | null>(
|
||||
null
|
||||
);
|
||||
|
||||
const AccordionItem: AccordionItemType = forwardRef(
|
||||
(
|
||||
{
|
||||
children,
|
||||
className,
|
||||
open,
|
||||
defaultOpen = false,
|
||||
renderContentWhenClosed = false,
|
||||
onClick,
|
||||
id,
|
||||
...rest
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);
|
||||
const [buttonId, setButtonId] = useState("");
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cl("navds-accordion__item", className, {
|
||||
"navds-accordion__item--open": open ?? internalOpen,
|
||||
})}
|
||||
ref={ref}
|
||||
{...rest}
|
||||
>
|
||||
<AccordionItemContext.Provider
|
||||
value={{
|
||||
open: open ?? internalOpen,
|
||||
toggleOpen: () => {
|
||||
if (open === undefined) {
|
||||
setInternalOpen((iOpen) => !iOpen);
|
||||
}
|
||||
},
|
||||
renderContentWhenClosed,
|
||||
setButtonId,
|
||||
buttonId,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</AccordionItemContext.Provider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default AccordionItem;
|
||||
@@ -1,72 +0,0 @@
|
||||
import { Meta, Canvas, Props } from "@storybook/addon-docs";
|
||||
import { Accordion } from "../../index";
|
||||
|
||||
<Meta title="ds-react/accordion/intro" />
|
||||
|
||||
# Hvordan ta i bruk Accordion
|
||||
|
||||
```jsx
|
||||
<Accordion>
|
||||
<Accordion.Item>
|
||||
<Accordion.Header>Accordion header text</Accordion.Header>
|
||||
<Accordion.Content>
|
||||
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
|
||||
laboris voluptate officia pariatur.Lorem est ex anim velit occaecat nisi
|
||||
qui nostrud sit.
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
<Accordion.Item>
|
||||
<Accordion.Header>Aliquip amet irure consectetur occaecat</Accordion.Header>
|
||||
<Accordion.Content>
|
||||
Cupidatat aliqua eu ea et anim excepteur. Labore aliquip dolore laborum
|
||||
consequat. Reprehenderit ad velit quis eiusmod ex sint aliquip do deserunt
|
||||
amet exercitation velit Lorem.
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<Accordion>
|
||||
<Accordion.Item>
|
||||
<Accordion.Header>Accordion header text</Accordion.Header>
|
||||
<Accordion.Content>
|
||||
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
|
||||
officia laboris voluptate officia pariatur.Lorem est ex anim velit
|
||||
occaecat nisi qui nostrud sit.
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
<Accordion.Item>
|
||||
<Accordion.Header>
|
||||
Aliquip amet irure consectetur occaecat
|
||||
</Accordion.Header>
|
||||
<Accordion.Content>
|
||||
Cupidatat aliqua eu ea et anim excepteur. Labore aliquip dolore laborum
|
||||
consequat. Reprehenderit ad velit quis eiusmod ex sint aliquip do
|
||||
deserunt amet exercitation velit Lorem.
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
</Canvas>
|
||||
|
||||
## Controlled state
|
||||
|
||||
Accordion-komponeten styrer selv open-state, men om man ønsker kan man selv overskrive denne med
|
||||
`open`-prop + `onClick`-prop slik det er gjort på eksemplet.
|
||||
|
||||
```jsx
|
||||
<Accordion>
|
||||
<Accordion.Item open={open}>
|
||||
<Accordion.Header onClick={(open) => setOpen(!open)}>
|
||||
Accordion header text
|
||||
</Accordion.Header>
|
||||
<Accordion.Content>
|
||||
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
|
||||
laboris voluptate officia pariatur.Lorem est ex anim velit
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
```
|
||||
|
||||
`renderContentWhenClosed`-prop på `Accordion.Item` bestemmer om innholdet (children) skal beholdes i dom-strukturen mens
|
||||
Accordion er lukket. Defaulter til `false`.
|
||||
@@ -1,92 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import AccordionContent from "../AccordionContent";
|
||||
import AccordionHeader from "../AccordionHeader";
|
||||
import AccordionItem from "../AccordionItem";
|
||||
import { Accordion } from "../index";
|
||||
|
||||
export default {
|
||||
title: "ds-react/accordion",
|
||||
component: Accordion,
|
||||
subcomponents: {
|
||||
AccordionItem,
|
||||
AccordionContent,
|
||||
AccordionHeader,
|
||||
},
|
||||
};
|
||||
|
||||
export const All = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<h1>Accordion</h1>
|
||||
<h2>Controlled</h2>
|
||||
<Accordion>
|
||||
<Accordion.Item open={open}>
|
||||
<Accordion.Header onClick={() => setOpen(!open)}>
|
||||
Accordion header text
|
||||
</Accordion.Header>
|
||||
<Accordion.Content>
|
||||
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
|
||||
officia laboris voluptate officia pariatur.Lorem est ex anim velit
|
||||
occaecat nisi qui nostrud sit consectetur consectetur officia
|
||||
nostrud ullamco. Est ex duis proident nostrud elit qui laborum
|
||||
anim minim eu eiusmod. Veniam in nostrud sunt tempor velit
|
||||
incididunt sint ex dolor qui velit id eu. Deserunt magna sunt
|
||||
velit in. Est exercitation id cillum qui do. Minim adipisicing
|
||||
nostrud commodo proident occaecat aliquip nulla anim proident
|
||||
reprehenderit. Magna ipsum officia veniam cupidatat duis veniam
|
||||
dolore reprehenderit mollit velit.Ut consequat commodo minim
|
||||
occaecat id pariatur. Nisi enim tempor laborum commodo. Tempor sit
|
||||
quis nostrud eu cupidatat sunt commodo reprehenderit irure
|
||||
deserunt eiusmod ipsum. Exercitation quis commodo cillum eiusmod
|
||||
eiusmod. Do laborum qui proident commodo adipisicing eiusmod id.
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
<h2>Un-controlled</h2>
|
||||
<Accordion>
|
||||
<Accordion.Item>
|
||||
<Accordion.Header>Accordion header text</Accordion.Header>
|
||||
<Accordion.Content>
|
||||
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
|
||||
officia laboris voluptate officia pariatur.Lorem est ex anim velit
|
||||
occaecat nisi qui nostrud sit consectetur consectetur officia
|
||||
nostrud ullamco. Est ex duis proident nostrud elit qui laborum
|
||||
anim minim eu eiusmod. Veniam in nostrud sunt tempor velit
|
||||
incididunt sint ex dolor qui velit id eu. Deserunt magna sunt
|
||||
velit in. Est exercitation id cillum qui do. Minim adipisicing
|
||||
nostrud commodo proident occaecat aliquip nulla anim proident
|
||||
reprehenderit. Magna ipsum officia veniam cupidatat duis veniam
|
||||
dolore reprehenderit mollit velit.Ut consequat commodo minim
|
||||
occaecat id pariatur. Nisi enim tempor laborum commodo. Tempor sit
|
||||
quis nostrud eu cupidatat sunt commodo reprehenderit irure
|
||||
deserunt eiusmod ipsum. Exercitation quis commodo cillum eiusmod
|
||||
eiusmod. Do laborum qui proident commodo adipisicing eiusmod id.
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
<Accordion.Item>
|
||||
<Accordion.Header>Accordion header text</Accordion.Header>
|
||||
<Accordion.Content>
|
||||
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
|
||||
officia laboris voluptate officia pariatur.Lorem est ex anim velit
|
||||
occaecat nisi qui nostrud sit consectetur consectetur officia
|
||||
nostrud ullamco. Est ex duis proident nostrud elit qui laborum
|
||||
anim minim eu eiusmod. Veniam in nostrud sunt tempor velit
|
||||
incididunt sint ex dolor qui velit id eu. Deserunt magna sunt
|
||||
velit in. Est exercitation id cillum qui do. Minim adipisicing
|
||||
nostrud commodo proident occaecat aliquip nulla anim proident
|
||||
reprehenderit. Magna ipsum officia veniam cupidatat duis veniam
|
||||
dolore reprehenderit mollit velit.Ut consequat commodo minim
|
||||
occaecat id pariatur. Nisi enim tempor laborum commodo. Tempor sit
|
||||
quis nostrud eu cupidatat sunt commodo reprehenderit irure
|
||||
deserunt eiusmod ipsum. Exercitation quis commodo cillum eiusmod
|
||||
eiusmod. Do laborum qui proident commodo adipisicing eiusmod id.
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -1,91 +0,0 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import cl from "classnames";
|
||||
import {
|
||||
ErrorFilled,
|
||||
WarningFilled,
|
||||
InformationFilled,
|
||||
SuccessFilled,
|
||||
} from "@navikt/ds-icons";
|
||||
import { BodyLong } from "..";
|
||||
|
||||
export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
/**
|
||||
* Alert content
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* Decides what design the alert will have
|
||||
*/
|
||||
variant: "error" | "warning" | "info" | "success";
|
||||
/**
|
||||
* Changes padding and font-sizes
|
||||
* @default "medium"
|
||||
*/
|
||||
size?: "medium" | "small";
|
||||
/**
|
||||
* Toggles full-width Alert
|
||||
* @default false
|
||||
*/
|
||||
fullWidth?: boolean;
|
||||
/**
|
||||
* Removes background from Alert
|
||||
*/
|
||||
inline?: boolean;
|
||||
}
|
||||
|
||||
const Icon = ({ variant, ...props }) => {
|
||||
switch (variant) {
|
||||
case "error":
|
||||
return <ErrorFilled {...props} />;
|
||||
case "warning":
|
||||
return <WarningFilled {...props} />;
|
||||
case "info":
|
||||
return <InformationFilled {...props} />;
|
||||
case "success":
|
||||
return <SuccessFilled {...props} />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
export interface AlertContextProps {
|
||||
size: "medium" | "small";
|
||||
}
|
||||
|
||||
const Alert = forwardRef<HTMLDivElement, AlertProps>(
|
||||
(
|
||||
{
|
||||
children,
|
||||
className,
|
||||
variant,
|
||||
size = "medium",
|
||||
fullWidth = false,
|
||||
inline = false,
|
||||
...rest
|
||||
},
|
||||
ref
|
||||
) => (
|
||||
<div
|
||||
{...rest}
|
||||
ref={ref}
|
||||
className={cl(
|
||||
className,
|
||||
"navds-alert",
|
||||
`navds-alert--${variant}`,
|
||||
`navds-alert--${size}`,
|
||||
{ "navds-alert--full-width": fullWidth, "navds-alert--inline": inline }
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
title={`${variant}-ikon`}
|
||||
variant={variant}
|
||||
className="navds-alert__icon"
|
||||
/>
|
||||
<BodyLong as="div" size={size} className="navds-alert__wrapper">
|
||||
{children}
|
||||
</BodyLong>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
|
||||
export default Alert;
|
||||
@@ -1,96 +0,0 @@
|
||||
import { Meta, Canvas } from "@storybook/addon-docs";
|
||||
import { Alert, Heading, BodyLong } from "../../index";
|
||||
|
||||
<Meta title="ds-react/alert/intro" />
|
||||
|
||||
# Hvordan ta i bruk Alert
|
||||
|
||||
```jsx
|
||||
<Alert variant="info">
|
||||
Id elit esse enim reprehenderit.Tempor tempor ex exercitation id aute
|
||||
eu.Laborum nulla nisi irure voluptate mollit fugiat.Est quis culpa nostrud et
|
||||
reprehenderit ea sint.Eu veniam labore enim labore qui eiusmod Lorem amet ad
|
||||
esse.
|
||||
</Alert>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<Alert variant="info">
|
||||
Id elit esse enim reprehenderit.Tempor tempor ex exercitation id aute
|
||||
eu.Laborum nulla nisi irure voluptate mollit fugiat.Est quis culpa nostrud
|
||||
et reprehenderit ea sint.Eu veniam labore enim labore qui eiusmod Lorem amet
|
||||
ad esse.
|
||||
</Alert>
|
||||
</Canvas>
|
||||
|
||||
## Varianter
|
||||
|
||||
`variants`-prop kan brukes for å endre utseende mellom
|
||||
`info`, `success`, `warning` og `error`.
|
||||
|
||||
<Canvas>
|
||||
<Alert variant="info">Id elit esse enim reprehenderit.</Alert>
|
||||
<Alert variant="success">Id elit esse enim reprehenderit.</Alert>
|
||||
<Alert variant="warning">Id elit esse enim reprehenderit.</Alert>
|
||||
<Alert variant="error">Id elit esse enim reprehenderit.</Alert>
|
||||
</Canvas>
|
||||
|
||||
## Sizing
|
||||
|
||||
Alert har to størrelser: Default 64px height og small 32px height default.
|
||||
|
||||
<Canvas>
|
||||
<Alert size="small" variant="info">
|
||||
Id elit esse enim reprehenderit.
|
||||
</Alert>
|
||||
<Alert size="small" variant="success">
|
||||
Id elit esse enim reprehenderit.
|
||||
</Alert>
|
||||
<Alert size="small" variant="warning">
|
||||
Id elit esse enim reprehenderit.
|
||||
</Alert>
|
||||
<Alert size="small" variant="error">
|
||||
Id elit esse enim reprehenderit.
|
||||
</Alert>
|
||||
</Canvas>
|
||||
|
||||
## fullWidth
|
||||
|
||||
<Canvas>
|
||||
<div style={{ margin: 32, display: "grid", gap: 16 }}>
|
||||
<Alert fullWidth variant="info">
|
||||
Id elit esse enim reprehenderit.
|
||||
</Alert>
|
||||
<Alert fullWidth size="small" variant="info">
|
||||
Id elit esse enim reprehenderit.
|
||||
</Alert>
|
||||
</div>
|
||||
</Canvas>
|
||||
|
||||
## Med heading
|
||||
|
||||
```jsx
|
||||
<Alert variant="info">
|
||||
<Heading spacing size="small" level="2">
|
||||
Aliquip duis est in commodo pariatur
|
||||
</Heading>
|
||||
<BodyLong>
|
||||
Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui laboris
|
||||
ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat sint commodo
|
||||
consequat eu aute.
|
||||
</BodyLong>
|
||||
</Alert>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<Alert variant="info">
|
||||
<Heading spacing size="small" level="3">
|
||||
Aliquip duis est in commodo pariatur
|
||||
</Heading>
|
||||
<BodyLong>
|
||||
Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui laboris
|
||||
ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat sint commodo
|
||||
consequat eu aute.
|
||||
</BodyLong>
|
||||
</Alert>
|
||||
</Canvas>
|
||||
@@ -1,124 +0,0 @@
|
||||
import React from "react";
|
||||
import { Alert } from "..";
|
||||
import { BodyLong, Heading } from "../..";
|
||||
|
||||
export default {
|
||||
title: "ds-react/alert",
|
||||
component: Alert,
|
||||
};
|
||||
|
||||
const variants: Array<"error" | "warning" | "info" | "success"> = [
|
||||
"error",
|
||||
"warning",
|
||||
"info",
|
||||
"success",
|
||||
];
|
||||
|
||||
export const All = () => {
|
||||
return (
|
||||
<>
|
||||
<h1>Alert</h1>
|
||||
{variants.map((variant, i) => (
|
||||
<Alert key={variant} variant={variant}>
|
||||
{new Array(i + 1).fill(
|
||||
"Id elit esse enim reprehenderit enim nisi veniam nostrud."
|
||||
)}
|
||||
</Alert>
|
||||
))}
|
||||
<h2>Small</h2>
|
||||
<div>
|
||||
{variants.map((variant, i) => (
|
||||
<Alert key={variant} variant={variant} size="small">
|
||||
{new Array(i + 1).fill(
|
||||
"Id elit esse enim reprehenderit enim nisi veniam nostrud."
|
||||
)}
|
||||
</Alert>
|
||||
))}
|
||||
</div>
|
||||
<h2>Alert fullWidth</h2>
|
||||
{variants.map((variant, i) => (
|
||||
<Alert fullWidth key={variant} variant={variant}>
|
||||
{new Array(i + 1).fill(
|
||||
"Id elit esse enim reprehenderit enim nisi veniam nostrud."
|
||||
)}
|
||||
</Alert>
|
||||
))}
|
||||
<h2>Small</h2>
|
||||
<div>
|
||||
{variants.map((variant, i) => (
|
||||
<Alert fullWidth key={variant} variant={variant} size="small">
|
||||
{new Array(i + 1).fill(
|
||||
"Id elit esse enim reprehenderit enim nisi veniam nostrud."
|
||||
)}
|
||||
</Alert>
|
||||
))}
|
||||
</div>
|
||||
<h2>Inline</h2>
|
||||
<div>
|
||||
{variants.map((variant, i) => (
|
||||
<Alert inline key={variant} variant={variant}>
|
||||
{new Array(i + 1).fill(
|
||||
"Id elit esse enim reprehenderit enim nisi veniam nostrud."
|
||||
)}
|
||||
</Alert>
|
||||
))}
|
||||
</div>
|
||||
<h2>Inline small</h2>
|
||||
<div>
|
||||
{variants.map((variant, i) => (
|
||||
<Alert inline key={variant} variant={variant} size="small">
|
||||
{new Array(i + 1).fill(
|
||||
"Id elit esse enim reprehenderit enim nisi veniam nostrud."
|
||||
)}
|
||||
</Alert>
|
||||
))}
|
||||
</div>
|
||||
<h2>Med Heading</h2>
|
||||
<div>
|
||||
{variants.map((variant, i) => (
|
||||
<Alert key={variant} variant={variant}>
|
||||
<Heading spacing size="small" level="3">
|
||||
Aliquip duis est in commodo pariatur
|
||||
</Heading>
|
||||
<BodyLong spacing>
|
||||
Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
|
||||
laboris ex. Labore ex occaecat proident qui qui fugiat magna.
|
||||
Fugiat sint commodo consequat eu aute.
|
||||
</BodyLong>
|
||||
<Heading level="4" size="xsmall" spacing>
|
||||
Ullamco eiusmod Lorem eiusmod eu.
|
||||
</Heading>
|
||||
<BodyLong>
|
||||
Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
|
||||
laboris ex. Labore ex occaecat proident qui qui fugiat magna.
|
||||
Fugiat sint commodo consequat eu aute.
|
||||
</BodyLong>
|
||||
</Alert>
|
||||
))}
|
||||
</div>
|
||||
<h2>Med Heading small</h2>
|
||||
<div>
|
||||
{variants.map((variant, i) => (
|
||||
<Alert key={variant} variant={variant} size="small">
|
||||
<Heading spacing size="small" level="3">
|
||||
Aliquip duis est in commodo pariatur
|
||||
</Heading>
|
||||
<BodyLong spacing>
|
||||
Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
|
||||
laboris ex. Labore ex occaecat proident qui qui fugiat magna.
|
||||
Fugiat sint commodo consequat eu aute.
|
||||
</BodyLong>
|
||||
<Heading level="4" size="xsmall" spacing>
|
||||
Ullamco eiusmod Lorem eiusmod eu.
|
||||
</Heading>
|
||||
<BodyLong>
|
||||
Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
|
||||
laboris ex. Labore ex occaecat proident qui qui fugiat magna.
|
||||
Fugiat sint commodo consequat eu aute.
|
||||
</BodyLong>
|
||||
</Alert>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -1,70 +0,0 @@
|
||||
import { Meta, Canvas } from "@storybook/addon-docs";
|
||||
import { Button, Loader } from "../../index";
|
||||
import { Success } from "@navikt/ds-icons";
|
||||
|
||||
<Meta title="ds-react/button/intro" />
|
||||
|
||||
# Hvordan ta i bruk Button
|
||||
|
||||
```jsx
|
||||
<Button>Button</Button>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<Button>Button</Button>
|
||||
</Canvas>
|
||||
|
||||
## Varianter
|
||||
|
||||
`variants`-prop kan brukes for å endre utseende mellom
|
||||
`primary`, `secondary`, `tertiary` og `danger`
|
||||
|
||||
<Canvas>
|
||||
<Button variant="primary">Primary</Button>
|
||||
<Button variant="secondary">Secondary</Button>
|
||||
<Button variant="tertiary">Tertiary</Button>
|
||||
<Button variant="danger">Danger</Button>
|
||||
</Canvas>
|
||||
|
||||
## Sizing
|
||||
|
||||
Button har to størrelser: Default 48px min-height og small 32px min-height
|
||||
|
||||
<Canvas>
|
||||
<Button size="small" variant="primary">
|
||||
Primary
|
||||
</Button>
|
||||
<Button size="small" variant="secondary">
|
||||
Secondary
|
||||
</Button>
|
||||
<Button size="small" variant="tertiary">
|
||||
Tertiary
|
||||
</Button>
|
||||
<Button size="small" variant="danger">
|
||||
Danger
|
||||
</Button>
|
||||
</Canvas>
|
||||
|
||||
## Med ikon eller `<Loader />`
|
||||
|
||||
Hvis man setter ikoner (svg) eller `<Loader />` rett på button vil størrelsen
|
||||
bli justert automatisk og sentrert.
|
||||
|
||||
<Canvas>
|
||||
<Button>
|
||||
<Loader /> Laster... <Loader />
|
||||
</Button>
|
||||
<Button size="small">
|
||||
<Loader />
|
||||
Laster...
|
||||
<Loader />
|
||||
</Button>
|
||||
<Button>
|
||||
<Success /> Laster... <Success />
|
||||
</Button>
|
||||
<Button size="small">
|
||||
<Success />
|
||||
Laster...
|
||||
<Success />
|
||||
</Button>
|
||||
</Canvas>
|
||||
@@ -1,32 +0,0 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import cl from "classnames";
|
||||
import { OverridableComponent } from "..";
|
||||
|
||||
export interface MicroCardProps
|
||||
extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
|
||||
/**
|
||||
* Link text
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const MicroCard: OverridableComponent<
|
||||
MicroCardProps,
|
||||
HTMLAnchorElement
|
||||
> = forwardRef(({ className, as: Component = "a", children, ...rest }, ref) => (
|
||||
<Component
|
||||
ref={ref}
|
||||
className={cl(
|
||||
"navds-card__micro",
|
||||
"navds-detail",
|
||||
"navds-detail--small",
|
||||
className
|
||||
)}
|
||||
title={children}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</Component>
|
||||
));
|
||||
|
||||
export default MicroCard;
|
||||
@@ -1,90 +0,0 @@
|
||||
import React from "react";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import faker from "faker";
|
||||
import { Checkbox, CheckboxGroup } from ".";
|
||||
|
||||
const firstArgumentOfFirstCall = (fn: jest.Mock) => fn.mock.calls[0][0];
|
||||
|
||||
test("checkbox group chains onChange calls", () => {
|
||||
const onGroupChange = jest.fn();
|
||||
const onChange = jest.fn();
|
||||
const value = faker.datatype.string();
|
||||
const label = faker.datatype.string();
|
||||
|
||||
render(
|
||||
<CheckboxGroup legend="legend" onChange={onGroupChange}>
|
||||
<Checkbox onChange={onChange} value={value}>
|
||||
{label}
|
||||
</Checkbox>
|
||||
</CheckboxGroup>
|
||||
);
|
||||
|
||||
userEvent.click(screen.getByLabelText(label));
|
||||
|
||||
expect(onGroupChange).toBeCalledTimes(1);
|
||||
expect(onGroupChange).toBeCalledWith([value]);
|
||||
expect(onChange).toBeCalledTimes(1);
|
||||
expect(firstArgumentOfFirstCall(onChange).target.checked).toBe(true);
|
||||
});
|
||||
|
||||
describe("Checkbox handles controlled-state correctly", () => {
|
||||
const CheckboxComponent = ({ onChange = () => null, value }) => (
|
||||
<CheckboxGroup legend="legend" onChange={onChange} value={value}>
|
||||
<Checkbox value={"value1"}>label1</Checkbox>
|
||||
<Checkbox value={"value2"}>label2</Checkbox>
|
||||
</CheckboxGroup>
|
||||
);
|
||||
|
||||
test("Checkbox is still checked after click when controlled", () => {
|
||||
render(<CheckboxComponent value={["value1", "value2"]} />);
|
||||
userEvent.click(screen.getByLabelText("label1"));
|
||||
userEvent.click(screen.getByLabelText("label2"));
|
||||
|
||||
expect((screen.getByLabelText("label1") as HTMLInputElement).checked).toBe(
|
||||
true
|
||||
);
|
||||
expect((screen.getByLabelText("label2") as HTMLInputElement).checked).toBe(
|
||||
true
|
||||
);
|
||||
});
|
||||
|
||||
test("onChange called with expected values", () => {
|
||||
const onGroupChange = jest.fn();
|
||||
|
||||
render(
|
||||
<CheckboxComponent
|
||||
onChange={onGroupChange}
|
||||
value={["value1", "value2"]}
|
||||
/>
|
||||
);
|
||||
|
||||
userEvent.click(screen.getByLabelText("label1"));
|
||||
|
||||
expect(onGroupChange).lastCalledWith(["value2"]);
|
||||
|
||||
userEvent.click(screen.getByLabelText("label2"));
|
||||
|
||||
expect(onGroupChange).lastCalledWith(["value1"]);
|
||||
});
|
||||
|
||||
test("Checkboxes updates after value-prop change", () => {
|
||||
const { rerender } = render(<CheckboxComponent value={[]} />);
|
||||
|
||||
expect((screen.getByLabelText("label1") as HTMLInputElement).checked).toBe(
|
||||
false
|
||||
);
|
||||
expect((screen.getByLabelText("label2") as HTMLInputElement).checked).toBe(
|
||||
false
|
||||
);
|
||||
|
||||
rerender(<CheckboxComponent value={["value1", "value2"]} />);
|
||||
|
||||
expect((screen.getByLabelText("label1") as HTMLInputElement).checked).toBe(
|
||||
true
|
||||
);
|
||||
expect((screen.getByLabelText("label2") as HTMLInputElement).checked).toBe(
|
||||
true
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -1,32 +0,0 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import cl from "classnames";
|
||||
import { OverridableComponent } from "../..";
|
||||
|
||||
export interface ErrorSummaryItemProps
|
||||
extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
|
||||
/**
|
||||
* Link text
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export type ErrorSummaryItemType = OverridableComponent<
|
||||
ErrorSummaryItemProps,
|
||||
HTMLAnchorElement
|
||||
>;
|
||||
|
||||
const ErrorSummaryItem: ErrorSummaryItemType = forwardRef(
|
||||
({ children, as: Component = "a", className, ...rest }, ref) => {
|
||||
return (
|
||||
<Component
|
||||
{...rest}
|
||||
ref={ref}
|
||||
className={cl(className, "navds-error-summary__item", "navds-link")}
|
||||
>
|
||||
{children}
|
||||
</Component>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default ErrorSummaryItem;
|
||||
@@ -1,2 +0,0 @@
|
||||
export { default as ErrorSummary } from "./ErrorSummary";
|
||||
export * from "./ErrorSummary";
|
||||
@@ -1,63 +0,0 @@
|
||||
import React from "react";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import faker from "faker";
|
||||
import { Radio, RadioGroup } from ".";
|
||||
|
||||
const value1 = faker.datatype.string();
|
||||
const label1 = faker.datatype.string();
|
||||
const value2 = faker.datatype.string();
|
||||
const label2 = faker.datatype.string();
|
||||
|
||||
const Group = (props) => (
|
||||
<RadioGroup {...props} legend="legend">
|
||||
<Radio value={value1}>{label1}</Radio>
|
||||
<Radio value={value2}>{label2}</Radio>
|
||||
</RadioGroup>
|
||||
);
|
||||
|
||||
describe("Controlled RadioGroup", () => {
|
||||
const originalError = console.error;
|
||||
const mockError = jest.fn();
|
||||
beforeEach(() => (console.error = mockError));
|
||||
afterEach(() => (console.error = originalError));
|
||||
|
||||
test("doesnt console.error", () => {
|
||||
const { rerender } = render(<Group value={value1} />);
|
||||
rerender(<Group value={value2} />);
|
||||
|
||||
expect(mockError).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Uncontrolled RadioGroup", () => {
|
||||
test("handles state correctly", () => {
|
||||
render(<Group />);
|
||||
|
||||
const input1 = screen.getByLabelText(label1) as HTMLInputElement;
|
||||
const input2 = screen.getByLabelText(label2) as HTMLInputElement;
|
||||
|
||||
expect(input1.checked).toBe(false);
|
||||
expect(input2.checked).toBe(false);
|
||||
|
||||
userEvent.click(screen.getByLabelText(label2));
|
||||
|
||||
expect(input1.checked).toBe(false);
|
||||
expect(input2.checked).toBe(true);
|
||||
});
|
||||
|
||||
test("handles defaultValue correctly", () => {
|
||||
render(<Group defaultValue={value1} />);
|
||||
|
||||
const input1 = screen.getByLabelText(label1) as HTMLInputElement;
|
||||
const input2 = screen.getByLabelText(label2) as HTMLInputElement;
|
||||
|
||||
expect(input1.checked).toBe(true);
|
||||
expect(input2.checked).toBe(false);
|
||||
|
||||
userEvent.click(screen.getByLabelText(label2));
|
||||
|
||||
expect(input1.checked).toBe(false);
|
||||
expect(input2.checked).toBe(true);
|
||||
});
|
||||
});
|
||||
@@ -1,49 +0,0 @@
|
||||
import React, { forwardRef, useContext } from "react";
|
||||
import cl from "classnames";
|
||||
import { SearchFieldContext } from "./SearchField";
|
||||
import { Button, ButtonProps } from "../..";
|
||||
|
||||
export interface SearchFieldClearButtonProps extends Omit<ButtonProps, "size"> {
|
||||
/**
|
||||
* Button text
|
||||
* @example <Close /> <span>Søk</span>
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* Changes design and interactions
|
||||
* @default "secondary"
|
||||
*/
|
||||
variant?: "primary" | "secondary";
|
||||
}
|
||||
|
||||
export type SearchFieldClearButtonType = React.ForwardRefExoticComponent<
|
||||
SearchFieldClearButtonProps & React.RefAttributes<HTMLButtonElement>
|
||||
>;
|
||||
|
||||
const SearchFieldClearButton: SearchFieldClearButtonType = forwardRef(
|
||||
({ className, variant = "secondary", disabled, ...rest }, ref) => {
|
||||
const searchField = useContext(SearchFieldContext);
|
||||
|
||||
if (searchField === null) {
|
||||
console.warn(
|
||||
"SearchFieldClearButton has to be wrapped in <SearchField />"
|
||||
);
|
||||
return null;
|
||||
}
|
||||
|
||||
const { size, inputProps } = searchField;
|
||||
|
||||
return (
|
||||
<Button
|
||||
{...rest}
|
||||
ref={ref}
|
||||
className={cl(className, "navds-search-field__clear-button")}
|
||||
size={size}
|
||||
variant={variant}
|
||||
disabled={disabled ?? inputProps?.disabled}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default SearchFieldClearButton;
|
||||
@@ -1,2 +0,0 @@
|
||||
export { default as SearchField, SearchFieldProps } from "./SearchField";
|
||||
export * from "./SearchField";
|
||||
@@ -1,25 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import { Close, Search } from "@navikt/ds-icons";
|
||||
import { SearchField } from "../index";
|
||||
|
||||
export const Example = ({ size = "medium" }: { size: "medium" | "small" }) => {
|
||||
const [value, setValue] = useState("");
|
||||
|
||||
return (
|
||||
<SearchField size={size} label="Skriv i søkefeltet for å vise clearbutton">
|
||||
<SearchField.Input
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
/>
|
||||
{!!value && (
|
||||
<SearchField.Clear onClick={() => setValue("")}>
|
||||
<Close />
|
||||
Tøm
|
||||
</SearchField.Clear>
|
||||
)}
|
||||
<SearchField.Button>
|
||||
<Search /> Søk
|
||||
</SearchField.Button>
|
||||
</SearchField>
|
||||
);
|
||||
};
|
||||
@@ -1,156 +0,0 @@
|
||||
import { Meta, Canvas } from "@storybook/addon-docs";
|
||||
import { SearchField } from "../index";
|
||||
|
||||
import { Example } from "./search-field-example.tsx";
|
||||
|
||||
import { Search } from "@navikt/ds-icons";
|
||||
|
||||
<Meta title="ds-react/form/search-field/intro" />
|
||||
|
||||
# Hvordan ta i bruk SearchField
|
||||
|
||||
## Viktig
|
||||
|
||||
Komponenten er ikke testet eller gått gjennom et design-review, så anbefalses og vente med å ta den i bruk.
|
||||
|
||||
## Bruk
|
||||
|
||||
```jsx
|
||||
<SearchField label="Mollit eiusmod" description="Ea cupidatat eu sunt commodo">
|
||||
<SearchField.Input />
|
||||
<SearchField.Button>
|
||||
<Search /> Søk
|
||||
</SearchField.Button>
|
||||
</SearchField>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<SearchField
|
||||
label="Mollit eiusmod"
|
||||
description="Ea cupidatat eu sunt commodo"
|
||||
>
|
||||
<SearchField.Input />
|
||||
<SearchField.Button>
|
||||
<Search /> Søk
|
||||
</SearchField.Button>
|
||||
</SearchField>
|
||||
</Canvas>
|
||||
|
||||
## hideLabel
|
||||
|
||||
`hideLabel` proppen kan brukes for å vise label + description for bare skjermlesere.
|
||||
Vi har satt `label` som required siden man vil bruke den i sammenheng med denne proppen for bedre UU.
|
||||
|
||||
```jsx
|
||||
<SearchField
|
||||
label="Mollit eiusmod"
|
||||
description="Ea cupidatat eu sunt commodo"
|
||||
hideLabel
|
||||
>
|
||||
<SearchField.Input />
|
||||
<SearchField.Button>
|
||||
<Search /> Søk
|
||||
</SearchField.Button>
|
||||
</SearchField>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<SearchField
|
||||
label="Mollit eiusmod"
|
||||
description="Ea cupidatat eu sunt commodo"
|
||||
hideLabel
|
||||
>
|
||||
<SearchField.Input />
|
||||
<SearchField.Button>
|
||||
<Search /> Søk
|
||||
</SearchField.Button>
|
||||
</SearchField>
|
||||
</Canvas>
|
||||
|
||||
## Sizing
|
||||
|
||||
```jsx
|
||||
<SearchField
|
||||
label="Mollit eiusmod"
|
||||
description="Ea cupidatat eu sunt commodo"
|
||||
hideLabel
|
||||
size="small"
|
||||
>
|
||||
<SearchField.Input />
|
||||
<SearchField.Button>
|
||||
<Search /> Søk
|
||||
</SearchField.Button>
|
||||
</SearchField>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<SearchField
|
||||
label="Mollit eiusmod"
|
||||
description="Ea cupidatat eu sunt commodo"
|
||||
hideLabel
|
||||
size="small"
|
||||
>
|
||||
<SearchField.Input />
|
||||
<SearchField.Button>
|
||||
<Search /> Søk
|
||||
</SearchField.Button>
|
||||
</SearchField>
|
||||
</Canvas>
|
||||
|
||||
## Errors
|
||||
|
||||
```jsx
|
||||
<SearchField
|
||||
label="Mollit eiusmod"
|
||||
description="Ea cupidatat eu sunt commodo"
|
||||
hideLabel
|
||||
error="Error message"
|
||||
>
|
||||
<SearchField.Input />
|
||||
<SearchField.Button>
|
||||
<Search /> Søk
|
||||
</SearchField.Button>
|
||||
</SearchField>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<SearchField
|
||||
label="Mollit eiusmod"
|
||||
description="Ea cupidatat eu sunt commodo"
|
||||
hideLabel
|
||||
error="Error message"
|
||||
>
|
||||
<SearchField.Input />
|
||||
<SearchField.Button>
|
||||
<Search /> Søk
|
||||
</SearchField.Button>
|
||||
</SearchField>
|
||||
</Canvas>
|
||||
|
||||
## ClearButton
|
||||
|
||||
Man kan bruke `SearchField.Clear` for å håndtere clearing av value i `<input />`. For å bruke denne
|
||||
kreves det da at `SearchField.Input` er controlled slik at man styrer state selv slik som eksemplet under.
|
||||
Hvis man bare ønsker at den bare skal vises når bruker har begynt å skrive, anbefaler vi bare å rendre
|
||||
den når inputvalue ikke er empty.
|
||||
|
||||
```jsx
|
||||
<SearchField label="Mollit eiusmod" description="Ea cupidatat eu sunt commodo">
|
||||
<SearchField.Input value={value} onChange={(e) => setValue(e.target.value)} />
|
||||
{!!value && (
|
||||
<SearchField.Clear onClick={() => setValue("")}>
|
||||
<Close /> Tøm
|
||||
</SearchField.Clear>
|
||||
)}
|
||||
<SearchField.Button>
|
||||
<Search /> Søk
|
||||
</SearchField.Button>
|
||||
</SearchField>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<div>
|
||||
<Example />
|
||||
<Example size="small" />
|
||||
</div>
|
||||
</Canvas>
|
||||
@@ -1,175 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import { Meta } from "@storybook/react/types-6-0";
|
||||
import { Close, Search } from "@navikt/ds-icons";
|
||||
import { SearchField } from "../index";
|
||||
import { Fieldset } from "../..";
|
||||
export default {
|
||||
title: "ds-react/form/search-field",
|
||||
component: SearchField,
|
||||
} as Meta;
|
||||
|
||||
export const All = () => {
|
||||
const [show, setShow] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<h1>SearchField</h1>
|
||||
<SearchField
|
||||
label="Mollit eiusmod"
|
||||
description="Ea cupidatat eu sunt commodo"
|
||||
>
|
||||
<SearchField.Input />
|
||||
<SearchField.Button>
|
||||
<Search /> Søk
|
||||
</SearchField.Button>
|
||||
</SearchField>
|
||||
<SearchField
|
||||
label="Mollit eiusmod"
|
||||
description="Ea cupidatat eu sunt commodo"
|
||||
>
|
||||
<SearchField.Button>
|
||||
<Search /> Søk
|
||||
</SearchField.Button>
|
||||
<SearchField.Input />
|
||||
</SearchField>
|
||||
|
||||
<h1>SearchField w clearsearch</h1>
|
||||
<SearchField
|
||||
label="Mollit eiusmod"
|
||||
description="Ea cupidatat eu sunt commodo"
|
||||
>
|
||||
<SearchField.Input />
|
||||
<SearchField.Clear>
|
||||
<Close />
|
||||
</SearchField.Clear>
|
||||
<SearchField.Button onClick={() => setShow(!show)}>
|
||||
<Search /> Søk
|
||||
</SearchField.Button>
|
||||
</SearchField>
|
||||
<SearchField
|
||||
label="Mollit eiusmod"
|
||||
description="Ea cupidatat eu sunt commodo"
|
||||
>
|
||||
<SearchField.Button>
|
||||
<Search /> Søk
|
||||
</SearchField.Button>
|
||||
<SearchField.Clear>
|
||||
<Close /> Tøm
|
||||
</SearchField.Clear>
|
||||
<SearchField.Input />
|
||||
</SearchField>
|
||||
|
||||
<h2>Hidelabel</h2>
|
||||
<SearchField
|
||||
label="Mollit eiusmod"
|
||||
description="Ea cupidatat eu sunt commodo"
|
||||
hideLabel
|
||||
>
|
||||
<SearchField.Button>
|
||||
<Search /> Søk
|
||||
</SearchField.Button>
|
||||
<SearchField.Input />
|
||||
</SearchField>
|
||||
|
||||
<h2>SearchField small</h2>
|
||||
<SearchField
|
||||
label="Mollit eiusmod"
|
||||
description="Ea cupidatat eu sunt commodo"
|
||||
size="small"
|
||||
>
|
||||
<SearchField.Button>
|
||||
<Search />
|
||||
<span className="sr-only">Søk</span>
|
||||
</SearchField.Button>
|
||||
<SearchField.Input />
|
||||
</SearchField>
|
||||
|
||||
<SearchField
|
||||
label="Mollit eiusmod"
|
||||
description="Ea cupidatat eu sunt commodo"
|
||||
size="small"
|
||||
>
|
||||
<SearchField.Input />
|
||||
<SearchField.Button>
|
||||
<Search />
|
||||
<span className="sr-only">Søk</span>
|
||||
</SearchField.Button>
|
||||
</SearchField>
|
||||
<SearchField
|
||||
label="Mollit eiusmod"
|
||||
description="Ea cupidatat eu sunt commodo"
|
||||
size="small"
|
||||
>
|
||||
<SearchField.Button>
|
||||
<Search />
|
||||
<span className="sr-only">Søk</span>
|
||||
</SearchField.Button>
|
||||
<SearchField.Clear>
|
||||
<Close /> Tøm
|
||||
</SearchField.Clear>
|
||||
<SearchField.Input />
|
||||
</SearchField>
|
||||
|
||||
<SearchField
|
||||
label="Mollit eiusmod"
|
||||
description="Ea cupidatat eu sunt commodo"
|
||||
size="small"
|
||||
>
|
||||
<SearchField.Input />
|
||||
<SearchField.Clear>
|
||||
<Close /> Tøm
|
||||
</SearchField.Clear>
|
||||
<SearchField.Button>
|
||||
<Search />
|
||||
<span className="sr-only">Søk</span>
|
||||
</SearchField.Button>
|
||||
</SearchField>
|
||||
|
||||
<h2>SearchField w error</h2>
|
||||
<SearchField
|
||||
label="Mollit eiusmod"
|
||||
description="Ea cupidatat eu sunt commodo"
|
||||
error="Errormsg"
|
||||
>
|
||||
<SearchField.Input />
|
||||
<SearchField.Button>
|
||||
<Search /> Søk
|
||||
</SearchField.Button>
|
||||
</SearchField>
|
||||
<SearchField
|
||||
label="Mollit eiusmod"
|
||||
description="Ea cupidatat eu sunt commodo"
|
||||
error="Errormsg"
|
||||
>
|
||||
<SearchField.Button>
|
||||
<Search /> Søk
|
||||
</SearchField.Button>
|
||||
<SearchField.Input />
|
||||
</SearchField>
|
||||
|
||||
<h2>SearchField in Fieldset</h2>
|
||||
<Fieldset legend="Filter" error="Fieldset-error-msg">
|
||||
<SearchField
|
||||
label="Mollit eiusmod"
|
||||
description="Ea cupidatat eu sunt commodo"
|
||||
error="Errormsg"
|
||||
hideLabel
|
||||
>
|
||||
<SearchField.Input />
|
||||
<SearchField.Button>
|
||||
<Search /> Søk
|
||||
</SearchField.Button>
|
||||
</SearchField>
|
||||
<SearchField
|
||||
label="Mollit eiusmod"
|
||||
description="Ea cupidatat eu sunt commodo"
|
||||
hideLabel
|
||||
>
|
||||
<SearchField.Button>
|
||||
<Search /> Søk
|
||||
</SearchField.Button>
|
||||
<SearchField.Input />
|
||||
</SearchField>
|
||||
</Fieldset>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -1,34 +0,0 @@
|
||||
import React, { forwardRef, HTMLAttributes } from "react";
|
||||
import cl from "classnames";
|
||||
import { DefaultIllustration } from "./Illustration";
|
||||
export interface GuideProps
|
||||
extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
|
||||
/**
|
||||
* Custom svg/img element
|
||||
*/
|
||||
illustration?: React.ReactNode;
|
||||
/**
|
||||
* Predefined size properties for illustration
|
||||
* @default "medium"
|
||||
*/
|
||||
size?: "small" | "medium";
|
||||
}
|
||||
|
||||
const Guide = forwardRef<HTMLDivElement, GuideProps>(
|
||||
({ className, illustration, size = "medium", color, ...rest }, ref) => {
|
||||
return (
|
||||
<div ref={ref} className={cl("navds-guide", className)} {...rest}>
|
||||
<div
|
||||
className={cl(
|
||||
"navds-guide__illustration",
|
||||
`navds-guide__illustration--${size}`
|
||||
)}
|
||||
>
|
||||
{illustration ?? <DefaultIllustration />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default Guide;
|
||||
@@ -1,39 +0,0 @@
|
||||
import React, { forwardRef, HTMLAttributes } from "react";
|
||||
import Guide from "./Guide";
|
||||
import cl from "classnames";
|
||||
|
||||
export interface GuidePanelProps extends HTMLAttributes<HTMLDivElement> {
|
||||
/**
|
||||
* GuidePanel content
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* Custom svg/img element
|
||||
*/
|
||||
illustration?: React.ReactNode;
|
||||
/**
|
||||
* Poster positions guide-illustation above content
|
||||
* @default false, renders illustation left of content
|
||||
*/
|
||||
poster?: boolean;
|
||||
}
|
||||
|
||||
const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
|
||||
(
|
||||
{ children, className, illustration, poster = false, color, ...rest },
|
||||
ref
|
||||
) => (
|
||||
<div
|
||||
{...rest}
|
||||
ref={ref}
|
||||
className={cl("navds-guide-panel", className, {
|
||||
"navds-guide-panel--poster": poster,
|
||||
})}
|
||||
>
|
||||
<Guide size={poster ? "medium" : "small"} illustration={illustration} />
|
||||
<div className="navds-guide-panel__content">{children}</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
|
||||
export default GuidePanel;
|
||||
@@ -1,99 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
export const DefaultIllustration = () => (
|
||||
<svg
|
||||
width="42"
|
||||
height="64"
|
||||
viewBox="0 0 42 64"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-label="NAV veileder illustrasjon"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M32.8313 30.4421C31.7718 33.868 29.6975 36.7117 27.0391 38.452L27.1752 39.9777L27.1745 40.0397L25.7375 52.6154H16.6236L16.5857 52.3512L14.8238 40.0181L14.8891 38.4756C12.2173 36.7398 10.1312 33.8914 9.06565 30.4564C9.02952 30.4598 8.99291 30.4616 8.95588 30.4616C8.26662 30.4616 7.72058 29.8614 7.72058 29.1343V25.0202C7.72058 24.5328 7.96592 24.1022 8.33526 23.8712C8.9115 16.1905 14.3251 10.1539 20.946 10.1539C27.5491 10.1539 32.9517 16.1579 33.5525 23.8089C33.9838 24.0179 34.2794 24.4845 34.2794 25.0202V29.1343C34.2794 29.8618 33.7341 30.4616 33.0441 30.4616C32.9714 30.4616 32.9003 30.4549 32.8313 30.4421Z"
|
||||
fill="#F1F1F1"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M26.7182 38.8777C26.6663 41.624 24.1261 44.4415 21 44.4415C17.8604 44.4415 15.3116 41.5994 15.2813 38.8419C13.6546 39.2527 11.1714 40.4917 9.12177 42.5623C7.13699 44.5674 5.55884 47.5814 5.55884 49.9194V64H36.4412V49.9194C36.4412 47.5766 34.829 44.5575 32.8075 42.5501C30.7861 40.5427 28.3553 39.3204 26.7182 38.8777Z"
|
||||
fill="#0056B4"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M15.1786 38.9372C13.6802 39.4793 11.1664 40.6641 9.2647 42.4632C3.70588 41.2308 1.23529 38.3022 1.23529 38.3022C1.23529 38.3022 6.35673 33.325 6.35982 24.6197V24.6105C6.35982 14.4173 11.8831 7.38464 20.9827 7.38464C30.0836 7.38464 35.6068 14.4173 35.6068 24.6105H35.6396C35.6396 33.3219 40.7647 38.3022 40.7647 38.3022C40.7647 38.3022 38.2941 41.2308 32.7353 42.4616L32.7269 42.4632C30.8901 40.7984 28.2262 39.5144 26.7769 38.9715L26.7785 38.971L26.7209 38.3257L26.7521 38.2722C29.4867 36.5294 31.6086 33.5933 32.6316 30.0454C32.7569 30.1148 32.8983 30.1539 33.048 30.1539C33.5601 30.1539 33.9746 29.6984 33.9746 29.1343V25.0202C33.9746 24.5375 33.6712 24.134 33.2628 24.0275C33.2624 24.0219 33.262 24.0164 33.2616 24.0108C20.3323 25.4483 15.6749 16.616 15.2926 16.6154C15.2926 16.6154 10.9987 19.6923 8.94657 23.3506C8.94657 23.3506 8.6338 24.0412 8.63228 24.0644C8.28095 24.2092 8.03035 24.5821 8.03035 25.0202V29.1343C8.03035 29.6984 8.44586 30.1539 8.95693 30.1539C9.07019 30.1539 9.17868 30.1316 9.27895 30.0908C10.3132 33.6404 12.4486 36.5733 15.1961 38.3046L15.2063 38.3257L15.1804 38.9372H15.1786Z"
|
||||
fill="#D05C4A"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M16.584 26.9976C15.7859 27.062 15.5625 25.8029 15.803 24.9807C15.8482 24.8249 16.1124 24.1154 16.5802 24.1154C17.0473 24.1154 17.2536 24.5032 17.2823 24.5699C17.6259 25.3715 17.4571 26.9268 16.584 26.9976"
|
||||
fill="#262626"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M25.8405 26.9976C26.6386 27.062 26.862 25.8029 26.6215 24.9807C26.5763 24.8249 26.3121 24.1154 25.8444 24.1154C25.3772 24.1154 25.171 24.5032 25.1423 24.5699C24.7987 25.3715 24.9674 26.9268 25.8405 26.9976"
|
||||
fill="#262626"
|
||||
/>
|
||||
<path
|
||||
d="M21.5081 28.2384C21.9854 28.157 22.3113 28.2081 22.428 28.3669C22.8687 28.9672 22.7277 29.6023 21.9718 30.1237C21.5744 30.3977 21.0273 30.4942 20.7377 30.3521C20.596 30.2826 20.4304 30.3536 20.3677 30.5106C20.3051 30.6676 20.3691 30.8512 20.5107 30.9207C20.9894 31.1555 21.7255 31.0257 22.268 30.6517C23.2953 29.9431 23.5304 28.8837 22.863 27.9743C22.5805 27.59 22.0806 27.5116 21.4228 27.6239C21.2697 27.65 21.1647 27.8088 21.1883 27.9784C21.2118 28.1481 21.355 28.2645 21.5081 28.2384Z"
|
||||
fill="#262626"
|
||||
/>
|
||||
<path
|
||||
d="M24.9595 32.3642C24.9315 32.4234 24.8672 32.5367 24.7639 32.686C24.589 32.9386 24.3694 33.1919 24.1027 33.4281C23.3079 34.1319 22.2735 34.5389 20.9568 34.5017C19.673 34.4654 18.6432 34.0647 17.8358 33.4185C17.5393 33.1813 17.2946 32.9272 17.0989 32.6739C16.9836 32.5246 16.9115 32.4114 16.88 32.3523C16.8043 32.2104 16.618 32.152 16.464 32.2218C16.31 32.2917 16.2466 32.4634 16.3224 32.6053C16.3681 32.6908 16.4569 32.8304 16.5927 33.0062C16.8156 33.2948 17.0928 33.5826 17.4283 33.8511C18.3398 34.5805 19.5046 35.0338 20.9378 35.0743C22.4302 35.1165 23.6233 34.6471 24.5333 33.8412C24.8376 33.5717 25.0877 33.2832 25.2878 32.9941C25.4095 32.8183 25.4887 32.6787 25.5291 32.5934C25.5977 32.4485 25.5259 32.2796 25.3686 32.2163C25.2113 32.153 25.0282 32.2192 24.9595 32.3642Z"
|
||||
fill="#262626"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M32.1651 58H21.8343C21.3733 58 21 57.621 21 57.153V51.5143C21 51.0462 21.3733 50.6667 21.8343 50.6667H32.1651C32.6261 50.6667 33 51.0462 33 51.5143V57.153C33 57.621 32.6261 58 32.1651 58"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M27.6207 51.8307H26.5502C26.4709 51.8307 26.407 51.7671 26.407 51.6882V51.5086C26.407 51.4303 26.4709 51.3661 26.5502 51.3661H27.6207C27.7 51.3661 27.764 51.4303 27.764 51.5086V51.6882C27.764 51.7671 27.7 51.8307 27.6207 51.8307"
|
||||
fill="#262626"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M26.7756 51.6667H27.3958V50H26.7756V51.6667Z"
|
||||
fill="#6A6A6A"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M27.1269 56.6651C25.839 56.6651 24.7947 55.6208 24.7947 54.3327C24.7947 53.0444 25.839 52 27.1269 52C28.4153 52 29.4597 53.0444 29.4597 54.3327C29.4597 55.6208 28.4153 56.6651 27.1269 56.6651Z"
|
||||
fill="#C30000"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M23.6667 55.3511L24.1434 54.1712H24.6015L24.1254 55.3511H23.6667Z"
|
||||
fill="#C30000"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M29.5496 55.3511L30.0202 54.1712H30.2699L29.7993 55.3511H29.5496Z"
|
||||
fill="#C30000"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M30.4752 55.3511L30.9457 54.1712H31.0783L30.6077 55.3511H30.4752Z"
|
||||
fill="#C30000"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M29.1165 54.1712H28.7019C28.7019 54.1712 28.6733 54.1712 28.6632 54.1964L28.4337 54.8989L28.2044 54.1964C28.1943 54.1712 28.1656 54.1712 28.1656 54.1712H27.3683C27.3511 54.1712 27.3366 54.1856 27.3366 54.2028V54.4413C27.3366 54.2521 27.1352 54.1712 27.0173 54.1712C26.7533 54.1712 26.5765 54.3451 26.5215 54.6095C26.5185 54.4341 26.5039 54.3713 26.4567 54.3069C26.435 54.2754 26.4036 54.2489 26.3695 54.2269C26.2991 54.1857 26.236 54.1712 26.1003 54.1712H25.9409C25.9409 54.1712 25.9121 54.1712 25.9019 54.1964L25.7569 54.5558V54.2028C25.7569 54.1856 25.7426 54.1712 25.7253 54.1712H25.3566C25.3566 54.1712 25.3281 54.1712 25.3178 54.1964L25.167 54.5701C25.167 54.5701 25.152 54.6074 25.1864 54.6074H25.3281V55.3194C25.3281 55.3371 25.342 55.3511 25.3598 55.3511H25.7253C25.7426 55.3511 25.7569 55.3371 25.7569 55.3194V54.6074H25.8994C25.9812 54.6074 25.9985 54.6097 26.0303 54.6245C26.0495 54.6317 26.0667 54.6464 26.0762 54.6632C26.0954 54.6995 26.1003 54.7431 26.1003 54.8716V55.3194C26.1003 55.3371 26.1145 55.3511 26.132 55.3511H26.4823C26.4823 55.3511 26.5219 55.3511 26.5376 55.312L26.6152 55.1201C26.7185 55.2647 26.8884 55.3511 27.0996 55.3511H27.1458C27.1458 55.3511 27.1856 55.3511 27.2014 55.312L27.3366 54.9771V55.3194C27.3366 55.3371 27.3511 55.3511 27.3683 55.3511H27.726C27.726 55.3511 27.7654 55.3511 27.7813 55.312C27.7813 55.312 27.9243 54.9569 27.9249 54.9542H27.9251C27.9306 54.9246 27.8933 54.9246 27.8933 54.9246H27.7656V54.3153L28.1672 55.312C28.1829 55.3511 28.2225 55.3511 28.2225 55.3511H28.645C28.645 55.3511 28.6847 55.3511 28.7004 55.312L29.1457 54.2094C29.1611 54.1712 29.1165 54.1712 29.1165 54.1712V54.1712ZM27.3366 54.9246H27.0964C27.0007 54.9246 26.9229 54.8472 26.9229 54.7515C26.9229 54.6559 27.0007 54.578 27.0964 54.578H27.1635C27.2589 54.578 27.3366 54.6559 27.3366 54.7515V54.9246Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
@@ -1,3 +0,0 @@
|
||||
export { default as GuidePanel } from "./GuidePanel";
|
||||
export * from "./GuidePanel";
|
||||
export { GuideProps } from "./Guide";
|
||||
@@ -1,13 +0,0 @@
|
||||
.sb-guidepanel__tokens--purple {
|
||||
--navds-guide-panel-color-border: var(--navds-color-purple-40);
|
||||
--navds-guide-panel-color-illustration-background: var(
|
||||
--navds-color-purple-20
|
||||
);
|
||||
}
|
||||
|
||||
.sb-guidepanel__tokens--green {
|
||||
--navds-guide-panel-color-border: var(--navds-color-green-40);
|
||||
--navds-guide-panel-color-illustration-background: var(
|
||||
--navds-color-green-20
|
||||
);
|
||||
}
|
||||
@@ -1,81 +0,0 @@
|
||||
import { Meta, Canvas } from "@storybook/addon-docs";
|
||||
import { Button, Loader, GuidePanel } from "../../index";
|
||||
import { Success } from "@navikt/ds-react";
|
||||
import "./example.css";
|
||||
|
||||
<Meta title="ds-react/guidepanel/intro" />
|
||||
|
||||
# Hvordan ta i bruk GuidePanel
|
||||
|
||||
```jsx
|
||||
<GuidePanel>
|
||||
Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
|
||||
</GuidePanel>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<GuidePanel>
|
||||
Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
|
||||
</GuidePanel>
|
||||
</Canvas>
|
||||
|
||||
## Varianter
|
||||
|
||||
`poster` endrer på plassering av illustrasjon
|
||||
|
||||
<Canvas>
|
||||
<GuidePanel>
|
||||
Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
|
||||
</GuidePanel>
|
||||
<GuidePanel poster>
|
||||
Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
|
||||
</GuidePanel>
|
||||
</Canvas>
|
||||
|
||||
## Fargebruk
|
||||
|
||||
Istedenfor fargetema/themes slik som tidligere veileder brukte velger man nå selv farge på border/illustrasjons-bakgrunn ved å
|
||||
overskrive tokens. Det anbefalses å gjøre dette med eks Styled-Components eller css-klasser, men kan inlines også
|
||||
|
||||
```css
|
||||
/* default */
|
||||
--navds-guide-panel-color-border: var(--navds-color-blue-40);
|
||||
--navds-guide-panel-color-illustration-background: var(--navds-color-blue-20);
|
||||
```
|
||||
|
||||
```jsx
|
||||
/* Css */
|
||||
<GuidePanel className="sb-guidepanel__tokens--purple">
|
||||
Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
|
||||
</GuidePanel>
|
||||
<GuidePanel className="sb-guidepanel__tokens--green">
|
||||
Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
|
||||
</GuidePanel>
|
||||
|
||||
/* Inline */
|
||||
<GuidePanel
|
||||
style={{
|
||||
["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-color-orange-20)",
|
||||
["--navds-guide-panel-color-border" as any]: "var(--navds-color-orange-40)",
|
||||
}}
|
||||
>
|
||||
Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
|
||||
</GuidePanel>
|
||||
<GuidePanel
|
||||
style={{
|
||||
["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-color-orange-20)",
|
||||
["--navds-guide-panel-color-border" as any]: "var(--navds-color-orange-40)",
|
||||
}}
|
||||
>
|
||||
Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
|
||||
</GuidePanel>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<GuidePanel className="sb-guidepanel__tokens--purple">
|
||||
Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
|
||||
</GuidePanel>
|
||||
<GuidePanel className="sb-guidepanel__tokens--green">
|
||||
Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
|
||||
</GuidePanel>
|
||||
</Canvas>
|
||||
@@ -1,68 +0,0 @@
|
||||
import React from "react";
|
||||
import { GuidePanel } from "../index";
|
||||
import { Meta } from "@storybook/react/types-6-0";
|
||||
export default {
|
||||
title: "ds-react/guidepanel",
|
||||
component: GuidePanel,
|
||||
} as Meta;
|
||||
|
||||
const panelText = `Sit sint eu dolore reprehenderit exercitation labore aute anim sit
|
||||
adipisicing proident. Tempor ipsum ea cupidatat qui esse do veniam
|
||||
cupidatat. Excepteur irure reprehenderit esse tempor nisi duis qui ea
|
||||
enim id.`;
|
||||
|
||||
export const All = () => {
|
||||
return (
|
||||
<div>
|
||||
<h1>GuidePanel</h1>
|
||||
<GuidePanel>{panelText}</GuidePanel>
|
||||
<h2>GuidePanel poster</h2>
|
||||
<GuidePanel poster>{panelText}</GuidePanel>
|
||||
<h2>custom colors</h2>
|
||||
<GuidePanel
|
||||
style={{
|
||||
["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-color-purple-20)",
|
||||
["--navds-guide-panel-color-border" as any]: "var(--navds-color-purple-40)",
|
||||
}}
|
||||
>
|
||||
{panelText}
|
||||
</GuidePanel>
|
||||
<GuidePanel
|
||||
style={{
|
||||
["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-color-green-20)",
|
||||
["--navds-guide-panel-color-border" as any]: "var(--navds-color-green-40)",
|
||||
}}
|
||||
>
|
||||
{panelText}
|
||||
</GuidePanel>
|
||||
<GuidePanel
|
||||
style={{
|
||||
["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-color-orange-20)",
|
||||
["--navds-guide-panel-color-border" as any]: "var(--navds-color-orange-40)",
|
||||
}}
|
||||
>
|
||||
{panelText}Ullamco reprehenderit fugiat reprehenderit ad nisi aliqua
|
||||
irure enim id nisi do non magna. Nisi ut incididunt dolor aliqua
|
||||
adipisicing. Cupidatat sint et qui minim sint aute anim non Lorem
|
||||
reprehenderit id et excepteur. Consectetur velit aliqua eiusmod sit. Sit
|
||||
velit minim consectetur deserunt Lorem non elit fugiat consectetur sunt
|
||||
aliqua Lorem minim. Ullamco dolor mollit laboris velit deserunt nisi
|
||||
ipsum minim dolor ad cillum in id do.
|
||||
{panelText}Ullamco reprehenderit fugiat reprehenderit ad nisi aliqua
|
||||
irure enim id nisi do non magna. Nisi ut incididunt dolor aliqua
|
||||
adipisicing. Cupidatat sint et qui minim sint aute anim non Lorem
|
||||
reprehenderit id et excepteur. Consectetur velit aliqua eiusmod sit. Sit
|
||||
velit minim consectetur deserunt Lorem non elit fugiat consectetur sunt
|
||||
aliqua Lorem minim. Ullamco dolor mollit laboris velit deserunt nisi
|
||||
ipsum minim dolor ad cillum in id do.
|
||||
{panelText}Ullamco reprehenderit fugiat reprehenderit ad nisi aliqua
|
||||
irure enim id nisi do non magna. Nisi ut incididunt dolor aliqua
|
||||
adipisicing. Cupidatat sint et qui minim sint aute anim non Lorem
|
||||
reprehenderit id et excepteur. Consectetur velit aliqua eiusmod sit. Sit
|
||||
velit minim consectetur deserunt Lorem non elit fugiat consectetur sunt
|
||||
aliqua Lorem minim. Ullamco dolor mollit laboris velit deserunt nisi
|
||||
ipsum minim dolor ad cillum in id do.
|
||||
</GuidePanel>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,75 +0,0 @@
|
||||
import { Helptext as HelpTextIcon } from "@navikt/ds-icons";
|
||||
import { Placement } from "@popperjs/core";
|
||||
import cl from "classnames";
|
||||
import React, { forwardRef, useEffect, useRef, useState } from "react";
|
||||
import mergeRefs from "react-merge-refs";
|
||||
import { Popover } from "..";
|
||||
|
||||
export interface HelpTextProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
/**
|
||||
* Component content
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* Placement of popover
|
||||
* @default "top"
|
||||
*/
|
||||
placement?: Placement;
|
||||
}
|
||||
|
||||
const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
|
||||
(
|
||||
{ className, children, placement = "top", title = "hjelp", ...rest },
|
||||
ref
|
||||
) => {
|
||||
const buttonRef = useRef<HTMLButtonElement | null>(null);
|
||||
const mergedRef = mergeRefs([buttonRef, ref]);
|
||||
const popoverRef = useRef<HTMLDivElement | null>(null);
|
||||
const wrapperRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
open && popoverRef.current?.focus();
|
||||
}, [open]);
|
||||
|
||||
const handleClick = (
|
||||
e: React.MouseEvent<HTMLButtonElement, MouseEvent>
|
||||
) => {
|
||||
setOpen((x) => !x);
|
||||
rest.onClick && rest.onClick(e);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="navds-help-text" ref={wrapperRef}>
|
||||
<button
|
||||
{...rest}
|
||||
ref={mergedRef}
|
||||
onClick={(e) => handleClick(e)}
|
||||
className={cl(className, "navds-help-text__button")}
|
||||
type="button"
|
||||
aria-expanded={open}
|
||||
aria-haspopup="dialog"
|
||||
title={title}
|
||||
>
|
||||
<HelpTextIcon className="navds-help-text__icon" />
|
||||
<span className="navds-sr-only">{title}</span>
|
||||
</button>
|
||||
<Popover
|
||||
ref={popoverRef}
|
||||
onClose={() => setOpen(false)}
|
||||
className="navds-help-text__popover"
|
||||
open={open}
|
||||
role="tooltip"
|
||||
anchorEl={buttonRef.current}
|
||||
placement={placement}
|
||||
>
|
||||
<Popover.Content>{children}</Popover.Content>
|
||||
</Popover>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default HelpText;
|
||||
@@ -1,2 +0,0 @@
|
||||
export { default as HelpText } from "./HelpText";
|
||||
export * from "./HelpText";
|
||||
@@ -1,35 +0,0 @@
|
||||
import { Meta, Canvas } from "@storybook/addon-docs";
|
||||
import { HelpText } from "../../index";
|
||||
import { Success } from "@navikt/ds-react";
|
||||
|
||||
<Meta title="ds-react/help-text/intro" />
|
||||
|
||||
# Hvordan ta i bruk HelpText
|
||||
|
||||
```jsx
|
||||
<HelpText>Exercitation esse minim esse mollit ex magna.</HelpText>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<div style={{ padding: "5rem" }}>
|
||||
<HelpText>Exercitation esse minim esse mollit ex magna.</HelpText>
|
||||
</div>
|
||||
</Canvas>
|
||||
|
||||
# Egen title
|
||||
|
||||
Husk å endre på "title" slik at skjermlesere får tydeligere informasjon
|
||||
|
||||
```jsx
|
||||
<HelpText title="vis hjelpetekst angående søknad">
|
||||
Exercitation esse minim esse mollit ex magna.
|
||||
</HelpText>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<div style={{ padding: "5rem" }}>
|
||||
<HelpText title="vis hjelpetekst angående søknad">
|
||||
Exercitation esse minim esse mollit ex magna.
|
||||
</HelpText>
|
||||
</div>
|
||||
</Canvas>
|
||||
@@ -1,32 +0,0 @@
|
||||
import React from "react";
|
||||
import { BodyLong } from "../../typography";
|
||||
import { HelpText } from "../index";
|
||||
|
||||
export default {
|
||||
title: "ds-react/help-text",
|
||||
component: HelpText,
|
||||
};
|
||||
|
||||
export const All = () => {
|
||||
return (
|
||||
<>
|
||||
<h1>HelpText</h1>
|
||||
<BodyLong style={{ display: "flex" }}>
|
||||
Quis tempor incididunt sint sit veniam ad dolore cillum ut.
|
||||
<HelpText title="show tooltip">
|
||||
Id ullamco excepteur elit fugiat labore.
|
||||
</HelpText>
|
||||
</BodyLong>
|
||||
|
||||
<BodyLong>
|
||||
Incididunt pariatur laborum dolor sint qui eiusmod exercitation non
|
||||
cupidatat amet.
|
||||
</BodyLong>
|
||||
|
||||
<h2>HelpText defaultOpen</h2>
|
||||
<HelpText title="show tooltip">
|
||||
Id ullamco excepteur elit fugiat labore.
|
||||
</HelpText>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -1,57 +0,0 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import { Panel, OverridableComponent } from "..";
|
||||
import { Next } from "@navikt/ds-icons";
|
||||
import cl from "classnames";
|
||||
import { LinkPanelTitle, LinkPanelTitleType } from "./LinkPanelTitle";
|
||||
import {
|
||||
LinkPanelDescription,
|
||||
LinkPanelDescriptionType,
|
||||
} from "./LinkPanelDescription";
|
||||
|
||||
export interface LinkPanelProps
|
||||
extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
|
||||
/**
|
||||
* Panel content
|
||||
*/
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* Toggles border on panel
|
||||
*/
|
||||
border?: boolean;
|
||||
}
|
||||
|
||||
interface LinkPanelComponentType
|
||||
extends OverridableComponent<LinkPanelProps, HTMLAnchorElement> {
|
||||
Title: LinkPanelTitleType;
|
||||
Description: LinkPanelDescriptionType;
|
||||
}
|
||||
|
||||
const LinkPanelComponent: OverridableComponent<
|
||||
LinkPanelProps,
|
||||
HTMLAnchorElement
|
||||
> = forwardRef(
|
||||
({ children, as = "a", border = true, className, ...rest }, ref) => {
|
||||
return (
|
||||
<Panel
|
||||
{...rest}
|
||||
as={as}
|
||||
border={border}
|
||||
ref={ref}
|
||||
className={cl("navds-link-panel", className)}
|
||||
>
|
||||
<div className="navds-link-panel__content">{children}</div>
|
||||
<Next
|
||||
className="navds-link-panel__chevron"
|
||||
aria-label="arrow-icon pointing right"
|
||||
/>
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
const LinkPanel = LinkPanelComponent as LinkPanelComponentType;
|
||||
|
||||
LinkPanel.Title = LinkPanelTitle;
|
||||
LinkPanel.Description = LinkPanelDescription;
|
||||
|
||||
export default LinkPanel;
|
||||
@@ -1,23 +0,0 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import cl from "classnames";
|
||||
import { BodyLong } from "..";
|
||||
|
||||
interface LinkPanelDescriptionProps
|
||||
extends React.HTMLAttributes<HTMLDivElement> {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export type LinkPanelDescriptionType = React.ForwardRefExoticComponent<
|
||||
LinkPanelDescriptionProps & React.RefAttributes<HTMLDivElement>
|
||||
>;
|
||||
|
||||
export const LinkPanelDescription: LinkPanelDescriptionType = forwardRef(
|
||||
({ className, ...rest }, ref) => (
|
||||
<BodyLong
|
||||
{...rest}
|
||||
as="div"
|
||||
ref={ref}
|
||||
className={cl("navds-link-panel__description", className)}
|
||||
/>
|
||||
)
|
||||
);
|
||||
@@ -1,27 +0,0 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import cl from "classnames";
|
||||
import { OverridableComponent } from "..";
|
||||
|
||||
interface LinkPanelTitleProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export type LinkPanelTitleType = OverridableComponent<
|
||||
LinkPanelTitleProps,
|
||||
HTMLDivElement
|
||||
>;
|
||||
|
||||
export const LinkPanelTitle: LinkPanelTitleType = forwardRef(
|
||||
({ className, as: Component = "div", ...rest }, ref) => (
|
||||
<Component
|
||||
{...rest}
|
||||
ref={ref}
|
||||
className={cl(
|
||||
"navds-link-panel__title",
|
||||
"navds-heading",
|
||||
"navds-heading--medium",
|
||||
className
|
||||
)}
|
||||
/>
|
||||
)
|
||||
);
|
||||
Loaded 100 of 832 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user