From ca6caf3065eb768c1defa809cb544af04bf3d7c8 Mon Sep 17 00:00:00 2001
From: Monica Wheeler <monica.wheeler@kajabi.com>
Date: Wed, 11 Oct 2023 15:55:50 -0600
Subject: [PATCH] docs(select): react - initial props for react select

---
 .../sage-react/lib/Select/Select.story.jsx    | 140 ------------------
 .../sage-react/lib/Select/Select.story.mdx    |  80 ++++++++++
 2 files changed, 80 insertions(+), 140 deletions(-)
 delete mode 100644 packages/sage-react/lib/Select/Select.story.jsx
 create mode 100644 packages/sage-react/lib/Select/Select.story.mdx

diff --git a/packages/sage-react/lib/Select/Select.story.jsx b/packages/sage-react/lib/Select/Select.story.jsx
deleted file mode 100644
index 9f293e7c23..0000000000
--- a/packages/sage-react/lib/Select/Select.story.jsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import React, { useState } from 'react';
-import { Select } from './Select';
-
-export default {
-  title: 'Sage/Select',
-  component: Select,
-  // displays description on Docs tab
-  parameters: {
-    docs: {
-      description: {
-        component: 'The form select presents a selectable menu of options. The options within the menu are represented by `<option>` elements.'
-      },
-    },
-  },
-  decorators: [(Story) => <div style={{ width: 300, marginLeft: 'auto', marginRight: 'auto' }}>{Story()}</div>],
-  args: {
-    label: 'Select',
-    id: 'field-1',
-    includeLabelInOptions: false,
-    options: [
-      'Option 1',
-      'Option 2',
-      'Option 3',
-      'Option 4',
-    ],
-    placeholder: 'Select an option',
-  },
-};
-
-const Template = (args) => <Select {...args} />;
-
-export const Default = Template.bind({});
-
-export const SelectWithState = (args) => {
-  const [value, updateValue] = useState(args.value);
-  return (
-    <Select
-      {...args}
-      value={value}
-      onChange={(evt) => updateValue(evt.target.value)}
-    />
-  );
-};
-
-SelectWithState.args = {
-  id: 'field-2',
-  label: 'Cool stuff',
-  value: 'Option 2',
-  options: [
-    'Option 1',
-    'Option 2',
-    'Option 3',
-    'Option 4',
-  ],
-  placeholder: 'Choose...'
-};
-
-export const DisabledSelectFieldWithOptionPreselected = (args) => <Select {...args} />;
-
-DisabledSelectFieldWithOptionPreselected.args = {
-  id: 'field-3',
-  label: 'Choose wisely…',
-  options: [
-    'Option 1',
-    'Option 2',
-    'Option 3',
-    'Option 4',
-  ],
-  disabled: true,
-  value: 'Option 3',
-};
-
-export const SelectWithOptionDisabled = (args) => {
-  const [value, updateValue] = useState(args.value);
-  return (
-    <Select
-      {...args}
-      value={value}
-      onChange={(evt) => updateValue(evt.target.value)}
-    />
-  );
-};
-
-SelectWithOptionDisabled.args = {
-  id: 'field-4',
-  label: 'Select from the following:',
-  options: [
-    {
-      label: 'Country',
-      value: '',
-      disabled: true,
-    },
-    'First option',
-    'Third option',
-    'Fourth option',
-    'Fifth option',
-  ],
-  placeholder: 'Pick an option:'
-};
-
-export const SelectWithOptgroups = (args) => {
-  const [value, updateValue] = useState(args.value);
-  return (
-    <Select
-      {...args}
-      value={value}
-      onChange={(evt) => updateValue(evt.target.value)}
-    />
-  );
-};
-
-SelectWithOptgroups.args = {
-  id: 'field-3',
-  label: 'Choose a sport...',
-  value: 'nascar',
-  options: [
-    'Bowling',
-    {
-      groupLabel: 'Hand Sports',
-      groupOptions: [
-        {
-          value: 'football',
-          label: 'Football',
-        },
-        'Basketball',
-      ],
-    },
-    {
-      value: 'nascar',
-      label: 'Nascar',
-    },
-    {
-      groupLabel: 'Foot Sports',
-      groupOptions: [
-        'Soccer',
-      ],
-    },
-  ],
-  placeholder: 'Choose wisely…'
-};
diff --git a/packages/sage-react/lib/Select/Select.story.mdx b/packages/sage-react/lib/Select/Select.story.mdx
new file mode 100644
index 0000000000..4441ad337b
--- /dev/null
+++ b/packages/sage-react/lib/Select/Select.story.mdx
@@ -0,0 +1,80 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Select } from './Select';
+import { Card } from '../Card';
+
+<Meta title="Sage/Select" component={Select} />
+
+# Select
+The Select component is a user-friendly form control designed to let users pick an option or multiple options from a set. Upon selection, it presents a dialog showcasing all choices in an easily navigable list, with features like added context messages, error indications, and a disabled mode.
+
+## Usage Guidelines
+
+### When to use
+
+- 
+
+### When not to use
+
+- 
+
+## Accessibility
+
+## Properties
+
+<ArgsTable story="Default" />
+
+## Variants
+### Default
+The Default variation of the Select component is a simple HTML form element.
+
+<Canvas>
+  <Story name="Default">
+    <Select
+      id="language-select"
+      label="Language"
+      options={[
+        'en - English',
+        'es - Spanish',
+        'fi - Finnish',
+        'fr - French'
+      ]}
+    />
+  </Story>
+</Canvas>
+
+### Select with Message
+The Select component can be used with a message to provide additional context.
+
+<Canvas>
+  <Story name="Select with Message">
+    <Select
+      id="current-select"
+      label="Currency"
+      message="The default currency will be used for formatting and calculation purposes."
+      options={[
+        'USD - United States Dollar',
+        'AED - United Arab Emirates Dirham',
+        'AFN - Afghan Afghani',
+        'ALL - Albanian Lek'
+      ]}
+    />
+  </Story>
+</Canvas>
+
+### Error State
+The Select component can indicate an error state.
+
+<Canvas>
+  <Story name="Select with Error State">
+    <Select
+      id="current-select"
+      label="Currency"
+      message="This field is required."
+      hasError
+      options={[
+        'Left to right (ltr)',
+        'Right to left (rtl)'
+      ]}
+    />
+  </Story>
+</Canvas>