Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add user dialog and topbar docs (#3298)
* chore(user-dialog): fix zindex * docs(website): add topbar and user dialog docs * chore: pr feedback * chore: pr feedback example update
- Loading branch information
Showing
12 changed files
with
791 additions
and
3 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 |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| '@twilio-paste/user-dialog': patch | ||
| '@twilio-paste/core': patch | ||
| --- | ||
|
|
||
| [User dialog] add zindex so menu overlays the page its on |
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
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
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
222 changes: 222 additions & 0 deletions
222
packages/paste-website/src/component-examples/TopbarExamples.ts
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,222 @@ | ||
| export const defaultTopbarExample = ` | ||
| const TopbarExample = () => { | ||
| const [account, setAccount] = React.useState('Account name'); | ||
| const menu = useMenuState(); | ||
| const onClick = (newAccount) => { | ||
| menu.hide(); | ||
| setAccount(newAccount); | ||
| }; | ||
| const productSwitcher = useProductSwitcherState(); | ||
| const [product, setProduct] = React.useState('twilio'); | ||
| return ( | ||
| <Topbar> | ||
| <Box display="flex" columnGap="space50"> | ||
| <MenuBadge {...menu} i18nButtonLabel="Change account" variant="decorative10"> | ||
| {account} | ||
| </MenuBadge> | ||
| <Menu {...menu} aria-label="Accounts"> | ||
| <MenuItem {...menu} onClick={()=>onClick('Account one')}> | ||
| Account one | ||
| </MenuItem> | ||
| <MenuItem {...menu} onClick={()=>onClick('Account two')}> | ||
| Account two | ||
| </MenuItem> | ||
| <MenuItem {...menu} onClick={()=>onClick('Account three')}> | ||
| Account three | ||
| </MenuItem> | ||
| </Menu> | ||
| <Badge variant="subaccount" size="small">Subaccount</Badge> | ||
| <Box flex-shrink="4" paddingX="space150"> | ||
| <Input placeholder="Search" insertBefore={<SearchIcon decorative/>}/> | ||
| </Box> | ||
| <ProductSwitcherButton {...productSwitcher} i18nButtonLabel="Switch products" /> | ||
| <ProductSwitcher {...productSwitcher} aria-label="Available products"> | ||
| <ProductSwitcherItem | ||
| {...productSwitcher} | ||
| name="product" | ||
| value="twilio" | ||
| checked={product === 'twilio'} | ||
| onChange={(e) => { | ||
| setProduct('twilio'); | ||
| }} | ||
| productName="Twilio" | ||
| productStrapline="SMS, Voice & Video" | ||
| productIcon={<LogoTwilioIcon decorative />} | ||
| /> | ||
| <ProductSwitcherItem | ||
| {...productSwitcher} | ||
| name="product" | ||
| value="segment" | ||
| checked={product === 'segment'} | ||
| onChange={(e) => { | ||
| setProduct('segment'); | ||
| }} | ||
| productName="Segment" | ||
| productStrapline="Customer data platform" | ||
| productIcon={<ProductSegmentIcon decorative />} | ||
| /> | ||
| <ProductSwitcherItem | ||
| {...productSwitcher} | ||
| name="product" | ||
| value="flex" | ||
| checked={product === 'flex'} | ||
| onChange={(e) => { | ||
| setProduct('flex'); | ||
| }} | ||
| productName="Flex" | ||
| productStrapline="Cloud-based contact center" | ||
| productIcon={<ProductFlexIcon decorative />} | ||
| /> | ||
| <ProductSwitcherItem | ||
| {...productSwitcher} | ||
| name="product" | ||
| value="sendgrid" | ||
| checked={product === 'sendgrid'} | ||
| onChange={(e) => { | ||
| setProduct('sendgrid'); | ||
| }} | ||
| productName="SendGrid" | ||
| productStrapline="Email delivery and API" | ||
| productIcon={<ProductEmailAPIIcon decorative />} | ||
| /> | ||
| <ProductSwitcherItem | ||
| {...productSwitcher} | ||
| name="product" | ||
| value="admin" | ||
| checked={product === 'admin'} | ||
| onChange={(e) => { | ||
| setProduct('admin'); | ||
| }} | ||
| productName="Console Admin" | ||
| productStrapline="Admin center" | ||
| productIcon={<LogoTwilioIcon decorative />} | ||
| /> | ||
| </ProductSwitcher> | ||
| </Box> | ||
| </Topbar> | ||
| ) | ||
| } | ||
| render( | ||
| <TopbarExample/> | ||
| ) | ||
| `.trim(); | ||
|
|
||
| export const emptyTopbarExample = ` | ||
| const TopbarExample = () => { | ||
| return ( | ||
| <Topbar>I am an empty Topbar</Topbar> | ||
| ) | ||
| } | ||
| render( | ||
| <TopbarExample/> | ||
| ) | ||
| `.trim(); | ||
|
|
||
| export const defaultAccountSwitcherExample = ` | ||
| const AccountSwitcher = () => { | ||
| const [account, setAccount] = React.useState('Account name'); | ||
| const menu = useMenuState(); | ||
| const onClick = (newAccount) => { | ||
| menu.hide(); | ||
| setAccount(newAccount); | ||
| }; | ||
| return ( | ||
| <> | ||
| <MenuBadge {...menu} i18nButtonLabel="Change account" variant="decorative10"> | ||
| {account} | ||
| </MenuBadge> | ||
| <Menu {...menu} aria-label="Accounts"> | ||
| <MenuItem {...menu} onClick={()=>onClick('Account one')}> | ||
| Account one | ||
| </MenuItem> | ||
| <MenuItem {...menu} onClick={()=>onClick('Account two')}> | ||
| Account two | ||
| </MenuItem> | ||
| <MenuItem {...menu} onClick={()=>onClick('Account three')}> | ||
| Account three | ||
| </MenuItem> | ||
| </Menu> | ||
| </> | ||
| ); | ||
| }; | ||
| render( | ||
| <AccountSwitcher /> | ||
| ) | ||
| `.trim(); | ||
|
|
||
| export const defaultProductSwitcherExample = ` | ||
| const ProductSwitcherMenu = () => { | ||
| const productSwitcher = useProductSwitcherState(); | ||
| const [product, setProduct] = React.useState('twilio'); | ||
| return ( | ||
| <> | ||
| <ProductSwitcherButton {...productSwitcher} i18nButtonLabel="Switch products" /> | ||
| <ProductSwitcher {...productSwitcher} aria-label="Available products"> | ||
| <ProductSwitcherItem | ||
| {...productSwitcher} | ||
| name="product" | ||
| value="twilio" | ||
| checked={product === 'twilio'} | ||
| onChange={(e) => { | ||
| setProduct('twilio'); | ||
| }} | ||
| productName="Twilio" | ||
| productStrapline="SMS, Voice & Video" | ||
| productIcon={<LogoTwilioIcon decorative />} | ||
| /> | ||
| <ProductSwitcherItem | ||
| {...productSwitcher} | ||
| name="product" | ||
| value="segment" | ||
| checked={product === 'segment'} | ||
| onChange={(e) => { | ||
| setProduct('segment'); | ||
| }} | ||
| productName="Segment" | ||
| productStrapline="Customer data platform" | ||
| productIcon={<ProductSegmentIcon decorative />} | ||
| /> | ||
| <ProductSwitcherItem | ||
| {...productSwitcher} | ||
| name="product" | ||
| value="flex" | ||
| checked={product === 'flex'} | ||
| onChange={(e) => { | ||
| setProduct('flex'); | ||
| }} | ||
| productName="Flex" | ||
| productStrapline="Cloud-based contact center" | ||
| productIcon={<ProductFlexIcon decorative />} | ||
| /> | ||
| <ProductSwitcherItem | ||
| {...productSwitcher} | ||
| name="product" | ||
| value="sendgrid" | ||
| checked={product === 'sendgrid'} | ||
| onChange={(e) => { | ||
| setProduct('sendgrid'); | ||
| }} | ||
| productName="SendGrid" | ||
| productStrapline="Email delivery and API" | ||
| productIcon={<ProductEmailAPIIcon decorative />} | ||
| /> | ||
| <ProductSwitcherItem | ||
| {...productSwitcher} | ||
| name="product" | ||
| value="admin" | ||
| checked={product === 'admin'} | ||
| onChange={(e) => { | ||
| setProduct('admin'); | ||
| }} | ||
| productName="Console Admin" | ||
| productStrapline="Admin center" | ||
| productIcon={<LogoTwilioIcon decorative />} | ||
| /> | ||
| </ProductSwitcher> | ||
| </> | ||
| ); | ||
| }; | ||
| render( | ||
| <ProductSwitcherMenu /> | ||
| ) | ||
| `.trim(); |
Oops, something went wrong.