@bonniernews/dn-design-system-web 25.0.0 → 25.0.2

package/CHANGELOG.md

@@ -4,6 +4,26 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [25.0.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@25.0.1...@bonniernews/dn-design-system-web@25.0.2) (2025-01-16)
+
+
+### Bug Fixes
+
+* **web:** text input to tsx ([#1576](https://github.com/BonnierNews/dn-design-system/issues/1576)) ([ca1ebd7](https://github.com/BonnierNews/dn-design-system/commit/ca1ebd7a574ba9014e8c15344524ef7de78acc61))
+
+
+### Maintenance
+
+* prerelease packages ([491e500](https://github.com/BonnierNews/dn-design-system/commit/491e500dfe03d0b3735999fb9c747e414a198bf2))
+* update variables ([#1575](https://github.com/BonnierNews/dn-design-system/issues/1575)) ([9d3a378](https://github.com/BonnierNews/dn-design-system/commit/9d3a378ed8c9eec82a1ca04a6530fadfbfcb1a7c))
+
+## [25.0.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@25.0.0...@bonniernews/dn-design-system-web@25.0.1) (2025-01-14)
+
+
+### Maintenance
+
+* **web:** rewrite buddy menu to tsx ([#1573](https://github.com/BonnierNews/dn-design-system/issues/1573)) ([e3e8c89](https://github.com/BonnierNews/dn-design-system/commit/e3e8c893512fa177d5da6f91bf431a7568b64f72))
+
 ## [25.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@24.0.0...@bonniernews/dn-design-system-web@25.0.0) (2025-01-14)
 
 

package/components/buddy-menu/README-NJK.md

@@ -0,0 +1,71 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/buddy-menu](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/buddy-menu)
+- Storybook: [BuddyMenu](https://designsystem.dn.se/?path=/docs/page-buddymenu--docs)
+- Storybook (Latest): [BuddyMenu](https://designsystem-latest.dn.se/?path=/docs/page-buddymenu--docs)
+
+----
+
+# BuddyMenu
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|userName | String | no | | none | Should be populated with product specific js|
+|links | HTML String | no | | | Should be list item components|
+|accountLevel | String | no | | none | Should be populated with product specific js|
+|myAccountUrl | String | yes | | | Url for "Mitt konto" button |
+|addons | Array > Object | no | | | Ex. [{ title: 'Annonsfri', href: "https://id.dn.se/konto/?nextUrl=/vanliga-fragor/dn/#Annonsfritt" }] |
+|attributes | Object | no | | | Ex. { "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+|forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
+
+## Minimum requirement example
+
+### Nunjucks
+
+These are copy paste friendly examples to quickliy get started using a component.
+
+```html
+{% from '@bonniernews/dn-design-system-web/components/buddy-menu/buddy-menu.njk' import BuddyMenu %}
+
+{% macro BuddyMenuSample() %}
+  {{ ListItem({
+    title: 'Följer (ämnen och skribenter)',
+    leadingIcon: 'favorite',
+    border: true,
+    listItemType: "standard",
+    forcePx: true,
+    href: "https://www.dn.se/foljer/"
+  })}}
+  {{ ListItem({
+    title: 'Logga ut',
+    leadingIcon: 'logout',
+    border: false,
+    listItemType: "standard",
+    forcePx: true,
+    href: params.urls.logOut | default('#'),
+    classNames: "js-buddy-menu__logout"
+  })}}
+{% endmacro %}
+
+{{ BuddyMenu({
+  userName: "",
+  accountLevel: "",
+  myAccountUrl: "https://id.dn.se/konto/",
+  links: BuddyMenuSample(),
+  addons: [{ title: 'Annonsfri', href: "https://id.dn.se/konto/?nextUrl=/vanliga-fragor/dn/#Annonsfritt" }],
+  forcePx: true
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/buddy-menu/buddy-menu" as *;
+
+// these css variables can be overwritten to adjust
+// top/right position:
+--ds-buddy-menu-bottom-margin: 100px;
+--ds-buddy-menu-position-top: 0;
+// bottom-margin i.e. total max-height; calc(100vh - var(--ds-buddy-menu-bottom-margin))
+--ds-buddy-menu-position-right: 0;
+```

package/components/buddy-menu/README.md

@@ -1,71 +1,47 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/buddy-menu](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/buddy-menu)
-- Storybook: [BuddyMenu](https://designsystem.dn.se/?path=/docs/page-buddymenu--docs)
-- Storybook (Latest): [BuddyMenu](https://designsystem-latest.dn.se/?path=/docs/page-buddymenu--docs)
+BuddyMenu
+=========
 
-----
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/buddy-menu](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/buddy-menu)
+*   Storybook: [BuddyMenu](https://designsystem.dn.se/?path=/docs/page-buddymenu--docs)
 
-# BuddyMenu
+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/buddy-menu/buddy-menu" as *;`
 
-## Parameters
+#### [](#adjust-buddy-menu-position)Adjust buddy menu position
 
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|userName | String | no | | none | Should be populated with product specific js|
-|links | HTML String | no | | | Should be list item components|
-|accountLevel | String | no | | none | Should be populated with product specific js|
-|myAccountUrl | String | yes | | | Url for "Mitt konto" button |
-|addons | Array > Object | no | | | Ex. [{ title: 'Annonsfri', href: "https://id.dn.se/konto/?nextUrl=/vanliga-fragor/dn/#Annonsfritt" }] |
-|attributes | Object | no | | | Ex. { "data-test": "lorem ipsum" } |
-|classNames | String | no | | | Ex. "my-special-class" |
-|forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
+These css variables can be overwritten to adjust the position of the buddy menu:
 
-## Minimum requirement example
-
-### Nunjucks
-
-These are copy paste friendly examples to quickliy get started using a component.
-
-```html
-{% from '@bonniernews/dn-design-system-web/components/buddy-menu/buddy-menu.njk' import BuddyMenu %}
-
-{% macro BuddyMenuSample() %}
-  {{ ListItem({
-    title: 'Följer (ämnen och skribenter)',
-    leadingIcon: 'favorite',
-    border: true,
-    listItemType: "standard",
-    forcePx: true,
-    href: "https://www.dn.se/foljer/"
-  })}}
-  {{ ListItem({
-    title: 'Logga ut',
-    leadingIcon: 'logout',
-    border: false,
-    listItemType: "standard",
-    forcePx: true,
-    href: params.urls.logOut | default('#'),
-    classNames: "js-buddy-menu__logout"
-  })}}
-{% endmacro %}
-
-{{ BuddyMenu({
-  userName: "",
-  accountLevel: "",
-  myAccountUrl: "https://id.dn.se/konto/",
-  links: BuddyMenuSample(),
-  addons: [{ title: 'Annonsfri', href: "https://id.dn.se/konto/?nextUrl=/vanliga-fragor/dn/#Annonsfritt" }],
-  forcePx: true
-})}}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/buddy-menu/buddy-menu" as *;
-
-// these css variables can be overwritten to adjust
-// top/right position:
+```javascript
 --ds-buddy-menu-bottom-margin: 100px;
 --ds-buddy-menu-position-top: 0;
-// bottom-margin i.e. total max-height; calc(100vh - var(--ds-buddy-menu-bottom-margin))
 --ds-buddy-menu-position-right: 0;
 ```
+
+If we are using an (list-item) accordion in the buddy menu, we need to include the following js:
+
+```javascript
+import dsListItem from '@bonniernews/dn-design-system-web/components/list-item/list-item.js'
+const listElements = Array.from(document.getElementsByClassName("ds-list-item"));
+dsListItem(listElements);s
+```
+
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| userName | Should be populated with product specific js<br />string | \- |
+| links | Should be list item components<br />ComponentChildren | \- |
+| accountLevel | Should be populated with product specific js<br />string | \- |
+| myAccountUrl\* | Url for "Mitt konto" button<br />string | \- |
+| addons | Ex. \[{ title: 'Annonsfri', href: "[https://id.dn.se/konto/?nextUrl=/vanliga-fragor/dn/#Annonsfritt](https://id.dn.se/konto/?nextUrl=/vanliga-fragor/dn/#Annonsfritt)" }\]<br />{ title: string; href?: string; classNames?: string; }\[\] | \- |
+| addonsClassNames | string | \- |
+| isDnSkola | boolean | false |
+| classNames | string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />object | \- |
+| forcePx | Fixed pixel value is used for typography to prevent scaling based on html font-size<br />boolean | \- |
+
+```jsx
+<BuddyMenu
+  accountLevel="DN Digital"
+  links={<BuddyMenuLinksArkivet />}
+  myAccountUrl="https://id.dn.se/konto/"
+  userName="Anna Andersson"
+/>
+```

package/components/buddy-menu/buddy-menu.njk

@@ -52,10 +52,6 @@
                   attributes: { "data-hide-promo" : "" },
                   forcePx: params.forcePx
                 })}}
-
-                <div class="ds-buddy-menu__campaign">
-                  {{ params.campaignHtml | safe }}
-                </div>
               </div>
             {% endif %}
           </div>

package/components/buddy-menu/buddy-menu.scss

@@ -108,10 +108,6 @@
     }
   }
 
-  .ds-buddy-menu__campaign {
-    margin: ds-spacing(0 $ds-s-100, px, true);
-  }
-
   &.ds-buddy-menu--skola {
     .ds-buddy-menu__greeting {
       margin: 0;

package/components/button/README.md

@@ -21,10 +21,10 @@ Button
 | fullWidth | Button will be full width on both desktop and mobile<br />boolean | false |
 | mobileFullWidth | Button will only full width on mobile<br />boolean | false |
 | href | If href is set the button will be rendered as an a-tag<br />string | \- |
+| type | "button", "submit" | "button" |
 | emphasis | "default", "elevated", "outline", "transparent" | "default" |
 | rounded | Button will be rounded<br />boolean | false |
 | iconPosition | "right", "none", "left" | "none" |
-| type | "button", "submit" | "button" |
 
 ```jsx
 <Button

package/components/text-input/README-NJK.md

@@ -0,0 +1,57 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/text-input](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/text-input)
+- Storybook: [Form > TextInput](https://designsystem.dn.se/?path=/docs/basic-form-textinput--docs)
+- Storybook (Latest): [Form > TextInput](https://designsystem-latest.dn.se/?path=/docs/basic-form-textinput--docs)
+
+----
+
+# Text input
+
+A standard text input. It can be used as password field if the corresponding type is set.
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+| name | String | yes | | | It's used as name and id |
+| type | String | yes | text, password, email, etc | text | |
+| label | String | yes | | | A label for the input |
+| classNames | String | no | | | Ex. "my-special-class" |
+| attributes | Object | no | | | Ex. { data-prop: value } |
+| required | bool | no | true, false | false | |
+| validation | String | no | | | To use with the sites validation, some example values for dn-web: required, password, email |
+| helpText | String | no | | | A helptext for the field if needed |
+| error | bool | no | true, false | false | Used if error state shoud be set on load |
+| errorMessage | String | no | | | What error message that should be displayed |
+| disabled | bool | no | true, false | false | Set to true if the field should be disabled |
+| autoFocus | bool | no | true, false| false | Set to true if field should have focus when loaded |
+| forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
+
+## Minimum requirement example
+
+These are copy paste friendly examples to quickliy get started using a component.
+
+### Nunjucks
+
+```javascript
+{% from '@bonniernews/dn-design-system-web/components/text-input/text-input.njk' import TextInput %}
+
+{{ TextInput({
+  name: "name",
+  type: "text",
+  label: "A label for the input"
+})}}
+```
+
+### Scss
+
+```scss
+@use "@bonniernews/dn-design-system-web/components/text-input/text-input";
+```
+
+### Javascript
+
+```javascript
+import textInput from '@bonniernews/dn-design-system-web/components/text-input/text-input.js'
+```
+
+*The javascript is only needed for text fields of type password*

package/components/text-input/README.md

@@ -1,57 +1,37 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/text-input](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/text-input)
-- Storybook: [Form > TextInput](https://designsystem.dn.se/?path=/docs/basic-form-textinput--docs)
-- Storybook (Latest): [Form > TextInput](https://designsystem-latest.dn.se/?path=/docs/basic-form-textinput--docs)
+TextInput
+=========
 
-----
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/text-input](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/text-input)
+*   Storybook: [Form > TextInput](https://designsystem.dn.se/?path=/docs/basic-form-textinput--docs)
 
-# Text input
+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/text-input/text-input";`
 
-A standard text input. It can be used as password field if the corresponding type is set.
+### [](#javascript)Javascript
 
-## Parameters
-
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-| name | String | yes | | | It's used as name and id |
-| type | String | yes | text, password, email, etc | text | |
-| label | String | yes | | | A label for the input |
-| classNames | String | no | | | Ex. "my-special-class" |
-| attributes | Object | no | | | Ex. { data-prop: value } |
-| required | bool | no | true, false | false | |
-| validation | String | no | | | To use with the sites validation, some example values for dn-web: required, password, email |
-| helpText | String | no | | | A helptext for the field if needed |
-| error | bool | no | true, false | false | Used if error state shoud be set on load |
-| errorMessage | String | no | | | What error message that should be displayed |
-| disabled | bool | no | true, false | false | Set to true if the field should be disabled |
-| autoFocus | bool | no | true, false| false | Set to true if field should have focus when loaded |
-| forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
-
-## Minimum requirement example
-
-These are copy paste friendly examples to quickliy get started using a component.
-
-### Nunjucks
-
-```javascript
-{% from '@bonniernews/dn-design-system-web/components/text-input/text-input.njk' import TextInput %}
-
-{{ TextInput({
-  name: "name",
-  type: "text",
-  label: "A label for the input"
-})}}
-```
-
-### Scss
-
-```scss
-@use "@bonniernews/dn-design-system-web/components/text-input/text-input";
-```
-
-### Javascript
+_The javascript is only needed for text fields of type password_
 
 ```javascript
 import textInput from '@bonniernews/dn-design-system-web/components/text-input/text-input.js'
 ```
 
-*The javascript is only needed for text fields of type password*
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| name\* | It's used as name and id<br />string | \- |
+| type | text, password, email, etc<br />"number", "text", "search", "color", "image", "date", "datetime-local", "email" | "text" |
+| 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 | \- |
+| classNames | Ex. "my-special-class"<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 | \- |
+| attributes | Ex. { data-prop: value }<br />{} | \- |
+
+```jsx
+<TextInput
+  label="Användarnamn"
+/>
+```

package/components/text-input/text-input-interactions.js

@@ -0,0 +1,26 @@
+export const textInput = () => {
+  function passwordToggle(id, toggle) {
+    var x = document.getElementById(id)
+    if (x.type === 'password') {
+      x.type = 'text'
+      toggle.classList.add('ds-btn--selected')
+      toggle.setAttribute('aria-checked', 'true')
+    } else {
+      x.type = 'password'
+      toggle.classList.remove('ds-btn--selected')
+      toggle.setAttribute('aria-checked', 'false')
+    }
+  }
+
+  const passwordInputs = document.querySelectorAll('.ds-text-input [type=password]')
+  passwordInputs.forEach((input) => {
+    const toggle = document.getElementById(`${input.id}-password-toggle`)
+    if (toggle) {
+      toggle.addEventListener('click', () => {
+        passwordToggle(input.id, toggle)
+      })
+    }
+  })
+}
+
+export default textInput

package/components/text-input/text-input.js

@@ -1,20 +1,22 @@
-const textInput = function () {
+const textInput = () => {
   function passwordToggle(id) {
-    var x = document.getElementById(id);
-    if (x.type === "password") {
-      x.type = "text";
+    var x = document.getElementById(id)
+    if (x.type === 'password') {
+      x.type = 'text'
     } else {
-      x.type = "password";
+      x.type = 'password'
     }
   }
 
-  const passwordInputs = document.querySelectorAll('.ds-text-input [type=password]');
+  const passwordInputs = document.querySelectorAll('.ds-text-input [type=password]')
   passwordInputs.forEach((input) => {
-    const toggle = document.getElementById(`${input.id}-password-toggle`);
+    const toggle = document.getElementById(`${input.id}-password-toggle`)
     if (toggle) {
-      toggle.addEventListener("click", () => { passwordToggle(input.id) });
+      toggle.addEventListener('click', () => {
+        passwordToggle(input.id)
+      })
     }
-  });
+  })
 }
 
-export default textInput;
+export default textInput

package/components/text-input/text-input.scss

@@ -1,6 +1,7 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../../assets/form-field/form-field.scss";
-@use "../icon-button/icon-button.scss";
+@use "../icon-button-toggle/icon-button-toggle.scss";
+@use "../icon-button/icon-button.scss"; // TODO remove when njk is removed
 
 $ds-text-input-toggle-btn__width: 28px;
 $ds-text-input-toggle-btn__top: 22px;

package/package.json

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

package/preact/assets/form-field/form-field.d.ts

@@ -8,5 +8,5 @@ export interface FormFieldProps {
     type?: string;
     children?: ComponentChildren;
 }
-export declare const FormField: ({ errorMessage, wrapperClasses, helpHtml, helpText, type, children }: FormFieldProps) => import("preact").JSX.Element;
+export declare const FormField: ({ error, errorMessage, wrapperClasses, helpHtml, helpText, type, children }: FormFieldProps) => import("preact").JSX.Element;
 export default FormField;

package/preact/components/buddy-menu/buddy-menu.d.ts

@@ -0,0 +1,49 @@
+import { ComponentChildren } from 'preact';
+export interface BuddyMenuProps {
+    /** Should be populated with product specific js */
+    userName?: string;
+    /** Should be list item components */
+    links?: ComponentChildren;
+    /** Should be populated with product specific js */
+    accountLevel?: string;
+    /** Url for "Mitt konto" button */
+    myAccountUrl: string;
+    /** Ex. [{ title: 'Annonsfri', href: "https://id.dn.se/konto/?nextUrl=/vanliga-fragor/dn/#Annonsfritt" }] */
+    addons?: Array<{
+        title: string;
+        href?: string;
+        classNames?: string;
+    }>;
+    addonsClassNames?: string;
+    isDnSkola?: boolean;
+    classNames?: string;
+    /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
+    attributes?: object;
+    /** Fixed pixel value is used for typography to prevent scaling based on html font-size */
+    forcePx?: boolean;
+}
+/**
+ * - GitHub: [BonnierNews/dn-design-system/../web/src/components/buddy-menu](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/buddy-menu)
+ * - Storybook: [BuddyMenu](https://designsystem.dn.se/?path=/docs/page-buddymenu--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/buddy-menu/buddy-menu" as *;`
+ *
+ * #### Adjust buddy menu position
+ * These css variables can be overwritten to adjust the position of the buddy menu:
+ *
+ * ```css
+ * --ds-buddy-menu-bottom-margin: 100px;
+ * --ds-buddy-menu-position-top: 0;
+ * --ds-buddy-menu-position-right: 0;
+ * ```
+ *
+ * If we are using an (list-item) accordion in the buddy menu, we need to include the following js:
+ *
+ * ```javascript
+ * import dsListItem from '@bonniernews/dn-design-system-web/components/list-item/list-item.js'
+ * const listElements = Array.from(document.getElementsByClassName("ds-list-item"));
+ * dsListItem(listElements);s
+ * ```
+ */
+export declare const BuddyMenu: ({ userName, links, accountLevel, myAccountUrl, addons, addonsClassNames, isDnSkola, classNames, attributes, forcePx, }: BuddyMenuProps) => import("preact").JSX.Element;