mirror of
https://github.com/navikt/aksel.git
synced 2026-10-13 01:02:02 +00:00
Compare commits
7
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Ken
|
34d41ecc78 | ||
|
Ken
|
7e62365a60 | ||
|
Ken
|
8565f410a1 | ||
|
Ken
|
46d70820df | ||
|
github-actions[bot]andgithub-actions[bot]
|
67e66ffe02 | ||
|
Ken
|
e19bf67b33 | ||
|
Ken
|
97c5f60e91 |
No files matched your search
@@ -15,3 +15,7 @@
|
||||
.rowgap[data-theme="dark"] {
|
||||
background-color: #262626;
|
||||
}
|
||||
|
||||
.rowgap-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@@ -1,5 +1,11 @@
|
||||
# @navikt/ds-codemod
|
||||
|
||||
## 1.5.2
|
||||
|
||||
## 1.5.1
|
||||
|
||||
## 1.5.0
|
||||
|
||||
## 1.4.4
|
||||
|
||||
## 1.4.3
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-codemod",
|
||||
"version": "1.4.4",
|
||||
"version": "1.5.2",
|
||||
"description": "NAV designsystem codemods",
|
||||
"author": "NAV Designsystem team",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,5 +1,25 @@
|
||||
# @navikt/ds-css
|
||||
|
||||
## 1.5.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- :memo: Rename FilterChips to ToggleChips
|
||||
|
||||
## 1.5.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Flex-wrap chips.css
|
||||
|
||||
## 1.5.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- [#1684](https://github.com/navikt/Designsystemet/pull/1684) [`e19bf67b3`](https://github.com/navikt/Designsystemet/commit/e19bf67b337dea39989c68b5e9c2591cf0d5b40f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Oppdaterte tag-varianter
|
||||
|
||||
- [#1668](https://github.com/navikt/Designsystemet/pull/1668) [`97c5f60e9`](https://github.com/navikt/Designsystemet/commit/97c5f60e9111da7e08f55c8d0aa29581f0a9b1ca) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Chips komponent :sparkles:
|
||||
|
||||
## 1.4.4
|
||||
|
||||
## 1.4.3
|
||||
|
||||
@@ -0,0 +1,125 @@
|
||||
.navds-chips {
|
||||
display: flex;
|
||||
gap: var(--navds-spacing-2);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.navds-chips :where(li) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navds-chips__chip {
|
||||
all: unset;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.125rem;
|
||||
margin: 0;
|
||||
padding: 0 var(--navds-spacing-3);
|
||||
text-decoration: none;
|
||||
border-radius: var(--navds-border-radius-full);
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.navds-chips--small .navds-chips__chip {
|
||||
min-height: 24px;
|
||||
padding: 0 var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-chips__toggle {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-border, var(--navds-global-color-gray-500));
|
||||
background-color: var(--ac-chip-toggle-bg, rgb(0 0 0 / 0.055));
|
||||
}
|
||||
|
||||
.navds-chips__toggle:hover {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-border-hover, var(--navds-global-color-gray-600));
|
||||
background-color: var(--ac-chip-toggle-bg-hover, rgb(0 0 0 / 0.1));
|
||||
}
|
||||
|
||||
.navds-chips__toggle[aria-pressed="true"] {
|
||||
box-shadow: none;
|
||||
background-color: var(--ac-chip-toggle-bg-pressed, var(--navds-global-color-deepblue-500));
|
||||
color: var(--ac-chip-toggle-text-pressed, var(--navds-global-color-white));
|
||||
}
|
||||
|
||||
.navds-chips__toggle[aria-pressed="true"]:hover {
|
||||
background-color: var(--ac-chip-toggle-bg-pressed-hover, var(--navds-global-color-deepblue-600));
|
||||
}
|
||||
|
||||
.navds-chips__toggle:focus-visible {
|
||||
box-shadow: 0 0 0 2px var(--navds-global-color-blue-800);
|
||||
}
|
||||
|
||||
.navds-chips__toggle[aria-pressed="true"]:focus-visible,
|
||||
.navds-chips__toggle:active:focus-visible {
|
||||
box-shadow: inset 0 0 0 1px var(--navds-global-color-white), 0 0 0 2px var(--navds-global-color-blue-800);
|
||||
}
|
||||
|
||||
.navds-chips__removable--action {
|
||||
background-color: var(--ac-chip-removable-action-bg, var(--navds-global-color-deepblue-500));
|
||||
color: var(--ac-chip-removable-action-text, var(--navds-global-color-white));
|
||||
}
|
||||
|
||||
.navds-chips__removable--neutral {
|
||||
color: var(--ac-chip-removable-neutral-text, var(--navds-global-color-gray-900));
|
||||
background-color: var(--ac-chip-removable-neutral-bg, rgb(0 0 0/ 0.055));
|
||||
box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-border, var(--navds-global-color-gray-500));
|
||||
}
|
||||
|
||||
.navds-chips__removable-icon,
|
||||
.navds-chips__toggle-icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: var(--navds-border-radius-full);
|
||||
}
|
||||
|
||||
.navds-chips--small .navds-chips__removable-icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.navds-chips--small .navds-chips__removable-icon > svg {
|
||||
width: 0.75rem;
|
||||
}
|
||||
|
||||
.navds-chips__removable--action:focus-visible {
|
||||
box-shadow: inset 0 0 0 1px var(--navds-global-color-white), 0 0 0 2px var(--navds-global-color-blue-800);
|
||||
}
|
||||
|
||||
.navds-chips__removable--neutral:focus-visible {
|
||||
box-shadow: 0 0 0 2px var(--navds-global-color-blue-800);
|
||||
}
|
||||
|
||||
.navds-chips__removable--action:hover {
|
||||
background-color: var(--ac-chip-removable-action-bg-hover, var(--navds-global-color-deepblue-700));
|
||||
}
|
||||
|
||||
.navds-chips__removable--neutral:hover {
|
||||
background-color: var(--ac-chip-removable-action-bg-hover, rgb(0 0 0 / 0.1));
|
||||
box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-border-hover, var(--navds-global-color-gray-600));
|
||||
}
|
||||
|
||||
.navds-chips--icon-left {
|
||||
padding-left: var(--navds-spacing-1);
|
||||
}
|
||||
|
||||
.navds-chips--icon-right {
|
||||
padding-right: var(--navds-spacing-1);
|
||||
}
|
||||
|
||||
.navds-chips--small .navds-chips--icon-right {
|
||||
padding-right: 0.125rem;
|
||||
}
|
||||
|
||||
.navds-chips--small .navds-chips--icon-left {
|
||||
padding-left: 0.125rem;
|
||||
}
|
||||
@@ -7,6 +7,7 @@
|
||||
@import "button.css";
|
||||
@import "content-container.css";
|
||||
@import "chat.css";
|
||||
@import "chips.css";
|
||||
@import "guide-panel.css";
|
||||
@import "form/index.css";
|
||||
@import "help-text.css";
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-css",
|
||||
"version": "1.4.4",
|
||||
"version": "1.5.2",
|
||||
"description": "Css for NAV Designsystem components",
|
||||
"author": "NAV Designsystem team",
|
||||
"keywords": [
|
||||
@@ -20,7 +20,7 @@
|
||||
"watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-tokens": "^1.4.4",
|
||||
"@navikt/ds-tokens": "^1.5.2",
|
||||
"normalize.css": "^8.0.1",
|
||||
"postcss": "^8.4.0",
|
||||
"postcss-cli": "^9.0.0",
|
||||
|
||||
+93
-14
@@ -14,38 +14,117 @@
|
||||
|
||||
.navds-tag {
|
||||
border: 1px solid;
|
||||
border-color: var(--navds-tag-color-border);
|
||||
border-radius: var(--navds-border-radius-medium);
|
||||
background-color: var(--navds-tag-color-background);
|
||||
border-radius: var(--navds-border-radius-small);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.125rem var(--navds-spacing-3);
|
||||
padding: 0.125rem var(--navds-spacing-2);
|
||||
min-height: 32px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.navds-tag--small {
|
||||
min-height: 24px;
|
||||
padding-right: var(--navds-spacing-1);
|
||||
padding-left: var(--navds-spacing-1);
|
||||
padding: 0 0.375rem;
|
||||
}
|
||||
|
||||
.navds-tag--xsmall {
|
||||
min-height: 20px;
|
||||
padding: 0 var(--navds-spacing-1);
|
||||
}
|
||||
|
||||
.navds-tag--error {
|
||||
background-color: var(--navds-tag-color-error-background);
|
||||
border-color: var(--navds-tag-color-error-border);
|
||||
border-color: var(--ac-tag-error-border, var(--navds-global-color-red-500));
|
||||
background-color: var(--ac-tag-error-bg, var(--navds-global-color-red-50));
|
||||
color: var(--ac-tag-error-text, var(--navds-global-color-gray-900));
|
||||
}
|
||||
|
||||
.navds-tag--error-filled {
|
||||
border-color: transparent;
|
||||
background-color: var(--ac-tag-error-filled-bg, var(--navds-global-color-red-500));
|
||||
color: var(--ac-tag-error-filled-text, var(--navds-global-color-white));
|
||||
}
|
||||
|
||||
.navds-tag--success {
|
||||
background-color: var(--navds-tag-color-success-background);
|
||||
border-color: var(--navds-tag-color-success-border);
|
||||
border-color: var(--ac-tag-success-border, var(--navds-global-color-green-500));
|
||||
background-color: var(--ac-tag-success-bg, var(--navds-global-color-green-50));
|
||||
color: var(--ac-tag-success-text, var(--navds-global-color-gray-900));
|
||||
}
|
||||
|
||||
.navds-tag--success-filled {
|
||||
border-color: transparent;
|
||||
background-color: var(--ac-tag-success-filled-bg, var(--navds-global-color-green-500));
|
||||
color: var(--ac-tag-success-filled-text, var(--navds-global-color-white));
|
||||
}
|
||||
|
||||
.navds-tag--warning {
|
||||
background-color: var(--navds-tag-color-warning-background);
|
||||
border-color: var(--navds-tag-color-warning-border);
|
||||
border-color: var(--ac-tag-warning-border, var(--navds-global-color-orange-600));
|
||||
background-color: var(--ac-tag-warning-bg, var(--navds-global-color-orange-50));
|
||||
color: var(--ac-tag-warning-text, var(--navds-global-color-gray-900));
|
||||
}
|
||||
|
||||
.navds-tag--warning-filled {
|
||||
border-color: transparent;
|
||||
background-color: var(--ac-tag-warning-filled-bg, var(--navds-global-color-orange-500));
|
||||
color: var(--ac-tag-warning-filled-text, var(--navds-global-color-gray-900));
|
||||
}
|
||||
|
||||
.navds-tag--info {
|
||||
background-color: var(--navds-tag-color-info-background);
|
||||
border-color: var(--navds-tag-color-info-border);
|
||||
border-color: var(--ac-tag-info-border, var(--navds-global-color-lightblue-700));
|
||||
background-color: var(--ac-tag-info-bg, var(--navds-global-color-lightblue-50));
|
||||
color: var(--ac-tag-info-text, var(--navds-global-color-gray-900));
|
||||
}
|
||||
|
||||
.navds-tag--info-filled {
|
||||
border-color: transparent;
|
||||
background-color: var(--ac-tag-info-filled-bg, var(--navds-global-color-lightblue-500));
|
||||
color: var(--ac-tag-info-filled-text, var(--navds-global-color-gray-900));
|
||||
}
|
||||
|
||||
.navds-tag--neutral {
|
||||
border-color: var(--ac-tag-neutral-border, var(--navds-global-color-gray-500));
|
||||
background-color: var(--ac-tag-neutral-bg, var(--navds-global-color-gray-100));
|
||||
color: var(--ac-tag-neutral-text, var(--navds-global-color-gray-900));
|
||||
}
|
||||
|
||||
.navds-tag--neutral-filled {
|
||||
border-color: transparent;
|
||||
background-color: var(--ac-tag-neutral-filled-bg, var(--navds-global-color-gray-800));
|
||||
color: var(--ac-tag-neutral-filled-text, var(--navds-global-color-white));
|
||||
}
|
||||
|
||||
.navds-tag--alt1 {
|
||||
border-color: var(--ac-tag-alt1-border, var(--navds-global-color-deepblue-400));
|
||||
background-color: var(--ac-tag-alt1-bg, var(--navds-global-color-deepblue-100));
|
||||
color: var(--ac-tag-alt1-text, var(--navds-global-color-gray-900));
|
||||
}
|
||||
|
||||
.navds-tag--alt1-filled {
|
||||
border-color: transparent;
|
||||
background-color: var(--ac-tag-alt1-filled-bg, var(--navds-global-color-deepblue-500));
|
||||
color: var(--ac-tag-alt1-filled-text, var(--navds-global-color-white));
|
||||
}
|
||||
|
||||
.navds-tag--alt2 {
|
||||
border-color: var(--ac-tag-alt2-border, var(--navds-global-color-purple-400));
|
||||
background-color: var(--ac-tag-alt2-bg, var(--navds-global-color-purple-100));
|
||||
color: var(--ac-tag-alt2-text, var(--navds-global-color-gray-900));
|
||||
}
|
||||
|
||||
.navds-tag--alt2-filled {
|
||||
border-color: transparent;
|
||||
background-color: var(--ac-tag-alt2-filled-bg, var(--navds-global-color-purple-400));
|
||||
color: var(--ac-tag-alt2-filled-text, var(--navds-global-color-white));
|
||||
}
|
||||
|
||||
.navds-tag--alt3 {
|
||||
border-color: var(--ac-tag-alt3-border, var(--navds-global-color-limegreen-500));
|
||||
background-color: var(--ac-tag-alt3-bg, var(--navds-global-color-limegreen-100));
|
||||
color: var(--ac-tag-alt3-text, var(--navds-global-color-gray-900));
|
||||
}
|
||||
|
||||
.navds-tag--alt3-filled {
|
||||
border-color: transparent;
|
||||
background-color: var(--ac-tag-alt3-filled-bg, var(--navds-global-color-limegreen-400));
|
||||
color: var(--ac-tag-alt3-filled-text, var(--navds-global-color-gray-900));
|
||||
}
|
||||
@@ -1,5 +1,36 @@
|
||||
# @navikt/ds-react
|
||||
|
||||
## 1.5.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- :memo: Rename FilterChips to ToggleChips
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/ds-icons@1.5.2
|
||||
|
||||
## 1.5.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Flex-wrap chips.css
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/ds-icons@1.5.1
|
||||
|
||||
## 1.5.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- [#1684](https://github.com/navikt/Designsystemet/pull/1684) [`e19bf67b3`](https://github.com/navikt/Designsystemet/commit/e19bf67b337dea39989c68b5e9c2591cf0d5b40f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Oppdaterte tag-varianter
|
||||
|
||||
- [#1668](https://github.com/navikt/Designsystemet/pull/1668) [`97c5f60e9`](https://github.com/navikt/Designsystemet/commit/97c5f60e9111da7e08f55c8d0aa29581f0a9b1ca) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Chips komponent :sparkles:
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/ds-icons@1.5.0
|
||||
|
||||
## 1.4.4
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-react",
|
||||
"version": "1.4.4",
|
||||
"version": "1.5.2",
|
||||
"description": "NAV designsystem react components",
|
||||
"author": "NAV Designsystem team",
|
||||
"license": "MIT",
|
||||
@@ -37,7 +37,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@floating-ui/react-dom-interactions": "0.9.2",
|
||||
"@navikt/ds-icons": "^1.4.4",
|
||||
"@navikt/ds-icons": "^1.5.2",
|
||||
"@radix-ui/react-tabs": "1.0.0",
|
||||
"@radix-ui/react-toggle-group": "1.0.0",
|
||||
"clsx": "^1.2.1",
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
import cl from "clsx";
|
||||
import React, { forwardRef, HTMLAttributes } from "react";
|
||||
import ToggleChips, { ToggleChipsType } from "./Toggle";
|
||||
import RemovableChips, { RemovableChipsType } from "./Removable";
|
||||
|
||||
export interface ChipsProps extends HTMLAttributes<HTMLUListElement> {
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* Changes padding and font-sizes
|
||||
* @default "medium"
|
||||
*/
|
||||
size?: "medium" | "small";
|
||||
}
|
||||
|
||||
interface ChipsComponent
|
||||
extends React.ForwardRefExoticComponent<
|
||||
ChipsProps & React.RefAttributes<HTMLUListElement>
|
||||
> {
|
||||
Toggle: ToggleChipsType;
|
||||
Removable: RemovableChipsType;
|
||||
}
|
||||
|
||||
export const Chips: ChipsComponent = forwardRef<HTMLUListElement, ChipsProps>(
|
||||
({ className, size = "medium", children, ...rest }, ref) => {
|
||||
return (
|
||||
<ul
|
||||
{...rest}
|
||||
ref={ref}
|
||||
className={cl("navds-chips", className, `navds-chips--${size}`, {
|
||||
"navds-body-short navds-body-short--small": size === "medium",
|
||||
"navds-detail navds-detail--small": size === "small",
|
||||
})}
|
||||
>
|
||||
{React.Children.map(children, (chip, index) => {
|
||||
return <li key={index + (chip?.toString() ?? "")}>{chip}</li>;
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
) as ChipsComponent;
|
||||
|
||||
Chips.Toggle = ToggleChips;
|
||||
Chips.Removable = RemovableChips;
|
||||
|
||||
export default Chips;
|
||||
@@ -0,0 +1,68 @@
|
||||
import { Close } from "@navikt/ds-icons";
|
||||
import cl from "clsx";
|
||||
import React, { forwardRef } from "react";
|
||||
import { OverridableComponent } from "..";
|
||||
|
||||
export interface RemovableChipsProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
children: string;
|
||||
/**
|
||||
* Chip-variants
|
||||
* @default "action"
|
||||
*/
|
||||
variant?: "action" | "neutral";
|
||||
/**
|
||||
* Replaces label read for screen-readers
|
||||
* @default "slett filter"
|
||||
*/
|
||||
removeLabel?: string;
|
||||
/**
|
||||
* Click callback
|
||||
*/
|
||||
onDelete?: () => void;
|
||||
}
|
||||
|
||||
export interface RemovableChipsType
|
||||
extends OverridableComponent<RemovableChipsProps, HTMLButtonElement> {}
|
||||
|
||||
export const RemovableChips: OverridableComponent<
|
||||
RemovableChipsProps,
|
||||
HTMLButtonElement
|
||||
> = forwardRef(
|
||||
(
|
||||
{
|
||||
className,
|
||||
children,
|
||||
variant = "action",
|
||||
as: Component = "button",
|
||||
removeLabel = "slett",
|
||||
onDelete,
|
||||
...rest
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
return (
|
||||
<Component
|
||||
{...rest}
|
||||
ref={ref}
|
||||
className={cl(
|
||||
"navds-chips__chip navds-chips__removable navds-chips--icon-right",
|
||||
className,
|
||||
`navds-chips__removable--${variant}`
|
||||
)}
|
||||
aria-label={`${children} ${removeLabel}`}
|
||||
onClick={(e) => {
|
||||
onDelete?.();
|
||||
rest?.onClick?.(e);
|
||||
}}
|
||||
>
|
||||
<span className="navds-chips__chip-text">{children}</span>
|
||||
<span className="navds-chips__removable-icon">
|
||||
<Close aria-hidden />
|
||||
</span>
|
||||
</Component>
|
||||
);
|
||||
}
|
||||
) as RemovableChipsType;
|
||||
|
||||
export default RemovableChips;
|
||||
@@ -0,0 +1,41 @@
|
||||
import { SuccessStroke } from "@navikt/ds-icons";
|
||||
import cl from "clsx";
|
||||
import React, { forwardRef } from "react";
|
||||
import { OverridableComponent } from "..";
|
||||
|
||||
export interface ToggleChipsProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
children: string;
|
||||
/**
|
||||
* Toggles aria-pressed and visual-changes
|
||||
*/
|
||||
selected?: boolean;
|
||||
}
|
||||
|
||||
export interface ToggleChipsType
|
||||
extends OverridableComponent<ToggleChipsProps, HTMLButtonElement> {}
|
||||
|
||||
export const ToggleChips: ToggleChipsType = forwardRef(
|
||||
(
|
||||
{ className, children, selected, as: Component = "button", ...rest },
|
||||
ref
|
||||
) => {
|
||||
return (
|
||||
<Component
|
||||
{...rest}
|
||||
ref={ref}
|
||||
className={cl("navds-chips__chip navds-chips__toggle", className, {
|
||||
"navds-chips--icon-left": selected,
|
||||
})}
|
||||
aria-pressed={selected}
|
||||
>
|
||||
{selected && (
|
||||
<SuccessStroke aria-hidden className="navds-chips__toggle-icon" />
|
||||
)}
|
||||
<span className="navds-chips__chip-text">{children}</span>
|
||||
</Component>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default ToggleChips;
|
||||
@@ -0,0 +1,165 @@
|
||||
import React, { useState } from "react";
|
||||
import { Chips } from ".";
|
||||
|
||||
export default {
|
||||
title: "ds-react/Chips",
|
||||
component: Chips,
|
||||
argTypes: {
|
||||
type: {
|
||||
control: {
|
||||
type: "radio",
|
||||
options: ["toggle", "removable"],
|
||||
},
|
||||
},
|
||||
size: {
|
||||
control: {
|
||||
type: "radio",
|
||||
options: ["medium", "small"],
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const options = ["Norsk", "Dansk", "Svensk", "Tysk", "Spansk"];
|
||||
|
||||
export const Default = (props) => {
|
||||
const [selected, setSelected] = useState(["Dansk", "Svensk"]);
|
||||
const [filter, setFilter] = useState(options);
|
||||
|
||||
if (props.type === "toggle") {
|
||||
return (
|
||||
<Chips size={props.size ?? "medium"}>
|
||||
{options.map((c) => (
|
||||
<Chips.Toggle
|
||||
selected={selected.includes(c)}
|
||||
key={c}
|
||||
onClick={() =>
|
||||
setSelected(
|
||||
selected.includes(c)
|
||||
? selected.filter((x) => x !== c)
|
||||
: [...selected, c]
|
||||
)
|
||||
}
|
||||
>
|
||||
{c}
|
||||
</Chips.Toggle>
|
||||
))}
|
||||
</Chips>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Chips size={props.size ?? "medium"}>
|
||||
{filter.map((c) => (
|
||||
<Chips.Removable
|
||||
key={c}
|
||||
onClick={() => setFilter((x) => x.filter((y) => y !== c))}
|
||||
>
|
||||
{c}
|
||||
</Chips.Removable>
|
||||
))}
|
||||
</Chips>
|
||||
);
|
||||
};
|
||||
|
||||
export const Toggle = () => {
|
||||
const [selected, setSelected] = useState<number[]>([]);
|
||||
return (
|
||||
<Chips>
|
||||
{options.map((c, y) => (
|
||||
<Chips.Toggle
|
||||
selected={selected.includes(y)}
|
||||
onClick={() =>
|
||||
setSelected(
|
||||
selected.includes(y)
|
||||
? selected.filter((x) => x !== y)
|
||||
: [...selected, y]
|
||||
)
|
||||
}
|
||||
key={y}
|
||||
>
|
||||
{c}
|
||||
</Chips.Toggle>
|
||||
))}
|
||||
</Chips>
|
||||
);
|
||||
};
|
||||
|
||||
export const Removable = () => {
|
||||
return (
|
||||
<div className="colgap">
|
||||
<Chips>
|
||||
{options.map((c, y) => (
|
||||
<Chips.Removable key={y}>{c}</Chips.Removable>
|
||||
))}
|
||||
</Chips>
|
||||
<Chips>
|
||||
{options.map((c, y) => (
|
||||
<Chips.Removable variant="neutral" key={y}>
|
||||
{c}
|
||||
</Chips.Removable>
|
||||
))}
|
||||
</Chips>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Regular = () => {
|
||||
const [selected, setSelected] = useState<number[]>([]);
|
||||
return (
|
||||
<div className="colgap">
|
||||
<Chips>
|
||||
{options.map((c, y) => (
|
||||
<Chips.Removable key={y}>{c}</Chips.Removable>
|
||||
))}
|
||||
</Chips>
|
||||
<Chips>
|
||||
{options.map((c, y) => (
|
||||
<Chips.Toggle
|
||||
selected={selected.includes(y)}
|
||||
onClick={() =>
|
||||
setSelected(
|
||||
selected.includes(y)
|
||||
? selected.filter((x) => x !== y)
|
||||
: [...selected, y]
|
||||
)
|
||||
}
|
||||
key={y}
|
||||
>
|
||||
{c}
|
||||
</Chips.Toggle>
|
||||
))}
|
||||
</Chips>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Small = () => {
|
||||
const [selected, setSelected] = useState<number[]>([]);
|
||||
return (
|
||||
<div className="colgap">
|
||||
<Chips size="small">
|
||||
{options.map((c, y) => (
|
||||
<Chips.Removable key={y}>{c}</Chips.Removable>
|
||||
))}
|
||||
</Chips>
|
||||
<Chips size="small">
|
||||
{options.map((c, y) => (
|
||||
<Chips.Toggle
|
||||
selected={selected.includes(y)}
|
||||
onClick={() =>
|
||||
setSelected(
|
||||
selected.includes(y)
|
||||
? selected.filter((x) => x !== y)
|
||||
: [...selected, y]
|
||||
)
|
||||
}
|
||||
key={y}
|
||||
>
|
||||
{c}
|
||||
</Chips.Toggle>
|
||||
))}
|
||||
</Chips>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
export { default as Chips, ChipsProps } from "./Chips";
|
||||
@@ -16,6 +16,7 @@ export * from "./panel";
|
||||
export * from "./popover";
|
||||
export * from "./read-more";
|
||||
export * from "./chat";
|
||||
export * from "./chips";
|
||||
export * from "./stepper";
|
||||
export * from "./tag";
|
||||
export * from "./toggle-group";
|
||||
|
||||
@@ -3,19 +3,31 @@ import cl from "clsx";
|
||||
import { BodyShort, Detail } from "..";
|
||||
|
||||
export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
|
||||
/**
|
||||
* Tag label
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* Changes background and border color
|
||||
* Changes visual profile of tag
|
||||
*/
|
||||
variant: "warning" | "error" | "info" | "success";
|
||||
variant:
|
||||
| "warning"
|
||||
| "warning-filled"
|
||||
| "error"
|
||||
| "error-filled"
|
||||
| "info"
|
||||
| "info-filled"
|
||||
| "success"
|
||||
| "success-filled"
|
||||
| "neutral"
|
||||
| "neutral-filled"
|
||||
| "alt1"
|
||||
| "alt1-filled"
|
||||
| "alt2"
|
||||
| "alt2-filled"
|
||||
| "alt3"
|
||||
| "alt3-filled";
|
||||
/**
|
||||
* Changes padding and font-sizes
|
||||
* @default "medium"
|
||||
*/
|
||||
size?: "medium" | "small";
|
||||
size?: "medium" | "small" | "xsmall";
|
||||
}
|
||||
|
||||
export const Tag = forwardRef<HTMLSpanElement, TagProps>(
|
||||
@@ -27,7 +39,7 @@ export const Tag = forwardRef<HTMLSpanElement, TagProps>(
|
||||
{...rest}
|
||||
ref={ref}
|
||||
as="span"
|
||||
size={size}
|
||||
size={size === "medium" ? "medium" : "small"}
|
||||
className={cl(
|
||||
"navds-tag",
|
||||
className,
|
||||
|
||||
@@ -9,17 +9,70 @@ export default {
|
||||
defaultValue: "info",
|
||||
control: {
|
||||
type: "radio",
|
||||
options: ["error", "warning", "info", "success"],
|
||||
options: [
|
||||
"warning",
|
||||
"error",
|
||||
"info",
|
||||
"success",
|
||||
"neutral",
|
||||
"alt1",
|
||||
"alt2",
|
||||
"alt3",
|
||||
"warning-filled",
|
||||
"error-filled",
|
||||
"info-filled",
|
||||
"success-filled",
|
||||
"neutral-filled",
|
||||
"alt1-filled",
|
||||
"alt2-filled",
|
||||
"alt3-filled",
|
||||
],
|
||||
},
|
||||
},
|
||||
size: {
|
||||
defaultValue: "medium",
|
||||
control: {
|
||||
type: "radio",
|
||||
options: ["xsmall", "small", "medium"],
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const variants: Array<"error" | "warning" | "info" | "success"> = [
|
||||
"error",
|
||||
const variants: Array<
|
||||
| "warning"
|
||||
| "warning-filled"
|
||||
| "error"
|
||||
| "error-filled"
|
||||
| "info"
|
||||
| "info-filled"
|
||||
| "success"
|
||||
| "success-filled"
|
||||
| "neutral"
|
||||
| "neutral-filled"
|
||||
| "alt1"
|
||||
| "alt1-filled"
|
||||
| "alt2"
|
||||
| "alt2-filled"
|
||||
| "alt3"
|
||||
| "alt3-filled"
|
||||
> = [
|
||||
"warning",
|
||||
"error",
|
||||
"info",
|
||||
"success",
|
||||
"neutral",
|
||||
"alt1",
|
||||
"alt2",
|
||||
"alt3",
|
||||
"warning-filled",
|
||||
"error-filled",
|
||||
"info-filled",
|
||||
"success-filled",
|
||||
"neutral-filled",
|
||||
"alt1-filled",
|
||||
"alt2-filled",
|
||||
"alt3-filled",
|
||||
];
|
||||
|
||||
export const Default = (props) => (
|
||||
@@ -34,10 +87,34 @@ Default.args = {
|
||||
|
||||
export const Small = () => {
|
||||
return (
|
||||
<div className="rowgap">
|
||||
<div className="rowgap rowgap-wrap">
|
||||
{variants.map((variant, i) => (
|
||||
<Tag key={variant} variant={variant} size="small">
|
||||
{new Array(i + 1).fill("Id elit esse")}
|
||||
{variant}
|
||||
</Tag>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const xSmall = () => {
|
||||
return (
|
||||
<div className="rowgap rowgap-wrap">
|
||||
{variants.map((variant, i) => (
|
||||
<Tag key={variant} variant={variant} size="xsmall">
|
||||
{variant}
|
||||
</Tag>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Variants = () => {
|
||||
return (
|
||||
<div className="rowgap rowgap-wrap">
|
||||
{variants.map((variant, i) => (
|
||||
<Tag key={variant} variant={variant}>
|
||||
{variant}
|
||||
</Tag>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
# @navikt/ds-tailwind
|
||||
|
||||
## 1.5.2
|
||||
|
||||
## 1.5.1
|
||||
|
||||
## 1.5.0
|
||||
|
||||
## 1.4.4
|
||||
|
||||
## 1.4.3
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-tailwind",
|
||||
"version": "1.4.4",
|
||||
"version": "1.5.2",
|
||||
"description": "Auto-generated tailwind config based on @navikt/ds-tokens",
|
||||
"author": "NAV Designsystem team",
|
||||
"keywords": [
|
||||
@@ -22,7 +22,7 @@
|
||||
"directory": "@navikt/core/tailwind"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-tokens": "^1.4.4",
|
||||
"@navikt/ds-tokens": "^1.5.2",
|
||||
"@types/jest": "^29.0.0",
|
||||
"@types/node": "^17.0.35",
|
||||
"jest": "^29.0.0",
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
# @navikt/ds-tokens
|
||||
|
||||
## 1.5.2
|
||||
|
||||
## 1.5.1
|
||||
|
||||
## 1.5.0
|
||||
|
||||
## 1.4.4
|
||||
|
||||
## 1.4.3
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-tokens",
|
||||
"version": "1.4.4",
|
||||
"version": "1.5.2",
|
||||
"description": "Auto-generated design-tokens for NAV design-systems framework",
|
||||
"author": "NAV Designsystem team",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
# @navikt/ds-icons
|
||||
|
||||
## 1.5.2
|
||||
|
||||
## 1.5.1
|
||||
|
||||
## 1.5.0
|
||||
|
||||
## 1.4.4
|
||||
|
||||
## 1.4.3
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-icons",
|
||||
"version": "1.4.4",
|
||||
"version": "1.5.2",
|
||||
"description": "Aksel icons",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
# @navikt/ds-css-internal
|
||||
|
||||
## 1.5.2
|
||||
|
||||
## 1.5.1
|
||||
|
||||
## 1.5.0
|
||||
|
||||
## 1.4.4
|
||||
|
||||
## 1.4.3
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-css-internal",
|
||||
"version": "1.4.4",
|
||||
"version": "1.5.2",
|
||||
"description": "Css for NAV internal Designsystem components",
|
||||
"author": "NAV Designsystem team",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,5 +1,29 @@
|
||||
# @navikt/ds-react-internal
|
||||
|
||||
## 1.5.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/ds-react@1.5.2
|
||||
- @navikt/ds-icons@1.5.2
|
||||
|
||||
## 1.5.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/ds-react@1.5.1
|
||||
- @navikt/ds-icons@1.5.1
|
||||
|
||||
## 1.5.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [[`e19bf67b3`](https://github.com/navikt/Designsystemet/commit/e19bf67b337dea39989c68b5e9c2591cf0d5b40f), [`97c5f60e9`](https://github.com/navikt/Designsystemet/commit/97c5f60e9111da7e08f55c8d0aa29581f0a9b1ca)]:
|
||||
- @navikt/ds-react@1.5.0
|
||||
- @navikt/ds-icons@1.5.0
|
||||
|
||||
## 1.4.4
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-react-internal",
|
||||
"version": "1.4.4",
|
||||
"version": "1.5.2",
|
||||
"description": "NAV internal designsystem react components",
|
||||
"author": "NAV Designsystem team",
|
||||
"license": "MIT",
|
||||
@@ -35,8 +35,8 @@
|
||||
"watch": "tsc --watch -p tsconfig.esm.json"
|
||||
},
|
||||
"dependencies": {
|
||||
"@navikt/ds-icons": "^1.4.4",
|
||||
"@navikt/ds-react": "^1.4.4",
|
||||
"@navikt/ds-icons": "^1.5.2",
|
||||
"@navikt/ds-react": "^1.5.2",
|
||||
"clsx": "^1.1.1",
|
||||
"copy-to-clipboard": "^3.3.1"
|
||||
},
|
||||
|
||||
@@ -18,14 +18,14 @@
|
||||
"website"
|
||||
],
|
||||
"dependencies": {
|
||||
"@navikt/ds-codemod": "^1.4.4",
|
||||
"@navikt/ds-css": "^1.4.4",
|
||||
"@navikt/ds-css-internal": "^1.4.4",
|
||||
"@navikt/ds-icons": "^1.4.4",
|
||||
"@navikt/ds-react": "^1.4.4",
|
||||
"@navikt/ds-react-internal": "^1.4.4",
|
||||
"@navikt/ds-tailwind": "^1.4.4",
|
||||
"@navikt/ds-tokens": "^1.4.4"
|
||||
"@navikt/ds-codemod": "^1.5.2",
|
||||
"@navikt/ds-css": "^1.5.2",
|
||||
"@navikt/ds-css-internal": "^1.5.2",
|
||||
"@navikt/ds-icons": "^1.5.2",
|
||||
"@navikt/ds-react": "^1.5.2",
|
||||
"@navikt/ds-react-internal": "^1.5.2",
|
||||
"@navikt/ds-tailwind": "^1.5.2",
|
||||
"@navikt/ds-tokens": "^1.5.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"prettier-plugin-tailwindcss": "^0.1.13"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Expand } from "@navikt/ds-icons";
|
||||
import { BodyShort, Detail } from "@navikt/ds-react";
|
||||
import { BodyShort, Detail, Tag } from "@navikt/ds-react";
|
||||
import cl from "classnames";
|
||||
import NextLink from "next/link";
|
||||
import React, { useContext, useMemo, useState } from "react";
|
||||
@@ -59,22 +59,23 @@ const NavItem = ({
|
||||
)}
|
||||
>
|
||||
{item.title}
|
||||
{item?.link?.status &&
|
||||
["deprecated", "beta"].includes(item.link.status?.tag) && (
|
||||
<Detail
|
||||
className={cl(
|
||||
"font-regular ml-2 rounded-full border-none px-2 capitalize",
|
||||
{
|
||||
"text-text bg-gray-200 capitalize ring-1 ring-inset ring-gray-900/10":
|
||||
item.link.status?.tag === "deprecated",
|
||||
"text-text bg-purple-50 ring-1 ring-inset ring-purple-900/10":
|
||||
item.link.status?.tag === "beta",
|
||||
<span className="ml-2 capitalize">
|
||||
{item?.link?.status &&
|
||||
["deprecated", "beta", "new"].includes(item.link.status?.tag) && (
|
||||
<Tag
|
||||
size="xsmall"
|
||||
variant={
|
||||
item.link.status?.tag === "beta"
|
||||
? "alt2"
|
||||
: item.link.status?.tag === "deprecated"
|
||||
? "neutral"
|
||||
: "info"
|
||||
}
|
||||
)}
|
||||
>
|
||||
{item.link.status?.tag}
|
||||
</Detail>
|
||||
)}
|
||||
>
|
||||
{item.link.status?.tag}
|
||||
</Tag>
|
||||
)}
|
||||
</span>
|
||||
</BodyShort>
|
||||
</NextLink>
|
||||
</li>
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
import { capitalize, Snippet } from "@/components";
|
||||
import { withErrorBoundary } from "@/error-boundary";
|
||||
import { SanityT } from "@/lib";
|
||||
import { SuccessStroke } from "@navikt/ds-icons";
|
||||
import { BodyLong, Link } from "@navikt/ds-react";
|
||||
import * as Tabs from "@radix-ui/react-tabs";
|
||||
import { BodyLong, Link, Chips } from "@navikt/ds-react";
|
||||
import cl from "classnames";
|
||||
import { useEffect, useState } from "react";
|
||||
import { CodeSandbox } from "./CodeSandbox";
|
||||
@@ -57,8 +55,6 @@ const ComponentExamples = ({
|
||||
str
|
||||
.replace(/[^\w]|_/g, " ")
|
||||
.replace(/\s+/g, " ")
|
||||
.match(/\D/g)
|
||||
.join("")
|
||||
.trim()
|
||||
) ?? str;
|
||||
|
||||
@@ -107,51 +103,46 @@ const ComponentExamples = ({
|
||||
);
|
||||
}
|
||||
|
||||
const active = activeExample ?? node?.dir?.filer?.[0]?.navn;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tabs.Root
|
||||
defaultValue={node.dir.filer[0].navn}
|
||||
onValueChange={(v) => setActiveExample(v)}
|
||||
>
|
||||
<Tabs.List className="mb-5 flex max-w-xl flex-wrap gap-2">
|
||||
<div>
|
||||
<div className="mb-5 max-w-xl">
|
||||
<Chips>
|
||||
{node.dir.filer.map((fil) => {
|
||||
return (
|
||||
<Tabs.Trigger
|
||||
<Chips.Toggle
|
||||
key={fil._key}
|
||||
value={fil.navn}
|
||||
className={cl(
|
||||
"flex h-8 items-center justify-center rounded-full text-base ring-inset ring-gray-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-800",
|
||||
{
|
||||
"gap-1 bg-gray-200 pr-3 pl-[10px] ring-2 hover:bg-gray-100":
|
||||
activeExample === fil.navn,
|
||||
"bg-white px-3 ring-1 hover:bg-gray-100":
|
||||
activeExample !== fil.navn,
|
||||
}
|
||||
)}
|
||||
selected={active === fil.navn}
|
||||
onClick={() => setActiveExample(fil.navn)}
|
||||
>
|
||||
{activeExample === fil.navn && (
|
||||
<SuccessStroke aria-hidden className="h-6 w-6" />
|
||||
)}
|
||||
{fixName(fil.navn)}
|
||||
</Tabs.Trigger>
|
||||
</Chips.Toggle>
|
||||
);
|
||||
})}
|
||||
</Tabs.List>
|
||||
{node.dir.filer.map((fil) => {
|
||||
return (
|
||||
<Tabs.Content key={fil._key} value={fil.navn} tabIndex={-1}>
|
||||
{fil?.description && (
|
||||
<BodyLong className="mb-2">{fil.description}</BodyLong>
|
||||
)}
|
||||
{element(
|
||||
`/eksempler/${node.dir.title}/${fil.navn.replace(".tsx", "")}`,
|
||||
fil.innhold
|
||||
)}
|
||||
</Tabs.Content>
|
||||
);
|
||||
})}
|
||||
</Tabs.Root>
|
||||
</>
|
||||
</Chips>
|
||||
</div>
|
||||
{node.dir.filer.map((fil) => {
|
||||
return (
|
||||
<div
|
||||
key={fil._key}
|
||||
className={cl({
|
||||
visible: active === fil.navn,
|
||||
hidden: active !== fil.navn,
|
||||
})}
|
||||
>
|
||||
{fil?.description && (
|
||||
<BodyLong className="mb-2">{fil.description}</BodyLong>
|
||||
)}
|
||||
{element(
|
||||
`/eksempler/${node.dir.title}/${fil.navn.replace(".tsx", "")}`,
|
||||
fil.innhold
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
import { test, expect } from "@playwright/test";
|
||||
|
||||
test("Test sandbox-examples", async ({ page }) => {
|
||||
await page.goto("http://localhost:3000/designsystem/komponenter/checkbox");
|
||||
|
||||
await page.frameLocator("#Kode-eksempler").getByLabel("Bakerst").check();
|
||||
|
||||
await page.frameLocator("#Kode-eksempler").getByLabel("Midterst").check();
|
||||
|
||||
await page.frameLocator("#Kode-eksempler").getByLabel("Fremst").check();
|
||||
|
||||
await page.getByRole("tab", { name: "Small" }).click();
|
||||
|
||||
await page.frameLocator("#Kode-eksempler").getByLabel("Midterst").check();
|
||||
|
||||
await page.getByRole("tab", { name: "Description" }).click();
|
||||
|
||||
await page.frameLocator("#Kode-eksempler").getByLabel("Midterst").check();
|
||||
|
||||
await page.getByRole("tab", { name: "Indeterminate" }).click();
|
||||
|
||||
await page.frameLocator("#Kode-eksempler").getByLabel("Fremst").check();
|
||||
|
||||
await page.frameLocator("#Kode-eksempler").getByLabel("Bakerst").check();
|
||||
|
||||
await page.frameLocator("#Kode-eksempler").getByLabel("Midterst").check();
|
||||
|
||||
await page.getByRole("link", { name: "Button" }).click();
|
||||
|
||||
await expect(page).toHaveURL(
|
||||
"http://localhost:3000/designsystem/komponenter/button"
|
||||
);
|
||||
|
||||
await page
|
||||
.frameLocator("#Kode-eksempler")
|
||||
.getByRole("button", { name: "Primary" })
|
||||
.click();
|
||||
|
||||
await page.getByRole("tab", { name: "Icon" }).click();
|
||||
|
||||
await page
|
||||
.frameLocator("#Kode-eksempler")
|
||||
.getByRole("button", { name: "Rediger" })
|
||||
.click();
|
||||
|
||||
await page.getByRole("link", { name: "Search" }).click();
|
||||
await expect(page).toHaveURL(
|
||||
"http://localhost:3000/designsystem/komponenter/search"
|
||||
);
|
||||
|
||||
await page
|
||||
.frameLocator("#Kode-eksempler")
|
||||
.getByLabel("Søk alle NAV sine sider")
|
||||
.click();
|
||||
|
||||
await page
|
||||
.frameLocator("#Kode-eksempler")
|
||||
.getByLabel("Søk alle NAV sine sider")
|
||||
.fill("test");
|
||||
|
||||
await page
|
||||
.frameLocator("#Kode-eksempler")
|
||||
.getByRole("button", { name: "Søk" })
|
||||
.click();
|
||||
});
|
||||
@@ -0,0 +1,52 @@
|
||||
import { Chips } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
import { useState } from "react";
|
||||
|
||||
const Example = () => {
|
||||
const options = ["Norsk", "Dansk", "Svensk", "Tysk", "Spansk"];
|
||||
|
||||
const [selected, setSelected] = useState(["Dansk", "Svensk"]);
|
||||
const [filter, setFilter] = useState(options);
|
||||
|
||||
return (
|
||||
<div className="grid gap-4">
|
||||
<Chips>
|
||||
{options.map((c) => (
|
||||
<Chips.Toggle
|
||||
selected={selected.includes(c)}
|
||||
key={c}
|
||||
onClick={() =>
|
||||
setSelected(
|
||||
selected.includes(c)
|
||||
? selected.filter((x) => x !== c)
|
||||
: [...selected, c]
|
||||
)
|
||||
}
|
||||
>
|
||||
{c}
|
||||
</Chips.Toggle>
|
||||
))}
|
||||
</Chips>
|
||||
<Chips>
|
||||
{filter.map((c) => (
|
||||
<Chips.Removable
|
||||
key={c}
|
||||
onClick={() =>
|
||||
setFilter((x) =>
|
||||
x.length === 1 ? options : x.filter((y) => y !== c)
|
||||
)
|
||||
}
|
||||
>
|
||||
{c}
|
||||
</Chips.Removable>
|
||||
))}
|
||||
</Chips>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
export const args = {
|
||||
index: 0,
|
||||
};
|
||||
@@ -0,0 +1,32 @@
|
||||
import { Chips } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
import { useState } from "react";
|
||||
|
||||
const Example = () => {
|
||||
const options = ["Norsk", "Dansk", "Svensk", "Tysk", "Spansk"];
|
||||
|
||||
const [filter, setFilter] = useState(options);
|
||||
|
||||
return (
|
||||
<Chips>
|
||||
{filter.map((c) => (
|
||||
<Chips.Removable
|
||||
key={c}
|
||||
onClick={() =>
|
||||
setFilter((x) =>
|
||||
x.length === 1 ? options : x.filter((y) => y !== c)
|
||||
)
|
||||
}
|
||||
>
|
||||
{c}
|
||||
</Chips.Removable>
|
||||
))}
|
||||
</Chips>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
export const args = {
|
||||
index: 2,
|
||||
};
|
||||
@@ -0,0 +1,52 @@
|
||||
import { Chips } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
import { useState } from "react";
|
||||
|
||||
const Example = () => {
|
||||
const options = ["Norsk", "Dansk", "Svensk", "Tysk", "Spansk"];
|
||||
|
||||
const [selected, setSelected] = useState(["Dansk", "Svensk"]);
|
||||
const [filter, setFilter] = useState(options);
|
||||
|
||||
return (
|
||||
<div className="grid gap-4">
|
||||
<Chips size="small">
|
||||
{options.map((c) => (
|
||||
<Chips.Toggle
|
||||
selected={selected.includes(c)}
|
||||
key={c}
|
||||
onClick={() =>
|
||||
setSelected(
|
||||
selected.includes(c)
|
||||
? selected.filter((x) => x !== c)
|
||||
: [...selected, c]
|
||||
)
|
||||
}
|
||||
>
|
||||
{c}
|
||||
</Chips.Toggle>
|
||||
))}
|
||||
</Chips>
|
||||
<Chips size="small">
|
||||
{filter.map((c) => (
|
||||
<Chips.Removable
|
||||
key={c}
|
||||
onClick={() =>
|
||||
setFilter((x) =>
|
||||
x.length === 1 ? options : x.filter((y) => y !== c)
|
||||
)
|
||||
}
|
||||
>
|
||||
{c}
|
||||
</Chips.Removable>
|
||||
))}
|
||||
</Chips>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
export const args = {
|
||||
index: 3,
|
||||
};
|
||||
@@ -0,0 +1,35 @@
|
||||
import { Chips } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
import { useState } from "react";
|
||||
|
||||
const Example = () => {
|
||||
const options = ["Norsk", "Dansk", "Svensk", "Tysk", "Spansk"];
|
||||
|
||||
const [selected, setSelected] = useState(["Dansk", "Svensk"]);
|
||||
|
||||
return (
|
||||
<Chips>
|
||||
{options.map((c) => (
|
||||
<Chips.Toggle
|
||||
selected={selected.includes(c)}
|
||||
key={c}
|
||||
onClick={() =>
|
||||
setSelected(
|
||||
selected.includes(c)
|
||||
? selected.filter((x) => x !== c)
|
||||
: [...selected, c]
|
||||
)
|
||||
}
|
||||
>
|
||||
{c}
|
||||
</Chips.Toggle>
|
||||
))}
|
||||
</Chips>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
export const args = {
|
||||
index: 1,
|
||||
};
|
||||
@@ -0,0 +1,18 @@
|
||||
import { Tag } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<Tag variant="alt1">Alt1</Tag>
|
||||
<Tag variant="alt1-filled">Alt1</Tag>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
export const args = {
|
||||
index: 5,
|
||||
desc: "Har ingen global betydning. Tjenesten/produktet kan bestemme hva de symboliserer.",
|
||||
};
|
||||
@@ -0,0 +1,18 @@
|
||||
import { Tag } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<Tag variant="alt2">Alt2</Tag>
|
||||
<Tag variant="alt2-filled">Alt2</Tag>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
export const args = {
|
||||
index: 6,
|
||||
desc: "Har ingen global betydning. Tjenesten/produktet kan bestemme hva de symboliserer.",
|
||||
};
|
||||
@@ -0,0 +1,18 @@
|
||||
import { Tag } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<Tag variant="alt3">Alt3</Tag>
|
||||
<Tag variant="alt3-filled">Alt3</Tag>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
export const args = {
|
||||
index: 7,
|
||||
desc: "Har ingen global betydning. Tjenesten/produktet kan bestemme hva de symboliserer.",
|
||||
};
|
||||
@@ -2,11 +2,17 @@ import { Tag } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
return <Tag variant="error">Error</Tag>;
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<Tag variant="error">Error</Tag>
|
||||
<Tag variant="error-filled">Error</Tag>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
export const args = {
|
||||
index: 3,
|
||||
index: 4,
|
||||
desc: "Beskriver noe som er farlig, tjenestebrudd, irreversibelt, etc.",
|
||||
};
|
||||
@@ -2,11 +2,17 @@ import { Tag } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
return <Tag variant="info">Info</Tag>;
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<Tag variant="info">Info</Tag>
|
||||
<Tag variant="info-filled">Info</Tag>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
export const args = {
|
||||
index: 0,
|
||||
index: 1,
|
||||
desc: "Beskriver noe som er til opplysning, nyhet, etc.",
|
||||
};
|
||||
@@ -0,0 +1,18 @@
|
||||
import { Tag } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<Tag variant="neutral">Neutral</Tag>
|
||||
<Tag variant="neutral-filled">Neutral</Tag>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
export const args = {
|
||||
index: 0,
|
||||
desc: "Beskriver noe nøytralt",
|
||||
};
|
||||
@@ -12,5 +12,5 @@ const Example = () => {
|
||||
export default withDsExample(Example);
|
||||
|
||||
export const args = {
|
||||
index: 4,
|
||||
index: 20,
|
||||
};
|
||||
@@ -2,11 +2,17 @@ import { Tag } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
return <Tag variant="success">Success</Tag>;
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<Tag variant="success">Success</Tag>
|
||||
<Tag variant="success-filled">Success</Tag>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
export const args = {
|
||||
index: 1,
|
||||
index: 2,
|
||||
desc: "Beskriver noe som er positivt, gjennomført, vellykket, etc.",
|
||||
};
|
||||
@@ -2,11 +2,17 @@ import { Tag } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
return <Tag variant="warning">Warning</Tag>;
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<Tag variant="warning">Warning</Tag>
|
||||
<Tag variant="warning-filled">Warning</Tag>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
export const args = {
|
||||
index: 2,
|
||||
index: 3,
|
||||
desc: "Beskriver noe som er en advarsel, usikkert, noe som må utbedres, etc.",
|
||||
};
|
||||
@@ -0,0 +1,16 @@
|
||||
import { Tag } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
return (
|
||||
<Tag variant="info" size="xsmall">
|
||||
Info
|
||||
</Tag>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
export const args = {
|
||||
index: 21,
|
||||
};
|
||||
@@ -9,16 +9,16 @@
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@navikt/ds-css": "^1.4.4",
|
||||
"@navikt/ds-icons": "^1.4.4",
|
||||
"@navikt/ds-react": "^1.4.4",
|
||||
"@navikt/ds-react-internal": "^1.4.4",
|
||||
"@navikt/ds-css": "^1.5.2",
|
||||
"@navikt/ds-icons": "^1.5.2",
|
||||
"@navikt/ds-react": "^1.5.2",
|
||||
"@navikt/ds-react-internal": "^1.5.2",
|
||||
"next": "^12.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-tailwind": "^1.4.4",
|
||||
"@navikt/ds-tailwind": "^1.5.2",
|
||||
"@types/node": "^17.0.35",
|
||||
"@types/react": "^18.0.0",
|
||||
"@types/react-dom": "^18.0.0",
|
||||
|
||||
@@ -3166,7 +3166,7 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@navikt/ds-codemod@^1.4.3, @navikt/ds-codemod@workspace:@navikt/codemod":
|
||||
"@navikt/ds-codemod@^1.5.2, @navikt/ds-codemod@workspace:@navikt/codemod":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-codemod@workspace:@navikt/codemod"
|
||||
dependencies:
|
||||
@@ -3193,7 +3193,7 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@navikt/ds-css-internal@^1.4.3, @navikt/ds-css-internal@workspace:@navikt/internal/css":
|
||||
"@navikt/ds-css-internal@^1.5.2, @navikt/ds-css-internal@workspace:@navikt/internal/css":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-css-internal@workspace:@navikt/internal/css"
|
||||
dependencies:
|
||||
@@ -3204,11 +3204,11 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@navikt/ds-css@*, @navikt/ds-css@^1.4.3, @navikt/ds-css@workspace:@navikt/core/css":
|
||||
"@navikt/ds-css@*, @navikt/ds-css@^1.5.2, @navikt/ds-css@workspace:@navikt/core/css":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-css@workspace:@navikt/core/css"
|
||||
dependencies:
|
||||
"@navikt/ds-tokens": ^1.4.3
|
||||
"@navikt/ds-tokens": ^1.5.2
|
||||
normalize.css: ^8.0.1
|
||||
postcss: ^8.4.0
|
||||
postcss-cli: ^9.0.0
|
||||
@@ -3217,7 +3217,7 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@navikt/ds-icons@^1.4.3, @navikt/ds-icons@workspace:@navikt/icons":
|
||||
"@navikt/ds-icons@^1.5.2, @navikt/ds-icons@workspace:@navikt/icons":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-icons@workspace:@navikt/icons"
|
||||
dependencies:
|
||||
@@ -3247,12 +3247,12 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@navikt/ds-react-internal@^1.4.3, @navikt/ds-react-internal@workspace:@navikt/internal/react":
|
||||
"@navikt/ds-react-internal@^1.5.2, @navikt/ds-react-internal@workspace:@navikt/internal/react":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-react-internal@workspace:@navikt/internal/react"
|
||||
dependencies:
|
||||
"@navikt/ds-icons": ^1.4.3
|
||||
"@navikt/ds-react": ^1.4.3
|
||||
"@navikt/ds-icons": ^1.5.2
|
||||
"@navikt/ds-react": ^1.5.2
|
||||
"@types/node": ^17.0.35
|
||||
clsx: ^1.1.1
|
||||
concurrently: 7.2.1
|
||||
@@ -3269,12 +3269,12 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@navikt/ds-react@*, @navikt/ds-react@^1.4.3, @navikt/ds-react@workspace:@navikt/core/react":
|
||||
"@navikt/ds-react@*, @navikt/ds-react@^1.5.2, @navikt/ds-react@workspace:@navikt/core/react":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-react@workspace:@navikt/core/react"
|
||||
dependencies:
|
||||
"@floating-ui/react-dom-interactions": 0.9.2
|
||||
"@navikt/ds-icons": ^1.4.3
|
||||
"@navikt/ds-icons": ^1.5.2
|
||||
"@radix-ui/react-tabs": 1.0.0
|
||||
"@radix-ui/react-toggle-group": 1.0.0
|
||||
"@testing-library/dom": 8.13.0
|
||||
@@ -3311,11 +3311,11 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@navikt/ds-tailwind@^1.4.3, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
|
||||
"@navikt/ds-tailwind@^1.5.2, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
|
||||
dependencies:
|
||||
"@navikt/ds-tokens": ^1.4.3
|
||||
"@navikt/ds-tokens": ^1.5.2
|
||||
"@types/jest": ^29.0.0
|
||||
"@types/node": ^17.0.35
|
||||
jest: ^29.0.0
|
||||
@@ -3326,7 +3326,7 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@navikt/ds-tokens@^1.4.3, @navikt/ds-tokens@workspace:@navikt/core/tokens":
|
||||
"@navikt/ds-tokens@^1.5.2, @navikt/ds-tokens@workspace:@navikt/core/tokens":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
|
||||
dependencies:
|
||||
@@ -8341,14 +8341,14 @@ __metadata:
|
||||
version: 0.0.0-use.local
|
||||
resolution: "aksel.nav.no@workspace:aksel.nav.no"
|
||||
dependencies:
|
||||
"@navikt/ds-codemod": ^1.4.3
|
||||
"@navikt/ds-css": ^1.4.3
|
||||
"@navikt/ds-css-internal": ^1.4.3
|
||||
"@navikt/ds-icons": ^1.4.3
|
||||
"@navikt/ds-react": ^1.4.3
|
||||
"@navikt/ds-react-internal": ^1.4.3
|
||||
"@navikt/ds-tailwind": ^1.4.3
|
||||
"@navikt/ds-tokens": ^1.4.3
|
||||
"@navikt/ds-codemod": ^1.5.2
|
||||
"@navikt/ds-css": ^1.5.2
|
||||
"@navikt/ds-css-internal": ^1.5.2
|
||||
"@navikt/ds-icons": ^1.5.2
|
||||
"@navikt/ds-react": ^1.5.2
|
||||
"@navikt/ds-react-internal": ^1.5.2
|
||||
"@navikt/ds-tailwind": ^1.5.2
|
||||
"@navikt/ds-tokens": ^1.5.2
|
||||
prettier-plugin-tailwindcss: ^0.1.13
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
@@ -21068,11 +21068,11 @@ __metadata:
|
||||
version: 0.0.0-use.local
|
||||
resolution: "nextjs-demo@workspace:examples/next"
|
||||
dependencies:
|
||||
"@navikt/ds-css": ^1.4.3
|
||||
"@navikt/ds-icons": ^1.4.3
|
||||
"@navikt/ds-react": ^1.4.3
|
||||
"@navikt/ds-react-internal": ^1.4.3
|
||||
"@navikt/ds-tailwind": ^1.4.3
|
||||
"@navikt/ds-css": ^1.5.2
|
||||
"@navikt/ds-icons": ^1.5.2
|
||||
"@navikt/ds-react": ^1.5.2
|
||||
"@navikt/ds-react-internal": ^1.5.2
|
||||
"@navikt/ds-tailwind": ^1.5.2
|
||||
"@types/node": ^17.0.35
|
||||
"@types/react": ^18.0.0
|
||||
"@types/react-dom": ^18.0.0
|
||||
|
||||
Reference in new issue
Block a user