Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(card): redefine interface #1131

Merged
merged 22 commits into from
Apr 4, 2022
Merged

feat(card): redefine interface #1131

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
f492754
feat(card): top action slot
rachelbt Nov 17, 2021
eb63ecb
action right side padding change
rachelbt Nov 17, 2021
657e4cc
viv-771-card-action-slot #comment css fix
rachelbt Nov 22, 2021
55e5419
slot description fix
rachelbt Nov 23, 2021
6e7d069
Merge branch 'master' into VIV-771-card-action-slot
rachelbt Nov 24, 2021
888f461
viv-771-card-action-slot #comment change slot name
rachelbt Nov 25, 2021
1cbab96
viv-771-card-action-slot #comment html structure changes and css fixes
rachelbt Nov 25, 2021
2018d0e
change Actions slot name to footer
rachelbt Dec 15, 2021
803780b
Merge branch 'master' into VIV-771-card-action-slot
rachelbt Dec 15, 2021
8ca8d95
Merge branch 'master' into VIV-771-card-action-slot
rachelbt Mar 9, 2022
7e46209
Merge branch 'master' into VIV-771-card-action-slot
rachelbt Mar 20, 2022
1758f23
feat(card): structure and meta slot
rachelbt Mar 21, 2022
5159195
property name change and readme update
rachelbt Mar 21, 2022
1ee7daf
code review changes
rachelbt Mar 22, 2022
3d242c2
Merge branch 'master' into VIV-771-card-action-slot
rachelbt Mar 27, 2022
d9852c4
properties name change
rachelbt Mar 27, 2022
2961c27
update test md
rachelbt Mar 27, 2022
ca13870
slot name
rachelbt Mar 28, 2022
6a2af8c
Merge branch 'master' into VIV-771-card-action-slot
rachelbt Apr 4, 2022
e0dc1ab
update snapshot
rinaok Apr 4, 2022
4987203
update snapshot
rinaok Apr 4, 2022
f477c37
Update components/card/test/card.test.js
YonatanKra Apr 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
16 changes: 10 additions & 6 deletions __snapshots__/Card.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,18 @@
</div>
<div class="vwc-card-info">
<header class="no-content">
<div class="vwc-card-header">
<slot name="graphics">
</slot>
<div class="vwc-card-title">
<div class="vwc-card-header-wrapper">
<div class="vwc-card-header">
<slot name="graphics">
</slot>
<div class="vwc-card-title">
</div>
</div>
<div class="vwc-card-subtitle">
</div>
</div>
<div class="vwc-card-subtitle">
</div>
<slot name="top-action">
</slot>
</header>
<div class="vwc-card-supportText">
</div>
Expand Down
1 change: 1 addition & 0 deletions components/card/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ Cards contain content and actions about a single subject.
|`graphics`|Content to show in the header icon section. If exists, overrides the `icon` attribute’s definition|
|`actions`|Content to show in the actions section. If exists, overrides the `action-icon` and `action-text` attributes definitions|
|`media`|Slot to add anything inside the `media` area|
|`top-action`|Slot to add an `icon` or `button-icon` or `toggle-button-icon` |
rachelbt marked this conversation as resolved.
Show resolved Hide resolved

## Styling tips

Expand Down
25 changes: 21 additions & 4 deletions components/card/src/vwc-card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,19 @@
&-info {
display: flex;
flex-flow: column;
padding: 24px;
padding: 1rem 1rem 1.5rem 1.5rem;
}

&-header {
display: flex;
align-items: flex-start;
&-wrapper {
display: inline-flex;
flex-direction: column;
align-content: space-between;
padding-top: 0.5rem;
padding-right: 0.5rem;
}
}

&-title,
Expand Down Expand Up @@ -48,18 +56,23 @@
color: var(#{scheme-variables.$vvd-color-neutral-70});
}

&-supportText {
padding-right: 0.5rem;
}

&-actions {
display: inline-flex;
flex-direction: column;
align-items: flex-end;
margin-top: 16px;
margin-right: 0.5rem;
}
}

header {
display: inline-flex;
flex-direction: column;
align-content: space-between;
display: flex;
align-items: flex-start;
gap: 0.5rem;

:host([supporting-text]) & {
margin-bottom: 12px;
Expand All @@ -78,6 +91,10 @@ header {
height: 20px;
}

::slotted([slot="top-action"i]) {
margin-left: auto;
rachelbt marked this conversation as resolved.
Show resolved Hide resolved
}

.no-content {
display: none;
}
Expand Down
15 changes: 9 additions & 6 deletions components/card/src/vwc-card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,13 +87,16 @@ export class VWCCard extends LitElement {
private renderHeader() {
return html`
<header class="${this.headerClass}">
<div class="vwc-card-header">
<slot name="graphics" @slotchange="${this.graphicsSlotChanged}">
${this.headerIcon ? this.renderIcon() : ''}
</slot>
<div class="vwc-card-title">${this.heading}</div>
<div class="vwc-card-header-wrapper">
<div class="vwc-card-header">
<slot name="graphics" @slotchange="${this.graphicsSlotChanged}">
${this.headerIcon ? this.renderIcon() : ''}
yinonov marked this conversation as resolved.
Show resolved Hide resolved
</slot>
<div class="vwc-card-title">${this.heading}</div>
</div>
<div class="vwc-card-subtitle">${this.subtitle}</div>
</div>
<div class="vwc-card-subtitle">${this.subtitle}</div>
<slot name="top-action"></slot>
</header>`;
}

Expand Down
24 changes: 23 additions & 1 deletion components/card/stories/card.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,25 @@ TrimmedTitles.args = {
'supporting-text': 'Supporting Text'
};

const TopActionTemplate = args => html`
<style>
#root-inner {
width: 400px
}
</style>
<vwc-card ...=${spread(args)} header-icon="chat-line">
<vwc-icon-button-toggle onicon="more-vertical-solid" officon="more-vertical-solid" slot="top-action"></vwc-icon-button-toggle>
</vwc-card>
`;
export const TopAction = TopActionTemplate.bind({});
TopAction.args = {
label: 'Top Action Example',
heading: 'A card with a long, very long card title',
subtitle: 'Long secondary text very long secondary text secondary text very long secondary text ',
'supporting-text': 'Lorem ipsum dolor sit amet, consectet adipiscing elit'
};


const IconTemplate = args => html`
<style>
#root-inner {
Expand Down Expand Up @@ -142,7 +161,10 @@ const AllTemplate = args => html`
</style>
<vwc-card ...=${spread(args)}>
<div style="height: 150px; width: 100%; background-color: #871EFF;" slot="media"></div>
<vwc-button slot="actions" shape="pill" layout="outlined" icon="info">Click</vwc-button>
<vwc-icon-button-toggle onicon="more-vertical-solid" officon="more-vertical-solid" slot="top-action"></vwc-icon-button-toggle>
<vwc-button slot="actions" shape="pill" layout="outlined" label="Action">
<vwc-icon type="arrow-bold-right-line" slot="trailingIcon"></vwc-icon>
</vwc-button>
</vwc-card>`;
export const AllOptions = AllTemplate.bind({});
AllOptions.args = {
Expand Down
Binary file modified ui-tests/snapshots/vwc-card.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions ui-tests/tests/vwc-card/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import '@vonage/vwc-card';
import '@vonage/vwc-icon-button';
import '@vonage/vwc-icon-button-toggle';

export async function createElementVariations(wrapper) {
const elementWrapper = document.createElement('div');
Expand Down Expand Up @@ -69,6 +71,17 @@ export async function createElementVariations(wrapper) {
<vwc-button slot="actions" shape="pill" layout="outlined" icon="info" type="submit" outlined="">Click
</vwc-button>
</vwc-card>

<vwc-card label="trimmed Heading" heading="Very Long Card title That spreads into two or three lines" subtitle="I'm a very long subtitle should I be trimmed?" supporting-text="I'm a Supporting text, cant be line trimmed. Lorem ipsum dolor sit amet, consectet adipiscing elit" style="--title-line-clamp :1; --subtitle-line-clamp:1">
<vwc-icon-button-toggle onicon="bookmark-full" officon="bookmark" connotation="cta" slot="top-action"></vwc-icon-button-toggle>
</vwc-card>

<vwc-card label="trimmed Heading" heading="Very Long Card title That spreads into two or three lines" subtitle="I'm a very long subtitle should I be trimmed?" supporting-text="I'm a Supporting text, cant be line trimmed. Lorem ipsum dolor sit amet, consectet adipiscing elit">
<vwc-icon-button icon="more-vertical-solid" slot="top-action"></vwc-icon-button>
</vwc-card>
<vwc-card label="trimmed Heading" heading="Very Long Card title That spreads into two or three lines" subtitle="I'm a very long subtitle should I be trimmed?" supporting-text="I'm a Supporting text, cant be line trimmed. Lorem ipsum dolor sit amet, consectet adipiscing elit">
<vwc-icon-button icon="pin-2-solid" slot="top-action"></vwc-icon-button>
</vwc-card>
`;
wrapper.appendChild(elementWrapper);
}
Expand Down