diff --git a/apps/docs/app/ui/components/componentExample/ComponentPreviewWrapper.tsx b/apps/docs/app/ui/components/componentExample/ComponentPreviewWrapper.tsx index 7a824e91a..3954934e8 100644 --- a/apps/docs/app/ui/components/componentExample/ComponentPreviewWrapper.tsx +++ b/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; diff --git a/apps/docs/app/ui/components/componentExample/componentPreviewWrapper.css b/apps/docs/app/ui/components/componentExample/componentPreviewWrapper.css index c272b61a7..97e4136e8 100644 --- a/apps/docs/app/ui/components/componentExample/componentPreviewWrapper.css +++ b/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); diff --git a/apps/docs/app/ui/layout/header/assets/hopper-logo.svg b/apps/docs/app/ui/layout/header/assets/hopper-logo.svg index 4b16b3976..ad2088dc4 100644 --- a/apps/docs/app/ui/layout/header/assets/hopper-logo.svg +++ b/apps/docs/app/ui/layout/header/assets/hopper-logo.svg @@ -1 +1 @@ - + diff --git a/apps/docs/app/ui/layout/mobileMenu/assets/hopper-logo.svg b/apps/docs/app/ui/layout/mobileMenu/assets/hopper-logo.svg index 4b16b3976..ad2088dc4 100644 --- a/apps/docs/app/ui/layout/mobileMenu/assets/hopper-logo.svg +++ b/apps/docs/app/ui/layout/mobileMenu/assets/hopper-logo.svg @@ -1 +1 @@ - + diff --git a/apps/docs/content/components/collections/Listbox.mdx b/apps/docs/content/components/collections/Listbox.mdx index ae9841959..4b9560939 100644 --- a/apps/docs/content/components/collections/Listbox.mdx +++ b/apps/docs/content/components/collections/Listbox.mdx @@ -29,14 +29,6 @@ links: TODO: links to related concepts -#### 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 diff --git a/apps/docs/content/components/content/Card.mdx b/apps/docs/content/components/content/Card.mdx new file mode 100644 index 000000000..4116b0911 --- /dev/null +++ b/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 +--- + + + + + ## Guidelines + + TODO: If we have some guidelines about this component's usage + + ### Accessibility ? + + TODO: If we have some guidelines about this component and accessibility + + +## Anatomy + +### Composed Components + +A `Card` uses the following components. + + + + + + TODO: We have anatomy screenshots from the Figma, we could most likely use them here + + ### Concepts + + TODO: links to related concepts + + +## Usage + +### Variants + +A card can use different variants. Second-level cards need to be used within a first-level card. + + + +### Sections + +A card can use a header, content, and footer section. + + + + + ## 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 + + +## Props + + + +## 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 + + + +#### Image + + + +#### Illustration + + + +#### Size + + + +#### Button + + + +#### Button group + + + + +#### Orientation + + + + +#### Fluid + + + diff --git a/apps/docs/examples/Preview.ts b/apps/docs/examples/Preview.ts index 908d98b62..e236482b3 100644 --- a/apps/docs/examples/Preview.ts +++ b/apps/docs/examples/Preview.ts @@ -284,6 +284,39 @@ export const Previews: Record = { "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")) }, diff --git a/apps/docs/examples/overview/Card.svg b/apps/docs/examples/overview/Card.svg new file mode 100644 index 000000000..e9459a070 --- /dev/null +++ b/apps/docs/examples/overview/Card.svg @@ -0,0 +1 @@ + diff --git a/apps/docs/examples/overview/index.ts b/apps/docs/examples/overview/index.ts index e7a221904..aa00e534b 100644 --- a/apps/docs/examples/overview/index.ts +++ b/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, diff --git a/packages/components/src/Card/docs/migration-notes.md b/packages/components/src/Card/docs/migration-notes.md new file mode 100644 index 000000000..c8eda8970 --- /dev/null +++ b/packages/components/src/Card/docs/migration-notes.md @@ -0,0 +1,8 @@ +Coming from Orbiter, you should be aware of the following changes: + +- `outline` variant has been renamed `main`. +- `elevated` variant has been renamed `second-level`. You shouldn't use a `second-level` variant without a parent `main` variant. +- `orientation` has been removed. Refer to this [sample](#orientation) to see an implementation example. +- `fluid` prop has been removed. Refer to this [sample](#fluid) to see an implementation example. +- `size` has been removed. Refer to this [sample](#size) to quickly match old sizes. +- The Hopper Card component does not include predefined layouts; developers are responsible for implementing any required [layouts](#migration-notes-layout-samples) to meet their specific needs.. diff --git a/packages/components/src/Card/docs/migration/assets/planet.png b/packages/components/src/Card/docs/migration/assets/planet.png new file mode 100644 index 000000000..253dfe70d Binary files /dev/null and b/packages/components/src/Card/docs/migration/assets/planet.png differ diff --git a/packages/components/src/Card/docs/migration/assets/space-landscape.png b/packages/components/src/Card/docs/migration/assets/space-landscape.png new file mode 100644 index 000000000..14f2efcd9 Binary files /dev/null and b/packages/components/src/Card/docs/migration/assets/space-landscape.png differ diff --git a/packages/components/src/Card/docs/migration/button.tsx b/packages/components/src/Card/docs/migration/button.tsx new file mode 100644 index 000000000..3f1b7567e --- /dev/null +++ b/packages/components/src/Card/docs/migration/button.tsx @@ -0,0 +1,18 @@ +import { Button, Card, Content, Footer, H3, Header, Text } from "@hopper-ui/components"; + +export default function Example() { + return ( + +
+

NASA Headquarters

+ No visitors allowed. +
+ + NASA Headquarters, officially known as Mary W. Jackson NASA Headquarters or NASA HQ and formerly named Two Independence Square, is a low-rise office building in the two-building Independence Square complex at 300 E Street SW in Washington, D.C. + +
+ +
+ + ); +} diff --git a/packages/components/src/Card/docs/migration/buttongroup.tsx b/packages/components/src/Card/docs/migration/buttongroup.tsx new file mode 100644 index 000000000..193524d6e --- /dev/null +++ b/packages/components/src/Card/docs/migration/buttongroup.tsx @@ -0,0 +1,32 @@ +import { Button, ButtonGroup, Card, Content, Footer, H3, Header, Text } from "@hopper-ui/components"; + +export default function Example() { + return ( + +
+

NASA Headquarters

+
+ + + 300 E. Street SW, Suite 5R30 +
+ Washington, DC 20546 +
+ (202) 358-0001 (Office) +
+ (202) 358-4338 (Fax) +
+ + + Any trespassers are going to be sent in space. + + +
+ + + + +
+ + ); +} diff --git a/packages/components/src/Card/docs/migration/default.tsx b/packages/components/src/Card/docs/migration/default.tsx new file mode 100644 index 000000000..c688132ae --- /dev/null +++ b/packages/components/src/Card/docs/migration/default.tsx @@ -0,0 +1,14 @@ +import { Card, Content, H3, Header, Text } from "@hopper-ui/components"; + +export default function Example() { + return ( + +
+

NASA Headquarters

+
+ + NASA Headquarters, officially known as Mary W. Jackson NASA Headquarters or NASA HQ and formerly named Two Independence Square, is a low-rise office building in the two-building Independence Square complex at 300 E Street SW in Washington, D.C. + + + ); +} diff --git a/packages/components/src/Card/docs/migration/fluid.tsx b/packages/components/src/Card/docs/migration/fluid.tsx new file mode 100644 index 000000000..f54e910d4 --- /dev/null +++ b/packages/components/src/Card/docs/migration/fluid.tsx @@ -0,0 +1,34 @@ +import { Card, Content, Flex, Footer, Grid, H3, Header, Img, Text } from "@hopper-ui/components"; + +import planet from "./assets/planet.png"; + +export default function Example() { + return ( + + + + Planet + + +
+

NASA

+
+ + + 300 E. Street SW, Suite 5R30 +
+ Washington, DC 20546 +
+ (202) 358-0001 (Office) +
+ (202) 358-4338 (Fax) + + +
+ Please note that we are moving from December 12th to December 23rd. +
+ + + + ); +} diff --git a/packages/components/src/Card/docs/migration/illustration.tsx b/packages/components/src/Card/docs/migration/illustration.tsx new file mode 100644 index 000000000..c626f7b25 --- /dev/null +++ b/packages/components/src/Card/docs/migration/illustration.tsx @@ -0,0 +1,19 @@ +import { Card, Content, Flex, H3, Header, Img, Text } from "@hopper-ui/components"; + +import planet from "./assets/planet.png"; + +export default function Example() { + return ( + +
+ + Planet + +

NASA Headquarters

+
+ + NASA Headquarters, officially known as Mary W. Jackson NASA Headquarters or NASA HQ and formerly named Two Independence Square, is a low-rise office building in the two-building Independence Square complex at 300 E Street SW in Washington, D.C. + + + ); +} diff --git a/packages/components/src/Card/docs/migration/image.tsx b/packages/components/src/Card/docs/migration/image.tsx new file mode 100644 index 000000000..82b4f1d4d --- /dev/null +++ b/packages/components/src/Card/docs/migration/image.tsx @@ -0,0 +1,19 @@ +import { Card, Content, Div, H3, Header, Img, Text } from "@hopper-ui/components"; + +import SpaceLandscape from "./assets/space-landscape.png"; + +export default function Example() { + return ( + +
+
+ Space landscape +
+

NASA Headquarters

+
+ + NASA Headquarters, officially known as Mary W. Jackson NASA Headquarters or NASA HQ and formerly named Two Independence Square, is a low-rise office building in the two-building Independence Square complex at 300 E Street SW in Washington, D.C. + + + ); +} diff --git a/packages/components/src/Card/docs/migration/orientation.tsx b/packages/components/src/Card/docs/migration/orientation.tsx new file mode 100644 index 000000000..1772e9e0e --- /dev/null +++ b/packages/components/src/Card/docs/migration/orientation.tsx @@ -0,0 +1,34 @@ +import { Card, Content, Flex, Footer, Grid, H3, Header, Img, Text } from "@hopper-ui/components"; + +import planet from "./assets/planet.png"; + +export default function Example() { + return ( + + + + Planet + + +
+

NASA

+
+ + + 300 E. Street SW, Suite 5R30 +
+ Washington, DC 20546 +
+ (202) 358-0001 (Office) +
+ (202) 358-4338 (Fax) + + +
+ Please note that we are moving from December 12th to December 23rd. +
+ + + + ); +} diff --git a/packages/components/src/Card/docs/migration/size.tsx b/packages/components/src/Card/docs/migration/size.tsx new file mode 100644 index 000000000..e8b9c4e38 --- /dev/null +++ b/packages/components/src/Card/docs/migration/size.tsx @@ -0,0 +1,98 @@ +import { Card, Content, Flex, H3, Header, Text } from "@hopper-ui/components"; + +export default function Example() { + return ( + <> + + +
+

XS Card

+
+ + + 300 E. Street SW, Suite 5R30 +
+ Washington, DC 20546 +
+ (202) 358-0001 (Office) +
+ (202) 358-4338 (Fax) + + + + + +
+

SM Card

+
+ + + 300 E. Street SW, Suite 5R30 +
+ Washington, DC 20546 +
+ (202) 358-0001 (Office) +
+ (202) 358-4338 (Fax) + + + + + + +
+

MD Card

+
+ + + 300 E. Street SW, Suite 5R30 +
+ Washington, DC 20546 +
+ (202) 358-0001 (Office) +
+ (202) 358-4338 (Fax) + + + + + + +
+

LG Card

+
+ + + 300 E. Street SW, Suite 5R30 +
+ Washington, DC 20546 +
+ (202) 358-0001 (Office) +
+ (202) 358-4338 (Fax) + + + + + + +
+

XL Card

+
+ + + 300 E. Street SW, Suite 5R30 +
+ Washington, DC 20546 +
+ (202) 358-0001 (Office) +
+ (202) 358-4338 (Fax) + + + + + + + ); +} diff --git a/packages/components/src/Card/docs/preview.tsx b/packages/components/src/Card/docs/preview.tsx new file mode 100644 index 000000000..4e2878309 --- /dev/null +++ b/packages/components/src/Card/docs/preview.tsx @@ -0,0 +1,11 @@ +import { Card, Content, Text } from "@hopper-ui/components"; + +export default function Example() { + return ( + + + Software built for everyone to do their best work + + + ); +} diff --git a/packages/components/src/Card/docs/sections.tsx b/packages/components/src/Card/docs/sections.tsx new file mode 100644 index 000000000..326a6e837 --- /dev/null +++ b/packages/components/src/Card/docs/sections.tsx @@ -0,0 +1,17 @@ +import { Card, Content, Footer, H3, Header, Text } from "@hopper-ui/components"; + +export default function Example() { + return ( + +
+

Developer

+
+ + + A developer builds and maintains software, ensuring functionality, performance, and alignment with project goals. + + +
Start date : September 13th
+ + ); +} diff --git a/packages/components/src/Card/docs/variant.tsx b/packages/components/src/Card/docs/variant.tsx new file mode 100644 index 000000000..727776a7c --- /dev/null +++ b/packages/components/src/Card/docs/variant.tsx @@ -0,0 +1,29 @@ +import { Card, Content, Flex, H2, H3, Header, Text } from "@hopper-ui/components"; + +export default function Example() { + return ( + +

Roles

+ + +
+

Manager

+
+ + A manager leads team operations, aligns goals, and fosters a productive work environment to achieve results. + + + + +
+

Designer

+
+ + A designer crafts visual solutions, enhancing user experience and aligning designs with brand goals. + + + + + + ); +} diff --git a/packages/components/src/Card/src/Card.module.css b/packages/components/src/Card/src/Card.module.css index 03f64cc1e..97e9437c4 100644 --- a/packages/components/src/Card/src/Card.module.css +++ b/packages/components/src/Card/src/Card.module.css @@ -11,6 +11,9 @@ --hop-Card-second-level-border: var(--hop-Card-border-size) solid var(--hop-neutral-surface-weakest); --hop-Card-second-level-background-color: var(--hop-neutral-surface-weakest); + display: flex; + flex-direction: column; + background-color: var(--background-color); border: var(--border); border-radius: var(--hop-Card-border-radius);