Merge pull request #781 from glints-dev/feature/next-bar

add bar component

Author: skurnia001

src/@next/Bar/Bar.stories.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
+import { Bar, BarProps } from './Bar';
+import { Colors, Typography } from '..';
+import { StyledCustomHeadingWrapper } from './BarStyle';
+
+(Bar as React.FunctionComponent<BarProps>).displayName = 'Bar';
+
+export default {
+  title: '@next/Bar',
+  component: Bar,
+  decorators: [
+    Story => (
+      <BaseContainer style={{ height: '200px' }}>{Story()}</BaseContainer>
+    ),
+  ],
+} as Meta;
+
+const Template: Story<BarProps> = args => {
+  const primaryAction = {
+    label: 'Yes',
+    action: () => console.log('Primary action!'),
+  };
+  const secondaryAction = {
+    label: 'No',
+    action: () => console.log('Secondary action!'),
+  };
+  const tertiaryAction = {
+    label: 'No',
+    action: () => console.log('Tertiary action!'),
+  };
+  return (
+    <Bar
+      {...args}
+      primaryAction={primaryAction}
+      secondaryAction={secondaryAction}
+      tertiaryAction={tertiaryAction}
+    />
+  );
+};
+
+export const Interactive = Template.bind({});
+Interactive.args = {
+  heading: 'Heading',
+  subheading: 'SubHeading',
+  position: 'top',
+};
+Interactive.parameters = {
+  docs: {
+    source: {
+      code: `
+      <Bar
+      heading="Heading"
+      primaryAction={{
+        action: () => {console.log('Primary action!')},
+        label: 'Yes'
+      }}
+      secondaryAction={{
+        action: () => {console.log('Secondary action!')},
+        label: 'No'
+      }}
+      subheading="Subheading"
+      tertiaryAction={{
+        action: () => {console.log('Tertiary action!')},
+        label: 'No'
+      }}
+    />
+    `,
+    },
+    language: 'javascript',
+    type: 'auto',
+  },
+};
+
+const PrimaryActionOnlyTemplate: Story<BarProps> = args => {
+  const primaryAction = {
+    label: 'Yes',
+    action: () => console.log('Primary action!'),
+  };
+  return <Bar {...args} primaryAction={primaryAction} />;
+};
+
+export const PrimaryActionOnly = PrimaryActionOnlyTemplate.bind({});
+PrimaryActionOnly.args = {
+  heading: 'Heading',
+};
+
+const CustomHeadingTemplate: Story<BarProps> = args => {
+  const headingMarkup = (
+    <StyledCustomHeadingWrapper>
+      <Typography as="span">Status:</Typography>
+      <Typography as="span" color={Colors.Orange.S86}>
+        DRAFT
+      </Typography>
+    </StyledCustomHeadingWrapper>
+  );
+  const primaryAction = {
+    label: 'Yes',
+    action: () => console.log('Yes'),
+  };
+  const secondaryAction = {
+    label: 'No',
+    action: () => console.log('No'),
+  };
+
+  return (
+    <Bar
+      {...args}
+      heading={headingMarkup}
+      subheading={'Autosaved to draft'}
+      primaryAction={primaryAction}
+      secondaryAction={secondaryAction}
+    />
+  );
+};
+
+export const CustomHeading = CustomHeadingTemplate.bind({});

src/@next/Bar/Bar.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Breakpoints, Colors } from '..';
+import { ComponentAction } from '../../types/componentAction';
+import { Button, PrimaryButton } from '../Button';
+import { ButtonGroup } from '../ButtonGroup';
+import { Typography } from '../Typography';
+import {
+  StyledBarActionWrapper,
+  StyledBar,
+  StyledBarHeaderWrapper,
+  StyledBarContainer,
+} from './BarStyle';
+import { useWindowSize } from './useWindowSize';
+
+export type BarProps = {
+  heading: React.ReactNode;
+  subheading?: React.ReactNode;
+  primaryAction: ComponentAction;
+  secondaryAction?: ComponentAction;
+  tertiaryAction?: ComponentAction;
+  position?: 'top' | 'bottom';
+};
+
+export const Bar = React.forwardRef<HTMLDivElement, BarProps>(function Bar(
+  {
+    heading,
+    subheading,
+    primaryAction,
+    secondaryAction,
+    tertiaryAction,
+    position,
+  }: BarProps,
+  ref
+) {
+  const headerMarkup = () => {
+    if (subheading) {
+      return (
+        <>
+          <Typography as="div" variant="body2" color={Colors.Neutral.B18}>
+            {heading}
+          </Typography>
+          <Typography as="div" variant="subtitle2" color={Colors.Neutral.B40}>
+            {subheading}
+          </Typography>
+        </>
+      );
+    }
+    return (
+      <Typography as="div" variant="headline6" color={Colors.Neutral.B18}>
+        {heading}
+      </Typography>
+    );
+  };
+  const { width } = useWindowSize();
+  const breakpointWidth = parseInt(Breakpoints.large.slice(0, -2));
+  const buttonSize: 'default' | 'large' =
+    width <= breakpointWidth ? 'default' : 'large';
+
+  return (
+    <StyledBar data-align={position} ref={ref}>
+      <StyledBarContainer>
+        <StyledBarHeaderWrapper>{headerMarkup()} </StyledBarHeaderWrapper>
+        <StyledBarActionWrapper>
+          <ButtonGroup>
+            {tertiaryAction && (
+              <Button onClick={tertiaryAction.action} size={buttonSize}>
+                {tertiaryAction.label}
+              </Button>
+            )}
+            {secondaryAction && (
+              <Button onClick={secondaryAction.action} size={buttonSize}>
+                {secondaryAction.label}
+              </Button>
+            )}
+            <PrimaryButton onClick={primaryAction.action} size={buttonSize}>
+              {primaryAction.label}
+            </PrimaryButton>
+          </ButtonGroup>
+        </StyledBarActionWrapper>
+      </StyledBarContainer>
+    </StyledBar>
+  );
+});

src/@next/Bar/BarStyle.ts

@@ -0,0 +1,69 @@
+import styled from 'styled-components';
+import * as Breakpoints from '../utilities/breakpoints';
+import { Neutral } from '../utilities/colors';
+import { space8 } from '../utilities/spacing';
+
+export const StyledBar = styled.div`
+  display: flex;
+  flex-direction: row;
+  padding: 20px 0;
+  width: 100%;
+  position: absolute;
+  height: 90px;
+
+  @media (max-width: ${Breakpoints.large}) {
+    height: 70px;
+  }
+
+  &[data-align='bottom'] {
+    bottom: 0;
+  }
+  &[data-align='top'] {
+    top: 0;
+  }
+
+  box-shadow: 0px 0px 0px 1px rgba(63, 63, 68, 0.05),
+    0px 1px 3px rgba(63, 63, 68, 0.15);
+  background: ${Neutral.B100};
+`;
+
+export const StyledBarHeaderWrapper = styled.div`
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+`;
+
+export const StyledBarActionWrapper = styled.div`
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: flex-end;
+`;
+
+export const StyledBarContainer = styled.div`
+  position: relative;
+  margin: 0 auto;
+  padding: 0 50px;
+  width: 100%;
+
+  *,
+  *:before,
+  *:after {
+    box-sizing: border-box;
+  }
+
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row;
+  display: flex;
+
+  @media (max-width: ${Breakpoints.large}) {
+    gap: 16px;
+    padding: 0 24px;
+  }
+`;
+
+export const StyledCustomHeadingWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${space8};
+`;

src/@next/Bar/index.ts

@@ -0,0 +1 @@
+export * from './Bar';

src/@next/Bar/useWindowSize.tsx

@@ -0,0 +1,35 @@
+import { useState, useEffect } from 'react';
+
+// Hook
+export const useWindowSize = () => {
+  // Initialize state with undefined width/height so server and client renders match
+  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+  const [windowSize, setWindowSize] = useState({
+    width: undefined,
+    height: undefined,
+  });
+
+  useEffect(() => {
+    // Handler to call on window resize
+    function handleResize() {
+      // Set window width/height to state
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    }
+
+    // Add event listener
+    window.addEventListener('resize', handleResize);
+
+    // Call handler right away so state gets updated with initial window size
+    handleResize();
+
+    // Remove event listener on cleanup
+    return () => window.removeEventListener('resize', handleResize);
+  }, []); // Empty array ensures that effect is only run on mount
+
+  return windowSize;
+};
+
+// Taken from https://usehooks.com/useWindowSize/

src/@next/index.ts

@@ -24,6 +24,7 @@ export {
 export { Avatar, AvatarProps } from './Avatar';
 export { Badge, BadgeProps } from './Badge';
 export { Banner, BannerProps } from './Banner';
+export { Bar, BarProps } from './Bar';
 export {
   Button,
   ButtonProps,

test/e2e/bar/bar.spec.ts

@@ -0,0 +1,49 @@
+import { test, expect, Page } from '@playwright/test';
+import { StoryBookPage } from '../storybookPage';
+
+const getPage = (page: Page) =>
+  new StoryBookPage(page, '?path=/story/next-bar--interactive');
+
+test('Bar', async ({ page }) => {
+  const barPage = getPage(page);
+  await barPage.goto();
+  await expect(barPage.canvas).toHaveScreenshot('bar.png');
+});
+
+test('Bar - without subheading', async ({ page }) => {
+  const barPage = getPage(page);
+  await barPage.goto('args=subheading:!null');
+  await expect(barPage.canvas).toHaveScreenshot('bar-no-subheading.png');
+});
+
+test('Bar - position top', async ({ page }) => {
+  const barPage = getPage(page);
+  await barPage.goto('args=position:top');
+  await expect(barPage.canvas).toHaveScreenshot('bar-actions-position-top.png');
+});
+
+test('Bar - position bottom', async ({ page }) => {
+  const barPage = getPage(page);
+  await barPage.goto('args=position:bottom');
+  await expect(barPage.canvas).toHaveScreenshot(
+    'bar-actions-position-bottom.png'
+  );
+});
+
+test('Bar - primary action only', async ({ page }) => {
+  const barPage = new StoryBookPage(
+    page,
+    '?path=/story/next-bar--primary-action-only'
+  );
+  await barPage.goto();
+  await expect(barPage.canvas).toHaveScreenshot('bar-primary-action-only.png');
+});
+
+test('Bar - Custom Heading and Sub Heading', async ({ page }) => {
+  const barPage = new StoryBookPage(
+    page,
+    '?path=/story/next-bar--custom-heading'
+  );
+  await barPage.goto();
+  await expect(barPage.canvas).toHaveScreenshot('bar-custom-heading.png');
+});