oddsgate-ds 1.0.169 → 1.0.171

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

@@ -1,34 +1,34 @@
-import { ISpacer } from './Spacer.interface';
-import React from 'react';
-import { StyledSpacer } from './Spacer.theme';
-
-const Spacer = ({
-  id,
-  color = 'transparent',
-  customHeight,
-  customHeightTablet,
-  customHeightMobile,
-  height,
-  className,
-  gradient
-
-}: ISpacer) => {
-
-  const actualHeight = customHeight ?? `var(--space-${String(height)})`;
-  const actualHeightTablet = customHeightTablet ?? actualHeight;
-  const actualHeightMobile = customHeightMobile ?? actualHeight;
-
-  return (
-    <StyledSpacer
-      id={id}
-      $color={ gradient ? gradient : color}
-      $height={actualHeight}
-      $customHeightTablet={actualHeightTablet}
-      $customHeightMobile={actualHeightMobile}
-      className={className}
-      aria-hidden="true"
-    />
-  );
-};
-
-export default Spacer;
+import { ISpacer } from './Spacer.interface';
+import React from 'react';
+import { StyledSpacer } from './Spacer.theme';
+
+const Spacer = ({
+  id,
+  color = 'transparent',
+  customHeight,
+  customHeightTablet,
+  customHeightMobile,
+  height,
+  className,
+  gradient
+
+}: ISpacer) => {
+
+  const actualHeight = customHeight ?? `var(--space-${String(height)})`;
+  const actualHeightTablet = customHeightTablet ?? actualHeight;
+  const actualHeightMobile = customHeightMobile ?? actualHeight;
+
+  return (
+    <StyledSpacer
+      id={id}
+      $color={ gradient ? gradient : color}
+      $height={actualHeight}
+      $customHeightTablet={actualHeightTablet}
+      $customHeightMobile={actualHeightMobile}
+      className={className}
+      aria-hidden="true"
+    />
+  );
+};
+
+export default Spacer;

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

@@ -1,24 +1,24 @@
-import { CSSProperties } from 'react';
-import { spaces } from '@/styles/variables';
-
-export type ISpacer = {
-  id?: string
-  anchor?: string
-  color?: string
-  height?: keyof typeof spaces | string | number
-  customHeight?: string
-  customHeightTablet?: string
-  customHeightMobile?: string
-  className?: string;
-  style?: CSSProperties;
-  gradient?: string;
-}
-
-
-
-export type ISCSpacer = {
-  $color: ISpacer['color'];
-  $height: ISpacer['height'];
-  $customHeightTablet: ISpacer['customHeightTablet'];
-  $customHeightMobile: ISpacer['customHeightMobile'];
-};
+import { CSSProperties } from 'react';
+import { spaces } from '@/styles/variables';
+
+export type ISpacer = {
+  id?: string
+  anchor?: string
+  color?: string
+  height?: keyof typeof spaces | string | number
+  customHeight?: string
+  customHeightTablet?: string
+  customHeightMobile?: string
+  className?: string;
+  style?: CSSProperties;
+  gradient?: string;
+}
+
+
+
+export type ISCSpacer = {
+  $color: ISpacer['color'];
+  $height: ISpacer['height'];
+  $customHeightTablet: ISpacer['customHeightTablet'];
+  $customHeightMobile: ISpacer['customHeightMobile'];
+};

package/src/components/atoms/Spacer/Spacer.stories.tsx

@@ -1,99 +1,99 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-import Spacer from '../Spacer/Spacer.component';
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/Spacer',
-  component: Spacer,
-  tags: ['autodocs'],
-  argTypes: {
-    color: {
-      control: 'color',
-      description: 'Background color of the spacer',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    gradient: {
-      control: 'select',
-      description: 'Background gradient of the spacer',
-      options: {
-        none: '',
-        Gradient: "linear-gradient(to right, #6776F7 0%, #FDBFFE 28%, #FC4D11 64%, #FFFD1C 100%)",
-        InvertedGradient: "linear-gradient(to left, #6776F7 0%, #FDBFFE 28%, #FC4D11 64%, #FFFD1C 100%)",
-      }
-    },
-    height: {
-      control: 'text',
-      description: 'Default height of the spacer',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    customHeight: {
-      control: 'text',
-      description: 'Custom height of the spacer',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    customHeightTablet: {
-      control: 'text',
-      description: 'Custom height for tablets',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    customHeightMobile: {
-      control: 'text',
-      description: 'Custom height for mobile devices',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-  },
-} 
-
-export const Simple: StoryObj<typeof Spacer> = {
-  render: args => <Spacer {...args} />,
-  args: {
-    color: '#000',
-    height: '20px',
-    customHeight: '50px',
-    customHeightTablet: '40px',
-    customHeightMobile: '30px',
-  },
-};
-export const Gradient: StoryObj<typeof Spacer> = {
-  render: args => <Spacer {...args} />,
-  args: {
-    color: 'linear-gradient(to right, #6776F7 0%, #FDBFFE 28%, #FC4D11 64%, #FFFD1C 100%)',
-    height: '20px',
-    customHeight: '50px',
-    customHeightTablet: '40px',
-    customHeightMobile: '30px',
-  },
-};
-
-export const WithDifferentHeights: StoryObj<typeof Spacer> = {
-  render: args => <Spacer {...args} />,
-  args: {
-    color: '#f00',
-    height: '30px',
-    customHeight: '60px',
-    customHeightTablet: "500px",
-    customHeightMobile: '500px',
-  },
-};
-
-export const CustomColorAndHeight: StoryObj<typeof Spacer> = {
-  render: args => <Spacer {...args} />,
-  args: {
-    color: '#00f',
-    height: '10px',
-    customHeight: '20px',
-    customHeightTablet: '15px',
-    customHeightMobile: '10px',
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import Spacer from '../Spacer/Spacer.component';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/Spacer',
+  component: Spacer,
+  tags: ['autodocs'],
+  argTypes: {
+    color: {
+      control: 'color',
+      description: 'Background color of the spacer',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    gradient: {
+      control: 'select',
+      description: 'Background gradient of the spacer',
+      options: {
+        none: '',
+        Gradient: "linear-gradient(to right, #6776F7 0%, #FDBFFE 28%, #FC4D11 64%, #FFFD1C 100%)",
+        InvertedGradient: "linear-gradient(to left, #6776F7 0%, #FDBFFE 28%, #FC4D11 64%, #FFFD1C 100%)",
+      }
+    },
+    height: {
+      control: 'text',
+      description: 'Default height of the spacer',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    customHeight: {
+      control: 'text',
+      description: 'Custom height of the spacer',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    customHeightTablet: {
+      control: 'text',
+      description: 'Custom height for tablets',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    customHeightMobile: {
+      control: 'text',
+      description: 'Custom height for mobile devices',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+  },
+} 
+
+export const Simple: StoryObj<typeof Spacer> = {
+  render: args => <Spacer {...args} />,
+  args: {
+    color: '#000',
+    height: '20px',
+    customHeight: '50px',
+    customHeightTablet: '40px',
+    customHeightMobile: '30px',
+  },
+};
+export const Gradient: StoryObj<typeof Spacer> = {
+  render: args => <Spacer {...args} />,
+  args: {
+    color: 'linear-gradient(to right, #6776F7 0%, #FDBFFE 28%, #FC4D11 64%, #FFFD1C 100%)',
+    height: '20px',
+    customHeight: '50px',
+    customHeightTablet: '40px',
+    customHeightMobile: '30px',
+  },
+};
+
+export const WithDifferentHeights: StoryObj<typeof Spacer> = {
+  render: args => <Spacer {...args} />,
+  args: {
+    color: '#f00',
+    height: '30px',
+    customHeight: '60px',
+    customHeightTablet: "500px",
+    customHeightMobile: '500px',
+  },
+};
+
+export const CustomColorAndHeight: StoryObj<typeof Spacer> = {
+  render: args => <Spacer {...args} />,
+  args: {
+    color: '#00f',
+    height: '10px',
+    customHeight: '20px',
+    customHeightTablet: '15px',
+    customHeightMobile: '10px',
+  },
+};

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

@@ -1,33 +1,33 @@
-import styled, { css } from "styled-components";
-import { ISCSpacer } from "./Spacer.interface";
-import { variables } from "@/index";
-
-export const StyledSpacer = styled.div<ISCSpacer>`
-  ${({ $color }) =>
-    $color &&
-    css`
-      background: ${$color};
-    `}
-
-  ${({ $height }) =>
-    css`
-      height: ${$height};
-    `}
-
-
-  ${({ $customHeightTablet }) =>
-    $customHeightTablet &&
-    css`
-      @media (max-width: ${variables.desktop_width}px) {
-        height: ${$customHeightTablet};
-      }
-    `}
-
-  ${({ $customHeightMobile }) =>
-    $customHeightMobile &&
-    css`
-      @media (max-width: ${variables.tablet_width}px) {
-        height: ${$customHeightMobile};
-      }
-    `}
-`;
+import styled, { css } from "styled-components";
+import { ISCSpacer } from "./Spacer.interface";
+import { variables } from "@/index";
+
+export const StyledSpacer = styled.div<ISCSpacer>`
+  ${({ $color }) =>
+    $color &&
+    css`
+      background: ${$color};
+    `}
+
+  ${({ $height }) =>
+    css`
+      height: ${$height};
+    `}
+
+
+  ${({ $customHeightTablet }) =>
+    $customHeightTablet &&
+    css`
+      @media (max-width: ${variables.desktop_width}px) {
+        height: ${$customHeightTablet};
+      }
+    `}
+
+  ${({ $customHeightMobile }) =>
+    $customHeightMobile &&
+    css`
+      @media (max-width: ${variables.tablet_width}px) {
+        height: ${$customHeightMobile};
+      }
+    `}
+`;

package/src/components/atoms/Spacer/index.ts

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

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

@@ -1,116 +1,116 @@
-import React, { useRef } from 'react'
-import { StyledVideo, StyledVideoMask, StyledVideoPlay } from './Video.theme'
-
-import { IVideo } from './Video.interface'
-
-const Video = ({
-  src,
-  poster,
-  autoplay,
-  controls,
-  loop,
-  muted,
-  playsInline,
-  className,
-  style,
-  ...props
-}: IVideo) => {
-  const maskRef: any = useRef()
-  const videoRef: any = useRef()
-  let isPlaying: boolean = false
-
-  const setFramed = () => {
-    const video = document.createElement('video')
-    const source = document.createElement('source')
-
-    autoplay && video.setAttribute('autoPlay', '')
-    controls && video.setAttribute('controls', '')
-    loop && video.setAttribute('loop', '')
-    muted && video.setAttribute('muted', '')
-    playsInline && video.setAttribute('playsInline', '')
-
-    source.setAttribute('src', src || '')
-    source.setAttribute('type', 'video/mp4')
-
-    video.appendChild(source)
-    video.pause()
-
-    video.onplaying = function () {
-      isPlaying = true
-    }
-    video.onpause = function () {
-      isPlaying = false
-    }
-
-    maskRef.current.replaceWith(video)
-
-    let observerObj = new IntersectionObserver(
-      (entries, observer) => {
-        const element: any = entries[0].target
-        if (entries[0].isIntersecting) {
-          if (
-            element.paused &&
-            !isPlaying &&
-            element.getAttribute('autoplay') != undefined
-          ) {
-            element.muted = true
-            element.play()
-          }
-        } else {
-          if (!element.paused && isPlaying) {
-            element.pause()
-          }
-        }
-      },
-      {
-        rootMargin: '0px',
-        threshold: 0.3
-      }
-    )
-
-    setTimeout(() => {
-      observerObj.observe(video)
-    }, 500)
-  }
-
-  return (
-    <StyledVideo className={className} style={style}>
-      {poster ? (
-        <StyledVideoMask
-          ref={maskRef}
-          style={{ backgroundImage: `url(${poster})` }}
-          onClick={() => {
-            setFramed()
-          }}
-        >
-          <StyledVideoPlay>
-            <svg
-              viewBox="0 0 62 72"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M1.30184 71.661C1.70029 71.8869 2.1419 72 2.58334 72C3.03735 72.0002 3.49152 71.8797 3.89774 71.6435L60.7311 38.2131C61.5182 37.7486 62 36.9073 62 35.9982C62 35.0891 61.5182 34.2478 60.7311 33.7832L3.89774 0.352633C3.10067 -0.109486 2.11412 -0.119525 1.30184 0.335024C0.496993 0.792041 0 1.64337 0 2.56761V69.4284C0 70.3526 0.496993 71.204 1.30184 71.661ZM5 65V7L54 36.0001L5 65Z"
-              />
-            </svg>
-          </StyledVideoPlay>
-        </StyledVideoMask>
-      ) : (
-        <video
-          autoPlay={autoplay}
-          controls={controls}
-          loop={loop}
-          muted={muted}
-          playsInline={playsInline}
-        >
-          <source type="video/mp4" src={src} />
-        </video>
-      )}
-
-    </StyledVideo>
-  )
-}
-
-export default Video
+import React, { useRef } from 'react'
+import { StyledVideo, StyledVideoMask, StyledVideoPlay } from './Video.theme'
+
+import { IVideo } from './Video.interface'
+
+const Video = ({
+  src,
+  poster,
+  autoplay,
+  controls,
+  loop,
+  muted,
+  playsInline,
+  className,
+  style,
+  ...props
+}: IVideo) => {
+  const maskRef: any = useRef()
+  const videoRef: any = useRef()
+  let isPlaying: boolean = false
+
+  const setFramed = () => {
+    const video = document.createElement('video')
+    const source = document.createElement('source')
+
+    autoplay && video.setAttribute('autoPlay', '')
+    controls && video.setAttribute('controls', '')
+    loop && video.setAttribute('loop', '')
+    muted && video.setAttribute('muted', '')
+    playsInline && video.setAttribute('playsInline', '')
+
+    source.setAttribute('src', src || '')
+    source.setAttribute('type', 'video/mp4')
+
+    video.appendChild(source)
+    video.pause()
+
+    video.onplaying = function () {
+      isPlaying = true
+    }
+    video.onpause = function () {
+      isPlaying = false
+    }
+
+    maskRef.current.replaceWith(video)
+
+    let observerObj = new IntersectionObserver(
+      (entries, observer) => {
+        const element: any = entries[0].target
+        if (entries[0].isIntersecting) {
+          if (
+            element.paused &&
+            !isPlaying &&
+            element.getAttribute('autoplay') != undefined
+          ) {
+            element.muted = true
+            element.play()
+          }
+        } else {
+          if (!element.paused && isPlaying) {
+            element.pause()
+          }
+        }
+      },
+      {
+        rootMargin: '0px',
+        threshold: 0.3
+      }
+    )
+
+    setTimeout(() => {
+      observerObj.observe(video)
+    }, 500)
+  }
+
+  return (
+    <StyledVideo className={className} style={style}>
+      {poster ? (
+        <StyledVideoMask
+          ref={maskRef}
+          style={{ backgroundImage: `url(${poster})` }}
+          onClick={() => {
+            setFramed()
+          }}
+        >
+          <StyledVideoPlay>
+            <svg
+              viewBox="0 0 62 72"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M1.30184 71.661C1.70029 71.8869 2.1419 72 2.58334 72C3.03735 72.0002 3.49152 71.8797 3.89774 71.6435L60.7311 38.2131C61.5182 37.7486 62 36.9073 62 35.9982C62 35.0891 61.5182 34.2478 60.7311 33.7832L3.89774 0.352633C3.10067 -0.109486 2.11412 -0.119525 1.30184 0.335024C0.496993 0.792041 0 1.64337 0 2.56761V69.4284C0 70.3526 0.496993 71.204 1.30184 71.661ZM5 65V7L54 36.0001L5 65Z"
+              />
+            </svg>
+          </StyledVideoPlay>
+        </StyledVideoMask>
+      ) : (
+        <video
+          autoPlay={autoplay}
+          controls={controls}
+          loop={loop}
+          muted={muted}
+          playsInline={playsInline}
+        >
+          <source type="video/mp4" src={src} />
+        </video>
+      )}
+
+    </StyledVideo>
+  )
+}
+
+export default Video

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

@@ -1,13 +1,13 @@
-import { CSSProperties } from 'react'
-
-export type IVideo = {
-  src?: string
-  poster?: string
-  autoplay?: boolean
-  controls?: boolean
-  loop?: boolean
-  muted?: boolean
-  playsInline?: boolean
-  className?: string
-  style?: CSSProperties
-}
+import { CSSProperties } from 'react'
+
+export type IVideo = {
+  src?: string
+  poster?: string
+  autoplay?: boolean
+  controls?: boolean
+  loop?: boolean
+  muted?: boolean
+  playsInline?: boolean
+  className?: string
+  style?: CSSProperties
+}