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..91fd1579c3cf --- /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; 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..c9bf9daae920 --- /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; 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..8c61125e6e6c --- /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; diff --git a/src/pages/projects/sistent/components/link/link.js b/src/pages/projects/sistent/components/link/link.js new file mode 100644 index 000000000000..8a0ddf36baa6 --- /dev/null +++ b/src/pages/projects/sistent/components/link/link.js @@ -0,0 +1,9 @@ +import React from "react"; + +const Link = () => { + return ( +
Link
+ ); +}; + +export default Link; \ 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..2a7463d6ceec --- /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 && ( + + )} +
+ ); +}; 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..dc25f2beb41a --- /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 { Button, 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 + + +
+ +
+
+
+
+ ); +}; 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..fbe298c73589 --- /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. +

+
+
+
+ ); +}; 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..d1d294cf844c --- /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 { Col, 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;