mirror of
https://github.com/navikt/aksel.git
synced 2026-10-14 09:42:02 +00:00
Compare commits
6
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 github-actions[bot]andgithub-actions[bot]
|
67e66ffe02 | ||
|
Ken
|
e19bf67b33 | ||
|
Ken
|
97c5f60e91 | ||
|
Ken
|
ea5293c28d | ||
|
Ken
|
6a58efa9a9 | ||
|
Ken
|
c95f33679e |
No files matched your search
@@ -15,3 +15,7 @@
|
||||
.rowgap[data-theme="dark"] {
|
||||
background-color: #262626;
|
||||
}
|
||||
|
||||
.rowgap-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@@ -1,5 +1,9 @@
|
||||
# @navikt/ds-codemod
|
||||
|
||||
## 1.5.0
|
||||
|
||||
## 1.4.4
|
||||
|
||||
## 1.4.3
|
||||
|
||||
## 1.4.2
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-codemod",
|
||||
"version": "1.4.3",
|
||||
"version": "1.5.0",
|
||||
"description": "NAV designsystem codemods",
|
||||
"author": "NAV Designsystem team",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,5 +1,15 @@
|
||||
# @navikt/ds-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
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -0,0 +1,124 @@
|
||||
.navds-chips {
|
||||
display: flex;
|
||||
gap: var(--navds-spacing-2);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.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__filter {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-chip-filter-border, var(--navds-global-color-gray-500));
|
||||
background-color: var(--ac-chip-filter-bg, rgb(0 0 0 / 0.055));
|
||||
}
|
||||
|
||||
.navds-chips__filter:hover {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-chip-filter-border-hover, var(--navds-global-color-gray-600));
|
||||
background-color: var(--ac-chip-filter-bg-hover, rgb(0 0 0 / 0.1));
|
||||
}
|
||||
|
||||
.navds-chips__filter[aria-pressed="true"] {
|
||||
box-shadow: none;
|
||||
background-color: var(--ac-chip-filter-bg-pressed, var(--navds-global-color-deepblue-500));
|
||||
color: var(--ac-chip-filter-text-pressed, var(--navds-global-color-white));
|
||||
}
|
||||
|
||||
.navds-chips__filter[aria-pressed="true"]:hover {
|
||||
background-color: var(--ac-chip-filter-bg-pressed-hover, var(--navds-global-color-deepblue-600));
|
||||
}
|
||||
|
||||
.navds-chips__filter:focus-visible {
|
||||
box-shadow: 0 0 0 2px var(--navds-global-color-blue-800);
|
||||
}
|
||||
|
||||
.navds-chips__filter[aria-pressed="true"]:focus-visible,
|
||||
.navds-chips__filter: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__filter-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.3",
|
||||
"version": "1.5.0",
|
||||
"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.3",
|
||||
"@navikt/ds-tokens": "^1.5.0",
|
||||
"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,27 @@
|
||||
# @navikt/ds-react
|
||||
|
||||
## 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
|
||||
|
||||
- Eksponerer validation-typer
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/ds-icons@1.4.4
|
||||
|
||||
## 1.4.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-react",
|
||||
"version": "1.4.3",
|
||||
"version": "1.5.0",
|
||||
"description": "NAV designsystem react components",
|
||||
"author": "NAV Designsystem team",
|
||||
"license": "MIT",
|
||||
@@ -33,11 +33,11 @@
|
||||
"clean": "rimraf cjs esm",
|
||||
"build": "concurrently \"tsc\" \"tsc -p tsconfig.esm.json\" && yarn create-package-json-pointers-to-esm",
|
||||
"watch": "tsc --watch -p tsconfig.esm.json",
|
||||
"test": "jest"
|
||||
"test": "TZ=UTC jest"
|
||||
},
|
||||
"dependencies": {
|
||||
"@floating-ui/react-dom-interactions": "0.9.2",
|
||||
"@navikt/ds-icons": "^1.4.3",
|
||||
"@navikt/ds-icons": "^1.5.0",
|
||||
"@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 FilterChips, { FilterChipsType } from "./Filter";
|
||||
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>
|
||||
> {
|
||||
Filter: FilterChipsType;
|
||||
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.Filter = FilterChips;
|
||||
Chips.Removable = RemovableChips;
|
||||
|
||||
export default Chips;
|
||||
@@ -0,0 +1,45 @@
|
||||
import { SuccessStroke } from "@navikt/ds-icons";
|
||||
import cl from "clsx";
|
||||
import React, { forwardRef } from "react";
|
||||
import { OverridableComponent } from "..";
|
||||
|
||||
export interface FilterChipsProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
children: string;
|
||||
/**
|
||||
*
|
||||
*/
|
||||
onSelect?: () => void;
|
||||
/**
|
||||
*
|
||||
*/
|
||||
selected?: boolean;
|
||||
}
|
||||
|
||||
export interface FilterChipsType
|
||||
extends OverridableComponent<FilterChipsProps, HTMLButtonElement> {}
|
||||
|
||||
export const FilterChips: FilterChipsType = forwardRef(
|
||||
(
|
||||
{ className, children, selected, as: Component = "button", ...rest },
|
||||
ref
|
||||
) => {
|
||||
return (
|
||||
<Component
|
||||
{...rest}
|
||||
ref={ref}
|
||||
className={cl("navds-chips__chip navds-chips__filter", className, {
|
||||
"navds-chips--icon-left": selected,
|
||||
})}
|
||||
aria-pressed={selected}
|
||||
>
|
||||
{selected && (
|
||||
<SuccessStroke aria-hidden className="navds-chips__filter-icon" />
|
||||
)}
|
||||
<span className="navds-chips__chip-text">{children}</span>
|
||||
</Component>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default FilterChips;
|
||||
@@ -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,165 @@
|
||||
import React, { useState } from "react";
|
||||
import { Chips } from ".";
|
||||
|
||||
export default {
|
||||
title: "ds-react/Chips",
|
||||
component: Chips,
|
||||
argTypes: {
|
||||
type: {
|
||||
control: {
|
||||
type: "radio",
|
||||
options: ["filter", "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 === "filter") {
|
||||
return (
|
||||
<Chips size={props.size ?? "medium"}>
|
||||
{options.map((c) => (
|
||||
<Chips.Filter
|
||||
selected={selected.includes(c)}
|
||||
key={c}
|
||||
onClick={() =>
|
||||
setSelected(
|
||||
selected.includes(c)
|
||||
? selected.filter((x) => x !== c)
|
||||
: [...selected, c]
|
||||
)
|
||||
}
|
||||
>
|
||||
{c}
|
||||
</Chips.Filter>
|
||||
))}
|
||||
</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 Filter = () => {
|
||||
const [selected, setSelected] = useState<number[]>([]);
|
||||
return (
|
||||
<Chips>
|
||||
{options.map((c, y) => (
|
||||
<Chips.Filter
|
||||
selected={selected.includes(y)}
|
||||
onClick={() =>
|
||||
setSelected(
|
||||
selected.includes(y)
|
||||
? selected.filter((x) => x !== y)
|
||||
: [...selected, y]
|
||||
)
|
||||
}
|
||||
key={y}
|
||||
>
|
||||
{c}
|
||||
</Chips.Filter>
|
||||
))}
|
||||
</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.Filter
|
||||
selected={selected.includes(y)}
|
||||
onClick={() =>
|
||||
setSelected(
|
||||
selected.includes(y)
|
||||
? selected.filter((x) => x !== y)
|
||||
: [...selected, y]
|
||||
)
|
||||
}
|
||||
key={y}
|
||||
>
|
||||
{c}
|
||||
</Chips.Filter>
|
||||
))}
|
||||
</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.Filter
|
||||
selected={selected.includes(y)}
|
||||
onClick={() =>
|
||||
setSelected(
|
||||
selected.includes(y)
|
||||
? selected.filter((x) => x !== y)
|
||||
: [...selected, y]
|
||||
)
|
||||
}
|
||||
key={y}
|
||||
>
|
||||
{c}
|
||||
</Chips.Filter>
|
||||
))}
|
||||
</Chips>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
export { default as Chips, ChipsProps } from "./Chips";
|
||||
@@ -34,8 +34,8 @@ describe("Writing in input sets correct values", () => {
|
||||
const res = utils.getByTitle("res");
|
||||
expect(res.innerHTML).toEqual(
|
||||
JSON.stringify({
|
||||
from: "2022-08-02T22:00:00.000Z",
|
||||
to: "2022-08-02T22:00:00.000Z",
|
||||
from: "2022-08-03T00:00:00.000Z",
|
||||
to: "2022-08-03T00:00:00.000Z",
|
||||
})
|
||||
);
|
||||
});
|
||||
@@ -52,7 +52,7 @@ describe("Writing in input sets correct values", () => {
|
||||
const res = utils.getByTitle("res");
|
||||
expect(res.innerHTML).toEqual(
|
||||
JSON.stringify({
|
||||
from: "2022-08-02T22:00:00.000Z",
|
||||
from: "2022-08-03T00:00:00.000Z",
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
@@ -9,6 +9,9 @@ export {
|
||||
UNSAFE_useDatepicker,
|
||||
UNSAFE_useMonthpicker,
|
||||
UNSAFE_useRangeDatepicker,
|
||||
RangeValidationT,
|
||||
DateValidationT,
|
||||
MonthValidationT,
|
||||
} from "./hooks";
|
||||
export {
|
||||
default as UNSAFE_MonthPicker,
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -10,12 +10,28 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
|
||||
/**
|
||||
* Changes background and border color
|
||||
*/
|
||||
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 +43,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,9 @@
|
||||
# @navikt/ds-tailwind
|
||||
|
||||
## 1.5.0
|
||||
|
||||
## 1.4.4
|
||||
|
||||
## 1.4.3
|
||||
|
||||
## 1.4.2
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-tailwind",
|
||||
"version": "1.4.3",
|
||||
"version": "1.5.0",
|
||||
"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.3",
|
||||
"@navikt/ds-tokens": "^1.5.0",
|
||||
"@types/jest": "^29.0.0",
|
||||
"@types/node": "^17.0.35",
|
||||
"jest": "^29.0.0",
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
# @navikt/ds-tokens
|
||||
|
||||
## 1.5.0
|
||||
|
||||
## 1.4.4
|
||||
|
||||
## 1.4.3
|
||||
|
||||
## 1.4.2
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-tokens",
|
||||
"version": "1.4.3",
|
||||
"version": "1.5.0",
|
||||
"description": "Auto-generated design-tokens for NAV design-systems framework",
|
||||
"author": "NAV Designsystem team",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
# @navikt/ds-icons
|
||||
|
||||
## 1.5.0
|
||||
|
||||
## 1.4.4
|
||||
|
||||
## 1.4.3
|
||||
|
||||
## 1.4.2
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-icons",
|
||||
"version": "1.4.3",
|
||||
"version": "1.5.0",
|
||||
"description": "Aksel icons",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
# @navikt/ds-css-internal
|
||||
|
||||
## 1.5.0
|
||||
|
||||
## 1.4.4
|
||||
|
||||
## 1.4.3
|
||||
|
||||
## 1.4.2
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-css-internal",
|
||||
"version": "1.4.3",
|
||||
"version": "1.5.0",
|
||||
"description": "Css for NAV internal Designsystem components",
|
||||
"author": "NAV Designsystem team",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,5 +1,21 @@
|
||||
# @navikt/ds-react-internal
|
||||
|
||||
## 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
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/ds-react@1.4.4
|
||||
- @navikt/ds-icons@1.4.4
|
||||
|
||||
## 1.4.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-react-internal",
|
||||
"version": "1.4.3",
|
||||
"version": "1.5.0",
|
||||
"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.3",
|
||||
"@navikt/ds-react": "^1.4.3",
|
||||
"@navikt/ds-icons": "^1.5.0",
|
||||
"@navikt/ds-react": "^1.5.0",
|
||||
"clsx": "^1.1.1",
|
||||
"copy-to-clipboard": "^3.3.1"
|
||||
},
|
||||
|
||||
@@ -18,14 +18,14 @@
|
||||
"website"
|
||||
],
|
||||
"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.0",
|
||||
"@navikt/ds-css": "^1.5.0",
|
||||
"@navikt/ds-css-internal": "^1.5.0",
|
||||
"@navikt/ds-icons": "^1.5.0",
|
||||
"@navikt/ds-react": "^1.5.0",
|
||||
"@navikt/ds-react-internal": "^1.5.0",
|
||||
"@navikt/ds-tailwind": "^1.5.0",
|
||||
"@navikt/ds-tokens": "^1.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"prettier-plugin-tailwindcss": "^0.1.13"
|
||||
|
||||
@@ -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.Filter
|
||||
selected={selected.includes(c)}
|
||||
key={c}
|
||||
onClick={() =>
|
||||
setSelected(
|
||||
selected.includes(c)
|
||||
? selected.filter((x) => x !== c)
|
||||
: [...selected, c]
|
||||
)
|
||||
}
|
||||
>
|
||||
{c}
|
||||
</Chips.Filter>
|
||||
))}
|
||||
</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,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.Filter
|
||||
selected={selected.includes(c)}
|
||||
key={c}
|
||||
onClick={() =>
|
||||
setSelected(
|
||||
selected.includes(c)
|
||||
? selected.filter((x) => x !== c)
|
||||
: [...selected, c]
|
||||
)
|
||||
}
|
||||
>
|
||||
{c}
|
||||
</Chips.Filter>
|
||||
))}
|
||||
</Chips>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
|
||||
export const args = {
|
||||
index: 1,
|
||||
};
|
||||
@@ -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.Filter
|
||||
selected={selected.includes(c)}
|
||||
key={c}
|
||||
onClick={() =>
|
||||
setSelected(
|
||||
selected.includes(c)
|
||||
? selected.filter((x) => x !== c)
|
||||
: [...selected, c]
|
||||
)
|
||||
}
|
||||
>
|
||||
{c}
|
||||
</Chips.Filter>
|
||||
))}
|
||||
</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,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.3",
|
||||
"@navikt/ds-icons": "^1.4.3",
|
||||
"@navikt/ds-react": "^1.4.3",
|
||||
"@navikt/ds-react-internal": "^1.4.3",
|
||||
"@navikt/ds-css": "^1.5.0",
|
||||
"@navikt/ds-icons": "^1.5.0",
|
||||
"@navikt/ds-react": "^1.5.0",
|
||||
"@navikt/ds-react-internal": "^1.5.0",
|
||||
"next": "^12.2.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-tailwind": "^1.4.3",
|
||||
"@navikt/ds-tailwind": "^1.5.0",
|
||||
"@types/node": "^17.0.35",
|
||||
"@types/react": "^18.0.0",
|
||||
"@types/react-dom": "^18.0.0",
|
||||
|
||||
Reference in new issue
Block a user