refactor(core-responsive-image): use breakpoints from core-responsive

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>
 )

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.
 

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"
   }