@khanacademy/wonder-blocks-birthday-picker 2.0.86 → 2.0.87

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-birthday-picker
 
+## 2.0.87
+
+### Patch Changes
+
+-   a32b0779: Add responsive default to BirthdayPicker
+
 ## 2.0.86
 
 ### Patch Changes

package/dist/components/birthday-picker.d.ts

@@ -75,32 +75,6 @@ type State = {
     error: string | null;
 };
 export declare const defaultLabels: Labels;
-/**
- * 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
- * try and select a date that's many years old. Instead, we use a set of
- * dropdowns to achieve a similar effect.
- *
- * More information on this pattern:
- * https://medium.com/samsung-internet-dev/making-input-type-date-complicated-a544fd27c45a
- *
- * Arguably, this should probably even be 3 textfields, but that would be a
- * larger design change, more info:
- * https://designnotes.blog.gov.uk/2013/12/05/asking-for-a-date-of-birth/
- *
- * **NOTE:** This component is uncontrolled.
- *
- * ### Usage
- *
- * ```jsx
- * import {BirthdayPicker} from "@khanacademy/wonder-blocks-dates";
- *
- * <BirthdayPicker
- *  defaultValue="2021-05-26"
- *  onChange={(date) => {setDate(date)}}
- * />
- * ```
- */
 export default class BirthdayPicker extends React.Component<Props, State> {
     /**
      * Strings used for placeholders and error message. These are used this way
@@ -136,6 +110,7 @@ export default class BirthdayPicker extends React.Component<Props, State> {
     maybeRenderError(): React.ReactNode | null | undefined;
     renderMonth(): React.ReactNode;
     maybeRenderDay(): React.ReactNode | null | undefined;
+    getMonthYearWidth(monthYearOnly: boolean | undefined): number;
     renderYear(): React.ReactNode;
     render(): React.ReactNode;
 }

package/dist/es/index.js

@@ -1,6 +1,7 @@
 import _extends from '@babel/runtime/helpers/extends';
 import moment from 'moment';
 import * as React from 'react';
+import { StyleSheet } from 'aphrodite';
 import { View } from '@khanacademy/wonder-blocks-core';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
 import { spacing, color } from '@khanacademy/wonder-blocks-tokens';
@@ -18,6 +19,24 @@ const defaultLabels = Object.freeze({
 });
 const FIELD_MIN_WIDTH_FULL = 110;
 const FIELD_MIN_WIDTH_MONTH_YEAR = 167;
+const FIELD_MIN_WIDTH_DAY = 100;
+const xsMin = "520px";
+const screenSizes = {
+  small: `@media (max-width: ${xsMin})`
+};
+const defaultStyles = StyleSheet.create({
+  wrapper: {
+    flexDirection: "row",
+    [screenSizes.small]: {
+      flexDirection: "column"
+    }
+  },
+  input: {
+    [screenSizes.small]: {
+      minWidth: "100%"
+    }
+  }
+});
 class BirthdayPicker extends React.Component {
   constructor(props) {
     super(props);
@@ -132,7 +151,7 @@ class BirthdayPicker extends React.Component {
     const {
       month
     } = this.state;
-    const minWidth = monthYearOnly ? FIELD_MIN_WIDTH_MONTH_YEAR : FIELD_MIN_WIDTH_FULL;
+    const minWidth = this.getMonthYearWidth(monthYearOnly);
     return React.createElement(SingleSelect, {
       "aria-invalid": !!this.state.error,
       error: !!this.state.error,
@@ -140,9 +159,9 @@ class BirthdayPicker extends React.Component {
       placeholder: this.labels.month,
       onChange: this.handleMonthChange,
       selectedValue: month,
-      style: _extends({
+      style: [{
         minWidth
-      }, dropdownStyle),
+      }, defaultStyles.input, dropdownStyle],
       testId: "birthday-picker-month"
     }, moment.monthsShort().map((month, i) => React.createElement(OptionItem, {
       key: month,
@@ -171,9 +190,9 @@ class BirthdayPicker extends React.Component {
       placeholder: this.labels.day,
       onChange: this.handleDayChange,
       selectedValue: day,
-      style: _extends({
-        minWidth: 100
-      }, dropdownStyle),
+      style: [{
+        minWidth: FIELD_MIN_WIDTH_DAY
+      }, defaultStyles.input, dropdownStyle],
       testId: "birthday-picker-day"
     }, Array.from(Array(31)).map((_, day) => React.createElement(OptionItem, {
       key: String(day + 1),
@@ -181,6 +200,9 @@ class BirthdayPicker extends React.Component {
       value: String(day + 1)
     }))));
   }
+  getMonthYearWidth(monthYearOnly) {
+    return monthYearOnly ? FIELD_MIN_WIDTH_MONTH_YEAR : FIELD_MIN_WIDTH_FULL;
+  }
   renderYear() {
     const {
       disabled,
@@ -190,7 +212,7 @@ class BirthdayPicker extends React.Component {
     const {
       year
     } = this.state;
-    const minWidth = monthYearOnly ? FIELD_MIN_WIDTH_MONTH_YEAR : FIELD_MIN_WIDTH_FULL;
+    const minWidth = this.getMonthYearWidth(monthYearOnly);
     return React.createElement(SingleSelect, {
       "aria-invalid": !!this.state.error,
       error: !!this.state.error,
@@ -198,9 +220,9 @@ class BirthdayPicker extends React.Component {
       placeholder: this.labels.year,
       onChange: this.handleYearChange,
       selectedValue: year,
-      style: _extends({
+      style: [{
         minWidth
-      }, dropdownStyle),
+      }, defaultStyles.input, dropdownStyle],
       dropdownStyle: {
         minWidth: 150
       },
@@ -217,9 +239,7 @@ class BirthdayPicker extends React.Component {
     } = this.props;
     return React.createElement(React.Fragment, null, React.createElement(View, {
       testId: "birthday-picker",
-      style: _extends({
-        flexDirection: "row"
-      }, style)
+      style: [defaultStyles.wrapper, style]
     }, this.renderMonth(), this.maybeRenderDay(), React.createElement(Strut, {
       size: spacing.xSmall_8
     }), this.renderYear()), this.maybeRenderError());

package/dist/index.js

@@ -3,6 +3,7 @@
 var _extends = require('@babel/runtime/helpers/extends');
 var moment = require('moment');
 var React = require('react');
+var aphrodite = require('aphrodite');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
 var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
@@ -45,6 +46,24 @@ const defaultLabels = Object.freeze({
 });
 const FIELD_MIN_WIDTH_FULL = 110;
 const FIELD_MIN_WIDTH_MONTH_YEAR = 167;
+const FIELD_MIN_WIDTH_DAY = 100;
+const xsMin = "520px";
+const screenSizes = {
+  small: `@media (max-width: ${xsMin})`
+};
+const defaultStyles = aphrodite.StyleSheet.create({
+  wrapper: {
+    flexDirection: "row",
+    [screenSizes.small]: {
+      flexDirection: "column"
+    }
+  },
+  input: {
+    [screenSizes.small]: {
+      minWidth: "100%"
+    }
+  }
+});
 class BirthdayPicker extends React__namespace.Component {
   constructor(props) {
     super(props);
@@ -159,7 +178,7 @@ class BirthdayPicker extends React__namespace.Component {
     const {
       month
     } = this.state;
-    const minWidth = monthYearOnly ? FIELD_MIN_WIDTH_MONTH_YEAR : FIELD_MIN_WIDTH_FULL;
+    const minWidth = this.getMonthYearWidth(monthYearOnly);
     return React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
       "aria-invalid": !!this.state.error,
       error: !!this.state.error,
@@ -167,9 +186,9 @@ class BirthdayPicker extends React__namespace.Component {
       placeholder: this.labels.month,
       onChange: this.handleMonthChange,
       selectedValue: month,
-      style: _extends__default["default"]({
+      style: [{
         minWidth
-      }, dropdownStyle),
+      }, defaultStyles.input, dropdownStyle],
       testId: "birthday-picker-month"
     }, moment__default["default"].monthsShort().map((month, i) => React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
       key: month,
@@ -198,9 +217,9 @@ class BirthdayPicker extends React__namespace.Component {
       placeholder: this.labels.day,
       onChange: this.handleDayChange,
       selectedValue: day,
-      style: _extends__default["default"]({
-        minWidth: 100
-      }, dropdownStyle),
+      style: [{
+        minWidth: FIELD_MIN_WIDTH_DAY
+      }, defaultStyles.input, dropdownStyle],
       testId: "birthday-picker-day"
     }, Array.from(Array(31)).map((_, day) => React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
       key: String(day + 1),
@@ -208,6 +227,9 @@ class BirthdayPicker extends React__namespace.Component {
       value: String(day + 1)
     }))));
   }
+  getMonthYearWidth(monthYearOnly) {
+    return monthYearOnly ? FIELD_MIN_WIDTH_MONTH_YEAR : FIELD_MIN_WIDTH_FULL;
+  }
   renderYear() {
     const {
       disabled,
@@ -217,7 +239,7 @@ class BirthdayPicker extends React__namespace.Component {
     const {
       year
     } = this.state;
-    const minWidth = monthYearOnly ? FIELD_MIN_WIDTH_MONTH_YEAR : FIELD_MIN_WIDTH_FULL;
+    const minWidth = this.getMonthYearWidth(monthYearOnly);
     return React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
       "aria-invalid": !!this.state.error,
       error: !!this.state.error,
@@ -225,9 +247,9 @@ class BirthdayPicker extends React__namespace.Component {
       placeholder: this.labels.year,
       onChange: this.handleYearChange,
       selectedValue: year,
-      style: _extends__default["default"]({
+      style: [{
         minWidth
-      }, dropdownStyle),
+      }, defaultStyles.input, dropdownStyle],
       dropdownStyle: {
         minWidth: 150
       },
@@ -244,9 +266,7 @@ class BirthdayPicker extends React__namespace.Component {
     } = this.props;
     return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksCore.View, {
       testId: "birthday-picker",
-      style: _extends__default["default"]({
-        flexDirection: "row"
-      }, style)
+      style: [defaultStyles.wrapper, style]
     }, this.renderMonth(), this.maybeRenderDay(), React__namespace.createElement(wonderBlocksLayout.Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), this.renderYear()), this.maybeRenderError());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-birthday-picker",
-  "version": "2.0.86",
+  "version": "2.0.87",
   "design": "v1",
   "publishConfig": {
     "access": "public"