@helsenorge/designsystem-react 9.4.0 → 9.4.1

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 (6) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/components/Tile/index.js +34 -33
  3. package/components/Tile/index.js.map +1 -1
  4. package/components/Tile/styles.module.scss +23 -19
  5. package/components/Tile/styles.module.scss.d.ts +1 -0
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ ## [9.4.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv9.3.0&targetVersion=GTv9.4.0) (2024-11-22)
2
+
3
+
4
+ ### Features
5
+
6
+ * nye ikoner ([c18b15a](https://github.com/helsenorge/designsystem/commit/c18b15a31ad1109c23c72bffcafe41de2c795af2)), closes [#334685](https://github.com/helsenorge/designsystem/issues/334685)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **datepicker:** sjekk for klikking utenfor popup fungerer ikke i webcomp ([7a831f9](https://github.com/helsenorge/designsystem/commit/7a831f929fd9b529e4e080e22db5cad1dbf6c2b8)), closes [#337485](https://github.com/helsenorge/designsystem/issues/337485)
12
+
1
13
  ## [9.3.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv9.2.0&targetVersion=GTv9.3.0) (2024-11-20)
2
14
 
3
15
 
package/components/Tile/index.js CHANGED
@@ -1,49 +1,50 @@
1
- import { jsx as p, jsxs as N } from "react/jsx-runtime";
2
- import l from "react";
3
- import d from "classnames";
4
- import { AnalyticsId as S, IconSize as u } from "../../constants.js";
1
+ import { jsx as d, jsxs as _ } from "react/jsx-runtime";
2
+ import a from "react";
3
+ import f from "classnames";
4
+ import { AnalyticsId as S, IconSize as N } from "../../constants.js";
5
5
  import { useBreakpoint as j, Breakpoint as z } from "../../hooks/useBreakpoint.js";
6
6
  import { useHover as B } from "../../hooks/useHover.js";
7
7
  import { mergeRefs as E } from "../../utils/refs.js";
8
8
  import e from "./styles.module.scss";
9
- const T = l.forwardRef((r, s) => {
10
- const { children: t, className: a, htmlMarkup: o = "span", highlighted: c } = r, n = d(
9
+ const u = a.forwardRef((r, s) => {
10
+ const { compact: t, children: o, className: c, htmlMarkup: m = "span", highlighted: n } = r, p = f(
11
11
  e.tile__title,
12
12
  {
13
- [e["tile__title--highlighted"]]: c
13
+ [e["tile__title--highlighted"]]: n,
14
+ [e["tile__title--compact"]]: t
14
15
  },
15
- a
16
+ c
16
17
  );
17
- return /* @__PURE__ */ p(o, { className: n, ref: s, children: t });
18
+ return /* @__PURE__ */ d(m, { className: p, ref: s, children: o });
18
19
  });
19
- T.displayName = "Title";
20
- const _ = l.forwardRef((r, s) => {
20
+ u.displayName = "Title";
21
+ const T = a.forwardRef((r, s) => {
21
22
  const {
22
23
  children: t,
23
- icon: a,
24
- title: o,
25
- className: c = "",
24
+ icon: o,
25
+ title: c,
26
+ className: m = "",
26
27
  description: n,
27
- fixed: f = !1,
28
- highlighted: m = !1,
28
+ fixed: p = !1,
29
+ highlighted: i = !1,
29
30
  testId: k,
30
31
  target: h,
31
32
  rel: v,
32
33
  variant: C = "normal",
33
34
  href: b,
34
35
  onClick: w
35
- } = r, { hoverRef: x, isHovered: y } = B(), g = j() < z.md, i = C === "compact", R = d(
36
+ } = r, { hoverRef: x, isHovered: y } = B(), g = j() < z.md, l = C === "compact", R = f(
36
37
  e.tile,
37
38
  {
38
- [e["tile--fixed"]]: f,
39
- [e["tile--compact"]]: i,
40
- [e["tile--highlighted"]]: m
39
+ [e["tile--fixed"]]: p,
40
+ [e["tile--compact"]]: l,
41
+ [e["tile--highlighted"]]: i
41
42
  },
42
- c
43
- ), I = d(e["title-wrapper"], {
44
- [e["title-wrapper--compact"]]: i
43
+ m
44
+ ), I = f(e["title-wrapper"], {
45
+ [e["title-wrapper--compact"]]: l
45
46
  });
46
- return /* @__PURE__ */ N(
47
+ return /* @__PURE__ */ _(
47
48
  "a",
48
49
  {
49
50
  ref: E([s, x]),
@@ -55,20 +56,20 @@ const _ = l.forwardRef((r, s) => {
55
56
  "data-analyticsid": S.Tile,
56
57
  onClick: w,
57
58
  children: [
58
- /* @__PURE__ */ N("div", { className: I, children: [
59
- l.cloneElement(a, { size: g ? u.Small : u.Medium, isHovered: y, color: m ? "white" : "black" }),
60
- l.cloneElement(o, { highlighted: m, compact: i })
59
+ /* @__PURE__ */ _("div", { className: I, children: [
60
+ a.cloneElement(o, { size: g ? N.Small : N.Medium, isHovered: y, color: i ? "white" : "black" }),
61
+ a.cloneElement(c, { highlighted: i, compact: l })
61
62
  ] }),
62
- !i && !g && /* @__PURE__ */ p("p", { className: e.tile__description, children: n }),
63
- t && /* @__PURE__ */ p("div", { className: e.tile__children, children: t })
63
+ !l && !g && /* @__PURE__ */ d("p", { className: e.tile__description, children: n }),
64
+ t && /* @__PURE__ */ d("div", { className: e.tile__children, children: t })
64
65
  ]
65
66
  }
66
67
  );
67
68
  });
68
- _.displayName = "Tile";
69
- _.Title = T;
69
+ T.displayName = "Tile";
70
+ T.Title = u;
70
71
  export {
71
- _ as Tile,
72
- _ as default
72
+ T as Tile,
73
+ T as default
73
74
  };
74
75
  //# sourceMappingURL=index.js.map
package/components/Tile/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../src/components/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { TitleTags } from './../Title/Title';\nimport { useBreakpoint, Breakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { mergeRefs } from '../../utils/refs';\nimport { IconSize } from '../Icon';\n\nimport tileStyles from './styles.module.scss';\n\nexport type TileVariants = 'normal' | 'compact';\n\ninterface TileProps extends Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick' | 'rel'> {\n children?: React.ReactNode;\n /** Adds custom classes to the element. */\n className?: string;\n /**\tSets the icon to be displayed inside the tile. */\n icon: React.ReactElement;\n /**\tSets the title to be displayed inside the tile. */\n title: React.ReactElement;\n /** Toggles the highlighted style of the tile. */\n highlighted?: boolean;\n /** Sets the description to be displayed inside the tile. */\n description?: string;\n /** Sets a fixed max and min width for the tile. */\n fixed?: boolean;\n /** Sets the visual variant of the component */\n variant?: TileVariants;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\ninterface TileTitleProps {\n children: React.ReactNode;\n className?: string;\n htmlMarkup?: TitleTags;\n highlighted?: boolean;\n compact?: boolean;\n}\n\nexport interface TileCompound extends React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLAnchorElement>> {\n Title: React.ForwardRefExoticComponent<TileTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n}\n\nconst Title = React.forwardRef<HTMLHeadingElement, TileTitleProps>((props, ref) => {\n const { children, className, htmlMarkup = 'span', highlighted } = props;\n const titleClasses = classNames(\n tileStyles['tile__title'],\n {\n [tileStyles['tile__title--highlighted']]: highlighted,\n },\n className\n );\n const CustomTag = htmlMarkup;\n\n return (\n <CustomTag className={titleClasses} ref={ref}>\n {children}\n </CustomTag>\n );\n});\n\nTitle.displayName = 'Title';\n\nexport const Tile = React.forwardRef<HTMLAnchorElement, TileProps>((props, ref) => {\n const {\n children,\n icon,\n title,\n className = '',\n description,\n fixed = false,\n highlighted = false,\n testId,\n target,\n rel,\n variant = 'normal',\n href,\n onClick,\n } = props;\n const { hoverRef, isHovered } = useHover<HTMLAnchorElement>();\n const breakpoint = useBreakpoint();\n const mobile = breakpoint < Breakpoint.md;\n const compact = variant === 'compact';\n const tileClasses = classNames(\n tileStyles.tile,\n {\n [tileStyles['tile--fixed']]: fixed,\n [tileStyles['tile--compact']]: compact,\n [tileStyles['tile--highlighted']]: highlighted,\n },\n className\n );\n const tileTitleWrapperClasses = classNames(tileStyles['title-wrapper'], {\n [tileStyles['title-wrapper--compact']]: compact,\n });\n\n return (\n <a\n ref={mergeRefs([ref, hoverRef])}\n href={href}\n target={target}\n rel={target === '_blank' ? 'noopener noreferrer' : rel}\n className={tileClasses}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Tile}\n onClick={onClick}\n >\n <div className={tileTitleWrapperClasses}>\n {React.cloneElement(icon, { size: mobile ? IconSize.Small : IconSize.Medium, isHovered, color: highlighted ? 'white' : 'black' })}\n {React.cloneElement(title, { highlighted: highlighted, compact: compact })}\n </div>\n {!compact && !mobile && <p className={tileStyles.tile__description}>{description}</p>}\n {children && <div className={tileStyles.tile__children}>{children}</div>}\n </a>\n );\n}) as TileCompound;\n\nTile.displayName = 'Tile';\nTile.Title = Title;\n\nexport default Tile;\n"],"names":["Title","React","props","ref","children","className","htmlMarkup","highlighted","titleClasses","classNames","tileStyles","jsx","Tile","icon","title","description","fixed","testId","target","rel","variant","href","onClick","hoverRef","isHovered","useHover","mobile","useBreakpoint","Breakpoint","compact","tileClasses","tileTitleWrapperClasses","jsxs","mergeRefs","AnalyticsId","IconSize"],"mappings":";;;;;;;;AA+CA,MAAMA,IAAQC,EAAM,WAA+C,CAACC,GAAOC,MAAQ;AACjF,QAAM,EAAE,UAAAC,GAAU,WAAAC,GAAW,YAAAC,IAAa,QAAQ,aAAAC,EAAgB,IAAAL,GAC5DM,IAAeC;AAAA,IACnBC,EAAW;AAAA,IACX;AAAA,MACE,CAACA,EAAW,0BAA0B,CAAC,GAAGH;AAAA,IAC5C;AAAA,IACAF;AAAA,EAAA;AAIF,SACG,gBAAAM,EAHeL,GAGf,EAAU,WAAWE,GAAc,KAAAL,GACjC,UAAAC,EACH,CAAA;AAEJ,CAAC;AAEDJ,EAAM,cAAc;AAEb,MAAMY,IAAOX,EAAM,WAAyC,CAACC,GAAOC,MAAQ;AAC3E,QAAA;AAAA,IACJ,UAAAC;AAAA,IACA,MAAAS;AAAA,IACA,OAAAC;AAAA,IACA,WAAAT,IAAY;AAAA,IACZ,aAAAU;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,aAAAT,IAAc;AAAA,IACd,QAAAU;AAAA,IACA,QAAAC;AAAA,IACA,KAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,SAAAC;AAAA,EACE,IAAApB,GACE,EAAE,UAAAqB,GAAU,WAAAC,EAAU,IAAIC,EAA4B,GAEtDC,IADaC,MACSC,EAAW,IACjCC,IAAUT,MAAY,WACtBU,IAAcrB;AAAA,IAClBC,EAAW;AAAA,IACX;AAAA,MACE,CAACA,EAAW,aAAa,CAAC,GAAGM;AAAA,MAC7B,CAACN,EAAW,eAAe,CAAC,GAAGmB;AAAA,MAC/B,CAACnB,EAAW,mBAAmB,CAAC,GAAGH;AAAA,IACrC;AAAA,IACAF;AAAA,EAAA,GAEI0B,IAA0BtB,EAAWC,EAAW,eAAe,GAAG;AAAA,IACtE,CAACA,EAAW,wBAAwB,CAAC,GAAGmB;AAAA,EAAA,CACzC;AAGC,SAAA,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKC,EAAU,CAAC9B,GAAKoB,CAAQ,CAAC;AAAA,MAC9B,MAAAF;AAAA,MACA,QAAAH;AAAA,MACA,KAAKA,MAAW,WAAW,wBAAwBC;AAAA,MACnD,WAAWW;AAAA,MACX,eAAab;AAAA,MACb,oBAAkBiB,EAAY;AAAA,MAC9B,SAAAZ;AAAA,MAEA,UAAA;AAAA,QAAC,gBAAAU,EAAA,OAAA,EAAI,WAAWD,GACb,UAAA;AAAA,UAAA9B,EAAM,aAAaY,GAAM,EAAE,MAAMa,IAASS,EAAS,QAAQA,EAAS,QAAQ,WAAAX,GAAW,OAAOjB,IAAc,UAAU,SAAS;AAAA,UAC/HN,EAAM,aAAaa,GAAO,EAAE,aAAAP,GAA0B,SAAAsB,GAAkB;AAAA,QAAA,GAC3E;AAAA,QACC,CAACA,KAAW,CAACH,uBAAW,KAAE,EAAA,WAAWhB,EAAW,mBAAoB,UAAYK,EAAA,CAAA;AAAA,QAChFX,KAAa,gBAAAO,EAAA,OAAA,EAAI,WAAWD,EAAW,gBAAiB,UAAAN,GAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGxE,CAAC;AAEDQ,EAAK,cAAc;AACnBA,EAAK,QAAQZ;"}
1
+ {"version":3,"file":"index.js","sources":["../../../src/components/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { TitleTags } from './../Title/Title';\nimport { useBreakpoint, Breakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { mergeRefs } from '../../utils/refs';\nimport { IconSize } from '../Icon';\n\nimport tileStyles from './styles.module.scss';\n\nexport type TileVariants = 'normal' | 'compact';\n\ninterface TileProps extends Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick' | 'rel'> {\n children?: React.ReactNode;\n /** Adds custom classes to the element. */\n className?: string;\n /**\tSets the icon to be displayed inside the tile. */\n icon: React.ReactElement;\n /**\tSets the title to be displayed inside the tile. */\n title: React.ReactElement;\n /** Toggles the highlighted style of the tile. */\n highlighted?: boolean;\n /** Sets the description to be displayed inside the tile. */\n description?: string;\n /** Sets a fixed max and min width for the tile. */\n fixed?: boolean;\n /** Sets the visual variant of the component */\n variant?: TileVariants;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\ninterface TileTitleProps {\n children: React.ReactNode;\n className?: string;\n htmlMarkup?: TitleTags;\n highlighted?: boolean;\n compact?: boolean;\n}\n\nexport interface TileCompound extends React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLAnchorElement>> {\n Title: React.ForwardRefExoticComponent<TileTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n}\n\nconst Title = React.forwardRef<HTMLHeadingElement, TileTitleProps>((props, ref) => {\n const { compact, children, className, htmlMarkup = 'span', highlighted } = props;\n const titleClasses = classNames(\n tileStyles['tile__title'],\n {\n [tileStyles['tile__title--highlighted']]: highlighted,\n [tileStyles['tile__title--compact']]: compact,\n },\n className\n );\n const CustomTag = htmlMarkup;\n\n return (\n <CustomTag className={titleClasses} ref={ref}>\n {children}\n </CustomTag>\n );\n});\n\nTitle.displayName = 'Title';\n\nexport const Tile = React.forwardRef<HTMLAnchorElement, TileProps>((props, ref) => {\n const {\n children,\n icon,\n title,\n className = '',\n description,\n fixed = false,\n highlighted = false,\n testId,\n target,\n rel,\n variant = 'normal',\n href,\n onClick,\n } = props;\n const { hoverRef, isHovered } = useHover<HTMLAnchorElement>();\n const breakpoint = useBreakpoint();\n const mobile = breakpoint < Breakpoint.md;\n const compact = variant === 'compact';\n const tileClasses = classNames(\n tileStyles.tile,\n {\n [tileStyles['tile--fixed']]: fixed,\n [tileStyles['tile--compact']]: compact,\n [tileStyles['tile--highlighted']]: highlighted,\n },\n className\n );\n const tileTitleWrapperClasses = classNames(tileStyles['title-wrapper'], {\n [tileStyles['title-wrapper--compact']]: compact,\n });\n\n return (\n <a\n ref={mergeRefs([ref, hoverRef])}\n href={href}\n target={target}\n rel={target === '_blank' ? 'noopener noreferrer' : rel}\n className={tileClasses}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Tile}\n onClick={onClick}\n >\n <div className={tileTitleWrapperClasses}>\n {React.cloneElement(icon, { size: mobile ? IconSize.Small : IconSize.Medium, isHovered, color: highlighted ? 'white' : 'black' })}\n {React.cloneElement(title, { highlighted: highlighted, compact: compact })}\n </div>\n {!compact && !mobile && <p className={tileStyles.tile__description}>{description}</p>}\n {children && <div className={tileStyles.tile__children}>{children}</div>}\n </a>\n );\n}) as TileCompound;\n\nTile.displayName = 'Tile';\nTile.Title = Title;\n\nexport default Tile;\n"],"names":["Title","React","props","ref","compact","children","className","htmlMarkup","highlighted","titleClasses","classNames","tileStyles","jsx","Tile","icon","title","description","fixed","testId","target","rel","variant","href","onClick","hoverRef","isHovered","useHover","mobile","useBreakpoint","Breakpoint","tileClasses","tileTitleWrapperClasses","jsxs","mergeRefs","AnalyticsId","IconSize"],"mappings":";;;;;;;;AA+CA,MAAMA,IAAQC,EAAM,WAA+C,CAACC,GAAOC,MAAQ;AACjF,QAAM,EAAE,SAAAC,GAAS,UAAAC,GAAU,WAAAC,GAAW,YAAAC,IAAa,QAAQ,aAAAC,EAAgB,IAAAN,GACrEO,IAAeC;AAAA,IACnBC,EAAW;AAAA,IACX;AAAA,MACE,CAACA,EAAW,0BAA0B,CAAC,GAAGH;AAAA,MAC1C,CAACG,EAAW,sBAAsB,CAAC,GAAGP;AAAA,IACxC;AAAA,IACAE;AAAA,EAAA;AAIF,SACG,gBAAAM,EAHeL,GAGf,EAAU,WAAWE,GAAc,KAAAN,GACjC,UAAAE,EACH,CAAA;AAEJ,CAAC;AAEDL,EAAM,cAAc;AAEb,MAAMa,IAAOZ,EAAM,WAAyC,CAACC,GAAOC,MAAQ;AAC3E,QAAA;AAAA,IACJ,UAAAE;AAAA,IACA,MAAAS;AAAA,IACA,OAAAC;AAAA,IACA,WAAAT,IAAY;AAAA,IACZ,aAAAU;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,aAAAT,IAAc;AAAA,IACd,QAAAU;AAAA,IACA,QAAAC;AAAA,IACA,KAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,SAAAC;AAAA,EACE,IAAArB,GACE,EAAE,UAAAsB,GAAU,WAAAC,EAAU,IAAIC,EAA4B,GAEtDC,IADaC,MACSC,EAAW,IACjCzB,IAAUiB,MAAY,WACtBS,IAAcpB;AAAA,IAClBC,EAAW;AAAA,IACX;AAAA,MACE,CAACA,EAAW,aAAa,CAAC,GAAGM;AAAA,MAC7B,CAACN,EAAW,eAAe,CAAC,GAAGP;AAAA,MAC/B,CAACO,EAAW,mBAAmB,CAAC,GAAGH;AAAA,IACrC;AAAA,IACAF;AAAA,EAAA,GAEIyB,IAA0BrB,EAAWC,EAAW,eAAe,GAAG;AAAA,IACtE,CAACA,EAAW,wBAAwB,CAAC,GAAGP;AAAA,EAAA,CACzC;AAGC,SAAA,gBAAA4B;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKC,EAAU,CAAC9B,GAAKqB,CAAQ,CAAC;AAAA,MAC9B,MAAAF;AAAA,MACA,QAAAH;AAAA,MACA,KAAKA,MAAW,WAAW,wBAAwBC;AAAA,MACnD,WAAWU;AAAA,MACX,eAAaZ;AAAA,MACb,oBAAkBgB,EAAY;AAAA,MAC9B,SAAAX;AAAA,MAEA,UAAA;AAAA,QAAC,gBAAAS,EAAA,OAAA,EAAI,WAAWD,GACb,UAAA;AAAA,UAAA9B,EAAM,aAAaa,GAAM,EAAE,MAAMa,IAASQ,EAAS,QAAQA,EAAS,QAAQ,WAAAV,GAAW,OAAOjB,IAAc,UAAU,SAAS;AAAA,UAC/HP,EAAM,aAAac,GAAO,EAAE,aAAAP,GAA0B,SAAAJ,GAAkB;AAAA,QAAA,GAC3E;AAAA,QACC,CAACA,KAAW,CAACuB,uBAAW,KAAE,EAAA,WAAWhB,EAAW,mBAAoB,UAAYK,EAAA,CAAA;AAAA,QAChFX,KAAa,gBAAAO,EAAA,OAAA,EAAI,WAAWD,EAAW,gBAAiB,UAAAN,GAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGxE,CAAC;AAEDQ,EAAK,cAAc;AACnBA,EAAK,QAAQb;"}
package/components/Tile/styles.module.scss CHANGED
@@ -6,24 +6,6 @@
6
6
  @import '../../scss/screen-reader';
7
7
  @import '../../scss/supernova/styles/colors';
8
8
 
9
- @mixin tile-title {
10
- overflow-wrap: break-word;
11
- word-wrap: break-word;
12
- word-break: break-word;
13
- font-size: $font-size-sm;
14
- text-align: left;
15
- line-height: 1.74rem;
16
- font-weight: 400;
17
- margin: getSpacer(3xs) 0 0 getSpacer(2xs);
18
-
19
- @media (min-width: map.get($grid-breakpoints, md)) {
20
- font-weight: 600;
21
- font-size: $font-size-md;
22
- line-height: 1.625rem;
23
- margin-top: getSpacer(s);
24
- }
25
- }
26
-
27
9
  .tile {
28
10
  // Referanse for grandparent selection i underklassene lenger nede
29
11
  $tile: &;
@@ -93,7 +75,29 @@
93
75
  }
94
76
 
95
77
  &__title {
96
- @include tile-title;
78
+ overflow-wrap: break-word;
79
+ word-wrap: break-word;
80
+ word-break: break-word;
81
+ font-size: $font-size-sm;
82
+ text-align: left;
83
+ line-height: 1.74rem;
84
+ font-weight: 400;
85
+ margin: getSpacer(3xs) 0 0 getSpacer(2xs);
86
+
87
+ @media (min-width: map.get($grid-breakpoints, md)) {
88
+ font-weight: 600;
89
+ font-size: $font-size-md;
90
+ line-height: 1.625rem;
91
+ margin-top: getSpacer(s);
92
+ }
93
+
94
+ &--compact {
95
+ margin: 0 0 0 getSpacer(3xs);
96
+
97
+ @media (min-width: map.get($grid-breakpoints, md)) {
98
+ margin-left: getSpacer(2xs);
99
+ }
100
+ }
97
101
  }
98
102
 
99
103
  #{$tile}:focus-visible & {
package/components/Tile/styles.module.scss.d.ts CHANGED
@@ -3,6 +3,7 @@ export type Styles = {
3
3
  tile__children: string;
4
4
  tile__description: string;
5
5
  tile__title: string;
6
+ 'tile__title--compact': string;
6
7
  'tile__title--highlighted': string;
7
8
  'tile--compact': string;
8
9
  'tile--fixed': string;
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "url": "git+https://github.com/helsenorge/designsystem.git"
8
8
  },
9
9
  "homepage": "https://helsenorge.design",
10
- "version": "9.4.0",
10
+ "version": "9.4.1",
11
11
  "author": "Helsenorge",
12
12
  "license": "MIT",
13
13
  "dependencies": {