Feature/column

lib/components/ButtonGroup/index.tsx

@@ -13,7 +13,7 @@ export const ButtonGroup = ({ children, isCenter = false, gap = 10 }: ButtonGrou
   }
 
   return (
-    <div className={`flex ${centerButtons}`} style={style}>
+    <div className={`ui-buttongroup flex ${centerButtons}`} style={style}>
       {children}
     </div>
   )

lib/components/Card/index.tsx

@@ -23,7 +23,7 @@ export const Card = ({ children, rounded, shadow, borderWidth, borderColor }: Ca
   }
 
   return (
-    <div className={`bg-white ${cardRounded} ${cardShadow}`} style={style}>
+    <div className={`ui-card bg-white ${cardRounded} ${cardShadow}`} style={style}>
       <div className="py-5 px-7">{children}</div>
     </div>
   )

lib/components/CardGroup/index.tsx

@@ -6,14 +6,14 @@ interface CardGroupProps {
   gap?: number
 }
 
-export const CardGroup = ({ children, cols = 3, gap = 20 }: CardGroupProps) => {
+export const CardGroup = ({ children, cols = 3, gap = 30 }: CardGroupProps) => {
   // Inline style object to handle grid gap
   const style = {
     gridGap: gap ? gap : '',
   }
 
   return (
-    <div className={`grid ${gridColumns[cols]}`} style={style}>
+    <div className={`ui-cardgroup grid ${gridColumns[cols]}`} style={style}>
       {children}
     </div>
   )

lib/components/Column/Column.stories.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Column } from '.'
+
+const meta = {
+  title: 'Layouts/Column',
+  component: Column,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Column>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  render: (args) => (
+    <Column {...args}>
+      <Column.Content>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus gravida orci elit, at consectetur lectus
+          iaculis vel. Cras non fringilla velit, a posuere felis. Mauris faucibus dui ultricies ultrices luctus. Aliquam
+          erat volutpat. Vestibulum imperdiet, enim non elementum pulvinar, lacus quam vestibulum eros, ut eleifend sem
+          dui ut quam.
+        </p>
+      </Column.Content>
+      <Column.Content>
+        <p>
+          Nam facilisis pulvinar ligula nec cursus. Mauris ut tempor enim. Nullam sodales eros ut velit ullamcorper
+          fringilla. Fusce a sem est. Vivamus eleifend accumsan pellentesque. Pellentesque in ante urna. Nullam finibus
+          sed nunc ac volutpat. Maecenas lacinia justo a arcu tempor, ac tempor magna faucibus.
+        </p>
+      </Column.Content>
+    </Column>
+  ),
+}

lib/components/Column/content.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+export interface ColumnContentProps {
+  children: React.ReactNode
+}
+
+export const ColumnContent = ({ children }: ColumnContentProps) => {
+  return <div>{children}</div>
+}
+
+ColumnContent.displayName = 'Column.Content'

lib/components/Column/index.tsx

@@ -0,0 +1,27 @@
+import { gridColumns } from '../../utils/tailwindProps'
+import { ColumnContent } from './content'
+
+type ColumnKeys = keyof typeof gridColumns
+
+interface ColumnProps {
+  children?: React.ReactNode
+  cols?: ColumnKeys
+  gap?: number
+}
+
+export const ColumnContainer = ({ children, cols = 2, gap = 30 }: ColumnProps) => {
+  // Inline style object to handle grid gap
+  const style = {
+    gridGap: gap ? gap : '',
+  }
+
+  return (
+    <div className={`ui-column grid ${gridColumns[cols]}`} style={style}>
+      {children}
+    </div>
+  )
+}
+
+export const Column = Object.assign(ColumnContainer, {
+  Content: ColumnContent,
+})

lib/main.ts

@@ -4,3 +4,4 @@ export { Button } from './components/Button'
 export { ButtonGroup } from './components/ButtonGroup'
 export { Card } from './components/Card'
 export { CardGroup } from './components/CardGroup'
+export { Column } from './components/Column'