From 128cf038b6ffc69368bacd763a4b79f70f002f65 Mon Sep 17 00:00:00 2001 From: denilsonrp Date: Wed, 28 Jun 2023 11:22:13 -0300 Subject: [PATCH 01/16] feat(breadcrumb): init new component --- .../src/components/breadcrumb/breadcrumb.scss | 21 ++++++++ .../components/breadcrumb/breadcrumb.spec.ts | 54 +++++++++++++++++++ .../src/components/breadcrumb/breadcrumb.tsx | 31 +++++++++++ .../breadcrumb/stories/breadcrumb.args.ts | 25 +++++++++ .../stories/breadcrumb.core.stories.tsx | 43 +++++++++++++++ .../stories/breadcrumb.react.stories.tsx | 37 +++++++++++++ 6 files changed, 211 insertions(+) create mode 100644 packages/core/src/components/breadcrumb/breadcrumb.scss create mode 100644 packages/core/src/components/breadcrumb/breadcrumb.spec.ts create mode 100644 packages/core/src/components/breadcrumb/breadcrumb.tsx create mode 100644 packages/core/src/components/breadcrumb/stories/breadcrumb.args.ts create mode 100644 packages/core/src/components/breadcrumb/stories/breadcrumb.core.stories.tsx create mode 100644 packages/core/src/components/breadcrumb/stories/breadcrumb.react.stories.tsx diff --git a/packages/core/src/components/breadcrumb/breadcrumb.scss b/packages/core/src/components/breadcrumb/breadcrumb.scss new file mode 100644 index 000000000..6dda08b25 --- /dev/null +++ b/packages/core/src/components/breadcrumb/breadcrumb.scss @@ -0,0 +1,21 @@ +.atom-breadcrumb { + --color: var(--color-brand-secondary-regular); + --color-active: var(--color-neutral-regular); + font: var(--text-body-small); + letter-spacing: var(--text-body-small-letter); + + &:not(:last-of-type) { + &::part(native) { + cursor: pointer; + } + } + + &::part(native) { + padding: 0; + } + + &::part(separator) { + color: var(--color-neutral-regular); + margin-inline: var(--spacing-xxsmall); + } +} diff --git a/packages/core/src/components/breadcrumb/breadcrumb.spec.ts b/packages/core/src/components/breadcrumb/breadcrumb.spec.ts new file mode 100644 index 000000000..b9dbeea9d --- /dev/null +++ b/packages/core/src/components/breadcrumb/breadcrumb.spec.ts @@ -0,0 +1,54 @@ +import { newSpecPage } from '@stencil/core/testing' + +import { AtomBreadcrumb } from './breadcrumb' + +const breadcrumbItemsMock = [ + { + text: 'First level', + title: 'Go to first level', + redirect: () => console.log('/first'), + }, + { + text: 'Intermediary level', + title: 'Go to intermediary level', + redirect: () => console.log('/intermediary'), + }, + { + text: 'Current level', + title: 'This is the current level', + }, +] + +describe('atom-breadcrumb', () => { + it('should render breadcrumb items correctly', async () => { + const page = await newSpecPage({ + components: [AtomBreadcrumb], + html: ``, + }) + + page.rootInstance.items = breadcrumbItemsMock + + await page.waitForChanges() + + expect(page.root).toEqualHtml(` + + + + + First level + + + + Intermediary level + + + + Current level + + + + + + `) + }) +}) diff --git a/packages/core/src/components/breadcrumb/breadcrumb.tsx b/packages/core/src/components/breadcrumb/breadcrumb.tsx new file mode 100644 index 000000000..ef8e3ce42 --- /dev/null +++ b/packages/core/src/components/breadcrumb/breadcrumb.tsx @@ -0,0 +1,31 @@ +import { Component, h, Host, Prop } from '@stencil/core' + +type BreadcrumbItemProp = { + redirect?: (event: MouseEvent) => void + text: string + title: string +} + +@Component({ + tag: 'atom-breadcrumb', + styleUrl: 'breadcrumb.scss', + shadow: true, +}) +export class AtomBreadcrumb { + @Prop({ mutable: true }) items: BreadcrumbItemProp[] = [] + + render() { + return ( + + + {this.items.map((item) => ( + + {item.text} + + + ))} + + + ) + } +} diff --git a/packages/core/src/components/breadcrumb/stories/breadcrumb.args.ts b/packages/core/src/components/breadcrumb/stories/breadcrumb.args.ts new file mode 100644 index 000000000..e94512111 --- /dev/null +++ b/packages/core/src/components/breadcrumb/stories/breadcrumb.args.ts @@ -0,0 +1,25 @@ +import { Category } from '@atomium/storybook-utils/enums/table' + +export const BreadcrumbStoryArgs = { + decorators: [], + parameters: { + actions: { + handles: [], + }, + docs: { + description: { + component: + 'Breadcrumbs are navigation items that are used to indicate where a user is on site. Read the [Ionic documentation](https://ionicframework.com/docs/api/breadcrumbs) for more information about this component.', + }, + }, + }, + argTypes: { + items: { + description: + 'This is the list of items that will be displayed in the breadcrumb. Items must have `title` and `text` and optionally a `redirect` function when clicking on the item.', + table: { + category: Category.PROPERTIES, + }, + }, + }, +} diff --git a/packages/core/src/components/breadcrumb/stories/breadcrumb.core.stories.tsx b/packages/core/src/components/breadcrumb/stories/breadcrumb.core.stories.tsx new file mode 100644 index 000000000..3b47fc2da --- /dev/null +++ b/packages/core/src/components/breadcrumb/stories/breadcrumb.core.stories.tsx @@ -0,0 +1,43 @@ +import { Meta, StoryObj } from '@storybook/web-components' + +import { html } from 'lit' + +import { BreadcrumbStoryArgs } from './breadcrumb.args' + +export default { + title: 'Components/Breadcrumb', + ...BreadcrumbStoryArgs, +} as Meta + +const createBreadcrumb = () => { + return html` + + + + ` +} + +export const Default: StoryObj = { + render: () => createBreadcrumb(), +} diff --git a/packages/core/src/components/breadcrumb/stories/breadcrumb.react.stories.tsx b/packages/core/src/components/breadcrumb/stories/breadcrumb.react.stories.tsx new file mode 100644 index 000000000..262551576 --- /dev/null +++ b/packages/core/src/components/breadcrumb/stories/breadcrumb.react.stories.tsx @@ -0,0 +1,37 @@ +import { Meta, StoryObj } from '@storybook/react' +import React from 'react' + +import { AtomBreadcrumb } from '@juntossomosmais/atomium/react' + +import { BreadcrumbStoryArgs } from './breadcrumb.args' + +export default { + title: 'Components/Breadcrumb', + ...BreadcrumbStoryArgs, +} as Meta + +const createBreadcrumb = (args) => ( + +) + +export const Default: StoryObj = { + render: (args) => createBreadcrumb(args), + args: { + items: [ + { + text: 'First level', + title: 'Go to first level', + redirect: () => console.log('/first'), + }, + { + text: 'Intermediary level', + title: 'Go to intermediary level', + redirect: () => console.log('/intermediary'), + }, + { + text: 'Current level', + title: 'This is the current level', + }, + ], + }, +} From 91322b8478f5a4fae84bbbc98ae62b074aebd66b Mon Sep 17 00:00:00 2001 From: denilsonrp Date: Wed, 28 Jun 2023 12:12:26 -0300 Subject: [PATCH 02/16] style(alert): fix css properties order --- packages/core/src/components/alert/alert.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/components/alert/alert.scss b/packages/core/src/components/alert/alert.scss index 054509d0e..43b30e229 100644 --- a/packages/core/src/components/alert/alert.scss +++ b/packages/core/src/components/alert/alert.scss @@ -7,8 +7,8 @@ } .atom-alert { - border-radius: var(--border-radius); border: 1px solid transparent; + border-radius: var(--border-radius); font: var(--text-body-medium); letter-spacing: var(--text-body-medium-letter); padding: var(--spacing-base); From dc5ab9d0a2cf8e13d453216a6d05400bc45257ce Mon Sep 17 00:00:00 2001 From: denilsonrp Date: Wed, 28 Jun 2023 12:48:39 -0300 Subject: [PATCH 03/16] test(breadcrumb): fix breadcrumb render test --- .../components/breadcrumb/breadcrumb.spec.ts | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/core/src/components/breadcrumb/breadcrumb.spec.ts b/packages/core/src/components/breadcrumb/breadcrumb.spec.ts index b9dbeea9d..1198f79bd 100644 --- a/packages/core/src/components/breadcrumb/breadcrumb.spec.ts +++ b/packages/core/src/components/breadcrumb/breadcrumb.spec.ts @@ -34,16 +34,22 @@ describe('atom-breadcrumb', () => { - - First level + + + First level + - - Intermediary level + + + Intermediary level + - - Current level + + + Current level + From 140ff0e444765bbce4afbb9f45ba3c612e3209c2 Mon Sep 17 00:00:00 2001 From: denilsonrp Date: Wed, 28 Jun 2023 15:09:29 -0300 Subject: [PATCH 04/16] feat(breadcrumb): add key to ion-breadcrumb --- packages/core/src/components/breadcrumb/breadcrumb.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/core/src/components/breadcrumb/breadcrumb.tsx b/packages/core/src/components/breadcrumb/breadcrumb.tsx index ef8e3ce42..24ab5dd7f 100644 --- a/packages/core/src/components/breadcrumb/breadcrumb.tsx +++ b/packages/core/src/components/breadcrumb/breadcrumb.tsx @@ -19,7 +19,11 @@ export class AtomBreadcrumb { {this.items.map((item) => ( - + {item.text} From 14be410f6739613db87f30005d5ccb2c0f5bb882 Mon Sep 17 00:00:00 2001 From: denilsonrp Date: Wed, 28 Jun 2023 15:10:13 -0300 Subject: [PATCH 05/16] feat(breadcrumb): change caret-forward icon to sharp --- packages/core/src/components/breadcrumb/breadcrumb.spec.ts | 6 +++--- packages/core/src/components/breadcrumb/breadcrumb.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/core/src/components/breadcrumb/breadcrumb.spec.ts b/packages/core/src/components/breadcrumb/breadcrumb.spec.ts index 1198f79bd..99095f5a7 100644 --- a/packages/core/src/components/breadcrumb/breadcrumb.spec.ts +++ b/packages/core/src/components/breadcrumb/breadcrumb.spec.ts @@ -38,19 +38,19 @@ describe('atom-breadcrumb', () => { First level - + Intermediary level - + Current level - + diff --git a/packages/core/src/components/breadcrumb/breadcrumb.tsx b/packages/core/src/components/breadcrumb/breadcrumb.tsx index 24ab5dd7f..7685b4ec8 100644 --- a/packages/core/src/components/breadcrumb/breadcrumb.tsx +++ b/packages/core/src/components/breadcrumb/breadcrumb.tsx @@ -25,7 +25,7 @@ export class AtomBreadcrumb { key={item.text} > {item.text} - + ))} From 102ae35c374389cd349b319dfc923ab6aae2db36 Mon Sep 17 00:00:00 2001 From: denilsonrp Date: Thu, 29 Jun 2023 21:24:33 -0300 Subject: [PATCH 06/16] style: add hover state --- packages/core/src/components/breadcrumb/breadcrumb.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/core/src/components/breadcrumb/breadcrumb.scss b/packages/core/src/components/breadcrumb/breadcrumb.scss index 6dda08b25..4b23a6b7d 100644 --- a/packages/core/src/components/breadcrumb/breadcrumb.scss +++ b/packages/core/src/components/breadcrumb/breadcrumb.scss @@ -7,6 +7,10 @@ &:not(:last-of-type) { &::part(native) { cursor: pointer; + + &:hover { + text-decoration: underline; + } } } From 89762a45d3064be4db669160d6002841ce12fe23 Mon Sep 17 00:00:00 2001 From: denilsonrp Date: Mon, 3 Jul 2023 10:57:43 -0300 Subject: [PATCH 07/16] style: use margin instead margin-inline --- packages/core/src/components/breadcrumb/breadcrumb.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/components/breadcrumb/breadcrumb.scss b/packages/core/src/components/breadcrumb/breadcrumb.scss index 4b23a6b7d..de1f7ceba 100644 --- a/packages/core/src/components/breadcrumb/breadcrumb.scss +++ b/packages/core/src/components/breadcrumb/breadcrumb.scss @@ -20,6 +20,6 @@ &::part(separator) { color: var(--color-neutral-regular); - margin-inline: var(--spacing-xxsmall); + margin: 0 var(--spacing-xxsmall); } } From cae5a9a0055e39e0fe1bfb6df1a3b612c847d7a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Matheus?= Date: Wed, 12 Jul 2023 10:48:09 -0300 Subject: [PATCH 08/16] chore(tokens): add rgb tokens (#181) Co-authored-by: Felipe Fialho --- packages/tokens/src/tokens.scss | 20 ++++++++++++++++++- packages/tokens/stories/4_Screens.stories.mdx | 2 +- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/packages/tokens/src/tokens.scss b/packages/tokens/src/tokens.scss index b6bf70243..de29d8ce3 100644 --- a/packages/tokens/src/tokens.scss +++ b/packages/tokens/src/tokens.scss @@ -41,40 +41,58 @@ --color-neutral-white-rgb: 255 255 255; --color-brand-primary-dark-1: #b85000; + --color-brand-primary-dark-1-rgb: 184 80 0; --color-brand-primary-regular: #ed6700; --color-brand-primary-regular-rgb: 237 103 0; --color-brand-primary-light-1: #ff913d; + --color-brand-primary-light-1-rgb: 255 145 61; --color-brand-primary-light-2: #fff3eb; + --color-brand-primary-light-2-rgb: 255 243 235; --color-brand-secondary-dark-1: #12579b; + --color-brand-secondary-dark-1-rgb: 18 87 155; --color-brand-secondary-regular: #1976d2; --color-brand-secondary-regular-rgb: 25 118 210; --color-brand-secondary-light-1: #4a9ff2; + --color-brand-secondary-light-1-rgb: 74 159 242; --color-brand-secondary-light-2: #e4f0fc; + --color-brand-secondary-light-2-rgb: 228 240 252; --color-contextual-error-dark-1: #b60000; + --color-contextual-error-dark-1-rgb: 182 0 0; --color-contextual-error-regular: #d60000; --color-contextual-error-regular-rgb: 214 0 0; --color-contextual-error-light-1: #ff0a0a; + --color-contextual-error-light-1-rgb: 255 10 10; --color-contextual-error-light-2: #ffebeb; + --color-contextual-error-light-2-rgb: 255 235 235; --color-contextual-success-dark-1: #106105; + --color-contextual-success-dark-1-rgb: 16 97 5; --color-contextual-success-regular: #168806; --color-contextual-success-regular-rgb: 22 136 6; --color-contextual-success-light-1: #26b413; + --color-contextual-success-light-1-rgb: 38 180 19; --color-contextual-success-light-2: #e4ffe0; + --color-contextual-success-light-2-rgb: 228 255 224; --color-contextual-warning-dark-1: #856900; + --color-contextual-warning-dark-1-rgb: 133 105 0; --color-contextual-warning-regular: #ffc900; --color-contextual-warning-regular-rgb: 255 201 0; --color-contextual-warning-light-1: #ffda52; + --color-contextual-warning-light-1-rgb: 255 218 82; --color-contextual-warning-light-2: #fff4cc; + --color-contextual-warning-light-2-rgb: 255 244 204; --color-contextual-info-dark-1: #0a6171; + --color-contextual-info-dark-1-rgb: 10 97 113; --color-contextual-info-regular: #0d8296; --color-contextual-info-regular-rgb: 13 130 150; --color-contextual-info-light-1: #10a2bc; + --color-contextual-info-light-1-rgb: 16 162 188; --color-contextual-info-light-2: #e3f9fd; + --color-contextual-info-light-2-rgb: 227 249 253; /* Fonts * ------------------------- */ @@ -139,7 +157,7 @@ --screen-xs: 576px; --screen-sm: 768px; --screen-md: 992px; - --screen-lg: 1280px; + --screen-lg: 1200px; --screen-xlg: 1440px; --screen-fhd: 1920px; --screen-2k: 2048px; diff --git a/packages/tokens/stories/4_Screens.stories.mdx b/packages/tokens/stories/4_Screens.stories.mdx index 2aa4043b6..e4cf32fed 100644 --- a/packages/tokens/stories/4_Screens.stories.mdx +++ b/packages/tokens/stories/4_Screens.stories.mdx @@ -21,7 +21,7 @@ All breakpoints used in our projects. | 576px | `var(--screen-xs)` | | 768px | `var(--screen-sm)` | | 992px | `var(--screen-md)` | -| 1280px | `var(--screen-lg)` | +| 1200px | `var(--screen-lg)` | | 1440px | `var(--screen-xlg)` | | 1920px | `var(--screen-fhd)` | | 2048px | `var(--screen-2k)` | From 2fde126f32fc421d03b80155faad010fb5460e61 Mon Sep 17 00:00:00 2001 From: Rodrigo Victor Date: Wed, 12 Jul 2023 11:07:16 -0300 Subject: [PATCH 09/16] chore(tokens): remove variable not used to remove sonar bug (#180) --- packages/tokens/scripts/generate-tokens.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tokens/scripts/generate-tokens.ts b/packages/tokens/scripts/generate-tokens.ts index 493457648..96277d61f 100644 --- a/packages/tokens/scripts/generate-tokens.ts +++ b/packages/tokens/scripts/generate-tokens.ts @@ -46,4 +46,4 @@ function processCssFileByTokenPrefix(cssFilePath: string) { generateJavaScriptFile(outputFilePath) } -export const generateTokens = processCssFileByTokenPrefix(TOKENS_DIR) +processCssFileByTokenPrefix(TOKENS_DIR) From fa90b1fe69b79f2a4651943b30461564dbb1068d Mon Sep 17 00:00:00 2001 From: denilsonrp Date: Wed, 12 Jul 2023 22:26:18 -0300 Subject: [PATCH 10/16] feat(breadcrumb): add back button to mobile version --- .../src/components/breadcrumb/breadcrumb.scss | 33 +++++++++++++++ .../components/breadcrumb/breadcrumb.spec.ts | 40 ++++++++++++++++--- .../src/components/breadcrumb/breadcrumb.tsx | 17 +++++++- 3 files changed, 83 insertions(+), 7 deletions(-) diff --git a/packages/core/src/components/breadcrumb/breadcrumb.scss b/packages/core/src/components/breadcrumb/breadcrumb.scss index de1f7ceba..e79e94522 100644 --- a/packages/core/src/components/breadcrumb/breadcrumb.scss +++ b/packages/core/src/components/breadcrumb/breadcrumb.scss @@ -1,3 +1,11 @@ +.atom-breadcrumbs { + display: none; + + @media screen and (min-width: 768px) { + display: flex; + } +} + .atom-breadcrumb { --color: var(--color-brand-secondary-regular); --color-active: var(--color-neutral-regular); @@ -12,6 +20,13 @@ text-decoration: underline; } } + + .atom-breadcrumb__text { + max-width: 100px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } } &::part(native) { @@ -23,3 +38,21 @@ margin: 0 var(--spacing-xxsmall); } } + +.atom-button__back { + align-items: center; + background-color: transparent; + border: 0; + color: var(--color-brand-secondary-regular); + cursor: pointer; + display: flex; + font: var(--text-link-small); + gap: var(--spacing-xsmall); + letter-spacing: var(--text-link-small-letter); + padding: 0; + text-decoration: underline; + + @media screen and (min-width: 768px) { + display: none; + } +} diff --git a/packages/core/src/components/breadcrumb/breadcrumb.spec.ts b/packages/core/src/components/breadcrumb/breadcrumb.spec.ts index 99095f5a7..92315b397 100644 --- a/packages/core/src/components/breadcrumb/breadcrumb.spec.ts +++ b/packages/core/src/components/breadcrumb/breadcrumb.spec.ts @@ -20,7 +20,7 @@ const breadcrumbItemsMock = [ ] describe('atom-breadcrumb', () => { - it('should render breadcrumb items correctly', async () => { + it('should render breadcrumb items and mobile back button correctly', async () => { const page = await newSpecPage({ components: [AtomBreadcrumb], html: ``, @@ -33,21 +33,25 @@ describe('atom-breadcrumb', () => { expect(page.root).toEqualHtml(` - + + - + First level - + Intermediary level - + Current level @@ -57,4 +61,30 @@ describe('atom-breadcrumb', () => { `) }) + + it('should not render mobile back button when only one breadcrumb item is sent as prop', async () => { + const page = await newSpecPage({ + components: [AtomBreadcrumb], + html: ``, + }) + + page.rootInstance.items = [breadcrumbItemsMock[0]] + + await page.waitForChanges() + + expect(page.root).toEqualHtml(` + + + + + + First level + + + + + + + `) + }) }) diff --git a/packages/core/src/components/breadcrumb/breadcrumb.tsx b/packages/core/src/components/breadcrumb/breadcrumb.tsx index 7685b4ec8..e1be9b2a7 100644 --- a/packages/core/src/components/breadcrumb/breadcrumb.tsx +++ b/packages/core/src/components/breadcrumb/breadcrumb.tsx @@ -17,14 +17,27 @@ export class AtomBreadcrumb { render() { return ( - + {this.items.length > 1 && ( + + )} + + {this.items.map((item) => ( - {item.text} + + {item.text} + ))} From 028b7366dc78b19070342f60e2028a29dbcce070 Mon Sep 17 00:00:00 2001 From: denilsonrp Date: Thu, 13 Jul 2023 10:10:38 -0300 Subject: [PATCH 11/16] fix(breadcrumb): use rupture syntax instead media --- packages/core/src/components/breadcrumb/breadcrumb.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/core/src/components/breadcrumb/breadcrumb.scss b/packages/core/src/components/breadcrumb/breadcrumb.scss index e79e94522..60bce3839 100644 --- a/packages/core/src/components/breadcrumb/breadcrumb.scss +++ b/packages/core/src/components/breadcrumb/breadcrumb.scss @@ -1,7 +1,9 @@ +@import '~@atomium/scss-utils/index'; + .atom-breadcrumbs { display: none; - @media screen and (min-width: 768px) { + @include above(medium) { display: flex; } } @@ -52,7 +54,7 @@ padding: 0; text-decoration: underline; - @media screen and (min-width: 768px) { + @include above(medium) { display: none; } } From 4fd5bbb7b90e55d052a725d4e339b9dce0e9600e Mon Sep 17 00:00:00 2001 From: denilsonrp Date: Fri, 14 Jul 2023 08:58:40 -0300 Subject: [PATCH 12/16] docs: add new ADR about use onclick in breadcrumb component --- ...-breadcrumb-component-event-undocumented.mdx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 apps/docs/stories/architecture-decision-records/0009-why-use-onclick-event-on-breadcrumb-component-event-undocumented.mdx diff --git a/apps/docs/stories/architecture-decision-records/0009-why-use-onclick-event-on-breadcrumb-component-event-undocumented.mdx b/apps/docs/stories/architecture-decision-records/0009-why-use-onclick-event-on-breadcrumb-component-event-undocumented.mdx new file mode 100644 index 000000000..c2ac33c96 --- /dev/null +++ b/apps/docs/stories/architecture-decision-records/0009-why-use-onclick-event-on-breadcrumb-component-event-undocumented.mdx @@ -0,0 +1,17 @@ +import { Meta } from '@storybook/addon-docs' + + + +# Why use `onClick` event on breadcrumb component even undocumented? + +🗓️ 2023-07 · ✍️ [@denilsonrp](https://github.com/denilsonrp) + +## Context + +In the [breadcrumb component's pull request](https://github.com/juntossomosmais/atomium/pull/163) a [doubt arose about the correct functioning of the `onClick` event](https://github.com/juntossomosmais/atomium/pull/163#discussion_r1250986555), as this event isn't documented in [ion-breadcrumb docs](https://ionicframework.com/docs/api/breadcrumb#events). + +## Decision + +We ran some tests on Atomium's breadcrumb component in order to ensure the correct firing of the event and even though the `onClick` event isn't documented in the events section of the [ion-breadcrumb docs](https://ionicframework.com/docs/api/breadcrumb#events), the tests were successful and the event fired correctly. + +Based on these tests, we can assume that, even without event documentation, it's possible to use it. The idea of ​​exposing this decision is to serve as a reference in possible similar scenarios in the future. From 89357e22deb270353302b69af3372f835dd521db Mon Sep 17 00:00:00 2001 From: denilsonrp Date: Tue, 18 Jul 2023 12:06:18 -0300 Subject: [PATCH 13/16] fix: rename ADR doc --- ...-event-on-breadcrumb-component-event-undocumented.stories.mdx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename apps/docs/stories/architecture-decision-records/{0009-why-use-onclick-event-on-breadcrumb-component-event-undocumented.mdx => 0009-why-use-onclick-event-on-breadcrumb-component-event-undocumented.stories.mdx} (100%) diff --git a/apps/docs/stories/architecture-decision-records/0009-why-use-onclick-event-on-breadcrumb-component-event-undocumented.mdx b/apps/docs/stories/architecture-decision-records/0009-why-use-onclick-event-on-breadcrumb-component-event-undocumented.stories.mdx similarity index 100% rename from apps/docs/stories/architecture-decision-records/0009-why-use-onclick-event-on-breadcrumb-component-event-undocumented.mdx rename to apps/docs/stories/architecture-decision-records/0009-why-use-onclick-event-on-breadcrumb-component-event-undocumented.stories.mdx From eaa3a392c2f87720aa09e279b8cef20b7b66c034 Mon Sep 17 00:00:00 2001 From: denilsonrp Date: Tue, 18 Jul 2023 16:16:53 -0300 Subject: [PATCH 14/16] fix(breadcrumb): use querySelectorAll to get all breadcrumbs in stories --- .../stories/breadcrumb.core.stories.tsx | 36 ++++++++++--------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/packages/core/src/components/breadcrumb/stories/breadcrumb.core.stories.tsx b/packages/core/src/components/breadcrumb/stories/breadcrumb.core.stories.tsx index 3b47fc2da..b8f0d3380 100644 --- a/packages/core/src/components/breadcrumb/stories/breadcrumb.core.stories.tsx +++ b/packages/core/src/components/breadcrumb/stories/breadcrumb.core.stories.tsx @@ -15,24 +15,26 @@ const createBreadcrumb = () => { ` From 893a9c49e9bf9bc6a73ce21948bd8b45ed045dfb Mon Sep 17 00:00:00 2001 From: denilsonrp Date: Tue, 18 Jul 2023 18:01:27 -0300 Subject: [PATCH 15/16] feat(breadcrumb): add previous item text to mobile back button --- packages/core/src/components/breadcrumb/breadcrumb.spec.ts | 2 +- packages/core/src/components/breadcrumb/breadcrumb.tsx | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/core/src/components/breadcrumb/breadcrumb.spec.ts b/packages/core/src/components/breadcrumb/breadcrumb.spec.ts index 92315b397..6e616fea2 100644 --- a/packages/core/src/components/breadcrumb/breadcrumb.spec.ts +++ b/packages/core/src/components/breadcrumb/breadcrumb.spec.ts @@ -35,7 +35,7 @@ describe('atom-breadcrumb', () => { diff --git a/packages/core/src/components/breadcrumb/breadcrumb.tsx b/packages/core/src/components/breadcrumb/breadcrumb.tsx index e1be9b2a7..2040bf795 100644 --- a/packages/core/src/components/breadcrumb/breadcrumb.tsx +++ b/packages/core/src/components/breadcrumb/breadcrumb.tsx @@ -15,16 +15,18 @@ export class AtomBreadcrumb { @Prop({ mutable: true }) items: BreadcrumbItemProp[] = [] render() { + const prevItem = this.items[this.items.length - 2] + return ( {this.items.length > 1 && ( )} From 914f54b91eb2f45d1adf56f5ca982ecd905d25cd Mon Sep 17 00:00:00 2001 From: denilsonrp Date: Tue, 18 Jul 2023 20:26:31 -0300 Subject: [PATCH 16/16] feat(breadcrumb): add svg icons --- .../core/src/components/breadcrumb/breadcrumb.spec.ts | 10 +++++----- packages/core/src/components/breadcrumb/breadcrumb.tsx | 4 ++-- packages/icons/svg/mdi/arrow-right.svg | 1 + packages/icons/svg/mdi/west.svg | 1 + 4 files changed, 9 insertions(+), 7 deletions(-) create mode 100644 packages/icons/svg/mdi/arrow-right.svg create mode 100644 packages/icons/svg/mdi/west.svg diff --git a/packages/core/src/components/breadcrumb/breadcrumb.spec.ts b/packages/core/src/components/breadcrumb/breadcrumb.spec.ts index 6e616fea2..370469f67 100644 --- a/packages/core/src/components/breadcrumb/breadcrumb.spec.ts +++ b/packages/core/src/components/breadcrumb/breadcrumb.spec.ts @@ -34,7 +34,7 @@ describe('atom-breadcrumb', () => { @@ -42,19 +42,19 @@ describe('atom-breadcrumb', () => { First level - + Intermediary level - + Current level - + @@ -80,7 +80,7 @@ describe('atom-breadcrumb', () => { First level - + diff --git a/packages/core/src/components/breadcrumb/breadcrumb.tsx b/packages/core/src/components/breadcrumb/breadcrumb.tsx index 2040bf795..85c2fe1ed 100644 --- a/packages/core/src/components/breadcrumb/breadcrumb.tsx +++ b/packages/core/src/components/breadcrumb/breadcrumb.tsx @@ -25,7 +25,7 @@ export class AtomBreadcrumb { type="button" onClick={prevItem.redirect} > - + Voltar para {prevItem.text} )} @@ -40,7 +40,7 @@ export class AtomBreadcrumb { {item.text} - + ))} diff --git a/packages/icons/svg/mdi/arrow-right.svg b/packages/icons/svg/mdi/arrow-right.svg new file mode 100644 index 000000000..cb91467f0 --- /dev/null +++ b/packages/icons/svg/mdi/arrow-right.svg @@ -0,0 +1 @@ + diff --git a/packages/icons/svg/mdi/west.svg b/packages/icons/svg/mdi/west.svg new file mode 100644 index 000000000..2633b747e --- /dev/null +++ b/packages/icons/svg/mdi/west.svg @@ -0,0 +1 @@ +