@bonniernews/dn-design-system-web - npm Package Compare versions

Comparing version 0.1.0-alpha.40 to 0.1.0-alpha.46

CHANGELOG.md

@@ -6,2 +6,65 @@ # Change Log
 
+# 0.1.0-alpha.46 (2022-11-14)
+
+
+### Bug Fixes
+
+* **web:** update readme for all components ([#418](https://github.com/BonnierNews/dn-design-system/issues/418)) ([7df88e8](https://github.com/BonnierNews/dn-design-system/commit/7df88e8553e07296e60ae587a13b43ddf565f13a))
+
+
+
+
+
+# [0.1.0-alpha.45](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.44...@bonniernews/dn-design-system-web@0.1.0-alpha.45) (2022-11-07)
+
+
+### Features
+
+* **web:** list item component ([#400](https://github.com/BonnierNews/dn-design-system/issues/400)) ([09d6b07](https://github.com/BonnierNews/dn-design-system/commit/09d6b07838fd89d7c1f2d42ebdd08fbaf468a31d))
+
+
+
+
+
+# 0.1.0-alpha.44 (2022-11-04)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# [0.1.0-alpha.43](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.42...@bonniernews/dn-design-system-web@0.1.0-alpha.43) (2022-11-03)
+
+
+### Features
+
+* **web:** update so spacing function can take params rem and em  ([#410](https://github.com/BonnierNews/dn-design-system/issues/410)) ([b627dc8](https://github.com/BonnierNews/dn-design-system/commit/b627dc8e3e80c9745ee96dd8519f72a3f884dcca))
+
+
+
+
+
+# 0.1.0-alpha.42 (2022-11-03)
+
+
+### Features
+
+* **web:** text field web, and story update ([#403](https://github.com/BonnierNews/dn-design-system/issues/403)) ([332917c](https://github.com/BonnierNews/dn-design-system/commit/332917cdcc32c29d8559d173ccf25ee9833a5423))
+
+
+
+
+
+# 0.1.0-alpha.41 (2022-11-01)
+
+
+### Bug Fixes
+
+* **storybook:** add support for tables in markdown ([#408](https://github.com/BonnierNews/dn-design-system/issues/408)) ([6786563](https://github.com/BonnierNews/dn-design-system/commit/67865634b6186094521674c444e7b01b8cbcf458))
+
+
+
+
+
 # [0.1.0-alpha.40](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.39...@bonniernews/dn-design-system-web@0.1.0-alpha.40) (2022-10-27)
@@ -8,0 +71,0 @@

components/badge/README.md

@@ -1,2 +0,4 @@
-**@bonniernews/dn-design-system-web/components/badge/README.md**
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/badge](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/badge)
+- Storybook: [Badge > Badge > Web](https://designsystem.dn.se/?path=/story/components-app-web-badge-badge-web)
+- Storybook: [Badge > BadgeWithFigure > Web ](https://designsystem.dn.se/?path=/story/components-app-web-badge-badgewithfigure-web)
 
@@ -7,6 +9,27 @@ ----
 
-Parameters available but not used in storybook:
-```javascript
-classNames: "my-special-class",
-forcePx: true // fixed pixel value is used for typography to prevent scaling based on :root font-size
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|figure | int | no | | | Numbers above 9 will show as "9+"|
+|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/badge/badge.njk' import Badge %}
+
+{{ Badge({
+  figure: 2
+})}}
 ```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/badge/badge.scss";
+```

components/button/README.md

@@ -1,2 +0,3 @@
-**@bonniernews/dn-design-system-web/components/button/README.md**
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/button](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/button)
+- Storybook: [Button > Web](https://designsystem.dn.se/?path=/story/components-app-web-button-web)
 
@@ -7,22 +8,44 @@ ----
 
-Parameters available but not used in storybook:
+## Parameters
 
-```javascript
-attributes: {
-  "data-test": "12345"
-},
-classNames: "my-special-class",
-href: "https://designsystem-latest.dn.se/",
-type: "submit",
-mobile: {
-  fullWidth: true
-},
-forcePx: true // fixed pixel value is used for typography to prevent scaling based on :root font-size
-```
+|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 | brand, business, primary, criticalOutlined, secondaryOutlined, SecondaryFilled | primary | Design variant |
+|size| String | no | default, small | default | |
+|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-icon-web--all |
+|~loading~ | bool | no | true, false | false | Not implemented |
+|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
 
-ℹ️ If you add href parameter the button will be rendered as an `<a>`
+## Minimum requirement example
 
-----
+### Nunjucks
 
-# 🧐 See it in the wild:
-- [DN Skola prenumeration](https://prenumerera.dn.se/skolor/)
+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.scss";
+```

components/checkbox/README.md

@@ -1,2 +0,3 @@
-**@bonniernews/dn-design-system-web/components/checkbox/README.md**
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/checkbox](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/checkbox)
+- Storybook: [Checkbox > Web](https://designsystem.dn.se/?path=/story/components-app-web-checkbox-web)
 
@@ -7,12 +8,36 @@ ----
 
-Parameters available but not used in storybook:
+## Parameters
 
-```javascript
-name: 'my-field', // also used as id and is required
-attributes: {
-  "data-test": "12345"
-},
-classNames: "my-special-class",
-forcePx: true, // fixed pixel value is used for typography to prevent scaling based on :root font-size
-required: true
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|name | String | yes | | | Also used as id |
+|label | String | no | | | |
+|checked | bool | no | true, false | false | |
+|condensed | bool | no | true, false | false | Condensed reduces spacing to a bare minimum, use with care since this might make touch target area smaller than recommended size |
+|disabled | bool | no | true, false | false | |
+|error | bool | no | true, false | false | |
+|errorMessage | String | no | | | |
+|required | 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/checkbox/checkbox.njk' import Checkbox %}
+
+{{ Checkbox({
+  label: 'My checkbox',
+  name: 'my-checkbox'
+})}}
 ```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/checkbox/checkbox.scss";
+```

components/divider/README.md

@@ -1,2 +0,3 @@
-**@bonniernews/dn-design-system-web/components/divider/README.md**
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/divider](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/divider)
+- Storybook: [Divider > Web](https://designsystem.dn.se/?path=/story/components-app-web-divider-web)
 
@@ -7,6 +8,26 @@ ----
 
-Parameters available but not used in storybook:
+## Parameters
 
-```javascript
-classNames: "my-special-class"
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|variant | String | no | soft, medium, strong | soft | |
+|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/divider/divider.njk' import Divider %}
+
+{{ Divider({
+  variant: "soft"
+})}}
 ```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/divider/divider.scss";
+```

components/icon-button/README.md

@@ -1,2 +0,3 @@
-**@bonniernews/dn-design-system-web/components/icon-button/README.md**
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/icon-button](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/icon-button)
+- Storybook: [IconButton > Web](https://designsystem.dn.se/?path=/story/components-app-web-iconbutton-web)
 
@@ -7,16 +8,36 @@ ----
 
-Parameters available but not used in storybook:
+## Parameters
 
-```javascript
-attributes: {
-  "data-test": "12345"
-},
-classNames: "my-special-class",
-href: "https://designsystem-latest.dn.se/",
-a11y: {
-  visuallyHidden: "Dela på TikTok"
-},
-forcePx: true // fixed pixel value is used for typography to prevent scaling based on :root font-size
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|iconName | String | yes | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icon-web--all |
+|disabled | bool | no | true, false | false | Note: only works on button-tag, not on a-tag |
+|variant | String | no | outlined, transparent | outlined | Design variant |
+|size| String | no | default, small, large | default | |
+|~loading~ | bool | no | true, false | false | Not implemented |
+|a11y.visuallyHidden | Object | no | | | Ex. a11y: { visuallyHidden: "Dela på TikTok" } |
+|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/icon-button/icon-button.njk' import IconButton %}
+
+{{ IconButton({
+  variant: 'outlined',
+  size: 'default',
+  iconName: 'home-filled'
+})}}
 ```
 
-ℹ️ If you add href parameter the button will be rendered as an `<a>`
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/icon-button/icon-button.scss";
+```

components/radio-button/README.md

@@ -1,2 +0,3 @@
-**@bonniernews/dn-design-system-web/components/radio-button/README.md**
+- 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: [RadioButton > Web](https://designsystem.dn.se/?path=/story/components-app-web-radiobutton-web)
 
@@ -7,15 +8,39 @@ ----
 
-Parameters available but not used in storybook:
+## Parameters
 
-```javascript
-name: 'my-field',
-id: 'my-field-1', // is required,
-value: 'my-value'
-attributes: {
-  "data-test": "12345"
-},
-classNames: "my-special-class",
-forcePx: true, // fixed pixel value is used for typography to prevent scaling based on :root font-size
-required: true,
-error: true
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|name | String | yes | | | |
+|id | String | yes | | | |
+|value | String | yes | | | |
+|label | String | no | | | |
+|selected | bool | no | true, false | false | |
+|condensed | bool | no | true, false | false | Condensed reduces spacing to a bare minimum, use with care since this might make touch target area smaller than recommended size |
+|disabled | bool | no | true, false | false | |
+|error | bool | no | true, false | false | |
+|required | 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/radio-button/radio-button.njk' import RadioButton %}
+
+{{ RadioButton({
+  label: 'My radio',
+  id: 'my_radio_id',
+  name: 'my_radio_name',
+  value: "my_radio_value"
+})}}
 ```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/radio-button/radio-button.scss";
+```

components/switch/README.md

@@ -1,3 +0,3 @@
-**@bonniernews/dn-design-system-web/components/switch/README.md**
-
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/switch](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/switch)
+- Storybook: [Switch > Web](https://designsystem.dn.se/?path=/story/components-app-web-switch-web)
 ----
@@ -7,13 +7,37 @@
 
-Parameters available but not used in storybook:
+## Parameters
 
-```javascript,
-name: 'my-field', // also used as id and is required
-attributes: {
-  "data-test": "12345"
-},
-classNames: "my-special-class",
-forcePx: true, // fixed pixel value is used for typography to prevent scaling based on :root font-size
-metaOn: 'Ja', // string for label in on state, default is 'På'
-metaOff: 'Nej', // string for label in off state, default is 'Av'
+|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 | |
+|condensed | bool | no | true, false | false | Condensed reduces spacing to a bare minimum, use with care since this might make touch target area smaller than recommended size |
+|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.scss";
+```

components/text-button/README.md

@@ -1,2 +0,3 @@
-**@bonniernews/dn-design-system-web/components/text-button/README.md**
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/text-button](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/text-button)
+- Storybook: [TextButton > Web](https://designsystem.dn.se/?path=/story/components-app-web-textbutton-textbutton-web)
 
@@ -7,17 +8,38 @@ ----
 
-Parameters available but not used in storybook:
+## Parameters
 
-```javascript
-attributes: {
-  "data-test": "12345"
-},
-classNames: "my-special-class",
-href: "https://designsystem-latest.dn.se/",
-type: "submit",
-mobile: {
-  fullWidth: true
-},
-forcePx: true // fixed pixel value is used for typography to prevent scaling based on :root font-size
+|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 |
+|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 } |
+|condensed | bool | no | true, false | false | Condensed reduces spacing to a bare minimum, use with care since this might make touch target area smaller than recommended size |
+|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-icon-web--all |
+|~loading~ | bool | no | true, false | false | Not implemented |
+|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/text-button/text-button.njk' import TextButton %}
+
+{{ TextButton({
+  text: 'My text button',
+  iconPosition: 'right',
+  iconName: 'arrow_forward'
+})}}
 ```
 
-ℹ️ If you add href parameter the text button will be rendered as an `<a>`
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/text-button/text-button.scss";
+```

package.json

 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "0.1.0-alpha.40",
+  "version": "0.1.0-alpha.46",
   "description": "DN design system for web.",
@@ -5,0 +5,0 @@ "main": "index.js",

No alert changes

Improved metrics

Total package byte prevSize

278322

increased by19.55%

Number of package files

123

increased by10.81%

Lines of code

43

increased by152.94%

No dependency changes