Add CTA link formatting, product gradients (#77)

YOLO
manifoldco · Apr 18, 2019 · 0b8d457 · 0b8d457
1 parent c4e5aec
commit 0b8d457
Show file tree

Hide file tree

Showing 34 changed files with 507 additions and 286 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -25,12 +25,14 @@ export namespace Components {
   interface ManifoldActivePlan {
     'hideProvisionButton'?: boolean;
     'isExistingResource'?: boolean;
+    'linkFormat'?: string;
     'plans': Catalog.ExpandedPlan[];
     'product'?: Catalog.ExpandedProduct;
   }
   interface ManifoldActivePlanAttributes extends StencilHTMLAttributes {
     'hideProvisionButton'?: boolean;
     'isExistingResource'?: boolean;
+    'linkFormat'?: string;
     'plans'?: Catalog.ExpandedPlan[];
     'product'?: Catalog.ExpandedProduct;
   }
@@ -181,24 +183,26 @@ export namespace Components {
   }
 
   interface ManifoldLinkButton {
-    'href': string;
+    'href'?: string;
+    'onClick'?: (e: Event) => void;
     'rel'?: string;
     'target'?: string;
   }
   interface ManifoldLinkButtonAttributes extends StencilHTMLAttributes {
     'href'?: string;
+    'onClick'?: (e: Event) => void;
     'rel'?: string;
     'target'?: string;
   }
 
   interface ManifoldMarketplaceResults {
     'featured'?: string;
-    'serviceLink'?: string;
+    'linkFormat'?: string;
     'services': Catalog.Product[];
   }
   interface ManifoldMarketplaceResultsAttributes extends StencilHTMLAttributes {
     'featured'?: string;
-    'serviceLink'?: string;
+    'linkFormat'?: string;
     'services'?: Catalog.Product[];
   }
 
@@ -212,9 +216,9 @@ export namespace Components {
     */
     'featured'?: string;
     /**
-    * _(optional)_ If cards are `<a>` tags, how should link work?
+    * _(optional)_ Link format structure, with `:product` placeholder
     */
-    'serviceLink'?: string;
+    'linkFormat'?: string;
   }
   interface ManifoldMarketplaceAttributes extends StencilHTMLAttributes {
     /**
@@ -226,9 +230,9 @@ export namespace Components {
     */
     'featured'?: string;
     /**
-    * _(optional)_ If cards are `<a>` tags, how should link work?
+    * _(optional)_ Link format structure, with `:product` placeholder
     */
-    'serviceLink'?: string;
+    'linkFormat'?: string;
   }
 
   interface ManifoldNumberInput {
@@ -275,12 +279,15 @@ export namespace Components {
   interface ManifoldPlanDetails {
     'hideProvisionButton': boolean;
     'isExistingResource'?: boolean;
+    'linkFormat'?: string;
     'plan'?: Catalog.ExpandedPlan;
     'product'?: Catalog.Product;
   }
   interface ManifoldPlanDetailsAttributes extends StencilHTMLAttributes {
     'hideProvisionButton'?: boolean;
     'isExistingResource'?: boolean;
+    'linkFormat'?: string;
+    'onManifold-planCTA-click'?: (event: CustomEvent) => void;
     'onManifold-planUpdated'?: (event: CustomEvent) => void;
     'plan'?: Catalog.ExpandedPlan;
     'product'?: Catalog.Product;
@@ -303,10 +310,14 @@ export namespace Components {
     */
     'connection': Connection;
     /**
-    * _(optional)_ Hide bottom-right button?
+    * _(optional)_ Hide button?
     */
     'hideProvisionButton'?: boolean;
     /**
+    * _(optional)_ Link format structure, with `:product`, `:plan`, and `:features` placeholders
+    */
+    'linkFormat'?: string;
+    /**
     * URL-friendly slug (e.g. `"jawsdb-mysql"`)
     */
     'productLabel': string;
@@ -321,10 +332,14 @@ export namespace Components {
     */
     'connection'?: Connection;
     /**
-    * _(optional)_ Hide bottom-right button?
+    * _(optional)_ Hide button?
     */
     'hideProvisionButton'?: boolean;
     /**
+    * _(optional)_ Link format structure, with `:product`, `:plan`, and `:features` placeholders
+    */
+    'linkFormat'?: string;
+    /**
     * URL-friendly slug (e.g. `"jawsdb-mysql"`)
     */
     'productLabel'?: string;
@@ -342,10 +357,13 @@ export namespace Components {
   }
 
   interface ManifoldProductPage {
+    'linkFormat'?: string;
     'product'?: Catalog.ExpandedProduct;
     'provider'?: Catalog.Provider;
   }
   interface ManifoldProductPageAttributes extends StencilHTMLAttributes {
+    'linkFormat'?: string;
+    'onManifold-productCTA-click'?: (event: CustomEvent) => void;
     'product'?: Catalog.ExpandedProduct;
     'provider'?: Catalog.Provider;
   }
@@ -356,6 +374,10 @@ export namespace Components {
     */
     'connection': Connection;
     /**
+    * _(optional)_ Link format structure, with `:product` placeholder
+    */
+    'linkFormat'?: string;
+    /**
     * URL-friendly slug (e.g. `"jawsdb-mysql"`)
     */
     'productLabel': string;
@@ -366,6 +388,10 @@ export namespace Components {
     */
     'connection'?: Connection;
     /**
+    * _(optional)_ Link format structure, with `:product` placeholder
+    */
+    'linkFormat'?: string;
+    /**
     * URL-friendly slug (e.g. `"jawsdb-mysql"`)
     */
     'productLabel'?: string;
@@ -391,22 +417,22 @@ export namespace Components {
     'isCustom'?: boolean;
     'isFeatured'?: boolean;
     'label'?: string;
+    'linkFormat'?: string;
     'logo'?: string;
     'name'?: string;
     'productId'?: string;
-    'serviceLink'?: string;
   }
   interface ManifoldServiceCardAttributes extends StencilHTMLAttributes {
     'connection'?: Connection;
     'description'?: string;
     'isCustom'?: boolean;
     'isFeatured'?: boolean;
     'label'?: string;
+    'linkFormat'?: string;
     'logo'?: string;
     'name'?: string;
     'onManifold-serviceCard-click'?: (event: CustomEvent) => void;
     'productId'?: string;
-    'serviceLink'?: string;
   }
 
   interface ManifoldServiceCategory {
@@ -429,12 +455,12 @@ export namespace Components {
 
   interface ManifoldServicesTunnel {
     'featured'?: string;
-    'serviceLink'?: string;
+    'linkFormat'?: string;
     'services': Catalog.Product[];
   }
   interface ManifoldServicesTunnelAttributes extends StencilHTMLAttributes {
     'featured'?: string;
-    'serviceLink'?: string;
+    'linkFormat'?: string;
     'services'?: Catalog.Product[];
   }
 

diff --git a/src/components/manifold-active-plan/manifold-active-plan.tsx b/src/components/manifold-active-plan/manifold-active-plan.tsx
@@ -7,6 +7,7 @@ import { Component, State, Prop } from '@stencil/core';
 })
 export class ManifoldActivePlan {
   @Prop() isExistingResource?: boolean;
+  @Prop() linkFormat?: string;
   @Prop() product?: Catalog.ExpandedProduct;
   @Prop() plans: Catalog.ExpandedPlan[] = [];
   @Prop() hideProvisionButton?: boolean;
@@ -31,10 +32,11 @@ export class ManifoldActivePlan {
       />,
       <div>
         <manifold-plan-details
+          hideProvisionButton={this.hideProvisionButton}
           isExistingResource={this.isExistingResource}
-          product={this.product}
+          linkFormat={this.linkFormat}
           plan={this.plans.find(plan => plan.id === this.selectedPlanId)}
-          hideProvisionButton={this.hideProvisionButton}
+          product={this.product}
         />
       </div>,
     ];

diff --git a/src/components/manifold-active-plan/readme.md b/src/components/manifold-active-plan/readme.md
@@ -11,6 +11,7 @@ Hello
 | --------------------- | ----------------------- | ----------- | ------------------------------ | ----------- |
 | `hideProvisionButton` | `hide-provision-button` |             | `boolean \| undefined`         | `undefined` |
 | `isExistingResource`  | `is-existing-resource`  |             | `boolean \| undefined`         | `undefined` |
+| `linkFormat`          | `link-format`           |             | `string \| undefined`          | `undefined` |
 | `plans`               | --                      |             | `ExpandedPlan[]`               | `[]`        |
 | `product`             | --                      |             | `ExpandedProduct \| undefined` | `undefined` |
 

diff --git a/src/components/manifold-link-button/link-button.css b/src/components/manifold-link-button/link-button.css
@@ -1,14 +1,11 @@
 a {
-  --padding-left-alt: 1em;
-
   display: inline-flex;
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
-  min-height: 2.5rem;
-  padding-top: 0.75em;
+  width: 100%;
+  height: 2.375rem;
   padding-right: 1.5em;
-  padding-bottom: 0.75em;
   padding-left: 1.5em;
   color: var(--mf-c-white);
   font-size: 15px;
@@ -21,7 +18,7 @@ a {
   border-radius: var(--mf-radius-m);
   box-shadow: var(--mf-shadow-default);
   cursor: pointer;
-  transition: background-color 200ms, border-color 150ms, color 200ms;
+  transition: filter 200ms linear;
 
   &:focus,
   &:hover {

diff --git a/src/components/manifold-link-button/manifold-link-button.tsx b/src/components/manifold-link-button/manifold-link-button.tsx
@@ -6,13 +6,14 @@ import { Component, Prop } from '@stencil/core';
   shadow: true,
 })
 export class LinkButton {
-  @Prop() href: string;
+  @Prop() href?: string;
+  @Prop() onClick?: (e: Event) => void;
   @Prop() rel?: string;
   @Prop() target?: string;
 
   render() {
     return (
-      <a href={this.href} rel={this.rel} target={this.target}>
+      <a href={this.href} rel={this.rel} onClick={this.onClick} target={this.target}>
         <slot />
       </a>
     );

diff --git a/src/components/manifold-link-button/readme.md b/src/components/manifold-link-button/readme.md
@@ -7,11 +7,12 @@
 
 ## Properties
 
-| Property | Attribute | Description | Type                  | Default     |
-| -------- | --------- | ----------- | --------------------- | ----------- |
-| `href`   | `href`    |             | `string`              | `undefined` |
-| `rel`    | `rel`     |             | `string \| undefined` | `undefined` |
-| `target` | `target`  |             | `string \| undefined` | `undefined` |
+| Property  | Attribute | Description | Type                                | Default     |
+| --------- | --------- | ----------- | ----------------------------------- | ----------- |
+| `href`    | `href`    |             | `string \| undefined`               | `undefined` |
+| `onClick` | --        |             | `((e: Event) => void) \| undefined` | `undefined` |
+| `rel`     | `rel`     |             | `string \| undefined`               | `undefined` |
+| `target`  | `target`  |             | `string \| undefined`               | `undefined` |
 
 
 ----------------------------------------------

diff --git a/src/components/manifold-marketplace-results/manifold-marketplace-results.tsx b/src/components/manifold-marketplace-results/manifold-marketplace-results.tsx
@@ -3,13 +3,13 @@ import { Component, Prop } from '@stencil/core';
 @Component({ tag: 'manifold-marketplace-results', styleUrl: 'marketplace-results.css' })
 export class ManifoldMarketplace {
   @Prop() featured?: string;
-  @Prop() serviceLink?: string;
+  @Prop() linkFormat?: string;
   @Prop() services: Catalog.Product[] = [];
 
   private formatHref(label: string): string {
     if (typeof label !== 'string') return '';
-    if (!this.serviceLink) return '';
-    return this.serviceLink.replace(':service', label);
+    if (!this.linkFormat) return '';
+    return this.linkFormat.replace(/:product/gi, label);
   }
 
   private isFeatured(label: string) {
@@ -31,7 +31,7 @@ export class ManifoldMarketplace {
               logo={logo_url}
               name={name}
               productId={id}
-              serviceLink={this.formatHref(label)}
+              linkFormat={this.formatHref(label)}
             />
           ))}
         <slot name="custom-card" />

diff --git a/src/components/manifold-marketplace-results/readme.md b/src/components/manifold-marketplace-results/readme.md
@@ -7,11 +7,11 @@
 
 ## Properties
 
-| Property      | Attribute      | Description | Type                  | Default     |
-| ------------- | -------------- | ----------- | --------------------- | ----------- |
-| `featured`    | `featured`     |             | `string \| undefined` | `undefined` |
-| `serviceLink` | `service-link` |             | `string \| undefined` | `undefined` |
-| `services`    | --             |             | `Product[]`           | `[]`        |
+| Property     | Attribute     | Description | Type                  | Default     |
+| ------------ | ------------- | ----------- | --------------------- | ----------- |
+| `featured`   | `featured`    |             | `string \| undefined` | `undefined` |
+| `linkFormat` | `link-format` |             | `string \| undefined` | `undefined` |
+| `services`   | --            |             | `Product[]`           | `[]`        |
 
 
 ----------------------------------------------

diff --git a/src/components/manifold-marketplace/manifold-marketplace.tsx b/src/components/manifold-marketplace/manifold-marketplace.tsx
@@ -9,8 +9,8 @@ export class ManifoldMarketplace {
   @Element() el: HTMLElement;
   /** _(hidden)_ Passed by `<manifold-connection>` */
   @Prop() connection: Connection = connections[Env.Prod];
-  /** _(optional)_ If cards are `<a>` tags, how should link work? */
-  @Prop() serviceLink?: string;
+  /** _(optional)_ Link format structure, with `:product` placeholder */
+  @Prop() linkFormat?: string;
   /** _(optional)_ Comma-separated list of featured products (labels) */
   @Prop() featured?: string;
   @State() services: Catalog.Product[] = [];
@@ -27,7 +27,7 @@ export class ManifoldMarketplace {
     return (
       <manifold-services-tunnel
         services={this.services}
-        serviceLink={this.serviceLink}
+        linkFormat={this.linkFormat}
         featured={this.featured}
       >
         <manifold-service-grid slot="marketplace-content" />