@ssa-ui-kit/widgets 0.0.1-alpha

package/src/components/NavBar/NavBar.tsx

@@ -0,0 +1,46 @@
+import { useId } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useTheme } from '@emotion/react';
+
+import { Icon } from '@ssa-ui-kit/core';
+
+import NavBarBase from './NavBarBase';
+import NavBarWrapper from './NavBarWrapper';
+import NavBarList from './NavBarList';
+import NavBarItem from './NavBarItem';
+import NavBarLink from './NavBarLink';
+import NavToggle from './NavToggle';
+
+import { INavBarProps } from './types';
+
+/**
+ *
+ * UI Component that shows the navigation bar
+ */
+export const NavBar = ({ items }: INavBarProps) => {
+  const toggleId = useId();
+  const { pathname } = useLocation();
+  const theme = useTheme();
+
+  return (
+    <NavBarBase>
+      <input type="checkbox" id={toggleId} />
+
+      <NavToggle htmlFor={toggleId} />
+
+      <NavBarWrapper>
+        <NavBarList>
+          {items.map(({ path, iconName }) => (
+            <NavBarItem key={path}>
+              <NavBarLink
+                to={'/' + path}
+                active={pathname === path ? true : undefined}>
+                <Icon name={iconName} color={theme.colors.grey} />
+              </NavBarLink>
+            </NavBarItem>
+          ))}
+        </NavBarList>
+      </NavBarWrapper>
+    </NavBarBase>
+  );
+};

package/src/components/NavBar/NavBarBase.ts

@@ -0,0 +1,48 @@
+import styled from '@emotion/styled';
+
+import NavBarWrapper from './NavBarWrapper';
+import NavToggleWrapper from './NavToggleWrapper';
+
+const NavBarBase = styled.nav`
+  align-items: center;
+  justify-content: center;
+
+  z-index: 9999;
+
+  color: ${({ theme }) => theme.colors.greyLighter};
+
+  input[type='checkbox'] {
+    display: none;
+
+    &:checked {
+      & ~ ${NavToggleWrapper} {
+        background-color: #dee1ec;
+      }
+
+      & ~ ${NavBarWrapper} {
+        transform: translateY(0);
+        border-radius: 12px 12px 0 0;
+        height: calc(100vh - 60px);
+
+        ${({ theme }) => theme.mediaQueries.lg} {
+          border-radius: 0;
+          height: 100vh;
+        }
+      }
+    }
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    display: flex;
+
+    top: 0;
+
+    border-radius: 0;
+
+    button {
+      display: none;
+    }
+  }
+`;
+
+export default NavBarBase;

package/src/components/NavBar/NavBarItem.ts

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+
+const NavBarItem = styled.li`
+  display: flex;
+  flex: 1 1 100%;
+
+  align-items: center;
+  justify-content: center;
+
+  height: 65px;
+`;
+
+export default NavBarItem;

package/src/components/NavBar/NavBarLink.ts

@@ -0,0 +1,27 @@
+import styled from '@emotion/styled';
+import { Link } from 'react-router-dom';
+
+const NavBarLink = styled(Link)<{ active?: boolean }>`
+  cursor: pointer;
+
+  &:hover {
+    svg {
+      filter: ${({ theme }) =>
+        `drop-shadow(-4px 4px 14px ${theme.colors.white})`};
+    }
+  }
+
+  ${({ active, theme }) =>
+    active &&
+    `
+      svg {
+        filter: drop-shadow(-4px 4px 14px ${theme.colors.white});
+        
+        path {
+          fill: ${theme.colors.white};
+        }
+      }
+    `}
+`;
+
+export default NavBarLink;

package/src/components/NavBar/NavBarList.ts

@@ -0,0 +1,16 @@
+import styled from '@emotion/styled';
+
+const NavBarList = styled.ul`
+  display: flex;
+  flex-wrap: wrap;
+
+  list-style: none;
+
+  align-items: center;
+  align-self: center;
+  height: 486px;
+
+  padding: 0;
+`;
+
+export default NavBarList;

package/src/components/NavBar/NavBarWrapper.ts

@@ -0,0 +1,40 @@
+import styled from '@emotion/styled';
+
+const NavBarWrapper = styled.div`
+  position: absolute;
+
+  top: 60px;
+  left: 0;
+
+  width: 56px;
+
+  border-radius: 12px 12px 0 0;
+  background: linear-gradient(
+    108.3deg,
+    ${({ theme }) => theme.colors.greyDarker} -0.36%,
+    ${({ theme }) => theme.colors.greyDarker} 100%
+  );
+
+  transform: translateY(-200vh);
+  transition: height 475ms ease, transform 450ms ease, border-radius 450ms ease;
+
+  ${({ theme }) => theme.mediaQueries.sm} {
+    width: 64px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    display: flex;
+    position: fixed;
+
+    top: 0;
+
+    width: 94px;
+    height: 100vh;
+
+    border-radius: 0;
+
+    transform: translateY(0);
+  }
+`;
+
+export default NavBarWrapper;

package/src/components/NavBar/NavToggle.tsx

@@ -0,0 +1,36 @@
+import { css } from '@emotion/react';
+
+import NavToggleWrapper from './NavToggleWrapper';
+
+const NavToggle = ({ htmlFor }: { htmlFor: string }) => (
+  <NavToggleWrapper>
+    <label
+      htmlFor={htmlFor}
+      css={css`
+        cursor: pointer;
+
+        height: 20px;
+        width: 20px;
+
+        transform: scale(-1, 1);
+
+        span {
+          height: 2px;
+          width: 100%;
+          background: black;
+          display: block;
+          margin: 3px 0;
+
+          &:nth-of-type(2) {
+            width: 80%;
+          }
+        }
+      `}>
+      <span></span>
+      <span></span>
+      <span></span>
+    </label>
+  </NavToggleWrapper>
+);
+
+export default NavToggle;

package/src/components/NavBar/NavToggleWrapper.ts

@@ -0,0 +1,21 @@
+import styled from '@emotion/styled';
+
+const NavToggleWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+
+  border: none;
+  border-radius: 25px;
+  background: transparent;
+
+  height: 36px;
+  width: 36px;
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    display: none;
+  }
+`;
+
+export default NavToggleWrapper;

package/src/components/NavBar/index.ts

@@ -0,0 +1,2 @@
+export { NavBar as default } from './NavBar';
+export * from './types';

package/src/components/NavBar/types.ts

@@ -0,0 +1,5 @@
+import { IMapIcons } from '@ssa-ui-kit/core';
+
+export interface INavBarProps {
+  items: Array<{ path: string; iconName: keyof IMapIcons }>;
+}

package/src/components/NotificationCard/NotificationCard.spec.tsx

@@ -0,0 +1,90 @@
+import userEvent from '@testing-library/user-event';
+import { Button } from '@ssa-ui-kit/core';
+import { NotificationCard } from './NotificationCard';
+import { NotificationCardProps } from './types';
+
+const commonProps: Pick<
+  NotificationCardProps,
+  'title' | 'text' | 'type' | 'time'
+> = {
+  title: 'Title',
+  text: 'Text',
+  type: 'Informational',
+  time: Date.now() - 1200000,
+};
+
+describe('NotificationCard', () => {
+  it('Renders with indicator (Unread state)', () => {
+    const { getByTestId } = render(
+      <NotificationCard {...commonProps} isRead={false} />,
+    );
+
+    getByTestId('indicator-left');
+  });
+
+  it('Renders without indicator (Read state)', () => {
+    const { queryByTestId } = render(
+      <NotificationCard {...commonProps} isRead={true} />,
+    );
+
+    expect(queryByTestId('indicator-left')).not.toBeInTheDocument();
+  });
+
+  it('Renders with badge and icon', () => {
+    const { getByTestId } = render(
+      <NotificationCard {...commonProps} isRead={false} />,
+    );
+
+    getByTestId('badge');
+    expect(getByTestId('badge')).toHaveTextContent(/information/i);
+  });
+
+  it('Renders with title and sub-text', () => {
+    const { getByText } = render(
+      <NotificationCard {...commonProps} isRead={false} />,
+    );
+
+    getByText(/title/i);
+    getByText(/text/i);
+  });
+
+  it('Renders with children prop', () => {
+    const { getByText, getAllByRole } = render(
+      <NotificationCard {...commonProps} isRead={false}>
+        <Button text="test" />
+        <Button text="test" />
+        Children Content
+      </NotificationCard>,
+    );
+
+    getByText(/children content/i);
+    const buttons = getAllByRole('button');
+    expect(buttons.length).toBe(2);
+  });
+
+  it('Renders with passed time value', () => {
+    const { getByText } = render(
+      <NotificationCard {...commonProps} isRead={false} />,
+    );
+
+    getByText(/20 mins ago/i);
+  });
+
+  it('Renders with passed onClick prop', async () => {
+    const user = userEvent.setup();
+    const mockOnClick = jest.fn();
+    const { getByTestId } = render(
+      <NotificationCard
+        {...commonProps}
+        isRead={false}
+        onClick={mockOnClick}
+      />,
+    );
+
+    const notification = getByTestId('notification');
+
+    await user.click(notification);
+
+    expect(mockOnClick).toBeCalledTimes(1);
+  });
+});

package/src/components/NotificationCard/NotificationCard.stories.tsx

@@ -0,0 +1,112 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Button } from '@ssa-ui-kit/core';
+import { mainTheme } from '@ssa-ui-kit/core';
+import { NotificationCard } from './NotificationCard';
+import { NotificationCardProps } from './types';
+import { childrenWrapper } from './styles';
+
+const notifyValues: Array<Pick<NotificationCardProps, 'type' | 'time'>> = [
+  {
+    type: 'Informational',
+    time: Date.now() - 600000,
+  },
+  {
+    type: 'Warning',
+    time: Date.now() - 1600000,
+  },
+
+  {
+    type: 'Error',
+    time: Date.now() - 2600000,
+  },
+];
+
+export default {
+  title: 'Widgets/NotificationCard',
+  component: NotificationCard,
+  argTypes: {
+    isRead: {
+      control: 'boolean',
+    },
+
+    type: {
+      options: ['Informational', 'Warning', 'Error'],
+      control: {
+        type: 'select',
+      },
+    },
+
+    time: {
+      control: {
+        type: 'date',
+      },
+    },
+  },
+} as Meta<typeof NotificationCard>;
+
+export const Default: StoryObj<typeof NotificationCard> = (
+  args: NotificationCardProps,
+) => {
+  return (
+    <div css={{ padding: '20px', background: '#F2F4F7', borderRadius: '20px' }}>
+      <NotificationCard
+        title={args.title}
+        text={args.text}
+        isRead={args.isRead}
+        type={args.type}
+        time={args.time}>
+        <div css={childrenWrapper}>
+          <Button
+            size="small"
+            variant="tertiary"
+            text="Ignore"
+            css={{
+              border: `1px solid ${mainTheme.colors.greyDropdownMain}`,
+              fontWeight: '600',
+              padding: '5px 21px',
+
+              ['span']: {
+                color: mainTheme.colors.greyCancelClearButton,
+              },
+            }}
+          />
+          <Button
+            size="small"
+            variant="attention"
+            text="Stop bot"
+            css={{ padding: '5px 26px' }}
+          />
+        </div>
+      </NotificationCard>
+    </div>
+  );
+};
+
+Default.args = {
+  title: 'CyberVeinToken is Now Available on Exchange',
+  text: 'You have an error with Bot name 1. Do you want to stop this bot?',
+  isRead: false,
+  type: 'Informational',
+  time: Date.now() - 1200000,
+};
+
+export const NotificationList: StoryObj<typeof NotificationCard> = () => {
+  return (
+    <div css={{ padding: '20px', background: '#F2F4F7', borderRadius: '20px' }}>
+      {notifyValues.map((value, index) => {
+        return (
+          <NotificationCard
+            key={index}
+            title="CyberVeinToken is Now Available"
+            text="With our newest listing, we’re welcoming Wrapped "
+            isRead={false}
+            type={value.type}
+            time={value.time}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+NotificationList.args = {};

package/src/components/NotificationCard/NotificationCard.tsx

@@ -0,0 +1,94 @@
+import { useTheme } from '@emotion/react';
+import { dateFormatters } from '@ssa-ui-kit/utils';
+import {
+  Badge,
+  CardBase,
+  IMapIcons,
+  Icon,
+  Indicator,
+  MainColors,
+  Typography,
+} from '@ssa-ui-kit/core';
+import { NotificationCardProps } from './types';
+import {
+  notifyBadge,
+  notifyCard,
+  notifyTitle,
+  notifyText,
+  notifyTime,
+} from './styles';
+
+export const notificationTypes: Record<string, { [key: string]: string }> = {
+  Informational: {
+    icon: 'information',
+    color: 'blueLight',
+  },
+  Warning: {
+    icon: 'warning',
+    color: 'yellowWarm',
+  },
+  Error: {
+    icon: 'attention',
+    color: 'pink',
+  },
+};
+
+export const NotificationCard = ({
+  title,
+  children,
+  text,
+  isRead,
+  type,
+  time,
+  onClick,
+}: NotificationCardProps) => {
+  const theme = useTheme();
+  const { getTimeAgo } = dateFormatters;
+
+  return (
+    <CardBase
+      data-testid="notification"
+      css={notifyCard}
+      noShadow
+      onClick={() => {
+        if (typeof onClick === 'function') {
+          onClick();
+        }
+      }}>
+      <Indicator isVisible={!isRead}>
+        <Badge
+          data-testid="badge"
+          color={notificationTypes[type].color as keyof MainColors}
+          css={notifyBadge}>
+          <Icon
+            name={notificationTypes[type].icon as keyof IMapIcons}
+            color={theme.colors.white}
+            size={14}
+          />
+        </Badge>
+      </Indicator>
+      <Typography
+        variant="subtitle"
+        weight="medium"
+        css={notifyTitle}
+        color={theme.colors.greyDarker}>
+        {title}
+      </Typography>
+      <Typography
+        variant="body1"
+        weight="regular"
+        css={notifyText}
+        color={theme.colors.greyDarker60}>
+        {text}
+      </Typography>
+      {children}
+      <Typography
+        variant="body1"
+        weight="regular"
+        css={notifyTime}
+        color={theme.colors.greyDarker}>
+        {getTimeAgo(time)}
+      </Typography>
+    </CardBase>
+  );
+};

package/src/components/NotificationCard/index.ts

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

package/src/components/NotificationCard/styles.tsx

@@ -0,0 +1,134 @@
+import { Theme, css } from '@emotion/react';
+
+export const childrenWrapper = (theme: Theme) => `
+  grid-column: 2 / span 2;
+  margin-top: 10px;
+
+  button {
+    height: 31px;
+    border-radius: 6px;
+    font-weight: 700;
+
+    &:focus::before {
+      content: none;
+    }
+
+    &:not(:last-child) {
+      margin-right: 20px;
+    }
+  }
+
+  ${theme.mediaQueries.md} {
+    margin-top: 13px;
+  }
+
+  ${theme.mediaQueries.xs} {
+    button {
+      height: 28px;
+      padding: 10px;
+
+      &:not(:last-child) {
+        margin-right: 5px;
+      }
+    }
+  }
+`;
+
+export const notifyCard = (theme: Theme) => css`
+  position: relative;
+  display: grid;
+  column-gap: 9px;
+  grid-template-columns: auto 1fr auto;
+  padding: 14px 12px;
+  align-items: flex-start;
+
+  &:not(:last-child) {
+    margin-bottom: 5px;
+  }
+
+  ${theme.mediaQueries.md} {
+    column-gap: 12px;
+    padding: 14px 18px 14px 12px;
+
+    &:not(:last-child) {
+      margin-bottom: 10px;
+    }
+  }
+
+  ${theme.mediaQueries.xs} {
+    padding: 10px 8px;
+  }
+`;
+
+export const notifyBadge = (theme: Theme) => css`
+  display: grid;
+  grid-row: 1 / span 2;
+  height: auto;
+  width: fit-content;
+  padding: 8px;
+  border-radius: 6px;
+  box-shadow: -4px 12px 14px 0 #dae1e1;
+
+  ${theme.mediaQueries.md} {
+    padding: 11px;
+    border-radius: 12px;
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+`;
+
+export const notifyTitle = (theme: Theme) => css`
+  grid-row: 1;
+  grid-column: 2;
+  margin-bottom: 2px;
+
+  ${theme.mediaQueries.md} {
+    margin-top: -3px;
+    font-size: 16px;
+    line-height: 20px;
+  }
+
+  ${theme.mediaQueries.xs} {
+    grid-row: 2;
+  }
+`;
+
+export const notifyText = (theme: Theme) => css`
+  grid-row: 2;
+  grid-column: 2 / span 3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &:hover {
+    overflow: visible;
+    text-overflow: inherit;
+    white-space: normal;
+  }
+
+  ${theme.mediaQueries.md} {
+    font-size: 13.3px;
+    line-height: 20px;
+    overflow: visible;
+    text-overflow: inherit;
+    white-space: normal;
+  }
+
+  ${theme.mediaQueries.xs} {
+    grid-row: 3;
+  }
+`;
+
+export const notifyTime = (theme: Theme) => css`
+  grid-row: 1;
+  grid-column: 3;
+  text-align: right;
+
+  ${theme.mediaQueries.xs} {
+    grid-column: 2;
+    text-align: left;
+  }
+`;