@helsenorge/designsystem-react 6.5.0 → 6.6.2

package/components/Logo/Logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.js","sources":["../../../src/components/Logo/Logo.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys/color';\n\ntype LogoColor = 'black' | 'white';\n\ninterface LogoProps {\n  /** Changes the size of the logo. */\n  size?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**\tChanges the color of the logo. */\n  color?: LogoColor;\n  /** Changes to the byline variant of the logo. */\n  byline?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Logo: React.FC<LogoProps> = ({ size = 300, color = 'black', byline = false, className, testId }) => {\n  const uuid = useUuid();\n\n  if (byline) {\n    return (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={size}\n        role={'img'}\n        aria-labelledby={uuid}\n        viewBox=\"0 0 87 12\"\n        className={className}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Logo}\n      >\n        <title id={uuid}>{'Helsenorge'}</title>\n        <g fill={getColor(color)}>\n          <path d=\"M5 .8v2.8H2.6V.8H1V8h1.6V5.1H5V8h1.6V.8zM20.9 6.6V.8h-1.6V8h4.5V6.6zM57.9 1.4c-1.7 0-2.8 1.4-2.8 3.4s1.2 3.4 2.8 3.4 2.8-1.4 2.8-3.4-1.1-3.4-2.8-3.4zm2 3.4c0 1.2-.5 2.7-2 2.7-1.4 0-2-1.4-2-2.7s.5-2.7 2-2.7 2 1.5 2 2.7zM86 4.7c0-2-1.1-3.3-2.8-3.3-1.7 0-2.8 1.4-2.8 3.4s1.2 3.4 2.9 3.4c1.2 0 2.2-.6 2.5-1.7l.1-.2H85v.1c-.3.6-.9 1-1.7 1-1.3 0-1.9-1.2-2-2.3H86v-.4zm-.9-.3h-3.9c.1-1.1.7-2.3 1.9-2.3 1.5 0 2 1.3 2 2.3zM49.2 1.4c-1.1 0-1.7.7-2 1.2v-1h-.8V8h.8V4.8c0-.9.5-2.6 1.9-2.6s1.6 1.2 1.6 2.6V8h.8V4.7c0-1.6-.2-3.3-2.3-3.3zM12.1 6.6V5h2.4V3.7h-2.4V2.2h3.2V.8h-4.8V8h4.9V6.6zM38.3 6.6V5h2.3V3.7h-2.3V2.2h3.2V.8h-4.8V8h4.9V6.6zM65.5 3.3V1.6h-.8V8h.8V4.1l2.8-2v-.9zM77.6 1.2l-1.5 1.1c-.5-.6-1.1-.9-1.9-.9-1.4 0-2.4 1-2.4 2.4 0 1.1.6 2 1.6 2.3l-1.6 1.8c-.4.5-.6.9-.6 1.3 0 1.3 1.1 2.1 2.9 2.1 1.7 0 2.9-.9 2.9-2.1 0-1.3-1.1-2.1-2.9-2.1h-.6l.8-.9c1.3-.1 2.3-1.1 2.3-2.4 0-.3 0-.6-.1-.8l1.2-.8v-1zM74 7.8c1.2 0 2.1.5 2.1 1.4 0 .8-.8 1.4-2.1 1.4-1.2 0-2-.5-2-1.4 0-.8.8-1.4 2-1.4zm.1-2.4c-.9 0-1.6-.7-1.6-1.7s.7-1.6 1.6-1.6c.9 0 1.6.7 1.6 1.6 0 1-.7 1.7-1.6 1.7zM30.4 3.7c-.7-.2-1.4-.5-1.4-1s.4-.7 1-.7.9.5.9.9V3h1.7v-.1c0-1.3-1.1-2.2-2.6-2.2-1.6 0-2.6.8-2.6 2.1 0 1.5 1.3 1.9 2.4 2.3.7.2 1.4.4 1.4.9s-.3.8-1.1.8c-.7 0-1.1-.4-1.1-1v-.1h-1.7v.1c0 1.5 1.1 2.4 2.8 2.4 1.7 0 2.7-.8 2.7-2.2-.1-1.5-1.4-2-2.4-2.3z\" />\n        </g>\n      </svg>\n    );\n  }\n\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={size}\n      role={'img'}\n      aria-labelledby={uuid}\n      viewBox=\"0 0 502 220\"\n      className={className}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Logo}\n    >\n      <title id={uuid}>{'Helsenorge'}</title>\n      <g fill={getColor(color)}>\n        <path d=\"M39.8 2.5v26.9H17V2.5H1v69.9h16V43.6h22.8v28.8h16.1V2.5zM250.3 58.6V2.5h-16v69.9h43.5V58.6zM142.9 122.5c-16.1 0-27.4 13.6-27.4 33.1s11.2 33.1 27.4 33.1 27.4-13.6 27.4-33.1-11.3-33.1-27.4-33.1zm19 33.1c0 11.9-5 25.9-19 25.9s-19-13.9-19-25.9c0-11.9 5-25.9 19-25.9s19 14 19 25.9zM501 40c0-19.1-11.1-32.4-27-32.4-16.4 0-27.4 13.3-27.4 33.1 0 19.5 11.5 33.1 28 33.1 12.2 0 21.4-6 24.7-16.2l.5-1.6h-8.3l-.3.7c-2.8 6.2-8.8 9.8-16.6 9.8-12.9 0-18.5-11.5-19.5-22.7H501V40zm-8.3-3.2h-37.6c1-10.8 6.5-21.9 18.9-21.9 13.2 0 18.3 12.6 18.7 21.9zM30.4 122.4c-10.8 0-16.6 6.7-19.5 11.8v-9.9H3.3v62.6h8.1v-31.4c0-8.4 4.4-25.7 18.1-25.7 14 0 15.9 12 15.9 25v32.1h8.1v-32.1c.1-16.1-2.7-32.4-23.1-32.4zM134.3 59V43H157V30h-22.7V15.9H165V2.5h-46.4v69.9h47.3V59zM466.7 173.4v-16h22.7v-13h-22.7v-14.1h30.7v-13.4H451v69.9h47.3v-13.4zM246.7 140.5v-16.3h-7.6v62.6h8.1v-37.6l27.3-19.6v-9zM393.5 120.6l-14.7 10.5c-4.4-5.6-11.2-8.7-18.8-8.7-13.6 0-23.6 9.8-23.6 23.3 0 10.6 6.2 19.1 16 22.2l-16 17.5c-4 4.6-5.7 8.3-5.7 12.7 0 12.6 11.1 20.7 28.2 20.7 16.9 0 28.3-8.3 28.3-20.7 0-12.5-11.1-20.6-28.3-20.6-1.7 0-3.9.2-5.6.5l8-9c12.9-.7 22.2-10.4 22.2-23.3 0-2.8-.4-5.5-1.2-7.8 0-.1-.1-.2-.1-.3l11.2-8.1v-8.9zm-34.4 64.2c12.1 0 20 5.2 20 13.4s-7.8 13.5-20 13.5c-12.1 0-19.9-5.3-19.9-13.5 0-7.8 8.3-13.4 19.9-13.4zm.9-23c-8.8 0-15.2-6.8-15.2-16 0-9.3 6.4-16 15.2-16s15.2 6.7 15.2 16c0 9.2-6.4 16-15.2 16zM366.7 30.3c-6.6-2.3-13.5-4.7-13.5-9.2 0-4.8 4.2-7 9.3-7 5.4 0 9 4.5 9 8.5v.8h16.2v-.6c0-13-10.2-21.7-25.4-21.7-15.3 0-24.9 7.8-24.9 20.4 0 14.7 13.1 18.4 22.9 21.9 6.5 2.4 13.6 4.3 13.6 8.7 0 4.6-3.4 8-10.6 8-6.5 0-10.9-3.8-10.9-9.4v-.8h-16.7v.8c0 14.5 10.3 23.1 27.5 23.1 16.5 0 26-7.6 26-21.5 0-14.4-12.5-18.5-22.5-22z\" />\n      </g>\n    </svg>\n  );\n};\n\nexport default Logo;\n"],"names":["Logo","size","color","byline","className","testId","uuid","useUuid","React","AnalyticsId","getColor","Logo$1"],"mappings":";;;;AAqBA,MAAMA,IAA4B,CAAC,EAAE,MAAAC,IAAO,KAAK,OAAAC,IAAQ,SAAS,QAAAC,IAAS,IAAO,WAAAC,GAAW,QAAAC,QAAa;AACxG,QAAMC,IAAOC;AAEb,SAAIJ,IAEAK,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,OAAOP;AAAA,MACP,MAAM;AAAA,MACN,mBAAiBK;AAAA,MACjB,SAAQ;AAAA,MACR,WAAAF;AAAA,MACA,eAAaC;AAAA,MACb,oBAAkBI,EAAY;AAAA,IAAA;AAAA,IAE7BD,gBAAAA,EAAA,cAAA,SAAA,EAAM,IAAIF,EAAA,GAAO,YAAa;AAAA,IAC/BE,gBAAAA,EAAA,cAAC,KAAE,EAAA,MAAME,EAASR,CAAK,KACpBM,gBAAAA,EAAA,cAAA,QAAA,EAAK,GAAE,wxCAAwxC,CAAA,CAClyC;AAAA,EAAA,IAMJA,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,OAAOP;AAAA,MACP,MAAM;AAAA,MACN,mBAAiBK;AAAA,MACjB,SAAQ;AAAA,MACR,WAAAF;AAAA,MACA,eAAaC;AAAA,MACb,oBAAkBI,EAAY;AAAA,IAAA;AAAA,IAE7BD,gBAAAA,EAAA,cAAA,SAAA,EAAM,IAAIF,EAAA,GAAO,YAAa;AAAA,IAC/BE,gBAAAA,EAAA,cAAC,KAAE,EAAA,MAAME,EAASR,CAAK,KACpBM,gBAAAA,EAAA,cAAA,QAAA,EAAK,GAAE,gqDAAgqD,CAAA,CAC1qD;AAAA,EAAA;AAGN,GAEAG,IAAeX;"}
+{"version":3,"file":"Logo.js","sources":["../../../src/components/Logo/Logo.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys/color';\n\ntype LogoColor = 'black' | 'white';\n\nexport interface LogoProps {\n  /** Changes the size of the logo. */\n  size?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**\tChanges the color of the logo. */\n  color?: LogoColor;\n  /** Changes to the byline variant of the logo. */\n  byline?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Logo: React.FC<LogoProps> = ({ size = 300, color = 'black', byline = false, className, testId }) => {\n  const uuid = useUuid();\n\n  if (byline) {\n    return (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={size}\n        role={'img'}\n        aria-labelledby={uuid}\n        viewBox=\"0 0 87 12\"\n        className={className}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Logo}\n      >\n        <title id={uuid}>{'Helsenorge'}</title>\n        <g fill={getColor(color)}>\n          <path d=\"M5 .8v2.8H2.6V.8H1V8h1.6V5.1H5V8h1.6V.8zM20.9 6.6V.8h-1.6V8h4.5V6.6zM57.9 1.4c-1.7 0-2.8 1.4-2.8 3.4s1.2 3.4 2.8 3.4 2.8-1.4 2.8-3.4-1.1-3.4-2.8-3.4zm2 3.4c0 1.2-.5 2.7-2 2.7-1.4 0-2-1.4-2-2.7s.5-2.7 2-2.7 2 1.5 2 2.7zM86 4.7c0-2-1.1-3.3-2.8-3.3-1.7 0-2.8 1.4-2.8 3.4s1.2 3.4 2.9 3.4c1.2 0 2.2-.6 2.5-1.7l.1-.2H85v.1c-.3.6-.9 1-1.7 1-1.3 0-1.9-1.2-2-2.3H86v-.4zm-.9-.3h-3.9c.1-1.1.7-2.3 1.9-2.3 1.5 0 2 1.3 2 2.3zM49.2 1.4c-1.1 0-1.7.7-2 1.2v-1h-.8V8h.8V4.8c0-.9.5-2.6 1.9-2.6s1.6 1.2 1.6 2.6V8h.8V4.7c0-1.6-.2-3.3-2.3-3.3zM12.1 6.6V5h2.4V3.7h-2.4V2.2h3.2V.8h-4.8V8h4.9V6.6zM38.3 6.6V5h2.3V3.7h-2.3V2.2h3.2V.8h-4.8V8h4.9V6.6zM65.5 3.3V1.6h-.8V8h.8V4.1l2.8-2v-.9zM77.6 1.2l-1.5 1.1c-.5-.6-1.1-.9-1.9-.9-1.4 0-2.4 1-2.4 2.4 0 1.1.6 2 1.6 2.3l-1.6 1.8c-.4.5-.6.9-.6 1.3 0 1.3 1.1 2.1 2.9 2.1 1.7 0 2.9-.9 2.9-2.1 0-1.3-1.1-2.1-2.9-2.1h-.6l.8-.9c1.3-.1 2.3-1.1 2.3-2.4 0-.3 0-.6-.1-.8l1.2-.8v-1zM74 7.8c1.2 0 2.1.5 2.1 1.4 0 .8-.8 1.4-2.1 1.4-1.2 0-2-.5-2-1.4 0-.8.8-1.4 2-1.4zm.1-2.4c-.9 0-1.6-.7-1.6-1.7s.7-1.6 1.6-1.6c.9 0 1.6.7 1.6 1.6 0 1-.7 1.7-1.6 1.7zM30.4 3.7c-.7-.2-1.4-.5-1.4-1s.4-.7 1-.7.9.5.9.9V3h1.7v-.1c0-1.3-1.1-2.2-2.6-2.2-1.6 0-2.6.8-2.6 2.1 0 1.5 1.3 1.9 2.4 2.3.7.2 1.4.4 1.4.9s-.3.8-1.1.8c-.7 0-1.1-.4-1.1-1v-.1h-1.7v.1c0 1.5 1.1 2.4 2.8 2.4 1.7 0 2.7-.8 2.7-2.2-.1-1.5-1.4-2-2.4-2.3z\" />\n        </g>\n      </svg>\n    );\n  }\n\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={size}\n      role={'img'}\n      aria-labelledby={uuid}\n      viewBox=\"0 0 502 220\"\n      className={className}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Logo}\n    >\n      <title id={uuid}>{'Helsenorge'}</title>\n      <g fill={getColor(color)}>\n        <path d=\"M39.8 2.5v26.9H17V2.5H1v69.9h16V43.6h22.8v28.8h16.1V2.5zM250.3 58.6V2.5h-16v69.9h43.5V58.6zM142.9 122.5c-16.1 0-27.4 13.6-27.4 33.1s11.2 33.1 27.4 33.1 27.4-13.6 27.4-33.1-11.3-33.1-27.4-33.1zm19 33.1c0 11.9-5 25.9-19 25.9s-19-13.9-19-25.9c0-11.9 5-25.9 19-25.9s19 14 19 25.9zM501 40c0-19.1-11.1-32.4-27-32.4-16.4 0-27.4 13.3-27.4 33.1 0 19.5 11.5 33.1 28 33.1 12.2 0 21.4-6 24.7-16.2l.5-1.6h-8.3l-.3.7c-2.8 6.2-8.8 9.8-16.6 9.8-12.9 0-18.5-11.5-19.5-22.7H501V40zm-8.3-3.2h-37.6c1-10.8 6.5-21.9 18.9-21.9 13.2 0 18.3 12.6 18.7 21.9zM30.4 122.4c-10.8 0-16.6 6.7-19.5 11.8v-9.9H3.3v62.6h8.1v-31.4c0-8.4 4.4-25.7 18.1-25.7 14 0 15.9 12 15.9 25v32.1h8.1v-32.1c.1-16.1-2.7-32.4-23.1-32.4zM134.3 59V43H157V30h-22.7V15.9H165V2.5h-46.4v69.9h47.3V59zM466.7 173.4v-16h22.7v-13h-22.7v-14.1h30.7v-13.4H451v69.9h47.3v-13.4zM246.7 140.5v-16.3h-7.6v62.6h8.1v-37.6l27.3-19.6v-9zM393.5 120.6l-14.7 10.5c-4.4-5.6-11.2-8.7-18.8-8.7-13.6 0-23.6 9.8-23.6 23.3 0 10.6 6.2 19.1 16 22.2l-16 17.5c-4 4.6-5.7 8.3-5.7 12.7 0 12.6 11.1 20.7 28.2 20.7 16.9 0 28.3-8.3 28.3-20.7 0-12.5-11.1-20.6-28.3-20.6-1.7 0-3.9.2-5.6.5l8-9c12.9-.7 22.2-10.4 22.2-23.3 0-2.8-.4-5.5-1.2-7.8 0-.1-.1-.2-.1-.3l11.2-8.1v-8.9zm-34.4 64.2c12.1 0 20 5.2 20 13.4s-7.8 13.5-20 13.5c-12.1 0-19.9-5.3-19.9-13.5 0-7.8 8.3-13.4 19.9-13.4zm.9-23c-8.8 0-15.2-6.8-15.2-16 0-9.3 6.4-16 15.2-16s15.2 6.7 15.2 16c0 9.2-6.4 16-15.2 16zM366.7 30.3c-6.6-2.3-13.5-4.7-13.5-9.2 0-4.8 4.2-7 9.3-7 5.4 0 9 4.5 9 8.5v.8h16.2v-.6c0-13-10.2-21.7-25.4-21.7-15.3 0-24.9 7.8-24.9 20.4 0 14.7 13.1 18.4 22.9 21.9 6.5 2.4 13.6 4.3 13.6 8.7 0 4.6-3.4 8-10.6 8-6.5 0-10.9-3.8-10.9-9.4v-.8h-16.7v.8c0 14.5 10.3 23.1 27.5 23.1 16.5 0 26-7.6 26-21.5 0-14.4-12.5-18.5-22.5-22z\" />\n      </g>\n    </svg>\n  );\n};\n\nexport default Logo;\n"],"names":["Logo","size","color","byline","className","testId","uuid","useUuid","React","AnalyticsId","getColor","Logo$1"],"mappings":";;;;AAqBA,MAAMA,IAA4B,CAAC,EAAE,MAAAC,IAAO,KAAK,OAAAC,IAAQ,SAAS,QAAAC,IAAS,IAAO,WAAAC,GAAW,QAAAC,QAAa;AACxG,QAAMC,IAAOC;AAEb,SAAIJ,IAEAK,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,OAAOP;AAAA,MACP,MAAM;AAAA,MACN,mBAAiBK;AAAA,MACjB,SAAQ;AAAA,MACR,WAAAF;AAAA,MACA,eAAaC;AAAA,MACb,oBAAkBI,EAAY;AAAA,IAAA;AAAA,IAE7BD,gBAAAA,EAAA,cAAA,SAAA,EAAM,IAAIF,EAAA,GAAO,YAAa;AAAA,IAC/BE,gBAAAA,EAAA,cAAC,KAAE,EAAA,MAAME,EAASR,CAAK,KACpBM,gBAAAA,EAAA,cAAA,QAAA,EAAK,GAAE,wxCAAwxC,CAAA,CAClyC;AAAA,EAAA,IAMJA,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,OAAOP;AAAA,MACP,MAAM;AAAA,MACN,mBAAiBK;AAAA,MACjB,SAAQ;AAAA,MACR,WAAAF;AAAA,MACA,eAAaC;AAAA,MACb,oBAAkBI,EAAY;AAAA,IAAA;AAAA,IAE7BD,gBAAAA,EAAA,cAAA,SAAA,EAAM,IAAIF,EAAA,GAAO,YAAa;AAAA,IAC/BE,gBAAAA,EAAA,cAAC,KAAE,EAAA,MAAME,EAASR,CAAK,KACpBM,gBAAAA,EAAA,cAAA,QAAA,EAAK,GAAE,gqDAAgqD,CAAA,CAC1qD;AAAA,EAAA;AAGN,GAEAG,IAAeX;"}

package/components/Logo/Logo.stories.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.FC<import("./Logo").LogoProps>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        color: "black";
+        size: number;
+        byline: false;
+    };
+    argTypes: {
+        color: {
+            control: string;
+            options: import("../../theme/palette").PaletteNames[];
+        };
+        size: {
+            control: string;
+        };
+        byline: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const Colors: Story;
+export declare const Byline: Story;
+//# sourceMappingURL=Logo.stories.d.ts.map

package/components/Modal/Modal.stories.d.ts

@@ -0,0 +1,73 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { ModalSize } from './Modal';
+import { ModalVariants } from './Modal';
+declare const meta: {
+    title: string;
+    component: {
+        (props: import("./Modal").ModalProps): JSX.Element;
+        defaultProps: {
+            variant: ModalVariants;
+            primaryButtonText: string;
+            titleId: string;
+            className: string;
+            size: ModalSize;
+            zIndex: import("../../constants").ZIndex;
+        };
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+            page: () => React.JSX.Element;
+        };
+    };
+    args: {
+        variant: ModalVariants.normal;
+        size: ModalSize.large;
+        title: string;
+        description: string;
+        primaryButtonText: string;
+        secondaryButtonText: string;
+    };
+    argTypes: {
+        variant: {
+            control: string;
+            options: typeof ModalVariants;
+        };
+        size: {
+            control: string;
+            options: typeof ModalSize;
+        };
+        title: {
+            control: string;
+        };
+        description: {
+            control: string;
+        };
+        primaryButtonText: {
+            control: string;
+        };
+        secondaryButtonText: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const ModalWithIcon: Story;
+export declare const ModalWithChildrenAfterTitle: Story;
+export declare const Scroll: Story;
+export declare const WithHorizontalImage4By3: Story;
+export declare const WithHorizontalImage16By9: Story;
+export declare const WithVerticalImage: Story;
+export declare const ModalWithoutCloseButton: Story;
+export declare const ModalWithDisabledButton: Story;
+export declare const ModalWithOnlyTitle: Story;
+export declare const ModalWithOnlyTitleAndNoCloseEvent: Story;
+export declare const ModalInBottomOfPage: Story;
+export declare const ModalWithCustomContent: Story;
+export declare const PrintModal: Story;
+//# sourceMappingURL=Modal.stories.d.ts.map

package/components/NotificationPanel/NotificationPanel.stories.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./NotificationPanel").NotificationPanelProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        dismissable: false;
+        size: "large";
+        fluid: false;
+        label: string;
+        variant: "alert";
+        role: undefined;
+    };
+    argTypes: {
+        dismissable: {
+            control: string;
+        };
+        size: {
+            control: string;
+            options: string[];
+        };
+        fluid: {
+            control: string;
+        };
+        label: {
+            control: string;
+        };
+        variant: {
+            control: string;
+            options: string[];
+        };
+        role: {
+            control: string;
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithoutLabel: Story;
+export declare const AllVariants: Story;
+export declare const Expander: Story;
+export declare const Dismissable: Story;
+export declare const Compact: Story;
+export declare const WithSetWidth: Story;
+//# sourceMappingURL=NotificationPanel.stories.d.ts.map

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

@@ -0,0 +1,89 @@
+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;
+//# sourceMappingURL=Panel.stories.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 */

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} 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;"}

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

@@ -0,0 +1,27 @@
+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;
+//# sourceMappingURL=PanelList.stories.d.ts.map

package/components/PopMenu/PopMenu.js

@@ -1,77 +1,89 @@
-import t, { useRef as s, useState as g } from "react";
-import a from "classnames";
-import { IconSize as I, AnalyticsId as w } from "../../constants.js";
-import { useBreakpoint as H } from "../../hooks/useBreakpoint.js";
-import { useHover as z } from "../../hooks/useHover.js";
-import { useOutsideEvent as A } from "../../hooks/useOutsideEvent.js";
-import { getColor as M } from "../../theme/currys/color.js";
-import { breakpoints as P } from "../../theme/grid.js";
-import { isComponent as T } from "../../utils/component.js";
-import $ from "../Close/Close.js";
-import { Icon as x } from "../Icon/Icon.js";
-import D from "../Icons/VerticalDots.js";
-import G from "../LinkList/LinkList.js";
-import W from "../PopOver/PopOver.js";
+import o, { useRef as a, useState as A } from "react";
+import p from "classnames";
+import { IconSize as k, AnalyticsId as M } from "../../constants.js";
+import { useBreakpoint as P } from "../../hooks/useBreakpoint.js";
+import { useHover as T } from "../../hooks/useHover.js";
+import { useOutsideEvent as $ } from "../../hooks/useOutsideEvent.js";
+import { getColor as x } from "../../theme/currys/color.js";
+import { breakpoints as D } from "../../theme/grid.js";
+import { isComponent as v } from "../../utils/component.js";
+import G from "../Close/Close.js";
+import { Icon as W } from "../Icon/Icon.js";
+import X from "../Icons/VerticalDots.js";
+import I from "../LinkList/LinkList.js";
+import j from "../PopOver/PopOver.js";
 import r from "./styles.module.scss";
-var X = /* @__PURE__ */ ((e) => (e.onWhite = "on-white", e.onGray = "on-gray", e.onBlueberry = "on-blueberry", e))(X || {});
-const j = (e) => {
-  const l = s(null), m = s(null), p = s(null), [n, i] = g(!1), {
-    children: c,
-    popOverClassName: C,
-    popMenuClassName: k,
-    openButtonTestId: B,
-    closeButtonTestId: N,
-    popOverTestId: y,
-    popMenuVariant: u = "on-white",
-    openButtonAriaLabel: O,
-    closeButtonAriaLabel: h
-  } = e, f = a(r["pop-menu-button"], {
-    [r[`pop-menu-button--${u}`]]: u
-  }), d = H() < P.md;
-  A(p, () => i(!n));
-  const { isHovered: E } = z(m), R = d ? I.XSmall : I.Small, S = () => {
-    if (T(c, G))
-      return /* @__PURE__ */ t.createElement(
-        W,
+var q = /* @__PURE__ */ ((n) => (n.onWhite = "on-white", n.onGray = "on-gray", n.onBlueberry = "on-blueberry", n))(q || {});
+const F = (n) => {
+  const m = a(null), i = a(null), c = a(null), [s, l] = A(!1), {
+    children: u,
+    popOverClassName: B,
+    popMenuClassName: N,
+    openButtonTestId: y,
+    closeButtonTestId: E,
+    popOverTestId: O,
+    popMenuVariant: f = "on-white",
+    openButtonAriaLabel: h,
+    closeButtonAriaLabel: L
+  } = n, d = p(r["pop-menu-button"], {
+    [r[`pop-menu-button--${f}`]]: f
+  }), b = P() < D.md;
+  $(c, () => l(!s));
+  const { isHovered: R } = T(i), S = b ? k.XSmall : k.Small, _ = (e) => {
+    l(!1), e && e();
+  }, g = () => {
+    if (v(u, I))
+      return /* @__PURE__ */ o.createElement(
+        j,
         {
-          testId: y,
-          className: a(r["pop-menu__pop-over"], C),
+          testId: O,
+          className: p(r["pop-menu__pop-over"], B),
           arrowClassName: r["pop-menu__pop-over-arrow"],
-          controllerRef: l,
-          popOverRef: p
+          controllerRef: m,
+          popOverRef: c
         },
-        c
+        o.Children.map(
+          u,
+          (e) => o.cloneElement(e, {
+            children: o.Children.map(
+              e.props.children,
+              (t) => v(t, I.Link) ? o.cloneElement(t, {
+                onClick: (z) => _(() => t.props.onClick && t.props.onClick(z))
+              }) : t
+            )
+          })
+        )
       );
-  }, b = (o, v) => {
-    v && v.stopPropagation(), i(o);
-  }, _ = /* @__PURE__ */ t.createElement(
+  }, C = (e, t) => {
+    t && t.stopPropagation(), l(e);
+  }, w = /* @__PURE__ */ o.createElement(
     "button",
     {
-      ref: m,
-      "data-testid": B,
-      className: f,
-      "aria-label": O || "Se mer",
-      onClick: (o) => b(!0, o),
+      ref: i,
+      "data-testid": y,
+      className: d,
+      "aria-label": h || "Se mer",
+      onClick: (e) => C(!0, e),
       type: "button"
     },
-    /* @__PURE__ */ t.createElement(x, { svgIcon: D, className: "test", color: M("black"), size: R, isHovered: E })
-  ), L = /* @__PURE__ */ t.createElement(
-    $,
+    /* @__PURE__ */ o.createElement(W, { svgIcon: X, className: "test", color: x("black"), size: S, isHovered: R })
+  ), H = /* @__PURE__ */ o.createElement(
+    G,
     {
-      ariaLabel: h,
+      ariaLabel: L,
       color: "black",
-      className: f,
-      testId: N,
-      ref: l,
-      onClick: (o) => b(!1, o),
-      small: d
+      className: d,
+      testId: E,
+      ref: m,
+      onClick: (e) => C(!1, e),
+      small: b
     }
   );
-  return /* @__PURE__ */ t.createElement("div", { className: a(r["pop-menu-button"], k), "data-analyticsid": w.PopMenu }, n ? L : _, n && S());
-}, le = j;
+  return /* @__PURE__ */ o.createElement("div", { className: p(r["pop-menu-button"], N), "data-analyticsid": M.PopMenu }, s ? H : w, s && g());
+}, me = F;
 export {
-  j as PopMenu,
-  X as PopMenuVariant,
-  le as default
+  F as PopMenu,
+  q as PopMenuVariant,
+  me as default
 };
 //# sourceMappingURL=PopMenu.js.map

package/components/PopMenu/PopMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopMenu.js","sources":["../../../src/components/PopMenu/PopMenu.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { isComponent } from '../../utils/component';\nimport Close from '../Close';\nimport Icon from '../Icon';\nimport VerticalDots from '../Icons/VerticalDots';\nimport LinkList, { LinkListProps } from '../LinkList';\nimport PopOver from '../PopOver';\n\nimport styles from './styles.module.scss';\n\nexport enum PopMenuVariant {\n  onWhite = 'on-white',\n  onGray = 'on-gray',\n  onBlueberry = 'on-blueberry',\n}\n\nexport interface PopMenuProps {\n  /** Content shown inside PopOver. Can only be a LinkList */\n  children: React.ReactElement<LinkListProps>;\n  /** Adds custom classes to the popover element. */\n  popOverClassName?: string;\n  /** Adds custom classes to the element. */\n  popMenuClassName?: string;\n  /** Changes responsive design for the trigger buttons. */\n  popMenuVariant?: PopMenuVariant;\n  /** Sets the data-testid attribute for the button that opens. */\n  openButtonTestId?: string;\n  /** Sets the data-testid attribute for the button that closes. */\n  closeButtonTestId?: string;\n  /** Sets the data-testid attribute for the popover. */\n  popOverTestId?: string;\n  /** Sets the arial-label attribute for the openButton. */\n  openButtonAriaLabel?: string;\n  /** Sets the arial-label attribute for the closeButton. */\n  closeButtonAriaLabel?: string;\n}\n\nexport const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {\n  const closeRef = useRef<HTMLButtonElement>(null);\n  const openRef = useRef<HTMLButtonElement>(null);\n  const popOverRef = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const {\n    children,\n    popOverClassName,\n    popMenuClassName,\n    openButtonTestId,\n    closeButtonTestId,\n    popOverTestId,\n    popMenuVariant = PopMenuVariant.onWhite,\n    openButtonAriaLabel,\n    closeButtonAriaLabel,\n  } = props;\n  const buttonClasses = classNames(styles['pop-menu-button'], {\n    [styles[`pop-menu-button--${popMenuVariant}`]]: popMenuVariant,\n  });\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\n  useOutsideEvent(popOverRef, () => setIsOpen(!isOpen));\n  const { isHovered: openButtonIsHovered } = useHover(openRef);\n  const mobileIconSize = mobile ? IconSize.XSmall : IconSize.Small;\n\n  const renderChildren = () => {\n    if (isComponent<LinkListProps>(children, LinkList)) {\n      return (\n        <PopOver\n          testId={popOverTestId}\n          className={classNames(styles['pop-menu__pop-over'], popOverClassName)}\n          arrowClassName={styles['pop-menu__pop-over-arrow']}\n          controllerRef={closeRef}\n          popOverRef={popOverRef}\n        >\n          {children}\n        </PopOver>\n      );\n    }\n  };\n\n  const handleOnClick = (isOpen: boolean, e?: React.MouseEvent<HTMLElement, MouseEvent>): void => {\n    e && e.stopPropagation();\n    setIsOpen(isOpen);\n  };\n\n  const openButton = (\n    <button\n      ref={openRef}\n      data-testid={openButtonTestId}\n      className={buttonClasses}\n      aria-label={openButtonAriaLabel || 'Se mer'}\n      onClick={(e?: React.MouseEvent<HTMLElement, MouseEvent>) => handleOnClick(true, e)}\n      type=\"button\"\n    >\n      <Icon svgIcon={VerticalDots} className=\"test\" color={getColor('black')} size={mobileIconSize} isHovered={openButtonIsHovered} />\n    </button>\n  );\n\n  const closeButton = (\n    <Close\n      ariaLabel={closeButtonAriaLabel}\n      color=\"black\"\n      className={buttonClasses}\n      testId={closeButtonTestId}\n      ref={closeRef}\n      onClick={(e?: React.MouseEvent<HTMLElement, MouseEvent>) => handleOnClick(false, e)}\n      small={mobile}\n    />\n  );\n\n  return (\n    <div className={classNames(styles['pop-menu-button'], popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n      {!isOpen ? openButton : closeButton}\n      {isOpen && renderChildren()}\n    </div>\n  );\n};\n\nexport default PopMenu;\n"],"names":["PopMenuVariant","PopMenu","props","closeRef","useRef","openRef","popOverRef","isOpen","setIsOpen","useState","children","popOverClassName","popMenuClassName","openButtonTestId","closeButtonTestId","popOverTestId","popMenuVariant","openButtonAriaLabel","closeButtonAriaLabel","buttonClasses","classNames","styles","mobile","useBreakpoint","breakpoints","useOutsideEvent","openButtonIsHovered","useHover","mobileIconSize","IconSize","renderChildren","isComponent","LinkList","React","PopOver","handleOnClick","e","openButton","Icon","VerticalDots","getColor","closeButton","Close","AnalyticsId","PopMenu$1"],"mappings":";;;;;;;;;;;;;;;AAmBY,IAAAA,sBAAAA,OACVA,EAAA,UAAU,YACVA,EAAA,SAAS,WACTA,EAAA,cAAc,gBAHJA,IAAAA,KAAA,CAAA,CAAA;AA2BC,MAAAC,IAAkC,CAACC,MAAwB;AAChE,QAAAC,IAAWC,EAA0B,IAAI,GACzCC,IAAUD,EAA0B,IAAI,GACxCE,IAAaF,EAAuB,IAAI,GACxC,CAACG,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC;AAAA,IACJ,UAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,qBAAAC;AAAA,IACA,sBAAAC;AAAA,EACE,IAAAhB,GACEiB,IAAgBC,EAAWC,EAAO,iBAAiB,GAAG;AAAA,IAC1D,CAACA,EAAO,oBAAoBL,CAAc,EAAE,CAAC,GAAGA;AAAA,EAAA,CACjD,GAEKM,IADaC,MACSC,EAAY;AACxC,EAAAC,EAAgBnB,GAAY,MAAME,EAAU,CAACD,CAAM,CAAC;AACpD,QAAM,EAAE,WAAWmB,EAAoB,IAAIC,EAAStB,CAAO,GACrDuB,IAAiBN,IAASO,EAAS,SAASA,EAAS,OAErDC,IAAiB,MAAM;AACvB,QAAAC,EAA2BrB,GAAUsB,CAAQ;AAE7C,aAAAC,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,QAAQnB;AAAA,UACR,WAAWK,EAAWC,EAAO,oBAAoB,GAAGV,CAAgB;AAAA,UACpE,gBAAgBU,EAAO,0BAA0B;AAAA,UACjD,eAAelB;AAAA,UACf,YAAAG;AAAA,QAAA;AAAA,QAECI;AAAA,MAAA;AAAA,EAGP,GAGIyB,IAAgB,CAAC5B,GAAiB6B,MAAwD;AAC9F,IAAAA,KAAKA,EAAE,mBACP5B,EAAUD,CAAM;AAAA,EAAA,GAGZ8B,IACJJ,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK5B;AAAA,MACL,eAAaQ;AAAA,MACb,WAAWM;AAAA,MACX,cAAYF,KAAuB;AAAA,MACnC,SAAS,CAACmB,MAAkDD,EAAc,IAAMC,CAAC;AAAA,MACjF,MAAK;AAAA,IAAA;AAAA,IAEJH,gBAAAA,EAAA,cAAAK,GAAA,EAAK,SAASC,GAAc,WAAU,QAAO,OAAOC,EAAS,OAAO,GAAG,MAAMZ,GAAgB,WAAWF,GAAqB;AAAA,EAAA,GAI5He,IACJR,gBAAAA,EAAA;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,WAAWxB;AAAA,MACX,OAAM;AAAA,MACN,WAAWC;AAAA,MACX,QAAQL;AAAA,MACR,KAAKX;AAAA,MACL,SAAS,CAACiC,MAAkDD,EAAc,IAAOC,CAAC;AAAA,MAClF,OAAOd;AAAA,IAAA;AAAA,EAAA;AAIX,yCACG,OAAI,EAAA,WAAWF,EAAWC,EAAO,iBAAiB,GAAGT,CAAgB,GAAG,oBAAkB+B,EAAY,WACnGpC,IAAsBkC,IAAbJ,GACV9B,KAAUuB,GACb;AAEJ,GAEAc,KAAe3C;"}
+{"version":3,"file":"PopMenu.js","sources":["../../../src/components/PopMenu/PopMenu.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { isComponent } from '../../utils/component';\nimport Close from '../Close';\nimport Icon from '../Icon';\nimport VerticalDots from '../Icons/VerticalDots';\nimport LinkList, { LinkListProps, LinkProps } from '../LinkList';\nimport PopOver from '../PopOver';\n\nimport styles from './styles.module.scss';\n\nexport enum PopMenuVariant {\n  onWhite = 'on-white',\n  onGray = 'on-gray',\n  onBlueberry = 'on-blueberry',\n}\n\nexport interface PopMenuProps {\n  /** Content shown inside PopOver. Can only be a LinkList */\n  children: React.ReactElement<LinkListProps>;\n  /** Adds custom classes to the popover element. */\n  popOverClassName?: string;\n  /** Adds custom classes to the element. */\n  popMenuClassName?: string;\n  /** Changes responsive design for the trigger buttons. */\n  popMenuVariant?: PopMenuVariant;\n  /** Sets the data-testid attribute for the button that opens. */\n  openButtonTestId?: string;\n  /** Sets the data-testid attribute for the button that closes. */\n  closeButtonTestId?: string;\n  /** Sets the data-testid attribute for the popover. */\n  popOverTestId?: string;\n  /** Sets the arial-label attribute for the openButton. */\n  openButtonAriaLabel?: string;\n  /** Sets the arial-label attribute for the closeButton. */\n  closeButtonAriaLabel?: string;\n}\n\nexport const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {\n  const closeRef = useRef<HTMLButtonElement>(null);\n  const openRef = useRef<HTMLButtonElement>(null);\n  const popOverRef = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const {\n    children,\n    popOverClassName,\n    popMenuClassName,\n    openButtonTestId,\n    closeButtonTestId,\n    popOverTestId,\n    popMenuVariant = PopMenuVariant.onWhite,\n    openButtonAriaLabel,\n    closeButtonAriaLabel,\n  } = props;\n  const buttonClasses = classNames(styles['pop-menu-button'], {\n    [styles[`pop-menu-button--${popMenuVariant}`]]: popMenuVariant,\n  });\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\n  useOutsideEvent(popOverRef, () => setIsOpen(!isOpen));\n  const { isHovered: openButtonIsHovered } = useHover(openRef);\n  const mobileIconSize = mobile ? IconSize.XSmall : IconSize.Small;\n\n  const handleClick = (cb?: () => void): void => {\n    setIsOpen(false);\n    cb && cb();\n  };\n\n  const renderChildren = () => {\n    if (isComponent<LinkListProps>(children, LinkList)) {\n      return (\n        <PopOver\n          testId={popOverTestId}\n          className={classNames(styles['pop-menu__pop-over'], popOverClassName)}\n          arrowClassName={styles['pop-menu__pop-over-arrow']}\n          controllerRef={closeRef}\n          popOverRef={popOverRef}\n        >\n          {React.Children.map(children, child =>\n            React.cloneElement(child, {\n              children: React.Children.map(child.props.children, child =>\n                isComponent<LinkProps>(child, LinkList.Link)\n                  ? React.cloneElement(child, {\n                      onClick: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) =>\n                        handleClick(() => child.props.onClick && child.props.onClick(event)),\n                    })\n                  : child\n              ),\n            })\n          )}\n        </PopOver>\n      );\n    }\n  };\n\n  const handleOnClick = (isOpen: boolean, e?: React.MouseEvent<HTMLElement, MouseEvent>): void => {\n    e && e.stopPropagation();\n    setIsOpen(isOpen);\n  };\n\n  const openButton = (\n    <button\n      ref={openRef}\n      data-testid={openButtonTestId}\n      className={buttonClasses}\n      aria-label={openButtonAriaLabel || 'Se mer'}\n      onClick={(e): void => handleOnClick(true, e)}\n      type=\"button\"\n    >\n      <Icon svgIcon={VerticalDots} className=\"test\" color={getColor('black')} size={mobileIconSize} isHovered={openButtonIsHovered} />\n    </button>\n  );\n\n  const closeButton = (\n    <Close\n      ariaLabel={closeButtonAriaLabel}\n      color=\"black\"\n      className={buttonClasses}\n      testId={closeButtonTestId}\n      ref={closeRef}\n      onClick={(e): void => handleOnClick(false, e)}\n      small={mobile}\n    />\n  );\n\n  return (\n    <div className={classNames(styles['pop-menu-button'], popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n      {!isOpen ? openButton : closeButton}\n      {isOpen && renderChildren()}\n    </div>\n  );\n};\n\nexport default PopMenu;\n"],"names":["PopMenuVariant","PopMenu","props","closeRef","useRef","openRef","popOverRef","isOpen","setIsOpen","useState","children","popOverClassName","popMenuClassName","openButtonTestId","closeButtonTestId","popOverTestId","popMenuVariant","openButtonAriaLabel","closeButtonAriaLabel","buttonClasses","classNames","styles","mobile","useBreakpoint","breakpoints","useOutsideEvent","openButtonIsHovered","useHover","mobileIconSize","IconSize","handleClick","cb","renderChildren","isComponent","LinkList","React","PopOver","child","event","handleOnClick","e","openButton","Icon","VerticalDots","getColor","closeButton","Close","AnalyticsId","PopMenu$1"],"mappings":"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"}

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

@@ -0,0 +1,29 @@
+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;
+//# sourceMappingURL=PopMenu.stories.d.ts.map

package/components/PopOver/PopOver.d.ts

@@ -26,6 +26,8 @@ export interface PopOverProps {
     role?: PopOverRole;
     /** Sets the data-testid attribute. */
     testId?: string;
+    /** Overrides the default z-index of PopOver */
+    zIndex?: number;
 }
 declare const PopOver: React.ForwardRefExoticComponent<PopOverProps & React.RefAttributes<HTMLDivElement | SVGSVGElement>>;
 export default PopOver;