@helsenorge/designsystem-react 9.2.0 → 9.4.0

package/components/Tile/index.js

@@ -1,73 +1,74 @@
-import { jsx as p, jsxs as g } from "react/jsx-runtime";
-import s from "react";
-import h from "classnames";
-import { AnalyticsId as k, IconSize as I } from "../../constants.js";
-import { useHover as b } from "../../hooks/useHover.js";
-import { mergeRefs as j } from "../../utils/refs.js";
+import { jsx as p, jsxs as N } from "react/jsx-runtime";
+import l from "react";
+import d from "classnames";
+import { AnalyticsId as S, IconSize as u } from "../../constants.js";
+import { useBreakpoint as j, Breakpoint as z } from "../../hooks/useBreakpoint.js";
+import { useHover as B } from "../../hooks/useHover.js";
+import { mergeRefs as E } from "../../utils/refs.js";
 import e from "./styles.module.scss";
-const _ = s.forwardRef((a, r) => {
-  const { children: i, className: o, htmlMarkup: c = "span", highlighted: m, compact: t } = a, n = h(
+const T = l.forwardRef((r, s) => {
+  const { children: t, className: a, htmlMarkup: o = "span", highlighted: c } = r, n = d(
     e.tile__title,
     {
-      [e["tile__title--highlighted"]]: m,
-      [e["tile__title--compact"]]: t
+      [e["tile__title--highlighted"]]: c
     },
-    o
+    a
   );
-  return /* @__PURE__ */ p(c, { className: n, ref: r, children: i });
+  return /* @__PURE__ */ p(o, { className: n, ref: s, children: t });
 });
-_.displayName = "Title";
-const N = s.forwardRef((a, r) => {
+T.displayName = "Title";
+const _ = l.forwardRef((r, s) => {
   const {
-    children: i,
-    icon: o,
-    title: c,
-    className: m = "",
-    description: t,
-    fixed: n = !1,
-    highlighted: l = !1,
-    testId: T,
-    target: f,
-    rel: u,
-    href: C,
-    onClick: v
-  } = a, { hoverRef: w, isHovered: x } = b(), d = !t, y = h(
+    children: t,
+    icon: a,
+    title: o,
+    className: c = "",
+    description: n,
+    fixed: f = !1,
+    highlighted: m = !1,
+    testId: k,
+    target: h,
+    rel: v,
+    variant: C = "normal",
+    href: b,
+    onClick: w
+  } = r, { hoverRef: x, isHovered: y } = B(), g = j() < z.md, i = C === "compact", R = d(
     e.tile,
     {
-      [e["tile--fixed"]]: n,
-      [e["tile--compact"]]: d,
-      [e["tile--highlighted"]]: l
+      [e["tile--fixed"]]: f,
+      [e["tile--compact"]]: i,
+      [e["tile--highlighted"]]: m
     },
-    m
-  ), R = h(e["title-wrapper"], {
-    [e["title-wrapper--compact"]]: d
+    c
+  ), I = d(e["title-wrapper"], {
+    [e["title-wrapper--compact"]]: i
   });
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ N(
     "a",
     {
-      ref: j([r, w]),
-      href: C,
-      target: f,
-      rel: f === "_blank" ? "noopener noreferrer" : u,
-      className: y,
-      "data-testid": T,
-      "data-analyticsid": k.Tile,
-      onClick: v,
+      ref: E([s, x]),
+      href: b,
+      target: h,
+      rel: h === "_blank" ? "noopener noreferrer" : v,
+      className: R,
+      "data-testid": k,
+      "data-analyticsid": S.Tile,
+      onClick: w,
       children: [
-        /* @__PURE__ */ g("div", { className: R, children: [
-          s.cloneElement(o, { size: I.Medium, isHovered: x, color: l ? "white" : "black" }),
-          s.cloneElement(c, { highlighted: l, compact: d })
+        /* @__PURE__ */ N("div", { className: I, children: [
+          l.cloneElement(a, { size: g ? u.Small : u.Medium, isHovered: y, color: m ? "white" : "black" }),
+          l.cloneElement(o, { highlighted: m, compact: i })
         ] }),
-        t && /* @__PURE__ */ p("p", { className: e.tile__description, children: t }),
-        i && /* @__PURE__ */ p("div", { className: e.tile__children, children: i })
+        !i && !g && /* @__PURE__ */ p("p", { className: e.tile__description, children: n }),
+        t && /* @__PURE__ */ p("div", { className: e.tile__children, children: t })
       ]
     }
   );
 });
-N.displayName = "Tile";
-N.Title = _;
+_.displayName = "Tile";
+_.Title = T;
 export {
-  N as Tile,
-  N as default
+  _ as Tile,
+  _ as default
 };
 //# sourceMappingURL=index.js.map

package/components/Tile/index.js.map

@@ -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 { TitleTags } from './../Title/Title';\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { mergeRefs } from '../../utils/refs';\nimport { IconSize } from '../Icon';\n\nimport tileStyles from './styles.module.scss';\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 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, compact } = 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    href,\n    onClick,\n  } = props;\n  const { hoverRef, isHovered } = useHover<HTMLAnchorElement>();\n  const compact = !description;\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: IconSize.Medium, isHovered, color: highlighted ? 'white' : 'black' })}\n        {React.cloneElement(title, { highlighted: highlighted, compact: compact })}\n      </div>\n      {description && <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","compact","titleClasses","classNames","tileStyles","jsx","Tile","icon","title","description","fixed","testId","target","rel","href","onClick","hoverRef","isHovered","useHover","tileClasses","tileTitleWrapperClasses","jsxs","mergeRefs","AnalyticsId","IconSize"],"mappings":";;;;;;;AA0CA,MAAMA,IAAQC,EAAM,WAA+C,CAACC,GAAOC,MAAQ;AACjF,QAAM,EAAE,UAAAC,GAAU,WAAAC,GAAW,YAAAC,IAAa,QAAQ,aAAAC,GAAa,SAAAC,EAAY,IAAAN,GACrEO,IAAeC;AAAA,IACnBC,EAAW;AAAA,IACX;AAAA,MACE,CAACA,EAAW,0BAA0B,CAAC,GAAGJ;AAAA,MAC1C,CAACI,EAAW,sBAAsB,CAAC,GAAGH;AAAA,IACxC;AAAA,IACAH;AAAA,EAAA;AAIF,SACG,gBAAAO,EAHeN,GAGf,EAAU,WAAWG,GAAc,KAAAN,GACjC,UAAAC,EACH,CAAA;AAEJ,CAAC;AAEDJ,EAAM,cAAc;AAEb,MAAMa,IAAOZ,EAAM,WAAyC,CAACC,GAAOC,MAAQ;AAC3E,QAAA;AAAA,IACJ,UAAAC;AAAA,IACA,MAAAU;AAAA,IACA,OAAAC;AAAA,IACA,WAAAV,IAAY;AAAA,IACZ,aAAAW;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,aAAAV,IAAc;AAAA,IACd,QAAAW;AAAA,IACA,QAAAC;AAAA,IACA,KAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,EACE,IAAApB,GACE,EAAE,UAAAqB,GAAU,WAAAC,EAAU,IAAIC,EAA4B,GACtDjB,IAAU,CAACQ,GACXU,IAAchB;AAAA,IAClBC,EAAW;AAAA,IACX;AAAA,MACE,CAACA,EAAW,aAAa,CAAC,GAAGM;AAAA,MAC7B,CAACN,EAAW,eAAe,CAAC,GAAGH;AAAA,MAC/B,CAACG,EAAW,mBAAmB,CAAC,GAAGJ;AAAA,IACrC;AAAA,IACAF;AAAA,EAAA,GAEIsB,IAA0BjB,EAAWC,EAAW,eAAe,GAAG;AAAA,IACtE,CAACA,EAAW,wBAAwB,CAAC,GAAGH;AAAA,EAAA,CACzC;AAGC,SAAA,gBAAAoB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKC,EAAU,CAAC1B,GAAKoB,CAAQ,CAAC;AAAA,MAC9B,MAAAF;AAAA,MACA,QAAAF;AAAA,MACA,KAAKA,MAAW,WAAW,wBAAwBC;AAAA,MACnD,WAAWM;AAAA,MACX,eAAaR;AAAA,MACb,oBAAkBY,EAAY;AAAA,MAC9B,SAAAR;AAAA,MAEA,UAAA;AAAA,QAAC,gBAAAM,EAAA,OAAA,EAAI,WAAWD,GACb,UAAA;AAAA,UAAM1B,EAAA,aAAaa,GAAM,EAAE,MAAMiB,EAAS,QAAQ,WAAAP,GAAW,OAAOjB,IAAc,UAAU,QAAA,CAAS;AAAA,UACrGN,EAAM,aAAac,GAAO,EAAE,aAAAR,GAA0B,SAAAC,GAAkB;AAAA,QAAA,GAC3E;AAAA,QACCQ,KAAgB,gBAAAJ,EAAA,KAAA,EAAE,WAAWD,EAAW,mBAAoB,UAAYK,GAAA;AAAA,QACxEZ,KAAa,gBAAAQ,EAAA,OAAA,EAAI,WAAWD,EAAW,gBAAiB,UAAAP,GAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGxE,CAAC;AAEDS,EAAK,cAAc;AACnBA,EAAK,QAAQb;"}
+{"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;"}

package/components/Tile/styles.module.scss

@@ -1,22 +1,26 @@
 @use 'sass:map';
+@import '../../scss/font-settings';
 @import '../../scss/palette';
 @import '../../scss/spacers';
 @import '../../scss/breakpoints';
+@import '../../scss/screen-reader';
+@import '../../scss/supernova/styles/colors';
 
 @mixin tile-title {
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-word;
-  font-size: 1.5rem;
+  font-size: $font-size-sm;
   text-align: left;
-  line-height: 1.75rem;
-  font-weight: 600;
-  margin: 0;
-  margin-left: 0.5rem;
-
-  @media (min-width: map.get($grid-breakpoints, sm)) {
-    font-size: 1.25rem;
-    margin-top: 1rem;
+  line-height: 1.74rem;
+  font-weight: 400;
+  margin: getSpacer(3xs) 0 0 getSpacer(2xs);
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    font-weight: 600;
+    font-size: $font-size-md;
+    line-height: 1.625rem;
+    margin-top: getSpacer(s);
   }
 }
 
@@ -26,15 +30,21 @@
 
   display: flex;
   width: inherit;
-  padding: 1.5rem 2rem 2rem 1rem;
+  padding: getSpacer(2xs) getSpacer(2xs) getSpacer(xs);
   flex-direction: column;
-  justify-content: flex-start;
-  background-color: $white;
+  justify-content: center;
+  background-color: var(--core-color-white);
   color: $black;
   text-decoration: none;
   cursor: pointer;
+  border: 1px solid var(--color-base-border-blueberry);
   outline: none;
 
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    padding: getSpacer(l) getSpacer(m) getSpacer(l) getSpacer(s);
+    justify-content: flex-start;
+  }
+
   @media print {
     border: 1px solid $black;
   }
@@ -45,7 +55,11 @@
   }
 
   &--compact {
-    padding: 1.5rem 1rem;
+    padding: getSpacer(2xs) getSpacer(2xs) getSpacer(xs);
+
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      padding: getSpacer(s) getSpacer(m) getSpacer(s) getSpacer(s);
+    }
   }
 
   svg {
@@ -53,39 +67,36 @@
   }
 
   &:hover,
-  &:active,
-  &:focus {
-    background-color: $neutral100;
+  &:active {
+    background-color: var(--color-action-background-ondark-selected);
   }
 
-  &:focus {
-    box-shadow: 0 0 0 6px $neutral600;
+  &:focus-visible {
+    box-shadow: 0 0 0 3px var(--color-action-border-onlight-focus);
+    border-color: var(--color-action-border-onlight-focus);
   }
 
   &--highlighted {
     background-color: $blueberry500;
+    border-color: $blueberry500;
     color: $white;
 
     &:hover,
-    &:active,
-    &:focus {
+    &:active {
       background-color: $blueberry700;
+      border-color: $blueberry700;
     }
 
-    &:focus {
-      box-shadow: 0 0 0 6px $blueberry700;
+    &:focus-visible {
+      border-color: var(--color-action-border-onlight-focus);
     }
   }
 
   &__title {
     @include tile-title;
-
-    &--compact {
-      margin: 0 0 0 1.5rem;
-    }
   }
 
-  #{$tile}:focus & {
+  #{$tile}:focus-visible & {
     &__title {
       &--highlighted {
         text-decoration: underline;
@@ -106,12 +117,11 @@
 
 .title-wrapper {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: center;
   padding-bottom: 0.5rem;
 
-  @media (min-width: map.get($grid-breakpoints, sm)) {
-    flex-direction: column;
+  @media (min-width: map.get($grid-breakpoints, md)) {
     align-items: start;
 
     @media print {

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

@@ -3,7 +3,6 @@ export type Styles = {
   tile__children: string;
   tile__description: string;
   tile__title: string;
-  'tile__title--compact': string;
   'tile__title--highlighted': string;
   'tile--compact': string;
   'tile--fixed': string;

package/hooks/useOutsideEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOutsideEvent.js","sources":["../../src/hooks/useOutsideEvent.ts"],"sourcesContent":["import { useEffect } from 'react';\n\ntype OutsideEvents = keyof PickByValue<HTMLElementEventMap, MouseEvent | FocusEvent>;\n\n/**\n * Custom hook for klikk eller fokus utenfor et gitt element\n * @param ref Sjekker om det klikkes utenfor dette elementet\n * @param handleClick Callback-funksjon ved klikk utenfor elementet\n * @param events Type eventer å lytte på. Default: mousedown\n */\nexport const useOutsideEvent = (\n  ref: React.RefObject<HTMLElement>,\n  handleClick: (event: HTMLElementEventMap[OutsideEvents]) => void,\n  events: OutsideEvents[] = ['mousedown']\n): void => {\n  const handleOutsideEvent = (event: HTMLElementEventMap[OutsideEvents]): void => {\n    if (ref.current && !event.composedPath().includes(ref.current)) {\n      handleClick(event);\n    }\n  };\n\n  useEffect(() => {\n    events.forEach(eventName => document.addEventListener(eventName, handleOutsideEvent));\n\n    return () => {\n      events.forEach(eventName => document.removeEventListener(eventName, handleOutsideEvent));\n    };\n  }, [ref, handleClick, events]);\n};\n"],"names":["useOutsideEvent","ref","handleClick","events","handleOutsideEvent","event","useEffect","eventName"],"mappings":";AAUO,MAAMA,IAAkB,CAC7BC,GACAC,GACAC,IAA0B,CAAC,WAAW,MAC7B;AACH,QAAAC,IAAqB,CAACC,MAAoD;AAC1E,IAAAJ,EAAI,WAAW,CAACI,EAAM,eAAe,SAASJ,EAAI,OAAO,KAC3DC,EAAYG,CAAK;AAAA,EACnB;AAGF,EAAAC,EAAU,OACRH,EAAO,QAAQ,CAAaI,MAAA,SAAS,iBAAiBA,GAAWH,CAAkB,CAAC,GAE7E,MAAM;AACX,IAAAD,EAAO,QAAQ,CAAaI,MAAA,SAAS,oBAAoBA,GAAWH,CAAkB,CAAC;AAAA,EAAA,IAExF,CAACH,GAAKC,GAAaC,CAAM,CAAC;AAC/B;"}
+{"version":3,"file":"useOutsideEvent.js","sources":["../../src/hooks/useOutsideEvent.ts"],"sourcesContent":["import { useEffect } from 'react';\n\ntype OutsideEvents = keyof PickByValue<HTMLElementEventMap, MouseEvent | FocusEvent>;\n\n/**\n * Custom hook for klikk eller fokus utenfor et gitt element\n * @param ref Sjekker om det klikkes utenfor dette elementet\n * @param handleClick Callback-funksjon ved klikk utenfor elementet\n * @param events Type eventer å lytte på. Default: mousedown\n */\nexport const useOutsideEvent = (\n  ref: React.RefObject<HTMLElement>,\n  handleClick: (event: HTMLElementEventMap[OutsideEvents]) => void,\n  events: OutsideEvents[] = ['mousedown']\n): void => {\n  const handleOutsideEvent = (event: HTMLElementEventMap[OutsideEvents]): void => {\n    if (ref.current && !event.composedPath().includes(ref.current)) {\n      handleClick(event);\n    }\n  };\n\n  useEffect(() => {\n    events.forEach(eventName => document.addEventListener(eventName, handleOutsideEvent));\n\n    return (): void => {\n      events.forEach(eventName => document.removeEventListener(eventName, handleOutsideEvent));\n    };\n  }, [ref, handleClick, events]);\n};\n"],"names":["useOutsideEvent","ref","handleClick","events","handleOutsideEvent","event","useEffect","eventName"],"mappings":";AAUO,MAAMA,IAAkB,CAC7BC,GACAC,GACAC,IAA0B,CAAC,WAAW,MAC7B;AACH,QAAAC,IAAqB,CAACC,MAAoD;AAC1E,IAAAJ,EAAI,WAAW,CAACI,EAAM,eAAe,SAASJ,EAAI,OAAO,KAC3DC,EAAYG,CAAK;AAAA,EACnB;AAGF,EAAAC,EAAU,OACRH,EAAO,QAAQ,CAAaI,MAAA,SAAS,iBAAiBA,GAAWH,CAAkB,CAAC,GAE7E,MAAY;AACjB,IAAAD,EAAO,QAAQ,CAAaI,MAAA,SAAS,oBAAoBA,GAAWH,CAAkB,CAAC;AAAA,EAAA,IAExF,CAACH,GAAKC,GAAaC,CAAM,CAAC;AAC/B;"}

package/package.json

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