Skip to content

Commit

Permalink
doc: improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@lsantos1873
lsantos1873 committed Oct 4, 2023
1 parent 021252b commit e6bf8d8
Show file tree
Hide file tree
Showing 4 changed files with 179 additions and 209 deletions.
167 changes: 79 additions & 88 deletions packages/doc/content/components/components/navigationmenu/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ metaTitle: 'NavigationMenu'
metaDescription: 'NavigationMenu Component'
---

import { ArrowRight, Help, Doc, Money, MenuMore } from '@gympass/yoga-icons';
import { ArrowRight, Help, Doc, MenuMore } from '@gympass/yoga-icons';
import { theme } from '@gympass/yoga';
import {
NavigationMenuProps,
Expand All @@ -27,9 +27,7 @@ Gympass `<NavigationMenu />` displays a navigation menu with 3 optional main are

`<NavigationMenu.Items />` should be used to display items and subitems.

The menu is responsive by default. The items to be displayed in the bottom bar are handle by components `<NavigationMenu.BottomItems />` and `<NavigationMenu.BottomItem />`.

The responsiveness is controled by props.<br /><br />
The menu is responsive by default and controled by props. `<NavigationMenu.BottomItems />` and `<NavigationMenu.BottomItem />` should be used to display the items in the bottom bar.<br /><br />

Available components:

Expand Down Expand Up @@ -64,36 +62,38 @@ const MainPage = styled.main`
padding: 10px;
`;

render(() => {
const renderWrapper = ({ children }) => (
<a href="https://www.gympass.com">{children}</a>
);
const itemGroups = [
[
{
expanded: true,
icon: Doc,
label: 'Subscription',
tag: 'new',
subitems: [{ label: 'Details' }],
},
{
active: true,
icon: Doc,
label: 'Billing',
},
],
[
{
icon: Help,
label: 'Help',
},
],
];

const IconComponent = ({ icon }) => <Icon as={icon} fill="deep" />;

const itemGroups = [
[
{
expanded: true,
icon: Doc,
label: 'Subscription',
tag: 'new',
subitems: [{ label: 'Details' }],
},
{
active: true,
icon: Doc,
label: 'Billing',
},
],
[
{
icon: Help,
label: 'Help',
},
],
];
// Whether the link handles the active attribute automatically (e.g., link from react-router-dom)
// then the item's active prop is not needed
const renderWrapper = ({ children }) => (
<a href="https://www.gympass.com">{children}</a>
);

const IconComponent = ({ icon }) => <Icon as={icon} fill="deep" />;

render(() => {
return (
<Container>
<NavigationMenu responsive={false}>
Expand Down Expand Up @@ -166,55 +166,54 @@ const MainPage = styled.main`
padding: 10px;
`;

const itemMainGroup = [
{
expanded: true,
icon: Doc,
label: 'Subscription',
tag: 'new',
subitems: [{ label: 'Details' }],
},
{
active: true,
icon: Doc,
label: 'Billing',
},
];

const itemGroups = [
[...itemMainGroup],
[
{
icon: Help,
label: 'Help',
},
],
];

const IconComponent = ({ icon }) => <Icon as={icon} fill="deep" />;

render(() => {
const [isOpenOnMobile, setIsOpenOnMobile] = useState(false);

// Whether the link handles the active attribute automatically (e.g., link from react-router-dom)
// then the item's active prop is not needed
const renderWrapper = ({ children }) => (
<a
href="/components/navigationmenu"
onClick={() => setIsOpenOnMobile(false)}
>
<a href="https://www.gympass.com" onClick={() => setIsOpenOnMobile(false)}>
{children}
</a>
);

const IconComponent = ({ icon }) => <Icon as={icon} fill="deep" />;

const itemMainGroup = [
{
expanded: true,
icon: Doc,
label: 'Subscription',
tag: 'new',
subitems: [{ label: 'Details' }],
},
{
active: true,
icon: Doc,
label: 'Billing',
},
];

const itemGroups = [
[...itemMainGroup],
[
{
icon: Help,
label: 'Help',
},
],
];

const bottomItems = [
...itemMainGroup
.slice(0, 2)
.map(({ active, icon, label }) => ({
active,
icon,
label,
wrapper: renderWrapper,
})),
...itemMainGroup.slice(0, 2).map(({ active, icon, label }) => ({
active,
icon,
label,
wrapper: renderWrapper,
})),
{
// Missing the active logic here.
// It must be active when none of the other left items are active.
icon: MenuMore,
label: 'More',
wrapper: ({ children }) => (
Expand All @@ -225,8 +224,9 @@ render(() => {

return (
<Container>
{/* Due to the structure of the yoga page it is not possible to demonstrate all responsive behavior */}
{/* To achieve this replace openOnMobile={false} by openOnMobile={isOpenOnMobile} */}
{/* It is not possible to demonstrate all the responsive behavior here. */}
{/* When clicking on the "More" item, the entire menu will be displayed above the bottom bar. */}
{/* To get the entire flow the openOnMobile={false} prop must be replaced by openOnMobile={isOpenOnMobile} */}
<NavigationMenu openOnMobile={false}>
<NavigationMenu.Header>
<NavigationMenu.Menu
Expand Down Expand Up @@ -269,7 +269,9 @@ render(() => {
/>
</NavigationMenu.Footer>
</NavigationMenu>

<MainPage>Main page</MainPage>

<NavigationMenu.BottomItems>
{bottomItems.map(({ active, icon, label, wrapper }) => (
<NavigationMenu.BottomItem
Expand All @@ -287,15 +289,8 @@ render(() => {

#### Menu subcomponent with an action

When the Menu subcomponent has an action associated it exposes the onClick event.

```javascript state
const StyledBox = styled(Box)`
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
const StyledAvatar = styled(Avatar.Circle)`
background-color: ${theme.colors.vibin};
`;

Expand All @@ -305,11 +300,9 @@ render(() => {
<NavigationMenu.Header>
<NavigationMenu.Menu
avatar={
<Avatar.Circle>
<StyledBox>
<Text color="white">C</Text>
</StyledBox>
</Avatar.Circle>
<StyledAvatar>
<Text color="white">C</Text>
</StyledAvatar>
}
title="Company"
subtitle="Reseller"
Expand All @@ -323,8 +316,6 @@ render(() => {

#### Switcher subcomponent with actions

When the Switcher subcomponent has associated actions, they are displayed so that the user can select one of them.

```javascript state
const StyledAvatar = styled(Avatar.Circle)`
background-color: ${theme.colors.white};
Expand Down
28 changes: 17 additions & 11 deletions packages/doc/content/components/components/navigationmenu/props.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,17 @@ export const NavigationMenuProps = [
},
{
name: 'openOnMobile',
description: { text: 'Indicates if the menu is open/close in mobile' },
description: { text: 'Indicates whether the menu is open/close in mobile' },
type: { name: 'bool' },
required: false,
defaultValue: { value: 'false' },
},
{
name: 'responsive',
description: { text: `Indicates if the menu should be responsive` },
description: { text: `Indicates whether the menu should be responsive` },
type: { name: 'bool' },
required: false,
defaultValue: { value: 'true' },
},
];

Expand All @@ -36,14 +38,14 @@ export const MenuProps = [
},
{
name: 'title',
description: { text: 'Text to be displayed displayed as title' },
description: { text: 'Text to be displayed as title' },
type: { name: 'string' },
required: true,
},
{
name: 'onClick',
description: {
text: 'Event triggered when clicking in the component',
text: 'Event triggered when clicking on the component',
},
type: { name: 'func' },
required: false,
Expand All @@ -70,7 +72,7 @@ export const SwitcherActionProps = [
{
name: 'onClick',
description: {
text: 'Event triggered when clicking in the action',
text: 'Event triggered when clicking on the action',
},
type: { name: 'func' },
required: true,
Expand Down Expand Up @@ -129,10 +131,11 @@ export const ItemProps = [
name: 'active',
description: {
text:
'Indicates if the item is active/inactive. This prop is not required if the wrapper already handles this.',
'Indicates whether the item is active/inactive. This prop is not necessary when the wrapper already handles this.',
},
type: { name: 'bool' },
required: false,
defaultValue: { value: 'false' },
},
{
name: 'children',
Expand All @@ -142,7 +145,7 @@ export const ItemProps = [
},
{
name: 'expanded',
description: { text: 'Controls when hide/show the subitems' },
description: { text: 'Controls when to hide/show subitems' },
type: { name: 'bool' },
required: false,
defaultValue: { value: 'false' },
Expand All @@ -161,9 +164,10 @@ export const ItemProps = [
},
{
name: 'responsive',
description: { text: `Indicates if the item should be responsive` },
description: { text: `Indicates whether the item should be responsive` },
type: { name: 'bool' },
required: false,
defaultValue: { value: 'true' },
},
{
name: 'tag',
Expand All @@ -184,10 +188,11 @@ export const SubitemProps = [
name: 'active',
description: {
text:
'Indicates if the subitem is active/inactive. This prop is not required if the wrapper already handles this.',
'Indicates whether the item is active/inactive. This prop is not necessary when the wrapper already handles this.',
},
type: { name: 'bool' },
required: false,
defaultValue: { value: 'false' },
},
{
name: 'label',
Expand All @@ -208,7 +213,7 @@ export const BottomItemsProps = [
name: 'children',
description: { text: 'Items to be displayed in the mobile bottom bar' },
type: { name: 'node' },
required: false,
required: true,
},
];

Expand All @@ -217,10 +222,11 @@ export const BottomItemProps = [
name: 'active',
description: {
text:
'Indicates if the item is active/inactive. This prop is not required if the wrapper already handles this.',
'Indicates whether the item is active/inactive. This prop is not necessary when the wrapper already handles this.',
},
type: { name: 'bool' },
required: false,
defaultValue: { value: 'false' },
},
{
name: 'icon',
Expand Down
Loading

0 comments on commit e6bf8d8

Please sign in to comment.