diff --git a/.cache/pages.json b/.cache/pages.json index 5076c0f14..4602c5ebd 100644 --- a/.cache/pages.json +++ b/.cache/pages.json @@ -89,7 +89,7 @@ "consent", "contact", { - "deepDives": [ + "deep-dive": [ "alert-fatigue-reduction-triage-actionable-alerts/pdf", "api-deprecation-sunset-headers-consumer-migration/pdf", "api-gateway-metrics-traces-logs-debugging/pdf", diff --git a/_TODO.md b/_TODO.md index ad5fb1024..024219af4 100644 --- a/_TODO.md +++ b/_TODO.md @@ -249,6 +249,10 @@ Generate cover images for the skills and technologies tags pages - Contact Callout looks awkward in dark theme and needs redone generally +- Download icon on Download Component isn't picking up correct color on dark theme + +- Newsletter component "home" and "page" variants needs work on spacing, "home" needs image added + ## Header - Need to improve the "squish" animation where the header reduces in size on scroll down, and returns to full size on scroll up. Maybe reduce and expand the text and search / themepicker / hamburger menu sizes in place, and then slide them horizontally. @@ -315,3 +319,5 @@ We can add a path like `/articles/pdf` or `/articles/deep-dive` for the long-for - Color headings blue and use the SVG icon instead of the image. Color if the blue shade. - Social shares - module CSS doesn't appear correct with nested button hover classes, not sure how network name is generated or styled but it needs improvement. Should be rendered inside article content column, not across both content and TOC columns. + +- Add a Social Share on some compelling text in each article diff --git a/src/assets/images/site/hamburgerMenu.svg b/src/assets/images/site/hamburgerMenu.svg deleted file mode 100644 index d8ab21405..000000000 --- a/src/assets/images/site/hamburgerMenu.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/src/assets/images/site/moon.svg b/src/assets/images/site/moon.svg deleted file mode 100644 index 68fb286d1..000000000 --- a/src/assets/images/site/moon.svg +++ /dev/null @@ -1,8 +0,0 @@ - diff --git a/src/assets/images/site/sun.svg b/src/assets/images/site/sun.svg deleted file mode 100644 index 5b702daa1..000000000 --- a/src/assets/images/site/sun.svg +++ /dev/null @@ -1,114 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/src/components/Animations/Terraform/index.astro b/src/components/Animations/Terraform/index.astro index 06a1321c9..40d865752 100644 --- a/src/components/Animations/Terraform/index.astro +++ b/src/components/Animations/Terraform/index.astro @@ -191,6 +191,7 @@ import Icon from '@components/Icon/index.astro' + {/** Intentionally not using Button component. */} + variant="success" + icon="bug" + iconPosition="only" + ariaLabel="Report a bug" +/> diff --git a/src/components/BugReporter/index.astro b/src/components/BugReporter/index.astro index 10b3bc9d2..97c6b7803 100644 --- a/src/components/BugReporter/index.astro +++ b/src/components/BugReporter/index.astro @@ -5,6 +5,7 @@ * * The trigger button lives in the Footer (near the RSS icon). */ +import Button from '@components/Button/index.astro' const { triggerId = 'bugReporterTrigger', @@ -33,13 +34,13 @@ const { >

Report a bug

- + variant="secondary" + size="small" + text="Close" + />

@@ -82,20 +83,18 @@ const {

- + text="Send" + /> - + variant="secondary" + size="small" + text="Cancel" + />
diff --git a/src/components/Button/__tests__/index.spec.ts b/src/components/Button/__tests__/index.spec.ts index 9182cc40a..9d119290f 100644 --- a/src/components/Button/__tests__/index.spec.ts +++ b/src/components/Button/__tests__/index.spec.ts @@ -39,7 +39,7 @@ describe('Button (Astro)', () => { await expect( container.renderToString(Button, { props: { - variant: 'icon', + variant: 'primary', icon: 'close', iconPosition: 'only', }, @@ -52,7 +52,7 @@ describe('Button (Astro)', () => { const renderedHtml = await container.renderToString(Button, { props: { - variant: 'icon', + variant: 'primary', icon: 'close', iconPosition: 'only', ariaLabel: 'Close dialog', diff --git a/src/components/Button/index.astro b/src/components/Button/index.astro index cf57bc488..f9f31834a 100644 --- a/src/components/Button/index.astro +++ b/src/components/Button/index.astro @@ -1,7 +1,8 @@ --- -import type { ButtonLabelOptions, ButtonProps } from '@components/Button/server' +import type { ButtonLabelOptions, ButtonProps, NativeButtonType } from '@components/Button/server' import { buildButtonClassList, resolveAriaLabel } from '@components/Button/server' -import Icon from '@components/Icon/index.astro' +import AnchorLayout from '@components/Button/layouts/anchor.astro' +import DefaultLayout from '@components/Button/layouts/default.astro' type Props = ButtonProps @@ -27,6 +28,9 @@ const buttonClassList = buildButtonClassList({ variant, size, additionalClasses, + ...(icon !== undefined ? { icon } : {}), + ...(text !== undefined ? { text } : {}), + ...(iconPosition !== undefined ? { iconPosition } : {}), }) // Determine icon size based on button size if not specified @@ -48,52 +52,52 @@ if (typeof icon !== 'undefined') { const computedAriaLabel = resolveAriaLabel(labelOptions) const ariaAttributes = computedAriaLabel ? { 'aria-label': computedAriaLabel } : {} +const htmlButtonType: NativeButtonType = type === 'submit' || type === 'reset' ? type : 'button' -const linkHref = disabled ? undefined : href -const linkOnClick = disabled ? undefined : onClick +const hasAriaAttributes = Object.keys(ariaAttributes).length > 0 +const anchorOptionalProps = { + ...(id !== undefined ? { id } : {}), + ...(onClick !== undefined ? { onClick } : {}), + ...(icon !== undefined ? { icon } : {}), + ...(text !== undefined ? { text } : {}), + ...(hasAriaAttributes ? { ariaAttributes } : {}), +} + +const defaultOptionalProps = { + ...(id !== undefined ? { id } : {}), + ...(onClick !== undefined ? { onClick } : {}), + ...(icon !== undefined ? { icon } : {}), + ...(text !== undefined ? { text } : {}), + ...(hasAriaAttributes ? { ariaAttributes } : {}), +} ---
{ href ? ( - - {icon && (iconPosition === 'left' || iconPosition === 'only') && ( - - )} - {text && {text}} - {icon && iconPosition === 'right' && ( - - )} - + ) : ( - + ) }
diff --git a/src/components/Button/layouts/anchor.astro b/src/components/Button/layouts/anchor.astro new file mode 100644 index 000000000..2dfef552a --- /dev/null +++ b/src/components/Button/layouts/anchor.astro @@ -0,0 +1,55 @@ +--- +import Icon from '@components/Icon/index.astro' +import type { IconPosition } from '@components/Button/server' + +type Props = { + id?: string | undefined + href?: string | undefined + onClick?: string | undefined + disabled?: boolean | undefined + classList: Record + ariaAttributes?: Record | undefined + icon?: string | undefined + iconPosition?: IconPosition | undefined + iconSize: number + text?: string | undefined + attributes?: Record | undefined +} + +const { + id, + href, + onClick, + disabled = false, + classList, + ariaAttributes = {}, + icon, + iconPosition = 'left', + iconSize, + text, + attributes = {}, +} = Astro.props + +const linkHref = disabled ? undefined : href +const linkOnClick = disabled ? undefined : onClick +--- + + + {icon && (iconPosition === 'left' || iconPosition === 'only') && ( + + )} + {text && {text}} + {icon && iconPosition === 'right' && ( + + )} + + diff --git a/src/components/Button/layouts/default.astro b/src/components/Button/layouts/default.astro new file mode 100644 index 000000000..b49b58cc0 --- /dev/null +++ b/src/components/Button/layouts/default.astro @@ -0,0 +1,51 @@ +--- +import Icon from '@components/Icon/index.astro' +import type { NativeButtonType, IconPosition } from '@components/Button/server' + +type Props = { + id?: string | undefined + type?: NativeButtonType | undefined + onClick?: string | undefined + disabled?: boolean | undefined + classList: Record + ariaAttributes?: Record | undefined + icon?: string | undefined + iconPosition?: IconPosition | undefined + iconSize: number + text?: string | undefined + attributes?: Record | undefined +} + +const { + id, + type = 'button', + onClick, + disabled = false, + classList, + ariaAttributes = {}, + icon, + iconPosition = 'left', + iconSize, + text, + attributes = {}, +} = Astro.props +--- + + diff --git a/src/components/Button/server/__tests__/index.spec.ts b/src/components/Button/server/__tests__/index.spec.ts index 9782b0ca2..b03188cab 100644 --- a/src/components/Button/server/__tests__/index.spec.ts +++ b/src/components/Button/server/__tests__/index.spec.ts @@ -39,6 +39,17 @@ describe('Button server helpers', () => { expect(classList['custom']).toBe(true) expect(classList['extra-class']).toBe(true) }) + + it('adds icon-only structural classes when icon-only props are provided', () => { + const classList = buildButtonClassList({ + variant: 'primary', + icon: 'close', + iconPosition: 'only', + }) + + expect(classList['aspect-square']).toBe(true) + expect(classList['p-2']).toBe(true) + }) }) describe('resolveAriaLabel', () => { diff --git a/src/components/Button/server/index.ts b/src/components/Button/server/index.ts index 28ad59a87..7f7b7f20b 100644 --- a/src/components/Button/server/index.ts +++ b/src/components/Button/server/index.ts @@ -7,9 +7,9 @@ export type ButtonVariant = | 'success' | 'info' | 'warning' - | 'icon' export type ButtonSize = 'small' | 'medium' | 'large' -export type ButtonType = 'button' | 'submit' | 'reset' +export type NativeButtonType = 'button' | 'submit' | 'reset' +export type ButtonType = NativeButtonType | 'nav' export type IconPosition = 'left' | 'right' | 'only' export interface ButtonProps { @@ -26,9 +26,11 @@ export interface ButtonProps { icon?: string iconPosition?: IconPosition iconSize?: number + [key: `data-${string}`]: string | number | boolean | undefined } const ICON_ONLY_POSITION: IconPosition = 'only' +const iconOnlyClasses = 'aspect-square p-2' type ClassList = Record @@ -69,11 +71,6 @@ const variantClasses: Record = { 'hover:bg-danger-offset ' + 'focus-visible:bg-danger-offset ' + 'active:bg-danger-offset', - icon: - 'aspect-square bg-transparent text-white p-2 ' + - 'hover:bg-page-offset hover:text-primary ' + - 'focus-visible:bg-page-offset focus-visible:text-primary ' + - 'active:bg-page-offset', info: 'bg-info text-white ' + 'hover:bg-info-offset ' + @@ -115,12 +112,18 @@ export interface ButtonClassOptions { variant?: ButtonVariant size?: ButtonSize additionalClasses?: string + icon?: string + iconPosition?: IconPosition + text?: string } export function buildButtonClassList({ variant = 'primary', size = 'medium', additionalClasses, + icon, + iconPosition, + text, }: ButtonClassOptions) { const classList: ClassList = {} const selectedVariant = variant as string @@ -137,6 +140,10 @@ export function buildButtonClassList({ addClassNames(classList, additionalClasses) } + if (icon && iconPosition === ICON_ONLY_POSITION && !text) { + addClassNames(classList, iconOnlyClasses) + } + return classList } diff --git a/src/components/Calendar/index.astro b/src/components/Calendar/index.astro index c7110c65c..3f9f0d190 100644 --- a/src/components/Calendar/index.astro +++ b/src/components/Calendar/index.astro @@ -1,21 +1,22 @@ --- -import Icon from '@components/Icon/index.astro' +import Button from '@components/Button/index.astro' const { ...rest } = Astro.props --- - +
- - - - - Google Calendar - + variant="note" + size="small" + icon="calendar-google" + iconSize={5} + text="Google Calendar" + class="normal-case" + /> - - - - - Outlook - + variant="note" + size="small" + icon="calendar-outlook" + iconSize={5} + text="Outlook" + class="normal-case" + /> - + data-calendar-download-ics={true} + variant="note" + size="small" + icon="calendar-apple" + iconSize={5} + text="Download .ics" + class="normal-case" + />
diff --git a/src/components/CallToAction/Contact/index.astro b/src/components/CallToAction/Contact/index.astro index f9833b9fb..04f9acd2a 100644 --- a/src/components/CallToAction/Contact/index.astro +++ b/src/components/CallToAction/Contact/index.astro @@ -15,6 +15,7 @@ * /> * ``` */ +import Icon from '@components/Icon/index.astro' export interface Props { /** Optional base id for internal aria relationships */ @@ -91,20 +92,7 @@ const descriptionId = `${id}-description` class="inline-flex items-center justify-center p-4 bg-white text-primary font-semibold rounded-xl hover:bg-white/90 transition-all duration-200 hover:shadow-xl hover:-translate-y-0.5 text-center no-underline" > {primaryLink.text} - + { secondaryLink && ( diff --git a/src/components/CallToAction/Newsletter/layouts/article.astro b/src/components/CallToAction/Newsletter/layouts/article.astro index 4de74884e..38c0ac214 100644 --- a/src/components/CallToAction/Newsletter/layouts/article.astro +++ b/src/components/CallToAction/Newsletter/layouts/article.astro @@ -51,6 +51,7 @@ const { /> + {/** Intentionally not using Button component. */} + {/* Intentionally not using Button component. */}