@grantcodes/ui 2.15.6 → 2.16.0

package/src/components/newsletter/newsletter.component.js

@@ -1,69 +1,65 @@
-import { LitElement, html } from "lit";
-import newsletterStyles from "./newsletter.css" with { type: "css" };
-import "../button/button.js";
+import { html, LitElement } from 'lit';
+import newsletterStyles from './newsletter.css' with { type: 'css' };
+import '../button/button.js';
 
 export class GrantCodesNewsletter extends LitElement {
-	static styles = [newsletterStyles];
+  static styles = [newsletterStyles];
 
-	static properties = {
-		/**
-		 * Section heading.
-		 * @type {string}
-		 */
-		title: { type: String },
-		/**
-		 * Optional supporting paragraph.
-		 * @type {string}
-		 */
-		text: { type: String },
-		/**
-		 * Form action URL.
-		 * @type {string}
-		 */
-		action: { type: String },
-		/**
-		 * Form submission method.
-		 * @type {'get' | 'post'}
-		 */
-		method: { type: String },
-		/**
-		 * Email input placeholder.
-		 * @type {string}
-		 */
-		placeholder: { type: String },
-		/**
-		 * Submit button label.
-		 * @type {string}
-		 */
-		buttonLabel: { type: String, attribute: "button-label" },
-		/**
-		 * Optional small disclaimer text below the form.
-		 * @type {string}
-		 */
-		disclaimer: { type: String },
-	};
+  static properties = {
+    /**
+     * Section heading.
+     * @type {string}
+     */
+    title: { type: String },
+    /**
+     * Optional supporting paragraph.
+     * @type {string}
+     */
+    text: { type: String },
+    /**
+     * Form action URL.
+     * @type {string}
+     */
+    action: { type: String },
+    /**
+     * Form submission method.
+     * @type {'get' | 'post'}
+     */
+    method: { type: String },
+    /**
+     * Email input placeholder.
+     * @type {string}
+     */
+    placeholder: { type: String },
+    /**
+     * Submit button label.
+     * @type {string}
+     */
+    buttonLabel: { type: String, attribute: 'button-label' },
+    /**
+     * Optional small disclaimer text below the form.
+     * @type {string}
+     */
+    disclaimer: { type: String },
+  };
 
-	constructor() {
-		super();
-		this.title = "";
-		this.text = "";
-		this.action = "";
-		this.method = "post";
-		this.placeholder = "Your email address";
-		this.buttonLabel = "Subscribe";
-		this.disclaimer = "";
-	}
+  constructor() {
+    super();
+    this.title = '';
+    this.text = '';
+    this.action = '';
+    this.method = 'post';
+    this.placeholder = 'Your email address';
+    this.buttonLabel = 'Subscribe';
+    this.disclaimer = '';
+  }
 
-	render() {
-		return html`
+  render() {
+    return html`
 			<section class="newsletter">
 				<div class="newsletter__container">
 					<h2 class="newsletter__title">${this.title}</h2>
-					${
-						this.text
-							? html`<p class="newsletter__text">${this.text}</p>`
-							: null
-					}
+					${this.text ? html`<p class="newsletter__text">${this.text}</p>` : null}
 					<form
 						class="newsletter__form"
 						action=${this.action}
@@ -89,13 +85,9 @@ export class GrantCodesNewsletter extends LitElement {
 							</div>
 						</div>
 					</form>
-					${
-						this.disclaimer
-							? html`<p class="newsletter__disclaimer">${this.disclaimer}</p>`
-							: null
-					}
+					${this.disclaimer ? html`<p class="newsletter__disclaimer">${this.disclaimer}</p>` : null}
 				</div>
 			</section>
 		`;
-	}
+  }
 }

package/src/components/newsletter/newsletter.css

@@ -1,91 +1,91 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 :host {
-	display: block;
+  display: block;
 }
 
 .newsletter {
-	padding-block: var(--g-spacing-3xl);
-	padding-inline: var(--g-spacing-md);
-	background: var(--g-color-background-primary-knockout);
-	text-align: center;
+  padding-block: var(--g-spacing-3xl);
+  padding-inline: var(--g-spacing-md);
+  background: var(--g-color-background-primary-knockout);
+  text-align: center;
 }
 
 .newsletter__container {
-	max-width: 55ch;
-	margin: 0 auto;
+  max-width: 55ch;
+  margin: 0 auto;
 }
 
 .newsletter__title {
-	margin: 0 0 var(--g-spacing-sm);
-	font: var(--g-typography-h3-font);
-	color: var(--g-color-content-primary-knockout);
+  margin: 0 0 var(--g-spacing-sm);
+  font: var(--g-typography-h3-font);
+  color: var(--g-color-content-primary-knockout);
 }
 
 .newsletter__text {
-	margin: 0 0 var(--g-spacing-xl);
-	font: var(--g-typography-body-lg);
-	color: var(--g-color-content-primary-knockout);
-	opacity: 0.9;
+  margin: 0 0 var(--g-spacing-xl);
+  font: var(--g-typography-body-lg);
+  color: var(--g-color-content-primary-knockout);
+  opacity: 0.9;
 }
 
 .newsletter__form {
-	width: 100%;
+  width: 100%;
 }
 
 .newsletter__label {
-	position: absolute;
-	width: 1px;
-	height: 1px;
-	padding: 0;
-	margin: -1px;
-	overflow: hidden;
-	clip: rect(0, 0, 0, 0);
-	white-space: nowrap;
-	border: 0;
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
 
 .newsletter__field {
-	display: flex;
-	flex-direction: column;
-	gap: var(--g-spacing-sm);
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-sm);
 }
 
 .newsletter__input-wrap {
-	display: flex;
-	gap: var(--g-spacing-sm);
+  display: flex;
+  gap: var(--g-spacing-sm);
 }
 
 .newsletter__input {
-	flex: 1;
-	min-width: 0;
-	padding-block: var(--g-spacing-sm);
-	padding-inline: var(--g-spacing-md);
-	font-size: var(--g-typography-body-default-font-size);
-	border: 2px solid transparent;
-	border-radius: var(--g-border-radius-md, 0.5rem);
-	background: var(--g-color-background-default);
-	color: var(--g-color-content-default);
-	outline: none;
+  flex: 1;
+  min-width: 0;
+  padding-block: var(--g-spacing-sm);
+  padding-inline: var(--g-spacing-md);
+  font-size: var(--g-typography-body-default-font-size);
+  border: 2px solid transparent;
+  border-radius: var(--g-border-radius-md, 0.5rem);
+  background: var(--g-color-background-default);
+  color: var(--g-color-content-default);
+  outline: none;
 }
 
 .newsletter__input:focus {
-	border-color: var(--g-color-border-default);
+  border-color: var(--g-color-border-default);
 }
 
 .newsletter__disclaimer {
-	margin: var(--g-spacing-md) 0 0;
-	font: var(--g-typography-body-sm);
-	color: var(--g-color-content-primary-knockout);
-	opacity: 0.75;
+  margin: var(--g-spacing-md) 0 0;
+  font: var(--g-typography-body-sm);
+  color: var(--g-color-content-primary-knockout);
+  opacity: 0.75;
 }
 
 @media (max-width: 480px) {
-	.newsletter__input-wrap {
-		flex-direction: column;
-	}
+  .newsletter__input-wrap {
+    flex-direction: column;
+  }
 }

package/src/components/newsletter/newsletter.js

@@ -1,6 +1,6 @@
-import { GrantCodesNewsletter } from "./newsletter.component.js";
+import { GrantCodesNewsletter } from './newsletter.component.js';
 
-export * from "./newsletter.component.js";
+export * from './newsletter.component.js';
 export default GrantCodesNewsletter;
 
-customElements.define("grantcodes-newsletter", GrantCodesNewsletter);
+customElements.define('grantcodes-newsletter', GrantCodesNewsletter);

package/src/components/newsletter/newsletter.react.js

@@ -1,9 +1,9 @@
-import React from "react";
-import { createComponent } from "@lit/react";
-import { GrantCodesNewsletter } from "./newsletter.js";
+import { createComponent } from '@lit/react';
+import React from 'react';
+import { GrantCodesNewsletter } from './newsletter.js';
 
 export const Newsletter = createComponent({
-	tagName: "grantcodes-newsletter",
-	elementClass: GrantCodesNewsletter,
-	react: React,
+  tagName: 'grantcodes-newsletter',
+  elementClass: GrantCodesNewsletter,
+  react: React,
 });

package/src/components/newsletter/newsletter.stories.js

@@ -1,19 +1,19 @@
-import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
-import "./newsletter.js";
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+import './newsletter.js';
 
-const { events, args, argTypes } = getStorybookHelpers("grantcodes-newsletter");
+const { events, args, argTypes } = getStorybookHelpers('grantcodes-newsletter');
 
 const meta = {
-	title: "Blocks/Newsletter",
-	component: "grantcodes-newsletter",
-	args,
-	argTypes,
-	parameters: {
-		actions: {
-			handles: events,
-		},
-		layout: "fullscreen",
-	},
+  title: 'Blocks/Newsletter',
+  component: 'grantcodes-newsletter',
+  args,
+  argTypes,
+  parameters: {
+    actions: {
+      handles: events,
+    },
+    layout: 'fullscreen',
+  },
 };
 
 export default meta;
@@ -22,38 +22,38 @@ export default meta;
  * Default newsletter signup with disclaimer.
  */
 export const Default = {
-	args: {
-		title: "Stay in the loop",
-		text: "Get the latest updates, articles, and resources delivered straight to your inbox.",
-		action: "/subscribe",
-		method: "post",
-		placeholder: "you@example.com",
-		"button-label": "Subscribe",
-		disclaimer: "No spam. Unsubscribe at any time.",
-	},
+  args: {
+    title: 'Stay in the loop',
+    text: 'Get the latest updates, articles, and resources delivered straight to your inbox.',
+    action: '/subscribe',
+    method: 'post',
+    placeholder: 'you@example.com',
+    'button-label': 'Subscribe',
+    disclaimer: 'No spam. Unsubscribe at any time.',
+  },
 };
 
 /**
  * Minimal newsletter — title and input only.
  */
 export const Minimal = {
-	args: {
-		title: "Subscribe for updates",
-		action: "/subscribe",
-		"button-label": "Subscribe",
-	},
+  args: {
+    title: 'Subscribe for updates',
+    action: '/subscribe',
+    'button-label': 'Subscribe',
+  },
 };
 
 /**
  * Newsletter with a custom button label and placeholder.
  */
 export const CustomLabels = {
-	args: {
-		title: "Join the newsletter",
-		text: "Weekly tips on building great web experiences.",
-		action: "/newsletter",
-		placeholder: "Enter your email",
-		"button-label": "Join now",
-		disclaimer: "We respect your privacy.",
-	},
+  args: {
+    title: 'Join the newsletter',
+    text: 'Weekly tips on building great web experiences.',
+    action: '/newsletter',
+    placeholder: 'Enter your email',
+    'button-label': 'Join now',
+    disclaimer: 'We respect your privacy.',
+  },
 };

package/src/components/notice/index.js

@@ -1 +1 @@
-export * from "./notice.js";
+export * from './notice.js';

package/src/components/notice/notice.component.js

@@ -1,71 +1,82 @@
-import { LitElement } from "lit";
-import { html } from "lit/static-html.js";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import { classMap } from "lit/directives/class-map.js";
-import noticeStyles from "./notice.css" with { type: "css" };
-import { GrantCodesIcon } from "../icon/icon.component.js";
-import { AlertCircle, Info, CheckCircle2, XCircle, X } from "../../icons.js";
+import { LitElement } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { html } from 'lit/static-html.js';
+import { AlertCircle, CheckCircle2, Info, X, XCircle } from '../../icons.js';
+import { generateId } from '../../lib/generate-id.js';
+import { startViewTransition } from '../../lib/view-transition.js';
+import { GrantCodesIcon } from '../icon/icon.component.js';
+import noticeStyles from './notice.css' with { type: 'css' };
 
 const ICONS = {
-	info: Info,
-	success: CheckCircle2,
-	warning: AlertCircle,
-	error: XCircle,
+  info: Info,
+  success: CheckCircle2,
+  warning: AlertCircle,
+  error: XCircle,
 };
 
 export class GrantCodesNotice extends LitElement {
-	static dependencies = { "grancodes-icon": GrantCodesIcon };
-	// Styles are scoped to this element: they won't conflict with styles
-	// on the main page or in other components. Styling API can be exposed
-	// via CSS custom properties.
-	static styles = [noticeStyles];
+  static dependencies = { 'grancodes-icon': GrantCodesIcon };
+  // Styles are scoped to this element: they won't conflict with styles
+  // on the main page or in other components. Styling API can be exposed
+  // via CSS custom properties.
+  static styles = [noticeStyles];
 
-	// Define reactive properties--updating a reactive property causes
-	// the component to update.
-	// @property() label = 'Button Label'
-	static properties = {
-		variant: { type: String },
-		title: { type: String },
-		dismissable: { type: Boolean },
-	};
+  // Define reactive properties--updating a reactive property causes
+  // the component to update.
+  // @property() label = 'Button Label'
+  static properties = {
+    variant: { type: String },
+    title: { type: String },
+    dismissable: { type: Boolean },
+  };
 
-	constructor() {
-		super();
+  constructor() {
+    super();
 
-		this.variant = "info";
-		this.title = "";
-		this.dismissable = false;
-	}
+    this.variant = 'info';
+    this.title = '';
+    this.dismissable = false;
 
-	onDismiss(_e) {
-		if (document.startViewTransition) {
-			document.startViewTransition(() => {
-				this.remove();
-			});
-		} else {
-			this.remove();
-		}
-	}
+    // Per-instance, so two notices cannot abort each other's view transition.
+    this._viewTransitionName = generateId('notice-vt');
+  }
 
-	renderDismiss() {
-		if (this.dismissable) {
-			return html`
-				<button class="notice__close" @click=${this.onDismiss}>
-					<grantcodes-icon title="Close Notice">${unsafeHTML(X)}</grantcodes-icon>
+  connectedCallback() {
+    super.connectedCallback();
+    this.style.setProperty('--notice-vt-name', this._viewTransitionName);
+  }
+
+  onDismiss(_e) {
+    startViewTransition(() => {
+      this.remove();
+    });
+  }
+
+  renderDismiss() {
+    if (this.dismissable) {
+      return html`
+				<button
+					class="notice__close"
+					type="button"
+					aria-label="Dismiss notice"
+					@click=${this.onDismiss}
+				>
+					<grantcodes-icon aria-hidden="true">${unsafeHTML(X)}</grantcodes-icon>
 				</button>
 			`;
-		}
-		return html``;
-	}
+    }
+    return html``;
+  }
 
-	render() {
-		const icon = ICONS[this.variant];
-		const classes = classMap({
-			notice: true,
-			[`notice--${this.variant}`]: true,
-		});
+  render() {
+    const icon = ICONS[this.variant];
+    const classes = classMap({
+      notice: true,
+      [`notice--${this.variant}`]: true,
+    });
 
-		return html`
+    return html`
 			<aside class=${classes}>
 				<grantcodes-icon class="notice__icon">${unsafeHTML(icon)}</grantcodes-icon>
 
@@ -77,5 +88,5 @@ export class GrantCodesNotice extends LitElement {
 				${this.renderDismiss()}
 			</aside>
 		`;
-	}
+  }
 }

package/src/components/notice/notice.css

@@ -1,73 +1,72 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .notice {
-	display: flex;
-	flex-direction: row;
-	align-items: flex-start;
-	gap: var(--g-spacing-md);
-	padding: var(--g-spacing-md);
-	border-radius: var(--g-border-radius-sm, 0.25rem);
-	view-transition-name: notice;
-	transition: opacity 0.5s;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--g-spacing-md);
+  padding: var(--g-spacing-md);
+  border-radius: var(--g-border-radius-sm, 0.25rem);
+  view-transition-name: var(--notice-vt-name, none);
+  transition: opacity 0.5s;
 }
 
 .notice--info {
-	color: var(--g-color-content-utility-info);
-	background-color: var(--g-color-background-utility-info);
+  color: var(--g-color-content-utility-info);
+  background-color: var(--g-color-background-utility-info);
 }
 
 .notice--success {
-	color: var(--g-color-content-utility-success);
-	background-color: var(--g-color-background-utility-success);
+  color: var(--g-color-content-utility-success);
+  background-color: var(--g-color-background-utility-success);
 }
 
 .notice--warning {
-	color: var(--g-color-content-utility-warning);
-	background-color: var(--g-color-background-utility-warning);
+  color: var(--g-color-content-utility-warning);
+  background-color: var(--g-color-background-utility-warning);
 }
 
 .notice--error {
-	color: var(--g-color-content-utility-error);
-	background-color: var(--g-color-background-utility-error);
+  color: var(--g-color-content-utility-error);
+  background-color: var(--g-color-background-utility-error);
 }
 
 .notice__title {
-	font-size: var(--g-typography-body-default-font-size);
-	margin: 0;
+  font-size: var(--g-typography-body-default-font-size);
+  margin: 0;
 }
 
 .notice__icon {
-	font-size: calc(var(--g-typography-body-default-line-height) * 1em);
+  font-size: calc(var(--g-typography-body-default-line-height) * 1em);
 }
 
 .notice__content {
-	flex-grow: 1;
+  flex-grow: 1;
 }
 
 .notice__close {
-	background: none;
-	color: inherit;
-	opacity: 0.5;
-	transition: 0.2s;
-	font-size: calc(var(--g-typography-body-default-line-height) * 1em);
-	line-height: 1;
-	padding: var(--g-spacing-sm);
-	margin: calc(-1 * var(--g-spacing-sm))
-		calc(-1 * var(--g-spacing-sm)) 0 0;
-	border: 0;
+  background: none;
+  color: inherit;
+  opacity: 0.5;
+  transition: 0.2s;
+  font-size: calc(var(--g-typography-body-default-line-height) * 1em);
+  line-height: 1;
+  padding: var(--g-spacing-sm);
+  margin: calc(-1 * var(--g-spacing-sm)) calc(-1 * var(--g-spacing-sm)) 0 0;
+  border: 0;
 
-	&:hover,
-	&:focus-visible {
-		background: none;
-		color: inherit;
-		opacity: 1;
-	}
+  &:hover,
+  &:focus-visible {
+    background: none;
+    color: inherit;
+    opacity: 1;
+  }
 }
 
 .notice p {
-	margin: 0;
+  margin: 0;
 }