Skip to content

Commit

Permalink
feat(empty-state): support graphic assigned node (#1322)
Browse files Browse the repository at this point in the history 
* feat(empty-state): support graphic assigned node

Closes #1320

* snapshot

* snapshot?

* redundant test

* remove unused imports

* remove unit test styling
  • Loading branch information
@yinonov
yinonov committed Jul 1, 2022
1 parent 3d69add commit bde72fd
Show file tree
Hide file tree
Showing 7 changed files with 65 additions and 102 deletions.
12 changes: 7 additions & 5 deletions __snapshots__/Empty State.md
View file
Expand Up @@ -4,11 +4,13 @@

```html
<section>
<vwc-icon
class="illustration"
type="chat-line"
>
</vwc-icon>
<slot name="graphic">
<vwc-icon
class="illustration"
type="chat-line"
>
</vwc-icon>
</slot>
<h3 class="heading">
Empty State Title
</h3>
Expand Down
4 changes: 3 additions & 1 deletion components/empty-state/src/vwc-empty-state-base.ts
View file
Expand Up @@ -28,7 +28,9 @@ export class VWCEmptyStateBase extends LitElement {

protected override render(): TemplateResult {
return html`<section>
${this.icon ? this.renderIcon() : nothing}
<slot name="graphic">
${this.icon ? this.renderIcon() : nothing}
</slot>
${this.heading ? this.renderHeading() : nothing}
${this.body ? this.renderBody() : nothing}
</section>`;
Expand Down
10 changes: 10 additions & 0 deletions components/empty-state/stories/empty-state.stories.js
View file
Expand Up @@ -2,6 +2,7 @@ import '@vonage/vwc-empty-state/vwc-empty-state.js';
import { html } from 'lit-element';
import { spread } from '@open-wc/lit-helpers';
import { argTypes } from './arg-types.js';
import { svg } from './svg.js';

export default {
title: 'Alpha/Components/⭐️ Empty State',
Expand All @@ -13,3 +14,12 @@ const Template = args => html`<vwc-empty-state ...=${spread(args)}></vwc-empty-s

export const Basic = Template.bind({});
Basic.args = { icon: 'chat-line', heading: 'Empty State Title', body: 'Empty state body for more information' };

const SlottedTemplate = args => html`<vwc-empty-state ...=${spread(args)}>
<span slot="graphic">
${svg}
</span>
</vwc-empty-state>`;

export const Slotted = SlottedTemplate.bind({});
Slotted.args = { heading: 'Empty State Title', body: 'Empty state body for more information' };
45 changes: 45 additions & 0 deletions components/empty-state/stories/svg.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

47 changes: 0 additions & 47 deletions components/list/test/list-check-item.test.js
View file
Expand Up @@ -63,51 +63,4 @@ describe('check list item', () => {
assertListItemDimensions(listOfItems.children, itemsNum, 72);
});
});

describe('general styling', async () => {
it('should have collectly positioned checkbox (right side, one line)', async () => {
const listItem = await prepareConfiguredItem(false, false);
const checkbox = listItem.shadowRoot.querySelector('mwc-checkbox');
assertComputedStyle(checkbox, { width: '22px', height: '22px' });
assertDistancePixels(listItem, checkbox, 'right', 16);
assertDistancePixels(listItem, checkbox, 'top', 9);
});

it('should have collectly positioned checkbox (left side, one line)', async () => {
const listItem = await prepareConfiguredItem(true, false);
const checkbox = listItem.shadowRoot.querySelector('mwc-checkbox');
assertComputedStyle(checkbox, { width: '22px', height: '22px' });
assertDistancePixels(listItem, checkbox, 'left', 16);
assertDistancePixels(listItem, checkbox, 'top', 9);
});

it('should have collectly positioned checkbox (right side, two lines)', async () => {
const listItem = await prepareConfiguredItem(false, true);
const checkbox = listItem.shadowRoot.querySelector('mwc-checkbox');
assertComputedStyle(checkbox, { width: '22px', height: '22px' });
assertDistancePixels(listItem, checkbox, 'right', 16);
assertDistancePixels(listItem, checkbox, 'top', 25);
});

it('should have collectly positioned checkbox (left side, two lines)', async () => {
const listItem = await prepareConfiguredItem(true, true);
const checkbox = listItem.shadowRoot.querySelector('mwc-checkbox');
assertComputedStyle(checkbox, { width: '22px', height: '22px' });
assertDistancePixels(listItem, checkbox, 'left', 16);
assertDistancePixels(listItem, checkbox, 'top', 25);
});
});

async function prepareConfiguredItem(left = false, twoline = false) {
const [result] = addElements(
textToDomToParent(
`<${VWC_CHECK_LIST_ITEM} ${left ? 'left' : ''} ${twoline ? 'twoline' : ''}>
Item 0
${twoline ? '<span slot="secondary">Additional info</span>' : ''}
</${VWC_CHECK_LIST_ITEM}>`
)
);
await result.updateComplete;
return result;
}
});
49 changes: 0 additions & 49 deletions components/list/test/list-radio-item.test.js
View file
Expand Up @@ -4,8 +4,6 @@ import {
textToDomToParent,
waitNextTask,
isolatedElementsCreation,
assertComputedStyle,
assertDistancePixels
} from '../../../test/test-helpers.js';
import { chaiDomDiff } from '@open-wc/semantic-dom-diff';
import {
Expand Down Expand Up @@ -63,51 +61,4 @@ describe('radio list item', () => {
assertListItemDimensions(listOfItems.children, itemsNum, 72);
});
});

describe('general styling', async () => {
it('should have collectly positioned radio (right side, one line)', async () => {
const listItem = await prepareConfiguredItem(false, false);
const radio = listItem.shadowRoot.querySelector('mwc-radio');
assertComputedStyle(radio, { width: '22px', height: '22px' });
assertDistancePixels(listItem, radio, 'right', 16);
assertDistancePixels(listItem, radio, 'top', 9);
});

it('should have collectly positioned radio (left side, one line)', async () => {
const listItem = await prepareConfiguredItem(true, false);
const radio = listItem.shadowRoot.querySelector('mwc-radio');
assertComputedStyle(radio, { width: '22px', height: '22px' });
assertDistancePixels(listItem, radio, 'left', 16);
assertDistancePixels(listItem, radio, 'top', 9);
});

it('should have collectly positioned radio (right side, two lines)', async () => {
const listItem = await prepareConfiguredItem(false, true);
const radio = listItem.shadowRoot.querySelector('mwc-radio');
assertComputedStyle(radio, { width: '22px', height: '22px' });
assertDistancePixels(listItem, radio, 'right', 16);
assertDistancePixels(listItem, radio, 'top', 25);
});

it('should have collectly positioned radio (left side, two lines)', async () => {
const listItem = await prepareConfiguredItem(true, true);
const radio = listItem.shadowRoot.querySelector('mwc-radio');
assertComputedStyle(radio, { width: '22px', height: '22px' });
assertDistancePixels(listItem, radio, 'left', 16);
assertDistancePixels(listItem, radio, 'top', 25);
});
});

async function prepareConfiguredItem(left = false, twoline = false) {
const [result] = addElements(
textToDomToParent(
`<${VWC_RADIO_LIST_ITEM} ${left ? 'left' : ''} ${twoline ? 'twoline' : ''}>
Item 0
${twoline ? '<span slot="secondary">Additional info</span>' : ''}
</${VWC_RADIO_LIST_ITEM}>`
)
);
await result.updateComplete;
return result;
}
});
Binary file modified ui-tests/snapshots/vwc-empty-state.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit bde72fd

Please sign in to comment.