|
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663 |
- import { NextPage } from 'next';
- import * as Choice from '@tesseract-design/web-choice-react';
- import * as MultiChoice from '@tesseract-design/web-multichoice-react';
- import { DefaultLayout } from '@/components/DefaultLayout';
- import {ReactNode} from 'react';
-
- type Props = {
- options: ReactNode,
- }
-
- const OptionPage: NextPage<Props> = ({
- options = (
- <>
- <optgroup label="Fruits">
- <option value="mango">Mango</option>
- <option value="strawberry">Strawberry</option>
- <option value="avocado">Avocado</option>
- <option value="grapes">Grapes</option>
- </optgroup>
- <optgroup label="Non-fruits">
- <option value="chocolate">Chocolate</option>
- <option value="milk">Milk</option>
- <option value="coffee">Coffee</option>
- </optgroup>
- </>
- )
- }) => {
- return (
- <DefaultLayout
- title="Option"
- >
- <div className="mt-8 mb-16 md:mt-16 md:mb-32">
- <section>
- <div className="container mx-auto px-4">
- <h1>
- DropdownSelect
- </h1>
- <div>
- <section>
- <h2>
- Default
- </h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4 my-4">
- <div>
- <Choice.DropdownSelect
- size="small"
- label="Select"
- hint="Type anything here…"
- block
- >
- {options}
- </Choice.DropdownSelect>
- </div>
- <div>
- <Choice.DropdownSelect
- border
- size="small"
- label="Select"
- hint="Type anything here…"
- block
- >
- {options}
- </Choice.DropdownSelect>
- </div>
- <div>
- <Choice.DropdownSelect
- label="Select"
- hint="Type anything here…"
- block
- >
- {options}
- </Choice.DropdownSelect>
- </div>
- <div>
- <Choice.DropdownSelect
- border
- label="Select"
- hint="Type anything here…"
- block
- >
- {options}
- </Choice.DropdownSelect>
- </div>
- <div>
- <Choice.DropdownSelect
- size="large"
- label="Select"
- hint="Type anything here…"
- block
- >
- {options}
- </Choice.DropdownSelect>
- </div>
- <div>
- <Choice.DropdownSelect
- border
- size="large"
- label="Select"
- hint="Type anything here…"
- block
- >
- {options}
- </Choice.DropdownSelect>
- </div>
- <div>
- <Choice.DropdownSelect
- label="Select"
- hint="Type anything here…"
- block
- disabled
- >
- {options}
- </Choice.DropdownSelect>
- </div>
- <div>
- <Choice.DropdownSelect
- border
- label="Select"
- hint="Type anything here…"
- block
- disabled
- >
- {options}
- </Choice.DropdownSelect>
- </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">
- <Choice.DropdownSelect
- label="First Name"
- block
- border
- />
- </div>
- <div className="col-span-2">
- <Choice.DropdownSelect
- label="Middle Name"
- block
- border
- />
- </div>
- <div className="col-span-2">
- <Choice.DropdownSelect
- label="Last Name"
- block
- border
- />
- </div>
- <div className="col-span-3">
- <Choice.DropdownSelect
- label="Username"
- block
- border
- />
- </div>
- <div className="col-span-3">
- <Choice.DropdownSelect
- label="Title"
- block
- border
- />
- </div>
- </div>
- </fieldset>
- </form>
- <form>
- <div>
- Hi, my name is
- {' '}
- <Choice.DropdownSelect
- border
- label="Name"
- size="small"
- />
- {' '}
- but you can call me
- {' '}
- <Choice.DropdownSelect
- border
- label="Nickname"
- size="small"
- />
- .
- </div>
- </form>
- </div>
- </section>
- <section>
- <h2>Alternate</h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4">
- <div>
- <Choice.DropdownSelect
- variant="alternate"
- size="small"
- label="Select"
- hint="Type anything here…"
- block
- >
- {options}
- </Choice.DropdownSelect>
- </div>
- <div>
- <Choice.DropdownSelect
- border
- variant="alternate"
- size="small"
- label="Select"
- hint="Type anything here…"
- block
- >
- {options}
- </Choice.DropdownSelect>
- </div>
- <div>
- <Choice.DropdownSelect
- variant="alternate"
- label="Select"
- hint="Type anything here…"
- block
- >
- {options}
- </Choice.DropdownSelect>
- </div>
- <div>
- <Choice.DropdownSelect
- border
- variant="alternate"
- label="Select"
- hint="Type anything here…"
- block
- >
- {options}
- </Choice.DropdownSelect>
- </div>
- <div>
- <Choice.DropdownSelect
- variant="alternate"
- size="large"
- label="Select"
- hint="Type anything here…"
- block
- >
- {options}
- </Choice.DropdownSelect>
- </div>
- <div>
- <Choice.DropdownSelect
- border
- block
- variant="alternate"
- size="large"
- label="Select"
- hint="Type anything here…"
- >
- {options}
- </Choice.DropdownSelect>
- </div>
- <div>
- <Choice.DropdownSelect
- variant="alternate"
- label="Select"
- hint="Type anything here…"
- block
- disabled
- >
- {options}
- </Choice.DropdownSelect>
- </div>
- <div>
- <Choice.DropdownSelect
- variant="alternate"
- border
- label="Select"
- hint="Type anything here…"
- block
- disabled
- >
- {options}
- </Choice.DropdownSelect>
- </div>
- </div>
- </div>
- </section>
- </div>
- </div>
- </section>
- <section>
- <div className="container mx-auto px-4">
- <h1>
- MenuSelect
- </h1>
- <div>
- <section>
- <h2>
- Default
- </h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4">
- <div>
- <Choice.MenuSelect
- size="small"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.MenuSelect>
- </div>
- <div>
- <Choice.MenuSelect
- border
- size="small"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.MenuSelect>
- </div>
- <div>
- <Choice.MenuSelect
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.MenuSelect>
- </div>
- <div>
- <Choice.MenuSelect
- border
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.MenuSelect>
- </div>
- <div>
- <Choice.MenuSelect
- size="large"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.MenuSelect>
- </div>
- <div>
- <Choice.MenuSelect
- border
- size="large"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.MenuSelect>
- </div>
- <div>
- <Choice.MenuSelect
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- >
- {options}
- </Choice.MenuSelect>
- </div>
- <div>
- <Choice.MenuSelect
- border
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- >
- {options}
- </Choice.MenuSelect>
- </div>
- </div>
- </div>
- </section>
- <section>
- <h2>Alternate</h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4">
- <div>
- <Choice.MenuSelect
- variant="alternate"
- size="small"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.MenuSelect>
- </div>
- <div>
- <Choice.MenuSelect
- border
- variant="alternate"
- size="small"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.MenuSelect>
- </div>
- <div>
- <Choice.MenuSelect
- variant="alternate"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.MenuSelect>
- </div>
- <div>
- <Choice.MenuSelect
- border
- variant="alternate"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.MenuSelect>
- </div>
- <div>
- <Choice.MenuSelect
- variant="alternate"
- size="large"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.MenuSelect>
- </div>
- <div>
- <Choice.MenuSelect
- border
- block
- variant="alternate"
- size="large"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- >
- {options}
- </Choice.MenuSelect>
- </div>
- <div>
- <Choice.MenuSelect
- variant="alternate"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- >
- {options}
- </Choice.MenuSelect>
- </div>
- <div>
- <Choice.MenuSelect
- variant="alternate"
- border
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- >
- {options}
- </Choice.MenuSelect>
- </div>
- </div>
- </div>
- </section>
- <section>
- <h2>
- Multiple
- </h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4">
- <div>
- <MultiChoice.MenuMultiSelect
- size="small"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </MultiChoice.MenuMultiSelect>
- </div>
- <div>
- <MultiChoice.MenuMultiSelect
- border
- size="small"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </MultiChoice.MenuMultiSelect>
- </div>
- <div>
- <MultiChoice.MenuMultiSelect
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </MultiChoice.MenuMultiSelect>
- </div>
- <div>
- <MultiChoice.MenuMultiSelect
- border
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </MultiChoice.MenuMultiSelect>
- </div>
- <div>
- <MultiChoice.MenuMultiSelect
- size="large"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </MultiChoice.MenuMultiSelect>
- </div>
- <div>
- <MultiChoice.MenuMultiSelect
- border
- size="large"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </MultiChoice.MenuMultiSelect>
- </div>
- <div>
- <MultiChoice.MenuMultiSelect
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- >
- {options}
- </MultiChoice.MenuMultiSelect>
- </div>
- <div>
- <MultiChoice.MenuMultiSelect
- border
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- >
- {options}
- </MultiChoice.MenuMultiSelect>
- </div>
- </div>
- </div>
- </section>
- </div>
- </div>
- </section>
- <section>
- <div className="container mx-auto px-4">
- <h1>
- RadioButton
- </h1>
- <div>
- <section>
- <h2>Variants</h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4 my-4">
- <div>
- <Choice.RadioButton
- block
- variant="bare"
- name="RadioButton"
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- variant="filled"
- block
- name="RadioButton"
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- variant="outline"
- block
- name="RadioButton"
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- variant="filled"
- block
- name="RadioButton"
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- block
- disabled
- name="RadioButton"
- variant="bare"
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- variant="filled"
- block
- disabled
- name="RadioButton"
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- variant="outline"
- block
- disabled
- name="RadioButton"
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- variant="filled"
- block
- disabled
- name="RadioButton"
- >
- Button
- </Choice.RadioButton>
- </div>
- </div>
- </div>
- </section>
- <section>
- <h2>Sizes</h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4 my-4">
- <div>
- <Choice.RadioButton
- block
- variant="outline"
- size="small"
- name="RadioButton"
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- block
- variant="filled"
- size="small"
- name="RadioButton"
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- block
- variant="outline"
- size="medium"
- name="RadioButton"
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- block
- variant="filled"
- size="medium"
- name="RadioButton"
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- block
- variant="outline"
- size="large"
- name="RadioButton"
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- block
- variant="filled"
- size="large"
- name="RadioButton"
- >
- Button
- </Choice.RadioButton>
- </div>
- </div>
- </div>
- </section>
- <section>
- <h2>Compact</h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4 my-4">
- <div>
- <Choice.RadioButton
- block
- compact
- variant="outline"
- name="RadioButton"
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- block
- compact
- variant="filled"
- name="RadioButton"
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- block
- compact
- variant="outline"
- name="RadioButton"
- subtext={
- <>
- Subtext
- </>
- }
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- block
- compact
- variant="filled"
- name="RadioButton"
- subtext={
- <>
- Subtext
- </>
- }
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- block
- compact
- variant="outline"
- size="small"
- name="RadioButton"
- subtext={
- <>
- Subtext
- </>
- }
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- block
- compact
- variant="filled"
- size="small"
- name="RadioButton"
- subtext={
- <>
- Subtext
- </>
- }
- >
- Button
- </Choice.RadioButton>
- </div>
- </div>
- </div>
- </section>
- </div>
- </div>
- </section>
- <section>
- <div className="container mx-auto px-4">
- <h1>
- RadioTickBox
- </h1>
- <div>
- <div className="grid gap-4 my-4">
- <div>
- <Choice.RadioTickBox
- block
- subtext="Subtext"
- name="RadioButton"
- >
- RadioButton
- </Choice.RadioTickBox>
- </div>
- </div>
- <div className="grid gap-4 my-4">
- <div>
- <Choice.RadioTickBox
- block
- subtext={
- <>
- <div>
- This is a very long text that may span a couple of lines.
- </div>
- <div>
- The subtext should not be included with the click area of the component.
- </div>
- </>
- }
- name="RadioButton"
- >
- RadioButton
- </Choice.RadioTickBox>
- </div>
- </div>
- </div>
- </div>
- </section>
- <section>
- <div className="container mx-auto px-4">
- <h1>
- ToggleButton
- </h1>
- <div>
- <section>
- <h2>Variants</h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4 my-4">
- <div>
- <MultiChoice.ToggleButton
- variant="bare"
- indeterminate
- ref={(el) => { console.log(el); }}
- block
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- variant="filled"
- block
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- variant="outline"
- block
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- variant="filled"
- block
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- variant="bare"
- block
- disabled
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- variant="filled"
- block
- disabled
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- variant="outline"
- block
- disabled
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- variant="filled"
- block
- disabled
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- variant="outline"
- block
- indeterminate
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- variant="filled"
- block
- indeterminate
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- </div>
- </div>
- </section>
- <section>
- <h2>Sizes</h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4 my-4">
- <div>
- <MultiChoice.ToggleButton
- block
- variant="outline"
- size="small"
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- block
- variant="filled"
- size="small"
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- block
- variant="outline"
- size="medium"
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- block
- variant="filled"
- size="medium"
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- block
- variant="outline"
- size="large"
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- block
- variant="filled"
- size="large"
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- </div>
- </div>
- </section>
- <section>
- <h2>Compact</h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4 my-4">
- <div>
- <MultiChoice.ToggleButton
- block
- compact
- variant="outline"
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- block
- compact
- variant="filled"
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- block
- compact
- variant="outline"
- subtext={
- <>
- Subtext
- </>
- }
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- block
- compact
- variant="filled"
- subtext={
- <>
- Subtext
- </>
- }
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- block
- compact
- variant="outline"
- size="small"
- subtext={
- <>
- Subtext
- </>
- }
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- block
- compact
- variant="filled"
- size="small"
- subtext={
- <>
- Subtext
- </>
- }
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- </div>
- </div>
- </section>
- </div>
- </div>
- </section>
- <section>
- <div className="container mx-auto px-4">
- <h1>
- ToggleSwitch
- </h1>
- <div>
- <section>
- <h2>Default</h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4 my-4">
- <div>
- <MultiChoice.ToggleSwitch
- block
- subtext="Subtext"
- checkedLabel="Checkbox"
- />
- </div>
- <div>
- <MultiChoice.ToggleSwitch
- block
- subtext="Subtext"
- checkedLabel="Checkbox"
- />
- </div>
- </div>
- </div>
- </section>
- <section>
- <h2>With Unchecked Label</h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4 my-4">
- <div>
- <MultiChoice.ToggleSwitch
- block
- subtext="Subtext"
- checkedLabel="On"
- uncheckedLabel="Off"
- />
- </div>
- <div>
- <MultiChoice.ToggleSwitch
- block
- subtext="Subtext"
- indeterminate
- checkedLabel="On"
- uncheckedLabel="Off"
- />
- </div>
- </div>
- </div>
- </section>
- </div>
- </div>
- </section>
- <section>
- <div className="container mx-auto px-4">
- <h1>
- ToggleTickBox
- </h1>
- <div>
- <section>
- <h2>Default</h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4 my-4">
- <div>
- <MultiChoice.ToggleTickBox
- block
- subtext="Subtext"
- >
- Checkbox
- </MultiChoice.ToggleTickBox>
- </div>
- <div>
- <MultiChoice.ToggleTickBox
- block
- indeterminate
- subtext="Subtext"
- >
- Checkbox
- </MultiChoice.ToggleTickBox>
- </div>
- </div>
- </div>
- </section>
- </div>
- </div>
- </section>
- <section>
- <div className="container mx-auto px-4">
- <h1>
- ComboBox
- </h1>
- <div>
- <section>
- <h2>
- Default
- </h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4">
- <div>
- <Choice.ComboBox
- size="small"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.ComboBox>
- </div>
- <div>
- <Choice.ComboBox
- border
- size="small"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.ComboBox>
- </div>
- <div>
- <Choice.ComboBox
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.ComboBox>
- </div>
- <div>
- <Choice.ComboBox
- border
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.ComboBox>
- </div>
- <div>
- <Choice.ComboBox
- size="large"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.ComboBox>
- </div>
- <div>
- <Choice.ComboBox
- border
- size="large"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.ComboBox>
- </div>
- <div>
- <Choice.ComboBox
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- >
- {options}
- </Choice.ComboBox>
- </div>
- <div>
- <Choice.ComboBox
- border
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- >
- {options}
- </Choice.ComboBox>
- </div>
- </div>
- </div>
- </section>
- <section>
- <h2>Alternate</h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4">
- <div>
- <Choice.ComboBox
- variant="alternate"
- size="small"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.ComboBox>
- </div>
- <div>
- <Choice.ComboBox
- border
- variant="alternate"
- size="small"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.ComboBox>
- </div>
- <div>
- <Choice.ComboBox
- variant="alternate"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.ComboBox>
- </div>
- <div>
- <Choice.ComboBox
- border
- variant="alternate"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.ComboBox>
- </div>
- <div>
- <Choice.ComboBox
- variant="alternate"
- size="large"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.ComboBox>
- </div>
- <div>
- <Choice.ComboBox
- border
- block
- variant="alternate"
- size="large"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- >
- {options}
- </Choice.ComboBox>
- </div>
- <div>
- <Choice.ComboBox
- variant="alternate"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- >
- {options}
- </Choice.ComboBox>
- </div>
- <div>
- <Choice.ComboBox
- variant="alternate"
- border
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- >
- {options}
- </Choice.ComboBox>
- </div>
- </div>
- </div>
- </section>
- </div>
- </div>
- </section>
- <section>
- <div className="container mx-auto px-4">
- <h1>
- TagInput
- </h1>
- <div>
- <section>
- <h2>
- Default
- </h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4">
- <div>
- <MultiChoice.TagInput
- size="small"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- enhanced
- />
- </div>
- <div>
- <MultiChoice.TagInput
- border
- size="small"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- enhanced
- />
- </div>
- <div>
- <MultiChoice.TagInput
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- enhanced
- />
- </div>
- <div>
- <MultiChoice.TagInput
- border
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- enhanced
- />
- </div>
- <div>
- <MultiChoice.TagInput
- size="large"
- label="not enhanced"
- hint="Type anything here…"
- indicator="A"
- block
- onFocus={(e) => {
- console.log('focus', e.currentTarget);
- }}
- onBlur={(e) => {
- console.log('blur', e.currentTarget);
- }}
- onChange={(e) => {
- console.log('change', e.currentTarget.value);
- }}
- />
- </div>
- <div>
- <MultiChoice.TagInput
- border
- size="large"
- label="change"
- hint="Type anything here…"
- indicator="A"
- block
- enhanced
- separator={['newline', 'comma']}
- onFocus={(e) => {
- console.log('focus', e.currentTarget);
- }}
- onBlur={(e) => {
- console.log('blur', e.currentTarget);
- }}
- onChange={(e) => {
- console.log('change', e.currentTarget.value);
- }}
- />
- </div>
- <div>
- <MultiChoice.TagInput
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- enhanced
- />
- </div>
- <div>
- <MultiChoice.TagInput
- border
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- enhanced
- />
- </div>
- </div>
- </div>
- </section>
- <section>
- <h2>Alternate</h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4">
- <div>
- <MultiChoice.TagInput
- variant="alternate"
- size="small"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- enhanced
- />
- </div>
- <div>
- <MultiChoice.TagInput
- border
- variant="alternate"
- size="small"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- enhanced
- />
- </div>
- <div>
- <MultiChoice.TagInput
- variant="alternate"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- enhanced
- />
- </div>
- <div>
- <MultiChoice.TagInput
- border
- variant="alternate"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- enhanced
- />
- </div>
- <div>
- <MultiChoice.TagInput
- variant="alternate"
- size="large"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- enhanced
- />
- </div>
- <div>
- <MultiChoice.TagInput
- border
- block
- variant="alternate"
- size="large"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- enhanced
- />
- </div>
- <div>
- <MultiChoice.TagInput
- variant="alternate"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- enhanced
- />
- </div>
- <div>
- <MultiChoice.TagInput
- variant="alternate"
- border
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- enhanced
- />
- </div>
- </div>
- </div>
- </section>
- </div>
- </div>
- </section>
- </div>
- </DefaultLayout>
- );
- };
-
- export default OptionPage;
|