@helsenorge/designsystem-react 6.5.0 → 7.0.0-beta.2

package/components/Panel/Panel.stories.d.ts

@@ -0,0 +1,88 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import Panel, { PanelStatus, PanelVariant } from './Panel';
+type PanelWithAndCustomArgs = React.ComponentProps<typeof Panel> & {
+    useIcon: boolean;
+};
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Panel").PanelProps & React.RefAttributes<HTMLHeadingElement>>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        variant: PanelVariant.fill;
+        title: string;
+        status: PanelStatus.normal;
+        statusMessage: string;
+        buttonText: string;
+        buttonTextClose: string;
+        useIcon: false;
+        containerAsButton: false;
+        date: string;
+        time: string;
+        expanded: false;
+        renderChildrenWhenClosed: false;
+        focusable: false;
+    };
+    argTypes: {
+        variant: {
+            control: string;
+            options: typeof PanelVariant;
+        };
+        title: {
+            control: string;
+        };
+        status: {
+            control: string;
+            options: typeof PanelStatus;
+        };
+        statusMessage: {
+            control: string;
+        };
+        buttonText: {
+            control: string;
+        };
+        buttonTextClose: {
+            control: string;
+        };
+        useIcon: {
+            control: string;
+        };
+        containerAsButton: {
+            control: string;
+        };
+        date: {
+            control: string;
+        };
+        time: {
+            control: string;
+        };
+        expanded: {
+            control: string;
+        };
+        renderChildrenWhenClosed: {
+            control: string;
+        };
+        focusable: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<PanelWithAndCustomArgs>;
+export declare const Default: Story;
+export declare const ContentA: Story;
+export declare const ContentAAndB: Story;
+export declare const ContentAAndBWithIconAndUrl: Story;
+export declare const ContentHeader: Story;
+export declare const IconAndDetails: Story;
+export declare const AvatarAndDetails: Story;
+export declare const Status: Story;
+export declare const AsButton: Story;
+export declare const WithCallback: Story;
+export declare const NotClickable: Story;

package/components/Panel/index.d.ts

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

package/components/PanelList/PanelList.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PanelVariant } from '../Panel';
-interface PanelListProps {
+export interface PanelListProps {
     /** Panels to render inside the PanelList */
     children?: React.ReactNode;
     /** Changes the visual representation of the panel. Default: fill */
@@ -10,4 +10,3 @@ interface PanelListProps {
 }
 declare const PanelList: React.ForwardRefExoticComponent<PanelListProps & React.RefAttributes<HTMLDivElement>>;
 export default PanelList;
-//# sourceMappingURL=PanelList.d.ts.map

package/components/PanelList/PanelList.js

@@ -1,15 +1,15 @@
-import a from "react";
-import p from "classnames";
-import { AnalyticsId as f } from "../../constants.js";
-import P, { PanelVariant as l } from "../Panel/Panel.js";
-import r from "./styles.module.scss";
-const u = (t) => a.isValidElement(t) && t.type === P, y = a.forwardRef(function(o, i) {
-  const { testId: m, children: d, variant: n = l.fill } = o, c = (e, s) => a.cloneElement(e, {
+import t from "react";
+import c from "classnames";
+import { AnalyticsId as p } from "../../constants.js";
+import f, { PanelVariant as o } from "../Panel/Panel.js";
+import P from "./styles.module.scss";
+const u = (a) => t.isValidElement(a) && a.type === f, y = t.forwardRef(function(s, l) {
+  const { testId: i, children: m, variant: n = o.fill } = s, d = (e, r) => t.cloneElement(e, {
     variant: n,
-    noTopBorder: n === l.line && !s,
-    className: p(e.props.className, n !== l.line && r["panel-list__panel"])
+    noTopBorder: n === o.line && !r,
+    className: c(e.props.className, n !== o.line && P["panel-list__panel"])
   });
-  return /* @__PURE__ */ a.createElement("div", { ref: i, "data-testid": m, className: r["panel-list"], "data-analyticsid": f.PanelList }, a.Children.map(d, (e, s) => u(e) ? c(e, s === 0) : e));
+  return /* @__PURE__ */ t.createElement("div", { ref: l, "data-testid": i, "data-analyticsid": p.PanelList }, t.Children.map(m, (e, r) => u(e) ? d(e, r === 0) : e));
 }), v = y;
 export {
   v as default

package/components/PanelList/PanelList.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanelList.js","sources":["../../../src/components/PanelList/PanelList.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport Panel, { PanelProps, PanelVariant } from '../Panel';\n\nimport styles from './styles.module.scss';\n\ninterface PanelListProps {\n  /** Panels to render inside the PanelList */\n  children?: React.ReactNode;\n  /** Changes the visual representation of the panel. Default: fill */\n  variant?: keyof typeof PanelVariant;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst isPanelComponent = (element: {} | null | undefined): element is React.ReactElement<PanelProps> =>\n  React.isValidElement<PanelProps>(element) && (element as React.ReactElement).type === Panel;\n\nconst PanelList = React.forwardRef(function BadgeForwardedRef(props: PanelListProps, ref: React.ForwardedRef<HTMLDivElement>) {\n  const { testId, children, variant = PanelVariant.fill } = props;\n\n  const renderPanel = (panel: React.ReactElement<PanelProps>, firstChild: boolean) =>\n    React.cloneElement(panel, {\n      variant: variant,\n      noTopBorder: variant === PanelVariant.line && !firstChild,\n      className: classNames(panel.props.className, variant !== PanelVariant.line && styles['panel-list__panel']),\n    });\n\n  return (\n    <div ref={ref} data-testid={testId} className={styles['panel-list']} data-analyticsid={AnalyticsId.PanelList}>\n      {React.Children.map(children, (child, index) => (isPanelComponent(child) ? renderPanel(child, index === 0) : child))}\n    </div>\n  );\n});\n\nexport default PanelList;\n"],"names":["isPanelComponent","element","React","Panel","PanelList","props","ref","testId","children","variant","PanelVariant","renderPanel","panel","firstChild","classNames","styles","AnalyticsId","child","index","PanelList$1"],"mappings":";;;;;AAkBA,MAAMA,IAAmB,CAACC,MACxBC,EAAM,eAA2BD,CAAO,KAAMA,EAA+B,SAASE,GAElFC,IAAYF,EAAM,WAAW,SAA2BG,GAAuBC,GAAyC;AAC5H,QAAM,EAAE,QAAAC,GAAQ,UAAAC,GAAU,SAAAC,IAAUC,EAAa,KAAS,IAAAL,GAEpDM,IAAc,CAACC,GAAuCC,MAC1DX,EAAM,aAAaU,GAAO;AAAA,IACxB,SAAAH;AAAA,IACA,aAAaA,MAAYC,EAAa,QAAQ,CAACG;AAAA,IAC/C,WAAWC,EAAWF,EAAM,MAAM,WAAWH,MAAYC,EAAa,QAAQK,EAAO,mBAAmB,CAAC;AAAA,EAAA,CAC1G;AAEH,SACGb,gBAAAA,EAAA,cAAA,OAAA,EAAI,KAAAI,GAAU,eAAaC,GAAQ,WAAWQ,EAAO,YAAY,GAAG,oBAAkBC,EAAY,UAAA,GAChGd,EAAM,SAAS,IAAIM,GAAU,CAACS,GAAOC,MAAWlB,EAAiBiB,CAAK,IAAIN,EAAYM,GAAOC,MAAU,CAAC,IAAID,CAAM,CACrH;AAEJ,CAAC,GAEDE,IAAef;"}
+{"version":3,"file":"PanelList.js","sources":["../../../src/components/PanelList/PanelList.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport Panel, { PanelProps, PanelVariant } from '../Panel';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelListProps {\n  /** Panels to render inside the PanelList */\n  children?: React.ReactNode;\n  /** Changes the visual representation of the panel. Default: fill */\n  variant?: keyof typeof PanelVariant;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst isPanelComponent = (element: {} | null | undefined): element is React.ReactElement<PanelProps> =>\n  React.isValidElement<PanelProps>(element) && (element as React.ReactElement).type === Panel;\n\nconst PanelList = React.forwardRef(function BadgeForwardedRef(props: PanelListProps, ref: React.ForwardedRef<HTMLDivElement>) {\n  const { testId, children, variant = PanelVariant.fill } = props;\n\n  const renderPanel = (panel: React.ReactElement<PanelProps>, firstChild: boolean) =>\n    React.cloneElement(panel, {\n      variant: variant,\n      noTopBorder: variant === PanelVariant.line && !firstChild,\n      className: classNames(panel.props.className, variant !== PanelVariant.line && styles['panel-list__panel']),\n    });\n\n  return (\n    <div ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.PanelList}>\n      {React.Children.map(children, (child, index) => (isPanelComponent(child) ? renderPanel(child, index === 0) : child))}\n    </div>\n  );\n});\n\nexport default PanelList;\n"],"names":["isPanelComponent","element","React","Panel","PanelList","props","ref","testId","children","variant","PanelVariant","renderPanel","panel","firstChild","classNames","styles","AnalyticsId","child","index","PanelList$1"],"mappings":";;;;;AAkBA,MAAMA,IAAmB,CAACC,MACxBC,EAAM,eAA2BD,CAAO,KAAMA,EAA+B,SAASE,GAElFC,IAAYF,EAAM,WAAW,SAA2BG,GAAuBC,GAAyC;AAC5H,QAAM,EAAE,QAAAC,GAAQ,UAAAC,GAAU,SAAAC,IAAUC,EAAa,KAAS,IAAAL,GAEpDM,IAAc,CAACC,GAAuCC,MAC1DX,EAAM,aAAaU,GAAO;AAAA,IACxB,SAAAH;AAAA,IACA,aAAaA,MAAYC,EAAa,QAAQ,CAACG;AAAA,IAC/C,WAAWC,EAAWF,EAAM,MAAM,WAAWH,MAAYC,EAAa,QAAQK,EAAO,mBAAmB,CAAC;AAAA,EAAA,CAC1G;AAGD,SAAAb,gBAAAA,EAAA,cAAC,OAAI,EAAA,KAAAI,GAAU,eAAaC,GAAQ,oBAAkBS,EAAY,UAAA,GAC/Dd,EAAM,SAAS,IAAIM,GAAU,CAACS,GAAOC,MAAWlB,EAAiBiB,CAAK,IAAIN,EAAYM,GAAOC,MAAU,CAAC,IAAID,CAAM,CACrH;AAEJ,CAAC,GAEDE,IAAef;"}

package/components/PanelList/PanelList.stories.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { PanelVariant } from '../Panel';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./PanelList").PanelListProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        variant: PanelVariant.fill;
+    };
+    argTypes: {
+        variant: {
+            control: string;
+            options: typeof PanelVariant;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/components/PanelList/index.d.ts

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

package/components/PopMenu/PopMenu.d.ts

@@ -27,4 +27,3 @@ export interface PopMenuProps {
 }
 export declare const PopMenu: React.FC<PopMenuProps>;
 export default PopMenu;
-//# sourceMappingURL=PopMenu.d.ts.map

package/components/PopMenu/PopMenu.stories.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { PopMenuVariant } from './PopMenu';
+declare const meta: {
+    title: string;
+    component: React.FC<import("./PopMenu").PopMenuProps>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        popMenuVariant: PopMenuVariant.onWhite;
+    };
+    argTypes: {
+        popMenuVariant: {
+            control: string;
+            options: typeof PopMenuVariant;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const HorizontalScroll: Story;
+export declare const CenteredOverflow: Story;

package/components/PopMenu/index.d.ts

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

package/components/PopOver/PopOver.d.ts

@@ -29,4 +29,3 @@ export interface PopOverProps {
 }
 declare const PopOver: React.ForwardRefExoticComponent<PopOverProps & React.RefAttributes<HTMLDivElement | SVGSVGElement>>;
 export default PopOver;
-//# sourceMappingURL=PopOver.d.ts.map

package/components/PopOver/PopOver.stories.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { PopOverVariant } from './PopOver';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./PopOver").PopOverProps & React.RefAttributes<HTMLDivElement | SVGSVGElement>>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        controllerRef: undefined;
+        children: string;
+        variant: PopOverVariant.positionautomatic;
+    };
+    argTypes: {
+        children: {
+            control: string;
+        };
+        variant: {
+            control: string;
+            options: typeof PopOverVariant;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Toggle: Story;
+export declare const HorizontalScroll: Story;

package/components/PopOver/index.d.ts

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

package/components/PopOver/utils.d.ts

@@ -24,4 +24,3 @@ export declare const getBubbleStyle: (controllerSize: DOMRect, bubbleSize: DOMRe
  * @returns CSSProperties som plasserer pilen riktig
  */
 export declare const getArrowStyle: (bubbleStyle: CSSProperties, controllerSize: DOMRect, verticalPosition: keyof typeof PopOverVariant) => CSSProperties;
-//# sourceMappingURL=utils.d.ts.map

package/components/Portal/index.d.ts

@@ -10,4 +10,3 @@ export interface PortalProps {
     testId?: string;
 }
 export default function Portal({ children, parent, className, testId }: PortalProps): React.ReactPortal;
-//# sourceMappingURL=index.d.ts.map

package/components/PromoPanel/PromoPanel.d.ts

@@ -3,7 +3,7 @@ import { PaletteNames } from '../../theme/palette';
 import { AnchorLinkTags, AnchorLinkTargets } from '../AnchorLink';
 import { TitleTags } from '../Title';
 export type PromoPanelColors = Extract<PaletteNames, 'neutral' | 'blueberry' | 'cherry'>;
-interface PromoPanelProps {
+export interface PromoPanelProps {
     /** Used as the link text if set. title or children must be set for the link to have accessible text. */
     title?: string;
     /** Used as the link text if title is not set. */
@@ -29,4 +29,3 @@ interface PromoPanelProps {
 }
 declare const PromoPanel: React.FC<PromoPanelProps>;
 export default PromoPanel;
-//# sourceMappingURL=PromoPanel.d.ts.map

package/components/PromoPanel/PromoPanel.js

@@ -25,7 +25,7 @@ const I = (e) => e.linkComponent ? t.cloneElement(e.linkComponent, { children: e
       linkOnClick: e.linkOnClick
     },
     e.title || e.children
-  ), d = (() => r >= a.md ? 156 : 110)();
+  ), d = r >= a.md ? 156 : 110;
   return /* @__PURE__ */ t.createElement("div", { className: s, "data-testid": e.testId, "data-analyticsid": C.PromoPanel, ref: u }, e.illustration && /* @__PURE__ */ t.createElement(
     v,
     {

package/components/PromoPanel/PromoPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"PromoPanel.js","sources":["../../../src/components/PromoPanel/PromoPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { getColor } from '../../theme/currys/color';\nimport { PaletteNames } from '../../theme/palette';\nimport { AnchorLinkTags, AnchorLinkTargets } from '../AnchorLink';\nimport Icon from '../Icon';\nimport ArrowRight from '../Icons/ArrowRight';\nimport ArrowUpRight from '../Icons/ArrowUpRight';\nimport LazyIllustration from '../LazyIllustration';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type PromoPanelColors = Extract<PaletteNames, 'neutral' | 'blueberry' | 'cherry'>;\n\ninterface PromoPanelProps {\n  /** Used as the link text if set. title or children must be set for the link to have accessible text. */\n  title?: string;\n  /** Used as the link text if title is not set. */\n  children?: string;\n  /** Illustration element */\n  illustration?: 'Doctor' | 'HealthcarePersonnel';\n  /** Changes the underlying element of the title. */\n  titleHtmlMarkup?: TitleTags;\n  /** Changes the background color. Default: white */\n  color?: PromoPanelColors;\n  /** Not used if linkComponent is set */\n  href?: string;\n  /** Anchor link target. If linkComponent is set, this prop is only used to display the right icon for external links. */\n  target?: AnchorLinkTargets;\n  /** HTML markup for anchor link. Not used if linkComponent is set. Default: a */\n  linkHtmlMarkup?: AnchorLinkTags;\n  /** Function that is called when clicked. Not used if linkComponent is set. */\n  linkOnClick?: () => void;\n  /** Custom link component. Must be \"a\" a or \"button\" element with no styling. */\n  linkComponent?: React.ReactElement;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface PromoPanelLinkProps {\n  children?: string;\n  href?: string;\n  target?: AnchorLinkTargets;\n  linkComponent?: React.ReactElement;\n  linkHtmlMarkup?: AnchorLinkTags;\n  linkOnClick?: () => void;\n}\n\nconst PromoPanelLink: React.FC<PromoPanelLinkProps> = props => {\n  if (props.linkComponent) {\n    return React.cloneElement(props.linkComponent, { children: props.children });\n  }\n\n  if (props.linkHtmlMarkup === 'button') {\n    return (\n      <button type={'button'} onClick={props.linkOnClick}>\n        {props.children}\n      </button>\n    );\n  }\n  return (\n    <a href={props.href} target={props.target} onClick={props.linkOnClick}>\n      {props.children}\n    </a>\n  );\n};\n\nconst PromoPanel: React.FC<PromoPanelProps> = props => {\n  const { isHovered, hoverRef } = useHover<HTMLDivElement>();\n\n  const { color = 'neutral', titleHtmlMarkup = 'h2', linkHtmlMarkup = 'a' } = props;\n\n  const breakpoint = useBreakpoint();\n\n  const promoPanelClasses = classNames(\n    styles.promopanel,\n    styles[`promopanel--${color}`],\n    !props.illustration && styles['promopanel--no-illustration']\n  );\n\n  const promoPanelLink = (\n    <PromoPanelLink\n      href={props.href}\n      target={props.target}\n      linkComponent={props.linkComponent}\n      linkHtmlMarkup={linkHtmlMarkup}\n      linkOnClick={props.linkOnClick}\n    >\n      {props.title || props.children}\n    </PromoPanelLink>\n  );\n\n  const illustrationSize = ((): number => {\n    if (breakpoint >= Breakpoint.md) {\n      return 156;\n    }\n\n    return 110;\n  })();\n\n  return (\n    <div className={promoPanelClasses} data-testid={props.testId} data-analyticsid={AnalyticsId.PromoPanel} ref={hoverRef}>\n      {props.illustration && (\n        <LazyIllustration\n          illustrationName={props.illustration}\n          size={illustrationSize}\n          color={color}\n          className={styles.promopanel__illustration}\n        />\n      )}\n      <div className={styles.promopanel__content}>\n        {props.title && (\n          <Title htmlMarkup={titleHtmlMarkup} appearance={'title3'}>\n            {promoPanelLink}\n          </Title>\n        )}\n        {!props.title ? promoPanelLink : props.children}\n      </div>\n      <Icon\n        className={styles.promopanel__icon}\n        svgIcon={props.target === '_blank' ? ArrowUpRight : ArrowRight}\n        size={breakpoint >= Breakpoint.md ? IconSize.Small : IconSize.XSmall}\n        isHovered={isHovered}\n        color={getColor('blueberry', 500)}\n        hoverColor={getColor('blueberry', 600)}\n      />\n    </div>\n  );\n};\n\nexport default PromoPanel;\n"],"names":["PromoPanelLink","props","React","PromoPanel","isHovered","hoverRef","useHover","color","titleHtmlMarkup","linkHtmlMarkup","breakpoint","useBreakpoint","promoPanelClasses","classNames","styles","promoPanelLink","illustrationSize","Breakpoint","AnalyticsId","LazyIllustration","Title","Icon","ArrowUpRight","ArrowRight","IconSize","getColor","PromoPanel$1"],"mappings":";;;;;;;;;;;;AAsDA,MAAMA,IAAgD,CAASC,MACzDA,EAAM,gBACDC,EAAM,aAAaD,EAAM,eAAe,EAAE,UAAUA,EAAM,UAAU,IAGzEA,EAAM,mBAAmB,WAEzBC,gBAAAA,EAAA,cAAC,YAAO,MAAM,UAAU,SAASD,EAAM,YAAA,GACpCA,EAAM,QACT,IAIDC,gBAAAA,EAAA,cAAA,KAAA,EAAE,MAAMD,EAAM,MAAM,QAAQA,EAAM,QAAQ,SAASA,EAAM,YACvD,GAAAA,EAAM,QACT,GAIEE,IAAwC,CAASF,MAAA;AACrD,QAAM,EAAE,WAAAG,GAAW,UAAAC,EAAS,IAAIC,EAAyB,GAEnD,EAAE,OAAAC,IAAQ,WAAW,iBAAAC,IAAkB,MAAM,gBAAAC,IAAiB,IAAQ,IAAAR,GAEtES,IAAaC,KAEbC,IAAoBC;AAAA,IACxBC,EAAO;AAAA,IACPA,EAAO,eAAeP,CAAK,EAAE;AAAA,IAC7B,CAACN,EAAM,gBAAgBa,EAAO,6BAA6B;AAAA,EAAA,GAGvDC,IACJb,gBAAAA,EAAA;AAAA,IAACF;AAAA,IAAA;AAAA,MACC,MAAMC,EAAM;AAAA,MACZ,QAAQA,EAAM;AAAA,MACd,eAAeA,EAAM;AAAA,MACrB,gBAAAQ;AAAA,MACA,aAAaR,EAAM;AAAA,IAAA;AAAA,IAElBA,EAAM,SAASA,EAAM;AAAA,EAAA,GAIpBe,KAAoB,MACpBN,KAAcO,EAAW,KACpB,MAGF;AAGT,SACGf,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWU,GAAmB,eAAaX,EAAM,QAAQ,oBAAkBiB,EAAY,YAAY,KAAKb,EAAA,GAC1GJ,EAAM,gBACLC,gBAAAA,EAAA;AAAA,IAACiB;AAAA,IAAA;AAAA,MACC,kBAAkBlB,EAAM;AAAA,MACxB,MAAMe;AAAA,MACN,OAAAT;AAAA,MACA,WAAWO,EAAO;AAAA,IAAA;AAAA,EACpB,mCAED,OAAI,EAAA,WAAWA,EAAO,oBACpB,GAAAb,EAAM,SACLC,gBAAAA,EAAA,cAACkB,GAAM,EAAA,YAAYZ,GAAiB,YAAY,YAC7CO,CACH,GAEAd,EAAM,QAAyBA,EAAM,WAAvBc,CAClB,GACAb,gBAAAA,EAAA;AAAA,IAACmB;AAAA,IAAA;AAAA,MACC,WAAWP,EAAO;AAAA,MAClB,SAASb,EAAM,WAAW,WAAWqB,IAAeC;AAAA,MACpD,MAAMb,KAAcO,EAAW,KAAKO,EAAS,QAAQA,EAAS;AAAA,MAC9D,WAAApB;AAAA,MACA,OAAOqB,EAAS,aAAa,GAAG;AAAA,MAChC,YAAYA,EAAS,aAAa,GAAG;AAAA,IAAA;AAAA,EAAA,CAEzC;AAEJ,GAEAC,IAAevB;"}
+{"version":3,"file":"PromoPanel.js","sources":["../../../src/components/PromoPanel/PromoPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { getColor } from '../../theme/currys/color';\nimport { PaletteNames } from '../../theme/palette';\nimport { AnchorLinkTags, AnchorLinkTargets } from '../AnchorLink';\nimport Icon from '../Icon';\nimport ArrowRight from '../Icons/ArrowRight';\nimport ArrowUpRight from '../Icons/ArrowUpRight';\nimport LazyIllustration from '../LazyIllustration';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type PromoPanelColors = Extract<PaletteNames, 'neutral' | 'blueberry' | 'cherry'>;\n\nexport interface PromoPanelProps {\n  /** Used as the link text if set. title or children must be set for the link to have accessible text. */\n  title?: string;\n  /** Used as the link text if title is not set. */\n  children?: string;\n  /** Illustration element */\n  illustration?: 'Doctor' | 'HealthcarePersonnel';\n  /** Changes the underlying element of the title. */\n  titleHtmlMarkup?: TitleTags;\n  /** Changes the background color. Default: white */\n  color?: PromoPanelColors;\n  /** Not used if linkComponent is set */\n  href?: string;\n  /** Anchor link target. If linkComponent is set, this prop is only used to display the right icon for external links. */\n  target?: AnchorLinkTargets;\n  /** HTML markup for anchor link. Not used if linkComponent is set. Default: a */\n  linkHtmlMarkup?: AnchorLinkTags;\n  /** Function that is called when clicked. Not used if linkComponent is set. */\n  linkOnClick?: () => void;\n  /** Custom link component. Must be \"a\" a or \"button\" element with no styling. */\n  linkComponent?: React.ReactElement;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface PromoPanelLinkProps {\n  children?: string;\n  href?: string;\n  target?: AnchorLinkTargets;\n  linkComponent?: React.ReactElement;\n  linkHtmlMarkup?: AnchorLinkTags;\n  linkOnClick?: () => void;\n}\n\nconst PromoPanelLink: React.FC<PromoPanelLinkProps> = props => {\n  if (props.linkComponent) {\n    return React.cloneElement(props.linkComponent, { children: props.children });\n  }\n\n  if (props.linkHtmlMarkup === 'button') {\n    return (\n      <button type={'button'} onClick={props.linkOnClick}>\n        {props.children}\n      </button>\n    );\n  }\n  return (\n    <a href={props.href} target={props.target} onClick={props.linkOnClick}>\n      {props.children}\n    </a>\n  );\n};\n\nconst PromoPanel: React.FC<PromoPanelProps> = props => {\n  const { isHovered, hoverRef } = useHover<HTMLDivElement>();\n\n  const { color = 'neutral', titleHtmlMarkup = 'h2', linkHtmlMarkup = 'a' } = props;\n\n  const breakpoint = useBreakpoint();\n\n  const promoPanelClasses = classNames(\n    styles.promopanel,\n    styles[`promopanel--${color}`],\n    !props.illustration && styles['promopanel--no-illustration']\n  );\n\n  const promoPanelLink = (\n    <PromoPanelLink\n      href={props.href}\n      target={props.target}\n      linkComponent={props.linkComponent}\n      linkHtmlMarkup={linkHtmlMarkup}\n      linkOnClick={props.linkOnClick}\n    >\n      {props.title || props.children}\n    </PromoPanelLink>\n  );\n\n  const illustrationSize = ((): number => {\n    if (breakpoint >= Breakpoint.md) {\n      return 156;\n    }\n\n    return 110;\n  })();\n\n  return (\n    <div className={promoPanelClasses} data-testid={props.testId} data-analyticsid={AnalyticsId.PromoPanel} ref={hoverRef}>\n      {props.illustration && (\n        <LazyIllustration\n          illustrationName={props.illustration}\n          size={illustrationSize}\n          color={color}\n          className={styles.promopanel__illustration}\n        />\n      )}\n      <div className={styles.promopanel__content}>\n        {props.title && (\n          <Title htmlMarkup={titleHtmlMarkup} appearance={'title3'}>\n            {promoPanelLink}\n          </Title>\n        )}\n        {!props.title ? promoPanelLink : props.children}\n      </div>\n      <Icon\n        className={styles.promopanel__icon}\n        svgIcon={props.target === '_blank' ? ArrowUpRight : ArrowRight}\n        size={breakpoint >= Breakpoint.md ? IconSize.Small : IconSize.XSmall}\n        isHovered={isHovered}\n        color={getColor('blueberry', 500)}\n        hoverColor={getColor('blueberry', 600)}\n      />\n    </div>\n  );\n};\n\nexport default PromoPanel;\n"],"names":["PromoPanelLink","props","React","PromoPanel","isHovered","hoverRef","useHover","color","titleHtmlMarkup","linkHtmlMarkup","breakpoint","useBreakpoint","promoPanelClasses","classNames","styles","promoPanelLink","illustrationSize","Breakpoint","AnalyticsId","LazyIllustration","Title","Icon","ArrowUpRight","ArrowRight","IconSize","getColor","PromoPanel$1"],"mappings":";;;;;;;;;;;;AAsDA,MAAMA,IAAgD,CAASC,MACzDA,EAAM,gBACDC,EAAM,aAAaD,EAAM,eAAe,EAAE,UAAUA,EAAM,UAAU,IAGzEA,EAAM,mBAAmB,WAEzBC,gBAAAA,EAAA,cAAC,YAAO,MAAM,UAAU,SAASD,EAAM,YAAA,GACpCA,EAAM,QACT,IAIDC,gBAAAA,EAAA,cAAA,KAAA,EAAE,MAAMD,EAAM,MAAM,QAAQA,EAAM,QAAQ,SAASA,EAAM,YACvD,GAAAA,EAAM,QACT,GAIEE,IAAwC,CAASF,MAAA;AACrD,QAAM,EAAE,WAAAG,GAAW,UAAAC,EAAS,IAAIC,EAAyB,GAEnD,EAAE,OAAAC,IAAQ,WAAW,iBAAAC,IAAkB,MAAM,gBAAAC,IAAiB,IAAQ,IAAAR,GAEtES,IAAaC,KAEbC,IAAoBC;AAAA,IACxBC,EAAO;AAAA,IACPA,EAAO,eAAeP,CAAK,EAAE;AAAA,IAC7B,CAACN,EAAM,gBAAgBa,EAAO,6BAA6B;AAAA,EAAA,GAGvDC,IACJb,gBAAAA,EAAA;AAAA,IAACF;AAAA,IAAA;AAAA,MACC,MAAMC,EAAM;AAAA,MACZ,QAAQA,EAAM;AAAA,MACd,eAAeA,EAAM;AAAA,MACrB,gBAAAQ;AAAA,MACA,aAAaR,EAAM;AAAA,IAAA;AAAA,IAElBA,EAAM,SAASA,EAAM;AAAA,EAAA,GAIpBe,IACAN,KAAcO,EAAW,KACpB,MAGF;AAGT,SACGf,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWU,GAAmB,eAAaX,EAAM,QAAQ,oBAAkBiB,EAAY,YAAY,KAAKb,EAAA,GAC1GJ,EAAM,gBACLC,gBAAAA,EAAA;AAAA,IAACiB;AAAA,IAAA;AAAA,MACC,kBAAkBlB,EAAM;AAAA,MACxB,MAAMe;AAAA,MACN,OAAAT;AAAA,MACA,WAAWO,EAAO;AAAA,IAAA;AAAA,EACpB,mCAED,OAAI,EAAA,WAAWA,EAAO,oBACpB,GAAAb,EAAM,SACLC,gBAAAA,EAAA,cAACkB,GAAM,EAAA,YAAYZ,GAAiB,YAAY,YAC7CO,CACH,GAEAd,EAAM,QAAyBA,EAAM,WAAvBc,CAClB,GACAb,gBAAAA,EAAA;AAAA,IAACmB;AAAA,IAAA;AAAA,MACC,WAAWP,EAAO;AAAA,MAClB,SAASb,EAAM,WAAW,WAAWqB,IAAeC;AAAA,MACpD,MAAMb,KAAcO,EAAW,KAAKO,EAAS,QAAQA,EAAS;AAAA,MAC9D,WAAApB;AAAA,MACA,OAAOqB,EAAS,aAAa,GAAG;AAAA,MAChC,YAAYA,EAAS,aAAa,GAAG;AAAA,IAAA;AAAA,EAAA,CAEzC;AAEJ,GAEAC,IAAevB;"}

package/components/PromoPanel/PromoPanel.stories.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.FC<import("./PromoPanel").PromoPanelProps>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        title: string;
+        children: string;
+        href: string;
+        color: "neutral";
+        illustration: "Doctor";
+    };
+    argTypes: {
+        title: {
+            control: string;
+        };
+        children: {
+            control: string;
+        };
+        href: {
+            control: string;
+        };
+        color: {
+            control: string;
+            options: string[];
+        };
+        illustration: {
+            control: string;
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const CustomLinkComponent: Story;

package/components/PromoPanel/index.d.ts

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

package/components/PromoPanel/styles.module.scss

@@ -16,7 +16,9 @@ $colors: 'neutral', 'blueberry', 'cherry';
   transition: background-color 0.15s ease-in-out;
 
   &:focus-within {
-    box-shadow: 0 0 0 2px $black, inset 0 0 0 2px $black;
+    box-shadow:
+      0 0 0 2px $black,
+      inset 0 0 0 2px $black;
   }
 
   @media (min-width: map.get($grid-breakpoints, xs)) {

package/components/RadioButton/RadioButton.d.ts

@@ -23,4 +23,3 @@ export interface RadioButtonProps extends Pick<React.InputHTMLAttributes<HTMLInp
 export declare const getRadioLabelClasses: (radioId: string, mode: FormMode, large: boolean, checkedRadioId?: string) => string | undefined;
 export declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;
 export default RadioButton;
-//# sourceMappingURL=RadioButton.d.ts.map

package/components/RadioButton/RadioButton.js

@@ -7,19 +7,19 @@ import { uuid as J } from "../../utils/uuid.js";
 import { getLabelText as K, renderLabelAsParent as Q } from "../Label/Label.js";
 import e from "./styles.module.scss";
 const oe = (s, o, r, b) => {
-  const n = o === "oninvalid", a = s === b;
+  const n = o === "oninvalid", t = s === b;
   return i({
-    [e["radio-button-label__large--on-grey"]]: r && o === "ongrey" && !a,
-    [e["radio-button-label__large--on-blueberry"]]: o === "onblueberry" && !a && r,
-    [e["radio-button-label__large--selected"]]: r && a && !n,
-    [e["radio-button-label__large--selected-invalid"]]: r && a && n
+    [e["radio-button-label__large--on-grey"]]: r && o === "ongrey" && !t,
+    [e["radio-button-label__large--on-blueberry"]]: o === "onblueberry" && !t && r,
+    [e["radio-button-label__large--selected"]]: r && t && !n,
+    [e["radio-button-label__large--selected-invalid"]]: r && t && n
   });
 }, v = p.forwardRef((s, o) => {
   const {
     className: r,
     defaultChecked: b = !1,
     onChange: n,
-    disabled: a,
+    disabled: t,
     label: f,
     inputId: _ = J(),
     mode: d = l.onwhite,
@@ -32,33 +32,33 @@ const oe = (s, o, r, b) => {
     required: N,
     labelClassNames: L,
     ...S
-  } = s, g = R || d === l.oninvalid, y = d === l.ondark, h = d === l.onblueberry, x = d === l.oninvalid, t = w === D.large, [E, F] = q(b), { refObject: I, isFocused: c } = $(G(o) ? o : null), j = H([o, I]), z = i(e["radio-button-wrapper"], {
+  } = s, g = R || d === l.oninvalid, y = d === l.ondark, h = d === l.onblueberry, x = d === l.oninvalid, a = w === D.large, [E, F] = q(b), { refObject: I, isFocused: c } = $(G(o) ? o : null), j = H([o, I]), z = i(e["radio-button-wrapper"], {
     [e["radio-button-wrapper--with-error"]]: u,
-    [e["radio-button-wrapper__large"]]: t,
-    [e["radio-button-wrapper__large--focused"]]: t && c,
-    [e["radio-button-wrapper__large--selected"]]: t && E && c,
-    [e["radio-button-wrapper__large--invalid"]]: t && x && c,
-    [e["radio-button-wrapper__large--on-blueberry"]]: t && h && c
+    [e["radio-button-wrapper__large"]]: a,
+    [e["radio-button-wrapper__large--focused"]]: a && c,
+    [e["radio-button-wrapper__large--selected"]]: a && E && c,
+    [e["radio-button-wrapper__large--invalid"]]: a && x && c,
+    [e["radio-button-wrapper__large--on-blueberry"]]: a && h && c
   }), A = i(
     e["radio-button-label"],
     {
-      [e["radio-button-label--disabled"]]: a,
+      [e["radio-button-label--disabled"]]: t,
       [e["radio-button-label--on-dark"]]: y,
       [e["radio-button-label--invalid"]]: g,
-      [e["radio-button-label__large"]]: t,
-      [e["radio-button-label__large--disabled"]]: t && a
+      [e["radio-button-label__large"]]: a,
+      [e["radio-button-label__large--disabled"]]: a && t
     },
     L
   ), M = i(
     e["radio-button"],
     {
       [e["radio-button--on-dark"]]: y,
-      [e["radio-button--disabled"]]: a,
+      [e["radio-button--disabled"]]: t,
       [e["radio-button--on-blueberry"]]: h,
       [e["radio-button--invalid"]]: g,
-      [e["radio-button__large"]]: t,
-      [e["radio-button__large--disabled"]]: t && a,
-      [e["radio-button__large--invalid"]]: t && g
+      [e["radio-button__large"]]: a,
+      [e["radio-button__large--disabled"]]: a && t,
+      [e["radio-button__large--invalid"]]: a && g
     },
     r
   ), O = i(e["radio-button-errors"]), P = (m) => {
@@ -70,7 +70,7 @@ const oe = (s, o, r, b) => {
       name: C,
       className: M,
       type: "radio",
-      disabled: a,
+      disabled: t,
       value: k,
       ref: j,
       defaultChecked: b,
@@ -85,11 +85,10 @@ const oe = (s, o, r, b) => {
     T(),
     _,
     d,
-    a,
     A,
     void 0,
     e["radiobutton-sublabel-wrapper"],
-    t
+    a
   ));
 });
 v.displayName = "RadioButton";

package/components/RadioButton/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'aria-describedby' | 'name' | 'value' | 'disabled' | 'defaultChecked' | 'required' | 'onChange'\n  > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the radioButton */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getRadioLabelClasses = (radioId: string, mode: FormMode, large: boolean, checkedRadioId?: string): string | undefined => {\n  const onCherry = mode === 'oninvalid';\n  const checked = radioId === checkedRadioId;\n\n  return classNames({\n    [radioButtonStyles['radio-button-label__large--on-grey']]: large && mode === 'ongrey' && !checked,\n    [radioButtonStyles['radio-button-label__large--on-blueberry']]: mode === 'onblueberry' && !checked && large,\n    [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n  });\n};\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked = false,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    mode = FormMode.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ...rest\n  } = props;\n  const invalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onCherry = mode === FormMode.oninvalid;\n  const isLarge = size === FormSize.large;\n  const [checked, changeChecked] = useState<boolean>(defaultChecked);\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper--with-error']]: errorText,\n    [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n    [radioButtonStyles['radio-button-wrapper__large--focused']]: isLarge && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(\n    radioButtonStyles['radio-button-label'],\n    {\n      [radioButtonStyles['radio-button-label--disabled']]: disabled,\n      [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n      [radioButtonStyles['radio-button-label--invalid']]: invalid,\n      [radioButtonStyles['radio-button-label__large']]: isLarge,\n      [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__large']]: isLarge,\n      [radioButtonStyles['radio-button__large--disabled']]: isLarge && disabled,\n      [radioButtonStyles['radio-button__large--invalid']]: isLarge && invalid,\n    },\n    className\n  );\n  const errorStyles = classNames(radioButtonStyles['radio-button-errors']);\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(e.target.checked);\n    onChange && onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={mergedRefs}\n      defaultChecked={defaultChecked}\n      aria-describedby={props['aria-describedby'] ?? undefined}\n      required={required}\n      {...rest}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n      {errorText && <p className={errorStyles}>{errorText}</p>}\n      {renderLabelAsParent(\n        label,\n        getLabelContent(),\n        inputId,\n        mode as FormMode,\n        disabled,\n        radioButtonLabelClasses,\n        undefined,\n        radioButtonStyles['radiobutton-sublabel-wrapper'],\n        isLarge\n      )}\n    </div>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":["getRadioLabelClasses","radioId","mode","large","checkedRadioId","onCherry","checked","classNames","radioButtonStyles","RadioButton","React","props","ref","className","defaultChecked","onChange","disabled","label","inputId","uuid","FormMode","name","size","errorText","error","value","getLabelText","testId","required","labelClassNames","rest","invalid","onDark","onBlueberry","isLarge","FormSize","changeChecked","useState","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","radioButtonWrapperClasses","radioButtonLabelClasses","radioButtonClasses","errorStyles","change","e","getLabelContent","AnalyticsId","renderLabelAsParent","RadioButton$1"],"mappings":"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"}
+{"version":3,"file":"RadioButton.js","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'aria-describedby' | 'name' | 'value' | 'disabled' | 'defaultChecked' | 'required' | 'onChange'\n  > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the radioButton */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getRadioLabelClasses = (radioId: string, mode: FormMode, large: boolean, checkedRadioId?: string): string | undefined => {\n  const onCherry = mode === 'oninvalid';\n  const checked = radioId === checkedRadioId;\n\n  return classNames({\n    [radioButtonStyles['radio-button-label__large--on-grey']]: large && mode === 'ongrey' && !checked,\n    [radioButtonStyles['radio-button-label__large--on-blueberry']]: mode === 'onblueberry' && !checked && large,\n    [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n  });\n};\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked = false,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    mode = FormMode.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ...rest\n  } = props;\n  const invalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onCherry = mode === FormMode.oninvalid;\n  const isLarge = size === FormSize.large;\n  const [checked, changeChecked] = useState<boolean>(defaultChecked);\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper--with-error']]: errorText,\n    [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n    [radioButtonStyles['radio-button-wrapper__large--focused']]: isLarge && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(\n    radioButtonStyles['radio-button-label'],\n    {\n      [radioButtonStyles['radio-button-label--disabled']]: disabled,\n      [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n      [radioButtonStyles['radio-button-label--invalid']]: invalid,\n      [radioButtonStyles['radio-button-label__large']]: isLarge,\n      [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__large']]: isLarge,\n      [radioButtonStyles['radio-button__large--disabled']]: isLarge && disabled,\n      [radioButtonStyles['radio-button__large--invalid']]: isLarge && invalid,\n    },\n    className\n  );\n  const errorStyles = classNames(radioButtonStyles['radio-button-errors']);\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(e.target.checked);\n    onChange && onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={mergedRefs}\n      defaultChecked={defaultChecked}\n      aria-describedby={props['aria-describedby'] ?? undefined}\n      required={required}\n      {...rest}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n      {errorText && <p className={errorStyles}>{errorText}</p>}\n      {renderLabelAsParent(\n        label,\n        getLabelContent(),\n        inputId,\n        mode as FormMode,\n        radioButtonLabelClasses,\n        undefined,\n        radioButtonStyles['radiobutton-sublabel-wrapper'],\n        isLarge\n      )}\n    </div>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":["getRadioLabelClasses","radioId","mode","large","checkedRadioId","onCherry","checked","classNames","radioButtonStyles","RadioButton","React","props","ref","className","defaultChecked","onChange","disabled","label","inputId","uuid","FormMode","name","size","errorText","error","value","getLabelText","testId","required","labelClassNames","rest","invalid","onDark","onBlueberry","isLarge","FormSize","changeChecked","useState","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","radioButtonWrapperClasses","radioButtonLabelClasses","radioButtonClasses","errorStyles","change","e","getLabelContent","AnalyticsId","renderLabelAsParent","RadioButton$1"],"mappings":"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"}

package/components/RadioButton/RadioButton.stories.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { FormMode, FormSize } from '../../constants';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./RadioButton").RadioButtonProps & React.RefAttributes<HTMLInputElement>>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        label: string;
+        defaultChecked: false;
+        disabled: false;
+        mode: FormMode.onwhite;
+        size: FormSize.medium;
+        name: string;
+        value: string;
+        required: false;
+    };
+    argTypes: {
+        label: {
+            control: string;
+        };
+        defaultChecked: {
+            control: string;
+        };
+        disabled: {
+            control: string;
+        };
+        mode: {
+            control: string;
+            options: typeof FormMode;
+        };
+        size: {
+            control: string;
+            options: typeof FormSize;
+        };
+        name: {
+            control: string;
+        };
+        value: {
+            control: string;
+        };
+        required: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Large: Story;

package/components/RadioButton/index.d.ts

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

package/components/Select/Select.d.ts

@@ -2,8 +2,6 @@ import React from 'react';
 import { FormMode } from '../../constants';
 type SelectConcept = 'normal' | 'transparent';
 export interface SelectProps extends Pick<React.SelectHTMLAttributes<HTMLSelectElement>, 'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'> {
-    /** Component shown after label */
-    afterLabelChildren?: React.ReactNode;
     /** Sets the content of the select element. */
     children: React.ReactNode;
     /** Adds custom classes to the element. */
@@ -29,4 +27,3 @@ export interface SelectProps extends Pick<React.SelectHTMLAttributes<HTMLSelectE
 }
 export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
 export default Select;
-//# sourceMappingURL=Select.d.ts.map