npm - @helsenorge/designsystem-react - Versions diffs - 6.1.2 → 6.2.0 - Mend

@helsenorge/designsystem-react 6.1.2 → 6.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/CHANGELOG.md +19 -0
package/components/PromoPanel/PromoPanel.d.ts.map +1 -1
package/components/PromoPanel/PromoPanel.js +14 -14
package/components/PromoPanel/PromoPanel.js.map +1 -1
package/components/PromoPanel/styles.module.scss +0 -9
package/components/Slider/Slider.d.ts +3 -1
package/components/Slider/Slider.d.ts.map +1 -1
package/components/Slider/Slider.js +100 -91
package/components/Slider/Slider.js.map +1 -1
package/components/Slider/styles.module.scss +13 -11
package/components/Slider/styles.module.scss.d.ts +1 -0
package/package.json +1 -1

package/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,22 @@
+## [6.1.3](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv6.1.2&targetVersion=GTv6.1.3) (2024-02-14)
+### Bug Fixes
+- promopanel har ikke lenger lg breakpoint
+  ([2c332e5](https://github.com/helsenorge/designsystem/commit/2c332e5a17aca128d09a293a56daf484a2a26d53)), closes
+  [#319556](https://github.com/helsenorge/designsystem/issues/319556)
+## [6.1.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv6.1.1&targetVersion=GTv6.1.2) (2024-02-12)
+### Bug Fixes
+- datepicker date-fns gjøres external
+  ([36d749c](https://github.com/helsenorge/designsystem/commit/36d749cfd83f16ac45d8fd8eb0bf5b31d7b02b7d)), closes
+  [#318830](https://github.com/helsenorge/designsystem/issues/318830)
+- input, textarea, dropdown og select har dashed border når disabled
+  ([5f5c4ca](https://github.com/helsenorge/designsystem/commit/5f5c4ca5a12d41f0413da4319e24fb8c0e6c7437)), closes
+  [#308128](https://github.com/helsenorge/designsystem/issues/308128)
 ## [6.1.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv6.1.0&targetVersion=GTv6.1.1) (2024-02-06)
 ### Bug Fixes

package/components/PromoPanel/PromoPanel.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PromoPanel.d.ts","sourceRoot":"","sources":["../../../src/components/PromoPanel/PromoPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAKlE,OAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAI5C,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,YAAY,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC,CAAC;AAEzF,UAAU,eAAe;IACvB,wGAAwG;IACxG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,QAAQ,GAAG,qBAAqB,CAAC;IAChD,mDAAmD;IACnD,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,mDAAmD;IACnD,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wHAAwH;IACxH,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,gFAAgF;IAChF,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,8EAA8E;IAC9E,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,gFAAgF;IAChF,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IACnC,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA8BD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,~~CAiEzC~~,CAAC;AAEF,eAAe,UAAU,CAAC"}
1	+ {"version":3,"file":"PromoPanel.d.ts","sourceRoot":"","sources":["../../../src/components/PromoPanel/PromoPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAKlE,OAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAI5C,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,YAAY,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC,CAAC;AAEzF,UAAU,eAAe;IACvB,wGAAwG;IACxG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,QAAQ,GAAG,qBAAqB,CAAC;IAChD,mDAAmD;IACnD,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,mDAAmD;IACnD,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wHAAwH;IACxH,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,gFAAgF;IAChF,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,8EAA8E;IAC9E,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,gFAAgF;IAChF,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IACnC,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA8BD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA8DzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/components/PromoPanel/PromoPanel.js CHANGED Viewed

@@ -1,21 +1,21 @@
 import t from "react";
 import h from "classnames";
-import { AnalyticsId as C, IconSize as a } from "../../constants.js";
-import { useBreakpoint as g, Breakpoint as r } from "../../hooks/useBreakpoint.js";
-import { useHover as E } from "../../hooks/useHover.js";
+import { AnalyticsId as C, IconSize as i } from "../../constants.js";
+import { useBreakpoint as E, Breakpoint as a } from "../../hooks/useBreakpoint.js";
+import { useHover as P } from "../../hooks/useHover.js";
 import { getColor as m } from "../../theme/currys/color.js";
-import { Icon as P } from "../Icon/Icon.js";
-import b from "../Icons/ArrowRight.js";
+import { Icon as b } from "../Icon/Icon.js";
+import g from "../Icons/ArrowRight.js";
 import _ from "../Icons/ArrowUpRight.js";
 import v from "../LazyIllustration/LazyIllustration.js";
 import y from "../Title/Title.js";
 import n from "./styles.module.scss";
 const I = (e) => e.linkComponent ? t.cloneElement(e.linkComponent, { children: e.children }) : e.linkHtmlMarkup === "button" ? /* @__PURE__ */ t.createElement("button", { type: "button", onClick: e.linkOnClick }, e.children) : /* @__PURE__ */ t.createElement("a", { href: e.href, target: e.target, onClick: e.linkOnClick }, e.children), N = (e) => {
-  const { isHovered: c, hoverRef: u } = E(), { color: o = "neutral", titleHtmlMarkup: k = "h2", linkHtmlMarkup: f = "a" } = e, l = g(), s = h(
+  const { isHovered: c, hoverRef: u } = P(), { color: l = "neutral", titleHtmlMarkup: k = "h2", linkHtmlMarkup: f = "a" } = e, r = E(), s = h(
     n.promopanel,
-    n[`promopanel--${o}`],
+    n[`promopanel--${l}`],
     !e.illustration && n["promopanel--no-illustration"]
-  ), i = /* @__PURE__ */ t.createElement(
+  ), o = /* @__PURE__ */ t.createElement(
     I,
     {
       href: e.href,
@@ -25,20 +25,20 @@ const I = (e) => e.linkComponent ? t.cloneElement(e.linkComponent, { children: e
       linkOnClick: e.linkOnClick
     },
     e.title || e.children
-  ), d = (() => l >= r.lg ? 180 : l >= r.md ? 156 : 120)();
+  ), d = (() => r >= a.md ? 156 : 120)();
   return /* @__PURE__ */ t.createElement("div", { className: s, "data-testid": e.testId, "data-analyticsid": C.PromoPanel, ref: u }, e.illustration && /* @__PURE__ */ t.createElement(
     v,
     {
       illustrationName: e.illustration,
       size: d,
-      color: o,
+      color: l,
       className: n.promopanel__illustration
     }
-  ), /* @__PURE__ */ t.createElement("div", { className: n.promopanel__content }, e.title && /* @__PURE__ */ t.createElement(y, { htmlMarkup: k, appearance: "title3" }, i), e.title ? e.children : i), /* @__PURE__ */ t.createElement("div", { className: n.promopanel__icon }, /* @__PURE__ */ t.createElement(
-    P,
+  ), /* @__PURE__ */ t.createElement("div", { className: n.promopanel__content }, e.title && /* @__PURE__ */ t.createElement(y, { htmlMarkup: k, appearance: "title3" }, o), e.title ? e.children : o), /* @__PURE__ */ t.createElement("div", { className: n.promopanel__icon }, /* @__PURE__ */ t.createElement(
+    b,
     {
-      svgIcon: e.target === "_blank" ? _ : b,
-      size: l >= r.md ? a.Small : a.XSmall,
+      svgIcon: e.target === "_blank" ? _ : g,
+      size: r >= a.md ? i.Small : i.XSmall,
       isHovered: c,
       color: m("blueberry", 500),
       hoverColor: m("blueberry", 600)

package/components/PromoPanel/PromoPanel.js.map CHANGED Viewed

	@@ -1 +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.~~lg) {\n return 180;\n }\n if (breakpoint >= Breakpoint.~~md) {\n return 156;\n }\n\n return 120;\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 <div className={styles.promopanel__icon}>\n <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 </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,~~MAELP,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,EAAA,GAGrBZ,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWY,EAAO,oBACpB,GAAAb,EAAM,SACLC,gBAAAA,EAAA,cAACkB,GAAM,EAAA,YAAYZ,GAAiB,YAAY,SAC7C,GAAAO,CACH,GAEAd,EAAM,QAAyBA,EAAM,WAAvBc,CAClB,GACCb,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWY,EAAO,iBACrB,GAAAZ,gBAAAA,EAAA;AAAA,IAACmB;AAAA,IAAA;AAAA,MACC,SAASpB,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,EAEzC,CAAA,CACF;AAEJ,GAEAC,IAAevB;"}
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 120;\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 <div className={styles.promopanel__icon}>\n <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 </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,EAAA,GAGrBZ,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWY,EAAO,oBACpB,GAAAb,EAAM,SACLC,gBAAAA,EAAA,cAACkB,GAAM,EAAA,YAAYZ,GAAiB,YAAY,SAC7C,GAAAO,CACH,GAEAd,EAAM,QAAyBA,EAAM,WAAvBc,CAClB,GACCb,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWY,EAAO,iBACrB,GAAAZ,gBAAAA,EAAA;AAAA,IAACmB;AAAA,IAAA;AAAA,MACC,SAASpB,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,EAEzC,CAAA,CACF;AAEJ,GAEAC,IAAevB;"}

package/components/PromoPanel/styles.module.scss CHANGED Viewed

@@ -67,11 +67,6 @@ $colors: 'neutral', 'blueberry', 'cherry';
       padding-bottom: getSpacer(l);
     }
-    @media (min-width: map.get($grid-breakpoints, lg)) {
-      padding-top: getSpacer(xl);
-      padding-bottom: getSpacer(xl);
-    }
     a,
     button {
       all: unset;
@@ -96,9 +91,5 @@ $colors: 'neutral', 'blueberry', 'cherry';
     @media (min-width: map.get($grid-breakpoints, sm)) {
       display: block;
     }
-    @media (min-width: map.get($grid-breakpoints, lg)) {
-      padding-left: getSpacer(l);
-    }
   }
 }

package/components/Slider/Slider.d.ts CHANGED Viewed

@@ -20,7 +20,9 @@ interface SliderProps {
     maxValue?: number;
     /** Function to be called when the value state has changed. */
     onChange?: (value: number) => void;
-    /** Sets the steps data for the slider*/
+    /** If set to false will only trigger onChange once a user interaction has been made, updates to this prop will be taken into account - true by default */
+    selected?: boolean;
+    /** Sets the steps data for the slider */
     steps?: SliderStep[];
     /** Sets the step to move per point in the slider */
     step?: number;

package/components/Slider/Slider.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAgC3D,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,UAAU,WAAW;IACnB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,~~wCAAwC~~;~~IACxC~~,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,~~CA4QxC~~,CAAC;AAEF,eAAe,MAAM,CAAC"}
1	+ {"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAgC3D,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,UAAU,WAAW;IACnB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,0JAA0J;IAC1J,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA+RxC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/components/Slider/Slider.js CHANGED Viewed

@@ -1,165 +1,174 @@
-import a, { useState as R, useRef as U, useEffect as h } from "react";
-import S from "classnames";
-import { AnalyticsId as F } from "../../constants.js";
-import { useSize as G } from "../../hooks/useSize.js";
-import { useUuid as j } from "../../hooks/useUuid.js";
-import { getAriaLabelAttributes as J } from "../../utils/accessibility.js";
-import Q from "../Title/Title.js";
-import o from "./styles.module.scss";
-const Y = (u, f, l) => {
-  const [v, n] = R(u), E = (t) => {
-    t > l ? n(l) : t < f ? n(f) : n(t);
+import o, { useState as M, useRef as T, useEffect as E } from "react";
+import A from "classnames";
+import { AnalyticsId as Y } from "../../constants.js";
+import { useSize as Z } from "../../hooks/useSize.js";
+import { useUuid as I } from "../../hooks/useUuid.js";
+import { getAriaLabelAttributes as x } from "../../utils/accessibility.js";
+import V from "../Title/Title.js";
+import a from "./styles.module.scss";
+const ee = (u, m, l) => {
+  const [v, n] = M(u), y = (r) => {
+    r > l ? n(l) : r < m ? n(m) : n(r);
   };
-  return h(() => {
-    n((l - f) / 2 + f);
-  }, [f, l]), [v, E];
-}, Z = ({
+  return E(() => {
+    n((l - m) / 2 + m);
+  }, [m, l]), [v, y];
+}, te = ({
   title: u,
-  ariaLabel: f,
+  ariaLabel: m,
   labelLeft: l,
   labelRight: v,
   disabled: n = !1,
-  onChange: E,
-  steps: t,
+  onChange: y,
+  steps: r,
   step: _ = 1,
   minValue: i = 0,
-  maxValue: s = t ? t.length - 1 : 100,
-  testId: $
+  maxValue: s = r ? r.length - 1 : 100,
+  selected: w = !0,
+  testId: z
 }) => {
-  const [A, I] = R(!1), [d, m] = Y((s - i) / 2 + i, i, s), k = j(), y = j(), w = j(), N = U(null), b = U(null), { width: M } = G(N) || { width: 0 }, C = s / 10;
-  h(() => {
-    const r = () => {
-      I(!1);
+  const [C, D] = M(!1), [k, L] = M(w), [d, f] = ee((s - i) / 2 + i, i, s), g = I(), S = I(), N = I(), b = T(null), P = T(null), { width: U } = Z(b) || { width: 0 }, R = s / 10;
+  E(() => {
+    const t = () => {
+      D(!1);
     };
-    return document.addEventListener("pointerup", r), () => {
-      document.removeEventListener("pointerup", r);
+    return document.addEventListener("pointerup", t), () => {
+      document.removeEventListener("pointerup", t);
     };
   }, []);
-  const D = (r) => {
-    var L;
-    const e = ((L = N.current) == null ? void 0 : L.getBoundingClientRect().x) ?? 0, c = (r - e) / M, g = s - i;
-    let p = c * g + i;
-    return p = Math.round(p / _) * _, p = Math.max(i, Math.min(s, p)), p;
+  const $ = (t) => {
+    var X;
+    const e = ((X = b.current) == null ? void 0 : X.getBoundingClientRect().x) ?? 0, c = (t - e) / U, p = s - i;
+    let h = c * p + i;
+    return h = Math.round(h / _) * _, h = Math.max(i, Math.min(s, h)), h;
   };
-  h(() => {
-    const r = (e) => {
-      if (!n && A) {
-        const c = D(e.clientX);
-        m(c);
+  E(() => {
+    const t = (e) => {
+      if (!n && C) {
+        const c = $(e.clientX);
+        f(c);
       }
     };
-    return document.addEventListener("pointermove", r), () => {
-      document.removeEventListener("pointermove", r);
+    return document.addEventListener("pointermove", t), () => {
+      document.removeEventListener("pointermove", t);
     };
-  }, [A]), h(() => {
-    !n && E && E(d);
-  }, [d]);
-  const B = (r) => {
+  }, [C]), E(() => {
+    !n && k && y && y(d);
+  }, [d, k]), E(() => {
+    w !== k && L(w);
+  }, [w]);
+  const B = () => {
+    k === !1 && L(!0);
+  }, K = (t) => {
     if (n)
       return;
     let e = !1;
-    switch (r.key) {
+    switch (t.key) {
       case "ArrowLeft":
       case "ArrowDown":
-        m(d - _), e = !0;
+        f(d - _), e = !0;
         break;
       case "PageDown":
-        m(d - C), e = !0;
+        f(d - R), e = !0;
         break;
       case "ArrowRight":
       case "ArrowUp":
-        m(d + _), e = !0;
+        f(d + _), e = !0;
         break;
       case "PageUp":
-        m(d + C), e = !0;
+        f(d + R), e = !0;
         break;
       case "Home":
-        m(i), e = !0;
+        f(i), e = !0;
         break;
       case "End":
-        m(s), e = !0;
+        f(s), e = !0;
         break;
     }
-    e && (r.preventDefault(), r.stopPropagation());
-  }, X = (r) => {
+    e && (B(), t.preventDefault(), t.stopPropagation());
+  }, H = (t) => {
     var c;
     if (n)
       return;
-    const e = D(r.clientX);
-    m(e), (c = b.current) == null || c.focus();
-  }, T = (r) => {
+    B();
+    const e = $(t.clientX);
+    f(e), (c = P.current) == null || c.focus();
+  }, O = (t) => {
     var e;
-    n || (I(!0), r.preventDefault(), r.stopPropagation(), (e = b.current) == null || e.focus());
-  }, z = s !== i ? M / (s - i) * (d - i) : 0, K = () => {
-    const r = t ? Math.round((d - i) / _) : null;
-    if (t && r !== null && r >= 0 && r < t.length) {
-      const e = t[r], c = e.emojiUniCode, g = typeof e.label < "u" ? e.label.toString() : void 0;
-      return c && g ? `${c} ${g}` : c || g;
+    n || (D(!0), t.preventDefault(), t.stopPropagation(), (e = P.current) == null || e.focus());
+  }, W = s !== i ? U / (s - i) * (d - i) : 0, q = () => {
+    const t = r ? Math.round((d - i) / _) : null;
+    if (r && t !== null && t >= 0 && t < r.length) {
+      const e = r[t], c = e.emojiUniCode, p = typeof e.label < "u" ? e.label.toString() : void 0;
+      return c && p ? `${c} ${p}` : c || p;
     }
-  }, H = J({
-    label: f,
+  }, F = x({
+    label: m,
     id: (() => {
       if (u && l && v)
-        return [k, y, w].join(" ");
+        return [g, S, N].join(" ");
       if (u && l)
-        return [k, y].join(" ");
+        return [g, S].join(" ");
       if (u && v)
-        return [k, w].join(" ");
+        return [g, N].join(" ");
       if (u)
-        return k;
+        return g;
     })(),
     prefer: "label"
-  }), P = (r, e) => ({ left: `${r / (e - 1) * 100}%` }), O = () => /* @__PURE__ */ a.createElement("div", { className: o["slider__emoji-container"] }, t == null ? void 0 : t.map((r, e) => r.emojiUniCode && /* @__PURE__ */ a.createElement(
+  }), j = (t, e) => ({ left: `${t / (e - 1) * 100}%` }), G = () => /* @__PURE__ */ o.createElement("div", { className: a["slider__emoji-container"] }, r == null ? void 0 : r.map((t, e) => t.emojiUniCode && /* @__PURE__ */ o.createElement(
     "div",
     {
       "aria-hidden": !0,
       key: "emoji" + e,
-      className: o.slider__emoji,
-      style: P(e, t.length)
+      className: a.slider__emoji,
+      style: j(e, r.length)
     },
-    r.emojiUniCode
-  ))), W = () => t == null ? void 0 : t.map((r, e) => /* @__PURE__ */ a.createElement("div", { key: "step" + e, className: o.slider__track__step, style: P(e, t.length) })), q = () => /* @__PURE__ */ a.createElement("div", { className: o["slider__value-container"] }, t == null ? void 0 : t.map((r, e) => typeof r.label < "u" && /* @__PURE__ */ a.createElement(
+    t.emojiUniCode
+  ))), J = () => r == null ? void 0 : r.map((t, e) => /* @__PURE__ */ o.createElement("div", { key: "step" + e, className: a.slider__track__step, style: j(e, r.length) })), Q = () => /* @__PURE__ */ o.createElement("div", { className: a["slider__value-container"] }, r == null ? void 0 : r.map((t, e) => typeof t.label < "u" && /* @__PURE__ */ o.createElement(
     "div",
     {
       "aria-hidden": !0,
       key: "label" + e,
-      className: o.slider__value,
-      style: P(e, t.length)
+      className: a.slider__value,
+      style: j(e, r.length)
     },
-    r.label
+    t.label
   )));
-  return /* @__PURE__ */ a.createElement("div", { className: o.slider, "data-testid": $, "data-analyticsid": F.Slider }, u && /* @__PURE__ */ a.createElement(Q, { className: o.slider__title, htmlMarkup: "h3", margin: 0, appearance: "title3", id: k }, u), /* @__PURE__ */ a.createElement("div", { className: o["slider__content-container"] }, O(), /* @__PURE__ */ a.createElement(
+  return /* @__PURE__ */ o.createElement("div", { className: a.slider, "data-testid": z, "data-analyticsid": Y.Slider }, u && /* @__PURE__ */ o.createElement(V, { className: a.slider__title, htmlMarkup: "h3", margin: 0, appearance: "title3", id: g }, u), /* @__PURE__ */ o.createElement("div", { className: a["slider__content-container"] }, G(), /* @__PURE__ */ o.createElement(
     "div",
     {
-      ref: N,
-      className: S(o["slider__track-wrapper"], n && o["slider__track-wrapper--disabled"]),
-      onClick: X,
-      onPointerDown: T
+      ref: b,
+      className: A(a["slider__track-wrapper"], n && a["slider__track-wrapper--disabled"]),
+      onClick: H,
+      onPointerDown: O
     },
-    /* @__PURE__ */ a.createElement("div", { className: S(o.slider__track, n && o["slider__track--disabled"]) }, W()),
-    /* @__PURE__ */ a.createElement(
+    /* @__PURE__ */ o.createElement("div", { className: A(a.slider__track, n && a["slider__track--disabled"]) }, J()),
+    /* @__PURE__ */ o.createElement(
       "div",
       {
         role: n ? void 0 : "slider",
-        ref: b,
-        className: S(o.slider__marker, n && o["slider__marker--disabled"]),
+        ref: P,
+        className: A(a.slider__marker, {
+          [a["slider__marker--disabled"]]: n,
+          [a["slider__marker--selected"]]: k
+        }),
         style: {
-          left: `${z}px`
+          left: `${W}px`
         },
-        onKeyDown: B,
+        onKeyDown: K,
         "aria-valuenow": d,
-        "aria-valuetext": K(),
+        "aria-valuetext": q(),
         "aria-valuemin": i,
         "aria-valuemax": s,
         tabIndex: n ? void 0 : 0,
         "aria-disabled": n,
-        ...H
+        ...F
       }
     )
-  ), q()), (l || v) && /* @__PURE__ */ a.createElement("span", { className: o.slider__options }, /* @__PURE__ */ a.createElement("span", { id: y }, l), /* @__PURE__ */ a.createElement("span", { id: w }, v)));
-}, le = Z;
+  ), Q()), (l || v) && /* @__PURE__ */ o.createElement("span", { className: a.slider__options }, /* @__PURE__ */ o.createElement("span", { id: S }, l), /* @__PURE__ */ o.createElement("span", { id: N }, v)));
+}, fe = te;
 export {
-  Z as Slider,
-  le as default
+  te as Slider,
+  fe as default
 };
 //# sourceMappingURL=Slider.js.map

package/components/Slider/Slider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n const [value, setValue] = useState(initial);\n\n const setSafeValue = (newValue: number): void => {\n if (newValue > max) {\n setValue(max);\n } else if (newValue < min) {\n setValue(min);\n } else {\n setValue(newValue);\n }\n };\n\n useEffect(() => {\n setValue((max - min) / 2 + min);\n }, [min, max]);\n\n return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n label?: number \| string;\n emojiUniCode?: string;\n};\n\ninterface SliderProps {\n /*\tSets the title of the slider. /\n title?: string;\n /** Adds the left hand label to the element. /\n labelLeft?: string;\n /* Adds the right hand label to the element. /\n labelRight?: string;\n /\tSets aria-label of the slider. /\n ariaLabel?: string;\n /** Disables the slider element. /\n disabled?: boolean;\n /* Sets the minimum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. /\n minValue?: number;\n /* Sets the maximum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. /\n maxValue?: number;\n /* Function to be called when the value state has changed. /\n onChange?: (value: number) => void;\n /* Sets the steps data for the slider/\n steps?: SliderStep[];\n /* Sets the step to move per point in the slider /\n step?: number;\n /* Sets the data-testid attribute. /\n testId?: string;\n}\n\nexport const Slider: React.FC<SliderProps> = ({\n title,\n ariaLabel,\n labelLeft,\n labelRight,\n disabled = false,\n onChange,\n steps,\n step = 1,\n minValue = 0,\n maxValue = steps ? steps.length - 1 : 100,\n testId,\n}) => {\n const [isMoving, setIsMoving] = useState(false);\n const [value, setValue] = useSafeNumberValue((maxValue - minValue) / 2 + minValue, minValue, maxValue);\n\n const titleId = useUuid();\n const labelLeftId = useUuid();\n const labelRightId = useUuid();\n const trackRef = useRef<HTMLDivElement>(null);\n const markerRef = useRef<HTMLDivElement>(null);\n const { width: trackWidth } = useSize(trackRef) \|\| { width: 0 };\n const largeStep = maxValue / 10;\n\n useEffect(() => {\n const handlePointerUp = (): void => {\n setIsMoving(false);\n };\n\n document.addEventListener('pointerup', handlePointerUp);\n\n return () => {\n document.removeEventListener('pointerup', handlePointerUp);\n };\n }, []);\n\n const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n // Calculate the normalized position (0 to 1) of the marker along the track\n const normalizedPosition = (markerPosition - trackPosition) / trackWidth;\n const valueRange = maxValue - minValue;\n // Calculate the value without considering the step\n let value = normalizedPosition valueRange + minValue;\n // Adjust the value to account for the step increment\n const stepCount = Math.round(value / step);\n value = stepCount * step;\n value = Math.max(minValue, Math.min(maxValue, value));\n\n return value;\n };\n\n useEffect(() => {\n const handlePointerMove = (e: PointerEvent): void => {\n if (!disabled && isMoving) {\n const newValue = getValueBasedOnMarkerPosition(e.clientX);\n setValue(newValue);\n }\n };\n\n document.addEventListener('pointermove', handlePointerMove);\n\n return () => {\n document.removeEventListener('pointermove', handlePointerMove);\n };\n }, [isMoving]);\n\n useEffect(() => {\n if (!disabled && onChange) {\n onChange(value);\n }\n }, [value]);\n\n const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n if (disabled) return;\n\n let flag = false;\n\n switch (e.key) {\n case 'ArrowLeft':\n case 'ArrowDown':\n setValue(value - step);\n flag = true;\n break;\n case 'PageDown':\n setValue(value - largeStep);\n flag = true;\n break;\n case 'ArrowRight':\n case 'ArrowUp':\n setValue(value + step);\n flag = true;\n break;\n case 'PageUp':\n setValue(value + largeStep);\n flag = true;\n break;\n case 'Home':\n setValue(minValue);\n flag = true;\n break;\n case 'End':\n setValue(maxValue);\n flag = true;\n break;\n default:\n break;\n }\n\n if (flag) {\n e.preventDefault();\n e.stopPropagation();\n }\n };\n\n const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n if (disabled) return;\n\n const newValue = getValueBasedOnMarkerPosition(e.clientX);\n setValue(newValue);\n markerRef.current?.focus();\n };\n\n const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n if (disabled) return;\n\n setIsMoving(true);\n\n e.preventDefault();\n e.stopPropagation();\n\n markerRef.current?.focus();\n };\n\n const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (value - minValue) : 0;\n\n const getAriaValueText = (): string \| undefined => {\n const stepIndex = steps ? Math.round((value - minValue) / step) : null;\n\n if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {\n const step = steps[stepIndex];\n const emojiCode = step.emojiUniCode;\n const label = typeof step.label !== 'undefined' ? step.label.toString() : undefined;\n\n return emojiCode && label ? `${emojiCode} ${label}` : emojiCode \|\| label;\n }\n\n return undefined;\n };\n\n const getAriaLabeledById = (): string \| undefined => {\n if (title && labelLeft && labelRight) {\n return [titleId, labelLeftId, labelRightId].join(' ');\n }\n if (title && labelLeft) {\n return [titleId, labelLeftId].join(' ');\n }\n if (title && labelRight) {\n return [titleId, labelRightId].join(' ');\n }\n if (title) {\n return titleId;\n }\n };\n\n const ariaLabelAttributes = getAriaLabelAttributes({\n label: ariaLabel,\n id: getAriaLabeledById(),\n prefer: 'label',\n });\n\n const getXPostionStyling = (index: number, stepsLength: number): { left: string } => {\n return { left: `${(index / (stepsLength - 1)) * 100}%` };\n };\n\n const renderEmojies = (): React.ReactNode => {\n return (\n <div className={styles['slider__emoji-container']}>\n {steps?.map((step, index) => {\n return (\n step.emojiUniCode && (\n <div\n aria-hidden={true}\n key={'emoji' + index}\n className={styles['slider__emoji']}\n style={getXPostionStyling(index, steps.length)}\n >\n {step.emojiUniCode}\n </div>\n )\n );\n })}\n </div>\n );\n };\n\n const renderSteps = (): React.ReactNode => {\n return steps?.map((_step, index) => {\n return <div key={'step' + index} className={styles['slider__track__step']} style={getXPostionStyling(index, steps.length)} />;\n });\n };\n\n const renderStepLabels = (): React.ReactNode => {\n return (\n <div className={styles['slider__value-container']}>\n {steps?.map((step, index) => {\n return (\n typeof step.label !== 'undefined' && (\n <div\n aria-hidden={true}\n key={'label' + index}\n className={styles['slider__value']}\n style={getXPostionStyling(index, steps.length)}\n >\n {step.label}\n </div>\n )\n );\n })}\n </div>\n );\n };\n\n return (\n <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n {title && (\n <Title className={styles['slider__title']} htmlMarkup={'h3'} margin={0} appearance={'title3'} id={titleId}>\n {title}\n </Title>\n )}\n <div className={styles['slider__content-container']}>\n {renderEmojies()}\n {/* Komponenten er tilgjengelig for mus/keyboard gjennom bruk av slideren /}\n {/ eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n <div\n ref={trackRef}\n className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n onClick={handleTrackClick}\n onPointerDown={handlePointerDown}\n >\n <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n <div\n role={disabled ? undefined : 'slider'}\n ref={markerRef}\n className={classNames(styles.slider__marker, disabled && styles['slider__marker--disabled'])}\n style={{\n left: `${markerXPos}px`,\n }}\n onKeyDown={handleKeyDown}\n aria-valuenow={value}\n aria-valuetext={getAriaValueText()}\n aria-valuemin={minValue}\n aria-valuemax={maxValue}\n tabIndex={disabled ? undefined : 0}\n aria-disabled={disabled}\n {...ariaLabelAttributes}\n />\n </div>\n {renderStepLabels()}\n </div>\n {(labelLeft \|\| labelRight) && (\n <span className={styles.slider__options}>\n <span id={labelLeftId}>{labelLeft}</span>\n <span id={labelRightId}>{labelRight}</span>\n </span>\n )}\n </div>\n );\n};\n\nexport default Slider;\n"],"names":["useSafeNumberValue","initial","min","max","value","setValue","useState","setSafeValue","newValue","useEffect","Slider","title","ariaLabel","labelLeft","labelRight","disabled","onChange","steps","step","minValue","maxValue","testId","isMoving","setIsMoving","titleId","useUuid","labelLeftId","labelRightId","trackRef","useRef","markerRef","trackWidth","useSize","largeStep","handlePointerUp","getValueBasedOnMarkerPosition","markerPosition","trackPosition","_a","normalizedPosition","valueRange","handlePointerMove","handleKeyDown","e","flag","handleTrackClick","handlePointerDown","markerXPos","getAriaValueText","stepIndex","emojiCode","label","ariaLabelAttributes","getAriaLabelAttributes","getXPostionStyling","index","stepsLength","renderEmojies","React","styles","renderSteps","_step","renderStepLabels","AnalyticsId","Title","classNames","Slider$1"],"mappings":"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"}
1	+ {"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n const [value, setValue] = useState(initial);\n\n const setSafeValue = (newValue: number): void => {\n if (newValue > max) {\n setValue(max);\n } else if (newValue < min) {\n setValue(min);\n } else {\n setValue(newValue);\n }\n };\n\n useEffect(() => {\n setValue((max - min) / 2 + min);\n }, [min, max]);\n\n return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n label?: number \| string;\n emojiUniCode?: string;\n};\n\ninterface SliderProps {\n /*\tSets the title of the slider. /\n title?: string;\n /** Adds the left hand label to the element. /\n labelLeft?: string;\n /* Adds the right hand label to the element. /\n labelRight?: string;\n /\tSets aria-label of the slider. /\n ariaLabel?: string;\n /** Disables the slider element. /\n disabled?: boolean;\n /* Sets the minimum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. /\n minValue?: number;\n /* Sets the maximum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. /\n maxValue?: number;\n /* Function to be called when the value state has changed. /\n onChange?: (value: number) => void;\n /* If set to false will only trigger onChange once a user interaction has been made, updates to this prop will be taken into account - true by default /\n selected?: boolean;\n /* Sets the steps data for the slider /\n steps?: SliderStep[];\n /* Sets the step to move per point in the slider /\n step?: number;\n /* Sets the data-testid attribute. /\n testId?: string;\n}\n\nexport const Slider: React.FC<SliderProps> = ({\n title,\n ariaLabel,\n labelLeft,\n labelRight,\n disabled = false,\n onChange,\n steps,\n step = 1,\n minValue = 0,\n maxValue = steps ? steps.length - 1 : 100,\n selected = true,\n testId,\n}) => {\n const [isMoving, setIsMoving] = useState(false);\n const [selectedState, setSelectedState] = useState(selected);\n const [value, setValue] = useSafeNumberValue((maxValue - minValue) / 2 + minValue, minValue, maxValue);\n\n const titleId = useUuid();\n const labelLeftId = useUuid();\n const labelRightId = useUuid();\n const trackRef = useRef<HTMLDivElement>(null);\n const markerRef = useRef<HTMLDivElement>(null);\n const { width: trackWidth } = useSize(trackRef) \|\| { width: 0 };\n const largeStep = maxValue / 10;\n\n useEffect(() => {\n const handlePointerUp = (): void => {\n setIsMoving(false);\n };\n\n document.addEventListener('pointerup', handlePointerUp);\n\n return () => {\n document.removeEventListener('pointerup', handlePointerUp);\n };\n }, []);\n\n const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n // Calculate the normalized position (0 to 1) of the marker along the track\n const normalizedPosition = (markerPosition - trackPosition) / trackWidth;\n const valueRange = maxValue - minValue;\n // Calculate the value without considering the step\n let value = normalizedPosition valueRange + minValue;\n // Adjust the value to account for the step increment\n const stepCount = Math.round(value / step);\n value = stepCount * step;\n value = Math.max(minValue, Math.min(maxValue, value));\n\n return value;\n };\n\n useEffect(() => {\n const handlePointerMove = (e: PointerEvent): void => {\n if (!disabled && isMoving) {\n const newValue = getValueBasedOnMarkerPosition(e.clientX);\n setValue(newValue);\n }\n };\n\n document.addEventListener('pointermove', handlePointerMove);\n\n return () => {\n document.removeEventListener('pointermove', handlePointerMove);\n };\n }, [isMoving]);\n\n useEffect(() => {\n if (!disabled && selectedState && onChange) {\n onChange(value);\n }\n }, [value, selectedState]);\n\n useEffect(() => {\n if (selected !== selectedState) {\n setSelectedState(selected);\n }\n }, [selected]);\n\n const handleSelected = (): void => {\n if (selectedState === false) {\n setSelectedState(true);\n }\n };\n\n const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n if (disabled) return;\n\n let flag = false;\n\n switch (e.key) {\n case 'ArrowLeft':\n case 'ArrowDown':\n setValue(value - step);\n flag = true;\n break;\n case 'PageDown':\n setValue(value - largeStep);\n flag = true;\n break;\n case 'ArrowRight':\n case 'ArrowUp':\n setValue(value + step);\n flag = true;\n break;\n case 'PageUp':\n setValue(value + largeStep);\n flag = true;\n break;\n case 'Home':\n setValue(minValue);\n flag = true;\n break;\n case 'End':\n setValue(maxValue);\n flag = true;\n break;\n default:\n break;\n }\n\n if (flag) {\n handleSelected();\n e.preventDefault();\n e.stopPropagation();\n }\n };\n\n const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n if (disabled) return;\n\n handleSelected();\n const newValue = getValueBasedOnMarkerPosition(e.clientX);\n setValue(newValue);\n markerRef.current?.focus();\n };\n\n const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n if (disabled) return;\n\n setIsMoving(true);\n\n e.preventDefault();\n e.stopPropagation();\n\n markerRef.current?.focus();\n };\n\n const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (value - minValue) : 0;\n\n const getAriaValueText = (): string \| undefined => {\n const stepIndex = steps ? Math.round((value - minValue) / step) : null;\n\n if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {\n const step = steps[stepIndex];\n const emojiCode = step.emojiUniCode;\n const label = typeof step.label !== 'undefined' ? step.label.toString() : undefined;\n\n return emojiCode && label ? `${emojiCode} ${label}` : emojiCode \|\| label;\n }\n\n return undefined;\n };\n\n const getAriaLabeledById = (): string \| undefined => {\n if (title && labelLeft && labelRight) {\n return [titleId, labelLeftId, labelRightId].join(' ');\n }\n if (title && labelLeft) {\n return [titleId, labelLeftId].join(' ');\n }\n if (title && labelRight) {\n return [titleId, labelRightId].join(' ');\n }\n if (title) {\n return titleId;\n }\n };\n\n const ariaLabelAttributes = getAriaLabelAttributes({\n label: ariaLabel,\n id: getAriaLabeledById(),\n prefer: 'label',\n });\n\n const getXPostionStyling = (index: number, stepsLength: number): { left: string } => {\n return { left: `${(index / (stepsLength - 1)) * 100}%` };\n };\n\n const renderEmojies = (): React.ReactNode => {\n return (\n <div className={styles['slider__emoji-container']}>\n {steps?.map((step, index) => {\n return (\n step.emojiUniCode && (\n <div\n aria-hidden={true}\n key={'emoji' + index}\n className={styles['slider__emoji']}\n style={getXPostionStyling(index, steps.length)}\n >\n {step.emojiUniCode}\n </div>\n )\n );\n })}\n </div>\n );\n };\n\n const renderSteps = (): React.ReactNode => {\n return steps?.map((_step, index) => {\n return <div key={'step' + index} className={styles['slider__track__step']} style={getXPostionStyling(index, steps.length)} />;\n });\n };\n\n const renderStepLabels = (): React.ReactNode => {\n return (\n <div className={styles['slider__value-container']}>\n {steps?.map((step, index) => {\n return (\n typeof step.label !== 'undefined' && (\n <div\n aria-hidden={true}\n key={'label' + index}\n className={styles['slider__value']}\n style={getXPostionStyling(index, steps.length)}\n >\n {step.label}\n </div>\n )\n );\n })}\n </div>\n );\n };\n\n return (\n <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n {title && (\n <Title className={styles['slider__title']} htmlMarkup={'h3'} margin={0} appearance={'title3'} id={titleId}>\n {title}\n </Title>\n )}\n <div className={styles['slider__content-container']}>\n {renderEmojies()}\n {/* Komponenten er tilgjengelig for mus/keyboard gjennom bruk av slideren /}\n {/ eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n <div\n ref={trackRef}\n className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n onClick={handleTrackClick}\n onPointerDown={handlePointerDown}\n >\n <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n <div\n role={disabled ? undefined : 'slider'}\n ref={markerRef}\n className={classNames(styles.slider__marker, {\n [styles['slider__marker--disabled']]: disabled,\n [styles['slider__marker--selected']]: selectedState,\n })}\n style={{\n left: `${markerXPos}px`,\n }}\n onKeyDown={handleKeyDown}\n aria-valuenow={value}\n aria-valuetext={getAriaValueText()}\n aria-valuemin={minValue}\n aria-valuemax={maxValue}\n tabIndex={disabled ? undefined : 0}\n aria-disabled={disabled}\n {...ariaLabelAttributes}\n />\n </div>\n {renderStepLabels()}\n </div>\n {(labelLeft \|\| labelRight) && (\n <span className={styles.slider__options}>\n <span id={labelLeftId}>{labelLeft}</span>\n <span id={labelRightId}>{labelRight}</span>\n </span>\n )}\n </div>\n );\n};\n\nexport default Slider;\n"],"names":["useSafeNumberValue","initial","min","max","value","setValue","useState","setSafeValue","newValue","useEffect","Slider","title","ariaLabel","labelLeft","labelRight","disabled","onChange","steps","step","minValue","maxValue","selected","testId","isMoving","setIsMoving","selectedState","setSelectedState","titleId","useUuid","labelLeftId","labelRightId","trackRef","useRef","markerRef","trackWidth","useSize","largeStep","handlePointerUp","getValueBasedOnMarkerPosition","markerPosition","trackPosition","_a","normalizedPosition","valueRange","handlePointerMove","handleSelected","handleKeyDown","e","flag","handleTrackClick","handlePointerDown","markerXPos","getAriaValueText","stepIndex","emojiCode","label","ariaLabelAttributes","getAriaLabelAttributes","getXPostionStyling","index","stepsLength","renderEmojies","React","styles","renderSteps","_step","renderStepLabels","AnalyticsId","Title","classNames","Slider$1"],"mappings":"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"}

package/components/Slider/styles.module.scss CHANGED Viewed

@@ -91,17 +91,19 @@ $mark-size: getSpacer(l);
       outline: 0.15rem solid $black;
     }
-    &::after {
-      content: '';
-      width: 1.25rem;
-      height: 1.25rem;
-      border: 0.1rem solid $black;
-      border-radius: 10rem;
-      background-color: $blueberry600;
-      :hover > &,
-      :focus > & {
-        background-color: $blueberry700;
+    &--selected {
+      &::after {
+        content: '';
+        width: 1.25rem;
+        height: 1.25rem;
+        border: 0.1rem solid $black;
+        border-radius: 10rem;
+        background-color: $blueberry600;
+        :hover > &,
+        :focus > & {
+          background-color: $blueberry700;
+        }
       }
     }

package/components/Slider/styles.module.scss.d.ts CHANGED Viewed

@@ -5,6 +5,7 @@ export type Styles = {
   'slider__emoji-container': string;
   slider__marker: string;
   'slider__marker--disabled': string;
+  'slider__marker--selected': string;
   slider__options: string;
   slider__title: string;
   slider__track: string;

package/package.json CHANGED Viewed

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