@helsenorge/designsystem-react 13.0.0-beta.2 → 13.0.0-beta.5

package/lib/components/Checkbox/styles.module.scss

@@ -0,0 +1,460 @@
+@use 'sass:map';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/font-settings' as font-settings;
+@use '../../scss/screen-reader' as *;
+@use '../../scss/breakpoints' as breakpoints;
+
+@mixin dashed-dotted-border() {
+  box-shadow: none;
+
+  --dot-size: 2px;
+  --dash-length: 5px;
+  --gap-length: 2px;
+  --corner-gap: 2px;
+
+  background-image:
+    // Square dots at corners
+    linear-gradient(palette.$neutral600, palette.$neutral600),
+    linear-gradient(palette.$neutral600, palette.$neutral600),
+    linear-gradient(palette.$neutral600, palette.$neutral600),
+    linear-gradient(palette.$neutral600, palette.$neutral600),
+    // Dashed lines
+    repeating-linear-gradient(
+        0deg,
+        palette.$neutral600,
+        palette.$neutral600 var(--dash-length),
+        transparent var(--dash-length),
+        transparent calc(var(--dash-length) + var(--gap-length))
+      ),
+    repeating-linear-gradient(
+      90deg,
+      palette.$neutral600,
+      palette.$neutral600 var(--dash-length),
+      transparent var(--dash-length),
+      transparent calc(var(--dash-length) + var(--gap-length))
+    ),
+    repeating-linear-gradient(
+      180deg,
+      palette.$neutral600,
+      palette.$neutral600 var(--dash-length),
+      transparent var(--dash-length),
+      transparent calc(var(--dash-length) + var(--gap-length))
+    ),
+    repeating-linear-gradient(
+      270deg,
+      palette.$neutral600,
+      palette.$neutral600 var(--dash-length),
+      transparent var(--dash-length),
+      transparent calc(var(--dash-length) + var(--gap-length))
+    );
+  background-size:
+    // Top-left dot
+    var(--dot-size) var(--dot-size),
+    // Top-right dot
+    var(--dot-size) var(--dot-size),
+    // Bottom-right dot
+    var(--dot-size) var(--dot-size),
+    // Bottom-left dot
+    var(--dot-size) var(--dot-size),
+    // Left border
+    2px calc(100% - var(--dot-size) * 2 - var(--corner-gap) * 2),
+    // Top border
+    calc(100% - var(--dot-size) * 2 - var(--corner-gap) * 2) 2px,
+    // Right border
+    2px calc(100% - var(--dot-size) * 2 - var(--corner-gap) * 2),
+    // Bottom border
+    calc(100% - var(--dot-size) * 2 - var(--corner-gap) * 2) 2px;
+  background-position:
+    // Top-left dot
+    0 0,
+    // Top-right dot
+    100% 0,
+    // Bottom-right dot
+    100% 100%,
+    // Bottom-left dot
+    0 100%,
+    // Left border
+    0 calc(var(--dot-size) + var(--corner-gap)),
+    // Top border
+    calc(var(--dot-size) + var(--corner-gap)) 0,
+    // Right border
+    100% calc(var(--dot-size) + var(--corner-gap)),
+    // Bottom border
+    calc(var(--dot-size) + var(--corner-gap)) 100%;
+  background-repeat: no-repeat;
+}
+
+$checkbox-icon-size: 1.625rem;
+$padding-clickable-area-top-bottom: 7px;
+$padding-clickable-area-left: 8px;
+
+.checkbox-errors {
+  font-size: font-settings.$font-size-sm;
+  font-weight: 600;
+  color: palette.$cherry600;
+  margin-top: 0;
+}
+
+.checkbox-wrapper {
+  margin-left: -$padding-clickable-area-left;
+
+  &--large {
+    margin: spacers.getSpacer(2xs) 0;
+  }
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: flex-start;
+  cursor: pointer;
+  padding: $padding-clickable-area-top-bottom 0 $padding-clickable-area-top-bottom $padding-clickable-area-left;
+
+  &__text {
+    color: palette.$black;
+
+    &__large {
+      &--checked {
+        color: palette.$white;
+      }
+      &--checked#{&}--invalid {
+        color: palette.$black;
+      }
+      &--checked#{&}--disabled {
+        color: palette.$neutral700;
+      }
+    }
+
+    &--disabled {
+      color: palette.$neutral700;
+    }
+
+    &--on-dark {
+      color: palette.$white;
+    }
+  }
+
+  &--disabled {
+    cursor: default;
+  }
+
+  &__large {
+    &--focus {
+      box-shadow: 0 0 0 spacers.getSpacer(3xs);
+    }
+
+    &--on-white {
+      background-color: palette.$neutral50;
+
+      :hover > & {
+        background-color: palette.$neutral100;
+      }
+    }
+    &--on-white#{&}--focus {
+      color: palette.$neutral500;
+    }
+
+    &--on-grey {
+      background-color: palette.$white;
+
+      :hover > & {
+        background-color: palette.$neutral100;
+      }
+    }
+
+    &--on-grey#{&}--focus {
+      color: palette.$neutral500;
+      background-color: palette.$white;
+    }
+
+    &--on-blueberry {
+      background-color: palette.$white;
+
+      :hover > & {
+        background-color: palette.$blueberry100;
+      }
+    }
+    &--on-blueberry#{&}--focus {
+      color: palette.$blueberry500;
+      background-color: palette.$white;
+    }
+
+    &--on-invalid {
+      background-color: palette.$white;
+
+      :hover > & {
+        background-color: palette.$cherry100;
+      }
+    }
+    &--on-invalid#{&}--focus {
+      color: palette.$cherry400;
+      background-color: palette.$white;
+    }
+
+    &--disabled {
+      background-color: palette.$neutral50;
+
+      :hover > & {
+        background-color: palette.$neutral50;
+      }
+    }
+
+    &--checked {
+      background-color: palette.$blueberry500;
+
+      :hover > & {
+        background-color: palette.$blueberry600;
+      }
+    }
+    &--checked#{&}--focus {
+      color: palette.$blueberry900;
+      background-color: palette.$blueberry500;
+    }
+
+    &--checked#{&}--on-invalid {
+      background-color: palette.$cherry100;
+
+      :hover > & {
+        background-color: palette.$cherry200;
+      }
+    }
+
+    &--checked#{&}--on-invalid#{&}--focus {
+      color: palette.$cherry400;
+    }
+
+    &--checked#{&}--disabled {
+      color: palette.$neutral700;
+      background-color: palette.$neutral50;
+
+      :hover > & {
+        color: palette.$neutral700;
+        background-color: palette.$neutral50;
+      }
+    }
+
+    &--disabled#{&}--white {
+      background-color: palette.$white;
+
+      :hover > & {
+        background-color: palette.$white;
+      }
+    }
+  }
+
+  &--large {
+    padding: spacers.getSpacer(s);
+  }
+
+  &--large#{&}--on-dark {
+    background-color: palette.$blueberry800;
+  }
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    &--large {
+      padding: 1.68rem spacers.getSpacer(l);
+    }
+  }
+}
+
+.checkbox {
+  @include sr-only;
+
+  &__icon-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: spacers.getSpacer(4xs) spacers.getSpacer(s) spacers.getSpacer(4xs) spacers.getSpacer(4xs);
+    height: $checkbox-icon-size;
+    width: $checkbox-icon-size;
+    min-height: $checkbox-icon-size;
+    min-width: $checkbox-icon-size;
+    box-shadow: 0 0 0 spacers.getSpacer(4xs);
+
+    // Vi overstyrer farger satt ved high-contrast mode i nettleser/os
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+      background-color: #000 !important;
+      color: #fff !important;
+    }
+
+    :hover > & {
+      box-shadow: 0 0 0 spacers.getSpacer(3xs);
+    }
+
+    &--on-white,
+    &--on-grey {
+      color: palette.$neutral700;
+
+      :hover > & {
+        background-color: palette.$neutral100;
+      }
+    }
+
+    &--on-blueberry {
+      color: palette.$blueberry500;
+
+      :hover > & {
+        background-color: palette.$blueberry100;
+      }
+    }
+
+    &--on-invalid {
+      color: palette.$cherry500;
+
+      :hover > & {
+        background-color: palette.$cherry100;
+      }
+    }
+
+    &--on-dark {
+      color: palette.$neutral200;
+
+      :hover > & {
+        background-color: #ffffff1a;
+      }
+    }
+
+    &__regular {
+      &--checked {
+        background-color: palette.$blueberry500;
+        color: palette.$blueberry500;
+        box-shadow: 0 0 0 spacers.getSpacer(4xs);
+
+        :hover > & {
+          background-color: palette.$blueberry600;
+          color: palette.$blueberry600;
+          box-shadow: 0 0 0 spacers.getSpacer(4xs);
+        }
+      }
+      &--checked#{&}--invalid {
+        background-color: palette.$cherry500;
+        color: palette.$cherry500;
+        box-shadow: 0 0 0 spacers.getSpacer(4xs);
+
+        :hover > & {
+          background-color: palette.$cherry600;
+          color: palette.$cherry600;
+          box-shadow: 0 0 0 spacers.getSpacer(4xs);
+        }
+      }
+      &--checked#{&}--on-dark {
+        background-color: palette.$blueberry50;
+        color: palette.$blueberry50;
+        box-shadow: 0 0 0 spacers.getSpacer(4xs);
+
+        :hover > & {
+          background-color: palette.$blueberry200;
+          color: palette.$blueberry200;
+          box-shadow: 0 0 0 spacers.getSpacer(4xs);
+        }
+      }
+    }
+
+    &__large {
+      &--checked {
+        background-color: palette.$blueberry50;
+        box-shadow: none;
+
+        :hover > & {
+          background-color: palette.$blueberry200;
+          box-shadow: none;
+        }
+      }
+      &--checked#{&}--invalid {
+        background-color: palette.$cherry500;
+
+        :hover > & {
+          background-color: palette.$cherry600;
+        }
+      }
+      &--checked#{&}--disabled {
+        color: palette.$neutral600;
+        background-color: transparent;
+
+        :hover > & {
+          background-color: transparent;
+        }
+      }
+    }
+
+    &--disabled,
+    &--disabled#{&}--invalid,
+    &--disabled#{&}--on-dark {
+      @include dashed-dotted-border;
+
+      background-color: transparent;
+
+      :hover > & {
+        box-shadow: none;
+        background-color: transparent;
+      }
+    }
+  }
+
+  &__icon {
+    position: relative;
+    top: 0.1rem;
+    right: 0.05rem;
+
+    // Vi overstyrer farger satt ved high-contrast mode i nettleser/os
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+      fill: #fff;
+    }
+  }
+
+  &:focus {
+    /* stylelint-disable-next-line */
+    & + .checkbox__icon-wrapper {
+      box-shadow: 0 0 0 spacers.getSpacer(3xs);
+      color: palette.$black;
+
+      &__regular--checked {
+        border: 1px solid var(--color-action-border-ondark-focus);
+
+        & + .checkbox__icon-wrapper__regular--on-dark {
+          border: 1px solid var(--color-action-border-onlight-focus);
+        }
+      }
+
+      &--on-dark {
+        color: palette.$white;
+        border: 1px solid var(--color-action-border-onlight-focus);
+      }
+
+      &--invalid {
+        color: palette.$black;
+      }
+
+      &__large {
+        &--checked {
+          background-color: palette.$blueberry200;
+          box-shadow: 0 0 0 spacers.getSpacer(3xs);
+          color: palette.$white;
+          border: 1px solid var(--color-action-border-onlight-focus);
+
+          // komboklasser fungerer ikke i nested struktur
+          &--invalid {
+            background-color: palette.$cherry500;
+            color: palette.$black;
+            border: 1px solid var(--color-action-border-ondark-focus);
+          }
+
+          &--disabled {
+            color: palette.$neutral700;
+          }
+        }
+      }
+    }
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+}
+
+.checkbox-sublabel-wrapper {
+  margin-top: -$padding-clickable-area-top-bottom;
+  padding-left: calc(2.8rem + $padding-clickable-area-left);
+}

package/lib/components/Chip/index.js

@@ -0,0 +1,55 @@
+import { a as IconSize, n as AnalyticsId } from "../../constants2.js";
+import { t as usePseudoClasses } from "../../usePseudoClasses.js";
+import { t as palette } from "../../palette.js";
+import { t as Icon_default } from "../../Icon.js";
+import { t as Undo_default } from "../../Undo.js";
+import { t as X_default } from "../../X.js";
+import React from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import styles from "./styles.module.scss";
+let ChipSize = /* @__PURE__ */ function(ChipSize$1) {
+	ChipSize$1["medium"] = "medium";
+	ChipSize$1["large"] = "large";
+	return ChipSize$1;
+}({});
+let ChipAction = /* @__PURE__ */ function(ChipAction$1) {
+	ChipAction$1["remove"] = "remove";
+	ChipAction$1["undo"] = "undo";
+	return ChipAction$1;
+}({});
+let ChipVariant = /* @__PURE__ */ function(ChipVariant$1) {
+	ChipVariant$1["normal"] = "normal";
+	ChipVariant$1["oncolor"] = "oncolor";
+	ChipVariant$1["emphasised"] = "emphasised";
+	return ChipVariant$1;
+}({});
+var Chip = (props) => {
+	const { children, size = ChipSize.medium, color = "blueberry", variant = "normal", action, onClick, testId } = props;
+	const { refObject, isHovered } = usePseudoClasses();
+	const chipClasses = classNames(styles.chip, styles[`chip--${size}`], styles[`chip--${color}`], styles[`chip--${variant}`], { [styles[`chip--undo`]]: action === "undo" });
+	const getActionIcon = () => {
+		switch (action) {
+			case "undo": return Undo_default;
+			case "remove": return X_default;
+		}
+	};
+	return /* @__PURE__ */ jsxs("button", {
+		className: chipClasses,
+		onClick,
+		ref: refObject,
+		type: "button",
+		"data-testid": testId,
+		"data-analyticsid": AnalyticsId.Tag,
+		children: [children, /* @__PURE__ */ jsx(Icon_default, {
+			svgIcon: getActionIcon(),
+			size: IconSize.XXSmall,
+			color: palette[`${color}800`],
+			isHovered
+		})]
+	});
+};
+var Chip_default = Chip;
+export { ChipAction, ChipSize, ChipVariant, Chip_default as default };
+
+//# sourceMappingURL=index.js.map

package/lib/components/Chip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Chip: React.FC<ChipProps>"],"sources":["../../../src/components/Chip/Chip.tsx","../../../src/components/Chip/index.ts"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { palette, PaletteNames } from '../../theme/palette';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport Undo from '../Icons/Undo';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport enum ChipSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum ChipAction {\n  remove = 'remove',\n  undo = 'undo',\n}\n\nexport enum ChipVariant {\n  normal = 'normal',\n  oncolor = 'oncolor',\n  emphasised = 'emphasised',\n}\n\nexport type ChipColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;\n\nexport interface ChipProps {\n  /** Sets the text of the chip */\n  children: string;\n  /** Sets the size of the chip. Default: medium */\n  size?: keyof typeof ChipSize;\n  /** Sets the background of the chip. Not used if action is \"undo\". Default: blueberry */\n  color?: ChipColors;\n  /* Changes the appearance of the chip. Not used if action is \"undo\". Default: normal */\n  variant?: keyof typeof ChipVariant;\n  /* Makes the chip a clickable button that performs an action. onClick must also be set. */\n  action: keyof typeof ChipAction;\n  /* Called when action is set and the chip is clicked on. action must also be set. */\n  onClick: () => void;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst Chip: React.FC<ChipProps> = props => {\n  const { children, size = ChipSize.medium, color = 'blueberry', variant = 'normal', action, onClick, testId } = props;\n\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n\n  const chipClasses = cn(styles.chip, styles[`chip--${size}`], styles[`chip--${color}`], styles[`chip--${variant}`], {\n    [styles[`chip--undo`]]: action === 'undo',\n  });\n\n  const getActionIcon = (): SvgIcon => {\n    switch (action) {\n      case 'undo':\n        return Undo;\n      case 'remove':\n        return X;\n    }\n  };\n\n  return (\n    <button className={chipClasses} onClick={onClick} ref={refObject} type=\"button\" data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {children}\n      <Icon svgIcon={getActionIcon()} size={IconSize.XXSmall} color={palette[`${color}800`]} isHovered={isHovered} />\n    </button>\n  );\n};\n\nexport default Chip;\n","import Chip from './Chip';\nexport * from './Chip';\nexport default Chip;\n"],"mappings":";;;;;;;;;;AAaA,IAAY,WAAA,yBAAA,YAAL;AACL,YAAA,YAAA;AACA,YAAA,WAAA;;;AAGF,IAAY,aAAA,yBAAA,cAAL;AACL,cAAA,YAAA;AACA,cAAA,UAAA;;;AAGF,IAAY,cAAA,yBAAA,eAAL;AACL,eAAA,YAAA;AACA,eAAA,aAAA;AACA,eAAA,gBAAA;;;AAsBF,IAAMA,QAA4B,UAAS;CACzC,MAAM,EAAE,UAAU,OAAO,SAAS,QAAQ,QAAQ,aAAa,UAAU,UAAU,QAAQ,SAAS,WAAW;CAE/G,MAAM,EAAE,WAAW,cAAc,kBAAqC;CAEtE,MAAM,cAAc,WAAG,OAAO,MAAM,OAAO,SAAS,SAAS,OAAO,SAAS,UAAU,OAAO,SAAS,YAAY,GAChH,OAAO,gBAAgB,WAAW,QACpC,CAAC;CAEF,MAAM,sBAA+B;AACnC,UAAQ,QAAR;GACE,KAAK,OACH,QAAO;GACT,KAAK,SACH,QAAO;;;AAIb,QACE,qBAAC,UAAA;EAAO,WAAW;EAAsB;EAAS,KAAK;EAAW,MAAK;EAAS,eAAa;EAAQ,oBAAkB,YAAY;aAChI,UACD,oBAAC,cAAA;GAAK,SAAS,eAAe;GAAE,MAAM,SAAS;GAAS,OAAO,QAAQ,GAAG,MAAM;GAAkB;IAAa,CAAA;GACxG;;ACpEb,IAAA,eDwEe"}

package/lib/components/Close/index.js

@@ -0,0 +1,10 @@
+import "../../constants2.js";
+import "../../usePseudoClasses.js";
+import "../../grid.js";
+import "../../Icon.js";
+import "../../refs.js";
+import "../../useBreakpoint.js";
+import "../../useIsMobileBreakpoint.js";
+import "../../X.js";
+import { t as Close_default } from "../../Close.js";
+export { Close_default as default };

package/lib/components/DictionaryTrigger/index.js

@@ -0,0 +1,3 @@
+import "../../constants2.js";
+import { t as DictionaryTrigger_default } from "../../DictionaryTrigger.js";
+export { DictionaryTrigger_default as default };

package/lib/components/Drawer/index.js

@@ -0,0 +1,39 @@
+import "../../uuid.js";
+import "../../environment.js";
+import "../../constants2.js";
+import "../../usePseudoClasses.js";
+import "../../grid.js";
+import "../../palette.js";
+import "../../spacers.js";
+import "../../theme.js";
+import "../../color.js";
+import "../../Icon.js";
+import "../../language.js";
+import "../../refs.js";
+import "../../_rolldown_dynamic_import_helper.js";
+import "../../useIsServerSide.js";
+import "../../LazyIcon.js";
+import "../../component.js";
+import "../../useIcons.js";
+import "../../useBreakpoint.js";
+import "../../useIsMobileBreakpoint.js";
+import "../../ArrowRight.js";
+import "../../Button.js";
+import "../../accessibility.js";
+import "../../useElementList.js";
+import "../../useFocusableElements.js";
+import "../../focus.js";
+import "../../useFocusTrap.js";
+import "../../useIntersectionObserver.js";
+import "../../useIsVisible.js";
+import "../../useKeyboardEvent.js";
+import "../../useOutsideEvent.js";
+import "../../X.js";
+import "../../Close.js";
+import { t as Drawer_default } from "../../Drawer.js";
+import "../../deepContains.js";
+import "../../useReturnFocusOnUnmount.js";
+import "../../scroll.js";
+import "../../Title.js";
+import "../../Title2.js";
+export { Drawer_default as default };