oddsgate-ds 1.0.33 → 1.0.34

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

@@ -7,6 +7,7 @@ export declare const utilities: {
         values?: {
             [key: string]: string | number;
         };
+        important?: boolean;
     };
 };
 export declare function generateUtilities(utility: string, breakpoint: string): string;

package/package.json

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

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

@@ -17,7 +17,7 @@ export const StyledContainer = styled.div<IRowSC>`
   z-index: 1;
 
 
-  ${Object.keys(CONTAINER_NAMES)
+  ${!props.$fluid && Object.keys(CONTAINER_NAMES)
     .sort((k1, k2) => CONTAINER_NAMES.indexOf(k1) - CONTAINER_NAMES.indexOf(k2))
     .map(k => config(CONTAINER_NAMES).mediaContainer[CONTAINER_NAMES[k]]`
         max-width: ${grid_conf.container[CONTAINER_NAMES[k]]};

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

@@ -161,6 +161,9 @@ const CircularSlider = ({
 
   return (
     <StyledCircularSlider ref={slider as any} className={className} style={style}>
+      <svg viewBox="0 0 907 906" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M887.551 584.892L904.187 504.729L531.591 461.981C531.824 459.769 532.012 457.775 531.984 455.735L906.794 468.208L902.047 386.545L531.043 441.754C530.798 439.669 530.336 437.54 529.829 435.627L895.322 350.347L869.628 272.699L525.63 422.1C524.69 420.097 523.922 418.356 522.981 416.353L853.852 239.821L808.868 171.277L515.038 404.535C513.792 402.92 512.328 401.26 510.82 399.817L784.811 143.459L723.799 88.9898L500.604 390.24C498.834 388.969 497.28 387.742 495.465 386.688L693.744 68.2895L620.714 31.439L483.014 380.262C481.154 379.424 479.032 378.757 477.127 378.136L585.693 19.4255L505.53 2.78951L462.783 375.385C460.571 375.152 458.576 374.964 456.537 374.993L469.01 0.182176L387.347 4.92974L442.556 375.933C440.471 376.179 438.342 376.641 436.429 377.148L351.149 11.6549L273.501 37.3486L422.902 381.346C420.899 382.286 419.158 383.055 417.155 383.995L240.361 53.2959L171.817 98.2799L405.12 391.893C403.505 393.14 401.846 394.603 400.403 396.112L144.261 122.166L89.7918 183.178L391.042 406.373C389.77 408.143 388.544 409.696 387.49 411.511L69.2632 213.494L32.4127 286.524L381.235 424.224C380.397 426.084 379.731 428.206 379.11 430.111L20.2275 321.283L3.59147 401.446L376.187 444.194C375.954 446.405 375.766 448.4 375.795 450.44L0.984138 437.967L5.73169 519.63L376.735 464.42C376.981 466.505 377.443 468.635 377.95 470.548L12.4569 555.828L38.1505 633.476L382.148 484.075C383.088 486.078 383.857 487.819 384.797 489.822L54.0979 666.616L99.0819 735.16L392.695 501.857C393.942 503.471 395.405 505.131 396.914 506.574L122.968 762.715L183.98 817.185L407.175 515.935C408.945 517.206 410.498 518.432 412.313 519.487L214.034 837.885L287.064 874.736L424.765 525.913C426.625 526.751 428.746 527.417 430.651 528.038L322.085 886.749L402.248 903.385L444.996 530.789C447.207 531.022 449.202 531.21 451.242 531.182L438.769 905.992L520.432 901.245L465.222 530.241C467.307 529.996 469.437 529.534 471.35 529.027L556.629 894.52L634.278 868.826L484.876 524.828C486.88 523.888 488.621 523.12 490.624 522.179L667.156 853.05L735.7 808.066L502.442 514.236C504.056 512.99 505.716 511.526 507.159 510.018L763.517 784.009L817.987 722.997L516.737 499.802C518.008 498.032 519.234 496.478 520.289 494.663L838.687 692.942L875.538 619.912L526.715 482.212C527.553 480.352 528.219 478.23 528.84 476.325L887.551 584.892Z" fill="#FC3151" />
+      </svg>
       <StyledCircularSliderContent ref={contentHolder as any}>
         <div>
           <Heading tag="span" size="h2" className='color-primary50 fw-bold'>{slideContent?.name}</Heading>

package/src/components/organisms/CircularSlider/CircularSlider.stories.tsx

@@ -64,6 +64,71 @@ export const Simple: StoryObj<ICircularSlider> = {
         name: "My name 7",
         role: "My role",
         img: image
+      },
+      {
+        name: "My name 9",
+        role: "My role",
+        img: image
+      },
+      {
+        name: "My name 9",
+        role: "My role",
+        img: image
+      },
+      {
+        name: "My name 10",
+        role: "My role",
+        img: image
+      },
+      {
+        name: "My name 11",
+        role: "My role",
+        img: image
+      },
+      {
+        name: "My name 1§2",
+        role: "My role",
+        img: image
+      },
+      {
+        name: "My name 13",
+        role: "My role",
+        img: image
+      },
+      {
+        name: "My name 14",
+        role: "My role",
+        img: image
+      },
+      {
+        name: "My name 15",
+        role: "My role",
+        img: image
+      },
+      {
+        name: "My name 16",
+        role: "My role",
+        img: image
+      },
+      {
+        name: "My name 17",
+        role: "My role",
+        img: image
+      },
+      {
+        name: "My name 19",
+        role: "My role",
+        img: image
+      },
+      {
+        name: "My name 19",
+        role: "My role",
+        img: image
+      },
+      {
+        name: "My name 20",
+        role: "My role",
+        img: image
       }
     ]
   }

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

@@ -2,9 +2,25 @@ import { ICircularSlider } from './CircularSlider.interface';
 import styled from 'styled-components';
 
 export const StyledCircularSlider = styled.div<ICircularSlider>`
+  position: relative;
   width: 100%;
   min-height: 100dvh;
   overflow: hidden;
+
+
+  & > svg{
+    position:absolute;
+    top:50%;
+    left:0;
+    width:66.666%;
+    height:auto;
+
+    & path{
+      fill
+    }
+
+    transform: translate(-50%, -50%)
+  }
 `;
 
 export const StyledCircularSliderWrapper = styled.div<ICircularSlider>`
@@ -33,6 +49,8 @@ export const StyledCircularSliderSlide = styled.div<ICircularSlider>`
   filter: brightness(70%);
 
   & img{
+    height: 100%;
+    object-fit: cover;
     pointer-events:none;
   }
 

package/src/styles/utilities.ts

@@ -39,6 +39,7 @@ export const utilities: {
     values?: {
       [key: string]: string | number;
     };
+    important?: boolean;
   };
 } = {
   "align": {
@@ -62,6 +63,7 @@ export const utilities: {
       flex: "flex",
       none: "none"
     },
+    important: true,
   },
   "position": {
     property: "position",
@@ -71,6 +73,7 @@ export const utilities: {
       sticky: "sticky",
       fixed: "fixed"
     },
+    important: true,
   },
   "width": {
     responsive: true,
@@ -256,7 +259,8 @@ export const utilities: {
       semibold: 600,
       bold: 700,
       black: 800
-    }
+    },
+    important: true,
   },
   "text-align": {
     responsive: true,
@@ -304,11 +308,12 @@ export function generateUtilities(utility: string, breakpoint: string): string {
   const className: string | undefined = utilities[utility]?.class || property;
   const values: { [key: string]: string | number } | undefined = utilities[utility]?.values;
   const responsive: boolean | undefined = utilities[utility]?.responsive;
+  const important: boolean | undefined = utilities[utility]?.important;
   let cssSelector: string = "";
 
   Object.keys(values || {}).map((key: string, i: number) => {
     cssSelector += `.${`${className}-${key}`}{
-      ${property}: ${values?.[key]};
+      ${property}: ${values?.[key]}${important && " !important"};
     }`;
   });