@bonniernews/dn-design-system-web 21.1.9 → 21.1.10

package/@types/components/icon-sprite/icon-sprite.d.ts

@@ -0,0 +1,17 @@
+export interface IconProps {
+    iconName: string;
+    classNames?: string;
+    attributes?: object;
+}
+/**
+ * - GitHub: [BonnierNews/dn-design-system/../web/src/components/icon](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/icon-sprite)
+ * - Storybook: [icon](https://designsystem.dn.se/?path=/docs/foundations-icons--docs)
+ *
+ * The IconUse component is used to render a specific icon from the sprite, but mostly we will use the IconWithWrapper component.
+ * The IconSprite component is only used to export the sprite file.
+ *
+ * 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/icon/icon.scss'`
+ */
+export declare const IconUse: ({ iconName, classNames, attributes }: IconProps) => import("preact").JSX.Element;
+export declare const IconSprite: () => import("preact").JSX.Element;

package/@types/components/icon-with-wrapper/icon-with-wrapper.d.ts

@@ -0,0 +1,23 @@
+import { IconColors } from '../../types/token-types/colors';
+import { Icons } from '../../types/token-types/icons';
+export interface IconProps {
+    iconName: Icons;
+    size?: number;
+    color?: IconColors;
+    classNames?: string;
+    attributes?: object;
+    forcePx?: boolean;
+}
+/**
+ * - GitHub: [BonnierNews/dn-design-system/../web/src/components/icon](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/icon-sprite)
+ * - Storybook: [icon](https://designsystem.dn.se/?path=/docs/foundations-icons--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/icon/icon.scss'`
+ *
+ * ###There are three ways to use icons from DS:
+ * Use Icon from sprite: `IconUse({})`, this is the **recomended** way since this reduces the html output.
+ * Use Icon with wrapper: `IconWithWrapper({})`, the component itself uses the icons from the sprite but wraps it with a div and takes properties like size and color
+ * Use Icon from foundations: `Icon({})`, only use this if you need an inline icon, this will output the entire svg wherever it is used.
+ */
+export declare const IconWithWrapper: ({ iconName, size, color, attributes, classNames, forcePx }: IconProps) => import("preact").JSX.Element;

package/@types/components/pictogram/pictogram.d.ts

@@ -0,0 +1,17 @@
+import { Icons } from "../../types/token-types/icons";
+export interface PictogramProps {
+    variant?: 'brand' | 'business';
+    iconName: Icons;
+    size?: 'large' | 'small';
+    classNames?: string;
+    attributes?: object;
+    forcePx?: boolean;
+}
+/**
+ * - GitHub: [BonnierNews/dn-design-system/../web/src/components/Pictogram](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/pictogram)
+ * - Storybook: [Pictogram](https://designsystem.dn.se/?path=/docs/article-Pictogram--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/pictogram/pictogram.scss'`
+ */
+export declare const Pictogram: ({ variant, iconName, size, classNames, attributes, forcePx }: PictogramProps) => import("preact").JSX.Element;

package/{preact → @types}/index.d.ts

@@ -12,3 +12,9 @@ import { Footer } from "./components/footer/footer";
 export { Footer };
 import { Spinner } from "./components/spinner/spinner";
 export { Spinner };
+import { IconWithWrapper } from "./components/icon-with-wrapper/icon-with-wrapper";
+export { IconWithWrapper };
+import { IconSprite } from "./components/icon-sprite/icon-sprite";
+export { IconSprite };
+import { IconUse } from "./components/icon-sprite/icon-sprite";
+export { IconUse };

package/@types/types/token-types/colors.d.ts

@@ -0,0 +1,5 @@
+import colorVariables from '../../tokens/colors-css-variables.json';
+export type Colors = keyof typeof colorVariables;
+export type IconColors = {
+    [K in Colors]: K extends `icon-${string}` ? K : never;
+}[Colors];

package/@types/types/token-types/icons.d.ts

@@ -0,0 +1,2 @@
+import iconNames from '../../tokens/icon-list.json';
+export type Icons = keyof typeof iconNames;

package/CHANGELOG.md

@@ -4,6 +4,13 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [21.1.10](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.9...@bonniernews/dn-design-system-web@21.1.10) (2024-12-04)
+
+
+### Bug Fixes
+
+* **web:** icons, including sprite and pictogram, as .tsx ([#1523](https://github.com/BonnierNews/dn-design-system/issues/1523)) ([17dc7f9](https://github.com/BonnierNews/dn-design-system/commit/17dc7f9faf88d4c86815e158267a59aad34be689))
+
 ## [21.1.9](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.8...@bonniernews/dn-design-system-web@21.1.9) (2024-11-29)
 
 

package/components/icon-sprite/icon-sprite.tsx

@@ -0,0 +1,39 @@
+import { formatClassString } from "../../helpers/formatClassString";
+// @ts-ignore
+import SpriteFile from '../../foundations/icons/sprite.svg';
+
+export interface IconProps {
+  iconName: string;
+  classNames?: string;
+  attributes?: object;
+}
+
+/**
+ * - GitHub: [BonnierNews/dn-design-system/../web/src/components/icon](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/icon-sprite)
+ * - Storybook: [icon](https://designsystem.dn.se/?path=/docs/foundations-icons--docs)
+ *
+ * The IconUse component is used to render a specific icon from the sprite, but mostly we will use the IconWithWrapper component.
+ * The IconSprite component is only used to export the sprite file.
+ *
+ * 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/icon/icon.scss'`
+ */
+export const IconUse = ({ iconName, classNames, attributes }: IconProps) => {
+  const componentClassName = 'ds-icon';
+
+  const classes = formatClassString([
+    componentClassName,
+    `${componentClassName}--sprite`,
+    `${componentClassName}--${iconName}`,
+    classNames,
+  ])
+
+  return (
+  <i className={classes} { ...attributes }>
+    <svg><use xlinkHref={`#ds-${ iconName }`}></use></svg>
+  </i>
+  );
+};
+
+// @ts-ignore
+export const IconSprite = () => <SpriteFile />

package/components/icon-with-wrapper/icon-with-wrapper.tsx

@@ -0,0 +1,53 @@
+import colorVariables from '@bonniernews/dn-design-system-web/tokens/colors-css-variables.json';
+import { IconColors } from '../../types/token-types/colors';
+import { Icons } from '../../types/token-types/icons';
+
+import { formatClassString } from "../../helpers/formatClassString";
+import { IconUse } from "../icon-sprite/icon-sprite";
+
+export interface IconProps {
+  iconName: Icons;
+  size?: number;
+  color?: IconColors;
+  classNames?: string;
+  attributes?: object;
+  forcePx?: boolean;
+}
+
+/**
+ * - GitHub: [BonnierNews/dn-design-system/../web/src/components/icon](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/icon-sprite)
+ * - Storybook: [icon](https://designsystem.dn.se/?path=/docs/foundations-icons--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/icon/icon.scss'`
+ *
+ * ###There are three ways to use icons from DS:
+ * Use Icon from sprite: `IconUse({})`, this is the **recomended** way since this reduces the html output.
+ * Use Icon with wrapper: `IconWithWrapper({})`, the component itself uses the icons from the sprite but wraps it with a div and takes properties like size and color
+ * Use Icon from foundations: `Icon({})`, only use this if you need an inline icon, this will output the entire svg wherever it is used.
+ */
+export const IconWithWrapper = ({ iconName, size = 24, color = "icon-primary", attributes, classNames, forcePx }: IconProps) => {
+  const componentClassName = 'ds-icon-wrapper';
+
+  const classes = formatClassString([
+    componentClassName,
+    `${componentClassName}--sprite`,
+    `${componentClassName}--${iconName}`,
+    forcePx && 'ds-force-px',
+    classNames,
+  ])
+
+  const iconSize = forcePx ? `${size}px` : `${size/16}rem`;
+  const iconColor = colorVariables[color];
+  const styles = {
+    width: iconSize,
+    height: iconSize,
+    color: iconColor
+  };
+
+  return (
+    <div className={ classes } style={styles} { ...attributes }>
+      <IconUse iconName={iconName}  />
+    </div>
+  );
+};

package/components/pictogram/pictogram.tsx

@@ -0,0 +1,37 @@
+import { formatClassString } from "../../helpers/formatClassString";
+import { Icons } from "../../types/token-types/icons";
+import { IconUse } from "../icon-sprite/icon-sprite";
+
+export interface PictogramProps {
+  variant?: 'brand' | 'business';
+  iconName: Icons;
+  size?: 'large' | 'small';
+  classNames?: string;
+  attributes?: object;
+  forcePx?: boolean;
+}
+
+/**
+ * - GitHub: [BonnierNews/dn-design-system/../web/src/components/Pictogram](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/pictogram)
+ * - Storybook: [Pictogram](https://designsystem.dn.se/?path=/docs/article-Pictogram--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/pictogram/pictogram.scss'`
+ */
+export const Pictogram = ({ variant = 'brand', iconName, size = 'small', classNames, attributes, forcePx }: PictogramProps) => {
+  const componentClassName = 'ds-pictogram';
+
+  const classes = formatClassString([
+    componentClassName,
+    `${componentClassName}--${variant}`,
+    `${componentClassName}--${size}`,
+    forcePx && 'ds-force-px',
+    classNames,
+  ])
+
+  return (
+    <div className={classes} {...attributes } aria-hidden="true">
+      <IconUse iconName={iconName} />
+    </div>
+  );
+};

package/components/spinner/README.md

@@ -6,7 +6,7 @@ Spinner
 
 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/spinner/spinner.scss'`
 
-<table class="docblock-argstable sb-unstyled css-v2ifgj"><thead class="docblock-argstable-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th></tr></thead><tbody class="docblock-argstable-body"><tr><td class="css-4lbn0a"><span class="css-in3yi3">variant</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"brand"</span><span class="css-o1d7ko">"secondary"</span><span class="css-o1d7ko">"primary"</span><span class="css-o1d7ko">"onBrand"</span><span class="css-o1d7ko">"onBusiness"</span><span class="css-o1d7ko">"staticBlack"</span><span class="css-o1d7ko">"staticWhite"</span></div></div></td><td><div class="css-13nzt7e"><span class="css-o1d7ko">"primary"</span></div></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">size</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"large"</span><span class="css-o1d7ko">"small"</span><span class="css-o1d7ko">"xsmall"</span></div></div></td><td><div class="css-13nzt7e"><span class="css-o1d7ko">"large"</span></div></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">forcePx</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">boolean</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">classNames</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">attributes</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">object</span></div></div></td><td><span>-</span></td></tr></tbody></table>
+<table class="docblock-argstable sb-unstyled css-v2ifgj"><thead class="docblock-argstable-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th></tr></thead><tbody class="docblock-argstable-body"><tr><td class="css-4lbn0a"><span class="css-in3yi3">variant</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"primary"</span><span class="css-o1d7ko">"secondary"</span><span class="css-o1d7ko">"brand"</span><span class="css-o1d7ko">"onBrand"</span><span class="css-o1d7ko">"onBusiness"</span><span class="css-o1d7ko">"staticBlack"</span><span class="css-o1d7ko">"staticWhite"</span></div></div></td><td><div class="css-13nzt7e"><span class="css-o1d7ko">"primary"</span></div></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">size</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"large"</span><span class="css-o1d7ko">"small"</span><span class="css-o1d7ko">"xsmall"</span></div></div></td><td><div class="css-13nzt7e"><span class="css-o1d7ko">"large"</span></div></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">forcePx</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">boolean</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">classNames</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">attributes</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">object</span></div></div></td><td><span>-</span></td></tr></tbody></table>
 
 <pre class="prismjs css-4zr3vl"><div class="language-jsx css-zye6j" style="white-space: pre;"><span class="token tag punctuation">&lt;</span><span class="token tag class-name">Spinner</span><span class="token tag">
 </span><span class="token tag">  </span><span class="token tag attr-name">size</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">large</span><span class="token tag attr-value punctuation">"</span><span class="token tag">

package/index.d.ts

@@ -0,0 +1,4 @@
+declare module '\*.svg' {
+  const filePathString: string
+  export default filePathString
+}

package/index.tsx

@@ -18,3 +18,12 @@ export { Footer };
 
 import { Spinner } from "./components/spinner/spinner";
 export { Spinner };
+
+import { IconWithWrapper } from "./components/icon-with-wrapper/icon-with-wrapper";
+export { IconWithWrapper };
+
+import { IconSprite } from "./components/icon-sprite/icon-sprite";
+export { IconSprite };
+
+import { IconUse } from "./components/icon-sprite/icon-sprite";
+export { IconUse };

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "21.1.9",
+  "version": "21.1.10",
   "description": "DN design system for web.",
   "main": "index.tsx",
   "type": "module",
   "source": "index.tsx",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",
+  "types": "./@types/index.d.ts",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/BonnierNews/dn-design-system.git",
@@ -21,10 +22,7 @@
       "import": "./preact/components.esm.js",
       "require": "./preact/components.cjs"
     },
-    "./react": {
-      "import": "./react/components.esm.js",
-      "require": "./react/components.cjs"
-    },
+    "./@types": "./@types",
     "./assets/*.tsx": "./assets/*.tsx",
     "./assets/*.njk": "./assets/*.njk",
     "./assets/*.scss": "./assets/*.scss",
@@ -37,19 +35,11 @@
     "./package.json": "./package.json"
   },
   "peerDependencies": {
-    "preact": "^10.24.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "preact": "^10.24.0"
   },
   "peerDependenciesMeta": {
     "preact": {
       "optional": true
-    },
-    "react": {
-      "optional": true
-    },
-    "react-dom": {
-      "optional": true
     }
   },
   "devDependencies": {
@@ -60,8 +50,6 @@
     "conventional-changelog-conventionalcommits": "^6.1.0",
     "postcss": "8.4.31",
     "preact": "^10.24.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
     "release-it": "^17.0.0",
     "stylelint": "^15.11.0",
     "stylelint-config-recommended-scss": "^13.1.0",