From 84b03818be36067891f52e56e2342d3df48e1a56 Mon Sep 17 00:00:00 2001
From: kiesha <kiesha.herman@telus.com>
Date: Mon, 1 Mar 2021 12:37:05 -0800
Subject: [PATCH] refactor(core-responsive-image): use breakpoints from
 core-responsive

---
 packages/ResponsiveImage/ResponsiveImage.jsx | 12 ++++++------
 packages/ResponsiveImage/ResponsiveImage.md  | 14 +++++++-------
 packages/ResponsiveImage/package.json        |  1 +
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/packages/ResponsiveImage/ResponsiveImage.jsx b/packages/ResponsiveImage/ResponsiveImage.jsx
index 7657ce21a0..4910f77973 100644
--- a/packages/ResponsiveImage/ResponsiveImage.jsx
+++ b/packages/ResponsiveImage/ResponsiveImage.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-
+import { breakpoints } from '@tds/core-responsive'
 import { safeRest } from '@tds/util-helpers'
 
 /**
@@ -10,11 +10,11 @@ import { safeRest } from '@tds/util-helpers'
  */
 const ResponsiveImage = ({ xsSrc, smSrc, mdSrc, lgSrc, xlSrc, fallbackSrc, alt, ...rest }) => (
   <picture {...safeRest(rest)}>
-    <source srcSet={xlSrc} media="(min-width: 1200px)" />
-    <source srcSet={lgSrc} media="(min-width: 992px)" />
-    <source srcSet={mdSrc} media="(min-width: 768px)" />
-    <source srcSet={smSrc} media="(min-width: 576px)" />
-    <source srcSet={xsSrc} media="(max-width: 575px)" />
+    <source srcSet={xlSrc} media={`(min-width: ${breakpoints.xl}px)`} />
+    <source srcSet={lgSrc} media={`(min-width: ${breakpoints.lg}px)`} />
+    <source srcSet={mdSrc} media={`(min-width: ${breakpoints.md}px)`} />
+    <source srcSet={smSrc} media={`(min-width: ${breakpoints.sm}px)`} />
+    <source srcSet={xsSrc} media={`(max-width: ${breakpoints.sm - 1}px)`} />
     <img src={fallbackSrc} alt={alt} style={{ width: '100%' }} />
   </picture>
 )
diff --git a/packages/ResponsiveImage/ResponsiveImage.md b/packages/ResponsiveImage/ResponsiveImage.md
index 6895a1ae03..1b0a1368fd 100644
--- a/packages/ResponsiveImage/ResponsiveImage.md
+++ b/packages/ResponsiveImage/ResponsiveImage.md
@@ -6,22 +6,22 @@ download size.
 
 Similarily to the Image component:
 
-- We recommend not to resize or crop images in the browser.
-- Image optimization should be done BEFORE rendering.
-- You can use the `contentful API` to request an image of a certain size.
+- We recommend not to resize or crop images in the browser
+- Image optimization should be done BEFORE rendering
+- You can use the `contentful API` to request an image of a certain size
 
 Specific to ResponsiveImage:
 
-- The image will fit to 100% of its parent container.
-- The image source will change based on `window width`, not parent container size.
+- The image will fit to 100% of its parent container
+- The image source will change based on `window width`, not parent container size
 - Uses the following breakpoints:
   - xl: min-width 1200px,
   - lg: min-width 992px,
   - md: min-width 768px,
   - sm: min-width 576px,
   - xs: max-width 575px
-- Provide a source for the sm and xs breakpoints as a minimum.
-- Internet Explorer is not supported and will use the fallback src provided.
+- Provide a source for the sm and xs breakpoints as a minimum
+- Internet Explorer is not supported and will use the fallback src provided
 
 Change the window width to see the images change.
 
diff --git a/packages/ResponsiveImage/package.json b/packages/ResponsiveImage/package.json
index 6eed56f5a4..ccede9bd04 100644
--- a/packages/ResponsiveImage/package.json
+++ b/packages/ResponsiveImage/package.json
@@ -26,6 +26,7 @@
     "styled-components": "^4.1.3 || ^5.1.0"
   },
   "dependencies": {
+    "@tds/core-responsive": "^1.3.4",
     "@tds/util-helpers": "^1.4.0",
     "prop-types": "^15.5.10"
   }