feat(image): Add responsive image css class

wework · Feb 27, 2019 · 9255112 · 9255112
1 parent 4c2683a
commit 9255112
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 21 deletions.
diff --git a/packages/ray/lib/_image.scss b/packages/ray/lib/_image.scss
@@ -0,0 +1,48 @@
+@mixin ImgContainer {
+  display: block;
+  width: 100%;
+  height: auto;
+  position: relative;
+  overflow: hidden;
+  background-color: $gray30;
+
+  img {
+    position: absolute;
+    width: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+  }
+}
+
+.ImgContainer--16by9 {
+  @include ImgContainer;
+  padding-bottom: calc(100% / (16 / 9));
+}
+
+.ImgContainer--3by4 {
+  @include ImgContainer;
+  padding-bottom: calc(100% / (3 / 4));
+}
+
+@mixin Background {
+  display: block;
+  width: 100%;
+  height: auto;
+  background-color: $gray30;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.Background--16by9 {
+  @include Background;
+  padding-bottom: calc(100% / (16 / 9));
+}
+
+.Background--3by4 {
+  @include Background;
+  padding-bottom: calc(100% / (3 / 4));
+}
diff --git a/packages/ray/lib/application.scss b/packages/ray/lib/application.scss
@@ -9,5 +9,5 @@
 @import 'typography';
 @import 'forms';
 @import 'card';
-
+@import 'image';
 @import 'buttons';
diff --git a/packages/ray/stories/card.stories.js b/packages/ray/stories/card.stories.js
@@ -1,26 +1,28 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 
-storiesOf('Card', module).addWithJSX('All', () => (
-  <div
-    style={{
-      padding: '1rem',
-      maxWidth: '400px'
-    }}
-  >
-    <div className="card">
-      <img
-        className="responsive-image"
-        src="https://source.unsplash.com/random/800x450"
-      />
+import withPadding from './util/withPadding';
 
-      <div className="card__content">
-        <h2 className="h5">Spacetravel guidelines</h2>
-        <p className="copy5">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem
-          atque minima itaque sint! Doloremque odio quia saepe.
-        </p>
+storiesOf('Card', module).addWithJSX('All', () =>
+  withPadding(
+    <div
+      style={{
+        maxWidth: '400px'
+      }}
+    >
+      <div className="card">
+        <div className="ImgContainer--16by9">
+          <img src="https://source.unsplash.com/random/800x450" />
+        </div>
+
+        <div className="card__content">
+          <h2 className="h5">Spacetravel guidelines</h2>
+          <p className="copy5">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem
+            atque minima itaque sint! Doloremque odio quia saepe.
+          </p>
+        </div>
       </div>
     </div>
-  </div>
-));
+  )
+);
diff --git a/packages/ray/stories/image.stories.js b/packages/ray/stories/image.stories.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+storiesOf('Image', module)
+  .addWithJSX('16/9 img', () => (
+    <div style={{ maxWidth: '500px' }}>
+      <div className="ImgContainer--16by9">
+        <img src="https://source.unsplash.com/random/800x800" />
+      </div>
+    </div>
+  ))
+  .addWithJSX('3/4 img', () => (
+    <div style={{ maxWidth: '400px' }}>
+      <div className="ImgContainer--3by4">
+        <img src="https://source.unsplash.com/random/800x1200" />
+      </div>
+    </div>
+  ))
+  .addWithJSX('16/9 background', () => (
+    <div style={{ maxWidth: '500px' }}>
+      <div
+        className="Background--16by9"
+        style={{
+          backgroundImage: `url(https://source.unsplash.com/random/800x800)`
+        }}
+      />
+    </div>
+  ))
+  .addWithJSX('3/4 background', () => (
+    <div style={{ maxWidth: '400px' }}>
+      <div
+        className="Background--3by4"
+        style={{
+          backgroundImage: `url(https://source.unsplash.com/random/800x1200)`
+        }}
+      />
+    </div>
+  ));