-
Notifications
You must be signed in to change notification settings - Fork 103
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
bdfefbf
commit ae21bcf
Showing
14 changed files
with
1,383 additions
and
312 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
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
File renamed without changes.
306 changes: 203 additions & 103 deletions
306
...cumentation/SidebarContent/PHONEBOOK.json → src/components/SidebarContent/PHONEBOOK.json
Large diffs are not rendered by default.
Oops, something went wrong.
File renamed without changes.
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,49 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import SidebarItem from '../SidebarItem/SidebarItem'; | ||
| import Icon from '../Icon'; | ||
| import { iconChevronLeft } from '@wfp/icons'; | ||
|
|
||
| function Sidebar({ | ||
| //data, | ||
| active, | ||
| children, | ||
| sidebarMobileHeader, | ||
| sidebarMobileHeaderLink, | ||
| sidebarContent, | ||
| //updateContent, | ||
| //enableSearch, | ||
| ...other | ||
| }) { | ||
| return ( | ||
| <div | ||
| className={`wfp--sidebar-content__container wfp--sidebar-content__container-${ | ||
| active ? 'active' : '' | ||
| }`} | ||
| {...other}> | ||
| <div className="wfp--sidebar-item-content">{sidebarContent}</div> | ||
| <div className="wfp--content-section"> | ||
| <div className="wfp--sidebar-content-mobile-header"> | ||
| {sidebarMobileHeader} | ||
| </div> | ||
|
|
||
| {children} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default Sidebar; | ||
|
|
||
| export function SidebarHeader({ children }) { | ||
| return <div className="wfp--sidebar-content__header">{children}</div>; | ||
| } | ||
|
|
||
| export function SidebarBackButton({ children, ...other }) { | ||
| return ( | ||
| <div className="wfp--sidebar-content__back-button" {...other}> | ||
| <Icon icon={iconChevronLeft} /> | ||
| {children} | ||
| </div> | ||
| ); | ||
| } |
174 changes: 174 additions & 0 deletions
174
src/components/SidebarContent/SidebarContent.stories.js
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,174 @@ | ||
| import React, { useState } from 'react'; | ||
|
|
||
| import markdown from './README.mdx'; | ||
| import Sidebar from './Sidebar'; | ||
| import { SidebarHeader, SidebarBackButton } from './Sidebar'; | ||
| import DATA from './PHONEBOOK.json'; | ||
| import User from '../User'; | ||
| import { List, ListItem } from '../List'; | ||
| import MainNavigation from '../MainNavigation'; | ||
| import Item from '../Item'; | ||
| import Empty from '../Empty'; | ||
| import Search from '../Search'; | ||
|
|
||
| export default { | ||
| title: 'Templates/SidebarContent', | ||
| parameters: { | ||
| status: 'released', | ||
| mdx: markdown, | ||
| previewWidth: 'full', | ||
| }, | ||
| }; | ||
|
|
||
| export const Phonebook = (args) => { | ||
| const [selectedUserId, setSelectedUserId] = useState(null); | ||
| const [search, setSearch] = useState(null); | ||
| const selectedUserData = DATA.find((e) => e.id === selectedUserId); | ||
|
|
||
| const searchResults = search | ||
| ? DATA.filter((e) => | ||
| e.full_name.toLocaleLowerCase().includes(search.toLocaleLowerCase()) | ||
| ) | ||
| : DATA; | ||
|
|
||
| return ( | ||
| <> | ||
| <MainNavigation pageWidth="full" /> | ||
| <Sidebar | ||
| active={selectedUserId} | ||
| sidebarMobileHeader={ | ||
| <> | ||
| <SidebarBackButton onClick={() => setSelectedUserId()}> | ||
| Back | ||
| </SidebarBackButton> | ||
| <div>Detail page</div> | ||
| </> | ||
| } | ||
| sidebarContent={ | ||
| <> | ||
| <SidebarHeader> | ||
| <Search | ||
| placeHolderText="Type to search user" | ||
| onChange={(e) => setSearch(e)} | ||
| /> | ||
| </SidebarHeader> | ||
| {searchResults && searchResults.length > 0 ? ( | ||
| searchResults.map((user, key) => ( | ||
| <Item | ||
| key={key} | ||
| image={ | ||
| user.profile_image ? ( | ||
| <img alt={user.full_name} src={user.profile_image} /> | ||
| ) : undefined | ||
| } | ||
| title={user.full_name} | ||
| children={user.email} | ||
| subContent={user.phone_number} | ||
| kind="horizontal" | ||
| wrapper="sidebar" | ||
| onClick={() => setSelectedUserId(user.id)} | ||
| noImage | ||
| /> | ||
| )) | ||
| ) : ( | ||
| <Empty title="No results">Please check your search</Empty> | ||
| )} | ||
| </> | ||
| }> | ||
| {selectedUserData ? ( | ||
| <div | ||
| style={{ | ||
| backgroundColor: '#fff', | ||
| overflow: 'scroll', | ||
| padding: '1rem', | ||
| height: '100vh', | ||
| }}> | ||
| <User | ||
| id={selectedUserData.staff_id} | ||
| alt="avatar" | ||
| description={ | ||
| <List small> | ||
| <ListItem>{selectedUserData.job_title}</ListItem> | ||
| </List> | ||
| } | ||
| image={selectedUserData.profile_image} | ||
| name={selectedUserData.full_name} | ||
| style={{ | ||
| borderBottom: '1px solid #edf1f3', | ||
| padding: '1rem 0 2rem 0', | ||
| marginBottom: '1rem', | ||
| }} | ||
| /> | ||
| <div> | ||
| <div | ||
| style={{ | ||
| borderBottom: '1px solid #edf1f3', | ||
| padding: '1rem 0', | ||
| }}> | ||
| <h4>Bio</h4> | ||
| <List small> | ||
| <ListItem>{selectedUserData.bio}</ListItem> | ||
| </List> | ||
| </div> | ||
|
|
||
| <div | ||
| style={{ | ||
| borderBottom: '1px solid #edf1f3', | ||
| padding: '1rem 0', | ||
| }}> | ||
| <h4>Contact</h4> | ||
| <List small> | ||
| <ListItem>email: {selectedUserData.email}</ListItem> | ||
| <ListItem>phone: {selectedUserData.phone_number}</ListItem> | ||
| </List> | ||
| </div> | ||
|
|
||
| <div style={{ padding: '1rem 0' }}> | ||
| <h4>Location</h4> | ||
| <List small> | ||
| <ListItem>country: {selectedUserData.country}</ListItem> | ||
| </List> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) : ( | ||
| <Empty title="No user selected">Please select a user</Empty> | ||
| )} | ||
| </Sidebar> | ||
| </> | ||
| ); | ||
| }; | ||
| /* | ||
| export const Regular = (args) => { | ||
| const sidebarSchema = { | ||
| title: 'full_name', | ||
| content: 'email', | ||
| subContent: 'phone_number', | ||
| }; | ||
| const content = ( | ||
| <div style={{ padding: '1rem' }}> | ||
| <div> | ||
| <Text kind="title">Report preview year 2020</Text> | ||
| </div> | ||
| <Item | ||
| additionalInfo="Friday, 21.02.20" | ||
| content="409 boys, 422 girls" | ||
| hintInfo={<Tag type="warning">not synced</Tag>} | ||
| noImage | ||
| subContent="meal served" | ||
| title="831 students" | ||
| /> | ||
| </div> | ||
| ); | ||
| return ( | ||
| <> | ||
| <MainNavigation /> | ||
| <Sidebar | ||
| data={DATA} | ||
| sidebarItemSchema={sidebarSchema} | ||
| content={content} | ||
| /> | ||
| </> | ||
| ); | ||
| };*/ |
Oops, something went wrong.