From b9147b326a75fcff718e3424142e603718dcee98 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Tue, 30 Mar 2021 09:55:59 +0300 Subject: [PATCH 1/2] Implements #5432 --- src/assets/images/minimal-down-white.svg | 19 +++++ .../Contentful/Dropdown/DropdownItem.jsx | 25 ++++--- .../components/Contentful/Dropdown/index.jsx | 18 ++++- .../Contentful/Dropdown/themes/dark.scss | 18 +++++ .../Dropdown/{ => themes}/default.scss | 2 +- .../Contentful/Dropdown/themes/item-dark.scss | 74 +++++++++++++++++++ .../Dropdown/{ => themes}/item.scss | 35 ++++++--- 7 files changed, 166 insertions(+), 25 deletions(-) create mode 100644 src/assets/images/minimal-down-white.svg create mode 100644 src/shared/components/Contentful/Dropdown/themes/dark.scss rename src/shared/components/Contentful/Dropdown/{ => themes}/default.scss (93%) create mode 100644 src/shared/components/Contentful/Dropdown/themes/item-dark.scss rename src/shared/components/Contentful/Dropdown/{ => themes}/item.scss (66%) diff --git a/src/assets/images/minimal-down-white.svg b/src/assets/images/minimal-down-white.svg new file mode 100644 index 0000000000..fa93bcd8db --- /dev/null +++ b/src/assets/images/minimal-down-white.svg @@ -0,0 +1,19 @@ + + + E3888766-86CD-43A6-A78B-A268A3840C86 + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/shared/components/Contentful/Dropdown/DropdownItem.jsx b/src/shared/components/Contentful/Dropdown/DropdownItem.jsx index 1c7d36cee9..2b8835e766 100644 --- a/src/shared/components/Contentful/Dropdown/DropdownItem.jsx +++ b/src/shared/components/Contentful/Dropdown/DropdownItem.jsx @@ -5,9 +5,14 @@ import React from 'react'; import PT from 'prop-types'; import MarkdownRenderer from 'components/MarkdownRenderer'; +import { themr } from 'react-css-super-themr'; +import defaultTheme from './themes/item.scss'; +import darkTheme from './themes/item-dark.scss'; -import './item.scss'; - +const THEMES = { + Default: defaultTheme, + 'Dark mode': darkTheme, +}; class DropdownItem extends React.Component { constructor(props) { super(props); @@ -24,24 +29,24 @@ class DropdownItem extends React.Component { } render() { - const { data } = this.props; + const { data, baseTheme } = this.props; const { isActive } = this.state; return ( -
+
(e.key === 'Enter' ? null : null)} - styleName={isActive ? 'question active' : 'question'} + className={isActive ? THEMES[baseTheme]['question-active'] : THEMES[baseTheme].question} onClick={() => this.toggleActive()} > -
+
{data.fields.title}
-
+
@@ -55,6 +60,7 @@ DropdownItem.defaultProps = { spaceName: null, environment: null, isActive: false, + baseTheme: 'Default', }; DropdownItem.propTypes = { @@ -63,6 +69,7 @@ DropdownItem.propTypes = { preview: PT.bool, spaceName: PT.string, environment: PT.string, + baseTheme: PT.string, }; -export default DropdownItem; +export default themr('DropdownItem', defaultTheme)(DropdownItem); diff --git a/src/shared/components/Contentful/Dropdown/index.jsx b/src/shared/components/Contentful/Dropdown/index.jsx index 92d6505fec..02de1f8863 100644 --- a/src/shared/components/Contentful/Dropdown/index.jsx +++ b/src/shared/components/Contentful/Dropdown/index.jsx @@ -10,7 +10,13 @@ import React from 'react'; import { fixStyle } from 'utils/contentful'; import DropdownItem from './DropdownItem'; -import defaultTheme from './default.scss'; +import defaultTheme from './themes/default.scss'; +import darkTheme from './themes/dark.scss'; + +const THEMES = { + Default: defaultTheme, + 'Dark mode': darkTheme, +}; function DropdownItemsLoader(props) { const { @@ -18,6 +24,7 @@ function DropdownItemsLoader(props) { preview, spaceName, environment, + baseTheme, } = props; return ( @@ -34,6 +41,7 @@ function DropdownItemsLoader(props) { spaceName={spaceName} environment={environment} key={item.sys.id} + baseTheme={baseTheme} /> )) )} @@ -53,6 +61,7 @@ DropdownItemsLoader.propTypes = { preview: PT.bool, spaceName: PT.string, environment: PT.string, + baseTheme: PT.string.isRequired, }; /* Loads the dropdown entry. */ @@ -69,13 +78,15 @@ export default function DropdownLoader(props) { render={(data) => { const { fields } = Object.values(data.entries.items)[0]; if (!fields) return null; + let { theme } = fields; + theme = theme || 'Default'; return (
diff --git a/src/shared/components/Contentful/Dropdown/themes/dark.scss b/src/shared/components/Contentful/Dropdown/themes/dark.scss new file mode 100644 index 0000000000..f055fe1816 --- /dev/null +++ b/src/shared/components/Contentful/Dropdown/themes/dark.scss @@ -0,0 +1,18 @@ +@import "~styles/mixins"; + +.container { + padding: 0; + + @include xs-to-sm { + padding: 0 15px; + } +} + +.contentWrapper { + display: flex; + margin: 0 auto; + max-width: $screen-md; + color: #fff; + flex-direction: column; + border-top: 1px solid rgba(212, 212, 212, 0.4); +} diff --git a/src/shared/components/Contentful/Dropdown/default.scss b/src/shared/components/Contentful/Dropdown/themes/default.scss similarity index 93% rename from src/shared/components/Contentful/Dropdown/default.scss rename to src/shared/components/Contentful/Dropdown/themes/default.scss index 9022565a91..f5b53818fc 100644 --- a/src/shared/components/Contentful/Dropdown/default.scss +++ b/src/shared/components/Contentful/Dropdown/themes/default.scss @@ -12,7 +12,7 @@ display: flex; margin: 0 auto; max-width: $screen-md; - color: black; + color: #2a2a2a; flex-direction: column; border-top: 1px solid #d4d4d4; } diff --git a/src/shared/components/Contentful/Dropdown/themes/item-dark.scss b/src/shared/components/Contentful/Dropdown/themes/item-dark.scss new file mode 100644 index 0000000000..f01fbb6373 --- /dev/null +++ b/src/shared/components/Contentful/Dropdown/themes/item-dark.scss @@ -0,0 +1,74 @@ +@import "~styles/mixins"; +@import "~components/Contentful/default"; + +.container { + width: 100%; +} + +.question, +.question-active { + display: flex; + align-items: center; + justify-content: space-between; + height: 82px; + outline: none; + cursor: pointer; + border-bottom: 1px solid rgba(212, 212, 212, 0.4); +} + +.question-active { + border-bottom: none; + height: 81px; +} + +.answer, +.answer-active { + @include gui-kit-content; + @include gui-kit-headers; + + display: none; + padding: 5px 70px 24px 0; + color: #fff; + + @include xs-to-sm { + padding-right: 0; + } + + p { + color: #fff; + } +} + +.answer-active { + display: block; + border-bottom: 1px solid rgba(212, 212, 212, 0.4); +} + +.text { + color: #fff; + font-family: BarlowCondensed, sans-serif; + font-size: 31px; + letter-spacing: 0.2px; + text-transform: uppercase; + font-weight: 500; + + @include xs-to-sm { + max-width: 350px; + flex: 1; + margin-right: 20px; + font-size: 21px; + } +} + +.toggle-arrow, +.toggle-arrow-active { + background-image: url(assets/images/minimal-down-white.svg); + background-repeat: no-repeat; + align-self: right; + width: 24px; + height: 15px; +} + +.toggle-arrow-active { + transform: scale(1, -1); +} diff --git a/src/shared/components/Contentful/Dropdown/item.scss b/src/shared/components/Contentful/Dropdown/themes/item.scss similarity index 66% rename from src/shared/components/Contentful/Dropdown/item.scss rename to src/shared/components/Contentful/Dropdown/themes/item.scss index 7cd898b901..a702b40acd 100644 --- a/src/shared/components/Contentful/Dropdown/item.scss +++ b/src/shared/components/Contentful/Dropdown/themes/item.scss @@ -5,7 +5,8 @@ width: 100%; } -.question { +.question, +.question-active { display: flex; align-items: center; justify-content: space-between; @@ -13,13 +14,15 @@ outline: none; cursor: pointer; border-bottom: 1px solid #d4d4d4; +} - &.active { - border-bottom: none; - } +.question-active { + border-bottom: none; + height: 81px; } -.answer { +.answer, +.answer-active { @include gui-kit-content; @include gui-kit-headers; @@ -27,12 +30,16 @@ padding: 5px 70px 24px 0; color: #2a2a2a; - &.active { - display: block; - border-bottom: 1px solid #d4d4d4; + @include xs-to-sm { + padding-right: 0; } } +.answer-active { + display: block; + border-bottom: 1px solid #d4d4d4; +} + .text { color: #2a2a2a; font-family: BarlowCondensed, sans-serif; @@ -43,17 +50,21 @@ @include xs-to-sm { max-width: 350px; + flex: 1; + margin-right: 20px; + font-size: 21px; } } -.toggle-arrow { +.toggle-arrow, +.toggle-arrow-active { background-image: url(assets/images/minimal-down.svg); background-repeat: no-repeat; align-self: right; width: 24px; height: 13px; +} - &.active { - transform: scale(1, -1); - } +.toggle-arrow-active { + transform: scale(1, -1); } From 14efead58ac31e098bbd7a2b4eebc38b1ac6ab74 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Tue, 30 Mar 2021 10:00:51 +0300 Subject: [PATCH 2/2] ci: on test --- .circleci/config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 7d107a6dc6..2aecf63a05 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -283,7 +283,7 @@ workflows: filters: branches: only: - - gig-application-update + - FAQ-theme # This is alternate dev env for parallel testing - "build-qa": context : org-global