diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Icon_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Icon_Default.png index 67444d46bf..1bc45a4198 100644 Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Icon_Default.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Icon_Default.png differ diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Containers_Sidebar_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Containers_Sidebar_Default.png new file mode 100644 index 0000000000..1fa0831571 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Containers_Sidebar_Default.png differ diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Containers_Sidebar_Item_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Containers_Sidebar_Item_Default.png new file mode 100644 index 0000000000..516a8020c1 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Containers_Sidebar_Item_Default.png differ diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Containers_Sidebar_SidebarItem_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Containers_Sidebar_SidebarItem_Default.png new file mode 100644 index 0000000000..516a8020c1 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Containers_Sidebar_SidebarItem_Default.png differ diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Containers_Sidebar_TopBar_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Containers_Sidebar_TopBar_Default.png new file mode 100644 index 0000000000..b742fb83cd Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Containers_Sidebar_TopBar_Default.png differ diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Default.png new file mode 100644 index 0000000000..1fa0831571 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Default.png differ diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Item_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Item_Default.png new file mode 100644 index 0000000000..516a8020c1 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Item_Default.png differ diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_TopBar_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_TopBar_Default.png new file mode 100644 index 0000000000..a36c33725f Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_TopBar_Default.png differ diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Icon_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Icon_Default.png index c2afb9c6fd..3fa98b3df4 100644 Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Icon_Default.png and b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Icon_Default.png differ diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Sidebar_Containers_Sidebar_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Sidebar_Containers_Sidebar_Default.png new file mode 100644 index 0000000000..7f6bb533d2 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Sidebar_Containers_Sidebar_Default.png differ diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Sidebar_Containers_Sidebar_Item_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Sidebar_Containers_Sidebar_Item_Default.png new file mode 100644 index 0000000000..14de21e329 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Sidebar_Containers_Sidebar_Item_Default.png differ diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Sidebar_Containers_Sidebar_SidebarItem_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Sidebar_Containers_Sidebar_SidebarItem_Default.png new file mode 100644 index 0000000000..14de21e329 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Sidebar_Containers_Sidebar_SidebarItem_Default.png differ diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Sidebar_Containers_Sidebar_TopBar_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Sidebar_Containers_Sidebar_TopBar_Default.png new file mode 100644 index 0000000000..0fdeb371c2 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Sidebar_Containers_Sidebar_TopBar_Default.png differ diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Sidebar_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Sidebar_Default.png new file mode 100644 index 0000000000..7f6bb533d2 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Sidebar_Default.png differ diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Sidebar_Item_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Sidebar_Item_Default.png new file mode 100644 index 0000000000..14de21e329 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Sidebar_Item_Default.png differ diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Sidebar_TopBar_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Sidebar_TopBar_Default.png new file mode 100644 index 0000000000..fdf129188f Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Sidebar_TopBar_Default.png differ diff --git a/packages/fuselage/src/components/ButtonGroup/index.js b/packages/fuselage/src/components/ButtonGroup/index.js index d91c4b8f36..f133eba8d4 100644 --- a/packages/fuselage/src/components/ButtonGroup/index.js +++ b/packages/fuselage/src/components/ButtonGroup/index.js @@ -11,6 +11,8 @@ export function ButtonGroup({ stretch, vertical, wrap, + small, + medium, ...props }) { return & { + margin-inline: lengths.margin(4); + } + .rcx-button-group--wrap > & { margin-block-end: lengths.margin(16); margin-inline-start: lengths.margin(none); diff --git a/packages/fuselage/src/components/Sidebar/Actions.js b/packages/fuselage/src/components/Sidebar/Actions.js new file mode 100644 index 0000000000..af33c92899 --- /dev/null +++ b/packages/fuselage/src/components/Sidebar/Actions.js @@ -0,0 +1,5 @@ +import React from 'react'; + +import { ButtonGroup } from '../..'; + +export const Actions = (props) => ; diff --git a/packages/fuselage/src/components/Sidebar/Item.js b/packages/fuselage/src/components/Sidebar/Item.js new file mode 100644 index 0000000000..d7ab641fb4 --- /dev/null +++ b/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 }) =>
; + +const Container = (props) =>
; + +const Content = (props) =>
; + +const Title = (props) =>
; + +const Subtitle = (props) =>
; + +const Wrapper = (props) =>
; + +const Icon = (props) => ; + +const Avatar = (props) =>
; + +const Actions = (props) => ; + +Object.assign(Item, { + Container, + Content, + Title, + Subtitle, + Wrapper, + Icon, + Avatar, + Actions, +}); + +export default Item; diff --git a/packages/fuselage/src/components/Sidebar/Item.stories.mdx b/packages/fuselage/src/components/Sidebar/Item.stories.mdx new file mode 100644 index 0000000000..fb3a7199d7 --- /dev/null +++ b/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'; + + + +# Sidebar.Item + +Item component to be used inside Sidebar. + + + + + + + + ddsfoasdhfiuashd ousadhfiuasdhfiuashd soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh + + + + + + + + + + + + + + + ddsfoasdhfiuashd ousadhfiuasdhfiuashd soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh + + + + + + + + + + + + + + + + ddsfoasdhfiuashd ousadhfiuasdhfiuashd soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh + + + ddsfoasdhfiuashd ousadhfiuasdhfiuashd soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh + + + + + + + + + + + + + diff --git a/packages/fuselage/src/components/Sidebar/Section.js b/packages/fuselage/src/components/Sidebar/Section.js new file mode 100644 index 0000000000..2d78cddac2 --- /dev/null +++ b/packages/fuselage/src/components/Sidebar/Section.js @@ -0,0 +1,8 @@ +import React from 'react'; + +export const Title = (props) =>
; + + +export default { + Title, +}; diff --git a/packages/fuselage/src/components/Sidebar/Sidebar.stories.mdx b/packages/fuselage/src/components/Sidebar/Sidebar.stories.mdx new file mode 100644 index 0000000000..4917d51c97 --- /dev/null +++ b/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 '../..'; + + + +# Sidebar + + + + + + + + + + + + + + + Title + + + + + + Calls + + + + + ddsfoasdhfiuashd ousadhfiuasdhfiuashd soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh + + + + + + + + + + + + + + + ddsfoasdhfiuashd ousadhfiuasdhfiuashd soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh + + + + + + + + + + + + + + + + ddsfoasdhfiuashd ousadhfiuasdhfiuashd soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh + + + ddsfoasdhfiuashd ousadhfiuasdhfiuashd soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh + + + + + + + + + + + + + diff --git a/packages/fuselage/src/components/Sidebar/TopBar.js b/packages/fuselage/src/components/Sidebar/TopBar.js new file mode 100644 index 0000000000..6fb73d2971 --- /dev/null +++ b/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 }) =>
; + +const Wrapper = ({ children }) =>
; + +TopBar.ToolBox = ({ children, ...props }) => + + + + ; + +TopBar.Section = ({ children, ...props }) => + + + + ; + +TopBar.Wrapper = Wrapper; +TopBar.Avatar = Avatar; +TopBar.Actions = Actions; +TopBar.Action = (props) => ; +TopBar.Divider = () => ; +TopBar.Title = (props) => ; + +export default TopBar; diff --git a/packages/fuselage/src/components/Sidebar/TopBar.stories.mdx b/packages/fuselage/src/components/Sidebar/TopBar.stories.mdx new file mode 100644 index 0000000000..3182a243b2 --- /dev/null +++ b/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'; + + + +# Sidebar.Topbar + +Sidebar TopBar and ToolBox. + + + + + + + + + + + + + + + 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 + + + + + + + + + + diff --git a/packages/fuselage/src/components/Sidebar/index.js b/packages/fuselage/src/components/Sidebar/index.js new file mode 100644 index 0000000000..ce446cf5ed --- /dev/null +++ b/packages/fuselage/src/components/Sidebar/index.js @@ -0,0 +1,14 @@ +import React from 'react'; + +import { Box } from '..'; +import Item from './Item'; +import Section from './Section'; +import TopBar from './TopBar'; + +export const Sidebar = (props) => ; + +Sidebar.TopBar = TopBar; +Sidebar.Item = Item; +Sidebar.Section = Section; + +export default Sidebar; diff --git a/packages/fuselage/src/components/Sidebar/styles.scss b/packages/fuselage/src/components/Sidebar/styles.scss new file mode 100644 index 0000000000..33106348d8 --- /dev/null +++ b/packages/fuselage/src/components/Sidebar/styles.scss @@ -0,0 +1,118 @@ +@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 { + &-topbar { + color: $sidebar-item-color; + + &--section { + padding-block-start: lengths.padding(4); + } + + &__wrapper { + display: flex; + justify-content: space-between; + align-items: center; + + padding-block: lengths.padding(16); + padding-inline: lengths.padding(16); + } + } + + &-item { + @extend %sidebar-base; + padding-block: lengths.padding(4); + padding-inline: lengths.padding(16); + + color: $sidebar-item-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 auto; + } + + &__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; + } + } + + &-title { + @include typography.use-font-scale(c2); + padding-block: lengths.padding(12); + padding-inline: lengths.padding(16); + + color: colors.foreground(info); + } +} diff --git a/packages/fuselage/src/components/index.js b/packages/fuselage/src/components/index.js index 7b1a9e76b0..97bdbb4eec 100644 --- 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 index 80bde9372e..8486e3bfba 100644 --- 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 index 4236b358eb..889e1a8b9f 100644 --- 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; +} diff --git a/packages/icons/glyphsMapping.json b/packages/icons/glyphsMapping.json index fa96667da2..4d50607739 100644 --- a/packages/icons/glyphsMapping.json +++ b/packages/icons/glyphsMapping.json @@ -682,5 +682,14 @@ }, "stack": { "start": "\ue0b4" + }, + "contact": { + "start": "\ue0b5" + }, + "phone-off": { + "start": "\ue0b6" + }, + "message-disabled": { + "start": "\ue0b7" } } \ No newline at end of file diff --git a/packages/icons/src/contact.svg b/packages/icons/src/contact.svg new file mode 100644 index 0000000000..ef829c75ab --- /dev/null +++ b/packages/icons/src/contact.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/legacy/message-disabled.svg b/packages/icons/src/legacy/message-disabled.svg new file mode 100644 index 0000000000..5f3810854d --- /dev/null +++ b/packages/icons/src/legacy/message-disabled.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/phone-off.svg b/packages/icons/src/phone-off.svg new file mode 100644 index 0000000000..63fe81a2fb --- /dev/null +++ b/packages/icons/src/phone-off.svg @@ -0,0 +1,3 @@ + + +