@rikstv/shared-components 3.0.16 → 3.0.18

package/CHANGELOG.md

@@ -0,0 +1,659 @@
+# 📖 Changelog
+
+## 3.0.18
+
+- ⚠️ (Breaking change) Remove export of `breakpoints.scss` and `rem.scss`
+- Internal changes
+  - refactor `core.scss` into `core.css`
+  - inline colors and custom media queries in `core.css`
+  - update snippet extension with custom media variables
+
+## 3.0.17
+
+- Small adjustments to `<Alert>`
+  - make sure icon does not shrink on mobiles
+  - alert content set to Body-text
+  - update H4 to span 16-20px (was 16-18px)
+
+## 3.0.16
+
+- Adds focus outline to togglebutton
+
+## 3.0.14
+
+- `<Checkbox>`: use `:where` to decrease specificity needed for overrides.
+  - Add example on how to override CSS variables to portal
+
+## 3.0.12
+
+- Expose Icons via `import { Icons } from @rikstv/shared-components`, use like `<Icons.HeartFilled />`
+- Make `Chevron`, `HeartFilled` and `HeartUnfilled` default to 100% width and fill using `currentColor`
+
+## 3.0.11
+
+- Rename `<Alert>` callback property `onFadeOutEnd` to `onDismissed`
+
+## 3.0.10
+
+- Fix postcss-preset-env config to only transpile css-nesting (otherwise removed custom media quieries from output)
+
+## 3.0.9
+
+- Fix CSS specificity for `<Alert>`-title colors
+
+## 3.0.8
+
+- Add [postcss-preset-env](https://www.npmjs.com/package/postcss-preset-env) to CSS-modules for nesting etc
+
+## 3.0.7
+
+- ⚠️ Deprecations:
+  - Remove colors:
+    - `--rds-feedback-confirm`, replaced by `--rds-feedback-success` and `--rds-feedback-success-dark`
+    - `--rds-feedback-error-text`, replaced by `--rds-feedback-error`
+    - `--rds-feedback-error-object`, replaced by `--rds-feedback-error-dark`
+- Add new colors to align with [Figma design system colors](https://www.figma.com/file/eZpToN8EpnZiD9AU2Xc8bN/Global-%2F-Farger?node-id=399%3A0&mode=dev):
+  - `--rds-feedback-success`
+  - `--rds-feedback-success-dark`
+  - `--rds-feedback-info-dark`
+  - `--rds-feedback-warning-dark`
+  - `--rds-feedback-error-dark`
+- Add new component `<Alert>` - a dismissable panel styleable with prop `intent` (color scheme and icon) and `variant` (background and padding)
+  - <https://designsystem.strim.no/alert>
+
+## 3.0.4
+
+- Adding sub-title-3. A light green HAL Matex title
+
+## 3.0.3
+
+- Added `<GhostButton>`, `<GhostArrowButton>` and `<GhostIconButton>` as a toned down `<PrimaryButton>`
+
+## 3.0.2
+
+- Fix list first child size styling to be first DIRECT child
+- Allow override `<List>` gap via `--rds-list-gap`, defaults to `1em`
+
+## 3.0.1
+
+- Update svg's for checkmark and crossmark list items
+- Simplify styling for all listitems 👆
+- Allow pass icon to `<ListItem>`
+- Style `<List>` with flex and gaps instead of `margin-bottom`
+- Set `min-width` for icons in `<Panel>`
+
+## 3.0.0
+
+- Delete LinkButton and refactor BaseLinkButton. Forces users to create a wrapper component for BaseLinkButton in their client app, and add their own correct typing. Done to avoid the use of LinkButton, which only rendered a normal a-tag and caused a full refresh of the page when clicked.
+
+## 2.0.19
+
+- Removed unused tracking from accordions
+
+## 2.0.18
+
+- Updated Accordion for better analytics possibilities. KS wanted this
+
+## 2.0.17
+
+- Wrap Textfield component in a container div, to make custom styling easier
+
+## 2.0.16
+
+- Make dropdown props generic
+
+## 2.0.15
+
+- Add new `Dropdown` component. Moved from play-common
+
+## 2.0.14
+
+- Add new `Checkmark` icon to use in `CheckmarkListItem`, replaces the use of css :before pseudo class.
+
+## 2.0.13
+
+- Fixes react developer warnings in portal
+- Add prop to typography components: `as="div"` that renders the element as a `DIV` instead of `P`. Useful for wrapping elements that need to set a font.
+
+## 2.0.12
+
+- Use plugin [`vite-plugin-dts`](https://github.com/qmhc/vite-plugin-dts) to generate types
+
+## 2.0.11
+
+- Add `warning2` variant to `Panel` (yellow background)
+
+## 2.0.10
+
+- Add `highlighted` variant to `LinkButton` and add microanimation to all arrow buttons on hover
+
+## 2.0.9
+
+- Use `HALMatex Strim Medium` instead of `HALMatex Strim Regular` for H-tags
+
+## 2.0.8
+
+- Update Secondary button hover color
+
+## 2.0.7
+
+- Update regex in split function in snippets to include all variables (earlier regex did not include first entries)
+
+## 2.0.6
+
+- Rename color variables and update usages in portal
+
+## 2.0.5
+
+- Add `?inline` to the end of css imports to avoid possible duplicate loading of css (after updating to Vite 4)
+
+## 2.0.4
+
+- Fix parsing of minified sass
+
+## 2.0.3
+
+- Fix `package.json` exports field (`shared-components.es.js` => `shared-components.mjs`)
+
+## 2.0.2
+
+- Export custom media queries for breakpoints `--rds-media-{size}` and `--rds-media-min-{size}`
+
+## 2.0.1
+
+- Update Cypress from v10 to v12
+
+## 2.0.0
+
+- Update Vite from v2 to v4
+
+## 1.1.97
+
+- Update React from v17 to v18
+
+## 1.1.96
+
+- Add --rds-roundness--image property
+- Add some transparent variant of colors in use in players
+
+### 💥 Portal 💥
+
+- Fix issue where roundness and typography values weren't displayed in portal
+
+## 1.1.95
+
+### 💥 Portal 💥
+
+- Add 'Stil og tone' section (Strim and RiksTV version).
+
+## 1.1.94
+
+- Re-adjust `Lead` typography to use `HALmatex Light`.
+  - This requires usage of a new font from `static.rikstv.no` which should be preloaded in the app
+
+## 1.1.93
+
+- Adjust `Lead` typography to align with `title-4` (except line height)
+  - Add lightmode color for `Lead` based on the same color as `title-4`
+- Fixed erronous lightmode name for `sub-title-2` 🤦‍♂️
+
+## 1.1.92
+
+- Add NotificationDot
+
+## 1.1.91
+
+- Fixes issue with flexing content of ordered items, checkmarklistitems and crossmarklistiems
+
+## 1.1.90
+
+- Remove repository link in package.json of shared-components
+
+## 1.1.89
+
+- Add "with-keyboard-focus-within" global class
+
+## 1.1.88
+
+- More class props for ToggleInlineButton
+
+## 1.1.87
+
+- Refactor Checkbox, ToggleButton and ToggleLinkButton to use new BaseCheckbox
+- Added new ToggleInlineButton
+
+## 1.1.86
+
+- Add --rds-spacing--40
+
+## 💥 1.1.84 💥
+
+- Remove toggleButton label text on small screens as default
+- Remove `showLabel` prop
+- Remove `innerClass` prop
+- To keep current behavior set `alwaysShowLabel={true}`
+
+## 1.1.82
+
+- version with no feature changes
+
+## 1.1.81
+
+- increment version since move to registry.npmjs.org
+
+## 1.1.80
+
+- Add Span do typography doc
+
+## 1.1.79
+
+- add innerClass and minor refactoring to toggleButton
+
+## 1.1.78
+
+- update snippets ignorefile to fix issue with snippets generation
+
+## 1.1.77
+
+- release snippets, no change
+
+## 1.1.76
+
+- add postcss language support in snippets extension
+
+## 1.1.75
+
+- Let error message take space in the DOM, will now reflow, but that is preferable to missing part of error message
+
+## 1.1.74
+
+- Don't set defaultChecked on checkbox since checked is set (ToggleLinkButton)
+
+## 1.1.73
+
+- Fix light mode for ToggleLinkButton
+
+## 1.1.72
+
+- Added ToggleLinkButton
+
+## 1.1.71
+
+- Fix color of lead
+- Update readme
+
+## 1.1.70
+
+Add lead typography
+
+## 1.1.69
+
+Button API fix
+
+- `transparent` prop is made optional
+
+## 💥 1.1.67 💥
+
+- 💥 Button API has changed slightly
+  - `lightBackground` no longer has the option of `transparent`
+  - `transparent` is moved to a boolean property of itself
+  - To keep current behavior change `lightBackground="transparent"` to `lightBackground={true} transparent={true}`
+
+## 1.1.66
+
+### 💥 Portal 💥
+
+- 💥 MDX 2 is now running the show, please read [this](https://mdxjs.com/migrating/v2/) for all changes affecting MDX
+- Added an ErrorBoundary to the portal
+- Changed Vite-plugin to handle React, svgs and hot reload
+- 💥 Generated types are now cached locally after first generation, `npm run dev:clean` will delete all the cache
+- 💥 Inline code blocks are now handled by the CodeBlock, if you want a multiline code block that must now be marked with `multiline`
+- 💥 New syntax to mark code block as live or render, used to be `live=true`, now its just `live` or `render`
+
+## 1.1.65
+
+- Added CircularProgressBar
+
+## 1.1.64
+
+- Added xlarge roundness
+
+## 1.1.63
+
+- Loading spinner to buttons
+
+## 1.1.58
+
+- Add info icon to Panel
+
+## 1.1.57
+
+- Auto release extension
+
+## 1.1.56
+
+- PrimaryButton with arrow
+
+## 1.1.52
+
+- Fix width issue with RadioToggleInput caused by position absolute on input element
+
+## 1.1.51
+
+- Add snippets generator
+
+## 1.1.50
+
+- Add new typography style `rds-sub-title-2`
+
+## 1.1.49
+
+- Minor adjustment to brand colors and added a few new
+
+### Portal
+
+- Improved display of colors
+- Improved documentation of color usage
+- Dynamic documentation of brand colors
+- Fixed a bug where some custom properties had gone missing from portal
+- Improved display of spacing
+- Cleanup of documentation in core
+
+## 1.1.48
+
+- Add test for List and List-components
+
+## 1.1.47
+
+- Added xs, ml, lw and xl breakpoints
+
+## 1.1.46
+
+- Add semantic Strim color `--faded-text`
+
+## 1.1.45
+
+- Better aligning for dot in ListItem
+
+## 1.1.44
+
+- Add every color in the design system in new strim/rikstvColor.scss-files
+- For the existing semantic colors (in rtv.scss and strm.scss), point to these new color variables instead
+- Display all new colors (both design system colors and semantics) in the portal
+
+## 1.1.43
+
+- Add ordered list option to List component
+
+## 1.1.42
+
+- Add progress component
+
+## 1.1.41
+
+- Add breadcrumb component
+
+## 1.1.40
+
+- Improve screenreader experience of Check and Cross mark list items
+
+## 1.1.39
+
+- Fix layout issue with accordion if multiple in grid
+
+## 💥 1.1.38
+
+- 💥 Accordion in light mode now has a light background, not dark
+- 💥 Accordion removed left aligned chevron
+- Update accordion style
+
+## 1.1.37
+
+- Fix panel color
+
+## 1.1.36
+
+- Update panel design
+
+## 1.1.35
+
+- Update `align-items` of `CheckmarkListItem` from `flex-start` to `center`
+
+## 1.0.36
+
+- Add `--rds-roundness--large` of 24px in Strim brand, and 8px in RTV brand
+
+## 1.0.35
+
+- Add `.with-keyboard-focus` utility class
+
+### Portal
+
+- Add skip-to-content link before navigation
+
+## 1.0.34
+
+### Portal
+
+- Show `changelog` in portal
+
+## 1.0.33
+
+- Padding left/right on buttons. 16px for small screens and 24px for bigger
+- Padding top/bottom on buttons. 44px for small screens and 48px for bigger
+
+## 1.0.31
+
+- Add ref to List - technically breaking change, but on our case it shouldn't be
+- Add `useAnimatedHeight`
+- Add `useBrowserPreference`
+- Add `useClickOutsideListner`
+- Add `useIntersectionObserver`
+- Expose `useMutationObserver`
+
+## 1.0.30
+
+- Fixes visual bug for Textfield on iOS 15 when type is 'search'
+
+## 1.0.29
+
+- LinkButton now forwards ref onto BaseButton
+
+## 1.0.28
+
+- Add 'transparent background option to LinkButton
+
+## 1.0.27
+
+- Fix layout issue with Accordion
+
+## 1.0.26
+
+- Update README
+
+## 1.0.25
+
+- Add 'transparent' background option to Secondary Button.
+
+## 1.0.23
+
+### Portal
+
+- Improve display of custom properties
+- Align colors in /colors
+
+## 1.0.22
+
+- Add Loader
+
+## 1.0.21
+
+- Add breakpoints
+- Add media query mixins
+- Add gutter components
+- Add default width
+
+### Portal
+
+- Improve documentation of custom properties
+- Rename spacing -> layout
+
+## 1.0.20
+
+### Portal
+
+- Dogfood textField in portal
+
+## 1.0.19
+
+- Font faces are now defined as part of core, font files are fetched from "CDN".
+
+## 1.0.16
+
+- Add List, CheckmarkListItem, CrossmarkListItem and ListItem
+
+## 1.0.15
+
+- Add readability width custom property
+
+### Portal
+
+- Change hashrouting to browser routes, update dependencies
+- Change svg-handling lib
+
+## 1.0.14
+
+- Add white as option for button, fixes issue with secondary button on lightBackground
+
+## 1.0.13
+
+- Adjust Panel warning variant background
+
+## 1.0.12
+
+- Add Panel component
+
+## 1.0.12
+
+- Add panel component
+
+## 1.0.11
+
+- Improve LinkButton types
+
+## 1.0.10
+
+- Add LinkButton link component
+
+## 1.0.9
+
+- Fix type-export
+- 1.0.8 moved `.scss` files one level deeper, `/dist/components/{Component}/{}.scss` please advice
+
+## 1.0.8
+
+- Add checkbox component
+
+### Portal
+
+- Improve type-generation, results in much smaller bundle
+- Remove github and npm links
+- Change favicon to strim
+
+## 1.0.3 - 1.0.7
+
+- 💥 New textfield design, `error` is now `errorMessage`
+
+<details>
+   <summary>1.0.0 🥳</summary>
+
+- The design system finally has a home! [https://designsystem.strim.no/](https://designsystem.strim.no/)
+- The design system packages has moved to our internal Nexus
+- Release strategy is all new, please read [this](https://designsystem.strim.no/#/lage-komponenter)
+
+### 👉 Migration 👈
+
+- Change all references to https://github.com/lfbergee with [https://git.rikstv.no/rikstv/shared/rikstv.designsystem](https://git.rikstv.no/rikstv/shared/rikstv.designsystem) and https://lfbergee.github.com/rtv-ds with [https://designsystem.strim.no/](https://designsystem.strim.no/).
+- Change the origin of the repo, it is now `git@git.rikstv.no:rikstv/shared/rikstv.designsystem.git`, it's recommended to clone a new copy as the history has changed significantly
+- Packages are now supplied from internal Nexus, not the public repo. Add `@rikstv:registry=https://artifacts.internal.rikstv.no/repository/npm-rikstv/` to your `.npmrc`.
+
+</details>
+
+<details>
+   <summary>Older releases</summary>
+
+      ## 0.8.0 💥 Changes the secondary and tertiary background colors. Also adds new color "--rds-background-card"
+
+      ## 0.7.0 💥 Supply style as a single file, no longer splitting css files into each component, se reasoning [here](https://github.com/lfbergee/rtv-ds/issues/278)
+
+      ### 👉 Migration 👈
+
+      1. Import or preload `import "@rikstv/shared-components/dist/style.css"` early in your app or in root html file
+      1. Remove all import of spesific `.css` files
+         or:
+      1. Change import from `.css` to `.scss`, also the naming convention of sass files differs from css, so every import must be updated
+
+      ## 0.6.11 - 0.0.1
+
+      - Adds new feedback colors for Strim and RiksTV. The "rds-feedback-error" color is now deprecated.
+      - Fix build of TextField
+      - Add TextField
+      - Improve links in light mode
+      - Adds lightmode for primary and secondary button in strim
+      - Pimary and secondary buttons wrapped with lightMode component will adjust style accordingly
+      - lightBackground attribute can be used to override/trigger the lightMode styling
+      - Add accordion
+      - Improve style import for RadioToggle
+      - Let link inherit all font props
+      - Add link style and documentation
+      - New fonts added, display-title, title-1 and title-2 now expects HalMatex-Bold to be available in the app
+      - Adjust typography scale
+      - Function to generate proper fluid clamping
+      - Simplify release.
+      - More inclusive PeerDependency
+      - Remove react-dom as peerDep
+      - Align icons in buttons properly in safari
+      - Uses 'align-items' css to align icons in buttons for safari
+      - Adds forwardRef to all buttons in Button.tsx and IconButton.tsx
+      - Updates the colors of buttons
+      - Ref can be used with buttons
+      - All buttons have updated colors
+      - Added forwardRef to all buttons.
+      - Use numerical values for typography `line-heights`
+      - Change `rds-title-4` from `18-22px` to `16-22px`
+      - Added optional `iconClass`-prop to `IconButton`
+      - Darker title-1 color
+      - Typography for light background
+      - Light background wrapper component
+      - Light background typograhy
+      - Use HalMatex for Title2
+      - Add system-ui to font-stack
+      - new `sr-only` screenreader only class
+      - hide legend in radio toggle by default
+      - RadioToggleTest
+      - new color, accent-hover
+      - updated button style, taller and bolder
+      - update toggle style, same as button and new hover
+      - new color, bakground-tertiary
+      - Use relative values in spacing scale and radio-toggle
+      - Supply px-to-rem conversion function
+      - Rename Strim component to StrimProvider
+      - Rename RiksTV Component to RiksTVProvider
+      - Scope custom properties
+      - Remove font declaration from root style file
+      - Fix focus on RadioToggle
+      - Fix overflow issue on small screens in portal
+      - Icons now should show also in Safari
+      - RadioToggle button component
+      - Focus mixin
+      - Focus in Button
+      - Focus in portal-component
+      - Input method detect function
+      - Rewritten Core-component with input detection
+      - Added change log
+      - Initial component setup
+      - Initial portal setup
+      - Initial npm setup
+      - Component usage documentation
+
+</details>

package/dist/components/alert/Alert-cf8930d7.mjs

@@ -0,0 +1,68 @@
+import { j as s } from "../accordion/Accordion-b8669b7e.mjs";
+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 = {
+  rdsAlertIcon: R,
+  rdsAlertContentTitle: E,
+  rdsAlertContent: H,
+  rdsAlertDismiss: O,
+  dismissed: D,
+  fadeOut: F
+}, M = {
+  warning: { title: "Advarsel", Icon: B },
+  error: { title: "Feil", Icon: a },
+  info: { title: "Informasjon", Icon: a },
+  success: { title: "Vellykket", Icon: T }
+}, V = S(
+  ({
+    className: c,
+    intent: r = "warning",
+    variant: l = "filled",
+    testId: d = "rds-alert",
+    heading: m,
+    children: f,
+    dismissible: A = !0,
+    lightBackground: _,
+    onDismissed: e,
+    LinkToDetails: x,
+    ...b
+  }, v) => {
+    const [u, n] = o(!1), [j, i] = o(!1), p = ["rds-alert", _ ? "rds-light" : "", u ? t.dismissed : "", c].filter(Boolean).join(" ");
+    if (j)
+      return null;
+    const C = () => {
+      n(!1), i(!1);
+    }, { title: I, Icon: g } = M[r], h = () => {
+      i(!0), e == null || e(C);
+    }, N = A && l !== "inline";
+    return /* @__PURE__ */ s.jsxs(
+      "div",
+      {
+        role: "alert",
+        "aria-live": "polite",
+        ref: v,
+        className: p,
+        "data-testid": d,
+        "data-intent": r,
+        "data-variant": l,
+        onAnimationEnd: h,
+        ...b,
+        children: [
+          /* @__PURE__ */ s.jsx(g, { 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(w, { children: f }),
+            x
+          ] }),
+          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, {}) }) })
+        ]
+      }
+    );
+  }
+);
+V.displayName = "Alert";
+export {
+  V as A
+};