diff --git a/.gitignore b/.gitignore index d3a57d88..0cbbfc84 100644 --- a/.gitignore +++ b/.gitignore @@ -13,6 +13,9 @@ node_modules */**/dist */**/build +# SDS docs +@stellar/design-system/docs + # misc .DS_Store .env @@ -20,6 +23,7 @@ node_modules .env.development.local .env.test.local .env.production.local +.docusaurus npm-debug.log* yarn-debug.log* diff --git a/@stellar/design-system-website/.gitignore b/@stellar/design-system-website/.gitignore new file mode 100644 index 00000000..b2d6de30 --- /dev/null +++ b/@stellar/design-system-website/.gitignore @@ -0,0 +1,20 @@ +# Dependencies +/node_modules + +# Production +/build + +# Generated files +.docusaurus +.cache-loader + +# Misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/@stellar/design-system-website/README.md b/@stellar/design-system-website/README.md index 3c67f5b6..dded1470 100644 --- a/@stellar/design-system-website/README.md +++ b/@stellar/design-system-website/README.md @@ -1,3 +1,28 @@ # Stellar Design System Website -TODO +This website is built using [Docusaurus 2](https://docusaurus.io/), a modern +static website generator. + +## Installation + +```bash +yarn install +``` + +## Local Development + +```bash +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 + +```bash +yarn build +``` + +This command generates static content into the `build` directory and can be +served using any static contents hosting service. 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/docs/components/_category_.json b/@stellar/design-system-website/docs/components/_category_.json new file mode 100644 index 00000000..e57a8385 --- /dev/null +++ b/@stellar/design-system-website/docs/components/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "Components", + "position": 3 +} diff --git a/@stellar/design-system-website/docs/components/accents/_category_.json b/@stellar/design-system-website/docs/components/accents/_category_.json new file mode 100644 index 00000000..f7f060ff --- /dev/null +++ b/@stellar/design-system-website/docs/components/accents/_category_.json @@ -0,0 +1,6 @@ +{ + "label": "Accents", + "link": { + "type": "generated-index" + } +} diff --git a/@stellar/design-system-website/docs/components/accents/badge.mdx b/@stellar/design-system-website/docs/components/accents/badge.mdx new file mode 100644 index 00000000..ce5b16b1 --- /dev/null +++ b/@stellar/design-system-website/docs/components/accents/badge.mdx @@ -0,0 +1,20 @@ +--- +slug: /badge +description: "Used to label or categorize items." +--- + +# Badge + + + +## Example + +```tsx live + + Label + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/accents/tooltip.mdx b/@stellar/design-system-website/docs/components/accents/tooltip.mdx new file mode 100644 index 00000000..8fa582ef --- /dev/null +++ b/@stellar/design-system-website/docs/components/accents/tooltip.mdx @@ -0,0 +1,22 @@ +--- +slug: /tooltip +description: "Tooltip is used to display info in a bubble." +--- + +# Tooltip + + + +## Example + +```tsx live + + Tooltip trigger}> + Lorem ipsum dolor sit + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/branding/_category_.json b/@stellar/design-system-website/docs/components/branding/_category_.json new file mode 100644 index 00000000..430e647a --- /dev/null +++ b/@stellar/design-system-website/docs/components/branding/_category_.json @@ -0,0 +1,6 @@ +{ + "label": "Branding", + "link": { + "type": "generated-index" + } +} diff --git a/@stellar/design-system-website/docs/components/branding/project-logo.mdx b/@stellar/design-system-website/docs/components/branding/project-logo.mdx new file mode 100644 index 00000000..7100eea7 --- /dev/null +++ b/@stellar/design-system-website/docs/components/branding/project-logo.mdx @@ -0,0 +1,20 @@ +--- +slug: /project-logo +description: "Project’s logo with a name and a link." +--- + +# Project logo + + + +## Example + +```tsx live + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/buttons/_category_.json b/@stellar/design-system-website/docs/components/buttons/_category_.json new file mode 100644 index 00000000..a4dbc2c8 --- /dev/null +++ b/@stellar/design-system-website/docs/components/buttons/_category_.json @@ -0,0 +1,6 @@ +{ + "label": "Buttons", + "link": { + "type": "generated-index" + } +} diff --git a/@stellar/design-system-website/docs/components/buttons/button-preset.mdx b/@stellar/design-system-website/docs/components/buttons/button-preset.mdx new file mode 100644 index 00000000..e9afc015 --- /dev/null +++ b/@stellar/design-system-website/docs/components/buttons/button-preset.mdx @@ -0,0 +1,20 @@ +--- +slug: /button-preset +description: "Copy and download button presets." +--- + +# Button preset + + + +## Example + +```tsx live + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/buttons/button.mdx b/@stellar/design-system-website/docs/components/buttons/button.mdx new file mode 100644 index 00000000..8552d9f7 --- /dev/null +++ b/@stellar/design-system-website/docs/components/buttons/button.mdx @@ -0,0 +1,22 @@ +--- +slug: /button +description: "Used to trigger an action that is not opening a link." +--- + +# Button + + + +## Example + +```tsx live + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/buttons/copy-text.mdx b/@stellar/design-system-website/docs/components/buttons/copy-text.mdx new file mode 100644 index 00000000..d8168134 --- /dev/null +++ b/@stellar/design-system-website/docs/components/buttons/copy-text.mdx @@ -0,0 +1,20 @@ +--- +slug: /copy-text +description: "Copy text component with an optional tooltip." +--- + +# Copy text + + + +## Example + +```tsx live + + Copy text + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/buttons/icon-button.mdx b/@stellar/design-system-website/docs/components/buttons/icon-button.mdx new file mode 100644 index 00000000..a74261ac --- /dev/null +++ b/@stellar/design-system-website/docs/components/buttons/icon-button.mdx @@ -0,0 +1,20 @@ +--- +slug: /icon-button +description: "Button with icon as a label." +--- + +# Icon button + + + +## Example + +```tsx live + + } /> + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/buttons/link.mdx b/@stellar/design-system-website/docs/components/buttons/link.mdx new file mode 100644 index 00000000..70cd34e7 --- /dev/null +++ b/@stellar/design-system-website/docs/components/buttons/link.mdx @@ -0,0 +1,20 @@ +--- +slug: /link +description: "Trigger an action to open links or navigate to other pages." +--- + +# Link + + + +## Example + +```tsx live + + Link + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/buttons/nav-button.mdx b/@stellar/design-system-website/docs/components/buttons/nav-button.mdx new file mode 100644 index 00000000..a5a6e1a6 --- /dev/null +++ b/@stellar/design-system-website/docs/components/buttons/nav-button.mdx @@ -0,0 +1,25 @@ +--- +slug: /nav-button +description: "Trigger actions like toggle dark mode, close a modal, etc." +--- + +# Navigation button + + + +## Example + +```tsx live + + } + id="nav-button" + onClick={() => {}} + title="Menu" + /> + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/containers/_category_.json b/@stellar/design-system-website/docs/components/containers/_category_.json new file mode 100644 index 00000000..1984a2a6 --- /dev/null +++ b/@stellar/design-system-website/docs/components/containers/_category_.json @@ -0,0 +1,6 @@ +{ + "label": "Containers", + "link": { + "type": "generated-index" + } +} diff --git a/@stellar/design-system-website/docs/components/containers/card.mdx b/@stellar/design-system-website/docs/components/containers/card.mdx new file mode 100644 index 00000000..7e6e8773 --- /dev/null +++ b/@stellar/design-system-website/docs/components/containers/card.mdx @@ -0,0 +1,20 @@ +--- +slug: /card +description: "Container for any type of content." +--- + +# Card + + + +## Example + +```tsx live + + Content + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/containers/modal.mdx b/@stellar/design-system-website/docs/components/containers/modal.mdx new file mode 100644 index 00000000..cd400f3a --- /dev/null +++ b/@stellar/design-system-website/docs/components/containers/modal.mdx @@ -0,0 +1,66 @@ +--- +slug: /modal +description: "A dialog window with an overlay background." +--- + +# Modal + + + +## Example + +```tsx live + + <> + {}} parentId="preview-block"> +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur eius + beatae sint dolorem, excepturi quos enim, et ullam suscipit voluptates + voluptas accusantium repellendus amet explicabo, iure veritatis aperiam + alias molestiae. +

+
+ + {}} parentId="preview-block"> + Modal heading + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur eius + beatae sint dolorem, excepturi quos enim, et ullam suscipit voluptates + voluptas accusantium repellendus amet explicabo, iure veritatis + aperiam alias molestiae. +

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur eius + beatae sint dolorem, excepturi quos enim, et ullam suscipit voluptates + voluptas accusantium repellendus amet explicabo, iure veritatis + aperiam alias molestiae. +

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur eius + beatae sint dolorem, excepturi quos enim, et ullam suscipit voluptates + voluptas accusantium repellendus amet explicabo, iure veritatis + aperiam alias molestiae. +

+
+ + + + +
+ +
+``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/elements/_category_.json b/@stellar/design-system-website/docs/components/elements/_category_.json new file mode 100644 index 00000000..55441b99 --- /dev/null +++ b/@stellar/design-system-website/docs/components/elements/_category_.json @@ -0,0 +1,6 @@ +{ + "label": "Elements", + "link": { + "type": "generated-index" + } +} diff --git a/@stellar/design-system-website/docs/components/elements/asset-icon.mdx b/@stellar/design-system-website/docs/components/elements/asset-icon.mdx new file mode 100644 index 00000000..8bc65fc8 --- /dev/null +++ b/@stellar/design-system-website/docs/components/elements/asset-icon.mdx @@ -0,0 +1,28 @@ +--- +slug: /asset-icon +description: "Asset image displayed in a circle." +--- + +# Asset icon + + + +## Example + +```tsx live + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/elements/avatar.mdx b/@stellar/design-system-website/docs/components/elements/avatar.mdx new file mode 100644 index 00000000..be60af41 --- /dev/null +++ b/@stellar/design-system-website/docs/components/elements/avatar.mdx @@ -0,0 +1,20 @@ +--- +slug: /avatar +description: "Identicon as an avatar." +--- + +# Avatar + + + +## Example + +```tsx live + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/elements/icon.mdx b/@stellar/design-system-website/docs/components/elements/icon.mdx new file mode 100644 index 00000000..d926ef58 --- /dev/null +++ b/@stellar/design-system-website/docs/components/elements/icon.mdx @@ -0,0 +1,10 @@ +--- +slug: /icon +description: "SVG icon component." +--- + +# Icon + +SVG icon components, which are styled in CSS. + + diff --git a/@stellar/design-system-website/docs/components/elements/loader.mdx b/@stellar/design-system-website/docs/components/elements/loader.mdx new file mode 100644 index 00000000..e0738322 --- /dev/null +++ b/@stellar/design-system-website/docs/components/elements/loader.mdx @@ -0,0 +1,20 @@ +--- +slug: /loader +description: "Loading state indicator." +--- + +# Loader + + + +## Example + +```tsx live + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/elements/logo.mdx b/@stellar/design-system-website/docs/components/elements/logo.mdx new file mode 100644 index 00000000..643c62b2 --- /dev/null +++ b/@stellar/design-system-website/docs/components/elements/logo.mdx @@ -0,0 +1,10 @@ +--- +slug: /logo +description: "SVG logo component." +--- + +# Logo + +SVG logo components, which can be styled in CSS if necessary. + + diff --git a/@stellar/design-system-website/docs/components/inputs/_category_.json b/@stellar/design-system-website/docs/components/inputs/_category_.json new file mode 100644 index 00000000..8127ad62 --- /dev/null +++ b/@stellar/design-system-website/docs/components/inputs/_category_.json @@ -0,0 +1,6 @@ +{ + "label": "Inputs", + "link": { + "type": "generated-index" + } +} diff --git a/@stellar/design-system-website/docs/components/inputs/checkbox.mdx b/@stellar/design-system-website/docs/components/inputs/checkbox.mdx new file mode 100644 index 00000000..0e2560ee --- /dev/null +++ b/@stellar/design-system-website/docs/components/inputs/checkbox.mdx @@ -0,0 +1,20 @@ +--- +slug: /checkbox +description: "Form input for single and multiple selections." +--- + +# Checkbox + + + +## Example + +```tsx live + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/inputs/input.mdx b/@stellar/design-system-website/docs/components/inputs/input.mdx new file mode 100644 index 00000000..8481f284 --- /dev/null +++ b/@stellar/design-system-website/docs/components/inputs/input.mdx @@ -0,0 +1,20 @@ +--- +slug: /input +description: "Form input for a single line of text." +--- + +# Input + + + +## Example + +```tsx live + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/inputs/radio-button.mdx b/@stellar/design-system-website/docs/components/inputs/radio-button.mdx new file mode 100644 index 00000000..569e8319 --- /dev/null +++ b/@stellar/design-system-website/docs/components/inputs/radio-button.mdx @@ -0,0 +1,20 @@ +--- +slug: /radio-button +description: "Form input for a single selection." +--- + +# Radio button + + + +## Example + +```tsx live + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/inputs/select.mdx b/@stellar/design-system-website/docs/components/inputs/select.mdx new file mode 100644 index 00000000..e472af69 --- /dev/null +++ b/@stellar/design-system-website/docs/components/inputs/select.mdx @@ -0,0 +1,23 @@ +--- +slug: /select +description: "Form input for selecting a single option from a list." +--- + +# Select + + + +## Example + +```tsx live + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/inputs/textarea.mdx b/@stellar/design-system-website/docs/components/inputs/textarea.mdx new file mode 100644 index 00000000..f0151675 --- /dev/null +++ b/@stellar/design-system-website/docs/components/inputs/textarea.mdx @@ -0,0 +1,20 @@ +--- +slug: /textarea +description: "Form input for multiple lines of text." +--- + +# Textarea + + + +## Example + +```tsx live + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/inputs/toggle.mdx b/@stellar/design-system-website/docs/components/inputs/toggle.mdx new file mode 100644 index 00000000..a7bb88cb --- /dev/null +++ b/@stellar/design-system-website/docs/components/inputs/toggle.mdx @@ -0,0 +1,20 @@ +--- +slug: /toggle +description: "Toggle a setting on or off." +--- + +# Toggle + + + +## Example + +```tsx live + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/layout/_category_.json b/@stellar/design-system-website/docs/components/layout/_category_.json new file mode 100644 index 00000000..1e81c3aa --- /dev/null +++ b/@stellar/design-system-website/docs/components/layout/_category_.json @@ -0,0 +1,6 @@ +{ + "label": "Layout", + "link": { + "type": "generated-index" + } +} diff --git a/@stellar/design-system-website/docs/components/layout/layout.mdx b/@stellar/design-system-website/docs/components/layout/layout.mdx new file mode 100644 index 00000000..7d1b908c --- /dev/null +++ b/@stellar/design-system-website/docs/components/layout/layout.mdx @@ -0,0 +1,79 @@ +--- +slug: /layout +description: "Elements to build page layouts." +--- + +# Layout + + + +## Header + + + +### Example + +```tsx live + + + +``` + +### Props + + + +## Content + + + +### Example + +```tsx live + + Content + +``` + +### Props + + + +## Inset + + + +### Example + +```tsx live + + + Content with inset + + +``` + +### Props + + + +## Footer + + + +### Example + +```tsx live + + + +``` + +### Props + + diff --git a/@stellar/design-system-website/docs/components/layout/pagination.mdx b/@stellar/design-system-website/docs/components/layout/pagination.mdx new file mode 100644 index 00000000..43cf8711 --- /dev/null +++ b/@stellar/design-system-website/docs/components/layout/pagination.mdx @@ -0,0 +1,25 @@ +--- +slug: /pagination +description: "Range of pages for long lists." +--- + +# Pagination + + + +## Example + +```tsx live + + {}} + /> + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/layout/table.mdx b/@stellar/design-system-website/docs/components/layout/table.mdx new file mode 100644 index 00000000..483a9e36 --- /dev/null +++ b/@stellar/design-system-website/docs/components/layout/table.mdx @@ -0,0 +1,70 @@ +--- +slug: /table +description: "Display data in a table." +--- + +# Table + + + +## Example + +```tsx live + + ( + <> + + + + + )} + breakpoint={400} + pageSize={2} + /> + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/notifications/_category_.json b/@stellar/design-system-website/docs/components/notifications/_category_.json new file mode 100644 index 00000000..534b0b43 --- /dev/null +++ b/@stellar/design-system-website/docs/components/notifications/_category_.json @@ -0,0 +1,6 @@ +{ + "label": "Notifications", + "link": { + "type": "generated-index" + } +} diff --git a/@stellar/design-system-website/docs/components/notifications/banner.mdx b/@stellar/design-system-website/docs/components/notifications/banner.mdx new file mode 100644 index 00000000..5642b7dd --- /dev/null +++ b/@stellar/design-system-website/docs/components/notifications/banner.mdx @@ -0,0 +1,20 @@ +--- +slug: /banner +description: "Display message at the top of the page." +--- + +# Banner + + + +## Example + +```tsx live + + Banner message + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/notifications/notification.mdx b/@stellar/design-system-website/docs/components/notifications/notification.mdx new file mode 100644 index 00000000..4ca9f44c --- /dev/null +++ b/@stellar/design-system-website/docs/components/notifications/notification.mdx @@ -0,0 +1,20 @@ +--- +slug: /notification +description: "Draw user attention." +--- + +# Notification + + + +## Example + +```tsx live + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/components/profile/_category_.json b/@stellar/design-system-website/docs/components/profile/_category_.json new file mode 100644 index 00000000..17a31ef9 --- /dev/null +++ b/@stellar/design-system-website/docs/components/profile/_category_.json @@ -0,0 +1,6 @@ +{ + "label": "Profile", + "link": { + "type": "generated-index" + } +} diff --git a/@stellar/design-system-website/docs/components/profile/profile.mdx b/@stellar/design-system-website/docs/components/profile/profile.mdx new file mode 100644 index 00000000..f496fcdf --- /dev/null +++ b/@stellar/design-system-website/docs/components/profile/profile.mdx @@ -0,0 +1,23 @@ +--- +slug: /profile +description: "Avatar with Stellar address." +--- + +# Profile + + + +## Example + +```tsx live + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/foundations/_category_.json b/@stellar/design-system-website/docs/foundations/_category_.json new file mode 100644 index 00000000..8bb8c04b --- /dev/null +++ b/@stellar/design-system-website/docs/foundations/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "Foundations", + "position": 2 +} diff --git a/@stellar/design-system-website/docs/foundations/typography/_category_.json b/@stellar/design-system-website/docs/foundations/typography/_category_.json new file mode 100644 index 00000000..c99f54a5 --- /dev/null +++ b/@stellar/design-system-website/docs/foundations/typography/_category_.json @@ -0,0 +1,7 @@ +{ + "label": "Typography", + "link": { + "type": "generated-index", + "description": "Typography (including headings, paragraph, and other text types) examples and documentation. These components don’t have any special props, and inherit their native HTML attributes." + } +} diff --git a/@stellar/design-system-website/docs/foundations/typography/caption.mdx b/@stellar/design-system-website/docs/foundations/typography/caption.mdx new file mode 100644 index 00000000..aecda01e --- /dev/null +++ b/@stellar/design-system-website/docs/foundations/typography/caption.mdx @@ -0,0 +1,20 @@ +--- +slug: /caption +description: "Text for single-line scenarios." +--- + +# Caption + + + +## Example + +```tsx live + + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/foundations/typography/heading.mdx b/@stellar/design-system-website/docs/foundations/typography/heading.mdx new file mode 100644 index 00000000..b1efef6c --- /dev/null +++ b/@stellar/design-system-website/docs/foundations/typography/heading.mdx @@ -0,0 +1,22 @@ +--- +slug: /heading +description: "HTML headings h1 through h6." +--- + +# Heading + + + +## Example + +```tsx live + + + Heading + + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/foundations/typography/paragraph.mdx b/@stellar/design-system-website/docs/foundations/typography/paragraph.mdx new file mode 100644 index 00000000..bb19ed9e --- /dev/null +++ b/@stellar/design-system-website/docs/foundations/typography/paragraph.mdx @@ -0,0 +1,20 @@ +--- +slug: /paragraph +description: "Text paragraph is an HTML p tag, not a custom component." +--- + +# Paragraph + + + +## Example + +```tsx live + + Paragraph + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/foundations/typography/title.mdx b/@stellar/design-system-website/docs/foundations/typography/title.mdx new file mode 100644 index 00000000..c653fc6d --- /dev/null +++ b/@stellar/design-system-website/docs/foundations/typography/title.mdx @@ -0,0 +1,20 @@ +--- +slug: /title +description: "Non-semantic heading (banner title, navigation item, label)." +--- + +# Title + + + +## Example + +```tsx live + + Title + +``` + +## Props + + diff --git a/@stellar/design-system-website/docs/get-started/_category_.json b/@stellar/design-system-website/docs/get-started/_category_.json new file mode 100644 index 00000000..1bf165d4 --- /dev/null +++ b/@stellar/design-system-website/docs/get-started/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "Get Started", + "position": 1 +} diff --git a/@stellar/design-system-website/docs/get-started/introduction.mdx b/@stellar/design-system-website/docs/get-started/introduction.mdx new file mode 100644 index 00000000..7da8c5dd --- /dev/null +++ b/@stellar/design-system-website/docs/get-started/introduction.mdx @@ -0,0 +1,112 @@ +--- +slug: / +sidebar_position: 1 +--- + +# Introduction + +Stellar Design System (SDS) is an opinionated React component library (we hope +it will grow into a full-featured design system in the future) used in the Stellar +Development Foundation’s web projects. It's meant to be used internally to keep +our web products consistent. + +## Current version + + + npm version + + +## Tech stack + +- TypeScript +- React for UI +- Sass for CSS styling +- Yarn +- Webpack + +## Get started + +Install SDS by using the package manager of your choice. + +```bash npm2yarn +npm install @stellar/design-system +``` + +Add Google Fonts (`Inter Tight`, `Inter`, and `Roboto Mono`) to the `index.html` +file. + +```html + + + +``` + +Add the main CSS file to your project (for example, the main `index` file of +your React project). + +```javascript +import "@stellar/design-system/build/styles.min.css"; +``` + +Import components in your project. + +```javascript +import { Button, Input } from "@stellar/design-system"; +``` + +## Local development + +The design system repo has two parts: + +- `@stellar/design-system` - everything for the design system + ([repo](https://github.com/stellar/stellar-design-system/tree/main/%40stellar/design-system)) +- `@stellar/design-system-website` - website for the design system (what you are + looking at now) + ([repo](https://github.com/stellar/stellar-design-system/tree/main/%40stellar/design-system-website)) + +To run Stellar Design System locally: + +- Clone the repo + +```bash +git clone git@github.com:stellar/stellar-design-system.git +``` + +- Install dependencies + +```bash npm2yarn +npm install +``` + +### Scripts to develop and build locally + +- `build:sds` - build Stellar Design System (sds) project only +- `build:sds-web` - build Stellar Design System website (sds-web) project only +- `build` - build both projects +- `start:sds` - start sds project for local development +- `start:sds-web` - start sds-web project for local development +- `clean` - delete node_modules and build directories in the whole repo + +:::info + +You need to run each `start` command in its own window or tab. + +::: + +## Developer notes + +- Use the Stellar Design System components "as is", don’t modify existing ones to fit + your needs if the component doesn’t allow it. +- If a component doesn’t exist, it’s okay to create it locally for your project + (we’ll keep adding more components to SDS as we go). +- If you are creating a component locally, use only color variables available in + the SDS palette (in `theme.scss`). This is very important for the light and + dark modes to work. When in doubt, please check with the Design team. +- `styled-components` are not currently supported, but you can use them as + wrappers/containers for SDS components. diff --git a/@stellar/design-system-website/docusaurus.config.js b/@stellar/design-system-website/docusaurus.config.js new file mode 100644 index 00000000..dc12ce9a --- /dev/null +++ b/@stellar/design-system-website/docusaurus.config.js @@ -0,0 +1,85 @@ +// @ts-check +// Note: type annotations allow type checking and IDEs autocompletion + +const lightCodeTheme = require("prism-react-renderer/themes/github"); +const darkCodeTheme = require("prism-react-renderer/themes/dracula"); + +/** @type {import('@docusaurus/types').Config} */ +const config = { + title: "Design System", + tagline: "", + favicon: "img/favicon.ico", + + // Set the production url of your site here + url: "https://design-system.stellar.org", + // Set the // pathname under which your site is served + // For GitHub pages deployment, it is often '//' + baseUrl: "/", + + // GitHub pages deployment config. + // If you aren't using GitHub pages, you don't need these. + organizationName: "stellar", // Usually your GitHub org/user name. + projectName: "stellar-design-system", // Usually your repo name. + + onBrokenLinks: "throw", + onBrokenMarkdownLinks: "warn", + + // Even if you don't use internalization, you can use this field to set useful + // metadata like html lang. For example, if your site is Chinese, you may want + // to replace "en" with "zh-Hans". + i18n: { + defaultLocale: "en", + locales: ["en"], + }, + + presets: [ + [ + "classic", + { + docs: { + routeBasePath: "/", + sidebarPath: require.resolve("./sidebars.js"), + remarkPlugins: [ + [require("@docusaurus/remark-plugin-npm2yarn"), { sync: true }], + ], + // Please change this to your repo. + // Remove this to remove the "edit this page" links. + // TODO: update repo + // editUrl: + // "https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/", + }, + theme: { + customCss: require.resolve("./src/css/custom.css"), + }, + }, + ], + ], + + plugins: ["@docusaurus/theme-live-codeblock"], + + themeConfig: + /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ + ({ + image: "img/sds-v2-social-card.png", + navbar: { + title: "Design System", + logo: { + alt: "Stellar logo", + src: "img/stellar.svg", + }, + items: [ + { + href: "https://github.com/stellar/stellar-design-system", + label: "GitHub", + position: "right", + }, + ], + }, + prism: { + theme: lightCodeTheme, + darkTheme: darkCodeTheme, + }, + }), +}; + +module.exports = config; diff --git a/@stellar/design-system-website/package.json b/@stellar/design-system-website/package.json old mode 100755 new mode 100644 index 0142201b..a60f4937 --- a/@stellar/design-system-website/package.json +++ b/@stellar/design-system-website/package.json @@ -4,88 +4,52 @@ "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 --moduleResolution node", + "git-info": "rm -rf src/generated/ && mkdir src/generated/ && echo export default \"{\\\"commitHash\\\": \\\"$(git rev-parse --short HEAD)\\\"};\" > src/generated/gitInfo.ts" }, "dependencies": { - "@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", + "@docusaurus/core": "2.4.1", + "@docusaurus/preset-classic": "2.4.1", + "@docusaurus/remark-plugin-npm2yarn": "^2.4.3", + "@docusaurus/theme-live-codeblock": "^2.4.1", + "@mdx-js/react": "^1.6.22", + "@stellar/design-system": "^1.0.0", + "clsx": "^1.2.1", "prism-react-renderer": "^1.3.5", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "react": "^17.0.2", + "react-dom": "^17.0.2", "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" + "rehype-parse": "^8.0.4", + "rehype-react": "^7.2.0", + "rehype-sanitize": "^5.0.1", + "unified": "^10.1.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 +58,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "engines": { + "node": ">=18.0.0" } } 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/sidebars.js b/@stellar/design-system-website/sidebars.js new file mode 100644 index 00000000..8f1e3da2 --- /dev/null +++ b/@stellar/design-system-website/sidebars.js @@ -0,0 +1,33 @@ +/** + * Creating a sidebar enables you to: + - create an ordered group of docs + - render a sidebar for each doc of that group + - provide next/previous navigation + + The sidebars can be generated from the filesystem, or explicitly defined here. + + Create as many sidebars as you want. + */ + +// @ts-check + +/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */ +const sidebars = { + // By default, Docusaurus generates a sidebar from the docs folder structure + tutorialSidebar: [{ type: "autogenerated", dirName: "." }], + + // But you can create a sidebar manually + /* + tutorialSidebar: [ + 'intro', + 'hello', + { + type: 'category', + label: 'Tutorial', + items: ['tutorial-basics/create-a-document'], + }, + ], + */ +}; + +module.exports = sidebars; 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/componentPreview/assetIconPreview.tsx b/@stellar/design-system-website/src/componentPreview/assetIconPreview.tsx new file mode 100644 index 00000000..ce47e8a3 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/assetIconPreview.tsx @@ -0,0 +1,31 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const assetIconPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "source", + customValue: [ + { + altText: "XLM", + image: "https://cryptologos.cc/logos/stellar-xlm-logo.svg?v=024", + imageSize: "80%", + }, + { + altText: "USDC", + image: "https://cryptologos.cc/logos/usd-coin-usdc-logo.svg?v=024", + }, + ], + options: [ + { + value: "", + label: "Single", + }, + { + value: "pair", + label: "Pair", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/avatarPreview.tsx b/@stellar/design-system-website/src/componentPreview/avatarPreview.tsx new file mode 100644 index 00000000..7ada7139 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/avatarPreview.tsx @@ -0,0 +1,5 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const avatarPreview: ComponentPreview = { + options: [], +}; diff --git a/@stellar/design-system-website/src/componentPreview/badgePreview.tsx b/@stellar/design-system-website/src/componentPreview/badgePreview.tsx new file mode 100644 index 00000000..f7bdcc4f --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/badgePreview.tsx @@ -0,0 +1,32 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const badgePreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "variant", + options: [ + { + value: "default", + label: "Default", + }, + { + value: "success", + label: "Success", + }, + { + value: "warning", + label: "Warning", + }, + { + value: "pending", + label: "Pending", + }, + { + value: "error", + label: "Error", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/bannerPreview.tsx b/@stellar/design-system-website/src/componentPreview/bannerPreview.tsx new file mode 100644 index 00000000..50eb8f7e --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/bannerPreview.tsx @@ -0,0 +1,32 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const bannerPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "variant", + options: [ + { + value: "default", + label: "Default", + }, + { + value: "primary", + label: "Primary", + }, + { + value: "success", + label: "Success", + }, + { + value: "error", + label: "Error", + }, + { + value: "warning", + label: "Warning", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/buttonPresetPreview.tsx b/@stellar/design-system-website/src/componentPreview/buttonPresetPreview.tsx new file mode 100644 index 00000000..28f6f574 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/buttonPresetPreview.tsx @@ -0,0 +1,89 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const buttonPresetPreview: ComponentPreview = { + options: [ + { + type: "checkbox", + prop: "disabled", + label: "Disabled", + }, + { + type: "select", + prop: "preset", + options: [ + { + value: "copy", + label: "Copy", + }, + { + value: "download", + label: "Download", + }, + ], + }, + { + type: "select", + prop: "variant", + options: [ + { + value: "default", + label: "Default", + }, + { + value: "highlight", + label: "Highlight", + }, + ], + }, + { + type: "select", + prop: "label", + options: [ + { + value: "", + label: "Default label", + }, + { + value: "Label", + label: "Custom label", + }, + ], + }, + { + type: "select", + prop: "customSize", + options: [ + { + value: "", + label: "Default size", + }, + { + value: "2rem", + label: "2 rem", + }, + { + value: "3rem", + label: "3 rem", + }, + ], + }, + { + type: "select", + prop: "customColor", + options: [ + { + value: "", + label: "Default color", + }, + { + value: "var(--color-green-50)", + label: "Green", + }, + { + value: "var(--color-yellow-50)", + label: "Yellow", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/buttonPreview.tsx b/@stellar/design-system-website/src/componentPreview/buttonPreview.tsx new file mode 100644 index 00000000..a8e9d023 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/buttonPreview.tsx @@ -0,0 +1,106 @@ +import React from "react"; +import { ComponentPreview } from "@site/src/components/PreviewBlock"; +import CheckIconSvg from "@site/static/img/check-icon.svg"; + +export const buttonPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "variant", + options: [ + { + value: "primary", + label: "Primary", + }, + { + value: "secondary", + label: "Secondary", + }, + { + value: "tertiary", + label: "Tertiary", + }, + { + value: "destructive", + label: "Destructive", + }, + { + value: "error", + label: "Error", + }, + { + value: "success", + label: "Success", + }, + ], + }, + { + type: "select", + prop: "size", + options: [ + { + value: "md", + label: "MD", + }, + { + value: "sm", + label: "SM", + }, + { + value: "xs", + label: "XS", + }, + ], + }, + { + type: "checkbox", + prop: "disabled", + label: "Disabled", + }, + { + type: "checkbox", + prop: "isExtraPadding", + label: "Extra padding", + }, + { + type: "checkbox", + prop: "isFullWidth", + label: "Full width", + }, + { + type: "checkbox", + prop: "isLoading", + label: "Loading", + }, + { + type: "checkbox", + prop: "isPill", + label: "Pill", + }, + { + type: "checkbox", + prop: "isUppercase", + label: "Uppercase", + }, + { + type: "select", + prop: "icon", + customValue: , + clearProp: "iconPosition", + options: [ + { + value: "", + label: "No icon", + }, + { + value: '{"iconPosition": "right"}', + label: "Icon right", + }, + { + value: '{"iconPosition": "left"}', + label: "Icon left", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/captionPreview.tsx b/@stellar/design-system-website/src/componentPreview/captionPreview.tsx new file mode 100644 index 00000000..0882a4be --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/captionPreview.tsx @@ -0,0 +1,28 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const captionPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "size", + options: [ + { + value: "xs", + label: "XS", + }, + { + value: "sm", + label: "SM", + }, + { + value: "md", + label: "MD", + }, + { + value: "lg", + label: "LG", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/cardPreview.tsx b/@stellar/design-system-website/src/componentPreview/cardPreview.tsx new file mode 100644 index 00000000..aedc7283 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/cardPreview.tsx @@ -0,0 +1,39 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const cardPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "variant", + options: [ + { + value: "primary", + label: "Primary", + }, + { + value: "secondary", + label: "Secondary", + }, + ], + }, + { + type: "select", + prop: "borderRadiusSize", + options: [ + { + value: "md", + label: "Medium radius", + }, + { + value: "sm", + label: "Small radius", + }, + ], + }, + { + type: "checkbox", + prop: "noPadding", + label: "No padding", + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/checkboxPreview.tsx b/@stellar/design-system-website/src/componentPreview/checkboxPreview.tsx new file mode 100644 index 00000000..341a3d8b --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/checkboxPreview.tsx @@ -0,0 +1,79 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const checkboxPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "label", + customValue: "Label", + options: [ + { + value: "", + label: "No label", + }, + { + value: "label", + label: "Label", + }, + ], + }, + { + type: "select", + prop: "fieldSize", + options: [ + { + value: "md", + label: "MD", + }, + { + value: "sm", + label: "SM", + }, + { + value: "xs", + label: "XS", + }, + ], + }, + { + type: "checkbox", + prop: "disabled", + label: "Disabled", + }, + { + type: "checkbox", + prop: "isError", + label: "Error", + }, + { + type: "select", + prop: "note", + customValue: "Note message", + options: [ + { + value: "", + label: "No note", + }, + { + value: "note", + label: "Note", + }, + ], + }, + { + type: "select", + prop: "error", + customValue: "Error message", + options: [ + { + value: "", + label: "No error", + }, + { + value: "error", + label: "Error", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/copyTextPreview.tsx b/@stellar/design-system-website/src/componentPreview/copyTextPreview.tsx new file mode 100644 index 00000000..06cde012 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/copyTextPreview.tsx @@ -0,0 +1,5 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const copyTextPreview: ComponentPreview = { + options: [], +}; diff --git a/@stellar/design-system-website/src/componentPreview/headingPreview.tsx b/@stellar/design-system-website/src/componentPreview/headingPreview.tsx new file mode 100644 index 00000000..e2b787a9 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/headingPreview.tsx @@ -0,0 +1,66 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const headingPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "as", + options: [ + { + value: "h1", + label: "h1", + }, + { + value: "h2", + label: "h2", + }, + { + value: "h3", + label: "h3", + }, + { + value: "h4", + label: "h4", + }, + { + value: "h5", + label: "h5", + }, + { + value: "h6", + label: "h6", + }, + ], + }, + { + type: "select", + prop: "size", + options: [ + { + value: "xs", + label: "XS", + }, + { + value: "sm", + label: "SM", + }, + { + value: "md", + label: "MD", + }, + { + value: "lg", + label: "LG", + }, + { + value: "xl", + label: "XL", + }, + { + value: "xxl", + label: "XXL", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/iconButtonPreview.tsx b/@stellar/design-system-website/src/componentPreview/iconButtonPreview.tsx new file mode 100644 index 00000000..d4f7248f --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/iconButtonPreview.tsx @@ -0,0 +1,87 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const iconButtonPreview: ComponentPreview = { + options: [ + { + type: "checkbox", + prop: "disabled", + label: "Disabled", + }, + { + type: "select", + prop: "variant", + options: [ + { + value: "default", + label: "Default", + }, + { + value: "error", + label: "Error", + }, + { + value: "success", + label: "Success", + }, + { + value: "warning", + label: "Warning", + }, + { + value: "highlight", + label: "Highlight", + }, + ], + }, + { + type: "select", + prop: "label", + options: [ + { + value: "", + label: "No label", + }, + { + value: "Label", + label: "Label", + }, + ], + }, + { + type: "select", + prop: "customSize", + options: [ + { + value: "", + label: "Default size", + }, + { + value: "2rem", + label: "2 rem", + }, + { + value: "3rem", + label: "3 rem", + }, + ], + }, + { + type: "select", + prop: "customColor", + options: [ + { + value: "", + label: "Default color", + }, + { + value: "var(--color-purple-50)", + label: "Purple", + }, + { + value: "var(--color-yellow-50)", + label: "Yellow", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/inputPreview.tsx b/@stellar/design-system-website/src/componentPreview/inputPreview.tsx new file mode 100644 index 00000000..1b03f732 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/inputPreview.tsx @@ -0,0 +1,131 @@ +import React from "react"; +import { ComponentPreview } from "@site/src/components/PreviewBlock"; +import CheckIconSvg from "@site/static/img/check-icon.svg"; + +export const inputPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "label", + customValue: "Label", + options: [ + { + value: "", + label: "No label", + }, + { + value: "label", + label: "Label", + }, + ], + }, + { + type: "select", + prop: "placeholder", + customValue: "Placeholder", + options: [ + { + value: "", + label: "No placeholder", + }, + { + value: "placeholder", + label: "Placeholder", + }, + ], + }, + { + type: "select", + prop: "fieldSize", + options: [ + { + value: "md", + label: "MD", + }, + { + value: "sm", + label: "SM", + }, + { + value: "xs", + label: "XS", + }, + ], + }, + { + type: "checkbox", + prop: "disabled", + label: "Disabled", + }, + { + type: "checkbox", + prop: "isLabelUppercase", + label: "Uppercase label", + }, + { + type: "checkbox", + prop: "isPill", + label: "Pill", + }, + { + type: "checkbox", + prop: "isError", + label: "Error", + }, + { + type: "checkbox", + prop: "isExtraPadding", + label: "Extra padding", + }, + { + type: "checkbox", + prop: "isPassword", + label: "Password", + }, + { + type: "select", + prop: "rightElement", + customValue: , + options: [ + { + value: "", + label: "No element", + }, + { + value: "element", + label: "Element", + }, + ], + }, + { + type: "select", + prop: "note", + customValue: "Note message", + options: [ + { + value: "", + label: "No note", + }, + { + value: "note", + label: "Note", + }, + ], + }, + { + type: "select", + prop: "error", + customValue: "Error message", + options: [ + { + value: "", + label: "No error", + }, + { + value: "error", + label: "Error", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/layoutPreview.tsx b/@stellar/design-system-website/src/componentPreview/layoutPreview.tsx new file mode 100644 index 00000000..126598a7 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/layoutPreview.tsx @@ -0,0 +1,5 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const layoutPreview: ComponentPreview = { + options: [], +}; diff --git a/@stellar/design-system-website/src/componentPreview/linkPreview.tsx b/@stellar/design-system-website/src/componentPreview/linkPreview.tsx new file mode 100644 index 00000000..d50e35c0 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/linkPreview.tsx @@ -0,0 +1,79 @@ +import React from "react"; +import { ComponentPreview } from "@site/src/components/PreviewBlock"; +import CheckIconSvg from "@site/static/img/check-icon.svg"; + +export const linkPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "variant", + options: [ + { + value: "primary", + label: "Primary", + }, + { + value: "secondary", + label: "Secondary", + }, + ], + }, + { + type: "select", + prop: "size", + options: [ + { + value: "md", + label: "MD", + }, + { + value: "sm", + label: "SM", + }, + { + value: "xs", + label: "XS", + }, + { + value: "", + label: "Inherit", + }, + ], + }, + { + type: "checkbox", + prop: "isDisabled", + label: "Disabled", + }, + { + type: "checkbox", + prop: "isUnderline", + label: "Underline", + }, + { + type: "checkbox", + prop: "isUppercase", + label: "Uppercase", + }, + { + type: "select", + prop: "icon", + customValue: , + clearProp: "iconPosition", + options: [ + { + value: "", + label: "No icon", + }, + { + value: '{"iconPosition": "right"}', + label: "Icon right", + }, + { + value: '{"iconPosition": "left"}', + label: "Icon left", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/loaderPreview.tsx b/@stellar/design-system-website/src/componentPreview/loaderPreview.tsx new file mode 100644 index 00000000..48469188 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/loaderPreview.tsx @@ -0,0 +1,24 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const loaderPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "size", + options: [ + { + value: "", + label: "Default size", + }, + { + value: "2rem", + label: "2 rem", + }, + { + value: "3rem", + label: "3 rem", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/modalPreview.tsx b/@stellar/design-system-website/src/componentPreview/modalPreview.tsx new file mode 100644 index 00000000..ab041db8 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/modalPreview.tsx @@ -0,0 +1,5 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const modalPreview: ComponentPreview = { + options: [], +}; diff --git a/@stellar/design-system-website/src/componentPreview/navButtonPreview.tsx b/@stellar/design-system-website/src/componentPreview/navButtonPreview.tsx new file mode 100644 index 00000000..2dc371cd --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/navButtonPreview.tsx @@ -0,0 +1,16 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const navButtonPreview: ComponentPreview = { + options: [ + { + type: "checkbox", + prop: "disabled", + label: "Disabled", + }, + { + type: "checkbox", + prop: "showBorder", + label: "Show border", + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/notificationPreview .tsx b/@stellar/design-system-website/src/componentPreview/notificationPreview .tsx new file mode 100644 index 00000000..b30b3062 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/notificationPreview .tsx @@ -0,0 +1,65 @@ +import React from "react"; +import { ComponentPreview } from "@site/src/components/PreviewBlock"; +import CheckIconSvg from "@site/static/img/check-icon.svg"; + +export const notificationPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "variant", + options: [ + { + value: "primary", + label: "Primary", + }, + { + value: "secondary", + label: "Secondary", + }, + { + value: "success", + label: "Success", + }, + { + value: "error", + label: "Error", + }, + { + value: "warning", + label: "Warning", + }, + ], + }, + { + type: "select", + prop: "icon", + customValue: , + options: [ + { + value: "", + label: "Default icon", + }, + { + value: "customIcon", + label: "Custom icon", + }, + ], + }, + { + type: "select", + prop: "children", + customValue: + "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur asperiores autem excepturi doloremque esse, dicta sunt soluta! Quia quis eos beatae et optio facere voluptatum. Labore illum molestiae corporis id?", + options: [ + { + value: "", + label: "No message", + }, + { + value: "Message", + label: "Message", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/paginationPreview.tsx b/@stellar/design-system-website/src/componentPreview/paginationPreview.tsx new file mode 100644 index 00000000..8ae9fac3 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/paginationPreview.tsx @@ -0,0 +1,5 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const paginationPreview: ComponentPreview = { + options: [], +}; diff --git a/@stellar/design-system-website/src/componentPreview/paragraphPreview.tsx b/@stellar/design-system-website/src/componentPreview/paragraphPreview.tsx new file mode 100644 index 00000000..61659f4c --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/paragraphPreview.tsx @@ -0,0 +1,33 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const paragraphPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "size", + options: [ + { + value: "xs", + label: "XS", + }, + { + value: "sm", + label: "SM", + }, + { + value: "md", + label: "MD", + }, + { + value: "lg", + label: "LG", + }, + ], + }, + { + type: "checkbox", + prop: "asDiv", + label: "As div", + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/profilePreview.tsx b/@stellar/design-system-website/src/componentPreview/profilePreview.tsx new file mode 100644 index 00000000..a1b5e21e --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/profilePreview.tsx @@ -0,0 +1,84 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const profilePreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "size", + options: [ + { + value: "md", + label: "MD", + }, + { + value: "sm", + label: "SM", + }, + { + value: "xs", + label: "XS", + }, + ], + }, + { + type: "select", + prop: "federatedAddress", + customValue: "test*stellar.org", + options: [ + { + value: "", + label: "No federated", + }, + { + value: "Federated", + label: "Federated", + }, + ], + }, + { + type: "checkbox", + prop: "isShort", + label: "Short", + }, + { + type: "select", + prop: "href", + customValue: "https://stellar.org", + options: [ + { + value: "", + label: "No link", + }, + { + value: "link", + label: "Link", + }, + ], + }, + { + type: "checkbox", + prop: "hideAvatar", + label: "Hide avatar", + }, + { + type: "checkbox", + prop: "isCopy", + label: "Copy", + }, + { + type: "select", + prop: "onClick", + customValue: () => alert("Click!"), + options: [ + { + value: "", + label: "No click", + }, + { + value: "Click", + label: "Click", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/projectLogoPreview.tsx b/@stellar/design-system-website/src/componentPreview/projectLogoPreview.tsx new file mode 100644 index 00000000..ca6a90c0 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/projectLogoPreview.tsx @@ -0,0 +1,5 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const projectLogoPreview: ComponentPreview = { + options: [], +}; diff --git a/@stellar/design-system-website/src/componentPreview/radioButtonPreview.tsx b/@stellar/design-system-website/src/componentPreview/radioButtonPreview.tsx new file mode 100644 index 00000000..95184a59 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/radioButtonPreview.tsx @@ -0,0 +1,29 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const radioButtonPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "fieldSize", + options: [ + { + value: "md", + label: "MD", + }, + { + value: "sm", + label: "SM", + }, + { + value: "xs", + label: "XS", + }, + ], + }, + { + type: "checkbox", + prop: "disabled", + label: "Disabled", + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/selectPreview.tsx b/@stellar/design-system-website/src/componentPreview/selectPreview.tsx new file mode 100644 index 00000000..378da196 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/selectPreview.tsx @@ -0,0 +1,94 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const selectPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "label", + customValue: "Label", + options: [ + { + value: "", + label: "No label", + }, + { + value: "label", + label: "Label", + }, + ], + }, + { + type: "select", + prop: "fieldSize", + options: [ + { + value: "md", + label: "MD", + }, + { + value: "sm", + label: "SM", + }, + { + value: "xs", + label: "XS", + }, + ], + }, + { + type: "checkbox", + prop: "disabled", + label: "Disabled", + }, + { + type: "checkbox", + prop: "isLabelUppercase", + label: "Uppercase label", + }, + { + type: "checkbox", + prop: "isPill", + label: "Pill", + }, + { + type: "checkbox", + prop: "isError", + label: "Error", + }, + { + type: "checkbox", + prop: "isExtraPadding", + label: "Extra padding", + }, + { + type: "select", + prop: "note", + customValue: "Note message", + options: [ + { + value: "", + label: "No note", + }, + { + value: "note", + label: "Note", + }, + ], + }, + { + type: "select", + prop: "error", + customValue: "Error message", + options: [ + { + value: "", + label: "No error", + }, + { + value: "error", + label: "Error", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/tablePreview.tsx b/@stellar/design-system-website/src/componentPreview/tablePreview.tsx new file mode 100644 index 00000000..0d3db5b3 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/tablePreview.tsx @@ -0,0 +1,31 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const tablePreview: ComponentPreview = { + options: [ + { + type: "checkbox", + prop: "hideNumberColumn", + label: "Hide number column", + }, + { + type: "checkbox", + prop: "isLoading", + label: "Loading", + }, + { + type: "select", + prop: "data", + customValue: [], + options: [ + { + value: "", + label: "With data", + }, + { + value: "no-data", + label: "Without data", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/textareaPreview.tsx b/@stellar/design-system-website/src/componentPreview/textareaPreview.tsx new file mode 100644 index 00000000..c7e0885f --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/textareaPreview.tsx @@ -0,0 +1,104 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const textareaPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "label", + customValue: "Label", + options: [ + { + value: "", + label: "No label", + }, + { + value: "label", + label: "Label", + }, + ], + }, + { + type: "select", + prop: "placeholder", + customValue: "Placeholder", + options: [ + { + value: "", + label: "No placeholder", + }, + { + value: "placeholder", + label: "Placeholder", + }, + ], + }, + { + type: "select", + prop: "fieldSize", + options: [ + { + value: "md", + label: "MD", + }, + { + value: "sm", + label: "SM", + }, + { + value: "xs", + label: "XS", + }, + ], + }, + { + type: "checkbox", + prop: "disabled", + label: "Disabled", + }, + { + type: "checkbox", + prop: "isLabelUppercase", + label: "Uppercase label", + }, + { + type: "checkbox", + prop: "isError", + label: "Error", + }, + { + type: "checkbox", + prop: "isExtraPadding", + label: "Extra padding", + }, + { + type: "select", + prop: "note", + customValue: "Note message", + options: [ + { + value: "", + label: "No note", + }, + { + value: "note", + label: "Note", + }, + ], + }, + { + type: "select", + prop: "error", + customValue: "Error message", + options: [ + { + value: "", + label: "No error", + }, + { + value: "error", + label: "Error", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/titlePreview.tsx b/@stellar/design-system-website/src/componentPreview/titlePreview.tsx new file mode 100644 index 00000000..261f3a66 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/titlePreview.tsx @@ -0,0 +1,28 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const titlePreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "size", + options: [ + { + value: "xs", + label: "XS", + }, + { + value: "sm", + label: "SM", + }, + { + value: "md", + label: "MD", + }, + { + value: "lg", + label: "LG", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/togglePreview.tsx b/@stellar/design-system-website/src/componentPreview/togglePreview.tsx new file mode 100644 index 00000000..45d6c9b0 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/togglePreview.tsx @@ -0,0 +1,26 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const togglePreview: ComponentPreview = { + options: [ + { + type: "checkbox", + prop: "disabled", + label: "Disabled", + }, + { + type: "select", + prop: "checked", + customValue: true, + options: [ + { + value: "", + label: "Off", + }, + { + value: "on", + label: "On", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/componentPreview/tooltipPreview.tsx b/@stellar/design-system-website/src/componentPreview/tooltipPreview.tsx new file mode 100644 index 00000000..88bcfb78 --- /dev/null +++ b/@stellar/design-system-website/src/componentPreview/tooltipPreview.tsx @@ -0,0 +1,94 @@ +import { ComponentPreview } from "@site/src/components/PreviewBlock"; + +export const tooltipPreview: ComponentPreview = { + options: [ + { + type: "select", + prop: "placement", + options: [ + { + value: "", + label: "Placement", + }, + { + value: "bottom", + label: "Bottom", + }, + { + value: "bottom-start", + label: "Bottom start", + }, + { + value: "bottom-end", + label: "Bottom end", + }, + { + value: "left", + label: "Left", + }, + { + value: "left-start", + label: "Left start", + }, + { + value: "left-end", + label: "Left end", + }, + { + value: "right", + label: "Right", + }, + { + value: "right-start", + label: "Right start", + }, + { + value: "right-end", + label: "Right end", + }, + { + value: "top", + label: "Top", + }, + { + value: "top-start", + label: "Top start", + }, + { + value: "top-end", + label: "Top end", + }, + ], + }, + { + type: "select", + prop: "isVisible", + customValue: false, + options: [ + { + value: "", + label: "Visible", + }, + { + value: "hidden", + label: "Hidden", + }, + ], + }, + { + type: "select", + prop: "isContrast", + customValue: false, + options: [ + { + value: "", + label: "Contrast", + }, + { + value: "noContrast", + label: "No contrast", + }, + ], + }, + ], +}; diff --git a/@stellar/design-system-website/src/constants/details/assets.tsx b/@stellar/design-system-website/src/components/AssetPreview/index.tsx similarity index 82% rename from @stellar/design-system-website/src/constants/details/assets.tsx rename to @stellar/design-system-website/src/components/AssetPreview/index.tsx index 7fcd6181..7dc52fb2 100644 --- a/@stellar/design-system-website/src/constants/details/assets.tsx +++ b/@stellar/design-system-website/src/components/AssetPreview/index.tsx @@ -1,17 +1,20 @@ -import { Icon, Logo } from "@stellar/design-system"; -import { ComponentDetails, ComponentDetailsId } from "types/types"; +import React, { useEffect, useState } from "react"; +import "./styles.css"; -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: [ +export const AssetPreview = ({ type }: { type: "icon" | "logo" }) => { + const [sds, setSds] = useState({}); + const { Icon, Logo } = sds; + + // Importing SDS here because we need it async for server-side-rendering + useEffect(() => { + const initSds = async () => { + setSds(await import("@stellar/design-system")); + }; + initSds(); + }, []); + + const ICON = Icon + ? [ , , , @@ -162,26 +165,31 @@ export const assets: ComponentDetails = { , , , - ], - useGridLayout: true, - }, - { - title: "Logos", - description: - "SVG logo components, which can be styled in CSS if necessary.", - component: [ + ] + : []; + + const LOGO = Logo + ? [ , , , , , - ], - useGridLayout: true, - }, - ], - props: [], - externalProps: { - link: "", - label: "", - }, + ] + : []; + + const list = type === "icon" ? ICON : LOGO; + + return ( +
+ {list.map((l) => { + return ( +
+
{l}
+
{l.type.name}
+
+ ); + })} +
+ ); }; diff --git a/@stellar/design-system-website/src/components/AssetPreview/styles.css b/@stellar/design-system-website/src/components/AssetPreview/styles.css new file mode 100644 index 00000000..39090633 --- /dev/null +++ b/@stellar/design-system-website/src/components/AssetPreview/styles.css @@ -0,0 +1,36 @@ +.AssetPreview { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); + gap: 1rem; +} + +.AssetPreview__item { + height: 10rem; + background-color: var(--ifm-sds-icon-bg); + color: var(--ifm-sds-icon-fill); + border-radius: 4px; + padding: 1rem; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.AssetPreview__item__icon { + flex: 1; + display: flex; + align-items: center; + justify-content: center; +} + +.AssetPreview__item__icon svg { + width: auto; + height: 1.5rem; +} + +.AssetPreview__item__name { + color: var(--ifm-sds-icon-text); + font-size: 14px; + text-align: center; + font-family: var(--ifm-font-family-monospace); + fill: var(--ifm-sds-icon-fill); +} diff --git a/@stellar/design-system-website/src/components/ComponentDescription/index.tsx b/@stellar/design-system-website/src/components/ComponentDescription/index.tsx new file mode 100644 index 00000000..4e847bbf --- /dev/null +++ b/@stellar/design-system-website/src/components/ComponentDescription/index.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import SdsDocs from "@stellar/design-system/docs/components.json"; +import { ParseSummary } from "@site/src/components/ParseSummary"; + +export const ComponentDescription = ({ + componentName, +}: { + componentName: string; +}) => { + const component = SdsDocs?.children?.find( + (c) => c.name === componentName && c.variant === "declaration", + ); + + if (!component) { + throw Error(`Component "${componentName}" description not found.`); + } + + return ( +

+ +

+ ); +}; diff --git a/@stellar/design-system-website/src/components/ComponentProps/index.tsx b/@stellar/design-system-website/src/components/ComponentProps/index.tsx new file mode 100644 index 00000000..9120bbe6 --- /dev/null +++ b/@stellar/design-system-website/src/components/ComponentProps/index.tsx @@ -0,0 +1,101 @@ +import React, { Fragment } from "react"; +import SdsDocs from "@stellar/design-system/docs/components.json"; +import { Element } from "@site/src/components/Element"; +import { ParseSummary } from "@site/src/components/ParseSummary"; +import { ElementPropType } from "@site/src/components/ElementPropType"; + +export const ComponentProps = ({ + componentName, + relatedType, +}: { + componentName: string; + // To associate custom types that are used in the component. For example, + // AssetIconSource in AssetIcon. + relatedType?: string[]; +}) => { + const component = SdsDocs?.children?.find( + (c) => c.name === `${componentName}Props` && c.variant === "declaration", + ); + + if (!component) { + throw Error(`Component "${componentName}" props not found.`); + } + + const relatedTypes = relatedType?.map((t) => + SdsDocs?.children?.find((c) => c.name === t && c.variant === "declaration"), + ); + + const PropRow = ({ p }: { p: any }) => { + const defaultVal = p.comment?.blockTags?.[0]?.content?.[0]; + + return ( +
+ + + + + + + ); + }; + + const props = component.children.map((p) => ); + + const relatedTypeProps = relatedTypes?.map((t) => { + const props = t.children || t?.type?.declaration?.children; + + return ( + + + + + {props?.map((t) => ( + + ))} + + ); + }); + + return ( +
+
{item.field1}{item.field2}{item.field3}
Caption
+ {p.name} + + + + {defaultVal ? ( + + ) : null} + {p?.flags?.isOptional ? "Yes" : ""} + +
+ {t.name} +
+ + + + + + + + + + + {props} + {relatedTypeProps} + +
PropTypeDefaultOptionalDescription
+ + {component.comment?.summary ? ( +

+ +

+ ) : null} + + ); +}; 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/Element.tsx b/@stellar/design-system-website/src/components/Element.tsx new file mode 100644 index 00000000..f929ea92 --- /dev/null +++ b/@stellar/design-system-website/src/components/Element.tsx @@ -0,0 +1,66 @@ +import React, { Fragment, createElement } from "react"; +import Link from "@docusaurus/Link"; +import rehypeParse from "rehype-parse"; +import rehypeReact from "rehype-react"; +import rehypeSanitize from "rehype-sanitize"; +import { unified } from "unified"; + +export type ElementKind = "text" | "code" | "inline-tag"; + +export interface ElementProps { + text: string; + kind: ElementKind | string; + tag?: string; +} + +export const Element = ({ text, kind, tag }: ElementProps) => { + switch (kind) { + case "code": + // Remove `` + return {text.slice(1, -1)}; + case "inline-tag": + // Remove @ from tag to use as a slug for relative link + return {text}; + // text is default + default: + return parseMarkdownString(text); + } +}; + +const parseMarkdownString = (text: string): React.ReactElement => { + const matches = text.match(/\[.*?\)/g); + + if (matches) { + for (const m of matches) { + const linkText = m.match(/\[(.*?)\]/)[1]; + const linkUrl = m.match(/\((.*?)\)/)[1]; + + // TODO: can check if it's relative link + text = text.replace( + m, + `${linkText}`, + ); + } + } + + text = parseLineBreak(text); + + const file = unified() + .use(rehypeSanitize) + .use(rehypeParse, { fragment: true }) + .use(rehypeReact, { createElement, Fragment }) + .processSync(text); + + return file.result; +}; + +const parseLineBreak = (text: string) => { + const lineBreakPattern = /\n\n/i; + const matches = text.match(lineBreakPattern); + + if (matches) { + return `${text.replace(lineBreakPattern, `

`)}`; + } + + return text; +}; 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/src/components/ElementPropType.tsx b/@stellar/design-system-website/src/components/ElementPropType.tsx new file mode 100644 index 00000000..77b8ece5 --- /dev/null +++ b/@stellar/design-system-website/src/components/ElementPropType.tsx @@ -0,0 +1,44 @@ +import React, { Fragment } from "react"; + +export const ElementPropType = ({ type }: { type: any }) => { + switch (type.type) { + case "union": + return type.types.map((t, i) => ( + + {t.value}{" "} + + )); + case "reflection": + // TODO: improve parsing functions. This approach is very specific for a + // few cases we have. + if (type.declaration?.children?.length > 0) { + const props = type.declaration?.children + .map( + (c) => + `${c.name}: ${ + c.type.type === "intrinsic" ? c.type.name : "() => void" + }`, + ) + .join("; "); + return {`{ ${props} }`}; + } + + if (type.declaration?.signatures?.[0]?.parameters?.length > 0) { + const params = type.declaration?.signatures?.[0]?.parameters + .map((p) => `${p.name}: ${p.type.name}`) + .join(", "); + const returnType = type.declaration?.signatures?.[0].type.name; + + return {`(${params}) => ${returnType}`}; + } + + return {`() => void`}; + case "array": + return {`${type?.elementType?.name || ""}[]`}; + case "intrinsic": + case "reference": + return {type.name}; + default: + return ""; + } +}; diff --git a/@stellar/design-system-website/src/components/ParseSummary.tsx b/@stellar/design-system-website/src/components/ParseSummary.tsx new file mode 100644 index 00000000..dacabe1f --- /dev/null +++ b/@stellar/design-system-website/src/components/ParseSummary.tsx @@ -0,0 +1,12 @@ +import React from "react"; +import { Element } from "@site/src/components/Element"; + +export const ParseSummary = ({ summary }: { summary: any }) => { + return ( + <> + {summary?.map((s, i) => ( + + ))} + + ); +}; diff --git a/@stellar/design-system-website/src/components/PreviewBlock/index.tsx b/@stellar/design-system-website/src/components/PreviewBlock/index.tsx new file mode 100644 index 00000000..a7a19819 --- /dev/null +++ b/@stellar/design-system-website/src/components/PreviewBlock/index.tsx @@ -0,0 +1,373 @@ +import React, { cloneElement, useEffect, useState } from "react"; +import reactElementToJSXString from "react-element-to-jsx-string"; +import { PlaygroundEditor } from "@site/src/theme/Playground"; +import "./styles.css"; + +// ============================================================================= +// Preview imports +// ============================================================================= +import { assetIconPreview } from "@site/src/componentPreview/assetIconPreview"; +import { avatarPreview } from "@site/src/componentPreview/avatarPreview"; +import { badgePreview } from "@site/src/componentPreview/badgePreview"; +import { bannerPreview } from "@site/src/componentPreview/bannerPreview"; +import { buttonPreview } from "@site/src/componentPreview/buttonPreview"; +import { buttonPresetPreview } from "@site/src/componentPreview/buttonPresetPreview"; +import { captionPreview } from "@site/src/componentPreview/captionPreview"; +import { cardPreview } from "@site/src/componentPreview/cardPreview"; +import { checkboxPreview } from "@site/src/componentPreview/checkboxPreview"; +import { copyTextPreview } from "@site/src/componentPreview/copyTextPreview"; +import { headingPreview } from "@site/src/componentPreview/headingPreview"; +import { iconButtonPreview } from "@site/src/componentPreview/iconButtonPreview"; +import { inputPreview } from "@site/src/componentPreview/inputPreview"; +import { layoutPreview } from "@site/src/componentPreview/layoutPreview"; +import { linkPreview } from "@site/src/componentPreview/linkPreview"; +import { loaderPreview } from "@site/src/componentPreview/loaderPreview"; +import { modalPreview } from "@site/src/componentPreview/modalPreview"; +import { navButtonPreview } from "@site/src/componentPreview/navButtonPreview"; +import { notificationPreview } from "@site/src/componentPreview/notificationPreview "; +import { paginationPreview } from "@site/src/componentPreview/paginationPreview"; +import { paragraphPreview } from "@site/src/componentPreview/paragraphPreview"; +import { profilePreview } from "@site/src/componentPreview/profilePreview"; +import { projectLogoPreview } from "@site/src/componentPreview/projectLogoPreview"; +import { radioButtonPreview } from "@site/src/componentPreview/radioButtonPreview"; +import { selectPreview } from "@site/src/componentPreview/selectPreview"; +import { tablePreview } from "@site/src/componentPreview/tablePreview"; +import { textareaPreview } from "@site/src/componentPreview/textareaPreview"; +import { titlePreview } from "@site/src/componentPreview/titlePreview"; +import { togglePreview } from "@site/src/componentPreview/togglePreview"; +import { tooltipPreview } from "@site/src/componentPreview/tooltipPreview"; + +// ============================================================================= +// Component previews +// ============================================================================= +const previews: { [key: string]: ComponentPreview } = { + AssetIcon: assetIconPreview, + Avatar: avatarPreview, + Badge: badgePreview, + Banner: bannerPreview, + Button: buttonPreview, + ButtonPreset: buttonPresetPreview, + Caption: captionPreview, + Card: cardPreview, + Checkbox: checkboxPreview, + Content: layoutPreview, + CopyText: copyTextPreview, + Footer: layoutPreview, + Heading: headingPreview, + Header: layoutPreview, + IconButton: iconButtonPreview, + Input: inputPreview, + Inset: layoutPreview, + Layout: layoutPreview, + Link: linkPreview, + Loader: loaderPreview, + Modal: modalPreview, + NavButton: navButtonPreview, + Notification: notificationPreview, + Pagination: paginationPreview, + Paragraph: paragraphPreview, + Profile: profilePreview, + ProjectLogo: projectLogoPreview, + RadioButton: radioButtonPreview, + Select: selectPreview, + Table: tablePreview, + Textarea: textareaPreview, + Title: titlePreview, + Toggle: togglePreview, + Tooltip: tooltipPreview, +}; + +type Theme = "sds-theme-light" | "sds-theme-dark"; + +// Types +export type PreviewOptionType = "select" | "checkbox"; + +interface PreviewOptionBase { + type: PreviewOptionType; + prop: string; + clearProp?: string; + customValue?: any; +} + +interface PreviewOptionSelect extends PreviewOptionBase { + options: { + value: string; + label: string; + }[]; +} + +interface PreviewOptionCheckbox extends PreviewOptionBase { + label: string; +} + +export type ComponentPreview = { + options: (PreviewOptionSelect | PreviewOptionCheckbox)[]; +}; + +/** + * This file handles the layout and logic for the PreviewBlock to render + * components. + * + * Config file for every component is in /src/componentPreview/ directory. File + * names are [componentName]Preview. + */ +export const PreviewBlock = ({ + componentName, + children, +}: { + componentName: string; + children: React.ReactElement; +}) => { + const [sds, setSds] = useState({}); + const { Checkbox, Select, Notification, Button, Modal } = sds; + + // Importing SDS here because we need it async for server-side-rendering + useEffect(() => { + const initSds = async () => { + setSds(await import("@stellar/design-system")); + }; + initSds(); + }, []); + + const [theme, setTheme] = useState("sds-theme-light"); + + const compPreview = previews[componentName]; + + if (!compPreview) { + throw Error(`There is no preview for "${componentName}" component.`); + } + + const [props, setProps] = useState({}); + const [isModalOpen, setIsModalOpen] = useState(false); + const [isBasicModalOpen, setIsBasicModalOpen] = useState(false); + + const handleSelectChange = ( + event: React.ChangeEvent, + customValue: any, + clearProp: string, + ) => { + const { id, value } = event.target; + const _props = props; + + let valObj = {}; + + // If the value is object, assuming it's setting another prop. For example, + // icon dropdown is setting icon and icon position + try { + valObj = JSON.parse(value); + } catch (error) { + // do nothing + } + + if (value) { + setProps({ ..._props, [id]: customValue ?? value, ...valObj }); + } else { + delete _props[id]; + + if (clearProp) { + delete _props[clearProp]; + } + + setProps({ ..._props }); + } + }; + + const handleCheckboxChange = ( + event: React.ChangeEvent, + customValue: any, + clearProp: string, + ) => { + const { id, checked } = event.target; + const _props = props; + + if (!checked && clearProp && props[clearProp]) { + delete _props[clearProp]; + } + + setProps({ + ..._props, + [id]: checked ? customValue ?? true : false, + }); + }; + + const renderSelect = (option: PreviewOptionSelect) => { + return Select ? ( + + ) : null; + }; + + const renderCheckbox = (option: PreviewOptionCheckbox) => { + return Checkbox ? ( + + handleCheckboxChange(e, option.customValue, option.clearProp) + } + key={option.prop} + /> + ) : null; + }; + + // Default component with props + const component = cloneElement(children, { ...props }); + + const options = compPreview.options.reduce( + (res, cur) => { + if (cur.type === "checkbox") { + res.checkbox.push(cur); + } + + if (cur.type === "select") { + res.select.push(cur); + } + + return res; + }, + { checkbox: [], select: [] }, + ); + + const renderPreview = () => { + // Need to handle Notification manually because of name collision that + // breaks rendering + if (componentName === "Notification") { + return Notification ? ( + + ) : null; + } + + // Need to handle Modal manually because of button on click trigger to show + // or hide + if (componentName === "Modal") { + return Button && Modal ? ( +
+ + + + + setIsBasicModalOpen(false)} + parentId="preview-block" + visible={isBasicModalOpen} + > +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur + eius beatae sint dolorem, excepturi quos enim, et ullam suscipit + voluptates voluptas accusantium repellendus amet explicabo, iure + veritatis aperiam alias molestiae. +

+
+ + setIsModalOpen(false)} + parentId="preview-block" + visible={isModalOpen} + > + Modal heading + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Pariatur eius beatae sint dolorem, excepturi quos enim, et ullam + suscipit voluptates voluptas accusantium repellendus amet + explicabo, iure veritatis aperiam alias molestiae. +

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Pariatur eius beatae sint dolorem, excepturi quos enim, et ullam + suscipit voluptates voluptas accusantium repellendus amet + explicabo, iure veritatis aperiam alias molestiae. +

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Pariatur eius beatae sint dolorem, excepturi quos enim, et ullam + suscipit voluptates voluptas accusantium repellendus amet + explicabo, iure veritatis aperiam alias molestiae. +

+
+ + + + +
+
+ ) : null; + } + + return component; + }; + + return ( + <> +
+
+
+ {Select ? ( + + ) : null} + + {options.select.map((o) => renderSelect(o))} +
+
+ +
{renderPreview()}
+ + {options.checkbox.length > 0 ? ( +
+
+ {options.checkbox.map((o) => renderCheckbox(o))} +
+
+ ) : null} +
+ + {reactElementToJSXString(component)} + + ); +}; diff --git a/@stellar/design-system-website/src/components/PreviewBlock/styles.css b/@stellar/design-system-website/src/components/PreviewBlock/styles.css new file mode 100644 index 00000000..c0b281c1 --- /dev/null +++ b/@stellar/design-system-website/src/components/PreviewBlock/styles.css @@ -0,0 +1,137 @@ +.PreviewBlock { + background-color: var(--color-gray-00); + background-image: radial-gradient(var(--color-gray-40) 10%, transparent 11%), + radial-gradient(var(--color-gray-40) 10%, transparent 11%); + background-size: 12px 12px; + background-position: 0 0, 12px 12px; + background-repeat: repeat; + padding: 1.5rem 1rem; + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; + border: 1px solid var(--color-gray-40); + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.PreviewBlock__block { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; +} + +/* Selects */ +.PreviewBlock__selects__content { + display: flex; + align-items: center; + gap: 0.5rem; + flex-wrap: wrap; + flex: 1; +} + +.PreviewBlock__selects__content > *, +.PreviewBlock__checkbox__content > * { + flex-shrink: 0; +} + +.PreviewBlock__selects__content .Select { + width: 9rem; +} + +/* Checkboxes */ +.PreviewBlock__checkboxes__content { + border: 1px solid var(--color-gray-40); + background-color: var(--color-gray-00); + border-radius: 0.25rem; + padding: 0.75rem; + display: flex; + flex-wrap: wrap; + gap: 0.5rem 1.5rem; + width: fit-content; + color: var(--color-gray-80); +} + +.PreviewBlock__component { + min-height: 15rem; + display: flex; + align-items: center; + justify-content: center; + color: var(--color-gray-70); +} + +@media (max-width: 600px) { + .PreviewBlock__checkboxes__content, + .PreviewBlock__selects__content { + display: grid; + grid-template-columns: 1fr 1fr; + } + + .PreviewBlock__checkboxes__content { + width: auto; + } + + .PreviewBlock__selects__content .Select { + width: auto; + } +} + +/* ========================================================================== */ +/* SDS overrides +/* ========================================================================== */ +.PreviewBlock .Link--underline { + text-decoration: underline !important; +} + +.PreviewBlock .Heading, +.PreviewBlock .Caption, +.PreviewBlock .Paragraph, +.PreviewBlock .Title { + color: var(--color-gray-90); +} + +.PreviewBlock .Heading { + margin: 0 !important; +} + +.PreviewBlock .Input, +.PreviewBlock .Select, +.PreviewBlock .Textarea { + max-width: 24rem; +} + +.PreviewBlock .Checkbox__container label { + font-weight: var(--font-weight-regular); +} + +.PreviewBlock .Modal { + z-index: 1000; +} + +.PreviewBlock .Layout__header, +.PreviewBlock .Layout__footer { + width: 100%; +} + +.PreviewBlock .Table thead { + background-color: transparent; +} + +.PreviewBlock .Table thead tr { + border-bottom: none; +} + +.PreviewBlock .Table tr { + background: none; + border-top: none; +} + +.PreviewBlock .Table th { + background: none; + border: none; +} + +.PreviewBlock .Table td { + color: var(--color-gray-80); + border: none; +} 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/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: [ -