@helsenorge/designsystem-react 12.2.0 → 12.3.0

package/components/Toggle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\n\nimport classNames from 'classnames';\nimport { useAnimate } from 'motion/react';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\n\nimport styles from './styles.module.scss';\nimport '../../scss/supernova/styles/colors.css';\n\nexport type LabelText = {\n  text: string;\n  type?: 'subdued' | 'normal';\n};\n\nexport enum TogglePosition {\n  left = 'left',\n  right = 'right',\n}\n\nexport enum ToggleOnColor {\n  onwhite = 'onwhite',\n  onneutral = 'onneutral',\n  onblueberry = 'onblueberry',\n}\n\nexport interface ToggleProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  /**  Determines if the Toggle is checked */\n  checked?: boolean;\n  /** Sets the label of the Toggle */\n  label: LabelText[];\n  /** Defines the color of the toggle */\n  onColor?: keyof typeof ToggleOnColor;\n  /** Sets the sublabel of the Toggle */\n  subLabel?: string;\n  /** Sets the position of the toggle relative to the label */\n  togglePosition?: keyof typeof TogglePosition;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Toggle: React.FC<ToggleProps> = ({\n  checked = false,\n  label,\n  onChange,\n  onColor = ToggleOnColor.onwhite,\n  subLabel,\n  togglePosition = TogglePosition.left,\n  testId,\n}: ToggleProps) => {\n  const [checkedState, setCheckedState] = useState(checked);\n  const [showToggleAnimation, setShowToggleAnimation] = useState(false);\n  const [scope, animate] = useAnimate();\n  const inputId = useUuid();\n  const toggleId = useUuid();\n  const toggleDotId = useUuid();\n  const labelId = useUuid();\n  const subLabelId = useUuid();\n  const { refObject, isHovered, isActive } = usePseudoClasses<HTMLLabelElement>(scope);\n  const showHoveredStyling = isHovered && !showToggleAnimation;\n  const isOnWhite = onColor === ToggleOnColor.onwhite;\n\n  useEffect(() => {\n    if (showToggleAnimation) {\n      const timer = setTimeout(() => setShowToggleAnimation(false), 300);\n      return (): void => clearTimeout(timer);\n    }\n  }, [showToggleAnimation]);\n\n  useEffect(() => {\n    setCheckedState(checked);\n  }, [checked]);\n\n  useEffect(() => {\n    animate('#' + toggleId, { background: getBackgroundColor() }, { duration: 0.2, ease: 'easeInOut' });\n    animate(\n      '#' + toggleDotId,\n      { background: checkedState ? 'var(--color-action-graphics-ondark)' : 'var(--core-color-neutral-700)' },\n      { duration: 0.2, ease: 'easeInOut' }\n    );\n    animate('#' + toggleDotId, { x: showHoveredStyling ? 9 : checkedState ? 18 : 0 }, { duration: 0.2, ease: 'easeInOut' });\n    animate('svg', { opacity: checkedState ? 1 : 0 }, { duration: 0.2, ease: 'easeInOut' });\n  }, [checkedState, showHoveredStyling, isActive]);\n\n  const getBackgroundColor = (): string => {\n    if (checkedState && isActive) {\n      return 'var(--core-color-blueberry-800)';\n    } else if (checkedState) {\n      return showHoveredStyling ? 'var(--color-action-graphics-onlight-hover)' : 'var(--color-action-graphics-onlight)';\n    } else if (isOnWhite && isActive) {\n      return 'var(--core-color-neutral-400)';\n    } else if (isOnWhite) {\n      return showHoveredStyling ? 'var(--core-color-neutral-200)' : 'var(--core-color-neutral-50)';\n    } else if (isActive) {\n      return 'var(--core-color-neutral-200)';\n    } else {\n      return showHoveredStyling ? 'var(--core-color-neutral-50)' : 'var(--core-color-white)';\n    }\n  };\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n    setCheckedState(event.target.checked);\n    setShowToggleAnimation(true);\n    onChange?.(event);\n  };\n\n  const toggleContainerClassNames = classNames(styles['toggle-container']);\n\n  const toggleRowClassNames = classNames(styles['toggle-container__row'], {\n    [styles['toggle-container__row--right']]: togglePosition === TogglePosition.right,\n  });\n\n  const subLabelClassNames = classNames(styles['toggle-container__sublabel'], {\n    [styles['toggle-container__sublabel--toggle-right']]: togglePosition === TogglePosition.right,\n  });\n\n  const toggleClassNames = classNames(styles['toggle-container__toggle'], {\n    [styles['toggle-container__toggle--ignore-hover']]: showToggleAnimation,\n    [styles['toggle-container__toggle--on-white']]: onColor === ToggleOnColor.onwhite,\n  });\n\n  const toggleDotClassNames = classNames(styles['toggle-container__toggle__dot'], {\n    [styles['toggle-container__toggle__dot--ignore-hover']]: showToggleAnimation,\n  });\n\n  const renderToggle = (): React.ReactElement => (\n    <label ref={refObject} className={styles['toggle-container__toggle-group']}>\n      <input\n        id={inputId}\n        type=\"checkbox\"\n        checked={checkedState}\n        onChange={handleChange}\n        className={styles['toggle-container__input']}\n        aria-label={label.map(l => l.text).join(' ')}\n        aria-describedby={subLabel ? subLabelId : undefined}\n        role=\"switch\"\n      />\n      <span id={toggleId} className={toggleClassNames} aria-hidden=\"true\">\n        <span id={toggleDotId} className={toggleDotClassNames} aria-hidden=\"true\">\n          <svg\n            width=\"17\"\n            height=\"13\"\n            viewBox=\"0 0 17 13\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            className={styles['toggle-container__toggle__dot__icon']}\n          >\n            <path d=\"M15 2L6.80839 10.548L2 5.53145\" fill=\"none\" strokeWidth=\"3\" />\n          </svg>\n        </span>\n      </span>\n    </label>\n  );\n\n  const renderLabelText = (): React.ReactElement => {\n    return (\n      <span\n        id={labelId}\n        className={classNames(styles['toggle-container__label'], {\n          [styles['toggle-container__label--toggle-right']]: togglePosition === TogglePosition.right,\n        })}\n      >\n        {label.map(labelText => {\n          const labelClassNames = classNames({\n            [styles['toggle-container__label__text--subdued']]: labelText.type === 'subdued',\n          });\n\n          return (\n            <span key={labelId + labelText.text} className={labelClassNames}>\n              {labelText.text}\n            </span>\n          );\n        })}\n      </span>\n    );\n  };\n\n  return (\n    <div className={toggleContainerClassNames} data-testid={testId} data-analyticsid={AnalyticsId.Toggle}>\n      <div className={toggleRowClassNames}>\n        {togglePosition === TogglePosition.left && (\n          <>\n            {renderToggle()}\n            {renderLabelText()}\n          </>\n        )}\n        {togglePosition === TogglePosition.right && (\n          <>\n            {renderLabelText()}\n            {renderToggle()}\n          </>\n        )}\n      </div>\n      {subLabel && (\n        <div id={subLabelId} className={subLabelClassNames}>\n          {subLabel}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Toggle;\n"],"names":["TogglePosition","ToggleOnColor"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\n\nimport classNames from 'classnames';\nimport { useAnimate } from 'motion/react';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\n\nimport styles from './styles.module.scss';\nimport '../../scss/supernova/styles/colors.css';\n\nexport type LabelText = {\n  text: string;\n  type?: 'subdued' | 'normal';\n};\n\nexport type StatusTextType = {\n  checked: string;\n  unchecked: string;\n};\n\nexport enum TogglePosition {\n  left = 'left',\n  right = 'right',\n}\n\nexport enum ToggleOnColor {\n  onwhite = 'onwhite',\n  onneutral = 'onneutral',\n  onblueberry = 'onblueberry',\n}\n\nexport interface ToggleProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  /**  Determines if the Toggle is checked */\n  checked?: boolean;\n  /** Sets the label of the Toggle */\n  label: LabelText[];\n  /** Defines the color of the toggle */\n  onColor?: keyof typeof ToggleOnColor;\n  /** A text that is shown under the Toggle switch */\n  statusText?: StatusTextType;\n  /** Sets the sublabel of the Toggle */\n  subLabel?: string;\n  /** Sets the position of the toggle relative to the label */\n  togglePosition?: keyof typeof TogglePosition;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Toggle: React.FC<ToggleProps> = ({\n  checked = false,\n  label,\n  onChange,\n  onColor = ToggleOnColor.onwhite,\n  statusText,\n  subLabel,\n  togglePosition = TogglePosition.left,\n  testId,\n}: ToggleProps) => {\n  const [checkedState, setCheckedState] = useState(checked);\n  const [showToggleAnimation, setShowToggleAnimation] = useState(false);\n  const [scope, animate] = useAnimate();\n  const inputId = useUuid();\n  const toggleId = useUuid();\n  const toggleDotId = useUuid();\n  const labelId = useUuid();\n  const subLabelId = useUuid();\n  const { refObject, isHovered, isActive } = usePseudoClasses<HTMLLabelElement>(scope);\n  const showHoveredStyling = isHovered && !showToggleAnimation;\n  const isOnWhite = onColor === ToggleOnColor.onwhite;\n\n  useEffect(() => {\n    if (showToggleAnimation) {\n      const timer = setTimeout(() => setShowToggleAnimation(false), 300);\n      return (): void => clearTimeout(timer);\n    }\n  }, [showToggleAnimation]);\n\n  useEffect(() => {\n    setCheckedState(checked);\n  }, [checked]);\n\n  useEffect(() => {\n    animate('#' + toggleId, { background: getBackgroundColor() }, { duration: 0.2, ease: 'easeInOut' });\n    animate(\n      '#' + toggleDotId,\n      { background: checkedState ? 'var(--color-action-graphics-ondark)' : 'var(--core-color-neutral-700)' },\n      { duration: 0.2, ease: 'easeInOut' }\n    );\n    animate('#' + toggleDotId, { x: showHoveredStyling ? 9 : checkedState ? 18 : 0 }, { duration: 0.2, ease: 'easeInOut' });\n    animate('svg', { opacity: checkedState ? 1 : 0 }, { duration: 0.2, ease: 'easeInOut' });\n  }, [checkedState, showHoveredStyling, isActive]);\n\n  const getBackgroundColor = (): string => {\n    if (checkedState && isActive) {\n      return 'var(--core-color-blueberry-800)';\n    } else if (checkedState) {\n      return showHoveredStyling ? 'var(--color-action-graphics-onlight-hover)' : 'var(--color-action-graphics-onlight)';\n    } else if (isOnWhite && isActive) {\n      return 'var(--core-color-neutral-400)';\n    } else if (isOnWhite) {\n      return showHoveredStyling ? 'var(--core-color-neutral-200)' : 'var(--core-color-neutral-50)';\n    } else if (isActive) {\n      return 'var(--core-color-neutral-200)';\n    } else {\n      return showHoveredStyling ? 'var(--core-color-neutral-50)' : 'var(--core-color-white)';\n    }\n  };\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n    setCheckedState(event.target.checked);\n    setShowToggleAnimation(true);\n    onChange?.(event);\n  };\n\n  const toggleContainerClassNames = classNames(styles['toggle-container'], {\n    [styles['toggle-container--position-right']]: togglePosition === TogglePosition.right,\n    [styles['toggle-container--with-status']]: statusText !== undefined && statusText !== null,\n  });\n\n  const subLabelClassNames = classNames(styles['toggle-container__sublabel']);\n\n  const statusTextClassNames = classNames(styles['toggle-container__status'], {\n    [styles['toggle-container__status--checked']]: checkedState,\n  });\n\n  const toggleClassNames = classNames(styles['toggle-container__toggle'], {\n    [styles['toggle-container__toggle--ignore-hover']]: showToggleAnimation,\n    [styles['toggle-container__toggle--on-white']]: onColor === ToggleOnColor.onwhite,\n  });\n\n  const toggleDotClassNames = classNames(styles['toggle-container__toggle__dot'], {\n    [styles['toggle-container__toggle__dot--ignore-hover']]: showToggleAnimation,\n  });\n\n  const renderToggle = (): React.ReactElement => (\n    <div className={styles['toggle-container__outer-toggle']}>\n      <label ref={refObject} className={classNames(styles['toggle-container__toggle-group'])}>\n        <input\n          id={inputId}\n          type=\"checkbox\"\n          checked={checkedState}\n          onChange={handleChange}\n          className={styles['toggle-container__input']}\n          aria-label={label.map(l => l.text).join(' ')}\n          aria-describedby={`${subLabel ? subLabelId + ' ' : undefined} ${statusText ? toggleId + '-status' : undefined}`}\n          role=\"switch\"\n        />\n        <span id={toggleId} className={toggleClassNames} aria-hidden=\"true\">\n          <span id={toggleDotId} className={toggleDotClassNames} aria-hidden=\"true\">\n            <svg\n              width=\"17\"\n              height=\"13\"\n              viewBox=\"0 0 17 13\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className={styles['toggle-container__toggle__dot__icon']}\n            >\n              <path d=\"M15 2L6.80839 10.548L2 5.53145\" fill=\"none\" strokeWidth=\"3\" />\n            </svg>\n          </span>\n        </span>\n      </label>\n      {statusText && (\n        <span className={statusTextClassNames} id={toggleId + '-status'}>\n          {checkedState ? statusText.checked : statusText.unchecked}\n        </span>\n      )}\n    </div>\n  );\n\n  const renderLabelText = (): React.ReactElement => {\n    return (\n      <div className={styles['toggle-container__outer-label']}>\n        <span id={labelId} className={classNames(styles['toggle-container__label'])}>\n          {label.map(labelText => {\n            const labelClassNames = classNames({\n              [styles['toggle-container__label__text--subdued']]: labelText.type === 'subdued',\n            });\n\n            return (\n              <span key={labelId + labelText.text} className={labelClassNames}>\n                {labelText.text}\n              </span>\n            );\n          })}\n        </span>\n        {subLabel && (\n          <div id={subLabelId} className={subLabelClassNames}>\n            {subLabel}\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div className={toggleContainerClassNames} data-testid={testId} data-analyticsid={AnalyticsId.Toggle}>\n      {togglePosition === TogglePosition.left && (\n        <>\n          {renderToggle()}\n          {renderLabelText()}\n        </>\n      )}\n      {togglePosition === TogglePosition.right && (\n        <>\n          {renderLabelText()}\n          {renderToggle()}\n        </>\n      )}\n    </div>\n  );\n};\n\nexport default Toggle;\n"],"names":["TogglePosition","ToggleOnColor"],"mappings":"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"}

package/components/Toggle/styles.module.scss

@@ -1,16 +1,36 @@
 @use 'sass:map';
 @use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/font-mixins' as fonts;
 @use '../../scss/breakpoints' as breakpoints;
 @import '../../scss/supernova/styles/colors.css';
 
 .toggle-container {
-  display: flex;
-  flex-direction: column;
+  $toggle-container: &;
+
+  display: grid;
+  grid-template: 'toggle label' auto / min-content auto;
+  column-gap: spacers.getSpacer(xs);
   max-width: 43.5rem;
 
+  &--position-right {
+    grid-template: 'label toggle' auto / auto min-content;
+  }
+
+  &--with-status {
+    --status-column-size: 5.5rem;
+
+    grid-template: 'toggle label' auto / var(--status-column-size) auto;
+
+    &.toggle-container--position-right {
+      grid-template: 'label toggle' auto / auto var(--status-column-size);
+    }
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      --status-column-size: 6.25rem;
+    }
+  }
+
   &__row {
     display: flex;
     align-items: center;
@@ -21,61 +41,60 @@
     }
   }
 
+  &__outer-label {
+    grid-area: label;
+    margin-top: 0.5rem;
+  }
+
+  &__outer-toggle {
+    grid-area: toggle;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.375rem;
+  }
+
   &__label {
     @include fonts.label;
 
     color: var(--core-color-neutral-900);
-    margin-left: spacers.getSpacer(xs);
-
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
-      margin-left: spacers.getSpacer(s);
-    }
 
     &__text--subdued {
       @include fonts.label-subdued;
     }
-
-    &--toggle-right {
-      margin-left: 0;
-      margin-right: spacers.getSpacer(xs);
-
-      @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
-        margin-right: spacers.getSpacer(s);
-      }
-    }
   }
 
   &__sublabel {
-    --sublabel-mobile-margin: 3.9rem;
-    --sublabel-desktop-margin: 4.1rem;
-
+    grid-area: sublabel;
     font-size: font-settings.$font-size-xs;
     line-height: 1.25rem;
     color: var(--core-color-neutral-800);
-    margin-left: var(--sublabel-mobile-margin);
     text-align: left;
 
     @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
       font-size: font-settings.$font-size-sm;
       line-height: font-settings.$lineheight-size-xs;
       text-align: left;
-      margin-left: var(--sublabel-desktop-margin);
     }
+  }
 
-    &--toggle-right {
-      margin-left: 0;
-      margin-right: var(--sublabel-mobile-margin);
+  &__status {
+    @include fonts.sublabel;
 
-      @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
-        margin-right: var(--sublabel-desktop-margin);
-      }
+    word-break: break-all;
+
+    &--checked {
+      color: var(--color-action-text-onlight);
     }
   }
 
   &__toggle-group {
+    grid-area: input;
+    place-self: center;
     display: flex;
     align-items: center;
     cursor: pointer;
+    min-height: 2.75rem;
   }
 
   &__toggle {

package/components/Toggle/styles.module.scss.d.ts

@@ -3,11 +3,13 @@ export type Styles = {
   'toggle-container__input': string;
   'toggle-container__label': string;
   'toggle-container__label__text--subdued': string;
-  'toggle-container__label--toggle-right': string;
+  'toggle-container__outer-label': string;
+  'toggle-container__outer-toggle': string;
   'toggle-container__row': string;
   'toggle-container__row--right': string;
+  'toggle-container__status': string;
+  'toggle-container__status--checked': string;
   'toggle-container__sublabel': string;
-  'toggle-container__sublabel--toggle-right': string;
   'toggle-container__toggle': string;
   'toggle-container__toggle__dot': string;
   'toggle-container__toggle__dot__icon': string;
@@ -15,6 +17,8 @@ export type Styles = {
   'toggle-container__toggle--ignore-hover': string;
   'toggle-container__toggle--on-white': string;
   'toggle-container__toggle-group': string;
+  'toggle-container--position-right': string;
+  'toggle-container--with-status': string;
 };
 
 export type ClassNames = keyof Styles;

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helsenorge/designsystem.git"
   },
   "homepage": "https://helsenorge.design",
-  "version": "12.2.0",
+  "version": "12.3.0",
   "author": "Helsenorge",
   "license": "MIT",
   "dependencies": {