feat: SingleMsgDS focal point updates

src/components/Atoms/Picture/Picture.js

@@ -1,32 +1,14 @@
 import React, { useEffect, useState } from 'react';
-import styled, { withTheme } from 'styled-components';
+import { withTheme } from 'styled-components';
 import PropTypes from 'prop-types';
-
+import focalPointCalc from '../../../utils/focalPointCalc';
 import 'lazysizes';
 import 'lazysizes/plugins/blur-up/ls.blur-up';
+import { Wrapper, Image } from './Picture.style';
 
 // Transparent pixel png
 const IMAGE_FALLBACK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
 
-const Wrapper = styled.div`
-  ${({ objFitState, nonObjFitImage }) => (!objFitState && nonObjFitImage) && `background-image: url(${nonObjFitImage}); background-size: cover; background-position: center;`};
-  display: block;
-  width: ${props => (props.width ? props.width : '100%')};
-  height: ${props => (props.height ? props.height : '100%')};
-  position: relative;
-  ${({ isBackgroundImage }) => isBackgroundImage && 'position: absolute; bottom: 0px; left: 0px; right: 0px; height: 100%;'};
-  `;
-
-const Image = styled.img`
-  width: ${props => (props.width ? props.width : '100%')};
-  height: ${props => (props.height ? props.height : 'auto')};
-  display: block;
-  object-fit: ${props => (props.objectFit === 'none' && 'none')
-    || (props.objectFit === 'cover' && 'cover')
-    || (props.objectFit === 'contain' && 'contain')};  
-  ${({ objectFit, objFitState }) => (objectFit !== 'none' && !objFitState) && 'visibility: hidden;'}; // Allows image to provide the container height, but make it invisible
-`;
-
 /** Responsive Picture */
 
 const Picture = ({
@@ -38,6 +20,7 @@ const Picture = ({
   objectFit,
   imageLow,
   isBackgroundImage,
+  focalPoint,
   ...rest
 }) => {
   const document = typeof window !== 'undefined' ? window.document : null;
@@ -58,6 +41,8 @@ const Picture = ({
     nonObjFitImage = images.substring(0, images.indexOf('?'));
   }
 
+  const calculatedFocalPoints = focalPointCalc(focalPoint);
+
   if (!images) {
     return (
       <Wrapper
@@ -78,6 +63,8 @@ const Picture = ({
           data-src={image}
           className="lazyload"
           objFitState={objFitState}
+          focalPointX={calculatedFocalPoints.x}
+          focalPointY={calculatedFocalPoints.y}
         />
       </Wrapper>
     );
@@ -109,6 +96,8 @@ const Picture = ({
         data-lowsrc={imageLow}
         className="lazyload"
         objFitState={objFitState}
+        focalPointXPos={calculatedFocalPoints.x}
+        focalPointYPos={calculatedFocalPoints.y}
       />
     </Wrapper>
   );
@@ -128,7 +117,13 @@ Picture.propTypes = {
   ]),
   width: PropTypes.string,
   height: PropTypes.string,
-  isBackgroundImage: PropTypes.bool
+  isBackgroundImage: PropTypes.bool,
+  focalPoint: PropTypes.shape({
+    focalPointX: PropTypes.number,
+    focalPointY: PropTypes.number,
+    rawImageWidth: PropTypes.number,
+    rawImageHeight: PropTypes.number
+  })
 };
 
 Picture.defaultProps = {
@@ -139,7 +134,13 @@ Picture.defaultProps = {
   width: '100%',
   height: 'auto',
   alt: '',
-  isBackgroundImage: false
+  isBackgroundImage: false,
+  focalPoint: {
+    focalPointX: null,
+    focalPointY: null,
+    rawImageWidth: null,
+    rawImageHeigh: null
+  }
 };
 
 export default withTheme(Picture);

src/components/Atoms/Picture/Picture.style.js

@@ -0,0 +1,26 @@
+import styled, { css } from 'styled-components';
+
+const Wrapper = styled.div`
+  ${({ objFitState, nonObjFitImage }) => (!objFitState && nonObjFitImage) && `background-image: url(${nonObjFitImage}); background-size: cover; background-position: center;`};
+  display: block;
+  width: ${props => (props.width ? props.width : '100%')};
+  height: ${props => (props.height ? props.height : '100%')};
+  position: relative;
+  ${({ isBackgroundImage }) => isBackgroundImage && 'position: absolute; bottom: 0px; left: 0px; right: 0px; height: 100%;'};
+  `;
+
+const Image = styled.img`
+  width: ${props => (props.width ? props.width : '100%')};
+  height: ${props => (props.height ? props.height : 'auto')};
+  display: block;
+  object-fit: ${props => (props.objectFit === 'none' && 'none')
+    || (props.objectFit === 'cover' && 'cover')
+    || (props.objectFit === 'contain' && 'contain')};  
+  ${({ objectFit, objFitState }) => (objectFit !== 'none' && !objFitState) && 'visibility: hidden;'}; // Allows image to provide the container height, but make it invisible
+
+  ${props => (props.objectFit === 'cover' && props.focalPointXPos && props.focalPointYPos) && css`
+    object-position: ${props.focalPointXPos} ${props.focalPointYPos};
+  `}
+`;
+
+export { Wrapper, Image };

src/components/Atoms/Picture/Picture.test.js

@@ -1,11 +1,15 @@
-import React from 'react';
-import 'jest-styled-components';
-import renderWithTheme from '../../../hoc/shallowWithTheme';
-import Picture from './Picture';
-import { defaultData } from '../../../styleguide/data/data';
-it('renders correctly', () => {
+import React from "react";
+import "jest-styled-components";
+import renderWithTheme from "../../../hoc/shallowWithTheme";
+import Picture from "./Picture";
+import { defaultData } from "../../../styleguide/data/data";
+it("renders correctly", () => {
   const tree = renderWithTheme(
-    <Picture images={defaultData.images} image={defaultData.image} alt="Test images" />
+    <Picture
+      images={defaultData.images}
+      image={defaultData.image}
+      alt="Test images"
+    />
   ).toJSON();
 
   expect(tree).toMatchInlineSnapshot(`
@@ -44,7 +48,7 @@ it('renders correctly', () => {
   `);
 });
 
-it('renders correctly with custom props', () => {
+it("renders correctly with custom props", () => {
   const tree = renderWithTheme(
     <Picture
       images={defaultData.images}
@@ -69,6 +73,7 @@ it('renders correctly with custom props', () => {
       height: 100px;
       display: block;
       object-fit: cover;
+      object-position: NaN% NaN%;
     }
 
     <div

src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js

@@ -1,9 +1,9 @@
-import React from 'react';
-import 'jest-styled-components';
-import renderWithTheme from '../../../hoc/shallowWithTheme';
-import ArticleTeaser from './ArticleTeaser';
-import { defaultData } from '../../../styleguide/data/data';
-it('renders article teaser correctly', () => {
+import React from "react";
+import "jest-styled-components";
+import renderWithTheme from "../../../hoc/shallowWithTheme";
+import ArticleTeaser from "./ArticleTeaser";
+import { defaultData } from "../../../styleguide/data/data";
+it("renders article teaser correctly", () => {
   const tree = renderWithTheme(
     <ArticleTeaser
       href="/test"
@@ -53,6 +53,7 @@ it('renders article teaser correctly', () => {
       height: 100%;
       display: block;
       object-fit: cover;
+      object-position: NaN% NaN%;
     }
 
     .c1 {
@@ -258,7 +259,7 @@ it('renders article teaser correctly', () => {
   `);
 });
 
-it('renders press realese correctly', () => {
+it("renders press realese correctly", () => {
   const tree = renderWithTheme(
     <ArticleTeaser
       href="/test"
@@ -305,6 +306,7 @@ it('renders press realese correctly', () => {
       height: 80px;
       display: block;
       object-fit: cover;
+      object-position: NaN% NaN%;
     }
 
     .c1 {

src/components/Molecules/Card/__snapshots__/Card.test.js.snap

@@ -54,6 +54,7 @@ exports[`renders correctly with no body 1`] = `
   height: 100%;
   display: block;
   object-fit: cover;
+  object-position: NaN% NaN%;
 }
 
 .c0 {

src/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap

@@ -13,6 +13,7 @@ exports[`renders correctly 1`] = `
   height: auto;
   display: block;
   object-fit: cover;
+  object-position: NaN% NaN%;
 }
 
 .c8 {

src/components/Molecules/Promo/__snapshots__/Promo.test.js.snap

@@ -37,6 +37,7 @@ exports[`renders Promo correctly 1`] = `
   height: 100%;
   display: block;
   object-fit: cover;
+  object-position: NaN% NaN%;
 }
 
 .c8 {
@@ -278,6 +279,7 @@ exports[`renders Promo correctly end position 1`] = `
   height: 100%;
   display: block;
   object-fit: cover;
+  object-position: NaN% NaN%;
 }
 
 .c8 {

src/components/Molecules/SingleMessage/__snapshots__/SingleMessage.test.js.snap

@@ -22,6 +22,7 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
   height: 100%;
   display: block;
   object-fit: cover;
+  object-position: NaN% NaN%;
 }
 
 .c0 {
@@ -197,6 +198,7 @@ exports[`renders Single Message with Image correctly 1`] = `
   height: 100%;
   display: block;
   object-fit: cover;
+  object-position: NaN% NaN%;
 }
 
 .c8 {
@@ -411,6 +413,7 @@ exports[`renders Single Message with double image correctly 1`] = `
   height: 100%;
   display: block;
   object-fit: cover;
+  object-position: NaN% NaN%;
 }
 
 .c0 {
@@ -631,6 +634,7 @@ exports[`renders Single Message with full width correctly 1`] = `
   height: 100%;
   display: block;
   object-fit: cover;
+  object-position: NaN% NaN%;
 }
 
 .c8 {
@@ -859,6 +863,7 @@ exports[`renders Single Message with full width image and no text correctly 1`]
   height: 100%;
   display: block;
   object-fit: cover;
+  object-position: NaN% NaN%;
 }
 
 .c0 {

src/components/Molecules/SingleMessageDS/SingleMessageDs.js

@@ -27,11 +27,11 @@ const SingleMessageDs = ({
   target,
   linkIcon,
   youTubeId,
+  focalPoint,
   ...rest
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
-  // const openModal = () => setIsOpen(true);
   const closeModal = () => setIsOpen(false);
 
   const Media = (
@@ -44,6 +44,7 @@ const SingleMessageDs = ({
         objectFit="cover"
         width={width}
         height={height}
+        focalPoint={focalPoint}
       />
     </Image>
   );
@@ -187,7 +188,13 @@ SingleMessageDs.propTypes = {
   target: PropTypes.string,
   children: PropTypes.node.isRequired,
   linkIcon: PropTypes.node,
-  youTubeId: PropTypes.string
+  youTubeId: PropTypes.string,
+  focalPoint: PropTypes.shape({
+    focalPointX: PropTypes.number,
+    focalPointY: PropTypes.number,
+    rawImageWidth: PropTypes.number,
+    rawImageHeight: PropTypes.number
+  })
 };
 
 SingleMessageDs.defaultProps = {
@@ -203,7 +210,13 @@ SingleMessageDs.defaultProps = {
   width: '100%',
   height: '100%',
   linkIcon: null,
-  youTubeId: null
+  youTubeId: null,
+  focalPoint: {
+    focalPointX: null,
+    focalPointY: null,
+    rawImageWidth: null,
+    rawImageHeigh: null
+  }
 };
 
 export default SingleMessageDs;