Skip to content

Commit

Permalink
Merge pull request #1537 from cozy/tabs-section-header
Browse files Browse the repository at this point in the history
@ptbrowne
ptbrowne authored Sep 3, 2020

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode
2 parents 4a8bb16 + ec46f16 commit 19d0048
Showing 6 changed files with 197 additions and 118 deletions.
3 changes: 2 additions & 1 deletion docs/styleguide.config.js
View file
Original file line number Diff line number Diff line change
@@ -113,7 +113,8 @@ module.exports = {
'../react/AppLinker/index.jsx',
'../react/Breadcrumbs/index.jsx',
'../react/Menu/index.jsx',
'../react/Tabs/index.jsx'
'../react/Tabs/index.jsx',
'../react/NavigationList/index.jsx'
]
},
{
60 changes: 2 additions & 58 deletions react/MuiCozyTheme/List/Readme.md
View file
Original file line number Diff line number Diff line change
@@ -133,62 +133,6 @@ import Icon from 'cozy-ui/transpiled/react/Icon';
</List>
</MuiCozyTheme>
```
### Navigation menus
### Navigation list

When presenting a list of actions in a navigation menu, it can be useful to
group actions per sections.

- `ListSubHeader` can be used to add a section header.
- `ListItemSecondaryAction` can be used to show an arrow.

```
import MuiCozyTheme from 'cozy-ui/transpiled/react/MuiCozyTheme';
import List from 'cozy-ui/transpiled/react/MuiCozyTheme/List';
import ListItem from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItem';
import ListItemIcon from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItemIcon';
import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
import ListItemSecondaryAction from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItemSecondaryAction';
import ListSubheader from 'cozy-ui/transpiled/react/MuiCozyTheme/ListSubheader';
import Icon from 'cozy-ui/transpiled/react/Icon';
<MuiCozyTheme>
<List>
<ListSubheader>General</ListSubheader>
<ListItem>
<ListItemIcon>
<Icon icon="gear" width="24" height="24" />
</ListItemIcon>
<ListItemText primaryText="General settings"/>
<ListItemSecondaryAction>
<Icon icon="right" width="24" height="24" className='u-mr-1 u-coolGrey' />
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemIcon>
<Icon icon="people" width="24" height="24" />
</ListItemIcon>
<ListItemText primaryText="User preferences" secondaryText="Notifications and theme"/>
<ListItemSecondaryAction>
<Icon icon="right" width="24" height="24" className='u-mr-1 u-coolGrey' />
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemIcon>
<Icon icon="trash" className='u-error' width="24" height="24" />
</ListItemIcon>
<ListItemText primaryText="Delete account" primaryTextClassName="u-error" secondaryTextClassName="u-error" secondaryText="Permanently delete all your data"/>
</ListItem>
<ListSubheader>Accounts</ListSubheader>
<ListItem>
<ListItemIcon>
<Icon icon="bank" width="24" height="24" />
</ListItemIcon>
<ListItemText primaryText="Bank accounts" />
<ListItemSecondaryAction>
<Icon icon="right" width="24" height="24" className='u-mr-1 u-coolGrey' />
</ListItemSecondaryAction>
</ListItem>
</List>
</MuiCozyTheme>
```
List components are used in the [NavigationList](#/NavigationList) component.
126 changes: 126 additions & 0 deletions react/NavigationList/Readme.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
A navigation list is used to present choices of navigation to the user.
It will be rendered slightly differently on desktop or mobile, with
desktop sections rendered into cards while on mobile, it will rendered
simply as a list with subheaders.

```
import MuiCozyTheme from 'cozy-ui/transpiled/react/MuiCozyTheme';
import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'cozy-ui/transpiled/react/Tabs';
import Icon from 'cozy-ui/transpiled/react/Icon';
import ListItem from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItem'
import ListItemIcon from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItemIcon'
import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
import ListItemSecondaryAction from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItemSecondaryAction'
import useBreakpoints, { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints';
import ListSubheader from '../MuiCozyTheme/ListSubheader'
import NavigationList, {
NavigationListSection
} from 'cozy-ui/transpiled/react/NavigationList'
import Stack from 'cozy-ui/transpiled/react/Stack'
const NavigationListExample = ({ style }) => {
return (
<NavigationList style={style}>
<NavigationListSection>
<ListSubheader>General</ListSubheader>
<ListItem>
<ListItemIcon>
<Icon icon="gear" width="24" height="24" />
</ListItemIcon>
<ListItemText primaryText="General settings" />
<ListItemSecondaryAction>
<Icon
icon="right"
width="24"
height="24"
className="u-mr-1 u-coolGrey"
/>
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemIcon>
<Icon icon="people" width="24" height="24" />
</ListItemIcon>
<ListItemText
primaryText="User preferences"
secondaryText="Notifications and theme"
/>
<ListItemSecondaryAction>
<Icon
icon="right"
width="24"
height="24"
className="u-mr-1 u-coolGrey"
/>
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemIcon>
<Icon icon="trash" className="u-error" width="24" height="24" />
</ListItemIcon>
<ListItemText
primaryText="Delete account"
primaryTextClassName="u-error"
secondaryTextClassName="u-error"
secondaryText="Permanently delete all your data"
/>
</ListItem>
</NavigationListSection>
<NavigationListSection>
<ListSubheader>Accounts</ListSubheader>
<ListItem>
<ListItemIcon>
<Icon icon="bank" width="24" height="24" />
</ListItemIcon>
<ListItemText primaryText="Bank accounts" />
<ListItemSecondaryAction>
<Icon
icon="right"
width="24"
height="24"
className="u-mr-1 u-coolGrey"
/>
</ListItemSecondaryAction>
</ListItem>
</NavigationListSection>
</NavigationList>
)
}
const tabsNavigationListStyle = { marginTop: -1 };
const TabsExample = () => {
const { isMobile } = useBreakpoints()
return (
<>
<p>
With tabs, it is necessary to tweak a bit the style to prevent a double border on mobile.
</p>
<Tabs initialActiveTab='navlist'>
<TabList>
<Tab name='navlist'>Navigation list</Tab>
<Tab name='details'>Details</Tab>
</TabList>
<TabPanels>
<TabPanel className={isMobile ? 'u-pt-0' : null} name='navlist'>
<NavigationListExample style={tabsNavigationListStyle} />
</TabPanel>
<TabPanel name='details'>
{ content.ada.short }
</TabPanel>
</TabPanels>
</Tabs>
</>
)
}
<BreakpointsProvider>
<MuiCozyTheme>
<Stack spacing='xl'>
<NavigationListExample />
<TabsExample />
</Stack>
</MuiCozyTheme>
</BreakpointsProvider>
```
33 changes: 33 additions & 0 deletions react/NavigationList/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from 'react'
import List from 'cozy-ui/transpiled/react/MuiCozyTheme/List'
import Stack from 'cozy-ui/transpiled/react/Stack'
import Card from 'cozy-ui/transpiled/react/Card'
import useBreakpoints from 'cozy-ui/transpiled/react/hooks/useBreakpoints'

const NavigationList = ({ children, style }) => {
const { isMobile } = useBreakpoints()
return isMobile ? (
<List style={style}>{children}</List>
) : (
<DesktopSectionWrapper style={style}>{children}</DesktopSectionWrapper>
)
}

export default NavigationList

const DesktopSection = ({ children }) => (
<Card className="u-p-0 u-ov-hidden">{children}</Card>
)

const DesktopSectionWrapper = ({ children }) => (
<Stack spacing="s">{children}</Stack>
)

export const NavigationListSection = ({ children }) => {
const { isMobile } = useBreakpoints()
return isMobile ? (
<>{children}</>
) : (
<DesktopSection>{children}</DesktopSection>
)
}
68 changes: 27 additions & 41 deletions react/Tabs/Readme.md
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,51 @@
```
import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'cozy-ui/transpiled/react/Tabs';
import Icon from 'cozy-ui/transpiled/react/Icon';
Content needs to be separated into sections and accessed via a single content area using a flat navigation structure that does not refresh the page when selected.

const general = `
Grace Murray Hopper, née le 9 décembre 1906 à New York et morte le 1er janvier 1992 dans le comté d'Arlington, est une informaticienne américaine et Rear admiral (lower half) de la marine américaine. Elle est la conceptrice du premier compilateur en 1951 (A-0 System) et du langage COBOL en 1959.
`
const description = `
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, soluta. Voluptas ipsa ullam a totam veniam itaque, iusto ducimus, sequi eveniet debitis recusandae incidunt, fugiat architecto et distinctio, optio! Deserunt.</div>
<div>Velit neque, repellendus explicabo voluptates veritatis itaque saepe nemo et! Impedit veniam, voluptates. Aliquid laborum voluptate, non commodi magnam, soluta perferendis sapiente nemo harum, eligendi saepe beatae cum quam fugiat.</div>
<div>Quam tempora, similique pariatur, vitae atque ducimus. Quidem tempore, nulla est. Dolor quisquam quia placeat molestiae, nulla beatae voluptatem labore sit mollitia repudiandae animi iure maxime maiores quidem delectus ad.</div>
<div>Iste reiciendis reprehenderit et similique, rem. Architecto quasi debitis hic, voluptatum in possimus soluta sit, praesentium nisi provident pariatur culpa mollitia repellendus earum reiciendis animi. Sunt voluptates, assumenda esse perspiciatis.</div>
<div>Alias quae sequi aliquid sed, nobis veniam magnam rerum amet velit dignissimos dicta a dolorem! Dolorem soluta perferendis error, voluptate dolorum quas, fuga ad repellendus tenetur amet sit assumenda dignissimos.
`;
Tabs can have the `inverted` prop to be in the primary color of the app.

<>
<Tabs initialActiveTab='general'>
<TabList>
<Tab name='general'>General</Tab>
<Tab name='details'>Details</Tab>
</TabList>
<TabPanels>
<TabPanel name='general'>
{ general }
</TabPanel>
<TabPanel name='details'>
{ description }
</TabPanel>
</TabPanels>
</Tabs>
<div className='u-m-2'></div>
```
import MuiCozyTheme from 'cozy-ui/transpiled/react/MuiCozyTheme';
import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'cozy-ui/transpiled/react/Tabs';
<Tabs initialActiveTab='general'>
<MuiCozyTheme>
<Tabs initialActiveTab='navlist'>
<TabList inverted>
<Tab name='general'>General</Tab>
<Tab name='navlist'>General</Tab>
<Tab name='details'>Details</Tab>
</TabList>
<TabPanels>
<TabPanel name='general'>
{ general }
<TabPanel name='navlist'>
General tab
</TabPanel>
<TabPanel name='details'>
{ description }
Details tab
</TabPanel>
</TabPanels>
</Tabs>
</MuiCozyTheme>
```

```
import MuiCozyTheme from 'cozy-ui/transpiled/react/MuiCozyTheme';
import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'cozy-ui/transpiled/react/Tabs';
<MuiCozyTheme>
<div style={{ width: 300, marginTop: 32 }}>
<Tabs initialActiveTab='general'>
<Tabs initialActiveTab='navlist'>
<TabList inverted>
<Tab name='general'>General</Tab>
<Tab name='navlist'>General</Tab>
<Tab name='details'>Details</Tab>
<Tab name='similar'>Very long title</Tab>
<Tab name='others'>Others</Tab>
</TabList>
<TabPanels>
<TabPanel name='general'>
{ general }
<TabPanel name='navlist'>
General tab
</TabPanel>
<TabPanel name='details'>
{ description }
Details tab
</TabPanel>
<TabPanel name='similar'>
Similar tab
Content for "Very long title" tab
</TabPanel>
<TabPanel name='others'>
Others tab
@@ -70,5 +54,7 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, soluta. Voluptas
</Tabs>
</div>
</>
</MuiCozyTheme>
```

Tabs can be along with the [NavigationList](#/NavigationList) component.
25 changes: 7 additions & 18 deletions react/__snapshots__/examples.spec.jsx.snap
View file
Original file line number Diff line number Diff line change
@@ -6139,29 +6139,20 @@ exports[`Table should render examples: Table 1`] = `

exports[`Tabs should render examples: Tabs 1`] = `
"<div>
<div class=\\"styles__coz-tabs___24QL5\\">
<div class=\\"styles__coz-tab-list___3qac8\\">
<div class=\\"styles__coz-tab___2mOye styles__coz-tab--active___1wmwM\\">General</div>
<div class=\\"styles__coz-tab___2mOye\\">Details</div>
</div>
<div class=\\"\\">
<div class=\\"styles__coz-tab-panel___35538\\">
Grace Murray Hopper, née le 9 décembre 1906 à New York et morte le 1er janvier 1992 dans le comté d'Arlington, est une informaticienne américaine et Rear admiral (lower half) de la marine américaine. Elle est la conceptrice du premier compilateur en 1951 (A-0 System) et du langage COBOL en 1959.
</div>
</div>
</div>
<div class=\\"u-m-2\\"></div>
<div class=\\"styles__coz-tabs___24QL5\\">
<div class=\\"styles__coz-tab-list___3qac8 styles__coz-tab-list--inverted___3VjXc\\">
<div class=\\"styles__coz-tab___2mOye styles__coz-tab--active___1wmwM\\">General</div>
<div class=\\"styles__coz-tab___2mOye\\">Details</div>
</div>
<div class=\\"\\">
<div class=\\"styles__coz-tab-panel___35538\\">
Grace Murray Hopper, née le 9 décembre 1906 à New York et morte le 1er janvier 1992 dans le comté d'Arlington, est une informaticienne américaine et Rear admiral (lower half) de la marine américaine. Elle est la conceptrice du premier compilateur en 1951 (A-0 System) et du langage COBOL en 1959.
</div>
<div class=\\"styles__coz-tab-panel___35538\\">General tab</div>
</div>
</div>
</div>"
`;

exports[`Tabs should render examples: Tabs 2`] = `
"<div>
<div style=\\"width: 300px; margin-top: 32px;\\">
<div class=\\"styles__coz-tabs___24QL5\\">
<div class=\\"styles__coz-tab-list___3qac8 styles__coz-tab-list--inverted___3VjXc\\">
@@ -6171,9 +6162,7 @@ exports[`Tabs should render examples: Tabs 1`] = `
<div class=\\"styles__coz-tab___2mOye\\">Others</div>
</div>
<div class=\\"\\">
<div class=\\"styles__coz-tab-panel___35538\\">
Grace Murray Hopper, née le 9 décembre 1906 à New York et morte le 1er janvier 1992 dans le comté d'Arlington, est une informaticienne américaine et Rear admiral (lower half) de la marine américaine. Elle est la conceptrice du premier compilateur en 1951 (A-0 System) et du langage COBOL en 1959.
</div>
<div class=\\"styles__coz-tab-panel___35538\\">General tab</div>
</div>
</div>
</div>

0 comments on commit 19d0048

Please sign in to comment.