💄 add new icon and finalize design

Author: FabianWilms

personalization-webcomponents/package-lock.json

@@ -17,7 +17,7 @@
     "fix": "prettier . --write && eslint . --fix"
   },
   "dependencies": {
-    "@muenchen/muc-patternlab-vue": "5.2.0",
+    "@muenchen/muc-patternlab-vue": "5.3.0-beta.1",
     "@vueuse/core": "13.3.0",
     "vue": "3.5.16"
   },

personalization-webcomponents/package.json

@@ -45,10 +45,15 @@
       <div
         style="padding-top: 16px; padding-bottom: 20px;"
       >
-        <p v-for="(item) in firstThreeItemsSortedByChecked">
-          <span>{{ item.checked ? "☑️" : "🔘"}}</span>
-          <span>{{item.title}}</span>
-        </p>
+        <checklistitem-listitem
+            v-for="(item, index) in firstThreeItemsSortedByChecked"
+            :checklist-item="item"
+            :class="{
+              'pt-8': index != 0,
+              'pb-8': index != firstThreeItemsSortedByChecked.length - 1
+            }"
+        >
+        </checklistitem-listitem>
       </div>
 
       <div>
@@ -64,6 +69,7 @@ import {MucCard} from "@muenchen/muc-patternlab-vue";
 import type DummyChecklist from "@/api/dummyservice/DummyChecklist.ts";
 import MucChip from "@/components/common/muc-chip.vue";
 import {computed} from "vue";
+import ChecklistitemListitem from "@/components/checklistitem-listitem.vue";
 
 const props = defineProps<{
   checklist: DummyChecklist;
@@ -83,3 +89,12 @@ const firstThreeItemsSortedByChecked = computed(() => {
 });
 
 </script>
+
+<style>
+.pt-8 {
+  padding-top: 8px;
+}
+.pb-8 {
+  padding-bottom: 8px;
+}
+</style>

personalization-webcomponents/src/components/ChecklistCard.vue

@@ -0,0 +1,30 @@
+<template>
+  <div
+      class="circle"
+      :class="checked ? 'checked' : ''"
+  >
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import {MucIcon} from "@muenchen/muc-patternlab-vue";
+
+const props = defineProps<{
+  checked: boolean;
+}>();
+
+</script>
+
+<style scoped>
+.circle {
+  width: 20px;
+  height: 20px;
+  border-radius: 24px;
+  border: 2px solid var(--color-brand-main-blue);
+}
+
+.circle.checked {
+  background-color: var(--color-brand-main-blue);
+}
+</style>

personalization-webcomponents/src/components/checklist-checked-circle.vue

@@ -0,0 +1,29 @@
+<template>
+  <div style="display: flex; align-items: center;">
+    <checklist-checked-circle
+        style="margin-right: 12px;"
+        :checked="!!checklistItem.checked">
+    </checklist-checked-circle>
+    <div class="item-title">
+      {{ checklistItem.title }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import type DummyChecklistItem from "@/api/dummyservice/DummyChecklistItem.ts";
+import ChecklistCheckedCircle from "@/components/checklist-checked-circle.vue";
+
+const props = defineProps<{
+  checklistItem: DummyChecklistItem;
+}>();
+
+</script>
+
+<style scoped>
+.item-title {
+  font-family: "Open Sans", "sans-serif";
+  font-size: 18px ;
+}
+</style>

personalization-webcomponents/src/components/checklistitem-listitem.vue

@@ -4,7 +4,12 @@
     <div v-html="mucIconsSprite"/>
     <!-- eslint-disable-next-line vue/no-v-html -->
     <div v-html="customIconsSprite"/>
-    <h1>Aktive Checklisten ({{ checklists.length }})</h1>
+    <h1
+      style="padding-bottom: 24px;"
+    >
+      <muc-icon icon="order-bool-ascending"></muc-icon>
+      Aktive Checklisten ({{ checklists.length }})
+    </h1>
     <muc-card-container
         style="grid-template-columns: repeat(auto-fit,589px)"
     >
@@ -27,12 +32,17 @@
 import customIconsSprite from "@muenchen/muc-patternlab-vue/assets/icons/custom-icons.svg?raw";
 import mucIconsSprite from "@muenchen/muc-patternlab-vue/assets/icons/muc-icons.svg?raw";
 import {onMounted, ref} from "vue";
-import {MucCardContainer, MucCard} from "@muenchen/muc-patternlab-vue";
+import {MucCardContainer, MucIcon} from "@muenchen/muc-patternlab-vue";
 import type DummyChecklist from "@/api/dummyservice/DummyChecklist.ts";
 import DummyChecklistService from "@/api/dummyservice/DummyChecklistService.ts";
 import ChecklistCard from "@/components/ChecklistCard.vue";
 import SkeletonLoader from "@/components/common/skeleton-loader.vue";
 
+const props = defineProps<{
+  checklistDetailUrl: string,
+  newChecklistUrl: string
+}>();
+
 const checklists = ref<DummyChecklist[]>([]);
 const loading = ref(false);