Merge pull request #1821 from dxc-technology/rarrojolopez-badge-doc

Added Badge documentation
dxc-technology · Feb 26, 2024 · ecb3627 · ecb3627
2 parents b6bbb51 + 38f79cf
commit ecb3627
Show file tree

Hide file tree

Showing 18 changed files with 675 additions and 77 deletions.
diff --git a/website/package-lock.json b/website/package-lock.json
diff --git a/website/pages/components/badge/index.tsx b/website/pages/components/badge/index.tsx
@@ -0,0 +1,21 @@
+import Head from "next/head";
+import type { ReactElement } from "react";
+import BadgePageLayout from "../../../screens/components/badge/BadgePageLayout";
+import BadgeCodePage from "../../../screens/components/badge/code/BadgeCodePage";
+
+const Index = () => {
+  return (
+    <>
+      <Head>
+        <title>Usage — Halstack Design System</title>
+      </Head>
+      <BadgeCodePage></BadgeCodePage>
+    </>
+  );
+};
+
+Index.getLayout = function getLayout(page: ReactElement) {
+  return <BadgePageLayout>{page}</BadgePageLayout>;
+};
+
+export default Index;
diff --git a/website/pages/components/badge/specifications.tsx b/website/pages/components/badge/specifications.tsx
@@ -0,0 +1,21 @@
+import Head from "next/head";
+import type { ReactElement } from "react";
+import BadgePageLayout from "../../../screens/components/badge/BadgePageLayout";
+import BadgeSpecsPage from "../../../screens/components/badge/specs/BadgeSpecsPage";
+
+const Specifications = () => {
+  return (
+    <>
+      <Head>
+        <title>Badge Specs — Halstack Design System</title>
+      </Head>
+      <BadgeSpecsPage></BadgeSpecsPage>
+    </>
+  );
+};
+
+Specifications.getLayout = function getLayout(page: ReactElement) {
+  return <BadgePageLayout>{page}</BadgePageLayout>;
+};
+
+export default Specifications;
diff --git a/website/pages/components/badge/usage.tsx b/website/pages/components/badge/usage.tsx
@@ -0,0 +1,21 @@
+import Head from "next/head";
+import type { ReactElement } from "react";
+import BadgePageLayout from "screens/components/badge/BadgePageLayout";
+import BadgeUsagePage from "screens/components/badge/usage/BadgeUsagePage";
+
+const Usage = () => {
+  return (
+    <>
+      <Head>
+        <title>Badge Usage — Halstack Design System</title>
+      </Head>
+      <BadgeUsagePage></BadgeUsagePage>
+    </>
+  );
+};
+
+Usage.getLayout = function getLayout(page: ReactElement) {
+  return <BadgePageLayout>{page}</BadgePageLayout>;
+};
+
+export default Usage;
diff --git a/website/screens/common/componentList.js b/website/screens/common/componentList.js
@@ -6,6 +6,11 @@ exports.componentsList = [
     path: "/components/application-layout",
     status: "Ready",
   },
+  {
+    label: "Badge",
+    path: "/components/badge",
+    status: "Experimental",
+  },
   { label: "Bleed", path: "/components/bleed", status: "Ready" },
   { label: "Box", path: "/components/box", status: "Deprecated" },
   {