this.gui 1.0.14 → 1.0.16

package/src/stories/Atoms/Paragraph/Paragraph.css

@@ -1,29 +1,180 @@
+/* src/stories/Atoms/Paragraph/Paragraph.css */
 
 .paragraph {
-  padding: 16px;
-  border-radius: 8px;
-  background-color: #f0f0f0;
-  border: 1px solid #ddd;
+  font-family: var(--font-family);
+  margin-bottom: var(--spacing-md);
 }
 
-.paragraph--primary {
-  background-color: #e3f2fd;
-  border-color: #1e88e5;
+/* Size Variants */
+.paragraph--size-xs {
+  font-size: var(--font-size-small);
 }
 
-.paragraph--secondary {
-  background-color: #fff;
-  border-color: #ccc;
+.paragraph--size-sm {
+  font-size: calc(var(--font-size-small) * 1.1);
 }
 
-.paragraph--small {
-  padding: 8px;
+.paragraph--size-md {
+  font-size: var(--font-size-base);
 }
 
-.paragraph--medium {
-  padding: 16px;
+.paragraph--size-lg {
+  font-size: calc(var(--font-size-base) * 1.1);
 }
 
-.paragraph--large {
-  padding: 32px;
+.paragraph--size-xl {
+  font-size: calc(var(--font-size-base) * 1.25);
+}
+
+/* Text Alignment */
+.paragraph--align-left {
+  text-align: left;
+}
+
+.paragraph--align-center {
+  text-align: center;
+}
+
+.paragraph--align-right {
+  text-align: right;
+}
+
+.paragraph--align-justify {
+  text-align: justify;
+}
+
+/* Font Weight */
+.paragraph--weight-light {
+  font-weight: 300;
+}
+
+.paragraph--weight-normal {
+  font-weight: var(--font-weight-regular);
+}
+
+.paragraph--weight-bold {
+  font-weight: var(--font-weight-bold);
+}
+
+/* Text Colors */
+.paragraph--color-default {
+  color: var(--text-color);
+}
+
+.paragraph--color-muted {
+  color: var(--muted-text-color);
+}
+
+.paragraph--color-primary {
+  color: var(--primary-color);
+}
+
+.paragraph--color-secondary {
+  color: var(--secondary-color);
+}
+
+.paragraph--color-info {
+  color: var(--info-color);
+}
+
+.paragraph--color-warning {
+  color: var(--warning-color);
+}
+
+.paragraph--color-alert {
+  color: var(--alert-color);
+}
+
+.paragraph--color-success {
+  color: var(--success-color);
+}
+
+.paragraph--color-dark {
+  color: var(--dark-color);
+}
+
+.paragraph--color-neutral {
+  color: var(--neutral-color);
+}
+
+/* Classy Palette */
+.paragraph--color-classy-color-1 {
+  color: var(--classy-color-1);
+}
+
+.paragraph--color-classy-color-2 {
+  color: var(--classy-color-2);
+}
+
+.paragraph--color-classy-color-3 {
+  color: var(--classy-color-3);
+}
+
+.paragraph--color-classy-color-4 {
+  color: var(--classy-color-4);
+}
+
+.paragraph--color-classy-color-5 {
+  color: var(--classy-color-5);
+}
+
+/* Small Switch Palette */
+.paragraph--color-small-switch-color-1 {
+  color: var(--small-switch-color-1);
+}
+
+.paragraph--color-small-switch-color-2 {
+  color: var(--small-switch-color-2);
+}
+
+/* Natural Palette */
+.paragraph--color-natural-color-1 {
+  color: var(--natural-color-1);
+}
+
+.paragraph--color-natural-color-2 {
+  color: var(--natural-color-2);
+}
+
+.paragraph--color-natural-color-3 {
+  color: var(--natural-color-3);
+}
+
+/* Grey Friends */
+.paragraph--color-grey-friend-1 {
+  color: var(--grey-friend-1);
+}
+
+.paragraph--color-grey-friend-2 {
+  color: var(--grey-friend-2);
+}
+
+/* Shades */
+.paragraph--color-shade-1 {
+  color: var(--shade-1);
+}
+
+.paragraph--color-shade-2 {
+  color: var(--shade-2);
+}
+
+.paragraph--color-shade-3 {
+  color: var(--shade-3);
+}
+
+.paragraph--color-shade-4 {
+  color: var(--shade-4);
+}
+
+/* Line Height */
+.paragraph--lineHeight-normal {
+  line-height: var(--line-height);
+}
+
+.paragraph--lineHeight-tight {
+  line-height: 1.3;
+}
+
+.paragraph--lineHeight-loose {
+  line-height: 2;
 }

package/src/stories/Atoms/Paragraph/Paragraph.jsx

@@ -1,41 +1,77 @@
-
+// src/stories/Atoms/Paragraph/Paragraph.jsx
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import './Paragraph.css';
 
-/**
- * Paragraph component for user interaction
- */
-export const Paragraph = ({ primary, size, children, ...props }) => {
-  const mode = primary ? 'paragraph--primary' : 'paragraph--secondary';
+export const Paragraph = ({
+  text,
+  size = 'md', // 'xs', 'sm', 'md', 'lg', 'xl'
+  alignment = 'left', // 'left', 'center', 'right', 'justify'
+  weight = 'normal', // 'light', 'normal', 'bold'
+  color = 'default', // All color options, including the new semantic and palette options
+  lineHeight = 'normal', // 'normal', 'tight', 'loose'
+  className = '',
+  style = {},
+  ...props
+}) => {
+  const paragraphClasses = classNames('paragraph', className, {
+    [`paragraph--size-${size}`]: size,
+    [`paragraph--align-${alignment}`]: alignment,
+    [`paragraph--weight-${weight}`]: weight,
+    [`paragraph--color-${color}`]: color,
+    [`paragraph--lineHeight-${lineHeight}`]: lineHeight,
+  });
+
   return (
-    <div
-      className={['paragraph', `paragraph--${size}`, mode].join(' ')}
-      {...props}
-    >
-      {children}
-    </div>
+    <p className={paragraphClasses} style={style} {...props}>
+      {text}
+    </p>
   );
 };
 
 Paragraph.propTypes = {
-  /**
-   * Is this the primary style for the component?
-   */
-  primary: PropTypes.bool,
-  /**
-   * Size of the component
-   */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /**
-   * Content to be rendered inside the component
-   */
-  children: PropTypes.node.isRequired,
+  /** Text content for the paragraph */
+  text: PropTypes.string.isRequired,
+  /** Size of the paragraph text */
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  /** Text alignment */
+  alignment: PropTypes.oneOf(['left', 'center', 'right', 'justify']),
+  /** Font weight */
+  weight: PropTypes.oneOf(['light', 'normal', 'bold']),
+  /** Text color */
+  color: PropTypes.oneOf([
+    'default',
+    'muted',
+    'primary',
+    'secondary',
+    'info',
+    'warning',
+    'alert',
+    'success',
+    'dark',
+    'neutral',
+    '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',
+  ]),
+  /** Line height */
+  lineHeight: PropTypes.oneOf(['normal', 'tight', 'loose']),
+  /** Additional CSS classes */
+  className: PropTypes.string,
+  /** Inline styles */
+  style: PropTypes.object,
 };
-
-Paragraph.defaultProps = {
-  primary: false,
-  size: 'medium',
-};
-
-export default Paragraph;

package/src/stories/Atoms/Paragraph/Paragraph.stories.jsx

@@ -1,41 +1,143 @@
-
+// src/stories/Atoms/Paragraph/Paragraph.stories.jsx
+import React from 'react';
 import { Paragraph } from './Paragraph';
+import './Paragraph.css';
 
-// Storybook configuration for Paragraph component
 export default {
   title: 'Atoms/Text/Paragraph',
   component: Paragraph,
-  parameters: {
-    layout: 'centered',
-  },
   argTypes: {
-    children: { control: 'text' },
+    text: {
+      control: 'text',
+      description: 'Text content for the paragraph.',
+    },
+    size: {
+      control: {
+        type: 'select',
+        options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      },
+      description: 'Size of the paragraph text.',
+    },
+    alignment: {
+      control: {
+        type: 'select',
+        options: ['left', 'center', 'right', 'justify'],
+      },
+      description: 'Text alignment.',
+    },
+    weight: {
+      control: {
+        type: 'select',
+        options: ['light', 'normal', 'bold'],
+      },
+      description: 'Font weight.',
+    },
+    color: {
+      control: {
+        type: 'select',
+        options: [
+          'default',
+          'muted',
+          'primary',
+          'secondary',
+          'info',
+          'warning',
+          'alert',
+          'success',
+          'dark',
+          'neutral',
+          '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',
+        ],
+      },
+      description: 'Text color.',
+    },
+    lineHeight: {
+      control: {
+        type: 'select',
+        options: ['normal', 'tight', 'loose'],
+      },
+      description: 'Line height of the paragraph.',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes.',
+    },
+    style: {
+      control: 'object',
+      description: 'Inline styles.',
+    },
   },
 };
 
-export const Primary = {
-  args: {
-    primary: true,
-    children: 'This is a primary Paragraph',
-  },
-};
+/**
+ * Default Paragraph
+ */
+export const DefaultParagraph = () => (
+  <Paragraph text="This is a default paragraph with medium size and left alignment." />
+);
 
-export const Secondary = {
-  args: {
-    children: 'This is a secondary Paragraph',
-  },
-};
+/**
+ * Large Bold Centered Paragraph
+ */
+export const LargeBoldCentered = () => (
+  <Paragraph
+    text="This is a large, bold, and centered paragraph."
+    size="lg"
+    weight="bold"
+    alignment="center"
+    color="primary"
+  />
+);
 
-export const Large = {
-  args: {
-    size: 'large',
-    children: 'This is a large Paragraph',
-  },
-};
+/**
+ * Small Muted Paragraph with Tight Line Height
+ */
+export const SmallMutedTight = () => (
+  <Paragraph
+    text="This is a small, muted paragraph with tight line height."
+    size="sm"
+    color="muted"
+    lineHeight="tight"
+  />
+);
 
-export const Small = {
-  args: {
-    size: 'small',
-    children: 'This is a small Paragraph',
-  },
+/**
+ * Paragraph with Justify Alignment and Secondary Color
+ */
+export const JustifySecondary = () => (
+  <Paragraph
+    text="This paragraph is justified and has secondary color."
+    alignment="justify"
+    color="secondary"
+  />
+);
+
+/**
+ * Interactive Paragraph
+ */
+const Template = (args) => <Paragraph {...args} />;
+
+export const InteractiveParagraph = Template.bind({});
+InteractiveParagraph.args = {
+  text: 'This is an interactive paragraph.',
+  size: 'md',
+  alignment: 'left',
+  weight: 'normal',
+  color: 'default',
+  lineHeight: 'normal',
 };

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

@@ -1,29 +1,127 @@
+/* ProgressBar.css */
 
-.progressbar {
-  padding: 16px;
-  border-radius: 8px;
-  background-color: #f0f0f0;
-  border: 1px solid #ddd;
+.progress-bar-container {
+  width: 100%;
+  height: 20px;
+  background-color: var(--neutral-color);
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  position: relative;
 }
 
-.progressbar--primary {
-  background-color: #e3f2fd;
-  border-color: #1e88e5;
+.progress-bar {
+  height: 100%;
+  transition: width var(--transition-speed);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--border-radius);
+  color: var(--text-color-inverse); /* White text for better contrast */
 }
 
-.progressbar--secondary {
-  background-color: #fff;
-  border-color: #ccc;
+.progress-label {
+  font-size: 12px;
+  font-weight: bold;
 }
 
-.progressbar--small {
-  padding: 8px;
+/* Color Variants */
+.progress-bar--primary {
+  background-color: var(--primary-color);
 }
 
-.progressbar--medium {
-  padding: 16px;
+.progress-bar--secondary {
+  background-color: var(--secondary-color);
 }
 
-.progressbar--large {
-  padding: 32px;
+.progress-bar--info {
+  background-color: var(--info-color);
+}
+
+.progress-bar--warning {
+  background-color: var(--warning-color);
+}
+
+.progress-bar--alert {
+  background-color: var(--alert-color);
+}
+
+.progress-bar--success {
+  background-color: var(--success-color);
+}
+
+.progress-bar--neutral {
+  background-color: var(--neutral-color);
+}
+
+.progress-bar--dark {
+  background-color: var(--dark-color);
+}
+
+/* Classy Palette */
+.progress-bar--classy-1 {
+  background-color: var(--classy-color-1);
+}
+
+.progress-bar--classy-2 {
+  background-color: var(--classy-color-2);
+}
+
+.progress-bar--classy-3 {
+  background-color: var(--classy-color-3);
+}
+
+.progress-bar--classy-4 {
+  background-color: var(--classy-color-4);
+}
+
+.progress-bar--classy-5 {
+  background-color: var(--classy-color-5);
+}
+
+/* Small Switch Palette */
+.progress-bar--small-switch-1 {
+  background-color: var(--small-switch-color-1);
+}
+
+.progress-bar--small-switch-2 {
+  background-color: var(--small-switch-color-2);
+}
+
+/* Natural Palette */
+.progress-bar--natural-1 {
+  background-color: var(--natural-color-1);
+}
+
+.progress-bar--natural-2 {
+  background-color: var(--natural-color-2);
+}
+
+.progress-bar--natural-3 {
+  background-color: var(--natural-color-3);
+}
+
+/* Grey Friends */
+.progress-bar--grey-friend-1 {
+  background-color: var(--grey-friend-1);
+}
+
+.progress-bar--grey-friend-2 {
+  background-color: var(--grey-friend-2);
+}
+
+/* Shades */
+.progress-bar--shade-1 {
+  background-color: var(--shade-1);
+}
+
+.progress-bar--shade-2 {
+  background-color: var(--shade-2);
+}
+
+.progress-bar--shade-3 {
+  background-color: var(--shade-3);
+}
+
+.progress-bar--shade-4 {
+  background-color: var(--shade-4);
 }

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

@@ -1,41 +1,40 @@
-
+// ProgressBar.jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import './ProgressBar.css';
+import './ProgressBar.css'; // Import the CSS styles
+
+export const ProgressBar = ({
+  progress = 0, // Default to 0% progress
+  color = 'primary', // Can be 'primary', 'secondary', 'info', 'warning', etc.
+  label = '', // Optional label text
+  showLabel = true, // Show or hide the label
+  className = '',
+  style = {},
+  ...props
+}) => {
+  const colorClass = `progress-bar--${color}`;
 
-/**
- * ProgressBar component for user interaction
- */
-export const ProgressBar = ({ primary, size, children, ...props }) => {
-  const mode = primary ? 'progressbar--primary' : 'progressbar--secondary';
   return (
-    <div
-      className={['progressbar', `progressbar--${size}`, mode].join(' ')}
-      {...props}
-    >
-      {children}
+    <div className={`progress-bar-container ${className}`} style={style} {...props}>
+      <div className={`progress-bar ${colorClass}`} style={{ width: `${progress}%` }}>
+        {showLabel && <span className="progress-label">{label}</span>}
+      </div>
     </div>
   );
 };
 
 ProgressBar.propTypes = {
-  /**
-   * Is this the primary style for the component?
-   */
-  primary: PropTypes.bool,
-  /**
-   * Size of the component
-   */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /**
-   * Content to be rendered inside the component
-   */
-  children: PropTypes.node.isRequired,
+  progress: PropTypes.number,
+  color: PropTypes.oneOf([
+    'primary', 'secondary', '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'
+  ]),
+  label: PropTypes.string,
+  showLabel: PropTypes.bool,
+  className: PropTypes.string,
+  style: PropTypes.object,
 };
-
-ProgressBar.defaultProps = {
-  primary: false,
-  size: 'medium',
-};
-
-export default ProgressBar;