@bonniernews/dn-design-system-web 22.2.3 → 22.3.0

package/CHANGELOG.md

@@ -4,6 +4,13 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [22.3.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@22.2.3...@bonniernews/dn-design-system-web@22.3.0) (2025-01-08)
+
+
+### Features
+
+* **web:** tsx list items and form components ([#1552](https://github.com/BonnierNews/dn-design-system/issues/1552)) ([cbab08f](https://github.com/BonnierNews/dn-design-system/commit/cbab08faddfa967921a6b4143066e0f37d7e9c48))
+
 ## [22.2.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@22.2.2...@bonniernews/dn-design-system-web@22.2.3) (2024-12-20)
 
 

package/components/button/README.md

@@ -18,11 +18,11 @@ Button
 | 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 |
+| href | If href is set the button will be rendered as an a-tag<br />string | \- |
+| emphasis | "default", "elevated", "outline", "transparent" | "default" |
+| rounded | Button will be rounded<br />boolean | false |
 | iconPosition | "right", "none", "left" | "none" |
 | type | "button", "submit" | "button" |
 

package/components/button-toggle/README.md

@@ -36,4 +36,4 @@ The component will not include styling by itself. Make sure to include the right
   text="Följ"
   variant="brand"
 />
-```
+```

package/components/checkbox/README-NJK.md

@@ -0,0 +1,43 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/checkbox](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/checkbox)
+- Storybook: [Form > Checkbox](https://designsystem.dn.se/?path=/docs/basic-form-checkbox--docs)
+- Storybook (Latest): [Form > Checkbox](https://designsystem-latest.dn.se/?path=/docs/basic-form-checkbox--docs)
+
+----
+
+# Checkbox
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|name | String | yes | | | Also used as id |
+|label | String | no | | | |
+|checked | bool | no | true, false | false | |
+|disabled | bool | no | true, false | false | |
+|error | bool | no | true, false | false | |
+|errorMessage | String | no | | | |
+|required | bool | no | true, false | false | |
+|validation | String | no | | | To use with the sites validation, some example values for dn-web: required, password, email |
+|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/checkbox/checkbox.njk' import Checkbox %}
+
+{{ Checkbox({
+  label: 'My checkbox',
+  name: 'my-checkbox'
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/checkbox/checkbox";
+```

package/components/checkbox/README.md

@@ -1,43 +1,26 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/checkbox](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/checkbox)
-- Storybook: [Form > Checkbox](https://designsystem.dn.se/?path=/docs/basic-form-checkbox--docs)
-- Storybook (Latest): [Form > Checkbox](https://designsystem-latest.dn.se/?path=/docs/basic-form-checkbox--docs)
-
-----
-
-# Checkbox
-
-## Parameters
-
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|name | String | yes | | | Also used as id |
-|label | String | no | | | |
-|checked | bool | no | true, false | false | |
-|disabled | bool | no | true, false | false | |
-|error | bool | no | true, false | false | |
-|errorMessage | String | no | | | |
-|required | bool | no | true, false | false | |
-|validation | String | no | | | To use with the sites validation, some example values for dn-web: required, password, email |
-|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/checkbox/checkbox.njk' import Checkbox %}
-
-{{ Checkbox({
-  label: 'My checkbox',
-  name: 'my-checkbox'
-})}}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/checkbox/checkbox";
-```
+Checkbox
+========
+
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/checkbox](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/checkbox)
+*   Storybook: [Checkbox](https://designsystem.dn.se/?path=/docs/basic-form-checkbox--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/checkbox/checkbox.scss`
+
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| error | boolean | \- |
+| errorMessage | string | \- |
+| label | string | \- |
+| stripLabel | boolean | \- |
+| checked | boolean | \- |
+| required | boolean | \- |
+| disabled | boolean | \- |
+| name | string | "ds-checkbox" |
+| validation | string | \- |
+| classNames | string | \- |
+| forcePx | boolean | \- |
+| attributes | {} | \- |
+
+```jsx
+<Checkbox name="ds-checkbox" />
+```

package/components/divider/README.md

@@ -8,7 +8,7 @@ The component will not include styling by itself. Make sure to include the right
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
-| variant | "soft", "medium", "hard" | "soft" |
+| variant | "medium", "soft", "hard" | "soft" |
 | classNames | string | \- |
 | attributes | object | \- |
 

package/components/icon-button/README.md

@@ -17,9 +17,9 @@ The component will not include styling by itself. Make sure to include the right
 | 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" | \- |
+| href | If href is set the button will be rendered as an a-tag<br />string | \- |
 | emphasis | "default", "elevated", "outline", "transparent" | "default" |
 | rounded | Button will be rounded<br />boolean | true |
-| href | If href is set the button will be rendered as an a-tag<br />string | \- |
 
 ```jsx
 <IconButton

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

@@ -35,4 +35,4 @@ The component will not include styling by itself. Make sure to include the right
   size="medium"
   variant="primary"
 />
-```
+```

package/components/list-item/list-item-types.ts

@@ -0,0 +1,113 @@
+import { ComponentChildren } from "preact";
+
+import { ButtonProps } from '../radio-button/radio-button'
+import type { DsIcon } from '@bonniernews/dn-design-system-web/types-lib/ds-icon.d.ts'
+import { SwitchInnerProps } from '../switch/switch'
+import { ButtonToggleProps } from '../button/button-types'
+
+export interface ListItemSharedProps {
+  title?: string
+  subtitle?: string
+  meta?: string
+  border?: boolean
+  fontWeight?: 'regular' | 'semibold' | 'bold'
+  attributes?: { [key: string]: string }
+  children?: ComponentChildren
+  forcePx?: boolean
+  classNames?: string
+}
+
+export interface ListItemBaseProps extends ListItemSharedProps {
+  listItemType: 'accordion' | 'checkbox' | 'radio' | 'switch' | 'image' | 'byline' | 'standard' | 'toggle'
+  radioButtons?: ButtonProps[]
+  href?: string
+  leadingIcon?: DsIcon
+  trailingIcon?: DsIcon
+  mediaHtml?: string
+  name?: string
+  id?: string
+  value?: string
+  accordionContent?: any
+  checked?: boolean
+  selected?: boolean
+  stripLabel?: boolean
+  toggleText?: string
+  toggleSelectedText?: string
+  disabled?: boolean
+}
+
+export interface AccordionListItemProps
+  extends ListItemSharedProps,
+    Pick<ListItemBaseProps, 'accordionContent' | 'leadingIcon'> {}
+
+export interface CheckboxListItemProps
+  extends ListItemSharedProps,
+    Pick<ListItemBaseProps, 'href' | 'name' | 'checked' | 'stripLabel' | 'disabled'> {}
+
+export interface ImageListItemProps extends ListItemSharedProps, Pick<ListItemBaseProps, 'href' | 'trailingIcon'> {
+  mediaHtml: string
+}
+
+export interface RadioListItemProps
+  extends ListItemSharedProps,
+    Pick<ListItemBaseProps, 'href' | 'name' | 'id' | 'selected' | 'stripLabel' | 'value' | 'disabled'> {
+  selected: boolean
+}
+
+export interface StandardListItemProps
+  extends ListItemSharedProps,
+    Pick<ListItemBaseProps, 'href' | 'leadingIcon' | 'trailingIcon'> {}
+
+export interface SwitchListItemProps
+  extends ListItemSharedProps,
+    SwitchInnerProps,
+    Pick<ListItemBaseProps, 'leadingIcon' | 'disabled' | 'selected' | 'stripLabel' | 'value'> {
+  name: string
+}
+
+export interface ToggleListItemProps
+  extends ListItemSharedProps,
+    ButtonToggleProps,
+    Pick<ListItemBaseProps, 'title' | 'subtitle' | 'disabled' | 'selected'> {
+  name: string
+  titleHref?: string
+  toggleText: string
+  toggleSelectedText: string
+}
+
+export interface BylineListItemProps extends ToggleListItemProps, Pick<ListItemBaseProps, 'mediaHtml'> {}
+
+export type ListItemProps =
+  | ({ listItemType: 'accordion' } & AccordionListItemProps)
+  | ({ listItemType: 'checkbox' } & CheckboxListItemProps)
+  | ({ listItemType: 'image' } & ImageListItemProps)
+  | ({ listItemType: 'radio' } & RadioListItemProps)
+  | ({ listItemType: 'standard' } & StandardListItemProps)
+  | ({ listItemType: 'switch' } & SwitchListItemProps)
+  | ({ listItemType: 'toggle' } & ToggleListItemProps)
+  | ({ listItemType: 'byline' } & BylineListItemProps)
+
+export interface InnerListItemProps
+  extends ListItemSharedProps,
+    Pick<
+      ListItemBaseProps,
+      | 'listItemType'
+      | 'href'
+      | 'accordionContent'
+      | 'name'
+      | 'id'
+      | 'checked'
+      | 'selected'
+      | 'value'
+      | 'forcePx'
+      | 'toggleText'
+      | 'toggleSelectedText'
+      | 'disabled'
+    >,
+    Pick<ButtonToggleProps, 'variant'> {
+  componentClassName: string
+}
+
+export type TitleProps = Pick<ListItemBaseProps, 'title' | 'subtitle' | 'fontWeight' | 'attributes'> & {
+  componentClassName: string
+}

package/components/list-item/list-item.js

@@ -1,4 +1,4 @@
-import {dsButtonToggle} from '@bonniernews/dn-design-system-web/components/button/button-interactions.js';
+import { dsButtonToggle } from '@bonniernews/dn-design-system-web/components/button/button-interactions.js';
 
 export {
   dsListItem,

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

@@ -0,0 +1,49 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/radio-button](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/radio-button)
+- Storybook: [Form > RadioButton](https://designsystem.dn.se/?path=/docs/basic-form-radiobutton--docs)
+- Storybook (Latest): [Form > RadioButton](https://designsystem-latest.dn.se/?path=/docs/basic-form-radiobutton--docs)
+
+----
+
+# RadioButton
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|name | String | yes | | | |
+|buttons | Object | yes | | | Ex. { buttons: [{ id: 'my-id', label: 'my-label', value: 'my-value', checked: true }] } |
+|buttons[0].id | String | yes | | | Ex. { buttons: [{ id: 'my-id' }] } |
+|buttons[0].value | String | yes | | | Ex. { buttons: [{ value: 'my-value' }] } |
+|buttons[0].label | String | no | | | Ex. { buttons: [{ label: 'my-label' }] } |
+|buttons[0].selected | bool | no | true, false | false | Ex. { buttons: [{ selected: true }] } |
+|disabled | bool | no | true, false | false | |
+|error | bool | no | true, false | false | |
+|errorMessage | String | no | | | |
+|required | bool | no | true, false | false | |
+|~validation~ | String | no | | | Not implemented |
+|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/radio-button/radio-button.njk' import RadioButton %}
+
+{{ RadioButton({
+  name: 'radio_name',
+  buttons: [
+    { label: 'radio-label-1', id: 'radio-id-1', value: 'radio-value-1' },
+    { label: 'radio-label-2', id: 'radio-id-2', value: 'radio-value-2', checked: true }
+  ]
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/radio-button/radio-button";
+```

package/components/radio-button/README.md

@@ -1,49 +1,35 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/radio-button](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/radio-button)
-- Storybook: [Form > RadioButton](https://designsystem.dn.se/?path=/docs/basic-form-radiobutton--docs)
-- Storybook (Latest): [Form > RadioButton](https://designsystem-latest.dn.se/?path=/docs/basic-form-radiobutton--docs)
-
-----
-
-# RadioButton
-
-## Parameters
-
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|name | String | yes | | | |
-|buttons | Object | yes | | | Ex. { buttons: [{ id: 'my-id', label: 'my-label', value: 'my-value', checked: true }] } |
-|buttons[0].id | String | yes | | | Ex. { buttons: [{ id: 'my-id' }] } |
-|buttons[0].value | String | yes | | | Ex. { buttons: [{ value: 'my-value' }] } |
-|buttons[0].label | String | no | | | Ex. { buttons: [{ label: 'my-label' }] } |
-|buttons[0].selected | bool | no | true, false | false | Ex. { buttons: [{ selected: true }] } |
-|disabled | bool | no | true, false | false | |
-|error | bool | no | true, false | false | |
-|errorMessage | String | no | | | |
-|required | bool | no | true, false | false | |
-|~validation~ | String | no | | | Not implemented |
-|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/radio-button/radio-button.njk' import RadioButton %}
-
-{{ RadioButton({
-  name: 'radio_name',
-  buttons: [
-    { label: 'radio-label-1', id: 'radio-id-1', value: 'radio-value-1' },
-    { label: 'radio-label-2', id: 'radio-id-2', value: 'radio-value-2', checked: true }
-  ]
-})}}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/radio-button/radio-button";
-```
+RadioButton
+===========
+
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/radio-button](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/radio-button)
+*   Storybook: [Checkbox](https://designsystem.dn.se/?path=/docs/basic-form-radiobutton--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/radio-button/radio-button.scss`
+
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| buttons\* | ButtonProps\[\] | \- |
+| id\* | string | \- |
+| name | string | \- |
+| error | boolean | \- |
+| errorMessage | string | \- |
+| required | boolean | \- |
+| stripLabel | boolean | \- |
+| disabled | boolean | \- |
+| validation | string | \- |
+| classNames | string | \- |
+| forcePx | boolean | \- |
+| attributes | {} | \- |
+
+```jsx
+<RadioButton
+  buttons={[
+    {
+      id: 'my_radio_name',
+      selected: false,
+      value: 'my_radio_value'
+    }
+  ]}
+  name="my_radio_name"
+/>
+```

package/components/switch/README-NJK.md

@@ -0,0 +1,42 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/switch](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/switch)
+- Storybook: [Form > Switch](https://designsystem.dn.se/?path=/docs/basic-form-switch--docs)
+- Storybook (Latest): [Form > Switch](https://designsystem-latest.dn.se/?path=/docs/basic-form-switch--docs)
+----
+
+# Switch
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|name | String | yes | yes | | Also used as id |
+|meta | bool | no | true, false | false | Decides if meta text is shown |
+|metaOn | String | no | | på | |
+|metaOff | String | no | | av | |
+|checked | bool | no | true, false | false | |
+|disabled | 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/switch/switch.njk' import Switch %}
+
+{{ Switch({
+  meta: true,
+  metaOn: "On",
+  metaOff: "Off",
+  name: "my_switch"
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/switch/switch";
+```

package/components/switch/README.md

@@ -1,42 +1,28 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/switch](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/switch)
-- Storybook: [Form > Switch](https://designsystem.dn.se/?path=/docs/basic-form-switch--docs)
-- Storybook (Latest): [Form > Switch](https://designsystem-latest.dn.se/?path=/docs/basic-form-switch--docs)
-----
-
-# Switch
-
-## Parameters
-
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|name | String | yes | yes | | Also used as id |
-|meta | bool | no | true, false | false | Decides if meta text is shown |
-|metaOn | String | no | | på | |
-|metaOff | String | no | | av | |
-|checked | bool | no | true, false | false | |
-|disabled | 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/switch/switch.njk' import Switch %}
-
-{{ Switch({
-  meta: true,
-  metaOn: "On",
-  metaOff: "Off",
-  name: "my_switch"
-})}}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/switch/switch";
-```
+Switch
+======
+
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/switch](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/switch)
+*   Storybook: [Checkbox](https://designsystem.dn.se/?path=/docs/basic-form-switch--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/switch/switch.scss`
+
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| name | string | "ds-switch" |
+| showMeta | boolean | false |
+| metaOn | string | "På" |
+| metaOff | string | "Av" |
+| stripLabel | boolean | \- |
+| checked | boolean | \- |
+| required | boolean | \- |
+| disabled | boolean | \- |
+| validation | string | \- |
+| classNames | string | \- |
+| forcePx | boolean | \- |
+| attributes | {} | \- |
+
+```jsx
+<Switch
+  name="switch1"
+/>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "22.2.3",
+  "version": "22.3.0",
   "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

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

package/preact/components/button/button-types.d.ts

@@ -0,0 +1,73 @@
+import type { DsIcon } from '@bonniernews/dn-design-system-web/types-lib/ds-icon.d.ts';
+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;
+}
+export interface ButtonToggleProps extends ButtonSharedProps, Pick<ButtonBaseProps, 'selected' | 'text' | 'selectedText' | 'fullWidth' | 'mobileFullWidth'> {
+    selectedText: string;
+    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';
+}