feat: add quote block according to the docs

adobe-rnd · Jul 25, 2024 · b242dea · b242dea
1 parent 89f71c9
commit b242dea
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 1 deletion.
diff --git a/blocks/quote/quote.css b/blocks/quote/quote.css
@@ -0,0 +1,30 @@
+.block.quote {
+  background-color: #ccc;
+  padding: 0 0 24px;
+  display: flex;
+  flex-direction: column;
+  margin: 1rem 0;
+}
+
+.block.quote blockquote {
+  margin: 16px;
+  text-indent: 0;
+}
+
+.block.quote > div:last-child > div {
+  margin: 0 16px;
+  font-size: small;
+  font-style: italic;
+  position: relative;
+}
+
+.block.quote > div:last-child > div::after {
+  content: "";
+  display: block;
+  position: absolute;
+  left: 0;
+  bottom: -8px;
+  height: 5px;
+  width: 30px;
+  background-color: darkgray;
+}
diff --git a/blocks/quote/quote.js b/blocks/quote/quote.js
@@ -0,0 +1,7 @@
+export default function decorate(block) {
+  const [quoteWrapper] = block.children;
+
+  const blockquote = document.createElement('blockquote');
+  blockquote.textContent = quoteWrapper.textContent.trim();
+  quoteWrapper.replaceChildren(blockquote);
+}
diff --git a/component-definition.json b/component-definition.json
@@ -135,6 +135,23 @@
               }
             }
           }
+        },
+        {
+          "title": "Quote",
+          "id": "quote",
+          "plugins": {
+            "xwalk": {
+              "page": {
+                "resourceType": "core/franklin/components/block/v1/block",
+                "template": {
+                  "name": "Quote",
+                  "model": "quote",
+                  "quote": "<p>Think, McFly! Think!</p>",
+                  "author": "Biff Tannen"
+                }
+              }
+            }
+          }
         }
       ]
     }

diff --git a/component-filters.json b/component-filters.json
@@ -27,7 +27,8 @@
       "title",
       "hero",
       "cards",
-      "columns"
+      "columns",
+      "quote"
     ]
   },
   {

diff --git a/component-models.json b/component-models.json
@@ -185,5 +185,24 @@
         "valueType": "string"
       }
     ]
+  },
+  {
+    "id": "quote",
+    "fields": [
+       {
+         "component": "text-area",
+         "name": "quote",
+         "value": "",
+         "label": "Quote",
+         "valueType": "string"
+       },
+       {
+         "component": "text-input",
+         "valueType": "string",
+         "name": "author",
+         "label": "Author",
+         "value": ""
+       }
+     ]
   }
 ]