Test neue pictofont

gfi-ihk-2024/stories/styleguide/icon-grid/IconGridComponent.js

@@ -0,0 +1,28 @@
+import './icon-grid.scss';
+import {createElement} from "../../_global/scripts/helpers";
+
+export const extractGlyphClassNames = (scssSource, prefix) => {
+  const pattern = new RegExp(`\\.(${prefix}-[a-zA-Z0-9_-]+):before`, 'g');
+  const names = [];
+  const seen = new Set();
+  let match;
+  while ((match = pattern.exec(scssSource)) !== null) {
+    if (!seen.has(match[1])) {
+      seen.add(match[1]);
+      names.push(match[1]);
+    }
+  }
+  return names;
+};
+
+export const createIconGrid = ({classNames = [], variant = 'pictograms'} = {}) => {
+  const grid = createElement('div', ['icon-grid', `icon-grid--${variant}`]);
+
+  classNames.forEach((className) => {
+    const item = createElement('div', ['icon-grid__item'], null, grid);
+    createElement('span', ['icon-grid__glyph', className], null, item);
+    createElement('code', ['icon-grid__label'], className, item);
+  });
+
+  return grid;
+};

gfi-ihk-2024/stories/styleguide/icon-grid/icon-grid.scss

@@ -0,0 +1,44 @@
+.icon-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 10px;
+    width: 140px;
+    padding: 16px 8px;
+    border: 1px solid var(--theme-color-primary-dimmed-03);
+    border-radius: var(--border-radius-xs);
+    text-align: center;
+  }
+
+  &__glyph {
+    display: block;
+    height: 40px;
+    line-height: 40px;
+    font-size: 32px;
+  }
+
+  &--pictograms &__glyph {
+    font-family: 'Pictograms', sans-serif;
+  }
+
+  &--icons &__glyph {
+    font-family: 'Icons', sans-serif;
+  }
+
+  &--pictograms-new &__glyph {
+    font-family: 'PictogramsNew', sans-serif;
+  }
+
+  &__label {
+    font-size: 12px;
+    line-height: 1.4;
+    word-break: break-word;
+    color: var(--theme-color-primary);
+  }
+}

gfi-ihk-2024/stories/styleguide/icons/Icons.stories.js

@@ -0,0 +1,17 @@
+import {createIconGrid, extractGlyphClassNames} from "../icon-grid/IconGridComponent";
+import iconsScss from "../../_global/styles/icons.scss?raw";
+
+const iconClassNames = extractGlyphClassNames(iconsScss, 'icon');
+
+export default {
+  title: 'Styleguide/Icons',
+  parameters: {
+    docs: {
+      description: {
+        component: `Alle Icons aus \`icons.scss\` (${iconClassNames.length} Stück), automatisch generiert.`,
+      },
+    },
+  },
+};
+
+export const AlleIcons = () => createIconGrid({classNames: iconClassNames, variant: 'icons'});

gfi-ihk-2024/stories/styleguide/pictograms-new/PictogramsNew.stories.js

@@ -0,0 +1,23 @@
+import "./pictograms-new.scss";
+import {createIconGrid, extractGlyphClassNames} from "../icon-grid/IconGridComponent";
+import pictogramsScss from "../../_global/styles/pictograms.scss?raw";
+
+// pictonew liefert keine eigene Namens-Zuordnung, nur die Font-Dateien.
+// Codepoints sind identisch zu pictograms.scss, bis auf pictogram-ihk-gebaeude (fehlt in pictonew).
+const MISSING_IN_PICTONEW = ['pictogram-ihk-gebaeude'];
+
+const pictogramNames = extractGlyphClassNames(pictogramsScss, 'pictogram')
+  .filter((name) => !MISSING_IN_PICTONEW.includes(name));
+
+export default {
+  title: 'Styleguide/Pictograms (pictonew)',
+  parameters: {
+    docs: {
+      description: {
+        component: `Vorschau der Piktogramm-Schrift aus \`stories/assets/fonts/pictonew\` (${pictogramNames.length} Stück). Die Namen sind aus \`pictograms.scss\` übernommen, da pictonew selbst keine Zuordnung mitliefert.`,
+      },
+    },
+  },
+};
+
+export const AllePiktogrammeNeu = () => createIconGrid({classNames: pictogramNames, variant: 'pictograms-new'});

gfi-ihk-2024/stories/styleguide/pictograms-new/pictograms-new.scss

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: 'PictogramsNew';
+  src: url('../../assets/fonts/pictonew/pictograms.woff') format('woff');
+  font-style: normal;
+  font-weight: normal;
+  font-display: block;
+}

gfi-ihk-2024/stories/styleguide/pictograms/Pictograms.stories.js

@@ -0,0 +1,17 @@
+import {createIconGrid, extractGlyphClassNames} from "../icon-grid/IconGridComponent";
+import pictogramsScss from "../../_global/styles/pictograms.scss?raw";
+
+const pictogramClassNames = extractGlyphClassNames(pictogramsScss, 'pictogram');
+
+export default {
+  title: 'Styleguide/Pictograms',
+  parameters: {
+    docs: {
+      description: {
+        component: `Alle Piktogramme aus \`pictograms.scss\` (${pictogramClassNames.length} Stück), automatisch generiert.`,
+      },
+    },
+  },
+};
+
+export const AllePiktogramme = () => createIconGrid({classNames: pictogramClassNames, variant: 'pictograms'});

gfi-ihk-2024/storybook-static/project.json

@@ -1 +1 @@
-{"generatedAt":1783417647078,"userSince":1779979151025,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":false,"refCount":0,"knownPackages":{"testPackages":{"@storybook/addon-vitest":"10.4.6","@vitest/browser-playwright":"4.1.9","@vitest/coverage-v8":"4.1.9","playwright":"1.61.1","vitest":"4.1.9"},"stylingPackages":{"sass":"^1.100.0"}},"hasRouterPackage":false,"packageManager":{"type":"npm","agent":"npm","nodeLinker":"node_modules"},"preview":{"usesGlobals":true},"framework":{"name":"@storybook/html-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/html","portableStoriesFileCount":1,"applicationFileCount":60,"storybookVersion":"10.4.6","storybookVersionSpecifier":"10.4.6","language":"javascript","storybookPackages":{"@storybook/html-vite":{"version":"10.4.6"},"storybook":{}},"addons":{"@storybook/addon-links":{"version":"10.4.6"},"@storybook/addon-docs":{"version":"10.4.6"},"@storybook/addon-vitest":{"version":"10.4.6"},"@storybook/addon-a11y":{"version":"10.4.6"},"@chromatic-com/storybook":{"version":"5.2.1"}},"packageJsonType":"unknown"}
+{"generatedAt":1783419226591,"userSince":1779979151025,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":false,"refCount":0,"knownPackages":{"testPackages":{"@storybook/addon-vitest":"10.4.6","@vitest/browser-playwright":"4.1.9","@vitest/coverage-v8":"4.1.9","playwright":"1.61.1","vitest":"4.1.9"},"stylingPackages":{"sass":"^1.100.0"}},"hasRouterPackage":false,"packageManager":{"type":"npm","agent":"npm","nodeLinker":"node_modules"},"preview":{"usesGlobals":true},"framework":{"name":"@storybook/html-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/html","portableStoriesFileCount":1,"applicationFileCount":60,"storybookVersion":"10.4.6","storybookVersionSpecifier":"10.4.6","language":"javascript","storybookPackages":{"@storybook/html-vite":{"version":"10.4.6"},"storybook":{}},"addons":{"@storybook/addon-links":{"version":"10.4.6"},"@storybook/addon-docs":{"version":"10.4.6"},"@storybook/addon-vitest":{"version":"10.4.6"},"@storybook/addon-a11y":{"version":"10.4.6"},"@chromatic-com/storybook":{"version":"5.2.1"}},"packageJsonType":"unknown"}