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

package/src/components/CollapsibleNavBar/CollapsibleNavBarBase.ts

@@ -1,122 +1,128 @@
-import styled from '@emotion/styled';
-import NavBarBase from '@components/NavBar/NavBarBase';
-import { css } from '@emotion/react';
-
-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'};
-    }
-  }
-`;
-
-const staticIconsToggle = (isVisible: boolean) => css`
-  & a > div {
-    display: ${isVisible ? 'flex' : 'none'};
-  }
-  & > div > div > div > div:nth-of-type(2) {
-    display: ${isVisible ? 'block' : '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)}
-  }
-
-  &:has(> input[type='checkbox']:checked) {
-    position: static;
-    background: linear-gradient(
-      108.3deg,
-      ${({ theme }) => theme.colors.greyDarker} -0.36%,
-      ${({ theme }) => theme.colors.greyDarker} 100%
-    );
-    height: 100%;
-  }
-
-  & > 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) {
-        opacity: 1;
-        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;
-    height: 100%;
-    & li {
-      ${staticIconsToggle(false)}
-      ${popupIconsToggle(true)}
-    }
-  }
-
-  ${({ theme }) => theme.mediaQueries.lg} {
-    &:has(#contentToggler:checked) {
-      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;
+import styled from '@emotion/styled';
+import NavBarBase from '@components/NavBar/NavBarBase';
+import { css } from '@emotion/react';
+
+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'};
+    }
+  }
+`;
+
+const staticIconsToggle = (isVisible: boolean) => css`
+  & a > div {
+    display: ${isVisible ? 'flex' : 'none'};
+  }
+  & > div > div > div > div:nth-of-type(2) {
+    display: ${isVisible ? 'block' : '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%
+    );
+    min-width: 100%;
+    width: 100%;
+    height: 100%;
+  }
+
+  & > 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;
+    height: auto;
+    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

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

@@ -1,34 +1,36 @@
-import styled from '@emotion/styled';
-import NavBarLink from '@components/NavBar/NavBarLink';
-import * as S from './styles';
-
-const CollapsibleNavBarLink = styled(NavBarLink)<{ active?: boolean }>`
-  text-decoration: none;
-  display: inline-flex;
-  gap: 20px;
-  color: ${({ theme }) => theme.colors.white80};
-
-  ${({ theme }) => S.SVGMainStyle(theme)};
-  &:hover {
-    svg {
-      filter: ${({ theme }) =>
-        `drop-shadow(-4px 4px 14px ${theme.colors.white})`};
-      & 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;
+import styled from '@emotion/styled';
+import NavBarLink from '@components/NavBar/NavBarLink';
+import * as S from './styles';
+
+const CollapsibleNavBarLink = styled(NavBarLink)`
+  text-decoration: none;
+  display: inline-flex;
+  gap: 20px;
+  color: ${({ theme }) => theme.colors.white80};
+
+  ${({ theme }) => S.SVGMainStyle(theme)};
+  &:hover {
+    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

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

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

@@ -1,24 +1,27 @@
-import { Icon } from '@ssa-ui-kit/core';
-import * as S from './styles';
-import { useState } from 'react';
-
-export const NavContentToggle = ({ id }: { id: string }) => {
-  const [checked, setChecked] = useState(false);
-  return (
-    <div css={S.ContentToggle}>
-      <input type="checkbox" id={id} onChange={() => setChecked(!checked)} />
-      <label
-        htmlFor={id}
-        css={{
-          width: '100%',
-          height: '100%',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          cursor: 'pointer',
-        }}>
-        <Icon name={checked ? 'carrot-left' : 'carrot-right'} size={14} />
-      </label>
-    </div>
-  );
-};
+import { Icon } from '@ssa-ui-kit/core';
+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

@@ -1,52 +1,49 @@
-import React, { useId } from 'react';
-import { css } from '@emotion/react';
-
-import CollapsibleNavToggleWrapper from './CollapsibleNavToggleWrapper';
-
-const CollapsibleNavToggle = () => {
-  const id = useId();
-  return (
-    <>
-      <input type="checkbox" id={id} />
-
-      <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>
-    </>
-  );
-};
-
-export default CollapsibleNavToggle;
+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

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