@helsenorge/designsystem-react 15.0.0-beta.1 → 15.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/resources/HN.Designsystem.ArticleTeaser.en-GB.json","../../../src/resources/HN.Designsystem.ArticleTeaser.nb-NO.json","../../../src/components/ArticleTeaser/resourceHelper.ts","../../../src/components/ArticleTeaser/ArticleTeaser.tsx","../../../src/components/ArticleTeaser/index.ts"],"sourcesContent":["{\n  \"expandButtonClose\": \"Show more\",\n  \"expandButtonOpen\": \"Show less\"\n}\n","{\n  \"expandButtonClose\": \"Vis mer\",\n  \"expandButtonOpen\": \"Vis mindre\"\n}\n","import type { HNDesignsystemArticleTeaser } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.ArticleTeaser.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.ArticleTeaser.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemArticleTeaser => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import classNames from 'classnames';\n\nimport type { HNDesignsystemArticleTeaser } from '../../resources/Resources';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\n\nimport styles from './styles.module.scss';\n\nexport type ArticleTeaserTags = 'div' | 'section' | 'aside' | 'article';\n\nexport interface ArticleTeaserProps {\n  /** Callback for the button. Should be used for setting the expanded boolean */\n  onExpand: () => void;\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Id of the content, used to set aria-controls */\n  contentId: string;\n  /** If the component is expanded or not */\n  expanded: boolean;\n  /** For overriding the height of the collapsed teaser */\n  heightCollapsed?: string;\n  /** Changes the underlying element of the wrapper */\n  htmlMarkup?: ArticleTeaserTags;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemArticleTeaser>;\n  /** Sets the data-testid attribute */\n  testId?: string;\n}\n\nconst ArticleTeaser: React.FC<ArticleTeaserProps> = props => {\n  const { onExpand, children, contentId, expanded, htmlMarkup = 'div', resources, testId } = props;\n  const WrapperTag = htmlMarkup;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemArticleTeaser = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  return (\n    <WrapperTag className={classNames(styles.articleteaser)} data-testid={testId} data-analyticsid={AnalyticsId.ArticleTeaser}>\n      <div\n        className={classNames(styles['articleteaser__content'], {\n          [styles['articleteaser__content--collapsed']]: !expanded,\n        })}\n        style={{\n          maxHeight: expanded ? 'none' : props.heightCollapsed,\n        }}\n      >\n        {children}\n      </div>\n      <button\n        type=\"button\"\n        className={classNames(styles['articleteaser__button'], {\n          [styles['articleteaser__button--expanded']]: expanded,\n        })}\n        onClick={onExpand}\n        aria-expanded={expanded}\n        aria-controls={contentId}\n      >\n        {expanded ? mergedResources.expandButtonOpen : mergedResources.expandButtonClose}\n      </button>\n    </WrapperTag>\n  );\n};\n\nexport default ArticleTeaser;\n","import ArticleTeaser from './ArticleTeaser';\nexport * from './ArticleTeaser';\nexport default ArticleTeaser;\n"],"mappings":";;;;;;;;;;;;;;;AEMA,IAAa,gBAAgB,aAA2D;CACtF,QAAQ,UAAR;EACE,KAAK,gBAAgB,SACnB,OAAO;EACT,KAAK,gBAAgB;EACrB,SACE,OAAO;;;;;ACmBb,IAAM,iBAA8C,UAAS;CAC3D,MAAM,EAAE,UAAU,UAAU,WAAW,UAAU,aAAa,OAAO,WAAW,WAAW;CAC3F,MAAM,aAAa;CAEnB,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAG5E,MAAM,kBAA+C;EACnD,GAHuB,aAAa,SAGjC;EACH,GAAG;EACJ;CAED,OACE,qBAAC,YAAD;EAAY,WAAW,WAAW,OAAO,cAAc;EAAE,eAAa;EAAQ,oBAAkB,YAAY;YAA5G,CACE,oBAAC,OAAD;GACE,WAAW,WAAW,OAAO,2BAA2B,GACrD,OAAO,uCAAuC,CAAC,UACjD,CAAC;GACF,OAAO,EACL,WAAW,WAAW,SAAS,MAAM,iBACtC;GAEA;GACG,CAAA,EACN,oBAAC,UAAD;GACE,MAAK;GACL,WAAW,WAAW,OAAO,0BAA0B,GACpD,OAAO,qCAAqC,UAC9C,CAAC;GACF,SAAS;GACT,iBAAe;GACf,iBAAe;aAEd,WAAW,gBAAgB,mBAAmB,gBAAgB;GACxD,CAAA,CACE;;;;;AChEjB,IAAA,wBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/resources/HN.Designsystem.ArticleTeaser.en-GB.json","../../../src/resources/HN.Designsystem.ArticleTeaser.nb-NO.json","../../../src/components/ArticleTeaser/resourceHelper.ts","../../../src/components/ArticleTeaser/ArticleTeaser.tsx","../../../src/components/ArticleTeaser/index.ts"],"sourcesContent":["{\n  \"expandButtonClose\": \"Show more\",\n  \"expandButtonOpen\": \"Show less\"\n}\n","{\n  \"expandButtonClose\": \"Vis mer\",\n  \"expandButtonOpen\": \"Vis mindre\"\n}\n","import type { HNDesignsystemArticleTeaser } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.ArticleTeaser.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.ArticleTeaser.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemArticleTeaser => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import classNames from 'classnames';\n\nimport type { HNDesignsystemArticleTeaser } from '../../resources/Resources';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\n\nimport styles from './styles.module.scss';\n\nexport type ArticleTeaserTags = 'div' | 'section' | 'aside' | 'article';\n\nexport interface ArticleTeaserProps {\n  /** Callback for the button. Should be used for setting the expanded boolean */\n  onExpand: () => void;\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Id of the content, used to set aria-controls */\n  contentId: string;\n  /** If the component is expanded or not */\n  expanded: boolean;\n  /** For overriding the height of the collapsed teaser */\n  heightCollapsed?: string;\n  /** Changes the underlying element of the wrapper */\n  htmlMarkup?: ArticleTeaserTags;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemArticleTeaser>;\n  /** Sets the data-testid attribute */\n  testId?: string;\n}\n\nconst ArticleTeaser: React.FC<ArticleTeaserProps> = props => {\n  const { onExpand, children, contentId, expanded, htmlMarkup = 'div', resources, testId } = props;\n  const WrapperTag = htmlMarkup;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemArticleTeaser = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  return (\n    <WrapperTag className={classNames(styles.articleteaser)} data-testid={testId} data-analyticsid={AnalyticsId.ArticleTeaser}>\n      <div\n        className={classNames(styles['articleteaser__content'], {\n          [styles['articleteaser__content--collapsed']]: !expanded,\n        })}\n        style={{\n          maxHeight: expanded ? 'none' : props.heightCollapsed,\n        }}\n      >\n        {children}\n      </div>\n      <button\n        type=\"button\"\n        className={classNames(styles['articleteaser__button'], {\n          [styles['articleteaser__button--expanded']]: expanded,\n        })}\n        onClick={onExpand}\n        aria-expanded={expanded}\n        aria-controls={contentId}\n      >\n        {expanded ? mergedResources.expandButtonOpen : mergedResources.expandButtonClose}\n      </button>\n    </WrapperTag>\n  );\n};\n\nexport default ArticleTeaser;\n","import ArticleTeaser from './ArticleTeaser';\nexport * from './ArticleTeaser';\nexport default ArticleTeaser;\n"],"mappings":";;;;;;;;;;;;;;;AEMA,IAAa,gBAAgB,aAA2D;CACtF,QAAQ,UAAR;EACE,KAAK,gBAAgB,SACnB,OAAO;EACT,KAAK,gBAAgB;EACrB,SACE,OAAO;CACX;AACF;;;ACiBA,IAAM,iBAA8C,UAAS;CAC3D,MAAM,EAAE,UAAU,UAAU,WAAW,UAAU,aAAa,OAAO,WAAW,WAAW;CAC3F,MAAM,aAAa;CAEnB,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAG3E,MAAM,kBAA+C;EACnD,GAHuB,aAAa,QAGjC;EACH,GAAG;CACL;CAEA,OACE,qBAAC,YAAD;EAAY,WAAW,WAAW,OAAO,aAAa;EAAG,eAAa;EAAQ,oBAAkB,YAAY;YAA5G,CACE,oBAAC,OAAD;GACE,WAAW,WAAW,OAAO,2BAA2B,GACrD,OAAO,uCAAuC,CAAC,SAClD,CAAC;GACD,OAAO,EACL,WAAW,WAAW,SAAS,MAAM,gBACvC;GAEC;EACE,CAAA,GACL,oBAAC,UAAD;GACE,MAAK;GACL,WAAW,WAAW,OAAO,0BAA0B,GACpD,OAAO,qCAAqC,SAC/C,CAAC;GACD,SAAS;GACT,iBAAe;GACf,iBAAe;aAEd,WAAW,gBAAgB,mBAAmB,gBAAgB;EACzD,CAAA,CACE;;AAEhB;;;AClEA,IAAA,wBAAe"}

package/lib/components/Checkbox/CheckboxMarker/CheckboxMarker.d.ts

@@ -0,0 +1,20 @@
+import { FormOnColor, FormSize } from '../../../constants';
+export interface CheckboxMarkerProps {
+    /** Whether the checkbox is checked. Controls the checkmark visibility. */
+    checked?: boolean;
+    /** Disables the visual state of the marker. */
+    disabled?: boolean;
+    /** Activates error styling. */
+    error?: boolean;
+    /** Background context the marker is rendered on. */
+    onColor?: keyof typeof FormOnColor;
+    /** Size variant of the marker. */
+    size?: keyof typeof FormSize;
+    /** Adds custom classes to the marker wrapper. */
+    className?: string;
+}
+/**
+ * Does not render an <input>; consumers render this on their end.
+ */
+export declare const CheckboxMarker: React.FC<CheckboxMarkerProps>;
+export default CheckboxMarker;

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

@@ -0,0 +1,309 @@
+@use '../../../scss/spacers' as spacers;
+@use '../../../scss/palette' as palette;
+
+@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;
+
+.checkbox {
+  &__marker {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: $checkbox-icon-size;
+    width: $checkbox-icon-size;
+    min-height: $checkbox-icon-size;
+    min-width: $checkbox-icon-size;
+    box-shadow: inset 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;
+    }
+
+    &--on-white,
+    &--on-grey {
+      color: palette.$neutral700;
+    }
+
+    &--on-blueberry {
+      color: palette.$blueberry500;
+    }
+
+    &--on-invalid {
+      color: palette.$cherry500;
+    }
+
+    &--on-dark {
+      color: palette.$neutral200;
+    }
+
+    &__regular {
+      &--checked {
+        background-color: palette.$blueberry500;
+        color: palette.$blueberry500;
+        box-shadow: inset 0 0 0 spacers.getSpacer(4xs);
+      }
+
+      &--checked#{&}--invalid {
+        background-color: palette.$cherry500;
+        color: palette.$cherry500;
+      }
+
+      &--checked#{&}--on-dark {
+        background-color: palette.$blueberry50;
+        color: palette.$blueberry50;
+      }
+    }
+
+    &__large {
+      &--checked {
+        background-color: palette.$blueberry50;
+        box-shadow: none;
+      }
+
+      &--checked#{&}--invalid {
+        background-color: palette.$cherry500;
+      }
+
+      &--checked#{&}--disabled {
+        color: palette.$neutral600;
+        background-color: transparent;
+      }
+    }
+
+    &--disabled,
+    &--disabled#{&}--invalid,
+    &--disabled#{&}--on-dark {
+      @include dashed-dotted-border;
+
+      background-color: transparent;
+    }
+
+    // When any focusable element inside the wrapping <label>
+    // is focus-visible, style the .checkbox__marker.
+    // Specificity is doubled (&#{&}) so focus-visible styles win over the later
+    // label:hover rules below, while keeping the source order required by css:S4664.
+    label:has(:focus-visible) &#{&} {
+      box-shadow: 0 0 0 spacers.getSpacer(3xs) palette.$black;
+      color: palette.$black;
+
+      &__regular--checked {
+        border: 1px solid var(--color-action-border-ondark-focus);
+
+        & + .checkbox__marker__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;
+          }
+        }
+      }
+    }
+
+    label:hover &,
+    label:active & {
+      box-shadow:
+        inset 0 0 0 spacers.getSpacer(4xs),
+        0 0 0 spacers.getSpacer(4xs);
+    }
+
+    label:hover &--on-white,
+    label:hover &--on-grey {
+      background-color: var(--color-action-graphics-ondark-hover);
+    }
+
+    label:active &--on-white,
+    label:active &--on-grey {
+      background-color: palette.$blueberry100;
+    }
+
+    label:hover &--on-blueberry {
+      background-color: palette.$blueberry100;
+    }
+
+    label:hover &--on-invalid {
+      background-color: palette.$cherry50;
+    }
+
+    label:active &--on-invalid {
+      background-color: palette.$cherry100;
+    }
+
+    label:hover &--on-dark {
+      background-color: #ffffff1a;
+    }
+
+    label:hover &__regular--checked,
+    label:active &__regular--checked {
+      box-shadow:
+        inset 0 0 0 spacers.getSpacer(4xs),
+        0 0 0 spacers.getSpacer(4xs);
+    }
+
+    label:hover &__regular--checked {
+      background-color: palette.$blueberry600;
+      color: palette.$blueberry600;
+    }
+
+    label:active &__regular--checked {
+      background-color: palette.$blueberry800;
+      color: palette.$blueberry800;
+    }
+
+    label:hover &__regular--checked#{&}__regular--invalid {
+      background-color: palette.$cherry600;
+      color: palette.$cherry600;
+    }
+
+    label:active &__regular--checked#{&}__regular--invalid {
+      background-color: palette.$cherry800;
+      color: palette.$cherry800;
+    }
+
+    label:hover &__regular--checked#{&}__regular--on-dark {
+      background-color: palette.$blueberry100;
+      color: palette.$blueberry100;
+    }
+
+    label:active &__regular--checked#{&}__regular--on-dark {
+      background-color: palette.$blueberry200;
+      color: palette.$blueberry200;
+    }
+
+    label:hover &__large--checked {
+      background-color: palette.$blueberry200;
+      box-shadow: none;
+    }
+
+    label:hover &__large--checked#{&}__large--invalid {
+      background-color: palette.$cherry600;
+    }
+
+    label:hover &__large--checked#{&}__large--disabled {
+      background-color: transparent;
+    }
+
+    label:hover &--disabled,
+    label:hover &--disabled#{&}--invalid,
+    label:hover &--disabled#{&}--on-dark {
+      box-shadow: none;
+      background-color: transparent;
+    }
+  }
+
+  &__marker-icon {
+    display: flex;
+
+    // Vi overstyrer farger satt ved high-contrast mode i nettleser/os
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+      stroke: #fff;
+    }
+  }
+}

package/lib/components/Checkbox/CheckboxMarker/styles.module.scss.d.ts

@@ -0,0 +1,25 @@
+export type Styles = {
+  checkbox__marker: string;
+  'checkbox__marker__large--checked': string;
+  'checkbox__marker__large--checked--disabled': string;
+  'checkbox__marker__large--checked--invalid': string;
+  'checkbox__marker__large--disabled': string;
+  'checkbox__marker__large--invalid': string;
+  'checkbox__marker__regular--checked': string;
+  'checkbox__marker__regular--invalid': string;
+  'checkbox__marker__regular--on-dark': string;
+  'checkbox__marker--disabled': string;
+  'checkbox__marker--invalid': string;
+  'checkbox__marker--on-blueberry': string;
+  'checkbox__marker--on-dark': string;
+  'checkbox__marker--on-grey': string;
+  'checkbox__marker--on-invalid': string;
+  'checkbox__marker--on-white': string;
+  'checkbox__marker-icon': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;