@simplybusiness/mobius 4.9.2 → 4.10.0

package/dist/esm/components/Trust/Trust.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef } from "react";
+import classNames from "classnames/dedupe";
+import { getDefaultProps } from "./getDefaultProps";
+import { REQUIRED_TRUSTPILOT_CLASS_NAME, TRUSTPILOT_WIDGET } from "./constants";
+import { mergeRefs } from "../../utils";
+export const Trust = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { elementType: Element = "div", variant, theme, ...otherProps } = props;
+    const trustRef = useRef(null);
+    const { link, ...defaultProps } = getDefaultProps(props);
+    const { className: variantClassName } = TRUSTPILOT_WIDGET[variant];
+    const themeClassName = theme.charAt(0).toUpperCase() + theme.slice(1);
+    const classes = classNames("mobius", "mobius/Trust", REQUIRED_TRUSTPILOT_CLASS_NAME, {
+        [`mobius/TrustTheme${themeClassName}`]: theme,
+        [`mobius/TrustVariant${variantClassName}`]: variant
+    }, otherProps.className);
+    useEffect(()=>{
+        // If window.Trustpilot is available it means that we need to load the TrustBox from our ref.
+        if (trustRef.current && window.Trustpilot && window.Trustpilot.loadFromElement) {
+            window.Trustpilot.loadFromElement(trustRef.current, true);
+        }
+    }, []);
+    return /*#__PURE__*/ _jsx(Element, {
+        ref: mergeRefs([
+            trustRef,
+            ref
+        ]),
+        ...defaultProps,
+        ...otherProps,
+        className: classes,
+        children: /*#__PURE__*/ _jsx("a", {
+            href: link,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "mobius/TrustLink",
+            children: "Trustpilot"
+        })
+    });
+});
+
+//# sourceMappingURL=Trust.js.map

package/dist/esm/components/Trust/Trust.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Trust/Trust.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { TrustElementType, TrustProps, TrustRef } from \"./types\";\nimport { getDefaultProps } from \"./getDefaultProps\";\nimport { REQUIRED_TRUSTPILOT_CLASS_NAME, TRUSTPILOT_WIDGET } from \"./constants\";\nimport { mergeRefs } from \"../../utils\";\n\nexport const Trust: ForwardedRefComponent<TrustProps, TrustElementType> =\n  forwardRef((props: TrustProps, ref: TrustRef) => {\n    const {\n      elementType: Element = \"div\",\n      variant,\n      theme,\n      ...otherProps\n    } = props;\n    const trustRef = useRef(null);\n\n    const { link, ...defaultProps } = getDefaultProps(props);\n    const { className: variantClassName } = TRUSTPILOT_WIDGET[variant];\n    const themeClassName = theme.charAt(0).toUpperCase() + theme.slice(1);\n\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Trust\",\n      REQUIRED_TRUSTPILOT_CLASS_NAME,\n      {\n        [`mobius/TrustTheme${themeClassName}`]: theme,\n        [`mobius/TrustVariant${variantClassName}`]: variant,\n      },\n      otherProps.className,\n    );\n\n    useEffect(() => {\n      // If window.Trustpilot is available it means that we need to load the TrustBox from our ref.\n      if (\n        trustRef.current &&\n        window.Trustpilot &&\n        window.Trustpilot.loadFromElement\n      ) {\n        window.Trustpilot.loadFromElement(trustRef.current, true);\n      }\n    }, []);\n\n    return (\n      <Element\n        ref={mergeRefs([trustRef, ref])}\n        {...defaultProps}\n        {...otherProps}\n        className={classes}\n      >\n        <a\n          href={link}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          className=\"mobius/TrustLink\"\n        >\n          Trustpilot\n        </a>\n      </Element>\n    );\n  });\n"],"names":["forwardRef","useEffect","useRef","classNames","getDefaultProps","REQUIRED_TRUSTPILOT_CLASS_NAME","TRUSTPILOT_WIDGET","mergeRefs","Trust","props","ref","elementType","Element","variant","theme","otherProps","trustRef","link","defaultProps","className","variantClassName","themeClassName","charAt","toUpperCase","slice","classes","current","window","Trustpilot","loadFromElement","a","href","target","rel"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,UAAU,EAAEC,SAAS,EAAEC,MAAM,QAAQ,QAAQ;AACtD,OAAOC,gBAAgB,oBAAoB;AAG3C,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,8BAA8B,EAAEC,iBAAiB,QAAQ,cAAc;AAChF,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,MAAMC,sBACXR,WAAW,CAACS,OAAmBC;IAC7B,MAAM,EACJC,aAAaC,UAAU,KAAK,EAC5BC,OAAO,EACPC,KAAK,EACL,GAAGC,YACJ,GAAGN;IACJ,MAAMO,WAAWd,OAAO;IAExB,MAAM,EAAEe,IAAI,EAAE,GAAGC,cAAc,GAAGd,gBAAgBK;IAClD,MAAM,EAAEU,WAAWC,gBAAgB,EAAE,GAAGd,iBAAiB,CAACO,QAAQ;IAClE,MAAMQ,iBAAiBP,MAAMQ,MAAM,CAAC,GAAGC,WAAW,KAAKT,MAAMU,KAAK,CAAC;IAEnE,MAAMC,UAAUtB,WACd,UACA,gBACAE,gCACA;QACE,CAAC,CAAC,iBAAiB,EAAEgB,eAAe,CAAC,CAAC,EAAEP;QACxC,CAAC,CAAC,mBAAmB,EAAEM,iBAAiB,CAAC,CAAC,EAAEP;IAC9C,GACAE,WAAWI,SAAS;IAGtBlB,UAAU;QACR,6FAA6F;QAC7F,IACEe,SAASU,OAAO,IAChBC,OAAOC,UAAU,IACjBD,OAAOC,UAAU,CAACC,eAAe,EACjC;YACAF,OAAOC,UAAU,CAACC,eAAe,CAACb,SAASU,OAAO,EAAE;QACtD;IACF,GAAG,EAAE;IAEL,qBACE,KAACd;QACCF,KAAKH,UAAU;YAACS;YAAUN;SAAI;QAC7B,GAAGQ,YAAY;QACf,GAAGH,UAAU;QACdI,WAAWM;kBAEX,cAAA,KAACK;YACCC,MAAMd;YACNe,QAAO;YACPC,KAAI;YACJd,WAAU;sBACX;;;AAKP,GAAG"}

package/dist/esm/components/Trust/TrustpilotProvider.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+export const TrustpilotProvider = ({ children })=>{
+    useEffect(()=>{
+        // Required to load Trustpilot widgets
+        const script = document.createElement("script");
+        script.type = "text/javascript";
+        script.className = "optanon-category-C0002";
+        script.src = "//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js";
+        script.async = true;
+        document.head.appendChild(script);
+        return ()=>{
+            document.head.removeChild(script);
+        };
+    }, []);
+    return /*#__PURE__*/ _jsx("div", {
+        children: children
+    });
+};
+
+//# sourceMappingURL=TrustpilotProvider.js.map

package/dist/esm/components/Trust/TrustpilotProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Trust/TrustpilotProvider.tsx"],"sourcesContent":["import { ReactNode, useEffect } from \"react\";\n\nexport const TrustpilotProvider = ({ children }: { children: ReactNode }) => {\n  useEffect(() => {\n    // Required to load Trustpilot widgets\n    const script = document.createElement(\"script\");\n    script.type = \"text/javascript\";\n    script.className = \"optanon-category-C0002\";\n    script.src =\n      \"//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js\";\n    script.async = true;\n    document.head.appendChild(script);\n\n    return () => {\n      document.head.removeChild(script);\n    };\n  }, []);\n\n  return <div>{children}</div>;\n};\n"],"names":["useEffect","TrustpilotProvider","children","script","document","createElement","type","className","src","async","head","appendChild","removeChild","div"],"rangeMappings":";;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAAoBA,SAAS,QAAQ,QAAQ;AAE7C,OAAO,MAAMC,qBAAqB,CAAC,EAAEC,QAAQ,EAA2B;IACtEF,UAAU;QACR,sCAAsC;QACtC,MAAMG,SAASC,SAASC,aAAa,CAAC;QACtCF,OAAOG,IAAI,GAAG;QACdH,OAAOI,SAAS,GAAG;QACnBJ,OAAOK,GAAG,GACR;QACFL,OAAOM,KAAK,GAAG;QACfL,SAASM,IAAI,CAACC,WAAW,CAACR;QAE1B,OAAO;YACLC,SAASM,IAAI,CAACE,WAAW,CAACT;QAC5B;IACF,GAAG,EAAE;IAEL,qBAAO,KAACU;kBAAKX;;AACf,EAAE"}

package/dist/esm/components/Trust/constants.js

@@ -0,0 +1,20 @@
+export const REQUIRED_TRUSTPILOT_CLASS_NAME = "trustpilot-widget";
+export const SIMPLYBUSINESS_UNIT_ID = "5ca35a3da72b330001954cef";
+export const TRUSTPILOT_LINKS = {
+    "en-US": "https://www.trustpilot.com/review/simplybusiness.com",
+    "en-GB": "https://www.trustpilot.com/review/simplybusiness.co.uk"
+};
+export const TRUSTPILOT_WIDGET = {
+    // Keys based on actual widget names
+    // https://support.trustpilot.com/hc/en-us/articles/360019826379-TrustBox-widget-overview
+    "micro-combo": {
+        templateId: "5419b6ffb0d04a076446a9af",
+        className: "MicroCombo"
+    },
+    mini: {
+        templateId: "53aa8807dec7e10d38f59f32",
+        className: "Mini"
+    }
+};
+
+//# sourceMappingURL=constants.js.map

package/dist/esm/components/Trust/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Trust/constants.ts"],"sourcesContent":["export const REQUIRED_TRUSTPILOT_CLASS_NAME = \"trustpilot-widget\";\n\nexport const SIMPLYBUSINESS_UNIT_ID = \"5ca35a3da72b330001954cef\";\n\nexport const TRUSTPILOT_LINKS = {\n  \"en-US\": \"https://www.trustpilot.com/review/simplybusiness.com\",\n  \"en-GB\": \"https://www.trustpilot.com/review/simplybusiness.co.uk\",\n};\n\nexport const TRUSTPILOT_WIDGET = {\n  // Keys based on actual widget names\n  // https://support.trustpilot.com/hc/en-us/articles/360019826379-TrustBox-widget-overview\n  \"micro-combo\": {\n    templateId: \"5419b6ffb0d04a076446a9af\",\n    className: \"MicroCombo\",\n  },\n  mini: {\n    templateId: \"53aa8807dec7e10d38f59f32\",\n    className: \"Mini\",\n  },\n};\n"],"names":["REQUIRED_TRUSTPILOT_CLASS_NAME","SIMPLYBUSINESS_UNIT_ID","TRUSTPILOT_LINKS","TRUSTPILOT_WIDGET","templateId","className","mini"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,OAAO,MAAMA,iCAAiC,oBAAoB;AAElE,OAAO,MAAMC,yBAAyB,2BAA2B;AAEjE,OAAO,MAAMC,mBAAmB;IAC9B,SAAS;IACT,SAAS;AACX,EAAE;AAEF,OAAO,MAAMC,oBAAoB;IAC/B,oCAAoC;IACpC,yFAAyF;IACzF,eAAe;QACbC,YAAY;QACZC,WAAW;IACb;IACAC,MAAM;QACJF,YAAY;QACZC,WAAW;IACb;AACF,EAAE"}

package/dist/esm/components/Trust/getDefaultProps.js

@@ -0,0 +1,24 @@
+import { SIMPLYBUSINESS_UNIT_ID, TRUSTPILOT_LINKS, TRUSTPILOT_WIDGET } from "./constants";
+export const getDefaultProps = (props)=>{
+    const { locale, variant, height, width, theme, stars } = props;
+    const { templateId } = TRUSTPILOT_WIDGET[variant];
+    const link = TRUSTPILOT_LINKS[locale];
+    const sharedProps = {
+        "data-businessunit-id": SIMPLYBUSINESS_UNIT_ID,
+        "data-locale": locale,
+        "data-template-id": templateId,
+        "data-theme": theme,
+        "data-style-width": width || "100%",
+        link
+    };
+    if (variant === "micro-combo") {
+        return {
+            "data-style-height": height || "40px",
+            "data-stars": stars,
+            ...sharedProps
+        };
+    }
+    return sharedProps;
+};
+
+//# sourceMappingURL=getDefaultProps.js.map

package/dist/esm/components/Trust/getDefaultProps.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Trust/getDefaultProps.ts"],"sourcesContent":["import {\n  SIMPLYBUSINESS_UNIT_ID,\n  TRUSTPILOT_LINKS,\n  TRUSTPILOT_WIDGET,\n} from \"./constants\";\nimport { TrustProps } from \"./types\";\n\nexport const getDefaultProps = (props: TrustProps) => {\n  const { locale, variant, height, width, theme, stars } = props;\n  const { templateId } = TRUSTPILOT_WIDGET[variant];\n  const link = TRUSTPILOT_LINKS[locale];\n\n  const sharedProps = {\n    \"data-businessunit-id\": SIMPLYBUSINESS_UNIT_ID,\n    \"data-locale\": locale,\n    \"data-template-id\": templateId,\n    \"data-theme\": theme,\n    \"data-style-width\": width || \"100%\",\n    link,\n  };\n\n  if (variant === \"micro-combo\") {\n    return {\n      \"data-style-height\": height || \"40px\",\n      \"data-stars\": stars,\n      ...sharedProps,\n    };\n  }\n\n  return sharedProps;\n};\n"],"names":["SIMPLYBUSINESS_UNIT_ID","TRUSTPILOT_LINKS","TRUSTPILOT_WIDGET","getDefaultProps","props","locale","variant","height","width","theme","stars","templateId","link","sharedProps"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,sBAAsB,EACtBC,gBAAgB,EAChBC,iBAAiB,QACZ,cAAc;AAGrB,OAAO,MAAMC,kBAAkB,CAACC;IAC9B,MAAM,EAAEC,MAAM,EAAEC,OAAO,EAAEC,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAGN;IACzD,MAAM,EAAEO,UAAU,EAAE,GAAGT,iBAAiB,CAACI,QAAQ;IACjD,MAAMM,OAAOX,gBAAgB,CAACI,OAAO;IAErC,MAAMQ,cAAc;QAClB,wBAAwBb;QACxB,eAAeK;QACf,oBAAoBM;QACpB,cAAcF;QACd,oBAAoBD,SAAS;QAC7BI;IACF;IAEA,IAAIN,YAAY,eAAe;QAC7B,OAAO;YACL,qBAAqBC,UAAU;YAC/B,cAAcG;YACd,GAAGG,WAAW;QAChB;IACF;IAEA,OAAOA;AACT,EAAE"}

package/dist/esm/components/Trust/index.js

@@ -0,0 +1,4 @@
+export * from "./Trust";
+export * from "./types";
+
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Trust/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Trust/index.tsx"],"sourcesContent":["export * from \"./Trust\";\nexport * from \"./types\";\n"],"names":[],"rangeMappings":";","mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,UAAU"}

package/dist/esm/components/Trust/types.js

@@ -0,0 +1,4 @@
+window.Trustpilot = window.Trustpilot || {};
+export { };
+
+//# sourceMappingURL=types.js.map

package/dist/esm/components/Trust/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Trust/types.ts"],"sourcesContent":["import { Ref, RefAttributes } from \"react\";\nimport { DOMProps } from \"../../types/dom\";\nimport { TRUSTPILOT_WIDGET } from \"./constants\";\n\ndeclare global {\n  interface Window {\n    Trustpilot: any;\n  }\n}\n\nwindow.Trustpilot = window.Trustpilot || {};\n\nexport type TrustElementType = HTMLDivElement;\n\nexport interface TrustProps extends DOMProps, RefAttributes<TrustElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  elementType?: string | React.ElementType;\n  locale: \"en-US\" | \"en-GB\";\n  variant: keyof typeof TRUSTPILOT_WIDGET;\n  templateId?: string;\n  height?: string;\n  width?: string;\n  theme: \"dark\" | \"light\";\n  stars?: string;\n}\n\nexport type TrustRef = Ref<TrustElementType>;\n"],"names":["window","Trustpilot"],"rangeMappings":";","mappings":"AAUAA,OAAOC,UAAU,GAAGD,OAAOC,UAAU,IAAI,CAAC;AAiB1C,WAA6C"}

package/dist/esm/components/index.js

@@ -37,6 +37,7 @@ export * from "./TextArea";
 export * from "./TextAreaInput";
 export * from "./TextField";
 export * from "./Title";
+export * from "./Trust";
 export * from "./VisuallyHidden";
 
 //# sourceMappingURL=index.js.map

package/dist/esm/components/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/index.tsx"],"sourcesContent":["export * from \"./Accordion\";\nexport * from \"./Alert\";\nexport * from \"./Box\";\nexport * from \"./Breadcrumbs\";\nexport * from \"./Button\";\nexport * from \"./Checkbox\";\nexport * from \"./Container\";\nexport * from \"./Divider\";\nexport * from \"./Drawer\";\nexport * from \"./DropdownMenu\";\nexport * from \"./ErrorMessage\";\nexport * from \"./Fieldset\";\nexport * from \"./Flex\";\nexport * from \"./Grid\";\nexport * from \"./Icon\";\nexport * from \"./Image\";\nexport * from \"./Label\";\nexport * from \"./Link\";\nexport * from \"./LinkButton\";\nexport * from \"./List\";\nexport * from \"./LoadingIndicator\";\nexport * from \"./Logo\";\nexport * from \"./Modal\";\nexport * from \"./NumberField\";\nexport * from \"./Option\";\nexport * from \"./PasswordField\";\nexport * from \"./Popover\";\nexport * from \"./Progress\";\nexport * from \"./Radio\";\nexport * from \"./Segment\";\nexport * from \"./Select\";\nexport * from \"./Slider\";\nexport * from \"./SVG\";\nexport * from \"./Table\";\nexport * from \"./Text\";\nexport * from \"./TextArea\";\nexport * from \"./TextAreaInput\";\nexport * from \"./TextField\";\nexport * from \"./Title\";\nexport * from \"./VisuallyHidden\";\n"],"names":[],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,UAAU;AACxB,cAAc,QAAQ;AACtB,cAAc,gBAAgB;AAC9B,cAAc,WAAW;AACzB,cAAc,aAAa;AAC3B,cAAc,cAAc;AAC5B,cAAc,YAAY;AAC1B,cAAc,WAAW;AACzB,cAAc,iBAAiB;AAC/B,cAAc,iBAAiB;AAC/B,cAAc,aAAa;AAC3B,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,SAAS;AACvB,cAAc,qBAAqB;AACnC,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,gBAAgB;AAC9B,cAAc,WAAW;AACzB,cAAc,kBAAkB;AAChC,cAAc,YAAY;AAC1B,cAAc,aAAa;AAC3B,cAAc,UAAU;AACxB,cAAc,YAAY;AAC1B,cAAc,WAAW;AACzB,cAAc,WAAW;AACzB,cAAc,QAAQ;AACtB,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,aAAa;AAC3B,cAAc,kBAAkB;AAChC,cAAc,cAAc;AAC5B,cAAc,UAAU;AACxB,cAAc,mBAAmB"}
+{"version":3,"sources":["../../../src/components/index.tsx"],"sourcesContent":["export * from \"./Accordion\";\nexport * from \"./Alert\";\nexport * from \"./Box\";\nexport * from \"./Breadcrumbs\";\nexport * from \"./Button\";\nexport * from \"./Checkbox\";\nexport * from \"./Container\";\nexport * from \"./Divider\";\nexport * from \"./Drawer\";\nexport * from \"./DropdownMenu\";\nexport * from \"./ErrorMessage\";\nexport * from \"./Fieldset\";\nexport * from \"./Flex\";\nexport * from \"./Grid\";\nexport * from \"./Icon\";\nexport * from \"./Image\";\nexport * from \"./Label\";\nexport * from \"./Link\";\nexport * from \"./LinkButton\";\nexport * from \"./List\";\nexport * from \"./LoadingIndicator\";\nexport * from \"./Logo\";\nexport * from \"./Modal\";\nexport * from \"./NumberField\";\nexport * from \"./Option\";\nexport * from \"./PasswordField\";\nexport * from \"./Popover\";\nexport * from \"./Progress\";\nexport * from \"./Radio\";\nexport * from \"./Segment\";\nexport * from \"./Select\";\nexport * from \"./Slider\";\nexport * from \"./SVG\";\nexport * from \"./Table\";\nexport * from \"./Text\";\nexport * from \"./TextArea\";\nexport * from \"./TextAreaInput\";\nexport * from \"./TextField\";\nexport * from \"./Title\";\nexport * from \"./Trust\";\nexport * from \"./VisuallyHidden\";\n"],"names":[],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,UAAU;AACxB,cAAc,QAAQ;AACtB,cAAc,gBAAgB;AAC9B,cAAc,WAAW;AACzB,cAAc,aAAa;AAC3B,cAAc,cAAc;AAC5B,cAAc,YAAY;AAC1B,cAAc,WAAW;AACzB,cAAc,iBAAiB;AAC/B,cAAc,iBAAiB;AAC/B,cAAc,aAAa;AAC3B,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,SAAS;AACvB,cAAc,qBAAqB;AACnC,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,gBAAgB;AAC9B,cAAc,WAAW;AACzB,cAAc,kBAAkB;AAChC,cAAc,YAAY;AAC1B,cAAc,aAAa;AAC3B,cAAc,UAAU;AACxB,cAAc,YAAY;AAC1B,cAAc,WAAW;AACzB,cAAc,WAAW;AACzB,cAAc,QAAQ;AACtB,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,aAAa;AAC3B,cAAc,kBAAkB;AAChC,cAAc,cAAc;AAC5B,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,mBAAmB"}

package/dist/types/components/Trust/Trust.d.ts

@@ -0,0 +1,3 @@
+import { ForwardedRefComponent } from "../../types/components";
+import { TrustElementType, TrustProps } from "./types";
+export declare const Trust: ForwardedRefComponent<TrustProps, TrustElementType>;

package/dist/types/components/Trust/Trust.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Trust } from "..";
+type StoryType = StoryObj<typeof Trust>;
+declare const meta: Meta<typeof Trust>;
+export declare const MicroCombo: StoryType;
+export declare const Mini: StoryType;
+export default meta;

package/dist/types/components/Trust/Trust.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/Trust/TrustpilotProvider.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from "react";
+export declare const TrustpilotProvider: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Trust/constants.d.ts

@@ -0,0 +1,16 @@
+export declare const REQUIRED_TRUSTPILOT_CLASS_NAME = "trustpilot-widget";
+export declare const SIMPLYBUSINESS_UNIT_ID = "5ca35a3da72b330001954cef";
+export declare const TRUSTPILOT_LINKS: {
+    "en-US": string;
+    "en-GB": string;
+};
+export declare const TRUSTPILOT_WIDGET: {
+    "micro-combo": {
+        templateId: string;
+        className: string;
+    };
+    mini: {
+        templateId: string;
+        className: string;
+    };
+};

package/dist/types/components/Trust/getDefaultProps.d.ts

@@ -0,0 +1,18 @@
+import { TrustProps } from "./types";
+export declare const getDefaultProps: (props: TrustProps) => {
+    "data-businessunit-id": string;
+    "data-locale": "en-GB" | "en-US";
+    "data-template-id": string;
+    "data-theme": "dark" | "light";
+    "data-style-width": string;
+    link: string;
+} | {
+    "data-businessunit-id": string;
+    "data-locale": "en-GB" | "en-US";
+    "data-template-id": string;
+    "data-theme": "dark" | "light";
+    "data-style-width": string;
+    link: string;
+    "data-style-height": string;
+    "data-stars": string | undefined;
+};

package/dist/types/components/Trust/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Trust";
+export * from "./types";

package/dist/types/components/Trust/types.d.ts

@@ -0,0 +1,22 @@
+import { Ref, RefAttributes } from "react";
+import { DOMProps } from "../../types/dom";
+import { TRUSTPILOT_WIDGET } from "./constants";
+declare global {
+    interface Window {
+        Trustpilot: any;
+    }
+}
+export type TrustElementType = HTMLDivElement;
+export interface TrustProps extends DOMProps, RefAttributes<TrustElementType> {
+    /** Custom class name for setting specific CSS */
+    className?: string;
+    elementType?: string | React.ElementType;
+    locale: "en-US" | "en-GB";
+    variant: keyof typeof TRUSTPILOT_WIDGET;
+    templateId?: string;
+    height?: string;
+    width?: string;
+    theme: "dark" | "light";
+    stars?: string;
+}
+export type TrustRef = Ref<TrustElementType>;

package/dist/types/components/index.d.ts

@@ -37,4 +37,5 @@ export * from "./TextArea";
 export * from "./TextAreaInput";
 export * from "./TextField";
 export * from "./Title";
+export * from "./Trust";
 export * from "./VisuallyHidden";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "4.9.2",
+  "version": "4.10.0",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",
@@ -86,7 +86,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.16",
-    "@simplybusiness/icons": "^4.9.0",
+    "@simplybusiness/icons": "^4.10.0",
     "classnames": "^2.5.1",
     "dialog-polyfill": "^0.5.6",
     "lodash.debounce": "^4.0.8",

package/src/components/Trust/Trust.mdx

@@ -0,0 +1,55 @@
+import { Meta, ArgTypes, Story } from "@storybook/addon-docs";
+import * as TrustStories from "./Trust.stories";
+import { Trust } from "./Trust";
+
+<Meta of={TrustStories} />
+
+# Trust
+
+The `Trust` component is used for to display review summary from Trustpilot.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { Trust } from "@simplybusiness/mobius";
+```
+
+## MicroCombo
+
+<Story of={TrustStories.MicroCombo} />
+
+## Mini
+
+<Story of={TrustStories.Mini} />
+
+## Props
+
+<ArgTypes of={Trust} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for a Trust:
+
+```html
+<div
+  class="mobius mobius/Trust mobius/TrustThemeDark mobius/TrustVariantMicroCombo"
+>
+  <a
+    href="https://www.trustpilot.com/review/simplybusiness.com"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    Trustpilot
+  </a>
+</div>
+```
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Trust) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Trust/Trust.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Trust, type TrustProps } from "..";
+import { excludeControls } from "../../utils";
+import { TrustpilotProvider } from "./TrustpilotProvider";
+
+type StoryType = StoryObj<typeof Trust>;
+
+const meta: Meta<typeof Trust> = {
+  title: "Components/Trust",
+  component: Trust,
+  argTypes: excludeControls(
+    "className",
+    "locale",
+    "variant",
+    "theme",
+    "width",
+    "height",
+    "templateId",
+    "stars",
+  ),
+  decorators: [
+    Story => (
+      <TrustpilotProvider>
+        <Story />
+      </TrustpilotProvider>
+    ),
+  ],
+};
+
+export const MicroCombo: StoryType = {
+  render: (args: TrustProps) => <Trust {...args} />,
+  args: {
+    locale: "en-US",
+    variant: "micro-combo",
+    theme: "light",
+  },
+};
+
+export const Mini: StoryType = {
+  render: (args: TrustProps) => <Trust {...args} />,
+  args: {
+    locale: "en-US",
+    variant: "mini",
+    theme: "light",
+  },
+};
+
+export default meta;

package/src/components/Trust/Trust.test.tsx

@@ -0,0 +1,8 @@
+import { render } from "@testing-library/react";
+import { Trust } from ".";
+
+describe("Trust", () => {
+  it("should render without errors", () => {
+    render(<Trust locale="en-US" variant="micro-combo" theme="dark" />);
+  });
+});

package/src/components/Trust/Trust.tsx

@@ -0,0 +1,62 @@
+import { forwardRef, useEffect, useRef } from "react";
+import classNames from "classnames/dedupe";
+import { ForwardedRefComponent } from "../../types/components";
+import { TrustElementType, TrustProps, TrustRef } from "./types";
+import { getDefaultProps } from "./getDefaultProps";
+import { REQUIRED_TRUSTPILOT_CLASS_NAME, TRUSTPILOT_WIDGET } from "./constants";
+import { mergeRefs } from "../../utils";
+
+export const Trust: ForwardedRefComponent<TrustProps, TrustElementType> =
+  forwardRef((props: TrustProps, ref: TrustRef) => {
+    const {
+      elementType: Element = "div",
+      variant,
+      theme,
+      ...otherProps
+    } = props;
+    const trustRef = useRef(null);
+
+    const { link, ...defaultProps } = getDefaultProps(props);
+    const { className: variantClassName } = TRUSTPILOT_WIDGET[variant];
+    const themeClassName = theme.charAt(0).toUpperCase() + theme.slice(1);
+
+    const classes = classNames(
+      "mobius",
+      "mobius/Trust",
+      REQUIRED_TRUSTPILOT_CLASS_NAME,
+      {
+        [`mobius/TrustTheme${themeClassName}`]: theme,
+        [`mobius/TrustVariant${variantClassName}`]: variant,
+      },
+      otherProps.className,
+    );
+
+    useEffect(() => {
+      // If window.Trustpilot is available it means that we need to load the TrustBox from our ref.
+      if (
+        trustRef.current &&
+        window.Trustpilot &&
+        window.Trustpilot.loadFromElement
+      ) {
+        window.Trustpilot.loadFromElement(trustRef.current, true);
+      }
+    }, []);
+
+    return (
+      <Element
+        ref={mergeRefs([trustRef, ref])}
+        {...defaultProps}
+        {...otherProps}
+        className={classes}
+      >
+        <a
+          href={link}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="mobius/TrustLink"
+        >
+          Trustpilot
+        </a>
+      </Element>
+    );
+  });

package/src/components/Trust/TrustpilotProvider.tsx

@@ -0,0 +1,20 @@
+import { ReactNode, useEffect } from "react";
+
+export const TrustpilotProvider = ({ children }: { children: ReactNode }) => {
+  useEffect(() => {
+    // Required to load Trustpilot widgets
+    const script = document.createElement("script");
+    script.type = "text/javascript";
+    script.className = "optanon-category-C0002";
+    script.src =
+      "//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js";
+    script.async = true;
+    document.head.appendChild(script);
+
+    return () => {
+      document.head.removeChild(script);
+    };
+  }, []);
+
+  return <div>{children}</div>;
+};

package/src/components/Trust/constants.ts

@@ -0,0 +1,21 @@
+export const REQUIRED_TRUSTPILOT_CLASS_NAME = "trustpilot-widget";
+
+export const SIMPLYBUSINESS_UNIT_ID = "5ca35a3da72b330001954cef";
+
+export const TRUSTPILOT_LINKS = {
+  "en-US": "https://www.trustpilot.com/review/simplybusiness.com",
+  "en-GB": "https://www.trustpilot.com/review/simplybusiness.co.uk",
+};
+
+export const TRUSTPILOT_WIDGET = {
+  // Keys based on actual widget names
+  // https://support.trustpilot.com/hc/en-us/articles/360019826379-TrustBox-widget-overview
+  "micro-combo": {
+    templateId: "5419b6ffb0d04a076446a9af",
+    className: "MicroCombo",
+  },
+  mini: {
+    templateId: "53aa8807dec7e10d38f59f32",
+    className: "Mini",
+  },
+};

package/src/components/Trust/getDefaultProps.ts

@@ -0,0 +1,31 @@
+import {
+  SIMPLYBUSINESS_UNIT_ID,
+  TRUSTPILOT_LINKS,
+  TRUSTPILOT_WIDGET,
+} from "./constants";
+import { TrustProps } from "./types";
+
+export const getDefaultProps = (props: TrustProps) => {
+  const { locale, variant, height, width, theme, stars } = props;
+  const { templateId } = TRUSTPILOT_WIDGET[variant];
+  const link = TRUSTPILOT_LINKS[locale];
+
+  const sharedProps = {
+    "data-businessunit-id": SIMPLYBUSINESS_UNIT_ID,
+    "data-locale": locale,
+    "data-template-id": templateId,
+    "data-theme": theme,
+    "data-style-width": width || "100%",
+    link,
+  };
+
+  if (variant === "micro-combo") {
+    return {
+      "data-style-height": height || "40px",
+      "data-stars": stars,
+      ...sharedProps,
+    };
+  }
+
+  return sharedProps;
+};

package/src/components/Trust/index.tsx

@@ -0,0 +1,2 @@
+export * from "./Trust";
+export * from "./types";

package/src/components/Trust/types.ts

@@ -0,0 +1,28 @@
+import { Ref, RefAttributes } from "react";
+import { DOMProps } from "../../types/dom";
+import { TRUSTPILOT_WIDGET } from "./constants";
+
+declare global {
+  interface Window {
+    Trustpilot: any;
+  }
+}
+
+window.Trustpilot = window.Trustpilot || {};
+
+export type TrustElementType = HTMLDivElement;
+
+export interface TrustProps extends DOMProps, RefAttributes<TrustElementType> {
+  /** Custom class name for setting specific CSS */
+  className?: string;
+  elementType?: string | React.ElementType;
+  locale: "en-US" | "en-GB";
+  variant: keyof typeof TRUSTPILOT_WIDGET;
+  templateId?: string;
+  height?: string;
+  width?: string;
+  theme: "dark" | "light";
+  stars?: string;
+}
+
+export type TrustRef = Ref<TrustElementType>;

package/src/components/index.tsx

@@ -37,4 +37,5 @@ export * from "./TextArea";
 export * from "./TextAreaInput";
 export * from "./TextField";
 export * from "./Title";
+export * from "./Trust";
 export * from "./VisuallyHidden";