diff --git a/.changeset/orange-dodos-brake.md b/.changeset/orange-dodos-brake.md new file mode 100644 index 0000000000..720a9341d2 --- /dev/null +++ b/.changeset/orange-dodos-brake.md @@ -0,0 +1,6 @@ +--- +'@twilio-paste/topbar': patch +'@twilio-paste/core': patch +--- + +[Topbar] style adjustment to the column-gap in TopbarActions diff --git a/.changeset/selfish-eels-switch.md b/.changeset/selfish-eels-switch.md new file mode 100644 index 0000000000..b945157735 --- /dev/null +++ b/.changeset/selfish-eels-switch.md @@ -0,0 +1,5 @@ +--- +'@twilio-paste/icons': patch +--- + +[Icons] update ProductSupport and Support icons diff --git a/packages/paste-core/components/sidebar/stories/full-composition/components/AppSwitcher.tsx b/packages/paste-core/components/sidebar/stories/full-composition/components/AppSwitcher.tsx index 53d2e9a4e4..4c9c34ea14 100644 --- a/packages/paste-core/components/sidebar/stories/full-composition/components/AppSwitcher.tsx +++ b/packages/paste-core/components/sidebar/stories/full-composition/components/AppSwitcher.tsx @@ -16,7 +16,7 @@ export const AppSwitcher: React.FC = () => { return ( <> - + { - + diff --git a/packages/paste-core/components/topbar/src/TopbarActions.tsx b/packages/paste-core/components/topbar/src/TopbarActions.tsx index b31ff30339..a719eda62c 100644 --- a/packages/paste-core/components/topbar/src/TopbarActions.tsx +++ b/packages/paste-core/components/topbar/src/TopbarActions.tsx @@ -19,7 +19,7 @@ const TopbarActions = React.forwardRef( flexShrink={justify === 'start' ? null : 0} flexWrap="wrap" flexGrow={1} - columnGap={justify === 'start' ? 'space30' : 'space50'} + columnGap="space50" element={element} alignItems="center" ref={ref} diff --git a/packages/paste-icons/src/ProductSupportIcon.tsx b/packages/paste-icons/src/ProductSupportIcon.tsx index d1fca6fd24..41105b32ab 100644 --- a/packages/paste-icons/src/ProductSupportIcon.tsx +++ b/packages/paste-icons/src/ProductSupportIcon.tsx @@ -28,6 +28,7 @@ const ProductSupportIcon = React.forwardRef @@ -35,7 +36,8 @@ const ProductSupportIcon = React.forwardRef diff --git a/packages/paste-icons/src/SupportIcon.tsx b/packages/paste-icons/src/SupportIcon.tsx index 79e5d6589a..1e2b92363c 100644 --- a/packages/paste-icons/src/SupportIcon.tsx +++ b/packages/paste-icons/src/SupportIcon.tsx @@ -25,19 +25,19 @@ const SupportIcon = React.forwardRef( {title ? {title} : null} diff --git a/packages/paste-icons/svg/ProductSupport.svg b/packages/paste-icons/svg/ProductSupport.svg index 65553c2781..c14d2073e4 100644 --- a/packages/paste-icons/svg/ProductSupport.svg +++ b/packages/paste-icons/svg/ProductSupport.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/paste-icons/svg/Support.svg b/packages/paste-icons/svg/Support.svg index 17cd093f80..c14d2073e4 100644 --- a/packages/paste-icons/svg/Support.svg +++ b/packages/paste-icons/svg/Support.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/paste-website/src/component-examples/TopbarExamples.ts b/packages/paste-website/src/component-examples/TopbarExamples.ts index 9655389bc5..d4d0a83c14 100644 --- a/packages/paste-website/src/component-examples/TopbarExamples.ts +++ b/packages/paste-website/src/component-examples/TopbarExamples.ts @@ -1,222 +1,887 @@ -export const defaultTopbarExample = ` +export const basicTopbarExample = ` const TopbarExample = () => { - const [account, setAccount] = React.useState('Account name'); - const menu = useMenuState(); - const onClick = (newAccount) => { + const ConnectivityObject = { + Available: { + variant: 'ConnectivityAvailable', + children: 'Available', + }, + Busy: { + variant: 'ConnectivityBusy', + children: 'Busy', + }, + Unavailable: { + variant: 'ConnectivityUnavailable', + children: 'Unavailable', + }, + Neutral: { + variant: 'ConnectivityNeutral', + children: 'Neutral', + }, + Offline: { + variant: 'ConnectivityOffline', + children: 'Offline', + }, + }; + const [availability, setConnectivity] = React.useState( + ConnectivityObject.Available + ); + const menu = useStatusMenuState(); + const supportMenu = useMenuState(); + const onClick = (status) => { + setConnectivity(ConnectivityObject[status]); menu.hide(); - setAccount(newAccount); }; const productSwitcher = useProductSwitcherState(); const [product, setProduct] = React.useState('twilio'); + const userDialogList = useUserDialogListState(); + return ( - - - - {account} - - - onClick('Account one')}> - Account one - - onClick('Account two')}> - Account two - - onClick('Account three')}> - Account three - - - Subaccount - - }/> - - - - { - setProduct('twilio'); - }} - productName="Twilio" - productStrapline="SMS, Voice & Video" - productIcon={} - /> - { - setProduct('segment'); - }} - productName="Segment" - productStrapline="Customer data platform" - productIcon={} - /> - { - setProduct('flex'); - }} - productName="Flex" - productStrapline="Cloud-based contact center" - productIcon={} - /> - { - setProduct('sendgrid'); - }} - productName="SendGrid" - productStrapline="Email delivery and API" - productIcon={} - /> - { - setProduct('admin'); - }} - productName="Console Admin" - productStrapline="Admin center" - productIcon={} - /> - - - + + + + {availability.children} | 3h 50min + + + onClick('Available')} + variant="default" + > + + {ConnectivityObject.Available.children} + + + onClick('Busy')} + variant="default" + > + {ConnectivityObject.Busy.children} + + onClick('Unavailable')} + variant="default" + > + + {ConnectivityObject.Unavailable.children} + + + onClick('Neutral')} + variant="default" + > + {ConnectivityObject.Neutral.children} + + onClick('Offline')} + variant="default" + > + {ConnectivityObject.Offline.children} + + + + + + + + + Support Center + + Developer Docs + + + + + { + setProduct('twilio'); + }} + productName="Twilio" + productStrapline="SMS, Voice & Video" + productIcon={} + /> + { + setProduct('segment'); + }} + productName="Segment" + productStrapline="Customer data platform" + productIcon={} + /> + { + setProduct('flex'); + }} + productName="Flex" + productStrapline="Cloud-based contact center" + productIcon={} + /> + { + setProduct('sendgrid'); + }} + productName="SendGrid" + productStrapline="Email delivery and API" + productIcon={} + /> + { + setProduct('admin'); + }} + productName="Console Admin" + productStrapline="Admin center" + productIcon={} + /> + + + + + Name + email@email.com + + + + + User settings + + + + + + Theme + + Light + + + + + + + Language + + EN + + + + + + + Log out + + + + + + ) } render( - + ) `.trim(); -export const emptyTopbarExample = ` +export const flexTopbarExample = ` const TopbarExample = () => { - return ( - I am an empty Topbar - ) + const ConnectivityObject = { + Available: { + variant: 'ConnectivityAvailable', + children: 'Available', + }, + Busy: { + variant: 'ConnectivityBusy', + children: 'Busy', + }, + Unavailable: { + variant: 'ConnectivityUnavailable', + children: 'Unavailable', + }, + Neutral: { + variant: 'ConnectivityNeutral', + children: 'Neutral', + }, + Offline: { + variant: 'ConnectivityOffline', + children: 'Offline', + }, + }; + const [availability, setConnectivity] = React.useState( + ConnectivityObject.Available + ); + const menu = useStatusMenuState(); + const supportMenu = useMenuState(); + const onClick = (status) => { + setConnectivity(ConnectivityObject[status]); + menu.hide(); + }; + const productSwitcher = useProductSwitcherState(); + const [product, setProduct] = React.useState('twilio'); + const userDialogList = useUserDialogListState(); + + return ( + + + + + {availability.children} | 3h 50min + + + onClick('Available')} + variant="default" + > + + {ConnectivityObject.Available.children} + + + onClick('Busy')} + variant="default" + > + {ConnectivityObject.Busy.children} + + onClick('Unavailable')} + variant="default" + > + + {ConnectivityObject.Unavailable.children} + + + onClick('Neutral')} + variant="default" + > + {ConnectivityObject.Neutral.children} + + onClick('Offline')} + variant="default" + > + {ConnectivityObject.Offline.children} + + + + + + + + + Support Center + + Developer Docs + + + + + + { + setProduct('twilio'); + }} + productName="Twilio" + productStrapline="SMS, Voice & Video" + productIcon={} + /> + { + setProduct('segment'); + }} + productName="Segment" + productStrapline="Customer data platform" + productIcon={} + /> + { + setProduct('flex'); + }} + productName="Flex" + productStrapline="Cloud-based contact center" + productIcon={} + /> + { + setProduct('sendgrid'); + }} + productName="SendGrid" + productStrapline="Email delivery and API" + productIcon={} + /> + { + setProduct('admin'); + }} + productName="Console Admin" + productStrapline="Admin center" + productIcon={} + /> + + + + + Name + email@email.com + + + + + User settings + + + + + + Theme + + Light + + + + + + + Language + + EN + + + + + + + Log out + + + + + + + + ) } render( ) `.trim(); -export const defaultAccountSwitcherExample = ` -const AccountSwitcher = () => { - const [account, setAccount] = React.useState('Account name'); +export const consoleTopbarExample = ` +const TopbarExample = () => { + const accountSwitcher = useAccountSwitcherState(); + const [selectedAccount, setSelectedAccount] = React.useState('Owl Telehealth'); + const supportMenu = useMenuState(); + const billingMenu = useMenuState(); const menu = useMenuState(); - const onClick = (newAccount) => { + const onClick = (status) => { + setConnectivity(ConnectivityObject[status]); menu.hide(); - setAccount(newAccount); }; + const productSwitcher = useProductSwitcherState(); + const [product, setProduct] = React.useState('twilio'); + const userDialogList = useUserDialogListState(); + return ( - <> - - {account} - - - onClick('Account one')}> - Account one - - onClick('Account two')}> - Account two - - onClick('Account three')}> - Account three - - - - ); -}; + + + + + Owl Telehealth + + + + setSelectedAccount('Owl Telehealth')} + {...accountSwitcher} + > + Owl Telehealth + + setSelectedAccount('Owl Health Demo')} + {...accountSwitcher} + > + Owl Health Demo + + setSelectedAccount('Owl Subway')} + {...accountSwitcher} + > + Owl Subway + + + + + Account settings + + + + View all accounts + + + View all subaccounts + + + + Admin Center + + + + Trial: $15.99 Upgrade + + + + } + labelText="Search application" + hideVisibleLabel + items={['one', 'two']} + /> + + Account + + + + General settings + Manage users + Sub accounts + Notification preferences + Audit events + + + + API keys & tokens + Credentials + Connected apps + + + + Billing + + + + Billing overview + Payment history + Recurring items + Payment settings + Pricing + Preferences + + + + Usage summary + Usage bvy subaccount + Trigger + Authorized apps + + + + + + + Support Center + + Developer Docs + + + + + { + setProduct('twilio'); + }} + productName="Twilio" + productStrapline="SMS, Voice & Video" + productIcon={} + /> + { + setProduct('segment'); + }} + productName="Segment" + productStrapline="Customer data platform" + productIcon={} + /> + { + setProduct('flex'); + }} + productName="Flex" + productStrapline="Cloud-based contact center" + productIcon={} + /> + { + setProduct('sendgrid'); + }} + productName="SendGrid" + productStrapline="Email delivery and API" + productIcon={} + /> + { + setProduct('admin'); + }} + productName="Console Admin" + productStrapline="Admin center" + productIcon={} + /> + + + + + Name + email@email.com + + + + + User settings + + + + + + Theme + + Light + + + + + + + Language + + EN + + + + + + + Log out + + + + + + + + ) +} render( - + ) `.trim(); -export const defaultProductSwitcherExample = ` -const ProductSwitcherMenu = () => { - const productSwitcher = useProductSwitcherState(); - const [product, setProduct] = React.useState('twilio'); - return ( - <> - - - { - setProduct('twilio'); - }} - productName="Twilio" - productStrapline="SMS, Voice & Video" - productIcon={} - /> - { - setProduct('segment'); - }} - productName="Segment" - productStrapline="Customer data platform" - productIcon={} - /> - { - setProduct('flex'); - }} - productName="Flex" - productStrapline="Cloud-based contact center" - productIcon={} - /> - { - setProduct('sendgrid'); - }} - productName="SendGrid" - productStrapline="Email delivery and API" - productIcon={} - /> - { - setProduct('admin'); - }} - productName="Console Admin" - productStrapline="Admin center" - productIcon={} +export const segmentTopbarExample = ` +const TopbarExample = () => { + const accountSwitcher = useAccountSwitcherState(); + const [selectedAccount, setSelectedAccount] = React.useState('My Workspace'); + const supportMenu = useMenuState(); + const billingMenu = useMenuState(); + const menu = useMenuState(); + const onClick = (status) => { + setConnectivity(ConnectivityObject[status]); + menu.hide(); + }; + const productSwitcher = useProductSwitcherState(); + const [product, setProduct] = React.useState('twilio'); + const userDialogList = useUserDialogListState(); + + return ( + + + + + Workspace name + + + + setSelectedAccount('My Workspace')} + {...accountSwitcher} + > + My Workspace + + setSelectedAccount('Second workspace')} + {...accountSwitcher} + > + Second workspace + + setSelectedAccount('Third workspace')} + {...accountSwitcher} + > + Third workspace + + + + + Workspace settings + + + + View all workspaces + + + + Admin Center + + + {}}> + Upgrade + + + + } + labelText="Search application" + hideVisibleLabel + items={['one', 'two']} /> - - - ); -}; - render( - + + + + + Support Center + + Developer Docs + + + + + + + Notifications + + + + { + setProduct('twilio'); + }} + productName="Twilio" + productStrapline="SMS, Voice & Video" + productIcon={} + /> + { + setProduct('segment'); + }} + productName="Segment" + productStrapline="Customer data platform" + productIcon={} + /> + { + setProduct('flex'); + }} + productName="Flex" + productStrapline="Cloud-based contact center" + productIcon={} + /> + { + setProduct('sendgrid'); + }} + productName="SendGrid" + productStrapline="Email delivery and API" + productIcon={} + /> + { + setProduct('admin'); + }} + productName="Console Admin" + productStrapline="Admin center" + productIcon={} + /> + + + + + Name + email@email.com + + + + + User settings + + + + + + Theme + + Light + + + + + + + Language + + EN + + + + + + + Log out + + + + + + + ) - `.trim(); +} +render( + +) +`.trim(); diff --git a/packages/paste-website/src/pages/components/account-switcher/index.mdx b/packages/paste-website/src/pages/components/account-switcher/index.mdx index 7036ad1ba2..34c95caa7c 100644 --- a/packages/paste-website/src/pages/components/account-switcher/index.mdx +++ b/packages/paste-website/src/pages/components/account-switcher/index.mdx @@ -43,7 +43,7 @@ export const getStaticProps = async () => { diff --git a/packages/paste-website/src/pages/components/product-switcher/index.mdx b/packages/paste-website/src/pages/components/product-switcher/index.mdx index 12df21a019..3200adfc80 100644 --- a/packages/paste-website/src/pages/components/product-switcher/index.mdx +++ b/packages/paste-website/src/pages/components/product-switcher/index.mdx @@ -46,7 +46,7 @@ export const getStaticProps = async () => { diff --git a/packages/paste-website/src/pages/components/sidebar/index.mdx b/packages/paste-website/src/pages/components/sidebar/index.mdx index 04a50b602d..a51dee63ab 100644 --- a/packages/paste-website/src/pages/components/sidebar/index.mdx +++ b/packages/paste-website/src/pages/components/sidebar/index.mdx @@ -52,7 +52,7 @@ export const getStaticProps = async () => { diff --git a/packages/paste-website/src/pages/components/status-badge/index.mdx b/packages/paste-website/src/pages/components/status-badge/index.mdx index 4e07232246..15de087c31 100644 --- a/packages/paste-website/src/pages/components/status-badge/index.mdx +++ b/packages/paste-website/src/pages/components/status-badge/index.mdx @@ -34,7 +34,7 @@ export const getStaticProps = async () => { diff --git a/packages/paste-website/src/pages/components/status-menu/index.mdx b/packages/paste-website/src/pages/components/status-menu/index.mdx index c783504dd1..375936ce30 100644 --- a/packages/paste-website/src/pages/components/status-menu/index.mdx +++ b/packages/paste-website/src/pages/components/status-menu/index.mdx @@ -48,7 +48,7 @@ export const getStaticProps = async () => { diff --git a/packages/paste-website/src/pages/components/topbar/index.mdx b/packages/paste-website/src/pages/components/topbar/index.mdx index e5cf404c63..4fa99976e3 100644 --- a/packages/paste-website/src/pages/components/topbar/index.mdx +++ b/packages/paste-website/src/pages/components/topbar/index.mdx @@ -7,26 +7,70 @@ export const meta = { import Changelog from '@twilio-paste/topbar/CHANGELOG.md'; import {SidebarCategoryRoutes} from '../../../constants'; -import {Topbar} from '@twilio-paste/topbar'; -import {Menu, MenuItem, useMenuState, MenuBadge} from '@twilio-paste/menu'; +import {Topbar, TopbarActions} from '@twilio-paste/topbar'; +import {Menu, MenuItem, MenuButton, MenuGroup, useMenuState, MenuSeparator, MenuBadge} from '@twilio-paste/menu'; +import { + StatusMenu, + StatusMenuBadge, + StatusMenuItemChild, + StatusMenuItemRadio, + useStatusMenuState, +} from '@twilio-paste/status'; import {Badge} from '@twilio-paste/badge'; import {Box} from '@twilio-paste/box'; import {Input} from '@twilio-paste/input'; import {SearchIcon} from '@twilio-paste/icons/esm/SearchIcon'; +import {Combobox} from '@twilio-paste/combobox'; +import {ChevronDownIcon} from '@twilio-paste/icons/esm/ChevronDownIcon'; import { ProductSwitcher, ProductSwitcherButton, ProductSwitcherItem, useProductSwitcherState, } from '@twilio-paste/product-switcher'; +import {ProductDebuggerIcon} from '@twilio-paste/icons/esm/ProductDebuggerIcon'; +import {Button} from '@twilio-paste/button'; +import {Anchor} from '@twilio-paste/anchor'; +import { + UserDialog, + UserDialogContainer, + UserDialogList, + UserDialogListItem, + UserDialogSeparator, + UserDialogUserEmail, + UserDialogUserInfo, + UserDialogUserName, + useUserDialogListState, +} from '@twilio-paste/user-dialog'; +import { + AccountSwitcher, + AccountSwitcherBadge, + AccountSwitcherGroup, + AccountSwitcherItem, + AccountSwitcherItemRadio, + AccountSwitcherSeparator, + useAccountSwitcherState, +} from '@twilio-paste/account-switcher'; +import {Popover, PopoverButton, PopoverContainer} from '@twilio-paste/popover'; +import {NotificationIcon} from '@twilio-paste/icons/esm/NotificationIcon'; +import {ThemeIcon} from '@twilio-paste/icons/esm/ThemeIcon'; +import {TranslationIcon} from '@twilio-paste/icons/esm/TranslationIcon'; +import {LogOutIcon} from '@twilio-paste/icons/esm/LogOutIcon'; +import {UserIcon} from '@twilio-paste/icons/esm/UserIcon'; import {LogoTwilioIcon} from '@twilio-paste/icons/esm/LogoTwilioIcon'; import {ProductSegmentIcon} from '@twilio-paste/icons/esm/ProductSegmentIcon'; import {ProductFlexIcon} from '@twilio-paste/icons/esm/ProductFlexIcon'; import {ProductEmailAPIIcon} from '@twilio-paste/icons/esm/ProductEmailAPIIcon'; +import {SupportIcon} from '@twilio-paste/icons/esm/SupportIcon'; import packageJson from '@twilio-paste/topbar/package.json'; import DefaultLayout from '../../../layouts/DefaultLayout'; import {getFeature, getNavigationData} from '../../../utils/api'; -import {defaultTopbarExample, emptyTopbarExample} from '../../../component-examples/TopbarExamples.ts'; +import { + basicTopbarExample, + flexTopbarExample, + consoleTopbarExample, + segmentTopbarExample, +} from '../../../component-examples/TopbarExamples.ts'; export default DefaultLayout; @@ -62,10 +106,12 @@ export const getStaticProps = async () => { { ProductFlexIcon, ProductEmailAPIIcon, SearchIcon, + StatusMenu, + StatusMenuBadge, + StatusMenuItemChild, + StatusMenuItemRadio, + useStatusMenuState, + SupportIcon, + UserDialog, + UserDialogContainer, + UserDialogList, + UserDialogListItem, + UserDialogSeparator, + UserDialogUserEmail, + UserDialogUserInfo, + UserDialogUserName, + useUserDialogListState, + UserIcon, + ThemeIcon, + TranslationIcon, + LogOutIcon, + ProductDebuggerIcon, + Button, }} noInline > - {defaultTopbarExample} + {basicTopbarExample} ## Guidelines @@ -108,12 +175,181 @@ User-specific controls (aligned to the right) such as: + {basicTopbarExample} + + +## Composition notes + +### Topbar for Twilio Flex + + + {flexTopbarExample} + + +### Topbar for Twilio Console + + + {consoleTopbarExample} + + +### Topbar for Twilio Segment + + - {defaultTopbarExample} + {segmentTopbarExample} ## Usage guide