@rikstv/shared-components 3.0.18 → 3.0.20

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # 📖 Changelog
 
+## 3.0.20
+
+- Refactor `<Panel>` component to [Figma design](https://www.figma.com/design/tHKRyAMB0VrQHZjENOnwNi/Forslag%3A-designsystem-strim-web?m=dev&node-id=415%3A83885) and use CSS modules.
+  - rename `variant` to `intent` to mirror `<Alert>`
+  - remove `lightBackground` prop
+  - allow a string as `heading` (on top of `{ text: string, level: h }`)
+  - update used icons
+  - styled via `:where(.rds-panel)` for easier overrides. Accepts variables `--panel-color` and `--panel-bg` from outside
+- Add `text-wrap: pretty` to `<Panel>` and `<Alert>` (also add max-width to Alert)
+
+## 3.0.19
+
+- Revert remove `breakpoints.scss` since it is sooooo hard to configure custom media queries in NextJs...
+
 ## 3.0.18
 
 - ⚠️ (Breaking change) Remove export of `breakpoints.scss` and `rem.scss`

package/dist/components/alert/{Alert-cf8930d7.mjs → Alert-dcf856ca.mjs}

@@ -3,7 +3,7 @@ import { forwardRef as S, useState as o } from "react";
 import { H as k, B as w } from "../typography/Typography-563b6318.mjs";
 import "../icons/HeartToggle-54bb18c7.mjs";
 import { S as y, a as B, b as a, c as T } from "../icons/Icons-2b68875c.mjs";
-const R = "_rds-alert--icon_1cbbx_66", E = "_rds-alert--content-title_1cbbx_74", H = "_rds-alert--content_1cbbx_74", O = "_rds-alert--dismiss_1cbbx_100", D = "_dismissed_1cbbx_129", F = "_fade-out_1cbbx_1", t = {
+const R = "_rds-alert--icon_h7b6b_67", E = "_rds-alert--content-title_h7b6b_75", H = "_rds-alert--content_h7b6b_75", O = "_rds-alert--dismiss_h7b6b_108", D = "_dismissed_h7b6b_137", F = "_fade-out_h7b6b_1", t = {
   rdsAlertIcon: R,
   rdsAlertContentTitle: E,
   rdsAlertContent: H,
@@ -17,25 +17,25 @@ const R = "_rds-alert--icon_1cbbx_66", E = "_rds-alert--content-title_1cbbx_74",
   success: { title: "Vellykket", Icon: T }
 }, V = S(
   ({
-    className: c,
+    className: d,
     intent: r = "warning",
     variant: l = "filled",
-    testId: d = "rds-alert",
+    testId: c = "rds-alert",
     heading: m,
     children: f,
     dismissible: A = !0,
     lightBackground: _,
     onDismissed: e,
-    LinkToDetails: x,
-    ...b
+    LinkToDetails: b,
+    ...h
   }, v) => {
-    const [u, n] = o(!1), [j, i] = o(!1), p = ["rds-alert", _ ? "rds-light" : "", u ? t.dismissed : "", c].filter(Boolean).join(" ");
+    const [u, n] = o(!1), [j, i] = o(!1), p = ["rds-alert", _ ? "rds-light" : "", u ? t.dismissed : "", d].filter(Boolean).join(" ");
     if (j)
       return null;
-    const C = () => {
+    const x = () => {
       n(!1), i(!1);
-    }, { title: I, Icon: g } = M[r], h = () => {
-      i(!0), e == null || e(C);
+    }, { title: C, Icon: I } = M[r], g = () => {
+      i(!0), e == null || e(x);
     }, N = A && l !== "inline";
     return /* @__PURE__ */ s.jsxs(
       "div",
@@ -44,17 +44,17 @@ const R = "_rds-alert--icon_1cbbx_66", E = "_rds-alert--content-title_1cbbx_74",
         "aria-live": "polite",
         ref: v,
         className: p,
-        "data-testid": d,
+        "data-testid": c,
         "data-intent": r,
         "data-variant": l,
-        onAnimationEnd: h,
-        ...b,
+        onAnimationEnd: g,
+        ...h,
         children: [
-          /* @__PURE__ */ s.jsx(g, { className: t.rdsAlertIcon }),
+          /* @__PURE__ */ s.jsx(I, { className: t.rdsAlertIcon }),
           /* @__PURE__ */ s.jsxs("div", { className: t.rdsAlertContent, children: [
-            /* @__PURE__ */ s.jsx(k, { className: t.rdsAlertContentTitle, as: "span", children: m || I }),
+            /* @__PURE__ */ s.jsx(k, { className: t.rdsAlertContentTitle, as: "span", children: m || C }),
             /* @__PURE__ */ s.jsx(w, { children: f }),
-            x
+            b
           ] }),
           N && /* @__PURE__ */ s.jsx("div", { className: t.rdsAlertDismiss, children: /* @__PURE__ */ s.jsx("button", { "aria-label": "Avvis varsel", onClick: () => n(!0), children: /* @__PURE__ */ s.jsx(y, {}) }) })
         ]

package/dist/components/breadcrumb/breadcrumb.scss

@@ -1,3 +1,5 @@
+@use "../core/mixin/breakpoints" as break;
+
 .rds-breadcrumb {
   --rds-crumb-separator: "/";
   // --rds-crumb-separator: "›";
@@ -37,7 +39,7 @@
     // you're most likely to either go all the way back to the start, or back one step, so that's
     // the ones we show
     &--truncate {
-      @media (max-width: 768px) {
+      @include break.breakpoint("sm") {
         // Flip everything to be not visible
         display: none;
         &::after {

package/dist/components/core/core.scss

@@ -0,0 +1,129 @@
+@use "./mixin/breakpoints" as break;
+@use "./mixin/focus" as focus;
+
+:root {
+  // Spacing
+  --rds-spacing--2: 0.125rem;
+  --rds-spacing--4: 0.25rem;
+  --rds-spacing--8: 0.5rem;
+  --rds-spacing--16: 1rem;
+  --rds-spacing--24: 1.5rem;
+  --rds-spacing--32: 2rem;
+  --rds-spacing--40: 2.5rem;
+  --rds-spacing--48: 3rem;
+  --rds-spacing--64: 4rem;
+  --rds-spacing--80: 5rem;
+  --rds-spacing--96: 6rem;
+
+  // Common shadows
+  --rds-box-shadow--default: 0px 8px 16px rgba(0, 0, 0, 0.5);
+
+  // Widths
+  --rds-readability-width: 70ch;
+  --rds-content-width--default: 1070px;
+
+  // Gutters
+  --rds-gutter--sm: 1rem;
+  --rds-gutter--md: 5vw;
+  --rds-gutter--lg: 7.5vw;
+  --rds-gutter: var(--rds-gutter--sm);
+
+  @include break.min("sm") {
+    --rds-gutter: var(--rds-gutter--md);
+  }
+
+  @include break.min("lg") {
+    --rds-gutter: var(--rds-gutter--lg);
+  }
+}
+
+.rds-gutter {
+  margin-inline: var(--rds-gutter);
+}
+
+.rds-gutter-padding {
+  padding-inline: var(--rds-gutter);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.with-keyboard-focus {
+  @include focus.with-keyboard-focus;
+}
+
+.with-keyboard-focus-within {
+  @include focus.with-keyboard-focus-within;
+}
+
+@font-face {
+  font-family: "HALMatex";
+  src: url("https://static.rikstv.no/strim/fonts/HALMatexStrim-Medium.woff2") format("woff2"),
+    url("https://static.rikstv.no/strim/fonts/HALMatexStrim-Medium.woff") format("woff");
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "HALMatexLight";
+  src: url("https://static.rikstv.no/strim/fonts/HALMatexStrim-Light.woff2") format("woff2"),
+    url("https://static.rikstv.no/strim/fonts/HALMatexStrim-Light.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "AvertaRegular";
+  src: url("https://static.rikstv.no/strim/fonts/AvertaStandardRegular.woff2") format("woff2"),
+    url("https://static.rikstv.no/strim/fonts/hinted-AvertaStd-Regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "AvertaSemibold";
+  src: url("https://static.rikstv.no/strim/fonts/AvertaStandardSemibold.woff2") format("woff2"),
+    url("https://static.rikstv.no/strim/fonts/hinted-AvertaStd-Semibold.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "AvertaBold";
+  src: url("https://static.rikstv.no/strim/fonts/AvertaStandardBold.woff2") format("woff2"),
+    url("https://static.rikstv.no/strim/fonts/hinted-AvertaStd-Bold.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+/** Custom media breakpoints
+ * Requires "postcss-custom-media" in consumer postcss config
+ */
+// Max-width
+@custom-media --rds-media-xs (max-width: #{break.$xs});
+@custom-media --rds-media-sm (max-width: #{break.$sm});
+@custom-media --rds-media-md (max-width: #{break.$md});
+@custom-media --rds-media-ml (max-width: #{break.$ml});
+@custom-media --rds-media-lg (max-width: #{break.$lg});
+@custom-media --rds-media-lw (max-width: #{break.$lw});
+@custom-media --rds-media-xl (max-width: #{break.$xl});
+// Min-width
+@custom-media --rds-media-min-xs (min-width: #{break.$xs});
+@custom-media --rds-media-min-sm (min-width: #{break.$sm});
+@custom-media --rds-media-min-md (min-width: #{break.$md});
+@custom-media --rds-media-min-ml (min-width: #{break.$ml});
+@custom-media --rds-media-min-lg (min-width: #{break.$lg});
+@custom-media --rds-media-min-lw (min-width: #{break.$lw});
+@custom-media --rds-media-min-xl (min-width: #{break.$xl});

package/dist/components/core/mixin/breakpoints.scss

@@ -0,0 +1,44 @@
+$xs: 568px;
+$sm: 768px;
+$md: 992px;
+$ml: 1024px;
+$lg: 1200px;
+$lw: 1600px;
+$xl: 2400px;
+
+$breakpoints: (
+  "xs": $xs,
+  "sm": $sm,
+  "md": $md,
+  "ml": $ml,
+  "lg": $lg,
+  "lw": $lw,
+  "xl": $xl,
+) !default;
+
+@mixin breakpoint($breakpoint) {
+  // If the key exists in the map
+  @if map-has-key($breakpoints, $breakpoint) {
+    // Prints a media query based on the value
+    @media (max-width: map-get($breakpoints, $breakpoint)) {
+      @content;
+    }
+  }
+
+  // If the key doesn't exist in the map
+  @else {
+    @warn 'Unfortunately, no value could be retrieved from `#{$breakpoint}`. ' + 'Available breakpoints are: #{map-keys($breakpoints)}.';
+  }
+}
+
+@mixin min($breakpoint) {
+  // If the key exists in the map
+  @if map-has-key($breakpoints, $breakpoint) {
+    // Prints a media query based on the value
+    @media (min-width: map-get($breakpoints, $breakpoint)) {
+      @content;
+    }
+  } @else {
+    @warn 'Unfortunately, no value could be retrieved from `#{$breakpoint}`. ' + 'Available breakpoints are: #{map-keys($breakpoints)}.';
+  }
+}

package/dist/components/core/rtv.scss

@@ -1,6 +1,7 @@
-@import "./core.css";
+@use "./core";
+
+// Source of truth: https://www.figma.com/file/eZpToN8EpnZiD9AU2Xc8bN/Global-%2F-Farger?node-id=399%3A0&mode=dev
 
-/* RIKSTV COLORS */
 .rtv {
   // RiksTV Red
   --rikstv-red: #ef4642;
@@ -71,8 +72,6 @@
   --rikstv-foreground-gray-80: #858585;
 }
 
-// Source of truth: https://www.figma.com/file/eZpToN8EpnZiD9AU2Xc8bN/Global-%2F-Farger?node-id=399%3A0&mode=dev
-
 // Semantic colors/tags
 .rtv {
   // Brand colors
@@ -91,7 +90,7 @@
   --rds-button-tertiary-hover-bg: var(--rikstv-card-gray);
 
   // Panel
-  --panel-warning2-background-color: var(--rikstv-red-120);
+  --panel-warning-bg: var(--rikstv-red-120);
 
   // Foreground
   --rds-foreground-primary: var(--rikstv-white);

package/dist/components/core/strm.scss

@@ -1,6 +1,7 @@
-@import "./core.css";
+@use "./core";
+
+// Source of truth: https://www.figma.com/file/eZpToN8EpnZiD9AU2Xc8bN/Global-%2F-Farger?node-id=399%3A0&mode=dev
 
-/** STRIM COLORS */
 .strm {
   // Yellow
   --strim-action-yellow: #faed6f;
@@ -48,8 +49,6 @@
   --strim-error-dark: #d91b4e;
 }
 
-// Source of truth: https://www.figma.com/file/eZpToN8EpnZiD9AU2Xc8bN/Global-%2F-Farger?node-id=399%3A0&mode=dev
-
 .strm {
   // ?
   --stand-up-green: var(--strim-standup-green);
@@ -71,7 +70,7 @@
   --rds-button-tertiary-hover-bg: var(--strim-thriller-teal);
 
   // Panel
-  --panel-warning2-background-color: var(--strim-action-yellow-60);
+  --panel-warning-bg: var(--strim-action-yellow-60);
 
   // Foreground
   --rds-foreground-primary: var(--strim-white);

package/dist/components/panel/Panel-c66c5b49.mjs

@@ -0,0 +1,59 @@
+import { j as t } from "../accordion/Accordion-b8669b7e.mjs";
+import { forwardRef as f } from "react";
+import { S as j } from "../typography/Typography-563b6318.mjs";
+import "../icons/HeartToggle-54bb18c7.mjs";
+import { b as c, c as u, a as v } from "../icons/Icons-2b68875c.mjs";
+const g = "_rds-panel_gg8xr_1", N = "_content-and-buttons_gg8xr_33", b = "_content_gg8xr_33", P = "_title_gg8xr_60", y = "_icon_gg8xr_67", A = "_buttons_gg8xr_74", n = {
+  rdsPanel: g,
+  contentAndButtons: N,
+  content: b,
+  title: P,
+  icon: y,
+  buttons: A
+}, S = {
+  error: {
+    title: "Feil",
+    icon: /* @__PURE__ */ t.jsx(c, {})
+  },
+  info: {
+    title: "Informasjon",
+    icon: /* @__PURE__ */ t.jsx(c, {})
+  },
+  success: {
+    title: "Vellykket",
+    icon: /* @__PURE__ */ t.jsx(u, {})
+  },
+  warning: {
+    title: "Advarsel",
+    icon: /* @__PURE__ */ t.jsx(v, {})
+  }
+}, k = f(
+  ({ className: l = "", intent: o = "info", heading: s, action: e, id: r, children: i, ...a }, x) => {
+    const { title: m, icon: _ } = S[o], p = typeof s == "string" ? s : (s == null ? void 0 : s.title) ?? m, d = typeof s == "string" ? "span" : (s == null ? void 0 : s.level) ?? "span";
+    return /* @__PURE__ */ t.jsxs(
+      "div",
+      {
+        id: r,
+        className: `${n.rdsPanel} ${l}`,
+        "data-testid": "rds-panel",
+        "data-intent": o,
+        ref: x,
+        ...a,
+        children: [
+          /* @__PURE__ */ t.jsx("span", { className: n.icon, children: _ }),
+          /* @__PURE__ */ t.jsxs("div", { className: n.contentAndButtons, children: [
+            /* @__PURE__ */ t.jsxs("div", { className: n.content, children: [
+              /* @__PURE__ */ t.jsx(d, { className: `${n.title} rds-title-4`, children: p }),
+              /* @__PURE__ */ t.jsx(j, { children: i })
+            ] }),
+            e && /* @__PURE__ */ t.jsx("div", { className: n.buttons, children: e })
+          ] })
+        ]
+      }
+    );
+  }
+);
+k.displayName = "Panel";
+export {
+  k as P
+};

package/dist/components/panel/Panel.d.ts

@@ -1,14 +1,14 @@
 import { HTMLAttributes, ReactNode } from "react";
+type Intent = "info" | "warning" | "success" | "error";
 export interface Props extends HTMLAttributes<HTMLDivElement> {
     className?: string;
-    variant?: "info" | "warning" | "warning2" | "error";
-    id?: string;
-    lightBackground?: boolean;
-    heading?: {
-        text: string;
+    /** Defaults to `info`. Controls theme and icon */
+    intent?: Intent;
+    heading?: string | {
+        title: string;
         level: "h1" | "h2" | "h3" | "h4";
     };
     action?: ReactNode;
-    icon?: "info" | "success";
 }
 export declare const Panel: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/toggleButton/toggleButton.scss

@@ -1,5 +1,6 @@
 @use "../button/button-shared";
 @use "../button/button";
+@use "../core/mixin/breakpoints" as break;
 @use "../core/mixin/focus.scss" as mix;
 
 .rds-toggle-button-container:focus-within {
@@ -51,7 +52,7 @@
     display: none;
     margin-left: var(--rds-spacing--16);
 
-    @media (min-width: 768px) {
+    @include break.min("sm") {
       display: block;
     }