DS Storybook - Add story for Search

shared/aries-core/src/stories/components/TextInput.stories.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { TextInput } from 'grommet';
+import { Search } from '@hpe-design/icons-grommet';
+import {
+  iconArg,
+  placeholderArg,
+  reverseArg,
+  heightArg,
+  textAlignArg,
+} from '../utils/commonArgs';
+
+const meta = {
+  title: 'Components/TextInput',
+  component: TextInput,
+  argTypes: {
+    defaultSuggestion: {
+      control: { type: 'number' },
+    },
+    dropHeight: heightArg,
+    icon: iconArg,
+    placeholder: placeholderArg,
+    reverse: reverseArg,
+    suggestions: {
+      control: { type: 'object' },
+    },
+    textAlign: textAlignArg,
+  },
+} satisfies Meta<typeof TextInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const SearchExample = {
+  name: 'Search',
+  render: args => <TextInput {...args} />,
+  args: {
+    defaultSuggestion: undefined,
+    dropHeight: undefined,
+    icon: <Search />,
+    placeholder: 'Search',
+    reverse: true,
+    suggestions: ['Suggestion 1', 'Suggestion 2', 'Suggestion 3'],
+    textAlign: undefined,
+  },
+} satisfies Story;

shared/aries-core/src/stories/utils/commonArgs.tsx

@@ -77,6 +77,10 @@ export const disabledArg: ArgType = {
   control: { type: 'boolean' },
 };
 
+export const dropAlignArg: ArgType = {
+  control: { type: 'object' },
+};
+
 export const elevationArg: ArgType = {
   control: { type: 'select' },
   options: tShirtSizes,
@@ -153,6 +157,11 @@ export const skeletonArg: ArgType = {
   control: { type: 'boolean' },
 };
 
+export const textAlignArg: ArgType = {
+  control: { type: 'select' },
+  options: ['start', 'center', 'end'],
+};
+
 export const textSizesArg: ArgType = {
   control: { type: 'select' },
   options: textSizes,