auro-badge: status and club badges

[Dayna-A]

Is your feature request related to a problem? Please describe.

The same customizations for our alaska tier badges, oneworld tier badges, Club 49 badge(new) , Lounge & Lounge+ badges(also new) are being done in many places across AsCom. The desire to keep those aligned between micro-sites is clear (designers are collaborating together to have their teams keep updating them to align).

Describe the solution you'd like

These custom badges to exist as 'themes' in the existing auro badge component so that we can all easily use the same badges for guest statuses and easily keep them aligned across our guest experiences.

Describe alternatives you've considered

• Our teams builds a web component in the component hangar for 'Guest badges' that is just a wrapper that implements standard auro-badge customizations for our alaska tier badges, oneworld tier badges, Club 49 badge(new) , Lounge & Lounge+

Club 49:

Figma for our current work:
https://www.figma.com/file/InsfVhuoqSJi85TXXfWykN/Lounge-In---Scan-entry?node-id=2654%3A8709&t=yakjPvJHZzgiXzgq-1
One place these customizations are already implemented by another team: [Awards balance box Hangar Component]
](https://components.alaskaair.com/catelog/demo/awards-balance-box)

[blackfalcon]

The easiest option I see here is extending the already in-use attributes (error, success, and advisory) to encompass these additional colors. The colors requested are part of the Auro Design Tokens, so there is no additional design work required.

What is the feedback from @leeejune and @jason-capsule42 ?

[leeejune]

It's a pretty easy add to Figma too, so I can add it if we add the attributes.

[Dayna-A]

@blackfalcon & @leeejune where would this sort of thing fall on the auro priority list? Do you have a rough timeline on when you might make it to this?

[blackfalcon]

@Dayna-A I have made a request to have this update prioritized.

[braven112]

I just tried to get started on this but I believe we are dependent on this issue being finished first. #29

We have a bunch of other work higher priority list but seems like a super simple update, outside of #29 needing to be finished first. Great candidate for open source contribution from anyone assuming we are going with @blackfalcon's approach above.

[Dayna-A]

Ok. would the 'alaska state' icon need adding to auro-icons first? Our team isn't quite ready to pull this in if it is via innersourcing so maybe keep us posted?

[blackfalcon]

We can add this as a feature enhancement to the overall Node 18 milestone. That I am not concerned with.

[braven112]

I have a draft PR for this change started. We have a few design tokens we need added as well as the Alaska State icon before we can merge.

#59

[andri]

Hello everyone. Here are the types of badges from JetStream that are being used in RAIN.

Elite status

MVP — #00436D
GOLD — 8F7B39
75K — #7E623D
100K — #7E623D
MM — #7B7B7B
2MM — #7B7B7B

Fare Classes

Saver — #E27A05
NonRev — #00ACC8

Oneworld Elite

Ruby — #9C305A
Sapphire —#10699C
Emerald — #0F8C4A

The ones in italic are similar to what already exists but with a slightly different label. Not sure what the best way to resolve that is.

JetStream Figma.

[braven112]

Thanks Andri! I'll include "auro" version of these badges and when we are ready for themeing on this repo we can introduce the "jetstream" themed versions.

[Dayna-A]

@braven112 @blackfalcon do you have any status updates on this?

[blackfalcon]

@Patrick-Daly-AA alerting you do this issue.

[braven112]

@braven112 @blackfalcon do you have any status updates on this?

We haven't made any additional progress this sprint. Are the lounge badges the ones you are specifically waiting for?

[Dayna-A]

@braven112 we are waiting on the Lounge, Tier and the Club 49 badges

[blackfalcon]

@Dayna-A I am taking this over as this has been sitting way too long. Sorry. I have a question though. There is a new color being requested that is not part of the current baseline brand colors. It's the #53b390 for loungePlus.

We have an existing color for var(--auro-color-state-success-100) (#69cf96) that is real close. In fact, it is AAA accessible with #222222 type inside of it. I Am curious if that would be a better alternative.

[blackfalcon]

Do we need a new color that has a 7% difference?

[Dayna-A]

I'm so sorry i don't get these notifications nicely for these repos. @blackfalcon That seems like a question for our loyalty branding group. Can we just add the existing branded colour for Lounge Plus?

[Dayna-A]

@blackfalcon I connected with our designers and they said it is fine to go with the existing colour. Sorry again for the delayed response. I have updated my GH notifications

[Dayna-A]

@braven112, @blackfalcon , @leeejune I'm sorry for missing the notification on this one back in September. Is there anything else we can do to support this? Would support for the 1 and two million miler badges be considered in here?

[blackfalcon]

@Dayna-A trying to get this back on track. Sorry for the very long wait on this.

[Dayna-A]

That's ok. Sorry to miss replying in a timely manner

[Dayna-A]

@blackfalcon bump

[braven112]

Closing this issue since we are breaking up this ask into multiple parts. #98 is a larger fix since it includes icons that aren't part of the repo for performance reason at the moment.

• auro-badge: oneworld badges #75
• auro-badge: lounge and tier badges #96
• auro-badge: set icon color from badge #98