fix: use semantic card border color for cards

EightfoldAI · Sep 25, 2023 · 91caa57 · 91caa57
1 parent 26b601d
commit 91caa57
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 1 deletion.
diff --git a/src/components/Card/Card.stories.tsx b/src/components/Card/Card.stories.tsx
@@ -51,6 +51,7 @@ const baseCardArgs: Object = {
   size: CardSize.Medium,
   style: {},
   classNames: 'my-card-class',
+  bordered: true,
 };
 
 CustomCard.args = {

diff --git a/src/components/Card/Card.test.tsx b/src/components/Card/Card.test.tsx
@@ -80,4 +80,12 @@ describe('Card', () => {
     expect(container.getElementsByClassName('card-small')).toHaveLength(1);
     expect(container).toMatchSnapshot();
   });
+
+  test('Card is bordered', () => {
+    const { container } = render(
+      <Card body={body} footer={footer} header={header} bordered />
+    );
+    expect(container.getElementsByClassName('card-bordered')).toHaveLength(1);
+    expect(container).toMatchSnapshot();
+  });
 });
diff --git a/src/components/Card/__snapshots__/Card.test.tsx.snap b/src/components/Card/__snapshots__/Card.test.tsx.snap
@@ -1,5 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Card Card is bordered 1`] = `
+<div>
+  <div
+    class="card card-bordered list card-medium"
+  >
+    <div
+      class="header"
+    >
+      This is the card header
+    </div>
+    <div
+      class="body"
+    >
+      This is the card body
+    </div>
+    <div
+      class="footer"
+    >
+      This is the card footer
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Card Card is large 1`] = `
 <div>
   <div

diff --git a/src/components/Card/card.module.scss b/src/components/Card/card.module.scss
@@ -11,7 +11,7 @@
   position: relative;
 
   &-bordered {
-    border: 1px solid var(--border-color);
+    border: 1px solid var(--card-border-color);
   }
 
   .icon {