this.gui 1.0.15 → 1.0.17

package/src/stories/Molecules/ButtonGroup/ButtonGroup.css

@@ -1,4 +1,465 @@
+/* this.GUI/src/stories/Molecules/ButtonGroup/ButtonGroup.css */ 
+/*Base Styles */
+.button-group {
+  display: inline-flex;
+  gap: var(--spacing-sm);
+}
+
+.button-group__button {
+  padding: var(--button-padding, 8px 16px);
+  border-radius: var(--border-radius, 4px);
+  cursor: pointer;
+  transition: background-color var(--transition-speed, 0.3s), border-color var(--transition-speed, 0.3s), color var(--transition-speed, 0.3s);
+  font-size: inherit;
+  border: none;
+}
+
+.button-group__button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--focus-outline-color, rgba(0, 0, 0, 0.2));
+}
+
+/* Solid Variant */
+.button-group--solid .button-group__button {
+  background-color: var(--primary-color);
+  color: var(--text-color-inverse);
+}
+
+.button-group--solid .button-group__button:hover {
+  background-color: var(--primary-color-hover);
+}
+
+/* Size Variants */
+.button-group--small .button-group__button {
+  font-size: 0.75rem;
+  padding: 6px 12px;
+}
+
+.button-group--medium .button-group__button {
+  font-size: 1rem;
+  padding: 8px 16px;
+}
+
+.button-group--large .button-group__button {
+  font-size: 1.25rem;
+  padding: 12px 20px;
+}
+
+/* Solid Color Variants */
+.button-group--primary .button-group__button {
+  background-color: var(--primary-color);
+  color: var(--text-color-inverse);
+}
+
+.button-group--primary .button-group__button:hover {
+  background-color: var(--primary-color-hover);
+}
+
+.button-group--secondary .button-group__button {
+  background-color: var(--secondary-color);
+  color: var(--text-color-inverse);
+}
+
+.button-group--secondary .button-group__button:hover {
+  background-color: var(--secondary-color-hover);
+}
+
+.button-group--info .button-group__button {
+  background-color: var(--info-color);
+  color: var(--text-color-inverse);
+}
+
+.button-group--info .button-group__button:hover {
+  background-color: var(--info-color-hover);
+}
+
+.button-group--warning .button-group__button {
+  background-color: var(--warning-color);
+  color: var(--text-color-inverse);
+}
+
+.button-group--warning .button-group__button:hover {
+  background-color: var(--warning-color-hover);
+}
+
+.button-group--alert .button-group__button {
+  background-color: var(--alert-color);
+  color: var(--text-color-inverse);
+}
+
+.button-group--alert .button-group__button:hover {
+  background-color: var(--alert-color-hover);
+}
+
+.button-group--success .button-group__button {
+  background-color: var(--success-color);
+  color: var(--text-color-inverse);
+}
+
+.button-group--success .button-group__button:hover {
+  background-color: var(--success-color-hover);
+}
+
+.button-group--neutral .button-group__button {
+  background-color: var(--neutral-color);
+  color: var(--text-color-inverse);
+}
+
+.button-group--neutral .button-group__button:hover {
+  background-color: var(--neutral-color-hover);
+}
+
+.button-group--dark .button-group__button {
+  background-color: var(--dark-color);
+  color: var(--text-color-inverse);
+}
+
+.button-group--dark .button-group__button:hover {
+  background-color: var(--dark-color-hover);
+}
+
+/* Classy Palette Solid Variants */
+.button-group--classy-color-1 .button-group__button {
+  background-color: var(--classy-color-1);
+  color: var(--text-color-inverse);
+}
+
+.button-group--classy-color-1 .button-group__button:hover {
+  background-color: var(--classy-color-1-hover);
+}
+
+.button-group--classy-color-2 .button-group__button {
+  background-color: var(--classy-color-2);
+  color: var(--text-color-inverse);
+}
+
+.button-group--classy-color-2 .button-group__button:hover {
+  background-color: var(--classy-color-2-hover);
+}
+
+.button-group--classy-color-3 .button-group__button {
+  background-color: var(--classy-color-3);
+  color: var(--text-color-inverse);
+}
+
+.button-group--classy-color-3 .button-group__button:hover {
+  background-color: var(--classy-color-3-hover);
+}
+
+.button-group--classy-color-4 .button-group__button {
+  background-color: var(--classy-color-4);
+  color: var(--text-color-inverse);
+}
+
+.button-group--classy-color-4 .button-group__button:hover {
+  background-color: var(--classy-color-4-hover);
+}
+
+.button-group--classy-color-5 .button-group__button {
+  background-color: var(--classy-color-5);
+  color: var(--text-color-inverse);
+}
+
+.button-group--classy-color-5 .button-group__button:hover {
+  background-color: var(--classy-color-5-hover);
+}
+
+/* Small Switch Palette Solid Variants */
+.button-group--small-switch-color-1 .button-group__button {
+  background-color: var(--small-switch-color-1);
+  color: var(--text-color-inverse);
+}
+
+.button-group--small-switch-color-1 .button-group__button:hover {
+  background-color: var(--small-switch-color-1-hover);
+}
+
+.button-group--small-switch-color-2 .button-group__button {
+  background-color: var(--small-switch-color-2);
+  color: var(--text-color-inverse);
+}
+
+.button-group--small-switch-color-2 .button-group__button:hover {
+  background-color: var(--small-switch-color-2-hover);
+}
+
+/* Natural Palette Solid Variants */
+.button-group--natural-color-1 .button-group__button {
+  background-color: var(--natural-color-1);
+  color: var(--text-color-inverse);
+}
+
+.button-group--natural-color-1 .button-group__button:hover {
+  background-color: var(--natural-color-1-hover);
+}
+
+.button-group--natural-color-2 .button-group__button {
+  background-color: var(--natural-color-2);
+  color: var(--text-color-inverse);
+}
+
+.button-group--natural-color-2 .button-group__button:hover {
+  background-color: var(--natural-color-2-hover);
+}
+
+.button-group--natural-color-3 .button-group__button {
+  background-color: var(--natural-color-3);
+  color: var(--text-color-inverse);
+}
+
+.button-group--natural-color-3 .button-group__button:hover {
+  background-color: var(--natural-color-3-hover);
+}
+
+/* Grey Friends Solid Variants */
+.button-group--grey-friend-1 .button-group__button {
+  background-color: var(--grey-friend-1);
+  color: var(--text-color-inverse);
+}
+
+.button-group--grey-friend-1 .button-group__button:hover {
+  background-color: var(--grey-friend-1-hover);
+}
+
+.button-group--grey-friend-2 .button-group__button {
+  background-color: var(--grey-friend-2);
+  color: var(--text-color-inverse);
+}
+
+.button-group--grey-friend-2 .button-group__button:hover {
+  background-color: var(--grey-friend-2-hover);
+}
+
+/* Shades Solid Variants */
+.button-group--shade-1 .button-group__button {
+  background-color: var(--shade-1);
+  color: var(--text-color-inverse);
+}
+
+.button-group--shade-1 .button-group__button:hover {
+  background-color: var(--shade-1-hover);
+}
+
+.button-group--shade-2 .button-group__button {
+  background-color: var(--shade-2);
+  color: var(--text-color-inverse);
+}
+
+.button-group--shade-2 .button-group__button:hover {
+  background-color: var(--shade-2-hover);
+}
+
+.button-group--shade-3 .button-group__button {
+  background-color: var(--shade-3);
+  color: var(--text-color-inverse);
+}
+
+.button-group--shade-3 .button-group__button:hover {
+  background-color: var(--shade-3-hover);
+}
+
+.button-group--shade-4 .button-group__button {
+  background-color: var(--shade-4);
+  color: var(--text-color-inverse);
+}
+
+.button-group--shade-4 .button-group__button:hover {
+  background-color: var(--shade-4-hover);
+}
+
+/* Outline Variant */
+.button-group--outline .button-group__button {
+  background-color: transparent;
+  border: 2px solid currentColor;
+  color: var(--primary-color); /* Default to primary color */
+}
+
+.button-group--outline .button-group__button:hover {
+  background-color: transparent;
+  border-color: var(--primary-color-hover);
+  color: var(--primary-color-hover);
+}
+
+/* Primary and Secondary Outline Variants */
+.button-group--primary.button-group--outline .button-group__button {
+  background-color: transparent;
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+}
+
+.button-group--secondary.button-group--outline .button-group__button {
+  background-color: transparent;
+  border-color: var(--secondary-color);
+  color: var(--secondary-color);
+}
+
+.button-group--primary.button-group--outline .button-group__button:hover,
+.button-group--secondary.button-group--outline .button-group__button:hover {
+  background-color: transparent;
+  color: var(--primary-color-hover);
+  border-color: var(--primary-color-hover);
+}
+
+/* Size Variants */
+.button-group--small .button-group__button {
+  font-size: 0.75rem;
+  padding: 6px 12px;
+}
+
+.button-group--medium .button-group__button {
+  font-size: 1rem;
+  padding: 8px 16px;
+}
+
+.button-group--large .button-group__button {
+  font-size: 1.25rem;
+  padding: 12px 20px;
+}
+
+/* Color Variants */
+.button-group--primary .button-group__button {
+  background-color: var(--primary-color);
+  color: var(--text-color-inverse);
+}
+
+.button-group--secondary .button-group__button {
+  background-color: var(--secondary-color);
+  color: var(--text-color-inverse);
+}
+
+/* Outline Color Variants */
+.button-group--primary.button-group--outline .button-group__button {
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+}
+
+.button-group--secondary.button-group--outline .button-group__button {
+  border-color: var(--secondary-color);
+  color: var(--secondary-color);
+}
 
-.buttongroup {
-  /* Default styles for ButtonGroup */
+.button-group--info.button-group--outline .button-group__button {
+  border-color: var(--info-color);
+  color: var(--info-color);
 }
+
+.button-group--warning.button-group--outline .button-group__button {
+  border-color: var(--warning-color);
+  color: var(--warning-color);
+}
+
+.button-group--alert.button-group--outline .button-group__button {
+  border-color: var(--alert-color);
+  color: var(--alert-color);
+}
+
+.button-group--success.button-group--outline .button-group__button {
+  border-color: var(--success-color);
+  color: var(--success-color);
+}
+
+.button-group--neutral.button-group--outline .button-group__button {
+  border-color: var(--neutral-color);
+  color: var(--neutral-color);
+}
+
+.button-group--dark.button-group--outline .button-group__button {
+  border-color: var(--dark-color);
+  color: var(--dark-color);
+}
+
+/* Classy Palette Outline Variants */
+.button-group--classy-color-1.button-group--outline .button-group__button {
+  border-color: var(--classy-color-1);
+  color: var(--classy-color-1);
+}
+
+.button-group--classy-color-2.button-group--outline .button-group__button {
+  border-color: var(--classy-color-2);
+  color: var(--classy-color-2);
+}
+
+.button-group--classy-color-3.button-group--outline .button-group__button {
+  border-color: var(--classy-color-3);
+  color: var(--classy-color-3);
+}
+
+.button-group--classy-color-4.button-group--outline .button-group__button {
+  border-color: var(--classy-color-4);
+  color: var(--classy-color-4);
+}
+
+.button-group--classy-color-5.button-group--outline .button-group__button {
+  border-color: var(--classy-color-5);
+  color: var(--classy-color-5);
+}
+
+/* Small Switch Palette Outline Variants */
+.button-group--small-switch-color-1.button-group--outline .button-group__button {
+  border-color: var(--small-switch-color-1);
+  color: var(--small-switch-color-1);
+}
+
+.button-group--small-switch-color-2.button-group--outline .button-group__button {
+  border-color: var(--small-switch-color-2);
+  color: var(--small-switch-color-2);
+}
+
+/* Natural Palette Outline Variants */
+.button-group--natural-color-1.button-group--outline .button-group__button {
+  border-color: var(--natural-color-1);
+  color: var(--natural-color-1);
+}
+
+.button-group--natural-color-2.button-group--outline .button-group__button {
+  border-color: var(--natural-color-2);
+  color: var(--natural-color-2);
+}
+
+.button-group--natural-color-3.button-group--outline .button-group__button {
+  border-color: var(--natural-color-3);
+  color: var(--natural-color-3);
+}
+
+/* Grey Friends Outline Variants */
+.button-group--grey-friend-1.button-group--outline .button-group__button {
+  border-color: var(--grey-friend-1);
+  color: var(--grey-friend-1);
+}
+
+.button-group--grey-friend-2.button-group--outline .button-group__button {
+  border-color: var(--grey-friend-2);
+  color: var(--grey-friend-2);
+}
+
+/* Shades Outline Variants */
+.button-group--shade-1.button-group--outline .button-group__button {
+  border-color: var(--shade-1);
+  color: var(--shade-1);
+}
+
+.button-group--shade-2.button-group--outline .button-group__button {
+  border-color: var(--shade-2);
+  color: var(--shade-2);
+}
+
+.button-group--shade-3.button-group--outline .button-group__button {
+  border-color: var(--shade-3);
+  color: var (--shade-3);
+}
+
+.button-group--shade-4.button-group--outline .button-group__button {
+  border-color: var(--shade-4);
+  color: var(--shade-4);
+}
+
+/* Hover Effects */
+.button-group__button:hover {
+  background-color: var(--primary-color-hover);
+}
+
+.button-group--outline .button-group__button:hover {
+  background-color: transparent;
+  border-color: var(--primary-color-hover);
+  color: var(--primary-color-hover);
+}

package/src/stories/Molecules/ButtonGroup/ButtonGroup.jsx

@@ -1,25 +1,47 @@
-
+//this.GUI/src/stories/Molecules/ButtonGroup/ButtonGroup.jsx
 import React from 'react';
 import PropTypes from 'prop-types';
 import './ButtonGroup.css';
 
-/**
- * ButtonGroup component
- */
-export const ButtonGroup = (props) => {
+export const ButtonGroup = ({ buttons, size, color, variant, onButtonClick }) => {
   return (
-    <div className="buttongroup" {...props}>
-      {/* Component implementation */}
+    <div className={`button-group button-group--${size} button-group--${color} button-group--${variant}`}>
+      {buttons.map((button, index) => (
+        <button
+          key={index}
+          className="button-group__button"
+          onClick={() => onButtonClick(button.value)}
+        >
+          {button.label}
+        </button>
+      ))}
     </div>
   );
 };
 
 ButtonGroup.propTypes = {
-  // Define prop types here
+  buttons: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired, // Label of the button
+      value: PropTypes.any.isRequired,    // Value to return on button click
+    })
+  ).isRequired,
+  size: PropTypes.oneOf(['small', 'medium', 'large']), // Size of the buttons
+  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'
+  ]), // Button color based on theme
+  variant: PropTypes.oneOf(['solid', 'outline']), // Solid or outline button styles
+  onButtonClick: PropTypes.func, // Callback function when a button is clicked
 };
 
 ButtonGroup.defaultProps = {
-  // Define default props here
-};
-
-export default ButtonGroup;
+  size: 'medium',
+  color: 'primary',
+  variant: 'solid',
+  onButtonClick: () => {},
+};

package/src/stories/Molecules/ButtonGroup/ButtonGroup.stories.jsx

@@ -1,20 +1,44 @@
-
+//this.GUI/src/stories/Molecules/ButtonGroup/ButtonGroup.stories.jsx
+import React from 'react';
 import { ButtonGroup } from './ButtonGroup';
 
-// Storybook configuration for ButtonGroup component
 export default {
-  title: 'Molecules/ButtonsWithIcons/ButtonGroup',
+  title: 'Molecules/Actions/ButtonGroup',
   component: ButtonGroup,
-  parameters: {
-    layout: 'centered',
-  },
   argTypes: {
-    // Define argTypes here
+    size: {
+      control: { type: 'select', options: ['small', 'medium', 'large'] },
+    },
+    color: {
+      control: {
+        type: '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'
+        ],
+      },
+    },
+    variant: {
+      control: { type: 'select', options: ['solid', 'outline'] },
+    },
   },
 };
 
-export const Default = {
-  args: {
-    // Define default args here
-  },
-};
+const buttonOptions = [
+  { label: 'Button 1', value: 'button1' },
+  { label: 'Button 2', value: 'button2' },
+  { label: 'Button 3', value: 'button3' },
+];
+
+export const DefaultButtonGroup = (args) => <ButtonGroup {...args} buttons={buttonOptions} />;
+
+DefaultButtonGroup.args = {
+  size: 'medium',
+  color: 'primary',
+  variant: 'solid',
+  onButtonClick: (value) => console.log('Clicked button:', value),
+};

package/src/stories/Molecules/Card/Card.css

@@ -1,4 +1,41 @@
-
+/*this.GUI/src/stories/Molecules/Card/Card.css*/
 .card {
-  /* Default styles for Card */
+  padding: 16px;
+  border-radius: var(--border-radius, 8px);
+  position: relative;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  color: inherit; /* Text color is inherited */
+}
+
+.card__content {
+  color: inherit; /* Inherit text color from parent */
+}
+
+.card--hoverable:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transform: translateY(-2px);
+}
+
+.card__expand, .card__remove {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: none;
+  border: none;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.card__remove {
+  right: 12px;
 }
+
+.card__expand {
+  right: 40px;
+}
+
+@media (max-width: 768px) {
+  .card {
+    padding: 12px;
+  }
+}