Skip to content

Commit 44f8198

Browse files
ggazzoggazzo
authored
feat: Sidebar Item (#284)
1 parent d35f7b3 commit 44f8198

34 files changed

+438
-0
lines changed

‎packages/fuselage/.loki/reference/chrome_iphone7_Misc_Icon_Default.png

5.29 KB
Loading

‎packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Containers_Sidebar_Default.png

78.5 KB
Loading

‎packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Containers_Sidebar_Item_Default.png

59.4 KB
Loading

‎packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Containers_Sidebar_SidebarItem_Default.png

59.4 KB
Loading

‎packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Containers_Sidebar_TopBar_Default.png

25.9 KB
Loading

‎packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Default.png

78.5 KB
Loading

‎packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Item_Default.png

59.4 KB
Loading

‎packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_TopBar_Default.png

26.3 KB
Loading

‎packages/fuselage/.loki/reference/chrome_laptop_Misc_Icon_Default.png

3.71 KB
Loading

‎packages/fuselage/.loki/reference/chrome_laptop_Sidebar_Containers_Sidebar_Default.png

39.9 KB
Loading

‎packages/fuselage/.loki/reference/chrome_laptop_Sidebar_Containers_Sidebar_Item_Default.png

31.5 KB
Loading

‎packages/fuselage/.loki/reference/chrome_laptop_Sidebar_Containers_Sidebar_SidebarItem_Default.png

31.5 KB
Loading

‎packages/fuselage/.loki/reference/chrome_laptop_Sidebar_Containers_Sidebar_TopBar_Default.png

14.2 KB
Loading

‎packages/fuselage/.loki/reference/chrome_laptop_Sidebar_Default.png

39.9 KB
Loading

‎packages/fuselage/.loki/reference/chrome_laptop_Sidebar_Item_Default.png

31.5 KB
Loading

‎packages/fuselage/.loki/reference/chrome_laptop_Sidebar_TopBar_Default.png

14.4 KB
Loading

‎packages/fuselage/src/components/ButtonGroup/index.js

+6
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,17 @@ export function ButtonGroup({
1111
stretch,
1212
vertical,
1313
wrap,
14+
small,
15+
medium,
1416
...props
1517
}) {
1618
return <Box
1719
rcx-button-group
1820
rcx-button-group--align={align}
1921
rcx-button-group--stretch={stretch}
2022
rcx-button-group--vertical={vertical}
23+
rcx-button-group--small={small}
24+
rcx-button-group--medium={medium}
2125
rcx-button-group--wrap={wrap}
2226
role='group'
2327
{...props}
@@ -41,4 +45,6 @@ ButtonGroup.propTypes = {
4145
vertical: PropTypes.bool,
4246
/** Will wrap the items when they exceed the container space? */
4347
wrap: PropTypes.bool,
48+
small: PropTypes.bool,
49+
medium: PropTypes.bool,
4450
};

‎packages/fuselage/src/components/ButtonGroup/styles.scss

+4
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,10 @@
5353
margin-inline: lengths.margin(2);
5454
}
5555

56+
.rcx-button-group.rcx-button-group--medium > & {
57+
margin-inline: lengths.margin(4);
58+
}
59+
5660
.rcx-button-group--wrap > & {
5761
margin-block-end: lengths.margin(16);
5862
margin-inline-start: lengths.margin(none);

‎packages/fuselage/src/components/Sidebar/Actions.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import React from 'react';
2+
3+
import { ButtonGroup } from '../..';
4+
5+
export const Actions = (props) => <ButtonGroup mb='neg-x2' medium {...props}/>;

‎packages/fuselage/src/components/Sidebar/Item.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react';
2+
3+
import { Icon as FuselageIcon, ButtonGroup } from '../..';
4+
5+
const Item = ({ selected, highlighted, clickable, ...props }) => <div className={[
6+
'rc-box rcx-box--full rcx-sidebar-item',
7+
highlighted && 'rcx-sidebar-item--highlighted',
8+
clickable && 'rcx-sidebar-item--clickable',
9+
selected && 'rcx-sidebar-item--selected',
10+
].filter(Boolean).join(' ')} {...props} />;
11+
12+
const Container = (props) => <div className='rc-box rcx-box--full rcx-sidebar-item__container' {...props}/>;
13+
14+
const Content = (props) => <div className='rc-box rcx-box--full rcx-sidebar-item__container rcx-sidebar-item__content' {...props}/>;
15+
16+
const Title = (props) => <div className='rc-box rcx-box--full rcx-sidebar-item__title' {...props}/>;
17+
18+
const Subtitle = (props) => <div className='rc-box rcx-box--full rcx-sidebar-item__subtitle' {...props}/>;
19+
20+
const Wrapper = (props) => <div className='rc-box rcx-box--full rcx-sidebar-item__wrapper' {...props}/>;
21+
22+
const Icon = (props) => <FuselageIcon w='x12' mi='x4' size='x16' {...props} />;
23+
24+
const Avatar = (props) => <Container><div className='rc-box rcx-box--full rcx-sidebar-item__avatar' {...props}/></Container>;
25+
26+
const Actions = (props) => <ButtonGroup small {...props}/>;
27+
28+
Object.assign(Item, {
29+
Container,
30+
Content,
31+
Title,
32+
Subtitle,
33+
Wrapper,
34+
Icon,
35+
Avatar,
36+
Actions,
37+
});
38+
39+
export default Item;

‎packages/fuselage/src/components/Sidebar/Item.stories.mdx

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { Meta, Canvas, Story } from '@storybook/addon-docs/blocks';
2+
3+
import { ActionButton, Avatar } from '../..';
4+
import Item from './Item';
5+
6+
<Meta title='Sidebar/Item' parameters={{ jest: ['Sidebar/spec'] }} />
7+
8+
# Sidebar.Item
9+
10+
Item component to be used inside Sidebar.
11+
12+
<Canvas>
13+
<Story name='Default'>
14+
<Item>
15+
<Item.Avatar><Avatar size='x16' url={'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'}/></Item.Avatar>
16+
<Item.Content>
17+
<Item.Icon name='lock'/>
18+
<Item.Title>ddsfoasdhfiuashd ousadhfiuasdhfiuashd soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh</Item.Title>
19+
</Item.Content>
20+
<Item.Container>
21+
<Item.Actions>
22+
<ActionButton primary success icon='phone'/>
23+
<ActionButton primary danger icon='circle-cross'/>
24+
<ActionButton primary icon='trash'/>
25+
<ActionButton icon='phone'/>
26+
</Item.Actions>
27+
</Item.Container>
28+
</Item>
29+
<Item selected clickable>
30+
<Item.Avatar><Avatar size='x28' url={'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'}/></Item.Avatar>
31+
<Item.Content>
32+
<Item.Icon name='lock'/>
33+
<Item.Title>ddsfoasdhfiuashd ousadhfiuasdhfiuashd soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh</Item.Title>
34+
</Item.Content>
35+
<Item.Container>
36+
<Item.Actions>
37+
<ActionButton primary success icon='phone'/>
38+
<ActionButton primary danger icon='circle-cross'/>
39+
<ActionButton primary icon='trash'/>
40+
<ActionButton icon='phone'/>
41+
</Item.Actions>
42+
</Item.Container>
43+
</Item>
44+
<Item clickable>
45+
<Item.Avatar><Avatar size='x36' url={'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'}/></Item.Avatar>
46+
<Item.Content>
47+
<Item.Wrapper>
48+
<Item.Icon name='lock'/>
49+
<Item.Title>ddsfoasdhfiuashd ousadhfiuasdhfiuashd soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh</Item.Title>
50+
</Item.Wrapper>
51+
<Item.Wrapper>
52+
<Item.Subtitle>ddsfoasdhfiuashd ousadhfiuasdhfiuashd soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh</Item.Subtitle>
53+
</Item.Wrapper>
54+
</Item.Content>
55+
<Item.Container>
56+
<Item.Actions>
57+
<ActionButton primary success icon='phone'/>
58+
<ActionButton primary danger icon='circle-cross'/>
59+
<ActionButton primary icon='trash'/>
60+
<ActionButton icon='phone'/>
61+
</Item.Actions>
62+
</Item.Container>
63+
</Item>
64+
</Story>
65+
</Canvas>

‎packages/fuselage/src/components/Sidebar/Section.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from 'react';
2+
3+
export const Title = (props) => <div className='rcx-box rcx-box--full rcx-sidebar-title' {...props}/>;
4+
5+
6+
export default {
7+
Title,
8+
};

‎packages/fuselage/src/components/Sidebar/Sidebar.stories.mdx

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import { Meta, Canvas, Story } from '@storybook/addon-docs/blocks';
2+
3+
import Sidebar from '.';
4+
import { ActionButton, Avatar } from '../..';
5+
6+
<Meta title='Sidebar' parameters={{ jest: ['Sidebar/spec'] }} />
7+
8+
# Sidebar
9+
10+
<Canvas>
11+
<Story name='Default'>
12+
<Sidebar.TopBar.Section>
13+
<Avatar size={Sidebar.TopBar.Avatar.size} url={'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'} {...Avatar } />
14+
<Sidebar.TopBar.Actions>
15+
<Sidebar.TopBar.Action icon='home'/>
16+
<Sidebar.TopBar.Action icon='magnifier'/>
17+
<Sidebar.TopBar.Action icon='globe'/>
18+
<Sidebar.TopBar.Action icon='sort'/>
19+
<Sidebar.TopBar.Action icon='edit-rounded'/>
20+
</Sidebar.TopBar.Actions>
21+
</Sidebar.TopBar.Section>
22+
<Sidebar.TopBar.ToolBox>
23+
<Sidebar.TopBar.Title>Title</Sidebar.TopBar.Title>
24+
<Sidebar.TopBar.Actions>
25+
<Sidebar.TopBar.Action success icon='phone'/>
26+
<Sidebar.TopBar.Action icon='message-disabled'/>
27+
</Sidebar.TopBar.Actions>
28+
</Sidebar.TopBar.ToolBox>
29+
<Sidebar.Section.Title>Calls</Sidebar.Section.Title>
30+
<Sidebar.Item>
31+
<Sidebar.Item.Avatar><Avatar size='x16' url={'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'}/></Sidebar.Item.Avatar>
32+
<Sidebar.Item.Content>
33+
<Sidebar.Item.Icon name='lock'/>
34+
<Sidebar.Item.Title>ddsfoasdhfiuashd ousadhfiuasdhfiuashd soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh</Sidebar.Item.Title>
35+
</Sidebar.Item.Content>
36+
<Sidebar.Item.Container>
37+
<Sidebar.Item.Actions>
38+
<ActionButton primary success icon='phone'/>
39+
<ActionButton primary danger icon='circle-cross'/>
40+
<ActionButton primary icon='trash'/>
41+
<ActionButton icon='phone'/>
42+
</Sidebar.Item.Actions>
43+
</Sidebar.Item.Container>
44+
</Sidebar.Item>
45+
<Sidebar.Item selected clickable>
46+
<Sidebar.Item.Avatar><Avatar size='x28' url={'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'}/></Sidebar.Item.Avatar>
47+
<Sidebar.Item.Content>
48+
<Sidebar.Item.Icon name='lock'/>
49+
<Sidebar.Item.Title>ddsfoasdhfiuashd ousadhfiuasdhfiuashd soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh</Sidebar.Item.Title>
50+
</Sidebar.Item.Content>
51+
<Sidebar.Item.Container>
52+
<Sidebar.Item.Actions>
53+
<ActionButton primary success icon='phone'/>
54+
<ActionButton primary danger icon='circle-cross'/>
55+
<ActionButton primary icon='trash'/>
56+
<ActionButton icon='phone'/>
57+
</Sidebar.Item.Actions>
58+
</Sidebar.Item.Container>
59+
</Sidebar.Item>
60+
<Sidebar.Item clickable>
61+
<Sidebar.Item.Avatar><Avatar size='x36' url={'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'}/></Sidebar.Item.Avatar>
62+
<Sidebar.Item.Content>
63+
<Sidebar.Item.Wrapper>
64+
<Sidebar.Item.Icon name='lock'/>
65+
<Sidebar.Item.Title>ddsfoasdhfiuashd ousadhfiuasdhfiuashd soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh</Sidebar.Item.Title>
66+
</Sidebar.Item.Wrapper>
67+
<Sidebar.Item.Wrapper>
68+
<Sidebar.Item.Subtitle>ddsfoasdhfiuashd ousadhfiuasdhfiuashd soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh</Sidebar.Item.Subtitle>
69+
</Sidebar.Item.Wrapper>
70+
</Sidebar.Item.Content>
71+
<Sidebar.Item.Container>
72+
<Sidebar.Item.Actions>
73+
<ActionButton primary success icon='phone'/>
74+
<ActionButton primary danger icon='circle-cross'/>
75+
<ActionButton primary icon='trash'/>
76+
<ActionButton icon='phone'/>
77+
</Sidebar.Item.Actions>
78+
</Sidebar.Item.Container>
79+
</Sidebar.Item>
80+
</Story>
81+
</Canvas>

‎packages/fuselage/src/components/Sidebar/TopBar.js

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react';
2+
3+
import { ActionButton, Divider, Box } from '../..';
4+
import { Actions } from './Actions';
5+
6+
const Avatar = { size: 'x24' };
7+
8+
const TopBar = ({ modifier, className, ...props }) => <div className={ `rc-box rc-box--full rcx-sidebar-topbar ${ className }` } {...props} />;
9+
10+
const Wrapper = ({ children }) => <div className='rc-box rc-box--full rcx-sidebar-topbar__wrapper' children={children} />;
11+
12+
TopBar.ToolBox = ({ children, ...props }) =>
13+
<TopBar className='rcx-sidebar-topbar--toolbox'{...props}>
14+
<TopBar.Wrapper children={children} />
15+
<TopBar.Divider />
16+
</TopBar>;
17+
18+
TopBar.Section = ({ children, ...props }) =>
19+
<TopBar className='rcx-sidebar-topbar--section' {...props}>
20+
<TopBar.Wrapper children={children} />
21+
<TopBar.Divider />
22+
</TopBar>;
23+
24+
TopBar.Wrapper = Wrapper;
25+
TopBar.Avatar = Avatar;
26+
TopBar.Actions = Actions;
27+
TopBar.Action = (props) => <ActionButton ghost {...props}/>;
28+
TopBar.Divider = () => <Divider mbs='neg-x2' mbe={0} />;
29+
TopBar.Title = (props) => <Box fontScale='p2' color='default' withTruncatedText {...props} />;
30+
31+
export default TopBar;

‎packages/fuselage/src/components/Sidebar/TopBar.stories.mdx

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { Meta, Canvas, Story } from '@storybook/addon-docs/blocks';
2+
3+
import { Avatar } from '../..';
4+
import TopBar from './TopBar';
5+
6+
<Meta title='Sidebar/TopBar' parameters={{ jest: ['Sidebar/spec'] }} />
7+
8+
# Sidebar.Topbar
9+
10+
Sidebar TopBar and ToolBox.
11+
12+
<Canvas>
13+
<Story name='Default'>
14+
<TopBar.Section>
15+
<Avatar size={TopBar.Avatar.size} url={'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'} {...Avatar } />
16+
<TopBar.Actions>
17+
<TopBar.Action icon='home'/>
18+
<TopBar.Action icon='magnifier'/>
19+
<TopBar.Action icon='globe'/>
20+
<TopBar.Action icon='sort'/>
21+
<TopBar.Action icon='edit-rounded'/>
22+
</TopBar.Actions>
23+
</TopBar.Section>
24+
<TopBar.ToolBox>
25+
<TopBar.Title>Title</TopBar.Title>
26+
<TopBar.Actions>
27+
<TopBar.Action success icon='phone'/>
28+
<TopBar.Action icon='message-disabled'/>
29+
</TopBar.Actions>
30+
</TopBar.ToolBox>
31+
<TopBar.ToolBox>
32+
<TopBar.Title>Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title Long Title</TopBar.Title>
33+
<TopBar.Actions>
34+
<TopBar.Action icon='dialpad'/>
35+
<TopBar.Action success icon='phone'/>
36+
<TopBar.Action danger icon='phone-off'/>
37+
<TopBar.Action icon='message'/>
38+
<TopBar.Action icon='contact'/>
39+
</TopBar.Actions>
40+
</TopBar.ToolBox>
41+
</Story>
42+
</Canvas>

0 commit comments

Comments
 (0)