From 6b1ab46260b0c09ac58b3b2e24313040c21fd49c Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Fri, 22 Dec 2023 15:47:49 -0300 Subject: [PATCH 1/6] chore: `CardGroup` HTMLAttributes --- packages/fuselage/src/components/CardGroup/CardGroup.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/fuselage/src/components/CardGroup/CardGroup.tsx b/packages/fuselage/src/components/CardGroup/CardGroup.tsx index 29255c33e0..366bf0fd91 100644 --- a/packages/fuselage/src/components/CardGroup/CardGroup.tsx +++ b/packages/fuselage/src/components/CardGroup/CardGroup.tsx @@ -1,4 +1,4 @@ -import type { ReactNode } from 'react'; +import type { AllHTMLAttributes, ReactNode } from 'react'; import React from 'react'; import { appendClassName } from '../../helpers/appendClassName'; @@ -13,7 +13,7 @@ type CardGroupProps = { small?: boolean; large?: boolean; children?: ReactNode; -}; +} & Omit, 'is' | 'wrap'>; export const CardGroup = ({ align = 'start', From 3bf1fb0d8fcdfe0daf605100af1bdd7c3dc7ea66 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Fri, 22 Dec 2023 15:48:34 -0300 Subject: [PATCH 2/6] chore: clickable `Card` --- .../src/components/Card/Card.styles.scss | 18 +++++++++++++++++- packages/fuselage/src/components/Card/Card.tsx | 16 ++++++++-------- 2 files changed, 25 insertions(+), 9 deletions(-) diff --git a/packages/fuselage/src/components/Card/Card.styles.scss b/packages/fuselage/src/components/Card/Card.styles.scss index e7a2ecfc7a..ff7a159f56 100644 --- a/packages/fuselage/src/components/Card/Card.styles.scss +++ b/packages/fuselage/src/components/Card/Card.styles.scss @@ -17,6 +17,16 @@ $card-hero-padding: lengths.padding(28); 'card-background-color', colors.surface(light) ); + + &__clickable { + &:hover, + &:focus { + cursor: pointer; + + outline: 0; + background-color: colors.surface(hover); + } + } } // Card horizontal @@ -27,6 +37,9 @@ $card-hero-padding: lengths.padding(28); padding: $card-horizontal-padding; .rcx-card__controls { + justify-content: flex-end; + align-items: center; + margin-inline-start: lengths.margin(16); } @@ -39,9 +52,12 @@ $card-hero-padding: lengths.padding(28); } &--wrap { - flex-wrap: wrap; + flex-direction: column; + align-items: flex-start; .rcx-card__controls { + justify-content: flex-start; + margin-block-start: lengths.margin(16); margin-inline-start: lengths.margin(none); } diff --git a/packages/fuselage/src/components/Card/Card.tsx b/packages/fuselage/src/components/Card/Card.tsx index 8e50d4d6f7..0c21a077f2 100644 --- a/packages/fuselage/src/components/Card/Card.tsx +++ b/packages/fuselage/src/components/Card/Card.tsx @@ -4,14 +4,13 @@ import React from 'react'; import Box from '../Box/Box'; -const Card = ({ - horizontal, - hero, - ...props -}: { horizontal?: boolean; hero?: boolean } & Omit< - AllHTMLAttributes, - 'is' ->) => { +type CardProps = { + horizontal?: boolean; + hero?: boolean; + clickable?: boolean; +} & Omit, 'is'>; + +const Card = ({ horizontal, hero, clickable, ...props }: CardProps) => { const breakpoints = useBreakpoints(); const isMobile = !breakpoints.includes('sm'); @@ -22,6 +21,7 @@ const Card = ({ rcx-card__vertical={!horizontal} rcx-card__hero={hero} rcx-card__horizontal--wrap={horizontal && isMobile} + rcx-card__clickable={clickable} {...props} /> ); From 85620625bf10f533738d1cfd6823bd4c8e83f0d5 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Wed, 27 Dec 2023 10:58:43 -0300 Subject: [PATCH 3/6] chore: card improvements --- .../src/components/Card/Card.stories.tsx | 230 +++++++++--------- .../src/components/Card/Card.styles.scss | 96 ++------ .../src/components/Card/CardTitle.tsx | 2 +- .../CardGroup/CardGroup.stories.tsx | 36 ++- 4 files changed, 159 insertions(+), 205 deletions(-) diff --git a/packages/fuselage/src/components/Card/Card.stories.tsx b/packages/fuselage/src/components/Card/Card.stories.tsx index 73c402fac5..6a17dfa661 100644 --- a/packages/fuselage/src/components/Card/Card.stories.tsx +++ b/packages/fuselage/src/components/Card/Card.stories.tsx @@ -4,8 +4,9 @@ import React from 'react'; import { Card, CardBody, CardCol, CardTitle } from '.'; import { Avatar } from '../Avatar'; import { Badge } from '../Badge'; +import Box from '../Box/Box'; import { Button, IconButton } from '../Button'; -import { Icon } from '../Icon'; +import { FramedIcon } from '../FramedIcon'; import { Tag } from '../Tag'; import CardControls from './CardControls'; import CardHeader from './CardHeader'; @@ -29,12 +30,119 @@ export default { }, } as ComponentMeta; +const imgUrl = + 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'; + +export const Vertical: ComponentStory = () => ( + + + + + Heading 3 + + + + Lorem ipsum dolor sit amet. In adipisci consequatur qui laudantium rem + praesentium earum ut consectetur. Lorem ipsum dolor sit amet. In adipisci + consequatur qui laudantium rem praesentium earum ut consectetur. + + + + + + +); + +export const VerticalNoIcon: ComponentStory = () => ( + + Heading 3 + + Lorem ipsum dolor sit amet. In adipisci consequatur qui laudantium rem + praesentium earum ut consectetur. Lorem ipsum dolor sit amet. In adipisci + consequatur qui laudantium rem praesentium earum ut consectetur. + + + + + +); + +export const Hero: ComponentStory = () => ( + + Heading 3 + + Lorem ipsum dolor sit amet. In adipisci consequatur qui laudantium rem + praesentium earum ut consectetur. Lorem ipsum dolor sit amet. In adipisci + consequatur qui laudantium rem praesentium earum ut consectetur. + + + + + +); + +export const VerticalCustom: ComponentStory = () => ( + + + + Heading 3 + + + + {Array.from(new Array(3)).map((_, index) => ( + + Lorem ipsum dolor sit amet. + + ))} + + + {Array.from(new Array(3)).map((_, index) => ( + + Lorem ipsum dolor sit amet. + + ))} + + + + + + +); + export const Horizontal: ComponentStory = () => ( - + + + + + Heading 3 + + + Lorem ipsum dolor sit amet. In adipisci consequatur qui laudantium + voluptatem rem praesentium earum ut consectetur. + + + + + + + Tag + + + +); + +export const Clickable: ComponentStory = () => ( + + + Heading 3 @@ -59,15 +167,13 @@ export const Horizontal: ComponentStory = () => ( export const HorizontalNoIcon: ComponentStory = () => ( - - - Heading 3 - - - Lorem ipsum dolor sit amet. In adipisci consequatur qui laudantium - voluptatem rem praesentium earum ut consectetur. - - + + Heading 3 + + + Lorem ipsum dolor sit amet. In adipisci consequatur qui laudantium + voluptatem rem praesentium earum ut consectetur. + Card tag @@ -79,7 +185,7 @@ export const HorizontalNoIcon: ComponentStory = () => ( export const HorizontalNoAction: ComponentStory = () => ( - + Heading 3 @@ -117,9 +223,6 @@ export const TitleH5: ComponentStory = () => ( ); TitleH5.storyName = 'Title h5'; -const imgUrl = - 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'; - export const HorizontalCustom: ComponentStory = () => ( @@ -145,100 +248,3 @@ export const HorizontalCustom: ComponentStory = () => ( ); - -export const Vertical: ComponentStory = () => ( - - - - - - Heading 3 - - - - Lorem ipsum dolor sit amet. In adipisci consequatur qui laudantium rem - praesentium earum ut consectetur. Lorem ipsum dolor sit amet. In - adipisci consequatur qui laudantium rem praesentium earum ut - consectetur. - - - - - - - -); - -export const VerticalNoIcon: ComponentStory = () => ( - - - - Heading 3 - - - Lorem ipsum dolor sit amet. In adipisci consequatur qui laudantium rem - praesentium earum ut consectetur. Lorem ipsum dolor sit amet. In - adipisci consequatur qui laudantium rem praesentium earum ut - consectetur. - - - - - - -); - -export const Hero: ComponentStory = () => ( - - - - Heading 3 - - - Lorem ipsum dolor sit amet. In adipisci consequatur qui laudantium rem - praesentium earum ut consectetur. Lorem ipsum dolor sit amet. In - adipisci consequatur qui laudantium rem praesentium earum ut - consectetur. - - - - - - -); - -export const VerticalCustom: ComponentStory = () => ( - - - - - Heading 3 - - - -
    -
  • Lorem ipsum dolor sit amet.
    • -
  • - In adipisci consequatur qui laudantium rem praesentium earum ut. -
    • -
  • Consectetur.
    • -
- - -
    -
  • Lorem ipsum dolor sit amet.
    • -
  • - In adipisci consequatur qui laudantium rem praesentium earum ut. -
    • -
  • Consectetur.
    • -
- - - - - - - -); diff --git a/packages/fuselage/src/components/Card/Card.styles.scss b/packages/fuselage/src/components/Card/Card.styles.scss index ff7a159f56..e8c294191e 100644 --- a/packages/fuselage/src/components/Card/Card.styles.scss +++ b/packages/fuselage/src/components/Card/Card.styles.scss @@ -2,9 +2,11 @@ @use '../../styles/functions'; @use '../../styles/lengths.scss'; -$card-spacing: lengths.margin(4); +$card-spacing: lengths.margin(8); $card-vertical-padding: lengths.padding(20); +$card-vertical-gap: lengths.margin(24); $card-horizontal-padding: lengths.padding(12); +$card-horizontal-gap: lengths.padding(16); $card-hero-padding: lengths.padding(28); .rcx-card { @@ -27,40 +29,35 @@ $card-hero-padding: lengths.padding(28); background-color: colors.surface(hover); } } + + &__header, + &__title, + &__controls, + &__body, + &__row, + &__col { + gap: $card-spacing; + } + + &__controls { + align-items: center; + } } // Card horizontal .rcx-card__horizontal { - justify-content: center; align-items: center; padding: $card-horizontal-padding; + gap: $card-horizontal-gap; .rcx-card__controls { justify-content: flex-end; - align-items: center; - - margin-inline-start: lengths.margin(16); - } - - .rcx-card__row, - .rcx-card__header, - .rcx-card__controls { - & > * { - margin-inline: $card-spacing; - } + flex-shrink: 0; } &--wrap { - flex-direction: column; - align-items: flex-start; - - .rcx-card__controls { - justify-content: flex-start; - - margin-block-start: lengths.margin(16); - margin-inline-start: lengths.margin(none); - } + flex-wrap: wrap; } } @@ -69,37 +66,7 @@ $card-hero-padding: lengths.padding(28); flex-direction: column; padding: $card-vertical-padding; - - > .rcx-card__col, - > .rcx-card__row, - .rcx-card__header, - .rcx-card__controls { - & > * { - margin-inline: $card-spacing; - } - } - - .rcx-card__row { - margin-block-end: $card-spacing; - - &:last-child { - margin-block-end: lengths.margin(none); - } - } - - .rcx-card__controls { - align-items: flex-end; - flex-grow: 1; - } - - .rcx-card__body { - margin-block: lengths.margin(24); - margin-inline: lengths.margin(none); - } - - .rcx-card__header { - margin: lengths.margin(none); - } + gap: $card-vertical-gap; } // Card hero @@ -107,20 +74,6 @@ $card-hero-padding: lengths.padding(28); padding: $card-hero-padding; } -// Remove margin from first and last child of a group -.rcx-card__header, -.rcx-card__col, -.rcx-card__row, -.rcx-card__controls { - & > :first-child { - margin-inline-start: lengths.margin(none); - } - - & > :last-child { - margin-inline-end: lengths.margin(none); - } -} - .rcx-card__title, .rcx-card__row, .rcx-card__header, @@ -129,11 +82,12 @@ $card-hero-padding: lengths.padding(28); align-items: center; } -.rcx-card__controls { - flex-grow: 1; -} - .rcx-card__col { display: flex; flex-direction: column; } + +.rcx-card__row { + // flex-grow: 1; + // flex-shrink: 1; +} diff --git a/packages/fuselage/src/components/Card/CardTitle.tsx b/packages/fuselage/src/components/Card/CardTitle.tsx index 84eb6f4d2a..f7f5e4f606 100644 --- a/packages/fuselage/src/components/Card/CardTitle.tsx +++ b/packages/fuselage/src/components/Card/CardTitle.tsx @@ -16,7 +16,7 @@ const CardTitle = ({ } & Omit, 'is'>) => ( {children} - {info && } + {info && } ); diff --git a/packages/fuselage/src/components/CardGroup/CardGroup.stories.tsx b/packages/fuselage/src/components/CardGroup/CardGroup.stories.tsx index 71ed13b690..637324d40e 100644 --- a/packages/fuselage/src/components/CardGroup/CardGroup.stories.tsx +++ b/packages/fuselage/src/components/CardGroup/CardGroup.stories.tsx @@ -22,27 +22,24 @@ export default { component: CardGroup, parameters: { backgrounds: { default: 'dark' }, - layout: 'centered', + layout: 'padded', controls: { hideNoControlsWarning: true }, }, } as ComponentMeta; const CardItem = (props: ComponentProps) => ( - - - - - Heading 3 - - - - Lorem ipsum dolor sit amet. In adipisci consequatur qui laudantium rem - praesentium earum ut consectetur. Lorem ipsum dolor sit amet. In - adipisci consequatur qui laudantium rem praesentium earum ut - consectetur. - - + + + + Heading 3 + + + + Lorem ipsum dolor sit amet. In adipisci consequatur qui laudantium rem + praesentium earum ut consectetur. Lorem ipsum dolor sit amet. In adipisci + consequatur qui laudantium rem praesentium earum ut consectetur. + + + + + + Tag + + + + + + + +`; + +exports[`[Card Rendering] renders Hero without crashing 1`] = ` + +
+
+

+ Heading 3 +

+
+ Lorem ipsum dolor sit amet. In adipisci consequatur qui laudantium rem praesentium earum ut consectetur. Lorem ipsum dolor sit amet. In adipisci consequatur qui laudantium rem praesentium earum ut consectetur.
@@ -79,7 +170,7 @@ exports[`[Card Rendering] renders Horizontal without crashing 1`] = `
+ + Lorem ipsum dolor sit amet. + + + + Lorem ipsum dolor sit amet. +
-
-
    -
  • - Lorem ipsum dolor sit amet. -
    • -
  • - In adipisci consequatur qui laudantium rem praesentium earum ut. -
    • -
  • - Consectetur. -
    • -
-
-
-
    -
  • - Lorem ipsum dolor sit amet. -
    • -
  • - In adipisci consequatur qui laudantium rem praesentium earum ut. -
    • -
  • - Consectetur. -
    • -
-
+ + + Lorem ipsum dolor sit amet. + + + + Lorem ipsum dolor sit amet. + + + + Lorem ipsum dolor sit amet. +
+

+ Heading 3 +

-
-

- Heading 3 -

-
-
- Lorem ipsum dolor sit amet. In adipisci consequatur qui laudantium rem praesentium earum ut consectetur. Lorem ipsum dolor sit amet. In adipisci consequatur qui laudantium rem praesentium earum ut consectetur. -
+ Lorem ipsum dolor sit amet. In adipisci consequatur qui laudantium rem praesentium earum ut consectetur. Lorem ipsum dolor sit amet. In adipisci consequatur qui laudantium rem praesentium earum ut consectetur.