Pull request #41: EOA-3161: add 'variants' stories and documentation

Merge in DEV/colibri-docs from feature/EOA-3161_add_text_field_sb_documentation to release/current

* commit 'eee9b1f1b3d7e9ed451bd00b08c7632358cea487':
  EOA-3161: add 'variants' stories and documentation

Author: dgonzalezts

src/components/col-text-field/col-text-field.mdx

@@ -112,6 +112,23 @@ import { Callout } from '../../_storybook/components';
     </div>
     <Canvas of={stories.WithCustomId} />
 
+    ### Variants
+    <div>
+      The `col-text-field` component supports two visual variants to accommodate different design contexts and user preferences.
+    </div>
+
+
+    #### Outline Variant
+    <div>
+      The outline variant displays a full border around the input field, providing clear visual boundaries. This is the default variant and is ideal for most form contexts where clear field separation is important.
+    </div>
+    <Canvas of={stories.Variants} />
+
+    #### Plain Variant
+    <div>
+      The plain variant removes the border entirely, creating a minimal appearance. The field only shows a border when focused or in error states, providing a cleaner, more modern look.
+    </div>
+    <Canvas of={stories.PlainVariant} />
   </div>
 </div>
 

src/components/col-text-field/col-text-field.stories.tsx

@@ -23,6 +23,7 @@ type StoryArgs = {
   errorMessage?: string;
   validationTiming?: 'blur' | 'change' | 'input' | 'submit';
   name: string;
+  variant: 'outline' | 'plain';
   iconVisible: boolean;
   iconName: string;
   iconSize: string;
@@ -111,6 +112,17 @@ const meta = {
       },
       if: { arg: 'inputType', neq: '' },
     },
+    variant: {
+      control: 'select',
+      options: ['outline', 'plain'],
+      description: 'The visual variant of the text field.',
+      table: {
+        category: 'Core',
+        type: { summary: "'outline' | 'plain'" },
+        defaultValue: { summary: 'outline' },
+      },
+      if: { arg: 'variant', neq: '' },
+    },
     placeholder: {
       control: 'text',
       description: 'Placeholder text for the input.',
@@ -334,6 +346,7 @@ const meta = {
     subLabel: '',
     helper: '',
     inputType: 'text',
+    variant: 'outline',
     placeholder: 'Enter text here...',
     name: '',
     id: '',
@@ -373,6 +386,7 @@ const renderTextField: Story['render'] = args => html`
     sub-label=${args.subLabel || nothing}
     helper=${args.helper || nothing}
     input-type=${args.inputType}
+    variant=${args.variant}
     placeholder=${args.placeholder || nothing}
     char-count=${args.charCount || nothing}
     pattern=${args.pattern || nothing}
@@ -408,6 +422,7 @@ export const Default: Story = {
     required: true,
     charCount: 20,
     inputType: 'text',
+    variant: 'outline',
     inputMode: 'text',
     iconVisible: true,
     iconName: 'emoji-circle',
@@ -417,6 +432,22 @@ export const Default: Story = {
   render: renderTextField,
 };
 
+export const Variants: Story = {
+  args: {
+    variant: 'outline',
+  },
+  render: renderTextField,
+  tags: ['!dev'],
+};
+
+export const PlainVariant: Story = {
+  args: {
+    variant: 'plain',
+  },
+  render: renderTextField,
+  tags: ['!dev'],
+};
+
 export const WithLabel: Story = {
   args: {
     label: 'With Label',