feat: render single whitelisted property as full-width (#366)

* feat: display full-width property if only one whitelisted

* chore(test): add basic tests

elements/stacinfo/src/main.ts

@@ -117,19 +117,28 @@ export class EOxStacInfo extends LitElement {
         ${parseEntries(this.properties).length > 0
           ? html`
               <section id="properties" part="properties">
-                <ul>
+                <ul
+                  class=${parseEntries(this.properties).length === 1
+                    ? "single-property"
+                    : nothing}
+                >
                   ${map(
                     parseEntries(this.properties),
                     ([, value]) => html`
                       <slot name=${value.label.toLowerCase()}>
                         <li>
-                          <span class="label">
-                            ${
-                              // TODO
-                              // @ts-ignore
-                              value.label
-                            } </span
-                          >:
+                          ${when(
+                            parseEntries(this.properties).length > 1,
+                            () => html`
+                              <span class="label">
+                                ${
+                                  // TODO
+                                  // @ts-ignore
+                                  value.label
+                                } </span
+                              >:
+                            `
+                          )}
                           <span class="value">
                             ${
                               // TODO

elements/stacinfo/src/style.eox.ts

@@ -67,7 +67,7 @@ slot[name=footer] {
   list-style: none;
   padding: 0;
 }
-#properties li {
+#properties ul:not(.single-property) li {
   flex-basis: 50%;
   padding: 20px 0;
 }

elements/stacinfo/stacinfo.stories.js

@@ -66,6 +66,20 @@ export const AllProperties = {
   },
 };
 
+/**
+ * If only one property is whitelisted, then it renders the content full-width and without the key.
+ */
+export const SingleProperty = {
+  args: {
+    ...Basic.args,
+    header: [],
+    subheader: [],
+    properties: ["description"],
+    featured: [],
+    footer: [],
+  },
+};
+
 /**
  * Individual STAC properties can be rendered in a more prominent way by using the `featured` property.
  */

elements/stacinfo/test/general.cy.js

@@ -0,0 +1,60 @@
+import "../src/main";
+
+describe("Stacinfo", () => {
+  const testBody = (json) => {
+    cy.intercept("/collection*", {
+      body: json,
+    });
+  };
+
+  it("loads stacinfo", () => {
+    testBody({
+      type: "Collection",
+    });
+    cy.mount(
+      `
+      <eox-stacinfo for="/collection"></eox-stacinfo>`
+    ).as("eox-stacinfo");
+    cy.get("eox-stacinfo").shadow();
+  });
+
+  it("creates list items for all properties", () => {
+    const body = {
+      type: "Collection",
+      title: "Foobar",
+      id: "foobar",
+    };
+    testBody(body);
+    cy.mount(
+      `
+      <eox-stacinfo for="/collection"></eox-stacinfo>`
+    ).as("eox-stacinfo");
+    cy.get("eox-stacinfo")
+      .shadow()
+      .within(() => {
+        cy.get("li", { multiple: true }).should(
+          "have.length",
+          Object.keys(body).length
+        );
+      });
+  });
+
+  it("creates a single-property class if only one property is whitelisted", () => {
+    testBody({
+      type: "Collection",
+      description: "Hello world!",
+    });
+    cy.mount(
+      `
+      <eox-stacinfo
+        for="/collection"
+        properties='["description"]'
+      ></eox-stacinfo>`
+    ).as("eox-stacinfo");
+    cy.get("eox-stacinfo")
+      .shadow()
+      .within(() => {
+        cy.get("#properties ul.single-property").should("exist");
+      });
+  });
+});