@asd20/ui 3.2.592 → 3.2.594

package/package.json

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

package/src/components/atoms/Asd20Factoid/index.vue

@@ -110,7 +110,7 @@ $factoid-fg: var(--website-card__reverse-background-color);
   &__label {
     font-size: 0.875rem;
     font-weight: 300;
-    text-transform: uppercase;
+    // text-transform: uppercase;
     color: $factoid-fg;
     // white-space: nowrap;
     opacity: 0.75;

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

@@ -77,22 +77,22 @@ $factoid-rule: var(--website-page__alternate-background-t80);
 
       &:first-child:nth-last-child(2),
       &:first-child:nth-last-child(2) ~ .asd20-factoid {
-        width: (100% / 2);
+        width: calc(100% / 2);
       }
 
       &:first-child:nth-last-child(3),
       &:first-child:nth-last-child(3) ~ .asd20-factoid,
       &:first-child:nth-last-child(6),
       &:first-child:nth-last-child(6) ~ .asd20-factoid {
-        width: (100% / 3);
+        width: calc(100% / 3);
       }
 
       &:first-child:nth-last-child(7),
       &:first-child:nth-last-child(7) ~ .asd20-factoid {
-        width: (100% / 4);
+        width: calc(100% / 4);
       }
       &:first-child:nth-last-child(7) ~ .asd20-factoid:nth-child(n + 6) {
-        width: (100% / 3);
+        width: calc(100% / 3);
       }
     }
   }

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

@@ -83,7 +83,7 @@ export default {
   }
 
   & > * {
-    flex-basis: (100% / 3);
+    flex-basis: calc(100% / 3);
   }
 }
 

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

@@ -30,7 +30,7 @@ $factoids-header-fg: var(--color__primary);
 
 .asd20-factoids-section {
   position: relative;
-  margin-bottom: space(1);
+  margin-bottom: space(3);
   padding: space(2) 0 0 0;
 
   h2 {

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

@@ -118,10 +118,10 @@ $logo-width: 50vw;
   align-items: center;
 
   &--condensed {
-    height: $navbar-size / 2;
+    height: calc($navbar-size / 2);
     .menu-button,
     .search-button {
-      height: $navbar-size / 2;
+      height: calc($navbar-size / 2);
       span {
         display: none;
       }

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

@@ -111,6 +111,11 @@
       @events-in-view="$emit('events-in-view')"
     ></asd20-feeds-section>
 
+    <asd20-factoids-section
+      v-if="factoids && factoids.length > 0"
+      :factoids="factoids"
+    />
+
     <!-- Quick Links -->
     <asd20-quicklinks-menu :quickLinks="quickLinks">
       <slot name="quicklinks-menu" />
@@ -148,7 +153,7 @@ import Asd20QuicklinksMenu from '../../../components/organisms/Asd20QuicklinksMe
 // import Asd20DistrictLogo from '../../../components/atoms/Asd20DistrictLogo'
 import Asd20OrganizationPicker from '../../../components/organisms/Asd20OrganizationPicker'
 import Asd20NotificationGroup from '@asd20/notifications-ui/src/components/Asd20NotificationGroup'
-// import Asd20FactoidsSection from '../../../components/organisms/Asd20FactoidsSection'
+import Asd20FactoidsSection from '../../../components/organisms/Asd20FactoidsSection'
 import Asd20FeedsSection from '../../../components/organisms/Asd20FeedsSection'
 import Asd20VideoHeader from '../../../components/organisms/Asd20VideoHeader'
 import Asd20VideoHeaderContent from '../../../components/organisms/Asd20VideoHeaderContent'
@@ -170,6 +175,38 @@ export default {
       return this.$mq || 'sm'
     },
   },
+  data: () => ({
+    factoids: [
+      {
+        start: 0,
+        end: 40,
+        suffix: '+',
+        label: 'Schools/Programs',
+        once: true,
+      },
+      {
+        start: 0,
+        end: 26000,
+        suffix: '+',
+        label: 'Students',
+        once: true,
+      },
+      {
+        start: 0,
+        end: 15,
+        suffix: 'years',
+        label: 'Accredited With Distiction',
+        once: true,
+      },
+      {
+        start: 0,
+        end: 94,
+        suffix: '%',
+        label: 'Graduation Rate',
+        once: true,
+      },
+    ],
+  }),
 
   components: {
     Asd20SkipTo,
@@ -179,7 +216,7 @@ export default {
     // Asd20DistrictLogo,
     Asd20OrganizationPicker,
     Asd20NotificationGroup,
-    // Asd20FactoidsSection,
+    Asd20FactoidsSection,
     Asd20FeedsSection,
     Asd20VideoHeader,
     Asd20VideoHeaderContent,

package/src/data/factoids.json

@@ -14,8 +14,8 @@
   },
   {
     "start": 0,
-    "end": 5,
-    "label": "New Buildings",
+    "end": 15,
+    "label": "Accredited With Distinction",
     "once": true
   },
   {

package/src/data/page-queries/video-page-query-result.json

@@ -1075,26 +1075,28 @@
             "factoids": [
                 {
                     "start": 0,
-                    "end": 38,
+                    "end": 40,
+                    "suffix": "+",
                     "label": "Schools/Programs",
                     "once": true
                 },
                 {
                     "start": 0,
-                    "end": 26000,
+                    "end": 25000,
                     "suffix": "+",
                     "label": "Students",
                     "once": true
                 },
                 {
                     "start": 0,
-                    "end": 5,
-                    "label": "New Buildings",
+                    "end": 15,
+                    "suffix": "years",
+                    "label": "Accredited With Distiction",
                     "once": true
                 },
                 {
                     "start": 0,
-                    "end": 96,
+                    "end": 94,
                     "suffix": "%",
                     "label": "Graduation Rate",
                     "once": true

package/src/design/_mixins.scss

@@ -1,6 +1,9 @@
-
+@use 'sass:math';
 @function strip-unit($value) {
-  @return $value / ($value * 0 + 1);
+  @if type-of($value) == 'number' and not unitless($value) {
+    @return math.div($value, ($value * 0 + 1));
+  }
+  @return $value;
 }
 
 @mixin fluid-type($min-font-size, $max-font-size, $min-vw: 320px, $max-vw: 1200px, ) {

package/src/design/_variables.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 // COLORS
 $colors: (
   old-brand-blue: #263969,
@@ -76,8 +77,8 @@ $rem-font-size: 16px;
 $base-font-size: 16px;
 $line-height: 1.4;
 $base-line-split: 3;
-$base-line-height: ceil($line-height * $base-font-size / $base-line-split);
-$line-height: $base-line-height * $base-line-split / $base-font-size;
+$base-line-height: ceil(calc($line-height * $base-font-size / $base-line-split));
+$line-height: calc($base-line-height * $base-line-split / $base-font-size);
 $copy-font: $base-font-size - 4;
 
 $font-family-headlines: var(--website-typography__font-family-headlines);

package/src/mixins/pageTemplateMixin.js

@@ -23,7 +23,7 @@ export default {
     // Page content
     messages: { type: Array, default: () => [] },
     primaryMessageLimit: { type: Number, default: 3 },
-    factoids: { type: Array, default: () => [] },
+    // factoids: { type: Array, default: () => [] },
     websiteLogoProps: { type: Object, default: null },
 
     // Page state