this.gui 1.0.14 → 1.0.16

package/src/stories/Atoms/Icon/Icon.css

@@ -1,48 +1,240 @@
-/* src/stories/atoms/Interactive/Icon/Icon.css */
+/* src/stories/Atoms/Icon/Icon.css */
 
-/* Base styles for the Icon component */
+.icon-container {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon-container--background {
+  background-color: var(--color-var);
+}
+
+.icon-container--shape-rounded {
+  border-radius: 50%;
+}
+
+.icon-container--shape-square {
+  border-radius: 0;
+}
+
+.icon-container--size-small {
+  width: var(--font-size-small);
+  height: var(--font-size-small);
+}
+
+.icon-container--size-normal {
+  width: var(--font-size-base);
+  height: var(--font-size-base);
+}
+
+.icon-container--size-big {
+  width: var(--font-size-large);
+  height: var(--font-size-large);
+}
+
+.icon-container--align-left {
+  justify-content: flex-start;
+}
+
+.icon-container--align-center {
+  justify-content: center;
+}
+
+.icon-container--align-right {
+  justify-content: flex-end;
+}
+
+/* Background Color Classes */
+.icon-container--color-info {
+  background-color: var(--info-color);
+}
+
+.icon-container--color-warning {
+  background-color: var(--warning-color);
+}
+
+.icon-container--color-alert {
+  background-color: var(--alert-color);
+}
+
+.icon-container--color-success {
+  background-color: var(--success-color);
+}
+
+.icon-container--color-neutral {
+  background-color: var(--neutral-color);
+}
+
+.icon-container--color-dark {
+  background-color: var(--dark-color);
+}
+
+.icon-container--color-classy-color-1 {
+  background-color: var(--classy-color-1);
+}
+
+.icon-container--color-classy-color-2 {
+  background-color: var(--classy-color-2);
+}
+
+.icon-container--color-classy-color-3 {
+  background-color: var(--classy-color-3);
+}
+
+.icon-container--color-classy-color-4 {
+  background-color: var(--classy-color-4);
+}
+
+.icon-container--color-classy-color-5 {
+  background-color: var(--classy-color-5);
+}
+
+.icon-container--color-small-switch-color-1 {
+  background-color: var(--small-switch-color-1);
+}
+
+.icon-container--color-small-switch-color-2 {
+  background-color: var(--small-switch-color-2);
+}
+
+.icon-container--color-natural-color-1 {
+  background-color: var(--natural-color-1);
+}
+
+.icon-container--color-natural-color-2 {
+  background-color: var(--natural-color-2);
+}
+
+.icon-container--color-natural-color-3 {
+  background-color: var(--natural-color-3);
+}
+
+.icon-container--color-grey-friend-1 {
+  background-color: var(--grey-friend-1);
+}
+
+.icon-container--color-grey-friend-2 {
+  background-color: var(--grey-friend-2);
+}
+
+.icon-container--color-shade-1 {
+  background-color: var(--shade-1);
+}
+
+.icon-container--color-shade-2 {
+  background-color: var(--shade-2);
+}
+
+.icon-container--color-shade-3 {
+  background-color: var(--shade-3);
+}
+
+.icon-container--color-shade-4 {
+  background-color: var(--shade-4);
+}
+
+/* Icon Styles */
 .icon {
   display: inline-block;
-  vertical-align: middle;
 }
 
-/* Sizes */
-.icon--small {
-  width: 16px;
-  height: 16px;
+.icon--color-info {
+  color: var(--info-color);
+}
+
+.icon--color-warning {
+  color: var(--warning-color);
+}
+
+.icon--color-alert {
+  color: var(--alert-color);
+}
+
+.icon--color-success {
+  color: var(--success-color);
+}
+
+.icon--color-neutral {
+  color: var(--neutral-color);
+}
+
+.icon--color-dark {
+  color: var(--dark-color);
+}
+
+.icon--color-classy-color-1 {
+  color: var(--classy-color-1);
+}
+
+.icon--color-classy-color-2 {
+  color: var(--classy-color-2);
+}
+
+.icon--color-classy-color-3 {
+  color: var(--classy-color-3);
+}
+
+.icon--color-classy-color-4 {
+  color: var(--classy-color-4);
+}
+
+.icon--color-classy-color-5 {
+  color: var(--classy-color-5);
+}
+
+.icon--color-small-switch-color-1 {
+  color: var(--small-switch-color-1);
+}
+
+.icon--color-small-switch-color-2 {
+  color: var(--small-switch-color-2);
+}
+
+.icon--color-natural-color-1 {
+  color: var(--natural-color-1);
+}
+
+.icon--color-natural-color-2 {
+  color: var(--natural-color-2);
+}
+
+.icon--color-natural-color-3 {
+  color: var(--natural-color-3);
 }
 
-.icon--medium {
-  width: 24px;
-  height: 24px;
+.icon--color-grey-friend-1 {
+  color: var(--grey-friend-1);
 }
 
-.icon--large {
-  width: 32px;
-  height: 32px;
+.icon--color-grey-friend-2 {
+  color: var(--grey-friend-2);
 }
 
-/* Colors */
-.icon--primary {
-  fill: #1e88e5;
+.icon--color-shade-1 {
+  color: var(--shade-1);
 }
 
-.icon--secondary {
-  fill: #757575;
+.icon--color-shade-2 {
+  color: var(--shade-2);
 }
 
-.icon--success {
-  fill: #43a047;
+.icon--color-shade-3 {
+  color: var(--shade-3);
 }
 
-.icon--danger {
-  fill: #e53935;
+.icon--color-shade-4 {
+  color: var(--shade-4);
 }
 
-.icon--warning {
-  fill: #fdd835;
+.icon--size-small {
+  font-size: var(--font-size-small);
 }
 
-.icon--info {
-  fill: #039be5;
-}
+.icon--size-normal {
+  font-size: var(--font-size-base);
+}
+
+.icon--size-big {
+  font-size: var(--font-size-large);
+}

package/src/stories/Atoms/Icon/Icon.jsx

@@ -1,51 +1,80 @@
-// src/stories/atoms/Interactive/Icon/Icon.jsx
-
+// src/stories/Atoms/Icon/Icon.jsx
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import './Icon.css';
 
-/**
- * Icon component for displaying SVG icons
- */
-export const Icon = ({ name, size, color, ...props }) => {
-  const sizeClass = size ? `icon--${size}` : '';
-  const colorClass = color ? `icon--${color}` : '';
+export const Icon = ({
+  icon: IconComponent,
+  background = false,
+  color = 'neutral',
+  shape = 'square',
+  size = 'normal',
+  align = 'left',
+  className = '',
+  style = {},
+  ...props
+}) => {
+  const containerClasses = classNames('icon-container', className, {
+    'icon-container--background': background,
+    [`icon-container--shape-${shape}`]: shape,
+    [`icon-container--size-${size}`]: size,
+    [`icon-container--align-${align}`]: align,
+    [`icon-container--color-${color}`]: background,
+  });
+
+  const iconClasses = classNames('icon', {
+    [`icon--color-${color}`]: !background,
+    [`icon--size-${size}`]: size,
+  });
 
-  return (
-    <svg
-      className={['icon', sizeClass, colorClass].join(' ').trim()}
-      {...props}
-    >
-      <use xlinkHref={`#icon-${name}`} />
-    </svg>
+  return background ? (
+    <div className={containerClasses} style={style} {...props}>
+      <IconComponent className={iconClasses} />
+    </div>
+  ) : (
+    <IconComponent className={iconClasses} style={style} {...props} />
   );
 };
 
 Icon.propTypes = {
-  /**
-   * Name of the icon (should correspond to an existing SVG symbol)
-   */
-  name: PropTypes.string.isRequired,
-  /**
-   * Size of the icon
-   */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /**
-   * Color variant of the icon
-   */
+  /** Icon component from react-icons or similar library */
+  icon: PropTypes.elementType.isRequired,
+  /** Whether to display a background behind the icon */
+  background: PropTypes.bool,
+  /** Color of the icon or background */
   color: PropTypes.oneOf([
-    'primary',
-    'secondary',
-    'success',
-    'danger',
-    'warning',
     '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',
   ]),
+  /** Shape of the background */
+  shape: PropTypes.oneOf(['rounded', 'square']),
+  /** Size of the icon */
+  size: PropTypes.oneOf(['small', 'normal', 'big']),
+  /** Alignment of the icon within its container */
+  align: PropTypes.oneOf(['left', 'center', 'right']),
+  /** Additional CSS classes */
+  className: PropTypes.string,
+  /** Inline styles */
+  style: PropTypes.object,
 };
-
-Icon.defaultProps = {
-  size: 'medium',
-  color: 'primary',
-};
-
-export default Icon;

package/src/stories/Atoms/Icon/Icon.stories.jsx

@@ -1,72 +1,177 @@
-// src/stories/atoms/Interactive/Icon/Icon.stories.jsx
-
+// src/stories/Atoms/Icon/Icon.stories.jsx
 import React from 'react';
 import { Icon } from './Icon';
+import { FaBeer, FaCoffee, FaApple, FaAndroid, FaReact, FaCheck, FaTimes, FaInfoCircle, FaExclamationTriangle, FaQuestionCircle } from 'react-icons/fa';
+import './Icon.css';
 
 export default {
   title: 'Atoms/Media/Icon',
   component: Icon,
-  parameters: {
-    layout: 'centered',
-  },
   argTypes: {
-    name: {
-      control: 'text',
-      description: 'Name of the icon symbol to use.',
+    icon: {
+      control: 'object',
+      description: 'Icon component from react-icons or similar library.',
+    },
+    background: {
+      control: 'boolean',
+      description: 'Whether to display a background behind the icon.',
+    },
+    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: 'Color of the icon or background.',
+    },
+    shape: {
+      control: {
+        type: 'select',
+        options: ['rounded', 'square'],
+      },
+      description: 'Shape of the icon background.',
     },
     size: {
-      control: 'select',
-      options: ['small', 'medium', 'large'],
+      control: {
+        type: 'select',
+        options: ['small', 'normal', 'big'],
+      },
       description: 'Size of the icon.',
     },
-    color: {
-      control: 'select',
-      options: ['primary', 'secondary', 'success', 'danger', 'warning', 'info'],
-      description: 'Color variant of the icon.',
+    align: {
+      control: {
+        type: 'select',
+        options: ['left', 'center', 'right'],
+      },
+      description: 'Alignment of the icon within its container.',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes.',
+    },
+    style: {
+      control: 'object',
+      description: 'Inline styles.',
     },
   },
 };
 
-const Template = (args) => <Icon {...args} />;
-
-export const Primary = Template.bind({});
-Primary.args = {
-  name: 'home', // Replace 'home' with an actual icon name
-  size: 'medium',
-  color: 'primary',
+const icons = {
+  FaBeer: FaBeer,
+  FaCoffee: FaCoffee,
+  FaApple: FaApple,
+  FaAndroid: FaAndroid,
+  FaReact: FaReact,
+  FaCheck: FaCheck,
+  FaTimes: FaTimes,
+  FaInfoCircle: FaInfoCircle,
+  FaExclamationTriangle: FaExclamationTriangle,
+  FaQuestionCircle: FaQuestionCircle,
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  name: 'settings',
-  size: 'medium',
-  color: 'secondary',
-};
+/**
+ * All Icons Collection
+ */
+export const AllIcons = () => (
+  <div className="icon-collection">
+    {Object.entries(icons).map(([name, IconComponent]) => (
+      <div key={name} className="icon-item">
+        <Icon
+          icon={IconComponent}
+          background={false}
+          color="neutral"
+          shape="square"
+          size="normal"
+        />
+        <p>{name}</p>
+      </div>
+    ))}
+  </div>
+);
 
-export const Success = Template.bind({});
-Success.args = {
-  name: 'check',
-  size: 'medium',
-  color: 'success',
-};
+/**
+ * Icon with Background
+ */
+export const IconWithBackground = () => (
+  <Icon
+    icon={FaBeer}
+    background
+    color="success"
+    shape="rounded"
+    size="big"
+    align="center"
+  />
+);
 
-export const Danger = Template.bind({});
-Danger.args = {
-  name: 'error',
-  size: 'medium',
-  color: 'danger',
-};
+/**
+ * Icon without Background
+ */
+export const IconWithoutBackground = () => (
+  <Icon
+    icon={FaCoffee}
+    background={false}
+    color="warning"
+    size="normal"
+    align="left"
+  />
+);
 
-export const Large = Template.bind({});
-Large.args = {
-  name: 'star',
-  size: 'large',
-  color: 'primary',
-};
+/**
+ * Rounded Icon with Different Colors
+ */
+export const RoundedIcons = () => (
+  <div className="icon-story">
+    <Icon icon={FaApple} background color="info" shape="rounded" size="small" />
+    <Icon icon={FaAndroid} background color="alert" shape="rounded" size="normal" />
+    <Icon icon={FaReact} background color="shade-3" shape="rounded" size="big" />
+  </div>
+);
+
+/**
+ * Square Icon with Different Colors
+ */
+export const SquareIcons = () => (
+  <div className="icon-story">
+    <Icon icon={FaBeer} background color="neutral" shape="square" size="small" />
+    <Icon icon={FaCoffee} background color="dark" shape="square" size="normal" />
+    <Icon icon={FaApple} background color="classy-color-2" shape="square" size="big" />
+  </div>
+);
 
-export const Small = Template.bind({});
-Small.args = {
-  name: 'search',
-  size: 'small',
-  color: 'primary',
-};
+/**
+ * Interactive Icon
+ */
+const Template = (args) => <Icon {...args} />;
+
+export const InteractiveIcon = Template.bind({});
+InteractiveIcon.args = {
+  icon: FaReact,
+  background: false,
+  color: 'info',
+  shape: 'rounded',
+  size: 'normal',
+  align: 'center',
+};
+InteractiveIcon.storyName = 'Interactive Icon';