diff --git a/frontend/src/app/components/uikitBlock/UikitBlock.tsx b/frontend/src/app/components/uikit/uikitBlock/UikitBlock.tsx similarity index 94% rename from frontend/src/app/components/uikitBlock/UikitBlock.tsx rename to frontend/src/app/components/uikit/uikitBlock/UikitBlock.tsx index f96474d..9af88c5 100644 --- a/frontend/src/app/components/uikitBlock/UikitBlock.tsx +++ b/frontend/src/app/components/uikit/uikitBlock/UikitBlock.tsx @@ -4,18 +4,20 @@ import "./uikit-block.scss"; import Typography from "@components/typography/Typography"; interface IUikitBlock { + id: string; title: string; codeBlock?: string; children: ReactNode; } export default function UikitBlock({ + id, title, codeBlock, children, }: IUikitBlock) { return ( -
+
{title} {children} {codeBlock && ( diff --git a/frontend/src/app/components/uikitBlock/uikit-block.scss b/frontend/src/app/components/uikit/uikitBlock/uikit-block.scss similarity index 100% rename from frontend/src/app/components/uikitBlock/uikit-block.scss rename to frontend/src/app/components/uikit/uikitBlock/uikit-block.scss diff --git a/frontend/src/app/components/uikitColor/UikitColor.tsx b/frontend/src/app/components/uikit/uikitColor/UikitColor.tsx similarity index 100% rename from frontend/src/app/components/uikitColor/UikitColor.tsx rename to frontend/src/app/components/uikit/uikitColor/UikitColor.tsx diff --git a/frontend/src/app/components/uikit/uikitNav/UikitNav.tsx b/frontend/src/app/components/uikit/uikitNav/UikitNav.tsx new file mode 100644 index 0000000..fa8df1a --- /dev/null +++ b/frontend/src/app/components/uikit/uikitNav/UikitNav.tsx @@ -0,0 +1,29 @@ +import Typography from "@components/typography/Typography"; +import "./uikit-nav.scss"; +import Link from "@components/link/Link"; + +export interface INavItem { + text: string; + id: string; +} + +interface IUikitNav { + items: INavItem[]; +} + +function UikitNav({ items }: IUikitNav) { + return ( +
+ Components +
    + {items.map((item) => ( +
  • + {item.text} +
    • + ))} +
+
+ ); +} + +export default UikitNav; diff --git a/frontend/src/app/components/uikit/uikitNav/uikit-nav.scss b/frontend/src/app/components/uikit/uikitNav/uikit-nav.scss new file mode 100644 index 0000000..cb218d2 --- /dev/null +++ b/frontend/src/app/components/uikit/uikitNav/uikit-nav.scss @@ -0,0 +1,14 @@ +.uikit-nav { + display: none; + + @include media-min(xs) { + display: flex; + flex-direction: column; + gap: get-spacing(xs); + height: 100%; + margin-top: get-spacing(md); + max-width: rem(250); + position: sticky; + top: get-spacing(md); + } +} diff --git a/frontend/src/app/pages/uikit/UiKit.tsx b/frontend/src/app/pages/uikit/UiKit.tsx index 09d4cfd..0ba1c4c 100644 --- a/frontend/src/app/pages/uikit/UiKit.tsx +++ b/frontend/src/app/pages/uikit/UiKit.tsx @@ -5,24 +5,18 @@ import Link from "@components/link/Link"; import Loading from "@components/loading/Loading"; import Spinner from "@components/spinner/Spinner"; import Typography from "@components/typography/Typography"; -import UikitBlock from "@components/uikitBlock/UikitBlock"; -import UikitColor from "@components/uikitColor/UikitColor"; +import UikitBlock from "@components/uikit/uikitBlock/UikitBlock"; +import UikitColor from "@components/uikit/uikitColor/UikitColor"; +import UikitNav, { INavItem } from "@components/uikit/uikitNav/UikitNav"; import { Grid, TextField } from "@mui/material"; -import { useCallback, useState } from "react"; +import { useCallback, useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import { ValidationError } from "yup"; export default function UiKit() { const [t] = useTranslation(); const [showLoading, setShowLoading] = useState(false); - - const onClickShowLoading = useCallback(() => { - setShowLoading(true); - - setTimeout(() => { - setShowLoading(false); - }, 3000); - }, []); + const [navItems, setNavItems] = useState([]); // this is for mocking, yup will format the error correctly for you const formErrors: ValidationError[] = [ @@ -56,106 +50,142 @@ export default function UiKit() { }, ]; + const onClickShowLoading = useCallback(() => { + setShowLoading(true); + + setTimeout(() => { + setShowLoading(false); + }, 3000); + }, []); + + useEffect(() => { + setNavItems( + Array.from(document.querySelectorAll(".uikit-block")).map( + (item, index) => { + return { + text: item.children[0].textContent || `Header ${index + 1}`, + id: item.id, + }; + }, + ), + ); + }, []); + return ( - UiKit - - This is where you can display all your custom components/containers. - - - For all the Styled MUI components, please refer to - - MUI documentation - - - -
- - H1. Heading - H2. Heading - H3. Heading - H4. Heading - H5. Heading - H6. Heading - - subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. - Quos blanditiis tenetur - - - subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. - Quos blanditiis tenetur - +
+ +
+ UiKit - body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. - Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore - consectetur, neque doloribus, cupiditate numquam dignissimos laborum - fugiat deleniti? Eum quasi quidem quibusdam. + This is where you can display all your custom components/containers. + + + For all the Styled MUI components, please refer to + + MUI documentation + - - body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. - Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore - consectetur, neque doloribus, cupiditate numquam dignissimos laborum - fugiat deleniti? Eum quasi quidem quibusdam. - - button text - caption text - overline text - - - - - - - - - - - +
+ + H1. Heading + H2. Heading + H3. Heading + H4. Heading + H5. Heading + H6. Heading + + subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing + elit. Quos blanditiis tenetur + + + subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing + elit. Quos blanditiis tenetur + + + body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Quos blanditiis tenetur unde suscipit, quam beatae rerum + inventore consectetur, neque doloribus, cupiditate numquam + dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam. + + + body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Quos blanditiis tenetur unde suscipit, quam beatae rerum + inventore consectetur, neque doloribus, cupiditate numquam + dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam. + + button text + caption text + overline text + - + + + + + + + + + + + + `} - > - - - + > + + + - + `} - > - - - + > + + + - - {/* styling inline like this to prevent the spinner from changing the height of the page while spinning, do not style inline in projects */} -
- -
- + + {/* styling inline like this to prevent the spinner from changing the height of the page while spinning, do not style inline in projects */} +
+ +
+ - - - {showLoading && } - + + + {showLoading && } + +
+
); diff --git a/frontend/src/styles/_export.scss b/frontend/src/styles/_export.scss index 00f8b55..4d21a32 100755 --- a/frontend/src/styles/_export.scss +++ b/frontend/src/styles/_export.scss @@ -2,15 +2,16 @@ = Exports = ============================================ */ -$property: ( - gap: gap, -); +$property: (gap); $property-with-direction: ( m: margin, p: padding, ); +$position: (top, bottom, left, right); + +// Color @each $colorKey, $colorValue in $color { @each $colorSubkey, $colorSubvalue in $colorValue { #body .color-#{$colorKey}-#{$colorSubkey} { @@ -19,6 +20,7 @@ $property-with-direction: ( } } +// Background-color @each $colorKey, $colorValue in $color { @each $colorSubkey, $colorSubvalue in $colorValue { #body .bg-#{$colorKey}-#{$colorSubkey} { @@ -27,14 +29,16 @@ $property-with-direction: ( } } -@each $propertyKey, $propertyValue in $property { +// Property-spacing (eg: gap-xs -> gap: get-spacing(xs)) +@each $propertyKey in $property { @each $spacingKey, $spacingValue in $spacing { #body .#{$propertyKey}-#{$spacingKey} { - #{$propertyValue}: $spacingValue; + #{$propertyKey}: $spacingValue; } } } +// Property with direction-spacing (eg: mr-xs -> margin-right: get-spacing(xs)) @each $propertyKey, $propertyValue in $property-with-direction { @each $spacingKey, $spacingValue in $spacing { @each $directionKey, $directionValues in $direction { @@ -50,3 +54,12 @@ $property-with-direction: ( } } } + +// Position-spacing (eg: top-xs -> top: get-spacing(xs)) +@each $positionKey in $position { + @each $spacingKey, $spacingValue in $spacing { + #body .#{$positionKey}-#{$spacingKey} { + #{$positionKey}: $spacingValue; + } + } +} diff --git a/frontend/src/styles/_globals.scss b/frontend/src/styles/_globals.scss index 85bbd57..c13c1c4 100755 --- a/frontend/src/styles/_globals.scss +++ b/frontend/src/styles/_globals.scss @@ -68,3 +68,21 @@ body { .text-center { text-align: center; } + +.position { + &-absolute { + position: absolute; + } + + &-fixed { + position: fixed; + } + + &-relative { + position: relative; + } + + &-sticky { + position: sticky; + } +} diff --git a/frontend/src/styles/_variables.scss b/frontend/src/styles/_variables.scss index 98b02a8..6f1a286 100755 --- a/frontend/src/styles/_variables.scss +++ b/frontend/src/styles/_variables.scss @@ -3,7 +3,7 @@ ============================================ */ @import "./colors"; -@import "./mixins/generic-get"; +@import "./mixins/generics"; @function get-color($namespace: primary, $variance: main) { $color-map: get($color, $namespace); diff --git a/frontend/src/styles/mixins/_generic-get.scss b/frontend/src/styles/mixins/_generics.scss similarity index 67% rename from frontend/src/styles/mixins/_generic-get.scss rename to frontend/src/styles/mixins/_generics.scss index 39bb14a..15e709c 100755 --- a/frontend/src/styles/mixins/_generic-get.scss +++ b/frontend/src/styles/mixins/_generics.scss @@ -1,8 +1,14 @@ /* ============================================ -= Generic get = += Generics = ============================================ */ /* stylelint-disable scss/no-global-function-names */ +$font-base-size: 16; + +@function rem($sizeInPx) { + @return calc($sizeInPx / $font-base-size) * 1rem; +} + @function get($map, $key) { @if map-has-key($map, $key) { @return map-get($map, $key);