feat: Sidebar Item

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

@@ -11,13 +11,17 @@ export function ButtonGroup({
   stretch,
   vertical,
   wrap,
+  small,
+  medium,
   ...props
 }) {
   return <Box
     rcx-button-group
     rcx-button-group--align={align}
     rcx-button-group--stretch={stretch}
     rcx-button-group--vertical={vertical}
+    rcx-button-group--small={small}
+    rcx-button-group--medium={medium}
     rcx-button-group--wrap={wrap}
     role='group'
     {...props}
@@ -41,4 +45,6 @@ ButtonGroup.propTypes = {
   vertical: PropTypes.bool,
   /** Will wrap the items when they exceed the container space? */
   wrap: PropTypes.bool,
+  small: PropTypes.bool,
+  medium: PropTypes.bool,
 };

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

@@ -53,6 +53,10 @@
     margin-inline: lengths.margin(2);
   }
 
+  .rcx-button-group.rcx-button-group--medium > & {
+    margin-inline: lengths.margin(4);
+  }
+
   .rcx-button-group--wrap > & {
     margin-block-end: lengths.margin(16);
     margin-inline-start: lengths.margin(none);

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

@@ -0,0 +1,5 @@
+import React from 'react';
+
+import { ButtonGroup } from '../..';
+
+export const Actions = (props) => <ButtonGroup mb='neg-x2' medium {...props}/>;

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

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { Icon as FuselageIcon, ButtonGroup } from '../..';
+
+const Item = ({ selected, highlighted, clickable, ...props }) => <div className={[
+  'rc-box rcx-box--full rcx-sidebar-item',
+  highlighted && 'rcx-sidebar-item--highlighted',
+  clickable && 'rcx-sidebar-item--clickable',
+  selected && 'rcx-sidebar-item--selected',
+].filter(Boolean).join(' ')} {...props} />;
+
+const Container = (props) => <div className='rc-box rcx-box--full rcx-sidebar-item__container' {...props}/>;
+
+const Content = (props) => <div className='rc-box rcx-box--full rcx-sidebar-item__container rcx-sidebar-item__content' {...props}/>;
+
+const Title = (props) => <div className='rc-box rcx-box--full rcx-sidebar-item__title' {...props}/>;
+
+const Subtitle = (props) => <div className='rc-box rcx-box--full rcx-sidebar-item__subtitle' {...props}/>;
+
+const Wrapper = (props) => <div className='rc-box rcx-box--full rcx-sidebar-item__wrapper' {...props}/>;
+
+const Icon = (props) => <FuselageIcon w='x12' mi='x4' size='x16' {...props} />;
+
+const Avatar = (props) => <Container><div className='rc-box rcx-box--full rcx-sidebar-item__avatar' {...props}/></Container>;
+
+const Actions = (props) => <ButtonGroup small {...props}/>;
+
+Object.assign(Item, {
+  Container,
+  Content,
+  Title,
+  Subtitle,
+  Wrapper,
+  Icon,
+  Avatar,
+  Actions,
+});
+
+export default Item;

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

@@ -0,0 +1,65 @@
+import { Meta, Canvas, Story } from '@storybook/addon-docs/blocks';
+
+import { ActionButton, Avatar } from '../..';
+import Item from './Item';
+
+<Meta title='Sidebar/Item' parameters={{ jest: ['Sidebar/spec'] }} />
+
+# Sidebar.Item
+
+Item component to be used inside Sidebar.
+
+<Canvas>
+  <Story name='Default'>
+    <Item>
+      <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>
+      <Item.Content>
+        <Item.Icon name='lock'/>
+        <Item.Title>ddsfoasdhfiuashd ousadhfiuasdhfiuashd  soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh</Item.Title>
+      </Item.Content>
+      <Item.Container>
+        <Item.Actions>
+          <ActionButton primary success icon='phone'/>
+          <ActionButton primary danger icon='circle-cross'/>
+          <ActionButton primary icon='trash'/>
+          <ActionButton icon='phone'/>
+        </Item.Actions>
+      </Item.Container>
+    </Item>
+    <Item selected clickable>
+      <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>
+      <Item.Content>
+        <Item.Icon name='lock'/>
+        <Item.Title>ddsfoasdhfiuashd ousadhfiuasdhfiuashd  soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh</Item.Title>
+      </Item.Content>
+      <Item.Container>
+        <Item.Actions>
+          <ActionButton primary success icon='phone'/>
+          <ActionButton primary danger icon='circle-cross'/>
+          <ActionButton primary icon='trash'/>
+          <ActionButton icon='phone'/>
+        </Item.Actions>
+      </Item.Container>
+    </Item>
+    <Item clickable>
+      <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>
+      <Item.Content>
+        <Item.Wrapper>
+          <Item.Icon name='lock'/>
+          <Item.Title>ddsfoasdhfiuashd ousadhfiuasdhfiuashd  soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh</Item.Title>
+        </Item.Wrapper>
+        <Item.Wrapper>
+          <Item.Subtitle>ddsfoasdhfiuashd ousadhfiuasdhfiuashd  soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh</Item.Subtitle>
+        </Item.Wrapper>
+      </Item.Content>
+      <Item.Container>
+        <Item.Actions>
+          <ActionButton primary success icon='phone'/>
+          <ActionButton primary danger icon='circle-cross'/>
+          <ActionButton primary icon='trash'/>
+          <ActionButton icon='phone'/>
+        </Item.Actions>
+      </Item.Container>
+    </Item>
+  </Story>
+</Canvas>

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

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export const Title = (props) => <div className='rcx-box rcx-box--full rcx-sidebar-title' {...props}/>;
+
+
+export default {
+  Title,
+};

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

@@ -0,0 +1,81 @@
+import { Meta, Canvas, Story } from '@storybook/addon-docs/blocks';
+
+import Sidebar from '.';
+import { ActionButton, Avatar } from '../..';
+
+<Meta title='Sidebar' parameters={{ jest: ['Sidebar/spec'] }} />
+
+# Sidebar
+
+<Canvas>
+  <Story name='Default'>
+    <Sidebar.TopBar.Section>
+      <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 } />
+      <Sidebar.TopBar.Actions>
+        <Sidebar.TopBar.Action icon='home'/>
+        <Sidebar.TopBar.Action icon='magnifier'/>
+        <Sidebar.TopBar.Action icon='globe'/>
+        <Sidebar.TopBar.Action icon='sort'/>
+        <Sidebar.TopBar.Action icon='edit-rounded'/>
+      </Sidebar.TopBar.Actions>
+    </Sidebar.TopBar.Section>
+    <Sidebar.TopBar.ToolBox>
+      <Sidebar.TopBar.Title>Title</Sidebar.TopBar.Title>
+      <Sidebar.TopBar.Actions>
+        <Sidebar.TopBar.Action success icon='phone'/>
+        <Sidebar.TopBar.Action icon='message-disabled'/>
+      </Sidebar.TopBar.Actions>
+    </Sidebar.TopBar.ToolBox>
+    <Sidebar.Section.Title>Calls</Sidebar.Section.Title>
+    <Sidebar.Item>
+      <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>
+      <Sidebar.Item.Content>
+        <Sidebar.Item.Icon name='lock'/>
+        <Sidebar.Item.Title>ddsfoasdhfiuashd ousadhfiuasdhfiuashd  soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh</Sidebar.Item.Title>
+      </Sidebar.Item.Content>
+      <Sidebar.Item.Container>
+        <Sidebar.Item.Actions>
+          <ActionButton primary success icon='phone'/>
+          <ActionButton primary danger icon='circle-cross'/>
+          <ActionButton primary icon='trash'/>
+          <ActionButton icon='phone'/>
+        </Sidebar.Item.Actions>
+      </Sidebar.Item.Container>
+    </Sidebar.Item>
+    <Sidebar.Item selected clickable>
+      <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>
+      <Sidebar.Item.Content>
+        <Sidebar.Item.Icon name='lock'/>
+        <Sidebar.Item.Title>ddsfoasdhfiuashd ousadhfiuasdhfiuashd  soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh</Sidebar.Item.Title>
+      </Sidebar.Item.Content>
+      <Sidebar.Item.Container>
+        <Sidebar.Item.Actions>
+          <ActionButton primary success icon='phone'/>
+          <ActionButton primary danger icon='circle-cross'/>
+          <ActionButton primary icon='trash'/>
+          <ActionButton icon='phone'/>
+        </Sidebar.Item.Actions>
+      </Sidebar.Item.Container>
+    </Sidebar.Item>
+    <Sidebar.Item clickable>
+      <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>
+      <Sidebar.Item.Content>
+        <Sidebar.Item.Wrapper>
+          <Sidebar.Item.Icon name='lock'/>
+          <Sidebar.Item.Title>ddsfoasdhfiuashd ousadhfiuasdhfiuashd  soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh</Sidebar.Item.Title>
+        </Sidebar.Item.Wrapper>
+        <Sidebar.Item.Wrapper>
+          <Sidebar.Item.Subtitle>ddsfoasdhfiuashd ousadhfiuasdhfiuashd  soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh</Sidebar.Item.Subtitle>
+        </Sidebar.Item.Wrapper>
+      </Sidebar.Item.Content>
+      <Sidebar.Item.Container>
+        <Sidebar.Item.Actions>
+          <ActionButton primary success icon='phone'/>
+          <ActionButton primary danger icon='circle-cross'/>
+          <ActionButton primary icon='trash'/>
+          <ActionButton icon='phone'/>
+        </Sidebar.Item.Actions>
+      </Sidebar.Item.Container>
+    </Sidebar.Item>
+  </Story>
+</Canvas>

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

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { ActionButton, Divider, Box } from '../..';
+import { Actions } from './Actions';
+
+const Avatar = { size: 'x24' };
+
+const TopBar = ({ modifier, className, ...props }) => <div className={ `rc-box rc-box--full rcx-sidebar-topbar ${ className }` } {...props} />;
+
+const Wrapper = ({ children }) => <div className='rc-box rc-box--full rcx-sidebar-topbar__wrapper' children={children} />;
+
+TopBar.ToolBox = ({ children, ...props }) =>
+  <TopBar className='rcx-sidebar-topbar--toolbox'{...props}>
+    <TopBar.Wrapper children={children} />
+    <TopBar.Divider />
+  </TopBar>;
+
+TopBar.Section = ({ children, ...props }) =>
+  <TopBar className='rcx-sidebar-topbar--section' {...props}>
+    <TopBar.Wrapper children={children} />
+    <TopBar.Divider />
+  </TopBar>;
+
+TopBar.Wrapper = Wrapper;
+TopBar.Avatar = Avatar;
+TopBar.Actions = Actions;
+TopBar.Action = (props) => <ActionButton ghost {...props}/>;
+TopBar.Divider = () => <Divider mbs='neg-x2' mbe={0} />;
+TopBar.Title = (props) => <Box fontScale='p2' color='default' withTruncatedText {...props} />;
+
+export default TopBar;

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

@@ -0,0 +1,42 @@
+import { Meta, Canvas, Story } from '@storybook/addon-docs/blocks';
+
+import { Avatar } from '../..';
+import TopBar from './TopBar';
+
+<Meta title='Sidebar/TopBar' parameters={{ jest: ['Sidebar/spec'] }} />
+
+# Sidebar.Topbar
+
+Sidebar TopBar and ToolBox.
+
+<Canvas>
+  <Story name='Default'>
+    <TopBar.Section>
+      <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 } />
+      <TopBar.Actions>
+        <TopBar.Action icon='home'/>
+        <TopBar.Action icon='magnifier'/>
+        <TopBar.Action icon='globe'/>
+        <TopBar.Action icon='sort'/>
+        <TopBar.Action icon='edit-rounded'/>
+      </TopBar.Actions>
+    </TopBar.Section>
+    <TopBar.ToolBox>
+      <TopBar.Title>Title</TopBar.Title>
+      <TopBar.Actions>
+        <TopBar.Action success icon='phone'/>
+        <TopBar.Action icon='message-disabled'/>
+      </TopBar.Actions>
+    </TopBar.ToolBox>
+    <TopBar.ToolBox>
+      <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>
+      <TopBar.Actions>
+        <TopBar.Action icon='dialpad'/>
+        <TopBar.Action success icon='phone'/>
+        <TopBar.Action danger icon='phone-off'/>
+        <TopBar.Action icon='message'/>
+        <TopBar.Action icon='contact'/>
+      </TopBar.Actions>
+    </TopBar.ToolBox>
+  </Story>
+</Canvas>