fix(image): programmatically generate image classes and adds new rati…

…os (#29)

* refactor(image): programatically generate image classes

* docs: add new aspec ratios to docs

docs/components/image.md

@@ -30,8 +30,10 @@ title: Image
 
 Use these modifiers with `.ray-image` or `.ray-bg` classes.
 
-| Selector | Description |
-| ----------------------- | --------------------------------- |
-| .ray-{image\|bg}--3by4 | Selector for 3 by 4 aspect ratio |
-| .ray-{image\|bg}--16by9 | Selector for 16 by 9 aspect ratio |
-| .ray-{image\|bg}--4by3 | Selector for 4 By 3 aspect ratio |
+| Selector | Description |
+| ------------------------ | -------------------------------------- |
+| .ray-{image\|bg}--3by4 | Selector for 3:4 aspect ratio |
+| .ray-{image\|bg}--16by9 | Selector for 16:9 aspect ratio |
+| .ray-{image\|bg}--4by3 | Selector for 4:3 aspect ratio |
+| .ray-{image\|bg}--1by1 | Selector for 1:1 aspect ratio |
+| .ray-{image\|bg}--cinema | Selector for 2.4:1 cinema aspect ratio |

packages/core/src/components/image/_image.scss

@@ -1,3 +1,11 @@
+$ray-image-ratio-map: (
+ 4by3: calc(100% / (4 / 3)),
+ 3by4: calc(100% / (3 / 4)),
+ 1by1: calc(100% / 1),
+ 16by9: calc(100% / (16 / 9)),
+ cinema: calc(100% / 2.4)
+);
+
 @mixin image {
  display: block;
  width: 100%;
@@ -37,18 +45,10 @@
 .#{$ray-class-prefix}image {
  @include image;
 
- &--16by9 {
- padding-bottom: calc(100% / (16 / 9));
- }
-
- &--3by4 {
- @include image;
- padding-bottom: calc(100% / (3 / 4));
- }
-
- &--4by3 {
- @include image;
- padding-bottom: calc(100% / (4 / 3));
+ @each $ratio, $value in $ray-image-ratio-map {
+ &--#{$ratio} {
+ padding-bottom: $value;
+ }
  }
 }
 
@@ -67,17 +67,9 @@
 .#{$ray-class-prefix}bg {
  @include background;
 
- &--16by9 {
- padding-bottom: calc(100% / (16 / 9));
- }
-
- &--3by4 {
- @include background;
- padding-bottom: calc(100% / (3 / 4));
- }
-
- &--4by3 {
- @include background;
- padding-bottom: calc(100% / (4 / 3));
+ @each $ratio, $value in $ray-image-ratio-map {
+ &--#{$ratio} {
+ padding-bottom: $value;
+ }
  }
 }

packages/core/stories/image.stories.js

@@ -4,28 +4,28 @@ import { storiesOf } from '@storybook/react';
 import getPlaceholderURL from './util/placeholder';
 
 storiesOf('Image', module)
- .add('16/9 img', () => (
+ .add('16:9 img', () => (
  <div style={{ maxWidth: '500px' }}>
  <div className="ray-image ray-image--16by9">
  <img src={getPlaceholderURL('800x800')} />
  </div>
  </div>
  ))
- .add('3/4 img', () => (
+ .add('3:4 img', () => (
  <div style={{ maxWidth: '400px' }}>
  <div className="ray-image ray-image--3by4">
  <img src={getPlaceholderURL('800x1200')} />
  </div>
  </div>
  ))
- .add('4/3 img', () => (
+ .add('4:3 img', () => (
  <div style={{ maxWidth: '400px' }}>
  <div className="ray-image ray-image--4by3">
  <img src={getPlaceholderURL('1200x800')} />
  </div>
  </div>
  ))
- .add('16/9 background', () => (
+ .add('16:9 background', () => (
  <div style={{ maxWidth: '500px' }}>
  <div
  className="ray-bg ray-bg--16by9"
@@ -35,7 +35,7 @@ storiesOf('Image', module)
  />
  </div>
  ))
- .add('3/4 background', () => (
+ .add('3:4 background', () => (
  <div style={{ maxWidth: '400px' }}>
  <div
  className="ray-bg ray-bg--3by4"
@@ -45,7 +45,7 @@ storiesOf('Image', module)
  />
  </div>
  ))
- .add('4/3 background', () => (
+ .add('4:3 background', () => (
  <div style={{ maxWidth: '400px' }}>
  <div
  className="ray-bg ray-bg--4by3"
@@ -55,6 +55,26 @@ storiesOf('Image', module)
  />
  </div>
  ))
+ .add('1:1 background', () => (
+ <div style={{ maxWidth: '400px' }}>
+ <div
+ className="ray-bg ray-bg--1by1"
+ style={{
+ backgroundImage: `url(${getPlaceholderURL('1200x800')})`
+ }}
+ />
+ </div>
+ ))
+ .add('Cinema background', () => (
+ <div style={{ maxWidth: '400px' }}>
+ <div
+ className="ray-bg ray-bg--cinema"
+ style={{
+ backgroundImage: `url(${getPlaceholderURL('1200x800')})`
+ }}
+ />
+ </div>
+ ))
  .add('img with caption', () => (
  <div style={{ maxWidth: '500px' }}>
  <div className="ray-image ray-image--16by9">