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

fix(card): integrate elevation #1273

Merged
merged 21 commits into from
Apr 24, 2022
Merged

fix(card): integrate elevation #1273

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
dd2b953
fix(card): integrate elevation
rachelbt Apr 5, 2022
78e2be4
typo fix
rachelbt Apr 5, 2022
2bf3552
update test md
rachelbt Apr 5, 2022
a64e785
style for elevation part
rachelbt Apr 5, 2022
d636d4f
clean code
rachelbt Apr 5, 2022
be19147
Merge branch 'master' into issue1135-card-elevation
rachelbt Apr 10, 2022
98c0439
card block-size
rachelbt Apr 10, 2022
a1b6b47
Merge branch 'master' into issue1135-card-elevation
rachelbt Apr 13, 2022
c52b331
Merge branch 'master' into issue1135-card-elevation
rachelbt Apr 13, 2022
66f94d1
add elevation story + meta
rachelbt Apr 17, 2022
4de72e4
Merge branch 'master' into issue1135-card-elevation
rachelbt Apr 17, 2022
c5fd0d8
content slot story
rachelbt Apr 17, 2022
9fff43a
change dp to elevation
rachelbt Apr 18, 2022
5a45d2a
containment
yinonov Apr 18, 2022
bfc25db
updates
yinonov Apr 18, 2022
f9cc290
update snapshot
rachelbt Apr 19, 2022
c00a8a6
Fix Safari test
YonatanKra Apr 20, 2022
50e7956
remove only :)
rachelbt Apr 20, 2022
9a4dfa8
typo
rachelbt Apr 20, 2022
4796e88
typo
rachelbt Apr 24, 2022
739ccb3
Merge branch 'master' into issue1135-card-elevation
yinonov Apr 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 29 additions & 25 deletions __snapshots__/Card.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,36 +3,40 @@
#### `should internal contents`

```html
<div class="vwc-card">
<div class="vwc-card-media">
<slot name="media">
</slot>
</div>
<div class="vwc-card-content">
<slot name="content">
<header class="no-content vwc-card-header">
<div class="vwc-card-header-content">
<slot name="graphic">
</slot>
<div>
<div class="vwc-card-title">
</div>
<div class="vwc-card-subtitle">
<vwc-elevation>
<div class="vwc-card">
<div class="vwc-card-container">
<div class="vwc-card-media">
<slot name="media">
</slot>
</div>
<div class="vwc-card-content">
<slot name="content">
<header class="no-content vwc-card-header">
<div class="vwc-card-header-content">
<slot name="graphic">
</slot>
<div>
<div class="vwc-card-title">
</div>
<div class="vwc-card-subtitle">
</div>
</div>
</div>
<slot name="meta">
</slot>
</header>
<div class="vwc-card-text">
</div>
</div>
<slot name="meta">
</slot>
</header>
<div class="vwc-card-text">
</div>
</slot>
</div>
<div class="no-content vwc-card-footer">
<slot name="footer">
</slot>
<div class="no-content vwc-card-footer">
<slot name="footer">
</slot>
</div>
</div>
</div>
</div>
</vwc-elevation>

```

27 changes: 14 additions & 13 deletions components/card/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,22 +17,23 @@ Cards contain content and actions about a single subject.

### Properties/Attributes

|name|attr/prop/reflected|type| description |
|--- |--- |--- |----------------------|
|`heading`|reflected|string| The heading text |
|`subtitle`|reflected|string| The sub-heading text |
|`card-text`|reflected|string| The card text |
|`header-icon`|reflected|string| A valid vivid icon type |
| name |attr/prop/reflected|type| description |
|--------|--- |--- |-------------------------------|
| `heading` |reflected|string| The heading text |
| `subtitle` |reflected|string| The sub-heading text |
| `text` |reflected|string| The card text |
| `icon` |reflected|string| A valid vivid icon type |
| `elevation` |reflected|string| control the card elevation dp |

### Slots

| name | description |
|------------|----------------------------------------------------------------------------------------------------|
| `graphics` | Content to show in the header icon section. If exists, overrides the `header-icon` attribute’s definition |
| `meta` | Slot for action content in the card header |
| `media` | Slot to add anything inside the `media` area |
| `footer` | Slot for action content placed the card footer |
| `content` | Slot for content of the card. If exist, overrides the `heading`, `subtitle`, `card-text` and `header-icon`
| name | description |
|-----------|----------------------------------------------------------------------------------------------------|
| `graphic` | Content to show in the header icon section. If exists, overrides the `header-icon` attribute’s definition |
| `meta` | Slot for action content in the card header |
| `media` | Slot to add anything inside the `media` area |
| `footer` | Slot for action content placed the card footer |
| `content` | Slot for content of the card. If exist, overrides the `heading`, `subtitle`, `card-text` and `header-icon`
## Styling tips

### Setting card's width
Expand Down
23 changes: 16 additions & 7 deletions components/card/src/vwc-card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,17 @@
@use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables' as scheme-variables;

.vwc-card {
display: flex;
overflow: hidden;
flex-flow: column;
background-color: var(#{scheme-variables.$vvd-color-canvas});
block-size: inherit;
block-size: 100%;
border-radius: 6px;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05), 0 8px 8px rgba(0, 0, 0, 0.05), 0 2px 16px rgba(0, 0, 0, 0.1);
color: var(#{scheme-variables.$vvd-color-on-canvas});

&-container {
display: flex;
overflow: hidden;
flex-flow: column;
block-size: inherit;
border-radius: inherit;
color: var(#{scheme-variables.$vvd-color-on-canvas});
}

&-content {
display: flex;
Expand Down Expand Up @@ -96,5 +99,11 @@
display: none;
}

vwc-elevation {
block-size: inherit;
&::part(base) {
block-size: inherit;
}
}


47 changes: 32 additions & 15 deletions components/card/src/vwc-card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,17 @@ import { property } from 'lit-element/lib/decorators.js';
import { classMap } from 'lit-html/directives/class-map.js';
import '@vonage/vwc-button';
import '@vonage/vwc-icon';

import '@vonage/vwc-elevation';

declare global {
interface HTMLElementTagNameMap {
'vwc-card': VWCCard;
}
}

const elevationSets = ['0' , '2', '4', '8', '12' , '16' , '24'];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can be imported from elevation

Copy link
Contributor Author

@rachelbt rachelbt Apr 5, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

there are none in the elevation comp... 😨

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

in design tokens then?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nop... the design tokens are like this: --vvd-shadow-surface-4dp

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we should open a ticket to support ts types of elevation tokens

export type IndicatorElevationSets = typeof elevationSets;

/**
* @cssprop [--title-line-clamp] defines the number of lines presented before trim + ellipsis in the card title
* @cssprop [--subtitle-line-clamp] defines the number of lines presented before trim + ellipsis in the card subtitle
Expand Down Expand Up @@ -53,6 +56,13 @@ export class VWCCard extends LitElement {
})
text: string | undefined;

@property({
reflect: false,
attribute: 'elevation',
type: String
})
elevation: IndicatorElevationSets[number] = '4';

private IconSlottedItems?: Node[];
#shouldShowFooterSlot: boolean | undefined;

Expand All @@ -64,27 +74,34 @@ export class VWCCard extends LitElement {
return (this.headerContentExists) ? '' : 'no-content';
}


protected override render(): unknown {
const footerClassMap = {
'no-content': !(this.#shouldShowFooterSlot)
};
return html`
<div class="vwc-card">
<div class="vwc-card-media">
<slot name="media"></slot>
</div>
<div class="vwc-card-content">
<slot name="content">
${this.renderHeader()}
<div class="vwc-card-text">
${this.text ? this.text : nothing}
<vwc-elevation .dp=${this.elevation}>
<!-- there are 2 wrapper due to a safari bug failing 'filter: drop-shadow'
from rendering shadow on an element with 'overflow: hidden' -->
<div class="vwc-card">
<div class="vwc-card-container">
<div class="vwc-card-media">
<slot name="media"></slot>
</div>
</slot>
</div>
<div class="vwc-card-footer ${classMap(footerClassMap)}">
<slot name="footer" @slotchange="${this.footerSlotChanged}"></slot>
<div class="vwc-card-content">
<slot name="content">
${this.renderHeader()}
<div class="vwc-card-text">
${this.text ? this.text : nothing}
</div>
</slot>
</div>
<div class="vwc-card-footer ${classMap(footerClassMap)}">
<slot name="footer" @slotchange="${this.footerSlotChanged}"></slot>
</div>
</div>
</div>
</div>
</vwc-elevation>
`;
}

Expand Down
50 changes: 43 additions & 7 deletions components/card/stories/card.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ TrimmedTitles.args = {
'text': 'Supporting Text'
};

const TopActionTemplate = args => html`
const MetaTemplate = args => html`
<style>
#root-inner {
width: 400px
Expand All @@ -68,12 +68,21 @@ const TopActionTemplate = args => html`
<vwc-icon-button-toggle onicon="more-vertical-solid" officon="more-vertical-solid" slot="meta"></vwc-icon-button-toggle>
</vwc-card>
`;
export const TopAction = TopActionTemplate.bind({});
TopAction.args = {
export const Meta = MetaTemplate.bind({});
Meta.args = {
label: 'Meta Slot Example',
heading: 'Meta Slot Example',
text: 'Meta slot can be used fo extra date on the card like icon or a button icon'
};



export const Elevation = Template.bind({});
Elevation.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 ',
'text': 'Lorem ipsum dolor sit amet, consectet adipiscing elit'
heading: 'A card with a higher elevation',
text: 'To emphasize its content',
elevation: '16'
};


Expand Down Expand Up @@ -149,6 +158,33 @@ CardFooter.args = {
'text': 'Use the \'footer\' slot in order to add actionable items.'
};


const ContentSlotTemplate = args => html`
<style>
#root-inner {
width: 300px
}

vwc-card {
margin: 15px;
}
</style>
<vwc-card>
<img style="width: 100%;" alt="test" src="https://www.w3schools.com/tags/img_girl.jpg" slot="media"/>
<div slot="content">
<p>A card with no heading + Subtitle or text</p>
<p>Can contain whatever is needed.</p>
<p>Media slot and Footer Slot are still available if needed</p>
</div>
<vwc-button slot="footer" shape="pill" layout="outlined" icon="info">Click</vwc-button>
</vwc-card>`;

export const ContentSlot = ContentSlotTemplate.bind({});
ContentSlot.args = {
label: 'content Slot',
};


const AllTemplate = args => html`
<style>
#root-inner {
Expand Down Expand Up @@ -192,7 +228,7 @@ const InAGridTemplate = args => html`
height: 100%;
}
</style>
<vwc-layout column-basis="sm" column-spacing="md" gutters="xl" style="--layout-grid-template-columns: repeat(4, 250px)">
<vwc-layout column-basis="md" column-spacing="md" gutters="xl">
<vwc-card heading="Card 1" icon="chat-line" subtitle="Card no. 1"
text="This is the right card for you!">
<div style="height: 150px; width: 100%; background-color: #871EFF;" slot="media"></div>
Expand Down
7 changes: 5 additions & 2 deletions components/card/test/card.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,6 +246,9 @@ describe('Card', () => {
});

describe(`supportingText`, function () {
function trimText(text) {
return text.replace(/(\t|\n)/gm, "");
}
const supportingText = 'This is the supporting text';

it(`should set the text according to the attribute`, async function () {
Expand All @@ -258,7 +261,7 @@ describe('Card', () => {
const textElement = actualElement.shadowRoot.querySelector('.vwc-card-text');


expect(textElement.innerText)
expect(trimText(textElement.textContent))
.to
.equal(supportingText);
});
Expand All @@ -274,7 +277,7 @@ describe('Card', () => {

const supportingTextElement = actualElement.shadowRoot.querySelector('.vwc-card-text');

expect(supportingTextElement.innerText)
expect(trimText(supportingTextElement.textContent))
.to
.equal(supportingText);
});
Expand Down
Binary file modified ui-tests/snapshots/vwc-card.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions ui-tests/tests/vwc-card/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export async function createElementVariations(wrapper) {
display: grid;
grid-template-columns: repeat(3, 300px);
gap: 1rem;
background-color: gray;
background-color: lightgray;
padding: 1rem;
}
</style>
Expand Down Expand Up @@ -97,7 +97,7 @@ export async function createElementVariations(wrapper) {
<div slot="content">I'm the card content that overrides the content from attributes. I have no text styles or any styles for that metter :) You can do whatever you want here</div>
</vwc-card>

<vwc-card >
<vwc-card elevation="24">
<div slot="content">I'm the card content that overrides the content from attributes. I have no text styles or any styles for that matter :) You can do whatever you want here</div>
</vwc-card>
`;
Expand Down