@bonniernews/dn-design-system-web 22.1.1 → 22.2.0

package/CHANGELOG.md

@@ -4,6 +4,13 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [22.2.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@22.1.1...@bonniernews/dn-design-system-web@22.2.0) (2024-12-18)
+
+
+### Features
+
+* **web:** tsx buttons ([#1529](https://github.com/BonnierNews/dn-design-system/issues/1529)) ([5659dfc](https://github.com/BonnierNews/dn-design-system/commit/5659dfc0bba1dbb5eae739c704c9df704964d709))
+
 ## [22.1.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@22.1.0...@bonniernews/dn-design-system-web@22.1.1) (2024-12-18)
 
 

package/components/button/README-NJK.md

@@ -0,0 +1,53 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/button](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/button)
+- Storybook: [Buttons > Button](https://designsystem.dn.se/?path=/docs/basic-buttons-button--docs)
+- Storybook (Latest): [Buttons > Button](https://designsystem-latest.dn.se/?path=/docs/basic-buttons-button--docs)
+
+----
+
+# Button
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|text | String | yes | | | |
+|disabled | bool | no | true, false | false | Note: only works on button-tag, not on a-tag |
+|variant | String | no | primary, secondary, brand, staticWhite | primary | Design variant |
+|emphasis | String | no | default, elevated, outline, transparent | default | |
+|rounded | bool | no | true, false | false | Button will be rounded |
+|size| String | no | small, medium, large, xlarge | medium | |
+|fullWidth | bool | no | true, false | false | Button will be full width on both desktop and mobile |
+|mobile.fullWidth | bool | no | true, false | false | Ex mobile: { fullWidth: true } |
+|iconPosition | String | no | none, left, right | none | |
+|iconName | String | no | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons |
+|loading | bool | no | true, false | false | |
+|type | String | no | button, submit | button | |
+|href | String | no | | | If href is set the button will be rendered as an a-tag |
+|attributes | Object | no | | | Ex. { target: "_blank", "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/button/button.njk' import Button %}
+
+{{ Button({
+  text: 'Primary with icon',
+  variant: 'primary',
+  iconPosition: 'left',
+  iconName: 'plus',
+  mobile: {
+    fullWidth: true
+  },
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/button/button";
+```

package/components/button/README.md

@@ -1,53 +1,36 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/button](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/button)
-- Storybook: [Buttons > Button](https://designsystem.dn.se/?path=/docs/basic-buttons-button--docs)
-- Storybook (Latest): [Buttons > Button](https://designsystem-latest.dn.se/?path=/docs/basic-buttons-button--docs)
-
-----
-
-# Button
-
-## Parameters
-
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|text | String | yes | | | |
-|disabled | bool | no | true, false | false | Note: only works on button-tag, not on a-tag |
-|variant | String | no | primary, secondary, brand, staticWhite | primary | Design variant |
-|emphasis | String | no | default, elevated, outline, transparent | default | |
-|rounded | bool | no | true, false | false | Button will be rounded |
-|size| String | no | small, medium, large, xlarge | medium | |
-|fullWidth | bool | no | true, false | false | Button will be full width on both desktop and mobile |
-|mobile.fullWidth | bool | no | true, false | false | Ex mobile: { fullWidth: true } |
-|iconPosition | String | no | none, left, right | none | |
-|iconName | String | no | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons |
-|loading | bool | no | true, false | false | |
-|type | String | no | button, submit | button | |
-|href | String | no | | | If href is set the button will be rendered as an a-tag |
-|attributes | Object | no | | | Ex. { target: "_blank", "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/button/button.njk' import Button %}
-
-{{ Button({
-  text: 'Primary with icon',
-  variant: 'primary',
-  iconPosition: 'left',
-  iconName: 'plus',
-  mobile: {
-    fullWidth: true
-  },
-})}}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/button/button";
-```
+Button
+======
+
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/button](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/button)
+*   Storybook: [Buttons > Button](https://designsystem.dn.se/?path=/docs/basic-buttons-button--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/button/button.scss'`
+    
+
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| text\* | string | \- |
+| disabled | Note: only works on button-tag, not on a-tag<br />boolean | false |
+| classNames | string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />{ \[key: string\]: string; } | \- |
+| forcePx | Fixed pixel value is used for typography to prevent scaling based on html font-size<br />boolean | false |
+| size | "large", "small", "medium", "xlarge" | "medium" |
+| loading | boolean | false |
+| iconName | add, arrow\_back, arrow\_forward etc | | For all available icons see: [https://designsystem.dn.se/?path=/story/foundations-icons--all-icons](https://designsystem.dn.se/?path=/story/foundations-icons--all-icons)<br />"add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "bookmark-filled", "bookmarked", "campaign" | \- |
+| variant | Design variant<br />"brand", "secondary", "primary", "staticWhite" | "primary" |
+| emphasis | "default", "elevated", "outline", "transparent" | "default" |
+| rounded | Button will be rounded<br />boolean | false |
+| href | If href is set the button will be rendered as an a-tag<br />string | \- |
+| 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 |
+| iconPosition | "right", "none", "left" | "none" |
+| type | "button", "submit" | "button" |
+
+```jsx
+<Button
+  emphasis="default"
+  size="medium"
+  text="Primary"
+  variant="primary"
+/>
+```

package/components/button/button-types.ts

@@ -0,0 +1,87 @@
+import type { DsIcon } from '../../types-lib/ds-icon'
+
+export interface ButtonSharedProps {
+  /** Note: only works on button-tag, not on a-tag */
+  disabled?: boolean
+  classNames?: string
+  /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
+  attributes?: { [key: string]: string }
+  /** Fixed pixel value is used for typography to prevent scaling based on html font-size */
+  forcePx?: boolean
+  size?: 'small' | 'medium' | 'large' | 'xlarge'
+  loading?: boolean
+}
+
+export interface AllyProps {
+  visuallyHidden?: string
+}
+
+export interface ButtonBaseProps extends ButtonSharedProps {
+  /** Design variant */
+  variant?: 'primary' | 'secondary' | 'brand' | 'staticWhite'
+  text?: string
+  emphasis?: 'default' | 'elevated' | 'outline' | 'transparent'
+  /** Button will be rounded */
+  rounded?: boolean
+  /** Button will be full width on both desktop and mobile */
+  fullWidth?: boolean
+  /** Button will only full width on mobile */
+  mobileFullWidth?: boolean
+  iconPosition?: 'none' | 'left' | 'right'
+  /** add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons */
+  iconName?: DsIcon
+  type?: 'button' | 'submit'
+  /** If href is set the button will be rendered as an a-tag */
+  href?: string
+  isIconButton?: boolean
+  a11y?: AllyProps
+  selected?: boolean
+  isToggle?: boolean
+  selectedIconName?: DsIcon
+  selectedText?: string
+}
+
+export interface InnerButtonProps {
+  text?: string
+  isIconButton?: boolean
+  attributes?: object | any
+  a11y?: AllyProps
+  icon?: any
+  loadingHtml?: any
+}
+
+export interface ToggleWrapperProps {
+  selected?: boolean
+  classes?: string
+  attributes?: object
+  disabled?: boolean
+  loadingHtml?: any
+  onChild?: any
+  offChild?: any
+}
+
+export interface ButtonProps
+  extends ButtonSharedProps,
+    Pick<
+      ButtonBaseProps,
+      'text' | 'variant' | 'emphasis' | 'rounded' | 'fullWidth' | 'mobileFullWidth' | 'iconPosition' | 'iconName' | 'type' | 'href'
+    > {
+      text: string // set as required
+    }
+
+export interface ButtonToggleProps
+  extends ButtonSharedProps,
+    Pick<ButtonBaseProps, 'selected' | 'text' | 'selectedText' | 'fullWidth' | 'mobileFullWidth'> {
+      selectedText: string // set as required
+      variant?: 'primary' | 'secondary' | 'brand'
+    }
+export interface IconButtonProps extends ButtonSharedProps, Pick<ButtonBaseProps, 'iconName' | 'emphasis' | 'rounded' | 'href'> {
+  a11y?: object;
+  variant?: 'primary' | 'secondary' | 'brand'
+}
+
+
+export interface IconButtonToggleProps extends ButtonSharedProps, Pick<ButtonBaseProps, 'iconName' | 'emphasis' | 'selectedIconName'> {
+  selected?: boolean;
+  variant?: 'primary' | 'secondary' | 'brand'
+}

package/components/button-toggle/README-NJK.md

@@ -0,0 +1,56 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/button-toggle](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/button-toggle)
+- Storybook: [Buttons > ButtonToggle](https://designsystem.dn.se/?path=/docs/basic-buttons-buttontoggle--docs)
+- Storybook (Latest): [Buttons > ButtonToggle](https://designsystem-latest.dn.se/?path=/docs/basic-buttons-buttontoggle--docs)
+
+----
+
+# ButtonToggle
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|selected | bool | no | true, false | false | |
+|text | String | yes | | | |
+|selectedText | String | yes | | | |
+|disabled | bool | no | true, false | false | |
+|variant | String | no | primary, secondary, brand | primary | Design variant |
+|size| String | no | small, medium, large | medium | |
+|fullWidth | bool | no | true, false | false | Button will be full width on both desktop and mobile |
+|mobile.fullWidth | bool | no | true, false | false | Ex mobile: { fullWidth: true } |
+|loading | bool | no | true, false | false | |
+|attributes | Object | no | | | Ex. { target: "_blank", "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/button-toggle/button-toggle.njk' import ButtonToggle %}
+
+{{ ButtonToggle({
+  text: 'Följ',
+  selectedText: 'Följer',
+  variant: 'brand',
+  mobile: {
+    fullWidth: true
+  }
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/button-toggle/button-toggle";
+```
+
+### Javascript
+
+```javascript
+import dsButtonToggle from '@bonniernews/dn-design-system-web/components/button/button.js'
+const toggleElements = Array.from(document.getElementsByClassName("ds-btn--toggle"));
+dsButtonToggle(toggleElements);
+```

package/components/button-toggle/README.md

@@ -1,56 +1,39 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/button-toggle](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/button-toggle)
-- Storybook: [Buttons > ButtonToggle](https://designsystem.dn.se/?path=/docs/basic-buttons-buttontoggle--docs)
-- Storybook (Latest): [Buttons > ButtonToggle](https://designsystem-latest.dn.se/?path=/docs/basic-buttons-buttontoggle--docs)
+ButtonToggle
+============
 
-----
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/button-toggle](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/button-toggle)
+*   Storybook: [Buttons > ButtonToggle](https://designsystem.dn.se/?path=/docs/basic-buttons-buttontoggle--docs)
 
-# ButtonToggle
-
-## Parameters
-
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|selected | bool | no | true, false | false | |
-|text | String | yes | | | |
-|selectedText | String | yes | | | |
-|disabled | bool | no | true, false | false | |
-|variant | String | no | primary, secondary, brand | primary | Design variant |
-|size| String | no | small, medium, large | medium | |
-|fullWidth | bool | no | true, false | false | Button will be full width on both desktop and mobile |
-|mobile.fullWidth | bool | no | true, false | false | Ex mobile: { fullWidth: true } |
-|loading | bool | no | true, false | false | |
-|attributes | Object | no | | | Ex. { target: "_blank", "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/button-toggle/button-toggle.njk' import ButtonToggle %}
-
-{{ ButtonToggle({
-  text: 'Följ',
-  selectedText: 'Följer',
-  variant: 'brand',
-  mobile: {
-    fullWidth: true
-  }
-})}}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/button-toggle/button-toggle";
-```
-
-### Javascript
+### [](#javascript)Javascript
 
 ```javascript
 import dsButtonToggle from '@bonniernews/dn-design-system-web/components/button/button.js'
 const toggleElements = Array.from(document.getElementsByClassName("ds-btn--toggle"));
 dsButtonToggle(toggleElements);
 ```
+
+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/button-toggle/button-toggle.scss";`
+
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| selectedText\* | string | \- |
+| variant | "brand", "secondary", "primary" | "primary" |
+| disabled | Note: only works on button-tag, not on a-tag<br />boolean | false |
+| classNames | string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />{ \[key: string\]: string; } | { } |
+| forcePx | Fixed pixel value is used for typography to prevent scaling based on html font-size<br />boolean | false |
+| size | "large", "small", "medium", "xlarge" | "medium" |
+| loading | boolean | false |
+| text | string | \- |
+| selected | boolean | false |
+| 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 |
+
+```jsx
+<ButtonToggle
+  selectedText="Följer"
+  size="large"
+  text="Följ"
+  variant="brand"
+/>
+```

package/components/divider/README.md

@@ -6,6 +6,12 @@ Divider
 
 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/divider/divider.scss'`
 
-<table class="docblock-argstable sb-unstyled css-v2ifgj"><thead class="docblock-argstable-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th></tr></thead><tbody class="docblock-argstable-body"><tr><td class="css-4lbn0a"><span class="css-in3yi3">variant</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"soft"</span><span class="css-o1d7ko">"medium"</span><span class="css-o1d7ko">"hard"</span></div></div></td><td><div class="css-13nzt7e"><span class="css-o1d7ko">"soft"</span></div></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">classNames</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">attributes</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">object</span></div></div></td><td><span>-</span></td></tr></tbody></table>
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| variant | "soft", "medium", "hard" | "soft" |
+| classNames | string | \- |
+| attributes | object | \- |
 
-<pre class="prismjs css-4zr3vl"><div class="language-jsx css-zye6j" style="white-space: pre;"><span class="token tag punctuation">&lt;</span><span class="token tag class-name">Divider</span><span class="token tag"> </span><span class="token tag attr-name">variant</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">soft</span><span class="token tag attr-value punctuation">"</span><span class="token tag"> </span><span class="token tag punctuation">/&gt;</span></div></pre>
+```jsx
+<Divider variant="soft" />
+```