this.gui 1.0.14 → 1.0.16

package/src/stories/Atoms/Badge/Badge.stories.jsx

@@ -1,41 +1,120 @@
-
+import React from 'react';
 import { Badge } from './Badge';
+import './Badge.css';
 
-// Storybook configuration for Badge component
 export default {
-  title: 'Atoms/Visual/Badge',
+  title: 'Atoms/Data/Badge',
   component: Badge,
-  parameters: {
-    layout: 'centered',
-  },
   argTypes: {
-    children: { control: 'text' },
+    label: { control: 'text', defaultValue: 'Badge' },
+    variant: {
+      control: { type: 'select', options: ['primary', 'secondary'] },
+      description: 'Badge variant (primary or secondary)',
+    },
+    size: {
+      control: { type: 'select', options: ['small', 'normal', 'large'] },
+      description: 'Badge size',
+    },
+    round: {
+      control: 'boolean',
+      description: 'Make the badge round',
+    },
+    color: {
+      control: {
+        type: 'select',
+        options: [
+          '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',
+        ],
+      },
+      description: 'Badge color',
+    },
   },
 };
 
-export const Primary = {
-  args: {
-    primary: true,
-    children: 'This is a primary Badge',
-  },
-};
+// Primary Colored Badges
+export const PrimaryColoredBadges = () => (
+  <>
+    <h3>Primary Colored Badges</h3>
+    {[
+      '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',
+    ].map((color) => (
+      <Badge key={color} label={`${color} Badge`} variant="primary" color={color} />
+    ))}
+  </>
+);
 
-export const Secondary = {
-  args: {
-    children: 'This is a secondary Badge',
-  },
-};
+// Secondary Colored Badges
+export const SecondaryColoredBadges = () => (
+  <>
+    <h3>Secondary Colored Badges</h3>
+    {[
+      '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',
+    ].map((color) => (
+      <Badge key={color} label={`${color} Badge`} variant="secondary" color={color} />
+    ))}
+  </>
+);
 
-export const Large = {
-  args: {
-    size: 'large',
-    children: 'This is a large Badge',
-  },
-};
+// Primary Rounded Colored Badges
+export const PrimaryRoundedBadges = () => (
+  <>
+    <h3>Primary Rounded Badges</h3>
+    {[
+      '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',
+    ].map((color) => (
+      <Badge key={color} label={`9`} variant="primary" color={color} round />
+    ))}
+  </>
+);
 
-export const Small = {
-  args: {
-    size: 'small',
-    children: 'This is a small Badge',
-  },
+// Secondary Rounded Colored Badges
+export const SecondaryRoundedBadges = () => (
+  <>
+    <h3>Secondary Rounded Badges</h3>
+    {[
+      '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',
+    ].map((color) => (
+      <Badge key={color} label={`8`} variant="secondary" color={color} round />
+    ))}
+  </>
+);
+
+/**
+ * Interactive Badge story
+ */
+const Template = (args) => <Badge {...args} />;
+
+export const InteractiveBadge = Template.bind({});
+InteractiveBadge.args = {
+  label: 'Interactive Badge',
+  variant: 'primary',
+  size: 'normal',
+  round: false,
+  color: 'info',
 };
+InteractiveBadge.storyName = 'Interactive Badge';

package/src/stories/Atoms/Button/Button.css

@@ -1,70 +1,131 @@
+/* src/stories/Atoms/Button/Button.css */
+
 /* Base styles */
 .button {
   display: inline-block;
-  padding: var(--button-padding, 12px 24px);
-  border-radius: var(--button-border-radius, 8px);
-  font-family: 'Roboto', sans-serif; /* Inheriting global font */
-  font-size: var(--button-font-size, 16px); /* Increased for better readability */
+  padding: var(--button-padding);
+  border-radius: var(--border-radius);
+  font-family: var(--font-family);
+  font-size: var(--button-font-size);
   cursor: pointer;
-  transition: background-color 0.3s ease, box-shadow 0.3s ease;
+  transition: background-color var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed);
   text-align: center;
   border: 1px solid transparent;
-  box-shadow: var(--button-box-shadow, 0 2px 8px rgba(0, 0, 0, 0.15));
-  margin-right: 10px; /* Spacing between buttons */
+  box-shadow: var(--box-shadow);
+  margin-right: 10px;
+  background-color: var(--button-bg-color, transparent);
+  color: var(--button-text-color, var(--text-color));
+  border-color: var(--button-border-color, transparent);
 }
 
-/* Primary button */
-.button--primary {
-  background-color: var(--button-primary-bg-color, #691500); /* Deep green */
-  color: var(--button-primary-text-color, #3c0a0a);
-  border-color: var(--button-primary-border-color, #3f887c);
+/* Hover Effects */
+.button:hover {
+  background-color: var(--button-bg-hover-color, var(--button-bg-color));
+  color: var(--button-text-hover-color, var(--button-text-color));
+  border-color: var(--button-border-hover-color, var(--button-border-color));
 }
 
-.button--primary:hover {
-  background-color: var(--button-primary-hover-bg-color, #dee4e3);
-  box-shadow: var(--button-primary-hover-box-shadow, 0 6px 10px rgba(0, 0, 0, 0.2));
+/* Primary Variant */
+.button--primary {
+  --button-bg-color: var(--primary-color);
+  --button-text-color: var(--text-color-inverse);
+  --button-border-color: var(--primary-color);
+  --button-bg-hover-color: var(--primary-color-hover);
 }
 
-/* Secondary button */
+/* Secondary Variant */
 .button--secondary {
-  background-color: var(--button-secondary-bg-color, #fff);
-  color: var(--button-secondary-text-color, #00695c);
-  border-color: var(--button-secondary-border-color, #00695c);
+  --button-bg-color: transparent;
+  --button-text-color: var(--secondary-color);
+  --button-border-color: var(--secondary-border-color);
+  --button-text-hover-color: var(--primary-color-hover);
+  --button-border-hover-color: var(--primary-color);
+}
+
+/* Semantic Color Modifiers */
+
+/* For Primary Variant: Set background colors based on semantic colors */
+.button--primary.button--info {
+  --button-bg-color: var(--info-color);
+  --button-border-color: var(--info-color);
+  --button-bg-hover-color: var(--info-color-hover);
+}
+
+.button--primary.button--warning {
+  --button-bg-color: var(--warning-color);
+  --button-border-color: var(--warning-color);
+  --button-bg-hover-color: var(--warning-color-hover);
+}
+
+.button--primary.button--alert {
+  --button-bg-color: var(--alert-color);
+  --button-border-color: var(--alert-color);
+  --button-bg-hover-color: var(--alert-color-hover);
+  --button-text-color: #2C2C2C; /* Dark text for better readability */
+}
+
+.button--primary.button--success {
+  --button-bg-color: var(--success-color);
+  --button-border-color: var(--success-color);
+  --button-bg-hover-color: var(--success-color-hover);
+}
+
+.button--primary.button--neutral {
+  --button-bg-color: var(--neutral-color);
+  --button-border-color: var(--neutral-color);
+  --button-bg-hover-color: var(--neutral-color-hover);
+}
+
+.button--primary.button--dark {
+  --button-bg-color: var(--dark-color);
+  --button-border-color: var(--dark-color);
+  --button-bg-hover-color: var(--dark-color-hover);
+}
+
+/* For Secondary Variant: Set text and border colors based on semantic colors */
+.button--secondary.button--info {
+  --button-text-color: var(--info-color);
+  --button-border-color: var(--info-color);
+  --button-text-hover-color: var(--info-color-hover);
+  --button-border-hover-color: var(--info-color-hover);
+}
+
+.button--secondary.button--warning {
+  --button-text-color: var(--warning-color);
+  --button-border-color: var(--warning-color);
+  --button-text-hover-color: var(--warning-color-hover);
+  --button-border-hover-color: var(--warning-color-hover);
 }
 
-.button--secondary:hover {
-  background-color: var(--button-secondary-hover-bg-color, #f0f0f0);
-  box-shadow: var(--button-secondary-hover-box-shadow, 0 6px 10px rgba(0, 0, 0, 0.1));
+.button--secondary.button--alert {
+  --button-text-color: var(--alert-color);
+  --button-border-color: var(--alert-color);
+  --button-text-hover-color: var(--alert-color-hover);
+  --button-border-hover-color: var(--alert-color-hover);
 }
 
-/* Sizes */
-.button--small {
-  font-size: var(--button-small-font-size, 14px);
-  padding: var(--button-small-padding, 8px 16px);
+.button--secondary.button--success {
+  --button-text-color: var(--success-color);
+  --button-border-color: var(--success-color);
+  --button-text-hover-color: var(--success-color-hover);
+  --button-border-hover-color: var(--success-color-hover);
 }
 
-.button--medium {
-  font-size: var(--button-medium-font-size, 16px);
-  padding: var(--button-medium-padding, 12px 24px);
+.button--secondary.button--neutral {
+  --button-text-color: var(--neutral-color);
+  --button-border-color: var(--neutral-color);
+  --button-text-hover-color: var(--neutral-color-hover);
+  --button-border-hover-color: var(--neutral-color-hover);
 }
 
-.button--large {
-  font-size: var(--button-large-font-size, 18px);
-  padding: var(--button-large-padding, 16px 32px);
+.button--secondary.button--dark {
+  --button-text-color: var(--dark-color);
+  --button-border-color: var(--dark-color);
+  --button-text-hover-color: var(--dark-color-hover);
+  --button-border-hover-color: var(--dark-color-hover);
 }
 
-/* No Border Button Style */
+/* No Border Modifier */
 .button--no-border {
-  background-color: var(--button-no-border-bg-color, transparent);
-  color: var(--button-no-border-text-color, #00695c);
-  border: var(--button-no-border-border, none);
-  border-bottom: var(--button-no-border-border-bottom, 2px solid #00695c);
-  border-radius: var(--button-no-border-border-radius, 0);
-  padding: var(--button-no-border-padding, 0);
-}
-
-.button--no-border:hover {
-  border-bottom: var(--button-no-border-hover-border-bottom, 2px solid #004d40);
-  background-color: var(--button-no-border-hover-bg-color, transparent);
-  box-shadow: var(--button-no-border-hover-box-shadow, none);
+  border: none;
 }

package/src/stories/Atoms/Button/Button.jsx

@@ -1,98 +1,47 @@
+// src/stories/Atoms/Button/Button.jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import './Button.css'; // Keep the styles file
+import './Button.css'; // Ensure styles are imported
 
-export const Button = ({ primary, size, label, noBorder, children, ...props }) => {
-  const mode = primary ? 'button--primary' : 'button--secondary';
-  const buttonSize = size === 'small' ? 'button--small' : size === 'large' ? 'button--large' : 'button--medium';
+export const Button = ({
+  variant = 'primary', // 'primary', 'secondary'
+  color, // 'info', 'warning', 'alert', 'success', 'neutral', 'dark'
+  size = 'medium',
+  label = '',
+  noBorder = false,
+  children,
+  className = '',
+  style = {},
+  ...props
+}) => {
+  const variantClass = `button--${variant}`;
+  const colorClass = color ? `button--${color}` : '';
+  const sizeClass = `button--${size}`;
   const borderClass = noBorder ? 'button--no-border' : '';
 
+  const combinedClassName = `button ${variantClass} ${colorClass} ${sizeClass} ${borderClass} ${className}`.trim();
+
   return (
-    <button
-      type="button"
-      className={`button ${mode} ${buttonSize} ${borderClass}`}
-      style={{
-        '--button-padding': props.padding || null,
-        '--button-border-radius': props.borderRadius || null,
-        '--button-font-family': props.fontFamily || null,
-        '--button-font-size': props.fontSize || null,
-        '--button-box-shadow': props.boxShadow || null,
-        '--button-primary-bg-color': props.primaryBgColor || null,
-        '--button-primary-text-color': props.primaryTextColor || null,
-        '--button-primary-border-color': props.primaryBorderColor || null,
-        '--button-primary-hover-bg-color': props.primaryHoverBgColor || null,
-        '--button-primary-hover-box-shadow': props.primaryHoverBoxShadow || null,
-        '--button-secondary-bg-color': props.secondaryBgColor || null,
-        '--button-secondary-text-color': props.secondaryTextColor || null,
-        '--button-secondary-border-color': props.secondaryBorderColor || null,
-        '--button-secondary-hover-bg-color': props.secondaryHoverBgColor || null,
-        '--button-secondary-hover-box-shadow': props.secondaryHoverBoxShadow || null,
-        '--button-small-font-size': props.smallFontSize || null,
-        '--button-small-padding': props.smallPadding || null,
-        '--button-medium-font-size': props.mediumFontSize || null,
-        '--button-medium-padding': props.mediumPadding || null,
-        '--button-large-font-size': props.largeFontSize || null,
-        '--button-large-padding': props.largePadding || null,
-        '--button-no-border-bg-color': props.noBorderBgColor || null,
-        '--button-no-border-text-color': props.noBorderTextColor || null,
-        '--button-no-border-border': props.noBorderBorder || null,
-        '--button-no-border-border-bottom': props.noBorderBorderBottom || null,
-        '--button-no-border-border-radius': props.noBorderBorderRadius || null,
-        '--button-no-border-padding': props.noBorderPadding || null,
-        '--button-no-border-hover-border-bottom': props.noBorderHoverBorderBottom || null,
-        '--button-no-border-hover-bg-color': props.noBorderHoverBgColor || null,
-        '--button-no-border-hover-box-shadow': props.noBorderHoverBoxShadow || null,
-      }}
-      {...props}
-    >
+    <button type="button" className={combinedClassName} style={style} {...props}>
       {children || label}
     </button>
   );
 };
 
 Button.propTypes = {
-  primary: PropTypes.bool,
+  variant: PropTypes.oneOf(['primary', 'secondary']),
+  color: PropTypes.oneOf([
+    'info',
+    'warning',
+    'alert',
+    'success',
+    'neutral',
+    'dark',
+  ]),
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   label: PropTypes.string,
   noBorder: PropTypes.bool,
   children: PropTypes.node,
-  padding: PropTypes.string,
-  borderRadius: PropTypes.string,
-  fontFamily: PropTypes.string,
-  fontSize: PropTypes.string,
-  boxShadow: PropTypes.string,
-  primaryBgColor: PropTypes.string,
-  primaryTextColor: PropTypes.string,
-  primaryBorderColor: PropTypes.string,
-  primaryHoverBgColor: PropTypes.string,
-  primaryHoverBoxShadow: PropTypes.string,
-  secondaryBgColor: PropTypes.string,
-  secondaryTextColor: PropTypes.string,
-  secondaryBorderColor: PropTypes.string,
-  secondaryHoverBgColor: PropTypes.string,
-  secondaryHoverBoxShadow: PropTypes.string,
-  smallFontSize: PropTypes.string,
-  smallPadding: PropTypes.string,
-  mediumFontSize: PropTypes.string,
-  mediumPadding: PropTypes.string,
-  largeFontSize: PropTypes.string,
-  largePadding: PropTypes.string,
-  noBorderBgColor: PropTypes.string,
-  noBorderTextColor: PropTypes.string,
-  noBorderBorder: PropTypes.string,
-  noBorderBorderBottom: PropTypes.string,
-  noBorderBorderRadius: PropTypes.string,
-  noBorderPadding: PropTypes.string,
-  noBorderHoverBorderBottom: PropTypes.string,
-  noBorderHoverBgColor: PropTypes.string,
-  noBorderHoverBoxShadow: PropTypes.string,
-};
-
-Button.defaultProps = {
-  primary: false,
-  size: 'medium',
-  label: '',
-  noBorder: false,
-};
-
-export default Button;
+  className: PropTypes.string,
+  style: PropTypes.object,
+};