@asd20/ui 3.2.1021 → 3.2.1023

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.1021",
+  "version": "3.2.1023",
   "private": false,
   "license": "MIT",
   "repository": {

package/src/components/atoms/Asd20Icon/index.stories.js

@@ -36,8 +36,7 @@ storiesOf('Atoms - Asd20Icon', module)
     />`,
     }),
     {
-      info:
-        'Makes it accessible, by takeing the name and passing it as a title, declares it as an image and provides aria roles.',
+      info: 'Makes it accessible, by takeing the name and passing it as a title, declares it as an image and provides aria roles.',
     }
   )
   .add(
@@ -77,88 +76,83 @@ storiesOf('Atoms - Asd20Icon', module)
       ...wrapper,
       data: () => ({
         icons: [
-          'gallery',
-          'video',
           'cards',
-          'list',
+          'chevron',
+          'close',
+          'contact',
           'email',
+          'external',
+          'facebook',
+          'fax',
           'file',
           'filter',
-
-          'heart-filled',
+          'gallery',
+          'group-alt',
           'heart',
-          'pin-filled',
-          'pin',
-          'star-filled',
-          'star',
-          'thumb',
-          'thumb-filled',
-          'info-alt',
-
-          'phone-alt',
+          'heart-filled',
           'hours-alt',
-          'group-alt',
+          'info-alt',
+          'instagram',
+          'linkedin',
+          'list',
           'map',
-          'external',
-          'contact',
-          'fax',
-          'chevron',
           'menu',
-          'close',
+          'phone-alt',
+          'pin',
+          'pin-filled',
           'search',
-
-          'instagram',
-          'linkedin',
-          'youtube',
+          'star',
+          'star-filled',
+          'thumb',
+          'thumb-filled',
           'twitter',
-          'facebook',
+          'video',
+          'youtube',
+
           'accessibility',
           'alert',
+          'arts',
+          'athletics',
           'award',
           'bell',
-          'calendar-alt',
+          'bus',
           'calendar',
+          'calendar-alt',
           'committee',
+          'cora',
           'danger',
           'directions',
           'directory',
           'district',
           'files',
           'finance',
+          'food',
+          'group',
           'hours',
           'info',
+          'ix',
           'jobs',
           'language',
+          'library',
           'link',
           'login',
+          'parentsquare',
           'personalize',
           'phone',
+          'printer',
           'register',
           'school',
-          'staff',
-          'website',
-          'vendors',
-          'cora',
-          'weather-snow',
-          'weather-sun',
-          'athletics',
-          'arts',
-          'food',
-          'group',
-          'library',
-
-          'translate',
-
-          'technology',
           'schoology',
-          'ix',
-
-          'bus',
-          'printer',
           'share',
           'share-alt',
-          'parentsquare',
+          'staff',
+          'technology',
+          'translate',
+          'vendors',
           'video-alt',
+          'weather-snow',
+          'weather-sun',
+          'website',
         ],
       }),
       template: `

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

@@ -36,7 +36,7 @@
     <rect x="15" y="21" width="2" height="2" rx="0.7" class="line" fill="currentColor"/>
     <rect x="19" y="21" width="2" height="2" rx="0.7" class="line" fill="currentColor"/>
     <!-- Dollar sign ($) in display (line color) -->
-    <text
+    <!-- <text
       x="16"
       y="12.5"
       text-anchor="middle"
@@ -46,6 +46,6 @@
       font-weight="bold"
       class="fill"
       style="pointer-events: none;"
-    >$</text>
+    >$</text> -->
   </g>
 </template>

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

@@ -17,23 +17,23 @@
       />
       <!-- Rectangle -->
       <rect
-        x="9"
-        y="9"
-        width="14"
-        height="14"
+        x="9.5"
+        y="9.5"
+        width="13"
+        height="13"
         rx="2"
         stroke="#000000"
-        stroke-width="2"
+        stroke-width="3"
         stroke-linecap="round"
         stroke-linejoin="round"
         fill="none"
       />
 
       <!-- Corner dots -->
-      <circle cx="10" cy="10" r="4" class="line" stroke="currentColor" stroke-width="1" />
-      <circle cx="22" cy="10" r="4" class="line" stroke="currentColor" stroke-width="1" />
-      <circle cx="10" cy="22" r="4" class="line" stroke="currentColor" stroke-width="1" />
-      <circle cx="22" cy="22" r="4" class="line" stroke="currentColor" stroke-width="1" />
+      <circle cx="10" cy="10" r="3.5" class="line" stroke="currentColor" stroke-width="1" />
+      <circle cx="22" cy="10" r="3.5" class="line" stroke="currentColor" stroke-width="1" />
+      <circle cx="10" cy="22" r="3.5" class="line" stroke="currentColor" stroke-width="1" />
+      <circle cx="22" cy="22" r="3.5" class="line" stroke="currentColor" stroke-width="1" />
     </g>
   </g>
 </template>

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

@@ -6,6 +6,7 @@
       :key="option.value"
     >
       <asd20-checkbox
+        :title="option.title"
         :label="option.text"
         :count="option.count"
         :description="option.description"

package/src/components/templates/Asd20ProfileTemplate/index.vue

@@ -245,29 +245,16 @@
         class="asd20-school-details__secondary-content"
         aria-label="Program Offerings"
       >
-        <asd20-list
-          v-if="academicsListItems.length > 0"
-          :items="academicsListItems"
-          class="asd20-school-details__academics-offerings"
-          headline="Academics Offerings"
-          icon="library"
-        />
-        <div class="otherOfferings">
+        <template v-for="cat in dynamicCategoryOrder">
           <asd20-list
-            v-if="artsListItems.length > 0"
-            :items="artsListItems"
-            class="asd20-school-details__arts-offerings"
-            headline="Arts Offerings"
-            icon="arts"
+            :key="'cat-' + cat"
+            v-if="(orgOfferingsByCategory[cat] || []).length > 0"
+            :items="orgOfferingsByCategory[cat]"
+            class="asd20-school-details__category-offerings"
+            :headline="cat"
+            :icon="iconForCategory(cat)"
           />
-          <asd20-list
-            v-if="athleticsListItems.length > 0"
-            :items="athleticsListItems"
-            class="asd20-school-details__athletics-offerings"
-            headline="Athletics Offerings"
-            icon="athletics"
-          />
-        </div>
+        </template>
       </section>
     </section>
 
@@ -381,66 +368,104 @@ export default {
       return this.organization.openSeats.map(g => JSON.parse(g))
     },
 
-    // profileHeaderContent() {
-    //   if (!this.organization) return
-    //   return {
-    //     heading: this.organization.title.replace(
-    //       /(Elementary|Elementary-Middle|Middle|Middle-High|High|Elementary-Middle-High) School/,
-    //       '<small>$1 School</small>'
-    //     ),
-    //     lead: this.organization.elevatorPitch,
-    //     imageUrl: this.organization.exteriorPhotoUrl,
-    //     organization: this.organization,
-    //   }
-    // },
-
-    academicsListItems() {
-      return this.organization.offerings
-        .filter(o =>
-          o.offering.categories
-            .map(oc => oc.category.title)
-            .includes('Academics')
-        )
-        .map(a => ({
-          label: a.offering.title,
-          description: a.offering.description,
-          alignTop: true,
-          actionable: false,
-          condensed: true,
-          checked: true,
-        }))
-        .sort((a, b) => (a.label > b.label ? 1 : b.label > a.label ? -1 : 0))
-    },
-    artsListItems() {
-      return this.organization.offerings
-        .filter(o =>
-          o.offering.categories.map(oc => oc.category.title).includes('Arts')
-        )
-        .map(a => ({
-          label: a.offering.title,
-          alignTop: true,
-          actionable: false,
-          condensed: true,
-          checked: true,
-        }))
-        .sort((a, b) => (a.label > b.label ? 1 : b.label > a.label ? -1 : 0))
+    // Categories present on THIS organization, ordered with preferred first.
+    dynamicCategoryOrder: function () {
+      var org = this.organization || {}
+      var offs = org.offerings || []
+      var set = {}
+      var list = []
+
+      function getCategoryTitle(c) {
+        if (!c) return null
+        if (c.category && c.category.title) return c.category.title
+        if (c.title) return c.title
+        return null
+      }
+
+      for (var i = 0; i < offs.length; i++) {
+        var wrap = offs[i]
+        var o = wrap && wrap.offering ? wrap.offering : wrap
+        if (!o) continue
+        var cats = o.categories && o.categories.length ? o.categories : []
+        for (var j = 0; j < cats.length; j++) {
+          var t = getCategoryTitle(cats[j])
+          if (t && !set[t]) {
+            set[t] = true
+            list.push(t)
+          }
+        }
+      }
+
+      var preferred = ['Academics', 'Arts', 'Athletics']
+      var preferredPresent = []
+      for (var p = 0; p < preferred.length; p++) {
+        if (set[preferred[p]]) preferredPresent.push(preferred[p])
+      }
+
+      var rest = []
+      for (var k = 0; k < list.length; k++) {
+        if (preferred.indexOf(list[k]) === -1) rest.push(list[k])
+      }
+      rest.sort(function (a, b) {
+        if (typeof a.localeCompare === 'function') return a.localeCompare(b)
+        return a < b ? -1 : a > b ? 1 : 0
+      })
+
+      return preferredPresent.concat(rest)
     },
-    athleticsListItems() {
-      return this.organization.offerings
-        .filter(o =>
-          o.offering.categories
-            .map(oc => oc.category.title)
-            .includes('Athletics')
-        )
-        .map(a => ({
-          label: a.offering.title,
-          alignTop: true,
-          actionable: false,
-          condensed: true,
-          checked: true,
-        }))
-        .sort((a, b) => (a.label > b.label ? 1 : b.label > a.label ? -1 : 0))
+
+    // Items grouped by category for THIS organization
+    orgOfferingsByCategory: function () {
+      var org = this.organization || {}
+      var offs = org.offerings || []
+      var out = {}
+
+      function getCategoryTitle(c) {
+        if (!c) return null
+        if (c.category && c.category.title) return c.category.title
+        if (c.title) return c.title
+        return null
+      }
+
+      for (var i = 0; i < offs.length; i++) {
+        var wrap = offs[i]
+        var o = wrap && wrap.offering ? wrap.offering : wrap
+        if (!o) continue
+
+        var label = o.title || ''
+        var desc = o.description || ''
+        var cats = o.categories && o.categories.length ? o.categories : []
+
+        for (var j = 0; j < cats.length; j++) {
+          var cat = getCategoryTitle(cats[j])
+          if (!cat) continue
+          if (!out[cat]) out[cat] = []
+          out[cat].push({
+            label: label,
+            description: desc, // keep description like your Academics list
+            alignTop: true,
+            actionable: false,
+            condensed: true,
+            checked: true,
+          })
+        }
+      }
+
+      // Sort items A→Z within each category
+      for (var name in out) {
+        if (!out.hasOwnProperty(name)) continue
+        out[name].sort(function (a, b) {
+          var al = a.label || '',
+            bl = b.label || ''
+          if (typeof al.localeCompare === 'function')
+            return al.localeCompare(bl)
+          return al < bl ? -1 : al > bl ? 1 : 0
+        })
+      }
+
+      return out
     },
+
     getGradeRange() {
       let levels = this.organization.educationLevels
       let gradeRange = []
@@ -502,6 +527,19 @@ export default {
       }
     },
   },
+  methods: {
+    iconForCategory: function (cat) {
+      // Known icons first
+      if (cat === 'Academics') return 'library'
+      if (cat === 'Arts') return 'arts'
+      if (cat === 'Athletics') return 'athletics'
+      // Common new ones (adjust to your icon set)
+      if (cat === 'Support') return 'vendors'
+      if (cat === 'Community') return 'group'
+      // Fallback
+      return 'list'
+    },
+  },
 }
 </script>
 
@@ -657,13 +695,13 @@ export default {
   &__secondary-content {
     padding: space(1);
     display: flex;
-    flex-direction: column;
-    .asd20-school-details__academics-offerings {
-      max-width: 90%;
-      padding-bottom: 2rem;
-    }
-    .asd20-school-details__athletics-offerings {
-      margin-top: 2rem;
+    flex-wrap: wrap;
+    gap: space(1); /* modern flex gap */
+    /* single column by default */
+    .asd20-school-details__category-offerings {
+      flex: 1 1 100%;
+      max-width: 100%;
+      padding-right: 0; /* override any prior rule */
     }
   }
 
@@ -702,10 +740,14 @@ export default {
     &__secondary-content {
       padding: space(2);
       display: flex;
-      flex-direction: row;
-      .asd20-school-details__academics-offerings {
-        max-width: 60%;
-        padding-right: 2rem;
+      flex-wrap: wrap;
+      gap: space(1);
+
+      .asd20-school-details__category-offerings {
+        /* two columns: equal widths */
+        flex: 1 1 calc(50% - #{space(0.5)});
+        max-width: calc(50% - #{space(0.5)});
+        padding-right: 0;
       }
     }
   }
@@ -719,13 +761,6 @@ export default {
     .asd20-notification-group--floating {
       position: absolute;
       top: space(1);
-      // .bell {
-      //   span {
-      //     background: var(--color__accent);
-      //     top: -0.6em !important;
-      //     right: -0.6em !important;
-      //   }
-      // }
     }
     .notification-group--inline {
       margin: space(2) space(3) space(1) space(3);
@@ -757,11 +792,20 @@ export default {
   .asd20-school-details {
     &__primary-content {
       padding: space(2);
+      padding-right: 0;
       .primary-section {
-        width: 30%;
+        width: 31%;
         padding: 0 1vw 3rem 1vw;
       }
     }
+    &__secondary-content {
+      padding: space(2);
+      padding-right: 0;
+      .asd20-school-details__category-offerings {
+        flex: 1 1 calc(32% - #{space(0.5)});
+        max-width: calc(32% - #{space(0.5)});
+      }
+    }
     .asd20-contact {
       padding: space(1) space(3);
     }