@bonniernews/dn-design-system-web 32.1.1 → 32.1.2-beta.0

package/components/teaser-counter/teaser-counter.scss

@@ -0,0 +1,79 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+
+a.ds-teaser--counter.ds-teaser {
+  color: inherit;
+  text-decoration: none;
+}
+
+.ds-teaser--counter.ds-teaser {
+  display: grid;
+  grid-template-columns: auto auto;
+  background-color: $ds-color-surface-primary;
+  gap: ds-spacing($ds-s-075);
+  padding: ds-spacing($ds-s-075);
+
+  .ds-teaser__content {
+    display: flex;
+    flex-direction: column;
+    gap: ds-spacing($ds-s-100);
+    justify-content: space-between;
+  }
+
+  .ds-teaser--counter__title {
+    @include ds-typography(
+      $ds-typography-functional-heading-xs,
+      $fontWeight: $ds-fontweight-regular,
+      $lineHeight: $ds-lineheight-md
+    );
+    margin: 0;
+  }
+
+  .ds-teaser--counter__title--highlighted {
+    font-weight: $ds-fontweight-bold;
+  }
+
+  .ds-teaser--counter__counter-wrapper {
+    align-items: center;
+    display: flex;
+    gap: ds-spacing($ds-s-050);
+  }
+
+  .ds-teaser--counter__list {
+    @include ds-typography($ds-typography-functional-heading-sm, $fontWeight: $ds-fontweight-regular);
+    display: flex;
+    font-variant-numeric: tabular-nums;
+    gap: ds-spacing($ds-s-012);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    .ds-teaser--counter__item {
+      background-color: $ds-color-brand-600;
+      border-radius: ds-border-radius($ds-s-025);
+      color: $ds-color-text-on-brand;
+      padding: ds-spacing($ds-s-012) ds-spacing($ds-s-025);
+    }
+  }
+
+  .ds-teaser--counter__counter-text {
+    @include ds-typography($ds-typography-functional-meta-md);
+    margin: 0;
+  }
+  .ds-teaser-image {
+    display: flex;
+    justify-content: flex-end;
+    max-height: 130px;
+    min-height: 86px;
+    height: 100%;
+    margin: 0;
+  }
+
+  .picture--placeholder {
+    height: 100%;
+  }
+
+  .picture--placeholder,
+  .picture__img {
+    border-radius: ds-border-radius($ds-s-025);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "32.1.1",
+  "version": "32.1.2-beta.0",
   "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-counter/teaser-counter.d.ts

@@ -0,0 +1,26 @@
+export interface TeaserCounterProps {
+    title: string;
+    counterText: string;
+    subtitle?: string;
+    areaType?: 'right' | 'bauta';
+    targetLink?: string;
+    mediaHtml?: string;
+    counterDate?: string;
+    countdown?: boolean;
+    counterNumber?: number;
+    classNames?: string;
+    /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
+    attributes?: object;
+}
+/**
+ * Also known as "På Plats-puffen".
+ *
+ * In the CMS title will be set to a location like "Kiev, Ukraina" or "USA" and text is usually set to some author names like "Jan Banan och Kalle Kula"
+ *
+ * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-onsite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-counter)
+ * - Storybook: [TeaserCounter](https://designsystem.dn.se/?path=/docs/section-teaser-counter--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-counter/teaser-counter.scss'`
+ */
+export declare const TeaserCounter: ({ areaType, targetLink, classNames, attributes, mediaHtml, counterText, countdown, counterDate, counterNumber, title, subtitle, }: TeaserCounterProps) => import("preact").JSX.Element;

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

@@ -0,0 +1,78 @@
+// ../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", classes, attributes, children }) => {
+  const componentClassName = "ds-teaser";
+  const classNames = formatClassString([
+    componentClassName,
+    areaType && `${componentClassName}--${areaType}`,
+    areaType == "bauta" && "ds-dark",
+    `ds-theme--${theme}`,
+    classes
+  ]);
+  if (targetLink) {
+    return /* @__PURE__ */ jsx("a", { className: classNames, href: targetLink, ...attributes, children });
+  }
+  return /* @__PURE__ */ jsx("div", { className: classNames, ...attributes, children });
+};
+
+// ../src/helpers/teaser.tsx
+import { jsx as jsx2 } from "preact/jsx-runtime";
+var Media = ({ mediaHtml, rounded }) => {
+  const classNames = "ds-teaser__media" + (rounded ? " ds-teaser__media--rounded" : "");
+  return mediaHtml ? /* @__PURE__ */ jsx2("div", { className: classNames, dangerouslySetInnerHTML: { __html: mediaHtml } }) : null;
+};
+var Content = ({ children }) => {
+  return /* @__PURE__ */ jsx2("div", { className: "ds-teaser__content", children });
+};
+
+// ../src/components/teaser-counter/teaser-counter.tsx
+import { jsx as jsx3, jsxs } from "preact/jsx-runtime";
+var TeaserCounter = ({
+  areaType,
+  targetLink,
+  classNames,
+  attributes,
+  mediaHtml,
+  counterText,
+  countdown,
+  counterDate,
+  counterNumber,
+  title,
+  subtitle
+}) => {
+  const componentClassName = "ds-teaser--counter";
+  const classes = formatClassString([componentClassName, classNames]);
+  const mergedAttributes = {
+    ...attributes,
+    "data-counter-date": counterDate,
+    ...countdown ? { "data-countdown": countdown } : {}
+  };
+  return /* @__PURE__ */ jsxs(TeaserCard, { ...{ areaType, targetLink, classes, attributes: mergedAttributes }, children: [
+    /* @__PURE__ */ jsxs(Content, { children: [
+      title && /* @__PURE__ */ jsxs("h2", { className: `${componentClassName}__title`, children: [
+        /* @__PURE__ */ jsx3("span", { className: `${componentClassName}__title--highlighted`, children: title }),
+        subtitle && ` \u2013 ${subtitle}`
+      ] }),
+      (counterNumber || counterText) && /* @__PURE__ */ jsxs("div", { className: `${componentClassName}__counter-wrapper`, children: [
+        counterNumber && /* @__PURE__ */ jsx3("ul", { className: `${componentClassName}__list`, children: counterNumber.toString().split("").map((digit, index) => /* @__PURE__ */ jsx3("li", { className: `${componentClassName}__item`, children: digit }, index)) }),
+        counterText && /* @__PURE__ */ jsx3(
+          "p",
+          {
+            className: `${componentClassName}__counter-text`,
+            dangerouslySetInnerHTML: { __html: counterText }
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx3(Media, { ...{ mediaHtml } })
+  ] });
+};
+export {
+  TeaserCounter
+};
+//# sourceMappingURL=teaser-counter.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../helpers/formatClassString.ts", "../../../components/teaser-card/teaser-card.tsx", "../../../helpers/teaser.tsx", "../../../components/teaser-counter/teaser-counter.tsx"],
+  "sourcesContent": ["export const formatClassString = (classesArray: (string|undefined|false)[]): string => {\n  return classesArray.filter(x => !!x).join(' ');\n}\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\nimport { ComponentChildren } from \"preact\";\n\nexport interface TeaserCardsProps {\n  areaType?: 'right' | 'bauta' | 'bautaxl';\n  targetLink?: string;\n  theme?: 'kultur' | 'nyheter';\n  classes?: string;\n   /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n  attributes?: object;\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', classes, attributes, children }: TeaserCardsProps) => {\n  const componentClassName = 'ds-teaser';\n\n  const classNames = formatClassString([\n    componentClassName,\n    areaType && `${componentClassName}--${areaType}`,\n    areaType == 'bauta' && 'ds-dark',\n    `ds-theme--${theme}`,\n    classes,\n  ])\n\n  if (targetLink) {\n    return (\n      <a className={classNames} href={targetLink } {...attributes}>\n        { children }\n      </a>\n    );\n  }\n\n  return (\n    <div className={classNames}{...attributes}>\n      { children }\n    </div>\n  );\n};\n", "import { ComponentChildren } from \"preact\";\n\ninterface MediaProps {\n  mediaHtml?: string;\n  rounded?: boolean;\n}\n\nexport const Media = ({ mediaHtml, rounded }: MediaProps) => {\n  const classNames = 'ds-teaser__media' + (rounded ? ' ds-teaser__media--rounded' : '');\n  return mediaHtml ? (<div className={classNames} dangerouslySetInnerHTML={{ __html: mediaHtml }} />) : (null)\n}\n\ninterface ContentProps {\n  children: ComponentChildren;\n}\nexport const Content = ({ children }: ContentProps) => {\n  return (<div className=\"ds-teaser__content\">\n    {children}\n  </div>)\n}\n\ninterface TitleProps {\n  title?: string;\n}\nexport const Title = ({ title }: TitleProps) => {\n  return title ? (<h2 className=\"ds-teaser__title\">{title}</h2>) : (null)\n}\n\ninterface BodyProps {\n  text?: string;\n}\nexport const Body = ({ text }: BodyProps) => {\n  return text ? (<p className=\"ds-teaser__text\">{text}</p>) : (null)\n}\n", "import { TeaserCard } from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.tsx'\nimport { formatClassString } from '@bonniernews/dn-design-system-web/helpers/formatClassString.ts'\nimport { Content, Media } from '@bonniernews/dn-design-system-web/helpers/teaser.tsx'\nexport interface TeaserCounterProps {\n  title: string\n  counterText: string\n  subtitle?: string\n  areaType?: 'right' | 'bauta'\n  targetLink?: string\n  mediaHtml?: string\n  counterDate?: string\n  countdown?: boolean\n  counterNumber?: number\n  classNames?: string\n  /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n  attributes?: object\n}\n\n/**\n * Also known as \"P\u00E5 Plats-puffen\".\n *\n * In the CMS title will be set to a location like \"Kiev, Ukraina\" or \"USA\" and text is usually set to some author names like \"Jan Banan och Kalle Kula\"\n *\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-onsite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-counter)\n * - Storybook: [TeaserCounter](https://designsystem.dn.se/?path=/docs/section-teaser-counter--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-counter/teaser-counter.scss'`\n */\nexport const TeaserCounter = ({\n  areaType,\n  targetLink,\n  classNames,\n  attributes,\n  mediaHtml,\n  counterText,\n  countdown,\n  counterDate,\n  counterNumber,\n  title,\n  subtitle,\n}: TeaserCounterProps) => {\n  const componentClassName = 'ds-teaser--counter'\n  const classes = formatClassString([componentClassName, classNames])\n\n  const mergedAttributes = {\n    ...attributes,\n    'data-counter-date': counterDate,\n    ...(countdown ? { 'data-countdown': countdown } : {}),\n  }\n\n  return (\n    <TeaserCard {...{ areaType, targetLink, classes, attributes: mergedAttributes }}>\n      <Content>\n        {title && (\n          <h2 className={`${componentClassName}__title`}>\n            <span className={`${componentClassName}__title--highlighted`}>{title}</span>\n            {subtitle && ` \u2013 ${subtitle}`}\n          </h2>\n        )}\n\n        {(counterNumber || counterText) && (\n          <div className={`${componentClassName}__counter-wrapper`}>\n            {counterNumber && (\n              <ul className={`${componentClassName}__list`}>\n                {counterNumber\n                  .toString()\n                  .split('')\n                  .map((digit, index) => (\n                    <li key={index} className={`${componentClassName}__item`}>\n                      {digit}\n                    </li>\n                  ))}\n              </ul>\n            )}\n\n            {counterText && (\n              <p\n                className={`${componentClassName}__counter-text`}\n                dangerouslySetInnerHTML={{ __html: counterText }}\n              ></p>\n            )}\n          </div>\n        )}\n      </Content>\n      <Media {...{ mediaHtml }} />\n    </TeaserCard>\n  )\n}\n"],
+  "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;AC+BM;AAbC,IAAM,aAAa,CAAC,EAAE,UAAU,YAAY,QAAQ,WAAW,SAAS,YAAY,SAAS,MAAwB;AAC1H,QAAM,qBAAqB;AAE3B,QAAM,aAAa,kBAAkB;AAAA,IACnC;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,YAAY,MAAM,YAAc,GAAG,YAC7C,UACJ;AAAA,EAEJ;AAEA,SACE,oBAAC,SAAI,WAAW,YAAY,GAAG,YAC3B,UACJ;AAEJ;;;ACnCsB,gBAAAA,YAAA;AAFf,IAAM,QAAQ,CAAC,EAAE,WAAW,QAAQ,MAAkB;AAC3D,QAAM,aAAa,sBAAsB,UAAU,+BAA+B;AAClF,SAAO,YAAa,gBAAAA,KAAC,SAAI,WAAW,YAAY,yBAAyB,EAAE,QAAQ,UAAU,GAAG,IAAO;AACzG;AAKO,IAAM,UAAU,CAAC,EAAE,SAAS,MAAoB;AACrD,SAAQ,gBAAAA,KAAC,SAAI,WAAU,sBACpB,UACH;AACF;;;ACoCU,SACE,OAAAC,MADF;AA1BH,IAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA0B;AACxB,QAAM,qBAAqB;AAC3B,QAAM,UAAU,kBAAkB,CAAC,oBAAoB,UAAU,CAAC;AAElE,QAAM,mBAAmB;AAAA,IACvB,GAAG;AAAA,IACH,qBAAqB;AAAA,IACrB,GAAI,YAAY,EAAE,kBAAkB,UAAU,IAAI,CAAC;AAAA,EACrD;AAEA,SACE,qBAAC,cAAY,GAAG,EAAE,UAAU,YAAY,SAAS,YAAY,iBAAiB,GAC5E;AAAA,yBAAC,WACE;AAAA,eACC,qBAAC,QAAG,WAAW,GAAG,kBAAkB,WAClC;AAAA,wBAAAA,KAAC,UAAK,WAAW,GAAG,kBAAkB,wBAAyB,iBAAM;AAAA,QACpE,YAAY,WAAM,QAAQ;AAAA,SAC7B;AAAA,OAGA,iBAAiB,gBACjB,qBAAC,SAAI,WAAW,GAAG,kBAAkB,qBAClC;AAAA,yBACC,gBAAAA,KAAC,QAAG,WAAW,GAAG,kBAAkB,UACjC,wBACE,SAAS,EACT,MAAM,EAAE,EACR,IAAI,CAAC,OAAO,UACX,gBAAAA,KAAC,QAAe,WAAW,GAAG,kBAAkB,UAC7C,mBADM,KAET,CACD,GACL;AAAA,QAGD,eACC,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,GAAG,kBAAkB;AAAA,YAChC,yBAAyB,EAAE,QAAQ,YAAY;AAAA;AAAA,QAChD;AAAA,SAEL;AAAA,OAEJ;AAAA,IACA,gBAAAA,KAAC,SAAO,GAAG,EAAE,UAAU,GAAG;AAAA,KAC5B;AAEJ;",
+  "names": ["jsx", "jsx"]
+}