docs: adds description and examples to EntryCard

packages/components/card/examples/EntryCard/EntryCardActionsExample.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { EntryCard, MenuItem } from '@contentful/f36-components';
+
+export default function EntryCardActionsExample() {
+  return (
+    <EntryCard
+      status="published"
+      contentType="Author"
+      title="John Doe"
+      description="Research and recommendations for modern stack websites."
+      actions={[
+        <MenuItem key="copy" onClick={() => alert('copy')}>
+          Copy
+        </MenuItem>,
+        <MenuItem key="delete" onClick={() => alert('delete')}>
+          Delete
+        </MenuItem>,
+      ]}
+    />
+  );
+}

packages/components/card/examples/EntryCard/EntryCardClickableExample.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { EntryCard } from '@contentful/f36-components';
+
+export default function EntryCardClickableExample() {
+  return (
+    <EntryCard
+      status="published"
+      contentType="Author"
+      title="John Doe"
+      description="Research and recommendations for modern stack websites."
+      onClick={() => alert('click')}
+    />
+  );
+}

packages/components/card/examples/EntryCard/EntryCardDragHandleExample.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { EntryCard } from '@contentful/f36-components';
+
+export default function EntryCardDragHandleExample() {
+  return (
+    <EntryCard
+      status="published"
+      contentType="Author"
+      title="John Doe"
+      description="Research and recommendations for modern stack websites."
+      withDragHandle
+    />
+  );
+}

packages/components/card/examples/EntryCard/EntryCardExample.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { EntryCard } from '@contentful/f36-components';
+
+export default function EntryCardExample() {
+  return (
+    <EntryCard
+      status="published"
+      contentType="Author"
+      title="John Doe"
+      description="Research and recommendations for modern stack websites."
+    />
+  );
+}

packages/components/card/examples/EntryCard/EntryCardLoadingExample.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { EntryCard } from '@contentful/f36-components';
+
+export default function EntryCardLoadingExample() {
+  return (
+    <EntryCard
+      status="published"
+      contentType="Author"
+      title="John Doe"
+      description="Research and recommendations for modern stack websites."
+      isLoading
+    />
+  );
+}

packages/components/card/examples/EntryCard/EntryCardSizesExample.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { EntryCard, Stack } from '@contentful/f36-components';
+
+export default function EntryCardSizesExample() {
+  return (
+    <Stack flexDirection="column">
+      <EntryCard
+        status="published"
+        contentType="Author"
+        title="John Doe"
+        description="Research and recommendations for modern stack websites."
+        size="small"
+      />
+      <EntryCard
+        status="published"
+        contentType="Author"
+        title="John Doe"
+        description="Research and recommendations for modern stack websites."
+        size="default"
+      />
+    </Stack>
+  );
+}

packages/components/card/examples/EntryCard/EntryCardThumbnailExample.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { EntryCard } from '@contentful/f36-components';
+
+export default function EntryCardThumbnailExample() {
+  return (
+    <EntryCard
+      status="published"
+      contentType="Author"
+      title="John Doe"
+      description="Research and recommendations for modern stack websites."
+      thumbnailElement={<img src="https://picsum.photos/200" />}
+    />
+  );
+}

packages/components/card/src/EntryCard/README.mdx

@@ -7,11 +7,7 @@ typescript: ./EntryCard.tsx
 storybook: 'https://v4-f36-storybook.netlify.app/?path=/story/components-card-entrycard--default'
 ---
 
-import { Heading, Stack, TextLink } from '@contentful/f36-components';
-import { ExternalLinkIcon } from '@contentful/f36-icons';
-
-The EntryCard component is built on top of the [Card component](/components/card) and it provides more props
-to help you manage the entries of your Contentful implementation.
+Display entries with preview and other options.
 
 ## Import
 
@@ -30,122 +26,52 @@ you can pass one of "archived", "changed", "deleted", "draft", "new", or "publis
 
 ### Basic usage
 
-```jsx
-<EntryCard
-  status="published"
-  contentType="Author"
-  title="John Doe"
-  description="Research and recommendations for modern stack websites."
-/>
+```jsx file=../../examples/EntryCard/EntryCardExample.tsx
+
 ```
 
 ### Clickable card
 
 Like the `Card` component, it’s possible to pass a function to the `onClick` prop
 and it will be called when the user clicks on the card.
 
-```jsx
-<EntryCard
-  status="published"
-  contentType="Author"
-  title="John Doe"
-  description="Research and recommendations for modern stack websites."
-  onClick={() => alert('click')}
-/>
+```jsx file=../../examples/EntryCard/EntryCardClickableExample.tsx
+
 ```
 
 ### Card actions
 
 To show a `...` button with a menu in the card, pass an array of `MenuItem` components
 
-```jsx
-<EntryCard
-  status="published"
-  contentType="Author"
-  title="John Doe"
-  description="Research and recommendations for modern stack websites."
-  actions={[
-    <MenuItem key="copy" onClick={() => alert('copy')}>
-      Copy
-    </MenuItem>,
-    <MenuItem key="delete" onClick={() => alert('delete')}>
-      Delete
-    </MenuItem>,
-  ]}
-/>
+```jsx file=../../examples/EntryCard/EntryCardActionsExample.tsx
+
 ```
 
 ### Loading state
 
-```jsx
-<EntryCard
-  status="published"
-  contentType="Author"
-  title="John Doe"
-  description="Research and recommendations for modern stack websites."
-  isLoading
-/>
+```jsx file=../../examples/EntryCard/EntryCardLoadingExample.tsx
+
 ```
 
 ### Different sizes
 
-```jsx
-<Stack flexDirection="column">
-  <EntryCard
-    status="published"
-    contentType="Author"
-    title="John Doe"
-    description="Research and recommendations for modern stack websites."
-    size="small"
-  />
-  <EntryCard
-    status="published"
-    contentType="Author"
-    title="John Doe"
-    description="Research and recommendations for modern stack websites."
-    size="default"
-  />
-</Stack>
+```jsx file=../../examples/EntryCard/EntryCardSizesExample.tsx
+
 ```
 
 ### With a drag handle
 
-```jsx
-<EntryCard
-  status="published"
-  contentType="Author"
-  title="John Doe"
-  description="Research and recommendations for modern stack websites."
-  withDragHandle
-/>
+```jsx file=../../examples/EntryCard/EntryCardDragHandleExample.tsx
+
 ```
 
 ### With a thumbnail
 
-```jsx
-<EntryCard
-  status="published"
-  contentType="Author"
-  title="John Doe"
-  description="Research and recommendations for modern stack websites."
-  thumbnailElement={<img src="https://picsum.photos/200" />}
-/>
+```jsx file=../../examples/EntryCard/EntryCardThumbnailExample.tsx
+
 ```
 
-<Stack justifyContent="space-between" marginTop="spacing2Xl" marginBottom="spacingL">
-  <Heading id="props-api-reference" as="h2" marginTop="none" marginBottom="none">
-    Props (API reference)
-  </Heading>
-
-  <TextLink
-    href="https://v4-f36-storybook.netlify.app/?path=/story/components-card-entrycard"
-    target="_blank"
-    alignIcon="end"
-    icon={<ExternalLinkIcon />}
-  >
-    Open in Storybook
-  </TextLink>
-</Stack>
+## Props (API reference)
 
 <PropsTable of="EntryCard" />