Allow palette size to be customisable

Author: ryanmccombe

src/app/components/FrostedGlassPromo/FrostedGlassPanel.jsx

@@ -51,11 +51,17 @@ const Children = styled.div`
     `}
 `;
 
-const FrostedGlassPanel = ({ image, children, minimumContrast }) => {
+const FrostedGlassPanel = ({
+  image,
+  children,
+  minimumContrast,
+  paletteSize,
+}) => {
   const { isLoading, colour } = useImageColour(image, {
     fallbackColour: FALLBACK_COLOUR,
     minimumContrast,
     contrastColour: '#ffffff',
+    paletteSize,
   });
 
   return (
@@ -72,10 +78,12 @@ FrostedGlassPanel.propTypes = {
   image: string.isRequired,
   children: node.isRequired,
   minimumContrast: number,
+  paletteSize: number,
 };
 
 FrostedGlassPanel.defaultProps = {
   minimumContrast: 8,
+  paletteSize: 10,
 };
 
 export default FrostedGlassPanel;

src/app/components/FrostedGlassPromo/index.jsx

@@ -75,6 +75,7 @@ const FrostedGlassPromo = ({
   eventTrackingData,
   index,
   minimumContrast,
+  paletteSize,
 }) => {
   const { script, service } = useContext(ServiceContext);
 
@@ -117,6 +118,7 @@ const FrostedGlassPromo = ({
       <FrostedGlassPanel
         image={image.smallSrc || image.src}
         minimumContrast={minimumContrast}
+        paletteSize={paletteSize}
       >
         <H3>
           <A script={script} service={service} href={url} onClick={onClick}>
@@ -136,6 +138,7 @@ FrostedGlassPromo.propTypes = {
   eventTrackingData: shape({}),
   index: number,
   minimumContrast: number,
+  paletteSize: number,
   image: shape({
     src: string.isRequired,
     alt: string.isRequired,
@@ -153,6 +156,7 @@ FrostedGlassPromo.defaultProps = {
   eventTrackingData: null,
   index: 0,
   minimumContrast: 8,
+  paletteSize: 10,
 };
 
 export default withData(FrostedGlassPromo);

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

@@ -36,12 +36,14 @@ const Component = props => {
     '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);
+  const paletteSize = number('Palette Size', 20, { min: 2, max: 99 });
   return (
     <Wrappers {...props}>
       <Promo
         image={{ src: imageUrl, alt: '', width: 500, height: 250, ratio: 52 }}
         url="#"
         minimumContrast={minimumContrast}
+        paletteSize={paletteSize}
       >
         {mainBody}
       </Promo>

src/app/hooks/useImageColour/index.js

@@ -9,6 +9,7 @@ const useImageColour = (
     fallbackColour = '#000000',
     minimumContrast = 0,
     contrastColour = '#ffffff',
+    paletteSize = 10,
   } = {},
 ) => {
   const [palette, setPalette] = useState(null);
@@ -20,17 +21,14 @@ const useImageColour = (
     setIsLoading(false);
   };
 
-  // We extract 10 colours to give us more opportunity to find the most vibrant one
-  const QUANTITY_OF_COLOURS_TO_EXTRACT = 10;
-
   useEffect(() => {
     try {
       setIsLoading(true);
 
       const colorThief = new ColorThief();
       const img = new Image();
       img.addEventListener('load', () => {
-        setPalette(colorThief.getPalette(img, QUANTITY_OF_COLOURS_TO_EXTRACT));
+        setPalette(colorThief.getPalette(img, paletteSize));
         setIsLoading(false);
         setError(null);
       });
@@ -41,7 +39,7 @@ const useImageColour = (
     } catch (err) {
       setErrorState();
     }
-  }, [url]);
+  }, [url, paletteSize]);
 
   return {
     colour: selectColour({