From d62d12097d728b1299a4337aa7431810df1847a3 Mon Sep 17 00:00:00 2001 From: Kirill Bolotsky Date: Mon, 4 May 2020 15:41:14 +0500 Subject: [PATCH] Feature: docs banner update (#16) * introduced cta-doc component; updated cta component; updated cta in guide and cloud * decreased heading tag in cta-doc --- src/components/blocks/cta/cta.module.scss | 59 +++++++++ src/components/blocks/cta/cta.view.js | 104 ++++++++------- .../blocks/cta/svg/button-bg.inline.svg | 13 ++ .../pages/doc-welcome/cloud/cloud.module.scss | 2 +- .../pages/doc-welcome/cloud/cloud.view.js | 42 +++--- .../cta-doc--default/cta-doc--default.js | 28 ++++ .../cta-doc--default.module.scss | 121 ++++++++++++++++++ .../shared/cta-doc/cta-doc--default/index.js | 1 + .../cta-doc--with-image.js | 30 +++++ .../cta-doc--with-image.module.scss | 90 +++++++++++++ .../cta-doc/cta-doc--with-image/index.js | 1 + .../shared/cta-doc/cta-doc.module.scss | 29 +++++ src/components/shared/cta-doc/cta-doc.view.js | 79 ++++++++++++ src/components/shared/cta-doc/index.js | 1 + .../shared/cta-doc/svg/button-bg.inline.svg | 13 ++ src/templates/docs/cloud.js | 24 ++-- src/templates/docs/guides.js | 12 +- 17 files changed, 562 insertions(+), 87 deletions(-) create mode 100644 src/components/blocks/cta/svg/button-bg.inline.svg create mode 100644 src/components/shared/cta-doc/cta-doc--default/cta-doc--default.js create mode 100644 src/components/shared/cta-doc/cta-doc--default/cta-doc--default.module.scss create mode 100644 src/components/shared/cta-doc/cta-doc--default/index.js create mode 100644 src/components/shared/cta-doc/cta-doc--with-image/cta-doc--with-image.js create mode 100644 src/components/shared/cta-doc/cta-doc--with-image/cta-doc--with-image.module.scss create mode 100644 src/components/shared/cta-doc/cta-doc--with-image/index.js create mode 100644 src/components/shared/cta-doc/cta-doc.module.scss create mode 100644 src/components/shared/cta-doc/cta-doc.view.js create mode 100644 src/components/shared/cta-doc/index.js create mode 100644 src/components/shared/cta-doc/svg/button-bg.inline.svg diff --git a/src/components/blocks/cta/cta.module.scss b/src/components/blocks/cta/cta.module.scss index c1eb455f22..efc9298866 100644 --- a/src/components/blocks/cta/cta.module.scss +++ b/src/components/blocks/cta/cta.module.scss @@ -2,6 +2,51 @@ @include default-section-spacing; } +.wrapper-light { + overflow: hidden; + position: relative; + padding: 1px; + background-color: #ece8f1; + box-shadow: 0px 1px 5px rgba(60, 60, 100, 0.05); + &:before, + &:after { + content: ''; + position: absolute; + width: 340px; + height: 340px; + background: radial-gradient( + #7d64ff, + $color-additional-2 77%, + $color-additional-2 + ); + border-radius: 50%; + } + &:before { + top: 100%; + right: 100%; + transform: translate(50%, -50%); + } + &:after { + left: 100%; + bottom: 100%; + transform: translate(-50%, 50%); + } + .inner { + position: relative; + z-index: 1; + padding-top: 64.5px; + padding-bottom: 69.5px; + background-color: #fff; + color: $color-primary; + } + .button-wrapper { + margin-top: 4px; + } + .cta-button { + border: 0; + } +} + .inner { display: flex; justify-content: space-between; @@ -55,6 +100,10 @@ } } +.button-wrapper { + position: relative; +} + .cta-button { @include lg-down { min-width: 275px; @@ -64,3 +113,13 @@ min-width: unset; } } + +.button-bg { + position: absolute; + top: 48%; + left: -28px; + transform: translateY(-50%); + @include sm-down { + left: -30px; + } +} diff --git a/src/components/blocks/cta/cta.view.js b/src/components/blocks/cta/cta.view.js index bfae2d472b..aa40f4dee6 100644 --- a/src/components/blocks/cta/cta.view.js +++ b/src/components/blocks/cta/cta.view.js @@ -1,9 +1,13 @@ import React from 'react'; + import { Heading } from 'components/shared/heading'; import { Button } from 'components/shared/button'; +import { navigate } from 'gatsby'; import styles from './cta.module.scss'; +import ButtonBg from './svg/button-bg.inline.svg'; + export const CTA = ({ title, description, @@ -13,59 +17,65 @@ export const CTA = ({ buttonTarget, openDrift, openDriftMessage, + themeLight, }) => (
-
-
- - {title} - -

{description}

-
+
+
+
+ + {title} + +

{description}

+
- {openDrift ? ( - - ) : buttonRef ? ( - - ) : ( - - )} +
+ {themeLight && } + {openDrift ? ( + + ) : buttonRef ? ( + + ) : ( + + )} +
+
diff --git a/src/components/blocks/cta/svg/button-bg.inline.svg b/src/components/blocks/cta/svg/button-bg.inline.svg new file mode 100644 index 0000000000..0afad538c1 --- /dev/null +++ b/src/components/blocks/cta/svg/button-bg.inline.svg @@ -0,0 +1,13 @@ + + + + Group 363 + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/src/components/pages/doc-welcome/cloud/cloud.module.scss b/src/components/pages/doc-welcome/cloud/cloud.module.scss index 31097e7d61..054077798e 100644 --- a/src/components/pages/doc-welcome/cloud/cloud.module.scss +++ b/src/components/pages/doc-welcome/cloud/cloud.module.scss @@ -1,7 +1,7 @@ .wrapper { border: 1px solid $color-additional-2; box-shadow: $light-block-shadow; - padding: 20px; + padding: 30px; @include xs-down { max-width: calc(100% - 40px); } diff --git a/src/components/pages/doc-welcome/cloud/cloud.view.js b/src/components/pages/doc-welcome/cloud/cloud.view.js index a07b5c2322..2a0dae9b5a 100644 --- a/src/components/pages/doc-welcome/cloud/cloud.view.js +++ b/src/components/pages/doc-welcome/cloud/cloud.view.js @@ -1,11 +1,16 @@ import * as React from 'react'; -import Img from 'gatsby-image'; import { graphql, useStaticQuery } from 'gatsby'; -import styles from './cloud.module.scss'; -import { Button } from 'components/shared/button'; +import { CtaDoc } from 'components/shared/cta-doc'; -export const Cloud = props => { - const { title, description, buttonText, href = '/cloud' } = props; +export const Cloud = (props) => { + const { + title, + description, + isExternal, + btnText, + btnTarget, + btnLink = '/cloud', + } = props; const { file: { childImageSharp: { fluid }, @@ -22,23 +27,14 @@ export const Cloud = props => { } `); return ( -
-
-
-
- -
-
-
-
-

{title}

-

{description}

- -
-
-
-
+ ); }; diff --git a/src/components/shared/cta-doc/cta-doc--default/cta-doc--default.js b/src/components/shared/cta-doc/cta-doc--default/cta-doc--default.js new file mode 100644 index 0000000000..9c23cdb40e --- /dev/null +++ b/src/components/shared/cta-doc/cta-doc--default/cta-doc--default.js @@ -0,0 +1,28 @@ +import React from 'react'; +import { Heading } from 'components/shared/heading'; +import styles from './cta-doc--default.module.scss'; +import ButtonBg from '../svg/button-bg.inline.svg'; + +export const CtaDocDefault = ({ title, description, Button }) => { + return ( +
+
+
+
+
+ + {title} + +

{description}

+
+ +
+ +
+
+
+
+
+ ); +}; diff --git a/src/components/shared/cta-doc/cta-doc--default/cta-doc--default.module.scss b/src/components/shared/cta-doc/cta-doc--default/cta-doc--default.module.scss new file mode 100644 index 0000000000..273a22a866 --- /dev/null +++ b/src/components/shared/cta-doc/cta-doc--default/cta-doc--default.module.scss @@ -0,0 +1,121 @@ +.wrapper-light { + overflow: hidden; + position: relative; + padding: 1px; + background-color: #ece8f1; + box-shadow: 0px 1px 5px rgba(60, 60, 100, 0.05); + &:before, + &:after { + content: ''; + position: absolute; + width: 340px; + height: 340px; + background: radial-gradient( + #7d64ff, + $color-additional-2 77%, + $color-additional-2 + ); + border-radius: 50%; + } + &:before { + top: 100%; + right: 100%; + transform: translate(50%, -50%); + } + &:after { + left: 100%; + bottom: 100%; + transform: translate(-50%, 50%); + } + .inner { + position: relative; + z-index: 1; + background-color: #fff; + color: $color-primary; + } + .cta-button { + border: 0; + } +} + +.inner { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + color: $color-tertiary; + background-color: $color-primary; + box-shadow: 0 1px 5px rgba($color-primary, 0.3); + padding-top: 47.5px; + padding-right: 80px; + padding-bottom: 47.5px; + padding-left: 40px; + & > * { + margin: 20px; + } + @include md-down { + padding: 50px 40px; + } + + @include sm-down { + display: block; + } + + @include xs-down { + padding: 50px 20px; + } +} + +.content { + max-width: 370px; + flex: 1 1 35%; + padding-right: 20px; + + @include md-down { + max-width: 315px; + } + + @include sm-down { + max-width: 100%; + margin-bottom: 40px; + } +} + +.title { + margin-bottom: 15px; +} + +.description { + font-size: $font-size-lg; + line-height: $line-height-lg; + margin-top: 0; + margin-bottom: 0; + @include md-down { + font-size: $font-size-base; + line-height: $line-height-base; + } +} + +.button-wrapper { + position: relative; +} + +.cta-button { + @include lg-down { + min-width: 235px; + } + @include sm-down { + width: 100%; + min-width: unset; + } +} + +.button-bg { + position: absolute; + top: 48%; + left: -28px; + transform: translateY(-50%); + @include sm-down { + left: -30px; + } +} diff --git a/src/components/shared/cta-doc/cta-doc--default/index.js b/src/components/shared/cta-doc/cta-doc--default/index.js new file mode 100644 index 0000000000..bda222c4f5 --- /dev/null +++ b/src/components/shared/cta-doc/cta-doc--default/index.js @@ -0,0 +1 @@ +export { CtaDocDefault } from './cta-doc--default'; diff --git a/src/components/shared/cta-doc/cta-doc--with-image/cta-doc--with-image.js b/src/components/shared/cta-doc/cta-doc--with-image/cta-doc--with-image.js new file mode 100644 index 0000000000..ce3eeee088 --- /dev/null +++ b/src/components/shared/cta-doc/cta-doc--with-image/cta-doc--with-image.js @@ -0,0 +1,30 @@ +import React from 'react'; +import Img from 'gatsby-image'; +import styles from './cta-doc--with-image.module.scss'; + +export const CtaDocWithImage = ({ title, description, image, Button }) => { + return ( +
+
+
+
+
+
+
+ +
+
+
+
+

{title}

+

{description}

+
+
+
+
+
+
+
+ ); +}; diff --git a/src/components/shared/cta-doc/cta-doc--with-image/cta-doc--with-image.module.scss b/src/components/shared/cta-doc/cta-doc--with-image/cta-doc--with-image.module.scss new file mode 100644 index 0000000000..e3b817ceaf --- /dev/null +++ b/src/components/shared/cta-doc/cta-doc--with-image/cta-doc--with-image.module.scss @@ -0,0 +1,90 @@ +.wrapper-gradient { + overflow: hidden; + position: relative; + padding: 1px; + box-shadow: $light-block-shadow; + border: 1px solid $color-additional-2; + &:before, + &:after { + content: ''; + position: absolute; + width: 340px; + height: 340px; + background: radial-gradient( + #7d64ff, + $color-additional-2 77%, + $color-additional-2 + ); + border-radius: 50%; + } + &:before { + top: 100%; + right: 100%; + transform: translate(50%, -50%); + } + &:after { + left: 100%; + bottom: 100%; + transform: translate(-50%, 50%); + } + .outer { + position: relative; + z-index: 1; + background-color: #fff; + color: $color-primary; + overflow: hidden; + } + .cta-button { + border: 0; + } +} + +.inner { + padding: 30px; + @media screen and (max-width: 1350px) and (min-width: 1200px) { + flex-flow: column; + } +} + +.hook { + @media screen and (max-width: 1350px) and (min-width: 1200px) { + flex: 0 0 100% !important; + max-width: unset; + } + @media screen and (max-width: 855px) and (min-width: 768px) { + flex: 0 0 100% !important; + max-width: unset; + } +} + +.cloud-text { + display: flex; + flex-flow: column; + justify-content: center; + height: 100%; + padding-left: 20px; + > a, + button { + max-width: 235px; + @include xs-down { + max-width: unset; + } + } + @media screen and (max-width: 1350px) and (min-width: 1200px) { + padding-left: 0px; + } + @include md-down { + padding-left: 0px; + } +} + +.img-wrapper { + width: 100%; + height: 100%; +} + +.img { + display: flex; + align-items: center; + height: 100%; +} diff --git a/src/components/shared/cta-doc/cta-doc--with-image/index.js b/src/components/shared/cta-doc/cta-doc--with-image/index.js new file mode 100644 index 0000000000..93547f798e --- /dev/null +++ b/src/components/shared/cta-doc/cta-doc--with-image/index.js @@ -0,0 +1 @@ +export { CtaDocWithImage } from './cta-doc--with-image'; diff --git a/src/components/shared/cta-doc/cta-doc.module.scss b/src/components/shared/cta-doc/cta-doc.module.scss new file mode 100644 index 0000000000..100d3141e0 --- /dev/null +++ b/src/components/shared/cta-doc/cta-doc.module.scss @@ -0,0 +1,29 @@ +.wrapper { + margin-top: 37.5px; +} +.button-wrapper { + position: relative; +} + +.cta-button { + @include lg-down { + min-width: 275px; + } + @include md-down { + min-width: 235px; + } + @include sm-down { + width: 100%; + min-width: unset; + } +} + +.button-bg { + position: absolute; + top: 48%; + left: -28px; + transform: translateY(-50%); + @include sm-down { + left: -30px; + } +} diff --git a/src/components/shared/cta-doc/cta-doc.view.js b/src/components/shared/cta-doc/cta-doc.view.js new file mode 100644 index 0000000000..a21328081f --- /dev/null +++ b/src/components/shared/cta-doc/cta-doc.view.js @@ -0,0 +1,79 @@ +import React from 'react'; +import { CtaDocDefault } from './cta-doc--default'; +import { CtaDocWithImage } from './cta-doc--with-image'; +import { Button } from 'components/shared/button'; +import { navigate } from 'gatsby'; + +import styles from './cta-doc.module.scss'; + +export const CtaDoc = ({ + title, + description, + btnText, + btnLink, + isExternal = false, + btnTarget = '_blank', + openDrift = false, + image = false, +}) => { + let ButtonComponent = () => ( + + ); + if (openDrift) { + ButtonComponent = () => ( + + ); + } else if (isExternal) { + ButtonComponent = () => ( + + ); + } + return ( +
+ {image ? ( + + ) : ( + + )} +
+ ); +}; diff --git a/src/components/shared/cta-doc/index.js b/src/components/shared/cta-doc/index.js new file mode 100644 index 0000000000..9144a909fe --- /dev/null +++ b/src/components/shared/cta-doc/index.js @@ -0,0 +1 @@ +export { CtaDoc } from './cta-doc.view'; diff --git a/src/components/shared/cta-doc/svg/button-bg.inline.svg b/src/components/shared/cta-doc/svg/button-bg.inline.svg new file mode 100644 index 0000000000..0afad538c1 --- /dev/null +++ b/src/components/shared/cta-doc/svg/button-bg.inline.svg @@ -0,0 +1,13 @@ + + + + Group 363 + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/src/templates/docs/cloud.js b/src/templates/docs/cloud.js index 981a9a4ec5..dd2f4344c5 100644 --- a/src/templates/docs/cloud.js +++ b/src/templates/docs/cloud.js @@ -1,6 +1,7 @@ import React, { useState, useEffect } from 'react'; import { Link } from 'gatsby'; import { Cloud, PageInfo } from 'components/pages/doc-welcome'; +import { CtaDoc } from 'components/shared/cta-doc'; import { DocLayout } from 'layouts/doc-layout'; import { Trait } from 'components/shared/trait'; import htmlStyles from 'components/blocks/html-content/html-content.module.scss'; @@ -12,7 +13,7 @@ import SeoMetadata from 'utils/seo-metadata'; import { app } from 'utils/urls'; import { useLandmark } from 'hooks'; -export default function({ pageContext: { sidebarTree, navLinks } }) { +export default function ({ pageContext: { sidebarTree, navLinks } }) { const pageMetadata = SeoMetadata.cloud; const [showFooter, setShowFooter] = useState(true); @@ -27,7 +28,7 @@ export default function({ pageContext: { sidebarTree, navLinks } }) { const scrollMark = location.hash; if (scrollMark) { // wait when html content adds all id to h2 then scroll to it - whenElementAvailable(scrollMark)(el => + whenElementAvailable(scrollMark)((el) => // no smooth scroll needed window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 25, @@ -182,15 +183,16 @@ export default function({ pageContext: { sidebarTree, navLinks } }) {

- {showFooter && ( - - )} + {showFooter && ( + + )} {({ style }) => ( @@ -204,7 +206,7 @@ export default function({ pageContext: { sidebarTree, navLinks } }) { handleAnchorClick(e, anchor)} + onClick={(e) => handleAnchorClick(e, anchor)} > {title} diff --git a/src/templates/docs/guides.js b/src/templates/docs/guides.js index f5efb4fda5..4ba5b1b7b0 100644 --- a/src/templates/docs/guides.js +++ b/src/templates/docs/guides.js @@ -26,7 +26,7 @@ const pageInfo = { 'This documentation will help you go from a total beginner to a seasoned k6 expert!', }; -export default function({ pageContext: { sidebarTree, navLinks } }) { +export default function ({ pageContext: { sidebarTree, navLinks } }) { const { links } = useLandmark({ selector: docPageContent.inner, }); @@ -37,7 +37,7 @@ export default function({ pageContext: { sidebarTree, navLinks } }) { const scrollMark = location.hash; if (scrollMark) { // wait when html content adds all id to h2 then scroll to it - whenElementAvailable(scrollMark)(el => + whenElementAvailable(scrollMark)((el) => // no smooth scroll needed window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 25, @@ -75,7 +75,7 @@ export default function({ pageContext: { sidebarTree, navLinks } }) { handleAnchorClick(e, anchor)} + onClick={(e) => handleAnchorClick(e, anchor)} > {title} @@ -104,8 +104,10 @@ export default function({ pageContext: { sidebarTree, navLinks } }) {