Accordion animations! (#2096)

## Summary:
Add animations to accordion if `includeAnimation` prop
is set to true.

Animations are done using grid layout because it's
smooth and more performant than using transitions
with height or max-height.

TBD: performance metrics in webapp with this implementation

Issue: https://khanacademy.atlassian.net/browse/WB-1585

## Test plan:
`yarn jest packages/wonder-blocks-accordion/src/components/__tests__/accordion.test.tsx`
`yarn jest packages/wonder-blocks-accordion/src/components/__tests__/accordion-section.test.tsx`
`yarn jest packages/wonder-blocks-accordion/src/components/__tests__/accordion-section-header.test.tsx`

Storybook
http://localhost:6061/?path=/story/accordion-accordion--with-animation

Author: nishasy

Reviewers: kevinbarabash, jandrade, nishasy

Required Reviewers:

Approved By: jandrade

Checks: ✅ codecov/project, ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 16.x), ✅ Test (ubuntu-latest, 16.x, 2/2), ✅ Check build sizes (ubuntu-latest, 16.x), ✅ Test (ubuntu-latest, 16.x, 1/2), ✅ Lint (ubuntu-latest, 16.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 16.x), ⏭  Chromatic - Skip on Release PR (changesets), ✅ Publish npm snapshot (ubuntu-latest, 16.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 16.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 16.x), ✅ gerald, ⏭  dependabot

Pull Request URL: #2096

.changeset/honest-apes-rush.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-accordion": minor
+---
+
+Add animations to Accordion

__docs__/wonder-blocks-accordion/accordion-section.argtypes.tsx

@@ -36,10 +36,7 @@ export default {
             left-to-right language (and on the right of a right-to-left
             language), and "end" means it’s on the right of a left-to-right
             language (and on the left of a right-to-left language).
-            Defaults to "end".
-            If this prop is specified both here in the \`AccordionSection\`
-            and within the \`Accordion\` component, the Accordion’s
-            caretPosition value is prioritized.`,
+            Defaults to "end".`,
         defaultValue: "end",
         table: {
             defaultValue: {summary: "end"},
@@ -78,6 +75,16 @@ export default {
             type: {summary: "boolean"},
         },
     },
+    animated: {
+        control: {type: "boolean"},
+        description: `Whether to include animation on the header. This should
+            be false if the user has \`prefers-reduced-motion\` opted in.
+            Defaults to false.`,
+        table: {
+            defaultValue: {summary: "false"},
+            type: {summary: "boolean"},
+        },
+    },
     onToggle: {
         control: {type: null},
         description: "Called when the header is clicked.",

__docs__/wonder-blocks-accordion/accordion-section.stories.tsx

@@ -16,6 +16,49 @@ import packageConfig from "../../packages/wonder-blocks-icon/package.json";
 
 import AccordionSectionArgtypes from "./accordion-section.argtypes";
 
+/**
+ * An AccordionSection displays a section of content that can be shown or
+ * hidden by clicking its header. This is generally used within the Accordion
+ * component, but it can also be used on its own if you need only one
+ * collapsible section.
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * import {
+ *      Accordion,
+ *      AccordionSection
+ * } from "@khanacademy/wonder-blocks-accordion";
+ *
+ * // Within an Accordion
+ * <Accordion>
+ *   <AccordionSection header="First section">
+ *       This is the information present in the first section
+ *   </AccordionSection>
+ *   <AccordionSection header="Second section">
+ *       This is the information present in the second section
+ *   </AccordionSection>
+ *   <AccordionSection header="Third section">
+ *       This is the information present in the third section
+ *   </AccordionSection>
+ * </Accordion>
+ *
+ * // On its own, controlled
+ * const [expanded, setExpanded] = React.useState(false);
+ * <AccordionSection
+ *     header="A standalone section"
+ *     expanded={expanded}
+ *     onToggle={setExpanded}
+ * >
+ *    This is the information present in the standalone section
+ * </AccordionSection>
+ *
+ * // On its own, uncontrolled
+ * <AccordionSection header="A standalone section">
+ *   This is the information present in the standalone section
+ * </AccordionSection>
+ * ```
+ */
 export default {
     title: "Accordion / AccordionSection",
     component: AccordionSection,
@@ -371,6 +414,36 @@ export const CornerKinds: StoryComponentType = {
     },
 };
 
+/**
+ * An AccordionSection can be animated using the `animated` prop.
+ * This animation includes the caret, the expansion/collapse, and the
+ * border radius.
+ *
+ * If the user has `prefers-reduced-motion` opted in, this animation should
+ * be disabled. This can be done by passing `animated={false}` to
+ * the AccordionSection.
+ *
+ * If `animated` is specified both here in the AccordionSection
+ * and within a parent Accordion component, the Accordion's
+ * `animated` value is prioritized.
+ */
+export const WithAnimation: StoryComponentType = {
+    render: () => {
+        return (
+            <AccordionSection header="This section is animated" animated={true}>
+                Something
+            </AccordionSection>
+        );
+    },
+};
+
+WithAnimation.parameters = {
+    chromatic: {
+        // Disabling because we cannot visually test this in chromatic.
+        disableSnapshot: true,
+    },
+};
+
 /**
  * An AccordionSection can have custom styles passed in. In this example,
  * the AccordionSection has a gray background and a border, as well as
@@ -449,9 +522,15 @@ export const WithTag: StoryComponentType = {
     },
 };
 
+const mobile = "@media (max-width: 1023px)";
+
 const styles = StyleSheet.create({
     sideBySide: {
         flexDirection: "row",
+
+        [mobile]: {
+            flexDirection: "column",
+        },
     },
     fullWidth: {
         width: "100%",

__docs__/wonder-blocks-accordion/accordion.argtypes.tsx

@@ -74,6 +74,18 @@ export default {
             required: false,
         },
     },
+    animated: {
+        control: {type: "boolean"},
+        description: `Whether to include animation on the header. This should
+            be false if the user has \`prefers-reduced-motion\` opted in.
+            Defaults to false.`,
+        defaultValue: false,
+        table: {
+            defaultValue: {summary: false},
+            type: {summary: "boolean"},
+        },
+        type: {name: "boolean", required: false},
+    },
     style: {
         control: {type: "object"},
         description: "Custom styles for the overall accordion container.",