Skip to content

Commit

Permalink
Add component previews, and update ugnay styles
Browse files Browse the repository at this point in the history
  • Loading branch information
MatteuSan committed Nov 3, 2021
1 parent f5a616b commit d9bd9df
Show file tree
Hide file tree
Showing 17 changed files with 157 additions and 9,186 deletions.
3 changes: 2 additions & 1 deletion docs/Introduction.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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)
5 changes: 5 additions & 0 deletions docs/Ugnay Components Web/Core Components/Theme.md
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
5 changes: 5 additions & 0 deletions docs/Ugnay Components Web/Core Components/Typography.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
---
slug: /ugnay/core/typography
title: Typography
tags:
- Ugnay Components Web
- Design System
- SCSS
- CSS
---

# Typography
Expand Down
Binary file modified docs/Ugnay Components Web/UI Components/_img/appbar.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 6 additions & 1 deletion docs/Ugnay Components Web/UI Components/sph-appbar.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
5 changes: 5 additions & 0 deletions docs/Ugnay Components Web/UI Components/sph-card.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@
slug: /ugnay/components/sph-card
id: sph-card
title: SPHCard
tags:
- Ugnay Components Web
- Design System
- SCSS
- CSS
---

# SPHCard Documentation
Expand Down
5 changes: 5 additions & 0 deletions docs/Ugnay Components Web/UI Components/sph-header.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@
slug: /ugnay/components/sph-header
id: sph-header
title: SPHHeader
tags:
- Ugnay Components Web
- Design System
- SCSS
- CSS
---

# SPHHeader Documentation
Expand Down
5 changes: 5 additions & 0 deletions docs/Ugnay Components Web/UI Components/sph-navbar.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@
slug: /ugnay/components/sph-navbar
id: sph-navbar
title: SPHNavbar
tags:
- Ugnay Components Web
- Design System
- SCSS
- CSS
---

# SPHNavbar Documentation
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 2 additions & 1 deletion docusaurus.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,8 @@ const config = {
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
({
colorMode: {
defaultMode: 'dark'
defaultMode: 'dark',
disableSwitch: true
},
navbar: {
title: 'SurPathHub Docs',
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
7 changes: 4 additions & 3 deletions src/components/SPHButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
21 changes: 21 additions & 0 deletions src/components/SPHComponentPreview.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
2 changes: 1 addition & 1 deletion src/constants/projects.ts
Original file line number Diff line number Diff line change
@@ -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"
},
Expand Down
54 changes: 50 additions & 4 deletions src/scss/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
$button-size: 16px
);
@use '~@surpathhub/ugnay/SPHCard';
@use '~@surpathhub/ugnay/SPHTextField';

@use 'helpers/media-mixins';

Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -148,6 +180,9 @@ code * {
// SPH Components
//

.sph-appbar {
max-width: 320px !important;
}
@include SPHButton.use();
.sph-button--hero {
.sph-button__label {
Expand Down Expand Up @@ -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;
}
}
Loading

0 comments on commit d9bd9df

Please sign in to comment.