@helsenorge/designsystem-react 7.7.0 → 7.8.1

package/components/Tabs/TabList/index.js

@@ -0,0 +1,5 @@
+import a from "./TabList.js";
+export {
+  a as default
+};
+//# sourceMappingURL=index.js.map

package/components/Tabs/TabList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/Tabs/TabList/styles.module.scss

@@ -0,0 +1,109 @@
+@import '../../../scss/supernova/styles/colors';
+
+.tab-list {
+  $tab-list: &;
+  $colors: 'blueberry', 'neutral', 'white';
+
+  display: flex;
+  flex-direction: row;
+  gap: 0.25rem;
+  list-style-type: none;
+  white-space: nowrap;
+  overflow-x: initial;
+  overflow-y: initial;
+  height: 3rem;
+  z-index: 0;
+  margin: 0;
+  margin-bottom: -1px;
+
+  &__tab {
+    display: flex;
+    align-items: start;
+    background-color: transparent;
+    height: 3rem;
+    text-align: start;
+    font-size: 1.25rem;
+    text-decoration: none;
+    padding: 0.5rem 1.5rem;
+    color: var(--color-action-text-onlight);
+    border: 1px solid var(--color-action-border-onlight);
+    border-bottom: 0;
+    border-radius: 0.5rem 0.5rem 0 0;
+    position: relative;
+    z-index: 0;
+
+    @each $color in $colors {
+      &--#{$color} {
+        background-color: var(--color-base-background-#{$color});
+      }
+    }
+
+    &--selected {
+      overflow: visible;
+      z-index: 2;
+      border-color: var(--color-action-border-onlight-focus);
+      color: var(--color-base-text-onlight);
+      background-color: var(--color-base-background-white);
+    }
+
+    &__title-and-icon {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      gap: 0.5rem;
+      height: 2rem;
+    }
+  }
+
+  &--normal {
+    padding-left: 1rem;
+  }
+
+  &--framed {
+    padding-left: 0;
+
+    #{$tab-list}__tab {
+      background-color: var(--color-base-background-white);
+
+      &--first {
+        // This is in order to look nice when the first tab is not selected
+        height: 3.5rem;
+      }
+
+      &--selected {
+        height: 3rem;
+      }
+    }
+
+    @each $color in $colors {
+      .tab-list__tab--selected#{$tab-list}__tab--#{$color} {
+        background-color: var(--color-base-background-#{$color});
+      }
+    }
+  }
+
+  // Because the button states should be the same for all types
+  .tab-list__tab {
+    &:hover {
+      background-color: var(--color-action-background-ondark-hover);
+
+      &#{$tab-list}__tab--blueberry {
+        background-color: var(--color-action-background-ondark-selected);
+      }
+    }
+
+    &:active {
+      background-color: var(--color-action-background-ondark-selected);
+
+      &#{$tab-list}__tab--blueberry {
+        background-color: var(--color-action-background-ondark-hoverselected);
+      }
+    }
+
+    &:focus-visible {
+      background-color: var(--color-base-background-blueberry);
+      outline: 4px solid var(--color-action-border-onlight-focus);
+      outline-offset: -4px;
+    }
+  }
+}

package/components/Tabs/TabList/styles.module.scss.d.ts

@@ -0,0 +1,18 @@
+export type Styles = {
+  'tab-list': string;
+  'tab-list__tab': string;
+  'tab-list__tab__title-and-icon': string;
+  'tab-list__tab--blueberry': string;
+  'tab-list__tab--first': string;
+  'tab-list__tab--neutral': string;
+  'tab-list__tab--selected': string;
+  'tab-list__tab--white': string;
+  'tab-list--framed': string;
+  'tab-list--normal': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/Tabs/TabPanel/TabPanel.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TabsColors, TabsType } from '../Tabs';
+interface TabPanelProps {
+    color?: TabsColors;
+    type?: TabsType;
+    isFirst?: boolean;
+}
+declare const TabPanel: React.FC<TabPanelProps>;
+export default TabPanel;

package/components/Tabs/TabPanel/TabPanel.js

@@ -0,0 +1,13 @@
+import r from "react";
+import o from "classnames";
+import a from "../../Tabs/TabPanel/styles.module.scss";
+const m = ({ children: e, color: t = "white", type: l = "normal", isFirst: s = !1 }) => {
+  const n = o(a["tab-panel"], a[`tab-panel--${t}`], a[`tab-panel--${l}`], {
+    [a["tab-panel--first"]]: s
+  });
+  return /* @__PURE__ */ r.createElement("div", { className: n }, e);
+}, f = m;
+export {
+  f as default
+};
+//# sourceMappingURL=TabPanel.js.map

package/components/Tabs/TabPanel/TabPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanel.js","sources":["../../../../src/components/Tabs/TabPanel/TabPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { TabsColors, TabsType } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabPanelProps {\n  color?: TabsColors;\n  type?: TabsType;\n  isFirst?: boolean;\n}\n\nconst TabPanel: React.FC<TabPanelProps> = ({ children, color = 'white', type = 'normal', isFirst = false }) => {\n  const tabPanelClasses = classNames(styles['tab-panel'], styles[`tab-panel--${color}`], styles[`tab-panel--${type}`], {\n    [styles['tab-panel--first']]: isFirst,\n  });\n  return <div className={tabPanelClasses}>{children}</div>;\n};\n\nexport default TabPanel;\n"],"names":["TabPanel","children","color","type","isFirst","tabPanelClasses","classNames","styles","React","TabPanel$1"],"mappings":";;;AAcA,MAAMA,IAAoC,CAAC,EAAE,UAAAC,GAAU,OAAAC,IAAQ,SAAS,MAAAC,IAAO,UAAU,SAAAC,IAAU,SAAY;AAC7G,QAAMC,IAAkBC,EAAWC,EAAO,WAAW,GAAGA,EAAO,cAAcL,CAAK,EAAE,GAAGK,EAAO,cAAcJ,CAAI,EAAE,GAAG;AAAA,IACnH,CAACI,EAAO,kBAAkB,CAAC,GAAGH;AAAA,EAAA,CAC/B;AACD,SAAQI,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWH,EAAA,GAAkBJ,CAAS;AACpD,GAEAQ,IAAeT;"}

package/components/Tabs/TabPanel/index.d.ts

@@ -0,0 +1,3 @@
+import TabPanel from './TabPanel';
+export * from './TabPanel';
+export default TabPanel;

package/components/Tabs/TabPanel/index.js

@@ -0,0 +1,5 @@
+import e from "./TabPanel.js";
+export {
+  e as default
+};
+//# sourceMappingURL=index.js.map

package/components/Tabs/TabPanel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/Tabs/TabPanel/styles.module.scss

@@ -0,0 +1,37 @@
+@use 'sass:map';
+@import '../../../scss/spacers';
+@import '../../../scss/palette';
+@import '../../../scss/font-settings';
+@import '../../../scss/breakpoints';
+@import '../../../scss/supernova/styles/colors';
+
+.tab-panel {
+  $tab-panel: &;
+
+  border-top: 1px solid var(--color-action-border-onlight-focus);
+  padding: 2rem;
+  position: relative;
+  z-index: 1;
+
+  $colors: 'blueberry', 'neutral', 'white';
+
+  &--normal {
+    padding: 0;
+  }
+
+  &--framed {
+    padding: 2rem;
+    border: 1px solid var(--color-action-border-onlight-focus);
+    border-radius: 0.5rem;
+
+    &#{$tab-panel}--first {
+      border-radius: 0 0.5rem 0.5rem;
+    }
+
+    @each $color in $colors {
+      &#{$tab-panel}--#{$color} {
+        background-color: var(--color-base-background-#{$color});
+      }
+    }
+  }
+}

package/components/Tabs/TabPanel/styles.module.scss.d.ts

@@ -0,0 +1,15 @@
+export type Styles = {
+  'tab-panel': string;
+  'tab-panel--blueberry': string;
+  'tab-panel--first': string;
+  'tab-panel--framed': string;
+  'tab-panel--neutral': string;
+  'tab-panel--normal': string;
+  'tab-panel--white': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/Tabs/Tabs.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import Tab from './Tab';
+import { PaletteNames } from '../../theme/palette';
+export type { TabProps } from './Tab';
+export type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;
+export type TabsType = 'normal' | 'framed';
+export interface TabsProps {
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Sets the color of the tabs. Default: white */
+    color?: TabsColors;
+    /** Sets the visual type of the tabs */
+    type?: TabsType;
+    /** Controlled state for Tabs component */
+    activeTab?: number;
+}
+declare const TabsRoot: React.FC<TabsProps>;
+type TabsComponent = typeof TabsRoot & {
+    Tab: typeof Tab;
+};
+declare const Tabs: TabsComponent;
+export default Tabs;

package/components/Tabs/Tabs.js

@@ -0,0 +1,19 @@
+import t, { useState as T } from "react";
+import f from "./Tab.js";
+import u from "./TabList/TabList.js";
+import p from "./TabPanel/TabPanel.js";
+import C from "../Tabs/styles.module.scss";
+const y = ({ children: s, testId: m, color: n = "white", type: r = "normal", activeTab: l }) => {
+  const i = l !== void 0, [b, c] = T(0), d = (o) => {
+    i || c(o);
+  }, e = i ? l : b;
+  return /* @__PURE__ */ t.createElement("div", { className: C.tabs, "data-testid": m }, /* @__PURE__ */ t.createElement(u, { onTabListClick: (o) => d(o), selectedTab: e, color: n, type: r }, s), /* @__PURE__ */ t.createElement(p, { color: n, type: r, isFirst: e == 0 }, t.Children.toArray(s)[e]));
+}, a = y;
+a.displayName = "Tabs";
+a.Tab = f;
+a.Tab.displayName = "Tabs.Tab";
+const x = a;
+export {
+  x as default
+};
+//# sourceMappingURL=Tabs.js.map

package/components/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport { PaletteNames } from '../../theme/palette';\nexport type { TabProps } from './Tab';\n\nimport styles from './styles.module.scss';\n\nexport type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;\n\nexport type TabsType = 'normal' | 'framed';\n\nexport interface TabsProps {\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the color of the tabs. Default: white */\n  color?: TabsColors;\n  /** Sets the visual type of the tabs */\n  type?: TabsType;\n  /** Controlled state for Tabs component */\n  activeTab?: number;\n}\n\nconst TabsRoot: React.FC<TabsProps> = ({ children, testId, color = 'white', type = 'normal', activeTab }) => {\n  const isControlled = activeTab !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(0);\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={styles.tabs} data-testid={testId}>\n      <TabList onTabListClick={(index: number) => onValueChange(index)} selectedTab={activeTabIndex} color={color} type={type}>\n        {children}\n      </TabList>\n      <TabPanel color={color} type={type} isFirst={activeTabIndex == 0}>\n        {React.Children.toArray(children)[activeTabIndex]}\n      </TabPanel>\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":["TabsRoot","children","testId","color","type","activeTab","isControlled","uncontrolledValue","setUncontrolledValue","useState","onValueChange","newValue","activeTabIndex","React","styles","TabList","index","TabPanel","Tabs","Tab","Tabs$1"],"mappings":";;;;;AAyBA,MAAMA,IAAgC,CAAC,EAAE,UAAAC,GAAU,QAAAC,GAAQ,OAAAC,IAAQ,SAAS,MAAAC,IAAO,UAAU,WAAAC,QAAgB;AAC3G,QAAMC,IAAeD,MAAc,QAC7B,CAACE,GAAmBC,CAAoB,IAAIC,EAAS,CAAC,GAEtDC,IAAgB,CAACC,MAA2B;AAChD,IAAKL,KACHE,EAAqBG,CAAQ;AAAA,EAC/B,GAGIC,IAAiBN,IAAeD,IAAYE;AAElD,SACGM,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWC,EAAO,MAAM,eAAaZ,EAAA,GACvCW,gBAAAA,EAAA,cAAAE,GAAA,EAAQ,gBAAgB,CAACC,MAAkBN,EAAcM,CAAK,GAAG,aAAaJ,GAAgB,OAAAT,GAAc,MAAAC,EAAA,GAC1GH,CACH,GACAY,gBAAAA,EAAA,cAACI,GAAS,EAAA,OAAAd,GAAc,MAAAC,GAAY,SAASQ,KAAkB,EAC5D,GAAAC,EAAM,SAAS,QAAQZ,CAAQ,EAAEW,CAAc,CAClD,CACF;AAEJ,GAKMM,IAAOlB;AACbkB,EAAK,cAAc;AACnBA,EAAK,MAAMC;AACXD,EAAK,IAAI,cAAc;AAEvB,MAAAE,IAAeF;"}

package/components/Tabs/Tabs.stories.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.FC<import("./Tabs").TabsProps> & {
+        Tab: React.FC<import("./Tab").TabProps>;
+    };
+    subcomponents: {
+        Tab: React.FC<import("./Tab").TabProps>;
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+            page: () => React.JSX.Element;
+        };
+    };
+    args: {
+        color: "white";
+        type: "normal";
+    };
+    argTypes: {
+        color: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        testId: {
+            control: string;
+            description: string;
+        };
+        type: {
+            control: string;
+            options: string[];
+            describtion: string;
+        };
+        activeTab: {
+            control: string;
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithIcon: Story;
+export declare const Framed: Story;
+export declare const Colors: Story;
+export declare const Controlled: Story;

package/components/Tabs/index.d.ts

@@ -0,0 +1,3 @@
+import Tabs from './Tabs';
+export * from './Tabs';
+export default Tabs;

package/components/Tabs/index.js

@@ -0,0 +1,5 @@
+import o from "./Tabs.js";
+export {
+  o as default
+};
+//# sourceMappingURL=index.js.map

package/components/Tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/Tabs/styles.module.scss

@@ -0,0 +1,3 @@
+.tabs {
+  background-color: transparent;
+}

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

@@ -0,0 +1,9 @@
+export type Styles = {
+  tabs: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/Tile/Tile.stories.d.ts

@@ -12,23 +12,47 @@ declare const meta: {
         };
     };
     args: {
+        title: React.JSX.Element;
+        icon: React.JSX.Element;
         fixed: false;
         highlighted: false;
         href: string;
         description: string;
     };
     argTypes: {
-        fixed: {
+        children: {
+            control: string;
+        };
+        className: {
+            control: string;
+            description: string;
+        };
+        icon: {
+            control: string;
+            description: string;
+        };
+        title: {
             control: string;
+            description: string;
         };
         highlighted: {
             control: string;
+            description: string;
+        };
+        description: {
+            control: string;
+            description: string;
+        };
+        fixed: {
+            control: string;
+            description: string;
         };
         href: {
             control: string;
         };
-        description: {
+        testId: {
             control: string;
+            description: string;
         };
     };
 };

package/constants.d.ts

@@ -112,6 +112,10 @@ export declare enum KeyboardEventKey {
     Escape = "Escape",
     ArrowDown = "ArrowDown",
     ArrowUp = "ArrowUp",
+    ArrowRight = "ArrowRight",
+    ArrowLeft = "ArrowLeft",
     Home = "Home",
-    End = "End"
+    End = "End",
+    Space = " ",
+    Tab = "Tab"
 }

package/constants.js

@@ -1,6 +1,6 @@
 var e = /* @__PURE__ */ ((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 = /* @__PURE__ */ ((r) => (r[r.Modal = 13e5] = "Modal", r[r.PopOver = 11e3] = "PopOver", r[r.ExpanderTrigger = 1e4] = "ExpanderTrigger", r))(o || {});
 const g = 12;
-var p = /* @__PURE__ */ ((r) => (r.onwhite = "onwhite", r.ongrey = "ongrey", r.onblueberry = "onblueberry", r.ondark = "ondark", r.oninvalid = "oninvalid", r))(p || {}), a = /* @__PURE__ */ ((r) => (r.medium = "medium", r.large = "large", r))(a || {}), t = /* @__PURE__ */ ((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.EmptyState = "empty-state", r.Expander = "expander", r.ExpanderHierarchy = "expander-hierarchy", r.ExpanderHierarchyExpander = "expander-hierarchy-expander", r.ExpanderList = "expander-list", r.ExpanderListExpander = "expander-list-expander", r.FormGroup = "form-group", r.FormLayout = "form-layout", r.HelpBubble = "help-bubble", r.HelpQuestion = "help-question", r.HighlightBox = "highlight-box", r.Icon = "icon", r.Illustration = "Illustration", 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.PromoPanel = "promo-panel", r.RadioButton = "radio-button", r.Select = "select", r.SharingStatus = "sharing-status", r.Slider = "slider", r.Spacer = "spacer", r.StatusDot = "status-dot", r.Step = "step", r.StepButtons = "step-buttons", r.Stepper = "stepper", 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))(t || {}), u = /* @__PURE__ */ ((r) => (r.Enter = "Enter", r.Escape = "Escape", r.ArrowDown = "ArrowDown", r.ArrowUp = "ArrowUp", r.Home = "Home", r.End = "End", r))(u || {});
+var p = /* @__PURE__ */ ((r) => (r.onwhite = "onwhite", r.ongrey = "ongrey", r.onblueberry = "onblueberry", r.ondark = "ondark", r.oninvalid = "oninvalid", r))(p || {}), a = /* @__PURE__ */ ((r) => (r.medium = "medium", r.large = "large", r))(a || {}), t = /* @__PURE__ */ ((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.EmptyState = "empty-state", r.Expander = "expander", r.ExpanderHierarchy = "expander-hierarchy", r.ExpanderHierarchyExpander = "expander-hierarchy-expander", r.ExpanderList = "expander-list", r.ExpanderListExpander = "expander-list-expander", r.FormGroup = "form-group", r.FormLayout = "form-layout", r.HelpBubble = "help-bubble", r.HelpQuestion = "help-question", r.HighlightBox = "highlight-box", r.Icon = "icon", r.Illustration = "Illustration", 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.PromoPanel = "promo-panel", r.RadioButton = "radio-button", r.Select = "select", r.SharingStatus = "sharing-status", r.Slider = "slider", r.Spacer = "spacer", r.StatusDot = "status-dot", r.Step = "step", r.StepButtons = "step-buttons", r.Stepper = "stepper", 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))(t || {}), u = /* @__PURE__ */ ((r) => (r.Enter = "Enter", r.Escape = "Escape", r.ArrowDown = "ArrowDown", r.ArrowUp = "ArrowUp", r.ArrowRight = "ArrowRight", r.ArrowLeft = "ArrowLeft", r.Home = "Home", r.End = "End", r.Space = " ", r.Tab = "Tab", r))(u || {});
 export {
   g as AVERAGE_CHARACTER_WIDTH_PX,
   t as AnalyticsId,

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  PopOver = 11000,\n  ExpanderTrigger = 10000,\n  // TODO: Skille mellom ExpanderTrigger isSticky og isHovered? Skulle tro isHovered trenger vesentlig mindre z-index\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 FormSize {\n  medium = 'medium',\n  large = 'large',\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  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  FormGroup = 'form-group',\n  FormLayout = 'form-layout',\n  HelpBubble = 'help-bubble',\n  HelpQuestion = 'help-question',\n  HighlightBox = 'highlight-box',\n  Icon = 'icon',\n  Illustration = 'Illustration',\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  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  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","FormSize","AnalyticsId","KeyboardEventKey"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAAA,EAAA,UAAU,EAAV,IAAA,WACAA,EAAAA,EAAA,SAAS,EAAT,IAAA,UACAA,EAAAA,EAAA,QAAQ,EAAR,IAAA,SACAA,EAAAA,EAAA,SAAS,EAAT,IAAA,UACAA,EAAAA,EAAA,QAAQ,EAAR,IAAA,SACAA,EAAAA,EAAA,SAAS,GAAT,IAAA,UANUA,IAAAA,KAAA,CAAA,CAAA,GASAC,sBAAAA,OACVA,EAAAA,EAAA,QAAQ,IAAR,IAAA,SACAA,EAAAA,EAAA,UAAU,IAAV,IAAA,WACAA,EAAAA,EAAA,kBAAkB,GAAlB,IAAA,mBAHUA,IAAAA,KAAA,CAAA,CAAA;AAOL,MAAMC,IAA6B;AAyC9B,IAAAC,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,SAAS,UACTA,EAAA,cAAc,eACdA,EAAA,SAAS,UACTA,EAAA,YAAY,aALFA,IAAAA,KAAA,CAAA,CAAA,GAQAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACVA,EAAA,aAAa,eACbA,EAAA,SAAS,UACTA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,WAAW,YACXA,EAAA,QAAQ,SACRA,EAAA,oBAAoB,sBACpBA,EAAA,WAAW,YACXA,EAAA,UAAU,WACVA,EAAA,aAAa,eACbA,EAAA,WAAW,YACXA,EAAA,oBAAoB,sBACpBA,EAAA,4BAA4B,+BAC5BA,EAAA,eAAe,iBACfA,EAAA,uBAAuB,0BACvBA,EAAA,YAAY,cACZA,EAAA,aAAa,eACbA,EAAA,aAAa,eACbA,EAAA,eAAe,iBACfA,EAAA,eAAe,iBACfA,EAAA,OAAO,QACPA,EAAA,eAAe,gBACfA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SACRA,EAAA,OAAO,QACPA,EAAA,WAAW,aACXA,EAAA,OAAO,QACPA,EAAA,SAAS,UACTA,EAAA,OAAO,QACPA,EAAA,QAAQ,SACRA,EAAA,oBAAoB,sBACpBA,EAAA,QAAQ,SACRA,EAAA,YAAY,cACZA,EAAA,UAAU,YACVA,EAAA,UAAU,YACVA,EAAA,SAAS,UACTA,EAAA,aAAa,eACbA,EAAA,cAAc,gBACdA,EAAA,SAAS,UACTA,EAAA,gBAAgB,kBAChBA,EAAA,SAAS,UACTA,EAAA,SAAS,UACTA,EAAA,YAAY,cACZA,EAAA,OAAO,QACPA,EAAA,cAAc,gBACdA,EAAA,UAAU,WACVA,EAAA,WAAW,YACXA,EAAA,QAAQ,SACRA,EAAA,MAAM,OACNA,EAAA,UAAU,YACVA,EAAA,WAAW,YACXA,EAAA,OAAO,QACPA,EAAA,QAAQ,SACRA,EAAA,UAAU,WACVA,EAAA,UAAU,WACVA,EAAA,aAAa,cAxDHA,IAAAA,KAAA,CAAA,CAAA,GA2DAC,sBAAAA,OACVA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,YAAY,aACZA,EAAA,UAAU,WACVA,EAAA,OAAO,QACPA,EAAA,MAAM,OANIA,IAAAA,KAAA,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  PopOver = 11000,\n  ExpanderTrigger = 10000,\n  // TODO: Skille mellom ExpanderTrigger isSticky og isHovered? Skulle tro isHovered trenger vesentlig mindre z-index\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 FormSize {\n  medium = 'medium',\n  large = 'large',\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  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  FormGroup = 'form-group',\n  FormLayout = 'form-layout',\n  HelpBubble = 'help-bubble',\n  HelpQuestion = 'help-question',\n  HighlightBox = 'highlight-box',\n  Icon = 'icon',\n  Illustration = 'Illustration',\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  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  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  ArrowRight = 'ArrowRight',\n  ArrowLeft = 'ArrowLeft',\n  Home = 'Home',\n  End = 'End',\n  Space = ' ',\n  Tab = 'Tab',\n}\n"],"names":["IconSize","ZIndex","AVERAGE_CHARACTER_WIDTH_PX","FormMode","FormSize","AnalyticsId","KeyboardEventKey"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAAA,EAAA,UAAU,EAAV,IAAA,WACAA,EAAAA,EAAA,SAAS,EAAT,IAAA,UACAA,EAAAA,EAAA,QAAQ,EAAR,IAAA,SACAA,EAAAA,EAAA,SAAS,EAAT,IAAA,UACAA,EAAAA,EAAA,QAAQ,EAAR,IAAA,SACAA,EAAAA,EAAA,SAAS,GAAT,IAAA,UANUA,IAAAA,KAAA,CAAA,CAAA,GASAC,sBAAAA,OACVA,EAAAA,EAAA,QAAQ,IAAR,IAAA,SACAA,EAAAA,EAAA,UAAU,IAAV,IAAA,WACAA,EAAAA,EAAA,kBAAkB,GAAlB,IAAA,mBAHUA,IAAAA,KAAA,CAAA,CAAA;AAOL,MAAMC,IAA6B;AAyC9B,IAAAC,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,SAAS,UACTA,EAAA,cAAc,eACdA,EAAA,SAAS,UACTA,EAAA,YAAY,aALFA,IAAAA,KAAA,CAAA,CAAA,GAQAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACVA,EAAA,aAAa,eACbA,EAAA,SAAS,UACTA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,WAAW,YACXA,EAAA,QAAQ,SACRA,EAAA,oBAAoB,sBACpBA,EAAA,WAAW,YACXA,EAAA,UAAU,WACVA,EAAA,aAAa,eACbA,EAAA,WAAW,YACXA,EAAA,oBAAoB,sBACpBA,EAAA,4BAA4B,+BAC5BA,EAAA,eAAe,iBACfA,EAAA,uBAAuB,0BACvBA,EAAA,YAAY,cACZA,EAAA,aAAa,eACbA,EAAA,aAAa,eACbA,EAAA,eAAe,iBACfA,EAAA,eAAe,iBACfA,EAAA,OAAO,QACPA,EAAA,eAAe,gBACfA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SACRA,EAAA,OAAO,QACPA,EAAA,WAAW,aACXA,EAAA,OAAO,QACPA,EAAA,SAAS,UACTA,EAAA,OAAO,QACPA,EAAA,QAAQ,SACRA,EAAA,oBAAoB,sBACpBA,EAAA,QAAQ,SACRA,EAAA,YAAY,cACZA,EAAA,UAAU,YACVA,EAAA,UAAU,YACVA,EAAA,SAAS,UACTA,EAAA,aAAa,eACbA,EAAA,cAAc,gBACdA,EAAA,SAAS,UACTA,EAAA,gBAAgB,kBAChBA,EAAA,SAAS,UACTA,EAAA,SAAS,UACTA,EAAA,YAAY,cACZA,EAAA,OAAO,QACPA,EAAA,cAAc,gBACdA,EAAA,UAAU,WACVA,EAAA,WAAW,YACXA,EAAA,QAAQ,SACRA,EAAA,MAAM,OACNA,EAAA,UAAU,YACVA,EAAA,WAAW,YACXA,EAAA,OAAO,QACPA,EAAA,QAAQ,SACRA,EAAA,UAAU,WACVA,EAAA,UAAU,WACVA,EAAA,aAAa,cAxDHA,IAAAA,KAAA,CAAA,CAAA,GA2DAC,sBAAAA,OACVA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,YAAY,aACZA,EAAA,UAAU,WACVA,EAAA,aAAa,cACbA,EAAA,YAAY,aACZA,EAAA,OAAO,QACPA,EAAA,MAAM,OACNA,EAAA,QAAQ,KACRA,EAAA,MAAM,OAVIA,IAAAA,KAAA,CAAA,CAAA;"}

package/docs/index.js

@@ -1,14 +1,14 @@
 import * as e from "react";
 import "../node_modules/@storybook/addon-docs/dist/chunk-HLWAVYOI.js";
-import { ArgTypes as n, Title as o, Subtitle as l, Description as i, Primary as c, Stories as s } from "../node_modules/@storybook/blocks/dist/index.js";
-const m = () => (window.location != window.parent.location ? document.referrer : document.location.href).startsWith("https://frankenstein.helsenorge.design") || window.location.search.includes("isSupernova"), w = (t) => {
-  if (m())
-    return /* @__PURE__ */ e.createElement(n, { of: t.component });
-  const r = new URLSearchParams(window.location.search), a = `${window.location.pathname}?id=${r.get("id")}&viewMode=docs`;
-  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { style: { display: "flex", justifyContent: "space-between" } }, /* @__PURE__ */ e.createElement(o, null), /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("a", { target: "_blank", href: a, rel: "noreferrer" }, "Åpne i ny fane"))), /* @__PURE__ */ e.createElement(l, null), /* @__PURE__ */ e.createElement(i, null), /* @__PURE__ */ e.createElement(c, null), /* @__PURE__ */ e.createElement(n, { of: t.component }), !t.hideStories && /* @__PURE__ */ e.createElement(s, null));
+import { ArgTypes as l, Title as a, Subtitle as o, Description as i, Primary as s, Controls as c, Stories as m } from "../node_modules/@storybook/blocks/dist/index.js";
+const u = () => (window.location != window.parent.location ? document.referrer : document.location.href).startsWith("https://frankenstein.helsenorge.design") || window.location.search.includes("isSupernova"), w = (t) => {
+  if (u())
+    return /* @__PURE__ */ e.createElement(l, null);
+  const n = new URLSearchParams(window.location.search), r = `${window.location.pathname}?id=${n.get("id")}&viewMode=docs`;
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { style: { display: "flex", justifyContent: "space-between" } }, /* @__PURE__ */ e.createElement(a, null), /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("a", { target: "_blank", href: r, rel: "noreferrer" }, "Åpne i ny fane"))), /* @__PURE__ */ e.createElement(o, null), /* @__PURE__ */ e.createElement(i, null), /* @__PURE__ */ e.createElement(s, null), /* @__PURE__ */ e.createElement(c, null), !t.hideStories && /* @__PURE__ */ e.createElement(m, null));
 };
 export {
   w as default,
-  m as isSupernova
+  u as isSupernova
 };
 //# sourceMappingURL=index.js.map

package/docs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/docs/index.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Title, Subtitle, Description, Primary, ArgTypes, Stories } from '@storybook/addon-docs';\n\ninterface DocsProps<T> {\n  component: T;\n  hideStories?: boolean;\n}\n\nexport const isSupernova = (): boolean => {\n  const url = window.location != window.parent.location ? document.referrer : document.location.href;\n  return url.startsWith('https://frankenstein.helsenorge.design') || window.location.search.includes('isSupernova');\n};\n\nconst Docs = <T,>(props: DocsProps<T>): React.JSX.Element => {\n  if (isSupernova()) {\n    return <ArgTypes of={props.component} />;\n  }\n\n  const searchParams = new URLSearchParams(window.location.search);\n  const newWindowUrl = `${window.location.pathname}?id=${searchParams.get('id')}&viewMode=docs`;\n\n  return (\n    <>\n      <div style={{ display: 'flex', justifyContent: 'space-between' }}>\n        <Title />\n        <div>\n          <a target=\"_blank\" href={newWindowUrl} rel=\"noreferrer\">\n            {'Åpne i ny fane'}\n          </a>\n        </div>\n      </div>\n      <Subtitle />\n      <Description />\n      <Primary />\n      <ArgTypes of={props.component} />\n      {!props.hideStories && <Stories />}\n    </>\n  );\n};\n\nexport default Docs;\n"],"names":["isSupernova","Docs","props","React","ArgTypes","searchParams","newWindowUrl","Title","Subtitle","Description","Primary","Stories"],"mappings":";;;AASO,MAAMA,IAAc,OACb,OAAO,YAAY,OAAO,OAAO,WAAW,SAAS,WAAW,SAAS,SAAS,MACnF,WAAW,wCAAwC,KAAK,OAAO,SAAS,OAAO,SAAS,aAAa,GAG5GC,IAAO,CAAKC,MAA2C;AAC3D,MAAIF;AACF,WAAQ,gBAAAG,EAAA,cAAAC,GAAA,EAAS,IAAIF,EAAM,UAAW,CAAA;AAGxC,QAAMG,IAAe,IAAI,gBAAgB,OAAO,SAAS,MAAM,GACzDC,IAAe,GAAG,OAAO,SAAS,QAAQ,OAAOD,EAAa,IAAI,IAAI,CAAC;AAG3E,SAAA,gBAAAF,EAAA,cAAAA,EAAA,UAAA,sCACG,OAAI,EAAA,OAAO,EAAE,SAAS,QAAQ,gBAAgB,kBAAgB,mCAC5DI,GAAM,IAAA,mCACN,OACC,MAAA,gBAAAJ,EAAA,cAAC,OAAE,QAAO,UAAS,MAAMG,GAAc,KAAI,aAAA,GACxC,gBACH,CACF,CACF,GACC,gBAAAH,EAAA,cAAAK,GAAA,IAAS,GACT,gBAAAL,EAAA,cAAAM,GAAA,IAAY,GACb,gBAAAN,EAAA,cAACO,GAAQ,IAAA,mCACRN,GAAS,EAAA,IAAIF,EAAM,UAAW,CAAA,GAC9B,CAACA,EAAM,eAAgB,gBAAAC,EAAA,cAAAQ,GAAA,IAAQ,CAClC;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../src/docs/index.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Title, Subtitle, Description, Primary, ArgTypes, Stories, Controls } from '@storybook/addon-docs';\n\ninterface DocsProps<T> {\n  component: T;\n  hideStories?: boolean;\n}\n\nexport const isSupernova = (): boolean => {\n  const url = window.location != window.parent.location ? document.referrer : document.location.href;\n  return url.startsWith('https://frankenstein.helsenorge.design') || window.location.search.includes('isSupernova');\n};\n\nconst Docs = <T,>(props: DocsProps<T>): React.JSX.Element => {\n  if (isSupernova()) {\n    return <ArgTypes />;\n  }\n\n  const searchParams = new URLSearchParams(window.location.search);\n  const newWindowUrl = `${window.location.pathname}?id=${searchParams.get('id')}&viewMode=docs`;\n\n  return (\n    <>\n      <div style={{ display: 'flex', justifyContent: 'space-between' }}>\n        <Title />\n        <div>\n          <a target=\"_blank\" href={newWindowUrl} rel=\"noreferrer\">\n            {'Åpne i ny fane'}\n          </a>\n        </div>\n      </div>\n      <Subtitle />\n      <Description />\n      <Primary />\n      <Controls />\n      {!props.hideStories && <Stories />}\n    </>\n  );\n};\n\nexport default Docs;\n"],"names":["isSupernova","Docs","props","ArgTypes","searchParams","newWindowUrl","React","Title","Subtitle","Description","Primary","Controls","Stories"],"mappings":";;;AASO,MAAMA,IAAc,OACb,OAAO,YAAY,OAAO,OAAO,WAAW,SAAS,WAAW,SAAS,SAAS,MACnF,WAAW,wCAAwC,KAAK,OAAO,SAAS,OAAO,SAAS,aAAa,GAG5GC,IAAO,CAAKC,MAA2C;AAC3D,MAAIF;AACF,2CAAQG,GAAS,IAAA;AAGnB,QAAMC,IAAe,IAAI,gBAAgB,OAAO,SAAS,MAAM,GACzDC,IAAe,GAAG,OAAO,SAAS,QAAQ,OAAOD,EAAa,IAAI,IAAI,CAAC;AAG3E,SAAA,gBAAAE,EAAA,cAAAA,EAAA,UAAA,sCACG,OAAI,EAAA,OAAO,EAAE,SAAS,QAAQ,gBAAgB,gBAAgB,EAAA,mCAC5DC,GAAM,IAAA,mCACN,OACC,MAAA,gBAAAD,EAAA,cAAC,OAAE,QAAO,UAAS,MAAMD,GAAc,KAAI,gBACxC,gBACH,CACF,CACF,GACA,gBAAAC,EAAA,cAACE,OAAS,GACV,gBAAAF,EAAA,cAACG,OAAY,GACb,gBAAAH,EAAA,cAACI,OAAQ,GACT,gBAAAJ,EAAA,cAACK,OAAS,GACT,CAACT,EAAM,eAAe,gBAAAI,EAAA,cAACM,OAAQ,CAClC;AAEJ;"}

package/hooks/useRovingFocus.d.ts

@@ -0,0 +1 @@
+export declare const useRovingFocus: (handleNewIndex: (index: number) => void, inputRefList: React.MutableRefObject<React.RefObject<HTMLElement>[] | null | undefined>, containerRef: React.RefObject<HTMLElement>, leftRightNavigation?: boolean) => void;

package/hooks/useRovingFocus.js

@@ -0,0 +1,27 @@
+import { useEffect as x } from "react";
+import { useKeyboardEvent as K } from "./useKeyboardEvent.js";
+import { KeyboardEventKey as r } from "../constants.js";
+const D = (k, c, m, a) => {
+  a = a ?? !1, x(() => {
+    var e, n;
+    c.current && (c.current.forEach((o) => {
+      var t;
+      (t = o.current) == null || t.setAttribute("tabIndex", "-1");
+    }), (n = (e = c.current[0]) == null ? void 0 : e.current) == null || n.setAttribute("tabIndex", "0"));
+  }, []);
+  const A = (e) => {
+    var t, d, f, s, u, w;
+    if (e.key === r.Tab || (e.preventDefault(), !c.current))
+      return;
+    const n = c.current.findIndex((y) => y.current === e.target);
+    let o = n;
+    e.key === r.Home ? o = 0 : e.key === r.End ? o = c.current.length - 1 : (e.key === r.ArrowDown || e.key === r.ArrowRight) && n < c.current.length - 1 ? o = n + 1 : (e.key === r.ArrowUp || e.key === r.ArrowLeft) && n > 0 ? o = n - 1 : (e.key === r.Enter || e.key === r.Space) && (o = n), o !== -1 && ((t = c.current) == null || t.forEach((y, l) => {
+      y.current && (y.current.tabIndex = l === o ? 0 : -1);
+    }), (f = (d = c.current[o]) == null ? void 0 : d.current) == null || f.focus(), (w = (u = (s = c.current[o]) == null ? void 0 : s.current) == null ? void 0 : u.click) == null || w.call(u), k(o));
+  }, E = [r.End, r.Enter, r.Escape, r.Home], b = a ? [r.ArrowRight, r.ArrowLeft] : [r.ArrowUp, r.ArrowDown];
+  K(m, A, [...E, ...b]);
+};
+export {
+  D as useRovingFocus
+};
+//# sourceMappingURL=useRovingFocus.js.map

package/hooks/useRovingFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRovingFocus.js","sources":["../../src/hooks/useRovingFocus.tsx"],"sourcesContent":["// Inspiration from https://www.joshuawootonn.com/react-roving-tabindex\nimport { useEffect } from 'react';\n\nimport { useKeyboardEvent } from './useKeyboardEvent';\nimport { KeyboardEventKey } from '../constants';\n\nexport const useRovingFocus = (\n  /** Function to run when new index is set */\n  handleNewIndex: (index: number) => void,\n  /** List of elements that should have rocing focus */\n  inputRefList: React.MutableRefObject<React.RefObject<HTMLElement>[] | null | undefined>,\n  /** Ref of container that should have the keyboard event handler */\n  containerRef: React.RefObject<HTMLElement>,\n  /** Indicated wether right/left or up/down arrows should be used for navigation. Default is up/down. */\n  leftRightNavigation?: boolean\n): void => {\n  leftRightNavigation = leftRightNavigation ?? false;\n\n  // Initialize only first index to be tabbable\n  useEffect(() => {\n    if (!inputRefList.current) {\n      return;\n    }\n    inputRefList.current.forEach(ref => {\n      ref.current?.setAttribute('tabIndex', '-1');\n    });\n    inputRefList.current[0]?.current?.setAttribute('tabIndex', '0');\n  }, []);\n\n  const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n    if (event.key === KeyboardEventKey.Tab) {\n      return;\n    }\n    event.preventDefault();\n\n    if (!inputRefList.current) {\n      return;\n    }\n    const index = inputRefList.current.findIndex(x => x.current === event.target);\n    let nextIndex = index;\n\n    if (event.key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (event.key === KeyboardEventKey.End) {\n      nextIndex = inputRefList.current.length - 1;\n    } else if (\n      (event.key === KeyboardEventKey.ArrowDown || event.key === KeyboardEventKey.ArrowRight) &&\n      index < inputRefList.current.length - 1\n    ) {\n      nextIndex = index + 1;\n    } else if ((event.key === KeyboardEventKey.ArrowUp || event.key === KeyboardEventKey.ArrowLeft) && index > 0) {\n      nextIndex = index - 1;\n    } else if (event.key === KeyboardEventKey.Enter || event.key === KeyboardEventKey.Space) {\n      nextIndex = index;\n    }\n\n    if (nextIndex !== -1) {\n      inputRefList.current?.forEach((ref, i) => {\n        if (ref.current) {\n          ref.current.tabIndex = i === nextIndex ? 0 : -1;\n        }\n      });\n      inputRefList.current[nextIndex]?.current?.focus();\n      inputRefList.current[nextIndex]?.current?.click?.();\n      handleNewIndex(nextIndex);\n    }\n  };\n\n  const commonKeys = [KeyboardEventKey.End, KeyboardEventKey.Enter, KeyboardEventKey.Escape, KeyboardEventKey.Home];\n\n  const arrowKeys = leftRightNavigation\n    ? [KeyboardEventKey.ArrowRight, KeyboardEventKey.ArrowLeft]\n    : [KeyboardEventKey.ArrowUp, KeyboardEventKey.ArrowDown];\n\n  useKeyboardEvent(containerRef, handleKeyboardNavigation, [...commonKeys, ...arrowKeys]);\n};\n"],"names":["useRovingFocus","handleNewIndex","inputRefList","containerRef","leftRightNavigation","useEffect","ref","_a","_b","handleKeyboardNavigation","event","KeyboardEventKey","index","x","nextIndex","i","_c","_f","_e","_d","commonKeys","arrowKeys","useKeyboardEvent"],"mappings":";;;AAMO,MAAMA,IAAiB,CAE5BC,GAEAC,GAEAC,GAEAC,MACS;AACT,EAAAA,IAAsBA,KAAuB,IAG7CC,EAAU,MAAM;;AACV,IAACH,EAAa,YAGLA,EAAA,QAAQ,QAAQ,CAAOI,MAAA;;AAC9B,OAAAC,IAAAD,EAAA,YAAA,QAAAC,EAAS,aAAa,YAAY;AAAA,IAAI,CAC3C,IACDC,KAAAD,IAAAL,EAAa,QAAQ,CAAC,MAAtB,gBAAAK,EAAyB,YAAzB,QAAAC,EAAkC,aAAa,YAAY;AAAA,EAC7D,GAAG,CAAE,CAAA;AAEC,QAAAC,IAA2B,CAACC,MAA+B;;AAM3D,QALAA,EAAM,QAAQC,EAAiB,QAGnCD,EAAM,eAAe,GAEjB,CAACR,EAAa;AAChB;AAEI,UAAAU,IAAQV,EAAa,QAAQ,UAAU,OAAKW,EAAE,YAAYH,EAAM,MAAM;AAC5E,QAAII,IAAYF;AAEZ,IAAAF,EAAM,QAAQC,EAAiB,OACrBG,IAAA,IACHJ,EAAM,QAAQC,EAAiB,MAC5BG,IAAAZ,EAAa,QAAQ,SAAS,KAEzCQ,EAAM,QAAQC,EAAiB,aAAaD,EAAM,QAAQC,EAAiB,eAC5EC,IAAQV,EAAa,QAAQ,SAAS,IAEtCY,IAAYF,IAAQ,KACVF,EAAM,QAAQC,EAAiB,WAAWD,EAAM,QAAQC,EAAiB,cAAcC,IAAQ,IACzGE,IAAYF,IAAQ,KACXF,EAAM,QAAQC,EAAiB,SAASD,EAAM,QAAQC,EAAiB,WACpEG,IAAAF,IAGVE,MAAc,QAChBP,IAAAL,EAAa,YAAb,QAAAK,EAAsB,QAAQ,CAACD,GAAKS,MAAM;AACxC,MAAIT,EAAI,YACNA,EAAI,QAAQ,WAAWS,MAAMD,IAAY,IAAI;AAAA,IAC/C,KAEFE,KAAAR,IAAAN,EAAa,QAAQY,CAAS,MAA9B,gBAAAN,EAAiC,YAAjC,QAAAQ,EAA0C,UAC1CC,KAAAC,KAAAC,IAAAjB,EAAa,QAAQY,CAAS,MAA9B,gBAAAK,EAAiC,YAAjC,gBAAAD,EAA0C,UAA1C,QAAAD,EAAA,KAAAC,IACAjB,EAAea,CAAS;AAAA,EAC1B,GAGIM,IAAa,CAACT,EAAiB,KAAKA,EAAiB,OAAOA,EAAiB,QAAQA,EAAiB,IAAI,GAE1GU,IAAYjB,IACd,CAACO,EAAiB,YAAYA,EAAiB,SAAS,IACxD,CAACA,EAAiB,SAASA,EAAiB,SAAS;AAEzD,EAAAW,EAAiBnB,GAAcM,GAA0B,CAAC,GAAGW,GAAY,GAAGC,CAAS,CAAC;AACxF;"}

package/hooks/useRovingFocus.stories.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.FC<{}>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithLeftRightNavigation: Story;

package/package.json

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

package/scss/typography.module.scss

@@ -114,20 +114,22 @@ import designsystemtypography from './scss/typography.scss'
     overflow-wrap: break-word;
     word-break: break-word;
     text-align: left;
-    text-decoration: none;
     color: $blueberry600;
-    padding: 0.15rem;
-    border-bottom: 1px solid $neutral700;
+    border: 0.15rem solid transparent;
+    text-decoration: underline;
+    text-underline-offset: 0.16rem;
+    text-decoration-color: $blueberry400;
+    text-decoration-thickness: 0.0625rem;
+    padding: 0.1rem;
 
     &:hover {
       cursor: pointer;
       color: $blueberry700;
       background-color: $blueberry50;
-      border-bottom-color: $blueberry600;
+      text-decoration-color: $blueberry600;
     }
 
     &:focus {
-      padding: 0 0 0.15rem;
       outline: none;
       border: 0.15rem solid $black;
     }