@asd20/ui 3.2.1043 → 3.2.1045

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

@@ -1,571 +0,0 @@
-<template>
-  <header
-    v-scroll-track.window
-    class="asd20-covid-header"
-    :class="classes"
-    role="banner"
-  >
-    <div v-if="$slots.top" class="asd20-covid-header__top">
-      <slot name="top" />
-    </div>
-
-    <h1 v-if="heading" v-html="heading" />
-    <p v-if="lead" class="asd20-covid-header__lead">
-      <span v-html="lead"></span>
-      <a v-if="detailLink && !isDetailPage" :href="detailLink">
-        {{ detailLinkLabel }}
-      </a>
-    </p>
-
-    <figure v-if="imageUrl && !$slots.aside" class="asd20-covid-header__image">
-      <img :src="imageUrl" :alt="imageCaption" />
-    </figure>
-
-    <aside class="asd20-covid-header__aside" v-if="$slots.aside">
-      <slot name="aside" />
-    </aside>
-
-    <div
-      v-if="callsToAction.length > 0"
-      class="asd20-covid-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>
-
-    <div v-if="fullscreen" class="scroll-down-indicator"></div>
-    <slot />
-  </header>
-</template>
-
-<script>
-import scrollTrack from '../../../directives/scroll-track'
-import Asd20Button from '../../atoms/Asd20Button'
-
-export default {
-  name: 'Asd20CovidHeader',
-  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-covid-header--fullscreen': this.fullscreen,
-        'asd20-covid-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-covid-header {
-  position: relative;
-  display: flex;
-  flex-shrink: 0;
-  flex-direction: column;
-  color: asd20-swatch('primary');
-  box-sizing: border-box;
-  margin-bottom: space(2);
-
-  &::before {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 0;
-    bottom: space(1);
-    left: 0;
-    right: 0;
-    background-color: asd20-swatch('background-alt');
-    background-image: url('/images/covid-header-background-mobile.jpg');
-    background-position: right bottom;
-    background-size: 100% auto;
-    background-repeat: no-repeat;
-  }
-  &::after {
-    content: '';
-    display: block;
-    position: absolute;
-    height: space(1);
-    bottom: space(0);
-    left: space(2);
-    right: 0;
-    background-color: asd20-swatch('background-dark');
-  }
-
-  &__top {
-    --fill-one: rgba(255, 255, 255, 1);
-    --fill-two: rgba(255, 255, 255, 0.625);
-
-    position: relative;
-    z-index: 1;
-    margin: space(2) space(1) space(0) space(1);
-
-    &::v-deep .asd20-district-logo {
-      height: space(2);
-    }
-
-    &::v-deep .asd20-breadcrumb {
-      margin-bottom: space(-2);
-    }
-  }
-
-  h1 {
-    position: relative;
-    color: asd20-swatch('primary');
-    @include asd20-font(2, $font-family-headlines, 1.2, 700);
-    margin-top: space(1);
-    margin-bottom: space(1);
-    padding: space(0) space(1) space(1) space(1);
-    z-index: 1;
-  }
-
-  &__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');
-    // }
-  }
-
-  &::v-deep .asd20-button {
-    text-align: center;
-
-    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25) !important;
-    border: none;
-    font-size: 1rem !important;
-    & + .asd20-button {
-      margin: space(0.5) 0 0 0;
-    }
-    &:first-child {
-      background: var(--color__danger);
-    }
-  }
-
-  &__image {
-    display: none;
-  }
-
-  &__aside {
-    position: relative;
-    z-index: 1;
-    margin: 0 0 0 space(2);
-    padding: space(1) space(1) space(3) space(1);
-
-    &::before {
-      content: '';
-      display: block;
-      position: absolute;
-      z-index: -1;
-      top: space(2);
-      bottom: space(0);
-      left: space(-2);
-      right: 0;
-      background-color: asd20-swatch('background-alt');
-    }
-
-    &::after {
-      content: '';
-      display: block;
-      position: absolute;
-      z-index: -1;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      background-color: white;
-    }
-  }
-  &__aside + &__call-to-action {
-    margin-top: space(-2);
-  }
-
-  .scroll-down-indicator {
-    position: relative;
-    z-index: 3;
-    text-transform: uppercase;
-    display: none;
-    flex-direction: column;
-    align-items: center;
-    padding-bottom: space(2.125);
-    text-align: center;
-    font-weight: 400;
-    color: transparent;
-    &::before {
-      content: '';
-      position: absolute;
-      display: block;
-      width: space(2);
-      height: space(2);
-      bottom: space(0.15);
-      border-radius: 100%;
-      background: asd20-swatch('background-dark');
-      box-shadow: 0 5px 5px 0 rgba(black, 0.125);
-      transform: translateX(0) translateY(0);
-      transform-origin: 50% 50%;
-      animation: slide-top 1s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite
-        alternate-reverse both;
-    }
-    &::after {
-      content: '';
-      position: absolute;
-      display: block;
-      width: space(0.5);
-      height: space(0.5);
-      bottom: space(1);
-      border: 2px solid asd20-swatch('primary', 9);
-      border-top-color: transparent;
-      border-left-color: transparent;
-      transform: translateX(0) translateY(0) rotate(45deg);
-      transform-origin: 50% 50%;
-      animation: slide-top-rotate 1s cubic-bezier(0.785, 0.135, 0.15, 0.86)
-        infinite alternate-reverse both;
-    }
-  }
-
-  &--has-cta {
-    h1 {
-      margin-bottom: 0;
-    }
-    &::after {
-      height: space(1.5);
-      bottom: space(-0.5);
-    }
-  }
-
-  @keyframes slide-top {
-    0% {
-      transform: translateX(0) translateY(0);
-    }
-    100% {
-      transform: translateX(0) translateY(space(1));
-    }
-  }
-
-  @keyframes slide-top-rotate {
-    0% {
-      transform: translateX(0) translateY(0) rotate(45deg);
-    }
-    100% {
-      transform: translateX(0) translateY(space(1)) rotate(45deg);
-    }
-  }
-}
-
-$min: 3rem;
-$max: 4rem;
-
-@media (min-width: 1024px) {
-  .asd20-covid-header {
-    display: grid;
-    grid-template-columns: space(3) repeat(5, 1fr space(3)) 1fr space(3);
-    grid-template-rows: repeat(3, space(1)) min-content min-content min-content auto repeat(
-        3,
-        space(1)
-      );
-
-    margin-bottom: space(-3);
-
-    &::before {
-      content: '';
-      display: block;
-      position: relative;
-      top: auto;
-      bottom: auto;
-      left: auto;
-      right: auto;
-      background-color: asd20-swatch('background-alt');
-      background-image: url('/images/covid-header-background.jpg');
-      background-position: right bottom;
-      background-size: 100% auto;
-      background-repeat: none;
-      grid-column: 1 / -2;
-      grid-row: 1 / -4;
-    }
-
-    &::after {
-      content: '';
-      height: auto;
-      display: block;
-      position: relative;
-      z-index: -1;
-      top: auto;
-      bottom: auto;
-      left: auto;
-      right: auto;
-      background: asd20-swatch('background-dark');
-      transform: translate3d(0, calc(5% * var(--scroll-progress)), 0);
-      margin-left: space(2);
-      grid-column: 2 / -1;
-      grid-row: 3 / -2;
-    }
-
-    &::v-deep .asd20-district-logo {
-      margin-top: space(-0.75);
-      --fill-one: #{asd20-color('brand-blue')};
-      --fill-two: #{asd20-color('brand-gray')};
-      & + .asd20-breadcrumb {
-        margin-top: space(2);
-      }
-    }
-
-    &__top {
-      margin: 0;
-      z-index: 3;
-      grid-column: 2/5;
-      grid-row: 4/5;
-      &::v-deep .asd20-breadcrumb {
-        margin-bottom: space(-0.5);
-      }
-    }
-
-    h1 {
-      position: relative;
-      grid-column: 2 / 9;
-      grid-row: 5 / 6;
-      box-sizing: border-box;
-      justify-content: flex-start;
-      padding: 0 space(2) 0 0;
-      background: none;
-      z-index: 1;
-      margin: 0 0 space(1) 0;
-      @include asd20-font(2.5, $font-family-headlines, 1.1, 700);
-    }
-
-    &__top + h1 {
-      margin-top: space(2);
-    }
-
-    &__lead {
-      grid-column: 2 / 9;
-      grid-row: 6 / 7;
-      margin: 0 space(2) space(0) 0;
-      padding: 0 0 0 0;
-      background: transparent;
-      color: asd20-swatch('background-dark');
-      // font-size: 1.75rem;
-      @include asd20-font(1.5, $font-family-headlines, 1.2, normal);
-    }
-
-    h1 + &__lead {
-      margin-top: space(1);
-    }
-
-    &__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);
-      margin-top: space(2);
-      grid-column: 2 / auto;
-      grid-row: 7 / -1;
-      // 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: block;
-      position: relative;
-      bottom: auto;
-      left: auto;
-      right: auto;
-      top: auto;
-      grid-column: 9 / -1;
-      grid-row: 4 / -3;
-      z-index: 0;
-      height: auto;
-      margin: 0;
-      padding: 0;
-
-      img {
-        display: block;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        // object-position: 0 0;
-      }
-    }
-
-    &__aside {
-      position: relative;
-      bottom: auto;
-      left: auto;
-      right: auto;
-      top: auto;
-      grid-column: 9 / -1;
-      grid-row: 4 / -3;
-      z-index: 0;
-      height: auto;
-      margin-left: 0;
-      padding: space(2);
-      display: flex;
-      flex-direction: column;
-      align-items: stretch;
-      justify-content: flex-start;
-      height: min-content;
-      align-self: end;
-      &::before {
-        display: none;
-      }
-    }
-
-    &__aside + &__call-to-action {
-      margin-top: 0;
-    }
-
-    &--has-cta {
-      margin-bottom: 0;
-      h1 {
-        margin-bottom: 0;
-      }
-      .asd20-covid-header__call-to-action {
-        margin: space(1) 0 space(2) 0;
-      }
-    }
-
-    &--fullscreen {
-      min-height: 100vh;
-      margin-bottom: 0;
-      &::before {
-        grid-column: 1 / 7;
-        grid-row: 1 / -1;
-        transform: translate3d(0, calc(5% * var(--scroll-progress)), 0);
-      }
-      &::after {
-        grid-column: -4 / -1;
-        grid-row: 4 / -1;
-        transform: translate3d(0, calc(10% * var(--scroll-progress)), 0);
-      }
-      h1 {
-        grid-column: 2 / 6;
-      }
-      .asd20-covid-header__image {
-        grid-column: 7 / -2;
-        grid-row: 3 / -1;
-        margin-bottom: 0;
-      }
-      .asd20-covid-header__aside {
-        grid-column: 6 / -2;
-        grid-row: 3 / -1;
-      }
-      .asd20-covid-header__call-to-action {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        z-index: 2;
-        grid-column: 2 / 7;
-        grid-row: 6 / -4;
-        margin-right: 0;
-        margin-bottom: 0 !important;
-        // background: asd20-swatch('primary');
-        // padding: space(1);
-        transform: translate3d(0, calc(-25% * var(--scroll-progress)), 0);
-        .asd20-button {
-          // border: 2px solid asd20-swatch('primary', 1);
-          flex-grow: 1;
-        }
-      }
-    }
-
-    .scroll-down-indicator {
-      display: flex;
-      position: relative;
-      z-index: 3;
-      // outline: 1px solid red;
-      grid-column: 6 / 9;
-      grid-row: -5 / -4;
-      align-self: end;
-      justify-self: center;
-    }
-  }
-}
-
-@media (min-width: 1300px) {
-  .asd20-covid-header {
-    &--fullscreen {
-      &::before {
-        grid-column: 1 / 6;
-        grid-row: 1 / -1;
-        transform: translate3d(0, calc(5% * var(--scroll-progress)), 0);
-      }
-
-      .asd20-covid-header__image {
-        grid-column: 6 / -2;
-        grid-row: 3 / -1;
-        margin-bottom: 0;
-      }
-    }
-  }
-}
-</style>

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

@@ -1,33 +0,0 @@
-import { storiesOf } from '@storybook/vue'
-import Asd20GraduationHeader from '.'
-
-const info = {
-  summary: 'Asd20GraduationHeader',
-}
-
-const wrapper = {
-  components: { Asd20GraduationHeader },
-  data: () => ({
-    pageHeaderContent: {
-      heading: '',
-      lead: '',
-      imageUrl: '',
-      imageCaption: '',
-      callsToAction: [
-        { label: 'Ceremony Details', url: '/2021-graduation' },
-        { label: 'Watch Livestreams', url: '/2021-graduation-videos' },
-      ],
-      detailLink: '',
-      detailLinkLabel: '',
-    },
-  }),
-}
-
-storiesOf('Organisms - Asd20GraduationHeader', module).add(
-  'Default',
-  () => ({
-    ...wrapper,
-    template: `<div>GRAADUAsdsT<Asd20GraduationHeader v-bind="pageHeaderContent"></Asd20GraduationHeader></div>`,
-  }),
-  { info }
-)