@bonniernews/dn-design-system-web 32.7.17 → 32.7.18

package/CHANGELOG.md

@@ -4,6 +4,13 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [32.7.18](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.17...@bonniernews/dn-design-system-web@32.7.18) (2025-07-08)
+
+
+### Bug Fixes
+
+* **web:** component TeaserTipsa as TSX ([#1817](https://github.com/BonnierNews/dn-design-system/issues/1817)) ([cdb87ae](https://github.com/BonnierNews/dn-design-system/commit/cdb87ae8ccd7f6ba15aed60ab60c51b4eca2f6ec))
+
 ## [32.7.17](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.16...@bonniernews/dn-design-system-web@32.7.17) (2025-07-08)
 
 

package/components/teaser-tipsa/README.md

@@ -1,41 +1,24 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-tipsa](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-tipsa)
-- Storybook: [TeaserTipsa](https://designsystem.dn.se/?path=/docs/section-teasertipsa--docs)
-- Storybook (Latest): [TeaserTipsa](https://designsystem-latest.dn.se/?path=/docs/section-teasertipsa--docs)
-
-----
-
-# teaser-tipsa
-
-It's quite common to include a dot in the title string, like "• This is a title"
-
-## Parameters
-
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|title | String | yes | | | Heading of the teaser |
-|targetLink | String | yes | | | Target URL for the teaser |
-|text | String | no | | | Teaser subtext |
-|areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
-|theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
-|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
-|classNames | String | no | | | Ex. "my-special-class" |
-|~forcePx~ | | | | | Not supported |
-
-## 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/teaser-tipsa/teaser-tipsa.njk' import TeaserTipsa %}
-
-{{ TeaserTipsa({
-  title: "• Jessie Ware låter den fullödiga fullängdaren vänta på sig",
-})}}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/teaser-tipsa/teaser-tipsa" as *;
-```
+TeaserTipsa
+===========
+
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-tipsa](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-tipsa)
+*   Storybook: [TeaserTipsa](https://designsystem.dn.se/?path=/docs/section-teasertipsa--docs)
+
+The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/components/teaser-tipsa/teaser-tipsa.scss'`
+
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| title\* | string | \- |
+| text | string | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
+| areaType | "right", "bauta", "bautaxl" | \- |
+| targetLink | string | \- |
+| theme | "kultur", "nyheter" | \- |
+
+```jsx
+<TeaserTipsa
+  targetLink="'https://dngranskar.dn.se'"
+  title="Tipsa DN:s granskande reportrar"
+/>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "32.7.17",
+  "version": "32.7.18",
   "description": "DN design system for web.",
   "type": "module",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",

package/preact/components/teaser-tipsa/teaser-tipsa.d.ts

@@ -0,0 +1,16 @@
+import type { SharedProps } from '@bonniernews/dn-design-system-web/assets/types/shared-props.ts';
+import { TeaserCardsProps } from '../teaser-card/teaser-card';
+interface TeaserTipsaProps extends SharedProps, TeaserCardsProps {
+    title: string;
+    text?: string;
+}
+/**
+ * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-tipsa](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-tipsa)
+ * - Storybook: [TeaserTipsa](https://designsystem.dn.se/?path=/docs/section-teasertipsa--docs)
+ *
+ * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
+ * `@use '@bonniernews/dn-design-system-web/components/teaser-tipsa/teaser-tipsa.scss'`
+ *
+ */
+export declare const TeaserTipsa: ({ targetLink, areaType, title, text, classNames, attributes }: TeaserTipsaProps) => import("preact").JSX.Element;
+export {};

package/preact/components/teaser-tipsa/teaser-tipsa.js

@@ -0,0 +1,42 @@
+// ../src/helpers/formatClassString.ts
+var formatClassString = (classesArray) => {
+  return classesArray.filter((x) => !!x).join(" ");
+};
+
+// ../src/components/teaser-card/teaser-card.tsx
+import { jsx } from "preact/jsx-runtime";
+var TeaserCard = ({ areaType, targetLink, theme = "nyheter", classNames, attributes, children }) => {
+  const componentClassName = "ds-teaser";
+  const classes = formatClassString([
+    componentClassName,
+    areaType && `${componentClassName}--${areaType}`,
+    areaType == "bauta" && "ds-dark",
+    `ds-theme--${theme}`,
+    classNames
+  ]);
+  if (targetLink) {
+    return /* @__PURE__ */ jsx("a", { className: classes, href: targetLink, ...attributes, children });
+  }
+  return /* @__PURE__ */ jsx("div", { className: classes, ...attributes, children });
+};
+
+// ../src/components/teaser-tipsa/teaser-tipsa.tsx
+import { jsx as jsx2, jsxs } from "preact/jsx-runtime";
+var TeaserTipsa = ({ targetLink, areaType, title, text, classNames, attributes = {} }) => {
+  const componentClassName = "ds-teaser";
+  const classes = formatClassString([componentClassName, "ds-teaser--tipsa", classNames]);
+  const teaserCardProps = {
+    targetLink,
+    areaType,
+    attributes,
+    classNames: classes
+  };
+  return /* @__PURE__ */ jsx2(TeaserCard, { ...teaserCardProps, children: /* @__PURE__ */ jsxs("div", { className: `${componentClassName}__content`, children: [
+    /* @__PURE__ */ jsx2("h2", { className: "ds-teaser__title", children: title }),
+    text && /* @__PURE__ */ jsx2("p", { className: `${componentClassName}__text`, children: text })
+  ] }) });
+};
+export {
+  TeaserTipsa
+};
+//# sourceMappingURL=teaser-tipsa.js.map

package/preact/components/teaser-tipsa/teaser-tipsa.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../helpers/formatClassString.ts", "../../../components/teaser-card/teaser-card.tsx", "../../../components/teaser-tipsa/teaser-tipsa.tsx"],
+  "sourcesContent": ["export const formatClassString = (classesArray: (string|undefined|false)[]): string => {\n  return classesArray.filter(x => !!x).join(' ');\n}\n", "import type { SharedProps } from \"@bonniernews/dn-design-system-web/assets/types/shared-props.ts\";\nimport { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\nimport { ComponentChildren } from \"preact\";\n\nexport interface TeaserCardsProps extends SharedProps {\n  areaType?: 'right' | 'bauta' | 'bautaxl';\n  targetLink?: string;\n  theme?: 'kultur' | 'nyheter';\n  children: ComponentChildren;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-card](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-card)\n * - Storybook: [Subcomponents > TeaserCard](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserdot--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/assets/teaser/teaser.scss'`\n */\nexport const TeaserCard = ({ areaType, targetLink, theme = 'nyheter', classNames, attributes, children }: TeaserCardsProps) => {\n  const componentClassName = 'ds-teaser';\n\n  const classes = formatClassString([\n    componentClassName,\n    areaType && `${componentClassName}--${areaType}`,\n    areaType == 'bauta' && 'ds-dark',\n    `ds-theme--${theme}`,\n    classNames,\n  ])\n\n  if (targetLink) {\n    return (\n      <a className={classes} href={targetLink } {...attributes}>\n        { children }\n      </a>\n    );\n  }\n\n  return (\n    <div className={classes}{...attributes}>\n      { children }\n    </div>\n  );\n};\n", "import type { SharedProps } from '@bonniernews/dn-design-system-web/assets/types/shared-props.ts'\nimport { formatClassString } from '@bonniernews/dn-design-system-web/helpers/formatClassString.ts'\nimport { TeaserCard, TeaserCardsProps } from '../teaser-card/teaser-card'\n\ninterface TeaserTipsaProps extends SharedProps, TeaserCardsProps {\n  title: string\n  text?: string\n}\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-tipsa](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-tipsa)\n * - Storybook: [TeaserTipsa](https://designsystem.dn.se/?path=/docs/section-teasertipsa--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/teaser-tipsa/teaser-tipsa.scss'`\n *\n */\n\nexport const TeaserTipsa = ({ targetLink, areaType, title, text, classNames, attributes = {} }: TeaserTipsaProps) => {\n  const componentClassName = 'ds-teaser'\n  const classes = formatClassString([componentClassName, 'ds-teaser--tipsa', classNames])\n\n  const teaserCardProps = {\n    targetLink,\n    areaType,\n    attributes,\n    classNames: classes,\n  }\n\n  return (\n    <TeaserCard {...teaserCardProps}>\n      <div className={`${componentClassName}__content`}>\n        <h2 className='ds-teaser__title'>{title}</h2>\n        {text && <p className={`${componentClassName}__text`}>{text}</p>}\n      </div>\n    </TeaserCard>\n  )\n}\n"],
+  "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;AC6BM;AAbC,IAAM,aAAa,CAAC,EAAE,UAAU,YAAY,QAAQ,WAAW,YAAY,YAAY,SAAS,MAAwB;AAC7H,QAAM,qBAAqB;AAE3B,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,YAAY,GAAG,kBAAkB,KAAK,QAAQ;AAAA,IAC9C,YAAY,WAAW;AAAA,IACvB,aAAa,KAAK;AAAA,IAClB;AAAA,EACF,CAAC;AAED,MAAI,YAAY;AACd,WACE,oBAAC,OAAE,WAAW,SAAS,MAAM,YAAc,GAAG,YAC1C,UACJ;AAAA,EAEJ;AAEA,SACE,oBAAC,SAAI,WAAW,SAAS,GAAG,YACxB,UACJ;AAEJ;;;ACZM,SACE,OAAAA,MADF;AAbC,IAAM,cAAc,CAAC,EAAE,YAAY,UAAU,OAAO,MAAM,YAAY,aAAa,CAAC,EAAE,MAAwB;AACnH,QAAM,qBAAqB;AAC3B,QAAM,UAAU,kBAAkB,CAAC,oBAAoB,oBAAoB,UAAU,CAAC;AAEtF,QAAM,kBAAkB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EACd;AAEA,SACE,gBAAAA,KAAC,cAAY,GAAG,iBACd,+BAAC,SAAI,WAAW,GAAG,kBAAkB,aACnC;AAAA,oBAAAA,KAAC,QAAG,WAAU,oBAAoB,iBAAM;AAAA,IACvC,QAAQ,gBAAAA,KAAC,OAAE,WAAW,GAAG,kBAAkB,UAAW,gBAAK;AAAA,KAC9D,GACF;AAEJ;",
+  "names": ["jsx"]
+}