@bonniernews/dn-design-system-web 3.0.0-alpha.6 → 3.0.0-alpha.60

package/CHANGELOG.md

@@ -3,6 +3,488 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 3.0.0-alpha.60 (2023-05-22)
+
+
+### Features
+
+* **web:** correct underline thickness for teasers ([#825](https://github.com/BonnierNews/dn-design-system/issues/825)) ([51a7d2d](https://github.com/BonnierNews/dn-design-system/commit/51a7d2d8f0345215340738cbfb985dd2abab664e))
+
+
+
+## [3.0.0-alpha.59](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.58...@bonniernews/dn-design-system-web@3.0.0-alpha.59) (2023-05-17)
+
+
+### ⚠ BREAKING CHANGES
+
+* **web:** icon sprite now needs to be included in page for DS icons to work
+
+### Features
+
+* **web:** use icon sprite ([#820](https://github.com/BonnierNews/dn-design-system/issues/820)) ([7e98a0b](https://github.com/BonnierNews/dn-design-system/commit/7e98a0b6c86d49eb78ec44c7173fb69c2b4e8987))
+
+
+
+## 3.0.0-alpha.58 (2023-05-15)
+
+
+### Features
+
+* **web:** right now teaser ([#827](https://github.com/BonnierNews/dn-design-system/issues/827)) ([05bb4c7](https://github.com/BonnierNews/dn-design-system/commit/05bb4c731bc42c3b0cf1d976cf1fd59956c33c19))
+
+
+
+## 3.0.0-alpha.57 (2023-05-10)
+
+
+### Bug Fixes
+
+* **web:** remove targetId as teaser property ([#812](https://github.com/BonnierNews/dn-design-system/issues/812)) ([1633ac9](https://github.com/BonnierNews/dn-design-system/commit/1633ac9ce9f99ef145ccd6bbee05abe0aefc5814))
+
+
+
+## 3.0.0-alpha.56 (2023-05-10)
+
+
+### Bug Fixes
+
+* **web:** revert nowrap on image credits ([#814](https://github.com/BonnierNews/dn-design-system/issues/814)) ([5b9170d](https://github.com/BonnierNews/dn-design-system/commit/5b9170dbaee2533c01baf710fbcb7aeabb4533f6))
+
+
+
+## [3.0.0-alpha.55](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.54...@bonniernews/dn-design-system-web@3.0.0-alpha.55) (2023-05-10)
+
+
+### Bug Fixes
+
+* **web:** import teaser-dot.scss that was missing in teaser.scss ([#809](https://github.com/BonnierNews/dn-design-system/issues/809)) ([5a6ef5c](https://github.com/BonnierNews/dn-design-system/commit/5a6ef5c1966dd6b1bba413dd4a58c7e64a695396))
+* **web:** teaser-onsite copy update ([#802](https://github.com/BonnierNews/dn-design-system/issues/802)) ([bcd0c43](https://github.com/BonnierNews/dn-design-system/commit/bcd0c436b4b467d1b4a67e1e9f3a2dae962aa4d6))
+
+
+
+## [3.0.0-alpha.54](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.53...@bonniernews/dn-design-system-web@3.0.0-alpha.54) (2023-05-10)
+
+
+### Bug Fixes
+
+* **web:** teaser package vignette color ([#804](https://github.com/BonnierNews/dn-design-system/issues/804)) ([0ac2d6d](https://github.com/BonnierNews/dn-design-system/commit/0ac2d6df30ebcfd28fd34113f1045df62b2bf1cd))
+
+
+
+## 3.0.0-alpha.53 (2023-05-10)
+
+
+### Bug Fixes
+
+* **web:** use hover helper on all interactive components ([#805](https://github.com/BonnierNews/dn-design-system/issues/805)) ([c7c77f7](https://github.com/BonnierNews/dn-design-system/commit/c7c77f74544dccb10939981b98770fae9ff28304))
+
+
+
+## [3.0.0-alpha.52](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.51...@bonniernews/dn-design-system-web@3.0.0-alpha.52) (2023-05-10)
+
+
+### Features
+
+* **web:** implement the flashing dot as a component, and use the component in teasers ([#799](https://github.com/BonnierNews/dn-design-system/issues/799)) ([634186b](https://github.com/BonnierNews/dn-design-system/commit/634186b726d43521c8e85d697af6a665256f8a63))
+
+
+
+## [3.0.0-alpha.51](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.50...@bonniernews/dn-design-system-web@3.0.0-alpha.51) (2023-05-09)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.50](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.49...@bonniernews/dn-design-system-web@3.0.0-alpha.50) (2023-05-09)
+
+
+### Bug Fixes
+
+* **web:** button click event fix and patch ([#803](https://github.com/BonnierNews/dn-design-system/issues/803)) ([f24c77e](https://github.com/BonnierNews/dn-design-system/commit/f24c77e84da1eef4a34cd6d71adf2d7ea8e84e39))
+
+
+
+## [3.0.0-alpha.49](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.48...@bonniernews/dn-design-system-web@3.0.0-alpha.49) (2023-05-09)
+
+
+### Bug Fixes
+
+* **web:** always show vip badge on quote teasers ([#800](https://github.com/BonnierNews/dn-design-system/issues/800)) ([5e8d4e8](https://github.com/BonnierNews/dn-design-system/commit/5e8d4e8b5ffa3f5167beed0b0017c8f52141d875))
+
+
+
+## [3.0.0-alpha.48](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.47...@bonniernews/dn-design-system-web@3.0.0-alpha.48) (2023-05-08)
+
+
+### Features
+
+* **web:** teaser package ([#791](https://github.com/BonnierNews/dn-design-system/issues/791)) ([e3477df](https://github.com/BonnierNews/dn-design-system/commit/e3477df7f48657e9084bc7a4bea97a7ec1afa81f))
+
+
+
+## 3.0.0-alpha.47 (2023-05-08)
+
+
+### Bug Fixes
+
+* **web:** set standardteaser image width to 196px ([#798](https://github.com/BonnierNews/dn-design-system/issues/798)) ([5911856](https://github.com/BonnierNews/dn-design-system/commit/59118561f6166b2be2b68de068b7909117de2fda))
+
+
+
+## [3.0.0-alpha.46](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.45...@bonniernews/dn-design-system-web@3.0.0-alpha.46) (2023-05-05)
+
+
+### Bug Fixes
+
+* **web:** avoid wordWrapping imageCredit ([#795](https://github.com/BonnierNews/dn-design-system/issues/795)) ([94d62ca](https://github.com/BonnierNews/dn-design-system/commit/94d62ca5bc1489d8c803f99662690baa48823f5d))
+
+
+
+## [3.0.0-alpha.45](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.44...@bonniernews/dn-design-system-web@3.0.0-alpha.45) (2023-05-05)
+
+
+### Bug Fixes
+
+* **web:** only show vip-badge for premium users ([#790](https://github.com/BonnierNews/dn-design-system/issues/790)) ([e049e43](https://github.com/BonnierNews/dn-design-system/commit/e049e43e0288b236b00328bfb2ff476d70dacb0c))
+
+
+
+## [3.0.0-alpha.44](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.43...@bonniernews/dn-design-system-web@3.0.0-alpha.44) (2023-05-04)
+
+
+### Bug Fixes
+
+* **web:** minor fixes for onSite and tipsa ([#792](https://github.com/BonnierNews/dn-design-system/issues/792)) ([a08cd5b](https://github.com/BonnierNews/dn-design-system/commit/a08cd5b839ee5bb07b6293278b41baf9cfa23f38))
+
+
+
+## [3.0.0-alpha.43](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.42...@bonniernews/dn-design-system-web@3.0.0-alpha.43) (2023-05-03)
+
+
+### Features
+
+* **web:** teaser split ([#786](https://github.com/BonnierNews/dn-design-system/issues/786)) ([b142d17](https://github.com/BonnierNews/dn-design-system/commit/b142d1748977a4520ea12768bde7c6a16daf5056))
+
+
+
+## [3.0.0-alpha.42](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.41...@bonniernews/dn-design-system-web@3.0.0-alpha.42) (2023-05-03)
+
+
+### Features
+
+* **web:** onsite teaser - dn på plats ([#783](https://github.com/BonnierNews/dn-design-system/issues/783)) ([42603af](https://github.com/BonnierNews/dn-design-system/commit/42603af21bd6511f858f2b7acc889067584cbf93))
+
+
+
+## [3.0.0-alpha.41](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.40...@bonniernews/dn-design-system-web@3.0.0-alpha.41) (2023-05-03)
+
+
+### Features
+
+* **web:** tipsa teaser  ([#780](https://github.com/BonnierNews/dn-design-system/issues/780)) ([cb2a263](https://github.com/BonnierNews/dn-design-system/commit/cb2a2636cdbc823f8584133b27a6730e9eddb973))
+
+
+### Bug Fixes
+
+* **web:** teaserLarge should check params.targetId ([#789](https://github.com/BonnierNews/dn-design-system/issues/789)) ([4ea1838](https://github.com/BonnierNews/dn-design-system/commit/4ea18388286217e9171f1a851c3dad65c1eace0f))
+
+
+
+## 3.0.0-alpha.40 (2023-05-03)
+
+
+### Bug Fixes
+
+* **web:** changes needed in large & standard teasers after implementing them in bang ([#782](https://github.com/BonnierNews/dn-design-system/issues/782)) ([d028b52](https://github.com/BonnierNews/dn-design-system/commit/d028b5240b4c263f88e9c903db2469ddd505bac5))
+
+
+
+## [3.0.0-alpha.39](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.38...@bonniernews/dn-design-system-web@3.0.0-alpha.39) (2023-05-02)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.38](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.37...@bonniernews/dn-design-system-web@3.0.0-alpha.38) (2023-04-28)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.37](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.36...@bonniernews/dn-design-system-web@3.0.0-alpha.37) (2023-04-28)
+
+
+### Bug Fixes
+
+* **web:** add bauta properties to shared argTypes ([#779](https://github.com/BonnierNews/dn-design-system/issues/779)) ([38790e7](https://github.com/BonnierNews/dn-design-system/commit/38790e7c8c381ac00789c7817e1c3aac6c0dd9d2))
+
+
+
+## [3.0.0-alpha.36](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.35...@bonniernews/dn-design-system-web@3.0.0-alpha.36) (2023-04-28)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## 3.0.0-alpha.35 (2023-04-27)
+
+
+### Features
+
+* **web:** large and standard teasers ([#763](https://github.com/BonnierNews/dn-design-system/issues/763)) ([0713caa](https://github.com/BonnierNews/dn-design-system/commit/0713caa3c451419e21b185496d8d77726c972bfd))
+
+
+
+## [3.0.0-alpha.34](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.33...@bonniernews/dn-design-system-web@3.0.0-alpha.34) (2023-04-26)
+
+
+### Bug Fixes
+
+* **web:** button accessbility ([#767](https://github.com/BonnierNews/dn-design-system/issues/767)) ([1b19f98](https://github.com/BonnierNews/dn-design-system/commit/1b19f983f208ab3467640b8f921e8f711f569ab5))
+* **web:** vip-badge square top-right corner ([#771](https://github.com/BonnierNews/dn-design-system/issues/771)) ([19e2753](https://github.com/BonnierNews/dn-design-system/commit/19e275397f5d9ac7a16703141c0c5372ee1f0e02))
+
+
+
+## 3.0.0-alpha.33 (2023-04-24)
+
+
+### Features
+
+* **web:** pictogram component for web ([#770](https://github.com/BonnierNews/dn-design-system/issues/770)) ([2ad5076](https://github.com/BonnierNews/dn-design-system/commit/2ad50768177689598d9b34605161763630fea1f9))
+
+
+
+## [3.0.0-alpha.32](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.31...@bonniernews/dn-design-system-web@3.0.0-alpha.32) (2023-04-21)
+
+
+### Bug Fixes
+
+* **web:** set vip text in component and change property to boolean ([#768](https://github.com/BonnierNews/dn-design-system/issues/768)) ([5004120](https://github.com/BonnierNews/dn-design-system/commit/500412093b8caf4ea5e46d6a529a390da33b2b6d))
+
+
+
+## 3.0.0-alpha.31 (2023-04-20)
+
+
+### ⚠ BREAKING CHANGES
+
+* **web:** Quote and Factbox has property from ´variant´ to ´theme´
+
+### Bug Fixes
+
+* **web:** add web themes and update quote and factbox ([#761](https://github.com/BonnierNews/dn-design-system/issues/761)) ([0ee3299](https://github.com/BonnierNews/dn-design-system/commit/0ee329900641325278e04242074f819f66bda025))
+
+
+
+## 3.0.0-alpha.30 (2023-04-19)
+
+
+### Features
+
+* **web:** vip badge component ([#759](https://github.com/BonnierNews/dn-design-system/issues/759)) ([7d0791e](https://github.com/BonnierNews/dn-design-system/commit/7d0791ee9d101265ec5f5427b550da783afff93e))
+
+
+
+## 3.0.0-alpha.29 (2023-04-19)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## 3.0.0-alpha.28 (2023-04-13)
+
+
+### Bug Fixes
+
+* **web:** remove easing from hover effekt ([#753](https://github.com/BonnierNews/dn-design-system/issues/753)) ([86cce98](https://github.com/BonnierNews/dn-design-system/commit/86cce9804593683642ae2d44cd76803f06f340d6))
+
+
+
+## 3.0.0-alpha.27 (2023-04-13)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.26](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.25...@bonniernews/dn-design-system-web@3.0.0-alpha.26) (2023-04-06)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## 3.0.0-alpha.25 (2023-04-05)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## 3.0.0-alpha.24 (2023-04-03)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## 3.0.0-alpha.23 (2023-03-31)
+
+
+### Bug Fixes
+
+* **web:** only fullwidth factbox button in small screen ([#742](https://github.com/BonnierNews/dn-design-system/issues/742)) ([97b7a4d](https://github.com/BonnierNews/dn-design-system/commit/97b7a4dec6731ec38ae67345296338c08da65a00))
+
+
+
+## 3.0.0-alpha.22 (2023-03-30)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.21](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.20...@bonniernews/dn-design-system-web@3.0.0-alpha.21) (2023-03-28)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.20](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.19...@bonniernews/dn-design-system-web@3.0.0-alpha.20) (2023-03-24)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.19](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.18...@bonniernews/dn-design-system-web@3.0.0-alpha.19) (2023-03-24)
+
+
+### Bug Fixes
+
+* **web:** use spacing layout in disclaimer ([#730](https://github.com/BonnierNews/dn-design-system/issues/730)) ([a29d313](https://github.com/BonnierNews/dn-design-system/commit/a29d3137ac57cafa317c75f1f8c74504f45f270d))
+
+
+
+## [3.0.0-alpha.18](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.17...@bonniernews/dn-design-system-web@3.0.0-alpha.18) (2023-03-24)
+
+
+### Bug Fixes
+
+* **web:** dynamic spacing image top ([#736](https://github.com/BonnierNews/dn-design-system/issues/736)) ([dfb418f](https://github.com/BonnierNews/dn-design-system/commit/dfb418f471429d685a2fed738cbcd8006ef87f32))
+
+
+
+## [3.0.0-alpha.17](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.16...@bonniernews/dn-design-system-web@3.0.0-alpha.17) (2023-03-24)
+
+
+### Bug Fixes
+
+* **web:** clean up helper includes ([#731](https://github.com/BonnierNews/dn-design-system/issues/731)) ([9680d73](https://github.com/BonnierNews/dn-design-system/commit/9680d73f7c4ce0609b1d964666ae9845f0464955))
+
+
+
+## [3.0.0-alpha.16](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.15...@bonniernews/dn-design-system-web@3.0.0-alpha.16) (2023-03-24)
+
+
+### Bug Fixes
+
+* **web:** image-caption credit is now inline ([#734](https://github.com/BonnierNews/dn-design-system/issues/734)) ([beeeaf8](https://github.com/BonnierNews/dn-design-system/commit/beeeaf8236163438bc42963a55a7ca44856627c1))
+
+
+
+## 3.0.0-alpha.15 (2023-03-24)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.14](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.13...@bonniernews/dn-design-system-web@3.0.0-alpha.14) (2023-03-22)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.13](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.12...@bonniernews/dn-design-system-web@3.0.0-alpha.13) (2023-03-21)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.12](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.11...@bonniernews/dn-design-system-web@3.0.0-alpha.12) (2023-03-20)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.11](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.10...@bonniernews/dn-design-system-web@3.0.0-alpha.11) (2023-03-15)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.10](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.9...@bonniernews/dn-design-system-web@3.0.0-alpha.10) (2023-03-15)
+
+
+### Features
+
+* **web:** image caption ([#723](https://github.com/BonnierNews/dn-design-system/issues/723)) ([5247279](https://github.com/BonnierNews/dn-design-system/commit/5247279d3205eef7bc19599e21dbac997994cc92))
+
+
+
+## [3.0.0-alpha.9](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.8...@bonniernews/dn-design-system-web@3.0.0-alpha.9) (2023-03-15)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.8](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.7...@bonniernews/dn-design-system-web@3.0.0-alpha.8) (2023-03-10)
+
+
+### Bug Fixes
+
+* **web:** treat b as strong ([#722](https://github.com/BonnierNews/dn-design-system/issues/722)) ([8148ce9](https://github.com/BonnierNews/dn-design-system/commit/8148ce98e11827668858a1507ea69b8f122d8a83))
+
+
+
+## 3.0.0-alpha.7 (2023-03-10)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
 ## [3.0.0-alpha.6](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.5...@bonniernews/dn-design-system-web@3.0.0-alpha.6) (2023-03-08)
 
 

package/assets/article-image/article-image.njk

@@ -1,3 +1,5 @@
+{% from '@bonniernews/dn-design-system-web/components/image-caption/image-caption.njk' import ImageCaption %}
+
 {% macro ArticleImage(params) %}
   {% set macroClassName = "ds-article-image" %}
   {% set additionalClasses = [] %}
@@ -18,16 +20,15 @@
     {% endif %}
 
     {% if params.caption or params.author %}
-      <figcaption>
-        {% if params.caption %}
-          <span aria-hidden="true">{{ params.caption | safe }}</span>
-        {% endif %}
-        {% if params.author %}
-          <span class="ds-article-image__credits">
-            {%- if params.imageType %}{{ params.imageType | capitalize }}: {% endif %}{{ params.author -}}
-          </span>
-        {% endif %}
-      </figcaption>
+      {% set caption = params.caption if params.caption else "" %}
+      {% set author = params.author if params.author else "" %}
+      {% set imageType = params.imageType if params.imageType else "" %}
+      {{ ImageCaption({
+        caption: caption,
+        author: author,
+        imageType: imageType,
+        forcePx: params.forcePx
+      })}}
     {% endif %}
   </figure>
 {% endmacro %}

package/assets/article-image/article-image.scss

@@ -1,20 +1,6 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../components/image-caption/image-caption.scss"  as *;
 
 .ds-article-image {
   margin: 0;
-
-  > figcaption {
-    @include ds-typography($ds-typography-functional-body01regular);
-    margin-top: ds-spacing-component($ds-sc-x2);
-    color: $ds-color-text-primary;
-
-    @at-root .ds-force-px#{&} {
-      @include ds-typography($ds-typography-functional-body01regular, true);
-    }
-
-    > .ds-article-image__credits {
-      display: block;
-      color: $ds-color-text-primary-02;
-    }
-  }
 }

package/assets/form-field/form-field.njk

@@ -1,4 +1,4 @@
-{% from '@bonniernews/dn-design-system-web/foundations/icons/icon.njk' import Icon %}
+{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
 {% set classes = [] %}
 
 {% macro FormField(params, wrapperClasses) %}
@@ -10,7 +10,7 @@
     {{ caller() if caller }}
     {% if params.errorMessage %}
       <div class="ds-form-field__error-message js-field-error">
-        {{ Icon({ icon: "info-filled" }) }}
+        {{ IconUse({ icon: "info-filled" }) }}
         <span>{{ params.errorMessage | safe }}</span>
       </div>
     {% endif %}

package/assets/form-field/form-field.scss

@@ -1,9 +1,5 @@
-@use "../../foundations/helpers/spacing.scss" as *;
-@use "../../foundations/helpers/metrics.scss" as *;
-@use "../../foundations/helpers/utilities.scss" as *;
-@use "../../foundations/helpers/typography.scss" as *;
-@use "../../foundations/helpers/colors.scss" as *;
-@use "../../foundations/icons/icon.scss" as *;
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../components/icon-sprite/icon-sprite.scss";
 
 $ds-form-field__error-icon-size: 20px;
 

package/assets/teaser/teaser.scss

@@ -0,0 +1,71 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../components/icon-sprite/icon-sprite.scss";
+@use "../../components/vip-badge/vip-badge.scss";
+@use "../../components/teaser-image/teaser-image.scss";
+@use "../../components/teaser-dot/teaser-dot.scss";
+
+.ds-teaser {
+  display: block;
+  background-color: $ds-color-background-primary;
+  text-decoration: none;
+  position: relative;
+
+  .ds-teaser__content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+
+  .ds-teaser__vignette {
+    display: block;
+    @include ds-typography($ds-typography-detailarticle-label);
+    color: $ds-theme-color;
+    margin-bottom: ds-spacing-component($ds-sc-x1);
+  }
+
+  .ds-teaser__title {
+    color: $ds-color-text-primary;
+    margin: 0;
+    word-break: break-word;
+
+    .ds-teaser__highlight {
+      color: $ds-theme-color;
+    }
+  }
+
+  @include ds-hover(true) {
+    .ds-teaser__title {
+      @include ds-underline();
+    }
+  }
+
+  .ds-teaser__text {
+    @include ds-typography($ds-typography-detailmedryckare);
+    color: $ds-color-text-primary;
+    margin: ds-spacing-component($ds-sc-x2 0 0);
+  }
+
+  .ds-teaser__sticker {
+    display: inline;
+    color: $ds-theme-color;
+    @include ds-typography($ds-typography-detailarticle-label);
+  }
+
+  .ds-teaser__media {
+    width: 100%;
+    position: relative;
+  }
+
+  .ds-vip-badge {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 5;
+  }
+
+  &.ds-teaser--quote-badge {
+    .ds-teaser__title {
+      padding-right: ds-spacing-component($ds-sc-x3);
+    }
+  }
+}

package/components/article-body-image/README.md

@@ -1,5 +1,5 @@
 - GitHub: [BonnierNews/dn-design-system/../web/src/components/article-body-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/article-body-image)
-- Storybook: [Disclaimer > Web](https://designsystem.dn.se/?path=/story/components-app-web-article-components-image-bodyimage-web--article-body-image)
+- Storybook: [ArticleBodyImage > Web](https://designsystem.dn.se/?path=/story/components-app-web-article-components-image-bodyimage-web--article-body-image)
 
 ----
 
@@ -32,7 +32,7 @@ These are copy paste friendly examples to quickliy get started using a component
   fullWidth: true,
   caption: "En bildtext",
   imageType: "Foto",
-  author: "Paul Hansen",
+  author: "Paul Hansen"
 })}}
 ```
 

package/components/article-body-image/article-body-image.njk

@@ -11,13 +11,9 @@
     {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
   {% endif %}
 
-  {% if params.forcePx %}
-    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
-  {% endif %}
-
   {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
 
-  {% set imageParams = { fullWidth: params.fullWidth, caption: params.caption, imageType: params.imageType, author: params.author, imageHtml: params.imageHtml, classNames: classes, attributes: attributes  } %}
+  {% set imageParams = { fullWidth: params.fullWidth, caption: params.caption, imageType: params.imageType, author: params.author, imageHtml: params.imageHtml, classNames: classes, attributes: attributes, forcePx: params.forcePx  } %}
 
   {% call ArticleImage(imageParams) %}{% endcall %}
 {% endmacro %}