Merge 7606f59 into de1318a

src/components/MessageCard/MessageCard.css.js

@@ -14,7 +14,7 @@ export const MessageCardUI = styled(Card)`
   background-color: white;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
   border-radius: 8px;
-  padding: 20px 0 25px;
+  padding: 12px 0 10px;
   width: 300px;
   word-break: break-word;
   display: flex;
@@ -59,7 +59,6 @@ export const MessageCardUI = styled(Card)`
 export const TitleUI = styled(Heading)`
   ${fontFamily};
   line-height: 22px !important;
-  margin-top: 5px;
   padding: 0 20px;
   flex: 0 0 auto;
 `
@@ -271,6 +270,9 @@ export const ActionButtonUI = styled(Button)`
 
 export const ImageUI = styled(Image)`
   border-radius: 3px;
+  height: ${({ height }) => `${height}px` || 'auto'};
+  width: ${({ width }) => `${width}px` || '100%'};
+  max-height: 278px;
 `
 
 export const ImageContainerUI = styled('div')`
@@ -279,4 +281,5 @@ export const ImageContainerUI = styled('div')`
   width: 100%;
   margin-top: 20px;
   padding: 0 10px;
+  max-height: 278px;
 `

src/components/MessageCard/MessageCard.jsx

@@ -6,16 +6,29 @@ import { classNames } from '../../utilities/classNames'
 import { noop } from '../../utilities/other'
 import Animate from '../Animate'
 import {
-  MessageCardUI,
-  TitleUI,
-  SubtitleUI,
-  BodyUI,
   ActionUI,
-  ImageUI,
+  BodyUI,
   ImageContainerUI,
+  ImageUI,
+  MessageCardUI,
+  SubtitleUI,
+  TitleUI,
 } from './MessageCard.css'
 import Truncate from '../Truncate'
 
+const MAX_IMAGE_SIZE = 278
+
+const sizeWithRatio = (
+  recalculatedSide,
+  otherSide,
+  defaultValue = recalculatedSide
+) =>
+  // Check if other side is smaller than max size to not recalculate unnecessarily this side as it doesn't need any scaling
+  // other condition checks that the image fits the boundaries
+  otherSide < MAX_IMAGE_SIZE
+    ? defaultValue
+    : (recalculatedSide / otherSide) * MAX_IMAGE_SIZE
+
 export class MessageCard extends React.PureComponent {
   static className = 'c-MessageCard'
   static Button = MessageCardButton
@@ -86,16 +99,45 @@ export class MessageCard extends React.PureComponent {
   renderImage() {
     const { image } = this.props
 
-    return image ? (
+    if (!image) {
+      return null
+    }
+
+    const { height, width } = this.calculateSize(image)
+
+    return (
       <ImageContainerUI>
         <ImageUI
           src={image.url}
           alt={image.altText || 'Message image'}
-          width={image.width || '100%'}
-          height={image.height || 'auto'}
+          width={width || '100%'}
+          height={height || 'auto'}
         />
       </ImageContainerUI>
-    ) : null
+    )
+  }
+
+  // Calculate size of image to keep the original aspect ratio, but fit within 278x278 square for image
+  calculateSize = image => {
+    if (!image.width || !image.height) {
+      return {}
+    }
+    const width = parseInt(image.width)
+    const height = parseInt(image.height)
+
+    // Not necessary to recalculate if it fits within boundaries
+    if (width < MAX_IMAGE_SIZE && height < MAX_IMAGE_SIZE) {
+      return { width, height }
+    }
+
+    if (width > height) {
+      return { height: sizeWithRatio(height, width), width: '100%' }
+    } else {
+      return {
+        width: sizeWithRatio(width, height, '100%'),
+        height: Math.min(height, MAX_IMAGE_SIZE),
+      }
+    }
   }
 
   renderAction() {

src/components/MessageCard/MessageCard.stories.mdx

@@ -50,6 +50,8 @@ This component renders a Message Card Notification with (optional) Title, Subtit
       subtitle={text('Subtitle', 'The J&G Team is here')}
       title={text('Title', 'Need help?')}
       image={{
+        height: '230',
+        width: '800',
         url:
           'http://matthewjamestaylor.com/img/illustrations/large/how-to-convert-a-liquid-layout-to-fixed-width.jpg',
       }}

src/components/MessageCard/MessageCard.test.js

@@ -7,6 +7,7 @@ import {
   BodyUI,
   ActionUI,
   ImageUI,
+  ImageContainerUI,
 } from './MessageCard.css'
 import { Animate } from '../index'
 import { MessageCardButton as Button } from './MessageCard.Button'
@@ -191,8 +192,40 @@ describe('image', () => {
     )
     const image = wrapper.find(ImageUI)
 
-    expect(image.prop('width')).toEqual('100')
-    expect(image.prop('height')).toEqual('200')
+    expect(image.prop('width')).toEqual(100)
+    expect(image.prop('height')).toEqual(200)
+  })
+
+  test('Scales size of image when larger than fits and width is bigger', () => {
+    const wrapper = mount(
+      <MessageCard
+        image={{
+          url: 'https://path.to/image.png',
+          width: '800',
+          height: '300',
+        }}
+      />
+    )
+    const image = wrapper.find(ImageUI)
+
+    expect(image.prop('height')).toEqual(104.25)
+    expect(image.prop('width')).toEqual('100%')
+  })
+
+  test('Scales size of image when larger than fits and height is bigger', () => {
+    const wrapper = mount(
+      <MessageCard
+        image={{
+          url: 'https://path.to/image.png',
+          width: '300',
+          height: '800',
+        }}
+      />
+    )
+    const image = wrapper.find(ImageUI)
+
+    expect(image.prop('height')).toEqual(278)
+    expect(image.prop('width')).toEqual(104.25)
   })
 
   test('Sets default size of image when not provided', () => {