Merge pull request #72 from etchteam/feature/etch-542-better-card-docs

docs: better card docs

.storybook/styles.css

@@ -1,3 +1,11 @@
 .docblock-argstable-body label {
   min-height: auto;
 }
+
+docs-placeholder {
+  border: dotted 1px var(--diamond-theme-border-color-hover);
+  border-radius: var(--diamond-radius-sm);
+  display: block;
+  padding: var(--diamond-spacing-lg);
+  text-align: center;
+}

components/canvas/Card/Card.stories.ts

@@ -43,11 +43,13 @@ export const Card: StoryObj = {
       padding="${padding}"
       class="diamond-theme-${theme}"
     >
-      <h3>Card title</h3>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua.
-      </p>
+      <docs-placeholder>
+        <h2>Placeholder content</h2>
+        <p>
+          The slot can contain anything, the card component acts as a simple
+          wrapper with optional props for styling the card itself.
+        </p>
+      </docs-placeholder>
     </diamond-card>
   `,
 };
@@ -89,3 +91,47 @@ export const Interactive: StoryObj = {
     </diamond-grid>
   `,
 };
+
+Interactive.parameters = {
+  docs: {
+    description: {
+      story: `The card can be made interactive by wrapping the card in an anchor or button element.
+      `,
+    },
+  },
+};
+
+export const ImageCard: StoryObj = {
+  render: () => html`
+    <diamond-wrap size="sm">
+      <diamond-card border radius shadow class="diamond-theme-light">
+        <diamond-img block responsive>
+          <img
+            src="https://placehold.co/400x300"
+            alt="Placeholder"
+            width="400"
+            height="300"
+            class="diamond-spacing-bottom-md"
+          />
+        </diamond-img>
+        <h3>Card title</h3>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </p>
+
+        <diamond-button variant="primary" size="sm" width="full-width">
+          <button type="button">Button</button>
+        </diamond-button>
+      </diamond-card>
+    </diamond-wrap>
+  `,
+};
+
+ImageCard.parameters = {
+  docs: {
+    description: {
+      story: `As a flexible canvas element, the card can be used for any number of layouts. For example, a simple image card.`,
+    },
+  },
+};