@comicrelief/component-library 7.24.1 → 7.25.0

package/dist/theme/shared/breakpoint.js

@@ -4,15 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.sizes = exports.default = void 0;
-var sizes = exports.sizes = {
+const sizes = exports.sizes = {
   small: 740,
   medium: 1024,
   nav: 1150,
   large: 1440
 };
-var _default = exports.default = function _default(size) {
+var _default = size => {
   if (size) {
     return "(min-width: ".concat(sizes[size], "px)");
   }
   return 'inherit';
-};
+};
+exports.default = _default;

package/dist/theme/shared/fontFamilies.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var fonts = {
+const fonts = {
   Montserrat: {
     font: 'Montserrat',
     fallback: 'Helvetica, Arial'
@@ -26,10 +26,11 @@ var fonts = {
     fallback: 'helvetica, arial, sans-serif'
   }
 };
-var _default = exports.default = function _default(family) {
-  var style = 'inherit';
+var _default = family => {
+  let style = 'inherit';
   if (family) {
     style = "'".concat(fonts[family].font, "', ").concat(fonts[family].fallback, ", sans-serif");
   }
   return style;
-};
+};
+exports.default = _default;

package/dist/theme/shared/hideVisually.js

@@ -5,5 +5,5 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _styledComponents = require("styled-components");
-var hideVisually = (0, _styledComponents.css)(["border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;"]);
+const hideVisually = (0, _styledComponents.css)(["border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;"]);
 var _default = exports.default = hideVisually;

package/dist/theme/shared/size.js

@@ -4,18 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.screen = exports.media = exports.container = void 0;
-var screen = exports.screen = {
+const screen = exports.screen = {
   small: '740px',
   medium: '1024px',
   large: '1440px'
 };
-var media = exports.media = function media(size) {
+const media = size => {
   if (size) {
     return "@media (min-width: ".concat(screen[size], ")");
   }
   return 'inherit';
 };
-var container = exports.container = {
+exports.media = media;
+const container = exports.container = {
   small: '880px',
   medium: '1200px',
   large: '1440px'

package/dist/theme/shared/spacing.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var spacingSizes = {
+const spacingSizes = {
   none: '0',
   xsm: '0.25rem',
   sm: '0.5rem',
@@ -16,7 +16,7 @@ var spacingSizes = {
   xxl: '8rem',
   xxxl: '16rem'
 };
-var spacing = function spacing(size) {
+const spacing = size => {
   if (size) {
     return spacingSizes[size];
   }

package/dist/theme/shared/zIndex.js

@@ -5,15 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _styledComponents = require("styled-components");
-var indexes = {
+const indexes = {
   base: 0,
   low: 1,
   medium: 2,
   high: 3,
   higher: 4
 };
-var zIndex = function zIndex(index) {
-  var value = indexes.base;
+const zIndex = index => {
+  let value = indexes.base;
   if (index) {
     value = indexes[index];
   }

package/dist/theme/srTheme/buttonColors.js

@@ -1,13 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _styledComponents = require("styled-components");
 var _colors = _interopRequireDefault(require("./colors"));
-var buttonColors = {
+const buttonColors = {
   black: {
     background: (0, _colors.default)('black'),
     color: (0, _colors.default)('white'),
@@ -195,10 +195,11 @@ var buttonColors = {
     hoverColor: (0, _colors.default)('white')
   }
 };
-var _default = exports.default = function _default(colorName) {
-  var style = 'inherit';
+var _default = colorName => {
+  let style = 'inherit';
   if (colorName) {
     style = (0, _styledComponents.css)(["background-color:", ";color:", ";:hover{background-color:", ";color:", ";}"], buttonColors[colorName].background, buttonColors[colorName].color, buttonColors[colorName].hoverBackground, buttonColors[colorName].hoverColor);
   }
   return style;
-};
+};
+exports.default = _default;

package/dist/theme/srTheme/colors.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var colors = {
+const colors = {
   black: '#030e1a',
   black_dark: '#030e1a',
   blue: '#223c59',
@@ -48,9 +48,10 @@ var colors = {
   yellow_dark: '#665700',
   yellow_light: '#FEFD5A'
 };
-var _default = exports.default = function _default(colorName) {
+var _default = colorName => {
   if (colorName) {
     return colors[colorName];
   }
   return 'inherit';
-};
+};
+exports.default = _default;

package/dist/theme/srTheme/fontSizes.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var fontSizes = {
+const fontSizes = {
   xxs: '0.69375rem',
   xs: '0.83125rem',
   s: '1rem',
@@ -14,9 +14,10 @@ var fontSizes = {
   xxl: '4.125rem',
   super: '7.3125rem'
 };
-var _default = exports.default = function _default(size) {
+var _default = size => {
   if (size) {
     return fontSizes[size];
   }
   return '';
-};
+};
+exports.default = _default;

package/dist/theme/srTheme/linkStyles.js

@@ -1,13 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _styledComponents = require("styled-components");
 var _colors = _interopRequireDefault(require("./colors"));
-var linkStyles = {
+const linkStyles = {
   standard: {
     color: (0, _colors.default)('black'),
     border: "1px solid ".concat((0, _colors.default)('black')),
@@ -25,10 +25,11 @@ var linkStyles = {
     hoverBorder: '1px solid trasparent'
   }
 };
-var _default = exports.default = function _default(styleName, underline) {
-  var style = (0, _styledComponents.css)(["padding-bottom:0.06em;color:", ";border-bottom:solid 1px;border-bottom-color:inherit;font-weight:700;:hover{color:inherit;font-weight:700;}"], (0, _colors.default)('black'));
+var _default = (styleName, underline) => {
+  let style = (0, _styledComponents.css)(["padding-bottom:0.06em;color:", ";border-bottom:solid 1px;border-bottom-color:inherit;font-weight:700;:hover{color:inherit;font-weight:700;}"], (0, _colors.default)('black'));
   if (styleName) {
     style = (0, _styledComponents.css)(["padding:", ";color:", ";border-bottom:", ";font-weight:", ";:hover{color:", ";border-bottom:", ";font-weight:", ";}"], linkStyles[styleName].padding, linkStyles[styleName].color, underline && linkStyles[styleName].border, linkStyles[styleName].weight, linkStyles[styleName].hoverColor, underline && linkStyles[styleName].hoverBorder, linkStyles[styleName].hoverWeight);
   }
   return style;
-};
+};
+exports.default = _default;

package/dist/theme/srTheme/theme.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });

package/dist/utils/Membership.js

@@ -5,47 +5,50 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.onKeyPress = exports.isInputMatchBoxValue = exports.isAmountValid = exports.handleDonateSubmission = exports.amountFormatter = void 0;
 // this function prevent keyboard characters like  e, + , - to be passed on the input
-var onKeyPress = exports.onKeyPress = function onKeyPress(event) {
-  var keyCode = event.keyCode || event.which;
-  var keyValue = String.fromCharCode(keyCode);
+const onKeyPress = event => {
+  const keyCode = event.keyCode || event.which;
+  const keyValue = String.fromCharCode(keyCode);
   if (/\+|-|e/.test(keyValue)) event.preventDefault();
 };
-var amountFormatter = exports.amountFormatter = function amountFormatter(amount) {
+exports.onKeyPress = onKeyPress;
+const amountFormatter = amount => {
   if (!amount) return ' ';
   // Determine how many places to fix the number to before passing
-  var decPoint = !Number.isInteger(amount) ? 2 : 0;
+  const decPoint = !Number.isInteger(amount) ? 2 : 0;
   return parseFloat(amount).toFixed(decPoint);
 };
-var isAmountValid = exports.isAmountValid = function isAmountValid(input) {
-  var reg = /^\s*(?=.*[1-9])\d*(?:\.\d{1,2})?\s*$/g;
-  var isValid = input * 1 >= 1 && input * 1 <= 25000 && reg.test(input);
+exports.amountFormatter = amountFormatter;
+const isAmountValid = input => {
+  const reg = /^\s*(?=.*[1-9])\d*(?:\.\d{1,2})?\s*$/g;
+  const isValid = input * 1 >= 1 && input * 1 <= 25000 && reg.test(input);
   return isValid;
 };
-var getUrlParameter = function getUrlParameter(name) {
-  var text = name.replace(/\[]/, '\\[').replace(/[\]]/, '\\]');
-  var regex = new RegExp("[\\?&]".concat(text, "=([^&#]*)"));
-  var results = regex.exec(window.location.search);
-  var param = results === null ? 'generic' : decodeURIComponent(results[1].replace(/\+/g, ' '));
+exports.isAmountValid = isAmountValid;
+const getUrlParameter = name => {
+  const text = name.replace(/\[]/, '\\[').replace(/[\]]/, '\\]');
+  const regex = new RegExp("[\\?&]".concat(text, "=([^&#]*)"));
+  const results = regex.exec(window.location.search);
+  const param = results === null ? 'generic' : decodeURIComponent(results[1].replace(/\+/g, ' '));
   return param;
 };
-var isInputMatchBoxValue = exports.isInputMatchBoxValue = function isInputMatchBoxValue(moneyBoxes, selectMoneyBuy, setAmountDonate, input) {
-  var inputToNum = input * 1;
-  return Object.keys(moneyBoxes).map(function (box) {
-    return moneyBoxes[box].value === inputToNum && (selectMoneyBuy(moneyBoxes[box].description, moneyBoxes[box].value), setAmountDonate(input));
-  });
+const isInputMatchBoxValue = (moneyBoxes, selectMoneyBuy, setAmountDonate, input) => {
+  const inputToNum = input * 1;
+  return Object.keys(moneyBoxes).map(box => moneyBoxes[box].value === inputToNum && (selectMoneyBuy(moneyBoxes[box].description, moneyBoxes[box].value), setAmountDonate(input)));
 };
 
 // This function is still in progress
-var handleDonateSubmission = exports.handleDonateSubmission = function handleDonateSubmission(amount, clientID, cartID, mbshipID, donateLink) {
-  var givingType = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 'monthly';
-  var popUpShown = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
-  var currentpageUrl = window.location.href;
-  var affiliateValue = getUrlParameter(currentpageUrl);
-  var reg = /[#?|[\]\\]/g;
+exports.isInputMatchBoxValue = isInputMatchBoxValue;
+const handleDonateSubmission = function (amount, clientID, cartID, mbshipID, donateLink) {
+  let givingType = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 'monthly';
+  let popUpShown = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
+  let currentpageUrl = window.location.href;
+  const affiliateValue = getUrlParameter(currentpageUrl);
+  const reg = /[#?|[\]\\]/g;
   if (currentpageUrl.match(reg) !== null) {
-    var thisMatch = currentpageUrl.match(reg)[0];
+    const thisMatch = currentpageUrl.match(reg)[0];
     currentpageUrl = currentpageUrl.substring(0, currentpageUrl.indexOf(thisMatch));
   }
-  var givingTypeUrl = givingType === 'single' ? 'single' : 'monthly';
+  const givingTypeUrl = givingType === 'single' ? 'single' : 'monthly';
   window.location.href = "".concat(donateLink, "?clientOverride=").concat(clientID, "&amount=").concat(amount, "&currency=GBP&givingType=").concat(givingTypeUrl, "&cartId=").concat(cartID, "&affiliate=").concat(affiliateValue, "&siteurl=").concat(currentpageUrl, "&rowID=").concat(mbshipID, "&popUpShown=").concat(popUpShown);
-};
+};
+exports.handleDonateSubmission = handleDonateSubmission;

package/dist/utils/ShareButton/sharePopUpHelper.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /* Handles issues related to screen/browser positions on dual-screen setups-  http://www.xtf.dk/ */
-var popUpCentre = function popUpCentre(url, popUpWidth, popUpHeight) {
-  var dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : window.screen.left;
-  var dualScreenTop = window.screenTop !== undefined ? window.screenTop : window.screen.top;
-  var browserWidth;
-  var browserHeight;
+const popUpCentre = (url, popUpWidth, popUpHeight) => {
+  const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : window.screen.left;
+  const dualScreenTop = window.screenTop !== undefined ? window.screenTop : window.screen.top;
+  let browserWidth;
+  let browserHeight;
   if (window.innerWidth) {
     browserWidth = window.innerWidth;
   } else if (document.documentElement.clientWidth) {
@@ -24,9 +24,9 @@ var popUpCentre = function popUpCentre(url, popUpWidth, popUpHeight) {
   } else {
     browserHeight = window.screen.height;
   }
-  var popUpLeft = browserWidth / 2 - popUpWidth / 2 + dualScreenLeft;
-  var popUpTop = browserHeight / 2 - popUpHeight / 2 + dualScreenTop;
-  var newWindow = window.open(url, '', "width=".concat(popUpWidth, ", height=").concat(popUpHeight, ", top=").concat(popUpTop, ", left=").concat(popUpLeft));
+  const popUpLeft = browserWidth / 2 - popUpWidth / 2 + dualScreenLeft;
+  const popUpTop = browserHeight / 2 - popUpHeight / 2 + dualScreenTop;
+  const newWindow = window.open(url, '', "width=".concat(popUpWidth, ", height=").concat(popUpHeight, ", top=").concat(popUpTop, ", left=").concat(popUpLeft));
 
   // Shift browser focus to newWindow
   if (window.focus) {

package/dist/utils/ShareButton/shareTracking.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var shareTracking = function shareTracking(channel) {
+const shareTracking = channel => {
   if (!window.dataLayer) {
     window.dataLayer = [];
   }

package/dist/utils/ShareButton/shareUrlHelper.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /* Determine where to grab the URL, depending on the component type and values supplied */
-var shareUrlHelper = function shareUrlHelper(urlToShare, typeOfShare) {
+const shareUrlHelper = (urlToShare, typeOfShare) => {
   // Encode the URL so we can happily pass it as a parameter, fragments and all
-  var urlToShareEncoded = encodeURIComponent(urlToShare);
+  const urlToShareEncoded = encodeURIComponent(urlToShare);
 
   // Construct all share urls
-  var shareURLs = {
+  const shareURLs = {
     Twitter: "http://www.twitter.com/intent/tweet?url=".concat(urlToShareEncoded),
     Facebook: "https://www.facebook.com/sharer/sharer.php?u=".concat(urlToShareEncoded)
   };

package/dist/utils/allowListed.js

@@ -4,11 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var allowList = ['https://giftaid.comicrelief.com', 'https://donation.comicrelief.com', 'https://www.comicrelief.com', 'https://www.sportrelief.com', 'https://app.beapplied.com/org/comic-relief', 'stories.comicrelief.com', 'https://form.typeform.com'];
-var allowListed = function allowListed(url) {
-  if (url !== undefined && url !== null && allowList.some(function (v) {
-    return url.indexOf(v) >= 0;
-  })) {
+const allowList = ['https://giftaid.comicrelief.com', 'https://donation.comicrelief.com', 'https://www.comicrelief.com', 'https://www.sportrelief.com', 'https://app.beapplied.com/org/comic-relief', 'stories.comicrelief.com', 'https://form.typeform.com'];
+const allowListed = url => {
+  if (url !== undefined && url !== null && allowList.some(v => url.indexOf(v) >= 0)) {
     return true;
   }
   return false;

package/dist/utils/allowListed.test.js

@@ -1,10 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _allowListed = _interopRequireDefault(require("./allowListed"));
-it('link is allowListed', function () {
+it('link is allowListed', () => {
   expect((0, _allowListed.default)('https://www.comicrelief.com/home')).toBe(true);
 });
-it('link is not allowListed', function () {
+it('link is not allowListed', () => {
   expect((0, _allowListed.default)('https://www.google.co.uk/')).toBe(false);
 });

package/dist/utils/internalLinkHelper.js

@@ -1,13 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getDomain = exports.InternalLinkHelper = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-var domainRegEx = new RegExp('(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]');
-var InternalLinkHelper = exports.InternalLinkHelper = function InternalLinkHelper(link) {
+const domainRegEx = new RegExp('(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]');
+const InternalLinkHelper = link => {
   // Check our URL for a domain pattern, if so return it
   if (domainRegEx.test(link)) {
     return link;
@@ -16,18 +14,18 @@ var InternalLinkHelper = exports.InternalLinkHelper = function InternalLinkHelpe
   // If domain-free and internal, prefix it with slash if it doesn't already have one
   return link.substring(0, 1) === '/' ? link : "/".concat(link);
 };
-var getDomain = exports.getDomain = function getDomain(url) {
-  var thisURL = url;
+exports.InternalLinkHelper = InternalLinkHelper;
+const getDomain = url => {
+  let thisURL = url;
 
   // Strip out protocol
   thisURL = url.replace(/(https?:\/\/)?(www.)?/i, '');
 
   // Strip out subdirectory/path
   if (thisURL.indexOf('/') !== -1) {
-    var _thisURL$split = thisURL.split('/'),
-      _thisURL$split2 = (0, _slicedToArray2.default)(_thisURL$split, 1),
-      splitURL = _thisURL$split2[0];
+    const [splitURL] = thisURL.split('/');
     thisURL = splitURL;
   }
   return thisURL;
-};
+};
+exports.getDomain = getDomain;

package/dist/utils/navHelper.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /* Determine where to grab the URL, depending on the component type and values supplied */
-var NavHelper = function NavHelper(navItem) {
+const NavHelper = navItem => {
   /* Default url path location for 'Pages' */
-  var thisUrl = navItem.path;
+  let thisUrl = navItem.path;
   if (navItem.internal.type === 'ContentfulComponentLink') {
     thisUrl = navItem.reference && navItem.reference.path ? navItem.reference.path : navItem.url;
   }

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "7.24.1",
+  "version": "7.25.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {
     "verbose": true,
     "testPathIgnorePatterns": [
-      "<rootDir>/cypress/",
+      "<rootDir>/playwright/",
       "<rootDir>/dist/",
       "<rootDir>/node_modules/"
     ],
@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@babel/cli": "^7.21.5",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@hookform/resolvers": "^1.3.4",
     "axios": "^0.21.1",
     "ejs": "^3.1.9",
@@ -36,8 +37,8 @@
     "react-dom": "^17.0.2",
     "react-hook-form": "^6.3.0",
     "react-modal": "^3.16.1",
-    "react-responsive": "^9.0.2",
     "react-range-slider-input": "^3.0.7",
+    "react-responsive": "^9.0.2",
     "react-scripts": "4.0.3",
     "react-spinners": "^0.11.0",
     "react-styleguidist": "^11.1.7",
@@ -51,14 +52,15 @@
     "react-scripts/workbox-webpack-plugin/workbox-build/@surma/rollup-plugin-off-main-thread/ejs": "3.1.6"
   },
   "scripts": {
-    "test": "yarn run jest",
+    "test:unit": "yarn run jest",
     "styleguide": "cross-env FAST_REFRESH=false styleguidist server",
     "styleguide:build": "styleguidist build",
     "postinstall": "yarn run build",
     "build": "rm -rf dist && NODE_ENV=production babel src --out-dir dist --copy-files --ignore __tests__,spec.js,test.js",
-    "cy:run": "export NODE_ENV=development; cypress run --headless --browser chrome",
-    "cy:open": "export NODE_ENV=development; cypress open",
-    "feature-test": "run-p --race styleguide cy:run",
+    "test:e2e": "playwright test --project=chromium",
+    "test:e2e--h": "playwright test --project=chromium --headed",
+    "test:e2e:ci": "NODE_ENV=development; start-server-and-test styleguide http://localhost:6060 test:e2e",
+    "test:e2e:local": "export NODE_ENV=development; start-server-and-test styleguide http://localhost:6060 test:e2e",
     "lint": "eslint src",
     "lint-fix": "yarn lint --fix"
   },
@@ -75,8 +77,8 @@
     ]
   },
   "devDependencies": {
+    "@playwright/test": "^1.38.1",
     "cross-env": "^7.0.3",
-    "cypress": "13.2.0",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-plugin-import": "^2.27.5",
@@ -86,6 +88,7 @@
     "jest": "^26.1.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
-    "semantic-release": "^17.4.6"
+    "semantic-release": "^17.4.6",
+    "start-server-and-test": "^2.0.0"
   }
 }

package/playwright/components/atoms/checkbox.spec.js

@@ -0,0 +1,64 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('checkbox', () => {
+  test('checkbox component', async ({ page }) => {
+
+    await page.goto('/#checkbox');
+
+    // checkbox component should be visible
+    await expect(page.locator('[data-testid="Checkbox-example-1"]')).toBeVisible();
+    await expect(page.locator('[data-preview="Checkbox"]')).toBeVisible();
+
+    // ensure checkboxes are checked when clicked
+    // tennis option
+    await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(2)').click();
+    await expect(page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(2)')).toHaveValue('Tennis');
+    expect(await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(2)').isChecked()).toBeTruthy();
+
+    // basketball option
+    await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(3)').click();
+    await expect(page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(3)')).toHaveValue('Basketball');
+    expect(await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(3)').isChecked()).toBeTruthy();
+
+    // cycling option
+    await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(4)').click();
+    await expect(page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(4)')).toHaveValue('Cycling');
+    expect(await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(4)').isChecked()).toBeTruthy();
+
+    // football checkbox
+    await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(5)').click();
+    await expect(page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(5)')).toHaveValue('Football');
+    expect(await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(5)').isChecked()).toBeTruthy();
+
+    // terms and conditions
+    await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(8)').click();
+    expect(await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(8)').isChecked()).toBeTruthy();
+
+    // ensure checkboxes are unchecked when clicked again
+    // tennis option
+    await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(2)').click();
+    await expect(page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(2)')).toHaveValue('Tennis');
+    expect(await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(2)').isChecked()).toBeFalsy();
+
+    // basketball option
+    await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(3)').click();
+    await expect(page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(3)')).toHaveValue('Basketball');
+    expect(await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(3)').isChecked()).toBeFalsy();
+
+    // cycling option
+    await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(4)').click();
+    await expect(page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(4)')).toHaveValue('Cycling');
+    expect(await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(4)').isChecked()).toBeFalsy();
+
+    // football checkbox
+    await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(5)').click();
+    await expect(page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(5)')).toHaveValue('Football');
+    expect(await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(5)').isChecked()).toBeFalsy();
+
+    // terms and conditions
+    await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(8)').click();
+    expect(await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(8)').isChecked()).toBeFalsy();
+
+    await page.close();
+  });
+});