Add pattern-library documentation for Select

src/pattern-library/components/patterns/input/SelectPage.tsx

@@ -0,0 +1,117 @@
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  IconButton,
+  InputGroup,
+  Select,
+} from '../../../../next';
+import Library from '../../Library';
+import Next from '../../LibraryNext';
+
+import type { SelectProps } from '../../../../components/input/Select';
+
+function SelectWrapper({ children, ...selectProps }: SelectProps) {
+  const options = children ?? (
+    <>
+      <option value={-1}>All students</option>
+      <option value="a">Albert Banana</option>
+      <option value="b">Bernard California</option>
+      <option value="c">Cecelia Davenport</option>
+      <option value="d">Doris Evanescence</option>
+    </>
+  );
+  return <Select {...selectProps}>{options}</Select>;
+}
+
+export default function SelectPage() {
+  return (
+    <Library.Page
+      title="Select"
+      intro={
+        <p>
+          <code>Select</code> is a presentational component that styles native{' '}
+          <code>{'<select>'}</code> elements.
+        </p>
+      }
+    >
+      <Library.Section
+        title="Select"
+        intro={
+          <p>
+            <code>Select</code> styles <code>{'<select>'}</code> elements. Note
+            that <code>{'<option>'}</code> elements, with a few browser-specific
+            exceptions, cannot be styled with CSS.
+          </p>
+        }
+      >
+        <Library.Pattern title="Status">
+          <p>
+            <code>Select</code> is a new component.
+          </p>
+        </Library.Pattern>
+        <Library.Pattern title="Usage">
+          <Next.Usage componentName="Select" />
+
+          <Library.Example>
+            <Library.Demo title="Basic Select" withSource>
+              <div>
+                <SelectWrapper aria-label="Example input">
+                  <option value={-1}>All students</option>
+                  <option value="a">Albert Banana</option>
+                  <option value="b">Bernard California</option>
+                  <option value="c">Cecelia Davenport</option>
+                </SelectWrapper>
+              </div>
+            </Library.Demo>
+
+            <Library.Demo title="Setting Select width" withSource>
+              <div className="w-[250px]">
+                <SelectWrapper aria-label="Example input" />
+              </div>
+            </Library.Demo>
+
+            <Library.Demo title="Select in an InputGroup" withSource>
+              <div className="w-[380px]">
+                <InputGroup>
+                  <IconButton
+                    icon={ArrowLeftIcon}
+                    title="Previous student"
+                    variant="dark"
+                  />
+                  <SelectWrapper aria-label="Example input" />
+                  <IconButton
+                    icon={ArrowRightIcon}
+                    title="Next student"
+                    variant="dark"
+                  />
+                </InputGroup>
+              </div>
+            </Library.Demo>
+          </Library.Example>
+        </Library.Pattern>
+
+        <Library.Pattern title="Props">
+          <Library.Example title="hasError">
+            <p>
+              Set <code>hasError</code> to indicate that there is an associated
+              error.
+            </p>
+            <Library.Demo withSource>
+              <div className="w-[350px]">
+                <SelectWrapper aria-label="Example input" hasError />
+              </div>
+            </Library.Demo>
+          </Library.Example>
+
+          <Library.Example title="disabled">
+            <Library.Demo withSource>
+              <div className="w-[350px]">
+                <SelectWrapper aria-label="Example input" disabled />
+              </div>
+            </Library.Demo>
+          </Library.Example>
+        </Library.Pattern>
+      </Library.Section>
+    </Library.Page>
+  );
+}

src/pattern-library/routes.ts

@@ -22,6 +22,7 @@ import ButtonsPage from './components/patterns/input/ButtonPage';
 import CheckboxPage from './components/patterns/input/CheckboxPage';
 import InputPage from './components/patterns/input/InputPage';
 import InputGroupPage from './components/patterns/input/InputGroupPage';
+import SelectPage from './components/patterns/input/SelectPage';
 
 import CardPage from './components/patterns/layout/CardPage';
 import PanelPage from './components/patterns/layout/PanelPage';
@@ -182,6 +183,12 @@ const routes: PlaygroundRoute[] = [
     component: InputGroupPage,
     route: '/input-input-group',
   },
+  {
+    title: 'Select',
+    group: 'input',
+    component: SelectPage,
+    route: '/input-select',
+  },
   {
     title: 'Card',
     group: 'layout',