From c670257fdc28452bad4b5ef9ce86005209923bda Mon Sep 17 00:00:00 2001 From: tassioFront Date: Mon, 29 Jul 2024 17:20:09 -0300 Subject: [PATCH 1/6] feat: create link component draft --- package-lock.json | 2 +- packages/core/loader/cdn.js | 4 +- packages/core/loader/index.cjs.js | 4 +- packages/core/loader/index.d.ts | 3 -- packages/core/loader/index.es2017.js | 4 +- packages/core/loader/index.js | 4 +- packages/core/src/components.d.ts | 33 ++++++++++++++ packages/core/src/components/link/link.scss | 28 ++++++++++++ packages/core/src/components/link/link.tsx | 41 ++++++++++++++++++ .../src/components/link/stories/link.args.ts | 29 +++++++++++++ .../link/stories/link.core.stories.tsx | 43 +++++++++++++++++++ 11 files changed, 187 insertions(+), 8 deletions(-) create mode 100644 packages/core/src/components/link/link.scss create mode 100644 packages/core/src/components/link/link.tsx create mode 100644 packages/core/src/components/link/stories/link.args.ts create mode 100644 packages/core/src/components/link/stories/link.core.stories.tsx diff --git a/package-lock.json b/package-lock.json index 9582f9521..2c7b45c40 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31622,7 +31622,7 @@ }, "packages/core": { "name": "@juntossomosmais/atomium", - "version": "2.7.0" + "version": "2.9.0" }, "packages/icons": { "name": "@juntossomosmais/atomium-icons" diff --git a/packages/core/loader/cdn.js b/packages/core/loader/cdn.js index 45e7d5abe..0eb97e625 100644 --- a/packages/core/loader/cdn.js +++ b/packages/core/loader/cdn.js @@ -1 +1,3 @@ -module.exports = require('../dist/cjs/loader.cjs.js'); \ No newline at end of file + +module.exports = require('../dist/cjs/loader.cjs.js'); +module.exports.applyPolyfills = function() { return Promise.resolve() }; diff --git a/packages/core/loader/index.cjs.js b/packages/core/loader/index.cjs.js index 45e7d5abe..0eb97e625 100644 --- a/packages/core/loader/index.cjs.js +++ b/packages/core/loader/index.cjs.js @@ -1 +1,3 @@ -module.exports = require('../dist/cjs/loader.cjs.js'); \ No newline at end of file + +module.exports = require('../dist/cjs/loader.cjs.js'); +module.exports.applyPolyfills = function() { return Promise.resolve() }; diff --git a/packages/core/loader/index.d.ts b/packages/core/loader/index.d.ts index 2d2403438..eed17ccf3 100644 --- a/packages/core/loader/index.d.ts +++ b/packages/core/loader/index.d.ts @@ -9,9 +9,6 @@ export interface CustomElementsDefineOptions { rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void; } export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void; -/** - * @deprecated - */ export declare function applyPolyfills(): Promise; /** diff --git a/packages/core/loader/index.es2017.js b/packages/core/loader/index.es2017.js index 15b1d13d5..596dbf69f 100644 --- a/packages/core/loader/index.es2017.js +++ b/packages/core/loader/index.es2017.js @@ -1 +1,3 @@ -export * from '../dist/esm/loader.js'; \ No newline at end of file + +export * from '../dist/esm/polyfills/index.js'; +export * from '../dist/esm/loader.js'; diff --git a/packages/core/loader/index.js b/packages/core/loader/index.js index 8e1a393bc..170d5f893 100644 --- a/packages/core/loader/index.js +++ b/packages/core/loader/index.js @@ -1,2 +1,4 @@ + (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})(); -export * from '../dist/esm/loader.js'; \ No newline at end of file +export * from '../dist/esm/polyfills/index.js'; +export * from '../dist/esm/loader.js'; diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 8fefe2ced..4207eed29 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -143,6 +143,10 @@ export namespace Components { "type": TextFieldTypes; "value"?: IonTypes.IonInput['value']; } + interface AtomLink { + "color": 'primary' | 'secondary'; + "type": 'anchor' | 'button'; + } interface AtomListSlider { "centralized": boolean; "hasNavigation": boolean; @@ -247,6 +251,10 @@ export interface AtomInputCustomEvent extends CustomEvent { detail: T; target: HTMLAtomInputElement; } +export interface AtomLinkCustomEvent extends CustomEvent { + detail: T; + target: HTMLAtomLinkElement; +} export interface AtomListSliderCustomEvent extends CustomEvent { detail: T; target: HTMLAtomListSliderElement; @@ -380,6 +388,23 @@ declare global { prototype: HTMLAtomInputElement; new (): HTMLAtomInputElement; }; + interface HTMLAtomLinkElementEventMap { + "click": any; + } + interface HTMLAtomLinkElement extends Components.AtomLink, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLAtomLinkElement, ev: AtomLinkCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLAtomLinkElement, ev: AtomLinkCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLAtomLinkElement: { + prototype: HTMLAtomLinkElement; + new (): HTMLAtomLinkElement; + }; interface HTMLAtomListSliderElementEventMap { "clickNext": any; "clickPrev": any; @@ -464,6 +489,7 @@ declare global { "atom-grid": HTMLAtomGridElement; "atom-icon": HTMLAtomIconElement; "atom-input": HTMLAtomInputElement; + "atom-link": HTMLAtomLinkElement; "atom-list-slider": HTMLAtomListSliderElement; "atom-list-slider-item": HTMLAtomListSliderItemElement; "atom-select": HTMLAtomSelectElement; @@ -608,6 +634,11 @@ declare namespace LocalJSX { "type"?: TextFieldTypes; "value"?: IonTypes.IonInput['value']; } + interface AtomLink { + "color"?: 'primary' | 'secondary'; + "onClick"?: (event: AtomLinkCustomEvent) => void; + "type"?: 'anchor' | 'button'; + } interface AtomListSlider { "centralized"?: boolean; "hasNavigation"?: boolean; @@ -716,6 +747,7 @@ declare namespace LocalJSX { "atom-grid": AtomGrid; "atom-icon": AtomIcon; "atom-input": AtomInput; + "atom-link": AtomLink; "atom-list-slider": AtomListSlider; "atom-list-slider-item": AtomListSliderItem; "atom-select": AtomSelect; @@ -739,6 +771,7 @@ declare module "@stencil/core" { "atom-grid": LocalJSX.AtomGrid & JSXBase.HTMLAttributes; "atom-icon": LocalJSX.AtomIcon & JSXBase.HTMLAttributes; "atom-input": LocalJSX.AtomInput & JSXBase.HTMLAttributes; + "atom-link": LocalJSX.AtomLink & JSXBase.HTMLAttributes; "atom-list-slider": LocalJSX.AtomListSlider & JSXBase.HTMLAttributes; "atom-list-slider-item": LocalJSX.AtomListSliderItem & JSXBase.HTMLAttributes; "atom-select": LocalJSX.AtomSelect & JSXBase.HTMLAttributes; diff --git a/packages/core/src/components/link/link.scss b/packages/core/src/components/link/link.scss new file mode 100644 index 000000000..1f46927a1 --- /dev/null +++ b/packages/core/src/components/link/link.scss @@ -0,0 +1,28 @@ +@import '~@atomium/scss-utils/index'; + +:host { + display: inline-block; +} + +.atom-link { + cursor: pointer; + font: var(--text-link-medium); + letter-spacing: var(--text-link-medium-letter); + text-decoration: underline; + + + &[color='primary'] { + color: var(--color-brand-primary-regular); + } + + &[color='secondary'] { + color: var(--color-brand-secondary-regular) + } + + &__button { + background: none; + border: none; + padding: 0; + text-decoration: none; + } +} diff --git a/packages/core/src/components/link/link.tsx b/packages/core/src/components/link/link.tsx new file mode 100644 index 000000000..b285358c1 --- /dev/null +++ b/packages/core/src/components/link/link.tsx @@ -0,0 +1,41 @@ +import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core' + +@Component({ + tag: 'atom-link', + styleUrl: 'link.scss', + shadow: true, +}) +export class AtomLink { + @Prop() color: 'primary' | 'secondary' = 'primary' + @Prop() type: 'anchor' | 'button' = 'anchor' + + @Event() click: EventEmitter + + private handleClick = (event: MouseEvent) => { + event.preventDefault() + event.stopPropagation() + + return this.click.emit(event) + } + + render() { + return ( + + {this.type === 'anchor' ? ( + + + + ) : ( + + )} + + ) + } +} diff --git a/packages/core/src/components/link/stories/link.args.ts b/packages/core/src/components/link/stories/link.args.ts new file mode 100644 index 000000000..1a07f4567 --- /dev/null +++ b/packages/core/src/components/link/stories/link.args.ts @@ -0,0 +1,29 @@ +export const LinkStoryArgs = { + decorators: [], + parameters: { + actions: { + handles: [], + }, + docs: { + description: { + component: + 'Link components are link children styled components. They are used to navigate to different pages (when used inside router components, such as router-link(Vue) and Link(Next)) or used to trigger user actions.', + }, + }, + }, + argTypes: { + color: { + control: 'select', + options: ['primary', 'secondary'], + defaultValue: { summary: 'primary' }, + description: 'The link color.', + }, + type: { + control: 'select', + options: ['anchor', 'button'], + defaultValue: { summary: 'anchor' }, + description: + 'The link type. Use anchor for navigation (combined with router-link or Link) and button for user actions.', + }, + }, +} diff --git a/packages/core/src/components/link/stories/link.core.stories.tsx b/packages/core/src/components/link/stories/link.core.stories.tsx new file mode 100644 index 000000000..386b39250 --- /dev/null +++ b/packages/core/src/components/link/stories/link.core.stories.tsx @@ -0,0 +1,43 @@ +import { Meta, StoryObj } from '@storybook/web-components' +import { html } from 'lit' + +import { LinkStoryArgs } from './link.args' + +export default { + title: 'Components/Link', + ...LinkStoryArgs, +} as Meta + +const createLink = (args) => { + return html` + + ${args.textExample} + + ` +} + +export const Primary: StoryObj = { + render: (args) => createLink(args), + args: { + type: 'anchor', + color: 'primary', + textExample: 'It should be used inside router components', + }, +} + +export const Secondary: StoryObj = { + render: (args) => createLink(args), + args: { + ...Primary.args, + color: 'secondary', + }, +} + +export const Button: StoryObj = { + render: (args) => createLink(args), + args: { + ...Primary.args, + type: 'button', + textExample: 'It should be used to trigger user actions', + }, +} From 28197dd445ebffbec91a9501a46c7a0c4063e21b Mon Sep 17 00:00:00 2001 From: tassioFront Date: Mon, 29 Jul 2024 20:16:09 -0300 Subject: [PATCH 2/6] feat: create link tests and stories --- .../core/src/components/link/link.spec.ts | 74 +++++++++++++++++++ .../link/stories/link.core.stories.tsx | 12 +-- .../link/stories/link.react.stories.tsx | 44 +++++++++++ .../link/stories/link.vue.stories.tsx | 50 +++++++++++++ 4 files changed, 175 insertions(+), 5 deletions(-) create mode 100644 packages/core/src/components/link/link.spec.ts create mode 100644 packages/core/src/components/link/stories/link.react.stories.tsx create mode 100644 packages/core/src/components/link/stories/link.vue.stories.tsx diff --git a/packages/core/src/components/link/link.spec.ts b/packages/core/src/components/link/link.spec.ts new file mode 100644 index 000000000..14d9a81b2 --- /dev/null +++ b/packages/core/src/components/link/link.spec.ts @@ -0,0 +1,74 @@ +import { newSpecPage } from '@stencil/core/testing' + +import { AtomLink } from './link' + +describe('atom-link', () => { + it('should render a span element with secondary color - default mode', async () => { + const page = await newSpecPage({ + components: [AtomLink], + html: `styled link`, + }) + + await page.waitForChanges() + + expect(page.root).toEqualHtml(` + + + + + + + styled link + + `) + }) + + it('should render a span element with secondary color', async () => { + const page = await newSpecPage({ + components: [AtomLink], + html: `styled link`, + }) + + await page.waitForChanges() + + expect(page.root).toEqualHtml(` + + + + + + + styled link + + `) + }) + + it('should render a clickable button element with secondary color ', async () => { + const page = await newSpecPage({ + components: [AtomLink], + html: `styled link`, + }) + + await page.waitForChanges() + + expect(page.root).toEqualHtml(` + + + + + styled link + + `) + + const buttonEl = page.root?.shadowRoot?.querySelector('button') + const clickEventSpy = jest.spyOn(page.rootInstance.click, 'emit') + + buttonEl?.click() + + expect(clickEventSpy).toHaveBeenCalled() + }) +}) diff --git a/packages/core/src/components/link/stories/link.core.stories.tsx b/packages/core/src/components/link/stories/link.core.stories.tsx index 386b39250..f50596b96 100644 --- a/packages/core/src/components/link/stories/link.core.stories.tsx +++ b/packages/core/src/components/link/stories/link.core.stories.tsx @@ -8,10 +8,13 @@ export default { ...LinkStoryArgs, } as Meta -const createLink = (args) => { +const createLink = ( + args, + textExample = 'It should be used inside router components' +) => { return html` - ${args.textExample} + ${textExample} ` } @@ -21,7 +24,6 @@ export const Primary: StoryObj = { args: { type: 'anchor', color: 'primary', - textExample: 'It should be used inside router components', }, } @@ -34,10 +36,10 @@ export const Secondary: StoryObj = { } export const Button: StoryObj = { - render: (args) => createLink(args), + render: (args) => + createLink(args, 'It should be used to trigger user actions'), args: { ...Primary.args, type: 'button', - textExample: 'It should be used to trigger user actions', }, } diff --git a/packages/core/src/components/link/stories/link.react.stories.tsx b/packages/core/src/components/link/stories/link.react.stories.tsx new file mode 100644 index 000000000..84711fad0 --- /dev/null +++ b/packages/core/src/components/link/stories/link.react.stories.tsx @@ -0,0 +1,44 @@ +import { AtomLink } from '@juntossomosmais/atomium/react' +import { Meta, StoryObj } from '@storybook/react' + +import { LinkStoryArgs } from './link.args' + +export default { + title: 'Components/Link', + component: AtomLink, + ...LinkStoryArgs, +} as Meta + +const createLink = ( + args, + textExample = 'It should be used inside router components' +) => ( + + {textExample} + +) + +export const Primary: StoryObj = { + render: (args) => createLink(args), + args: { + type: 'anchor', + color: 'primary', + }, +} + +export const Secondary: StoryObj = { + render: (args) => createLink(args), + args: { + ...Primary.args, + color: 'secondary', + }, +} + +export const Button: StoryObj = { + render: (args) => + createLink(args, 'It should be used to trigger user actions'), + args: { + ...Primary.args, + type: 'button', + }, +} diff --git a/packages/core/src/components/link/stories/link.vue.stories.tsx b/packages/core/src/components/link/stories/link.vue.stories.tsx new file mode 100644 index 000000000..1eac1df9f --- /dev/null +++ b/packages/core/src/components/link/stories/link.vue.stories.tsx @@ -0,0 +1,50 @@ +import { AtomLink } from '@juntossomosmais/atomium/vue' +import { Meta, StoryObj } from '@storybook/vue3' + +import { LinkStoryArgs } from './link.args' + +const createLink = ( + args, + textExample = 'It should be used inside router components' +) => ({ + components: { AtomLink }, + setup() { + return { args } + }, + template: ` + + ${textExample} + + `, +}) + +export default { + title: 'Components/Link', + component: AtomLink, + ...LinkStoryArgs, +} as Meta + +export const Primary: StoryObj = { + render: (args) => createLink(args), + args: { + type: 'anchor', + color: 'primary', + }, +} + +export const Secondary: StoryObj = { + render: (args) => createLink(args), + args: { + ...Primary.args, + color: 'secondary', + }, +} + +export const Button: StoryObj = { + render: (args) => + createLink(args, 'It should be used to trigger user actions'), + args: { + ...Primary.args, + type: 'button', + }, +} From db953bb608177f40d228ccfcc9418bcdd2d39685 Mon Sep 17 00:00:00 2001 From: tassioFront Date: Tue, 30 Jul 2024 10:31:42 -0300 Subject: [PATCH 3/6] feat: improve stories --- .../src/components/link/stories/link.args.ts | 22 +++++++++- .../link/stories/link.core.stories.tsx | 15 ++++--- .../link/stories/link.react.stories.tsx | 27 ++++++++---- .../link/stories/link.vue.stories.tsx | 41 +++++++++++++++---- 4 files changed, 82 insertions(+), 23 deletions(-) diff --git a/packages/core/src/components/link/stories/link.args.ts b/packages/core/src/components/link/stories/link.args.ts index 1a07f4567..6599aa572 100644 --- a/packages/core/src/components/link/stories/link.args.ts +++ b/packages/core/src/components/link/stories/link.args.ts @@ -7,7 +7,7 @@ export const LinkStoryArgs = { docs: { description: { component: - 'Link components are link children styled components. They are used to navigate to different pages (when used inside router components, such as router-link(Vue) and Link(Next)) or used to trigger user actions.', + 'atom-link components are link children styled components. They are used to navigate to different pages (when used inside router components, such as router-link(Vue) and Link(Next)) or used to trigger user actions.', }, }, }, @@ -23,7 +23,25 @@ export const LinkStoryArgs = { options: ['anchor', 'button'], defaultValue: { summary: 'anchor' }, description: - 'The link type. Use anchor for navigation (combined with router-link or Link) and button for user actions.', + 'The atom-link type. Use anchor for navigation (combined with router-link or Link) and button for user actions.', }, }, } + +const LinkReactStoryArgs = JSON.parse(JSON.stringify(LinkStoryArgs)) + +LinkReactStoryArgs.parameters.docs.description.component = + 'atom-link components are link children styled components. They are used to navigate to different pages (when used inside Link(Next)) or used to trigger user actions.

OBS: Link (Next) component does not render a anchor tag by default, so you need to wrap it with a tag for semantic reasons. You can create a wrapper component on your project to do this.' + +LinkReactStoryArgs.argTypes.type.description = + 'The atom-link type. Use anchor for navigation (combined with Link) and button for user actions.' + +const LinkVueStoryArgs = JSON.parse(JSON.stringify(LinkStoryArgs)) + +LinkVueStoryArgs.parameters.docs.description.component = + 'atom-link components are link children styled components. They are used to navigate to different pages (when used inside router-link or NuxtLink or used to trigger user actions.' + +LinkVueStoryArgs.argTypes.type.description = + 'The atom-link type. Use anchor for navigation (combined with router-link or NuxtLink) and button for user actions.' + +export { LinkReactStoryArgs, LinkVueStoryArgs } diff --git a/packages/core/src/components/link/stories/link.core.stories.tsx b/packages/core/src/components/link/stories/link.core.stories.tsx index f50596b96..d4b14c244 100644 --- a/packages/core/src/components/link/stories/link.core.stories.tsx +++ b/packages/core/src/components/link/stories/link.core.stories.tsx @@ -13,9 +13,11 @@ const createLink = ( textExample = 'It should be used inside router components' ) => { return html` - - ${textExample} - + + + ${textExample} + + ` } @@ -36,8 +38,11 @@ export const Secondary: StoryObj = { } export const Button: StoryObj = { - render: (args) => - createLink(args, 'It should be used to trigger user actions'), + render: (args) => html` + + It is a button! and can be used to trigger user actions + + `, args: { ...Primary.args, type: 'button', diff --git a/packages/core/src/components/link/stories/link.react.stories.tsx b/packages/core/src/components/link/stories/link.react.stories.tsx index 84711fad0..81d16c57e 100644 --- a/packages/core/src/components/link/stories/link.react.stories.tsx +++ b/packages/core/src/components/link/stories/link.react.stories.tsx @@ -1,21 +1,29 @@ import { AtomLink } from '@juntossomosmais/atomium/react' import { Meta, StoryObj } from '@storybook/react' -import { LinkStoryArgs } from './link.args' +import { LinkReactStoryArgs } from './link.args' + +const Link = ({ children }) => { + return <>{children} +} export default { title: 'Components/Link', component: AtomLink, - ...LinkStoryArgs, + ...LinkReactStoryArgs, } as Meta const createLink = ( args, - textExample = 'It should be used inside router components' + textExample = 'It should be used inside Link (Next) component' ) => ( - - {textExample} - + + + + {textExample} + + + ) export const Primary: StoryObj = { @@ -35,8 +43,11 @@ export const Secondary: StoryObj = { } export const Button: StoryObj = { - render: (args) => - createLink(args, 'It should be used to trigger user actions'), + render: (args) => ( + + It is a button! and can be used to trigger user actions + + ), args: { ...Primary.args, type: 'button', diff --git a/packages/core/src/components/link/stories/link.vue.stories.tsx b/packages/core/src/components/link/stories/link.vue.stories.tsx index 1eac1df9f..a678f4af5 100644 --- a/packages/core/src/components/link/stories/link.vue.stories.tsx +++ b/packages/core/src/components/link/stories/link.vue.stories.tsx @@ -1,27 +1,43 @@ import { AtomLink } from '@juntossomosmais/atomium/vue' import { Meta, StoryObj } from '@storybook/vue3' +import { defineComponent, h } from 'vue' -import { LinkStoryArgs } from './link.args' +import { LinkVueStoryArgs } from './link.args' + +const RouterLink = defineComponent({ + name: 'RouterLink', + props: { + to: { + type: String, + required: false, + }, + }, + setup(props, { slots }) { + return () => h('div', slots.default()) + }, +}) const createLink = ( args, textExample = 'It should be used inside router components' ) => ({ - components: { AtomLink }, + components: { AtomLink, RouterLink }, setup() { return { args } }, template: ` - - ${textExample} - + + + ${textExample} + + `, }) export default { title: 'Components/Link', component: AtomLink, - ...LinkStoryArgs, + ...LinkVueStoryArgs, } as Meta export const Primary: StoryObj = { @@ -41,8 +57,17 @@ export const Secondary: StoryObj = { } export const Button: StoryObj = { - render: (args) => - createLink(args, 'It should be used to trigger user actions'), + render: (args) => ({ + components: { AtomLink }, + setup() { + return { args } + }, + template: ` + + It is a button! and can be used to trigger user actions + + `, + }), args: { ...Primary.args, type: 'button', From 6c309588e165abd9fc9f55f4feffe20bfb476914 Mon Sep 17 00:00:00 2001 From: tassioFront Date: Tue, 30 Jul 2024 11:17:51 -0300 Subject: [PATCH 4/6] feat: add stories with icons --- packages/core/src/components/link/link.scss | 4 ++- .../link/stories/link.core.stories.tsx | 15 +++++++++++ .../link/stories/link.react.stories.tsx | 18 ++++++++++++- .../link/stories/link.vue.stories.tsx | 27 ++++++++++++++++++- 4 files changed, 61 insertions(+), 3 deletions(-) diff --git a/packages/core/src/components/link/link.scss b/packages/core/src/components/link/link.scss index 1f46927a1..fea603c7d 100644 --- a/packages/core/src/components/link/link.scss +++ b/packages/core/src/components/link/link.scss @@ -5,12 +5,14 @@ } .atom-link { + align-items: center; cursor: pointer; + display: flex; font: var(--text-link-medium); + gap: var(--spacing-xxsmall); letter-spacing: var(--text-link-medium-letter); text-decoration: underline; - &[color='primary'] { color: var(--color-brand-primary-regular); } diff --git a/packages/core/src/components/link/stories/link.core.stories.tsx b/packages/core/src/components/link/stories/link.core.stories.tsx index d4b14c244..9402d2fff 100644 --- a/packages/core/src/components/link/stories/link.core.stories.tsx +++ b/packages/core/src/components/link/stories/link.core.stories.tsx @@ -37,6 +37,21 @@ export const Secondary: StoryObj = { }, } +export const WithIcon: StoryObj = { + render: (args) => html` + + + Nice example with icon + + + + `, + args: { + ...Primary.args, + color: 'secondary', + }, +} + export const Button: StoryObj = { render: (args) => html` diff --git a/packages/core/src/components/link/stories/link.react.stories.tsx b/packages/core/src/components/link/stories/link.react.stories.tsx index 81d16c57e..bcf526906 100644 --- a/packages/core/src/components/link/stories/link.react.stories.tsx +++ b/packages/core/src/components/link/stories/link.react.stories.tsx @@ -1,4 +1,4 @@ -import { AtomLink } from '@juntossomosmais/atomium/react' +import { AtomIcon, AtomLink } from '@juntossomosmais/atomium/react' import { Meta, StoryObj } from '@storybook/react' import { LinkReactStoryArgs } from './link.args' @@ -42,6 +42,22 @@ export const Secondary: StoryObj = { }, } +export const WithIcon: StoryObj = { + render: (args) => ( + + + + Nice example with icon + + + + + ), + args: { + ...Primary.args, + }, +} + export const Button: StoryObj = { render: (args) => ( diff --git a/packages/core/src/components/link/stories/link.vue.stories.tsx b/packages/core/src/components/link/stories/link.vue.stories.tsx index a678f4af5..450658bee 100644 --- a/packages/core/src/components/link/stories/link.vue.stories.tsx +++ b/packages/core/src/components/link/stories/link.vue.stories.tsx @@ -1,4 +1,4 @@ -import { AtomLink } from '@juntossomosmais/atomium/vue' +import { AtomIcon, AtomLink } from '@juntossomosmais/atomium/vue' import { Meta, StoryObj } from '@storybook/vue3' import { defineComponent, h } from 'vue' @@ -56,6 +56,31 @@ export const Secondary: StoryObj = { }, } +export const WithIcon: StoryObj = { + render: (args) => ({ + components: { AtomLink, AtomIcon }, + setup() { + return { args } + }, + template: ` + + + + Nice example with icon + + + + + `, + }), + args: { + ...Primary.args, + }, +} + export const Button: StoryObj = { render: (args) => ({ components: { AtomLink }, From 448e3e565480b742b44de148de2d378926e03a0a Mon Sep 17 00:00:00 2001 From: tassioFront Date: Tue, 30 Jul 2024 11:32:59 -0300 Subject: [PATCH 5/6] chore: remove unused tag from stories --- .../components/link/stories/link.react.stories.tsx | 2 +- .../src/components/link/stories/link.vue.stories.tsx | 12 +++++------- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/core/src/components/link/stories/link.react.stories.tsx b/packages/core/src/components/link/stories/link.react.stories.tsx index bcf526906..38b541c9c 100644 --- a/packages/core/src/components/link/stories/link.react.stories.tsx +++ b/packages/core/src/components/link/stories/link.react.stories.tsx @@ -47,7 +47,7 @@ export const WithIcon: StoryObj = { - Nice example with icon + Nice example with icon diff --git a/packages/core/src/components/link/stories/link.vue.stories.tsx b/packages/core/src/components/link/stories/link.vue.stories.tsx index 450658bee..970c37092 100644 --- a/packages/core/src/components/link/stories/link.vue.stories.tsx +++ b/packages/core/src/components/link/stories/link.vue.stories.tsx @@ -65,13 +65,11 @@ export const WithIcon: StoryObj = { template: ` - - Nice example with icon - - + Nice example with icon + `, From 9e1e0efa7ddf140adccfb3f3d46ae8284339730b Mon Sep 17 00:00:00 2001 From: tassioFront Date: Tue, 30 Jul 2024 12:08:15 -0300 Subject: [PATCH 6/6] feat: add relative to button case --- packages/core/src/components/link/link.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/core/src/components/link/link.scss b/packages/core/src/components/link/link.scss index fea603c7d..92ac73b1a 100644 --- a/packages/core/src/components/link/link.scss +++ b/packages/core/src/components/link/link.scss @@ -25,6 +25,7 @@ background: none; border: none; padding: 0; + position: relative; text-decoration: none; } }