@ebrains/components 2.1.0 → 2.3.0

package/dist/collection/shared-ui/eds-social-networks/eds-social-networks.css

@@ -42,30 +42,10 @@ menu {
     letter-spacing: var(--f-ui-02-letterSpacing);
 }
 
-.f-ui-02-light {
-    font-family: var(--f-ui-02-light-fontFamily);
-    font-weight: var(--f-ui-02-light-fontWeight);
-    font-size: var(--f-ui-02-light-fontSize);
-    line-height: var(--f-ui-02-light-lineHeight);
-    letter-spacing: var(--f-ui-02-light-letterSpacing);
-}
-
-.f-ui-03 {
-    font-family: var(--f-ui-03-fontFamily);
-    font-weight: var(--f-ui-03-fontWeight);
-    font-size: var(--f-ui-03-fontSize);
-    line-height: var(--f-ui-03-lineHeight);
-    letter-spacing: var(--f-ui-03-letterSpacing);
-}
-
 .mt-12 {
     margin-top: 0.75rem;
 }
 
-.mt-16 {
-    margin-top: 1rem;
-}
-
 .inline {
     display: inline;
 }

package/dist/collection/shared-ui/eds-social-networks/eds-social-networks.js

@@ -49,11 +49,9 @@ export class EdsSocialNetworks {
     /**
      * Renders the component's HTML structure with links to EBRAINS social profiles.
      * Each social network link uses the `eds-link` component with specific classes and styles.
-     *
-     * @returns {JSX.Element} The rendered JSX for the component.
      */
     render() {
-        return (h("div", { key: '7241de6d0a20687523e17a4455dff1dfac59a191' }, h("p", { key: '8292c0dde1b3518ada53dddc2ea0134ff3035e83', class: "f-ui-02" }, this.heading), h("ul", { key: 'b30922e6d1f51a52300c889464824fafad775f74', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: true, "aria-label": network.label, url: network.url, icon: network.icon, intent: "strong" })))))));
+        return (h("nav", { key: '907adc08d4e02f34994a057146a60b734d6ab81b', "aria-label": "Social media" }, h("p", { key: 'a3620851f2e31d662a812ac74e831f023d2646a4', class: "f-ui-02" }, this.heading), h("ul", { key: 'b8fece03b5ed995a9dba78cf0445a4eb46787bdc', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: true, "aria-label": `EBRAINS on ${network.label}`, url: network.url, icon: network.icon, intent: "strong" })))))));
     }
     static get is() { return "eds-social-networks"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/shared-ui/eds-social-networks/eds-social-networks.stories.js

@@ -4,18 +4,17 @@ export default {
     argTypes: {
         title: {
             control: 'text',
-            defaultValue: 'Follow EBRAINS to keep up-to-date'
+            defaultValue: 'Follow EBRAINS to keep up-to-date',
+            description: 'Custom title to display above the social network links'
         }
     }
 };
 const Template = (args) => `
-    <eds-social-networks title="${args.title}"></eds-social-networks>
-  `;
+  <eds-social-networks
+    title="${args.title}"
+  ></eds-social-networks>
+`;
 export const Default = Template.bind({});
 Default.args = {
     title: 'Follow EBRAINS to keep up-to-date'
 };
-export const CustomTitle = Template.bind({});
-CustomTitle.args = {
-    title: 'Stay Connected with EBRAINS!'
-};

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

@@ -1,93 +1,139 @@
 .steps {
-    position: sticky;
-    margin-left: 16px;
-    margin-bottom: 12px;
-    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;
-  }
-
-  .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);
-  }
-
-  .text-light {
-    color: var(--grey-700);
-  }
-  .text-lighter {
-    color: var(--grey-600);
-  }
- 
-  .my-16 {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-  }
-
-  .mb-28 {
-    margin-bottom: 1.75rem;
-  }
+  position: sticky;
+  margin-left: 16px;
+  margin-bottom: 12px;
+  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: -2px;
+  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,
+.steps h5 {
+  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,
+.steps h5::before {
+  content: counter(step);
+  position: absolute;
+  left: -40px;
+  top: -2px;
+  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;
+}
+
+.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);
+}
+
+.text-light {
+  color: var(--grey-700);
+}
+
+.text-lighter {
+  color: var(--grey-600);
+}
+
+.my-16 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.mt-16 {
+  margin-top: 1rem;
+}
+
+.mb-28 {
+  margin-bottom: 1.75rem;
+}
+
+.ml-8 {
+  margin-left: 0.5rem;
+}
+
+.gap-y-16 {
+  row-gap: 1rem;
+}
+
+.gap-x-16 {
+  -moz-column-gap: 1rem;
+  column-gap: 1rem;
+}
+
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.hidden {
+  display: none;
+}
+
+.block {
+  display: block;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.eds-steps__title { cursor: pointer; }