@bonniernews/dn-design-system-web 37.1.0 → 37.2.1

package/CHANGELOG.md

@@ -4,6 +4,40 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [37.2.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@37.2.0...@bonniernews/dn-design-system-web@37.2.1) (2026-01-21)
+
+
+### Bug Fixes
+
+* only run setup node in token/icon changes script if paths filter is true ([#2000](https://github.com/BonnierNews/dn-design-system/issues/2000)) ([bb5eb88](https://github.com/BonnierNews/dn-design-system/commit/bb5eb88342a4b5b59d29b49fe2a5c5b46f48db8c))
+* remove create-app-android-font from scripts ([#2005](https://github.com/BonnierNews/dn-design-system/issues/2005)) ([3beba40](https://github.com/BonnierNews/dn-design-system/commit/3beba40d3b02fb96f1f3ee9215322df82248a637))
+
+
+### Maintenance
+
+* add missing conventional-changelog-conventionalcommits dev dep ([#2002](https://github.com/BonnierNews/dn-design-system/issues/2002)) ([f27a423](https://github.com/BonnierNews/dn-design-system/commit/f27a4233c324561bc9d81a4579229dea3d293ed8))
+* **deps:** bump the npm_and_yarn group across 1 directory with 5 updates ([#2003](https://github.com/BonnierNews/dn-design-system/issues/2003)) ([8e301e7](https://github.com/BonnierNews/dn-design-system/commit/8e301e7f26c68ad6d68792065b1e2a2607875bae))
+* **deps:** bump the npm_and_yarn group across 1 directory with 6 updates ([#1999](https://github.com/BonnierNews/dn-design-system/issues/1999)) ([b2a38de](https://github.com/BonnierNews/dn-design-system/commit/b2a38de6d89252a44b477dc10dffd074654cd373))
+* **foundations:** update variables from Figma ([#1996](https://github.com/BonnierNews/dn-design-system/issues/1996)) ([1f72be5](https://github.com/BonnierNews/dn-design-system/commit/1f72be5b478828f56c17a1b468653531c9ba3390))
+* prerelease packages ([224c25a](https://github.com/BonnierNews/dn-design-system/commit/224c25add1640aead67f695ade7deab604f18fd3))
+
+## [37.2.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@37.1.0...@bonniernews/dn-design-system-web@37.2.0) (2026-01-19)
+
+
+### Features
+
+* **web:** select component ([#1995](https://github.com/BonnierNews/dn-design-system/issues/1995)) ([9457fab](https://github.com/BonnierNews/dn-design-system/commit/9457fab0b3dbf8c35d396d3efd3fc97273b9832c))
+
+
+### Bug Fixes
+
+* **web:** avoid rendering zero in tagheader ([#1914](https://github.com/BonnierNews/dn-design-system/issues/1914)) ([1c80836](https://github.com/BonnierNews/dn-design-system/commit/1c80836159b6ee244c833f14c247bc978ecb49ea))
+
+
+### Maintenance
+
+* **app:** expo storybook ([#1997](https://github.com/BonnierNews/dn-design-system/issues/1997)) ([19c0814](https://github.com/BonnierNews/dn-design-system/commit/19c081472e71642f29d96ad6f7e09cc8311f3c90))
+
 ## [37.1.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@37.0.2...@bonniernews/dn-design-system-web@37.1.0) (2026-01-13)
 
 

package/components/select/README.md

@@ -0,0 +1,44 @@
+Select
+======
+
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/select](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/select)
+*   Storybook: [Form > Select](https://designsystem.dn.se/?path=/docs/basic-form-select--docs)
+
+The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use "@bonniernews/dn-design-system-web/components/select/select";`
+
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| name\* | It's used as name and id<br />string | \- |
+| label\* | A label for the input<br />string | \- |
+| error | Used if error state shoud be set on load<br />boolean | \- |
+| errorMessage | What error message that should be displayed<br />string | \- |
+| required | boolean | \- |
+| disabled | Set to true if the field should be disabled<br />boolean | \- |
+| validation | To use with the sites validation, some example values for dn-web: required, password, email<br />string | \- |
+| helpText | A helptext for the field if needed<br />string | \- |
+| forcePx | Fixed pixel value is used for typography to prevent scaling based on html font-size<br />boolean | \- |
+| autofocus | Set to true if field should have focus when loaded<br />boolean | \- |
+| options | Ex. { data-prop: value }<br />{ value: string; label: string; }\[\] | \- |
+| classNames | Ex. "my-special-class"<br />string | ", " |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
+
+```jsx
+<Select
+  label="Välj en måltid"
+  name="select-meal"
+  options={[
+    {
+      label: 'Lasagne',
+      value: 'option1'
+    },
+    {
+      label: 'Pizza',
+      value: 'option2'
+    },
+    {
+      label: 'Skagenröra',
+      value: 'option3'
+    }
+  ]}
+/>
+```

package/components/select/select.scss

@@ -0,0 +1,85 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../assets/form-field/form-field.scss";
+
+.ds-select {
+  $ds-select__icon-size: 24px;
+  color: $ds-color-text-primary;
+  position: relative;
+  padding-top: ds-spacing($ds-s-050, rem);
+
+  .ds-select__inner {
+    position: relative;
+  }
+
+  .ds-icon {
+    pointer-events: none;
+    position: absolute;
+    width: $ds-select__icon-size;
+    right: ds-spacing($ds-s-075);
+
+    svg {
+      width: $ds-select__icon-size;
+    }
+  }
+
+  .ds-select__input {
+    // Remove default styling of select arrow
+    -moz-appearance:none; /* Firefox */
+    -webkit-appearance:none; /* Safari and Chrome */
+    appearance:none;
+
+    color: transparent;
+    box-sizing: border-box;
+    cursor: pointer;
+    width: 100%;
+    background-color: $ds-color-surface-primary;
+    padding: ds-px-to-rem(ds-spacing($ds-s-100) - ds-border-width(xxs)) ds-spacing($ds-s-100) - ds-border-width(xxs);
+    padding-right: ds-spacing($ds-s-250);
+    border: solid ds-border-width(xxs) $ds-color-border-primary-strong;
+    border-radius: ds-border-radius(025);
+    margin: 0;
+    @include ds-typography($ds-typography-functional-body-md);
+
+    &:disabled {
+      cursor: not-allowed;
+
+      + .ds-select__label {
+        color: $ds-color-text-primary-disabled;
+        cursor: not-allowed;
+      }
+    }
+
+    &:focus-visible {
+      outline: ds-border-width(xs) solid #{$ds-color-border-primary-strongest};
+      outline-offset: 2px;
+    }
+  }
+
+  .ds-select__label {
+    position: absolute;
+    top: ds-spacing($ds-s-075);
+    left: ds-spacing($ds-s-075);
+    padding: ds-spacing($ds-s-025);
+    z-index: 1;
+    pointer-events: none;
+    opacity: 1;
+    transition: opacity 0.1s ease-in, top 0.1s ease-in;
+    max-width: calc(100% - ds-spacing($ds-s-250));
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    @include ds-typography($ds-typography-functional-body-md);
+  }
+
+  &:has(select option:checked:not([value=""])) .ds-select__label {
+    background-color: $ds-color-surface-primary;
+    opacity: 1;
+    top: -#{ds-spacing($ds-s-100)};
+    width: auto;
+  }
+
+  &:has(select option:checked:not([value=""])) .ds-select__input {
+    color: $ds-color-text-primary;
+  }
+}

package/foundations/variables/colorsCssVariables.scss

@@ -1,10 +1,12 @@
 $ds-color-surface-primary: var(--ds-color-surface-primary);
 $ds-color-surface-highlight: var(--ds-color-surface-highlight);
+$ds-color-surface-highlight-text: var(--ds-color-surface-highlight-text);
 $ds-color-surface-primary-raised-soft: var(--ds-color-surface-primary-raised-soft);
 $ds-color-surface-primary-raised-strong: var(--ds-color-surface-primary-raised-strong);
 $ds-color-surface-primary-elevated: var(--ds-color-surface-primary-elevated);
 $ds-color-surface-primaryinvert: var(--ds-color-surface-primaryinvert);
 $ds-color-surface-foreground: var(--ds-color-surface-foreground);
+$ds-color-surface-foreground-native: var(--ds-color-surface-foreground-native);
 $ds-color-surface-primaryinvert-raised-soft: var(--ds-color-surface-primaryinvert-raised-soft);
 $ds-color-surface-primaryinvert-elevated: var(--ds-color-surface-primaryinvert-elevated);
 $ds-color-surface-brand: var(--ds-color-surface-brand);

package/foundations/variables/colorsDnDark.scss

@@ -1,10 +1,12 @@
 $ds-hex-dark-surface-primary: #171717;
 $ds-hex-dark-surface-highlight: #24221e;
+$ds-hex-dark-surface-highlight-text: #41402c;
 $ds-hex-dark-surface-primary-raised-soft: #242424;
 $ds-hex-dark-surface-primary-raised-strong: #333333;
 $ds-hex-dark-surface-primary-elevated: #333333;
 $ds-hex-dark-surface-primaryinvert: #ffffff;
 $ds-hex-dark-surface-foreground: #0d0d0d;
+$ds-hex-dark-surface-foreground-native: #0d0d0d;
 $ds-hex-dark-surface-primaryinvert-raised-soft: rgba(5, 5, 5, 0.05);
 $ds-hex-dark-surface-primaryinvert-elevated: #ffffff;
 $ds-hex-dark-surface-brand: #da000d;

package/foundations/variables/colorsDnLight.scss

@@ -1,10 +1,12 @@
 $ds-hex-surface-primary: #ffffff;
 $ds-hex-surface-highlight: #f8f5ef;
+$ds-hex-surface-highlight-text: #fff9a8;
 $ds-hex-surface-primary-raised-soft: #f2f2f2;
 $ds-hex-surface-primary-raised-strong: #e5e5e5;
 $ds-hex-surface-primary-elevated: #ffffff;
 $ds-hex-surface-primaryinvert: #0d0d0d;
 $ds-hex-surface-foreground: #f2f2f2;
+$ds-hex-surface-foreground-native: #f2f2f2;
 $ds-hex-surface-primaryinvert-raised-soft: #ffffff0d;
 $ds-hex-surface-primaryinvert-elevated: #242424;
 $ds-hex-surface-brand: #da000d;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "37.1.0",
+  "version": "37.2.1",
   "description": "DN design system for web.",
   "type": "module",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",

package/preact/components/icon-with-wrapper/icon-with-wrapper.js

@@ -7,11 +7,13 @@ var formatClassString = (classesArray) => {
 var colors_css_variables_default = {
   "surface-primary": "var(--ds-color-surface-primary)",
   "surface-highlight": "var(--ds-color-surface-highlight)",
+  "surface-highlight-text": "var(--ds-color-surface-highlight-text)",
   "surface-primary-raised-soft": "var(--ds-color-surface-primary-raised-soft)",
   "surface-primary-raised-strong": "var(--ds-color-surface-primary-raised-strong)",
   "surface-primary-elevated": "var(--ds-color-surface-primary-elevated)",
   "surface-primaryinvert": "var(--ds-color-surface-primaryinvert)",
   "surface-foreground": "var(--ds-color-surface-foreground)",
+  "surface-foreground-native": "var(--ds-color-surface-foreground-native)",
   "surface-primaryinvert-raised-soft": "var(--ds-color-surface-primaryinvert-raised-soft)",
   "surface-primaryinvert-elevated": "var(--ds-color-surface-primaryinvert-elevated)",
   "surface-brand": "var(--ds-color-surface-brand)",