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

package/src/components/NavBar/NavBar.stories.tsx

@@ -1,86 +1,86 @@
-import { Fragment } from 'react';
-import { Routes, Route, MemoryRouter } from 'react-router-dom';
-import { Meta } from '@storybook/react';
-import { Title, Description, Source } from '@storybook/addon-docs';
-
-import { NavBar } from './NavBar';
-import { DecoratorFunction } from '@storybook/types';
-
-type Args = Parameters<typeof NavBar>[0];
-
-const reactRouterDecorator: DecoratorFunction<
-  {
-    component: typeof NavBar;
-    storyResult: React.ReactElement;
-    canvasElement: unknown;
-  },
-  Args
-> = (Story) => {
-  return (
-    <MemoryRouter>
-      <Routes>
-        <Route path="/*" element={<Story />} />
-      </Routes>
-    </MemoryRouter>
-  );
-};
-
-const Items = [
-  { path: 'stats', iconName: 'stats' },
-  { path: 'calendar', iconName: 'calendar' },
-  { path: 'trainings', iconName: 'trainings' },
-  { path: 'measurements', iconName: 'measurements' },
-  { path: 'diet', iconName: 'diet' },
-  { path: 'notification', iconName: 'notification' },
-  { path: 'settings', iconName: 'settings' },
-];
-
-export default {
-  title: 'Widgets/NavBar',
-  component: NavBar,
-  parameters: {
-    viewport: {
-      defaultViewport: 'mobile2',
-    },
-    docs: {
-      page: () => (
-        <Fragment>
-          <Title />
-          <Description />
-          <Source code={`<NavBar />`} />
-        </Fragment>
-      ),
-    },
-  },
-  decorators: [
-    reactRouterDecorator,
-    (Story) => (
-      <div style={{ height: '100vh', position: 'relative' }}>{Story()}</div>
-    ),
-  ],
-  args: {
-    items: Items,
-  },
-} as Meta<typeof NavBar>;
-
-export const Default = {};
-
-const VIEWPORTS = {
-  laptop: {
-    name: 'Laptop',
-    styles: {
-      width: '1440px',
-      height: '1080px',
-    },
-  },
-};
-
-export const WideScreen = {
-  component: NavBar,
-  parameters: {
-    viewport: {
-      viewports: VIEWPORTS,
-      defaultViewport: 'laptop',
-    },
-  },
-};
+import { Fragment } from 'react';
+import { Routes, Route, MemoryRouter } from 'react-router-dom';
+import { Meta } from '@storybook/react';
+import { Title, Description, Source } from '@storybook/addon-docs';
+
+import { NavBar } from './NavBar';
+import { DecoratorFunction } from '@storybook/types';
+
+type Args = Parameters<typeof NavBar>[0];
+
+const reactRouterDecorator: DecoratorFunction<
+  {
+    component: typeof NavBar;
+    storyResult: React.ReactElement;
+    canvasElement: unknown;
+  },
+  Args
+> = (Story) => {
+  return (
+    <MemoryRouter>
+      <Routes>
+        <Route path="/*" element={<Story />} />
+      </Routes>
+    </MemoryRouter>
+  );
+};
+
+const Items = [
+  { path: 'stats', iconName: 'stats' },
+  { path: 'calendar', iconName: 'calendar' },
+  { path: 'trainings', iconName: 'trainings' },
+  { path: 'measurements', iconName: 'measurements' },
+  { path: 'diet', iconName: 'diet' },
+  { path: 'notification', iconName: 'notification' },
+  { path: 'settings', iconName: 'settings' },
+];
+
+export default {
+  title: 'Widgets/NavBar',
+  component: NavBar,
+  parameters: {
+    viewport: {
+      defaultViewport: 'mobile2',
+    },
+    docs: {
+      page: () => (
+        <Fragment>
+          <Title />
+          <Description />
+          <Source code={`<NavBar />`} />
+        </Fragment>
+      ),
+    },
+  },
+  decorators: [
+    reactRouterDecorator,
+    (Story) => (
+      <div style={{ height: '100vh', position: 'relative' }}>{Story()}</div>
+    ),
+  ],
+  args: {
+    items: Items,
+  },
+} as Meta<typeof NavBar>;
+
+export const Default = {};
+
+const VIEWPORTS = {
+  laptop: {
+    name: 'Laptop',
+    styles: {
+      width: '1440px',
+      height: '1080px',
+    },
+  },
+};
+
+export const WideScreen = {
+  component: NavBar,
+  parameters: {
+    viewport: {
+      viewports: VIEWPORTS,
+      defaultViewport: 'laptop',
+    },
+  },
+};

package/src/components/NavBar/NavBar.tsx

@@ -1,41 +1,41 @@
-import { useId } from 'react';
-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 theme = useTheme();
-
-  return (
-    <NavBarBase>
-      <input type="checkbox" id={toggleId} />
-
-      <NavToggle htmlFor={toggleId} />
-
-      <NavBarWrapper>
-        <NavBarList>
-          {items.map(({ path, iconName }) => (
-            <NavBarItem key={path}>
-              <NavBarLink to={'/' + path}>
-                <Icon name={iconName} color={theme.colors.grey} />
-              </NavBarLink>
-            </NavBarItem>
-          ))}
-        </NavBarList>
-      </NavBarWrapper>
-    </NavBarBase>
-  );
-};
+import { useId } from 'react';
+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 theme = useTheme();
+
+  return (
+    <NavBarBase>
+      <input type="checkbox" id={toggleId} />
+
+      <NavToggle htmlFor={toggleId} />
+
+      <NavBarWrapper>
+        <NavBarList>
+          {items.map(({ path, iconName }) => (
+            <NavBarItem key={path}>
+              <NavBarLink to={'/' + path}>
+                <Icon name={iconName} color={theme.colors.grey} />
+              </NavBarLink>
+            </NavBarItem>
+          ))}
+        </NavBarList>
+      </NavBarWrapper>
+    </NavBarBase>
+  );
+};

package/src/components/NavBar/NavBarBase.ts

@@ -1,45 +1,45 @@
-import styled from '@emotion/styled';
-
-const NavBarBase = styled.nav`
-  align-items: center;
-  justify-content: center;
-
-  z-index: 9999;
-
-  color: ${({ theme }) => theme.colors.greyLighter};
-
-  input[type='checkbox'] {
-    display: none;
-
-    &:checked {
-      & ~ div:first-of-type {
-        background-color: #dee1ec;
-      }
-
-      & ~ div:nth-of-type(2) {
-        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;
+import styled from '@emotion/styled';
+
+const NavBarBase = styled.nav`
+  align-items: center;
+  justify-content: center;
+
+  z-index: 9999;
+
+  color: ${({ theme }) => theme.colors.greyLighter};
+
+  input[type='checkbox'] {
+    display: none;
+
+    &:checked {
+      & ~ div:first-of-type {
+        background-color: #dee1ec;
+      }
+
+      & ~ div:nth-of-type(2) {
+        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

@@ -1,13 +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;
+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

@@ -1,33 +1,33 @@
-import styled from '@emotion/styled';
-import { NavLink } from 'react-router-dom';
-
-const NavBarLink = styled(NavLink)`
-  cursor: pointer;
-
-  &:not(.active):hover {
-    svg {
-      filter: ${({ theme }) =>
-        `drop-shadow(-4px 4px 14px ${theme.colors.white})`};
-    }
-  }
-
-  &.active {
-    cursor: default;
-    backdrop-filter: blur(0);
-    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};
-      }
-      & circle {
-        stroke: ${({ theme }) => theme.colors.white};
-      }
-    }
-  }
-`;
-
-export default NavBarLink;
+import styled from '@emotion/styled';
+import { NavLink } from 'react-router-dom';
+
+const NavBarLink = styled(NavLink)`
+  cursor: pointer;
+
+  &:not(.active):hover {
+    svg {
+      filter: ${({ theme }) =>
+        `drop-shadow(-4px 4px 14px ${theme.colors.white})`};
+    }
+  }
+
+  &.active {
+    cursor: default;
+    backdrop-filter: blur(0);
+    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};
+      }
+      & circle {
+        stroke: ${({ theme }) => theme.colors.white};
+      }
+    }
+  }
+`;
+
+export default NavBarLink;

package/src/components/NavBar/NavBarList.ts

@@ -1,16 +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;
+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

@@ -1,40 +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.md} {
-    width: 64px;
-  }
-
-  ${({ theme }) => theme.mediaQueries.xlg} {
-    display: flex;
-    position: fixed;
-
-    top: 0;
-
-    width: 94px;
-    height: 100vh;
-
-    border-radius: 0;
-
-    transform: translateY(0);
-  }
-`;
-
-export default NavBarWrapper;
+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.md} {
+    width: 64px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.xlg} {
+    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

@@ -1,36 +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;
+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

@@ -1,21 +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;
+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

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