@helsenorge/designsystem-react 14.10.0 → 14.11.1

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

@@ -1,42 +1,13 @@
 @use 'sass:map';
-@use 'sass:meta';
-@use 'sass:string';
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/breakpoints' as breakpoints;
+@use '../../scss/screen-reader' as *;
 
 $padding-clickable-area-top-bottom: 8px;
 $padding-clickable-area-left: 8px;
 
-@mixin dashed-border() {
-  box-shadow: none;
-  position: relative;
-
-  &::after {
-    position: absolute;
-    content: '';
-
-    $encoded-color: string.slice(meta.inspect(palette.$neutral600), 2);
-
-    // Variabler for å lettere styre dashen i background-imaget under
-    $stroke: 4;
-    $dash: 0.2;
-    $gap: 7;
-    $scale: 1;
-    $stroke-scaled: $stroke * $scale;
-    $dash-scaled: $dash * $scale;
-    $gap-scaled: $gap * $scale;
-
-    border-radius: 100px;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%23#{$encoded-color}' stroke-width='#{$stroke-scaled}' stroke-dasharray='#{$dash-scaled},#{$gap-scaled}' stroke-linecap='square'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    width: 28px;
-    height: 28px;
-    inset: -2px;
-  }
-}
-
 .radio-button-errors {
   font-size: font-settings.$font-size-sm;
   font-weight: 600;
@@ -50,20 +21,20 @@ $padding-clickable-area-left: 8px;
   &__large {
     margin: spacers.getSpacer(2xs) 0;
 
-    &--focused {
+    &:has(input:focus-visible) {
       box-shadow: 0 0 0 spacers.getSpacer(3xs);
       color: palette.$neutral500;
     }
 
-    &--focused#{&}--on-blueberry {
+    &--on-blueberry:has(input:focus-visible) {
       color: palette.$blueberry500;
     }
 
-    &--focused#{&}--selected {
+    &:has(input:checked):has(input:focus-visible) {
       color: palette.$blueberry900;
     }
 
-    &--focused#{&}--invalid {
+    &--invalid:has(input:focus-visible) {
       color: palette.$cherry400;
     }
   }
@@ -86,7 +57,7 @@ $padding-clickable-area-left: 8px;
   }
 
   &--disabled {
-    cursor: default;
+    cursor: not-allowed;
     color: palette.$neutral700;
   }
 
@@ -99,7 +70,7 @@ $padding-clickable-area-left: 8px;
       background-color: palette.$neutral100;
     }
 
-    &--focused {
+    &:has(input:focus-visible) {
       border: 1px solid var(--color-action-border-ondark-focus);
     }
 
@@ -140,7 +111,7 @@ $padding-clickable-area-left: 8px;
     }
   }
 
-  &__large#{&}__large--selected-invalid {
+  &__large#{&}__large--invalid:has(input:checked) {
     background-color: palette.$cherry100;
     color: palette.$black;
 
@@ -173,7 +144,7 @@ $padding-clickable-area-left: 8px;
     }
   }
 
-  &__large--selected {
+  &__large:has(input:checked) {
     background-color: palette.$blueberry500;
     color: palette.$white;
 
@@ -203,244 +174,11 @@ $padding-clickable-area-left: 8px;
 }
 
 .radio-button {
-  appearance: none;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 10rem;
-  margin: 0 spacers.getSpacer(s) 0 0;
-  height: 1.5rem;
-  width: 1.5rem;
-  min-height: 1.5rem;
-  min-width: 1.5rem;
-  color: palette.$neutral700;
-  box-shadow: 0 0 0 spacers.getSpacer(4xs);
-  outline: none;
-
-  &:focus {
-    box-shadow: 0 0 0 spacers.getSpacer(3xs);
-    color: palette.$black;
-  }
-
-  &:hover {
-    box-shadow: 0 0 0 spacers.getSpacer(3xs);
-    background-color: palette.$neutral100;
-  }
-
-  :active > & {
-    box-shadow: 0 0 0 spacers.getSpacer(3xs);
-    color: palette.$black;
-  }
-
-  &:checked {
-    color: palette.$blueberry500;
-
-    &:hover {
-      box-shadow: 0 0 0 spacers.getSpacer(4xs);
-      background-color: palette.$blueberry50;
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 spacers.getSpacer(3xs);
-      color: palette.$black;
-    }
-  }
-
-  &--on-blueberry {
-    color: palette.$blueberry500;
-
-    :hover > & {
-      background-color: palette.$blueberry100;
-    }
-  }
-
-  &--on-dark {
-    color: palette.$neutral200;
-
-    &:hover {
-      background-color: palette.$inverted-hover-old;
-      box-shadow: 0 0 0 spacers.getSpacer(3xs);
-    }
-
-    &:focus {
-      color: palette.$white;
-    }
-
-    :active > & {
-      box-shadow: 0 0 0 spacers.getSpacer(3xs);
-      color: palette.$white;
-    }
-
-    &:checked {
-      color: palette.$blueberry200;
-
-      &:hover {
-        background-color: palette.$inverted-hover-old;
-      }
-
-      &:focus {
-        color: palette.$white;
-      }
-    }
-  }
-
-  &--invalid {
-    color: palette.$cherry600;
-
-    &:hover {
-      background-color: palette.$cherry100;
-    }
-
-    &:active {
-      color: palette.$black;
-    }
-
-    &:focus {
-      color: palette.$black;
-    }
-
-    &:checked {
-      color: palette.$cherry600;
-
-      &:hover {
-        background-color: palette.$cherry100;
-      }
-    }
-  }
-
-  &--disabled {
-    cursor: default;
-
-    @include dashed-border;
-
-    background-color: transparent;
-
-    &:hover {
-      box-shadow: none;
-      background-color: transparent;
-    }
-
-    :hover > & {
-      background-color: transparent;
-    }
-
-    &:active {
-      color: palette.$neutral600;
-    }
-
-    &:checked {
-      color: palette.$neutral600;
-
-      &:hover {
-        box-shadow: none;
-        background-color: transparent;
-      }
-    }
-  }
-
-  // :before er dot i RadioButton
-  &:checked::before {
-    content: '';
-    display: flex;
-    background-color: palette.$blueberry500;
-    width: 0.875rem;
-    height: 0.875rem;
-    border-radius: 10rem;
-
-    // Vi overstyrer farger satt ved high-contrast mode i nettleser/os
-    @media (forced-colors: active) {
-      forced-color-adjust: none;
-      background-color: #fff !important;
-    }
-  }
-
-  &--on-dark:checked::before {
-    background-color: palette.$blueberry200;
-  }
-
-  &--invalid:checked::before {
-    background-color: palette.$cherry600;
-  }
-
-  &--disabled:checked::before {
-    background-color: palette.$neutral600;
-  }
-
-  &__large {
-    &:checked {
-      outline: none;
-      color: palette.$blueberry100;
-    }
-
-    &:hover {
-      box-shadow: 0 0 0 spacers.getSpacer(3xs);
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 spacers.getSpacer(3xs);
-      color: palette.$black;
-    }
-
-    &:focus:checked {
-      color: palette.$white;
-    }
-
-    &:checked::before {
-      background-color: palette.$blueberry100;
-    }
-
-    &:checked:hover {
-      box-shadow: 0 0 0 spacers.getSpacer(4xs);
-      background-color: unset;
-    }
-
-    &:checked:hover:focus {
-      box-shadow: 0 0 0 spacers.getSpacer(3xs);
-      color: palette.$white;
-    }
-
-    &--invalid {
-      &:checked {
-        color: palette.$cherry500;
-      }
-
-      &:checked::before {
-        background-color: palette.$cherry500;
-      }
-
-      &:checked:hover {
-        background-color: transparent;
-      }
-
-      &:checked:focus {
-        color: palette.$black;
-      }
-
-      &:checked:focus:hover {
-        color: palette.$black;
-      }
-    }
-
-    &--disabled {
-      &:hover,
-      &:focus,
-      &:checked:hover {
-        box-shadow: none;
-      }
-
-      &:checked::before {
-        background-color: palette.$neutral600;
-      }
-    }
-  }
+  @include sr-only;
+}
 
-  // Vi overstyrer farger satt ved high-contrast mode i nettleser/os
-  @media (forced-colors: active) {
-    forced-color-adjust: none;
-    color: #fff !important;
-    background-color: transparent !important;
-  }
+.radio-button__marker-wrapper {
+  margin-right: spacers.getSpacer(s);
 }
 
 .radiobutton-sublabel-wrapper {

package/lib/components/RadioButton/styles.module.scss.d.ts

@@ -1,30 +1,20 @@
 export type Styles = {
   'radio-button': string;
-  'radio-button__large': string;
-  'radio-button__large--disabled': string;
-  'radio-button__large--invalid': string;
-  'radio-button--disabled': string;
-  'radio-button--invalid': string;
-  'radio-button--on-blueberry': string;
-  'radio-button--on-dark': string;
+  'radio-button__marker-wrapper': string;
   'radio-button-errors': string;
   'radio-button-label': string;
   'radio-button-label__large': string;
   'radio-button-label__large--disabled': string;
-  'radio-button-label__large--focused': string;
+  'radio-button-label__large--invalid': string;
   'radio-button-label__large--on-blueberry': string;
   'radio-button-label__large--on-grey': string;
-  'radio-button-label__large--selected': string;
-  'radio-button-label__large--selected-invalid': string;
   'radio-button-label--disabled': string;
   'radio-button-label--invalid': string;
   'radio-button-label--on-dark': string;
   'radio-button-wrapper': string;
   'radio-button-wrapper__large': string;
-  'radio-button-wrapper__large--focused': string;
   'radio-button-wrapper__large--invalid': string;
   'radio-button-wrapper__large--on-blueberry': string;
-  'radio-button-wrapper__large--selected': string;
   'radiobutton-afterlabelchildren-wrapper': string;
   'radiobutton-sublabel-wrapper': string;
 };

package/lib/components/Table/index.js

@@ -5,7 +5,7 @@ import { t as useIsVisible } from "../../useIsVisible.js";
 import { t as useLayoutEvent } from "../../useLayoutEvent.js";
 import { t as HorizontalScroll_default } from "../../HorizontalScroll.js";
 import { a as TextAlign, i as SortDirection, n as ModeType, o as defaultConfig, r as ResponsiveTableVariant, s as simpleConfig, t as HeaderCategory } from "../../constants3.js";
-import { a as omitProps, i as mapChildrenWithMode, n as getCenteredOverflowTableStyle, r as getCurrentConfig, t as getBreakpointClass } from "../../utils6.js";
+import { a as omitProps, i as mapChildrenWithMode, n as getCenteredOverflowTableStyle, r as getCurrentConfig, t as getBreakpointClass } from "../../utils5.js";
 import { n as TableBody } from "../../TableBody.js";
 import { n as TableCell } from "../../TableCell.js";
 import { n as TableExpandedRow } from "../../TableExpandedRow.js";

package/lib/components/Validation/index.js

@@ -9,7 +9,7 @@ import { t as Textarea_default } from "../../Textarea.js";
 import { n as FormGroup_default } from "../../FormGroup.js";
 import { t as Input_default } from "../../Input2.js";
 import { t as List_default } from "../../List.js";
-import { t as RadioButton_default } from "../../RadioButton.js";
+import { t as RadioButton_default } from "../../RadioButton2.js";
 import classNames from "classnames";
 import React, { useId } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,133 +1,10 @@
-@use 'sass:map';
-@use '../../../scss/screen-reader' as *;
-@use '../../../scss/breakpoints' as breakpoints;
-@use '../../../scss/font-mixins' as fonts;
+@use '../../../scss/visual-form' as visual-form;
 @import '../../../scss/supernova/styles/colors.css';
 @import '../../../scss/supernova/styles/spacers.css';
 
 .visual-checkbox {
-  position: relative;
-  display: inline-flex;
-  align-items: stretch;
-  min-height: 2.75rem;
-  padding: 0.313rem 0;
-  cursor: pointer;
-
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-    padding: 0;
-  }
-
-  &__input {
-    // Hides input while making sure screen reader outline wraps the entire component
-    cursor: pointer;
-    position: absolute;
-    z-index: 0;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    outline: none;
-    appearance: none;
-  }
-
-  &__pill {
-    position: relative;
-    z-index: 1;
-    display: inline-flex;
-    align-items: center;
-    gap: var(--core-space-2xs);
-    box-sizing: border-box;
-    min-height: var(--core-space-l);
-    padding: var(--core-space-3xs) 1.75rem;
-    border-radius: 100px;
-    background-color: var(--color-action-background-ondark);
-    border: 1px solid var(--color-action-border-onlight);
-    color: var(--color-base-text-onlight);
-
-    @include fonts.title6;
-
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      min-height: var(--core-space-xl);
-      padding: var(--core-space-3xs) var(--core-space-l);
-    }
-  }
-
-  &:hover &__pill {
-    background-color: var(--color-action-background-ondark-hover);
-    border-color: var(--color-action-border-onlight-hover);
-  }
-
-  &:active &__pill {
-    background-color: var(--color-action-background-ondark-selected);
-    border-color: var(--color-action-border-onlight-hover);
-  }
-
-  &--checked &__pill {
-    background-color: var(--color-action-background-onlight);
-    color: var(--color-action-text-ondark);
-    border-color: var(--color-action-background-onlight);
-    padding: var(--core-space-3xs) var(--core-space-s);
-
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      padding: var(--core-space-3xs) 1.25rem;
-    }
-  }
-
-  &--checked:hover &__pill {
-    background-color: var(--color-action-graphics-onlight-hover);
-    border-color: var(--color-action-graphics-onlight-hover);
-  }
-
-  &--checked:active &__pill {
-    background-color: var(--color-action-background-onlight-active);
-    border-color: var(--color-action-background-onlight-active);
-  }
-
-  &--invalid &__pill {
-    background-color: var(--color-action-background-ondark);
-    border-color: var(--color-destructive-border-normal);
-  }
-
-  &--invalid:hover &__pill {
-    background-color: var(--color-destructive-background-normal);
-    border-color: var(--color-destructive-border-normal);
-  }
-
-  &--invalid:active &__pill {
-    background-color: var(--color-destructive-background-emphasized);
-    border-color: var(--color-destructive-border-normal);
-  }
-
-  &--invalid#{&}--checked &__pill {
-    background-color: var(--color-destructive-graphics-normal);
-    border-color: var(--color-destructive-graphics-normal);
-  }
-
-  &--invalid#{&}--checked:hover &__pill {
-    background-color: var(--color-destructive-graphics-hover);
-    border-color: var(--color-destructive-graphics-hover);
-  }
-
-  &--invalid#{&}--checked:active &__pill {
-    background-color: var(--color-destructive-graphics-emphasized-onlight);
-    border-color: var(--color-destructive-graphics-emphasized-onlight);
-  }
-
-  &__input:focus-visible + &__pill {
-    outline: 3px solid var(--color-action-border-onlight-focus);
-    border-color: var(--color-action-border-ondark);
-  }
-
-  &__icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    svg {
-      fill: var(--color-action-graphics-ondark);
-    }
-  }
-
-  &__label {
-    text-box: trim-both cap alphabetic;
-  }
+  @include visual-form.visual-form-pill(
+    $pill-padding-mobile: var(--core-space-3xs) 1.75rem,
+    $checked-pill-padding-md: var(--core-space-3xs) 1.25rem
+  );
 }

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

@@ -1,13 +1,6 @@
-@use 'sass:map';
-@use '../../scss/breakpoints' as breakpoints;
+@use '../../scss/visual-form' as visual-form;
 @import '../../scss/supernova/styles/spacers.css';
 
 .visual-checkbox-cloud {
-  display: flex;
-  flex-flow: row wrap;
-  gap: var(--core-space-4xs) var(--core-space-xs);
-
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-    gap: var(--core-space-m) var(--core-space-s);
-  }
+  @include visual-form.visual-form-cloud;
 }

package/lib/components/VisualCheckboxGroup/VisualCheckbox/VisualCheckbox.d.ts

@@ -0,0 +1,26 @@
+import { ErrorWrapperClassNameProps } from '../../ErrorWrapper';
+export type VisualCheckboxVariant = 'line' | 'rectangle';
+export interface VisualCheckboxProps extends ErrorWrapperClassNameProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'id' | 'className' | 'children' | 'size'> {
+    /** Adds custom classes to the root element. */
+    className?: string;
+    /** Label rendered inside the checkbox frame. */
+    children: string;
+    /** Content rendered inside the circular visual slot. */
+    visualContent: React.ReactNode;
+    /** Layout variant. `line` is a thin horizontal pill, `rectangle` is a vertical card. */
+    variant?: VisualCheckboxVariant;
+    /** input id of the underlying checkbox */
+    inputId?: string;
+    /** Activates error styling. Can be true while errorText is empty (e.g. when used in a FormGroup). */
+    error?: boolean;
+    /** Error text to show above the component. */
+    errorText?: string;
+    /** Error text id */
+    errorTextId?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Ref forwarded to the underlying input element. */
+    ref?: React.Ref<HTMLInputElement | null>;
+}
+declare const VisualCheckbox: React.FC<VisualCheckboxProps>;
+export default VisualCheckbox;

package/lib/components/VisualCheckboxGroup/VisualCheckbox/VisualContent.d.ts

@@ -0,0 +1,10 @@
+export interface VisualContentProps {
+    /** Content rendered inside the circular area – typically an <img> or illustration component. */
+    children: React.ReactNode;
+    /** Adds custom classes to the root element. */
+    className?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+export declare const VisualContent: React.FC<VisualContentProps>;
+export default VisualContent;

package/lib/components/VisualCheckboxGroup/VisualCheckbox/index.d.ts

@@ -0,0 +1,3 @@
+import { default as VisualCheckbox } from './VisualCheckbox';
+export * from './VisualCheckbox';
+export default VisualCheckbox;

package/lib/components/VisualCheckboxGroup/VisualCheckbox/index.js

@@ -0,0 +1,5 @@
+import { t as VisualCheckbox_default$1 } from "../../../VisualCheckbox.js";
+var VisualCheckbox_default = VisualCheckbox_default$1;
+export { VisualCheckbox_default as default };
+
+//# sourceMappingURL=index.js.map

package/lib/components/VisualCheckboxGroup/VisualCheckbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/VisualCheckboxGroup/VisualCheckbox/index.ts"],"sourcesContent":["import VisualCheckbox from './VisualCheckbox';\nexport * from './VisualCheckbox';\nexport default VisualCheckbox;\n"],"mappings":";AAEA,IAAA,yBAAe"}

package/lib/components/VisualCheckboxGroup/VisualCheckbox/styles.module.scss

@@ -0,0 +1,7 @@
+@use '../../../scss/visual-form' as visual-form;
+@import '../../../scss/supernova/styles/colors.css';
+@import '../../../scss/supernova/styles/spacers.css';
+
+.visual-checkbox {
+  @include visual-form.visual-form-card;
+}

package/lib/components/VisualCheckboxGroup/VisualCheckbox/styles.module.scss.d.ts

@@ -0,0 +1,18 @@
+export type Styles = {
+  'visual-checkbox': string;
+  'visual-checkbox__frame': string;
+  'visual-checkbox__icon': string;
+  'visual-checkbox__input': string;
+  'visual-checkbox__label': string;
+  'visual-checkbox__visual-content': string;
+  'visual-checkbox--checked': string;
+  'visual-checkbox--invalid': string;
+  'visual-checkbox--variant-line': string;
+  'visual-checkbox--variant-rectangle': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/lib/components/VisualCheckboxGroup/VisualCheckboxGroup.d.ts

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+import { VisualCheckboxVariant, default as VisualCheckbox } from './VisualCheckbox/VisualCheckbox';
+export interface VisualCheckboxGroupProps {
+    /** Items in the group. Should be VisualCheckboxGroup.VisualCheckbox elements. */
+    children?: React.ReactNode;
+    /** Name shared by all child VisualCheckbox elements (overridable per child) */
+    name?: string;
+    /** Variant applied to all child VisualCheckbox elements (overridable per child). */
+    variant?: VisualCheckboxVariant;
+    /** When set and the number of VisualCheckbox children exceeds this limit on the mobile breakpoint, the variant is forced to `line`. */
+    mobileLineVariantLimit?: number;
+    /** Error message shown above the group */
+    error?: string;
+    /** Error text id (auto-generated if omitted) */
+    errorTextId?: string;
+    /** Renders the error component (Default: true) */
+    renderError?: boolean;
+    /** Ref passed to the error message element */
+    errorMessageRef?: React.Ref<HTMLDivElement | null>;
+    /** Adds custom classes to the root element. */
+    className?: string;
+    /** Adds custom classes to the errorWrapper */
+    errorWrapperClassName?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Sets the data-testid attribute for the error wrapper */
+    errorWrapperTestId?: string;
+}
+interface VisualCheckboxGroupComponent extends React.FC<VisualCheckboxGroupProps> {
+    VisualCheckbox: typeof VisualCheckbox;
+}
+export declare const VisualCheckboxGroup: VisualCheckboxGroupComponent;
+export default VisualCheckboxGroup;

package/lib/components/VisualCheckboxGroup/index.d.ts

@@ -0,0 +1,3 @@
+import { default as VisualCheckboxGroup } from './VisualCheckboxGroup';
+export * from './VisualCheckboxGroup';
+export default VisualCheckboxGroup;