Chips

.changeset/yellow-hornets-judge.md

@@ -0,0 +1,6 @@
+---
+"@navikt/ds-css": minor
+"@navikt/ds-react": minor
+---
+
+Chips komponent :sparkles:

@navikt/core/css/chips.css

@@ -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;
+}

@navikt/core/css/index.css

@@ -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";

@navikt/core/react/src/chips/Chips.tsx

@@ -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;

@navikt/core/react/src/chips/Filter.tsx

@@ -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;

@navikt/core/react/src/chips/Removable.tsx

@@ -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;