@asd20/ui 3.2.1044 → 3.3.0

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

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

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

@@ -1,131 +0,0 @@
-<template>
-  <section class="asd20-back-to-school-header" role="banner">
-    <h2 v-html="heading"></h2>
-    <p v-html="lead"></p>
-
-    <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: 'Asd20BackToSchoolHeader',
-  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-back-to-shool-header {
-  --k-bg: #0d2035;
-  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(2) space(1) space(1) space(1);
-
-  h2 {
-    @include fluid-type($base-font-size * 1.5, $base-font-size * 4);
-    font-weight: 900;
-    line-height: 1.1;
-    color: white;
-    margin-bottom: 1rem;
-  }
-
-  p {
-    @include fluid-type($base-font-size * 1, $base-font-size * 2);
-    @include asd20-font(1, $font-family-headlines);
-    margin-bottom: 0.5rem;
-    color: asd20-swatch('background-dark', 6);
-  }
-
-  & ::v-deep .asd20-button {
-    text-align: center;
-
-    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
-    border: none;
-    font-size: 0.875rem !important;
-    font-weight: normal;
-    background: asd20-swatch('accent-one');
-    padding: space(0.5) space(1);
-    &:focus {
-      @include asd20-focus;
-    }
-    & + .asd20-button {
-      margin: space(0.5) 0 0 0;
-    }
-  }
-
-  &::before {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: space(1);
-    height: space(1.5);
-    background-color: black;
-    opacity: 0.25;
-  }
-}
-@media (min-width: 1024px) {
-  .asd20-back-to-shool-header {
-    padding: space(3) 50vw space(3) space(3);
-
-    background: var(--k-bg) url(/statics/images/top-right.svg) right top / 50%
-      auto no-repeat;
-
-    &::before {
-      content: '';
-      display: block;
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: space(3);
-      height: space(2);
-      background-color: black;
-      opacity: 0.25;
-    }
-
-    &::after {
-      content: '';
-      display: block;
-      position: absolute;
-      top: 0;
-      left: space(3);
-      right: 0;
-      height: space(1);
-      background-color: asd20-swatch('primary');
-    }
-
-    h2 {
-      @include fluid-type($base-font-size * 2.5, $base-font-size * 3);
-      background-size: 200% auto;
-    }
-  }
-}
-</style>

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

@@ -1,35 +0,0 @@
-import { storiesOf } from '@storybook/vue'
-import Asd20CampaignPageHeader from '.'
-
-const info = {
-  summary: 'Asd20CampaignPageHeader',
-}
-
-const wrapper = {
-  components: { Asd20CampaignPageHeader },
-  data: () => ({
-    pageHeaderContent: {
-      heading: 'Your student.<br/>Your choice.',
-      lead:
-        'In Colorado families can apply to any K-12 school. Find the right school for your student. <br/>Apply before Feb. 28, 2020.',
-      imageUrl:
-        '/statics/images/home-images/academy-district-20-choice-2020.jpg',
-      imageCaption: '',
-      callsToAction: [
-        { label: 'Browse Schools', url: 'https://schools.asd20.org' },
-        { label: 'Apply & Enroll', url: '/school-choice' },
-      ],
-      detailLink: '#',
-      detailLinkLabel: 'Test label link',
-    },
-  }),
-}
-
-storiesOf('Organisms - Asd20CampaignPageHeader', module).add(
-  'Default',
-  () => ({
-    ...wrapper,
-    template: `<Asd20CampaignPageHeader v-bind="pageHeaderContent" fullscreen></Asd20CampaignPageHeader>`,
-  }),
-  { info }
-)

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

@@ -1,512 +0,0 @@
-<template>
-  <header
-    v-scroll-track.window
-    class="asd20-campaign-page-header"
-    :class="classes"
-    role="banner"
-  >
-    <div v-if="$slots.top" class="asd20-campaign-page-header__top">
-      <slot name="top" />
-    </div>
-
-    <h1 v-if="heading" v-html="heading" />
-    <div v-if="lead" class="asd20-campaign-page-header__lead">
-      <span v-html="lead"></span>
-      <a
-        class="detail-link"
-        v-if="detailLink && !isDetailPage"
-        :href="detailLink"
-      >
-        {{ detailLinkLabel }}
-      </a>
-    </div>
-
-    <figure
-      v-if="imageUrl && !$slots.aside"
-      class="asd20-campaign-page-header__image"
-    >
-      <img :src="imageUrl" :alt="imageCaption" />
-    </figure>
-
-    <aside class="asd20-campaign-page-header__aside" v-if="$slots.aside">
-      <slot name="aside" />
-    </aside>
-
-    <div
-      v-if="callsToAction.length > 0"
-      class="asd20-campaign-page-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: 'Asd20CampaignPageHeader',
-  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-campaign-page-header--fullscreen': this.fullscreen,
-        'asd20-campaign-page-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-campaign-page-header {
-  position: relative;
-  display: flex;
-  flex-shrink: 0;
-  flex-direction: column;
-  color: var(--website-header__title-color);
-  box-sizing: border-box;
-  a.detail-link {
-    color: var(--color__primary);
-    text-decoration: none;
-    box-shadow: 0 2px 0 0 #9fabc4;
-  }
-
-  &__top {
-    --fill-one: rgba(255, 255, 255, 1);
-    --fill-two: rgba(255, 255, 255, 0.625);
-
-    position: relative;
-    order: -3;
-    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);
-    }
-  }
-
-  &::v-deep .asd20-notification-group--status {
-    background: white !important;
-    right: 0;
-    order: -3;
-  }
-
-  h1 {
-    position: relative;
-    color: var(--website-header__title-color);
-    @include asd20-font(
-      2,
-      var(--website-typography__font-family-headlines),
-      1.1,
-      700
-    );
-    margin-top: space(-1);
-    margin-right: space(1);
-    margin-bottom: space(1);
-    background: var(--color__tertiary);
-    padding: space(1) space(1) space(1) space(1);
-    z-index: 1;
-    line-height: 1.1;
-  }
-
-  &__lead {
-    position: relative;
-    z-index: 1;
-    color: var(--color__secondary);
-    padding: 0 space(1) space(2) space(1);
-    margin-right: space(1);
-    margin-bottom: space(-1);
-    @include asd20-font(1, var(--website-typography__font-family-headlines));
-    &:last-child {
-      margin-bottom: space(2);
-      padding-bottom: space(1);
-    }
-    background: var(--color__tertiary);
-  }
-
-  h1 + &__lead {
-    margin-top: space(-0.5);
-  }
-
-  &__call-to-action {
-    display: flex;
-    // background: var(--color__primary);
-    // padding: space(1) space(1);
-    margin-left: space(1);
-    margin-right: space(1);
-    z-index: 1;
-  }
-
-  ::v-deep .asd20-button {
-    text-align: center;
-    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25) !important;
-    border: none;
-    color: var(--website-button__reverse-foreground-color);
-    & + .asd20-button {
-      margin: 0 0 0 space(0.5);
-    }
-  }
-
-  &__image {
-    order: -2;
-    padding: 0;
-    margin: 0;
-    object-fit: cover;
-    overflow: hidden;
-    img {
-      width: 100%;
-      height: auto;
-      margin: 0;
-    }
-    // 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: var(--color__tertiary);
-    }
-
-    &::after {
-      content: '';
-      display: block;
-      position: absolute;
-      z-index: -1;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      background-color: var(--website-page__background-color);
-    }
-  }
-  &__aside + &__call-to-action {
-    margin-top: space(-2);
-  }
-
-  &--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);
-    }
-  }
-  a.detail-link {
-    color: #0e276b;
-    text-decoration: none;
-    box-shadow: 0 2px 0 0 #9fabc4;
-  }
-}
-
-$min: 3rem;
-$max: 4rem;
-
-@media (min-width: 1024px) {
-  .asd20-campaign-page-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 auto auto min-content repeat(
-        3,
-        space(1)
-      );
-
-    // margin-bottom: space(-3);
-
-    &::before {
-      content: '';
-      display: block;
-      position: relative;
-      top: auto;
-      bottom: auto;
-      left: auto;
-      right: auto;
-      z-index: -1;
-      // background: var(--color__tertiary);
-      background-color: var(--website-card__reverse-background-color);
-      background-image: var(--website-texture__reverse);
-      background-position-y: top;
-      background-size: 800px auto;
-      transform: translate3d(0, calc(5% * var(--scroll-progress)), 0);
-      grid-column: 1 / 7;
-      grid-row: 1 / -1;
-    }
-
-    &::after {
-      content: '';
-      height: auto;
-      display: block;
-      position: relative;
-      z-index: -2;
-      top: auto;
-      bottom: auto;
-      left: auto;
-      right: auto;
-      background: var(--color__tertiary);
-      transform: translate3d(0, calc(10% * var(--scroll-progress)), 0);
-      margin-left: 0;
-      grid-column: 2 / -2;
-      grid-row: 1 / -2;
-    }
-
-    &::v-deep .asd20-district-logo {
-      margin-top: space(-0.75);
-      & + .asd20-breadcrumb {
-        margin-top: space(2);
-      }
-    }
-
-    &__top {
-      --fill-one: var(--color__primary);
-      --fill-two: var(--color__secondary-t50);
-      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-start: 5;
-      box-sizing: border-box;
-      justify-content: flex-end;
-      padding: 0;
-      background: none;
-      z-index: 1;
-      margin: space(1) 0 space(1) 0;
-      @include asd20-font(
-        2.5,
-        var(--website-typography__font-family-headlines),
-        1.2,
-        700
-      );
-    }
-
-    &__lead {
-      grid-column: 1 / 7;
-      grid-row: 6 / 7;
-      margin: 0 space(0) space(0) 0;
-      padding: space(1) space(1) space(2) space(3);
-      background: rgba(255, 255, 255, 0.9);
-      font-size: 1.5rem;
-    }
-
-    &__call-to-action {
-      // Reset mobile styles
-      position: relative;
-      box-sizing: border-box;
-      grid-column: 2 / 6;
-      grid-row-start: 6;
-      margin: 0;
-      display: flex;
-      transform: translate3d(0, calc(-75% * var(--scroll-progress)), 0);
-      z-index: 2;
-      height: min-content;
-      align-self: end;
-      bottom: space(-1.5);
-      .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: 1 / -1;
-      grid-row: 1 / -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;
-    }
-
-    // &--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-campaign-page-header__image {
-    //     grid-column: 1 / -1;
-    //     grid-row: 1 / -4;
-    //     margin-bottom: 0;
-    //   }
-    //   .asd20-campaign-page-header__aside {
-    //     grid-column: 6 / -2;
-    //     grid-row: 3 / -1;
-    //   }
-    //   .asd20-campaign-page-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: var(--color__primary);
-    //     // padding: space(1);
-    //     transform: translate3d(0, calc(-25% * var(--scroll-progress)), 0);
-    //     .asd20-button {
-    //       // border: 2px solid var(--color__primary-t10);
-    //       flex-grow: 1;
-    //     }
-    //   }
-    // }
-  }
-}
-
-@media (min-width: 1300px) {
-  .asd20-campaign-page-header {
-    &--fullscreen {
-      // &::before {
-      //   grid-column: 1 / 6;
-      //   grid-row: 1 / -1;
-      //   transform: translate3d(0, calc(5% * var(--scroll-progress)), 0);
-      // }
-
-      // .asd20-campaign-page-header__image {
-      //   grid-column: 1 / -1;
-      //   grid-row: 1 / -4;
-      //   margin-bottom: 0;
-      // }
-    }
-  }
-}
-</style>