@asd20/ui 3.2.995 → 3.2.996

package/src/components/atoms/icons/Asd20WebsiteSvg.vue

@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
   <g>
     <path class="fill" d="M6 10v16h20V10zm10 14a6 6 0 1 1 6-6 6 6 0 0 1-6 6z" />
     <path
@@ -12,4 +12,40 @@
       d="M6 6h1v1H6zM8 6h1v1H8zM10 6h1v1h-1zM16 24.5A6.5 6.5 0 1 0 9.5 18a6.51 6.51 0 0 0 6.5 6.5zm0-1c-.73 0-1.5-1.09-1.92-2.82h3.84c-.42 1.73-1.19 2.82-1.92 2.82zm-2.1-3.82a10.92 10.92 0 0 1 0-3.36h4.2a10.92 10.92 0 0 1 0 3.36zM18 23.1a7.6 7.6 0 0 0 1-2.42h1.8A5.53 5.53 0 0 1 18 23.1zm3.5-5.1a5.19 5.19 0 0 1-.27 1.68h-2.11a12.88 12.88 0 0 0 0-3.36h2.11A5.19 5.19 0 0 1 21.5 18zm-.7-2.68H19a7.6 7.6 0 0 0-1-2.42 5.53 5.53 0 0 1 2.8 2.42zM16 12.5c.73 0 1.5 1.09 1.92 2.82h-3.84c.42-1.73 1.19-2.82 1.92-2.82zm-2 .4a7.6 7.6 0 0 0-1 2.42h-1.8A5.53 5.53 0 0 1 14 12.9zM10.5 18a5.19 5.19 0 0 1 .27-1.68h2.11a12.88 12.88 0 0 0 0 3.36h-2.11A5.19 5.19 0 0 1 10.5 18zm2.5 2.68a7.6 7.6 0 0 0 1 2.42 5.53 5.53 0 0 1-2.76-2.42z"
     />
   </g>
+</template> -->
+
+<template>
+  <g
+    viewBox="0 0 32 40"
+    width="128"
+    height="160"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <!-- 3/4 Circle outline (open at bottom) -->
+    <path
+      d="M6 28 a15 15 0 1 1 20 0"
+      fill="none"
+      class="line"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+    />
+    <!-- Browser window (rounded rectangle, outline color) -->
+    <rect x="7" y="9" width="18" height="15" rx="2.5" class="line" fill="currentColor"/>
+    <!-- Toolbar (top bar, cutout from window, background shows through) -->
+    <rect x="7.8" y="10" width="16.4" height="3" rx="1.2" fill="#fff"/>
+    <!-- Toolbar circles (left) -->
+    <circle cx="9.6" cy="11.7" r="0.55" class="line" fill="currentColor"/>
+    <circle cx="11.2" cy="11.7" r="0.55" class="line" fill="currentColor"/>
+    <circle cx="12.8" cy="11.7" r="0.55" class="line" fill="currentColor"/>
+    <!-- Toolbar right bar -->
+    <rect x="16.7" y="11.1" width="5.1" height="1.1" rx="0.5" class="line" fill="currentColor"/>
+    <!-- Sidebar rectangle (fill color, like a page preview) -->
+    <rect x="10" y="15" width="3" height="6" rx="1" class="fill"/>
+    <!-- Three horizontal lines (fill color, like page content) -->
+    <rect x="15" y="15.7" width="7" height="1.3" rx="0.6" class="fill"/>
+    <rect x="15" y="18.4" width="7" height="1.3" rx="0.6" class="fill"/>
+    <rect x="15" y="21.1" width="7" height="1.3" rx="0.6" class="fill"/>
+  </g>
 </template>
+

package/src/components/molecules/Asd20DepartmentContactCard/index.vue

@@ -10,7 +10,7 @@
       <p v-show="group.description">{{ group.description }}</p>
     </div>
     <asd20-list
-      icon="directory"
+      icon="group"
       :headline="expanded ? 'Contact Information' : group.title"
     >
       <Asd20ListItem
@@ -68,7 +68,7 @@ export default {
         if (this.group.description) {
           items.push({
             ...baseItemProps,
-            icon: 'info',
+            icon: 'info-alt',
             label: 'Overview',
             description: this.group.description,
           })
@@ -79,7 +79,7 @@ export default {
         if (this.group.contactName) {
           items.push({
             ...baseItemProps,
-            icon: 'group',
+            icon: 'contact',
             label: 'Contact',
             description: this.group.contactName,
           })

package/src/components/organisms/Asd20NotificationGroup/index.vue

@@ -29,41 +29,20 @@
       </transition-group>
     </transition>
 
-    <button 
+    <asd20-button
       v-if="groupType === 'floating'"
-      class="bell" 
+      class="bell"
+      icon="bell"
       :class="{ open: open }"
       :title="
         totalDismissedNotifications
           ? 'Dismiss all notifications'
           : 'Show all notifications'
       "
-      @click="$emit('toggle-all')">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 32 32"
-        aria-hidden="true"
-        role
-      >
-        <g>
-          <path
-            d="M16 7a6 6 0 0 1 6 6v7H10v-7a6 6 0 0 1 6-6z"
-            class="fill"
-          ></path>
-          <path
-            fill="currentColor"
-            d="M16 4a1 1 0 0 1 1 1v1l.75.19A7 7 0 0 1 23 13v9h1v2H8v-2h1v-9a7 7 0 0 1 5.25-6.77L15 6V5a1 1 0 0 1 1-1m0-1a2 2 0 0 0-2 2v.26A8 8 0 0 0 8 13v8H7v4h18v-4h-1v-8a8 8 0 0 0-6-7.74V5a2 2 0 0 0-2-2z"
-            class="line"
-          ></path>
-          <path
-            fill="currentColor"
-            d="M8 21h16v1H8zM18 24a4 4 0 0 1-8 0z"
-            class="line"
-          ></path>
-        </g>
-      </svg>
+      @click="$emit('toggle-all')"
+    >
       <span v-if="totalDismissedNotifications > 0" aria-hidden="true">{{ totalDismissedNotifications }}</span>
-    </button>
+    </asd20-button>
 
     <div
       v-if="showControls && notificationsFromIndex.length > 1"
@@ -99,12 +78,13 @@
 </template>
 
 <script>
+import Asd20Button from '../../atoms/Asd20Button'
 import Asd20Notification from '../../molecules/Asd20Notification'
 
 export default {
   name: 'asd20-notification-group',
 
-  components: { Asd20Notification },
+  components: { Asd20Button, Asd20Notification },
 
   props: {
     groupType: { type: String, default: 'default' },
@@ -288,15 +268,14 @@ export default {
     position: relative;
     appearance: none;
     border: none;
-    width: 2rem;
-    height: 2rem;
+    padding: 0.25rem;
     display: flex;
     justify-content: center;
     align-items: center;
     background: #ffffff;
     color: #000000;
     font-size: 0.375rem;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.0625);
+    // box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.0625);
     border-radius: 50%;
     z-index: 99;
     cursor: pointer;

package/src/components/organisms/Asd20WidgetsSection/index.vue

@@ -13,6 +13,7 @@
         v-if="relatedPages"
         class="relatedPages"
         :links="relatedPages"
+        icon="website"
         v-bind="relatedPagesProps"
         :multi-column="full"
         max-height="400px"
@@ -22,6 +23,7 @@
         v-if="relatedLinks"
         class="relatedLinks"
         :links="relatedLinks"
+        icon="link"
         v-bind="relatedLinksProps"
         :multi-column="full"
         :max-height="relatedLinks.length > 20 ? '800px' : '400px'"

package/src/design/tokens.css

@@ -1,25 +1,25 @@
 :root {
-  --color__accent-s100: #000;
-  --color__accent-s90: #01040b;
-  --color__accent-s80: #030916;
-  --color__accent-s70: #0f1c50;
-  --color__accent-s60: #12205c;
-  --color__accent-s50: #142469;
-  --color__accent-s40: #182a7a;
-  --color__accent-s30: #1b2f87;
-  --color__accent-s20: #1e3493;
-  --color__accent-s10: #1e3493;
-  --color__accent: #225da5;
-  --color__accent-t10: #326aaf;
-  --color__accent-t20: #4479b9;
-  --color__accent-t30: #5b8bc4;
-  --color__accent-t40: #749dce;
-  --color__accent-t50: #8badd6;
-  --color__accent-t60: #a0bbdd;
-  --color__accent-t70: #b7cbe5;
-  --color__accent-t80: #cad9ec;
-  --color__accent-t90: #dce5f1;
-  --color__accent-t100: #fff;
+--color__accent-s100: #000000;     /* 100% black */
+--color__accent-s90:  #101b2a;     /* 90% black + 10% accent */
+--color__accent-s80:  #203855;     /* 80% black + 20% accent */
+--color__accent-s70:  #305580;     /* 70% black + 30% accent */
+--color__accent-s60:  #4062a2;     /* 60% black + 40% accent */
+--color__accent-s50:  #5070c4;     /* 50% black + 50% accent */
+--color__accent-s40:  #5b87d1;     /* 40% black + 60% accent */
+--color__accent-s30:  #6593da;     /* 30% black + 70% accent */
+--color__accent-s20:  #6ea0e3;     /* 20% black + 80% accent */
+--color__accent-s10:  #71a1e0;     /* 10% black + 90% accent (almost base) */
+--color__accent:      #71a1e0;     /* base */
+--color__accent-t10:  #84ace4;     /* 10% white + 90% accent */
+--color__accent-t20:  #97b8e8;     /* 20% white + 80% accent */
+--color__accent-t30:  #abc3ec;     /* 30% white + 70% accent */
+--color__accent-t40:  #becff0;     /* 40% white + 60% accent */
+--color__accent-t50:  #d1dbf4;     /* 50% white + 50% accent */
+--color__accent-t60:  #e3e7f8;     /* 60% white + 40% accent */
+--color__accent-t70:  #edf1fa;     /* 70% white + 30% accent */
+--color__accent-t80:  #f5f7fc;     /* 80% white + 20% accent */
+--color__accent-t90:  #fbfcfe;     /* 90% white + 10% accent */
+--color__accent-t100: #ffffff;     /* 100% white */
   --color__on-accent: #ffffff;
   --color__on-primary: #ffffff;
   --color__on-secondary: #ffffff;