Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Badge component and documentation #6371

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add Badge component and documentation #6371

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/components/SistentNavigation/content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,4 +70,8 @@ export const content = [
{ id: 49, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
{ id: 50, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
{ id: 51, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },

{ id: 52, link: "/projects/sistent/components/badge", text: "Badge" },
{ id: 53, link: "/projects/sistent/components/badge/guidance", text: "Badge" },
{ id: 54, link: "/projects/sistent/components/badge/code", text: "Badge" },
];
19 changes: 19 additions & 0 deletions src/sections/Projects/Sistent/components/badge/code-block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
/* eslint-disable linebreak-style */
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 (
<div className="show-code">
<input type="checkbox" name={name} id={name} onChange={onChange} />
<label htmlFor={name} className="label">
Show Code
</label>
{showCode && <Code codeString={code} language="javascript" />}
</div>
);
};
258 changes: 258 additions & 0 deletions src/sections/Projects/Sistent/components/badge/code.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,258 @@
/* eslint-disable linebreak-style */
import React from "react";
import { navigate } from "gatsby";
import { useLocation } from "@reach/router";

import { Badge, SistentThemeProvider, Avatar } from "@layer5/sistent";
import { CodeBlock } from "./code-block";
import MailIcon from "@mui/icons-material/Mail";
import { SistentLayout } from "../../sistent-layout";

import TabButton from "../../../../../reusecore/Button";
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";

const codes = [
` <SistentThemeProvider>
<Badge badgeContent={4} color="primary">
<MailIcon />
</Badge>
</SistentThemeProvider>`,
` <SistentThemeProvider>
<Badge variant="dot" color="secondary">
<MailIcon />
</Badge>
</SistentThemeProvider>`,
` <SistentThemeProvider>
<Badge badgeContent={4} color="primary" />
<Badge badgeContent={4} color="secondary" />
<Badge badgeContent={4} color="error" />
<Badge badgeContent={4} color="warning" />
<Badge badgeContent={4} color="success" />
</SistentThemeProvider>`,
` <SistentThemeProvider>
<Badge
badgeContent={4}
color="primary"
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
>
<MailIcon />
</Badge>
</SistentThemeProvider>`,
` <SistentThemeProvider>
<Avatar>
<Badge
overlap="circular"
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
variant="dot"
color="success"
>
U
</Badge>
</Avatar>
</SistentThemeProvider>`,
];

const BadgeCode = () => {
const location = useLocation();
const { isDark } = useStyledDarkMode();

return (
<SistentLayout title="Badge">
<div className="content">
<a id="Identity">
<h2>Badge</h2>
</a>
<p>
A badge is a small piece of information that is used to convey a
specific message or status. It is often used to provide additional
context or information about an item, such as a notification count,
status indicator, or label.
</p>
<div className="filterBtns">
<TabButton
className={
location.pathname === "/projects/sistent/components/badge"
? "active"
: ""
}
onClick={() => navigate("/projects/sistent/components/badge")}
title="Overview"
/>
<TabButton
className={
location.pathname ===
"/projects/sistent/components/badge/guidance"
? "active"
: ""
}
onClick={() =>
navigate("/projects/sistent/components/badge/guidance")
}
title="Guidance"
/>
<TabButton
className={
location.pathname === "/projects/sistent/components/badge/code"
? "active"
: ""
}
onClick={() => navigate("/projects/sistent/components/badge/code")}
title="Code"
/>
</div>
<div className="main-content">
<p>
Badges display counts, small information indicators, or status
markers that are attached to other interface elements.
</p>
<a id="Basic Badge">
<h2>Basic Badge</h2>
</a>
<p>
Examples of badges containing text, primarily using the badgeContent
prop.
</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Badge badgeContent={4} color="primary">
<MailIcon />
</Badge>
</SistentThemeProvider>
</div>
<CodeBlock name="basic-badge" code={codes[0]} />
</div>
<h3>Dot Badge</h3>
<p>The dot badge shows a small dot indicator without any content.</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Badge variant="dot" color="secondary">
<MailIcon />
</Badge>
</SistentThemeProvider>
</div>
<CodeBlock name="dot-badge" code={codes[1]} />
</div>
<h3>Badge Colors</h3>
<p>Use the color prop to apply theme palette colors to badges.</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<div
style={{
display: "flex",
justifyContent: "center",
gap: "20px",
}}
>
<Badge badgeContent={4} color="primary">
<MailIcon />
</Badge>
<Badge badgeContent={4} color="secondary">
<MailIcon />
</Badge>
<Badge badgeContent={4} color="error">
<MailIcon />
</Badge>
<Badge badgeContent={4} color="warning">
<MailIcon />
</Badge>
<Badge badgeContent={4} color="success">
<MailIcon />
</Badge>
</div>
</SistentThemeProvider>
</div>
<CodeBlock name="badge-colors" code={codes[2]} />
</div>
<a id="Badge Position">
<h2>Badge Position</h2>
</a>
<p>Use the anchorOrigin prop to change the position of the badge.</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<div
style={{
display: "flex",
justifyContent: "center",
gap: "20px",
}}
>
<Badge
badgeContent={4}
color="primary"
anchorOrigin={{
vertical: "top",
horizontal: "right",
}}
>
<MailIcon />
</Badge>
<Badge
badgeContent={4}
color="primary"
anchorOrigin={{
vertical: "top",
horizontal: "left",
}}
>
<MailIcon />
</Badge>
<Badge
badgeContent={4}
color="primary"
anchorOrigin={{
vertical: "bottom",
horizontal: "right",
}}
>
<MailIcon />
</Badge>
<Badge
badgeContent={4}
color="primary"
anchorOrigin={{
vertical: "bottom",
horizontal: "left",
}}
>
<MailIcon />
</Badge>
</div>
</SistentThemeProvider>
</div>
<CodeBlock name="badge-position" code={codes[3]} />
</div>
<a id="Badge with Avatar">
<h2>Badge with Avatar</h2>
</a>
<p>Badges can be used with avatars to show user status.</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Avatar>
<Badge
overlap="circular"
anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
variant="dot"
color="success"
>
U
</Badge>
</Avatar>
</SistentThemeProvider>
</div>
<CodeBlock name="badge-avatar" code={codes[4]} />
</div>
</div>
</div>
</SistentLayout>
);
};

export default BadgeCode;
Loading
Loading