@bonniernews/dn-design-system-web 14.2.0 → 14.3.0

package/CHANGELOG.md

@@ -4,6 +4,25 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [14.3.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.2.1...@bonniernews/dn-design-system-web@14.3.0) (2024-03-13)
+
+
+### Features
+
+* **web:** support for images in list item ([#1240](https://github.com/BonnierNews/dn-design-system/issues/1240)) ([0b83b22](https://github.com/BonnierNews/dn-design-system/commit/0b83b22ef2f843e63a127db7e4324d7d077c9ccb))
+
+
+### Bug Fixes
+
+* **app:** better flex in BaseListItem ([#1241](https://github.com/BonnierNews/dn-design-system/issues/1241)) ([12f7229](https://github.com/BonnierNews/dn-design-system/commit/12f72296fe2ae6b5c73273b9449d92b85f07b335))
+
+
+### Maintenance
+
+* prerelease packages ([114a615](https://github.com/BonnierNews/dn-design-system/commit/114a615923ab90db49adff9c6a9ce868d1b7d2f2))
+
+## [14.2.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.2.0...@bonniernews/dn-design-system-web@14.2.1) (2024-03-12)
+
 ## [14.2.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.1.0...@bonniernews/dn-design-system-web@14.2.0) (2024-03-12)
 
 

package/components/factbox/README-UXD.md

@@ -0,0 +1,40 @@
+# Standard button
+
+Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.
+
+
+### Anatomy
+
+1. **Label:** The text displayed on the button, indicating its function.
+2. **Icon** Iconography that enhances the function.
+3. **Background:** The background color or style that defines the button's appearance.
+4. **Border:** The outline surrounding the button, providing visual separation from surrounding elements.
+5. **Shape** The standard shape is rectangular but the component also supports a rounded format.
+
+
+## Variants
+
+| Variant   | How to use                                                                              |
+| --------- | ---------------------------------------------------------------------------------------------------- |
+| Brand   | Extra high emphasis button used for actions that are extra important for the user flow and conversion. I.e. ”Logga in” |
+| Primary   | High emphasis button used to attract attention to the most important task of the layout, typically the next step in the user flow. I.e. ”Nästa fråga” in a quiz.    |
+| Secondary | Medium emphasis button used for alternative non-primary actions. I.e. ”Alla nyheter” in a list of news.   |
+| Outline   | Low emphasis Button used for less important actions. Usually used in combination with a primary or brand Button. |
+
+
+## Usage
+
+Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.
+
+
+### Dos
+
+- **Use Primary Buttons for Key Actions:** Employ primary buttons for primary actions within a given context, guiding user focus towards important interactions.
+- **Provide Clear Labeling:** Ensure button labels are concise, descriptive, and indicative of the action they perform, enhancing usability.
+- **Maintain Visual Hierarchy:** Utilize secondary and outline buttons to distinguish lesser actions or provide alternative choices, maintaining a clear visual hierarchy.
+
+### Don'ts
+
+- **Avoid Ambiguous Labels:** Refrain from using vague or ambiguous labels like ”Fortsätt” that might confuse users about the button's function.
+- **Overuse of Primary Buttons:** Reserve primary buttons for the most crucial actions to avoid overwhelming users with excessive visual weight.
+

package/components/list-item/README-accordion.md

@@ -10,7 +10,7 @@
 
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
-|listItemType | String | yes | accordion, checkbox, radio, switch, standard | standard | Note that some parameters are **not** available for certain item types |
+|listItemType | String | yes | accordion, checkbox, radio, switch, image, standard | standard | Note that some parameters are **not** available for certain item types |
 |accordionContent | String | yes | | | It is possible to use html |
 |title | String | no | | | |
 |subtitle | String | no | | | |

package/components/list-item/README-checkbox.md

@@ -10,7 +10,7 @@
 
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
-|listItemType | String | yes | accordion, checkbox, radio, switch, standard | standard | Note that some parameters are **not** available for certain list item types |
+|listItemType | String | yes | accordion, checkbox, radio, switch, image, standard | standard | Note that some parameters are **not** available for certain list item types |
 |name | String | yes | | | Also used as id |
 |title | String | no | | | |
 |subtitle | String | no | | | |

package/components/list-item/README-image.md

@@ -0,0 +1,48 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/list-item](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/list-item)
+- Storybook: [ListItem > ImageListItem](https://designsystem.dn.se/?path=/docs/basic-listitem-imagelistitem--docs)
+- Storybook (Latest): [ListItem > ImageListItem](https://designsystem-latest.dn.se/?path=/docs/basic-listitem-imagelistitem--docs)
+
+----
+
+# Image List Item
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|listItemType | String | no | accordion, checkbox, radio, switch, image, standard | standard | Note that some parameters are **not** available for certain list item types |
+|title | String | no | | | |
+|subtitle | String | no | | | |
+|meta | String | no | | | |
+|disabled | bool | no | true, false | false | Note: only works on button-tag, not on a-tag |
+|border | bool | no | true, false | false | |
+|mediaHtml | String | no | | | Main image |
+|trailingIcon | String | no | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons |
+|href | String | no | | | If href is set the list item 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/list-item/list-item.njk' import ListItem %}
+
+{{ ListItem({
+  listItemType: 'image',
+  title: 'My list item',
+  mediaHtml: 'image-html',
+  trailingIcon: 'arrow_forward',
+  subtitle: 'Subtitle text',
+  meta: 'Meta text'
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/list-item/list-item";
+```

package/components/list-item/README-radio.md

@@ -10,7 +10,7 @@
 
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
-|listItemType | String | yes | accordion, checkbox, radio, switch, standard | standard | Note that some parameters are **not** available for certain list item types |
+|listItemType | String | yes | accordion, checkbox, radio, switch, image, standard | standard | Note that some parameters are **not** available for certain list item types |
 |name | String | yes | | | |
 |id | String | yes | | | |
 |title | String | no | | | |

package/components/list-item/README-switch.md

@@ -10,7 +10,7 @@
 
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
-|listItemType | String | yes | accordion, checkbox, radio, switch, standard | standard | Note that some parameters are **not** available for certain list item types |
+|listItemType | String | yes | accordion, checkbox, radio, switch, image, standard | standard | Note that some parameters are **not** available for certain list item types |
 |name | String | yes | | | Also used as id |
 |title | String | no | | | |
 |subtitle | String | no | | | |

package/components/list-item/README-toggle.md

@@ -10,7 +10,7 @@
 
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
-|listItemType | String | yes | accordion, checkbox, radio, toggle, standard | standard | Note that some parameters are **not** available for certain list item types |
+|listItemType | String | yes | accordion, checkbox, radio, toggle, image, standard | standard | Note that some parameters are **not** available for certain list item types |
 |title | String | yes | | | |
 |titleHref | String | no | | | If titleHref is set the list item title will be rendered as an a-tag |
 |subtitle | String | no | | | |

package/components/list-item/README.md

@@ -10,7 +10,7 @@
 
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
-|listItemType | String | no | accordion, checkbox, radio, switch, standard | standard | Note that some parameters are **not** available for certain list item types |
+|listItemType | String | no | accordion, checkbox, radio, switch, image, standard | standard | Note that some parameters are **not** available for certain list item types |
 |title | String | no | | | |
 |subtitle | String | no | | | |
 |meta | String | no | | | |

package/components/list-item/list-item.njk

@@ -14,6 +14,9 @@
         {% if iconLeftSvg %}
           <span class="{{ componentClassName + '__icon-left'}}">{{- iconLeftSvg | safe -}}</span>
         {% endif %}
+        {% if params.listItemType == 'image' %}
+          <div class="{{ componentClassName + '__image'}}">{{ params.mediaHtml }}</div>
+        {% endif %}
         {% if params.title %}
           <div class="{{ componentClassName + '__titles'}}">
             {% if params.titleHref and not params.disabled %}
@@ -54,7 +57,7 @@
     {% set variantClass = classNamePrefix + params.listItemType %}
   {% endif %}
 
-  {% if params.leadingIcon %}
+  {% if params.leadingIcon and params.listItemType != "image" %}
     {% set iconLeftSvg = IconUse({ icon: params.leadingIcon }) %}
   {% endif %}
 

package/components/list-item/list-item.scss

@@ -110,6 +110,18 @@ $ds-list-item__icon-size: 24px;
     margin-left: ds-spacing($ds-s-100);
   }
 
+  .ds-list-item__image {
+    max-height: 24px;
+
+    figure {
+      margin: 0;
+    }
+
+    + .ds-list-item__titles {
+      margin-left: ds-spacing($ds-s-100);
+    }
+  }
+
   @include ds-hover() {
     &:hover:not(.ds-list-item--disabled) .ds-list-item__inner::before {
       background-color: $ds-color-component-primary-overlay;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "14.2.0",
+  "version": "14.3.0",
   "description": "DN design system for web.",
   "main": "index.js",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",