oddsgate-ds 1.0.224 → 1.0.226

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

@@ -1,4 +1,4 @@
 import { IButton } from './Button.interface';
 import React from 'react';
-declare const Button: ({ id, as, children, variant, mode, outlined, leftIcon, rightIcon, removeLabel, className, href, ariaLabel, rel, target, disabled, type, ...props }: IButton) => React.JSX.Element;
+declare const Button: ({ id, as, children, variant, mode, outlined, leftIcon, rightIcon, removeLabel, className, href, ariaLabel, rel, target, disabled, type, iconAnimation, hideIconOnMobile, ...props }: IButton) => React.JSX.Element;
 export default Button;

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

@@ -20,9 +20,13 @@ interface IButtonBase {
 export interface IButtonSC extends IButtonBase {
     $variant?: string;
     $mode?: string;
+    $iconAnimation?: boolean;
+    $hideIconOnMobile?: boolean;
 }
 export interface IButton extends IButtonBase {
     variant?: string;
     mode?: string;
+    iconAnimation?: boolean;
+    hideIconOnMobile?: boolean;
 }
 export {};

package/dist/types.d.ts

@@ -156,9 +156,11 @@ interface IButtonBase {
 interface IButton extends IButtonBase {
     variant?: string;
     mode?: string;
+    iconAnimation?: boolean;
+    hideIconOnMobile?: boolean;
 }
 
-declare const Button: ({ id, as, children, variant, mode, outlined, leftIcon, rightIcon, removeLabel, className, href, ariaLabel, rel, target, disabled, type, ...props }: IButton) => React__default.JSX.Element;
+declare const Button: ({ id, as, children, variant, mode, outlined, leftIcon, rightIcon, removeLabel, className, href, ariaLabel, rel, target, disabled, type, iconAnimation, hideIconOnMobile, ...props }: IButton) => React__default.JSX.Element;
 
 type ISpacer = {
     id?: string;

package/package.json

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

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

@@ -20,6 +20,8 @@ const Button = ({
   target,
   disabled,
   type,
+  iconAnimation=true,
+  hideIconOnMobile=true,
   ...props
 }: IButton) => {
   return (
@@ -37,6 +39,8 @@ const Button = ({
       rel={href ? rel : undefined}
       aria-label={href ? ariaLabel : undefined}
       className={className}
+      $iconAnimation={iconAnimation}
+      $hideIconOnMobile={hideIconOnMobile}
       {...props}
     >
       {variant === 'primary' || variant === 'secondary' ? (

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

@@ -21,9 +21,13 @@ interface IButtonBase {
 export interface IButtonSC extends IButtonBase {
   $variant?: string;
   $mode?: string;
+  $iconAnimation?: boolean;
+  $hideIconOnMobile?: boolean;
 }
 export interface IButton extends IButtonBase {
   variant?: string;
   mode?: string;
+  iconAnimation?: boolean;
+  hideIconOnMobile?: boolean;
 }
 

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

@@ -33,9 +33,11 @@ export const StyledButton = styled.a<IButtonSC>`
   }
 
   @media only screen and (max-width: ${responsiveMedia}) {
-    & i {
-      display: none !important;
-    }
+    ${props => props.$hideIconOnMobile && css`
+      & i {
+        display: none !important;
+      }
+    `}
     span {
       transform: unset !important;
     }
@@ -54,38 +56,45 @@ export const StyledButton = styled.a<IButtonSC>`
 
           ${props.$mode === 'darkNewsletter'
             ? css`
-          color: ${colors.secondary50};
-          background-color: ${colors.third50};
+                color: ${colors.secondary50};
+                background-color: ${colors.third50};
               `
             : props.$mode === 'light'
-            ? css`
-          color: ${colors.primary50};
-          background-color: ${colors.secondary50};
-              `
-            : css`
-          color: ${colors.secondary50};
-          background-color: ${colors.primary50};
-              `}
+              ? css`
+                  color: ${colors.primary50};
+                  background-color: ${colors.secondary50};
+                `
+              : css`
+                  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 {
-            & span {
-              transform: translateX(-1rem);
-            }
-            & i {
-              opacity: 1;
-              transform: scale(1) translateX(0) translateY(-50%);
+            ${props.$iconAnimation &&
+            css`
+              position: absolute;
+              opacity: 0;
+              transform: scale(0) translateX(-4px) translateY(-50%);
+            `}
             }
+
+            ${props.$iconAnimation &&
+            css`
+              &:hover {
+                & span {
+                  transform: translateX(-1rem);
+                }
+                & i {
+                  opacity: 1;
+                  transform: scale(1) translateX(0) translateY(-50%);
+                }
+              }
+            `}
           }
 
           @media only screen and (min-width: ${responsiveMedia}) {
@@ -176,10 +185,10 @@ export const StyledButton = styled.a<IButtonSC>`
   ${({ disabled }) =>
     disabled &&
     css`
-    color: ${colors.gray50} !important;
-    border: 1px solid transparent;
+      color: ${colors.gray50} !important;
+      border: 1px solid transparent;
 
-    pointer-events: none;
-    user-select: none;
-  `}
+      pointer-events: none;
+      user-select: none;
+    `}
 `

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

@@ -25,7 +25,7 @@ const CategoriesWrapper: React.FC<CategoriesWrapperProps> = ({
             {categoryItems.map((item, index) => (
               <StyledCategoryItem key={index}>
                 <a href={item.slug}>
-                  <Button variant="text">{item.title}</Button>
+                  <Button variant="text" iconAnimation={false}>{item.title}</Button>
                 </a>
               </StyledCategoryItem>
             ))}

package/src/components/molecules/CategoriesWrapper/CategoriesWrapper.stories.tsx

@@ -14,14 +14,14 @@ export const Default: Story = {
   args: {
     category: 'A',
     categoryItems: [
-      'Ace',
-      'Admin',
-      'AFK',
-      'Anti-eco',
-      'Aimbot',
-      'All-in',
-      'Armor',
-      'APM'
+      { title: 'Ace', slug: 'ace' },
+      { title: 'Admin', slug: 'admin' },
+      { title: 'AFK', slug: 'afk' },
+      { title: 'Anti-eco', slug: 'anti-eco' },
+      { title: 'Aimbot', slug: 'aimbot' },
+      { title: 'All-in', slug: 'all-in' },
+      { title: 'Armor', slug: 'armor' },
+      { title: 'APM', slug: 'apm' }
     ]
   }
 }

package/src/components/molecules/CategoryIndex/CategoryIndex.stories.tsx

@@ -15,7 +15,7 @@ export const Default = () => {
 
   return (
     <CategoryIndex
-      categories={[...categories]}
+      categories={categories.map(cat => ({ name: cat, slug: cat }))}
       selectedCategory={selected}
       onChange={setSelected}
     />

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

@@ -14,7 +14,7 @@ export const StyledGlossaryCategoryIndexItem = styled.div<ItemProps>`
   cursor: pointer;
   border-radius: 100%;
   background-color: ${({ isSelected }) =>
-    isSelected ? `${colors.primary50}66` : ''};
+    isSelected ? `${colors.primary50}` : ''};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -27,4 +27,9 @@ export const StyledGlossaryCategoryIndexItem = styled.div<ItemProps>`
   @media (max-width: ${responsiveMedia}) {
     font-size: 20px;
   }
+  &:hover {
+    background-color: ${({ isSelected }) =>
+    !isSelected ? `${colors.primary50}66` : ''};
+  }
+
 `

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

@@ -76,9 +76,10 @@ export const Glossary: React.FC<GlossaryProps> = ({
                 <Icon
                   icon="icon-arrowDown"
                   className="ml-12"
-                  style={{ width: '14px' }}
+                  style={{ fontSize: '12px' }}
                 />
               }
+              iconAnimation={false}
             >
               {backToTopButton}
             </Button>

package/src/components/organisms/Glossary/Glossary.themes.ts

@@ -23,7 +23,7 @@ export const StyledNoResultsContainer = styled.div`
   margin-top: 96px;
   margin-bottom: 120px;
   @media (max-width: ${responsiveMedia}) {
-    margin-top: 64x;
+    margin-top: 64px;
     margin-bottom: 80px;
   }
 `