Add cloudy card modifier (#2143)

Author: tylersticka

.changeset/fast-radios-share.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add `c-card--cloudy` modifier for branded promotions

src/assets/clouds/all.svg

@@ -11,6 +11,7 @@
 @use '../../mixins/headings';
 @use '../../mixins/media-query';
 @use '../../mixins/ms';
+@use '../../mixins/spacing';
 @use '../../mixins/theme';
 
 /// We can't use `grid-gap` exclusively due to some containers only being
@@ -39,6 +40,20 @@ $_cover-gap: ms.step(1, 1rem);
 
 $_focus-overflow: (size.$edge-large * -1);
 
+/// The cloudy modifier adds clouds to the bottom right corner and also applies
+/// some fluid padding to accommodate. The clouds feel best when they are sized
+/// just a _tad_ larger than this fluid padding.
+///
+/// @type Number
+/// @access private
+
+$_cloud-height: fluid.fluid-clamp(
+  size.$padding-container-vertical-min * 1.33,
+  size.$padding-container-vertical-max * 1.33,
+  breakpoint.$s,
+  breakpoint.$m
+);
+
 /**
  * The main card container
  *
@@ -127,6 +142,57 @@ $_focus-overflow: (size.$edge-large * -1);
   }
 }
 
+/**
+ * Cloudy modifier
+ *
+ * Chrome and Safari often introduce little subpixel artifacts between the edge
+ * of a bottom-right image or positioned element that is sized responsively. To
+ * minimize this, we assume that this modifier will be shown on a default/light
+ * background, and we use a pseudo element for the cloud of the same color so
+ * we can offset it slightly (which overlays any artifacting).
+ *
+ * 1. On the element itself we can include the "background" clouds. These are
+ *    lower contrast so the artifacting is less noticeable, and they do not
+ *    match light backgrounds so we can't offset them.
+ * 2. We include more generous spacing to account for the clouds. It is still
+ *    theoretically possible for content to overlap the clouds, so this modifier
+ *    should be used carefully.
+ */
+
+.c-card--cloudy {
+  @include spacing.fluid-padding-block; /* 2 */
+  @include spacing.fluid-padding-inline; /* 2 */
+  background-image: svg-load('clouds/background.svg'); /* 1 */
+  background-position: bottom right;
+  background-repeat: no-repeat;
+  background-size: auto $_cloud-height;
+}
+
+/**
+ * Pseudo element used to position the cloud matching the container background,
+ * offset to obscure rounding artifacts.
+ *
+ * 1. Fluid sizing based on asset's natural dimensions, since we don't have an
+ *    `auto` width in this context.
+ * 2. Offsetting to obscure artifacts.
+ * 3. Prevent pointer events so that cloud can never block interactions (clicks,
+ *    text selection, etc.)
+ */
+
+.c-card--cloudy::before {
+  aspect-ratio: 580 / 220; /* 1 */
+  background-image: svg-load('clouds/foreground.svg');
+  background-position: bottom right;
+  background-repeat: no-repeat;
+  background-size: contain;
+  block-size: $_cloud-height; /* 1 */
+  content: '';
+  inset-block-end: -1px; /* 2 */
+  inset-inline-end: -1px; /* 2 */
+  pointer-events: none; /* 3 */
+  position: absolute;
+}
+
 /**
  * Header area
  *

src/assets/clouds/background.svg

@@ -1,5 +1,16 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import singleDemo from './demo/single.twig';
+// The '!!raw-loader!' syntax is a non-standard, Webpack-specific, syntax.
+// See: https://github.com/webpack-contrib/raw-loader#examples
+// For now, it seems likely Storybook is pretty tied to Webpack, therefore, we
+// are okay with the following Webpack-specific raw loader syntax. It's better
+// to leave the ESLint rule enabled globally, and only thoughtfully disable as
+// needed (e.g. within a Storybook docs page and not within an actual
+// component). This can be revisited in the future if Storybook no longer relies
+// on Webpack.
+// eslint-disable-next-line @cloudfour/import/no-webpack-loader-syntax
+import cloudyDemoSource from '!!raw-loader!./demo/cloudy.twig';
+import cloudyDemo from './demo/cloudy.twig';
 const singleDemoProps = (args = {}, storyId) => {
   const props = {
     heading_id: args.heading_id || `${storyId}-heading`,
@@ -194,6 +205,25 @@ When the card is a focal point and more contrast is desired, you may also attach
   </Story>
 </Canvas>
 
+## Cloudy
+
+The `c-card--cloudy` modifier is meant to pair with `c-card--contained` and `t-dark`. It should only be used for very specific promotional content within light containers (so the white cloud blends into the background). Additional fluid white space is added to account for the clouds.
+
+<Canvas>
+  <Story
+    name="Cloudy"
+    parameters={{
+      docs: {
+        source: {
+          code: cloudyDemoSource,
+        },
+      },
+    }}
+  >
+    {cloudyDemo.bind({})}
+  </Story>
+</Canvas>
+
 ## Template Properties
 
 - `class` (string): Append a class to the root element.

src/assets/clouds/foreground.svg

@@ -0,0 +1,26 @@
+{% embed '@cloudfour/components/card/card.twig' with {
+  tag_name: 'aside',
+  class: 'c-card--contained c-card--cloudy t-dark'
+} only %}
+  {% block content %}
+    <div class="o-rhythm o-rhythm--compact has-big-font-size">
+      {% include '@cloudfour/components/heading/heading.twig' with {
+        content: 'We’re Cloud Four',
+        level: 0,
+        weight: 'light'
+      } only %}
+      <p>
+        We’ve solved complex responsive web design and web development
+        challenges for ecommerce, healthcare, fashion, B2B, SAAS and non-profit
+        organizations.
+      </p>
+    </div>
+  {% endblock %}
+  {% block footer %}
+    {% include '@cloudfour/components/button/button.twig' with {
+      label: 'Hire our team',
+      href: 'https://cloudfour.com/and-you/',
+      class: 'c-button--primary'
+    } only %}
+  {% endblock %}
+{% endembed %}