fix: add caption element for media

Author: Adam Raider

docs/components/image.md

@@ -3,10 +3,10 @@ label: Component
 title: Image
 ---
 
-<page-intro>The `image` and `bg` components provide an easy way to add fixed aspect-ratio graphics to your site.</page-intro>
+<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 
-    name="Image 16x9"
+    name="Image 16x9 with caption"
     component="image"
     variation="image--16by9" 
     >
@@ -30,8 +30,8 @@ title: Image
 
 Use these modifiers with `.ray-image` or `.ray-bg` classes.
 
-| Selector          | Description                       |
-| ----------------- | --------------------------------- |
-| .ray-image--3by4  | Selector for 3 by 4 aspect ratio  |
-| .ray-image--16by9 | Selector for 16 by 9 aspect ratio |
-| .ray-image--4By3  | Selector for 4 By 3 aspect ratio  |
+| 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  |

docs/html/image/image--16by9.html

@@ -3,4 +3,10 @@
     class="ray-bg ray-bg--16by9"
     style="background-image: url(https://source.unsplash.com/random/400x300?minimalist);"
   ></div>
+
+  <!-- optional caption element -->
+  <div class="ray-caption">
+    Vangelis Drake Equation explorations venture Rig Veda encyclopaedia
+    galactica.
+  </div>
 </div>

docs/html/image/image--4by3.html

@@ -3,4 +3,9 @@
     class="ray-bg ray-bg--4by3"
     style="background-image: url(https://source.unsplash.com/random/800x400?minimalist);"
   ></div>
+  <!-- optional caption element -->
+  <div class="ray-caption">
+    Consciousness are creatures of the cosmos rings of Uranus another world
+    colonies concept of the number one.
+  </div>
 </div>

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

@@ -18,6 +18,22 @@
   }
 }
 
+.#{$ray-class-prefix}caption {
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  max-height: 2.5rem;
+  font-family: $ray-font-stack-mono;
+  text-transform: uppercase;
+  overflow: hidden;
+  text-overflow: -o-ellipsis-lastline;
+  text-overflow: ellipsis;
+  text-align: right;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  margin-top: $ray-spacing-xs;
+}
+
 .#{$ray-class-prefix}image {
   @include image;
 

packages/core/stories/image.stories.js

@@ -37,4 +37,39 @@ storiesOf('Image', module)
         }}
       />
     </div>
+  ))
+  .add('img with caption', () => (
+    <div style={{ maxWidth: '500px' }}>
+      <div className="ray-image ray-image--16by9">
+        <img src={getPlaceholderURL('800x800')} />
+      </div>
+      <div className="ray-caption">
+        12pt apercu mono caption relating to this image
+      </div>
+    </div>
+  ))
+  .add('img with long caption', () => (
+    <div style={{ maxWidth: '500px' }}>
+      <div className="ray-image ray-image--16by9">
+        <img src={getPlaceholderURL('800x800')} />
+      </div>
+      <div className="ray-caption">
+        12pt apercu mono caption relating to this image but the caption is
+        longer than something ideal and maybe it has for some reason scaled
+      </div>
+    </div>
+  ))
+  .add('bg with caption', () => (
+    <div style={{ maxWidth: '400px' }}>
+      <div
+        className="ray-bg ray-bg--3by4"
+        style={{
+          backgroundImage: `url(${getPlaceholderURL('800x1200')})`
+        }}
+      />
+      <div className="ray-caption">
+        12pt apercu mono caption relating to this image but the caption is
+        longer than something ideal and maybe it has for some reason scaled
+      </div>
+    </div>
   ));