button component page complete

Signed-off-by: lakshya <[email protected]>

src/sections/Projects/Sistent/components/button/code-block.js

@@ -0,0 +1,23 @@
+import React, { useState } from "react";
+
+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 && (
+        <pre className="code">
+          <code lang="javascript">{code}</code>
+        </pre>
+      )}
+    </div>
+  );
+};

src/sections/Projects/Sistent/components/button/code.js

@@ -1,5 +1,123 @@
 import React from "react";
+import { Button, SistentThemeProvider } from "@layer5/sistent";
+import { CodeBlock } from "./code-block";
+import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
+
+const codes = [
+  `  <SistentThemeProvider>
+       <Button variant="contained">Filled</Button>
+  </SistentThemeProvider>`,
+  `  <SistentThemeProvider>
+       <Button variant="outlined">Outlined</Button>
+  </SistentThemeProvider>`,
+  `  <SistentThemeProvider>
+       <Button variant="text">Text</Button>
+  </SistentThemeProvider>`,
+  `  <SistentThemeProvider>
+       <Button variant="contained">48px Height</Button>
+       <Button variant="contained">56px Height</Button>
+  </SistentThemeProvider>`,
+  `  <SistentThemeProvider>
+      <Button
+        variant="contained"
+        size="medium"
+        endIcon={<FaArrowRight size={12} />}
+      >
+        Next
+      </Button>
+  </SistentThemeProvider>`,
+];
 
 export const ButtonCode = () => {
-  return <div>ButtonCode</div>;
+  return (
+    <div className="main-content">
+      <p>
+        Buttons communicate actions to users and they can be placed at several
+        places throughout the user interface.
+      </p>
+      <a id="Basic Button">
+        <h2>Basic Button</h2>
+      </a>
+      <p>The button comes in three types: Filled, Outlined, and Text.</p>
+      <h3>Filled Button</h3>
+      <p>
+        Mostly used for high-emphasis actions and are primarily distinguished by
+        their fill. They are used to represent actions that are primary to the
+        solution.
+      </p>
+      <div className="showcase">
+        <div className="items">
+          <SistentThemeProvider>
+            <Button variant="contained">Filled</Button>
+          </SistentThemeProvider>
+        </div>
+        <CodeBlock name="filled-button" code={codes[0]} />
+      </div>
+      <h3>Outlined Button</h3>
+      <p>Can be used for both medium and sometimes high-emphasis actions.</p>
+      <div className="showcase">
+        <div className="items">
+          <SistentThemeProvider>
+            <Button variant="outlined">Outlined</Button>
+          </SistentThemeProvider>
+        </div>
+        <CodeBlock name="outlined-button" code={codes[1]} />
+      </div>
+      <h3>Text Button</h3>
+      <p>
+        Mostly used for less pronounced and very low emphasis actions. Can also
+        be used for text links as well.
+      </p>
+      <div className="showcase">
+        <div className="items">
+          <SistentThemeProvider>
+            <Button variant="text">Text</Button>
+          </SistentThemeProvider>
+        </div>
+        <CodeBlock name="text-button" code={codes[2]} />
+      </div>
+      <a id="Sizes">
+        <h2>Sizes</h2>
+      </a>
+      <p>
+        For now, two different sizes of buttons exist: 56px height and 48px
+        height.
+      </p>
+      <div className="showcase">
+        <div className="items">
+          <SistentThemeProvider>
+            <Button variant="contained" size="medium" className="size-button">
+              48px Height
+            </Button>
+            <Button variant="contained" size="large">
+              56px Height
+            </Button>
+          </SistentThemeProvider>
+        </div>
+        <CodeBlock name="button-sizes" code={codes[3]} />
+      </div>
+      <a id="Adding Icons">
+        <h2>Adding Icons</h2>
+      </a>
+      <p>
+        Icons are mostly added to filled and outlined buttons and they are used
+        to better describe the information being passed across by the button’s
+        label.
+      </p>
+      <div className="showcase">
+        <div className="items">
+          <SistentThemeProvider>
+            <Button
+              variant="contained"
+              size="medium"
+              endIcon={<FaArrowRight size={12} />}
+            >
+              Next
+            </Button>
+          </SistentThemeProvider>
+        </div>
+        <CodeBlock name="adding-icons" code={codes[4]} />
+      </div>
+    </div>
+  );
 };

src/sections/Projects/Sistent/components/button/index.js

@@ -17,14 +17,14 @@ const overviewContents = [
 ];
 
 const guidanceContents = [
-  { id: 0, link: "#Tonal Palettes", text: "Tonal Palettes" },
-  { id: 1, link: "#Basic Colors", text: "Basic Colors" },
-  { id: 2, link: "#Token Specification", text: "Token Specification" },
+  { id: 0, link: "#Function", text: "Function" },
+  { id: 1, link: "#Labeling", text: "Labeling" },
 ];
 
 const codeContents = [
-  { id: 0, link: "#Primitive Category", text: "Primitive Category" },
-  { id: 1, link: "#Semantic Category", text: "Semantic Category" },
+  { id: 0, link: "#Basic Button", text: "Basic Button" },
+  { id: 1, link: "#Sizes", text: "Sizes" },
+  { id: 1, link: "#Adding Icons", text: "Adding Icons" },
 ];
 
 const SistentButton = () => {

src/sections/Projects/Sistent/sistent.style.js

@@ -303,6 +303,7 @@ const SistentWrapper = styled.div`
     .page-section {
       margin-top: -2rem;
       margin-left: 0rem;
+      padding: 1rem 1rem;
     }
     table {
       margin-left: -1.5rem;
@@ -790,6 +791,32 @@ const SistentWrapper = styled.div`
       width: 20px;
     }
   }
+
+  .showcase {
+    border: 1px solid ${(props) => props.theme.whiteToGreyE6E6E6};
+    margin: 0.8rem 0 2.5rem 0;
+    border-radius: 10px;
+    .items {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 5rem;
+    }
+
+    .show-code {
+      border-top: 1px solid ${(props) => props.theme.whiteToGreyE6E6E6};
+      padding: 0.7rem 1rem;
+    }
+
+    .code {
+      font-size: 0.9rem;
+    }
+
+    .size-button {
+      margin-right: 1rem;
+    }
+  }
 `;
 
 export default SistentWrapper;