feat(Image): 'fluid' variant and size variables (#54)

* introduce support for resizing Image

* introduce fluent variant

* update changelog

* fix prop definitions

CHANGELOG.md

@@ -26,6 +26,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Features
 - Update styles for Menu underlined primary @miroslavstastny ([#20](https://github.com/stardust-ui/react/pull/20))
 - Add Avatar `getInitials` prop and `presenceIndicatorBackground` variable @mnajdova ([#38](https://github.com/stardust-ui/react/pull/38))
+- Add 'fluid' variant and size variables to Image @kuzhelov ([#54](https://github.com/stardust-ui/react/pull/54))
 
 <!--------------------------------[ v0.2.5 ]------------------------------- -->
 ## [v0.2.5](https://github.com/stardust-ui/react/tree/v0.2.5) (2018-08-03)

docs/src/examples/components/Image/Types/ImageExample.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Image } from '@stardust-ui/react'
 
-const ImageExample = () => <Image src="//placehold.it/100" />
+const ImageExample = () => <Image src="public/images/wireframe/square-image.png" />
 
 export default ImageExample

docs/src/examples/components/Image/Variations/ImageExampleFluid.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Image, Layout } from '@stardust-ui/react'
+
+const ImageExampleFluent = () => (
+  <div>
+    <Layout
+      style={{ maxWidth: '70px' }}
+      debug
+      renderMainArea={() => <Image fluid src="public/images/wireframe/square-image.png" />}
+    />
+    <Layout
+      style={{ maxWidth: '100px' }}
+      debug
+      renderMainArea={() => <Image fluid src="public/images/wireframe/square-image.png" />}
+    />
+    <Layout
+      style={{ maxWidth: '150px' }}
+      debug
+      renderMainArea={() => <Image fluid src="public/images/wireframe/square-image.png" />}
+    />
+  </div>
+)
+
+export default ImageExampleFluent

docs/src/examples/components/Image/Variations/index.tsx

@@ -4,6 +4,11 @@ import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
 const Variations = () => (
   <ExampleSection title="Variations">
+    <ComponentExample
+      title="Fluid"
+      description="An image can take up the width of its container."
+      examplePath="components/Image/Variations/ImageExampleFluid"
+    />
     <ComponentExample
       title="Circular"
       description="An image may appear circular."

src/components/Image/Image.tsx

@@ -13,14 +13,12 @@ class Image extends UIComponent<any, any> {
 
   static displayName = 'Image'
 
-  static handledProps = ['as', 'avatar', 'circular', 'className']
-
   static rules = imageRules
 
   static variables = imageVariables
 
   static propTypes = {
-    /**  */
+    /** An element type to render as. */
     as: customPropTypes.as,
 
     /** An image may be formatted to appear inline with text as an avatar. */
@@ -29,9 +27,15 @@ class Image extends UIComponent<any, any> {
     /** An image can appear circular. */
     circular: PropTypes.bool,
 
+    /** Additional classes. */
     className: PropTypes.string,
+
+    /** An image can take up the width of its container. */
+    fluid: PropTypes.bool,
   }
 
+  static handledProps = ['as', 'avatar', 'circular', 'className', 'fluid']
+
   static defaultProps = {
     as: 'img',
   }

src/components/Image/imageRules.tsx

@@ -4,6 +4,8 @@ export default {
   root: ({ props, variables }) => ({
     display: 'inline-block',
     verticalAlign: 'middle',
+    width: variables.width || (props.fluid && '100%'),
+    height: variables.height || 'auto',
     ...(props.circular && { borderRadius: pxToRem(9999) }),
     ...(props.avatar && {
       width: variables.avatarSize,

src/components/Image/imageVariables.ts

@@ -1,10 +1,8 @@
 import { pxToRem } from '../../lib'
 
-export default () => {
-  const vars: any = {}
-
-  vars.avatarRadius = pxToRem(9999)
-  vars.avatarSize = pxToRem(32)
-
-  return vars
-}
+export default () => ({
+  width: undefined,
+  height: undefined,
+  avatarRadius: pxToRem(9999),
+  avatarSize: pxToRem(32),
+})