Merge pull request #534 from patrickcate/develop

Release 2023-01-08

.nvmrc

@@ -1 +1 @@
-14
+16

.storybook/main.js

@@ -10,6 +10,7 @@ module.exports = {
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
   core: {
     builder: '@storybook/builder-vite',
+    disableTelemetry: true,
   },
   framework: '@storybook/vue3',
 

package.json

@@ -119,7 +119,7 @@
   },
   "lint-staged": {
     "*.{js,vue}": [
-      "eslint"
+      "npm run lint"
     ]
   }
 }

src/components/UsaBannerContent/UsaBannerContent.test.js

@@ -78,19 +78,19 @@ describe('UsaBannerContent', () => {
 
     cy.get('@consoleWarn').should(
       'be.calledWith',
-      `The 'tldIcon' slot' is deprecated, use 'tld-icon' instead.`
+      `The 'tldIcon' slot is deprecated, use 'tld-icon' instead.`
     )
     cy.get('@consoleWarn').should(
       'be.calledWith',
-      `The 'tldDescription' slot' is deprecated, use 'tld-description' instead.`
+      `The 'tldDescription' slot is deprecated, use 'tld-description' instead.`
     )
     cy.get('@consoleWarn').should(
       'be.calledWith',
-      `The 'httpsIcon' slot' is deprecated, use 'https-icon' instead.`
+      `The 'httpsIcon' slot is deprecated, use 'https-icon' instead.`
     )
     cy.get('@consoleWarn').should(
       'be.calledWith',
-      `The 'httpsDescription' slot' is deprecated, use 'https-description' instead.`
+      `The 'httpsDescription' slot is deprecated, use 'https-description' instead.`
     )
 
     cy.get('.usa-banner__guidance').should(

src/components/UsaBannerContent/UsaBannerContent.vue

@@ -9,22 +9,22 @@ import {
 const slots = useSlots()
 
 if (slots?.tldIcon) {
-  console.warn(`The 'tldIcon' slot' is deprecated, use 'tld-icon' instead.`)
+  console.warn(`The 'tldIcon' slot is deprecated, use 'tld-icon' instead.`)
 }
 
 if (slots?.tldDescription) {
   console.warn(
-    `The 'tldDescription' slot' is deprecated, use 'tld-description' instead.`
+    `The 'tldDescription' slot is deprecated, use 'tld-description' instead.`
   )
 }
 
 if (slots?.httpsIcon) {
-  console.warn(`The 'httpsIcon' slot' is deprecated, use 'https-icon' instead.`)
+  console.warn(`The 'httpsIcon' slot is deprecated, use 'https-icon' instead.`)
 }
 
 if (slots?.httpsDescription) {
   console.warn(
-    `The 'httpsDescription' slot' is deprecated, use 'https-description' instead.`
+    `The 'httpsDescription' slot is deprecated, use 'https-description' instead.`
   )
 }
 

src/components/UsaDateInput/UsaDateInput.stories.js

@@ -7,6 +7,9 @@ const defaultProps = {
   year: UsaDateInput.props.year.default,
   dateOrder: UsaDateInput.props.dateOrder.default(),
   dateLabels: UsaDateInput.props.dateLabels.default(),
+  monthAsSelect: UsaDateInput.props.monthAsSelect.default,
+  monthEmptyLabel: UsaDateInput.props.monthEmptyLabel.default,
+  monthOptions: UsaDateInput.props.monthOptions.default(),
   name: UsaDateInput.props.name.default,
   required: UsaDateInput.props.required.default,
   error: UsaDateInput.props.error.default,
@@ -38,6 +41,15 @@ export default {
     dateLabels: {
       control: { type: 'object' },
     },
+    monthAsSelect: {
+      control: { type: 'boolean' },
+    },
+    monthEmptyLabel: {
+      control: { type: 'text' },
+    },
+    monthOptions: {
+      control: { type: 'object' },
+    },
     name: {
       control: { type: 'text' },
     },
@@ -71,6 +83,9 @@ export default {
     year: defaultProps.year,
     dateOrder: defaultProps.dateOrder,
     dateLabels: defaultProps.dateLabels,
+    monthAsSelect: defaultProps.monthAsSelect,
+    monthEmptyLabel: defaultProps.monthEmptyLabel,
+    monthOptions: defaultProps.monthOptions,
     name: defaultProps.name,
     required: defaultProps.required,
     error: defaultProps.error,
@@ -99,6 +114,9 @@ const DefaultTemplate = (args, { argTypes }) => ({
     :year="year"
     :dateOrder="dateOrder"
     :dateLabels="dateLabels"
+    :monthAsSelect="monthAsSelect"
+    :monthEmptyLabel="monthEmptyLabel"
+    :monthOptions="monthOptions"
     :name="name"
     :required="required"
     :error="error"
@@ -188,6 +206,81 @@ CustomInputLabelsDateInput.args = {
 }
 CustomInputLabelsDateInput.storyName = 'Custom Input Labels'
 
+export const MonthAsSelectDateInput = DefaultTemplate.bind({})
+MonthAsSelectDateInput.args = {
+  ...defaultProps,
+  label: 'Month as select form element',
+  monthAsSelect: true,
+}
+MonthAsSelectDateInput.storyName = 'Month as Select form element'
+
+export const CustomMonthSelectEmptyLabelDateInput = DefaultTemplate.bind({})
+CustomMonthSelectEmptyLabelDateInput.args = {
+  ...defaultProps,
+  label: 'Custom month empty label',
+  monthAsSelect: true,
+  monthEmptyLabel: 'Choose a month',
+}
+CustomMonthSelectEmptyLabelDateInput.storyName = 'Custom Month Empty Label'
+
+export const CustomMonthOptionsDateInput = DefaultTemplate.bind({})
+CustomMonthOptionsDateInput.args = {
+  ...defaultProps,
+  label: 'Custom month options',
+  monthAsSelect: true,
+  monthOptions: [
+    {
+      value: 'January',
+      text: 'Jan - 1',
+    },
+    {
+      value: 'February',
+      text: 'Feb - 2',
+    },
+    {
+      value: 'March',
+      text: 'Mar - 3',
+    },
+    {
+      value: 'April',
+      text: 'Apr - 4',
+    },
+    {
+      value: 'May',
+      text: 'May - 5',
+    },
+    {
+      value: 'June',
+      text: 'Jun - 6',
+    },
+    {
+      value: 'July',
+      text: 'Jul - 7',
+    },
+    {
+      value: 'August',
+      text: 'Aug - 8',
+    },
+    {
+      value: 'September',
+      text: 'Sep - 9',
+    },
+    {
+      value: 'October',
+      text: 'Oct - 10',
+    },
+    {
+      value: 'November',
+      text: 'Nov - 11',
+    },
+    {
+      value: 'December',
+      text: 'Dec - 12',
+    },
+  ],
+}
+CustomMonthOptionsDateInput.storyName = 'Custom Month Options'
+
 export const LabelSlotDateInput = DefaultTemplate.bind({})
 LabelSlotDateInput.args = {
   ...defaultProps,