refactor: improvement into the core component (#104)

- Fix issue in the paper component - Improve the grid component - Add new alignment css utilities
HamzaAmar · Nov 21, 2024 · 9ebdb2a · 9ebdb2a
1 parent 58e7baa
commit 9ebdb2a
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 6 deletions.
diff --git a/packages/pillar-core/src/core/grid/grid.type.ts b/packages/pillar-core/src/core/grid/grid.type.ts
@@ -15,6 +15,8 @@ export interface GridProps {
   children: ReactNode
   items?: Items
   justify?: Justify
+  justifyItem?: Items
+  alignContent?: Justify | 'baseline'
   gap?: Size
   cols?: GridBaseProps
   rows?: GridBaseProps

diff --git a/packages/pillar-core/src/core/grid/index.tsx b/packages/pillar-core/src/core/grid/index.tsx
@@ -32,7 +32,7 @@ export const GridItem = forwardRef(
     ])
 
     const classNames = cx(`${cls}`, {
-      className: className,
+      [className!]: className,
     })
 
     return (
@@ -61,7 +61,20 @@ GridItem.displayName = 'GridItem'
 
 export const Grid = forwardRef(
   (
-    { gap, cols = {}, rows = {}, items, justify, children, style, as: Tag = 'div', className, ...rest },
+    {
+      gap,
+      cols = {},
+      rows = {},
+      items,
+      justify,
+      justifyItem,
+      alignContent,
+      children,
+      style,
+      as: Tag = 'div',
+      className,
+      ...rest
+    },
     forwardedRef
   ) => {
     const [styles, cls] = getCSS([
@@ -81,10 +94,11 @@ export const Grid = forwardRef(
 
     const classNames = cx(`gr- ${cls}`, {
       [`Ajc-${justify}`]: justify,
+      [`Aji-${justifyItem}`]: justifyItem,
       [`Aai-${items}`]: items,
+      [`Aac-${alignContent}`]: alignContent,
       [`Sg-${gap}`]: gap,
       [className!]: className,
-      className: className,
     })
 
     return (

diff --git a/packages/pillar-core/src/core/paper/index.tsx b/packages/pillar-core/src/core/paper/index.tsx
@@ -55,7 +55,7 @@ export const Paper = forwardRef(
       [className!]: className,
     })
 
-    const bg = background ? { '--pbg': `var(--${background}` } : {}
+    const bg = background ? { '--pbg': `var(--${background})` } : {}
 
     return (
       <Tag style={{ ...bg, ...style } as CSSProperties} className={classNames} ref={ref} {...rest}>

diff --git a/packages/pillar-core/src/css/utilities/_alignment.css b/packages/pillar-core/src/css/utilities/_alignment.css
@@ -28,6 +28,9 @@
 
 /* Align Item Section Style Start */
 
+.Aji-start {
+  justify-items: start;
+}
 .Aji-center {
   justify-items: center;
 }
@@ -62,12 +65,23 @@
   align-items: start;
 }
 
-/* // Align Content Section Style Start */
+/*  Align Content Section Style Start */
 
+.Aac-start {
+  align-content: start;
+}
+.Aac-center {
+  align-content: center;
+}
 .Aac-end {
   align-content: end;
 }
-
+.Aac-baseline {
+  align-content: baseline;
+}
+.Aac-stretch {
+  align-content: stretch;
+}
 .Aac-between {
   align-content: space-between;
 }