diff --git a/__snapshots__/Card.md b/__snapshots__/Card.md index c610959be7..de8e50482c 100644 --- a/__snapshots__/Card.md +++ b/__snapshots__/Card.md @@ -3,36 +3,40 @@ #### `should internal contents` ```html -
-
- - -
-
- -
-
- - -
-
-
-
+ +
+
+
+ + +
+
+ +
+
+ + +
+
+
+
+
+
+ + +
+
-
- -
-
- -
-
- - +
+ + +
+
- + ``` diff --git a/components/card/readme.md b/components/card/readme.md index 5165cf0cd7..50a65422a1 100644 --- a/components/card/readme.md +++ b/components/card/readme.md @@ -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 diff --git a/components/card/src/vwc-card.scss b/components/card/src/vwc-card.scss index 54093ccc13..afe7a6c32b 100644 --- a/components/card/src/vwc-card.scss +++ b/components/card/src/vwc-card.scss @@ -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; @@ -96,5 +99,11 @@ display: none; } +vwc-elevation { + block-size: inherit; + &::part(base) { + block-size: inherit; + } +} diff --git a/components/card/src/vwc-card.ts b/components/card/src/vwc-card.ts index 46952a20ff..037bd9584b 100644 --- a/components/card/src/vwc-card.ts +++ b/components/card/src/vwc-card.ts @@ -7,7 +7,7 @@ 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 { @@ -15,6 +15,9 @@ declare global { } } +const elevationSets = ['0' , '2', '4', '8', '12' , '16' , '24']; +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 @@ -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; @@ -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` -
-
- -
-
- - ${this.renderHeader()} -
- ${this.text ? this.text : nothing} + + +
+
+
+
- -
-
- +
+ + ${this.renderHeader()} +
+ ${this.text ? this.text : nothing} +
+ +
+
+ +
+
-
+ `; } diff --git a/components/card/stories/card.stories.js b/components/card/stories/card.stories.js index 10ee0414db..b892e38bef 100644 --- a/components/card/stories/card.stories.js +++ b/components/card/stories/card.stories.js @@ -58,7 +58,7 @@ TrimmedTitles.args = { 'text': 'Supporting Text' }; -const TopActionTemplate = args => html` +const MetaTemplate = args => html` + + test +
+

A card with no heading + Subtitle or text

+

Can contain whatever is needed.

+

Media slot and Footer Slot are still available if needed

+
+ Click + `; + +export const ContentSlot = ContentSlotTemplate.bind({}); +ContentSlot.args = { + label: 'content Slot', +}; + + const AllTemplate = args => html` - +
diff --git a/components/card/test/card.test.js b/components/card/test/card.test.js index 2cb85a2667..87ed18dd1b 100644 --- a/components/card/test/card.test.js +++ b/components/card/test/card.test.js @@ -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 () { @@ -258,7 +261,7 @@ describe('Card', () => { const textElement = actualElement.shadowRoot.querySelector('.vwc-card-text'); - expect(textElement.innerText) + expect(trimText(textElement.textContent)) .to .equal(supportingText); }); @@ -274,7 +277,7 @@ describe('Card', () => { const supportingTextElement = actualElement.shadowRoot.querySelector('.vwc-card-text'); - expect(supportingTextElement.innerText) + expect(trimText(supportingTextElement.textContent)) .to .equal(supportingText); }); diff --git a/ui-tests/snapshots/vwc-card.png b/ui-tests/snapshots/vwc-card.png index ac8a599182..c7cf7d75d6 100644 Binary files a/ui-tests/snapshots/vwc-card.png and b/ui-tests/snapshots/vwc-card.png differ diff --git a/ui-tests/tests/vwc-card/index.js b/ui-tests/tests/vwc-card/index.js index 31b9ba24d9..1d7e4f52a3 100644 --- a/ui-tests/tests/vwc-card/index.js +++ b/ui-tests/tests/vwc-card/index.js @@ -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; } @@ -97,7 +97,7 @@ export async function createElementVariations(wrapper) {
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
 - +
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
 `;