@ebrains/components 2.4.1 → 3.1.0

package/dist/collection/components/eds-steps/eds-steps.css

@@ -65,7 +65,7 @@ pre {
 .steps h5::before {
   content: counter(step);
   position: absolute;
-  left: -39px;
+  left: -40px;
   top: -2px;
   display: flex;
   align-items: center;
@@ -142,7 +142,7 @@ pre {
 }
 
 .text-default {
-  color: var(--black);
+  color: var(--brand-black);
 }
 
 .text-inverse {
@@ -150,11 +150,11 @@ pre {
 }
 
 .text-light {
-  color: var(--grey-700);
+  color: var(--grey-light);
 }
 
 .text-lighter {
-  color: var(--grey-600);
+  color: var(--grey-dark);
 }
 
 .w-full {
@@ -256,7 +256,7 @@ pre {
 }
 
 .bg-default {
-  background-color: var(--grey-200);
+  background-color: var(--grey-light);
 }
 
 .bg-inverse {
@@ -399,7 +399,7 @@ pre {
 }
 
 .horizontal-step.is-completed:not(:last-child)::after {
-  background-color: var(--green-500); /* green */
+  background-color: var(--brand-green-dark); /* green */
 }
 
 .step-indicator {
@@ -415,13 +415,13 @@ pre {
 }
 
 .horizontal-step.is-active .step-indicator {
-  border-color: var(--green-500); /* green */
-  background-color: var(--green-500);
+  border-color: var(--brand-green-dark); /* green */
+  background-color: var(--brand-green-dark);
   color: var(--white);
 }
 
 .horizontal-step.is-completed .step-indicator {
-  border-color: var(--green-500); /* green */
+  border-color: var(--brand-green-dark); /* green */
   background-color: var(--white);
 }
 
@@ -442,14 +442,23 @@ pre {
 }
 
 .horizontal-step.is-active .step-label {
-  color: var(--green-500);
+  color: var(--brand-green-dark);
 }
 
 .step-content {
-  padding: 2rem 0;
+  padding: 0.5rem 0;
   /* Align content to start under the first step indicator */
-  margin-left: calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem);
-  margin-right: calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem);
+  margin-left: calc((100% / var(--step-count, 1)) * 0.20 - 1.25rem);
+  margin-right: calc((100% / var(--step-count, 1)) * 0.20 - 1.25rem);
+}
+
+/* Adjust margins for larger screens (> 700px) */
+@media (min-width: 700px) {
+  .step-content {
+    padding: 1.5rem 0;
+    margin-left: calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem);
+    margin-right: calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem);
+  }
 }
 
 .opacity-50 {
@@ -458,6 +467,83 @@ pre {
 
 
 /* Cursor pointer only applies in linear mode via role="button" */
-.eds-steps__title[role="button"] { 
-  cursor: pointer; 
+.eds-steps__title[role="button"] {
+  cursor: pointer;
+}
+
+/* ============================================
+   BRAND THEME STYLES
+   ============================================ */
+
+/* Brand theme - Vertical steps */
+.theme-brand.steps h3::before,
+.theme-brand.steps h4::before,
+.theme-brand.steps h5::before {
+  background: var(--brand-green); /* #00FF9D */
+  color: var(--brand-black); /* #07140D */
+  border-color: var(--brand-green);
+  font-weight: 600;
+}
+
+/* Brand theme - Horizontal step indicators */
+.theme-brand .step-indicator {
+  background-color: var(--grey-light);
+}
+
+.theme-brand .horizontal-step.is-active .step-indicator {
+  border-color: var(--brand-green);
+  background-color: var(--brand-green);
+  color: var(--brand-black);
+}
+
+.theme-brand .horizontal-step.is-completed .step-indicator {
+  border-color: var(--brand-green);
+  background-color: var(--brand-green);
+  color: var(--brand-black);
+}
+
+.theme-brand .horizontal-step.is-completed:not(:last-child)::after {
+  background-color: var(--brand-green);
+}
+
+.theme-brand .horizontal-step.is-active .step-label {
+  color: var(--brand-black);
+  font-weight: 600;
+}
+
+.theme-brand .step-number {
+  font-weight: 600;
+}
+
+/* Default theme - explicitly define to ensure clarity */
+.theme-default.steps h3::before,
+.theme-default.steps h4::before,
+.theme-default.steps h5::before {
+  background: var(--grey-900);
+  color: #fff;
+  border-color: #ccc;
+}
+
+.theme-default .step-indicator {
+  background-color: white;
+  border-color: #e0e0e0;
+}
+
+.theme-default .horizontal-step.is-active .step-indicator {
+  border-color: var(--brand-green-dark);
+  background-color: var(--brand-green-dark);
+  color: var(--white);
+}
+
+.theme-default .horizontal-step.is-completed .step-indicator {
+  border-color: var(--brand-green-dark);
+  background-color: var(--white);
+}
+
+.theme-default .horizontal-step.is-completed:not(:last-child)::after {
+  background-color: var(--brand-green-dark);
+}
+
+.theme-default .horizontal-step.is-active .step-label {
+  color: var(--brand-green-dark);
 }

package/dist/collection/components/eds-steps/eds-steps.js

@@ -68,9 +68,11 @@ export class EdsSteps {
         this.steps = [];
         this.type = 'static';
         this.orientation = 'vertical';
+        this.theme = 'default';
         this.nextLabel = 'Next';
         this.backLabel = 'Back';
         this.finishLabel = 'Finish';
+        this.showFinish = true;
         this.disableNext = false;
         this.headingLevel = 'h4';
         this.collapsibleTitles = false;
@@ -191,27 +193,28 @@ export class EdsSteps {
     }
     render() {
         const steps = this.parsedSteps;
+        const themeClass = this.theme === 'brand' ? 'theme-brand' : 'theme-default';
         // Horizontal Linear
         if (this.type === 'linear' && this.orientation === 'horizontal') {
-            return (h("div", { class: "steps--horizontal", style: { '--step-count': steps.length.toString() } }, h("div", { class: "horizontal-indicators" }, steps.map((step, index) => this.renderHorizontalIndicator(step, index))), steps.map((step, index) => {
+            return (h("div", { class: `steps--horizontal ${themeClass}`, style: { '--step-count': steps.length.toString() } }, h("div", { class: "horizontal-indicators" }, steps.map((step, index) => this.renderHorizontalIndicator(step, index))), steps.map((step, index) => {
                 const isLast = index === steps.length - 1;
                 if (this.activeStep !== index) {
                     return null;
                 }
                 const marginClass = this.orientation === 'horizontal' ? 'mt-64' : 'mt-32';
-                return (h("div", { class: "step-content", key: index, id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "f-body-02 text-lighter", innerHTML: step.content })), h("div", { class: `flex items-center justify-between ${marginClass}` }, h("eds-button", { label: this.backLabel, intent: "ghost", icon: "chevron-left", iconPos: "left", iconSmall: true, onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small" }), h("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", iconSmall: true, onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: "small", class: index > 0 ? 'ml-8' : null })), h("slot", { name: `actions-${index}` })));
+                return (h("div", { class: "step-content", key: index, id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "f-body-02 text-lighter", innerHTML: step.content })), h("div", { class: `flex items-center justify-between ${marginClass}` }, h("eds-button", { label: this.backLabel, intent: "secondary", icon: "chevron-left", iconPos: "left", onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small" }), (!isLast || this.showFinish) && (h("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: "small", class: index > 0 ? 'ml-8' : null }))), h("slot", { name: `actions-${index}` })));
             })));
         }
         // Vertical Linear
         if (this.type === 'linear') {
-            return (h("div", { class: "steps" }, steps.map((step, index) => {
+            return (h("div", { class: `steps ${themeClass}` }, steps.map((step, index) => {
                 const isLast = index === steps.length - 1;
                 const marginClass = this.orientation === 'horizontal' ? 'mt-64' : 'mt-32';
-                return (h("div", { class: "step mb-16", key: index }, this.renderHeading(step.title, index), this.activeStep === index && (h("div", { class: "content grid gap-y-16", id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "my-16 f-body-02 text-lighter", innerHTML: step.content })), h("div", { class: `flex items-center justify-between ${marginClass}` }, h("eds-button", { label: this.backLabel, intent: "ghost", icon: "chevron-left", iconPos: "left", iconSmall: true, onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small" }), h("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", iconSmall: true, onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: "small", class: index > 0 ? 'ml-8' : null })), h("slot", { name: `actions-${index}` })))));
+                return (h("div", { class: "step mb-16", key: index }, this.renderHeading(step.title, index), this.activeStep === index && (h("div", { class: "content grid gap-y-16", id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "my-16 f-body-02 text-lighter", innerHTML: step.content })), h("div", { class: `flex items-center justify-between ${marginClass}` }, h("eds-button", { label: this.backLabel, intent: "secondary", icon: "chevron-left", iconPos: "left", onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small" }), (!isLast || this.showFinish) && (h("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: "small", class: index > 0 ? 'ml-8' : null }))), h("slot", { name: `actions-${index}` })))));
             })));
         }
         // Static
-        return (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step mb-16", key: index }, this.renderHeading(step.title, index), h("div", { class: "content", id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "f-body-02 text-lighter my-16", innerHTML: step.content }))))))));
+        return (h("div", { class: `steps ${themeClass}` }, steps.map((step, index) => (h("div", { class: "step mb-16", key: index }, this.renderHeading(step.title, index), h("div", { class: "content", id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "f-body-02 text-lighter my-16", innerHTML: step.content }))))))));
     }
     static get is() { return "eds-steps"; }
     static get encapsulation() { return "shadow"; }
@@ -236,7 +239,7 @@ export class EdsSteps {
                     "references": {
                         "Step": {
                             "location": "local",
-                            "path": "/Users/nigeor/Documents/Projects/EBRAINS/ebrains-ui-ecosystem/packages/components/src/components/eds-steps/eds-steps.tsx",
+                            "path": "/Users/nikolaosgeorgomanolis/Documents/EBRAINS/Projects/ebrains-ui-ecosystem/packages/components/src/components/eds-steps/eds-steps.tsx",
                             "id": "../../../packages/components/src/components/eds-steps/eds-steps.tsx::Step"
                         }
                     }
@@ -287,6 +290,24 @@ export class EdsSteps {
                 "reflect": false,
                 "defaultValue": "'vertical'"
             },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'brand'",
+                    "resolved": "\"brand\" | \"default\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual theme for the steps component.\n- 'default': Grey step circles with white text\n- 'brand': Brand green step circles with black text (CTA style)"
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
             "nextLabel": {
                 "type": "string",
                 "mutable": false,
@@ -341,6 +362,24 @@ export class EdsSteps {
                 "reflect": false,
                 "defaultValue": "'Finish'"
             },
+            "showFinish": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show or hide the finish button on the last step"
+                },
+                "attribute": "show-finish",
+                "reflect": false,
+                "defaultValue": "true"
+            },
             "disableNext": {
                 "type": "any",
                 "mutable": true,

package/dist/collection/components/eds-steps/eds-steps.stories.js

@@ -23,7 +23,7 @@ export default {
         headingLevel: {
             name: 'heading-level',
             control: { type: 'select' },
-            options: ['h3', 'h4', 'h5'],
+            options: ['h3', 'h4'],
             description: 'Semantic heading tag to render for each step title.'
         },
         nextLabel: {
@@ -38,9 +38,9 @@ export default {
             control: 'text',
             description: 'Label for the Finish button on the last step (linear mode).'
         },
-        disableNext: {
+        showFinish: {
             control: 'boolean',
-            description: 'Disables the Next/Finish button to block progression (linear mode).'
+            description: 'Show or hide the Finish button on the last step (linear mode). Default: true.'
         }
     },
     args: {
@@ -55,11 +55,12 @@ export default {
         nextLabel: 'Next',
         backLabel: 'Back',
         finishLabel: 'Finish',
-        disableNext: false
+        showFinish: true
     }
 };
 const renderSteps = (args) => {
-    const disableAttr = typeof args.disableNext === 'boolean' && args.disableNext ? ' disable-next' : '';
+    //const disableAttr = typeof args.disableNext === 'boolean' ? ` disable-next="${args.disableNext}"` : '';
+    const showFinishAttr = typeof args.showFinish === 'boolean' ? ` show-finish="${args.showFinish}"` : '';
     // orientation only matters in linear mode
     const orientationAttr = args.type === 'linear' && args.orientation ? ` orientation="${args.orientation}"` : '';
     return `
@@ -69,7 +70,7 @@ const renderSteps = (args) => {
       heading-level="${args.headingLevel}"
       next-label="${args.nextLabel}"
       back-label="${args.backLabel}"
-      finish-label="${args.finishLabel}"${disableAttr}${orientationAttr}
+      finish-label="${args.finishLabel}"${showFinishAttr}${orientationAttr}
     ></eds-steps>
   `;
 };
@@ -90,28 +91,3 @@ export const LinearHorizontal = {
     },
     render: (args) => renderSteps(args)
 };
-export const LinearBlocked = {
-    args: {
-        type: 'linear',
-        orientation: 'vertical',
-        disableNext: true
-    },
-    render: (args) => renderSteps(args)
-};
-export const CustomLabels = {
-    args: {
-        type: 'linear',
-        orientation: 'vertical',
-        nextLabel: 'Continue',
-        backLabel: 'Previous',
-        finishLabel: 'Create form'
-    },
-    render: (args) => renderSteps(args)
-};
-export const HeadingLevels = {
-    args: {
-        type: 'static',
-        headingLevel: 'h3'
-    },
-    render: (args) => renderSteps(args)
-};

package/dist/collection/components/eds-steps-v2/eds-steps-v2.css

@@ -142,7 +142,11 @@ pre {
 }
 
 .text-default {
-  color: var(--black);
+  color: var(--brand-black);
+}
+
+.text-accent {
+  color: var(--brand-green);
 }
 
 .text-inverse {
@@ -150,11 +154,11 @@ pre {
 }
 
 .text-light {
-  color: var(--grey-700);
+  color: var(--grey-light);
 }
 
 .text-lighter {
-  color: var(--grey-600);
+  color: var(--grey-dark);
 }
 
 .w-full {
@@ -207,7 +211,7 @@ pre {
 }
 
 .border-softer {
-  border: 2px solid rgba(0, 0, 0, .1);
+  border: none;
 }
 
 .relative {
@@ -240,7 +244,7 @@ pre {
 }
 
 .border-2 {
-  border-width: 2px;
+  border-width: 0;
 }
 
 .p-8 {
@@ -252,13 +256,17 @@ pre {
 }
 
 .bg-default {
-  background-color: var(--grey-200);
+  background-color: var(--grey-light);
 }
 
 .bg-inverse {
   background-color: var(--white);
 }
 
+.bg-strongest {
+  background-color: var(--brand-black);
+}
+
 .top-2 {
   top: 0.125rem;
 }
@@ -374,6 +382,12 @@ pre {
   padding: 1rem 0;
 }
 
+/* Helper class for aligning content with first step indicator */
+.step-content-aligned {
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .horizontal-step {
   display: flex;
   flex-direction: column;
@@ -388,15 +402,15 @@ pre {
   content: '';
   position: absolute;
   top: 1.25rem;
-  left: 50%;
-  width: 100%;
+  left: calc(50% + 2rem); /* Start after the circle */
+  width: calc(100% - 3rem); /* Width to reach next step with gap */
   height: 2px;
   background-color: #e0e0e0;
-  z-index: -1;
+  z-index: 1;
 }
 
 .horizontal-step.is-completed:not(:last-child)::after {
-  background-color: var(--green-500); /* green */
+  background-color: var(--brand-green); /* brand green */
 }
 
 .step-indicator {
@@ -413,13 +427,13 @@ pre {
 }
 
 .horizontal-step.is-active .step-indicator {
-  border-color: var(--green-500); /* green */
-  background-color: var(--green-500);
+  border-color: var(--brand-green-dark); /* green */
+  background-color: var(--brand-green-dark);
   color: var(--white);
 }
 
 .horizontal-step.is-completed .step-indicator {
-  border-color: var(--green-500); /* green */
+  border-color: var(--brand-green-dark); /* green */
   background-color: var(--white);
 }
 
@@ -440,16 +454,157 @@ pre {
 }
 
 .horizontal-step.is-active .step-label {
-  color: var(--green-500);
+  color: var(--brand-green-dark);
 }
 
 .step-content {
-  padding: 2rem 0;
+  padding: 0.5rem 0;
   /* Align content to start under the first step indicator */
-  margin-left: calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem);
-  margin-right: calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem);
+  margin-left: calc((100% / var(--step-count, 1)) * 0.20 - 1.25rem);
+  margin-right: calc((100% / var(--step-count, 1)) * 0.20 - 1.25rem);
+}
+
+/* Adjust margins for larger screens (> 700px) */
+@media (min-width: 700px) {
+  .step-content {
+    padding: 1.5rem 0;
+    margin-left: calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem);
+    margin-right: calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem);
+  }
 }
 
 .opacity-50 {
   opacity: 0.5;
+}
+
+.bg-dark {
+  background-color: var(--grey-light);
+}
+
+.bg-darker {
+  background-color: var(--grey-dark);
+}
+
+/* ============================================
+   BRAND THEME STYLES
+   ============================================ */
+
+/* Brand theme - Vertical steps */
+.theme-brand.steps h3::before,
+.theme-brand.steps h4::before,
+.theme-brand.steps h5::before {
+  background: var(--brand-green); /* #00FF9D */
+  color: var(--brand-black); /* #07140D */
+  border-color: var(--brand-green);
+  font-weight: 600;
+}
+
+/* Hide step number for completed steps in vertical mode */
+.theme-brand.steps h3.is-completed::before,
+.theme-brand.steps h4.is-completed::before,
+.theme-brand.steps h5.is-completed::before {
+  content: '';
+  /* Keep the circle background, just remove the number */
+}
+
+/* Position checkmark icon inside the ::before circle */
+.theme-brand.steps .step-checkmark-icon {
+  position: absolute;
+  left: -39px;
+  top: 0px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  z-index: 1;
+}
+
+.theme-brand.steps h3 .step-checkmark-icon {
+  left: -41px;
+  width: 32px;
+  height: 32px;
+  top: 2px;
+}
+
+/* Brand theme - Horizontal step indicators */
+.theme-brand .step-indicator {
+  background-color: var(--grey-light);
+}
+
+.theme-brand .horizontal-step.is-active .step-indicator {
+  border-color: var(--brand-green);
+  background-color: var(--brand-green);
+  color: var(--brand-black);
+}
+
+.theme-brand .horizontal-step.is-completed .step-indicator {
+  border-color: var(--brand-green);
+  background-color: var(--brand-green);
+  color: var(--brand-black);
+}
+
+/* Hide step number when completed (checkmark will show instead) */
+.theme-brand .horizontal-step.is-completed .step-number {
+  display: none;
+}
+
+.theme-brand .horizontal-step:not(:last-child)::after {
+  background-color: var(--grey-light); /* Default state */
+}
+
+.theme-brand .horizontal-step.is-completed:not(:last-child)::after {
+  background-color: var(--brand-green);
+}
+
+.theme-brand .horizontal-step.is-active .step-label {
+  color: var(--brand-black);
+  font-weight: 600;
+}
+
+.theme-brand .step-number {
+  font-weight: 600;
+}
+
+/* Default theme - explicitly define to ensure clarity */
+.theme-default.steps h3::before,
+.theme-default.steps h4::before,
+.theme-default.steps h5::before {
+  background: var(--grey-900);
+  color: #fff;
+  border-color: #ccc;
+}
+
+.theme-default .step-indicator {
+  background-color: white;
+  border-color: #e0e0e0;
+}
+
+.theme-default .horizontal-step.is-active .step-indicator {
+  border-color: var(--brand-green-dark);
+  background-color: var(--brand-green-dark);
+  color: var(--white);
+}
+
+.theme-default .horizontal-step.is-completed .step-indicator {
+  border-color: var(--brand-green-dark);
+  background-color: var(--white);
+}
+
+.theme-default .horizontal-step.is-completed:not(:last-child)::after {
+  background-color: var(--brand-green-dark);
+}
+
+.theme-default .horizontal-step.is-active .step-label {
+  color: var(--brand-green-dark);
+}
+
+.effect-focus-within {
+  outline-width: 3px;
+  outline-offset: 2px;
+  outline-color: var(--brand-green);
+}
+
+.effect-focus-within:focus-within {
+  outline-style: solid;
 }