@asd20/ui 3.2.1044 → 3.3.0

package/src/components/organisms/Asd20ChoiceHeader/index.stories.js

@@ -1,32 +0,0 @@
-import { storiesOf } from '@storybook/vue'
-import Asd20ChoiceHeader from '.'
-
-const info = {
-  summary: 'Asd20ChoiceHeader',
-}
-
-const wrapper = {
-  components: { Asd20ChoiceHeader },
-  data: () => ({
-    pageHeaderContent: {
-      heading: '',
-      lead: '',
-      imageUrl: '',
-      imageCaption: '',
-      callsToAction: [
-        { label: 'Graduation Information', url: '/graduation-ceremony' },
-      ],
-      detailLink: '',
-      detailLinkLabel: '',
-    },
-  }),
-}
-
-storiesOf('Organisms - Asd20ChoiceHeader', module).add(
-  'Default',
-  () => ({
-    ...wrapper,
-    template: `<Asd20ChoiceHeader v-bind="pageHeaderContent"></Asd20ChoiceHeader>`,
-  }),
-  { info }
-)

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

@@ -1,464 +0,0 @@
-<template>
-  <header
-    v-scroll-track.window
-    class="asd20-choice-header"
-    :class="classes"
-    role="banner"
-  >
-    <div v-if="$slots.top" class="asd20-choice-header__top">
-      <slot name="top" />
-    </div>
-
-    <video
-      class="background-video"
-      autoplay
-      loop
-      autobuffer
-      muted
-      playsinline
-      poster="/videos/choice-header-still_optimized.jpg"
-    >
-      <source
-        src="/videos/2021-2022-choicee-header-720p-optimized.mp4"
-        type="video/mp4"
-      />
-    </video>
-
-    <img
-      class="background-image"
-      src="/videos/choice-header-still_optimized.jpg"
-      alt=""
-    />
-
-    <div class="asd20-choice-header__text">
-      <h1>
-        Apply for School Choice<br />
-        <em
-          >We are now accepting applications for students living in, and out of our district for the 2022-23 school year.</em
-        >
-      </h1>
-    </div>
-
-    <!-- <figure class="asd20-choice-header__image">
-      <img
-        src="/statics/images/home-images/choice-schools.png"
-        alt="child entering school building"
-      />
-    </figure> -->
-
-    <div
-      v-if="callsToAction.length > 0"
-      class="asd20-choice-header__call-to-action"
-    >
-      <asd20-button
-        v-for="(cta, index) in callsToAction"
-        :key="index"
-        :size="['sm', 'md'].indexOf(mq) > -1 ? 'sm' : 'lg'"
-        :label="cta.label"
-        :icon="cta.icon"
-        :link="cta.url"
-        bordered
-        reversed
-        horizontal
-        centered
-      />
-    </div>
-
-    <slot />
-  </header>
-</template>
-
-<script>
-import scrollTrack from '../../../directives/scroll-track'
-import Asd20Button from '../../atoms/Asd20Button'
-
-export default {
-  name: 'Asd20ChoiceHeader',
-  components: { Asd20Button },
-  directives: { scrollTrack },
-  props: {
-    heading: { type: String, default: '' },
-    lead: { type: String, default: '' },
-    callsToAction: { type: Array, default: () => [] },
-    imageUrl: { type: String, default: '' },
-    imageCaption: { type: String, default: '' },
-    fullscreen: { type: Boolean, default: false },
-    detailLink: { type: String, default: '' },
-    detailLinkLabel: { type: String, default: '' },
-  },
-  computed: {
-    mq() {
-      return this.$mq || 'sm'
-    },
-    classes() {
-      return {
-        'asd20-choice-header--fullscreen': this.fullscreen,
-        'asd20-choice-header--has-cta': this.callsToAction.length > 0,
-      }
-    },
-    isDetailPage() {
-      if (typeof window === 'undefined') return false
-      return (
-        window.location.pathname.split('/').pop() ===
-        this.detailLink.split('/').pop()
-      )
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../../design/_variables.scss';
-@import '../../../design/_mixins.scss';
-
-.asd20-choice-header {
-  position: relative;
-  display: flex;
-  flex-shrink: 0;
-  flex-direction: column;
-  color: asd20-swatch('primary');
-  box-sizing: border-box;
-  margin-bottom: space(1);
-
-  .background-video {
-    display: none;
-  }
-
-  .background-image {
-    display: block;
-    position: absolute;
-    height: calc(100% - #{space(1)});
-    width: 100%;
-    z-index: 1;
-    object-fit: fill;
-  }
-
-  & ::v-deep .notification-group--status .notifications {
-    padding: 0.375rem;
-    border-radius: 3rem;
-    background: rgba(255,255,255,0.95);
-  }
-
-  &::before {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 0;
-    bottom: space(1);
-    left: 0;
-    right: 0;
-    background-color: asd20-swatch('background-alt');
-    background-image: url('/statics/images/home-images/choice-texture.png');
-    background-position-y: top;
-    background-size: 640px auto;
-  }
-  &::after {
-    content: '';
-    display: block;
-    position: absolute;
-    height: space(1);
-    bottom: space(0);
-    left: space(2);
-    right: 0;
-    background-color: asd20-swatch('background-alt');
-  }
-
-  &__top {
-    --fill-one: rgba(255, 255, 255, 1);
-    --fill-two: rgba(255, 255, 255, 0.625);
-
-    position: relative;
-    z-index: 100;
-    padding: space(0.5) space(1);
-
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    // flex-direction: column;
-
-    & ::v-deep .asd20-district-logo {
-      height: space(2);
-    }
-
-    & ::v-deep .notification-group--status {
-      margin-left: -0.5rem;
-      .asd20-notification {
-        margin: 0;
-        padding: 0 !important;
-      }
-    }
-
-    & ::v-deep .notification-group--floating {
-      margin-right: 0;
-    }
-  }
-
-  &__text {
-    box-sizing: border-box;
-    margin: 0;
-    z-index: 2;
-    padding: space(1);
-
-    h1 {
-      margin-top: space(0);
-      padding-bottom: space(3);
-      @include fluid-type($base-font-size * 1.5, $base-font-size * 4);
-      line-height: 1.2;
-      font-weight: bold;
-      color: white;
-      em {
-        font-size: 0.75em;
-        font-style: normal;
-        font-weight: normal;
-        color: #bbdce4;
-
-      }
-    }
-
-
-    p {
-      margin-top: space(0.5);
-      @include fluid-type($base-font-size * 1, $base-font-size * 2);
-      color: asd20-swatch('background-alt');
-    }
-  }
-
-  &__lead {
-    position: relative;
-    z-index: 1;
-    color: asd20-swatch('background-dark');
-    padding: 0 space(1) space(1) space(1);
-    margin-bottom: 0;
-    @include asd20-font(1, $font-family-headlines);
-    // &:last-child {
-    //   margin-bottom: space(2);
-    // }
-  }
-
-  h1 + &__lead {
-    margin-top: space(-0.5);
-  }
-
-  &__call-to-action {
-    // background: asd20-swatch('primary');
-    // padding: space(1) space(1);
-    margin-left: space(1);
-    margin-right: space(1);
-    z-index: 1;
-    // &:nth-child(2) {
-    //   background: asd20-swatch('primary');
-    // }
-  }
-
-  &__call-to-action ::v-deep .asd20-button {
-    text-align: center;
-    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
-    border: none;
-    box-shadow: 1px 1px 10px black;
-    font-size: 1rem !important;
-      background: asd20-swatch('background-alt');
-      color: asd20-swatch('primary');
-    // background: #3B5175;
-    &:focus {
-      @include asd20-focus;
-    }
-    & + .asd20-button {
-      margin: space(0.5) 0 0 0;
-    }
-    &:hover {
-      background: white;
-      color: asd20-swatch('primary');
-    }
-  }
-
-  &__image {
-    display: none;
-  }
-
-  &--has-cta {
-    h1 {
-      margin-bottom: 0;
-    }
-    &::after {
-      height: space(1.5);
-      bottom: space(-0.5);
-    }
-  }
-}
-
-$min: 3rem;
-$max: 4rem;
-
-@media (min-width: 1024px) {
-  .asd20-choice-header {
-    display: grid;
-    grid-template-columns: space(3) repeat(5, 1fr space(3)) 1fr space(3);
-    grid-template-rows:
-      space(3) min-content 1fr min-content
-      repeat(3, space(1));
-
-    margin-bottom: space(2);
-
-    &::before {
-      content: '';
-      display: block;
-      position: relative;
-      top: auto;
-      bottom: auto;
-      left: auto;
-      right: auto;
-      background: #08182b;
-      opacity: 0.8;
-      background-size: 1024px auto;
-      grid-column: 1 / 8;
-      grid-row: 4 / 5;
-    }
-
-    &::after {
-      content: '';
-      height: auto;
-      display: block;
-      position: absolute;
-      z-index: 0;
-      top: 0;
-      bottom: auto;
-      left: 0;
-      width: 100%;
-      height: 40%;
-      background: asd20-swatch('background-alt');
-      background: red;
-      background: linear-gradient(170deg, rgba(6, 11, 31, 0.7) 10%, transparent 40%);
-    }
-
-    .background-video {
-      display: block;
-    }
-    .background-image {
-      display: none;
-    }
-
-    video {
-      width: 100%;
-      height: min-content;
-      object-fit: cover;
-      grid-column: 1 / -1;
-      grid-row: 1 / -1;
-    }
-
-    & ::v-deep .asd20-district-logo {
-      margin-top: space(-0.75);
-      margin-right: auto;
-      --fill-one: white;
-      --fill-two: #ccc;
-      & + .asd20-breadcrumb {
-        margin-top: space(2);
-      }
-    }
-
-    &__top {
-      margin: 0;
-      padding: 0;
-
-      z-index: 3;
-      grid-column: 2/-2;
-      grid-row: 2/3;
-    }
-
-    &__text {
-      position: relative;
-      grid-column: 2 / 8;
-      grid-row: 4 / 5;
-      box-sizing: border-box;
-      justify-content: flex-start;
-      padding: 0 space(2) 0 0;
-      background: none;
-      z-index: 1;
-      margin: 0;
-      @include asd20-font(1, $font-family-headlines, 1.1, 400);
-
-      h1 {
-        // margin-top: space(3);
-        // font-size: 5rem;
-        // color: white;
-        padding: space(3) space(0);
-        @include asd20-font(2.5, $font-family-headlines, 1.0, 700);
-
-
-        em {
-          // font-size: 0.75em;
-          // font-style: normal;
-          // font-weight: normal;
-          color: #bbdce4;
-        }
-      }
-
-      p {
-        margin-top: space(1);
-        font-size: 2rem !important;
-        margin-bottom: space(3) !important;
-        // color: #80b3c0;
-      }
-    }
-
-    &__call-to-action {
-      // Reset mobile styles
-      position: relative;
-      bottom: auto;
-      left: auto;
-      right: auto;
-      margin-right: space(-2);
-      box-sizing: border-box;
-      // padding: space(1) space(1);
-      padding: 0;
-      margin: space(-1.5) 0 0 0;
-      grid-column: 2 / auto;
-      grid-row: 5 / -2;
-      // align-self: end;
-      min-width: max-content;
-      display: flex;
-      // transform: translate3d(0, calc(-50% * var(--scroll-progress)), 0);
-      z-index: 2;
-      .asd20-button {
-        padding: space(1);
-        & + .asd20-button {
-          margin: 0 0 0 space(1);
-        }
-
-        font-size: 1rem;
-      }
-    }
-
-    // &__lead + &__call-to-action {
-    //   margin-top: 0;
-    // }
-
-    &__image {
-      display: flex;
-      flex-direction: column;
-      position: relative;
-      bottom: auto;
-      left: auto;
-      right: auto;
-      top: auto;
-      grid-column: 8 / -1;
-      grid-row: 7 / 8;
-      z-index: 0;
-      height: auto;
-      margin: 0;
-      padding: 0;
-      overflow: hidden;
-      opacity: 0.5;
-
-      img {
-        display: block;
-        width: auto;
-        height: 100%;
-        align-self: flex-start;
-        // height: 100%;
-        // object-fit: cover;
-        // object-position: 100% 0;
-      }
-    }
-  }
-}
-</style>

package/src/components/organisms/Asd20CovidHeader/index.stories.js

@@ -1,34 +0,0 @@
-import { storiesOf } from '@storybook/vue'
-import Asd20CovidHeader from '.'
-
-const info = {
-  summary: 'Asd20CovidHeader',
-}
-
-const wrapper = {
-  components: { Asd20CovidHeader },
-  data: () => ({
-    pageHeaderContent: {
-      heading: 'Cultivating the next generation of leaders.',
-      lead:
-        'Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam.',
-      imageUrl: '/images/home-images/best-brass-section.jpg',
-      imageCaption: '',
-      callsToAction: [
-        { label: 'Enroll Your Child', url: '/enroll' },
-        { label: 'Browse Our Schools', url: '/schools' },
-      ],
-      detailLink: '',
-      detailLinkLabel: '',
-    },
-  }),
-}
-
-storiesOf('Organisms - Asd20CovidHeader', module).add(
-  'Default',
-  () => ({
-    ...wrapper,
-    template: `<Asd20CovidHeader v-bind="pageHeaderContent"></Asd20CovidHeader>`,
-  }),
-  { info }
-)