From 9164fc0e99786c6f160611fe16ca0374b1f4ed0f Mon Sep 17 00:00:00 2001 From: eyeaadil Date: Thu, 19 Dec 2024 20:07:58 +0530 Subject: [PATCH 1/8] Add toggle-button component Signed-off-by: eyeaadil --- gatsby-node.js | 5 + package-lock.json | 311 ++---------------- .../Sistent/components/button/code.js | 2 +- .../Projects/Sistent/components/content.js | 12 +- .../Sistent/components/toggle-button/code.js | 238 ++++++++++++++ .../components/toggle-button/guidance.js | 167 ++++++++++ .../Sistent/components/toggle-button/index.js | 265 +++++++++++++++ 7 files changed, 716 insertions(+), 284 deletions(-) create mode 100644 src/sections/Projects/Sistent/components/toggle-button/code.js create mode 100644 src/sections/Projects/Sistent/components/toggle-button/guidance.js create mode 100644 src/sections/Projects/Sistent/components/toggle-button/index.js diff --git a/gatsby-node.js b/gatsby-node.js index c38e2531ceed..bc2e1530de5c 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -728,6 +728,9 @@ exports.createPages = async ({ actions, graphql, reporter }) => { const components = componentsData.map((component) => component.src.replace("/", "")); + + console.log("Adilllllllllll",components); + const createComponentPages = (createPage, components) => { const pageTypes = [ { suffix: "", file: "index.js" }, @@ -739,6 +742,8 @@ exports.createPages = async ({ actions, graphql, reporter }) => { pageTypes.forEach(({ suffix, file }) => { const path = `/projects/sistent/components/${name}${suffix}`; const componentPath = `./src/sections/Projects/Sistent/components/${name}/${file}`; + + console.log(`Creating page for: ${path}`); // Add this log try { createPage({ path, diff --git a/package-lock.json b/package-lock.json index a5893119f34f..a14243e3a176 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2345,6 +2345,7 @@ "version": "2.1.4", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz", "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==", + "dev": true, "dependencies": { "ajv": "^6.12.4", "debug": "^4.3.2", @@ -2367,6 +2368,7 @@ "version": "6.12.6", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dev": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -2382,6 +2384,7 @@ "version": "13.24.0", "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz", "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==", + "dev": true, "dependencies": { "type-fest": "^0.20.2" }, @@ -2395,12 +2398,14 @@ "node_modules/@eslint/eslintrc/node_modules/json-schema-traverse": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", - "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==" + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true }, "node_modules/@eslint/js": { "version": "8.57.1", "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz", "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==", + "dev": true, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } @@ -2989,6 +2994,7 @@ "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz", "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==", "deprecated": "Use @eslint/config-array instead", + "dev": true, "dependencies": { "@humanwhocodes/object-schema": "^2.0.3", "debug": "^4.3.1", @@ -3002,6 +3008,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz", "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==", + "dev": true, "engines": { "node": ">=12.22" }, @@ -3014,7 +3021,8 @@ "version": "2.0.3", "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz", "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==", - "deprecated": "Use @eslint/object-schema instead" + "deprecated": "Use @eslint/object-schema instead", + "dev": true }, "node_modules/@img/sharp-darwin-arm64": { "version": "0.33.5", @@ -6174,136 +6182,6 @@ "resolved": "https://registry.npmjs.org/@types/yoga-layout/-/yoga-layout-1.9.2.tgz", "integrity": "sha512-S9q47ByT2pPvD65IvrWp7qppVMpk9WGMbVq9wbWZOHg6tnXSD4vyhao6nOSBwwfDdV2p3Kx9evA9vI+XWTfDvw==" }, - "node_modules/@typescript-eslint/eslint-plugin": { - "version": "4.33.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.33.0.tgz", - "integrity": "sha512-aINiAxGVdOl1eJyVjaWn/YcVAq4Gi/Yo35qHGCnqbWVz61g39D0h23veY/MA0rFFGfxK7TySg2uwDeNv+JgVpg==", - "peer": true, - "dependencies": { - "@typescript-eslint/experimental-utils": "4.33.0", - "@typescript-eslint/scope-manager": "4.33.0", - "debug": "^4.3.1", - "functional-red-black-tree": "^1.0.1", - "ignore": "^5.1.8", - "regexpp": "^3.1.0", - "semver": "^7.3.5", - "tsutils": "^3.21.0" - }, - "engines": { - "node": "^10.12.0 || >=12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" - }, - "peerDependencies": { - "@typescript-eslint/parser": "^4.0.0", - "eslint": "^5.0.0 || ^6.0.0 || ^7.0.0" - }, - "peerDependenciesMeta": { - "typescript": { - "optional": true - } - } - }, - "node_modules/@typescript-eslint/eslint-plugin/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", - "peer": true, - "bin": { - "semver": "bin/semver.js" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/@typescript-eslint/experimental-utils": { - "version": "4.33.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.33.0.tgz", - "integrity": "sha512-zeQjOoES5JFjTnAhI5QY7ZviczMzDptls15GFsI6jyUOq0kOf9+WonkhtlIhh0RgHRnqj5gdNxW5j1EvAyYg6Q==", - "peer": true, - "dependencies": { - "@types/json-schema": "^7.0.7", - "@typescript-eslint/scope-manager": "4.33.0", - "@typescript-eslint/types": "4.33.0", - "@typescript-eslint/typescript-estree": "4.33.0", - "eslint-scope": "^5.1.1", - "eslint-utils": "^3.0.0" - }, - "engines": { - "node": "^10.12.0 || >=12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" - }, - "peerDependencies": { - "eslint": "*" - } - }, - "node_modules/@typescript-eslint/experimental-utils/node_modules/eslint-utils": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz", - "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==", - "peer": true, - "dependencies": { - "eslint-visitor-keys": "^2.0.0" - }, - "engines": { - "node": "^10.0.0 || ^12.0.0 || >= 14.0.0" - }, - "funding": { - "url": "https://github.com/sponsors/mysticatea" - }, - "peerDependencies": { - "eslint": ">=5" - } - }, - "node_modules/@typescript-eslint/parser": { - "version": "4.33.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.33.0.tgz", - "integrity": "sha512-ZohdsbXadjGBSK0/r+d87X0SBmKzOq4/S5nzK6SBgJspFo9/CUDJ7hjayuze+JK7CZQLDMroqytp7pOcFKTxZA==", - "peer": true, - "dependencies": { - "@typescript-eslint/scope-manager": "4.33.0", - "@typescript-eslint/types": "4.33.0", - "@typescript-eslint/typescript-estree": "4.33.0", - "debug": "^4.3.1" - }, - "engines": { - "node": "^10.12.0 || >=12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" - }, - "peerDependencies": { - "eslint": "^5.0.0 || ^6.0.0 || ^7.0.0" - }, - "peerDependenciesMeta": { - "typescript": { - "optional": true - } - } - }, - "node_modules/@typescript-eslint/scope-manager": { - "version": "4.33.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.33.0.tgz", - "integrity": "sha512-5IfJHpgTsTZuONKbODctL4kKuQje/bzBRkwHE8UOZ4f89Zeddg+EGZs8PD8NcN4LdM3ygHWYB3ukPAYjvl/qbQ==", - "peer": true, - "dependencies": { - "@typescript-eslint/types": "4.33.0", - "@typescript-eslint/visitor-keys": "4.33.0" - }, - "engines": { - "node": "^8.10.0 || ^10.13.0 || >=11.10.1" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" - } - }, "node_modules/@typescript-eslint/type-utils": { "version": "5.62.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.62.0.tgz", @@ -6406,58 +6284,6 @@ "node": ">=10" } }, - "node_modules/@typescript-eslint/types": { - "version": "4.33.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.33.0.tgz", - "integrity": "sha512-zKp7CjQzLQImXEpLt2BUw1tvOMPfNoTAfb8l51evhYbOEEzdWyQNmHWWGPR6hwKJDAi+1VXSBmnhL9kyVTTOuQ==", - "peer": true, - "engines": { - "node": "^8.10.0 || ^10.13.0 || >=11.10.1" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" - } - }, - "node_modules/@typescript-eslint/typescript-estree": { - "version": "4.33.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.33.0.tgz", - "integrity": "sha512-rkWRY1MPFzjwnEVHsxGemDzqqddw2QbTJlICPD9p9I9LfsO8fdmfQPOX3uKfUaGRDFJbfrtm/sXhVXN4E+bzCA==", - "peer": true, - "dependencies": { - "@typescript-eslint/types": "4.33.0", - "@typescript-eslint/visitor-keys": "4.33.0", - "debug": "^4.3.1", - "globby": "^11.0.3", - "is-glob": "^4.0.1", - "semver": "^7.3.5", - "tsutils": "^3.21.0" - }, - "engines": { - "node": "^10.12.0 || >=12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" - }, - "peerDependenciesMeta": { - "typescript": { - "optional": true - } - } - }, - "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", - "peer": true, - "bin": { - "semver": "bin/semver.js" - }, - "engines": { - "node": ">=10" - } - }, "node_modules/@typescript-eslint/utils": { "version": "5.62.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.62.0.tgz", @@ -6575,27 +6401,11 @@ "node": ">=10" } }, - "node_modules/@typescript-eslint/visitor-keys": { - "version": "4.33.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.33.0.tgz", - "integrity": "sha512-uqi/2aSz9g2ftcHWf8uLPJA70rUv6yuMW5Bohw+bwcuzaxQIHaKFZCKGoGXIrc9vkTJ3+0txM73K0Hq3d5wgIg==", - "peer": true, - "dependencies": { - "@typescript-eslint/types": "4.33.0", - "eslint-visitor-keys": "^2.0.0" - }, - "engines": { - "node": "^8.10.0 || ^10.13.0 || >=11.10.1" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" - } - }, "node_modules/@ungap/structured-clone": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz", - "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==" + "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==", + "dev": true }, "node_modules/@vercel/webpack-asset-relocator-loader": { "version": "1.7.3", @@ -6785,25 +6595,6 @@ "resolved": "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz", "integrity": "sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==" }, - "node_modules/@xstate/react": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/@xstate/react/-/react-4.1.3.tgz", - "integrity": "sha512-zhE+ZfrcCR87bu71Rkh5Z5ruZBivR/7uD/dkelzJqjQdI45IZc9DqTI8lL4Cg5+VN2p5k86KxDsusqW1kW11Tg==", - "peer": true, - "dependencies": { - "use-isomorphic-layout-effect": "^1.1.2", - "use-sync-external-store": "^1.2.0" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "xstate": "^5.18.2" - }, - "peerDependenciesMeta": { - "xstate": { - "optional": true - } - } - }, "node_modules/@xtuc/ieee754": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", @@ -7451,36 +7242,6 @@ "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.7.tgz", "integrity": "sha512-OnAYlL5b7LEkALw87fUVafQw5rVR9RjwGd4KUwNQ6DrrNmaVaUCgLipfVlzrPQ4tWOR9P0IXGNOx50jYCCdSJg==" }, - "node_modules/babel-eslint": { - "version": "10.1.0", - "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz", - "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==", - "deprecated": "babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.", - "peer": true, - "dependencies": { - "@babel/code-frame": "^7.0.0", - "@babel/parser": "^7.7.0", - "@babel/traverse": "^7.7.0", - "@babel/types": "^7.7.0", - "eslint-visitor-keys": "^1.0.0", - "resolve": "^1.12.0" - }, - "engines": { - "node": ">=6" - }, - "peerDependencies": { - "eslint": ">= 4.12.1" - } - }, - "node_modules/babel-eslint/node_modules/eslint-visitor-keys": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz", - "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==", - "peer": true, - "engines": { - "node": ">=4" - } - }, "node_modules/babel-jsx-utils": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/babel-jsx-utils/-/babel-jsx-utils-1.1.0.tgz", @@ -11515,6 +11276,7 @@ "version": "8.57.1", "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz", "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==", + "dev": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", @@ -11960,6 +11722,7 @@ "version": "6.12.6", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dev": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -11975,6 +11738,7 @@ "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, "dependencies": { "color-convert": "^2.0.1" }, @@ -11989,6 +11753,7 @@ "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" @@ -12004,6 +11769,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, "dependencies": { "color-name": "~1.1.4" }, @@ -12014,12 +11780,14 @@ "node_modules/eslint/node_modules/color-name": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true }, "node_modules/eslint/node_modules/eslint-scope": { "version": "7.2.2", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz", "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==", + "dev": true, "dependencies": { "esrecurse": "^4.3.0", "estraverse": "^5.2.0" @@ -12035,6 +11803,7 @@ "version": "3.4.3", "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", + "dev": true, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" }, @@ -12046,6 +11815,7 @@ "version": "6.0.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", + "dev": true, "dependencies": { "is-glob": "^4.0.3" }, @@ -12057,6 +11827,7 @@ "version": "13.24.0", "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz", "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==", + "dev": true, "dependencies": { "type-fest": "^0.20.2" }, @@ -12071,6 +11842,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, "engines": { "node": ">=8" } @@ -12078,12 +11850,14 @@ "node_modules/eslint/node_modules/json-schema-traverse": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", - "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==" + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true }, "node_modules/eslint/node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, "dependencies": { "has-flag": "^4.0.0" }, @@ -12109,6 +11883,7 @@ "version": "9.6.1", "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz", "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==", + "dev": true, "dependencies": { "acorn": "^8.9.0", "acorn-jsx": "^5.3.2", @@ -12125,6 +11900,7 @@ "version": "3.4.3", "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", + "dev": true, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" }, @@ -17473,6 +17249,7 @@ "version": "3.0.3", "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz", "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==", + "dev": true, "engines": { "node": ">=8" } @@ -17878,12 +17655,6 @@ "@sideway/pinpoint": "^2.0.0" } }, - "node_modules/jquery": { - "version": "3.7.1", - "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz", - "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==", - "peer": true - }, "node_modules/js-cookie": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz", @@ -26114,19 +25885,6 @@ "is-typedarray": "^1.0.0" } }, - "node_modules/typescript": { - "version": "5.7.2", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz", - "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==", - "peer": true, - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=14.17" - } - }, "node_modules/ua-parser-js": { "version": "1.0.39", "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.39.tgz", @@ -26716,15 +26474,6 @@ } } }, - "node_modules/use-sync-external-store": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz", - "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==", - "peer": true, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", diff --git a/src/sections/Projects/Sistent/components/button/code.js b/src/sections/Projects/Sistent/components/button/code.js index a8d4903d1978..3b248001ebae 100644 --- a/src/sections/Projects/Sistent/components/button/code.js +++ b/src/sections/Projects/Sistent/components/button/code.js @@ -178,4 +178,4 @@ const ButtonCode = () => { ); }; -export default ButtonCode; +export default ButtonCode; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/content.js b/src/sections/Projects/Sistent/components/content.js index 388e34486f06..d9356ad7b29d 100644 --- a/src/sections/Projects/Sistent/components/content.js +++ b/src/sections/Projects/Sistent/components/content.js @@ -19,7 +19,7 @@ const componentsData = [ id: 3, name: "Modal", description: - "A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.", + "A modal is a dialog box/popup that is displayed over the main content to present information or collect input.", url: "/projects/sistent/components/modal", src: "/modal", }, @@ -95,6 +95,14 @@ const componentsData = [ url: "/projects/sistent/components/backdrop", src: "/backdrop", }, + { + id: 13, + name: "ToggleButton", + description: + "ToggleButton allows users to switch between two or more states, commonly used in forms or settings for quick toggles.", + url: "/projects/sistent/components/toggle-button", + src: "/toggle-button", + }, ]; -module.exports = { componentsData }; \ No newline at end of file +module.exports = { componentsData }; diff --git a/src/sections/Projects/Sistent/components/toggle-button/code.js b/src/sections/Projects/Sistent/components/toggle-button/code.js new file mode 100644 index 000000000000..7f3e26c4fd90 --- /dev/null +++ b/src/sections/Projects/Sistent/components/toggle-button/code.js @@ -0,0 +1,238 @@ +import React, { useState } from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; + +import { + SistentThemeProvider, + ToggleButton, + ToggleButtonGroup, +} from "@layer5/sistent"; +import { SistentLayout } from "../../sistent-layout"; +import { CodeBlock } from "../button/code-block"; +import TabButton from "../../../../../reusecore/Button"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +const codes = [ + ` + + Toggle On + + `, + ` + console.log(value)} + > + Option 1 + Option 2 + + `, + ` + console.log(value)} + > + Option 1 + Option 2 + Option 3 + + `, + ` + + Small + Small + + `, + ` + + Large + Large + + `, + ` + + Primary + Secondary + + `, +]; + +const ToggleButtonCode = () => { + const { isDark } = useStyledDarkMode(); + const location = useLocation(); + const [selected, setSelected] = useState("option1"); + const [multiSelected, setMultiSelected] = useState(["option1"]); + + const handleSingleToggle = (event, value) => { + setSelected(value); + }; + + const handleMultiToggle = (event, value) => { + setMultiSelected(value); + }; + + return ( + +
+ +

ToggleButton

+ +

+ The `ToggleButton` component provides a way to toggle between states + or select options within a group. Whether used individually or in + conjunction with a `ToggleButtonGroup`, it offers a consistent and + user-friendly way to control selections in a UI. +

+
+ + navigate("/projects/sistent/components/toggle-button") + } + title="Overview" + /> + + navigate("/projects/sistent/components/toggle-button/guidance") + } + title="Guidance" + /> + + navigate("/projects/sistent/components/toggle-button/code") + } + title="Code" + /> +
+
+ +

Single ToggleButton

+ +

+ A single `ToggleButton` is used to toggle between two states. Here + is an example: +

+
+
+ + + Toggle On + + +
+ +
+ + +

Grouped ToggleButtons (Single Selection)

+ +

+ Use a `ToggleButtonGroup` to group related buttons for single + selection. The `exclusive` prop ensures that only one button can be + selected at a time. +

+
+
+ + + Option 1 + Option 2 + + +
+ +
+ + +

Grouped ToggleButtons (Multiple Selection)

+ +

+ Use `ToggleButtonGroup` without the `exclusive` prop to allow users + to select multiple options within a group. This approach is useful + when enabling combinations of settings. +

+
+
+ + + Option 1 + Option 2 + Option 3 + + +
+ +
+ + +

ToggleButton Sizes

+ +

+ Adjust the size of the `ToggleButton` using the `size` prop. Supported values include + `small`, `medium`, and `large`. +

+
+
+ + + Small + Small + + + Large + Large + + +
+ +
+ + +

ToggleButton Colors

+ +

+ Use the `color` prop to set the color scheme for the `ToggleButton`. Common values include + `primary`, `secondary`, and `default`. +

+
+
+ + + Primary + Secondary + + +
+ +
+
+
+ + ); +}; + +export default ToggleButtonCode; diff --git a/src/sections/Projects/Sistent/components/toggle-button/guidance.js b/src/sections/Projects/Sistent/components/toggle-button/guidance.js new file mode 100644 index 000000000000..c7301262150b --- /dev/null +++ b/src/sections/Projects/Sistent/components/toggle-button/guidance.js @@ -0,0 +1,167 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import { Row } from "../../../../../reusecore/Layout"; +import { ToggleButton, ToggleButtonGroup, SistentThemeProvider } from "@layer5/sistent"; +import { SistentLayout } from "../../sistent-layout"; + +import TabButton from "../../../../../reusecore/Button"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +const ToggleButtonGuidance = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
+ +

ToggleButton

+ +

+ The `ToggleButton` component is designed to allow users to quickly + toggle between two or more states, such as enabling or disabling a + feature, choosing between views, or setting preferences. It provides + visual feedback that helps users understand the current state of an + option at a glance. +

+
+ navigate("/projects/sistent/components/toggle-button")} + title="Overview" + /> + + navigate("/projects/sistent/components/toggle-button/guidance") + } + title="Guidance" + /> + navigate("/projects/sistent/components/toggle-button/code")} + title="Code" + /> +
+
+

+ The `ToggleButton` and `ToggleButtonGroup` are versatile components + that can be used for a wide range of applications. Their intuitive + design ensures users can make selections easily and confidently. + Whether it's enabling a setting, selecting a mode, or choosing + multiple options, these components are built to enhance user + experience across different scenarios. +

+ +

Functionality

+ +

+ The purpose of `ToggleButton` and `ToggleButtonGroup` components is + to streamline user interactions where toggling between states or + selecting options is necessary. Below are some of their most common + applications: +

+

Single Toggle

+

+ A single `ToggleButton` is used to represent a binary choice, such + as enabling or disabling a feature. For example, a toggle button can + be used to switch between "Dark Mode" and "Light Mode" or enable/disable notifications. +

+ + + + Dark Mode + + + +

Grouped Toggle Buttons (Single Selection)

+

+ Use a `ToggleButtonGroup` to group multiple related options when only one + selection is allowed at a time. For instance, allowing a user to select a view type, + such as "Grid View" or "List View." +

+ + + + Grid View + List View + + + +

Grouped Toggle Buttons (Multiple Selection)

+

+ Enable multi-selection by using the `allowMultiple` prop in a `ToggleButtonGroup`. + This is particularly useful for scenarios where users need to select multiple + options simultaneously, such as filtering categories or choosing multiple features to enable. +

+ + + + Feature 1 + Feature 2 + Feature 3 + + + + + +

Styling Guidelines

+ +

Colors

+

+ Always use the pre-defined theme styles for colors, such as `primary` or `secondary`. + This ensures consistency across the application and makes it easy to switch between + light and dark themes without additional effort. +

+

Size

+

+ The size of the `ToggleButton` can be adjusted using the `size` prop to fit + different screen sizes and contexts. Use `small`, `medium`, or `large` as + values for this property. +

+ + + + Small + + + Medium + + + Large + + + +

Icon Integration

+

+ Toggle buttons can include icons to make their purpose clearer. Icons + should complement the label text and not replace it entirely. For example, + a grid icon can visually reinforce the "Grid View" label in a toggle button. +

+ + + }> + Grid View + + + +
+
+ + ); +}; + +export default ToggleButtonGuidance; diff --git a/src/sections/Projects/Sistent/components/toggle-button/index.js b/src/sections/Projects/Sistent/components/toggle-button/index.js new file mode 100644 index 000000000000..94488daf1c0a --- /dev/null +++ b/src/sections/Projects/Sistent/components/toggle-button/index.js @@ -0,0 +1,265 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; + +import { + SistentThemeProvider, + ToggleButtonGroup, + ToggleButton, + Box, +} from "@layer5/sistent"; +import TabButton from "../../../../../reusecore/Button"; +import { SistentLayout } from "../../sistent-layout"; +import { Row } from "../../../../../reusecore/Layout"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +const formatButtons = [ + Bold, + Italic, + Underline, +]; + +const SistentToggleButton = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + const [formats, setFormats] = React.useState(() => ["bold"]); + + const handleFormat = (event, newFormats) => { + setFormats(newFormats); + }; + + return ( + +
+ +

Toggle Button

+ +

+ The `ToggleButton` and `ToggleButtonGroup` are versatile components + that can be used for a wide range of applications. Their intuitive + design ensures users can make selections easily and confidently. + Whether it's enabling a setting, selecting a mode, or choosing + multiple options, these components are built to enhance user + experience across different scenarios. +

+
+ navigate("/projects/sistent/components/toggle-button")} + title="Overview" + /> + navigate("/projects/sistent/components/toggle-button/guidance")} + title="Guidance" + /> + navigate("/projects/sistent/components/toggle-button/code")} + title="Code" + /> +
+
+ +

Basic Usage

+ +

+ Basic toggle buttons allow users to make multiple selections easily, + with each button’s state reflecting whether it is selected. For + example, in text formatting, users can choose "Bold," "Italic," or + "Underline" simultaneously to customize their text. The selected + states are stored in an array, making it simple to manage and apply + changes dynamically. This ensures seamless functionality and a + polished user experience. +

+ + + + {formatButtons} + + + + +

Exclusive Selection

+ +

+ With exclusive selection, only one option can be selected at a time. + This is useful in scenarios where mutually exclusive choices are + required, such as selecting a single alignment for text (e.g., + "Left," "Center," or "Right"). The `exclusive` prop ensures that + toggling one button automatically deselects the others, maintaining + clarity and consistency in user inputs. +

+ + + { + setFormats([newFormat]); + }} + aria-label="text formatting" + > + {formatButtons} + + + + +

Vertical Toggle

+ +

+ Toggle buttons can be stacked vertically by setting the orientation + prop to "vertical." This layout is ideal for menus, settings panels, + or options where vertical alignment improves readability and ease of + access. Vertical toggle groups are particularly helpful on smaller + screens or mobile devices, ensuring options remain accessible without + compromising on space. +

+ + + + {formatButtons} + + + + +

Sizes

+ +

+ The ToggleButtonGroup component supports different sizes to match + the design requirements of your application. Available sizes include + "small," "medium" (default), and "large." By adjusting the size, + you can ensure that buttons are appropriately scaled for their + context, whether it's a compact toolbar or a full-screen settings + menu. +

+ + + *": { + m: 1, + }, + }} + > + + {formatButtons} + + + {formatButtons} + + + {formatButtons} + + + + + +

Disabled

+ +

+ All toggle buttons within a group can be disabled by setting the + `disabled` prop on the `ToggleButtonGroup` component. This is + useful in scenarios where selections should be temporarily or + permanently unavailable to users, such as when certain features are + restricted or conditions are not met for using them. +

+ + + + {formatButtons} + + + + +

Color

+ +

+ Toggle buttons can be styled with different colors using the `color` + prop. Available options include "primary" and "secondary," among + others, depending on your theme configuration. This customization + helps to visually differentiate buttons, emphasizing their purpose + and improving user interaction. +

+ + + *": { + m: 1, + }, + }} + > + + {formatButtons} + + + {formatButtons} + + + + +
+
+ + ); +}; + +export default SistentToggleButton; From 81634e2953c45aa5d920ea47c8f3b054c358cc51 Mon Sep 17 00:00:00 2001 From: eyeaadil Date: Fri, 20 Dec 2024 08:40:54 +0530 Subject: [PATCH 2/8] Removed unnecessary console.log and reverted package-lock.json changes Signed-off-by: eyeaadil --- gatsby-node.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/gatsby-node.js b/gatsby-node.js index bc2e1530de5c..1fd9d3eb694b 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -729,7 +729,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => { const components = componentsData.map((component) => component.src.replace("/", "")); - console.log("Adilllllllllll",components); + const createComponentPages = (createPage, components) => { const pageTypes = [ @@ -742,8 +742,6 @@ exports.createPages = async ({ actions, graphql, reporter }) => { pageTypes.forEach(({ suffix, file }) => { const path = `/projects/sistent/components/${name}${suffix}`; const componentPath = `./src/sections/Projects/Sistent/components/${name}/${file}`; - - console.log(`Creating page for: ${path}`); // Add this log try { createPage({ path, From c80f0b94e79f25635ada206d1c7b49b3695cb478 Mon Sep 17 00:00:00 2001 From: eyeaadil Date: Fri, 20 Dec 2024 09:29:09 +0530 Subject: [PATCH 3/8] correct the paragraph in each file Signed-off-by: eyeaadil --- .../Sistent/components/toggle-button/code.js | 10 ++++++---- .../components/toggle-button/guidance.js | 19 ++++++------------- 2 files changed, 12 insertions(+), 17 deletions(-) diff --git a/src/sections/Projects/Sistent/components/toggle-button/code.js b/src/sections/Projects/Sistent/components/toggle-button/code.js index 7f3e26c4fd90..c30eac52cf2d 100644 --- a/src/sections/Projects/Sistent/components/toggle-button/code.js +++ b/src/sections/Projects/Sistent/components/toggle-button/code.js @@ -79,10 +79,12 @@ const ToggleButtonCode = () => {

ToggleButton

- The `ToggleButton` component provides a way to toggle between states - or select options within a group. Whether used individually or in - conjunction with a `ToggleButtonGroup`, it offers a consistent and - user-friendly way to control selections in a UI. + The `ToggleButton` and `ToggleButtonGroup` are versatile components + that can be used for a wide range of applications. Their intuitive + design ensures users can make selections easily and confidently. + Whether it's enabling a setting, selecting a mode, or choosing + multiple options, these components are built to enhance user + experience across different scenarios.

{

ToggleButton

- The `ToggleButton` component is designed to allow users to quickly - toggle between two or more states, such as enabling or disabling a - feature, choosing between views, or setting preferences. It provides - visual feedback that helps users understand the current state of an - option at a glance. + The `ToggleButton` and `ToggleButtonGroup` are versatile components + that can be used for a wide range of applications. Their intuitive + design ensures users can make selections easily and confidently. + Whether it's enabling a setting, selecting a mode, or choosing + multiple options, these components are built to enhance user + experience across different scenarios.

{ />
-

- The `ToggleButton` and `ToggleButtonGroup` are versatile components - that can be used for a wide range of applications. Their intuitive - design ensures users can make selections easily and confidently. - Whether it's enabling a setting, selecting a mode, or choosing - multiple options, these components are built to enhance user - experience across different scenarios. -

Functionality

 From d8ab6b9a16979b6e6d40bfcc24814c7eb8fceea6 Mon Sep 17 00:00:00 2001 From: eyeaadil Date: Thu, 26 Dec 2024 09:36:47 +0530 Subject: [PATCH 4/8] Enhance the toggle-button component Signed-off-by: eyeaadil --- gatsby-node.js | 4 - .../handbook-navigation/TocPagination.js | 2 +- .../Projects/Sistent/components/content.js | 2 +- .../Sistent/components/toggle-button/code.js | 193 ++++++++++-------- .../components/toggle-button/guidance.js | 147 +++++++------ .../Sistent/components/toggle-button/index.js | 4 +- 6 files changed, 190 insertions(+), 162 deletions(-) diff --git a/gatsby-node.js b/gatsby-node.js index 1fd9d3eb694b..bf96eed7e0d2 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -727,10 +727,6 @@ exports.createPages = async ({ actions, graphql, reporter }) => { }); const components = componentsData.map((component) => component.src.replace("/", "")); - - - - const createComponentPages = (createPage, components) => { const pageTypes = [ { suffix: "", file: "index.js" }, diff --git a/src/components/handbook-navigation/TocPagination.js b/src/components/handbook-navigation/TocPagination.js index f70d04bf7477..953f70412b3c 100644 --- a/src/components/handbook-navigation/TocPagination.js +++ b/src/components/handbook-navigation/TocPagination.js @@ -22,7 +22,7 @@ const TocPagination = () => { ) : null} {currentPage < content.length - 1 ? ( - ) : null} diff --git a/src/sections/Projects/Sistent/components/content.js b/src/sections/Projects/Sistent/components/content.js index d9356ad7b29d..ca8d04d14ab4 100644 --- a/src/sections/Projects/Sistent/components/content.js +++ b/src/sections/Projects/Sistent/components/content.js @@ -19,7 +19,7 @@ const componentsData = [ id: 3, name: "Modal", description: - "A modal is a dialog box/popup that is displayed over the main content to present information or collect input.", + "A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.", url: "/projects/sistent/components/modal", src: "/modal", }, diff --git a/src/sections/Projects/Sistent/components/toggle-button/code.js b/src/sections/Projects/Sistent/components/toggle-button/code.js index c30eac52cf2d..bacbae0df92b 100644 --- a/src/sections/Projects/Sistent/components/toggle-button/code.js +++ b/src/sections/Projects/Sistent/components/toggle-button/code.js @@ -13,64 +13,87 @@ import TabButton from "../../../../../reusecore/Button"; import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; const codes = [ - ` - - Toggle On - - `, - ` + // For exclusive selection + ` console.log(value)} > - Option 1 - Option 2 + Left + Center + Right - `, - ` + `, + // For multiple selection + ` console.log(value)} + value={["bold", "italic"]} > - Option 1 - Option 2 - Option 3 + Bold + Italic + Underline - `, - ` + `, + // For size + ` Small Small - `, - ` + + Medium + Medium + Large Large - `, - ` - - Primary - Secondary + `, + // For color + ` + + Primary + Secondary + + `, + // For vertical + ` + + Vertical 1 + Vertical 2 + Vertical 3 - `, + `, ]; const ToggleButtonCode = () => { const { isDark } = useStyledDarkMode(); const location = useLocation(); - const [selected, setSelected] = useState("option1"); - const [multiSelected, setMultiSelected] = useState(["option1"]); - - const handleSingleToggle = (event, value) => { - setSelected(value); + const [exclusiveSelected, setExclusiveSelected] = useState("left"); + const [multiSelected, setMultiSelected] = useState(["bold"]); + const [sizeSelected, setSizeSelected] = useState("small"); + const [colorSelected, setColorSelected] = useState("primary"); + const [verticalSelected, setVerticalSelected] = useState("left"); + const handleExclusiveToggle = (event, value) => { + setExclusiveSelected(value); }; const handleMultiToggle = (event, value) => { setMultiSelected(value); }; + const handleSizeToggle = (event, value) => { + setSizeSelected(value); + }; + const handleColorToggle = (event, value) => { + setColorSelected(value); + }; + const handleVerticalToggle = (event, value) => { + setVerticalSelected(value); + }; return ( @@ -124,56 +147,29 @@ const ToggleButtonCode = () => { />
- -

Single ToggleButton

- -

- A single `ToggleButton` is used to toggle between two states. Here - is an example: -

-
-
- - - Toggle On - - -
- -
- - -

Grouped ToggleButtons (Single Selection)

+ +

Exclusive Selection

 -

- Use a `ToggleButtonGroup` to group related buttons for single - selection. The `exclusive` prop ensures that only one button can be - selected at a time. -

- Option 1 - Option 2 + Left + Center + Right
- +
- -

Grouped ToggleButtons (Multiple Selection)

+ +

Multiple Selection

 -

- Use `ToggleButtonGroup` without the `exclusive` prop to allow users - to select multiple options within a group. This approach is useful - when enabling combinations of settings. -

@@ -181,55 +177,76 @@ const ToggleButtonCode = () => { value={multiSelected} onChange={handleMultiToggle} > - Option 1 - Option 2 - Option 3 + Bold + Italic + Underline
- +
- +

ToggleButton Sizes

- Adjust the size of the `ToggleButton` using the `size` prop. Supported values include - `small`, `medium`, and `large`. + Adjust the size of the `ToggleButton` using the `size` prop. + Supported values include `small`, `medium`, and `large`.

- + Small Small - + + Medium + Medium + + Large Large
- +
- +

ToggleButton Colors

 -

- Use the `color` prop to set the color scheme for the `ToggleButton`. Common values include - `primary`, `secondary`, and `default`. -

- - Primary - Secondary + + Primary + Secondary + + +
+ +
+ + +

Vertical Buttons

+ +
+
+ + + Vertical 1 + Vertical 2 + Vertical 3
- +
diff --git a/src/sections/Projects/Sistent/components/toggle-button/guidance.js b/src/sections/Projects/Sistent/components/toggle-button/guidance.js index 05dc4985ab15..736fe7b5f240 100644 --- a/src/sections/Projects/Sistent/components/toggle-button/guidance.js +++ b/src/sections/Projects/Sistent/components/toggle-button/guidance.js @@ -2,9 +2,12 @@ import React from "react"; import { navigate } from "gatsby"; import { useLocation } from "@reach/router"; import { Row } from "../../../../../reusecore/Layout"; -import { ToggleButton, ToggleButtonGroup, SistentThemeProvider } from "@layer5/sistent"; +import { + ToggleButton, + ToggleButtonGroup, + SistentThemeProvider, +} from "@layer5/sistent"; import { SistentLayout } from "../../sistent-layout"; - import TabButton from "../../../../../reusecore/Button"; import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; @@ -33,12 +36,15 @@ const ToggleButtonGuidance = () => { ? "active" : "" } - onClick={() => navigate("/projects/sistent/components/toggle-button")} + onClick={() => + navigate("/projects/sistent/components/toggle-button") + } title="Overview" /> { /> navigate("/projects/sistent/components/toggle-button/code")} + onClick={() => + navigate("/projects/sistent/components/toggle-button/code") + } title="Code" />
- +

Functionality

- The purpose of `ToggleButton` and `ToggleButtonGroup` components is - to streamline user interactions where toggling between states or - selecting options is necessary. Below are some of their most common - applications: + The `ToggleButton` and `ToggleButtonGroup` components provide an + efficient way to handle user interactions for toggling states or + selecting one or multiple options. Below are some common use cases.

-

Single Toggle

+

Exclusive Selection

- A single `ToggleButton` is used to represent a binary choice, such - as enabling or disabling a feature. For example, a toggle button can - be used to switch between "Dark Mode" and "Light Mode" or enable/disable notifications. + Use an exclusive `ToggleButtonGroup` when only one selection is + allowed at a time. This is useful for scenarios like aligning text + to the left, center, or right.

- - Dark Mode - - - -

Grouped Toggle Buttons (Single Selection)

-

- Use a `ToggleButtonGroup` to group multiple related options when only one - selection is allowed at a time. For instance, allowing a user to select a view type, - such as "Grid View" or "List View." -

- - - - Grid View - List View + + Left + Center + Right -

Grouped Toggle Buttons (Multiple Selection)

+ +

Multiple Selection

- Enable multi-selection by using the `allowMultiple` prop in a `ToggleButtonGroup`. - This is particularly useful for scenarios where users need to select multiple - options simultaneously, such as filtering categories or choosing multiple features to enable. + Enable multiple selections within a `ToggleButtonGroup` for cases + where users need to toggle multiple options, such as enabling bold, + italic, and underline text styling simultaneously.

- - Feature 1 - Feature 2 - Feature 3 + + Bold + Italic + Underline - -

Styling Guidelines

- -

Colors

+

Sizes

- Always use the pre-defined theme styles for colors, such as `primary` or `secondary`. - This ensures consistency across the application and makes it easy to switch between - light and dark themes without additional effort. + Adjust the size of the `ToggleButton` using the `size` prop. This + property supports `small`, `medium`, and `large` values to suit + various design requirements.

-

Size

+
+
+ + + Small + Small + + + Medium + Medium + + + Large + Large + + +
+
+ +

Colors

- The size of the `ToggleButton` can be adjusted using the `size` prop to fit - different screen sizes and contexts. Use `small`, `medium`, or `large` as - values for this property. + Use the `color` prop to style the `ToggleButtonGroup` with + pre-defined theme colors, such as `primary` or `secondary`. This + ensures consistency across the application.

- - Small - - - Medium - - - Large - + + Primary + Secondary + -

Icon Integration

+ +

Vertical Orientation

- Toggle buttons can include icons to make their purpose clearer. Icons - should complement the label text and not replace it entirely. For example, - a grid icon can visually reinforce the "Grid View" label in a toggle button. + The `orientation` prop allows you to arrange toggle buttons + vertically instead of horizontally. This is ideal for menus or + options requiring more vertical space.

- }> - Grid View - + + Vertical 1 + Vertical 2 + Vertical 3 +
diff --git a/src/sections/Projects/Sistent/components/toggle-button/index.js b/src/sections/Projects/Sistent/components/toggle-button/index.js index 94488daf1c0a..c8670520a047 100644 --- a/src/sections/Projects/Sistent/components/toggle-button/index.js +++ b/src/sections/Projects/Sistent/components/toggle-button/index.js @@ -29,10 +29,10 @@ const SistentToggleButton = () => { }; return ( - +
-

Toggle Button

+

ToggleButton

The `ToggleButton` and `ToggleButtonGroup` are versatile components From 934090be8f4c290ddfbd2593d8e324f3c4003160 Mon Sep 17 00:00:00 2001 From: eyeaadil Date: Thu, 26 Dec 2024 09:53:49 +0530 Subject: [PATCH 5/8] Fix toggle-button component Signed-off-by: eyeaadil --- .../Projects/Sistent/components/toggle-button/code.js | 6 +++--- .../Projects/Sistent/components/toggle-button/guidance.js | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/sections/Projects/Sistent/components/toggle-button/code.js b/src/sections/Projects/Sistent/components/toggle-button/code.js index bacbae0df92b..28d82d69baf8 100644 --- a/src/sections/Projects/Sistent/components/toggle-button/code.js +++ b/src/sections/Projects/Sistent/components/toggle-button/code.js @@ -177,9 +177,9 @@ const ToggleButtonCode = () => { value={multiSelected} onChange={handleMultiToggle} > - Bold - Italic - Underline + Toggle Button 1 + Toggle Button 2 + Toggle Button 3

diff --git a/src/sections/Projects/Sistent/components/toggle-button/guidance.js b/src/sections/Projects/Sistent/components/toggle-button/guidance.js index 736fe7b5f240..c11b0925bdd0 100644 --- a/src/sections/Projects/Sistent/components/toggle-button/guidance.js +++ b/src/sections/Projects/Sistent/components/toggle-button/guidance.js @@ -100,9 +100,9 @@ const ToggleButtonGuidance = () => { - Bold - Italic - Underline + Toggle Button 1 + Toggle Button 2 + Toggle Button 3 From 4e30957789b57af67978cb0f41ce65c604cbdf05 Mon Sep 17 00:00:00 2001 From: eyeaadil Date: Sat, 28 Dec 2024 08:45:14 +0530 Subject: [PATCH 6/8] Fix toggle-button-component Signed-off-by: eyeaadil --- src/sections/Projects/Sistent/components/toggle-button/code.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/sections/Projects/Sistent/components/toggle-button/code.js b/src/sections/Projects/Sistent/components/toggle-button/code.js index 28d82d69baf8..383c6ad0c7c5 100644 --- a/src/sections/Projects/Sistent/components/toggle-button/code.js +++ b/src/sections/Projects/Sistent/components/toggle-button/code.js @@ -176,6 +176,7 @@ const ToggleButtonCode = () => { Toggle Button 1 Toggle Button 2 From 22dd684a9444cbd645418246af1e80775c578d3f Mon Sep 17 00:00:00 2001 From: eyeaadil Date: Sat, 28 Dec 2024 09:40:05 +0530 Subject: [PATCH 7/8] Fix toggle-button-component Signed-off-by: eyeaadil --- .../Projects/Sistent/components/toggle-button/code.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/sections/Projects/Sistent/components/toggle-button/code.js b/src/sections/Projects/Sistent/components/toggle-button/code.js index 383c6ad0c7c5..3f9313764e04 100644 --- a/src/sections/Projects/Sistent/components/toggle-button/code.js +++ b/src/sections/Projects/Sistent/components/toggle-button/code.js @@ -29,9 +29,9 @@ const codes = [ - Bold - Italic - Underline + Toggle Button 1 + Toggle Button 1 + Toggle Button 1 `, // For size From 4d910165bcfd17bb20fbd08e1674d705d81a118c Mon Sep 17 00:00:00 2001 From: eyeaadil Date: Wed, 1 Jan 2025 23:20:11 +0530 Subject: [PATCH 8/8] Fix the toggle-button Signed-off-by: eyeaadil --- .../handbook-navigation/TocPagination.js | 2 +- .../Sistent/components/toggle-button/code.js | 72 +++++++++++++------ .../components/toggle-button/guidance.js | 65 ++++++++++++----- .../Sistent/components/toggle-button/index.js | 6 +- 4 files changed, 103 insertions(+), 42 deletions(-) diff --git a/src/components/handbook-navigation/TocPagination.js b/src/components/handbook-navigation/TocPagination.js index 953f70412b3c..f70d04bf7477 100644 --- a/src/components/handbook-navigation/TocPagination.js +++ b/src/components/handbook-navigation/TocPagination.js @@ -22,7 +22,7 @@ const TocPagination = () => { ) : null} {currentPage < content.length - 1 ? ( - ) : null} diff --git a/src/sections/Projects/Sistent/components/toggle-button/code.js b/src/sections/Projects/Sistent/components/toggle-button/code.js index 3f9313764e04..ffc1cd0aaa66 100644 --- a/src/sections/Projects/Sistent/components/toggle-button/code.js +++ b/src/sections/Projects/Sistent/components/toggle-button/code.js @@ -102,12 +102,12 @@ const ToggleButtonCode = () => {

ToggleButton

- The `ToggleButton` and `ToggleButtonGroup` are versatile components - that can be used for a wide range of applications. Their intuitive - design ensures users can make selections easily and confidently. - Whether it's enabling a setting, selecting a mode, or choosing - multiple options, these components are built to enhance user - experience across different scenarios. + The `ToggleButton` and `ToggleButtonGroup` are versatile components + that can be used for a wide range of applications. Their intuitive + design ensures users can make selections easily and confidently. + Whether it's enabling a setting, selecting a mode, or choosing + multiple options, these components are built to enhance user + experience across different scenarios.

{ Toggle Button 1 Toggle Button 2 @@ -197,18 +196,46 @@ const ToggleButtonCode = () => {
- - Small - Small - - - Medium - Medium - - - Large - Large - +
+ + Small + Small + + + + Medium + Medium + + + + Large + Large + +
@@ -220,7 +247,12 @@ const ToggleButtonCode = () => {
- + Primary Secondary diff --git a/src/sections/Projects/Sistent/components/toggle-button/guidance.js b/src/sections/Projects/Sistent/components/toggle-button/guidance.js index c11b0925bdd0..2fcc7de22c88 100644 --- a/src/sections/Projects/Sistent/components/toggle-button/guidance.js +++ b/src/sections/Projects/Sistent/components/toggle-button/guidance.js @@ -22,12 +22,12 @@ const ToggleButtonGuidance = () => {

ToggleButton

- The `ToggleButton` and `ToggleButtonGroup` are versatile components - that can be used for a wide range of applications. Their intuitive - design ensures users can make selections easily and confidently. - Whether it's enabling a setting, selecting a mode, or choosing - multiple options, these components are built to enhance user - experience across different scenarios. + The `ToggleButton` and `ToggleButtonGroup` are versatile components + that can be used for a wide range of applications. Their intuitive + design ensures users can make selections easily and confidently. + Whether it's enabling a setting, selecting a mode, or choosing + multiple options, these components are built to enhance user + experience across different scenarios.

{
- - Small - Small - - - Medium - Medium - - - Large - Large - +
+ + Small + Small + + + + Medium + Medium + + + + + Large + + + Large + + +
diff --git a/src/sections/Projects/Sistent/components/toggle-button/index.js b/src/sections/Projects/Sistent/components/toggle-button/index.js index c8670520a047..1464c93cc3de 100644 --- a/src/sections/Projects/Sistent/components/toggle-button/index.js +++ b/src/sections/Projects/Sistent/components/toggle-button/index.js @@ -14,9 +14,9 @@ import { Row } from "../../../../../reusecore/Layout"; import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; const formatButtons = [ - Bold, - Italic, - Underline, + ToggleButton 1, + ToggleButton 2, + ToggleButton 3, ]; const SistentToggleButton = () => {