@simplybusiness/mobius 4.9.0 → 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/Text/Text.stories.d.ts

@@ -2,9 +2,20 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Text } from "./Text";
 type StoryType = StoryObj<typeof Text>;
 declare const meta: Meta<typeof Text>;
-export declare const Normal: StoryType;
+export declare const Heading1: StoryType;
+export declare const Heading2: StoryType;
+export declare const Heading3: StoryType;
+export declare const Heading4: StoryType;
+export declare const Paragraph: StoryType;
+export declare const Small: StoryType;
+export declare const Legal: StoryType;
+export declare const VariantHeading1: StoryType;
+export declare const VariantHeading2: StoryType;
+export declare const VariantHeading3: StoryType;
+export declare const VariantHeading4: StoryType;
+export declare const VariantBody: StoryType;
+export declare const VariantSmall: StoryType;
+export declare const VariantLegal: StoryType;
 export declare const Themed: StoryType;
-export declare const Example: () => import("react/jsx-runtime").JSX.Element;
-export declare const ExampleVariant: () => import("react/jsx-runtime").JSX.Element;
 export declare const ExampleSpacing: () => import("react/jsx-runtime").JSX.Element;
 export default meta;

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/dist/types/yarnpath.test.d.ts

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "4.9.0",
+  "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.8.0",
+    "@simplybusiness/icons": "^4.10.0",
     "classnames": "^2.5.1",
     "dialog-polyfill": "^0.5.6",
     "lodash.debounce": "^4.0.8",

package/src/components/Text/Text.mdx

@@ -1,4 +1,4 @@
-import { Meta, ArgTypes, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Story, Canvas } from "@storybook/blocks";
 import { Text } from "./Text";
 import * as TextStories from "./Text.stories";
 
@@ -20,13 +20,67 @@ yarn add @simplybusiness/mobius
 import { Text } from "@simplybusiness/mobius";
 ```
 
-## Examples
+## Use default HTML elements and their theme styles
 
-<TextStories.Example />
+### Heading 1
 
-### Normal
+<Canvas of={TextStories.Heading1} />
 
-<Story of={TextStories.Normal} />
+### Heading 2
+
+<Canvas of={TextStories.Heading2} />
+
+### Heading 3
+
+<Canvas of={TextStories.Heading3} />
+
+### Heading 4
+
+<Canvas of={TextStories.Heading4} />
+
+### Paragraph
+
+<Canvas of={TextStories.Paragraph} />
+
+### Small
+
+<Canvas of={TextStories.Small} />
+
+### Legal
+
+<Canvas of={TextStories.Legal} />
+
+## Style HTML elements (defaults to `<p>` tag) with `variant` prop
+
+Make `<p>` tag look like an `<h1>` tag.
+
+### Variant H1
+
+<Canvas of={TextStories.VariantHeading1} />
+
+### Variant H2
+
+<Canvas of={TextStories.VariantHeading2} />
+
+### Variant H3
+
+<Canvas of={TextStories.VariantHeading3} />
+
+### Variant H4
+
+<Canvas of={TextStories.VariantHeading4} />
+
+### Variant Body
+
+<Canvas of={TextStories.VariantBody} />
+
+### Variant Small
+
+<Canvas of={TextStories.VariantSmall} />
+
+### Variant Legal
+
+<Canvas of={TextStories.VariantLegal} />
 
 ### Themed
 
@@ -44,12 +98,6 @@ const StyledText = styled(Text)`
 <StyledText>Sample Text</StyledText>
 ```
 
-### Variant
-
-Override text presentation with a named variant.
-
-<TextStories.ExampleVariant />
-
 ### Spacing
 
 Set the spacing to "loose" or "tight" to override the default line height for text. This applies to any element type or variant.

package/src/components/Text/Text.stories.tsx

@@ -8,18 +8,108 @@ type StoryType = StoryObj<typeof Text>;
 const meta: Meta<typeof Text> = {
   title: "Components/Text",
   component: Text,
-  excludeStories: ["Example", "ExampleSpacing", "ExampleVariant"],
+  excludeStories: ["ExampleSpacing"],
   argTypes: excludeControls("style"),
 };
 
-export const Normal: StoryType = {
-  render: (args: TextProps) => <Text {...args}>Sample Text</Text>,
+export const Heading1: StoryType = {
+  render: (args: TextProps) => <Text {...args}>Heading 1</Text>,
+  args: {
+    elementType: "h1",
+  },
+};
+
+export const Heading2: StoryType = {
+  render: (args: TextProps) => <Text {...args}>Heading 2</Text>,
+  args: {
+    elementType: "h2",
+  },
+};
+
+export const Heading3: StoryType = {
+  render: (args: TextProps) => <Text {...args}>Heading 3</Text>,
+  args: {
+    elementType: "h3",
+  },
+};
+
+export const Heading4: StoryType = {
+  render: (args: TextProps) => <Text {...args}>Heading 4</Text>,
   args: {
     elementType: "h4",
+  },
+};
+
+export const Paragraph: StoryType = {
+  render: (args: TextProps) => <Text {...args}>Paragraph</Text>,
+  args: {
+    elementType: "p",
+  },
+};
+
+export const Small: StoryType = {
+  render: (args: TextProps) => <Text {...args}>Small paragraph</Text>,
+  args: {
+    variant: "small",
+  },
+};
+
+export const Legal: StoryType = {
+  render: (args: TextProps) => <Text {...args}>Small print</Text>,
+  args: {
+    variant: "legal",
+  },
+};
+
+export const VariantHeading1: StoryType = {
+  render: (args: TextProps) => <Text {...args}>Variant H1</Text>,
+  args: {
+    variant: "h1",
+  },
+};
+
+export const VariantHeading2: StoryType = {
+  render: (args: TextProps) => <Text {...args}>Variant H2</Text>,
+  args: {
+    variant: "h2",
+  },
+};
+
+export const VariantHeading3: StoryType = {
+  render: (args: TextProps) => <Text {...args}>Variant H3</Text>,
+  args: {
+    variant: "h3",
+  },
+};
+
+export const VariantHeading4: StoryType = {
+  render: (args: TextProps) => <Text {...args}>Variant H4</Text>,
+  args: {
     variant: "h4",
   },
 };
 
+export const VariantBody: StoryType = {
+  render: (args: TextProps) => <Text {...args}>Variant body</Text>,
+  args: {
+    variant: "body",
+  },
+};
+
+export const VariantSmall: StoryType = {
+  render: (args: TextProps) => <Text {...args}>Variant small</Text>,
+  args: {
+    variant: "small",
+  },
+};
+
+export const VariantLegal: StoryType = {
+  render: (args: TextProps) => <Text {...args}>Variant legal</Text>,
+  args: {
+    variant: "legal",
+  },
+};
+
 export const Themed: StoryType = {
   render: (args: TextProps) => <Text {...args}>Sample Text</Text>,
   args: {
@@ -31,72 +121,9 @@ export const Themed: StoryType = {
   },
 };
 
-export const Example = () => (
-  <>
-    <Box>
-      <Text elementType="h1">Heading 1</Text>
-      <Text elementType="h2">Heading 2</Text>
-      <Text elementType="h3">Heading 3</Text>
-      <Text elementType="h4">Heading 4</Text>
-      <Text>Paragraph</Text>
-      <Text variant="small">Small paragraph</Text>
-      <Text variant="legal">Small print</Text>
-    </Box>
-    <Box>
-      <Text elementType="h1">First Heading</Text>
-      <Text>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel lorem
-        enim. Nam vitae enim mollis turpis scelerisque vulputate id sit amet
-        nisl. Etiam et tortor a nunc hendrerit luctus sed at nunc. Lorem ipsum
-        dolor sit amet, consectetur adipiscing elit. Nullam id turpis nisl. In
-        hac habitasse platea dictumst. Morbi blandit sodales nibh, auctor
-        dapibus orci pellentesque sit amet. Etiam posuere massa vel imperdiet
-        dapibus. Morbi sed tempor neque, sit amet viverra magna. Etiam efficitur
-        augue accumsan, feugiat libero id, tincidunt turpis. Nam ullamcorper
-        enim in leo dapibus aliquam eu sit amet erat. Morbi iaculis magna ut
-        tincidunt rhoncus.
-      </Text>
-      <Text>
-        Mauris pharetra enim et turpis lacinia, quis porta velit commodo. Proin
-        at vehicula ligula, ut semper sapien. Donec felis elit, pretium vitae
-        viverra eget, venenatis id elit. Lorem ipsum dolor sit amet, consectetur
-        adipiscing elit. Quisque blandit et erat nec placerat. Vestibulum vitae
-        risus pellentesque, semper odio eget, elementum orci. Nam pulvinar metus
-        sed sapien gravida bibendum. Praesent a malesuada ipsum. Vivamus ac
-        congue odio.
-      </Text>
-      <Text elementType="h2">Second Heading</Text>
-      <Text>
-        Ut vel lectus arcu. Etiam ut efficitur turpis, pretium pretium nunc. Ut
-        dolor nibh, facilisis at tempus at, iaculis sed mi. Etiam sollicitudin,
-        elit eu dapibus pharetra, purus turpis egestas enim, vel pulvinar leo
-        libero ac ante. Sed posuere, mi a commodo bibendum, dui lacus
-        ullamcorper dolor, ut dapibus nunc libero vel felis. Morbi quis
-        porttitor nisi. Aenean ac elit ipsum. Curabitur nunc nibh, tristique non
-        purus vel, efficitur vulputate massa. Donec eget risus venenatis turpis
-        tempor venenatis. Nam aliquet ipsum non faucibus tempus. Vestibulum
-        efficitur ex erat, eget varius urna venenatis vel. Aenean mollis arcu
-        purus, id pretium ligula facilisis et.
-      </Text>
-    </Box>
-  </>
-);
-
-export const ExampleVariant = () => (
-  <div style={{ display: "flex", flexDirection: "column" }}>
-    <Text variant="h1">variant h1</Text>
-    <Text variant="h2">variant h2</Text>
-    <Text variant="h3">variant h3</Text>
-    <Text variant="h4">variant h4</Text>
-    <Text variant="body">variant body</Text>
-    <Text variant="small">variant small</Text>
-    <Text variant="legal">variant legal</Text>
-  </div>
-);
-
 export const ExampleSpacing = () => (
   <Box>
-    <Text variant="h3">Tight Spacing</Text>
+    <Text variant="h3">Tight paragraph spacing</Text>
     <Text spacing="tight">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel lorem
       enim. Nam vitae enim mollis turpis scelerisque vulputate id sit amet nisl.
@@ -111,7 +138,7 @@ export const ExampleSpacing = () => (
       Ut vel lectus arcu. Etiam ut efficitur turpis, pretium pretium nunc. Ut
       dolor nibh, facilisis at tempus at, iaculis sed mi.
     </Text>
-    <Text variant="h3">Loose Spacing</Text>
+    <Text variant="h3">Loose paragraph spacing</Text>
     <Text>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel lorem
       enim. Nam vitae enim mollis turpis scelerisque vulputate id sit amet nisl.