feat: Sidebar Item

RocketChat · Sep 15, 2020 · a529c33 · a529c33
1 parent 080e7a0
commit a529c33
Show file tree

Hide file tree

Showing 9 changed files with 208 additions and 0 deletions.
diff --git a/...oki/reference/chrome_iphone7_Sidebar_Containers_Sidebar_SidebarItem_Default.png b/...oki/reference/chrome_iphone7_Sidebar_Containers_Sidebar_SidebarItem_Default.png
diff --git a/...loki/reference/chrome_laptop_Sidebar_Containers_Sidebar_SidebarItem_Default.png b/...loki/reference/chrome_laptop_Sidebar_Containers_Sidebar_SidebarItem_Default.png
diff --git a/packages/fuselage/src/components/Sidebar/Item.js b/packages/fuselage/src/components/Sidebar/Item.js
@@ -0,0 +1,35 @@
+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 rcx-button-group--small {...props}/>;
+
+const SidebarItem = {
+  Item,
+  Container,
+  Content,
+  Title,
+  Subtitle,
+  Wrapper,
+  Icon,
+  Avatar,
+  Actions,
+};
+
+export default SidebarItem;
diff --git a/packages/fuselage/src/components/Sidebar/Item.stories.mdx b/packages/fuselage/src/components/Sidebar/Item.stories.mdx
@@ -0,0 +1,65 @@
+import { Meta, Canvas, Story } from '@storybook/addon-docs/blocks';
+
+import { SidebarItem } from '.';
+import { ActionButton, Avatar } from '../..';
+
+<Meta title='Sidebar.Containers/Sidebar/SidebarItem' parameters={{ jest: ['Sidebar/spec'] }} />
+
+# Sidebar.Item
+
+A collapsible panel.
+
+<Canvas>
+  <Story name='Default'>
+    <SidebarItem.Item>
+      <SidebarItem.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'}/></SidebarItem.Avatar>
+      <SidebarItem.Content>
+        <SidebarItem.Icon name='lock'/>
+        <SidebarItem.Title>ddsfoasdhfiuashd ousadhfiuasdhfiuashd  soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh</SidebarItem.Title>
+      </SidebarItem.Content>
+      <SidebarItem.Container>
+        <SidebarItem.Actions>
+          <ActionButton primary success icon='phone'/>
+          <ActionButton primary danger icon='circle-cross'/>
+          <ActionButton primary icon='trash'/>
+          <ActionButton icon='phone'/>
+        </SidebarItem.Actions>
+      </SidebarItem.Container>
+    </SidebarItem.Item>
+    <SidebarItem.Item selected clickable>
+      <SidebarItem.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'}/></SidebarItem.Avatar>
+      <SidebarItem.Content>
+        <SidebarItem.Icon name='lock'/>
+        <SidebarItem.Title>ddsfoasdhfiuashd ousadhfiuasdhfiuashd  soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh</SidebarItem.Title>
+      </SidebarItem.Content>
+      <SidebarItem.Container>
+        <SidebarItem.Actions>
+          <ActionButton primary success icon='phone'/>
+          <ActionButton primary danger icon='circle-cross'/>
+          <ActionButton primary icon='trash'/>
+          <ActionButton icon='phone'/>
+        </SidebarItem.Actions>
+      </SidebarItem.Container>
+    </SidebarItem.Item>
+    <SidebarItem.Item clickable>
+      <SidebarItem.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'}/></SidebarItem.Avatar>
+      <SidebarItem.Content>
+        <SidebarItem.Wrapper>
+          <SidebarItem.Icon name='lock'/>
+          <SidebarItem.Title>ddsfoasdhfiuashd ousadhfiuasdhfiuashd  soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh</SidebarItem.Title>
+        </SidebarItem.Wrapper>
+        <SidebarItem.Wrapper>
+          <SidebarItem.Subtitle>ddsfoasdhfiuashd ousadhfiuasdhfiuashd  soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh</SidebarItem.Subtitle>
+        </SidebarItem.Wrapper>
+      </SidebarItem.Content>
+      <SidebarItem.Container>
+        <SidebarItem.Actions>
+          <ActionButton primary success icon='phone'/>
+          <ActionButton primary danger icon='circle-cross'/>
+          <ActionButton primary icon='trash'/>
+          <ActionButton icon='phone'/>
+        </SidebarItem.Actions>
+      </SidebarItem.Container>
+    </SidebarItem.Item>
+  </Story>
+</Canvas>
diff --git a/packages/fuselage/src/components/Sidebar/index.js b/packages/fuselage/src/components/Sidebar/index.js
@@ -0,0 +1,6 @@
+
+import SidebarItem from './Item';
+
+export {
+  SidebarItem,
+};
diff --git a/packages/fuselage/src/components/Sidebar/styles.scss b/packages/fuselage/src/components/Sidebar/styles.scss
@@ -0,0 +1,95 @@
+@use '../../styles/colors.scss';
+@use '../../styles/lengths.scss';
+@use '../../styles/typography.scss';
+@import '../../styles/mixins/all.scss';
+
+$sidebar-item-background-color: colors.surface();
+$sidebar-item-color: colors.foreground('hint');
+$sidebar-item-color-highlighted: colors.foreground('alternative');
+$sidebar-item-background-color-hover: colors.neutral(800);
+$sidebar-item-color-hover: colors.foreground('hint');
+$sidebar-item-background-color-selected: colors.neutral(200);
+$sidebar-item-color-selected: colors.foreground('hint');
+
+%sidebar-base {
+  display: flex;
+  align-items: center;
+
+  border-radius: lengths.border-radius(2);
+  @include typography.use-font-scale(p1);
+}
+
+%highlighted {
+  @include typography.use-font-scale(p2);
+  color: $sidebar-item-color-highlighted;
+}
+
+@mixin highlighted {
+  &--highlighted {
+    @extend %highlighted;
+  }
+}
+
+.rcx-sidebar-item {
+  @extend %sidebar-base;
+  padding-block: lengths.padding(4);
+  padding-inline: lengths.padding(16);
+
+  color: $sidebar-item-color;
+  background-color: $sidebar-item-background-color;
+
+  &--selected {
+    color: $sidebar-item-color-selected;
+    background-color: $sidebar-item-background-color-selected;
+  }
+
+  &--clickable {
+    @include clickable;
+    @include on-hover {
+      @include use-no-shadow;
+      color: $sidebar-item-color-hover;
+      background-color: $sidebar-item-background-color-hover;
+    }
+  }
+
+  &__avatar {
+    @include typography.use-with-truncated-text();
+    flex: 0 0 lengths.size(28);
+
+    width: lengths.size(28);
+    height: lengths.size(28);
+  }
+
+  &__container {
+    @extend %sidebar-base;
+    flex: 0 0 auto;
+  }
+
+  &__content {
+    @include typography.use-with-truncated-text();
+    flex-wrap: wrap;
+    flex: 1 1 100%;
+  }
+
+  &__title,
+  &__subtitle {
+    @extend %sidebar-base;
+    @include highlighted;
+    @include typography.use-with-truncated-text();
+    display: block;
+    flex: 1 1 1%;
+
+    margin-inline: lengths.padding(4);
+  }
+
+  &__subtitle {
+    @include typography.use-font-scale(c1);
+    margin-inline: lengths.padding(8);
+  }
+
+  &__wrapper {
+    @extend %sidebar-base;
+    @include typography.use-with-truncated-text();
+    display: flex;
+  }
+}
diff --git a/packages/fuselage/src/components/index.js b/packages/fuselage/src/components/index.js
@@ -29,6 +29,7 @@ export * from './RadioButton';
 export * from './SearchInput';
 export * from './Select';
 export * from './SelectInput';
+export * from './Sidebar';
 export * from './Skeleton';
 export * from './Table';
 export * from './Tabs';

diff --git a/packages/fuselage/src/components/index.scss b/packages/fuselage/src/components/index.scss
@@ -28,3 +28,4 @@
 @import './Tile/styles.scss';
 @import './ToggleSwitch/styles.scss';
 @import './Tooltip/styles.scss';
+@import './Sidebar/styles.scss';
diff --git a/packages/fuselage/src/styles/typography.scss b/packages/fuselage/src/styles/typography.scss
@@ -62,3 +62,8 @@ $font-scales: map.keys(typography.$font-scales);
 
   text-overflow: ellipsis;
 }
+
+@mixin use-with-truncated-text {
+  @include use-text-ellipsis();
+  white-space: nowrap;
+}