✨ feat(progress): support brand colors

.changeset/soft-icons-jog.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': minor
+---
+
+**progress-bar**: add brand colors

.changeset/young-squids-shop.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': minor
+---
+
+**steps**: add brand colors

e2e/cypress/e2e/visual/bal-progress-bar.visual.cy.ts

@@ -11,6 +11,6 @@ describe('bal-progress-bar', () => {
   })
 
   it('component variants', () => {
-    cy.testVisual('progress-bar-variants-desktop')
+    cy.getByTestId('variants').testVisual('progress-bar-variants-desktop')
   })
 })

e2e/cypress/e2e/visual/bal-steps.visual.cy.ts

@@ -14,4 +14,13 @@ describe('bal-steps', () => {
     cy.getByTestId('steps').testVisual('tabs-steps-mobile')
     cy.getByTestId('steps-with-four').testVisual('tabs-steps-with-four-mobile')
   })
+
+  it('color variants', () => {
+    cy.platform('desktop')
+    cy.getByTestId('light-blue').testVisual('tabs-steps-color-light-blue')
+    cy.getByTestId('purple').testVisual('tabs-steps-color-purple')
+    cy.getByTestId('red').testVisual('tabs-steps-color-red')
+    cy.getByTestId('green').testVisual('tabs-steps-color-green')
+    cy.getByTestId('yellow').testVisual('tabs-steps-color-yellow')
+  })
 })

packages/core/src/components.d.ts

@@ -2547,9 +2547,13 @@ export namespace Components {
     }
     interface BalProgressBar {
         /**
-          * The shape color
+          * The background color
          */
         "background": BalProps.BalProgressBarBackground;
+        /**
+          * The progress bar color
+         */
+        "color": BalProps.BalProgressBarColor;
         "configChanged": (state: BalConfigState) => Promise<void>;
         /**
           * The value of the bar in percentage. So min is 0 and 100 would be the max value.
@@ -3074,6 +3078,10 @@ export namespace Components {
           * If `true` the tabs or steps can be clicked.
          */
         "clickable": boolean;
+        /**
+          * Defines the color of the steps so it can be placed on colored backgrounds
+         */
+        "color": BalProps.BalStepsColor;
         /**
           * Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
          */
@@ -7583,9 +7591,13 @@ declare namespace LocalJSX {
     }
     interface BalProgressBar {
         /**
-          * The shape color
+          * The background color
          */
         "background"?: BalProps.BalProgressBarBackground;
+        /**
+          * The progress bar color
+         */
+        "color"?: BalProps.BalProgressBarColor;
         /**
           * The value of the bar in percentage. So min is 0 and 100 would be the max value.
          */
@@ -8121,6 +8133,10 @@ declare namespace LocalJSX {
           * If `true` the tabs or steps can be clicked.
          */
         "clickable"?: boolean;
+        /**
+          * Defines the color of the steps so it can be placed on colored backgrounds
+         */
+        "color"?: BalProps.BalStepsColor;
         /**
           * Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
          */

packages/core/src/components/bal-progress-bar/bal-progress-bar.interfaces.ts

@@ -5,4 +5,5 @@
 
 namespace BalProps {
   export type BalProgressBarBackground = 'white' | 'grey'
+  export type BalProgressBarColor = 'primary' | 'purple' | 'yellow' | 'red' | 'green'
 }

packages/core/src/components/bal-progress-bar/bal-progress-bar.sass

@@ -12,11 +12,22 @@
   height: 0.25rem
   //
   // background colors
-  &--background-white
+  &--background-white-of-primary,
+  &--background-white-of-purple,
+  &--background-white-of-red,
+  &--background-white-of-green,
+  &--background-white-of-yellow
     background: var(--bal-progress-bar-background-white)
-  &--background-grey
+  &--background-grey-of-primary
     background: var(--bal-progress-bar-background-grey)
-
+  &--background-grey-of-purple
+    background: var(--bal-progress-bar-background-purple)
+  &--background-grey-of-red
+    background: var(--bal-progress-bar-background-red)
+  &--background-grey-of-green
+    background: var(--bal-progress-bar-background-green)
+  &--background-grey-of-yellow
+    background: var(--bal-progress-bar-background-yellow)
 // Progress Line
 // --------------------------------------------------
 
@@ -25,7 +36,7 @@
   display: block
   height: 0.25rem
   width: 0
-  background: var(--bal-progress-bar-line-background)
+  background: var(--bal-progress-bar-line-color-primary)
   border-top-right-radius: var(--bal-progress-bar-line-radius)
   border-bottom-right-radius: var(--bal-progress-bar-line-radius)
   &--animated
@@ -34,3 +45,11 @@
   &--full
     border-top-right-radius: 0
     border-bottom-right-radius: 0
+  &--color-purple
+    background: var(--bal-progress-bar-line-color-purple)
+  &--color-yellow
+    background: var(--bal-progress-bar-line-color-yellow)
+  &--color-red
+    background: var(--bal-progress-bar-line-color-red)
+  &--color-green
+    background: var(--bal-progress-bar-line-color-green)

packages/core/src/components/bal-progress-bar/bal-progress-bar.tsx

@@ -25,10 +25,15 @@ export class ProgressBar implements ComponentInterface, BalConfigObserver, BalBr
   @Prop() value = 0
 
   /**
-   * The shape color
+   * The background color
    */
   @Prop() background: BalProps.BalProgressBarBackground = 'white'
 
+  /**
+   * The progress bar color
+   */
+  @Prop() color: BalProps.BalProgressBarColor = 'primary'
+
   /**
    * LIFECYCLE
    * ------------------------------------------------------
@@ -87,12 +92,13 @@ export class ProgressBar implements ComponentInterface, BalConfigObserver, BalBr
         aria-hidden="true"
         class={{
           ...block.class(),
-          ...block.modifier(`background-${this.background}`).class(),
+          ...block.modifier(`background-${this.background}-of-${this.color}`).class(),
         }}
       >
         <div
           class={{
             ...bemLineEl.class(),
+            ...bemLineEl.modifier(`color-${this.color}`).class(),
             ...bemLineEl.modifier(`animated`).class(this.animated),
           }}
           ref={lineEl => (this.lineEl = lineEl)}

packages/core/src/components/bal-progress-bar/bal-progress-bar.vars.sass

@@ -8,6 +8,13 @@
 :root
   --bal-progress-bar-background-white: var(--bal-color-white)
   --bal-progress-bar-background-grey: var(--bal-color-grey-3)
-  --bal-progress-bar-line-background: var(--bal-color-primary)
+  --bal-progress-bar-background-purple: var(--bal-color-purple-2)
+  --bal-progress-bar-background-yellow: var(--bal-color-yellow-2)
+  --bal-progress-bar-background-red: var(--bal-color-red-2)
+  --bal-progress-bar-background-green: var(--bal-color-green-2)
+  --bal-progress-bar-line-color-primary: var(--bal-color-primary)
+  --bal-progress-bar-line-color-purple: var(--bal-color-purple-6)
+  --bal-progress-bar-line-color-yellow: var(--bal-color-yellow-6)
+  --bal-progress-bar-line-color-red: var(--bal-color-red-6)
+  --bal-progress-bar-line-color-green: var(--bal-color-green-6)
   --bal-progress-bar-line-radius: var(--bal-radius-rounded)
-

packages/core/src/components/bal-progress-bar/test/bal-progress-bar.visual.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html dir="ltr" lang="en">
+<html dir="ltr" lang="en" class="bg-green">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
@@ -12,6 +12,7 @@
   <body>
     <bal-doc-app>
       <main class="container py-medium">
+        <bal-heading>Basic</bal-heading>
         <section class="mb-medium">
           <bal-progress-bar id="progress" data-testid="basic" value="50"></bal-progress-bar>
 
@@ -26,14 +27,31 @@
           </script>
         </section>
 
-        <section class="mb-medium">
-          <bal-progress-bar value="0"></bal-progress-bar>
-          <bal-progress-bar background="grey" value="99"></bal-progress-bar>
-          <bal-progress-bar background="grey" value="100"></bal-progress-bar>
-        </section>
+        <bal-heading>Variants</bal-heading>
+        <section data-testid="variants">
+          <section class="mb-medium">
+            <bal-progress-bar value="0"></bal-progress-bar>
+            <bal-progress-bar background="grey" value="99"></bal-progress-bar>
+            <bal-progress-bar background="grey" value="100"></bal-progress-bar>
+          </section>
 
-        <section class="mb-medium">
-          <bal-progress-bar value="50" background="grey"></bal-progress-bar>
+          <section class="mb-medium">
+            <bal-progress-bar value="50" background="grey"></bal-progress-bar>
+          </section>
+
+          <section class="mb-medium flex gap-small flex-direction-column">
+            <bal-progress-bar value="50" color="purple"></bal-progress-bar>
+            <bal-progress-bar value="50" color="yellow"></bal-progress-bar>
+            <bal-progress-bar value="50" color="red"></bal-progress-bar>
+            <bal-progress-bar value="50" color="green"></bal-progress-bar>
+          </section>
+
+          <section class="mb-medium flex gap-small flex-direction-column">
+            <bal-progress-bar value="50" background="grey" color="purple"></bal-progress-bar>
+            <bal-progress-bar value="50" background="grey" color="yellow"></bal-progress-bar>
+            <bal-progress-bar value="50" background="grey" color="red"></bal-progress-bar>
+            <bal-progress-bar value="50" background="grey" color="green"></bal-progress-bar>
+          </section>
         </section>
       </main>
     </bal-doc-app>

packages/core/src/components/bal-steps/bal-steps.interfaces.ts

@@ -3,7 +3,9 @@
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path="../../interfaces.d.ts" />
 
-namespace BalProps {}
+namespace BalProps {
+  export type BalStepsColor = 'primary' | 'light-blue' | 'purple' | 'yellow' | 'red' | 'green'
+}
 
 namespace BalEvents {
   export interface BalStepsCustomEvent<T> extends CustomEvent<T> {

packages/core/src/components/bal-steps/bal-steps.tsx

@@ -54,6 +54,11 @@ export class Steps implements Loggable, BalMutationObserver, BalBreakpointObserv
    */
   @Prop() clickable = true
 
+  /**
+   * Defines the color of the steps so it can be placed on colored backgrounds
+   */
+  @Prop() color: BalProps.BalStepsColor = 'primary'
+
   /**
    * Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
    */
@@ -277,11 +282,13 @@ export class Steps implements Loggable, BalMutationObserver, BalBreakpointObserv
                   htmlRole={''}
                   class={{
                     ...bemStepsNav.element('carousel').element('item').class(),
+                    ...bemStepsNav.element('carousel').element('item').modifier(`color-${this.color}`).class(),
                     ...bemStepsNav.element('carousel').element('item').modifier('passed').class(step.passed),
                   }}
                 >
                   <StepButton
                     item={step}
+                    color={this.color}
                     isMobile={this.isMobile}
                     clickable={this.clickable && !step.disabled}
                     onSelectTab={this.onSelectTab}

packages/core/src/components/bal-steps/bal-steps.vars.sass

@@ -45,6 +45,18 @@
   --bal-steps-step-button-passed-background: var(--bal-form-field-control-border-color-active)
   --bal-steps-step-button-carousel-item-background-after: var(--bal-form-field-control-border-color)
   --bal-steps-step-button-carousel-item-passed-background-after: var(--bal-form-field-control-border-color-active)
+
+  --bal-steps-step-button-progress-line-background-light-blue: var(--bal-color-primary-2)
+  --bal-steps-step-button-passed-background-light-blue: var(--bal-color-primary)
+  --bal-steps-step-button-progress-line-background-purple: var(--bal-color-purple-2)
+  --bal-steps-step-button-passed-background-purple: var(--bal-color-primary)
+  --bal-steps-step-button-progress-line-background-green: var(--bal-color-green-2)
+  --bal-steps-step-button-passed-background-green: var(--bal-color-primary)
+  --bal-steps-step-button-progress-line-background-red: var(--bal-color-red-2)
+  --bal-steps-step-button-passed-background-red: var(--bal-color-primary)
+  --bal-steps-step-button-progress-line-background-yellow: var(--bal-color-yellow-2)
+  --bal-steps-step-button-passed-background-yellow: var(--bal-color-primary)
+
   //
   // border
   --bal-steps-step-border-width: var(--bal-form-field-control-border-width)

packages/core/src/components/bal-steps/components/step-button.sass

@@ -81,3 +81,91 @@
 
 .bal-steps__nav__carousel__item--passed:not(:last-child)::after
   background-color: var(--bal-steps-step-button-carousel-item-passed-background-after)
+
+// Color Variants
+// --------------------------------------------------
+
+.bal-steps__nav__carousel__item:not(:last-child)
+  &.bal-steps__nav__carousel__item--color-light-blue::after
+    background-color: var(--bal-steps-step-button-progress-line-background-light-blue)
+  &.bal-steps__nav__carousel__item--color-purple::after
+    background-color: var(--bal-steps-step-button-progress-line-background-purple)
+  &.bal-steps__nav__carousel__item--color-red::after
+    background-color: var(--bal-steps-step-button-progress-line-background-red)
+  &.bal-steps__nav__carousel__item--color-yellow::after
+    background-color: var(--bal-steps-step-button-progress-line-background-yellow)
+  &.bal-steps__nav__carousel__item--color-green::after
+    background-color: var(--bal-steps-step-button-progress-line-background-green)
+
+.bal-steps__nav__carousel__item--passed:not(:last-child)
+  &.bal-steps__nav__carousel__item--color-light-blue::after
+    background-color: var(--bal-steps-step-button-passed-background-light-blue)
+  &.bal-steps__nav__carousel__item--color-purple::after
+    background-color: var(--bal-steps-step-button-passed-background-purple)
+  &.bal-steps__nav__carousel__item--color-red::after
+    background-color: var(--bal-steps-step-button-passed-background-red)
+  &.bal-steps__nav__carousel__item--color-yellow::after
+    background-color: var(--bal-steps-step-button-passed-background-yellow)
+  &.bal-steps__nav__carousel__item--color-green::after
+    background-color: var(--bal-steps-step-button-passed-background-green)
+
+.bal-steps__nav__item--color-light-blue
+  &:not(.bal-steps__nav__item--active, .bal-steps__nav__item--done, .bal-steps__nav__item--failed, .bal-steps__nav__item--disabled)
+    .bal-steps__nav__item__icon
+      border-color: var(--bal-steps-step-button-progress-line-background-light-blue)
+  &.bal-steps__nav__item--disabled
+    .bal-steps__nav__item__icon
+      opacity: .6
+      background: var(--bal-steps-step-button-progress-line-background-light-blue)
+      border-color: var(--bal-steps-step-button-progress-line-background-light-blue)
+      color: var(--bal-color-primary-4)
+    .bal-steps__nav__item__label
+      opacity: .6
+
+.bal-steps__nav__item--color-purple
+  &:not(.bal-steps__nav__item--active, .bal-steps__nav__item--done, .bal-steps__nav__item--failed, .bal-steps__nav__item--disabled)
+    .bal-steps__nav__item__icon
+      border-color: var(--bal-steps-step-button-progress-line-background-purple)
+  &.bal-steps__nav__item--disabled
+    .bal-steps__nav__item__icon
+      opacity: .6
+      background: var(--bal-steps-step-button-progress-line-background-purple)
+      border-color: var(--bal-steps-step-button-progress-line-background-purple)
+    .bal-steps__nav__item__label
+      opacity: .6
+
+.bal-steps__nav__item--color-green
+  &:not(.bal-steps__nav__item--active, .bal-steps__nav__item--done, .bal-steps__nav__item--failed, .bal-steps__nav__item--disabled)
+    .bal-steps__nav__item__icon
+      border-color: var(--bal-steps-step-button-progress-line-background-green)
+  &.bal-steps__nav__item--disabled
+    .bal-steps__nav__item__icon
+      opacity: .6
+      background: var(--bal-steps-step-button-progress-line-background-green)
+      border-color: var(--bal-steps-step-button-progress-line-background-green)
+    .bal-steps__nav__item__label
+      opacity: .6
+
+.bal-steps__nav__item--color-yellow
+  &:not(.bal-steps__nav__item--active, .bal-steps__nav__item--done, .bal-steps__nav__item--failed, .bal-steps__nav__item--disabled)
+    .bal-steps__nav__item__icon
+      border-color: var(--bal-steps-step-button-progress-line-background-yellow)
+  &.bal-steps__nav__item--disabled
+    .bal-steps__nav__item__icon
+      opacity: .6
+      background: var(--bal-steps-step-button-progress-line-background-yellow)
+      border-color: var(--bal-steps-step-button-progress-line-background-yellow)
+    .bal-steps__nav__item__label
+      opacity: .6
+
+.bal-steps__nav__item--color-red
+  &:not(.bal-steps__nav__item--active, .bal-steps__nav__item--done, .bal-steps__nav__item--failed, .bal-steps__nav__item--disabled)
+    .bal-steps__nav__item__icon
+      border-color: var(--bal-steps-step-button-progress-line-background-red)
+  &.bal-steps__nav__item--disabled
+    .bal-steps__nav__item__icon
+      opacity: .6
+      background: var(--bal-steps-step-button-progress-line-background-red)
+      border-color: var(--bal-steps-step-button-progress-line-background-red)
+    .bal-steps__nav__item__label
+      opacity: .6