Merge branch 'main' of github.com:juntossomosmais/atomium into feat/u…

…pdate-ionic
juntossomosmais · Dec 3, 2024 · 66fbf68 · 66fbf68
2 parents 1694b3c + 1fb1475
commit 66fbf68
Show file tree

Hide file tree

Showing 15 changed files with 338 additions and 4 deletions.
diff --git a/.release-please-manifest.json b/.release-please-manifest.json
@@ -1,4 +1,4 @@
 {
-  "packages/core": "2.27.1",
+  "packages/core": "2.29.0",
   "packages/tokens": "2.0.0"
 }
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
@@ -1,5 +1,20 @@
 # Changelog
 
+## [2.29.0](https://github.com/juntossomosmais/atomium/compare/atomium-v2.28.0...atomium-v2.29.0) (2024-12-03)
+
+
+### Features
+
+* **component:** create spinner component ([#628](https://github.com/juntossomosmais/atomium/issues/628)) ([44d800a](https://github.com/juntossomosmais/atomium/commit/44d800ac2e366cd404140d9d2d66fea76720765d))
+* **icon:** add new icon add-circle-outline ([#648](https://github.com/juntossomosmais/atomium/issues/648)) ([36622f0](https://github.com/juntossomosmais/atomium/commit/36622f02f9c2746a64ad0f1acb0a69554f5a6484))
+
+## [2.28.0](https://github.com/juntossomosmais/atomium/compare/atomium-v2.27.1...atomium-v2.28.0) (2024-12-02)
+
+
+### Features
+
+* **icons:** add new icon ([#644](https://github.com/juntossomosmais/atomium/issues/644)) ([e0e6f3b](https://github.com/juntossomosmais/atomium/commit/e0e6f3b9a45369fef856214b1e6807cbaedd6a87))
+
 ## [2.27.1](https://github.com/juntossomosmais/atomium/compare/atomium-v2.27.0...atomium-v2.27.1) (2024-11-25)
 
 

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@juntossomosmais/atomium",
-  "version": "2.27.1",
+  "version": "2.29.0",
   "description": "Core of web components for Atomium",
   "repository": {
     "type": "git",

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -194,6 +194,10 @@ export namespace Components {
         "setTagInSelectOptions": () => Promise<void>;
         "value"?: IonTypes.IonSelect['value'];
     }
+    interface AtomSpinner {
+        "size": number;
+        "type": 'primary' | 'secondary' | 'dark';
+    }
     interface AtomStepsModal {
         "closeOnFinish"?: boolean;
         "currentStep": number;
@@ -532,6 +536,12 @@ declare global {
         prototype: HTMLAtomSelectElement;
         new (): HTMLAtomSelectElement;
     };
+    interface HTMLAtomSpinnerElement extends Components.AtomSpinner, HTMLStencilElement {
+    }
+    var HTMLAtomSpinnerElement: {
+        prototype: HTMLAtomSpinnerElement;
+        new (): HTMLAtomSpinnerElement;
+    };
     interface HTMLAtomStepsModalElementEventMap {
         "atomFinish": any;
         "atomCancel": any;
@@ -618,6 +628,7 @@ declare global {
         "atom-list-slider-item": HTMLAtomListSliderItemElement;
         "atom-modal": HTMLAtomModalElement;
         "atom-select": HTMLAtomSelectElement;
+        "atom-spinner": HTMLAtomSpinnerElement;
         "atom-steps-modal": HTMLAtomStepsModalElement;
         "atom-tag": HTMLAtomTagElement;
         "atom-textarea": HTMLAtomTextareaElement;
@@ -825,6 +836,10 @@ declare namespace LocalJSX {
         "readonly"?: boolean;
         "value"?: IonTypes.IonSelect['value'];
     }
+    interface AtomSpinner {
+        "size"?: number;
+        "type"?: 'primary' | 'secondary' | 'dark';
+    }
     interface AtomStepsModal {
         "closeOnFinish"?: boolean;
         "currentStep"?: number;
@@ -948,6 +963,7 @@ declare namespace LocalJSX {
         "atom-list-slider-item": AtomListSliderItem;
         "atom-modal": AtomModal;
         "atom-select": AtomSelect;
+        "atom-spinner": AtomSpinner;
         "atom-steps-modal": AtomStepsModal;
         "atom-tag": AtomTag;
         "atom-textarea": AtomTextarea;
@@ -975,6 +991,7 @@ declare module "@stencil/core" {
             "atom-list-slider-item": LocalJSX.AtomListSliderItem & JSXBase.HTMLAttributes<HTMLAtomListSliderItemElement>;
             "atom-modal": LocalJSX.AtomModal & JSXBase.HTMLAttributes<HTMLAtomModalElement>;
             "atom-select": LocalJSX.AtomSelect & JSXBase.HTMLAttributes<HTMLAtomSelectElement>;
+            "atom-spinner": LocalJSX.AtomSpinner & JSXBase.HTMLAttributes<HTMLAtomSpinnerElement>;
             "atom-steps-modal": LocalJSX.AtomStepsModal & JSXBase.HTMLAttributes<HTMLAtomStepsModalElement>;
             "atom-tag": LocalJSX.AtomTag & JSXBase.HTMLAttributes<HTMLAtomTagElement>;
             "atom-textarea": LocalJSX.AtomTextarea & JSXBase.HTMLAttributes<HTMLAtomTextareaElement>;

diff --git a/packages/core/src/components/badge/stories/badge.react.stories.tsx b/packages/core/src/components/badge/stories/badge.react.stories.tsx
@@ -1,8 +1,7 @@
+import { AtomBadge } from '@juntossomosmais/atomium/react'
 import { Meta, StoryObj } from '@storybook/react'
 import React from 'react'
 
-import { AtomBadge } from '@juntossomosmais/atomium/react'
-
 import { BadgeStoryArgs } from './badge.args'
 
 export default {

diff --git a/packages/core/src/components/spinner/spinner.scss b/packages/core/src/components/spinner/spinner.scss
@@ -0,0 +1,13 @@
+svg {
+  animation: rotate 1.5s linear infinite;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(-360deg);
+  }
+}
diff --git a/packages/core/src/components/spinner/spinner.spec.ts b/packages/core/src/components/spinner/spinner.spec.ts
@@ -0,0 +1,77 @@
+import { newSpecPage } from '@stencil/core/testing'
+
+import { AtomSpinner } from './spinner'
+
+describe('atom-spinner', () => {
+  it('renders correctly with default properties', async () => {
+    const page = await newSpecPage({
+      components: [AtomSpinner],
+      html: `<atom-spinner></atom-spinner>`,
+    })
+
+    expect(page.root).toEqualHtml(`
+      <atom-spinner>
+        <mock:shadow-root>
+          <svg height="40" viewBox="0 0 25 24" width="40" xmlns="http://www.w3.org/2000/svg">
+            <path d="M24.5 12C24.5 18.6274 19.1274 24 12.5 24C5.87258 24 0.5 18.6274 0.5 12C0.5 5.37258 5.87258 0 12.5 0C19.1274 0 24.5 5.37258 24.5 12ZM3.86 12C3.86 16.7717 7.72826 20.64 12.5 20.64C17.2717 20.64 21.14 16.7717 21.14 12C21.14 7.22826 17.2717 3.36 12.5 3.36C7.72826 3.36 3.86 7.22826 3.86 12Z" fill="var(--color-brand-primary-light-1)"></path>
+            <path d="M6.16927 3.84985C5.60009 3.1171 5.72815 2.04993 6.53315 1.58857C7.682 0.930167 8.93534 0.464485 10.2434 0.214033C12.1034 -0.142081 14.0212 -0.0529419 15.8401 0.474155C17.659 1.00125 19.3273 1.95134 20.7086 3.24675C21.6801 4.1578 22.4903 5.22147 23.1091 6.39212C23.5427 7.21241 23.0803 8.1827 22.2075 8.49758C21.3347 8.81247 20.3851 8.3481 19.9075 7.55263C19.4979 6.87038 18.9946 6.24566 18.4102 5.69765C17.4156 4.76495 16.2145 4.08089 14.9049 3.70138C13.5953 3.32187 12.2144 3.25769 10.8753 3.51409C10.0884 3.66474 9.32909 3.92355 8.61816 4.28108C7.78924 4.69795 6.73844 4.5826 6.16927 3.84985Z" fill="var(--color-neutral-white)"></path>
+          </svg>
+        </mock:shadow-root>
+      </atom-spinner>
+    `)
+  })
+
+  it('renders correctly with custom size', async () => {
+    const page = await newSpecPage({
+      components: [AtomSpinner],
+      html: `<atom-spinner size="80"></atom-spinner>`,
+    })
+
+    expect(page.root).toEqualHtml(`
+      <atom-spinner size="80">
+        <mock:shadow-root>
+          <svg height="80" viewBox="0 0 25 24" width="80" xmlns="http://www.w3.org/2000/svg">
+            <path d="M24.5 12C24.5 18.6274 19.1274 24 12.5 24C5.87258 24 0.5 18.6274 0.5 12C0.5 5.37258 5.87258 0 12.5 0C19.1274 0 24.5 5.37258 24.5 12ZM3.86 12C3.86 16.7717 7.72826 20.64 12.5 20.64C17.2717 20.64 21.14 16.7717 21.14 12C21.14 7.22826 17.2717 3.36 12.5 3.36C7.72826 3.36 3.86 7.22826 3.86 12Z" fill="var(--color-brand-primary-light-1)"></path>
+            <path d="M6.16927 3.84985C5.60009 3.1171 5.72815 2.04993 6.53315 1.58857C7.682 0.930167 8.93534 0.464485 10.2434 0.214033C12.1034 -0.142081 14.0212 -0.0529419 15.8401 0.474155C17.659 1.00125 19.3273 1.95134 20.7086 3.24675C21.6801 4.1578 22.4903 5.22147 23.1091 6.39212C23.5427 7.21241 23.0803 8.1827 22.2075 8.49758C21.3347 8.81247 20.3851 8.3481 19.9075 7.55263C19.4979 6.87038 18.9946 6.24566 18.4102 5.69765C17.4156 4.76495 16.2145 4.08089 14.9049 3.70138C13.5953 3.32187 12.2144 3.25769 10.8753 3.51409C10.0884 3.66474 9.32909 3.92355 8.61816 4.28108C7.78924 4.69795 6.73844 4.5826 6.16927 3.84985Z" fill="var(--color-neutral-white)"></path>
+          </svg>
+        </mock:shadow-root>
+      </atom-spinner>
+    `)
+  })
+
+  it('renders correctly with secondary type', async () => {
+    const page = await newSpecPage({
+      components: [AtomSpinner],
+      html: `<atom-spinner type="secondary"></atom-spinner>`,
+    })
+
+    expect(page.root).toEqualHtml(`
+      <atom-spinner type="secondary">
+        <mock:shadow-root>
+          <svg height="40" viewBox="0 0 25 24" width="40" xmlns="http://www.w3.org/2000/svg">
+            <path d="M24.5 12C24.5 18.6274 19.1274 24 12.5 24C5.87258 24 0.5 18.6274 0.5 12C0.5 5.37258 5.87258 0 12.5 0C19.1274 0 24.5 5.37258 24.5 12ZM3.86 12C3.86 16.7717 7.72826 20.64 12.5 20.64C17.2717 20.64 21.14 16.7717 21.14 12C21.14 7.22826 17.2717 3.36 12.5 3.36C7.72826 3.36 3.86 7.22826 3.86 12Z" fill="var(--color-neutral-light-4)"></path>
+            <path d="M6.16927 3.84985C5.60009 3.1171 5.72815 2.04993 6.53315 1.58857C7.682 0.930167 8.93534 0.464485 10.2434 0.214033C12.1034 -0.142081 14.0212 -0.0529419 15.8401 0.474155C17.659 1.00125 19.3273 1.95134 20.7086 3.24675C21.6801 4.1578 22.4903 5.22147 23.1091 6.39212C23.5427 7.21241 23.0803 8.1827 22.2075 8.49758C21.3347 8.81247 20.3851 8.3481 19.9075 7.55263C19.4979 6.87038 18.9946 6.24566 18.4102 5.69765C17.4156 4.76495 16.2145 4.08089 14.9049 3.70138C13.5953 3.32187 12.2144 3.25769 10.8753 3.51409C10.0884 3.66474 9.32909 3.92355 8.61816 4.28108C7.78924 4.69795 6.73844 4.5826 6.16927 3.84985Z" fill="var(--color-brand-secondary-regular)"></path>
+          </svg>
+        </mock:shadow-root>
+      </atom-spinner>
+    `)
+  })
+
+  it('renders correctly with dark type', async () => {
+    const page = await newSpecPage({
+      components: [AtomSpinner],
+      html: `<atom-spinner type="dark"></atom-spinner>`,
+    })
+
+    expect(page.root).toEqualHtml(`
+      <atom-spinner type="dark">
+        <mock:shadow-root>
+          <svg height="40" viewBox="0 0 25 24" width="40" xmlns="http://www.w3.org/2000/svg">
+            <path d="M24.5 12C24.5 18.6274 19.1274 24 12.5 24C5.87258 24 0.5 18.6274 0.5 12C0.5 5.37258 5.87258 0 12.5 0C19.1274 0 24.5 5.37258 24.5 12ZM3.86 12C3.86 16.7717 7.72826 20.64 12.5 20.64C17.2717 20.64 21.14 16.7717 21.14 12C21.14 7.22826 17.2717 3.36 12.5 3.36C7.72826 3.36 3.86 7.22826 3.86 12Z" fill="var(--color-neutral-light-4)"></path>
+            <path d="M6.16927 3.84985C5.60009 3.1171 5.72815 2.04993 6.53315 1.58857C7.682 0.930167 8.93534 0.464485 10.2434 0.214033C12.1034 -0.142081 14.0212 -0.0529419 15.8401 0.474155C17.659 1.00125 19.3273 1.95134 20.7086 3.24675C21.6801 4.1578 22.4903 5.22147 23.1091 6.39212C23.5427 7.21241 23.0803 8.1827 22.2075 8.49758C21.3347 8.81247 20.3851 8.3481 19.9075 7.55263C19.4979 6.87038 18.9946 6.24566 18.4102 5.69765C17.4156 4.76495 16.2145 4.08089 14.9049 3.70138C13.5953 3.32187 12.2144 3.25769 10.8753 3.51409C10.0884 3.66474 9.32909 3.92355 8.61816 4.28108C7.78924 4.69795 6.73844 4.5826 6.16927 3.84985Z" fill="var(--color-neutral-light-1)"></path>
+          </svg>
+        </mock:shadow-root>
+      </atom-spinner>
+    `)
+  })
+})
diff --git a/packages/core/src/components/spinner/spinner.tsx b/packages/core/src/components/spinner/spinner.tsx
@@ -0,0 +1,43 @@
+import { Component, Host, Prop, h } from '@stencil/core'
+
+@Component({
+  tag: 'atom-spinner',
+  styleUrl: 'spinner.scss',
+  shadow: true,
+})
+export class AtomSpinner {
+  @Prop() type: 'primary' | 'secondary' | 'dark' = 'primary'
+  @Prop() size: number = 40
+
+  render() {
+    const colors = {
+      primary: 'var(--color-neutral-white)',
+      secondary: 'var(--color-brand-secondary-regular)',
+      dark: 'var(--color-neutral-light-1)',
+    }
+
+    return (
+      <Host>
+        <svg
+          width={this.size}
+          height={this.size}
+          viewBox='0 0 25 24'
+          xmlns='http://www.w3.org/2000/svg'
+        >
+          <path
+            d='M24.5 12C24.5 18.6274 19.1274 24 12.5 24C5.87258 24 0.5 18.6274 0.5 12C0.5 5.37258 5.87258 0 12.5 0C19.1274 0 24.5 5.37258 24.5 12ZM3.86 12C3.86 16.7717 7.72826 20.64 12.5 20.64C17.2717 20.64 21.14 16.7717 21.14 12C21.14 7.22826 17.2717 3.36 12.5 3.36C7.72826 3.36 3.86 7.22826 3.86 12Z'
+            fill={`${
+              this.type === 'primary'
+                ? 'var(--color-brand-primary-light-1)'
+                : 'var(--color-neutral-light-4)'
+            }`}
+          />
+          <path
+            d='M6.16927 3.84985C5.60009 3.1171 5.72815 2.04993 6.53315 1.58857C7.682 0.930167 8.93534 0.464485 10.2434 0.214033C12.1034 -0.142081 14.0212 -0.0529419 15.8401 0.474155C17.659 1.00125 19.3273 1.95134 20.7086 3.24675C21.6801 4.1578 22.4903 5.22147 23.1091 6.39212C23.5427 7.21241 23.0803 8.1827 22.2075 8.49758C21.3347 8.81247 20.3851 8.3481 19.9075 7.55263C19.4979 6.87038 18.9946 6.24566 18.4102 5.69765C17.4156 4.76495 16.2145 4.08089 14.9049 3.70138C13.5953 3.32187 12.2144 3.25769 10.8753 3.51409C10.0884 3.66474 9.32909 3.92355 8.61816 4.28108C7.78924 4.69795 6.73844 4.5826 6.16927 3.84985Z'
+            fill={colors[this.type]}
+          />
+        </svg>
+      </Host>
+    )
+  }
+}
diff --git a/packages/core/src/components/spinner/stories/spinner.args.ts b/packages/core/src/components/spinner/stories/spinner.args.ts
@@ -0,0 +1,36 @@
+import { Category } from '@atomium/storybook-utils/enums/table'
+
+export const SpinnerStoryArgs = {
+  decorators: [],
+  parameters: {
+    actions: {
+      handles: [],
+    },
+    docs: {
+      description: {
+        component:
+          'The Spinner component is a loading indicator that can be used to indicate that a process is running.',
+      },
+    },
+  },
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['primary', 'secondary', 'dark'],
+      defaultValue: { summary: 'primary' },
+      description:
+        'The type of the Spinner, the component will receive the color according to its type.',
+      table: {
+        category: Category.PROPERTIES,
+      },
+    },
+    size: {
+      control: 'number',
+      defaultValue: { summary: 40 },
+      description: 'The size of the Spinner.',
+      table: {
+        category: Category.PROPERTIES,
+      },
+    },
+  },
+}
diff --git a/packages/core/src/components/spinner/stories/spinner.core.stories.tsx b/packages/core/src/components/spinner/stories/spinner.core.stories.tsx
@@ -0,0 +1,37 @@
+import { Meta, StoryObj } from '@storybook/web-components'
+import { html } from 'lit'
+
+import { SpinnerStoryArgs } from './spinner.args'
+
+export default {
+  title: 'Components/Spinner',
+  ...SpinnerStoryArgs,
+} as Meta
+
+const createSpinner = (args) => {
+  return html`<atom-spinner type="${args.type}" size="${args.size}" />`
+}
+
+export const Primary: StoryObj = {
+  render: (args) => createSpinner(args),
+  args: {
+    size: 40,
+    type: 'primary',
+  },
+}
+
+export const Secondary: StoryObj = {
+  render: (args) => createSpinner(args),
+  args: {
+    ...Primary.args,
+    type: 'secondary',
+  },
+}
+
+export const Dark: StoryObj = {
+  render: (args) => createSpinner(args),
+  args: {
+    ...Primary.args,
+    type: 'dark',
+  },
+}
diff --git a/packages/core/src/components/spinner/stories/spinner.react.stories.tsx b/packages/core/src/components/spinner/stories/spinner.react.stories.tsx
@@ -0,0 +1,39 @@
+import { AtomSpinner } from '@juntossomosmais/atomium/react'
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+
+import { SpinnerStoryArgs } from './spinner.args'
+
+export default {
+  title: 'Components/Spinner',
+  component: AtomSpinner,
+  ...SpinnerStoryArgs,
+} as Meta
+
+const createSpinner = (args) => (
+  <AtomSpinner type={args.type} number={args.number} />
+)
+
+export const Primary: StoryObj = {
+  render: (args) => createSpinner(args),
+  args: {
+    number: 40,
+    type: 'primary',
+  },
+}
+
+export const Secondary: StoryObj = {
+  render: (args) => createSpinner(args),
+  args: {
+    ...Primary.args,
+    type: 'secondary',
+  },
+}
+
+export const Dark: StoryObj = {
+  render: (args) => createSpinner(args),
+  args: {
+    ...Primary.args,
+    type: 'dark',
+  },
+}
diff --git a/packages/core/src/components/spinner/stories/spinner.vue.stories.tsx b/packages/core/src/components/spinner/stories/spinner.vue.stories.tsx
@@ -0,0 +1,41 @@
+import { AtomSpinner } from '@juntossomosmais/atomium/vue'
+import { Meta, StoryObj } from '@storybook/vue3'
+
+import { SpinnerStoryArgs } from './spinner.args'
+
+export default {
+  title: 'Components/Spinner',
+  ...SpinnerStoryArgs,
+} as Meta
+
+const createSpinner = (args) => ({
+  components: { AtomSpinner },
+  setup() {
+    return { args }
+  },
+  template: `<AtomSpinner type="${args.type}" size="${args.size}" />`,
+})
+
+export const Primary: StoryObj = {
+  render: (args) => createSpinner(args),
+  args: {
+    size: 40,
+    type: 'primary',
+  },
+}
+
+export const Secondary: StoryObj = {
+  render: (args) => createSpinner(args),
+  args: {
+    ...Primary.args,
+    type: 'secondary',
+  },
+}
+
+export const Dark: StoryObj = {
+  render: (args) => createSpinner(args),
+  args: {
+    ...Primary.args,
+    type: 'dark',
+  },
+}