@stihl-design-system/components 1.0.0-RC.0 → 1.0.0-RC.10

package/{logo.e6576fe3.js → logo.CEO6OV7u.js}

@@ -1,32 +1,31 @@
-import "./assets/Logo.09e48e82.css";
-import { j as a } from "./chunks/jsx-runtime.5c071667.js";
-import { c as o } from "./chunks/index.8021d3e0.js";
-const v = "_anchor_115us_25", k = "_svg_115us_26", e = "_anchor--dark_115us_65", d = "_svg-background_115us_96", u = "_svg-background--dark_115us_99", x = "_svg-text_115us_102", i = "_svg-text--dark_115us_105", s = {
-  anchor: v,
-  svg: k,
-  "anchor--dark": "_anchor--dark_115us_65",
-  anchorDark: e,
-  "svg-background": "_svg-background_115us_96",
-  svgBackground: d,
-  "svg-background--dark": "_svg-background--dark_115us_99",
+"use client";
+import { j as a } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as o } from "./chunks/index.CvOaL64Y.js";
+import './assets/logo.pETQEsvZ.css';const d = "_anchor_q0uqp_76", e = "_svg_q0uqp_77", k = "_svg-background_q0uqp_117", u = "_svg-background--dark_q0uqp_120", x = "_svg-text_q0uqp_123", q = "_svg-text--dark_q0uqp_126", s = {
+  anchor: d,
+  svg: e,
+  "svg-background": "_svg-background_q0uqp_117",
+  svgBackground: k,
+  "svg-background--dark": "_svg-background--dark_q0uqp_120",
   svgBackgroundDark: u,
-  "svg-text": "_svg-text_115us_102",
+  "svg-text": "_svg-text_q0uqp_123",
   svgText: x,
-  "svg-text--dark": "_svg-text--dark_115us_105",
-  svgTextDark: i
-}, T = ({
+  "svg-text--dark": "_svg-text--dark_q0uqp_126",
+  svgTextDark: q
+}, m = ({
   aria: n,
-  className: g,
-  href: r,
-  target: h = "_self",
-  theme: _ = "light",
-  ...l
+  className: t,
+  href: g,
+  target: l = "_self",
+  theme: v = "light",
+  variant: _ = "standard",
+  ...h
 }) => {
-  const c = _ === "dark", t = /* @__PURE__ */ a.jsxs(
+  const r = _ === "background" || v === "dark", c = /* @__PURE__ */ a.jsxs(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
-      className: o(s.svg, !r && g),
+      className: o(s.svg, !g && t),
       viewBox: "0 0 408 179",
       width: "100%",
       height: "100%",
@@ -35,34 +34,32 @@ const v = "_anchor_115us_25", k = "_svg_115us_26", e = "_anchor--dark_115us_65",
         /* @__PURE__ */ a.jsx(
           "path",
           {
-            className: c ? s.svgBackgroundDark : s.svgBackground,
+            className: r ? s.svgBackgroundDark : s.svgBackground,
             d: "M408 0H0v179h408V0Z"
           }
         ),
         /* @__PURE__ */ a.jsx(
           "path",
           {
-            className: c ? s.svgTextDark : s.svgText,
+            className: r ? s.svgTextDark : s.svgText,
             d: "M195.459 56.314h-61.656l-4.936 16.193h20.668l-15.304 50.179h20.106l15.293-50.18h20.893l4.936-16.192ZM62.286 66.62l-5.353 17.558c-2.384 7.814 1.957 13.531 9.637 13.531h25.065a1.626 1.626 0 0 1 1.288.7 1.638 1.638 0 0 1 .207 1.454l-1.349 4.42a3.37 3.37 0 0 1-2.8 2.154H49.624l-4.993 16.249h50.816c5.622 0 10.39-2.605 12.842-10.645l5.094-16.677c2.406-7.894-2.081-13.532-9.086-13.532H79.108c-1.394 0-1.945-1.015-1.563-2.255l1.35-4.42a3.385 3.385 0 0 1 1.185-1.872 3.368 3.368 0 0 1 2.087-.733h36.253l4.937-16.193H75.251c-6.87-.045-11.155 4.364-12.965 10.261ZM320.571 106.493l15.304-50.18h-20.218l-20.23 66.373h63.017l4.936-16.193h-42.809ZM282.653 56.314l-7.771 25.484H250.83l7.77-25.484h-19.319l-20.23 66.372h19.308l7.736-25.372h24.053l-7.725 25.372h19.836l20.23-66.372h-19.836ZM205.917 56.314l-20.229 66.372h20.218l20.23-66.372h-20.219Z"
           }
         )
       ]
     }
   );
-  return r ? /* @__PURE__ */ a.jsx(
+  return g ? /* @__PURE__ */ a.jsx(
     "a",
     {
-      className: o(s.anchor, g, {
-        [s.anchorDark]: c
-      }),
-      href: r,
-      target: h,
+      className: o(s.anchor, t),
+      href: g,
+      target: l,
       ...n,
-      ...l,
-      children: t
+      ...h,
+      children: c
     }
-  ) : t;
+  ) : c;
 };
 export {
-  T as DSLogo
+  m as DSLogo
 };

package/notification.BAS13UQ6.js

@@ -0,0 +1,9 @@
+"use client";
+import "./chunks/jsx-runtime.C115EyI4.js";
+import "./chunks/index.CvOaL64Y.js";
+import "./button.DH0h6uPs.js";
+import "./chunks/Icon.C2o2seDb.js";
+import { D as e } from "./chunks/Notification.BhwbaXqk.js";
+export {
+  e as DSNotification
+};

package/notification.d.ts

@@ -0,0 +1 @@
+export * from './components/Notification/Notification'

package/optioncheckbox.DZWwtx6f.js

@@ -0,0 +1,43 @@
+"use client";
+import { j as o } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as s } from "./chunks/index.CvOaL64Y.js";
+import { D as _ } from "./chunks/Icon.C2o2seDb.js";
+import './assets/optioncheckbox.BJJAph5_.css';const l = "_root_oj6mx_151", i = "_root--disabled_oj6mx_172", k = "_checkbox_oj6mx_176", d = "_icon-check_oj6mx_192", n = "_checkbox--checked_oj6mx_213", r = "_checkbox--disabled_oj6mx_216", m = "_label_oj6mx_233", c = {
+  root: l,
+  "root--disabled": "_root--disabled_oj6mx_172",
+  rootDisabled: i,
+  checkbox: k,
+  "icon-check": "_icon-check_oj6mx_192",
+  iconCheck: d,
+  "checkbox--checked": "_checkbox--checked_oj6mx_213",
+  checkboxChecked: n,
+  "checkbox--disabled": "_checkbox--disabled_oj6mx_216",
+  checkboxDisabled: r,
+  label: m
+}, D = ({
+  label: x,
+  checked: h,
+  className: a,
+  disabled: e
+}) => {
+  const b = s(c.root, {
+    [c.rootDisabled]: e
+  }), t = s(c.checkbox, {
+    [c.checkboxDisabled]: e,
+    [c.checkboxChecked]: h
+  });
+  return /* @__PURE__ */ o.jsx("div", { className: a, children: /* @__PURE__ */ o.jsxs("div", { className: b, children: [
+    /* @__PURE__ */ o.jsx("span", { className: t, children: /* @__PURE__ */ o.jsx(
+      _,
+      {
+        name: "check",
+        className: c.iconCheck,
+        "aria-hidden": "true"
+      }
+    ) }),
+    /* @__PURE__ */ o.jsx("span", { className: c.label, children: x })
+  ] }) });
+};
+export {
+  D as OptionCheckbox
+};

package/package.json

@@ -1,9 +1,18 @@
 {
   "name": "@stihl-design-system/components",
   "private": false,
-  "version": "1.0.0-RC.0",
+  "version": "1.0.0-RC.10",
   "license": "SEE LICENSE IN LICENSE",
-  "homepage": "https://designsystem.stihl.de",
+  "homepage": "https://main--63440bbb95889041542a5ba3.chromatic.com",
+  "keywords": [
+    "stihl",
+    "design",
+    "system",
+    "web",
+    "component",
+    "library",
+    "react"
+  ],
   "publishConfig": {
     "access": "public",
     "@stihl-design-system:registry": "https://registry.npmjs.org"
@@ -40,7 +49,7 @@
     "dev": "npm run storybook",
     "prebuild": "npm run build:propsOverview",
     "build": "npm run build:components && npm run build:storybook",
-    "build:components": "tsc && vite build && npm run build:copyUtilitiesBuild && npm run build:copyTypes && cp package.json ./dist",
+    "build:components": "tsc && vite build && npm run build:copyUtilitiesBuild && npm run build:copyTypes && cp package.json ./dist && npx vite-node scripts/cleanDistPackageJSON.ts",
     "build:copyComponents": "npm run build:components && ../../copyDistToExampleApps.sh '../../'",
     "build:copyTypes": "TARGET=./dist/types && rm -rf $TARGET && mkdir -p $TARGET && cp -r ./src/types/* $TARGET/",
     "build:copyUtilitiesBuild": "npm run build:copyUtilitiesBuild:scss && npm run build:copyUtilitiesBuild:fonts && npm run build:copyUtilitiesBuild:partials",
@@ -48,10 +57,10 @@
     "build:copyUtilitiesBuild:fonts": "TARGET=./dist/styles/fonts && rm -rf $TARGET && mkdir -p $TARGET && cp -r ../utilities/dist/fonts/* $TARGET/",
     "build:copyUtilitiesBuild:partials": "TARGET=./dist/partials && rm -rf $TARGET && mkdir -p $TARGET && cp -r ../utilities/dist/partials/* $TARGET/",
     "build:storybook": "storybook build",
-    "build:propsOverview": "EXCLUDED_COMPS=**/Asterisk.tsx,**/CustomReactSelect.tsx,**/OptionCheckbox.tsx,**/SystemFeedback.tsx,**/Radio.tsx && react-docgen ./src/components/**/*.tsx -o ./src/stories/Introduction/component-props.json -i **/*.test.tsx,**/*.utils.tsx,$EXCLUDED_COMPS",
+    "build:propsOverview": "npx vite-node scripts/generatePropsOverview.ts",
     "release": "cp package.json LICENSE.md README.md ./dist && cd dist && npm publish",
     "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006 --no-open",
     "sync": "npm run build && anima-storybook sync",
     "lint": "eslint -c .eslintrc.cjs './src/**/*.{ts,tsx}'",
     "pretest:smoke": "npm run build:components && npm run build:propsOverview",
@@ -65,61 +74,67 @@
     "test:vrt": "npx playwright test --config=playwright.config.vrt.ts"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.2",
+    "@babel/core": "^7.24.9",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.0",
     "@juggle/resize-observer": "^3.4.0",
-    "@playwright/test": "^1.39.0",
+    "@playwright/test": "^1.46.0",
     "@react-docgen/cli": "^2.0.3",
-    "@storybook/addon-a11y": "^8.0.6",
-    "@storybook/addon-actions": "^8.0.6",
-    "@storybook/addon-essentials": "^8.0.6",
-    "@storybook/addon-interactions": "^8.0.6",
-    "@storybook/addon-links": "^8.0.6",
-    "@storybook/blocks": "^8.0.6",
-    "@storybook/react": "^8.0.6",
-    "@storybook/react-vite": "^8.0.6",
-    "@storybook/test": "^8.0.6",
-    "@storybook/test-runner": "^0.17.0",
-    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.0.0",
-    "@types/node": "^20.8.8",
-    "@types/react": "^18.2.31",
-    "@types/react-dom": "^18.2.14",
-    "@types/react-syntax-highlighter": "^15.5.11",
-    "@typescript-eslint/eslint-plugin": "^6.9.0",
-    "@typescript-eslint/parser": "^6.9.0",
-    "@vitejs/plugin-react": "^4.1.0",
+    "@storybook/addon-a11y": "^8.2.4",
+    "@storybook/addon-actions": "^8.2.4",
+    "@storybook/addon-essentials": "^8.2.4",
+    "@storybook/addon-interactions": "^8.2.4",
+    "@storybook/addon-links": "^8.2.4",
+    "@storybook/blocks": "^8.2.4",
+    "@storybook/core-events": "^8.2.4",
+    "@storybook/manager-api": "^8.2.4",
+    "@storybook/preview-api": "^8.2.4",
+    "@storybook/react": "^8.2.4",
+    "@storybook/react-vite": "^8.2.4",
+    "@storybook/test": "^8.2.4",
+    "@storybook/test-runner": "^0.19.1",
+    "@storybook/theming": "^8.2.4",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
+    "@types/node": "^20.14.10",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@typescript-eslint/eslint-plugin": "^7.9.0",
+    "@typescript-eslint/parser": "^7.9.0",
+    "@vitejs/plugin-react": "^4.3.1",
     "anima-storybook-cli": "^0.13.1",
-    "axe-playwright": "^1.2.3",
+    "axe-playwright": "^2.0.1",
     "babel-loader": "^9.1.3",
-    "change-case": "^5.1.2",
-    "classnames": "^2.3.2",
+    "change-case": "^5.4.4",
+    "classnames": "^2.5.1",
     "concurrently": "^8.2.2",
-    "eslint": "^8.52.0",
+    "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-storybook": "^0.8.0",
-    "globby": "^13.2.2",
+    "globby": "^14.0.2",
     "http-server": "^14.1.1",
-    "jsdom": "^22.1.0",
-    "react": "^18.x",
+    "jsdom": "^24.1.0",
+    "react": "^18.3.1",
     "react-docgen": "^7.0.3",
-    "react-dom": "^18.x",
-    "react-intersection-observer": "^9.5.2",
+    "react-dom": "^18.3.1",
+    "react-intersection-observer": "^9.13.0",
     "react-syntax-highlighter": "^15.5.0",
-    "sass": "^1.69.4",
-    "storybook": "^8.0.6",
-    "typescript": "^5.2.2",
-    "vite": "^4.5.0",
-    "vite-plugin-dts": "^3.6.1",
+    "sass": "^1.77.8",
+    "storybook": "^8.2.4",
+    "typescript": "^5.4.5",
+    "vite": "^5.3.4",
+    "vite-plugin-dts": "^3.9.1",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-lib-inject-css": "^1.3.0",
-    "vite-plugin-svgr": "^3.3.0",
-    "vitest": "^0.34.6"
+    "vite-plugin-lib-inject-css": "^2.1.1",
+    "vite-plugin-svgr": "^4.2.0",
+    "vitest": "^2.0.3"
   },
   "peerDependencies": {
-    "classnames": "^2.3.2",
+    "classnames": "^2.5.1",
     "react": ">=17.0.0 <19.0.0",
     "react-dom": ">=17.0.0 <19.0.0",
-    "react-intersection-observer": "^9.5.2",
+    "react-intersection-observer": "^9.10.2",
     "react-select": "^5.8.0"
   }
 }

package/partials/connected-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" fill="none"><g clip-path="url(#a)"><path fill="#fff" d="M0 0h512v512H0z"/><mask id="b" width="512" height="512" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M512 0H0v512h512V0Z"/></mask><g mask="url(#b)"><path fill="#F37A1F" d="M517-5H-5v522h522V-5Z"/></g><mask id="d" width="320" height="349" x="95" y="81" maskUnits="userSpaceOnUse" style="mask-type:luminance"><mask id="c" width="512" height="512" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M512 0H0v512h512V0Z"/></mask><g mask="url(#c)"><path fill="#fff" d="M366.8 304.04c-17.69 35.56-54.39 60.01-96.8 60.04-57.87.04-105.97-46.12-108.17-103.95-2.35-61.65 46.94-112.38 108.08-112.38 42.34 0 78.99 24.33 96.75 59.77l48.01-48.01C383.36 112.57 329.82 81.73 269.1 82c-96.25.44-174.4 80.08-173.09 176.33 1.28 94.95 78.65 171.51 173.9 171.51 60.49 0 113.77-30.89 144.93-77.76l-48.04-48.04Z"/></g></mask><g mask="url(#d)"><path fill="#fff" d="M419.85 77H91v357.84h328.85V77Z"/></g><mask id="f" width="133" height="173" x="224" y="169" maskUnits="userSpaceOnUse" style="mask-type:luminance"><mask id="e" width="512" height="512" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M512 0H0v512h512V0Z"/></mask><g mask="url(#e)"><path fill="#fff" d="M320.14 257.37c-.92-.92-.92-2.41 0-3.32l36.3-36.3c-9.38-21.21-26.31-38.31-47.39-47.92l-84.21 84.21c-.92.91-.92 2.4 0 3.32l84.5 84.5c21.05-9.67 37.93-26.83 47.23-48.07l-36.43-36.43"/></g></mask><g mask="url(#f)"><path fill="#fff" d="M361.56 164.84H219.14v182.04h142.42V164.84Z"/></g></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h512v512H0z"/></clipPath></defs></svg>

package/partials/copyAssets.js

@@ -1,6 +1,7 @@
 import fs from 'fs';
 import path from 'path';
-const NEXT_WITH_APP_ROUTER_MODE = 'nextWithAppRouter';
+export const NEXT_WITH_APP_ROUTER_MODE = 'nextWithAppRouter';
+export const SUPPORTED_PRODUCTS = ['imow', 'mystihl', 'connected'];
 
 const copyFile = (source, destination) => {
   try {
@@ -11,7 +12,13 @@ const copyFile = (source, destination) => {
   }
 };
 
-const copyAssets = (copyDirectory, mode) => {
+export const copyAssets = (copyDirectory, mode, product) => {
+  if (product !== 'default' && !SUPPORTED_PRODUCTS.includes(product)) {
+    throw new Error(
+      `[STIHL Design System] - [Meta Icons]: You passed the product name "${product}" as an argument, which is not supported. Supported product name arguments are: [${SUPPORTED_PRODUCTS.join(', ')}]. Please check our Meta Icons Partial documentation: https://main--63440bbb95889041542a5ba3.chromatic.com/?path=/docs/utilities-partials-meta-icons--documentation`
+    );
+  }
+
   // Define the source and destination directories
   const sourceDir = path.resolve(
     'node_modules',
@@ -26,11 +33,11 @@ const copyAssets = (copyDirectory, mode) => {
 
   // Array of file names to copy
   const filesToCopy = [
-    'apple-icon.png',
-    'favicon.ico',
-    'icon-192.png',
-    'icon-512.png',
-    'icon.svg',
+    `${product}-apple-icon.png`,
+    `${product}-favicon.ico`,
+    `${product}-icon-192.png`,
+    `${product}-icon-512.png`,
+    `${product}-icon.svg`,
     mode === NEXT_WITH_APP_ROUTER_MODE
       ? 'manifest.json'
       : 'manifest.webmanifest',
@@ -49,21 +56,23 @@ const copyAssets = (copyDirectory, mode) => {
     let fileName = file;
     // adjustments for next with app router
     if (mode === NEXT_WITH_APP_ROUTER_MODE) {
-      if (file === 'icon-192.png') {
+      if (file === `${product}-icon-192.png`) {
         fileName = 'icon2.png';
-      } else if (file === 'icon-512.png') {
+      } else if (file === `${product}-icon-512.png`) {
         fileName = 'icon1.png';
       } else if (file === 'manifest.json') {
         fileName = 'manifest.webmanifest';
       }
     }
-    const destFile = path.join(destDir, fileName);
+
+    // remove product from final file name
+    const destFile = path.join(destDir, fileName.replace(`${product}-`, ''));
 
     if (fs.existsSync(sourceFile)) {
       copyFile(sourceFile, destFile);
       console.log(`Copied ${file} to ${destDir}`);
     } else {
-      console.error(`Source file ${sourceFile} does not exist.`);
+      throw Error(`Source file ${sourceFile} does not exist.`);
     }
   });
   console.log('\x1b[32m%s\x1b[0m', 'SUCCESS - Copying Meta Icon Assets');
@@ -74,11 +83,14 @@ const args = process.argv;
 // Extract directory argument
 const dirArg = args.find((arg) => arg.startsWith('--dir='));
 const copyDirectory = dirArg ? dirArg.replace('--dir=', '') : './';
+// Extract product argument
+const productArg = args.find((arg) => arg.startsWith('--product='));
+const product = productArg ? productArg.replace('--product=', '') : 'default';
 
 const modeArg = args.find((arg) => arg.startsWith('--mode='));
 const mode = modeArg ? modeArg.replace('--mode=', '') : undefined;
 try {
-  copyAssets(copyDirectory, mode);
-} catch (e) {
+  copyAssets(copyDirectory, mode, product);
+} catch (error) {
   console.error('ERROR - Copying Meta Icon Assets:', error);
 }

package/partials/imow-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none"><path fill="#F37A1F" d="M0 0h32v32H0z"/><path fill="#fff" d="M19.122 16.501c-.224-.152-.489-.152-.753-.152h-2.636c-.52 0-.998.06-1.13.488-.092.305-.855 2.87-1.12 3.664-.04.122-.06.234-.06.326 0 .295.162.448.304.55.214.152.489.152.754.152h2.636c.519 0 .987-.061 1.12-.488.09-.316.864-2.87 1.129-3.664a.963.963 0 0 0 .05-.316c0-.295-.162-.458-.294-.56Zm-1.364 1.252-.733 2.382c-.05.132-.163.132-.234.132h-1.547c-.163 0-.193-.061-.163-.163l.743-2.381c.04-.143.153-.133.224-.133h1.557c.153 0 .183.061.153.163ZM24.475 19.433l-.03-3.084H23.04l-1.75 3.002-.02-3.002h-1.334l.01 5.18h1.608l1.588-2.84-.03 2.84h1.669l3.226-5.18h-1.71l-1.822 3.084ZM3.723 16.349l-.39 1.26h1.538l.389-1.26H3.723ZM2.125 21.529h1.537l.987-3.202H3.113l-.988 3.202ZM11.295 16.349l-1.903 3.043-.153-3.043H6.817l-1.639 5.18h1.486l1.221-3.888.214 3.888h1.364l2.504-3.888-1.211 3.888h1.486l1.598-5.18h-2.545ZM29.104 16.034a.76.76 0 0 0-.771.771.76.76 0 0 0 .77.772.76.76 0 0 0 .772-.772.76.76 0 0 0-.771-.77Zm0 1.433a.646.646 0 0 1-.651-.662c0-.369.277-.661.65-.661.374 0 .652.292.652.662 0 .369-.278.661-.651.661Z"/><path fill="#fff" d="M29.456 16.606c0-.16-.089-.247-.29-.247h-.342v.892h.11v-.396h.184l.251.396h.129l-.266-.396c.12-.02.224-.091.224-.249Zm-.377.156h-.145v-.31h.2c.109 0 .212.03.212.154 0 .151-.132.156-.267.156ZM7.753 13.047l1.615-2.578h2.163l-1.353 4.394H8.917l1.024-3.297-2.121 3.297H6.662l-.183-3.297-1.036 3.297H4.182l1.343-4.394h2.1l.128 2.578ZM14.589 10.469H16.1l-2.428 2.907-.455 1.487h-1.304l.463-1.506-.664-2.888h1.213l.323 1.664 1.34-1.664Z"/></svg>