feat(components): add alert component #1085

alizedebray · 2023-02-07T16:28:53Z

@oliverschuerch @gfellerph
I opened this PR as a draft so that we can discuss the following points:

Main question: Should we merge the new post-alert story with the existing alert story? If so, how?
With the development of the web component library we will often face this question in the future, thus now is a good time to choose a documentation architecture that takes this duality into account.
Subsidiary question: The post-alert documentation currently uses Stencil generated controls. In your opinion, is it good as is or would it be better to customize it?

update alert story

changeset-bot · 2023-02-07T16:28:57Z

🦋 Changeset detected

Latest commit: 227a511

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages

Name	Type
@swisspost/design-system-styles	Patch
@swisspost/design-system-documentation	Minor
@swisspost/design-system-components	Minor
@swisspost/design-system-components-angular	Patch
@swisspost/design-system-demo	Patch
@swisspost/internet-header	Patch
@swisspost/design-system-intranet-header	Patch
@swisspost/design-system-components-react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

swisspost-bot · 2023-02-07T16:33:16Z

Preview environment ready: https://preview-1085--swisspost-design-system-next.netlify.app
Preview environment ready: https://preview-1085--swisspost-web-frontend.netlify.app

sonarcloud · 2023-02-20T10:51:33Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
1 Code Smell

No Coverage information
0.0% Duplication

alizedebray · 2023-08-08T08:22:49Z

@oliverschuerch @gfellerph I opened this PR as a draft so that we can discuss the following points:

* **Main question:** Should we merge the new post-alert story with the existing alert story? If so, how?
  With the development of the web component library we will often face this question in the future, thus now is a good time to choose a documentation architecture that takes this duality into account.

* **Subsidiary question:** The post-alert documentation currently uses Stencil generated controls. In your opinion, is it good as is or would it be better to customize it?

Main answer: we decided to go with a single docs page and use tabs to show examples for standard HTML and Web Components. This PR is therefore blocked by the tabs PR #1181

Subsidiary answer: we decided to use Stencil generated controls and customize them if necessary

alizedebray · 2023-08-08T08:34:32Z

TODO:

Move stories to documentation-v7
Add stories to existing docs using tabs => blocked by feat(components): add post-tabs component #1181
Add snapshot tests
Add e2e tests

imagoiq

Several bugs or questions:

Bug on WebC variant, Icon is displayed above text, but main icon does not change.
On primary type, when we change the icon, the color is black instead of white. This a bug already present in the current version, but I'm wondering if this will be maybe fixed with the PR's about mask icon?
Standard HTML alert is not dismissable (or at least there is no control anymore). It makes sense according to the recommendation that you wrote on the docs, but then it should be deprecated no?

.changeset/sweet-singers-trade.md

imagoiq · 2023-09-27T07:44:41Z

packages/components/.eslintrc.json

@@ -35,9 +35,8 @@
      }
    ],
    "@stencil-community/strict-boolean-conditions": "off",
-    "@stencil-community/required-prefix": ["error", ["post"]],
+    "@stencil-community/required-prefix": ["error", ["post-"]],


Isn't is covered by another rule, the fact that web components should be named with a dash? At least the browser throw a DOMexception error with invalid name: https://webcomponents.guide/learn/components/naming-your-components/

Sure, but if you write postalert there is no error.

packages/components/src/components/post-alert/post-alert.scss

packages/documentation/src/stories/components/alert/alert.docs.mdx

imagoiq · 2023-09-27T08:10:57Z

packages/documentation/src/stories/components/alert/web-component/alert-dismiss.sample.ts

@@ -0,0 +1,3 @@
+const alert = document.getElementById('alertId') as HTMLPostAlertElement;
+
+alert.dismiss().then(() => {});


Suggested change

alert.dismiss().then(() => {});

alert.dismiss()

Nitpick: I'm not sure that it is necessary to show the then.

It is to highlight that the .dimiss() method returns a promise

packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts

packages/documentation/src/stories/components/alert/web-component/post-alert.styles.scss

packages/styles/src/components/alert.scss

packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts

Co-authored-by: Loïc Fürhoff <12294151+imagoiq@users.noreply.github.com>

…esign-system into 1006-component-alert

alizedebray · 2023-09-27T09:28:30Z

Several bugs or questions:

Bug on WebC variant, Icon is displayed above text, but main icon does not change.

On primary type, when we change the icon, the color is black instead of white. This a bug already present in the current version, but I'm wondering if this will be maybe fixed with the PR's about mask icon?

Standard HTML alert is not dismissable (or at least there is no control anymore). It makes sense according to the recommendation that you wrote on the docs, but then it should be deprecated no?

I should have wrote a comment about your first point: the placement of the post-icon into the alerts is handle in the PR chore(styles, docs): re-apply mask icon changes #1945. We should merge it first.
The black icons are a known limitation because we do not provide pi-* classes for white icons, project have to handle them by there own. This is also why we decided to moved to the mask-image icons.
I would probably not write a deprecation message in the docs as they are the "next" documentation. Maybe we can create a ticket to deprecate them in the demo, what do you think?

imagoiq

Looks good to me. Just fix the 3 code smells.

I would probably not write a deprecation message in the docs as they are the "next" documentation. Maybe we can create a ticket to deprecate them in the demo, what do you think?

Yes good idea.

sonarcloud · 2023-09-29T08:14:58Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
1 Code Smell

No Coverage information
0.0% Duplication

alizedebray · 2023-09-29T08:15:33Z

Ticket to deprecate dismissible HTML alerts: #2014

@gfellerph

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @swisspost/design-system-components@1.5.0 ### Minor Changes - Added the `post-tooltip` component. (by [@gfellerph](https://github.com/gfellerph) with [#1879](#1879)) - Created the web component variant for the alert component. (by [@alizedebray](https://github.com/alizedebray) with [#1085](#1085)) ### Patch Changes - Updated dependencies: - @swisspost/design-system-styles@6.4.1 ## @swisspost/internet-header@1.10.0 ### Minor Changes - Enabled nesting the header in a different scroll container than the `<body>` element. The header stickyness and logo animation logic will automatically attach to the nearest scrolling container instead of the document when nested in a container that has `overflow: auto | scroll` set. (by [@alizedebray](https://github.com/alizedebray) with [#1855](#1855)) - Added ability to toggle programmatically an overlay associated with a button using the `toggleOverlayById` method. (by [@imagoiq](https://github.com/imagoiq) with [#1838](#1838)) ### Patch Changes - Fixed an issue with custom configuration that was not applied when the prop "language" was not set on the internet header. (by [@alizedebray](https://github.com/alizedebray) with [#1855](#1855)) - Updated dependencies: - @swisspost/design-system-styles@6.4.1 ## @swisspost/design-system-intranet-header@5.0.1 ### Patch Changes - Removed bound between logo and language to allow any language to display the logo. (by [@imagoiq](https://github.com/imagoiq) with [#2009](#2009)) - Updated dependencies: - @swisspost/design-system-styles@6.4.1 ## @swisspost/design-system-styles@6.4.1 ### Patch Changes - Removed bound between logo and language to allow any language to display the logo. (by [@imagoiq](https://github.com/imagoiq) with [#2009](#2009)) - Reduced the gap between the alert body and action buttons. (by [@alizedebray](https://github.com/alizedebray) with [#1085](#1085)) - Removed duplicated close button on toast when using ngx-toastr programatically. (by [@imagoiq](https://github.com/imagoiq) with [#2011](#2011)) - Updated and added the gaps between the title and the link-list in the `.topic-teaser-content` class to comply with the figma design. (by [@b1aserlu](https://github.com/b1aserlu) with [#1927](#1927)) - Added missing pointer-events to allow a dismissible toast to be closed interactively. (by [@imagoiq](https://github.com/imagoiq) with [#2008](#2008)) - Updated icons to display as mask images, this way their color can be set by adjusting the CSS `background-color` property. (by [@alizedebray](https://github.com/alizedebray) with [#1945](#1945)) ## @swisspost/design-system-documentation@2.1.0 ### Minor Changes - Added the `post-tooltip` component. (by [@gfellerph](https://github.com/gfellerph) with [#1879](#1879)) - Integrated the google tag manager and the basic events (page_context, page_change) to the documentation. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#1951](#1951)) - Created the web component variant for the alert component. (by [@alizedebray](https://github.com/alizedebray) with [#1085](#1085)) ### Patch Changes - Used the post-icon component instead of `.pi` classes to display icons in stories. (by [@alizedebray](https://github.com/alizedebray) with [#1945](#1945)) - Added deprecation alerts for `.form-control-rg`, `.form-control-md`, `.form-select-rg` and `.form-select-md` form-control variants. (by [@b1aserlu](https://github.com/b1aserlu) with [#1882](#1882)) - Updated dependencies: - @swisspost/design-system-components@1.5.0 - @swisspost/design-system-styles@6.4.1 - @swisspost/internet-header@1.10.0 - @swisspost/design-system-components-react@1.0.18 ## @swisspost/design-system-components-angular@3.0.1 ### Patch Changes - Updated dependencies: - @swisspost/design-system-styles@6.4.1 ## @swisspost/design-system-components-react@1.0.18 ### Patch Changes - Updated dependencies: - @swisspost/design-system-components@1.5.0 ## @swisspost/design-system-demo@7.0.1 ### Patch Changes - Updated the installation intructions for the Intranet Header. (by [@alizedebray](https://github.com/alizedebray) with [#1942](#1942)) - Added deprecation alerts for `.form-control-rg`, `.form-control-md`, `.form-select-rg` and `.form-select-md` form-control variants. (by [@b1aserlu](https://github.com/b1aserlu) with [#1882](#1882)) - Fixed ngBootstrap documentation links. (by [@imagoiq](https://github.com/imagoiq) with [#1987](#1987)) - Updated dependencies: - @swisspost/design-system-intranet-header@5.0.1 - @swisspost/design-system-styles@6.4.1

feat(components): add alert component

7044f83

update alert story

alizedebray linked an issue Feb 7, 2023 that may be closed by this pull request

Component: Alert #1006

Closed

alizedebray and others added 4 commits February 8, 2023 14:50

feat(components): add alert close method

b79b33f

feat(components): fix pattern checker and corresponding tests

07160b1

Merge branch 'main' into 1006-component-alert

187459f

chore: update lockfile and add generated docs file

f89d587

gfellerph assigned imagoiq and alizedebray Jul 27, 2023

alizedebray added 7 commits September 11, 2023 12:07

Merge branch 'main' into 1006-component-alert

a360e1e

fix alert height

d0e4a3b

add host element

13a13ec

update story args

cf26081

use post-icons

6fe2cdb

refactor the post-alert component

7b742c6

Write post-alert docs

3bcdd59

imagoiq removed their assignment Sep 26, 2023

alizedebray added 7 commits September 26, 2023 11:47

Fix dismissible post-alert stories

afe108b

Adapt HTML alert

c1d63e5

Update snapshot tests

7c7e4be

Add snapshot tests

0be415e

Remove unnecessary function

5a7a161

Merge branch 'main' into 1006-component-alert

f4615c0

Update components.d.ts

4513ea4

alizedebray marked this pull request as ready for review September 26, 2023 16:30

alizedebray requested a review from b1aserlu as a code owner September 26, 2023 16:30

alizedebray requested review from imagoiq and removed request for oliverschuerch and imagoiq September 26, 2023 16:33

imagoiq suggested changes Sep 27, 2023

View reviewed changes

alizedebray and others added 9 commits September 27, 2023 10:32

Update .changeset/sweet-singers-trade.md

1f8299a

Co-authored-by: Loïc Fürhoff <12294151+imagoiq@users.noreply.github.com>

Update packages/components/src/components/post-alert/post-alert.scss

346f33b

Co-authored-by: Loïc Fürhoff <12294151+imagoiq@users.noreply.github.com>

Remove unnecessary styles

8282d83

Merge branch '1006-component-alert' of https://github.com/swisspost/d…

1019295

…esign-system into 1006-component-alert

Update MDN link label

def8fd1

Add description for alert's innerHTML control

06f45b1

Make the alert's dismissLabel control required

bc27af3

Add changeset for changes in the alert's gap

6d15b46

Merge branch 'main' into 1006-component-alert

0a97860

alizedebray requested a review from imagoiq September 27, 2023 09:29

Merge branch 'main' into 1006-component-alert

02cd74b

imagoiq approved these changes Sep 28, 2023

View reviewed changes

alizedebray added 4 commits September 28, 2023 15:38

Merge branch 'main' into 1006-component-alert

782fbc1

Add keys to JSX arrays

c079ddb

Add icon stories for HTML alerts

59b92cf

Update alert styles

227a511

alizedebray merged commit d487840 into main Sep 29, 2023
10 checks passed

alizedebray deleted the 1006-component-alert branch September 29, 2023 08:20

github-actions bot mentioned this pull request Sep 29, 2023

chore(changesets): 🦋📦 publish packages #1986

Merged

This was referenced Oct 2, 2023

Fix border color on invalid inputs #2017

Closed

Fix button snapshots #2020

Closed

imagoiq mentioned this pull request Oct 17, 2023

Alert snapshot: missing icons #2087

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(components): add alert component #1085

feat(components): add alert component #1085

alizedebray commented Feb 7, 2023

changeset-bot bot commented Feb 7, 2023 •

edited

swisspost-bot commented Feb 7, 2023 •

edited

sonarcloud bot commented Feb 20, 2023

alizedebray commented Aug 8, 2023

alizedebray commented Aug 8, 2023 •

edited

imagoiq left a comment

imagoiq Sep 27, 2023

alizedebray Sep 27, 2023

imagoiq Sep 27, 2023

alizedebray Sep 27, 2023

alizedebray commented Sep 27, 2023

imagoiq left a comment

sonarcloud bot commented Sep 29, 2023

alizedebray commented Sep 29, 2023

		@@ -0,0 +1,3 @@
		const alert = document.getElementById('alertId') as HTMLPostAlertElement;

		alert.dismiss().then(() => {});

feat(components): add alert component #1085

feat(components): add alert component #1085

Conversation

alizedebray commented Feb 7, 2023

changeset-bot bot commented Feb 7, 2023 • edited

🦋 Changeset detected

swisspost-bot commented Feb 7, 2023 • edited

sonarcloud bot commented Feb 20, 2023

alizedebray commented Aug 8, 2023

alizedebray commented Aug 8, 2023 • edited

imagoiq left a comment

Choose a reason for hiding this comment

imagoiq Sep 27, 2023

Choose a reason for hiding this comment

alizedebray Sep 27, 2023

Choose a reason for hiding this comment

imagoiq Sep 27, 2023

Choose a reason for hiding this comment

alizedebray Sep 27, 2023

Choose a reason for hiding this comment

alizedebray commented Sep 27, 2023

imagoiq left a comment

Choose a reason for hiding this comment

sonarcloud bot commented Sep 29, 2023

alizedebray commented Sep 29, 2023

changeset-bot bot commented Feb 7, 2023 •

edited

swisspost-bot commented Feb 7, 2023 •

edited

alizedebray commented Aug 8, 2023 •

edited