From 4c47c1d217c7d8e049cf87f68c185edacd3af182 Mon Sep 17 00:00:00 2001 From: Duong Pham Date: Thu, 2 Jan 2020 17:54:50 +0700 Subject: [PATCH 1/3] [CLD-642] Add structure for v2 --- .storybook/webpack.config.js | 2 +- jest.config.js | 12 +- package.json | 21 +-- src/index.tsx | 7 + src/v2.ts | 1 + src/v2/src/components/index.ts | 1 + .../typography/__snapshots__/h1.test.tsx.snap | 47 ++++++ src/v2/src/components/typography/h1.test.tsx | 10 ++ src/v2/src/components/typography/h1.tsx | 17 ++ src/v2/src/components/typography/index.ts | 1 + src/v2/src/index.ts | 1 + src/v2/src/styles/index.ts | 61 ++++++++ tslint.json | 3 +- yarn.lock | 145 +++++++++++++++++- 14 files changed, 308 insertions(+), 21 deletions(-) create mode 100644 src/v2.ts create mode 100644 src/v2/src/components/index.ts create mode 100644 src/v2/src/components/typography/__snapshots__/h1.test.tsx.snap create mode 100644 src/v2/src/components/typography/h1.test.tsx create mode 100644 src/v2/src/components/typography/h1.tsx create mode 100644 src/v2/src/components/typography/index.ts create mode 100644 src/v2/src/index.ts create mode 100644 src/v2/src/styles/index.ts diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index f660bc97a3..79d0e33e28 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -19,7 +19,7 @@ module.exports = ({ config }) => { { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'], - include: path.resolve(__dirname, '../'), + include: path.resolve(__dirname, '../') } ) config.resolve.extensions.push('.ts', '.tsx') diff --git a/jest.config.js b/jest.config.js index 3060b82599..42b2dd2bfd 100644 --- a/jest.config.js +++ b/jest.config.js @@ -6,7 +6,9 @@ module.exports = { coveragePathIgnorePatterns: [ '[/\\\\](node_modules|src/types|src/tests|src/scripts|src/helpers|src/stylesq)[/\\\\]', '.stories.tsx', - 'src/index.tsx' + 'src/index.tsx', + 'index.ts', + 'v2.ts' ], modulePathIgnorePatterns: ['[/\\\\](node_modules|public)[/\\\\]'], transform: { @@ -18,10 +20,10 @@ module.exports = { }, coverageThreshold: { global: { - branches: 73, - functions: 90, - lines: 90, - statements: 90 + branches: 85, + functions: 94, + lines: 95, + statements: 95 } } } diff --git a/package.json b/package.json index 672bb3ead9..2da2760217 100644 --- a/package.json +++ b/package.json @@ -33,15 +33,6 @@ }, "homepage": "https://github.com/reapit/elements#readme", "devDependencies": { - "@types/react": "^16.9.2", - "@types/react-dom": "^16.9.0", - "@types/react-router": "^5.0.3", - "@types/react-router-dom": "^4.3.5", - "@types/enzyme": "^3.10.3", - "@types/jest": "^24.0.17", - "@types/jsonwebtoken": "^8.3.4", - "@types/node": "^12.7.1", - "@types/storybook__react": "^4.0.2", "@babel/core": "^7.5.5", "@octokit/rest": "^16.35.0", "@storybook/addon-actions": "^5.2.6", @@ -54,6 +45,15 @@ "@storybook/cli": "^5.2.6", "@storybook/react": "^5.2.6", "@storybook/storybook-deployer": "^2.8.1", + "@types/enzyme": "^3.10.3", + "@types/jest": "^24.0.17", + "@types/jsonwebtoken": "^8.3.4", + "@types/node": "^12.7.1", + "@types/react": "^16.9.2", + "@types/react-dom": "^16.9.0", + "@types/react-router": "^5.0.3", + "@types/react-router-dom": "^4.3.5", + "@types/storybook__react": "^4.0.2", "awesome-typescript-loader": "^5.2.1", "babel-loader": "^8.0.6", "compare-versions": "^3.5.1", @@ -106,7 +106,8 @@ "react-google-map": "^3.1.1", "react-google-maps-loader": "^4.2.5", "react-icons": "^3.7.0", - "react-table": "7.0.0-alpha.35" + "react-table": "7.0.0-alpha.35", + "styled-components": "^4.4.1" }, "peerDependencies": { "react": "^16.11.0", diff --git a/src/index.tsx b/src/index.tsx index 232df07335..83a6d79328 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,3 +1,4 @@ +import * as v2 from './v2' // Hooks export * from './hooks/UsePortal' @@ -53,3 +54,9 @@ export * from './utils/completed-section/completed-sections' export * from './utils/combine-address/combine-address' export * from './utils/is-base64' export * from './utils/device-detection/device-detection' + +const elements = { + v2: v2 +} + +export default elements diff --git a/src/v2.ts b/src/v2.ts new file mode 100644 index 0000000000..9e624bace8 --- /dev/null +++ b/src/v2.ts @@ -0,0 +1 @@ +export * from './v2/src' diff --git a/src/v2/src/components/index.ts b/src/v2/src/components/index.ts new file mode 100644 index 0000000000..324025ef71 --- /dev/null +++ b/src/v2/src/components/index.ts @@ -0,0 +1 @@ +export * from './typography' diff --git a/src/v2/src/components/typography/__snapshots__/h1.test.tsx.snap b/src/v2/src/components/typography/__snapshots__/h1.test.tsx.snap new file mode 100644 index 0000000000..2ea193c5e8 --- /dev/null +++ b/src/v2/src/components/typography/__snapshots__/h1.test.tsx.snap @@ -0,0 +1,47 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`H1 should match snapshot 1`] = ` + +`; diff --git a/src/v2/src/components/typography/h1.test.tsx b/src/v2/src/components/typography/h1.test.tsx new file mode 100644 index 0000000000..af9a102a44 --- /dev/null +++ b/src/v2/src/components/typography/h1.test.tsx @@ -0,0 +1,10 @@ +import React from 'react' +import { shallow } from 'enzyme' +import { H1 } from './h1' + +describe('H1', () => { + it('should match snapshot', () => { + const wrapper = shallow(

) + expect(wrapper).toMatchSnapshot() + }) +}) diff --git a/src/v2/src/components/typography/h1.tsx b/src/v2/src/components/typography/h1.tsx new file mode 100644 index 0000000000..97006d4d0f --- /dev/null +++ b/src/v2/src/components/typography/h1.tsx @@ -0,0 +1,17 @@ +import styled from 'styled-components' +import { TYPOGRAPHY_TITLE_FONT_COLOR } from '../../styles' + +export const H1 = styled.h1` + color: ${props => props.theme.h1.color} + font-size: 1em; +` + +H1.defaultProps = { + theme: { + h1: { + color: TYPOGRAPHY_TITLE_FONT_COLOR + } + } +} + +export default H1 diff --git a/src/v2/src/components/typography/index.ts b/src/v2/src/components/typography/index.ts new file mode 100644 index 0000000000..1a15d63cea --- /dev/null +++ b/src/v2/src/components/typography/index.ts @@ -0,0 +1 @@ +export { default as H1 } from './h1' diff --git a/src/v2/src/index.ts b/src/v2/src/index.ts new file mode 100644 index 0000000000..cb64ac1b52 --- /dev/null +++ b/src/v2/src/index.ts @@ -0,0 +1 @@ +export * from './components' diff --git a/src/v2/src/styles/index.ts b/src/v2/src/styles/index.ts new file mode 100644 index 0000000000..3f2156e57f --- /dev/null +++ b/src/v2/src/styles/index.ts @@ -0,0 +1,61 @@ +export interface Theme { + h1: { + color: string + } +} + +// Typography +export const TYPOGRAPHY_TITLE_FONT_COLOR = 'black' +export const TYPOGRAPHY_TITLE_FONT_WEIGHT = 600 +export const TYPOGRAPHY_TITLE_MARGIN_TOP = '1.2rem' +export const TYPOGRAPHY_TITLE_MARGIN_BOTTOM = '0.5rem' + +// Colors +export const WHITE = '#fff' +export const BLACK = '#12263f' +export const GREY_DARK = '#556986' +export const GREY = '#95aac9' +export const GREY_LIGHTER = '#eef3f9' +export const GREY_LIGHTEST = '#f9fbfd' + +export const GREEN_LIGHTER = '#acf2bd' +export const GREEN_LIGHTEST = '#e6ffed' +export const RED_LIGHTER = '#fdb8c0' +export const RED_LIGHTEST = '#ffeef0' + +export const REAPIT_DARK_BLUE = '#262f69' +export const REAPIT_DARK_BLUE_DARKENED = '#1e2554' +export const REAPIT_MID_BLUE = '#0061a8' +export const REAPIT_LIGHT_BLUE = '#23a4de' +export const REAPIT_LIGHTEST_BLUE = '#7bc9eb' +export const REAPIT_LIGHTEST_BLUE_LIGHTENED = '#d4edf8' + +export const REAPIT_ORANGE = '#ec631b' +export const REAPIT_LIME = '#cddb00' +export const REAPIT_TEAL = '#006580' +export const REAPIT_PLUMB = '#7a2c81' +export const REAPIT_PURPLE = '#a4185c' +export const REAPIT_GOLD = '#ffb71b' +export const REAPIT_GREEN = '#a0c862' +export const REAPIT_RED = '#d3033d' + +// Font +export const FAMILY_SANS_SERIF = 'Roboto, Helvetica, Arial, sans-serif' +export const FONT_SIZE = '14px' +// Layout +export const LAYOUT_BASE = '1rem' +// Generic layout values that scale to rem base +export const LAYOUT_QUARTER = 'calc(1rem / 4)' +export const LAYOUT_THIRD = 'calc(1rem / 3)' +export const LAYOUT_HALF = 'calc(1rem / 2)' +export const LAYOUT_TWO_THIRD = 'calc(1rem * 0.67)' +export const LAYOUT_THREE_QUARTER = 'calc(1rem * 0.75)' +export const LAYOUT_ONE_QUARTER = 'calc(1rem * 1.25)' +export const LAYOUT_ONE_HALF = 'calc(1rem * 1.5)' +export const LAYOUT_DOUBLE = 'calc(1rem * 2)' +export const LAYOUT_TWO_HALF = 'calc(1rem * 2.5)' +export const LAYOUT_TRIPLE = 'calc(1rem * 3)' +export const LAYOUT_QUADRUPLE = 'calc(1rem * 4)' +export const LAYOUT_SEXTUPLE = 'calc(1rem * 6)' +export const MENU_WIDTH = '18rem' +export const PAGE_CONTAINER = 'calc(100vw - 18rem)' diff --git a/tslint.json b/tslint.json index 40630515b3..5371629287 100644 --- a/tslint.json +++ b/tslint.json @@ -11,8 +11,7 @@ ], "no-floating-promises": false, "deprecation": false, - "class-name": false, - "no-unused-variable": [ true, "check-parameters" ] + "class-name": false }, "jsRules": { "prettier": [ diff --git a/yarn.lock b/yarn.lock index 95141c8303..2e644ba40e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -79,6 +79,16 @@ lodash "^4.17.13" source-map "^0.5.0" +"@babel/generator@^7.7.4": + version "7.7.7" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.7.7.tgz#859ac733c44c74148e1a72980a64ec84b85f4f45" + integrity sha512-/AOIBpHh/JU1l0ZFS4kiRCBnLi6OTHzh0RPk3h9isBxkkqELtQNFi1Vr/tiG9p1yfoUdKVwISuXWQR+hwwM4VQ== + dependencies: + "@babel/types" "^7.7.4" + jsesc "^2.5.1" + lodash "^4.17.13" + source-map "^0.5.0" + "@babel/helper-annotate-as-pure@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32" @@ -157,6 +167,15 @@ "@babel/template" "^7.1.0" "@babel/types" "^7.0.0" +"@babel/helper-function-name@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.7.4.tgz#ab6e041e7135d436d8f0a3eca15de5b67a341a2e" + integrity sha512-AnkGIdiBhEuiwdoMnKm7jfPfqItZhgRaZfMg1XX3bS25INOnLPjPG1Ppnajh8eqgt5kPJnfqrRHqFqmjKDZLzQ== + dependencies: + "@babel/helper-get-function-arity" "^7.7.4" + "@babel/template" "^7.7.4" + "@babel/types" "^7.7.4" + "@babel/helper-get-function-arity@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0.tgz#83572d4320e2a4657263734113c42868b64e49c3" @@ -164,6 +183,13 @@ dependencies: "@babel/types" "^7.0.0" +"@babel/helper-get-function-arity@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.7.4.tgz#cb46348d2f8808e632f0ab048172130e636005f0" + integrity sha512-QTGKEdCkjgzgfJ3bAyRwF4yyT3pg+vDgan8DSivq1eS0gwi+KGKE5x8kRcbeFTb/673mkO5SN1IZfmCfA5o+EA== + dependencies: + "@babel/types" "^7.7.4" + "@babel/helper-hoist-variables@^7.4.4": version "7.4.4" resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.4.4.tgz#0298b5f25c8c09c53102d52ac4a98f773eb2850a" @@ -252,6 +278,13 @@ dependencies: "@babel/types" "^7.4.4" +"@babel/helper-split-export-declaration@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.7.4.tgz#57292af60443c4a3622cf74040ddc28e68336fd8" + integrity sha512-guAg1SXFcVr04Guk9eq0S4/rWS++sbmyqosJzVs8+1fH5NI+ZcmkaSkc7dmtAFbHFva6yRJnjW3yAcGxjueDug== + dependencies: + "@babel/types" "^7.7.4" + "@babel/helper-wrap-function@^7.1.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.2.0.tgz#c4e0012445769e2815b55296ead43a958549f6fa" @@ -290,6 +323,11 @@ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.3.tgz#5fad457c2529de476a248f75b0f090b3060af043" integrity sha512-bqv+iCo9i+uLVbI0ILzKkvMorqxouI+GbV13ivcARXn9NNEabi2IEz912IgNpT/60BNXac5dgcfjb94NjsF33A== +"@babel/parser@^7.7.4": + version "7.7.7" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.7.tgz#1b886595419cf92d811316d5b715a53ff38b4937" + integrity sha512-WtTZMZAZLbeymhkd/sEaPD8IQyGAhmuTuvTzLiCFM7iXiVdY0gc0IaI+cW0fh1BnSMbJSzXX6/fHllgHKwHhXw== + "@babel/plugin-proposal-async-generator-functions@^7.2.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.2.0.tgz#b289b306669dce4ad20b0252889a15768c9d417e" @@ -957,6 +995,30 @@ "@babel/parser" "^7.6.0" "@babel/types" "^7.6.0" +"@babel/template@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.7.4.tgz#428a7d9eecffe27deac0a98e23bf8e3675d2a77b" + integrity sha512-qUzihgVPguAzXCK7WXw8pqs6cEwi54s3E+HrejlkuWO6ivMKx9hZl3Y2fSXp9i5HgyWmj7RKP+ulaYnKM4yYxw== + dependencies: + "@babel/code-frame" "^7.0.0" + "@babel/parser" "^7.7.4" + "@babel/types" "^7.7.4" + +"@babel/traverse@^7.0.0": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.7.4.tgz#9c1e7c60fb679fe4fcfaa42500833333c2058558" + integrity sha512-P1L58hQyupn8+ezVA2z5KBm4/Zr4lCC8dwKCMYzsa5jFMDMQAzaBNy9W5VjB+KAmBjb40U7a/H6ao+Xo+9saIw== + dependencies: + "@babel/code-frame" "^7.5.5" + "@babel/generator" "^7.7.4" + "@babel/helper-function-name" "^7.7.4" + "@babel/helper-split-export-declaration" "^7.7.4" + "@babel/parser" "^7.7.4" + "@babel/types" "^7.7.4" + debug "^4.1.0" + globals "^11.1.0" + lodash "^4.17.13" + "@babel/traverse@^7.1.0", "@babel/traverse@^7.4.3", "@babel/traverse@^7.4.4", "@babel/traverse@^7.5.5", "@babel/traverse@^7.6.0", "@babel/traverse@^7.6.2", "@babel/traverse@^7.6.3": version "7.6.3" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.6.3.tgz#66d7dba146b086703c0fb10dd588b7364cec47f9" @@ -990,6 +1052,15 @@ lodash "^4.17.13" to-fast-properties "^2.0.0" +"@babel/types@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.7.4.tgz#516570d539e44ddf308c07569c258ff94fde9193" + integrity sha512-cz5Ji23KCi4T+YIE/BolWosrJuSmoZeN1EFnRtBwF+KKLi8GG/Z2c2hOJJeCXPk4mwk4QFvTmwIodJowXgttRA== + dependencies: + esutils "^2.0.2" + lodash "^4.17.13" + to-fast-properties "^2.0.0" + "@base2/pretty-print-object@^1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.0.tgz#860ce718b0b73f4009e153541faff2cb6b85d047" @@ -1046,11 +1117,23 @@ dependencies: "@emotion/memoize" "0.7.3" +"@emotion/is-prop-valid@^0.8.1": + version "0.8.6" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.6.tgz#4757646f0a58e9dec614c47c838e7147d88c263c" + integrity sha512-mnZMho3Sq8BfzkYYRVc8ilQTnc8U02Ytp6J1AwM6taQStZ3AhsEJBX2LzhA/LJirNCwM2VtHL3VFIZ+sNJUgUQ== + dependencies: + "@emotion/memoize" "0.7.4" + "@emotion/memoize@0.7.3": version "0.7.3" resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.3.tgz#5b6b1c11d6a6dddf1f2fc996f74cf3b219644d78" integrity sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow== +"@emotion/memoize@0.7.4": + version "0.7.4" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb" + integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw== + "@emotion/serialize@^0.11.10", "@emotion/serialize@^0.11.11", "@emotion/serialize@^0.11.8": version "0.11.11" resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.11.tgz#c92a5e5b358070a7242d10508143306524e842a4" @@ -1095,6 +1178,11 @@ resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.4.tgz#a87b4b04e5ae14a88d48ebef15015f6b7d1f5677" integrity sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ== +"@emotion/unitless@^0.7.0": + version "0.7.5" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" + integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== + "@emotion/utils@0.11.2": version "0.11.2" resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.2.tgz#713056bfdffb396b0a14f1c8f18e7b4d0d200183" @@ -3182,6 +3270,16 @@ babel-plugin-react-docgen@^3.0.0: react-docgen "^4.1.0" recast "^0.14.7" +"babel-plugin-styled-components@>= 1": + version "1.10.6" + resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.6.tgz#f8782953751115faf09a9f92431436912c34006b" + integrity sha512-gyQj/Zf1kQti66100PhrCRjI5ldjaze9O0M3emXRPAN80Zsf8+e1thpTpaXJXVHXtaM4/+dJEgZHyS9Its+8SA== + dependencies: + "@babel/helper-annotate-as-pure" "^7.0.0" + "@babel/helper-module-imports" "^7.0.0" + babel-plugin-syntax-jsx "^6.18.0" + lodash "^4.17.11" + babel-plugin-syntax-jsx@^6.18.0: version "6.18.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" @@ -4520,7 +4618,7 @@ css-select@^2.0.0: domutils "^1.7.0" nth-check "^1.0.2" -css-to-react-native@^2.0.3: +css-to-react-native@^2.0.3, css-to-react-native@^2.2.2: version "2.3.2" resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.3.2.tgz#e75e2f8f7aa385b4c3611c52b074b70a002f2e7d" integrity sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw== @@ -7328,6 +7426,11 @@ is-utf8@^0.2.0: resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72" integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI= +is-what@^3.3.1: + version "3.5.0" + resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.5.0.tgz#c50b0e8f3021e0b39410c159bea43a5510d99027" + integrity sha512-00pwt/Jf7IaRh5m2Dp93Iw8LG2cd3OpDj3NrD1XPNUpAWVxPvBP296p4IiGmIU4Ur0f3f56IoIM+fS2pFYF+tQ== + is-whitespace-character@^1.0.0: version "1.0.3" resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.3.tgz#b3ad9546d916d7d3ffa78204bca0c26b56257fac" @@ -8791,6 +8894,11 @@ mem@^4.0.0: mimic-fn "^2.0.0" p-is-promise "^2.0.0" +memoize-one@^5.0.0: + version "5.1.1" + resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0" + integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA== + memoizerific@^1.11.3: version "1.11.3" resolved "https://registry.yarnpkg.com/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a" @@ -8835,6 +8943,13 @@ meow@^3.7.0: redent "^1.0.0" trim-newlines "^1.0.0" +merge-anything@^2.2.4: + version "2.4.4" + resolved "https://registry.yarnpkg.com/merge-anything/-/merge-anything-2.4.4.tgz#6226b2ac3d3d3fc5fb9e8d23aa400df25f98fdf0" + integrity sha512-l5XlriUDJKQT12bH+rVhAHjwIuXWdAIecGwsYjv2LJo+dA1AeRTmeQS+3QBpO6lEthBMDi2IUMpLC1yyRvGlwQ== + dependencies: + is-what "^3.3.1" + merge-deep@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/merge-deep/-/merge-deep-3.0.2.tgz#f39fa100a4f1bd34ff29f7d2bf4508fbb8d83ad2" @@ -12701,7 +12816,31 @@ styled-components@^2.4.0: stylis "^3.4.0" supports-color "^3.2.3" -stylis@^3.4.0: +styled-components@^4.4.1: + version "4.4.1" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.4.1.tgz#e0631e889f01db67df4de576fedaca463f05c2f2" + integrity sha512-RNqj14kYzw++6Sr38n7197xG33ipEOktGElty4I70IKzQF1jzaD1U4xQ+Ny/i03UUhHlC5NWEO+d8olRCDji6g== + dependencies: + "@babel/helper-module-imports" "^7.0.0" + "@babel/traverse" "^7.0.0" + "@emotion/is-prop-valid" "^0.8.1" + "@emotion/unitless" "^0.7.0" + babel-plugin-styled-components ">= 1" + css-to-react-native "^2.2.2" + memoize-one "^5.0.0" + merge-anything "^2.2.4" + prop-types "^15.5.4" + react-is "^16.6.0" + stylis "^3.5.0" + stylis-rule-sheet "^0.0.10" + supports-color "^5.5.0" + +stylis-rule-sheet@^0.0.10: + version "0.0.10" + resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430" + integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw== + +stylis@^3.4.0, stylis@^3.5.0: version "3.5.4" resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe" integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q== @@ -12725,7 +12864,7 @@ supports-color@^3.2.3: dependencies: has-flag "^1.0.0" -supports-color@^5.3.0: +supports-color@^5.3.0, supports-color@^5.5.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow== From 61cdf87d6c30a65e5afc76fcfd28c4a9c99c730c Mon Sep 17 00:00:00 2001 From: Khac Vy Date: Fri, 3 Jan 2020 15:01:19 +0700 Subject: [PATCH 2/3] Update HelpGuide (#210) --- package.json | 2 +- .../__tests__/__snapshots__/index.tsx.snap | 7 -- .../HelpGuide/help-guide.stories.tsx | 83 ++++++++++--------- src/components/HelpGuide/index.tsx | 2 +- src/styles/components/help-guide.scss | 7 +- 5 files changed, 51 insertions(+), 50 deletions(-) diff --git a/package.json b/package.json index 672bb3ead9..83cdaa6cf4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@reapit/elements", - "version": "0.5.24", + "version": "0.5.25", "description": "A collection of React components and utilities for building apps for Reapit Marketplace", "main": "dist/index.js", "umd:main": "dist/elements.umd.production.js", diff --git a/src/components/HelpGuide/__tests__/__snapshots__/index.tsx.snap b/src/components/HelpGuide/__tests__/__snapshots__/index.tsx.snap index 3823c0f9f0..24b18a2556 100644 --- a/src/components/HelpGuide/__tests__/__snapshots__/index.tsx.snap +++ b/src/components/HelpGuide/__tests__/__snapshots__/index.tsx.snap @@ -15,13 +15,6 @@ exports[`HelpGuide HelpGuide.Step should match a snapshot 1`] = ` -
-
-
`; diff --git a/src/components/HelpGuide/help-guide.stories.tsx b/src/components/HelpGuide/help-guide.stories.tsx index 260a5758a3..5b94f8f659 100644 --- a/src/components/HelpGuide/help-guide.stories.tsx +++ b/src/components/HelpGuide/help-guide.stories.tsx @@ -3,6 +3,7 @@ import { storiesOf } from '@storybook/react' import { HelpGuide } from '.' import { useHelpGuideContext } from './context' import { Button } from '../Button' +import { FlexContainerBasic, Content, FlexContainerResponsive } from '../Layout' const imageUrl = 'https://1001freedownloads.s3.amazonaws.com/vector/thumb/63319/Placeholder.png' @@ -66,44 +67,48 @@ const ComponentC = () => { storiesOf('HelpGuide', module).add('Primary', () => { return ( -
- - } - /> - } - /> - } - /> - } - /> - } - /> - -
+ + + + + } + /> + } + /> + } + /> + } + /> + } + /> + + + + ) }) diff --git a/src/components/HelpGuide/index.tsx b/src/components/HelpGuide/index.tsx index 0b9348694e..cecd9d1ad1 100644 --- a/src/components/HelpGuide/index.tsx +++ b/src/components/HelpGuide/index.tsx @@ -135,7 +135,7 @@ HelpGuide.Step = function({ component: Component, heading, subHeading, graphic }
- {!isMobile() && ( + {!isMobile() && graphic && (
{graphic}
diff --git a/src/styles/components/help-guide.scss b/src/styles/components/help-guide.scss index fbc2a569df..556f5f1876 100644 --- a/src/styles/components/help-guide.scss +++ b/src/styles/components/help-guide.scss @@ -2,13 +2,12 @@ .helpguide-wrapper { opacity: 0; - transition: all 0.3s; + transition: all 0.3s ease-in-out; position: absolute; width: 100%; top: 0; transform: translate(100%, 0); @media (min-width: 768px) { - top: unset; transform: translate(0, 100%); } } @@ -33,6 +32,10 @@ .helpguide-graphic { max-width: 400px; margin: auto; + > img { + max-width: 100%; + height: auto; + } } .numbers-timeline { From b9297f40f6f5e8af9c0780b9bfe37ec39cb34940 Mon Sep 17 00:00:00 2001 From: Duong Pham Date: Fri, 3 Jan 2020 16:31:54 +0700 Subject: [PATCH 3/3] chore: bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2da2760217..dc4cca7ae4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@reapit/elements", - "version": "0.5.24", + "version": "0.5.25", "description": "A collection of React components and utilities for building apps for Reapit Marketplace", "main": "dist/index.js", "umd:main": "dist/elements.umd.production.js",