diff --git a/packages/component-header-footer/README.md b/packages/component-header-footer/README.md index 8dd4427fc3..2d1fa31d3b 100644 --- a/packages/component-header-footer/README.md +++ b/packages/component-header-footer/README.md @@ -1,21 +1,13 @@ # ASU Header -ASU Web Standards-based implementation of global header. +ASU Web Standards-based implementation of global header and footer. ## CLI Commands ``` bash # add component-footer -yarn add @asu/component-header - - -# run storybook -yarn storybook - -# build for production with minification -yarn build - -# run tests -yarn test +yarn add @asu/component-header-footer +# or if you use npm +npm install @asu/component-header-footer ``` @@ -29,13 +21,13 @@ yarn test ### Default import ```JAVASCRIPT - import { ASUHeader } from '@asu/component-header@dev' + import { ASUHeader, ASUFooter } from '@asu/component-header-footer' ``` ### Aliased import ```JAVASCRIPT - import { ASUHeader as Header } from '@asu/component-header@dev' + import { ASUHeader as Header, ASUFooter as Footer } from '@asu/component-header-footer' ``` ### Import for use in HTML page -You can find an example of how to set `ASUHeader` props [here](/packages/component-header/examples/global-header.html) +You can find an example of how to set `ASUHeader` props for use in a browser [here](/packages/component-header/examples/global-header.html) diff --git a/packages/component-header-footer/examples/global-header.html b/packages/component-header-footer/examples/global-header.html index c6bd01794a..6ff8d6de5e 100644 --- a/packages/component-header-footer/examples/global-header.html +++ b/packages/component-header-footer/examples/global-header.html @@ -11,8 +11,7 @@ - - + @@ -23,130 +22,131 @@

Scroll section

+ - + diff --git a/packages/static-site/src/pages/HeaderGuide.tsx b/packages/static-site/src/pages/HeaderGuide.tsx index 714323dfc4..2e15fc34ab 100644 --- a/packages/static-site/src/pages/HeaderGuide.tsx +++ b/packages/static-site/src/pages/HeaderGuide.tsx @@ -1,113 +1,105 @@ -import {Link} from "react-router-dom"; +import { Link } from "react-router-dom"; import { PagePaths } from "~/routes/config"; import { getRelativePath } from "~/utils/baseUrl"; const HeaderGuide = () => { return (
-
-
+
+

ASU Header Guide

-

Testing data shows that users see asu.edu as one website. The ASU global header - should appear on every subdomain and page of asu.edu to ensure and optimal - user experience as they navigate across asu.edu.

+

+ Testing data shows that users see asu.edu as one website. The ASU + global header should appear on every subdomain and page of asu.edu + to ensure and optimal user experience as they navigate across + asu.edu. +

The ASU Header is delivered in five ways

Components Header

-

Preferred: Intended for use within platforms and applications, this - header variant is built using React as a peer dependency and can be implemented - using the - @asu/component-header package. This version of - the header does not bundle Cookie Consent or Google Tag Manager. - Site developers using this header must implement Cookie Consent - using the @asu/component-cookie-consent package themselves for - public-facing sites. Similarly, site developers should add Google - Tag Manager code snippets to their sites. See below for guidance in - both cases and instructions for installing packages.

- -

Components Library Header - deprecated and no longer maintained

-

Deprecated in favor of Component Header: - Intended for use within platforms and applications, this - header variant is built using Preact and can be implemented - using the - @asu/components-library package. This version of - the header does not bundle Cookie Consent or Google Tag Manager. - Site developers using this header must implement Cookie Consent - using the @asu/component-cookie-consent package themselves for - public-facing sites. Similarly, site developers should add Google - Tag Manager code snippets to their sites. See below for guidance in - both cases and instructions for installing packages.

- -

ASUThemes component header - deprecated and no longer maintained

-

The ASU Web Standards 2.0 header is made available through - ASUThemes for use in ASU enterprise apps. It is no longer - maintained and sites should transition to use of another option. - This option is an alternative packaging of the deprecated - Components Library header. Note: this version of the header bundles - the ASU Cookie Consent but does not provide Google Tag Manager - code. Read below about how to implement GTM on enterprise sites. +

+ Preferred: Intended for use within platforms and + applications, this header variant is built using React as a peer + dependency and can be implemented using the{" "} + + @asu/component-header-footer + {" "} + package. This version of the header does not bundle Cookie Consent + or Google Tag Manager. Site developers using this header should read + the{" "} + GTM and Data Layer guide

+

ASUThemes component header - No longer available

+

Integrated CMS header modules and plugins

-

CMS modules and plugins providing the ASU header should implement - it using the - @asu/components-header package and should also - bundle the Component Cookie Consent component, and Google Tag - Manager code. Modules and plugins should provide configurability so - that Cookie Consent can be disabled for sites that are not - public-facing, and configurability so GTM can be disabled and so - multiple Google Tag Manager IDs may be used. Additional GTM IDs - should be additive and not overwrite the ASU Universal GTM ID. - Header modules and plugins are to be shipped with their respective - CMS platform distributions.

+

+ CMS modules and plugins providing the ASU header should implement it + using the{" "} + + @asu/component-header-footer + {" "} + package and should also implement the Google Tag Manager code. + Modules and plugins should provide configurability so that Cookie + Consent can be disabled for sites that are not public-facing, and + configurability so GTM can be disabled and so multiple Google Tag + Manager IDs may be used. Additional GTM IDs should be additive and + not overwrite the ASU Universal GTM ID. Header modules and plugins + are to be shipped with their respective CMS platform distributions. +

Unity Bootstrap Theme header

-

Primarily used as a reference point, the Bootstrap header - provided via the - @asu/unity-bootstrap-theme package is a plain HTML and - CSS Web Standards 2 header implementation built without embedded - components for Cookie Consent and Google Tag Manager. Site - developers using this header must implement Component Cookie Consent - using the @asu/component-cookie-consent package themselves for - public-facing sites. Similarly, site developers should add Google - Tag Manager code snippets to their sites. See below for guidance - in both cases.

+

+ Primarily used as a reference point, the Bootstrap header provided + via the{" "} + + @asu/unity-bootstrap-theme + {" "} + package is a plain HTML and CSS Web Standards 2 header + implementation built without embedded components for Cookie Consent + and Google Tag Manager. Site developers should add Google Tag + Manager code snippets to their sites. See{" "} + GTM info +

Notes on additional requirements for sites using the header

-

In addition to the header, ASU sites must, as a general rule - implement the Web Standards 2 Cookie Consent component for GDPR - compliance and include appropriate Google Tag Manager code. Read - further for options and guidance on how to implement these in your - application or site.

- -

Cookie Consent (GDPR compliance)

-

Before implementing Cookie Consent yourself, please review the - options for obtaining the ASU Header. Some options provide the - Cookie Consent component automatically bundled.

- -

If you need to install the Cookie Consent component yourself, - please see the section "Installing Unity components from - the Unity package registry."

+

+ In addition to the header, ASU sites must, as a general rule also + include the GTM code snippet in their site. +

Google Tag Manager (GTM)

-

See the Google Tag Manager (GTM) and Data - Layer page for details on using Google Tag Manager in your site - or application.

+

+ See the{" "} + + Google Tag Manager (GTM) and Data Layer + {" "} + page for details on using Google Tag Manager in your site or + application. +

Installing Unity components from the Unity package registry

-

- Learn how to use the private package registry and begin using - Unity packages in your ASU site or application. - Visit the page for the @asu package you wish to use to - find further instructions on how to install and - implement the package for your site or application.

- +

+ + Learn how to use the private package registry + {" "} + and begin using Unity packages in your ASU site or application.{" "} + + Visit the page for the @asu package you wish to use + {" "} + to find further instructions on how to install and implement the + package for your site or application. +

-
+
); };