mirror of
https://github.com/navikt/aksel.git
synced 2026-10-13 01:02:02 +00:00
Compare commits
14
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 github-actions[bot]andgithub-actions[bot]
|
1871038837 | ||
|
Ken
|
5e79234eff | ||
|
github-actions[bot]andgithub-actions[bot]
|
b8bebace11 | ||
|
Ken
|
14379a02c3 | ||
|
github-actions[bot]andgithub-actions[bot]
|
d716ebbc40 | ||
|
Ken
|
f1c4c46ebb | ||
|
Ken
|
9d2cd9e7ff | ||
|
github-actions[bot]andgithub-actions[bot]
|
2fe5a0a0e2 | ||
|
Ken
|
db3846f5cd | ||
|
Ken
|
fa2ead912a | ||
|
Ken
|
11e9b9bef2 | ||
|
github-actions[bot]andgithub-actions[bot]
|
6f53b33e69 | ||
|
KenandJulian Nymark
|
166ee5feb3 | ||
|
AndreasDybdahl
|
c29d2aba1b |
No files matched your search
@@ -1,5 +1,15 @@
|
||||
# @navikt/aksel-icons
|
||||
|
||||
## 3.1.2
|
||||
|
||||
## 3.1.1
|
||||
|
||||
## 3.1.0
|
||||
|
||||
## 3.0.1
|
||||
|
||||
## 3.0.0
|
||||
|
||||
## 2.9.8
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/aksel-icons",
|
||||
"version": "2.9.8",
|
||||
"version": "3.1.2",
|
||||
"author": "Aksel | NAV",
|
||||
"homepage": "https://aksel.nav.no/ikoner",
|
||||
"repository": {
|
||||
|
||||
@@ -1,5 +1,40 @@
|
||||
# @navikt/aksel
|
||||
|
||||
## 3.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/ds-css@3.1.2
|
||||
|
||||
## 3.1.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/ds-css@3.1.1
|
||||
|
||||
## 3.1.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [[`9d2cd9e7f`](https://github.com/navikt/aksel/commit/9d2cd9e7fffb3cf6310c88229ee39ea85db19bca), [`f1c4c46eb`](https://github.com/navikt/aksel/commit/f1c4c46ebb0522561483f18e3b86b190cf9cc372)]:
|
||||
- @navikt/ds-css@3.1.0
|
||||
|
||||
## 3.0.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/ds-css@3.0.1
|
||||
|
||||
## 3.0.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [[`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f), [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f)]:
|
||||
- @navikt/ds-css@3.0.0
|
||||
|
||||
## 2.9.8
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/aksel",
|
||||
"version": "2.9.8",
|
||||
"version": "3.1.2",
|
||||
"description": "Aksel command line interface. Handles css-imports, codemods and more",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"license": "MIT",
|
||||
@@ -29,7 +29,7 @@
|
||||
},
|
||||
"homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
|
||||
"dependencies": {
|
||||
"@navikt/ds-css": "2.9.8",
|
||||
"@navikt/ds-css": "3.1.2",
|
||||
"axios": "1.3.6",
|
||||
"chalk": "4.1.0",
|
||||
"clipboardy": "^2.3.0",
|
||||
|
||||
@@ -1,5 +1,15 @@
|
||||
# @navikt/ds-codemod
|
||||
|
||||
## 3.1.2
|
||||
|
||||
## 3.1.1
|
||||
|
||||
## 3.1.0
|
||||
|
||||
## 3.0.1
|
||||
|
||||
## 3.0.0
|
||||
|
||||
## 2.9.8
|
||||
|
||||
## 2.9.7
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-codemod",
|
||||
"version": "2.9.8",
|
||||
"version": "3.1.2",
|
||||
"description": "Aksel codemods for NAVs designsystem",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -40,8 +40,8 @@
|
||||
"build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
|
||||
},
|
||||
"dependencies": {
|
||||
"@navikt/ds-icons": "^2.9.8",
|
||||
"@navikt/ds-react": "^2.9.8",
|
||||
"@navikt/ds-icons": "^3.1.2",
|
||||
"@navikt/ds-react": "^3.1.2",
|
||||
"clsx": "^1.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -1,5 +1,48 @@
|
||||
# @navikt/ds-css
|
||||
|
||||
## 3.1.2
|
||||
|
||||
## 3.1.1
|
||||
|
||||
## 3.1.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- [#1966](https://github.com/navikt/aksel/pull/1966) [`f1c4c46eb`](https://github.com/navikt/aksel/commit/f1c4c46ebb0522561483f18e3b86b190cf9cc372) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Alle komponenter bruker nå default `:focus-visible` for fokusmarkering.
|
||||
(Alle komponenter som bruker `:focus-visible` har også en fallback for `:focus`)
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#1967](https://github.com/navikt/aksel/pull/1967) [`9d2cd9e7f`](https://github.com/navikt/aksel/commit/9d2cd9e7fffb3cf6310c88229ee39ea85db19bca) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Oppdatert Label og Description spacing for skjemakomponenter
|
||||
|
||||
## 3.0.1
|
||||
|
||||
## 3.0.0
|
||||
|
||||
### Major Changes
|
||||
|
||||
- [#1964](https://github.com/navikt/aksel/pull/1964) [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - **Accordion**
|
||||
|
||||
- Accordion oppdatet til å ha chevron left-aligned.
|
||||
- Neutral-variant lagt til
|
||||
- Diverse nye size-options for heading og paddinger.
|
||||
- Deler av Accordion-CSS er refaktorert. Dette vil kunne brekke overskrevne stiler.
|
||||
|
||||
- [#1964](https://github.com/navikt/aksel/pull/1964) [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Aksels løsninger bruker nå `@navikt/aksel-icons`
|
||||
|
||||
**Sideeffects av ikonendringer**
|
||||
|
||||
- Komponenter som tidligere brukte Expand-ikon har fått oppdatert animasjon (table, readmore og accordion)
|
||||
- Alert bruker samme ikonstørrelse for alle størrelser
|
||||
- Chips har justert padding/ikonstørrelser
|
||||
- Datepicker hover-bug på knapper er fikset
|
||||
- Helptekst bruker nå et custom-ikon.
|
||||
- Select har fått justert padding rundt ikon
|
||||
- Switch bruker samme checkmark som checkbox, er nå avrundet
|
||||
- ReadMore har justert margin for alignment med ikon, fjernet content-animasjon
|
||||
- Tabs bruker default text-default nå
|
||||
- Stepper har endret hvordan den styler checkmark-ikon.
|
||||
|
||||
## 2.9.8
|
||||
|
||||
## 2.9.7
|
||||
|
||||
+130
-33
@@ -2,30 +2,78 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/*************************
|
||||
* Header *
|
||||
*************************/
|
||||
.navds-accordion__header {
|
||||
--__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
|
||||
--__ac-accordion-header-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent),
|
||||
inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
|
||||
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: var(--a-spacing-2);
|
||||
padding: 14px var(--a-spacing-3) var(--a-spacing-3);
|
||||
padding: var(--a-spacing-3);
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
background: var(--ac-accordion-header-bg, var(--a-surface-transparent));
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
border-bottom: 2px solid var(--ac-accordion-header-border, var(--a-border-divider));
|
||||
}
|
||||
|
||||
.navds-accordion__header:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
position: relative;
|
||||
box-shadow: var(--__ac-accordion-header-shadow);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.navds-accordion__header:hover {
|
||||
color: var(--ac-accordion-header-text-hover, var(--a-text-action-on-action-subtle));
|
||||
border-color: var(--ac-accordion-header-border-hover, var(--a-border-default));
|
||||
background: var(--ac-accordion-header-bg-hover, var(--a-surface-transparent));
|
||||
background-color: var(--ac-accordion-header-bg-hover, var(--a-surface-hover));
|
||||
text-decoration: underline;
|
||||
color: var(--ac-accordion-header-text-hover, inherit);
|
||||
}
|
||||
|
||||
.navds-accordion--small .navds-accordion__header {
|
||||
padding: var(--a-spacing-2) var(--a-spacing-3);
|
||||
}
|
||||
|
||||
.navds-accordion--medium .navds-accordion__header {
|
||||
padding: var(--a-spacing-3);
|
||||
}
|
||||
|
||||
.navds-accordion--large .navds-accordion__header {
|
||||
padding: var(--a-spacing-4) var(--a-spacing-3);
|
||||
}
|
||||
|
||||
.navds-accordion__item:last-child > :where(.navds-accordion__header) {
|
||||
box-shadow: var(--__ac-accordion-header-shadow), inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
|
||||
}
|
||||
|
||||
.navds-accordion__item:last-child:where(.navds-accordion__item--open) :where(.navds-accordion__header) {
|
||||
box-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent), inset 0 2px 0 0 var(--a-transparent),
|
||||
inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
|
||||
}
|
||||
|
||||
.navds-accordion__item:last-child:where(.navds-accordion__item--open) {
|
||||
box-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent), inset 0 2px 0 0 var(--a-transparent),
|
||||
inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
|
||||
}
|
||||
|
||||
.navds-accordion__item--open > :where(.navds-accordion__header) {
|
||||
box-shadow: var(--__ac-accordion-header-shadow);
|
||||
}
|
||||
|
||||
.navds-accordion__header:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
border-radius: var(--a-border-radius-large);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-accordion__header:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
border-radius: var(--a-border-radius-large);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-accordion__header-content {
|
||||
@@ -33,42 +81,91 @@
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.navds-accordion__item--open > .navds-accordion__header {
|
||||
background-color: var(--ac-accordion-header-bg-open, var(--ac-accordion-item-bg-open, var(--a-surface-action-subtle)));
|
||||
border-color: var(--ac-accordion-item-border-open, var(--a-surface-action-subtle));
|
||||
/*************************
|
||||
* Icon *
|
||||
*************************/
|
||||
.navds-accordion__icon-wrapper {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
border-radius: var(--a-border-radius-medium);
|
||||
height: var(--a-spacing-6);
|
||||
width: var(--a-spacing-6);
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.navds-accordion__item--open > :where(.navds-accordion__header:hover) {
|
||||
background-color: var(--ac-accordion-header-bg-open-hover, var(--a-surface-action-subtle));
|
||||
.navds-accordion__header:hover > .navds-accordion__icon-wrapper {
|
||||
background-color: var(--ac-accordion-header-icon-bg-hover, var(--a-surface-neutral-subtle-hover));
|
||||
}
|
||||
|
||||
.navds-accordion__content {
|
||||
padding: var(--a-spacing-3) var(--a-spacing-3) 18px;
|
||||
border-bottom: 2px solid var(--ac-accordion-content-border, var(--a-border-divider));
|
||||
}
|
||||
|
||||
.navds-accordion__item--open > .navds-accordion__header:hover + * .navds-accordion__content {
|
||||
border-color: var(--ac-accordion-content-border-open, var(--a-border-default));
|
||||
}
|
||||
|
||||
.navds-accordion__expand-icon {
|
||||
.navds-accordion__header-chevron {
|
||||
border-radius: var(--a-border-radius-medium);
|
||||
font-size: 1.5rem;
|
||||
height: 1.75rem;
|
||||
flex-shrink: 0;
|
||||
transition: transform 150ms ease-in-out;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.navds-accordion__item--open > .navds-accordion__header > .navds-accordion__expand-icon {
|
||||
transform: rotateZ(180deg);
|
||||
:where(.navds-accordion__header):hover > :where(.navds-accordion__icon-wrapper) > :where(.navds-accordion__header-chevron) {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.navds-accordion__expand-icon--filled {
|
||||
.navds-accordion__item--open
|
||||
> :where(.navds-accordion__header)
|
||||
> :where(.navds-accordion__icon-wrapper)
|
||||
> :where(.navds-accordion__header-chevron) {
|
||||
transform: translateY(0) rotate(-180deg);
|
||||
}
|
||||
|
||||
.navds-accordion__item--open
|
||||
> :where(.navds-accordion__header):hover
|
||||
> :where(.navds-accordion__icon-wrapper)
|
||||
> :where(.navds-accordion__header-chevron) {
|
||||
transform: translateY(-1px) rotate(-180deg);
|
||||
}
|
||||
|
||||
/*************************
|
||||
* Variant/Default *
|
||||
*************************/
|
||||
.navds-accordion__item--open {
|
||||
background-color: var(--ac-accordion-item-bg-open, var(--a-transparent));
|
||||
}
|
||||
|
||||
/*************************
|
||||
* Variant/Neutral *
|
||||
*************************/
|
||||
.navds-accordion__item--open.navds-accordion__item--neutral {
|
||||
background-color: var(--ac-accordion-neutral-item-bg-open, var(--a-surface-neutral-subtle));
|
||||
}
|
||||
|
||||
/*************************
|
||||
* Content *
|
||||
*************************/
|
||||
.navds-accordion__content {
|
||||
padding: 0 var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11);
|
||||
animation: fadeAccordionContent 250ms ease;
|
||||
}
|
||||
|
||||
.navds-accordion__content--closed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navds-accordion__header:hover > .navds-accordion__expand-icon.navds-accordion__expand-icon--filled {
|
||||
display: inherit;
|
||||
.navds-accordion__item--no-animation :where(.navds-accordion__content) {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.navds-accordion__header:hover > .navds-accordion__expand-icon {
|
||||
display: none;
|
||||
@keyframes fadeAccordionContent {
|
||||
0% {
|
||||
opacity: 0.25;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
40% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@@ -28,7 +28,6 @@
|
||||
}
|
||||
|
||||
.navds-alert--small > .navds-alert__icon {
|
||||
font-size: 1.25rem;
|
||||
height: var(--a-font-line-height-large);
|
||||
}
|
||||
|
||||
|
||||
+92
-18
@@ -32,9 +32,10 @@
|
||||
}
|
||||
|
||||
.navds-button--small {
|
||||
--__ac-button-padding: 0.375rem var(--a-spacing-3);
|
||||
--__ac-button-padding: var(--a-spacing-1) var(--a-spacing-3);
|
||||
|
||||
padding: var(--ac-button-padding-small, var(--__ac-button-padding));
|
||||
min-height: 2rem;
|
||||
}
|
||||
|
||||
.navds-button--xsmall {
|
||||
@@ -51,22 +52,29 @@
|
||||
}
|
||||
|
||||
.navds-button--small.navds-button--icon-only {
|
||||
--__ac-button-padding: 0.375rem;
|
||||
--__ac-button-padding: var(--a-spacing-1);
|
||||
|
||||
padding: var(--ac-button-padding-icon-only-small, var(--__ac-button-padding));
|
||||
}
|
||||
|
||||
.navds-button--xsmall.navds-button--icon-only {
|
||||
--__ac-button-padding: var(--a-spacing-1);
|
||||
--__ac-button-padding: var(--a-spacing-05);
|
||||
|
||||
padding: var(--ac-button-padding-icon-only-xsmall, var(--__ac-button-padding));
|
||||
}
|
||||
|
||||
.navds-button:focus {
|
||||
.navds-button:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-button:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-button__icon {
|
||||
--ac-button-icon-margin: -4px;
|
||||
|
||||
@@ -88,14 +96,12 @@
|
||||
|
||||
.navds-button--small .navds-button__icon {
|
||||
--ac-button-icon-margin: -2px;
|
||||
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.navds-button--xsmall .navds-button__icon {
|
||||
--ac-button-icon-margin: -2px;
|
||||
|
||||
font-size: 1rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
/*************************
|
||||
@@ -115,10 +121,16 @@
|
||||
background-color: var(--ac-button-primary-active-bg, var(--a-surface-action-active));
|
||||
}
|
||||
|
||||
.navds-button--primary:focus {
|
||||
.navds-button--primary:focus-visible {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-button--primary:focus {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-button--primary:hover:where(:disabled, .navds-button--disabled),
|
||||
.navds-button--primary:active:where(:disabled, .navds-button--disabled) {
|
||||
background-color: var(--ac-button-primary-bg, var(--a-surface-action));
|
||||
@@ -141,10 +153,16 @@
|
||||
background-color: var(--ac-button-primary-neutral-active-bg, var(--a-surface-neutral-active));
|
||||
}
|
||||
|
||||
.navds-button--primary-neutral:focus {
|
||||
.navds-button--primary-neutral:focus-visible {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-button--primary-neutral:focus {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-button--primary-neutral:hover:where(:disabled, .navds-button--disabled),
|
||||
.navds-button--primary-neutral:active:where(:disabled, .navds-button--disabled) {
|
||||
background-color: var(--ac-button-primary-neutral-bg, var(--a-surface-neutral));
|
||||
@@ -165,20 +183,32 @@
|
||||
background-color: var(--ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover));
|
||||
}
|
||||
|
||||
.navds-button--secondary:focus {
|
||||
.navds-button--secondary:focus-visible {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-button--secondary:focus {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-button--secondary:active {
|
||||
color: var(--ac-button-secondary-active-text, var(--a-text-on-action));
|
||||
background-color: var(--ac-button-secondary-active-bg, var(--a-surface-action-active));
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.navds-button--secondary:focus:active {
|
||||
.navds-button--secondary:focus-visible:active {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-button-secondary-active-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-button--secondary:focus:active {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-button-secondary-active-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-button--secondary:where(:disabled, .navds-button--disabled),
|
||||
.navds-button--secondary:hover:where(:disabled, .navds-button--disabled) {
|
||||
color: var(--ac-button-secondary-text, var(--a-text-action));
|
||||
@@ -200,22 +230,36 @@
|
||||
background-color: var(--ac-button-secondary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
|
||||
}
|
||||
|
||||
.navds-button--secondary-neutral:focus {
|
||||
.navds-button--secondary-neutral:focus-visible {
|
||||
color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
|
||||
box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-button--secondary-neutral:focus {
|
||||
color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
|
||||
box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-button--secondary-neutral:active {
|
||||
color: var(--ac-button-secondary-neutral-active-text, var(--a-text-on-neutral));
|
||||
background-color: var(--ac-button-secondary-neutral-active-bg, var(--a-surface-neutral-active));
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.navds-button--secondary-neutral:focus:active {
|
||||
.navds-button--secondary-neutral:focus-visible:active {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
|
||||
var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-button--secondary-neutral:focus:active {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
|
||||
var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-button--secondary-neutral:where(:disabled, .navds-button--disabled),
|
||||
.navds-button--secondary-neutral:hover:where(:disabled, .navds-button--disabled) {
|
||||
color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
|
||||
@@ -237,10 +281,16 @@
|
||||
background-color: var(--ac-button-tertiary-hover-bg, var(--a-surface-action-subtle-hover));
|
||||
}
|
||||
|
||||
.navds-button--tertiary:focus {
|
||||
.navds-button--tertiary:focus-visible {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-button--tertiary:focus {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-button--tertiary:active {
|
||||
color: var(--ac-button-tertiary-active-text, var(--a-text-on-action));
|
||||
background-color: var(--ac-button-tertiary-active-bg, var(--a-surface-action-active));
|
||||
@@ -251,10 +301,16 @@
|
||||
background-color: var(--ac-button-tertiary-active-hover-bg, var(--a-surface-action-active));
|
||||
}
|
||||
|
||||
.navds-button--tertiary:active:focus {
|
||||
.navds-button--tertiary:focus-visible:active {
|
||||
box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-button--tertiary:focus:active {
|
||||
box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-button--tertiary:where(:disabled, .navds-button--disabled),
|
||||
.navds-button--tertiary:hover:where(:disabled, .navds-button--disabled),
|
||||
.navds-button--tertiary:active:where(:disabled, .navds-button--disabled),
|
||||
@@ -277,10 +333,16 @@
|
||||
background-color: var(--ac-button-tertiary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
|
||||
}
|
||||
|
||||
.navds-button--tertiary-neutral:focus {
|
||||
.navds-button--tertiary-neutral:focus-visible {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-button--tertiary-neutral:focus {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-button--tertiary-neutral:active {
|
||||
color: var(--ac-button-tertiary-neutral-active-text, var(--a-text-on-neutral));
|
||||
background-color: var(--ac-button-tertiary-neutral-active-bg, var(--a-surface-neutral-active));
|
||||
@@ -291,10 +353,16 @@
|
||||
background-color: var(--ac-button-tertiary-neutral-active-hover-bg, var(--a-surface-neutral-active));
|
||||
}
|
||||
|
||||
.navds-button--tertiary-neutral:active:focus {
|
||||
.navds-button--tertiary-neutral:focus-visible:active {
|
||||
box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-button--tertiary-neutral:focus:active {
|
||||
box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-button--tertiary-neutral:where(:disabled, .navds-button--disabled),
|
||||
.navds-button--tertiary-neutral:hover:where(:disabled, .navds-button--disabled),
|
||||
.navds-button--tertiary-neutral:active:where(:disabled, .navds-button--disabled),
|
||||
@@ -321,10 +389,16 @@
|
||||
background-color: var(--ac-button-danger-active-bg, var(--a-surface-danger-active));
|
||||
}
|
||||
|
||||
.navds-button--danger:focus {
|
||||
.navds-button--danger:focus-visible {
|
||||
box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-button--danger:focus {
|
||||
box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-button--danger:active:where(:disabled, .navds-button--disabled),
|
||||
.navds-button--danger:hover:where(:disabled, .navds-button--disabled) {
|
||||
background-color: var(--ac-button-danger-bg, var(--a-surface-danger));
|
||||
|
||||
@@ -56,11 +56,6 @@
|
||||
gap: var(--a-spacing-2);
|
||||
}
|
||||
|
||||
.navds-chat__bubble:focus {
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.navds-chat--right .navds-chat__bubble {
|
||||
border-radius: var(--a-border-radius-xlarge);
|
||||
border-bottom-right-radius: 2px;
|
||||
|
||||
@@ -63,6 +63,22 @@
|
||||
box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-chips__toggle:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
|
||||
}
|
||||
|
||||
.navds-chips__toggle[aria-pressed="true"]:focus,
|
||||
.navds-chips__toggle:active:focus {
|
||||
box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
|
||||
}
|
||||
}
|
||||
|
||||
.navds-chips__removable {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.navds-chips__removable--action {
|
||||
background-color: var(--ac-chip-removable-action-bg, var(--a-surface-action-selected));
|
||||
color: var(--ac-chip-removable-action-text, var(--a-text-on-action));
|
||||
@@ -77,22 +93,23 @@
|
||||
.navds-chips__removable-icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
font-size: 1.25rem;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: var(--a-border-radius-full);
|
||||
}
|
||||
|
||||
.navds-chips__toggle-icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: var(--a-border-radius-full);
|
||||
}
|
||||
|
||||
.navds-chips--small .navds-chips__toggle-icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.navds-chips--small .navds-chips__removable-icon {
|
||||
@@ -101,7 +118,7 @@
|
||||
}
|
||||
|
||||
.navds-chips--small .navds-chips__removable-icon > svg {
|
||||
width: 0.75rem;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.navds-chips__removable--action:focus-visible {
|
||||
@@ -112,6 +129,18 @@
|
||||
box-shadow: 0 0 0 2px var(--a-border-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-chips__removable--action:focus {
|
||||
outline: none;
|
||||
box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--a-border-focus);
|
||||
}
|
||||
|
||||
.navds-chips__removable--neutral:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px var(--a-border-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-chips__removable--action:hover {
|
||||
background-color: var(--ac-chip-removable-action-hover-bg, var(--a-surface-action-selected-hover));
|
||||
}
|
||||
@@ -126,7 +155,7 @@
|
||||
}
|
||||
|
||||
.navds-chips--icon-right {
|
||||
padding-right: var(--a-spacing-1);
|
||||
padding-right: 0.375rem;
|
||||
}
|
||||
|
||||
.navds-chips--small .navds-chips--icon-right {
|
||||
|
||||
@@ -73,16 +73,30 @@
|
||||
border-radius: var(--a-border-radius-xlarge);
|
||||
}
|
||||
|
||||
.navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus,
|
||||
.navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus {
|
||||
.navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus-visible,
|
||||
.navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus-visible {
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus,
|
||||
.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus {
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus,
|
||||
.navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus {
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus-visible,
|
||||
.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus-visible {
|
||||
box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus,
|
||||
.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus {
|
||||
box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
/* Monthpicker */
|
||||
.navds-date__month-button {
|
||||
all: unset;
|
||||
@@ -94,12 +108,20 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navds-date__month-button:focus,
|
||||
.navds-monthpicker__caption-button:focus {
|
||||
.navds-date__month-button:focus-visible,
|
||||
.navds-monthpicker__caption-button:focus-visible {
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-date__month-button:focus,
|
||||
.navds-monthpicker__caption-button:focus {
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.navds-date__year-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -126,11 +148,17 @@
|
||||
}
|
||||
|
||||
/* Focus layering */
|
||||
.navds-date__field-input:focus,
|
||||
.navds-date__field-input:focus-visible,
|
||||
.navds-date__field-button {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-date__field-input:focus {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.navds-date .rdp-day_selected,
|
||||
.navds-monthpicker__month--selected {
|
||||
color: var(--ac-date-selected-text, var(--a-text-on-action));
|
||||
@@ -164,7 +192,8 @@
|
||||
}
|
||||
|
||||
.navds-date__caption-button,
|
||||
.navds-date__caption-button:disabled {
|
||||
.navds-date__caption-button:disabled,
|
||||
.navds-date__caption-button:disabled:hover {
|
||||
color: var(--ac-date-caption-text, var(--a-text-default));
|
||||
}
|
||||
|
||||
@@ -182,10 +211,16 @@
|
||||
box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger));
|
||||
}
|
||||
|
||||
.navds-date__field--error .navds-date__field-input:focus:not(:hover):not(:disabled) {
|
||||
.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover):not(:disabled) {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-date__field--error .navds-date__field-input:focus:not(:hover):not(:disabled) {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-date__field-button {
|
||||
position: absolute;
|
||||
right: var(--a-spacing-2);
|
||||
|
||||
@@ -123,12 +123,16 @@
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.navds-expansioncard__header-button:focus {
|
||||
.navds-expansioncard__header-button:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-expansioncard__header-button:focus-visible {
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-expansioncard__header-button:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-expansioncard--open :where(.navds-expansioncard__header-button):hover :where(.navds-expansioncard__header-chevron) {
|
||||
@@ -173,13 +177,13 @@
|
||||
animation: fadeExpansionCard 250ms ease;
|
||||
}
|
||||
|
||||
.navds-expansioncard--no-fade :where(.navds-expansioncard__content-inner) {
|
||||
.navds-expansioncard--no-animation :where(.navds-expansioncard__content-inner) {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
@keyframes fadeExpansionCard {
|
||||
0% {
|
||||
opacity: 0;
|
||||
opacity: 0.25;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
|
||||
@@ -8,11 +8,18 @@
|
||||
padding: var(--a-spacing-3);
|
||||
}
|
||||
|
||||
.navds-error-summary:focus {
|
||||
.navds-error-summary:focus-visible {
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-error-summary:focus {
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navds-error-summary__list {
|
||||
margin: var(--a-spacing-3) 0;
|
||||
display: flex;
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
}
|
||||
|
||||
.navds-fieldset > .navds-fieldset__description:not(:empty) {
|
||||
margin-top: var(--a-spacing-1);
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
/* Applied when hideLegend is applied to fieldset */
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
}
|
||||
|
||||
.navds-form-field__description {
|
||||
margin-top: -4px;
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
.navds-form-field .navds-error-message,
|
||||
@@ -27,3 +27,7 @@
|
||||
.navds-form-field__error:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navds-form-field__subdescription {
|
||||
color: var(--ac-form-subdescription, var(--a-text-subtle));
|
||||
}
|
||||
@@ -43,7 +43,7 @@
|
||||
.navds-radio__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--a-spacing-1);
|
||||
gap: 0.125rem;
|
||||
}
|
||||
|
||||
.navds-checkbox--small > .navds-checkbox__input,
|
||||
@@ -65,16 +65,30 @@
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.navds-checkbox__input:focus + .navds-checkbox__label::before,
|
||||
.navds-radio__input:focus + .navds-radio__label::before {
|
||||
.navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
|
||||
.navds-radio__input:focus-visible + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
|
||||
.navds-radio__input:hover:focus + .navds-radio__label::before {
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-checkbox__input:focus + .navds-checkbox__label::before,
|
||||
.navds-radio__input:focus + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-checkbox__input:hover:focus-visible + .navds-checkbox__label::before,
|
||||
.navds-radio__input:hover:focus-visible + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
|
||||
.navds-radio__input:hover:focus + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
|
||||
box-shadow: none;
|
||||
background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
|
||||
@@ -109,32 +123,54 @@
|
||||
background-position: 4px center;
|
||||
}
|
||||
|
||||
.navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
|
||||
.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
|
||||
.navds-checkbox__input:indeterminate:focus-visible + .navds-checkbox__label::before,
|
||||
.navds-checkbox__input:checked:focus-visible + .navds-checkbox__label::before {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
|
||||
.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-radio__input:checked + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
|
||||
inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default));
|
||||
background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
|
||||
}
|
||||
|
||||
.navds-radio__input:checked:focus + .navds-radio__label::before {
|
||||
.navds-radio__input:checked:focus-visible + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
|
||||
inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-radio__input:checked:focus + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
|
||||
inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
|
||||
.navds-radio__input:hover:not(:disabled) + .navds-radio__label {
|
||||
color: var(--ac-radio-checkbox-action, var(--a-surface-action));
|
||||
}
|
||||
|
||||
.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
|
||||
.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
|
||||
.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible)
|
||||
+ .navds-checkbox__label::before,
|
||||
.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
|
||||
.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
|
||||
}
|
||||
}
|
||||
|
||||
.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate) + .navds-checkbox__label::before,
|
||||
.navds-radio__input:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
|
||||
background-color: var(--ac-radio-checkbox-action-hover-bg, var(--a-surface-action-subtle));
|
||||
@@ -148,28 +184,55 @@
|
||||
}
|
||||
|
||||
.navds-checkbox--error
|
||||
> .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
|
||||
> .navds-checkbox__input:focus-visible:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
|
||||
+ .navds-checkbox__label::before,
|
||||
.navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
|
||||
.navds-radio--error > .navds-radio__input:focus-visible:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-checkbox--error
|
||||
> .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
|
||||
+ .navds-checkbox__label::before,
|
||||
.navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-checkbox--error
|
||||
> .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
|
||||
> .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible)
|
||||
+ .navds-checkbox__label::before,
|
||||
.navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
|
||||
.navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
|
||||
background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
|
||||
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
|
||||
}
|
||||
|
||||
.navds-checkbox--error
|
||||
> .navds-checkbox__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
|
||||
> .navds-checkbox__input:focus-visible:hover:not(:disabled):not(:checked):not(:indeterminate)
|
||||
+ .navds-checkbox__label::before,
|
||||
.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
|
||||
.navds-radio--error > .navds-radio__input:focus-visible:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
|
||||
background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
|
||||
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-checkbox--error
|
||||
> .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
|
||||
+ .navds-checkbox__label::before,
|
||||
.navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
|
||||
background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
|
||||
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
|
||||
}
|
||||
|
||||
.navds-checkbox--error
|
||||
> .navds-checkbox__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
|
||||
+ .navds-checkbox__label::before,
|
||||
.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
|
||||
background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
|
||||
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-checkbox--disabled,
|
||||
.navds-radio--disabled {
|
||||
opacity: 0.3;
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1rem;
|
||||
font-size: 1.25rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@@ -86,11 +86,18 @@
|
||||
color: var(--ac-search-clear-icon-hover, var(--a-text-action));
|
||||
}
|
||||
|
||||
.navds-search__button-clear:focus {
|
||||
.navds-search__button-clear:focus-visible {
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-search__button-clear:focus {
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navds-search__button-search {
|
||||
flex-shrink: 0;
|
||||
min-width: 64px;
|
||||
@@ -126,31 +133,56 @@
|
||||
z-index: auto;
|
||||
}
|
||||
|
||||
.navds-search__button-search.navds-button--secondary:focus {
|
||||
.navds-search__button-search.navds-button--secondary:focus-visible {
|
||||
box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--a-border-default)) inset, var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-search__button-search.navds-button--secondary:focus:hover {
|
||||
.navds-search__button-search.navds-button--secondary:focus-visible:hover {
|
||||
box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--a-border-action)) inset, var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-search__button-search.navds-button--secondary:focus:active {
|
||||
.navds-search__button-search.navds-button--secondary:focus-visible:active {
|
||||
box-shadow: 0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset, var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-search__button-search.navds-button--secondary:focus {
|
||||
box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--a-border-default)) inset, var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-search__button-search.navds-button--secondary:focus:hover {
|
||||
box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--a-border-action)) inset, var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-search__button-search.navds-button--secondary:focus:active {
|
||||
box-shadow: 0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset, var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
/* Error-handling */
|
||||
.navds-search--error .navds-search__input:not(:hover):not(:disabled) {
|
||||
border-color: var(--ac-search-error-border, var(--a-border-danger));
|
||||
box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger));
|
||||
}
|
||||
|
||||
.navds-search--error .navds-search__input:focus:not(:hover):not(:disabled) {
|
||||
.navds-search--error .navds-search__input:focus-visible:not(:hover):not(:disabled) {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger)), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
/* Focus layering */
|
||||
.navds-search__input:focus,
|
||||
.navds-search__input:focus-visible,
|
||||
.navds-search__button-clear,
|
||||
.navds-search__button-search:focus {
|
||||
.navds-search__button-search:focus-visible {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-search--error .navds-search__input:focus:not(:hover):not(:disabled) {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger)), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-search__input:focus,
|
||||
.navds-search__button-search:focus {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
@@ -17,11 +17,18 @@
|
||||
border-color: var(--ac-select-hover-bg, var(--a-border-action));
|
||||
}
|
||||
|
||||
.navds-select__input:focus {
|
||||
.navds-select__input:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-select__input:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-select__container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@@ -31,8 +38,8 @@
|
||||
|
||||
.navds-select__chevron {
|
||||
position: absolute;
|
||||
font-size: 1rem;
|
||||
right: 0.5rem;
|
||||
font-size: 1.5rem;
|
||||
right: var(--a-spacing-2);
|
||||
pointer-events: none;
|
||||
align-self: center;
|
||||
}
|
||||
@@ -42,6 +49,10 @@
|
||||
padding: 0 2rem 0 0.25rem;
|
||||
}
|
||||
|
||||
.navds-form-field--small .navds-select__chevron {
|
||||
right: 0.375rem;
|
||||
}
|
||||
|
||||
/**
|
||||
Error handling
|
||||
*/
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
.navds-switch__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--a-spacing-1);
|
||||
gap: 0.125rem;
|
||||
padding: 0.75rem 0 0.75rem 3.25rem;
|
||||
}
|
||||
|
||||
@@ -76,7 +76,7 @@
|
||||
position: absolute;
|
||||
top: var(--a-spacing-3);
|
||||
left: 0;
|
||||
border-radius: var(--a-border-radius-medium);
|
||||
border-radius: var(--a-border-radius-full);
|
||||
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
@@ -110,15 +110,21 @@
|
||||
background-color: var(--ac-switch-checked-bg, var(--a-border-success));
|
||||
}
|
||||
|
||||
.navds-switch__input:focus ~ .navds-switch__track {
|
||||
.navds-switch__input:focus-visible ~ .navds-switch__track {
|
||||
box-shadow: 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-switch__input:focus ~ .navds-switch__track {
|
||||
box-shadow: 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
/* Thumb */
|
||||
.navds-switch__thumb {
|
||||
background-color: var(--ac-switch-thumb-bg, var(--a-surface-default));
|
||||
color: var(--ac-switch-thumb-icon, var(--a-icon-subtle));
|
||||
border-radius: var(--a-border-radius-small);
|
||||
border-radius: var(--a-border-radius-full);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
|
||||
@@ -35,11 +35,18 @@
|
||||
border-color: var(--ac-textfield-hover-border, var(--a-border-action));
|
||||
}
|
||||
|
||||
.navds-text-field__input:focus {
|
||||
.navds-text-field__input:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-text-field__input:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Error handling
|
||||
*/
|
||||
@@ -48,10 +55,16 @@
|
||||
box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--a-border-danger));
|
||||
}
|
||||
|
||||
.navds-text-field--error > .navds-text-field__input:focus:not(:hover):not(:disabled) {
|
||||
.navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover):not(:disabled) {
|
||||
box-shadow: 0 0 0 1px var(--a-border-danger), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-text-field--error > .navds-text-field__input:focus:not(:hover):not(:disabled) {
|
||||
box-shadow: 0 0 0 1px var(--a-border-danger), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
/* Disabled handling */
|
||||
.navds-text-field__input:disabled {
|
||||
background-color: var(--ac-textfield-bg, var(--a-surface-default));
|
||||
|
||||
@@ -38,11 +38,18 @@
|
||||
border-color: var(--ac-textarea-hover-border, var(--a-border-action));
|
||||
}
|
||||
|
||||
.navds-textarea__input:focus {
|
||||
.navds-textarea__input:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-textarea__input:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-form-field--small .navds-textarea__input {
|
||||
padding: 6px;
|
||||
}
|
||||
@@ -73,11 +80,18 @@
|
||||
/**
|
||||
Error handling
|
||||
*/
|
||||
.navds-textarea--error .navds-textarea__input:not(:hover):not(:focus):not(:disabled) {
|
||||
.navds-textarea--error .navds-textarea__input:not(:hover):not(:focus-visible):not(:disabled) {
|
||||
box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--a-border-danger));
|
||||
border-color: var(--ac-textarea-error-border, var(--a-border-danger));
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-textarea--error .navds-textarea__input:not(:hover):not(:focus):not(:disabled) {
|
||||
box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--a-border-danger));
|
||||
border-color: var(--ac-textarea-error-border, var(--a-border-danger));
|
||||
}
|
||||
}
|
||||
|
||||
.navds-textarea__input:disabled {
|
||||
background-color: var(--ac-textarea-bg, var(--a-surface-default));
|
||||
border-color: var(--ac-textarea-border, var(--a-border-default));
|
||||
|
||||
@@ -12,11 +12,17 @@
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.navds-help-text__button:focus {
|
||||
outline: none;
|
||||
.navds-help-text__button:focus-visible {
|
||||
box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-help-text__button:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-help-text__icon {
|
||||
border-radius: var(--a-border-radius-full);
|
||||
}
|
||||
@@ -36,10 +42,20 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navds-help-text__button:where(:hover, :focus, [aria-expanded="true"]) > .navds-help-text__icon {
|
||||
.navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navds-help-text__button:where(:hover, :focus, [aria-expanded="true"]) > .navds-help-text__icon--filled {
|
||||
.navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon--filled {
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-help-text__button:where(:focus) > .navds-help-text__icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navds-help-text__button:where(:focus) > .navds-help-text__icon--filled {
|
||||
display: inherit;
|
||||
}
|
||||
}
|
||||
@@ -17,11 +17,18 @@
|
||||
border-color: var(--ac-link-panel-hover-border, var(--a-border-action));
|
||||
}
|
||||
|
||||
.navds-link-panel:focus {
|
||||
.navds-link-panel:focus-visible {
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-link-panel:focus {
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navds-link-panel__chevron {
|
||||
flex-shrink: 0;
|
||||
font-size: 1.5rem;
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navds-link:focus {
|
||||
.navds-link:focus-visible {
|
||||
outline: none;
|
||||
color: var(--ac-link-focus-text, var(--a-text-on-action));
|
||||
text-decoration: none;
|
||||
@@ -23,6 +23,16 @@
|
||||
box-shadow: 0 0 0 2px var(--ac-link-focus-border, var(--a-border-focus));
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-link:focus {
|
||||
outline: none;
|
||||
color: var(--ac-link-focus-text, var(--a-text-on-action));
|
||||
text-decoration: none;
|
||||
background-color: var(--ac-link-focus-bg, var(--a-border-focus));
|
||||
box-shadow: 0 0 0 2px var(--ac-link-focus-border, var(--a-border-focus));
|
||||
}
|
||||
}
|
||||
|
||||
.navds-link:active {
|
||||
outline: none;
|
||||
color: var(--ac-link-active-text, var(--a-text-on-action));
|
||||
|
||||
@@ -15,12 +15,20 @@
|
||||
padding: var(--a-spacing-4);
|
||||
}
|
||||
|
||||
.navds-modal:focus,
|
||||
.navds-modal:focus-visible,
|
||||
.navds-modal--focus {
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-modal:focus,
|
||||
.navds-modal--focus {
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navds-modal__overlay {
|
||||
position: fixed;
|
||||
z-index: var(--a-z-index-modal);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-css",
|
||||
"version": "2.9.8",
|
||||
"version": "3.1.2",
|
||||
"description": "CSS for NAV Designsystem",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"keywords": [
|
||||
@@ -27,7 +27,7 @@
|
||||
"css:get-version": "node config/get-version.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-tokens": "^2.9.8",
|
||||
"@navikt/ds-tokens": "^3.1.2",
|
||||
"cssnano": "6.0.0",
|
||||
"fast-glob": "3.2.11",
|
||||
"lodash": "4.17.21",
|
||||
|
||||
@@ -35,10 +35,16 @@
|
||||
color: var(--ac-pagination-selected-text, var(--a-text-on-action));
|
||||
}
|
||||
|
||||
.navds-pagination__item[aria-current="true"]:focus {
|
||||
.navds-pagination__item[aria-current="true"]:focus-visible {
|
||||
box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-pagination__item[aria-current="true"]:focus {
|
||||
box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-pagination__prev-next {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -15,11 +15,18 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navds-popover:focus {
|
||||
.navds-popover:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-popover:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-popover__arrow {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
|
||||
@@ -24,40 +24,51 @@
|
||||
background-color: var(--ac-read-more-active-bg, var(--a-surface-active));
|
||||
}
|
||||
|
||||
.navds-read-more__button:focus {
|
||||
.navds-read-more__button:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-read-more__button:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-read-more__content {
|
||||
margin-top: var(--a-spacing-1);
|
||||
border-left: 2px solid var(--ac-read-more-line, var(--a-border-divider));
|
||||
margin-left: 13px;
|
||||
padding-left: 13px;
|
||||
}
|
||||
|
||||
.navds-read-more--small .navds-read-more__content {
|
||||
margin-left: 11px;
|
||||
padding-left: 11px;
|
||||
}
|
||||
|
||||
.navds-read-more__content--closed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navds-read-more__expand-icon {
|
||||
font-size: 1.25rem;
|
||||
height: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navds-read-more--small .navds-read-more__expand-icon {
|
||||
height: 1.25rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.navds-read-more__button:hover > .navds-read-more__expand-icon {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.navds-read-more--open > .navds-read-more__button > .navds-read-more__expand-icon {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
.navds-read-more__expand-icon--filled {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navds-read-more__button:hover > .navds-read-more__expand-icon.navds-read-more__expand-icon--filled {
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.navds-read-more__button:hover > .navds-read-more__expand-icon {
|
||||
display: none;
|
||||
.navds-read-more--open > .navds-read-more__button:hover > .navds-read-more__expand-icon {
|
||||
transform: translateY(-1px) rotate(-180deg);
|
||||
}
|
||||
@@ -80,12 +80,20 @@ button.navds-stepper__step {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
:where(.navds-stepper__step):focus {
|
||||
:where(.navds-stepper__step):focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-stepper__step:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
isolation: isolate;
|
||||
}
|
||||
}
|
||||
|
||||
.navds-stepper__circle {
|
||||
grid-column: circle;
|
||||
display: inline-grid;
|
||||
@@ -102,6 +110,8 @@ button.navds-stepper__step {
|
||||
border: none;
|
||||
background: none;
|
||||
font-size: 28px;
|
||||
color: var(--a-text-on-action);
|
||||
background-color: var(--ac-stepper-text, var(--a-surface-action));
|
||||
}
|
||||
|
||||
.navds-stepper__content {
|
||||
@@ -189,6 +199,11 @@ button.navds-stepper__step {
|
||||
background-color: var(--ac-stepper-hover-bg, var(--a-surface-action-subtle-hover));
|
||||
}
|
||||
|
||||
:where(.navds-stepper__step:not(.navds-stepper__step--active):hover) .navds-stepper__circle--success {
|
||||
color: var(--ac-stepper-hover-bg, var(--a-surface-action-subtle-hover));
|
||||
background-color: var(--ac-stepper-text, var(--a-surface-action));
|
||||
}
|
||||
|
||||
/* Non-interactive */
|
||||
:where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__content {
|
||||
color: var(--ac-stepper-non-interactive-active, var(--a-text-default));
|
||||
@@ -217,6 +232,26 @@ button.navds-stepper__step {
|
||||
color: var(--ac-stepper-active-completed, var(--a-text-action-selected));
|
||||
}
|
||||
|
||||
:where(.navds-stepper__step--completed.navds-stepper__step--active) .navds-stepper__circle--success {
|
||||
color: var(--a-text-on-action);
|
||||
background-color: var(--ac-stepper-active-completed, var(--a-surface-action-selected));
|
||||
}
|
||||
|
||||
:where(.navds-stepper__step--non-interactive, .navds-stepper__step--non-interactive:hover) .navds-stepper__circle--success {
|
||||
color: var(--a-text-on-inverted);
|
||||
background-color: var(--ac-stepper-non-interactive-completed-bg, var(--a-surface-neutral));
|
||||
}
|
||||
|
||||
:where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__circle--success {
|
||||
color: var(--a-text-on-inverted);
|
||||
background-color: var(--ac-stepper-non-interactive-active-completed, var(--a-surface-inverted));
|
||||
}
|
||||
|
||||
:where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive) .navds-stepper__circle {
|
||||
color: var(--ac-stepper-non-interactive-active-completed, var(--a-text-default));
|
||||
}
|
||||
|
||||
:where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive)
|
||||
.navds-stepper__circle--success {
|
||||
color: var(--ac-stepper-non-interactive-active-completed, var(--a-text-on-inverted));
|
||||
}
|
||||
@@ -119,11 +119,18 @@
|
||||
background-color: var(--ac-table-sort-button-hover-bg, var(--a-bg-subtle));
|
||||
}
|
||||
|
||||
.navds-table__sort-button:focus {
|
||||
.navds-table__sort-button:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: inset 0 0 0 2px var(--a-border-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-table__sort-button:focus {
|
||||
outline: none;
|
||||
box-shadow: inset 0 0 0 2px var(--a-border-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-table__header-cell[aria-sort="ascending"] .navds-table__sort-button,
|
||||
.navds-table__header-cell[aria-sort="descending"] .navds-table__sort-button {
|
||||
background-color: var(--ac-table-sort-button-sorted-bg, var(--a-surface-selected));
|
||||
@@ -181,10 +188,16 @@
|
||||
padding: var(--a-spacing-2);
|
||||
}
|
||||
|
||||
.navds-table__toggle-expand-button:focus {
|
||||
.navds-table__toggle-expand-button:focus-visible {
|
||||
box-shadow: inset var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-table__toggle-expand-button:focus {
|
||||
box-shadow: inset var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-table__expandable-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
@@ -193,19 +206,18 @@
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.navds-table__toggle-expand-button:hover .navds-table__expandable-icon,
|
||||
.navds-table__expandable-icon--filled {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navds-table__toggle-expand-button:hover .navds-table__expandable-icon--filled {
|
||||
display: block;
|
||||
.navds-table__toggle-expand-button:hover .navds-table__expandable-icon {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.navds-table__toggle-expand-cell--open .navds-table__expandable-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.navds-table__toggle-expand-cell--open .navds-table__toggle-expand-button:hover .navds-table__expandable-icon {
|
||||
transform: translateY(-1px) rotate(180deg);
|
||||
}
|
||||
|
||||
.navds-table__expanded-row-cell {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
align-items: center;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--ac-tabs-text, var(--a-text-subtle));
|
||||
color: var(--ac-tabs-text, var(--a-text-default));
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -62,12 +62,20 @@
|
||||
color: var(--ac-tabs-selected-text, var(--a-text-default));
|
||||
}
|
||||
|
||||
.navds-tabs__tab:focus {
|
||||
.navds-tabs__tab:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: inset var(--a-shadow-focus);
|
||||
color: var(--ac-tabs-focus-text, var(--a-text-default));
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-tabs__tab:focus {
|
||||
outline: none;
|
||||
box-shadow: inset var(--a-shadow-focus);
|
||||
color: var(--ac-tabs-focus-text, var(--a-text-default));
|
||||
}
|
||||
}
|
||||
|
||||
.navds-tabs__tab-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -112,3 +120,10 @@
|
||||
outline: none;
|
||||
box-shadow: inset 0 0 0 2px var(--a-border-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-tabs__tabpanel:focus {
|
||||
outline: none;
|
||||
box-shadow: inset 0 0 0 2px var(--a-border-focus);
|
||||
}
|
||||
}
|
||||
@@ -49,20 +49,40 @@
|
||||
color: var(--ac-toggle-group-button-neutral-hover-text, var(--a-text-default));
|
||||
}
|
||||
|
||||
.navds-toggle-group__button:focus {
|
||||
.navds-toggle-group__button:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
|
||||
}
|
||||
|
||||
.navds-toggle-group__button:focus:hover[aria-pressed="false"] {
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-toggle-group__button:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
|
||||
box-shadow: 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)), 0 0 0 4px var(--a-border-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-toggle-group__button:focus:hover[aria-pressed="false"] {
|
||||
box-shadow: 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)), 0 0 0 4px var(--a-border-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-toggle-group--neutral > .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
|
||||
box-shadow: 0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
|
||||
0 0 0 4px var(--a-border-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-toggle-group--neutral > .navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
|
||||
box-shadow: 0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
|
||||
0 0 0 4px var(--a-border-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-toggle-group__button-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -14,26 +14,22 @@
|
||||
"--ac-alert-icon-success-color": "--a-icon-success"
|
||||
},
|
||||
"accordion": {
|
||||
"--ac-accordion-header-bg": "--ac-surface-transparent",
|
||||
"--ac-accordion-header-bg-hover": "--ac-surface-transparent",
|
||||
"--ac-accordion-header-bg": "--a-surface-transparent",
|
||||
"--ac-accordion-header-bg-hover": "--a-surface-hover",
|
||||
"--ac-accordion-header-text-hover": "inherit",
|
||||
"--ac-accordion-header-border": "--a-border-divider",
|
||||
"--ac-accordion-header-text-hover": "--a-text-action-on-action-subtle",
|
||||
"--ac-accordion-header-border-hover": "--a-border-default",
|
||||
"--ac-accordion-item-bg-open": "--a-surface-action-subtle",
|
||||
"--ac-accordion-header-bg-open": "--ac-accordion-item-bg-open",
|
||||
"--ac-accordion-header-bg-open-hover": "--a-surface-action-subtle",
|
||||
"--ac-accordion-item-border-open": "--a-surface-action-subtle",
|
||||
"--ac-accordion-content-border": "--a-border-divider",
|
||||
"--ac-accordion-content-border-open": "--a-border-default"
|
||||
"--ac-accordion-neutral-item-bg-open": "--a-surface-neutral-subtle",
|
||||
"--ac-accordion-header-icon-bg-hover": "--a-surface-neutral-subtle-hover"
|
||||
},
|
||||
"button": {
|
||||
"--ac-button-border-radius": "--a-border-radius-medium",
|
||||
"--ac-button-padding": "var(--a-spacing-3) var(--a-spacing-5)",
|
||||
"--ac-button-padding-small": "0.375rem var(--a-spacing-3)",
|
||||
"--ac-button-padding-xsmall": "var(--a-spacing-05) var(--a-spacing-2)",
|
||||
"--ac-button-padding-icon-only": "var(--a-spacing-3)",
|
||||
"--ac-button-padding-icon-only-small": "0.375rem",
|
||||
"--ac-button-padding-icon-only-xsmall": "var(--a-spacing-1)",
|
||||
"--ac-button-padding": "--a-spacing-3 --a-spacing-5",
|
||||
"--ac-button-padding-small": "--a-spacing-1 --a-spacing-3",
|
||||
"--ac-button-padding-xsmall": "--a-spacing-05 --a-spacing-2",
|
||||
"--ac-button-padding-icon-only": "--a-spacing-3",
|
||||
"--ac-button-padding-icon-only-small": "--a-spacing-1",
|
||||
"--ac-button-padding-icon-only-xsmall": "--a-spacing-05",
|
||||
"--ac-button-primary-bg": "--a-surface-action",
|
||||
"--ac-button-primary-text": "--a-text-on-action",
|
||||
"--ac-button-primary-hover-bg": "--a-surface-action-hover",
|
||||
@@ -204,8 +200,9 @@
|
||||
"--ac-stepper-active-border": "--a-border-action-selected",
|
||||
"--ac-stepper-active-text": "--a-text-on-action",
|
||||
"--ac-stepper-hover-bg": "--a-surface-action-subtle-hover",
|
||||
"--ac-stepper-non-interactive-active": "--a-text-default",
|
||||
"--ac-stepper-non-interactive-completed-bg": "--a-surface-subtle",
|
||||
"--ac-stepper-non-interactive-line-completed": "--a-border-strong",
|
||||
"--ac-stepper-non-interactive-active": "--a-text-default",
|
||||
"--ac-stepper-non-interactive-active-bg": "--a-surface-inverted",
|
||||
"--ac-stepper-non-interactive-active-border": "--a-surface-inverted",
|
||||
"--ac-stepper-non-interactive-active-text": "--a-text-on-inverted",
|
||||
@@ -226,7 +223,7 @@
|
||||
},
|
||||
"tabs": {
|
||||
"--ac-tabs-border": "--a-border-divider",
|
||||
"--ac-tabs-text": "--a-text-subtle",
|
||||
"--ac-tabs-text": "--a-text-default",
|
||||
"--ac-tabs-hover-border": "--a-border-subtle-hover",
|
||||
"--ac-tabs-selected-border": "--a-border-action",
|
||||
"--ac-tabs-selected-text": "--a-text-default",
|
||||
|
||||
@@ -1,5 +1,71 @@
|
||||
# @navikt/ds-react
|
||||
|
||||
## 3.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/aksel-icons@3.1.2
|
||||
|
||||
## 3.1.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/aksel-icons@3.1.1
|
||||
|
||||
## 3.1.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#1967](https://github.com/navikt/aksel/pull/1967) [`9d2cd9e7f`](https://github.com/navikt/aksel/commit/9d2cd9e7fffb3cf6310c88229ee39ea85db19bca) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Oppdatert Label og Description spacing for skjemakomponenter
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/aksel-icons@3.1.0
|
||||
|
||||
## 3.0.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [`fa2ead912`](https://github.com/navikt/aksel/commit/fa2ead912a4db15d1fa7e2c3efccbe69a64dc9a7) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :fire: Fjernet ds-icons fra dependencies
|
||||
|
||||
- [`db3846f5c`](https://github.com/navikt/aksel/commit/db3846f5cd483ad0ca24bc5938cfcdb64260f89d) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset default headingSize for Accordion
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/aksel-icons@3.0.1
|
||||
|
||||
## 3.0.0
|
||||
|
||||
### Major Changes
|
||||
|
||||
- [#1964](https://github.com/navikt/aksel/pull/1964) [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - **Accordion**
|
||||
|
||||
- Accordion oppdatet til å ha chevron left-aligned.
|
||||
- Neutral-variant lagt til
|
||||
- Diverse nye size-options for heading og paddinger.
|
||||
- Deler av Accordion-CSS er refaktorert. Dette vil kunne brekke overskrevne stiler.
|
||||
|
||||
- [#1964](https://github.com/navikt/aksel/pull/1964) [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Aksels løsninger bruker nå `@navikt/aksel-icons`
|
||||
|
||||
**Sideeffects av ikonendringer**
|
||||
|
||||
- Komponenter som tidligere brukte Expand-ikon har fått oppdatert animasjon (table, readmore og accordion)
|
||||
- Alert bruker samme ikonstørrelse for alle størrelser
|
||||
- Chips har justert padding/ikonstørrelser
|
||||
- Datepicker hover-bug på knapper er fikset
|
||||
- Helptekst bruker nå et custom-ikon.
|
||||
- Select har fått justert padding rundt ikon
|
||||
- Switch bruker samme checkmark som checkbox, er nå avrundet
|
||||
- ReadMore har justert margin for alignment med ikon, fjernet content-animasjon
|
||||
- Tabs bruker default text-default nå
|
||||
- Stepper har endret hvordan den styler checkmark-ikon.
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/aksel-icons@3.0.0
|
||||
- @navikt/ds-icons@3.0.0
|
||||
|
||||
## 2.9.8
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-react",
|
||||
"version": "2.9.8",
|
||||
"version": "3.1.2",
|
||||
"description": "Aksel react-components for NAV designsystem",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"license": "MIT",
|
||||
@@ -38,8 +38,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@floating-ui/react": "0.17.0",
|
||||
"@navikt/aksel-icons": "^2.9.8",
|
||||
"@navikt/ds-icons": "^2.9.8",
|
||||
"@navikt/aksel-icons": "^3.1.2",
|
||||
"@radix-ui/react-tabs": "1.0.0",
|
||||
"@radix-ui/react-toggle-group": "1.0.0",
|
||||
"clsx": "^1.2.1",
|
||||
|
||||
@@ -3,6 +3,7 @@ import React, { forwardRef } from "react";
|
||||
import AccordionItem, { AccordionItemType } from "./AccordionItem";
|
||||
import AccordionContent, { AccordionContentType } from "./AccordionContent";
|
||||
import AccordionHeader, { AccordionHeaderType } from "./AccordionHeader";
|
||||
import { AccordionContext } from "./AccordionContext";
|
||||
|
||||
interface AccordionComponent
|
||||
extends React.ForwardRefExoticComponent<
|
||||
@@ -14,6 +15,18 @@ interface AccordionComponent
|
||||
}
|
||||
|
||||
export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
/**
|
||||
* @default 'default'
|
||||
*/
|
||||
variant?: "default" | "neutral";
|
||||
/**
|
||||
* @default 'small'
|
||||
*/
|
||||
headingSize?: "large" | "medium" | "small" | "xsmall";
|
||||
/**
|
||||
* @default "medium"
|
||||
*/
|
||||
size?: "large" | "medium" | "small";
|
||||
/**
|
||||
* Instances of Accordion.Item
|
||||
*/
|
||||
@@ -21,9 +34,36 @@ export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
}
|
||||
|
||||
export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
|
||||
({ className, ...rest }, ref) => (
|
||||
<div {...rest} className={cl("navds-accordion", className)} ref={ref} />
|
||||
)
|
||||
(
|
||||
{
|
||||
className,
|
||||
variant = "default",
|
||||
headingSize = "small",
|
||||
size = "medium",
|
||||
...rest
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
return (
|
||||
<AccordionContext.Provider
|
||||
value={{
|
||||
variant,
|
||||
headingSize,
|
||||
size,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
{...rest}
|
||||
className={cl(
|
||||
"navds-accordion",
|
||||
className,
|
||||
`navds-accordion--${size}`
|
||||
)}
|
||||
ref={ref}
|
||||
/>
|
||||
</AccordionContext.Provider>
|
||||
);
|
||||
}
|
||||
) as AccordionComponent;
|
||||
|
||||
Accordion.Header = AccordionHeader;
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import cl from "clsx";
|
||||
import React, { forwardRef, useContext } from "react";
|
||||
import AnimateHeight from "../util/AnimateHeight";
|
||||
import { BodyLong } from "../typography/BodyLong";
|
||||
import { AccordionItemContext } from "./AccordionItem";
|
||||
|
||||
@@ -28,16 +27,20 @@ const AccordionContent: AccordionContentType = forwardRef(
|
||||
}
|
||||
|
||||
return (
|
||||
<AnimateHeight height={context.open ? "auto" : 0} duration={250}>
|
||||
<BodyLong
|
||||
{...rest}
|
||||
as="div"
|
||||
ref={ref}
|
||||
className={cl("navds-accordion__content", className)}
|
||||
>
|
||||
{children}
|
||||
</BodyLong>
|
||||
</AnimateHeight>
|
||||
<BodyLong
|
||||
{...rest}
|
||||
as="div"
|
||||
ref={ref}
|
||||
className={cl(
|
||||
"navds-accordion__content",
|
||||
{
|
||||
"navds-accordion__content--closed": !context.open,
|
||||
},
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</BodyLong>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
import { createContext } from "react";
|
||||
|
||||
export type AccordionContextProps = {
|
||||
variant?: "default" | "neutral";
|
||||
headingSize?: "large" | "medium" | "small" | "xsmall";
|
||||
size?: "large" | "medium" | "small";
|
||||
openItems?: number[];
|
||||
};
|
||||
|
||||
export const AccordionContext = createContext<AccordionContextProps | null>({
|
||||
variant: "default",
|
||||
headingSize: "small",
|
||||
size: "medium",
|
||||
openItems: [],
|
||||
});
|
||||
@@ -1,8 +1,9 @@
|
||||
import { Expand, ExpandFilled } from "@navikt/ds-icons";
|
||||
import cl from "clsx";
|
||||
import React, { forwardRef, useContext } from "react";
|
||||
import { Heading } from "../typography/Heading";
|
||||
import { AccordionContext } from "./AccordionContext";
|
||||
import { AccordionItemContext } from "./AccordionItem";
|
||||
import { ChevronDownIcon } from "@navikt/aksel-icons";
|
||||
|
||||
export interface AccordionHeaderProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
@@ -18,43 +19,42 @@ export type AccordionHeaderType = React.ForwardRefExoticComponent<
|
||||
|
||||
const AccordionHeader: AccordionHeaderType = forwardRef(
|
||||
({ children, className, onClick, ...rest }, ref) => {
|
||||
const context = useContext(AccordionItemContext);
|
||||
const itemContext = useContext(AccordionItemContext);
|
||||
const accordionContext = useContext(AccordionContext);
|
||||
|
||||
if (context === null) {
|
||||
if (accordionContext === null || itemContext === null) {
|
||||
console.error(
|
||||
"<Accordion.Header> has to be used within an <Accordion.Item>"
|
||||
"<Accordion.Header> has to be used within an <Accordion.Item>, which in turn must be within an <Accordion>"
|
||||
);
|
||||
return null;
|
||||
}
|
||||
|
||||
const handleClick = (
|
||||
e: React.MouseEvent<HTMLButtonElement, MouseEvent>
|
||||
) => {
|
||||
context.toggleOpen();
|
||||
onClick && onClick(e);
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
{...rest}
|
||||
ref={ref}
|
||||
{...rest}
|
||||
className={cl("navds-accordion__header", className)}
|
||||
onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
|
||||
itemContext.toggleOpen();
|
||||
onClick && onClick(e);
|
||||
}}
|
||||
aria-expanded={itemContext.open}
|
||||
type="button"
|
||||
onClick={handleClick}
|
||||
aria-expanded={context.open}
|
||||
>
|
||||
<div className="navds-accordion__icon-wrapper">
|
||||
<ChevronDownIcon
|
||||
className="navds-accordion__header-chevron"
|
||||
title="Vis mer"
|
||||
aria-hidden
|
||||
/>
|
||||
</div>
|
||||
<Heading
|
||||
size="small"
|
||||
size={accordionContext.headingSize ?? "small"}
|
||||
as="span"
|
||||
className="navds-accordion__header-content"
|
||||
>
|
||||
{children}
|
||||
</Heading>
|
||||
<Expand aria-hidden className="navds-accordion__expand-icon" />
|
||||
<ExpandFilled
|
||||
aria-hidden
|
||||
className="navds-accordion__expand-icon navds-accordion__expand-icon--filled"
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,12 @@
|
||||
import cl from "clsx";
|
||||
import React, { createContext, forwardRef, useState } from "react";
|
||||
import React, {
|
||||
createContext,
|
||||
forwardRef,
|
||||
useContext,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import { AccordionContext } from "./AccordionContext";
|
||||
|
||||
export interface AccordionItemProps
|
||||
extends React.HTMLAttributes<HTMLDivElement> {
|
||||
@@ -38,11 +45,27 @@ const AccordionItem: AccordionItemType = forwardRef(
|
||||
ref
|
||||
) => {
|
||||
const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);
|
||||
const context = useContext(AccordionContext);
|
||||
|
||||
const [_open, _setOpen] = useState(defaultOpen);
|
||||
const shouldAnimate = useRef<boolean>(!(Boolean(open) || defaultOpen));
|
||||
const handleOpen = () => {
|
||||
if (open === undefined) {
|
||||
const newOpen = !_open;
|
||||
_setOpen(newOpen);
|
||||
setInternalOpen(newOpen);
|
||||
} else {
|
||||
setInternalOpen(!open);
|
||||
}
|
||||
shouldAnimate.current = true;
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cl("navds-accordion__item", className, {
|
||||
"navds-accordion__item--open": open ?? internalOpen,
|
||||
"navds-accordion__item--neutral": context?.variant === "neutral",
|
||||
"navds-accordion__item--no-animation": !shouldAnimate.current,
|
||||
})}
|
||||
ref={ref}
|
||||
{...rest}
|
||||
@@ -50,11 +73,7 @@ const AccordionItem: AccordionItemType = forwardRef(
|
||||
<AccordionItemContext.Provider
|
||||
value={{
|
||||
open: open ?? internalOpen,
|
||||
toggleOpen: () => {
|
||||
if (open === undefined) {
|
||||
setInternalOpen((iOpen) => !iOpen);
|
||||
}
|
||||
},
|
||||
toggleOpen: handleOpen,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
|
||||
@@ -2,7 +2,8 @@ import React, { useState } from "react";
|
||||
import AccordionContent from "./AccordionContent";
|
||||
import AccordionHeader from "./AccordionHeader";
|
||||
import AccordionItem from "./AccordionItem";
|
||||
import { Accordion } from ".";
|
||||
import { Accordion, AccordionProps } from ".";
|
||||
import { Table } from "..";
|
||||
|
||||
export default {
|
||||
title: "ds-react/Accordion",
|
||||
@@ -12,6 +13,39 @@ export default {
|
||||
AccordionContent,
|
||||
AccordionHeader,
|
||||
},
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div
|
||||
style={{
|
||||
width: "600px",
|
||||
minHeight: "100vh",
|
||||
padding: "10rem 0",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "1rem",
|
||||
}}
|
||||
>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
argTypes: {
|
||||
variant: {
|
||||
options: ["default", "neutral"],
|
||||
control: { type: "select" },
|
||||
},
|
||||
headingSize: {
|
||||
options: ["large", "medium", "small", "xsmall"],
|
||||
control: { type: "select" },
|
||||
},
|
||||
size: {
|
||||
options: ["large", "medium", "small"],
|
||||
control: { type: "select" },
|
||||
},
|
||||
nItems: {
|
||||
control: { type: "number" },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Content = () => (
|
||||
@@ -32,9 +66,25 @@ const Content = () => (
|
||||
</Accordion.Content>
|
||||
);
|
||||
|
||||
const SmallContent = () => (
|
||||
<Accordion.Content>
|
||||
Magna aliquip aliquip fugiat nostrud <a href="#Lorem">Lorem est</a> pariatur
|
||||
veniam officia laboris voluptate officia pariatur.ex anim
|
||||
</Accordion.Content>
|
||||
);
|
||||
|
||||
const Item = (props) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
if (props.defaultOpen) {
|
||||
return (
|
||||
<Accordion.Item defaultOpen={props.defaultOpen}>
|
||||
<Accordion.Header>Accordion header text</Accordion.Header>
|
||||
<SmallContent />
|
||||
</Accordion.Item>
|
||||
);
|
||||
}
|
||||
|
||||
return props.controlled ? (
|
||||
<Accordion.Item open={open}>
|
||||
<Accordion.Header onClick={() => setOpen(!open)}>
|
||||
@@ -51,11 +101,11 @@ const Item = (props) => {
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
render: (props) => {
|
||||
render: ({ nItems, ...props }) => {
|
||||
return (
|
||||
<div style={{ width: 500 }}>
|
||||
<Accordion>
|
||||
{[...Array(props.nItems ? props.nItems : 2)].map((_, y) => (
|
||||
<Accordion {...props}>
|
||||
{[...Array(nItems ? nItems : 2)].map((_, y) => (
|
||||
<Item key={y} {...props} />
|
||||
))}
|
||||
</Accordion>
|
||||
@@ -64,18 +114,62 @@ export const Default = {
|
||||
},
|
||||
|
||||
args: {
|
||||
controlled: false,
|
||||
controlled: "false",
|
||||
nItems: 2,
|
||||
variant: "default",
|
||||
headingSize: "medium",
|
||||
size: "medium",
|
||||
},
|
||||
};
|
||||
|
||||
export const Controlled = () => {
|
||||
export const DefaultOpen = {
|
||||
render: ({ nItems, openItems, ...props }) => {
|
||||
return (
|
||||
<div style={{ width: 500 }}>
|
||||
<Accordion {...props}>
|
||||
{[...Array(nItems ? nItems : 2)].map((_, y) => (
|
||||
<Item key={y} defaultOpen={openItems.includes(y)} {...props} />
|
||||
))}
|
||||
</Accordion>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
args: {
|
||||
openItems: [1, 2],
|
||||
controlled: "false",
|
||||
nItems: 5,
|
||||
variant: "neutral",
|
||||
headingSize: "large",
|
||||
},
|
||||
};
|
||||
|
||||
export const Variants = {
|
||||
render: () => {
|
||||
return (
|
||||
<div style={{ width: 500 }} className="colgap">
|
||||
<Accordion>
|
||||
{[...Array(2)].map((_, y) => (
|
||||
<Item key={y} defaultOpen />
|
||||
))}
|
||||
</Accordion>
|
||||
<Accordion variant="neutral">
|
||||
{[...Array(2)].map((_, y) => (
|
||||
<Item key={y} defaultOpen />
|
||||
))}
|
||||
</Accordion>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export const Controlled = (props) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [open2, setOpen2] = useState(false);
|
||||
|
||||
return (
|
||||
<div style={{ width: 500 }}>
|
||||
<Accordion>
|
||||
<Accordion {...props}>
|
||||
<Accordion.Item open={open}>
|
||||
<Accordion.Header onClick={() => setOpen(!open)}>
|
||||
Accordion header text
|
||||
@@ -93,17 +187,124 @@ export const Controlled = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export const Uncontrolled = () => (
|
||||
<div style={{ width: 500 }}>
|
||||
<Accordion>
|
||||
export const WithTable = {
|
||||
render: (props) => {
|
||||
const ExampleTable = () => {
|
||||
return (
|
||||
<Table>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell>ID</Table.HeaderCell>
|
||||
<Table.HeaderCell>Fornavn</Table.HeaderCell>
|
||||
<Table.HeaderCell>Etternavn</Table.HeaderCell>
|
||||
<Table.HeaderCell>Rolle</Table.HeaderCell>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell>1</Table.HeaderCell>
|
||||
<Table.DataCell>Jean-Luc</Table.DataCell>
|
||||
<Table.DataCell>Picard</Table.DataCell>
|
||||
<Table.DataCell>Kaptein</Table.DataCell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell>2</Table.HeaderCell>
|
||||
<Table.DataCell>William</Table.DataCell>
|
||||
<Table.DataCell>Riker</Table.DataCell>
|
||||
<Table.DataCell>Kommandør</Table.DataCell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell>3</Table.HeaderCell>
|
||||
<Table.DataCell>Geordi</Table.DataCell>
|
||||
<Table.DataCell>La Forge</Table.DataCell>
|
||||
<Table.DataCell>Sjefsingeniør</Table.DataCell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table>
|
||||
);
|
||||
};
|
||||
|
||||
const ContentWithTable = () => {
|
||||
return (
|
||||
<Accordion.Content>
|
||||
<ExampleTable />
|
||||
</Accordion.Content>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ width: 500 }}>
|
||||
<Accordion {...props}>
|
||||
<Accordion.Item>
|
||||
<Accordion.Header>Table of people</Accordion.Header>
|
||||
<ContentWithTable />
|
||||
</Accordion.Item>
|
||||
<Accordion.Item>
|
||||
<Accordion.Header>Table of people</Accordion.Header>
|
||||
<ContentWithTable />
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
args: {
|
||||
variant: "default",
|
||||
headingSize: "large",
|
||||
},
|
||||
};
|
||||
|
||||
const SingleHeaderAccordion = ({
|
||||
size = "medium",
|
||||
headingSize = "medium",
|
||||
}: Partial<AccordionProps>) => {
|
||||
return (
|
||||
<Accordion size={size} headingSize={headingSize}>
|
||||
<Accordion.Item>
|
||||
<Accordion.Header>Accordion header text</Accordion.Header>
|
||||
<Content />
|
||||
<Accordion.Header>{`${size} size + ${headingSize} heading`}</Accordion.Header>
|
||||
<Accordion.Content>a</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
<Accordion.Item>
|
||||
<Accordion.Header>Accordion header text</Accordion.Header>
|
||||
<Content />
|
||||
<Accordion.Header>{`${size} size + ${headingSize} heading`}</Accordion.Header>
|
||||
<Accordion.Content>a</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
type sizesType = "large" | "medium" | "small";
|
||||
type headingSizesType = "large" | "medium" | "small" | "xsmall";
|
||||
const sizes: sizesType[] = ["large", "medium", "small"];
|
||||
const headingSizes: headingSizesType[] = ["large", "medium", "small", "xsmall"]; // enum this?!
|
||||
|
||||
export const Size = {
|
||||
render: ({ ...props }) => {
|
||||
return (
|
||||
<div style={{ width: 500 }} className="colgap">
|
||||
{sizes.map((element) => (
|
||||
<SingleHeaderAccordion size={element} {...props} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
args: {
|
||||
variant: "neutral",
|
||||
},
|
||||
};
|
||||
|
||||
export const HeadingSize = {
|
||||
render: ({ ...props }) => {
|
||||
return (
|
||||
<div style={{ width: 500 }} className="colgap">
|
||||
{headingSizes.map((element) => (
|
||||
<SingleHeaderAccordion headingSize={element} {...props} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
args: {
|
||||
variant: "neutral",
|
||||
},
|
||||
};
|
||||
@@ -1,9 +1,9 @@
|
||||
import {
|
||||
ErrorFilled,
|
||||
InformationFilled,
|
||||
SuccessFilled,
|
||||
WarningFilled,
|
||||
} from "@navikt/ds-icons";
|
||||
InformationSquareFillIcon,
|
||||
CheckmarkCircleFillIcon,
|
||||
ExclamationmarkTriangleFillIcon,
|
||||
XMarkOctagonFillIcon,
|
||||
} from "@navikt/aksel-icons";
|
||||
import cl from "clsx";
|
||||
import React, { forwardRef } from "react";
|
||||
import { BodyLong } from "../typography/BodyLong";
|
||||
@@ -37,13 +37,13 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
const Icon = ({ variant, ...props }) => {
|
||||
switch (variant) {
|
||||
case "error":
|
||||
return <ErrorFilled title="Feil" {...props} />;
|
||||
return <XMarkOctagonFillIcon title="Feil" {...props} />;
|
||||
case "warning":
|
||||
return <WarningFilled title="Advarsel" {...props} />;
|
||||
return <ExclamationmarkTriangleFillIcon title="Advarsel" {...props} />;
|
||||
case "info":
|
||||
return <InformationFilled title="Informasjon" {...props} />;
|
||||
return <InformationSquareFillIcon title="Informasjon" {...props} />;
|
||||
case "success":
|
||||
return <SuccessFilled title="Suksess" {...props} />;
|
||||
return <CheckmarkCircleFillIcon title="Suksess" {...props} />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Star } from "@navikt/ds-icons";
|
||||
import { StarIcon } from "@navikt/aksel-icons";
|
||||
import React from "react";
|
||||
import { Button } from "./index";
|
||||
|
||||
@@ -45,7 +45,7 @@ export const Default = {
|
||||
variant={props.variant}
|
||||
size={props.size}
|
||||
loading={props.loading}
|
||||
icon={props.icon ? <Star /> : undefined}
|
||||
icon={props.icon ? <StarIcon /> : undefined}
|
||||
iconPosition={props.iconPosition}
|
||||
>
|
||||
{props.children}
|
||||
@@ -159,7 +159,7 @@ export const Icon = () => (
|
||||
<Button
|
||||
key={variant}
|
||||
variant={variant}
|
||||
icon={<Star title="Stjerne" />}
|
||||
icon={<StarIcon title="Stjerne" />}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
@@ -169,7 +169,7 @@ export const Icon = () => (
|
||||
key={variant}
|
||||
variant={variant}
|
||||
size="small"
|
||||
icon={<Star title="Stjerne" />}
|
||||
icon={<StarIcon title="Stjerne" />}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
@@ -179,7 +179,7 @@ export const Icon = () => (
|
||||
key={variant}
|
||||
variant={variant}
|
||||
size="xsmall"
|
||||
icon={<Star title="Stjerne" />}
|
||||
icon={<StarIcon title="Stjerne" />}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
@@ -193,7 +193,7 @@ export const IconWText = () => (
|
||||
<Button
|
||||
key={variant}
|
||||
variant={variant}
|
||||
icon={<Star title="Stjerne" />}
|
||||
icon={<StarIcon title="Stjerne" />}
|
||||
iconPosition={i % 2 ? "left" : "right"}
|
||||
>
|
||||
{varSwitch[variant]}
|
||||
@@ -206,7 +206,7 @@ export const IconWText = () => (
|
||||
key={variant}
|
||||
variant={variant}
|
||||
size="small"
|
||||
icon={<Star title="Stjerne" />}
|
||||
icon={<StarIcon title="Stjerne" />}
|
||||
iconPosition={i % 2 ? "left" : "right"}
|
||||
>
|
||||
{varSwitch[variant]}
|
||||
@@ -219,7 +219,7 @@ export const IconWText = () => (
|
||||
key={variant}
|
||||
variant={variant}
|
||||
size="xsmall"
|
||||
icon={<Star title="Stjerne" />}
|
||||
icon={<StarIcon title="Stjerne" />}
|
||||
iconPosition={i % 2 ? "left" : "right"}
|
||||
>
|
||||
{varSwitch[variant]}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Close } from "@navikt/ds-icons";
|
||||
import { XMarkIcon } from "@navikt/aksel-icons";
|
||||
import cl from "clsx";
|
||||
import React, { forwardRef } from "react";
|
||||
import { OverridableComponent } from "../util/OverridableComponent";
|
||||
@@ -58,7 +58,7 @@ export const RemovableChips: OverridableComponent<
|
||||
>
|
||||
<span className="navds-chips__chip-text">{children}</span>
|
||||
<span className="navds-chips__removable-icon">
|
||||
<Close aria-hidden />
|
||||
<XMarkIcon aria-hidden />
|
||||
</span>
|
||||
</Component>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { SuccessStroke } from "@navikt/ds-icons";
|
||||
import { CheckmarkIcon } from "@navikt/aksel-icons";
|
||||
import cl from "clsx";
|
||||
import React, { forwardRef } from "react";
|
||||
import { OverridableComponent } from "../util/OverridableComponent";
|
||||
@@ -30,7 +30,7 @@ export const ToggleChips: ToggleChipsType = forwardRef(
|
||||
aria-pressed={selected}
|
||||
>
|
||||
{selected && (
|
||||
<SuccessStroke aria-hidden className="navds-chips__toggle-icon" />
|
||||
<CheckmarkIcon aria-hidden className="navds-chips__toggle-icon" />
|
||||
)}
|
||||
<span className="navds-chips__chip-text">{children}</span>
|
||||
</Component>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Calender } from "@navikt/ds-icons";
|
||||
import { CalendarIcon } from "@navikt/aksel-icons";
|
||||
import cl from "clsx";
|
||||
import React, { forwardRef, InputHTMLAttributes } from "react";
|
||||
import { BodyShort, Button, ErrorMessage, Label, omit } from "..";
|
||||
@@ -124,7 +124,7 @@ const DateInput: DateInputType = forwardRef<HTMLInputElement, DateInputProps>(
|
||||
tabIndex={open ? -1 : 0}
|
||||
disabled={inputProps.disabled}
|
||||
icon={
|
||||
<Calender
|
||||
<CalendarIcon
|
||||
title={
|
||||
open
|
||||
? conditionalVariables.iconTitle.close
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Left, Right } from "@navikt/ds-icons";
|
||||
import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
|
||||
import React from "react";
|
||||
import { CaptionProps, useDayPicker, useNavigation } from "react-day-picker";
|
||||
import { Button, Label } from "../../..";
|
||||
@@ -32,13 +32,13 @@ export const DatePickerCaption = ({ displayMonth, id }: CaptionProps) => {
|
||||
variant="tertiary"
|
||||
disabled={!previousMonth}
|
||||
onClick={() => previousMonth && goToMonth(previousMonth)}
|
||||
icon={<Left title="velg forrige måned" />}
|
||||
icon={<ArrowLeftIcon title="velg forrige måned" />}
|
||||
className="navds-date__caption-button"
|
||||
type="button"
|
||||
/>
|
||||
<Button
|
||||
aria-label={nextLabel}
|
||||
icon={<Right title="velg neste måned" />}
|
||||
icon={<ArrowRightIcon title="velg neste måned" />}
|
||||
onClick={() => nextMonth && goToMonth(nextMonth)}
|
||||
disabled={!nextMonth}
|
||||
variant="tertiary"
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Left, Right } from "@navikt/ds-icons";
|
||||
import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
|
||||
import setMonth from "date-fns/setMonth";
|
||||
import setYear from "date-fns/setYear";
|
||||
import startOfMonth from "date-fns/startOfMonth";
|
||||
@@ -58,7 +58,7 @@ export const DropdownCaption = ({ displayMonth, id }: CaptionProps) => {
|
||||
variant="tertiary"
|
||||
disabled={!previousMonth}
|
||||
onClick={() => previousMonth && goToMonth(previousMonth)}
|
||||
icon={<Left title="velg forrige måned" />}
|
||||
icon={<ArrowLeftIcon title="velg forrige måned" />}
|
||||
className="navds-date__caption-button"
|
||||
type="button"
|
||||
/>
|
||||
@@ -94,7 +94,7 @@ export const DropdownCaption = ({ displayMonth, id }: CaptionProps) => {
|
||||
|
||||
<Button
|
||||
aria-label={nextLabel}
|
||||
icon={<Right title="velg neste måned" />}
|
||||
icon={<ArrowRightIcon title="velg neste måned" />}
|
||||
onClick={() => nextMonth && goToMonth(nextMonth)}
|
||||
disabled={!nextMonth}
|
||||
variant="tertiary"
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Left, Right } from "@navikt/ds-icons";
|
||||
import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
|
||||
import setYear from "date-fns/setYear";
|
||||
import startOfMonth from "date-fns/startOfMonth";
|
||||
import startOfYear from "date-fns/startOfYear";
|
||||
@@ -61,7 +61,7 @@ export const MonthCaption = () => {
|
||||
disabled={hasPrevYear()}
|
||||
onClick={() => handleButtonClick(-1)}
|
||||
aria-label={labelPrevYear(locale?.code)}
|
||||
icon={<Left aria-hidden />}
|
||||
icon={<ArrowLeftIcon aria-hidden />}
|
||||
variant="tertiary"
|
||||
type="button"
|
||||
/>
|
||||
@@ -90,7 +90,7 @@ export const MonthCaption = () => {
|
||||
disabled={hasNextYear()}
|
||||
onClick={() => handleButtonClick(1)}
|
||||
aria-label={labelNextYear(locale?.code)}
|
||||
icon={<Right aria-hidden />}
|
||||
icon={<ArrowRightIcon aria-hidden />}
|
||||
variant="tertiary"
|
||||
type="button"
|
||||
/>
|
||||
|
||||
@@ -113,7 +113,7 @@ export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
|
||||
`navds-expansioncard--${size}`,
|
||||
{
|
||||
"navds-expansioncard--open": open ?? _open,
|
||||
"navds-expansioncard--no-fade": !shouldFade.current,
|
||||
"navds-expansioncard--no-animation": !shouldFade.current,
|
||||
}
|
||||
)}
|
||||
ref={ref}
|
||||
|
||||
@@ -18,7 +18,7 @@ export const ExpansionCardDescription: ExpansionCardDescriptionType =
|
||||
|
||||
if (panelContext === null) {
|
||||
console.error(
|
||||
"<ExpansionCard.Header> has to be used within an <ExpansionCard>"
|
||||
"<ExpansionCard.Description> has to be used within an <ExpansionCard>"
|
||||
);
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import cl from "clsx";
|
||||
import React, { FieldsetHTMLAttributes, forwardRef, useContext } from "react";
|
||||
import { BodyLong, Detail, Label, ErrorMessage, omit } from "../..";
|
||||
import { BodyShort, ErrorMessage, Label, omit } from "../..";
|
||||
import { FormFieldProps } from "../useFormField";
|
||||
import { useFieldset } from "./useFieldset";
|
||||
|
||||
@@ -104,30 +104,18 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
|
||||
>
|
||||
{legend}
|
||||
</Label>
|
||||
{!!description &&
|
||||
(size === "medium" ? (
|
||||
<BodyLong
|
||||
className={cl("navds-fieldset__description", {
|
||||
"navds-sr-only": !!hideLegend,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size="small"
|
||||
as="div"
|
||||
>
|
||||
{props.description}
|
||||
</BodyLong>
|
||||
) : (
|
||||
<Detail
|
||||
className={cl("navds-fieldset__description", {
|
||||
"navds-sr-only": !!hideLegend,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size="small"
|
||||
as="div"
|
||||
>
|
||||
{props.description}
|
||||
</Detail>
|
||||
))}
|
||||
{!!description && (
|
||||
<BodyShort
|
||||
className={cl("navds-fieldset__description", {
|
||||
"navds-sr-only": !!hideLegend,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size={size ?? "medium"}
|
||||
as="div"
|
||||
>
|
||||
{props.description}
|
||||
</BodyShort>
|
||||
)}
|
||||
{children}
|
||||
<div
|
||||
id={errorId}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import React, { forwardRef, SelectHTMLAttributes } from "react";
|
||||
import cl from "clsx";
|
||||
import { Expand } from "@navikt/ds-icons";
|
||||
import { BodyLong, Label, ErrorMessage, omit, Detail } from "..";
|
||||
import React, { forwardRef, SelectHTMLAttributes } from "react";
|
||||
|
||||
import { ChevronDownIcon } from "@navikt/aksel-icons";
|
||||
import { BodyShort, ErrorMessage, Label, omit } from "..";
|
||||
import { FormFieldProps, useFormField } from "./useFormField";
|
||||
|
||||
export interface SelectProps
|
||||
@@ -73,31 +74,16 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
|
||||
{label}
|
||||
</Label>
|
||||
{!!description && (
|
||||
<>
|
||||
{size === "medium" ? (
|
||||
<BodyLong
|
||||
className={cl("navds-form-field__description", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size="small"
|
||||
as="div"
|
||||
>
|
||||
{description}
|
||||
</BodyLong>
|
||||
) : (
|
||||
<Detail
|
||||
className={cl("navds-form-field__description", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size="small"
|
||||
as="div"
|
||||
>
|
||||
{description}
|
||||
</Detail>
|
||||
)}
|
||||
</>
|
||||
<BodyShort
|
||||
className={cl("navds-form-field__description", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size={size}
|
||||
as="div"
|
||||
>
|
||||
{description}
|
||||
</BodyShort>
|
||||
)}
|
||||
<div className="navds-select__container" style={style}>
|
||||
<select
|
||||
@@ -113,7 +99,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
|
||||
>
|
||||
{children}
|
||||
</select>
|
||||
<Expand className="navds-select__chevron" aria-hidden />
|
||||
<ChevronDownIcon className="navds-select__chevron" aria-hidden />
|
||||
</div>
|
||||
<div
|
||||
className="navds-form-field__error"
|
||||
|
||||
@@ -5,14 +5,14 @@ import React, {
|
||||
useEffect,
|
||||
useState,
|
||||
} from "react";
|
||||
import { BodyShort, Detail, Loader, omit } from "..";
|
||||
import { BodyShort, Loader, omit } from "..";
|
||||
import { FormFieldProps, useFormField } from "./useFormField";
|
||||
|
||||
const SelectedIcon = () => (
|
||||
<svg
|
||||
width="12px"
|
||||
height="12px"
|
||||
viewBox="0 0 12 12"
|
||||
width="12"
|
||||
height="10"
|
||||
viewBox="0 0 12 10"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
focusable={false}
|
||||
@@ -23,9 +23,8 @@ const SelectedIcon = () => (
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M4.01386 8L10.25 2L11 2.75L4.01386 9.5L1 6.5L1.75 5.75L4.01386 8Z"
|
||||
d="M11.2674 0.647802C11.8762 1.20971 11.9141 2.1587 11.3522 2.76743L5.35221 9.26743C5.07531 9.56739 4.68813 9.74155 4.27998 9.74971C3.87184 9.75787 3.478 9.59933 3.18934 9.31067L0.68934 6.81067C0.103553 6.22488 0.103553 5.27513 0.68934 4.68935C1.27513 4.10356 2.22487 4.10356 2.81066 4.68935L4.20673 6.08541L9.14779 0.732587C9.7097 0.123856 10.6587 0.0858967 11.2674 0.647802Z"
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
@@ -72,8 +71,6 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
|
||||
...rest
|
||||
} = props;
|
||||
|
||||
const Description = size === "medium" ? BodyShort : Detail;
|
||||
|
||||
const [checked, setChecked] = useState(
|
||||
defaultChecked ?? checkedProp ?? false
|
||||
);
|
||||
@@ -131,13 +128,13 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
|
||||
{children}
|
||||
</BodyShort>
|
||||
{description && (
|
||||
<Description
|
||||
<BodyShort
|
||||
size={size}
|
||||
as="div"
|
||||
size="small"
|
||||
className="navds-switch__description"
|
||||
className="navds-form-field__subdescription navds-switch__description"
|
||||
>
|
||||
{description}
|
||||
</Description>
|
||||
</BodyShort>
|
||||
)}
|
||||
</div>
|
||||
</label>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { forwardRef, InputHTMLAttributes } from "react";
|
||||
import cl from "clsx";
|
||||
import { BodyLong, Detail, Label, ErrorMessage, omit } from "..";
|
||||
import React, { forwardRef, InputHTMLAttributes } from "react";
|
||||
import { BodyShort, ErrorMessage, Label, omit } from "..";
|
||||
import { FormFieldProps, useFormField } from "./useFormField";
|
||||
|
||||
export interface TextFieldProps
|
||||
@@ -78,31 +78,16 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
|
||||
</Label>
|
||||
|
||||
{!!description && (
|
||||
<>
|
||||
{size === "medium" ? (
|
||||
<BodyLong
|
||||
className={cl("navds-form-field__description", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size="small"
|
||||
as="div"
|
||||
>
|
||||
{description}
|
||||
</BodyLong>
|
||||
) : (
|
||||
<Detail
|
||||
className={cl("navds-form-field__description", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size="small"
|
||||
as="div"
|
||||
>
|
||||
{description}
|
||||
</Detail>
|
||||
)}
|
||||
</>
|
||||
<BodyShort
|
||||
className={cl("navds-form-field__description", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size={size}
|
||||
as="div"
|
||||
>
|
||||
{description}
|
||||
</BodyShort>
|
||||
)}
|
||||
<input
|
||||
{...omit(rest, ["error", "errorId", "size"])}
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
import React, { forwardRef, useState } from "react";
|
||||
import cl from "clsx";
|
||||
import { BodyShort, BodyLong, Label, ErrorMessage, omit, Detail } from "..";
|
||||
import { FormFieldProps, useFormField } from "./useFormField";
|
||||
import { useId } from "..";
|
||||
import React, { forwardRef, useState } from "react";
|
||||
import { BodyShort, ErrorMessage, Label, omit, useId } from "..";
|
||||
import TextareaAutosize from "../util/TextareaAutoSize";
|
||||
import { FormFieldProps, useFormField } from "./useFormField";
|
||||
|
||||
/**
|
||||
* TODO: Mulighet for lokalisering av sr-only/counter text
|
||||
@@ -120,31 +119,16 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||
{label}
|
||||
</Label>
|
||||
{!!description && (
|
||||
<>
|
||||
{size === "medium" ? (
|
||||
<BodyLong
|
||||
className={cl("navds-form-field__description", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size="small"
|
||||
as="div"
|
||||
>
|
||||
{description}
|
||||
</BodyLong>
|
||||
) : (
|
||||
<Detail
|
||||
className={cl("navds-form-field__description", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size="small"
|
||||
as="div"
|
||||
>
|
||||
{description}
|
||||
</Detail>
|
||||
)}
|
||||
</>
|
||||
<BodyShort
|
||||
className={cl("navds-form-field__description", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size={size}
|
||||
as="div"
|
||||
>
|
||||
{description}
|
||||
</BodyShort>
|
||||
)}
|
||||
<div className="navds-textarea__wrapper">
|
||||
<TextareaAutosize
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import cl from "clsx";
|
||||
import React, { forwardRef, InputHTMLAttributes } from "react";
|
||||
import { BodyLong, BodyShort, Detail } from "../../typography";
|
||||
import { BodyShort } from "../../typography";
|
||||
import { omit } from "../../util";
|
||||
import { FormFieldProps } from "../useFormField";
|
||||
import useCheckbox from "./useCheckbox";
|
||||
@@ -44,8 +44,6 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
|
||||
(props, ref) => {
|
||||
const { inputProps, hasError, size } = useCheckbox(props);
|
||||
|
||||
const Description = size === "medium" ? BodyLong : Detail;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cl(
|
||||
@@ -94,9 +92,13 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
|
||||
{props.children}
|
||||
</BodyShort>
|
||||
{props.description && (
|
||||
<Description as="span" className="navds-checkbox__description">
|
||||
<BodyShort
|
||||
as="span"
|
||||
size={size}
|
||||
className="navds-form-field__subdescription navds-checkbox__description"
|
||||
>
|
||||
{props.description}
|
||||
</Description>
|
||||
</BodyShort>
|
||||
)}
|
||||
</span>
|
||||
</label>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import cl from "clsx";
|
||||
import React, { forwardRef, InputHTMLAttributes } from "react";
|
||||
import { BodyLong, BodyShort, Detail } from "../../typography";
|
||||
import { BodyShort } from "../../typography";
|
||||
import { omit } from "../../util";
|
||||
import { FormFieldProps } from "../useFormField";
|
||||
import { useRadio } from "./useRadio";
|
||||
@@ -25,8 +25,6 @@ export interface RadioProps
|
||||
export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
|
||||
const { inputProps, size, hasError } = useRadio(props);
|
||||
|
||||
const Description = size === "medium" ? BodyLong : Detail;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cl(props.className, "navds-radio", `navds-radio--${size}`, {
|
||||
@@ -46,9 +44,13 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
|
||||
{props.children}
|
||||
</BodyShort>
|
||||
{props.description && (
|
||||
<Description as="span" className="navds-radio__description">
|
||||
<BodyShort
|
||||
as="span"
|
||||
size={size}
|
||||
className="navds-form-field__subdescription navds-radio__description"
|
||||
>
|
||||
{props.description}
|
||||
</Description>
|
||||
</BodyShort>
|
||||
)}
|
||||
</span>
|
||||
</label>
|
||||
|
||||
@@ -86,7 +86,9 @@ export const GroupDescription = () => (
|
||||
defaultValue="tekst2"
|
||||
description="Group description"
|
||||
>
|
||||
<Radio value="tekst">Radiotekst</Radio>
|
||||
<Radio value="tekst" description="textdesc">
|
||||
Radiotekst
|
||||
</Radio>
|
||||
<Radio value="tekst2">Radiotekst</Radio>
|
||||
</RadioGroup>
|
||||
);
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Close, Search as SearchIcon } from "@navikt/ds-icons";
|
||||
import { XMarkIcon, MagnifyingGlassIcon } from "@navikt/aksel-icons";
|
||||
import cl from "clsx";
|
||||
import React, {
|
||||
forwardRef,
|
||||
@@ -181,12 +181,12 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
|
||||
</Label>
|
||||
{!!description && (
|
||||
<BodyShort
|
||||
as="div"
|
||||
className={cl("navds-form-field__description", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size={size}
|
||||
as="div"
|
||||
>
|
||||
{description}
|
||||
</BodyShort>
|
||||
@@ -194,7 +194,10 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
|
||||
<div className="navds-search__wrapper">
|
||||
<div className="navds-search__wrapper-inner">
|
||||
{variant === "simple" && (
|
||||
<SearchIcon aria-hidden className="navds-search__search-icon" />
|
||||
<MagnifyingGlassIcon
|
||||
aria-hidden
|
||||
className="navds-search__search-icon"
|
||||
/>
|
||||
)}
|
||||
<input
|
||||
ref={mergedRef}
|
||||
@@ -222,7 +225,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
|
||||
<span className="navds-sr-only">
|
||||
{clearButtonLabel ? clearButtonLabel : "Tøm"}
|
||||
</span>
|
||||
<Close aria-hidden />
|
||||
<XMarkIcon aria-hidden />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { Search } from "@navikt/ds-icons";
|
||||
import cl from "clsx";
|
||||
import React, { forwardRef, useContext } from "react";
|
||||
import { Button, ButtonProps } from "../..";
|
||||
import { SearchContext } from "./Search";
|
||||
import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
|
||||
|
||||
export interface SearchButtonProps
|
||||
extends Omit<ButtonProps, "size" | "children" | "variant"> {
|
||||
@@ -41,7 +41,7 @@ const SearchButton: SearchButtonType = forwardRef(
|
||||
onClick?.(e);
|
||||
}}
|
||||
icon={
|
||||
<Search
|
||||
<MagnifyingGlassIcon
|
||||
{...(children ? { "aria-hidden": true } : { title: "Søk" })}
|
||||
/>
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Helptext as HelpTextIcon, HelptextFilled } from "@navikt/ds-icons";
|
||||
import cl from "clsx";
|
||||
import React, { forwardRef, useMemo, useRef, useState } from "react";
|
||||
import { Popover, PopoverProps, mergeRefs } from "..";
|
||||
import { HelpTextIcon } from "./HelpTextIcon";
|
||||
|
||||
export interface HelpTextProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
@@ -61,11 +61,8 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
|
||||
type="button"
|
||||
aria-expanded={open}
|
||||
>
|
||||
<HelpTextIcon className="navds-help-text__icon" title={title} />
|
||||
<HelptextFilled
|
||||
className="navds-help-text__icon navds-help-text__icon--filled"
|
||||
title={title}
|
||||
/>
|
||||
<HelpTextIcon title={title} />
|
||||
<HelpTextIcon filled title={title} />
|
||||
</button>
|
||||
<Popover
|
||||
onClose={() => setOpen(false)}
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
import cl from "clsx";
|
||||
import React from "react";
|
||||
import { useId } from "../util/useId";
|
||||
|
||||
export const HelpTextIcon = ({
|
||||
title,
|
||||
filled = false,
|
||||
}: {
|
||||
title: string;
|
||||
filled?: boolean;
|
||||
}) => {
|
||||
let titleId: string | undefined = useId();
|
||||
titleId = title ? `title-${titleId}` : undefined;
|
||||
return (
|
||||
<svg
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
focusable={false}
|
||||
role="img"
|
||||
aria-labelledby={titleId}
|
||||
className={cl("navds-help-text__icon", {
|
||||
"navds-help-text__icon--filled": filled,
|
||||
})}
|
||||
>
|
||||
{title ? <title id={titleId}>{title}</title> : null}
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="11"
|
||||
strokeWidth="2"
|
||||
stroke="currentColor"
|
||||
fill={filled ? "currentColor" : "transparent"}
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M9.75 9C9.75 7.75736 10.7574 6.75 12 6.75H12.1716C13.3195 6.75 14.25 7.68054 14.25 8.82843C14.25 9.37966 14.031 9.90832 13.6412 10.2981L12.6412 11.2981C11.7504 12.1889 11.25 13.3971 11.25 14.6569C11.25 15.0711 11.5858 15.4069 12 15.4069C12.4142 15.4069 12.75 15.0711 12.75 14.6569C12.75 13.7949 13.0924 12.9682 13.7019 12.3588L14.7019 11.3588C15.373 10.6877 15.75 9.77748 15.75 8.82843C15.75 6.85212 14.1479 5.25 12.1716 5.25H12C9.92893 5.25 8.25 6.92893 8.25 9V9.5C8.25 9.91421 8.58579 10.25 9 10.25C9.41421 10.25 9.75 9.91421 9.75 9.5V9ZM12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5Z"
|
||||
fill={filled ? "var(--a-surface-default)" : "currentColor"}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
@@ -1,12 +1,13 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import { Panel, OverridableComponent } from "..";
|
||||
import { Next } from "@navikt/ds-icons";
|
||||
|
||||
import cl from "clsx";
|
||||
import { LinkPanelTitle, LinkPanelTitleType } from "./LinkPanelTitle";
|
||||
import {
|
||||
LinkPanelDescription,
|
||||
LinkPanelDescriptionType,
|
||||
} from "./LinkPanelDescription";
|
||||
import { ChevronRightIcon } from "@navikt/aksel-icons";
|
||||
|
||||
export interface LinkPanelProps
|
||||
extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
|
||||
@@ -41,7 +42,7 @@ export const LinkPanelComponent: OverridableComponent<
|
||||
className={cl("navds-link-panel", className)}
|
||||
>
|
||||
<div className="navds-link-panel__content">{children}</div>
|
||||
<Next className="navds-link-panel__chevron" aria-hidden />
|
||||
<ChevronRightIcon className="navds-link-panel__chevron" aria-hidden />
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { Add } from "@navikt/ds-icons";
|
||||
import { PlusCircleFillIcon } from "@navikt/aksel-icons";
|
||||
import React from "react";
|
||||
import {
|
||||
BodyLong,
|
||||
Alert as DsAlert,
|
||||
ConfirmationPanel as DsConfirmationPanel,
|
||||
Link,
|
||||
Alert as DsAlert,
|
||||
BodyLong,
|
||||
} from "..";
|
||||
export default {
|
||||
title: "ds-react/Link",
|
||||
@@ -15,7 +15,8 @@ export const Default = {
|
||||
render: (props) => {
|
||||
const LinkD = () => (
|
||||
<Link href="#">
|
||||
{props.icon && <Add />}Ex aliqua incididunt {props.icon && <Add />}
|
||||
{props.icon && <PlusCircleFillIcon />}Ex aliqua incididunt{" "}
|
||||
{props.icon && <PlusCircleFillIcon />}
|
||||
</Link>
|
||||
);
|
||||
|
||||
@@ -41,7 +42,8 @@ export const Default = {
|
||||
|
||||
const DemoLink = () => (
|
||||
<Link href="#">
|
||||
<Add aria-hidden /> Ex aliqua incididunt <Add aria-hidden />
|
||||
<PlusCircleFillIcon aria-hidden /> Ex aliqua incididunt{" "}
|
||||
<PlusCircleFillIcon aria-hidden />
|
||||
</Link>
|
||||
);
|
||||
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import {
|
||||
BabyChangingRoom,
|
||||
Braille,
|
||||
Cognition,
|
||||
Refresh,
|
||||
} from "@navikt/ds-icons";
|
||||
BabyWrappedIcon,
|
||||
BrailleIcon,
|
||||
HeadHeartIcon,
|
||||
RecycleIcon,
|
||||
} from "@navikt/aksel-icons";
|
||||
import { Meta } from "@storybook/react";
|
||||
import React from "react";
|
||||
import { List } from "..";
|
||||
@@ -97,20 +97,20 @@ export const Icons = {
|
||||
<List>
|
||||
<List.Item
|
||||
title="Lorem Ipsum Dolor Sit Amet"
|
||||
icon={<Braille aria-hidden />}
|
||||
icon={<BrailleIcon aria-hidden />}
|
||||
>
|
||||
Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
|
||||
</List.Item>
|
||||
<List.Item
|
||||
title="Consectetur Adipiscing Elit"
|
||||
icon={<Cognition aria-hidden />}
|
||||
icon={<HeadHeartIcon aria-hidden />}
|
||||
>
|
||||
Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
|
||||
</List.Item>
|
||||
<List.Item icon={<BabyChangingRoom aria-hidden />}>
|
||||
<List.Item icon={<BabyWrappedIcon aria-hidden />}>
|
||||
Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
|
||||
</List.Item>
|
||||
<List.Item icon={<Refresh aria-hidden />}>
|
||||
<List.Item icon={<RecycleIcon aria-hidden />}>
|
||||
Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
|
||||
</List.Item>
|
||||
</List>
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import React, { forwardRef, useEffect, useMemo, useRef } from "react";
|
||||
import cl from "clsx";
|
||||
import ReactModal from "react-modal";
|
||||
import { Close } from "@navikt/ds-icons";
|
||||
|
||||
import { Button, mergeRefs, useProvider } from "..";
|
||||
import ModalContent, { ModalContentType } from "./ModalContent";
|
||||
import { XMarkIcon } from "@navikt/aksel-icons";
|
||||
|
||||
export interface ModalProps {
|
||||
/**
|
||||
@@ -144,10 +145,10 @@ export const Modal = forwardRef<ReactModal, ModalProps>(
|
||||
"navds-modal__button--shake": shouldCloseOnOverlayClick,
|
||||
})}
|
||||
size="small"
|
||||
variant="tertiary"
|
||||
variant="tertiary-neutral"
|
||||
ref={buttonRef}
|
||||
onClick={onClose}
|
||||
icon={<Close title="Lukk modalvindu" />}
|
||||
icon={<XMarkIcon title="Lukk modalvindu" />}
|
||||
/>
|
||||
)}
|
||||
</ReactModal>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import cl from "clsx";
|
||||
import { Back, Next } from "@navikt/ds-icons";
|
||||
import React, { forwardRef } from "react";
|
||||
|
||||
import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
|
||||
import { BodyShort } from "..";
|
||||
import PaginationItem, {
|
||||
PaginationItemProps,
|
||||
@@ -145,7 +146,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
|
||||
page={page - 1}
|
||||
size={size}
|
||||
icon={
|
||||
<Back
|
||||
<ChevronLeftIcon
|
||||
className="navds-pagination__prev-next-icon"
|
||||
{...(prevNextTexts
|
||||
? { "aria-hidden": true }
|
||||
@@ -199,7 +200,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
|
||||
page={page + 1}
|
||||
size={size}
|
||||
icon={
|
||||
<Next
|
||||
<ChevronRightIcon
|
||||
className="navds-pagination__prev-next-icon"
|
||||
{...(prevNextTexts
|
||||
? { "aria-hidden": true }
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
import React, { forwardRef, useState } from "react";
|
||||
import cl from "clsx";
|
||||
import { Expand } from "@navikt/ds-icons";
|
||||
import { BodyLong } from "../typography";
|
||||
import { ExpandFilled } from "@navikt/ds-icons";
|
||||
import AnimateHeight from "../util/AnimateHeight";
|
||||
import { ChevronDownIcon } from "@navikt/aksel-icons";
|
||||
|
||||
export interface ReadMoreProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
@@ -74,18 +72,23 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
|
||||
}}
|
||||
aria-expanded={isOpened}
|
||||
>
|
||||
<Expand className="navds-read-more__expand-icon" aria-hidden />
|
||||
<ExpandFilled
|
||||
className="navds-read-more__expand-icon navds-read-more__expand-icon--filled"
|
||||
<ChevronDownIcon
|
||||
className="navds-read-more__expand-icon"
|
||||
aria-hidden
|
||||
/>
|
||||
<span>{header}</span>
|
||||
</button>
|
||||
<AnimateHeight height={isOpened ? "auto" : 0} duration={250}>
|
||||
<BodyLong as="div" className="navds-read-more__content" size={size}>
|
||||
{children}
|
||||
</BodyLong>
|
||||
</AnimateHeight>
|
||||
|
||||
<BodyLong
|
||||
as="div"
|
||||
aria-hidden={!isOpened}
|
||||
className={cl("navds-read-more__content", {
|
||||
"navds-read-more__content--closed": !isOpened,
|
||||
})}
|
||||
size={size}
|
||||
>
|
||||
{children}
|
||||
</BodyLong>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -26,8 +26,11 @@ export const Default = {
|
||||
header="Grunnen til at vi spør om dette og i tillegg ber om vedlegg"
|
||||
size={props.size}
|
||||
>
|
||||
Command station, this is ST 321. Code Clearance Blue. We're starting our
|
||||
approach. Deactivate the security shield.
|
||||
<div style={{ maxWidth: 300 }}>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia,
|
||||
tempore corporis exercitationem minus dignissimos eius aspernatur
|
||||
fugiat iusto.
|
||||
</div>
|
||||
</ReadMore>
|
||||
);
|
||||
},
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { SuccessFilled } from "@navikt/ds-icons";
|
||||
import cl from "clsx";
|
||||
import React, { forwardRef, useContext } from "react";
|
||||
import { Label, OverridableComponent } from "..";
|
||||
@@ -27,6 +26,25 @@ export interface StepperStepProps
|
||||
interactive?: boolean;
|
||||
}
|
||||
|
||||
const CompletedIcon = () => (
|
||||
<svg
|
||||
width="14"
|
||||
height="10"
|
||||
viewBox="0 0 14 10"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
focusable={false}
|
||||
role="img"
|
||||
aria-hidden
|
||||
aria-label="Fullført"
|
||||
>
|
||||
<path
|
||||
d="M4.93563 6.41478L11.3755 0.404669C11.9796 -0.160351 12.9294 -0.130672 13.4959 0.47478C14.0624 1.08027 14.0299 2.03007 13.4249 2.59621L5.92151 9.59934C5.64138 9.85904 5.27598 10 4.90064 10C4.5069 10 4.12756 9.84621 3.83953 9.56111L1.33953 7.06111C0.75401 6.47558 0.75401 5.52542 1.33953 4.93989C1.92506 4.35437 2.87522 4.35437 3.46075 4.93989L4.93563 6.41478Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export interface StepperStepType
|
||||
extends OverridableComponent<StepperStepProps, HTMLAnchorElement> {}
|
||||
|
||||
@@ -74,10 +92,9 @@ export const StepComponent: OverridableComponent<
|
||||
}}
|
||||
>
|
||||
{completed ? (
|
||||
<SuccessFilled
|
||||
aria-hidden
|
||||
className="navds-stepper__circle navds-stepper__circle--success"
|
||||
/>
|
||||
<span className="navds-stepper__circle navds-stepper__circle--success">
|
||||
<CompletedIcon />
|
||||
</span>
|
||||
) : (
|
||||
<Label className="navds-stepper__circle" as="span" aria-hidden="true">
|
||||
{unsafe_index + 1}
|
||||
|
||||
@@ -175,9 +175,7 @@ export const CompletedSteps = () => {
|
||||
onStepChange={(step) => setActiveStep(step)}
|
||||
>
|
||||
<Stepper.Step completed={activeStep > 1}>Start søknad</Stepper.Step>
|
||||
<Stepper.Step completed={activeStep > 2}>
|
||||
Personopplysninger
|
||||
</Stepper.Step>
|
||||
<Stepper.Step completed>Personopplysninger</Stepper.Step>
|
||||
<Stepper.Step completed={activeStep > 3}>Saksopplysninger</Stepper.Step>
|
||||
<Stepper.Step completed={activeStep >= 4}>
|
||||
Søknadstekst for en veldig spesifikk prosess i NAV som har lang tekst
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
import React, { forwardRef, useContext } from "react";
|
||||
import { Down, Up, UpDown } from "@navikt/ds-icons";
|
||||
import { TableContext } from "./Table";
|
||||
import HeaderCell, { HeaderCellProps } from "./HeaderCell";
|
||||
import {
|
||||
ArrowDownIcon,
|
||||
ArrowUpIcon,
|
||||
ArrowsUpDownIcon,
|
||||
} from "@navikt/aksel-icons";
|
||||
|
||||
export interface ColumnHeaderProps extends HeaderCellProps {
|
||||
/**
|
||||
@@ -55,12 +59,12 @@ export const ColumnHeader: ColumnHeaderType = forwardRef(
|
||||
{children}
|
||||
{context?.sort?.orderBy === sortKey ? (
|
||||
context?.sort?.direction === "descending" ? (
|
||||
<Down aria-hidden />
|
||||
<ArrowDownIcon aria-hidden />
|
||||
) : (
|
||||
<Up aria-hidden />
|
||||
<ArrowUpIcon aria-hidden />
|
||||
)
|
||||
) : (
|
||||
<UpDown aria-hidden />
|
||||
<ArrowsUpDownIcon aria-hidden />
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { Expand, ExpandFilled } from "@navikt/ds-icons";
|
||||
import cl from "clsx";
|
||||
import React, { forwardRef, useState } from "react";
|
||||
import { useId } from "..";
|
||||
import AnimateHeight from "../util/AnimateHeight";
|
||||
import DataCell from "./DataCell";
|
||||
import Row, { RowProps } from "./Row";
|
||||
import { ChevronDownIcon } from "@navikt/aksel-icons";
|
||||
|
||||
export interface ExpandableRowProps extends Omit<RowProps, "content"> {
|
||||
/**
|
||||
@@ -96,14 +96,10 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Expand
|
||||
<ChevronDownIcon
|
||||
className="navds-table__expandable-icon"
|
||||
title={isOpen ? "Vis mindre" : "Vis mer"}
|
||||
/>
|
||||
<ExpandFilled
|
||||
className="navds-table__expandable-icon navds-table__expandable-icon--filled"
|
||||
title={isOpen ? "Vis mindre" : "Vis mer"}
|
||||
/>
|
||||
</button>
|
||||
)}
|
||||
</DataCell>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Back, Next } from "@navikt/ds-icons";
|
||||
import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
|
||||
import { TabsList } from "@radix-ui/react-tabs";
|
||||
import cl from "clsx";
|
||||
import React, {
|
||||
@@ -9,7 +9,7 @@ import React, {
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import { mergeRefs, debounce } from "..";
|
||||
import { debounce, mergeRefs } from "..";
|
||||
import { TabsContext } from "./Tabs";
|
||||
|
||||
export interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
@@ -103,9 +103,9 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
|
||||
}}
|
||||
>
|
||||
{dir === -1 ? (
|
||||
<Back title="scroll tilbake" />
|
||||
<ChevronLeftIcon title="scroll tilbake" />
|
||||
) : (
|
||||
<Next title="scroll neste" />
|
||||
<ChevronRightIcon title="scroll neste" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Cup, Dishwasher, Freezer } from "@navikt/ds-icons";
|
||||
import { Meta } from "@storybook/react";
|
||||
import React, { useState } from "react";
|
||||
import { Tabs } from ".";
|
||||
import { FreezerIcon, MugIcon, DishwasherIcon } from "@navikt/aksel-icons";
|
||||
|
||||
export default {
|
||||
title: "ds-react/Tabs",
|
||||
@@ -65,9 +65,13 @@ export const Default = {
|
||||
iconPosition={props?.iconPosition}
|
||||
>
|
||||
<Tabs.List>
|
||||
<Tabs.Tab value="test1" icon={<Cup />} label="Skap" />
|
||||
<Tabs.Tab value="test2" label="Oppvaskmaskin" icon={<Dishwasher />} />
|
||||
<Tabs.Tab value="test3" icon={<Freezer />} label="Fryser" />
|
||||
<Tabs.Tab value="test1" icon={<MugIcon />} label="Skap" />
|
||||
<Tabs.Tab
|
||||
value="test2"
|
||||
label="Oppvaskmaskin"
|
||||
icon={<DishwasherIcon />}
|
||||
/>
|
||||
<Tabs.Tab value="test3" icon={<FreezerIcon />} label="Fryser" />
|
||||
</Tabs.List>
|
||||
<Panel />
|
||||
</Tabs>
|
||||
@@ -84,9 +88,13 @@ export const Small = () => {
|
||||
return (
|
||||
<Tabs defaultValue="test2" size="small">
|
||||
<Tabs.List>
|
||||
<Tabs.Tab value="test1" icon={<Cup />} label="Skap" />
|
||||
<Tabs.Tab value="test2" label="Oppvaskmaskin" icon={<Dishwasher />} />
|
||||
<Tabs.Tab value="test3" icon={<Freezer />} label="Fryser" />
|
||||
<Tabs.Tab value="test1" icon={<MugIcon />} label="Skap" />
|
||||
<Tabs.Tab
|
||||
value="test2"
|
||||
label="Oppvaskmaskin"
|
||||
icon={<DishwasherIcon />}
|
||||
/>
|
||||
<Tabs.Tab value="test3" icon={<FreezerIcon />} label="Fryser" />
|
||||
</Tabs.List>
|
||||
<Panel />
|
||||
</Tabs>
|
||||
@@ -98,9 +106,13 @@ export const Controlled = () => {
|
||||
return (
|
||||
<Tabs value={activeValue} onChange={setActiveValue}>
|
||||
<Tabs.List>
|
||||
<Tabs.Tab value="test1" icon={<Cup />} label="Skap" />
|
||||
<Tabs.Tab value="test2" label="Oppvaskmaskin" icon={<Dishwasher />} />
|
||||
<Tabs.Tab value="test3" icon={<Freezer />} label="Fryser" />
|
||||
<Tabs.Tab value="test1" icon={<MugIcon />} label="Skap" />
|
||||
<Tabs.Tab
|
||||
value="test2"
|
||||
label="Oppvaskmaskin"
|
||||
icon={<DishwasherIcon />}
|
||||
/>
|
||||
<Tabs.Tab value="test3" icon={<FreezerIcon />} label="Fryser" />
|
||||
</Tabs.List>
|
||||
<Panel />
|
||||
</Tabs>
|
||||
@@ -112,17 +124,25 @@ export const IconPosition = () => {
|
||||
<div className="colgap">
|
||||
<Tabs defaultValue="test2" size="small">
|
||||
<Tabs.List>
|
||||
<Tabs.Tab value="test1" icon={<Cup />} label="Skap" />
|
||||
<Tabs.Tab value="test2" label="Oppvaskmaskin" icon={<Dishwasher />} />
|
||||
<Tabs.Tab value="test3" icon={<Freezer />} label="Fryser" />
|
||||
<Tabs.Tab value="test1" icon={<MugIcon />} label="Skap" />
|
||||
<Tabs.Tab
|
||||
value="test2"
|
||||
label="Oppvaskmaskin"
|
||||
icon={<DishwasherIcon />}
|
||||
/>
|
||||
<Tabs.Tab value="test3" icon={<FreezerIcon />} label="Fryser" />
|
||||
</Tabs.List>
|
||||
<Panel />
|
||||
</Tabs>
|
||||
<Tabs defaultValue="test2" size="small" iconPosition="top">
|
||||
<Tabs.List style={{ margin: "0 auto" }}>
|
||||
<Tabs.Tab value="test1" icon={<Cup />} label="Skap" />
|
||||
<Tabs.Tab value="test2" label="Oppvaskmaskin" icon={<Dishwasher />} />
|
||||
<Tabs.Tab value="test3" icon={<Freezer />} label="Fryser" />
|
||||
<Tabs.Tab value="test1" icon={<MugIcon />} label="Skap" />
|
||||
<Tabs.Tab
|
||||
value="test2"
|
||||
label="Oppvaskmaskin"
|
||||
icon={<DishwasherIcon />}
|
||||
/>
|
||||
<Tabs.Tab value="test3" icon={<FreezerIcon />} label="Fryser" />
|
||||
</Tabs.List>
|
||||
<Panel />
|
||||
</Tabs>
|
||||
@@ -135,17 +155,17 @@ export const Icon = () => {
|
||||
<div className="colgap">
|
||||
<Tabs defaultValue="test2">
|
||||
<Tabs.List style={{ margin: "0 auto" }}>
|
||||
<Tabs.Tab value="test1" icon={<Cup />} />
|
||||
<Tabs.Tab value="test2" icon={<Dishwasher />} />
|
||||
<Tabs.Tab value="test3" icon={<Freezer />} />
|
||||
<Tabs.Tab value="test1" icon={<MugIcon />} />
|
||||
<Tabs.Tab value="test2" icon={<DishwasherIcon />} />
|
||||
<Tabs.Tab value="test3" icon={<FreezerIcon />} />
|
||||
</Tabs.List>
|
||||
<Panel />
|
||||
</Tabs>
|
||||
<Tabs defaultValue="test2" size="small" iconPosition="top">
|
||||
<Tabs.List style={{ margin: "0 auto" }}>
|
||||
<Tabs.Tab value="test1" icon={<Cup />} />
|
||||
<Tabs.Tab value="test2" icon={<Dishwasher />} />
|
||||
<Tabs.Tab value="test3" icon={<Freezer />} />
|
||||
<Tabs.Tab value="test1" icon={<MugIcon />} />
|
||||
<Tabs.Tab value="test2" icon={<DishwasherIcon />} />
|
||||
<Tabs.Tab value="test3" icon={<FreezerIcon />} />
|
||||
</Tabs.List>
|
||||
<Panel />
|
||||
</Tabs>
|
||||
@@ -157,9 +177,13 @@ export const Overflow = () => {
|
||||
return (
|
||||
<Tabs defaultValue="test2" style={{ maxWidth: 300 }}>
|
||||
<Tabs.List>
|
||||
<Tabs.Tab value="test1" icon={<Cup />} label="Skap" />
|
||||
<Tabs.Tab value="test2" label="Oppvaskmaskin" icon={<Dishwasher />} />
|
||||
<Tabs.Tab value="test3" icon={<Freezer />} label="Fryser" />
|
||||
<Tabs.Tab value="test1" icon={<MugIcon />} label="Skap" />
|
||||
<Tabs.Tab
|
||||
value="test2"
|
||||
label="Oppvaskmaskin"
|
||||
icon={<DishwasherIcon />}
|
||||
/>
|
||||
<Tabs.Tab value="test3" icon={<FreezerIcon />} label="Fryser" />
|
||||
</Tabs.List>
|
||||
<Panel />
|
||||
</Tabs>
|
||||
|
||||
@@ -1,5 +1,10 @@
|
||||
/* eslint-disable react-hooks/rules-of-hooks */
|
||||
import { Email, EmailOpened, Send } from "@navikt/ds-icons";
|
||||
|
||||
import {
|
||||
EnvelopeClosedIcon,
|
||||
EnvelopeOpenIcon,
|
||||
InboxUpIcon,
|
||||
} from "@navikt/aksel-icons";
|
||||
import { Meta } from "@storybook/react";
|
||||
import React, { useState } from "react";
|
||||
import { ToggleGroup } from "../index";
|
||||
@@ -27,28 +32,28 @@ const Items = (icon?: boolean, both?: boolean) => (
|
||||
<ToggleGroup.Item value="ulest">
|
||||
{both ? (
|
||||
<>
|
||||
<Email /> Uleste
|
||||
<EnvelopeClosedIcon /> Uleste
|
||||
</>
|
||||
) : (
|
||||
<>{icon ? <Email /> : "Uleste"}</>
|
||||
<>{icon ? <EnvelopeClosedIcon /> : "Uleste"}</>
|
||||
)}
|
||||
</ToggleGroup.Item>
|
||||
<ToggleGroup.Item value="lest">
|
||||
{both ? (
|
||||
<>
|
||||
<EmailOpened /> Leste
|
||||
<EnvelopeOpenIcon /> Leste
|
||||
</>
|
||||
) : (
|
||||
<>{icon ? <EmailOpened /> : "Leste"}</>
|
||||
<>{icon ? <EnvelopeOpenIcon /> : "Leste"}</>
|
||||
)}
|
||||
</ToggleGroup.Item>
|
||||
<ToggleGroup.Item value="sendt">
|
||||
{both ? (
|
||||
<>
|
||||
<Send /> Sendte
|
||||
<InboxUpIcon /> Sendt
|
||||
</>
|
||||
) : (
|
||||
<>{icon ? <Send /> : "Sendte"}</>
|
||||
<>{icon ? <InboxUpIcon /> : "Sendt"}</>
|
||||
)}
|
||||
</ToggleGroup.Item>
|
||||
</>
|
||||
|
||||
@@ -1,5 +1,15 @@
|
||||
# @navikt/ds-tailwind
|
||||
|
||||
## 3.1.2
|
||||
|
||||
## 3.1.1
|
||||
|
||||
## 3.1.0
|
||||
|
||||
## 3.0.1
|
||||
|
||||
## 3.0.0
|
||||
|
||||
## 2.9.8
|
||||
|
||||
## 2.9.7
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-tailwind",
|
||||
"version": "2.9.8",
|
||||
"version": "3.1.2",
|
||||
"description": "Tailwind config based on @navikt/ds-tokens",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"keywords": [
|
||||
@@ -22,7 +22,7 @@
|
||||
"directory": "@navikt/core/tailwind"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-tokens": "^2.9.8",
|
||||
"@navikt/ds-tokens": "^3.1.2",
|
||||
"@types/jest": "^29.0.0",
|
||||
"color": "4.2.3",
|
||||
"jest": "^29.0.0",
|
||||
|
||||
@@ -1,5 +1,15 @@
|
||||
# @navikt/ds-tokens
|
||||
|
||||
## 3.1.2
|
||||
|
||||
## 3.1.1
|
||||
|
||||
## 3.1.0
|
||||
|
||||
## 3.0.1
|
||||
|
||||
## 3.0.0
|
||||
|
||||
## 2.9.8
|
||||
|
||||
## 2.9.7
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-tokens",
|
||||
"version": "2.9.8",
|
||||
"version": "3.1.2",
|
||||
"description": "Design-tokens for NAV designsystem",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React from "react";
|
||||
import { Meta } from "@storybook/react";
|
||||
import * as tokens from "../dist/tokens.js";
|
||||
import { Tooltip } from "@navikt/ds-react";
|
||||
|
||||
export default {
|
||||
title: "ds-tokens/Spacing",
|
||||
@@ -14,20 +15,35 @@ export const Spacing = () => {
|
||||
);
|
||||
|
||||
const sortObject = Object.fromEntries(
|
||||
Object.entries(allSpacing).sort(
|
||||
(a, b) =>
|
||||
Object.entries(allSpacing).sort((a, b) => {
|
||||
if (a[0].endsWith("05"))
|
||||
return 0.5 - Number(b[0].replace("ASpacing", ""));
|
||||
if (b[0].endsWith("05"))
|
||||
return Number(a[0].replace("ASpacing", "")) - 0.5;
|
||||
return (
|
||||
Number(a[0].replace("ASpacing", "")) -
|
||||
Number(b[0].replace("ASpacing", ""))
|
||||
)
|
||||
);
|
||||
})
|
||||
);
|
||||
|
||||
const fontSize = 16;
|
||||
|
||||
return (
|
||||
<div className="colgap">
|
||||
{Object.entries(sortObject).map(([key, val]) => (
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(3, 1fr)",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<span style={{ gridColumn: "1 / 2" }}>{key}</span>
|
||||
<div
|
||||
key={key}
|
||||
style={{
|
||||
gridColumn: "2 / 3",
|
||||
width: val,
|
||||
height: 40,
|
||||
backgroundColor: "var(--a-lightblue-200)",
|
||||
@@ -35,6 +51,17 @@ export const Spacing = () => {
|
||||
alignItems: "center",
|
||||
}}
|
||||
/>
|
||||
<span style={{ gridColumn: "3 / 3", margin: "0 var(--a-spacing-2)" }}>
|
||||
<b>{`${parseFloat(val.replace("rem", "")) * fontSize}px`}</b>
|
||||
<span> = </span>
|
||||
<Tooltip content={val}>
|
||||
<u>{`${val.replace("rem", "")}`}</u>
|
||||
</Tooltip>
|
||||
<span> x </span>
|
||||
<Tooltip content="font-size">
|
||||
<u>{`${fontSize}`}</u>
|
||||
</Tooltip>
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,15 @@
|
||||
# @navikt/ds-icons
|
||||
|
||||
## 3.1.2
|
||||
|
||||
## 3.1.1
|
||||
|
||||
## 3.1.0
|
||||
|
||||
## 3.0.1
|
||||
|
||||
## 3.0.0
|
||||
|
||||
## 2.9.8
|
||||
|
||||
## 2.9.7
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
# Aksel icons
|
||||
# Icons
|
||||
|
||||
Icons created and used by NAVs designsystem
|
||||
Lagacy-icons created and previously used by NAVs designsystem
|
||||
|
||||
## End of life
|
||||
|
||||
This package will not recieve any new icons and we recommend transitioning over to our new icon-package [@navikt/aksel-icons](https://npmjs.com/package/@navikt/aksel-icons).
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-icons",
|
||||
"version": "2.9.8",
|
||||
"version": "3.1.2",
|
||||
"description": "Aksel icons for NAV",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"repository": {
|
||||
|
||||
@@ -1,5 +1,28 @@
|
||||
# @navikt/ds-css-internal
|
||||
|
||||
## 3.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [`5e79234ef`](https://github.com/navikt/aksel/commit/5e79234effb8c8fc73c9bb0c34737e99fab1510b) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset pin alignment for Timeline
|
||||
|
||||
## 3.1.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [`14379a02c`](https://github.com/navikt/aksel/commit/14379a02c3d32091a8c33061464160d7de9f3f2e) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Timeline håndterte ikke SVG ikoner riktig
|
||||
|
||||
## 3.1.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- [#1966](https://github.com/navikt/aksel/pull/1966) [`f1c4c46eb`](https://github.com/navikt/aksel/commit/f1c4c46ebb0522561483f18e3b86b190cf9cc372) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Alle komponenter bruker nå default `:focus-visible` for fokusmarkering.
|
||||
(Alle komponenter som bruker `:focus-visible` har også en fallback for `:focus`)
|
||||
|
||||
## 3.0.1
|
||||
|
||||
## 3.0.0
|
||||
|
||||
## 2.9.8
|
||||
|
||||
## 2.9.7
|
||||
|
||||
@@ -63,6 +63,13 @@
|
||||
box-shadow: inset 0 0 0 2px var(--a-border-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navdsi-dropdown__item:focus {
|
||||
outline: none;
|
||||
box-shadow: inset 0 0 0 2px var(--a-border-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navdsi-dropdown__item:disabled {
|
||||
color: var(--ac-dropdown-item-text, var(--a-text-action));
|
||||
opacity: 0.3;
|
||||
|
||||
@@ -59,12 +59,20 @@ button.navdsi-header__title:hover,
|
||||
background-color: var(--ac-header-hover-bg, var(--a-surface-inverted-hover));
|
||||
}
|
||||
|
||||
.navdsi-header__title:focus,
|
||||
.navdsi-header__button:focus {
|
||||
.navdsi-header__title:focus-visible,
|
||||
.navdsi-header__button:focus-visible {
|
||||
box-shadow: var(--navdsi-header-focus);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navdsi-header__title:focus,
|
||||
.navdsi-header__button:focus {
|
||||
box-shadow: var(--navdsi-header-focus);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
a.navdsi-header__title:active,
|
||||
button.navdsi-header__title:active,
|
||||
.navdsi-header__button:active {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-css-internal",
|
||||
"version": "2.9.8",
|
||||
"version": "3.1.2",
|
||||
"description": "CSS for NAV internal Designsystem-components",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"keywords": [
|
||||
|
||||
@@ -12,7 +12,6 @@
|
||||
height: 1rem;
|
||||
box-sizing: content-box;
|
||||
grid-column: 2;
|
||||
margin-left: var(--a-spacing-8);
|
||||
}
|
||||
|
||||
.navdsi-timeline__row-label {
|
||||
@@ -40,7 +39,6 @@
|
||||
display: flex;
|
||||
background: var(--ac-timeline-row-bg, var(--a-surface-subtle));
|
||||
margin: var(--a-spacing-4) 0;
|
||||
padding-left: var(--a-spacing-8);
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
@@ -85,6 +83,10 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navdsi-timeline__period--inner svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navdsi-timeline__period--clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -190,7 +192,7 @@
|
||||
top: calc(-12.5px + 3.5px);
|
||||
}
|
||||
|
||||
.navdsi-timeline__pin-button:focus {
|
||||
.navdsi-timeline__pin-button:focus-visible {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
|
||||
0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 4px var(--a-surface-default),
|
||||
0 0 0 6px var(--a-border-focus);
|
||||
@@ -202,12 +204,27 @@
|
||||
0 0 0 4px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 5px var(--a-surface-default);
|
||||
}
|
||||
|
||||
.navdsi-timeline__pin-button:hover:focus {
|
||||
.navdsi-timeline__pin-button:hover:focus-visible {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
|
||||
0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 4px var(--a-surface-default),
|
||||
0 0 0 6px var(--a-border-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navdsi-timeline__pin-button:focus {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
|
||||
0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 4px var(--a-surface-default),
|
||||
0 0 0 6px var(--a-border-focus);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.navdsi-timeline__pin-button:hover:focus {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
|
||||
0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 4px var(--a-surface-default),
|
||||
0 0 0 6px var(--a-border-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navdsi-timeline__pin-wrapper::before {
|
||||
content: "";
|
||||
top: var(--navdsc-timeline-pin-size);
|
||||
@@ -255,13 +272,13 @@
|
||||
color: var(--ac-timeline-zoom-selected-text, var(--a-text-on-inverted));
|
||||
}
|
||||
|
||||
.navdsi-timeline__period:focus {
|
||||
.navdsi-timeline__period:focus-visible {
|
||||
outline: none;
|
||||
z-index: 4;
|
||||
box-shadow: 0 0 0 2px var(--a-border-focus);
|
||||
}
|
||||
|
||||
.navdsi-timeline__period--selected:focus {
|
||||
.navdsi-timeline__period--selected:focus-visible {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
|
||||
0 0 0 2px var(--a-border-focus);
|
||||
z-index: 3;
|
||||
@@ -271,12 +288,36 @@
|
||||
z-index: var(--a-z-index-focus);
|
||||
}
|
||||
|
||||
.navdsi-timeline__zoom-button:focus {
|
||||
.navdsi-timeline__zoom-button:focus-visible {
|
||||
box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 3px var(--a-border-focus);
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.navdsi-timeline__zoom li:not(:last-child) .navdsi-timeline__zoom-button:focus {
|
||||
.navdsi-timeline__zoom li:not(:last-child) .navdsi-timeline__zoom-button:focus-visible {
|
||||
margin-right: 2px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navdsi-timeline__period:focus {
|
||||
outline: none;
|
||||
z-index: 4;
|
||||
box-shadow: 0 0 0 2px var(--a-border-focus);
|
||||
}
|
||||
|
||||
.navdsi-timeline__period--selected:focus {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
|
||||
0 0 0 2px var(--a-border-focus);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.navdsi-timeline__zoom-button:focus {
|
||||
box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 3px var(--a-border-focus);
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.navdsi-timeline__zoom li:not(:last-child) .navdsi-timeline__zoom-button:focus {
|
||||
margin-right: 2px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,64 @@
|
||||
# @navikt/ds-react-internal
|
||||
|
||||
## 3.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/ds-react@3.1.2
|
||||
- @navikt/aksel-icons@3.1.2
|
||||
|
||||
## 3.1.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [`14379a02c`](https://github.com/navikt/aksel/commit/14379a02c3d32091a8c33061464160d7de9f3f2e) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Timeline håndterte ikke SVG ikoner riktig
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/ds-react@3.1.1
|
||||
- @navikt/aksel-icons@3.1.1
|
||||
|
||||
## 3.1.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [[`9d2cd9e7f`](https://github.com/navikt/aksel/commit/9d2cd9e7fffb3cf6310c88229ee39ea85db19bca)]:
|
||||
- @navikt/ds-react@3.1.0
|
||||
- @navikt/aksel-icons@3.1.0
|
||||
|
||||
## 3.0.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [[`fa2ead912`](https://github.com/navikt/aksel/commit/fa2ead912a4db15d1fa7e2c3efccbe69a64dc9a7), [`db3846f5c`](https://github.com/navikt/aksel/commit/db3846f5cd483ad0ca24bc5938cfcdb64260f89d)]:
|
||||
- @navikt/ds-react@3.0.1
|
||||
- @navikt/aksel-icons@3.0.1
|
||||
|
||||
## 3.0.0
|
||||
|
||||
### Major Changes
|
||||
|
||||
- [#1964](https://github.com/navikt/aksel/pull/1964) [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Aksels løsninger bruker nå `@navikt/aksel-icons`
|
||||
|
||||
**Sideeffects av ikonendringer**
|
||||
|
||||
- Komponenter som tidligere brukte Expand-ikon har fått oppdatert animasjon (table, readmore og accordion)
|
||||
- Alert bruker samme ikonstørrelse for alle størrelser
|
||||
- Chips har justert padding/ikonstørrelser
|
||||
- Datepicker hover-bug på knapper er fikset
|
||||
- Helptekst bruker nå et custom-ikon.
|
||||
- Select har fått justert padding rundt ikon
|
||||
- Switch bruker samme checkmark som checkbox, er nå avrundet
|
||||
- ReadMore har justert margin for alignment med ikon, fjernet content-animasjon
|
||||
- Tabs bruker default text-default nå
|
||||
- Stepper har endret hvordan den styler checkmark-ikon.
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [[`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f), [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f)]:
|
||||
- @navikt/ds-react@3.0.0
|
||||
- @navikt/aksel-icons@3.0.0
|
||||
|
||||
## 2.9.8
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-react-internal",
|
||||
"version": "2.9.8",
|
||||
"version": "3.1.2",
|
||||
"description": "Aksel react components for internal UIs in NAV",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"license": "MIT",
|
||||
@@ -36,8 +36,8 @@
|
||||
"watch": "tsc --watch -p tsconfig.esm.json"
|
||||
},
|
||||
"dependencies": {
|
||||
"@navikt/ds-icons": "^2.9.8",
|
||||
"@navikt/ds-react": "^2.9.8",
|
||||
"@navikt/aksel-icons": "^3.1.2",
|
||||
"@navikt/ds-react": "^3.1.2",
|
||||
"clsx": "^1.1.1",
|
||||
"copy-to-clipboard": "^3.3.1"
|
||||
},
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Copy } from "@navikt/ds-icons";
|
||||
import { FilesIcon } from "@navikt/aksel-icons";
|
||||
import cl from "clsx";
|
||||
import copy from "copy-to-clipboard";
|
||||
import React, { forwardRef, useEffect, useMemo, useRef, useState } from "react";
|
||||
@@ -108,7 +108,7 @@ export const CopyToClipboard = forwardRef<
|
||||
className={cl("navdsi-copy-to-clipboard", className)}
|
||||
onClick={handleClick}
|
||||
size={size}
|
||||
icon={<Copy title={copyTitle} aria-hidden={!copyTitle} />}
|
||||
icon={<FilesIcon title={copyTitle} aria-hidden={!copyTitle} />}
|
||||
iconPosition={iconPosition}
|
||||
{...rest}
|
||||
>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { Meta } from "@storybook/react";
|
||||
import * as React from "react";
|
||||
import { Link } from "@navikt/ds-icons";
|
||||
import { LinkIcon } from "@navikt/aksel-icons";
|
||||
|
||||
import { CopyToClipboard } from "../index";
|
||||
|
||||
@@ -104,13 +104,13 @@ export const Ikon = () => (
|
||||
iconPosition="right"
|
||||
popoverText="Kopierte lenke"
|
||||
copyText="3.14"
|
||||
icon={<Link />}
|
||||
icon={<LinkIcon />}
|
||||
/>
|
||||
<CopyToClipboard
|
||||
iconPosition="left"
|
||||
popoverText="Kopierte lenke"
|
||||
copyText="3.14"
|
||||
icon={<Link />}
|
||||
icon={<LinkIcon />}
|
||||
>
|
||||
Kopier lenke
|
||||
</CopyToClipboard>
|
||||
|
||||
@@ -2,7 +2,7 @@ import React, { forwardRef } from "react";
|
||||
import cl from "clsx";
|
||||
import { OverridableComponent } from "@navikt/ds-react";
|
||||
import { BodyShort, Detail } from "@navikt/ds-react";
|
||||
import { Expand } from "@navikt/ds-icons";
|
||||
import { ChevronDownIcon } from "@navikt/aksel-icons";
|
||||
import HeaderButton from "./HeaderButton";
|
||||
|
||||
export interface HeaderUserButtonProps
|
||||
@@ -33,14 +33,11 @@ export const HeaderUserButton: HeaderUserButtonType = forwardRef(
|
||||
<div>
|
||||
<BodyShort size="small" as="div">
|
||||
{name}
|
||||
ass
|
||||
</BodyShort>
|
||||
{description && (
|
||||
<Detail size="small" as="div">
|
||||
{description}
|
||||
</Detail>
|
||||
)}
|
||||
{description && <Detail as="div">{description}</Detail>}
|
||||
</div>
|
||||
<Expand />
|
||||
<ChevronDownIcon title="vis meny" />
|
||||
</HeaderButton>
|
||||
)
|
||||
);
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
import { Expand, ExternalLink, System } from "@navikt/ds-icons";
|
||||
import {
|
||||
ChevronDownIcon,
|
||||
ExternalLinkIcon,
|
||||
MenuGridIcon,
|
||||
} from "@navikt/aksel-icons";
|
||||
import { BodyLong, BodyShort, Detail } from "@navikt/ds-react";
|
||||
import { Meta } from "@storybook/react";
|
||||
import React from "react";
|
||||
@@ -35,24 +39,24 @@ export const Default = {
|
||||
{props.systemMenu && (
|
||||
<Dropdown>
|
||||
<Header.Button as={Dropdown.Toggle} style={{ marginLeft: "auto" }}>
|
||||
<System
|
||||
<MenuGridIcon
|
||||
style={{ fontSize: "1.5rem" }}
|
||||
title="Systemer og oppslagsverk"
|
||||
title="MenuGridIconer og oppslagsverk"
|
||||
/>
|
||||
</Header.Button>
|
||||
<Dropdown.Menu strategy="fixed">
|
||||
<Dropdown.Menu.List>
|
||||
<Dropdown.Menu.List.Item>
|
||||
<span>A.Inntekt</span>
|
||||
<ExternalLink style={{ fontSize: "0.875rem" }} />
|
||||
<ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
|
||||
</Dropdown.Menu.List.Item>
|
||||
<Dropdown.Menu.List.Item>
|
||||
<span>Aa-registeret</span>
|
||||
<ExternalLink style={{ fontSize: "0.875rem" }} />
|
||||
<ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
|
||||
</Dropdown.Menu.List.Item>
|
||||
<Dropdown.Menu.List.Item>
|
||||
<span>Gosys</span>
|
||||
<ExternalLink style={{ fontSize: "0.875rem" }} />
|
||||
<ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
|
||||
</Dropdown.Menu.List.Item>
|
||||
</Dropdown.Menu.List>
|
||||
</Dropdown.Menu>
|
||||
@@ -83,7 +87,7 @@ export const Default = {
|
||||
}}
|
||||
>
|
||||
<BodyShort title="Ola Normann">KH</BodyShort>
|
||||
<Expand />
|
||||
<ChevronDownIcon />
|
||||
</Header.Button>
|
||||
<Dropdown.Menu strategy="fixed">
|
||||
<div>
|
||||
@@ -161,7 +165,7 @@ export const UserWithMenu = () => (
|
||||
}}
|
||||
>
|
||||
<BodyShort title="Ola Normann">KH</BodyShort>
|
||||
<Expand />
|
||||
<ChevronDownIcon />
|
||||
</Header.Button>
|
||||
<Dropdown.Menu strategy="fixed">
|
||||
<div>
|
||||
@@ -187,29 +191,29 @@ export const UserWithMenu = () => (
|
||||
</Header>
|
||||
);
|
||||
|
||||
export const UserWithSystemMenu = () => (
|
||||
export const UserWithMenuGridIconMenu = () => (
|
||||
<Header style={{ width: 600 }}>
|
||||
<Header.Title href="/#home">Tittel med lenke</Header.Title>
|
||||
<Dropdown>
|
||||
<Header.Button as={Dropdown.Toggle} style={{ marginLeft: "auto" }}>
|
||||
<System
|
||||
<MenuGridIcon
|
||||
style={{ fontSize: "1.5rem" }}
|
||||
title="Systemer og oppslagsverk"
|
||||
title="MenuGridIconer og oppslagsverk"
|
||||
/>
|
||||
</Header.Button>
|
||||
<Dropdown.Menu strategy="fixed">
|
||||
<Dropdown.Menu.List>
|
||||
<Dropdown.Menu.List.Item>
|
||||
<span>A.Inntekt</span>
|
||||
<ExternalLink style={{ fontSize: "0.875rem" }} />
|
||||
<ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
|
||||
</Dropdown.Menu.List.Item>
|
||||
<Dropdown.Menu.List.Item>
|
||||
<span>Aa-registeret</span>
|
||||
<ExternalLink style={{ fontSize: "0.875rem" }} />
|
||||
<ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
|
||||
</Dropdown.Menu.List.Item>
|
||||
<Dropdown.Menu.List.Item>
|
||||
<span>Gosys</span>
|
||||
<ExternalLink style={{ fontSize: "0.875rem" }} />
|
||||
<ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
|
||||
</Dropdown.Menu.List.Item>
|
||||
</Dropdown.Menu.List>
|
||||
</Dropdown.Menu>
|
||||
|
||||
Loaded 100 of 110 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user