oddsgate-ds 1.0.171 → 1.0.175

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

@@ -1,145 +1,144 @@
-import { colors, gutter, radius, responsiveMedia, responsiveMediaMax, shadows, spaces } from '@/styles/variables';
-import styled, { css } from 'styled-components';
-
-import { ISlider } from './Slider.interface';
-
-const SliderStyles = `
-    .blaze-slider {
-    /* default config */
-    --slides-to-show: 1;
-    --slide-gap: 1rem;
-    /* force ltr - slider does not work in rtl mode */
-    direction: ltr;
-  }
-
-  .blaze-container {
-    position: relative;
-  }
-
-  .blaze-track-container {
-    overflow: hidden;
-  }
-
-  .blaze-track {
-    will-change: transform;
-    touch-action: pan-y;
-    display: flex;
-    gap: var(--slide-gap);
-
-    --slide-width: calc(
-      (100% - (var(--slides-to-show) - 1) * var(--slide-gap)) /
-        var(--slides-to-show)
-    );
-  }
-
-  .blaze-track > div {
-    width: var(--slide-width);
-    max-width: unset !important;
-    flex-shrink: 0;
-  }
-
-
-  /* Custom styles */
-  .blaze-slider{
-    position:relative;
-
-    &.dragging .blaze-track{
-      cursor:grabbing;
-    }
-
-    .blaze-controls{
-      display:flex;
-      align-items:center;
-      justify-content: center;
-      gap:16px;
-      width: 100%;
-      margin-top:1rem;
-    }
-
-      /* pagination buttons */
-    .blaze-pagination{
-      display:flex;
-      justify-content: center;
-      gap:10px;
-
-      button{
-        width:14px;
-        height:14px;
-        background:${colors.third10};
-        border-radius:100%;
-        font-size: 0;
-        padding:0;
-        transition:all 0.3s ease;
-
-        outline:none;
-        border:none;
-        cursor:pointer;
-
-        &.hover{
-          background-color: ${colors.primary50}
-        }
-        &.active{
-          background-color: ${colors.primary50}
-        }
-      }
-    }
-
-    /* arrows */
-    .blaze-arrows{
-      position:absolute;
-      top: 50%;
-      right: 0;
-      transform: translateY(-50%);
-    }
-    .blaze-next,
-    .blaze-prev{
-      cursor:pointer;
-
-      i{
-        margin:auto;
-      }
-    }
-
-    &.start .blaze-prev,
-    &.end .blaze-next{
-      opacity: 0.5;
-      cursor:not-allowed;
-    }
-  }
-`;
-
-export const StyledSlider = styled.div<ISlider>`
-  position:relative;
-  width: 100%;
-
-  ${({ $mobileOnly }) => $mobileOnly ? (`
-      @media only screen and (max-width: ${responsiveMediaMax}) {
-        ${SliderStyles}
-      }
-      @media only screen and (min-width: ${responsiveMedia}) {
-        .blaze-track{
-          display: flex;
-          flex-direction: row;
-          align-items: stretch;
-          justify-content: flex-start;
-          flex-wrap: wrap;
-
-          margin-right: -${gutter};
-          margin-left: -${gutter};
-        }
-        .blaze-controls{
-          display:none;
-        }
-      }
-    `)
-    : (`
-
-      ${SliderStyles}
-    `)}
-
-  ${({ $responsiveCSS }) => $responsiveCSS && `
-    .blaze-slider {
-      ${$responsiveCSS};
-    }
-  `}
-`;
+import { colors, gutter, radius, responsiveMedia, responsiveMediaMax, shadows, spaces } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+import { ISlider } from './Slider.interface';
+
+const SliderStyles = ({ $variant }: { $variant?: string }) => `
+  .blaze-slider {
+  /* default config */
+  --slides-to-show: 1;
+  --slide-gap: 1rem;
+  /* force ltr - slider does not work in rtl mode */
+  direction: ltr;
+  }
+
+  .blaze-container {
+  position: relative;
+  }
+
+  .blaze-track-container {
+  overflow: hidden;
+  }
+
+  .blaze-track {
+  will-change: transform;
+  touch-action: pan-y;
+  display: flex;
+  gap: var(--slide-gap);
+
+  --slide-width: calc(
+    (100% - (var(--slides-to-show) - 1) * var(--slide-gap)) /
+    var(--slides-to-show)
+  );
+  }
+
+  .blaze-track > div {
+  width: var(--slide-width);
+  max-width: unset !important;
+  flex-shrink: 0;
+  }
+
+
+  /* Custom styles */
+  .blaze-slider{
+  position:relative;
+
+  &.dragging .blaze-track{
+    cursor:grabbing;
+  }
+
+  .blaze-controls{
+    display:flex;
+    align-items:center;
+    justify-content: center;
+    gap:16px;
+    width: 100%;
+    margin-top:${$variant === 'awards' ? '3rem' : '1rem'};
+  }
+
+    /* pagination buttons */
+  .blaze-pagination{
+    display:flex;
+    justify-content: center;
+    gap:10px;
+
+    button{
+    width:14px;
+    height:14px;
+    background:${$variant === 'awards' ? colors.secondary50 : colors.third10};
+    border-radius:100%;
+    font-size: 0;
+    padding:0;
+    transition:all 0.3s ease;
+
+    outline:none;
+    border:none;
+    cursor:pointer;
+
+    &.hover{
+          background-color: ${colors.primary50}
+    }
+    &.active{
+          background-color: ${colors.primary50}
+    }
+    }
+  }
+
+  /* arrows */
+  .blaze-arrows{
+    position:absolute;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+  }
+  .blaze-next,
+  .blaze-prev{
+    cursor:pointer;
+
+    i{
+    margin:auto;
+    }
+  }
+
+  &.start .blaze-prev,
+  &.end .blaze-next{
+    opacity: 0.5;
+    cursor:not-allowed;
+  }
+  }
+`;
+
+export const StyledSlider = styled.div<ISlider>`
+  position:relative;
+  width: 100%;
+
+  ${({ $mobileOnly, $variant }) => $mobileOnly ? css`
+      @media only screen and (max-width: ${responsiveMediaMax}) {
+        ${SliderStyles({ $variant })}
+      }
+      @media only screen and (min-width: ${responsiveMedia}) {
+        .blaze-track{
+          display: flex;
+          flex-direction: row;
+          align-items: stretch;
+          justify-content: flex-start;
+          flex-wrap: wrap;
+
+          margin-right: -${gutter};
+          margin-left: -${gutter};
+        }
+        .blaze-controls{
+          display:none;
+        }
+      }
+    `
+    : css`
+      ${SliderStyles({ $variant })}
+    `}
+
+  ${({ $responsiveCSS }) => $responsiveCSS && css`
+    .blaze-slider {
+      ${$responsiveCSS};
+    }
+  `}
+`;

package/src/components/organisms/Slider/Slider.utils.tsx

@@ -1,19 +1,19 @@
-import BlazeSlider, { BlazeConfig } from 'blaze-slider';
-import { useEffect, useRef } from 'react';
-
-export function useBlazeSlider(config: BlazeConfig | undefined): {
-  elRef: React.RefObject<any>;
-  sliderRef: React.RefObject<BlazeSlider | undefined>;
-} {
-  const sliderRef = useRef<BlazeSlider | undefined>();
-  const elRef = useRef<any>();
-
-  useEffect(() => {
-    // if not already initialized
-    if (!sliderRef.current) {
-      sliderRef.current = new BlazeSlider(elRef?.current, config) || '';
-    }
-  }, []);
-
-  return { elRef, sliderRef };
-}
+import BlazeSlider, { BlazeConfig } from 'blaze-slider';
+import { useEffect, useRef } from 'react';
+
+export function useBlazeSlider(config: BlazeConfig | undefined): {
+  elRef: React.RefObject<any>;
+  sliderRef: React.RefObject<BlazeSlider | undefined>;
+} {
+  const sliderRef = useRef<BlazeSlider | undefined>();
+  const elRef = useRef<any>();
+
+  useEffect(() => {
+    // if not already initialized
+    if (!sliderRef.current) {
+      sliderRef.current = new BlazeSlider(elRef?.current, config) || '';
+    }
+  }, []);
+
+  return { elRef, sliderRef };
+}

package/src/components/organisms/Slider/index.ts

@@ -1 +1 @@
-export { default } from "./Slider.component";
+export { default } from "./Slider.component";

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

@@ -1,88 +1,88 @@
-import React, { useEffect, useRef, useState } from 'react'
-import {
-  StyledTabs,
-  StyledTabsContent,
-  StyledTabsLinks,
-  StyledTabsMenu
-} from './Tabs.theme'
-
-import Heading from '@/components/atoms/Heading/Heading.component'
-import { ITabs } from './Tabs.interface'
-import { debounce } from '@/helpers/events'
-
-const Tabs = ({ id, title, menu, vertical, className, style }: ITabs) => {
-  const [active, setActive] = useState(0)
-  const tabsContent = useRef<HTMLDivElement>();
-
-  const setActiveEl = (item, index) => {
-    if (item?.onClick) item?.onClick()
-
-    setActive(index);
-  }
-
-
-  const setTabsHeight = debounce(() => {
-    if (!tabsContent.current) return;
-
-    const heights: number[] = [];
-    Array.from(tabsContent?.current?.children).map((child: any) => {
-      heights.push(child?.offsetHeight as number)
-    })
-    tabsContent.current.style.height = `${Math.max(...heights)}px`;
-  }, 250)
-
-  useEffect(()=>{
-    setTabsHeight();
-    window.addEventListener('resize', setTabsHeight);
-
-    return () => {
-      window.removeEventListener('resize', setTabsHeight);
-    }
-  }, [])
-
-
-  return (
-    <StyledTabs id={id} $vertical={vertical} className={className} style={style}>
-      <div>
-        {title && <Heading tag="h3" size="h1" className='text-uppercase mb-4'>{title}</Heading>}
-        <StyledTabsMenu align='left'>
-          {menu &&
-            menu.map((item, index) => {
-              return (
-                <div key={`tab-${item.id}`}>
-                  <StyledTabsLinks
-                    $active={index === active}
-                    className='h3 fw-bold'
-                    onClick={() => {
-                      setActiveEl(item, index);
-                    }}
-                  >
-                    <span>{item.label}</span>
-                  </StyledTabsLinks>
-                </div>
-              )
-            })}
-        </StyledTabsMenu>
-      </div>
-      {menu && (
-        <div ref={tabsContent as any} className='position-relative'>
-          {menu.map((item, index) => {
-            return (
-              <StyledTabsContent
-                key={`tab-content-${item.id}`}
-                $active={index === active}
-                className='h4'
-              >
-
-                <div>{item.content}</div>
-                <Heading tag='span' size='h3' className='color-secondary50 fw-bold mt-5'>{item.label}</Heading>
-              </StyledTabsContent>
-            )
-          })}
-        </div>
-      )}
-    </StyledTabs>
-  )
-}
-
-export default Tabs
+import React, { useEffect, useRef, useState } from 'react'
+import {
+  StyledTabs,
+  StyledTabsContent,
+  StyledTabsLinks,
+  StyledTabsMenu
+} from './Tabs.theme'
+
+import Heading from '@/components/atoms/Heading/Heading.component'
+import { ITabs } from './Tabs.interface'
+import { debounce } from '@/helpers/events'
+
+const Tabs = ({ id, title, menu, vertical, className, style }: ITabs) => {
+  const [active, setActive] = useState(0)
+  const tabsContent = useRef<HTMLDivElement>();
+
+  const setActiveEl = (item, index) => {
+    if (item?.onClick) item?.onClick()
+
+    setActive(index);
+  }
+
+
+  const setTabsHeight = debounce(() => {
+    if (!tabsContent.current) return;
+
+    const heights: number[] = [];
+    Array.from(tabsContent?.current?.children).map((child: any) => {
+      heights.push(child?.offsetHeight as number)
+    })
+    tabsContent.current.style.height = `${Math.max(...heights)}px`;
+  }, 250)
+
+  useEffect(()=>{
+    setTabsHeight();
+    window.addEventListener('resize', setTabsHeight);
+
+    return () => {
+      window.removeEventListener('resize', setTabsHeight);
+    }
+  }, [])
+
+
+  return (
+    <StyledTabs id={id} $vertical={vertical} className={className} style={style}>
+      <div>
+        {title && <Heading tag="h3" size="h1" className='text-uppercase mb-4'>{title}</Heading>}
+        <StyledTabsMenu align='left'>
+          {menu &&
+            menu.map((item, index) => {
+              return (
+                <div key={`tab-${item.id}`}>
+                  <StyledTabsLinks
+                    $active={index === active}
+                    className='h3 fw-bold'
+                    onClick={() => {
+                      setActiveEl(item, index);
+                    }}
+                  >
+                    <span>{item.label}</span>
+                  </StyledTabsLinks>
+                </div>
+              )
+            })}
+        </StyledTabsMenu>
+      </div>
+      {menu && (
+        <div ref={tabsContent as any} className='position-relative'>
+          {menu.map((item, index) => {
+            return (
+              <StyledTabsContent
+                key={`tab-content-${item.id}`}
+                $active={index === active}
+                className='h4'
+              >
+
+                <div>{item.content}</div>
+                <Heading tag='span' size='h3' className='color-secondary50 fw-bold mt-5'>{item.label}</Heading>
+              </StyledTabsContent>
+            )
+          })}
+        </div>
+      )}
+    </StyledTabs>
+  )
+}
+
+export default Tabs

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

@@ -1,18 +1,18 @@
-import { CSSProperties } from 'react';
-
-export interface ITabs {
-  id?: string
-  title?: string
-  menu?: ITabsItem[]
-  vertical?: boolean
-  $vertical?: boolean
-  className?: string
-  style?: CSSProperties
-}
-export interface ITabsItem {
-  id?: string
-  label?: string
-  $active?: boolean
-  content?: React.ReactNode
-  onClick?: (event?: React.MouseEvent<HTMLElement>) => void
-}
+import { CSSProperties } from 'react';
+
+export interface ITabs {
+  id?: string
+  title?: string
+  menu?: ITabsItem[]
+  vertical?: boolean
+  $vertical?: boolean
+  className?: string
+  style?: CSSProperties
+}
+export interface ITabsItem {
+  id?: string
+  label?: string
+  $active?: boolean
+  content?: React.ReactNode
+  onClick?: (event?: React.MouseEvent<HTMLElement>) => void
+}