Skip to content

Commit

Permalink
chore: fix user dialog page
Browse files Browse the repository at this point in the history
  • Loading branch information
@nkrantz
nkrantz committed Jun 27, 2023
1 parent 0281ca8 commit c291159
Show file tree
Hide file tree
Showing 3 changed files with 196 additions and 30 deletions.
1 change: 0 additions & 1 deletion packages/paste-website/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,6 @@
"@twilio-paste/tooltip-primitive": "^1.0.0",
"@twilio-paste/topbar": "^0.1.0",
"@twilio-paste/truncate": "^13.0.0",
"@twilio-paste/user-dialog": "^0.1.0",
"@twilio-paste/types": "^5.0.0",
"@twilio-paste/uid-library": "^1.0.0",
"@twilio-paste/utils": "^4.0.0",
Expand Down
74 changes: 74 additions & 0 deletions packages/paste-website/src/component-examples/UserDialogExamples.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
export const defaultUserDialogExample = `
const UserDialogExample = () => {
const userDialog = useUserDialogState()
const userDialogList = useUserDialogListState()
const [selected, setSelected] = React.useState()
const id1 = useUID();
const id2 = useUID();
const id3 = useUID();
return (
<UserDialogContainer {...userDialog} name="User Name" icon={UserIcon} baseId="i-am-user-dialog">
<UserDialog aria-label="user menu" data-testid="basic-user-dialog">
<UserDialogUserInfo>
<UserDialogUserName>Name</UserDialogUserName>
<UserDialogUserEmail>[email protected]</UserDialogUserEmail>
</UserDialogUserInfo>
<UserDialogList {...userDialogList} data-testid="user-dialog-listbox">
<UserDialogListItem
{...userDialogList}
key={id1}
selected={selected === id1}
onSelect={() => setSelected(id1)}
data-testid="FIRST_ITEM"
>
<UserIcon decorative />
Item
</UserDialogListItem>
<UserDialogSeparator />
<UserDialogListItem
{...userDialogList}
key={id2}
selected={selected === id2}
onSelect={() => setSelected(id2)}
data-testid="SECOND_ITEM"
href="https://www.google.com"
>
<UserIcon decorative />
Item
</UserDialogListItem>
<UserDialogSeparator />
<UserDialogListItem
{...userDialogList}
key={id3}
selected={selected === id3}
onSelect={() => setSelected(id3)}
data-testid="THIRD_ITEM"
>
<ThemeIcon decorative />
<Box width="100%" display="flex" justifyContent="space-between">
Theme
<Badge variant="decorative10" as="span" size="small">
Light
</Badge>
</Box>
</UserDialogListItem>
<UserDialogSeparator />
<UserDialogListItem {...userDialogList} key="4" selected={selected === '4'} onSelect={() => setSelected('4')}>
<TranslationIcon decorative />
<Box width="100%" display="flex" justifyContent="space-between">
Language
<Badge variant="decorative10" as="span" size="small">
EN
</Badge>
</Box>
</UserDialogListItem>
</UserDialogList>
</UserDialog>
</UserDialogContainer>
);
}
render(
<UserDialogExample/>
)
`.trim();
151 changes: 122 additions & 29 deletions packages/paste-website/src/pages/components/user-dialog/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,21 @@ export const meta = {
import Changelog from '@twilio-paste/user-dialog/CHANGELOG.md';
import {SidebarCategoryRoutes} from '../../../constants';
import {Topbar} from '@twilio-paste/topbar';
import {
useUserDialogState,
UserDialog,
UserDialogUserInfo,
UserDialogUserName,
UserDialogUserEmail,
UserDialogContainer,
UserDialogList,
UserDialogListItem,
useUserDialogListState,
UserDialogSeparator,
} from '@twilio-paste/user-dialog';
import {UserIcon} from '@twilio-paste/icons/esm/UserIcon';
import {ThemeIcon} from '@twilio-paste/icons/esm/ThemeIcon';
import {TranslationIcon} from '@twilio-paste/icons/esm/TranslationIcon';
import {Menu, MenuItem, useMenuState, MenuBadge} from '@twilio-paste/menu';
import {Badge} from '@twilio-paste/badge';
import {Box} from '@twilio-paste/box';
Expand All @@ -19,15 +34,17 @@ import {
ProductSwitcherItem,
useProductSwitcherState,
} from '@twilio-paste/product-switcher';
import {useUID} from '@twilio-paste/uid-library';

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 packageJson from '@twilio-paste/topbar/package.json';
import packageJson from '@twilio-paste/user-dialog/package.json';
import DefaultLayout from '../../../layouts/DefaultLayout';
import {getFeature, getNavigationData} from '../../../utils/api';
import {defaultTopbarExample, emptyTopbarExample} from '../../../component-examples/TopbarExamples.ts';

import {defaultUserDialogExample} from '../../../component-examples/UserDialogExamples.ts';
export default DefaultLayout;

export const getStaticProps = async () => {
Expand Down Expand Up @@ -61,27 +78,27 @@ export const getStaticProps = async () => {

<LivePreview
scope={{
Topbar,
useUserDialogState,
UserDialog,
UserDialogUserInfo,
UserDialogUserName,
UserDialogUserEmail,
UserDialogContainer,
UserDialogList,
UserDialogListItem,
useUserDialogListState,
UserDialogSeparator,
useUID,
UserIcon,
ThemeIcon,
TranslationIcon,
Box,
Input,
Menu,
MenuItem,
useMenuState,
MenuBadge,
Badge,
ProductSwitcher,
ProductSwitcherButton,
ProductSwitcherItem,
useProductSwitcherState,
LogoTwilioIcon,
ProductSegmentIcon,
ProductFlexIcon,
ProductEmailAPIIcon,
SearchIcon,
}}
noInline
showOverflow
>
{defaultTopbarExample}
{defaultUserDialogExample}
</LivePreview>

## Guidelines
Expand All @@ -108,8 +125,28 @@ Account-specific controls are aligned to the left, such as:

Use a User Dialog to display actions that a user can trigger related to their profile. Add separators to group menu items.

<LivePreview scope={{Topbar}} noInline>
{emptyTopbarExample}
<LivePreview
scope={{
useUserDialogState,
UserDialog,
UserDialogUserInfo,
UserDialogUserName,
UserDialogUserEmail,
UserDialogContainer,
UserDialogList,
UserDialogListItem,
useUserDialogListState,
UserDialogSeparator,
useUID,
UserIcon,
ThemeIcon,
TranslationIcon,
Box,
Badge,
}}
noInline
>
{defaultUserDialogExample}
</LivePreview>

## Usage guide
Expand All @@ -131,21 +168,77 @@ yarn add @twilio-paste/user-dialog - or - yarn add @twilio-paste/core
```jsx
import {UserDialog} from '@twilio-paste/core/user-dialog';

const Topbar = () => {
const UserDialog = () => {
const userDialogList = useUserDialogListState();
return (
<Topbar>
{TODO:}
</Topbar>
<UserDialogContainer name="Nora Krantz">
<UserDialog aria-label="my_user_menu">
<UserDialogUserInfo>
<UserDialogUserName>Name</UserDialogUserName>
<UserDialogUserEmail>email@email.com</UserDialogUserEmail>
</UserDialogUserInfo>
<UserDialogList {...userDialogList}>
<UserDialogListItem {...userDialogList} onSelect={() => {}}>One</UserDialogListItem>
<UserDialogListItem {...userDialogList} href="www.#.com"}>Two</UserDialogListItem>
</UserDialogList>
</UserDialogContainer>
);
};
```

#### Topbar props
#### UserDialogContainer props

| Prop | Type | Description | Default |
| -------- | ----------------------------------------------------- | ------------------------------------- | ------- |
| children | `NonNullable<React.ReactNode>` | | |
| state? | `NonModalDialogPrimitiveStateReturn` | User Dialog state hook | |
| name | `string` | Provides name for the Avatar initials | |
| src? | `string` | Provides an image for the Avatar | |
| icon? | `React.FC<React.PropsWithChildren<GenericIconProps>>` | Provides an icon for the Avatar | |

#### UserDialog props

| Prop | Type | Description | Default |
| ---------- | ----------------- | ----------------------------------------------------------------------------------------- | ------------- |
| children | `React.ReactNode` | | |
| aria-label | `string` | Accessible label for the User Dialog | |
| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider | 'USER_DIALOG' |

#### UserDialogUserInfo props

| Prop | Type | Description | Default |
| -------- | ----------------- | ----------------------------------------------------------------------------------------- | ----------------------- |
| children | `React.ReactNode` | | |
| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider | 'USER_DIALOG_USER_INFO' |

#### UserDialogUserName props

| Prop | Type | Description | Default |
| -------- | ----------------- | ----------------------------------------------------------------------------------------- | ----------------------- |
| children | `React.ReactNode` | | |
| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider | 'USER_DIALOG_USER_NAME' |

#### UserDialogUserEmail props

| Prop | Type | Description | Default |
| -------- | ----------------- | ----------------------------------------------------------------------------------------- | ------------------------ |
| children | `React.ReactNode` | | |
| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider | 'USER_DIALOG_USER_EMAIL' |

#### UserDialogList props

| Prop | Type | Description | Default |
| -------- | ----------------- | ----------------------------------------------------------------------------------------- | ------------------ |
| children | `React.ReactNode` | | |
| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider | 'USER_DIALOG_LIST' |

#### UserDialogListItem props

| Prop | Type | Description | Default |
| --------- | ----------------- | ----------------------------------------------------------------------------------------- | -------- |
| children? | `React.ReactNode` | Recommended: Account Switcher, User Dialog, Product Switcher, Search Input, etc. | |
| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider | 'TOPBAR' |
| Prop | Type | Description | Default |
| -------- | ----------------- | ----------------------------------------------------------------------------------------- | ----------------------- |
| children | `React.ReactNode` | | |
| href? | `string` | Providing an href will make the list item an `<a>` tag | |
| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider | 'USER_DIALOG_LIST_ITEM' |

<ChangelogRevealer>
<Changelog />
Expand Down

0 comments on commit c291159

Please sign in to comment.