feat(card)!: migrate pfe-card to lit

**Features**

- add parts to card
- update docs (#1842)
  - transfer css props from docs to CEM
  - chore: fix href in demo
- add {{version}} to element classes

**Fixes**

- make imgSrc optional

**Tests**

- adjust test for changes in slot controller
- e2e tests with page object model

**Breaking Changes**

- remove public `has_` attrs

**Docs**

- inline docs
- refactor docs page
- add changeset
- document CSS parts
- fix a11y bugs in demo
- use pfe-styles
- simplify demo

Co-Authored-By: Michael Potter <[email protected]>
Co-Authored-By: Steven Spriggs <[email protected]>

Author: 3 people

.changeset/card.md

@@ -0,0 +1,18 @@
+---
+"@patternfly/pfe-card": major
+---
+
+## 🔥 Migrate to Lit
+
+This release migrates `<pfe-card>` to LitElement.
+
+### NEW: CSS Shadow Parts!
+- Adds `header`, `body`, and `footer` CSS parts to `<pfe-card>`
+
+### Breaking Changes
+- Initial render is now [asynchronous](https://lit.dev/docs/components/lifecycle/#reactive-update-cycle)
+  If your code assumes that shadow DOM is ready once the element is constructed, update it to `await element.updateComplete`
+- Deprecates `pfe-card--header` and `pfe-card--footer` slots. Use `header` and `footer` instead
+
+
+See [docs](https://patternflyelements.org/components/card/) for more info

elements/pfe-card/.npmignore

@@ -1,87 +1,36 @@
-# PFElements Card Element
+# PatternFly Elements Card
+         
+Read more about Card in the [PatternFly Elements Card documentation](https://patternflyelements.org/components/card)
 
-## Usage
+##  Installation
+
+Load `<pfe-card>` via CDN:
 
 ```html
-<pfe-card>
-  <h2 slot="pfe-card--header">Card header</h2>
-  <p>This is the pfe-card body.</p>
-  <pfe-cta slot="pfe-card--footer">
-    <a href="#">Footer link</a>
-  </pfe-cta>
-</pfe-card>
+<script src="https://unpkg.com/@patternfly/pfe-card?module"></script>
 ```
 
-## Slots
-All slots are optional.  If the slot is not defined, the content will be added to the `body` region of the card.
-
-### Header
-If this slot is used, we expect a heading level tag (h1, h2, h3, h4, h5, h6).  An icon, svg, or use of the icon component are also valid in this region.
-
-### Default slot (body)
-Any content that is not designated for the `header` or `footer` slot, will go to this slot.
-
-### Footer
-Use this slot for anything that you want to be stuck to the base of the card.  This region is bottom-aligned.
-
-## Attributes
-
-<style>
-    .color-preview {
-        display: inline-block;
-        width: 1em;
-        height: 1em;
-        vertical-align: middle;
-        background-color: var(--bg, #ffffff);
-        border: 1px solid #444444;
-    }
-</style>
-
-There are several attributes available for customizing the visual treatment of this container.
-
-- `color`: Options include darkest, darker, accent, complement, lighter, lightest.  The card has a default value of `#dfdfdf`. Your context will influence these colors so check there first if you are seeing inconsistencies.
-
-    | color | hex |
-    |-------|-----|
-    | lightest | <span class="color-preview" style="--bg:#ffffff"></span> #ffffff |
-    | lighter | <span class="color-preview" style="--bg:#ececec"></span> #ececec |
-    | default | <span class="color-preview" style="--bg:#dfdfdf"></span> #dfdfdf |
-    | darker | <span class="color-preview" style="--bg:#464646"></span> #464646 |
-    | darkest | <span class="color-preview" style="--bg:#131313"></span> #131313 |
-    | accent | <span class="color-preview" style="--bg:#ee0000"></span> #ee0000 |
-    | complement | <span class="color-preview" style="--bg:#0477a4"></span> #0477a4 |
-
-- `img-src`: Optional background image applied to the entire card container.  Alignment of this image can be managed using the `--pfe-card--BackgroundPosition` variable which is set to `center center` by default.
-- `size`: Optionally adjusts the padding on the container.  Accepts: `small`.
-- `overflow`: Optionally allows an image or element to overflow the padding on the container. This property should be added to the direct child of the slotm such as on an image tag; should be added to the element that you want to overflow the container. Accepts: `top`, `right`, `bottom`, `left`.
-- `border`: Optionally apply a border color and weight to the entire card container. The default color and weight is `#d2d2d2` and `1px`, respectively.
+Or, if you are using [NPM](https://npm.im), install it
 
-## Variables
-There are several powerful variables available to hook into and override default styles.
-
-- **Background color**: Though using the `pfe-color` attribute is strongly recommended when setting the background color for the band, you can also use completely custom colors by updating the `--pfe-band--BackgroundColor` variable.  If you update this value manually, you should also update the `--context` context variable to invoke the right context on it and it's child elements.  Supported contexts include: `light`, `dark`, and `saturated`.
-- **Background position**: This is designed for use with the `pfe-img-src` attribute to allow you to align your background image.  Default value is `center center`. **Variable name:** `--pfe-card--BackgroundPosition`.
-- **Border**: This allows the customization of a border around the entire container.  There is a variable for the entire border shorthand (transparent by default) or you can hook into the individual properties. **Variable name:** `--pfe-card--BorderRadius` and `--pfe-card--Border` or `--pfe-card--BorderWeight`, `--pfe-card--BorderStyle`, `--pfe-card--BorderColor`.
-- **Padding**: You can customize the padding around the outside of the card container by connecting to either the shortcut padding variable or just one or more of the individual padding regions. **Variable names:** `--pfe-card--Padding` or `--pfe-card--PaddingTop`, `--pfe-card--PaddingRight`, `--pfe-card--PaddingBottom`, `--pfe-card--PaddingLeft`.
-
-## Test
-
-    npm run test
-
-## Build
-
-    npm run build
-
-## Demo
+```bash
+npm install @patternfly/pfe-card
+```
 
-From the PFElements root directory, run:
+Then once installed, import it to your application:
 
-    npm start
+```js
+import '@patternfly/pfe-card';
+```
 
-## Code style
+## Usage
 
-Card (and all PFElements) use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.
+```html
+<pfe-card>
+  <h2 slot="header">Card header</h2>
+  <p>This is the pfe-card body.</p>
+  <pfe-cta slot="footer">
+    <a href="#">Footer link</a>
+  </pfe-cta>
+</pfe-card>
+```
 
-[prettier]: https://github.com/prettier/prettier/
-[prettier-ed]: https://prettier.io/docs/en/editors.html
-[web-component-tester]: https://github.com/Polymer/web-component-tester

elements/pfe-card/README.md

@@ -0,0 +1,5 @@
+import { pfeCustomElementsManifestConfig } from '@patternfly/pfe-tools/custom-elements-manifest.js';
+
+export default pfeCustomElementsManifestConfig({
+  globs: ['pfe-*.ts'],
+});

elements/pfe-card/custom-elements-manifest.config.js

@@ -1,33 +1,27 @@
-/* For demo only */
-.demo-cards {
-    display: flex;
-    flex-wrap: wrap;
+:host,
+body {
+  padding: 1em;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, calc(25% - 32px)));
+  grid-auto-rows: max-content;
+  gap: 32px;
 }
 
-.demo-cards>* {
-    margin: 0 16px 32px;
-    min-width: 200px;
-    width: calc(25% - 32px);
+.button-series::part(footer) {
+  display: flex;
+  gap: 15px;
 }
 
-.button-series {
-    display: inline-block;
-    margin-bottom: -15px;
-    margin-left: -15px;
+#first-image {
+  grid-column: 1/2;
 }
 
-.button-series>* {
-    display: inline-block;
-    margin-left: 15px;
-    margin-bottom: 15px;
-}
-
-h2[slot="pfe-card--header"] {
-    font-size: 1.1em;
-    font-weight: bolder;
+h2[slot="header"] {
+  font-size: 1.1em;
+  font-weight: bolder;
 }
 
 .custom-border {
-    --pfe-card--BorderColor: #eee;
-    --pfe-card--BorderWeight: 1px;
+  --pfe-card--BorderColor: #eee;
+  --pfe-card--BorderWeight: 1px;
 }