this.gui 1.0.16 → 1.0.18

package/src/stories/Atoms/Container/Container.stories.jsx

@@ -1,104 +1,145 @@
-// src/stories/Atoms/Container/Container.stories.jsx
 import React from 'react';
 import { Container } from './Container';
-import './Container.css';
 
 export default {
   title: 'Atoms/Layout/Container',
   component: Container,
   argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large'],
+    },
     border: {
-      control: 'boolean',
-      description: 'Add a border to the container.',
+      control: { type: 'select' },
+      options: ['on', 'off'],
     },
-    size: {
-      control: {
-        type: 'select',
-        options: ['small', 'medium', 'large'],
-      },
-      description: 'Size of the container.',
+    align: {
+      control: { type: 'select' },
+      options: ['left', 'center', 'right'],
     },
-    rounded: {
-      control: 'boolean',
-      description: 'Apply rounded corners to the container.',
+    fluid: { control: 'boolean' },
+    padding: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
     },
-    fluid: {
-      control: 'boolean',
-      description: 'Make the container full-width.',
+    marginTop: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
     },
-    align: {
-      control: {
-        type: 'select',
-        options: ['left', 'center', 'right'],
-      },
-      description: 'Alignment of the container.',
+    marginBottom: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
+    },
+    marginLeft: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
+    },
+    marginRight: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
     },
     position: {
-      control: {
-        type: 'select',
-        options: ['static', 'relative', 'absolute', 'fixed', 'sticky'],
-      },
-      description: 'CSS position property of the container.',
+      control: { type: 'select' },
+      options: ['relative', 'static', 'fixed', 'absolute', 'sticky'],
     },
-    className: {
-      control: 'text',
-      description: 'Additional CSS classes.',
+    rounded: { control: 'boolean' }, // Add control for 'rounded' prop
+    borderColor: {
+      control: { type: 'select' },
+      options: [
+        'none',
+        'primary',
+        'secondary',
+        'link',
+        'focus',
+        'info',
+        'warning',
+        'alert',
+        'success',
+        'neutral',
+        'dark',
+        'classy-1',
+        'classy-2',
+        'classy-3',
+        'classy-4',
+        'classy-5',
+        'small-switch-1',
+        'small-switch-2',
+        'natural-1',
+        'natural-2',
+        'natural-3',
+        'grey-friend-1',
+        'grey-friend-2',
+        'shade-1',
+        'shade-2',
+        'shade-3',
+        'shade-4',
+      ],
     },
-    style: {
-      control: 'object',
-      description: 'Inline styles.',
+    backgroundColor: {
+      control: { type: 'select' }, // Use 'select' control type
+      options: [
+        'none',
+        'primary',
+        'secondary',
+        'link',
+        'focus',
+        'info',
+        'warning',
+        'alert',
+        'success',
+        'neutral',
+        'dark',
+        'classy-1',
+        'classy-2',
+        'classy-3',
+        'classy-4',
+        'classy-5',
+        'small-switch-1',
+        'small-switch-2',
+        'natural-1',
+        'natural-2',
+        'natural-3',
+        'grey-friend-1',
+        'grey-friend-2',
+        'shade-1',
+        'shade-2',
+        'shade-3',
+        'shade-4',
+      ],
     },
   },
 };
 
-/**
- * Small Container with Border and Left Alignment
- */
-export const SmallWithBorderLeft = () => (
-  <Container border size="small" align="left">
-    <p>This is a small container with a border and left alignment.</p>
-  </Container>
-);
+const Template = (args) => <Container {...args}>Content goes here</Container>;
 
-/**
- * Medium Rounded Container with Center Alignment
- */
-export const MediumRoundedCenter = () => (
-  <Container rounded size="medium" align="center">
-    <p>This is a medium-sized container with rounded corners and center alignment.</p>
-  </Container>
-);
-
-/**
- * Large Fluid Container with Right Alignment
- */
-export const LargeFluidRight = () => (
-  <Container fluid size="large" align="right">
-    <p>This is a large, fluid container without a border and right alignment.</p>
-  </Container>
-);
+export const Default = Template.bind({});
+Default.args = {
+  size: 'medium',
+  border: 'on',
+  align: 'left',
+  fluid: false,
+  padding: 'md',
+  marginTop: 'md',
+  marginBottom: 'md',
+  marginLeft: 'md',
+  marginRight: 'md',
+  position: 'relative',
+};
 
-/**
- * Container with Absolute Positioning
- */
-export const AbsolutePositioned = () => (
-  <Container position="absolute" style={{ top: '20px', left: '20px' }}>
-    <p>This container is absolutely positioned.</p>
-  </Container>
-);
+export const Fluid = Template.bind({});
+Fluid.args = {
+  ...Default.args,
+  fluid: true,
+};
 
-/**
- * Interactive Playground
- */
-const Template = (args) => <Container {...args}>This is an interactive container.</Container>;
+export const Centered = Template.bind({});
+Centered.args = {
+  ...Default.args,
+  align: 'center',
+};
 
-export const InteractiveContainer = Template.bind({});
-InteractiveContainer.args = {
-  border: false,
-  size: 'medium',
-  rounded: false,
-  fluid: false,
-  align: 'left',
-  position: 'static',
+export const LargePadding = Template.bind({});
+LargePadding.args = {
+  ...Default.args,
+  padding: 'lg',
 };
-InteractiveContainer.storyName = 'Interactive Container';

package/src/stories/Atoms/Grid/Grid.css

@@ -0,0 +1,160 @@
+/*this.GUI/src/stories/Atoms/Grid/Grid.css*/
+/* Base Grid Styles */
+.grid {
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Auto-fit responsive columns */
+  gap: 16px; /* Default gap between grid items */
+  padding: 16px;
+}
+
+/* Grid item styling */
+.grid > * {
+  background-color: var(--background-color);
+  padding: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Border Styles for Grid Items when the border prop is true */
+.grid--border > * {
+  border: 1px solid var(--border-color); /* Default border color */
+}
+
+/* Rounded corners */
+.grid--rounded > * {
+  border-radius: var(--border-radius, 8px); /* Apply rounded corners */
+}
+
+/* Shadow Depth Variants */
+.grid--shadow-small > * {
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2); /* Small shadow */
+}
+
+.grid--shadow-medium > * {
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); /* Medium shadow */
+}
+
+.grid--shadow-large > * {
+  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.4); /* Large shadow */
+}
+
+/* Responsive behavior: grid adjusts based on screen size */
+@media (max-width: 768px) {
+  .grid {
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 2 columns on tablet */
+  }
+}
+
+@media (max-width: 480px) {
+  .grid {
+    grid-template-columns: 1fr; /* 1 column on mobile */
+  }
+}
+
+/* Hover effect for visual feedback on grid items */
+.grid > *:hover {
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+}
+/* Border Color Variants (Using Theme Colors) */
+.grid--primary > * {
+  border-color: var(--primary-color);
+}
+
+.grid--secondary > * {
+  border-color: var(--secondary-color);
+}
+
+.grid--info > * {
+  border-color: var(--info-color);
+}
+
+.grid--warning > * {
+  border-color: var(--warning-color);
+}
+
+.grid--alert > * {
+  border-color: var(--alert-color);
+}
+
+.grid--success > * {
+  border-color: var(--success-color);
+}
+
+.grid--neutral > * {
+  border-color: var(--neutral-color);
+}
+
+.grid--dark > * {
+  border-color: var(--dark-color);
+}
+
+/* Classy Palette Variants */
+.grid--classy-color-1 > * {
+  border-color: var(--classy-color-1);
+}
+
+.grid--classy-color-2 > * {
+  border-color: var(--classy-color-2);
+}
+
+.grid--classy-color-3 > * {
+  border-color: var(--classy-color-3);
+}
+
+.grid--classy-color-4 > * {
+  border-color: var(--classy-color-4);
+}
+
+.grid--classy-color-5 > * {
+  border-color: var(--classy-color-5);
+}
+
+/* Small Switch Palette */
+.grid--small-switch-color-1 > * {
+  border-color: var(--small-switch-color-1);
+}
+
+.grid--small-switch-color-2 > * {
+  border-color: var(--small-switch-color-2);
+}
+
+/* Natural Palette */
+.grid--natural-color-1 > * {
+  border-color: var(--natural-color-1);
+}
+
+.grid--natural-color-2 > * {
+  border-color: var(--natural-color-2);
+}
+
+.grid--natural-color-3 > * {
+  border-color: var(--natural-color-3);
+}
+
+/* Grey Friends */
+.grid--grey-friend-1 > * {
+  border-color: var(--grey-friend-1);
+}
+
+.grid--grey-friend-2 > * {
+  border-color: var(--grey-friend-2);
+}
+
+/* Shades */
+.grid--shade-1 > * {
+  border-color: var(--shade-1);
+}
+
+.grid--shade-2 > * {
+  border-color: var(--shade-2);
+}
+
+.grid--shade-3 > * {
+  border-color: var(--shade-3);
+}
+
+.grid--shade-4 > * {
+  border-color: var(--shade-4);
+}

package/src/stories/Atoms/Grid/Grid.jsx

@@ -0,0 +1,43 @@
+//this.GUI/src/stories/Atoms/Grid/Grid.jsx
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Grid.css'; // Import the revised grid styles
+
+export const Grid = ({ gap, border, color, rounded, shadow, children }) => {
+  const gridClasses = [
+    'grid', // Base grid class
+    border ? `grid--border grid--${color}` : '', // Conditionally apply border and color
+    rounded ? 'grid--rounded' : '', // Conditionally apply rounded corners
+    shadow ? `grid--shadow-${shadow}` : '', // Conditionally apply shadow depth
+  ].join(' ').trim();
+
+  return (
+    <div className={gridClasses} style={{ gap }}>
+      {children} {/* Grid items go here */}
+    </div>
+  );
+};
+
+Grid.propTypes = {
+  gap: PropTypes.string,
+  border: PropTypes.bool,
+  color: PropTypes.oneOf([
+    'primary', 'secondary', 'info', 'warning', 'alert', 'success', 'neutral', 'dark',
+    'classy-color-1', 'classy-color-2', 'classy-color-3', 'classy-color-4', 'classy-color-5',
+    'small-switch-color-1', 'small-switch-color-2',
+    'natural-color-1', 'natural-color-2', 'natural-color-3',
+    'grey-friend-1', 'grey-friend-2',
+    'shade-1', 'shade-2', 'shade-3', 'shade-4'
+  ]),
+  rounded: PropTypes.bool, // Boolean for rounded corners
+  shadow: PropTypes.oneOf(['none', 'small', 'medium', 'large']), // Depth of shadow
+  children: PropTypes.node.isRequired,
+};
+
+Grid.defaultProps = {
+  gap: '16px', // Default gap between items
+  border: false, // Default to no border
+  color: 'primary', // Default border color
+  rounded: false, // Default to no rounded corners
+  shadow: 'none', // Default to no shadow
+};

package/src/stories/Atoms/Grid/Grid.stories.jsx

@@ -0,0 +1,84 @@
+//this.GUI/src/stories/Atoms/Grid/Grid.stories.jsx
+import React from 'react';
+import { Grid } from './Grid';
+
+export default {
+  title: 'Atoms/Layout/Grid',
+  component: Grid,
+  argTypes: {
+    gap: { control: 'text', defaultValue: '16px' },
+    border: { control: 'boolean', defaultValue: false },
+    rounded: { control: 'boolean', defaultValue: false },
+    shadow: {
+      control: 'select',
+      options: ['none', 'small', 'medium', 'large'],
+      defaultValue: 'none',
+    },
+    color: {
+      control: 'select',
+      options: [
+        'primary', 'secondary', 'info', 'warning', 'alert', 'success', 'neutral', 'dark',
+        'classy-color-1', 'classy-color-2', 'classy-color-3', 'classy-color-4', 'classy-color-5',
+        'small-switch-color-1', 'small-switch-color-2',
+        'natural-color-1', 'natural-color-2', 'natural-color-3',
+        'grey-friend-1', 'grey-friend-2',
+        'shade-1', 'shade-2', 'shade-3', 'shade-4'
+      ],
+      defaultValue: 'primary',
+    },
+  },
+};
+
+export const ResponsiveGrid = (args) => (
+  <Grid {...args}>
+    <div>Item 1</div>
+    <div>Item 2</div>
+    <div>Item 3</div>
+    <div>Item 4</div>
+    <div>Item 5</div>
+    <div>Item 6</div>
+    <div>Item 7</div>
+    <div>Item 8</div>
+    <div>Item 9</div>
+  </Grid>
+);
+
+export const GridWithRoundedAndShadow = (args) => (
+  <Grid {...args} border={true} rounded={true} shadow="medium" color="primary">
+    <div>Item 1</div>
+    <div>Item 2</div>
+    <div>Item 3</div>
+    <div>Item 4</div>
+    <div>Item 5</div>
+    <div>Item 6</div>
+    <div>Item 7</div>
+    <div>Item 8</div>
+    <div>Item 9</div>
+  </Grid>
+);
+
+export const ColorfulGrid = (args) => (
+  <Grid {...args} color="alert">
+    <div>Item 1</div>
+    <div>Item 2</div>
+    <div>Item 3</div>
+    <div>Item 4</div>
+    <div>Item 5</div>
+    <div>Item 6</div>
+    <div>Item 7</div>
+    <div>Item 8</div>
+    <div>Item 9</div>
+    <div>Item 10</div>
+    <div>Item 11</div>
+    <div>Item 12</div>
+    <div>Item 13</div>
+    <div>Item 14</div>
+    <div>Item 15</div>
+    <div>Item 16</div>
+    <div>Item 17</div>
+    <div>Item 18</div>
+    <div>Item 19</div>
+    <div>Item 20</div>
+    <div>Item 21</div>
+  </Grid>
+);

package/src/stories/Atoms/Link/Link.css

@@ -1,5 +1,3 @@
-/* src/stories/Atoms/Link/Link.css */
-
 .link {
   color: var(--link-color);
   font-size: var(--font-size-base);
@@ -7,36 +5,18 @@
   transition: color var(--transition-speed) ease, text-decoration var(--transition-speed) ease;
 }
 
-.link--underline {
-  text-decoration: underline;
-}
-
-.link--no-underline {
-  text-decoration: none;
-}
-
-.link--bold {
-  font-weight: var(--font-weight-bold);
-}
-
-.link--external {
-  display: inline-flex;
-  align-items: center;
+/* Hover states */
+.link:hover {
+  color: var(--link-hover-color);
+  text-decoration: underline; /* Default hover behavior */
 }
 
+/* External link icon styling */
 .link__external-icon {
   margin-left: 0.25em;
   font-size: 0.8em;
 }
 
-.link:hover {
-  color: var(--link-hover-color);
-}
-
-.link:hover.text-decoration {
-  text-decoration: underline;
-}
-
 /* Experimental Preview Styles */
 .link__preview {
   position: fixed;
@@ -68,4 +48,4 @@
     max-width: 90%;
     max-height: 400px;
   }
-}
+}

package/src/stories/Atoms/Link/Link.jsx

@@ -1,14 +1,12 @@
-// src/stories/Atoms/Link/Link.jsx
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import './Link.css';
 
 export const Link = ({
   text,
   href,
-  underline = true,
-  bold = false,
+  underline = true, // Controls underline
+  bold = false,      // Controls bold text
   newWindow = false,
   external = false,
   experimentalPreview = false,
@@ -30,18 +28,19 @@ export const Link = ({
     }
   };
 
-  const linkClasses = classNames('link', className, {
-    'link--underline': underline,
-    'link--no-underline': !underline,
-    'link--bold': bold,
-    'link--external': external,
-  });
+  // Build dynamic inline styles based on props
+  const dynamicStyles = {
+    textDecoration: underline ? 'underline' : 'none',
+    fontWeight: bold ? 'bold' : 'normal',
+    ...style, // Include any additional styles passed via props
+  };
 
   return (
     <>
       <a
         href={href}
-        className={linkClasses}
+        className={`link ${className}`} // Keep the base 'link' class for consistent styling
+        style={dynamicStyles} // Apply dynamic styles here
         target={newWindow ? '_blank' : '_self'}
         rel={newWindow ? 'noopener noreferrer' : undefined}
         onMouseDown={handleMouseDown}
@@ -61,22 +60,13 @@ export const Link = ({
 };
 
 Link.propTypes = {
-  /** Text content of the link */
   text: PropTypes.string.isRequired,
-  /** URL the link points to */
   href: PropTypes.string.isRequired,
-  /** Whether the link is underlined */
   underline: PropTypes.bool,
-  /** Whether the link text is bold */
   bold: PropTypes.bool,
-  /** Whether the link opens in a new window */
   newWindow: PropTypes.bool,
-  /** Whether the link is external */
   external: PropTypes.bool,
-  /** Enable experimental preview on press */
   experimentalPreview: PropTypes.bool,
-  /** Additional CSS classes */
   className: PropTypes.string,
-  /** Inline styles */
   style: PropTypes.object,
-};
+};

package/src/stories/Atoms/ProgressBar/ProgressBar.css

@@ -1,4 +1,4 @@
-/* ProgressBar.css */
+/* this.GUI/src/stories/Atoms/ProgressBar/ProgressBar.css */
 
 .progress-bar-container {
   width: 100%;

package/src/stories/Atoms/ProgressBar/ProgressBar.jsx

@@ -1,4 +1,4 @@
-// ProgressBar.jsx
+// this.GUI/src/stories/Atoms/ProgressBar/ProgressBar.jsx
 import React from 'react';
 import PropTypes from 'prop-types';
 import './ProgressBar.css'; // Import the CSS styles

package/src/stories/Atoms/ProgressBar/ProgressBar.stories.jsx

@@ -1,4 +1,4 @@
-// ProgressBar.stories.jsx
+// this.GUI/src/stories/Atoms/ProgressBar/ProgressBar.stories.jsx
 import React from 'react';
 import { ProgressBar } from './ProgressBar';
 import './ProgressBar.css'; // Import the CSS styles