lite-youtube fallback class (#2295)

* Add lite-youtube-fallback

* Add changeset

Author: tylersticka

.changeset/clear-planets-send.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add helper class for styling fallback links in [`lite-youtube` web components](https://github.com/justinribeiro/lite-youtube)

src/vendor/lite-youtube/_lite-youtube.scss

@@ -0,0 +1,14 @@
+@use '../../compiled/tokens/scss/color';
+@use '../../compiled/tokens/scss/size';
+
+.lite-youtube-fallback {
+  aspect-ratio: var(--lite-youtube-aspect-ratio, 16 / 9);
+  background-color: color.$base-gray-darker;
+  color: color.$text-light;
+  display: flex;
+  padding: size.$padding-control-vertical size.$padding-control-horizontal;
+  place-content: center;
+  place-items: center;
+  text-align: center;
+  text-wrap: balance;
+}

src/vendor/lite-youtube/demo/fallback.twig

@@ -0,0 +1,5 @@
+<lite-youtube{% if aspect_ratio %} style="--lite-youtube-aspect-ratio: {{aspect_ratio}};"{% endif %}>
+  <a class="lite-youtube-fallback" href="https://www.youtube.com/watch?v=vU5Cic3HNvc">
+    Watch on YouTube: “Strategies for Legacy Application Modernization”
+  </a>
+</lite-youtube>

src/vendor/lite-youtube/light-youtube.stories.mdx

@@ -0,0 +1,23 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import fallbackDemo from './demo/fallback.twig';
+
+<Meta
+  title="Vendor/lite-youtube"
+  argTypes={{
+    aspect_ratio: {
+      type: { name: 'string' },
+      description:
+        'Value for `--lite-youtube-aspect-ratio` inline style property, sets the aspect ratio prior to component load and helps cut down on page shifts.',
+    },
+  }}
+/>
+
+# lite-youtube
+
+Our patterns include a `lite-youtube-fallback` class for use with [the `lite-youtube` web component](https://github.com/justinribeiro/lite-youtube).
+
+<Canvas>
+  <Story name="Default">{(args) => fallbackDemo(args)}</Story>
+</Canvas>
+
+<ArgsTable story="Default" />