@asd20/ui 3.2.1044 → 3.3.0

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

@@ -1,456 +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/graduation-still.jpg"
-    >
-      <source src="/videos/graduation-optimized.mp4" type="video/mp4" />
-    </video>
-
-    <img class="background-image" src="/videos/graduation-still.jpg" alt="" />
-
-    <div class="asd20-choice-header__text">
-      <h1>
-        <img
-          src="/statics/images/home-images/graduation-header-text-isolated.svg"
-          alt="Congratulations Graduates! Class of 2021"
-        />
-      </h1>
-    </div>
-
-    <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: cover;
-  }
-
-  & ::v-deep .notification-group--status .notifications {
-    padding: 0.37rem;
-    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-top: space(8);
-    z-index: 2;
-    padding: space(1) space(1) space(0) space(1);
-    background: #193074ee;
-
-    h1 {
-      margin-top: space(0);
-      padding-top: space(0);
-      @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: #193074ee;
-    padding:  0 space(1)  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;
-    font-size: 1rem !important;
-      background: #b99442;
-    &:focus {
-      @include asd20-focus;
-    }
-    & + .asd20-button {
-      margin: space(0.5) 0 0 0;
-    }
-  }
-
-  &__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(0);
-
-    &::before {
-      content: '';
-      display: block;
-      position: relative;
-      top: auto;
-      bottom: auto;
-      left: auto;
-      right: auto;
-      // background: rgba;
-      background: #091a4c;
-      opacity: 0.8;
-      background-image: url('/statics/images/home-images/graduation-header-ribbons.png');
-      background-position-y: top;
-      background-size: 1024px auto;
-      grid-column: 1 / 6;
-      grid-row: 4 / 5;
-      min-width: 850px;
-    }
-
-    &::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: linear-gradient(170deg, rgba(6, 11, 31, 0.7) 10%, transparent 40%);
-    }
-
-    .background-video {
-      display: block;
-    }
-    .background-image {
-      display: none;
-    }
-
-    video {
-      width: 100%;
-      height: 80vh;
-      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) space(2) space(0);
-        @include asd20-font(2.5, $font-family-headlines, 1.1, 700);
-
-
-        em {
-          // font-size: 0.75em;
-          // font-style: normal;
-          // font-weight: normal;
-          color: #bbdce4;
-        }
-
-        img {
-          height: 20rem;
-          width: auto;
-        }
-      }
-
-      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;
-      background: transparent;
-      // 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);
-        // box-shadow: 1px 1px 5px black;
-        & + .asd20-button {
-          margin: 0 0 0 space(1);
-        }
-
-        font-size: 1.25rem !important;
-      }
-    }
-
-    // &__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/Asd20KindergartenHeader/index.stories.js

@@ -1,20 +0,0 @@
-import { storiesOf } from '@storybook/vue'
-import Asd20KindergartenHeader from '.'
-
-const info = {
-  summary: 'Asd20KindergartenHeader',
-}
-
-const wrapper = {
-  components: { Asd20KindergartenHeader },
-  data: () => ({}),
-}
-
-storiesOf('Organisms - Asd20KindergartenHeader', module).add(
-  'Default',
-  () => ({
-    ...wrapper,
-    template: `<Asd20KindergartenHeader></Asd20KindergartenHeader>`,
-  }),
-  { info }
-)

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

@@ -1,124 +0,0 @@
-<template>
-  <section class="asd20-kindergarten-header" role="banner">
-    <h2 v-html="heading"></h2>
-    <h3 v-html="lead"></h3>
-
-    <asd20-button
-      v-if="callToAction"
-      size="md"
-      :label="callToAction.label"
-      :icon="callToAction.icon"
-      :link="callToAction.url"
-      bordered
-      reversed
-      horizontal
-      centered
-    />
-  </section>
-</template>
-
-<script>
-import Asd20Button from '../../atoms/Asd20Button'
-
-export default {
-  name: 'Asd20KindergartenHeader',
-  components: { Asd20Button },
-  props: {
-    heading: { type: String, default: '' },
-    lead: { type: String, default: '' },
-    callToAction: { type: Object, default: () => null },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../../design/_variables.scss';
-@import '../../../design/_mixins.scss';
-
-.asd20-kindergarten-header {
-  --k-bg: #232957;
-  position: relative;
-  display: flex;
-  flex-shrink: 0;
-  flex-direction: column;
-  margin-top: space(-2);
-
-  background: var(--k-bg);
-  color: asd20-swatch('background-alt');
-
-  padding: space(3) space(1) space(1) space(1);
-
-  h2 {
-    @include fluid-type($base-font-size * 1.5, $base-font-size * 2.0);
-    font-weight: 900;
-    line-height: 1.1;
-    color: #fff;
-    // text-transform: uppercase;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-image: url('/statics/images/home-images/kindergarten-text-background.png');
-    background-size: 100% auto;
-  }
-
-  p,
-  h3 {
-    @include fluid-type($base-font-size * 1, $base-font-size * 1.5);
-    color: white;
-  }
-
-  &::before {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: space(1);
-    height: space(2);
-    background-color: black;
-    opacity: 0.25;
-  }
-}
-@media (min-width: 1024px) {
-  .asd20-kindergarten-header {
-    background: var(--k-bg)
-      url('/statics/images/home-images/kindergarten-background.png') no-repeat
-      top right;
-    background-size: auto 100%;
-    padding: space(3) 30vw space(3) space(3);
-    margin-top: space(0);
-    margin: space(1) space(1) space(2) space(2);
-
-    &::before {
-      top: space(1);
-      right: space(1);
-      left: space(-1);
-      bottom: space(-1);
-      height: auto;
-      opacity: 1;
-      background-image: url('/statics/images/home-images/kindergarten-text-background.png');
-      background-size: 50% auto;
-      z-index: -1;
-    }
-
-    // &::after {
-    //   content: '';
-    //   display: block;
-    //   position: absolute;
-    //   top: space(1);
-    //   right: space(-1);
-    //   left: space(1);
-    //   bottom: space(-1);
-    //   height: auto;
-    //   opacity: 1;
-    //   background-image: url('/statics/images/home-images/kindergarten-text-background.png');
-    //   background-size: 50% auto;
-    //   z-index: -1;
-    // }
-
-    h2 {
-      @include fluid-type($base-font-size * 2.8, $base-font-size * 3.5);
-      background-size: 40% auto;
-    }
-  }
-}
-</style>

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

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