@access-ci/ui

ACCESS CI User Interface Components

This library provides user interface components for ACCESS CI websites. The components are rendered using the shadow DOM so that their styles are isolated from the rest of the site.

Prerequisites

Sites using ACCESS user interface components should include the Archivo font family:

<link
  rel="stylesheet"
  id="google-font-archivo-css"
  href="https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,70,400;0,100,400;0,100,500;0,100,600;0,100,700;0,100,800;1,100,400&amp;display=swap"
  media="all"
/>

Components

The library includes functions for rendering common ACCESS user interface components:

• universalMenus: Universal navigation menus
• header: Logo header
• siteMenus: Site-specific navigation menus
• breadcrumbs: Breadcrumb navigation
• tableOfContents: Page table of contents
• footerMenus: Site-specific navigation menus above the footer
• footer: Universal footer
• resourceCatalog: ACCESS resource catalog
• qaBot: Question/answer bot

Example

<div id="universal-menus"></div>
<div id="header"></div>
<div id="site-menus"></div>
<div id="breadcrumbs" data-page-title="Page Title"></div>
<div id="main" class="container">
  <div id="body">
    <h1>Page Title</h1>
    <h2>First Section</h2>
    <h2>Second Section</h2>
    <h2>Third Section</h2>
  </div>
  <div id="table-of-contents"></div>
</div>
<div id="footer-menus"></div>
<div id="footer"></div>
<div id="qa-bot"></div>
<script type="module">
  import {
    breadcrumbs,
    footer,
    footerMenus,
    header,
    qaBot,
    siteMenus,
    tableOfContents,
    universalMenuItems,
    universalMenus,
  } from "https://unpkg.com/@access-ci/ui@0.20.10/dist/access-ci-ui.js";

  const siteItems = [
    {
      name: "One",
      items: [
        {
          name: "Item A",
          href: "/one/a",
        },
        {
          name: "Item B",
          href: "/one/b",
        },
        {
          name: "Item C",
          href: "/one/c",
        },
      ],
    },
    {
      name: "Two",
      items: [
        {
          name: "Item A",
          href: "/two/a",
        },
        {
          name: "Item B",
          href: "/two/b",
        },
      ],
    },
    {
      name: "Three",
      href: "/three",
    },
  ];

  universalMenus({
    loginUrl: "/login",
    logoutUrl: "/logout",
    siteName: "Allocations",
    target: document.getElementById("universal-menus"),
  });

  header({
    siteName: "Allocations",
    target: document.getElementById("header"),
  });

  siteMenus({
    items: siteItems,
    siteName: "Allocations",
    target: document.getElementById("site-menus"),
  });

  // Breadcrumbs example — adapt items to your site's navigation structure
  const breadcrumbTarget = document.getElementById("breadcrumbs");
  const pageTitle = breadcrumbTarget.dataset.pageTitle;
  const breadcrumbItems = [
    { name: "Allocations", href: pageTitle ? "/" : null },
  ];
  if (pageTitle) breadcrumbItems.push({ name: pageTitle });
  breadcrumbs({
    items: breadcrumbItems,
    target: breadcrumbTarget,
  });

  tableOfContents({
    headings: document.querySelectorAll("#body h1, #body h2"),
    target: document.getElementById("table-of-contents"),
  });

  footerMenus({
    items: siteItems,
    siteName: "Allocations",
    target: document.getElementById("footer-menus"),
  });

  footer({ target: document.getElementById("footer") });

  // Detect login state via ACCESS SSO cookie
  const isLoggedIn = document.cookie.split("; ").includes("SESSaccesscisso=1")

  // User info is typically provided by your CMS, something like this:
  const { email, name, accessId } = window.cmsSettings?.currentUser || {};

  qaBot({
    target: document.getElementById("qa-bot"),
    apiKey: "my-api-key",
    isLoggedIn: isLoggedIn,
    userEmail: email,
    userName: name,
    accessId: accessId,
    loginUrl: "/login",
    // Optional: on a resource's documentation page, scope the bot to that
    // resource by passing its slug. The bot frames its answers around the
    // resource. Omit (as below) for the general ACCESS assistant.
    // resourceContext: "delta",
    onAnalyticsEvent: (event) => {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push(event);
    },
  });
</script>