New SDS website built with Docusaurus (#158)

* Updated gitignore

* Website Docusaurus config (#157)

* Node v18 + update eslint

* Update prettier + tsconfig

* Minor dep updates

* Some major dep updates

* More major dep updates

* Fix eslint import errors in SDS web

* Upgrade React 17 to 18

* Update GH action to use Node v18

* Updated colors

* SDS v2: typography (#125)

* Updated typography + pxToRem function

* Fix asset path when refreshing sub-pages

* Remove Link + Code from Typography + add descriptions

* Temp file to trigger PR preview

* Replace IBM Plex Sans font (#126)

* Replace icons + optimize logos (#127)

* ThemeSwitch component (#128)

* Replace icons + optimize logos

* New theme switch + SVG cleanup

* Cleanup

* Updated Button component (#131)

* Updated Button component

* Update colors, border radius, padding

* Updated Input component (#132)

* Input update in progress

* Updated Input component

* Updated Link component (#133)

* Updated Icon component

* Use left arrow on the left side

* Update Notification component (#134)

* Update Notification component

* Update icon size

* SDS version 1.0.0-beta.0

* Update logos SVGs + cleanup

* SDS version 1.0.0-beta.1

* Updated Card, Input, and Button components + small tweaks (#135)

* Card component + small tweaks

* Button: add isPill prop

* Input: add isPill prop

* Button: add isExtraPadding prop

* Badge component (#137)

* Updated Checkbox and RadioButton components (#136)

* Updated Checkbox

* Update RadioButton

* Checkbox fieldSize prop

* RadioButton fieldSize prop

* Updated Select component (#138)

* Updated Textarea component (#139)

* Updated Textarea component

* Cleanup

* Minor global CSS updates

* SDS version 1.0.0-beta.2

* Banner component (#140)

* Rename StatusBar to Banner

* Fix typo

* Banner component

* Various small tweaks (#141)

* Checkbox without label

* Make Button label optional

* Add error without message prop to form components

* SDS version 1.0.0-beta.3

* Updated Tooltip + some tweaks (#142)

* Updated Badge

* Floater component + updated Tooltip and CopyText

* Updated Avatar + small tweaks (#143)

* Extra padding for form inputs

* Avatar + AssetIcon components

* Profile component

* Profile copy address

* SDS version 1.0.0-beta.4

* Floater fix + SDS version 1.0.0-beta.5

* Another floater fix + SDS version 1.0.0-beta.6

* Serve stellar-identicon-js locally (#144)

* Floater and tooltip color update and small fix (#145)

* SDS version 1.0.0-beta.7

* Optional title for ProjectLogo and Layout.Header (#147)

* allows for optional title in ProjectLogo and Layout.Header

* turns boolean expression to ternary for optional title and updates props on website details

* SDS version 1.0.0-beta.8

* SDS version 1.0.0-beta.9

* rename classNames prop to addlClassName (#148)

* rename classNames prop to addlClasses

* renames addlClasses to addlClassName

* bumps version tag for sds

* picks out addlClassName from props before spreading onto dom nodes (#149)

* picks out addlClassName from props before spreading onto dom nodes

* updates website props for typography components

* SDS version 1.0.0-beta.11

* Button: update tertiary colors (#150)

* Toggle updated + small tweaks (#151)

* Button: destructive/error/success variants (#152)

* Button: destructive/error/success variants

* Update Button gap

* Updated Card component

* Updated Modal component (#153)

* SDS version 1.0.0-beta.12

* Add new icons (#154)

* SDS version 1.0.0-beta.13

* Input password preset (#155)

* Remove icon added (#156)

* SDS version 1.0.0-beta.14

* Basic Docusaurus setup

* Basic SDS example

* Make docs initial page

* Fix broken link

* Temp rename

* Enable Docusaurus website

---------

Co-authored-by: aristides <[email protected]>
Co-authored-by: Aristides Staffieri <[email protected]>

* Quick example creating docs with TypeDoc (#159)

* Quick example creating docs with TypeDoc

* Attempt to fix broken build

* Fix gitignore

* Style main layout (#160)

* Style main layout

* Fix logo font

* Main categories with placeholder pages + styled typography (#161)

* Main categories + page placeholders

* Update typography styles

* Component doc template (#162)

* Component doc template

* Fix build

* Component preview (#163)

* Preview component example with Button

* Remove link page for now

* Add Link page

* Fix SSR

* Icon dropdown

* Updated controls UI

* Update controls UI

* Component preview: Link (#164)

* Social card image + small preview tweaks

* ProjectLogo preview (#165)

* Typography docs + preview (#166)

* Heading docs + preview

* Caption docs + preview

* Paragraph docs + preview

* Title docs + preview

* Notification docs + preview (#167)

* Notification docs + preview

* Cleanup

* Update Stellar logo (#168)

* Banner docs + preview (#169)

* Avatar docs + preview (#171)

* Badge docs + preview (#170)

* Profile docs + preview (#172)

* Loader docs + preview (#173)

* AssetIcon docs + preview (#174)

* AssetIcon docs + preview

* Cleanup

* Tooltip docs + preview (#175)

* Tooltip docs + preview

* Trigger PR preview

* Input docs + preview (#176)

* Input docs + preview

* Disabled preview

* Select docs + preview (#177)

* Select docs + preview

* Disabled preview

* Textarea docs + preview (#178)

* Textarea docs + preview

* Fix styles

* Checkbox docs + preview (#179)

* RadioButton docs + preview (#180)

* Toggle docs + preview (#181)

* IconButton and ButtonPreset docs + preview (#182)

* IconButton docs + preview

* ButtonPreset docs + preview

* NavButton docs + preview (#183)

* CopyText docs + preview (#184)

* Pagination docs + preview (#186)

* Card docs + preview (#185)

* Modal docs + preview (#187)

* Layout docs + preview (#188)

* Table docs + preview (#189)

* Icon and Logo docs + preview (#190)

* Icon and Logo docs + preview

* Fix server side rendering

* Updated intro + readme (#191)

* Updated intro + readme

* Updated text

* Editorial (#192)

* intro editorial

* components - buttons

* components - accents

* components - branding

* components - containers

* components - elements

* components - inputs

* components - layout

* components - notifications

* components - profile

* foundations - typography

* SDS website: add component short descriptions (#193)

* Website: small UI tweaks (#194)

* SDS v1.0.0

---------

Co-authored-by: aristides <[email protected]>
Co-authored-by: Aristides Staffieri <[email protected]>
Co-authored-by: Bri Wylde <[email protected]>

.gitignore

@@ -13,13 +13,17 @@ node_modules
 */**/dist
 */**/build
 
+# SDS docs
+@stellar/design-system/docs
+
 # misc
 .DS_Store
 .env
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
+.docusaurus
 
 npm-debug.log*
 yarn-debug.log*

@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*

@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.

@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")],
 };

@stellar/design-system-website/docs/components/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Components",
+  "position": 3
+}

@stellar/design-system-website/docs/components/accents/_category_.json

@@ -0,0 +1,6 @@
+{
+  "label": "Accents",
+  "link": {
+    "type": "generated-index"
+  }
+}

@stellar/design-system-website/docs/components/accents/badge.mdx

@@ -0,0 +1,20 @@
+---
+slug: /badge
+description: "Used to label or categorize items."
+---
+
+# Badge
+
+<ComponentDescription componentName="Badge" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Badge">
+  <Badge>Label</Badge>
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="Badge" />

@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
+
+<ComponentDescription componentName="Tooltip" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Tooltip">
+  <Tooltip isVisible isContrast triggerEl={<>Tooltip trigger</>}>
+    Lorem ipsum dolor sit
+  </Tooltip>
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="Tooltip" />

@stellar/design-system-website/docs/components/branding/_category_.json

@@ -0,0 +1,6 @@
+{
+  "label": "Branding",
+  "link": {
+    "type": "generated-index"
+  }
+}

@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
+
+<ComponentDescription componentName="ProjectLogo" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="ProjectLogo">
+  <ProjectLogo title="Project name" link="/" />
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="ProjectLogo" />

@stellar/design-system-website/docs/components/buttons/_category_.json

@@ -0,0 +1,6 @@
+{
+  "label": "Buttons",
+  "link": {
+    "type": "generated-index"
+  }
+}

@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
+
+<ComponentDescription componentName="ButtonPreset" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="ButtonPreset">
+  <ButtonPreset preset="copy" />
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="ButtonPreset" />

@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
+
+<ComponentDescription componentName="Button" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Button">
+  <Button variant="primary" size="md">
+    Button
+  </Button>
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="Button" />

@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
+
+<ComponentDescription componentName="CopyText" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="CopyText">
+  <CopyText textToCopy="Text to copy">Copy text</CopyText>
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="CopyText" />

@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
+
+<ComponentDescription componentName="IconButton" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="IconButton">
+  <IconButton altText="Default" icon={<Icon.Info />} />
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="IconButton" />

@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
+
+<ComponentDescription componentName="Link" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Link">
+  <Link>Link</Link>
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="Link" />

@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
+
+<ComponentDescription componentName="NavButton" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="NavButton">
+  <NavButton
+    icon={<Icon.Menu />}
+    id="nav-button"
+    onClick={() => {}}
+    title="Menu"
+  />
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="NavButton" />

@stellar/design-system-website/docs/components/containers/_category_.json

@@ -0,0 +1,6 @@
+{
+  "label": "Containers",
+  "link": {
+    "type": "generated-index"
+  }
+}

@stellar/design-system-website/docs/components/containers/card.mdx

@@ -0,0 +1,20 @@
+---
+slug: /card
+description: "Container for any type of content."
+---
+
+# Card
+
+<ComponentDescription componentName="Card" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Card">
+  <Card>Content</Card>
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="Card" />