feat(vwc-inline): add more inline size options

common/foundation/src/constants.ts

@@ -21,9 +21,15 @@ export enum Shape {
 }
 
 export enum Size {
+	xxx_Small = 'xxxs',
+	xx_Small = 'xxs',
+	x_Small = 'xs',
 	Small = 'sm',
 	Medium = 'md',
 	Large = 'lg',
+	x_Large = 'xl',
+	xx_Large = 'xxl',
+	xxx_Large = 'xxxl',
 }
 
 /* eslint-disable no-shadow */

components/inline/readme.md

@@ -0,0 +1,9 @@
+# vwc-inline
+
+## Properties
+
+| Property        | Attribute        | Type                              | Default   | Description                                                                      |
+| --------------- | ---------------- | --------------------------------- | --------- | -------------------------------------------------------------------------------- |
+| `columnSpacing` | `column-spacing` | `"sm" \| "md"`                    | "md"      | Sets the initial preferred spacing of a column from predefined available options |
+| `columnBasis`   | `column-basis`   | `"sm" \| "md" \| "lg" \| "block"` | "sm"      | Sets the initial preferred measure of a column from predefined available options |
+| `auto-sizing`      | `auto-sizing`       | `"fill" \| "fit"`                 | undefined | Sets the initial preferred auto-sizing from predefined available options            |

components/inline/src/vwc-inline.scss

@@ -2,60 +2,57 @@
 
 $items-min-inline-size-v-name: --items-min-inline-size;
 $items-spacing-v-name: --items-spacing;
-
-$inline-template: --inline-template;
+$gutters-v-name: --gutters;
+$auto-sizing: --auto-sizing;
 
 /* #region SIZE */
 $items-min-inline-sizes: (
-	'sm': 10rem,
-	'md': 20rem,
-	'lg': 30rem,
+	sm: 10rem,
+	md: 20rem,
+	lg: 30rem,
+);
+
+/* #region SPACEING */
+$items-spacings: (
+	xs: 16px,
+	md: 24px,
+	xl: 32px,
 );
 
 @each $key, $value in $items-min-inline-sizes {
-	:host([size='#{$key}'i]) {
+	.layout-column-basis-#{$key} {
 		#{$items-min-inline-size-v-name}: $value;
 	}
 }
-/* #endregion */
-
-/* #region SPACING */
-$items-spacings: (
-	// ! hardcoded values should be defined and auto-generated to, and by, design tokens
-	'sm': 24px,
-	'md': 32px
-);
 
 @each $key, $value in $items-spacings {
-	:host([spacing='#{$key}'i]) {
+	.layout-column-spacing-#{$key} {
 		#{$items-spacing-v-name}: $value;
 	}
+	.layout-gutters-#{$key} {
+		#{$gutters-v-name}: $value;
+	}
 }
-/* #endregion */
 
-:host {
+.layout {
 	display: grid;
-	width: 100%;
+	margin: var(#{$gutters-v-name}, #{map.get($items-spacings, 0)});
 	gap: var(#{$items-spacing-v-name}, #{map.get($items-spacings, md)});
 	grid-auto-rows: min-content;
 	grid-template-columns: repeat(
-		var(#{$inline-template}),
-		minmax(
-			var(
-				#{$items-min-inline-size-v-name},
-				#{map.get($items-min-inline-sizes, lg)}
-			),
-			1fr
-		)
+		var(#{$auto-sizing}),
+		minmax(var(#{$items-min-inline-size-v-name}, #{map.get($items-min-inline-sizes, lg)}), 1fr)
 	);
-	inline-size: 100%;
-}
 
-:host(:not(template)),
-:host([template="fit"i]) {
-	#{$inline-template}: auto-fit;
-}
+	&:not(.layout-auto-sizing-fill),
+	&.layout-auto-sizing-fit {
+		#{$auto-sizing}: auto-fit;
+	}
+	&.layout-auto-sizing-fill {
+		#{$auto-sizing}: auto-fill;
+	}
 
-:host([template="fill"i]) {
-	#{$inline-template}: auto-fill;
+	&.layout-column-basis-block {
+		grid-template-columns: 1fr;
+	}
 }

components/inline/src/vwc-inline.ts

@@ -5,33 +5,67 @@ import {
 	property,
 	TemplateResult,
 } from 'lit-element';
+import { classMap } from 'lit-html/directives/class-map';
+import type { ClassInfo } from 'lit-html/directives/class-map';
 import { Size } from '@vonage/vvd-foundation/constants';
-
 import { style } from './vwc-inline.css.js';
 
-type SizeSpacing = Extract<Size, Size.Small | Size.Medium>;
 
 // eslint-disable-next-line no-shadow
-export enum InlineTemplate {
+export enum AutoSizing {
 	Fit = 'fit',
 	Fill = 'fill',
 }
 
+type InlineGutters = Extract<Size, Size.x_Small | Size.Medium | Size.x_Large>;
+type ColumnSpacing = Extract<Size, Size.x_Small | Size.Medium | Size.x_Large>;
+type ColumnBasis = Extract<Size, Size.Small | Size.Medium | Size.Large> | 'block';
+
 @customElement('vwc-inline')
 export class Inline extends LitElement {
 	static styles = style;
 
-	@property({ type: String, reflect: true })
-	size: Size = Size.Small;
+	/**
+	 * @prop inlineGutters - sets the initial preferred margin from predefined available options
+	 * @public
+	 * */
+	@property({ type: String, reflect: true, attribute: 'gutters' })
+	inlineGutters?: InlineGutters;
+
+	/**
+	 * @prop columnBasis - sets the initial preferred measure of a column from predefined available options
+	 * @public
+	 * */
+	@property({ type: String, reflect: true, attribute: 'column-basis' })
+	columnBasis: ColumnBasis = Size.Small;
 
-	@property({ type: String, reflect: true })
-	spacing: SizeSpacing = Size.Small;
+	/**
+	 * @prop columnSpacing - sets the initial preferred spacing of a column from predefined available options
+	 * @public
+	 * */
+	@property({ type: String, reflect: true, attribute: 'column-spacing' })
+	columnSpacing: ColumnSpacing = Size.Medium;
 
-	@property({ type: String, reflect: true })
-	template?: InlineTemplate;
+	/**
+	 * @prop auto-sizing - sets the initial preferred auto-sizing from predefined available options
+	 * @public
+	 * */
+	@property({ type: String, reflect: true, attribute: 'auto-sizing' })
+	autoSizing?: AutoSizing;
+
+	protected getRenderClasses(): ClassInfo {
+		return {
+			[`layout-column-basis-${this.columnBasis}`]: !!this.columnBasis,
+			[`layout-gutters-${this.inlineGutters}`]: !!this.inlineGutters,
+			[`layout-column-spacing-${this.columnSpacing}`]: !!this.columnSpacing,
+			[`layout-auto-sizing-${this.autoSizing}`]: !!this.autoSizing,
+		};
+	}
 
 	protected render(): TemplateResult {
-		return html`<slot></slot>`;
+		return html`<div class="layout ${classMap(this.getRenderClasses())}">
+			<slot></slot>
+		</div>`;
 	}
 }
 

components/inline/stories/arg-types.js

@@ -1,24 +1,30 @@
 import { Size } from '@vonage/vvd-foundation/constants';
-import { InlineTemplate } from '../vwc-inline';
-
-
+import { AutoSizing } from '../vwc-inline';
+// Example use:
+const SIZE = { ...Size, Block: 'block' };
 export const argTypes = {
-	template: {
+	'auto-sizing': {
 		control: {
 			type: 'select',
-			options: Object.values(InlineTemplate),
+			options: Object.values(AutoSizing),
 		}
 	},
-	size: {
+	'column-basis': {
 		control: {
 			type: 'select',
-			options: Object.values(Size),
+			options: Object.values(SIZE).filter(s => ([SIZE.Small, SIZE.Medium, SIZE.Large, SIZE.Block].includes(s))),
 		}
 	},
-	spacing: {
+	'column-spacing': {
 		control: {
 			type: 'select',
-			options: Object.values(Size).filter(s => [Size.Small, Size.Medium].includes(s)),
+			options: Object.values(Size).filter(s => [Size.x_Small, Size.Medium, Size.x_Large].includes(s)),
+		}
+	},
+	gutters: {
+		control: {
+			type: 'select',
+			options: Object.values(Size).filter(s => [Size.x_Small, Size.Medium, Size.x_Large].includes(s)),
 		}
 	}
 };

components/inline/stories/inline-basic.stories.js

@@ -100,3 +100,7 @@ const Template = args => html`
 
 export const Basic = Template.bind({});
 Basic.args = {};
+
+export const Block = Template.bind({});
+Block.args = { 'column-basis': 'block' };
+

components/inline/test/inline.test.js

@@ -2,7 +2,7 @@ import '../vwc-inline.js';
 import {
 	waitNextTask,
 	textToDomToParent,
-	isolatedElementsCreation,
+	isolatedElementsCreation
 } from '../../../test/test-helpers.js';
 import { chaiDomDiff } from '@open-wc/semantic-dom-diff';
 
@@ -19,6 +19,7 @@ const inlineHtmlStr = `<${VWC_INLINE}>
 const getNewElement = () => isolatedElementsCreation()(textToDomToParent(inlineHtmlStr))[0];
 
 describe('inline', () => {
+	let addElement = isolatedElementsCreation();
 	describe('basics', () => {
 		it(`${VWC_INLINE} is defined as a custom element`, async () => {
 			assert.exists(
@@ -29,32 +30,25 @@ describe('inline', () => {
 		it('should have internal contents', async () => {
 			const actualElement = getNewElement();
 			await waitNextTask();
-			expect(actualElement.shadowRoot.innerHTML).to.equalSnapshot();
+			expect(actualElement.shadowRoot.firstElementChild.innerHTML).to.equalSnapshot();
 		});
 	});
 
-	describe('API', () => {
-		it(`should set template fit`, async () => {
-			const actualElement = getNewElement();
-			actualElement.template = "fit";
-			actualElement.style.width = "1300px";
-			await waitNextTask();
-			const { shadowRoot: { firstElementChild: slot } } = actualElement;
-			const assignedElements = slot.assignedElements();
-			const [childEl] = assignedElements;
-			await waitNextTask();
-			expect(childEl.clientWidth).to.equal(307);
-		});
-		it(`should set template fill`, async () => {
-			const actualElement = getNewElement();
-			actualElement.template = "fill";
-			actualElement.style.width = "1300px";
-			await waitNextTask();
-			const { shadowRoot: { firstElementChild: slot } } = actualElement;
-			const assignedElements = slot.assignedElements();
-			const [childEl] = assignedElements;
-			await waitNextTask();
-			expect(childEl.clientWidth).to.equal(165);
+	describe('default values', () => {
+		it('should have the default values', async () => {
+			const COMPONENT_PROPERTIES = {
+				columnBasis: 'sm', columnSpacing: 'md'
+			};
+			for await (const [key, value] of Object.entries(COMPONENT_PROPERTIES)) {
+				const [actualElement] = addElement(
+					textToDomToParent(`<${VWC_INLINE}></${VWC_INLINE}>`)
+				);
+				await actualElement.updateComplete;
+				expect(actualElement[key])
+					.to
+					.equal(value);
+			}
 		});
 	});
 });
+