this.gui 1.0.14 → 1.0.16

package/src/stories/Atoms/Audio/Audio.stories.jsx

@@ -1,41 +1,191 @@
-
+// src/stories/Atoms/Audio/Audio.stories.jsx
+import React from 'react';
 import { Audio } from './Audio';
+import './Audio.css';
 
-// Storybook configuration for Audio component
 export default {
   title: 'Atoms/Media/Audio',
   component: Audio,
-  parameters: {
-    layout: 'centered',
-  },
   argTypes: {
-    children: { control: 'text' },
+    src: {
+      control: 'text',
+      description: 'Source URL of the audio file.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'required' },
+      },
+    },
+    autoPlay: {
+      control: 'boolean',
+      description: 'Autoplay the audio on load.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    loop: {
+      control: 'boolean',
+      description: 'Loop the audio playback.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    muted: {
+      control: 'boolean',
+      description: 'Mute the audio by default.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    size: {
+      control: {
+        type: 'select',
+        options: ['small', 'medium'],
+      },
+      description: 'Size of the audio player.',
+      table: {
+        type: { summary: 'small | medium' },
+        defaultValue: { summary: 'medium' },
+      },
+    },
+    color: {
+      control: {
+        type: 'select',
+        options: [
+          '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: 'Color from the global palettes for control icons.',
+      table: {
+        type: { summary: '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: { summary: 'classy-color-1' },
+      },
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes.',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    style: {
+      control: 'object',
+      description: 'Inline styles.',
+      table: {
+        type: { summary: 'object' },
+      },
+    },
   },
 };
 
-export const Primary = {
-  args: {
-    primary: true,
-    children: 'This is a primary Audio',
-  },
-};
+/**
+ * 
+ * Medium size with Classy Palette Color 1.
+ */
+export const DefaultAudio = () => (
+  <Audio
+    src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
+    size="medium"
+    color="classy-color-1"
+  />
+);
 
-export const Secondary = {
-  args: {
-    children: 'This is a secondary Audio',
-  },
-};
+/**
+ * 
+ * Medium size, autoplay enabled with Classy Palette Color 3.
+ */
+export const AutoplayAudio = () => (
+  <Audio
+    src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3"
+    autoPlay
+    size="medium"
+    color="classy-color-3"
+  />
+);
 
-export const Large = {
-  args: {
-    size: 'large',
-    children: 'This is a large Audio',
-  },
-};
+/**
+ * 
+ * Small size with Classy Palette Color 2.
+ */
+export const SmallAudio = () => (
+  <Audio
+    src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3"
+    size="small"
+    color="classy-color-2"
+  />
+);
 
-export const Small = {
-  args: {
-    size: 'small',
-    children: 'This is a small Audio',
-  },
+
+/**
+ * 
+ * Medium size, looping enabled with Classy Palette Color 4.
+ */
+export const LoopingAudio = () => (
+  <Audio
+    src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3"
+    loop
+    size="medium"
+    color="classy-color-4"
+  />
+);
+
+/**
+ * 
+ * Medium size, muted by default with Classy Palette Color 5.
+ */
+export const MutedAudio = () => (
+  <Audio
+    src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-5.mp3"
+    muted
+    size="medium"
+    color="classy-color-5"
+  />
+);
+
+/**
+ * 
+ * Medium size with custom styles and Classy Palette Color 1.
+ */
+export const CustomStyledAudio = () => (
+  <Audio
+    src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-6.mp3"
+    size="medium"
+    color="classy-color-1"
+    style={{ border: '2px solid var(--classy-color-1)', borderRadius: '8px' }}
+  />
+);
+
+/**
+ * ### Interactive Playground
+ * 
+ * Allows dynamic interaction with the audio props via Storybook controls.
+ */
+const Template = (args) => <Audio {...args} />;
+
+export const Playground = Template.bind({});
+Playground.args = {
+  src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-7.mp3',
+  autoPlay: false,
+  loop: false,
+  muted: false,
+  size: 'medium',
+  color: 'classy-color-1',
 };
+Playground.storyName = 'Interactive Playground';

package/src/stories/Atoms/Badge/Badge.css

@@ -1,29 +1,248 @@
-
 .badge {
-  padding: 16px;
-  border-radius: 8px;
-  background-color: #f0f0f0;
-  border: 1px solid #ddd;
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 600;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  margin-right: 6px;
+  margin-bottom: 6px;
+  border: 1px solid transparent;
+}
+
+/* Size Variants */
+.badge--small {
+  padding: 2px 6px;
+  font-size: 12px;
+}
+
+.badge--large {
+  padding: 6px 12px;
+  font-size: 16px;
+}
+
+/* Rounded Badge */
+.badge--round {
+  padding: 0 12px;
+  border-radius: 50px; /* Pill shape */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  white-space: nowrap;
 }
 
+/* Primary Badge Variants */
 .badge--primary {
-  background-color: #e3f2fd;
-  border-color: #1e88e5;
+  background-color: var(--primary-color);
+  color: var(--text-color-inverse);
+}
+
+/* Primary Color Variants */
+.badge--primary.info {
+  background-color: var(--info-color);
+}
+
+.badge--primary.warning {
+  background-color: var(--warning-color);
+}
+
+.badge--primary.alert {
+  background-color: var(--alert-color);
+}
+
+.badge--primary.success {
+  background-color: var(--success-color);
+}
+
+.badge--primary.neutral {
+  background-color: var(--neutral-color);
+}
+
+.badge--primary.dark {
+  background-color: var(--dark-color);
+}
+
+.badge--primary.classy-color-1 {
+  background-color: var(--classy-color-1);
+}
+
+.badge--primary.classy-color-2 {
+  background-color: var(--classy-color-2);
+}
+
+.badge--primary.classy-color-3 {
+  background-color: var(--classy-color-3);
+}
+
+.badge--primary.classy-color-4 {
+  background-color: var(--classy-color-4);
+}
+
+.badge--primary.classy-color-5 {
+  background-color: var(--classy-color-5);
+}
+
+.badge--primary.small-switch-color-1 {
+  background-color: var(--small-switch-color-1);
+}
+
+.badge--primary.small-switch-color-2 {
+  background-color: var(--small-switch-color-2);
+}
+
+.badge--primary.natural-color-1 {
+  background-color: var(--natural-color-1);
+}
+
+.badge--primary.natural-color-2 {
+  background-color: var(--natural-color-2);
+}
+
+.badge--primary.natural-color-3 {
+  background-color: var(--natural-color-3);
+}
+
+.badge--primary.grey-friend-1 {
+  background-color: var(--grey-friend-1);
+}
+
+.badge--primary.grey-friend-2 {
+  background-color: var(--grey-friend-2);
+}
+
+.badge--primary.shade-1 {
+  background-color: var(--shade-1);
+}
+
+.badge--primary.shade-2 {
+  background-color: var(--shade-2);
+}
+
+.badge--primary.shade-3 {
+  background-color: var(--shade-3);
+}
+
+.badge--primary.shade-4 {
+  background-color: var(--shade-4);
 }
 
+/* Secondary Badge Variants */
 .badge--secondary {
-  background-color: #fff;
-  border-color: #ccc;
+  background-color: transparent;
+  border-color: var(--primary-color);
+  color: var(--primary-color);
 }
 
-.badge--small {
-  padding: 8px;
+/* Secondary Color Variants */
+.badge--secondary.info {
+  border-color: var(--info-color);
+  color: var(--info-color);
 }
 
-.badge--medium {
-  padding: 16px;
+.badge--secondary.warning {
+  border-color: var(--warning-color);
+  color: var(--warning-color);
 }
 
-.badge--large {
-  padding: 32px;
+.badge--secondary.alert {
+  border-color: var(--alert-color);
+  color: var(--alert-color);
+}
+
+.badge--secondary.success {
+  border-color: var(--success-color);
+  color: var(--success-color);
+}
+
+.badge--secondary.neutral {
+  border-color: var(--neutral-color);
+  color: var(--neutral-color);
+}
+
+.badge--secondary.dark {
+  border-color: var(--dark-color);
+  color: var(--dark-color);
+}
+
+.badge--secondary.classy-color-1 {
+  border-color: var(--classy-color-1);
+  color: var(--classy-color-1);
+}
+
+.badge--secondary.classy-color-2 {
+  border-color: var(--classy-color-2);
+  color: var(--classy-color-2);
+}
+
+.badge--secondary.classy-color-3 {
+  border-color: var(--classy-color-3);
+  color: var(--classy-color-3);
+}
+
+.badge--secondary.classy-color-4 {
+  border-color: var(--classy-color-4);
+  color: var(--classy-color-4);
 }
+
+.badge--secondary.classy-color-5 {
+  border-color: var(--classy-color-5);
+  color: var(--classy-color-5);
+}
+
+.badge--secondary.small-switch-color-1 {
+  border-color: var(--small-switch-color-1);
+  color: var(--small-switch-color-1);
+}
+
+.badge--secondary.small-switch-color-2 {
+  border-color: var(--small-switch-color-2);
+  color: var(--small-switch-color-2);
+}
+
+.badge--secondary.natural-color-1 {
+  border-color: var(--natural-color-1);
+  color: var(--natural-color-1);
+}
+
+.badge--secondary.natural-color-2 {
+  border-color: var(--natural-color-2);
+  color: var(--natural-color-2);
+}
+
+.badge--secondary.natural-color-3 {
+  border-color: var(--natural-color-3);
+  color: var(--natural-color-3);
+}
+
+.badge--secondary.grey-friend-1 {
+  border-color: var(--grey-friend-1);
+  color: var(--grey-friend-1);
+}
+
+.badge--secondary.grey-friend-2 {
+  border-color: var(--grey-friend-2);
+  color: var(--grey-friend-2);
+}
+
+.badge--secondary.shade-1 {
+  border-color: var(--shade-1);
+  color: var(--shade-1);
+}
+
+.badge--secondary.shade-2 {
+  border-color: var(--shade-2);
+  color: var(--shade-2);
+}
+
+.badge--secondary.shade-3 {
+  border-color: var(--shade-3);
+  color: var(--shade-3);
+}
+
+.badge--secondary.shade-4 {
+  border-color: var(--shade-4);
+  color: var(--shade-4);
+}

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

@@ -1,41 +1,54 @@
-
+// src/stories/Atoms/Badge/Badge.jsx
 import React from 'react';
 import PropTypes from 'prop-types';
 import './Badge.css';
 
-/**
- * Badge component for user interaction
- */
-export const Badge = ({ primary, size, children, ...props }) => {
-  const mode = primary ? 'badge--primary' : 'badge--secondary';
+export const Badge = ({
+  label,
+  variant = 'primary',
+  size = 'normal',
+  color,
+  round = false,
+}) => {
+  const variantClass = `badge--${variant}`;
+  const sizeClass = size !== 'normal' ? `badge--${size}` : '';
+  const colorClass = color ? `${color}` : ''; // Ensure color class matches CSS
+  const roundClass = round ? 'badge--round' : '';
+
   return (
-    <div
-      className={['badge', `badge--${size}`, mode].join(' ')}
-      {...props}
-    >
-      {children}
-    </div>
+    <span className={`badge ${variantClass} ${sizeClass} ${colorClass} ${roundClass}`}>
+      {label}
+    </span>
   );
 };
 
 Badge.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,
+  label: PropTypes.string.isRequired,
+  variant: PropTypes.oneOf(['primary', 'secondary']),
+  size: PropTypes.oneOf(['small', 'normal', 'large']),
+  color: PropTypes.oneOf([
+    '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',
+  ]), // Updated to oneOf with specific options
+  round: PropTypes.bool,
 };
-
-Badge.defaultProps = {
-  primary: false,
-  size: 'medium',
-};
-
-export default Badge;