@growth-angels/ds-core 1.17.1 → 1.18.0

package/dist/layout/Container/Container.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Container = (props) => {
-    const { size, children, style, padding, margin, stretch, id } = props;
+    const { size, children, style, padding, margin, stretch, id, paddingPosition, marginPosition } = props;
+    console.log("Container props", props);
     const classes = [
         "ga-ds-container",
         `ga-ds-container--${size}`,
-        ...(padding ? [`ga-ds-util-padding--${padding}`] : []),
-        ...(margin ? [`ga-ds-util-margin--${margin}`] : []),
+        ...(padding ? [`ga-ds-util-padding${paddingPosition ? `-${paddingPosition}` : ""}--${padding}`] : []),
+        ...(margin ? [`ga-ds-util-margin${marginPosition ? `-${marginPosition}` : ""}--${margin}`] : []),
         ...(stretch ? [`ga-ds-container-stretch--${stretch}`] : []),
         ...(props.extraClassNames || []),
     ];

package/dist/layout/Container/Container.types.d.ts

@@ -6,4 +6,6 @@ export interface ContainerProps extends WordpressDefault, React.HTMLAttributes<H
     stretch?: ContainerStretch;
     children: React.ReactNode | React.ReactNode[];
     style?: React.CSSProperties;
+    paddingPosition?: "top" | "bottom";
+    marginPosition?: "top" | "bottom";
 }

package/dist/layout/Grid/Grid.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Grid = (props) => {
-    const { children, alignItems, justifyContent, extraClassNames, padding, margin } = props;
+    const { children, alignItems, justifyContent, extraClassNames, padding, margin, paddingPosition, marginPosition } = props;
     const classNames = [
         "ga-ds-grid",
-        ...(padding ? [`ga-ds-util-padding--${padding}`] : []),
-        ...(margin ? [`ga-ds-util-margin--${margin}`] : []),
+        ...(padding ? [`ga-ds-util-padding${paddingPosition ? `-${paddingPosition}` : ""}--${padding}`] : []),
+        ...(margin ? [`ga-ds-util-margin${marginPosition ? `-${marginPosition}` : ""}--${margin}`] : []),
         ...(extraClassNames || []),
     ];
     return (_jsx("div", { className: classNames.join(" "), style: { ...(alignItems !== "none" && { alignItems }), ...(justifyContent !== "none" && { justifyContent }) }, children: children }));

package/dist/layout/Grid/Grid.types.d.ts

@@ -2,6 +2,8 @@ import { WordpressDefault } from "../../global.types";
 export interface GridAttributes {
     alignItems: 'flex-start' | 'center' | 'flex-end' | 'none';
     justifyContent: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'none';
+    paddingPosition?: 'top' | 'bottom';
+    marginPosition?: 'top' | 'bottom';
 }
 export interface GridProps extends WordpressDefault, GridAttributes {
     children: React.ReactNode | React.ReactNode[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-angels/ds-core",
-  "version": "1.17.1",
+  "version": "1.18.0",
   "description": "Design system by Growth Angels",
   "license": "MIT",
   "private": false,

package/src/layout/Container/Container.tsx

@@ -1,12 +1,13 @@
 import type { ContainerProps } from "./Container.types"
 
 export const Container = (props: ContainerProps) => {
-  const { size, children, style, padding, margin, stretch, id } = props
+  const { size, children, style, padding, margin, stretch, id, paddingPosition, marginPosition } = props
+  console.log("Container props", props)
   const classes = [
     "ga-ds-container",
     `ga-ds-container--${size}`,
-    ...(padding ? [`ga-ds-util-padding--${padding}`] : []),
-    ...(margin ? [`ga-ds-util-margin--${margin}`] : []),
+    ...(padding ? [`ga-ds-util-padding${paddingPosition ? `-${paddingPosition}` : ""}--${padding}`] : []),
+    ...(margin ? [`ga-ds-util-margin${marginPosition ? `-${marginPosition}` : ""}--${margin}`] : []),
     ...(stretch ? [`ga-ds-container-stretch--${stretch}`] : []),
     ...(props.extraClassNames || []),
   ]

package/src/layout/Container/Container.types.ts

@@ -8,4 +8,6 @@ export interface ContainerProps extends WordpressDefault, React.HTMLAttributes<H
   stretch?:ContainerStretch
   children: React.ReactNode | React.ReactNode[];
   style?: React.CSSProperties;
+  paddingPosition?: "top" | "bottom";
+  marginPosition?: "top" | "bottom";
 }

package/src/layout/Grid/Grid.tsx

@@ -1,10 +1,10 @@
 import { GridProps } from "./Grid.types"
 export const Grid = (props: GridProps): JSX.Element => {
-  const { children, alignItems, justifyContent, extraClassNames, padding, margin } = props
+  const { children, alignItems, justifyContent, extraClassNames, padding, margin, paddingPosition, marginPosition } = props
   const classNames = [
     "ga-ds-grid",
-    ...(padding ? [`ga-ds-util-padding--${padding}`] : []),
-    ...(margin ? [`ga-ds-util-margin--${margin}`] : []),
+    ...(padding ? [`ga-ds-util-padding${paddingPosition ? `-${paddingPosition}` : ""}--${padding}`] : []),
+    ...(margin ? [`ga-ds-util-margin${marginPosition ? `-${marginPosition}` : ""}--${margin}`] : []),
     ...(extraClassNames || []),
   ]
 

package/src/layout/Grid/Grid.types.ts

@@ -3,6 +3,8 @@ import { WordpressDefault } from "../../global.types";
 export interface GridAttributes {
   alignItems: 'flex-start' | 'center' | 'flex-end' | 'none'
   justifyContent: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'none'
+  paddingPosition?: 'top' | 'bottom'
+  marginPosition?: 'top' | 'bottom'
 }
 
 export interface GridProps extends WordpressDefault, GridAttributes {

package/src/organisms/Carousel/Carousel.scss

@@ -11,7 +11,7 @@
   &__track {
     --ga-ds-slides-per-view: 1;
     display: grid;
-    grid-auto-flow: column; // place les slides horizontalement
+    grid-auto-flow: column;
     grid-auto-columns: calc(
       (100% - (var(--ga-ds-space-between, 1rem) * (var(--ga-ds-slides-per-view, 3) - 1))) / var(--ga-ds-slides-per-view, 3)
     );
@@ -72,13 +72,14 @@
   }
 
   &__dots {
+    --dot-size: 1rem;
     display: flex;
     gap: var(--ga-ds-gap, 1rem);
 
     .ga-ds-carousel__dot {
       display: block;
-      width: 1rem;
-      height: 1rem;
+      width: var(--dot-size);
+      height: var(--dot-size);
       border-radius: 50%;
       background-color: #e2e2e2;
 

package/src/utils/_spacings.scss

@@ -5,6 +5,14 @@ $spacingsMap: ("xsmall", "small", "medium", "large", "xlarge");
     padding-top: var(--ga-spacings-padding-#{$value});
     padding-bottom: var(--ga-spacings-padding-#{$value});
   }
+
+  .ga-ds-util-padding-top--#{$value} {
+    padding-top: var(--ga-spacings-padding-#{$value});
+  }
+
+  .ga-ds-util-padding-bottom--#{$value} {
+    padding-bottom: var(--ga-spacings-padding-#{$value});
+  }
 }
 
 $marginsMap: ("small", "medium", "large");
@@ -14,4 +22,10 @@ $marginsMap: ("small", "medium", "large");
     margin-top: var(--ga-spacings-margin-#{$value});
     margin-bottom: var(--ga-spacings-margin-#{$value});
   }
+  .ga-ds-util-margin-top--#{$value} {
+    margin-top: var(--ga-spacings-margin-#{$value});
+  }
+  .ga-ds-util-margin-bottom--#{$value} {
+    margin-bottom: var(--ga-spacings-margin-#{$value});
+  }
 }