diff --git a/packages/component-header-footer/src/header/components/Button/index.js b/packages/component-header-footer/src/header/components/Button/index.js index 1daf12413e..2b22c7b357 100644 --- a/packages/component-header-footer/src/header/components/Button/index.js +++ b/packages/component-header-footer/src/header/components/Button/index.js @@ -17,6 +17,7 @@ import { ButtonWrapper } from "./index.styles"; * @param {string} props.text - The text content to display inside the button * @param {string} [props.classes] - Additional CSS classes to apply to the button * @param {function} [props.onClick] - Event handler function called when the button is clicked + * @param {function} [props.onKeyDown] - Event handler function called when a key is pressed while the button is focused * @param {function} [props.onFocus] - Event handler function called when the button receives focus * @param {string|React.Component} [props.as] - The element type or component to render as * @returns {JSX.Element} The rendered button component @@ -27,6 +28,7 @@ const Button = ({ text, classes, onClick, + onKeyDown, onFocus, as, ...props @@ -35,8 +37,9 @@ const Button = ({ onClick(event) : undefined} - onFocus={onFocus ? event => onFocus(event) : undefined} + onClick={onClick} + onKeyDown={onKeyDown} + onFocus={onFocus} as={as} {...props} > 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 0a189ac64a..a36034ebb9 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 @@ -28,14 +28,15 @@ HeadingItem.propTypes = { }; const ButtonItem = ({ link, dropdownName, handleLinkEvent }) => ( -
  • +
    • + ); ButtonItem.propTypes = { @@ -74,11 +75,11 @@ LinkItem.propTypes = { * @typedef { import("../../../../core/models/types").Button } Button * @typedef {{ * dropdownName: string - * items: [object][] + * items: Array> * buttons: Button[] * classes?: string, * listId: string - * setItemOpened: Function + * opened: boolean * parentLink: React.RefObject | null * }} DropdownItemProps */ @@ -93,11 +94,22 @@ const DropdownItem = ({ buttons, classes, listId, - setItemOpened, + opened, parentLink, }) => { - const { breakpoint } = useAppContext(); - const isMega = items?.length > 2; + const { + breakpoint, + headerHeight, + setItemOpened, + setMobileMenuOpen, + mobileMenuOpen, + } = useAppContext(); + let cols = 0; + items.map(lists => { + cols += lists[0].span || 1; + }); + + const isMega = cols > 2; /** * @type {React.MutableRefObject} */ @@ -112,6 +124,16 @@ const DropdownItem = ({ setAlignedRight(elPosition > breakpointPosition); } }, []); + useEffect(() => { + if (opened && dropdownRef?.current?.parentElement) { + dropdownRef.current.parentElement.scrollIntoView( + /** @type {ScrollIntoViewOptions} */ { + behavior: "smooth", + block: "start", + } + ); + } + }, [dropdownRef, opened]); const stopPropagation = e => e.stopPropagation(); @@ -121,14 +143,13 @@ const DropdownItem = ({ const focusNextLink = () => { const nextLink = parentElement.nextElementSibling?.firstChild; - if (nextLink) nextLink.focus(); + if (typeof nextLink?.focus === "function") nextLink.focus(); }; const focusPrevLink = () => { const prevLink = parentElement.previousElementSibling?.firstChild; - if (prevLink) prevLink.focus(); + if (typeof prevLink?.focus === "function") prevLink.focus(); }; - stopPropagation(e); if (key === "ArrowDown") { @@ -137,17 +158,25 @@ const DropdownItem = ({ } else if (key === "ArrowUp") { e.preventDefault(); focusPrevLink(); - } else if (key === "Escape") { + } else if (key === "Escape" && opened) { setItemOpened(); - if (parentLink?.current) parentLink.current.focus(); + if (typeof parentLink?.current?.focus === "function") { + parentLink.current.focus(); + } + } else if (key === "Escape" && !opened && mobileMenuOpen) { + setMobileMenuOpen(false); } else if (key === "Enter" || key === " " || type === "click") { + // Single page apps do not leave the page on link click, + // so we need to manually close the menu and trigger the onClick event + setMobileMenuOpen(false); + setItemOpened(); link?.onClick?.(e); trackGAEvent({ ...LINK_DEFAULT_PROPS, text: link.text }); } }; const renderItem = (link, index) => { - const key = `${link.text}-${link.href || index}`; + const key = `${link.text}-${link.href}-${index}`; if (link.type === "heading") return ; if (link.type === "button") @@ -176,20 +205,68 @@ const DropdownItem = ({ isMega ? " mega" : "" }`} breakpoint={breakpoint} + headerHeight={headerHeight} >
    - {items?.map((item, index0) => { - const genKey = idGenerator(`dropdown-item-${index0}-`); - const key = genKey.next().value; - return ( -
      - {item.map((link, index) => renderItem(link, index))} -
    - ); - })} + <> + {items?.map((item, index0) => { + const genKey = idGenerator(`dropdown-item-${index0}-`); + const key = genKey.next().value; + return ( +
    + {(() => { + let currentUl = []; + const uls = []; + item.forEach((link, index) => { + if (link.type === "heading") { + if (currentUl.length > 0) { + uls.push(currentUl); + currentUl = []; + } + uls.push([link]); + } else if (link.type === "button") { + if (currentUl.length > 0) { + uls.push(currentUl); + currentUl = []; + } + uls.push([link]); + } else { + currentUl.push(link); + } + }); + + if (currentUl.length > 0) { + uls.push(currentUl); + } + + return uls.map((group, groupIndex) => { + const groupKey = `${key}-group-${groupIndex}`; + if (group.length === 1 && group[0].type === "heading") { + return renderItem(group[0], groupIndex); + } + if (group.length === 1 && group[0].type === "button") { + return renderItem(group[0], groupIndex); + } + return ( +
      + {group.map((link, index) => renderItem(link, index))} +
    + ); + }); + })()} +
    + ); + })} +
    {buttons && (
    @@ -213,19 +290,21 @@ const DropdownItem = ({ DropdownItem.propTypes = { dropdownName: PropTypes.string, items: PropTypes.arrayOf( - PropTypes.shape({ - text: PropTypes.string, - selected: PropTypes.bool, - onClick: PropTypes.func, - href: PropTypes.string, - }) + PropTypes.arrayOf( + PropTypes.shape({ + text: PropTypes.string, + selected: PropTypes.bool, + onClick: PropTypes.func, + href: PropTypes.string, + }) + ) ), buttons: PropTypes.arrayOf(PropTypes.shape(ButtonPropTypes)), classes: PropTypes.string, listId: PropTypes.string, + opened: PropTypes.bool, setItemOpened: PropTypes.func, parentLink: PropTypes.shape({ - focus: PropTypes.func, current: PropTypes.instanceOf(HTMLElement), }), }; diff --git a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/DropdownItem/index.styles.js b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/DropdownItem/index.styles.js index bd40e41c28..96ea1bc294 100644 --- a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/DropdownItem/index.styles.js +++ b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/DropdownItem/index.styles.js @@ -8,6 +8,7 @@ import { import { CLASS_NAMES } from "../../../../core/constants/classNames"; const DropdownWrapper = styled.div` + --gap: 2rem; position: fixed; background-color: ${ASU_WHITE}; border: 1px solid ${ASU_GRAY5}; @@ -19,9 +20,8 @@ const DropdownWrapper = styled.div` visibility: visible; } &.mega { - width: 100%; - left: 0; - margin-left: 0 !important; + width: min(1200px, 100%); + left: calc((100% - 1200px) / 2); } &.aligned-right:not(.mega) { position: absolute; @@ -30,31 +30,65 @@ const DropdownWrapper = styled.div` > .${CLASS_NAMES.DROPDOWN_CONTAINER} { max-width: 1200px; margin: 0 auto; + /* + max-height is calculated from + 100% view Height + minus header + minus 2rem padding + minus 4rem cta buttons - future we could add a ref to measure if needed + */ + max-height: calc( + 100vh - ${({ headerHeight }) => headerHeight}px - 2rem - 4rem + ); + overflow-y: auto; + overflow-x: hidden; display: flex; - justify-content: center; - padding: 2rem; - ul { - width: 16rem; - max-width: 282px; + justify-content: stretch; + + .${CLASS_NAMES.DROPDOWN_CONTAINER_COLUMN} { + --span: 1; /* component overrides using inline style */ + --col: 1; /* component overrides using inline style */ + width: calc(1200px / var(--cols) * var(--span)); + height: fit-content; + height: -webkit-fill-available; + padding: var(--gap); display: flex; flex-direction: column; + justify-content: flex-start; + row-gap: var(--gap); + &:not(:last-child) { - padding-right: 2rem; - margin-right: 2rem; border-right: 1px solid ${ASU_GRAY5}; } - .${CLASS_NAMES.UL_HEADING} { - margin-top: 0; - font-size: 1.5rem; - letter-spacing: -0.035em; - font-weight: 700; - text-align: left; - opacity: 1; - margin: 1rem 0; - line-height: calc(100% + 0.12em); + } + + .${CLASS_NAMES.UL_HEADING} { + margin-top: 0; + font-size: 1.5rem; + letter-spacing: -0.035em; + font-weight: 700; + text-align: left; + opacity: 1; + margin: 0; + margin-bottom: -1.5rem; + line-height: calc(100% + 0.12em); + } + ul { + --ul-gap: 1rem; + &:is(:last-child) { + flex-grow: 0; } + margin: 0; + width: calc(1200px / var(--cols, 1) * var(--span, 1) - var(--gap) * 2); + display: flex; + flex-direction: row; + column-gap: var(--ul-gap); + flex-wrap: wrap; .${CLASS_NAMES.NAV_LINK} { padding: 0; + flex-basis: calc( + (100% / var(--span)) - var(--ul-gap) * (var(--span) - 1) / var(--span) + ); a { width: 100%; display: inline-block; @@ -68,8 +102,9 @@ const DropdownWrapper = styled.div` } } & + .${CLASS_NAMES.NAV_BUTTON} { + width: 100%; margin-top: auto; - padding-top: 2rem; + padding-top: var(--gap); & + .${CLASS_NAMES.NAV_BUTTON} { margin-top: 1rem; } @@ -77,15 +112,23 @@ const DropdownWrapper = styled.div` } } } + + .${CLASS_NAMES.NAV_BUTTON} { + flex: 1 1; + display: inline-flex; + flex-direction: column; + justify-content: flex-end; + flex-wrap: nowrap; + width: fit-content; + } .${CLASS_NAMES.DROPDOWN_BUTTON_CONTAINER} { border-top: 1px solid ${ASU_GRAY5}; border-bottom: 1px solid ${ASU_GRAY5}; - margin-top: 1rem; > div { max-width: 1200px; margin: 0 auto; display: flex; - padding: 1rem 0; + padding: 1rem 2rem; } } @media (max-width: ${({ breakpoint }) => breakpoint}) { @@ -99,25 +142,33 @@ const DropdownWrapper = styled.div` } > .${CLASS_NAMES.DROPDOWN_CONTAINER} { max-width: 100%; - padding: 1rem 2rem; + max-height: unset; + overflow-y: unset; + overflow-x: unset; flex-direction: column; + + .${CLASS_NAMES.DROPDOWN_CONTAINER_COLUMN} { + width: 100%; + border-right: unset; + &:not(:first-child) { + padding-top: 0; + } + } ul { width: 100%; max-width: 100%; - padding: 0 1rem; - margin-bottom: 1rem; + padding: 0; &:not(:last-child) { - padding-right: 1rem; - margin: 0 0 1rem 0; border: none; } .${CLASS_NAMES.UL_HEADING} { font-size: 1.25rem; } .${CLASS_NAMES.NAV_BUTTON} { - padding-top: 1.5rem; + // padding-top: 1.5rem; } .${CLASS_NAMES.NAV_LINK} { + flex-basis: 100%; padding: 0 1rem; &:not(:last-child) { border-bottom: 1px solid ${ASU_GRAY5}; diff --git a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/NavItem/index.js b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/NavItem/index.js index 721a2beac9..0e2bf5d66c 100644 --- a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/NavItem/index.js +++ b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/NavItem/index.js @@ -68,33 +68,43 @@ const NavItem = ({ link, setItemOpened, itemOpened }) => { const clickRef = useRef(null); const parentLink = useRef(null); const opened = link.id === itemOpened; - const { breakpoint, expandOnHover, title } = useAppContext(); + const { + breakpoint, + expandOnHover, + title, + mobileMenuOpen, + setMobileMenuOpen, + } = useAppContext(); const isMobile = useIsMobile(breakpoint); - useEffect(() => { - const handleClickOutside = event => { - if (opened && !clickRef?.current?.contains(event.target)) { - setItemOpened(); - } - }; - - const handleFocusChange = () => { - requestAnimationFrame(() => { - const node = clickRef.current; - if (opened && node && !node.contains(document.activeElement)) { - setItemOpened(); - } - }); - }; + const handleClickOutside = event => { + if (opened && !clickRef?.current?.contains(event.target)) { + setItemOpened(); + } + }; - document.addEventListener("click", handleClickOutside, true); - document.addEventListener("focusin", handleFocusChange); + const handleFocusChange = () => { + requestAnimationFrame(() => { + const node = clickRef.current; + if (opened && node && !node.contains(document.activeElement)) { + setItemOpened(); + } + }); + }; + useEffect(() => { + if (opened) { + document.addEventListener("click", handleClickOutside, true); + document.addEventListener("focusin", handleFocusChange); + } else { + document.removeEventListener("click", handleClickOutside, true); + document.removeEventListener("focusin", handleFocusChange); + } return () => { document.removeEventListener("click", handleClickOutside, true); document.removeEventListener("focusin", handleFocusChange); }; - }, [opened]); + }, [opened, setItemOpened]); const renderNavLinks = useMemo(() => { if (link.type === "icon-home") { @@ -140,8 +150,16 @@ const NavItem = ({ link, setItemOpened, itemOpened }) => { }; const handleKeyDown = e => { - if (!link.items && link.href) { + if ( + !link.items && + (link.href || link.onClick) && + (e.key === "Enter" || e.key === " " || e.type === "click") + ) { trackGAEvent({ ...LINK_DEFAULT_PROPS, text: link.text }); + // Single page apps do not leave the page on link click, + // so we need to manually close the menu and trigger the onClick event + setMobileMenuOpen(false); + setItemOpened(); return; } const { key } = e; @@ -158,28 +176,35 @@ const NavItem = ({ link, setItemOpened, itemOpened }) => { if (navigableKeys.includes(key)) { e.preventDefault(); if (key === "Escape" && opened) { + if (typeof clickRef?.current?.focus === "function") { + clickRef.current.focus(); + } setItemOpened(); return; } + + if (key === "Escape" && !opened && mobileMenuOpen) { + setMobileMenuOpen(false); + return; + } // Handle Enter or Space key if (key === "Enter" || key === " ") { if (link.items) { - if (!expandOnHover && !isMobile) { - setItemOpened(); - } else if (isMobile) { - setItemOpened(); - } + // Regardless of state or props mobile/desktop/hover/click + // if the item has a dropdown, we want to toggle it on Enter/Space + setItemOpened(); } dispatchGAEvent(); link.onClick?.(e); } if (key === "ArrowDown" || key === "ArrowRight") { if (opened) { - const dropdownItems = document.querySelectorAll( + // Only need first matching item + const dropdownItem = document.querySelector( `.${getDropdownClass(link.id)} li.${CLASS_NAMES.NAV_LINK} a` ); - if (dropdownItems.length) { - dropdownItems[0].focus(); + if (typeof dropdownItem?.focus === "function") { + dropdownItem.focus(); } } } @@ -241,8 +266,8 @@ const NavItem = ({ link, setItemOpened, itemOpened }) => { opened && CLASS_NAMES.OPENED )} listId={`dropdown-${link.id}`} - setItemOpened={setItemOpened} - parentLink={parentLink?.current} + opened={opened} + parentLink={parentLink} /> )} diff --git a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/NavItem/index.styles.js b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/NavItem/index.styles.js index 3d965f3780..dc1461a81c 100644 --- a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/NavItem/index.styles.js +++ b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/NavItem/index.styles.js @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { ASU_GRAY1, ASU_GOLD, ASU_GRAY4 } from "../../../../colors"; +import { ASU_GRAY1, ASU_GOLD, ASU_GRAY4, ASU_WHITE } from "../../../../colors"; import { CLASS_NAMES } from "../../../../core/constants/classNames"; const NavItemWrapper = styled.li` @@ -16,6 +16,13 @@ const NavItemWrapper = styled.li` padding: 0.5rem 0.75rem; line-height: 1rem; color: ${ASU_GRAY1}; + + &[aria-expanded="true"] { + background-color: ${ASU_WHITE}; + position: sticky; + top: 0; + z-index: 1; + } &:after { transition: 0.5s cubic-bezier(0.19, 1, 0.19, 1); content: ""; diff --git a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/index.js b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/index.js index 05735ee9b1..99b5b8391a 100644 --- a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/index.js +++ b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/index.js @@ -14,12 +14,23 @@ export const BUTTON_ERROR_MESSAGE = "Header buttons cannot have both an onClick and an href property as this breaks accessibility. Please remove one"; const NavbarContainer = () => { - const { navTree, mobileNavTree, buttons, breakpoint } = useAppContext(); + const { + navTree, + mobileNavTree, + buttons, + breakpoint, + itemOpened, + setItemOpened, + } = useAppContext(); const isMobile = useIsMobile(breakpoint); - const [itemOpened, setItemOpened] = useState(undefined); const handleSetItemOpened = itemId => { - setItemOpened(prev => (itemOpened === itemId ? undefined : itemId)); + if (itemOpened === itemId) { + setItemOpened(() => undefined); + } else { + // Adding a slight delay so opening the dropdown is triggered after any close events have finished processing + setTimeout(() => setItemOpened(() => itemId), 1); + } }; const validateButton = button => { diff --git a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/index.styles.js b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/index.styles.js index 73546643ee..5013bcdbbb 100644 --- a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/index.styles.js +++ b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/index.styles.js @@ -24,8 +24,7 @@ const Wrapper = styled.nav` flex-direction: column; justify-content: flex-start; overflow-y: auto; - min-height: calc(100vh - 277px); - max-height: calc(100vh - 277px); + min-height: 0; > *:last-child { margin-bottom: min(75px, 15vw); } diff --git a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/index.test.js b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/index.test.js index afb0258ba8..552610da17 100644 --- a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/index.test.js +++ b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/index.test.js @@ -1,5 +1,5 @@ // @ts-check -import { render, fireEvent, cleanup } from "@testing-library/react"; +import { render, fireEvent, cleanup, waitFor } from "@testing-library/react"; import React from "react"; import { NavbarContainer } from "."; @@ -66,7 +66,9 @@ describe("#Navbar Container Component opened/closed on hover", () => { it("should open dropdown", () => { fireEvent.mouseEnter(navItems[0].parentElement); - expect(navItems[0].className).toContain("open-link"); + waitFor(() => { + expect(navItems[0].className).toContain("open-link"); + }); }); it("should close dropdown", () => { fireEvent.mouseEnter(navItems[0].parentElement); diff --git a/packages/component-header-footer/src/header/components/HeaderMain/Title/index.styles.js b/packages/component-header-footer/src/header/components/HeaderMain/Title/index.styles.js index 3910c0fc13..1c1e59b1f5 100644 --- a/packages/component-header-footer/src/header/components/HeaderMain/Title/index.styles.js +++ b/packages/component-header-footer/src/header/components/HeaderMain/Title/index.styles.js @@ -11,7 +11,7 @@ const TitleWrapper = styled.div` line-height: 1; font-size: 1rem; font-weight: 700; - padding: 0 2rem 1.5rem 2rem; + padding: 0 2rem 1rem 2rem; letter-spacing: -1px; display: inline-block; margin: 0; diff --git a/packages/component-header-footer/src/header/components/HeaderMain/index.js b/packages/component-header-footer/src/header/components/HeaderMain/index.js index e6c731fecb..ccc967e9c7 100644 --- a/packages/component-header-footer/src/header/components/HeaderMain/index.js +++ b/packages/component-header-footer/src/header/components/HeaderMain/index.js @@ -1,6 +1,6 @@ // @ts-check import { trackGAEvent } from "@asu/shared"; -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { faTimes } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import mobileMenuSearchIcon from "../../../../public/assets/icons/menu-search-icon.png?inline"; @@ -17,14 +17,38 @@ import { Search } from "../UniversalNavbar/Search"; import { Title } from "./Title"; const HeaderMain = () => { - const { breakpoint, isPartner, hasNavigation } = useAppContext(); - const [mobileMenuOpen, setMobileMenuOpen] = useState(false); + const { + breakpoint, + isPartner, + hasNavigation, + itemOpened, + setItemOpened, + mobileMenuOpen, + setMobileMenuOpen, + mobileMenuToggleRef, + headerTop, + } = useAppContext(); const isMobile = useIsMobile(breakpoint); const handleChangeMenuVisibility = () => { setMobileMenuOpen(prevState => !prevState); }; + useEffect(() => { + document.body.style.overflow = + mobileMenuOpen || itemOpened !== undefined ? "hidden" : "unset"; + + // Clean up function to re-enable scrolling + return () => { + document.body.style.overflow = "unset"; + }; + }, [mobileMenuOpen, itemOpened, isMobile]); + + useEffect(() => { + setMobileMenuOpen(false); + setItemOpened(); + }, [isMobile]); + const handleClickMobileMenu = () => { handleChangeMenuVisibility(); trackGAEvent({ @@ -39,18 +63,20 @@ const HeaderMain = () => { <> {!isMobile && } {/* @ts-ignore */} - +
    {!isPartner && }
    ); diff --git a/packages/unity-react-core/src/components/Button/Button.stories.jsx b/packages/unity-react-core/src/components/Button/Button.stories.jsx index 6880a26c2a..8926f09781 100644 --- a/packages/unity-react-core/src/components/Button/Button.stories.jsx +++ b/packages/unity-react-core/src/components/Button/Button.stories.jsx @@ -281,45 +281,65 @@ export const AllVariants = () => (

    UDS Button Variants

    +
    @@ -332,4 +352,3 @@ AllVariants.parameters = { }, controls: { disable: true }, }; - diff --git a/packages/unity-react-core/src/components/CardArrangement/CardArrangement.stories.jsx b/packages/unity-react-core/src/components/CardArrangement/CardArrangement.stories.jsx index 36dd2ba001..03509e869a 100644 --- a/packages/unity-react-core/src/components/CardArrangement/CardArrangement.stories.jsx +++ b/packages/unity-react-core/src/components/CardArrangement/CardArrangement.stories.jsx @@ -5,7 +5,6 @@ import { CardArrangement } from "./CardArrangement"; const img1 = imageAny(); - export default { title: "Components/Card Arrangement", component: CardArrangement, @@ -198,25 +197,28 @@ const imageCards = [ src: img1, alt: "Image card 1", captionTitle: "Image Card One", - caption: "This is the body content for the first image card with dropshadow and with cardLink prop provided. Card acts as anchor/link", + caption: + "This is the body content for the first image card with dropshadow and with cardLink prop provided. Card acts as anchor/link", border: true, dropShadow: true, cardLink: "https://example.com", - title: "example" + title: "example", }, { type: "image", src: img1, alt: "Image card 2", captionTitle: "Image Card Two", - caption: "This is the body content for the second image card with no border", + caption: + "This is the body content for the second image card with no border", }, { type: "image", src: img1, alt: "Image card 3", captionTitle: "Image Card Three", - caption: "This is the body content for the third image card with no drop shadow.", + caption: + "This is the body content for the third image card with no drop shadow.", border: true, dropShadow: false, }, diff --git a/packages/unity-react-core/src/components/ContentSpotlight/ContentSpotlight.stories.jsx b/packages/unity-react-core/src/components/ContentSpotlight/ContentSpotlight.stories.jsx index 899824a178..997002d842 100644 --- a/packages/unity-react-core/src/components/ContentSpotlight/ContentSpotlight.stories.jsx +++ b/packages/unity-react-core/src/components/ContentSpotlight/ContentSpotlight.stories.jsx @@ -1,7 +1,7 @@ // @ts-check import React from "react"; import { ContentSpotlight } from "./ContentSpotlight"; -import {imageName} from "@asu/shared"; +import { imageName } from "@asu/shared"; export default { title: "Components/ContentSpotlight",