@ebrains/components 0.9.3-beta → 1.1.0

package/dist/collection/shared-ui/eds-steps-v2/eds-steps-v2.css

@@ -108,25 +108,6 @@ pre {
   /* Optionally add border, padding or any other styles */
 }
 
-.bg-gradient-to-b {
-  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
-}
-
-.from-\[\#9CE142\] {
-  --tw-gradient-from: #9CE142 var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(156 225 66 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-.via-\[\#00C959\] {
-  --tw-gradient-to: rgb(0 201 89 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), #00C959 var(--tw-gradient-via-position), var(--tw-gradient-to);
-}
-
-.to-\[\#00A595\] {
-  --tw-gradient-to: #00A595 var(--tw-gradient-to-position);
-}
-
 .bg-\[\#00A595\] {
   --tw-bg-opacity: 1;
   background-color: rgb(0 165 149 / var(--tw-bg-opacity));
@@ -136,22 +117,6 @@ pre {
   position: relative;
 }
 
-.f-heading-02 {
-  font-family: var(--f-heading-02-fontFamily);
-  font-weight: var(--f-heading-02-fontWeight);
-  font-size: var(--f-heading-02-fontSize);
-  line-height: var(--f-heading-02-lineHeight);
-  letter-spacing: var(--f-heading-02-letterSpacing);
-}
-
-.f-heading-03 {
-  font-family: var(--f-heading-03-fontFamily);
-  font-weight: var(--f-heading-03-fontWeight);
-  font-size: var(--f-heading-03-fontSize);
-  line-height: var(--f-heading-03-lineHeight);
-  letter-spacing: var(--f-heading-03-letterSpacing);
-}
-
 .f-heading-04 {
   font-family: var(--f-heading-04-fontFamily);
   font-weight: var(--f-heading-04-fontWeight);
@@ -160,30 +125,6 @@ pre {
   letter-spacing: var(--f-heading-04-letterSpacing);
 }
 
-.f-heading-05 {
-  font-family: var(--f-heading-05-fontFamily);
-  font-weight: var(--f-heading-05-fontWeight);
-  font-size: var(--f-heading-05-fontSize);
-  line-height: var(--f-heading-05-lineHeight);
-  letter-spacing: var(--f-heading-05-letterSpacing);
-}
-
-.f-heading-06 {
-  font-family: var(--f-heading-06-fontFamily);
-  font-weight: var(--f-heading-06-fontWeight);
-  font-size: var(--f-heading-06-fontSize);
-  line-height: var(--f-heading-06-lineHeight);
-  letter-spacing: var(--f-heading-06-letterSpacing);
-}
-
-.f-body-01 {
-  font-family: var(--f-body-01-fontFamily);
-  font-weight: var(--f-body-01-fontWeight);
-  font-size: var(--f-body-01-fontSize);
-  line-height: var(--f-body-01-lineHeight);
-  letter-spacing: var(--f-body-01-letterSpacing);
-}
-
 .f-body-02 {
   font-family: var(--f-body-02-fontFamily);
   font-weight: var(--f-body-02-fontWeight);
@@ -192,34 +133,6 @@ pre {
   letter-spacing: var(--f-body-02-letterSpacing);
 }
 
-.f-ui-01 {
-  font-family: var(--f-ui-01-fontFamily);
-  font-weight: var(--f-ui-01-fontWeight);
-  font-size: var(--f-ui-01-fontSize);
-  line-height: var(--f-ui-01-lineHeight);
-  letter-spacing: var(--f-ui-01-letterSpacing);
-}
-
-.bg-dark {
-  background-color: var(--grey-300);
-}
-
-.bg-strong {
-  background-color: var(--grey-700);
-}
-
-.text-default {
-  color: var(--black);
-}
-
-.text-error {
-  color: var(--red-700);
-}
-
-.text-extra-light {
-  color: var(--grey-300);
-}
-
 .text-inverse {
   color: var(--white);
 }
@@ -232,10 +145,6 @@ pre {
   color: var(--grey-600);
 }
 
-.text-lightest {
-  color: var(--grey-500);
-}
-
 .w-full {
   width: 100%;
 }
@@ -252,38 +161,27 @@ pre {
   height: 200px;
 }
 
-.my-16 {
+.mt-16 {
   margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-
-.my-20 {
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
 }
 
-.mt-16 {
+.my-16 {
   margin-top: 1rem;
+  margin-bottom: 1rem;
 }
-.mb-0 {
-  margin-bottom: 0rem;
-}
-.mb-10 {
-  margin-bottom: 0.625rem;
-}
+
 .mb-12 {
   margin-bottom: 0.75rem;
 }
 
-.mb-28 {
-  margin-bottom: 1.75rem;
-}
 .last\:mb-0:last-child {
   margin-bottom: 0rem;
 }
+
 .last\:mt-16:last-child {
   margin-top: 1rem;
 }
+
 .border-softer {
   border: 2px solid rgba(0, 0, 0, .1);
 }
@@ -311,6 +209,7 @@ pre {
 .rounded-lg {
   border-radius: 16px;
 }
+
 .rounded-t-lg {
   border-top-left-radius: 16px;
   border-top-right-radius: 16px;
@@ -324,18 +223,10 @@ pre {
   padding: 0.5rem;
 }
 
-.p-16 {
-  padding: 1rem;
-}
-
 .p-24 {
   padding: 1.5rem;
 }
 
-.p-48 {
-  padding: 3rem;
-}
-
 .bg-default {
   background-color: var(--grey-200);
 }
@@ -370,16 +261,18 @@ pre {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.bg-opacity-90 {
-  --tw-bg-opacity: 0.9;
-}
-
 .overflow-hidden {
   overflow: hidden;
 }
 
-.space-y-8  {
+.space-y-8 {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}
+
+.space-y-16 {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }

package/dist/collection/shared-ui/eds-steps-v2/eds-steps-v2.js

@@ -17,6 +17,7 @@ export class EdsStepsV2 {
         this.steps = [];
         this.type = 'static';
         this.imageSrc = undefined;
+        this.imageWidth = undefined;
         this.bg = true;
         this.message = undefined;
         this.activeStep = 0;
@@ -72,9 +73,9 @@ export class EdsStepsV2 {
     }
     render() {
         const steps = this.parsedSteps;
-        return (h("div", { key: 'e86620aed9aafbf0c8e0cde0230b2147df952379', class: this.articleClasses() }, this.imageSrc ? (h("div", { class: "w-full mb-12 rounded-t-lg overflow-hidden border-2" }, h("eds-img", { src: this.imageSrc, "with-bg": "true", "lazy-load": "true", alt: "Step illustration" }))) : (this.message && (h("div", { class: "w-full bg-[#00A595] rounded-t-lg border-2" }, h("div", { class: "p-24" }, h("span", { class: "text-inverse f-heading-04 " }, this.message))))), h("div", { key: '773e51621fbfbc7b828d196d1e64a9752d02e5a4', class: "p-8" }, this.type === 'linear' ? (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step space-y-8", key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), this.activeStep === index && (h("div", { class: "content" }, h("div", { class: "f-body-02 text-lighter mt-16", innerHTML: step.content }), h("eds-button", { label: index === steps.length - 1 ? 'Finish' : 'Continue', intent: "primary", class: "next-btn", onClick: this.handleNext }), h("eds-button", { label: "Back", intent: "ghostInverse", onClick: this.handleBack, disabled: index === 0, "extra-class": index === 0 ? 'hidden' : 'ml-8 block' })))))))) : (
+        return (h("div", { key: 'bbcec2dd9a5096eb0cecf0d413892e5708822f52', class: this.articleClasses() }, this.imageSrc ? (h("div", { class: "w-full mb-12 rounded-t-lg overflow-hidden border-2" }, h("eds-img", { src: this.imageSrc, width: this.imageWidth, "with-bg": "true", "lazy-load": "true", alt: "Step illustration" }))) : (this.message && (h("div", { class: "w-full bg-[#00A595] rounded-t-lg border-2" }, h("div", { class: "p-24" }, h("span", { class: "text-inverse f-heading-04 " }, this.message))))), h("div", { key: 'db0618aad7d5986fcb0889f1c439be73f83a00df', class: "p-8" }, this.type === 'linear' ? (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: index === 0 ? 'step' : 'step space-y-16', key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), this.activeStep === index && (h("div", { class: "content" }, h("slot", { name: `step-${index}` }, h("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16', innerHTML: step.content })), h("eds-button", { label: index === steps.length - 1 ? 'Finish' : 'Continue', intent: "primary", class: "next-btn", onClick: this.handleNext }), h("eds-button", { label: "Back", intent: "ghostInverse", onClick: this.handleBack, disabled: index === 0, "extra-class": index === 0 ? 'hidden' : 'ml-8 block' })))))))) : (
         // Static mode: show all steps with their content.
-        h("div", { class: "steps space-y-8" }, steps.map((step, index) => (h("div", { class: "step", key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), h("div", { class: "content" }, h("div", { class: "f-body-02 text-lighter mt-16", innerHTML: step.content }))))))))));
+        h("div", { class: "steps space-y-8" }, steps.map((step, index) => (h("div", { class: "step", key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), h("div", { class: "content" }, h("slot", { name: `step-${index}` }, h("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16', innerHTML: step.content })))))))))));
     }
     static get is() { return "eds-steps-v2"; }
     static get encapsulation() { return "shadow"; }
@@ -149,6 +150,23 @@ export class EdsStepsV2 {
                 "attribute": "image-src",
                 "reflect": false
             },
+            "imageWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional image width for the eds-img component."
+                },
+                "attribute": "image-width",
+                "reflect": false
+            },
             "bg": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/shared-ui/eds-steps-v2/eds-steps-v2.stories.js

@@ -1,6 +1,6 @@
 import { html } from "lit-html";
 export default {
-    title: 'Shared UI/Steps V2',
+    title: 'Shared Ui/Steps V2',
     component: 'eds-steps-v2',
     argTypes: {
         steps: {