Add component previews, and update ugnay styles

MatteuSan · MatteuSan · commit d9bd9dfee71a · 2021-11-04T00:12:34.000+08:00
diff --git 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)
+- [Ugnay Components Web](/docs/ugnay)
+- [Dayong](/docs/dayong)
diff --git 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
@@ -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
diff --git 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.mdx 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';
+
+<SPHComponentPreview cols="2">
+    <SPHComponentPreviewRow>
+        <SPHButton icon="bxs-like">BUTTON</SPHButton>
+        <SPHButton icon="bxs-like" type="outlined">BUTTON</SPHButton>
+        <SPHButton icon="bxs-like" type="filled">BUTTON</SPHButton>
+    </SPHComponentPreviewRow>
+    <SPHComponentPreviewRow>
+        <SPHButton icon="bxs-like" isDisabled>BUTTON</SPHButton>
+        <SPHButton icon="bxs-like" type="outlined" isDisabled>BUTTON</SPHButton>
+        <SPHButton icon="bxs-like" type="filled" isDisabled>BUTTON</SPHButton>
+    </SPHComponentPreviewRow>
+</SPHComponentPreview>
 
 ## HTML
 
 ```html
+
 <button class="sph-button">
     <i class="sph-button__icon bx bxs-like" aria-hidden="true"></i>
     <span class="sph-button__label">BUTTON</span>
diff --git a/docs/Ugnay Components Web/UI Components/sph-card.md b/docs/Ugnay Components Web/UI Components/sph-card.md
@@ -2,6 +2,11 @@
 slug: /ugnay/components/sph-card
 id: sph-card
 title: SPHCard
+tags:
+- Ugnay Components Web
+- Design System
+- SCSS
+- CSS
 ---
 
 # SPHCard Documentation
diff --git a/docs/Ugnay Components Web/UI Components/sph-header.md b/docs/Ugnay Components Web/UI Components/sph-header.md
@@ -2,6 +2,11 @@
 slug: /ugnay/components/sph-header
 id: sph-header
 title: SPHHeader
+tags:
+- Ugnay Components Web
+- Design System
+- SCSS
+- CSS
 ---
 
 # SPHHeader Documentation
diff --git a/docs/Ugnay Components Web/UI Components/sph-navbar.md b/docs/Ugnay Components Web/UI Components/sph-navbar.md
@@ -2,6 +2,11 @@
 slug: /ugnay/components/sph-navbar
 id: sph-navbar
 title: SPHNavbar
+tags:
+- Ugnay Components Web
+- Design System
+- SCSS
+- CSS
 ---
 
 # SPHNavbar Documentation
diff --git a/docs/Ugnay Components Web/UI Components/sph-text-field.mdx b/docs/Ugnay Components Web/UI Components/sph-text-field.mdx
@@ -2,11 +2,31 @@
 slug: /ugnay/components/sph-text-field
 id: sph-text-field
 title: SPHTextField
+tags:
+- Ugnay Components Web
+- Design System
+- SCSS
+- CSS
 ---
 
 # SPHTextField Documentation
 
-![img.png](_img/text-field.png)
+import {SPHComponentPreview, SPHComponentPreviewRow} from '../../../src/components/SPHComponentPreview';
+
+<SPHComponentPreview>
+    <SPHComponentPreviewRow>
+        <div class="sph-text-field">
+            <label class="sph-text-field__label" for="your-id-here">Label</label>
+            <input class="sph-text-field__input" type="text" id="your-id-here" />
+            <small class="sph-text-field__helper">Helper Text</small>
+        </div>
+        <div class="sph-text-field error">
+            <label class="sph-text-field__label" for="your-id-here">Label</label>
+            <input class="sph-text-field__input" type="text" id="your-id-here" />
+            <small class="sph-text-field__helper">Helper Text</small>
+        </div>
+    </SPHComponentPreviewRow>
+</SPHComponentPreview>
 
 ## HTML
 ```html
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -40,7 +40,8 @@ const config = {
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
       colorMode: {
-        defaultMode: 'dark'
+        defaultMode: 'dark',
+        disableSwitch: true
       },
       navbar: {
         title: 'SurPathHub Docs',
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "@docusaurus/preset-classic": "^2.0.0-beta.8",
     "@docusaurus/theme-search-algolia": "^2.0.0-beta.8",
     "@mdx-js/react": "^1.6.21",
-    "@surpathhub/ugnay": "^0.1.0-beta",
+    "@surpathhub/ugnay": "^0.1.0-beta.1",
     "@svgr/webpack": "^5.5.0",
     "clsx": "^1.1.1",
     "docusaurus-plugin-sass": "^0.2.1",
diff --git a/src/components/SPHButton.tsx b/src/components/SPHButton.tsx
@@ -6,20 +6,21 @@ interface SPHButtonProps {
     icon?: string;
     type?: string;
     link?: string;
+    isDisabled?: boolean;
 }
 
-const SPHButton: React.FC<SPHButtonProps> = ({ label, icon, type, children, link }) => {
+const SPHButton: React.FC<SPHButtonProps> = ({ label, icon, type, children, link, isDisabled }) => {
     if (!link) {
         return (
-            <button className={`sph-button${ type == 'filled' ? 'sph-button--filled' : type == 'outlined' ? 'sph-button--outlined' : '' }`} { ...type == 'disabled' ? 'disabled' : '' }>
+            <button className={`sph-button${ type ? ' sph-button--' + type : '' }`} disabled={isDisabled}>
                 { icon && <i className={`sph-button__icon bx ${ icon || 'bxs-like' }`} aria-hidden="true" /> }
                 { label || children && <span className="sph-button__label">{ label || children }</span> }
             </button>
         );
     } else {
         return (
             <Link to={ link }>
-                <button className={`sph-button${ type == 'filled' ? ' sph-button--filled' : type == 'outlined' ? ' sph-button--outlined' : '' }`} { ...type == 'disabled' ? 'disabled' : '' }>
+                <button className={`sph-button${ type ? ' sph-button--' + type : '' }`} disabled={isDisabled}>
                     { icon && <i className={`sph-button__icon bx ${ icon || 'bxs-like' }`} aria-hidden="true" /> }
                     { label || children && <span className="sph-button__label">{ label || children }</span> }
                 </button>
diff --git a/src/components/SPHComponentPreview.tsx b/src/components/SPHComponentPreview.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+interface SPHComponentPreviewProps {
+    cols?: number;
+}
+
+export const SPHComponentPreview = ({ cols, children }) => {
+    return (
+        <section className={`sph-component-preview${ cols ? ' col-' + cols : '' }`}>
+            { children }
+        </section>
+    );
+};
+
+export const SPHComponentPreviewRow = ({ children }) => {
+    return (
+        <div className="sph-component-preview__row">
+            { children }
+        </div>
+    );
+}
diff --git a/src/constants/projects.ts b/src/constants/projects.ts
@@ -1,7 +1,7 @@
 export const projects = [
     {
         "name": "Ugnay Components Web",
-        "description": "SurPath Hub's design system implementation for the web. Made with ❤, TypeScript, and SCSS",
+        "description": "SurPath Hub's design system implementation for the web.",
         "link": "/docs/ugnay/",
         "img": "https://raw.githubusercontent.com/MatteuSan/SurPathHub.github.io/dev-gatsby-rewrite/src/images/ugnay-preview.png"
     },
diff --git a/src/scss/main.scss b/src/scss/main.scss
@@ -6,6 +6,7 @@
     $button-size: 16px
 );
 @use '~@surpathhub/ugnay/SPHCard';
+@use '~@surpathhub/ugnay/SPHTextField';
 
 @use 'helpers/media-mixins';
 
@@ -85,10 +86,41 @@ code * {
     }
 }
 
-.buttons {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+.sph-component-preview {
+    width: 100%;
+    max-width: max-content;
+    display: grid;
+    grid-gap: 0.5rem;
+    grid-template-columns: repeat(1, 1fr);
+    padding: 0.8rem;
+    background-color: var(--sph-theme--primary-dark);
+    border: 1px solid var(--sph-theme--primary);
+    border-radius: 0.5rem;
+    
+    @include Elevation.apply(2);
+    
+    &.col-2 {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    
+    &::before {
+        content: "Component Preview";
+        grid-column: 1 / -1;
+        margin-bottom: 0.4rem;
+        padding: 0.3rem 0.5rem;
+        outline: dashed 1px var(--sph-theme--primary-light);
+    }
+    
+    .sph-component-preview__row {
+        width: max-content;
+        display: flex;
+        flex-flow: column nowrap;
+        
+        & > * + * {
+            flex-basis: content;
+            margin-top: 0.5rem;
+        }
+    }
 }
 
 .footer {
@@ -148,6 +180,9 @@ code * {
 //  SPH Components
 //
 
+.sph-appbar {
+    max-width: 320px !important;
+}
 @include SPHButton.use();
 .sph-button--hero {
     .sph-button__label {
@@ -180,4 +215,15 @@ a:hover {
         // object-fit: cover !important;
         height: 100% !important;
     }
+}
+
+@include SPHTextField.use();
+.sph-text-field__input {
+    color: #000;
+}
+
+.error {
+    .sph-text-field__input {
+        color: #d0454c;
+    }
 }
diff --git a/yarn.lock b/yarn.lock
