[Dropdown] Updated stylings, states and stories

package.json

@@ -48,8 +48,6 @@
     "@cfpb/cfpb-design-system": "^0.29.0",
     "@cfpb/cfpb-expandables": "^0.29.0",
     "@cfpb/cfpb-forms": "^0.29.0",
-    "@storybook/jest": "^0.2.2",
-    "@storybook/testing-library": "^0.2.1",
     "@tanstack/react-query": "4.13.5",
     "@tanstack/react-table": "^8.8.0",
     "classnames": "^2.3.2",
@@ -67,9 +65,12 @@
     "@storybook/addon-essentials": "^7.0.6",
     "@storybook/addon-interactions": "^7.4.3",
     "@storybook/addon-links": "^7.0.6",
+    "@storybook/client-api": "^7.4.3",
+    "@storybook/jest": "^0.1.0",
     "@storybook/manager-api": "^7.3.2",
     "@storybook/react": "^7.0.6",
     "@storybook/react-vite": "^7.0.6",
+    "@storybook/testing-library": "^0.1.0",
     "@storybook/theming": "^7.3.2",
     "@testing-library/cypress": "8.0.7",
     "@testing-library/dom": "8.19.0",

src/components/Checkbox/Checkbox.stories.tsx

@@ -1,23 +1,64 @@
+/* eslint-disable unicorn/prevent-abbreviations */
+/* eslint-disable react/jsx-handler-names */
 import type { Meta, StoryObj } from '@storybook/react';
-import { Checkbox } from '~/src/index';
+import { Checkbox } from './Checkbox';
+
+import { useArgs } from '@storybook/client-api';
 
 const meta: Meta<typeof Checkbox> = {
+  title: 'Components/Checkbox',
   component: Checkbox,
-  argTypes: {
-    disabled: { control: 'boolean' },
-    isLarge: { control: 'boolean' }
+  parameters: {
+    docs: {
+      description: {
+        component: `Checkbox Component`
+      }
+    }
   }
 };
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+interface CheckboxWrapperProperties {
+  id: string;
+  label: string;
+}
+
+function CheckboxWrapper({
+  id,
+  label,
+  ...arguments_
+}: CheckboxWrapperProperties): JSX.Element {
+  const [{ checked }, updateArgs] = useArgs();
+  return (
+    <Checkbox
+      {...arguments_}
+      id={id}
+      label={label}
+      onChange={(): void =>
+        updateArgs({
+          checked: !checked
+        })
+      }
+    />
+  );
+}
+
 export const DefaultCheckbox: Story = {
-  args: { id: 'default', name: 'default', label: 'Default checkbox' }
+  render: _args => CheckboxWrapper(_args),
+  name: 'Default dropdown',
+  args: {
+    id: 'default',
+    name: 'default',
+    label: 'Default checkbox',
+    checked: false
+  }
 };
 
 export const CheckboxWithHelper: Story = {
+  render: _args => CheckboxWrapper(_args),
   args: {
     ...DefaultCheckbox.args,
     id: 'CheckboxWithHelper',
@@ -28,6 +69,7 @@ export const CheckboxWithHelper: Story = {
 };
 
 export const LargeCheckbox: Story = {
+  render: _args => CheckboxWrapper(_args),
   args: {
     ...DefaultCheckbox.args,
     id: 'LargeCheckbox',
@@ -38,6 +80,7 @@ export const LargeCheckbox: Story = {
 };
 
 export const LargeCheckboxWithHelper: Story = {
+  render: _args => CheckboxWrapper(_args),
   args: {
     ...DefaultCheckbox.args,
     id: 'LargeCheckboxWithHelper',

src/components/Checkbox/Checkbox.tsx

@@ -1,12 +1,12 @@
 import classnames from 'classnames';
 import type React from 'react';
-import { useMemo, useState } from 'react';
+import type { ReactNode } from 'react';
+import { useCallback } from 'react';
 
 interface CheckboxProperties extends React.HTMLProps<HTMLInputElement> {
   id: string;
-  label: string;
+  label: ReactNode;
   className?: string;
-  defaultChecked?: boolean;
   helperText?: string;
   inputClassName?: string;
   inputRef?:
@@ -18,14 +18,15 @@ interface CheckboxProperties extends React.HTMLProps<HTMLInputElement> {
   isLarge?: boolean;
   name?: string;
 }
+
 const containerBaseStyles = ['m-form-field m-form-field__checkbox'];
 
 export const Checkbox = ({
   id,
   label,
   className,
   inputClassName,
-  defaultChecked = false,
+  checked = false,
   helperText,
   inputRef,
   disabled = false,
@@ -34,15 +35,11 @@ export const Checkbox = ({
   onChange,
   ...properties
 }: CheckboxProperties & JSX.IntrinsicElements['input']): React.ReactElement => {
-  const [checked, setChecked] = useState(defaultChecked);
-
-  const onChangeHandler = useMemo(
-    () =>
-      (event: React.ChangeEvent<HTMLInputElement>): void => {
-        setChecked(event.target.checked);
-        onChange?.(event);
-      },
-    [onChange, setChecked]
+  const onChangeHandler = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>): void => {
+      onChange?.(event);
+    },
+    [onChange]
   );
 
   const containerClasses = [

src/components/Dropdown/Dropdown.less

@@ -0,0 +1,52 @@
+.dropdown-control {
+  border-radius: 0 !important;
+  border-width: 1px !important;
+  width: 100% !important;
+  border-color: #919395 !important;
+  // outline: solid #919395 !important;
+}
+
+.dropdown-control:hover {
+  outline: 2px solid #0072ce;
+  outline-offset: 0;
+}
+
+.dropdown-indicator-separator {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  background: #919395 !important;
+  border-color: inherit !important;
+  width: 1px !important;
+}
+
+.dropdown-indicator-separator__none {
+  width: 0px !important;
+}
+
+.dropdown-indicators-container {
+  background: #e7e8e9 !important;
+  border-left: #919395 1px solid;
+}
+
+.dropdown-dropdown-indicator {
+  color: inherit !important;
+  border-color: inherit !important;
+}
+
+.dropdown-value-container {
+}
+
+.dropdown-value-container--error {
+  border-style: solid !important;
+  border-color: #d14124 !important;
+  // outline: solid #d14124 !important;
+  border-width: 0.17em !important;
+}
+
+.dropdown-value-container--success {
+}
+
+.dropdown-clear-indicator-container {
+  margin-left: 4px;
+  margin-right: 4px;
+}