Merge branch 'develop'

src/assets/styles/_variables.scss

@@ -32,3 +32,4 @@ $color-base-60: rgb($color-base, 60%);
 $color-base-70: rgb($color-base, 70%);
 $color-base-80: rgb($color-base, 80%);
 $color-base-90: rgb($color-base, 90%);
+$color-light-bg-hover: rgb($color-light-bg, 0.8);

src/assets/styles/misc.scss

@@ -8,6 +8,7 @@
   --main-black: #{v.$color-black-main};
   --second-black: #{v.$color-black-secondary};
   --light-bg: #{v.$color-light-bg};
+  --light-bg-hover: #{v.$color-light-bg-hover};
   --color-1: #{v.$color-1};
   --color-2: #{v.$color-2};
   --color-3: #{v.$color-3};

src/components/atoms/AccordionItem/AccordionItem.scss

@@ -0,0 +1,64 @@
+$color-background: var(--light-bg);
+$color-background-hover: var(--light-bg-hover);
+$color-background-open: linear-gradient(270deg, var(--color-1), var(--color-2));
+$border-radius: 0.5rem;
+
+.accordion-item {
+  border-radius: $border-radius;
+  width: 100%;
+  background-color: $color-background;
+  transition: background-color 0.3s ease-in-out;
+
+  &:hover {
+    background-color: $color-background-hover;
+  }
+
+  &__header {
+    padding: 1rem;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+    width: 100%;
+    box-sizing: border-box;
+    border: none;
+
+    h5 {
+      font-size: var(--font-size-h5);
+      margin: 0;
+    }
+
+    .chevron {
+      transition: transform 0.3s ease-in-out;
+    }
+  }
+
+  &__content {
+    padding: 1rem;
+    animation: open 0.3s ease-in-out;
+  }
+
+  &--open {
+    background: $color-background-open;
+    /* stylelint-disable-next-line selector-class-pattern */
+    .accordion-item__header {
+      border-bottom: 1px solid var(--color-base-20);
+
+      .chevron {
+        transform: rotate(-90deg);
+      }
+    }
+  }
+}
+@keyframes open {
+  0% {
+    opacity: 0;
+    transform: translateY(-1rem);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

src/components/atoms/AccordionItem/AccordionItem.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta, Story } from '@storybook/react';
+import { AccordionItem, AccordionItemProps } from './AccordionItem';
+
+export default {
+  title: 'Components/Atoms/AccordionItem',
+  component: AccordionItem,
+  parameters: { actions: { argTypesRegex: null } },
+} as Meta;
+
+const Template: Story<AccordionItemProps> = (args) => (
+  <AccordionItem {...args} />
+);
+
+export const Primary: { args: AccordionItemProps } = Template.bind({});
+Primary.args = {
+  title: 'AccordionItem Title',
+  children: 'AccordionItem Content',
+};

src/components/atoms/AccordionItem/AccordionItem.tsx

@@ -0,0 +1,52 @@
+import { HTMLAttributes, useState } from 'react';
+import classnames from 'classnames';
+import { DropdownChevron } from '../Icons';
+import './AccordionItem.scss';
+
+export interface AccordionItemProps
+  extends Pick<HTMLAttributes<'div'>, 'className' | 'style'> {
+  title: string;
+  iconSize?: number;
+  open?: boolean;
+  onClick?: () => void;
+  children?: React.ReactNode;
+}
+
+export const AccordionItem = ({
+  title,
+  className,
+  style,
+  iconSize,
+  onClick,
+  open = false,
+  children,
+}: AccordionItemProps) => {
+  const [isOpen, setIsOpen] = useState(open);
+  const isExpanded = open ?? isOpen;
+
+  const handleToggle = () => {
+    setIsOpen((prevState) => !prevState);
+  };
+  return (
+    <div
+      className={classnames('accordion-item', className, {
+        'accordion-item--open': isExpanded,
+      })}
+      style={style}
+    >
+      <button
+        className="accordion-item__header"
+        type="button"
+        onClick={onClick ?? handleToggle}
+      >
+        <h5>{title}</h5>
+        <DropdownChevron
+          className="chevron"
+          width={iconSize}
+          height={iconSize}
+        />
+      </button>
+      {isExpanded && <div className="accordion-item__content">{children}</div>}
+    </div>
+  );
+};

src/components/atoms/AccordionItem/index.ts

@@ -0,0 +1 @@
+export * from './AccordionItem';

src/components/atoms/Icons/Components/DropdownChevron.tsx

@@ -0,0 +1,25 @@
+import cn from 'classnames';
+import { IconProps } from '../types';
+
+export const DropdownChevron = ({
+  width = 32,
+  height = 32,
+  className,
+  color = '#FFFBFF',
+  ...props
+}: IconProps) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={cn('icon-component', className)}
+    {...props}
+  >
+    <path
+      d="M12.2267 9.33335C11.9783 9.58317 11.8389 9.9211 11.8389 10.2734C11.8389 10.6256 11.9783 10.9635 12.2267 11.2134L16.9467 16L12.2267 20.72C11.9783 20.9698 11.8389 21.3078 11.8389 21.66C11.8389 22.0123 11.9783 22.3502 12.2267 22.6C12.3506 22.725 12.4981 22.8242 12.6605 22.8919C12.823 22.9596 12.9973 22.9944 13.1733 22.9944C13.3493 22.9944 13.5236 22.9596 13.6861 22.8919C13.8486 22.8242 13.996 22.725 14.12 22.6L19.7733 16.9467C19.8983 16.8227 19.9975 16.6753 20.0652 16.5128C20.1329 16.3503 20.1677 16.176 20.1677 16C20.1677 15.824 20.1329 15.6497 20.0652 15.4872C19.9975 15.3248 19.8983 15.1773 19.7733 15.0534L14.12 9.33335C13.996 9.20838 13.8486 9.10919 13.6861 9.0415C13.5236 8.97381 13.3493 8.93895 13.1733 8.93895C12.9973 8.93895 12.823 8.97381 12.6605 9.0415C12.4981 9.10919 12.3506 9.20838 12.2267 9.33335Z"
+      fill={color}
+    />
+  </svg>
+);

src/components/atoms/Icons/Components/index.ts

@@ -0,0 +1 @@
+export * from './DropdownChevron';

src/components/atoms/Icons/index.ts

@@ -0,0 +1 @@
+export * from './Components';

src/components/atoms/Icons/types.ts

@@ -0,0 +1,3 @@
+import { SVGAttributes } from 'react';
+
+export interface IconProps extends SVGAttributes<SVGElement> {}

src/components/atoms/Navigation/Navigation.scss

@@ -4,21 +4,61 @@ $color-font-hover: linear-gradient(270deg, var(--color-1), var(--color-2));
 
 .nav {
   margin: 0;
-  padding: 0;
+  padding: 1rem;
   list-style: none;
+  width: fit-content;
 
   &-item {
-    a {
-      @include u.font($size: var(--font-size-small));
+    padding: 0.5rem;
+    color: var(--base-color);
+    @include u.font($size: var(--font-size-small));
 
+    a {
       position: relative;
-      width: max-content;
 
       &:hover {
         background: $color-font-hover;
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
       }
     }
+
+    &--menu {
+      position: relative;
+
+      .chevron {
+        transform: rotate(90deg);
+      }
+    }
+  }
+
+  &-submenu {
+    position: absolute;
+    inset-block-start: 2rem;
+    width: max-content;
+    padding: 0.5rem !important;
+    list-style: none;
+    background: var(--main-black);
+    border-radius: 0 0 8px 8px;
+    display: flex;
+    flex-direction: column;
+    z-index: 10;
+
+    .chevron {
+      transform: none;
+    }
+
+    & & {
+      inset-block-start: 0;
+      inset-inline-start: 100%;
+    }
+
+    .nav-item {
+      a {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+    }
   }
 }

src/components/atoms/Navigation/Navigation.stories.tsx

@@ -1,40 +1,67 @@
 import { Meta, Story } from '@storybook/react';
 import { Navigation } from './Navigation';
+import { NavigationItem } from './NavigationItem';
 
 export default {
   title: 'Components/Atoms/Navigation',
   component: Navigation,
 } as Meta;
 
 const Template: Story = (args) => (
-  <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
-    <Navigation {...args}>
-      <a key={1} href="#how-it-works">
-        How it works
-      </a>
-      ,
-      <a key={2} href="#how-it-works">
-        How it works
-      </a>
-      ,
-      <a key={3} href="#how-it-works">
-        How it works
-      </a>
-      ,
-      <a key={4} href="#how-it-works">
-        How it works
-      </a>
-      ,
-      <a key={5} href="#how-it-works">
-        How it works
-      </a>
-      ,
-      <a key={6} href="#how-it-works">
-        How it works
-      </a>
-      ,
+  <Navigation {...args}>
+    <NavigationItem key={1}>
+      <a href="#how-it-works">About</a>
+    </NavigationItem>
+    <NavigationItem key={2}>
+      <a href="#how-it-works">Services</a>
+    </NavigationItem>
+    <NavigationItem key={3}>
+      <a href="#how-it-works">Use Cases</a>
+    </NavigationItem>
+    <Navigation isSubmenu title="Sub Menu">
+      <NavigationItem key={1}>
+        <a href="#how-it-works">Crypto</a>
+      </NavigationItem>
+      <Navigation isSubmenu title="Sub Sub Menu">
+        <NavigationItem key={1}>
+          <a href="#how-it-works">Web3</a>
+        </NavigationItem>
+        <NavigationItem key={2}>
+          <a href="#how-it-works">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M21.92 11.6C19.9 6.91 16.1 4 12 4C7.90001 4 4.10001 6.91 2.08001 11.6C2.02494 11.7262 1.99652 11.8623 1.99652 12C1.99652 12.1377 2.02494 12.2738 2.08001 12.4C4.10001 17.09 7.90001 20 12 20C16.1 20 19.9 17.09 21.92 12.4C21.9751 12.2738 22.0035 12.1377 22.0035 12C22.0035 11.8623 21.9751 11.7262 21.92 11.6ZM12 18C8.83001 18 5.83001 15.71 4.10001 12C5.83001 8.29 8.83001 6 12 6C15.17 6 18.17 8.29 19.9 12C18.17 15.71 15.17 18 12 18ZM12 8C11.2089 8 10.4355 8.2346 9.77773 8.67412C9.11993 9.11365 8.60724 9.73836 8.30449 10.4693C8.00174 11.2002 7.92252 12.0044 8.07686 12.7804C8.2312 13.5563 8.61217 14.269 9.17158 14.8284C9.73099 15.3878 10.4437 15.7688 11.2196 15.9231C11.9956 16.0775 12.7998 15.9983 13.5307 15.6955C14.2616 15.3928 14.8864 14.8801 15.3259 14.2223C15.7654 13.5645 16 12.7911 16 12C16 10.9391 15.5786 9.92172 14.8284 9.17157C14.0783 8.42143 13.0609 8 12 8ZM12 14C11.6044 14 11.2178 13.8827 10.8889 13.6629C10.56 13.4432 10.3036 13.1308 10.1522 12.7654C10.0009 12.3999 9.96126 11.9978 10.0384 11.6098C10.1156 11.2219 10.3061 10.8655 10.5858 10.5858C10.8655 10.3061 11.2219 10.1156 11.6098 10.0384C11.9978 9.96126 12.3999 10.0009 12.7654 10.1522C13.1308 10.3036 13.4432 10.56 13.6629 10.8889C13.8827 11.2178 14 11.6044 14 12C14 12.5304 13.7893 13.0391 13.4142 13.4142C13.0391 13.7893 12.5304 14 12 14Z"
+                fill="url(#paint0_linear_1951_3078)"
+              />
+              <defs>
+                <linearGradient
+                  id="paint0_linear_1951_3078"
+                  x1="22.7559"
+                  y1="11.886"
+                  x2="1.86124"
+                  y2="11.4777"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop stop-color="#CE09FF" />
+                  <stop offset="1" stop-color="#FFA34E" />
+                </linearGradient>
+              </defs>
+            </svg>
+            Find Us
+          </a>
+        </NavigationItem>
+      </Navigation>
     </Navigation>
-  </ul>
+    <NavigationItem key={5}>
+      <a href="#how-it-works">Contact Us</a>
+    </NavigationItem>
+  </Navigation>
 );
 
 export const Primary = Template.bind({});