feat(core): add container component (#471)

packages/core/src/components.d.ts

@@ -77,6 +77,9 @@ export namespace Components {
         "sizeMd"?: string;
         "sizeSm"?: string;
     }
+    interface AtomContainer {
+        "hasPadding": boolean;
+    }
     interface AtomGrid {
         "fixed"?: boolean;
     }
@@ -339,6 +342,12 @@ declare global {
         prototype: HTMLAtomColElement;
         new (): HTMLAtomColElement;
     };
+    interface HTMLAtomContainerElement extends Components.AtomContainer, HTMLStencilElement {
+    }
+    var HTMLAtomContainerElement: {
+        prototype: HTMLAtomContainerElement;
+        new (): HTMLAtomContainerElement;
+    };
     interface HTMLAtomGridElement extends Components.AtomGrid, HTMLStencilElement {
     }
     var HTMLAtomGridElement: {
@@ -451,6 +460,7 @@ declare global {
         "atom-carousel-item": HTMLAtomCarouselItemElement;
         "atom-chip": HTMLAtomChipElement;
         "atom-col": HTMLAtomColElement;
+        "atom-container": HTMLAtomContainerElement;
         "atom-grid": HTMLAtomGridElement;
         "atom-icon": HTMLAtomIconElement;
         "atom-input": HTMLAtomInputElement;
@@ -531,6 +541,9 @@ declare namespace LocalJSX {
         "sizeMd"?: string;
         "sizeSm"?: string;
     }
+    interface AtomContainer {
+        "hasPadding"?: boolean;
+    }
     interface AtomGrid {
         "fixed"?: boolean;
     }
@@ -699,6 +712,7 @@ declare namespace LocalJSX {
         "atom-carousel-item": AtomCarouselItem;
         "atom-chip": AtomChip;
         "atom-col": AtomCol;
+        "atom-container": AtomContainer;
         "atom-grid": AtomGrid;
         "atom-icon": AtomIcon;
         "atom-input": AtomInput;
@@ -721,6 +735,7 @@ declare module "@stencil/core" {
             "atom-carousel-item": LocalJSX.AtomCarouselItem & JSXBase.HTMLAttributes<HTMLAtomCarouselItemElement>;
             "atom-chip": LocalJSX.AtomChip & JSXBase.HTMLAttributes<HTMLAtomChipElement>;
             "atom-col": LocalJSX.AtomCol & JSXBase.HTMLAttributes<HTMLAtomColElement>;
+            "atom-container": LocalJSX.AtomContainer & JSXBase.HTMLAttributes<HTMLAtomContainerElement>;
             "atom-grid": LocalJSX.AtomGrid & JSXBase.HTMLAttributes<HTMLAtomGridElement>;
             "atom-icon": LocalJSX.AtomIcon & JSXBase.HTMLAttributes<HTMLAtomIconElement>;
             "atom-input": LocalJSX.AtomInput & JSXBase.HTMLAttributes<HTMLAtomInputElement>;

packages/core/src/components/container/container.scss

@@ -0,0 +1,12 @@
+@import '~@atomium/scss-utils/index';
+
+:host {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: var(--screen-max-container);
+}
+
+:host(.has-padding) {
+  padding: var(--spacing-base);
+}

packages/core/src/components/container/container.spec.ts

@@ -0,0 +1,41 @@
+import { newSpecPage } from '@stencil/core/testing'
+
+import { AtomContainer } from './container'
+
+describe('atom-container', () => {
+  it('should render an atom-container element', async () => {
+    const page = await newSpecPage({
+      components: [AtomContainer],
+      html: `<atom-container>Content</atom-container>`,
+    })
+
+    await page.waitForChanges()
+
+    expect(page?.root).toEqualHtml(`
+      <atom-container class="has-padding">
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+        Content
+      </atom-container>
+    `)
+  })
+
+  it('should render an atom-container element without padding', async () => {
+    const page = await newSpecPage({
+      components: [AtomContainer],
+      html: `<atom-container has-padding="false">Content</atom-container>`,
+    })
+
+    await page.waitForChanges()
+
+    expect(page?.root).toEqualHtml(`
+      <atom-container has-padding="false">
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+        Content
+      </atom-container>
+    `)
+  })
+})

packages/core/src/components/container/container.tsx

@@ -0,0 +1,18 @@
+import { Component, Host, Prop, h } from '@stencil/core'
+
+@Component({
+  tag: 'atom-container',
+  styleUrl: 'container.scss',
+  shadow: true,
+})
+export class AtomContainer {
+  @Prop() hasPadding = true
+
+  render() {
+    return (
+      <Host class={{ 'has-padding': this.hasPadding }}>
+        <slot></slot>
+      </Host>
+    )
+  }
+}

packages/core/src/components/container/stories/container.args.ts

@@ -0,0 +1,25 @@
+export const ContainerStoryArgs = {
+  decorators: [],
+  parameters: {
+    actions: {
+      handles: [],
+    },
+    docs: {
+      description: {
+        component:
+          'Container is a component that wraps content in application using a max-width and padding to define the width of the content.',
+      },
+    },
+  },
+  argTypes: {
+    hasPadding: {
+      control: 'boolean',
+      defaultValue: { summary: true },
+      description: 'If false the container will not have padding',
+    },
+  },
+}
+
+export const ContainerComponentArgs = {
+  hasPadding: true,
+}

packages/core/src/components/container/stories/container.core.stories.tsx

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from '@storybook/web-components'
+import { html } from 'lit'
+
+import { ContainerComponentArgs, ContainerStoryArgs } from './container.args'
+
+import './container.css'
+
+export default {
+  title: 'Components/Container',
+  ...ContainerStoryArgs,
+} as Meta
+
+const createContainer = (args) => {
+  return html`
+    <atom-container class="wrapper" has-padding="${args.hasPadding}">
+      <section>
+        <h1 class="title">Container Title</h1>
+        <p class="text">
+          This is a sample content inside the container to demonstrate its
+          behavior and appearance with and without padding. Adjust the controls
+          to see how it changes.
+        </p>
+      </section>
+    </atom-container>
+  `
+}
+
+export const Default: StoryObj = {
+  render: (args) => createContainer(args),
+  args: {
+    ...ContainerComponentArgs,
+  },
+}

packages/core/src/components/container/stories/container.css

@@ -0,0 +1,10 @@
+.wrapper {
+  background-color: var(--color-neutral-light-5)
+}
+
+.title {
+  color: var(--color-neutral-dark-1);
+  font: var(--title-headline-xsmall);
+  letter-spacing: var(--title-headline-xsmall-letter);
+  margin: 0 0 var(--spacing-xxsmall);
+}

packages/core/src/components/container/stories/container.react.stories.tsx

@@ -0,0 +1,31 @@
+import { AtomContainer } from '@juntossomosmais/atomium/react'
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+
+import { ContainerComponentArgs, ContainerStoryArgs } from './container.args'
+
+import './container.css'
+
+export default {
+  title: 'Components/Container',
+  component: AtomContainer,
+  ...ContainerStoryArgs,
+} as Meta
+
+const createContainer = (args) => (
+  <AtomContainer className='wrapper' hasPadding={args.hasPadding}>
+    <h1 className='title'>Container Title</h1>
+    <p className='text'>
+      This is a sample content inside the container to demonstrate its behavior
+      and appearance with and without padding. Adjust the controls to see how it
+      changes.
+    </p>
+  </AtomContainer>
+)
+
+export const Default: StoryObj = {
+  render: (args) => createContainer(args),
+  args: {
+    ...ContainerComponentArgs,
+  },
+}

packages/core/src/components/container/stories/container.vue.stories.tsx

@@ -0,0 +1,42 @@
+import { AtomContainer } from '@juntossomosmais/atomium/vue'
+import { Meta, StoryObj } from '@storybook/vue3'
+
+import { ContainerStoryArgs } from './container.args'
+
+import './container.css'
+
+export default {
+  title: 'Components/Container',
+  ...ContainerStoryArgs,
+} as Meta
+
+const createContainer = (args) => ({
+  components: { AtomContainer },
+  setup() {
+    return { args }
+  },
+  template: `
+    <AtomContainer class="wrapper" hasPadding="${args.hasPadding}">
+      <h1 class="title">Container Title</h1>
+      <p class="text">
+        This is a sample content inside the container to demonstrate its behavior
+        and appearance with and without padding. Adjust the controls to see how it
+        changes.
+      </p>
+    </AtomContainer>
+  `,
+})
+
+export const Default: StoryObj = {
+  render: (args) => createContainer(args),
+  args: {
+    hasPadding: true,
+  },
+}
+
+export const NoPadding: StoryObj = {
+  render: (args) => createContainer(args),
+  args: {
+    hasPadding: false,
+  },
+}