@bonniernews/dn-design-system-web 14.3.9 → 14.3.10

package/CHANGELOG.md

@@ -4,6 +4,13 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [14.3.10](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.3.9...@bonniernews/dn-design-system-web@14.3.10) (2024-03-20)
+
+
+### Maintenance
+
+* **web:** upgrade to storybook 8.0.0 add UXD-readme ([#1194](https://github.com/BonnierNews/dn-design-system/issues/1194)) ([59adc00](https://github.com/BonnierNews/dn-design-system/commit/59adc00f9d797e0e999250f1aa92d68626c8091c))
+
 ## [14.3.9](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.3.8...@bonniernews/dn-design-system-web@14.3.9) (2024-03-20)
 
 

package/components/button/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](#brand)   | Extra high emphasis button used for actions that are extra important for the user flow and conversion. I.e. ”Logga in” |
+| [Primary](#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/factbox/README-UXD.md

@@ -1,40 +0,0 @@
-# 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/icon-sprite/README.md

@@ -3,6 +3,7 @@
 - Storybook (Latest): [Icon](https://designsystem-latest.dn.se/?path=/docs/foundations-icons--docs)
 
 ----
+
 # Icons
 
 There are three ways to use icons from DS:

package/introduction/README-UXD.md

@@ -0,0 +1 @@
+## UXD documentation

package/introduction/README.md

@@ -0,0 +1,19 @@
+# DN Design system
+
+<img src="/images/digital-dn.png" width="150">
+
+The design system used by Dagens Nyheter.
+
+## Technical documentation
+
+Foundations, components and helpers of DN design system for web
+
+### Useful links
+
+Storybook: [https://designsystem.dn.se/](https://designsystem.dn.se/)
+
+Github: [https://github.com/BonnierNews/dn-design-system/tree/main/web/src](https://github.com/BonnierNews/dn-design-system/tree/main/web/src)
+
+Changelog: [https://github.com/BonnierNews/dn-design-system/blob/main/web/src/CHANGELOG.md](https://github.com/BonnierNews/dn-design-system/blob/main/web/src/CHANGELOG.md)
+
+For specific instructions see each component or helper readme.

package/package.json

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