oddsgate-ds 1.0.30 → 1.0.31

package/dist/esm/types/components/atoms/Flex/Flex.component.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
 import { IFlex } from './Flex.interface';
-declare const Flex: ({ direction, align, justify, wrap, children, className, ...props }: IFlex) => React.JSX.Element;
+import React from 'react';
+declare const Flex: ({ direction, align, justify, wrap, gap, children, className, ...props }: IFlex) => React.JSX.Element;
 export default Flex;

package/dist/esm/types/components/atoms/Flex/Flex.interface.d.ts

@@ -11,11 +11,13 @@ export interface IFlex extends IFlexBase {
     align?: flexAlign;
     justify?: flexJustify;
     wrap?: 'wrap' | 'nowrap';
+    gap?: string;
 }
 export interface IFlexSC extends IFlexBase {
     $direction?: 'row' | 'column';
     $align?: flexAlign;
     $justify?: flexJustify;
     $wrap?: 'wrap' | 'nowrap';
+    $gap?: string;
 }
 export {};

package/dist/types.d.ts

@@ -186,9 +186,10 @@ interface IFlex extends IFlexBase {
     align?: flexAlign;
     justify?: flexJustify;
     wrap?: 'wrap' | 'nowrap';
+    gap?: string;
 }
 
-declare const Flex: ({ direction, align, justify, wrap, children, className, ...props }: IFlex) => React__default.JSX.Element;
+declare const Flex: ({ direction, align, justify, wrap, gap, children, className, ...props }: IFlex) => React__default.JSX.Element;
 
 type IIcon = {
     icon?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oddsgate-ds",
-  "version": "1.0.30",
+  "version": "1.0.31",
   "description": "Miew theme component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/atoms/Button/Button.component.tsx

@@ -1,4 +1,5 @@
 import { IButton } from './Button.interface'
+import Icon from '../Icon/Icon.component'
 import React from 'react'
 import { StyledButton } from './Button.theme'
 
@@ -38,9 +39,10 @@ const Button = ({
       className={className}
       {...props}
     >
-      {leftIcon}
+      {/* {leftIcon} */}
       {children && <span>{children}</span>}
-      {rightIcon}
+      <Icon icon={"icon-arrow-right"} />
+      {/* {rightIcon} */}
     </StyledButton>
   )
 }

package/src/components/atoms/Button/Button.theme.ts

@@ -5,6 +5,7 @@ import { IButtonSC } from './Button.interface';
 import { fontSize } from '@/styles/utilities';
 
 export const StyledButton = styled.a<IButtonSC>`
+  position: relative;
   display: inline-flex;
   vertical-align: middle;
   justify-content: center;
@@ -36,7 +37,7 @@ export const StyledButton = styled.a<IButtonSC>`
       case "primary": default:
         return css`
             ${fontSize('h4')};
-            padding: 28px 36px;
+            padding: 2rem 2.8rem;
             border-radius: 50px;
             text-transform:uppercase;
 
@@ -44,26 +45,38 @@ export const StyledButton = styled.a<IButtonSC>`
               color: ${colors.primary50};
               background-color: ${colors.secondary50};
 
-              &:hover{
-                color: ${colors.secondary50};
-                background-color: ${colors.primary50};
-              }
               ` : `
               color: ${colors.secondary50};
               background-color: ${colors.primary50};
+            `}
+
+            & span{
+              transition: all 0.3s ease;
+            }
+            & i{
+              position: absolute;
+              top: 50%;
+              right: 1.8rem;
+              opacity: 0;
+              transform: scale(0) translateX(-4px) translateY(-50%);
+            }
 
-              &:hover{
-                color: ${colors.primary50};
-                background-color: ${colors.secondary50};
+            &:hover{
+              & span{
+                transform: translateX(-1rem);
               }
-            `}
+              & i{
+                opacity: 1;
+                transform: scale(1) translateX(0) translateY(-50%);
+              }
+            }
           `;
       case "secondary":
         return css`
           ${fontSize('h5')};
           font-weight: 700;
           text-transform:uppercase;
-          padding: 10px 20px;
+          padding: 0.8rem 1.6rem;
           border-radius: 50px;
 
           ${props.$mode === "light" ? `

package/src/components/atoms/Flex/Flex.component.tsx

@@ -1,14 +1,13 @@
+import { IFlex } from './Flex.interface';
 import React from 'react';
-
 import { StyledFlex } from '@/components/atoms/Flex/Flex.theme';
 
-import { IFlex } from './Flex.interface';
-
 const Flex = ({
   direction,
   align,
   justify,
   wrap,
+  gap,
   children,
   className,
   ...props
@@ -19,6 +18,7 @@ const Flex = ({
       $align={align}
       $justify={justify}
       $wrap={wrap}
+      $gap={gap}
       className={className}
       {...props}
     >

package/src/components/atoms/Flex/Flex.interface.ts

@@ -13,10 +13,12 @@ export interface IFlex extends IFlexBase{
   align?: flexAlign,
   justify?: flexJustify,
   wrap?: 'wrap' | 'nowrap',
+  gap?: string,
 }
 export interface IFlexSC extends IFlexBase {
   $direction?: 'row' | 'column',
   $align?: flexAlign,
   $justify?: flexJustify,
   $wrap?: 'wrap' | 'nowrap',
+  $gap?: string,
 }

package/src/components/atoms/Flex/Flex.theme.ts

@@ -8,4 +8,5 @@ export const StyledFlex = styled.div<IFlexSC>`
   align-items: ${props => props.$align ? props.$align : "center"};
   justify-content: ${props => props.$justify ? props.$justify : "start"};
   flex-wrap: ${props => props.$wrap ? props.$wrap : "wrap"};
+  gap: ${props => props.$gap ? props.$gap : ""};
 `;

package/src/components/atoms/SocialLinks/SocialLinks.theme.ts

@@ -6,6 +6,7 @@ import { colors } from '@/styles/variables';
 export const StyledSocialLinks = styled.ul<ISocialLinks>`
   display: inline-flex;
   align-items: center;
+  flex-flow: row wrap;
   gap: 12px;
 
   & li{

package/src/components/molecules/Accordion/Accordion.component.tsx

@@ -40,7 +40,7 @@ export const AccordionItem = ({
         }}
       >
         <span>{title}</span>
-        <Icon className={active ? 'icon-arrowUp' : 'icon-arrowDown'} />
+        <Icon className={active ? 'icon-arrowDown' : 'icon-arrowUp'} />
       </StyledAccordionTitle>
       <StyledAccordionContent
         ref={contentEl}

package/src/components/molecules/Accordion/Accordion.theme.ts

@@ -52,7 +52,7 @@ export const StyledAccordionContent = styled.div<IAccordionItem>`
 export const StyledAccordionItem = styled.li<IAccordionItem>`
   position: relative;
   width: 100%;
-  padding: 1rem 2.4rem;
+  padding: 2rem 2.4rem;
   border-radius: 50px;
   color: ${colors.third50};
   background-color: ${colors.secondary50};

package/src/components/organisms/CircularSlider/CircularSlider.component.tsx

@@ -87,7 +87,6 @@ const CircularSlider = ({
     }
 
     const sliderResize = () => {
-      console.log(slider?.current?.getBoundingClientRect().width);
       let radius,
         w = slider?.current ? slider?.current?.getBoundingClientRect().width : 0,
         h = slider?.current ? slider?.current.getBoundingClientRect().height : 0;

package/src/components/organisms/Tabs/Tabs.component.tsx

@@ -50,7 +50,9 @@ const Tabs = ({ id, title, menu, vertical, className, style }: ITabs) => {
                 $active={index === active}
                 className='h4'
               >
-                {item.content}
+
+                <div>{item.content}</div>
+                <Heading tag='span' size='h3' className='color-secondary50 fw-bold mt-5'>{item.label}</Heading>
               </StyledTabsContent>
             )
           })}

package/src/components/organisms/Tabs/Tabs.theme.ts

@@ -41,14 +41,34 @@ export const StyledTabsLinks = styled.a<ITabsItem>`
 
 export const StyledTabsContent = styled.div<ITabsItem>`
   display: none;
+  flex-flow: row wrap;
 
   background-color: ${colors.primary50};
   border-radius: 48px 0;
   padding: 36px;
 
+  min-height: 50rem;
+
   opacity: 0;
   transform: translateY(40px);
 
+  & > span{
+    display: flex;
+    align-items:center;
+    align-self: flex-end;
+    gap: 1rem;
+
+    width: 100%;
+
+    &:before{
+      content:'';
+      width: 3rem;
+      height: 3rem;
+      border-radius: 100%;
+      background-color: ${colors.third50};
+    }
+  }
+
   @keyframes fadeIn{
     from { display: none; }
     to { transform: translateY(0px); opacity: 1;}
@@ -56,7 +76,7 @@ export const StyledTabsContent = styled.div<ITabsItem>`
 
   ${({ $active }) => $active && `
     animation: 0.8s fadeIn forwards;
-    display: block;
+    display: flex;
   `}
 
 `