Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #159 from korbinancell/listbox
Add Listbox and Parameter Sentence component
- Loading branch information
Showing
34 changed files
with
1,176 additions
and
148 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| This documentation is automatically generated from jsdoc comments. | ||
|
|
||
| ```react | ||
| noSource: true | ||
| --- | ||
| <DocgenTable component={Listbox} /> | ||
| ``` | ||
|
|
||
| ```react | ||
| noSource: true | ||
| --- | ||
| <DocgenTable component={ListboxToggle} /> | ||
| ``` | ||
|
|
||
| ```react | ||
| noSource: true | ||
| --- | ||
| <DocgenTable component={ListItem} /> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| ## Listbox | ||
|
|
||
| A list box should be used in situations simmilar to a html select. Refer to the dropdown docs for more info on varriations. | ||
|
|
||
| ```react | ||
| showSource: true | ||
| state: { isOpen: false, selected: 0 } | ||
| --- | ||
| <ListboxDemo> | ||
| <Label id="listboxLabel">Pick your favorite browser:</Label> | ||
| <Listbox | ||
| isOpen={state.isOpen} | ||
| onItemSelect={id => setState({ selected: id })} | ||
| selectedId={state.selected} | ||
| onToggleMenu={() => setState({ isOpen: !state.isOpen })} | ||
| labelledBy="listboxLabel" | ||
| > | ||
| <ListboxToggle primary medium icon={<DownArrow />} styleOverrides={{width: '100px'}}>{browserList[state.selected]}</ListboxToggle> | ||
| <ListboxMenu> | ||
| {browserList.map((name, index) => <ListItem id={index}>{name}</ListItem>)} | ||
| <ListItem id="ie" disabled>Internet Explorer</ListItem> | ||
| </ListboxMenu> | ||
| </Listbox> | ||
| </ListboxDemo> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| ## Parameter Sentence with CommandSentence | ||
|
|
||
| Parameter sentences are made to work with [@faithlife/command-sentence-control](https://git/Logos/command-sentence-control) (git enterprise link) | ||
|
|
||
| Below is an example usage | ||
|
|
||
| ```code | ||
| lang: jsx | ||
| --- | ||
| <ParameterSentenceDemo> | ||
| <ParameterSentence accessibilityFormLabel="Tithe Calculator"> | ||
| <CommandSentence | ||
| template={'I want to give %PERCENTAGE% (%PREPOST% 19% taxes) of my %SCHEDULE% income of %INCOME%.'} | ||
| > | ||
| <CommandSentence.Field name="PERCENTAGE"> | ||
| <ParameterInputBox | ||
| defaultValue="10" | ||
| value={state.percentage} | ||
| onChange={event => setState({ percentage: event.target.value })} | ||
| formatValue={val => `${val}%`} | ||
| width="35px" | ||
| accessibilityLabel={'Percent of income to tithe'} | ||
| /> | ||
| </CommandSentence.Field> | ||
| <CommandSentence.Field name="PREPOST"> | ||
| <ParameterSelect | ||
| selectedId={state.prepost} | ||
| onItemSelect={item => setState({ prepost: item })} | ||
| options={prePostOptions} | ||
| accessibilityLabel={'Should give tithe before or after taxes'} | ||
| /> | ||
| </CommandSentence.Field> | ||
| <CommandSentence.Field name="SCHEDULE"> | ||
| <ParameterSelect | ||
| selectedId={state.schedule} | ||
| onItemSelect={item => setState({ schedule: item })} | ||
| options={scheduleOptions} | ||
| accessibilityLabel={'Pay schedule of income'} | ||
| /> | ||
| </CommandSentence.Field> | ||
| <CommandSentence.Field name="INCOME"> | ||
| <ParameterInputBox | ||
| defaultValue="55700" | ||
| value={state.income} | ||
| onChange={event => setState({ income: event.target.value })} | ||
| formatValue={val => `$${val}`} | ||
| width="50px" | ||
| accessibilityLabel={'Income per pay schedule period'} | ||
| /> | ||
| </CommandSentence.Field> | ||
| </CommandSentence> | ||
| </ParameterSentence> | ||
| </ParameterSentenceDemo> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| This documentation is automatically generated from jsdoc comments. | ||
|
|
||
| ```react | ||
| noSource: true | ||
| --- | ||
| <DocgenTable component={ParameterSentence} /> | ||
| ``` | ||
|
|
||
| ```react | ||
| noSource: true | ||
| --- | ||
| <DocgenTable component={ParameterSelect} /> | ||
| ``` | ||
|
|
||
| ```react | ||
| noSource: true | ||
| --- | ||
| <DocgenTable component={ParameterInputBox} /> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| ## Desktop Parameter Sentence | ||
|
|
||
| Note to designers: under the hood a parameter sentence is seen as a form by screen readers. Including a small description of each parameter as if it was a form label will go a long way towards keeping it accessible. | ||
|
|
||
| ```react | ||
| showSource: true | ||
| state: { | ||
| isOpen: false, | ||
| prepost: 'after', | ||
| schedule: 'annual', | ||
| percentage: 10, | ||
| income: 55700, | ||
| } | ||
| --- | ||
| <ParameterSentenceDemo> | ||
| <ParameterSentence accessibilityFormLabel="Tithe Calculator"> | ||
| {'I want to give '} | ||
| <ParameterInputBox | ||
| defaultValue="10" | ||
| value={state.percentage} | ||
| onChange={event => setState({ percentage: event.target.value })} | ||
| formatValue={val => `${val}%`} | ||
| width="35px" | ||
| accessibilityLabel={'Percent of income to tithe'} | ||
| type="number" | ||
| /> | ||
| {' of my '} | ||
| <ParameterSelect | ||
| selectedId={state.schedule} | ||
| onItemSelect={item => setState({ schedule: item })} | ||
| options={scheduleOptions} | ||
| accessibilityLabel={'Pay schedule of income'} | ||
| /> | ||
| {' income'} | ||
| </ParameterSentence> | ||
| </ParameterSentenceDemo> | ||
| ``` | ||
|
|
||
| ## Mobile ParameterSelects | ||
|
|
||
| If this is a mobile or touch screen device include the `useNativeSelect` prop to trigger the native select picker. | ||
|
|
||
| ```react | ||
| showSource: true | ||
| state: { | ||
| isOpen: false, | ||
| prepost: 'after', | ||
| schedule: 'annual', | ||
| percentage: 10, | ||
| income: 55700, | ||
| } | ||
| --- | ||
| <ParameterSentenceDemo> | ||
| <ParameterSentence accessibilityFormLabel="Tithe Calculator"> | ||
| <ParameterSelect | ||
| useNativeSelect | ||
| selectedId={state.schedule} | ||
| onItemSelect={item => setState({ schedule: item })} | ||
| options={scheduleOptions} | ||
| accessibilityLabel={'Pay schedule of income'} | ||
| /> | ||
| </ParameterSentence> | ||
| </ParameterSentenceDemo> | ||
| ``` | ||
|
|
||
| ## Style variations | ||
|
|
||
| ```react | ||
| showSource: true | ||
| state: { | ||
| isOpen: false, | ||
| prepost: 'after', | ||
| schedule: 'annual', | ||
| percentage: 10, | ||
| income: 55700, | ||
| } | ||
| --- | ||
| <ParameterSentenceDemo addMargin> | ||
| <ParameterSelect | ||
| selectedId={state.schedule} | ||
| onItemSelect={item => setState({ schedule: item })} | ||
| options={scheduleOptions} | ||
| accessibilityLabel={'Pay schedule of income'} | ||
| theme={{ underlineColor: 'plum' }} | ||
| styleOverrides={{ fontSize: '18px' }} | ||
| /> | ||
| <ParameterInputBox | ||
| defaultValue="10" | ||
| value={state.percentage} | ||
| onChange={event => setState({ percentage: event.target.value })} | ||
| formatValue={val => `${val}%`} | ||
| width="35px" | ||
| accessibilityLabel={'Percent of income to tithe'} | ||
| theme={{ underlineColor: 'plum' }} | ||
| styleOverrides={{ fontSize: '18px' }} | ||
| /> | ||
| </ParameterSentenceDemo> | ||
| ``` |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.