@uqds/hero 0.1.0-alpha.0 → 1.0.0-alpha.1

package/dist/css/main.css

@@ -1 +1 @@
-.uq-hero{position:relative;background-color:#51247a;font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1rem;font-weight:500;line-height:1.5}.uq-hero__content{margin-left:1rem;margin-right:1rem;padding-left:.5rem;padding-right:.5rem;color:#fff;padding-top:3rem;padding-bottom:3rem;position:relative;z-index:2}@media(min-width: 32.5rem){.uq-hero__content{margin-left:auto;margin-right:auto;max-width:30.5rem}}@media(min-width: 37.5rem){.uq-hero__content{margin-left:3.25rem;margin-right:3.25rem;max-width:none}}@media(min-width: 64.25rem){.uq-hero__content{margin-left:auto;margin-right:auto;max-width:57.75rem}}@media(min-width: 75rem){.uq-hero__content{margin-left:8.375rem;margin-right:8.375rem;max-width:none}}@media(min-width: 90rem){.uq-hero__content{margin-left:auto;margin-right:auto;max-width:73.25rem}}@media(min-width: 37.5rem){.uq-hero__content{padding-left:.75rem;padding-right:.75rem}}@media(min-width: 75rem){.uq-hero__content{padding-left:1rem;padding-right:1rem}}@media(min-width: 37.5rem){.uq-hero__content{padding-top:6.5rem;padding-bottom:6.5rem}}.uq-hero__text .uq-hero__title{color:inherit;font-family:"Montserrat",Helvetica,Arial,sans-serif;font-size:2rem;margin-top:0;margin-bottom:.5rem}@media(min-width: 37.5rem){.uq-hero__text .uq-hero__title{font-size:2.5rem}}.uq-hero__text *:last-child{margin-bottom:0}.uq-hero__subtext{margin-bottom:1.5rem}.uq-hero__image{position:absolute;top:0;left:0;right:0;bottom:0;z-index:0}.uq-hero__image picture,.uq-hero__image img{position:absolute;height:100%;width:100%;top:0;left:0;object-fit:cover}.uq-hero__image::before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(100deg, rgb(81, 36, 122) 36%, transparent 70%);mix-blend-mode:normal;opacity:1;z-index:1}@media(min-width: 37.5rem){.uq-hero__image--small{display:none}}.uq-hero__image--small img{position:relative;height:auto}.uq-hero__image--large{display:none}@media(min-width: 37.5rem){.uq-hero__image--large{display:block}}@media(max-width: 37.4375rem){.uq-hero__image{position:relative;min-height:6rem}.uq-hero__image::before{background:linear-gradient(360deg, rgb(81, 36, 122) 3%, transparent 50%)}}.uq-hero--feature-image .uq-hero__content{padding-top:0}@media(min-width: 37.5rem){.uq-hero--feature-image .uq-hero__content{padding-top:6.5rem}}@media(min-width: 37.5rem){.uq-hero--feature-image .hero__text{width:50%}}@media(min-width: 37.5rem){.uq-hero--large .uq-hero__content{padding-top:10rem;padding-bottom:10rem}}
+:root{--hero-font-size-ul: 3rem;--hero-font-size-xxxxl: 2.5rem;--hero-spacing: 4.5rem;--hero-basic-spacing: 5rem;--hero-aspect-ratio: 2.35 / 1;--hero-large-aspect-ratio: 3 / 2;--hero-min-height: 336px;--hero-large-min-height: 500px;--hero-image-max-width: 790px;--hero-title-max-line-length: 518px}@media(max-width: 63.9375rem){:root{--hero-font-size-ul: 30px;--hero-font-size-xxxxl: 30px;--hero-basic-spacing: 2rem}}.uq-hero{background:#4b2271}@media(min-width: 64rem){.uq-hero{position:relative;padding:var(--hero-spacing) 0;min-height:var(--hero-min-height);display:flex;align-items:center}}@media(max-width: 63.9375rem){.uq-hero .uq-container{margin:0;padding:0}}.uq-hero__image{display:flex}@media(min-width: 64rem){.uq-hero__image{position:absolute;z-index:1;left:0;top:0;width:100%;height:100%}}@media(min-width: 64rem){.uq-hero__image::before{content:"";width:calc(50% - 3rem);flex-shrink:1}}.uq-hero__image img,.uq-hero__image picture{object-fit:cover;aspect-ratio:var(--hero-aspect-ratio);width:100%}@media(min-width: 64rem){.uq-hero__image img,.uq-hero__image picture{width:auto;height:100%;flex-shrink:0;max-width:var(--hero-image-max-width)}}.uq-hero__content{position:relative;background:#51247a;box-shadow:0 3px 24px 0 rgba(24,24,24,.1);padding:var(--layout-gap);margin-bottom:8px}@media(min-width: 64rem){.uq-hero__content{z-index:2;width:586px}}.uq-hero__content *{margin:0}.uq-hero__content::after{position:absolute;top:100%;left:0;content:"";height:8px;width:100%;border-radius:0 0 4px 4px;background:#40205d}.uq-hero__title{color:#fff;font-size:var(--hero-font-size-xxxxl)}.uq-hero__description{margin-top:1rem;font-size:1.125rem;color:#fff}.uq-hero__description,.uq-hero__description *{color:#fff;font-size:1.125rem}.uq-hero__button{margin-top:1.5rem}.uq-hero--light{background:unset}.uq-hero--light .uq-hero__content{background:#fff}.uq-hero--light .uq-hero__content::after{background:linear-gradient(90deg, #51247a 0%, 87%, #962a8b 100%)}.uq-hero--light .uq-hero__title{color:#51247a}.uq-hero--light .uq-hero__description,.uq-hero--light .uq-hero__description *{color:unset}@media(min-width: 64rem){.uq-hero--large{min-height:var(--hero-large-min-height)}}.uq-hero--large .uq-hero__image img,.uq-hero--large .uq-hero__image picture{aspect-ratio:var(--hero-large-aspect-ratio)}.uq-hero--large .uq-hero__title{font-size:var(--hero-font-size-ul)}.uq-hero-basic{background:#4b2271;position:relative}.uq-hero-basic__image{position:absolute;opacity:.2;width:100%;height:100%;top:0;left:0;z-index:1}.uq-hero-basic__image img,.uq-hero-basic__image picture{object-fit:cover;height:100%;width:100%;display:block}.uq-hero-basic__content{position:relative;z-index:2;color:#fff;padding:var(--hero-basic-spacing) 0}.uq-hero-basic__content a{color:#fff}.uq-hero-basic__eyebrow{font-weight:500;font-size:1rem;line-height:1.5;font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;display:block}.uq-hero-basic__title{font-size:var(--hero-font-size-xxxxl);color:#fff;margin:0;max-width:var(--hero-title-max-line-length)}.uq-hero-basic__back{margin-top:.5rem}.uq-hero-basic__back .uq-icon::before{width:16px;height:19px}.uq-hero-basic__tabs{position:relative;z-index:2;padding-top:1rem}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uqds/hero",
-  "version": "0.1.0-alpha.0",
+  "version": "1.0.0-alpha.1",
   "description": "Hero component",
   "keywords": [
     "uqds",
@@ -44,5 +44,5 @@
     "@uqds/core": "^1.2.0-alpha.0",
     "@uqds/grid": "^0.0.15-alpha.2"
   },
-  "gitHead": "78891f49ec037688e08f67f30a52691404325da7"
+  "gitHead": "53a77b5717f2c6808adfe23251e0b05cb93f002a"
 }

package/src/scss/_custom-properties.scss

@@ -0,0 +1,29 @@
+@use "@uqds/core/src/scss/global" as core;
+
+:root {
+  --hero-font-size-ul: #{core.$font-size-ul};
+  --hero-font-size-xxxxl: #{core.$font-size-xxxxl};
+
+  --hero-spacing: #{core.$space-uul};
+  --hero-basic-spacing: #{core.$space-uuul};
+
+  --hero-aspect-ratio: 2.35 / 1;
+  --hero-large-aspect-ratio: 3 / 2;
+
+  --hero-min-height: 336px;
+  --hero-large-min-height: 500px;
+
+  --hero-image-max-width: 790px;
+
+  --hero-title-max-line-length: 518px;
+}
+
+// Resize custom properties for tablet/mobile.
+@media #{core.$screen-lg-down} {
+  :root {
+    --hero-font-size-ul: 30px;
+    --hero-font-size-xxxxl: 30px;
+
+    --hero-basic-spacing: #{core.$space-xl};
+  }
+}

package/src/scss/_hero-basic.scss

@@ -0,0 +1,69 @@
+@use "@uqds/core/src/scss/global" as core;
+@use "@uqds/grid/src/scss/global" as grid;
+
+.uq-hero-basic {
+  background: core.$purple-600;
+  position: relative;
+}
+
+.uq-hero-basic__image {
+  position: absolute;
+  opacity: 0.2;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1;
+
+  & img,
+  & picture {
+    object-fit: cover;
+    height: 100%;
+    width: 100%;
+    display: block;
+  }
+}
+
+.uq-hero-basic__content {
+  position: relative;
+  z-index: 2;
+  color: core.$white;
+  padding: var(--hero-basic-spacing) 0;
+
+  & a {
+    color: core.$white;
+  }
+}
+
+.uq-hero-basic__eyebrow {
+  font-weight: core.$font-weight-medium;
+  font-size: core.$font-size-m;
+  line-height: core.$line-height;
+  font-family: core.$font-body;
+  text-transform: uppercase;
+  display: block;
+}
+
+.uq-hero-basic__title {
+  font-size: var(--hero-font-size-xxxxl);
+  color: core.$white;
+  margin: 0;
+  max-width: var(--hero-title-max-line-length);
+}
+
+.uq-hero-basic__back {
+  margin-top: core.$space-s;
+
+  & .uq-icon::before {
+    // Lock icon width to 16px.
+    width: 16px;
+    // Allow height to match <a> element.
+    height: 19px;
+  }
+}
+
+.uq-hero-basic__tabs {
+  position: relative;
+  z-index: 2;
+  padding-top: core.$space-m;
+}

package/src/scss/_hero.scss

@@ -0,0 +1,153 @@
+@use "@uqds/core/src/scss/global" as core;
+@use "@uqds/grid/src/scss/global" as grid;
+
+.uq-hero {
+  background: core.$purple-600;
+
+  @media #{core.$screen-lg-up} {
+    position: relative;
+    // On desktop the we set a min height and top/bottom padding.
+    // This will ensure heros expand in height when there is too much text.
+    padding: var(--hero-spacing) 0;
+    min-height: var(--hero-min-height);
+    display: flex;
+    align-items: center;
+  }
+
+  & .uq-container {
+    // On mobile/tablet .uq-hero__content provides padding and the
+    // container gutters are no longer needed.
+    @media #{core.$screen-lg-down} {
+      margin: 0;
+      padding: 0;
+    }
+  }
+}
+
+.uq-hero__image {
+  display: flex;
+
+  @media #{core.$screen-lg-up} {
+    position: absolute;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  &::before {
+    @media #{core.$screen-lg-up} {
+      content: "";
+      width: calc(50% - #{core.$space-xxxl});
+      flex-shrink: 1;
+    }
+  }
+
+  & img,
+  & picture {
+    object-fit: cover;
+    // The hero image uses this standard aspect ratio so it is always the
+    // same size.
+    aspect-ratio: var(--hero-aspect-ratio);
+    // On tablet/mobile the image size is based off the width of the page.
+    width: 100%;
+
+    @media #{core.$screen-lg-up} {
+      // On desktop the image size is based off the height of the hero.
+      width: auto;
+      height: 100%;
+      flex-shrink: 0;
+      // Set a max width which will ensure the image doesn't get too wide for
+      // heros that container a large amount of text.
+      max-width: var(--hero-image-max-width);
+    }
+  }
+}
+
+.uq-hero__content {
+  position: relative;
+  background: core.$purple-500;
+  box-shadow: 0 3px 24px 0 rgba(#181818, 0.1);
+  padding: var(--layout-gap);
+  margin-bottom: 8px;
+
+  @media #{core.$screen-lg-up} {
+    z-index: 2;
+    width: 586px;
+  }
+
+  & * {
+    margin: 0;
+  }
+
+  &::after {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    content: "";
+    height: 8px;
+    width: 100%;
+    border-radius: 0 0 4px 4px;
+    background: core.$purple-650;
+  }
+}
+
+.uq-hero__title {
+  color: core.$white;
+  font-size: var(--hero-font-size-xxxxl);
+}
+
+.uq-hero__description {
+  margin-top: core.$space-m;
+  font-size: core.$font-size-l;
+  color: core.$white;
+}
+
+.uq-hero__description,
+.uq-hero__description * {
+  color: core.$white;
+  font-size: core.$font-size-l;
+}
+
+.uq-hero__button {
+  margin-top: core.$space-l;
+}
+
+.uq-hero--light {
+  background: unset;
+
+  & .uq-hero__content {
+    background: core.$white;
+
+    &::after {
+      background: core.$purple-gradient;
+    }
+  }
+
+  & .uq-hero__title {
+    color: core.$purple-500;
+  }
+
+  & .uq-hero__description,
+  & .uq-hero__description * {
+    color: unset;
+  }
+}
+
+.uq-hero--large {
+  @media #{core.$screen-lg-up} {
+    min-height: var(--hero-large-min-height);
+  }
+
+  & .uq-hero__image {
+    & img,
+    & picture {
+      aspect-ratio: var(--hero-large-aspect-ratio);
+    }
+  }
+
+  & .uq-hero__title {
+    font-size: var(--hero-font-size-ul);
+  }
+}

package/src/scss/main.scss

@@ -1 +1,3 @@
-@use "component";
+@use "custom-properties";
+@use "hero";
+@use "hero-basic";

package/src/scss/_component.scss

@@ -1,144 +0,0 @@
-@use "@uqds/core/src/scss/global" as core;
-@use "@uqds/grid/src/scss/global" as grid;
-
-// Hero
-
-.uq-hero {
-  position: relative;
-  background-color: core.$purple-500;
-  font-family: core.$font-body;
-  font-size: core.$font-size-m;
-  font-weight: core.$font-weight-medium;
-  line-height: core.$line-height;
-
-  &__content {
-    @include grid.layout-containment;
-    @include grid.grid-col-padding;
-    color: white;
-    padding-top: 3rem;
-    padding-bottom: 3rem;
-    position: relative;
-    z-index: 2;
-
-    @media #{core.$screen-md-up} {
-      padding-top: 6.5rem;
-      padding-bottom: 6.5rem;
-    }
-  }
-
-  &__text {
-    & .uq-hero__title {
-      color: inherit;
-      font-family: core.$montserrat;
-      font-size: core.$font-size-xxxl;
-      margin-top: 0;
-      margin-bottom: core.$space-s;
-
-      @media #{core.$screen-md-up} {
-        font-size: core.$font-size-xxxxl;
-      }
-    }
-
-    & *:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  &__subtext {
-    margin-bottom: core.$space-l;
-  }
-
-  &__image {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 0;
-
-    & picture,
-    & img {
-      position: absolute;
-      height: 100%;
-      width: 100%;
-      top: 0;
-      left: 0;
-      object-fit: cover;
-    }
-
-    &::before {
-      content: "";
-      display: block;
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: linear-gradient(
-        100deg,
-        rgb(81, 36, 122) 36%,
-        transparent 70%
-      );
-      mix-blend-mode: normal;
-      opacity: 1;
-      z-index: 1;
-    }
-
-    &--small {
-      @media #{core.$screen-md-up} {
-        display: none;
-      }
-
-      & img {
-        position: relative;
-        height: auto;
-      }
-    }
-
-    &--large {
-      display: none;
-
-      @media #{core.$screen-md-up} {
-        display: block;
-      }
-    }
-
-    @media #{core.$screen-md-down} {
-      position: relative;
-      min-height: 6rem;
-
-      &::before {
-        background: linear-gradient(
-          360deg,
-          rgb(81, 36, 122) 3%,
-          transparent 50%
-        );
-      }
-    }
-  }
-
-  &--feature-image {
-    & .uq-hero__content {
-      padding-top: 0;
-
-      @media #{core.$screen-md-up} {
-        padding-top: 6.5rem;
-      }
-    }
-
-    & .hero__text {
-      @media #{core.$screen-md-up} {
-        width: 50%;
-      }
-    }
-  }
-
-  &--large {
-    & .uq-hero__content {
-      @media #{core.$screen-md-up} {
-        padding-top: core.$space-uuuuul;
-        padding-bottom: core.$space-uuuuul;
-      }
-    }
-  }
-}