From cdc8dd5c2a8e33406de92c7b63e9804d430b658c Mon Sep 17 00:00:00 2001 From: Mario Date: Sat, 15 Aug 2020 15:57:07 +0700 Subject: [PATCH 01/27] bingung --- .storybook/themeDecorator.js | 12 +++++++++++- src/AlertBox/style.js | 4 ++-- src/Input/style.js | 26 +++++++++++++------------- src/SmallNav/style.js | 2 +- 4 files changed, 27 insertions(+), 17 deletions(-) diff --git a/.storybook/themeDecorator.js b/.storybook/themeDecorator.js index 07ea0b7..6b7f8a6 100644 --- a/.storybook/themeDecorator.js +++ b/.storybook/themeDecorator.js @@ -8,8 +8,18 @@ const defaulTheme = { } } +const testTheme = { + colors: { + primary:undefined, + background:undefined, + }, + font: { + color:undefined + } +} + const ThemeDecorator = (storyFn) => ( - {storyFn()} + {storyFn()} ) export default ThemeDecorator diff --git a/src/AlertBox/style.js b/src/AlertBox/style.js index d262b80..920513b 100644 --- a/src/AlertBox/style.js +++ b/src/AlertBox/style.js @@ -24,7 +24,7 @@ export const MyStyle = styled.div` width: 80%; padding-bottom: 30px; font-size: 20px; - color: white; + color: ${props => props.theme.font.color ? props.theme.font.color : "#fff"}; } button { @@ -34,6 +34,6 @@ export const MyStyle = styled.div` button:nth-of-type(1) { background: transparent; - border: 1px solid #ffffff; + border: 1px solid ${props => props.theme.colors.primary ? props.theme.colors.primary : "#f4f4f4"}; } ` diff --git a/src/Input/style.js b/src/Input/style.js index 1e4abc4..7d2f588 100644 --- a/src/Input/style.js +++ b/src/Input/style.js @@ -4,21 +4,21 @@ import { Field } from "formik" export const BaseInput = styled(Field)` width: calc(100% - 34px); padding: 10px 15px; - color: ${(props) => props.theme.colors.primary}; + color: ${(props) => props.theme.colors.primary ? props.theme.colors.primary : "#f3f3f3"}; background-color: transparent; - border: 2px solid ${(props) => props.theme.colors.primary}; + border: 2px solid ${(props) => props.theme.colors.primary ? props.theme.colors.primary : "#f3f3f3"}; border-radius: 5px; font-family: inherit; &::placeholder { - color: ${(props) => props.theme.colors.primary}; + color: ${(props) => props.theme.colors.primary ? props.theme.colors.primary : "#f3f3f3"}; opacity: 0.5; } ` export const RadioSpan = styled.span` display: block; - color: ${(props) => props.theme.colors.primary}; + color: ${(props) => props.theme.colors.primary ? props.theme.colors.primary : "#f3f3f3"}; &:before { content: ""; @@ -27,10 +27,10 @@ export const RadioSpan = styled.span` height: 1.2rem; vertical-align: -0.25rem; border-radius: 1.2rem; - border: 1px solid ${(props) => props.theme.colors.primary}; + border: 1px solid ${(props) => props.theme.colors.primary ? props.theme.colors.primary : "#f3f3f3"}; margin-right: 0.6rem; transition: background 0.2s ease; - box-shadow: inset 0 0 0 0.3rem ${(props) => props.theme.colors.background}; + box-shadow: inset 0 0 0 0.3rem ${(props) => props.theme.colors.background ? props.theme.colors.background : "#000"}; } ` @@ -44,14 +44,14 @@ export const RadioButton = styled(Field)` width: 1px; &:checked + ${RadioSpan}:before { - background: ${(props) => props.theme.colors.primary}; + background: ${(props) => props.theme.colors.primary ? props.theme.colors.primary : "#f3f3f3"}; } ` export const PhoneSpan = styled.span` position: absolute; margin: 15px; - color: ${(props) => props.theme.colors.primary}; + color: ${(props) => props.theme.colors.primary ? props.theme.colors.primary : "#f3f3f3"}; &:after { content: ""; @@ -61,12 +61,12 @@ export const PhoneSpan = styled.span` left: 2.5rem; width: 1px; height: calc(1rem + 10px); - background: ${(props) => props.theme.colors.primary}; + background: ${(props) => props.theme.colors.primary ? props.theme.colors.primary : "#f3f3f3"}; } ` export const CheckboxLabel = styled.label` - color: ${(props) => props.theme.colors.primary}; + color: ${(props) => props.theme.colors.primary ? props.theme.colors.primary : "#f3f3f3"}; display: block; position: relative; padding-left: 35px; @@ -92,7 +92,7 @@ export const CheckboxLabel = styled.label` left: 0; height: 20px; width: 20px; - border: 1px solid ${(props) => props.theme.colors.primary}; + border: 1px solid ${(props) => props.theme.colors.primary ? props.theme.colors.primary : "#f3f3f3"}; border-radius: 2px; } @@ -103,7 +103,7 @@ export const CheckboxLabel = styled.label` /* When the checkbox is checked, add a blue background */ input:checked ~ .checkmark { - background-color: ${(props) => props.theme.colors.primary}; + background-color: ${(props) => props.theme.colors.primary ? props.theme.colors.primary : "#f3f3f3"}; } /* Style the checkmark/indicator */ @@ -115,7 +115,7 @@ export const CheckboxLabel = styled.label` top: 3px; width: 5px; height: 10px; - border: solid ${(props) => props.theme.colors.background}; + border: solid ${(props) => props.theme.colors.background ? props.theme.colors.background : "#000"}; border-width: 0 2px 2px 0; transform: rotate(45deg); } diff --git a/src/SmallNav/style.js b/src/SmallNav/style.js index fb9c4b2..de4b166 100644 --- a/src/SmallNav/style.js +++ b/src/SmallNav/style.js @@ -9,7 +9,7 @@ const Style = styled.div` justify-content: center; font-size: 1.2rem; overflow-x: auto; - color: white; + color: ${props => props.theme.font.color ? props.theme.font.color : "white"}; } .small-nav div { From 07951905698b8d06e9e78cba8749714543a97531 Mon Sep 17 00:00:00 2001 From: Muhamad Andre Gunawan Date: Mon, 24 Aug 2020 12:58:22 +0700 Subject: [PATCH 02/27] Add Footer documentation, add about to Docs section on jasper footer, and also improve previous documentation --- docusaurus/docs/footer.md | 50 ++++++ docusaurus/docs/small-nav.md | 12 +- docusaurus/docusaurus.config.js | 115 ++++++------- docusaurus/sidebars.js | 17 +- .../static/img/FooterAssets/Facebook.svg | 3 + .../static/img/FooterAssets/Instagram.svg | 5 + docusaurus/static/img/FooterAssets/Line.svg | 3 + .../static/img/FooterAssets/LinkedIn.svg | 3 + .../img/FooterAssets/compfest-white.svg | 13 ++ .../static/img/FooterAssets/twitter.svg | 3 + .../static/img/FooterAssets/youtube.svg | 3 + src/Footer/Docusaurus/SubscribeForm/index.js | 28 ++++ src/Footer/Docusaurus/SubscribeForm/style.js | 58 +++++++ src/Footer/Docusaurus/index.js | 64 ++++++++ src/Footer/Docusaurus/style.js | 154 ++++++++++++++++++ 15 files changed, 464 insertions(+), 67 deletions(-) create mode 100644 docusaurus/docs/footer.md create mode 100644 docusaurus/static/img/FooterAssets/Facebook.svg create mode 100644 docusaurus/static/img/FooterAssets/Instagram.svg create mode 100644 docusaurus/static/img/FooterAssets/Line.svg create mode 100644 docusaurus/static/img/FooterAssets/LinkedIn.svg create mode 100644 docusaurus/static/img/FooterAssets/compfest-white.svg create mode 100644 docusaurus/static/img/FooterAssets/twitter.svg create mode 100644 docusaurus/static/img/FooterAssets/youtube.svg create mode 100644 src/Footer/Docusaurus/SubscribeForm/index.js create mode 100644 src/Footer/Docusaurus/SubscribeForm/style.js create mode 100644 src/Footer/Docusaurus/index.js create mode 100644 src/Footer/Docusaurus/style.js diff --git a/docusaurus/docs/footer.md b/docusaurus/docs/footer.md new file mode 100644 index 0000000..e19f0a4 --- /dev/null +++ b/docusaurus/docs/footer.md @@ -0,0 +1,50 @@ +--- +id: footer +title: Footer +--- + +import { Footer } from '../../src/Footer/Docusaurus' + +Footer is a component that contains brief information about Compfest and also contacts that can be used to reach Compfest. There also an input field to contain user email, that can be used by users to subscribe to Compfest so will not get lost of updated news from Compfest. + +### Usage + +We use footer to tell user brief information about Compfest and which contact that can be used for users to reach Compfest. + +### Code + +```jsx +import Facebook from "../static/img/FooterAssets/Facebook.svg" +import Instagram from "../static/img/FooterAssets/Instagram.svg" +import Line from "../static/img/FooterAssets/Line.svg" +import Twitter from "../static/img/FooterAssets/twitter.svg" +import Linkedin from "../static/img/FooterAssets/LinkedIn.svg" +import Youtube from "../static/img/FooterAssets/youtube.svg" +import Compfest from "../static/img/FooterAssets/compfest-white.svg" + +