@grantcodes/ui 2.15.7 → 2.16.0

package/src/components/map/map.stories.js

@@ -1,18 +1,18 @@
-import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
-import "./map.js";
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+import './map.js';
 
-const { events, args, argTypes } = getStorybookHelpers("grantcodes-map");
+const { events, args, argTypes } = getStorybookHelpers('grantcodes-map');
 
 const meta = {
-	title: "Components/Map",
-	component: "grantcodes-map",
-	args,
-	argTypes,
-	parameters: {
-		actions: {
-			handles: events,
-		},
-	},
+  title: 'Components/Map',
+  component: 'grantcodes-map',
+  args,
+  argTypes,
+  parameters: {
+    actions: {
+      handles: events,
+    },
+  },
 };
 
 export default meta;
@@ -21,48 +21,48 @@ export default meta;
  * Default map showing a location in Granollers, Catalonia.
  */
 export const Default = {
-	args: {
-		lat: "41.648747",
-		lng: "2.161975",
-		zoom: 14,
-		label: "Granollers, Catalonia",
-	},
+  args: {
+    lat: '41.648747',
+    lng: '2.161975',
+    zoom: 14,
+    label: 'Granollers, Catalonia',
+  },
 };
 
 /**
  * Map with a directions link below.
  */
 export const WithDirections = {
-	args: {
-		lat: "41.648747",
-		lng: "2.161975",
-		zoom: 14,
-		label: "Granollers, Catalonia",
-		"directions-url": "https://maps.google.com/?q=41.648747,2.161975",
-	},
+  args: {
+    lat: '41.648747',
+    lng: '2.161975',
+    zoom: 14,
+    label: 'Granollers, Catalonia',
+    'directions-url': 'https://maps.google.com/?q=41.648747,2.161975',
+  },
 };
 
 /**
  * Map with a custom height.
  */
 export const CustomHeight = {
-	args: {
-		lat: "48.8566",
-		lng: "2.3522",
-		zoom: 12,
-		label: "Paris, France",
-		height: "600px",
-	},
+  args: {
+    lat: '48.8566',
+    lng: '2.3522',
+    zoom: 12,
+    label: 'Paris, France',
+    height: '600px',
+  },
 };
 
 /**
  * Zoomed-out world view.
  */
 export const ZoomedOut = {
-	args: {
-		lat: "0",
-		lng: "0",
-		zoom: 2,
-		label: "World map",
-	},
+  args: {
+    lat: '0',
+    lng: '0',
+    zoom: 2,
+    label: 'World map',
+  },
 };

package/src/components/media-text/index.js

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

package/src/components/media-text/media-text.component.js

@@ -1,100 +1,106 @@
-import { LitElement, html } from "lit";
-import mediaTextStyles from "./media-text.css" with { type: "css" };
-import "../button/button.js";
+import { html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import mediaTextStyles from './media-text.css' with { type: 'css' };
+import '../button/button.js';
 
 export class GrantCodesMediaText extends LitElement {
-	static styles = [mediaTextStyles];
+  static styles = [mediaTextStyles];
 
-	static properties = {
-		/**
-		 * Section heading.
-		 * @type {string}
-		 */
-		title: { type: String },
-		/**
-		 * Body text paragraph.
-		 * @type {string}
-		 */
-		text: { type: String },
-		/**
-		 * Media object as a JSON string: `{"src":"...","alt":"...","kind":"image|video"}`.
-		 * @type {string}
-		 */
-		media: { type: String },
-		/**
-		 * When true, the media appears on the right and text on the left.
-		 * @type {boolean}
-		 */
-		reverse: { type: Boolean, reflect: true },
-		/**
-		 * Optional CTA as a JSON string: `{"label":"...","href":"..."}`.
-		 * @type {string}
-		 */
-		cta: { type: String },
-	};
+  static properties = {
+    /**
+     * Section heading.
+     * @type {string}
+     */
+    title: { type: String },
+    /**
+     * Body text paragraph.
+     * @type {string}
+     */
+    text: { type: String },
+    /**
+     * Media object as a JSON string: `{"src","alt","kind":"image|video","width","height","poster","loading"}`.
+     * @type {string}
+     */
+    media: { type: String },
+    /**
+     * When true, the media appears on the right and text on the left.
+     * @type {boolean}
+     */
+    reverse: { type: Boolean, reflect: true },
+    /**
+     * Optional CTA as a JSON string: `{"label":"...","href":"..."}`.
+     * @type {string}
+     */
+    cta: { type: String },
+  };
 
-	constructor() {
-		super();
-		this.title = "";
-		this.text = "";
-		this.media = "";
-		this.reverse = false;
-		this.cta = "";
-	}
+  constructor() {
+    super();
+    this.title = '';
+    this.text = '';
+    this.media = '';
+    this.reverse = false;
+    this.cta = '';
+  }
 
-	get _media() {
-		try {
-			return this.media ? JSON.parse(this.media) : null;
-		} catch {
-			return null;
-		}
-	}
+  get _media() {
+    try {
+      return this.media ? JSON.parse(this.media) : null;
+    } catch {
+      return null;
+    }
+  }
 
-	get _cta() {
-		try {
-			return this.cta ? JSON.parse(this.cta) : null;
-		} catch {
-			return null;
-		}
-	}
+  get _cta() {
+    try {
+      return this.cta ? JSON.parse(this.cta) : null;
+    } catch {
+      return null;
+    }
+  }
 
-	render() {
-		const media = this._media;
-		const cta = this._cta;
-		return html`
+  render() {
+    const media = this._media;
+    const cta = this._cta;
+    return html`
 			<section class="media-text">
 				<div class="media-text__container">
 					<div class="media-text__media">
 						${
-							media?.kind === "video"
-								? html`<video
+              media?.kind === 'video'
+                ? html`<video
 									src=${media.src}
 									class="media-text__video"
+									poster=${ifDefined(media.poster)}
+									width=${ifDefined(media.width)}
+									height=${ifDefined(media.height)}
 									controls
 									preload="metadata"
-									aria-label=${media.alt ?? ""}
+									aria-label=${media.alt ?? ''}
 								></video>`
-								: html`<img
-									src=${media?.src ?? ""}
-									alt=${media?.alt ?? ""}
+                : html`<img
+									src=${media?.src ?? ''}
+									alt=${media?.alt ?? ''}
 									class="media-text__image"
-									loading="lazy"
+									width=${ifDefined(media?.width)}
+									height=${ifDefined(media?.height)}
+									loading=${media?.loading ?? 'eager'}
 								/>`
-						}
+            }
 					</div>
 					<div class="media-text__content">
 						<h2 class="media-text__title">${this.title}</h2>
 						<p class="media-text__text">${this.text}</p>
 						${
-							cta
-								? html`<grantcodes-button href=${cta.href}
+              cta
+                ? html`<grantcodes-button href=${cta.href}
 									>${cta.label}</grantcodes-button
 								>`
-								: null
-						}
+                : null
+            }
 					</div>
 				</div>
 			</section>
 		`;
-	}
+  }
 }

package/src/components/media-text/media-text.css

@@ -1,68 +1,68 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 :host {
-	display: block;
+  display: block;
 }
 
 .media-text {
-	padding-block: var(--g-spacing-3xl);
-	padding-inline: var(--g-spacing-md);
+  padding-block: var(--g-spacing-3xl);
+  padding-inline: var(--g-spacing-md);
 }
 
 .media-text__container {
-	max-width: 1200px;
-	margin: 0 auto;
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	gap: var(--g-spacing-3xl);
-	align-items: center;
+  max-width: 1200px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--g-spacing-3xl);
+  align-items: center;
 }
 
 :host([reverse]) .media-text__container {
-	direction: rtl;
+  direction: rtl;
 }
 
 :host([reverse]) .media-text__content,
 :host([reverse]) .media-text__media {
-	direction: ltr;
+  direction: ltr;
 }
 
 @media (max-width: 768px) {
-	.media-text__container {
-		grid-template-columns: 1fr;
-		gap: var(--g-spacing-xl);
-		direction: ltr;
-	}
+  .media-text__container {
+    grid-template-columns: 1fr;
+    gap: var(--g-spacing-xl);
+    direction: ltr;
+  }
 }
 
 .media-text__image,
 .media-text__video {
-	inline-size: 100%;
-	block-size: auto;
-	display: block;
-	border-radius: var(--g-border-radius-md, 0.5rem);
-	object-fit: cover;
-	aspect-ratio: 4 / 3;
+  inline-size: 100%;
+  block-size: auto;
+  display: block;
+  border-radius: var(--g-border-radius-md, 0.5rem);
+  object-fit: cover;
+  aspect-ratio: 4 / 3;
 }
 
 .media-text__content {
-	display: flex;
-	flex-direction: column;
-	gap: var(--g-spacing-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-lg);
 }
 
 .media-text__title {
-	margin: 0;
-	font: var(--g-typography-h4-font);
-	color: var(--g-color-content-default);
+  margin: 0;
+  font: var(--g-typography-h4-font);
+  color: var(--g-color-content-default);
 }
 
 .media-text__text {
-	margin: 0;
-	font: var(--g-typography-body-lg);
-	color: var(--g-color-content-subtle);
+  margin: 0;
+  font: var(--g-typography-body-lg);
+  color: var(--g-color-content-subtle);
 }

package/src/components/media-text/media-text.js

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

package/src/components/media-text/media-text.react.js

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

package/src/components/media-text/media-text.stories.js

@@ -1,19 +1,19 @@
-import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
-import "./media-text.js";
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+import './media-text.js';
 
-const { events, args, argTypes } = getStorybookHelpers("grantcodes-media-text");
+const { events, args, argTypes } = getStorybookHelpers('grantcodes-media-text');
 
 const meta = {
-	title: "Blocks/MediaText",
-	component: "grantcodes-media-text",
-	args,
-	argTypes,
-	parameters: {
-		actions: {
-			handles: events,
-		},
-		layout: "fullscreen",
-	},
+  title: 'Blocks/MediaText',
+  component: 'grantcodes-media-text',
+  args,
+  argTypes,
+  parameters: {
+    actions: {
+      handles: events,
+    },
+    layout: 'fullscreen',
+  },
 };
 
 export default meta;
@@ -22,48 +22,48 @@ export default meta;
  * Default media-text — image on the left, text on the right.
  */
 export const Default = {
-	args: {
-		title: "Design tokens done right",
-		text: "Our style dictionary generates CSS custom properties, JS tokens, and JSON outputs from a single source of truth — keeping every theme in perfect sync.",
-		media: JSON.stringify({
-			src: "https://placehold.co/640x480",
-			alt: "Design tokens diagram",
-			kind: "image",
-		}),
-		cta: JSON.stringify({ label: "Read the docs", href: "/docs/tokens" }),
-		reverse: false,
-	},
+  args: {
+    title: 'Design tokens done right',
+    text: 'Our style dictionary generates CSS custom properties, JS tokens, and JSON outputs from a single source of truth — keeping every theme in perfect sync.',
+    media: JSON.stringify({
+      src: 'https://placehold.co/640x480',
+      alt: 'Design tokens diagram',
+      kind: 'image',
+    }),
+    cta: JSON.stringify({ label: 'Read the docs', href: '/docs/tokens' }),
+    reverse: false,
+  },
 };
 
 /**
  * Reversed layout — image on the right, text on the left.
  */
 export const Reversed = {
-	args: {
-		title: "Accessible by default",
-		text: "Every component ships with ARIA attributes, keyboard navigation, and focus management built in. No extra configuration required.",
-		media: JSON.stringify({
-			src: "https://placehold.co/640x480",
-			alt: "Accessibility diagram",
-			kind: "image",
-		}),
-		reverse: true,
-	},
+  args: {
+    title: 'Accessible by default',
+    text: 'Every component ships with ARIA attributes, keyboard navigation, and focus management built in. No extra configuration required.',
+    media: JSON.stringify({
+      src: 'https://placehold.co/640x480',
+      alt: 'Accessibility diagram',
+      kind: 'image',
+    }),
+    reverse: true,
+  },
 };
 
 /**
  * Video media variant.
  */
 export const Video = {
-	args: {
-		title: "See it in action",
-		text: "Watch how quickly you can spin up a fully-themed UI with our component library.",
-		media: JSON.stringify({
-			src: "https://www.w3schools.com/html/mov_bbb.mp4",
-			alt: "Demo video",
-			kind: "video",
-		}),
-		cta: JSON.stringify({ label: "Try it yourself", href: "/playground" }),
-		reverse: false,
-	},
+  args: {
+    title: 'See it in action',
+    text: 'Watch how quickly you can spin up a fully-themed UI with our component library.',
+    media: JSON.stringify({
+      src: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      alt: 'Demo video',
+      kind: 'video',
+    }),
+    cta: JSON.stringify({ label: 'Try it yourself', href: '/playground' }),
+    reverse: false,
+  },
 };

package/src/components/media-text/media-text.test.js

@@ -0,0 +1,72 @@
+import { strict as assert } from 'node:assert';
+import { afterEach, describe, it } from 'node:test';
+import { cleanup, fixture } from '../../test-utils/index.js';
+import './media-text.js';
+
+const mediaJson = (media) => JSON.stringify(media);
+
+describe('Media Text Component', () => {
+  let element;
+
+  afterEach(() => {
+    cleanup(element);
+  });
+
+  it('should render with default properties', async () => {
+    element = await fixture('grantcodes-media-text');
+    assert.ok(element, 'Element should be created');
+    assert.ok(element.shadowRoot, 'Element should have shadow root');
+  });
+
+  it('should apply dimensions and eager loading to the image', async () => {
+    element = await fixture('grantcodes-media-text', {
+      media: mediaJson({ src: '/a.jpg', alt: 'A', width: 1200, height: 800 }),
+    });
+
+    const img = element.shadowRoot.querySelector('img');
+    assert.strictEqual(img.getAttribute('width'), '1200', 'Image width should be set');
+    assert.strictEqual(img.getAttribute('height'), '800', 'Image height should be set');
+    assert.strictEqual(
+      img.getAttribute('loading'),
+      'eager',
+      'Media must not be lazy by default so above-the-fold images are not deferred',
+    );
+  });
+
+  it('should honour an explicit lazy loading hint', async () => {
+    element = await fixture('grantcodes-media-text', {
+      media: mediaJson({ src: '/a.jpg', alt: 'A', loading: 'lazy' }),
+    });
+
+    const img = element.shadowRoot.querySelector('img');
+    assert.strictEqual(img.getAttribute('loading'), 'lazy');
+  });
+
+  it('should apply dimensions and poster to the video', async () => {
+    element = await fixture('grantcodes-media-text', {
+      media: mediaJson({
+        kind: 'video',
+        src: '/a.mp4',
+        alt: 'A video',
+        poster: '/poster.jpg',
+        width: 1280,
+        height: 720,
+      }),
+    });
+
+    const video = element.shadowRoot.querySelector('video');
+    assert.strictEqual(video.getAttribute('width'), '1280');
+    assert.strictEqual(video.getAttribute('height'), '720');
+    assert.strictEqual(video.getAttribute('poster'), '/poster.jpg');
+  });
+
+  it('should omit dimensions when the media object does not declare them', async () => {
+    element = await fixture('grantcodes-media-text', {
+      media: mediaJson({ src: '/a.jpg', alt: 'A' }),
+    });
+
+    const img = element.shadowRoot.querySelector('img');
+    assert.strictEqual(img.hasAttribute('width'), false);
+    assert.strictEqual(img.hasAttribute('height'), false);
+  });
+});

package/src/components/newsletter/index.js

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