@khanacademy/wonder-blocks-birthday-picker 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @khanacademy/wonder-blocks-birthday-picker
 
+## 1.2.0
+
+### Minor Changes
+
+-   5536d12e: Add `monthYearOnly` prop to hide the `day` field from the UI. Passes the first day of the selected month for this case.
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-dropdown@2.6.5
+
 ## 1.1.0
 
 ### Minor Changes

package/dist/es/index.js

@@ -18,7 +18,12 @@ const defaultLabels = Object.freeze({
   month: "Month",
   year: "Year",
   day: "Day"
-});
+}); // Default minWidth value when we include the full DOB.
+
+const FIELD_MIN_WIDTH_FULL = 110; // Alternative minWidth value when we hide the day field.
+// See: https://www.figma.com/file/uJZi9ZvuEz5N8GJ3HqKFAa/(2021)-Account-records?node-id=20%3A398
+
+const FIELD_MIN_WIDTH_MONTH_YEAR = 167;
 /**
  * Birthday Picker. Similar to a datepicker, but specifically for birthdates.
  * We don't want to show a calendar in this case as it can be quite tedious to
@@ -127,11 +132,12 @@ class BirthdayPicker extends React.Component {
 
   getStateFromDefault() {
     const {
-      defaultValue
+      defaultValue,
+      monthYearOnly
     } = this.props;
     const initialState = {
       month: null,
-      day: null,
+      day: monthYearOnly ? "1" : null,
       year: null,
       error: null
     }; // merge custom labels with the default ones
@@ -191,34 +197,45 @@ class BirthdayPicker extends React.Component {
     }, error)));
   }
 
-  render() {
+  renderMonth() {
     const {
-      disabled
+      disabled,
+      monthYearOnly
     } = this.props;
     const {
-      month,
-      day,
-      year
+      month
     } = this.state;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
-      testId: "birthday-picker",
-      style: {
-        flexDirection: "row"
-      }
-    }, /*#__PURE__*/React.createElement(SingleSelect, {
+    const minWidth = monthYearOnly ? FIELD_MIN_WIDTH_MONTH_YEAR : FIELD_MIN_WIDTH_FULL;
+    return /*#__PURE__*/React.createElement(SingleSelect, {
       disabled: disabled,
       placeholder: this.labels.month,
       onChange: this.handleMonthChange,
       selectedValue: month,
       style: {
-        minWidth: 110
+        minWidth
       },
       testId: "birthday-picker-month"
     }, moment.monthsShort().map((month, i) => /*#__PURE__*/React.createElement(OptionItem, {
       key: month,
       label: month,
       value: String(i)
-    }))), /*#__PURE__*/React.createElement(Strut, {
+    })));
+  }
+
+  maybeRenderDay() {
+    const {
+      disabled,
+      monthYearOnly
+    } = this.props;
+    const {
+      day
+    } = this.state; // Hide the day field if the month/year only mode is enabled.
+
+    if (monthYearOnly) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Strut, {
       size: Spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(SingleSelect, {
       disabled: disabled,
@@ -233,22 +250,43 @@ class BirthdayPicker extends React.Component {
       key: String(day + 1),
       label: String(day + 1),
       value: String(day + 1)
-    }))), /*#__PURE__*/React.createElement(Strut, {
-      size: Spacing.xSmall_8
-    }), /*#__PURE__*/React.createElement(SingleSelect, {
+    }))));
+  }
+
+  renderYear() {
+    const {
+      disabled,
+      monthYearOnly
+    } = this.props;
+    const {
+      year
+    } = this.state;
+    const minWidth = monthYearOnly ? FIELD_MIN_WIDTH_MONTH_YEAR : FIELD_MIN_WIDTH_FULL;
+    return /*#__PURE__*/React.createElement(SingleSelect, {
       disabled: disabled,
       placeholder: this.labels.year,
       onChange: this.handleYearChange,
       selectedValue: year,
       style: {
-        minWidth: 110
+        minWidth
       },
       testId: "birthday-picker-year"
     }, Array.from(Array(120)).map((_, yearOffset) => /*#__PURE__*/React.createElement(OptionItem, {
       key: String(CUR_YEAR - yearOffset),
       label: String(CUR_YEAR - yearOffset),
       value: String(CUR_YEAR - yearOffset)
-    })))), this.maybeRenderError());
+    })));
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+      testId: "birthday-picker",
+      style: {
+        flexDirection: "row"
+      }
+    }, this.renderMonth(), this.maybeRenderDay(), /*#__PURE__*/React.createElement(Strut, {
+      size: Spacing.xSmall_8
+    }), this.renderYear()), this.maybeRenderError());
   }
 
 }

package/dist/index.js

@@ -176,7 +176,12 @@ const defaultLabels = Object.freeze({
   month: "Month",
   year: "Year",
   day: "Day"
-});
+}); // Default minWidth value when we include the full DOB.
+
+const FIELD_MIN_WIDTH_FULL = 110; // Alternative minWidth value when we hide the day field.
+// See: https://www.figma.com/file/uJZi9ZvuEz5N8GJ3HqKFAa/(2021)-Account-records?node-id=20%3A398
+
+const FIELD_MIN_WIDTH_MONTH_YEAR = 167;
 /**
  * Birthday Picker. Similar to a datepicker, but specifically for birthdates.
  * We don't want to show a calendar in this case as it can be quite tedious to
@@ -285,11 +290,12 @@ class BirthdayPicker extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
 
   getStateFromDefault() {
     const {
-      defaultValue
+      defaultValue,
+      monthYearOnly
     } = this.props;
     const initialState = {
       month: null,
-      day: null,
+      day: monthYearOnly ? "1" : null,
       year: null,
       error: null
     }; // merge custom labels with the default ones
@@ -351,34 +357,45 @@ class BirthdayPicker extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
     }, error)));
   }
 
-  render() {
+  renderMonth() {
     const {
-      disabled
+      disabled,
+      monthYearOnly
     } = this.props;
     const {
-      month,
-      day,
-      year
+      month
     } = this.state;
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["View"], {
-      testId: "birthday-picker",
-      style: {
-        flexDirection: "row"
-      }
-    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_dropdown__WEBPACK_IMPORTED_MODULE_8__["SingleSelect"], {
+    const minWidth = monthYearOnly ? FIELD_MIN_WIDTH_MONTH_YEAR : FIELD_MIN_WIDTH_FULL;
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_dropdown__WEBPACK_IMPORTED_MODULE_8__["SingleSelect"], {
       disabled: disabled,
       placeholder: this.labels.month,
       onChange: this.handleMonthChange,
       selectedValue: month,
       style: {
-        minWidth: 110
+        minWidth
       },
       testId: "birthday-picker-month"
     }, moment__WEBPACK_IMPORTED_MODULE_0___default.a.monthsShort().map((month, i) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_dropdown__WEBPACK_IMPORTED_MODULE_8__["OptionItem"], {
       key: month,
       label: month,
       value: String(i)
-    }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_3__["Strut"], {
+    })));
+  }
+
+  maybeRenderDay() {
+    const {
+      disabled,
+      monthYearOnly
+    } = this.props;
+    const {
+      day
+    } = this.state; // Hide the day field if the month/year only mode is enabled.
+
+    if (monthYearOnly) {
+      return null;
+    }
+
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_3__["Strut"], {
       size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.xSmall_8
     }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_dropdown__WEBPACK_IMPORTED_MODULE_8__["SingleSelect"], {
       disabled: disabled,
@@ -393,22 +410,43 @@ class BirthdayPicker extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
       key: String(day + 1),
       label: String(day + 1),
       value: String(day + 1)
-    }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_3__["Strut"], {
-      size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.xSmall_8
-    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_dropdown__WEBPACK_IMPORTED_MODULE_8__["SingleSelect"], {
+    }))));
+  }
+
+  renderYear() {
+    const {
+      disabled,
+      monthYearOnly
+    } = this.props;
+    const {
+      year
+    } = this.state;
+    const minWidth = monthYearOnly ? FIELD_MIN_WIDTH_MONTH_YEAR : FIELD_MIN_WIDTH_FULL;
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_dropdown__WEBPACK_IMPORTED_MODULE_8__["SingleSelect"], {
       disabled: disabled,
       placeholder: this.labels.year,
       onChange: this.handleYearChange,
       selectedValue: year,
       style: {
-        minWidth: 110
+        minWidth
       },
       testId: "birthday-picker-year"
     }, Array.from(Array(120)).map((_, yearOffset) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_dropdown__WEBPACK_IMPORTED_MODULE_8__["OptionItem"], {
       key: String(CUR_YEAR - yearOffset),
       label: String(CUR_YEAR - yearOffset),
       value: String(CUR_YEAR - yearOffset)
-    })))), this.maybeRenderError());
+    })));
+  }
+
+  render() {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["View"], {
+      testId: "birthday-picker",
+      style: {
+        flexDirection: "row"
+      }
+    }, this.renderMonth(), this.maybeRenderDay(), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_3__["Strut"], {
+      size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.xSmall_8
+    }), this.renderYear()), this.maybeRenderError());
   }
 
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-birthday-picker",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -16,7 +16,7 @@
     "@babel/runtime": "^7.16.3",
     "@khanacademy/wonder-blocks-color": "^1.1.20",
     "@khanacademy/wonder-blocks-core": "^4.2.0",
-    "@khanacademy/wonder-blocks-dropdown": "^2.6.4",
+    "@khanacademy/wonder-blocks-dropdown": "^2.6.5",
     "@khanacademy/wonder-blocks-icon": "^1.2.24",
     "@khanacademy/wonder-blocks-layout": "^1.4.6",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",

package/src/components/__docs__/birthday-picker.stories.js

@@ -119,3 +119,21 @@ DisabledBirthdayPicker.parameters = {
             "A BirthdayPicker can be disabled by passing the `disabled` prop. This will disable all the dropdown controls and prevent them from being interacted with.",
     },
 };
+
+export const BirthdayPickerWithYearAndMonthOnly: StoryComponentType =
+    Template.bind({});
+
+BirthdayPickerWithYearAndMonthOnly.args = {
+    monthYearOnly: true,
+    onChange: (date: ?string) => {
+        // eslint-disable-next-line no-console
+        console.log("Date selected: ", date);
+    },
+};
+
+BirthdayPickerWithYearAndMonthOnly.parameters = {
+    docs: {
+        storyDescription:
+            "A BirthdayPicker can be configured to only show the year and month dropdowns. This can be useful when we want to display and collect a birthday that doesn't require the full DOB for privacy reasons.",
+    },
+};

package/src/components/__tests__/birthday-picker.test.js

@@ -34,6 +34,18 @@ describe("BirthdayPicker", () => {
             expect(yearPicker).toHaveTextContent("Year");
         });
 
+        it("renders without the day field if monthYearOnly is set", () => {
+            // Arrange
+
+            // Act
+            render(<BirthdayPicker monthYearOnly={true} onChange={() => {}} />);
+
+            const dayPicker = screen.queryByTestId("birthday-picker-day");
+
+            // Assert
+            expect(dayPicker).not.toBeInTheDocument();
+        });
+
         it("renders with a valid default value", () => {
             // Arrange
             const date = moment(today);
@@ -169,9 +181,9 @@ describe("BirthdayPicker", () => {
             // Arrange
             const onChange = jest.fn();
 
-            // Act
             render(<BirthdayPicker onChange={onChange} />);
 
+            // Act
             userEvent.click(screen.getByTestId("birthday-picker-month"));
             const monthOption = await screen.findByRole("option", {
                 name: "Jul",
@@ -258,7 +270,6 @@ describe("BirthdayPicker", () => {
             // Arrange
             const onChange = jest.fn();
 
-            // Act
             render(
                 <BirthdayPicker
                     defaultValue="2017-07-17"
@@ -266,6 +277,7 @@ describe("BirthdayPicker", () => {
                 />,
             );
 
+            // Act
             userEvent.click(screen.getByTestId("birthday-picker-month"));
             const monthOption = await screen.findByRole("option", {
                 name: "Aug",
@@ -327,7 +339,6 @@ describe("BirthdayPicker", () => {
             // Arrange
             const onChange = jest.fn();
 
-            // Act
             render(
                 <BirthdayPicker
                     defaultValue="2021-02-31"
@@ -335,6 +346,7 @@ describe("BirthdayPicker", () => {
                 />,
             );
 
+            // Act
             userEvent.click(screen.getByTestId("birthday-picker-year"));
             const yearOption = await screen.findByRole("option", {
                 name: "2020",
@@ -346,6 +358,68 @@ describe("BirthdayPicker", () => {
             // Assert
             expect(onChange).toHaveBeenCalledTimes(1);
         });
+
+        it("onChange triggers the first day of the month when monthYearOnly is set", async () => {
+            // Arrange
+            const onChange = jest.fn();
+
+            render(<BirthdayPicker monthYearOnly={true} onChange={onChange} />);
+
+            // Act
+            userEvent.click(screen.getByTestId("birthday-picker-month"));
+            const monthOption = await screen.findByRole("option", {
+                name: "Aug",
+            });
+            userEvent.click(monthOption, undefined, {
+                skipPointerEventsCheck: true,
+            });
+
+            userEvent.click(screen.getByTestId("birthday-picker-year"));
+            const yearOption = await screen.findByRole("option", {
+                name: "2018",
+            });
+            userEvent.click(yearOption, undefined, {
+                skipPointerEventsCheck: true,
+            });
+
+            // Assert
+            // Verify that we passed the first day of the month
+            expect(onChange).toHaveBeenCalledWith("2018-08-01");
+        });
+
+        it("onChange triggers the passed-in day intact when defaultValue and monthYearOnly are set", async () => {
+            // Arrange
+            const onChange = jest.fn();
+
+            render(
+                <BirthdayPicker
+                    defaultValue="2017-07-17"
+                    monthYearOnly={true}
+                    onChange={onChange}
+                />,
+            );
+
+            // Act
+            userEvent.click(screen.getByTestId("birthday-picker-month"));
+            const monthOption = await screen.findByRole("option", {
+                name: "Aug",
+            });
+            userEvent.click(monthOption, undefined, {
+                skipPointerEventsCheck: true,
+            });
+
+            userEvent.click(screen.getByTestId("birthday-picker-year"));
+            const yearOption = await screen.findByRole("option", {
+                name: "2018",
+            });
+            userEvent.click(yearOption, undefined, {
+                skipPointerEventsCheck: true,
+            });
+
+            // Assert
+            // Verify that we passed the same day originally passed in.
+            expect(onChange).toHaveBeenCalledWith("2018-08-17");
+        });
     });
 
     describe("labels", () => {

package/src/components/birthday-picker.js

@@ -49,6 +49,16 @@ type Props = {|
      */
     labels?: Labels,
 
+    /**
+     * Whether we want to hide the day field.
+     *
+     * **NOTE:** We will set the day to the _first_ day of the _selected_ month
+     * if the day field is hidden. Please make sure to modify the passed date
+     * value to fit different needs (e.g. if you want to set the _first_ day of
+     * the _following_ month instead).
+     */
+    monthYearOnly?: boolean,
+
     /**
      * Listen for changes to the birthdate. Could be a string in the YYYY-MM-DD
      * format or `null`.
@@ -87,6 +97,13 @@ export const defaultLabels: Labels = Object.freeze({
     day: "Day",
 });
 
+// Default minWidth value when we include the full DOB.
+const FIELD_MIN_WIDTH_FULL = 110;
+
+// Alternative minWidth value when we hide the day field.
+// See: https://www.figma.com/file/uJZi9ZvuEz5N8GJ3HqKFAa/(2021)-Account-records?node-id=20%3A398
+const FIELD_MIN_WIDTH_MONTH_YEAR = 167;
+
 /**
  * Birthday Picker. Similar to a datepicker, but specifically for birthdates.
  * We don't want to show a calendar in this case as it can be quite tedious to
@@ -134,10 +151,10 @@ export default class BirthdayPicker extends React.Component<Props, State> {
      * Calculates the initial state values based on the default value.
      */
     getStateFromDefault(): State {
-        const {defaultValue} = this.props;
+        const {defaultValue, monthYearOnly} = this.props;
         const initialState: State = {
             month: null,
-            day: null,
+            day: monthYearOnly ? "1" : null,
             year: null,
             error: null,
         };
@@ -252,63 +269,99 @@ export default class BirthdayPicker extends React.Component<Props, State> {
         );
     }
 
-    render(): React.Element<any> {
-        const {disabled} = this.props;
-        const {month, day, year} = this.state;
+    renderMonth(): React.Node {
+        const {disabled, monthYearOnly} = this.props;
+        const {month} = this.state;
+        const minWidth = monthYearOnly
+            ? FIELD_MIN_WIDTH_MONTH_YEAR
+            : FIELD_MIN_WIDTH_FULL;
+
+        return (
+            <SingleSelect
+                disabled={disabled}
+                placeholder={this.labels.month}
+                onChange={this.handleMonthChange}
+                selectedValue={month}
+                style={{minWidth}}
+                testId="birthday-picker-month"
+            >
+                {moment.monthsShort().map((month, i) => (
+                    <OptionItem key={month} label={month} value={String(i)} />
+                ))}
+            </SingleSelect>
+        );
+    }
+
+    maybeRenderDay(): ?React.Node {
+        const {disabled, monthYearOnly} = this.props;
+        const {day} = this.state;
+
+        // Hide the day field if the month/year only mode is enabled.
+        if (monthYearOnly) {
+            return null;
+        }
 
+        return (
+            <>
+                <Strut size={Spacing.xSmall_8} />
+                <SingleSelect
+                    disabled={disabled}
+                    placeholder={this.labels.day}
+                    onChange={this.handleDayChange}
+                    selectedValue={day}
+                    style={{minWidth: 100}}
+                    testId="birthday-picker-day"
+                >
+                    {Array.from(Array(31)).map((_, day) => (
+                        <OptionItem
+                            key={String(day + 1)}
+                            label={String(day + 1)}
+                            value={String(day + 1)}
+                        />
+                    ))}
+                </SingleSelect>
+            </>
+        );
+    }
+
+    renderYear(): React.Node {
+        const {disabled, monthYearOnly} = this.props;
+        const {year} = this.state;
+        const minWidth = monthYearOnly
+            ? FIELD_MIN_WIDTH_MONTH_YEAR
+            : FIELD_MIN_WIDTH_FULL;
+
+        return (
+            <SingleSelect
+                disabled={disabled}
+                placeholder={this.labels.year}
+                onChange={this.handleYearChange}
+                selectedValue={year}
+                style={{minWidth}}
+                testId="birthday-picker-year"
+            >
+                {Array.from(Array(120)).map((_, yearOffset) => (
+                    <OptionItem
+                        key={String(CUR_YEAR - yearOffset)}
+                        label={String(CUR_YEAR - yearOffset)}
+                        value={String(CUR_YEAR - yearOffset)}
+                    />
+                ))}
+            </SingleSelect>
+        );
+    }
+
+    render(): React.Element<any> {
         return (
             <>
                 <View testId="birthday-picker" style={{flexDirection: "row"}}>
-                    <SingleSelect
-                        disabled={disabled}
-                        placeholder={this.labels.month}
-                        onChange={this.handleMonthChange}
-                        selectedValue={month}
-                        style={{minWidth: 110}}
-                        testId="birthday-picker-month"
-                    >
-                        {moment.monthsShort().map((month, i) => (
-                            <OptionItem
-                                key={month}
-                                label={month}
-                                value={String(i)}
-                            />
-                        ))}
-                    </SingleSelect>
-                    <Strut size={Spacing.xSmall_8} />
-                    <SingleSelect
-                        disabled={disabled}
-                        placeholder={this.labels.day}
-                        onChange={this.handleDayChange}
-                        selectedValue={day}
-                        style={{minWidth: 100}}
-                        testId="birthday-picker-day"
-                    >
-                        {Array.from(Array(31)).map((_, day) => (
-                            <OptionItem
-                                key={String(day + 1)}
-                                label={String(day + 1)}
-                                value={String(day + 1)}
-                            />
-                        ))}
-                    </SingleSelect>
+                    {this.renderMonth()}
+
+                    {this.maybeRenderDay()}
+
                     <Strut size={Spacing.xSmall_8} />
-                    <SingleSelect
-                        disabled={disabled}
-                        placeholder={this.labels.year}
-                        onChange={this.handleYearChange}
-                        selectedValue={year}
-                        style={{minWidth: 110}}
-                        testId="birthday-picker-year"
-                    >
-                        {Array.from(Array(120)).map((_, yearOffset) => (
-                            <OptionItem
-                                key={String(CUR_YEAR - yearOffset)}
-                                label={String(CUR_YEAR - yearOffset)}
-                                value={String(CUR_YEAR - yearOffset)}
-                            />
-                        ))}
-                    </SingleSelect>
+
+                    {this.renderYear()}
                 </View>
                 {this.maybeRenderError()}
             </>