feat(svg): Animate 3x SVGs to prep for SMS use

Because:
* We want new SVGs, and we want them animated

This commit:
* Adds these SVGs to our Images storybook, animates them per UX preferences
* Adds some more SVG notes to our settings README

closes FXA-10202

packages/fxa-react/configs/tailwind.js

@@ -96,6 +96,10 @@ module.exports = {
       listStyleType: {
         circle: 'circle',
       },
+      transitionDelay: {
+        1200: '1200ms',
+        1500: '1500ms',
+      },
     },
     screens: {
       mobileLandscape: '480px',
@@ -272,6 +276,22 @@ module.exports = {
     },
   },
   plugins: [
+    // this gives us the same classes as delay-* (for transition),
+    // but for animation-delay-* instead
+    plugin(({ matchUtilities, theme }) => {
+      matchUtilities(
+        {
+          'animation-delay': (value) => {
+            return {
+              'animation-delay': value,
+            };
+          },
+        },
+        {
+          values: theme('transitionDelay'),
+        }
+      );
+    }),
     plugin(function ({ addUtilities }) {
       const customUtilities = {
         '.clip-auto': {

packages/fxa-settings/README.md

@@ -491,6 +491,22 @@ background-image: url('/path-to-image.svg');
 
 To use a background-image with Tailwind, you'll need to add a class to the `backgroundImage` object in the Tailwind config file. Check config files for examples.
 
+#### Animated SVGs
+
+Since SVGs are just XML, we can add styles and classes to them to animate them with CSS. This has been shown to increase user engagement and our animated SVGs respect `prefers-reduced-motion` if users don't wish to see animations.
+
+UX should give a brief description of what they're visualizing. Inspect SVGs with dev tools to see what vector path corresponds with what is visually displayed. If new `keyframes` are needed, add them to the Tailwind config file and add your new animation under `animation`. Tailwind names, e.g. `my-new-thing`, under `animation` will become classes like `animate-my-new-thing`. Keep in mind you may not need a new `keyframe` if you can use an existing `keyframe` with a new `animation` name and style. You can also add `animation-delay-*` etc. in conjunction with your animation class. You may find it easier to use something like Codepen to figure out the initial animation and correspond with the designer, but you can also work in Storybook instead (you may need to manually run `yarn build-css`).
+
+If you need to "group" paths together like you would with a div or span, use `<g></g>` tags to apply classes to a group of elements. You may also need to move a `path` around, adjust the `viewBox`, or request a new SVG if certain vector segments aren't created well for the desired animation (e.g. two layered `path`s look fine, but once you animate the top one, there's a gap on the bottom one; each vector piece should be exported to be whole).
+
+Since SVGs contain unique vector paths/shapes with inconsistent widths/heights, you _may_ want to add something like a one-off `transform-origin` in an inline `style` to prevent these CSS classes from being included in our final tailwind.out file. Note that **our CSP prevents global style tags in SVGs from being used.**
+
+#### Minifying SVGs
+
+Use [SVGO](https://github.com/svg/svgo) to minify SVGs. Always double check SVGs after minifying them because occasionally, something is removed or modified that changes the appearance of the SVG.
+
+Recently, we've been keeping original SVGs and appending a `.min` to those SVGs that have been ran through SVGO to make it obvious which SVGs have been minified. This can also make tweaking animations on SVGs easier as well or any other reason we may want to refer to the original graphic.
+
 ### Metrics
 
 Metrics reports are currently sent to the fxa-content-server metrics endpoint. Use the [metrics library](./src/lib/metrics.ts) to log events and other information.

packages/fxa-settings/src/components/images/en.ftl

@@ -24,3 +24,7 @@ lightbulb-aria-label =
   .aria-label = Illustration to represent creating a storage hint.
 email-code-image-aria-label =
   .aria-label = Illustration to represent an email containing a code.
+recovery-phone-image-description =
+  .aria-label = Mobile device that receives a code by text message.
+recovery-phone-code-image-description =
+  .aria-label = Code received on a mobile device.