mirror of
https://github.com/navikt/aksel.git
synced 2026-10-25 15:12: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,7 +50,7 @@ jobs:
|
||||
publish-npm:
|
||||
needs: test-build
|
||||
runs-on: ubuntu-latest
|
||||
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:
|
||||
@@ -83,16 +78,8 @@ 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: Create a .npmrc file for NPM
|
||||
run: |
|
||||
@@ -117,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:
|
||||
|
||||
+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"
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -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].*" },
|
||||
|
||||
@@ -1,229 +0,0 @@
|
||||
import { Meta } from "@storybook/addon-docs";
|
||||
|
||||
<Meta title="ds-react/Migration" />
|
||||
|
||||
# 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.
|
||||
@@ -20,7 +20,7 @@ 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.
|
||||
Løsning er ikke fast bestemt, men 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
|
||||
@@ -44,6 +44,12 @@ 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
|
||||
|
||||
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å å
|
||||
|
||||
@@ -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-xl);
|
||||
}
|
||||
|
||||
.navds-alert--small > .navds-alert__icon {
|
||||
font-size: 1.25rem;
|
||||
height: var(--navds-font-line-height-l);
|
||||
}
|
||||
|
||||
.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,3 +0,0 @@
|
||||
.navds-copy-to-clipboard__popover {
|
||||
padding: var(--navds-spacing-1);
|
||||
}
|
||||
@@ -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-title-xl);
|
||||
}
|
||||
}
|
||||
@@ -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,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,2 +0,0 @@
|
||||
/src
|
||||
/png
|
||||
@@ -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,47 +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
|
||||
role="img"
|
||||
focusable="false"
|
||||
aria-label={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,59 +0,0 @@
|
||||
import cl from "classnames";
|
||||
import React, { forwardRef, useContext } from "react";
|
||||
import { Collapse, UnmountClosed } from "react-collapse";
|
||||
import { useClientLayoutEffect, useId } from "../util";
|
||||
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);
|
||||
|
||||
const newId = useId(id);
|
||||
const setContentId = context && context.setContentId;
|
||||
|
||||
useClientLayoutEffect(() => {
|
||||
setContentId && setContentId(id ? newId : `accordionContent-${newId}`);
|
||||
}, [setContentId, newId]);
|
||||
|
||||
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}
|
||||
id={context.contentId}
|
||||
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,84 +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}
|
||||
aria-controls={context.contentId}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
<Expand
|
||||
focusable="false"
|
||||
role="img"
|
||||
aria-label={context.open ? "Lukk panel ikon" : "Åpne panel ikon"}
|
||||
className={cl("navds-accordion__expand-icon", {
|
||||
"navds-accordion__expand-icon--flip": context.open,
|
||||
})}
|
||||
/>
|
||||
<ExpandFilled
|
||||
focusable="false"
|
||||
role="img"
|
||||
aria-label={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,93 +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;
|
||||
setContentId: (id: string) => void;
|
||||
buttonId: string;
|
||||
contentId: 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("");
|
||||
const [contentId, setContentId] = 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,
|
||||
setContentId,
|
||||
contentId,
|
||||
}}
|
||||
>
|
||||
{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,108 +0,0 @@
|
||||
import React, { createContext, forwardRef } from "react";
|
||||
import cl from "classnames";
|
||||
import {
|
||||
ErrorFilled,
|
||||
WarningFilled,
|
||||
InformationFilled,
|
||||
SuccessFilled,
|
||||
} from "@navikt/ds-icons";
|
||||
import AlertContent, { AlertContentType } from "./AlertContent";
|
||||
import AlertTitle, { AlertTitleType } from "./AlertTitle";
|
||||
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";
|
||||
}
|
||||
|
||||
export const AlertContext = createContext<AlertContextProps | null>(null);
|
||||
interface AlertComponent
|
||||
extends React.ForwardRefExoticComponent<
|
||||
AlertProps & React.RefAttributes<HTMLDivElement>
|
||||
> {
|
||||
Title: AlertTitleType;
|
||||
Content: AlertContentType;
|
||||
}
|
||||
|
||||
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
|
||||
aria-label={`${variant}-ikon`}
|
||||
focusable="false"
|
||||
role="img"
|
||||
variant={variant}
|
||||
alt={`${variant}-ikon`}
|
||||
className="navds-alert__icon"
|
||||
/>
|
||||
<BodyLong as="div" size={size} className="navds-alert__wrapper">
|
||||
{children}
|
||||
</BodyLong>
|
||||
</div>
|
||||
)
|
||||
) as AlertComponent;
|
||||
|
||||
Alert.Title = AlertTitle;
|
||||
Alert.Content = AlertContent;
|
||||
|
||||
export default Alert;
|
||||
@@ -1,41 +0,0 @@
|
||||
import React, { forwardRef, useContext } from "react";
|
||||
import cl from "classnames";
|
||||
import { BodyLong } from "..";
|
||||
import { AlertContext } from ".";
|
||||
|
||||
export interface AlertContentProps
|
||||
extends React.HTMLAttributes<HTMLDivElement> {
|
||||
/**
|
||||
* Alert content
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export type AlertContentType = React.ForwardRefExoticComponent<
|
||||
AlertContentProps & React.RefAttributes<HTMLDivElement>
|
||||
>;
|
||||
|
||||
const AlertContent: AlertContentType = forwardRef(
|
||||
({ children, className, ...rest }, ref) => {
|
||||
const context = useContext(AlertContext);
|
||||
|
||||
if (context === null) {
|
||||
console.warn("AlertContent has to be wrapped in <Alert />");
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<BodyLong
|
||||
{...rest}
|
||||
as="div"
|
||||
className={cl(className, "navds-alert__content")}
|
||||
ref={ref}
|
||||
size={context.size ?? "medium"}
|
||||
>
|
||||
{children}
|
||||
</BodyLong>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default AlertContent;
|
||||
@@ -1,41 +0,0 @@
|
||||
import React, { forwardRef, useContext } from "react";
|
||||
import cl from "classnames";
|
||||
import { AlertContext, Heading } from "..";
|
||||
|
||||
export interface AlertTitleProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
/**
|
||||
* Alert content
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export type AlertTitleType = React.ForwardRefExoticComponent<
|
||||
AlertTitleProps & React.RefAttributes<HTMLDivElement>
|
||||
>;
|
||||
|
||||
const AlertTitle: AlertTitleType = forwardRef(
|
||||
({ children, className, ...rest }, ref) => {
|
||||
const context = useContext(AlertContext);
|
||||
|
||||
if (context === null) {
|
||||
console.warn("AlertTitle has to be wrapped in <Alert />");
|
||||
return null;
|
||||
}
|
||||
|
||||
const size = context.size === "medium" ? "small" : "xsmall";
|
||||
|
||||
return (
|
||||
<Heading
|
||||
{...rest}
|
||||
ref={ref}
|
||||
className={cl(className, "navds-alert__title")}
|
||||
as="div"
|
||||
size={size}
|
||||
>
|
||||
{children}
|
||||
</Heading>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default AlertTitle;
|
||||
@@ -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,45 +0,0 @@
|
||||
import { Meta, Canvas } from "@storybook/addon-docs";
|
||||
import { CopyToClipboard } from "../../index";
|
||||
import { Success } from "@navikt/ds-react";
|
||||
|
||||
<Meta title="ds-react/copy-to-clipboard/intro" />
|
||||
|
||||
# Hvordan ta i bruk CopyToClipboard
|
||||
|
||||
Innholdet i `copyText` vil bli kopiert til clipboard, mens innholdet i `popoverText`
|
||||
brukes i popover. Hvis komponenten ikke har noen children (tekst i button) vil da en "sr-only" tekst blie
|
||||
lagt på knappen med tekst "Kopier copyText"
|
||||
|
||||
```jsx
|
||||
<CopyToClipboard popoverText={"Kopierte adresse"} copyText={"0660 OSLO"}>
|
||||
Kopier adresse
|
||||
</CopyToClipboard>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<CopyToClipboard popoverText={"Kopiert adresse"} copyText={"0660 OSLO"}>
|
||||
Kopier adresse
|
||||
</CopyToClipboard>
|
||||
</Canvas>
|
||||
|
||||
## Sizing
|
||||
|
||||
```jsx
|
||||
<CopyToClipboard
|
||||
popoverText={"Kopierte adressen"}
|
||||
copyText={"0660 OSLO"}
|
||||
size="small"
|
||||
>
|
||||
Kopier adresse
|
||||
</CopyToClipboard>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<CopyToClipboard
|
||||
popoverText={"Kopierte adressen"}
|
||||
copyText={"0660 OSLO"}
|
||||
size="small"
|
||||
>
|
||||
Kopier adresse
|
||||
</CopyToClipboard>
|
||||
</Canvas>
|
||||
@@ -1,29 +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 ".";
|
||||
|
||||
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);
|
||||
});
|
||||
|
||||
const firstArgumentOfFirstCall = (fn: jest.Mock) => fn.mock.calls[0][0];
|
||||
@@ -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
|
||||
fill-rule="evenodd"
|
||||
clip-rule="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
|
||||
fill-rule="evenodd"
|
||||
clip-rule="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
|
||||
fill-rule="evenodd"
|
||||
clip-rule="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
|
||||
fill-rule="evenodd"
|
||||
clip-rule="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
|
||||
fill-rule="evenodd"
|
||||
clip-rule="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
|
||||
fill-rule="evenodd"
|
||||
clip-rule="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
|
||||
fill-rule="evenodd"
|
||||
clip-rule="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
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M26.7756 51.6667H27.3958V50H26.7756V51.6667Z"
|
||||
fill="#6A6A6A"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="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
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M23.6667 55.3511L24.1434 54.1712H24.6015L24.1254 55.3511H23.6667Z"
|
||||
fill="#C30000"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M29.5496 55.3511L30.0202 54.1712H30.2699L29.7993 55.3511H29.5496Z"
|
||||
fill="#C30000"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M30.4752 55.3511L30.9457 54.1712H31.0783L30.6077 55.3511H30.4752Z"
|
||||
fill="#C30000"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="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,78 +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, useId } 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);
|
||||
const popoverId = `popover-${useId()}`;
|
||||
|
||||
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-controls={popoverId}
|
||||
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}
|
||||
id={popoverId}
|
||||
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
|
||||
)}
|
||||
/>
|
||||
)
|
||||
);
|
||||
@@ -1,110 +0,0 @@
|
||||
import { Meta, Canvas } from "@storybook/addon-docs";
|
||||
import { LinkPanel } from "../../index";
|
||||
import { Success } from "@navikt/ds-react";
|
||||
import { Illustration } from "./illustration";
|
||||
|
||||
<Meta title="ds-react/linkPanel/intro" />
|
||||
|
||||
# Hvordan ta i bruk LinkPanel
|
||||
|
||||
```jsx
|
||||
<LinkPanel href="#">
|
||||
<LinkPanel.Title>
|
||||
Consectetur eu duis aliqua eu irure fugiat fugiat eu.
|
||||
</LinkPanel.Title>
|
||||
</LinkPanel>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<LinkPanel href="#">
|
||||
<LinkPanel.Title>
|
||||
Consectetur eu duis aliqua eu irure fugiat fugiat eu.
|
||||
</LinkPanel.Title>
|
||||
</LinkPanel>
|
||||
</Canvas>
|
||||
|
||||
## Med description
|
||||
|
||||
```jsx
|
||||
<LinkPanel href="#">
|
||||
<LinkPanel.Title>
|
||||
Consectetur eu duis aliqua eu irure fugiat fugiat eu.
|
||||
</LinkPanel.Title>
|
||||
<LinkPanel.Description>
|
||||
Velit mollit do commodo elit Lorem aliqua Lorem.
|
||||
</LinkPanel.Description>
|
||||
</LinkPanel>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<LinkPanel href="#">
|
||||
<LinkPanel.Title>
|
||||
Consectetur eu duis aliqua eu irure fugiat fugiat eu.
|
||||
</LinkPanel.Title>
|
||||
<LinkPanel.Description>
|
||||
Velit mollit do commodo elit Lorem aliqua Lorem.
|
||||
</LinkPanel.Description>
|
||||
</LinkPanel>
|
||||
</Canvas>
|
||||
|
||||
## Uten border
|
||||
|
||||
```jsx
|
||||
<LinkPanel href="#" border={false}>
|
||||
<LinkPanel.Title>
|
||||
Veniam cillum cupidatat aliqua id ipsum culpa ea.
|
||||
</LinkPanel.Title>
|
||||
</LinkPanel>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<LinkPanel href="#" border={false}>
|
||||
<LinkPanel.Title>
|
||||
Veniam cillum cupidatat aliqua id ipsum culpa ea.
|
||||
</LinkPanel.Title>
|
||||
</LinkPanel>
|
||||
</Canvas>
|
||||
|
||||
## Custom styling
|
||||
|
||||
```jsx
|
||||
<LinkPanel href="#">
|
||||
<div
|
||||
style={{
|
||||
display: "grid",
|
||||
gridAutoFlow: "column",
|
||||
gap: "var(--navds-spacing-8)",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
{Illustration}
|
||||
<div>
|
||||
<LinkPanel.Title>Consectetur eu duis aliqua</LinkPanel.Title>
|
||||
<LinkPanel.Description>
|
||||
Aliqua id aliquip Lorem esse
|
||||
</LinkPanel.Description>
|
||||
</div>
|
||||
</div>
|
||||
</LinkPanel>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<LinkPanel href="#">
|
||||
<div
|
||||
style={{
|
||||
display: "grid",
|
||||
gridAutoFlow: "column",
|
||||
gap: "var(--navds-spacing-8)",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
{Illustration}
|
||||
<div>
|
||||
<LinkPanel.Title>Consectetur eu duis aliqua</LinkPanel.Title>
|
||||
<LinkPanel.Description>
|
||||
Aliqua id aliquip Lorem esse
|
||||
</LinkPanel.Description>
|
||||
</div>
|
||||
</div>
|
||||
</LinkPanel>
|
||||
</Canvas>
|
||||
@@ -1,53 +0,0 @@
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import { LinkPanel } from "..";
|
||||
import { Illustration } from "./illustration";
|
||||
|
||||
export default {
|
||||
title: "ds-react/linkPanel",
|
||||
component: LinkPanel,
|
||||
};
|
||||
|
||||
const StyledLinkPanel = styled(LinkPanel)`
|
||||
.navds-link-panel__content {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
gap: var(--navds-spacing-8);
|
||||
align-items: center;
|
||||
}
|
||||
`;
|
||||
|
||||
export const All = () => (
|
||||
<>
|
||||
<h1>Link panel</h1>
|
||||
<LinkPanel href="#">
|
||||
<LinkPanel.Title>
|
||||
Consectetur eu duis aliqua eu irure fugiat fugiat eu.
|
||||
</LinkPanel.Title>
|
||||
<LinkPanel.Description>
|
||||
Aliqua id aliquip Lorem esse
|
||||
</LinkPanel.Description>
|
||||
</LinkPanel>
|
||||
|
||||
<h1>No border</h1>
|
||||
<LinkPanel href="#" border={false}>
|
||||
<LinkPanel.Title>
|
||||
Veniam cillum cupidatat aliqua id ipsum culpa ea.
|
||||
</LinkPanel.Title>
|
||||
</LinkPanel>
|
||||
|
||||
<h1>Custom styling</h1>
|
||||
<StyledLinkPanel href="#">
|
||||
{Illustration}
|
||||
<div>
|
||||
<LinkPanel.Title>
|
||||
Anim pariatur eiusmod deserunt elit cillum
|
||||
</LinkPanel.Title>
|
||||
<LinkPanel.Description>
|
||||
Ex velit id voluptate labore irure ipsum exercitation sunt et id enim
|
||||
magna veniam consequat. id aliquip Lorem esse
|
||||
</LinkPanel.Description>
|
||||
</div>
|
||||
</StyledLinkPanel>
|
||||
</>
|
||||
);
|
||||
@@ -1,20 +0,0 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import cl from "classnames";
|
||||
import { OverridableComponent } from "..";
|
||||
|
||||
export interface LinkProps
|
||||
extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
|
||||
/**
|
||||
* Link text
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const Link: OverridableComponent<
|
||||
LinkProps,
|
||||
HTMLAnchorElement
|
||||
> = forwardRef(({ as: Component = "a", className, ...rest }, ref) => (
|
||||
<Component {...rest} ref={ref} className={cl("navds-link", className)} />
|
||||
));
|
||||
|
||||
export default Link;
|
||||
@@ -1,53 +0,0 @@
|
||||
import React from "react";
|
||||
import { Link } from "..";
|
||||
import { Add } from "@navikt/ds-icons";
|
||||
import { Alert } from "../..";
|
||||
import { ConfirmationPanel } from "../../form";
|
||||
export default {
|
||||
title: "ds-react/link",
|
||||
component: Link,
|
||||
};
|
||||
|
||||
export const All = () => {
|
||||
return (
|
||||
<>
|
||||
<h1>Link</h1>
|
||||
<Link href="#">Dette er en tekstlenke</Link>
|
||||
<h2>Icon after</h2>
|
||||
<Link href="#">
|
||||
<span>Dette er en tekstlenke</span>
|
||||
<Add />
|
||||
</Link>
|
||||
<h2>Icon before</h2>
|
||||
<Link href="#">
|
||||
<Add />
|
||||
<span>Dette er en tekstlenke </span>
|
||||
</Link>
|
||||
<h2>På farget bakgrunn</h2>
|
||||
<Alert variant="error">
|
||||
Her er en <Link href="#about">lenke</Link> på farget bakgrunn
|
||||
</Alert>
|
||||
<Alert variant="info">
|
||||
Her er en <Link href="#about">lenke</Link> på farget bakgrunn
|
||||
</Alert>
|
||||
<Alert variant="success">
|
||||
Her er en <Link href="#about">lenke</Link> på farget bakgrunn
|
||||
</Alert>
|
||||
<Alert variant="warning">
|
||||
Her er en <Link href="#about">lenke</Link> på farget bakgrunn
|
||||
</Alert>
|
||||
<ConfirmationPanel label="Samtykke?" checked={false} error="feilmelding">
|
||||
Her er en <Link href="#about">lenke</Link> på farget bakgrunn
|
||||
</ConfirmationPanel>
|
||||
<ConfirmationPanel label="Samtykke?" checked error="feilmelding">
|
||||
Her er en <Link href="#about">lenke</Link> på farget bakgrunn
|
||||
</ConfirmationPanel>
|
||||
<ConfirmationPanel label="Samtykke?" checked={false}>
|
||||
Her er en <Link href="#about">lenke</Link> på farget bakgrunn
|
||||
</ConfirmationPanel>
|
||||
<ConfirmationPanel label="Samtykke?" checked>
|
||||
Her er en <Link href="#about">lenke</Link> på farget bakgrunn
|
||||
</ConfirmationPanel>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -1,69 +0,0 @@
|
||||
import React from "react";
|
||||
import { Loader } from "..";
|
||||
import { Button } from "../..";
|
||||
import { Meta } from "@storybook/react/types-6-0";
|
||||
export default {
|
||||
title: "ds-react/loader",
|
||||
component: Loader,
|
||||
} as Meta;
|
||||
|
||||
export const All = () => {
|
||||
return (
|
||||
<div>
|
||||
<h1>Loader</h1>
|
||||
<Loader />
|
||||
|
||||
<h2>Transparent</h2>
|
||||
<Loader transparent />
|
||||
|
||||
<h2>Sizing</h2>
|
||||
<Loader size="2xlarge" />
|
||||
<Loader size="xlarge" />
|
||||
<Loader size="large" />
|
||||
<Loader size="medium" />
|
||||
<Loader size="small" />
|
||||
<Loader size="xsmall" />
|
||||
<h2>Sizing transparent</h2>
|
||||
<Loader size="2xlarge" transparent />
|
||||
<Loader size="xlarge" transparent />
|
||||
<Loader size="large" transparent />
|
||||
<Loader size="medium" transparent />
|
||||
<Loader size="small" transparent />
|
||||
<Loader size="xsmall" transparent />
|
||||
<div style={{ backgroundColor: "#c9c9c9" }}>
|
||||
<h2>Varianter</h2>
|
||||
<Loader size="xlarge" variant="neutral" />
|
||||
<Loader size="xlarge" variant="interaction" />
|
||||
<Loader size="xlarge" variant="inverted" />
|
||||
<h2>Varianter transparent</h2>
|
||||
<Loader size="xlarge" variant="neutral" transparent />
|
||||
<Loader size="xlarge" variant="interaction" transparent />
|
||||
<Loader size="xlarge" variant="inverted" transparent />
|
||||
</div>
|
||||
<h2>Brukt i knapper</h2>
|
||||
<div>
|
||||
<Button>
|
||||
Laster...
|
||||
<Loader />
|
||||
</Button>
|
||||
<Button size="small">
|
||||
Laster...
|
||||
<Loader />
|
||||
</Button>
|
||||
<h2>Variants</h2>
|
||||
<Button variant="secondary">
|
||||
Laster...
|
||||
<Loader />
|
||||
</Button>
|
||||
<Button variant="action">
|
||||
Laster...
|
||||
<Loader />
|
||||
</Button>
|
||||
<Button variant="danger">
|
||||
Laster...
|
||||
<Loader />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,26 +0,0 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import cl from "classnames";
|
||||
|
||||
export interface ModalContentProps
|
||||
extends React.HTMLAttributes<HTMLDivElement> {
|
||||
/**
|
||||
* Modal.Content content
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export type ModalContentType = React.ForwardRefExoticComponent<
|
||||
ModalContentProps & React.RefAttributes<HTMLDivElement>
|
||||
>;
|
||||
|
||||
const ModalContent: ModalContentType = forwardRef(
|
||||
({ className, ...rest }, ref) => (
|
||||
<div
|
||||
{...rest}
|
||||
ref={ref}
|
||||
className={cl("navds-modal__content", className)}
|
||||
/>
|
||||
)
|
||||
);
|
||||
|
||||
export default ModalContent;
|
||||
@@ -1,51 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import { Modal } from "../..";
|
||||
|
||||
export default {
|
||||
title: "ds-react/modal",
|
||||
component: Modal,
|
||||
};
|
||||
|
||||
Modal.setAppElement("#root");
|
||||
|
||||
export const All = () => {
|
||||
const [open, setOpen] = useState(true);
|
||||
const [openTwo, setOpenTwo] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<button onClick={() => setOpen(true)}>Open modal</button>
|
||||
<Modal open={open} onClose={() => setOpen(false)}>
|
||||
<Modal.Content>
|
||||
<h1>Header</h1>
|
||||
<h2>subheader</h2>
|
||||
<p>Cupidatat irure ipsum veniam ad in esse.</p>
|
||||
<p>Cillum tempor pariatur amet ut laborum Lorem enim enim.</p>
|
||||
</Modal.Content>
|
||||
</Modal>
|
||||
|
||||
<button onClick={() => setOpenTwo(true)}>
|
||||
Open modal,shouldCloseOnOverlayClick false{" "}
|
||||
</button>
|
||||
<Modal
|
||||
shouldCloseOnOverlayClick={false}
|
||||
open={openTwo}
|
||||
onClose={() => setOpenTwo(false)}
|
||||
>
|
||||
<Modal.Content>
|
||||
<h1>Header</h1>
|
||||
<h2>subheader</h2>
|
||||
<p>
|
||||
Cupidatat irure ipsum veniam ad in esse. Voluptate do nulla amet
|
||||
laboris ea ex aliquip. Dolore dolore reprehenderit sint esse commodo
|
||||
aliqua cupidatat incididunt proident laborum qui. Officia fugiat non
|
||||
anim cupidatat. Adipisicing ut aliqua cillum nulla elit. Mollit et
|
||||
id duis cupidatat labore magna consectetur et veniam tempor. In
|
||||
minim exercitation id irure velit sit dolor aliquip velit esse.
|
||||
Excepteur sint non minim nulla excepteur labore non magna eu.
|
||||
</p>
|
||||
</Modal.Content>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -1,76 +0,0 @@
|
||||
import React, { forwardRef, HTMLAttributes } from "react";
|
||||
import cl from "classnames";
|
||||
import { BodyShort, Heading } from "..";
|
||||
|
||||
export interface PageHeaderProps extends HTMLAttributes<HTMLDivElement> {
|
||||
/**
|
||||
* PageHeader title
|
||||
*/
|
||||
children: string;
|
||||
/**
|
||||
* Pictogram placed in PageHeader
|
||||
*/
|
||||
illustration?: React.ReactNode;
|
||||
/**
|
||||
* Short text placed under title
|
||||
*/
|
||||
description?: string;
|
||||
/**
|
||||
* Predefined variants for PageHeader
|
||||
* @default "guide"
|
||||
*/
|
||||
variant?: "situation" | "product" | "guide";
|
||||
/**
|
||||
* Decides how to align content
|
||||
* @default "left"
|
||||
*/
|
||||
align?: "left" | "center";
|
||||
}
|
||||
|
||||
const PageHeader = forwardRef<HTMLDivElement, PageHeaderProps>(
|
||||
(
|
||||
{
|
||||
children,
|
||||
className,
|
||||
illustration,
|
||||
description,
|
||||
variant = "guide",
|
||||
align = "left",
|
||||
...rest
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cl(
|
||||
"navds-page-header",
|
||||
className,
|
||||
`navds-page-header--${variant}`,
|
||||
`navds-page-header--${align}`
|
||||
)}
|
||||
{...rest}
|
||||
>
|
||||
{illustration && (
|
||||
<div className="navds-page-header__illustration">{illustration}</div>
|
||||
)}
|
||||
<div className="navds-page-header__wrapper">
|
||||
<Heading
|
||||
className="navds-page-header__title"
|
||||
size="2xlarge"
|
||||
level="1"
|
||||
>
|
||||
{children}
|
||||
</Heading>
|
||||
{description && (
|
||||
<BodyShort className="navds-page-header__description">
|
||||
{description}
|
||||
</BodyShort>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default PageHeader;
|
||||
@@ -1,2 +0,0 @@
|
||||
export { default as PageHeader } from "./PageHeader";
|
||||
export * from "./PageHeader";
|
||||
@@ -1,38 +0,0 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import cl from "classnames";
|
||||
import { OverridableComponent } from "..";
|
||||
|
||||
export interface PanelProps extends React.HTMLAttributes<HTMLElement> {
|
||||
/**
|
||||
* Panel content
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* Toggles border on panel
|
||||
* @default false
|
||||
*/
|
||||
border?: boolean;
|
||||
}
|
||||
|
||||
export type PanelType = OverridableComponent<PanelProps, HTMLElement>;
|
||||
|
||||
const Panel: PanelType = forwardRef(
|
||||
(
|
||||
{ children, className, border = false, as: Component = "div", ...rest },
|
||||
ref
|
||||
) => {
|
||||
return (
|
||||
<Component
|
||||
ref={ref}
|
||||
className={cl("navds-panel", className, {
|
||||
"navds-panel--border": border,
|
||||
})}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</Component>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default Panel;
|
||||
@@ -1,26 +0,0 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import cl from "classnames";
|
||||
|
||||
export interface PopoverContentProps
|
||||
extends React.HTMLAttributes<HTMLDivElement> {
|
||||
/**
|
||||
* Modal.Content content
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export type PopoverContentType = React.ForwardRefExoticComponent<
|
||||
PopoverContentProps & React.RefAttributes<HTMLDivElement>
|
||||
>;
|
||||
|
||||
const PopoverContent: PopoverContentType = forwardRef(
|
||||
({ className, ...rest }, ref) => (
|
||||
<div
|
||||
{...rest}
|
||||
ref={ref}
|
||||
className={cl("navds-popover__content", className)}
|
||||
/>
|
||||
)
|
||||
);
|
||||
|
||||
export default PopoverContent;
|
||||
@@ -1,41 +0,0 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import cl from "classnames";
|
||||
import { OverridableComponent } from "..";
|
||||
|
||||
export interface BodyLongProps
|
||||
extends React.HTMLAttributes<HTMLParagraphElement> {
|
||||
/**
|
||||
* medium: 18px, small: 16px
|
||||
* @default "medium"
|
||||
*/
|
||||
size?: "medium" | "small";
|
||||
/**
|
||||
* Paragraph text
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* Adds margins to typo
|
||||
*/
|
||||
spacing?: boolean;
|
||||
}
|
||||
|
||||
const BodyLong: OverridableComponent<
|
||||
BodyLongProps,
|
||||
HTMLParagraphElement
|
||||
> = forwardRef(
|
||||
(
|
||||
{ className, size = "medium", spacing, as: Component = "p", ...rest },
|
||||
ref
|
||||
) => (
|
||||
<Component
|
||||
{...rest}
|
||||
ref={ref}
|
||||
className={cl(className, "navds-body-long", {
|
||||
"navds-body-long--small": size === "small",
|
||||
"navds-typo--spacing": !!spacing,
|
||||
})}
|
||||
/>
|
||||
)
|
||||
);
|
||||
|
||||
export default BodyLong;
|
||||
@@ -1,41 +0,0 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import cl from "classnames";
|
||||
import { OverridableComponent } from "..";
|
||||
|
||||
export interface BodyShortProps
|
||||
extends React.HTMLAttributes<HTMLParagraphElement> {
|
||||
/**
|
||||
* medium: 18px, small: 16px
|
||||
* @default "medium"
|
||||
*/
|
||||
size?: "medium" | "small";
|
||||
/**
|
||||
* Paragraph text
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* Adds margins to typo
|
||||
*/
|
||||
spacing?: boolean;
|
||||
}
|
||||
|
||||
const BodyShort: OverridableComponent<
|
||||
BodyShortProps,
|
||||
HTMLParagraphElement
|
||||
> = forwardRef(
|
||||
(
|
||||
{ className, size = "medium", spacing, as: Component = "p", ...rest },
|
||||
ref
|
||||
) => (
|
||||
<Component
|
||||
{...rest}
|
||||
ref={ref}
|
||||
className={cl(className, "navds-body-short", {
|
||||
"navds-body-short--small": size === "small",
|
||||
"navds-typo--spacing": !!spacing,
|
||||
})}
|
||||
/>
|
||||
)
|
||||
);
|
||||
|
||||
export default BodyShort;
|
||||
@@ -1,41 +0,0 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import cl from "classnames";
|
||||
import { OverridableComponent } from "..";
|
||||
|
||||
export interface DetailProps
|
||||
extends React.HTMLAttributes<HTMLParagraphElement> {
|
||||
/**
|
||||
* medium: 14px bold, small: 14px
|
||||
* @default "medium"
|
||||
*/
|
||||
size?: "medium" | "small";
|
||||
/**
|
||||
* Paragraph text
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* Adds margins to typo
|
||||
*/
|
||||
spacing?: boolean;
|
||||
}
|
||||
|
||||
const Detail: OverridableComponent<
|
||||
DetailProps,
|
||||
HTMLParagraphElement
|
||||
> = forwardRef(
|
||||
(
|
||||
{ className, size = "medium", spacing, as: Component = "p", ...rest },
|
||||
ref
|
||||
) => (
|
||||
<Component
|
||||
{...rest}
|
||||
ref={ref}
|
||||
className={cl(className, "navds-detail", {
|
||||
"navds-detail--small": size === "small",
|
||||
"navds-typo--spacing": !!spacing,
|
||||
})}
|
||||
/>
|
||||
)
|
||||
);
|
||||
|
||||
export default Detail;
|
||||
@@ -1,45 +0,0 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import cl from "classnames";
|
||||
import { OverridableComponent } from "..";
|
||||
|
||||
export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
|
||||
/**
|
||||
* Heading level
|
||||
* @default "1"
|
||||
*/
|
||||
level?: "1" | "2" | "3" | "4" | "5" | "6";
|
||||
/**
|
||||
* Sizes from largest "2xl" to smallest "s"
|
||||
*/
|
||||
size: "2xlarge" | "xlarge" | "large" | "medium" | "small" | "xsmall";
|
||||
/**
|
||||
* Heading text
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* Adds margins to typo
|
||||
* @default false
|
||||
*/
|
||||
spacing?: boolean;
|
||||
}
|
||||
|
||||
const Heading: OverridableComponent<
|
||||
HeadingProps,
|
||||
HTMLHeadingElement
|
||||
> = forwardRef(
|
||||
({ level = "1", size, spacing = false, className, as, ...rest }, ref) => {
|
||||
let HeadingTag = as ?? (`h${level}` as React.ElementType);
|
||||
|
||||
return (
|
||||
<HeadingTag
|
||||
{...rest}
|
||||
ref={ref}
|
||||
className={cl(className, "navds-heading", `navds-heading--${size}`, {
|
||||
"navds-typo--spacing": spacing,
|
||||
})}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default Heading;
|
||||
@@ -1,30 +0,0 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import cl from "classnames";
|
||||
import { OverridableComponent } from "..";
|
||||
|
||||
export interface IngressProps
|
||||
extends React.HTMLAttributes<HTMLParagraphElement> {
|
||||
/**
|
||||
* Ingress text
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* Adds margins to typo
|
||||
*/
|
||||
spacing?: boolean;
|
||||
}
|
||||
|
||||
const Ingress: OverridableComponent<
|
||||
IngressProps,
|
||||
HTMLParagraphElement
|
||||
> = forwardRef(({ className, spacing, as: Component = "p", ...rest }, ref) => (
|
||||
<Component
|
||||
{...rest}
|
||||
ref={ref}
|
||||
className={cl(className, "navds-ingress", {
|
||||
"navds-typo--spacing": !!spacing,
|
||||
})}
|
||||
/>
|
||||
));
|
||||
|
||||
export default Ingress;
|
||||
@@ -1,40 +0,0 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import cl from "classnames";
|
||||
import { OverridableComponent } from "..";
|
||||
|
||||
export interface LabelProps extends React.HTMLAttributes<HTMLParagraphElement> {
|
||||
/**
|
||||
* medium: 18px, small: 16px
|
||||
* @default "medium"
|
||||
*/
|
||||
size?: "medium" | "small";
|
||||
/**
|
||||
* Paragraph text
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* Adds margins to typo
|
||||
*/
|
||||
spacing?: boolean;
|
||||
}
|
||||
|
||||
const Label: OverridableComponent<
|
||||
LabelProps,
|
||||
HTMLParagraphElement
|
||||
> = forwardRef(
|
||||
(
|
||||
{ className, size = "medium", spacing, as: Component = "p", ...rest },
|
||||
ref
|
||||
) => (
|
||||
<Component
|
||||
{...rest}
|
||||
ref={ref}
|
||||
className={cl(className, "navds-label", {
|
||||
"navds-label--small": size === "small",
|
||||
"navds-typo--spacing": !!spacing,
|
||||
})}
|
||||
/>
|
||||
)
|
||||
);
|
||||
|
||||
export default Label;
|
||||
@@ -1,10 +0,0 @@
|
||||
export interface OverridableComponent<Component, Element extends HTMLElement> {
|
||||
(props: Component & React.RefAttributes<Element>): ReturnType<React.FC>;
|
||||
|
||||
<As extends React.ElementType>(
|
||||
props: {
|
||||
as: As;
|
||||
} & Component &
|
||||
Omit<React.ComponentPropsWithRef<As>, keyof Component>
|
||||
): ReturnType<React.FC>;
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
{
|
||||
"extends": "../../../utilities/build/tsconfig-pakker.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./esm",
|
||||
"rootDir": "./src",
|
||||
"esModuleInterop": true,
|
||||
"module": "ES2020",
|
||||
"target": "ES2015",
|
||||
"sourceMap": true,
|
||||
"declaration": true
|
||||
},
|
||||
"include": ["./src"],
|
||||
"exclude": ["./src/**/stories", "**/*.test.ts", "**/*.test.tsx"]
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
{
|
||||
"extends": "../../../utilities/build/tsconfig-pakker.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./cjs",
|
||||
"rootDir": "./src",
|
||||
"esModuleInterop": true,
|
||||
"module": "commonjs",
|
||||
"target": "es2015",
|
||||
"sourceMap": false,
|
||||
"declaration": false
|
||||
},
|
||||
"include": ["./src"],
|
||||
"exclude": ["./src/**/stories", "**/*.test.ts", "**/*.test.tsx"]
|
||||
}
|
||||
@@ -1,11 +1,3 @@
|
||||
:root {
|
||||
--navds-accordion-menu-color-text: var(--navds-color-text-link);
|
||||
--navds-accordion-menu-color-text-focus: var(--navds-color-darkgray);
|
||||
--navds-accordion-menu-color-background-hover: var(--navds-color-blue-10);
|
||||
--navds-accordion-menu-color-text-active: var(--navds-color-text);
|
||||
--navds-accordion-menu-outline-focus: var(--navds-text-focus);
|
||||
}
|
||||
|
||||
.navds-accordion-menu__list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
@@ -26,7 +18,7 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-weight: var(--navds-font-weight-bold);
|
||||
color: var(--navds-accordion-menu-color-text);
|
||||
color: var(--navds-color-text-link);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@@ -39,7 +31,7 @@
|
||||
|
||||
.navds-accordion-menu-collapsable__expand-icon {
|
||||
font-size: 1.5rem;
|
||||
color: var(--navds-accordion-menu-color);
|
||||
color: var(--navds-color-text-link);
|
||||
flex-shrink: 0;
|
||||
margin-left: var(--navds-spacing-2);
|
||||
}
|
||||
@@ -81,23 +73,18 @@
|
||||
|
||||
.navds-accordion-menu-item:focus,
|
||||
.navds-accordion-menu-collapsable__button:focus {
|
||||
outline: 3px solid var(--navds-accordion-menu-outline-focus);
|
||||
outline: 3px solid var(--navds-text-focus);
|
||||
outline-offset: -3px;
|
||||
color: var(--navds-accordion-menu-color-text-focus);
|
||||
}
|
||||
|
||||
.navds-accordion-menu-collapsable__button:focus
|
||||
> .navds-accordion-menu-collapsable__expand-icon {
|
||||
color: var(--navds-accordion-menu-color-focus);
|
||||
color: var(--navds-color-darkgray);
|
||||
}
|
||||
|
||||
.navds-accordion-menu-item:hover,
|
||||
.navds-accordion-menu-collapsable__button:hover {
|
||||
background-color: var(--navds-accordion-menu-color-background-hover);
|
||||
background-color: var(--navds-color-blue-10);
|
||||
}
|
||||
|
||||
.navds-accordion-menu-item--active {
|
||||
box-shadow: inset 0.5rem 0 var(--navds-color-text-link);
|
||||
color: var(--navds-accordion-menu-color-text-active);
|
||||
color: var(--navds-color-text);
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
.ReactCollapse--collapse {
|
||||
transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.navds-accordion {
|
||||
position: relative;
|
||||
background: var(--navds-color-background);
|
||||
border-bottom: 2px solid #c9c9c9;
|
||||
}
|
||||
|
||||
.navds-accordion:hover {
|
||||
/* color: black; */
|
||||
border-bottom: 2px solid var(--navds-color-blue-50);
|
||||
}
|
||||
|
||||
.navds-accordion:focus,
|
||||
.navds-accordion__button:focus {
|
||||
box-shadow: var(--navds-shadow-focus);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.navds-accordion__chevron {
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
transform: rotateZ(0deg);
|
||||
flex-shrink: 0;
|
||||
margin-left: var(--navds-spacing-4);
|
||||
}
|
||||
|
||||
.navds-accordion__chevron--up {
|
||||
transform: rotateZ(-180deg);
|
||||
}
|
||||
|
||||
.navds-accordion__chevron--down {
|
||||
transform: rotateZ(0deg);
|
||||
}
|
||||
|
||||
.navds-accordion__button {
|
||||
padding: var(--navds-spacing-4);
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
border: none;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: var(--navds-color-text-link);
|
||||
}
|
||||
|
||||
.navds-accordion__button:hover .navds-accordion__heading {
|
||||
text-decoration: underline;
|
||||
color: var(--navds-color-text-link);
|
||||
}
|
||||
|
||||
.navds-accordion__content {
|
||||
padding: var(--navds-spacing-2) var(--navds-spacing-4) var(--navds-spacing-4);
|
||||
}
|
||||
|
||||
.navds-accordion--open .navds-accordion__content {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.navds-accordion--open > .navds-accordion__button {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.navds-accordion__chevron--filled {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navds-accordion__button:hover
|
||||
> .navds-accordion__chevron.navds-accordion__chevron--filled {
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.navds-accordion__button:hover > .navds-accordion__chevron {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
.navds-alert {
|
||||
border-radius: 4px;
|
||||
border: var(--navds-border-default);
|
||||
|
||||
/* Padding calculated based on 18px font for 64px tall alert */
|
||||
padding: var(--navds-spacing-4) var(--navds-spacing-4);
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
justify-content: start;
|
||||
min-height: 64px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.navds-alert--s {
|
||||
padding: var(--navds-spacing-1) var(--navds-spacing-4);
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.navds-alert > span > svg {
|
||||
margin-right: var(--navds-spacing-3);
|
||||
font-size: 1.5rem;
|
||||
flex-shrink: 0;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
var(--navds-color-background) 50%,
|
||||
0,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.navds-alert > div {
|
||||
display: block;
|
||||
margin: auto 0;
|
||||
max-width: 43.5rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.navds-alert > span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-height: calc(var(--navds-spacing-8) - 2px);
|
||||
}
|
||||
|
||||
.navds-alert--error {
|
||||
border-color: var(--navds-color-error-border);
|
||||
background-color: var(--navds-color-error-background);
|
||||
}
|
||||
|
||||
.navds-alert--error > span > svg {
|
||||
color: var(--navds-color-red-60);
|
||||
}
|
||||
|
||||
.navds-alert--warning {
|
||||
border-color: var(--navds-color-warning-border);
|
||||
background-color: var(--navds-color-warning-background);
|
||||
}
|
||||
|
||||
.navds-alert--warning > span > svg {
|
||||
color: var(--navds-color-orange-40);
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
var(--navds-color-darkgray) 50%,
|
||||
0,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.navds-alert--info {
|
||||
border-color: var(--navds-color-info-border);
|
||||
background-color: var(--navds-color-info-background);
|
||||
}
|
||||
|
||||
.navds-alert--info > span > svg {
|
||||
color: var(--navds-color-lightblue-70);
|
||||
}
|
||||
|
||||
.navds-alert--success {
|
||||
border-color: var(--navds-color-success-border);
|
||||
background-color: var(--navds-color-success-background);
|
||||
}
|
||||
|
||||
.navds-alert--success > span > svg {
|
||||
color: var(--navds-color-green-70);
|
||||
}
|
||||
File renamed without changes.
File renamed without changes.
File renamed without changes.
@@ -7,7 +7,6 @@
|
||||
@import "utility.css";
|
||||
|
||||
/* Disabled because of UU concerns */
|
||||
|
||||
/* @import "smooth-scroll.css"; */
|
||||
|
||||
html {
|
||||
@@ -15,8 +14,8 @@ html {
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
File renamed without changes.
File renamed without changes.
@@ -9,8 +9,7 @@
|
||||
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
|
||||
*/
|
||||
|
||||
.sr-only,
|
||||
.navds-sr-only {
|
||||
.sr-only {
|
||||
border: 0;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
height: 1px;
|
||||
@@ -33,9 +32,7 @@
|
||||
*/
|
||||
|
||||
.sr-only.focusable:active,
|
||||
.sr-only.focusable:focus,
|
||||
.navds-sr-only.focusable:active,
|
||||
.navds-sr-only.focusable:focus {
|
||||
.sr-only.focusable:focus {
|
||||
clip: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
@@ -0,0 +1,142 @@
|
||||
.navds-button {
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
background-color: var(--navds-color-background);
|
||||
color: var(--navds-color-action-default);
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
border-color: var(--navds-color-action-default);
|
||||
border-radius: 2px;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
min-height: 48px;
|
||||
align-items: center;
|
||||
|
||||
/* Padding calculated based on 18px font for 44px tall button */
|
||||
padding: calc(var(--navds-spacing-3) - 2px) var(--navds-spacing-3);
|
||||
}
|
||||
|
||||
.navds-button > svg {
|
||||
font-size: 1.5rem;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.navds-button--s > svg {
|
||||
font-size: 1.25rem;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.navds-button > svg + *:not(.sr-only),
|
||||
.navds-button > *:not(.sr-only) + svg {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
/* .navds-button:last-child {
|
||||
margin-left: 0.5rem;
|
||||
} */
|
||||
|
||||
.navds-button--s {
|
||||
/* Padding calculated based on 16px font for 32px tall button */
|
||||
padding: 0.25rem calc(var(--navds-spacing-4) - 2px);
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.navds-button:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
/**************************
|
||||
* .navds-button--primary *
|
||||
**************************/
|
||||
|
||||
.navds-button--primary:hover,
|
||||
.navds-button--primary:active {
|
||||
color: var(--navds-color-text-inverse);
|
||||
background-color: var(--navds-color-action-hover);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.navds-button--primary:active {
|
||||
background-color: var(--navds-color-action-active);
|
||||
}
|
||||
|
||||
/****************************
|
||||
* .navds-button--secondary *
|
||||
****************************/
|
||||
|
||||
.navds-button--secondary {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.navds-button--secondary:hover,
|
||||
.navds-button--secondary:focus {
|
||||
border-color: var(--navds-color-action-default);
|
||||
}
|
||||
|
||||
.navds-button--secondary:active {
|
||||
color: var(--navds-color-text-inverse);
|
||||
border-color: var(--navds-color-action-active);
|
||||
background-color: var(--navds-color-action-active);
|
||||
}
|
||||
|
||||
/*************************
|
||||
* .navds-button--action *
|
||||
* .navds-button--danger *
|
||||
*************************/
|
||||
|
||||
.navds-button--action {
|
||||
background-color: var(--navds-color-action-default);
|
||||
border-color: var(--navds-color-action-default);
|
||||
}
|
||||
|
||||
.navds-button--danger {
|
||||
background-color: var(--navds-color-danger-default);
|
||||
border-color: var(--navds-color-danger-default);
|
||||
}
|
||||
|
||||
.navds-button--action,
|
||||
.navds-button--danger {
|
||||
color: white;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.navds-button--action:hover {
|
||||
background-color: var(--navds-color-action-hover);
|
||||
border-color: var(--navds-color-action-hover);
|
||||
}
|
||||
|
||||
.navds-button--danger:hover {
|
||||
background-color: var(--navds-color-danger-hover);
|
||||
border-color: var(--navds-color-danger-hover);
|
||||
}
|
||||
|
||||
.navds-button--action:active {
|
||||
background-color: var(--navds-color-action-active);
|
||||
}
|
||||
|
||||
.navds-button--danger:active {
|
||||
background-color: var(--navds-color-danger-active);
|
||||
}
|
||||
|
||||
.navds-button--action:focus,
|
||||
.navds-button--danger:focus {
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
/**************************
|
||||
* .navds-button:disabled *
|
||||
**************************/
|
||||
|
||||
.navds-button:disabled:disabled {
|
||||
background-color: var(--navds-color-disabled);
|
||||
color: var(--navds-color-text-inverse);
|
||||
cursor: not-allowed;
|
||||
border-width: 0;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
Loaded 100 of 739 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user