feat(root): add top navigation patterns compatible with React and web…

… components Add top navigation patterns for React users, compatible with TypeScript and JavaScript. Add top nav patterns for web components, compatible with JavaScript. Prettier fixes . #760
mi6 · Jan 23, 2024 · fb5d091 · fb5d091
1 parent 40c0095
commit fb5d091
Show file tree

Hide file tree

Showing 12 changed files with 1,714 additions and 0 deletions.
diff --git a/src/content/structured/patterns/components/top-nav-patterns/javascript/react/index.css b/src/content/structured/patterns/components/top-nav-patterns/javascript/react/index.css
@@ -0,0 +1,25 @@
+@import "@ukic/fonts/dist/fonts.css";
+@import "@ukic/react/dist/core/core.css";
+@import "@ukic/react/dist/core/normalize.css";
+
+.input-area {
+  display: flex;
+  gap: var(--ic-space-md);
+}
+
+/* Remove the .main-content-div styling */
+.main-content-div {
+  background-color: var(--ic-architectural-100);
+  height: 800px;
+  width: 100%;
+}
+
+ic-text-field {
+  --input-width: 21.5rem;
+}
+
+@media screen and (max-width: 320px) {
+  .input-area {
+    gap: var(--ic-space-xs);
+  }
+}
diff --git a/...tured/patterns/components/top-nav-patterns/javascript/react/top-nav-mega-menu-pattern.jsx b/...tured/patterns/components/top-nav-patterns/javascript/react/top-nav-mega-menu-pattern.jsx
@@ -0,0 +1,203 @@
+import React from "react";
+
+import {
+  IcBreadcrumbGroup,
+  IcBreadcrumb,
+  IcButton,
+  IcChip,
+  IcClassificationBanner,
+  IcFooter,
+  IcFooterLink,
+  IcLink,
+  IcNavigationGroup,
+  IcNavigationItem,
+  IcPageHeader,
+  IcSectionContainer,
+  IcTopNavigation,
+  IcNavigationButton,
+  IcSearchBar,
+  IcTextField,
+  IcTypography,
+  SlottedSVG,
+} from "@ukic/react";
+
+import { mdiAccount, mdiCog, mdiPencil, mdiPlus } from "@mdi/js";
+
+import "./index.css";
+
+const TopNavMegaMenuPattern = () => {
+  const alignment = "center";
+  let pageHeaderAlignment;
+  // pageHeaderAlignment = "center";
+
+  return (
+    <>
+      <IcClassificationBanner classification="official" />
+      <IcTopNavigation
+        contentAligned={alignment}
+        appTitle="[Enter your application name]"
+        status="alpha"
+        version="v0.0.7"
+      >
+        <SlottedSVG
+          slot="app-icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z" />
+        </SlottedSVG>
+        <IcSearchBar slot="search" placeholder="Search" label="Search" />
+        <IcNavigationButton label="Profile" slot="buttons">
+          <SlottedSVG
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            path={mdiAccount}
+          />
+        </IcNavigationButton>
+        <IcNavigationButton label="Settings" slot="buttons">
+          <SlottedSVG
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            path={mdiCog}
+          />
+        </IcNavigationButton>
+        <IcNavigationButton label="Edit" slot="buttons">
+          <SlottedSVG
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            path={mdiPencil}
+          />
+        </IcNavigationButton>
+        <IcNavigationGroup
+          slot="navigation"
+          label="[navigationOption]"
+          expandable
+        >
+          <IcNavigationItem label="Tests" href="#" />
+          <IcNavigationItem label="Theme" href="#" />
+          <IcNavigationItem label="Design" href="#" />
+        </IcNavigationGroup>
+        <IcNavigationGroup slot="navigation" label="Accessibility">
+          <IcNavigationItem label="Introduction" href="#" />
+          <IcNavigationItem label="Accessibility statement" href="#" />
+        </IcNavigationGroup>
+        <IcNavigationItem
+          slot="navigation"
+          label="[navigationOption]"
+          href="#"
+          selected
+        />
+        <IcNavigationItem
+          slot="navigation"
+          label="[navigationOption]"
+          href="#"
+        />
+        <IcNavigationItem
+          slot="navigation"
+          label="[navigationOption]"
+          href="#"
+        />
+        <IcNavigationItem
+          slot="navigation"
+          label="[navigationOption]"
+          href="#"
+        />
+        <IcNavigationItem
+          slot="navigation"
+          label="[navigationOption]"
+          href="#"
+        />
+        <IcNavigationItem
+          slot="navigation"
+          label="[navigationOption]"
+          href="#"
+        />
+      </IcTopNavigation>
+      <IcPageHeader
+        heading="Latte recipe"
+        subheading="A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam."
+        reverseOrder
+        aligned={pageHeaderAlignment || alignment}
+      >
+        <IcChip slot="heading-adornment" label="BETA" size="large" />
+        <IcBreadcrumbGroup slot="breadcrumbs">
+          <IcBreadcrumb pageTitle="Breadcrumb 1" href="#" />
+          <IcBreadcrumb pageTitle="Breadcrumb 2" href="#" />
+          <IcBreadcrumb pageTitle="Breadcrumb 3" href="#" />
+          <IcBreadcrumb pageTitle="Breadcrumb 4" href="#" />
+          <IcBreadcrumb pageTitle="Breadcrumb 5" href="#" />
+          <IcBreadcrumb current pageTitle="Breadcrumb 6" href="#" />
+        </IcBreadcrumbGroup>
+        <IcButton slot="actions" variant="primary">
+          <SlottedSVG
+            slot="left-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            path={mdiPlus}
+          />
+          Create coffee
+        </IcButton>
+        <IcButton slot="actions" variant="tertiary">
+          Filter coffee
+        </IcButton>
+        <div slot="input" className="input-area">
+          <IcTextField
+            placeholder="Enter your input..."
+            label="Input"
+            hideLabel
+          />
+          <IcButton>Submit</IcButton>
+        </div>
+      </IcPageHeader>
+      <IcSectionContainer aligned={alignment}>
+        <main>
+          <div className="main-content-div">Replace this div</div>
+        </main>
+      </IcSectionContainer>
+      <IcFooter
+        aligned={alignment}
+        caption="This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation."
+      >
+        <IcTypography slot="description">
+          This app was built using the UK{" "}
+          <IcLink href="https://design.sis.gov.uk" target="_blank">
+            Intelligence Community Design System (ICDS)
+          </IcLink>
+          .
+        </IcTypography>
+        <IcFooterLink slot="link" href="">
+          [footerLink]
+        </IcFooterLink>
+        <IcFooterLink slot="link" href="">
+          [footerLink]
+        </IcFooterLink>
+        <IcFooterLink slot="link" href="">
+          [footerLink]
+        </IcFooterLink>
+        <IcFooterLink slot="link" href="">
+          [footerLink]
+        </IcFooterLink>
+        <IcFooterLink slot="link" href="">
+          [footerLink]
+        </IcFooterLink>
+      </IcFooter>
+    </>
+  );
+};
+
+export default TopNavMegaMenuPattern;