From 96b88f1c44419aeebfef9f22bbab6e5e345a049d Mon Sep 17 00:00:00 2001
From: Patrick Wolfert <patrick.wolfert@adhocteam.us>
Date: Mon, 15 Apr 2024 12:27:05 -0700
Subject: [PATCH] Add missing `inversed` attribute to `ds-dropdown`

---
 .../ds-dropdown/ds-dropdown.stories.tsx            |  4 ++++
 .../ds-dropdown/ds-dropdown.test.tsx               | 14 ++++++++++++++
 .../web-components/ds-dropdown/ds-dropdown.tsx     |  5 ++++-
 ...Dropdown-Docs-prop-table-matches-snapshot-1.txt |  5 +++++
 4 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/web-components/ds-dropdown/ds-dropdown.stories.tsx b/packages/design-system/src/components/web-components/ds-dropdown/ds-dropdown.stories.tsx
index 07bba7222f..cabc4cbcad 100644
--- a/packages/design-system/src/components/web-components/ds-dropdown/ds-dropdown.stories.tsx
+++ b/packages/design-system/src/components/web-components/ds-dropdown/ds-dropdown.stories.tsx
@@ -45,6 +45,10 @@ export default {
       description: 'Hint text or HTML',
       control: 'text',
     },
+    inversed: {
+      description: 'Set to "true" to apply the "inverse" theme',
+      control: 'boolean',
+    },
     label: {
       description: 'Label text or HTML.',
       control: 'text',
diff --git a/packages/design-system/src/components/web-components/ds-dropdown/ds-dropdown.test.tsx b/packages/design-system/src/components/web-components/ds-dropdown/ds-dropdown.test.tsx
index 1ca844d1e3..c8326fee10 100644
--- a/packages/design-system/src/components/web-components/ds-dropdown/ds-dropdown.test.tsx
+++ b/packages/design-system/src/components/web-components/ds-dropdown/ds-dropdown.test.tsx
@@ -79,6 +79,20 @@ describe('Button', () => {
     expect(error).toContainHTML('Uh-oh!');
   });
 
+  it('applies inverse class', () => {
+    const { container } = renderDropdown({
+      inversed: 'true',
+      hint: 'Hello',
+      'error-message': 'Ahh!!',
+    });
+    const inversedLabel = container.querySelector('.ds-c-label--inverse');
+    const inversedHint = container.querySelector('.ds-c-hint--inverse');
+    const inversedError = container.querySelector('.ds-c-inline-error--inverse');
+    expect(inversedLabel).toBeInTheDocument();
+    expect(inversedHint).toBeInTheDocument();
+    expect(inversedError).toBeInTheDocument();
+  });
+
   it('applies size classes', () => {
     renderDropdown({ size: 'small' });
     const button = screen.getByRole('button');
diff --git a/packages/design-system/src/components/web-components/ds-dropdown/ds-dropdown.tsx b/packages/design-system/src/components/web-components/ds-dropdown/ds-dropdown.tsx
index c3a8bd2745..b89c9320fb 100644
--- a/packages/design-system/src/components/web-components/ds-dropdown/ds-dropdown.tsx
+++ b/packages/design-system/src/components/web-components/ds-dropdown/ds-dropdown.tsx
@@ -19,6 +19,7 @@ const attributes = [
   'label-id',
   'hint',
   'hint-id',
+  'inversed',
   'name',
   'requirement-label',
   'root-id',
@@ -43,10 +44,11 @@ declare global {
 /* eslint-enable */
 
 interface WrapperProps
-  extends Omit<DropdownProps, 'options' | 'autoFocus' | 'disabled' | 'ariaDisabled'> {
+  extends Omit<DropdownProps, 'options' | 'autoFocus' | 'disabled' | 'ariaDisabled' | 'inversed'> {
   autofocus?: string;
   ariaDisabled?: string;
   disabled?: string;
+  inversed?: string;
   options?: string | DropdownProps['options'];
   rootId?: string;
 }
@@ -59,6 +61,7 @@ const Wrapper = ({ children, options, rootId, ...otherProps }: WrapperProps) =>
     aria-disabled={parseBooleanAttr(otherProps.ariaDisabled)}
     options={typeof options === 'string' ? JSON.parse(options) : options}
     id={rootId}
+    inversed={parseBooleanAttr(otherProps.inversed)}
   >
     {options ? undefined : children}
   </Dropdown>
diff --git a/tests/browser/snapshots/storybook-docs/Docs-Web-Components-Dropdown-Docs-prop-table-matches-snapshot-1.txt b/tests/browser/snapshots/storybook-docs/Docs-Web-Components-Dropdown-Docs-prop-table-matches-snapshot-1.txt
index 76f8010368..e63e660cf1 100644
--- a/tests/browser/snapshots/storybook-docs/Docs-Web-Components-Dropdown-Docs-prop-table-matches-snapshot-1.txt
+++ b/tests/browser/snapshots/storybook-docs/Docs-Web-Components-Dropdown-Docs-prop-table-matches-snapshot-1.txt
@@ -44,6 +44,11 @@
     "Hint text or HTML",
     "string"
   ],
+  [
+    "inversed",
+    "Set to \"true\" to apply the \"inverse\" theme",
+    "\"true\"\"false\""
+  ],
   [
     "label",
     "Label text or HTML.",