Merge pull request #26 from etchteam/feature/etch-393-add-fluid-spacing

feat: fluid spacing
etchteam · Feb 9, 2024 · a17479f · a17479f
2 parents 3929f32 + e61da02
commit a17479f
Show file tree

Hide file tree

Showing 9 changed files with 96 additions and 5 deletions.
diff --git a/components/canvas/Card/Card.css b/components/canvas/Card/Card.css
@@ -16,6 +16,7 @@ diamond-card {
 
   &[radius] {
     border-radius: var(--diamond-radius);
+    overflow: hidden;
   }
 
   &[padding='xs'] {
@@ -34,6 +35,18 @@ diamond-card {
     padding: var(--diamond-spacing-xl);
   }
 
+  &[padding='fluid-sm'] {
+    padding: var(--diamond-spacing-fluid-sm);
+  }
+
+  &[padding='fluid'] {
+    padding: var(--diamond-spacing-fluid);
+  }
+
+  &[padding='fluid-lg'] {
+    padding: var(--diamond-spacing-fluid-lg);
+  }
+
   &[padding='none'] {
     padding: 0;
   }

diff --git a/components/canvas/Card/Card.stories.ts b/components/canvas/Card/Card.stories.ts
@@ -18,7 +18,17 @@ export default {
       control: {
         type: 'select',
       },
-      options: ['xs', 'sm', 'md', 'lg', 'xl', 'none'],
+      options: [
+        'xs',
+        'sm',
+        'md',
+        'lg',
+        'xl',
+        'fluid-sm',
+        'fluid',
+        'fluid-lg',
+        'none',
+      ],
     },
   },
 };

diff --git a/components/canvas/Card/Card.ts b/components/canvas/Card/Card.ts
@@ -5,7 +5,16 @@ export interface CardAttributes {
   shadow?: boolean;
   muted?: boolean;
   radius?: boolean;
-  padding?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none';
+  padding?:
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | 'fluid-sm'
+    | 'fluid'
+    | 'fluid-lg'
+    | 'none';
 }
 
 declare global {

diff --git a/components/canvas/Section/Section.css b/components/canvas/Section/Section.css
@@ -20,6 +20,18 @@ diamond-section {
     padding-block: var(--diamond-spacing-xl);
   }
 
+  &[padding='fluid-sm'] {
+    padding: var(--diamond-spacing-fluid-sm);
+  }
+
+  &[padding='fluid'] {
+    padding: var(--diamond-spacing-fluid);
+  }
+
+  &[padding='fluid-lg'] {
+    padding: var(--diamond-spacing-fluid-lg);
+  }
+
   &[padding='none'] {
     padding-block: 0;
   }

diff --git a/components/canvas/Section/Section.stories.ts b/components/canvas/Section/Section.stories.ts
@@ -20,7 +20,17 @@ export default {
       control: {
         type: 'select',
       },
-      options: ['xs', 'sm', 'md', 'lg', 'xl', 'none'],
+      options: [
+        'xs',
+        'sm',
+        'md',
+        'lg',
+        'xl',
+        'fluid-sm',
+        'fluid',
+        'fluid-lg',
+        'none',
+      ],
     },
   },
 };

diff --git a/components/canvas/Section/Section.ts b/components/canvas/Section/Section.ts
@@ -1,7 +1,16 @@
 import { JSXCustomElement } from '../../../types/jsx-custom-element';
 
 export interface SectionAttributes {
-  padding?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none';
+  padding?:
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | 'fluid-sm'
+    | 'fluid'
+    | 'fluid-lg'
+    | 'none';
 }
 
 declare global {

diff --git a/components/composition/Spacing/Spacing.css b/components/composition/Spacing/Spacing.css
@@ -20,6 +20,18 @@
   margin-top: var(--diamond-spacing-xl);
 }
 
+.diamond-spacing-top-fluid {
+  margin-top: var(--diamond-spacing-fluid);
+}
+
+.diamond-spacing-top-fluid-sm {
+  margin-top: var(--diamond-spacing-fluid-sm);
+}
+
+.diamond-spacing-top-fluid-lg {
+  margin-top: var(--diamond-spacing-fluid-lg);
+}
+
 /* bottom */
 
 .diamond-spacing-bottom-xs {
@@ -41,3 +53,15 @@
 .diamond-spacing-bottom-xl {
   margin-bottom: var(--diamond-spacing-xl);
 }
+
+.diamond-spacing-bottom-fluid {
+  margin-bottom: var(--diamond-spacing-fluid);
+}
+
+.diamond-spacing-bottom-fluid-sm {
+  margin-bottom: var(--diamond-spacing-fluid-sm);
+}
+
+.diamond-spacing-bottom-fluid-lg {
+  margin-bottom: var(--diamond-spacing-fluid-lg);
+}
diff --git a/components/composition/Spacing/Spacing.stories.ts b/components/composition/Spacing/Spacing.stories.ts
@@ -20,7 +20,7 @@ export default {
   argTypes: {
     size: {
       control: { type: 'select' },
-      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      options: ['xs', 'sm', 'md', 'lg', 'xl', 'fluid', 'fluid-sm', 'fluid-lg'],
     },
   },
 };

diff --git a/styles/tokens/spacing.css b/styles/tokens/spacing.css
@@ -6,4 +6,8 @@
   --diamond-spacing-sm: calc(var(--diamond-spacing) / 2);
   --diamond-spacing-lg: calc(var(--diamond-spacing) * 2);
   --diamond-spacing-xl: calc(var(--diamond-spacing) * 4);
+
+  --diamond-spacing-fluid: clamp(1rem, 5vw, 4rem);
+  --diamond-spacing-fluid-sm: clamp(1rem, 5vw, 3rem);
+  --diamond-spacing-fluid-lg: clamp(1rem, 5vw, 5rem);
 }