Merged in feat/new-rate-cards (pull request #1600)

feat(SW-1435): Added RateCard component to design system * feat(SW-1435): Added new component: RateCard to design system * feat: added reward night points rate card * fix: set svg icon color to "currentColor" to make them more reusable * fix: added click handler for info icon * fix: added selectedRate Approved-by: Arvid Norlin
2025-03-25 10:41:43 +00:00
parent fef3a785d0
commit 0e2192be0f
18 changed files with 1118 additions and 0 deletions
--- a/packages/design-system/lib/components/RateCard/rate-card.module.css
+++ b/packages/design-system/lib/components/RateCard/rate-card.module.css
@@ -0,0 +1,120 @@
+.rateCard {
+  background-color: var(--Scandic-Grey-00);
+  border-radius: var(--Corner-radius-md);
+}
+
+.banner {
+  background-color: var(--Surface-Brand-Primary-1-OnSurface-Accent);
+  border-top-left-radius: var(--Corner-radius-md);
+  border-top-right-radius: var(--Corner-radius-md);
+  text-align: center;
+  color: var(--Text-Inverted);
+  padding: var(--Space-x05) 0;
+  text-transform: none;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x1);
+
+  padding: var(--Space-x1) var(--Space-x15) var(--Space-x15);
+}
+
+.container > * {
+  padding-bottom: var(--Space-x1);
+  border-bottom: 2px solid var(--Neutral-Opacity-Black-5);
+}
+
+.container > :last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x05);
+}
+
+.rateRow {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: var(--Space-x1);
+}
+
+.highlightedRate {
+  color: var(--Surface-Brand-Primary-1-OnSurface-Accent);
+}
+
+.textSecondary {
+  color: var(--Text-Secondary);
+}
+
+.comparisonRate {
+  color: var(--Text-Secondary);
+  display: flex;
+  justify-content: flex-end;
+}
+
+.comparisonRate > p {
+  font-weight: var(--Font-weight-Regular);
+}
+
+.strikethrough {
+  text-decoration: line-through;
+}
+
+.approximateRate {
+  color: var(--Text-Secondary);
+  padding-top: var(--Space-x05);
+}
+
+.variant-regular {
+  background-color: var(--Scandic-Grey-00);
+}
+
+.pointsRow {
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x05);
+}
+
+.notEnoughPoints {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  gap: var(--Space-x05);
+}
+
+.variant-campaign {
+  background-color: var(--Surface-Brand-Primary-1-Default);
+}
+
+.variant-campaign .banner {
+  background-color: var(--Surface-Brand-Primary-1-OnSurface-Accent);
+}
+
+.variant-code {
+  background: var(--Surface-Feedback-Information);
+}
+
+.variant-code .banner {
+  background-color: var(--Surface-Feedback-Information-Accent);
+}
+
+.variant-points .banner {
+  background: var(--Surface-Brand-Primary-1-OnSurface-Accent-Secondary);
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+}
+
+.filledIcon {
+  display: flex;
+  align-items: center;
+  color: var(--Scandic-Blue-70);
+}