Skip to content

Commit

Permalink
fix: solved grid problems and add necessary tokens
Browse files Browse the repository at this point in the history
  • Loading branch information
@jgonza16
jgonza16 committed Mar 12, 2024
1 parent 415b229 commit d1dad72
Show file tree
Hide file tree
Showing 4 changed files with 209 additions and 28 deletions.
1 change: 0 additions & 1 deletion example/src/components/CardDemo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import { faAngleRight } from '@fortawesome/free-solid-svg-icons';
import './cardDemo.scss';

export const CardDemo = () => {
console.log('HELLO');
return (
<div className="demo-cards-container">
<h1>Horizontal card example</h1>
Expand Down
90 changes: 69 additions & 21 deletions src/design-system/card.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,24 @@
/*
* Default
*/

background: token('color-background-card_box');
box-sizing: border-box;
background: token('color-background-card_box-default');
padding: token('spacing-x-card_box') token('spacing-y-card_box');
height: 100%;
box-shadow: token('box-shadow-card_box');
border-radius: token('border-radius-card_box');
border: token('border-width-card_box') token('border-style-card_box')
token('border-color-card_box-default');

.dcx-card-header {
line-height: token('line-height-header-card_box');
}

.dcx-card-content {
line-height: token('line-height-content-card_box');
&.dcx-card-interact {
&.dcx-card--selected {
border-color: token('border-color-card_box-selected');
background: token('color-background-card_box-selected');
}
&:hover {
border-color: token('border-color-card_box-hover');
background: token('color-background-card_box-hover');
}
}

.dcx-card-actions {
Expand All @@ -29,28 +37,68 @@

&.dcx-card-horizontal {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;

column-gap: token('spacing-y-card_box');
&:has(.dcx-card-image):has(.dcx-card-header):has(.dcx-card-content):has(.dcx-card-actions):has(.dcx-card-footer) {
grid-template-areas:
'card-image card-header'
'card-image card-content'
'card-image card-actions'
'card-image card-footer';
}
&:has(.dcx-card-image):has(.dcx-card-header):has(.dcx-card-content):has(.dcx-card-footer) {
grid-template-areas:
'card-image card-header'
'card-image card-content'
'card-image card-footer';
}
&:has(.dcx-card-image):has(.dcx-card-header):has(.dcx-card-content):has(.dcx-card-actions) {
grid-template-areas:
'card-image card-header'
'card-image card-content'
'card-image card-actions';
}
&:has(.dcx-card-image):has(.dcx-card-header):has(.dcx-card-content) {
grid-template-areas:
'card-image card-header'
'card-image card-content';
}
&:has(.dcx-card-image):has(.dcx-card-content) {
grid-template-areas: 'card-image card-content';
}
&:has(.dcx-card-image):has(.dcx-card-content):has(.dcx-card-actions):has(.dcx-card-footer) {
grid-template-areas:
'card-image card-content'
'card-image card-actions'
'card-image card-footer';
}
&:has(.dcx-card-image):has(.dcx-card-content):has(.dcx-card-footer) {
grid-template-areas:
'card-image card-content'
'card-image card-actions';
}
&:has(.dcx-card-image):has(.dcx-card-content):has(.dcx-card-actions) {
grid-template-areas:
'card-image card-content'
'card-image card-actions';
}
&:not(:has(.dcx-card-image)) {
display: flex;
flex-direction: column;
}
.dcx-card-header {
grid-column: 1;
grid-row: 1;
grid-area: card-header;
}
.dcx-card-image {
grid-column: 1;
grid-row: 2;
grid-area: card-image;
}
.dcx-card-content {
grid-column: 2;
grid-row: 2;
grid-area: card-content;
}
.dcx-card-actions {
grid-column: 2;
grid-row: 3;
grid-area: card-actions;
}
.dcx-card-footer {
grid-column: 1/2;
grid-row: 4;
grid-area: card-footer;
}
}
}
13 changes: 10 additions & 3 deletions src/design-system/tokens.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,25 @@
"border-color-action-hover-primary": "#3f51c9",
"border-color-action-hover-secondary": "#454545",
"border-color-action-hover-tertiary": "transparent",
"border-color-card_box-default": "transparent",
"border-color-card_box-selected": "#3f51b0",
"border-color-card_box-hover": "#3f51c9",
"border-color-formcontrol": "#000",
"border-radius-action": "6px",
"border-radius-card_box": "6px",
"border-radius-formcontrol": "4px",
"border-radius-formcontrol-floating": "4px",
"border-radius-abbreviate": "3px",
"border-style-action": "solid",
"border-style-card_box": "solid",
"border-width-action": "1px",
"border-width-card_box": "1px",
"border-width-formcontrol": "1px",
"border-width-formcontrol-floating": "1px",
"border-width-formcontrol_prefix": "1px",
"border-width-formcontrol_suffix": "1px",
"box-shadow-action": "0px 8px 15px rgba(0, 0, 0, 0.1)",
"box-shadow-card_box": "0px 8px 15px rgba(0, 0, 0, 0.1)",
"color-background-action-active-primary": "#3f51c9",
"color-background-action-active-secondary": "transparent",
"color-background-action-active-tertiary": "#3f51b0",
Expand All @@ -41,7 +48,9 @@
"color-background-action-hover-primary": "#3f51c9",
"color-background-action-hover-secondary": "transparent",
"color-background-action-hover-tertiary": "#3f51b0",
"color-background-card_box": "transparent",
"color-background-card_box-default": "transparent",
"color-background-card_box-selected": "transparent",
"color-background-card_box-hover": "#CFD1D0",
"color-background-formcontrol": "transparent",
"color-background-formcontrol-floating": "transparent",
"color-background-formcontrol_label": "transparent",
Expand Down Expand Up @@ -135,8 +144,6 @@
"font-weight-highlight_body": "normal",
"font-weight-paragraph": "bold",
"font-weight-pre_body": "normal",
"line-height-content-card_box": "18px",
"line-height-header-card_box": "22px",
"spacing-pre_box": "6px",
"spacing-x-action": "8px",
"spacing-x-action_label": "6px",
Expand Down
133 changes: 130 additions & 3 deletions stories/Card/design-system/Default.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { Card } from '../../../src/card/Card';
import { Heading } from '../../../src/heading/Heading';
import { Button } from '../../../src/button/Button';
import { Paragraph } from '../../../src/paragraph/Paragraph';
import React from 'react';

/**
* Here we display the component in its natural form, importing only the base Design System styles.
Expand All @@ -35,7 +36,9 @@ export const Default = {
variant: 'default',
children: [
<>
<CardHeader></CardHeader>
<CardHeader>
<Heading level="h3" label="John Doe" />
</CardHeader>
<CardImage src="https://placehold.co/100" alt="" />
<CardContent>
<Paragraph>
Expand All @@ -54,8 +57,86 @@ export const Default = {
},
};

export const DefaultHorizontal = {
name: 'Default horizontal',
export const InteractVariationSelectedEffect = {
name: 'Interact Variation',
render: function MyCard() {
const [selected, setSelected] = React.useState(false);
return (
<Card
selected={selected}
variant="interact"
onClick={() => setSelected(!selected)}
tabIndex="1"
aria-selected={selected}
>
<CardImage src="https://placehold.co/200x200" alt="alt card image" />
<CardHeader>
<Heading level="h3" label="John Doe" />
</CardHeader>
<CardContent>
Nullam sodales semper ipsum, et luctus lacus sodales in. Nulla nibh
nisl, egestas et elit et, interdum cursus massa.
</CardContent>
</Card>
);
},
};

export const FullHorizontal = {
name: 'Full horizontal',
args: {
variant: 'default',
layout: 'horizontal',
children: [
<>
<CardHeader>
<Heading level="h3" label="John Doe" />
</CardHeader>
<CardImage src="https://placehold.co/200" alt="" />
<CardContent>
<Paragraph>
Nullam sodales semper ipsum, et luctus lacus sodales in. Nulla nibh
nisl, egestas et elit et, interdum cursus massa.
</Paragraph>
</CardContent>
<CardActions>
<Button label="Read more" />
</CardActions>
<CardFooter>
<Paragraph>12/02/2024</Paragraph>
</CardFooter>
</>,
],
},
};

export const HorizontalNoFooter = {
name: 'Horizontal No Footer',
args: {
variant: 'default',
layout: 'horizontal',
children: [
<>
<CardHeader>
<Heading level="h3" label="John Doe" />
</CardHeader>
<CardImage src="https://placehold.co/200" alt="" />
<CardContent>
<Paragraph>
Nullam sodales semper ipsum, et luctus lacus sodales in. Nulla nibh
nisl, egestas et elit et, interdum cursus massa.
</Paragraph>
</CardContent>
<CardActions>
<Button label="Read more" />
</CardActions>
</>,
],
},
};

export const HorizontalNoFooterNoActions = {
name: 'Horizontal without Footer and Actions',
args: {
variant: 'default',
layout: 'horizontal',
Expand All @@ -71,6 +152,52 @@ export const DefaultHorizontal = {
nisl, egestas et elit et, interdum cursus massa.
</Paragraph>
</CardContent>
</>,
],
},
};

export const HorizontalNoHeader = {
name: 'Horizontal No Header',
args: {
variant: 'default',
layout: 'horizontal',
children: [
<>
<CardImage src="https://placehold.co/200" alt="" />
<CardContent>
<Paragraph>
Nullam sodales semper ipsum, et luctus lacus sodales in. Nulla nibh
nisl, egestas et elit et, interdum cursus massa.
</Paragraph>
</CardContent>
<CardActions>
<Button label="Read more" />
</CardActions>
<CardFooter>
<Paragraph>12/02/2024</Paragraph>
</CardFooter>
</>,
],
},
};

export const HorizontalNoImage = {
name: 'Horizontal No Imagel',
args: {
variant: 'default',
layout: 'horizontal',
children: [
<>
<CardHeader>
<Heading level="h3" label="John Doe" />
</CardHeader>
<CardContent>
<Paragraph>
Nullam sodales semper ipsum, et luctus lacus sodales in. Nulla nibh
nisl, egestas et elit et, interdum cursus massa.
</Paragraph>
</CardContent>
<CardActions>
<Button label="Read more" />
</CardActions>
Expand Down

0 comments on commit d1dad72

Please sign in to comment.