element where the footer should be either hydrated or rendered.
- * @property {object} props - Properties to initialize the footer with.
- * Should only be set to true if the footer has been completely rendered server-side.
- */
-const RenderReact = (component, props, target) => {
- const root = createRoot(target);
- root.render(React.createElement(component, props));
-};
-
-/**
- * @param {ComponentProps} props
- */
-const initASUFooter = ({ targetSelector, props }) => {
- RenderReact(ASUFooter, props, document.querySelector(targetSelector));
-};
-
-export { initASUFooter };
diff --git a/packages/component-footer/src/footer.js b/packages/component-footer/src/footer.js
deleted file mode 100644
index 71393c8927..0000000000
--- a/packages/component-footer/src/footer.js
+++ /dev/null
@@ -1,50 +0,0 @@
-// @ts-check
-import { trackReactComponent } from "@asu/shared";
-import { shape } from "prop-types";
-import React, { useEffect } from "react";
-
-import { Social, Legal, Innovation, Contact } from "./components";
-
-const Base = () => {
- return (
- <>
-
-
-
- );
-};
-
-/**
- * @param {import("./core/models/types").ASUFooter} props
- * @returns {JSX.Element}
- */
-const ASUFooter = ({ social, contact }) => {
- useEffect(() => {
- if (typeof window !== "undefined") {
- trackReactComponent({
- packageName: "component-footer",
- component: "Component Footer",
- type: "NA",
- configuration: {
- social,
- contact,
- },
- });
- }
- }, []);
-
- return (
-
- );
-};
-
-ASUFooter.propTypes = {
- social: shape(Social.propTypes),
- contact: shape(Contact.propTypes),
-};
-
-export { ASUFooter };
diff --git a/packages/component-footer/src/footer.stories.js b/packages/component-footer/src/footer.stories.js
deleted file mode 100644
index 67561799f8..0000000000
--- a/packages/component-footer/src/footer.stories.js
+++ /dev/null
@@ -1,255 +0,0 @@
-import React from "react";
-
-import endorsedLogo from "./assets/images/endorsedLogo.png";
-import { ASUFooter } from "./footer";
-
-export default {
- title: "UDS/ASU Footer",
- component: ASUFooter,
-};
-
-const Template = args =>
;
-
-export const Default = Template.bind({});
-Default.args = {};
-
-export const UnitLogo = Template.bind({});
-UnitLogo.args = {
- social: {
- logoUrl: "https://www.asu.edu",
- unitLogo: endorsedLogo,
- mediaLinks: {
- facebook: "https://facebook.com",
- twitter: "https://twitter.com/?lang=en",
- instagram: "https://instagram.com",
- linkedIn: "https://www.linkedin.com/",
- youtube: "https://www.youtube.com/",
- },
- },
-};
-
-export const OneColumnNoLinks = Template.bind({});
-OneColumnNoLinks.args = {
- contact: {
- title: "No props passed should omit the button and the contact link",
- },
-};
-
-export const OneColumnNoLogo = Template.bind({});
-OneColumnNoLogo.args = {
- contact: {
- title: "Complete Name of College, School or Unit Title Should Go Here",
- contactLink: "#",
- contributionLink: "#",
- },
-};
-
-export const OneColumn = Template.bind({});
-OneColumn.args = {
- ...UnitLogo.args,
- ...OneColumnNoLogo.args,
-};
-
-export const TwoColumns = Template.bind({});
-TwoColumns.args = {
- ...OneColumn.args,
- contact: {
- ...OneColumn.args.contact,
- columns: [
- {
- title: "Column Two",
- links: [
- {
- url: "#",
- title: "link",
- text: "Biological and Health Systems Computing",
- },
- {
- url: "#",
- title: "link",
- text: "Informatics and Decision Systems Electrical",
- },
- {
- url: "#",
- title: "link",
- text: "Computer and Energy Matter",
- },
- {
- url: "#",
- title: "link",
- text: "Transport and Energy Sustainability and the Built Environment",
- },
- {
- url: "#",
- title: "link",
- text: "The Polytechnic School",
- },
- ],
- },
- ],
- },
-};
-
-export const ThreeColumns = Template.bind({});
-ThreeColumns.args = {
- ...TwoColumns.args,
- contact: {
- ...TwoColumns.args.contact,
- columns: [
- ...TwoColumns.args.contact.columns,
- {
- title: "Column Three",
- links: [
- {
- url: "#",
- title: "link",
- text: "Biological and Health Systems Computing",
- },
- {
- url: "#",
- title: "link",
- text: "Informatics and Decision Systems Electrical",
- },
- {
- url: "#",
- title: "link",
- text: "Computer and Energy Matter",
- },
- {
- url: "#",
- title: "link",
- text: "Transport and Energy Sustainability and the Built Environment",
- },
- {
- url: "#",
- title: "link",
- text: "The Polytechnic School",
- },
- ],
- },
- ],
- },
-};
-
-export const FourColumns = Template.bind({});
-FourColumns.args = {
- ...ThreeColumns.args,
- contact: {
- ...ThreeColumns.args.contact,
- columns: [
- ...ThreeColumns.args.contact.columns,
- {
- title: "Column Four",
- links: [
- {
- url: "#",
- title: "link",
- text: "Biological and Health Systems Computing",
- },
- {
- url: "#",
- title: "link",
- text: "Informatics and Decision Systems Electrical",
- },
- {
- url: "#",
- title: "link",
- text: "Computer and Energy Matter",
- },
- {
- url: "#",
- title: "link",
- text: "Transport and Energy Sustainability and the Built Environment",
- },
- {
- url: "#",
- title: "link",
- text: "The Polytechnic School",
- },
- ],
- },
- ],
- },
-};
-
-const FiveColumns = Template.bind({});
-FiveColumns.args = {
- ...FourColumns.args,
- contact: {
- ...FourColumns.args.contact,
- columns: [
- ...FourColumns.args.contact.columns,
- {
- title: "Column Five",
- links: [
- {
- url: "#",
- title: "link",
- text: "Biological and Health Systems Computing",
- },
- {
- url: "#",
- title: "link",
- text: "Informatics and Decision Systems Electrical",
- },
- {
- url: "#",
- title: "link",
- text: "Computer and Energy Matter",
- },
- {
- url: "#",
- title: "link",
- text: "Transport and Energy Sustainability and the Built Environment",
- },
- {
- url: "#",
- title: "link",
- text: "The Polytechnic School",
- },
- ],
- },
- ],
- },
-};
-
-export const SixColumns = Template.bind({});
-SixColumns.args = {
- ...FiveColumns.args,
- contact: {
- ...FiveColumns.args.contact,
- columns: [
- ...FiveColumns.args.contact.columns,
- {
- title: "Column Six",
- links: [
- {
- url: "#",
- title: "link",
- text: "Biological and Health Systems Computing",
- },
- {
- url: "#",
- title: "link",
- text: "Informatics and Decision Systems Electrical",
- },
- {
- url: "#",
- title: "link",
- text: "Computer and Energy Matter",
- },
- {
- url: "#",
- title: "link",
- text: "Transport and Energy Sustainability and the Built Environment",
- },
- {
- url: "#",
- title: "link",
- text: "The Polytechnic School",
- },
- ],
- },
- ],
- },
-};
diff --git a/packages/component-footer/src/header.test.js b/packages/component-footer/src/header.test.js
deleted file mode 100644
index 9ffeb94a3c..0000000000
--- a/packages/component-footer/src/header.test.js
+++ /dev/null
@@ -1,66 +0,0 @@
-// @ts-check
-import { render, cleanup } from "@testing-library/react";
-import React from "react";
-
-import { ASUFooter } from ".";
-
-import { completeState, emptyState } from "../__mocks__/data/props-mock";
-
-const renderFooter = props => {
- return render(
);
-};
-
-describe("#ASU Footer", () => {
- /** @type {import("@testing-library/react").RenderResult} */
- let component;
-
- beforeEach(() => {
- component = renderFooter(completeState);
- });
- afterAll(cleanup);
-
- it("should define component", () => {
- expect(component).toBeDefined();
- });
-
- const cases = [
- [`Social`, `social`],
- [`Contact`, `contact`],
- [`Innovation`, `innovation`],
- [`Legal`, `legal`],
- ];
-
- test.each(cases)("should %p section be defined", (_, testId) =>
- expect(component.queryByTestId(testId)).toBeInTheDocument()
- );
-});
-
-describe("#ASU Footer without social and contact", () => {
- /** @type {import("@testing-library/react").RenderResult} */
- let component;
-
- beforeEach(() => {
- component = renderFooter(emptyState);
- });
- afterAll(cleanup);
-
- it("should define component", () => {
- expect(component).toBeDefined();
- });
-
- const positiveCases = [
- [`Innovation`, `innovation`],
- [`Legal`, `legal`],
- ];
- const negativeCases = [
- [`Social`, `social`],
- [`Contact`, `contact`],
- ];
-
- test.each(positiveCases)("should %p section be defined", (_, testId) =>
- expect(component.queryByTestId(testId)).toBeInTheDocument()
- );
- test.each(negativeCases)("should %p section not be defined", (_, testId) =>
- expect(component.queryByTestId(testId)).not.toBeInTheDocument()
- );
-});
diff --git a/packages/component-footer/src/index.js b/packages/component-footer/src/index.js
deleted file mode 100644
index 569582a03c..0000000000
--- a/packages/component-footer/src/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { initASUFooter } from "./core";
-export { ASUFooter } from "./footer";
diff --git a/packages/component-footer/types/main.d.ts b/packages/component-footer/types/main.d.ts
deleted file mode 100644
index e416e31436..0000000000
--- a/packages/component-footer/types/main.d.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from "react";
-
-export interface Link {
- url: string;
- title: string;
- text: string;
-}
-
-export interface Column {
- title: string;
- links: Link[];
-}
-
-export interface Social {
- logoUrl: string;
- unitLogo: string;
- mediaLinks?: {
- facebook?: string,
- twitter?: string,
- instagram?: string,
- linkedIn?: string,
- youtube?: string
- };
-}
-
-export interface Contact {
- title: string;
- contactLink: string;
- contributionLink?: string;
- columns?: Column[];
-}
-
-export interface AsuFooterProps{
- social: Social;
- contact: Contact;
-}
-
-export const ASUFooter: React.FunctionComponent
diff --git a/packages/component-footer/vite.config.js b/packages/component-footer/vite.config.js
deleted file mode 100644
index c6782750ab..0000000000
--- a/packages/component-footer/vite.config.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { defineConfig, transformWithEsbuild } from "vite";
-import { resolve } from "path";
-import react from "@vitejs/plugin-react";
-import pkg from './package.json';
-
-export default defineConfig({
- build: {
- lib: {
- entry: resolve(__dirname, "src/index.js"),
- name: "AsuFooter",
- formats: ["es", "cjs", "umd"],
- fileName: (format) => `asuFooter.${format}.js`,
- },
- rollupOptions: {
- input: resolve(__dirname, "src/index.js"),
- external: [...Object.keys(pkg.peerDependencies)],
- output: {
- globals: {
- "react": "React",
- "react-dom": "ReactDOM"
- },
- },
- },
- minify: true,
- cssCodeSplit: false,
- },
- esbuild: {
- legalComments: 'none',
- keepNames: false,
- },
- define: {
- process: {env: {NODE_ENV: process.env.NODE_ENV}},
- global: {}
- },
- plugins: [
- react({
- jsxRuntime: "automatic",
- }),
- {
- name: "treat-js-files-as-jsx",
- async transform(code, id) {
- if (!id.match(/src\/.*\.js$/)) return null;
-
- return transformWithEsbuild(code, id, {
- loader: "jsx",
- jsx: "automatic",
- });
- },
- },
- ],
-});
diff --git a/packages/component-header-footer/.storybook/main.js b/packages/component-header-footer/.storybook/main.js
index 13e1ac928f..1b880bb6be 100644
--- a/packages/component-header-footer/.storybook/main.js
+++ b/packages/component-header-footer/.storybook/main.js
@@ -1,18 +1,20 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+
+function getAbsolutePath(value) {
+ return dirname(fileURLToPath(import.meta.resolve(value)));
+}
+
const config = {
// staticDirs: ['../src/**/assets'],
addons: [
- "../../../.storybook-config",
- "../../../.storybook-config/dataLayerListener",
- "@storybook/addon-controls",
- "@storybook/addon-viewport",
- "@storybook/addon-a11y",
+ fileURLToPath(import.meta.resolve("../../../.storybook-config/index.js")),
+ fileURLToPath(import.meta.resolve("../../../.storybook-config/dataLayerListener/index.js")),
+ getAbsolutePath("@storybook/addon-a11y"),
],
stories: ["../src/**/*.stories.js"],
- core: {
- builder: '@storybook/builder-vite'
- },
framework: {
- name: "@storybook/react-vite",
+ name: getAbsolutePath("@storybook/react-vite"),
},
};
diff --git a/packages/component-header-footer/.storybook/manager.js b/packages/component-header-footer/.storybook/manager.js
index 5676dcef41..6e996747a0 100644
--- a/packages/component-header-footer/.storybook/manager.js
+++ b/packages/component-header-footer/.storybook/manager.js
@@ -1,4 +1,4 @@
-import { addons } from "@storybook/addons";
+import { addons } from "storybook/manager-api";
addons.setConfig({
showRoots: true,
diff --git a/packages/component-header-footer/package.json b/packages/component-header-footer/package.json
index c01500ec2e..eaeda5424d 100644
--- a/packages/component-header-footer/package.json
+++ b/packages/component-header-footer/package.json
@@ -62,11 +62,10 @@
"@babel/plugin-syntax-jsx": "^7.14.5",
"@babel/plugin-transform-react-jsx": "^7.13.12",
"@babel/plugin-transform-runtime": "^7.14.5",
- "@storybook/addon-a11y": "^7.6.14",
- "@storybook/addon-essentials": "^7.6.14",
- "@storybook/addon-links": "^7.6.14",
- "@storybook/react": "^7.6.14",
- "@storybook/react-webpack5": "^7.6.14",
+ "@storybook/addon-a11y": "^10.0.0",
+ "@storybook/addon-docs": "^10.0.0",
+ "@storybook/react": "^10.0.0",
+ "@storybook/react-vite": "^10.0.0",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^16.0.0",
"@vitejs/plugin-react": "^4.3.1",
@@ -89,11 +88,11 @@
"sass-loader": "^11.1.0",
"semantic-release": "^22",
"semantic-release-monorepo": "^8.0.2",
- "storybook": "^7.6.14",
+ "storybook": "^10.0.0",
"style-loader": "^2.0.0",
"styled-components": "^5.3.0",
"terser-webpack-plugin": "^5.1.1",
- "vite": "^5.3.5",
+ "vite": "^6.0.0",
"webpack-filter-warnings-plugin": "^1.2.1",
"webpack-merge": "^5.8.0"
},
diff --git a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/DropdownItem/index.js b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/DropdownItem/index.js
index c643d76ae7..0a189ac64a 100644
--- a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/DropdownItem/index.js
+++ b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/DropdownItem/index.js
@@ -19,7 +19,9 @@ const LINK_DEFAULT_PROPS = {
text: "",
};
-const HeadingItem = ({ text }) => {text}
;
+const HeadingItem = ({ text }) => (
+ {text}
+);
HeadingItem.propTypes = {
text: PropTypes.string,
@@ -175,7 +177,10 @@ const DropdownItem = ({
}`}
breakpoint={breakpoint}
>
-