chore: maintenance

libs/container/src/index.ts

@@ -1 +1 @@
-export * from './lib/container';
+export * from './lib/container.component';

libs/container/src/lib/container.component.stories.ts

@@ -0,0 +1,45 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+
+import { html } from 'lit';
+
+import './container.component';
+import { Container } from './container.component';
+
+const meta: Meta<Container> = {
+  title: 'Design System/Atoms/Container',
+  component: 'z-container',
+  args: {
+    conditionalRadius: true,
+    radius: '12px',
+  },
+  render: (args) => html`
+    <style>
+      html {
+        background-color: #e2e2e2;
+        --container--background-color: #fff;
+        --container--max-width: 80rem;
+      }
+    </style>
+
+    <z-container radius="${args['radius']}" ?conditional-radius="${args['conditionalRadius']}">
+      <div style="display: flex; column-gap: 3.5rem; padding-left: 3.5rem;">
+        <p style="margin: 0; padding-block: 3.5rem">
+          Incididunt voluptate non ea reprehenderit quis nostrud proident pariatur enim mollit esse nulla. Ex mollit mollit occaecat esse
+          consequat. Tempor dolor irure qui dolor proident esse voluptate excepteur dolor. Pariatur aliqua exercitation Lorem Lorem irure
+          occaecat amet est in nulla eu.
+        </p>
+
+        <img src="https://placeholder.co/350" alt="" />
+      </div>
+    </z-container>
+  `,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<unknown>;
+
+export const Primary: Story = {};

libs/container/src/lib/container.component.ts

@@ -0,0 +1,99 @@
+import { LitElement, PropertyValues, css, html, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * A container element that centers its content and has a max-width.
+ *
+ * @slot - The default slot.
+ * @slot img - The slot for the image.
+ *
+ * @cssproperty --container--max-width - The max-width of the container.
+ * @cssproperty --container--background-color - The background color of the container.
+ */
+@customElement('z-container')
+export class Container extends LitElement {
+  /// Private variables ///
+
+  /// Protected variables ///
+
+  /// Public variables ///
+  @property() public radius: string | undefined;
+  @property({ type: Boolean, attribute: 'conditional-radius' }) public conditionalRadius: boolean = false;
+
+  /// constructor & lifecycle ///
+  protected override willUpdate(_changedProperties: PropertyValues): void {
+    super.willUpdate(_changedProperties);
+
+    this.updateBorderRadius();
+  }
+
+  /// Public methods ///
+
+  /// Protected methods ///
+  protected override render(): unknown {
+    return html`
+      <section>
+        <slot></slot>
+        <slot name="img"></slot>
+      </section>
+    `;
+  }
+
+  /// Private methods ///
+  private updateBorderRadius(): void {
+    const hasRadius = !!this.radius;
+    const isConditional = this.conditionalRadius;
+
+    switch (true) {
+      case !hasRadius:
+        this.removeBorderRadius();
+        break;
+
+      case hasRadius && isConditional:
+        this.setConditionRadius();
+        break;
+      case hasRadius && !isConditional:
+        this.setRadius();
+        break;
+    }
+  }
+
+  private removeBorderRadius(): void {
+    this.style.removeProperty(Container.CSS_PROPERTY_NAMES.RADIUS);
+  }
+
+  private setConditionRadius(): void {
+    if (this.radius) {
+      this.style.setProperty(Container.CSS_PROPERTY_NAMES.RADIUS, `max(0px, min(${this.radius}, calc((100vw - 4px - 100%) * 9999)))`);
+    }
+  }
+
+  private setRadius(): void {
+    if (this.radius) {
+      this.style.setProperty(Container.CSS_PROPERTY_NAMES.RADIUS, this.radius);
+    }
+  }
+
+  /// Statics ///
+  static CSS_PROPERTY_NAMES = {
+    RADIUS: '--container--radius',
+    BACKGROUND_COLOR: '--container--background-color',
+    MAX_WIDTH: '--container--max-width',
+  };
+
+  static override get styles() {
+    return [
+      css`
+        :host {
+          width: 100%;
+          max-width: var(${unsafeCSS(Container.CSS_PROPERTY_NAMES.MAX_WIDTH)}, 80rem);
+          margin-inline: auto;
+          display: flex;
+          background-color: var(${unsafeCSS(Container.CSS_PROPERTY_NAMES.BACKGROUND_COLOR)});
+          border-radius: var(${unsafeCSS(Container.CSS_PROPERTY_NAMES.RADIUS)}, 0px);
+          overflow: hidden;
+        }
+      `,
+    ];
+  }
+}

libs/container/src/lib/container.ts

@@ -1,3 +0,0 @@
-export function container(): string {
-  return 'container';
-}