Skip to content

Commit

Permalink
Merge branch 'main' into fix/tokens-letter-spacing-value
Browse files Browse the repository at this point in the history
  • Loading branch information
Natalie9 committed Aug 26, 2024
2 parents 40f063d + 4b93184 commit 0b4461f
Show file tree
Hide file tree
Showing 25 changed files with 898 additions and 19 deletions.
2 changes: 1 addition & 1 deletion .release-please-manifest.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"packages/core": "2.13.1",
"packages/core": "2.14.2",
"packages/tokens": "1.2.0"
}
2 changes: 1 addition & 1 deletion apps/docs-react/.storybook/preview.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { CustomViewports } from '@atomium/storybook-utils/custom-viewports'
import DocumentationTemplate from '@atomium/storybook-utils/DocumentationTemplate.mdx'
import DocumentationTemplate from '@atomium/storybook-utils/templates/DocumentationTemplate.mdx'

import '@atomium/storybook-utils/preview.css'

Expand Down
2 changes: 1 addition & 1 deletion apps/docs-vue/.storybook/preview.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { CustomViewports } from '@atomium/storybook-utils/custom-viewports'
import DocumentationTemplate from '@atomium/storybook-utils/DocumentationTemplate.mdx'
import DocumentationTemplate from '@atomium/storybook-utils/templates/DocumentationTemplate.mdx'

import '@atomium/storybook-utils/preview.css'

Expand Down
2 changes: 1 addition & 1 deletion apps/docs/.storybook/preview.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { defineCustomElements } from '@juntossomosmais/atomium/loader'

import { CustomViewports } from '@atomium/storybook-utils/custom-viewports'
import DocumentationTemplate from '@atomium/storybook-utils/DocumentationTemplate.mdx'
import DocumentationTemplate from '@atomium/storybook-utils/templates/DocumentationTemplate.mdx'

import '@atomium/storybook-utils/preview.css'

Expand Down
23 changes: 23 additions & 0 deletions packages/core/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,28 @@
# Changelog

## [2.14.2](https://github.com/juntossomosmais/atomium/compare/atomium-v2.14.1...atomium-v2.14.2) (2024-08-23)


### Bug Fixes

* **alert:** improve position of icon on single line ([#543](https://github.com/juntossomosmais/atomium/issues/543)) ([9c587d6](https://github.com/juntossomosmais/atomium/commit/9c587d6cbd7ab3e2cbe30502ec6a35cfe6ef873a))

## [2.14.1](https://github.com/juntossomosmais/atomium/compare/atomium-v2.14.0...atomium-v2.14.1) (2024-08-22)


### Bug Fixes

* **icons:** rename verified outline icon ([#540](https://github.com/juntossomosmais/atomium/issues/540)) ([57e3b51](https://github.com/juntossomosmais/atomium/commit/57e3b517f331fe31d9bab207dd13a6e033575765))
* **tag:** light tag color ([#542](https://github.com/juntossomosmais/atomium/issues/542)) ([c098357](https://github.com/juntossomosmais/atomium/commit/c098357e0cf1e4b7202febd0398f000a51c92cbc))

## [2.14.0](https://github.com/juntossomosmais/atomium/compare/atomium-v2.13.1...atomium-v2.14.0) (2024-08-16)


### Features

* **icons:** add verified icons ([#539](https://github.com/juntossomosmais/atomium/issues/539)) ([f04d310](https://github.com/juntossomosmais/atomium/commit/f04d310243aae09c2465aae04d10875dc7c4dfc7))
* **modal:** add modal component ([#534](https://github.com/juntossomosmais/atomium/issues/534)) ([f3fc1bb](https://github.com/juntossomosmais/atomium/commit/f3fc1bbe47362a88a0754324160f1e25f2fccc65))

## [2.13.1](https://github.com/juntossomosmais/atomium/compare/atomium-v2.13.0...atomium-v2.13.1) (2024-08-08)


Expand Down
2 changes: 1 addition & 1 deletion packages/core/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@juntossomosmais/atomium",
"version": "2.13.1",
"version": "2.14.2",
"description": "Core of web components for Atomium",
"repository": {
"type": "git",
Expand Down
63 changes: 61 additions & 2 deletions packages/core/src/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,10 @@ export namespace Components {
"disabled"?: boolean;
"download"?: string;
"expand"?: 'block';
"fill": 'clear' | 'outline' | 'outline-filled' | 'solid';
"fill": | 'clear'
| 'outline'
| 'outline-filled'
| 'solid';
"href"?: string;
"loading"?: boolean;
"mode": Mode;
Expand Down Expand Up @@ -154,6 +157,16 @@ export namespace Components {
}
interface AtomListSliderItem {
}
interface AtomModal {
"alertType"?: 'alert' | 'error';
"hasDivider"?: boolean;
"hasFooter"?: boolean;
"headerTitle"?: string;
"primaryText"?: string;
"progress"?: number;
"secondaryText"?: string;
"trigger"?: string;
}
interface AtomSelect {
"color"?: 'primary' | 'secondary' | 'danger';
"disabled"?: boolean;
Expand Down Expand Up @@ -260,6 +273,10 @@ export interface AtomListSliderCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLAtomListSliderElement;
}
export interface AtomModalCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLAtomModalElement;
}
export interface AtomSelectCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLAtomSelectElement;
Expand Down Expand Up @@ -430,6 +447,27 @@ declare global {
prototype: HTMLAtomListSliderItemElement;
new (): HTMLAtomListSliderItemElement;
};
interface HTMLAtomModalElementEventMap {
"atomCloseClick": any;
"atomDidDismiss": any;
"atomDidPresent": any;
"atomPrimaryClick": any;
"atomSecondaryClick": any;
}
interface HTMLAtomModalElement extends Components.AtomModal, HTMLStencilElement {
addEventListener<K extends keyof HTMLAtomModalElementEventMap>(type: K, listener: (this: HTMLAtomModalElement, ev: AtomModalCustomEvent<HTMLAtomModalElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener<K extends keyof HTMLAtomModalElementEventMap>(type: K, listener: (this: HTMLAtomModalElement, ev: AtomModalCustomEvent<HTMLAtomModalElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLAtomModalElement: {
prototype: HTMLAtomModalElement;
new (): HTMLAtomModalElement;
};
interface HTMLAtomSelectElementEventMap {
"atomBlur": void;
"atomCancel": void;
Expand Down Expand Up @@ -493,6 +531,7 @@ declare global {
"atom-link": HTMLAtomLinkElement;
"atom-list-slider": HTMLAtomListSliderElement;
"atom-list-slider-item": HTMLAtomListSliderItemElement;
"atom-modal": HTMLAtomModalElement;
"atom-select": HTMLAtomSelectElement;
"atom-tag": HTMLAtomTagElement;
"atom-textarea": HTMLAtomTextareaElement;
Expand Down Expand Up @@ -527,7 +566,10 @@ declare namespace LocalJSX {
"disabled"?: boolean;
"download"?: string;
"expand"?: 'block';
"fill"?: 'clear' | 'outline' | 'outline-filled' | 'solid';
"fill"?: | 'clear'
| 'outline'
| 'outline-filled'
| 'solid';
"href"?: string;
"loading"?: boolean;
"mode"?: Mode;
Expand Down Expand Up @@ -649,6 +691,21 @@ declare namespace LocalJSX {
}
interface AtomListSliderItem {
}
interface AtomModal {
"alertType"?: 'alert' | 'error';
"hasDivider"?: boolean;
"hasFooter"?: boolean;
"headerTitle"?: string;
"onAtomCloseClick"?: (event: AtomModalCustomEvent<any>) => void;
"onAtomDidDismiss"?: (event: AtomModalCustomEvent<any>) => void;
"onAtomDidPresent"?: (event: AtomModalCustomEvent<any>) => void;
"onAtomPrimaryClick"?: (event: AtomModalCustomEvent<any>) => void;
"onAtomSecondaryClick"?: (event: AtomModalCustomEvent<any>) => void;
"primaryText"?: string;
"progress"?: number;
"secondaryText"?: string;
"trigger"?: string;
}
interface AtomSelect {
"color"?: 'primary' | 'secondary' | 'danger';
"disabled"?: boolean;
Expand Down Expand Up @@ -752,6 +809,7 @@ declare namespace LocalJSX {
"atom-link": AtomLink;
"atom-list-slider": AtomListSlider;
"atom-list-slider-item": AtomListSliderItem;
"atom-modal": AtomModal;
"atom-select": AtomSelect;
"atom-tag": AtomTag;
"atom-textarea": AtomTextarea;
Expand All @@ -776,6 +834,7 @@ declare module "@stencil/core" {
"atom-link": LocalJSX.AtomLink & JSXBase.HTMLAttributes<HTMLAtomLinkElement>;
"atom-list-slider": LocalJSX.AtomListSlider & JSXBase.HTMLAttributes<HTMLAtomListSliderElement>;
"atom-list-slider-item": LocalJSX.AtomListSliderItem & JSXBase.HTMLAttributes<HTMLAtomListSliderItemElement>;
"atom-modal": LocalJSX.AtomModal & JSXBase.HTMLAttributes<HTMLAtomModalElement>;
"atom-select": LocalJSX.AtomSelect & JSXBase.HTMLAttributes<HTMLAtomSelectElement>;
"atom-tag": LocalJSX.AtomTag & JSXBase.HTMLAttributes<HTMLAtomTagElement>;
"atom-textarea": LocalJSX.AtomTextarea & JSXBase.HTMLAttributes<HTMLAtomTextareaElement>;
Expand Down
7 changes: 6 additions & 1 deletion packages/core/src/components/alert/alert.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
@import '~@atomium/scss-utils/index';

$min-height-title: var(--spacing-large);

:host {
--close-size: var(--spacing-xxxlarge);
--icon-size: var(--spacing-medium);
Expand Down Expand Up @@ -75,6 +77,7 @@
.atom-title {
font-weight: var(--font-weight-bold);
margin: 0;
min-height: $min-height-title;

&:not(:last-child) {
margin-bottom: var(--spacing-xsmall);
Expand Down Expand Up @@ -118,8 +121,10 @@
}

.atom-icon {
align-items: center;
display: flex;
font-size: var(--icon-size);
width: var(--space-large);
height: $min-height-title;
}

.atom-close {
Expand Down
10 changes: 5 additions & 5 deletions packages/core/src/components/button/button.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ describe('AtomButton', () => {
expect(page.root).toEqualHtml(`
<atom-button>
<mock:shadow-root>
<ion-button class="atom-button" color="primary" fill="solid" mode="md" shape="round" size="default" type="button">
<ion-button class="atom-button" color="primary" fill="solid" mode="md" part="button" shape="round" size="default" type="button">
<span class="slot">
<slot></slot>
</span>
Expand All @@ -47,7 +47,7 @@ describe('AtomButton', () => {
expect(page.root).toEqualHtml(`
<atom-button loading="true">
<mock:shadow-root>
<ion-button class="atom-button is-loading" color="primary" disabled="" fill="solid" mode="md" shape="round" size="default" type="button">
<ion-button class="atom-button is-loading" color="primary" disabled="" fill="solid" mode="md" part="button" shape="round" size="default" type="button">
<span class="loading">
<ion-spinner color="light"></ion-spinner>
</span>
Expand All @@ -69,7 +69,7 @@ describe('AtomButton', () => {
await page.waitForChanges()

expect(page.root?.shadowRoot).toEqualHtml(`
<ion-button class="atom-button is-loading" color="primary" disabled="" fill="outline" mode="md" shape="round" size="default" type="button">
<ion-button class="atom-button is-loading" color="primary" disabled="" fill="outline" mode="md" part="button" shape="round" size="default" type="button">
<span class="loading">
<ion-spinner color="primary"></ion-spinner>
</span>
Expand All @@ -89,7 +89,7 @@ describe('AtomButton', () => {
await page.waitForChanges()

expect(page.root?.shadowRoot).toEqualHtml(`
<ion-button class="atom-button" color="medium" disabled="" fill="solid" mode="md" shape="round" size="default" type="button">
<ion-button class="atom-button" color="medium" disabled="" fill="solid" mode="md" part="button" shape="round" size="default" type="button">
<span class="slot">
<slot></slot>
</span>
Expand All @@ -106,7 +106,7 @@ describe('AtomButton', () => {
await page.waitForChanges()

expect(page.root?.shadowRoot).toEqualHtml(`
<ion-button class="atom-button is-circle" color="primary" fill="solid" mode="md" shape="round" size="default" type="button">
<ion-button class="atom-button is-circle" color="primary" fill="solid" mode="md" part="button" shape="round" size="default" type="button">
<span class="slot">
<slot></slot>
</span>
Expand Down
7 changes: 6 additions & 1 deletion packages/core/src/components/button/button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,11 @@ export class AtomButton {
@Prop({ mutable: true }) disabled?: boolean
@Prop({ mutable: true }) download?: string
@Prop({ mutable: true }) expand?: 'block'
@Prop({ mutable: true }) fill: 'clear' | 'outline' | 'outline-filled' | 'solid' = 'solid'
@Prop({ mutable: true }) fill:
| 'clear'
| 'outline'
| 'outline-filled'
| 'solid' = 'solid'
@Prop({ mutable: true }) shape?: 'round' | 'circle' = 'round'
@Prop({ mutable: true }) href?: string
@Prop({ mutable: true }) loading?: boolean
Expand Down Expand Up @@ -89,6 +93,7 @@ export class AtomButton {
target={this.target}
download={this.download}
onClick={this.handleClick.bind(this)}
part='button'
>
{this.loading && (
<span class='loading'>
Expand Down
93 changes: 93 additions & 0 deletions packages/core/src/components/modal/modal.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
@import '~@atomium/scss-utils/index';

.atom-modal {
&__close {
position: absolute;
right: var(--spacing-small);
top: var(--spacing-small);
}

&__close-icon {
color: var(--color-neutral-regular);
font-size: var(--spacing-large);
}

&__content {
color: var(--color-neutral-light-1);
font: var(--text-body-medium);
height: 100%;
letter-spacing: var(--text-body-medium-letter);
padding: var(--spacing-large);
padding-top: 0;

&--divided {
border-bottom: 1px solid var(--color-neutral-light-3);
border-top: 1px solid var(--color-neutral-light-3);
padding-top: var(--spacing-large);
}
}

&__footer {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-medium);
justify-content: flex-end;
padding: var(--spacing-large);
}

&__header {
color: var(--color-neutral-light-1);
padding: var(--spacing-large);
position: relative;
}

&__icon-type {
font-size: var(--spacing-xxxxlarge);
margin-bottom: var(--spacing-large);

&--warning {
color: var(--color-contextual-warning-dark-1);
}

&--error {
color: var(--color-contextual-error-regular);
}
}

&__title,
&__header {
font: var(--title-headline-xsmall);
letter-spacing: var(--title-headline-xsmall-letter);
margin: 0;
}

&--progress {
.atom-modal__content--divided {
border-top: 0;
}
}

ion-progress-bar::part(track) {
background-color: var(--color-brand-primary-light-2);
}

@include below(small) {
&__btn-action {
width: 100%;

&::part(button) {
width: 100%;
}
}
}
}

ion-modal::part(content) {
--border-radius: 8px;
height: auto;

@include below(small) {
--border-radius: 0;
height: 100%;
}
}
Loading

0 comments on commit 0b4461f

Please sign in to comment.