Add style and dropdownStyle props to BirthdayPicker (#2288)

## Summary:
To allow the BirthdayPicker to be rendered in a wider variety of locations, such as narrow modals or mobile views, two new props have been added. "style" which allows the caller to add styles to the root element of the BirthdayPicker, and "dropdownStyle" which applies styles to the individual dropdowns. As opposed to a more narrow approach of specifying a "vertical" prop, this broad approach relieves the component of having to know when to render horizontally or vertically. This logic is placed in the callers hands, which can easily be determined via media query.

Issue: None

## Test plan:
- View http://localhost:6061/?path=/story/packages-birthdaypicker--birthday-picker-vertical
- ensure component displays in a top to bottom manner
- View http://localhost:6061/?path=/story/packages-birthdaypicker--birthday-picker-vertical-with-error
- ensure component displays in the same manner, with an error message
- reran unit tests, ensure they pass

Author: dmcalpin

Reviewers: jeresig, evanchaney, beaesguerra, russell-ka

Required Reviewers:

Approved By: jeresig, evanchaney, beaesguerra

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

Pull Request URL: #2288

.changeset/orange-peaches-sit.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-birthday-picker": patch
+---
+
+Added style and dropdownStyle props to BirthdayPicker

__docs__/wonder-blocks-birthday-picker/birthday-picker.argtypes.ts

@@ -10,4 +10,21 @@ export default {
             category: "Events",
         },
     },
+    style: {
+        description: `Additional styles applied to the root element of the
+            component.`,
+        table: {
+            type: {
+                summary: "StyleType",
+            },
+        },
+    },
+    dropdownStyle: {
+        description: "Additional styles applied to the dropdowns.",
+        table: {
+            type: {
+                summary: "StyleType",
+            },
+        },
+    },
 };

__docs__/wonder-blocks-birthday-picker/birthday-picker.stories.tsx

@@ -136,3 +136,39 @@ export const BirthdayPickerWithYearAndMonthOnly: StoryComponentType = {
         },
     },
 };
+
+export const BirthdayPickerVertical: StoryComponentType = {
+    args: {
+        style: {flexDirection: "column"},
+        dropdownStyle: {width: "100%"},
+        onChange: (date?: string | null) => {
+            // eslint-disable-next-line no-console
+            console.log("Date selected: ", date);
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "A BirthdayPicker can be configured to render vertically instead of horizontally. This can be useful when we want to display the component in a narrow container.",
+            },
+        },
+    },
+};
+
+export const BirthdayPickerVerticalWithError: StoryComponentType = {
+    args: {
+        style: {flexDirection: "column"},
+        onChange: (date?: string | null) => {
+            // eslint-disable-next-line no-console
+            console.log("Date selected: ", date);
+        },
+        defaultValue: "2030-07-19",
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "A vertical BirthdayPicker may have an error. It should show beneath all the dropdowns.",
+            },
+        },
+    },
+};

packages/wonder-blocks-birthday-picker/src/components/birthday-picker.tsx

@@ -1,6 +1,6 @@
 import moment from "moment"; // NOTE: DO NOT use named imports; 'moment' does not support named imports
 import * as React from "react";
-import {View} from "@khanacademy/wonder-blocks-core";
+import {StyleType, View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {Body} from "@khanacademy/wonder-blocks-typography";
@@ -56,6 +56,14 @@ type Props = {
      * format or `null`.
      */
     onChange: (date?: string | null | undefined) => unknown;
+    /**
+     * Additional styles applied to the root element of the component.
+     */
+    style?: StyleType;
+    /**
+     * Additional styles applied to the dropdowns.
+     */
+    dropdownStyle?: StyleType;
 };
 
 type State = {
@@ -263,7 +271,7 @@ export default class BirthdayPicker extends React.Component<Props, State> {
     }
 
     renderMonth(): React.ReactNode {
-        const {disabled, monthYearOnly} = this.props;
+        const {disabled, monthYearOnly, dropdownStyle} = this.props;
         const {month} = this.state;
         const minWidth = monthYearOnly
             ? FIELD_MIN_WIDTH_MONTH_YEAR
@@ -277,7 +285,7 @@ export default class BirthdayPicker extends React.Component<Props, State> {
                 placeholder={this.labels.month}
                 onChange={this.handleMonthChange}
                 selectedValue={month}
-                style={{minWidth}}
+                style={{minWidth, ...dropdownStyle}}
                 testId="birthday-picker-month"
             >
                 {/* eslint-disable-next-line import/no-named-as-default-member */}
@@ -289,7 +297,7 @@ export default class BirthdayPicker extends React.Component<Props, State> {
     }
 
     maybeRenderDay(): React.ReactNode | null | undefined {
-        const {disabled, monthYearOnly} = this.props;
+        const {disabled, monthYearOnly, dropdownStyle} = this.props;
         const {day} = this.state;
 
         // Hide the day field if the month/year only mode is enabled.
@@ -307,7 +315,7 @@ export default class BirthdayPicker extends React.Component<Props, State> {
                     placeholder={this.labels.day}
                     onChange={this.handleDayChange}
                     selectedValue={day}
-                    style={{minWidth: 100}}
+                    style={{minWidth: 100, ...dropdownStyle}}
                     testId="birthday-picker-day"
                 >
                     {Array.from(Array(31)).map((_, day) => (
@@ -323,7 +331,7 @@ export default class BirthdayPicker extends React.Component<Props, State> {
     }
 
     renderYear(): React.ReactNode {
-        const {disabled, monthYearOnly} = this.props;
+        const {disabled, monthYearOnly, dropdownStyle} = this.props;
         const {year} = this.state;
         const minWidth = monthYearOnly
             ? FIELD_MIN_WIDTH_MONTH_YEAR
@@ -337,7 +345,7 @@ export default class BirthdayPicker extends React.Component<Props, State> {
                 placeholder={this.labels.year}
                 onChange={this.handleYearChange}
                 selectedValue={year}
-                style={{minWidth}}
+                style={{minWidth, ...dropdownStyle}}
                 // Allows displaying the dropdown options without truncating
                 // them when the user zooms in the browser.
                 dropdownStyle={{minWidth: 150}}
@@ -355,9 +363,14 @@ export default class BirthdayPicker extends React.Component<Props, State> {
     }
 
     render(): React.ReactNode {
+        const {style} = this.props;
+
         return (
             <>
-                <View testId="birthday-picker" style={{flexDirection: "row"}}>
+                <View
+                    testId="birthday-picker"
+                    style={{flexDirection: "row", ...style}}
+                >
                     {this.renderMonth()}
 
                     {this.maybeRenderDay()}