Feature/picture matte

lib/blocks.ts

@@ -205,13 +205,13 @@ function figure(slice: Slice): BlockType {
 		attribution,
 		caption,
 		image,
-		device = 'None',
 		border = false,
+		frame = 'None',
 	} = slice.primary;
 
 	const output = {
 		border,
-		device: device as Device,
+		frame,
 		source: image,
 		attribution: undefined,
 		caption: undefined,

lib/types.ts

@@ -34,7 +34,7 @@ export type SpaceScale = 'xxnarrow' | 'xnarrow' | 'narrow' | 'medium' | 'wide' |
 export type Prominence = 'Small' | 'Medium' | 'Large';
 export type GallerySize = 'small' | 'medium' | 'large';
 export type ImageFit = 'default' | 'contain' | 'cover';
-export type Device = 'None' | 'Phone' | 'Tablet (horizontal)' | 'Tablet (vertical)';
+export type Frame = 'None' | 'Matte' | 'Frame & matte' | 'Panel' | 'Phone' | 'Tablet (horizontal)' | 'Tablet (vertical)';
 
 // --- type ---
 export type TypeScale = 'alpha' | 'beta' | 'gamma' | 'delta' | 'epsilon' | 'zeta';

src/components/blocks/Collage.astro

@@ -8,15 +8,15 @@ import Image from '@components/elements/Image.astro';
 import Figure from '@components/blocks/Figure.astro';
 
 // types
-import type { SpaceScale, FormattedText, ImageFit, Device } from '@lib/types';
+import type { SpaceScale, FormattedText, ImageFit, Frame } from '@lib/types';
 import type { ImageField } from '@prismicio/types';
 
 type CollageItemSize = 'Default' | 'Large' | 'XLarge';
 type CollageItemPriority = '1' | '2' | '3';
 
 type CollageItem = {
 	source: ImageField,
-	device?: Device,
+	frame?: Frame,
 	priority?: CollageItemPriority,
 	relativeSize?: CollageItemSize,
 };

src/components/blocks/Figure.astro

@@ -6,14 +6,15 @@ import '@styles/tokens/contentWidth.css';
 // child components
 import Image from '@components/elements/Image.astro';
 import DeviceFrame from '@components/elements/DeviceFrame.astro';
+import PictureFrame from '@components/elements/PictureFrame.astro';
 import Caption from '@components/blocks/FigureCaption.astro';
 import RevealOnScroll from '@components/layout/RevealOnScroll.astro';
 
 // typescript
 import type { ImageField } from '@prismicio/types';
 
 import type {
-	Device,
+	Frame,
 	FormattedText,
 	ImageFit,
 } from '@lib/types';
@@ -23,36 +24,90 @@ export interface Props {
 	attribution?: FormattedText;
 	border?: boolean;
 	caption?: FormattedText;
-	device?: Device;
+	frame?: Frame;
+	device?: Frame;
 	fit?: ImageFit;
 	class?: string;
 }
 
+// props
 const {
 	source,
 	attribution,
 	border,
 	caption,
+	frame = 'None',
 	device = 'None',
 	class: className,
 	fit,
 } = Astro.props as Props;
+
+console.log(`Figure: ${frame}, ${source?.alt}`)
+
+const frameComponents = {
+	'None': {
+		component: Image,
+		props: {
+			border,
+			fit,
+			source,
+		},
+	},
+	'Matte': {
+		component: PictureFrame,
+		props: {
+			type: 'matte',
+			source,
+		},
+	},
+	'Frame & matte': {
+		component: PictureFrame,
+		props: {
+			type: 'frame',
+			source,
+		},
+	},
+	'Panel': {
+		component: PictureFrame,
+		props: {
+			type: 'panel',
+			source,
+		},
+	},
+	'Phone': {
+		component: DeviceFrame,
+		props: {
+			type: 'Phone',
+			source,
+		},
+	},
+'Tablet (landscape)': {
+		component: DeviceFrame,
+		props: {
+			type: 'Tablet (landscape)',
+			source,
+		},
+	},
+'Tablet (portrait)': {
+		component: DeviceFrame,
+		props: {
+			type: 'Tablet (portrait)',
+			source,
+		},
+	},
+};
+
+const {
+	component: FrameComponent,
+	props,
+} = frameComponents[frame];
 ---
 
 <figure class={['figure', className].join(' ')}>
 	<RevealOnScroll>
 		<slot>
 			{source && (
-				device !== 'None'
-				? <DeviceFrame
-						type={device}
-						{source}
-					/>
-				: <Image
-						{border}
-						{fit}
-						{source}
-					/>
+				<FrameComponent {...props} />
 			)}
 		</slot>
 

src/components/elements/DeviceFrame.astro

@@ -9,13 +9,13 @@
 	import Image from '@components/elements/Image.astro';
 
 	// types
-	import type { Device } from '@lib/types';
+	import type { Frame } from '@lib/types';
 	import type { ImageField } from '@prismicio/types';
 
 	export interface Props {
 		source: ImageField,
 		class?: string,
-		type?: Device,
+		type?: Frame,
 	};
 
 	const {
@@ -25,7 +25,7 @@
 	} = Astro.props as Props;
 
 	const types = {
-		Phone: {
+		'Phone': {
 			className: 'phone',
 			ratio: '1/2',
 		},

src/components/elements/PictureFrame.astro

@@ -25,14 +25,23 @@ export interface Props {
 	frameThickness: number,
 	matteColor?: CSSVariable | HexColor | HSLColor | HSLAColor,
 	matteThickness?: number,
-	type?: 'frame' | 'panel',
+	type?: 'matte' | 'frame' | 'panel',
 };
 
 const types = {
+	// matte only
+	matte: {
+		matte: 18,
+		border: 0,
+	},
+
+	// picture frame
 	frame: {
 		matte: 20,
 		border: 0.25,
 	},
+
+	// framed panel/canvas
 	panel: {
 		matte: 2,
 		border: 0.25,
@@ -47,18 +56,22 @@ const {
 	frameThickness = types[type].border,
 	matteThickness = types[type].matte,
 	matteColor,
+	el = 'figure',
 } = Astro.props as Props;
 
 
 const { width, height } = source.dimensions;
 
 const matteAndFrameInPx = ((matteThickness / 100) * width) + (frameThickness * 16);
+console.log(matteAndFrameInPx);
 
 const aspectRatio = [
 	width + matteAndFrameInPx,
 	height + matteAndFrameInPx,
 ].join(' / ');
 
+const El = el;
+
 const classList = [
 	'picture',
 	type,
@@ -67,31 +80,31 @@ const classList = [
 
 const styleList = arrayToPunctatedString([
 	`--aspect-ratio: ${aspectRatio}`,
-	matteColor && `--matte-color: ${matteColor};`,
-	`--frame-thickness: ${frameThickness}em`,
+	`--frame-thickness: ${frameThickness > 0 ? `${frameThickness}em` : 0}`,
 	`--matte-thickness: ${matteThickness}%`,
+	matteColor && `--matte-color: ${matteColor};`,
 ]);
 ---
 
-<figure
+<El
 	class={classList}
 	style={styleList}
 >
 	<Image class="image" {source} />
-</figure>
+</El>
 
 <style is:global>
+	.picture.matte,
 	.picture.frame,
 	.picture.panel {
 		--frame-color: var(--color-primary);
 		--shadow-color: var(--color-shadow);
-		--matte-color: var(--color-island, #fff);
+		--matte-color: var(--color-well, #fff);
 
 		align-items: center;
 		aspect-ratio: var(--aspect-ratio);
 		background-color: var(--matte-color);
 		border: var(--frame-thickness) solid var(--frame-color);
-		box-shadow: 0 0.25em 0.5em var(--color-shadow);
 		display: flex;
 		flex-direction: column;
 		height: auto;
@@ -100,11 +113,16 @@ const styleList = arrayToPunctatedString([
 		max-height: 100%;
 	}
 
+	.picture.frame,
+	.picture.panel {
+		box-shadow: 0 0.25em 0.5em var(--color-shadow);
+	}
+
 	.picture.panel {
 		box-shadow: 0 0.7em 0.4em var(--color-shadow);
 	}
 
-	.picture .image {
+	.picture .image[width][height] {
 		width: calc(100% - var(--matte-thickness));
 	}
 </style>