Documented Card Component [feature/ds-428]

apps/docs/app/ui/components/componentExample/ComponentPreviewWrapper.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { useState, memo, type ReactNode, useCallback, useContext, useEffect } from "react";
 import Card from "@/components/card/Card.tsx";
 import ThemeSwitch from "@/components/themeSwitch/ThemeSwitch.tsx";
 import { ThemeContext, type ColorScheme } from "@/context/theme/ThemeProvider.tsx";
+import { memo, useCallback, useContext, useEffect, useState, type ReactNode } from "react";
 
-import "./componentPreviewWrapper.css";
 import { HopperProvider } from "@hopper-ui/components";
+import "./componentPreviewWrapper.css";
 
 interface ComponentPreviewWrapperProps {
     preview?: ReactNode;

apps/docs/app/ui/components/componentExample/componentPreviewWrapper.css

@@ -7,6 +7,11 @@
     height: 100%;
 }
 
+.hd-component-preview-wrapper__card.hd-card {
+    padding-bottom: var(--hd-space-8);
+    padding-top: var(--hd-space-8);
+}
+
 .hd-component-preview-wrapper[data-schema="light"] {
     .hd-component-preview-wrapper__card {
         --background: var(--hd-white);

apps/docs/content/components/collections/Listbox.mdx

@@ -29,14 +29,6 @@ links:
     TODO: links to related concepts
 </FeatureFlag>
 
-#### Header
-
-The Header component represents a `header` within a Hopper container.
-
-#### Section
-
-The Section component represents a `section` within a Hopper container.
-
 ### Composed Components
 
 #### ListBox

apps/docs/content/components/content/Card.mdx

@@ -0,0 +1,112 @@
+---
+title: Card
+description: Cards are used to group similar concepts and tasks to make it easier for users to scan, read and get things done.
+category: "content"
+links:
+    source: https://github.com/gsoft-inc/wl-hopper/blob/main/packages/components/src/Card/src/Card.tsx
+---
+
+<Example src="Card/docs/preview" isOpen />
+
+<FeatureFlag flag="next">
+    ## Guidelines
+
+    TODO: If we have some guidelines about this component&apos;s usage
+
+    ### Accessibility ?
+
+    TODO: If we have some guidelines about this component and accessibility
+</FeatureFlag>
+
+## Anatomy
+
+### Composed Components
+
+A `Card` uses the following components.
+
+<ComposedComponents components={["Header", "Content", "Footer"]}/>
+
+<FeatureFlag flag="rc">
+
+    TODO: We have anatomy screenshots from the Figma, we could most likely use them here
+
+    ### Concepts
+
+    TODO: links to related concepts
+</FeatureFlag>
+
+## Usage
+
+### Variants
+
+A card can use different variants. Second-level cards need to be used within a first-level card.
+
+<Example src="Card/docs/variant" />
+
+### Sections
+
+A card can use a header, content, and footer section.
+
+<Example src="Card/docs/sections" />
+
+<FeatureFlag flag="next">
+    ## Advanced customization
+
+    ### Contexts
+    TODO: Example of context + content about the context
+
+    ### Custom Children
+
+    TODO: Example of passing custom childrens to the components to fake a slot
+
+    ### Custom Component
+
+    TODO: Example of creating a custom version of this component
+</FeatureFlag>
+
+## Props
+
+<PropTable component="Card" />
+
+## Migration Notes
+
+<MigrateGuide src="Card/docs/migration-notes" />
+
+### Layout Samples
+
+To facilitate the migration process, we've provided layout samples as reference guides. These examples demonstrate how to recreate features previously supported in [Orbiter](https://wl-orbiter-website.netlify.app/?path=/docs/card--default-story).
+
+#### Default
+
+<Example src="Card/docs/migration/default" />
+
+#### Image
+
+<Example src="Card/docs/migration/image" />
+
+#### Illustration
+
+<Example src="Card/docs/migration/illustration" />
+
+#### Size
+
+<Example src="Card/docs/migration/size" />
+
+#### Button
+
+<Example src="Card/docs/migration/button" />
+
+#### Button group
+
+<Example src="Card/docs/migration/buttongroup" />
+
+
+#### Orientation
+
+<Example src="Card/docs/migration/orientation" />
+
+
+#### Fluid
+
+<Example src="Card/docs/migration/fluid" />
+

apps/docs/examples/Preview.ts

@@ -284,6 +284,39 @@ export const Previews: Record<string, Preview> = {
     "Avatar/docs/customization": {
         component: lazy(() => import("@/../../packages/components/src/Avatar/docs/customization.tsx"))
     },
+    "Card/docs/preview": {
+        component: lazy(() => import("@/../../packages/components/src/Card/docs/preview.tsx"))
+    },
+    "Card/docs/variant": {
+        component: lazy(() => import("@/../../packages/components/src/Card/docs/variant.tsx"))
+    },
+    "Card/docs/sections": {
+        component: lazy(() => import("@/../../packages/components/src/Card/docs/sections.tsx"))
+    },
+    "Card/docs/migration/default": {
+        component: lazy(() => import("@/../../packages/components/src/Card/docs/migration/default.tsx"))
+    },
+    "Card/docs/migration/image": {
+        component: lazy(() => import("@/../../packages/components/src/Card/docs/migration/image.tsx"))
+    },
+    "Card/docs/migration/illustration": {
+        component: lazy(() => import("@/../../packages/components/src/Card/docs/migration/illustration.tsx"))
+    },
+    "Card/docs/migration/size": {
+        component: lazy(() => import("@/../../packages/components/src/Card/docs/migration/size.tsx"))
+    },
+    "Card/docs/migration/button": {
+        component: lazy(() => import("@/../../packages/components/src/Card/docs/migration/button.tsx"))
+    },
+    "Card/docs/migration/buttongroup": {
+        component: lazy(() => import("@/../../packages/components/src/Card/docs/migration/buttongroup.tsx"))
+    },
+    "Card/docs/migration/orientation": {
+        component: lazy(() => import("@/../../packages/components/src/Card/docs/migration/orientation.tsx"))
+    },
+    "Card/docs/migration/fluid": {
+        component: lazy(() => import("@/../../packages/components/src/Card/docs/migration/fluid.tsx"))
+    },
     "Divider/docs/preview": {
         component: lazy(() => import("@/../../packages/components/src/Divider/docs/preview.tsx"))
     },

apps/docs/examples/overview/index.ts

@@ -4,6 +4,7 @@ import Avatar from "./Avatar.svg";
 import Badge from "./Badge.svg";
 import Button from "./Button.svg";
 import ButtonGroup from "./ButtonGroup.svg";
+import Card from "./Card.svg";
 import Checkbox from "./Checkbox.svg";
 import CheckboxGroup from "./CheckboxGroup.svg";
 import ComboBox from "./ComboBox.svg";
@@ -51,7 +52,7 @@ export const OverviewComponents: OverviewComponentsType = {
     Badge,
     Button,
     ButtonGroup,
-    LinkButton,
+    Card,
     Checkbox,
     CheckboxGroup,
     ComboBox,
@@ -71,6 +72,7 @@ export const OverviewComponents: OverviewComponentsType = {
     Inline,
     Label,
     Link,
+    LinkButton,
     ListBox,
     NumberField,
     PasswordField,