search

bloom-housing / ui-seeds

Bloom's affordable housing design system
Apache License 2.0
1 stars 1 forks source link

feat: add Card component #28

Closed jaredcwhite closed 1 year ago

jaredcwhite commented 1 year ago

This PR addresses #22

Description

Adds a Card component to the Seeds design system.

How Can This Be Tested/Reviewed?

Review the Card component in Storybook: https://deploy-preview-28--storybook-ui-seeds.netlify.app/?path=/story/blocks-card--text-content

Checklist:

netlify[bot] commented 1 year ago

Deploy Preview for storybook-ui-seeds ready!

Name Link
Latest commit 99e643d11146462676efe793e629c06533dfaed9
Latest deploy log https://app.netlify.com/sites/storybook-ui-seeds/deploys/645968dda1bf87000809136d
Deploy Preview https://deploy-preview-28--storybook-ui-seeds.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

jaredcwhite commented 1 year ago

@slowbot Just want to run a couple things by you regarding the props…so I ended up creating a dividers prop with the option of either flush or inset…in the Figma design specs there's only an example what I call the flush style…the inset style would look more like the existing Card implementation as used in the search form for Detroit. Let me know if you think that works, or if we should only have the flush style (in which case I can change dividers to just be a boolean).

I also decided to try out t-shirt sizing for the spacing prop: sm, base (default), md, lg as that felt natural and comparable with other stuff like icon sizes. Let me know your thoughts! cc @emilyjablonski

slowbot commented 1 year ago

@jaredcwhite Dividers are cool, is this possible to do on a section-by-section basis rather than for the whole card? I say this based on the current implementations.

The spacing looks great. Is there an option to have "none"

Is there a reason that the card header doesn't consume "heading" or "heading group" as a subcomponent?

jaredcwhite commented 1 year ago

@slowbot

  1. So we'd take off having dividers set on the card as a whole, and instead have a divider prop on each section? Sure, I think we could do that.
  2. What would "none" spacing do? Not have any gap between the card border and elements?
  3. The Heading/HeadingGroup components are still in a separate PR. Once that's merged in, I can circle back and use them here in the Card.
slowbot commented 1 year ago
  1. Yeah that was the thought
  2. Yeah if we nested a subcomponent that has its own spacing. We do this in Figma but may avoid it on the coded side.
  3. Cool
github-actions[bot] commented 1 year ago

:tada: This PR is included in version 1.5.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket: