Skip to content

Commit

Permalink
feat(card): add ray-card--row (#101)
Browse files Browse the repository at this point in the history
* feat(card): add a card--horizontal modifier

* fix(card): change name to row instead of horiztonal

* fix(card): remove some unneeded custom styles

* fix(card): fix typo and add a story

* fix(card): oop forgot to add image

* fix(card-row): add image on right support, add heading h2 styles

* fix(card-row): stack on mobile/tablet

* fix(ray-card): add support for all ratios

* fix(ray-card): add support for bg images

* chore: add responsive snapshots
  • Loading branch information
Celeste Glavin authored May 17, 2019
1 parent a9488ef commit d45d2d8
Showing 4 changed files with 155 additions and 8 deletions.
16 changes: 12 additions & 4 deletions docs/components/card.md
Original file line number Diff line number Diff line change
@@ -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>

@@ -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
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">
<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
Original file line number Diff line number Diff line change
@@ -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;
}
57 changes: 57 additions & 0 deletions packages/core/stories/card.stories.js
Original file line number Diff line number Diff line change
@@ -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);

storiesOf('Card', module)
.addParameters({
chromatic: { viewports }
})
.add('card, link, image on top', () => (
<a
href="https://wework.com"
@@ -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>
));

0 comments on commit d45d2d8

Please sign in to comment.