oddsgate-ds 1.0.157 → 1.0.159

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

@@ -1,4 +1,4 @@
 import { ISpacer } from './Spacer.interface';
 import React from 'react';
-declare const Spacer: ({ id, color, customHeight, height, className, ...props }: ISpacer) => React.JSX.Element;
+declare const Spacer: ({ id, color, customHeight, customHeightTablet, customHeightMobile, height, className, gradient }: ISpacer) => React.JSX.Element;
 export default Spacer;

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

@@ -2,9 +2,19 @@ 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/dist/esm/types/components/atoms/Spacer/Spacer.theme.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { ISpacer } from './Spacer.interface';
-export declare const StyledSpacer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ISpacer>> & string;
+import { ISCSpacer } from "./Spacer.interface";
+export declare const StyledSpacer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ISCSpacer>> & string;

package/dist/types.d.ts

@@ -162,14 +162,18 @@ declare const Button: ({ id, as, children, variant, mode, outlined, leftIcon, ri
 
 type ISpacer = {
     id?: string;
+    anchor?: string;
     color?: string;
     height?: keyof typeof spaces$1 | string | number;
     customHeight?: string;
+    customHeightTablet?: string;
+    customHeightMobile?: string;
     className?: string;
     style?: CSSProperties;
+    gradient?: string;
 };
 
-declare const Spacer: ({ id, color, customHeight, height, className, ...props }: ISpacer) => React__default.JSX.Element;
+declare const Spacer: ({ id, color, customHeight, customHeightTablet, customHeightMobile, height, className, gradient }: ISpacer) => React__default.JSX.Element;
 
 type ISeparator = {
     color?: string;

package/package.json

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

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

@@ -1,27 +1,34 @@
-import { ISpacer } from './Spacer.interface'
-import React from 'react'
-import { StyledSpacer } from './Spacer.theme'
+import { ISpacer } from './Spacer.interface';
+import React from 'react';
+import { StyledSpacer } from './Spacer.theme';
 
 const Spacer = ({
   id,
-  color,
+  color = 'transparent',
   customHeight,
+  customHeightTablet,
+  customHeightMobile,
   height,
   className,
-  ...props
+  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}
-      style={{
-        backgroundColor: color ? color : ``,
-        height: customHeight ? customHeight : `var(--space-${String(height)})`
-      }}
       aria-hidden="true"
-      {...props}
     />
-  )
-}
+  );
+};
 
-export default Spacer
+export default Spacer;

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

@@ -3,9 +3,22 @@ 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
+  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,8 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { ISpacer } from '../Spacer/Spacer.interface'
-import React from 'react'
-import Spacer from '../Spacer/Spacer.component'
+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 {
@@ -10,19 +8,92 @@ export default {
   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'
+      control: 'text',
+      description: 'Default height of the spacer',
+      table: {
+        type: { summary: 'string' },
+      },
     },
-    color: {
-      control: 'color'
-    }
-  }
-} as Meta
+    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<ISpacer> = {
+export const Simple: StoryObj<typeof Spacer> = {
   render: args => <Spacer {...args} />,
   args: {
+    color: '#000',
+    height: '20px',
     customHeight: '50px',
-    color: '#000'
-  }
-}
+    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,7 +1,33 @@
-import styled, { css } from 'styled-components';
+import styled, { css } from "styled-components";
+import { ISCSpacer } from "./Spacer.interface";
+import { variables } from "@/index";
 
-import { ISpacer } from './Spacer.interface';
+export const StyledSpacer = styled.div<ISCSpacer>`
+  ${({ $color }) =>
+    $color &&
+    css`
+      background: ${$color};
+    `}
 
-export const StyledSpacer = styled.div<ISpacer>`
-  width: 100%;
+  ${({ $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};
+      }
+    `}
 `;