@ssa-ui-kit/widgets 0.0.11-alpha → 0.0.14-alpha

package/src/components/CollapsibleNavBar/NavBarAccordionContent.tsx

@@ -1,42 +1,49 @@
-import styled from '@emotion/styled';
-import { AccordionContent, RenderContentProps } from '@ssa-ui-kit/core';
-import CollapsibleNavBarLink from './CollapsibleNavBarLink';
-import * as S from './styles';
-
-const Link = styled(CollapsibleNavBarLink)`
-  &:hover {
-    filter: unset;
-  }
-
-  &.active {
-    text-decoration: underline;
-    filter: unset;
-  }
-`;
-
-export const NavBarAccordionContent = ({
-  items,
-  accordionUniqueName,
-  prefix,
-  isPopover,
-  ...rest
-}: RenderContentProps & {
-  items: Array<{ path: string; title: string }>;
-  accordionUniqueName: string;
-  prefix?: string;
-  isPopover?: boolean;
-}) => (
-  <AccordionContent
-    {...rest}
-    css={[S.AccordionContent, isPopover && S.AccordionContentPopover]}>
-    {items.map((subMenuItem) => (
-      <Link
-        key={`${accordionUniqueName}-link-${subMenuItem.title
-          .replace(' ', '')
-          .toLowerCase()}`}
-        to={'/' + prefix + subMenuItem.path}>
-        {subMenuItem.title}
-      </Link>
-    ))}
-  </AccordionContent>
-);
+import styled from '@emotion/styled';
+import { AccordionContent, RenderContentProps } from '@ssa-ui-kit/core';
+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,
+  ...rest
+}: RenderContentProps & {
+  items: Array<{ path: string; title: string }>;
+  accordionUniqueName: string;
+  prefix?: string;
+  isPopover?: boolean;
+}) => (
+  <AccordionContent
+    {...rest}
+    css={[S.AccordionContent, isPopover && S.AccordionContentPopover]}>
+    {items.map((subMenuItem) => (
+      <Link
+        key={`${accordionUniqueName}-link-${subMenuItem.title
+          .replace(' ', '')
+          .toLowerCase()}`}
+        to={'/' + prefix + subMenuItem.path}>
+        {subMenuItem.title}
+      </Link>
+    ))}
+  </AccordionContent>
+);

package/src/components/CollapsibleNavBar/NavBarItemWithSubMenu.tsx

@@ -1,108 +1,91 @@
-import { useMatch } from 'react-router-dom';
-import styled from '@emotion/styled';
-import {
-  AccordionGroupContextProvider,
-  AccordionGroup,
-  Accordion,
-  Wrapper,
-  AccordionTitle,
-} from '@ssa-ui-kit/core';
-import CollapsibleNavBarItem from './CollapsibleNavBarItem';
-import { NavBarAccordionContent } from './NavBarAccordionContent';
-import { CollapsibleNavBarPopover } from './NavBarPopover';
-import { TriggerIcon } from './TriggerIcon';
-import { CollapsibleNavBarGroup } from './types';
-import * as S from './styles';
-
-const IconWrapper = styled.div`
-  width: 24px;
-  height: 24px;
-  ${({ theme }) => S.SVGMainStyle(theme)}
-
-  &:hover svg {
-    ${({ theme }) => S.SVGHoverShadow(theme)}
-  }
-
-  /* This is the duplicate from <NavBarLink /> */
-  &.active {
-    filter: drop-shadow(-4px 4px 14px ${({ theme }) => theme.colors.white});
-    color: ${({ theme }) => theme.colors.white};
-
-    svg {
-      filter: drop-shadow(-4px 4px 14px ${({ theme }) => theme.colors.white});
-      path {
-        fill: ${({ theme }) => theme.colors.white};
-      }
-    }
-  }
-`;
-
-export const NavBarItemWithSubMenu = ({
-  item,
-}: {
-  item: CollapsibleNavBarGroup;
-}) => {
-  const { iconName, iconSize, title, items, prefix } = item;
-  const uniqName = iconName + title.replace(' ', '').toLowerCase();
-  const accordionUniqName = uniqName + 'accordion';
-  const match = useMatch(prefix + ':id');
-
-  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}
-                {...props}
-              />
-            )}
-            renderTitle={(data) => (
-              <Wrapper onClick={data.onClick} css={S.AccordionTitleWrapper}>
-                <IconWrapper
-                  className={`icon-wrapper${match ? ' active' : undefined}`}>
-                  <CollapsibleNavBarPopover
-                    triggerIcon={
-                      <TriggerIcon iconName={iconName} iconSize={iconSize} />
-                    }
-                    title={data.title}
-                    content={
-                      <NavBarAccordionContent
-                        items={items}
-                        accordionUniqueName={accordionUniqName}
-                        prefix={prefix}
-                        id={accordionUniqName}
-                        isOpened
-                        isPopover
-                      />
-                    }
-                  />
-                </IconWrapper>
-                <TriggerIcon iconName={iconName} iconSize={iconSize} />
-                <AccordionTitle {...data} css={S.AccordionTitle} />
-              </Wrapper>
-            )}
-          />
-        </AccordionGroup>
-      </CollapsibleNavBarItem>
-    </AccordionGroupContextProvider>
-  );
-};
+import { useMatch } from 'react-router-dom';
+import {
+  AccordionGroupContextProvider,
+  AccordionGroup,
+  Accordion,
+  Wrapper,
+  AccordionTitle,
+} from '@ssa-ui-kit/core';
+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,
+}: {
+  item: CollapsibleNavBarGroup;
+}) => {
+  const { iconName, iconSize, title, items, prefix, css } = 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}
+                {...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' : ''}`}>
+                  <Icon />
+                  <AccordionTitle {...data} css={S.AccordionTitle} />
+                </Link>
+              </Wrapper>
+            )}
+          />
+        </AccordionGroup>
+      </CollapsibleNavBarItem>
+    </AccordionGroupContextProvider>
+  );
+};

package/src/components/CollapsibleNavBar/NavBarItemWithoutSubMenu.tsx

@@ -1,35 +1,26 @@
-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,
-}: {
-  item: T.CollapsibleNavBarItem;
-}) => {
-  const { path, iconName, title, iconSize } = item;
-  return (
-    <CollapsibleNavBarItem key={path}>
-      <CollapsibleNavBarLink to={'/' + path}>
-        <CollapsibleNavBarPopover
-          triggerIcon={
-            <TriggerIcon
-              iconName={iconName}
-              iconSize={iconSize}
-              css={{ marginRight: 20 }}
-            />
-          }
-          title={title}
-        />
-        <TriggerIcon
-          iconName={iconName}
-          iconSize={iconSize}
-          css={{ marginRight: 20 }}
-        />
-        <span>{title}</span>
-      </CollapsibleNavBarLink>
-    </CollapsibleNavBarItem>
-  );
-};
+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,
+}: {
+  item: T.CollapsibleNavBarItem;
+}) => {
+  const { path, iconName, title, iconSize, css } = item;
+  const Icon = () => (
+    <TriggerIcon iconName={iconName} iconSize={iconSize} css={{ ...css }} />
+  );
+
+  return (
+    <CollapsibleNavBarItem key={path}>
+      <CollapsibleNavBarLink to={'/' + path}>
+        <CollapsibleNavBarPopover triggerIcon={<Icon />} title={title} />
+        <Icon />
+        <span>{title}</span>
+      </CollapsibleNavBarLink>
+    </CollapsibleNavBarItem>
+  );
+};

package/src/components/CollapsibleNavBar/NavBarPopover.tsx

@@ -1,124 +1,124 @@
-import { useEffect, useState } from 'react';
-import { offset } from '@floating-ui/react';
-import { useTheme } from '@emotion/react';
-import {
-  Popover,
-  PopoverContent,
-  PopoverDescription,
-  PopoverHeading,
-  PopoverTrigger,
-} from '@ssa-ui-kit/core';
-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,
-          cursor: 'pointer',
-          backgroundColor: 'unset',
-        }}
-        startIcon={triggerIcon}
-      />
-      <PopoverContent
-        css={{
-          [theme.mediaQueries.xs]: {
-            display: 'none',
-          },
-          [theme.mediaQueries.md]: {
-            display: 'block',
-          },
-          zIndex: 2,
-        }}>
-        <PopoverHeading
-          css={{
-            color: theme.colors.white,
-            fontSize: 12,
-            padding: '3px 5px 5px 5px',
-            background: theme.colors.greyGraphite,
-            borderRadius: 5,
-            cursor: 'default',
-            marginBottom: 1,
-            width: 85,
-            '&::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,
-                },
-                '&:last-of-type': {
-                  paddingBottom: 9,
-                },
-                '&:hover': {
-                  background: '#62656B',
-                },
-              },
-            },
-          }}>
-          {content}
-        </PopoverDescription>
-      </PopoverContent>
-    </Popover>
-  );
-};
+import { useEffect, useState } from 'react';
+import { offset } from '@floating-ui/react';
+import { useTheme } from '@emotion/react';
+import {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeading,
+  PopoverTrigger,
+} from '@ssa-ui-kit/core';
+import { useWindowSize } from '@ssa-ui-kit/hooks';
+import CollapsibleNavBarLink from './CollapsibleNavBarLink';
+
+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,
+        }}>
+        <PopoverHeading
+          css={{
+            color: theme.colors.white,
+            fontSize: 12,
+            padding: '3px 5px 5px 5px',
+            background: theme.colors.greyGraphite,
+            borderRadius: 5,
+            cursor: 'default',
+            marginBottom: 1,
+            width: 85,
+            '&::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>
+  );
+};