@ssa-ui-kit/widgets 0.0.8-alpha → 0.0.10-alpha

package/src/components/CollapsibleNavBar/NavBarAccordionContent.tsx

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

package/src/components/CollapsibleNavBar/NavBarItemWithSubMenu.tsx

@@ -1,84 +1,108 @@
-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';
-
-export const NavBarItemWithSubMenu = ({
-  item,
-  pathname,
-}: {
-  item: CollapsibleNavBarGroup;
-  pathname: string;
-}) => {
-  const { iconName, iconSize, title, items, prefix } = item;
-  const uniqName = iconName + title.replace(' ', '').toLowerCase();
-  const accordionUniqName = uniqName + 'accordion';
-  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}
-                pathname={pathname}
-                isPopover={false}
-                {...props}
-              />
-            )}
-            renderTitle={(data) => (
-              <Wrapper onClick={data.onClick} css={S.AccordionTitleWrapper}>
-                <div css={S.IconWrapper} className="icon-wrapper">
-                  <CollapsibleNavBarPopover
-                    triggerIcon={
-                      <TriggerIcon iconName={iconName} iconSize={iconSize} />
-                    }
-                    title={data.title}
-                    content={
-                      <NavBarAccordionContent
-                        items={items}
-                        accordionUniqueName={accordionUniqName}
-                        prefix={prefix}
-                        pathname={pathname}
-                        id={accordionUniqName}
-                        isOpened
-                        isPopover
-                      />
-                    }
-                  />
-                </div>
-                <TriggerIcon iconName={iconName} iconSize={iconSize} />
-                <AccordionTitle {...data} css={S.AccordionTitle} />
-              </Wrapper>
-            )}
-          />
-        </AccordionGroup>
-      </CollapsibleNavBarItem>
-    </AccordionGroupContextProvider>
-  );
-};
+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>
+  );
+};

package/src/components/CollapsibleNavBar/NavBarItemWithoutSubMenu.tsx

@@ -1,39 +1,35 @@
-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,
-  pathname,
-}: {
-  item: T.CollapsibleNavBarItem;
-  pathname: string;
-}) => {
-  const { path, iconName, title, iconSize } = item;
-  return (
-    <CollapsibleNavBarItem key={path}>
-      <CollapsibleNavBarLink
-        to={'/' + path}
-        active={pathname === path ? true : undefined}>
-        <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 } = 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>
+  );
+};

package/src/components/CollapsibleNavBar/NavBarPopover.tsx

@@ -1,123 +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',
-          },
-        }}>
-        <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';
+
+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>
+  );
+};

package/src/components/CollapsibleNavBar/TriggerIcon.tsx

@@ -1,35 +1,35 @@
-import { css, useTheme } from '@emotion/react';
-import { Wrapper, Icon, IMapIcons } from '@ssa-ui-kit/core';
-import * as S from './styles';
-
-export const TriggerIcon = ({
-  iconName,
-  iconSize,
-  className,
-}: {
-  iconName: keyof IMapIcons;
-  iconSize?: number;
-  className?: string;
-}) => {
-  const theme = useTheme();
-  return (
-    <Wrapper
-      css={css`
-        width: 24px;
-        height: 24px;
-        justify-content: center;
-        &:hover {
-          ${S.SVGHoverShadow(theme)}
-        }
-      `}
-      className="trigger-icon">
-      <Icon
-        name={iconName}
-        color={theme.colors.grey}
-        css={{ marginRight: 20 }}
-        size={iconSize}
-        className={className}
-      />
-    </Wrapper>
-  );
-};
+import { css, useTheme } from '@emotion/react';
+import { Wrapper, Icon, IMapIcons } from '@ssa-ui-kit/core';
+import * as S from './styles';
+
+export const TriggerIcon = ({
+  iconName,
+  iconSize,
+  className,
+}: {
+  iconName: keyof IMapIcons;
+  iconSize?: number;
+  className?: string;
+}) => {
+  const theme = useTheme();
+  return (
+    <Wrapper
+      css={css`
+        width: 24px;
+        height: 24px;
+        justify-content: center;
+        &:hover {
+          ${S.SVGHoverShadow(theme)}
+        }
+      `}
+      className="trigger-icon">
+      <Icon
+        name={iconName}
+        color={theme.colors.grey}
+        css={{ marginRight: 20 }}
+        size={iconSize}
+        className={className}
+      />
+    </Wrapper>
+  );
+};