@ebrains/components 0.9.2-beta → 0.9.3-beta

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

@@ -0,0 +1,385 @@
+/*
+Remove the default font size and weight for headings.
+*/
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+.steps {
+  position: sticky;
+  margin-left: 16px;
+  border-left: 1px solid var(--soft-color, #ddd);
+  /* replace var() with your color if needed */
+  padding-left: 23px;
+  counter-reset: step;
+}
+
+/* Style for h3 headings inside the steps */
+.steps h3 {
+  counter-increment: step;
+  font-size: var(--f-heading-05-fontSize);
+  font-weight: var(--f-heading-05-fontWeight);
+  line-height: var(--f-heading-05-lineHeight);
+  position: relative;
+}
+
+.steps h3::before {
+  content: counter(step);
+  position: absolute;
+  left: -40px;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  font-size: 1rem;
+  border: 1px solid #ccc;
+  /* adjust border style as needed */
+  background: var(--grey-900);
+  /* adjust background color as needed */
+  color: #fff;
+  /* adjust text color as needed */
+  border-radius: 50%;
+}
+
+/* Style for h4 headings inside the steps */
+.steps h4 {
+  counter-increment: step;
+  font-size: var(--f-heading-06-fontSize);
+  font-weight: var(--f-heading-06-fontWeight);
+  line-height: var(--f-heading-06-lineHeight);
+  position: relative;
+}
+
+.steps h4::before {
+  content: counter(step);
+  position: absolute;
+  left: -40px;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  font-size: 0.875rem;
+  border: 1px solid #ccc;
+  background: #333;
+  color: #fff;
+  border-radius: 50%;
+}
+
+/* Style for blockquotes inside the steps */
+.steps blockquote {
+  margin-top: 16px;
+  margin-bottom: 16px;
+  font-style: italic;
+  color: #aaa;
+  padding-left: 6px;
+}
+
+.steps-img-placeholder {
+  width: 100%;
+  height: 200px;
+  /* Adjust the height as needed */
+  background: linear-gradient(to bottom, #9CE142, #00C959, #00A595);
+  /* 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));
+}
+
+.relative {
+  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);
+  font-size: var(--f-heading-04-fontSize);
+  line-height: var(--f-heading-04-lineHeight);
+  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);
+  font-size: var(--f-body-02-fontSize);
+  line-height: var(--f-body-02-lineHeight);
+  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);
+}
+
+.text-light {
+  color: var(--grey-700);
+}
+
+.text-lighter {
+  color: var(--grey-600);
+}
+
+.text-lightest {
+  color: var(--grey-500);
+}
+
+.w-full {
+  width: 100%;
+}
+
+.h-52 {
+  height: 3.25rem;
+}
+
+.h-96 {
+  height: 6rem;
+}
+
+.h-\[200px\] {
+  height: 200px;
+}
+
+.my-16 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.my-20 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
+.mt-16 {
+  margin-top: 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);
+}
+
+.relative {
+  position: relative;
+}
+
+.flex {
+  display: flex;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.grow {
+  flex-grow: 1;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.rounded-lg {
+  border-radius: 16px;
+}
+.rounded-t-lg {
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+}
+
+.border-2 {
+  border-width: 2px;
+}
+
+.p-8 {
+  padding: 0.5rem;
+}
+
+.p-16 {
+  padding: 1rem;
+}
+
+.p-24 {
+  padding: 1.5rem;
+}
+
+.p-48 {
+  padding: 3rem;
+}
+
+.bg-default {
+  background-color: var(--grey-200);
+}
+
+.bg-inverse {
+  background-color: var(--white);
+}
+
+.top-2 {
+  top: 0.125rem;
+}
+
+.bottom-2 {
+  bottom: 0.125rem;
+}
+
+.left-2 {
+  left: 0.125rem;
+}
+
+.right-2 {
+  right: 0.125rem;
+}
+
+.-translate-x-1\/2 {
+  --tw-translate-x: -50%;
+  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));
+}
+
+.-translate-y-1\/2 {
+  --tw-translate-y: -50%;
+  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  {
+  --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));
+}

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

@@ -0,0 +1,219 @@
+import { h } from "@stencil/core";
+import { parseData } from "../../utils/sharedUtils";
+export class EdsStepsV2 {
+    constructor() {
+        this.handleNext = () => {
+            this.activeStep = this.activeStep + 1;
+            if (this.activeStep < this.parsedSteps.length) {
+                this.step.emit(this.activeStep);
+            }
+        };
+        this.handleBack = () => {
+            if (this.activeStep > 0) {
+                this.activeStep = this.activeStep - 1;
+                this.step.emit(this.activeStep);
+            }
+        };
+        this.steps = [];
+        this.type = 'static';
+        this.imageSrc = undefined;
+        this.bg = true;
+        this.message = undefined;
+        this.activeStep = 0;
+    }
+    componentDidLoad() {
+        var _a;
+        if (this.type === 'linear') {
+            const btns = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('eds-button');
+            btns === null || btns === void 0 ? void 0 : btns.forEach((btn) => {
+                this.emitContext(btn);
+            });
+        }
+    }
+    activeStepChanged(newValue) {
+        setTimeout(() => {
+            var _a;
+            const activeStepContainer = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.step')[newValue];
+            if (activeStepContainer) {
+                const btns = activeStepContainer.querySelectorAll('eds-button');
+                btns.forEach((btn) => {
+                    this.emitContext(btn);
+                });
+            }
+        }, 50);
+    }
+    emitContext(linkElement) {
+        const event = new CustomEvent('parentContext', {
+            detail: {
+                componentName: this.el.tagName.toLowerCase(),
+                identifier: this.activeStep
+            }
+        });
+        linkElement.dispatchEvent(event);
+    }
+    articleClasses() {
+        return [
+            this.bg ? 'bg-inverse' : 'bg-default',
+            'border-softer effect-focus-within relative rounded-lg border-2'
+        ].join(' ');
+    }
+    handleStepClick(index) {
+        this.step.emit(index);
+        // In linear mode, update the active step on header click.
+        if (this.type === 'linear') {
+            this.activeStep = index;
+        }
+    }
+    /**
+     * Parses the steps property into an array of Step objects.
+     */
+    get parsedSteps() {
+        return parseData(this.steps);
+    }
+    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' })))))))) : (
+        // 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 }))))))))));
+    }
+    static get is() { return "eds-steps-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-steps-v2.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-steps-v2.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "steps": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Step[]",
+                    "resolved": "Step[] | string",
+                    "references": {
+                        "Step": {
+                            "location": "local",
+                            "path": "/Users/nigeor/Documents/Projects/EBRAINS/ebrains-ui-ecosystem/packages/components/src/shared-ui/eds-steps-v2/eds-steps-v2.tsx",
+                            "id": "../../../packages/components/src/shared-ui/eds-steps-v2/eds-steps-v2.tsx::Step"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "JSON string or an array of step objects.\nExample:\n'[\n  { \"title\": \"Step One\", \"content\": \"Details for step one\" },\n  { \"title\": \"Step Two\", \"content\": \"Details for step two\" }\n]'"
+                },
+                "attribute": "steps",
+                "reflect": false,
+                "defaultValue": "[]"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'static' | 'linear'",
+                    "resolved": "\"linear\" | \"static\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of stepper. Default is \"static\" (all steps visible, no navigation buttons).\nUse \"linear\" if only one step should be visible at a time."
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'static'"
+            },
+            "imageSrc": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional image source to display above the steps."
+                },
+                "attribute": "image-src",
+                "reflect": false
+            },
+            "bg": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, apply a background class to the container."
+                },
+                "attribute": "bg",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional message to display inside the placeholder if no image is provided."
+                },
+                "attribute": "message",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "activeStep": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "step",
+                "name": "step",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits when a step is clicked, providing the step's index."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "activeStep",
+                "methodName": "activeStepChanged"
+            }];
+    }
+}

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

@@ -0,0 +1,79 @@
+import { html } from "lit-html";
+export default {
+    title: 'Shared UI/Steps V2',
+    component: 'eds-steps-v2',
+    argTypes: {
+        steps: {
+            control: 'object',
+            description: 'Array of step objects',
+            defaultValue: [
+                { title: 'Step One', content: '<p>Details for step one.</p>' },
+                { title: 'Step Two', content: '<p>Details for step two.</p>' },
+                { title: 'Step Three', content: '<p>Details for step three.</p>' }
+            ]
+        },
+        type: {
+            control: 'select',
+            options: ['static', 'linear'],
+            description: 'Stepper type: static (all steps) or linear (one at a time)',
+            defaultValue: 'static'
+        },
+        imageSrc: {
+            control: 'text',
+            description: 'URL of the image to display above the steps'
+        },
+        bg: {
+            control: 'boolean',
+            description: 'Whether to apply inverse background to container',
+            defaultValue: true
+        },
+        message: {
+            control: 'text',
+            description: 'Message to display if no image is provided'
+        }
+    },
+    args: {
+        steps: [
+            { title: 'Step One', content: '<p>Details for step one.</p>' },
+            { title: 'Step Two', content: '<p>Details for step two.</p>' },
+            { title: 'Step Three', content: '<p>Details for step three.</p>' }
+        ],
+        type: 'static',
+        imageSrc: '',
+        bg: true,
+        message: 'No image available'
+    }
+};
+const Template = ({ steps, type, imageSrc, bg, message }) => html `
+  <div class="max-w-sidebar">
+    <eds-steps-v2 .steps=${steps} type="${type}" .imageSrc=${imageSrc} ?bg=${bg} message="${message}"></eds-steps-v2>
+  </div>
+`;
+export const Static = Template.bind({});
+Static.storyName = 'Static Steps';
+Static.args = {
+    type: 'static',
+    imageSrc: '',
+    message: ''
+};
+export const WithImage = Template.bind({});
+WithImage.storyName = 'With Image';
+WithImage.args = {
+    type: 'static',
+    imageSrc: 'https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg',
+    message: ''
+};
+export const WithMessage = Template.bind({});
+WithMessage.storyName = 'With Message';
+WithMessage.args = {
+    type: 'static',
+    imageSrc: '',
+    message: 'This is a fallback message when no image is provided.'
+};
+export const Linear = Template.bind({});
+Linear.storyName = 'Linear (One Step at a Time)';
+Linear.args = {
+    type: 'linear',
+    imageSrc: '',
+    message: ''
+};