Add a Draft Email prototype (#2109)

Author: gerardo-rodriguez

.changeset/sharp-lemons-hunt.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Added easeInOutSine and easeOutSine ease tokens

.changeset/wild-cougars-tie.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Updated Button component to support `id` attribute

src/components/button/button.twig

@@ -15,6 +15,9 @@
 
 <{{ tag_name }}
   class="c-button{% if class %} {{ class }}{% endif %}"
+  {% if id %}
+    id="{{ id }}"
+  {% endif %}
   {% if aria_disabled %}
     aria-disabled="{{ aria_disabled }}"
   {% endif %}

src/mixins/_button.scss

@@ -167,7 +167,7 @@
 @mixin content {
   /// We use opacity because it will not paint but it also won't remove the
   /// element's keyboard events (if any).
-  /// @link https: //stackoverflow.com/a/34529598
+  /// @link https://stackoverflow.com/a/34529598
   .is-loading & {
     opacity: 0;
   }

src/objects/button-group/button-group.scss

@@ -1,10 +1,11 @@
 @use '../../compiled/tokens/scss/size';
 
-/**
- * Button Group layout object
- * 1. Margins are used instead of Flexbox Gap due to browser support (consider
- *    changing to Flexbox Gap once browser support is better in the future).
- */
+///
+/// Button Group layout object
+///
+/// 1. Margins are used instead of Flexbox Gap due to browser support (consider
+///    changing to Flexbox Gap once browser support is better in the future).
+
 .o-button-group {
   --gap: #{size.$spacing-gap-button-group-default};
 
@@ -17,9 +18,23 @@
   }
 }
 
-/**
- * Full button width modifier
- */
-.o-button-group--grow > * {
-  flex: 1 1 0;
+///
+/// For use cases when a button has sibling elements, they can all be wrapped
+/// with an "item" element to maintain proper layout
+///
+
+.o-button-group__item {
+  display: flex;
+  position: relative;
+}
+
+///
+/// Full button-width modifier
+///
+
+.o-button-group--grow {
+  > *,
+  .o-button-group__item > * {
+    flex: 1 1 0;
+  }
 }

src/prototypes/draft-email-textarea/demo/demo.scss

@@ -0,0 +1,167 @@
+@use '../../../compiled/tokens/scss/size';
+@use '../../../compiled/tokens/scss/color';
+@use '../../../compiled/tokens/scss/ease';
+@use '../../../compiled/tokens/scss/transition';
+@use '../../../compiled/tokens/scss/z-index';
+@use 'sass:color' as sass-color;
+@use '../../../mixins/ms';
+
+///
+/// Tooltip styles
+///
+/// These Tooltip styles will be inlined in a Gutenberg Custom HTML block
+///
+/// TODO Consider making a Tooltip patterns component in the future
+///
+
+$tooltip-color-background: var(--theme-color-background-secondary);
+$tooltip-color-border: #{sass-color.change(
+    color.$brand-primary-darker,
+    $alpha: 0.4
+  )};
+$tooltip-color-shadow: #{sass-color.change(
+    color.$brand-primary-darker,
+    $alpha: 0.2
+  )};
+
+///
+/// 1. Positions tooltip vertically (below button)
+/// 2. Horizontally centers tooltip
+///
+
+._c-tooltip {
+  background: $tooltip-color-background;
+  border-radius: size.$border-radius-medium;
+  box-shadow: 0 0 0 size.$edge-medium $tooltip-color-border,
+    size.$edge-large size.$edge-large 0 size.$edge-medium $tooltip-color-shadow;
+  color: var(--theme-color-text-emphasis);
+  inset-block-start: 100%; // 1
+  inset-inline-start: 50%; // 2
+  opacity: 0;
+  padding: ms.step(-4);
+  position: absolute; // 2
+  transform: translateX(-50%); // 2
+  white-space: nowrap;
+  z-index: z-index.$alert;
+
+  ///
+  /// Tooltip arrow
+  ///
+  /// The tooltip arrow is made up of two arrows, the first a background arrow
+  /// that visually acts as the border and a second that sits on top as the
+  /// actual (lighter colored) arrow that visually connects with the tooltip body.
+  ///
+  /// 1. Magic number, design-based decision
+  /// 2. Bottom-align the arrows on top of each other
+  /// 3. The translateX value horizontally centers the arrows
+  /// 4. The translateY value vertically aligns the arrows to top of tooltip body
+  ///
+
+  &::before,
+  &::after {
+    border-color: transparent transparent
+      var(--arrow-color, $tooltip-color-border);
+    border-style: solid;
+    border-width: var(--arrow-size, 0.64em); // 1
+    content: '';
+    inset-block-end: var(--arrow-offset, 0); // 2
+    inset-inline-start: 50%; // 3
+    position: absolute; // 3
+    transform: translate(-50%, -2.4em); // 3, 4
+  }
+
+  ///
+  /// Foreground tooltip arrow
+  ///
+  /// Updates the values for the arrow that is overlaid on top of the background
+  /// arrow. Together, they form a bordered tooltip arrow.
+  ///
+  /// 1. Magic number, design-based decision. I eye-balled the size of the
+  ///    overlaid arrow so that the visual border appeared the same width as the
+  ///    tooltip body border.
+  /// 2. There was a 1px gap at some viewport sizes, this removed the gap
+  ///
+
+  &::after {
+    --arrow-color: #{$tooltip-color-background};
+    --arrow-size: 0.6em; // 1
+    --arrow-offset: -0.125em; // 2
+  }
+
+  ///
+  /// Shared animation state properties
+  ///
+
+  &.is-animating-intro,
+  &.is-animating-outro {
+    animation-duration: transition.$slow;
+    animation-fill-mode: both;
+  }
+
+  ///
+  /// Tooltip intro animation config
+  ///
+
+  &.is-animating-intro {
+    animation-name: tooltipIntro;
+    animation-timing-function: ease.$out_sine;
+
+    @media (prefers-reduced-motion: no-preference) {
+      animation-name: tooltipIntroIncreasedMotion;
+    }
+  }
+
+  ///
+  /// Tooltip outro animation config
+  ///
+
+  &.is-animating-outro {
+    animation-name: tooltipOutro;
+    animation-timing-function: ease.$out_sine;
+  }
+}
+
+///
+/// Tooltip intro animation (default)
+///
+
+@keyframes tooltipIntro {
+  to {
+    opacity: 1;
+  }
+}
+
+///
+/// Tooltip intro animation (increased motion)
+///
+/// 1. Only the Y value is changing. Before the animation, the horizontal
+///    translation is set to `-50%` to center the tooltip. We don't want to
+///    overwrite the X transformation when we add the Y transformation. Since
+///    there can only be a single `transform` property, we need to include the
+///    X value alongside the Y value.
+///
+
+@keyframes tooltipIntroIncreasedMotion {
+  from {
+    animation-timing-function: ease.$out_sine;
+  }
+
+  50% {
+    animation-timing-function: ease.$in_out_sine;
+    transform: translate(-50%, 15%); // 1
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+///
+/// Tooltip outro animation
+///
+
+@keyframes tooltipOutro {
+  from {
+    opacity: 1;
+  }
+}