kitchen-sink-server/src/pages/categories/option/index.tsx

import { NextPage } from 'next';
import { TextControlSize, TextControlStyle } from '@tesseract-design/web-base-textcontrol';
import * as Option from '@tesseract-design/web-option-react';
import { CheckControlAppearance } from '@tesseract-design/web-base-checkcontrol';
import { ButtonSize, ButtonVariant } from '@tesseract-design/web-base-button';

type Props = {
  options: Option.SelectOption[],
}

const OptionPage: NextPage<Props> = ({
  options = [
    {
      label: 'Fruits',
      children: [
        {
          label: 'Mango',
          value: 'mango',
        },
        {
          label: 'Strawberry',
          value: 'strawberry',
        },
        {
          label: 'Avocado',
          value: 'avocado',
        },
        {
          label: 'Grapes',
          value: 'grapes',
        },
      ],
    },
    {
      label: 'Non-fruits',
      children: [
        {
          label: 'Chocolate',
          value: 'chocolate',
        },
        {
          label: 'Milk',
          value: 'milk',
        },
        {
          label: 'Coffee',
          value: 'coffee',
        }
      ],
    },
  ],
}) => {
  return (
    <main className="my-16 md:my-32">
      <section>
        <div className="container mx-auto px-4">
          <h1>
            Option
          </h1>
          <div>
            <section>
              <h2>
                DropdownSelect
              </h2>
              <div>
                <section>
                  <h3>
                    Default
                  </h3>
                  <div>
                    <div className="grid md:grid-cols-2 gap-4 my-4">
                      <div>
                        <Option.DropdownSelect
                          size={TextControlSize.SMALL}
                          label="Select"
                          hint="Type anything here&hellip;"
                          block
                          options={options}
                        />
                      </div>
                      <div>
                        <Option.DropdownSelect
                          border
                          size={TextControlSize.SMALL}
                          label="Select"
                          hint="Type anything here&hellip;"
                          block
                          options={options}
                        />
                      </div>
                      <div>
                        <Option.DropdownSelect
                          label="Select"
                          hint="Type anything here&hellip;"
                          block
                          options={options}
                        />
                      </div>
                      <div>
                        <Option.DropdownSelect
                          border
                          label="Select"
                          hint="Type anything here&hellip;"
                          block
                          options={options}
                        />
                      </div>
                      <div>
                        <Option.DropdownSelect
                          size={TextControlSize.LARGE}
                          label="Select"
                          hint="Type anything here&hellip;"
                          block
                          options={options}
                        />
                      </div>
                      <div>
                        <Option.DropdownSelect
                          border
                          size={TextControlSize.LARGE}
                          label="Select"
                          hint="Type anything here&hellip;"
                          block
                          options={options}
                        />
                      </div>
                      <div>
                        <Option.DropdownSelect
                          label="Select"
                          hint="Type anything here&hellip;"
                          block
                          disabled
                          options={options}
                        />
                      </div>
                      <div>
                        <Option.DropdownSelect
                          border
                          label="Select"
                          hint="Type anything here&hellip;"
                          block
                          disabled
                          options={options}
                        />
                      </div>
                    </div>
                    <form>
                      <fieldset disabled className="contents">
                        <legend className="sr-only">Disabled Test</legend>
                        <div className="grid grid-cols-6 gap-4 my-4">
                          <div className="col-span-2">
                            <Option.DropdownSelect
                              label="First Name"
                              block
                              border
                            />
                          </div>
                          <div className="col-span-2">
                            <Option.DropdownSelect
                              label="Middle Name"
                              block
                              border
                            />
                          </div>
                          <div className="col-span-2">
                            <Option.DropdownSelect
                              label="Last Name"
                              block
                              border
                            />
                          </div>
                          <div className="col-span-3">
                            <Option.DropdownSelect
                              label="Username"
                              block
                              border
                            />
                          </div>
                          <div className="col-span-3">
                            <Option.DropdownSelect
                              label="Title"
                              block
                              border
                            />
                          </div>
                        </div>
                      </fieldset>
                    </form>
                    <form>
                      <div>
                        Hi, my name is
                        {' '}
                        <Option.DropdownSelect
                          border
                          label="Name"
                          size={TextControlSize.SMALL}
                        />
                        {' '}
                        but you can call me
                        {' '}
                        <Option.DropdownSelect
                          border
                          label="Nickname"
                          size={TextControlSize.SMALL}
                        />
                        .
                      </div>
                    </form>
                  </div>
                </section>
                <section>
                  <h3>Alternate</h3>
                  <div>
                    <div className="grid md:grid-cols-2 gap-4">
                      <div>
                        <Option.DropdownSelect
                          style={TextControlStyle.ALTERNATE}
                          size={TextControlSize.SMALL}
                          label="Select"
                          hint="Type anything here&hellip;"
                          block
                          options={options}
                        />
                      </div>
                      <div>
                        <Option.DropdownSelect
                          border
                          style={TextControlStyle.ALTERNATE}
                          size={TextControlSize.SMALL}
                          label="Select"
                          hint="Type anything here&hellip;"
                          block
                          options={options}
                        />
                      </div>
                      <div>
                        <Option.DropdownSelect
                          style={TextControlStyle.ALTERNATE}
                          label="Select"
                          hint="Type anything here&hellip;"
                          block
                          options={options}
                        />
                      </div>
                      <div>
                        <Option.DropdownSelect
                          border
                          style={TextControlStyle.ALTERNATE}
                          label="Select"
                          hint="Type anything here&hellip;"
                          block
                          options={options}
                        />
                      </div>
                      <div>
                        <Option.DropdownSelect
                          style={TextControlStyle.ALTERNATE}
                          size={TextControlSize.LARGE}
                          label="Select"
                          hint="Type anything here&hellip;"
                          block
                          options={options}
                        />
                      </div>
                      <div>
                        <Option.DropdownSelect
                          border
                          block
                          style={TextControlStyle.ALTERNATE}
                          size={TextControlSize.LARGE}
                          label="Select"
                          hint="Type anything here&hellip;"
                          options={options}
                        />
                      </div>
                      <div>
                        <Option.DropdownSelect
                          style={TextControlStyle.ALTERNATE}
                          label="Select"
                          hint="Type anything here&hellip;"
                          block
                          disabled
                          options={options}
                        />
                      </div>
                      <div>
                        <Option.DropdownSelect
                          style={TextControlStyle.ALTERNATE}
                          border
                          label="Select"
                          hint="Type anything here&hellip;"
                          block
                          disabled
                          options={options}
                        />
                      </div>
                    </div>
                  </div>
                </section>
              </div>
            </section>
            <section>
              <h2>
                RadioButton
              </h2>
              <div>
                <section>
                  <h3>Default</h3>
                  <div>
                    <div className="grid gap-4 my-4">
                      <div>
                        <Option.RadioButton
                          block
                          subtext="Subtext"
                          name="RadioButton"
                        >
                          RadioButton
                        </Option.RadioButton>
                      </div>
                    </div>
                  </div>
                </section>
                <section>
                  <h3>Switch</h3>
                  <div>
                    <div className="grid gap-4 my-4">
                      <div>
                        <Option.RadioButton
                          block
                          subtext="Subtext"
                          name="RadioButton"
                          appearance={CheckControlAppearance.SWITCH}
                        >
                          RadioButton
                        </Option.RadioButton>
                      </div>
                    </div>
                  </div>
                </section>
                <section>
                  <h3>Button</h3>
                  <div>
                    <div className="grid md:grid-cols-2 gap-4 my-4">
                      <div>
                        <Option.RadioButton
                          block
                          appearance={CheckControlAppearance.BUTTON}
                          name="RadioButton"
                        >
                          Button
                        </Option.RadioButton>
                      </div>
                      <div>
                        <Option.RadioButton
                          variant={ButtonVariant.FILLED}
                          block
                          appearance={CheckControlAppearance.BUTTON}
                          name="RadioButton"
                        >
                          Button
                        </Option.RadioButton>
                      </div>
                      <div>
                        <Option.RadioButton
                          border
                          block
                          appearance={CheckControlAppearance.BUTTON}
                          name="RadioButton"
                        >
                          Button
                        </Option.RadioButton>
                      </div>
                      <div>
                        <Option.RadioButton
                          border
                          variant={ButtonVariant.FILLED}
                          block
                          appearance={CheckControlAppearance.BUTTON}
                          name="RadioButton"
                        >
                          Button
                        </Option.RadioButton>
                      </div>
                      <div>
                        <Option.RadioButton
                          block
                          disabled
                          appearance={CheckControlAppearance.BUTTON}
                          name="RadioButton"
                        >
                          Button
                        </Option.RadioButton>
                      </div>
                      <div>
                        <Option.RadioButton
                          variant={ButtonVariant.FILLED}
                          block
                          disabled
                          appearance={CheckControlAppearance.BUTTON}
                          name="RadioButton"
                        >
                          Button
                        </Option.RadioButton>
                      </div>
                      <div>
                        <Option.RadioButton
                          border
                          block
                          disabled
                          appearance={CheckControlAppearance.BUTTON}
                          name="RadioButton"
                        >
                          Button
                        </Option.RadioButton>
                      </div>
                      <div>
                        <Option.RadioButton
                          border
                          variant={ButtonVariant.FILLED}
                          block
                          disabled
                          appearance={CheckControlAppearance.BUTTON}
                          name="RadioButton"
                        >
                          Button
                        </Option.RadioButton>
                      </div>
                    </div>
                  </div>
                </section>
                <section>
                  <h3>Sizes</h3>
                  <div>
                    <div className="grid md:grid-cols-2 gap-4 my-4">
                      <div>
                        <Option.RadioButton
                          block
                          border
                          size={ButtonSize.SMALL}
                          appearance={CheckControlAppearance.BUTTON}
                          name="RadioButton"
                        >
                          Button
                        </Option.RadioButton>
                      </div>
                      <div>
                        <Option.RadioButton
                          block
                          border
                          variant={ButtonVariant.FILLED}
                          size={ButtonSize.SMALL}
                          appearance={CheckControlAppearance.BUTTON}
                          name="RadioButton"
                        >
                          Button
                        </Option.RadioButton>
                      </div>
                      <div>
                        <Option.RadioButton
                          block
                          border
                          size={ButtonSize.MEDIUM}
                          appearance={CheckControlAppearance.BUTTON}
                          name="RadioButton"
                        >
                          Button
                        </Option.RadioButton>
                      </div>
                      <div>
                        <Option.RadioButton
                          block
                          border
                          variant={ButtonVariant.FILLED}
                          size={ButtonSize.MEDIUM}
                          appearance={CheckControlAppearance.BUTTON}
                          name="RadioButton"
                        >
                          Button
                        </Option.RadioButton>
                      </div>
                      <div>
                        <Option.RadioButton
                          block
                          border
                          size={ButtonSize.LARGE}
                          appearance={CheckControlAppearance.BUTTON}
                          name="RadioButton"
                        >
                          Button
                        </Option.RadioButton>
                      </div>
                      <div>
                        <Option.RadioButton
                          block
                          border
                          variant={ButtonVariant.FILLED}
                          size={ButtonSize.LARGE}
                          appearance={CheckControlAppearance.BUTTON}
                          name="RadioButton"
                        >
                          Button
                        </Option.RadioButton>
                      </div>
                    </div>
                  </div>
                </section>
                <section>
                  <h3>Compact</h3>
                  <div>
                    <div className="grid md:grid-cols-2 gap-4 my-4">
                      <div>
                        <Option.RadioButton
                          block
                          compact
                          border
                          appearance={CheckControlAppearance.BUTTON}
                          name="RadioButton"
                        >
                          Button
                        </Option.RadioButton>
                      </div>
                      <div>
                        <Option.RadioButton
                          block
                          compact
                          border
                          variant={ButtonVariant.FILLED}
                          appearance={CheckControlAppearance.BUTTON}
                          name="RadioButton"
                        >
                          Button
                        </Option.RadioButton>
                      </div>
                      <div>
                        <Option.RadioButton
                          block
                          compact
                          border
                          appearance={CheckControlAppearance.BUTTON}
                          name="RadioButton"
                          subtext={
                            <>
                              Subtext
                            </>
                          }
                        >
                          Button
                        </Option.RadioButton>
                      </div>
                      <div>
                        <Option.RadioButton
                          block
                          compact
                          border
                          variant={ButtonVariant.FILLED}
                          appearance={CheckControlAppearance.BUTTON}
                          name="RadioButton"
                          subtext={
                            <>
                              Subtext
                            </>
                          }
                        >
                          Button
                        </Option.RadioButton>
                      </div>
                      <div>
                        <Option.RadioButton
                          block
                          compact
                          border
                          size={ButtonSize.SMALL}
                          appearance={CheckControlAppearance.BUTTON}
                          name="RadioButton"
                          subtext={
                            <>
                              Subtext
                            </>
                          }
                        >
                          Button
                        </Option.RadioButton>
                      </div>
                      <div>
                        <Option.RadioButton
                          block
                          compact
                          border
                          variant={ButtonVariant.FILLED}
                          size={ButtonSize.SMALL}
                          appearance={CheckControlAppearance.BUTTON}
                          name="RadioButton"
                          subtext={
                            <>
                              Subtext
                            </>
                          }
                        >
                          Button
                        </Option.RadioButton>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
            </section>
            <section>
              <h2>
                Checkbox
              </h2>
              <div>
                <section>
                  <h3>Default</h3>
                  <div>
                    <div className="grid md:grid-cols-2 gap-4 my-4">
                      <div>
                        <Option.Checkbox
                          block
                          subtext="Subtext"
                        >
                          Checkbox
                        </Option.Checkbox>
                      </div>
                      <div>
                        <Option.Checkbox
                          block
                          indeterminate
                          subtext="Subtext"
                        >
                          Checkbox
                        </Option.Checkbox>
                      </div>
                    </div>
                  </div>
                </section>
                <section>
                  <h3>Switch</h3>
                  <div>
                    <div className="grid md:grid-cols-2 gap-4 my-4">
                      <div>
                        <Option.Checkbox
                          block
                          subtext="Subtext"
                          appearance={CheckControlAppearance.SWITCH}
                        >
                          Checkbox
                        </Option.Checkbox>
                      </div>
                      <div>
                        <Option.Checkbox
                          block
                          indeterminate
                          subtext="Subtext"
                          appearance={CheckControlAppearance.SWITCH}
                        >
                          Checkbox
                        </Option.Checkbox>
                      </div>
                    </div>
                  </div>
                </section>
                <section>
                  <h3>Button</h3>
                  <div>
                    <div className="grid md:grid-cols-2 gap-4 my-4">
                      <div>
                        <Option.Checkbox
                          block
                          appearance={CheckControlAppearance.BUTTON}
                        >
                          Button
                        </Option.Checkbox>
                      </div>
                      <div>
                        <Option.Checkbox
                          variant={ButtonVariant.FILLED}
                          block
                          appearance={CheckControlAppearance.BUTTON}
                        >
                          Button
                        </Option.Checkbox>
                      </div>
                      <div>
                        <Option.Checkbox
                          border
                          block
                          appearance={CheckControlAppearance.BUTTON}
                        >
                          Button
                        </Option.Checkbox>
                      </div>
                      <div>
                        <Option.Checkbox
                          border
                          variant={ButtonVariant.FILLED}
                          block
                          appearance={CheckControlAppearance.BUTTON}
                        >
                          Button
                        </Option.Checkbox>
                      </div>
                      <div>
                        <Option.Checkbox
                          block
                          disabled
                          appearance={CheckControlAppearance.BUTTON}
                        >
                          Button
                        </Option.Checkbox>
                      </div>
                      <div>
                        <Option.Checkbox
                          variant={ButtonVariant.FILLED}
                          block
                          disabled
                          appearance={CheckControlAppearance.BUTTON}
                        >
                          Button
                        </Option.Checkbox>
                      </div>
                      <div>
                        <Option.Checkbox
                          border
                          block
                          disabled
                          appearance={CheckControlAppearance.BUTTON}
                        >
                          Button
                        </Option.Checkbox>
                      </div>
                      <div>
                        <Option.Checkbox
                          border
                          variant={ButtonVariant.FILLED}
                          block
                          disabled
                          appearance={CheckControlAppearance.BUTTON}
                        >
                          Button
                        </Option.Checkbox>
                      </div>
                      <div>
                        <Option.Checkbox
                          border
                          block
                          appearance={CheckControlAppearance.BUTTON}
                          indeterminate
                        >
                          Button
                        </Option.Checkbox>
                      </div>
                      <div>
                        <Option.Checkbox
                          border
                          variant={ButtonVariant.FILLED}
                          block
                          appearance={CheckControlAppearance.BUTTON}
                          indeterminate
                        >
                          Button
                        </Option.Checkbox>
                      </div>
                    </div>
                  </div>
                </section>
                <section>
                  <h3>Sizes</h3>
                  <div>
                    <div className="grid md:grid-cols-2 gap-4 my-4">
                      <div>
                        <Option.Checkbox
                          block
                          border
                          size={ButtonSize.SMALL}
                          appearance={CheckControlAppearance.BUTTON}
                        >
                          Button
                        </Option.Checkbox>
                      </div>
                      <div>
                        <Option.Checkbox
                          block
                          border
                          variant={ButtonVariant.FILLED}
                          size={ButtonSize.SMALL}
                          appearance={CheckControlAppearance.BUTTON}
                        >
                          Button
                        </Option.Checkbox>
                      </div>
                      <div>
                        <Option.Checkbox
                          block
                          border
                          size={ButtonSize.MEDIUM}
                          appearance={CheckControlAppearance.BUTTON}
                        >
                          Button
                        </Option.Checkbox>
                      </div>
                      <div>
                        <Option.Checkbox
                          block
                          border
                          variant={ButtonVariant.FILLED}
                          size={ButtonSize.MEDIUM}
                          appearance={CheckControlAppearance.BUTTON}
                        >
                          Button
                        </Option.Checkbox>
                      </div>
                      <div>
                        <Option.Checkbox
                          block
                          border
                          size={ButtonSize.LARGE}
                          appearance={CheckControlAppearance.BUTTON}
                        >
                          Button
                        </Option.Checkbox>
                      </div>
                      <div>
                        <Option.Checkbox
                          block
                          border
                          variant={ButtonVariant.FILLED}
                          size={ButtonSize.LARGE}
                          appearance={CheckControlAppearance.BUTTON}
                        >
                          Button
                        </Option.Checkbox>
                      </div>
                    </div>
                  </div>
                </section>
                <section>
                  <h3>Compact</h3>
                  <div>
                    <div className="grid md:grid-cols-2 gap-4 my-4">
                      <div>
                        <Option.Checkbox
                          block
                          compact
                          border
                          appearance={CheckControlAppearance.BUTTON}
                        >
                          Button
                        </Option.Checkbox>
                      </div>
                      <div>
                        <Option.Checkbox
                          block
                          compact
                          border
                          variant={ButtonVariant.FILLED}
                          appearance={CheckControlAppearance.BUTTON}
                        >
                          Button
                        </Option.Checkbox>
                      </div>
                      <div>
                        <Option.Checkbox
                          block
                          compact
                          border
                          appearance={CheckControlAppearance.BUTTON}
                          subtext={
                            <>
                              Subtext
                            </>
                          }
                        >
                          Button
                        </Option.Checkbox>
                      </div>
                      <div>
                        <Option.Checkbox
                          block
                          compact
                          border
                          variant={ButtonVariant.FILLED}
                          appearance={CheckControlAppearance.BUTTON}
                          subtext={
                            <>
                              Subtext
                            </>
                          }
                        >
                          Button
                        </Option.Checkbox>
                      </div>
                      <div>
                        <Option.Checkbox
                          block
                          compact
                          border
                          size={ButtonSize.SMALL}
                          appearance={CheckControlAppearance.BUTTON}
                          subtext={
                            <>
                              Subtext
                            </>
                          }
                        >
                          Button
                        </Option.Checkbox>
                      </div>
                      <div>
                        <Option.Checkbox
                          block
                          compact
                          border
                          variant={ButtonVariant.FILLED}
                          size={ButtonSize.SMALL}
                          appearance={CheckControlAppearance.BUTTON}
                          subtext={
                            <>
                              Subtext
                            </>
                          }
                        >
                          Button
                        </Option.Checkbox>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
            </section>
            <section>
              <h2>
                TagList
              </h2>
              <div>
                TODO
              </div>
            </section>
            <section>
              <h2>
                ComboBox
              </h2>
              <div>
                TODO input with datalist
              </div>
            </section>
          </div>
        </div>
      </section>
    </main>
  )
}

export default OptionPage