From 3f368f7db932f79f845c2f3b3a1bb25d663e1978 Mon Sep 17 00:00:00 2001 From: lakshya Date: Thu, 14 Mar 2024 16:43:55 +0530 Subject: [PATCH] Dynamic intra-page on Sistent Signed-off-by: lakshya --- src/components/SistentNavigation/content.js | 45 ++- src/components/SistentNavigation/index.js | 24 +- .../SistentNavigation/intra-page.js | 101 +++++ .../handbook-navigation/intra-page.js | 12 +- .../sistent/components/button/code.js | 8 + .../sistent/components/button/guidance.js | 8 + .../components/{button.js => button/index.js} | 2 +- .../sistent/components/text-input/code.js | 8 + .../sistent/components/text-input/guidance.js | 8 + .../{text-input.js => text-input/index.js} | 2 +- .../projects/sistent/identity/color/code.js | 8 + .../sistent/identity/color/guidance.js | 8 + .../identity/{color.js => color/index.js} | 2 +- .../projects/sistent/identity/spacing/code.js | 8 + .../sistent/identity/spacing/guidance.js | 8 + .../identity/{spacing.js => spacing/index.js} | 2 +- .../sistent/identity/typography/code.js | 8 + .../sistent/identity/typography/guidance.js | 8 + .../{typography.js => typography/index.js} | 2 +- .../Sistent/components/button/code.js | 230 +++++++---- .../Sistent/components/button/guidance.js | 312 +++++++++------ .../Sistent/components/button/index.js | 261 ++++++++---- .../Sistent/components/button/overview.js | 138 ------- .../Projects/Sistent/components/index.js | 1 - .../Sistent/components/text-input/code.js | 58 ++- .../Sistent/components/text-input/guidance.js | 180 ++++++--- .../Sistent/components/text-input/index.js | 223 +++++++---- .../Sistent/components/text-input/overview.js | 95 ----- .../Projects/Sistent/identity/color/code.js | 245 +++++++----- .../Sistent/identity/color/guidance.js | 364 +++++++++-------- .../Projects/Sistent/identity/color/index.js | 332 ++++++++++++---- .../Sistent/identity/color/overview.js | 205 ---------- .../Projects/Sistent/identity/spacing/code.js | 57 ++- .../Sistent/identity/spacing/guidance.js | 315 +++++++++------ .../Sistent/identity/spacing/index.js | 227 +++++++---- .../Sistent/identity/spacing/overview.js | 109 ----- .../Sistent/identity/typography/code.js | 136 +++++-- .../Sistent/identity/typography/guidance.js | 373 ++++++++++-------- .../Sistent/identity/typography/index.js | 241 +++++++---- .../Sistent/identity/typography/overview.js | 111 ------ .../Projects/Sistent/sistent-layout.js | 23 ++ 41 files changed, 2577 insertions(+), 1931 deletions(-) create mode 100644 src/components/SistentNavigation/intra-page.js create mode 100644 src/pages/projects/sistent/components/button/code.js create mode 100644 src/pages/projects/sistent/components/button/guidance.js rename src/pages/projects/sistent/components/{button.js => button/index.js} (59%) create mode 100644 src/pages/projects/sistent/components/text-input/code.js create mode 100644 src/pages/projects/sistent/components/text-input/guidance.js rename src/pages/projects/sistent/components/{text-input.js => text-input/index.js} (59%) create mode 100644 src/pages/projects/sistent/identity/color/code.js create mode 100644 src/pages/projects/sistent/identity/color/guidance.js rename src/pages/projects/sistent/identity/{color.js => color/index.js} (61%) create mode 100644 src/pages/projects/sistent/identity/spacing/code.js create mode 100644 src/pages/projects/sistent/identity/spacing/guidance.js rename src/pages/projects/sistent/identity/{spacing.js => spacing/index.js} (58%) create mode 100644 src/pages/projects/sistent/identity/typography/code.js create mode 100644 src/pages/projects/sistent/identity/typography/guidance.js rename src/pages/projects/sistent/identity/{typography.js => typography/index.js} (59%) delete mode 100644 src/sections/Projects/Sistent/components/button/overview.js delete mode 100644 src/sections/Projects/Sistent/components/text-input/overview.js delete mode 100644 src/sections/Projects/Sistent/identity/color/overview.js delete mode 100644 src/sections/Projects/Sistent/identity/spacing/overview.js delete mode 100644 src/sections/Projects/Sistent/identity/typography/overview.js create mode 100644 src/sections/Projects/Sistent/sistent-layout.js diff --git a/src/components/SistentNavigation/content.js b/src/components/SistentNavigation/content.js index bde227f75937..51f8f57618ae 100644 --- a/src/components/SistentNavigation/content.js +++ b/src/components/SistentNavigation/content.js @@ -1,7 +1,46 @@ export const content = [ { id: 0, link: "/projects/sistent/about", text: "About Sistent" }, { id: 1, link: "/projects/sistent/identity/color", text: "Colors" }, - { id: 2, link: "/projects/sistent/identity/spacing", text: "Spacing" }, - { id: 3, link: "/projects/sistent/identity/typography", text: "Typography" }, - { id: 4, link: "/projects/sistent/components", text: "Components" }, + { id: 2, link: "/projects/sistent/identity/color/guidance", text: "Colors" }, + { id: 3, link: "/projects/sistent/identity/color/code", text: "Colors" }, + { id: 4, link: "/projects/sistent/identity/spacing", text: "Spacing" }, + { + id: 5, + link: "/projects/sistent/identity/spacing/guidance", + text: "Spacing", + }, + { id: 6, link: "/projects/sistent/identity/spacing/code", text: "Spacing" }, + { id: 7, link: "/projects/sistent/identity/typography", text: "Typography" }, + { + id: 8, + link: "/projects/sistent/identity/typography/guidance", + text: "Typography", + }, + { + id: 9, + link: "/projects/sistent/identity/typography/code", + text: "Typography", + }, + { id: 10, link: "/projects/sistent/components/button", text: "Button" }, + { + id: 10, + link: "/projects/sistent/components/button/guidance", + text: "Button", + }, + { id: 11, link: "/projects/sistent/components/button/code", text: "Button" }, + { + id: 12, + link: "/projects/sistent/components/text-input", + text: "Text Input", + }, + { + id: 13, + link: "/projects/sistent/components/text-input/guidance", + text: "Text Input", + }, + { + id: 14, + link: "/projects/sistent/components/text-input/code", + text: "Text Input", + }, ]; diff --git a/src/components/SistentNavigation/index.js b/src/components/SistentNavigation/index.js index 5171e7fcd97a..1fe25ddef061 100644 --- a/src/components/SistentNavigation/index.js +++ b/src/components/SistentNavigation/index.js @@ -67,7 +67,13 @@ const TOC = () => {
  • Color @@ -76,7 +82,13 @@ const TOC = () => {
  • Spacing @@ -85,7 +97,13 @@ const TOC = () => {
  • Typography diff --git a/src/components/SistentNavigation/intra-page.js b/src/components/SistentNavigation/intra-page.js new file mode 100644 index 000000000000..636fa5519ae5 --- /dev/null +++ b/src/components/SistentNavigation/intra-page.js @@ -0,0 +1,101 @@ +import React, { useEffect, useState } from "react"; +import { Link } from "gatsby"; +import styled from "styled-components"; + +const JoinCommunityWrapper = styled.div` + width: 18rem; + @media screen and (min-width: 751px) and (max-width: 1279px) { + display: none; + } + .intra-page { + position: sticky; + top: 10rem; + right: 0rem; + margin-right: 1rem; + padding-bottom: 5rem; + padding-right: 2rem; + align-items: left; + justify-content: space-around; + display: flex; + flex-direction: column; + overflow: hidden; + + .list { + color: #000000; + } + .active { + font-weight: 5000; + color: #000000; + } + + ul { + list-style: none; + top: 3rem; + li { + padding-bottom: 0.5rem; + padding-top: 0.5rem; + } + } + @media only screen and (min-width: 1280px) and (max-width: 1350px) { + padding-right: 0rem; + margin-right: 0rem; + } + @media only screen and (max-width: 950px) { + width: 0; + opacity: 0; + height: 0; + transition: none; + visibility: hidden; + } + } + + .learn { + width: 10rem; + } +`; + +function IntraPage() { + const [contents, setContents] = useState([]); + + useEffect(() => { + const anchors = document.querySelectorAll(".main-content > a"); + console.log(anchors); + if (anchors) { + setContents( + Array.from(anchors).map((a) => ({ + id: a.id, + link: `#${a.id}`, + text: a.id, + })) + ); + } + }, []); + + const [intapath, setIntapath] = useState(null); + useEffect(() => { + const path = window.location.pathname; + setIntapath(path); + }, []); + + return ( + +
    +
      + {contents.map((x) => ( +
    • + + {x.text} + +
      • + ))} +
    +
    +     + ); +} + +export default IntraPage; diff --git a/src/components/handbook-navigation/intra-page.js b/src/components/handbook-navigation/intra-page.js index 8604f7723316..5cc16e9dfb52 100644 --- a/src/components/handbook-navigation/intra-page.js +++ b/src/components/handbook-navigation/intra-page.js @@ -1,10 +1,11 @@ import React, { useEffect, useState } from "react"; import { Link } from "gatsby"; import styled from "styled-components"; +import { link } from "joi"; const JoinCommunityWrapper = styled.div` @media screen and (min-width: 751px) and (max-width: 1279px) { - display:none; + display: none; } .intra-page { position: sticky; @@ -35,10 +36,10 @@ const JoinCommunityWrapper = styled.div` padding-top: 0.5rem; } } - @media only screen and (min-width: 1280px) and (max-width: 1350px){ - padding-right:0rem; - margin-right:0rem; - } + @media only screen and (min-width: 1280px) and (max-width: 1350px) { + padding-right: 0rem; + margin-right: 0rem; + } @media only screen and (max-width: 950px) { width: 0; opacity: 0; @@ -59,6 +60,7 @@ function IntraPage({ contents }) { const path = window.location.pathname; setIntapath(path); }, []); + return (
    diff --git a/src/pages/projects/sistent/components/button/code.js b/src/pages/projects/sistent/components/button/code.js new file mode 100644 index 000000000000..87944a938565 --- /dev/null +++ b/src/pages/projects/sistent/components/button/code.js @@ -0,0 +1,8 @@ +import React from "react"; +import { ButtonCode } from "../../../../../sections/Projects/Sistent/components/button/code"; + +const ButtonCodePage = () => { + return ; +}; + +export default ButtonCodePage; diff --git a/src/pages/projects/sistent/components/button/guidance.js b/src/pages/projects/sistent/components/button/guidance.js new file mode 100644 index 000000000000..a155ae7ec5dc --- /dev/null +++ b/src/pages/projects/sistent/components/button/guidance.js @@ -0,0 +1,8 @@ +import React from "react"; +import { ButtonGuidance } from "../../../../../sections/Projects/Sistent/components/button/guidance"; + +const ButtonGuidancePage = () => { + return ; +}; + +export default ButtonGuidancePage; diff --git a/src/pages/projects/sistent/components/button.js b/src/pages/projects/sistent/components/button/index.js similarity index 59% rename from src/pages/projects/sistent/components/button.js rename to src/pages/projects/sistent/components/button/index.js index c4aea26d1621..3e56948174d2 100644 --- a/src/pages/projects/sistent/components/button.js +++ b/src/pages/projects/sistent/components/button/index.js @@ -1,5 +1,5 @@ import React from "react"; -import SistentButton from "../../../../sections/Projects/Sistent/components/button"; +import SistentButton from "../../../../../sections/Projects/Sistent/components/button"; const SistentButtonPage = () => { return ; diff --git a/src/pages/projects/sistent/components/text-input/code.js b/src/pages/projects/sistent/components/text-input/code.js new file mode 100644 index 000000000000..b5664ac8dbf6 --- /dev/null +++ b/src/pages/projects/sistent/components/text-input/code.js @@ -0,0 +1,8 @@ +import React from "react"; +import { TextInputCode } from "../../../../../sections/Projects/Sistent/components/text-input/code"; + +const TextInputCodePage = () => { + return ; +}; + +export default TextInputCodePage; diff --git a/src/pages/projects/sistent/components/text-input/guidance.js b/src/pages/projects/sistent/components/text-input/guidance.js new file mode 100644 index 000000000000..9b99306618ee --- /dev/null +++ b/src/pages/projects/sistent/components/text-input/guidance.js @@ -0,0 +1,8 @@ +import React from "react"; +import { TextInputGuidance } from "../../../../../sections/Projects/Sistent/components/text-input/guidance"; + +const TextInputGuidancePage = () => { + return ; +}; + +export default TextInputGuidancePage; diff --git a/src/pages/projects/sistent/components/text-input.js b/src/pages/projects/sistent/components/text-input/index.js similarity index 59% rename from src/pages/projects/sistent/components/text-input.js rename to src/pages/projects/sistent/components/text-input/index.js index 0ee68df78700..dfbb28313e00 100644 --- a/src/pages/projects/sistent/components/text-input.js +++ b/src/pages/projects/sistent/components/text-input/index.js @@ -1,5 +1,5 @@ import React from "react"; -import SistentTextInput from "../../../../sections/Projects/Sistent/components/text-input"; +import SistentTextInput from "../../../../../sections/Projects/Sistent/components/text-input"; const SistentTextInputPage = () => { return ; diff --git a/src/pages/projects/sistent/identity/color/code.js b/src/pages/projects/sistent/identity/color/code.js new file mode 100644 index 000000000000..3f8189e753f6 --- /dev/null +++ b/src/pages/projects/sistent/identity/color/code.js @@ -0,0 +1,8 @@ +import React from "react"; +import ColorCode from "../../../../../sections/Projects/Sistent/identity/color/code"; + +const ColorCodePage = () => { + return ; +}; + +export default ColorCodePage; diff --git a/src/pages/projects/sistent/identity/color/guidance.js b/src/pages/projects/sistent/identity/color/guidance.js new file mode 100644 index 000000000000..703afcdab418 --- /dev/null +++ b/src/pages/projects/sistent/identity/color/guidance.js @@ -0,0 +1,8 @@ +import React from "react"; +import ColorGuidance from "../../../../../sections/Projects/Sistent/identity/color/guidance"; + +const ColorGuidancePage = () => { + return ; +}; + +export default ColorGuidancePage; diff --git a/src/pages/projects/sistent/identity/color.js b/src/pages/projects/sistent/identity/color/index.js similarity index 61% rename from src/pages/projects/sistent/identity/color.js rename to src/pages/projects/sistent/identity/color/index.js index 13ce94f80746..07592fc853a1 100644 --- a/src/pages/projects/sistent/identity/color.js +++ b/src/pages/projects/sistent/identity/color/index.js @@ -1,5 +1,5 @@ import React from "react"; -import SistentIdentityColor from "../../../../sections/Projects/Sistent/identity/color"; +import SistentIdentityColor from "../../../../../sections/Projects/Sistent/identity/color"; const SistentIdentityColorPage = () => { return ; diff --git a/src/pages/projects/sistent/identity/spacing/code.js b/src/pages/projects/sistent/identity/spacing/code.js new file mode 100644 index 000000000000..17ba6940a79f --- /dev/null +++ b/src/pages/projects/sistent/identity/spacing/code.js @@ -0,0 +1,8 @@ +import React from "react"; +import { SpacingCode } from "../../../../../sections/Projects/Sistent/identity/spacing/code"; + +const SpacingCodePage = () => { + return ; +}; + +export default SpacingCodePage; diff --git a/src/pages/projects/sistent/identity/spacing/guidance.js b/src/pages/projects/sistent/identity/spacing/guidance.js new file mode 100644 index 000000000000..c6f6b9d059b2 --- /dev/null +++ b/src/pages/projects/sistent/identity/spacing/guidance.js @@ -0,0 +1,8 @@ +import React from "react"; +import { SpacingGuidance } from "../../../../../sections/Projects/Sistent/identity/spacing/guidance"; + +const SpacingGuidancePage = () => { + return ; +}; + +export default SpacingGuidancePage; diff --git a/src/pages/projects/sistent/identity/spacing.js b/src/pages/projects/sistent/identity/spacing/index.js similarity index 58% rename from src/pages/projects/sistent/identity/spacing.js rename to src/pages/projects/sistent/identity/spacing/index.js index 7098ab9ecc43..9d3deecdbddd 100644 --- a/src/pages/projects/sistent/identity/spacing.js +++ b/src/pages/projects/sistent/identity/spacing/index.js @@ -1,5 +1,5 @@ import React from "react"; -import SistentIdentitySpacing from "../../../../sections/Projects/Sistent/identity/spacing/index"; +import SistentIdentitySpacing from "../../../../../sections/Projects/Sistent/identity/spacing/index"; const IdentitySpacingPage = () => { return ; diff --git a/src/pages/projects/sistent/identity/typography/code.js b/src/pages/projects/sistent/identity/typography/code.js new file mode 100644 index 000000000000..c8ce12a70b20 --- /dev/null +++ b/src/pages/projects/sistent/identity/typography/code.js @@ -0,0 +1,8 @@ +import React from "react"; +import TypographyCode from "../../../../../sections/Projects/Sistent/identity/typography/code"; + +const TypographyCodePage = () => { + return ; +}; + +export default TypographyCodePage; diff --git a/src/pages/projects/sistent/identity/typography/guidance.js b/src/pages/projects/sistent/identity/typography/guidance.js new file mode 100644 index 000000000000..9cd6675842ab --- /dev/null +++ b/src/pages/projects/sistent/identity/typography/guidance.js @@ -0,0 +1,8 @@ +import React from "react"; +import TypographyGuidance from "../../../../../sections/Projects/Sistent/identity/typography/guidance"; + +const TypographyGuidancePage = () => { + return ; +}; + +export default TypographyGuidancePage; diff --git a/src/pages/projects/sistent/identity/typography.js b/src/pages/projects/sistent/identity/typography/index.js similarity index 59% rename from src/pages/projects/sistent/identity/typography.js rename to src/pages/projects/sistent/identity/typography/index.js index cd9eb97c927b..bdb9d6b000d7 100644 --- a/src/pages/projects/sistent/identity/typography.js +++ b/src/pages/projects/sistent/identity/typography/index.js @@ -1,5 +1,5 @@ import React from "react"; -import SistentTypography from "../../../../sections/Projects/Sistent/identity/typography"; +import SistentTypography from "../../../../../sections/Projects/Sistent/identity/typography"; const SistentTypographyPage = () => { return ; diff --git a/src/sections/Projects/Sistent/components/button/code.js b/src/sections/Projects/Sistent/components/button/code.js index 6b37e25a0d04..f2b541d61f40 100644 --- a/src/sections/Projects/Sistent/components/button/code.js +++ b/src/sections/Projects/Sistent/components/button/code.js @@ -1,7 +1,13 @@ import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; + import { Button, SistentThemeProvider } from "@layer5/sistent"; import { CodeBlock } from "./code-block"; import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight"; +import { SistentLayout } from "../../sistent-layout"; + +import TabButton from "../../../../../reusecore/Button"; const codes = [ ` @@ -29,95 +35,147 @@ const codes = [ ]; export const ButtonCode = () => { + const location = useLocation(); + return ( -
    -

    - Buttons communicate actions to users and they can be placed at several - places throughout the user interface. -

    - -

    Basic Button

    -     -

    The button comes in three types: Filled, Outlined, and Text.

    -

    Filled Button

    -

    - Mostly used for high-emphasis actions and are primarily distinguished by - their fill. They are used to represent actions that are primary to the - solution. -

    -
    -
    - - - -
    - -
    -

    Outlined Button

    -

    Can be used for both medium and sometimes high-emphasis actions.

    -
    -
    - - - + +
    + +

    Button

    +     +

    + A button is an interactive element that triggers a specific action, + takes users where they need to go, and points out what happens next in + a given flow. +

    +
    + navigate("/projects/sistent/components/button")} + title="Overview" + /> + + navigate("/projects/sistent/components/button/guidance") + } + title="Guidance" + /> + navigate("/projects/sistent/identity/color/code")} + title="Code" + />
    - -
    -

    Text Button

    -

    - Mostly used for less pronounced and very low emphasis actions. Can also - be used for text links as well. -

    -
    -
    - - - -
    - -
    - -

    Sizes

    -     -

    - For now, two different sizes of buttons exist: 56px height and 48px - height. -

    -
    -
    - - - - -
    - -
    - -

    Adding Icons

    -     -

    - Icons are mostly added to filled and outlined buttons and they are used - to better describe the information being passed across by the button’s - label. -

    -
    -
    - - - +
    +

    + Buttons communicate actions to users and they can be placed at + several places throughout the user interface. +

    + +

    Basic Button

    +     +

    The button comes in three types: Filled, Outlined, and Text.

    +

    Filled Button

    +

    + Mostly used for high-emphasis actions and are primarily + distinguished by their fill. They are used to represent actions that + are primary to the solution. +

    +
    +
    + + + +
    + +
    +

    Outlined Button

    +

    + Can be used for both medium and sometimes high-emphasis actions. +

    +
    +
    + + + +
    + +
    +

    Text Button

    +

    + Mostly used for less pronounced and very low emphasis actions. Can + also be used for text links as well. +

    +
    +
    + + + +
    + +
    + +

    Sizes

    +     +

    + For now, two different sizes of buttons exist: 56px height and 48px + height. +

    +
    +
    + + + + +
    + +
    + +

    Adding Icons

    +     +

    + Icons are mostly added to filled and outlined buttons and they are + used to better describe the information being passed across by the + button’s label. +

    +
    +
    + + + +
    + +
    -
    -
    +     ); }; diff --git a/src/sections/Projects/Sistent/components/button/guidance.js b/src/sections/Projects/Sistent/components/button/guidance.js index 0ce3be1c837b..47a8af8da3fa 100644 --- a/src/sections/Projects/Sistent/components/button/guidance.js +++ b/src/sections/Projects/Sistent/components/button/guidance.js @@ -1,139 +1,195 @@ import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; import { Row } from "../../../../../reusecore/Layout"; import { Button, SistentThemeProvider } from "@layer5/sistent"; +import { SistentLayout } from "../../sistent-layout"; + +import TabButton from "../../../../../reusecore/Button"; export const ButtonGuidance = () => { + const location = useLocation(); + return ( -
    -

    - For proper application, these buttons can be used for different purposes - to enable easier and consistent combination when guiding users across - digital experiences. -

    - -

    Function

    -     -

    - The function of different buttons is what determines its usage and how - well suited it is to be applied in a given scenario to solve an existing - problem or complete a pending task. Functions or roles that can be - assigned to buttons in a particular design include: -

    -

    Primary Button

    -

    - Primary buttons are used for the most important actions on a page. It - should be the key button that helps the user navigate in a given flow or - while trying to perform a specific action. This could apply in cases - like when the user needs to submit a from, proceed to a new page, or - complete an action. The filled button serves as the primary button. -

    - - -
    +
    +

    + For proper application, these buttons can be used for different + purposes to enable easier and consistent combination when guiding + users across digital experiences. +

    + +

    Function

    +     +

    + The function of different buttons is what determines its usage and + how well suited it is to be applied in a given scenario to solve an + existing problem or complete a pending task. Functions or roles that + can be assigned to buttons in a particular design include: +

    +

    Primary Button

    +

    + Primary buttons are used for the most important actions on a page. + It should be the key button that helps the user navigate in a given + flow or while trying to perform a specific action. This could apply + in cases like when the user needs to submit a from, proceed to a new + page, or complete an action. The filled button serves as the primary + button. +

    + + +
    + +

    Labeling

    +     +

    + While the styling of a button gives quick indicators as to how it is + to be used and what action it helps to complete, the key element + that helps to provide a complete scope of the purpose of a button is + the text label it contains. As such, button content should be + concise and have as much description as possible to inform users of + what the next step is. +

    +

    Case style

    +

    + Different case styles can be applied to buttons to serve as readable + text that convey information. However, a rule of thumb is that all + buttons follow one specific case style to enhance consistency and + reduce distractions for the user. For all of our buttons, title case + has been used as text labels. +

    +

    Font Weight

    +

    + Font weight can be used to good effect to provide proper emphasis to + buttons as they convey the needed information. Chosen fonts should + be legible with clear and readable characters that do not distract + or cause difficulty while being read. Proper exploration should be + carried out with the intended typeface to ensure it passes muster + before proceeding to use it across all buttons. +

    +

    Content

    +

    + Characters in a button should not be full sentences. Instead, words + or phrases that summarize the purpose of a button could suffice. + Total text in a button is recommended to be an average of 20 + characters long, The language used in buttons should also be + consistent. For instance, if a button has a text label of 'Create + Design', this convention should be maintained and not changed to + something like 'New Design' later on. +

    +
    +
    + ); }; diff --git a/src/sections/Projects/Sistent/components/button/index.js b/src/sections/Projects/Sistent/components/button/index.js index 530b828ab2d7..b1532f2f6bc1 100644 --- a/src/sections/Projects/Sistent/components/button/index.js +++ b/src/sections/Projects/Sistent/components/button/index.js @@ -1,88 +1,191 @@ -import React, { useState } from "react"; -import SistentWrapper from "../../sistent.style"; -import TOC from "../../../../../components/SistentNavigation"; -import { Container } from "../../../../../reusecore/Layout"; -import SistentPagination from "../../../../../components/SistentNavigation/pagination"; -import TabButton from "../../../../../reusecore/Button"; -import IntraPage from "../../../../../components/handbook-navigation/intra-page"; - -import { ButtonOverview } from "./overview"; -import { ButtonGuidance } from "./guidance"; -import { ButtonCode } from "./code"; - -const overviewContents = [ - { id: 0, link: "#Types", text: "Types" }, - { id: 1, link: "#Sizes", text: "Sizes" }, - { id: 2, link: "#Adding Icons", text: "Adding Icons" }, -]; - -const guidanceContents = [ - { id: 0, link: "#Function", text: "Function" }, - { id: 1, link: "#Labelling", text: "Labelling" }, -]; +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; -const codeContents = [ - { id: 0, link: "#Basic Button", text: "Basic Button" }, - { id: 1, link: "#Sizes", text: "Sizes" }, - { id: 1, link: "#Adding Icons", text: "Adding Icons" }, -]; +import { SistentThemeProvider, Button } from "@layer5/sistent"; +import TabButton from "../../../../../reusecore/Button"; +import { SistentLayout } from "../../sistent-layout"; +import { Col, Row } from "../../../../../reusecore/Layout"; const SistentButton = () => { - const [activeTab, setActiveTab] = useState("overview"); - - const contents = () => { - if (activeTab === "overview") { - return overviewContents; - } else if (activeTab === "guidance") { - return guidanceContents; - } else if (activeTab === "code") { - return codeContents; - } - }; + const location = useLocation(); return ( - -
    -

    Button

    -
    - -
    - -
    - -

    Button

    -     -

    - Colors when accurately applied can be a potent tool that enables - designers and developers to implement solutions with speed and - efficiency. Here are a couple of things to keep in mind. -

    -
    - setActiveTab("overview")} - title="Overview" - /> - setActiveTab("guidance")} - title="Guidance" - /> - setActiveTab("code")} - title="Code" - /> -
    - {activeTab === "overview" && } - {activeTab === "guidance" && } - {activeTab === "code" && } -
    - -     - + +
    + +

    Button

    +     +

    + A button is an interactive element that triggers a specific action, + takes users where they need to go, and points out what happens next in + a given flow. +

    +
    + navigate("/projects/sistent/components/button")} + title="Overview" + /> + + navigate("/projects/sistent/components/button/guidance") + } + title="Guidance" + /> + navigate("/projects/sistent/components/button/code")} + title="Code" + /> +
    +
    +

    + Buttons are crucial and integral elements in an interface. They are + mostly used to trigger actions and in so doing, take users to where + they need to be in any step of a flow. Buttons can be used in tandem + with other elements to piece designs together and convey digital + experiences. +

    + +

    Types

    +     +

    + In order to establish hierarchy, prominence and flexibility, + multiple types of buttons exist that can assist users to achieve + different aims. With the different styling on these buttons, it + makes it easier for users to navigate and arrive at their solutions + faster. +

    +

    Filled

    +

    + Filled buttons are buttons that consist a background color fill and + a text in it. Depending on the theme or intended action, the color + fill can range from a primary brand color to any other applicable + color in a brand’s color palette. +

    + + +
    - +     ); }; diff --git a/src/sections/Projects/Sistent/components/button/overview.js b/src/sections/Projects/Sistent/components/button/overview.js deleted file mode 100644 index b7af8c7dd7aa..000000000000 --- a/src/sections/Projects/Sistent/components/button/overview.js +++ /dev/null @@ -1,138 +0,0 @@ -import React from "react"; -import { Col, Row } from "../../../../../reusecore/Layout"; - -import { Button, SistentThemeProvider } from "@layer5/sistent"; - -export const ButtonOverview = () => { - return ( -
    -

    - Buttons are crucial and integral elements in an interface. They are - mostly used to trigger actions and in so doing, take users to where they - need to be in any step of a flow. Buttons can be used in tandem with - other elements to piece designs together and convey digital experiences. -

    - -

    Types

    -     -

    - In order to establish hierarchy, prominence and flexibility, multiple - types of buttons exist that can assist users to achieve different aims. - With the different styling on these buttons, it makes it easier for - users to navigate and arrive at their solutions faster. -

    -

    Filled

    -

    - Filled buttons are buttons that consist a background color fill and a - text in it. Depending on the theme or intended action, the color fill - can range from a primary brand color to any other applicable color in a - brand’s color palette. -

    - - -
    - ); -}; diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js index 08d87a94ba81..a4e57d44a26d 100644 --- a/src/sections/Projects/Sistent/components/index.js +++ b/src/sections/Projects/Sistent/components/index.js @@ -83,7 +83,6 @@ const SistentComponents = () => {
    - diff --git a/src/sections/Projects/Sistent/components/text-input/code.js b/src/sections/Projects/Sistent/components/text-input/code.js index 97b37e4afca6..3d2c35a33d90 100644 --- a/src/sections/Projects/Sistent/components/text-input/code.js +++ b/src/sections/Projects/Sistent/components/text-input/code.js @@ -1,7 +1,63 @@ import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import { SistentLayout } from "../../sistent-layout"; + +import TabButton from "../../../../../reusecore/Button"; export const TextInputCode = () => { + const location = useLocation(); + return ( -
    Sorry, this page is still under work
    + +
    + +

    Text Input

    +     +

    + Text inputs are important elements that help users interact with an + experience by providing text commands that will in turn return + expected results. These commands can range from providing a free range + of personal information to entering a limited number of characters for + a use case. +

    +
    + navigate("/projects/sistent/components/text-input")} + title="Overview" + /> + + navigate("/projects/sistent/components/text-input/guidance") + } + title="Guidance" + /> + + navigate("/projects/sistent/components/text-input/code") + } + title="Code" + /> +
    +
    Sorry, this page is still under work
    +
    +     ); }; diff --git a/src/sections/Projects/Sistent/components/text-input/guidance.js b/src/sections/Projects/Sistent/components/text-input/guidance.js index 31cccbc65993..748ea7df8cb1 100644 --- a/src/sections/Projects/Sistent/components/text-input/guidance.js +++ b/src/sections/Projects/Sistent/components/text-input/guidance.js @@ -1,70 +1,126 @@ import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; + import { Row } from "../../../../../reusecore/Layout"; import { SistentThemeProvider, Input } from "@layer5/sistent"; +import { SistentLayout } from "../../sistent-layout"; +import TabButton from "../../../../../reusecore/Button"; export const TextInputGuidance = () => { + const location = useLocation(); + return ( -
    -

    - Although we have only one type of text input to be used, there are - different roles that they can function in that ensure that these inputs - prove sufficient for multiple use cases. -

    - -

    Function

    -     -

    -

    Default

    -

    - Default text inputs are used for most of the input needs across an - interface. From filling up forms to entering text content in provided - form fields to complete an action or a task. this text input is mostly - utilized. Icons are not seldom required in this text input, however, - they can included when extremely necessary. -

    - - - - - -

    Multiline

    -

    - Multiline text input functions for input that requires more than one - line of text. This text input adjusts vertically based on the amount of - lines of text entered into the text field. -

    - - - - - - -

    Labelling

    -     -

    - A couple of elements come together to support the input field depending - on the context in is being used. These elements either provide added - information or provide much needed support to ensure users are able to - complete intended tasks. -

    -

    Label

    -

    - The label is an optional feature that can accompany the text input. It - an be used to point out what is required in the input field. -

    -

    Required

    -

    - This type of label that is usually applied in forms to inform users of a - compulsary information that is to be provided in order to complete the - form. It is represented by an asterisk mark (*) that appears after the - label text. -

    -

    Helper text

    -

    - Helper text appears at the bottom of the input field and it is primarily - to serve as an alert for the user to inform them based on the input they - have entered but only where necessary. -

    -
    + +
    + +

    Text Input

    +     +

    + Text inputs are important elements that help users interact with an + experience by providing text commands that will in turn return + expected results. These commands can range from providing a free range + of personal information to entering a limited number of characters for + a use case. +

    +
    + navigate("/projects/sistent/components/text-input")} + title="Overview" + /> + + navigate("/projects/sistent/components/text-input/guidance") + } + title="Guidance" + /> + + navigate("/projects/sistent/components/text-input/code") + } + title="Code" + /> +
    +
    +

    + Although we have only one type of text input to be used, there are + different roles that they can function in that ensure that these + inputs prove sufficient for multiple use cases. +

    + +

    Function

    +     +

    +

    Default

    +

    + Default text inputs are used for most of the input needs across an + interface. From filling up forms to entering text content in + provided form fields to complete an action or a task. this text + input is mostly utilized. Icons are not seldom required in this text + input, however, they can included when extremely necessary. +

    + + + + + +

    Multiline

    +

    + Multiline text input functions for input that requires more than one + line of text. This text input adjusts vertically based on the amount + of lines of text entered into the text field. +

    + + + + + + +

    Labelling

    +     +

    + A couple of elements come together to support the input field + depending on the context in is being used. These elements either + provide added information or provide much needed support to ensure + users are able to complete intended tasks. +

    +

    Label

    +

    + The label is an optional feature that can accompany the text input. + It an be used to point out what is required in the input field. +

    +

    Required

    +

    + This type of label that is usually applied in forms to inform users + of a compulsary information that is to be provided in order to + complete the form. It is represented by an asterisk mark (*) that + appears after the label text. +

    +

    Helper text

    +

    + Helper text appears at the bottom of the input field and it is + primarily to serve as an alert for the user to inform them based on + the input they have entered but only where necessary. +

    +
    +
    +     ); }; diff --git a/src/sections/Projects/Sistent/components/text-input/index.js b/src/sections/Projects/Sistent/components/text-input/index.js index 41016a025f4a..7b5ef0a5c343 100644 --- a/src/sections/Projects/Sistent/components/text-input/index.js +++ b/src/sections/Projects/Sistent/components/text-input/index.js @@ -1,90 +1,155 @@ -import React, { useState } from "react"; -import SistentWrapper from "../../sistent.style"; -import TOC from "../../../../../components/SistentNavigation"; -import { Container } from "../../../../../reusecore/Layout"; -import SistentPagination from "../../../../../components/SistentNavigation/pagination"; -import TabButton from "../../../../../reusecore/Button"; -import IntraPage from "../../../../../components/handbook-navigation/intra-page"; - -import { TextInputOverview } from "./overview"; -import { TextInputGuidance } from "./guidance"; -import { TextInputCode } from "./code"; +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; -const overviewContents = [ - { id: 0, link: "#Design", text: "Design" }, - { id: 1, link: "#Sizes", text: "Sizes" }, - { id: 2, link: "#Adding Icons", text: "Adding Icons" }, -]; +import { SistentThemeProvider, Input } from "@layer5/sistent"; -const guidanceContents = [ - { id: 0, link: "#Function", text: "Function" }, - { id: 1, link: "#Labelling", text: "Labelling" }, -]; - -const codeContents = [ - { id: 0, link: "#Basic Button", text: "Basic Button" }, - { id: 1, link: "#Sizes", text: "Sizes" }, - { id: 1, link: "#Adding Icons", text: "Adding Icons" }, -]; +import { Row } from "../../../../../reusecore/Layout"; +import TabButton from "../../../../../reusecore/Button"; +import { SistentLayout } from "../../sistent-layout"; const SistentTextInput = () => { - const [activeTab, setActiveTab] = useState("overview"); - - const contents = () => { - if (activeTab === "overview") { - return overviewContents; - } else if (activeTab === "guidance") { - return guidanceContents; - } else if (activeTab === "code") { - return codeContents; - } - }; - + const location = useLocation(); return ( - -
    -

    Button

    -
    - -
    - -
    - -

    Text Input

    -     -

    - Text inputs are important elements that help users interact with - an experience by providing text commands that will in turn return - expected results. These commands can range from providing a free - range of personal information to entering a limited number of - characters for a use case. -

    -
    - setActiveTab("overview")} - title="Overview" - /> - setActiveTab("guidance")} - title="Guidance" + +
    + +

    Text Input

    +     +

    + Text inputs are important elements that help users interact with an + experience by providing text commands that will in turn return + expected results. These commands can range from providing a free range + of personal information to entering a limited number of characters for + a use case. +

    +
    + navigate("/projects/sistent/components/text-input")} + title="Overview" + /> + + navigate("/projects/sistent/components/text-input/guidance") + } + title="Guidance" + /> + + navigate("/projects/sistent/components/text-input/code") + } + title="Code" + /> +
    +
    +

    + Text inputs are important elements that help users interact with an + experience by providing text commands that will in turn return + expected results. These commands can range from providing a free + range of personal information to entering a limited number of + characters for a use case. +

    + +

    Design

    +     +

    + Instead of various types for use across designs, the text input has + just one type to ensure simplicity and efficiency. It is preferable + that inputs are as minimal as possible since the sole function that + they generally perform is to ensure that users are able to send in + data and receive corresponding information. +

    + + + + + + +

    Sizes

    +     +

    + Since input fields have a responsive width that adjusts depending on + the need and use case, size considerations are mostly directed at + the height of the field. This means that the size of text inputs + adjust only relative to the height of the text field. Because text + inputs are mostly used in tandem with buttons, to ensure design + consistency, text inputs and buttons have similar size requirements. +

    +

    56px / 3.5rem

    +

    + The 56px text input is the first field size. It is the largest text + input available for use and it is available for both mobile and + desktop resolutions, but it serves in different capacities across + these different resolutions. +

    + + + - setActiveTab("code")} - title="Code" + + +

    48px / 3rem

    +

    + The 48px text input is the second field size in use and it is + available from mobile to desktop resolutions, even though it serves + in different capacities across these screen sizes. +

    + + + -
    - {activeTab === "overview" && } - {activeTab === "guidance" && } - {activeTab === "code" && } -
    - - - + + +

    + NOTE: +

    +

    + These sizes are being specified with numerical values because though + the same size is used across screen resolutions, they have different + roles. On desktop for instance, the 56px text input is a the default + size, and 48px the small size, while on mobile, 56px is large and + 48px is the default size. Preferred text input sizes (height) are + usually arrived at through exploration and proper consideration of + industry standards and best practices. +

    + +

    Adding Icons

    +     +

    + Icons can be used often in text inputs to aid in understanding the + required parameters for a given field or to provide options that can + help to improve the experience as a user navigates a given set of + text inputs. Depending on the context, icons can be placed on the + left and right at different times or even at the same time. The + icons should be aligned to the left or right side of the input field + and not to the center, while text remains left aligned. +

    +
    - + ); }; diff --git a/src/sections/Projects/Sistent/components/text-input/overview.js b/src/sections/Projects/Sistent/components/text-input/overview.js deleted file mode 100644 index d5ddf3d04c6f..000000000000 --- a/src/sections/Projects/Sistent/components/text-input/overview.js +++ /dev/null @@ -1,95 +0,0 @@ -import React from "react"; - -import { SistentThemeProvider, Input } from "@layer5/sistent"; -import { Row } from "../../../../../reusecore/Layout"; - -export const TextInputOverview = () => { - return ( -
    -

    - Text inputs are important elements that help users interact with an - experience by providing text commands that will in turn return expected - results. These commands can range from providing a free range of - personal information to entering a limited number of characters for a - use case. -

    - -

    Design

    -     -

    - Instead of various types for use across designs, the text input has just - one type to ensure simplicity and efficiency. It is preferable that - inputs are as minimal as possible since the sole function that they - generally perform is to ensure that users are able to send in data and - receive corresponding information. -

    - - - - - - -

    Sizes

    -     -

    - Since input fields have a responsive width that adjusts depending on the - need and use case, size considerations are mostly directed at the height - of the field. This means that the size of text inputs adjust only - relative to the height of the text field. Because text inputs are mostly - used in tandem with buttons, to ensure design consistency, text inputs - and buttons have similar size requirements. -

    -

    56px / 3.5rem

    -

    - The 56px text input is the first field size. It is the largest text - input available for use and it is available for both mobile and desktop - resolutions, but it serves in different capacities across these - different resolutions. -

    - - - - - -

    48px / 3rem

    -

    - The 48px text input is the second field size in use and it is available - from mobile to desktop resolutions, even though it serves in different - capacities across these screen sizes. -

    - - - - - -

    - NOTE: -

    -

    - These sizes are being specified with numerical values because though the - same size is used across screen resolutions, they have different roles. - On desktop for instance, the 56px text input is a the default size, and - 48px the small size, while on mobile, 56px is large and 48px is the - default size. Preferred text input sizes (height) are usually arrived at - through exploration and proper consideration of industry standards and - best practices. -

    - -

    Adding Icons

    -     -

    - Icons can be used often in text inputs to aid in understanding the - required parameters for a given field or to provide options that can - help to improve the experience as a user navigates a given set of text - inputs. Depending on the context, icons can be placed on the left and - right at different times or even at the same time. The icons should be - aligned to the left or right side of the input field and not to the - center, while text remains left aligned. -

    -
    - ); -}; diff --git a/src/sections/Projects/Sistent/identity/color/code.js b/src/sections/Projects/Sistent/identity/color/code.js index e9d49d6ebbd0..4add069ab058 100644 --- a/src/sections/Projects/Sistent/identity/color/code.js +++ b/src/sections/Projects/Sistent/identity/color/code.js @@ -1,4 +1,5 @@ import React from "react"; +import { navigate } from "gatsby"; import BrandColors from "../../../../../assets/images/app/projects/sistent/brand-colors-table.png"; import GreyscaleColors from "../../../../../assets/images/app/projects/sistent/greyscale-colors-table.png"; import BgColors from "../../../../../assets/images/app/projects/sistent/bg-colors-table.png"; @@ -15,113 +16,161 @@ import TextColorsDark from "../../../../../assets/images/app/projects/sistent/te import BorderColorsDark from "../../../../../assets/images/app/projects/sistent/border-colors-table-dark.png"; import ComponentColorsDark from "../../../../../assets/images/app/projects/sistent/components-table-dark.png"; +import { SistentLayout } from "../../sistent-layout"; import { Col, Row } from "../../../../../reusecore/Layout"; +import Button from "../../../../../reusecore/Button"; import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; const ColorCode = () => { const { isDark } = useStyledDarkMode(); + return ( -
    -

    - These colors have been structured into tokens that represent specific - values. These tokens will be arranged in a package to enable referencing - and importing it into editor files for use. The tokens are grouped into - categories to represent the ones that are directly usable in designs and - those that are to be aliased by tokens used in designs. This makes for - proper structure and consistent usage of color across all proposed and - implemented designs. The only exception for usage of primitive tokens - might be when applying color to illustrations. -

    - -

    Primitive Category

    -     -

    - Since this category will not be used directly in designs, it does not - have any role descriptions. -

    -

    Brand Colors

    - - - Brand colors - - -

    Greyscale Colors

    - - - Greyscale colors - - -

    Function Colors

    - - - Function colors - - - -

    Semantic Category

    -     -

    - The semantic category has been sub-categorized into background, text, - brand, border, and functions. Possibility for a few more categories - exists as the need arises. -

    -

    Background Colors

    - - - Background colors - - -

    Text Colors

    - - - Text colors +
    + +

    Color

    +     + +

    + Colors when accurately applied can be a potent tool that enables + designers and developers to implement solutions with speed and + efficiency. Here are a couple of things to keep in mind. +

    +
    +
    +
    +
    +

    + These colors have been structured into tokens that represent + specific values. These tokens will be arranged in a package to + enable referencing and importing it into editor files for use. The + tokens are grouped into categories to represent the ones that are + directly usable in designs and those that are to be aliased by + tokens used in designs. This makes for proper structure and + consistent usage of color across all proposed and implemented + designs. The only exception for usage of primitive tokens might be + when applying color to illustrations. +

    + +

    Primitive Category

    +     +

    + Since this category will not be used directly in designs, it does + not have any role descriptions. +

    +

    Brand Colors

    + + + Brand colors + + +

    Greyscale Colors

    + + + Greyscale colors + + +

    Function Colors

    + + + Function colors + + + +

    Semantic Category

    +     +

    + The semantic category has been sub-categorized into background, + text, brand, border, and functions. Possibility for a few more + categories exists as the need arises. +

    +

    Background Colors

    + + + Background colors + + +

    Text Colors

    + + + Text colors + + +

    Border Colors

    + + + Border colors + + +

    Component Colors

    +

    + Tokens here are component specific and must be used only for the + component that they are referencing. +

    + + + Border colors + + +
    +
    + ); }; diff --git a/src/sections/Projects/Sistent/identity/color/guidance.js b/src/sections/Projects/Sistent/identity/color/guidance.js index a77b7d23628e..4392953e9f44 100644 --- a/src/sections/Projects/Sistent/identity/color/guidance.js +++ b/src/sections/Projects/Sistent/identity/color/guidance.js @@ -1,4 +1,5 @@ import React from "react"; +import { navigate } from "gatsby"; import { Col, Row } from "../../../../../reusecore/Layout"; import TonalPalettes from "../../../../../assets/images/app/projects/sistent/tonal-palettes-full.png"; import TonalPalettesDark from "../../../../../assets/images/app/projects/sistent/tonal-palettes-full-dark.png"; @@ -6,168 +7,219 @@ import ContextVisuals5 from "../../../../../assets/images/app/projects/sistent/c import ContextVisuals6 from "../../../../../assets/images/app/projects/sistent/context-visuals-6.png"; import ContextVisuals6Dark from "../../../../../assets/images/app/projects/sistent/context-visuals-6-dark.png"; import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; +import { SistentLayout } from "../../sistent-layout"; +import Button from "../../../../../reusecore/Button"; const ColorGuidance = () => { const { isDark } = useStyledDarkMode(); + return ( -
    -

    - Having a color palette is one thing, and organizing it into usable - content for cross-functional teams is another. Suffice to say that - without proper structure, a good tonal palette can still be unproductive - if the target audience have no clue what to do with it. We have - organized color into a consumable form to ensure efficient and accurate - application in order to achieve desired results. -

    - -

    Tonal Palettes

    -     -

    - To attain the desired level of variation across themes, we will have to - utilize more than just the hues on a brand’s color palette. It therefore - becomes necessary to employ the use of tonal pallets. Tonal palettes are - variations of a given hue comprising of the hue’s tints and shades. - Armed with this array of harmonious colors, it becomes much easier to - combine them to actualize different UI elements or states, website pages - and various products across any desired number of themes. -

    -

    - These hues are organized into different levels of brightness and - arranged in ranges of 10-90 (total of nine) for neutrals and 10-70 - (total of seven) for brand colors, as well as all other hues in our - color system. This structure will enable cohesive combinations across - all implemented designs. With a base hue of ‘code-40’, tints and shades - are derived to complete the spectrum range.. These color selections are - further supported by alert colors that complement the base Keppel Green. - Blue, Green, Yellow, and Red hues were chosen for this. -

    - - - Tonal Palettes +
    + +

    Color

    +     +

    + Colors when accurately applied can be a potent tool that enables + designers and developers to implement solutions with speed and + efficiency. Here are a couple of things to keep in mind. +

    +
    +
    +
    +
    +

    + Having a color palette is one thing, and organizing it into usable + content for cross-functional teams is another. Suffice to say that + without proper structure, a good tonal palette can still be + unproductive if the target audience have no clue what to do with it. + We have organized color into a consumable form to ensure efficient + and accurate application in order to achieve desired results. +

    + +

    Tonal Palettes

    +     +

    + To attain the desired level of variation across themes, we will have + to utilize more than just the hues on a brand’s color palette. It + therefore becomes necessary to employ the use of tonal pallets. + Tonal palettes are variations of a given hue comprising of the hue’s + tints and shades. Armed with this array of harmonious colors, it + becomes much easier to combine them to actualize different UI + elements or states, website pages and various products across any + desired number of themes. +

    +

    + These hues are organized into different levels of brightness and + arranged in ranges of 10-90 (total of nine) for neutrals and 10-70 + (total of seven) for brand colors, as well as all other hues in our + color system. This structure will enable cohesive combinations + across all implemented designs. With a base hue of ‘code-40’, tints + and shades are derived to complete the spectrum range.. These color + selections are further supported by alert colors that complement the + base Keppel Green. Blue, Green, Yellow, and Red hues were chosen for + this. +

    + + + Tonal Palettes + + + +

    Basic Colors

    +     +

    + We have also structured colors with relatable nomenclature to ensure + easy identification and deployment. These names also conveniently + double as one of the parameters used in identifying the color group + using color tokens. Any one of them must be included in token + creation because they specify what it is that is being named making + for easier identification. +

    +

    Background Colors

    +

    + Background colors serve as layer that can house text content, UI + elements, and other layers with background colors. It may include + but is not limited to specifications like default, hover, pressed, + selected, disabled, and brand. +

    +

    Text Colors

    +

    + Text color addresses color specifically for the purpose of text that + is added as content to the user interface. It is organized into + default, secondary, and tertiary sequence. There can also be text + color for brand color and other alert colors. +

    +

    Icon Colors

    +

    + Icons as the name implies is color used to represent icons + throughout designs. Apart form the default and secondary icon + colors, they can also be organized with brand color as well as the + four alert colors. +

    +

    Border Colors

    +

    + Border colors refer mostly to strokes, lines and outlines on an + outline button for instance that will need to have specific color to + complement designs. They are organized into default, strong, and + brand and may also include the alert colors as well. +

    + +

    Token Specification

    +     +

    + As highlighted earlier, tokens can serve as a bridge between design + and development and, as such, are key in order to ensure a seamless + workflow for all interested parties. While these token values can be + very specific, like what color to use on the background color of a + button, the text color in a given use case, or even a border color, + it is also a flexible yet precise and consistent way of carrying out + user interface tasks. +

    +

    Tokenized Colors

    +

    + To make this work, we cannot rely on individual hex codes for every + use case throughout products and interfaces since it will create + much less friction going forward. +

    +

    + To this end, we have suggested a set of color tokens that define a + color as well as how it may be used, which can also change + automatically based on context. +

    + + + Context Visuals + + +

    The Role of Color Tokens

    +

    + While the colors on the tonal palette can be referenced + individually, in order for a consistent system to be created, it is + crucial that only our top-level color tokens (e.g., text-default) + are used instead of base tokens from the palette (e.g., + charcoal/code-90) in both code and designs. +

    +

    Color Schema

    +

    + The color schema is a pattern where parameters are stringed together + in a particular order. Each of these parameters has predictable + names that describe a specific color. Individual parameters combine + to form a token system. This is the schema that we have used to + arrive at the various parameters: +

    +

    + Type: + This is the only required parameter, and it specifies the thing that + color is being added to. The basic types we have identified are + background, text, icons, and border. +

    +

    + Color Role: + Since each color in a user interface has a specific meaning, it is + better to represent hues based on how they are used as opposed to a + value. For instance, a default accent color can have the parameter + -brand. However, this can represent different values of that brand + color if there is a shift in tones depending on the theme or for any + other related reason. +

    +

    + Prominence: + This serves to enhance the visual emphasis of UI elements used in + relation to each other. Some of the parameters in the type schema + support -secondary and -tertiary prominence parameters, while some + other parameters support -default, -strong, and the list could go + on. +

    + + + Context Visuals + + +

    + More categorization can be added to the schema as the need arises. + However, it is crucial to ensure that there are sufficient use cases + to arrive at this conclusion in order to avoid dormant or idle + parameters being created. +

    +
    +
    + ); }; diff --git a/src/sections/Projects/Sistent/identity/color/index.js b/src/sections/Projects/Sistent/identity/color/index.js index 374dcdb1d9a4..b226e78bd53c 100644 --- a/src/sections/Projects/Sistent/identity/color/index.js +++ b/src/sections/Projects/Sistent/identity/color/index.js @@ -1,92 +1,260 @@ -import React, { useState } from "react"; -import { Container } from "../../../../../reusecore/Layout"; -import SistentWrapper from "../../sistent.style"; -import TOC from "../../../../../components/SistentNavigation"; -import IntraPage from "../../../../../components/handbook-navigation/intra-page"; +import React from "react"; +import { navigate } from "gatsby"; +import { Row, Col } from "../../../../../reusecore/Layout"; +import { useLocation } from "@reach/router"; import Button from "../../../../../reusecore/Button"; -import ColorOverview from "./overview"; -import ColorGuidance from "./guidance"; -import ColorCode from "./code"; -import SistentPagination from "../../../../../components/SistentNavigation/pagination"; - -const overviewContents = [ - { id: 0, link: "#Introduction", text: "Introduction" }, - { id: 1, link: "#Color Anatomy", text: "Color Anatomy" }, - { id: 2, link: "#Layer Hirarchy", text: "Layer Hirarchy" }, - { - id: 3, - link: "#Green Color Accessbility", - text: "Green Color Accessbility", - }, -]; - -const guidanceContent = [ - { id: 0, link: "#Tonal Palettes", text: "Tonal Palettes" }, - { id: 1, link: "#Basic Colors", text: "Basic Colors" }, - { id: 2, link: "#Token Specification", text: "Token Specification" }, -]; - -const codeContent = [ - { id: 0, link: "#Primitive Category", text: "Primitive Category" }, - { id: 1, link: "#Semantic Category", text: "Semantic Category" }, -]; +import { SistentLayout } from "../../sistent-layout"; +import TonalPallete from "../../../../../assets/images/app/projects/sistent/tonal-palettes.png"; +import TonalPalleteDark from "../../../../../assets/images/app/projects/sistent/tonal-palettes-dark.png"; +import ContextVisuals1 from "../../../../../assets/images/app/projects/sistent/context-visuals-1.png"; +import ContextVisuals2 from "../../../../../assets/images/app/projects/sistent/context-visuals-2.png"; +import ContextVisuals3 from "../../../../../assets/images/app/projects/sistent/context-visuals-3.png"; +import ContextVisuals4 from "../../../../../assets/images/app/projects/sistent/context-visuals-4.png"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; const SistentIdentityColor = () => { - const [activeTab, setActiveTab] = useState("overview"); - - const contents = () => { - if (activeTab === "overview") { - return overviewContents; - } else if (activeTab === "guidance") { - return guidanceContent; - } else if (activeTab === "code") { - return codeContent; - } - }; + const location = useLocation(); + const { isDark } = useStyledDarkMode(); return ( - -
    -

    Color

    -
    - -
    - -
    - -

    Color

    -     -

    - Colors when accurately applied can be a potent tool that enables - designers and developers to implement solutions with speed and - efficiency. Here are a couple of things to keep in mind. -

    -
    -
    +
    +

    + In order to achieve the aim of maintaining a consistent and engaging + digital interface across Layer5, whether it is in the form of + websites, applications, or experiences, a detailed explanation of + color application along with practical use cases is needed. To this + end, the following concepts help to shape a suitable identity as we + aim for balance throughout our User Interface. +

    + +

    Introduction

    +     +

    + When the color palette is accurately put to use, it ensures a + recognizable consistency in Layer5's array of digital interfaces and + products. This is made possible due to adherence to well defined + rules which though specific, are also flexible and give ample room + for professionals to curate appealing solutions across themes. +

    + +

    The Basics

    +     +

    + Let's start with a few of the common terms that we will come across + frequently, as understanding what they mean will inform us of + applicable use cases and proper procedures that should not be + overlooked. +

    +

    Theme

    +

    + By definition, a theme is a cohesive and consistent look and feel + for a product. This consistent look can be achieved with the use of + harmonious color palettes, legible fonts and layout patterns. + Currently, sistent outlines specifications for light and dark + themes. +

    +

    Value

    +

    + A value is the unique visual attribute assigned to a token through + the use of themes. This could range from hex codes to rgba values + which are used to highlight specific colors in any given instance. + We highly recommend that no exact values be referenced anywhere in + the design in order to avoid errors and ensure consistency. Instead, + tokens should be used to curate and implement the reusable values. + More on tokens next. +

    +

    Tokens

    +

    + Tokens can be regarded as a shared language between design and + development for communicating detailed information about how to + build user interfaces. Generally, a rule of thumb is to represent + the context (background, text, component), role (success, warning, + brand, inverse), and modifier(s) (secondary, tertiary, hover) in a + string of text that will represent set values gotten from the colors + in the color palette. +

    +

    Role

    +

    + Roles are parameters that specify the context that colors are being + applied to and while different roles can share the same value, the + token structure means that they will have different use cases. These + values can be different though depending on the current theme. +

    + +

    Color Anatomy

    +     +

    + Sistent's default themes are derived from Layer5's color palette of + which the Keppel Green color serves as the dominant primary action + color with subtle shifts in value to enable the required visual + accessibility as recommended in the WCAG (Web Content Accessibility + Guidelines) 2.1 compliance standards. It is also sometimes combined + with Saffron Yellow and Caribbean Green colors accentuate some other + parts of the user interface like CTA buttons as well as + illustrations and icons. +

    +

    + The Charcoal color as well as another accent grey serve as neutrals + to complement these greens and create harmonious implementations. + These five colors combine to form a foundation for the color system. +

    + + + Tonal Palette -
    - {activeTab === "overview" && } - {activeTab === "guidance" && } - {activeTab === "code" && } -
    - -     - + + + +

    Layer Hirarchy

    +     +

    + For backgrounds and surfaces, colors in the neutral palettes are + used cohesively to create depth and spatial associations. This + hierarchical pattern defines the logic of how colors stack on top of + each other in a UI when implementing Sistent themes. This logical + pattern goes beyond just themes but is also built across components + and accounted for in suggested color tokens as well. +

    +

    + There is an alternate relationship between the layer hierarchy in + both light and dark themes: +

      +
    • + In the light theme, as layers are stacked towards the topmost + surface, they become progressively darker. +
      • +
    • + In the dark theme, as layers are stacked towards the topmost + surface, they become progressively lighter. +
      • +
    + This means, in effect, that while there is a fine blend of surfaces + on any given UI theme, there is also strict adherence to + accessibility guidelines and recommendations. +

    + + + Context Visuals + + +

    + A similar hierarchy pattern as above is adopted for brilliantly + colored backgrounds like brand and alert colors when it comes to + interactive states. So as interactions progress from default to + hover to pressed, this same principle may apply. However, when + trying to establish prominence for other user interface needs, an + inverse relationship may be more suitable. Hence, for these + brilliant colors: +

    +
      +
    • + In the light theme, as prominence reduces, layers become + progressively lighter. +
      • +
    • + In the dark theme, as prominence reduces, layers become + progressively darker. +
      • +
    + + + Context Visuals + + + +

    Green Color Accessbility

    +     +

    + In the use of green, Sistent design system ensures compliance with + WCAG 2.1 standards for distinguishable text and color.{" "} + + + (See criteria 1.4.1 and 1.4.3) + + {" "} + Accessibility is a major consideration for Sistent, and as such, + accessibility research and guidelines are kept at the core of the + color selection process.There is further specification on how to + maintain compliance with these standards in both light and dark + themes: +

    +

    Light Theme

    +

    + In order to ensure the minimum contrast of the Keppel Green in the + the light theme, a variation of it is used in the light theme to + ensure proper contrast. +

    + + + Context Visuals + + +

    Dark Theme

    +

    + For the dark theme, the Keppel Green meets the contrast requirement + easily and as such can be used as the primary accent color for all + necessary use cases. +

    + + + Context Visuals + + +

    + NOTE: +

    +

    + Take note that if the primary accent color in use meets + accessibility standards for both intended backgrounds in the light + and dark themes, there might be no need to have a variation of its + hue represent it, as is evident in the example above. +

    +
    -     + ); }; diff --git a/src/sections/Projects/Sistent/identity/color/overview.js b/src/sections/Projects/Sistent/identity/color/overview.js deleted file mode 100644 index 0d8ad71894d2..000000000000 --- a/src/sections/Projects/Sistent/identity/color/overview.js +++ /dev/null @@ -1,205 +0,0 @@ -import React from "react"; -import { Col, Row } from "../../../../../reusecore/Layout"; -import TonalPallete from "../../../../../assets/images/app/projects/sistent/tonal-palettes.png"; -import TonalPalleteDark from "../../../../../assets/images/app/projects/sistent/tonal-palettes-dark.png"; -import ContextVisuals1 from "../../../../../assets/images/app/projects/sistent/context-visuals-1.png"; -import ContextVisuals2 from "../../../../../assets/images/app/projects/sistent/context-visuals-2.png"; -import ContextVisuals3 from "../../../../../assets/images/app/projects/sistent/context-visuals-3.png"; -import ContextVisuals4 from "../../../../../assets/images/app/projects/sistent/context-visuals-4.png"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const ColorOverview = () => { - const { isDark } = useStyledDarkMode(); - return ( -
    -

    - In order to achieve the aim of maintaining a consistent and engaging - digital interface across Layer5, whether it is in the form of websites, - applications, or experiences, a detailed explanation of color - application along with practical use cases is needed. To this end, the - following concepts help to shape a suitable identity as we aim for - balance throughout our User Interface. -

    - -

    Introduction

    -     -

    - When the color palette is accurately put to use, it ensures a - recognizable consistency in Layer5’s array of digital interfaces and - products. This is made possible due to adherence to well defined rules - which though specific, are also flexible and give ample room for - professionals to curate appealing solutions across themes. -

    - -

    The Basics

    -     -

    - Let’s start with a few of the common terms that we will come across - frequently, as understanding what they mean will inform us of applicable - use cases and proper procedures that should not be overlooked. -

    -

    Theme

    -

    - By definition, a theme is a cohesive and consistent look and feel for a - product. This consistent look can be achieved with the use of harmonious - color palettes, legible fonts and layout patterns. Currently, sistent - outlines specifications for light and dark themes. -

    -

    Value

    -

    - A value is the unique visual attribute assigned to a token through the - use of themes. This could range from hex codes to rgba values which are - used to highlight specific colors in any given instance. We highly - recommend that no exact values be referenced anywhere in the design in - order to avoid errors and ensure consistency. Instead, tokens should be - used to curate and implement the reusable values. More on tokens next. -

    -

    Tokens

    -

    - Tokens can be regarded as a shared language between design and - development for communicating detailed information about how to build - user interfaces. Generally, a rule of thumb is to represent the context - (background, text, component), role (success, warning, brand, inverse), - and modifier(s) (secondary, tertiary, hover) in a string of text that - will represent set values gotten from the colors in the color palette. -

    -

    Role

    -

    - Roles are parameters that specify the context that colors are being - applied to and while different roles can share the same value, the token - structure means that they will have different use cases. These values - can be different though depending on the current theme. -

    - -

    Color Anatomy

    -     -

    - Sistent’s default themes are derived from Layer5’s color palette of - which the Keppel Green color serves as the dominant primary action color - with subtle shifts in value to enable the required visual accessibility - as recommended in the WCAG (Web Content Accessibility Guidelines) 2.1 - compliance standards. It is also sometimes combined with Saffron Yellow - and Caribbean Green colors accentuate some other parts of the user - interface like CTA buttons as well as illustrations and icons. -

    -

    - The Charcoal color as well as another accent grey serve as neutrals to - complement these greens and create harmonious implementations. These - five colors combine to form a foundation for the color system. -

    - - - Tonal Palette - - - -

    Layer Hirarchy

    -     -

    - For backgrounds and surfaces, colors in the neutral palettes are used - cohesively to create depth and spatial associations. This hierarchical - pattern defines the logic of how colors stack on top of each other in a - UI when implementing Sistent themes. This logical pattern goes beyond - just themes but is also built across components and accounted for in - suggested color tokens as well. -

    -

    - There is an alternate relationship between the layer hierarchy in both - light and dark themes: -

      -
    • - In the light theme, as layers are stacked towards the topmost - surface, they become progressively darker. -
      • -
    • - In the dark theme, as layers are stacked towards the topmost - surface, they become progressively lighter. -
      • -
    - This means, in effect, that while there is a fine blend of surfaces on - any given UI theme, there is also strict adherence to accessibility - guidelines and recommendations. -

    - - - Context Visuals - - -

    - A similar hierarchy pattern as above is adopted for brilliantly colored - backgrounds like brand and alert colors when it comes to interactive - states. So as interactions progress from default to hover to pressed, - this same principle may apply. However, when trying to establish - prominence for other user interface needs, an inverse relationship may - be more suitable. Hence, for these brilliant colors: -

    -
      -
    • - In the light theme, as prominence reduces, layers become progressively - lighter. -
      • -
    • - In the dark theme, as prominence reduces, layers become progressively - darker. -
      • -
    - - - Context Visuals - - - -

    Green Color Accessbility

    -     -

    - In the use of green, Sistent design system ensures compliance with WCAG - 2.1 standards for distinguishable text and color.{" "} - - - (See criteria 1.4.1 and 1.4.3) - - {" "} - Accessibility is a major consideration for Sistent, and as such, - accessibility research and guidelines are kept at the core of the color - selection process.There is further specification on how to maintain - compliance with these standards in both light and dark themes: -

    -

    Light Theme

    -

    - In order to ensure the minimum contrast of the Keppel Green in the the - light theme, a variation of it is used in the light theme to ensure - proper contrast. -

    - - - Context Visuals - - -

    Dark Theme

    -

    - For the dark theme, the Keppel Green meets the contrast requirement - easily and as such can be used as the primary accent color for all - necessary use cases. -

    - - - Context Visuals - - -

    - NOTE: -

    -

    - Take note that if the primary accent color in use meets accessibility - standards for both intended backgrounds in the light and dark themes, - there might be no need to have a variation of its hue represent it, as - is evident in the example above. -

    -
    - ); -}; - -export default ColorOverview; diff --git a/src/sections/Projects/Sistent/identity/spacing/code.js b/src/sections/Projects/Sistent/identity/spacing/code.js index 3211ac53a69c..7e89db0dadc7 100644 --- a/src/sections/Projects/Sistent/identity/spacing/code.js +++ b/src/sections/Projects/Sistent/identity/spacing/code.js @@ -1,9 +1,60 @@ import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; + +import { SistentLayout } from "../../sistent-layout"; +import Button from "../../../../../reusecore/Button"; export const SpacingCode = () => { + const location = useLocation(); + return ( -
    -

    Sorry, this page is still under work

    -
    + +
    + +

    Spacing

    +     +

    + Space is the unseen component in designed solutions that enables + clear, concise, and consistent arrangement of interface elements + across a screen. +

    +
    +
    +
    +

    Sorry, this page is still under work

    +
    +
    +     ); }; diff --git a/src/sections/Projects/Sistent/identity/spacing/guidance.js b/src/sections/Projects/Sistent/identity/spacing/guidance.js index c3160bc01c6d..773d2b7008b8 100644 --- a/src/sections/Projects/Sistent/identity/spacing/guidance.js +++ b/src/sections/Projects/Sistent/identity/spacing/guidance.js @@ -1,4 +1,6 @@ import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; import SpaceTokenTable2 from "../../../../../assets/images/app/projects/sistent/space-token-table-2-light.png"; import SpaceTokenTable2Dark from "../../../../../assets/images/app/projects/sistent/space-token-table-2-dark.png"; @@ -7,141 +9,194 @@ import SpaceTokenTable3 from "../../../../../assets/images/app/projects/sistent/ import SpaceTokenTable3Dark from "../../../../../assets/images/app/projects/sistent/space-token-table-3-dark.png"; import { Col, Row } from "../../../../../reusecore/Layout"; import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; +import { SistentLayout } from "../../sistent-layout"; + +import Button from "../../../../../reusecore/Button"; export const SpacingGuidance = () => { const { isDark } = useStyledDarkMode(); + const location = useLocation(); + return ( -
    -

    - Applying spatial values to designs is a much debated topic and can prove - to be quite difficult and very confusing especially when trying to - maintain consistency across all designs. To this end, a few concepts - have been pieced together in order to simplify the understanding of - spatial harmony and ensure a consistent execution. -

    - -

    Spatial Organization

    -     -

    - Mostly in an interface, the way space and spatial harmony is achieved is - by applying these space values to specific elements or in specific use - cases. This can range form the size of a given element to the space - between elements on a page. -

    -

    Gap

    -

    - Gap can be used to represent the space between any two given elements in - an interface. This can be the inset values in a button or a card, stack - or inline spacing between blocks of text or a group of elements in a - section, and can also be applicable for margin values in a grid system. - Because this can be confusing to determine a mode of application given - that the spatial system consists of over 10 different values, a set - consisting of five to seven values can be chosen to serve as all the - values for the ‘gap’ spacing that will be used in an interface. -

    -

    - Arriving at these values, however is not arbitrary or random selection - from the spacing scale. Instead, a geometric progression gotten by - multiplying the base space value by a common ratio of two and also - dividing by the same ratio will provide the values needed to populate - the ‘gap’ category. This arrangement will ensure uniform space across an - interface that will greatly help to establish element relationships and - hierarchy. -

    - - - Space Token Table +
    + +

    Spacing

    +     +

    + Space is the unseen component in designed solutions that enables + clear, concise, and consistent arrangement of interface elements + across a screen. +

    +
    +
    +
    + +
    +

    + Applying spatial values to designs is a much debated topic and can + prove to be quite difficult and very confusing especially when + trying to maintain consistency across all designs. To this end, a + few concepts have been pieced together in order to simplify the + understanding of spatial harmony and ensure a consistent execution. +

    + +

    Spatial Organization

    +     +

    + Mostly in an interface, the way space and spatial harmony is + achieved is by applying these space values to specific elements or + in specific use cases. This can range form the size of a given + element to the space between elements on a page. +

    +

    Gap

    +

    + Gap can be used to represent the space between any two given + elements in an interface. This can be the inset values in a button + or a card, stack or inline spacing between blocks of text or a group + of elements in a section, and can also be applicable for margin + values in a grid system. Because this can be confusing to determine + a mode of application given that the spatial system consists of over + 10 different values, a set consisting of five to seven values can be + chosen to serve as all the values for the 'gap' spacing that will be + used in an interface. +

    +

    + Arriving at these values, however is not arbitrary or random + selection from the spacing scale. Instead, a geometric progression + gotten by multiplying the base space value by a common ratio of two + and also dividing by the same ratio will provide the values needed + to populate the 'gap' category. This arrangement will ensure uniform + space across an interface that will greatly help to establish + element relationships and hierarchy. +

    + + + Space Token Table + + +

    + *The last spacing value of 80px that was included was added because + 80px is the value for the margin in the 12 column grid that is being + applied for desktop screens. +

    +

    Radius

    +

    + The radius value of elements in an interface help to define the + theme and density that it conveys. Little to no radius can describe + a more grotesque or brutal theme, while higher and more consistent + use of radiuses can describe a modern and minimal UI theme. Radius + values can be determined based on the use case and the needs of the + designs being curated. With Layer5, we have chosen five radius + values that can provide a the much needed variation that can help to + describe a minimal and consistent user interface. +

    + + + Space Token Table + + +

    + As is the case with most user interface decisions that are agreed + upon, these values should be subjected to proper scrutiny based on + the intended use case as well as appropriate exploration to ensure + the best possible application. +

    +

    Size

    +

    + Size refers to the amount of area that an atom or element of a + design takes up in the available space of the user interface. + Whether it’s that of an icon or the total size of an image, all of + that space can be described as size. While it is true that much + larger size values may not necessarily be strictly defined in the + spatial system, elements which are frequently used and require a + fixed size throughout a design can have specific values assigned to + them to ensure consistency. +

    +

    + Applicable scenarios can be in the case of buttons, text fields, + some cards, navigation menus, logos, and icons. While there are + exceptions to these elements, mostly, it is recommended that they + appear in a uniform size across an interface to improve the + consistency therein. +

    + +

    Space Application Considerations

    +     +

    + For spacing to be effectively employed in designs, a few + considerations are to be made to enable a simple, yet, uniform + application of space values across designs. One such principles is + that in a bounding box, the padding of the box should be the highest + spacing value. This simply means that for any container, (could be a + card, button, an entire page layout) both the horizontal and + vertical padding values must be more than any other space values + used inside of the container to separate its child elements. +

    +

    + This is applicable whether the horizontal and vertical paddings have + the same or different values. To provide more, clarity, the inline + spacing in a container should not be more than its horizontal + padding, and the stack spacing value should not be more than the + container's vertical padding. This gradual decrease in the space + value as we go deeper into a container or an element helps to + enhance uniformity and consistency across designs. +

    +

    Exceptions

    +

    + Of course, these suggestions are not set in stone, and as such, + exceptions should be made to accommodate the peculiar needs of a + design and its existing principles. One of the cases where + exceptions can apply is when proper separation needs to be + established among a group of elements. +

    +

    + Although most pages will have a horizontal padding value, they + seldom have a vertical padding value and since elements are mostly + arranged in a vertical stack in a digital interface, it becomes + necessary that proper separation is established in order to assist + users to easily identify sections and navigate through the content + of a page in the proper manner for better understanding. Varying + values of space can therefore be employed in this vertical stack to + improve users' clarity and minimize any confusion encountered. +

    +
    +
    + ); }; diff --git a/src/sections/Projects/Sistent/identity/spacing/index.js b/src/sections/Projects/Sistent/identity/spacing/index.js index 19ad1ba43fe7..29aad9b33bbf 100644 --- a/src/sections/Projects/Sistent/identity/spacing/index.js +++ b/src/sections/Projects/Sistent/identity/spacing/index.js @@ -1,89 +1,160 @@ -import React, { useState } from "react"; -import { Container } from "../../../../../reusecore/Layout"; -import SistentWrapper from "../../sistent.style"; -import TOC from "../../../../../components/SistentNavigation"; -import IntraPage from "../../../../../components/handbook-navigation/intra-page"; -import Button from "../../../../../reusecore/Button"; -import SistentPagination from "../../../../../components/SistentNavigation/pagination"; -import { SpacingOverview } from "./overview"; -import { SpacingGuidance } from "./guidance"; -import { SpacingCode } from "./code"; +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; -const overviewContents = [ - { id: 0, link: "#The Basics", text: "The Basics" }, - { id: 1, link: "#Scaling", text: "Scaling" }, - { id: 2, link: "#Text and Spacing", text: "Text and Spacing" }, -]; +import { Col, Row } from "../../../../../reusecore/Layout"; +import Button from "../../../../../reusecore/Button"; +import SpaceTokenTable1 from "../../../../../assets/images/app/projects/sistent/space-token-table-1-light.png"; +import SpaceTokenTable1Dark from "../../../../../assets/images/app/projects/sistent/space-token-table-1-dark.png"; -const guidanceContent = [ - { id: 0, link: "#Spatial Organization", text: "Spatial Organization" }, - { - id: 1, - link: "#Space Application Considerations", - text: "Space Application Considerations", - }, -]; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; +import { SistentLayout } from "../../sistent-layout"; -const codeContent = [ - { id: 0, link: "#Primitive Category", text: "Primitive Category" }, - { id: 1, link: "#Semantic Category", text: "Semantic Category" }, -]; const SistentIdentitySpacing = () => { - const [activeTab, setActiveTab] = useState("overview"); - - const contents = () => { - if (activeTab === "overview") { - return overviewContents; - } else if (activeTab === "guidance") { - return guidanceContent; - } else if (activeTab === "code") { - return codeContent; - } - }; + const location = useLocation(); + const { isDark } = useStyledDarkMode(); return ( - -
    -

    Spacing

    -
    - -
    - -
    - -

    Spacing

    -     -

    - Space is the unseen component in designed solutions that enables - clear, concise, and consistent arrangement of interface elements - across a screen. -

    -
    -
    +
    +

    + Spacing is a foundational consideration in any design endeavor. From + intra component spacing to space between elements in a given layout, + intentional application of spacing across a digital experience + elevates its usability, improves its (or the) experience, and + eventually generates much needed website traffic which is a primary + goal for most digital solutions. +

    + +

    The Basics

    +     +

    + A few concepts can be handy to keep in mind as we consider spacing + and its application throughout designs to ensure clarity and proper + understanding. +

    +

    Inset

    +

    + Inset describes the value of padding for any container in the + interface. The description of a container can range from full page + layouts, to page sections, all the way down to card containers and + even icon frames. Inset accounts for the values of both horizontal + and vertical padding. The horizontal and vertical paddings don’t + need to have the same value, however, it is recommended that the + values for the horizontal padding are equivalent. This principle + applies to the values for the vertical paddings as well. +

    +

    Stack

    +

    + Stack in spacing is used to describe the space between vertically + arranged content in a digital interface. Since most digital content + is read from top to bottom, It is only right that they are arranged + in such a way that accurately conveys hierarchy, relationship and + spatial harmony. +

    +

    Inline

    +

    + This is the horizontal space consideration given to elements that + are being arranged in an interface. It can be the space between text + input, horizontally stacked elements like buttons and so on. +

    + +

    Scaling

    +     +

    + To properly implement spacing, a set of values have to be generated + using a scale just like was done in the case of typography. This + avails us with a fixed range of values that provide the much needed + flexibility required by interfaces to be consistent. This range + could be derived from a base spacing value which follows a principle + like a linear scale from the base value, multiples of the base + value, the golden ratio, or a modular scale. +

    +

    + Most digital screen resolutions are divisible by 16 which is a + multiple of eight and so, this makes it a good reason to utilize + eight as our base spacing value. Our scale, therefore, has been + derived from multiples of eight with a half and quarter step of + eight included in the scale to account for much smaller space + considerations, for example, icon padding. The half and quarter + steps have values of two and four respectively. +

    + + + Space Token Table -
    - {activeTab === "overview" && } - {activeTab === "guidance" && } - {activeTab === "code" && } - -
    -     - + + +

    + From this scale of multiples of eight, space values for different + purposes can now be selected for use in an interface raging from gap + between elements on a page to size of elements, to corner radiuses + and other space considerations. +

    + +

    Text and Spacing

    +     +

    + One factor that should be accounted for when sorting out spacing and + other considerations for spatial harmony is text size. Mostly this + affects the stack spacing values and their arrangement. Having all + text sizes in a multiple of the base spacing value is a principle + that can help to avoid inconsistent looking text and space across an + interface. This should also be the same for the line height that + accompanies these text sizes. +

    +

    + Mostly, the text is arranged in a pattern that takes into + consideration the line height of the different sizes of text used in + order to represent proper hierarchy and relationships between text + content in an interface. +

    +
    -     + ); }; diff --git a/src/sections/Projects/Sistent/identity/spacing/overview.js b/src/sections/Projects/Sistent/identity/spacing/overview.js deleted file mode 100644 index d4ebf36c33c7..000000000000 --- a/src/sections/Projects/Sistent/identity/spacing/overview.js +++ /dev/null @@ -1,109 +0,0 @@ -import React from "react"; - -import SpaceTokenTable1 from "../../../../../assets/images/app/projects/sistent/space-token-table-1-light.png"; -import SpaceTokenTable1Dark from "../../../../../assets/images/app/projects/sistent/space-token-table-1-dark.png"; - -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import { Col, Row } from "../../../../../reusecore/Layout"; - -export const SpacingOverview = () => { - const { isDark } = useStyledDarkMode(); - return ( -
    -

    - Spacing is a foundational consideration in any design endeavor. From - intra component spacing to space between elements in a given layout, - intentional application of spacing across a digital experience elevates - its usability, improves its (or the) experience, and eventually - generates much needed website traffic which is a primary goal for most - digital solutions. -

    - -

    The Basics

    -     -

    - A few concepts can be handy to keep in mind as we consider spacing and - its application throughout designs to ensure clarity and proper - understanding. -

    -

    Inset

    -

    - Inset describes the value of padding for any container in the interface. - The description of a container can range from full page layouts, to page - sections, all the way down to card containers and even icon frames. - Inset accounts for the values of both horizontal and vertical padding. - The horizontal and vertical paddings don’t need to have the same value, - however, it is recommended that the values for the horizontal padding - are equivalent. This principle applies to the values for the vertical - paddings as well. -

    -

    Stack

    -

    - Stack in spacing is used to describe the space between vertically - arranged content in a digital interface. Since most digital content is - read from top to bottom, It is only right that they are arranged in such - a way that accurately conveys hierarchy, relationship and spatial - harmony. -

    -

    Inline

    -

    - This is the horizontal space consideration given to elements that are - being arranged in an interface. It can be the space between text input, - horizontally stacked elements like buttons and so on. -

    - -

    Scaling

    -     -

    - To properly implement spacing, a set of values have to be generated - using a scale just like was done in the case of typography. This avails - us with a fixed range of values that provide the much needed flexibility - required by interfaces to be consistent. This range could be derived - from a base spacing value which follows a principle like a linear scale - from the base value, multiples of the base value, the golden ratio, or a - modular scale. -

    -

    - Most digital screen resolutions are divisible by 16 which is a multiple - of eight and so, this makes it a good reason to utilize eight as our - base spacing value. Our scale, therefore, has been derived from - multiples of eight with a half and quarter step of eight included in the - scale to account for much smaller space considerations, for example, - icon padding. The half and quarter steps have values of two and four - respectively. -

    - - - Space Token Table - - -

    - From this scale of multiples of eight, space values for different - purposes can now be selected for use in an interface raging from gap - between elements on a page to size of elements, to corner radiuses and - other space considerations. -

    - -

    Text and Spacing

    -     -

    - One factor that should be accounted for when sorting out spacing and - other considerations for spatial harmony is text size. Mostly this - affects the stack spacing values and their arrangement. Having all text - sizes in a multiple of the base spacing value is a principle that can - help to avoid inconsistent looking text and space across an interface. - This should also be the same for the line height that accompanies these - text sizes. -

    -

    - Mostly, the text is arranged in a pattern that takes into consideration - the line height of the different sizes of text used in order to - represent proper hierarchy and relationships between text content in an - interface. -

    -
    - ); -}; diff --git a/src/sections/Projects/Sistent/identity/typography/code.js b/src/sections/Projects/Sistent/identity/typography/code.js index 757116f3fbb5..159daa3eeca8 100644 --- a/src/sections/Projects/Sistent/identity/typography/code.js +++ b/src/sections/Projects/Sistent/identity/typography/code.js @@ -1,4 +1,6 @@ import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; import TypeTable1 from "../../../../../assets/images/app/projects/sistent/type-table-1-light.png"; import TypeTable1Dark from "../../../../../assets/images/app/projects/sistent/type-table-1-dark.png"; @@ -7,49 +9,105 @@ import TypeTable2 from "../../../../../assets/images/app/projects/sistent/type-t import TypeTable2Dark from "../../../../../assets/images/app/projects/sistent/type-table-2-dark.png"; import { Col, Row } from "../../../../../reusecore/Layout"; import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; +import { SistentLayout } from "../../sistent-layout"; +import Button from "../../../../../reusecore/Button"; const TypographyCode = () => { + const location = useLocation(); const { isDark } = useStyledDarkMode(); return ( -
    -

    - The different fonts are referenced using unique token names to achieve - uniform application of the texts in different use cases across multiple - platforms. These tokens, just like the color, are split into primitive - and semantic categories. -

    - -

    Primitive Category

    -     -

    - This category refers to the seven sizes that were chosen as typesets - from the major third ratio. They form the foundation for all the other - fonts generated and used across the typography system. Since these - tokens lack complete styling however, they are should not be used - directly in designs and as such do not have any roles ascribed to them. - However, if a new role emerges and the need for a new token arises, - these typesets, serve as the reference size for any new font to be - created. -

    - - - Type Table - - - -

    Semantic Category

    -     -

    - The fonts in this category have specifications that make them suitable - for certain use cases either across all platforms or in any given - platform. -

    - - - Type Table - - -
    + +
    + +

    Typography

    +     +

    + Most of the information that is present in a user interface for the + purpose of passing information across is represented via typography. + Correct typography structure and appropriate application is important + in all interfaces. +

    +
    +
    +
    +

    + The different fonts are referenced using unique token names to + achieve uniform application of the texts in different use cases + across multiple platforms. These tokens, just like the color, are + split into primitive and semantic categories. +

    + +

    Primitive Category

    +     +

    + This category refers to the seven sizes that were chosen as typesets + from the major third ratio. They form the foundation for all the + other fonts generated and used across the typography system. Since + these tokens lack complete styling however, they are should not be + used directly in designs and as such do not have any roles ascribed + to them. However, if a new role emerges and the need for a new token + arises, these typesets, serve as the reference size for any new font + to be created. +

    + + + Type Table + + + +

    Semantic Category

    +     +

    + The fonts in this category have specifications that make them + suitable for certain use cases either across all platforms or in any + given platform. +

    + + + Type Table + + +
    +
    +     ); }; diff --git a/src/sections/Projects/Sistent/identity/typography/guidance.js b/src/sections/Projects/Sistent/identity/typography/guidance.js index 6964abe76d11..931e8b392f3c 100644 --- a/src/sections/Projects/Sistent/identity/typography/guidance.js +++ b/src/sections/Projects/Sistent/identity/typography/guidance.js @@ -1,4 +1,7 @@ import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; + import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; import TypeScale2 from "../../../../../assets/images/app/projects/sistent/type-scale-2-light.png"; @@ -7,164 +10,226 @@ import TypeScale3 from "../../../../../assets/images/app/projects/sistent/type-s import TypeScale3Dark from "../../../../../assets/images/app/projects/sistent/type-scale-3-dark.png"; import { Col, Row } from "../../../../../reusecore/Layout"; +import { SistentLayout } from "../../sistent-layout"; +import Button from "../../../../../reusecore/Button"; const TypographyGuidance = () => { + const location = useLocation(); const { isDark } = useStyledDarkMode(); return ( -
    -

    - After a suitable typeface has been chosen, it needs to be arranged to - form the various fonts that will be used to address different text needs - across designs. -

    - -

    Type Scale Customization

    -     -

    - It is not compulsory that all of the sizes in a type scale be used. - However, when choosing a size from the scale, ensure to identify - possible use cases in proposed designs to ensure efficiency and reduce - any chances of having redundant text styles. Remember that less is more - and a particular font size can function in multiple capacities. After - making a selection of sizes, if there is subsequent need for an - additional size because of a recurring use case, then a suitable - corresponding size can be chosen from the scale. This is a better - practice. -

    -

    - For Layer5, we utilized the major third ratio to generate a type scale - that we could work with. -

    - - - Type Scale - - -

    - From this type scale, seven text sizes were selected to account for - various needs in our websites and products. These sizes were further - modified with suitable font specifications that will provide accurate - guidance for usage across implementations. -

    - - - Type Scale - - -

    - To create even more consistent designs, it is important to consider - typography with spacing and spatial proportions in mind. As a rule of - thumb, it is advisable that values obtained from the modular scale are - rounded off to a multiple of the base space value being used across a - set of designs. So for instance, if a set of designs has a base space - value of 4px or 6px, then, the font sizes selected are rounded off to be - multiples of four or six respectively. -

    -

    - In keeping with this, the values of the above sizes are noticeably - distinct from the original type scale that it was derived from. This is - because our base space value is 8px and as such, all the text sizes have - been rounded off to a multiple of eight. This same principle is applied - to the accompanying line heights of these text sizes as well. -

    -

    Layout Considerations

    -

    - For any digital product or website being created, one important thing to - be considered is the responsive nature of design, which translates to - what the said design will look like across different screen sizes - (desktop, tablet, and mobile). To this end, it is also crucial that any - of the text styles selected account for these different layout sizes as - well. As stated earlier, text styles can be used for multiple needs - across a given design. The important thing is that there is proper - documentation to point this out, ensuring that hierarchy and prominence - are duly established. -

    - -

    Establishing Hierarchy

    -     -

    - Since the selected text sizes cannot all be used for the same purpose, - it is necessary to differentiate them from each other in order to have a - working typography system that applies to different use cases and layout - sizes. This will require exploration and multiple tests of these text - styles in the screen sizes they are intended for and the possible use - cases that they will account for which may have already been identified - in the early stages before use. -

    -

    - With these seven different text sizes derived from the type scale, we - have come up with 13 fonts that can be applied in multiple use cases and - across multiple devices. This variation ensures that fonts are not - created randomly and utilized based on individual discretion, eventually - leading to multiple redundant fonts present in our type system. These - fonts must be considered first for application in any use case. If the - need arises for a new font to be added to the type system, sufficient - use cases have to be established to do so. -

    -

    - NOTE: -

    -

    - A new font can be something as little as changing only the font weight - of an already existing font and having both variations function in - different capacities. Of course it can also include replacing an already - existing font or creating an entirely new one to add to the type system. -

    - -

    Font Specification

    -     -

    - Each font should not be a product of random choices just to have a set - of text to work with. They should be informed decisions based on how - they can assist to reinforce a brand, what they can be used to achieve - in designs, and to what extent they should be applied. For more - documentation, check out details on each font in the Code section for - `Typography`. -

    -

    Heading

    -

    - Headings are usually the first thing a user sees when reading a block of - text. The idea is for them to be concise and provide a hint of what - readers can expect from the accompanying body of text or an entire page. - It should also capture attention and encourage further exploration. They - can range from large hero section headings to much smaller subtitle and - label headings. Whatever the case, headings at different sizes can help - to accurately indicate hierarchy and provide guidance for any reader - going through a group of text. -

    -

    - Of Layer5’s ten fonts, seven of them can function as heading text and - ensure hierarchy for different context. For text that needs to be - prominent in a group of text (especially at the beginning), any one of - these fonts will suffice. -

    -

    Body

    -

    - A bulk of text content is written in body or paragraph fonts. These are - less prominent (larger) fonts that provide more context to what brief - ideas any available headings may have outlined. It can also be used for - short text in components and when creating other interface elements due - to its higher legibility when compared to heading or subtitle texts. - Three font sizes have been earmarked to function in this capacity for - the text needs in Layer5 and across all of its products. -

    -

    Label

    -

    - To highlight supplementary information for interface elements, label - texts can suffice. They provide extra information for users as they - navigate a solution. Label texts ideally do not need to be too prominent - hence their smaller size compared to the body text category. There are - two label texts available in the Sistent type system. -

    -

    Code

    -

    - This fonts are curated specifically for the purpose of writing code - across our websites and solutions. They can be used to highlight code - related text in designs like token values, code snippets for components - and any other code related application. Two fonts have been made - available for this purpose. -

    -
    + +
    + +

    Typography

    +     +

    + Most of the information that is present in a user interface for the + purpose of passing information across is represented via typography. + Correct typography structure and appropriate application is important + in all interfaces. +

    +
    +
    +
    +

    + After a suitable typeface has been chosen, it needs to be arranged + to form the various fonts that will be used to address different + text needs across designs. +

    + +

    Type Scale Customization

    +     +

    + It is not compulsory that all of the sizes in a type scale be used. + However, when choosing a size from the scale, ensure to identify + possible use cases in proposed designs to ensure efficiency and + reduce any chances of having redundant text styles. Remember that + less is more and a particular font size can function in multiple + capacities. After making a selection of sizes, if there is + subsequent need for an additional size because of a recurring use + case, then a suitable corresponding size can be chosen from the + scale. This is a better practice. +

    +

    + For Layer5, we utilized the major third ratio to generate a type + scale that we could work with. +

    + + + Type Scale + + +

    + From this type scale, seven text sizes were selected to account for + various needs in our websites and products. These sizes were further + modified with suitable font specifications that will provide + accurate guidance for usage across implementations. +

    + + + Type Scale + + +

    + To create even more consistent designs, it is important to consider + typography with spacing and spatial proportions in mind. As a rule + of thumb, it is advisable that values obtained from the modular + scale are rounded off to a multiple of the base space value being + used across a set of designs. So for instance, if a set of designs + has a base space value of 4px or 6px, then, the font sizes selected + are rounded off to be multiples of four or six respectively. +

    +

    + In keeping with this, the values of the above sizes are noticeably + distinct from the original type scale that it was derived from. This + is because our base space value is 8px and as such, all the text + sizes have been rounded off to a multiple of eight. This same + principle is applied to the accompanying line heights of these text + sizes as well. +

    +

    Layout Considerations

    +

    + For any digital product or website being created, one important + thing to be considered is the responsive nature of design, which + translates to what the said design will look like across different + screen sizes (desktop, tablet, and mobile). To this end, it is also + crucial that any of the text styles selected account for these + different layout sizes as well. As stated earlier, text styles can + be used for multiple needs across a given design. The important + thing is that there is proper documentation to point this out, + ensuring that hierarchy and prominence are duly established. +

    + +

    Establishing Hierarchy

    +     +

    + Since the selected text sizes cannot all be used for the same + purpose, it is necessary to differentiate them from each other in + order to have a working typography system that applies to different + use cases and layout sizes. This will require exploration and + multiple tests of these text styles in the screen sizes they are + intended for and the possible use cases that they will account for + which may have already been identified in the early stages before + use. +

    +

    + With these seven different text sizes derived from the type scale, + we have come up with 13 fonts that can be applied in multiple use + cases and across multiple devices. This variation ensures that fonts + are not created randomly and utilized based on individual + discretion, eventually leading to multiple redundant fonts present + in our type system. These fonts must be considered first for + application in any use case. If the need arises for a new font to be + added to the type system, sufficient use cases have to be + established to do so. +

    +

    + NOTE: +

    +

    + A new font can be something as little as changing only the font + weight of an already existing font and having both variations + function in different capacities. Of course it can also include + replacing an already existing font or creating an entirely new one + to add to the type system. +

    + +

    Font Specification

    +     +

    + Each font should not be a product of random choices just to have a + set of text to work with. They should be informed decisions based on + how they can assist to reinforce a brand, what they can be used to + achieve in designs, and to what extent they should be applied. For + more documentation, check out details on each font in the Code + section for `Typography`. +

    +

    Heading

    +

    + Headings are usually the first thing a user sees when reading a + block of text. The idea is for them to be concise and provide a hint + of what readers can expect from the accompanying body of text or an + entire page. It should also capture attention and encourage further + exploration. They can range from large hero section headings to much + smaller subtitle and label headings. Whatever the case, headings at + different sizes can help to accurately indicate hierarchy and + provide guidance for any reader going through a group of text. +

    +

    + Of Layer5’s ten fonts, seven of them can function as heading text + and ensure hierarchy for different context. For text that needs to + be prominent in a group of text (especially at the beginning), any + one of these fonts will suffice. +

    +

    Body

    +

    + A bulk of text content is written in body or paragraph fonts. These + are less prominent (larger) fonts that provide more context to what + brief ideas any available headings may have outlined. It can also be + used for short text in components and when creating other interface + elements due to its higher legibility when compared to heading or + subtitle texts. Three font sizes have been earmarked to function in + this capacity for the text needs in Layer5 and across all of its + products. +

    +

    Label

    +

    + To highlight supplementary information for interface elements, label + texts can suffice. They provide extra information for users as they + navigate a solution. Label texts ideally do not need to be too + prominent hence their smaller size compared to the body text + category. There are two label texts available in the Sistent type + system. +

    +

    Code

    +

    + This fonts are curated specifically for the purpose of writing code + across our websites and solutions. They can be used to highlight + code related text in designs like token values, code snippets for + components and any other code related application. Two fonts have + been made available for this purpose. +

    +
    +
    +     ); }; diff --git a/src/sections/Projects/Sistent/identity/typography/index.js b/src/sections/Projects/Sistent/identity/typography/index.js index 9b2cf04b33e5..fe8fcec67acd 100644 --- a/src/sections/Projects/Sistent/identity/typography/index.js +++ b/src/sections/Projects/Sistent/identity/typography/index.js @@ -1,92 +1,171 @@ -import React, { useState } from "react"; -import { Container } from "../../../../../reusecore/Layout"; -import SistentWrapper from "../../sistent.style"; -import TOC from "../../../../../components/SistentNavigation"; -import IntraPage from "../../../../../components/handbook-navigation/intra-page"; -import Button from "../../../../../reusecore/Button"; -import TypographyOverview from "./overview"; -import TypographyGuidance from "./guidance"; -import TypographyCode from "./code"; -import SistentPagination from "../../../../../components/SistentNavigation/pagination"; - -const overviewContents = [ - { id: 0, link: "#The Basics", text: "The Basics" }, - { id: 1, link: "#Type Scale", text: "Type Scale" }, - { id: 2, link: "#Font Pairing", text: "Font Pairing" }, -]; +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; -const guidanceContent = [ - { - id: 0, - link: "#Type Scale Customization", - text: "Type Scale Customization", - }, - { id: 1, link: "#Establishing Hierarchy", text: "Establishing Hierarchy" }, - { id: 2, link: "#Font Specification", text: "Font Specification" }, -]; +import Button from "../../../../../reusecore/Button"; +import { SistentLayout } from "../../sistent-layout"; +import { Row, Col } from "../../../../../reusecore/Layout"; -const codeContent = [ - { id: 0, link: "#Primitive Category", text: "Primitive Category" }, - { id: 1, link: "#Semantic Category", text: "Semantic Category" }, -]; +import TypeScale1 from "../../../../../assets/images/app/projects/sistent/type-scale-1-light.png"; +import TypeScale1Dark from "../../../../../assets/images/app/projects/sistent/type-scale-1-dark.png"; +import FontPair from "../../../../../assets/images/app/projects/sistent/font-pair-light.png"; +import FontPairDark from "../../../../../assets/images/app/projects/sistent/font-pair-dark.png"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; const SistentTypography = () => { - const [activeTab, setActiveTab] = useState("overview"); - - const contents = () => { - if (activeTab === "overview") { - return overviewContents; - } else if (activeTab === "guidance") { - return guidanceContent; - } else if (activeTab === "code") { - return codeContent; - } - }; + const location = useLocation(); + const { isDark } = useStyledDarkMode(); return ( - -
    -

    Typography

    -
    - -
    - -
    - -

    Typography

    -     -

    - Most of the information that is present in a user interface for - the purpose of passing information across is represented via - typography. Correct typography structure and appropriate - application is important in all interfaces. -

    -
    -
    +
    +

    + There are a couple of things to consider when preparing to apply + typography to any interface. +

    + +

    The Basics

    +     +

    +

    Typeface

    +

    + A typeface is a set of letters, numbers, and accessories that have + common design features. These characters are usually grouped into + families and used in relation to each other to ensure uniform text + representation in designs and forms of text that are relative to + each other. Qanelas Soft, Times New Roman, Merriweather, and Roboto + are all examples of typefaces. +

    +

    Font

    +

    + Often wrongly used interchangeably with typeface, a font refers to + variations of a typeface. So this includes the weight, size, line + height, tracking (letter spacing), and any other features that are + added to a typeface for it to function in a certain capacity. A key + relationship between a typeface and a font is that characters in a + typeface can be modified to form different fonts. +

    +

    Line Height

    +

    + Line height is mostly used to refer to the distance between lines of + text. WCAG standards for line height recommend a line height that is + at least 1.5 times the chosen font size, especially for small text + sizes. For larger fonts, however, evidence has shown that anything + between 1.2 and 1.5 times the font size might also be appropriate, + especially considering the fact that most large fonts used for + headings and subheadings tend not to exceed a single line of text. +

    + +

    Type Scale

    +     +

    + Type scale with respect to typography points to the set of + incremental steps or rations that dictate how font sizes increase or + decrease as you move up or down a given hierarchy. This increase or + decrease is usually originated from a base size that serves as the + defining font within the scale. These steps create a systemic + progression of font sizes that maintain harmony and visual balance + within a system because of the relationship they share with the base + font. +

    +

    + The base size used to generate a type scale is determined by the + principles governing size, typography, and other brand specific + contexts. As a design best practice, a text size of 16px is + generally accepted as very legible for responsive design. It is also + a multiple of eight which is our base space value and this is + further elaborated on in + + Spacing + + . Reasons like these influence its use as a base size for our type + scale. A modular type scale can be generated using harmonious values + like the golden ratio, the major third, the perfect fifth, and so + on. +

    + + + Type Scale -
    - {activeTab === "overview" && } - {activeTab === "guidance" && } - {activeTab === "code" && } -
    - -     - + + +

    + Because of the progressive increase or decrease that governs the + content of a type scale, it makes it easier to obtain consistent, + related, and harmonious font sizes that can each be used for + specific needs when curating digital interfaces. +

    + +

    Font Pairing

    +     +

    + Sometimes, it might be necessary to make use of more than one + typeface. In such a case, an applicable principle is that one of the + typefaces is used mostly for headings and subheadings, while the + other is used for most paragraphs and body text needs across the + same design. Detailed research on typefaces and their compatibility + will help to make informed decisions when it comes to choosing a + typeface for font pairing. +

    +

    + Layer5 has successfully been able to implement a font pairing of + Qanelas Soft for all heading and subheading text and Open Sans for + all body, paragraph, and content text needs. +

    + + + Font Pair + + +
    -     + ); }; diff --git a/src/sections/Projects/Sistent/identity/typography/overview.js b/src/sections/Projects/Sistent/identity/typography/overview.js deleted file mode 100644 index 70abd3f1b1e4..000000000000 --- a/src/sections/Projects/Sistent/identity/typography/overview.js +++ /dev/null @@ -1,111 +0,0 @@ -import React from "react"; -import { Row, Col } from "../../../../../reusecore/Layout"; - -import TypeScale1 from "../../../../../assets/images/app/projects/sistent/type-scale-1-light.png"; -import TypeScale1Dark from "../../../../../assets/images/app/projects/sistent/type-scale-1-dark.png"; -import FontPair from "../../../../../assets/images/app/projects/sistent/font-pair-light.png"; -import FontPairDark from "../../../../../assets/images/app/projects/sistent/font-pair-dark.png"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const TypographyOverview = () => { - const { isDark } = useStyledDarkMode(); - return ( -
    -

    - There are a couple of things to consider when preparing to apply - typography to any interface. -

    - -

    The Basics

    -     -

    -

    Typeface

    -

    - A typeface is a set of letters, numbers, and accessories that have - common design features. These characters are usually grouped into - families and used in relation to each other to ensure uniform text - representation in designs and forms of text that are relative to each - other. Qanelas Soft, Times New Roman, Merriweather, and Roboto are all - examples of typefaces. -

    -

    Font

    -

    - Often wrongly used interchangeably with typeface, a font refers to - variations of a typeface. So this includes the weight, size, line - height, tracking (letter spacing), and any other features that are added - to a typeface for it to function in a certain capacity. A key - relationship between a typeface and a font is that characters in a - typeface can be modified to form different fonts. -

    -

    Line Height

    -

    - Line height is mostly used to refer to the distance between lines of - text. WCAG standards for line height recommend a line height that is at - least 1.5 times the chosen font size, especially for small text sizes. - For larger fonts, however, evidence has shown that anything between 1.2 - and 1.5 times the font size might also be appropriate, especially - considering the fact that most large fonts used for headings and - subheadings tend not to exceed a single line of text. -

    - -

    Type Scale

    -     -

    - Type scale with respect to typography points to the set of incremental - steps or rations that dictate how font sizes increase or decrease as you - move up or down a given hierarchy. This increase or decrease is usually - originated from a base size that serves as the defining font within the - scale. These steps create a systemic progression of font sizes that - maintain harmony and visual balance within a system because of the - relationship they share with the base font. -

    -

    - The base size used to generate a type scale is determined by the - principles governing size, typography, and other brand specific - contexts. As a design best practice, a text size of 16px is generally - accepted as very legible for responsive design. It is also a multiple of - eight which is our base space value and this is further elaborated on in - - Spacing - - . Reasons like these influence its use as a base size for our type - scale. A modular type scale can be generated using harmonious values - like the golden ratio, the major third, the perfect fifth, and so on. -

    - - - Type Scale - - -

    - Because of the progressive increase or decrease that governs the content - of a type scale, it makes it easier to obtain consistent, related, and - harmonious font sizes that can each be used for specific needs when - curating digital interfaces. -

    - -

    Font Pairing

    -     -

    - Sometimes, it might be necessary to make use of more than one typeface. - In such a case, an applicable principle is that one of the typefaces is - used mostly for headings and subheadings, while the other is used for - most paragraphs and body text needs across the same design. Detailed - research on typefaces and their compatibility will help to make informed - decisions when it comes to choosing a typeface for font pairing. -

    -

    - Layer5 has successfully been able to implement a font pairing of Qanelas - Soft for all heading and subheading text and Open Sans for all body, - paragraph, and content text needs. -

    - - - Font Pair - - -
    - ); -}; - -export default TypographyOverview; diff --git a/src/sections/Projects/Sistent/sistent-layout.js b/src/sections/Projects/Sistent/sistent-layout.js new file mode 100644 index 000000000000..1ed147cd0bbb --- /dev/null +++ b/src/sections/Projects/Sistent/sistent-layout.js @@ -0,0 +1,23 @@ +import React from "react"; +import SistentWrapper from "./sistent.style"; +import TOC from "../../../components/SistentNavigation"; +import { Container } from "../../../reusecore/Layout"; +import SistentPagination from "../../../components/SistentNavigation/pagination"; +import IntraPage from "../../../components/SistentNavigation/intra-page"; + +export const SistentLayout = ({ title, children }) => { + return ( + +
    +

    {title}

    +
    + +
    + + {children} + + +
    +     + ); +};