Add hide-cta attribute to manifold-product (#83)

* Add hide-cta attribute to manifold-product * Add test * Update docs, Prettier cleanup YOLO
manifoldco · Apr 21, 2019 · 420751c · 420751c
1 parent 7e3160c
commit 420751c
Show file tree

Hide file tree

Showing 12 changed files with 127 additions and 36 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -356,11 +356,13 @@ export namespace Components {
   }
 
   interface ManifoldProductPage {
+    'hideCta'?: boolean;
     'linkFormat'?: string;
     'product'?: Catalog.ExpandedProduct;
     'provider'?: Catalog.Provider;
   }
   interface ManifoldProductPageAttributes extends StencilHTMLAttributes {
+    'hideCta'?: boolean;
     'linkFormat'?: string;
     'onManifold-productCTA-click'?: (event: CustomEvent) => void;
     'product'?: Catalog.ExpandedProduct;
@@ -373,6 +375,10 @@ export namespace Components {
     */
     'connection': Connection;
     /**
+    * _(optional)_ Hide the CTA on the left?
+    */
+    'hideCta'?: boolean;
+    /**
     * _(optional)_ Link format structure, with `:product` placeholder
     */
     'linkFormat'?: string;
@@ -387,6 +393,10 @@ export namespace Components {
     */
     'connection'?: Connection;
     /**
+    * _(optional)_ Hide the CTA on the left?
+    */
+    'hideCta'?: boolean;
+    /**
     * _(optional)_ Link format structure, with `:product` placeholder
     */
     'linkFormat'?: string;

diff --git a/src/components/manifold-icon/manifold-icon.tsx b/src/components/manifold-icon/manifold-icon.tsx
@@ -60,11 +60,11 @@ export class ManifoldIcon {
             <path fill={`url(#${this.gradientID})`} d={this.icon} />,
           ]
         ) : (
-            <path
-              d={this.icon}
-              fill={this.color.startsWith('--') ? `var(${this.color})` : this.color}
-            />
-          )}
+          <path
+            d={this.icon}
+            fill={this.color.startsWith('--') ? `var(${this.color})` : this.color}
+          />
+        )}
       </svg>
     );
   }

diff --git a/src/components/manifold-plan-details/manifold-plan-details.tsx b/src/components/manifold-plan-details/manifold-plan-details.tsx
@@ -30,7 +30,8 @@ export class ManifoldPlanDetails {
   @Event({
     eventName: 'manifold-planCTA-click',
     bubbles: true,
-  }) ctaClicked: EventEmitter;
+  })
+  ctaClicked: EventEmitter;
 
   componentWillLoad() {
     const features = this.initialFeatures();
@@ -73,9 +74,9 @@ export class ManifoldPlanDetails {
       });
     }
     return this.linkFormat
-      .replace(/:product/ig, this.product.body.label)
-      .replace(/:plan/ig, this.plan.body.label)
-      .replace(/:features/ig, params.toString())
+      .replace(/:product/gi, this.product.body.label)
+      .replace(/:plan/gi, this.plan.body.label)
+      .replace(/:features/gi, params.toString());
   }
 
   get header() {

diff --git a/src/components/manifold-plan-menu/manifold-plan-menu.tsx b/src/components/manifold-plan-menu/manifold-plan-menu.tsx
@@ -29,7 +29,7 @@ const PlanButton: FunctionalComponent<{
 export class ManifoldPlanMenu {
   @Prop() plans: Catalog.ExpandedPlan[] = [];
   @Prop() selectedPlanId: string;
-  @Prop() selectPlan: Function = () => { };
+  @Prop() selectPlan: Function = () => {};
 
   get customPlans() {
     return Array.isArray(this.plans)

diff --git a/src/components/manifold-product-details/manifold-product-details.tsx b/src/components/manifold-product-details/manifold-product-details.tsx
@@ -17,7 +17,6 @@ export class ManifoldProductDetails {
       <div>
         <h1 class="title" itemprop="tagline">
           <span class="tagline">{tagline}</span>
-
         </h1>
         <ul class="value-prop-list" itemprop="description">
           {value_props.map(({ body, header }) => (

diff --git a/src/components/manifold-product-page/manifold-product-page.e2e.ts b/src/components/manifold-product-page/manifold-product-page.e2e.ts
@@ -1,4 +1,5 @@
 import { newE2EPage } from '@stencil/core/testing';
+import { Product } from '../../spec/mock/catalog';
 
 /* eslint-disable no-param-reassign, @typescript-eslint/no-explicit-any */
 
@@ -17,4 +18,43 @@ describe('<manifold-product-page>', () => {
     const el = await page.find('manifold-product-page >>> manifold-link-button');
     expect(await el.getProperty('href')).toBe('/product/iron_cache');
   });
+
+  it('CTA is shown by default', async () => {
+    const page = await newE2EPage({ html: `<manifold-product-page />` });
+
+    const props = { product: Product };
+    await page.$eval(
+      'manifold-product-page',
+      (elm: any, { product }: any) => {
+        elm.product = product;
+      },
+      props
+    );
+
+    await page.waitForChanges();
+
+    const button = await page.find('manifold-product-page >>> manifold-link-button');
+    expect(button).toBeDefined();
+  });
+
+  it('CTA button hides with prop', async () => {
+    const page = await newE2EPage({
+      html: `<manifold-product-page />`,
+    });
+
+    const props = { product: Product };
+    await page.$eval(
+      'manifold-product-page',
+      (elm: any, { product }: any) => {
+        elm.product = product;
+        elm.hideCta = true;
+      },
+      props
+    );
+
+    await page.waitForChanges();
+
+    const button = await page.find('manifold-product-page >>> manifold-link-button');
+    expect(button).toBeNull();
+  });
 });
diff --git a/src/components/manifold-product-page/manifold-product-page.tsx b/src/components/manifold-product-page/manifold-product-page.tsx
@@ -9,23 +9,27 @@ import { themeIcons } from '../../assets/icons';
   shadow: true,
 })
 export class ManifoldProductPage {
+  @Prop() hideCta?: boolean = false;
   @Prop() linkFormat?: string;
   @Prop() product?: Catalog.ExpandedProduct;
   @Prop() provider?: Catalog.Provider;
   @Event({
     eventName: 'manifold-productCTA-click',
     bubbles: true,
-  }) ctaClicked: EventEmitter;
+  })
+  ctaClicked: EventEmitter;
 
   get ctaLink() {
     if (!this.product) return undefined;
     if (typeof this.linkFormat !== 'string') return undefined;
-    return this.linkFormat.replace(/:product/ig, this.product.body.label);
+    return this.linkFormat.replace(/:product/gi, this.product.body.label);
   }
 
   get providerName() {
     if (!this.product || !this.provider) return undefined;
-    return (this.provider.body.name !== this.product.body.name && this.provider.body.name) || undefined;
+    return (
+      (this.provider.body.name !== this.product.body.name && this.provider.body.name) || undefined
+    );
   }
 
   onClick = (e: Event): void => {
@@ -53,17 +57,19 @@ export class ManifoldProductPage {
           >
             {this.providerName && `from ${this.providerName}`}
           </manifold-featured-service>
-          <div class="sidebar-cta">
-            <manifold-link-button
-              href={this.ctaLink}
-              onClick={this.onClick}
-              rel={this.ctaLink && 'noopener noreferrer'}
-              target={this.ctaLink && '_blank'}
-            >
-              Get {name}
-              <manifold-icon icon={arrow_right} marginLeft />
-            </manifold-link-button>
-          </div>
+          {this.hideCta !== true && (
+            <div class="sidebar-cta">
+              <manifold-link-button
+                href={this.ctaLink}
+                onClick={this.onClick}
+                rel={this.ctaLink && 'noopener noreferrer'}
+                target={this.ctaLink && '_blank'}
+              >
+                Get {name}
+                <manifold-icon icon={arrow_right} marginLeft />
+              </manifold-link-button>
+            </div>
+          )}
           {tags && (
             <div class="sidebar-section">
               <h4>Category</h4>

diff --git a/src/components/manifold-product-page/readme.md b/src/components/manifold-product-page/readme.md
@@ -9,6 +9,7 @@
 
 | Property     | Attribute     | Description | Type                           | Default     |
 | ------------ | ------------- | ----------- | ------------------------------ | ----------- |
+| `hideCta`    | `hide-cta`    |             | `boolean \| undefined`         | `false`     |
 | `linkFormat` | `link-format` |             | `string \| undefined`          | `undefined` |
 | `product`    | --            |             | `ExpandedProduct \| undefined` | `undefined` |
 | `provider`   | --            |             | `Provider \| undefined`        | `undefined` |

diff --git a/src/components/manifold-product/manifold-product.tsx b/src/components/manifold-product/manifold-product.tsx
@@ -8,7 +8,9 @@ import { Connection, connections } from '../../utils/connections';
 export class ManifoldProduct {
   @Element() el: HTMLElement;
   /** _(hidden)_ Passed by `<manifold-connection>` */
-  @Prop() connection: Connection = connections.prod
+  @Prop() connection: Connection = connections.prod;
+  /** _(optional)_ Hide the CTA on the left? */
+  @Prop() hideCta?: boolean = false;
   /** _(optional)_ Link format structure, with `:product` placeholder */
   @Prop() linkFormat?: string;
   /** URL-friendly slug (e.g. `"jawsdb-mysql"`) */
@@ -27,12 +29,21 @@ export class ManifoldProduct {
           .then(response => response.json())
           .then(provider => {
             this.provider = provider;
-          })
+          });
       });
   }
 
   render() {
-    return this.product && <manifold-product-page product={this.product} linkFormat={this.linkFormat} provider={this.provider} />;
+    return (
+      this.product && (
+        <manifold-product-page
+          product={this.product}
+          hideCta={this.hideCta}
+          linkFormat={this.linkFormat}
+          provider={this.provider}
+        />
+      )
+    );
   }
 }
 

diff --git a/src/components/manifold-product/readme.md b/src/components/manifold-product/readme.md
@@ -31,16 +31,25 @@ To turn the CTA into an `<a>` tag, specify a `link-format` attribute, using
 <!-- <a href="/product/aiven-redis"> -->
 ```
 
+## Hide CTA
+
+You can alternately hide the CTA on the left altogether with `hide-cta`:
+
+```html
+<manifold-product product-label="aiven-cassandra" hide-cta />
+```
+
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property       | Attribute       | Description                                                     | Type                  | Default            |
-| -------------- | --------------- | --------------------------------------------------------------- | --------------------- | ------------------ |
-| `connection`   | --              | _(hidden)_ Passed by `<manifold-connection>`                    | `Connection`          | `connections.prod` |
-| `linkFormat`   | `link-format`   | _(optional)_ Link format structure, with `:product` placeholder | `string \| undefined` | `undefined`        |
-| `productLabel` | `product-label` | URL-friendly slug (e.g. `"jawsdb-mysql"`)                       | `string`              | `undefined`        |
+| Property       | Attribute       | Description                                                     | Type                   | Default            |
+| -------------- | --------------- | --------------------------------------------------------------- | ---------------------- | ------------------ |
+| `connection`   | --              | _(hidden)_ Passed by `<manifold-connection>`                    | `Connection`           | `connections.prod` |
+| `hideCta`      | `hide-cta`      | _(optional)_ Hide the CTA on the left?                          | `boolean \| undefined` | `false`            |
+| `linkFormat`   | `link-format`   | _(optional)_ Link format structure, with `:product` placeholder | `string \| undefined`  | `undefined`        |
+| `productLabel` | `product-label` | URL-friendly slug (e.g. `"jawsdb-mysql"`)                       | `string`               | `undefined`        |
 
 
 ----------------------------------------------

diff --git a/src/components/manifold-service-card/manifold-service-card.tsx b/src/components/manifold-service-card/manifold-service-card.tsx
@@ -15,7 +15,8 @@ export class ManifoldServiceCard {
   @Event({
     eventName: 'manifold-serviceCard-click',
     bubbles: true,
-  }) cardClicked: EventEmitter;
+  })
+  cardClicked: EventEmitter;
   @Prop() name?: string;
   @Prop() connection: Connection = connections.prod;
   @Prop() description?: string;
@@ -71,8 +72,8 @@ export class ManifoldServiceCard {
               <manifold-icon class="icon" icon={this.logo} />
             </div>
           ) : (
-              <manifold-lazy-image src={this.logo} alt={this.name} itemprop="image" />
-            )}
+            <manifold-lazy-image src={this.logo} alt={this.name} itemprop="image" />
+          )}
         </div>
         <h3 class="name" itemprop="name">
           {this.name}

diff --git a/src/index.html b/src/index.html
@@ -384,6 +384,12 @@ <h2 id="navigation">Navigation</h2>
               </p>
               <pre><code class="html language-html">&lt;manifold-product product-label="aiven-redis" link-format="/product/:product" /&gt;
 &lt;!-- &lt;a href="/product/aiven-redis"&gt; --&gt;
+</code></pre>
+              <h2 id="hidecta">Hide CTA</h2>
+              <p>
+                You can alternately hide the CTA on the left altogether with <code>hide-cta</code>:
+              </p>
+              <pre><code class="html language-html">&lt;manifold-product product-label="aiven-cassandra" hide-cta /&gt;
 </code></pre>
               <!-- Auto Generated Below -->
               <h2 id="properties">Properties</h2>
@@ -405,6 +411,13 @@ <h2 id="properties">Properties</h2>
                     <td><code>Connection</code></td>
                     <td><code>connections.prod</code></td>
                   </tr>
+                  <tr>
+                    <td><code>hideCta</code></td>
+                    <td><code>hide-cta</code></td>
+                    <td><em>(optional)</em> Hide the CTA on the left?</td>
+                    <td><code>boolean | undefined</code></td>
+                    <td><code>false</code></td>
+                  </tr>
                   <tr>
                     <td><code>linkFormat</code></td>
                     <td><code>link-format</code></td>