@bonniernews/dn-design-system-web 32.5.0 → 32.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/components/direkt-circle/README.md +2 -0
  3. package/components/direkt-circle/direkt-circle.scss +48 -0
  4. package/components/direkt-header/README.md +24 -0
  5. package/components/direkt-header/direkt-header.scss +41 -0
  6. package/foundations/variables/typographyList.scss +48 -48
  7. package/foundations/variables/typographyScreenExtraLarge.scss +208 -208
  8. package/foundations/variables/typographyScreenLarge.scss +210 -210
  9. package/foundations/variables/typographyScreenSmall.scss +201 -201
  10. package/package.json +1 -1
  11. package/preact/components/direkt-circle/direkt-circle.d.ts +4 -1
  12. package/preact/components/direkt-circle/direkt-circle.js +15 -20
  13. package/preact/components/direkt-circle/direkt-circle.js.map +2 -2
  14. package/preact/components/direkt-header/direkt-header.d.ts +17 -0
  15. package/preact/components/direkt-header/direkt-header.js +82 -0
  16. package/preact/components/direkt-header/direkt-header.js.map +7 -0
  17. package/variables/typography-list.json +48 -48
package/preact/components/direkt-circle/direkt-circle.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../components/direkt-circle/direkt-circle.tsx"],
4
- "sourcesContent": ["interface DirektCircleProps {\n /** Hex code or supported color name */\n circleColor?: string\n classNames?: string\n attributes?: object\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/direkt-circle](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/direkt-circle)\n * - Storybook: [DirektCircle](https://designsystem.dn.se/?path=/docs/section-subcomponents-direktcircle--docs)\n */\nexport const DirektCircle = ({ circleColor = 'white', classNames, attributes = {} }: DirektCircleProps) => {\n const componentClassName = 'ds-direkt-circle'\n const circleOpacity = [\n 0.25, 0.25, 0.25, 0.25, 0.25, 0.25, 0.25, 0.25, 0.24, 0.235, 0.222, 0.218, 0.212, 0.202, 0.19, 0.178, 0.165, 0.155,\n 0.145, 0.135, 0.12, 0.107, 0.095, 0.083, 0.07, 0.06, 0.047, 0.035, 0.023, 0.02,\n ];\n\n const classes = [componentClassName, classNames].filter(Boolean).join(' ')\n\n return (\n <svg\n className={classes}\n width='500'\n height='500'\n viewBox='-250 -250 500 500'\n fill='none'\n {...attributes}\n >\n <circle r='5' fill={circleColor} />\n {circleOpacity.map((opacity, index) => {\n const radius = (index + 1) * 8 + 5\n return <circle key={index} opacity={opacity} r={radius} stroke={circleColor} strokeWidth='1.5' />\n })}\n </svg>\n )\n}\n"],
5
- "mappings": ";AAqBI,SAQE,KARF;AAVG,IAAM,eAAe,CAAC,EAAE,cAAc,SAAS,YAAY,aAAa,CAAC,EAAE,MAAyB;AACzG,QAAM,qBAAqB;AAC3B,QAAM,gBAAgB;AAAA,IACpB;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAC7G;AAAA,IAAO;AAAA,IAAO;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,IAAM;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,EAC5E;AAEA,QAAM,UAAU,CAAC,oBAAoB,UAAU,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEzE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACJ,GAAG;AAAA,MAEJ;AAAA,4BAAC,YAAO,GAAE,KAAI,MAAM,aAAa;AAAA,QAChC,cAAc,IAAI,CAAC,SAAS,UAAU;AACrC,gBAAM,UAAU,QAAQ,KAAK,IAAI;AACjC,iBAAO,oBAAC,YAAmB,SAAkB,GAAG,QAAQ,QAAQ,aAAa,aAAY,SAArE,KAA2E;AAAA,QACjG,CAAC;AAAA;AAAA;AAAA,EACH;AAEJ;",
4
+ "sourcesContent": ["interface DirektCircleProps {\n /** Hex code or supported color name */\n circleColor?: string\n classNames?: string\n isAnimated?: boolean\n attributes?: object\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/direkt-circle](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/direkt-circle)\n * - Storybook: [DirektCircle](https://designsystem.dn.se/?path=/docs/section-subcomponents-direktcircle--docs)\n * * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/direkt-circle/direkt-circle.scss'`\n */\nexport const DirektCircle = ({\n circleColor = 'white',\n classNames,\n attributes = {},\n isAnimated = false,\n}: DirektCircleProps) => {\n const componentClassName = 'ds-direkt-circle'\n const animatedClassName = isAnimated ? `${componentClassName}--animated` : ''\n const circleOpacity = [\n 0.25, 0.25, 0.25, 0.25, 0.25, 0.25, 0.25, 0.25, 0.24, 0.235, 0.222, 0.218, 0.212, 0.202, 0.19, 0.178, 0.165, 0.155,\n 0.145, 0.135, 0.12, 0.107, 0.095, 0.083, 0.07, 0.06, 0.047, 0.035, 0.023, 0.02,\n ]\n\n const classes = [componentClassName, classNames, animatedClassName].filter(Boolean).join(' ')\n\n return (\n <svg className={classes} width='500' height='500' viewBox='-250 -250 500 500' fill='none' {...attributes}>\n <circle r='5' fill={circleColor} />\n {circleOpacity.map((opacity, index) => {\n const radius = (index + 1) * 8 + 5\n return <circle key={index} opacity={opacity} r={radius} stroke={circleColor} strokeWidth='1.5' />\n })}\n </svg>\n )\n}\n"],
5
+ "mappings": ";AA8BI,SACE,KADF;AAhBG,IAAM,eAAe,CAAC;AAAA,EAC3B,cAAc;AAAA,EACd;AAAA,EACA,aAAa,CAAC;AAAA,EACd,aAAa;AACf,MAAyB;AACvB,QAAM,qBAAqB;AAC3B,QAAM,oBAAoB,aAAa,GAAG,kBAAkB,eAAe;AAC3E,QAAM,gBAAgB;AAAA,IACpB;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAC7G;AAAA,IAAO;AAAA,IAAO;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,IAAM;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,EAC5E;AAEA,QAAM,UAAU,CAAC,oBAAoB,YAAY,iBAAiB,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE5F,SACE,qBAAC,SAAI,WAAW,SAAS,OAAM,OAAM,QAAO,OAAM,SAAQ,qBAAoB,MAAK,QAAQ,GAAG,YAC5F;AAAA,wBAAC,YAAO,GAAE,KAAI,MAAM,aAAa;AAAA,IAChC,cAAc,IAAI,CAAC,SAAS,UAAU;AACrC,YAAM,UAAU,QAAQ,KAAK,IAAI;AACjC,aAAO,oBAAC,YAAmB,SAAkB,GAAG,QAAQ,QAAQ,aAAa,aAAY,SAArE,KAA2E;AAAA,IACjG,CAAC;AAAA,KACH;AAEJ;",
6
6
  "names": []
7
7
  }
package/preact/components/direkt-header/direkt-header.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ export interface DirektHeaderProps {
2
+ title: string;
3
+ subtitle?: string;
4
+ preTitle?: string;
5
+ isAnimated?: boolean;
6
+ classNames?: string;
7
+ /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
8
+ attributes?: object;
9
+ }
10
+ /**
11
+ * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-onsite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/direkt-header)
12
+ * - Storybook: [DirektHeader](https://designsystem.dn.se/?path=/docs/section-direkt-header--docs)
13
+ *
14
+ * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
15
+ * `@use '@bonniernews/dn-design-system-web/components/direkt-header/direkt-header.scss'`
16
+ */
17
+ export declare const DirektHeader: ({ classNames, attributes, title, subtitle, preTitle, isAnimated, }: DirektHeaderProps) => import("preact").JSX.Element;
package/preact/components/direkt-header/direkt-header.js ADDED
@@ -0,0 +1,82 @@
1
+ // ../src/helpers/formatClassString.ts
2
+ var formatClassString = (classesArray) => {
3
+ return classesArray.filter((x) => !!x).join(" ");
4
+ };
5
+
6
+ // ../src/components/direkt-circle/direkt-circle.tsx
7
+ import { jsx, jsxs } from "preact/jsx-runtime";
8
+ var DirektCircle = ({
9
+ circleColor = "white",
10
+ classNames,
11
+ attributes = {},
12
+ isAnimated = false
13
+ }) => {
14
+ const componentClassName = "ds-direkt-circle";
15
+ const animatedClassName = isAnimated ? `${componentClassName}--animated` : "";
16
+ const circleOpacity = [
17
+ 0.25,
18
+ 0.25,
19
+ 0.25,
20
+ 0.25,
21
+ 0.25,
22
+ 0.25,
23
+ 0.25,
24
+ 0.25,
25
+ 0.24,
26
+ 0.235,
27
+ 0.222,
28
+ 0.218,
29
+ 0.212,
30
+ 0.202,
31
+ 0.19,
32
+ 0.178,
33
+ 0.165,
34
+ 0.155,
35
+ 0.145,
36
+ 0.135,
37
+ 0.12,
38
+ 0.107,
39
+ 0.095,
40
+ 0.083,
41
+ 0.07,
42
+ 0.06,
43
+ 0.047,
44
+ 0.035,
45
+ 0.023,
46
+ 0.02
47
+ ];
48
+ const classes = [componentClassName, classNames, animatedClassName].filter(Boolean).join(" ");
49
+ return /* @__PURE__ */ jsxs("svg", { className: classes, width: "500", height: "500", viewBox: "-250 -250 500 500", fill: "none", ...attributes, children: [
50
+ /* @__PURE__ */ jsx("circle", { r: "5", fill: circleColor }),
51
+ circleOpacity.map((opacity, index) => {
52
+ const radius = (index + 1) * 8 + 5;
53
+ return /* @__PURE__ */ jsx("circle", { opacity, r: radius, stroke: circleColor, strokeWidth: "1.5" }, index);
54
+ })
55
+ ] });
56
+ };
57
+
58
+ // ../src/components/direkt-header/direkt-header.tsx
59
+ import { jsx as jsx2, jsxs as jsxs2 } from "preact/jsx-runtime";
60
+ var DirektHeader = ({
61
+ classNames,
62
+ attributes = {},
63
+ title,
64
+ subtitle,
65
+ preTitle = "Direkt",
66
+ isAnimated = true
67
+ }) => {
68
+ const componentClassName = "ds-direkt-header";
69
+ const classes = formatClassString([componentClassName, classNames]);
70
+ return /* @__PURE__ */ jsxs2("header", { className: classes, ...attributes, children: [
71
+ /* @__PURE__ */ jsxs2("p", { className: `${componentClassName}__pre-title`, children: [
72
+ /* @__PURE__ */ jsx2("span", { className: `${componentClassName}__circle-wrapper`, children: /* @__PURE__ */ jsx2(DirektCircle, { classNames: `${componentClassName}__circle`, isAnimated }) }),
73
+ preTitle
74
+ ] }),
75
+ /* @__PURE__ */ jsx2("h2", { className: `${componentClassName}__title`, children: title }),
76
+ subtitle && /* @__PURE__ */ jsx2("h3", { className: `${componentClassName}__sub-title`, children: subtitle })
77
+ ] });
78
+ };
79
+ export {
80
+ DirektHeader
81
+ };
82
+ //# sourceMappingURL=direkt-header.js.map
package/preact/components/direkt-header/direkt-header.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../helpers/formatClassString.ts", "../../../components/direkt-circle/direkt-circle.tsx", "../../../components/direkt-header/direkt-header.tsx"],
4
+ "sourcesContent": ["export const formatClassString = (classesArray: (string|undefined|false)[]): string => {\n return classesArray.filter(x => !!x).join(' ');\n}\n", "interface DirektCircleProps {\n /** Hex code or supported color name */\n circleColor?: string\n classNames?: string\n isAnimated?: boolean\n attributes?: object\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/direkt-circle](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/direkt-circle)\n * - Storybook: [DirektCircle](https://designsystem.dn.se/?path=/docs/section-subcomponents-direktcircle--docs)\n * * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/direkt-circle/direkt-circle.scss'`\n */\nexport const DirektCircle = ({\n circleColor = 'white',\n classNames,\n attributes = {},\n isAnimated = false,\n}: DirektCircleProps) => {\n const componentClassName = 'ds-direkt-circle'\n const animatedClassName = isAnimated ? `${componentClassName}--animated` : ''\n const circleOpacity = [\n 0.25, 0.25, 0.25, 0.25, 0.25, 0.25, 0.25, 0.25, 0.24, 0.235, 0.222, 0.218, 0.212, 0.202, 0.19, 0.178, 0.165, 0.155,\n 0.145, 0.135, 0.12, 0.107, 0.095, 0.083, 0.07, 0.06, 0.047, 0.035, 0.023, 0.02,\n ]\n\n const classes = [componentClassName, classNames, animatedClassName].filter(Boolean).join(' ')\n\n return (\n <svg className={classes} width='500' height='500' viewBox='-250 -250 500 500' fill='none' {...attributes}>\n <circle r='5' fill={circleColor} />\n {circleOpacity.map((opacity, index) => {\n const radius = (index + 1) * 8 + 5\n return <circle key={index} opacity={opacity} r={radius} stroke={circleColor} strokeWidth='1.5' />\n })}\n </svg>\n )\n}\n", "import { formatClassString } from '@bonniernews/dn-design-system-web/helpers/formatClassString.ts'\nimport { DirektCircle } from '@bonniernews/dn-design-system-web/components/direkt-circle/direkt-circle.tsx'\nexport interface DirektHeaderProps {\n title: string\n subtitle?: string\n preTitle?: string\n isAnimated?: boolean\n classNames?: string\n /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n attributes?: object\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-onsite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/direkt-header)\n * - Storybook: [DirektHeader](https://designsystem.dn.se/?path=/docs/section-direkt-header--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/direkt-header/direkt-header.scss'`\n */\nexport const DirektHeader = ({\n classNames,\n attributes = {},\n title,\n subtitle,\n preTitle = 'Direkt',\n isAnimated = true,\n}: DirektHeaderProps) => {\n const componentClassName = 'ds-direkt-header'\n const classes = formatClassString([componentClassName, classNames])\n\n return (\n <header className={classes} {...attributes}>\n <p className={`${componentClassName}__pre-title`}>\n <span className={`${componentClassName}__circle-wrapper`}>\n <DirektCircle classNames={`${componentClassName}__circle`} isAnimated={isAnimated} />\n </span>\n {preTitle}\n </p>\n <h2 className={`${componentClassName}__title`}>{title}</h2>\n {subtitle && <h3 className={`${componentClassName}__sub-title`}>{subtitle}</h3>}\n </header>\n )\n}\n"],
5
+ "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;AC4BI,SACE,KADF;AAhBG,IAAM,eAAe,CAAC;AAAA,EAC3B,cAAc;AAAA,EACd;AAAA,EACA,aAAa,CAAC;AAAA,EACd,aAAa;AACf,MAAyB;AACvB,QAAM,qBAAqB;AAC3B,QAAM,oBAAoB,aAAa,GAAG,kBAAkB,eAAe;AAC3E,QAAM,gBAAgB;AAAA,IACpB;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAC7G;AAAA,IAAO;AAAA,IAAO;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,IAAM;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,EAC5E;AAEA,QAAM,UAAU,CAAC,oBAAoB,YAAY,iBAAiB,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE5F,SACE,qBAAC,SAAI,WAAW,SAAS,OAAM,OAAM,QAAO,OAAM,SAAQ,qBAAoB,MAAK,QAAQ,GAAG,YAC5F;AAAA,wBAAC,YAAO,GAAE,KAAI,MAAM,aAAa;AAAA,IAChC,cAAc,IAAI,CAAC,SAAS,UAAU;AACrC,YAAM,UAAU,QAAQ,KAAK,IAAI;AACjC,aAAO,oBAAC,YAAmB,SAAkB,GAAG,QAAQ,QAAQ,aAAa,aAAY,SAArE,KAA2E;AAAA,IACjG,CAAC;AAAA,KACH;AAEJ;;;ACNM,SAEI,OAAAA,MAFJ,QAAAC,aAAA;AAbC,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA,aAAa,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AACf,MAAyB;AACvB,QAAM,qBAAqB;AAC3B,QAAM,UAAU,kBAAkB,CAAC,oBAAoB,UAAU,CAAC;AAElE,SACE,gBAAAA,MAAC,YAAO,WAAW,SAAU,GAAG,YAC9B;AAAA,oBAAAA,MAAC,OAAE,WAAW,GAAG,kBAAkB,eACjC;AAAA,sBAAAD,KAAC,UAAK,WAAW,GAAG,kBAAkB,oBACpC,0BAAAA,KAAC,gBAAa,YAAY,GAAG,kBAAkB,YAAY,YAAwB,GACrF;AAAA,MACC;AAAA,OACH;AAAA,IACA,gBAAAA,KAAC,QAAG,WAAW,GAAG,kBAAkB,WAAY,iBAAM;AAAA,IACrD,YAAY,gBAAAA,KAAC,QAAG,WAAW,GAAG,kBAAkB,eAAgB,oBAAS;AAAA,KAC5E;AAEJ;",
6
+ "names": ["jsx", "jsxs"]
7
+ }
package/variables/typography-list.json CHANGED
@@ -1,58 +1,58 @@
1
1
  {
2
- "expressive-ingress-md": "'expressive-ingress-md'",
3
- "expressive-body-sm": "'expressive-body-sm'",
4
- "expressive-body-lg": "'expressive-body-lg'",
5
- "expressive-heading-xl": "'expressive-heading-xl'",
6
- "expressive-heading-xs": "'expressive-heading-xs'",
7
- "expressive-heading-lg": "'expressive-heading-lg'",
8
- "expressive-heading-md": "'expressive-heading-md'",
9
- "expressive-ingress-sm": "'expressive-ingress-sm'",
10
- "expressive-heading-xxs": "'expressive-heading-xxs'",
11
- "expressive-heading-sm": "'expressive-heading-sm'",
12
- "expressive-body-md": "'expressive-body-md'",
13
- "functional-heading-xxs": "'functional-heading-xxs'",
14
- "functional-heading-lg": "'functional-heading-lg'",
15
- "functional-heading-xs": "'functional-heading-xs'",
16
- "functional-meta-sm": "'functional-meta-sm'",
17
- "functional-label-sm": "'functional-label-sm'",
18
- "functional-meta-md": "'functional-meta-md'",
19
- "functional-heading-sm": "'functional-heading-sm'",
20
- "functional-body-sm": "'functional-body-sm'",
21
- "functional-ingress-md": "'functional-ingress-md'",
22
- "functional-body-md": "'functional-body-md'",
23
- "functional-heading-md": "'functional-heading-md'",
24
- "functional-label-md": "'functional-label-md'",
25
- "functional-heading-xl": "'functional-heading-xl'",
26
- "functional-body-lg": "'functional-body-lg'",
27
- "functional-ingress-sm": "'functional-ingress-sm'",
28
- "detail-teaser-large": "'detail-teaser-large'",
29
- "detail-teaser-longlife": "'detail-teaser-longlife'",
2
+ "detail-article-direct-opinion": "'detail-article-direct-opinion'",
3
+ "detail-article-direkt": "'detail-article-direkt'",
4
+ "detail-article-longread": "'detail-article-longread'",
5
+ "detail-article-longread-premium": "'detail-article-longread-premium'",
6
+ "detail-article-opinion": "'detail-article-opinion'",
7
+ "detail-article-quote": "'detail-article-quote'",
8
+ "detail-article-standard": "'detail-article-standard'",
9
+ "detail-direkt-body": "'detail-direkt-body'",
10
+ "detail-direkt-header": "'detail-direkt-header'",
11
+ "detail-direkt-header-v2": "'detail-direkt-header-v2'",
12
+ "detail-dropcap": "'detail-dropcap'",
13
+ "detail-gameheader": "'detail-gameheader'",
14
+ "detail-medryckare": "'detail-medryckare'",
15
+ "detail-mellanrubrik": "'detail-mellanrubrik'",
16
+ "detail-teaser-baotaxl": "'detail-teaser-baotaxl'",
30
17
  "detail-teaser-centrerad": "'detail-teaser-centrerad'",
31
- "detail-teaser-standard": "'detail-teaser-standard'",
18
+ "detail-teaser-large": "'detail-teaser-large'",
32
19
  "detail-teaser-large-compact": "'detail-teaser-large-compact'",
33
- "detail-teaser-baotaxl": "'detail-teaser-baotaxl'",
20
+ "detail-teaser-large-opinion": "'detail-teaser-large-opinion'",
34
21
  "detail-teaser-large-rightcol": "'detail-teaser-large-rightcol'",
22
+ "detail-teaser-longlife": "'detail-teaser-longlife'",
23
+ "detail-teaser-standard": "'detail-teaser-standard'",
24
+ "detail-teaser-standard-compact": "'detail-teaser-standard-compact'",
35
25
  "detail-teaser-standard-compact-opinion": "'detail-teaser-standard-compact-opinion'",
36
- "detail-teaser-twin": "'detail-teaser-twin'",
37
26
  "detail-teaser-standard-opinion": "'detail-teaser-standard-opinion'",
38
- "detail-teaser-tipsa": "'detail-teaser-tipsa'",
39
27
  "detail-teaser-storrubrik": "'detail-teaser-storrubrik'",
40
- "detail-teaser-standard-compact": "'detail-teaser-standard-compact'",
41
28
  "detail-teaser-storrubrik-opinion": "'detail-teaser-storrubrik-opinion'",
42
- "detail-teaser-large-opinion": "'detail-teaser-large-opinion'",
43
29
  "detail-teaser-text-i-bild": "'detail-teaser-text-i-bild'",
44
- "detail-article-quote": "'detail-article-quote'",
45
- "detail-article-standard": "'detail-article-standard'",
46
- "detail-article-direkt": "'detail-article-direkt'",
47
- "detail-article-longread": "'detail-article-longread'",
48
- "detail-article-longread-premium": "'detail-article-longread-premium'",
49
- "detail-article-direct-opinion": "'detail-article-direct-opinion'",
50
- "detail-article-opinion": "'detail-article-opinion'",
51
- "detail-mellanrubrik": "'detail-mellanrubrik'",
52
- "detail-gameheader": "'detail-gameheader'",
53
- "detail-dropcap": "'detail-dropcap'",
54
- "detail-direkt-header": "'detail-direkt-header'",
55
- "detail-medryckare": "'detail-medryckare'",
56
- "detail-direkt-body": "'detail-direkt-body'",
57
- "detail-direkt-header-v2": "'detail-direkt-header-v2'"
30
+ "detail-teaser-tipsa": "'detail-teaser-tipsa'",
31
+ "detail-teaser-twin": "'detail-teaser-twin'",
32
+ "expressive-body-lg": "'expressive-body-lg'",
33
+ "expressive-body-md": "'expressive-body-md'",
34
+ "expressive-body-sm": "'expressive-body-sm'",
35
+ "expressive-heading-lg": "'expressive-heading-lg'",
36
+ "expressive-heading-md": "'expressive-heading-md'",
37
+ "expressive-heading-sm": "'expressive-heading-sm'",
38
+ "expressive-heading-xl": "'expressive-heading-xl'",
39
+ "expressive-heading-xs": "'expressive-heading-xs'",
40
+ "expressive-heading-xxs": "'expressive-heading-xxs'",
41
+ "expressive-ingress-md": "'expressive-ingress-md'",
42
+ "expressive-ingress-sm": "'expressive-ingress-sm'",
43
+ "functional-body-lg": "'functional-body-lg'",
44
+ "functional-body-md": "'functional-body-md'",
45
+ "functional-body-sm": "'functional-body-sm'",
46
+ "functional-heading-lg": "'functional-heading-lg'",
47
+ "functional-heading-md": "'functional-heading-md'",
48
+ "functional-heading-sm": "'functional-heading-sm'",
49
+ "functional-heading-xl": "'functional-heading-xl'",
50
+ "functional-heading-xs": "'functional-heading-xs'",
51
+ "functional-heading-xxs": "'functional-heading-xxs'",
52
+ "functional-ingress-md": "'functional-ingress-md'",
53
+ "functional-ingress-sm": "'functional-ingress-sm'",
54
+ "functional-label-md": "'functional-label-md'",
55
+ "functional-label-sm": "'functional-label-sm'",
56
+ "functional-meta-md": "'functional-meta-md'",
57
+ "functional-meta-sm": "'functional-meta-sm'"
58
58
  }