[component]: App store badge - Githubissues

swisspost / design-system

The Swiss Post Design System - for a consistent and accessible user experience across the web platform.

https://design-system.post.ch

Apache License 2.0

126 stars 14 forks source link

[component]: App store badge #3422

Closed Cian77 closed 1 month ago

Cian77 commented 3 months ago

Description

Create a CSS component for an app store badge.

Proposed markup

<a href="https://link-to-your.app" class="app-store-badge">
  <img src="/local-assets/google.png" alt="" />
  Download the Post App on Google Play
</a>

Size of the image should be defined
Projects need to provide the app store badge locally (because of localization and requirement to keep the badge up to date)
A descriptive text should be provided for the link

Open issues:

Design:

[x] Integrated new typography
[ ] Spacing is defined
[x] Documentation final

Tokens:

[x] Typography tokens ready

No response

Design

https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=1530-32646

Tokens

[x] Tokens for this component are ready

Tasks

### 💻 Tasks
- [x] Review Design (All states present? Possible to implement?)
- [x] Add tokens for height
- [x] HTML/CSS implementation
- [x] Documentation in Storybook
- [x] Write documentation about where to download the latest badge image assets
- [x] Visual regression tests
- [ ] Design review

Vandapanda commented 1 month ago

@alionazherdetska You can find the tokens now under Components/App store badge. There is no border radius for focus as its set to 6 right now while the normal component has 4. I assume it will just be handled like everything else and get the border radius from the component itself, if anything changes I'll message you