@indico-data/design-system 3.0.4 → 3.0.5

package/lib/index.css

@@ -591,6 +591,26 @@
   --pf-negative-margin-16: -64px;
 }
 
+:root {
+  --pf-gap-0: 0;
+  --pf-gap-1: 4px;
+  --pf-gap-2: 8px;
+  --pf-gap-3: 12px;
+  --pf-gap-4: 16px;
+  --pf-gap-5: 20px;
+  --pf-gap-6: 24px;
+  --pf-gap-7: 28px;
+  --pf-gap-8: 32px;
+  --pf-gap-9: 36px;
+  --pf-gap-10: 40px;
+  --pf-gap-11: 44px;
+  --pf-gap-12: 48px;
+  --pf-gap-13: 52px;
+  --pf-gap-14: 56px;
+  --pf-gap-15: 60px;
+  --pf-gap-16: 64px;
+}
+
 :root {
   --pf-size-0: 0;
   --pf-size-1: 4px;
@@ -1347,7 +1367,6 @@ a:hover,
 
 .radio-wrapper {
   display: flex;
-  margin-bottom: var(--pf-margin-2);
   align-items: center;
 }
 
@@ -8008,6 +8027,74 @@ p,
   margin-top: var(--pf-negative-margin-16);
 }
 
+.gap-0 {
+  gap: var(--pf-gap-0);
+}
+
+.gap-1 {
+  gap: var(--pf-gap-1);
+}
+
+.gap-2 {
+  gap: var(--pf-gap-2);
+}
+
+.gap-3 {
+  gap: var(--pf-gap-3);
+}
+
+.gap-4 {
+  gap: var(--pf-gap-4);
+}
+
+.gap-5 {
+  gap: var(--pf-gap-5);
+}
+
+.gap-6 {
+  gap: var(--pf-gap-6);
+}
+
+.gap-7 {
+  gap: var(--pf-gap-7);
+}
+
+.gap-8 {
+  gap: var(--pf-gap-8);
+}
+
+.gap-9 {
+  gap: var(--pf-gap-9);
+}
+
+.gap-10 {
+  gap: var(--pf-gap-10);
+}
+
+.gap-11 {
+  gap: var(--pf-gap-11);
+}
+
+.gap-12 {
+  gap: var(--pf-gap-12);
+}
+
+.gap-13 {
+  gap: var(--pf-gap-13);
+}
+
+.gap-14 {
+  gap: var(--pf-gap-14);
+}
+
+.gap-15 {
+  gap: var(--pf-gap-15);
+}
+
+.gap-16 {
+  gap: var(--pf-gap-16);
+}
+
 @keyframes spin {
   0% {
     transform: rotate(0deg);

package/lib/index.esm.css

@@ -591,6 +591,26 @@
   --pf-negative-margin-16: -64px;
 }
 
+:root {
+  --pf-gap-0: 0;
+  --pf-gap-1: 4px;
+  --pf-gap-2: 8px;
+  --pf-gap-3: 12px;
+  --pf-gap-4: 16px;
+  --pf-gap-5: 20px;
+  --pf-gap-6: 24px;
+  --pf-gap-7: 28px;
+  --pf-gap-8: 32px;
+  --pf-gap-9: 36px;
+  --pf-gap-10: 40px;
+  --pf-gap-11: 44px;
+  --pf-gap-12: 48px;
+  --pf-gap-13: 52px;
+  --pf-gap-14: 56px;
+  --pf-gap-15: 60px;
+  --pf-gap-16: 64px;
+}
+
 :root {
   --pf-size-0: 0;
   --pf-size-1: 4px;
@@ -1347,7 +1367,6 @@ a:hover,
 
 .radio-wrapper {
   display: flex;
-  margin-bottom: var(--pf-margin-2);
   align-items: center;
 }
 
@@ -8008,6 +8027,74 @@ p,
   margin-top: var(--pf-negative-margin-16);
 }
 
+.gap-0 {
+  gap: var(--pf-gap-0);
+}
+
+.gap-1 {
+  gap: var(--pf-gap-1);
+}
+
+.gap-2 {
+  gap: var(--pf-gap-2);
+}
+
+.gap-3 {
+  gap: var(--pf-gap-3);
+}
+
+.gap-4 {
+  gap: var(--pf-gap-4);
+}
+
+.gap-5 {
+  gap: var(--pf-gap-5);
+}
+
+.gap-6 {
+  gap: var(--pf-gap-6);
+}
+
+.gap-7 {
+  gap: var(--pf-gap-7);
+}
+
+.gap-8 {
+  gap: var(--pf-gap-8);
+}
+
+.gap-9 {
+  gap: var(--pf-gap-9);
+}
+
+.gap-10 {
+  gap: var(--pf-gap-10);
+}
+
+.gap-11 {
+  gap: var(--pf-gap-11);
+}
+
+.gap-12 {
+  gap: var(--pf-gap-12);
+}
+
+.gap-13 {
+  gap: var(--pf-gap-13);
+}
+
+.gap-14 {
+  gap: var(--pf-gap-14);
+}
+
+.gap-15 {
+  gap: var(--pf-gap-15);
+}
+
+.gap-16 {
+  gap: var(--pf-gap-16);
+}
+
 @keyframes spin {
   0% {
     transform: rotate(0deg);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/forms/radio/Radio.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Radio, RadioProps } from './Radio';
-import { SetStateAction, useState } from 'react';
+import { Radio } from './Radio';
+import { Col, Row } from '@/components/grid';
 
 const meta: Meta = {
   title: 'Forms/Radio',
@@ -104,17 +104,21 @@ export const Default: Story = {
     return (
       <div>
         <h2 className="mb-2">Radio Buttons</h2>
-        {radioList.map((radio) => (
-          <Radio
-            key={radio.id}
-            onChange={handleChange}
-            id={radio.id}
-            label={radio.label}
-            name={radio.name}
-            value={radio.value}
-            isDisabled={args.isDisabled}
-          />
-        ))}
+        <Row direction="column" className="gap-2">
+          {radioList.map((radio) => (
+            <Col xs={12} key={radio.id}>
+              <Radio
+                key={radio.id}
+                onChange={handleChange}
+                id={radio.id}
+                label={radio.label}
+                name={radio.name}
+                value={radio.value}
+                isDisabled={args.isDisabled}
+              />
+            </Col>
+          ))}
+        </Row>
       </div>
     );
   },

package/src/components/forms/radio/styles/Radio.scss

@@ -14,7 +14,6 @@
 
 .radio-wrapper {
   display: flex;
-  margin-bottom: var(--pf-margin-2);
   align-items: center;
 }
 .radio-input {

package/src/styles/_gap.scss

@@ -0,0 +1,18 @@
+$sizes: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16;
+$classes: (
+  'gap': 'gap',
+);
+
+@each $class, $property in $classes {
+  @each $size in $sizes {
+    .#{$class}-#{$size} {
+      @if type-of($property) == list {
+        @each $prop in $property {
+          #{$prop}: var(--pf-gap-#{$size});
+        }
+      } @else {
+        #{$property}: var(--pf-gap-#{$size});
+      }
+    }
+  }
+}

package/src/styles/_padding.scss

@@ -1,24 +1,28 @@
 $sizes: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16;
 $classes: (
-  "pa": "padding",
-  "px": ("padding-left", "padding-right"),
-  "py": ("padding-top", "padding-bottom"),
-  "pl": "padding-left",
-  "pr": "padding-right",
-  "pb": "padding-bottom",
-  "pt": "padding-top"
+  'pa': 'padding',
+  'px': (
+    'padding-left',
+    'padding-right',
+  ),
+  'py': (
+    'padding-top',
+    'padding-bottom',
+  ),
+  'pl': 'padding-left',
+  'pr': 'padding-right',
+  'pb': 'padding-bottom',
+  'pt': 'padding-top',
 );
 
 @each $class, $property in $classes {
   @each $size in $sizes {
     .#{$class}-#{$size} {
-      @if type-of($property)==list {
+      @if type-of($property) ==list {
         @each $prop in $property {
           #{$prop}: var(--pf-padding-#{$size});
         }
-      }
-
-      @else {
+      } @else {
         #{$property}: var(--pf-padding-#{$size});
       }
     }

package/src/styles/index.scss

@@ -39,4 +39,5 @@
 @import 'borders';
 @import 'padding';
 @import 'margin';
+@import 'gap';
 @import 'animations';

package/src/styles/variables/_gap.scss

@@ -0,0 +1,19 @@
+:root {
+  --pf-gap-0: 0;
+  --pf-gap-1: 4px;
+  --pf-gap-2: 8px;
+  --pf-gap-3: 12px;
+  --pf-gap-4: 16px;
+  --pf-gap-5: 20px;
+  --pf-gap-6: 24px;
+  --pf-gap-7: 28px;
+  --pf-gap-8: 32px;
+  --pf-gap-9: 36px;
+  --pf-gap-10: 40px;
+  --pf-gap-11: 44px;
+  --pf-gap-12: 48px;
+  --pf-gap-13: 52px;
+  --pf-gap-14: 56px;
+  --pf-gap-15: 60px;
+  --pf-gap-16: 64px;
+}

package/src/styles/variables/index.scss

@@ -4,5 +4,6 @@
 @import 'borders';
 @import 'padding';
 @import 'margin';
+@import 'gap';
 @import 'size';
 @import 'dropshadows';

package/src/stylesAndAnimations/sizing/Sizing.mdx

@@ -1,14 +1,14 @@
 import { Canvas, Meta, Controls } from '@storybook/blocks';
 import * as Sizing from './Sizing.stories';
 
-<Meta title="Utility Classes/Sizing" />
-# Sizing 
-The Sizing utility classes follow this pattern of usage.
+<Meta title="Utility Classes/Sizing" /># Sizing The Sizing utility classes follow this pattern of
+usage.
 
 Instructuions: `{property}{direction}-{size}` The property applies the type of spacing:
 
 - `m` - applies margin
 - `p` - applies padding
+- `gap` - applies gap
 
 ### The direction designates the side the property applies to:
 
@@ -23,22 +23,22 @@ Instructuions: `{property}{direction}-{size}` The property applies the type of s
 ### The size controls the increment of the property in 4px intervals:
 
 - `0` - eliminates all margin and padding by setting it to 0
-- `1` - sets margin or padding 4px
-- `2` - sets margin or padding 8px
-- `3` - sets margin or padding 12px
-- `4` - sets margin or padding 16px
-- `5` - sets margin or padding 20px
-- `6` - sets margin or padding 24px
-- `7` - sets margin or padding 28px
-- `8` - sets margin or padding 32px
-- `9` - sets margin or padding 36px
-- `10` - sets margin or padding 40px
-- `11` - sets margin or padding 44px
-- `12` - sets margin or padding 48px
-- `13` - sets margin or padding 52px
-- `14` - sets margin or padding 56px
-- `15` - sets margin or padding 60px
-- `16` - sets margin or padding 64px
+- `1` - sets margin or padding or gap to 4px
+- `2` - sets margin or padding or gap to 8px
+- `3` - sets margin or padding or gap to 12px
+- `4` - sets margin or padding or gap to 16px
+- `5` - sets margin or padding or gap to 20px
+- `6` - sets margin or padding or gap to 24px
+- `7` - sets margin or padding or gap to 28px
+- `8` - sets margin or padding or gap to 32px
+- `9` - sets margin or padding or gap to 36px
+- `10` - sets margin or padding or gap to 40px
+- `11` - sets margin or padding or gap to 44px
+- `12` - sets margin or padding or gap to 48px
+- `13` - sets margin or padding or gap to 52px
+- `14` - sets margin or padding or gap to 56px
+- `15` - sets margin or padding or gap to 60px
+- `16` - sets margin or padding or gap to 64px
 - `n1` - sets margin to -4px
 - `n2` - sets margin to -8px
 - `n3` - sets margin to -12px

package/src/stylesAndAnimations/utilityClasses/UtilityClassesData.ts

@@ -217,6 +217,23 @@ export const utilityClassesData: UtilityClassData[] = [
   { className: 'pa-14', css: 'padding: var(--pf-padding-14);', category: 'Sizing' },
   { className: 'pa-15', css: 'padding: var(--pf-padding-15);', category: 'Sizing' },
   { className: 'pa-16', css: 'padding: var(--pf-padding-16);', category: 'Sizing' },
+  { className: 'gap-0', css: 'gap: var(--pf-gap-0);', category: 'Sizing' },
+  { className: 'gap-1', css: 'gap: var(--pf-gap-1);', category: 'Sizing' },
+  { className: 'gap-2', css: 'gap: var(--pf-gap-2);', category: 'Sizing' },
+  { className: 'gap-3', css: 'gap: var(--pf-gap-3);', category: 'Sizing' },
+  { className: 'gap-4', css: 'gap: var(--pf-gap-4);', category: 'Sizing' },
+  { className: 'gap-5', css: 'gap: var(--pf-gap-5);', category: 'Sizing' },
+  { className: 'gap-6', css: 'gap: var(--pf-gap-6);', category: 'Sizing' },
+  { className: 'gap-7', css: 'gap: var(--pf-gap-7);', category: 'Sizing' },
+  { className: 'gap-8', css: 'gap: var(--pf-gap-8);', category: 'Sizing' },
+  { className: 'gap-9', css: 'gap: var(--pf-gap-9);', category: 'Sizing' },
+  { className: 'gap-10', css: 'gap: var(--pf-gap-10);', category: 'Sizing' },
+  { className: 'gap-11', css: 'gap: var(--pf-gap-11);', category: 'Sizing' },
+  { className: 'gap-12', css: 'gap: var(--pf-gap-12);', category: 'Sizing' },
+  { className: 'gap-13', css: 'gap: var(--pf-gap-13);', category: 'Sizing' },
+  { className: 'gap-14', css: 'gap: var(--pf-gap-14);', category: 'Sizing' },
+  { className: 'gap-15', css: 'gap: var(--pf-gap-15);', category: 'Sizing' },
+  { className: 'gap-16', css: 'gap: var(--pf-gap-16);', category: 'Sizing' },
 
   // Icon Sizes
   { className: 'icon-xs', css: 'font-size: var(--pf-icon-size-xs);', category: 'Icon' },