@asd20/ui 3.2.994 → 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/Asd20Calendar/index.vue

@@ -11,7 +11,7 @@
       </div>
     </div>
     <!-- Days -->
-    <ol class="asd20-calendar__days">
+    <!-- <ol class="asd20-calendar__days">
       <li
         class="asd20-calendar__day"
         v-for="(day, index) in days"
@@ -49,7 +49,49 @@
           />
         </div>
       </li>
+    </ol> -->
+
+    <ol class="asd20-calendar__days">
+      <template v-for="(week, weekIdx) in weekRows">
+        <li
+          v-for="(day, dayIdx) in week"
+          :key="weekIdx + '-' + dayIdx"
+          class="asd20-calendar__day"
+          :class="{
+            selected: day === selectedDay,
+            today: day.today,
+            outside: day.outsideOfCurrentMonth,
+            empty: day.events.length === 0,
+          }"
+          @click="onClickDay($event, day)"
+        >
+          <div class="asd20-calendar__date">
+            <span class="month">{{ day.month }}</span>
+            <span class="day">{{ day.number }}</span>
+            <span class="year">{{ day.year }}</span>
+          </div>
+          <div
+            class="asd20-calendar__events"
+            v-if="!annualView || !day.outsideOfCurrentMonth"
+          >
+            <Asd20CalendarEventButton
+              v-for="(event, index) in day.events"
+              :key="index"
+              :event="event"
+              :class="
+                day.events.length === 2
+                  ? 'small-dot'
+                  : day.events.length > 2
+                  ? 'smaller-dot'
+                  : ''
+              "
+              @click.native="onEventClick(event)"
+            />
+          </div>
+        </li>
+      </template>
     </ol>
+
     <asd20-viewport
       class="asd20-calendar__day-events"
       scrollable
@@ -90,6 +132,7 @@ export default {
     absolute: { type: Boolean, default: true },
     shortWeekdays: { type: Boolean, default: false },
     annualView: { type: Boolean, default: false },
+    hideWeekends: { type: Boolean, default: false },
   },
 
   data: () => ({
@@ -100,7 +143,7 @@ export default {
 
   watch: {
     days: {
-      handler: function() {
+      handler: function () {
         this.selectedDay =
           this.days.find(day => {
             return day.today
@@ -116,17 +159,65 @@ export default {
         'asd20-calendar': true,
         'asd20-calendar--absolute': this.absolute,
         'asd20-calendar--annual': this.annualView,
+        'asd20-calendar--five-day': this.hideWeekends,
       }
     },
     days() {
-      return mapEventsToDays(
+      const allDays = mapEventsToDays(
         expandEvents(this.events, this.annualView),
         this.year,
-        this.month,
+        this.month
       )
+      if (!this.hideWeekends) return allDays
+      return allDays.filter(day => {
+        // Note: day.date is usually a Date object in these helper patterns.
+        // But if it's not, you may need to use day.js, or construct new Date(day.year, day.month-1, day.number)
+        if (!day.date) {
+          try {
+            day.date = new Date(day.year, day.month - 1, day.number)
+          } catch {}
+        }
+        const jsDate =
+          day.date instanceof Date
+            ? day.date
+            : new Date(day.year, day.month - 1, day.number)
+        const dayOfWeek = jsDate.getDay()
+        return dayOfWeek !== 0 && dayOfWeek !== 6 // Exclude Sunday (0) and Saturday (6)
+      })
     },
     weekdayNames() {
-      return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+      const names = [
+        'Sunday',
+        'Monday',
+        'Tuesday',
+        'Wednesday',
+        'Thursday',
+        'Friday',
+        'Saturday',
+      ]
+      return this.hideWeekends ? names.slice(1, 6) : names
+    },
+    weekRows() {
+      // Helper to chunk flat days array into weeks of 5 or 7 days
+      function chunk(arr, size) {
+        const result = []
+        for (let i = 0; i < arr.length; i += size) {
+          result.push(arr.slice(i, i + size))
+        }
+        return result
+      }
+
+      const colCount = this.hideWeekends ? 5 : 7
+      const weeks = chunk(this.days, colCount)
+
+      // Remove the last row if all days are outside the current month
+      while (
+        weeks.length &&
+        weeks[weeks.length - 1].every(day => day.outsideOfCurrentMonth)
+      ) {
+        weeks.pop()
+      }
+      return weeks
     },
   },
   methods: {
@@ -295,6 +386,8 @@ $accent: var(--color__accent);
   &--annual {
     .asd20-calendar__weekdays {
       padding: 0;
+      background: var(--color__primary);
+      color: #ffffff;
     }
     .asd20-calendar__days {
       position: relative;
@@ -320,7 +413,7 @@ $accent: var(--color__accent);
       width: calc(100% / 7);
       flex-grow: 1;
       display: flex;
-      flex-direction:column;
+      flex-direction: column;
       align-items: flex-start;
       background-color: var(--website-page__alternate-background-t70);
       min-height: 2.5rem;
@@ -339,16 +432,20 @@ $accent: var(--color__accent);
     }
 
     .asd20-calendar__date {
-      position: static;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
       font-size: 0.875rem;
-      margin: 0 0 0.125rem 0.125rem;
+      margin: 0 auto;
+      z-index: 10;
 
       .day {
-        display: inline;
+        display: block;
         width: auto;
         height: auto;
         padding: 0;
-        font-size: 0.875rem;
+        font-size: 1.5rem;
       }
 
       .weekday,
@@ -361,15 +458,18 @@ $accent: var(--color__accent);
     .asd20-calendar__events {
       position: static;
       display: flex;
-      flex-direction: column;
+      flex-direction: row;
       width: 100%;
       justify-content: stretch;
-      max-height: 2rem;
+      max-height: 2.5rem;
       overflow: hidden;
+      align-items: center;
+      justify-content: center;
 
       &::v-deep .asd20-calendar-event-button {
         background: transparent;
         padding: 0;
+        margin-right: 0;
         // width: space(0.375);
         // height: space(0.375);
         width: max-content;
@@ -377,30 +477,21 @@ $accent: var(--color__accent);
         // margin-right: space(0.0625);
         .title::before {
           width: 4rem;
-          height: 2rem;
+          height: 2.5rem;
           margin: 0;
           border-radius: 0;
-
         }
         .title span {
           display: none;
         }
       }
       &::v-deep .small-dot {
-        width: 4rem;
-        height: 50%;
-        // .title::before {
-        //   width: 12px;
-        //   height: 30px;
-        // }
+        width: 50%;
+        height: 2.5rem;
       }
       &::v-deep .smaller-dot {
-        width: 4rem;
-        height: 33%;
-        // .title::before {
-        //   width: 12px;
-        //   height: 30px;
-        // }
+        width: 33%;
+        height: 2.5rem;
       }
     }
     .outside {
@@ -409,7 +500,13 @@ $accent: var(--color__accent);
       }
     }
   }
-
+  &--five-day {
+    .asd20-calendar__days {
+      .asd20-calendar__day {
+        width: calc(100% / 5);
+      }
+    }
+  }
 }
 
 @media (max-width: 767px) {
@@ -452,7 +549,7 @@ $accent: var(--color__accent);
         //   0 1px 0 0 var(--color__tertiary), -1px 0 0 0 var(--color__tertiary);
 
         &::v-deep .asd20-calendar__date {
-          width: 100%;
+          // width: 100%;
         }
         &::v-deep .asd20-calendar__date .weekday {
           box-sizing: border-box;
@@ -540,5 +637,4 @@ $accent: var(--color__accent);
     }
   }
 }
-
 </style>

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;