@asd20/ui 3.2.1044 → 3.3.0

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

@@ -1,306 +0,0 @@
-<template>
-  <header
-    v-scroll-track.window
-    class="asd20-return-header"
-    :class="classes"
-    role="banner"
-  >
-    <div v-if="$slots.top" class="asd20-return-header__top">
-      <slot name="top" />
-    </div>
-
-    <div class="asd20-return-header__text">
-      <h1>
-        Educating and&nbsp;inspiring
-        students&nbsp;to&nbsp;<strong>thrive</strong>
-      </h1>
-      <p>
-        Rooted in strategy and guided&nbsp;by&nbsp;our&nbsp;mission, vision&nbsp;and&nbsp;values.
-      </p>
-    </div>
-
-    <div
-      v-if="callsToAction.length > 0"
-      class="asd20-return-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: 'Asd20ReturnToSchoolHeader',
-  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-return-header--fullscreen': this.fullscreen,
-        'asd20-return-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-return-header {
-  position: relative;
-  display: flex;
-  flex-shrink: 0;
-  flex-direction: column;
-  color: asd20-swatch('primary');
-  box-sizing: border-box;
-  margin-bottom: space(1);
-
-  & ::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: asd20-swatch('background-alt')
-      url('/statics/images/home-images/girl-wearing-sunglasses.jpg') 0 50% /
-      cover no-repeat;
-  }
-  &::after {
-    content: '';
-    display: block;
-    position: absolute;
-  }
-
-  &__top {
-    --fill-one: rgba(255, 255, 255, 1);
-    --fill-two: rgba(255, 255, 255, 0.625);
-
-    position: relative;
-    z-index: 100;
-    padding: 0;
-
-    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: 0;
-    z-index: 2;
-    padding: space(1) space(2) space(0) space(1);
-
-    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: asd20-swatch('primary');
-      small {
-        font-size: 0.75em;
-        font-style: normal;
-        font-weight: normal;
-        line-height: 1.2;
-        text-transform: inherit;
-        color: asd20-swatch('background-dark');
-      }
-      strong {
-        position: relative;
-        color: white;
-        display: inline-block;
-        overflow: visible;
-        &:before {
-          content: '';
-          display: block;
-          position: absolute;
-          top: 0;
-          left: -0.4em;
-          width: calc(100% + 0.8em);
-          height: 100%;
-          background: transparent url('/statics/images/swoosh.svg') 50% 50% /
-            100% auto no-repeat;
-          color: asd20-swatch('accent-one');
-          z-index: -1;
-        }
-      }
-    }
-
-    p {
-      margin-top: space(0.25);
-      @include fluid-type($base-font-size * 1, $base-font-size * 2);
-      @include asd20-font(1, $font-family-headlines);
-      color: asd20-swatch('background-dark');
-    }
-  }
-
-  &__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: space(1) space(1) space(1) space(1);
-    margin-bottom: space(-0.75);
-    // 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;
-    font-weight: normal;
-    background: asd20-swatch('primary');
-    padding: space(0.5) space(1);
-    &: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-return-header {
-    margin-bottom: space(0);
-
-    & ::v-deep .asd20-district-logo {
-      margin-top: space(-0.5);
-      margin-right: auto;
-      --fill-one: #162b68;
-      --fill-two: #fff;
-      & + .asd20-breadcrumb {
-        margin-top: space(2);
-      }
-    }
-
-    &__top {
-      margin: space(3) space(3) space(2) space(3);
-      padding: 0;
-
-      z-index: 3;
-    }
-
-    &__text {
-      padding: space(3) space(0) space(0) space(3);
-      max-width: 40vw;
-      h1 {
-        @include asd20-font(2.5, $font-family-headlines, 1.1, 700);
-      }
-    }
-
-    &__call-to-action {
-      padding: space(1) space(3) space(1) space(3);
-      margin-bottom: space(4);
-
-      .asd20-button {
-        padding: space(1);
-        & + .asd20-button {
-          margin: 0 0 0 space(1);
-        }
-
-        font-size: 1.25rem !important;
-      }
-    }
-  }
-}
-</style>