feat(card): omit elevation in favor of card (#1278)

* feat(card): omit elevation in favor of card

omit elevation in favor of card elevation member support

* change content slot name to main

Co-authored-by: Rachel BT <rachel.tannenbaum@vonage.com>
Co-authored-by: rachelbt <rachelbt@users.noreply.github.com>

__snapshots__/Card.md

@@ -10,8 +10,8 @@
  <slot name="media">
  </slot>
  </div>
- <div class="vwc-card-content">
- <slot name="content">
+ <slot name="main">
+ <div class="vwc-card-content">
  <div class="vwc-card-wrapper">
  <header class="no-content vwc-card-header">
  <slot name="graphic">
@@ -28,8 +28,8 @@
  </div>
  <div class="vwc-card-text">
  </div>
- </slot>
- </div>
+ </div>
+ </slot>
  <div class="no-content vwc-card-footer">
  <slot name="footer">
  </slot>

components/card/src/vwc-card.ts

@@ -88,17 +88,17 @@ export class VWCCard extends LitElement {
  <div class="vwc-card-media">
  <slot name="media"></slot>
  </div>
- <div class="vwc-card-content">
- <slot name="content">
+ <slot name="main">
+ <div class="vwc-card-content">
  <div class="vwc-card-wrapper">
  ${this.renderHeader()}
  <slot name="meta"></slot>
  </div>
  <div class="vwc-card-text">
  ${this.text ? this.text : nothing}
  </div>
- </slot>
- </div>
+ </div>
+ </slot>
  <div class="vwc-card-footer ${classMap(footerClassMap)}">
  <slot name="footer" @slotchange="${this.footerSlotChanged}"></slot>
  </div>

components/card/stories/arg-types.js

@@ -1,4 +1,7 @@
 export const argTypes = {
-
+ elevation : {
+ type: 'select',
+ options: ['0', '2', '4', '8', '12', '16', '24'],
+ }
 };
 

components/card/stories/card-introduction.config.mjs

@@ -2,7 +2,7 @@ export default {
  sourcePath: '../readme.md',
  outputName: 'card-introduction',
  story: {
- title: 'Alpha/Components/Card',
+ title: 'Components/Card',
  name: 'Introduction',
  parameters: {
  options: {

components/card/stories/card.stories.js

@@ -4,7 +4,7 @@ import { spread } from '@open-wc/lit-helpers';
 import { argTypes } from './arg-types.js';
 
 export default {
- title: 'Alpha/Components/Card',
+ title: 'Components/Card',
  component: 'vwc-card',
  argTypes
 };
@@ -159,7 +159,7 @@ CardFooter.args = {
 };
 
 
-const ContentSlotTemplate = args => html`
+const MainSlotTemplate = args => html`
  <style>
  #root-inner {
  width: 300px
@@ -170,18 +170,16 @@ const ContentSlotTemplate = args => html`
  }
  </style>
  <vwc-card>
- <img style="width: 100%;" alt="test" src="https://www.w3schools.com/tags/img_girl.jpg" slot="media"/>
- <div slot="content">
+ <div slot="main">
  <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',
+export const MainSlot = MainSlotTemplate.bind({});
+MainSlot.args = {
+ label: 'Main Slot',
 };
 
 

components/expansion-panel/stories/expansion-panel.stories.js

@@ -39,7 +39,9 @@ const OutlinedTemplate = args => html`
  <style>
  vwc-expansion-panel {
  width: 500px;
+ display: block;
  padding: 0.5rem;
+ border-radius: 6px;
  }
  form {
  display: grid;

ui-tests/tests/vwc-card/index.js

@@ -94,11 +94,11 @@ export async function createElementVariations(wrapper) {
  <vwc-button slot="footer" shape="pill" layout="outlined" icon="info" type="submit" outlined="">Click</vwc-button>
  <img slot="media" src="https://doodleipsum.com/300x150/flat?bg=EB765D&i=7d5ed3bc0c215d1359b2a63d03cf1540" alt="Sitting on Floor by Gustavo Pedrosa" />
  <img slot="graphic" src="https://doodleipsum.com/40x40/hand-drawn?bg=7463D9&amp;i=af462b28146d2ac91599602e083ddee5" alt="Sitting on Floor by Gustavo Pedrosa">
- <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>
+ <div slot="main">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 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>
+ <div slot="main">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>
  
  <vwc-card label="card with meta-no header" text="I'm a Supporting text, cant be line trimmed. Lorem ipsum dolor sit amet, consectet adipiscing elit">