fix(image): 4by3 (#28)

* fix(image): 4by3 * docs: add storybook and update docs
wework · Mar 13, 2019 · 1955c5c · 1955c5c
1 parent 1518485
commit 1955c5c
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 8 deletions.
diff --git a/docs/components/image.md b/docs/components/image.md
@@ -5,24 +5,24 @@ title: Image
 
 <page-intro>The `image` and `bg` components provide an easy way to add fixed aspect-ratio graphics to your site. Images can have an optional \``.ray-caption`\` element to add additional context to specific pieces of media they accompany across the system.</page-intro>
 
-<component 
+<component
  name="Image 16x9 with caption"
  component="image"
- variation="image--16by9" 
+ variation="image--16by9"
  >
 </component>
 
-<component 
+<component
  name="Image 4x3 with caption"
  component="image"
- variation="image--4by3" 
+ variation="image--4by3"
  >
 </component>
 
-<component 
+<component
  name="Image 3x4"
  component="image"
- variation="image--3by4" 
+ variation="image--3by4"
  >
 </component>
 
@@ -34,4 +34,4 @@ Use these modifiers with `.ray-image` or `.ray-bg` classes.
 | ----------------------- | --------------------------------- |
 | .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 |
+| .ray-{image\|bg}--4by3 | Selector for 4 By 3 aspect ratio |
diff --git a/packages/core/src/components/image/_image.scss b/packages/core/src/components/image/_image.scss
@@ -46,7 +46,7 @@
  padding-bottom: calc(100% / (3 / 4));
  }
 
- &--4By3 {
+ &--4by3 {
  @include image;
  padding-bottom: calc(100% / (4 / 3));
  }

diff --git a/packages/core/stories/image.stories.js b/packages/core/stories/image.stories.js
@@ -18,6 +18,13 @@ storiesOf('Image', module)
  </div>
  </div>
  ))
+ .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', () => (
  <div style={{ maxWidth: '500px' }}>
  <div
@@ -38,6 +45,16 @@ storiesOf('Image', module)
  />
  </div>
  ))
+ .add('4/3 background', () => (
+ <div style={{ maxWidth: '400px' }}>
+ <div
+ className="ray-bg ray-bg--4by3"
+ style={{
+ backgroundImage: `url(${getPlaceholderURL('1200x800')})`
+ }}
+ />
+ </div>
+ ))
  .add('img with caption', () => (
  <div style={{ maxWidth: '500px' }}>
  <div className="ray-image ray-image--16by9">