Allow minimum contrast to be controlled by storybook

Author: ryanmccombe

src/app/components/FrostedGlassPromo/FrostedGlassPanel.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { node, string } from 'prop-types';
+import { node, number, string } from 'prop-types';
 
 import { GEL_SPACING_DBL } from '@bbc/gel-foundations/spacings';
 import useImageColour from '../../hooks/useImageColour';
@@ -51,10 +51,10 @@ const Children = styled.div`
     `}
 `;
 
-const FrostedGlassPanel = ({ image, children }) => {
+const FrostedGlassPanel = ({ image, children, minimumContrast }) => {
   const { isLoading, colour } = useImageColour(image, {
     fallbackColour: FALLBACK_COLOUR,
-    minimumContrast: 8,
+    minimumContrast,
     contrastColour: '#ffffff',
   });
 
@@ -71,6 +71,11 @@ const FrostedGlassPanel = ({ image, children }) => {
 FrostedGlassPanel.propTypes = {
   image: string.isRequired,
   children: node.isRequired,
+  minimumContrast: number,
+};
+
+FrostedGlassPanel.defaultProps = {
+  minimumContrast: 8,
 };
 
 export default FrostedGlassPanel;

src/app/components/FrostedGlassPromo/index.jsx

@@ -74,6 +74,7 @@ const FrostedGlassPromo = ({
   url,
   eventTrackingData,
   index,
+  minimumContrast,
 }) => {
   const { script, service } = useContext(ServiceContext);
 
@@ -113,7 +114,10 @@ const FrostedGlassPromo = ({
           image,
         )}
       />
-      <FrostedGlassPanel image={image.smallSrc || image.src}>
+      <FrostedGlassPanel
+        image={image.smallSrc || image.src}
+        minimumContrast={minimumContrast}
+      >
         <H3>
           <A script={script} service={service} href={url} onClick={onClick}>
             {children}
@@ -131,6 +135,7 @@ FrostedGlassPromo.propTypes = {
   footer: node,
   eventTrackingData: shape({}),
   index: number,
+  minimumContrast: number,
   image: shape({
     src: string.isRequired,
     alt: string.isRequired,
@@ -147,6 +152,7 @@ FrostedGlassPromo.defaultProps = {
   footer: null,
   eventTrackingData: null,
   index: 0,
+  minimumContrast: 8,
 };
 
 export default withData(FrostedGlassPromo);

src/app/components/FrostedGlassPromo/index.stories.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { withServicesKnob } from '@bbc/psammead-storybook-helpers';
-import { withKnobs, text } from '@storybook/addon-knobs';
+import { withKnobs, text, number } from '@storybook/addon-knobs';
 
 import { RequestContextProvider } from '#contexts/RequestContext';
 import { ServiceContextProvider } from '#contexts/ServiceContext';
@@ -35,11 +35,13 @@ const Component = props => {
     'Main Body',
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quam magna, lacinia ut arcu in, vulputate ultricies lectus. Vestibulum purus ligula, finibus vel ultrices in, pretium non neque. Sed mauris ante, mollis ac metus fermentum, vestibulum malesuada felis. Nullam a congue mauris. Nulla venenatis felis ac eleifend rutrum.',
   );
+  const minimumContrast = number('Minimum Contrast', 8);
   return (
     <Wrappers {...props}>
       <Promo
         image={{ src: imageUrl, alt: '', width: 500, height: 250, ratio: 52 }}
         url="#"
+        minimumContrast={minimumContrast}
       >
         {mainBody}
       </Promo>