From 6078bbb79b06d382d8cf2ddf7b766ac34652f482 Mon Sep 17 00:00:00 2001 From: Anand-Theertha Date: Sun, 5 Jan 2025 16:33:26 +0000 Subject: [PATCH] Review Updates --- .../Projects/Sistent/components/card/code.js | 328 ++++++++++-------- .../Sistent/components/card/guidance.js | 215 +++++++----- .../Projects/Sistent/components/card/index.js | 198 ++++++----- 3 files changed, 411 insertions(+), 330 deletions(-) diff --git a/src/sections/Projects/Sistent/components/card/code.js b/src/sections/Projects/Sistent/components/card/code.js index c54e9ef36e36..078ba6a4a8bf 100644 --- a/src/sections/Projects/Sistent/components/card/code.js +++ b/src/sections/Projects/Sistent/components/card/code.js @@ -2,7 +2,15 @@ import React from "react"; import { navigate } from "gatsby"; import { useLocation } from "@reach/router"; -import { SistentThemeProvider, Card, CardActions, CardContent, CardMedia , Typography, Button } from "@layer5/sistent"; +import { + SistentThemeProvider, + Card, + CardActions, + CardContent, + CardMedia, + Typography, + Button, +} from "@layer5/sistent"; import { CodeBlock } from "../button/code-block"; import { SistentLayout } from "../../sistent-layout"; @@ -13,154 +21,82 @@ import TabButton from "../../../../../reusecore/Button"; import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; const codes = [ - `const cardOutlined = ( - + ` + + + Company Spotlight + + + Layer5 + + + Platform + + + Empowering engineers with cloud-native management solutions. + + + + + + `, + + ` + + - - Company Spotlight - - - Layer5 + + Meshery - Platform - - Empowering engineers with cloud-native management solutions. + + Meshery is an open-source cloud-native management platform + designed to help users manage, monitor, and optimize the + performance of service meshes and their workloads. - - - - - ); - - {cardOutlined} - `, - - `const cardMainAction1 = ( - - - - - - Meshery - - - Meshery is an open-source cloud-native management platform. - - - - - ); - - {cardMainAction1} - `, - - ` - const cardMainAction2 = ( - - - - - - Kanvas - - - Kanvas is a collaborative design tool. - - - - - - - - ); - - {cardMainAction2} - `, -]; - -const CardCode = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); + + `, - const cardOutlined = ( - + ` + + - - Company Spotlight - - - Layer5 + + Kanvas - Platform - - Empowering engineers with cloud-native management solutions. + + Kanvas is a collaborative design tool that allows users to + create, edit, and manage visual assets seamlessly within a + shared workspace. - - - - - ); - - const cardMainAction1 = ( - - - - - - Meshery - - - Meshery is an open-source cloud-native management platform designed to help users manage, monitor, and optimize the performance of service meshes and their workloads. - - - - - ); + + + + + `, +]; - const cardMainAction2 = ( - - - - - - Kanvas - - - Kanvas is a collaborative design tool that allows users to create, edit, and manage visual assets seamlessly within a shared workspace. - - - - - - - - ); +const CardCode = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); return ( @@ -168,7 +104,13 @@ const CardCode = () => {

Card

 -

The Card component is a UI element used to encapsulate information or actions related to a single topic, typically in a visually separated, easily digestible format. It often includes elements like images, text, and buttons to present content and enable quick interactions without navigating away from the card.

+

+ The Card component is a UI element used to encapsulate information or + actions related to a single topic, typically in a visually separated, + easily digestible format. It often includes elements like images, + text, and buttons to present content and enable quick interactions + without navigating away from the card. +

{ /> { /> - navigate("/projects/sistent/components/card/code") - } + onClick={() => navigate("/projects/sistent/components/card/code")} title="Code" />

- A card often lets users interact with its entire surface to trigger its main function, whether it’s expanding, navigating to another screen, or activating some other behavior. + A card often lets users interact with its entire surface to trigger + its main function, whether it’s expanding, navigating to another + screen, or activating some other behavior.

Oultined Card Example

- An outlined card is a variation of the standard card component, often used to provide a lighter, more minimalist design. Instead of a solid background or shadow, an outlined card uses a border to define its boundaries, giving it a cleaner and more refined appearance. + An outlined card is a variation of the standard card component, + often used to provide a lighter, more minimalist design. Instead of + a solid background or shadow, an outlined card uses a border to + define its boundaries, giving it a cleaner and more refined + appearance.

- {cardOutlined} + + + + Company Spotlight + + + Layer5 + + + Platform + + + Empowering engineers with cloud-native management + solutions. + + + + + +
@@ -228,24 +198,74 @@ const CardCode = () => {

Main Action Cards

- This type of interactive card is well-suited for use in applications where quick access to more information or actions is important, such as dashboards, or product catalogs. For example, ont the website, users can tap anywhere on the card to open the full product page. + This type of interactive card is well-suited for use in + applications where quick access to more information or actions is + important, such as dashboards, or product catalogs. For example, + ont the website, users can tap anywhere on the card to open the + full product page.

- {cardMainAction1} + + + + + + Meshery + + + Meshery is an open-source cloud-native management + platform designed to help users manage, monitor, and + optimize the performance of service meshes and their + workloads. + + + +

- Cards can also include secondary actions, which should be positioned away from the primary action area to avoid unintentional interaction conflicts. + Cards can also include secondary actions, which should be positioned + away from the primary action area to avoid unintentional interaction + conflicts.

- {cardMainAction2} + + + + + + Kanvas + + + Kanvas is a collaborative design tool that allows users + to create, edit, and manage visual assets seamlessly + within a shared workspace. + + + + + + +
diff --git a/src/sections/Projects/Sistent/components/card/guidance.js b/src/sections/Projects/Sistent/components/card/guidance.js index ad5563214b17..06eb7ece8ec7 100644 --- a/src/sections/Projects/Sistent/components/card/guidance.js +++ b/src/sections/Projects/Sistent/components/card/guidance.js @@ -2,7 +2,15 @@ import React from "react"; import { navigate } from "gatsby"; import { useLocation } from "@reach/router"; import { Row } from "../../../../../reusecore/Layout"; -import { SistentThemeProvider, Card, CardActions, CardContent, CardMedia , Typography, Button } from "@layer5/sistent"; +import { + SistentThemeProvider, + Card, + CardActions, + CardContent, + CardMedia, + Typography, + Button, +} from "@layer5/sistent"; import { SistentLayout } from "../../sistent-layout"; import MesheryLogo from "../../../../../assets/images/meshery/meshery-logo-light-text-side.webp"; import KanvasLogo from "../../../../../assets/images/kanvas/icon-only/kanvas-icon-color.png"; @@ -14,73 +22,6 @@ const CardGuidance = () => { const location = useLocation(); const { isDark } = useStyledDarkMode(); - const cardOutlined = ( - - - - Company Spotlight - - - Layer5 - - Platform - - Empowering engineers with cloud-native management solutions. - - - - - - - ); - - const cardMainAction1 = ( - - - - - - Meshery - - - Meshery is an open-source cloud-native management platform designed to help users manage, monitor, and optimize the performance of service meshes and their workloads. - - - - - ); - - const cardMainAction2 = ( - - - - - - Kanvas - - - Kanvas is a collaborative design tool that allows users to create, edit, and manage visual assets seamlessly within a shared workspace. - - - - - - - - ); - return (
@@ -88,9 +29,11 @@ const CardGuidance = () => {

Card

- The Card component is a UI element used to encapsulate information or actions related to a single topic, - typically in a visually separated, easily digestible format. It often includes elements like images, text, - and buttons to present content and enable quick interactions without navigating away from the card. + The Card component is a UI element used to encapsulate information or + actions related to a single topic, typically in a visually separated, + easily digestible format. It often includes elements like images, + text, and buttons to present content and enable quick interactions + without navigating away from the card.

{ /> { /> - navigate("/projects/sistent/components/card/code") - } + onClick={() => navigate("/projects/sistent/components/card/code")} title="Code" />

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

@@ -140,29 +81,109 @@ const CardGuidance = () => {

Oultined Card

- Outlined cards are ideal for use in layouts that benefit from a subtle, modern look, such as in settings with light backgrounds where visual clarity is important. They’re perfect for showcasing items like product listings, profiles, or dashboard summaries, as the minimal border keeps the focus on the content without adding visual weight.

+ Outlined cards are ideal for use in layouts that benefit from a + subtle, modern look, such as in settings with light backgrounds + where visual clarity is important. They’re perfect for showcasing + items like product listings, profiles, or dashboard summaries, as + the minimal border keeps the focus on the content without adding + visual weight. +

- {cardOutlined} + + + + Company Spotlight + + + Layer5 + + + Platform + + + Empowering engineers with cloud-native management solutions. + + + + + +

Main Action Cards

- This type of interactive card is well-suited for use in applications where quick access to more information or actions is important, such as dashboards, or product catalogs. For example, ont the website, users can tap anywhere on the card to open the full product page. + This type of interactive card is well-suited for use in applications + where quick access to more information or actions is important, such + as dashboards, or product catalogs. For example, ont the website, + users can tap anywhere on the card to open the full product page.

- {cardMainAction1} + + + + + + Meshery + + + Meshery is an open-source cloud-native management platform + designed to help users manage, monitor, and optimize the + performance of service meshes and their workloads. + + + +

- In usage, cards can incorporate secondary actions, like sharing, bookmarking, or viewing additional details, which are typically placed separately from the main action area. This separation prevents accidental taps or clicks, allowing users to clearly distinguish between the primary function of the card (like opening a detailed view) and other supporting actions. + In usage, cards can incorporate secondary actions, like sharing, + bookmarking, or viewing additional details, which are typically + placed separately from the main action area. This separation + prevents accidental taps or clicks, allowing users to clearly + distinguish between the primary function of the card (like opening a + detailed view) and other supporting actions.

- {cardMainAction2} + + + + + + Kanvas + + + Kanvas is a collaborative design tool that allows users to + create, edit, and manage visual assets seamlessly within a + shared workspace. + + + + + + + @@ -170,24 +191,38 @@ const CardGuidance = () => {

Labeling

- For card components, clear labeling helps define the purpose and hierarchy of each card, making it easier for users to understand the content at a glance. Labels, like titles or category tags, can indicate the main topic or action associated with each card, improving navigation and usability within a grid of multiple cards. + For card components, clear labeling helps define the purpose and + hierarchy of each card, making it easier for users to understand the + content at a glance. Labels, like titles or category tags, can + indicate the main topic or action associated with each card, + improving navigation and usability within a grid of multiple cards.

Hierarchy and Visual Cues

- Cards benefit from a clear hierarchy, using typography, spacing, and color to guide users through the content. For instance, a card title in bold or larger text immediately draws attention, while secondary information is displayed with subdued colors. + Cards benefit from a clear hierarchy, using typography, spacing, and + color to guide users through the content. For instance, a card title + in bold or larger text immediately draws attention, while secondary + information is displayed with subdued colors.

Interactivity and Feedback

- Cards often use hover effects, shadow adjustments, or subtle animations to indicate interactivity. This feedback helps users identify clickable areas or interactive elements within the card, providing a more engaging experience. + Cards often use hover effects, shadow adjustments, or subtle + animations to indicate interactivity. This feedback helps users + identify clickable areas or interactive elements within the card, + providing a more engaging experience.

Consistency in Style and Layout

- Cards should maintain a consistent style throughout an interface to ensure a unified look and feel. Consistency in aspects like font sizes, padding, border radii, and color schemes helps cards blend naturally into the overall UI design, improving readability and making interactions feel intuitive across different screens or sections. + Cards should maintain a consistent style throughout an interface to + ensure a unified look and feel. Consistency in aspects like font + sizes, padding, border radii, and color schemes helps cards blend + naturally into the overall UI design, improving readability and + making interactions feel intuitive across different screens or + sections.

-
diff --git a/src/sections/Projects/Sistent/components/card/index.js b/src/sections/Projects/Sistent/components/card/index.js index 67df8a1bb1d9..3827a05e2f62 100644 --- a/src/sections/Projects/Sistent/components/card/index.js +++ b/src/sections/Projects/Sistent/components/card/index.js @@ -4,7 +4,15 @@ import { useLocation } from "@reach/router"; import MesheryLogo from "../../../../../assets/images/meshery/meshery-logo-light-text-side.webp"; import KanvasLogo from "../../../../../assets/images/kanvas/icon-only/kanvas-icon-color.png"; -import { SistentThemeProvider, Card, CardActions, CardContent, CardMedia , Typography, Button } from "@layer5/sistent"; +import { + SistentThemeProvider, + Card, + CardActions, + CardContent, + CardMedia, + Typography, + Button, +} from "@layer5/sistent"; import TabButton from "../../../../../reusecore/Button"; import { SistentLayout } from "../../sistent-layout"; import { Row } from "../../../../../reusecore/Layout"; @@ -14,80 +22,18 @@ const SistentCard = () => { const location = useLocation(); const { isDark } = useStyledDarkMode(); - const cardOutlined = ( - - - - Company Spotlight - - - Layer5 - - Platform - - Empowering engineers with cloud-native management solutions. - - - - - - - ); - - const cardMainAction1 = ( - - - - - - Meshery - - - Meshery is an open-source cloud-native management platform designed to help users manage, monitor, and optimize the performance of service meshes and their workloads. - - - - - ); - - const cardMainAction2 = ( - - - - - - Kanvas - - - Kanvas is a collaborative design tool that allows users to create, edit, and manage visual assets seamlessly within a shared workspace. - - - - - - - - ); return (

Card

 -

The Card component is a UI element used to encapsulate information or actions related to a single topic, typically in a visually separated, easily digestible format. It often includes elements like images, text, and buttons to present content and enable quick interactions without navigating away from the card. - +

+ The Card component is a UI element used to encapsulate information or + actions related to a single topic, typically in a visually separated, + easily digestible format. It often includes elements like images, + text, and buttons to present content and enable quick interactions + without navigating away from the card.

{ /> { /> - navigate("/projects/sistent/components/card/code") - } + onClick={() => navigate("/projects/sistent/components/card/code")} title="Code" />

- The card component is a versatile UI element commonly used in web and mobile applications. It's designed to showcase content in a clean, concise, and visually organized manner. Typically, a card groups related information, making it easy for users to digest and interact with. It often includes an image or icon, title, description, and actionable buttons or links, all contained within a defined boundary that makes it visually distinct. + The card component is a versatile UI element commonly used in web + and mobile applications. It's designed to showcase content in a + clean, concise, and visually organized manner. Typically, a card + groups related information, making it easy for users to digest and + interact with. It often includes an image or icon, title, + description, and actionable buttons or links, all contained within a + defined boundary that makes it visually distinct.

Types of Cards

 -

-

+

Outlined

- An outlined card is a variation of the standard card component, often used to provide a lighter, more minimalist design. Instead of a solid background or shadow, an outlined card uses a border to define its boundaries, giving it a cleaner and more refined appearance. + An outlined card is a variation of the standard card component, + often used to provide a lighter, more minimalist design. Instead of + a solid background or shadow, an outlined card uses a border to + define its boundaries, giving it a cleaner and more refined + appearance.

- {cardOutlined} + + + + Company Spotlight + + + Layer5 + + + Platform + + + Empowering engineers with cloud-native management solutions. + + + + + +

Main Action

-

1. A card often lets users interact with its entire surface to trigger its main function, whether it’s expanding, navigating to another screen, or activating some other behavior.

+

+ 1. A card often lets users interact with its entire surface to + trigger its main function, whether it’s expanding, navigating to + another screen, or activating some other behavior. +

- {cardMainAction1} + + + + + + Meshery + + + Meshery is an open-source cloud-native management platform + designed to help users manage, monitor, and optimize the + performance of service meshes and their workloads. + + + +

- 2. Cards can also include secondary actions, which should be positioned away from the primary action area to avoid unintentional interaction conflicts. + 2. Cards can also include secondary actions, which should be + positioned away from the primary action area to avoid unintentional + interaction conflicts.

- {cardMainAction2} + + + + + + Kanvas + + + Kanvas is a collaborative design tool that allows users to + create, edit, and manage visual assets seamlessly within a + shared workspace. + + + + + + +

- NOTE: Cards may offer multiple actions, UI elements, and an overflow menu, but it’s important to exercise restraint, as they are primarily designed to serve as entry points to deeper and more comprehensive content. + NOTE: Cards may offer multiple actions, UI elements, and an overflow + menu, but it’s important to exercise restraint, as they are + primarily designed to serve as entry points to deeper and more + comprehensive content.