From d9bd9dfee71a7f0eabd8c21d3e7fd736f624c8a9 Mon Sep 17 00:00:00 2001 From: Matteu Date: Thu, 4 Nov 2021 00:12:34 +0800 Subject: [PATCH] Add component previews, and update ugnay styles --- docs/Introduction.mdx | 3 +- .../Core Components/Theme.md | 5 + .../Core Components/Typography.md | 5 + .../UI Components/_img/appbar.png | Bin 3965 -> 2877 bytes .../UI Components/sph-appbar.md | 7 +- .../{sph-button.md => sph-button.mdx} | 28 +- .../UI Components/sph-card.md | 5 + .../UI Components/sph-header.md | 5 + .../UI Components/sph-navbar.md | 5 + .../{sph-text-field.md => sph-text-field.mdx} | 22 +- docusaurus.config.js | 3 +- package.json | 2 +- src/components/SPHButton.tsx | 7 +- src/components/SPHComponentPreview.tsx | 21 + src/constants/projects.ts | 2 +- src/scss/main.scss | 54 +- yarn.lock | 9169 ----------------- 17 files changed, 157 insertions(+), 9186 deletions(-) rename docs/Ugnay Components Web/UI Components/{sph-button.md => sph-button.mdx} (77%) rename docs/Ugnay Components Web/UI Components/{sph-text-field.md => sph-text-field.mdx} (75%) create mode 100644 src/components/SPHComponentPreview.tsx delete mode 100644 yarn.lock diff --git a/docs/Introduction.mdx b/docs/Introduction.mdx index 5cce855..438019a 100644 --- a/docs/Introduction.mdx +++ b/docs/Introduction.mdx @@ -8,4 +8,5 @@ title: Introduction - This website is a centralized repository of all the documentation of all the open source projects we're releasing ranging from legacy, to the maintained ones. ## Project List -- [Ugnay Components Web](/docs/ugnay) \ No newline at end of file +- [Ugnay Components Web](/docs/ugnay) +- [Dayong](/docs/dayong) \ No newline at end of file diff --git a/docs/Ugnay Components Web/Core Components/Theme.md b/docs/Ugnay Components Web/Core Components/Theme.md index 9540f9a..219c05b 100644 --- a/docs/Ugnay Components Web/Core Components/Theme.md +++ b/docs/Ugnay Components Web/Core Components/Theme.md @@ -1,6 +1,11 @@ --- slug: /ugnay/core/theme title: Theme +tags: +- Ugnay Components Web +- Design System +- SCSS +- CSS --- # Theme - This is the documentation of the most important core module to be used in the library. diff --git a/docs/Ugnay Components Web/Core Components/Typography.md b/docs/Ugnay Components Web/Core Components/Typography.md index 83def17..b2e926e 100644 --- a/docs/Ugnay Components Web/Core Components/Typography.md +++ b/docs/Ugnay Components Web/Core Components/Typography.md @@ -1,6 +1,11 @@ --- slug: /ugnay/core/typography title: Typography +tags: +- Ugnay Components Web +- Design System +- SCSS +- CSS --- # Typography diff --git a/docs/Ugnay Components Web/UI Components/_img/appbar.png b/docs/Ugnay Components Web/UI Components/_img/appbar.png index bbff7d076980b3a80773c8096f402f24f8040fa8..ea36b73690976f8f6326173ff23474ff1778a1b2 100644 GIT binary patch literal 2877 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 YgTId=&3P2hzST5_diTI}x1FN?2Mq$JaR2}S diff --git a/docs/Ugnay Components Web/UI Components/sph-appbar.md b/docs/Ugnay Components Web/UI Components/sph-appbar.md index aa80e18..92a944e 100644 --- a/docs/Ugnay Components Web/UI Components/sph-appbar.md +++ b/docs/Ugnay Components Web/UI Components/sph-appbar.md @@ -2,13 +2,18 @@ slug: /ugnay/components/sph-appbar id: sph-appbar title: SPHAppbar +tags: +- Ugnay Components Web +- Design System +- SCSS +- CSS --- # SPHAppbar Documentation - This component uses the [box-icons library](https://boxicons.com/). -![img.png](_img/appbar.png) +![appbar.png](_img/appbar.png) ## HTML diff --git a/docs/Ugnay Components Web/UI Components/sph-button.md b/docs/Ugnay Components Web/UI Components/sph-button.mdx similarity index 77% rename from docs/Ugnay Components Web/UI Components/sph-button.md rename to docs/Ugnay Components Web/UI Components/sph-button.mdx index 371d2ea..bc472a7 100644 --- a/docs/Ugnay Components Web/UI Components/sph-button.md +++ b/docs/Ugnay Components Web/UI Components/sph-button.mdx @@ -1,18 +1,38 @@ --- -slug: /ugnay/components/sph-button -id: sph-button -title: SPHButton +slug: /ugnay/components/sph-button +id: sph-button +title: SPHButton +tags: +- Ugnay Components Web +- Design System +- SCSS +- CSS --- # SPHButton Documentation - This component uses the [box-icons library](https://boxicons.com/). -![img.png](_img/button.png) +import {SPHComponentPreview, SPHComponentPreviewRow} from '../../../src/components/SPHComponentPreview'; +import SPHButton from '../../../src/components/SPHButton'; + + + + BUTTON + BUTTON + BUTTON + + + BUTTON + BUTTON + BUTTON + + ## HTML ```html +