@mvf/external-components 3.37.0 → 3.38.1

package/Experiments/CRO-710/Molecules/SupplierCard/SupplierCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SupplierCard.js","sourceRoot":"","sources":["../../../../../src/Experiments/CRO-710/Molecules/SupplierCard/SupplierCard.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,sCAAsC;AACtC,qEAA+C;AAE/C,iFAA2D;AAE3D,gEAA0C;AAC1C,0CAAsD;AACtD,sFAAgE;AAChE,+DAAyC;AACzC,0FAAoE;AAOpE,IAAM,YAAY,GAAqB,UAAC,EAgBvC;QAfC,YAAY,kBAAA,EACZ,YAAY,kBAAA,EACZ,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,OAAO,aAAA,EACP,UAAU,gBAAA,EACV,EAAE,QAAA,EACF,eAAe,qBAAA,EACf,UAAU,gBAAA,EACV,eAAe,qBAAA,EACf,OAAO,aAAA,EACP,UAAU,gBAAA,EACV,QAAQ,cAAA,EACR,cAAc,oBAAA;IAEd,IAAM,WAAW,GAAG,OAAO,OAAO,KAAK,UAAU,CAAC;IAClD,IAAM,MAAM,GAAG,IAAA,iCAAuB,EAAC,EAAE,WAAW,aAAA,EAAE,CAAC,CAAC;IACxD,IAAM,WAAW,GAAG,OAAO,CAAC,UAAU,IAAI,OAAO,CAAC,CAAC;IAEnD,OAAO,CACL,yCAAK,GAAG,EAAE,MAAM,CAAC,SAAS,gBACxB,wBAAC,oBAAU,aACT,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,cAAM,OAAA,OAAO,CAAC,EAAE,EAAE,IAAA,EAAE,QAAQ,UAAA,EAAE,CAAC,EAAzB,CAAyB,CAAC,CAAC,CAAC,SAAS,iBACrD,UAAU,EACvB,QAAQ,EAAE,CAAC,CAAC,QAAQ,EACpB,cAAc,EAAE,cAAc,iBAE7B,eAAe,IAAI,UAAU,KAAK,KAAK,IAAI,CAC1C,uBAAC,uBAAa,IACZ,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAClC,UAAU,EACR,UAAU,CAAC,CAAC,CAAC,UAAG,UAAU,sBAAmB,CAAC,CAAC,CAAC,SAAS,EAE3D,cAAc,EAAE,cAAc,GAC9B,CACH,EACA,SAAS,IAAI,CACZ,uBAAC,cAAG,aAAC,GAAG,EAAE,MAAM,CAAC,KAAK,gBACpB,uBAAC,qBAAU,aACT,GAAG,EAAE,MAAM,CAAC,SAAS,iBACR,UAAU,CAAC,CAAC,CAAC,UAAG,UAAU,WAAQ,CAAC,CAAC,CAAC,SAAS,gBAE1D,SAAS,IACC,IACT,CACP,EACD,wBAAC,eAAI,aACH,SAAS,QACT,SAAS,EAAC,KAAK,EACf,UAAU,EAAC,QAAQ,EACnB,GAAG,EAAE,MAAM,CAAC,aAAa,iBAEzB,uBAAC,eAAI,aAAC,IAAI,QAAC,EAAE,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,gBAC/B,wBAAC,eAAI,aACH,SAAS,QACT,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EACvB,SAAS,EAAC,QAAQ,EAClB,GAAG,EAAE,MAAM,CAAC,iBAAiB,iBAE5B,YAAY,IAAI,CACf,uBAAC,eAAI,aAAC,IAAI,QAAC,GAAG,EAAE,MAAM,CAAC,YAAY,gBAChC,YAAY,IACR,CACR,EACA,YAAY,IAAI,CACf,uBAAC,eAAI,aAAC,IAAI,sBACR,uBAAC,qBAAU,aACT,EAAE,EAAE,UAAG,EAAE,kBAAe,EACxB,GAAG,EAAE,MAAM,CAAC,YAAY,iBAEtB,UAAU,CAAC,CAAC,CAAC,UAAG,UAAU,kBAAe,CAAC,CAAC,CAAC,SAAS,gBAGtD,YAAY,IACF,IACR,CACR,KACI,IACF,EACP,uBAAC,eAAI,aACH,IAAI,QACJ,EAAE,EAAE,EAAE,EACN,WAAW,EAAE,WAAW,IAAI,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBAEnD,uBAAC,eAAI,aACH,SAAS,QACT,SAAS,EAAC,QAAQ,EAClB,cAAc,EAAC,QAAQ,EACvB,GAAG,EAAE,MAAM,CAAC,YAAY,gBAExB,uBAAC,eAAI,aAAC,IAAI,QAAC,EAAE,EAAE,EAAE,gBACf,uBAAC,cAAI,aACH,EAAE,EAAE,UAAG,EAAE,cAAW,EACpB,KAAK,EAAC,MAAM,EACZ,OAAO,EAAC,YAAY,iBAElB,UAAU,CAAC,CAAC,CAAC,UAAG,UAAU,cAAW,CAAC,CAAC,CAAC,SAAS,EAEnD,cAAc,EAAE,cAAc,gBAE7B,QAAQ,IACJ,IACF,IACF,IACF,EACP,uBAAC,eAAI,aACH,IAAI,QACJ,EAAE,EAAE,EAAE,EACN,WAAW,EAAE,WAAW,IAAI,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBAElD,UAAU,CAAC,CAAC,CAAC,CACZ,uBAAC,cAAG,aAAC,GAAG,EAAE,MAAM,CAAC,eAAe,gBAC9B,uBAAC,gBAAM,IACL,KAAK,EAAE,OAAO,IAAI,EAAE,EACpB,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAChD,IAAI,EAAE,OAAO,EACb,YAAY,EAAE,eAAe,EAC7B,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,UAAG,UAAU,SAAM,CAAC,CAAC,CAAC,SAAS,EACxD,cAAc,EAAE,cAAc,GAC9B,IACE,CACP,CAAC,CAAC,CAAC,CACF,wBAAC,eAAI,aAAC,SAAS,QAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,iBACxD,eAAe,IAAI,CAClB,uBAAC,eAAI,aAAC,IAAI,sBACR,uBAAC,uBAAa,IACZ,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,UAAU,EACR,UAAU,CAAC,CAAC,CAAC,UAAG,UAAU,mBAAgB,CAAC,CAAC,CAAC,SAAS,EAExD,cAAc,EAAE,cAAc,GAC9B,IACG,CACR,EACA,OAAO,IAAI,CACV,uBAAC,eAAI,aAAC,IAAI,sBACR,uBAAC,qBAAU,aACT,GAAG,EAAE,MAAM,CAAC,SAAS,iBAEnB,UAAU,CAAC,CAAC,CAAC,UAAG,UAAU,eAAY,CAAC,CAAC,CAAC,SAAS,gBAGnD,OAAO,IACG,IACR,CACR,KACI,CACR,IACI,KACF,KACI,IACT,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,YAAY,GAAG,sBAAY,CAAC;AAEzC,kBAAe,YAAY,CAAC"}

package/Experiments/CRO-710/Molecules/SupplierCard/SupplierCard.test.d.ts

@@ -0,0 +1,2 @@
+/** @jsxImportSource @emotion/react */
+export {};

package/Experiments/CRO-710/Molecules/SupplierCard/SupplierCard.test.js

@@ -0,0 +1,86 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+var icons_material_1 = require("@mui/icons-material");
+var renderWithProviders_1 = __importDefault(require("../../../../Helpers/React/renderWithProviders"));
+var SupplierCard_1 = __importDefault(require("./SupplierCard"));
+describe('<SupplierCard />', function () {
+    var ctaText = 'Continue';
+    var id = 'supplier-card-id';
+    var testId = 'supplier-card-test-id';
+    it('should trigger callbacks when clicking cta and card', function () {
+        var ctaClickHandler = jest.fn();
+        var cardClickHandler = jest.fn();
+        var _a = (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(SupplierCard_1.default, { onClick: cardClickHandler, onClickCta: ctaClickHandler, includeCta: true, ctaText: ctaText, id: id, dataTestId: testId, experimentName: "default" })), getByText = _a.getByText, getByTestId = _a.getByTestId;
+        getByText('Continue').click();
+        expect(ctaClickHandler).toHaveBeenCalled();
+        expect(cardClickHandler).toHaveBeenCalled();
+        getByTestId(testId).click();
+        expect(ctaClickHandler).toHaveBeenCalledTimes(1);
+        expect(cardClickHandler).toHaveBeenCalledTimes(2);
+    });
+    it('should include supplierLogo when passed', function () {
+        var logoTestId = 'supplier-logo';
+        var SupplierLogo = (0, jsx_runtime_1.jsx)("img", { "data-testid": logoTestId });
+        var getByTestId = (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(SupplierCard_1.default, { SupplierLogo: SupplierLogo, ctaText: ctaText, id: id, experimentName: "default" })).getByTestId;
+        expect(getByTestId(logoTestId)).toBeInTheDocument();
+    });
+    it('should include badge text when passed', function () {
+        var badgeText = 'Badge';
+        var getByText = (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(SupplierCard_1.default, { badgeText: badgeText, ctaText: ctaText, id: id, experimentName: "default" })).getByText;
+        expect(getByText(badgeText)).toBeInTheDocument();
+    });
+    it('should include cta icon when passed', function () {
+        var logoTestId = 'cta-icon';
+        var CtaIcon = (0, jsx_runtime_1.jsx)(icons_material_1.Phone, { "data-testid": logoTestId });
+        var getByTestId = (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(SupplierCard_1.default, { CtaIcon: CtaIcon, ctaText: ctaText, id: id, experimentName: "default" })).getByTestId;
+        expect(getByTestId(logoTestId)).toBeInTheDocument();
+    });
+    it('should show cta text within a button by default', function () {
+        var _a = (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(SupplierCard_1.default, { ctaText: ctaText, id: id, dataTestId: testId, experimentName: "default" })), getByRole = _a.getByRole, queryByTestId = _a.queryByTestId;
+        var button = getByRole('button');
+        expect(button).toHaveTextContent(ctaText);
+        expect(queryByTestId("".concat(testId, "-rightText"))).not.toBeInTheDocument();
+    });
+    it('should show cta text without a button if includeCta = false', function () {
+        var _a = (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(SupplierCard_1.default, { ctaText: ctaText, id: id, includeCta: false, dataTestId: testId, experimentName: "default" })), queryByRole = _a.queryByRole, getByTestId = _a.getByTestId;
+        expect(queryByRole('button')).not.toBeInTheDocument();
+        expect(getByTestId("".concat(testId, "-rightText"))).toHaveTextContent(ctaText);
+    });
+    it('should include supplierName when passed', function () {
+        var supplierName = 'Supplier Name';
+        var getByText = (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(SupplierCard_1.default, { supplierName: supplierName, ctaText: ctaText, id: id, experimentName: "default" })).getByText;
+        expect(getByText(supplierName)).toBeInTheDocument();
+    });
+    it('Should trigger callbacks when clicking card without cta', function () {
+        var clickHandler = jest.fn();
+        var getByTestId = (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(SupplierCard_1.default, { onClick: clickHandler, id: id, dataTestId: testId, includeCta: false, experimentName: "default" })).getByTestId;
+        getByTestId(testId).click();
+        expect(clickHandler).toHaveBeenCalled();
+    });
+    describe('When selection is included', function () {
+        it('should show a selected checkbox within the cta', function () {
+            var getByRole = (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(SupplierCard_1.default, { selected: true, includeCheckbox: true, ctaText: ctaText, id: id, experimentName: "default" })).getByRole;
+            var button = getByRole('button');
+            var checkbox = button.querySelector('input[type="checkbox"]');
+            expect(checkbox).toHaveAttribute('checked');
+        });
+        it('should show an unselected checkbox within the cta', function () {
+            var getByRole = (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(SupplierCard_1.default, { selected: false, includeCheckbox: true, ctaText: ctaText, id: id, experimentName: "default" })).getByRole;
+            var button = getByRole('button');
+            var checkbox = button.querySelector('input[type="checkbox"]');
+            expect(checkbox).not.toHaveAttribute('checked');
+        });
+        it('should include checkboxes when there is no cta', function () {
+            var getByRole = (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(SupplierCard_1.default, { selected: true, includeCheckbox: true, id: id, includeCta: false, experimentName: "default" })).getByRole;
+            var checkbox = getByRole('checkbox');
+            expect(checkbox).toBeInTheDocument();
+            expect(checkbox).toHaveAttribute('checked');
+        });
+    });
+});
+//# sourceMappingURL=SupplierCard.test.js.map

package/Experiments/CRO-710/Molecules/SupplierCard/SupplierCard.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SupplierCard.test.js","sourceRoot":"","sources":["../../../../../src/Experiments/CRO-710/Molecules/SupplierCard/SupplierCard.test.tsx"],"names":[],"mappings":"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"}

package/Experiments/CRO-710/Molecules/SupplierCard/SupplierCardStory.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import supplierLogos from '../../../../Assets/SupplierLogos/supplierLogos';
+type SupplierCardStoryType = React.FunctionComponent<{
+    ctaText: string;
+    badgeText?: string;
+    includeCheckbox: boolean;
+    selected: boolean;
+    supplierLogoName: keyof typeof supplierLogos | 'none';
+    supplierNameText?: string;
+    bulletOneText: string;
+    bulletTwoText: string;
+    bulletThreeText: string;
+    ctaIcon: 'none' | 'phone' | 'email';
+    id: string;
+    includeCta?: boolean;
+    invertCtaColors: boolean;
+    disableClick: boolean;
+}>;
+declare const SupplierCardStory: SupplierCardStoryType;
+export default SupplierCardStory;

package/Experiments/CRO-710/Molecules/SupplierCard/SupplierCardStory.js

@@ -0,0 +1,48 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var addon_actions_1 = require("@storybook/addon-actions");
+var SupplierCard_1 = __importDefault(require("./SupplierCard"));
+var react_1 = require("react");
+var icons_material_1 = require("@mui/icons-material");
+var supplierLogos_1 = __importDefault(require("../../../../Assets/SupplierLogos/supplierLogos"));
+var icons = {
+    email: (0, jsx_runtime_1.jsx)(icons_material_1.Email, {}),
+    none: undefined,
+    phone: (0, jsx_runtime_1.jsx)(icons_material_1.Phone, {}),
+};
+var SupplierCardStory = function (_a) {
+    var badgeText = _a.badgeText, includeCheckbox = _a.includeCheckbox, selected = _a.selected, supplierLogoName = _a.supplierLogoName, supplierNameText = _a.supplierNameText, bulletOneText = _a.bulletOneText, bulletTwoText = _a.bulletTwoText, bulletThreeText = _a.bulletThreeText, ctaIcon = _a.ctaIcon, ctaText = _a.ctaText, id = _a.id, includeCta = _a.includeCta, invertCtaColors = _a.invertCtaColors, disableClick = _a.disableClick;
+    var _b = (0, react_1.useState)(selected), currentlySelected = _b[0], setCurrentlySelected = _b[1];
+    var handleClickCard = function (eventProps) {
+        (0, addon_actions_1.action)('Clicked Card')(eventProps);
+        if (includeCheckbox) {
+            setCurrentlySelected(!currentlySelected);
+        }
+    };
+    var handleClickCta = function () {
+        (0, addon_actions_1.action)('Clicked CTA')();
+    };
+    var bulletList = "\n    <ul>\n      <li>".concat(bulletOneText, "</li>\n      <li>").concat(bulletTwoText, "</li>\n      <li>").concat(bulletThreeText, "</li>\n    </ul>\n  ");
+    var SupplierLogo = supplierLogoName !== 'none' ? ((0, jsx_runtime_1.jsx)("img", { alt: 'supplier-logo', src: supplierLogos_1.default[supplierLogoName], style: { maxWidth: '100%', height: 'auto' } })) : undefined;
+    (0, react_1.useEffect)(function () {
+        setCurrentlySelected(selected);
+    }, [selected]);
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: 668 } }, { children: (0, jsx_runtime_1.jsx)(SupplierCard_1.default, __assign({ badgeText: badgeText, SupplierLogo: SupplierLogo, supplierName: supplierNameText, CtaIcon: icons[ctaIcon], ctaText: ctaText, id: id, includeCta: includeCta, invertCtaColors: invertCtaColors, onClick: !disableClick ? handleClickCard : undefined, onClickCta: handleClickCta, selected: currentlySelected, includeCheckbox: includeCheckbox, experimentName: "default" }, { children: (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: bulletList } }) })) })));
+};
+exports.default = SupplierCardStory;
+//# sourceMappingURL=SupplierCardStory.js.map

package/Experiments/CRO-710/Molecules/SupplierCard/SupplierCardStory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SupplierCardStory.js","sourceRoot":"","sources":["../../../../../src/Experiments/CRO-710/Molecules/SupplierCard/SupplierCardStory.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,0DAAkD;AAClD,gEAA0C;AAE1C,+BAA4C;AAC5C,sDAAmD;AACnD,iGAA2E;AAE3E,IAAM,KAAK,GAAG;IACZ,KAAK,EAAE,uBAAC,sBAAK,KAAG;IAChB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,uBAAC,sBAAK,KAAG;CACjB,CAAC;AAmBF,IAAM,iBAAiB,GAA0B,UAAC,EAejD;QAdC,SAAS,eAAA,EACT,eAAe,qBAAA,EACf,QAAQ,cAAA,EACR,gBAAgB,sBAAA,EAChB,gBAAgB,sBAAA,EAChB,aAAa,mBAAA,EACb,aAAa,mBAAA,EACb,eAAe,qBAAA,EACf,OAAO,aAAA,EACP,OAAO,aAAA,EACP,EAAE,QAAA,EACF,UAAU,gBAAA,EACV,eAAe,qBAAA,EACf,YAAY,kBAAA;IAEN,IAAA,KAA4C,IAAA,gBAAQ,EAAC,QAAQ,CAAC,EAA7D,iBAAiB,QAAA,EAAE,oBAAoB,QAAsB,CAAC;IAErE,IAAM,eAAe,GAAG,UAAC,UAAuC;QAC9D,IAAA,sBAAM,EAAC,cAAc,CAAC,CAAC,UAAU,CAAC,CAAC;QACnC,IAAI,eAAe,EAAE;YACnB,oBAAoB,CAAC,CAAC,iBAAiB,CAAC,CAAC;SAC1C;IACH,CAAC,CAAC;IACF,IAAM,cAAc,GAAG;QACrB,IAAA,sBAAM,EAAC,aAAa,CAAC,EAAE,CAAC;IAC1B,CAAC,CAAC;IAEF,IAAM,UAAU,GAAG,gCAET,aAAa,8BACb,aAAa,8BACb,eAAe,yBAExB,CAAC;IAEF,IAAM,YAAY,GAChB,gBAAgB,KAAK,MAAM,CAAC,CAAC,CAAC,CAC5B,gCACE,GAAG,EAAE,eAAe,EACpB,GAAG,EAAE,uBAAa,CAAC,gBAAgB,CAAC,EACpC,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAC3C,CACH,CAAC,CAAC,CAAC,SAAS,CAAC;IAEhB,IAAA,iBAAS,EAAC;QACR,oBAAoB,CAAC,QAAQ,CAAC,CAAC;IACjC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,yCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,gBAC3B,uBAAC,sBAAY,aACX,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,gBAAgB,EAC9B,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,EACvB,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,EAAE,EACN,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,OAAO,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,EACpD,UAAU,EAAE,cAAc,EAC1B,QAAQ,EAAE,iBAAiB,EAC3B,eAAe,EAAE,eAAe,EAChC,cAAc,EAAC,SAAS,gBAExB,iCAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE,GAAI,IAC5C,IACX,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,iBAAiB,CAAC"}

package/Experiments/CRO-710/Molecules/SupplierCard/defaultProps.d.ts

@@ -0,0 +1,8 @@
+declare const defaultProps: {
+    includeCta: boolean;
+    invertCtaColors: boolean;
+    onClickCta: () => void;
+    includeCheckbox: boolean;
+    selected: boolean;
+};
+export default defaultProps;

package/Experiments/CRO-710/Molecules/SupplierCard/defaultProps.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var defaultProps = {
+    includeCta: true,
+    invertCtaColors: false,
+    onClickCta: function () { },
+    includeCheckbox: false,
+    selected: false,
+};
+exports.default = defaultProps;
+//# sourceMappingURL=defaultProps.js.map

package/Experiments/CRO-710/Molecules/SupplierCard/defaultProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultProps.js","sourceRoot":"","sources":["../../../../../src/Experiments/CRO-710/Molecules/SupplierCard/defaultProps.ts"],"names":[],"mappings":";;AAAA,IAAM,YAAY,GAAG;IACnB,UAAU,EAAE,IAAI;IAChB,eAAe,EAAE,KAAK;IACtB,UAAU,EAAE,cAAa,CAAC;IAC1B,eAAe,EAAE,KAAK;IACtB,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEF,kBAAe,YAAY,CAAC"}

package/Experiments/CRO-710/Molecules/SupplierCard/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SupplierCard';

package/Experiments/CRO-710/Molecules/SupplierCard/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var SupplierCard_1 = require("./SupplierCard");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SupplierCard_1).default; } });
+//# sourceMappingURL=index.js.map

package/Experiments/CRO-710/Molecules/SupplierCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/Experiments/CRO-710/Molecules/SupplierCard/index.ts"],"names":[],"mappings":";;;;;;AAAA,+CAAyC;AAAhC,wHAAA,OAAO,OAAA"}

package/Experiments/CRO-710/Molecules/SupplierCard/makeSupplierCardStyling.d.ts

@@ -0,0 +1,22 @@
+interface ISupplierCardStyleProps {
+    isClickable: boolean;
+}
+declare const makeSupplierCardStyling: ({ isClickable }: ISupplierCardStyleProps) => {
+    container: {
+        cursor?: string | undefined;
+        pointerEvents?: import("csstype").Property.PointerEvents | undefined;
+    };
+    badge: import("@emotion/react").SerializedStyles;
+    badgeText: import("@emotion/react").SerializedStyles;
+    supplierName: import("@emotion/react").SerializedStyles;
+    supplierNameText: import("@emotion/react").SerializedStyles;
+    buttonContainer: import("@emotion/react").SerializedStyles;
+    cardContainer: import("@emotion/react").SerializedStyles;
+    logoGridContainer: import("@emotion/react").SerializedStyles;
+    logoGridItem: import("@emotion/react").SerializedStyles;
+    rightCheckbox: import("@emotion/react").SerializedStyles;
+    rightText: import("@emotion/react").SerializedStyles;
+    textGridItem: import("@emotion/react").SerializedStyles;
+    topRightCheckbox: import("@emotion/react").SerializedStyles;
+};
+export default makeSupplierCardStyling;

package/Experiments/CRO-710/Molecules/SupplierCard/makeSupplierCardStyling.js

@@ -0,0 +1,151 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("@emotion/react");
+var material_1 = require("@mui/material");
+var makeSupplierCardStyling = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var isClickable = _a.isClickable;
+    var _l = (0, react_1.useTheme)(), breakpoints = _l.breakpoints, mvf = _l.mvf;
+    var fontSize = mvf.fontSize, typography = mvf.typography, palette = mvf.palette, filters = mvf.filters, border = mvf.border;
+    var weight = typography.weight;
+    return {
+        container: __assign({}, (!isClickable && {
+            cursor: 'default',
+            pointerEvents: 'none',
+        })),
+        badge: (0, react_1.css)((_b = {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                backgroundColor: palette.text.primaryTextColor,
+                padding: '1px 14px',
+                borderTopLeftRadius: border.radius
+            },
+            _b[breakpoints.up('tabletSmall')] = {
+                padding: '5px 16px 3px 16px',
+            },
+            _b)),
+        badgeText: (0, react_1.css)((_c = {
+                fontFamily: typography.fontFamily,
+                letterSpacing: 'inherit',
+                color: palette.text.continueButtonTextColor,
+                fontSize: fontSize.mini,
+                fontWeight: weight.thick
+            },
+            _c[breakpoints.up('tabletSmall')] = {
+                fontSize: fontSize.small,
+            },
+            _c)),
+        supplierName: (0, react_1.css)({
+            color: palette.text.primaryTextColor,
+        }),
+        supplierNameText: (0, react_1.css)({
+            fontFamily: typography.fontFamily,
+            letterSpacing: 'inherit',
+            color: palette.text.primaryTextColor,
+            fontSize: fontSize.medium,
+            fontWeight: weight.thick,
+        }),
+        buttonContainer: (0, react_1.css)((_d = {
+                maxWidth: 230,
+                height: 44,
+                margin: '10px auto',
+                paddingLeft: 10,
+                paddingRight: 10
+            },
+            _d[breakpoints.up('tabletSmall')] = {
+                height: 55,
+            },
+            _d)),
+        cardContainer: (0, react_1.css)((_e = {
+                minHeight: 260,
+                paddingTop: 10,
+                paddingBottom: 10
+            },
+            _e[breakpoints.up('tabletSmall')] = {
+                minHeight: 150,
+            },
+            _e)),
+        logoGridContainer: (0, react_1.css)((_f = {
+                height: '100%',
+                margin: 'auto',
+                paddingBottom: 10,
+                width: '90%',
+                borderBottom: 'solid',
+                borderBottomColor: (0, material_1.lighten)(palette.component.answerUnselectedColor, filters.lighten.medium),
+                borderBottomWidth: border.width.thin
+            },
+            _f[breakpoints.up('tabletSmall')] = {
+                borderBottom: 'none',
+                padding: 0,
+                minHeight: 120,
+            },
+            _f)),
+        logoGridItem: (0, react_1.css)({
+            width: 100,
+            maxHeight: 50,
+        }),
+        rightCheckbox: (0, react_1.css)((_g = {
+                display: 'none'
+            },
+            _g[breakpoints.up('tabletSmall')] = {
+                display: 'block',
+                margin: 0,
+                padding: 0,
+            },
+            _g)),
+        rightText: (0, react_1.css)((_h = {
+                fontFamily: typography.fontFamily,
+                letterSpacing: 'inherit',
+                color: palette.component.answerSelectedColor,
+                fontSize: fontSize.compact,
+                fontWeight: weight.thick,
+                textAlign: 'center'
+            },
+            _h[breakpoints.up('tabletSmall')] = {
+                fontSize: fontSize.medium,
+            },
+            _h)),
+        textGridItem: (0, react_1.css)((_j = {
+                width: '100%',
+                height: '100%',
+                margin: '10px auto',
+                paddingLeft: 10,
+                paddingRight: 10
+            },
+            _j[breakpoints.up('tabletSmall')] = {
+                paddingLeft: 10,
+                paddingRight: 5,
+                borderLeft: 'solid',
+                borderLeftColor: (0, material_1.lighten)(palette.component.answerUnselectedColor, filters.lighten.medium),
+                borderLeftWidth: border.width.thin,
+                minHeight: 120,
+            },
+            _j)),
+        topRightCheckbox: (0, react_1.css)((_k = {
+                position: 'absolute',
+                top: 0,
+                right: 0,
+                margin: 10,
+                padding: 0,
+                display: 'block'
+            },
+            _k[breakpoints.up('tabletSmall')] = {
+                display: 'none',
+            },
+            _k)),
+    };
+};
+exports.default = makeSupplierCardStyling;
+//# sourceMappingURL=makeSupplierCardStyling.js.map

package/Experiments/CRO-710/Molecules/SupplierCard/makeSupplierCardStyling.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"makeSupplierCardStyling.js","sourceRoot":"","sources":["../../../../../src/Experiments/CRO-710/Molecules/SupplierCard/makeSupplierCardStyling.ts"],"names":[],"mappings":"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"}

package/Experiments/CRO-712/Atoms/ProgressBar/ProgressBar.js

@@ -16,26 +16,35 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 /** @jsxImportSource @emotion/react */
+var react_1 = require("react");
 var Box_1 = __importDefault(require("@mui/material/Box"));
 var LinearProgress_1 = __importDefault(require("@mui/material/LinearProgress"));
 var Typography_1 = __importDefault(require("@mui/material/Typography"));
 var defaultProps_1 = __importDefault(require("./defaultProps"));
-var react_1 = require("@emotion/react");
+var react_2 = require("@emotion/react");
 var ProgressBarHelpers_1 = require("./ProgressBarHelpers");
 var makeProgressBarStyling_1 = __importDefault(require("./makeProgressBarStyling"));
+var HEAD_START = 6;
 var ProgressBar = function (_a) {
     var id = _a.id, progress = _a.progress, text = _a.text, testId = _a.testId, totalSteps = _a.totalSteps;
-    var theme = (0, react_1.useTheme)();
+    var theme = (0, react_2.useTheme)();
     var displayProgress = totalSteps
-        ? Math.min(100, progress + Math.round(100 / totalSteps))
+        ? Math.min(99, progress + Math.round(100 / totalSteps))
         : progress;
+    // Widens the bar only. The remaining range is compressed by the same amount
+    // so later steps don't add the head start again, and 99% stays under full.
+    var drawnProgress = totalSteps
+        ? HEAD_START + (displayProgress * (100 - HEAD_START)) / 100
+        : displayProgress;
+    // Keep this fixed for the mount so returning to question one doesn't replay it.
+    var animateEntry = (0, react_1.useState)(function () { return progress === 0 && Boolean(totalSteps); })[0];
     var useLightText = (0, ProgressBarHelpers_1.shouldUseLightText)({
         progressBarFilledColor: theme.mvf.palette.component.progressBarFilledColor,
         progressBarUnfilledColor: theme.mvf.palette.component.progressBarUnfilledColor,
-        progress: displayProgress,
+        progress: drawnProgress,
     });
-    var styles = (0, makeProgressBarStyling_1.default)(theme, useLightText, Boolean(totalSteps));
-    return ((0, jsx_runtime_1.jsxs)(Box_1.default, __assign({ css: styles.container, "data-testid": testId }, { children: [(0, jsx_runtime_1.jsxs)(Typography_1.default, __assign({ css: styles.text }, { children: [text, " ", displayProgress, "%"] })), (0, jsx_runtime_1.jsx)(LinearProgress_1.default, { variant: "determinate", css: styles.progressBar, id: id, value: displayProgress })] })));
+    var styles = (0, makeProgressBarStyling_1.default)(theme, useLightText, animateEntry);
+    return ((0, jsx_runtime_1.jsxs)(Box_1.default, __assign({ css: styles.container, "data-testid": testId }, { children: [(0, jsx_runtime_1.jsxs)(Typography_1.default, __assign({ css: styles.text }, { children: [text, " ", displayProgress, "%"] })), (0, jsx_runtime_1.jsx)(LinearProgress_1.default, { variant: "determinate", css: styles.progressBar, id: id, value: drawnProgress, "aria-valuenow": displayProgress })] })));
 };
 ProgressBar.defaultProps = defaultProps_1.default;
 exports.default = ProgressBar;

package/Experiments/CRO-712/Atoms/ProgressBar/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../../../src/Experiments/CRO-712/Atoms/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,sCAAsC;AACtC,0DAAoC;AACpC,gFAA0D;AAC1D,wEAAkD;AAElD,gEAA0C;AAE1C,wCAA0C;AAC1C,2DAA0D;AAE1D,oFAA8D;AAQ9D,IAAM,WAAW,GAAoB,UAAC,EAMrC;QALC,EAAE,QAAA,EACF,QAAQ,cAAA,EACR,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,UAAU,gBAAA;IAEV,IAAM,KAAK,GAAW,IAAA,gBAAQ,GAAE,CAAC;IAEjC,IAAM,eAAe,GAAG,UAAU;QAChC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,UAAU,CAAC,CAAC;QACxD,CAAC,CAAC,QAAQ,CAAC;IAEb,IAAM,YAAY,GAAG,IAAA,uCAAkB,EAAC;QACtC,sBAAsB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,SAAS,CAAC,sBAAsB;QAC1E,wBAAwB,EACtB,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,SAAS,CAAC,wBAAwB;QACtD,QAAQ,EAAE,eAAe;KAC1B,CAAC,CAAC;IAEH,IAAM,MAAM,GAAG,IAAA,gCAAsB,EACnC,KAAK,EACL,YAAY,EACZ,OAAO,CAAC,UAAU,CAAC,CACpB,CAAC;IACF,OAAO,CACL,wBAAC,aAAG,aAAC,GAAG,EAAE,MAAM,CAAC,SAAS,iBAAe,MAAM,iBAC7C,wBAAC,oBAAU,aAAC,GAAG,EAAE,MAAM,CAAC,IAAI,iBACzB,IAAI,OAAG,eAAe,UACZ,EACb,uBAAC,wBAAc,IACb,OAAO,EAAC,aAAa,EACrB,GAAG,EAAE,MAAM,CAAC,WAAW,EACvB,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,eAAe,GACtB,KACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,WAAW,CAAC,YAAY,GAAG,sBAAY,CAAC;AAExC,kBAAe,WAAW,CAAC"}
+{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../../../src/Experiments/CRO-712/Atoms/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,sCAAsC;AACtC,+BAAiC;AACjC,0DAAoC;AACpC,gFAA0D;AAC1D,wEAAkD;AAElD,gEAA0C;AAE1C,wCAA0C;AAC1C,2DAA0D;AAE1D,oFAA8D;AAQ9D,IAAM,UAAU,GAAG,CAAC,CAAC;AAErB,IAAM,WAAW,GAAoB,UAAC,EAMrC;QALC,EAAE,QAAA,EACF,QAAQ,cAAA,EACR,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,UAAU,gBAAA;IAEV,IAAM,KAAK,GAAW,IAAA,gBAAQ,GAAE,CAAC;IAEjC,IAAM,eAAe,GAAG,UAAU;QAChC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,UAAU,CAAC,CAAC;QACvD,CAAC,CAAC,QAAQ,CAAC;IAEb,4EAA4E;IAC5E,2EAA2E;IAC3E,IAAM,aAAa,GAAG,UAAU;QAC9B,CAAC,CAAC,UAAU,GAAG,CAAC,eAAe,GAAG,CAAC,GAAG,GAAG,UAAU,CAAC,CAAC,GAAG,GAAG;QAC3D,CAAC,CAAC,eAAe,CAAC;IAEpB,gFAAgF;IACzE,IAAA,YAAY,GAAI,IAAA,gBAAQ,EAAC,cAAM,OAAA,QAAQ,KAAK,CAAC,IAAI,OAAO,CAAC,UAAU,CAAC,EAArC,CAAqC,CAAC,GAAzD,CAA0D;IAE7E,IAAM,YAAY,GAAG,IAAA,uCAAkB,EAAC;QACtC,sBAAsB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,SAAS,CAAC,sBAAsB;QAC1E,wBAAwB,EACtB,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,SAAS,CAAC,wBAAwB;QACtD,QAAQ,EAAE,aAAa;KACxB,CAAC,CAAC;IAEH,IAAM,MAAM,GAAG,IAAA,gCAAsB,EAAC,KAAK,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC;IACzE,OAAO,CACL,wBAAC,aAAG,aAAC,GAAG,EAAE,MAAM,CAAC,SAAS,iBAAe,MAAM,iBAC7C,wBAAC,oBAAU,aAAC,GAAG,EAAE,MAAM,CAAC,IAAI,iBACzB,IAAI,OAAG,eAAe,UACZ,EACb,uBAAC,wBAAc,IACb,OAAO,EAAC,aAAa,EACrB,GAAG,EAAE,MAAM,CAAC,WAAW,EACvB,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,aAAa,mBAGL,eAAe,GAC9B,KACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,WAAW,CAAC,YAAY,GAAG,sBAAY,CAAC;AAExC,kBAAe,WAAW,CAAC"}

package/Experiments/CRO-712/Atoms/ProgressBar/ProgressBar.test.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -7,7 +30,23 @@ var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 /** @jsxImportSource @emotion/react */
 var renderWithProviders_1 = __importDefault(require("../../../../Helpers/React/renderWithProviders"));
 var ProgressBar_1 = __importDefault(require("./ProgressBar"));
+var progressBarStyling = __importStar(require("./makeProgressBarStyling"));
 describe('<ProgressBar /> (CRO-712 head-start)', function () {
+    it.each([
+        { progress: 0, totalSteps: 10, animateEntry: true },
+        { progress: 50, totalSteps: 10, animateEntry: false },
+        { progress: 0, totalSteps: undefined, animateEntry: false },
+    ])('sets entry animation to $animateEntry when mounted with progress=$progress and totalSteps=$totalSteps', function (_a) {
+        var progress = _a.progress, totalSteps = _a.totalSteps, animateEntry = _a.animateEntry;
+        var stylingSpy = jest.spyOn(progressBarStyling, 'default');
+        try {
+            (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(ProgressBar_1.default, { progress: progress, totalSteps: totalSteps, experimentName: "CRO-712" }));
+            expect(stylingSpy).toHaveBeenLastCalledWith(expect.anything(), expect.any(Boolean), animateEntry);
+        }
+        finally {
+            stylingSpy.mockRestore();
+        }
+    });
     it('should display progress bar', function () {
         var getByTestId = (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(ProgressBar_1.default, { id: "test-id", testId: "test-id", progress: 50, experimentName: "CRO-712" })).getByTestId;
         expect(getByTestId('test-id')).toBeTruthy();
@@ -16,13 +55,33 @@ describe('<ProgressBar /> (CRO-712 head-start)', function () {
         var getByText = (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(ProgressBar_1.default, { id: "test-id", progress: 0, totalSteps: 9, text: "Progress:", experimentName: "CRO-712" })).getByText;
         expect(getByText(/11%/)).toBeTruthy();
     });
-    it('clamps the shifted progress at 100%', function () {
+    it('clamps the shifted progress at 99% to avoid premature closure', function () {
         var getByText = (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(ProgressBar_1.default, { id: "test-id", progress: 95, totalSteps: 9, text: "Progress:", experimentName: "CRO-712" })).getByText;
-        expect(getByText(/100%/)).toBeTruthy();
+        expect(getByText(/99%/)).toBeTruthy();
     });
     it('falls back to the plain progress value when totalSteps is not provided', function () {
         var getByText = (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(ProgressBar_1.default, { id: "test-id", progress: 50, text: "Progress:", experimentName: "CRO-712" })).getByText;
         expect(getByText(/50%/)).toBeTruthy();
     });
+    it('reports the computed percentage to assistive technology during entry', function () {
+        var getByRole = (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(ProgressBar_1.default, { progress: 0, totalSteps: 10, experimentName: "CRO-712" })).getByRole;
+        expect(getByRole('progressbar')).toHaveAttribute('aria-valuenow', '10');
+    });
+    it('starts at the current percentage when mounted on a later question', function () {
+        var getByRole = (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(ProgressBar_1.default, { progress: 50, totalSteps: 10, experimentName: "CRO-712" })).getByRole;
+        expect(getByRole('progressbar')).toHaveAttribute('aria-valuenow', '60');
+    });
+    // Pins the aria-valuenow override: MUI derives its own from `value`, and ours
+    // only wins because caller props are spread after it.
+    it('draws the head start without reporting it to assistive technology', function () {
+        var _a = (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(ProgressBar_1.default, { progress: 0, totalSteps: 10, experimentName: "CRO-712" })), getByRole = _a.getByRole, container = _a.container;
+        expect(getByRole('progressbar')).toHaveAttribute('aria-valuenow', '10');
+        expect(container.querySelector('.MuiLinearProgress-bar1Determinate')).toHaveStyle('transform: translateX(-84.6%)');
+    });
+    it('draws the plain progress value when totalSteps is not provided', function () {
+        var _a = (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(ProgressBar_1.default, { progress: 50, experimentName: "CRO-712" })), getByRole = _a.getByRole, container = _a.container;
+        expect(getByRole('progressbar')).toHaveAttribute('aria-valuenow', '50');
+        expect(container.querySelector('.MuiLinearProgress-bar1Determinate')).toHaveStyle('transform: translateX(-50%)');
+    });
 });
 //# sourceMappingURL=ProgressBar.test.js.map

package/Experiments/CRO-712/Atoms/ProgressBar/ProgressBar.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.test.js","sourceRoot":"","sources":["../../../../../src/Experiments/CRO-712/Atoms/ProgressBar/ProgressBar.test.tsx"],"names":[],"mappings":";;;;;;AAAA,sCAAsC;AACtC,sGAAgF;AAChF,8DAAwC;AAExC,QAAQ,CAAC,sCAAsC,EAAE;IAC/C,EAAE,CAAC,6BAA6B,EAAE;QACxB,IAAA,WAAW,GAAK,IAAA,6BAAmB,EACzC,uBAAC,qBAAW,IACV,EAAE,EAAC,SAAS,EACZ,MAAM,EAAC,SAAS,EAChB,QAAQ,EAAE,EAAE,EACZ,cAAc,EAAC,SAAS,GACxB,CACH,YAPkB,CAOjB;QACF,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC;IAC9C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4DAA4D,EAAE;QACvD,IAAA,SAAS,GAAK,IAAA,6BAAmB,EACvC,uBAAC,qBAAW,IACV,EAAE,EAAC,SAAS,EACZ,QAAQ,EAAE,CAAC,EACX,UAAU,EAAE,CAAC,EACb,IAAI,EAAC,WAAW,EAChB,cAAc,EAAC,SAAS,GACxB,CACH,UARgB,CAQf;QACF,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC;IACxC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qCAAqC,EAAE;QAChC,IAAA,SAAS,GAAK,IAAA,6BAAmB,EACvC,uBAAC,qBAAW,IACV,EAAE,EAAC,SAAS,EACZ,QAAQ,EAAE,EAAE,EACZ,UAAU,EAAE,CAAC,EACb,IAAI,EAAC,WAAW,EAChB,cAAc,EAAC,SAAS,GACxB,CACH,UARgB,CAQf;QACF,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC;IACzC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wEAAwE,EAAE;QACnE,IAAA,SAAS,GAAK,IAAA,6BAAmB,EACvC,uBAAC,qBAAW,IACV,EAAE,EAAC,SAAS,EACZ,QAAQ,EAAE,EAAE,EACZ,IAAI,EAAC,WAAW,EAChB,cAAc,EAAC,SAAS,GACxB,CACH,UAPgB,CAOf;QACF,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC;IACxC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"ProgressBar.test.js","sourceRoot":"","sources":["../../../../../src/Experiments/CRO-712/Atoms/ProgressBar/ProgressBar.test.tsx"],"names":[],"mappings":"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"}

package/Experiments/CRO-712/Atoms/ProgressBar/ProgressBarStory.js

@@ -25,8 +25,7 @@ var ProgressBar_1 = __importDefault(require("./ProgressBar"));
 var ProgressBarStory = function (_a) {
     var text = _a.text, progress = _a.progress, onProgressChange = _a.onProgressChange;
     var _b = react_1.default.useState(10), totalSteps = _b[0], setTotalSteps = _b[1];
-    var _c = react_1.default.useState(10), step = _c[0], setStep = _c[1];
-    var clampedStep = Math.min(step, totalSteps);
+    var step = Math.min(Math.round((progress * totalSteps) / 100) + 1, totalSteps);
     var applyStep = function (nextStep, nextTotalSteps) {
         var clamped = Math.min(nextStep, nextTotalSteps);
         onProgressChange(Math.round(((clamped - 1) * 100) / nextTotalSteps));
@@ -35,9 +34,8 @@ var ProgressBarStory = function (_a) {
                             var next = Number(event.target.value);
                             setTotalSteps(next);
                             applyStep(step, next);
-                        }, style: { width: '100%' } })] })), (0, jsx_runtime_1.jsxs)("label", __assign({ style: { display: 'block', marginBottom: 16 } }, { children: ["step: ", clampedStep, " / ", totalSteps, (0, jsx_runtime_1.jsx)("input", { type: "range", min: 1, max: totalSteps, value: clampedStep, onChange: function (event) {
+                        }, style: { width: '100%' } })] })), (0, jsx_runtime_1.jsxs)("label", __assign({ style: { display: 'block', marginBottom: 16 } }, { children: ["step: ", step, " / ", totalSteps, (0, jsx_runtime_1.jsx)("input", { type: "range", min: 1, max: totalSteps, value: step, onChange: function (event) {
                             var next = Number(event.target.value);
-                            setStep(next);
                             applyStep(next, totalSteps);
                         }, style: { width: '100%' } })] })), (0, jsx_runtime_1.jsx)("div", __assign({ style: { position: 'relative' } }, { children: (0, jsx_runtime_1.jsx)(ProgressBar_1.default, { id: "id", progress: progress, text: text, totalSteps: totalSteps, experimentName: "CRO-712" }) }))] })));
 };

package/Experiments/CRO-712/Atoms/ProgressBar/ProgressBarStory.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBarStory.js","sourceRoot":"","sources":["../../../../../src/Experiments/CRO-712/Atoms/ProgressBar/ProgressBarStory.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAC1B,8DAAwC;AAQxC,sEAAsE;AACtE,2EAA2E;AAC3E,yEAAyE;AACzE,0EAA0E;AAC1E,yCAAyC;AACzC,IAAM,gBAAgB,GAAyB,UAAC,EAI/C;QAHC,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,gBAAgB,sBAAA;IAEV,IAAA,KAA8B,eAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,EAA/C,UAAU,QAAA,EAAE,aAAa,QAAsB,CAAC;IACjD,IAAA,KAAkB,eAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAnC,IAAI,QAAA,EAAE,OAAO,QAAsB,CAAC;IAC3C,IAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;IAE/C,IAAM,SAAS,GAAG,UAAC,QAAgB,EAAE,cAAsB;QACzD,IAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QACnD,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC;IACvE,CAAC,CAAC;IAEF,OAAO,CACL,0CAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,iBAC/B,4CAAO,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,EAAE,iCACrC,UAAU,EACvB,kCACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,EAAE,EACP,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,UAAC,KAAK;4BACd,IAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;4BACxC,aAAa,CAAC,IAAI,CAAC,CAAC;4BACpB,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;wBACxB,CAAC,EACD,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GACxB,KACI,EACR,4CAAO,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,EAAE,2BAC3C,WAAW,SAAK,UAAU,EACjC,kCACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,UAAU,EACf,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,UAAC,KAAK;4BACd,IAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;4BACxC,OAAO,CAAC,IAAI,CAAC,CAAC;4BACd,SAAS,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;wBAC9B,CAAC,EACD,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GACxB,KACI,EACR,yCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,gBAClC,uBAAC,qBAAW,IACV,EAAE,EAAC,IAAI,EACP,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,cAAc,EAAC,SAAS,GACxB,IACE,KACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,gBAAgB,CAAC"}
+{"version":3,"file":"ProgressBarStory.js","sourceRoot":"","sources":["../../../../../src/Experiments/CRO-712/Atoms/ProgressBar/ProgressBarStory.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAC1B,8DAAwC;AAQxC,sEAAsE;AACtE,2EAA2E;AAC3E,yEAAyE;AACzE,0EAA0E;AAC1E,yCAAyC;AACzC,IAAM,gBAAgB,GAAyB,UAAC,EAI/C;QAHC,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,gBAAgB,sBAAA;IAEV,IAAA,KAA8B,eAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,EAA/C,UAAU,QAAA,EAAE,aAAa,QAAsB,CAAC;IACvD,IAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CACnB,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,GAAG,UAAU,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,EAC7C,UAAU,CACX,CAAC;IAEF,IAAM,SAAS,GAAG,UAAC,QAAgB,EAAE,cAAsB;QACzD,IAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QACnD,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC;IACvE,CAAC,CAAC;IAEF,OAAO,CACL,0CAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,iBAC/B,4CAAO,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,EAAE,iCACrC,UAAU,EACvB,kCACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,EAAE,EACP,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,UAAC,KAAK;4BACd,IAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;4BACxC,aAAa,CAAC,IAAI,CAAC,CAAC;4BACpB,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;wBACxB,CAAC,EACD,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GACxB,KACI,EACR,4CAAO,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,EAAE,2BAC3C,IAAI,SAAK,UAAU,EAC1B,kCACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,UAAU,EACf,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,UAAC,KAAK;4BACd,IAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;4BACxC,SAAS,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;wBAC9B,CAAC,EACD,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GACxB,KACI,EACR,yCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,gBAClC,uBAAC,qBAAW,IACV,EAAE,EAAC,IAAI,EACP,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,cAAc,EAAC,SAAS,GACxB,IACE,KACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,gBAAgB,CAAC"}

package/Experiments/CRO-712/Atoms/ProgressBar/makeProgressBarStyling.d.ts

@@ -1,5 +1,5 @@
 import { ITheme } from '../../../../Themes/themes';
-declare const makeProgressBarStyling: (theme: ITheme, useLightText: boolean, hasHeadStart: boolean) => {
+declare const makeProgressBarStyling: (theme: ITheme, useLightText: boolean, animateEntry?: boolean) => {
     container: import("@emotion/react").SerializedStyles;
     progressBar: import("@emotion/react").SerializedStyles;
     text: import("@emotion/react").SerializedStyles;