VwcCard does not support `graphics` and `meta` slots

[KB-NVM]

According to Vivid storybook Card component supports graphics and meta slots to put some content (i.e. a button) there however the wrapper VwcCard seems to not respect that - setting either of those slots has no effect.

Patch file to reproduce in vivid-react's storybook: VwcCard.txt

[k-paxian]

Ok, we have two issues here

• meta slot is there when you specify heading attribute to the card, w/o header text provided you don't have a header rendered, which contains the meta slot

  <VwcCard
    heading='All Options on Deck'
  />

• graphics slot actually doesn't exists :smile: instead you should use graphic slot. That's a pure vivid documentation issue @yinonov https://vivid.vonage.com/?path=/story/alpha-components-card--introduction

[yinonov]

not sure when but typo's been fixed https://vivid.vonage.com/?path=/story/alpha-components-card--introduction#slots

regarding the heading as a condition to meta - this isn't the spec nor I could have reproduce it. can u share repro steps?

https://vivid.vonage.com/?path=/story/alpha-components-card--meta&args=label:Meta+Slot+Example;heading:;text:Meta+slot+can+be+used+fo+extra+date+on+the+card+like+icon+or+a+button+icon

[KB-NVM]

@yinonov I played a bit with the Card component in the Storybook and I can confirm that displaying of meta slot is dependent on setting one of either heading, subtitle or icon. As soon as at least one of those three is set then meta slot is rendered.

Please see this: https://vivid.vonage.com/?path=/story/alpha-components-card--all-options&args=heading:!null;icon:!null;subtitle:!null

HTML code:

<style>
  #root-inner {
    width: 300px
  }

  vwc-card {
    margin: 15px;
  }
</style>
<vwc-card
  label="All Options"
  text="Use the 'footer' slot in order to add actionable items."
>
  <div
    style="height: 150px; width: 100%; background-color: #871EFF;"
    slot="media"
  ></div>
  <vwc-icon-button-toggle
    onicon="more-vertical-solid"
    officon="more-vertical-solid"
    slot="meta"
  ></vwc-icon-button-toggle>
  <vwc-button
    slot="footer"
    shape="pill"
    layout="outlined"
    label="Action"
    type="submit"
    outlined=""
  >
    <vwc-icon type="arrow-bold-right-line" slot="trailingIcon"></vwc-icon>
    <button style="display: none;" type="submit"></button>
  </vwc-button>
</vwc-card>

Even though vwc-icon-button-toggle with slot meta is present it is not rendered on the card.

[yinonov]

Thanks! meta is indeed hidden. it is rendered but hides due to lack of more relevant heading parts. @rachelbt can u please attend this at https://github.com/Vonage/vivid/blob/2f4f541d2dc0652b55b4a94eabf8d90d44c88966/components/card/src/vwc-card.ts#L132-L136