@progressive-development/pd-content 0.0.6 → 0.0.8

package/package.json

@@ -3,7 +3,7 @@
   "description": "Progressive Development content components. ",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development UG",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

package/pd-box-view.js

@@ -0,0 +1,3 @@
+import { PdBoxView } from './src/PdBoxView.js';
+
+window.customElements.define('pd-box-view', PdBoxView);

package/src/PdBoxView.js

@@ -0,0 +1,49 @@
+import { html, css, LitElement } from 'lit';
+
+export class PdBoxView extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: grid;
+          grid-template-columns: repeat(
+            var(--squi-box-columns, 4),
+            minmax(var(--squi-box-min-width, 100px), 1fr)
+          );
+          /*grid-auto-rows: minmax(var(--squi-box-min-height, 100px), 1fr); Für mobile 1 cloum auskommentiert, ging auch für große Ansicht, also eher hinderlich?*/
+          gap: var(--squi-box-gap, 25px);
+        }
+
+        @media (min-width: 580px) {
+          .button-icon squi-icon {
+            margin: 0 0.5rem;
+          }
+          .button-icon.small squi-icon {
+            padding-right: 0.5rem;
+          }
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      primary: { type: Boolean },
+      gradient: { type: Boolean },
+      disabled: { type: Boolean },
+      text: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.primary = false;
+    this.gradient = true;
+    this.disabled = false;
+    this.text = 'Ok';
+  }
+
+  render() {
+    return html` <slot></slot> `;
+  }
+}

package/stories/box-view.stories.js

@@ -0,0 +1,61 @@
+import { html } from 'lit';
+import '../pd-box-view.js';
+
+export default {
+  title: 'PdContent/Box View',
+  component: 'pd-box-view',
+  argTypes: {
+    
+  },
+};
+
+function Template() {
+  return html`
+
+    <h1>4 Columns (default)</h1>
+
+    <pd-box-view>
+      <div style="background-color: blue;">Test</div>
+      <div style="background-color: red;">Test</div>
+      <div style="background-color: green;">Test</div>
+      <div style="background-color: black;">Test</div>
+      <div style="background-color: grey;">Test</div>
+      <div style="background-color: purple;">Test</div>
+    </pd-box-view>
+
+    <h1>2 Columns</h1>
+    <pd-box-view style="--squi-box-columns: 2;">
+      <div style="background-color: blue;">Test</div>
+      <div style="background-color: red;">Test</div>
+      <div style="background-color: green;">Test</div>
+      <div style="background-color: black;">Test</div>
+      <div style="background-color: grey;">Test</div>
+      <div style="background-color: purple;">Test</div>      
+    </pd-box-view>
+
+    <h1>3 Columns / Custom Gap</h1>
+    <pd-box-view style="--squi-box-columns: 3;  --squi-box-gap: 100px;">
+      <div style="background-color: blue;">Test</div>
+      <div style="background-color: red;">Test</div>
+      <div style="background-color: green;">Test</div>
+      <div style="background-color: black;">Test</div>
+      <div style="background-color: grey;">Test</div>
+      <div style="background-color: purple;">Test</div>      
+    </pd-box-view>    
+    
+    <h1>1 Columns</h1>    
+    <pd-box-view style="--squi-box-columns: 1;">
+      <div style="background-color: blue;">Test</div>
+      <div style="background-color: red;">Test</div>
+      <div style="background-color: green;">Test</div>
+      <div style="background-color: black;">Test</div>
+      <div style="background-color: grey;">Test</div>
+      <div style="background-color: purple;">Test</div>      
+    </pd-box-view>
+  `;
+}
+
+export const BoxView = Template.bind({});
+BoxView.args = {  
+};
+

package/stories/collapse.stories.js

@@ -0,0 +1,34 @@
+import { html } from 'lit';
+import '../pd-collapse.js';
+
+export default {
+  title: 'PdContent/Collapse',
+  component: 'pd-collapse',
+  argTypes: {
+    
+  },
+};
+
+function Template() {  
+  return html`
+    
+      <pd-collapse>
+
+        <div slot="header" class="header">
+          Test Title
+        </div>
+
+        <div slot="content" class="form-group">
+          Test Content...
+        </div>
+        
+      </pd-collapse>
+      
+
+  `;
+}
+
+export const Collapse = Template.bind({});
+Collapse.args = {  
+};
+

package/stories/edit-content.stories.js

@@ -0,0 +1,23 @@
+import { html } from 'lit';
+import '../pd-edit-content.js';
+
+export default {
+  title: 'PdContent/Edit Content',
+  component: 'pd-edit-content',
+  argTypes: {
+    
+  },
+};
+
+function Template() {  
+  return html`
+    <pd-edit-content contentTitle="Test content">
+      <p>Some content for edit</p>      
+    </pd-edit-content>
+  `;
+}
+
+export const EditContent = Template.bind({});
+EditContent.args = {  
+};
+

package/stories/more-info.stories.js

@@ -0,0 +1,75 @@
+import { html } from 'lit';
+import '../pd-more-info.js';
+
+export default {
+  title: 'PdContent/More Info',
+  component: 'pd-more-info',
+  argTypes: {
+    
+  },
+};
+
+function Template() {  
+  return html`
+    <h1>More Info Story</h1>
+    <pd-more-info>
+            <span slot="small-view">
+              Een regelmatig onderhoud van uw verwarmingsinstallatie is
+              essentieel en levert tal van voordelen op.
+            </span>
+            <span slot="large-view">
+              <p>
+                Een regelmatig onderhoud van uw verwarmingsinstallatie is
+                essentieel en levert tal van voordelen op. Bovendien is door de
+                Vlaamse overheid wettelijk verplicht het onderhoud tweejaarlijks
+                te laten uitvoeren door een erkende technieker.
+              </p>
+              <p>
+                Het regelmatig onderhouden van uw verwarmingsinstallatie levert
+                tal van voordelen op:
+              </p>
+              <ul>
+                <li>
+                  <b>Je bespaart energie</b> - Een vakkundig onderhoud zorgt
+                  voor een zuinige verwarmingsketel en lagere verwarmingskosten.
+                  Zo bespaar je op je energiefactuur.
+                </li>
+                <li>
+                  <b>Uw veiligheid</b> - Vermijd gevaarlijke situaties, zoals
+                  CO-vergiftiging of schouwbrand.
+                </li>
+                <li>
+                  <b>U beperkt het risico op pannes</b> - Door regelmatig uw
+                  verwarmingsinstallatie te onderhouden, verklein je de kans op
+                  defecten en vermijd je hoge herstellingskosten. Bovendien gaat
+                  je verwarmingsketel gaat langer mee.
+                </li>
+                <li>
+                  <b>U bent wettelijk in orde</b> - Het onderhouden van uw
+                  verwarmingsinstallatie is verplicht in Vlaanderen.
+                </li>
+              </ul>
+              <ul>
+                <li>
+                  Verwarmingsketels op gas (aardgas, butaan, propaan) moeten
+                  2-jaarlijks een onderhoudsbeurt krijgen.
+                </li>
+                <li>
+                  Verwarmingsketels op stookolie (mazout) of vaste brandstof
+                  (hout, pellets, steenkool, ...) moeten jaarlijks een
+                  onderhoudsbeurt krijgen.
+                </li>
+                <li>
+                  Het onderhoud op een gas- of stookolieketel moet uitgevoerd
+                  worden door een erkende technicus.
+                </li>
+              </ul>
+            </span>
+          </pd-more-info>
+  `;
+}
+
+export const MoreInfo = Template.bind({});
+MoreInfo.args = {  
+};
+

package/stories/resize-content.stories.js

@@ -0,0 +1,28 @@
+/* eslint-disable lit-a11y/alt-text */
+import { html } from 'lit';
+import '../pd-resize-content.js';
+
+export default {
+  title: 'PdContent/Resize Content',
+  component: 'pd-resize-content',
+  argTypes: {
+    
+  },
+};
+
+function Template() {  
+  return html`
+      <pd-resize-content>
+        <div slot="preview-content">Eine kurze Vorschau</div>
+        <div slot="resize-content">
+          <p>Hier steht dann etwaslängerer Text und alles weiteree auch es kann lang und groß werden</p>
+          <img src="https://bilder.t-online.de/b/84/93/82/46/id_84938246/920/tid_da/eichhoernchen-geert-weggen-zeigt-die-welt-der-kleinen-nager-.jpg">
+        </div>
+      </pd-resize-content>
+  `;
+}
+
+export const ResizeContent = Template.bind({});
+ResizeContent.args = {  
+};
+

package/stories/index.stories.js

@@ -1,44 +0,0 @@
-import { html } from 'lit';
-import '../pd-content.js';
-
-export default {
-  title: 'PdContent',
-  component: 'pd-content',
-  argTypes: {
-    title: { control: 'text' },
-    counter: { control: 'number' },
-    textColor: { control: 'color' },
-  },
-};
-
-function Template({ title = 'Hello world', counter = 5, textColor, slot }) {
-  return html`
-    <pd-content
-      style="--pd-content-text-color: ${textColor || 'black'}"
-      .title=${title}
-      .counter=${counter}
-    >
-      ${slot}
-    </pd-content>
-  `;
-}
-
-export const Regular = Template.bind({});
-
-export const CustomTitle = Template.bind({});
-CustomTitle.args = {
-  title: 'My title',
-};
-
-export const CustomCounter = Template.bind({});
-CustomCounter.args = {
-  counter: 123456,
-};
-
-export const SlottedContent = Template.bind({});
-SlottedContent.args = {
-  slot: html`<p>Slotted content</p>`,
-};
-SlottedContent.argTypes = {
-  slot: { table: { disable: true } },
-};