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 4f17c94a..00000000 Binary files a/@stellar/design-system-website/public/favicon.ico and /dev/null differ diff --git a/@stellar/design-system-website/public/logo192.png b/@stellar/design-system-website/public/logo192.png deleted file mode 100644 index 476ff8d0..00000000 Binary files a/@stellar/design-system-website/public/logo192.png and /dev/null differ diff --git a/@stellar/design-system-website/public/logo512.png b/@stellar/design-system-website/public/logo512.png deleted file mode 100644 index 41427a2f..00000000 Binary files a/@stellar/design-system-website/public/logo512.png and /dev/null differ 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: [ -