From 1473ecdecd51041d092644b3637a7ba8742e5280 Mon Sep 17 00:00:00 2001 From: MUzairS15 Date: Sun, 20 Oct 2024 00:25:09 +0000 Subject: [PATCH 01/27] [Docs] Generated documentation for Integration Signed-off-by: l5io Signed-off-by: NishantSinghhhhh --- .../icons/color/persistent-volume-claim-color.svg | 2 +- .../icons/white/persistent-volume-claim-white.svg | 2 +- .../persistent-volume/icons/color/persistent-volume-color.svg | 4 ++-- .../persistent-volume/icons/white/persistent-volume-white.svg | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/collections/integrations/kubernetes/icons/components/persistent-volume-claim/icons/color/persistent-volume-claim-color.svg b/src/collections/integrations/kubernetes/icons/components/persistent-volume-claim/icons/color/persistent-volume-claim-color.svg index 2bae347ed22f..557585d126fb 100644 --- a/src/collections/integrations/kubernetes/icons/components/persistent-volume-claim/icons/color/persistent-volume-claim-color.svg +++ b/src/collections/integrations/kubernetes/icons/components/persistent-volume-claim/icons/color/persistent-volume-claim-color.svg @@ -1,3 +1,3 @@ - + diff --git a/src/collections/integrations/kubernetes/icons/components/persistent-volume-claim/icons/white/persistent-volume-claim-white.svg b/src/collections/integrations/kubernetes/icons/components/persistent-volume-claim/icons/white/persistent-volume-claim-white.svg index 7b881f68e6a2..17d143c09de3 100644 --- a/src/collections/integrations/kubernetes/icons/components/persistent-volume-claim/icons/white/persistent-volume-claim-white.svg +++ b/src/collections/integrations/kubernetes/icons/components/persistent-volume-claim/icons/white/persistent-volume-claim-white.svg @@ -1,3 +1,3 @@ - + diff --git a/src/collections/integrations/kubernetes/icons/components/persistent-volume/icons/color/persistent-volume-color.svg b/src/collections/integrations/kubernetes/icons/components/persistent-volume/icons/color/persistent-volume-color.svg index 557585d126fb..78f2447254e4 100644 --- a/src/collections/integrations/kubernetes/icons/components/persistent-volume/icons/color/persistent-volume-color.svg +++ b/src/collections/integrations/kubernetes/icons/components/persistent-volume/icons/color/persistent-volume-color.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/collections/integrations/kubernetes/icons/components/persistent-volume/icons/white/persistent-volume-white.svg b/src/collections/integrations/kubernetes/icons/components/persistent-volume/icons/white/persistent-volume-white.svg index 17d143c09de3..2ed4db357583 100644 --- a/src/collections/integrations/kubernetes/icons/components/persistent-volume/icons/white/persistent-volume-white.svg +++ b/src/collections/integrations/kubernetes/icons/components/persistent-volume/icons/white/persistent-volume-white.svg @@ -1,3 +1,3 @@ - - + + From 576724216f5dd48e2b972239813e4cb9c39e2570 Mon Sep 17 00:00:00 2001 From: NishantSinghhhhh Date: Mon, 21 Oct 2024 02:36:07 +0530 Subject: [PATCH 02/27] added documentation of Link Component Signed-off-by: NishantSinghhhhh --- .../projects/sistent/components/link/code.js | 8 + .../sistent/components/link/guidance.js | 8 + .../projects/sistent/components/link/index.js | 8 + .../Projects/Sistent/components/index.js | 7 + .../Sistent/components/link/code-block.js | 20 ++ .../Projects/Sistent/components/link/code.js | 316 ++++++++++++++++++ .../Sistent/components/link/guidance.js | 177 ++++++++++ .../Projects/Sistent/components/link/index.js | 189 +++++++++++ 8 files changed, 733 insertions(+) create mode 100644 src/pages/projects/sistent/components/link/code.js create mode 100644 src/pages/projects/sistent/components/link/guidance.js create mode 100644 src/pages/projects/sistent/components/link/index.js create mode 100644 src/sections/Projects/Sistent/components/link/code-block.js create mode 100644 src/sections/Projects/Sistent/components/link/code.js create mode 100644 src/sections/Projects/Sistent/components/link/guidance.js create mode 100644 src/sections/Projects/Sistent/components/link/index.js diff --git a/src/pages/projects/sistent/components/link/code.js b/src/pages/projects/sistent/components/link/code.js new file mode 100644 index 000000000000..06eae83ec9a3 --- /dev/null +++ b/src/pages/projects/sistent/components/link/code.js @@ -0,0 +1,8 @@ +import React from "react"; +import { LinkCode } from "../../../../../sections/Projects/Sistent/components/link/code"; + +const LinkCodePage = () => { + return ; +}; + +export default LinkCodePage; \ No newline at end of file diff --git a/src/pages/projects/sistent/components/link/guidance.js b/src/pages/projects/sistent/components/link/guidance.js new file mode 100644 index 000000000000..b9efe9988519 --- /dev/null +++ b/src/pages/projects/sistent/components/link/guidance.js @@ -0,0 +1,8 @@ +import React from "react"; +import { LinkGuidancePage } from "../../../../../sections/Projects/Sistent/components/link/guidance"; + +const LinkGuidance = () => { + return ; +}; + +export default LinkGuidance; \ No newline at end of file diff --git a/src/pages/projects/sistent/components/link/index.js b/src/pages/projects/sistent/components/link/index.js new file mode 100644 index 000000000000..67ea06f64fcf --- /dev/null +++ b/src/pages/projects/sistent/components/link/index.js @@ -0,0 +1,8 @@ +import React from "react"; +import SistentLink from "../../../../../sections/Projects/Sistent/components/link"; + +const SistentButtonPage = () => { + return ; +}; + +export default SistentButtonPage; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js index 8bb294655b0f..d673f3f75db7 100644 --- a/src/sections/Projects/Sistent/components/index.js +++ b/src/sections/Projects/Sistent/components/index.js @@ -30,6 +30,13 @@ const componentsData = [ "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", }, + { + id: 4, + name: "Link", + description: + "A link component is a navigational element that directs users to another page or section within an application", + url: "/projects/sistent/components/link", + }, ]; const SistentComponents = () => { diff --git a/src/sections/Projects/Sistent/components/link/code-block.js b/src/sections/Projects/Sistent/components/link/code-block.js new file mode 100644 index 000000000000..34bf21d9b570 --- /dev/null +++ b/src/sections/Projects/Sistent/components/link/code-block.js @@ -0,0 +1,20 @@ +import React, { useState } from "react"; +import Code from "../../../../../components/CodeBlock"; + +export const CodeBlock = ({ name, code }) => { + const [showCode, setShowCode] = useState(false); + const onChange = () => { + setShowCode((prev) => !prev); + }; + return ( +
+ + + {showCode && ( + + )} +
+ ); +}; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/link/code.js b/src/sections/Projects/Sistent/components/link/code.js new file mode 100644 index 000000000000..8cab957f4a98 --- /dev/null +++ b/src/sections/Projects/Sistent/components/link/code.js @@ -0,0 +1,316 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; + +import { SistentThemeProvider, Link } 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"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +const codes = [ + ` + + Simple Link + + `, + + ` + + Customized Link 1 + + `, + + ` + + Underlined Link + + +`, + + ` + + Customized Link + + `, + + ` + + Download File + + `, + + ` + + Visit Secure Link + + ` +]; + +export const LinkCode = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
+ +

Link

+ +

+

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

+ Links are fundamental components in web navigation, allowing users to move between different pages or resources. Their design and implementation are crucial for creating a seamless browsing experience. +

+ +

Simple Link

+ +

The link can be presented in a simple format, primarily as underlined text that serves as a gateway to navigate users to other pages or resources, without any prominent styling or buttons attached to it.

+
+
+ + + Simple Link + + +
+ +
+ +

Customized Links

+ +

+ Customized Links enhance user experience by adapting their design and behavior to match the app’s theme. They can include personalized styles, hover effects, or icons, ensuring both visual consistency and improved usability across the website. +

+ +

Colored Link

+

+ Colored Links can help draw attention to key areas of a page. They are styled with custom colors to stand out and indicate their importance, enhancing navigation and usability. +

+
+
+ + + Colored Link + + +
+ +
+ +

Underlined Link

+

+ Underlined Links, often referred to as ghost buttons, are styled primarily with text without any fills or borders. They utilize specific text styling and color to signify different states, making them easily identifiable and enhancing user navigation. +

+
+
+ + + Underlined Link + + +
+ +
+ +

Customized Link

+

+ Customized Links allow for distinct text styles and presentations that can enhance the user experience. By leveraging different styling properties, these links can be tailored to fit the design aesthetics of your application while maintaining functionality. +

+
+
+ + + Customized Link + + +
+ +
+ +

Download Link

+

+ Download Links are essential when you want to provide users with downloadable content such as files, PDFs, or documents. These links can be styled to clearly indicate a download action to the user. +

+
+
+ + + Download File + + +
+ +
+ + +

Security Considerations

+ +

+ When utilizing links we should use them with the target="_blank" attribute, it's essential to implement rel="noopener" or rel="noreferrer" to enhance security and user privacy +

+
+
+ + + Visit Secure Link + + +
+ +
+
+
+ + ); +}; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/link/guidance.js b/src/sections/Projects/Sistent/components/link/guidance.js new file mode 100644 index 000000000000..5f29b12970d8 --- /dev/null +++ b/src/sections/Projects/Sistent/components/link/guidance.js @@ -0,0 +1,177 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import { Row } from "../../../../../reusecore/Layout"; +import { Button, SistentThemeProvider,Link } from "@layer5/sistent"; +import { SistentLayout } from "../../sistent-layout"; + +import TabButton from "../../../../../reusecore/Button"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +export const LinkGuidancePage = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
+ +

Link

+ +

+ A link component is a navigational element that directs users to another page or section within an application. +

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

+ Links are fundamental components in web navigation, allowing users to move between different pages or resources. Their design and implementation are crucial for creating a seamless browsing experience. +

+ +

Function

+ +

+ Links too have a lot many functions as: +

+

Navigation Links

+

+ These links help users navigate through a website, directing them to important sections or related content. They should be easily accessible and clearly labeled to enhance usability. +

+ + + + Navigate to Layer5 + + + +

Call to Action (CTA) Links

+

+ CTA links encourage users to take specific actions, such as signing up for a newsletter or downloading a resource. They should stand out visually to attract user attention and drive engagement. +

+ + + + Get Started + + + +

External Links

+

+ These links direct users to external websites. It’s important to provide clear indicators (like icons or different styles) that these links lead to external content, which helps users manage their navigation expectations. +

+ + + + Visit External Resource + + + +

Download Links

+

+ These links allow users to download files, documents, or resources. It’s essential to provide information about the file type and size to prepare users for what they’re downloading. +

+ + + + + + +

Labeling

+ +

+ Link labels are vital for communicating the action associated with the link. Labels should be concise, informative, and use action-oriented language (e.g., "Download Report," "Learn More") to guide users effectively. +

+

Case Style

+

+ Consistency in the case style of link text improves readability and enhances the overall aesthetic of the website. Using a uniform style, such as sentence case or title case, contributes to a more professional appearance. +

+

Font Weight

+

+ The weight of the font in link text can signify importance and attract user attention. A bolder font can indicate a primary action, while a lighter font may denote secondary options. Legibility is essential for ensuring that links are easy to read. +

+

Text Decoration

+

+ Links typically use underlines to distinguish them from regular text. However, it’s important to maintain the underline for accessibility and usability, as users often associate underlined text with clickable links. Consider hover effects to provide visual feedback. +

+
+
+ + ); +}; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/link/index.js b/src/sections/Projects/Sistent/components/link/index.js new file mode 100644 index 000000000000..14806f22e397 --- /dev/null +++ b/src/sections/Projects/Sistent/components/link/index.js @@ -0,0 +1,189 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; + +import { SistentThemeProvider, Link } 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 SistentLink = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
+ +

link

+ +

+ A link component is a navigational element that directs users to another page or section within an application. + +

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

+ 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 can be paired with other elements to create cohesive designs, enhancing the digital experience by providing smooth transitions and interaction cues. +

+ +

Types of Links

+ +

+ Links in an interface serve as vital elements for navigation and interaction. Multiple types of links are available to establish hierarchy, provide visual prominence, and enhance flexibility, guiding users towards their goals efficiently. With distinct styling and behaviors, links can help streamline user flows and create a cohesive user experience. +

+

Simple Links

+

+ Basic anchor links with customizable colors and typography styles that inherit properties from the Typography component. This allows flexibility in styling with options like various text sizes or variants. +

+ + + + Simple Link + + + + +

Customized Links

+

+ The links can be customized in the below mentioned way +

+

1. Color

+

+ You can customize link colors with predefined values such as primary, secondary, error, success, warning, info, or inherit existing text colors like Blue, Red. +

+ + + + Customized Link 1 + + + + +

2. Underlining

+

+ Also known as ghost buttons, text buttons are mostly just what the + name implies; they are buttons without fills or borders which might + just have a specific text styling and color to denote different + states for easier identification. +

+ + + + Customized Link 2 + + + + + +

3. Variants

+

+ Links can have various text styles using the different styling property +

+ + + + Customized Link 3 + + + + + +

Security

+ +

+ When using target="_blank" with links, it's crucial to include + rel="noopener" or rel="noreferrer" for security reasons: +

+
    +
  • Prevent Access: rel="noopener" prevents the new page from accessing the + window.opener property, securing your original page from potential malicious redirects.
    • +
  • Avoid Referer Leakage: rel="noreferrer" not only blocks the new page's + access to your original page but also stops the Referer header from being sent, protecting user privacy.
    • +
  • Security Risk Mitigation: Using these attributes reduces the risk of phishing attacks + and ensures that your site maintains control over its navigation and data.
    • +
+

+ By following these practices, you can enhance the security of your web application and protect your users. +

+ + + +

Optimized Rendering of Links Using

+ + +

+ useMemo is a React hook that helps optimize the rendering of link components by memorizing computed values, which prevents unnecessary re-renders. +

+
+
+ + ); +}; + +export default SistentLink; \ No newline at end of file From 8d9b424af0e11d83d2495de11dfd365bdd7e4712 Mon Sep 17 00:00:00 2001 From: NishantSinghhhhh Date: Mon, 21 Oct 2024 12:10:51 +0530 Subject: [PATCH 03/27] added documentation of Link Component Signed-off-by: NishantSinghhhhh --- src/pages/projects/sistent/components/link/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/projects/sistent/components/link/index.js b/src/pages/projects/sistent/components/link/index.js index 67ea06f64fcf..2e2f14e7f001 100644 --- a/src/pages/projects/sistent/components/link/index.js +++ b/src/pages/projects/sistent/components/link/index.js @@ -1,5 +1,5 @@ import React from "react"; -import SistentLink from "../../../../../sections/Projects/Sistent/components/link"; +import SistentLink from "../../../../../sections/Projects/Sistent/components/link/index"; const SistentButtonPage = () => { return ; From d18bea5d44f327e3ec308a797cb5f7ccf8f627f0 Mon Sep 17 00:00:00 2001 From: MUzairS15 Date: Mon, 21 Oct 2024 00:24:09 +0000 Subject: [PATCH 04/27] [Docs] Generated documentation for Integration Signed-off-by: l5io Signed-off-by: NishantSinghhhhh --- .../icons/color/open-stack-server-color.svg | 7 +++++++ .../icons/white/open-stack-server-white.svg | 6 ++++++ .../integrations/cluster-api-provider-openstack/index.mdx | 6 ++++++ 3 files changed, 19 insertions(+) create mode 100644 src/collections/integrations/cluster-api-provider-openstack/icons/components/open-stack-server/icons/color/open-stack-server-color.svg create mode 100644 src/collections/integrations/cluster-api-provider-openstack/icons/components/open-stack-server/icons/white/open-stack-server-white.svg diff --git a/src/collections/integrations/cluster-api-provider-openstack/icons/components/open-stack-server/icons/color/open-stack-server-color.svg b/src/collections/integrations/cluster-api-provider-openstack/icons/components/open-stack-server/icons/color/open-stack-server-color.svg new file mode 100644 index 000000000000..67a1c4a07f6d --- /dev/null +++ b/src/collections/integrations/cluster-api-provider-openstack/icons/components/open-stack-server/icons/color/open-stack-server-color.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/src/collections/integrations/cluster-api-provider-openstack/icons/components/open-stack-server/icons/white/open-stack-server-white.svg b/src/collections/integrations/cluster-api-provider-openstack/icons/components/open-stack-server/icons/white/open-stack-server-white.svg new file mode 100644 index 000000000000..4350d73fa752 --- /dev/null +++ b/src/collections/integrations/cluster-api-provider-openstack/icons/components/open-stack-server/icons/white/open-stack-server-white.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/collections/integrations/cluster-api-provider-openstack/index.mdx b/src/collections/integrations/cluster-api-provider-openstack/index.mdx index 7fdb04f6554a..e7cd337b6460 100644 --- a/src/collections/integrations/cluster-api-provider-openstack/index.mdx +++ b/src/collections/integrations/cluster-api-provider-openstack/index.mdx @@ -44,6 +44,12 @@ components: [ "colorIcon": "icons/components/open-stack-machine-template/icons/color/open-stack-machine-template-color.svg", "whiteIcon": "icons/components/open-stack-machine-template/icons/white/open-stack-machine-template-white.svg", "description": "", +}, +{ +"name": "open-stack-server", +"colorIcon": "icons/components/open-stack-server/icons/color/open-stack-server-color.svg", +"whiteIcon": "icons/components/open-stack-server/icons/white/open-stack-server-white.svg", +"description": "", }] featureList: [ "Automates Kubernetes cluster provisioning", From 21554a3bd5d4c8a4843693ece242158961502660 Mon Sep 17 00:00:00 2001 From: Vidit Kushwaha <120644015+Vidit-Kushwaha@users.noreply.github.com> Date: Sun, 20 Oct 2024 13:02:13 +0000 Subject: [PATCH 05/27] Add Paper component to the sistent components page Signed-off-by: Vidit Kushwaha <120644015+Vidit-Kushwaha@users.noreply.github.com> Signed-off-by: NishantSinghhhhh --- src/components/SistentNavigation/content.js | 15 ++ .../projects/sistent/components/paper/code.js | 8 + .../sistent/components/paper/guidance.js | 8 + .../sistent/components/paper/index.js | 9 + .../Projects/Sistent/components/index.js | 9 +- .../Projects/Sistent/components/paper/code.js | 203 ++++++++++++++++++ .../Sistent/components/paper/guidance.js | 121 +++++++++++ .../Sistent/components/paper/index.js | 114 ++++++++++ .../Sistent/components/popper/guidance.js | 172 +++++++++++++++ 9 files changed, 658 insertions(+), 1 deletion(-) create mode 100644 src/pages/projects/sistent/components/paper/code.js create mode 100644 src/pages/projects/sistent/components/paper/guidance.js create mode 100644 src/pages/projects/sistent/components/paper/index.js create mode 100644 src/sections/Projects/Sistent/components/paper/code.js create mode 100644 src/sections/Projects/Sistent/components/paper/guidance.js create mode 100644 src/sections/Projects/Sistent/components/paper/index.js create mode 100644 src/sections/Projects/Sistent/components/popper/guidance.js diff --git a/src/components/SistentNavigation/content.js b/src/components/SistentNavigation/content.js index 51f8f57618ae..5ca0281ae851 100644 --- a/src/components/SistentNavigation/content.js +++ b/src/components/SistentNavigation/content.js @@ -43,4 +43,19 @@ export const content = [ link: "/projects/sistent/components/text-input/code", text: "Text Input", }, + { + id: 15, + link: "/projects/sistent/components/paper", + text: "Paper", + }, + { + id: 16, + link: "/projects/sistent/components/paper/guidance", + text: "Paper", + }, + { + id: 17, + link: "/projects/sistent/components/paper/code", + text: "Paper", + }, ]; diff --git a/src/pages/projects/sistent/components/paper/code.js b/src/pages/projects/sistent/components/paper/code.js new file mode 100644 index 000000000000..aebd216c36dc --- /dev/null +++ b/src/pages/projects/sistent/components/paper/code.js @@ -0,0 +1,8 @@ +import React from "react"; +import PaperCode from "../../../../../sections/Projects/Sistent/components/paper/code"; + +const PaperCodePage = () => { + return ; +}; + +export default PaperCodePage; \ No newline at end of file diff --git a/src/pages/projects/sistent/components/paper/guidance.js b/src/pages/projects/sistent/components/paper/guidance.js new file mode 100644 index 000000000000..a0ae573e7c1d --- /dev/null +++ b/src/pages/projects/sistent/components/paper/guidance.js @@ -0,0 +1,8 @@ +import React from "react"; +import PaperGuidance from "../../../../../sections/Projects/Sistent/components/paper/guidance"; + +const PaperGuidancePage = () => { + return ; +}; + +export default PaperGuidancePage; diff --git a/src/pages/projects/sistent/components/paper/index.js b/src/pages/projects/sistent/components/paper/index.js new file mode 100644 index 000000000000..cac37c7bd2c0 --- /dev/null +++ b/src/pages/projects/sistent/components/paper/index.js @@ -0,0 +1,9 @@ +import React from "react"; +import SistentPaper from "../../../../../sections/Projects/Sistent/components/paper"; + + +const SistentPaperPage = () => { + return ; +}; + +export default SistentPaperPage; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js index d673f3f75db7..3b01fbe129bd 100644 --- a/src/sections/Projects/Sistent/components/index.js +++ b/src/sections/Projects/Sistent/components/index.js @@ -32,9 +32,16 @@ const componentsData = [ }, { id: 4, + name: "Paper", + description: + "The Paper component offers an elevated surface with shadow effects, following Material Design’s elevation system.", + url: "/projects/sistent/components/paper", + }, + { + id: 5, name: "Link", description: - "A link component is a navigational element that directs users to another page or section within an application", + "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", }, ]; diff --git a/src/sections/Projects/Sistent/components/paper/code.js b/src/sections/Projects/Sistent/components/paper/code.js new file mode 100644 index 000000000000..2d8c254de522 --- /dev/null +++ b/src/sections/Projects/Sistent/components/paper/code.js @@ -0,0 +1,203 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import TabButton from "../../../../../reusecore/Button"; +import { SistentLayout } from "../../sistent-layout"; +import { SistentThemeProvider, Paper } from "@layer5/sistent"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; +import { CodeBlock } from "../button/code-block"; + +const codes = [ + ` + + Default Paper with Elevation 1 + + `, + ` + + Elevation 0 (No shadow) + + + Elevation 3 + + + Elevation 8 + + `, + ` + + Elevation Variant (Default) + + + Outlined Variant (No shadow) + + `, + ` + + Rounded Corners (Default) + + + Square Corners + + `, +]; +const PaperCode = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
+ +

Paper

+ +

+ The Paper component provides an elevated surface for displaying + content. It mimics the behavior of real-world surfaces with shadow + effects, supporting Material Design's elevation system. +

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

Basic Example

+ +

+ Here’s a simple example of a Paper component with default elevation. + This creates a surface with a subtle shadow. +

+
+
+ + + Default Paper with Elevation 1 + + +
+ +
+ + +

Elevation Example

+ +

+ The elevation prop controls the shadow depth. Use + values from 0 to 24 to create varying levels of elevation: +

+
+
+ + + Elevation 0 (No shadow) + + + Elevation 3 + + + Elevation 8 + + +
+ +
+ +

Variant Example

+ +

+ The Paper component supports two variants: elevation{" "} + (default) and outlined. The outlined variant removes + shadows and adds a border instead: +

+
+
+ + + Elevation Variant (Default) + + + Outlined Variant (No shadow) + + +
+ +
+ + +

Square and Rounded Corners

+ +

+ By default, the Paper component has rounded corners. You can make it + square by setting the square prop to true. +

+
+
+ + + Rounded Corners (Default) + + + Square Corners + + +
+ +
+
+
+ + ); +}; + +export default PaperCode; diff --git a/src/sections/Projects/Sistent/components/paper/guidance.js b/src/sections/Projects/Sistent/components/paper/guidance.js new file mode 100644 index 000000000000..6c2dd5a412fb --- /dev/null +++ b/src/sections/Projects/Sistent/components/paper/guidance.js @@ -0,0 +1,121 @@ +import React from "react"; +import { SistentLayout } from "../../sistent-layout"; +import TabButton from "../../../../../reusecore/Button"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; + +const PaperGuidance = () => { + const location = useLocation(); + + return ( + +
+ +

Paper

+ +

+ The Paper component provides an elevated surface for displaying + content. It mimics the behavior of real-world surfaces with shadow + effects, supporting Material Design's elevation system. +

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

Usage Guidelines

+ +

+ When using the Paper component, follow these guidelines to ensure + consistency and usability across your designs. +

+ + +

Elevation Guidelines

+ +
    +
  • Use lower elevations (0-3) for subtle surfaces such as cards and + small sections.
    • +
  • Higher elevations (8-24) are best for modals or + key areas that need emphasis.
    • +
  • Be mindful of the dark mode + behavior, where higher elevations result in a lighter background.
    • +
+ + +

Variant Guidelines

+ +
    +
  • + Use the outlined variant for areas where shadows + might feel visually overwhelming. +
    • +
  • + Stick to the default elevation variant for core components + requiring shadow depth. +
    • +
+ +

Corners Guidelines

+ +
    +
  • + Rounded corners are more user-friendly and should be preferred + unless a strict design requires square corners. +
    • +
  • + Use square corners sparingly, mostly for components meant to + indicate precision or alignment with grid systems. +
    • +
+ + +

Accessibility

+ +
    +
  • + Make sure elevated surfaces have sufficient contrast with the + background. +
    • +
  • + Use clear and concise labels or headings for content within Paper + components to enhance accessibility. +
    • +
+
+
+ + ); +}; + +export default PaperGuidance; diff --git a/src/sections/Projects/Sistent/components/paper/index.js b/src/sections/Projects/Sistent/components/paper/index.js new file mode 100644 index 000000000000..34ed637986af --- /dev/null +++ b/src/sections/Projects/Sistent/components/paper/index.js @@ -0,0 +1,114 @@ +import React from "react"; +import { SistentLayout } from "../../sistent-layout"; +import TabButton from "../../../../../reusecore/Button"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; +import { Paper, SistentThemeProvider } from "@layer5/sistent"; + +export const SistentPaper = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + return ( + +
+ +

Paper

+ +

+ The Paper component provides an elevated surface for displaying + content. It mimics the behavior of real-world surfaces with shadow + effects, supporting Material Design's elevation system. +

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

+ The Paper component is useful for designs that require elevated + surfaces, such as cards or modals, and offers multiple configuration + options like elevation, variants, and corner styles. +

+ + +

Types

+ +

+ Paper can be configured with different elevation levels + to establish a visual hierarchy, and it also supports a flat, + outlined variant. +

+ +

Elevation

+

+ The elevation prop determines the shadow depth, with values ranging + from 0 (no shadow) to 24 (maximum shadow). +

+ + + + Paper with Elevation 3 + + + +

Outlined

+

+ For designs requiring minimal shadows, the outlined{" "} + variant can be used instead of the default elevated one. +

+ + + + Outlined Paper Variant + + + + +

Corners

+ +

+ The Paper component has rounded corners by default, but you can use + the square prop to remove rounding. +

+ + + + Square Corners + + +
+
+ + ); +}; +export default SistentPaper; diff --git a/src/sections/Projects/Sistent/components/popper/guidance.js b/src/sections/Projects/Sistent/components/popper/guidance.js new file mode 100644 index 000000000000..8a9e4a4c9dab --- /dev/null +++ b/src/sections/Projects/Sistent/components/popper/guidance.js @@ -0,0 +1,172 @@ +import React, { useState } from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import { SistentLayout } from "../../sistent-layout"; +import { SistentThemeProvider, Popper, Button, Box } from "@layer5/sistent"; +import { Row } from "../../../../../reusecore/Layout"; +import TabButton from "../../../../../reusecore/Button"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +export const PopperGuidance = () => { + const { isDark } = useStyledDarkMode(); + const location = useLocation(); + const [open, setOpen] = useState(false); + const [anchorEl, setAnchorEl] = useState(null); + + const handleClick = (event) => { + setAnchorEl(event.currentTarget); + setOpen((prevOpen) => !prevOpen); + }; + + return ( + +
+ +

Popper

+ +

+ The Popper component provides a mechanism for positioning content + dynamically relative to a reference element. It is commonly used for + tooltips, dropdowns, and modals, enhancing the user experience by + presenting contextual information without overcrowding the interface. +

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

+ Proper usage of the Popper component can greatly enhance user + experience by providing relevant contextual information at the right + time. Below are some guidelines to ensure effective implementation. +

+ + +

Positioning

+ +

+ The positioning of the Popper is critical for usability. Use the + `placement` prop to control where the Popper appears relative to its + anchor element. Options include: +

+
    +
  • top
    • +
  • bottom
    • +
  • left
    • +
  • right
    • +
  • top-start
    • +
  • top-end
    • +
  • bottom-start
    • +
  • bottom-end
    • +
  • left-start
    • +
  • left-end
    • +
  • right-start
    • +
  • right-end
    • +
+

+ Choosing the right position helps to prevent overlap with other + interface elements and improves readability. +

+ + +

Styling

+ +

+ The Popper component inherits styles from the Sistent theme. You can + customize the appearance by applying styles to the content inside + the Popper. For instance: +

+ + +
+
+ + ); +}; From f46f7f23aa171fb5ba228713357e367b0292c0e8 Mon Sep 17 00:00:00 2001 From: Denish Tomar Date: Wed, 16 Oct 2024 03:33:57 +0530 Subject: [PATCH 06/27] Add Kanvas Snapshot project to repository overview Signed-off-by: Denish Tomar Signed-off-by: NishantSinghhhhh --- src/sections/Community/Handbook/repo-data.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/sections/Community/Handbook/repo-data.js b/src/sections/Community/Handbook/repo-data.js index 65709eb5ecdb..9469d6de26b4 100644 --- a/src/sections/Community/Handbook/repo-data.js +++ b/src/sections/Community/Handbook/repo-data.js @@ -19,6 +19,7 @@ import appmeshLogo from "../../../assets/images/service-mesh-icons/aws-app-mesh. import ciliumLogo from "../../../assets/images/service-mesh-icons/cilium.svg"; import wasm from "../../../assets/images/webassembly/webssembly_icon.svg"; import recognitionLogo from "../../../assets/images/recognition-program/recognition-program.png"; +import kanvasLogo from "../../../assets/images/kanvas-snapshot/kanvas-snapshot.svg"; export const repo_data = [ { @@ -168,7 +169,15 @@ export const repo_data = [ link: [""], repository: "https://github.com/layer5io/docs", }, - + { + project: "Kanvas Snapshot", + image: kanvasLogo, + site: "https://layer5.io/solutions/gitops/snapshot", + language: "React.js", + maintainers_name: ["Vacant"], + link: [""], + repository: "https://github.com/layer5labs/kanvas-snapshot", + }, ], }, From ad2ca4ac36e644e9601376522e9ef639325c0fc1 Mon Sep 17 00:00:00 2001 From: Denish Tomar Date: Sun, 20 Oct 2024 05:27:08 +0530 Subject: [PATCH 07/27] Add Kanvas Snapshot to backend Signed-off-by: Denish Tomar Signed-off-by: NishantSinghhhhh --- src/sections/Community/Handbook/repo-data.js | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src/sections/Community/Handbook/repo-data.js b/src/sections/Community/Handbook/repo-data.js index 9469d6de26b4..e411834aefd5 100644 --- a/src/sections/Community/Handbook/repo-data.js +++ b/src/sections/Community/Handbook/repo-data.js @@ -169,15 +169,6 @@ export const repo_data = [ link: [""], repository: "https://github.com/layer5io/docs", }, - { - project: "Kanvas Snapshot", - image: kanvasLogo, - site: "https://layer5.io/solutions/gitops/snapshot", - language: "React.js", - maintainers_name: ["Vacant"], - link: [""], - repository: "https://github.com/layer5labs/kanvas-snapshot", - }, ], }, @@ -320,6 +311,17 @@ export const repo_data = [ // language: "Golang", // repository: "https://github.com/layer5io/meshmonkey", // }, + { + project: "Kanvas Snapshot", + image: kanvasLogo, + site: "https://layer5.io/solutions/gitops/snapshot", + language: "GitHub Actions", + maintainers_name: ["Vacant"], + link: [""], + description: + "Generates visual snapshots of infrastructure as code (e.g., Kubernetes manifests, Helm charts) and delivers them to pull requests for automated review.", + repository: "https://github.com/layer5labs/kanvas-snapshot", + }, ], }, From 454f2169e91fd596fc84efe6e8f0d7da66eaa7ed Mon Sep 17 00:00:00 2001 From: jerensl <54782057+jerensl@users.noreply.github.com> Date: Mon, 21 Oct 2024 23:31:08 +0800 Subject: [PATCH 08/27] ci: bump kanvas snapshot Signed-off-by: jerensl <54782057+jerensl@users.noreply.github.com> Signed-off-by: NishantSinghhhhh --- .github/workflows/meshmap.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/meshmap.yml b/.github/workflows/meshmap.yml index a80a9c935ad7..91bf0525467d 100644 --- a/.github/workflows/meshmap.yml +++ b/.github/workflows/meshmap.yml @@ -38,7 +38,7 @@ jobs: path: action repository: layer5labs/kanvas-snapshot - id: test_result - uses: layer5labs/Kanvas-Snapshot@v0.2.13 + uses: layer5labs/Kanvas-Snapshot@v0.2.15 with: githubToken: ${{ secrets.GITHUB_TOKEN }} mesheryToken: ${{ secrets.MESHERY_TOKEN }} From 4e605a73f7ccd0c42977d0d4e1996b74ae7923da Mon Sep 17 00:00:00 2001 From: NishantSinghhhhh Date: Mon, 21 Oct 2024 21:46:55 +0530 Subject: [PATCH 09/27] Did the Required changes Signed-off-by: NishantSinghhhhh --- .../Projects/Sistent/components/link/code.js | 32 ++++++++----------- .../Sistent/components/link/guidance.js | 17 +++------- .../Projects/Sistent/components/link/index.js | 11 +++---- 3 files changed, 24 insertions(+), 36 deletions(-) diff --git a/src/sections/Projects/Sistent/components/link/code.js b/src/sections/Projects/Sistent/components/link/code.js index 8cab957f4a98..cd76aaeb2a63 100644 --- a/src/sections/Projects/Sistent/components/link/code.js +++ b/src/sections/Projects/Sistent/components/link/code.js @@ -16,7 +16,7 @@ const codes = [ href="Your Link" style={{ textDecoration: "none", - border: "1px solid black", + color:"green", padding: "6px", marginLeft: "10px", }} @@ -30,8 +30,7 @@ const codes = [ href="Your Path" style={{ textDecoration: "none", - border: "1px solid blue", - color: "blue", + color: "green", padding: "6px", marginLeft: "10px", }} @@ -45,7 +44,7 @@ const codes = [ href="Your Path" style={{ textDecoration: "underline", - color: "blue", + color: "green", padding: "6px", marginLeft: "10px", }} @@ -60,7 +59,7 @@ const codes = [ href="Your Path" style={{ textDecoration: "none", - color: "green", + color: "blue", fontWeight: "bold", fontSize: "16px", padding: "6px", @@ -77,12 +76,12 @@ const codes = [ href="/path-to-file.zip" download="file.zip" style={{ - color: "blue", + color: "green", fontWeight: "bold", fontSize: "16px", padding: "6px", marginLeft: "10px", - borderBottom: "2px solid blue", + }} > Download File @@ -96,7 +95,7 @@ const codes = [ rel="noopener noreferrer" style={{ textDecoration: "underline", - color: "blue", + color: "green", padding: "6px", marginLeft: "10px", }} @@ -165,7 +164,7 @@ export const LinkCode = () => { href="your path" style={{ textDecoration: "none", - border: "1px solid black", + color: "green", padding: "6px", marginLeft: "10px", }} @@ -193,8 +192,7 @@ export const LinkCode = () => { { href="Your Path" style={{ textDecoration: "underline", - color: "blue", + color: "green", padding: "6px", - border: "1px solid blue", marginLeft: "10px", }} > @@ -241,12 +238,12 @@ export const LinkCode = () => { href="Your Path" style={{ textDecoration: "none", - color: "green", + color: "blue", fontWeight: "bold", fontSize: "16px", padding: "6px", marginLeft: "10px", - borderBottom: "2px dashed green", + borderBottom: "2px dashed blue", }} > Customized Link @@ -268,12 +265,11 @@ export const LinkCode = () => { download="file.zip" style={{ textDecoration: "none", - color: "blue", + color: "green", fontWeight: "bold", fontSize: "16px", padding: "6px", marginLeft: "10px", - borderBottom: "2px solid blue", }} > Download File @@ -298,7 +294,7 @@ export const LinkCode = () => { rel="noopener noreferrer" style={{ textDecoration: "underline", - color: "blue", + color: "green", padding: "6px", marginLeft: "10px", }} diff --git a/src/sections/Projects/Sistent/components/link/guidance.js b/src/sections/Projects/Sistent/components/link/guidance.js index 5f29b12970d8..37b6c9f3225d 100644 --- a/src/sections/Projects/Sistent/components/link/guidance.js +++ b/src/sections/Projects/Sistent/components/link/guidance.js @@ -74,13 +74,11 @@ export const LinkGuidancePage = () => { style={{ marginLeft: "10px", textDecoration: "none", - color: isDark ? "white" : "black", // Change color based on the theme + color: "green", // Change color based on the theme padding: "6px", - border: "2px solid", - borderColor: isDark ? "white" : "black", }} > - Navigate to Layer5 + Navigate to Layer 5 @@ -96,13 +94,11 @@ export const LinkGuidancePage = () => { display: "inline-block", marginLeft: "10px", textDecoration: "none", - color: isDark ? "white" : "black", - backgroundColor: isDark ? "#3f51b5" : "#2196f3", // Button background color + color: "green", padding: "10px 20px", borderRadius: "4px", fontWeight: "bold", - border: "2px solid", - borderColor: isDark ? "white" : "black", + border: "2px solid black", }} > Get Started @@ -132,16 +128,13 @@ export const LinkGuidancePage = () => {

Download Links

- These links allow users to download files, documents, or resources. It’s essential to provide information about the file type and size to prepare users for what they’re downloading. + These links allow users to download files, documents, or resources. It’s essential to provide information about the file type and size to prepare users for what they’re downloading. You just have to pass Download as prop in link component.

- -

Labeling

 From c93765ab2b9942e6cffde858421879d4cc6765ad Mon Sep 17 00:00:00 2001 From: NishantSinghhhhh Date: Tue, 22 Oct 2024 15:11:41 +0530 Subject: [PATCH 20/27] Chanegd the button style , removed green color prop from links and also removed download button Signed-off-by: NishantSinghhhhh --- .../Projects/Sistent/components/link/code.js | 6 +++--- .../Sistent/components/link/guidance.js | 18 +++++++++++++++--- .../Projects/Sistent/components/link/index.js | 4 +--- 3 files changed, 19 insertions(+), 9 deletions(-) diff --git a/src/sections/Projects/Sistent/components/link/code.js b/src/sections/Projects/Sistent/components/link/code.js index 586154a5144c..dc259b9a8a57 100644 --- a/src/sections/Projects/Sistent/components/link/code.js +++ b/src/sections/Projects/Sistent/components/link/code.js @@ -25,15 +25,15 @@ const codes = [ `, ` - - Customized Link 1 + Colored Link `, diff --git a/src/sections/Projects/Sistent/components/link/guidance.js b/src/sections/Projects/Sistent/components/link/guidance.js index ef9070e2fe31..3db32b59f66e 100644 --- a/src/sections/Projects/Sistent/components/link/guidance.js +++ b/src/sections/Projects/Sistent/components/link/guidance.js @@ -2,7 +2,7 @@ import React from "react"; import { navigate } from "gatsby"; import { useLocation } from "@reach/router"; import { Row } from "../../../../../reusecore/Layout"; -import { Button, SistentThemeProvider, Link, ExternalLinkIcon} from "@layer5/sistent"; +import { Button, SistentThemeProvider, Link, ExternalLinkIcon } from "@layer5/sistent"; import { SistentLayout } from "../../sistent-layout"; import TabButton from "../../../../../reusecore/Button"; @@ -90,7 +90,16 @@ export const LinkGuidancePage = () => { - Get Started + + Get Started + @@ -109,14 +118,17 @@ export const LinkGuidancePage = () => { textDecoration: "none", padding: "6px", cursor: "pointer", + display: "inline-flex", + alignItems: "center", }} onMouseEnter={(e) => (e.target.style.textDecoration = "underline")} onMouseLeave={(e) => (e.target.style.textDecoration = "none")} > - Visit External Resource + Visit External Resource +

Labeling

 diff --git a/src/sections/Projects/Sistent/components/link/index.js b/src/sections/Projects/Sistent/components/link/index.js index 0ea769203831..41cc740295e1 100644 --- a/src/sections/Projects/Sistent/components/link/index.js +++ b/src/sections/Projects/Sistent/components/link/index.js @@ -74,7 +74,6 @@ const SistentLink = () => { href="https://layer5.io/" style={{ marginLeft: "10px", - color: "green", padding: "6px", }} > @@ -120,7 +119,6 @@ const SistentLink = () => { style={{ marginLeft: "10px", textDecoration: "underline", - color: "green", padding: "6px", }} > @@ -141,7 +139,7 @@ const SistentLink = () => { style={{ marginLeft: "10px", textDecoration: "underline", - color: "green", + color: "blue", padding: "6px", border: "2px solid green", }} From 4b99c719493485e6558174bc69ec2ddfdc31d608 Mon Sep 17 00:00:00 2001 From: NishantSinghhhhh Date: Tue, 22 Oct 2024 15:12:49 +0530 Subject: [PATCH 21/27] Chanegd the button style , removed green color prop from links and also removed download button Signed-off-by: NishantSinghhhhh --- src/sections/Projects/Sistent/components/link/guidance.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sections/Projects/Sistent/components/link/guidance.js b/src/sections/Projects/Sistent/components/link/guidance.js index 3db32b59f66e..e07030a91889 100644 --- a/src/sections/Projects/Sistent/components/link/guidance.js +++ b/src/sections/Projects/Sistent/components/link/guidance.js @@ -2,7 +2,7 @@ import React from "react"; import { navigate } from "gatsby"; import { useLocation } from "@reach/router"; import { Row } from "../../../../../reusecore/Layout"; -import { Button, SistentThemeProvider, Link, ExternalLinkIcon } from "@layer5/sistent"; +import { SistentThemeProvider, Link, ExternalLinkIcon } from "@layer5/sistent"; import { SistentLayout } from "../../sistent-layout"; import TabButton from "../../../../../reusecore/Button"; From f5ebd918a352958f5ad867be1238a8bc95beb3c9 Mon Sep 17 00:00:00 2001 From: NISHANT SINGH <151461374+NishantSinghhhhh@users.noreply.github.com> Date: Thu, 24 Oct 2024 19:13:22 +0530 Subject: [PATCH 22/27] Updated index.js Signed-off-by: NISHANT SINGH <151461374+NishantSinghhhhh@users.noreply.github.com> --- src/sections/Projects/Sistent/components/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js index 6647f9deae9b..4f1e4797ed7e 100644 --- a/src/sections/Projects/Sistent/components/index.js +++ b/src/sections/Projects/Sistent/components/index.js @@ -45,6 +45,7 @@ const componentsData = [ url: "/projects/sistent/components/popper", }, { + id: 6, 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.", From 8652ba5ca376ec4bc59bd25dfe483f2cc5c0a16f Mon Sep 17 00:00:00 2001 From: NISHANT SINGH <151461374+NishantSinghhhhh@users.noreply.github.com> Date: Thu, 24 Oct 2024 19:55:11 +0530 Subject: [PATCH 23/27] Update code.js Signed-off-by: NISHANT SINGH <151461374+NishantSinghhhhh@users.noreply.github.com> --- src/sections/Projects/Sistent/components/link/code.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sections/Projects/Sistent/components/link/code.js b/src/sections/Projects/Sistent/components/link/code.js index dc259b9a8a57..82688dbd9c63 100644 --- a/src/sections/Projects/Sistent/components/link/code.js +++ b/src/sections/Projects/Sistent/components/link/code.js @@ -3,7 +3,7 @@ import { navigate } from "gatsby"; import { useLocation } from "@reach/router"; import { SistentThemeProvider, Link } from "@layer5/sistent"; -import { CodeBlock } from "./code-block"; +import { CodeBlock } from "../button/code.js"; // import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight"; import { SistentLayout } from "../../sistent-layout"; From 9b47123d72018477412401896ea9e0080dfdcc2f Mon Sep 17 00:00:00 2001 From: NISHANT SINGH <151461374+NishantSinghhhhh@users.noreply.github.com> Date: Thu, 24 Oct 2024 19:58:46 +0530 Subject: [PATCH 24/27] Deleting code-block.js Signed-off-by: NISHANT SINGH <151461374+NishantSinghhhhh@users.noreply.github.com> --- .../Sistent/components/link/code-block.js | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/src/sections/Projects/Sistent/components/link/code-block.js b/src/sections/Projects/Sistent/components/link/code-block.js index 34bf21d9b570..8b137891791f 100644 --- a/src/sections/Projects/Sistent/components/link/code-block.js +++ b/src/sections/Projects/Sistent/components/link/code-block.js @@ -1,20 +1 @@ -import React, { useState } from "react"; -import Code from "../../../../../components/CodeBlock"; -export const CodeBlock = ({ name, code }) => { - const [showCode, setShowCode] = useState(false); - const onChange = () => { - setShowCode((prev) => !prev); - }; - return ( -
- - - {showCode && ( - - )} -
- ); -}; \ No newline at end of file From 59b3df469c0dd23bd5e44576724ea35d148d85d6 Mon Sep 17 00:00:00 2001 From: NishantSinghhhhh Date: Thu, 24 Oct 2024 20:06:07 +0530 Subject: [PATCH 25/27] Removed the extra component Signed-off-by: NishantSinghhhhh --- src/sections/Projects/Sistent/components/index.js | 2 +- src/sections/Projects/Sistent/components/link/code-block.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) delete mode 100644 src/sections/Projects/Sistent/components/link/code-block.js diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js index 0b1d7cb855bc..af50aab51e00 100644 --- a/src/sections/Projects/Sistent/components/index.js +++ b/src/sections/Projects/Sistent/components/index.js @@ -58,7 +58,7 @@ const componentsData = [ "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", }, - } + ]; const SistentComponents = () => { diff --git a/src/sections/Projects/Sistent/components/link/code-block.js b/src/sections/Projects/Sistent/components/link/code-block.js deleted file mode 100644 index 8b137891791f..000000000000 --- a/src/sections/Projects/Sistent/components/link/code-block.js +++ /dev/null @@ -1 +0,0 @@ - From 8c668b7d6d4a5a83115ca8306800c558c49c8928 Mon Sep 17 00:00:00 2001 From: NishantSinghhhhh Date: Thu, 24 Oct 2024 23:40:29 +0530 Subject: [PATCH 26/27] Did changes to pass the github tests Signed-off-by: NishantSinghhhhh --- src/sections/Projects/Sistent/components/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js index af50aab51e00..ca05b2d29792 100644 --- a/src/sections/Projects/Sistent/components/index.js +++ b/src/sections/Projects/Sistent/components/index.js @@ -58,7 +58,7 @@ const componentsData = [ "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", }, - + ]; const SistentComponents = () => { From af47fd9eb57540e70c4f7b71724b2b78bfea0066 Mon Sep 17 00:00:00 2001 From: NishantSinghhhhh Date: Sun, 27 Oct 2024 15:32:53 +0530 Subject: [PATCH 27/27] chnanged the path Signed-off-by: NishantSinghhhhh --- src/sections/Projects/Sistent/components/button/code-block.js | 1 + src/sections/Projects/Sistent/components/link/code.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/sections/Projects/Sistent/components/button/code-block.js b/src/sections/Projects/Sistent/components/button/code-block.js index b3e4945c40e5..2a7463d6ceec 100644 --- a/src/sections/Projects/Sistent/components/button/code-block.js +++ b/src/sections/Projects/Sistent/components/button/code-block.js @@ -1,5 +1,6 @@ import React, { useState } from "react"; import Code from "../../../../../components/CodeBlock"; + export const CodeBlock = ({ name, code }) => { const [showCode, setShowCode] = useState(false); const onChange = () => { diff --git a/src/sections/Projects/Sistent/components/link/code.js b/src/sections/Projects/Sistent/components/link/code.js index 82688dbd9c63..2096cd6fd8f8 100644 --- a/src/sections/Projects/Sistent/components/link/code.js +++ b/src/sections/Projects/Sistent/components/link/code.js @@ -3,7 +3,7 @@ import { navigate } from "gatsby"; import { useLocation } from "@reach/router"; import { SistentThemeProvider, Link } from "@layer5/sistent"; -import { CodeBlock } from "../button/code.js"; +import { CodeBlock } from "../button/code-block"; // import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight"; import { SistentLayout } from "../../sistent-layout";