feat(Breadcrumb): [BLA-1021] make padding configurable

Author: Bharat Patel

packages/core-components/__snapshots__/components-interaction-breadcrumb--story-020-padding-top-bottom.png

@@ -78,9 +78,13 @@ export namespace Components {
     }
     interface B2bBreadcrumb {
         /**
-          * Vertical padding for the breadcrumb component
+          * Padding for the bottom of the breadcrumb component
          */
-        "paddingVertical": number;
+        "paddingBottom": number;
+        /**
+          * Padding for the top of the breadcrumb component
+         */
+        "paddingTop": number;
     }
     interface B2bBreadcrumbItem {
         /**
@@ -2328,9 +2332,13 @@ declare namespace LocalJSX {
          */
         "onB2b-selected"?: (event: B2bBreadcrumbCustomEvent<BreadCrumbChangeEventDetail>) => void;
         /**
-          * Vertical padding for the breadcrumb component
+          * Padding for the bottom of the breadcrumb component
+         */
+        "paddingBottom"?: number;
+        /**
+          * Padding for the top of the breadcrumb component
          */
-        "paddingVertical"?: number;
+        "paddingTop"?: number;
     }
     interface B2bBreadcrumbItem {
         /**

packages/core-components/src/components.d.ts

@@ -33,13 +33,14 @@ The link provided will open in the same page, similar to `target="self"`.
 Whether the item is currently active. This state must be controlled by consumers. When an item is active, it cannot be hovered and no selection
 event is emitted in order to prevent navigating in place.
 
-### paddingVertical
+### paddingTop & paddingBottom
 
-The `paddingVertical` property allows you to adjust the vertical padding (top and bottom) of the `Breadcrumb` component. This property accepts pixel values as a number.
+The `paddingTop` and `paddingBottom` properties allow you to adjust the top and bottom padding of the `Breadcrumb` component respectively. These properties accept pixel values as numbers.
 
-| Property          | Type     | Default | Description                                            |
-| ----------------- | -------- | ------- | ------------------------------------------------------ |
-| `paddingVertical` | `number` | `0`     | Sets the vertical padding of the breadcrumb component. |
+| Property        | Type     | Default | Description                                |
+| --------------- | -------- | ------- | ------------------------------------------ |
+| `paddingTop`    | `number` | `0`     | Sets the top padding of the breadcrumb.    |
+| `paddingBottom` | `number` | `0`     | Sets the bottom padding of the breadcrumb. |
 
 ## Events
 

packages/core-components/src/components/breadcrumb/breadcrumb.docs.mdx

@@ -2,40 +2,39 @@
 @use '../../global/b2b-styles';
 
 :host {
-  .b2b-breadcrumb-nav {
-    z-index: 99;
-    display: flex;
-    flex-flow: row nowrap;
-    padding-top: var(--b2b-breadcrumb-padding-vertical, 0);
-    padding-bottom: var(--b2b-breadcrumb-padding-vertical, 0);
-    height: var(--b2b-size-90);
-    margin-bottom: 1.125rem;
-    border-bottom: var(--b2b-size-border-width-50) solid
-      var(--b2b-color-grey-200);
+  display: block;
+}
 
-    &__item {
-      font-size: var(--b2b-size-copy-125);
-      line-height: var(--b2b-size-copy-line-height-125);
-      display: inline-flex;
-      color: var(--b2b-color-copy-secondary);
-      cursor: pointer;
+.b2b-breadcrumb-nav {
+  z-index: 99;
+  display: flex;
+  flex-flow: row nowrap;
+  height: var(--b2b-size-90);
+  margin-bottom: 1.125rem;
+  border-bottom: var(--b2b-size-border-width-50) solid var(--b2b-color-grey-200);
 
-      & a {
-        color: var(--b2b-color-grey-400);
-        text-decoration: none;
-      }
+  &__item {
+    font-size: var(--b2b-size-copy-125);
+    line-height: var(--b2b-size-copy-line-height-125);
+    display: inline-flex;
+    color: var(--b2b-color-copy-secondary);
+    cursor: pointer;
+
+    & a {
+      color: var(--b2b-color-grey-400);
+      text-decoration: none;
+    }
 
+    &:hover,
+    a:hover {
+      color: var(--b2b-color-red-100);
+    }
+
+    &--active {
       &:hover,
       a:hover {
-        color: var(--b2b-color-red-100);
-      }
-
-      &--active {
-        &:hover,
-        a:hover {
-          cursor: default;
-          color: var(--b2b-color-grey-400);
-        }
+        cursor: default;
+        color: var(--b2b-color-grey-400);
       }
     }
   }

packages/core-components/src/components/breadcrumb/breadcrumb.scss

@@ -2,9 +2,11 @@ import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit-html';
 import { getArgTypes } from '../../docs/config/utils';
 
-const Template: Story = ({ href, active, paddingVertical }) => {
+const Template: Story = ({ href, active, paddingTop, paddingBottom }) => {
   return html`
-    <b2b-breadcrumb padding-vertical="${paddingVertical}">
+    <b2b-breadcrumb
+      padding-top="${paddingTop}"
+      padding-bottom="${paddingBottom}">
       <b2b-breadcrumb-item href="${href}">Start</b2b-breadcrumb-item>
       <b2b-breadcrumb-item>Weiter</b2b-breadcrumb-item>
       <b2b-breadcrumb-item active="${active}">Ende</b2b-breadcrumb-item>
@@ -15,19 +17,21 @@ const Template: Story = ({ href, active, paddingVertical }) => {
 const defaultArgs = {
   href: 'https://www.otto.de',
   active: true,
-  paddingVertical: 0, // Default padding in px
+  paddingTop: 0, // Default padding top in px
+  paddingBottom: 0, // Default padding bottom in px
 };
 
 export const story010Default = Template.bind({});
 story010Default.args = { ...defaultArgs };
 story010Default.storyName = 'Default Breadcrumb';
 
-export const story020PaddingVertical = Template.bind({});
-story020PaddingVertical.args = {
+export const story020PaddingTopBottom = Template.bind({});
+story020PaddingTopBottom.args = {
   ...defaultArgs,
-  paddingVertical: 20, // Example with custom paddingVertical
+  paddingTop: 10, // Example with custom padding top
+  paddingBottom: 15, // Example with custom padding bottom
 };
-story020PaddingVertical.storyName = 'Breadcrumb with Custom Vertical Padding';
+story020PaddingTopBottom.storyName = 'Custom Padding';
 
 const breadcrumbArgs = getArgTypes('b2b-breadcrumb');
 

packages/core-components/src/components/breadcrumb/breadcrumb.stories.tsx

@@ -18,8 +18,11 @@ import { BreadCrumbChangeEventDetail } from '../../utils/interfaces/interaction.
 export class B2bBreadCrumbComponent {
   @Element() host: HTMLB2bBreadcrumbElement;
 
-  /** Vertical padding for the breadcrumb component */
-  @Prop() paddingVertical: number = 0; // Default value is 0px
+  /** Padding for the top of the breadcrumb component */
+  @Prop() paddingTop: number = 0; // Default value is 0px
+
+  /** Padding for the bottom of the breadcrumb component */
+  @Prop() paddingBottom: number = 0; // Default value is 0px
 
   /** Emits the value of the currently selected item whenever an item is selected. */
   @Event({ eventName: 'b2b-selected' })
@@ -38,15 +41,16 @@ export class B2bBreadCrumbComponent {
 
   private updateActiveItem = (newItem: HTMLB2bBreadcrumbItemElement) => {
     this.getBreadcrumbItems()
-      .filter(x => x.value != newItem.value)
+      .filter(x => x.value !== newItem.value)
       .forEach(x => (x.active = false));
   };
 
   render() {
     return (
       <Host
         style={{
-          '--b2b-breadcrumb-padding-vertical': `${this.paddingVertical}px`,
+          paddingTop: `${this.paddingTop}px`,
+          paddingBottom: `${this.paddingBottom}px`,
         }}>
         <div class="b2b-breadcrumb-nav">
           <slot></slot>

packages/core-components/src/components/breadcrumb/breadcrumb.tsx

@@ -172,7 +172,7 @@
     }
   },
   "b2b-breadcrumb": {
-    "paddingVertical": {
+    "paddingBottom": {
       "table": {
         "type": {
           "summary": "number"
@@ -181,7 +181,18 @@
           "summary": "0"
         }
       },
-      "description": "Vertical padding for the breadcrumb component"
+      "description": "Padding for the bottom of the breadcrumb component"
+    },
+    "paddingTop": {
+      "table": {
+        "type": {
+          "summary": "number"
+        },
+        "defaultValue": {
+          "summary": "0"
+        }
+      },
+      "description": "Padding for the top of the breadcrumb component"
     }
   },
   "b2b-breadcrumb-item": {
@@ -2571,9 +2582,16 @@
       "description": "The maximum amount of chips visible. Adjust this depending on available size of the dropdown."
     },
     "optionsList": {
+      "options": [
+        null,
+        null
+      ],
+      "control": {
+        "type": "radio"
+      },
       "table": {
         "type": {
-          "summary": "string[]"
+          "summary": "string"
         },
         "defaultValue": {
           "summary": "[]"
@@ -2609,9 +2627,16 @@
       "description": "The string displayed as the select all label."
     },
     "selectedValues": {
+      "options": [
+        null,
+        null
+      ],
+      "control": {
+        "type": "radio"
+      },
       "table": {
         "type": {
-          "summary": "string[]"
+          "summary": "string"
         },
         "defaultValue": {
           "summary": "[]"
@@ -2711,6 +2736,39 @@
       },
       "description": "The alignment of the text."
     },
+    "display": {
+      "options": [
+        "block",
+        "inline",
+        "inline-block"
+      ],
+      "control": {
+        "type": "radio"
+      },
+      "table": {
+        "type": {
+          "summary": "string"
+        },
+        "defaultValue": {
+          "summary": "'block'"
+        }
+      },
+      "description": "The positioning of the paragraph in the page flow. Defaults to native block behavior."
+    },
+    "margin": {
+      "control": {
+        "type": "boolean"
+      },
+      "table": {
+        "type": {
+          "summary": "boolean"
+        },
+        "defaultValue": {
+          "summary": "true"
+        }
+      },
+      "description": "Whether or not the paragraph has a bottom margin. Defaults to true."
+    },
     "size": {
       "options": [
         "100",
@@ -2729,6 +2787,24 @@
       },
       "description": "The size of the text."
     },
+    "variant": {
+      "options": [
+        "black-100",
+        "grey-400"
+      ],
+      "control": {
+        "type": "radio"
+      },
+      "table": {
+        "type": {
+          "summary": "string"
+        },
+        "defaultValue": {
+          "summary": "'black-100'"
+        }
+      },
+      "description": "The color of the paragraph. Defaults to black."
+    },
     "weight": {
       "options": [
         "bold",
@@ -4174,4 +4250,4 @@
       "description": "Use when wizard has property custom true. The step number"
     }
   }
-}
+}