this.gui 1.0.16 → 1.0.17

package/src/stories/Atoms/Section/Section.css

@@ -0,0 +1,268 @@
+/* this.GUI/src/stories/Atoms/Section/Section.css */
+/* Base Section Styles */
+.section {
+  margin: var(--spacing-md) 0;
+  padding: var(--spacing-md);
+  background-color: var(--background-color);
+  transition: all var(--transition-speed) ease;
+}
+
+/* Border Styles for Section */
+.section--border {
+  border: 1px solid var(--border-color); /* Default border color */
+}
+
+.section--full-width {
+  width: 100vw;
+  margin-left: calc(-50vw + 50%);
+  padding: var(--spacing-lg);
+}
+
+/* Shadow Variants */
+.section--shadow-small {
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.section--shadow-medium {
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+.section--shadow-large {
+  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.4);
+}
+
+/* Title Styling */
+.section__title {
+  margin-bottom: var(--spacing-md);
+  color: var(--text-color);
+  font-weight: var(--font-weight-bold);
+}
+
+/* Border Color Variants - Primary and Secondary Colors */
+.section--border-primary {
+  border-color: var(--primary-color);
+}
+
+.section--border-secondary {
+  border-color: var(--secondary-color);
+}
+
+/* Semantic Colors for Border */
+.section--border-info {
+  border-color: var(--info-color);
+}
+
+.section--border-warning {
+  border-color: var(--warning-color);
+}
+
+.section--border-alert {
+  border-color: var(--alert-color);
+}
+
+.section--border-success {
+  border-color: var(--success-color);
+}
+
+.section--border-neutral {
+  border-color: var(--neutral-color);
+}
+
+.section--border-dark {
+  border-color: var(--dark-color);
+}
+
+/* Classy Palette Variants */
+.section--border-classy-color-1 {
+  border-color: var(--classy-color-1);
+}
+
+.section--border-classy-color-2 {
+  border-color: var(--classy-color-2);
+}
+
+.section--border-classy-color-3 {
+  border-color: var(--classy-color-3);
+}
+
+.section--border-classy-color-4 {
+  border-color: var(--classy-color-4);
+}
+
+.section--border-classy-color-5 {
+  border-color: var(--classy-color-5);
+}
+
+/* Small Switch Palette Variants */
+.section--border-small-switch-color-1 {
+  border-color: var(--small-switch-color-1);
+}
+
+.section--border-small-switch-color-2 {
+  border-color: var(--small-switch-color-2);
+}
+
+/* Natural Palette Variants */
+.section--border-natural-color-1 {
+  border-color: var(--natural-color-1);
+}
+
+.section--border-natural-color-2 {
+  border-color: var(--natural-color-2);
+}
+
+.section--border-natural-color-3 {
+  border-color: var(--natural-color-3);
+}
+
+/* Grey Friends Palette Variants */
+.section--border-grey-friend-1 {
+  border-color: var(--grey-friend-1);
+}
+
+.section--border-grey-friend-2 {
+  border-color: var(--grey-friend-2);
+}
+
+/* Shades Variants */
+.section--border-shade-1 {
+  border-color: var(--shade-1);
+}
+
+.section--border-shade-2 {
+  border-color: var(--shade-2);
+}
+
+.section--border-shade-3 {
+  border-color: var(--shade-3);
+}
+
+.section--border-shade-4 {
+  border-color: var(--shade-4);
+}
+
+/* Background Color Variants */
+.section--background-primary {
+  background-color: var(--primary-color);
+  color: var(--text-color-inverse);
+}
+
+.section--background-secondary {
+  background-color: var(--secondary-color);
+  color: var(--text-color-inverse);
+}
+
+.section--background-info {
+  background-color: var(--info-color);
+  color: var(--text-color-inverse);
+}
+
+.section--background-warning {
+  background-color: var(--warning-color);
+  color: var(--text-color-inverse);
+}
+
+.section--background-alert {
+  background-color: var(--alert-color);
+  color: var(--text-color);
+}
+
+.section--background-success {
+  background-color: var(--success-color);
+  color: var(--text-color-inverse);
+}
+
+.section--background-neutral {
+  background-color: var(--neutral-color);
+  color: var(--text-color);
+}
+
+.section--background-dark {
+  background-color: var(--dark-color);
+  color: var(--text-color-inverse);
+}
+
+/* Classy Palette Background Variants */
+.section--background-classy-color-1 {
+  background-color: var(--classy-color-1);
+  color: var(--text-color-inverse);
+}
+
+.section--background-classy-color-2 {
+  background-color: var(--classy-color-2);
+  color: var(--text-color-inverse);
+}
+
+.section--background-classy-color-3 {
+  background-color: var(--classy-color-3);
+  color: var(--text-color-inverse);
+}
+
+.section--background-classy-color-4 {
+  background-color: var(--classy-color-4);
+  color: var(--text-color-inverse);
+}
+
+.section--background-classy-color-5 {
+  background-color: var(--classy-color-5);
+  color: var(--text-color-inverse);
+}
+
+/* Small Switch Palette Background Variants */
+.section--background-small-switch-color-1 {
+  background-color: var(--small-switch-color-1);
+  color: var(--text-color);
+}
+
+.section--background-small-switch-color-2 {
+  background-color: var(--small-switch-color-2);
+  color: var(--text-color-inverse);
+}
+
+/* Natural Palette Background Variants */
+.section--background-natural-color-1 {
+  background-color: var(--natural-color-1);
+  color: var(--text-color-inverse);
+}
+
+.section--background-natural-color-2 {
+  background-color: var(--natural-color-2);
+  color: var(--text-color);
+}
+
+.section--background-natural-color-3 {
+  background-color: var(--natural-color-3);
+  color: var(--text-color);
+}
+
+/* Grey Friends Background Variants */
+.section--background-grey-friend-1 {
+  background-color: var(--grey-friend-1);
+  color: var(--text-color-inverse);
+}
+
+.section--background-grey-friend-2 {
+  background-color: var(--grey-friend-2);
+  color: var(--text-color-inverse);
+}
+
+/* Shades Background Variants */
+.section--background-shade-1 {
+  background-color: var(--shade-1);
+  color: var(--text-color-inverse);
+}
+
+.section--background-shade-2 {
+  background-color: var(--shade-2);
+  color: var(--text-color-inverse);
+}
+
+.section--background-shade-3 {
+  background-color: var(--shade-3);
+  color: var(--text-color-inverse);
+}
+
+.section--background-shade-4 {
+  background-color: var(--shade-4);
+  color: var(--text-color-inverse);
+}

package/src/stories/Atoms/Section/Section.jsx

@@ -0,0 +1,63 @@
+//this.GUI/src/stories/Atoms/Section/Section.jsx
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Section.css';
+
+export const Section = ({
+  title,
+  margin,
+  padding,
+  backgroundColor,
+  border,
+  borderColor,
+  fullWidth,
+  shadow,
+  id,
+  ariaLabel,
+  children,
+}) => {
+  const sectionClasses = [
+    'section',
+    border ? `section--border section--border-${borderColor}` : '',
+    fullWidth ? 'section--full-width' : '',
+    shadow ? `section--shadow-${shadow}` : '',
+  ].join(' ').trim();
+
+  return (
+    <section id={id} className={sectionClasses} style={{ margin, padding, backgroundColor }} aria-label={ariaLabel}>
+      {title && <h2 className="section__title">{title}</h2>}
+      {children}
+    </section>
+  );
+};
+
+Section.propTypes = {
+  title: PropTypes.string,
+  margin: PropTypes.string,
+  padding: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  border: PropTypes.bool,
+  borderColor: 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'
+  ]),
+  fullWidth: PropTypes.bool,
+  shadow: PropTypes.oneOf(['none', 'small', 'medium', 'large']),
+  id: PropTypes.string,
+  ariaLabel: PropTypes.string,
+  children: PropTypes.node.isRequired,
+};
+
+Section.defaultProps = {
+  margin: '20px 0',
+  padding: '20px',
+  backgroundColor: 'transparent',
+  border: false,
+  borderColor: 'neutral',
+  fullWidth: false,
+  shadow: 'none',
+};

package/src/stories/Atoms/Section/Section.stories.jsx

@@ -0,0 +1,46 @@
+//this.GUI/src/stories/Atoms/Section/Section.stories.jsx
+import React from 'react';
+import { Section } from './Section';
+
+export default {
+  title: 'Atoms/Layout/Section',
+  component: Section,
+  argTypes: {
+    title: { control: 'text', defaultValue: 'Section Title' },
+    margin: { control: 'text', defaultValue: '20px 0' },
+    padding: { control: 'text', defaultValue: '20px' },
+    backgroundColor: { control: 'color', defaultValue: 'transparent' },
+    border: { control: 'boolean', defaultValue: false },
+    borderColor: {
+      control: 'select',
+      options: ['primary', 'secondary', 'info', 'warning', 'alert', 'success', 'neutral', 'dark'],
+      defaultValue: 'neutral',
+    },
+    fullWidth: { control: 'boolean', defaultValue: false },
+    shadow: {
+      control: 'select',
+      options: ['none', 'small', 'medium', 'large'],
+      defaultValue: 'none',
+    },
+    id: { control: 'text', defaultValue: 'section-1' },
+    ariaLabel: { control: 'text', defaultValue: 'Main Section' },
+  },
+};
+
+export const DefaultSection = (args) => (
+  <Section {...args}>
+    <p>This is a section with some default content.</p>
+  </Section>
+);
+
+export const SectionWithBorder = (args) => (
+  <Section {...args} border={true} borderColor="primary">
+    <p>This section has a border.</p>
+  </Section>
+);
+
+export const FullWidthSection = (args) => (
+  <Section {...args} fullWidth={true} shadow="medium">
+    <p>This is a full-width section with a medium shadow.</p>
+  </Section>
+);

package/src/stories/Atoms/TextArea/TextArea.css

@@ -1,3 +1,4 @@
+/*this.GUI/src/stories/Atoms/TextArea/TextArea.css */
 .textarea-wrapper {
   display: flex;
   flex-direction: column;

package/src/stories/Atoms/TextArea/TextArea.jsx

@@ -1,3 +1,4 @@
+//this.GUI/src/stories/Atoms/TextArea/TextArea.jsx
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';

package/src/stories/Atoms/TextArea/TextArea.stories.jsx

@@ -1,3 +1,4 @@
+//this.GUI/src/stories/Atoms/TextArea/TextArea.stories.jsx
 import React from 'react';
 import { TextArea } from './TextArea';
 

package/src/stories/Atoms/TextInput/TextInput.css

@@ -1,3 +1,4 @@
+/*this.GUI/src/stories/Atoms/TextInput/TextInput.css */
 .text-input {
   display: flex;
   align-items: center;

package/src/stories/Atoms/TextInput/TextInput.jsx

@@ -1,3 +1,4 @@
+//this.GUI/src/stories/Atoms/TextInput/TextInput.jsx
 import React from 'react';
 import PropTypes from 'prop-types';
 import './TextInput.css';

package/src/stories/Atoms/TextInput/TextInput.stories.jsx

@@ -1,3 +1,4 @@
+//this.GUI/src/stories/Atoms/TextInput/TextInput.stories.jsx
 import React, { useState } from 'react';
 import { TextInput } from './TextInput';
 

package/src/stories/Atoms/Toggle/Toggle.css

@@ -1,3 +1,4 @@
+/*this.GUI/src/stories/Atoms/Toggle/Toggle.css*/
 /* Base Toggle Styles */
 .toggle {
   display: inline-flex;

package/src/stories/Atoms/Toggle/Toggle.jsx

@@ -1,3 +1,4 @@
+//this.GUI/src/stories/Atoms/Toggle/Toggle.jsx
 import React from 'react';
 import PropTypes from 'prop-types';
 import './Toggle.css';

package/src/stories/Atoms/Toggle/Toggle.stories.jsx

@@ -1,3 +1,4 @@
+//this.GUI/src/stories/Atoms/Toggle/Toggle.stories.jsx
 import React, { useState } from 'react';
 import { Toggle } from './Toggle';
 

package/src/stories/Atoms/Tooltip/Tooltip.css

@@ -1,3 +1,4 @@
+/*this.GUI/src/stories/Atoms/Tooltip/Tooltip.css*/
 /* Base Tooltip Styles */
 .tooltip-wrapper {
   position: relative;

package/src/stories/Atoms/Tooltip/Tooltip.jsx

@@ -1,3 +1,4 @@
+//this.GUI/src/stories/Atoms/Tooltip/Tooltip.jsx
 import React from 'react';
 import PropTypes from 'prop-types';
 import './Tooltip.css';

package/src/stories/Atoms/Tooltip/Tooltip.stories.jsx

@@ -1,3 +1,4 @@
+//this.GUI/src/stories/Atoms/Tooltip/Tooltip.stories.jsx
 import React from 'react';
 import { Tooltip } from './Tooltip';
 

package/src/stories/Atoms/Video/Video.css

@@ -1,3 +1,4 @@
+/*this.GUI/src/stories/Atoms/Video/Video.css */
 .video-container {
   position: relative;
   overflow: hidden;

package/src/stories/Atoms/Video/Video.jsx

@@ -1,3 +1,4 @@
+//this.GUI/src/stories/Atoms/Video/Video.jsx
 import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import './Video.css';

package/src/stories/Atoms/Video/Video.stories.jsx

@@ -1,3 +1,4 @@
+//this.GUI/src/stories/Atoms/Video/Video.stories.jsx
 import React from 'react';
 import { Video } from './Video';
 

package/src/stories/Atoms/index.js

@@ -30,6 +30,8 @@ import { ProgressBar } from './ProgressBar/ProgressBar';
 import { Alert } from './Alert/Alert';
 import { Snackbar } from './Snackbar/Snackbar';
 import { Logo } from './Logo/Logo'; 
+import { Section } from './Section/Section';
+import { Grid } from './Grid/Grid';
 
 // Flattened export of all components
 const Atoms = {
@@ -63,6 +65,8 @@ const Atoms = {
   ProgressBar,
   Alert,
   Snackbar,
+  Section,
+  Grid
 };
 
 export default Atoms;

package/src/stories/Atoms/meta_Atoms.js

@@ -7,7 +7,10 @@ const Atomic = {
       { name: "Caption", paths: { css: "./Caption/Caption.css", globalCss: "styles/global.css", jsx: "./Caption/Caption.jsx", stories: "./Caption/Caption.stories.jsx" }},
     ],
     "Layout": [
-      { name: " Container", paths: { css: "./Container/Container.css", globalCss: "styles/global.css", jsx: "./Container/Container.jsx", stories: "./Container/Container.stories.jsx" }},
+      { name: "Container", paths: { css: "./Container/Container.css", globalCss: "styles/global.css", jsx: "./Container/Container.jsx", stories: "./Container/Container.stories.jsx" }},
+      { name: "Grid", paths: { css: "./Grid/Grid.css", globalCss: "styles/Grid.css", jsx: "./Grid/Grid.jsx", stories: "./Grid/Grid.stories.jsx" }},
+      { name: "Section", paths: { css: "./Section/Section.css", globalCss: "styles/Section.css", jsx: "./Section/Section.jsx", stories: "./Section/Grid.stories.jsx" }},
+
     ],
     "Interactive": [
       { name: "Button", paths: { css: "/Button/Button.css", globalCss: "styles/global.css", jsx: "./Button/Button.jsx", stories: "./Button/Button.stories.jsx" }},