From 4f0615ba21fcb47d9e2ed289e382a7a014040dcf Mon Sep 17 00:00:00 2001 From: Chalarangelo Date: Tue, 31 Dec 2019 11:59:19 +0200 Subject: [PATCH 1/6] Add weightedSample utility --- src/functions/utils/array.js | 15 +++++++++++++++ src/functions/utils/index.js | 2 ++ 2 files changed, 17 insertions(+) diff --git a/src/functions/utils/array.js b/src/functions/utils/array.js index 63a56701c..e1e079149 100644 --- a/src/functions/utils/array.js +++ b/src/functions/utils/array.js @@ -40,3 +40,18 @@ export const uniqueElements = arr => [...new Set(arr)]; /** Returns an array of elements that appear in both arrays. */ export const similarity = (arr, values) => arr.filter(v => values.includes(v)); + +/** Returns a random element from an array, using the provided weights as the probabilities for each element. */ +export const weightedSample = (arr, weights) => { + let roll = Math.random(); + return arr[ + weights + .reduce((acc, w, i) => + i === 0 ? [w] : [...acc, acc[acc.length - 1] + w], + [] + ) + .findIndex((v, i, s) => + roll >= (i === 0 ? 0 : s[i - 1]) && roll < v + ) + ]; +}; diff --git a/src/functions/utils/index.js b/src/functions/utils/index.js index 5264941f2..d946d0fae 100644 --- a/src/functions/utils/index.js +++ b/src/functions/utils/index.js @@ -20,6 +20,7 @@ import { transformSnippetIndex, uniqueElements, similarity, + weightedSample, chunk } from './array'; @@ -44,5 +45,6 @@ export { transformSnippetIndex, uniqueElements, similarity, + weightedSample, chunk }; From 30c6c89b949f94540e16ce48f206a66864e93e69 Mon Sep 17 00:00:00 2001 From: Chalarangelo Date: Tue, 31 Dec 2019 12:01:01 +0200 Subject: [PATCH 2/6] Extract CTA component --- src/organisms/cta/index.jsx | 51 +++++++++++++++++++++++++++++ src/templates/snippetPage/index.jsx | 35 +++----------------- 2 files changed, 56 insertions(+), 30 deletions(-) create mode 100644 src/organisms/cta/index.jsx diff --git a/src/organisms/cta/index.jsx b/src/organisms/cta/index.jsx new file mode 100644 index 000000000..29bba4e0b --- /dev/null +++ b/src/organisms/cta/index.jsx @@ -0,0 +1,51 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import PageBackdrop from 'molecules/pageBackdrop'; +import { AnchorButton } from 'atoms/button'; +import _ from 'lang'; +const _l = _('en'); + +const CTA = ({ + snippetUrl, + acceptsCookies, +}) => { + return ( + + { _l('Like 30 seconds of code?') } +
+ + ) } + > + { + if (acceptsCookies && typeof window !== 'undefined' && typeof gtag === `function`) { + e.preventDefault(); + window.gtag('event', 'click', { event_category: 'cta-github', event_label: e.target.href, value: 1}); + window.open(e.target.href, '_blank'); + } + } } + > + { _l('Star it on GitHub') } + +
+ ); +}; + +CTA.propTypes = { + /** URL of the snippet page */ + snippetUrl: PropTypes.string, + /** Does the user accept cookies? */ + acceptsCookies: PropTypes.bool, +}; + +export default CTA; diff --git a/src/templates/snippetPage/index.jsx b/src/templates/snippetPage/index.jsx index d6778e126..c4ef9b227 100644 --- a/src/templates/snippetPage/index.jsx +++ b/src/templates/snippetPage/index.jsx @@ -7,8 +7,7 @@ import { Snippet as SnippetPropType } from 'typedefs'; import PropTypes from 'prop-types'; import Shell from 'organisms/shell'; import RecommendationList from 'organisms/recommendationList'; -import PageBackdrop from 'molecules/pageBackdrop'; -import { AnchorButton } from 'atoms/button'; +import CTA from 'organisms/cta'; import _ from 'lang'; const _l = _('en'); @@ -64,34 +63,10 @@ const SnippetPage = ({ snippet={ snippet } toastContainer='toast-container' /> - - { _l('Like 30 seconds of code?') } -
- - ) } - > - { - if (acceptsCookies && typeof window !== 'undefined' && typeof gtag === `function`) { - e.preventDefault(); - window.gtag('event', 'click', { event_category: 'cta-github', event_label: e.target.href, value: 1}); - window.open(e.target.href, '_blank'); - } - } } - > - { _l('Star it on GitHub') } - -
+
From bb2ec9b8529a7dfadf9614703d2d54f17a6a9c5f Mon Sep 17 00:00:00 2001 From: Chalarangelo Date: Tue, 31 Dec 2019 12:51:44 +0200 Subject: [PATCH 3/6] Add Twitter icon to icon generation --- src/styles/_functions.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/styles/_functions.scss b/src/styles/_functions.scss index 987fbfa57..aca00af7d 100644 --- a/src/styles/_functions.scss +++ b/src/styles/_functions.scss @@ -78,4 +78,7 @@ @if $icon-name == "star" { @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='"+$size+"' height='"+$size+"' viewBox='0 0 24 24' fill='"+$fill+"' stroke='"+$stroke+"' stroke-width='"+$stroke-width+"' stroke-linecap='round' stroke-linejoin='round' class='feather feather-star'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E"); } -} \ No newline at end of file + @if $icon-name == "twitter" { + @return url("data:image/svg+xml,%0A%3Csvg width='"+$size+"' height='"+$size+"' viewBox='0 0 24 21' fill='"+$fill+"' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.972 2.246a1 1 0 00-1.548-1.054 8.91 8.91 0 01-2.011 1.063A5.073 5.073 0 0011 6.007a8.691 8.691 0 01-6.363-3.663 1 1 0 00-1.733.168l.914.406-.914-.405v.001l-.002.003-.003.008-.011.025-.035.086a11.984 11.984 0 00-.443 1.368c-.23.887-.449 2.127-.386 3.505.063 1.383.41 2.925 1.333 4.382.667 1.054 1.616 2.031 2.919 2.862a9.582 9.582 0 01-4.236.802 1 1 0 00-.526 1.874c4.368 2.426 9.273 2.45 13.115.406 3.866-2.058 6.553-6.158 6.553-11.735v-.003a5.05 5.05 0 00-.018-.41 8.018 8.018 0 001.808-3.441z' stroke='"+$stroke+"' stroke-width='"+$stroke-width+"' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); + } +} From b6402ffdfe3bae4ef2433c3e3bea3d5b0aa6b5f9 Mon Sep 17 00:00:00 2001 From: Chalarangelo Date: Tue, 31 Dec 2019 12:52:58 +0200 Subject: [PATCH 4/6] Allow for multiple CTAs Use a state randomization to decide on a CTA. Add Twitter CTA. --- src/lang/literals_en.js | 11 ++++++++++- src/organisms/cta/index.jsx | 25 ++++++++++++++++++++----- 2 files changed, 30 insertions(+), 6 deletions(-) diff --git a/src/lang/literals_en.js b/src/lang/literals_en.js index dcb770be2..2d1bde863 100644 --- a/src/lang/literals_en.js +++ b/src/lang/literals_en.js @@ -20,6 +20,16 @@ const literals = { 'codelang_tag.': (lang, tag) => `${lang} ${capitalize(tag)}`, 'tag.': tag => `${capitalize(tag)}`, 'snippetCount.': count => `${count} snippets`, + 'cta.': ctaId => { + switch (ctaId) { + case 'github': + return 'Star it on GitHub'; + case 'twitter': + return 'Follow on Twitter'; + default: + return ''; + } + }, // Multiline literals 'm': key => multiline[key], // Site metadata @@ -134,7 +144,6 @@ const literals = { 'cookie policy': 'cookie policy', 'Recommended snippets': 'Recommended snippets', 'Like 30 seconds of code?': 'Like 30 seconds of code?', - 'Star it on GitHub': 'Star it on GitHub', 'We couldn\'t find any results for the keyphrase ': 'We couldn\'t find any results for the keyphrase ', }; diff --git a/src/organisms/cta/index.jsx b/src/organisms/cta/index.jsx index 29bba4e0b..fed50282e 100644 --- a/src/organisms/cta/index.jsx +++ b/src/organisms/cta/index.jsx @@ -2,16 +2,31 @@ import React from 'react'; import PropTypes from 'prop-types'; import PageBackdrop from 'molecules/pageBackdrop'; import { AnchorButton } from 'atoms/button'; +import { weightedSample } from 'functions/utils'; import _ from 'lang'; const _l = _('en'); +const config = require('../../../config'); + +const AVAILABLE_CTAS = [ + 'github', + 'twitter', +]; +const AVAILABLE_CTA_PROBABILITIES = [ + 0.4, + 0.6, +]; const CTA = ({ snippetUrl, acceptsCookies, }) => { + const [ctaId, setCtaId] = React.useState( + weightedSample(AVAILABLE_CTAS, AVAILABLE_CTA_PROBABILITIES) + ); + return ( { _l('Like 30 seconds of code?') } @@ -21,21 +36,21 @@ const CTA = ({ > { if (acceptsCookies && typeof window !== 'undefined' && typeof gtag === `function`) { e.preventDefault(); - window.gtag('event', 'click', { event_category: 'cta-github', event_label: e.target.href, value: 1}); + window.gtag('event', 'click', { event_category: `cta-${ctaId}`, event_label: e.target.href, value: 1}); window.open(e.target.href, '_blank'); } } } > - { _l('Star it on GitHub') } + { _l`cta.${ctaId}` } ); From d0570b1e609a90f283f049bff1e00e75ac117058 Mon Sep 17 00:00:00 2001 From: Chalarangelo Date: Tue, 31 Dec 2019 12:53:37 +0200 Subject: [PATCH 5/6] Migrate and update CTA styles Move to the related organism. Generalize shared styles. Add styles for Twitter CTA. --- src/organisms/_index.scss | 1 + src/organisms/cta/_index.scss | 98 +++++++++++++++++++++++++++ src/templates/snippetPage/_index.scss | 75 -------------------- 3 files changed, 99 insertions(+), 75 deletions(-) create mode 100644 src/organisms/cta/_index.scss diff --git a/src/organisms/_index.scss b/src/organisms/_index.scss index f2d0d1103..36c504227 100644 --- a/src/organisms/_index.scss +++ b/src/organisms/_index.scss @@ -1,3 +1,4 @@ +@import './cta'; @import './recommendationList'; @import './shell'; @import './searchResults'; diff --git a/src/organisms/cta/_index.scss b/src/organisms/cta/_index.scss new file mode 100644 index 000000000..a0f086da2 --- /dev/null +++ b/src/organisms/cta/_index.scss @@ -0,0 +1,98 @@ +.btn.btn-cta { + background-repeat: no-repeat; + background-position-x: 14px; + background-position-y: center; + padding-left: 46px; + margin-top: 0; + + @media screen and (min-width: $layout-large-breakpoint) { + font-size: 1.25rem; + line-height: 1.2; + } +} + +.btn.btn-github { + background-image: generate-icon-background("star", $button-fore-color, $button-fore-color, 2, 24); +} + +.btn.btn-twitter { + background-image: generate-icon-background("twitter", $button-fore-color, $button-fore-color, 0, 24); +} + +// TODO: btn-twitter + +.page-graphic.graphic-cta { + height: 120px; + padding-top: 0; + padding-left: 120px; + margin-top: 2.5rem; + margin-bottom: 0.875rem; + + &::before { + background-size: 120px, 120px; + width: 120px; + left: 1.25rem; + background-position-x: left; + + @media screen and (max-width: calc(#{$layout-medium-breakpoint} - 1px)) { + left: 0.875rem; + } + + @media screen and (min-width: $layout-medium-breakpoint) { + left: calc(6vw + 1.25rem); + } + + @media screen and (min-width: $layout-large-breakpoint) { + left: calc(8vw + 1.25rem); + } + } + + @media screen and (min-width: $layout-medium-breakpoint) { + padding-left: calc(10vw + 120px); + margin-top: 2.375rem; + } + + @media screen and (min-width: $layout-large-breakpoint) { + padding-left: calc(10vw + 120px); + padding-right: 10vw; + margin-top: 3.625rem; + margin-bottom: 4.3125rem; + } + + .page-backdrop-text { + padding-top: 1.5rem; + margin-bottom: 1rem; + + @media screen and (min-width: $layout-medium-breakpoint) { + margin-bottom: 0.875rem; + } + + @media screen and (min-width: $layout-large-breakpoint) { + padding-top: 0.375rem; + font-size: 1.125rem; + line-height: 1.2; + margin: 2rem auto 1rem; + } + } +} + +.page-graphic.github-cta{ + &::before { + background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M15.2573 67.2475C-0.521787 42.574 9.07839 33.887 21.062 19.6172C33.0456 5.34743 45.0044 9.60276 77.181 26.4729C106.483 47.5522 111.032 68.1725 106.483 94.4621C101.933 120.752 70.298 123.2 45.0044 114.452C19.7107 105.704 28.1109 87.3465 15.2573 67.2475Z' fill='%23D7DDF3'/%3E%3Cpath d='M66.1026 17.7376L62.5337 7.19379C61.3073 3.57038 56.1825 3.57036 54.9561 7.19378L44.9386 36.7895C44.394 38.3984 42.8928 39.4879 41.1945 39.5069L9.88677 39.8572C6.05444 39.9001 4.47053 44.7875 7.54922 47.0701L32.6491 65.6796C34.0175 66.6941 34.5932 68.4641 34.0835 70.0896L24.7464 99.8661C23.601 103.519 27.7473 106.539 30.8728 104.329L56.4352 86.2504C57.8194 85.2715 59.6704 85.2715 61.0546 86.2504L86.617 104.329C89.7425 106.539 93.8888 103.519 92.7434 99.8661L83.3106 69.7845C82.8489 68.3122 83.2752 66.7057 84.4061 65.656L91.4562 59.112M69.7814 28.6064L72.4034 36.3528C73.0172 38.1662 74.8298 39.2904 76.727 39.0345L83.1613 38.1665M94 56.5L109.099 42.0185C111.897 39.3348 109.623 34.6387 105.783 35.1693L90.0737 37.3397' stroke='%23575E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='50.0881' cy='48.0881' r='1.48038' fill='%23575E7A' stroke='%23575E7A' stroke-width='2'/%3E%3Ccircle cx='67.1752' cy='48.0881' r='1.48038' fill='%23575E7A' stroke='%23575E7A' stroke-width='2'/%3E%3Cpath d='M64.6947 56.0804C64.6947 58.8202 61.9801 61.0412 58.6315 61.0412C55.2829 61.0412 52.5684 58.8202 52.5684 56.0804' stroke='%23575E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M108.239 46.5767C110.985 46.0501 113.043 44.3593 113.339 41.5419' stroke='%23575E7A' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M110.779 47.5394C112.964 47.0923 114.607 45.6765 114.854 43.3268' stroke='%23575E7A' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='120' height='120' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); + } +} + +.page-graphic.twitter-cta{ + &::before { + background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M10.2878 59.0261C-5.36766 34.2892 16.737 15.4144 37.5726 6.39127C56.4238 -5.13826 89.1654 6.89255 94.1263 32.458C101.811 72.0594 83.5584 71.0949 80.732 87.5992C76.2183 113.956 48.7778 122.436 23.6822 113.666C-1.41347 104.896 23.0408 79.1767 10.2878 59.0261Z' fill='%23D7DDF3'/%3E%3Ccircle cx='85.1741' cy='34.1894' r='1.29865' transform='rotate(5.8852 85.1741 34.1894)' fill='%23575E7A' stroke='%23575E7A' stroke-width='2'/%3E%3Cpath d='M8.73195 32.7633C7.90196 30.309 8.32462 27.8767 10.4609 26.3507' stroke='%23575E7A' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.7951 31.1552C6.15756 29.1898 6.54829 27.2182 8.32999 25.9455' stroke='%23575E7A' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M103.066 68.2872C105.341 62.0282 106.888 55.2407 107.606 48.0439C107.693 47.1747 107.729 46.3016 107.715 45.4291C107.7 44.4278 108.109 43.4555 108.994 42.9866C111.321 41.7533 115.303 40.166 118.582 37.2949C118.728 37.1677 118.675 36.9385 118.485 36.9053C116.445 36.5491 112.122 37.1812 110.363 37.1706C109.81 37.1673 109.766 36.7405 110.125 36.3203C112.27 33.8089 115.896 30.9001 117.624 28.5535C117.756 28.3741 117.595 28.1401 117.379 28.1913C113.327 29.1477 108.005 30.9219 105.247 31.8746C104.129 32.2608 102.885 31.9716 102.03 31.1542C101.147 30.3093 99.9133 29.1753 98.5503 28.0564M101.001 73.3842C85.6743 107.538 47.3157 123.215 4.91746 97.8997C3.99827 97.3509 4.50611 95.902 5.57438 95.9722C14.77 96.5769 23.9768 95.0124 32.4506 91.4107C34.6162 90.4902 34.6649 87.5277 32.7215 86.201C2.16363 65.339 12.8688 34.1819 17.3494 24.2651C17.9894 22.8485 19.8883 22.8357 20.7338 24.1401C21.8044 25.792 22.963 27.3811 24.2033 28.901M94.5268 25.1828C93.8637 24.7981 93.2179 24.4802 92.6122 24.2605C88.251 22.6789 83.5092 22.4749 79.0283 23.6761C74.5474 24.8772 70.5434 27.4255 67.558 30.9764C64.5726 34.5273 62.7497 38.9094 62.3359 43.53L62.1174 45.6504C61.9506 47.2684 60.5231 48.4676 58.9104 48.2551C51.0914 47.2246 43.5813 44.4883 36.9175 40.2261C34.8442 38.9001 32.8707 37.4377 31.0086 35.8515' stroke='%23575E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='120' height='120' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); + } +} + +.page-container.dark { + .page-graphic.github-cta::before { + background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M15.2573 67.2475C-0.521787 42.574 9.07839 33.887 21.062 19.6172C33.0456 5.34743 45.0044 9.60276 77.181 26.4729C106.483 47.5522 111.032 68.1725 106.483 94.4621C101.933 120.752 70.298 123.2 45.0044 114.452C19.7107 105.704 28.1109 87.3465 15.2573 67.2475Z' fill='%238993BE'/%3E%3Cpath d='M66.1026 17.7376L62.5337 7.19379C61.3073 3.57038 56.1825 3.57036 54.9561 7.19378L44.9386 36.7895C44.394 38.3984 42.8928 39.4879 41.1945 39.5069L9.88677 39.8572C6.05444 39.9001 4.47053 44.7875 7.54922 47.0701L32.6491 65.6796C34.0175 66.6941 34.5932 68.4641 34.0835 70.0896L24.7464 99.8661C23.601 103.519 27.7473 106.539 30.8728 104.329L56.4352 86.2504C57.8194 85.2715 59.6704 85.2715 61.0546 86.2504L86.617 104.329C89.7425 106.539 93.8888 103.519 92.7434 99.8661L83.3106 69.7845C82.8489 68.3122 83.2752 66.7057 84.4061 65.656L91.4562 59.112M69.7814 28.6064L72.4034 36.3528C73.0172 38.1662 74.8298 39.2904 76.727 39.0345L83.1613 38.1665M94 56.5L109.099 42.0185C111.897 39.3348 109.623 34.6387 105.783 35.1693L90.0737 37.3397' stroke='%23555C7C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='50.0881' cy='48.0881' r='1.48038' fill='%23555C7C' stroke='%23555C7C' stroke-width='2'/%3E%3Ccircle cx='67.1752' cy='48.0881' r='1.48038' fill='%23555C7C' stroke='%23555C7C' stroke-width='2'/%3E%3Cpath d='M64.6947 56.0804C64.6947 58.8202 61.9801 61.0412 58.6315 61.0412C55.2829 61.0412 52.5684 58.8202 52.5684 56.0804' stroke='%23555C7C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M108.239 46.5767C110.985 46.0501 113.043 44.3593 113.339 41.5419' stroke='%23555C7C' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M110.779 47.5394C112.964 47.0923 114.607 45.6765 114.854 43.3268' stroke='%23555C7C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='120' height='120' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); + } + .page-graphic.twiter-cta::before { + background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M10.2878 59.0261C-5.36766 34.2892 16.737 15.4144 37.5726 6.39127C56.4238 -5.13826 89.1654 6.89255 94.1263 32.458C101.811 72.0594 83.5584 71.0949 80.732 87.5992C76.2183 113.956 48.7778 122.436 23.6822 113.666C-1.41347 104.896 23.0408 79.1767 10.2878 59.0261Z' fill='%238993BE'/%3E%3Ccircle cx='85.1741' cy='34.1894' r='1.29865' transform='rotate(5.8852 85.1741 34.1894)' fill='%23555C7C' stroke='%23555C7C' stroke-width='2'/%3E%3Cpath d='M8.73195 32.7633C7.90196 30.309 8.32462 27.8767 10.4609 26.3507' stroke='%23555C7C' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.7951 31.1552C6.15756 29.1898 6.54829 27.2182 8.32999 25.9455' stroke='%23555C7C' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M103.066 68.2872C105.341 62.0282 106.888 55.2407 107.606 48.0439C107.693 47.1747 107.729 46.3016 107.715 45.4291C107.7 44.4278 108.109 43.4555 108.994 42.9866C111.321 41.7533 115.303 40.166 118.582 37.2949C118.728 37.1677 118.675 36.9385 118.485 36.9053C116.445 36.5491 112.122 37.1812 110.363 37.1706C109.81 37.1673 109.766 36.7405 110.125 36.3203C112.27 33.8089 115.896 30.9001 117.624 28.5535C117.756 28.3741 117.595 28.1401 117.379 28.1913C113.327 29.1477 108.005 30.9219 105.247 31.8746C104.129 32.2608 102.885 31.9716 102.03 31.1542C101.147 30.3093 99.9133 29.1753 98.5503 28.0564M101.001 73.3842C85.6743 107.538 47.3157 123.215 4.91746 97.8997C3.99827 97.3509 4.50611 95.902 5.57438 95.9722C14.77 96.5769 23.9768 95.0124 32.4506 91.4107C34.6162 90.4902 34.6649 87.5277 32.7215 86.201C2.16363 65.339 12.8688 34.1819 17.3494 24.2651C17.9894 22.8485 19.8883 22.8357 20.7338 24.1401C21.8044 25.792 22.963 27.3811 24.2033 28.901M94.5268 25.1828C93.8637 24.7981 93.2179 24.4802 92.6122 24.2605C88.251 22.6789 83.5092 22.4749 79.0283 23.6761C74.5474 24.8772 70.5434 27.4255 67.558 30.9764C64.5726 34.5273 62.7497 38.9094 62.3359 43.53L62.1174 45.6504C61.9506 47.2684 60.5231 48.4676 58.9104 48.2551C51.0914 47.2246 43.5813 44.4883 36.9175 40.2261C34.8442 38.9001 32.8707 37.4377 31.0086 35.8515' stroke='%23555C7C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='120' height='120' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); + } +} diff --git a/src/templates/snippetPage/_index.scss b/src/templates/snippetPage/_index.scss index 42364b017..e69de29bb 100644 --- a/src/templates/snippetPage/_index.scss +++ b/src/templates/snippetPage/_index.scss @@ -1,75 +0,0 @@ -.btn.btn-star { - background-image: generate-icon-background("star", $button-fore-color, $button-fore-color, 2, 24); - background-repeat: no-repeat; - background-position-x: 14px; - background-position-y: center; - padding-left: 46px; - margin-top: 0; - - @media screen and (min-width: $layout-large-breakpoint) { - font-size: 1.25rem; - line-height: 1.2; - } -} - -.page-graphic.github-cta{ - height: 120px; - padding-top: 0; - padding-left: 120px; - margin-top: 2.5rem; - margin-bottom: 0.875rem; - - &::before { - background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M15.2573 67.2475C-0.521787 42.574 9.07839 33.887 21.062 19.6172C33.0456 5.34743 45.0044 9.60276 77.181 26.4729C106.483 47.5522 111.032 68.1725 106.483 94.4621C101.933 120.752 70.298 123.2 45.0044 114.452C19.7107 105.704 28.1109 87.3465 15.2573 67.2475Z' fill='%23D7DDF3'/%3E%3Cpath d='M66.1026 17.7376L62.5337 7.19379C61.3073 3.57038 56.1825 3.57036 54.9561 7.19378L44.9386 36.7895C44.394 38.3984 42.8928 39.4879 41.1945 39.5069L9.88677 39.8572C6.05444 39.9001 4.47053 44.7875 7.54922 47.0701L32.6491 65.6796C34.0175 66.6941 34.5932 68.4641 34.0835 70.0896L24.7464 99.8661C23.601 103.519 27.7473 106.539 30.8728 104.329L56.4352 86.2504C57.8194 85.2715 59.6704 85.2715 61.0546 86.2504L86.617 104.329C89.7425 106.539 93.8888 103.519 92.7434 99.8661L83.3106 69.7845C82.8489 68.3122 83.2752 66.7057 84.4061 65.656L91.4562 59.112M69.7814 28.6064L72.4034 36.3528C73.0172 38.1662 74.8298 39.2904 76.727 39.0345L83.1613 38.1665M94 56.5L109.099 42.0185C111.897 39.3348 109.623 34.6387 105.783 35.1693L90.0737 37.3397' stroke='%23575E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='50.0881' cy='48.0881' r='1.48038' fill='%23575E7A' stroke='%23575E7A' stroke-width='2'/%3E%3Ccircle cx='67.1752' cy='48.0881' r='1.48038' fill='%23575E7A' stroke='%23575E7A' stroke-width='2'/%3E%3Cpath d='M64.6947 56.0804C64.6947 58.8202 61.9801 61.0412 58.6315 61.0412C55.2829 61.0412 52.5684 58.8202 52.5684 56.0804' stroke='%23575E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M108.239 46.5767C110.985 46.0501 113.043 44.3593 113.339 41.5419' stroke='%23575E7A' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M110.779 47.5394C112.964 47.0923 114.607 45.6765 114.854 43.3268' stroke='%23575E7A' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='120' height='120' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); - background-size: 120px, 120px; - width: 120px; - left: 1.25rem; - background-position-x: left; - - @media screen and (max-width: calc(#{$layout-medium-breakpoint} - 1px)) { - left: 0.875rem; - } - - @media screen and (min-width: $layout-medium-breakpoint) { - left: calc(6vw + 1.25rem); - } - - @media screen and (min-width: $layout-large-breakpoint) { - left: calc(8vw + 1.25rem); - } - } - - @media screen and (min-width: $layout-medium-breakpoint) { - padding-left: calc(10vw + 120px); - margin-top: 2.375rem; - } - - @media screen and (min-width: $layout-large-breakpoint) { - padding-left: calc(10vw + 120px); - padding-right: 10vw; - margin-top: 3.625rem; - margin-bottom: 4.3125rem; - } - - .page-backdrop-text { - padding-top: 1.5rem; - margin-bottom: 1rem; - - @media screen and (min-width: $layout-medium-breakpoint) { - margin-bottom: 0.875rem; - } - - @media screen and (min-width: $layout-large-breakpoint) { - padding-top: 0.375rem; - font-size: 1.125rem; - line-height: 1.2; - margin: 2rem auto 1rem; - } - } -} - -.page-container.dark { - .page-graphic.github-cta::before { - background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M15.2573 67.2475C-0.521787 42.574 9.07839 33.887 21.062 19.6172C33.0456 5.34743 45.0044 9.60276 77.181 26.4729C106.483 47.5522 111.032 68.1725 106.483 94.4621C101.933 120.752 70.298 123.2 45.0044 114.452C19.7107 105.704 28.1109 87.3465 15.2573 67.2475Z' fill='%238993BE'/%3E%3Cpath d='M66.1026 17.7376L62.5337 7.19379C61.3073 3.57038 56.1825 3.57036 54.9561 7.19378L44.9386 36.7895C44.394 38.3984 42.8928 39.4879 41.1945 39.5069L9.88677 39.8572C6.05444 39.9001 4.47053 44.7875 7.54922 47.0701L32.6491 65.6796C34.0175 66.6941 34.5932 68.4641 34.0835 70.0896L24.7464 99.8661C23.601 103.519 27.7473 106.539 30.8728 104.329L56.4352 86.2504C57.8194 85.2715 59.6704 85.2715 61.0546 86.2504L86.617 104.329C89.7425 106.539 93.8888 103.519 92.7434 99.8661L83.3106 69.7845C82.8489 68.3122 83.2752 66.7057 84.4061 65.656L91.4562 59.112M69.7814 28.6064L72.4034 36.3528C73.0172 38.1662 74.8298 39.2904 76.727 39.0345L83.1613 38.1665M94 56.5L109.099 42.0185C111.897 39.3348 109.623 34.6387 105.783 35.1693L90.0737 37.3397' stroke='%23555C7C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='50.0881' cy='48.0881' r='1.48038' fill='%23555C7C' stroke='%23555C7C' stroke-width='2'/%3E%3Ccircle cx='67.1752' cy='48.0881' r='1.48038' fill='%23555C7C' stroke='%23555C7C' stroke-width='2'/%3E%3Cpath d='M64.6947 56.0804C64.6947 58.8202 61.9801 61.0412 58.6315 61.0412C55.2829 61.0412 52.5684 58.8202 52.5684 56.0804' stroke='%23555C7C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M108.239 46.5767C110.985 46.0501 113.043 44.3593 113.339 41.5419' stroke='%23555C7C' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M110.779 47.5394C112.964 47.0923 114.607 45.6765 114.854 43.3268' stroke='%23555C7C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='120' height='120' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); - } -} \ No newline at end of file From 608ce092229442a0abec5ba4ee537568d76da611 Mon Sep 17 00:00:00 2001 From: Chalarangelo Date: Tue, 31 Dec 2019 13:00:41 +0200 Subject: [PATCH 6/6] Document and test CTA organism --- src/organisms/cta/cta.stories.js | 28 +++++++++++++++++++++++++++ src/organisms/cta/cta.test.jsx | 33 ++++++++++++++++++++++++++++++++ src/organisms/cta/docs.mdx | 31 ++++++++++++++++++++++++++++++ 3 files changed, 92 insertions(+) create mode 100644 src/organisms/cta/cta.stories.js create mode 100644 src/organisms/cta/cta.test.jsx create mode 100644 src/organisms/cta/docs.mdx diff --git a/src/organisms/cta/cta.stories.js b/src/organisms/cta/cta.stories.js new file mode 100644 index 000000000..d6e3f9225 --- /dev/null +++ b/src/organisms/cta/cta.stories.js @@ -0,0 +1,28 @@ +import React from 'react'; +import CTA from 'molecules/cta'; +import mdx from './docs.mdx'; + +export default { + title: 'Organisms|CTA', + component: CTA, + parameters: { + docs: { + page: mdx, + }, + jest: [ + 'cta', + ], + }, +}; + +export const component = () => { + const snippetUrl = 'https://google.com'; + const acceptsCookies = false; + + return ( + + ); +}; diff --git a/src/organisms/cta/cta.test.jsx b/src/organisms/cta/cta.test.jsx new file mode 100644 index 000000000..38f0a1a47 --- /dev/null +++ b/src/organisms/cta/cta.test.jsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { mount, configure } from 'enzyme'; +import Adapter from 'enzyme-adapter-react-16'; + +import CTA from './index'; + +configure({ adapter: new Adapter() }); +console.warn = jest.fn(); + +describe('', () => { + const snippetUrl = 'https://google.com'; + const acceptsCookies = false; + + let wrapper; + + beforeEach(() => { + wrapper = mount( + + ); + }); + + it('should render a PageBackdrop component', () => { + expect(wrapper).toContainMatchingElement('PageBackdrop'); + }); + + it('should render an AnchorButton component', () => { + expect(wrapper).toContainMatchingElement('AnchorButton'); + }); + +}); diff --git a/src/organisms/cta/docs.mdx b/src/organisms/cta/docs.mdx new file mode 100644 index 000000000..fb6af160f --- /dev/null +++ b/src/organisms/cta/docs.mdx @@ -0,0 +1,31 @@ +import { + Story, + Preview, + Props, + Source, + Description, + ColorPalette, + ColorItem, + Meta, +} from '@storybook/addon-docs/blocks'; +import CTA from 'organisms/cta'; + +# CTA + +A component that display a call to action. + +## Props + + + +## Source + +```jsx +const snippetUrl = 'https://google.com'; +const acceptsCookies = false; + + +```