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

feat(card): add ray-card--row #101

Merged
merged 10 commits into from
May 17, 2019
Merged

feat(card): add ray-card--row #101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
879480d
feat(card): add a card--horizontal modifier
May 16, 2019
d073474
fix(card): change name to row instead of horiztonal
May 16, 2019
ed6a8d5
fix(card): remove some unneeded custom styles
May 16, 2019
279979f
fix(card): fix typo and add a story
May 16, 2019
0047d82
fix(card): oop forgot to add image
May 16, 2019
4fd9485
fix(card-row): add image on right support, add heading h2 styles
May 17, 2019
c7ab6d1
fix(card-row): stack on mobile/tablet
May 17, 2019
8eaa057
fix(ray-card): add support for all ratios
May 17, 2019
1a92836
fix(ray-card): add support for bg images
May 17, 2019
776ca26
chore: add responsive snapshots
May 17, 2019
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
16 changes: 12 additions & 4 deletions docs/components/card.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,24 @@ title: Card

<page-intro>Cards are a unit of content, they typically have an image, a heading, and a small amount of copy. They are often used as links.</page-intro>

<component
<component
name="Card"
component="card"
variation="card"
variation="card"
>
</component>

<component
<component
name="Card as a row"
component="card"
variation="card--row"
>
</component>

<component
name="Card as a link"
component="card"
variation="card--link"
variation="card--link"
>
</component>

Expand All @@ -26,3 +33,4 @@ Use these modifiers with `.ray-card` class.
| Selector | Description |
| ----------------- | ------------------------------------------- |
| `.ray-card--link` | Selector for applying link and hover styles |
| `.ray-card--row` | Selector for applying row direction |
16 changes: 16 additions & 0 deletions docs/html/card/card--row.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<div class="ray-card ray-card--row">
<div class="ray-card__image ray-image ray-image--16by9">
cmugla marked this conversation as resolved.
Show resolved Hide resolved
<img
src="https://source.unsplash.com/random/800x450?minimalist"
alt="card graphic"
/>
</div>

<div class="ray-card__content">
<div class="ray-card__heading">Better Together</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem atque
minima itaque sint! Doloremque odio quia saepe.
</div>
</div>
</div>
74 changes: 70 additions & 4 deletions packages/core/src/components/card/_card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,20 +40,86 @@
}
}

$ray-image-ratio-map-half: (
4by3: calc(50% / (4 / 3)),
3by4: calc(50% / (3 / 4)),
1by1: calc(50% / 1),
16by9: calc(50% / (16 / 9)),
cinema: calc(50% / 2.4)
);

&--row {
@media (min-width: map-get($ray-layout-grid-breakpoints, desktop)) {
@each $ratio, $value in $ray-image-ratio-map-half {
.#{$ray-class-prefix}image--#{$ratio} {
padding-bottom: $value;
}
}

@each $ratio, $value in $ray-image-ratio-map-half {
.#{$ray-class-prefix}bg--#{$ratio} {
padding-bottom: $value;
}
}

.#{$ray-class-prefix}card__content {
padding: 2.5rem;

&:first-child {
border: $ray-border-width solid $ray-color-gray-10;
border-right: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: $ray-border-radius;
border-top-right-radius: 0;
border-top-left-radius: $ray-border-radius;
}

&:last-child {
border-top: $ray-border-width solid $ray-color-gray-10;
border-bottom-right-radius: $ray-border-radius;
border-top-right-radius: $ray-border-radius;
border-bottom-left-radius: 0;
border-left: 0;
}
}

flex-direction: row;

.#{$ray-class-prefix}card__image,
.#{$ray-class-prefix}card__content {
width: 50%;
}

.#{$ray-class-prefix}card__heading {
@include ray-h2;
}

.#{$ray-class-prefix}card__image {
&:first-child {
border-top-right-radius: 0;
}

&:last-child {
border-bottom-left-radius: 0;
}
}
}
}

&__content {
flex-grow: 1;
padding: $card-padding;
border-left: 1px solid $ray-color-gray-10;
border-right: 1px solid $ray-color-gray-10;
border-left: $ray-border-width solid $ray-color-gray-10;
border-right: $ray-border-width solid $ray-color-gray-10;

&:first-child {
border-top: 1px solid $ray-color-gray-10;
border-top: $ray-border-width solid $ray-color-gray-10;
border-top-left-radius: $ray-border-radius;
border-top-right-radius: $ray-border-radius;
}

&:last-child {
border-bottom: 1px solid $ray-color-gray-10;
border-bottom: $ray-border-width solid $ray-color-gray-10;
border-bottom-left-radius: $ray-border-radius;
border-bottom-right-radius: $ray-border-radius;
}
Expand Down
57 changes: 57 additions & 0 deletions packages/core/stories/card.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,14 @@ import React from 'react';
import { storiesOf } from '@storybook/react';

import getPlaceholderURL from './util/placeholder';
import settings from '../src/global/js/settings';

const viewports = Object.values(settings.breakpointsInPixels).filter(Boolean);
Copy link
Contributor

Choose a reason for hiding this comment

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

we'll probs want to put this in a util, but this is cool for now


storiesOf('Card', module)
.addParameters({
chromatic: { viewports }
})
.add('card, link, image on top', () => (
<a
href="https://wework.com"
Expand Down Expand Up @@ -110,4 +116,55 @@ storiesOf('Card', module)
<button className="ray-link">Share</button>
</div>
</div>
))
.add('card, as a row, image on left', () => (
<div className="ray-card ray-card--row">
<div className="ray-card__image ray-image ray-image--16by9">
<img
src="https://source.unsplash.com/random/800x450?minimalist"
alt="card graphic"
/>
</div>
<div className="ray-card__content">
<div className="ray-card__heading">Better Together</div>
<p className="ray-text--body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem
atque minima itaque sint! Doloremque odio quia saepe.
</p>
</div>
</div>
))
.add('card, as a row, image on right', () => (
<div className="ray-card ray-card--row">
<div className="ray-card__content">
<div className="ray-card__heading">Better Together</div>
<p className="ray-text--body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem
atque minima itaque sint! Doloremque odio quia saepe.
</p>
</div>
<div className="ray-card__image ray-image ray-image--16by9">
<img
src="https://source.unsplash.com/random/800x450?minimalist"
alt="card graphic"
/>
</div>
</div>
))
.add('card, as a row, 4x3 image on left', () => (
<div className="ray-card ray-card--row">
<div className="ray-card__image ray-image ray-image--4by3">
<img
src="https://source.unsplash.com/random/800x600?minimalist"
alt="card graphic"
/>
</div>
<div className="ray-card__content">
<div className="ray-card__heading">Better Together</div>
<p className="ray-text--body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem
atque minima itaque sint! Doloremque odio quia saepe.
</p>
</div>
</div>
));