mirror of
https://github.com/navikt/aksel.git
synced 2026-10-14 01:32:02 +00:00
Compare commits
16
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 github-actions[bot]andgithub-actions[bot]
|
f5f859f845 | ||
|
Ken
|
2eaf531cfe | ||
|
Halvor Haugan
|
a9a17ce050 | ||
|
Trong Huu Nguyen
|
c5644da130 | ||
|
Julian NymarkandKen
|
3af95c4c1f | ||
|
Ken
|
d1bd13f4d1 | ||
|
Ken
|
9f048877e4 | ||
|
Ken
|
39b2ef49b2 | ||
|
Ken
|
ccf3f30ab4 | ||
|
Ken
|
3592f04eab | ||
|
github-actions[bot]andgithub-actions[bot]
|
fbc598529c | ||
|
Ken
|
1df8dcd857 | ||
|
Ken
|
7be9dd88ca | ||
|
Ken
|
4d9691413a | ||
|
Ken
|
2989853f39 | ||
|
Ken
|
bff7c836f8 |
No files matched your search
@@ -16,7 +16,7 @@ jobs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: "16"
|
||||
node-version: "20"
|
||||
- uses: actions/checkout@v3
|
||||
- name: add tokens to .env
|
||||
run: |
|
||||
|
||||
@@ -16,7 +16,7 @@ jobs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: "16"
|
||||
node-version: "20"
|
||||
- uses: actions/checkout@v3
|
||||
- name: add tokens to .env
|
||||
run: |
|
||||
@@ -51,7 +51,7 @@ jobs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: "16"
|
||||
node-version: "20"
|
||||
- uses: actions/checkout@v3
|
||||
- name: add tokens to .env
|
||||
run: |
|
||||
|
||||
@@ -21,7 +21,7 @@ jobs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: "16"
|
||||
node-version: "20"
|
||||
- uses: actions/checkout@v3
|
||||
- name: Login to GitHub Container Registry
|
||||
uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a # Use commit-sha1 instead of tag for security concerns
|
||||
|
||||
@@ -13,7 +13,7 @@ jobs:
|
||||
fetch-depth: 0 # Required to retrieve git history
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 14
|
||||
node-version: "20"
|
||||
|
||||
- name: Restore cache
|
||||
uses: actions/cache@v3
|
||||
|
||||
@@ -26,7 +26,7 @@ jobs:
|
||||
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16.13.0
|
||||
node-version: "20"
|
||||
cache: yarn
|
||||
|
||||
- name: Restore cache
|
||||
|
||||
@@ -22,7 +22,7 @@ jobs:
|
||||
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16.13.0
|
||||
node-version: "20"
|
||||
cache: yarn
|
||||
|
||||
- name: Restore cache
|
||||
|
||||
@@ -18,7 +18,7 @@ jobs:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
node-version: "20"
|
||||
|
||||
- name: add tokens to .env
|
||||
run: |
|
||||
|
||||
@@ -25,7 +25,7 @@ jobs:
|
||||
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16.13.0
|
||||
node-version: "20"
|
||||
cache: yarn
|
||||
|
||||
- uses: denoland/setup-deno@v1
|
||||
|
||||
@@ -18,7 +18,7 @@ jobs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: "16"
|
||||
node-version: "20"
|
||||
- uses: actions/checkout@v3
|
||||
- name: add tokens to .env
|
||||
run: |
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
# @navikt/aksel-icons
|
||||
|
||||
## 5.4.1
|
||||
|
||||
## 5.4.0
|
||||
|
||||
## 5.3.5
|
||||
|
||||
## 5.3.4
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
"@vitejs/plugin-react": "^3.1.0",
|
||||
"postcss": "^8.4.0",
|
||||
"postcss-url": "^10.1.3",
|
||||
"typescript": "^4.8.0",
|
||||
"typescript": "^5.1.6",
|
||||
"vite": "^4.2.0",
|
||||
"vite-plugin-singlefile": "^0.13.3",
|
||||
"vite-plugin-svgr": "^2.4.0"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/aksel-icons",
|
||||
"version": "5.3.5",
|
||||
"version": "5.4.1",
|
||||
"author": "Aksel | NAV",
|
||||
"homepage": "https://aksel.nav.no/ikoner",
|
||||
"repository": {
|
||||
@@ -76,7 +76,7 @@
|
||||
"lodash.startcase": "4.4.0",
|
||||
"react": "^18.0.0",
|
||||
"rehype-parse": "8.0.4",
|
||||
"typescript": "^4.8.0",
|
||||
"typescript": "^5.1.6",
|
||||
"unified": "10.1.2"
|
||||
},
|
||||
"jest": {
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
# @navikt/aksel-stylelint
|
||||
|
||||
## 5.4.1
|
||||
|
||||
## 5.4.0
|
||||
|
||||
## 5.3.5
|
||||
|
||||
## 5.3.4
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/aksel-stylelint",
|
||||
"version": "5.3.5",
|
||||
"version": "5.4.1",
|
||||
"author": "Aksel | NAV",
|
||||
"homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
|
||||
"repository": {
|
||||
@@ -35,8 +35,8 @@
|
||||
"dev": "yarn watch:lint"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-css": "^5.3.5",
|
||||
"@navikt/ds-tokens": "^5.3.5",
|
||||
"@navikt/ds-css": "^5.4.1",
|
||||
"@navikt/ds-tokens": "^5.4.1",
|
||||
"@types/jest": "^29.0.0",
|
||||
"concurrently": "7.2.1",
|
||||
"copyfiles": "2.4.1",
|
||||
@@ -45,7 +45,8 @@
|
||||
"postcss-selector-parser": "^6.0.13",
|
||||
"postcss-value-parser": "^4.2.0",
|
||||
"stylelint": "^14.8.5",
|
||||
"typescript": "^4.8.0"
|
||||
"ts-jest": "^29.0.0",
|
||||
"typescript": "^5.1.6"
|
||||
},
|
||||
"jest": {
|
||||
"preset": "jest-preset-stylelint",
|
||||
|
||||
@@ -1,5 +1,19 @@
|
||||
# @navikt/aksel
|
||||
|
||||
## 5.4.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/ds-css@5.4.1
|
||||
|
||||
## 5.4.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [[`bff7c836f`](https://github.com/navikt/aksel/commit/bff7c836f8b0c604da1bfac49f60d6ae07d04624), [`7be9dd88c`](https://github.com/navikt/aksel/commit/7be9dd88ca8751aa03ddb9f40c21990b6d81a26a)]:
|
||||
- @navikt/ds-css@5.4.0
|
||||
|
||||
## 5.3.5
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/aksel",
|
||||
"version": "5.3.5",
|
||||
"version": "5.4.1",
|
||||
"description": "Aksel command line interface. Handles css-imports, codemods and more",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"license": "MIT",
|
||||
@@ -29,7 +29,7 @@
|
||||
},
|
||||
"homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
|
||||
"dependencies": {
|
||||
"@navikt/ds-css": "5.3.5",
|
||||
"@navikt/ds-css": "5.4.1",
|
||||
"axios": "1.3.6",
|
||||
"chalk": "4.1.0",
|
||||
"clipboardy": "^2.3.0",
|
||||
@@ -49,7 +49,7 @@
|
||||
"jest": "^29.0.0",
|
||||
"rimraf": "3.0.2",
|
||||
"ts-jest": "^29.0.0",
|
||||
"typescript": "^4.8.0"
|
||||
"typescript": "^5.1.6"
|
||||
},
|
||||
"sideEffects": false,
|
||||
"engines": {
|
||||
|
||||
@@ -7,6 +7,7 @@ import {
|
||||
componentDir,
|
||||
rootDir,
|
||||
globalDir,
|
||||
primitivesCss,
|
||||
} from "@navikt/ds-css/config/_mappings";
|
||||
import { inquiry } from "./inquiry";
|
||||
import clipboard from "clipboardy";
|
||||
@@ -143,6 +144,13 @@ function advancedOutput(
|
||||
componentImportsList.unshift(formCss);
|
||||
}
|
||||
|
||||
if (componentImportsList.find((x) => x === primitivesCss)) {
|
||||
componentImportsList = componentImportsList.filter(
|
||||
(x) => x !== primitivesCss
|
||||
);
|
||||
componentImportsList.unshift(primitivesCss);
|
||||
}
|
||||
|
||||
if (componentImportsList.find((x) => x === typoCss)) {
|
||||
componentImportsList = componentImportsList.filter((x) => x !== typoCss);
|
||||
componentImportsList.unshift(typoCss);
|
||||
|
||||
@@ -1,5 +1,17 @@
|
||||
# @navikt/ds-css
|
||||
|
||||
## 5.4.1
|
||||
|
||||
## 5.4.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- Primitives: Nye komponenter `Show` og `Hide` er lagt til. ([#2222](https://github.com/navikt/aksel/pull/2222))
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- ErrorSummary: Har nå 8px border-radius ([#2256](https://github.com/navikt/aksel/pull/2256))
|
||||
|
||||
## 5.3.5
|
||||
|
||||
## 5.3.4
|
||||
|
||||
+66
-34
@@ -1,18 +1,35 @@
|
||||
[data-theme="dark"] {
|
||||
--ac-button-primary-text: var(--a-gray-900);
|
||||
--ac-button-primary-bg: var(--a-blue-200);
|
||||
--ac-button-primary-focus-border: var(--a-gray-900);
|
||||
--ac-button-primary-hover-bg: var(--a-blue-300);
|
||||
--ac-button-primary-active-bg: var(--a-blue-400);
|
||||
--ac-button-secondary-text: var(--a-white);
|
||||
--ac-button-secondary-hover-text: var(--a-white);
|
||||
--ac-button-secondary-active-text: var(--a-white);
|
||||
--ac-button-secondary-active-focus-border: var(--a-gray-900);
|
||||
--ac-button-secondary-bg: var(--a-gray-900);
|
||||
--ac-button-secondary-border: var(--a-blue-200);
|
||||
--ac-button-secondary-hover-bg: var(--a-gray-800);
|
||||
--ac-button-secondary-focus-border: var(--a-blue-200);
|
||||
--ac-button-secondary-active-bg: var(--a-gray-700);
|
||||
--__ac-button-primary-text: var(--a-gray-900);
|
||||
--__ac-button-primary-bg: var(--a-blue-200);
|
||||
--__ac-button-primary-focus-border: var(--a-gray-900);
|
||||
--__ac-button-primary-hover-bg: var(--a-blue-300);
|
||||
--__ac-button-primary-active-bg: var(--a-blue-400);
|
||||
--__ac-button-secondary-text: var(--a-white);
|
||||
--__ac-button-secondary-hover-text: var(--a-white);
|
||||
--__ac-button-secondary-active-text: var(--a-white);
|
||||
--__ac-button-secondary-active-focus-border: var(--a-gray-900);
|
||||
--__ac-button-secondary-bg: var(--a-gray-900);
|
||||
--__ac-button-secondary-border: var(--a-blue-200);
|
||||
--__ac-button-secondary-hover-bg: var(--a-gray-800);
|
||||
--__ac-button-secondary-focus-border: var(--a-blue-200);
|
||||
--__ac-button-secondary-active-bg: var(--a-gray-700);
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
--__ac-button-primary-text: initial;
|
||||
--__ac-button-primary-bg: initial;
|
||||
--__ac-button-primary-focus-border: initial;
|
||||
--__ac-button-primary-hover-bg: initial;
|
||||
--__ac-button-primary-active-bg: initial;
|
||||
--__ac-button-secondary-text: initial;
|
||||
--__ac-button-secondary-hover-text: initial;
|
||||
--__ac-button-secondary-active-text: initial;
|
||||
--__ac-button-secondary-active-focus-border: initial;
|
||||
--__ac-button-secondary-bg: initial;
|
||||
--__ac-button-secondary-border: initial;
|
||||
--__ac-button-secondary-hover-bg: initial;
|
||||
--__ac-button-secondary-focus-border: initial;
|
||||
--__ac-button-secondary-active-bg: initial;
|
||||
}
|
||||
|
||||
.navds-button {
|
||||
@@ -109,25 +126,29 @@
|
||||
*************************/
|
||||
|
||||
.navds-button--primary {
|
||||
background-color: var(--ac-button-primary-bg, var(--a-surface-action));
|
||||
color: var(--ac-button-primary-text, var(--a-text-on-action));
|
||||
background-color: var(--ac-button-primary-bg, var(--__ac-button-primary-bg, var(--a-surface-action)));
|
||||
color: var(--ac-button-primary-text, var(--__ac-button-primary-text, var(--a-text-on-action)));
|
||||
}
|
||||
|
||||
.navds-button--primary:hover {
|
||||
background-color: var(--ac-button-primary-hover-bg, var(--a-surface-action-hover));
|
||||
background-color: var(--ac-button-primary-hover-bg, var(--__ac-button-primary-hover-bg, var(--a-surface-action-hover)));
|
||||
}
|
||||
|
||||
.navds-button--primary:active {
|
||||
background-color: var(--ac-button-primary-active-bg, var(--a-surface-action-active));
|
||||
background-color: var(--ac-button-primary-active-bg, var(--__ac-button-primary-active-bg, var(--a-surface-action-active)));
|
||||
}
|
||||
|
||||
.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);
|
||||
box-shadow: inset 0 0 0 1px
|
||||
var(--ac-button-primary-focus-border, 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);
|
||||
box-shadow: inset 0 0 0 1px
|
||||
var(--ac-button-primary-focus-border, var(--__ac-button-primary-focus-border, var(--a-surface-default))),
|
||||
var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -173,47 +194,58 @@
|
||||
**************************/
|
||||
|
||||
.navds-button--secondary {
|
||||
color: var(--ac-button-secondary-text, var(--a-text-action));
|
||||
background-color: var(--ac-button-secondary-bg, var(--a-surface-transparent));
|
||||
box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--a-border-action));
|
||||
color: var(--ac-button-secondary-text, var(--__ac-button-secondary-text, var(--a-text-action)));
|
||||
background-color: var(--ac-button-secondary-bg, var(--__ac-button-secondary-bg, var(--a-surface-transparent)));
|
||||
box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--__ac-button-secondary-border, var(--a-border-action)));
|
||||
}
|
||||
|
||||
.navds-button--secondary:hover {
|
||||
color: var(--ac-button-secondary-hover-text, var(--a-text-action-on-action-subtle));
|
||||
background-color: var(--ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover));
|
||||
color: var(--ac-button-secondary-hover-text, var(--__ac-button-secondary-hover-text, var(--a-text-action-on-action-subtle)));
|
||||
background-color: var(
|
||||
--ac-button-secondary-hover-bg,
|
||||
var(--__ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover))
|
||||
);
|
||||
}
|
||||
|
||||
.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);
|
||||
box-shadow: inset 0 0 0 2px
|
||||
var(--ac-button-secondary-focus-border, 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);
|
||||
box-shadow: inset 0 0 0 2px
|
||||
var(--ac-button-secondary-focus-border, 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));
|
||||
color: var(--ac-button-secondary-active-text, var(--__ac-button-secondary-active-text, var(--a-text-on-action)));
|
||||
background-color: var(--ac-button-secondary-active-bg, var(--__ac-button-secondary-active-bg, var(--a-surface-action-active)));
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.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);
|
||||
box-shadow: inset 0 0 0 1px
|
||||
var(--ac-button-secondary-active-focus-border, 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);
|
||||
box-shadow: inset 0 0 0 1px
|
||||
var(--ac-button-secondary-active-focus-border, 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));
|
||||
background-color: var(--ac-button-secondary-bg, var(--a-surface-transparent));
|
||||
box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--a-border-action));
|
||||
color: var(--ac-button-secondary-text, var(--__ac-button-secondary-text, var(--a-text-action)));
|
||||
background-color: var(--ac-button-secondary-bg, var(--__ac-button-secondary-bg, var(--a-surface-transparent)));
|
||||
box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--__ac-button-secondary-border, var(--a-border-action)));
|
||||
}
|
||||
|
||||
/**************************
|
||||
|
||||
+1
@@ -3,6 +3,7 @@ export declare const globalDir = "dist/global";
|
||||
export declare const componentDir = "dist/component";
|
||||
export declare const typoCss = "typography.css";
|
||||
export declare const formCss = "form.css";
|
||||
export declare const primitivesCss = "primitives.css";
|
||||
export declare const componentsCss = "components.css";
|
||||
export declare const StyleMappings: {
|
||||
baseline: {
|
||||
|
||||
@@ -4,6 +4,7 @@ const componentDir = "dist/component";
|
||||
|
||||
const typoCss = "typography.css";
|
||||
const formCss = "form.css";
|
||||
const primitivesCss = "primitives.css";
|
||||
const componentsCss = "components.css";
|
||||
|
||||
const StyleMappings = {
|
||||
@@ -101,7 +102,7 @@ const StyleMappings = {
|
||||
},
|
||||
{
|
||||
component: "HGrid",
|
||||
main: "hgrid.css",
|
||||
main: primitivesCss,
|
||||
},
|
||||
{ component: "Ingress", main: typoCss },
|
||||
{
|
||||
@@ -140,15 +141,23 @@ const StyleMappings = {
|
||||
{ component: "Stepper", main: "stepper.css", dependencies: [typoCss] },
|
||||
{
|
||||
component: "HStack",
|
||||
main: "stack.css",
|
||||
main: primitivesCss,
|
||||
},
|
||||
{
|
||||
component: "VStack",
|
||||
main: "stack.css",
|
||||
main: primitivesCss,
|
||||
},
|
||||
{
|
||||
component: "Spacer",
|
||||
main: "stack.css",
|
||||
main: primitivesCss,
|
||||
},
|
||||
{
|
||||
component: "Show",
|
||||
main: primitivesCss,
|
||||
},
|
||||
{
|
||||
component: "Hide",
|
||||
main: primitivesCss,
|
||||
},
|
||||
{ component: "Switch", main: formCss, dependencies: [typoCss] },
|
||||
{ component: "Table", main: "table.css", dependencies: [typoCss] },
|
||||
@@ -184,6 +193,7 @@ module.exports = {
|
||||
StyleMappings,
|
||||
typoCss,
|
||||
formCss,
|
||||
primitivesCss,
|
||||
componentsCss,
|
||||
rootDir,
|
||||
globalDir,
|
||||
|
||||
@@ -16,6 +16,7 @@ const {
|
||||
rootDir,
|
||||
globalDir,
|
||||
componentDir,
|
||||
primitivesCss,
|
||||
} = require("./_mappings.js");
|
||||
|
||||
run();
|
||||
@@ -123,6 +124,11 @@ function buildFragmentFiles() {
|
||||
output: `${componentDir}/${formCss}`,
|
||||
});
|
||||
|
||||
files.push({
|
||||
input: "primitives/index.css",
|
||||
output: `${componentDir}/${primitivesCss}`,
|
||||
});
|
||||
|
||||
return files;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,10 +1,17 @@
|
||||
[data-theme="dark"] .navds-copybutton,
|
||||
[data-theme="dark"].navds-copybutton {
|
||||
--a-text-action: var(--a-blue-300);
|
||||
--a-surface-hover: rgb(214 231 255 /0.13);
|
||||
--a-icon-success: rgb(51 170 95 /1);
|
||||
--a-text-subtle: rgb(231 240 254 /0.69);
|
||||
--a-text-default: rgb(251 252 254 /0.96);
|
||||
[data-theme="dark"] {
|
||||
--__ac-copybutton-action-text: var(--a-blue-300);
|
||||
--__ac-copybutton-bg-hover: rgb(214 231 255 /0.13);
|
||||
--__ac-copybutton-icon-success: rgb(51 170 95 /1);
|
||||
--__ac-copybutton-neutral-text: rgb(231 240 254 /0.69);
|
||||
--__ac-copybutton-text: rgb(251 252 254 /0.96);
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
--__ac-copybutton-action-text: initial;
|
||||
--__ac-copybutton-bg-hover: initial;
|
||||
--__ac-copybutton-icon-success: initial;
|
||||
--__ac-copybutton-neutral-text: initial;
|
||||
--__ac-copybutton-text: initial;
|
||||
}
|
||||
|
||||
.navds-copybutton {
|
||||
@@ -84,46 +91,46 @@
|
||||
|
||||
/* Variant/action */
|
||||
.navds-copybutton--action {
|
||||
color: var(--ac-copybutton-action-text, var(--a-text-action));
|
||||
color: var(--ac-copybutton-action-text, var(--__ac-copybutton-action-text, var(--a-text-action)));
|
||||
background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
|
||||
}
|
||||
|
||||
.navds-copybutton--action:hover {
|
||||
color: var(--ac-copybutton-action-hover-text, var(--a-text-action));
|
||||
background-color: var(--ac-copybutton-action-hover-bg, var(--a-surface-hover));
|
||||
color: var(--ac-copybutton-action-hover-text, var(--__ac-copybutton-action-text, var(--a-text-action)));
|
||||
background-color: var(--ac-copybutton-action-hover-bg, var(--__ac-copybutton-bg-hover, var(--a-surface-hover)));
|
||||
}
|
||||
|
||||
.navds-copybutton--action:where(:disabled),
|
||||
.navds-copybutton--action:hover:where(:disabled) {
|
||||
color: var(--ac-copybutton-action-text, var(--a-text-action));
|
||||
color: var(--ac-copybutton-action-text, var(--__ac-copybutton-action-text, var(--a-text-action)));
|
||||
background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.navds-copybutton--active.navds-copybutton--action {
|
||||
color: var(--ac-copybutton-action-active-text, var(--a-icon-success));
|
||||
color: var(--ac-copybutton-action-active-text, var(--__ac-copybutton-icon-success, var(--a-icon-success)));
|
||||
}
|
||||
|
||||
/* Variant/neutral */
|
||||
.navds-copybutton--neutral {
|
||||
color: var(--ac-copybutton-neutral-text, var(--a-text-subtle));
|
||||
color: var(--ac-copybutton-neutral-text, var(--__ac-copybutton-neutral-text, var(--a-text-subtle)));
|
||||
background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
|
||||
}
|
||||
|
||||
.navds-copybutton--neutral:hover {
|
||||
color: var(--ac-copybutton-neutral-hover-text, var(--a-text-default));
|
||||
background-color: var(--ac-copybutton-neutral-hover-bg, var(--a-surface-hover));
|
||||
color: var(--ac-copybutton-neutral-hover-text, var(--__ac-copybutton-text, var(--a-text-default)));
|
||||
background-color: var(--ac-copybutton-neutral-hover-bg, var(--__ac-copybutton-bg-hover, var(--a-surface-hover)));
|
||||
}
|
||||
|
||||
.navds-copybutton--neutral:where(:disabled, .navds-copybutton--disabled),
|
||||
.navds-copybutton--neutral:hover:where(:disabled, .navds-copybutton--disabled) {
|
||||
color: var(--ac-copybutton-neutral-text, var(--a-text-default));
|
||||
color: var(--ac-copybutton-neutral-text, var(--__ac-copybutton-text, var(--a-text-default)));
|
||||
background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.navds-copybutton--active.navds-copybutton--neutral {
|
||||
color: var(--ac-copybutton-neutral-active-text, var(--a-text-default));
|
||||
color: var(--ac-copybutton-neutral-active-text, var(--__ac-copybutton-text, var(--a-text-default)));
|
||||
}
|
||||
|
||||
.navds-copybutton__content {
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
background-color: var(--ac-error-summary-bg, var(--a-surface-default));
|
||||
padding: var(--a-spacing-5);
|
||||
border: 4px solid var(--ac-error-summary-border, var(--a-border-danger));
|
||||
border-radius: var(--a-border-radius-large);
|
||||
}
|
||||
|
||||
.navds-error-summary--small {
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
[data-theme="dark"] {
|
||||
--ac-form-description: var(--a-text-on-inverted);
|
||||
--__ac-form-description: var(--a-text-on-inverted);
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
--__ac-form-description: initial;
|
||||
}
|
||||
|
||||
.navds-fieldset {
|
||||
@@ -14,7 +18,7 @@
|
||||
}
|
||||
|
||||
.navds-fieldset__description {
|
||||
color: var(--ac-form-description, var(--a-text-subtle));
|
||||
color: var(--ac-form-description, var(--__ac-form-description, var(--a-text-subtle)));
|
||||
}
|
||||
|
||||
.navds-fieldset > .navds-fieldset__description:not(:empty) {
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
[data-theme="dark"] {
|
||||
--ac-form-description: var(--a-text-on-inverted);
|
||||
--__ac-form-description: var(--a-text-on-inverted);
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
--__ac-form-description: initial;
|
||||
}
|
||||
|
||||
.navds-form-field {
|
||||
@@ -10,7 +14,7 @@
|
||||
|
||||
.navds-form-field__description {
|
||||
margin-top: -0.375rem;
|
||||
color: var(--ac-form-description, var(--a-text-subtle));
|
||||
color: var(--ac-form-description, var(--__ac-form-description, var(--a-text-subtle)));
|
||||
}
|
||||
|
||||
.navds-form-field .navds-error-message,
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
[data-theme="dark"] {
|
||||
--ac-search-button-border: var(--a-border-on-inverted);
|
||||
--ac-search-button-border-hover: var(--a-blue-200);
|
||||
--ac-search-clear-icon: var(--a-white);
|
||||
--ac-search-clear-icon-hover: var(--a-blue-200);
|
||||
--ac-search-error-border: var(--a-red-300);
|
||||
--__ac-search-button-border: var(--a-border-on-inverted);
|
||||
--__ac-search-button-border-hover: var(--a-blue-200);
|
||||
--__ac-search-clear-icon: var(--a-white);
|
||||
--__ac-search-clear-icon-hover: var(--a-blue-200);
|
||||
--__ac-search-error-border: var(--a-red-300);
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
--__ac-search-button-border: initial;
|
||||
--__ac-search-button-border-hover: initial;
|
||||
--__ac-search-clear-icon: initial;
|
||||
--__ac-search-clear-icon-hover: initial;
|
||||
--__ac-search-error-border: initial;
|
||||
}
|
||||
|
||||
.navds-search {
|
||||
@@ -65,7 +73,7 @@
|
||||
position: absolute;
|
||||
right: 0.75rem;
|
||||
border-radius: var(--a-border-radius-medium);
|
||||
color: var(--ac-search-clear-icon, var(--a-text-default));
|
||||
color: var(--ac-search-clear-icon, var(--__ac-search-clear-icon, var(--a-text-default)));
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
top: 50%;
|
||||
@@ -87,7 +95,7 @@
|
||||
}
|
||||
|
||||
.navds-search__button-clear:hover {
|
||||
color: var(--ac-search-clear-icon-hover, var(--a-text-action));
|
||||
color: var(--ac-search-clear-icon-hover, var(--__ac-search-clear-icon-hover, var(--a-text-action)));
|
||||
}
|
||||
|
||||
.navds-search__button-clear:focus-visible {
|
||||
@@ -120,16 +128,17 @@
|
||||
}
|
||||
|
||||
.navds-search__button-search.navds-button--secondary {
|
||||
box-shadow: -1px 0 0 0 var(--ac-search-button-border, var(--a-border-default)) inset,
|
||||
0 1px 0 0 var(--ac-search-button-border, var(--a-border-default)) inset,
|
||||
0 -1px 0 0 var(--ac-search-button-border, var(--a-border-default)) inset;
|
||||
box-shadow: -1px 0 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
|
||||
0 1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
|
||||
0 -1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset;
|
||||
}
|
||||
|
||||
.navds-search__button-search.navds-button--secondary:hover {
|
||||
box-shadow: -1px 0 0 0 var(--ac-search-button-border-hover, var(--a-border-action)) inset,
|
||||
0 1px 0 0 var(--ac-search-button-border-hover, var(--a-border-action)) inset,
|
||||
0 -1px 0 0 var(--ac-search-button-border-hover, var(--a-border-action)) inset,
|
||||
-1px 0 0 0 var(--ac-search-button-border-hover, var(--a-border-action));
|
||||
box-shadow: -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action)))
|
||||
inset,
|
||||
0 1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
|
||||
0 -1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
|
||||
-1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action)));
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@@ -138,11 +147,13 @@
|
||||
}
|
||||
|
||||
.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);
|
||||
box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
|
||||
var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
.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);
|
||||
box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
|
||||
var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-search__button-search.navds-button--secondary:focus-visible:active {
|
||||
@@ -151,11 +162,14 @@
|
||||
|
||||
@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);
|
||||
box-shadow: 0 0 0 1px var(--ac-search-button-border, 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);
|
||||
box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action)))
|
||||
inset,
|
||||
var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-search__button-search.navds-button--secondary:focus:active {
|
||||
@@ -165,12 +179,13 @@
|
||||
|
||||
/* 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));
|
||||
border-color: var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
|
||||
box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
|
||||
}
|
||||
|
||||
.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);
|
||||
box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
|
||||
var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
/* Focus layering */
|
||||
@@ -182,7 +197,8 @@
|
||||
|
||||
@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);
|
||||
box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
|
||||
var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-search__input:focus,
|
||||
|
||||
@@ -1,21 +1,30 @@
|
||||
[data-theme="dark"] {
|
||||
--ac-textfield-text: var(--a-text-on-inverted);
|
||||
--ac-textfield-bg: var(--a-surface-inverted);
|
||||
--ac-textfield-border: var(--a-border-on-inverted);
|
||||
--ac-textfield-hover-border: var(--a-blue-200);
|
||||
--ac-textfield-placeholder: var(--a-gray-500);
|
||||
--ac-textfield-error-border: var(--a-red-300);
|
||||
--__ac-textfield-text: var(--a-text-on-inverted);
|
||||
--__ac-textfield-bg: var(--a-surface-inverted);
|
||||
--__ac-textfield-border: var(--a-border-on-inverted);
|
||||
--__ac-textfield-hover-border: var(--a-blue-200);
|
||||
--__ac-textfield-placeholder: var(--a-gray-500);
|
||||
--__ac-textfield-error-border: var(--a-red-300);
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
--__ac-textfield-text: initial;
|
||||
--__ac-textfield-bg: initial;
|
||||
--__ac-textfield-border: initial;
|
||||
--__ac-textfield-hover-border: initial;
|
||||
--__ac-textfield-placeholder: initial;
|
||||
--__ac-textfield-error-border: initial;
|
||||
}
|
||||
|
||||
.navds-text-field__input {
|
||||
appearance: none;
|
||||
padding: var(--a-spacing-2);
|
||||
background-color: var(--ac-textfield-bg, var(--a-surface-default));
|
||||
background-color: var(--ac-textfield-bg, var(--__ac-textfield-bg, var(--a-surface-default)));
|
||||
border-radius: var(--a-border-radius-medium);
|
||||
border: 1px solid var(--ac-textfield-border, var(--a-border-default));
|
||||
border: 1px solid var(--ac-textfield-border, var(--__ac-textfield-border, var(--a-border-default)));
|
||||
min-height: 3rem;
|
||||
width: 100%;
|
||||
color: var(--ac-textfield-text, var(--a-text-default));
|
||||
color: var(--ac-textfield-text, var(--__ac-textfield-text, var(--a-text-default)));
|
||||
}
|
||||
|
||||
.navds-text-field__input[size] {
|
||||
@@ -23,7 +32,7 @@
|
||||
}
|
||||
|
||||
.navds-text-field__input::placeholder {
|
||||
color: var(--ac-textfield-placeholder, var(--a-text-subtle));
|
||||
color: var(--ac-textfield-placeholder, var(--__ac-textfield-placeholder, var(--a-text-subtle)));
|
||||
}
|
||||
|
||||
.navds-form-field--small .navds-text-field__input {
|
||||
@@ -32,7 +41,7 @@
|
||||
}
|
||||
|
||||
.navds-text-field__input:hover {
|
||||
border-color: var(--ac-textfield-hover-border, var(--a-border-action));
|
||||
border-color: var(--ac-textfield-hover-border, var(--__ac-textfield-hover-border, var(--a-border-action)));
|
||||
}
|
||||
|
||||
.navds-text-field__input:focus-visible {
|
||||
@@ -51,8 +60,8 @@
|
||||
Error handling
|
||||
*/
|
||||
.navds-text-field--error > .navds-text-field__input:not(:hover):not(:disabled) {
|
||||
border-color: var(--ac-textfield-error-border, var(--a-border-danger));
|
||||
box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--a-border-danger));
|
||||
border-color: var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
|
||||
box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
|
||||
}
|
||||
|
||||
.navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover):not(:disabled) {
|
||||
@@ -67,8 +76,8 @@
|
||||
|
||||
/* Disabled handling */
|
||||
.navds-text-field__input:disabled {
|
||||
background-color: var(--ac-textfield-bg, var(--a-surface-default));
|
||||
border-color: var(--ac-textfield-border, var(--a-border-default));
|
||||
background-color: var(--ac-textfield-bg, var(--__ac-textfield-bg, var(--a-surface-default)));
|
||||
border-color: var(--ac-textfield-border, var(--__ac-textfield-border, var(--a-border-default)));
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@@ -1,12 +1,23 @@
|
||||
[data-theme="dark"] {
|
||||
--ac-textarea-text: var(--a-text-on-inverted);
|
||||
--ac-textarea-bg: var(--a-transparent);
|
||||
--ac-textarea-border: var(--a-border-on-inverted);
|
||||
--ac-textarea-hover-border: var(--a-blue-200);
|
||||
--ac-textarea-placeholder: var(--a-gray-500);
|
||||
--ac-textarea-error-border: var(--a-red-300);
|
||||
--ac-textarea-counter-text: var(--a-gray-300);
|
||||
--ac-textarea-counter-error-text: var(--a-red-300);
|
||||
--__ac-textarea-text: var(--a-text-on-inverted);
|
||||
--__ac-textarea-bg: var(--a-transparent);
|
||||
--__ac-textarea-border: var(--a-border-on-inverted);
|
||||
--__ac-textarea-hover-border: var(--a-blue-200);
|
||||
--__ac-textarea-placeholder: var(--a-gray-500);
|
||||
--__ac-textarea-error-border: var(--a-red-300);
|
||||
--__ac-textarea-counter-text: var(--a-gray-300);
|
||||
--__ac-textarea-counter-error-text: var(--a-red-300);
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
--__ac-textarea-text: initial;
|
||||
--__ac-textarea-bg: initial;
|
||||
--__ac-textarea-border: initial;
|
||||
--__ac-textarea-hover-border: initial;
|
||||
--__ac-textarea-placeholder: initial;
|
||||
--__ac-textarea-error-border: initial;
|
||||
--__ac-textarea-counter-text: initial;
|
||||
--__ac-textarea-counter-error-text: initial;
|
||||
}
|
||||
|
||||
.navds-textarea__wrapper {
|
||||
@@ -17,13 +28,13 @@
|
||||
.navds-textarea__input {
|
||||
appearance: none;
|
||||
padding: var(--a-spacing-2);
|
||||
background-color: var(--ac-textarea-bg, var(--a-surface-default));
|
||||
background-color: var(--ac-textarea-bg, var(--__ac-textarea-bg, var(--a-surface-default)));
|
||||
border-radius: var(--a-border-radius-medium);
|
||||
border: 1px solid var(--ac-textarea-border, var(--a-border-default));
|
||||
border: 1px solid var(--ac-textarea-border, var(--__ac-textarea-border, var(--a-border-default)));
|
||||
resize: none;
|
||||
width: 100%;
|
||||
display: block;
|
||||
color: var(--ac-textarea-text, var(--a-text-default));
|
||||
color: var(--ac-textarea-text, var(--__ac-textarea-text, var(--a-text-default)));
|
||||
}
|
||||
|
||||
.navds-textarea--counter {
|
||||
@@ -31,11 +42,11 @@
|
||||
}
|
||||
|
||||
.navds-textarea__input::placeholder {
|
||||
color: var(--ac-textarea-placeholder, var(--a-text-subtle));
|
||||
color: var(--ac-textarea-placeholder, var(--__ac-textarea-placeholder, var(--a-text-subtle)));
|
||||
}
|
||||
|
||||
.navds-textarea__input:hover {
|
||||
border-color: var(--ac-textarea-hover-border, var(--a-border-action));
|
||||
border-color: var(--ac-textarea-hover-border, var(--__ac-textarea-hover-border, var(--a-border-action)));
|
||||
}
|
||||
|
||||
.navds-textarea__input:focus-visible {
|
||||
@@ -60,7 +71,7 @@
|
||||
|
||||
.navds-textarea__counter {
|
||||
pointer-events: none;
|
||||
color: var(--ac-textarea-counter-text, var(--a-text-subtle));
|
||||
color: var(--ac-textarea-counter-text, var(--__ac-textarea-counter-text, var(--a-text-subtle)));
|
||||
font-style: italic;
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
@@ -70,7 +81,7 @@
|
||||
}
|
||||
|
||||
.navds-textarea__counter--error {
|
||||
color: var(--ac-textarea-counter-error-text, var(--a-text-danger));
|
||||
color: var(--ac-textarea-counter-error-text, var(--__ac-textarea-counter-error-text, var(--a-text-danger)));
|
||||
}
|
||||
|
||||
.navds-textarea--resize .navds-textarea__input {
|
||||
@@ -81,20 +92,20 @@
|
||||
Error handling
|
||||
*/
|
||||
.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));
|
||||
box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
|
||||
border-color: var(--ac-textarea-error-border, 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));
|
||||
box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
|
||||
border-color: var(--ac-textarea-error-border, 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));
|
||||
background-color: var(--ac-textarea-bg, var(--__ac-textarea-bg, var(--a-surface-default)));
|
||||
border-color: var(--ac-textarea-border, var(--__ac-textarea-border, var(--a-border-default)));
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
@charset "UTF-8";
|
||||
@import "baseline/index.css";
|
||||
@import "typography.css";
|
||||
@import "primitives/index.css";
|
||||
@import "grid.css";
|
||||
@import "accordion.css";
|
||||
@import "alert.css";
|
||||
@@ -14,7 +15,6 @@
|
||||
@import "guide-panel.css";
|
||||
@import "form/index.css";
|
||||
@import "help-text.css";
|
||||
@import "hgrid.css";
|
||||
@import "internalheader.css";
|
||||
@import "link.css";
|
||||
@import "loader.css";
|
||||
@@ -30,7 +30,6 @@
|
||||
@import "link-panel.css";
|
||||
@import "read-more.css";
|
||||
@import "skeleton.css";
|
||||
@import "stack.css";
|
||||
@import "stepper.css";
|
||||
@import "table.css";
|
||||
@import "tabs.css";
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-css",
|
||||
"version": "5.3.5",
|
||||
"version": "5.4.1",
|
||||
"description": "CSS for NAV Designsystem",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"keywords": [
|
||||
@@ -27,7 +27,7 @@
|
||||
"css:get-version": "node config/get-version.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-tokens": "^5.3.5",
|
||||
"@navikt/ds-tokens": "^5.4.1",
|
||||
"cssnano": "6.0.0",
|
||||
"fast-glob": "3.2.11",
|
||||
"lodash": "4.17.21",
|
||||
|
||||
File renamed without changes.
@@ -0,0 +1,3 @@
|
||||
@import "hgrid.css";
|
||||
@import "stack.css";
|
||||
@import "responsive.css";
|
||||
@@ -0,0 +1,51 @@
|
||||
.navds-responsive {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
.navds-responsive__above--sm {
|
||||
display: revert;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479px) {
|
||||
.navds-responsive__below--sm {
|
||||
display: revert;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.navds-responsive__above--md {
|
||||
display: revert;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.navds-responsive__below--md {
|
||||
display: revert;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.navds-responsive__above--lg {
|
||||
display: revert;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.navds-responsive__below--lg {
|
||||
display: revert;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.navds-responsive__above--xl {
|
||||
display: revert;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1279px) {
|
||||
.navds-responsive__below--xl {
|
||||
display: revert;
|
||||
}
|
||||
}
|
||||
File renamed without changes.
@@ -1,3 +1,13 @@
|
||||
[data-theme="dark"] {
|
||||
--__ac-typo-error-text: var(--a-red-300);
|
||||
--__ac-typo-text-subtle: var(--a-gray-300);
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
--__ac-typo-error-text: initial;
|
||||
--__ac-typo-text-subtle: initial;
|
||||
}
|
||||
|
||||
/* Heading */
|
||||
.navds-heading {
|
||||
font-weight: var(--a-font-weight-bold);
|
||||
@@ -202,13 +212,8 @@
|
||||
margin-bottom: var(--a-spacing-2);
|
||||
}
|
||||
|
||||
[data-theme="dark"].navds-error-message,
|
||||
[data-theme="dark"] .navds-error-message {
|
||||
--a-text-danger: var(--a-red-300);
|
||||
}
|
||||
|
||||
.navds-error-message {
|
||||
color: var(--ac-typo-error-text, var(--a-text-danger));
|
||||
color: var(--ac-typo-error-text, var(--__ac-typo-error-text, var(--a-text-danger)));
|
||||
}
|
||||
|
||||
.navds-typo--truncate {
|
||||
@@ -247,10 +252,5 @@
|
||||
}
|
||||
|
||||
.navds-typo--color-subtle {
|
||||
color: var(--a-text-subtle);
|
||||
}
|
||||
|
||||
[data-theme="dark"].navds-typo--color-subtle,
|
||||
[data-theme="dark"] .navds-typo--color-subtle {
|
||||
--a-text-subtle: var(--a-gray-300);
|
||||
color: var(--__ac-typo-text-subtle, var(--a-text-subtle));
|
||||
}
|
||||
@@ -1,5 +1,27 @@
|
||||
# @navikt/ds-react
|
||||
|
||||
## 5.4.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- MonthPicker: Fikset kalkulering av fromDate/toDate ([#2269](https://github.com/navikt/aksel/pull/2269))
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/aksel-icons@5.4.1
|
||||
|
||||
## 5.4.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- Primitives: Nye komponenter `Show` og `Hide` er lagt til. ([#2222](https://github.com/navikt/aksel/pull/2222))
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Search: Kjører nå bare preventDefault ved Escape når `input` inneholder tekst ([#2245](https://github.com/navikt/aksel/pull/2245))
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/aksel-icons@5.4.0
|
||||
|
||||
## 5.3.5
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-react",
|
||||
"version": "5.3.5",
|
||||
"version": "5.4.1",
|
||||
"description": "Aksel react-components for NAV designsystem",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"license": "MIT",
|
||||
@@ -38,7 +38,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@floating-ui/react": "0.24.1",
|
||||
"@navikt/aksel-icons": "^5.3.5",
|
||||
"@navikt/aksel-icons": "^5.4.1",
|
||||
"@radix-ui/react-tabs": "1.0.0",
|
||||
"@radix-ui/react-toggle-group": "1.0.0",
|
||||
"clsx": "^1.2.1",
|
||||
@@ -63,8 +63,8 @@
|
||||
"rimraf": "3.0.2",
|
||||
"swr": "^1.1.2",
|
||||
"ts-jest": "^29.0.0",
|
||||
"ts-node": "10.9.0",
|
||||
"typescript": "^4.8.0"
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "^5.1.6"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^17.0.30 || ^18.0.0",
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import cl from "clsx";
|
||||
import format from "date-fns/format";
|
||||
import isSameMonth from "date-fns/isSameMonth";
|
||||
import isSameYear from "date-fns/isSameYear";
|
||||
import compareAsc from "date-fns/compareAsc";
|
||||
import compareDesc from "date-fns/compareDesc";
|
||||
import setYear from "date-fns/setYear";
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import { useDayPicker } from "react-day-picker";
|
||||
@@ -20,13 +21,13 @@ interface MonthType {
|
||||
const disableMonth = (month: Date, fromDate?: Date, toDate?: Date) => {
|
||||
if (fromDate && toDate) {
|
||||
return (
|
||||
(isSameMonth(month, fromDate) && isSameYear(month, fromDate)) ||
|
||||
(isSameMonth(month, toDate) && isSameYear(month, toDate))
|
||||
(compareAsc(month, fromDate) === -1 && !isSameMonth(month, fromDate)) ||
|
||||
(compareDesc(month, toDate) === -1 && !isSameMonth(month, toDate))
|
||||
);
|
||||
} else if (fromDate) {
|
||||
return isSameMonth(month, fromDate) && isSameYear(month, fromDate);
|
||||
return compareAsc(month, fromDate) === -1 && !isSameMonth(month, fromDate);
|
||||
} else if (toDate) {
|
||||
return isSameMonth(month, toDate) && isSameYear(month, toDate);
|
||||
return compareDesc(month, toDate) === -1 && !isSameMonth(month, toDate);
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
@@ -46,7 +46,7 @@ export const dropdownCaption = () => {
|
||||
return (
|
||||
<MonthPicker.Standalone
|
||||
dropdownCaption
|
||||
fromDate={new Date("Jan 1 2019")}
|
||||
fromDate={new Date("Feb 10 2019")}
|
||||
toDate={new Date("Sep 27 2032")}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -8,14 +8,7 @@ import React, {
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import {
|
||||
BodyShort,
|
||||
ErrorMessage,
|
||||
Label,
|
||||
mergeRefs,
|
||||
omit,
|
||||
useEventListener,
|
||||
} from "../..";
|
||||
import { BodyShort, ErrorMessage, Label, mergeRefs, omit } from "../..";
|
||||
import { FormFieldProps, useFormField } from "../useFormField";
|
||||
import SearchButton, { SearchButtonType } from "./SearchButton";
|
||||
|
||||
@@ -135,7 +128,6 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
|
||||
|
||||
const searchRef = useRef<HTMLInputElement | null>(null);
|
||||
const mergedRef = useMemo(() => mergeRefs([searchRef, ref]), [ref]);
|
||||
const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
|
||||
|
||||
const [internalValue, setInternalValue] = useState(defaultValue ?? "");
|
||||
|
||||
@@ -156,27 +148,22 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
|
||||
[handleChange, onClear]
|
||||
);
|
||||
|
||||
useEventListener(
|
||||
"keydown",
|
||||
useCallback(
|
||||
(e) => {
|
||||
if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
handleClear({ trigger: "Escape", event: e });
|
||||
}
|
||||
},
|
||||
[handleClear]
|
||||
),
|
||||
wrapperRef
|
||||
);
|
||||
|
||||
const handleClick = () => {
|
||||
onSearchClick?.(`${value ?? internalValue}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setWrapperRef}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key !== "Escape") {
|
||||
return;
|
||||
}
|
||||
searchRef.current?.value &&
|
||||
searchRef.current?.value !== "" &&
|
||||
e.preventDefault();
|
||||
|
||||
handleClear({ trigger: "Escape", event: e });
|
||||
}}
|
||||
className={cl(
|
||||
className,
|
||||
"navds-form-field",
|
||||
|
||||
@@ -35,3 +35,4 @@ export * from "./util";
|
||||
export * from "./layout/stack";
|
||||
export * from "./layout/grid";
|
||||
export * from "./layout/content-container";
|
||||
export * from "./layout/responsive";
|
||||
@@ -34,7 +34,7 @@ export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
|
||||
/**
|
||||
* Horizontal Grid Primitive with dynamic columns and gap based on breakpoints.
|
||||
*
|
||||
* @see [📝 Documentation](https://aksel.nav.no/komponenter/core/hgrid)
|
||||
* @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/hgrid)
|
||||
* @see 🏷️ {@link HGridProps}
|
||||
*
|
||||
* @example
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
import cl from "clsx";
|
||||
import React, { forwardRef, HTMLAttributes } from "react";
|
||||
import { BreakpointsAlias } from "../utilities/css";
|
||||
|
||||
export interface ResponsiveProps extends HTMLAttributes<HTMLDivElement> {
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* @example
|
||||
* above='md'
|
||||
*/
|
||||
above?: Exclude<BreakpointsAlias, "xs">;
|
||||
/**
|
||||
* @example
|
||||
* below='md'
|
||||
*/
|
||||
below?: Exclude<BreakpointsAlias, "xs">;
|
||||
/**
|
||||
* Overrides html-tag
|
||||
* @default "div"
|
||||
*/
|
||||
as?: "div" | "span";
|
||||
}
|
||||
|
||||
const Responsive = forwardRef<
|
||||
HTMLDivElement,
|
||||
ResponsiveProps & { variant: "show" | "hide" }
|
||||
>(
|
||||
(
|
||||
{ as: Component = "div", className, above, below, variant, ...rest },
|
||||
ref
|
||||
) => {
|
||||
const aboveProp = variant === "show" ? above : below;
|
||||
const belowProp = variant === "show" ? below : above;
|
||||
|
||||
return (
|
||||
<Component
|
||||
{...rest}
|
||||
ref={ref}
|
||||
className={cl("navds-responsive", className, {
|
||||
[`navds-responsive__above--${aboveProp}`]: aboveProp,
|
||||
[`navds-responsive__below--${belowProp}`]: belowProp,
|
||||
})}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* Responsive view Primitive to show/hide elements based on breakpoints
|
||||
*
|
||||
* @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/hide)
|
||||
* @see 🏷️ {@link ResponsiveProps}
|
||||
*
|
||||
* @example
|
||||
* <HGrid columns={{ xs: 1, md: 2 }} gap="4">
|
||||
* <div/>
|
||||
* <Hide below="md">
|
||||
* // Only visible above "md"
|
||||
* </Hide>
|
||||
* </HGrid>
|
||||
* @example
|
||||
* <HGrid columns={{ xs: 1, md: 2 }} gap="4">
|
||||
* <div/>
|
||||
* <Hide above="md">
|
||||
* // Only visible below "md"
|
||||
* </Hide>
|
||||
* </HGrid>
|
||||
*/
|
||||
export const Hide = forwardRef<HTMLDivElement, ResponsiveProps>(
|
||||
(props, ref) => <Responsive {...props} ref={ref} variant="hide" />
|
||||
);
|
||||
|
||||
/**
|
||||
* Responsive view Primitive to show/hide elements based on breakpoints
|
||||
*
|
||||
* @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/show)
|
||||
* @see 🏷️ {@link ResponsiveProps}
|
||||
*
|
||||
* @example
|
||||
* <HGrid columns={{ xs: 1, md: 2 }} gap="4">
|
||||
* <div/>
|
||||
* <Show below="md">
|
||||
* // Only visible below "md"
|
||||
* </Show>
|
||||
* </HGrid>
|
||||
* @example
|
||||
* <HGrid columns={{ xs: 1, md: 2 }} gap="4">
|
||||
* <div/>
|
||||
* <Show above="md">
|
||||
* // Only visible above "md"
|
||||
* </Show>
|
||||
* </HGrid>
|
||||
*/
|
||||
export const Show = forwardRef<HTMLDivElement, ResponsiveProps>(
|
||||
(props, ref) => <Responsive {...props} ref={ref} variant="show" />
|
||||
);
|
||||
@@ -0,0 +1,45 @@
|
||||
import React from "react";
|
||||
import type { Meta } from "@storybook/react";
|
||||
import { Hide } from ".";
|
||||
import { Tag } from "../../tag";
|
||||
import { VStack } from "../stack";
|
||||
|
||||
export default {
|
||||
title: "ds-react/Responsive/Hide",
|
||||
component: Hide,
|
||||
} satisfies Meta<typeof Hide>;
|
||||
|
||||
export const Default = {
|
||||
render: () => (
|
||||
<VStack gap="12">
|
||||
<VStack gap="2" align="center">
|
||||
<Hide above="xl">
|
||||
<Tag variant="neutral">Visible below xl</Tag>
|
||||
</Hide>
|
||||
<Hide above="lg">
|
||||
<Tag variant="neutral">Visible below lg</Tag>
|
||||
</Hide>
|
||||
<Hide above="md">
|
||||
<Tag variant="neutral">Visible below md</Tag>
|
||||
</Hide>
|
||||
<Hide above="sm">
|
||||
<Tag variant="neutral">Visible below sm</Tag>
|
||||
</Hide>
|
||||
</VStack>
|
||||
<VStack gap="2" align="center">
|
||||
<Hide below="xl">
|
||||
<Tag variant="alt3">Visible above xl</Tag>
|
||||
</Hide>
|
||||
<Hide below="lg">
|
||||
<Tag variant="alt3">Visible above lg</Tag>
|
||||
</Hide>
|
||||
<Hide below="md">
|
||||
<Tag variant="alt3">Visible above md</Tag>
|
||||
</Hide>
|
||||
<Hide below="sm">
|
||||
<Tag variant="alt3">Visible above sm</Tag>
|
||||
</Hide>
|
||||
</VStack>
|
||||
</VStack>
|
||||
),
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
export { Show, Hide, type ResponsiveProps } from "./Responsive";
|
||||
@@ -0,0 +1,45 @@
|
||||
import React from "react";
|
||||
import type { Meta } from "@storybook/react";
|
||||
import { Show } from ".";
|
||||
import { Tag } from "../../tag";
|
||||
import { VStack } from "../stack";
|
||||
|
||||
export default {
|
||||
title: "ds-react/Responsive/Show",
|
||||
component: Show,
|
||||
} satisfies Meta<typeof Show>;
|
||||
|
||||
export const Default = {
|
||||
render: () => (
|
||||
<VStack gap="12">
|
||||
<VStack gap="2" align="center">
|
||||
<Show above="xl">
|
||||
<Tag variant="neutral">Visible above xl</Tag>
|
||||
</Show>
|
||||
<Show above="lg">
|
||||
<Tag variant="neutral">Visible above lg</Tag>
|
||||
</Show>
|
||||
<Show above="md">
|
||||
<Tag variant="neutral">Visible above md</Tag>
|
||||
</Show>
|
||||
<Show above="sm">
|
||||
<Tag variant="neutral">Visible above sm</Tag>
|
||||
</Show>
|
||||
</VStack>
|
||||
<VStack gap="2" align="center">
|
||||
<Show below="xl">
|
||||
<Tag variant="alt3">Visible below xl</Tag>
|
||||
</Show>
|
||||
<Show below="lg">
|
||||
<Tag variant="alt3">Visible below lg</Tag>
|
||||
</Show>
|
||||
<Show below="md">
|
||||
<Tag variant="alt3">Visible below md</Tag>
|
||||
</Show>
|
||||
<Show below="sm">
|
||||
<Tag variant="alt3">Visible below sm</Tag>
|
||||
</Show>
|
||||
</VStack>
|
||||
</VStack>
|
||||
),
|
||||
};
|
||||
@@ -7,7 +7,7 @@ export type HStackProps = Omit<StackProps, "direction">;
|
||||
/**
|
||||
* Layout-primitive for horizontal flexbox
|
||||
*
|
||||
* @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
|
||||
* @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/hstack)
|
||||
* @see 🏷️ {@link HStackProps}
|
||||
* @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
|
||||
*
|
||||
|
||||
@@ -3,7 +3,7 @@ import React from "react";
|
||||
/**
|
||||
* Layout-primitive for auto-spacing between elements
|
||||
*
|
||||
* @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
|
||||
* @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/hstack)
|
||||
*
|
||||
* @example
|
||||
* <HStack gap="8">
|
||||
|
||||
@@ -7,7 +7,7 @@ export type VStackProps = Omit<StackProps, "direction" | "wrap">;
|
||||
/**
|
||||
* Layout-primitive for vetical flexbox
|
||||
*
|
||||
* @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
|
||||
* @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/vstack)
|
||||
* @see 🏷️ {@link VStackProps}
|
||||
* @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
|
||||
*
|
||||
|
||||
@@ -192,6 +192,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
|
||||
|
||||
const component = (
|
||||
<dialog
|
||||
{...rest}
|
||||
ref={mergedRef}
|
||||
className={cl("navds-modal", className, {
|
||||
"navds-modal--polyfilled": needPolyfill,
|
||||
@@ -213,7 +214,6 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
|
||||
? ariaLabelId
|
||||
: ariaLabelledby
|
||||
}
|
||||
{...rest}
|
||||
>
|
||||
<ModalContext.Provider
|
||||
value={{
|
||||
|
||||
@@ -16,7 +16,7 @@ export const WithUseRef = () => {
|
||||
const ref2 = useRef<HTMLDialogElement>(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<Button onClick={() => ref.current?.showModal()}>Open Modal</Button>
|
||||
<Modal
|
||||
open={ref.current ? undefined : true /* initially open */}
|
||||
@@ -80,7 +80,7 @@ export const WithUseRef = () => {
|
||||
<Button variant="tertiary">Tertiary</Button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
WithUseRef.storyName = "With useRef";
|
||||
|
||||
@@ -85,7 +85,9 @@ const AnimateHeight: React.FC<AnimateHeightProps> = ({
|
||||
|
||||
if (typeof initHeight === "number") {
|
||||
// Reset negative height to 0
|
||||
initHeight = height < 0 ? 0 : height;
|
||||
if (typeof height !== "string") {
|
||||
initHeight = height < 0 ? 0 : height;
|
||||
}
|
||||
initOverflow = "hidden";
|
||||
} else if (isPercentage(initHeight)) {
|
||||
// If value is string "0%" make sure we convert it to number 0
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
# @navikt/ds-tailwind
|
||||
|
||||
## 5.4.1
|
||||
|
||||
## 5.4.0
|
||||
|
||||
## 5.3.5
|
||||
|
||||
## 5.3.4
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-tailwind",
|
||||
"version": "5.3.5",
|
||||
"version": "5.4.1",
|
||||
"description": "Tailwind config based on @navikt/ds-tokens",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"keywords": [
|
||||
@@ -22,14 +22,14 @@
|
||||
"directory": "@navikt/core/tailwind"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-tokens": "^5.3.5",
|
||||
"@navikt/ds-tokens": "^5.4.1",
|
||||
"@types/jest": "^29.0.0",
|
||||
"color": "4.2.3",
|
||||
"jest": "^29.0.0",
|
||||
"lodash": "^4.17.21",
|
||||
"ts-jest": "^29.0.0",
|
||||
"ts-node": "10.9.0",
|
||||
"typescript": "^4.8.0"
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "^5.1.6"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public",
|
||||
|
||||
@@ -1,5 +1,13 @@
|
||||
# @navikt/ds-tokens
|
||||
|
||||
## 5.4.1
|
||||
|
||||
## 5.4.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tokens: `data-theme="light"` vil nå tilbakestille theming ([#2238](https://github.com/navikt/aksel/pull/2238))
|
||||
|
||||
## 5.3.5
|
||||
|
||||
## 5.3.4
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-tokens",
|
||||
"version": "5.3.5",
|
||||
"version": "5.4.1",
|
||||
"description": "Design-tokens for NAV designsystem",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"keywords": [
|
||||
@@ -36,8 +36,8 @@
|
||||
"nodemon": "^3.0.1",
|
||||
"style-dictionary": "^3.0.2",
|
||||
"ts-jest": "^29.0.0",
|
||||
"ts-node": "10.9.0",
|
||||
"typescript": "^4.8.0"
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "^5.1.6"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public",
|
||||
|
||||
@@ -1,5 +1,33 @@
|
||||
# Changelog
|
||||
|
||||
## 5.4.1
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- MonthPicker: Fikset kalkulering av fromDate/toDate ([#2269](https://github.com/navikt/aksel/pull/2269))
|
||||
|
||||
## 5.4.0
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Primitives: Nye komponenter `Show` og `Hide` er lagt til. ([#2222](https://github.com/navikt/aksel/pull/2222))
|
||||
|
||||
<!---->
|
||||
|
||||
- Search: Kjører nå bare preventDefault ved Escape når `input` inneholder tekst ([#2245](https://github.com/navikt/aksel/pull/2245))
|
||||
|
||||
### @navikt/ds-tokens
|
||||
|
||||
- Tokens: `data-theme="light"` vil nå tilbakestille theming ([#2238](https://github.com/navikt/aksel/pull/2238))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Primitives: Nye komponenter `Show` og `Hide` er lagt til. ([#2222](https://github.com/navikt/aksel/pull/2222))
|
||||
|
||||
<!---->
|
||||
|
||||
- ErrorSummary: Har nå 8px border-radius ([#2256](https://github.com/navikt/aksel/pull/2256))
|
||||
|
||||
## 5.3.5
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
AZURE_APP_CLIENT_ID=notfound
|
||||
AZURE_OPENID_CONFIG_TOKEN_ENDPOINT=https://fakedings.dev-gcp.nais.io/fake/aad?NAVIdent=A123456&aud=testbruker-aksel" >> website/.env
|
||||
AZURE_OPENID_CONFIG_TOKEN_ENDPOINT=https://fakedings.intern.dev.nav.no/fake/aad?NAVIdent=A123456&aud=testbruker-aksel" >> website/.env
|
||||
AZURE_APP_CLIENT_SECRET=secret
|
||||
AZURE_OPENID_CONFIG_ISSUER=https://fakedings.dev-gcp.nais.io/fake
|
||||
AZURE_OPENID_CONFIG_JWKS_URI=https://fakedings.dev-gcp.nais.io/fake/jwks
|
||||
AZURE_APP_JWK=https://fakedings.dev-gcp.nais.io/fake/jwk
|
||||
AZURE_OPENID_CONFIG_ISSUER=https://fakedings.intern.dev.nav.no/fake
|
||||
AZURE_OPENID_CONFIG_JWKS_URI=https://fakedings.intern.dev.nav.no/fake/jwks
|
||||
AZURE_APP_JWK=https://fakedings.intern.dev.nav.no/fake/jwk
|
||||
@@ -15,11 +15,11 @@
|
||||
"website"
|
||||
],
|
||||
"dependencies": {
|
||||
"@navikt/aksel-icons": "^5.3.5",
|
||||
"@navikt/ds-css": "^5.3.5",
|
||||
"@navikt/ds-react": "^5.3.5",
|
||||
"@navikt/ds-tailwind": "^5.3.5",
|
||||
"@navikt/ds-tokens": "^5.3.5"
|
||||
"@navikt/aksel-icons": "^5.4.1",
|
||||
"@navikt/ds-css": "^5.4.1",
|
||||
"@navikt/ds-react": "^5.4.1",
|
||||
"@navikt/ds-tailwind": "^5.4.1",
|
||||
"@navikt/ds-tokens": "^5.4.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"prettier-plugin-tailwindcss": "^0.2.3"
|
||||
|
||||
@@ -22,10 +22,10 @@ const config: StorybookConfig = {
|
||||
const exampleIndexer = async (fileName: string, opts) => {
|
||||
let code = readFileSync(fileName, "utf-8").toString();
|
||||
|
||||
code = code
|
||||
.split("\n")
|
||||
.filter((line) => !line.includes("withDsExample"))
|
||||
.join("\n");
|
||||
code = code.replace(
|
||||
/^\s*export default withDsExample\(Example[\s\S]*?;\s*/gm,
|
||||
""
|
||||
);
|
||||
|
||||
code = code.replace("export const args =", "const args =");
|
||||
|
||||
|
||||
@@ -11,12 +11,12 @@ import {
|
||||
Bilde,
|
||||
CodeExamples,
|
||||
DoDont,
|
||||
Kode,
|
||||
LevelTwoHeading,
|
||||
logNav,
|
||||
PropsSeksjon,
|
||||
RelatertInnhold,
|
||||
SideModul,
|
||||
Snippet,
|
||||
Tabell,
|
||||
TastaturModul,
|
||||
Tips,
|
||||
@@ -38,7 +38,7 @@ const serializers = {
|
||||
bilde: ({ node }) => <Bilde node={node} />,
|
||||
alert: ({ node }) => <Alert node={node} />,
|
||||
expansioncard: ({ node }) => <ExpansionCard node={node} />,
|
||||
kode: ({ node }) => <Kode node={node} />,
|
||||
kode: ({ node }) => <Snippet node={node} />,
|
||||
tabell_v2: ({ node }) => <Tabell node={node} />,
|
||||
accordion: ({ node }) => <Accordion node={node} />,
|
||||
props_seksjon: ({ node }) => <PropsSeksjon node={node} />,
|
||||
|
||||
@@ -7,7 +7,6 @@ export * from "./sanity-modules/code";
|
||||
export * from "./sanity-modules/code-examples";
|
||||
export { default as DoDont } from "./sanity-modules/DoDont";
|
||||
export { default as IntroKomponent } from "./sanity-modules/IntroSeksjon";
|
||||
export { default as Kode } from "./sanity-modules/Kode";
|
||||
export { default as PropsSeksjon } from "./sanity-modules/props/PropsSeksjon";
|
||||
export { default as PropTable } from "./sanity-modules/props/PropTabell";
|
||||
export { default as SideModul } from "./sanity-modules/SideModul";
|
||||
|
||||
@@ -25,8 +25,8 @@ export const Error = () => {
|
||||
<div className="flex flex-wrap gap-2 px-4 pb-4 md:px-10">
|
||||
{Object.keys(searchOptions)
|
||||
.slice(0, Object.keys(searchOptions).length - 1)
|
||||
.map((x) => (
|
||||
<Skeleton variant="rounded" height="1.75rem">
|
||||
.map((x, i) => (
|
||||
<Skeleton variant="rounded" height="1.75rem" key={i}>
|
||||
{searchOptions[x].display}
|
||||
</Skeleton>
|
||||
))}
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
import { Snippet } from "@/components";
|
||||
import { withErrorBoundary } from "@/error-boundary";
|
||||
import { CodeSnippetT } from "@/types";
|
||||
|
||||
const Kode = ({ node }: { node: CodeSnippetT }) => {
|
||||
if (!node || !node.code) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <Snippet node={node} className="last:mb-0" />;
|
||||
};
|
||||
|
||||
export default withErrorBoundary(Kode, "Kode");
|
||||
@@ -34,7 +34,7 @@ const TokenTable = ({ node }: { node: TokenTableT }) => {
|
||||
))}
|
||||
</AkselTable>
|
||||
{(open || !showMore) && (
|
||||
<div className="border-border-subtle bg-surface-default relative -mt-8 w-full rounded-b-lg border border-t-0 p-2 pr-14">
|
||||
<div className="border-border-subtle bg-surface-default relative -mt-9 w-full rounded-b-lg border border-t-0 p-2 pr-14">
|
||||
<CopyButton
|
||||
copyText={Object.entries(tokens).reduce(
|
||||
(prev, cur) =>
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
import { getKey } from "@/sb-util";
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import CodeExample from "./Examples";
|
||||
|
||||
const meta = {
|
||||
title: "Sanity-modules/CodeExample",
|
||||
component: CodeExample,
|
||||
tags: ["autodocs"],
|
||||
} satisfies Meta<typeof CodeExample>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Designsystem: Story = {
|
||||
args: {
|
||||
node: {
|
||||
title: "button",
|
||||
dir: {
|
||||
title: "button",
|
||||
filer: [
|
||||
{
|
||||
_key: getKey(),
|
||||
description: null,
|
||||
innhold:
|
||||
'import { Button } from "@navikt/ds-react";\n\nconst Example = () => {\n return (\n <div className="flex flex-wrap gap-2">\n <Button variant="primary">Primary</Button>\n <Button variant="secondary">Secondary</Button>\n <Button variant="tertiary">Tertiary</Button>\n <Button variant="danger">Danger</Button>\n </div>\n );\n};',
|
||||
navn: "default",
|
||||
},
|
||||
{
|
||||
_key: getKey(),
|
||||
description: "Testdescription",
|
||||
innhold:
|
||||
'import { Button } from "@navikt/ds-react";\n\nconst Example = () => {\n return (\n <div className="flex flex-wrap gap-2">\n <Button variant="primary-neutral">Primary</Button>\n <Button variant="secondary-neutral">Secondary</Button>\n <Button variant="tertiary-neutral">Tertiary</Button>\n </div>\n );\n};',
|
||||
navn: "neutral",
|
||||
},
|
||||
{
|
||||
_key: getKey(),
|
||||
description: null,
|
||||
innhold:
|
||||
'import { PencilIcon } from "@navikt/aksel-icons";\nimport { Button } from "@navikt/ds-react";\n\nconst Example = () => {\n return (\n <div className="flex flex-wrap gap-2">\n <Button size="small" variant="primary" icon={<PencilIcon aria-hidden />}>\n Primary\n </Button>\n <Button size="small" variant="secondary">\n Secondary\n </Button>\n <Button size="small" variant="tertiary">\n Tertiary\n </Button>\n <Button size="small" variant="danger">\n Danger\n </Button>\n </div>\n );\n};',
|
||||
navn: "small",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,6 +1,6 @@
|
||||
import { capitalize, Snippet } from "@/components";
|
||||
import { withErrorBoundary } from "@/error-boundary";
|
||||
import { CodeExapmplesT } from "@/types";
|
||||
import { CodeExamplesT } from "@/types";
|
||||
import {
|
||||
ExternalLinkIcon,
|
||||
LaptopIcon,
|
||||
@@ -15,7 +15,7 @@ import { CodeSandbox } from "./CodeSandbox";
|
||||
const iframePadding = 192;
|
||||
const iframeId = "example-iframe";
|
||||
|
||||
const ComponentExamples = ({ node }: { node: CodeExapmplesT }) => {
|
||||
const ComponentExamples = ({ node }: { node: CodeExamplesT }) => {
|
||||
const [activeExample, setActiveExample] = useState(null);
|
||||
const [frameState, setFrameState] = useState(300);
|
||||
const [unloaded, setUnloaded] = useState(true);
|
||||
@@ -208,7 +208,7 @@ const ComponentExamples = ({ node }: { node: CodeExapmplesT }) => {
|
||||
|
||||
<Snippet
|
||||
node={{
|
||||
code: { code: fil.innhold.trim(), language: "jsx" },
|
||||
code: { code: fil.innhold.trim(), language: "tsx" },
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import Snippet from "./Snippet";
|
||||
|
||||
const meta = {
|
||||
title: "Sanity-modules/CodeSnippet",
|
||||
component: Snippet,
|
||||
tags: ["autodocs"],
|
||||
} satisfies Meta<typeof Snippet>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const JSX: Story = {
|
||||
args: {
|
||||
node: {
|
||||
code: {
|
||||
code: 'import { Button } from "@navikt/ds-react";\n\nconst Example = () => {\n return (\n <div className="flex flex-wrap gap-2">\n <Button variant="primary">Primary</Button>\n <Button variant="secondary">Secondary</Button>\n <Button variant="tertiary">Tertiary</Button>\n <Button variant="danger">Danger</Button>\n </div>\n );\n};',
|
||||
language: "jsx",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Bash: Story = {
|
||||
args: {
|
||||
node: {
|
||||
code: {
|
||||
code: "yarn install @navikt/ds-react @navikt/ds-css\nnpm add @navikt/ds-react @navikt/ds-css",
|
||||
language: "bash",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Terminal: Story = {
|
||||
args: {
|
||||
node: {
|
||||
code: {
|
||||
code: "npx cowsay moo",
|
||||
language: "terminal",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const JS: Story = {
|
||||
args: {
|
||||
node: {
|
||||
code: {
|
||||
code: "const numbers = [1, 2, 3, 4];\n\nnumbers.map(x => console.log(x))",
|
||||
language: "js",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const HTML: Story = {
|
||||
args: {
|
||||
node: {
|
||||
code: {
|
||||
code: "<button>Click me!</button>",
|
||||
language: "html",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,19 +1,13 @@
|
||||
import { withErrorBoundary } from "@/error-boundary";
|
||||
import cl from "clsx";
|
||||
import Highlight, { defaultProps, Language } from "prism-react-renderer";
|
||||
import { Highlight, Language } from "prism-react-renderer";
|
||||
import React from "react";
|
||||
import { CodeSnippetT } from "@/types";
|
||||
import { CopyButton } from "@navikt/ds-react";
|
||||
import { CopyButton, Label } from "@navikt/ds-react";
|
||||
import { ChevronRightIcon } from "@navikt/aksel-icons";
|
||||
import theme from "./theme";
|
||||
|
||||
const CodeSnippet = ({
|
||||
node: { code },
|
||||
className,
|
||||
...props
|
||||
}: {
|
||||
node: CodeSnippetT;
|
||||
className?: string;
|
||||
style?: any;
|
||||
}) => {
|
||||
const CodeSnippet = ({ node: { code, title } }: { node: CodeSnippetT }) => {
|
||||
if (!code || !code.code) {
|
||||
return null;
|
||||
}
|
||||
@@ -24,49 +18,75 @@ const CodeSnippet = ({
|
||||
case "js":
|
||||
language = "javascript";
|
||||
break;
|
||||
case "html":
|
||||
language = "markup";
|
||||
case "jsx":
|
||||
language = "tsx";
|
||||
break;
|
||||
case "terminal":
|
||||
language = "bash";
|
||||
case "scss":
|
||||
language = "css";
|
||||
break;
|
||||
case "less":
|
||||
language = "css";
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
const terminalStyling = (lang) => lang === "bash" || lang === "terminal";
|
||||
const formatTitle = (input) => (input === "bash" ? "Terminal" : input);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={cl(className, "relative mb-8 grid rounded-lg bg-[#0f172a]")}
|
||||
{...props}
|
||||
>
|
||||
<div className="absolute right-4 top-2 z-10 rounded-lg bg-[#0f172a] p-1 group-[.aksel-artikkel]/aksel:hidden">
|
||||
<CopyButton data-theme="dark" size="small" copyText={code.code} />
|
||||
<section
|
||||
aria-label="Kode"
|
||||
className="aksel-codesnippet bg-surface-inverted relative mb-7 grid rounded-lg last:mb-0"
|
||||
>
|
||||
<div className="text-text-on-inverted text-medium relative flex leading-6">
|
||||
<div className="mt-2 flex flex-none items-center border-b border-b-gray-200 border-t-transparent px-4 py-1.5 text-gray-100">
|
||||
{!title ? (
|
||||
<Label as="span" className="uppercase">
|
||||
{formatTitle(language)}
|
||||
</Label>
|
||||
) : (
|
||||
<Label as="span">{title}</Label>
|
||||
)}
|
||||
</div>
|
||||
<Highlight
|
||||
code={code.code}
|
||||
language={language}
|
||||
{...defaultProps}
|
||||
theme={undefined}
|
||||
>
|
||||
{({ tokens, getLineProps, getTokenProps }) => (
|
||||
<pre className="text-text-on-inverted min-h-14 relative m-0 max-h-96 overflow-x-auto overflow-y-auto rounded-lg bg-[#0f172a] p-4 font-mono group-[.aksel-artikkel]/aksel:mr-0">
|
||||
<div className="mt-2 flex h-10 flex-auto rounded-tl bg-gray-100/10 shadow-inner" />
|
||||
|
||||
<CopyButton
|
||||
data-theme="dark"
|
||||
size="small"
|
||||
copyText={code.code}
|
||||
className="absolute right-2 top-3"
|
||||
/>
|
||||
</div>
|
||||
<Highlight code={code.code} language={language} theme={theme}>
|
||||
{({ tokens, getLineProps, getTokenProps }) => (
|
||||
<pre className="text-medium m-0 flex overflow-auto rounded-lg leading-6">
|
||||
<code className="max-h-80 min-w-full flex-none p-4 pb-0">
|
||||
{tokens.map((line, i) => (
|
||||
<div
|
||||
<span
|
||||
key={i}
|
||||
{...getLineProps({ line, key: i })}
|
||||
className="text-medium whitespace-pre break-words"
|
||||
className={cl(
|
||||
"last-of-type:pb-4",
|
||||
terminalStyling(language) ? "flex items-center" : "block"
|
||||
)}
|
||||
>
|
||||
{terminalStyling(language) && (
|
||||
<ChevronRightIcon
|
||||
aria-hidden
|
||||
className="mr-2 h-5 w-auto flex-none overflow-visible text-pink-400"
|
||||
/>
|
||||
)}
|
||||
{line.map((token, key) => (
|
||||
<span key={key} {...getTokenProps({ token, key })} />
|
||||
))}
|
||||
</div>
|
||||
</span>
|
||||
))}
|
||||
</pre>
|
||||
)}
|
||||
</Highlight>
|
||||
</div>
|
||||
</>
|
||||
</code>
|
||||
</pre>
|
||||
)}
|
||||
</Highlight>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,8 +1,5 @@
|
||||
import dynamic from "next/dynamic";
|
||||
|
||||
export const Snippet = dynamic(() => import("./Snippet"), {
|
||||
loading: () => (
|
||||
<div className="mb-8 block min-h-32 w-full rounded-md bg-gray-900" />
|
||||
),
|
||||
ssr: false,
|
||||
});
|
||||
@@ -0,0 +1,111 @@
|
||||
import { PrismTheme } from "prism-react-renderer";
|
||||
|
||||
export const JetwaveDark: PrismTheme = {
|
||||
plain: {
|
||||
color: "#f8fafc",
|
||||
backgroundColor: "#011627",
|
||||
},
|
||||
styles: [
|
||||
{
|
||||
types: ["prolog"],
|
||||
style: {
|
||||
color: "#000080",
|
||||
},
|
||||
},
|
||||
{
|
||||
types: ["comment"],
|
||||
style: {
|
||||
color: "var(--a-gray-300)",
|
||||
},
|
||||
},
|
||||
{
|
||||
types: ["builtin", "changed", "keyword", "interpolation-punctuation"],
|
||||
style: {
|
||||
color: "#569CD6",
|
||||
},
|
||||
},
|
||||
{
|
||||
types: ["number", "inserted"],
|
||||
style: {
|
||||
color: "var(--a-gray-50)",
|
||||
},
|
||||
},
|
||||
{
|
||||
types: ["constant"],
|
||||
style: {
|
||||
color: "#f8fafc",
|
||||
},
|
||||
},
|
||||
{
|
||||
types: ["attr-name", "variable"],
|
||||
style: {
|
||||
color: "#9CDCFE",
|
||||
},
|
||||
},
|
||||
{
|
||||
types: ["deleted", "string", "attr-value", "template-punctuation"],
|
||||
style: {
|
||||
color: "#cbd5e1",
|
||||
},
|
||||
},
|
||||
{
|
||||
types: ["selector"],
|
||||
style: {
|
||||
color: "#D7BA7D",
|
||||
},
|
||||
},
|
||||
{
|
||||
types: ["tag"],
|
||||
style: {
|
||||
color: "var(--a-green-200)",
|
||||
},
|
||||
},
|
||||
{
|
||||
types: ["tag"],
|
||||
languages: ["jsx"],
|
||||
style: {
|
||||
color: "var(--a-blue-200)",
|
||||
},
|
||||
},
|
||||
{
|
||||
types: ["tag"],
|
||||
languages: ["markup"],
|
||||
style: {
|
||||
color: "var(--a-blue-200)",
|
||||
},
|
||||
},
|
||||
{
|
||||
types: ["punctuation", "operator"],
|
||||
style: {
|
||||
color: "#D4D4D4",
|
||||
},
|
||||
},
|
||||
{
|
||||
types: ["punctuation"],
|
||||
languages: ["markup"],
|
||||
style: {
|
||||
color: "#808080",
|
||||
},
|
||||
},
|
||||
{
|
||||
types: ["function"],
|
||||
style: {
|
||||
color: "#7dd3fc",
|
||||
},
|
||||
},
|
||||
{
|
||||
types: ["class-name"],
|
||||
style: {
|
||||
color: "var(--a-green-200)",
|
||||
},
|
||||
},
|
||||
{
|
||||
types: ["char"],
|
||||
style: {
|
||||
color: "#D16969",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default JetwaveDark;
|
||||
@@ -33,7 +33,9 @@ const List = ({ prop, parent }: { prop: any; parent: string }) => {
|
||||
<span>{prop.type ? <>{Highlighter({ type: prop.type })}</> : ""}</span>
|
||||
</dt>
|
||||
{prop.description && (
|
||||
<dd className="font-sans text-base">{prop.description}</dd>
|
||||
<dd className="whitespace-pre-wrap font-sans text-base">
|
||||
{prop.description}
|
||||
</dd>
|
||||
)}
|
||||
{prop.name === "ref" && prop.type.includes("Ref<") && (
|
||||
<dd className="font-sans text-base">
|
||||
|
||||
@@ -151,7 +151,7 @@ export function TableOfContentsv2({
|
||||
<nav
|
||||
aria-labelledby="toc-heading"
|
||||
id="toc-scroll"
|
||||
className="max-h-[80vh] overflow-y-auto"
|
||||
className="max-h-[80vh] w-full overflow-y-auto"
|
||||
>
|
||||
<ul>
|
||||
{toc.map((link) => {
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
@@ -1,33 +1,89 @@
|
||||
import { ComponentType } from "react";
|
||||
import styles from "./examples.module.css";
|
||||
import {
|
||||
LaptopIcon,
|
||||
MobileIcon,
|
||||
MobileSmallIcon,
|
||||
MonitorIcon,
|
||||
TabletIcon,
|
||||
} from "@navikt/aksel-icons";
|
||||
import { HStack } from "@navikt/ds-react";
|
||||
import cl from "clsx";
|
||||
import { ComponentType, useEffect, useState } from "react";
|
||||
import styles from "./examples.module.css";
|
||||
|
||||
export const withDsExample = (
|
||||
Component: ComponentType,
|
||||
/**
|
||||
* Static: Used for dynamic-height examples like ExpansionCard
|
||||
*/
|
||||
variant?: "full" | "inverted" | "static" | "subtle"
|
||||
{
|
||||
variant,
|
||||
showBreakpoints,
|
||||
}: {
|
||||
variant?: "full" | "inverted" | "static" | "subtle";
|
||||
showBreakpoints?: boolean;
|
||||
} = {}
|
||||
) => {
|
||||
const DsHOC = (props: any) => (
|
||||
<div
|
||||
className={cl(styles.examples, {
|
||||
"bg-gray-900": variant === "inverted",
|
||||
"bg-bg-subtle": variant === "subtle",
|
||||
[styles.containerStatic]: variant === "static",
|
||||
[styles.container]: variant !== "static",
|
||||
})}
|
||||
>
|
||||
const DsHOC = (props: any) => {
|
||||
const [width, setWidth] = useState<number>();
|
||||
|
||||
useEffect(() => {
|
||||
const updateWidth = () => {
|
||||
setWidth(window.innerWidth);
|
||||
};
|
||||
window.addEventListener("resize", updateWidth);
|
||||
updateWidth();
|
||||
return () => {
|
||||
window.removeEventListener("resize", updateWidth);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const BreakpointText = () => {
|
||||
let breakpoint = "";
|
||||
let Icon = LaptopIcon;
|
||||
if (width < 480) {
|
||||
Icon = MobileSmallIcon;
|
||||
breakpoint = "xs";
|
||||
} else if (width < 768) {
|
||||
Icon = MobileIcon;
|
||||
breakpoint = "sm";
|
||||
} else if (width < 1024) {
|
||||
Icon = TabletIcon;
|
||||
breakpoint = "md";
|
||||
} else if (width < 1280) {
|
||||
Icon = LaptopIcon;
|
||||
breakpoint = "lg";
|
||||
} else {
|
||||
Icon = MonitorIcon;
|
||||
breakpoint = "xl";
|
||||
}
|
||||
return (
|
||||
<HStack gap="1" className="absolute left-2 top-1" align="center">
|
||||
<Icon aria-hidden fontSize="1.5rem" /> {`${breakpoint}`}
|
||||
</HStack>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
id="ds-example"
|
||||
className={cl({
|
||||
"w-full": variant === "full",
|
||||
className={cl(styles.examples, {
|
||||
"bg-gray-900": variant === "inverted",
|
||||
"bg-bg-subtle": variant === "subtle",
|
||||
[styles.containerStatic]: variant === "static",
|
||||
[styles.container]: variant !== "static",
|
||||
})}
|
||||
>
|
||||
<Component {...props} />
|
||||
{showBreakpoints && <BreakpointText />}
|
||||
<div
|
||||
id="ds-example"
|
||||
className={cl({
|
||||
"w-full": variant === "full",
|
||||
})}
|
||||
>
|
||||
<Component {...props} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
if (Component.displayName) {
|
||||
DsHOC.displayName = `DsExample${Component.displayName}`;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import * as Icons from "@navikt/aksel-icons";
|
||||
import meta from "@navikt/aksel-icons/metadata";
|
||||
import { Button, CopyButton, Heading, Tooltip } from "@navikt/ds-react";
|
||||
import { Button, Heading } from "@navikt/ds-react";
|
||||
import Snippet from "components/sanity-modules/code/Snippet";
|
||||
import { SuggestionBlock } from "components/website-modules/suggestionblock";
|
||||
import {
|
||||
AmplitudeEvents,
|
||||
@@ -8,7 +9,6 @@ import {
|
||||
} from "components/website-modules/utils/amplitude";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import Highlight, { defaultProps } from "prism-react-renderer";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import ReactDOMServer from "react-dom/server";
|
||||
|
||||
@@ -126,113 +126,37 @@ export const IconSidebar = ({
|
||||
>
|
||||
Last ned
|
||||
</Button>
|
||||
<div data-prism-theme="light">
|
||||
<Heading level="3" size="small" className="mb-2 mt-6">
|
||||
Kode
|
||||
</Heading>
|
||||
<div className="ring-border-subtle rounded-lg ring-1">
|
||||
<div className="border-b-border-subtle text-medium flex items-center justify-between border-b px-3 py-1">
|
||||
<span>Import</span>
|
||||
<Tooltip content="Kopier React-import">
|
||||
<CopyButton
|
||||
size="small"
|
||||
copyText={`import {
|
||||
${name}Icon
|
||||
} from '@navikt/aksel-icons';`}
|
||||
/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<Highlight
|
||||
code={`import {
|
||||
${name}Icon
|
||||
} from '@navikt/aksel-icons';`}
|
||||
language="tsx"
|
||||
{...defaultProps}
|
||||
theme={undefined}
|
||||
>
|
||||
{({ tokens, getLineProps, getTokenProps }) => (
|
||||
<pre className="relative m-0 overflow-x-auto overflow-y-auto rounded-b-lg p-3 font-mono">
|
||||
{tokens.map((line, i) => (
|
||||
<div
|
||||
key={i}
|
||||
{...getLineProps({ line, key: i })}
|
||||
className="text-medium whitespace-pre break-words"
|
||||
>
|
||||
{line.map((token, key) => (
|
||||
<span key={key} {...getTokenProps({ token, key })} />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</pre>
|
||||
)}
|
||||
</Highlight>
|
||||
</div>
|
||||
<div className="ring-border-subtle mt-3 rounded-lg ring-1">
|
||||
<div className="border-b-border-subtle text-medium flex items-center justify-between border-b px-3 py-1">
|
||||
<span>React</span>
|
||||
<Tooltip content="Kopier React-snippet">
|
||||
<CopyButton
|
||||
size="small"
|
||||
copyText={`<${name}Icon title="a11y-title" />`}
|
||||
/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<Highlight
|
||||
code={`<${name}Icon title="a11y-title" fontSize="1.5rem" />`}
|
||||
language="tsx"
|
||||
{...defaultProps}
|
||||
theme={undefined}
|
||||
>
|
||||
{({ tokens, getLineProps, getTokenProps }) => (
|
||||
<pre className="relative m-0 max-w-[80vw] overflow-x-auto overflow-y-auto rounded-b-lg p-3 font-mono lg:max-w-sm">
|
||||
{tokens.map((line, i) => (
|
||||
<div
|
||||
key={i}
|
||||
{...getLineProps({ line, key: i })}
|
||||
className="text-medium whitespace-pre break-words"
|
||||
>
|
||||
{line.map((token, key) => (
|
||||
<span key={key} {...getTokenProps({ token, key })} />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</pre>
|
||||
)}
|
||||
</Highlight>
|
||||
</div>
|
||||
<div className="ring-border-subtle mt-3 rounded-lg ring-1">
|
||||
<div className="border-b-border-subtle text-medium flex items-center justify-between border-b px-3 py-1">
|
||||
<span>SVG</span>
|
||||
<Tooltip content="Kopier SVG-kode">
|
||||
<CopyButton
|
||||
size="small"
|
||||
copyText={ReactDOMServer.renderToString(<SelectedIcon />)}
|
||||
/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<Highlight
|
||||
code={ReactDOMServer.renderToString(<SelectedIcon />)}
|
||||
language="tsx"
|
||||
{...defaultProps}
|
||||
theme={undefined}
|
||||
>
|
||||
{({ tokens, getLineProps, getTokenProps }) => (
|
||||
<pre className="w-text relative m-0 max-w-[80vw] overflow-x-auto overflow-y-auto rounded-b-lg p-3 font-mono lg:w-auto lg:max-w-sm">
|
||||
{tokens.map((line, i) => (
|
||||
<div
|
||||
key={i}
|
||||
{...getLineProps({ line, key: i })}
|
||||
className="text-medium whitespace-pre break-words"
|
||||
>
|
||||
{line.map((token, key) => (
|
||||
<span key={key} {...getTokenProps({ token, key })} />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</pre>
|
||||
)}
|
||||
</Highlight>
|
||||
</div>
|
||||
<div className="mt-6 max-w-md">
|
||||
<Snippet
|
||||
node={{
|
||||
title: "Import",
|
||||
code: {
|
||||
code: `import { ${name}Icon } from '@navikt/aksel-icons';`,
|
||||
language: "jsx",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<Snippet
|
||||
node={{
|
||||
title: "React",
|
||||
code: {
|
||||
code: `<${name}Icon title="a11y-title" fontSize="1.5rem" />`,
|
||||
language: "jsx",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<Snippet
|
||||
node={{
|
||||
title: "SVG",
|
||||
code: {
|
||||
code: ReactDOMServer.renderToString(<SelectedIcon />),
|
||||
language: "jsx",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<SuggestionBlock variant="ikon" reference={name} />
|
||||
</div>
|
||||
|
||||
@@ -12,6 +12,8 @@ test.describe("Axe a11y", () => {
|
||||
.exclude("iframe")
|
||||
.exclude("#aksel-expansioncard")
|
||||
.exclude("#toc-scroll")
|
||||
.exclude("#toc-scroll")
|
||||
.exclude(".aksel-codesnippet")
|
||||
.analyze();
|
||||
expect(accessibilityScanResults.violations).toEqual([]);
|
||||
});
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
"watch:tw": "yarn tailwindcss -i ./styles/index.css -o ./dist/tw.css --watch"
|
||||
},
|
||||
"dependencies": {
|
||||
"@amplitude/analytics-browser": "^2.0.0",
|
||||
"@amplitude/analytics-browser": "^2.2.3",
|
||||
"@sanity/block-content-to-react": "^3.0.0",
|
||||
"@sanity/client": "^6.4.6",
|
||||
"@sanity/code-input": "4.1.1",
|
||||
@@ -49,8 +49,7 @@
|
||||
"next-logger": "^3.0.2",
|
||||
"next-sanity": "^5.4.6",
|
||||
"pino": "^8.14.1",
|
||||
"prism-react-renderer": "^1.3.0",
|
||||
"prismjs": "^1.27.0",
|
||||
"prism-react-renderer": "^2.0.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"react-responsive-masonry": "^2.1.7",
|
||||
@@ -92,7 +91,7 @@
|
||||
"showdown": "^2.1.0",
|
||||
"start-server-and-test": "^1.14.0",
|
||||
"ts-jest": "^29.0.0",
|
||||
"ts-node": "10.9.0",
|
||||
"typescript": "^4.8.0"
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "^5.1.6"
|
||||
}
|
||||
}
|
||||
@@ -33,7 +33,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, "static");
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -32,7 +32,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, "static");
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -32,7 +32,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, "static");
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -51,7 +51,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, "static");
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -32,7 +32,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, "static");
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -25,7 +25,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, "static");
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -20,7 +20,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, "static");
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -26,7 +26,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, "static");
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -22,7 +22,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, "static");
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -5,7 +5,7 @@ const Example = () => {
|
||||
return <BodyLong as="span">Dette er nå en span!</BodyLong>;
|
||||
};
|
||||
|
||||
export default withDsExample(Example, "static");
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -26,7 +26,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, "static");
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -17,7 +17,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, "static");
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -13,7 +13,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, "static");
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -17,7 +17,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, "static");
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -24,7 +24,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, "static");
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -19,7 +19,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, "static");
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -25,7 +25,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, "static");
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -21,7 +21,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, "static");
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -5,7 +5,7 @@ const Example = () => {
|
||||
return <BodyShort as="span">Dette er nå en span!</BodyShort>;
|
||||
};
|
||||
|
||||
export default withDsExample(Example, "static");
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -25,7 +25,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, "static");
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -16,7 +16,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, "static");
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
Loaded 100 of 187 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user