From 13a0b5876e5a2a2133170eebacab006c31b47321 Mon Sep 17 00:00:00 2001
From: Florian Eisenmenger <floeis@MacBook-Pro-von-Florian.local>
Date: Fri, 23 Feb 2024 13:22:23 +0100
Subject: [PATCH] How to List: pictogram statt image

---
 .../howto-list/HowToListComponent.js          |  2 +-
 .../components/howto-list/HowToListData.js    |  6 +++---
 .../components/howto-list/howto-list.scss     | 21 +++++++++++++++++--
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/gfi-ihk-2024/stories/components/howto-list/HowToListComponent.js b/gfi-ihk-2024/stories/components/howto-list/HowToListComponent.js
index 1a49c46..7a50845 100644
--- a/gfi-ihk-2024/stories/components/howto-list/HowToListComponent.js
+++ b/gfi-ihk-2024/stories/components/howto-list/HowToListComponent.js
@@ -16,7 +16,7 @@ export const createHowToList =
     listItems.map((item) => {
       const li = createElement('li', [], null, ul);
       const a = createElement('a', [], null, li);
-      createImage(item.icon, 100, 100, '', [], a);
+      createElement('div', ['pictogram', item.icon], null, a);
       createElement('h3', [], item.headline, a);
       createElement('p', [], item.text, a);
       createElement('span', [], item.more, a);
diff --git a/gfi-ihk-2024/stories/components/howto-list/HowToListData.js b/gfi-ihk-2024/stories/components/howto-list/HowToListData.js
index 2e17d69..f041d21 100644
--- a/gfi-ihk-2024/stories/components/howto-list/HowToListData.js
+++ b/gfi-ihk-2024/stories/components/howto-list/HowToListData.js
@@ -4,20 +4,20 @@ export const howToListData = [
     text: 'Ihr Unternehmen ist IHK-Mitglied? Dann bekommen Sie automatisch am  12.02.2024 die Wahlunterlagen zugesandt.',
     more: 'Mehr erfahren',
     link: '#',
-    icon: './dummy/howto-list-01.svg',
+    icon: 'pictogram-bueroklammer',
   },
   {
     headline: '2. Kandidat:innen',
     text: 'Informieren Sie sich über die Kandidat:innen und deren Programm um Ihre Entscheidung zu fällen.',
     more: 'Mehr erfahren',
     link: '#',
-    icon: './dummy/howto-list-02.svg',
+    icon: 'pictogram-fabrik',
   },
   {
     headline: '3. Stimmabgabe',
     text: 'Geben Sie Ihre Stimmen auf den Ihnen zugesandten Unterlagen ab und schicken sie diese mit dem Rückumschlag an uns.',
     more: 'Mehr erfahren',
     link: '#',
-    icon: './dummy/howto-list-03.svg',
+    icon: 'pictogram-diagramm-wachstum',
   },
 ]
diff --git a/gfi-ihk-2024/stories/components/howto-list/howto-list.scss b/gfi-ihk-2024/stories/components/howto-list/howto-list.scss
index 365a339..1683044 100644
--- a/gfi-ihk-2024/stories/components/howto-list/howto-list.scss
+++ b/gfi-ihk-2024/stories/components/howto-list/howto-list.scss
@@ -58,12 +58,29 @@
     span {
       text-decoration: underline;
     }
-    img {
+    img,
+    .pictogram {
       position: absolute;
       left: -132px;
       top: 2px;
       width: 100px;
-      height: auto;
+      height: 100px;
+      font-family: "Pictograms", sans-serif;
+      font-size: 70px;
+      line-height: 1.4285;
+      text-align: center;
+      color: var(--theme-color-primary) !important;
+      &:after {
+        content: "";
+        position: absolute;
+        z-index: -1;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        background: var(--theme-color-secondary);
+      }
       @media(max-width: 399px) {
         position: static;
         left: auto;