feat: alert block component [SV-155]

[FRSgit]

Related issue

Closes https://vsf.atlassian.net/browse/SV-155

Scope of work

Block component source code has been added to the Alert page

Screenshots of visual changes

Alert page:

Blocks page:

Checklist

• Self code-reviewed
• Changes documented
• Semantic HTML
• SSR-friendly
• Caching friendly
• a11y for WCAG 2.0 AA
• examples created
• blocks created
• cypress tests created

[changeset-bot]

⚠️ No Changeset found

Latest commit: 81c2375

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[Szymon-dziewonski]

Great PR, I have only couple of questions not connected to code itself

I think alert component could be used in
NewsletterBox and OrderSummary since its used there, so we would have better maintaining possibilities, wdyt?

Is this Block Code button design comes from figma ?

[FRSgit]

@Szymon-dziewonski Good idea! Though I'm not sure how to implement it right now. If import Alert block-component in different block then it won't be a "copy-paste" solution "out of the box".

WDYT? (CC: @skirianov)

We had two ideas about working with this case:

• providing a downloadable ZIP file for any example that consists of more than a single component (ZIP would contain all of the necessary components//files),
• creating a CLI to do the downloading (maybe we could even prepare some kind of Vite/Webpack solution that could download missing files automatically).

But in any case - I'd do that as a separate step as we need to figure out the solution first

Is this Block Code button design comes from figma ?

Nope, it's my & @skirianov invention - what do you think, acceptable until SFUI gets migrated to new documentation?

[Szymon-dziewonski]

@FRSgit I would we could just point in docs that in source code is use Alert block component which can be found here , however it still does not solve copy paste solution. For me in perfect world would be 2 version of source code e.g NewsletterBox

1. with component <AlertBlockComponent> so it would work for people that copy paste but already have block alert copied as components, and also for readability so user would see from where it come, and how its connected to point 2
2. same source code but with upacked code from our block components

With this solution we would have easier maintainability and user could copy whole source code OR source code with componenten and change import for their needs

As for styling, I would go with darker green and rounded border (top-left, top-right), but can be like that as well

[FRSgit]

@Szymon-dziewonski yea, that solution would work as well - but I'd implement it in new docs rather then in vuepress. Don't want to waste time on something that should be removed 😄

BTW. @mattmaribojoc @skirianov @filrak do we any ETA on docs replacement for SFUI?

[sonarcloud]

[storefront-ui-vue] Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

100.0% Coverage
0.0% Duplication

The version of Java (11.0.20) you have used to run this analysis is deprecated and we will stop accepting it soon. Please update to at least Java 17.
Read more here

[sonarcloud]

[storefront-ui-react] Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
No Duplication information

The version of Java (11.0.20) you have used to run this analysis is deprecated and we will stop accepting it soon. Please update to at least Java 17.
Read more here

[skirianov]

@Szymon-dziewonski Good idea! Though I'm not sure how to implement it right now. If import Alert block-component in different block then it won't be a "copy-paste" solution "out of the box".

WDYT? (CC: @skirianov)

We had two ideas about working with this case:

• providing a downloadable ZIP file for any example that consists of more than a single component (ZIP would contain all of the necessary components//files),
• creating a CLI to do the downloading (maybe we could even prepare some kind of Vite/Webpack solution that could download missing files automatically).

But in any case - I'd do that as a separate step as we need to figure out the solution first

With regards to zip, I would personally go for the CLI (shadcn/ui is a great example), because working with zips sucks.

[FRSgit]

@skirianov yea, true! My main thought was - let's worry about that in a separate channel, not under this PR 😄