🎨 Oppdatert Chips-komponent (#2035)

navikt · Jun 7, 2023 · 7b42f53 · 7b42f53
1 parent b2f796d
commit 7b42f53
Show file tree

Hide file tree

Showing 14 changed files with 346 additions and 112 deletions.
diff --git a/.changeset/breezy-queens-fetch.md b/.changeset/breezy-queens-fetch.md
@@ -0,0 +1,10 @@
+---
+"@navikt/aksel-stylelint": minor
+"@navikt/ds-css": minor
+"@navikt/ds-react": minor
+---
+
+:tada: Oppdatert Chips
+
+- Toggle Chips har nå varianter: neutral og action
+- Toggle Chips har nå en ny prop: `checkmark` som slår av/på checkmark ved selected-state
diff --git a/.changeset/small-clouds-wash.md b/.changeset/small-clouds-wash.md
@@ -3,4 +3,4 @@
 "@navikt/ds-react": patch
 ---
 
-add indent prop to accordion
+:sparkles: La til `indent`-prop på Accordion
diff --git a/@navikt/aksel-stylelint/src/deprecations.ts b/@navikt/aksel-stylelint/src/deprecations.ts
@@ -20,4 +20,9 @@ export const deprecations: DeprecatedList = [
       "Class were moved to '@navikt/ds-css' and renamed with 'navds'-prefix in v4.0.0. Docs: https://aksel.nav.no/grunnleggende/kode/endringslogg#h728704adeb59.",
     deprecatePrefix: true,
   },
+  {
+    classes: ["navds-chips--icon-left"],
+    message:
+      "In v4.1.0 Chips. Toggle no longer handles special alignment for checkmark-icon, thus removing this class",
+  },
 ];
diff --git a/@navikt/core/css/chips.css b/@navikt/core/css/chips.css
@@ -20,7 +20,7 @@
   cursor: pointer;
   align-items: center;
   justify-content: center;
-  gap: var(--a-spacing-05);
+  gap: var(--a-spacing-1);
   margin: 0;
   padding: 0 var(--a-spacing-3);
   text-decoration: none;
@@ -34,14 +34,14 @@
 }
 
 .navds-chips__toggle {
-  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-border, var(--a-border-default));
-  background-color: var(--ac-chip-toggle-bg, var(--a-surface-neutral-subtle));
+  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-border, var(--a-border-subtle));
+  background-color: var(--ac-chip-toggle-bg, var(--a-surface-action-subtle));
   color: var(--ac-chip-toggle-text, var(--a-text-default));
 }
 
 .navds-chips__toggle:hover {
-  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-hover-border, var(--a-border-strong));
-  background-color: var(--ac-chip-toggle-hover-bg, var(--a-surface-neutral-subtle-hover));
+  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-hover-border, var(--a-border-subtle-hover));
+  background-color: var(--ac-chip-toggle-hover-bg, var(--a-surface-action-subtle-hover));
 }
 
 .navds-chips__toggle[aria-pressed="true"] {
@@ -54,6 +54,28 @@
   background-color: var(--ac-chip-toggle-pressed-hover-bg, var(--a-surface-action-selected-hover));
 }
 
+/* Toggle variant neutral */
+.navds-chips__toggle--neutral {
+  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-neutral-border, var(--a-border-subtle));
+  background-color: var(--ac-chip-toggle-neutral-bg, var(--a-surface-neutral-subtle));
+  color: var(--ac-chip-toggle-neutral-text, var(--a-text-default));
+}
+
+.navds-chips__toggle--neutral:hover {
+  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-neutral-hover-border, var(--a-border-subtle-hover));
+  background-color: var(--ac-chip-toggle-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
+}
+
+.navds-chips__toggle--neutral[aria-pressed="true"] {
+  box-shadow: none;
+  background-color: var(--ac-chip-toggle-neutral-pressed-bg, var(--a-surface-neutral-selected));
+  color: var(--ac-chip-toggle-neutral-pressed-text, var(--a-text-on-neutral));
+}
+
+.navds-chips__toggle--neutral[aria-pressed="true"]:hover {
+  background-color: var(--ac-chip-toggle-neutral-pressed-hover-bg, var(--a-surface-neutral-selected));
+}
+
 .navds-chips__toggle:focus-visible {
   box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
 }
@@ -99,14 +121,6 @@
   border-radius: var(--a-border-radius-full);
 }
 
-.navds-chips__toggle-icon {
-  width: 1.5rem;
-  height: 1.5rem;
-  display: grid;
-  place-items: center;
-  border-radius: var(--a-border-radius-full);
-}
-
 .navds-chips--small .navds-chips__toggle-icon {
   width: 1.25rem;
   height: 1.25rem;
@@ -161,7 +175,3 @@
 .navds-chips--small .navds-chips--icon-right {
   padding-right: var(--a-spacing-05);
 }
-
-.navds-chips--small .navds-chips--icon-left {
-  padding-left: 0.375rem;
-}
diff --git a/@navikt/core/css/tokens.json b/@navikt/core/css/tokens.json
@@ -86,14 +86,22 @@
     "--ac-chat-top-text": "--a-text-default"
   },
   "chips": {
-    "--ac-chip-toggle-border": "--a-border-default",
-    "--ac-chip-toggle-bg": "--a-surface-neutral-subtle",
+    "--ac-chip-toggle-border": "--a-border-subtle",
+    "--ac-chip-toggle-bg": "--a-surface-action-subtle",
     "--ac-chip-toggle-text": "--a-text-default",
-    "--ac-chip-toggle-hover-border": "--a-border-strong",
-    "--ac-chip-toggle-hover-bg": "--a-surface-neutral-subtle-hover",
+    "--ac-chip-toggle-hover-border": "--a-border-subtle-hover",
+    "--ac-chip-toggle-hover-bg": "--a-surface-action-subtle-hover",
     "--ac-chip-toggle-pressed-bg": "--a-surface-action-selected",
     "--ac-chip-toggle-pressed-text": "--a-text-on-action",
     "--ac-chip-toggle-pressed-hover-bg": "--a-surface-action-selected-hover",
+    "--ac-chip-toggle-neutral-border": "--a-border-subtle",
+    "--ac-chip-toggle-neutral-bg": "--a-surface-neutral-subtle",
+    "--ac-chip-toggle-neutral-text": "--a-text-default",
+    "--ac-chip-toggle-neutral-hover-border": "--a-border-subtle-hover",
+    "--ac-chip-toggle-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
+    "--ac-chip-toggle-neutral-pressed-bg": "--a-surface-neutral-selected",
+    "--ac-chip-toggle-neutral-pressed-text": "--a-text-on-neutral",
+    "--ac-chip-toggle-neutral-pressed-hover-bg": "--a-surface-neutral-selected",
     "--ac-chip-toggle-focus": "--a-border-focus",
     "--ac-chip-removable-action-bg": "--a-surface-action-selected",
     "--ac-chip-removable-action-text": "--a-text-on-action",

diff --git a/@navikt/core/react/src/chips/Toggle.tsx b/@navikt/core/react/src/chips/Toggle.tsx
@@ -1,4 +1,3 @@
-import { CheckmarkIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/OverridableComponent";
@@ -10,27 +9,64 @@ export interface ToggleChipsProps
    * Toggles aria-pressed and visual-changes
    */
   selected?: boolean;
+  /**
+   * Chip-variants
+   * @default "action"
+   */
+  variant?: "action" | "neutral";
+  /**
+   * Toggles display of checkmark on selected
+   * @default true
+   */
+  checkmark?: boolean;
 }
 
 export const ToggleChips: OverridableComponent<
   ToggleChipsProps,
   HTMLButtonElement
 > = forwardRef(
   (
-    { className, children, selected, as: Component = "button", ...rest },
+    {
+      className,
+      children,
+      selected,
+      variant = "action",
+      checkmark = true,
+      as: Component = "button",
+      ...rest
+    },
     ref
   ) => {
     return (
       <Component
         {...rest}
         ref={ref}
-        className={cl("navds-chips__chip navds-chips__toggle", className, {
-          "navds-chips--icon-left": selected,
-        })}
+        className={cl(
+          "navds-chips__chip navds-chips__toggle",
+          className,
+          `navds-chips__toggle--${variant}`
+        )}
         aria-pressed={selected}
       >
-        {selected && (
-          <CheckmarkIcon aria-hidden className="navds-chips__toggle-icon" />
+        {selected && checkmark && (
+          <svg
+            aria-hidden
+            className="navds-chips__toggle-icon"
+            width="10"
+            height="8"
+            viewBox="0 0 10 8"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            focusable={false}
+            role="img"
+          >
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M9.51894 0.45851C9.81799 0.745107 9.8281 1.21987 9.5415 1.51893L3.7915 7.51893C3.51247 7.81009 3.05315 7.82848 2.75174 7.56056L0.501735 5.56056C0.192148 5.28537 0.164263 4.81132 0.439451 4.50173C0.71464 4.19214 1.18869 4.16426 1.49828 4.43944L3.20835 5.95951L8.45852 0.481072C8.74511 0.182015 9.21988 0.171913 9.51894 0.45851Z"
+              fill="currentColor"
+            />
+          </svg>
         )}
         <span className="navds-chips__chip-text">{children}</span>
       </Component>

diff --git a/@navikt/core/react/src/chips/chips.stories.tsx b/@navikt/core/react/src/chips/chips.stories.tsx
@@ -66,25 +66,78 @@ export const Default = {
 };
 
 export const Toggle = () => {
-  const [selected, setSelected] = useState<number[]>([]);
+  const [selected, setSelected] = useState<number[]>([2, 4]);
+  return (
+    <div className="colgap">
+      <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>
+      <Chips>
+        {options.map((c, y) => (
+          <Chips.Toggle
+            variant="neutral"
+            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 ToggleNoCheckmark = () => {
+  const [selected, setSelected] = useState<number>(2);
   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>
+    <div className="colgap">
+      <Chips>
+        {options.map((c, y) => (
+          <Chips.Toggle
+            selected={selected === y}
+            checkmark={false}
+            onClick={() => setSelected(y)}
+            key={y}
+          >
+            {c}
+          </Chips.Toggle>
+        ))}
+      </Chips>
+      <Chips>
+        {options.map((c, y) => (
+          <Chips.Toggle
+            variant="neutral"
+            selected={selected === y}
+            checkmark={false}
+            onClick={() => setSelected(y)}
+            key={y}
+          >
+            {c}
+          </Chips.Toggle>
+        ))}
+      </Chips>
+    </div>
   );
 };
 
@@ -108,7 +161,7 @@ export const Removable = () => {
 };
 
 export const Regular = () => {
-  const [selected, setSelected] = useState<number[]>([]);
+  const [selected, setSelected] = useState<number[]>([2]);
   return (
     <div className="colgap">
       <Chips>

diff --git a/aksel.nav.no/website/pages/eksempler/chips/default.tsx b/aksel.nav.no/website/pages/eksempler/chips/default.tsx