From cef7f5aadfd066007a3647f6ea892d4c5b426f18 Mon Sep 17 00:00:00 2001 From: Anand-Theertha Date: Thu, 16 Jan 2025 05:28:47 +0000 Subject: [PATCH] New Sistent Card Component Signed-off-by: Anand-Theertha --- .../Projects/Sistent/components/card/code.js | 276 ++++++++++++++++++ .../Sistent/components/card/guidance.js | 230 +++++++++++++++ .../Projects/Sistent/components/card/index.js | 198 +++++++++++++ .../Projects/Sistent/components/content.js | 34 ++- 4 files changed, 725 insertions(+), 13 deletions(-) create mode 100644 src/sections/Projects/Sistent/components/card/code.js create mode 100644 src/sections/Projects/Sistent/components/card/guidance.js create mode 100644 src/sections/Projects/Sistent/components/card/index.js diff --git a/src/sections/Projects/Sistent/components/card/code.js b/src/sections/Projects/Sistent/components/card/code.js new file mode 100644 index 000000000000..10c03ead1c04 --- /dev/null +++ b/src/sections/Projects/Sistent/components/card/code.js @@ -0,0 +1,276 @@ +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 { CodeBlock } from "../button/code-block"; +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"; +import TabButton from "../../../../../reusecore/Button"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +const codes = [ + ` + + + Company Spotlight + + + Layer5 + + + Platform + + + Empowering engineers with cloud-native management solutions. + + + + + + `, + + ` + + + + + 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. + + + + `, + + ` + + + + + 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 ( + +
+ +

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")} + title="Overview" + /> + + navigate("/projects/sistent/components/card/guidance") + } + title="Guidance" + /> + 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. +

+ +

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. +

+
+
+ + + + + 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. +

+
+
+ + + + + + + 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. +

+
+
+ + + + + + + Kanvas + + + Kanvas is a collaborative design tool that allows users + to create, edit, and manage visual assets seamlessly + within a shared workspace. + + + + + + + + +
+ +
+
+
+ + ); +}; +export default CardCode; diff --git a/src/sections/Projects/Sistent/components/card/guidance.js b/src/sections/Projects/Sistent/components/card/guidance.js new file mode 100644 index 000000000000..41d8657490a9 --- /dev/null +++ b/src/sections/Projects/Sistent/components/card/guidance.js @@ -0,0 +1,230 @@ +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 { 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"; + +import TabButton from "../../../../../reusecore/Button"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +const CardGuidance = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + 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. +

+
+ navigate("/projects/sistent/components/card")} + title="Overview" + /> + + navigate("/projects/sistent/components/card/guidance") + } + title="Guidance" + /> + 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. +

+ + +

Function

+ +

The Card Component serves various functions:

+ +

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. +

+ + + + + + 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. +

+ + + + + + + + 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. +

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

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. +

+ +

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. +

+ +

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. +

+ +

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. +

+
+
+ + ); +}; +export default CardGuidance; diff --git a/src/sections/Projects/Sistent/components/card/index.js b/src/sections/Projects/Sistent/components/card/index.js new file mode 100644 index 000000000000..b3f6daccf718 --- /dev/null +++ b/src/sections/Projects/Sistent/components/card/index.js @@ -0,0 +1,198 @@ +import React from "react"; +import { navigate } from "gatsby"; +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 TabButton from "../../../../../reusecore/Button"; +import { SistentLayout } from "../../sistent-layout"; +import { Row } from "../../../../../reusecore/Layout"; + +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +const SistentCard = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + 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. +

+
+ navigate("/projects/sistent/components/card")} + title="Overview" + /> + + navigate("/projects/sistent/components/card/guidance") + } + title="Guidance" + /> + 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. +

+ +

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. +

+ + + + + + 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. +

+ + + + + + + + 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. +

+ + + + + + + + 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. +

+
+
+ + ); +}; +export default SistentCard; diff --git a/src/sections/Projects/Sistent/components/content.js b/src/sections/Projects/Sistent/components/content.js index ca8d04d14ab4..abdb1821a388 100644 --- a/src/sections/Projects/Sistent/components/content.js +++ b/src/sections/Projects/Sistent/components/content.js @@ -3,7 +3,7 @@ const componentsData = [ id: 1, name: "Button", description: - "A button is an interactive element that triggers a specific action and also lets users know what will happen next.", + "A button is an interactive element that triggers a specific action and also lets users know what will happen next.", url: "/projects/sistent/components/button", src: "/button", }, @@ -11,7 +11,7 @@ const componentsData = [ id: 2, name: "Text Input", description: - "A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.", + "A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.", url: "/projects/sistent/components/text-input", src: "/text-input", }, @@ -19,7 +19,7 @@ const componentsData = [ id: 3, name: "Modal", description: - "A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.", + "A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.", url: "/projects/sistent/components/modal", src: "/modal", }, @@ -27,7 +27,7 @@ const componentsData = [ id: 4, name: "Paper", description: - "The Paper component offers an elevated surface with shadow effects, following Material Design’s elevation system.", + "The Paper component offers an elevated surface with shadow effects, following Material Design’s elevation system.", url: "/projects/sistent/components/paper", src: "/paper", }, @@ -35,7 +35,7 @@ const componentsData = [ id: 5, name: "Popper", description: - "A popper is a tooltip that appears when a user interacts with an element.", + "A popper is a tooltip that appears when a user interacts with an element.", url: "/projects/sistent/components/popper", src: "/popper", }, @@ -43,7 +43,7 @@ const componentsData = [ id: 6, name: "Text Field", description: - "The TextField component is a versatile input field used to capture user input in forms and user interfaces.", + "The TextField component is a versatile input field used to capture user input in forms and user interfaces.", url: "/projects/sistent/components/text-field", src: "/text-field", }, @@ -51,7 +51,7 @@ const componentsData = [ id: 7, name: "Link", description: - "Links are essential and integral components of an interface. They are primarily used for navigation, guiding users to the next step in a journey or redirecting them to relevant sections or pages.", + "Links are essential and integral components of an interface. They are primarily used for navigation, guiding users to the next step in a journey or redirecting them to relevant sections or pages.", url: "/projects/sistent/components/link", src: "/link", }, @@ -59,7 +59,7 @@ const componentsData = [ id: 8, name: "Container", description: - "Containers align and center content, providing responsive layout options for different screen sizes.", + "Containers align and center content, providing responsive layout options for different screen sizes.", url: "/projects/sistent/components/container", src: "/container", }, @@ -67,7 +67,7 @@ const componentsData = [ id: 9, name: "ButtonGroup", description: - "ButtonGroup is a component that groups multiple buttons together.", + "ButtonGroup is a component that groups multiple buttons together.", url: "/projects/sistent/components/button-group", src: "/button-group", }, @@ -75,7 +75,7 @@ const componentsData = [ id: 10, name: "Box", description: - "Box is used as a flexible container for layout and styling, allowing quick customization and responsive design adjustments.", + "Box is used as a flexible container for layout and styling, allowing quick customization and responsive design adjustments.", url: "/projects/sistent/components/box", src: "/box", }, @@ -83,7 +83,7 @@ const componentsData = [ id: 11, name: "Tooltip", description: - "The Tooltip component is a small pop-up box that appears when a user hovers over an element.", + "The Tooltip component is a small pop-up box that appears when a user hovers over an element.", url: "/projects/sistent/components/tooltip", src: "/tooltip", }, @@ -91,7 +91,7 @@ const componentsData = [ id: 12, name: "Backdrop", description: - "Backdrop component overlays a dimmed screen to focus attention on foreground content.", + "Backdrop component overlays a dimmed screen to focus attention on foreground content.", url: "/projects/sistent/components/backdrop", src: "/backdrop", }, @@ -99,10 +99,18 @@ const componentsData = [ id: 13, name: "ToggleButton", description: - "ToggleButton allows users to switch between two or more states, commonly used in forms or settings for quick toggles.", + "ToggleButton allows users to switch between two or more states, commonly used in forms or settings for quick toggles.", url: "/projects/sistent/components/toggle-button", src: "/toggle-button", }, + { + id: 14, + name: "Card", + description: + "The Card component is a UI element used to encapsulate information or actions related to a single topic, typically in a visually separated.", + url: "/projects/sistent/components/card", + src: "/card", + }, ]; module.exports = { componentsData };