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 new file mode 100644 index 000000000..9ae431f74 --- /dev/null +++ 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/src/content/structured/patterns/components/top-nav-patterns/javascript/react/top-nav-mega-menu-pattern.jsx b/src/content/structured/patterns/components/top-nav-patterns/javascript/react/top-nav-mega-menu-pattern.jsx new file mode 100644 index 000000000..e6fdc99ab --- /dev/null +++ b/src/content/structured/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 ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Create coffee + + + Filter coffee + +
+ + Submit +
+ + +
+
Replace this div
+
+ + + + This app was built using the UK{" "} + + Intelligence Community Design System (ICDS) + + . + + + [footerLink] + + + [footerLink] + + + [footerLink] + + + [footerLink] + + + [footerLink] + + + + ); +}; + +export default TopNavMegaMenuPattern; diff --git a/src/content/structured/patterns/components/top-nav-patterns/javascript/react/top-nav-page-header-pattern.jsx b/src/content/structured/patterns/components/top-nav-patterns/javascript/react/top-nav-page-header-pattern.jsx new file mode 100644 index 000000000..91b1f84bb --- /dev/null +++ b/src/content/structured/patterns/components/top-nav-patterns/javascript/react/top-nav-page-header-pattern.jsx @@ -0,0 +1,189 @@ +import React from "react"; + +import { + IcBreadcrumbGroup, + IcBreadcrumb, + IcButton, + IcChip, + IcClassificationBanner, + IcFooter, + IcFooterLink, + IcLink, + IcNavigationItem, + IcPageHeader, + IcSectionContainer, + IcTopNavigation, + IcNavigationButton, + IcSearchBar, + IcTextField, + IcTypography, + SlottedSVG, +} from "@ukic/react"; + +import { mdiAccount, mdiCog, mdiPencil, mdiPlus } from "@mdi/js"; + +import "./index.css"; + +const TopNavPageHeaderPattern = () => { + const alignment = "center"; + let pageHeaderAlignment; + // pageHeaderAlignment = "center"; + + return ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Create coffee + + + Filter coffee + +
+ + Submit +
+ + +
+
Replace this div
+
+ + + + This app was built using the UK{" "} + + Intelligence Community Design System (ICDS) + + . + + + [footerLink] + + + [footerLink] + + + [footerLink] + + + [footerLink] + + + [footerLink] + + + + ); +}; + +export default TopNavPageHeaderPattern; diff --git a/src/content/structured/patterns/components/top-nav-patterns/javascript/react/top-nav-pattern.jsx b/src/content/structured/patterns/components/top-nav-patterns/javascript/react/top-nav-pattern.jsx new file mode 100644 index 000000000..8a90eeaa3 --- /dev/null +++ b/src/content/structured/patterns/components/top-nav-patterns/javascript/react/top-nav-pattern.jsx @@ -0,0 +1,143 @@ +import React from "react"; + +import { + IcClassificationBanner, + IcFooter, + IcFooterLink, + IcLink, + IcNavigationItem, + IcSectionContainer, + IcTopNavigation, + IcNavigationButton, + IcSearchBar, + IcTypography, + SlottedSVG, +} from "@ukic/react"; + +import { mdiAccount, mdiCog, mdiPencil } from "@mdi/js"; + +import "./index.css"; + +const TopNavPattern = () => { + const alignment = "center"; + + return ( + <> + + + + + + + + + + + + + + + + + + + + + + + + +
+
Replace this div
+
+ + + + This app was built using the UK{" "} + + Intelligence Community Design System (ICDS) + + . + + + [footerLink] + + + [footerLink] + + + [footerLink] + + + [footerLink] + + + [footerLink] + + + + ); +}; + +export default TopNavPattern; diff --git a/src/content/structured/patterns/components/top-nav-patterns/javascript/web-components/index.css b/src/content/structured/patterns/components/top-nav-patterns/javascript/web-components/index.css new file mode 100644 index 000000000..0efeaa17b --- /dev/null +++ b/src/content/structured/patterns/components/top-nav-patterns/javascript/web-components/index.css @@ -0,0 +1,25 @@ +@import url("https://unpkg.com/@ukic/fonts/dist/fonts.css"); +@import url("https://unpkg.com/@ukic/web-components/dist/core/core.css"); +@import url("https://unpkg.com/@ukic/web-components/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/src/content/structured/patterns/components/top-nav-patterns/javascript/web-components/top-nav-mega-menu-pattern.html b/src/content/structured/patterns/components/top-nav-patterns/javascript/web-components/top-nav-mega-menu-pattern.html new file mode 100644 index 000000000..33cc2495b --- /dev/null +++ b/src/content/structured/patterns/components/top-nav-patterns/javascript/web-components/top-nav-mega-menu-pattern.html @@ -0,0 +1,195 @@ + + + + Home + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Create coffee + + Filter coffee +
+ + Submit +
+ + +
+
Replace this div
+
+ + + This app was built using the UK + Intelligence Community Design System (ICDS). + [footerLink] + [footerLink] + [footerLink] + [footerLink] + [footerLink] + + + + diff --git a/src/content/structured/patterns/components/top-nav-patterns/javascript/web-components/top-nav-page-header-pattern.html b/src/content/structured/patterns/components/top-nav-patterns/javascript/web-components/top-nav-page-header-pattern.html new file mode 100644 index 000000000..0df0072a4 --- /dev/null +++ b/src/content/structured/patterns/components/top-nav-patterns/javascript/web-components/top-nav-page-header-pattern.html @@ -0,0 +1,178 @@ + + + + Home + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Create coffee + + Filter coffee +
+ + Submit +
+ + +
+
Replace this div
+
+ + This app was built using the UK + Intelligence Community Design System (ICDS). + [footerLink] + [footerLink] + [footerLink] + [footerLink] + [footerLink] + + + + diff --git a/src/content/structured/patterns/components/top-nav-patterns/javascript/web-components/top-nav-pattern.html b/src/content/structured/patterns/components/top-nav-patterns/javascript/web-components/top-nav-pattern.html new file mode 100644 index 000000000..4bb44e79e --- /dev/null +++ b/src/content/structured/patterns/components/top-nav-patterns/javascript/web-components/top-nav-pattern.html @@ -0,0 +1,179 @@ + + + + Home + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Create coffee + + Filter coffee +
+ + Submit +
+ + +
+
Replace this div
+
+ + + This app was built using the UK + Intelligence Community Design System (ICDS). + [footerLink] + [footerLink] + [footerLink] + [footerLink] + [footerLink] + + + + diff --git a/src/content/structured/patterns/components/top-nav-patterns/typescript/react/index.css b/src/content/structured/patterns/components/top-nav-patterns/typescript/react/index.css new file mode 100644 index 000000000..9ae431f74 --- /dev/null +++ b/src/content/structured/patterns/components/top-nav-patterns/typescript/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/src/content/structured/patterns/components/top-nav-patterns/typescript/react/top-nav-mega-menu-pattern.tsx b/src/content/structured/patterns/components/top-nav-patterns/typescript/react/top-nav-mega-menu-pattern.tsx new file mode 100644 index 000000000..641458b4b --- /dev/null +++ b/src/content/structured/patterns/components/top-nav-patterns/typescript/react/top-nav-mega-menu-pattern.tsx @@ -0,0 +1,218 @@ +import React, { FC } 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 type { IcAlignment } from "@ukic/web-components"; + +import { mdiAccount, mdiCog, mdiPencil, mdiPlus } from "@mdi/js"; + +import "./index.css"; + +const TopNavMegaMenuPattern: FC = () => { + const alignment: IcAlignment = "center"; + let pageHeaderAlignment: IcAlignment | undefined; + // pageHeaderAlignment = "center"; + + return ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Create coffee + + + Filter coffee + +
+ + Submit +
+ + +
+
Replace this div
+
+ + + + This app was built using the UK{" "} + + Intelligence Community Design System (ICDS) + + . + + + [footerLink] + + + [footerLink] + + + [footerLink] + + + [footerLink] + + + [footerLink] + + {/*
+ + + Go to SIS website + + + + Go to MI5 website + + + + Go to GCHQ website + +
*/} + + + ); +}; + +export default TopNavMegaMenuPattern; diff --git a/src/content/structured/patterns/components/top-nav-patterns/typescript/react/top-nav-page-header-pattern.tsx b/src/content/structured/patterns/components/top-nav-patterns/typescript/react/top-nav-page-header-pattern.tsx new file mode 100644 index 000000000..a90857a72 --- /dev/null +++ b/src/content/structured/patterns/components/top-nav-patterns/typescript/react/top-nav-page-header-pattern.tsx @@ -0,0 +1,190 @@ +import React, { FC } from "react"; + +import { + IcBreadcrumbGroup, + IcBreadcrumb, + IcButton, + IcChip, + IcClassificationBanner, + IcFooter, + IcFooterLink, + IcLink, + IcNavigationItem, + IcPageHeader, + IcSectionContainer, + IcTopNavigation, + IcNavigationButton, + IcSearchBar, + IcTextField, + IcTypography, + SlottedSVG, +} from "@ukic/react"; +import type { IcAlignment } from "@ukic/web-components"; + +import { mdiAccount, mdiCog, mdiPencil, mdiPlus } from "@mdi/js"; + +import "./index.css"; + +const TopNavPageHeaderPattern: FC = () => { + const alignment: IcAlignment = "center"; + let pageHeaderAlignment: IcAlignment | undefined; + // pageHeaderAlignment = "center"; + + return ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Create coffee + + + Filter coffee + +
+ + Submit +
+ + +
+
Replace this div
+
+ + + + This app was built using the UK{" "} + + Intelligence Community Design System (ICDS) + + . + + + [footerLink] + + + [footerLink] + + + [footerLink] + + + [footerLink] + + + [footerLink] + + + + ); +}; + +export default TopNavPageHeaderPattern; diff --git a/src/content/structured/patterns/components/top-nav-patterns/typescript/react/top-nav-pattern.tsx b/src/content/structured/patterns/components/top-nav-patterns/typescript/react/top-nav-pattern.tsx new file mode 100644 index 000000000..3c5cc329a --- /dev/null +++ b/src/content/structured/patterns/components/top-nav-patterns/typescript/react/top-nav-pattern.tsx @@ -0,0 +1,144 @@ +import React, { FC } from "react"; + +import { + IcClassificationBanner, + IcFooter, + IcFooterLink, + IcLink, + IcNavigationItem, + IcSectionContainer, + IcTopNavigation, + IcNavigationButton, + IcSearchBar, + IcTypography, + SlottedSVG, +} from "@ukic/react"; +import type { IcAlignment } from "@ukic/web-components"; + +import { mdiAccount, mdiCog, mdiPencil } from "@mdi/js"; + +import "./index.css"; + +const TopNavPattern: FC = () => { + const alignment: IcAlignment = "center"; + + return ( + <> + + + + + + + + + + + + + + + + + + + + + + + + +
+
Replace this div
+
+ + + + This app was built using the UK{" "} + + Intelligence Community Design System (ICDS) + + . + + + [footerLink] + + + [footerLink] + + + [footerLink] + + + [footerLink] + + + [footerLink] + + + + ); +}; + +export default TopNavPattern;