WIP: CaasConfigurator

blocks/caas-config/Accordion.js

@@ -0,0 +1,47 @@
+import { html, useState } from './htm-preact.js';
+
+const LS_KEY = 'CAAS_ACCORDION_STATE';
+
+const AccordionItem = ({ title, content, expand, onClick }) => {
+    const isExpanded = expand ? 'is-expanded' : '';
+    return html`
+        <div>
+            <dt class="title ${isExpanded}" onClick=${onClick}>${title}</dt>
+            <dd class="content ${isExpanded}">${content}</dd>
+        </div>
+    `;
+};
+
+const getInitialState = (items) => {
+    const lsState = localStorage.getItem(LS_KEY);
+    if (lsState !== null) {
+        return JSON.parse(lsState);
+    }
+    return new Array(items.length).fill(true, 0, 1);
+}
+
+const Accordion = ({ items = [] }) => {
+    const [isToggled, setIsToggled] = useState(getInitialState(items));
+
+    const toggle = (index) => {
+        const t = [...isToggled];
+        t[index] = !isToggled[index];
+        localStorage.setItem(LS_KEY, JSON.stringify(t));
+        setIsToggled(t);
+    };
+
+    const accordionItems = items.map((item, index) => {
+        return html`
+            <${AccordionItem}
+                title="${item.title}"
+                content="${item.content}"
+                onClick=${() => toggle(index)}
+                expand=${isToggled[index]}
+            />
+        `;
+    });
+
+    return html` <dl className="accordion">${accordionItems}</dl> `;
+};
+
+export default Accordion;

blocks/caas-config/caas-config.css

@@ -0,0 +1,85 @@
+:root {
+    --panel-width: 800px;
+  }
+
+.footer-wrapper { display: none; }
+
+main {
+    margin-top: 64px;
+    margin-bottom: 16px;
+    position: fixed;
+}
+
+.caas-config[data-status='loaded'] {
+    color: rgb(76, 105, 180);
+    display: grid;
+    grid-template-columns: var(--panel-width) auto;
+    grid-template-rows: 1fr;
+    grid-template-areas:
+        "config preview";
+}
+
+.caas-preview {
+    grid-area: preview;
+    width: calc(100vw - var(--panel-width));
+    max-height: calc(100vh - 64px);
+    overflow-y: auto;
+}
+
+.configurator {
+    width: var(--panel-width);
+    grid-area: config;
+    max-height: calc(100vh - 64px);
+    overflow-y: auto;
+}
+
+.accordion {
+    margin: 0;
+}
+.accordion .title {
+    padding: 10px 10px 10px 20px;
+    cursor: pointer;
+    transform: translate3d(0, 0, 0);
+    color: white;
+    position: relative;
+    font-size: 20px;
+    background: #1569a8;
+    margin-bottom: -1px;
+    border-bottom: 1px solid #0e4671;
+    text-align: left;
+}
+.accordion .title::after {
+    content: '+';
+    font-size: 18px;
+    color: white;
+    transition: transform 0.2s ease-in-out;
+    position: absolute;
+    right: 30px;
+}
+.accordion .title.is-expanded {
+    transition: background 0.2s;
+}
+.accordion .title.is-expanded::after {
+    content: '-';
+    transform: rotate(-360deg);
+}
+.accordion .content {
+    overflow: hidden;
+    max-height: 0;
+    transition: max-height 0.2s;
+    margin: 0;
+    padding: 0 30px;
+    border: solid 1px #eeeeee;
+    border-top: 0;
+    background: #e8f4fc;
+}
+.accordion .content p {
+    padding: 30px 0;
+    margin: 0;
+    opacity: 0;
+    transition: 0.5s;
+}
+.accordion .content.is-expanded {
+    max-height: 900px;
+    overflow: hidden;
+}