-
Notifications
You must be signed in to change notification settings - Fork 488
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Website: add <call-to-action> component (#6244)
* Website: add <call-to-action> component * Lint fixes
- Loading branch information
Showing
5 changed files
with
224 additions
and
0 deletions.
There are no files selected for viewing
19 changes: 19 additions & 0 deletions
19
website/assets/images/call-to-action-banner-background.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
115 changes: 115 additions & 0 deletions
115
website/assets/js/components/call-to-action.component.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| /** | ||
| * <call-to-action> | ||
| * ----------------------------------------------------------------------------- | ||
| * A customizeable call to action. | ||
| * | ||
| * @type {Component} | ||
| * | ||
| * ----------------------------------------------------------------------------- | ||
| */ | ||
|
|
||
| parasails.registerComponent('callToAction', { | ||
| // ╔═╗╦═╗╔═╗╔═╗╔═╗ | ||
| // ╠═╝╠╦╝║ ║╠═╝╚═╗ | ||
| // ╩ ╩╚═╚═╝╩ ╚═╝ | ||
| props: [ | ||
| 'title', // Required: The title of this call-to-action | ||
| 'text', // Required: The text of the call to action | ||
| 'primaryButtonText', // Required: The text of the call to action's button | ||
| 'primaryButtonHref', // Required: the url that the call to action button leads | ||
| 'secondaryButtonText', // Optional: if provided with a `secondaryButtonHref`, a second button will be added to the call to action with this value as the button text | ||
| 'secondaryButtonHref', // Optional: if provided with a `secondaryButtonText`, a second button will be added to the call to action with this value as the href | ||
| ], | ||
|
|
||
| // ╦╔╗╔╦╔╦╗╦╔═╗╦ ╔═╗╔╦╗╔═╗╔╦╗╔═╗ | ||
| // ║║║║║ ║ ║╠═╣║ ╚═╗ ║ ╠═╣ ║ ║╣ | ||
| // ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝ | ||
| data: function (){ | ||
| let callToActionTitle = ''; | ||
| let callToActionText = ''; | ||
| let calltoActionPrimaryBtnText = ''; | ||
| let calltoActionPrimaryBtnHref = ''; | ||
| let calltoActionSecondaryBtnText = ''; | ||
| let calltoActionSecondaryBtnHref = ''; | ||
|
|
||
| return { | ||
| callToActionTitle, | ||
| callToActionText, | ||
| calltoActionPrimaryBtnText, | ||
| calltoActionPrimaryBtnHref, | ||
| calltoActionSecondaryBtnText, | ||
| calltoActionSecondaryBtnHref | ||
| }; | ||
| }, | ||
|
|
||
| // ╦ ╦╔╦╗╔╦╗╦ | ||
| // ╠═╣ ║ ║║║║ | ||
| // ╩ ╩ ╩ ╩ ╩╩═╝ | ||
| template: ` | ||
| <div> | ||
| <div purpose="cta-content" class="text-white text-center"> | ||
| <div purpose="cta-title">{{callToActionTitle}}</div> | ||
| <div purpose="cta-text">{{callToActionText}}</div> | ||
| </div> | ||
| <div purpose="cta-buttons" class="mx-auto d-flex flex-sm-row flex-column justify-content-center"> | ||
| <a purpose="primary-button" :class="[ secondaryButtonHref ? 'mr-sm-4 ml-sm-0' : '']" class="text-white d-sm-flex align-items-center justify-content-center btn btn-primary mx-auto":href="calltoActionPrimaryBtnHref">{{calltoActionPrimaryBtnText}}</a> | ||
| <span class="d-flex" v-if="secondaryButtonHref && secondaryButtonText"> | ||
| <a purpose="secondary-button" class="btn btn-lg text-white btn-white mr-2 pl-0 mx-auto mx-sm-0 mt-2 mt-sm-0" target="_blank" :href="calltoActionSecondaryBtnHref">{{calltoActionSecondaryBtnText}}</a> | ||
| </span> | ||
| </div> | ||
| </div> | ||
| `, | ||
|
|
||
| // ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗ | ||
| // ║ ║╠╣ ║╣ ║ ╚╦╝║ ║ ║╣ | ||
| // ╩═╝╩╚ ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝ | ||
| beforeMount: function() { | ||
|
|
||
| }, | ||
| mounted: async function() { | ||
| if (this.title) { | ||
| this.callToActionTitle = this.title; | ||
| } else { | ||
| throw new Error('Incomplete usage of <call-to-action>: Please provide a `title` example: title="Secure laptops & servers"'); | ||
| } | ||
| if (this.text) { | ||
| this.callToActionText = this.text; | ||
| } else { | ||
| throw new Error('Incomplete usage of <call-to-action>: Please provide a `text` example: text="Get up and running with a test environment of Fleet within minutes"'); | ||
| } | ||
| if (this.primaryButtonText) { | ||
| this.calltoActionPrimaryBtnText = this.primaryButtonText; | ||
| } else { | ||
| throw new Error('Incomplete usage of <call-to-action>: Please provide a `primaryButtonText`. example: primary-button-text="Get started"'); | ||
| } | ||
| if (this.primaryButtonHref) { | ||
| this.calltoActionPrimaryBtnHref = this.primaryButtonHref; | ||
| } else { | ||
| throw new Error('Incomplete usage of <call-to-action>: Please provide a `primaryButtonHref` example: primary-button-href="/get-started?try-it-now"'); | ||
| } | ||
| if (this.secondaryButtonText) { | ||
| this.calltoActionSecondaryBtnText = this.secondaryButtonText; | ||
| } | ||
| if (this.secondaryButtonHref) { | ||
| this.calltoActionSecondaryBtnHref = this.secondaryButtonHref; | ||
| } | ||
| }, | ||
| watch: { | ||
| title: function(unused) { throw new Error('Changes to `title` are not currently supported in <call-to-action>!'); }, | ||
| text: function(unused) { throw new Error('Changes to `text` are not currently supported in <call-to-action>!'); }, | ||
| primaryButtonText: function(unused) { throw new Error('Changes to `primaryButtonText` are not currently supported in <call-to-action>!'); }, | ||
| primaryButtonHref: function(unused) { throw new Error('Changes to `primaryButtonHref` are not currently supported in <call-to-action>!'); }, | ||
| secondaryButtonText: function(unused) { throw new Error('Changes to `secondaryButtonText` are not currently supported in <call-to-action>!'); }, | ||
| secondaryButtonHref: function(unused) { throw new Error('Changes to `secondaryButtonHref` are not currently supported in <call-to-action>!'); }, | ||
| }, | ||
| beforeDestroy: function() { | ||
| //… | ||
| }, | ||
|
|
||
| // ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗ | ||
| // ║║║║ ║ ║╣ ╠╦╝╠═╣║ ║ ║║ ║║║║╚═╗ | ||
| // ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝ | ||
| methods: { | ||
| //… | ||
| } | ||
| }); |
88 changes: 88 additions & 0 deletions
88
website/assets/styles/components/call-to-action.component.less
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
|
|
||
| /** | ||
| * <call-to-action> | ||
| * | ||
| * App-wide styles for our <call-to-action> component. | ||
| */ | ||
| [parasails-component='call-to-action'] { | ||
| background-image: url('/images/call-to-action-banner-background.svg'); | ||
| background-position-x: center; | ||
| background-size: cover; | ||
| background-color: #192147; | ||
| padding: 60px 90px; | ||
| border-radius: 16px; | ||
| margin-top: 40px; | ||
| margin-bottom: 40px; | ||
|
|
||
| [purpose='cta-content'] { | ||
| color: #FFF; | ||
| margin-bottom: 24px; | ||
| [purpose='cta-title'] { | ||
| font-weight: 900; | ||
| font-size: 28px; | ||
| line-height: 40px; | ||
| margin-bottom: 4px; | ||
| } | ||
| [purpose='cta-text'] { | ||
| font-size: 18px; | ||
| line-height: 28px; | ||
| margin-bottom: 0px; | ||
| } | ||
| } | ||
|
|
||
| [purpose='cta-buttons'] { | ||
| [purpose='primary-button'] { | ||
| padding: 16px 63px; | ||
| } | ||
| [purpose='secondary-button'] { | ||
| .btn-animated-arrow-red(); | ||
| } | ||
| } | ||
|
|
||
| @media(max-width: 991px) { | ||
| padding: 60px 45px; | ||
| [purpose='cta-content'] { | ||
| [purpose='cta-title'] { | ||
| font-weight: 900; | ||
| font-size: 24px; | ||
| line-height: 32px; | ||
| margin-bottom: 4px; | ||
| } | ||
| [purpose='cta-text'] { | ||
| font-size: 16px; | ||
| line-height: 24px; | ||
| margin-bottom: 0px; | ||
| } | ||
| } | ||
| [purpose='cta-buttons'] { | ||
| [purpose='primary-button'] { | ||
| padding: 16px 63px; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @media(max-width: 576px) { | ||
| padding: 60px 24px; | ||
| margin-left: -16px; | ||
| margin-right: -16px; | ||
| [purpose='cta-buttons'] { | ||
| [purpose='primary-button'] { | ||
| padding: 16px 63px; | ||
| } | ||
| } | ||
| [purpose='cta-content'] { | ||
|
|
||
| [purpose='cta-title'] { | ||
| font-weight: 900; | ||
| font-size: 24px; | ||
| line-height: 32px; | ||
| margin-bottom: 4px; | ||
| } | ||
| [purpose='cta-text'] { | ||
| font-size: 16px; | ||
| line-height: 24px; | ||
| margin-bottom: 0px; | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters