@helsenorge/designsystem-react 15.7.1 → 16.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/HelpPanel/HelpPanel.tsx","../../../src/components/HelpPanel/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { useIsMobileBreakpoint } from '@helsenorge/designsystem-react/hooks/useIsMobileBreakpoint';\n\nimport Icon, { IconSize } from '../Icon';\nimport HandWaving from '../Icons/HandWaving';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type HelpPanelVariants = 'normal' | 'compact' | 'subdued';\n\nexport interface HelpPanelProps {\n  /** The content of the component */\n  children: React.ReactNode;\n  /** If set the compact styling will be used */\n  variant?: HelpPanelVariants;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets title if needed */\n  title?: string;\n}\n\nconst HelpPanel: React.FC<HelpPanelProps> = ({ className, variant = 'normal', testId, children, title }) => {\n  const isMobile = useIsMobileBreakpoint();\n\n  const containerClassName = classNames(\n    styles['help-panel'],\n    {\n      [styles['help-panel--compact']]: variant === 'compact',\n      [styles['help-panel--subdued']]: variant === 'subdued',\n    },\n    className\n  );\n\n  const renderContent = (): React.ReactNode => {\n    const titleElement = title && (\n      <Title testId=\"titleId\" htmlMarkup={'h2'} appearance={'title6'}>\n        {title}\n      </Title>\n    );\n\n    const iconSize = isMobile ? IconSize.XSmall : IconSize.Small;\n\n    if (variant === 'compact') {\n      return (\n        <>\n          <div className={classNames(styles['help-panel__icon'], styles['help-panel__icon--compact'])}>\n            <Icon svgIcon={HandWaving} size={iconSize} />\n          </div>\n          <div className={classNames(styles['help-panel__content'], styles['help-panel__content--compact'])}>\n            {title && <div className={styles['help-panel__title-wrapper']}>{titleElement}</div>}\n            {children}\n          </div>\n        </>\n      );\n    }\n\n    return (\n      <>\n        <div className={styles['help-panel__icon']}>{<Icon svgIcon={HandWaving} size={iconSize} />}</div>\n        <div className={styles['help-panel__content']}>\n          <div className={styles['help-panel__title-wrapper']}>{titleElement}</div>\n          {children}\n        </div>\n      </>\n    );\n  };\n\n  return (\n    <div className={containerClassName} data-testid={testId}>\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default HelpPanel;\n","import HelpPanel from './HelpPanel';\nexport * from './HelpPanel';\nexport default HelpPanel;\n"],"mappings":";;;;;;;;;AAyBA,IAAM,aAAuC,EAAE,WAAW,UAAU,UAAU,QAAQ,UAAU,YAAY;CAC1G,MAAM,WAAW,sBAAsB;CAEvC,MAAM,qBAAqB,WACzB,OAAO,eACP;GACG,OAAO,yBAAyB,YAAY;GAC5C,OAAO,yBAAyB,YAAY;CAC/C,GACA,SACF;CAEA,MAAM,sBAAuC;EAC3C,MAAM,eAAe,SACnB,oBAAC,eAAD;GAAO,QAAO;GAAU,YAAY;GAAM,YAAY;GACnD,UAAA;EACI,CAAA;EAGT,MAAM,WAAW,WAAW,SAAS,SAAS,SAAS;EAEvD,IAAI,YAAY,WACd,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;GAAK,WAAW,WAAW,OAAO,qBAAqB,OAAO,4BAA4B;GACxF,UAAA,oBAAC,cAAD;IAAM,SAAS;IAAY,MAAM;GAAW,CAAA;EACzC,CAAA,GACL,qBAAC,OAAD;GAAK,WAAW,WAAW,OAAO,wBAAwB,OAAO,+BAA+B;GAAhG,UAAA,CACG,SAAS,oBAAC,OAAD;IAAK,WAAW,OAAO;IAA+B,UAAA;GAAkB,CAAA,GACjF,QACE;EACL,CAAA,CAAA,EAAA,CAAA;EAIN,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;GAAK,WAAW,OAAO;GAAsB,UAAA,oBAAC,cAAD;IAAM,SAAS;IAAY,MAAM;GAAW,CAAA;EAAO,CAAA,GAChG,qBAAC,OAAD;GAAK,WAAW,OAAO;GAAvB,UAAA,CACE,oBAAC,OAAD;IAAK,WAAW,OAAO;IAA+B,UAAA;GAAkB,CAAA,GACvE,QACE;EACL,CAAA,CAAA,EAAA,CAAA;CAEN;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW;EAAoB,eAAa;EAC9C,UAAA,cAAc;CACZ,CAAA;AAET;;;AC1EA,IAAA,oBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/HelpPanel/HelpPanel.tsx","../../../src/components/HelpPanel/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { useIsMobileBreakpoint } from '@helsenorge/designsystem-react/hooks/useIsMobileBreakpoint';\n\nimport Icon, { IconSize } from '../Icon';\nimport HandWaving from '../Icons/HandWaving';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type HelpPanelVariants = 'normal' | 'subdued';\n\nexport interface HelpPanelProps {\n  /** The content of the component */\n  children: React.ReactNode;\n  /** Sets the visual variant */\n  variant?: HelpPanelVariants;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets title if needed */\n  title?: string;\n}\n\nconst HelpPanel: React.FC<HelpPanelProps> = ({ className, variant = 'normal', testId, children, title }) => {\n  const isMobile = useIsMobileBreakpoint();\n\n  const containerClassName = classNames(\n    styles['help-panel'],\n    {\n      [styles['help-panel--subdued']]: variant === 'subdued',\n    },\n    className\n  );\n\n  const renderContent = (): React.ReactNode => {\n    const titleElement = title && (\n      <Title testId=\"titleId\" htmlMarkup={'h2'} appearance={'title6'}>\n        {title}\n      </Title>\n    );\n\n    const iconSize = isMobile ? IconSize.XSmall : IconSize.Small;\n\n    return (\n      <>\n        <div className={styles['help-panel__icon']}>{<Icon svgIcon={HandWaving} size={iconSize} />}</div>\n        <div className={styles['help-panel__content']}>\n          <div className={styles['help-panel__title-wrapper']}>{titleElement}</div>\n          {children}\n        </div>\n      </>\n    );\n  };\n\n  return (\n    <div className={containerClassName} data-testid={testId}>\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default HelpPanel;\n","import HelpPanel from './HelpPanel';\nexport * from './HelpPanel';\nexport default HelpPanel;\n"],"mappings":";;;;;;;;;AAyBA,IAAM,aAAuC,EAAE,WAAW,UAAU,UAAU,QAAQ,UAAU,YAAY;CAC1G,MAAM,WAAW,sBAAsB;CAEvC,MAAM,qBAAqB,WACzB,OAAO,eACP,GACG,OAAO,yBAAyB,YAAY,UAC/C,GACA,SACF;CAEA,MAAM,sBAAuC;EAC3C,MAAM,eAAe,SACnB,oBAAC,eAAD;GAAO,QAAO;GAAU,YAAY;GAAM,YAAY;GACnD,UAAA;EACI,CAAA;EAGT,MAAM,WAAW,WAAW,SAAS,SAAS,SAAS;EAEvD,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;GAAK,WAAW,OAAO;GAAsB,UAAA,oBAAC,cAAD;IAAM,SAAS;IAAY,MAAM;GAAW,CAAA;EAAO,CAAA,GAChG,qBAAC,OAAD;GAAK,WAAW,OAAO;GAAvB,UAAA,CACE,oBAAC,OAAD;IAAK,WAAW,OAAO;IAA+B,UAAA;GAAkB,CAAA,GACvE,QACE;EACL,CAAA,CAAA,EAAA,CAAA;CAEN;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW;EAAoB,eAAa;EAC9C,UAAA,cAAc;CACZ,CAAA;AAET;;;AC3DA,IAAA,oBAAe"}

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

@@ -2,14 +2,12 @@
 @use '../../scss/font-mixins' as fonts;
 @use '../../scss/screen-reader' as *;
 @use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
-@import '../../scss/supernova/styles/spacers.css';
 
 .help-panel {
   display: flex;
   flex-direction: row;
   padding: var(--core-space-xs) var(--core-space-xs) var(--core-space-m);
-  background-color: var(--color-help-background-normal);
+  background-color: var(--color-help-background);
   border: 1px solid var(--color-help-border-subtle-wcag);
 
   @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
@@ -20,27 +18,14 @@
     padding: var(--core-space-s) var(--core-space-m) var(--core-space-m);
   }
 
-  &--compact {
-    padding: var(--core-space-2xs) var(--core-space-s);
-  }
-
   &--subdued {
     background-color: transparent;
   }
 
-  &--white {
-    background-color: var(--color-base-background-white);
-    border: 1px solid var(--color-base-border-onlight-subtle);
-  }
-
   &__content {
     @include fonts.help-text;
 
     margin-top: 0.625rem;
-
-    &--compact {
-      margin-top: 0.625rem;
-    }
   }
 
   &__icon {
@@ -53,14 +38,9 @@
       margin-right: var(--core-space-2xs);
     }
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, xl)) {
       margin-right: var(--core-space-s);
     }
-
-    &--compact {
-      margin-right: var(--core-space-2xs);
-      margin-bottom: 0;
-    }
   }
 
   &__title-wrapper {

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

@@ -1,13 +1,9 @@
 export type Styles = {
   'help-panel': string;
   'help-panel__content': string;
-  'help-panel__content--compact': string;
   'help-panel__icon': string;
-  'help-panel__icon--compact': string;
   'help-panel__title-wrapper': string;
-  'help-panel--compact': string;
   'help-panel--subdued': string;
-  'help-panel--white': string;
 };
 
 export type ClassNames = keyof Styles;

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

@@ -1,8 +1,6 @@
 @use 'sass:map';
 @use '../../scss/font-mixins' as fonts;
 @use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
-@import '../../scss/supernova/styles/spacers.css';
 
 .wrapper {
   position: relative;
@@ -13,7 +11,7 @@
   grid-template-columns: [icon] auto [content] 1fr;
   width: 100%;
   overflow: hidden;
-  background-color: var(--color-help-background-normal);
+  background-color: var(--color-help-background);
   border: 1px solid var(--color-help-border-subtle-wcag);
   padding: var(--core-space-xs) var(--core-space-xs) var(--core-space-m);
 
@@ -30,7 +28,7 @@
   }
 
   &--subdued {
-    background-color: var(--color-base-background-white);
+    background-color: var(--color-base-background-light);
   }
 
   &--collapsed {
@@ -106,20 +104,20 @@
     font-style: normal;
     font-weight: 600;
     line-height: 120%; // 1.2rem
-    background-color: var(--color-help-graphics-normal);
+    background-color: var(--color-help-graphics);
 
     &:hover {
-      background-color: var(--color-help-graphics-verydark);
+      background-color: var(--color-help-graphics-plus2);
     }
 
     &:active {
-      background-color: var(--color-help-graphics-dark);
+      background-color: var(--color-help-graphics-plus1);
     }
 
     &:focus-visible {
-      border: 1px solid var(--color-base-graphics-ondark);
+      border: 1px solid var(--color-base-graphics-light);
       outline: none;
-      box-shadow: 0 0 0 3px var(--color-base-graphics-onlight);
+      box-shadow: 0 0 0 3px var(--color-base-graphics-dark);
     }
   }
 }

package/lib/components/HelpTriggerIcon/HelpTriggerIcon.d.ts

@@ -1,4 +1,4 @@
-export type HelpTriggerIconSizes = 'inherit' | 'medium' | 'large' | 'xlarge';
+export type HelpTriggerIconSizes = 'inherit' | 'normal' | 'large' | 'xlarge';
 export type HelpTriggerIconTags = 'button' | 'span';
 export type HelpTriggerWeights = 'normal' | 'strong';
 export interface HelpTriggerIconProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded'> {
@@ -13,7 +13,7 @@ export interface HelpTriggerIconProps extends Pick<React.InputHTMLAttributes<HTM
     /** Adds custom classes to the element. */
     className?: string;
     /**
-     * Size of the Icon. Default: medium.
+     * Size of the Icon. Default: normal.
      */
     size?: HelpTriggerIconSizes;
     /** Sets the data-testid attribute. */

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

@@ -1,15 +1,13 @@
 @use 'sass:map';
 @use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
-@import '../../scss/supernova/styles/spacers.css';
 
-$trigger-medium-size: 1.25rem;
+$trigger-normal-size: 1.25rem;
 $trigger-large-size: 1.5rem;
 $trigger-xl-size: 2rem;
-$trigger-medium-margin: 0.125rem;
+$trigger-normal-margin: 0.125rem;
 $trigger-large-margin: 0.25rem;
 $trigger-xl-margin: 0.25rem;
-$outline-medium-width: 2px;
+$outline-normal-width: 2px;
 $outline-large-width: 2.2px;
 $outline-xl-width: 2.5px;
 $outline-focus-inner-width: 2px;
@@ -69,23 +67,23 @@ $outline-focus-outer-width: 5px;
         $outline-width: clamp(0px, 0.3em, 3px);
 
         inset: calc(-1 * (#{$outline-width}/ 3));
-        box-shadow: inset 0 0 0 #{$outline-width} var(--color-action-border-onlight-focus);
+        box-shadow: inset 0 0 0 #{$outline-width} var(--color-action-border-dark-focus);
         z-index: 1;
       }
     }
   }
 
-  &--medium {
+  &--normal {
     svg {
-      width: $trigger-medium-size;
-      height: $trigger-medium-size;
+      width: $trigger-normal-size;
+      height: $trigger-normal-size;
     }
   }
 
   &--large {
     svg {
-      height: $trigger-medium-size;
-      width: $trigger-medium-size;
+      height: $trigger-normal-size;
+      width: $trigger-normal-size;
 
       @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
         height: $trigger-large-size;
@@ -94,23 +92,23 @@ $outline-focus-outer-width: 5px;
     }
   }
 
-  &--medium#{&}--is-button {
-    margin: $trigger-medium-margin;
+  &--normal#{&}--is-button {
+    margin: $trigger-normal-margin;
   }
 
   &--large#{&}--is-button {
-    margin: $trigger-medium-margin;
+    margin: $trigger-normal-margin;
 
     @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       margin: $trigger-large-margin;
     }
   }
 
-  &--medium#{&}--is-button,
+  &--normal#{&}--is-button,
   &--large#{&}--is-button {
     &:focus-visible {
       box-shadow: none;
-      outline: 3px solid var(--color-action-border-onlight-focus);
+      outline: 3px solid var(--color-action-border-dark-focus);
       outline-offset: -2px;
     }
   }
@@ -132,7 +130,7 @@ $outline-focus-outer-width: 5px;
 
     &:focus-visible {
       box-shadow: none;
-      outline: 3.5px solid var(--color-action-border-onlight-focus);
+      outline: 3.5px solid var(--color-action-border-dark-focus);
       outline-offset: -2px;
     }
 
@@ -152,22 +150,22 @@ $outline-focus-outer-width: 5px;
   }
 
   &--strong {
-    background-color: var(--color-help-graphics-normal);
+    background-color: var(--color-help-graphics);
   }
 
   &--strong#{&}--is-button {
     &:hover {
-      background-color: var(--color-help-graphics-verydark);
+      background-color: var(--color-help-graphics-plus2);
     }
 
     &:active {
-      background-color: var(--color-help-graphics-normal);
+      background-color: var(--color-help-graphics);
     }
 
     &:focus-visible {
       box-shadow:
-        0 0 0 #{$outline-focus-inner-width} var(--color-base-graphics-ondark),
-        0 0 0 calc(#{$outline-focus-outer-width}) var(--color-action-border-onlight-focus);
+        0 0 0 #{$outline-focus-inner-width} var(--color-base-graphics-light),
+        0 0 0 calc(#{$outline-focus-outer-width}) var(--color-action-border-dark-focus);
       outline: none;
 
       &::after {

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

@@ -3,7 +3,7 @@ export type Styles = {
   'help-trigger-icon--inherit': string;
   'help-trigger-icon--is-button': string;
   'help-trigger-icon--large': string;
-  'help-trigger-icon--medium': string;
+  'help-trigger-icon--normal': string;
   'help-trigger-icon--strong': string;
   'help-trigger-icon--xlarge': string;
 };

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

@@ -1,7 +1,5 @@
 @use 'sass:map';
 @use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
-@import '../../scss/supernova/styles/spacers.css';
 
 $trigger-medium-size: 1.25rem;
 $trigger-large-size: 1.5rem;
@@ -12,7 +10,7 @@ $outline-xl-width: 2.5px;
 
 .help-trigger-inline {
   display: inline;
-  color: var(--color-help-graphics-normal);
+  color: var(--color-help-graphics);
   cursor: pointer;
   text-align: start;
   text-decoration: none;
@@ -25,12 +23,12 @@ $outline-xl-width: 2.5px;
 
   &:hover,
   &:active {
-    color: var(--color-help-graphics-verydark);
+    color: var(--color-help-graphics-plus2);
     background-color: var(--color-help-background-transparent-onlight-hover);
   }
 
   &:focus-visible {
-    outline: 3px solid var(--color-action-border-onlight-focus);
+    outline: 3px solid var(--color-action-border-dark-focus);
   }
 
   &:active {

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

@@ -1,8 +1,6 @@
 @use 'sass:map';
 @use '../../scss/breakpoints' as breakpoints;
 @use '../../scss/font-mixins' as fonts;
-@import '../../scss/supernova/styles/colors.css';
-@import '../../scss/supernova/styles/spacers.css';
 
 $trigger-medium-size: 1.25rem;
 $trigger-large-size: 1.5rem;
@@ -22,7 +20,7 @@ $outline-xl-width: 2.5px;
   border: 0;
   min-width: 4.6rem;
   min-height: 2.75rem;
-  color: var(--color-help-graphics-normal);
+  color: var(--color-help-graphics);
   padding: 0 var(--core-space-3xs);
   font-size: 1rem;
   font-weight: 600;
@@ -36,12 +34,12 @@ $outline-xl-width: 2.5px;
 
   &:hover,
   &:active {
-    color: var(--color-help-graphics-verydark);
+    color: var(--color-help-graphics-plus2);
     background-color: var(--color-help-background-transparent-onlight-hover);
   }
 
   &:focus-visible {
-    outline: 3px solid var(--color-action-border-onlight-focus);
+    outline: 3px solid var(--color-action-border-dark-focus);
   }
 
   &:active {

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

@@ -4,7 +4,6 @@
 @use '../../scss/screen-reader' as *;
 @import '../../scss/breakpoints';
 @import '../../scss/grid';
-@import '../../scss/supernova/styles/colors.css';
 
 .highlightpanel {
   $colors: 'neutral', 'blueberry', 'cherry';
@@ -33,8 +32,8 @@
   }
 
   &--white {
-    background-color: var(--color-base-background-white);
-    border: 1px solid var(--color-base-border-onlight-subtle);
+    background-color: var(--color-base-background-light);
+    border: 1px solid var(--color-base-border-light);
   }
 
   &__content {

package/lib/components/Icons/AdditionalIconInformation.d.ts

@@ -1431,5 +1431,9 @@ declare const _default: {
         alternativeName: string;
         categories: string;
     };
+    yesno: {
+        alternativeName: string;
+        categories: string;
+    };
 };
 export default _default;

package/lib/components/Icons/AdditionalIconInformation.js

@@ -1394,43 +1394,47 @@ var AdditionalIconInformation_default = {
 	},
 	starstroke: {
 		alternativeName: "",
-		categories: ""
+		categories: "System, Snarvei"
 	},
 	starfill: {
 		alternativeName: "",
-		categories: ""
+		categories: "System, Snarvei"
 	},
 	measuringtape: {
 		alternativeName: "",
-		categories: ""
+		categories: "Generisk"
 	},
 	thumbsup: {
 		alternativeName: "Tommel Opp",
-		categories: ""
+		categories: "Generisk"
 	},
 	thumbsdown: {
 		alternativeName: "Tommel Ned",
-		categories: ""
+		categories: "Generisk"
 	},
 	consentdocument: {
 		alternativeName: "",
-		categories: ""
+		categories: "Generisk"
 	},
 	healthcarepersonnelsecurity: {
 		alternativeName: "",
-		categories: ""
+		categories: "Generisk"
 	},
 	historydocument: {
 		alternativeName: "",
-		categories: ""
+		categories: "Generisk"
 	},
 	personcommunication: {
 		alternativeName: "",
-		categories: ""
+		categories: "Generisk"
 	},
 	persondocument: {
 		alternativeName: "",
-		categories: ""
+		categories: "Generisk"
+	},
+	yesno: {
+		alternativeName: "",
+		categories: "Generisk"
 	}
 };
 //#endregion