feat(ProductMini): add new ProductMini widget

README.md

@@ -143,4 +143,4 @@ Filters reviews by stars
 
 ## Copyright
 
-(c) 2020, Pittaca S.r.l.s.
+(c) 2020, Dado Agency (Pty) Ltd; Pittaca S.r.l.s.

index.js

@@ -1,9 +1,19 @@
-import Carousel from './src/Carousel';
-import Grid from './src/Grid';
-import Horizontal from './src/Horizontal';
-import List from './src/List';
-import MiniCarousel from './src/MiniCarousel';
-import MicroCombo from './src/MicroCombo';
-import MicroStar from './src/MicroStar';
+import Carousel from "./src/Carousel";
+import Grid from "./src/Grid";
+import Horizontal from "./src/Horizontal";
+import List from "./src/List";
+import MiniCarousel from "./src/MiniCarousel";
+import MicroCombo from "./src/MicroCombo";
+import MicroStar from "./src/MicroStar";
+import ProductMini from "./src/ProductMini";
 
-export { Carousel, Grid, Horizontal, List, MiniCarousel, MicroCombo, MicroStar };
+export {
+  Carousel,
+  Grid,
+  Horizontal,
+  List,
+  MiniCarousel,
+  MicroCombo,
+  MicroStar,
+  ProductMini,
+};

src/ProductMini.js

@@ -0,0 +1,47 @@
+import React, { Fragment } from "react";
+import PropTypes from "prop-types";
+import templates from "./templates";
+import TrustpilotContainer from "./TrustpilotContainer";
+import useSitePluginOptions from "./hooks/useSitePluginOptions";
+
+const ProductMini = ({ language, culture, theme, height, width, stars }) => {
+  const reference = React.createRef();
+  const { business, username } = useSitePluginOptions();
+
+  return (
+    <Fragment>
+      <TrustpilotContainer
+        reference={reference}
+        template={templates.ProductMini}
+        business={business}
+        username={username}
+        language={language}
+        culture={culture}
+        theme={theme}
+        height={height}
+        width={width}
+        stars={stars}
+      />
+    </Fragment>
+  );
+};
+
+ProductMini.propTypes = {
+  language: PropTypes.string,
+  culture: PropTypes.string,
+  theme: PropTypes.string,
+  height: PropTypes.string,
+  width: PropTypes.string,
+  stars: PropTypes.number,
+};
+
+ProductMini.defaultProps = {
+  language: "en",
+  culture: "US",
+  theme: "light",
+  height: "24px",
+  width: "100%",
+  stars: 5,
+};
+
+export default ProductMini;

src/templates.js

@@ -1,9 +1,10 @@
 export default {
-  Carousel: '53aa8912dec7e10d38f59f36',
-  Grid: '539adbd6dec7e10e686debee',
-  Horizontal: '5406e65db0d04a09e042d5fc',
-  List: '539ad60defb9600b94d7df2c',
-  MiniCarousel: '539ad0ffdec7e10e686debd7',
-  MicroStar: '5419b732fbfb950b10de65e5',
-  MicroCombo: '5419b6ffb0d04a076446a9af',
+  Carousel: "53aa8912dec7e10d38f59f36",
+  Grid: "539adbd6dec7e10e686debee",
+  Horizontal: "5406e65db0d04a09e042d5fc",
+  List: "539ad60defb9600b94d7df2c",
+  MiniCarousel: "539ad0ffdec7e10e686debd7",
+  MicroStar: "5419b732fbfb950b10de65e5",
+  MicroCombo: "5419b6ffb0d04a076446a9af",
+  ProductMini: "54d39695764ea907c0f34825",
 };