this.gui 1.0.16 → 1.0.18

package/src/stories/Molecules/Breadcrumbs/Breadcrumbs.css

@@ -1,4 +1,147 @@
-
+/*this.GUI/src/stories/Molecules/Breadcrumbs/Breadcrumbs.css*/ 
+Base Styles */
 .breadcrumbs {
-  /* Default styles for Breadcrumbs */
+  display: flex;
+  align-items: center;
+  font-size: var(--font-size-medium);
+  color: var(--text-color);
+}
+
+.breadcrumbs__item {
+  display: flex;
+  align-items: center;
+}
+
+.breadcrumbs__link {
+  text-decoration: none;
+  cursor: pointer;
+  color: inherit;
+  background: none;
+  border: none;
+  font-size: inherit;
+  padding: 0;
+}
+
+.breadcrumbs__separator {
+  margin: 0 8px;
+}
+
+/* Active State (Bold Text) */
+.breadcrumbs__active {
+  font-weight: bold;
+}
+
+/* Size Variants */
+.breadcrumbs--small {
+  font-size: 0.75rem;
+}
+
+.breadcrumbs--medium {
+  font-size: 1rem;
+}
+
+.breadcrumbs--large {
+  font-size: 1.25rem;
+}
+
+/* Color Variants for Breadcrumb Links */
+.breadcrumbs--primary .breadcrumbs__link {
+  color: var(--primary-color);
+}
+
+.breadcrumbs--secondary .breadcrumbs__link {
+  color: var(--secondary-color);
+}
+
+.breadcrumbs--info .breadcrumbs__link {
+  color: var(--info-color);
+}
+
+.breadcrumbs--warning .breadcrumbs__link {
+  color: var(--warning-color);
+}
+
+.breadcrumbs--alert .breadcrumbs__link {
+  color: var(--alert-color);
+}
+
+.breadcrumbs--success .breadcrumbs__link {
+  color: var(--success-color);
+}
+
+.breadcrumbs--neutral .breadcrumbs__link {
+  color: var(--neutral-color);
+}
+
+.breadcrumbs--dark .breadcrumbs__link {
+  color: var(--dark-color);
 }
+
+/* Classy Palette */
+.breadcrumbs--classy-color-1 .breadcrumbs__link {
+  color: var(--classy-color-1);
+}
+
+.breadcrumbs--classy-color-2 .breadcrumbs__link {
+  color: var(--classy-color-2);
+}
+
+.breadcrumbs--classy-color-3 .breadcrumbs__link {
+  color: var(--classy-color-3);
+}
+
+.breadcrumbs--classy-color-4 .breadcrumbs__link {
+  color: var(--classy-color-4);
+}
+
+.breadcrumbs--classy-color-5 .breadcrumbs__link {
+  color: var(--classy-color-5);
+}
+
+/* Small Switch Palette */
+.breadcrumbs--small-switch-color-1 .breadcrumbs__link {
+  color: var(--small-switch-color-1);
+}
+
+.breadcrumbs--small-switch-color-2 .breadcrumbs__link {
+  color: var(--small-switch-color-2);
+}
+
+/* Natural Palette */
+.breadcrumbs--natural-color-1 .breadcrumbs__link {
+  color: var(--natural-color-1);
+}
+
+.breadcrumbs--natural-color-2 .breadcrumbs__link {
+  color: var(--natural-color-2);
+}
+
+.breadcrumbs--natural-color-3 .breadcrumbs__link {
+  color: var(--natural-color-3);
+}
+
+/* Grey Friends */
+.breadcrumbs--grey-friend-1 .breadcrumbs__link {
+  color: var(--grey-friend-1);
+}
+
+.breadcrumbs--grey-friend-2 .breadcrumbs__link {
+  color: var(--grey-friend-2);
+}
+
+/* Shades */
+.breadcrumbs--shade-1 .breadcrumbs__link {
+  color: var(--shade-1);
+}
+
+.breadcrumbs--shade-2 .breadcrumbs__link {
+  color: var(--shade-2);
+}
+
+.breadcrumbs--shade-3 .breadcrumbs__link {
+  color: var(--shade-3);
+}
+
+.breadcrumbs--shade-4 .breadcrumbs__link {
+  color: var(--shade-4);
+}

package/src/stories/Molecules/Breadcrumbs/Breadcrumbs.jsx

@@ -1,25 +1,51 @@
-
+//this.GUI/src/stories/Molecules/Breadcrumbs/Breadcrumbs.jsx
 import React from 'react';
 import PropTypes from 'prop-types';
 import './Breadcrumbs.css';
 
-/**
- * Breadcrumbs component
- */
-export const Breadcrumbs = (props) => {
+export const Breadcrumbs = ({ items, separator, color, size, onItemClick }) => {
   return (
-    <div className="breadcrumbs" {...props}>
-      {/* Component implementation */}
-    </div>
+    <nav className={`breadcrumbs breadcrumbs--${color} breadcrumbs--${size}`}>
+      {items.map((item, index) => (
+        <span key={item.label} className="breadcrumbs__item">
+          <button
+            className={`breadcrumbs__link ${item.active ? 'breadcrumbs__active' : ''}`}
+            onClick={() => onItemClick(item)}
+          >
+            {item.label}
+          </button>
+          {index < items.length - 1 && (
+            <span className="breadcrumbs__separator">{separator}</span>
+          )}
+        </span>
+      ))}
+    </nav>
   );
 };
 
 Breadcrumbs.propTypes = {
-  // Define prop types here
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      active: PropTypes.bool, // To mark the active breadcrumb
+    })
+  ).isRequired,
+  separator: PropTypes.string,
+  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'
+  ]),
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  onItemClick: PropTypes.func,
 };
 
 Breadcrumbs.defaultProps = {
-  // Define default props here
-};
-
-export default Breadcrumbs;
+  separator: '/',
+  color: 'primary',
+  size: 'medium',
+  onItemClick: () => {}, // Default click handler does nothing
+};

package/src/stories/Molecules/Breadcrumbs/Breadcrumbs.stories.jsx

@@ -1,20 +1,36 @@
-
+//this.GUI/src/stories/Molecules/Breadcrumbs/Breadcrumbs.stories.jsx
+import React from 'react';
 import { Breadcrumbs } from './Breadcrumbs';
 
-// Storybook configuration for Breadcrumbs component
 export default {
   title: 'Molecules/Navigation/Breadcrumbs',
   component: Breadcrumbs,
-  parameters: {
-    layout: 'centered',
-  },
   argTypes: {
-    // Define argTypes here
+    separator: { control: 'text', defaultValue: '>' },
+    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'
+        ],
+      },
+    },
+    size: {
+      control: { type: 'select', options: ['small', 'medium', 'large'], defaultValue: 'medium' },
+    },
   },
 };
 
-export const Default = {
-  args: {
-    // Define default args here
-  },
-};
+const items = [
+  { label: 'Home', link: '/' },
+  { label: 'Products', link: '/products' },
+  { label: 'Laptops', link: '/products/laptops', active: true }, // Mark this breadcrumb as active
+  { label: 'MacBook Pro' }, // No link, indicates the current page
+];
+
+export const DefaultBreadcrumbs = (args) => <Breadcrumbs {...args} items={items} />;