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

import { NextPage } from 'next';
import { TextControlSize, TextControlStyle } from '@tesseract-design/web-base-textcontrol';
import * as Freeform from '@tesseract-design/web-freeform-react';
import { DefaultLayout } from 'src/components/DefaultLayout';

const FreeformPage: NextPage = () => {
  return (
    <DefaultLayout
      title="Freeform"
    >
      <main className="mt-8 mb-16 md:mt-16 md:mb-32">
        <section>
          <div className="container mx-auto px-4">
            <h1>
              TextInput
            </h1>
            <div>
              <section>
                <h2>
                  Default
                </h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4 my-4">
                    <div>
                      <Freeform.TextInput
                        size={TextControlSize.SMALL}
                        label="TextInput ffgg"
                        hint="Type anything here&hellip; ffgg"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.TextInput
                        border
                        size={TextControlSize.SMALL}
                        label="TextInput ffgg"
                        hint="Type anything here&hellip; ffgg"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.TextInput
                        label="TextInput ffgg"
                        hint="Type anything here&hellip; ffgg"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.TextInput
                        border
                        label="TextInput ffgg"
                        hint="Type anything here&hellip; ffgg"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.TextInput
                        size={TextControlSize.LARGE}
                        label="TextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.TextInput
                        border
                        size={TextControlSize.LARGE}
                        label="TextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.TextInput
                        label="TextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                      />
                    </div>
                    <div>
                      <Freeform.TextInput
                        border
                        label="TextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                      />
                    </div>
                  </div>
                  <form>
                    <fieldset className="contents">
                      <legend className="sr-only">Fieldset Test</legend>
                      <div className="grid grid-cols-6 gap-4 my-4">
                        <div className="col-span-2">
                          <Freeform.TextInput
                            label="First Name"
                            block
                            border
                          />
                        </div>
                        <div className="col-span-2">
                          <Freeform.TextInput
                            label="Middle Name"
                            block
                            border
                          />
                        </div>
                        <div className="col-span-2">
                          <Freeform.TextInput
                            label="Last Name"
                            block
                            border
                          />
                        </div>
                        <div className="col-span-3">
                          <Freeform.TextInput
                            label="Username"
                            block
                            border
                          />
                        </div>
                        <div className="col-span-3">
                          <Freeform.TextInput
                            label="Title"
                            block
                            border
                            disabled
                          />
                        </div>
                      </div>
                    </fieldset>
                  </form>
                  <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">
                          <Freeform.TextInput
                            label="First Name"
                            block
                            border
                          />
                        </div>
                        <div className="col-span-2">
                          <Freeform.TextInput
                            label="Middle Name"
                            block
                            border
                          />
                        </div>
                        <div className="col-span-2">
                          <Freeform.TextInput
                            label="Last Name"
                            block
                            border
                          />
                        </div>
                        <div className="col-span-3">
                          <Freeform.TextInput
                            label="Username"
                            block
                            border
                          />
                        </div>
                        <div className="col-span-3">
                          <Freeform.TextInput
                            label="Title"
                            block
                            border
                          />
                        </div>
                      </div>
                    </fieldset>
                  </form>
                  <form>
                    <div>
                      Hi, my name is
                      {' '}
                      <Freeform.TextInput
                        border
                        label="Name"
                        size={TextControlSize.SMALL}
                      />
                      {' '}
                      but you can call me
                      {' '}
                      <Freeform.TextInput
                        border
                        label="Nickname"
                        size={TextControlSize.SMALL}
                      />
                      .
                    </div>
                  </form>
                </div>
              </section>
              <section>
                <h2>Alternate</h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Freeform.TextInput
                        style={TextControlStyle.ALTERNATE}
                        size={TextControlSize.SMALL}
                        label="TextInput ffgg"
                        hint="Type anything here&hellip; ffgg"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.TextInput
                        border
                        style={TextControlStyle.ALTERNATE}
                        size={TextControlSize.SMALL}
                        label="TextInput ffgg"
                        hint="Type anything here&hellip; ffgg"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.TextInput
                        style={TextControlStyle.ALTERNATE}
                        label="TextInput ffgg"
                        hint="Type anything here&hellip; ffgg"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.TextInput
                        border
                        style={TextControlStyle.ALTERNATE}
                        label="TextInput ffgg"
                        hint="Type anything here&hellip; ffgg"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.TextInput
                        style={TextControlStyle.ALTERNATE}
                        size={TextControlSize.LARGE}
                        label="TextInput ffgg"
                        hint="Type anything here&hellip; ffgg"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.TextInput
                        border
                        block
                        style={TextControlStyle.ALTERNATE}
                        size={TextControlSize.LARGE}
                        label="TextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                      />
                    </div>
                    <div>
                      <Freeform.TextInput
                        style={TextControlStyle.ALTERNATE}
                        label="TextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                      />
                    </div>
                    <div>
                      <Freeform.TextInput
                        style={TextControlStyle.ALTERNATE}
                        border
                        label="TextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                      />
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </section>
        <section>
          <div className="container mx-auto px-4">
            <h1>
              MaskedTextInput
            </h1>
            <div>
              <section>
                <h2>
                  Default
                </h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Freeform.MaskedTextInput
                        size={TextControlSize.SMALL}
                        label="MaskedTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.MaskedTextInput
                        border
                        size={TextControlSize.SMALL}
                        label="MaskedTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.MaskedTextInput
                        label="MaskedTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.MaskedTextInput
                        border
                        label="MaskedTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.MaskedTextInput
                        size={TextControlSize.LARGE}
                        label="MaskedTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.MaskedTextInput
                        border
                        size={TextControlSize.LARGE}
                        label="MaskedTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.MaskedTextInput
                        label="MaskedTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                      />
                    </div>
                    <div>
                      <Freeform.MaskedTextInput
                        border
                        label="MaskedTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                      />
                    </div>
                  </div>
                </div>
              </section>
              <section>
                <h2>Alternate</h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Freeform.MaskedTextInput
                        style={TextControlStyle.ALTERNATE}
                        size={TextControlSize.SMALL}
                        label="MaskedTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.MaskedTextInput
                        border
                        style={TextControlStyle.ALTERNATE}
                        size={TextControlSize.SMALL}
                        label="MaskedTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.MaskedTextInput
                        style={TextControlStyle.ALTERNATE}
                        label="MaskedTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.MaskedTextInput
                        border
                        style={TextControlStyle.ALTERNATE}
                        label="MaskedTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.MaskedTextInput
                        style={TextControlStyle.ALTERNATE}
                        size={TextControlSize.LARGE}
                        label="MaskedTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.MaskedTextInput
                        border
                        block
                        style={TextControlStyle.ALTERNATE}
                        size={TextControlSize.LARGE}
                        label="MaskedTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                      />
                    </div>
                    <div>
                      <Freeform.MaskedTextInput
                        style={TextControlStyle.ALTERNATE}
                        label="MaskedTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                      />
                    </div>
                    <div>
                      <Freeform.MaskedTextInput
                        style={TextControlStyle.ALTERNATE}
                        border
                        label="MaskedTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                      />
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </section>
        <section>
          <div className="container mx-auto px-4">
            <h1>
              MultilineTextInput
            </h1>
            <div>
              <section>
                <h2>
                  Default
                </h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Freeform.MultilineTextInput
                        size={TextControlSize.SMALL}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.MultilineTextInput
                        border
                        size={TextControlSize.SMALL}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.MultilineTextInput
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.MultilineTextInput
                        border
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.MultilineTextInput
                        size={TextControlSize.LARGE}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.MultilineTextInput
                        border
                        size={TextControlSize.LARGE}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.MultilineTextInput
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                      />
                    </div>
                    <div>
                      <Freeform.MultilineTextInput
                        border
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                      />
                    </div>
                  </div>
                </div>
              </section>
              <section>
                <h2>Alternate</h2>
                <div>
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Freeform.MultilineTextInput
                        style={TextControlStyle.ALTERNATE}
                        size={TextControlSize.SMALL}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.MultilineTextInput
                        border
                        style={TextControlStyle.ALTERNATE}
                        size={TextControlSize.SMALL}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.MultilineTextInput
                        style={TextControlStyle.ALTERNATE}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.MultilineTextInput
                        border
                        style={TextControlStyle.ALTERNATE}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.MultilineTextInput
                        style={TextControlStyle.ALTERNATE}
                        size={TextControlSize.LARGE}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                      />
                    </div>
                    <div>
                      <Freeform.MultilineTextInput
                        border
                        block
                        style={TextControlStyle.ALTERNATE}
                        size={TextControlSize.LARGE}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                      />
                    </div>
                    <div>
                      <Freeform.MultilineTextInput
                        style={TextControlStyle.ALTERNATE}
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                      />
                    </div>
                    <div>
                      <Freeform.MultilineTextInput
                        style={TextControlStyle.ALTERNATE}
                        border
                        label="MultilineTextInput"
                        hint="Type anything here&hellip;"
                        indicator="A"
                        block
                        disabled
                      />
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </section>
      </main>
    </DefaultLayout>
  );
};

export default FreeformPage;