oddsgate-ds 1.0.97 → 1.0.98

package/dist/esm/types/styles/variables.d.ts

@@ -6,6 +6,7 @@ export declare const desktop_width: number;
 export declare const tablet_width: number;
 export declare const mobile_width: number;
 export declare const responsiveMedia = "768px";
+export declare const responsiveMediaMax = "767px";
 export declare const mobileMedia = "360px";
 export declare const easeOutExpo = "cubic-bezier(.32,.94,.6,1);";
 export type IBreakpoints = {

package/dist/types.d.ts

@@ -11,6 +11,7 @@ declare const desktop_width: number;
 declare const tablet_width: number;
 declare const mobile_width: number;
 declare const responsiveMedia = "768px";
+declare const responsiveMediaMax = "767px";
 declare const mobileMedia = "360px";
 declare const easeOutExpo = "cubic-bezier(.32,.94,.6,1);";
 type IBreakpoints = {
@@ -51,6 +52,7 @@ declare const variables_mobile_width: typeof mobile_width;
 declare const variables_pxToRem: typeof pxToRem;
 declare const variables_radius: typeof radius;
 declare const variables_responsiveMedia: typeof responsiveMedia;
+declare const variables_responsiveMediaMax: typeof responsiveMediaMax;
 declare const variables_shadows: typeof shadows;
 declare const variables_spaces: typeof spaces;
 declare const variables_spacesNegative: typeof spacesNegative;
@@ -73,6 +75,7 @@ declare namespace variables {
     variables_pxToRem as pxToRem,
     variables_radius as radius,
     variables_responsiveMedia as responsiveMedia,
+    variables_responsiveMediaMax as responsiveMediaMax,
     variables_shadows as shadows,
     variables_spaces as spaces,
     variables_spacesNegative as spacesNegative,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oddsgate-ds",
-  "version": "1.0.97",
+  "version": "1.0.98",
   "description": "Miew theme component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -43,6 +43,7 @@
     "@storybook/addon-interactions": "^8.1.5",
     "@storybook/addon-links": "^8.1.5",
     "@storybook/addon-styling": "^1.3.7",
+    "@storybook/addon-viewport": "^8.2.7",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.3",
     "@storybook/blocks": "^8.1.5",
     "@storybook/react": "^8.1.5",

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

@@ -16,15 +16,17 @@ export default {
 export const Simple: StoryObj<IRow> = {
   render: args => (
     <Row {...args}>
-      <Column xs={6} md={8} lg={10}>
+      <Column md={8} lg={10}>
         Column sm-6 md-8 lg-10
       </Column>
-      <Column xs={6} md={4} lg={2}>
+      <Column md={4} lg={2}>
         Column sm-6 md-4 lg-2
       </Column>
     </Row>
   ),
-  args: {}
+  args: {
+    mobileSpace: true,
+  }
 }
 export const Fluid: StoryObj<IRow> = {
   render: args => (
@@ -34,6 +36,7 @@ export const Fluid: StoryObj<IRow> = {
     </Row>
   ),
   args: {
+    mobileSpace: true,
     fluid: true
   }
 }
@@ -50,6 +53,7 @@ export const Order: StoryObj<IRow> = {
     </Row>
   ),
   args: {
+    mobileSpace: true,
     fluid: true
   }
 }

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

@@ -3,7 +3,7 @@
 
 import { IColumnSC, IRowSC } from './FlexGrid.interface';
 import config, { CONTAINER_NAMES, DIMENSION_NAMES } from '@/styles/grid';
-import { grid_conf, gutter, responsiveMedia, spaces } from '@/styles/variables';
+import { grid_conf, gutter, responsiveMedia, responsiveMediaMax, spaces } from '@/styles/variables';
 import styled, { css } from 'styled-components';
 
 export const StyledContainer = styled.div<IRowSC>`
@@ -35,9 +35,9 @@ export const StyledRow = styled.div<IRowSC>`
   margin-left: ${props => props.$fluid ? "0" : `-${gutter}`};
   margin-right: ${props => props.$fluid ? "0" : `-${gutter}`};
 
-  @media only screen and (max-width: ${responsiveMedia}) {
+  @media only screen and (max-width: ${responsiveMediaMax}) {
      ${({ $mobileSpace }) => $mobileSpace && `
-      gap: 1.6rem;
+      gap: 1.6rem 0;
     `}
   }
 `;
@@ -69,7 +69,7 @@ export const StyledColumn = styled.div<IColumnSC>`
     `)
   }
 
-  @media only screen and (max-width: ${responsiveMedia}) {
+  @media only screen and (max-width: ${responsiveMediaMax}) {
     &:empty{
       display:none
     }

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

@@ -1,5 +1,5 @@
 import { IAccordion, IAccordionItem } from './Accordion.interface';
-import { colors, easeOutExpo, responsiveMedia } from '@/styles/variables';
+import { colors, easeOutExpo, responsiveMedia, responsiveMediaMax } from '@/styles/variables';
 import styled, { css } from 'styled-components';
 
 export const StyledAccordionTitle = styled.span<IAccordionItem>`
@@ -48,7 +48,7 @@ export const StyledAccordionContent = styled.div<IAccordionItem>`
     grid-template-rows: 1fr;
   `}
 
-  @media only screen and (max-width: ${responsiveMedia}) {
+  @media only screen and (max-width: ${responsiveMediaMax}) {
     padding-right: 6rem;
   }
 `

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

@@ -1,11 +1,11 @@
-import { colors, responsiveMedia } from '@/styles/variables';
+import { colors, responsiveMediaMax } from '@/styles/variables';
 import styled, { css } from 'styled-components';
 
 import { IOffCanvas } from './OffCanvas.interface';
 
 export const StyledOffCanvas = styled.div<IOffCanvas>`
   display: none;
-  @media only screen and (max-width: ${responsiveMedia}) {
+  @media only screen and (max-width: ${responsiveMediaMax}) {
     display: block !important;
     position: fixed;
     top: 0px;

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

@@ -1,4 +1,4 @@
-import { colors, gutter, radius, responsiveMedia, shadows, spaces } from '@/styles/variables';
+import { colors, gutter, radius, responsiveMedia, responsiveMediaMax, shadows, spaces } from '@/styles/variables';
 import styled, { css } from 'styled-components';
 
 import { ISlider } from './Slider.interface';
@@ -113,7 +113,7 @@ export const StyledSlider = styled.div<ISlider>`
   width: 100%;
 
   ${({ $mobileOnly }) => $mobileOnly ? (`
-      @media only screen and (max-width: ${responsiveMedia}) {
+      @media only screen and (max-width: ${responsiveMediaMax}) {
         ${SliderStyles}
       }
       @media only screen and (min-width: ${responsiveMedia}) {

package/src/helpers/useMediaMatch.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useState } from 'react'
 
 import { debounce } from './events';
-import { responsiveMedia } from '@/styles/variables'
+import { responsiveMediaMax } from '@/styles/variables'
 
 // useMediaMatch('(max-width: 600px)')
-export default function useMediaMatch(query: string = `(max-width: ${responsiveMedia})`) {
+export default function useMediaMatch(query: string = `(max-width: ${responsiveMediaMax})`) {
   const [matches, setMatches] = useState(false)
 
   useEffect(() => {

package/src/styles/utilities.ts

@@ -4,7 +4,6 @@ import {
   gradients,
   grid_conf,
   radius,
-  responsiveMedia,
   shadows,
   spaces,
   spacesNegative,

package/src/styles/variables.ts

@@ -10,7 +10,8 @@ export const gutter = pxToRem(8); //needs to be in this file
 export const desktop_width:number = 1620; //container size of design on desktop
 export const tablet_width:number = 768; //container size of design on tablet
 export const mobile_width:number = 375; //container size of design on mobile
-export const responsiveMedia = "768px"; //mobile media value for bootstrap
+export const responsiveMedia = "768px"; //container size of design on mobile
+export const responsiveMediaMax = "767px"; //mobile media value for bootstrap -> use this for max-width media queries
 export const mobileMedia = "360px"; //mobile media value
 
 export const easeOutExpo = "cubic-bezier(.32,.94,.6,1);";