Feature/v4 style blocks

src/Perplex.ContentBlocks.StaticAssets/package.json

@@ -11,7 +11,6 @@
     "prettier": "prettier --write \"./src/**/*.{js,jsx,mjs,cjs,ts,tsx,json}\""
   },
   "dependencies": {
-    "@lit-labs/motion": "^1.0.7",
     "@lit/context": "^1.1.6",
     "@reduxjs/toolkit": "^2.2.6",
     "mutative": "^1.0.5",

src/Perplex.ContentBlocks.StaticAssets/src/components/block/blockDefinition/pcb-block-definition.css

@@ -1,7 +1,8 @@
 :host {
     flex-direction: column;
     justify-content: flex-start;
-    background: white;
+    background-color: var(--c-white, #ffffff);
+    box-shadow: none;
 }
 
 :host(:focus-within) {
@@ -24,13 +25,18 @@ swiper-slide {
 
 .blockDefinition {
     width: 100%;
+    height: 100%;
 
     .blockDefinition__inner {
         width: 100%;
-        display: block;
-        border-radius: var(--uui-border-radius);
+        height: 100%;
+        display: grid;
+        grid-template-rows: calc(var(--s, 4px) * 71) 1fr max-content;
+        overflow: hidden;
+        margin-bottom: 0;
+        border: 1px solid var(--c-border, #d8d7d9);
+        border-radius: var(--r-lg, 4px);
         background: none;
-        border: none;
         padding: 0;
         font: inherit;
         cursor: pointer;
@@ -59,8 +65,12 @@ swiper-slide {
     }
 
     .blockDefinition__controls {
+        display: flex;
+        align-items: center;
+        justify-content: center;
         height: 2rem;
-        width: 100%;
+        padding: calc(var(--s, 4px) * 2) calc(var(--s, 4px) * 4);
+        border-top: 1px solid var(--c-border, #d8d7d9);
     }
 
     .blockDefinition__single {
@@ -75,41 +85,51 @@ swiper-slide {
 }
 
 #portrait {
-    background-color: var(--uui-color-surface-alt);
+    background-color: var(--c-white, #ffffff);
     display: flex;
     justify-content: center;
-    height: 250px;
+    padding: calc(var(--s, 4px) * 4);
+
+    .portrait__placeholder {
+        width: 100%;
+        height: 100%;
+        padding: calc(var(--s, 4px) * 2);
+        border: 1px solid var(--c-border, #d8d7d9);
+        border-radius: calc(var(--r-lg, 4px) * 2);
+        background-color: var(--uui-color-background, #f3f3f5);
+        box-sizing: border-box;
+    }
 
     img {
         align-self: center;
         display: block;
-        font-size: var(--uui-size-8);
-        border-radius: var(--uui-border-radius);
-        background-color: var(--uui-color-surface-emphasis);
-        object-fit: contain;
         width: 100%;
         height: 100%;
+        object-fit: contain;
+        border: 1px solid var(--c-border, #d8d7d9);
+        border-radius: var(--r-lg, 4px);
     }
 }
 
 #open-part {
     text-align: left;
     background-color: var(--uui-color-surface);
     cursor: pointer;
-    color: var(--uui-color-interactive);
+    color: var(--c-black, #333333);
     border: none;
-    border-top: 1px solid var(--uui-color-divider);
+    border-top: 1px solid var(--c-border, #d8d7d9);
     border-radius: 0 0 var(--uui-border-radius) var(--uui-border-radius);
     font-family: inherit;
     font-size: var(--uui-type-small-size);
     box-sizing: border-box;
-    padding: var(--uui-size-2) var(--uui-size-4);
+    padding: calc(var(--s, 4px) * 3) calc(var(--s, 4px) * 4);
     display: flex;
     flex-direction: column;
+    justify-content: center;
     line-height: var(--uui-size-6);
 
     strong {
-        font-size: var(--uui-size-5);
+        font-size: var(--fs-sm, 14px);
     }
 
     span {
@@ -119,7 +139,7 @@ swiper-slide {
 
 :host([disabled]) #open-part {
     pointer-events: none;
-    background: var(--uui-color-disabled);
+    background-color: var(--uui-color-disabled);
     color: var(--uui-color-contrast-disabled);
 }
 

src/Perplex.ContentBlocks.StaticAssets/src/components/block/blockDefinition/pcb-block-definition.ts

@@ -102,10 +102,11 @@ export class PcbBlockDefinition extends LitElement {
                 slides-per-view="1"
                 speed="500"
                 allow-touch-move="false"
+                watch-overflow="false"
                 class="blockDefinition ${this.selected ? 'blockDefinition--selected' : ''}"
                 navigation="true"
                 init="false"
-                pagination="true"
+                pagination="false"
             >
                 ${this.definition.layouts.map(
                     layout => html`
@@ -116,12 +117,14 @@ export class PcbBlockDefinition extends LitElement {
                                 ?disabled=${this.disabled}
                             >
                                 <div id="portrait">
-                                    <img
-                                        src=${layout.previewImage}
-                                        alt="Preview image for ${this.definition.name}"
-                                        loading="lazy"
-                                        decoding="async"
-                                    />
+                                    <div class="portrait__placeholder">
+                                        <img
+                                            src=${layout.previewImage}
+                                            alt="Preview image for ${this.definition.name}"
+                                            loading="lazy"
+                                            decoding="async"
+                                        />
+                                    </div>
                                 </div>
 
                                 <div id="open-part">
@@ -133,7 +136,9 @@ export class PcbBlockDefinition extends LitElement {
                                     <span>${this.definition.description}</span>
                                 </div>
 
-                                <div class="blockDefinition__controls"></div>
+                                <div class="blockDefinition__controls">
+                                    <strong>${layout.name}</strong>
+                                </div>
                             </button>
                         </swiper-slide>
                     `,

src/Perplex.ContentBlocks.StaticAssets/src/components/block/blockHead/block-head.css

@@ -1,37 +1,35 @@
 .block-head {
-    border-radius: var(--r-lg);
     display: flex;
-    border: none;
-    cursor: pointer;
-    border-bottom: 1px solid rgba(var(--c-submarine), 0);
     transition: 250ms border ease;
-    background-color: var(--c-wild-sand);
+    background-color: var(--c-white, #ffffff);
+
+    &.block-head--disabled {
+        background-color: var(--c-alabaster, #fafafa);
+    }
 
     .block-head__controls {
         display: flex;
         align-items: center;
+        border-top-right-radius: var(--r-lg, 4px);
+        border-bottom-right-radius: var(--r-lg, 4px);
+        border: 1px solid var(--c-border, #d8d7d9);
     }
 
     .block-head__control {
         border: none;
         cursor: pointer;
         background-color: transparent;
-        border-right: 1px solid rgb(var(--c-submarine));
+        border-right: 1px solid var(--c-border, #d8d7d9);
         height: 100%;
-        padding: 0 calc(var(--s) * 3);
-
-        &.block-head__control--disabled {
-            opacity: 0.3;
-            cursor: default;
-        }
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 0 calc(var(--s, 4px) * 4);
 
         &:last-child {
             border-right: none;
         }
-
-        &:hover:not(.block-head__control--disabled) {
-            color: var(--uui-color-default-emphasis);
-        }
     }
 
     .block-head__toggle {
@@ -42,27 +40,35 @@
         border: none;
         cursor: pointer;
         padding: 0;
-        transition: 250ms border ease;
+        border: 1px solid var(--c-border, #d8d7d9);
+        border-top-left-radius: var(--r-lg, 4px);
+        border-bottom-left-radius: var(--r-lg, 4px);
+        overflow: hidden;
         background-color: transparent;
-
-        &.block-head__toggle--disabled {
-            opacity: 0.3;
-        }
+        transition: 250ms border ease;
     }
 
     &.block-head--open {
-        border-radius: var(--r-lg) 0;
-        border-bottom: 1px solid rgba(var(--c-submarine), 1);
+        border-radius: var(--r-lg, 4px) 0;
+        border-bottom: 1px solid var(--c-border, #d8d7d9);
     }
 
     .block-head__icon {
-        padding: calc(var(--s) * 4) calc(var(--s) * 4);
+        padding: calc(var(--s, 4px) * 4) calc(var(--s, 4px) * 4);
+    }
+
+    .block-head__handle-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: calc(var(--s, 4px) * 9);
+        border-right: 1px solid var(--c-border, #d8d7d9);
+        background-color: var(--c-alabaster, #fafafa);
     }
 
     .block-head__handle {
         display: none;
-        padding: calc(var(--s) * 4) calc(var(--s) * 2);
-        color: var(--c-boat);
+        color: var(--c-silver, #c4c4c4);
 
         @media only screen and (min-width: 1000px) {
             display: block;
@@ -73,14 +79,18 @@
         display: flex;
         align-items: start;
         justify-content: center;
-        padding: 0 calc(var(--s) * 3);
+        justify-items: flex-start;
+        padding-block: calc(var(--s, 4px) * 2);
+        padding-inline: calc(var(--s, 4px) * 3) calc(var(--s, 4px) * 4);
         flex-direction: column;
-        border-left: 1px solid rgb(var(--c-submarine));
         flex: 1 1 0;
         min-width: 0;
+        min-height: calc(var(--s, 4px) * 10);
+        line-height: 1.5;
 
-        div {
-            font-size: var(--fs-sm);
+        .block-head--disabled & {
+            display: grid;
+            grid-template-columns: 2fr 1fr;
         }
 
         strong {
@@ -89,11 +99,41 @@
             width: 100%;
             min-width: 0;
             text-align: left;
-            font-size: var(--fs-base);
+            font-size: var(--fs-sm, 14px);
             font-weight: 700;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
+
+            .block-head--disabled & {
+                text-decoration: line-through;
+                opacity: 0.5;
+            }
+        }
+
+        uui-tag {
+            grid-row: span 2;
+            justify-self: flex-end;
+            align-self: center;
+
+            svg {
+                width: calc(var(--s, 4px) * 4);
+                height: calc(var(--s, 4px) * 4);
+                vertical-align: middle;
+            }
+
+            span {
+                margin-left: calc(var(--s, 4px) * 2);
+                vertical-align: middle;
+            }
+        }
+
+        div {
+            font-size: var(--fs-xs, 12px);
+
+            .block-head--disabled & {
+                opacity: 0.5;
+            }
         }
     }
 }