Merge branch 'main' into 197-ds-select

cfpb · Jan 25, 2024 · d36f8e3 · d36f8e3
2 parents ab2beaf + a59765e
commit d36f8e3
Show file tree

Hide file tree

Showing 3 changed files with 134 additions and 107 deletions.
diff --git a/package.json b/package.json
@@ -45,9 +45,9 @@
     "chromatic": "chromatic --storybook-build-dir dist-storybook --only-changed"
   },
   "dependencies": {
-    "@cfpb/cfpb-design-system": "^0.34.0",
-    "@cfpb/cfpb-expandables": "^0.34.0",
-    "@cfpb/cfpb-forms": "^0.34.0",
+    "@cfpb/cfpb-design-system": "^0.35.0",
+    "@cfpb/cfpb-expandables": "^0.35.0",
+    "@cfpb/cfpb-forms": "^0.35.0",
     "@tanstack/react-query": "4.13.5",
     "classnames": "^2.3.2",
     "display-element-css": "cfpb/storybook-addon-display-element-css",

diff --git a/src/components/TextInput/TextInput.stories.tsx b/src/components/TextInput/TextInput.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Button, Icon, TextInput } from '~/src/index';
 
 const meta: Meta<typeof TextInput> = {
-  title: 'Components (Draft)/Text inputs',
+  title: 'Components (Verified)/Text inputs',
   component: TextInput,
   argTypes: {
     isFullWidth: { control: 'boolean' },
@@ -14,76 +14,92 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const Enabled: Story = {
   args: {
-    name: 'Default',
-    id: 'Default',
-    value: 'Default',
+    name: 'Enabled',
+    id: 'Enabled',
+    value: 'Enabled',
     type: 'text'
   }
 };
 
 export const Hover: Story = {
   args: {
-    ...Default.args,
+    ...Enabled.args,
+    name: 'Hover',
+    id: 'Hover',
     value: 'Hover'
   },
   render: _arguments => <TextInput {..._arguments} className='hover' />
 };
 
 export const Focus: Story = {
   args: {
-    ...Default.args,
+    ...Enabled.args,
+    name: 'Focus',
+    id: 'Focus',
     value: 'Focus'
   },
   render: _arguments => <TextInput {..._arguments} className='focus' />
 };
 
 export const Disabled: Story = {
   args: {
-    ...Default.args,
+    ...Enabled.args,
     value: 'Disabled',
+    name: 'Disabled',
+    id: 'Disabled',
     disabled: true
   }
 };
 
 export const Success: Story = {
   args: {
-    ...Default.args,
+    ...Enabled.args,
     value: 'Success',
+    name: 'Success',
+    id: 'Success',
     status: 'success'
   }
 };
 
 export const Warning: Story = {
   args: {
-    ...Default.args,
+    ...Enabled.args,
     value: 'Warning',
+    name: 'Warning',
+    id: 'Warning',
     status: 'warning'
   }
 };
 
 export const Error: Story = {
   args: {
-    ...Default.args,
+    ...Enabled.args,
     value: 'Error',
+    name: 'Error',
+    id: 'Error',
     status: 'error'
   }
 };
 
 export const FullWidth: Story = {
-  name: 'Text input (full width)',
+  name: 'Full width',
   args: {
-    ...Default.args,
+    ...Enabled.args,
     value: 'Input text',
+    name: 'fullWidth',
+    id: 'fullWidth',
     isFullWidth: true
   }
 };
 
 export const WithButton: Story = {
-  name: 'Text input (with button)',
+  name: 'With button',
   args: {
-    ...Default.args,
+    ...Enabled.args,
+    name: 'withButton',
+    id: 'withButton',
     value: ''
   },
   render: _arguments => (
@@ -99,11 +115,13 @@ export const WithButton: Story = {
 };
 
 export const WithButtonInsideText: Story = {
-  name: 'Button inside text input',
+  name: 'Button inside',
   args: {
-    ...Default.args,
+    ...Enabled.args,
     value:
-      "This is some really long text to make sure that the button doesn't overlap the content in such a way that this input becomes unusable."
+      "This is some really long text to make sure that the button doesn't overlap the content in such a way that this input becomes unusable.",
+    name: 'ButtonInside',
+    id: 'ButtonInside'
   },
   render: _arguments => (
     <div className='m-btn-inside-input'>
@@ -116,11 +134,13 @@ export const WithButtonInsideText: Story = {
 };
 
 export const WithButtonInsideButton: Story = {
-  name: 'Button inside text input with another button',
+  name: 'Button inside (with button)',
   args: {
-    ...Default.args,
+    ...Enabled.args,
     value:
-      "This is some really long text to make sure that the button doesn't overlap the content in such a way that this input becomes unusable."
+      "This is some really long text to make sure that the button doesn't overlap the content in such a way that this input becomes unusable.",
+    name: 'ButtonInsideButton',
+    id: 'ButtonInsideButton'
   },
   render: _arguments => (
     <div className='o-form__input-w-btn'>

diff --git a/yarn.lock b/yarn.lock
@@ -1520,132 +1520,139 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@cfpb/cfpb-buttons@npm:^0.34.0":
-  version: 0.34.0
-  resolution: "@cfpb/cfpb-buttons@npm:0.34.0"
+"@cfpb/cfpb-atomic-component@npm:^0.35.0":
+  version: 0.35.0
+  resolution: "@cfpb/cfpb-atomic-component@npm:0.35.0"
+  checksum: 003de3c7748cd971502c0bd34c107c2908a010ee10b3ab9201c609b0000c5a0b6deaa0b37b815c7d51b93c7bf5a0685b9fdba277583565f4477ce1fbccd9cccf
+  languageName: node
+  linkType: hard
+
+"@cfpb/cfpb-buttons@npm:^0.35.0":
+  version: 0.35.0
+  resolution: "@cfpb/cfpb-buttons@npm:0.35.0"
   dependencies:
-    "@cfpb/cfpb-core": ^0.34.0
-    "@cfpb/cfpb-icons": ^0.34.0
-  checksum: f4126f89477afcb24bcc56c08b99f3b84f71b67775a84b7b01466f48bdab92d6ccb0f001c68ade8ba5814f9d5901fbbe6f399c37561281e6cb0fc7b7882335ca
+    "@cfpb/cfpb-core": ^0.35.0
+    "@cfpb/cfpb-icons": ^0.35.0
+  checksum: a27fcbeb628e7cb5bc4afbb51054696101a1adb03e1ecea39089ebd82b35543c89f41167f69143e1fd5a63268861cc05869bfba91d1666a7f014a8b00f257683
   languageName: node
   linkType: hard
 
-"@cfpb/cfpb-core@npm:^0.34.0":
-  version: 0.34.0
-  resolution: "@cfpb/cfpb-core@npm:0.34.0"
+"@cfpb/cfpb-core@npm:^0.35.0":
+  version: 0.35.0
+  resolution: "@cfpb/cfpb-core@npm:0.35.0"
   dependencies:
     normalize-css: ^2.0.0
-  checksum: 5bd86d3856b248b02c12d41329987d3a649b597198c6f16cd7c07773cb7ed03a1397a5df14dbaca2cd6e49c5b4f1c521d1cfe0d75fd7f5ea9e9c91f6db9f3151
+  checksum: c258e1132380758c2ce9640a64406e2581e2551d8cf5d925ce04f0c7095754cc2fcd4e868bcf9f887530f593e477ba9dbb2f3ed763ddf2689ae96221b6943c09
   languageName: node
   linkType: hard
 
-"@cfpb/cfpb-design-system@npm:^0.34.0":
-  version: 0.34.0
-  resolution: "@cfpb/cfpb-design-system@npm:0.34.0"
+"@cfpb/cfpb-design-system@npm:^0.35.0":
+  version: 0.35.0
+  resolution: "@cfpb/cfpb-design-system@npm:0.35.0"
   dependencies:
-    "@cfpb/cfpb-atomic-component": ^0.34.0
-    "@cfpb/cfpb-buttons": ^0.34.0
-    "@cfpb/cfpb-core": ^0.34.0
-    "@cfpb/cfpb-expandables": ^0.34.0
-    "@cfpb/cfpb-forms": ^0.34.0
-    "@cfpb/cfpb-grid": ^0.34.0
-    "@cfpb/cfpb-icons": ^0.34.0
-    "@cfpb/cfpb-layout": ^0.34.0
-    "@cfpb/cfpb-notifications": ^0.34.0
-    "@cfpb/cfpb-pagination": ^0.34.0
-    "@cfpb/cfpb-tables": ^0.34.0
-    "@cfpb/cfpb-typography": ^0.34.0
-  checksum: eaf9d3465f3fe3302c02bd8901b627108d5484590ab9fd521940f81344f68932b04cc19cb64b0beb12212688e9512c3287293c9a25cd3cc11ea893b3e79c744a
+    "@cfpb/cfpb-atomic-component": ^0.35.0
+    "@cfpb/cfpb-buttons": ^0.35.0
+    "@cfpb/cfpb-core": ^0.35.0
+    "@cfpb/cfpb-expandables": ^0.35.0
+    "@cfpb/cfpb-forms": ^0.35.0
+    "@cfpb/cfpb-grid": ^0.35.0
+    "@cfpb/cfpb-icons": ^0.35.0
+    "@cfpb/cfpb-layout": ^0.35.0
+    "@cfpb/cfpb-notifications": ^0.35.0
+    "@cfpb/cfpb-pagination": ^0.35.0
+    "@cfpb/cfpb-tables": ^0.35.0
+    "@cfpb/cfpb-typography": ^0.35.0
+  checksum: d3de66028be021eba070fe944157ec600c2b78b44d22df2bfb2caa576b3216917da0137309f6a264e0f994822da3fd95e55753fc35677a0746f1715dbc707e1e
   languageName: node
   linkType: hard
 
-"@cfpb/cfpb-expandables@npm:^0.34.0":
-  version: 0.34.0
-  resolution: "@cfpb/cfpb-expandables@npm:0.34.0"
+"@cfpb/cfpb-expandables@npm:^0.35.0":
+  version: 0.35.0
+  resolution: "@cfpb/cfpb-expandables@npm:0.35.0"
   dependencies:
-    "@cfpb/cfpb-atomic-component": ^0.34.0
-    "@cfpb/cfpb-core": ^0.34.0
-    "@cfpb/cfpb-icons": ^0.34.0
-  checksum: d7f5c0226bd1670c0c4550a9f17d1166d781f8c3fb76a5e8f77a0a56acb9ecd67dc62f48c0cb31db0f9864f2f42ecbfcdb7368a3a4330feaf7c291a3cb66d9c4
+    "@cfpb/cfpb-atomic-component": ^0.35.0
+    "@cfpb/cfpb-core": ^0.35.0
+    "@cfpb/cfpb-icons": ^0.35.0
+  checksum: 7edf00a10fd9c5c35a67dcd66bd790d8f49eac74d70ff1ef6492053706f61391c80b2a6029e0c43616ec7a4d2e702ac242c4f0c93e1acd88eb6a343761ae03ff
   languageName: node
   linkType: hard
 
-"@cfpb/cfpb-forms@npm:^0.34.0":
-  version: 0.34.0
-  resolution: "@cfpb/cfpb-forms@npm:0.34.0"
+"@cfpb/cfpb-forms@npm:^0.35.0":
+  version: 0.35.0
+  resolution: "@cfpb/cfpb-forms@npm:0.35.0"
   dependencies:
-    "@cfpb/cfpb-buttons": ^0.34.0
-    "@cfpb/cfpb-core": ^0.34.0
-    "@cfpb/cfpb-grid": ^0.34.0
-    "@cfpb/cfpb-icons": ^0.34.0
-  checksum: f8e468df800758a53b460d600dc076a8cee2d15a4903471fc2198267e3b6cfc2a82112541091f92426160e97ce84ee8ffc31975b7e58106fa824a9d1e3e44438
+    "@cfpb/cfpb-buttons": ^0.35.0
+    "@cfpb/cfpb-core": ^0.35.0
+    "@cfpb/cfpb-grid": ^0.35.0
+    "@cfpb/cfpb-icons": ^0.35.0
+  checksum: 4d12a87b724d4adc4b50b66f091228d99477b10f3ebefeceb068cd93a6729eb987c1f6a60f1187f4b6515cac9bed774bafa0e9d6e58e898b6f03fda2fe98d4f0
   languageName: node
   linkType: hard
 
-"@cfpb/cfpb-grid@npm:^0.34.0":
-  version: 0.34.0
-  resolution: "@cfpb/cfpb-grid@npm:0.34.0"
+"@cfpb/cfpb-grid@npm:^0.35.0":
+  version: 0.35.0
+  resolution: "@cfpb/cfpb-grid@npm:0.35.0"
   dependencies:
     normalize-css: ^2.0.0
-  checksum: fe206389d174ac8176bef173c6949566b3d6ae180b9f6534df0365a3af893dee56de9a23b5fbe975a6e28c086d000f3e52cbd7689a13edad761fc2fa10a3f818
+  checksum: 54a0bba01c6df2c78215bf05b61642e51b39070d1af659820c7f5e7475403024af58b9c838b05a0f3a7772c379b85ade7f8e07fa86cd5a2da5c37bf9c0c4f9df
   languageName: node
   linkType: hard
 
-"@cfpb/cfpb-icons@npm:^0.34.0":
-  version: 0.34.0
-  resolution: "@cfpb/cfpb-icons@npm:0.34.0"
-  checksum: c723c3da7b299e936f09d8ffa326f7639ae3165605284d3b911c3d6bf1bd82e08734da7c79328e7a0388a3ed70aaadf55ad11241f8cee03c460b350561fbd5c6
+"@cfpb/cfpb-icons@npm:^0.35.0":
+  version: 0.35.0
+  resolution: "@cfpb/cfpb-icons@npm:0.35.0"
+  checksum: 8ed66d7b8689d261caecd423b7810774dae609b012141705ae52a86fcdf6ccbcce09859c6f43da4a8542f7e01714293b205cbc494dcaf1359970cd5435164f6e
   languageName: node
   linkType: hard
 
-"@cfpb/cfpb-layout@npm:^0.34.0":
-  version: 0.34.0
-  resolution: "@cfpb/cfpb-layout@npm:0.34.0"
+"@cfpb/cfpb-layout@npm:^0.35.0":
+  version: 0.35.0
+  resolution: "@cfpb/cfpb-layout@npm:0.35.0"
   dependencies:
-    "@cfpb/cfpb-core": ^0.34.0
-    "@cfpb/cfpb-grid": ^0.34.0
-  checksum: f8daa1c91102b67f59f3afdd5c7a1ef0b9703b46f0c2cbf965bd61145a0251729fce68ef327d37eade0dfced965b7c781506c2d833d6fa4f6124e3eff4039911
+    "@cfpb/cfpb-core": ^0.35.0
+    "@cfpb/cfpb-grid": ^0.35.0
+  checksum: c41a9ee4ec5ff57a7d244fe586116ed7e3677b2f9465c79fa4cfd214537660cf4ade2974cd666251e440655602de28f53d65ea19cd94f0f672d83c550c607444
   languageName: node
   linkType: hard
 
-"@cfpb/cfpb-notifications@npm:^0.34.0":
-  version: 0.34.0
-  resolution: "@cfpb/cfpb-notifications@npm:0.34.0"
+"@cfpb/cfpb-notifications@npm:^0.35.0":
+  version: 0.35.0
+  resolution: "@cfpb/cfpb-notifications@npm:0.35.0"
   dependencies:
-    "@cfpb/cfpb-core": ^0.34.0
-    "@cfpb/cfpb-icons": ^0.34.0
-  checksum: 81c47187ccba407ed4e61116e6677149b80ba3ecacdc713cdc2d1ca0d7ec26cb2f53d8387b9f42e1fde48074b19d8c9741c668f600845246b45b18e03aa2f60b
+    "@cfpb/cfpb-core": ^0.35.0
+    "@cfpb/cfpb-icons": ^0.35.0
+  checksum: 7afe76eb257ed04e0f55ae50ad399a5f6e7d12b59021f30a8b329913e482a7783f673e704ff5de383c21cd8007601754c5284b50e85a04a059f3bb7645017e52
   languageName: node
   linkType: hard
 
-"@cfpb/cfpb-pagination@npm:^0.34.0":
-  version: 0.34.0
-  resolution: "@cfpb/cfpb-pagination@npm:0.34.0"
+"@cfpb/cfpb-pagination@npm:^0.35.0":
+  version: 0.35.0
+  resolution: "@cfpb/cfpb-pagination@npm:0.35.0"
   dependencies:
-    "@cfpb/cfpb-buttons": ^0.34.0
-    "@cfpb/cfpb-core": ^0.34.0
-    "@cfpb/cfpb-icons": ^0.34.0
-  checksum: 0144170e6ee57d0094502a04ea56b04240eaf3cc3e62114d4a63cbdf320f764c108a11804d4e3ee543e4a538665877b8b2b90b4528258716879c756a53bc7b5e
+    "@cfpb/cfpb-buttons": ^0.35.0
+    "@cfpb/cfpb-core": ^0.35.0
+    "@cfpb/cfpb-icons": ^0.35.0
+  checksum: e50e73633d287d2ab6dff46b8d60ecad8af05e844203b187b902040b7b2f664ae356e1ba36bf5c77ee416d7dd9dd22e0f565906b71b1b33e7822eea2d5a4c191
   languageName: node
   linkType: hard
 
-"@cfpb/cfpb-tables@npm:^0.34.0":
-  version: 0.34.0
-  resolution: "@cfpb/cfpb-tables@npm:0.34.0"
+"@cfpb/cfpb-tables@npm:^0.35.0":
+  version: 0.35.0
+  resolution: "@cfpb/cfpb-tables@npm:0.35.0"
   dependencies:
-    "@cfpb/cfpb-atomic-component": ^0.34.0
-    "@cfpb/cfpb-core": ^0.34.0
-  checksum: d07c2233eba1ab56eb3c58decd5dec51388af5be02f840e4487121f1eab83be8ed56ae2d327f55e8eef3aea1e7cca8b596472cf32c18c6323ab984a302c0bdba
+    "@cfpb/cfpb-atomic-component": ^0.35.0
+    "@cfpb/cfpb-core": ^0.35.0
+  checksum: 6056dfa7e1b9cf26ce4759adce70e4c9cfe9605ad8f7763e1da85208273748866fc00867aad436a6c9bbe70c62ff8c0c62f4d57d67859f96cf1675fdd532d0f4
   languageName: node
   linkType: hard
 
-"@cfpb/cfpb-typography@npm:^0.34.0":
-  version: 0.34.0
-  resolution: "@cfpb/cfpb-typography@npm:0.34.0"
+"@cfpb/cfpb-typography@npm:^0.35.0":
+  version: 0.35.0
+  resolution: "@cfpb/cfpb-typography@npm:0.35.0"
   dependencies:
-    "@cfpb/cfpb-core": ^0.34.0
-    "@cfpb/cfpb-icons": ^0.34.0
-  checksum: 955b6be43cde99178f6e2952f35106ff4303b65a6bb667a3724c029250262fccdc913495c384b24347125bc25d6d0a0bde71d3353241b57d96888f69dc919101
+    "@cfpb/cfpb-core": ^0.35.0
+    "@cfpb/cfpb-icons": ^0.35.0
+  checksum: cf42ef422164a32ded2117dcb20e70e2a28c0aa70f370c4cf1d8889048a7c87bfb4b86c725a159a1e66b27c345fbcf643ef19ec02047417156e9fd3ddf453cac
   languageName: node
   linkType: hard
 
@@ -7623,9 +7630,9 @@ __metadata:
   resolution: "design-system-react@workspace:."
   dependencies:
     "@babel/core": ^7.20.12
-    "@cfpb/cfpb-design-system": ^0.34.0
-    "@cfpb/cfpb-expandables": ^0.34.0
-    "@cfpb/cfpb-forms": ^0.34.0
+    "@cfpb/cfpb-design-system": ^0.35.0
+    "@cfpb/cfpb-expandables": ^0.35.0
+    "@cfpb/cfpb-forms": ^0.35.0
     "@nabla/vite-plugin-eslint": 1.4.1
     "@storybook/addon-a11y": ^7.0.6
     "@storybook/addon-actions": ^7.0.6