@helsenorge/designsystem-react 12.4.0 → 12.7.0

package/components/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport designsystemlayout from '../../scss/layout.module.scss';\nimport { PaletteNames } from '../../theme/palette';\n\nimport styles from './styles.module.scss';\n\nexport type { TabProps } from './Tab';\nexport type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;\nexport type TabsOnColor = 'onblueberry' | 'onneutral' | 'onwhite';\n\nexport interface TabsProps {\n  children?: React.ReactNode;\n  /** Controlled state for Tabs component */\n  activeTab?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the color of the tabs. Default: white */\n  color?: TabsColors;\n  /** Sets wether the component should use the container-breakout class. Default: true */\n  containerBreakout?: boolean;\n  /** Sets the background color of the tabs. Can only be used when the color is set to white. Default: onwhite */\n  onColor?: TabsOnColor;\n  /** Whether the tab list should be sticky */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets aria label on the \"scroll to the right\" button in TabList */\n  ariaLabelRightButton?: string;\n  /** Sets aria label on the \"scroll to the left\" button in TabList */\n  ariaLabelLeftButton?: string;\n  /** Overrides the default z-index of the tabs header */\n  zIndex?: number;\n}\n\nconst TabsRoot: React.FC<TabsProps> = ({\n  activeTab,\n  children,\n  className,\n  color = 'white',\n  containerBreakout = true,\n  onColor = 'onwhite',\n  sticky = true,\n  testId,\n  ariaLabelRightButton,\n  ariaLabelLeftButton,\n  zIndex,\n}) => {\n  const isControlled = activeTab !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(0);\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabPanelRef = useRef<HTMLDivElement>(null);\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  let onColorUsed: TabsOnColor = 'onwhite';\n  if (color === 'white') {\n    onColorUsed = onColor;\n  }\n\n  const onValueChange = (newValue: number): void => {\n    if (!isControlled) {\n      setUncontrolledValue(newValue);\n    }\n  };\n\n  const activeTabIndex = isControlled ? activeTab : uncontrolledValue;\n\n  return (\n    <div className={classNames(className, containerBreakout && designsystemlayout['container-breakout'])} data-testid={testId}>\n      <div\n        ref={tabListRef}\n        className={classNames(styles['tab-list-wrapper'], {\n          [styles['tab-list-wrapper--sticky']]: sticky,\n        })}\n        style={{\n          zIndex: zIndex,\n        }}\n      >\n        <TabList\n          onTabListClick={(index: number) => onValueChange(index)}\n          selectedTab={activeTabIndex}\n          color={color}\n          onColor={onColorUsed}\n          ariaLabelLeftButton={ariaLabelLeftButton}\n          ariaLabelRightButton={ariaLabelRightButton}\n        >\n          {children}\n        </TabList>\n        <div className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`])}></div>\n      </div>\n      <div ref={tabsRef} style={{ marginTop: '-50px' }}>\n        <TabPanel ref={tabPanelRef} color={color} isFirst={activeTabIndex == 0}>\n          {React.Children.toArray(children)[activeTabIndex]}\n        </TabPanel>\n      </div>\n    </div>\n  );\n};\n\ntype TabsComponent = typeof TabsRoot & {\n  Tab: typeof Tab;\n};\nconst Tabs = TabsRoot as TabsComponent;\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n"],"names":["React"],"mappings":";;;;;;;AAwCA,MAAM,WAAgC,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,cAAc;AACnC,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,CAAC;AAC5D,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,cAAc,OAAuB,IAAI;AAC/C,QAAM,aAAa,OAAuB,IAAI;AAE9C,MAAI,cAA2B;AAC/B,MAAI,UAAU,SAAS;AACrB,kBAAc;AAAA,EAChB;AAEA,QAAM,gBAAgB,CAAC,aAA2B;AAChD,QAAI,CAAC,cAAc;AACjB,2BAAqB,QAAQ;AAAA,IAC/B;AAAA,EACF;AAEA,QAAM,iBAAiB,eAAe,YAAY;AAElD,SACE,qBAAC,OAAA,EAAI,WAAW,WAAW,WAAW,qBAAqB,mBAAmB,oBAAoB,CAAC,GAAG,eAAa,QACjH,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,WAAW,OAAO,kBAAkB,GAAG;AAAA,UAChD,CAAC,OAAO,0BAA0B,CAAC,GAAG;AAAA,QAAA,CACvC;AAAA,QACD,OAAO;AAAA,UACL;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,gBAAgB,CAAC,UAAkB,cAAc,KAAK;AAAA,cACtD,aAAa;AAAA,cACb;AAAA,cACA,SAAS;AAAA,cACT;AAAA,cACA;AAAA,cAEC;AAAA,YAAA;AAAA,UAAA;AAAA,UAEH,oBAAC,OAAA,EAAI,WAAW,WAAW,OAAO,eAAe,GAAG,OAAO,kBAAkB,KAAK,EAAE,CAAC,EAAA,CAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAE1F,oBAAC,OAAA,EAAI,KAAK,SAAS,OAAO,EAAE,WAAW,QAAA,GACrC,UAAA,oBAAC,UAAA,EAAS,KAAK,aAAa,OAAc,SAAS,kBAAkB,GAClE,UAAAA,eAAM,SAAS,QAAQ,QAAQ,EAAE,cAAc,EAAA,CAClD,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;AAKA,MAAM,OAAO;AACb,KAAK,cAAc;AACnB,KAAK,MAAM;AACX,KAAK,IAAI,cAAc;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tabs/resourceHelper.ts","../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Tabs.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Tabs.nb-NO.json';\nimport { HNDesignsystemTabs } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemTabs => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getResources } from './resourceHelper';\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport { LanguageLocales } from '../../constants';\nimport { HNDesignsystemTabs } from '../../resources/Resources';\nimport designsystemlayout from '../../scss/layout.module.scss';\nimport { PaletteNames } from '../../theme/palette';\nimport { useLanguage } from '../../utils/language';\n\nimport styles from './styles.module.scss';\n\nexport type { TabProps } from './Tab';\nexport type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;\nexport type TabsOnColor = 'onblueberry' | 'onneutral' | 'onwhite';\n\nexport interface TabsProps {\n  children?: React.ReactNode;\n  /** Controlled state for Tabs component */\n  activeTab?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the color of the tabs. Default: white */\n  color?: TabsColors;\n  /** Sets wether the component should use the container-breakout class. Default: true */\n  containerBreakout?: boolean;\n  /** Sets the background color of the tabs. Can only be used when the color is set to white. Default: onwhite */\n  onColor?: TabsOnColor;\n  /** Whether the tab list should be sticky */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** @deprecated Sets aria label on the \"scroll to the right\" button in TabList */\n  ariaLabelRightButton?: string;\n  /** @deprecated Sets aria label on the \"scroll to the left\" button in TabList */\n  ariaLabelLeftButton?: string;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemTabs>;\n  /** Overrides the default z-index of the tabs header */\n  zIndex?: number;\n}\n\nexport const TabsRoot: React.FC<TabsProps> = ({\n  activeTab,\n  children,\n  className,\n  color = 'white',\n  containerBreakout = true,\n  onColor = 'onwhite',\n  sticky = true,\n  testId,\n  ariaLabelRightButton,\n  ariaLabelLeftButton,\n  resources,\n  zIndex,\n}) => {\n  const isControlled = activeTab !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(0);\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabPanelRef = useRef<HTMLDivElement>(null);\n  const tabListRef = useRef<HTMLDivElement>(null);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemTabs = {\n    ...defaultResources,\n    ...resources,\n    ariaLabelRightButton: ariaLabelRightButton || resources?.ariaLabelRightButton || defaultResources.ariaLabelRightButton,\n    ariaLabelLeftButton: ariaLabelLeftButton || resources?.ariaLabelLeftButton || defaultResources.ariaLabelLeftButton,\n  };\n\n  let onColorUsed: TabsOnColor = 'onwhite';\n  if (color === 'white') {\n    onColorUsed = onColor;\n  }\n\n  const onValueChange = (newValue: number): void => {\n    if (!isControlled) {\n      setUncontrolledValue(newValue);\n    }\n  };\n\n  const activeTabIndex = isControlled ? activeTab : uncontrolledValue;\n\n  return (\n    <div className={classNames(className, containerBreakout && designsystemlayout['container-breakout'])} data-testid={testId}>\n      <div\n        ref={tabListRef}\n        className={classNames(styles['tab-list-wrapper'], {\n          [styles['tab-list-wrapper--sticky']]: sticky,\n        })}\n        style={{\n          zIndex: zIndex,\n        }}\n      >\n        <TabList\n          onTabListClick={(index: number) => onValueChange(index)}\n          selectedTab={activeTabIndex}\n          color={color}\n          onColor={onColorUsed}\n          ariaLabelLeftButton={mergedResources.ariaLabelLeftButton}\n          ariaLabelRightButton={mergedResources.ariaLabelRightButton}\n        >\n          {children}\n        </TabList>\n        <div className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`])}></div>\n      </div>\n      <div ref={tabsRef} style={{ marginTop: '-50px' }}>\n        <TabPanel ref={tabPanelRef} color={color} isFirst={activeTabIndex == 0}>\n          {React.Children.toArray(children)[activeTabIndex]}\n        </TabPanel>\n      </div>\n    </div>\n  );\n};\n\ntype TabsComponent = typeof TabsRoot & {\n  Tab: typeof Tab;\n};\nconst Tabs = TabsRoot as TabsComponent;\nTabsRoot.displayName = 'Tabs';\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n"],"names":["ariaLabelRightButton","ariaLabelLeftButton","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAKO,MAAM,eAAe,CAAC,aAAkD;AAC7E,UAAQ,UAAA;AAAA,IACN,KAAK,gBAAgB;AACnB,aAAO;AAAA,IACT,KAAK,gBAAgB;AAAA,IACrB;AACE,aAAO;AAAA,EAAA;AAEb;ACiCO,MAAM,WAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,SAAS;AAAA,EACT;AAAA,EACA,sBAAAA;AAAA,EACA,qBAAAC;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,cAAc;AACnC,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,CAAC;AAC5D,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,cAAc,OAAuB,IAAI;AAC/C,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,EAAE,SAAA,IAAa,YAA6B,gBAAgB,SAAS;AAC3E,QAAM,mBAAmB,aAAa,QAAQ;AAE9C,QAAM,kBAAsC;AAAA,IAC1C,GAAG;AAAA,IACH,GAAG;AAAA,IACH,sBAAsBD,0BAAwB,uCAAW,yBAAwB,iBAAiB;AAAA,IAClG,qBAAqBC,yBAAuB,uCAAW,wBAAuB,iBAAiB;AAAA,EAAA;AAGjG,MAAI,cAA2B;AAC/B,MAAI,UAAU,SAAS;AACrB,kBAAc;AAAA,EAChB;AAEA,QAAM,gBAAgB,CAAC,aAA2B;AAChD,QAAI,CAAC,cAAc;AACjB,2BAAqB,QAAQ;AAAA,IAC/B;AAAA,EACF;AAEA,QAAM,iBAAiB,eAAe,YAAY;AAElD,SACE,qBAAC,OAAA,EAAI,WAAW,WAAW,WAAW,qBAAqB,mBAAmB,oBAAoB,CAAC,GAAG,eAAa,QACjH,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,WAAW,OAAO,kBAAkB,GAAG;AAAA,UAChD,CAAC,OAAO,0BAA0B,CAAC,GAAG;AAAA,QAAA,CACvC;AAAA,QACD,OAAO;AAAA,UACL;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,gBAAgB,CAAC,UAAkB,cAAc,KAAK;AAAA,cACtD,aAAa;AAAA,cACb;AAAA,cACA,SAAS;AAAA,cACT,qBAAqB,gBAAgB;AAAA,cACrC,sBAAsB,gBAAgB;AAAA,cAErC;AAAA,YAAA;AAAA,UAAA;AAAA,UAEH,oBAAC,OAAA,EAAI,WAAW,WAAW,OAAO,eAAe,GAAG,OAAO,kBAAkB,KAAK,EAAE,CAAC,EAAA,CAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAE1F,oBAAC,OAAA,EAAI,KAAK,SAAS,OAAO,EAAE,WAAW,QAAA,GACrC,UAAA,oBAAC,UAAA,EAAS,KAAK,aAAa,OAAc,SAAS,kBAAkB,GAClE,UAAAC,eAAM,SAAS,QAAQ,QAAQ,EAAE,cAAc,EAAA,CAClD,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;AAKA,MAAM,OAAO;AACb,SAAS,cAAc;AACvB,KAAK,cAAc;AACnB,KAAK,MAAM;AACX,KAAK,IAAI,cAAc;"}

package/components/Tabs/resourceHelper.d.ts

@@ -0,0 +1,3 @@
+import { LanguageLocales } from '../../constants';
+import { HNDesignsystemTabs } from '../../resources/Resources';
+export declare const getResources: (language: LanguageLocales) => HNDesignsystemTabs;

package/constants.d.ts

@@ -70,6 +70,7 @@ export declare enum AnalyticsId {
     ExpanderListExpander = "expander-list-expander",
     EyebrowHeader = "eyebrow-header",
     FavoriteButton = "favorite-button",
+    FormFieldTag = "form-field-tag",
     FormGroup = "form-group",
     FormLayout = "form-layout",
     HelpBubble = "help-bubble",

package/constants.js

@@ -48,6 +48,7 @@ var AnalyticsId = /* @__PURE__ */ ((AnalyticsId2) => {
   AnalyticsId2["ExpanderListExpander"] = "expander-list-expander";
   AnalyticsId2["EyebrowHeader"] = "eyebrow-header";
   AnalyticsId2["FavoriteButton"] = "favorite-button";
+  AnalyticsId2["FormFieldTag"] = "form-field-tag";
   AnalyticsId2["FormGroup"] = "form-group";
   AnalyticsId2["FormLayout"] = "form-layout";
   AnalyticsId2["HelpBubble"] = "help-bubble";

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  OverlayScreen = 1300000,\n  PopOver = 11000,\n  LightBoxButtons = 1000,\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 FormOnColor {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  ondark = 'ondark',\n  oninvalid = 'oninvalid',\n}\n\nexport enum FormSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum AnalyticsId {\n  AnchorLink = 'anchor-link',\n  ArticleTeaser = 'article-teaser',\n  Avatar = 'avatar',\n  Badge = 'badge',\n  Button = 'button',\n  Checkbox = 'checkbox',\n  Chip = 'chip',\n  Close = 'close',\n  DictionaryTrigger = 'dictionary-trigger',\n  Drawer = 'Drawer',\n  Dropdown = 'dropdown',\n  Duolist = 'duolist',\n  EmptyState = 'empty-state',\n  Expander = 'expander',\n  ExpanderHierarchy = 'expander-hierarchy',\n  ExpanderHierarchyExpander = 'expander-hierarchy-expander',\n  ExpanderList = 'expander-list',\n  ExpanderListExpander = 'expander-list-expander',\n  EyebrowHeader = 'eyebrow-header',\n  FavoriteButton = 'favorite-button',\n  FormGroup = 'form-group',\n  FormLayout = 'form-layout',\n  HelpBubble = 'help-bubble',\n  HelpDrawer = 'help-drawer',\n  HelpExpanderInline = 'help-expander-inline',\n  HelpExpanderStandalone = 'help-expander-standalone',\n  HelpTooltip = 'help-tooltip',\n  HelpTriggerIcon = 'help-trigger-icon',\n  HelpTriggerInline = 'help-trigger-inline',\n  HelpTriggerStandalone = 'help-trigger-standalone',\n  HighlightPanel = 'highlight-panel',\n  Icon = 'icon',\n  Illustration = 'Illustration',\n  InfoTeaser = 'info-teaser',\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  PanelOld = 'panel',\n  PanelList = 'panel-list',\n  PopMenu = 'pop-menu',\n  PopOver = 'pop-over',\n  Portal = 'portal',\n  PromoPanel = 'promo-panel',\n  RadioButton = 'radio-button',\n  Select = 'select',\n  SharingStatus = 'sharing-status',\n  Slider = 'slider',\n  Spacer = 'spacer',\n  StatusDot = 'status-dot',\n  Step = 'step',\n  StepButtons = 'step-buttons',\n  Stepper = 'stepper',\n  Sublabel = 'sublabel',\n  Table = 'table',\n  Tag = 'tag',\n  TagList = 'tag-list',\n  Textarea = 'textarea',\n  Tile = 'tile',\n  Title = 'title',\n  Toggle = 'toggle',\n  Validation = 'validation',\n}\n\nexport enum KeyboardEventKey {\n  Enter = 'Enter',\n  Escape = 'Escape',\n  ArrowDown = 'ArrowDown',\n  ArrowUp = 'ArrowUp',\n  ArrowRight = 'ArrowRight',\n  ArrowLeft = 'ArrowLeft',\n  Home = 'Home',\n  End = 'End',\n  Space = ' ',\n  Tab = 'Tab',\n}\n\nexport enum LanguageLocales {\n  NORWEGIAN = 'nb-NO',\n  NORWEGIAN_NYNORSK = 'nn-NO',\n  ENGLISH = 'en-GB',\n  SAMI_NORTHERN = 'se-NO',\n}\n"],"names":["IconSize","ZIndex","FormOnColor","FormSize","AnalyticsId","KeyboardEventKey","LanguageLocales"],"mappings":"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"}
+{"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  OverlayScreen = 1300000,\n  PopOver = 11000,\n  LightBoxButtons = 1000,\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 FormOnColor {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  ondark = 'ondark',\n  oninvalid = 'oninvalid',\n}\n\nexport enum FormSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum AnalyticsId {\n  AnchorLink = 'anchor-link',\n  ArticleTeaser = 'article-teaser',\n  Avatar = 'avatar',\n  Badge = 'badge',\n  Button = 'button',\n  Checkbox = 'checkbox',\n  Chip = 'chip',\n  Close = 'close',\n  DictionaryTrigger = 'dictionary-trigger',\n  Drawer = 'Drawer',\n  Dropdown = 'dropdown',\n  Duolist = 'duolist',\n  EmptyState = 'empty-state',\n  Expander = 'expander',\n  ExpanderHierarchy = 'expander-hierarchy',\n  ExpanderHierarchyExpander = 'expander-hierarchy-expander',\n  ExpanderList = 'expander-list',\n  ExpanderListExpander = 'expander-list-expander',\n  EyebrowHeader = 'eyebrow-header',\n  FavoriteButton = 'favorite-button',\n  FormFieldTag = 'form-field-tag',\n  FormGroup = 'form-group',\n  FormLayout = 'form-layout',\n  HelpBubble = 'help-bubble',\n  HelpDrawer = 'help-drawer',\n  HelpExpanderInline = 'help-expander-inline',\n  HelpExpanderStandalone = 'help-expander-standalone',\n  HelpTooltip = 'help-tooltip',\n  HelpTriggerIcon = 'help-trigger-icon',\n  HelpTriggerInline = 'help-trigger-inline',\n  HelpTriggerStandalone = 'help-trigger-standalone',\n  HighlightPanel = 'highlight-panel',\n  Icon = 'icon',\n  Illustration = 'Illustration',\n  InfoTeaser = 'info-teaser',\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  PanelOld = 'panel',\n  PanelList = 'panel-list',\n  PopMenu = 'pop-menu',\n  PopOver = 'pop-over',\n  Portal = 'portal',\n  PromoPanel = 'promo-panel',\n  RadioButton = 'radio-button',\n  Select = 'select',\n  SharingStatus = 'sharing-status',\n  Slider = 'slider',\n  Spacer = 'spacer',\n  StatusDot = 'status-dot',\n  Step = 'step',\n  StepButtons = 'step-buttons',\n  Stepper = 'stepper',\n  Sublabel = 'sublabel',\n  Table = 'table',\n  Tag = 'tag',\n  TagList = 'tag-list',\n  Textarea = 'textarea',\n  Tile = 'tile',\n  Title = 'title',\n  Toggle = 'toggle',\n  Validation = 'validation',\n}\n\nexport enum KeyboardEventKey {\n  Enter = 'Enter',\n  Escape = 'Escape',\n  ArrowDown = 'ArrowDown',\n  ArrowUp = 'ArrowUp',\n  ArrowRight = 'ArrowRight',\n  ArrowLeft = 'ArrowLeft',\n  Home = 'Home',\n  End = 'End',\n  Space = ' ',\n  Tab = 'Tab',\n}\n\nexport enum LanguageLocales {\n  NORWEGIAN = 'nb-NO',\n  NORWEGIAN_NYNORSK = 'nn-NO',\n  ENGLISH = 'en-GB',\n  SAMI_NORTHERN = 'se-NO',\n}\n"],"names":["IconSize","ZIndex","FormOnColor","FormSize","AnalyticsId","KeyboardEventKey","LanguageLocales"],"mappings":"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"}

package/designsystem-react.css

@@ -8,93 +8,8 @@
  */
 
 :root {
-  --core-color-black: #000000;
-  --core-color-white: #ffffff;
-  --core-color-blueberry-50: #e4f7f9;
-  --core-color-neutral-500: #989693;
-  --core-color-neutral-700: #62625f;
-  --color-action-text-ondark: #ffffff;
-
-  /* Hoverfarge for bakgrunn på interaktive elementer - onLight */
-  --color-action-background-transparent-onlight-hover: #126f8721;
-
-  /* Hoverfarge for bakgrunn på interaktive elementer - onLight selected */
-  --color-action-background-transparent-onlight-hoverselected: #126f872b;
-  --color-notification-background-info: #e4f7f9;
-  --color-notification-background-error: #fff2ea;
-  --color-destructive-graphics-normal: #c83521;
-  --color-base-text-onlight: #000000;
-  --color-action-background-ondark: #ffffff;
-  --color-action-border-ondark: #ffffff;
-  --color-action-border-ondark-focus: #ffffff;
-  --color-action-graphics-ondark: #ffffff;
-  --color-base-text-ondark: #ffffff;
-  --color-base-background-neutral: #f5f3f3;
-  --color-base-background-white: #ffffff;
-  --color-base-graphics-ondark: #ffffff;
-  --color-disabled-text-ondark: #ffffff;
-  --color-action-border-onlight: #188097;
-  --color-action-border-onlight-hover: #08667c;
-  --color-action-border-onlight-focus: #000000;
-  --color-action-text-onlight: #126f87;
-  --color-action-text-onlight-hover: #08667c;
   --color-action-graphics-onlight: #188097;
   --color-action-graphics-onlight-hover: #126f87;
-  --color-action-graphics-ondark-hover: #e4f7f9;
-  --color-action-background-ondark-hover: #e4f7f9;
-  --color-action-background-ondark-selected: #cae7ed;
-  --color-action-background-ondark-hoverselected: #afdae3;
-  --color-action-background-onlight: #188097;
-  --color-action-background-onlight-hover: #08667c;
-  --color-notification-background-warning: #fdf8df;
-  --color-notification-background-success: #e6f8ee;
-  --color-notification-border-info: #08667c;
-  --color-notification-border-error: #a31f0e;
-  --color-notification-border-warning: #ab7c00;
-  --color-notification-border-success: #078141;
-  --color-notification-graphics-info: #08667c;
-  --color-notification-graphics-error: #a31f0e;
-  --color-notification-graphics-warning: #ab7c00;
-  --color-notification-graphics-success: #078141;
-  --color-notification-status-warning: #ebc840;
-  --color-notification-status-success: #099150;
-  --color-destructive-graphics-hover: #b62e1c;
-  --color-destructive-text-normal: #b62e1c;
-  --color-destructive-text-hover: #a31f0e;
-  --color-disabled-background: #d6d4d3;
-  --color-disabled-text: #62625f;
-  --color-disabled-border: #7d7c79;
-  --color-disabled-graphics: #62625f;
-  --color-disabled-border-ondark: #d6d4d3;
-  --color-disabled-graphics-ondark: #d6d4d3;
-  --color-base-background-blueberry: #e4f7f9;
-  --color-base-background-cherry: #fff2ea;
-  --color-base-background-dark-blueberry: #188097;
-  --color-base-background-dark-cherry: #c83521;
-  --color-base-graphics-onlight: #000000;
-  --color-base-border-ondark: #d6d4d3;
-  --color-base-border-onlight: #7d7c79;
-  --color-base-border-onlight-emphasized: #62625f;
-  --color-help-background-normal: #f4ecfe;
-  --color-help-graphics-normal: #5b22a6;
-  --color-help-border-normal: #5b22a6;
-  --core-color-blueberry-100: #cae7ed;
-  --core-color-blueberry-200: #afdae3;
-  --core-color-blueberry-300: #7abecc;
-  --core-color-blueberry-400: #58aabb;
-  --core-color-blueberry-500: #188097;
-  --core-color-blueberry-600: #126f87;
-  --core-color-blueberry-700: #08667c;
-  --core-color-blueberry-800: #06596c;
-  --core-color-blueberry-900: #084350;
-  --core-color-neutral-50: #f5f3f3;
-  --core-color-neutral-100: #eae7e7;
-  --core-color-neutral-200: #d6d4d3;
-  --core-color-neutral-300: #bdbab9;
-  --core-color-neutral-400: #aaa8a6;
-  --core-color-neutral-600: #7d7c79;
-  --core-color-neutral-800: #474745;
-  --core-color-neutral-900: #2b2c2b;
   --core-color-banana-50: #fdf8df;
   --core-color-banana-100: #fcf2bf;
   --core-color-banana-200: #f9ea9f;
@@ -105,6 +20,16 @@
   --core-color-banana-700: #ab7c00;
   --core-color-banana-800: #916500;
   --core-color-banana-900: #764f00;
+  --core-color-blueberry-50: #e4f7f9;
+  --core-color-blueberry-100: #cae7ed;
+  --core-color-blueberry-200: #afdae3;
+  --core-color-blueberry-300: #7abecc;
+  --core-color-blueberry-400: #58aabb;
+  --core-color-blueberry-500: #188097;
+  --core-color-blueberry-600: #126f87;
+  --core-color-blueberry-700: #08667c;
+  --core-color-blueberry-800: #06596c;
+  --core-color-blueberry-900: #084350;
   --core-color-cherry-50: #fff2ea;
   --core-color-cherry-100: #f7e1d2;
   --core-color-cherry-200: #eec0a5;
@@ -125,6 +50,16 @@
   --core-color-kiwi-700: #0ca161;
   --core-color-kiwi-800: #099150;
   --core-color-kiwi-900: #078141;
+  --core-color-neutral-50: #f5f3f3;
+  --core-color-neutral-100: #eae7e7;
+  --core-color-neutral-200: #d6d4d3;
+  --core-color-neutral-300: #bdbab9;
+  --core-color-neutral-400: #aaa8a6;
+  --core-color-neutral-500: #989693;
+  --core-color-neutral-600: #7d7c79;
+  --core-color-neutral-700: #62625f;
+  --core-color-neutral-800: #474745;
+  --core-color-neutral-900: #2b2c2b;
   --core-color-plum-50: #f4ecfe;
   --core-color-plum-100: #e5d5fb;
   --core-color-plum-200: #cfb1f6;
@@ -135,8 +70,84 @@
   --core-color-plum-700: #5c27a1;
   --core-color-plum-800: #4c1b8c;
   --core-color-plum-900: #3c1471;
+  --core-color-black: #000000;
+  --core-color-white: #ffffff;
+  --color-action-border-ondark: #ffffff;
+  --color-action-text-ondark: #ffffff;
+  --color-action-graphics-ondark: #ffffff;
+  --color-notification-background-info: #e4f7f9;
+  --color-notification-background-error: #fff2ea;
+  --color-notification-background-warning: #fdf8df;
+  --color-notification-background-success: #e6f8ee;
+  --color-notification-border-info: #08667c;
+  --color-notification-border-error: #a31f0e;
+  --color-notification-border-warning: #ab7c00;
+  --color-notification-border-success: #078141;
+  --color-notification-graphics-info: #08667c;
+  --color-notification-graphics-error: #a31f0e;
+  --color-notification-graphics-warning: #ab7c00;
+  --color-notification-graphics-success: #078141;
+  --color-notification-status-info: #188097;
+  --color-notification-status-error: #c83521;
+  --color-notification-status-warning: #ebc840;
+  --color-notification-status-success: #099150;
+  --color-disabled-background: #d6d4d3;
+  --color-disabled-text: #62625f;
+  --color-disabled-border: #7d7c79;
   --color-destructive-background-emphasized: #f7e1d2;
   --color-destructive-background-normal: #fff2ea;
+  --color-destructive-graphics-normal: #c83521;
+  --color-destructive-graphics-hover: #b62e1c;
+  --color-destructive-text-normal: #b62e1c;
+  --color-destructive-text-hover: #a31f0e;
+  --color-help-background-normal: #f4ecfe;
+  --color-help-graphics-normal: #5c27a1;
+  --color-help-border-normal: #5c27a1;
+  --color-disabled-graphics: #62625f;
+  --color-destructive-border-normal: #c83521;
+  --color-action-border-ondark-hover: #e4f7f9;
+  --color-action-graphics-ondark-hover: #e4f7f9;
+
+  /* Hoverfarge for bakgrunn på interaktive elementer - onLight */
+  --color-action-background-transparent-onlight-hover: #126f8721;
+
+  /* Hoverfarge for bakgrunn på interaktive elementer - onLight selected */
+  --color-action-background-transparent-onlight-hoverselected: #126f872b;
+  --color-action-border-ondark-focus: #ffffff;
+  --color-disabled-border-ondark: #d6d4d3;
+  --color-disabled-graphics-ondark: #d6d4d3;
+  --color-disabled-text-ondark: #ffffff;
+  --color-action-text-onlight: #126f87;
+  --color-action-text-onlight-hover: #08667c;
+  --color-action-border-onlight: #188097;
+  --color-action-border-onlight-hover: #08667c;
+  --color-action-border-onlight-focus: #000000;
+  --color-action-background-ondark: #ffffff;
+  --color-action-background-ondark-hover: #e4f7f9;
+  --color-action-background-ondark-selected: #cae7ed;
+  --color-action-background-ondark-hoverselected: #afdae3;
+  --color-action-background-onlight: #188097;
+  --color-action-background-onlight-hover: #08667c;
+
+  /* Hoverfarge for bakgrunn på interaktive elementer - onDark */
+  --color-action-background-transparent-ondark-hover: #00000026;
+
+  /* Hoverfarge for bakgrunn på interaktive elementer - onDark selected */
+  --color-action-background-transparent-ondark-hoverselected: #000000bf;
+  --color-base-background-blueberry: #e4f7f9;
+  --color-base-background-cherry: #fff2ea;
+  --color-base-background-neutral: #f5f3f3;
+  --color-base-background-white: #ffffff;
+  --color-base-background-dark-blueberry: #188097;
+  --color-base-background-dark-cherry: #c83521;
+  --color-base-background-dark-neutral: #2b2c2b;
+  --color-base-text-onlight: #000000;
+  --color-base-text-ondark: #ffffff;
+  --color-base-border-ondark: #d6d4d3;
+  --color-base-border-onlight: #7d7c79;
+  --color-base-border-onlight-emphasized: #62625f;
+  --color-base-graphics-onlight: #000000;
+  --color-base-graphics-ondark: #ffffff;
   --brandcolor-white: #ffffff;
   --brandcolor-black: #000000;
   --brandcolor-neutral-verylight: #f5f3f3;
@@ -156,17 +167,6 @@
   --brandcolor-cherry-medium: #c83521;
   --brandcolor-cherry-mediumdark: #b62e1c;
   --brandcolor-cherry-dark: #a31f0e;
-  --color-notification-status-info: #188097;
-  --color-notification-status-error: #c83521;
-  --color-destructive-border-normal: #c83521;
-  --color-action-border-ondark-hover: #e4f7f9;
-
-  /* Hoverfarge for bakgrunn på interaktive elementer - onDark */
-  --color-action-background-transparent-ondark-hover: #00000026;
-
-  /* Hoverfarge for bakgrunn på interaktive elementer - onDark selected */
-  --color-action-background-transparent-ondark-hoverselected: #000000bf;
-  --color-base-background-dark-neutral: #2b2c2b;
 
   /* Placeholdertext in input- and textarea-controls */
   --color-placeholder-text-onlight: #62625f;
@@ -177,10 +177,10 @@
 
   /* In a few cases where coloured text is required to stress the semantics of an information notification text */
   --color-notification-text-info: #08667c;
-  --color-notification-text-warning: #916500;
 
   /* In a few cases where coloured text is required to stress the semantics of an error notification text */
   --color-notification-text-error: #a31f0e;
+  --color-notification-text-warning: #916500;
   --color-notification-text-success: #078141;
   --color-base-border-neutral-emphasized: #bdbab9;
   --color-notification-status-draft: #7d7c79;
@@ -193,9 +193,47 @@
 
   /* Background outside of modal and bottomsheet to mask inactive screen-area */
   --color-shadow-pagemask: #2c2b2cb8;
-  --color-help-border-subtle-wcag: #9153e2;
+  --color-help-border-subtle-wcag: #9862df;
   --color-help-graphics-dark: #4c1b8c;
   --color-help-border-dark: #4c1b8c;
   --color-help-graphics-verydark: #3c1471;
   --color-help-border-verydark: #3c1471;
+  --color-action-background-onlight-active: #06596c;
+  --color-action-background-like-transparent-but-opaque-onlight-hover: #e0ecef;
+  --color-action-background-like-transparent-but-opaque-onlight-hoverselected: #d7e7eb;
+  --color-action-background-stroke-onlight: #126f87;
+  --component-stickynote-background-normal-light: #fdf8df;
+  --component-stickynote-background-normal-medium: #fcf2bf;
+  --component-stickynote-background-normal-dark: #f9ea9f;
+  --component-stickynote-border-normal: #916500;
+  --component-stickynote-border-error: #d56147;
+  --component-stickynote-background-error-dark: #eec0a5;
+  --component-stickynote-background-error-medium: #f7e1d2;
+  --component-stickynote-background-error-light: #fff2ea;
+  --color-base-text-onlight-subdued: #000000;
+  --component-stickynote-background-fold-error-dark: #e39376;
+  --component-stickynote-background-fold-error-light: #f7e1d2;
+  --component-stickynote-background-fold-error-medium: #eec0a5;
+  --component-stickynote-background-fold-normal-light: #fcf2bf;
+  --component-stickynote-background-fold-normal-medium: #f9ea9f;
+  --component-stickynote-background-fold-normal-dark: #ebc840;
+  --component-stickynote-background-transparent-onlight-hover: #ebc84021;
+  --component-stickynote-background-transparent-onlight-active: #ebc8404d;
+  --component-stickynote-background-transparent-error-hover: #d5614721;
+  --component-stickynote-background-transparent-error-active: #d5614740;
+  --component-listelements-background-neutral-light: #f5f3f3;
+  --component-listelements-background-neutral-medium: #eae7e7;
+  --component-listelements-background-neutral-dark: #d6d4d3;
+  --component-listelements-border-neutral-light: #eae7e7;
+  --component-listelements-background-blueberry-light: #e4f7f9;
+  --component-listelements-background-blueberry-medium: #cae7ed;
+  --component-listelements-border-blueberry-light: #cae7ed;
+  --component-listelements-background-blueberry-dark: #afdae3;
+  --component-listelements-border-blueberry-normal: #188097;
+  --component-listelements-background-cherry-light: #fff2ea;
+  --component-listelements-background-cherry-medium: #f7e1d2;
+  --component-listelements-border-cherry-light: #f7e1d2;
+  --component-listelements-background-cherry-dark: #eec0a5;
+  --component-listelements-border-cherry-normal: #d56147;
+  --component-listelements-border-neutral-normal: #7d7c79;
 }

package/package.json

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

package/resources/HN.Designsystem.Drawer.en-GB.json.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  "ariaLabelCloseBtn": "Close"
+}
+;
+
+export default _default;

package/resources/HN.Designsystem.Drawer.nb-NO.json.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  "ariaLabelCloseBtn": "Lukk"
+}
+;
+
+export default _default;

package/resources/HN.Designsystem.FormFieldTag.nb-NO.json.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+  "allRequired": "Alle felt må fylles ut",
+  "requiredField": "Må fylles ut",
+  "optional": "Valgfritt"
+}
+;
+
+export default _default;

package/resources/HN.Designsystem.Tabs.en-GB.json.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+  "ariaLabelRightButton": "Scroll right",
+  "ariaLabelLeftButton": "Scroll left"
+}
+;
+
+export default _default;

package/resources/HN.Designsystem.Tabs.nb-NO.json.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+  "ariaLabelRightButton": "Scroll til høyre",
+  "ariaLabelLeftButton": "Scroll til venstre"
+}
+;
+
+export default _default;