Cloud Cover and standardized Container padding (#1027)

Author: tylersticka

.changeset/cool-squids-allow.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add standard padding modifiers for container object

.changeset/purple-beers-rhyme.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add Cloud Cover component

package-lock.json

@@ -85,6 +85,7 @@
     "npm-run-all": "4.1.5",
     "postcss-inline-svg": "4.1.0",
     "postcss-loader": "3.0.0",
+    "postcss-media-minmax": "4.0.0",
     "prettier": "2.1.2",
     "raw-loader": "4.0.2",
     "remark-preset-lint-recommended": "4.0.1",

package.json

@@ -3,5 +3,6 @@ module.exports = {
     require('postcss-inline-svg')({
       paths: ['./src/assets'],
     }),
+    require('postcss-media-minmax')(),
   ],
 };

postcss.config.js

@@ -0,0 +1,311 @@
+@use "../../design-tokens/breakpoint.yml";
+@use "../../design-tokens/colors.yml";
+@use "../../mixins/ms";
+
+/// We can't use `grid-gap` exclusively due to some containers only being present
+/// some of the time, so we re-use this value for `grid-gap` and for `margin`
+/// later on.
+///
+/// @type Number
+/// @access private
+
+$_gap: ms.step(1);
+
+/// The ideal cloud size is a factor of both the viewport width and height, and
+/// we size other elements based on factors of this value. This function returns
+/// that size as a `calc`, optionally with an `$amount` for partial or multiple
+/// instances of that value.
+///
+/// This really wouldn't be necessary if Sass would play nice with a variable
+/// declaration for `(14vh + 4vw)` (without `calc`), but it always tries to
+/// crunch those numbers together.
+///
+/// @param {Number} $amount [1] - Optional multiplier for default space.
+/// @param {Number} $vh [14vh] - Amount of horizontal space in the result.
+/// @param {Number} $vw [14vw] - Amount of vertical space in the result.
+/// @return {Calc}
+/// @access private
+
+@function _cloud-space($amount: 1, $vh: 14vh, $vw: 4vw) {
+  @if $amount == 1 {
+    @return calc(#{$vh} + #{$vw});
+  }
+
+  @return calc((#{$vh} + #{$vw}) * #{$amount});
+}
+
+/**
+ * The topmost containing element for this component. We keep most layout logic
+ * off of this so it can be used with `o-container`.
+ *
+ * 1. This is only required to prevent Safari from showing subpixel artifacts
+ *    at the bottom of bottom-aligned imagery (specifically the clouds).
+ * 2. Allows us to position clouds absolutely relative to this container.
+ */
+
+.c-cloud-cover {
+  overflow: hidden; /* 1 */
+  position: relative; /* 2 */
+}
+
+/**
+ * The pseudo elements for background and foreground clouds.
+ *
+ * 1. Safari often renders subpixel artifacts on the bottom edge, causing a
+ *    visible line below the clouds. As long as the container has `overflow:
+ *    hidden` set, this should prevent that from being visible.
+ */
+
+.c-cloud-cover::before,
+.c-cloud-cover::after {
+  background-position: bottom right;
+  background-repeat: no-repeat;
+  bottom: -1px; /* 1 */
+  content: '';
+  height: _cloud-space();
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  width: 100%;
+
+  @media (width >= breakpoint.$m) {
+    width: 50%;
+  }
+}
+
+/**
+ * The background clouds. We adjust the colors and viewboxes here rather than
+ * in the SVG to give us better control of the style and
+ * composition in this context.
+ *
+ * 1. These sizes correspond to the cloud's proportion to the largest cloud.
+ */
+
+.c-cloud-cover::before {
+  background-image: svg-load(
+      'clouds/medium.svg',
+      fill=colors.$primary-brand-lighter,
+      width= '480',
+      height= '220',
+      viewBox= '0 0 480 220'
+    ),
+    svg-load(
+      'clouds/small.svg',
+      fill=colors.$primary-brand-light,
+      width= '580',
+      height= '140',
+      viewBox= '0 0 580 140'
+    );
+  background-size: auto (220 / 300 * 100%), auto (140 / 300 * 100%); /* 1 */
+}
+
+/**
+ * The foreground cloud.
+ */
+
+.c-cloud-cover::after {
+  background-image: svg-load(
+    'clouds/large.svg',
+    fill=colors.$text-light-emphasis,
+    width= '320',
+    height= '300',
+    viewBox= '0 0 320 300'
+  );
+  background-position: bottom right;
+  background-size: auto 100%;
+  z-index: 2;
+}
+
+/**
+ * This element is where the layout is defined. It's most likely the
+ * `max-width` container (if present), which may already include horizontal
+ * whitespace.
+ *
+ * 1. We use rows instead of padding/margin for whitespace to allow some scenes
+ *    to overlap the clouds.
+ * 2. We want this content to cover the background clouds, but not the
+ *    foreground clouds.
+ */
+
+.c-cloud-cover__inner {
+  align-items: center;
+  display: grid;
+  grid-column-gap: $_gap;
+  grid-template-areas:
+    '.'
+    'scene'
+    'content'
+    'extra'
+    '.';
+  grid-template-rows:
+    _cloud-space(0.5)
+    repeat(3, auto)
+    _cloud-space(); /* 1 */
+  position: relative; /* 2 */
+  z-index: 1; /* 2 */
+
+  /**
+   * 1. At larger sizes when the scene imagery occupies the rightmost column,
+   *    we establish rows that are half the height of the clouds to allow more
+   *    overlap.
+   */
+
+  @media (width >= breakpoint.$m) {
+    grid-template-areas:
+      '. .'
+      '. scene'
+      'content extra'
+      '. .'
+      '. .';
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows:
+      repeat(2, _cloud-space(0.5))
+      auto
+      repeat(2, _cloud-space(0.5)); /* 1 */
+  }
+}
+
+/**
+ * For scenes that are meant to intersect with the horizon, we extend the
+ * scene area to the bottom row. (We have to do things a bit differently at
+ * larger sizes, which you'll see later.)
+ */
+
+.c-cloud-cover--horizon-scene .c-cloud-cover__inner {
+  @media (width < breakpoint.$m) {
+    grid-template-areas:
+      '.'
+      'content'
+      'extra'
+      'scene'
+      'scene';
+  }
+}
+
+/**
+ * The content container.
+ */
+
+.c-cloud-cover__content {
+  grid-area: content;
+}
+
+/**
+ * The optional _extra_ content container, intended for things like forms or
+ * other calls to action.
+ */
+
+.c-cloud-cover__extra {
+  grid-area: extra;
+
+  /**
+   * Because we don't want lingering row gaps when there is no extra, we must
+   * use margin to avoid this running up against adjacent content.
+   */
+
+  @media (width < breakpoint.$m) {
+    margin-top: $_gap;
+  }
+}
+
+/**
+ * The optional scene, where any visual objects in the sky will be displayed.
+ *
+ * 1. To avoid content jumps as images load, we'll be absolute-positioning the
+ *    visual objects within this element.
+ * 2. Without this, a cell with only absolute-positioned elements may take up
+ *    zero space.
+ */
+
+.c-cloud-cover__scene {
+  grid-area: scene;
+  position: relative; /* 1 */
+  width: 100%; /* 2 */
+
+  /**
+   * At smaller breakpoints, we size the scene so that it is always twice as
+   * large as the clouds.
+   */
+
+  @media (width < breakpoint.$m) {
+    height: _cloud-space(2);
+    margin-bottom: $_gap;
+  }
+
+  /**
+   * At larger breakpoints, we allow more overlap between the clouds and imagery
+   * and size based on available space.
+   */
+
+  @media (width >= breakpoint.$m) {
+    grid-row-end: span 3;
+    height: 100%;
+  }
+}
+
+/**
+ * Scene adjustments for when the scene is intended to intersect with the
+ * horizon.
+ */
+
+.c-cloud-cover--horizon-scene .c-cloud-cover__scene {
+  /**
+   * At smaller sizes we increase the height to account for the additional
+   * cloud overlap, and swap the edge of the gap (since the content order is
+   * the reverse of the default).
+   */
+
+  @media (width < breakpoint.$m) {
+    height: _cloud-space(3);
+    margin-bottom: 0;
+    margin-top: $_gap;
+  }
+
+  /**
+   * At larger sizes all we have to do is increase the row span. We can't rely
+   * on areas alone to do this since the `scene` and `extra` areas overlap.
+   */
+
+  @media (width >= breakpoint.$m) {
+    grid-row-end: span 4;
+  }
+}
+
+/**
+ * The actual object within the scene, for example an `img` or `svg`.
+ *
+ * 1. Cover and fill the entire scene.
+ * 2. Adjust and reposition the image within that container.
+ */
+
+.c-cloud-cover__scene-object {
+  height: 100%; /* 1 */
+  left: 0; /* 1 */
+  object-fit: contain; /* 2 */
+  object-position: center; /* 2 */
+  position: absolute; /* 1 */
+  top: 0; /* 1 */
+  width: 100%; /* 1 */
+
+  /**
+   * At larger sizes, it looks a bit more balanced to start adding more space
+   * to the right rather than on both sides.
+   */
+
+  @media (width >= breakpoint.$m) {
+    object-position: left center;
+  }
+}
+
+/**
+ * When the scene is intended to intersect with the horizon, the object must
+ * be positioned along the bottom.
+ */
+
+.c-cloud-cover--horizon-scene .c-cloud-cover__scene-object {
+  object-position: center bottom;
+
+  @media (width >= breakpoint.$m) {
+    object-position: left bottom;
+  }
+}