feat: add Mini widget

README.md

@@ -141,6 +141,11 @@ Filters reviews by stars
 
 `null` (returns all reviews)
 
+## Adding New Widgets
+You can easily add more widgets by duplicating the most recently edited widget in `src`, setting its `template` to the widget's template ID (which you should define in `src/templates.js`), and exporting it in `index.js`.
+
+If you commit your changes with a commit message starting with `feat`, the npm package for this repo will have its version bumped and the new version published automatically.
+
 ## Copyright
 
 (c) 2020, Dado Agency (Pty) Ltd; Pittaca S.r.l.s.

index.js

@@ -6,6 +6,7 @@ import MiniCarousel from "./src/MiniCarousel";
 import MicroCombo from "./src/MicroCombo";
 import MicroStar from "./src/MicroStar";
 import ProductMini from "./src/ProductMini";
+import Mini from "./src/Mini";
 
 export {
   Carousel,
@@ -16,4 +17,5 @@ export {
   MicroCombo,
   MicroStar,
   ProductMini,
+  Mini,
 };

src/Mini.js

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

src/templates.js

@@ -7,4 +7,5 @@ export default {
   MicroStar: "5419b732fbfb950b10de65e5",
   MicroCombo: "5419b6ffb0d04a076446a9af",
   ProductMini: "54d39695764ea907c0f34825",
+  Mini: "53aa8807dec7e10d38f59f32",
 };