@bonniernews/dn-design-system-web 32.7.47 → 32.7.48

package/CHANGELOG.md

@@ -4,6 +4,19 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [32.7.48](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.47...@bonniernews/dn-design-system-web@32.7.48) (2025-08-18)
+
+
+### Bug Fixes
+
+* **app:** typography fontscale aware ([#1867](https://github.com/BonnierNews/dn-design-system/issues/1867)) ([7023ecd](https://github.com/BonnierNews/dn-design-system/commit/7023ecd287da2e35bba322e960714fe0e28a60ee))
+* **web:** badge component as TSX ([#1865](https://github.com/BonnierNews/dn-design-system/issues/1865)) ([1b5dbba](https://github.com/BonnierNews/dn-design-system/commit/1b5dbba2f60aaf677de378a4719d20f19f86eddc))
+
+
+### Maintenance
+
+* prerelease packages ([a04b181](https://github.com/BonnierNews/dn-design-system/commit/a04b181cd7b556abd79e63338fbdea879638d9fe))
+
 ## [32.7.47](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.46...@bonniernews/dn-design-system-web@32.7.47) (2025-08-15)
 
 

package/components/badge/README.md

@@ -1,34 +1,18 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/badge](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/badge)
-- Storybook: [Badge](https://designsystem.dn.se/?path=/docs/basic-badge--docs)
-- Storybook (Latest): [Badge](https://designsystem-latest.dn.se/?path=/docs/basic-badge--docs)
+Badge
+=====
 
-----
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/badge](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/badge)
+*   Storybook: [Badge](https://designsystem.dn.se/?path=/docs/basic-badge--docs)
 
-# Badge
+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/badge/badge.scss'`
 
-## Parameters
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| figure | number | \- |
+| forcePx | boolean | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|figure | int | no | | | Numbers above 9 will show as "9+"|
-|classNames | String | no | | | Ex. "my-special-class" |
-|forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size |
-
-## 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/badge/badge.njk' import Badge %}
-
-{{ Badge({
-  figure: 2
-})}}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/badge/badge";
-```
+```jsx
+<Badge />
+```

package/package.json

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

package/preact/components/badge/badge.d.ts

@@ -0,0 +1,13 @@
+import type { SharedProps } from '@bonniernews/dn-design-system-web/assets/types/shared-props.ts';
+export interface BadgeProps extends SharedProps {
+    figure?: number;
+    forcePx?: boolean;
+}
+/**
+ * - GitHub: [BonnierNews/dn-design-system/web/src/components/badge](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/badge)
+ * - Storybook: [Badge](https://designsystem.dn.se/?path=/docs/basic-badge--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/badge/badge.scss'`
+ */
+export declare const Badge: ({ figure, forcePx, classNames, attributes }: BadgeProps) => import("preact").JSX.Element;

package/preact/components/badge/badge.js

@@ -0,0 +1,25 @@
+// ../src/helpers/formatClassString.ts
+var formatClassString = (classesArray) => {
+  return classesArray.filter((x) => !!x).join(" ");
+};
+
+// ../src/components/badge/badge.tsx
+import { jsx } from "preact/jsx-runtime";
+var Badge = ({ figure, forcePx, classNames, attributes }) => {
+  const componentClassName = "ds-badge";
+  let variant = "empty";
+  if (figure) {
+    variant = figure < 10 ? "single" : "double";
+  }
+  const classes = formatClassString([
+    componentClassName,
+    `${componentClassName}--${variant}`,
+    forcePx && "ds-force-px",
+    classNames
+  ]);
+  return /* @__PURE__ */ jsx("div", { className: classes, ...attributes, children: /* @__PURE__ */ jsx("span", { className: "ds-badge__inner", children: figure && (variant === "double" ? "9+" : figure) }) });
+};
+export {
+  Badge
+};
+//# sourceMappingURL=badge.js.map

package/preact/components/badge/badge.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../helpers/formatClassString.ts", "../../../components/badge/badge.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'\n\nimport { formatClassString } from '@bonniernews/dn-design-system-web/helpers/formatClassString.ts'\n\nexport interface BadgeProps extends SharedProps {\n  figure?: number\n  forcePx?: boolean\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/web/src/components/badge](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/badge)\n * - Storybook: [Badge](https://designsystem.dn.se/?path=/docs/basic-badge--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/badge/badge.scss'`\n */\nexport const Badge = ({ figure, forcePx, classNames, attributes }: BadgeProps) => {\n  const componentClassName = 'ds-badge'\n  let variant = 'empty'\n\n  if (figure) {\n    variant = figure < 10 ? 'single' : 'double'\n  }\n\n  const classes = formatClassString([\n    componentClassName,\n    `${componentClassName}--${variant}`,\n    forcePx && 'ds-force-px',\n    classNames,\n  ])\n\n  return (\n    <div className={classes} {...attributes}>\n      <span className='ds-badge__inner'>{figure && (variant === 'double' ? '9+' : figure)}</span>\n    </div>\n  )\n}\n"],
+  "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAyD;AACzF,SAAO,aAAa,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AACjD;;;AC+BM;AAjBC,IAAM,QAAQ,CAAC,EAAE,QAAQ,SAAS,YAAY,WAAW,MAAkB;AAChF,QAAM,qBAAqB;AAC3B,MAAI,UAAU;AAEd,MAAI,QAAQ;AACV,cAAU,SAAS,KAAK,WAAW;AAAA,EACrC;AAEA,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,GAAG,kBAAkB,KAAK,OAAO;AAAA,IACjC,WAAW;AAAA,IACX;AAAA,EACF,CAAC;AAED,SACE,oBAAC,SAAI,WAAW,SAAU,GAAG,YAC3B,8BAAC,UAAK,WAAU,mBAAmB,qBAAW,YAAY,WAAW,OAAO,SAAQ,GACtF;AAEJ;",
+  "names": []
+}

package/components/badge/badge.njk

@@ -1,25 +0,0 @@
-{% macro Badge(params) %}
-  {% set componentClassName = "ds-badge" %}
-  {% set classNamePrefix = componentClassName + "--" %}
-  {% set figure = params.figure %}
-
-  {% if figure and figure | string | length == 1 %}
-    {% set variant = "single" %}
-  {% elif figure %}
-    {% set figure = "9+" %}
-    {% set variant = "double" %}
-  {% else %}
-    {% set variant = "empty" %}
-  {% endif%}
-
-  {%- set classes = [
-    componentClassName,
-    classNamePrefix + variant,
-    "ds-force-px" if params.forcePx,
-    params.classNames if params.classNames
-  ] | join(" ") %}
-
-  <div class="{{ classes }}">
-    <span class="{{ componentClassName + '__inner'}}">{{- figure | safe if figure -}}</span>
-  </div>
-{% endmacro %}