From 80a010ef151dfe8bdc573c9471a6cba6e248f76f Mon Sep 17 00:00:00 2001 From: Iveta Date: Thu, 6 Jul 2023 10:32:19 -0400 Subject: [PATCH] Enable Docusaurus website --- .../.gitignore | 0 @stellar/design-system-website/README.md | 44 +- .../design-system-website/babel.config.js | 21 +- .../docs/intro.md | 0 .../docs/tutorial-basics/_category_.json | 0 .../docs/tutorial-basics/congratulations.md | 0 .../tutorial-basics/create-a-blog-post.md | 0 .../docs/tutorial-basics/create-a-document.md | 0 .../docs/tutorial-basics/create-a-page.md | 0 .../docs/tutorial-basics/deploy-your-site.md | 0 .../tutorial-basics/markdown-features.mdx | 0 .../docs/tutorial-extras/_category_.json | 0 .../img/docsVersionDropdown.png | Bin .../tutorial-extras/img/localeDropdown.png | Bin .../tutorial-extras/manage-docs-versions.md | 0 .../tutorial-extras/translate-your-site.md | 0 .../docusaurus.config.js | 0 @stellar/design-system-website/package.json | 97 +- .../design-system-website/public/favicon.ico | Bin 7406 -> 0 bytes .../design-system-website/public/logo192.png | Bin 3843 -> 0 bytes .../design-system-website/public/logo512.png | Bin 11240 -> 0 bytes .../public/manifest.json | 25 - .../design-system-website/public/robots.txt | 3 - .../sidebars.js | 0 @stellar/design-system-website/src/App.tsx | 114 - .../src/components/ComponentsList/index.tsx | 41 - .../src/components/ComponentsList/styles.scss | 38 - .../src/components/Details/index.tsx | 263 - .../src/components/Details/styles.scss | 109 - .../src/components/ElementCode/index.tsx | 145 - .../src/components/ElementCode/styles.scss | 16 - .../src/components/PreviewBlock/index.tsx | 0 .../src/components/SideNav/index.tsx | 101 - .../src/components/SideNav/styles.scss | 54 - .../src/constants/componentDetails.ts | 60 - .../src/constants/componentsInDisplayOrder.ts | 121 - .../src/constants/details/assetIcons.tsx | 114 - .../src/constants/details/assets.tsx | 187 - .../src/constants/details/avatars.tsx | 40 - .../src/constants/details/badges.tsx | 63 - .../src/constants/details/banners.tsx | 63 - .../src/constants/details/branding.tsx | 36 - .../src/constants/details/buttons.tsx | 636 -- .../src/constants/details/cards.tsx | 65 - .../src/constants/details/checkboxes.tsx | 290 - .../src/constants/details/copyTexts.tsx | 96 - .../src/constants/details/iconButtons.tsx | 267 - .../src/constants/details/inputs.tsx | 457 -- .../src/constants/details/layout.tsx | 204 - .../src/constants/details/links.tsx | 832 --- .../src/constants/details/loaders.tsx | 35 - .../src/constants/details/mocks.tsx | 4 - .../src/constants/details/modals.tsx | 369 -- .../src/constants/details/navButtons.tsx | 135 - .../src/constants/details/notifications.tsx | 211 - .../src/constants/details/pagination.tsx | 59 - .../src/constants/details/pieProgress.tsx | 51 - .../src/constants/details/profiles.tsx | 226 - .../src/constants/details/radioButtons.tsx | 219 - .../src/constants/details/selects.tsx | 283 - .../src/constants/details/tables.tsx | 228 - .../src/constants/details/textareas.tsx | 420 -- .../src/constants/details/toggles.tsx | 109 - .../src/constants/details/tooltips.tsx | 97 - .../src/constants/details/typography.tsx | 242 - .../src/constants/variables.ts | 6 - .../src/context/SideNav.ts | 21 - .../src/css/custom.css | 0 .../src/generated/gitInfo.ts | 1 - .../src/helpers/getComponentDetailsLink.ts | 4 - .../src/hooks/useSideNavEnabled.ts | 13 - @stellar/design-system-website/src/index.html | 32 - @stellar/design-system-website/src/index.tsx | 15 - .../src/pages/ComponentDetails.tsx | 47 - .../src/pages/Landing.tsx | 242 - .../src/react-app-env.d.ts | 1 - .../design-system-website/src/setupTests.ts | 5 - .../design-system-website/src/styles.scss | 125 - .../src/theme/Playground/index.js | 0 .../src/theme/Playground/styles.module.css | 0 .../design-system-website/src/types/types.ts | 113 - .../static/.nojekyll | 0 .../static/img/docusaurus-social-card.jpg | Bin .../static/img/docusaurus.png | Bin .../static/img/favicon.ico | Bin .../static/img/logo.svg | 0 .../static/img/undraw_docusaurus_mountain.svg | 0 .../static/img/undraw_docusaurus_react.svg | 0 .../static/img/undraw_docusaurus_tree.svg | 0 @stellar/design-system-website/tsconfig.json | 15 +- .../design-system-website/webpack.common.js | 157 - @stellar/design-system-website/webpack.dev.js | 15 - .../design-system-website/webpack.prod.js | 7 - .../README.md | 45 - .../babel.config.js | 3 - .../package.json | 59 - .../tsconfig.json | 7 - yarn.lock | 5567 +++++++++++++---- 98 files changed, 4450 insertions(+), 9340 deletions(-) rename @stellar/{design-system-website__docusaurus => design-system-website}/.gitignore (100%) rename @stellar/{design-system-website__docusaurus => design-system-website}/docs/intro.md (100%) rename @stellar/{design-system-website__docusaurus => design-system-website}/docs/tutorial-basics/_category_.json (100%) rename @stellar/{design-system-website__docusaurus => design-system-website}/docs/tutorial-basics/congratulations.md (100%) rename @stellar/{design-system-website__docusaurus => design-system-website}/docs/tutorial-basics/create-a-blog-post.md (100%) rename @stellar/{design-system-website__docusaurus => design-system-website}/docs/tutorial-basics/create-a-document.md (100%) rename @stellar/{design-system-website__docusaurus => design-system-website}/docs/tutorial-basics/create-a-page.md (100%) rename @stellar/{design-system-website__docusaurus => design-system-website}/docs/tutorial-basics/deploy-your-site.md (100%) rename @stellar/{design-system-website__docusaurus => design-system-website}/docs/tutorial-basics/markdown-features.mdx (100%) rename @stellar/{design-system-website__docusaurus => design-system-website}/docs/tutorial-extras/_category_.json (100%) rename @stellar/{design-system-website__docusaurus => design-system-website}/docs/tutorial-extras/img/docsVersionDropdown.png (100%) rename @stellar/{design-system-website__docusaurus => design-system-website}/docs/tutorial-extras/img/localeDropdown.png (100%) rename @stellar/{design-system-website__docusaurus => design-system-website}/docs/tutorial-extras/manage-docs-versions.md (100%) rename @stellar/{design-system-website__docusaurus => design-system-website}/docs/tutorial-extras/translate-your-site.md (100%) rename @stellar/{design-system-website__docusaurus => design-system-website}/docusaurus.config.js (100%) mode change 100755 => 100644 @stellar/design-system-website/package.json delete mode 100644 @stellar/design-system-website/public/favicon.ico delete mode 100644 @stellar/design-system-website/public/logo192.png delete mode 100644 @stellar/design-system-website/public/logo512.png delete mode 100644 @stellar/design-system-website/public/manifest.json delete mode 100644 @stellar/design-system-website/public/robots.txt rename @stellar/{design-system-website__docusaurus => design-system-website}/sidebars.js (100%) delete mode 100644 @stellar/design-system-website/src/App.tsx delete mode 100644 @stellar/design-system-website/src/components/ComponentsList/index.tsx delete mode 100644 @stellar/design-system-website/src/components/ComponentsList/styles.scss delete mode 100644 @stellar/design-system-website/src/components/Details/index.tsx delete mode 100644 @stellar/design-system-website/src/components/Details/styles.scss delete mode 100644 @stellar/design-system-website/src/components/ElementCode/index.tsx delete mode 100644 @stellar/design-system-website/src/components/ElementCode/styles.scss rename @stellar/{design-system-website__docusaurus => design-system-website}/src/components/PreviewBlock/index.tsx (100%) delete mode 100644 @stellar/design-system-website/src/components/SideNav/index.tsx delete mode 100644 @stellar/design-system-website/src/components/SideNav/styles.scss delete mode 100644 @stellar/design-system-website/src/constants/componentDetails.ts delete mode 100644 @stellar/design-system-website/src/constants/componentsInDisplayOrder.ts delete mode 100644 @stellar/design-system-website/src/constants/details/assetIcons.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/assets.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/avatars.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/badges.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/banners.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/branding.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/buttons.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/cards.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/checkboxes.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/copyTexts.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/iconButtons.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/inputs.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/layout.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/links.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/loaders.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/mocks.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/modals.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/navButtons.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/notifications.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/pagination.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/pieProgress.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/profiles.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/radioButtons.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/selects.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/tables.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/textareas.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/toggles.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/tooltips.tsx delete mode 100644 @stellar/design-system-website/src/constants/details/typography.tsx delete mode 100644 @stellar/design-system-website/src/constants/variables.ts delete mode 100644 @stellar/design-system-website/src/context/SideNav.ts rename @stellar/{design-system-website__docusaurus => design-system-website}/src/css/custom.css (100%) delete mode 100644 @stellar/design-system-website/src/generated/gitInfo.ts delete mode 100644 @stellar/design-system-website/src/helpers/getComponentDetailsLink.ts delete mode 100644 @stellar/design-system-website/src/hooks/useSideNavEnabled.ts delete mode 100644 @stellar/design-system-website/src/index.html delete mode 100644 @stellar/design-system-website/src/index.tsx delete mode 100644 @stellar/design-system-website/src/pages/ComponentDetails.tsx delete mode 100644 @stellar/design-system-website/src/pages/Landing.tsx delete mode 100644 @stellar/design-system-website/src/react-app-env.d.ts delete mode 100644 @stellar/design-system-website/src/setupTests.ts delete mode 100644 @stellar/design-system-website/src/styles.scss rename @stellar/{design-system-website__docusaurus => design-system-website}/src/theme/Playground/index.js (100%) rename @stellar/{design-system-website__docusaurus => design-system-website}/src/theme/Playground/styles.module.css (100%) delete mode 100644 @stellar/design-system-website/src/types/types.ts rename @stellar/{design-system-website__docusaurus => design-system-website}/static/.nojekyll (100%) rename @stellar/{design-system-website__docusaurus => design-system-website}/static/img/docusaurus-social-card.jpg (100%) rename @stellar/{design-system-website__docusaurus => design-system-website}/static/img/docusaurus.png (100%) rename @stellar/{design-system-website__docusaurus => design-system-website}/static/img/favicon.ico (100%) rename @stellar/{design-system-website__docusaurus => design-system-website}/static/img/logo.svg (100%) rename @stellar/{design-system-website__docusaurus => design-system-website}/static/img/undraw_docusaurus_mountain.svg (100%) rename @stellar/{design-system-website__docusaurus => design-system-website}/static/img/undraw_docusaurus_react.svg (100%) rename @stellar/{design-system-website__docusaurus => design-system-website}/static/img/undraw_docusaurus_tree.svg (100%) delete mode 100644 @stellar/design-system-website/webpack.common.js delete mode 100644 @stellar/design-system-website/webpack.dev.js delete mode 100644 @stellar/design-system-website/webpack.prod.js delete mode 100644 @stellar/design-system-website__docusaurus/README.md delete mode 100644 @stellar/design-system-website__docusaurus/babel.config.js delete mode 100644 @stellar/design-system-website__docusaurus/package.json delete mode 100644 @stellar/design-system-website__docusaurus/tsconfig.json diff --git a/@stellar/design-system-website__docusaurus/.gitignore b/@stellar/design-system-website/.gitignore similarity index 100% rename from @stellar/design-system-website__docusaurus/.gitignore rename to @stellar/design-system-website/.gitignore diff --git a/@stellar/design-system-website/README.md b/@stellar/design-system-website/README.md index 3c67f5b6..7533c99d 100644 --- a/@stellar/design-system-website/README.md +++ b/@stellar/design-system-website/README.md @@ -1,3 +1,45 @@ # Stellar Design System Website -TODO +This website is built using [Docusaurus 2](https://docusaurus.io/), a modern +static website generator. + +### Installation + +``` +$ yarn +``` + +### Local Development + +``` +$ yarn start +``` + +This command starts a local development server and opens up a browser window. +Most changes are reflected live without having to restart the server. + +### Build + +``` +$ yarn build +``` + +This command generates static content into the `build` directory and can be +served using any static contents hosting service. + +### Deployment + +Using SSH: + +``` +$ USE_SSH=true yarn deploy +``` + +Not using SSH: + +``` +$ GIT_USER= yarn deploy +``` + +If you are using GitHub pages for hosting, this command is a convenient way to +build the website and push to the `gh-pages` branch. diff --git a/@stellar/design-system-website/babel.config.js b/@stellar/design-system-website/babel.config.js index c742e964..bfd75dbd 100644 --- a/@stellar/design-system-website/babel.config.js +++ b/@stellar/design-system-website/babel.config.js @@ -1,22 +1,3 @@ module.exports = { - presets: [ - "@babel/preset-react", - "@babel/preset-typescript", - [ - "@babel/preset-env", - { - targets: { - browsers: "last 2 versions", - }, - modules: false, - loose: false, - }, - ], - ], - plugins: ["transform-class-properties", "react-hot-loader/babel"], - env: { - test: { - plugins: ["transform-es2015-modules-commonjs"], - }, - }, + presets: [require.resolve("@docusaurus/core/lib/babel/preset")], }; diff --git a/@stellar/design-system-website__docusaurus/docs/intro.md b/@stellar/design-system-website/docs/intro.md similarity index 100% rename from @stellar/design-system-website__docusaurus/docs/intro.md rename to @stellar/design-system-website/docs/intro.md diff --git a/@stellar/design-system-website__docusaurus/docs/tutorial-basics/_category_.json b/@stellar/design-system-website/docs/tutorial-basics/_category_.json similarity index 100% rename from @stellar/design-system-website__docusaurus/docs/tutorial-basics/_category_.json rename to @stellar/design-system-website/docs/tutorial-basics/_category_.json diff --git a/@stellar/design-system-website__docusaurus/docs/tutorial-basics/congratulations.md b/@stellar/design-system-website/docs/tutorial-basics/congratulations.md similarity index 100% rename from @stellar/design-system-website__docusaurus/docs/tutorial-basics/congratulations.md rename to @stellar/design-system-website/docs/tutorial-basics/congratulations.md diff --git a/@stellar/design-system-website__docusaurus/docs/tutorial-basics/create-a-blog-post.md b/@stellar/design-system-website/docs/tutorial-basics/create-a-blog-post.md similarity index 100% rename from @stellar/design-system-website__docusaurus/docs/tutorial-basics/create-a-blog-post.md rename to @stellar/design-system-website/docs/tutorial-basics/create-a-blog-post.md diff --git a/@stellar/design-system-website__docusaurus/docs/tutorial-basics/create-a-document.md b/@stellar/design-system-website/docs/tutorial-basics/create-a-document.md similarity index 100% rename from @stellar/design-system-website__docusaurus/docs/tutorial-basics/create-a-document.md rename to @stellar/design-system-website/docs/tutorial-basics/create-a-document.md diff --git a/@stellar/design-system-website__docusaurus/docs/tutorial-basics/create-a-page.md b/@stellar/design-system-website/docs/tutorial-basics/create-a-page.md similarity index 100% rename from @stellar/design-system-website__docusaurus/docs/tutorial-basics/create-a-page.md rename to @stellar/design-system-website/docs/tutorial-basics/create-a-page.md diff --git a/@stellar/design-system-website__docusaurus/docs/tutorial-basics/deploy-your-site.md b/@stellar/design-system-website/docs/tutorial-basics/deploy-your-site.md similarity index 100% rename from @stellar/design-system-website__docusaurus/docs/tutorial-basics/deploy-your-site.md rename to @stellar/design-system-website/docs/tutorial-basics/deploy-your-site.md diff --git a/@stellar/design-system-website__docusaurus/docs/tutorial-basics/markdown-features.mdx b/@stellar/design-system-website/docs/tutorial-basics/markdown-features.mdx similarity index 100% rename from @stellar/design-system-website__docusaurus/docs/tutorial-basics/markdown-features.mdx rename to @stellar/design-system-website/docs/tutorial-basics/markdown-features.mdx diff --git a/@stellar/design-system-website__docusaurus/docs/tutorial-extras/_category_.json b/@stellar/design-system-website/docs/tutorial-extras/_category_.json similarity index 100% rename from @stellar/design-system-website__docusaurus/docs/tutorial-extras/_category_.json rename to @stellar/design-system-website/docs/tutorial-extras/_category_.json diff --git a/@stellar/design-system-website__docusaurus/docs/tutorial-extras/img/docsVersionDropdown.png b/@stellar/design-system-website/docs/tutorial-extras/img/docsVersionDropdown.png similarity index 100% rename from @stellar/design-system-website__docusaurus/docs/tutorial-extras/img/docsVersionDropdown.png rename to @stellar/design-system-website/docs/tutorial-extras/img/docsVersionDropdown.png diff --git a/@stellar/design-system-website__docusaurus/docs/tutorial-extras/img/localeDropdown.png b/@stellar/design-system-website/docs/tutorial-extras/img/localeDropdown.png similarity index 100% rename from @stellar/design-system-website__docusaurus/docs/tutorial-extras/img/localeDropdown.png rename to @stellar/design-system-website/docs/tutorial-extras/img/localeDropdown.png diff --git a/@stellar/design-system-website__docusaurus/docs/tutorial-extras/manage-docs-versions.md b/@stellar/design-system-website/docs/tutorial-extras/manage-docs-versions.md similarity index 100% rename from @stellar/design-system-website__docusaurus/docs/tutorial-extras/manage-docs-versions.md rename to @stellar/design-system-website/docs/tutorial-extras/manage-docs-versions.md diff --git a/@stellar/design-system-website__docusaurus/docs/tutorial-extras/translate-your-site.md b/@stellar/design-system-website/docs/tutorial-extras/translate-your-site.md similarity index 100% rename from @stellar/design-system-website__docusaurus/docs/tutorial-extras/translate-your-site.md rename to @stellar/design-system-website/docs/tutorial-extras/translate-your-site.md diff --git a/@stellar/design-system-website__docusaurus/docusaurus.config.js b/@stellar/design-system-website/docusaurus.config.js similarity index 100% rename from @stellar/design-system-website__docusaurus/docusaurus.config.js rename to @stellar/design-system-website/docusaurus.config.js diff --git a/@stellar/design-system-website/package.json b/@stellar/design-system-website/package.json old mode 100755 new mode 100644 index 0142201b..82642538 --- a/@stellar/design-system-website/package.json +++ b/@stellar/design-system-website/package.json @@ -4,88 +4,46 @@ "author": "Stellar Development Foundation ", "description": "Stellar Development Foundation’s design system website", "license": "Apache-2.0", - "engines": { - "node": ">=18.0.0" - }, "scripts": { - "git-info": "rm -rf src/generated/ && mkdir src/generated/ && echo export default \"{\\\"commitHash\\\": \\\"$(git rev-parse --short HEAD)\\\"};\" > src/generated/gitInfo.ts", - "start": "yarn git-info && webpack serve --open --config webpack.dev.js", - "build": "yarn git-info && NODE_ENV=production webpack --config webpack.prod.js", - "test": "react-scripts test", - "eject": "react-scripts eject", - "lint-tsc": "tsc --noEmit" + "docusaurus": "docusaurus", + "start": "docusaurus start", + "build": "docusaurus build", + "swizzle": "docusaurus swizzle", + "deploy": "docusaurus deploy", + "clear": "docusaurus clear", + "serve": "docusaurus serve", + "write-translations": "docusaurus write-translations", + "write-heading-ids": "docusaurus write-heading-ids", + "lint-tsc": "tsc --noEmit", + "git-info": "rm -rf src/generated/ && mkdir src/generated/ && echo export default \"{\\\"commitHash\\\": \\\"$(git rev-parse --short HEAD)\\\"};\" > src/generated/gitInfo.ts" }, "dependencies": { + "@docusaurus/core": "2.4.1", + "@docusaurus/preset-classic": "2.4.1", + "@docusaurus/theme-live-codeblock": "^2.4.1", + "@mdx-js/react": "^1.6.22", "@stellar/design-system": "^1.0.0-beta.14", - "@svgr/webpack": "^6.5.1", - "assert": "^2.0.0", - "buffer": "^6.0.3", - "crypto-browserify": "^3.12.0", - "https-browserify": "^1.0.0", - "lodash": "^4.17.21", - "os-browserify": "^0.3.0", + "clsx": "^1.2.1", "prism-react-renderer": "^1.3.5", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-element-to-jsx-string": "^15.0.0", - "react-router-dom": "^6.8.0", - "stream-browserify": "^3.0.0", - "stream-http": "^3.2.0", - "tslib": "^2.5.0", - "typescript": "~4.9.5", - "url": "^0.11.0" + "react": "^17.0.2", + "react-dom": "^17.0.2" }, "devDependencies": { - "@babel/core": "^7.20.12", - "@babel/preset-env": "^7.20.2", - "@babel/preset-react": "^7.18.6", - "@babel/preset-typescript": "^7.18.6", - "@testing-library/jest-dom": "^5.16.5", - "@testing-library/react": "^13.4.0", - "@testing-library/user-event": "^14.4.3", - "@types/jest": "^29.4.0", - "@types/lodash": "^4.14.191", - "@types/node": "^18.11.18", - "@types/react": "^18.0.27", - "@types/react-dom": "^18.0.10", - "@types/react-router-dom": "^5.3.3", - "babel-loader": "^9.1.2", - "babel-plugin-transform-class-properties": "^6.24.1", - "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2", - "clean-webpack-plugin": "^4.0.0", - "concurrently": "^7.6.0", - "copy-webpack-plugin": "^11.0.0", - "css-loader": "^6.7.3", - "eslint": "^8.33.0", - "eslint-config-prettier": "^8.6.0", - "eslint-config-react": "^1.1.7", - "eslint-config-react-app": "^7.0.1", - "eslint-import-resolver-typescript": "^3.5.3", + "@docusaurus/module-type-aliases": "2.4.1", + "@tsconfig/docusaurus": "^1.0.5", + "eslint": "^8.44.0", + "eslint-config-prettier": "^8.8.0", "eslint-plugin-import": "^2.27.5", "eslint-plugin-jsx-a11y": "^6.7.1", + "eslint-plugin-mdx": "^2.1.0", "eslint-plugin-react": "^7.32.2", "eslint-plugin-react-hooks": "^4.6.0", - "eslint-webpack-plugin": "^3.2.0", - "fork-ts-checker-webpack-plugin": "^7.3.0", - "html-webpack-plugin": "^5.5.0", - "husky": "^8.0.3", - "lint-staged": "^13.1.0", - "mini-css-extract-plugin": "^2.7.2", - "npm-run-all": "^4.1.5", - "prettier": "^2.8.3", - "pretty-quick": "^3.1.3", - "react-hot-loader": "^4.13.1", - "sass-loader": "^13.2.0", - "style-loader": "^3.3.1", - "ts-loader": "^9.4.2", - "tsconfig-paths-webpack-plugin": "^4.0.0", - "webpack": "^5.75.0", - "webpack-cli": "^5.0.1", - "webpack-dev-server": "^4.11.1" + "eslint-webpack-plugin": "^4.0.1", + "typescript": "^4.7.4" }, "browserslist": { "production": [ - ">0.2%", + ">0.5%", "not dead", "not op_mini all" ], @@ -94,5 +52,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "engines": { + "node": ">=18.0.0" } } diff --git a/@stellar/design-system-website/public/favicon.ico b/@stellar/design-system-website/public/favicon.ico deleted file mode 100644 index 4f17c94a834735ea04cf72bff9589bf3f0a8bbcd..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 7406 zcmeI02T)Yk8pr=j?<@-}uz<9stjmIgm8B`gf^-lRMWZM|0l_P1Ac9H}u-vCUL5x_j zqX-tF*fn)hCsi{^Y?<`ldwb`*?82`2GRe%FH}mFkW_IuS&iVf5o;~;MJ>TyGL@>sf zF<@5_~MIjcX!A8@4t_uM~`Ch;>Gywx8LySqmLpvIT^OL zw%ECICkhG*AeYPW#TQ?oudff))zyfJiNUkaK8v^Cej7jj_#-Y}yombxdQ6-+5f&B} zc=gp+F>BT=czJo@W4PJl!b?n%& z19Rujg`b}vKL7l4oH}(1(b3U(=9y=(VZ#PwXJ^CN*%^24+`)kZ2T)vGj30jZ0d;kC zm@r`i%+1ZQb?a7q^wCGCsHngbPdtIOYuB>pCdONDy@fq{_Mot^5P^Y#`1c&Ah(sbh|NQgF&CP|Yt1I4l=N%kAd>Emjq4@ddpK8Chx;slm0TZYKUNH{t=;?}KO*tc&VzWeSwoI7_82?+@> zH8sUcFTI2EE?6Jqt($a#IloZ(6+2M^h z-oUP1yD)FwJbd}(mxzsx9r`1T)J9g|KfeO)UTNy4CUu%u`(GJbtVyuzXwA!O?XXMG zu$THhN{mmAu2o!Dqu>XNqNeU%3g@D%e|8Cq2O2$?v*RXDx%})rM^@!bFu7Te< zHZ_tdy4+n%j+@0LcJ}smx;j_1B=LM-U9axux~pU>8`b1&XaQ?*J)fv+1{U3agx$@5 zn84L$FDaIsyfEZDP}?!CpLd)-d`fHlllysIG5TSzyA<2D_w#){hK;IDW{(-ai7E1q zO`T%cxorW@?;2PQUB~iu8m4Hkni0hm4Q*uTl^s!hl98Sb#5Ht3G|HSQd@EKmMR&$| zW(<|n9(>@6A(Q!c^L*@mdsIyEz_}o{>ao_9%+QrZF1(^vXV7&;gd1}zk~QT6B@+7% zG9H=93~f>J{48BvxVB$SWjLe1>ZM zgI3JxfVW!86lW~M$hc%Hh4dh=*fZR}7t+I*s+m)m<(YUus!ln;46A+XRm1%=V|mX` zHbifxLppO>dtx$E^e&%I^4TdNd|ngl)GM3a_)V^Y-MnSm73S1eYFxq;SC9HJgOzeU zXI9;q#XCA{oARB@TA9a$?0TkXE*6oTUlw4vNoVnV#o!S6!H*O%pNcJt$`_`R_|wu&JD7|2EARoc>dTTgC@n;zRkHDW9X{2{=)nGF5TZdFYXeLm?JCjzqA5D zY_i_$6VE<_oNB@hUD4xIit~vLh#iSJiNAa4 zB)%dxAr>OOBnBa_B`zeUBF-izA?_r8B~~P6BGzngZxFxQ7^;7?F7L>eZ_P zTM^3;M-d~pwY3Rs9vmEurluym@WKlMrxWiIHxv62I}&#ia}kdd!$0@jbLi>m5g3g4 zkC=YbrcDAv5oZ#Y5la!D6W0^t66XTOjcFV|hWCi{UE1;Ii)WdG03smB!TTM$ym}WKIFd!@RQz@B7HnuvQTP_wa z=hDMPGQB}$2@BFPl<<{?=4Shwn)+MiHj0b%;(T>ZDHk)xrAod+8+47X8^;;xIV4Jo zeYm8Gg+nuQN#RBf-l8hnDRIiod@d`ha?rzNTzZ3U3bV`0CluDNn4HBqWJcF(TjN8j zS81zq4{mO%oxHxX#)5MzupICh?PzAK?T7WuM$X&WvrO$()Wnr8l?Wc$+)#eSH;ju3 zSrD*9sh%ON<(9?HV=K0pORdrk;8dO0pjg8NKBQ4rnVN)hE3->rpBFw`*FQU4oPm<; zm0YNaX_ZnF5y-7ki1MnPbp2JSoIj8_FLoJME1jWME(ur=62pc0>iQAOSy8=S66C`* z6?v)4Jn#4BCb~}5IT)Me4yZoSx4|I)ZwAFFlw0v;pTRgqFE(L~LZRFy6*{l!?4+}ua^#fr zrF<@(;S_u9-n|>Iyz+{W7o|Ka#Wi%kQfxr^UCMFNIZt`!oSYn7xNt$pky6YSj0E(ZfRKDKZ_SCWo=s zQX9FKA5@_(Mr0dBhN}GiyyQ00ps{4DrKTcJnT3brXgfDoW`{dDu+)%_%@RVE@Ut;cEPS>t7Ag08sz{ diff --git a/@stellar/design-system-website/public/logo192.png b/@stellar/design-system-website/public/logo192.png deleted file mode 100644 index 476ff8d02ec31c87b274f5e06efa3d8df9d56b9e..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3843 zcmZ`+cTm$^v;Kt^0)(mpk&;&tP${89KnOiZktRi@*C1l7w-odKPjx}iD%R1ukv9q7+|xD(pc5C9$v0{}h}04Qfy_+l1!<9_)?_P5El#uM|d^Bz3Is#_I)u+KS@EY zzD}%yl-pg9z*qG=KT8K!w-ah;Z{|9;?3I%iDvQK*q>c|FxUWK#2Lo?G_$3YXHruCG zy1Oy;0*mJ!ESsjTd$OfDsvH{QJT(efyM%?p<73|qc-)l^a3{+5Z(N+3lzTAU|LMoB zc*)3ae!fL>8AvN^?!>LZUx@!LV^@39RYT=vN_U)vksQt{qbdUm?zJIbt?25Wx|y^F`C%|*YzaI+H>Q{PrH>MHKpGZw%9o&FCB z#Q#LVy;iax6hmxVd{JL}Cgr&M?diMXJ|m zHV?Hvb((H@mdV|)lxWTWGE-u9D*oK*1%1=-l;LdeDbD4_QBq~T#5Mi#Os;p|JxrwE z+BVk@WSqk$cFE*AHa=3y&zPP$K%!3D4*0u=xC0Cdc_i-`6#tdCB^ig8oFd*c>q!l- zv)57&Ie4j_zidIvZr&?K7W&ziIxFM{dNsK^)lR+JdxEFmljes>SF^lLnI?uvWWDRT zJaRcFBX$%7=XEPoOSY-TxwTI(Kw`zY;N_)tT$=1z0SWJ(7;JQo=k%=I!kxK>Xc$g~;1$ zY5Oxq(|ErCID3`JHi(-!ISLhye4I(IN*tO}TUk@!<9Cnk8MIUk1*~UnT9p{Z;$Z=^ z9-{re{`S%h&PVY#u+%7HuoX{AAOsiL-P#XYG3wB=pf0IDmcvZ2-(P9}=w7n5N>;^w{;5z^0YNH7+qYE3M185d3uLX05}E>*9=eRH4eYS^o4b0qSob;D@)1U=W82BTB7 zh3aM0z+><_)ySl8xJTzpyTiiPLF@Tv9F`SbNa`h3_O0OzQzF6Cnk>kMshNT&j5$*1 z(LB?2JVQ1oMQp;a*miy(&5oM4F|hsymcg)wAN;6A^I$5yXxxVoieBR-b%DfV%3F-= zFl=hx)N0^;DMK01JQK=vPBgtfEUyavmC0I1TZWanBW$@GX=a@+m;R~79bE|JWqg_? z+q010HoET_ZJ=stEryqRt6s41oTV7#N2~^@O`1Ej zi3xNTb~i22)?!F0n8^i0$<>pjwk=Wm0642}UfYCEo^aeVA_IeJ5{E9}Ql^#;3N2)mK(sNU-<92ui=Y*LWAW8$0 za1<}$>vk;v2Y|}sjc1aeR7c^~`FzS1`7-PRx0%mtENNB33ZySG*>0TtARnrnxBNBi zKahd$k!w1PL#hmqJ&AqvG`40<2OgxoKyxQW70_$M=hDt(K3*2-1DB$eJ%Iu>x$)4I z&w*DtxoN#Mc-j_4#j*Xh#QeEY*0ucQFGXKgU)&W>tWu7)Gj8uvK~mu7^%}P}7k15y zCA@6C%StmddLCS=ODM?C-JwTmfB&^M1yJ|i+>z!nZz633DCR;lqR1YL=eJrd9A7up_QZT6d4-Gpl(o%TiBlG!sas94zMc(_ zIV$%TrR=_tH*hOb{m|e+RQ7whH5bHOinA*8Y~gvHeri3H6MVSHDfEN>Sz?(us_JAj zh@>;MS1p7;p`zr6a$Vg>73x{b3Iw@H6uOY`#8U8NFyr>2vzl|W)vo~p`4~R-q-4 z)TGM5W0Zot!;J2hVU`zpyJE;Kw21Sg=4i(OWyI6F?v0~LHH$bpK73hvNET>$=@c2c z#_7RIQEyiifWlc@&0$6qT237z%Tnm;DL#(K8W#b+%CAa*nG}B*6Q_=*%?H6Uv_)aD zgb(&cVQ2Uy(#0&g5wu8cof~C7{SgGSp zU)AT&VB5aKth-5l$V*(+QbQ8?^B{D*0NaG@HbOg(b)z z`I!dAr1X|<=vGI4l~Y6}r1n9n*CsrM?xqM{*`tFc=;*IT;m%KH51QpIOp@}q-g6GS z%cOBNw~ux&67Kk*ia9B~bHJslswC_pvIUW(2NRa>VuoN?p2~rJvlAv)2)a z+Cb0TBFNr(uCS-=T`7}3?H7uk04FPLV1GxoP(NB%=(4^z>SnMzs!~X#v?&9#gWgSW zlfq{?13mN?@8!+W-jbf>UIIcj$?|{d#9VRAQ9t$XU?Z4E`h2d)B6*O%4@+|L5U=8z zE77Mo_!FCqPlJXT?^Odou<=r&SXHR>!|qT=@7*td59$k!SUK0!K~fVp0zNtDnjY`- zoptK<^~#gu^1IlXx=-sR@fQzrs;S;6jxOdo?hACt-yVXcLz!M6f166-10DCdW8W>s z`nM09F&NMBcbc=?%nDg(97E2eup#^?K70Ul`0tBty~MtH+XVj`xLO+-`JgQ5L_7~_ zD*0_B6^_lO{SBqUM4QcO=t%4Bk}Vf~@_?p%V(ZoPQ@`ws-TSs3;ROg+Sfz)LC>dYy!Qr6=_Mwh`6R@ytC8}#Dp*l@jNH4n=MyM5vtH6${*PD3-1Z@(8u!}x?)D+KvEq9P zXiU4>tYBkU%-RELXqfmb9IDN4h;k-vq_$%qmJ&LIP1bvh`%%Yunh1ph5wZWEkN#IN zJw66Y6oxG8e=dce$+#>2+E)I~4*o7kr-v?Q07xUG5#k6%afH0NloC?r-*p`!jYJ^Q zXH~KPhv4b$jBySA?}U|zsJ1hL)`7E_u|oc bHzj~oZVvw)4Y`!F6o8(#k=APs`-uMm+|?z~ diff --git a/@stellar/design-system-website/public/logo512.png b/@stellar/design-system-website/public/logo512.png deleted file mode 100644 index 41427a2f0ee6dae7d1a19bde8b4699badc7022e9..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 11240 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 XUl6;W%L%0-RRF4rnhKS2AA|o7lzflw diff --git a/@stellar/design-system-website/public/manifest.json b/@stellar/design-system-website/public/manifest.json deleted file mode 100644 index de1f080f..00000000 --- a/@stellar/design-system-website/public/manifest.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "short_name": "Design System", - "name": "Stellar Design System", - "icons": [ - { - "src": "favicon.ico", - "sizes": "64x64 32x32 24x24 16x16", - "type": "image/x-icon" - }, - { - "src": "logo192.png", - "type": "image/png", - "sizes": "192x192" - }, - { - "src": "logo512.png", - "type": "image/png", - "sizes": "512x512" - } - ], - "start_url": ".", - "display": "standalone", - "theme_color": "#000000", - "background_color": "#ffffff" -} diff --git a/@stellar/design-system-website/public/robots.txt b/@stellar/design-system-website/public/robots.txt deleted file mode 100644 index e9e57dc4..00000000 --- a/@stellar/design-system-website/public/robots.txt +++ /dev/null @@ -1,3 +0,0 @@ -# https://www.robotstxt.org/robotstxt.html -User-agent: * -Disallow: diff --git a/@stellar/design-system-website__docusaurus/sidebars.js b/@stellar/design-system-website/sidebars.js similarity index 100% rename from @stellar/design-system-website__docusaurus/sidebars.js rename to @stellar/design-system-website/sidebars.js diff --git a/@stellar/design-system-website/src/App.tsx b/@stellar/design-system-website/src/App.tsx deleted file mode 100644 index 3d703321..00000000 --- a/@stellar/design-system-website/src/App.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import { useMemo, useState, useLayoutEffect, useEffect } from "react"; -import { Routes, Route } from "react-router-dom"; -import { Layout } from "@stellar/design-system"; - -import { Landing } from "pages/Landing"; -import { ComponentDetails } from "pages/ComponentDetails"; -import { SideNavContext } from "context/SideNav"; -import { - BREAKPOINT_SMALL, - CSS_CLASS_SMALL_SCREEN, - CSS_CLASS_SIDE_NAV_OPEN_TRIGGER, - CSS_CLASS_SIDE_NAV_OPEN, - CSS_CLASS_DISABLE_BODY_SCROLL, -} from "constants/variables"; - -import "styles.scss"; - -export const App = () => { - const [sideNavState, setSideNavState] = useState({ - isEnabled: false, - isOpen: false, - }); - const sideNavStateValue = useMemo( - () => ({ sideNavState, setSideNavState }), - [sideNavState, setSideNavState], - ); - - // Handle media query for small/large page UI - useLayoutEffect(() => { - const mediaQuery = window.matchMedia(`(max-width: ${BREAKPOINT_SMALL}px)`); - - const handleMediaQuery = () => { - if (mediaQuery.matches) { - document.body.classList.add(CSS_CLASS_SMALL_SCREEN); - } else { - document.body.classList.remove( - CSS_CLASS_SMALL_SCREEN, - CSS_CLASS_SIDE_NAV_OPEN_TRIGGER, - CSS_CLASS_SIDE_NAV_OPEN, - CSS_CLASS_DISABLE_BODY_SCROLL, - ); - } - }; - - handleMediaQuery(); - mediaQuery.addEventListener("change", handleMediaQuery); - - return () => { - mediaQuery.removeEventListener("change", handleMediaQuery); - }; - }, []); - - // Handle SideNav open/close state - useEffect(() => { - if (sideNavState.isOpen) { - document.body.classList.add( - CSS_CLASS_SIDE_NAV_OPEN_TRIGGER, - CSS_CLASS_SIDE_NAV_OPEN, - CSS_CLASS_DISABLE_BODY_SCROLL, - ); - } else { - document.body.classList.remove( - CSS_CLASS_SIDE_NAV_OPEN, - CSS_CLASS_DISABLE_BODY_SCROLL, - ); - - const delay = setTimeout(() => { - document.body.classList.remove(CSS_CLASS_SIDE_NAV_OPEN_TRIGGER); - clearTimeout(delay); - }, 300); - } - }, [sideNavState.isOpen]); - - const toggleSideNav = (isOpen: boolean) => { - setSideNavState({ - isEnabled: sideNavState.isEnabled, - isOpen, - }); - }; - - return ( - - toggleSideNav(true), - }} - /> - - - - } /> - - - } - /> - - {/* TODO: add 404 */} - - - - - - ); -}; diff --git a/@stellar/design-system-website/src/components/ComponentsList/index.tsx b/@stellar/design-system-website/src/components/ComponentsList/index.tsx deleted file mode 100644 index 7ada4a26..00000000 --- a/@stellar/design-system-website/src/components/ComponentsList/index.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { Icon } from "@stellar/design-system"; -import { useNavigate } from "react-router-dom"; -import { componentDetails } from "constants/componentDetails"; -import { componentsInDisplayOrder } from "constants/componentsInDisplayOrder"; -import { Routes } from "types/types"; -import "./styles.scss"; - -export const ComponentsList = () => { - const navigate = useNavigate(); - - const goToComponentDetails = (componentId: string) => { - navigate(`/${Routes.component}/${componentId}`); - }; - - return ( -
- {componentsInDisplayOrder.map((key) => { - const comp = componentDetails[key.id]; - - if (!comp) { - return null; - } - - return ( -
goToComponentDetails(comp.id)} - role="button" - > -
- {comp.title} - -
-

{comp.shortDescription}

-
- ); - })} -
- ); -}; diff --git a/@stellar/design-system-website/src/components/ComponentsList/styles.scss b/@stellar/design-system-website/src/components/ComponentsList/styles.scss deleted file mode 100644 index df51ecb5..00000000 --- a/@stellar/design-system-website/src/components/ComponentsList/styles.scss +++ /dev/null @@ -1,38 +0,0 @@ -.ComponentsList { - margin-top: 1.5rem; - display: grid; - grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); - gap: 1.5rem; -} - -.ComponentCard { - border: 1px solid var(--color-gray-30); - background-color: var(--color-gray-10); - overflow: hidden; - height: 8rem; - padding: 1.5rem 1rem; - border-radius: 0.5rem; - cursor: pointer; - transition: border-color var(--anim-transition-default); - - @media (hover: hover) { - &:hover { - border-color: var(--color-gray-40); - } - } - - &__title { - font-weight: var(--font-weight-medium); - margin-bottom: 0.5rem; - display: flex; - align-items: center; - color: var(--color-gray-90); - - svg { - width: 1rem; - height: 1rem; - fill: var(--color-gray-90); - margin-left: 0.4rem; - } - } -} diff --git a/@stellar/design-system-website/src/components/Details/index.tsx b/@stellar/design-system-website/src/components/Details/index.tsx deleted file mode 100644 index 5c1b85d2..00000000 --- a/@stellar/design-system-website/src/components/Details/index.tsx +++ /dev/null @@ -1,263 +0,0 @@ -import { Heading, Link, Title } from "@stellar/design-system"; -import React from "react"; -import { ElementCode } from "components/ElementCode"; -import { componentDetails } from "constants/componentDetails"; -import { - ComponentExample, - ComponentProp, - ComponentDetailsId, - ComponentExternalProps, -} from "types/types"; - -import "./styles.scss"; - -export const Details = ({ - componentId, -}: { - componentId: ComponentDetailsId; -}) => { - if (!componentId || !componentDetails[componentId]) { - return ( -

- Component {componentId} does not exist. -

- ); - } - - const { - title, - description, - examples, - props, - externalProps, - notes, - subComponents, - } = componentDetails[componentId]; - - const renderPropType = (type: string[]) => - type.map((item, index) => ( - // eslint-disable-next-line react/no-array-index-key - {item} - )); - - const renderPropsTable = ( - renderProps: ComponentProp[], - renderExternalProps?: ComponentExternalProps, - ) => ( - <> -
- - - - - - - - - - - - {renderProps.map((componentProp, index) => { - if (componentProp.heading) { - return ( - - - - ); - } - - return ( - // eslint-disable-next-line react/no-array-index-key - - - - - - - - ); - })} - -
PropTypeDefaultOptionalDescription
- {componentProp.heading} -
- {componentProp.prop} - - {renderPropType(componentProp.type)} - - {componentProp.default ? ( - {componentProp.default} - ) : null} - {componentProp.optional ? "Yes" : null}{componentProp.description ?? null}
-
- {renderExternalProps?.link ? ( -
- Including all valid{" "} - - {renderExternalProps.label || "attributes"} - -
- ) : null} - - ); - - const renderExample = ( - components: React.ReactNode[], - options?: { - previewExampleOverride?: React.ReactNode[]; - useGridLayout?: boolean; - }, - ) => { - const { previewExampleOverride, useGridLayout } = options || {}; - - if (useGridLayout) { - return ( -
- {components.map((component, index) => ( -
-
- {previewExampleOverride?.[index] - ? previewExampleOverride[index] - : component} -
-
- -
-
- ))} -
- ); - } - - return components.map((component, index) => ( - // eslint-disable-next-line react/no-array-index-key -
-
-
- {previewExampleOverride?.[index] - ? previewExampleOverride[index] - : component} -
-
-
- -
-
- )); - }; - - return ( - <> - {/* heading */} -
- - {title} - - - {/* description */} -

{description}

-
- - {/* examples */} -
- - Examples - - - {examples.map((example: ComponentExample, index) => { - const { - title: exampleTitle, - description: exampleDescription, - component, - previewExampleOverride, - useGridLayout, - } = example; - - return ( - // eslint-disable-next-line react/no-array-index-key -
- {exampleTitle ? ( - - {exampleTitle} - - ) : null} - {exampleDescription ?

{exampleDescription}

: null} - - {renderExample(component, { - previewExampleOverride, - useGridLayout, - })} -
- ); - })} -
- - {/* props */} - {props.length ? ( -
- - Props - - {renderPropsTable(props, externalProps)} -
- ) : null} - - {/* sub-components */} - {subComponents?.components.length ? ( -
- - Sub-components - - -

{subComponents.description}

- - {subComponents.components.map((sub, index) => ( - // eslint-disable-next-line react/no-array-index-key -
- - {sub.component} - - -

{sub.description}

- - {renderPropsTable(sub.props)} - - {sub.notes ? ( -
- - Notes - - - {sub.notes.map((note, idx) => ( - // eslint-disable-next-line react/no-array-index-key - - {note} - - ))} -
- ) : null} -
- ))} -
- ) : null} - - {/* notes */} - {notes?.length ? ( -
- - Notes - - - {notes.map((note: React.ReactNode, index) => ( - // eslint-disable-next-line react/no-array-index-key - {note} - ))} -
- ) : null} - - ); -}; diff --git a/@stellar/design-system-website/src/components/Details/styles.scss b/@stellar/design-system-website/src/components/Details/styles.scss deleted file mode 100644 index 2302c4af..00000000 --- a/@stellar/design-system-website/src/components/Details/styles.scss +++ /dev/null @@ -1,109 +0,0 @@ -.Details { - &__example { - --Details-example-container-radius: 0.25rem; - - &__container { - display: block; - - &:not(:last-child) { - margin-bottom: 1rem; - } - - @media (min-width: 900px) { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1rem; - } - } - - &__details { - background-color: var(--color-gray-10); - padding: 1rem; - display: flex; - flex-direction: column; - border-top-left-radius: var(--Details-example-container-radius); - border-top-right-radius: var(--Details-example-container-radius); - - @media (min-width: 900px) { - border-radius: var(--Details-example-container-radius); - } - } - - &__component { - display: flex; - flex: 1; - justify-content: flex-start; - align-items: center; - flex-wrap: wrap; - } - - &__code { - background-color: #292d3e; - display: flex; - flex-wrap: wrap; - flex-direction: column; - overflow-x: auto; - justify-content: center; - border-bottom-left-radius: var(--Details-example-container-radius); - border-bottom-right-radius: var(--Details-example-container-radius); - - @media (min-width: 900px) { - border-radius: var(--Details-example-container-radius); - } - } - } - - &__grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); - gap: 1rem; - - &__container { - background-color: var(--color-gray-20); - border-radius: var(--Details-example-container-radius); - height: 10rem; - overflow: hidden; - display: flex; - flex-direction: column; - } - - &__icon { - flex: 1; - display: flex; - align-items: center; - justify-content: center; - padding: 2rem 1rem; - - svg { - width: auto; - height: 1.5rem; - fill: var(--color-gray-90); - } - } - - &__title { - padding: 1rem; - padding-top: 0; - padding-bottom: 1.5rem; - text-align: center; - color: var(--color-gray-70); - font-size: var(--font-size-secondary); - } - } -} - -td { - code { - word-break: normal; - } - - &.Table__props { - max-width: 18.75rem; - - code { - &:not(:last-child) { - margin-right: 0.5rem; - } - } - } -} diff --git a/@stellar/design-system-website/src/components/ElementCode/index.tsx b/@stellar/design-system-website/src/components/ElementCode/index.tsx deleted file mode 100644 index acc94c84..00000000 --- a/@stellar/design-system-website/src/components/ElementCode/index.tsx +++ /dev/null @@ -1,145 +0,0 @@ -import React from "react"; -import Highlight, { defaultProps, PrismTheme } from "prism-react-renderer"; -import reactElementToJSXString from "react-element-to-jsx-string"; - -import "./styles.scss"; - -interface ElementCodeProps { - element: React.ReactNode; - id: number; - displayNameOnly?: boolean; -} - -export const ElementCode = ({ - element, - id, - displayNameOnly, -}: ElementCodeProps) => { - if (displayNameOnly) { - return <>{reactElementToJSXString(element).replace(/<(.*) \/>/, "$1")}; - } - - return ( -
- - {({ className, style, tokens, getLineProps, getTokenProps }) => ( - 
-            {tokens.map((line, i) => (
-              

-                {i + 1}
-                {line.map((token, key) => (
-                  
-                ))}
-              

-            ))}
-
- )} - -
- ); -}; - -// TODO: update theme to match -const customTheme: PrismTheme = { - plain: { - backgroundColor: "#292d3e", - color: "#9a86fd", - }, - styles: [ - { - types: ["comment", "prolog", "doctype", "cdata", "punctuation"], - style: { - color: "#6c6783", - }, - }, - { - types: ["namespace"], - style: { - opacity: 0.7, - }, - }, - { - types: ["tag", "operator", "number"], - style: { - color: "#e09142", - }, - }, - { - types: ["property", "function"], - style: { - color: "#9a86fd", - }, - }, - { - types: ["tag-id", "selector", "atrule-id"], - style: { - color: "#eeebff", - }, - }, - { - types: ["attr-name"], - style: { - color: "#c4b9fe", - }, - }, - { - types: [ - "boolean", - "string", - "entity", - "url", - "attr-value", - "keyword", - "control", - "directive", - "unit", - "statement", - "regex", - "at-rule", - "placeholder", - "variable", - ], - style: { - color: "#ffcc99", - }, - }, - { - types: ["deleted"], - style: { - textDecorationLine: "line-through", - }, - }, - { - types: ["inserted"], - style: { - textDecorationLine: "underline", - }, - }, - { - types: ["italic"], - style: { - fontStyle: "italic", - }, - }, - { - types: ["important", "bold"], - style: { - fontWeight: "bold", - }, - }, - { - types: ["important"], - style: { - color: "#c4b9fe", - }, - }, - ], -}; diff --git a/@stellar/design-system-website/src/components/ElementCode/styles.scss b/@stellar/design-system-website/src/components/ElementCode/styles.scss deleted file mode 100644 index ce7d6089..00000000 --- a/@stellar/design-system-website/src/components/ElementCode/styles.scss +++ /dev/null @@ -1,16 +0,0 @@ -.ElementCode { - pre { - line-height: 1.4rem; - padding: 1rem; - margin: 0; - } - - &__line-number { - font-family: var(--font-family-monospace); - margin-right: 0.2rem; - opacity: 0.5; - width: 2rem; - display: inline-block; - user-select: none; - } -} diff --git a/@stellar/design-system-website__docusaurus/src/components/PreviewBlock/index.tsx b/@stellar/design-system-website/src/components/PreviewBlock/index.tsx similarity index 100% rename from @stellar/design-system-website__docusaurus/src/components/PreviewBlock/index.tsx rename to @stellar/design-system-website/src/components/PreviewBlock/index.tsx diff --git a/@stellar/design-system-website/src/components/SideNav/index.tsx b/@stellar/design-system-website/src/components/SideNav/index.tsx deleted file mode 100644 index e4b1f069..00000000 --- a/@stellar/design-system-website/src/components/SideNav/index.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import { useLayoutEffect, createRef, useState } from "react"; -import { NavButton, Icon } from "@stellar/design-system"; -import { debounce } from "lodash"; -import { componentsInDisplayOrder } from "constants/componentsInDisplayOrder"; -import { - CSS_CLASS_LAYOUT_CONTAINER, - BREAKPOINT_SMALL, -} from "constants/variables"; -import "./styles.scss"; - -interface SideNavProps { - activeItemId: string; - onClick: (id: string) => void; - onClose: () => void; -} - -export const SideNav = ({ activeItemId, onClick, onClose }: SideNavProps) => { - const sideNavRef = createRef(); - - const [containerOffsetTop, setContainerOffsetTop] = useState< - number | undefined - >(); - const [isSideNavFixed, setIsSideNavFixed] = useState(false); - - const scrollHandler = debounce(() => { - if (!containerOffsetTop) { - return; - } - - window.requestAnimationFrame(() => { - const isLargeScreen = window.matchMedia( - `(min-width: ${BREAKPOINT_SMALL}px)`, - ); - const isFixed = - isLargeScreen.matches && window.pageYOffset >= containerOffsetTop; - - setIsSideNavFixed(isFixed); - }); - }, 50); - - // Get and set offset top of the layout container - useLayoutEffect(() => { - if (sideNavRef?.current) { - const offsetTop = ( - sideNavRef?.current?.closest( - `.${CSS_CLASS_LAYOUT_CONTAINER}`, - ) as HTMLDivElement - )?.offsetTop; - setContainerOffsetTop(offsetTop || 0); - } - }, [sideNavRef]); - - // Handle scroll - useLayoutEffect(() => { - window.addEventListener("scroll", scrollHandler, true); - - return () => { - window.removeEventListener("scroll", scrollHandler, true); - }; - }, [scrollHandler]); - - const handleClick = (itemId: string) => { - onClick(itemId); - onClose(); - }; - - return ( -
-
- {componentsInDisplayOrder.map((item) => { - const isActive = activeItemId === item.id; - - return ( -
handleClick(item.id) })} - > - {item.label} -
- ); - })} -
- -
- } - /> -
-
- ); -}; diff --git a/@stellar/design-system-website/src/components/SideNav/styles.scss b/@stellar/design-system-website/src/components/SideNav/styles.scss deleted file mode 100644 index 17a77ec4..00000000 --- a/@stellar/design-system-website/src/components/SideNav/styles.scss +++ /dev/null @@ -1,54 +0,0 @@ -.SideNav { - width: calc(var(--SideNav-width) - 1rem); - // 8 rem is top + footer - height: calc(100% - 8rem); - overflow-y: auto; - position: relative; - top: 0; - transition: top var(--anim-transition-default); - - &--fixed { - position: fixed; - top: 1rem; - } - - @media (max-width: 600px) { - background-color: var(--color-gray-80); - width: var(--SideNav-width); - height: 100%; - } - - &__content { - @media (max-width: 600px) { - padding: 1.875rem 1rem; - } - } - - &__item { - font-size: 0.875rem; - line-height: 1.375rem; - color: var(--color-gray-90); - opacity: 0.4; - transition: opacity var(--anim-transition-default); - cursor: pointer; - margin-bottom: 0.75rem; - - &--active { - opacity: 1; - cursor: default; - font-weight: var(--font-weight-medium); - } - - @media (hover: hover) { - &:hover { - opacity: 1; - } - } - } - - &__close { - position: absolute; - top: 1rem; - right: 0.5rem; - } -} diff --git a/@stellar/design-system-website/src/constants/componentDetails.ts b/@stellar/design-system-website/src/constants/componentDetails.ts deleted file mode 100644 index 8c22d2f9..00000000 --- a/@stellar/design-system-website/src/constants/componentDetails.ts +++ /dev/null @@ -1,60 +0,0 @@ -import { assetIcons } from "constants/details/assetIcons"; -import { assets } from "constants/details/assets"; -import { avatars } from "constants/details/avatars"; -import { branding } from "constants/details/branding"; -import { badges } from "constants/details/badges"; -import { banners } from "constants/details/banners"; -import { buttons } from "constants/details/buttons"; -import { cards } from "constants/details/cards"; -import { checkboxes } from "constants/details/checkboxes"; -import { copyTexts } from "constants/details/copyTexts"; -import { iconButtons } from "constants/details/iconButtons"; -import { inputs } from "constants/details/inputs"; -import { layout } from "constants/details/layout"; -import { loaders } from "constants/details/loaders"; -import { modals } from "constants/details/modals"; -import { navButtons } from "constants/details/navButtons"; -import { notifications } from "constants/details/notifications"; -import { pagination } from "constants/details/pagination"; -import { profiles } from "constants/details/profiles"; -import { pieProgress } from "constants/details/pieProgress"; -import { radioButtons } from "constants/details/radioButtons"; -import { selects } from "constants/details/selects"; -import { tables } from "constants/details/tables"; -import { textareas } from "constants/details/textareas"; -import { links } from "constants/details/links"; -import { toggles } from "constants/details/toggles"; -import { tooltips } from "constants/details/tooltips"; -import { typography } from "constants/details/typography"; -import { ComponentDetailsList } from "types/types"; - -export const componentDetails: ComponentDetailsList = { - assetIcons, - assets, - avatars, - badges, - banners, - branding, - buttons, - cards, - checkboxes, - copyTexts, - iconButtons, - inputs, - layout, - links, - loaders, - modals, - navButtons, - notifications, - pagination, - profiles, - pieProgress, - radioButtons, - selects, - tables, - textareas, - toggles, - tooltips, - typography, -}; diff --git a/@stellar/design-system-website/src/constants/componentsInDisplayOrder.ts b/@stellar/design-system-website/src/constants/componentsInDisplayOrder.ts deleted file mode 100644 index 486f4c94..00000000 --- a/@stellar/design-system-website/src/constants/componentsInDisplayOrder.ts +++ /dev/null @@ -1,121 +0,0 @@ -import { ComponentDetailsId } from "types/types"; - -interface ComponentsInDisplayOrder { - id: ComponentDetailsId; - label: string; -} - -export const componentsInDisplayOrder: ComponentsInDisplayOrder[] = [ - { - id: ComponentDetailsId.typography, - label: "Typography", - }, - { - id: ComponentDetailsId.branding, - label: "Branding", - }, - { - id: ComponentDetailsId.assets, - label: "Assets", - }, - { - id: ComponentDetailsId.avatars, - label: "Avatars", - }, - { - id: ComponentDetailsId.profiles, - label: "Profiles", - }, - { - id: ComponentDetailsId.assetIcons, - label: "Asset icons", - }, - { - id: ComponentDetailsId.loaders, - label: "Loaders", - }, - { - id: ComponentDetailsId.notifications, - label: "Notifications", - }, - { - id: ComponentDetailsId.banners, - label: "Banners", - }, - { - id: ComponentDetailsId.buttons, - label: "Buttons", - }, - { - id: ComponentDetailsId.iconButtons, - label: "Icon buttons", - }, - { - id: ComponentDetailsId.navButtons, - label: "Navigation buttons", - }, - { - id: ComponentDetailsId.links, - label: "Links", - }, - { - id: ComponentDetailsId.inputs, - label: "Inputs", - }, - { - id: ComponentDetailsId.selects, - label: "Selects", - }, - { - id: ComponentDetailsId.textareas, - label: "Textareas", - }, - { - id: ComponentDetailsId.checkboxes, - label: "Checkboxes", - }, - { - id: ComponentDetailsId.radioButtons, - label: "Radio buttons", - }, - { - id: ComponentDetailsId.toggles, - label: "Toggles", - }, - { - id: ComponentDetailsId.badges, - label: "Badges", - }, - { - id: ComponentDetailsId.modals, - label: "Modals", - }, - { - id: ComponentDetailsId.cards, - label: "Cards", - }, - { - id: ComponentDetailsId.layout, - label: "Layout", - }, - { - id: ComponentDetailsId.tables, - label: "Tables", - }, - { - id: ComponentDetailsId.pagination, - label: "Pagination", - }, - { - id: ComponentDetailsId.pieProgress, - label: "Pie progress", - }, - { - id: ComponentDetailsId.tooltips, - label: "Tooltips", - }, - { - id: ComponentDetailsId.copyTexts, - label: "Copy text", - }, -]; diff --git a/@stellar/design-system-website/src/constants/details/assetIcons.tsx b/@stellar/design-system-website/src/constants/details/assetIcons.tsx deleted file mode 100644 index 4acd7a94..00000000 --- a/@stellar/design-system-website/src/constants/details/assetIcons.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import { AssetIcon } from "@stellar/design-system"; -import { ComponentDetails, ComponentDetailsId } from "types/types"; - -export const assetIcons: ComponentDetails = { - id: ComponentDetailsId.assetIcons, - title: "Asset icons", - description: `Asset image displayed in a circle from a URL source. The component accepts multiple sources to show currency pair, for example.`, - shortDescription: "Asset image displayed in a circle", - examples: [ - { - title: "Single asset", - description: "", - component: [ - , - , - ], - }, - { - title: "Asset pair", - description: "", - component: [ - , - ], - }, - ], - props: [ - { - prop: "source", - type: ["AssetIconSource[]"], - default: null, - optional: false, - description: "Asset source data", - }, - { - prop: "borderColor", - type: ["string"], - default: null, - optional: true, - description: "Asset border color", - }, - // Adding a sub-title to indicate AssetIconSource types - { - prop: "AssetIconSource", - type: [], - default: null, - optional: false, - description: "", - }, - { - prop: "image", - type: ["string"], - default: null, - optional: false, - description: "Image URL", - }, - { - prop: "altText", - type: ["string"], - default: null, - optional: false, - description: "Image alt text", - }, - { - prop: "imageSize", - type: ["string"], - default: null, - optional: true, - description: "Custom size of the image inside the circle", - }, - { - prop: "backgroundColor", - type: ["string"], - default: null, - optional: true, - description: "Custom background color", - }, - ], - externalProps: { - link: "", - label: "", - }, -}; diff --git a/@stellar/design-system-website/src/constants/details/assets.tsx b/@stellar/design-system-website/src/constants/details/assets.tsx deleted file mode 100644 index 7fcd6181..00000000 --- a/@stellar/design-system-website/src/constants/details/assets.tsx +++ /dev/null @@ -1,187 +0,0 @@ -import { Icon, Logo } from "@stellar/design-system"; -import { ComponentDetails, ComponentDetailsId } from "types/types"; - -export const assets: ComponentDetails = { - id: ComponentDetailsId.assets, - title: "Assets", - description: `Collection of icon and logo assets.`, - shortDescription: - "Collection of icon and partner logo assets used across product and brand", - examples: [ - { - title: "Icons", - description: <>SVG icon components, which are styled in CSS., - component: [ - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - ], - useGridLayout: true, - }, - { - title: "Logos", - description: - "SVG logo components, which can be styled in CSS if necessary.", - component: [ - , - , - , - , - , - ], - useGridLayout: true, - }, - ], - props: [], - externalProps: { - link: "", - label: "", - }, -}; diff --git a/@stellar/design-system-website/src/constants/details/avatars.tsx b/@stellar/design-system-website/src/constants/details/avatars.tsx deleted file mode 100644 index fa5cac55..00000000 --- a/@stellar/design-system-website/src/constants/details/avatars.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { Avatar, Link } from "@stellar/design-system"; -import { ComponentDetails, ComponentDetailsId } from "types/types"; - -export const avatars: ComponentDetails = { - id: ComponentDetailsId.avatars, - title: "Avatars", - description: ( - <> - Unique identicon of public Stellar address. We’re using{" "} - - stellar-identicon-js - - . - - ), - shortDescription: "Identicon as an avatar", - examples: [ - { - title: "", - description: "", - component: [ - , - , - ], - }, - ], - props: [ - { - prop: "publicAddress", - type: ["string"], - default: null, - optional: false, - description: "Public Stellar address", - }, - ], - externalProps: { - link: "", - label: "", - }, -}; diff --git a/@stellar/design-system-website/src/constants/details/badges.tsx b/@stellar/design-system-website/src/constants/details/badges.tsx deleted file mode 100644 index 99fe81ce..00000000 --- a/@stellar/design-system-website/src/constants/details/badges.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { Badge } from "@stellar/design-system"; -import { ComponentDetails, ComponentDetailsId } from "types/types"; - -export const badges: ComponentDetails = { - id: ComponentDetailsId.badges, - title: "Badges", - description: ( - <> - Badge is used to label or categorize an item. There are five - variants of the Tag: default,{" "} - success, warning, pending, and{" "} - error. - - ), - shortDescription: "Used to label or categorize items", - examples: [ - { - title: "Default", - description: "", - component: [Label], - }, - { - title: "Success", - description: "", - component: [Label], - }, - { - title: "Warning", - description: "", - component: [Label], - }, - { - title: "Pending", - description: "", - component: [Label], - }, - { - title: "Error", - description: "", - component: [Label], - }, - ], - props: [ - { - prop: "children", - type: ["string"], - default: null, - optional: false, - description: "Label of the badge", - }, - { - prop: "variant", - type: ["default", "success", "warning", "pending", "error"], - default: "default", - optional: true, - description: "Variant of the badge", - }, - ], - externalProps: { - link: "", - label: "", - }, -}; diff --git a/@stellar/design-system-website/src/constants/details/banners.tsx b/@stellar/design-system-website/src/constants/details/banners.tsx deleted file mode 100644 index a3aca3b9..00000000 --- a/@stellar/design-system-website/src/constants/details/banners.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { Banner } from "@stellar/design-system"; -import { ComponentDetails, ComponentDetailsId } from "types/types"; - -export const banners: ComponentDetails = { - id: ComponentDetailsId.banners, - title: "Banners", - description: ( - <> - Use banner to display messages at the top of the page, stretching across - the whole width. There are five variants default,{" "} - primary,success, error, and{" "} - warning. - - ), - shortDescription: "Use banners to display messages at the top of the page", - examples: [ - { - title: "Default", - description: "", - component: [Default message], - }, - { - title: "Primary", - description: "", - component: [Primary message], - }, - { - title: "Success", - description: "", - component: [Success message], - }, - { - title: "Error", - description: "", - component: [Error message], - }, - { - title: "Warning", - description: "", - component: [Warning message], - }, - ], - props: [ - { - prop: "children", - type: ["string", "ReactNode"], - default: null, - optional: false, - description: "Message to display in the banner", - }, - { - prop: "variant", - type: ["default", "primary", "success", "error", "warning"], - default: null, - optional: false, - description: "Variant of the banner", - }, - ], - externalProps: { - link: "", - label: "", - }, -}; diff --git a/@stellar/design-system-website/src/constants/details/branding.tsx b/@stellar/design-system-website/src/constants/details/branding.tsx deleted file mode 100644 index d22b8cc3..00000000 --- a/@stellar/design-system-website/src/constants/details/branding.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { ProjectLogo } from "@stellar/design-system"; -import { ComponentDetails, ComponentDetailsId } from "types/types"; - -export const branding: ComponentDetails = { - id: ComponentDetailsId.branding, - title: "Branding", - description: `Branding components, such as project logo.`, - shortDescription: "Branding components, such as project logos", - examples: [ - { - title: "Project logo", - description: "Project’s logo with a name and link.", - component: [], - }, - ], - props: [ - { - prop: "title", - type: ["string"], - default: null, - optional: true, - description: "Project name", - }, - { - prop: "link", - type: ["string"], - default: "/", - optional: true, - description: "Project website link", - }, - ], - externalProps: { - link: "", - label: "", - }, -}; diff --git a/@stellar/design-system-website/src/constants/details/buttons.tsx b/@stellar/design-system-website/src/constants/details/buttons.tsx deleted file mode 100644 index b8f64604..00000000 --- a/@stellar/design-system-website/src/constants/details/buttons.tsx +++ /dev/null @@ -1,636 +0,0 @@ -import { Button, Icon } from "@stellar/design-system"; -import { ComponentDetails, ComponentDetailsId } from "types/types"; - -export const buttons: ComponentDetails = { - id: ComponentDetailsId.buttons, - title: "Buttons", - description: ( - <> - Button is used to trigger an action that is not opening a - link (use Link instead). There are three variants of the{" "} - Button: primary, secondary, and{" "} - tertiary. - - ), - shortDescription: "Used to trigger an action that is not opening a link", - examples: [ - { - title: "Primary, medium", - description: "", - component: [ - , - , - , - , - , - , - , - , - , - , - , - ], - }, - { - title: "Primary, small", - description: "", - component: [ - , - , - , - , - , - , - , - , - , - ], - }, - { - title: "Primary, extra-small", - description: "", - component: [ - , - , - , - , - , - , - , - , - , - ], - }, - - { - title: "Secondary, medium", - description: "", - component: [ - , - , - , - , - , - , - , - , - , - ], - }, - { - title: "Secondary, small", - description: "", - component: [ - , - , - , - , - , - , - , - , - , - ], - }, - { - title: "Secondary, extra-small", - description: "", - component: [ - , - , - , - , - , - , - , - , - , - ], - }, - { - title: "Tertiary, medium", - description: "", - component: [ - , - , - , - , - , - , - , - , - , - ], - }, - { - title: "Tertiary, small", - description: "", - component: [ - , - , - , - , - , - , - , - , - , - ], - }, - { - title: "Tertiary, extra-small", - description: "", - component: [ - , - , - , - , - , - , - , - , - , - ], - }, - { - title: "Destructive, medium", - description: "", - component: [ - , - , - , - , - , - , - , - , - , - ], - }, - { - title: "Error, medium", - description: "", - component: [ - , - , - , - , - , - , - , - , - , - ], - }, - { - title: "Success, medium", - description: "", - component: [ - , - , - , - , - , - , - , - , - , - ], - }, - ], - props: [ - { - prop: "variant", - type: [ - "primary", - "secondary", - "tertiary", - "destructive", - "error", - "success", - ], - default: null, - optional: false, - description: "Variant of the button", - }, - { - prop: "size", - type: ["md", "sm", "xs"], - default: null, - optional: false, - description: "Size of the button", - }, - { - prop: "children", - type: ["string", "ReactNode"], - default: null, - optional: true, - description: "Label of the button", - }, - { - prop: "icon", - type: ["ReactNode"], - default: null, - optional: true, - description: "Icon element", - }, - { - prop: "iconPosition", - type: ["left", "right"], - default: "right", - optional: true, - description: "Position of the icon", - }, - { - prop: "isLoading", - type: ["Boolean"], - default: null, - optional: true, - description: "Loading state indicator", - }, - { - prop: "isUppercase", - type: ["Boolean"], - default: null, - optional: true, - description: "Uppercase label", - }, - { - prop: "isFullWidth", - type: ["Boolean"], - default: null, - optional: true, - description: "Sets width of the button to parent container", - }, - { - prop: "isPill", - type: ["Boolean"], - default: null, - optional: true, - description: "Pill shaped button", - }, - { - prop: "isExtraPadding", - type: ["Boolean"], - default: null, - optional: true, - description: "Button with extra padding", - }, - ], - externalProps: { - link: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes", - label: "button attributes", - }, -}; diff --git a/@stellar/design-system-website/src/constants/details/cards.tsx b/@stellar/design-system-website/src/constants/details/cards.tsx deleted file mode 100644 index 3521dc2e..00000000 --- a/@stellar/design-system-website/src/constants/details/cards.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { Card } from "@stellar/design-system"; -import { ComponentDetails, ComponentDetailsId } from "types/types"; - -export const cards: ComponentDetails = { - id: ComponentDetailsId.cards, - title: "Cards", - description: `Container with flexible dimensions for any type of content.`, - shortDescription: "Container for any type of content", - examples: [ - { - title: "Default/primary card", - description: "", - component: [Content], - }, - { - title: "Small border radius", - description: "", - component: [Content], - }, - { - title: "Card without padding and shadow", - description: "", - component: [Content], - }, - { - title: "Highlighted card", - description: "", - component: [Content], - }, - ], - props: [ - { - prop: "children", - type: ["ReactNode"], - default: null, - optional: false, - description: "Card content", - }, - { - prop: "variant", - type: ["primary", "secondary"], - default: "primary", - optional: true, - description: "Variant of the card", - }, - { - prop: "noPadding", - type: ["boolean"], - default: null, - optional: true, - description: "Remove card padding", - }, - { - prop: "borderRadiusSize", - type: ["sm", "md"], - default: "md", - optional: true, - description: "Card border radius", - }, - ], - externalProps: { - link: "", - label: "", - }, -}; diff --git a/@stellar/design-system-website/src/constants/details/checkboxes.tsx b/@stellar/design-system-website/src/constants/details/checkboxes.tsx deleted file mode 100644 index 7d29710f..00000000 --- a/@stellar/design-system-website/src/constants/details/checkboxes.tsx +++ /dev/null @@ -1,290 +0,0 @@ -import { Checkbox } from "@stellar/design-system"; -import { ComponentDetails, ComponentDetailsId } from "types/types"; - -export const checkboxes: ComponentDetails = { - id: ComponentDetailsId.checkboxes, - title: "Checkboxes", - description: ( - <> - Checkbox component is a form input element, which allows you - to select single values for submission. All native HTML{" "} - checkbox input attributes apply. - - ), - shortDescription: - "Form input element, which allows you to select single values for submission", - examples: [ - { - title: "Default, medium", - description: "", - component: [ - , - , - ], - }, - { - title: "Default, small", - description: "", - component: [ - , - , - ], - }, - { - title: "Default, extra-small", - description: "", - component: [ - , - , - ], - }, - { - title: "Checked, medium", - description: "", - component: [ - , - , - ], - }, - { - title: "Checked, small", - description: "", - component: [ - , - , - ], - }, - { - title: "Checked, extra-small", - description: "", - component: [ - , - , - ], - }, - { - title: "Checkbox with long label, medium", - description: "", - component: [ - , - , - ], - }, - { - title: "Checkbox with long label, small", - description: "", - component: [ - , - , - ], - }, - { - title: "Checkbox with long label, extra-small", - description: "", - component: [ - , - , - ], - }, - { - title: "Checkbox with note / error, medium", - description: "", - component: [ - , - , - , - ], - }, - { - title: "Checkbox with note / error, small", - description: "", - component: [ - , - , - , - ], - }, - { - title: "Checkbox with note / error, extra-small", - description: "", - component: [ - , - , - , - ], - }, - { - title: "Without label", - description: "", - component: [], - }, - ], - props: [ - { - prop: "id", - type: ["string"], - default: null, - optional: false, - description: "ID of the checkbox should be unique", - }, - { - prop: "fieldSize", - type: ["md", "sm", "xs"], - default: null, - optional: false, - description: "Size of the checkbox", - }, - { - prop: "label", - type: ["string", "ReactNode"], - default: null, - optional: true, - description: "Label of the checkbox", - }, - { - prop: "note", - type: ["string", "ReactNode"], - default: null, - optional: true, - description: "Note message of the checkbox", - }, - { - prop: "error", - type: ["string", "ReactNode"], - default: null, - optional: true, - description: "Error message of the checkbox", - }, - { - prop: "isError", - type: ["boolean"], - default: null, - optional: true, - description: "Checkbox error without a message", - }, - ], - externalProps: { - link: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes", - label: "input attributes", - }, -}; diff --git a/@stellar/design-system-website/src/constants/details/copyTexts.tsx b/@stellar/design-system-website/src/constants/details/copyTexts.tsx deleted file mode 100644 index 8b015eba..00000000 --- a/@stellar/design-system-website/src/constants/details/copyTexts.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import { CopyText, Link, IconButton } from "@stellar/design-system"; -import { ComponentDetails, ComponentDetailsId } from "types/types"; - -export const copyTexts: ComponentDetails = { - id: ComponentDetailsId.copyTexts, - title: "Copy text", - description: ( - <> - Use CopyText component to copy a string. Done action label - can be displayed in a tooltip, by default it will replace component’s - label inline. We’re using{" "} - - react-copy-to-clipboard - {" "} - to do the copy magic. - - ), - shortDescription: "Copy text component with optional tooltip", - examples: [ - { - title: "With tooltip", - description: "Done label is shown in the tooltip instead of inline", - component: [ - - Copy with tooltip - , - ], - }, - { - title: "Using Icon button copy preset", - description: "Text link with copy icon and tooltip", - component: [ - - - , - ], - }, - ], - props: [ - { - prop: "textToCopy", - type: ["string"], - default: null, - optional: false, - description: "Text to copy", - }, - { - prop: "doneLabel", - type: ["string"], - default: "Copied", - optional: true, - description: "Label/text to display when copy action is done", - }, - { - prop: "tooltipPlacement", - type: [ - "bottom", - "bottom-start", - "bottom-end", - "left", - "left-start", - "left-end", - "right", - "right-start", - "right-end", - "top", - "top-start", - "top-end", - ], - default: "bottom", - optional: true, - description: "Position of the tooltip", - }, - { - prop: "title", - type: ["string"], - default: "Copy", - optional: true, - description: "Title text to show on hover", - }, - { - prop: "children", - type: ["ReactElement", "string"], - default: null, - optional: false, - description: "", - }, - ], - externalProps: { - link: "", - label: "", - }, -}; diff --git a/@stellar/design-system-website/src/constants/details/iconButtons.tsx b/@stellar/design-system-website/src/constants/details/iconButtons.tsx deleted file mode 100644 index 9dd39b6f..00000000 --- a/@stellar/design-system-website/src/constants/details/iconButtons.tsx +++ /dev/null @@ -1,267 +0,0 @@ -import { IconButton, Icon } from "@stellar/design-system"; -import { ComponentDetails, ComponentDetailsId } from "types/types"; - -export const iconButtons: ComponentDetails = { - id: ComponentDetailsId.iconButtons, - title: "Icon buttons", - description: ( - <> - IconButton is similar to the Button, and is used - to trigger an action. There are five variants (color is the only - difference): default, error,{" "} - success, warning, highlight; and - two presets: copy and download. - - ), - shortDescription: "Similar to the Button, and is used to trigger an action", - examples: [ - { - title: "Default", - description: "", - component: [ - } altText="Default" />, - } altText="Default" disabled />, - ], - }, - { - title: "Default with label", - description: "", - component: [ - } label="Default" altText="Default" />, - } - label="Default" - altText="Default" - disabled - />, - ], - }, - { - title: "Success", - description: "", - component: [ - } - altText="Success" - variant={IconButton.variant.success} - />, - } - altText="Success" - variant={IconButton.variant.success} - disabled - />, - ], - }, - { - title: "Error", - description: "", - component: [ - } - altText="Error" - variant={IconButton.variant.error} - />, - } - altText="Error" - variant={IconButton.variant.error} - disabled - />, - ], - }, - { - title: "Warning", - description: "", - component: [ - } - altText="Warning" - variant={IconButton.variant.warning} - />, - } - altText="Warning" - variant={IconButton.variant.warning} - disabled - />, - ], - }, - { - title: "Highlight", - description: "", - component: [ - } - altText="Highlight" - variant={IconButton.variant.highlight} - />, - } - altText="Highlight" - variant={IconButton.variant.highlight} - disabled - />, - ], - }, - { - title: "Preset: copy", - description: "", - component: [ - , - , - ], - }, - { - title: "Preset: download", - description: "", - component: [ - , - , - ], - }, - { - title: "Custom color", - description: "", - component: [ - } - altText="Custom color" - customColor="#f0f" - />, - } - altText="Custom color" - customColor="#f0f" - disabled - />, - ], - }, - { - title: "Custom size", - description: "", - component: [ - } - altText="Custom size" - customSize="2rem" - />, - } - altText="Custom size" - customSize="2rem" - disabled - />, - ], - }, - { - title: "Custom size with label", - description: "", - component: [ - } - altText="Custom size" - label="Custom" - customSize="2rem" - />, - } - altText="Custom size" - label="Custom" - customSize="2rem" - disabled - />, - ], - }, - ], - props: [ - { - prop: "IconButtonDefaultProps", - type: [], - default: null, - optional: false, - description: "", - }, - { - prop: "icon", - type: ["ReactNode"], - default: null, - optional: false, - description: "The icon element", - }, - { - prop: "altText", - type: ["string"], - default: null, - optional: false, - description: "Alternative text to show on hover", - }, - { - prop: "IconButtonPresetProps", - type: [], - default: null, - optional: false, - description: "", - }, - { - prop: "preset", - type: ["copy", "download"], - default: null, - optional: false, - description: "Predefined set of icon buttons", - }, - { - prop: "IconButtonBaseProps", - type: [], - default: null, - optional: false, - description: "", - }, - { - prop: "variant", - type: ["default", "error", "success", "warning", "highlight"], - default: "default", - optional: true, - description: "Variant of the component", - }, - { - prop: "label", - type: ["string"], - default: null, - optional: true, - description: "Component label", - }, - { - prop: "customColor", - type: ["string"], - default: null, - optional: true, - description: "Set custom color of the component", - }, - { - prop: "customSize", - type: ["string"], - default: null, - optional: true, - description: "Set custom size of the component", - }, - ], - externalProps: { - link: "", - label: "", - }, -}; diff --git a/@stellar/design-system-website/src/constants/details/inputs.tsx b/@stellar/design-system-website/src/constants/details/inputs.tsx deleted file mode 100644 index 6d52860e..00000000 --- a/@stellar/design-system-website/src/constants/details/inputs.tsx +++ /dev/null @@ -1,457 +0,0 @@ -import { Input, Icon } from "@stellar/design-system"; -import { ComponentDetails, ComponentDetailsId } from "types/types"; - -import { Field } from "./mocks"; - -export const inputs: ComponentDetails = { - id: ComponentDetailsId.inputs, - title: "Inputs", - description: ( - <> - Input component is a form input element, which inherits all - native HTML input element attributes. - - ), - shortDescription: - "Form input element, which inherits all native HTML input element attributes", - examples: [ - { - title: "Default", - description: "", - component: [ - , - , - ], - }, - { - title: "Input with label and placeholder, medium", - description: "", - component: [ - , - , - , - , - ], - }, - { - title: "Input with label and placeholder, small", - description: "", - component: [ - , - , - , - , - ], - }, - { - title: "Input with label and placeholder, extra-small", - description: "", - component: [ - , - , - , - , - ], - }, - { - title: "Input with label and value", - description: "", - component: [ - , - , - , - ], - }, - { - title: "Input with label and note / error, medium", - description: "", - component: [ - , - , - , - ], - }, - { - title: "Input with label and note / error, small", - description: "", - component: [ - , - , - , - ], - }, - { - title: "Input with label and note / error, extra-small", - description: "", - component: [ - , - , - , - ], - }, - { - title: "Input with elements, medium", - description: "", - component: [ - , - } - />, - } - isPill - />, - ], - }, - { - title: "Input with elements, small", - description: "", - component: [ - , - } - />, - } - isPill - />, - ], - }, - { - title: "Input with elements, extra-small", - description: "", - component: [ - , - } - />, - } - isPill - />, - ], - }, - { - title: "Password input", - description: "", - component: [ - , - , - , - ], - }, - { - title: "Input with custom input", - description: "", - component: [ - } - id="input-c-1" - label="Label" - placeholder="Placeholder" - />, - ], - }, - ], - props: [ - { - prop: "id", - type: ["string"], - default: null, - optional: false, - description: "ID of the input should be unique", - }, - { - prop: "fieldSize", - type: ["md", "sm", "xs"], - default: null, - optional: false, - description: "Size of the input", - }, - { - prop: "label", - type: ["string", "ReactNode"], - default: null, - optional: true, - description: "Label of the input", - }, - { - prop: "isLabelUppercase", - type: ["boolean"], - default: null, - optional: true, - description: "Make label uppercase", - }, - { - prop: "isPill", - type: ["boolean"], - default: null, - optional: true, - description: "Pill shaped input", - }, - { - prop: "isError", - type: ["boolean"], - default: null, - optional: true, - description: "Input error without a message", - }, - { - prop: "isExtraPadding", - type: ["Boolean"], - default: null, - optional: true, - description: "Input with extra padding", - }, - { - prop: "isPassword", - type: ["Boolean"], - default: null, - optional: true, - description: "Password input preset with show/hide button", - }, - { - prop: "rightElement", - type: ["string", "ReactNode"], - default: null, - optional: true, - description: "Right side element of the input", - }, - { - prop: "note", - type: ["string", "ReactNode"], - default: null, - optional: true, - description: "Note message of the input", - }, - { - prop: "error", - type: ["string", "ReactNode"], - default: null, - optional: true, - description: "Error message of the input", - }, - { - prop: "customInput", - type: ["React.ReactNode"], - default: null, - optional: true, - description: - "Use a specific input rather than a generic HTML input (useful for Formik or otherwise controlled inputs)", - }, - ], - externalProps: { - link: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes", - label: "input attributes", - }, -}; diff --git a/@stellar/design-system-website/src/constants/details/layout.tsx b/@stellar/design-system-website/src/constants/details/layout.tsx deleted file mode 100644 index 33bc97b0..00000000 --- a/@stellar/design-system-website/src/constants/details/layout.tsx +++ /dev/null @@ -1,204 +0,0 @@ -import { Layout } from "@stellar/design-system"; -import { ComponentDetails, ComponentDetailsId } from "types/types"; - -export const layout: ComponentDetails = { - id: ComponentDetailsId.layout, - title: "Layout", - description: ( - <> - Use Layout component’s sub-components, such as{" "} - Inset, Header, and Footer, to build - page layouts. - - ), - shortDescription: "Elements to build page layouts", - examples: [ - { - title: "Default header", - description: "", - component: [ - , - ], - }, - { - title: "Default footer", - description: "", - component: [], - }, - { - title: "Content with Inset", - description: "", - component: [ - - Content - , - ], - }, - ], - props: [], - subComponents: { - description: "", - components: [ - { - component: "Inset", - description: - "Inset defines width/max-width and horizontal margins. It is used in upper level block/section components to have consistent horizontal styling.", - props: [ - { - prop: "children", - type: ["ReactNode"], - default: null, - optional: false, - description: "Content of the component", - }, - ], - }, - { - component: "Content", - description: - "Page level content of the website (all other content goes in here). It is on the same level as header and footer.", - props: [ - { - prop: "children", - type: ["ReactNode"], - default: null, - optional: false, - description: "Content of the component", - }, - ], - }, - { - component: "Header", - description: "Header of the website.", - props: [ - { - prop: "projectId", - type: ["string"], - default: null, - optional: false, - description: "ID of the project", - }, - { - prop: "projectTitle", - type: ["string"], - default: null, - optional: true, - description: "Name of the project", - }, - { - prop: "projectLink", - type: ["string"], - default: null, - optional: true, - description: "Link of the project", - }, - { - prop: "hasThemeSwitch", - type: ["boolean"], - default: null, - optional: true, - description: "Show theme switch", - }, - { - prop: "onThemeSwitchActionEnd", - type: ["(isDarkMode: boolean) => void"], - default: null, - optional: true, - description: "Function to call at the end of the switch event", - }, - { - prop: "onSignOut", - type: ["() => void"], - default: null, - optional: true, - description: "Show sign out link if function is provided", - }, - { - prop: "showButtonBorder", - type: ["boolean"], - default: null, - optional: true, - description: "Show border around navigation buttons", - }, - { - prop: "contentCenter", - type: ["ReactElement"], - default: null, - optional: true, - description: "Custom content in the middle", - }, - { - prop: "contentRight", - type: ["ReactElement"], - default: null, - optional: true, - description: "Custom content on the right", - }, - { - prop: "menu", - type: ["{ isEnabled: boolean; onOpen: () => void; }"], - default: null, - optional: true, - description: "Show burger menu icon", - }, - ], - }, - { - component: "Footer", - description: "Footer of the website.", - props: [ - { - prop: "hideLegalLinks", - type: ["boolean"], - default: null, - optional: true, - description: "Hide legal links", - }, - { - prop: "hideTopBorder", - type: ["boolean"], - default: null, - optional: true, - description: "Hide top border", - }, - { - prop: "gitHubLink", - type: ["string"], - default: null, - optional: true, - description: "Link to GitHub repo", - }, - { - prop: "gitHubLabel", - type: ["string"], - default: null, - optional: true, - description: "Title/label of GitHub link (visible on hover)", - }, - { - prop: "marginTop", - type: ["string"], - default: null, - optional: true, - description: "Set custom margin top", - }, - { - prop: "children", - type: ["ReactNode"], - default: null, - optional: true, - description: "Custom content in the footer", - }, - ], - }, - ], - }, - externalProps: { - link: "", - label: "", - }, -}; diff --git a/@stellar/design-system-website/src/constants/details/links.tsx b/@stellar/design-system-website/src/constants/details/links.tsx deleted file mode 100644 index 7fbee114..00000000 --- a/@stellar/design-system-website/src/constants/details/links.tsx +++ /dev/null @@ -1,832 +0,0 @@ -/* eslint-disable react/jsx-no-comment-textnodes */ -import { Link, Icon } from "@stellar/design-system"; -import { ComponentDetails, ComponentDetailsId } from "types/types"; - -export const links: ComponentDetails = { - id: ComponentDetailsId.links, - title: "Links", - description: ( - <> - Link component is a styled HTML anchor (a) - element. Use Link to open links or to navigate to other - pages. There are two variants (primary and{" "} - secondary), and underline prop. - - ), - shortDescription: - "Used to trigger an action to open links or to navigate to other pages", - examples: [ - { - title: "Primary (default)", - description: "", - component: [ -

- Some text link more text -

, -

- Some text link more text -

, - ], - }, - { - title: "Primary (default) with icon on the left", - description: "", - component: [ -

- Some text{" "} - } iconPosition="left"> - link - {" "} - more text -

, -

- Some text{" "} - } iconPosition="left" isDisabled> - link - {" "} - more text -

, - ], - }, - { - title: "Primary (default) with icon on the right", - description: "", - component: [ -

- Some text{" "} - } iconPosition="right"> - link - {" "} - more text -

, -

- Some text{" "} - } iconPosition="right" isDisabled> - link - {" "} - more text -

, - ], - }, - { - title: "Primary (default) underline", - description: "", - component: [ -

- Some text link more text -

, -

- Some text{" "} - - link - {" "} - more text -

, - ], - }, - { - title: "Primary (default) underline with icon on the left", - description: "", - component: [ -

- Some text{" "} - } iconPosition="left"> - link - {" "} - more text -

, -

- Some text{" "} - } - iconPosition="left" - isDisabled - > - link - {" "} - more text -

, - ], - }, - { - title: "Primary (default) underline with icon on the right", - description: "", - component: [ -

- Some text{" "} - } iconPosition="right"> - link - {" "} - more text -

, -

- Some text{" "} - } - iconPosition="right" - isDisabled - > - link - {" "} - more text -

, - ], - }, - { - title: "Primary, medium", - description: "", - component: [ - Medium, - - Medium - , - - Medium - , - - Medium - , - - Medium - , - - Medium - , - - Medium - , - } iconPosition="right"> - Medium - , - } - iconPosition="right" - isUnderline - > - Medium - , - } - iconPosition="right" - isUnderline - isDisabled - > - Medium - , - } - iconPosition="right" - isUppercase - > - Medium - , - } - iconPosition="right" - isUnderline - isUppercase - > - Medium - , - } - iconPosition="right" - isUnderline - isUppercase - isDisabled - > - Medium - , - ], - }, - { - title: "Primary, small", - description: "", - component: [ - Small, - - Small - , - - Small - , - - Small - , - - Small - , - - Small - , - - Small - , - } iconPosition="right"> - Small - , - } - iconPosition="right" - isUnderline - > - Small - , - } - iconPosition="right" - isUnderline - isDisabled - > - Small - , - } - iconPosition="right" - isUppercase - > - Small - , - } - iconPosition="right" - isUnderline - isUppercase - > - Small - , - } - iconPosition="right" - isUnderline - isUppercase - isDisabled - > - Small - , - ], - }, - { - title: "Primary, extra-small", - description: "", - component: [ - Extra small, - - Extra small - , - - Extra small - , - - Extra small - , - - Extra small - , - - Extra small - , - - Extra small - , - } iconPosition="right"> - Extra small - , - } - iconPosition="right" - isUnderline - > - Extra small - , - } - iconPosition="right" - isUnderline - isDisabled - > - Extra small - , - } - iconPosition="right" - isUppercase - > - Extra small - , - } - iconPosition="right" - isUnderline - isUppercase - > - Extra small - , - } - iconPosition="right" - isUnderline - isUppercase - isDisabled - > - Extra small - , - ], - }, - { - title: "Secondary", - description: "", - component: [ -

- Some text link more text -

, -

- Some text{" "} - - link - {" "} - more text -

, - ], - }, - { - title: "Secondary with icon on the left", - description: "", - component: [ -

- Some text{" "} - } - iconPosition="left" - > - link - {" "} - more text -

, -

- Some text{" "} - } - iconPosition="left" - isDisabled - > - link - {" "} - more text -

, - ], - }, - { - title: "Secondary with icon on the right", - description: "", - component: [ -

- Some text{" "} - } - iconPosition="right" - > - link - {" "} - more text -

, -

- Some text{" "} - } - iconPosition="right" - isDisabled - > - link - {" "} - more text -

, - ], - }, - { - title: "Secondary underline", - description: "", - component: [ -

- Some text{" "} - - link - {" "} - more text -

, -

- Some text{" "} - - link - {" "} - more text -

, - ], - }, - { - title: "Secondary underline with icon on the left", - description: "", - component: [ -

- Some text{" "} - } - iconPosition="left" - > - link - {" "} - more text -

, -

- Some text{" "} - } - iconPosition="left" - isDisabled - > - link - {" "} - more text -

, - ], - }, - { - title: "Secondary underline with icon on the right", - description: "", - component: [ -

- Some text{" "} - } - iconPosition="right" - > - link - {" "} - more text -

, -

- Some text{" "} - } - iconPosition="right" - isDisabled - > - link - {" "} - more text -

, - ], - }, - { - title: "Secondary, medium", - description: "", - component: [ - - Medium - , - - Medium - , - - Medium - , - - Medium - , - - Medium - , - - Medium - , - - Medium - , - } - iconPosition="right" - > - Medium - , - } - iconPosition="right" - isUnderline - > - Medium - , - } - iconPosition="right" - isUnderline - isDisabled - > - Medium - , - } - iconPosition="right" - isUppercase - > - Medium - , - } - iconPosition="right" - isUnderline - isUppercase - > - Medium - , - } - iconPosition="right" - isUnderline - isUppercase - isDisabled - > - Medium - , - ], - }, - { - title: "Secondary, small", - description: "", - component: [ - - Small - , - - Small - , - - Small - , - - Small - , - - Small - , - - Small - , - - Small - , - } - iconPosition="right" - > - Small - , - } - iconPosition="right" - isUnderline - > - Small - , - } - iconPosition="right" - isUnderline - isDisabled - > - Small - , - } - iconPosition="right" - isUppercase - > - Small - , - } - iconPosition="right" - isUnderline - isUppercase - > - Small - , - } - iconPosition="right" - isUnderline - isUppercase - isDisabled - > - Small - , - ], - }, - { - title: "Secondary, extra-small", - description: "", - component: [ - - Extra-small - , - - Extra-small - , - - Extra-small - , - - Extra-small - , - - Extra-small - , - - Extra-small - , - - Extra-small - , - } - iconPosition="right" - > - Extra-small - , - } - iconPosition="right" - isUnderline - > - Extra-small - , - } - iconPosition="right" - isUnderline - isDisabled - > - Extra-small - , - } - iconPosition="right" - isUppercase - > - Extra-small - , - } - iconPosition="right" - isUnderline - isUppercase - > - Extra-small - , - } - iconPosition="right" - isUnderline - isUppercase - isDisabled - > - Extra-small - , - ], - }, - ], - props: [ - { - prop: "children", - type: ["string", "ReactNode"], - default: null, - optional: false, - description: "Content of the link", - }, - { - prop: "variant", - type: ["primary", "secondary"], - default: "primary", - optional: true, - description: "Variant of the link", - }, - { - prop: "size", - type: ["md", "sm", "xs"], - default: null, - optional: true, - description: "Size of the link, will inherit parent size if not set", - }, - { - prop: "icon", - type: ["ReactNode"], - default: null, - optional: true, - description: "Icon element", - }, - { - prop: "iconPosition", - type: ["left", "right"], - default: "right", - optional: true, - description: "Position of the icon", - }, - { - prop: "isDisabled", - type: ["Boolean"], - default: null, - optional: true, - description: "Disable the component", - }, - { - prop: "isUnderline", - type: ["Boolean"], - default: null, - optional: true, - description: "Underline the text", - }, - { - prop: "isUppercase", - type: ["Boolean"], - default: null, - optional: true, - description: "Make text uppercase", - }, - ], - externalProps: { - link: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes", - label: "anchor element attributes", - }, - notes: [ -

- Link with external href (starting with{" "} - http(s) or //) will have attributes{" "} - rel="noreferrer noopener" and target="_blank"{" "} - automatically added. -

, - ], -}; diff --git a/@stellar/design-system-website/src/constants/details/loaders.tsx b/@stellar/design-system-website/src/constants/details/loaders.tsx deleted file mode 100644 index 7c9526b0..00000000 --- a/@stellar/design-system-website/src/constants/details/loaders.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { Loader } from "@stellar/design-system"; -import { ComponentDetails, ComponentDetailsId } from "types/types"; - -export const loaders: ComponentDetails = { - id: ComponentDetailsId.loaders, - title: "Loaders", - description: ` - Loading state indicators.`, - shortDescription: "Loading state indicators", - examples: [ - { - title: "Default", - description: ( - <> - Loader component color is set in CSS, and the size can also be set in - CSS or through the size prop. - - ), - component: [, ], - }, - ], - props: [ - { - prop: "size", - type: ["string"], - default: null, - optional: true, - description: "Set custom size of the component", - }, - ], - externalProps: { - link: "", - label: "", - }, -}; diff --git a/@stellar/design-system-website/src/constants/details/mocks.tsx b/@stellar/design-system-website/src/constants/details/mocks.tsx deleted file mode 100644 index e5a263a5..00000000 --- a/@stellar/design-system-website/src/constants/details/mocks.tsx +++ /dev/null @@ -1,4 +0,0 @@ -// used to illustrate a Formik in examples -export const Field = (props: any) => ; - -export const TextareaField = (props: any) => , - , - ], - }, - { - title: "Textarea with label and placeholder, medium", - description: "", - component: [ - , - , - , - ], - }, - { - title: "Textarea with label and long text, small", - description: "", - component: [ - , - , - , - ], - }, - { - title: "Textarea with label and long text, extra-small", - description: "", - component: [ - , - , - , - ], - }, - { - title: "Textarea with label and note / error, medium", - description: "", - component: [ - , - , - , - ], - }, - { - title: "Textarea with label and note / error, small", - description: "", - component: [ - , - , - , - ], - }, - { - title: "Textarea with label and note / error, extra-small", - description: "", - component: [ - , - , - , - ], - }, - { - title: "Textarea with custom input", - description: "", - component: [ -