WIP: DEMO branch with css fixes

packages/ui/src/common/Accordion/Accordion.tsx

@@ -22,19 +22,19 @@
 /** @jsxImportSource @emotion/react */
 
 import { css } from '@emotion/react';
-import { ReactNode, useMemo, useState } from 'react';
+import { ReactNode, useEffect, useMemo, useState } from 'react';
 
 import AccordionItem from './AccordionItem';
 
 export type AccordionData = {
 	title: string;
-	openOnInit: boolean;
 	description?: string;
 	content: ReactNode;
 	schemaName: string;
 };
 export type AccordionProps = {
 	accordionItems: Array<AccordionData>;
+	collapseAll: boolean;
 };
 
 export type AccordionOpenState = {
@@ -93,10 +93,16 @@ const accordionStyle = css`
 	display: flex;
 	flex-direction: column;
 	gap: 24px;
+	cursor: pointer;
 `;
 
-const Accordion = ({ accordionItems }: AccordionProps) => {
-	const [openStates, setOpenStates] = useState<boolean[]>(accordionItems.map((item) => item.openOnInit));
+const Accordion = ({ accordionItems, collapseAll }: AccordionProps) => {
+	const [openStates, setOpenStates] = useState<boolean[]>(accordionItems.map(() => collapseAll));
+
+	useEffect(() => {
+		setOpenStates(accordionItems.map(() => collapseAll));
+	}, [collapseAll]);
+
 	const handleToggle = (index: number) => {
 		setOpenStates((prev) => prev.map((isOpen, i) => (i === index ? !isOpen : isOpen)));
 	};

packages/ui/src/common/Accordion/AccordionItem.tsx

@@ -47,11 +47,11 @@ const accordionItemStyle = (theme: Theme) => css`
 	overflow: hidden;
 	background-color: #ffffff;
 	box-shadow:
-		0 2px 6px rgba(70, 63, 63, 0.05),
+		0 2px 6px rgba(70, 63, 63, 0.3),
 		0 0 0 0.3px ${theme.colors.black};
 	&:hover {
 		box-shadow:
-			0 2px 6px rgba(70, 63, 63, 0.15),
+			0 2px 6px rgba(70, 63, 63, 0.5),
 			0 0 0 0.3px ${theme.colors.black};
 	}
 	transition: all 0.3s ease;
@@ -71,34 +71,35 @@ const accordionItemButtonStyle = (theme: Theme) => css`
 	display: flex;
 	border: none;
 	align-items: center;
-	color: ${theme.colors.accent_dark};
 	cursor: pointer;
-	${theme.typography?.button};
-	text-align: left;
 	background: transparent;
-	padding: 8px 0;
-	flex: 1;
+	padding: 8px 0px;
+`;
+const titleStyle = (theme: Theme) => css`
+	${theme.typography?.subtitleSecondary};
+	color: ${theme.colors.accent_dark};
+	text-align: left;
 `;
 
 const chevronStyle = (isOpen: boolean) => css`
 	transform: ${isOpen ? 'rotate(0deg)' : 'rotate(-90deg)'};
 	transition: transform 0.2s ease;
 	margin-right: 12px;
-	flex-shrink: 0;
 `;
 
 const contentContainerStyle = css`
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
-	flex: 1;
 `;
 
 const titleRowStyle = css`
 	display: flex;
+	gap: 2px;
 	align-items: center;
-	width: 100%;
 	margin-bottom: 10px;
+	flex-direction: auto;
+	flex-wrap: wrap;
 `;
 
 const hashIconStyle = (theme: Theme) => css`
@@ -107,27 +108,19 @@ const hashIconStyle = (theme: Theme) => css`
 	background: transparent;
 	border: none;
 	cursor: pointer;
-	padding: 0;
-
 	svg {
 		border-bottom: 2px solid ${theme.colors.secondary};
 	}
-
 	&:hover {
 		opacity: 1;
 	}
 `;
 
 const descriptionWrapperStyle = (theme: Theme) => css`
-	${theme.typography?.label2};
-	color: ${theme.colors.grey_5};
+	${theme.typography.paragraphSmall};
+	color: ${theme.colors.black};
 	overflow-wrap: break-word;
-	width: 100%;
-`;
-
-const downloadButtonContainerStyle = css`
-	flex-shrink: 0;
-	margin-right: 8px;
+	margin-left: 16px;
 `;
 
 const accordionCollapseStyle = (isOpen: boolean) => css`
@@ -137,7 +130,7 @@ const accordionCollapseStyle = (isOpen: boolean) => css`
 `;
 
 const accordionItemContentStyle = css`
-	padding: 30px;
+	padding: 0px 30px 30px 30px;
 `;
 
 const contentInnerContainerStyle = (theme: Theme) => css`
@@ -148,16 +141,15 @@ const contentInnerContainerStyle = (theme: Theme) => css`
 
 const handleInitialHashCheck = (
 	windowLocationHash: string,
-	accordionData: AccordionData,
 	openState: AccordionOpenState,
 	indexString: string,
 	accordionRef: RefObject<HTMLLIElement | null>,
 ) => {
 	if (window.location.hash === windowLocationHash) {
-		if (!accordionData.openOnInit) {
-			openState.toggle();
-		}
-		accordionRef.current?.id === indexString ? accordionRef.current.scrollIntoView({ behavior: 'smooth' }) : null;
+		openState.toggle();
+		accordionRef.current?.id === indexString ?
+			accordionRef.current.scrollIntoView({ block: 'center', behavior: 'smooth' })
+		:	null;
 	}
 };
 
@@ -167,8 +159,10 @@ const hashOnClick = (
 	setClipboardContents: (currentSchema: string) => void,
 ) => {
 	event.stopPropagation();
-	window.location.hash = windowLocationHash;
-	setClipboardContents(window.location.href);
+	event.preventDefault();
+	setClipboardContents(
+		`${window.location.origin}${window.location.pathname}${window.location.search}${windowLocationHash}`,
+	);
 };
 
 const AccordionItem = ({ index, accordionData, openState }: AccordionItemProps) => {
@@ -182,36 +176,38 @@ const AccordionItem = ({ index, accordionData, openState }: AccordionItemProps)
 	const windowLocationHash = `#${index}`;
 
 	useEffect(() => {
-		handleInitialHashCheck(windowLocationHash, accordionData, openState, indexString, accordionRef);
+		setTimeout(() => {
+			handleInitialHashCheck(windowLocationHash, openState, indexString, accordionRef);
+		}, 100);
 	}, []);
 
 	return (
 		<li ref={accordionRef} role="button" css={accordionItemStyle(theme)} id={indexString} onClick={openState.toggle}>
 			<div css={accordionItemTitleStyle}>
 				<div css={contentContainerStyle}>
 					<div css={titleRowStyle}>
-						<button type="button" css={accordionItemButtonStyle(theme)}>
+						<button css={accordionItemButtonStyle(theme)}>
 							<ChevronDown
 								fill={theme.colors.accent_dark}
 								width={16}
 								height={16}
 								style={chevronStyle(openState.isOpen)}
 							/>
-							<span>{title}</span>
 						</button>
+						<span css={titleStyle(theme)}>{title}</span>
 						<button
 							type="button"
 							css={hashIconStyle(theme)}
 							onClick={(event) => hashOnClick(event, windowLocationHash, setClipboardContents)}
 						>
 							<Hash width={20} height={20} fill={theme.colors.secondary} />
 						</button>
+						<ReadMoreText maxLines={MAX_LINES_BEFORE_EXPAND} wrapperStyle={descriptionWrapperStyle}>
+							{description}
+						</ReadMoreText>
 					</div>
-					<ReadMoreText maxLines={MAX_LINES_BEFORE_EXPAND} wrapperStyle={descriptionWrapperStyle}>
-						{description}
-					</ReadMoreText>
 				</div>
-				<div css={downloadButtonContainerStyle}>
+				<div>
 					{/* Mock props for the dictionary since we haven't implemented the download per schema yet */}
 					<DictionaryDownloadButton
 						lecternUrl=""

packages/ui/src/common/Button.tsx

@@ -74,7 +74,7 @@ const getContentStyles = (theme: Theme, shouldShowLoading: boolean) => css`
 	display: flex;
 	align-items: center;
 	gap: 8px;
-	${theme.typography.button};
+	${theme.typography.subtitleSecondary};
 	color: inherit;
 	white-space: nowrap;
 	overflow: hidden;

packages/ui/src/common/Dropdown/Dropdown.tsx

@@ -68,12 +68,13 @@ const chevronStyle = (open: boolean) => css`
 `;
 
 const dropDownTitleStyle = (theme: Theme) => css`
-	${theme.typography?.button};
+	${theme.typography?.subtitleSecondary};
 	color: ${theme.colors.accent_dark};
 `;
 
 const dropdownMenuStyle = (theme: Theme) => css`
-	${theme.typography?.button};
+	all: unset;
+	${theme.typography?.subtitleSecondary};
 	position: absolute;
 	top: calc(100% + 5px);
 	width: 100%;
@@ -82,6 +83,9 @@ const dropdownMenuStyle = (theme: Theme) => css`
 	padding-top: 5px;
 	border-radius: 9px;
 	padding-bottom: 5px;
+	z-index: 100;
+	max-height: 150px;
+	overflow-y: auto;
 `;
 
 type MenuItem = {
@@ -128,23 +132,30 @@ const Dropdown = ({ menuItems = [], title, leftIcon, disabled = false }: DropDow
 
 	const renderMenuItems = () => {
 		return menuItems.map(({ label, action }) => (
-			<DropDownItem key={label} action={action}>
+			<DropDownItem key={label} action={action} onItemClick={() => setOpen(false)}>
 				{label}
 			</DropDownItem>
 		));
 	};
 
 	return (
 		<div ref={dropdownRef} css={parentStyle}>
-			<div>
-				<div css={dropdownButtonStyle({ theme, disabled })} onClick={handleToggle}>
-					{leftIcon}
-					<span css={dropDownTitleStyle(theme)}>{title}</span>
-					<ChevronDown fill={theme.colors?.accent_dark} width={18} height={18} style={chevronStyle(open)} />
-				</div>
-
-				{open && !disabled && <div css={dropdownMenuStyle(theme)}>{renderMenuItems()}</div>}
-			</div>
+			<button
+				css={dropdownButtonStyle({ theme, disabled })}
+				onClick={handleToggle}
+				aria-haspopup="menu"
+				aria-expanded={open}
+				disabled={disabled}
+			>
+				{leftIcon}
+				<span css={dropDownTitleStyle(theme)}>{title}</span>
+				<ChevronDown fill={theme.colors?.accent_dark} width={18} height={18} style={chevronStyle(open)} />
+			</button>
+			{open && !disabled && (
+				<menu role="menu" css={dropdownMenuStyle(theme)}>
+					{renderMenuItems()}
+				</menu>
+			)}
 		</div>
 	);
 };

packages/ui/src/common/Dropdown/DropdownItem.tsx

@@ -22,13 +22,15 @@
 /** @jsxImportSource @emotion/react */
 
 import { css, SerializedStyles } from '@emotion/react';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
+
 import type { Theme } from '../../theme';
 import { useThemeContext } from '../../theme/ThemeContext';
 
 type DropDownItemProps = {
 	action?: string | (() => void);
 	children: ReactNode;
+	onItemClick?: () => void;
 	customStyles?: {
 		hover?: SerializedStyles;
 		base?: SerializedStyles;
@@ -38,8 +40,7 @@ type DropDownItemProps = {
 const styledListItemStyle = (theme: Theme, customStyles?: any) => css`
 	display: flex;
 	min-height: 100%;
-	padding-bottom: 5px;
-	height: 100%;
+	padding: 10px;
 	align-items: center;
 	border-radius: 9px;
 	justify-content: center;
@@ -52,18 +53,31 @@ const styledListItemStyle = (theme: Theme, customStyles?: any) => css`
 	${customStyles?.base}
 `;
 
-const DropDownItem = ({ children, action, customStyles }: DropDownItemProps) => {
+const DropDownItem = ({ children, action, onItemClick, customStyles }: DropDownItemProps) => {
 	const theme = useThemeContext();
-	const content = <div css={styledListItemStyle(theme, customStyles)}>{children}</div>;
+
+	const handleClick = () => {
+		if (typeof action === 'function') {
+			action();
+		}
+		if (onItemClick) {
+			onItemClick();
+		}
+	};
+
 	if (typeof action === 'function') {
 		return (
-			<div onClick={action} css={styledListItemStyle(theme, customStyles)}>
+			<li role="menuitem" onClick={handleClick} css={styledListItemStyle(theme, customStyles)}>
 				{children}
-			</div>
+			</li>
 		);
 	}
 
-	return content;
+	return (
+		<li role="menuitem" css={styledListItemStyle(theme, customStyles)}>
+			{children}
+		</li>
+	);
 };
 
 export default DropDownItem;

packages/ui/src/common/ReadMoreText.tsx

@@ -37,16 +37,16 @@ export type ReadMoreTextProps = {
 };
 
 const defaultWrapperStyle = (theme: Theme) => css`
-	${theme.typography?.label2};
-	color: ${theme.colors.grey_5};
+	${theme.typography.paragraphSmall};
+	color: ${theme.colors.black};
 	padding: 4px 8px;
 	word-wrap: break-word;
 	overflow-wrap: break-word;
 `;
 
 const linkStyle = (theme: Theme) => css`
-	${theme.typography?.label2};
-	color: ${theme.colors.accent_dark};
+	${theme.typography.captionBold};
+	color: ${theme.colors.black};
 	cursor: pointer;
 	display: inline-flex;
 	align-items: center;