From d45d2d82d4883ee9db162809cfa6f9ba15180484 Mon Sep 17 00:00:00 2001 From: Celeste Glavin Date: Fri, 17 May 2019 16:11:46 -0400 Subject: [PATCH] feat(card): add ray-card--row (#101) * 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 --- docs/components/card.md | 16 +++-- docs/html/card/card--row.html | 16 +++++ packages/core/src/components/card/_card.scss | 74 ++++++++++++++++++-- packages/core/stories/card.stories.js | 57 +++++++++++++++ 4 files changed, 155 insertions(+), 8 deletions(-) create mode 100644 docs/html/card/card--row.html diff --git a/docs/components/card.md b/docs/components/card.md index 787aadf0..bfe762b2 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -5,17 +5,24 @@ title: Card 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. - - + + + @@ -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 | diff --git a/docs/html/card/card--row.html b/docs/html/card/card--row.html new file mode 100644 index 00000000..6f1c80a8 --- /dev/null +++ b/docs/html/card/card--row.html @@ -0,0 +1,16 @@ +
+
+ card graphic +
+ +
+
Better Together
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem atque + minima itaque sint! Doloremque odio quia saepe. +
+
+
diff --git a/packages/core/src/components/card/_card.scss b/packages/core/src/components/card/_card.scss index be1009b9..dee3c5af 100644 --- a/packages/core/src/components/card/_card.scss +++ b/packages/core/src/components/card/_card.scss @@ -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; } diff --git a/packages/core/stories/card.stories.js b/packages/core/stories/card.stories.js index 1d90322d..3da1c0cf 100644 --- a/packages/core/stories/card.stories.js +++ b/packages/core/stories/card.stories.js @@ -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', () => ( Share + )) + .add('card, as a row, image on left', () => ( +
+
+ card graphic +
+
+
Better Together
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem + atque minima itaque sint! Doloremque odio quia saepe. +

+
+
+ )) + .add('card, as a row, image on right', () => ( +
+
+
Better Together
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem + atque minima itaque sint! Doloremque odio quia saepe. +

+
+
+ card graphic +
+
+ )) + .add('card, as a row, 4x3 image on left', () => ( +
+
+ card graphic +
+
+
Better Together
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem + atque minima itaque sint! Doloremque odio quia saepe. +

+
+
));