feat: infobar: adds bordered prop

src/components/InfoBar/InfoBar.stories.tsx

@@ -59,6 +59,7 @@ const infoBarArgs: Object = {
     id: 'myActionButton',
     text: 'Action',
   },
+  bordered: false,
   closable: true,
   content: 'Body2 is used inside here.',
   style: {},

src/components/InfoBar/InfoBar.test.tsx

@@ -80,4 +80,12 @@ describe('InfoBar', () => {
     expect(container.querySelector('.warning')).toBeTruthy();
     expect(container).toMatchSnapshot();
   });
+
+  test('InfoBar is bordered', () => {
+    const { container } = render(
+      <InfoBar bordered content={'InfoBar test border'} />
+    );
+    expect(container.querySelector('.bordered')).toBeTruthy();
+    expect(container).toMatchSnapshot();
+  });
 });

src/components/InfoBar/InfoBar.tsx

@@ -14,6 +14,7 @@ export const InfoBar: FC<InfoBarsProps> = React.forwardRef(
   (props: InfoBarsProps, ref: Ref<HTMLDivElement>) => {
     const {
       actionButtonProps,
+      bordered = false,
       classNames,
       closable,
       closeButtonAriaLabelText: defaultCloseButtonAriaLabelText,
@@ -54,6 +55,7 @@ export const InfoBar: FC<InfoBarsProps> = React.forwardRef(
 
     const infoBarClasses: string = mergeClasses([
       styles.infoBar,
+      { [styles.bordered]: !!bordered },
       classNames,
       { [styles.neutral]: type === InfoBarType.neutral },
       { [styles.positive]: type === InfoBarType.positive },

src/components/InfoBar/InfoBar.types.ts

@@ -32,6 +32,11 @@ export interface InfoBarsProps extends OcBaseProps<HTMLDivElement> {
    * Props for the action button
    */
   actionButtonProps?: ButtonProps;
+  /**
+   * Whether to visually hide the InfoBar border.
+   * @default false
+   */
+  bordered?: boolean;
   /**
    * If the InfoBar is closable or not
    */

src/components/InfoBar/__snapshots__/InfoBar.test.tsx.snap

@@ -124,6 +124,37 @@ exports[`InfoBar InfoBar is Warning 1`] = `
 </div>
 `;
 
+exports[`InfoBar InfoBar is bordered 1`] = `
+<div>
+  <div
+    class="info-bar bordered neutral"
+    role="alert"
+  >
+    <span
+      aria-hidden="false"
+      class="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style="width: 20px; height: 20px;"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+          style="fill: currentColor;"
+        />
+      </svg>
+    </span>
+    <div
+      class="message body2"
+    >
+      InfoBar test border
+    </div>
+  </div>
+</div>
+`;
+
 exports[`InfoBar Renders a custom icon when the icon prop uses a custom icon 1`] = `
 <div>
   <div

src/components/InfoBar/infoBar.module.scss

@@ -8,10 +8,18 @@
   padding: $space-ml;
   width: 100%;
 
+  &.bordered {
+    border: var(--info-bar-border);
+  }
+
   &.neutral {
     background-color: var(--info-bar-background-color);
     color: var(--info-bar-text-color);
 
+    &.bordered {
+      border-color: var(--info-bar-neutral-border-color);
+    }
+
     .action-button,
     .close-button {
       &:active {
@@ -24,6 +32,10 @@
     background-color: var(--info-bar-positive-background-color);
     color: var(--info-bar-positive-text-color);
 
+    &.bordered {
+      border-color: var(--info-bar-positive-border-color);
+    }
+
     .action-button,
     .close-button {
       &:active {
@@ -38,6 +50,10 @@
     background-color: var(--info-bar-warning-background-color);
     color: var(--info-bar-warning-text-color);
 
+    &.bordered {
+      border-color: var(--info-bar-warning-border-color);
+    }
+
     .action-button,
     .close-button {
       &:active {
@@ -52,6 +68,10 @@
     background-color: var(--info-bar-disruptive-background-color);
     color: var(--info-bar-disruptive-text-color);
 
+    &.bordered {
+      border-color: var(--info-bar-disruptive-border-color);
+    }
+
     .action-button,
     .close-button {
       &:active {

src/styles/themes/_default-theme.scss

@@ -897,6 +897,14 @@
   // ------ Card theme ------
 
   // ------ Info Bar theme ------
+  --info-bar-disruptive-border-color: var(--red-background2-color);
+  --info-bar-neutral-border-color: var(--grey-background2-color);
+  --info-bar-positive-border-color: var(--green-background2-color);
+  --info-bar-warning-border-color: var(--orange-background2-color);
+  --info-bartip-border-style: solid;
+  --info-bar-border-width: 1px;
+  --info-bar-border: var(--info-bar-border-width)
+    var(--info-bartip-border-style) var(--info-bar-neutral-border-color);
   --info-bar-border-radius: var(--border-radius-xl);
   --info-bar-background-color: var(--grey-background1-color);
   --info-bar-button-active-background-color: var(--grey-background2-color);