@helsenorge/designsystem-react 5.0.0-beta.0 → 5.0.0-beta.1

package/components/Trigger/componentdata.json

@@ -0,0 +1 @@
+{"props":{"ariaLabel":{"defaultValue":null,"description":"Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!","name":"ariaLabel","parent":{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"},"declarations":[{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"}],"required":false,"type":{"name":"string"}},"ariaLabelledById":{"defaultValue":null,"description":"Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!","name":"ariaLabelledById","parent":{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"},"declarations":[{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"}],"required":false,"type":{"name":"string"}},"variant":{"defaultValue":{"value":"help"},"description":"Controls the icon and color. Default: help.","name":"variant","parent":{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"},"declarations":[{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"}],"required":false,"type":{"name":"enum","raw":"\"help\"","value":[{"value":"\"help\""}]}},"mode":{"defaultValue":{"value":"onlight"},"description":"Changes the design based on the background the trigger is placed on. Default: onlight.","name":"mode","parent":{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"},"declarations":[{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"}],"required":false,"type":{"name":"enum","raw":"TriggerMode","value":[{"value":"\"onlight\""},{"value":"\"ondark\""}]}},"size":{"defaultValue":{"value":"medium"},"description":"Size of the trigger. Default: medium.","name":"size","parent":{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"},"declarations":[{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"}],"required":false,"type":{"name":"enum","raw":"TriggerSize","value":[{"value":"\"medium\""},{"value":"\"large\""}]}},"selected":{"defaultValue":{"value":"false"},"description":"Indicates that the trigger is in use.","name":"selected","parent":{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"},"declarations":[{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"}],"required":false,"type":{"name":"boolean"}},"className":{"defaultValue":null,"description":"Classname will be applied to the button element.","name":"className","parent":{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"},"declarations":[{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Optional test id.","name":"testId","parent":{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"},"declarations":[{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"}],"required":false,"type":{"name":"string"}},"onClick":{"defaultValue":null,"description":"","name":"onClick","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"DOMAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"DOMAttributes"}],"required":false,"type":{"name":"MouseEventHandler<HTMLButtonElement>"}},"aria-haspopup":{"defaultValue":null,"description":"Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.","name":"aria-haspopup","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"menu\" | \"listbox\" | \"tree\" | \"grid\" | \"dialog\""}},"aria-controls":{"defaultValue":null,"description":"Identifies the element (or elements) whose contents or presence are controlled by the current element.\n@see aria-owns.","name":"aria-controls","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}}}}

package/components/Trigger/index.d.ts

@@ -0,0 +1,4 @@
+import Trigger from './Trigger';
+export * from './Trigger';
+export default Trigger;
+//# sourceMappingURL=index.d.ts.map

package/components/Trigger/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Trigger/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,eAAe,OAAO,CAAC"}

package/components/Trigger/index.js

@@ -0,0 +1,2 @@
+import e from"react";import x from"classnames";import{getIcon as y,Icon as E}from"../Icons/Icon.js";import{IconSize as n,AnalyticsId as I}from"../../constants.js";import{useHover as M}from"../../hooks/useHover.js";import{getColor as s}from"../../theme/currys/color.js";import{getAriaLabelAttributes as Z}from"../../utils/accessibility.js";import{mergeRefs as v}from"../../utils/refs.js";import c from"./styles.module.scss";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";const $=({size:t,isHovered:o})=>y({size:t,isHovered:o,normal:e.createElement("path",{d:"M18.854 19.678c0-2.268 1.701-4.74 5.126-4.74 3.358 0 5.172 2.222 5.172 4.536 0 1.793-.952 3.064-2.268 3.992l-.976.682c-.749.521-1.134 1.27-1.134 2.154 0 .047 0 .16.023.296h-2.269a46.85 46.85 0 0 0-.01-.139 8.554 8.554 0 0 1-.036-.724c0-1.36.522-2.471 1.84-3.424l1.042-.75c.75-.544 1.066-1.201 1.066-1.974 0-1.178-.793-2.29-2.45-2.29-1.679 0-2.563 1.293-2.563 2.585 0 .34.045.772.136 1.022l-2.564-.181a3.903 3.903 0 0 1-.135-1.044Zm3.176 10.186c0-.908.726-1.678 1.656-1.678.908 0 1.656.77 1.656 1.678 0 .907-.748 1.657-1.656 1.657-.93 0-1.656-.75-1.656-1.657Z"}),normalHover:e.createElement("path",{d:"M18.854 18.178c0-2.268 1.701-4.74 5.126-4.74 3.358 0 5.172 2.223 5.172 4.536 0 1.793-.952 3.064-2.268 3.992l-.976.682c-.749.521-1.134 1.27-1.134 2.154 0 .047 0 .16.023.296h-2.269a46.85 46.85 0 0 0-.01-.139 8.554 8.554 0 0 1-.036-.724c0-1.36.522-2.471 1.838-3.424l1.044-.75c.75-.544 1.066-1.201 1.066-1.974 0-1.178-.793-2.29-2.45-2.29-1.679 0-2.563 1.293-2.563 2.585 0 .34.045.772.135 1.022l-2.563-.181a3.903 3.903 0 0 1-.135-1.044Zm3.176 11.686c0-.908.725-1.678 1.655-1.678.908 0 1.657.77 1.657 1.678 0 .907-.749 1.657-1.657 1.657-.93 0-1.655-.75-1.655-1.657Z"}),xSmall:e.createElement("path",{d:"M23.98 14.937c-3.425 0-5.127 2.473-5.127 4.741 0 .363.047.726.137 1.044l2.563.182c-.09-.25-.136-.681-.136-1.022 0-1.292.885-2.586 2.563-2.586 1.658 0 2.45 1.112 2.45 2.291 0 .772-.317 1.43-1.065 1.974l-1.043.749c-1.317.953-1.84 2.065-1.84 3.425 0 .319.024.567.047.862h2.267c-.021-.135-.021-.25-.021-.295 0-.884.385-1.633 1.133-2.154l.976-.681c1.317-.93 2.27-2.2 2.27-3.993 0-2.314-1.816-4.537-5.174-4.537m-.294 13.248c-.93 0-1.656.773-1.656 1.678a1.65 1.65 0 0 0 1.656 1.657c.907 0 1.656-.748 1.656-1.657 0-.905-.749-1.678-1.656-1.678"}),xSmallHover:e.createElement("path",{d:"M18.853 18.289c0-2.268 1.701-4.742 5.127-4.742 3.357 0 5.173 2.223 5.173 4.537 0 1.794-.953 3.065-2.27 3.994l-.976.681c-.747.52-1.133 1.27-1.133 2.154 0 .046 0 .16.022.295h-2.267a39.324 39.324 0 0 0-.01-.125 8.468 8.468 0 0 1-.037-.737c0-1.36.523-2.472 1.839-3.425l1.043-.75c.748-.543 1.065-1.201 1.065-1.973 0-1.18-.792-2.29-2.45-2.29-1.678 0-2.562 1.293-2.562 2.585 0 .341.045.772.135 1.022l-2.563-.183a3.914 3.914 0 0 1-.136-1.043Zm3.176 11.575c0-.907.726-1.679 1.656-1.679.908 0 1.657.772 1.657 1.68 0 .907-.749 1.656-1.657 1.656-.93 0-1.656-.749-1.656-1.657Z"})}),A=$,C={help:A},R={medium:n.XSmall,large:n.Small},T=(t,o,l)=>{if(t==="ondark")return"white";const r=l?800:600;if(o==="help")return s("plum",r);if(o==="info")return s("blueberry",r)},p=e.forwardRef(({ariaLabel:t,ariaLabelledById:o,variant:l="help",mode:r="onlight",size:a="medium",selected:m=!1,className:g,testId:f,...d},h)=>{const{isHovered:i,hoverRef:u}=M(),S=x(c.trigger,r==="onlight"&&c[`trigger--${l}`],c[`trigger--${r}`],c[`trigger--${a}`],g),b=Z({label:t,id:o}),H=T(r,l,i||m);return e.createElement("button",{"aria-label":t,type:"button","data-testid":f,"data-analyticsid":I.Trigger,className:S,ref:v([h,u]),"aria-expanded":m,...b,...d},e.createElement(E,{svgIcon:C[l],size:R[a],color:H,isHovered:i}))});p.displayName="Trigger";const Q=p;export{Q as default};
+//# sourceMappingURL=index.js.map

package/components/Trigger/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Trigger/HelpSign.tsx","../../../src/components/Trigger/Trigger.tsx"],"sourcesContent":["import React from 'react';\n\nimport { getIcon, SvgPathProps } from '../Icons';\n\nconst HelpSign: React.FC<SvgPathProps> = ({ size, isHovered }: SvgPathProps): React.ReactElement => {\n  const normal = (\n    <path d=\"M18.854 19.678c0-2.268 1.701-4.74 5.126-4.74 3.358 0 5.172 2.222 5.172 4.536 0 1.793-.952 3.064-2.268 3.992l-.976.682c-.749.521-1.134 1.27-1.134 2.154 0 .047 0 .16.023.296h-2.269a46.85 46.85 0 0 0-.01-.139 8.554 8.554 0 0 1-.036-.724c0-1.36.522-2.471 1.84-3.424l1.042-.75c.75-.544 1.066-1.201 1.066-1.974 0-1.178-.793-2.29-2.45-2.29-1.679 0-2.563 1.293-2.563 2.585 0 .34.045.772.136 1.022l-2.564-.181a3.903 3.903 0 0 1-.135-1.044Zm3.176 10.186c0-.908.726-1.678 1.656-1.678.908 0 1.656.77 1.656 1.678 0 .907-.748 1.657-1.656 1.657-.93 0-1.656-.75-1.656-1.657Z\" />\n  );\n\n  const normalHover = (\n    <path d=\"M18.854 18.178c0-2.268 1.701-4.74 5.126-4.74 3.358 0 5.172 2.223 5.172 4.536 0 1.793-.952 3.064-2.268 3.992l-.976.682c-.749.521-1.134 1.27-1.134 2.154 0 .047 0 .16.023.296h-2.269a46.85 46.85 0 0 0-.01-.139 8.554 8.554 0 0 1-.036-.724c0-1.36.522-2.471 1.838-3.424l1.044-.75c.75-.544 1.066-1.201 1.066-1.974 0-1.178-.793-2.29-2.45-2.29-1.679 0-2.563 1.293-2.563 2.585 0 .34.045.772.135 1.022l-2.563-.181a3.903 3.903 0 0 1-.135-1.044Zm3.176 11.686c0-.908.725-1.678 1.655-1.678.908 0 1.657.77 1.657 1.678 0 .907-.749 1.657-1.657 1.657-.93 0-1.655-.75-1.655-1.657Z\" />\n  );\n\n  const xSmall = (\n    <path d=\"M23.98 14.937c-3.425 0-5.127 2.473-5.127 4.741 0 .363.047.726.137 1.044l2.563.182c-.09-.25-.136-.681-.136-1.022 0-1.292.885-2.586 2.563-2.586 1.658 0 2.45 1.112 2.45 2.291 0 .772-.317 1.43-1.065 1.974l-1.043.749c-1.317.953-1.84 2.065-1.84 3.425 0 .319.024.567.047.862h2.267c-.021-.135-.021-.25-.021-.295 0-.884.385-1.633 1.133-2.154l.976-.681c1.317-.93 2.27-2.2 2.27-3.993 0-2.314-1.816-4.537-5.174-4.537m-.294 13.248c-.93 0-1.656.773-1.656 1.678a1.65 1.65 0 0 0 1.656 1.657c.907 0 1.656-.748 1.656-1.657 0-.905-.749-1.678-1.656-1.678\" />\n  );\n\n  const xSmallHover = (\n    <path d=\"M18.853 18.289c0-2.268 1.701-4.742 5.127-4.742 3.357 0 5.173 2.223 5.173 4.537 0 1.794-.953 3.065-2.27 3.994l-.976.681c-.747.52-1.133 1.27-1.133 2.154 0 .046 0 .16.022.295h-2.267a39.324 39.324 0 0 0-.01-.125 8.468 8.468 0 0 1-.037-.737c0-1.36.523-2.472 1.839-3.425l1.043-.75c.748-.543 1.065-1.201 1.065-1.973 0-1.18-.792-2.29-2.45-2.29-1.678 0-2.562 1.293-2.562 2.585 0 .341.045.772.135 1.022l-2.563-.183a3.914 3.914 0 0 1-.136-1.043Zm3.176 11.575c0-.907.726-1.679 1.656-1.679.908 0 1.657.772 1.657 1.68 0 .907-.749 1.656-1.657 1.656-.93 0-1.656-.749-1.656-1.657Z\" />\n  );\n\n  return getIcon({ size, isHovered, normal, normalHover, xSmall, xSmallHover });\n};\n\nexport default HelpSign;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport HelpSign from './HelpSign';\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { getColor } from '../../theme/currys';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon, { SvgIcon } from '../Icons';\n\nimport styles from './styles.module.scss';\n\nexport type TriggerVariant = 'help'; // @todo Support variant='info' in later version\n\nexport type TriggerSize = 'medium' | 'large';\n\nexport type TriggerMode = 'onlight' | 'ondark';\n\nexport interface TriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-haspopup' | 'aria-controls'> {\n  /**\n   * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /**\n   * Controls the icon and color. Default: help.\n   */\n  variant?: TriggerVariant;\n  /**\n   * Changes the design based on the background the trigger is placed on. Default: onlight.\n   */\n  mode?: TriggerMode;\n  /**\n   * Size of the trigger. Default: medium.\n   */\n  size?: TriggerSize;\n  /**\n   * Indicates that the trigger is in use.\n   */\n  selected?: boolean;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Optional test id.\n   */\n  testId?: string;\n}\n\nconst iconMap: Record<TriggerVariant, SvgIcon> = {\n  help: HelpSign,\n  //info: InfoSignStroke, // @todo Support variant='info' in later version\n};\n\nconst iconSizeMap: Record<TriggerSize, IconSize> = {\n  medium: IconSize.XSmall,\n  large: IconSize.Small,\n};\n\nconst getIconColor = (mode: TriggerMode, variant: TriggerVariant, isActive: boolean): string | undefined => {\n  if (mode === 'ondark') {\n    return 'white';\n  }\n\n  const depth = isActive ? 800 : 600;\n\n  if (variant === 'help') {\n    return getColor('plum', depth);\n  }\n\n  if (variant === 'info') {\n    return getColor('blueberry', depth);\n  }\n};\n\nconst Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(\n  (\n    { ariaLabel, ariaLabelledById, variant = 'help', mode = 'onlight', size = 'medium', selected = false, className, testId, ...rest },\n    ref\n  ) => {\n    const { isHovered, hoverRef } = useHover<HTMLButtonElement>();\n\n    const triggerClasses = classNames(\n      styles.trigger,\n      mode === 'onlight' && styles[`trigger--${variant}`], // variants look the same when mode=ondark\n      styles[`trigger--${mode}`],\n      styles[`trigger--${size}`],\n      className\n    );\n\n    const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n    const iconColor = getIconColor(mode, variant, isHovered || selected);\n\n    return (\n      <button\n        aria-label={ariaLabel}\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Trigger}\n        className={triggerClasses}\n        ref={mergeRefs([ref, hoverRef])}\n        aria-expanded={selected}\n        {...ariaLabelAttributes}\n        {...rest}\n      >\n        <Icon svgIcon={iconMap[variant]} size={iconSizeMap[size]} color={iconColor} isHovered={isHovered} />\n      </button>\n    );\n  }\n);\n\nTrigger.displayName = 'Trigger';\n\nexport default Trigger;\n"],"names":["HelpSign","size","isHovered","getIcon","React","HelpSign$1","iconMap","iconSizeMap","IconSize","getIconColor","mode","variant","isActive","depth","getColor","Trigger","ariaLabel","ariaLabelledById","selected","className","testId","rest","ref","hoverRef","useHover","triggerClasses","classNames","styles","ariaLabelAttributes","getAriaLabelAttributes","iconColor","AnalyticsId","mergeRefs","Icon","Trigger$1"],"mappings":"snBAIA,MAAMA,EAAmC,CAAC,CAAE,KAAAC,EAAM,UAAAC,KAiBzCC,EAAQ,CAAE,KAAAF,EAAM,UAAAC,EAAW,OAfhCE,EAAA,cAAC,OAAK,CAAA,EAAE,gjBAAijB,CAAA,EAejhB,YAXxCA,EAAA,cAAC,OAAK,CAAA,EAAE,ijBAAkjB,CAAA,EAWrgB,OAPrDA,EAAA,cAAC,OAAK,CAAA,EAAE,whBAAyhB,CAAA,EAOpe,YAH7DA,EAAA,cAAC,OAAK,CAAA,EAAE,qjBAAsjB,CAAA,EAGpf,EAG9EC,EAAeL,EC+BTM,EAA2C,CAC/C,KAAMN,CAER,EAEMO,EAA6C,CACjD,OAAQC,EAAS,OACjB,MAAOA,EAAS,KAClB,EAEMC,EAAe,CAACC,EAAmBC,EAAyBC,IAA0C,CAC1G,GAAIF,IAAS,SACJ,MAAA,QAGH,MAAAG,EAAQD,EAAW,IAAM,IAE/B,GAAID,IAAY,OACP,OAAAG,EAAS,OAAQD,CAAK,EAG/B,GAAIF,IAAY,OACP,OAAAG,EAAS,YAAaD,CAAK,CAEtC,EAEME,EAAUX,EAAM,WACpB,CACE,CAAE,UAAAY,EAAW,iBAAAC,EAAkB,QAAAN,EAAU,OAAQ,KAAAD,EAAO,UAAW,KAAAT,EAAO,SAAU,SAAAiB,EAAW,GAAO,UAAAC,EAAW,OAAAC,EAAQ,GAAGC,GAC5HC,IACG,CACH,KAAM,CAAE,UAAApB,EAAW,SAAAqB,CAAS,EAAIC,EAA4B,EAEtDC,EAAiBC,EACrBC,EAAO,QACPjB,IAAS,WAAaiB,EAAO,YAAYhB,GAAS,EAClDgB,EAAO,YAAYjB,GAAM,EACzBiB,EAAO,YAAY1B,GAAM,EACzBkB,CAAA,EAGIS,EAAsBC,EAAuB,CAAE,MAAOb,EAAW,GAAIC,EAAkB,EAEvFa,EAAYrB,EAAaC,EAAMC,EAAST,GAAagB,CAAQ,EAGjE,OAAAd,EAAA,cAAC,SAAA,CACC,aAAYY,EACZ,KAAK,SACL,cAAaI,EACb,mBAAkBW,EAAY,QAC9B,UAAWN,EACX,IAAKO,EAAU,CAACV,EAAKC,CAAQ,CAAC,EAC9B,gBAAeL,EACd,GAAGU,EACH,GAAGP,CAAA,EAEHjB,EAAA,cAAA6B,EAAA,CAAK,QAAS3B,EAAQK,CAAO,EAAG,KAAMJ,EAAYN,CAAI,EAAG,MAAO6B,EAAW,UAAA5B,CAAsB,CAAA,CAAA,CAGxG,CACF,EAEAa,EAAQ,YAAc,UAEtB,MAAAmB,EAAenB"}

package/components/Trigger/styles.module.scss

@@ -0,0 +1,85 @@
+@use 'sass:map';
+@import '../../scss/palette';
+
+.trigger {
+  $trigger: &;
+
+  vertical-align: text-bottom;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border-radius: 50%;
+  border: 0;
+  outline: none;
+  background-color: transparent;
+  cursor: pointer;
+
+  &--medium {
+    height: 24.18px;
+    width: 24.18px;
+  }
+
+  &--large {
+    height: 30.61px;
+    width: 30.61px;
+  }
+
+  $variant-map: (
+    'help': 'plum',
+    'info': 'blueberry',
+  );
+
+  @each $variant, $color in $variant-map {
+    &--#{$variant} {
+      box-shadow: inset 0 0 0 1.5px map.get($palette-map, #{$color}600);
+
+      &:hover {
+        box-shadow: inset 0 0 0 1.5px map.get($palette-map, #{$color}800);
+        background-color: rgba-to-rgb(rgba(map.get($palette-map, #{$color}600), 0.1));
+      }
+
+      &:focus-visible {
+        box-shadow: inset 0 0 0 1.5px $black;
+        outline: 1.5px solid $black;
+      }
+
+      &#{$trigger}[aria-expanded='true'] {
+        box-shadow: inset 0 0 0 1.5px map.get($palette-map, #{$color}800);
+        background-color: rgba-to-rgb(rgba(map.get($palette-map, #{$color}600), 0.1));
+
+        &:hover {
+          background-color: rgba-to-rgb(rgba(map.get($palette-map, #{$color}600), 0.2));
+        }
+
+        &:focus {
+          background-color: rgba-to-rgb(rgba(map.get($palette-map, #{$color}600), 0.1));
+        }
+      }
+    }
+  }
+
+  &--ondark {
+    box-shadow: inset 0 0 0 1.5px $white;
+
+    &:hover {
+      background-color: rgba-to-rgb(rgba($plum50, 0.2), $plum600);
+    }
+
+    &:focus-visible {
+      outline: 1.5px solid $white;
+    }
+
+    &#{$trigger}[aria-expanded='true'] {
+      background-color: rgba-to-rgb(rgba($plum50, 0.1), $plum600);
+
+      &:hover {
+        background-color: rgba-to-rgb(rgba($plum50, 0.2), $plum600);
+      }
+
+      &:focus-visible {
+        background-color: rgba-to-rgb(rgba($plum50, 0.1), $plum600);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+export type Styles = {
+  trigger: string;
+  'trigger--help': string;
+  'trigger--info': string;
+  'trigger--large': string;
+  'trigger--medium': string;
+  'trigger--ondark': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/constants.d.ts

@@ -55,6 +55,7 @@ export declare enum AnalyticsId {
     Button = "button",
     Checkbox = "checkbox",
     Close = "close",
+    DictionaryTrigger = "dictionary-trigger",
     Dropdown = "dropdown",
     Duolist = "duolist",
     Expander = "expander",
@@ -95,6 +96,7 @@ export declare enum AnalyticsId {
     Tile = "tile",
     Title = "title",
     Tooltip = "tooltip",
+    Trigger = "trigger",
     Validation = "validation"
 }
 export declare enum KeyboardEventKey {

package/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"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"}

package/constants.js

@@ -1,2 +1,2 @@
-var e=(r=>(r[r.XXSmall=24]="XXSmall",r[r.XSmall=38]="XSmall",r[r.Small=48]="Small",r[r.Medium=64]="Medium",r[r.Large=80]="Large",r[r.XLarge=130]="XLarge",r))(e||{}),o=(r=>(r[r.Modal=13e5]="Modal",r[r.ExpanderTrigger=1e4]="ExpanderTrigger",r))(o||{});const g=12;var p=(r=>(r.onwhite="onwhite",r.ongrey="ongrey",r.onblueberry="onblueberry",r.ondark="ondark",r.oninvalid="oninvalid",r))(p||{}),a=(r=>(r.normal="normal",r.bigform="bigform",r))(a||{}),u=(r=>(r.AnchorLink="anchor-link",r.Avatar="avatar",r.Badge="badge",r.Button="button",r.Checkbox="checkbox",r.Close="close",r.Dropdown="dropdown",r.Duolist="duolist",r.Expander="expander",r.ExpanderList="expander-list",r.ExpanderListExpander="expander-list-expander",r.ExpanderHierarchy="expander-hierarchy",r.ExpanderHierarchyExpander="expander-hierarchy-expander",r.FormGroup="form-group",r.FormLayout="form-layout",r.HelpBubble="help-bubble",r.HighlightBox="highlight-box",r.Icon="icon",r.Input="input",r.Label="label",r.Link="link",r.LinkList="link-list",r.List="list",r.Loader="loader",r.Logo="logo",r.Modal="modal",r.NotificationPanel="notification-panel",r.Panel="panel",r.PanelList="panel-list",r.PopMenu="pop-menu",r.PopOver="pop-over",r.Portal="portal",r.Stepper="stepper",r.RadioButton="radio-button",r.Select="select",r.Slider="slider",r.Spacer="spacer",r.StatusDot="status-dot",r.Sublabel="sublabel",r.Table="table",r.Tag="tag",r.TagList="tag-list",r.Textarea="textarea",r.Tile="tile",r.Title="title",r.Tooltip="tooltip",r.Validation="validation",r))(u||{}),l=(r=>(r.Enter="Enter",r.Escape="Escape",r.ArrowDown="ArrowDown",r.ArrowUp="ArrowUp",r.Home="Home",r.End="End",r))(l||{});export{g as AVERAGE_CHARACTER_WIDTH_PX,u as AnalyticsId,p as FormMode,a as FormVariant,e as IconSize,l as KeyboardEventKey,o as ZIndex};
+var e=(r=>(r[r.XXSmall=24]="XXSmall",r[r.XSmall=38]="XSmall",r[r.Small=48]="Small",r[r.Medium=64]="Medium",r[r.Large=80]="Large",r[r.XLarge=130]="XLarge",r))(e||{}),o=(r=>(r[r.Modal=13e5]="Modal",r[r.ExpanderTrigger=1e4]="ExpanderTrigger",r))(o||{});const l=12;var p=(r=>(r.onwhite="onwhite",r.ongrey="ongrey",r.onblueberry="onblueberry",r.ondark="ondark",r.oninvalid="oninvalid",r))(p||{}),a=(r=>(r.normal="normal",r.bigform="bigform",r))(a||{}),g=(r=>(r.AnchorLink="anchor-link",r.Avatar="avatar",r.Badge="badge",r.Button="button",r.Checkbox="checkbox",r.Close="close",r.DictionaryTrigger="dictionary-trigger",r.Dropdown="dropdown",r.Duolist="duolist",r.Expander="expander",r.ExpanderList="expander-list",r.ExpanderListExpander="expander-list-expander",r.ExpanderHierarchy="expander-hierarchy",r.ExpanderHierarchyExpander="expander-hierarchy-expander",r.FormGroup="form-group",r.FormLayout="form-layout",r.HelpBubble="help-bubble",r.HighlightBox="highlight-box",r.Icon="icon",r.Input="input",r.Label="label",r.Link="link",r.LinkList="link-list",r.List="list",r.Loader="loader",r.Logo="logo",r.Modal="modal",r.NotificationPanel="notification-panel",r.Panel="panel",r.PanelList="panel-list",r.PopMenu="pop-menu",r.PopOver="pop-over",r.Portal="portal",r.Stepper="stepper",r.RadioButton="radio-button",r.Select="select",r.Slider="slider",r.Spacer="spacer",r.StatusDot="status-dot",r.Sublabel="sublabel",r.Table="table",r.Tag="tag",r.TagList="tag-list",r.Textarea="textarea",r.Tile="tile",r.Title="title",r.Tooltip="tooltip",r.Trigger="trigger",r.Validation="validation",r))(g||{}),u=(r=>(r.Enter="Enter",r.Escape="Escape",r.ArrowDown="ArrowDown",r.ArrowUp="ArrowUp",r.Home="Home",r.End="End",r))(u||{});export{l as AVERAGE_CHARACTER_WIDTH_PX,g as AnalyticsId,p as FormMode,a as FormVariant,e as IconSize,u as KeyboardEventKey,o as ZIndex};
 //# sourceMappingURL=constants.js.map

package/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["export enum IconSize {\n  XXSmall = 24,\n  XSmall = 38,\n  Small = 48,\n  Medium = 64,\n  Large = 80,\n  XLarge = 130,\n}\n\nexport enum ZIndex {\n  Modal = 1300000,\n  ExpanderTrigger = 10000,\n}\n\nexport const AVERAGE_CHARACTER_WIDTH_PX = 12;\n\nexport interface HTMLButtonProps {\n  autoFocus?: boolean;\n  disabled?: boolean;\n  form?: string;\n  formAction?: string;\n  formEncType?: string;\n  formMethod?: string;\n  formNoValidate?: boolean;\n  formTarget?: string;\n  name?: string;\n  type?: 'submit' | 'reset' | 'button' | string;\n  value?: string | string[] | number;\n  id?: string;\n}\n\nexport type AnchorTarget = '_self' | '_blank' | '_parent' | '_top';\n\nexport interface HTMLAnchorProps {\n  download?: string;\n  href?: string;\n  hrefLang?: string;\n  media?: string;\n  ping?: string;\n  rel?: AnchorTarget;\n  target?: string;\n  referrerPolicy?:\n    | ''\n    | 'same-origin'\n    | 'no-referrer'\n    | 'no-referrer-when-downgrade'\n    | 'origin'\n    | 'origin-when-cross-origin'\n    | 'strict-origin'\n    | 'strict-origin-when-cross-origin'\n    | 'unsafe-url';\n}\n\nexport type ButtonVariant = 'secondary' | 'tertiary' | string | undefined | null;\n\nexport enum FormMode {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  ondark = 'ondark',\n  oninvalid = 'oninvalid',\n}\n\nexport enum FormVariant {\n  normal = 'normal',\n  bigform = 'bigform',\n}\n\nexport enum AnalyticsId {\n  AnchorLink = 'anchor-link',\n  Avatar = 'avatar',\n  Badge = 'badge',\n  Button = 'button',\n  Checkbox = 'checkbox',\n  Close = 'close',\n  Dropdown = 'dropdown',\n  Duolist = 'duolist',\n  Expander = 'expander',\n  ExpanderList = 'expander-list',\n  ExpanderListExpander = 'expander-list-expander',\n  ExpanderHierarchy = 'expander-hierarchy',\n  ExpanderHierarchyExpander = 'expander-hierarchy-expander',\n  FormGroup = 'form-group',\n  FormLayout = 'form-layout',\n  HelpBubble = 'help-bubble',\n  HighlightBox = 'highlight-box',\n  Icon = 'icon',\n  Input = 'input',\n  Label = 'label',\n  Link = 'link',\n  LinkList = 'link-list',\n  List = 'list',\n  Loader = 'loader',\n  Logo = 'logo',\n  Modal = 'modal',\n  NotificationPanel = 'notification-panel',\n  Panel = 'panel',\n  PanelList = 'panel-list',\n  PopMenu = 'pop-menu',\n  PopOver = 'pop-over',\n  Portal = 'portal',\n  Stepper = 'stepper',\n  RadioButton = 'radio-button',\n  Select = 'select',\n  Slider = 'slider',\n  Spacer = 'spacer',\n  StatusDot = 'status-dot',\n  Sublabel = 'sublabel',\n  Table = 'table',\n  Tag = 'tag',\n  TagList = 'tag-list',\n  Textarea = 'textarea',\n  Tile = 'tile',\n  Title = 'title',\n  Tooltip = 'tooltip',\n  Validation = 'validation',\n}\n\nexport enum KeyboardEventKey {\n  Enter = 'Enter',\n  Escape = 'Escape',\n  ArrowDown = 'ArrowDown',\n  ArrowUp = 'ArrowUp',\n  Home = 'Home',\n  End = 'End',\n}\n"],"names":["IconSize","ZIndex","AVERAGE_CHARACTER_WIDTH_PX","FormMode","FormVariant","AnalyticsId","KeyboardEventKey"],"mappings":"AAAY,IAAAA,GAAAA,IACVA,EAAAA,EAAA,QAAU,EAAV,EAAA,UACAA,EAAAA,EAAA,OAAS,EAAT,EAAA,SACAA,EAAAA,EAAA,MAAQ,EAAR,EAAA,QACAA,EAAAA,EAAA,OAAS,EAAT,EAAA,SACAA,EAAAA,EAAA,MAAQ,EAAR,EAAA,QACAA,EAAAA,EAAA,OAAS,GAAT,EAAA,SANUA,IAAAA,GAAA,CAAA,CAAA,EASAC,GAAAA,IACVA,EAAAA,EAAA,MAAQ,IAAR,EAAA,QACAA,EAAAA,EAAA,gBAAkB,GAAlB,EAAA,kBAFUA,IAAAA,GAAA,CAAA,CAAA,EAKL,MAAMC,EAA6B,GAyC9B,IAAAC,GAAAA,IACVA,EAAA,QAAU,UACVA,EAAA,OAAS,SACTA,EAAA,YAAc,cACdA,EAAA,OAAS,SACTA,EAAA,UAAY,YALFA,IAAAA,GAAA,CAAA,CAAA,EAQAC,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,QAAU,UAFAA,IAAAA,GAAA,CAAA,CAAA,EAKAC,GAAAA,IACVA,EAAA,WAAa,cACbA,EAAA,OAAS,SACTA,EAAA,MAAQ,QACRA,EAAA,OAAS,SACTA,EAAA,SAAW,WACXA,EAAA,MAAQ,QACRA,EAAA,SAAW,WACXA,EAAA,QAAU,UACVA,EAAA,SAAW,WACXA,EAAA,aAAe,gBACfA,EAAA,qBAAuB,yBACvBA,EAAA,kBAAoB,qBACpBA,EAAA,0BAA4B,8BAC5BA,EAAA,UAAY,aACZA,EAAA,WAAa,cACbA,EAAA,WAAa,cACbA,EAAA,aAAe,gBACfA,EAAA,KAAO,OACPA,EAAA,MAAQ,QACRA,EAAA,MAAQ,QACRA,EAAA,KAAO,OACPA,EAAA,SAAW,YACXA,EAAA,KAAO,OACPA,EAAA,OAAS,SACTA,EAAA,KAAO,OACPA,EAAA,MAAQ,QACRA,EAAA,kBAAoB,qBACpBA,EAAA,MAAQ,QACRA,EAAA,UAAY,aACZA,EAAA,QAAU,WACVA,EAAA,QAAU,WACVA,EAAA,OAAS,SACTA,EAAA,QAAU,UACVA,EAAA,YAAc,eACdA,EAAA,OAAS,SACTA,EAAA,OAAS,SACTA,EAAA,OAAS,SACTA,EAAA,UAAY,aACZA,EAAA,SAAW,WACXA,EAAA,MAAQ,QACRA,EAAA,IAAM,MACNA,EAAA,QAAU,WACVA,EAAA,SAAW,WACXA,EAAA,KAAO,OACPA,EAAA,MAAQ,QACRA,EAAA,QAAU,UACVA,EAAA,WAAa,aA/CHA,IAAAA,GAAA,CAAA,CAAA,EAkDAC,GAAAA,IACVA,EAAA,MAAQ,QACRA,EAAA,OAAS,SACTA,EAAA,UAAY,YACZA,EAAA,QAAU,UACVA,EAAA,KAAO,OACPA,EAAA,IAAM,MANIA,IAAAA,GAAA,CAAA,CAAA"}
+{"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["export enum IconSize {\n  XXSmall = 24,\n  XSmall = 38,\n  Small = 48,\n  Medium = 64,\n  Large = 80,\n  XLarge = 130,\n}\n\nexport enum ZIndex {\n  Modal = 1300000,\n  ExpanderTrigger = 10000,\n}\n\nexport const AVERAGE_CHARACTER_WIDTH_PX = 12;\n\nexport interface HTMLButtonProps {\n  autoFocus?: boolean;\n  disabled?: boolean;\n  form?: string;\n  formAction?: string;\n  formEncType?: string;\n  formMethod?: string;\n  formNoValidate?: boolean;\n  formTarget?: string;\n  name?: string;\n  type?: 'submit' | 'reset' | 'button' | string;\n  value?: string | string[] | number;\n  id?: string;\n}\n\nexport type AnchorTarget = '_self' | '_blank' | '_parent' | '_top';\n\nexport interface HTMLAnchorProps {\n  download?: string;\n  href?: string;\n  hrefLang?: string;\n  media?: string;\n  ping?: string;\n  rel?: AnchorTarget;\n  target?: string;\n  referrerPolicy?:\n    | ''\n    | 'same-origin'\n    | 'no-referrer'\n    | 'no-referrer-when-downgrade'\n    | 'origin'\n    | 'origin-when-cross-origin'\n    | 'strict-origin'\n    | 'strict-origin-when-cross-origin'\n    | 'unsafe-url';\n}\n\nexport type ButtonVariant = 'secondary' | 'tertiary' | string | undefined | null;\n\nexport enum FormMode {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  ondark = 'ondark',\n  oninvalid = 'oninvalid',\n}\n\nexport enum FormVariant {\n  normal = 'normal',\n  bigform = 'bigform',\n}\n\nexport enum AnalyticsId {\n  AnchorLink = 'anchor-link',\n  Avatar = 'avatar',\n  Badge = 'badge',\n  Button = 'button',\n  Checkbox = 'checkbox',\n  Close = 'close',\n  DictionaryTrigger = 'dictionary-trigger',\n  Dropdown = 'dropdown',\n  Duolist = 'duolist',\n  Expander = 'expander',\n  ExpanderList = 'expander-list',\n  ExpanderListExpander = 'expander-list-expander',\n  ExpanderHierarchy = 'expander-hierarchy',\n  ExpanderHierarchyExpander = 'expander-hierarchy-expander',\n  FormGroup = 'form-group',\n  FormLayout = 'form-layout',\n  HelpBubble = 'help-bubble',\n  HighlightBox = 'highlight-box',\n  Icon = 'icon',\n  Input = 'input',\n  Label = 'label',\n  Link = 'link',\n  LinkList = 'link-list',\n  List = 'list',\n  Loader = 'loader',\n  Logo = 'logo',\n  Modal = 'modal',\n  NotificationPanel = 'notification-panel',\n  Panel = 'panel',\n  PanelList = 'panel-list',\n  PopMenu = 'pop-menu',\n  PopOver = 'pop-over',\n  Portal = 'portal',\n  Stepper = 'stepper',\n  RadioButton = 'radio-button',\n  Select = 'select',\n  Slider = 'slider',\n  Spacer = 'spacer',\n  StatusDot = 'status-dot',\n  Sublabel = 'sublabel',\n  Table = 'table',\n  Tag = 'tag',\n  TagList = 'tag-list',\n  Textarea = 'textarea',\n  Tile = 'tile',\n  Title = 'title',\n  Tooltip = 'tooltip',\n  Trigger = 'trigger',\n  Validation = 'validation',\n}\n\nexport enum KeyboardEventKey {\n  Enter = 'Enter',\n  Escape = 'Escape',\n  ArrowDown = 'ArrowDown',\n  ArrowUp = 'ArrowUp',\n  Home = 'Home',\n  End = 'End',\n}\n"],"names":["IconSize","ZIndex","AVERAGE_CHARACTER_WIDTH_PX","FormMode","FormVariant","AnalyticsId","KeyboardEventKey"],"mappings":"AAAY,IAAAA,GAAAA,IACVA,EAAAA,EAAA,QAAU,EAAV,EAAA,UACAA,EAAAA,EAAA,OAAS,EAAT,EAAA,SACAA,EAAAA,EAAA,MAAQ,EAAR,EAAA,QACAA,EAAAA,EAAA,OAAS,EAAT,EAAA,SACAA,EAAAA,EAAA,MAAQ,EAAR,EAAA,QACAA,EAAAA,EAAA,OAAS,GAAT,EAAA,SANUA,IAAAA,GAAA,CAAA,CAAA,EASAC,GAAAA,IACVA,EAAAA,EAAA,MAAQ,IAAR,EAAA,QACAA,EAAAA,EAAA,gBAAkB,GAAlB,EAAA,kBAFUA,IAAAA,GAAA,CAAA,CAAA,EAKL,MAAMC,EAA6B,GAyC9B,IAAAC,GAAAA,IACVA,EAAA,QAAU,UACVA,EAAA,OAAS,SACTA,EAAA,YAAc,cACdA,EAAA,OAAS,SACTA,EAAA,UAAY,YALFA,IAAAA,GAAA,CAAA,CAAA,EAQAC,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,QAAU,UAFAA,IAAAA,GAAA,CAAA,CAAA,EAKAC,GAAAA,IACVA,EAAA,WAAa,cACbA,EAAA,OAAS,SACTA,EAAA,MAAQ,QACRA,EAAA,OAAS,SACTA,EAAA,SAAW,WACXA,EAAA,MAAQ,QACRA,EAAA,kBAAoB,qBACpBA,EAAA,SAAW,WACXA,EAAA,QAAU,UACVA,EAAA,SAAW,WACXA,EAAA,aAAe,gBACfA,EAAA,qBAAuB,yBACvBA,EAAA,kBAAoB,qBACpBA,EAAA,0BAA4B,8BAC5BA,EAAA,UAAY,aACZA,EAAA,WAAa,cACbA,EAAA,WAAa,cACbA,EAAA,aAAe,gBACfA,EAAA,KAAO,OACPA,EAAA,MAAQ,QACRA,EAAA,MAAQ,QACRA,EAAA,KAAO,OACPA,EAAA,SAAW,YACXA,EAAA,KAAO,OACPA,EAAA,OAAS,SACTA,EAAA,KAAO,OACPA,EAAA,MAAQ,QACRA,EAAA,kBAAoB,qBACpBA,EAAA,MAAQ,QACRA,EAAA,UAAY,aACZA,EAAA,QAAU,WACVA,EAAA,QAAU,WACVA,EAAA,OAAS,SACTA,EAAA,QAAU,UACVA,EAAA,YAAc,eACdA,EAAA,OAAS,SACTA,EAAA,OAAS,SACTA,EAAA,OAAS,SACTA,EAAA,UAAY,aACZA,EAAA,SAAW,WACXA,EAAA,MAAQ,QACRA,EAAA,IAAM,MACNA,EAAA,QAAU,WACVA,EAAA,SAAW,WACXA,EAAA,KAAO,OACPA,EAAA,MAAQ,QACRA,EAAA,QAAU,UACVA,EAAA,QAAU,UACVA,EAAA,WAAa,aAjDHA,IAAAA,GAAA,CAAA,CAAA,EAoDAC,GAAAA,IACVA,EAAA,MAAQ,QACRA,EAAA,OAAS,SACTA,EAAA,UAAY,YACZA,EAAA,QAAU,UACVA,EAAA,KAAO,OACPA,EAAA,IAAM,MANIA,IAAAA,GAAA,CAAA,CAAA"}

package/package.json

@@ -7,9 +7,12 @@
     "url": "https://github.com/helsenorge/designsystem"
   },
   "homepage": "https://helsenorge.design",
-  "version": "5.0.0-beta.0",
+  "version": "5.0.0-beta.1",
   "author": "Helsenorge",
   "license": "MIT",
+  "dependencies": {
+    "storybook-addon-html-validator": "^0.0.12"
+  },
   "peerDependencies": {
     "bootstrap": "^4.6.2",
     "classnames": "^2.3.2",

package/scss/_palette.scss

@@ -127,3 +127,18 @@ $palette-map: (
   'black': $black,
   'white': $white,
 );
+
+/**
+* Konverter en gjennomsiktig farge til en ugjennomsiktig farge ved å simulere fargen plassert
+* på en bakgrunnsfarge (f.eks. 50% gjennomsiktig $blueberry200 på hvit bakgrunn).
+* 
+* Fra https://makandracards.com/makandra/42500-sass-how-to-convert-an-rgba-color-to-its-rgb-look-alike
+* 
+* @param $rgba Farge med alpha-verdi, f.eks. rgba(black, 0.67)
+* @param $background Bakgrunnsfarge. Default: $white
+* 
+* @returns Farge uten gjennomsiktighet
+*/
+@function rgba-to-rgb($rgba, $background: $white) {
+  @return mix(rgb(red($rgba), green($rgba), blue($rgba)), $background, alpha($rgba) * 100%);
+}