Feat: Introduce isFluid prop to Container

packages/web-react/src/components/Container/Container.tsx

@@ -2,18 +2,22 @@
 
 import classNames from 'classnames';
 import React from 'react';
-import { useStyleProps } from '../../hooks/styleProps';
-import { useClassNamePrefix } from '../../hooks/useClassNamePrefix';
-import { ChildrenProps, StyleProps, TransferProps } from '../../types';
+import { useStyleProps } from '../../hooks';
+import { SpiritContainerProps } from '../../types';
+import { useContainerStyleProps } from './useContainerStyleProps';
 
-export interface ContainerProps extends ChildrenProps, StyleProps, TransferProps {}
+const defaultProps: SpiritContainerProps = {
+  isFluid: false,
+};
 
-const Container = ({ children, ...restProps }: ContainerProps): JSX.Element => {
-  const containerClass = useClassNamePrefix('Container');
-  const { styleProps, props: otherProps } = useStyleProps(restProps);
+const Container = (props: SpiritContainerProps): JSX.Element => {
+  const propsWithDefaults = { ...defaultProps, ...props };
+  const { children, ...restProps } = propsWithDefaults;
+  const { classProps, props: modifiedProps } = useContainerStyleProps(restProps);
+  const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
 
   return (
-    <div {...otherProps} {...styleProps} className={classNames(containerClass, styleProps.className)}>
+    <div {...otherProps} {...styleProps} className={classNames(classProps, styleProps.className)}>
       {children}
     </div>
   );

packages/web-react/src/components/Container/README.md

@@ -6,14 +6,27 @@ Container centers your content horizontally and sets its max-width with horizont
 <Container>Content</Container>
 ```
 
+## Fluid Container
+
+If you need a full-width container, you can use the `isFluid` prop.
+
+```jsx
+<Container isFluid>Content</Container>
+```
+
 ## API
 
-The components accept [additional attributes][readme-additional-attributes].
+| Name      | Type   | Default | Required | Description                 |
+| --------- | ------ | ------- | -------- | --------------------------- |
+| `isFluid` | `bool` | `false` | ✕        | If true, Container is fluid |
+
+On top of the API options, the components accept [additional attributes][readme-additional-attributes].
 If you need more control over the styling of a component, you can use [style props][readme-style-props]
 and [escape hatches][readme-escape-hatches].
 
-For detailed information see [Container](https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Container/README.md) component
+For detailed information see [Container][web-container] component
 
 [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes
 [readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches
 [readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#style-props
+[web-container]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Container/README.md

packages/web-react/src/components/Container/__tests__/Container.test.tsx

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import '@testing-library/jest-dom';
 import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
@@ -7,16 +7,34 @@ import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
 import Container from '../Container';
 
 describe('Container', () => {
+  const text = 'Hello world';
+  const testId = 'flex-test-id';
+
   classNamePrefixProviderTest(Container, 'Container');
 
   stylePropsTest(Container);
 
   restPropsTest(Container, 'div');
 
-  it('should render text children', () => {
-    const dom = render(<Container>Hello World</Container>);
+  it('should render', () => {
+    render(<Container data-testid={testId}>{text}</Container>);
+
+    expect(screen.getByText(text)).toBeInTheDocument();
+  });
+
+  it('should render with correct class', () => {
+    render(<Container data-testid={testId}>{text}</Container>);
+
+    expect(screen.getByTestId(testId)).toHaveClass('Container');
+  });
+
+  it('should render as fluid', () => {
+    render(
+      <Container isFluid data-testid={testId}>
+        {text}
+      </Container>,
+    );
 
-    const element = dom.container.querySelector('div') as HTMLElement;
-    expect(element.textContent).toBe('Hello World');
+    expect(screen.getByTestId(testId)).toHaveClass('Container Container--fluid');
   });
 });

packages/web-react/src/components/Container/__tests__/useContainerStyleProps.test.ts

@@ -0,0 +1,19 @@
+import { renderHook } from '@testing-library/react';
+import { SpiritContainerProps } from '../../../types';
+import { useContainerStyleProps } from '../useContainerStyleProps';
+
+describe('useContainerStyleProps', () => {
+  it('should return defaults', () => {
+    const props = {};
+    const { result } = renderHook(() => useContainerStyleProps(props));
+
+    expect(result.current.classProps).toBe('Container');
+  });
+
+  it('should return fluid', () => {
+    const props = { isFluid: true } as SpiritContainerProps;
+    const { result } = renderHook(() => useContainerStyleProps(props));
+
+    expect(result.current.classProps).toBe('Container Container--fluid');
+  });
+});

packages/web-react/src/components/Container/demo/ContainerFluid.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import DocsBox from '../../../../docs/DocsBox';
+import Container from '../Container';
+
+const ContainerFluid = () => (
+  <Container isFluid>
+    <DocsBox>Container</DocsBox>
+  </Container>
+);
+
+export default ContainerFluid;

packages/web-react/src/components/Container/demo/index.tsx

@@ -2,11 +2,15 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import DocsSection from '../../../../docs/DocsSections';
 import ContainerDefault from './ContainerDefault';
+import ContainerFluid from './ContainerFluid';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <DocsSection title="Default" stackAlignment="stretch" container="heading-only">
       <ContainerDefault />
     </DocsSection>
+    <DocsSection title="Fluid" stackAlignment="stretch" container="heading-only">
+      <ContainerFluid />
+    </DocsSection>
   </React.StrictMode>,
 );

packages/web-react/src/components/Container/index.ts

@@ -1,3 +1,4 @@
 'use client';
 
+export * from './useContainerStyleProps';
 export { default as Container } from './Container';

packages/web-react/src/components/Container/stories/Container.stories.tsx

@@ -17,9 +17,16 @@ const meta: Meta<typeof Container> = {
     children: {
       control: 'object',
     },
+    isFluid: {
+      control: 'boolean',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
   },
   args: {
     children: <DocsBox>Container</DocsBox>,
+    isFluid: false,
   },
 };
 

packages/web-react/src/components/Container/useContainerStyleProps.ts

@@ -0,0 +1,25 @@
+import classNames from 'classnames';
+import { useClassNamePrefix } from '../../hooks';
+import { SpiritContainerProps, ContainerProps } from '../../types';
+
+export interface ContainerStyles {
+  /** className props */
+  classProps: string;
+  /** props to be passed to the element */
+  props: ContainerProps;
+}
+
+export function useContainerStyleProps(props: SpiritContainerProps): ContainerStyles {
+  const { isFluid, ...modifiedProps } = props;
+
+  const containerClass = useClassNamePrefix('Container');
+  const containerFluidClass = `${containerClass}--fluid`;
+  const classProps = classNames(containerClass, {
+    [containerFluidClass]: isFluid,
+  });
+
+  return {
+    classProps,
+    props: modifiedProps,
+  };
+}

packages/web-react/src/types/container.ts

@@ -0,0 +1,7 @@
+import { ChildrenProps, StyleProps, TransferProps } from './shared';
+
+export interface ContainerProps extends ChildrenProps, StyleProps, TransferProps {}
+
+export interface SpiritContainerProps extends ContainerProps {
+  isFluid?: boolean;
+}

packages/web-react/src/types/index.ts

@@ -5,6 +5,7 @@ export * from './breadcrumbs';
 export * from './button';
 export * from './checkbox';
 export * from './collapse';
+export * from './container';
 export * from './divider';
 export * from './dropdown';
 export * from './fieldGroup';

packages/web-twig/src/Resources/components/Container/Container.stories.twig

@@ -6,9 +6,11 @@
 {% block content %}
 
     <DocsSection title="Default" stackAlignment="stretch" container="heading-only">
-
         {% include '@components/Container/stories/ContainerDefault.twig' %}
+    </DocsSection>
 
+    <DocsSection title="Fluid" stackAlignment="stretch" container="heading-only">
+        {% include '@components/Container/stories/ContainerFluid.twig' %}
     </DocsSection>
 
 {% endblock %}

packages/web-twig/src/Resources/components/Container/Container.twig

@@ -1,12 +1,14 @@
 {# API #}
 {%- set props = props | default([]) -%}
+{%- set _isFluid = props.isFluid | default(false) -%}
 
 {# Class names #}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Container' -%}
+{%- set _rootFluidClassName = _isFluid ? _spiritClassPrefix ~ 'Container--fluid' : null -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
-{%- set _classNames = [ _rootClassName, _styleProps.className ] -%}
+{%- set _classNames = [ _rootClassName, _rootFluidClassName, _styleProps.className ] -%}
 
 <div {{ mainProps(props) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }}>
     {%- block content %}{% endblock -%}

packages/web-twig/src/Resources/components/Container/README.md

@@ -18,11 +18,21 @@ Without lexer:
 {% endembed %}
 ```
 
+## Fluid Container
+
+If you need a full-width container, you can use the `isFluid` prop.
+
+```twig
+<Container isFluid>Content</Container>
+```
+
 ## API
 
-There is no API for Container.
+| Name      | Type   | Default | Required | Description                 |
+| --------- | ------ | ------- | -------- | --------------------------- |
+| `isFluid` | `bool` | `false` | ✕        | If true, Container is fluid |
 
-The components accept [additional attributes][readme-additional-attributes].
+On top of the API options, the components accept [additional attributes][readme-additional-attributes].
 If you need more control over the styling of a component, you can use [style props][readme-style-props]
 and [escape hatches][readme-escape-hatches].
 

packages/web-twig/src/Resources/components/Container/__tests__/__fixtures__/containerDefault.twig

@@ -1 +1,4 @@
-<Container>Content</Container>
+<Container>Content</Container>
+
+<!-- Render with all props -->
+<Container isFluid>Content</Container>

packages/web-twig/src/Resources/components/Container/__tests__/__snapshots__/containerDefault.twig.snap.html

@@ -8,5 +8,10 @@
     <div class="Container">
       Content
     </div>
+    <!-- Render with all props -->
+
+    <div class="Container Container--fluid">
+      Content
+    </div>
   </body>
 </html>

packages/web-twig/src/Resources/components/Container/stories/ContainerFluid.twig

@@ -0,0 +1,3 @@
+<Container isFluid>
+    <DocsBox>Container</DocsBox>
+</Container>

packages/web/src/scss/components/Container/README.md

@@ -5,3 +5,9 @@ Basic usage:
 ```html
 <div class="Container">Content</div>
 ```
+
+Fluid container:
+
+```html
+<div class="Container Container--fluid">Content</div>
+```

packages/web/src/scss/components/Container/_Container.scss

@@ -3,9 +3,12 @@
 
 .Container {
     width: 100%;
-    max-width: theme.$container-max-width;
     padding-inline: var(--container-padding-inline);
     margin-inline: auto;
 
     @include tools.paddings(theme.$container-paddings, theme.$container-breakpoints);
 }
+
+.Container:not(.Container--fluid) {
+    max-width: theme.$container-max-width;
+}

packages/web/src/scss/components/Container/index.html

@@ -20,4 +20,24 @@ <h2 class="docs-Heading">Default</h2>
 
 </section>
 
+<section class="UNSTABLE_Section">
+
+  <div class="Container">
+
+    <h2 class="docs-Heading">Fluid</h2>
+
+  </div>
+
+  <div class="docs-Stack docs-Stack--stretch">
+
+    <div class="Container Container--fluid">
+      <div class="docs-Box">
+        Container
+      </div>
+    </div>
+
+  </div>
+
+</section>
+
 {{/web/layout/default }}