@pictogrammers/components 0.5.20 → 0.5.21

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@pictogrammers/components",
     "type": "module",
-    "version": "0.5.20",
+    "version": "0.5.21",
     "license": "MIT",
     "author": "Austin Andrews",
     "scripts": {

package/pg/modal/__examples__/basic/basic.ts

@@ -1,11 +1,21 @@
 import { Component, Part, Prop } from '@pictogrammers/element';
 import PgModal from '../../modal';
 
+import '../../../modalHeader/modalHeader';
+import '../../../modalBody/modalBody';
+import '../../../modalFooter/modalFooter';
+
 import template from './basic.html';
 
 @Component({
   selector: 'x-my-modal',
-  template: `<main>Hello! <button part="close">Close</button></main>`
+  template: `
+    <pg-modal-header>My Modal</pg-modal-header>
+    <pg-modal-body>Hello!</pg-modal-body>
+    <pg-modal-footer>
+      <button part="close">Close</button>
+    </pg-modal-footer>
+  `
 })
 export class XMyModal extends PgModal {
 

package/pg/modalBody/README.md

@@ -0,0 +1,17 @@
+# `<pg-modal-body>`
+
+The `pg-modal-body` component is a presentational component for the body section of a `PgModal`.
+
+```typescript
+import '@pictogrammers/components/pg/modalBody';
+```
+
+```html
+<pg-modal-body>Content</pg-modal-body>
+```
+
+## CSS Variables
+
+| CSS Variables            | Default        | Description |
+| ------------------------- | --------------- | ----------- |
+| `--pg-modal-body-padding` | `0.5rem 1rem` | Padding     |

package/pg/modalBody/index.ts

@@ -0,0 +1,3 @@
+import PgModalBody from './modalBody';
+
+export default PgModalBody;

package/pg/modalBody/modalBody.css

@@ -0,0 +1,6 @@
+:host {
+  display: block;
+}
+[part="body"] {
+  padding: var(--pg-modal-body-padding, 0.5rem 1rem);
+}

package/pg/modalBody/modalBody.html

@@ -0,0 +1,3 @@
+<main part="body">
+  <slot></slot>
+</main>

package/pg/modalBody/modalBody.ts

@@ -0,0 +1,13 @@
+import { Component } from '@pictogrammers/element';
+
+import template from './modalBody.html';
+import style from './modalBody.css';
+
+@Component({
+  selector: 'pg-modal-body',
+  style,
+  template
+})
+export default class PgModalBody extends HTMLElement {
+
+}

package/pg/modalFooter/README.md

@@ -0,0 +1,23 @@
+# `<pg-modal-footer>`
+
+The `pg-modal-footer` component is a presentational component for the footer section of a `PgModal`.
+
+```typescript
+import '@pictogrammers/components/pg/modalFooter';
+```
+
+```html
+<pg-modal-footer>
+  <button>Close</button>
+</pg-modal-footer>
+```
+
+## CSS Variables
+
+| CSS Variables                       | Default        | Description     |
+| ------------------------------------- | --------------- | --------------- |
+| `--pg-modal-footer-background`      | `#f1f1f1`      | Background      |
+| `--pg-modal-footer-border-color`    | `#ccc`         | Border Color    |
+| `--pg-modal-footer-padding`         | `0.75rem 1rem` | Padding         |
+| `--pg-modal-footer-justify-content` | `flex-end`     | Justify Content |
+| `--pg-modal-footer-gap`             | `0.5rem`       | Gap Between Items |

package/pg/modalFooter/index.ts

@@ -0,0 +1,3 @@
+import PgModalFooter from './modalFooter';
+
+export default PgModalFooter;

package/pg/modalFooter/modalFooter.css

@@ -0,0 +1,12 @@
+:host {
+  display: block;
+}
+[part="footer"] {
+  display: flex;
+  flex-direction: row;
+  padding: var(--pg-modal-footer-padding, 0.75rem 1rem);
+  border-top: 1px solid var(--pg-modal-footer-border-color, #ccc);
+  background: var(--pg-modal-footer-background, #f1f1f1);
+  justify-content: var(--pg-modal-footer-justify-content, flex-end);
+  gap: var(--pg-modal-footer-gap, 0.5rem);
+}

package/pg/modalFooter/modalFooter.html

@@ -0,0 +1,3 @@
+<footer part="footer">
+  <slot></slot>
+</footer>

package/pg/modalFooter/modalFooter.ts

@@ -0,0 +1,13 @@
+import { Component } from '@pictogrammers/element';
+
+import template from './modalFooter.html';
+import style from './modalFooter.css';
+
+@Component({
+  selector: 'pg-modal-footer',
+  style,
+  template
+})
+export default class PgModalFooter extends HTMLElement {
+
+}

package/pg/modalHeader/README.md

@@ -0,0 +1,19 @@
+# `<pg-modal-header>`
+
+The `pg-modal-header` component is a presentational component for the header section of a `PgModal`.
+
+```typescript
+import '@pictogrammers/components/pg/modalHeader';
+```
+
+```html
+<pg-modal-header>Title</pg-modal-header>
+```
+
+## CSS Variables
+
+| CSS Variables                     | Default     | Description  |
+| ---------------------------------- | ----------- | ------------ |
+| `--pg-modal-header-background`    | `#f1f1f1`   | Background   |
+| `--pg-modal-header-border-color`  | `#ccc`      | Border Color |
+| `--pg-modal-header-padding`       | `0.75rem 1rem` | Padding  |

package/pg/modalHeader/index.ts

@@ -0,0 +1,3 @@
+import PgModalHeader from './modalHeader';
+
+export default PgModalHeader;

package/pg/modalHeader/modalHeader.css

@@ -0,0 +1,9 @@
+:host {
+  display: block;
+}
+[part="header"] {
+  border-bottom: 1px solid var(--pg-modal-header-border-color, #ccc);
+  background: var(--pg-modal-header-background, #f1f1f1);
+  padding: var(--pg-modal-header-padding, 0.75rem 1rem);
+  font-size: 1.25rem;
+}

package/pg/modalHeader/modalHeader.html

@@ -0,0 +1,3 @@
+<header part="header">
+  <slot></slot>
+</header>

package/pg/modalHeader/modalHeader.ts

@@ -0,0 +1,13 @@
+import { Component } from '@pictogrammers/element';
+
+import template from './modalHeader.html';
+import style from './modalHeader.css';
+
+@Component({
+  selector: 'pg-modal-header',
+  style,
+  template
+})
+export default class PgModalHeader extends HTMLElement {
+
+}