diff --git a/.release-please-manifest.json b/.release-please-manifest.json index fe025ff68..1497e96fa 100644 --- 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 index edc050abd..e7f6f5d0d 100644 --- 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 index 9da014844..2eaa7b133 100644 --- 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 index 062f3a6ad..b18623e8b 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -194,6 +194,10 @@ export namespace Components { "setTagInSelectOptions": () => Promise; "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; "atom-modal": LocalJSX.AtomModal & JSXBase.HTMLAttributes; "atom-select": LocalJSX.AtomSelect & JSXBase.HTMLAttributes; + "atom-spinner": LocalJSX.AtomSpinner & JSXBase.HTMLAttributes; "atom-steps-modal": LocalJSX.AtomStepsModal & JSXBase.HTMLAttributes; "atom-tag": LocalJSX.AtomTag & JSXBase.HTMLAttributes; "atom-textarea": LocalJSX.AtomTextarea & JSXBase.HTMLAttributes; diff --git a/packages/core/src/components/badge/stories/badge.react.stories.tsx b/packages/core/src/components/badge/stories/badge.react.stories.tsx index dba47106a..661a73b77 100644 --- 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 new file mode 100644 index 000000000..e16207136 --- /dev/null +++ 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 new file mode 100644 index 000000000..9b037e775 --- /dev/null +++ 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: ``, + }) + + expect(page.root).toEqualHtml(` + + + + + + + + + `) + }) + + it('renders correctly with custom size', async () => { + const page = await newSpecPage({ + components: [AtomSpinner], + html: ``, + }) + + expect(page.root).toEqualHtml(` + + + + + + + + + `) + }) + + it('renders correctly with secondary type', async () => { + const page = await newSpecPage({ + components: [AtomSpinner], + html: ``, + }) + + expect(page.root).toEqualHtml(` + + + + + + + + + `) + }) + + it('renders correctly with dark type', async () => { + const page = await newSpecPage({ + components: [AtomSpinner], + html: ``, + }) + + expect(page.root).toEqualHtml(` + + + + + + + + + `) + }) +}) diff --git a/packages/core/src/components/spinner/spinner.tsx b/packages/core/src/components/spinner/spinner.tsx new file mode 100644 index 000000000..22ed7e647 --- /dev/null +++ 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 ( + + + + + + + ) + } +} diff --git a/packages/core/src/components/spinner/stories/spinner.args.ts b/packages/core/src/components/spinner/stories/spinner.args.ts new file mode 100644 index 000000000..0826d97d6 --- /dev/null +++ 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 new file mode 100644 index 000000000..22e6b46bb --- /dev/null +++ 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`` +} + +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 new file mode 100644 index 000000000..b9066949a --- /dev/null +++ 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) => ( + +) + +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 new file mode 100644 index 000000000..e137432c9 --- /dev/null +++ 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: ``, +}) + +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/icons.d.ts b/packages/core/src/icons.d.ts index a2269ba4d..baa2b859b 100644 --- a/packages/core/src/icons.d.ts +++ b/packages/core/src/icons.d.ts @@ -31,6 +31,7 @@ export type IconProps = | 'account-supervisor' | 'account' | 'activity-blocked' + | 'add-circle-outline' | 'alarm-check' | 'alarm' | 'alert-circle-outline' @@ -161,6 +162,7 @@ export type IconProps = | 'reload' | 'replay' | 'search-off' + | 'sentiment-dissatisfied' | 'share-variant-outline' | 'share-variant' | 'shopping-outline' diff --git a/packages/icons/svg/mdi/add-circle-outline.svg b/packages/icons/svg/mdi/add-circle-outline.svg new file mode 100644 index 000000000..2094fa5d4 --- /dev/null +++ b/packages/icons/svg/mdi/add-circle-outline.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/svg/mdi/sentiment-dissatisfied.svg b/packages/icons/svg/mdi/sentiment-dissatisfied.svg new file mode 100644 index 000000000..40302a21e --- /dev/null +++ b/packages/icons/svg/mdi/sentiment-dissatisfied.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + +