Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix/general card #88

Merged
merged 5 commits into from
Oct 26, 2023
Merged

Fix/general card #88

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e518ea7
fix: remove small general card story
dannyk3941 Oct 24, 2023
9b1da76
chore: add warning variant to general card
dannyk3941 Oct 25, 2023
f7eddca
chore: add storybook control to show/hide icon in general card header
dannyk3941 Oct 25, 2023
53eda9f
chore: add body text control in storybook
dannyk3941 Oct 25, 2023
b3501a9
fix: card title single line for extra space issue
dannyk3941 Oct 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 28 additions & 32 deletions packages/vanilla/src/components/card/generalCard.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,51 +16,52 @@ export default {
name: 'Modifier',
description: 'Set the modifier class of the card',
control: 'select',
options: ['default', 'info', 'success', 'danger']
options: ['default', 'info', 'success', 'danger', 'warning']
},
showIcon: {
name: 'Show Icon',
description: 'Show an icon in the title',
control: 'boolean'
},
bodyText: {
name: 'Body Text',
description: 'Set the body text of the card',
control: 'text'
}
}
};

const DefaultGeneralCardTemplate = ({ title, modifier }) => {
const DefaultGeneralCardTemplate = ({ title, modifier, showIcon, bodyText }) => {
return `
<div class="wrapper" style="display: grid; grid-template-columns: 432px">
<div class="cbp-card ${modifier != 'default' ? `cbp-card--${modifier}` : ''}">
<div class="cbp-card__content">
<div class="cbp-card__header">
<h4 class="cbp-card__title"><i class="fas fa-info-circle cbp-margin-right-2x"></i>${title}</h4>
<h4 class="cbp-card__title">
${showIcon ? '<i class="fas fa-info-circle cbp-margin-right-2x"></i>' : ''}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry this is nitpicky, but make sure to put the icon and the heading/title on the same line next to each other. The line break is showing up as a space and adding to the margin-right making a larger gap than intended. I've fixed a bunch of these when editing stories myself.

${title}
</h4>
</div>
<p class="cbp-text-body cbp-margin-top-4x">Here is an example of some supplementary text for this purely informational card</p>
<p class="cbp-text-body cbp-margin-top-4x">${bodyText}</p>
</div>
</div>
</div>
`;
};

const GeneralCardMediaTemplate = ({ title, modifier }) => {
const GeneralCardMediaTemplate = ({ title, modifier, showIcon, bodyText }) => {
return `
<div class="wrapper" style="display: grid; grid-template-columns: 486px">
<div class="cbp-card ${modifier} cbp-display-flex">
<div class="cbp-card ${modifier != 'default' ? `cbp-card--${modifier}` : ''} cbp-display-flex">
<img src="assets/images/profile-page/passenge-photo-v2.jpg" class="cbp-card__img-left" alt="portrait of a person" height="127" width="116">
<div class="cbp-card__content">
<div class="cbp-card__header">
<h4 class="cbp-card__title"><i class="fas fa-info-circle cbp-margin-right-2x"></i>${title}</h4>
</div>
<p class="cbp-text-body cbp-margin-top-4x">Here is an example of some supplementary text for this purely informational card</p>
</div>
</div>
</div>
`;
};

const SmallGeneralCardTemplate = ({ title, modifier }) => {
return `
<div class="wrapper" style="display: grid; grid-template-columns: 312px">
<div class="cbp-card ${modifier}">
<div class="cbp-card__content">
<div class="cbp-card__header">
<h4 class="cbp-card__title"><i class="fas fa-info-circle cbp-margin-right-2x"></i>${title}</h4>
<h4 class="cbp-card__title">
${showIcon ? '<i class="fas fa-info-circle cbp-margin-right-2x"></i>' : ''}
${title}
</h4>
</div>
<p class="cbp-text-body cbp-margin-top-4x">Here is an example of some supplementary text for this purely informational card</p>
<p class="cbp-text-body cbp-margin-top-4x">${bodyText}</p>
</div>
</div>
</div>
Expand All @@ -70,20 +71,15 @@ const SmallGeneralCardTemplate = ({ title, modifier }) => {
export const DefaultGeneralCard = DefaultGeneralCardTemplate.bind({});
DefaultGeneralCard.args = {
title: 'General Card',
modifier: 'default'
modifier: 'default',
bodyText: 'Here is an example of some supplementary text for this purely informational card'
};
DefaultGeneralCard.storyName = 'Default';

export const GeneralCardMedia = GeneralCardMediaTemplate.bind({});
GeneralCardMedia.args = {
title: 'General Card',
modifier: 'default'
modifier: 'default',
bodyText: 'Here is an example of some supplementary text for this purely informational card'
};
GeneralCardMedia.storyName = 'With Media';

export const SmallGeneralCard = SmallGeneralCardTemplate.bind({});
SmallGeneralCard.args = {
title: 'General Card',
modifier: 'default'
};
SmallGeneralCard.storyName = 'Small Size';
12 changes: 10 additions & 2 deletions packages/vanilla/src/sass/components/card/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.cbp-card {
border-color: var(--cbp-color-base-neutral-lighter);
border-color: var(--cbp-color-gray-cool-10);
border-style: solid;
border-width: var(--cbp-border-size-md);
border-radius: var(--cbp-border-radius-softer);
Expand Down Expand Up @@ -79,7 +79,15 @@
.cbp-card--danger {
@include card-general-modifier(
$background-color: var(--cbp-color-danger-lighter),
$border-color: var(--cbp-color-danger-light),
$border-color: var(--cbp-color-danger-base),
$title-color: var(--cbp-color-text-darker)
);
}

.cbp-card--warning {
@include card-general-modifier(
$background-color: var(--cbp-color-warning-lighter),
$border-color: var(--cbp-color-warning-base),
$title-color: var(--cbp-color-text-darker)
);
}
Expand Down