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

Comparing version 0.1.0-alpha.9 to 0.1.0-alpha.12

CHANGELOG.md

@@ -6,2 +6,26 @@ # Change Log
 
+# 0.1.0-alpha.12 (2022-09-08)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# [0.1.0-alpha.11](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@0.1.0-alpha.10...@bonniernews/dn-design-system-web@0.1.0-alpha.11) (2022-09-07)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+# 0.1.0-alpha.10 (2022-09-07)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
 # 0.1.0-alpha.9 (2022-08-24)
@@ -8,0 +32,0 @@

components/icon-button/README.md

@@ -14,5 +14,8 @@ **@bonniernews/dn-design-system-web/components/icon-button/README.md**
 classNames: "my-special-class",
-href: "https://designsystem-latest.dn.se/"
+href: "https://designsystem-latest.dn.se/",
+a11y: {
+  visuallyHidden: "Dela på TikTok"
+}
 ```
 
 ℹ️ If you add href parameter the button will be rendered as an `<a>`

foundations/typography/README.md

@@ -5,24 +5,77 @@ **@bonniernews/dn-design-system-web/foundations/typography/README.md**
 
-# Typography UI
+# Typography
 
+Can be included through *Sass mixin*, example:
+```css
+@use "@bonniernews/dn-design-system-web/foundations/helpers/typography.scss" as *;
+
+@include ds-typography('body01regular');
+```
+
+Or included as *text component*:
+
+```javascript
+{% from '@bonniernews/dn-design-system-web/foundations/typography/typography.njk' import Typography %}
+
+{{ Typography({
+  text: text,
+  textColor: textColor,
+  textComponent: textComponent
+})}}
+```
+
+Or added directly through *class*.
+
+```html
+<span class="ds-t-body01regular">Body 01 Regular</span>
+```
+
 Currently available class names:
 
 **Body**
-- UI Body Reguler: ds-t-ui-body-regular
-- UI Body Medium: ds-t-ui-body-medium
+- Body 01 Regular: ds-t-body01regular
+- Body 01 Bold: ds-t-body01bold
+- Body 02 Regular: ds-t-body02regular
+- Body 02 Bold: ds-t-body02bold
 
 **Details**
-- UI Info: ds-t-ui-info
-- UI Label: ds-t-ui-label
-- UI Meta: ds-t-ui-meta
-- UI Link: ds-t-ui-link
+- Details Standard-button: ds-t-detailstandard-button
 
-**Headlines**
-- UI Headline Large: ds-t-ui-headline-large
-- UI Headline Small: ds-t-ui-headline-small
+**Paragraph**
+- Paragraph 01 Regular: ds-t-paragraph01regular
+- Paragraph 01 Bold: ds-t-paragraph01bold
 
-**Subtitles**
-- UI Subtitle Small Regular: ds-t-ui-subtitle-small-regular
-- UI Subtitle Small Medium: ds-t-ui-subtitle-small-medium
-- UI Subtitle Large Regular: ds-t-ui-subtitle-large-regular
-- UI Subtitle Large Bold: ds-t-ui-subtitle-large-bold
+**Meta**
+- Meta 01 Regular: ds-t-meta01regular
+- Meta 02 Regular: ds-t-meta02regular
+- Meta 02 Medium: ds-t-meta02medium
+
+**FunctionalBody**
+- Functional Body 01 Regular: ds-t-functional-body01regular
+- Functional Body 01 Medium ds-t-functional-body01medium
+- Functional Body 02 Regular: ds-t-functional-body02regular
+- Functional Body 02 Bold: ds-t-functional-body02bold
+
+**Functional Heading**
+- Functional Heading 01 Regular: ds-t-functional-heading01regular
+- Functional Heading 01 Bold: ds-t-functional-heading01bold
+- Functional Heading 02 Regular: ds-t-functional-heading02regular
+- Functional Heading 02 Bold: ds-t-functional-heading02bold
+- Functional Heading 03 Regular: ds-t-functional-heading03regular
+- Functional Heading 03 Bold: ds-t-functional-heading03bold
+- Functional Heading 04 Regular: ds-t-functional-heading04regular
+- Functional Heading 04 Bold: ds-t-functional-heading04bold
+- Functional Heading 05 Regular: ds-t-functional-heading05regular
+- Functional Heading 05 Bold: ds-t-functional-heading05bold
+
+**Expressive Heading**
+- Expressive Heading 01 Regular: ds-t-expressive-heading01regular
+- Expressive Heading 01 Bold: ds-t-expressive-heading01bold
+- Expressive Heading 02 Regular: ds-t-expressive-heading02regular
+- Expressive Heading 02 Bold: ds-t-expressive-heading02bold
+- Expressive Heading 03 Regular: ds-t-expressive-heading03regular
+- Expressive Heading 03 Bold: ds-t-expressive-heading03bold
+- Expressive Heading 04 Regular: ds-t-expressive-heading04regular
+- Expressive Heading 04 Bold: ds-t-expressive-heading04bold
+- Expressive Heading 05 Regular: ds-t-expressive-heading05regular
+- Expressive Heading 05 Bold: ds-t-expressive-heading05bold

package.json

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

No alert changes

Worsened metrics

Total package byte prevSize

108130

decreased by-5.05%

No dependency changes