-
Notifications
You must be signed in to change notification settings - Fork 65
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(docs): add Table docs + refactor PropsTable
- Loading branch information
Showing
35 changed files
with
1,564 additions
and
1,111 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,14 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { PropTable } from '../components'; | ||
| import { Prop, PropTable } from '../components'; | ||
|
|
||
| export const BadgePropTable: React.FC = () => ( | ||
| <PropTable> | ||
| <PropTable.Prop name="variant" defaults="secondary" types={['danger', 'secondary', 'success', 'warning']}> | ||
| Determines which badge to display. | ||
| </PropTable.Prop> | ||
| </PropTable> | ||
| ); | ||
| const props: Prop[] = [ | ||
| { | ||
| name: 'variant', | ||
| types: ['danger', 'secondary', 'success', 'warning'], | ||
| description: 'Determines which badge to display.', | ||
| defaultValue: 'secondary', | ||
| }, | ||
| ]; | ||
|
|
||
| export const BadgePropTable: React.FC = () => <PropTable propList={props} />; |
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 |
|---|---|---|
| @@ -1,43 +1,60 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { NextLink, PropTable } from '../components'; | ||
| import { NextLink, Prop, PropTable } from '../components'; | ||
|
|
||
| export const BoxPropTable: React.FC = () => ( | ||
| <PropTable> | ||
| <PropTable.Prop | ||
| name="backgroundColor" | ||
| types={ | ||
| <NextLink href="/Colors/ColorsPage" as="/colors"> | ||
| Color | ||
| </NextLink> | ||
| } | ||
| > | ||
| Sets the background color given a color name from our{' '} | ||
| const props: Prop[] = [ | ||
| { | ||
| name: 'backgroundColor', | ||
| types: ( | ||
| <NextLink href="/Colors/ColorsPage" as="/colors"> | ||
| palette | ||
| Color | ||
| </NextLink> | ||
| . | ||
| </PropTable.Prop> | ||
| <PropTable.Prop name="shadow" types={['floating', 'raised']}> | ||
| Determines the type of shadow to be applied. | ||
| </PropTable.Prop> | ||
| <PropTable.Prop name="border" types={['box', 'boxError', 'none']}> | ||
| Determines type of border to be applied. | ||
| </PropTable.Prop> | ||
| <PropTable.Prop name="borderBottom" types={['box', 'boxError', 'none']}> | ||
| Determines type of bottom border to be applied. | ||
| </PropTable.Prop> | ||
| <PropTable.Prop name="borderLeft" types={['box', 'boxError', 'none']}> | ||
| Determines type of left border to be applied. | ||
| </PropTable.Prop> | ||
| <PropTable.Prop name="borderRight" types={['box', 'boxError', 'none']}> | ||
| Determines type of right border to be applied. | ||
| </PropTable.Prop> | ||
| <PropTable.Prop name="borderTop" types={['box', 'boxError', 'none']}> | ||
| Determines type of top border to be applied. | ||
| </PropTable.Prop> | ||
| <PropTable.Prop name="borderRadius" types={['normal', 'circle', 'none']}> | ||
| Determines type of border radius to be applied. | ||
| </PropTable.Prop> | ||
| </PropTable> | ||
| ); | ||
| ), | ||
| description: ( | ||
| <> | ||
| Sets the background color given a color name from our{' '} | ||
| <NextLink href="/Colors/ColorsPage" as="/colors"> | ||
| palette | ||
| </NextLink> | ||
| . | ||
| </> | ||
| ), | ||
| }, | ||
| { | ||
| name: 'shadow', | ||
| types: ['floating', 'raised'], | ||
| description: 'Determines the type of shadow to be applied.', | ||
| }, | ||
| { | ||
| name: 'border', | ||
| types: ['box', 'boxError', 'none'], | ||
| description: 'Determines type of border to be applied.', | ||
| }, | ||
| { | ||
| name: 'borderBottom', | ||
| types: ['box', 'boxError', 'none'], | ||
| description: 'Determines type of bottom border to be applied.', | ||
| }, | ||
| { | ||
| name: 'borderLeft', | ||
| types: ['box', 'boxError', 'none'], | ||
| description: 'Determines type of left border to be applied.', | ||
| }, | ||
| { | ||
| name: 'borderRight', | ||
| types: ['box', 'boxError', 'none'], | ||
| description: 'Determines type of right border to be applied.', | ||
| }, | ||
| { | ||
| name: 'borderTop', | ||
| types: ['box', 'boxError', 'none'], | ||
| description: 'Determines type of top border to be applied.', | ||
| }, | ||
| { | ||
| name: 'borderRadius', | ||
| types: ['normal', 'circle', 'none'], | ||
| description: 'Determines type of border radius to be applied.', | ||
| }, | ||
| ]; | ||
|
|
||
| export const BoxPropTable: React.FC = () => <PropTable propList={props} />; |
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 |
|---|---|---|
| @@ -1,64 +1,77 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { NextLink, PropTable } from '../components'; | ||
| import { NextLink, Prop, PropTable } from '../components'; | ||
|
|
||
| export const ButtonPropTable: React.FC = () => { | ||
| return ( | ||
| <PropTable> | ||
| <PropTable.Prop name="actionType" types={['normal', 'destructive']} defaults="normal"> | ||
| Indicates whether your button's action is of normal or destructive nature. | ||
| </PropTable.Prop> | ||
| <PropTable.Prop | ||
| name="iconLeft" | ||
| types={ | ||
| <NextLink href="/Icons/IconsPage" as="/icons"> | ||
| Icon | ||
| </NextLink> | ||
| } | ||
| defaults="" | ||
| > | ||
| const props: Prop[] = [ | ||
| { | ||
| name: 'actionType', | ||
| types: ['normal', 'destructive'], | ||
| defaultValue: 'normal', | ||
| description: "Indicates whether your button's action is of normal or destructive nature.", | ||
| }, | ||
| { | ||
| name: 'iconLeft', | ||
| types: ( | ||
| <NextLink href="/Icons/IconsPage" as="/icons"> | ||
| Icon | ||
| </NextLink> | ||
| ), | ||
| description: ( | ||
| <> | ||
| Pass in an{' '} | ||
| <NextLink href="/Icons/IconsPage" as="/icons"> | ||
| Icon | ||
| </NextLink>{' '} | ||
| component to display to the left of the text. | ||
| </PropTable.Prop> | ||
| <PropTable.Prop | ||
| name="iconOnly" | ||
| types={ | ||
| <NextLink href="/Icons/IconsPage" as="/icons"> | ||
| Icon | ||
| </NextLink> | ||
| } | ||
| defaults="" | ||
| > | ||
| </> | ||
| ), | ||
| }, | ||
| { | ||
| name: 'iconOnly', | ||
| types: ( | ||
| <NextLink href="/Icons/IconsPage" as="/icons"> | ||
| Icon | ||
| </NextLink> | ||
| ), | ||
| description: ( | ||
| <> | ||
| Pass in an{' '} | ||
| <NextLink href="/Icons/IconsPage" as="/icons"> | ||
| Icon | ||
| </NextLink>{' '} | ||
| component to replace content with an icon. | ||
| </PropTable.Prop> | ||
| <PropTable.Prop | ||
| name="iconRight" | ||
| types={ | ||
| <NextLink href="/Icons/IconsPage" as="/icons"> | ||
| Icon | ||
| </NextLink> | ||
| } | ||
| defaults="" | ||
| > | ||
| </> | ||
| ), | ||
| }, | ||
| { | ||
| name: 'iconRight', | ||
| types: ( | ||
| <NextLink href="/Icons/IconsPage" as="/icons"> | ||
| Icon | ||
| </NextLink> | ||
| ), | ||
| description: ( | ||
| <> | ||
| Pass in an{' '} | ||
| <NextLink href="/Icons/IconsPage" as="/icons"> | ||
| Icon | ||
| </NextLink>{' '} | ||
| component to display to the right of the text. | ||
| </PropTable.Prop> | ||
| <PropTable.Prop name="isLoading" types="boolean" defaults="false"> | ||
| Used to determine if component is in a loading state. | ||
| </PropTable.Prop> | ||
| <PropTable.Prop name="variant" types={['primary', 'secondary', 'subtle']} defaults="primary"> | ||
| Determines which style of button to display. | ||
| </PropTable.Prop> | ||
| </PropTable> | ||
| ); | ||
| }; | ||
| </> | ||
| ), | ||
| }, | ||
| { | ||
| name: 'isLoading', | ||
| types: 'boolean', | ||
| defaultValue: 'false', | ||
| description: 'Used to determine if component is in a loading state.', | ||
| }, | ||
| { | ||
| name: 'variant', | ||
| types: ['primary', 'secondary', 'subtle'], | ||
| defaultValue: 'primary', | ||
| description: 'Determines which style of button to display.', | ||
| }, | ||
| ]; | ||
|
|
||
| export const ButtonPropTable: React.FC = () => <PropTable propList={props} />; |
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 |
|---|---|---|
| @@ -1,15 +1,24 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { Code, PropTable } from '../components'; | ||
| import { Code, Prop, PropTable } from '../components'; | ||
|
|
||
| export const CheckboxPropTable: React.FC = () => ( | ||
| <PropTable> | ||
| <PropTable.Prop name="label" types="ReactChild" required> | ||
| Label to display next to a <Code>Checkbox</Code> component. | ||
| </PropTable.Prop> | ||
| <PropTable.Prop name="isIndeterminate" types="boolean"> | ||
| Styles and sets the checkbox into a indeterminate state. Note that the <Code primary>checked</Code> prop will take | ||
| precedence over <Code primary>isIndeterminate</Code>. | ||
| </PropTable.Prop> | ||
| </PropTable> | ||
| ); | ||
| const props: Prop[] = [ | ||
| { | ||
| name: 'label', | ||
| types: 'ReactChild', | ||
| required: true, | ||
| description: 'Label to display next to a <Code>Checkbox</Code> component.', | ||
| }, | ||
| { | ||
| name: 'isIndeterminate', | ||
| types: 'boolean', | ||
| description: ( | ||
| <> | ||
| Styles and sets the checkbox into a indeterminate state. Note that the <Code primary>checked</Code> prop will | ||
| take precedence over <Code primary>isIndeterminate</Code>. | ||
| </> | ||
| ), | ||
| }, | ||
| ]; | ||
|
|
||
| export const CheckboxPropTable: React.FC = () => <PropTable propList={props} />; |
Oops, something went wrong.