Greenwood is HTML first by design. Start from just an index.html file or leverage hybrid, file-system based routing to easily achieve static and dynamic pages side-by-side. Single Page Applications (SPA) also supported.
+ ++ src/ + pages/ + api/ + search.js # API route + index.html # Static (SSG) + products.js # Dynamic (SSR), or emit as static with pre-rendering + about.md # markdown also supported ++ `; + + capability2.setAttribute("class", "capabilities-content item2"); + capability2.innerHTML = ` + Web Components + web-components.svg +
Greenwood makes it possible to author real isomorphic Web Components, using Light or Shadow DOM, re-using that same definition across the server and client side. Combined with Web APIs like Constructable Stylesheets and Import Attributes, Web Components make for a compelling solution as the web's own component model.
+ +
+ // src/components/card.js
+ import themeSheet from "../styles/theme.css" with { type: "css" };
+ import cardSheet from "./card.css" with { type: "css" };
+
+ class Card extends HTMLElement {
+ connectedCallback() {
+ if (!this.shadowRoot) {
+ const thumbnail = this.getAttribute("thumbnail");
+ const title = this.getAttribute("title");
+ const template = document.createElement("template");
+
+ template.innerHTML = '...'
+ this.attachShadow({ mode: "open" });
+ this.shadowRoot.appendChild(template.content.cloneNode(true));
+ }
+
+ this.shadowRoot.adoptedStyleSheets = [themeSheet, cardSheet];
+ }
+ }
+
+ customElements.define("app-card", Card);
+
+ `;
+
+ document.body.appendChild(capability1);
+ document.body.appendChild(capability2);
+ document.body.appendChild(capabilities);
+
+ await capabilities.updateComplete;
+ });
+
+ describe("Default Behavior", () => {
+ it("should not be null", () => {
+ expect(capabilities).not.equal(undefined);
+ });
+
+ it("should have the expected number of list items from user generated content", () => {
+ const items = capabilities.shadowRoot.querySelectorAll(".sections li");
+
+ expect(items.length).to.equal(2);
+ });
+
+ it("should have the expected capability headings", () => {
+ const headings = capabilities.shadowRoot.querySelectorAll(".sections .capability-heading");
+
+ expect(headings.length).to.equal(2);
+ expect(headings[0].innerHTML).to.contain("Hybrid Routing");
+ expect(headings[1].innerHTML).to.contain("Web Components");
+ });
+
+ it("should have the expected default description content from item 1 in the content section", () => {
+ const content = capabilities.shadowRoot.querySelectorAll(".content");
+
+ expect(content.length).to.equal(1);
+ expect(content[0].innerHTML).to.contain("Greenwood is HTML first by design.");
+ });
+
+ it("should have the expected default code content from item 1 in the snippet section", () => {
+ const snippet = capabilities.shadowRoot.querySelectorAll(".snippet");
+
+ expect(snippet.length).to.equal(1);
+ expect(snippet[0].innerHTML).to.contain(
+ "Dynamic (SSR), or emit as static with pre-rendering",
+ );
+ });
+ });
+ after(() => {
+ capabilities.remove();
+ capabilities = null;
+ });
+});
diff --git a/src/components/capabilities/capabilities.stories.js b/src/components/capabilities/capabilities.stories.js
new file mode 100644
index 00000000..39727796
--- /dev/null
+++ b/src/components/capabilities/capabilities.stories.js
@@ -0,0 +1,58 @@
+import "./capabilities.js";
+
+export default {
+ title: "Components/Capabilities",
+};
+
+const Template = () => `
+
+
+
+
+ Content goes here
"; + let headingBox; + + before(async () => { + headingBox = document.createElement("app-heading-box"); + + headingBox.setAttribute("heading", HEADING); + headingBox.innerHTML = CONTENT; + + document.body.appendChild(headingBox); + + await headingBox.updateComplete; + }); + + describe("Default Behavior", () => { + it("should not be null", () => { + expect(headingBox).not.equal(undefined); + expect(headingBox.querySelectorAll("div:not([role='details'])").length).equal(1); + }); + + it("should have the expected heading content set as an attribute", () => { + const heading = headingBox.querySelectorAll("[role='heading']"); + + expect(heading.length).to.equal(1); + expect(heading[0].textContent).equal(HEADING); + }); + + it("should have the expected 'slotted' content", () => { + const slotted = headingBox.querySelectorAll("[role='details']"); + + expect(slotted.length).to.equal(1); + expect(slotted[0].innerHTML.trim()).equal(CONTENT); + }); + }); + + after(() => { + headingBox.remove(); + headingBox = null; + }); +}); diff --git a/src/components/heading-box/heading-box.stories.js b/src/components/heading-box/heading-box.stories.js new file mode 100644 index 00000000..1d091a3b --- /dev/null +++ b/src/components/heading-box/heading-box.stories.js @@ -0,0 +1,13 @@ +import "./heading-box.js"; + +export default { + title: "Components/Heading Box", +}; + +const Template = () => ` +This section of our Guides content will cover some of the hosting options you can use to deploy your Greenwood project.
+