@orangesk/orange-design-system 2.0.0-alpha.0 → 2.0.0-alpha.1

package/src/components/Container/tests/Container.unit.test.js

@@ -0,0 +1,320 @@
+/**
+ * Unit tests for the Container component
+ *
+ * Covered use cases:
+ * 1. Rendering:
+ *    - Renders without crashing
+ *    - Renders as a div element
+ *    - Renders children (single, multiple, null, undefined, empty)
+ * 2. CSS Classes:
+ *    - Applies default and custom className(s)
+ *    - Handles multiple, empty, whitespace, special, long, and numeric class names
+ * 3. Props Forwarding:
+ *    - Forwards standard HTML attributes (id, data-*, title, style, etc.)
+ *    - Forwards event handlers (onClick, onMouseEnter, etc.)
+ *    - Forwards ref to the underlying div
+ *    - Forwards all standard HTML div props (tabIndex, role, aria-*)
+ * 4. Component Behavior:
+ *    - Maintains displayName
+ *    - Works with React.memo
+ *    - Handles complex and conditional children structures
+ * 5. Edge Cases:
+ *    - Handles very long className
+ *    - Handles className with numbers
+ *    - Handles array of children
+ *    - Handles React elements as children
+ */
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import Container from '../';
+
+describe('Container Component', () => {
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      const { container } = render(<Container />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('should render as a div element', () => {
+      const { container } = render(<Container />);
+      expect(container.firstChild.tagName).toBe('DIV');
+    });
+
+    it('should have the correct default class', () => {
+      const { container } = render(<Container />);
+      expect(container.firstChild).toHaveClass('container');
+    });
+
+    it('should render children correctly', () => {
+      const testContent = 'Test content';
+      render(<Container>{testContent}</Container>);
+      expect(screen.getByText(testContent)).toBeInTheDocument();
+    });
+
+    it('should render multiple children', () => {
+      render(
+        <Container>
+          <div>First child</div>
+          <p>Second child</p>
+          <span>Third child</span>
+        </Container>
+      );
+      
+      expect(screen.getByText('First child')).toBeInTheDocument();
+      expect(screen.getByText('Second child')).toBeInTheDocument();
+      expect(screen.getByText('Third child')).toBeInTheDocument();
+    });
+
+    it('should render empty children gracefully', () => {
+      const { container } = render(<Container>{}</Container>);
+      expect(container.firstChild).toBeInTheDocument();
+      expect(container.firstChild).toHaveClass('container');
+    });
+
+    it('should render null children gracefully', () => {
+      const { container } = render(<Container>{null}</Container>);
+      expect(container.firstChild).toBeInTheDocument();
+      expect(container.firstChild).toHaveClass('container');
+    });
+
+    it('should render undefined children gracefully', () => {
+      const { container } = render(<Container>{undefined}</Container>);
+      expect(container.firstChild).toBeInTheDocument();
+      expect(container.firstChild).toHaveClass('container');
+    });
+  });
+
+  describe('CSS Classes', () => {
+    it('should apply custom className in addition to default class', () => {
+      const { container } = render(<Container className="custom-class" />);
+      const element = container.firstChild;
+      
+      expect(element).toHaveClass('container');
+      expect(element).toHaveClass('custom-class');
+    });
+
+    it('should handle multiple custom classes', () => {
+      const { container } = render(
+        <Container className="class1 class2 class3" />
+      );
+      const element = container.firstChild;
+      
+      expect(element).toHaveClass('container');
+      expect(element).toHaveClass('class1');
+      expect(element).toHaveClass('class2');
+      expect(element).toHaveClass('class3');
+    });
+
+    it('should handle empty className', () => {
+      const { container } = render(<Container className="" />);
+      const element = container.firstChild;
+      
+      expect(element).toHaveClass('container');
+    });
+
+    it('should handle whitespace-only className', () => {
+      const { container } = render(<Container className="   " />);
+      const element = container.firstChild;
+      
+      expect(element).toHaveClass('container');
+    });
+
+    it('should handle className with special characters', () => {
+      const { container } = render(
+        <Container className="class-with-dash class_with_underscore" />
+      );
+      const element = container.firstChild;
+      
+      expect(element).toHaveClass('container');
+      expect(element).toHaveClass('class-with-dash');
+      expect(element).toHaveClass('class_with_underscore');
+    });
+  });
+
+  describe('Props Forwarding', () => {
+    it('should forward HTML attributes', () => {
+      const { container } = render(
+        <Container 
+          id="test-id"
+          data-testid="container"
+          title="Test container"
+        />
+      );
+      const element = container.firstChild;
+      
+      expect(element).toHaveAttribute('id', 'test-id');
+      expect(element).toHaveAttribute('data-testid', 'container');
+      expect(element).toHaveAttribute('title', 'Test container');
+    });
+
+    it('should forward style prop', () => {
+      const customStyle = { backgroundColor: 'red', color: 'white' };
+      const { container } = render(<Container style={customStyle} />);
+      const element = container.firstChild;
+      
+      expect(element).toHaveStyle('background-color: red');
+      expect(element).toHaveStyle('color: white');
+    });
+
+    it('should forward event handlers', async () => {
+      const user = userEvent.setup();
+      const handleClick = jest.fn();
+      const handleMouseEnter = jest.fn();
+      
+      render(
+        <Container 
+          onClick={handleClick}
+          onMouseEnter={handleMouseEnter}
+          data-testid="container"
+        />
+      );
+      
+      const container = screen.getByTestId('container');
+      
+      await user.click(container);
+      expect(handleClick).toHaveBeenCalledTimes(1);
+      
+      // Reset mock before testing mouseEnter
+      handleMouseEnter.mockClear();
+      fireEvent.mouseEnter(container);
+      expect(handleMouseEnter).toHaveBeenCalledTimes(1);
+    });
+
+    it('should forward ref correctly', () => {
+      const ref = React.createRef();
+      render(<Container ref={ref} />);
+      
+      expect(ref.current).toBeInstanceOf(HTMLDivElement);
+      expect(ref.current).toHaveClass('container');
+    });
+
+    it('should forward all standard HTML div props', () => {
+      const { container } = render(
+        <Container 
+          id="test"
+          className="custom"
+          style={{ color: 'red' }}
+          onClick={() => {}}
+          onFocus={() => {}}
+          onBlur={() => {}}
+          tabIndex={0}
+          role="main"
+          aria-label="Main content"
+        />
+      );
+      const element = container.firstChild;
+      
+      expect(element).toHaveAttribute('id', 'test');
+      expect(element).toHaveAttribute('tabindex', '0');
+      expect(element).toHaveAttribute('role', 'main');
+      expect(element).toHaveAttribute('aria-label', 'Main content');
+    });
+  });
+
+  describe('Component Behavior', () => {
+    it('should maintain displayName', () => {
+      expect(Container.displayName).toBe('Container');
+    });
+
+    it('should work with React.memo if wrapped', () => {
+      const MemoizedContainer = React.memo(Container);
+      const { container } = render(<MemoizedContainer />);
+      
+      expect(container.firstChild).toBeInTheDocument();
+      expect(container.firstChild).toHaveClass('container');
+    });
+
+    it('should handle complex nested structures', () => {
+      render(
+        <Container>
+          <header>
+            <h1>Title</h1>
+            <nav>
+              <ul>
+                <li><a href="#home">Home</a></li>
+                <li><a href="#about">About</a></li>
+              </ul>
+            </nav>
+          </header>
+          <main>
+            <section>
+              <h2>Section</h2>
+              <p>Content</p>
+            </section>
+          </main>
+        </Container>
+      );
+      
+      expect(screen.getByText('Title')).toBeInTheDocument();
+      expect(screen.getByText('Home')).toBeInTheDocument();
+      expect(screen.getByText('About')).toBeInTheDocument();
+      expect(screen.getByText('Section')).toBeInTheDocument();
+      expect(screen.getByText('Content')).toBeInTheDocument();
+    });
+
+    it('should handle conditional rendering of children', () => {
+      const shouldRender = true;
+      const { rerender } = render(
+        <Container>
+          {shouldRender && <div>Conditional content</div>}
+        </Container>
+      );
+      
+      expect(screen.getByText('Conditional content')).toBeInTheDocument();
+      
+      rerender(
+        <Container>
+          {false && <div>Conditional content</div>}
+        </Container>
+      );
+      
+      expect(screen.queryByText('Conditional content')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle very long className', () => {
+      const longClassName = 'a'.repeat(1000);
+      const { container } = render(<Container className={longClassName} />);
+      const element = container.firstChild;
+      
+      expect(element).toHaveClass('container');
+      expect(element).toHaveClass(longClassName);
+    });
+
+    it('should handle className with numbers', () => {
+      const { container } = render(<Container className="class123 456class" />);
+      const element = container.firstChild;
+      
+      expect(element).toHaveClass('container');
+      expect(element).toHaveClass('class123');
+      expect(element).toHaveClass('456class');
+    });
+
+    it('should handle array as children', () => {
+      const childrenArray = [
+        <div key="1">Array child 1</div>,
+        <div key="2">Array child 2</div>
+      ];
+      
+      render(<Container>{childrenArray}</Container>);
+      
+      expect(screen.getByText('Array child 1')).toBeInTheDocument();
+      expect(screen.getByText('Array child 2')).toBeInTheDocument();
+    });
+
+    it('should handle React elements as children', () => {
+      const ChildComponent = () => <div>React component child</div>;
+      
+      render(
+        <Container>
+          <ChildComponent />
+        </Container>
+      );
+      
+      expect(screen.getByText('React component child')).toBeInTheDocument();
+    });
+  });
+});

package/src/components/Grid/Grid.mdx

@@ -0,0 +1,319 @@
+import { ComponentDocs, Note, md } from '@lighting-beetle/lighter-styleguide';
+import { Preview } from '../../styleguide/';
+import { Grid, GridCol } from './index';
+import Table from '../Table';
+import Section from '../Section';
+import Image from '../Image';
+import { breakpointsTableData } from '../../docs/breakpoints.mdx';
+import {
+  ContainerHorizontal,
+  ContainerVertical,
+  ColumnVertical,
+} from '../../docs/utils.flexalignment.mdx';
+import spaces from '../../styles/export/space.scss';
+
+# Grid
+
+The main function of the grid is to distribute items to rows and columns.
+
+Our grid has a maximum of 12 columns. Each column can have a [custom size](#columns)
+defined by [breakpoints](#breakpoints).
+
+## Breakpoints
+
+Grid uses the mobile-first definition of [breakpoints](/fundamentals/breakpoints), which means that smallest
+breakpoint defines default size.
+
+## Columns
+
+You can have a maximum of 12 columns in one row. A default column takes all the available
+space.
+
+<Preview className="preview-grid">
+  <Grid>
+    <GridCol>
+      <code>(default) 12</code>
+    </GridCol>
+    <GridCol size={6}>
+      <code>6</code>
+    </GridCol>
+  </Grid>
+  <hr />
+  <Grid>
+    <GridCol size="auto">
+      <code>auto</code>
+    </GridCol>
+    <GridCol size={4}>
+      <code>4</code>
+    </GridCol>
+    <GridCol size={6}>
+      <code>6</code>
+    </GridCol>
+  </Grid>
+  <hr />
+  <Grid>
+    <GridCol size="fill">
+      <code>fill</code>
+    </GridCol>
+    <GridCol size={4}>
+      <code>4</code>
+    </GridCol>
+    <GridCol size={6}>
+      <code>6</code>
+    </GridCol>
+  </Grid>
+  <hr />
+  <Grid>
+    <GridCol size="shrink">
+      <code>shrink</code>
+    </GridCol>
+    <GridCol size={6}>
+      <code>6</code>
+    </GridCol>
+  </Grid>
+</Preview>
+
+### Resizing
+
+There are two ways of resizing a column.
+
+1. `.grid__col--[size]` where `size` is a number 1-12 or one of `[shrink/fill/auto]`
+2. `.grid__col--[breakpoint]-[size]` where `breakpoint` is used as a **minimum display width** to change the column size
+
+<Note title="XS breakpoint size">
+  <p className="mb-none">
+    There is <strong>no need to specify the xs breakpoint size</strong> because
+    it's a default by definition of mobile-first philosophy.
+  </p>
+</Note>
+
+### What is shrink/fill/auto?
+
+- `shrink` column takes **the least amount of space** available
+- `fill` column takes **all the space** available and **does not shrink** to accomodate other columns
+- `auto` takes **all available space**, also tries to **shrink** to fit into one row. This is the **same as** `.grid__col`.
+
+<Preview className="preview-grid">
+  <Grid>
+    <GridCol>
+      <code>(default) 12</code>
+    </GridCol>
+    <GridCol size={4}>
+      <code>4</code>
+    </GridCol>
+    <GridCol size="shrink">
+      <code>shrink</code>
+    </GridCol>
+    <GridCol size="fill">
+      <code>fill</code>
+    </GridCol>
+    <GridCol size="auto">
+      <code>auto</code>
+      Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis
+      natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+    </GridCol>
+  </Grid>
+</Preview>
+
+### Available combinations
+
+You can use combinations of different size types for one column at once.
+Available types are `[1-12/shrink/fill/auto]` for every breakpoint.
+
+<Preview className="preview-grid">
+  <Grid>
+    <GridCol size={{ sm: 9, md: 6, lg: 'fill' }}>
+      <code>(default) 12, sm-9, md-6, lg-fill</code>
+    </GridCol>
+    <GridCol size={{ sm: 3, md: 6, lg: 'fill' }}>
+      <code>(default) 12, sm-3, md-6, lg-fill</code>
+    </GridCol>
+  </Grid>
+</Preview>
+
+## How to create a grid
+
+### Using React Components (Recommended)
+
+```tsx
+import { Grid, GridCol } from './components/Grid';
+
+// Basic grid
+<Grid>
+  <GridCol>
+    <code>(default) 12</code>
+  </GridCol>
+  <GridCol size={6}>
+    <code>6</code>
+  </GridCol>
+</Grid>
+
+// Responsive grid
+<Grid>
+  <GridCol size={{ sm: 9, md: 6, lg: 'fill' }}>
+    <code>Responsive column</code>
+  </GridCol>
+  <GridCol size={{ sm: 3, md: 6, lg: 'fill' }}>
+    <code>Another responsive column</code>
+  </GridCol>
+</Grid>
+```
+
+### Using HTML and CSS Classes
+
+1. Start by creating a wrapper with a class of `.grid`
+2. Add child elements with a class beginning with `.grid__col`
+3. If you need, specify size of each with `.grid__col--[size]` or `.grid__col--[breakpoint]-[size]`
+
+```html
+<!-- grid base -->
+<div class="grid">
+  <!-- default grid column (.grid__col--xs-12 by default) -->
+  <div class="grid__col">content</div>
+  <!-- grid column with specific sizes -->
+  <div class="grid__col grid__col--auto grid__col--md-6 grid__col--lg-4">
+    content
+  </div>
+</div>
+```
+
+## Justify content height
+
+Grid with justified content height uses flexbox with an attempt to equalize height of column children
+
+<Preview>
+  <Grid justifyHeight>
+    <GridCol size={6} className="mb-small">
+      <div className="bg-gray">
+        <p>Children of these columns are the same height</p>
+      </div>
+    </GridCol>
+    <GridCol size={6} className="mb-small">
+      <div className="bg-gray">
+        <p>The most high column dictates the height of the row</p>
+        <Image src="https://placehold.co/150x150" alt="" />
+      </div>
+    </GridCol>
+    <GridCol className="mb-small">
+      <div className="bg-gray">
+        <p>Subsequent rows remain unaffected</p>
+      </div>
+    </GridCol>
+  </Grid>
+</Preview>
+
+## Container alignment
+
+### Horizontal
+
+<ContainerHorizontal />
+
+### Vertical
+
+<ContainerVertical />
+
+## Children alignment
+
+### Vertical
+
+<ColumnVertical />
+
+## Column gap size
+
+Add larger space between grid columns or remove them completely
+
+<Preview>
+  {['default', 'none'].map((size, index) => (
+    <>
+      <h3>Column gap size {JSON.stringify(size)}</h3>
+      <Grid
+        key={index.toString()}
+        columnGapSize={size === 'default' ? null : size}
+        className="mb-large"
+      >
+        {[1, 2, 3].map(key => (
+          <GridCol key={key.toString()} size={{ md: 4 }}>
+            <code> </code>
+          </GridCol>
+        ))}
+      </Grid>
+    </>
+  ))}
+</Preview>
+
+## Row gap size
+
+Row gap helps to maintain space between grid rows and fixes
+[unwanted spacing problems](/components/section#2-stacking-elements) on the bottom of grid's last row elements by removing their content margins.
+
+There are two ways of adding a row gap.
+
+1. `.grid-row-gap--[size]` where `size` is one of `[medium/xlarge]`
+2. `.grid-row-gap--[breakpoint]-[size]` where `breakpoint` is used as a
+   **minimum display width** to change the gap size
+
+<Preview>
+  {['medium', 'large', { xs: 'large', md: 'xlarge' }].map(
+    (size, index, array) => (
+      <Section key={index.toString()} className="pb-none">
+        <h3 className="mb-2">Row gap size {JSON.stringify(size)}</h3>
+        <Grid key={index.toString()} rowGapSize={size}>
+          {[1, 2, 3, 4, 5, 6].map(key => (
+            <GridCol key={key.toString()} size={{ md: 6 }}>
+              <code>6</code>
+            </GridCol>
+          ))}
+        </Grid>
+      </Section>
+    )
+  )}
+</Preview>
+
+## Advanced Examples
+
+### Complex Layout with Alignment
+
+<Preview>
+  <Grid hAlign="center" vAlign="stretch">
+    <GridCol size={3} align="top">
+      <code>top aligned</code>
+    </GridCol>
+    <GridCol size="auto" align="middle">
+      <code>auto middle</code>
+    </GridCol>
+    <GridCol size="fill" align="bottom">
+      <code>fill bottom</code>
+    </GridCol>
+    <GridCol size={2} align="stretch">
+      <code>stretch</code>
+    </GridCol>
+  </Grid>
+</Preview>
+
+### Semantic HTML Tags
+
+<Preview>
+  <Grid tag="section" justifyHeight>
+    <GridCol tag="article" size={8}>
+      <code>main content</code>
+    </GridCol>
+    <GridCol tag="aside" size={4}>
+      <code>sidebar</code>
+    </GridCol>
+  </Grid>
+</Preview>
+
+### All Column Sizes (1-12)
+
+<Preview>
+  <Grid>
+    {Array.from({ length: 12 }, (_, i) => (
+      <GridCol key={i} size={i + 1}>
+        <code>{i + 1}</code>
+      </GridCol>
+    ))}
+  </Grid>
+</Preview>
+
+<ComponentDocs title="<Grid />" component={Grid} />
+<ComponentDocs title="<GridCol />" component={GridCol} />

package/src/components/Grid/Grid.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import cx from "classnames";
+import { genResponsiveClasses } from "../../utils";
+
+export type GridVAlign = "stretch" | "start" | "end" | "center";
+export type GridHAlign = "end" | "center" | "space-around" | "space-between";
+export type GridRowGapSize =
+  | "medium"
+  | "large"
+  | "xlarge"
+  | Record<string, "medium" | "large" | "xlarge">;
+export type GridColumnGapSize = "none";
+
+export interface GridProps extends React.HTMLAttributes<HTMLElement> {
+  vAlign?: GridVAlign;
+  hAlign?: GridHAlign;
+  tag?: React.ElementType;
+  justifyHeight?: boolean;
+  rowGapSize?: GridRowGapSize;
+  columnGapSize?: GridColumnGapSize;
+}
+
+const CLASS_ROOT = "grid";
+
+export const Grid = ({
+  className,
+  hAlign,
+  vAlign,
+  tag = "div",
+  justifyHeight,
+  rowGapSize,
+  columnGapSize,
+  ...other
+}: GridProps) => {
+  const classes = cx(
+    CLASS_ROOT,
+    {
+      [`align-items-${vAlign}`]: vAlign,
+      [`justify-content-${hAlign}`]: hAlign,
+      [`${CLASS_ROOT}--justify-height`]: justifyHeight,
+      [`${CLASS_ROOT}--column-gap-${columnGapSize}`]: columnGapSize,
+    },
+    ...genResponsiveClasses(`${CLASS_ROOT}-row-gap`, rowGapSize),
+    className,
+  );
+  const TagName = tag;
+
+  return <TagName className={classes} {...other} />;
+};
+
+Grid.displayName = "Grid";