Skip to content

Wildcard V2: `<Card />` Implementation

Administrator requested to merge contractors/SG-27679 into main

Created by: gitstart-sourcegraph

Wildcard implementation of the <Card /> component.

See Wildcard V2 - Planned work for more context

Acceptance criteria

  • Component is implemented within Wildcard
  • Component has tests
  • Component is accessible
  • Component matches Figma designs

Refs

Implementation details

  1. Extract styles required for the component from Bootstrap to a CSS module:
    • Figure out what classes do we use from node_modules/bootstrap/scss/_card.scss.
    • Create a CSS module with classes that we need from node_modules/bootstrap/scss/_card.scss and variables from client/branded/src/global-styles/card.scss.
    • For top-level classes create small components that incorporate required styles, e.g., CardTitle for .card-title.
  2. Move client/branded/src/global-styles/GlobalStylesStory/CardsStory.tsx (link) to the new component folder and update it to match other stories in the Wildcard package.
  3. Use the <Button /> component as a blueprint for the new component.
  4. Component API:
<Card>
  <CardHeader>Featured</CardHeader>
  <CardBody>
     <CardTitle>My cool title</CardTitle>
     <CardSubtitle>Subtitle</CardSubtitle>
     <CardText>Body goes here</CardText>
  </CardBody>
</Card>

Merge request reports