@ssa-ui-kit/core 0.0.27-alpha → 0.0.28-alpha

package/src/components/CollapsibleNavBar/CollapsibleNavBarBase.ts

@@ -0,0 +1,134 @@
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import NavBarBase from '@components/NavBar/NavBarBase';
+
+// TODO: refactor this
+const popupIconsToggle = (isVisible: boolean) => css`
+  & a > button {
+    display: ${isVisible ? 'block' : 'none'};
+  }
+  & > div > div > div > div:first-of-type {
+    display: ${isVisible ? 'block' : 'none'};
+    & > button {
+      display: ${isVisible ? 'block' : 'none'};
+    }
+  }
+`;
+
+// TODO: refactor this
+const staticIconsToggle = (isVisible: boolean) => css`
+  & a > div {
+    display: ${isVisible ? 'flex' : 'none'};
+  }
+  & > div > div > div > div:nth-of-type(2) {
+    display: ${isVisible ? 'flex' : 'none'};
+  }
+  & > div > div > div:nth-of-type(2) {
+    display: ${isVisible ? 'block' : 'none'};
+  }
+`;
+
+const CollapsibleNavBarBase = styled(NavBarBase)`
+  padding: 15px 0 0 15px;
+  position: absolute;
+
+  & li {
+    ${popupIconsToggle(false)}
+  }
+
+  &.opened {
+    background: linear-gradient(
+      108.3deg,
+      ${({ theme }) => theme.colors.greyDarker} -0.36%,
+      ${({ theme }) => theme.colors.greyDarker} 100%
+    );
+    align-items: flex-start;
+    min-width: 100%;
+    width: 100%;
+    height: 100%;
+
+    ${({ theme }) => theme.mediaQueries.md} {
+      height: initial;
+    }
+  }
+
+  & > input[type='checkbox'] {
+    &:checked {
+      & ~ div:first-of-type {
+        background-color: #4a4d51;
+
+        & label span {
+          opacity: 1;
+          transform: rotate(45deg) translate(-5px, -9px);
+          background: ${({ theme }) => theme.colors.white};
+
+          &:nth-last-of-type(3) {
+            opacity: 0;
+            transform: rotate(0deg) scale(0.2, 0.2);
+          }
+
+          &:nth-last-of-type(2) {
+            transform: rotate(-45deg) translate(-2px, 8px);
+          }
+        }
+      }
+
+      & ~ div:nth-of-type(2) {
+        display: block;
+        border-radius: 12px 12px 0 0;
+        height: calc(100vh - 60px);
+
+        ${({ theme }) => theme.mediaQueries.xlg} {
+          border-radius: 0;
+          height: 100vh;
+        }
+      }
+    }
+  }
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    width: 85px;
+    padding: 0;
+    position: static;
+    z-index: 0;
+    min-width: unset;
+
+    & li {
+      ${staticIconsToggle(false)}
+      ${popupIconsToggle(true)}
+    }
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    &.opened {
+      min-width: unset;
+      width: 240px;
+
+      & > div:nth-of-type(2) {
+        width: 240px;
+        padding-left: 31px;
+        & img {
+          margin-left: 0;
+        }
+        & li {
+          justify-content: flex-start;
+          & button {
+            display: flex;
+          }
+          ${staticIconsToggle(true)}
+          ${popupIconsToggle(false)}
+
+          & > a > span {
+            display: block;
+          }
+
+          & div > div > div:nth-of-type(2) {
+            display: flex;
+          }
+        }
+      }
+    }
+  }
+`;
+
+export default CollapsibleNavBarBase;

package/src/components/CollapsibleNavBar/CollapsibleNavBarItem.ts

@@ -0,0 +1,28 @@
+import styled from '@emotion/styled';
+import NavBarItem from '@components/NavBar/NavBarItem';
+
+const CollapsibleNavBarItem = styled(NavBarItem)`
+  align-items: flex-start;
+  justify-content: flex-start;
+
+  height: auto;
+  min-height: 24px;
+  padding: 12px 0;
+  &:first-of-type {
+    padding-top: 0;
+  }
+  &:last-of-type {
+    padding-bottom: 0;
+  }
+  width: 100%;
+  & > a {
+    height: 26px;
+  }
+  ${({ theme }) => theme.mediaQueries.md} {
+    justify-content: center;
+    padding: 20px 0;
+    width: 100%;
+  }
+`;
+
+export default CollapsibleNavBarItem;

package/src/components/CollapsibleNavBar/CollapsibleNavBarLink.ts

@@ -0,0 +1,40 @@
+import styled from '@emotion/styled';
+import NavBarLink from '@components/NavBar/NavBarLink';
+
+const CollapsibleNavBarLink = styled(NavBarLink)`
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 20px;
+  color: ${({ theme }) => theme.colors.white80};
+
+  svg {
+    backdrop-filter: blur(0);
+  }
+
+  &:not(.active):hover {
+    backdrop-filter: blur(0);
+    filter: ${({ theme }) =>
+      `drop-shadow(-4px 4px 14px ${theme.colors.white})`};
+    color: ${({ theme }) => theme.colors.white};
+
+    svg {
+      & path {
+        fill: ${({ theme }) => theme.colors.white};
+      }
+      & circle {
+        stroke: ${({ theme }) => theme.colors.white};
+      }
+    }
+  }
+
+  & > span {
+    color: ${({ theme }) => theme.colors.white80};
+
+    ${({ theme }) => theme.mediaQueries.md} {
+      display: none;
+    }
+  }
+`;
+
+export default CollapsibleNavBarLink;

package/src/components/CollapsibleNavBar/CollapsibleNavBarList.ts

@@ -0,0 +1,18 @@
+import styled from '@emotion/styled';
+import NavBarList from '@components/NavBar/NavBarList';
+
+const CollapsibleNavBarList = styled(NavBarList)`
+  height: auto;
+  padding: 0 0 0 15px;
+  margin: 14px 0 0 0;
+  ${({ theme }) => theme.mediaQueries.md} {
+    margin-top: 90px;
+    width: 100%;
+    padding: 0;
+  }
+  ${({ theme }) => theme.mediaQueries.lg} {
+    margin-top: 84px;
+  }
+`;
+
+export default CollapsibleNavBarList;

package/src/components/CollapsibleNavBar/CollapsibleNavBarWrapper.ts

@@ -0,0 +1,24 @@
+import styled from '@emotion/styled';
+import NavBarWrapper from '@components/NavBar/NavBarWrapper';
+
+const CollapsibleNavBarWrapper = styled(NavBarWrapper)`
+  transform: none;
+  transition: unset;
+  position: static;
+
+  display: none;
+  width: 100%;
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
+    min-height: 100vh;
+    width: 85px;
+    border-radius: 0;
+    padding-top: 35px;
+  }
+`;
+
+export default CollapsibleNavBarWrapper;

package/src/components/CollapsibleNavBar/CollapsibleNavContentToggle.tsx

@@ -0,0 +1,27 @@
+import Icon from '@components/Icon';
+import * as S from './styles';
+
+export const NavContentToggle = ({
+  id,
+  isChecked,
+}: {
+  id: string;
+  isChecked: boolean;
+}) => {
+  return (
+    <div css={S.ContentToggle}>
+      <label
+        htmlFor={id}
+        css={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          cursor: 'pointer',
+        }}>
+        <Icon name={isChecked ? 'carrot-left' : 'carrot-right'} size={14} />
+      </label>
+    </div>
+  );
+};

package/src/components/CollapsibleNavBar/CollapsibleNavToggle.tsx

@@ -0,0 +1,49 @@
+import { Fragment } from 'react';
+import { css } from '@emotion/react';
+
+import CollapsibleNavToggleWrapper from './CollapsibleNavToggleWrapper';
+
+const CollapsibleNavToggle = ({ id }: { id: string }) => {
+  return (
+    <Fragment>
+      <CollapsibleNavToggleWrapper>
+        <label
+          htmlFor={id}
+          css={css`
+            cursor: pointer;
+
+            height: 20px;
+            width: 20px;
+
+            transform: scale(-1, 1);
+
+            span {
+              height: 2px;
+              width: 100%;
+              background: black;
+              display: block;
+              margin: 4px 0;
+              transform-origin: 4px 0;
+              transition: transform 0.3s cubic-bezier(0.77, 0.2, 0.05, 1),
+                background 0.3s cubic-bezier(0.77, 0.2, 0.05, 1),
+                opacity 0.35s ease;
+
+              &:first-of-type {
+                transform-origin: 0% 0%;
+              }
+
+              &:nth-last-of-type(2) {
+                transform-origin: 0% 100%;
+              }
+            }
+          `}>
+          <span></span>
+          <span></span>
+          <span></span>
+        </label>
+      </CollapsibleNavToggleWrapper>
+    </Fragment>
+  );
+};
+
+export default CollapsibleNavToggle;

package/src/components/CollapsibleNavBar/CollapsibleNavToggleWrapper.ts

@@ -0,0 +1,16 @@
+import styled from '@emotion/styled';
+import NavToggleWrapper from '@components/NavBar/NavToggleWrapper';
+
+const CollapsibleNavToggleWrapper = styled(NavToggleWrapper)`
+  border-radius: 50%;
+  background: ${({ theme }) => theme.colors.greyLighter};
+
+  height: 40px;
+  width: 40px;
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    display: none;
+  }
+`;
+
+export default CollapsibleNavToggleWrapper;

package/src/components/CollapsibleNavBar/NavBarAccordionContent.tsx

@@ -0,0 +1,55 @@
+import styled from '@emotion/styled';
+import {
+  AccordionContent,
+  RenderContentProps,
+} from '@components/AccordionGroup';
+import CollapsibleNavBarLink from './CollapsibleNavBarLink';
+import * as S from './styles';
+
+const Link = styled(CollapsibleNavBarLink)`
+  width: 100%;
+  padding: 4.8px 0;
+
+  &:first-of-type {
+    padding-top: 15px;
+  }
+
+  &:not(.active):hover {
+    filter: initial;
+  }
+
+  &.active {
+    text-decoration: underline;
+    filter: initial;
+  }
+`;
+
+export const NavBarAccordionContent = ({
+  items,
+  accordionUniqueName,
+  prefix,
+  isPopover,
+  onClick,
+  ...rest
+}: RenderContentProps & {
+  items: Array<{ path: string; title: string }>;
+  accordionUniqueName: string;
+  prefix?: string;
+  isPopover?: boolean;
+  onClick?: () => void;
+}) => (
+  <AccordionContent
+    {...rest}
+    css={[S.AccordionContent, isPopover && S.AccordionContentPopover]}>
+    {items.map((subMenuItem) => (
+      <Link
+        key={`${accordionUniqueName}-link-${subMenuItem.title
+          .replace(' ', '')
+          .toLowerCase()}`}
+        onClick={onClick}
+        to={'/' + prefix + subMenuItem.path}>
+        {subMenuItem.title}
+      </Link>
+    ))}
+  </AccordionContent>
+);

package/src/components/CollapsibleNavBar/NavBarItemWithSubMenu.tsx

@@ -0,0 +1,94 @@
+import { useMatch } from 'react-router-dom';
+import {
+  AccordionGroupContextProvider,
+  AccordionGroup,
+  Accordion,
+  AccordionTitle,
+} from '@components/AccordionGroup';
+import Wrapper from '@components/Wrapper';
+import CollapsibleNavBarItem from './CollapsibleNavBarItem';
+import CollapsibleNavBarLink from './CollapsibleNavBarLink';
+import { NavBarAccordionContent } from './NavBarAccordionContent';
+import { CollapsibleNavBarPopover } from './NavBarPopover';
+import { TriggerIcon } from './TriggerIcon';
+import { CollapsibleNavBarGroup } from './types';
+import * as S from './styles';
+
+const Link = CollapsibleNavBarLink.withComponent('div');
+
+export const NavBarItemWithSubMenu = ({
+  item,
+  onClick,
+}: {
+  item: CollapsibleNavBarGroup;
+  onClick?: () => void;
+}) => {
+  const { iconName, iconSize, title, items, prefix, css, CustomIcon } = item;
+  const uniqName = iconName + title.replace(' ', '').toLowerCase();
+  const accordionUniqName = uniqName + 'accordion';
+  const match = useMatch(prefix + ':id');
+
+  const Icon = () => (
+    <TriggerIcon iconName={iconName} iconSize={iconSize} css={{ ...css }} />
+  );
+
+  return (
+    <AccordionGroupContextProvider key={uniqName}>
+      <CollapsibleNavBarItem>
+        <AccordionGroup
+          size="small"
+          css={{
+            width: '100%',
+          }}>
+          <Accordion
+            id={accordionUniqName}
+            title={title}
+            isOpened={false}
+            ariaControls={`${accordionUniqName}-panel`}
+            css={{
+              padding: 0,
+              '& ul li:last-child': {
+                paddingBottom: 10,
+              },
+            }}
+            renderContent={(props) => (
+              <NavBarAccordionContent
+                items={items}
+                accordionUniqueName={accordionUniqName}
+                prefix={prefix}
+                isPopover={false}
+                onClick={onClick}
+                {...props}
+              />
+            )}
+            renderTitle={(data) => (
+              <Wrapper onClick={data.onClick} css={S.AccordionTitleWrapper}>
+                <Link to="" className={match ? ' active' : ''}>
+                  <CollapsibleNavBarPopover
+                    triggerIcon={<Icon />}
+                    title={data.title}
+                    content={
+                      <NavBarAccordionContent
+                        items={items}
+                        accordionUniqueName={accordionUniqName}
+                        prefix={prefix}
+                        id={accordionUniqName}
+                        isOpened
+                        isPopover
+                      />
+                    }
+                  />
+                </Link>
+
+                <Link to="" className={`icon-wrapper${match ? ' active' : ''}`}>
+                  {CustomIcon ? <CustomIcon /> : <Icon />}
+                  <AccordionTitle {...data} css={S.AccordionTitle} />
+                </Link>
+              </Wrapper>
+            )}
+          />
+        </AccordionGroup>
+      </CollapsibleNavBarItem>
+    </AccordionGroupContextProvider>
+  );
+};

package/src/components/CollapsibleNavBar/NavBarItemWithoutSubMenu.tsx

@@ -0,0 +1,33 @@
+import CollapsibleNavBarItem from './CollapsibleNavBarItem';
+import { CollapsibleNavBarPopover } from './NavBarPopover';
+import { TriggerIcon } from './TriggerIcon';
+import CollapsibleNavBarLink from './CollapsibleNavBarLink';
+import * as T from './types';
+
+export const NavBarItemWithoutSubMenu = ({
+  item,
+  onClick,
+}: {
+  item: T.CollapsibleNavBarItem;
+  onClick?: () => void;
+}) => {
+  const { path, iconName, title, iconSize, css, CustomIcon } = item;
+  const Icon = () => (
+    <TriggerIcon
+      iconName={iconName}
+      iconSize={iconSize}
+      CustomIcon={CustomIcon}
+      css={{ ...css }}
+    />
+  );
+
+  return (
+    <CollapsibleNavBarItem key={path}>
+      <CollapsibleNavBarLink to={'/' + path} onClick={onClick}>
+        <CollapsibleNavBarPopover triggerIcon={<Icon />} title={title} />
+        <Icon />
+        <span>{title}</span>
+      </CollapsibleNavBarLink>
+    </CollapsibleNavBarItem>
+  );
+};

package/src/components/CollapsibleNavBar/NavBarPopover.tsx

@@ -0,0 +1,125 @@
+import { useEffect, useState } from 'react';
+import { offset } from '@floating-ui/react';
+import { useTheme } from '@emotion/react';
+import {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeading,
+  PopoverTrigger,
+} from '@components/Popover';
+import { useWindowSize } from '@ssa-ui-kit/hooks';
+
+export const CollapsibleNavBarPopover = ({
+  triggerIcon,
+  title,
+  content,
+}: {
+  triggerIcon: React.ReactElement;
+  title: string;
+  content?: React.ReactElement;
+}) => {
+  const theme = useTheme();
+  const [open, setOpen] = useState(false);
+
+  const onOpenChange = (open: boolean) => {
+    setOpen(open);
+  };
+
+  const { width } = useWindowSize();
+
+  useEffect(() => {
+    setOpen(false);
+  }, [width]);
+
+  return (
+    <Popover
+      floatingOptions={{
+        onOpenChange,
+        open,
+        middleware: [
+          offset({
+            mainAxis: 37,
+          }),
+        ],
+      }}
+      placement="right-start"
+      interactionsEnabled="both">
+      <PopoverTrigger
+        variant="custom"
+        dataTestId="collapsible-nav-bar-trigger-button"
+        css={{
+          height: 'auto',
+          padding: 0,
+          margin: 0,
+          cursor: 'pointer',
+          backgroundColor: 'unset',
+          borderRadius: 0,
+        }}
+        startIcon={triggerIcon}
+      />
+      <PopoverContent
+        css={{
+          [theme.mediaQueries.xs]: {
+            display: 'none',
+          },
+          [theme.mediaQueries.md]: {
+            display: 'block',
+          },
+          zIndex: 2,
+        }}
+        isFocusManagerDisabled={true}>
+        <PopoverHeading
+          css={{
+            color: theme.colors.white,
+            fontSize: 12,
+            padding: '3px 5px 5px 5px',
+            background: theme.colors.greyGraphite,
+            borderRadius: 5,
+            cursor: 'default',
+            marginBottom: 1,
+            width: 'auto',
+            whiteSpace: 'nowrap',
+            '&::before': {
+              content: '""',
+              display: 'block',
+              background: 'rgba(71, 74, 80, 1)',
+              borderRadius: 2,
+              position: 'absolute',
+              width: 9,
+              height: 9,
+              top: 7,
+              left: -4,
+              transform: 'rotate(45deg)',
+              zIndex: -1,
+            },
+          }}>
+          {title}
+        </PopoverHeading>
+        <PopoverDescription
+          css={{
+            '& > div': {
+              padding: 0,
+              background: theme.colors.greyGraphite,
+              borderRadius: 5,
+              width: 85,
+              '& > a': {
+                color: theme.colors.white,
+                padding: 5,
+                fontSize: 12,
+                fontWeight: 400,
+                '&:first-of-type': {
+                  paddingTop: 5,
+                },
+                '&:hover': {
+                  background: '#62656B',
+                },
+              },
+            },
+          }}>
+          {content}
+        </PopoverDescription>
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/components/CollapsibleNavBar/TriggerIcon.tsx

@@ -0,0 +1,45 @@
+import { css, useTheme } from '@emotion/react';
+import Wrapper from '@components/Wrapper';
+import Icon from '@components/Icon';
+import type { MapIconsType, SVGProps } from '@components/Icon/types';
+
+export const TriggerIcon = ({
+  iconName,
+  iconSize,
+  className,
+  CustomIcon,
+}: {
+  iconName: keyof MapIconsType;
+  iconSize?: number;
+  className?: string;
+  CustomIcon?: (props: Omit<SVGProps, 'fill'>) => JSX.Element;
+}) => {
+  const theme = useTheme();
+  return (
+    <Wrapper
+      css={css`
+        width: auto;
+        min-width: 22px;
+        justify-content: center;
+        overflow: visible;
+        position: relative;
+        height: 26px;
+      `}
+      className="trigger-icon">
+      {CustomIcon ? (
+        <CustomIcon
+          size={iconSize}
+          className={className}
+          color={theme.colors.grey}
+        />
+      ) : (
+        <Icon
+          name={iconName}
+          color={theme.colors.grey}
+          size={iconSize}
+          className={className}
+        />
+      )}
+    </Wrapper>
+  );
+};

package/src/components/CollapsibleNavBar/index.ts

@@ -0,0 +1,2 @@
+export { CollapsibleNavBar } from './CollapsibleNavBar';
+export type * from './types';