feat(divider): create new component (#692)

packages/core/src/components.d.ts

@@ -121,6 +121,9 @@ export namespace Components {
     | DatetimeChangeEventDetail;
         "yearValues"?: number[] | string;
     }
+    interface AtomDivider {
+        "type": 'horizontal' | 'vertical';
+    }
     interface AtomGrid {
         "fixed"?: boolean;
     }
@@ -490,6 +493,12 @@ declare global {
         prototype: HTMLAtomDatetimeElement;
         new (): HTMLAtomDatetimeElement;
     };
+    interface HTMLAtomDividerElement extends Components.AtomDivider, HTMLStencilElement {
+    }
+    var HTMLAtomDividerElement: {
+        prototype: HTMLAtomDividerElement;
+        new (): HTMLAtomDividerElement;
+    };
     interface HTMLAtomGridElement extends Components.AtomGrid, HTMLStencilElement {
     }
     var HTMLAtomGridElement: {
@@ -708,6 +717,7 @@ declare global {
         "atom-col": HTMLAtomColElement;
         "atom-container": HTMLAtomContainerElement;
         "atom-datetime": HTMLAtomDatetimeElement;
+        "atom-divider": HTMLAtomDividerElement;
         "atom-grid": HTMLAtomGridElement;
         "atom-icon": HTMLAtomIconElement;
         "atom-input": HTMLAtomInputElement;
@@ -841,6 +851,9 @@ declare namespace LocalJSX {
     | DatetimeChangeEventDetail;
         "yearValues"?: number[] | string;
     }
+    interface AtomDivider {
+        "type"?: 'horizontal' | 'vertical';
+    }
     interface AtomGrid {
         "fixed"?: boolean;
     }
@@ -1091,6 +1104,7 @@ declare namespace LocalJSX {
         "atom-col": AtomCol;
         "atom-container": AtomContainer;
         "atom-datetime": AtomDatetime;
+        "atom-divider": AtomDivider;
         "atom-grid": AtomGrid;
         "atom-icon": AtomIcon;
         "atom-input": AtomInput;
@@ -1121,6 +1135,7 @@ declare module "@stencil/core" {
             "atom-col": LocalJSX.AtomCol & JSXBase.HTMLAttributes<HTMLAtomColElement>;
             "atom-container": LocalJSX.AtomContainer & JSXBase.HTMLAttributes<HTMLAtomContainerElement>;
             "atom-datetime": LocalJSX.AtomDatetime & JSXBase.HTMLAttributes<HTMLAtomDatetimeElement>;
+            "atom-divider": LocalJSX.AtomDivider & JSXBase.HTMLAttributes<HTMLAtomDividerElement>;
             "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/divider/divider.scss

@@ -0,0 +1,10 @@
+.atom-divider {
+  background-color: var(--color-neutral-light-3);
+  height: 1px;
+  width: 100%;
+
+  &.is-vertical {
+    height: 100%;
+    width: 1px;
+  }
+}

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

@@ -0,0 +1,39 @@
+import { newSpecPage } from '@stencil/core/testing'
+
+import { AtomDivider } from './divider'
+
+describe('atom-divider', () => {
+  it('should render with default prop horizontal', async () => {
+    const page = await newSpecPage({
+      components: [AtomDivider],
+      html: `<atom-divider type='horizontal'/>`,
+    })
+
+    await page.waitForChanges()
+
+    expect(page.root).toEqualHtml(`
+      <atom-divider type='horizontal'>
+        <mock:shadow-root>
+          <div aria-hidden="" class="atom-divider is-horizontal"></div>
+        </mock:shadow-root>
+      </atom-divider>
+    `)
+  })
+})
+
+it('should render with prop vertical', async () => {
+  const page = await newSpecPage({
+    components: [AtomDivider],
+    html: `<atom-divider type='vertical'/>`,
+  })
+
+  await page.waitForChanges()
+
+  expect(page.root).toEqualHtml(`
+      <atom-divider type='vertical'>
+        <mock:shadow-root>
+          <div aria-hidden="" class="atom-divider is-vertical"></div>
+        </mock:shadow-root>
+      </atom-divider>
+  `)
+})

packages/core/src/components/divider/divider.tsx

@@ -0,0 +1,14 @@
+import { Component, h, Prop } from '@stencil/core'
+
+@Component({
+  tag: 'atom-divider',
+  styleUrl: 'divider.scss',
+  shadow: true,
+})
+export class AtomDivider {
+  @Prop() type: 'horizontal' | 'vertical' = 'horizontal'
+
+  render() {
+    return <div class={`atom-divider is-${this.type}`} aria-hidden={true} />
+  }
+}

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

@@ -0,0 +1,23 @@
+export const DividerStoryArgs = {
+  decorators: [],
+  parameters: {
+    actions: {
+      handles: [],
+    },
+    docs: {
+      description: {
+        component:
+          'The Divider is a thin line that helps separate and group content in the interface. This component can also be used to define rhythm and order.',
+      },
+    },
+  },
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      defaultValue: { summary: 'horizontal' },
+      description:
+        'The type of the divider, will change your anatomy. The component can be used to separate content in two directions, vertical or horizontal.',
+    },
+  },
+}

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

@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from '@storybook/web-components'
+import { html } from 'lit'
+
+import { DividerStoryArgs } from './divider.args'
+
+export default {
+  title: 'Components/Divider',
+  ...DividerStoryArgs,
+} as Meta
+
+const createDivider = (args) => {
+  return args.type === 'vertical'
+    ? html`<div style="height: 100px;">
+        <atom-divider type="${args.type}" />
+      </div>`
+    : html`<atom-divider type="${args.type}" />`
+}
+
+export const Horizontal: StoryObj = {
+  render: (args) => createDivider(args),
+  args: {
+    type: 'horizontal',
+  },
+}
+
+export const Vertical: StoryObj = {
+  render: (args) => createDivider(args),
+  args: {
+    type: 'vertical',
+  },
+}

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

@@ -0,0 +1,38 @@
+import { AtomDivider } from '@juntossomosmais/atomium/react'
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+
+import { DividerStoryArgs } from './divider.args'
+
+export default {
+  title: 'Components/Divider',
+  component: AtomDivider,
+  ...DividerStoryArgs,
+} as Meta
+
+const createDivider = (args) =>
+  args.type === 'vertical' ? (
+    <div
+      style={{
+        height: '100px',
+      }}
+    >
+      <AtomDivider type={args.type} />
+    </div>
+  ) : (
+    <AtomDivider type={args.type} />
+  )
+
+export const Horizontal: StoryObj = {
+  render: (args) => createDivider(args),
+  args: {
+    type: 'horizontal',
+  },
+}
+
+export const Vertical: StoryObj = {
+  render: (args) => createDivider(args),
+  args: {
+    type: 'vertical',
+  },
+}

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

@@ -0,0 +1,36 @@
+import { AtomDivider } from '@juntossomosmais/atomium/vue'
+import { Meta, StoryObj } from '@storybook/vue3'
+
+import { DividerStoryArgs } from './divider.args'
+
+export default {
+  title: 'Components/Divider',
+  ...DividerStoryArgs,
+} as Meta
+
+const createDivider = (args) => ({
+  components: { AtomDivider },
+  setup() {
+    return { args }
+  },
+  template: `
+  <div v-if="args.type === 'vertical'" style="height: 100px">
+    <AtomDivider :type="args.type" />
+  </div>
+  <AtomDivider v-else :type="args.type" />
+  `,
+})
+
+export const Horizontal: StoryObj = {
+  render: (args) => createDivider(args),
+  args: {
+    type: 'horizontal',
+  },
+}
+
+export const Vertical: StoryObj = {
+  render: (args) => createDivider(args),
+  args: {
+    type: 'vertical',
+  },
+}