[CL-357] Remove border radius when displayed in web app (#10884)

libs/components/src/card/card.component.ts

@@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, Component } from "@angular/core";
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     class:
-      "tw-box-border tw-block tw-bg-background tw-text-main tw-border-solid tw-border-b tw-border-0 tw-border-b-secondary-300 tw-rounded-lg tw-py-4 tw-px-3",
+      "tw-box-border tw-block tw-bg-background tw-text-main tw-border-solid tw-border-b tw-border-0 tw-border-b-secondary-300 [&:not(bit-layout_*)]:tw-rounded-lg tw-py-4 tw-px-3",
   },
 })
 export class CardComponent {}

libs/components/src/card/card.stories.ts

@@ -1,7 +1,12 @@
+import { RouterTestingModule } from "@angular/router/testing";
 import { Meta, StoryObj, componentWrapperDecorator, moduleMetadata } from "@storybook/angular";
 
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+
+import { LayoutComponent } from "../layout";
 import { SectionComponent } from "../section";
 import { TypographyModule } from "../typography";
+import { I18nMockService } from "../utils/i18n-mock.service";
 
 import { CardComponent } from "./card.component";
 
@@ -10,7 +15,20 @@ export default {
   component: CardComponent,
   decorators: [
     moduleMetadata({
-      imports: [TypographyModule, SectionComponent],
+      imports: [TypographyModule, SectionComponent, LayoutComponent, RouterTestingModule],
+      providers: [
+        {
+          provide: I18nService,
+          useFactory: () => {
+            return new I18nMockService({
+              toggleSideNavigation: "Toggle side navigation",
+              skipToContent: "Skip to content",
+              submenu: "submenu",
+              toggleCollapse: "toggle collapse",
+            });
+          },
+        },
+      ],
     }),
     componentWrapperDecorator(
       (story) => `<div class="tw-bg-background-alt tw-p-10 tw-text-main">${story}</div>`,
@@ -60,3 +78,16 @@ export const WithinSections: Story = {
       `,
   }),
 };
+
+export const WithoutBorderRadius: Story = {
+  render: (args) => ({
+    props: args,
+    template: /*html*/ `
+    <bit-layout>
+      <bit-card>
+        <p bitTypography="body1" class="!tw-mb-0">Cards used in <code>bit-layout</code> will not have a border radius</p>
+      </bit-card>
+    </bit-layout>
+    `,
+  }),
+};