feat(vwc-inline): add support for auto-fill/fit variance (#746)

* feat(vwc-inline): add support for auto-fill/fit variance * inline tests * test inline template prop * snapshot update
Vonage · Apr 6, 2021 · 17732b3 · 17732b3
1 parent 3f9fa1e
commit 17732b3
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 21 deletions.
diff --git a/__snapshots__/inline.md b/__snapshots__/inline.md
@@ -1,6 +1,8 @@
 # `inline`
 
-#### `should have internal contents`
+## `basics`
+
+####   `should have internal contents`
 
 ```html
 <slot>

diff --git a/components/inline/src/vwc-inline.scss b/components/inline/src/vwc-inline.scss
@@ -3,6 +3,8 @@
 $items-min-inline-size-v-name: --items-min-inline-size;
 $items-spacing-v-name: --items-spacing;
 
+$inline-template: --inline-template;
+
 /* #region SIZE */
 $items-min-inline-sizes: (
 	'sm': 10rem,
@@ -37,7 +39,7 @@ $items-spacings: (
 	gap: var(#{$items-spacing-v-name}, #{map.get($items-spacings, md)});
 	grid-auto-rows: min-content;
 	grid-template-columns: repeat(
-		auto-fit,
+		var(#{$inline-template}),
 		minmax(
 			var(
 				#{$items-min-inline-size-v-name},
@@ -48,3 +50,12 @@ $items-spacings: (
 	);
 	inline-size: 100%;
 }
+
+:host(:not(template)),
+:host([template="fit"i]) {
+	#{$inline-template}: auto-fit;
+}
+
+:host([template="fill"i]) {
+	#{$inline-template}: auto-fill;
+}
diff --git a/components/inline/src/vwc-inline.ts b/components/inline/src/vwc-inline.ts
@@ -11,6 +11,12 @@ import { style } from './vwc-inline.css.js';
 
 type SizeSpacing = Extract<Size, Size.Small | Size.Medium>;
 
+// eslint-disable-next-line no-shadow
+export enum InlineTemplate {
+	Fit = 'fit',
+	Fill = 'fill',
+}
+
 @customElement('vwc-inline')
 export class Inline extends LitElement {
 	static styles = style;
@@ -21,6 +27,9 @@ export class Inline extends LitElement {
 	@property({ type: String, reflect: true })
 	spacing: SizeSpacing = Size.Small;
 
+	@property({ type: String, reflect: true })
+	template?: InlineTemplate;
+
 	protected render(): TemplateResult {
 		return html`<slot></slot>`;
 	}

diff --git a/components/inline/stories/arg-types.js b/components/inline/stories/arg-types.js
@@ -1,7 +1,14 @@
 import { Size } from '@vonage/vvd-foundation/constants';
+import { InlineTemplate } from '../vwc-inline';
 
 
 export const argTypes = {
+	template: {
+		control: {
+			type: 'select',
+			options: Object.values(InlineTemplate),
+		}
+	},
 	size: {
 		control: {
 			type: 'select',
@@ -14,4 +21,4 @@ export const argTypes = {
 			options: Object.values(Size).filter(s => [Size.Small, Size.Medium].includes(s)),
 		}
 	}
-}
+};
diff --git a/components/inline/stories/inline-basic.stories.js b/components/inline/stories/inline-basic.stories.js
@@ -4,10 +4,10 @@ import { spread } from '@open-wc/lit-helpers';
 import { argTypes } from './arg-types.js';
 
 export default {
-	title: 'Components/Atoms/Inline',
+	title: 'Components/Beta/Inline',
 	component: 'vwc-inline',
 	argTypes
-}
+};
 
 const Template = args => html`
 <style>

diff --git a/components/inline/test/inline.test.js b/components/inline/test/inline.test.js
@@ -9,26 +9,52 @@ import { chaiDomDiff } from '@open-wc/semantic-dom-diff';
 chai.use(chaiDomDiff);
 
 const VWC_INLINE = 'vwc-inline';
+const inlineHtmlStr = `<${VWC_INLINE}>
+	<span>1</span>
+	<span>2</span>
+	<span>3</span>
+	<span>4</span>
+</${VWC_INLINE}>`;
+
+const getNewElement = () => isolatedElementsCreation()(textToDomToParent(inlineHtmlStr))[0];
 
 describe('inline', () => {
-	const addElement = isolatedElementsCreation();
+	describe('basics', () => {
+		it(`${VWC_INLINE} is defined as a custom element`, async () => {
+			assert.exists(
+				customElements.get(VWC_INLINE, `${VWC_INLINE} element is not defined`)
+			);
+		});
 
-	it(`${VWC_INLINE} is defined as a custom element`, async () => {
-		assert.exists(
-			customElements.get(VWC_INLINE, `${VWC_INLINE} element is not defined`)
-		);
+		it('should have internal contents', async () => {
+			const actualElement = getNewElement();
+			await waitNextTask();
+			expect(actualElement.shadowRoot.innerHTML).to.equalSnapshot();
+		});
 	});
 
-	it('should have internal contents', async () => {
-		const [actualElement] = addElement(
-			textToDomToParent(`<${VWC_INLINE}>
-				<span>1</span>
-				<span>2</span>
-				<span>3</span>
-				<span>4</span>
-			</${VWC_INLINE}>`)
-		);
-		await waitNextTask();
-		expect(actualElement.shadowRoot.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);
+		});
 	});
 });