feat(fuselage): Contextualbar component (#749)

Co-authored-by: dougfabris <devfabris@gmail.com>

Author: PedroRorato

packages/fuselage/src/components/Contextualbar/Contextualbar.stories.tsx

@@ -0,0 +1,91 @@
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import React from 'react';
+
+import {
+  Contextualbar,
+  ContextualbarAction,
+  ContextualbarActions,
+  ContextualbarButton,
+  ContextualbarContent,
+  ContextualbarEmptyContent,
+  ContextualbarFooter,
+  ContextualbarHeader,
+  ContextualbarSkeleton,
+  ContextualbarTitle,
+} from '.';
+import { Button, ButtonGroup, IconButton, Box } from '..';
+
+export default {
+  title: 'Containers/Contextualbar',
+  component: Contextualbar,
+  parameters: {
+    docs: {
+      description: {
+        component: `The \`Contextualbar\` has the purpose to persist and input information about the scope of the related page.
+				`,
+      },
+    },
+  },
+  decorators: [
+    (storyFn) => (
+      <Box width='x400' elevation='2'>
+        {storyFn()}
+      </Box>
+    ),
+  ],
+} as ComponentMeta<typeof Contextualbar>;
+
+export const Default: ComponentStory<typeof Contextualbar> = () => (
+  <Contextualbar position='static' height='x540'>
+    <ContextualbarHeader>
+      <ContextualbarAction name='chevron-right' />
+      <ContextualbarAction title='Back' name='arrow-back' />
+      <ContextualbarTitle>Contextualbar Title</ContextualbarTitle>
+      <ContextualbarActions>
+        <ContextualbarAction
+          title='Title'
+          name='new-window'
+          onClick={() => {}}
+        />
+        <ContextualbarAction
+          name='add-user'
+          onClick={() => console.log('close')}
+        />
+      </ContextualbarActions>
+    </ContextualbarHeader>
+    <ContextualbarContent>Contextualbar Content</ContextualbarContent>
+    <ContextualbarFooter>
+      <ButtonGroup>
+        <ContextualbarButton width='full' secondary>
+          Cancel
+        </ContextualbarButton>
+        <Button width='full' primary>
+          Save
+        </Button>
+        <IconButton icon='menu' />
+      </ButtonGroup>
+    </ContextualbarFooter>
+  </Contextualbar>
+);
+
+export const Skeleton: ComponentStory<typeof Contextualbar> = () => (
+  <ContextualbarSkeleton position='static' height='x540' />
+);
+
+export const Empty: ComponentStory<typeof Contextualbar> = () => (
+  <Contextualbar position='static' height='x540'>
+    <ContextualbarHeader>
+      <ContextualbarAction name='chevron-right' />
+      <ContextualbarTitle>Contextualbar Empty</ContextualbarTitle>
+      <ContextualbarActions>
+        <ContextualbarAction
+          title='Title'
+          name='new-window'
+          onClick={() => {}}
+        />
+      </ContextualbarActions>
+    </ContextualbarHeader>
+    <ContextualbarEmptyContent />
+    <ContextualbarFooter>Footer</ContextualbarFooter>
+  </Contextualbar>
+);

packages/fuselage/src/components/Contextualbar/Contextualbar.tsx

@@ -0,0 +1,34 @@
+import type { ComponentProps } from 'react';
+import React, { memo } from 'react';
+
+import { Box } from '..';
+
+type ContextualbarProps = ComponentProps<typeof Box>;
+
+const Contextualbar = ({
+  children,
+  width,
+  position,
+  bg = 'room',
+  ...props
+}: ContextualbarProps) => (
+  <Box
+    rcx-vertical-bar
+    bg={bg}
+    display='flex'
+    flexDirection='column'
+    flexShrink={0}
+    width={width}
+    borderInlineStartWidth='default'
+    borderInlineStartColor='extra-light'
+    borderInlineStartStyle='solid'
+    height='full'
+    position={position}
+    zIndex={5}
+    {...props}
+  >
+    {children}
+  </Box>
+);
+
+export default memo(Contextualbar);

packages/fuselage/src/components/Contextualbar/ContextualbarAction.tsx

@@ -0,0 +1,18 @@
+import type { ReactElement, ComponentProps } from 'react';
+import React, { memo } from 'react';
+
+import type { Icon } from '..';
+import { IconButton } from '..';
+
+type ContextualbarActionProps = {
+  name: ComponentProps<typeof Icon>['name'];
+} & Omit<ComponentProps<typeof IconButton>, 'icon'>;
+
+const ContextualbarAction = ({
+  name,
+  ...props
+}: ContextualbarActionProps): ReactElement => (
+  <IconButton flexShrink={0} icon={name} {...props} tiny />
+);
+
+export default memo(ContextualbarAction);

packages/fuselage/src/components/Contextualbar/ContextualbarActions.tsx

@@ -0,0 +1,10 @@
+import type { ReactElement, ComponentProps } from 'react';
+import React, { memo } from 'react';
+
+import { ButtonGroup } from '..';
+
+const ContextualbarActions = (
+  props: ComponentProps<typeof ButtonGroup>
+): ReactElement => <ButtonGroup {...props} />;
+
+export default memo(ContextualbarActions);

packages/fuselage/src/components/Contextualbar/ContextualbarButton.tsx

@@ -0,0 +1,10 @@
+import type { ComponentProps, ReactElement } from 'react';
+import React, { memo } from 'react';
+
+import { Button } from '..';
+
+const ContextualbarButton = (
+  props: ComponentProps<typeof Button>
+): ReactElement => <Button {...props} />;
+
+export default memo(ContextualbarButton);

packages/fuselage/src/components/Contextualbar/ContextualbarContent.tsx

@@ -0,0 +1,24 @@
+import type { ComponentProps } from 'react';
+import React, { forwardRef, memo } from 'react';
+
+import { Box } from '..';
+
+const ContextualbarContent = forwardRef<
+  HTMLElement,
+  ComponentProps<typeof Box>
+>(function ContextualbarContent(props, ref) {
+  return (
+    <Box
+      ref={ref}
+      rcx-vertical-bar__content
+      paddingInline='x24'
+      display='flex'
+      flexDirection='column'
+      overflowY='hidden'
+      height='full'
+      {...props}
+    />
+  );
+});
+
+export default memo(ContextualbarContent);

packages/fuselage/src/components/Contextualbar/ContextualbarEmptyContent.tsx

@@ -0,0 +1,32 @@
+import type { ComponentProps } from 'react';
+import React, { forwardRef, memo } from 'react';
+
+import type { Box } from '..';
+import { StatesIcon, States, StatesTitle, StatesSubtitle } from '..';
+import ContextualbarContent from './ContextualbarContent';
+
+type ContextualbarEmptyContentProps = ComponentProps<typeof Box> & {
+  icon?: ComponentProps<typeof StatesIcon>['name'];
+  title?: string;
+  subtitle?: string;
+};
+
+const ContextualbarEmptyContent = forwardRef<
+  HTMLElement,
+  ContextualbarEmptyContentProps
+>(function ContextualbarEmptyContent(
+  { icon = 'magnifier', title = 'Nothing Found', subtitle, ...props },
+  ref
+) {
+  return (
+    <ContextualbarContent justifyContent='center' {...props} ref={ref}>
+      <States>
+        <StatesIcon name={icon} />
+        <StatesTitle>{title}</StatesTitle>
+        {subtitle && <StatesSubtitle>{subtitle}</StatesSubtitle>}
+      </States>
+    </ContextualbarContent>
+  );
+});
+
+export default memo(ContextualbarEmptyContent);

packages/fuselage/src/components/Contextualbar/ContextualbarFooter.tsx

@@ -0,0 +1,16 @@
+import type { ComponentProps } from 'react';
+import React, { forwardRef, memo } from 'react';
+
+import { Box } from '..';
+
+const ContextualbarFooter = forwardRef<HTMLElement, ComponentProps<typeof Box>>(
+  function ContextualbarFooter({ children, ...props }, ref) {
+    return (
+      <Box is='footer' p='x24' {...props} ref={ref}>
+        {children}
+      </Box>
+    );
+  }
+);
+
+export default memo(ContextualbarFooter);

packages/fuselage/src/components/Contextualbar/ContextualbarHeader.tsx

@@ -0,0 +1,39 @@
+import type { ComponentProps } from 'react';
+import React, { memo } from 'react';
+
+import Box from '../Box';
+import Margins from '../Margins';
+
+type ContextualbarHeaderProps = ComponentProps<typeof Box>;
+
+const ContextualbarHeader = ({
+  children,
+  ...props
+}: ContextualbarHeaderProps) => (
+  <Box
+    display='flex'
+    alignItems='center'
+    height='56px'
+    is='h3'
+    pi='x24'
+    borderBlockEndWidth='default'
+    borderBlockColor='extra-light'
+    flexShrink={0}
+    {...props}
+  >
+    <Box
+      marginInline='neg-x4'
+      display='flex'
+      alignItems='center'
+      justifyContent='space-between'
+      fontScale='h4'
+      flexGrow={1}
+      overflow='hidden'
+      color='default'
+    >
+      <Margins inline='x4'>{children}</Margins>
+    </Box>
+  </Box>
+);
+
+export default memo(ContextualbarHeader);

packages/fuselage/src/components/Contextualbar/ContextualbarIcon.tsx

@@ -0,0 +1,10 @@
+import type { ReactElement, ComponentProps } from 'react';
+import React, { memo } from 'react';
+
+import { Icon } from '..';
+
+const ContextualbarIcon = (
+  props: ComponentProps<typeof Icon>
+): ReactElement => <Icon {...props} pi='x2' size='x24' />;
+
+export default memo(ContextualbarIcon);

packages/fuselage/src/components/Contextualbar/ContextualbarSkeleton.tsx

@@ -0,0 +1,25 @@
+import type { ReactElement, ComponentProps } from 'react';
+import React, { memo } from 'react';
+
+import { Contextualbar, ContextualbarHeader } from '.';
+import { Box, Skeleton } from '..';
+
+const ContextualbarSkeleton = (
+  props: ComponentProps<typeof Box>
+): ReactElement => (
+  <Contextualbar {...props} width='100%'>
+    <ContextualbarHeader>
+      <Skeleton width='100%' />
+    </ContextualbarHeader>
+    <Box p='x24'>
+      <Skeleton mbe='x4' width='32px' height='32px' variant='rect' />
+      {Array(5)
+        .fill(5)
+        .map((_, index) => (
+          <Skeleton key={index} />
+        ))}
+    </Box>
+  </Contextualbar>
+);
+
+export default memo(ContextualbarSkeleton);

packages/fuselage/src/components/Contextualbar/ContextualbarTitle.tsx

@@ -0,0 +1,12 @@
+import type { ReactElement, ComponentProps } from 'react';
+import React, { memo } from 'react';
+
+import { Box } from '..';
+
+const ContextualbarTitle = (
+  props: ComponentProps<typeof Box>
+): ReactElement => (
+  <Box flexShrink={1} flexGrow={1} withTruncatedText {...props} />
+);
+
+export default memo(ContextualbarTitle);

packages/fuselage/src/components/Contextualbar/index.ts

@@ -0,0 +1,25 @@
+import Contextualbar from './Contextualbar';
+import ContextualbarAction from './ContextualbarAction';
+import ContextualbarActions from './ContextualbarActions';
+import ContextualbarButton from './ContextualbarButton';
+import ContextualbarContent from './ContextualbarContent';
+import ContextualbarEmptyContent from './ContextualbarEmptyContent';
+import ContextualbarFooter from './ContextualbarFooter';
+import ContextualbarHeader from './ContextualbarHeader';
+import ContextualbarIcon from './ContextualbarIcon';
+import ContextualbarSkeleton from './ContextualbarSkeleton';
+import ContextualbarTitle from './ContextualbarTitle';
+
+export {
+  Contextualbar,
+  ContextualbarAction,
+  ContextualbarActions,
+  ContextualbarButton,
+  ContextualbarContent,
+  ContextualbarEmptyContent,
+  ContextualbarFooter,
+  ContextualbarHeader,
+  ContextualbarIcon,
+  ContextualbarSkeleton,
+  ContextualbarTitle,
+};

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

@@ -8,6 +8,8 @@
 
   animation: rcx-skeleton__animation 1s linear 0s infinite running;
 
+  border-radius: lengths.border-radius(medium);
+
   background-color: colors.stroke(extra-dark);
 
   &--text {
@@ -17,8 +19,6 @@
     transform: scale(1, 0.6);
     transform-origin: 0 60%;
 
-    border-radius: lengths.border-radius(medium);
-
     &:empty::before {
       content: '\00a0';
     }

packages/fuselage/src/components/index.ts

@@ -13,6 +13,7 @@ export * from './Callout';
 export * from './CheckBox';
 export * from './Chevron';
 export { default as CodeSnippet } from './CodeSnippet';
+export * from './Contextualbar';
 export { default as Chip } from './Chip';
 export * from './Divider';
 export * from './Dropdown';