From eabe01d378b7134b6a4b6f657e21cf690ebd1a5a Mon Sep 17 00:00:00 2001 From: jigsawye Date: Tue, 4 Feb 2020 16:43:27 +0800 Subject: [PATCH] refactor: use styled-system v5 --- docs/UIProvider.md | 165 +++++++++------ docs/layout/Responsive.md | 8 +- package.json | 10 +- packages/tailor-ui-theme/src/theme.ts | 32 +-- packages/tailor-ui/package.json | 2 +- packages/tailor-ui/src/Divider/Divider.tsx | 12 +- .../__snapshots__/Drawer.spec.tsx.snap | 34 +-- packages/tailor-ui/src/Dropdown/styles.ts | 4 +- packages/tailor-ui/src/Icon/Icon.tsx | 4 +- packages/tailor-ui/src/Layout/Box.ts | 83 ++------ packages/tailor-ui/src/Layout/Flex.ts | 21 +- packages/tailor-ui/src/Layout/Grid.ts | 56 +---- .../__snapshots__/Menu.spec.tsx.snap | 8 +- .../__snapshots__/Modal.spec.tsx.snap | 168 +++++++-------- .../__snapshots__/useModal.spec.tsx.snap | 120 +++++------ .../__snapshots__/Select.spec.tsx.snap | 16 +- .../__snapshots__/Steps.spec.tsx.snap | 16 +- packages/tailor-ui/src/Table/styles.ts | 4 +- packages/tailor-ui/src/Tabs/Tabs.tsx | 10 +- packages/tailor-ui/src/Typography/Text.ts | 32 +-- .../__snapshots__/Text.spec.tsx.snap | 2 +- src/context/LocaleContext.js | 5 + src/theme/CodeBlock/index.js | 5 +- src/theme/Layout/index.js | 15 +- yarn.lock | 199 +++++++++++++----- 25 files changed, 502 insertions(+), 529 deletions(-) create mode 100644 src/context/LocaleContext.js diff --git a/docs/UIProvider.md b/docs/UIProvider.md index 6d954330..cdd9f15c 100644 --- a/docs/UIProvider.md +++ b/docs/UIProvider.md @@ -21,86 +21,121 @@ ReactDOM.render( ); ``` -## Examples +## I18n Examples ```jsx live () => { - const [value, setValue] = useState('en_US'); + const { locale, setLocale } = useLocaleContext(); const [visible, setVisible] = useState(false); const modal = useModal(); + const contents = { + en_US: { + modal: { + title: 'This is a Modal', + content: 'This is the content of Modal', + openButton: 'Open Modal', + }, + confirmModal: { + title: 'Do you Want to delete these items?', + content: 'Some descriptions', + }, + popconfirm: { + content: 'Are you sure to delete this todo?', + }, + upload: { + withSuccess: 'With Success: ', + withFail: 'With Fail: ', + }, + }, + zh_Hant: { + modal: { + title: '這是一個 Modal', + content: '這是 Modal 的內容', + openButton: '打開 Modal', + }, + confirmModal: { + title: '你確定要刪掉這些東西嗎？', + content: '一些內容', + }, + popconfirm: { + content: '你確定要刪掉這個待辦事項嗎？', + }, + upload: { + withSuccess: '成功：', + withFail: '失敗：', + }, + }, + }[locale]; + return ( <> - + English 正體中文 - - <> - - setVisible(false)} - onCancel={() => setVisible(false)} - > -
This is the content of Modal
- - + + setVisible(false)} + onCancel={() => setVisible(false)} + > +
{contents.modal.content}
+ + - + - - console.log('confirm')} - onCancel={() => console.log('cancel')} - > - - - - - - {}} /> - - - - With Success: - - new Promise(resolve => setTimeout(resolve, 2000)) - } - /> - - - - - With Failed: - - new Promise((resolve, reject) => setTimeout(reject, 2000)) - } - /> - - - - + + console.log('confirm')} + onCancel={() => console.log('cancel')} + > + + + + + + {}} /> + + + + {contents.upload.withSuccess} + + new Promise(resolve => setTimeout(resolve, 2000)) + } + /> + + + + + {contents.upload.withFail} + + new Promise((resolve, reject) => setTimeout(reject, 2000)) + } + /> + + ); diff --git a/docs/layout/Responsive.md b/docs/layout/Responsive.md index 99239e13..f91ab239 100644 --- a/docs/layout/Responsive.md +++ b/docs/layout/Responsive.md @@ -51,11 +51,5 @@ const breakpoints = [ '75rem', // 122px ] -// aliases -breakpoints.sm = breakpoints[0] -breakpoints.md = breakpoints[1] -breakpoints.lg = breakpoints[2] -breakpoints.xl = breakpoints[3] - - + ``` diff --git a/package.json b/package.json index c2251b23..ba97d5a4 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,7 @@ "@docusaurus/preset-classic": "^2.0.0-alpha.40", "@docusaurus/theme-live-codeblock": "^2.0.0-alpha.39", "@react-spring/mock-raf": "^1.1.1", - "@testing-library/jest-dom": "^5.1.0", + "@testing-library/jest-dom": "^5.1.1", "@testing-library/react": "^9.4.0", "@types/fuzzaldrin-plus": "^0.6.0", "@types/jest": "^25.1.1", @@ -65,10 +65,10 @@ "@types/react": "16.9.19", "@types/react-dom": "^16.9.5", "@types/styled-components": "4.4.2", - "@types/styled-system": "^4.2.2", + "@types/styled-system": "^5.1.6", "@types/yup": "^0.26.29", - "@typescript-eslint/eslint-plugin": "^2.18.0", - "@typescript-eslint/parser": "^2.18.0", + "@typescript-eslint/eslint-plugin": "^2.19.0", + "@typescript-eslint/parser": "^2.19.0", "babel-core": "^7.0.0-0", "babel-eslint": "^10.0.3", "babel-jest": "^25.1.0", @@ -79,7 +79,7 @@ "classnames": "^2.2.6", "cross-env": "^7.0.0", "eslint": "^6.8.0", - "eslint-config-yoctol": "^0.23.3", + "eslint-config-yoctol": "^0.24.0", "eslint-import-resolver-alias": "^1.1.2", "eslint-import-resolver-jest": "^3.0.0", "eslint-plugin-import": "2.20.1", diff --git a/packages/tailor-ui-theme/src/theme.ts b/packages/tailor-ui-theme/src/theme.ts index 7fd3fa7f..604eab29 100644 --- a/packages/tailor-ui-theme/src/theme.ts +++ b/packages/tailor-ui-theme/src/theme.ts @@ -57,34 +57,14 @@ export interface BreakpointsType { * 1200px */ 3: string; - /** - * 576px - */ - sm: string; - /** - * 768px - */ - md: string; - /** - * 992px - */ - lg: string; - /** - * 1200px - */ - xl: string; } -const breakpoints: BreakpointsType = { - 0: toRem(576), - 1: toRem(768), - 2: toRem(992), - 3: toRem(1200), - sm: toRem(576), - md: toRem(768), - lg: toRem(992), - xl: toRem(1200), -}; +const breakpoints: BreakpointsType = [ + toRem(576), + toRem(768), + toRem(992), + toRem(1200), +]; export interface SpaceType { /** diff --git a/packages/tailor-ui/package.json b/packages/tailor-ui/package.json index bbb2cfd2..535c68eb 100644 --- a/packages/tailor-ui/package.json +++ b/packages/tailor-ui/package.json @@ -46,7 +46,7 @@ "react-intl-tel-input": "^7.1.0", "react-tiny-virtual-list": "^2.2.0", "styled-normalize": "^8.0.7", - "styled-system": "^4.2.4" + "styled-system": "^5.1.4" }, "peerDependencies": { "react": ">=16.10.0", diff --git a/packages/tailor-ui/src/Divider/Divider.tsx b/packages/tailor-ui/src/Divider/Divider.tsx index 0b615e90..bc83bb4a 100644 --- a/packages/tailor-ui/src/Divider/Divider.tsx +++ b/packages/tailor-ui/src/Divider/Divider.tsx @@ -2,19 +2,16 @@ import React, { FC } from 'react'; import styled, { css } from 'styled-components'; import { ColorProps, - FontSizeProps, - FontWeightProps, SpaceProps, + TypographyProps, color, - fontSize, - fontWeight, space, + typography, } from 'styled-system'; type IStyledDividerProps = SpaceProps & ColorProps & - FontSizeProps & - FontWeightProps & { + TypographyProps & { type: 'horizontal' | 'vertical'; orientation?: 'left' | 'right'; dashed?: boolean; @@ -108,8 +105,7 @@ const StyledDivider = styled.div` ${space}; ${color}; - ${fontSize}; - ${fontWeight}; + ${typography}; `; StyledDivider.defaultProps = { diff --git a/packages/tailor-ui/src/Drawer/__tests__/__snapshots__/Drawer.spec.tsx.snap b/packages/tailor-ui/src/Drawer/__tests__/__snapshots__/Drawer.spec.tsx.snap index 5708f500..d506aa4c 100644 --- a/packages/tailor-ui/src/Drawer/__tests__/__snapshots__/Drawer.spec.tsx.snap +++ b/packages/tailor-ui/src/Drawer/__tests__/__snapshots__/Drawer.spec.tsx.snap @@ -7,7 +7,6 @@ exports[`Drawer should render correctly 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - padding: 2rem; -webkit-flex: none; -ms-flex: none; flex: none; @@ -15,6 +14,7 @@ exports[`Drawer should render correctly 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + padding: 2rem; } .c3 { @@ -34,15 +34,15 @@ exports[`Drawer should render correctly 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - overflow-y: auto; - padding-left: 2rem; - padding-right: 2rem; -webkit-flex: auto; -ms-flex: auto; flex: auto; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; + overflow-y: auto; + padding-left: 2rem; + padding-right: 2rem; } .c8 { @@ -308,7 +308,6 @@ exports[`Drawer should render correctly with props closable 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - padding: 2rem; -webkit-flex: none; -ms-flex: none; flex: none; @@ -316,6 +315,7 @@ exports[`Drawer should render correctly with props closable 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + padding: 2rem; } .c2 { @@ -335,15 +335,15 @@ exports[`Drawer should render correctly with props closable 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - overflow-y: auto; - padding-left: 2rem; - padding-right: 2rem; -webkit-flex: auto; -ms-flex: auto; flex: auto; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; + overflow-y: auto; + padding-left: 2rem; + padding-right: 2rem; } .c3 { @@ -436,7 +436,6 @@ exports[`Drawer should render custom footer correctly 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - padding: 2rem; -webkit-flex: none; -ms-flex: none; flex: none; @@ -444,6 +443,7 @@ exports[`Drawer should render custom footer correctly 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + padding: 2rem; } .c2 { @@ -463,15 +463,15 @@ exports[`Drawer should render custom footer correctly 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - overflow-y: auto; - padding-left: 2rem; - padding-right: 2rem; -webkit-flex: auto; -ms-flex: auto; flex: auto; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; + overflow-y: auto; + padding-left: 2rem; + padding-right: 2rem; } .c5 { @@ -480,15 +480,15 @@ exports[`Drawer should render custom footer correctly 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - padding-top: 1rem; - padding-bottom: 1rem; - padding-left: 2rem; - padding-right: 2rem; - background-color: #e8ecf5; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; + background-color: #e8ecf5; + padding-left: 2rem; + padding-right: 2rem; + padding-top: 1rem; + padding-bottom: 1rem; } .c3 { diff --git a/packages/tailor-ui/src/Dropdown/styles.ts b/packages/tailor-ui/src/Dropdown/styles.ts index a214e25c..8ac232f3 100644 --- a/packages/tailor-ui/src/Dropdown/styles.ts +++ b/packages/tailor-ui/src/Dropdown/styles.ts @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import { color } from 'styled-system'; +import { ColorProps, color } from 'styled-system'; export const List = styled.div` max-height: 240px; @@ -9,7 +9,7 @@ export const List = styled.div` border-radius: ${p => p.theme.radii.lg}; `; -export const Item = styled.li<{ disabled: boolean }>` +export const Item = styled.li<{ disabled: boolean } & ColorProps>` display: flex; align-items: center; height: ${p => p.theme.heights.base}; diff --git a/packages/tailor-ui/src/Icon/Icon.tsx b/packages/tailor-ui/src/Icon/Icon.tsx index 7c0b81b2..3fdc9f71 100644 --- a/packages/tailor-ui/src/Icon/Icon.tsx +++ b/packages/tailor-ui/src/Icon/Icon.tsx @@ -1,7 +1,7 @@ import React, { FC, HTMLAttributes, forwardRef } from 'react'; import styled, { css } from 'styled-components'; import { IconType as ReactIconsIconType } from 'react-icons/lib/esm'; -import { SpaceProps, style, space as styledSpace } from 'styled-system'; +import { SpaceProps, space, style } from 'styled-system'; import { BuiltInIconKeys, icons } from './icons'; @@ -43,7 +43,7 @@ export const IconWrapper = styled.i` ${styledSize}; } - ${styledSpace}; + ${space}; `; export type IconType = BuiltInIconKeys | ReactIconsIconType; diff --git a/packages/tailor-ui/src/Layout/Box.ts b/packages/tailor-ui/src/Layout/Box.ts index 243be44e..2b6b9360 100644 --- a/packages/tailor-ui/src/Layout/Box.ts +++ b/packages/tailor-ui/src/Layout/Box.ts @@ -1,85 +1,28 @@ import styled from 'styled-components'; import * as system from 'styled-system'; -const overflowX = system.style({ - prop: 'overflowX', - cssProperty: 'overflow-x', -}); - -const overflowY = system.style({ - prop: 'overflowY', - cssProperty: 'overflow-y', -}); - -export type BoxProps = system.PositionProps & - system.TopProps & - system.RightProps & - system.BottomProps & - system.LeftProps & - system.OverflowProps & - system.GridAreaProps & - system.ZIndexProps & - system.DisplayProps & +export type BoxProps = system.GridAreaProps & + system.PositionProps & system.SpaceProps & - system.LineHeightProps & system.BackgroundProps & - system.FontSizeProps & - system.TextAlignProps & + system.TypographyProps & system.ColorProps & - system.BordersProps & - system.BorderColorProps & - system.BorderRadiusProps & - system.BoxShadowProps & - system.WidthProps & - system.MinWidthProps & - system.MaxWidthProps & - system.HeightProps & - system.MinHeightProps & - system.MaxHeightProps & - system.FlexProps & - system.OrderProps & - system.AlignSelfProps & { - overflowX?: string; - overflowY?: string; - }; + system.BorderProps & + system.ShadowProps & + system.LayoutProps & + system.FlexboxProps; export const box = system.compose( - system.position, - system.top, - system.right, - system.bottom, - system.left, - system.overflow, - overflowX as any, - overflowY as any, - system.gridArea, - - system.zIndex, - system.display, + system.position, system.space, - system.lineHeight, system.background, - system.fontSize, - system.textAlign, + system.typography, system.color, - - system.borders, - system.borderColor, - system.borderRadius, - system.boxShadow, - - system.width, - system.minWidth, - system.maxWidth, - - system.height, - system.minHeight, - system.maxHeight, - - system.flex, - system.order, - system.alignSelf + system.border, + system.shadow, + system.layout, + system.flexbox ); const Box = styled('div')( diff --git a/packages/tailor-ui/src/Layout/Flex.ts b/packages/tailor-ui/src/Layout/Flex.ts index 9dde1415..32a79eb7 100644 --- a/packages/tailor-ui/src/Layout/Flex.ts +++ b/packages/tailor-ui/src/Layout/Flex.ts @@ -1,32 +1,15 @@ import styled from 'styled-components'; -import { - AlignItemsProps, - FlexDirectionProps, - FlexWrapProps, - JustifyContentProps, - alignItems, - compose, - flexDirection, - flexWrap, - justifyContent, -} from 'styled-system'; import { BoxProps, box } from './Box'; -export type FlexProps = BoxProps & - AlignItemsProps & - FlexDirectionProps & - FlexWrapProps & - JustifyContentProps; - -const flex = compose(box, alignItems, flexDirection, justifyContent, flexWrap); +export type FlexProps = BoxProps; const Flex = styled('div')( { display: 'flex', boxSizing: 'border-box', }, - flex + box ); export { Flex }; diff --git a/packages/tailor-ui/src/Layout/Grid.ts b/packages/tailor-ui/src/Layout/Grid.ts index 6ea880af..7c07dfd7 100644 --- a/packages/tailor-ui/src/Layout/Grid.ts +++ b/packages/tailor-ui/src/Layout/Grid.ts @@ -1,60 +1,12 @@ import styled from 'styled-components'; -import { - GridAutoColumnsProps, - GridAutoFlowProps, - GridAutoRowsProps, - GridColumnGapProps, - GridColumnProps, - GridGapProps, - GridRowGapProps, - GridRowProps, - GridTemplateColumnsProps, - GridTemplateRowsProps, - GridTemplatesAreasProps, - compose, - gridAutoColumns, - gridAutoFlow, - gridAutoRows, - gridColumn, - gridColumnGap, - gridGap, - gridRow, - gridRowGap, - gridTemplateAreas, - gridTemplateColumns, - gridTemplateRows, -} from 'styled-system'; +import { GridProps as BaseGridProps, compose, grid } from 'styled-system'; import { BoxProps, box } from './Box'; -export type GridProps = BoxProps & - GridGapProps & - GridColumnGapProps & - GridRowGapProps & - GridColumnProps & - GridRowProps & - GridAutoFlowProps & - GridAutoColumnsProps & - GridAutoRowsProps & - GridTemplateColumnsProps & - GridTemplateRowsProps & - GridTemplatesAreasProps; +export type GridProps = BoxProps & BaseGridProps; -const grid = compose( - gridGap, - gridColumnGap, - gridRowGap, - gridColumn, - gridRow, - gridAutoFlow, - gridAutoColumns, - gridAutoRows, - gridTemplateColumns, - gridTemplateRows, - gridTemplateAreas, - box -); +const gridProps = compose(grid, box); -const Grid = styled('div')({ display: 'grid' }, grid); +const Grid = styled('div')({ display: 'grid' }, gridProps); export { Grid }; diff --git a/packages/tailor-ui/src/Menu/__tests__/__snapshots__/Menu.spec.tsx.snap b/packages/tailor-ui/src/Menu/__tests__/__snapshots__/Menu.spec.tsx.snap index c77ed20d..a95c452f 100644 --- a/packages/tailor-ui/src/Menu/__tests__/__snapshots__/Menu.spec.tsx.snap +++ b/packages/tailor-ui/src/Menu/__tests__/__snapshots__/Menu.spec.tsx.snap @@ -7,10 +7,6 @@ exports[`Menu should render correctly 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - overflow-y: auto; - background-color: #001e40; - width: 240px; - height: 100%; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; @@ -18,6 +14,10 @@ exports[`Menu should render correctly 1`] = ` -webkit-justify-content: start; -ms-flex-pack: start; justify-content: start; + height: 100%; + overflow-y: auto; + background-color: #001e40; + width: 240px; } .c2 { diff --git a/packages/tailor-ui/src/Modal/__tests__/__snapshots__/Modal.spec.tsx.snap b/packages/tailor-ui/src/Modal/__tests__/__snapshots__/Modal.spec.tsx.snap index 7fe01185..7b8d35a2 100644 --- a/packages/tailor-ui/src/Modal/__tests__/__snapshots__/Modal.spec.tsx.snap +++ b/packages/tailor-ui/src/Modal/__tests__/__snapshots__/Modal.spec.tsx.snap @@ -12,9 +12,6 @@ exports[`Modal should render correctly 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - margin-bottom: 1rem; - margin-left: 1rem; - margin-right: 1rem; -webkit-flex: none; -ms-flex: none; flex: none; @@ -22,6 +19,9 @@ exports[`Modal should render correctly 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + margin-bottom: 1rem; + margin-left: 1rem; + margin-right: 1rem; } .c4 { @@ -41,15 +41,15 @@ exports[`Modal should render correctly 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - overflow-y: auto; - padding-left: 1rem; - padding-right: 1rem; -webkit-flex: auto; -ms-flex: auto; flex: auto; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; + overflow-y: auto; + padding-left: 1rem; + padding-right: 1rem; } .c7 { @@ -58,12 +58,6 @@ exports[`Modal should render correctly 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - margin-top: 24px; - margin-left: 1rem; - margin-right: 1rem; - padding-top: 1rem; - border-top: 1px solid; - border-color: #e0e0e0; -webkit-flex: none; -ms-flex: none; flex: none; @@ -71,6 +65,12 @@ exports[`Modal should render correctly 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + margin-top: 24px; + margin-left: 1rem; + margin-right: 1rem; + padding-top: 1rem; + border-top: 1px solid; + border-color: #e0e0e0; } .c8 { @@ -304,9 +304,6 @@ exports[`Modal should render correctly with lg size 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - margin-bottom: 1rem; - margin-left: 1rem; - margin-right: 1rem; -webkit-flex: none; -ms-flex: none; flex: none; @@ -314,6 +311,9 @@ exports[`Modal should render correctly with lg size 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + margin-bottom: 1rem; + margin-left: 1rem; + margin-right: 1rem; } .c3 { @@ -333,15 +333,15 @@ exports[`Modal should render correctly with lg size 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - overflow-y: auto; - padding-left: 1rem; - padding-right: 1rem; -webkit-flex: auto; -ms-flex: auto; flex: auto; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; + overflow-y: auto; + padding-left: 1rem; + padding-right: 1rem; } .c6 { @@ -350,12 +350,6 @@ exports[`Modal should render correctly with lg size 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - margin-top: 24px; - margin-left: 1rem; - margin-right: 1rem; - padding-top: 1rem; - border-top: 1px solid; - border-color: #e0e0e0; -webkit-flex: none; -ms-flex: none; flex: none; @@ -363,6 +357,12 @@ exports[`Modal should render correctly with lg size 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + margin-top: 24px; + margin-left: 1rem; + margin-right: 1rem; + padding-top: 1rem; + border-top: 1px solid; + border-color: #e0e0e0; } .c7 { @@ -574,9 +574,6 @@ exports[`Modal should render with error status 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - margin-bottom: 1rem; - margin-left: 1rem; - margin-right: 1rem; -webkit-flex: none; -ms-flex: none; flex: none; @@ -584,6 +581,9 @@ exports[`Modal should render with error status 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + margin-bottom: 1rem; + margin-left: 1rem; + margin-right: 1rem; } .c4 { @@ -612,15 +612,15 @@ exports[`Modal should render with error status 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - overflow-y: auto; - padding-left: 1rem; - padding-right: 1rem; -webkit-flex: auto; -ms-flex: auto; flex: auto; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; + overflow-y: auto; + padding-left: 1rem; + padding-right: 1rem; } .c13 { @@ -629,12 +629,6 @@ exports[`Modal should render with error status 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - margin-top: 24px; - margin-left: 1rem; - margin-right: 1rem; - padding-top: 1rem; - border-top: 1px solid; - border-color: #e0e0e0; -webkit-flex: none; -ms-flex: none; flex: none; @@ -642,6 +636,12 @@ exports[`Modal should render with error status 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + margin-top: 24px; + margin-left: 1rem; + margin-right: 1rem; + padding-top: 1rem; + border-top: 1px solid; + border-color: #e0e0e0; } .c14 { @@ -1149,9 +1149,6 @@ exports[`Modal should render with info status 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - margin-bottom: 1rem; - margin-left: 1rem; - margin-right: 1rem; -webkit-flex: none; -ms-flex: none; flex: none; @@ -1159,6 +1156,9 @@ exports[`Modal should render with info status 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + margin-bottom: 1rem; + margin-left: 1rem; + margin-right: 1rem; } .c4 { @@ -1187,15 +1187,15 @@ exports[`Modal should render with info status 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - overflow-y: auto; - padding-left: 1rem; - padding-right: 1rem; -webkit-flex: auto; -ms-flex: auto; flex: auto; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; + overflow-y: auto; + padding-left: 1rem; + padding-right: 1rem; } .c13 { @@ -1204,12 +1204,6 @@ exports[`Modal should render with info status 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - margin-top: 24px; - margin-left: 1rem; - margin-right: 1rem; - padding-top: 1rem; - border-top: 1px solid; - border-color: #e0e0e0; -webkit-flex: none; -ms-flex: none; flex: none; @@ -1217,6 +1211,12 @@ exports[`Modal should render with info status 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + margin-top: 24px; + margin-left: 1rem; + margin-right: 1rem; + padding-top: 1rem; + border-top: 1px solid; + border-color: #e0e0e0; } .c14 { @@ -1724,9 +1724,6 @@ exports[`Modal should render with props closable 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - margin-bottom: 1rem; - margin-left: 1rem; - margin-right: 1rem; -webkit-flex: none; -ms-flex: none; flex: none; @@ -1734,6 +1731,9 @@ exports[`Modal should render with props closable 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + margin-bottom: 1rem; + margin-left: 1rem; + margin-right: 1rem; } .c3 { @@ -1753,15 +1753,15 @@ exports[`Modal should render with props closable 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - overflow-y: auto; - padding-left: 1rem; - padding-right: 1rem; -webkit-flex: auto; -ms-flex: auto; flex: auto; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; + overflow-y: auto; + padding-left: 1rem; + padding-right: 1rem; } .c10 { @@ -1770,12 +1770,6 @@ exports[`Modal should render with props closable 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - margin-top: 24px; - margin-left: 1rem; - margin-right: 1rem; - padding-top: 1rem; - border-top: 1px solid; - border-color: #e0e0e0; -webkit-flex: none; -ms-flex: none; flex: none; @@ -1783,6 +1777,12 @@ exports[`Modal should render with props closable 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + margin-top: 24px; + margin-left: 1rem; + margin-right: 1rem; + padding-top: 1rem; + border-top: 1px solid; + border-color: #e0e0e0; } .c11 { @@ -2231,9 +2231,6 @@ exports[`Modal should render with success status 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - margin-bottom: 1rem; - margin-left: 1rem; - margin-right: 1rem; -webkit-flex: none; -ms-flex: none; flex: none; @@ -2241,6 +2238,9 @@ exports[`Modal should render with success status 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + margin-bottom: 1rem; + margin-left: 1rem; + margin-right: 1rem; } .c4 { @@ -2269,15 +2269,15 @@ exports[`Modal should render with success status 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - overflow-y: auto; - padding-left: 1rem; - padding-right: 1rem; -webkit-flex: auto; -ms-flex: auto; flex: auto; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; + overflow-y: auto; + padding-left: 1rem; + padding-right: 1rem; } .c13 { @@ -2286,12 +2286,6 @@ exports[`Modal should render with success status 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - margin-top: 24px; - margin-left: 1rem; - margin-right: 1rem; - padding-top: 1rem; - border-top: 1px solid; - border-color: #e0e0e0; -webkit-flex: none; -ms-flex: none; flex: none; @@ -2299,6 +2293,12 @@ exports[`Modal should render with success status 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + margin-top: 24px; + margin-left: 1rem; + margin-right: 1rem; + padding-top: 1rem; + border-top: 1px solid; + border-color: #e0e0e0; } .c14 { @@ -2806,9 +2806,6 @@ exports[`Modal should render with warning status 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - margin-bottom: 1rem; - margin-left: 1rem; - margin-right: 1rem; -webkit-flex: none; -ms-flex: none; flex: none; @@ -2816,6 +2813,9 @@ exports[`Modal should render with warning status 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + margin-bottom: 1rem; + margin-left: 1rem; + margin-right: 1rem; } .c4 { @@ -2844,15 +2844,15 @@ exports[`Modal should render with warning status 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - overflow-y: auto; - padding-left: 1rem; - padding-right: 1rem; -webkit-flex: auto; -ms-flex: auto; flex: auto; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; + overflow-y: auto; + padding-left: 1rem; + padding-right: 1rem; } .c13 { @@ -2861,12 +2861,6 @@ exports[`Modal should render with warning status 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - margin-top: 24px; - margin-left: 1rem; - margin-right: 1rem; - padding-top: 1rem; - border-top: 1px solid; - border-color: #e0e0e0; -webkit-flex: none; -ms-flex: none; flex: none; @@ -2874,6 +2868,12 @@ exports[`Modal should render with warning status 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + margin-top: 24px; + margin-left: 1rem; + margin-right: 1rem; + padding-top: 1rem; + border-top: 1px solid; + border-color: #e0e0e0; } .c14 { diff --git a/packages/tailor-ui/src/Modal/__tests__/__snapshots__/useModal.spec.tsx.snap b/packages/tailor-ui/src/Modal/__tests__/__snapshots__/useModal.spec.tsx.snap index 32160169..67d0a8d7 100644 --- a/packages/tailor-ui/src/Modal/__tests__/__snapshots__/useModal.spec.tsx.snap +++ b/packages/tailor-ui/src/Modal/__tests__/__snapshots__/useModal.spec.tsx.snap @@ -12,9 +12,6 @@ exports[`useModal should render confirm modal correctly 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - margin-bottom: 1rem; - margin-left: 1rem; - margin-right: 1rem; -webkit-flex: none; -ms-flex: none; flex: none; @@ -22,6 +19,9 @@ exports[`useModal should render confirm modal correctly 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + margin-bottom: 1rem; + margin-left: 1rem; + margin-right: 1rem; } .c4 { @@ -41,15 +41,15 @@ exports[`useModal should render confirm modal correctly 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - overflow-y: auto; - padding-left: 1rem; - padding-right: 1rem; -webkit-flex: auto; -ms-flex: auto; flex: auto; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; + overflow-y: auto; + padding-left: 1rem; + padding-right: 1rem; } .c11 { @@ -58,12 +58,6 @@ exports[`useModal should render confirm modal correctly 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - margin-top: 24px; - margin-left: 1rem; - margin-right: 1rem; - padding-top: 1rem; - border-top: 1px solid; - border-color: #e0e0e0; -webkit-flex: none; -ms-flex: none; flex: none; @@ -71,6 +65,12 @@ exports[`useModal should render confirm modal correctly 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + margin-top: 24px; + margin-left: 1rem; + margin-right: 1rem; + padding-top: 1rem; + border-top: 1px solid; + border-color: #e0e0e0; } .c12 { @@ -545,9 +545,6 @@ exports[`useModal should render error modal correctly 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - margin-bottom: 1rem; - margin-left: 1rem; - margin-right: 1rem; -webkit-flex: none; -ms-flex: none; flex: none; @@ -555,6 +552,9 @@ exports[`useModal should render error modal correctly 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + margin-bottom: 1rem; + margin-left: 1rem; + margin-right: 1rem; } .c4 { @@ -583,15 +583,15 @@ exports[`useModal should render error modal correctly 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - overflow-y: auto; - padding-left: 1rem; - padding-right: 1rem; -webkit-flex: auto; -ms-flex: auto; flex: auto; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; + overflow-y: auto; + padding-left: 1rem; + padding-right: 1rem; } .c10 { @@ -600,12 +600,6 @@ exports[`useModal should render error modal correctly 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - margin-top: 24px; - margin-left: 1rem; - margin-right: 1rem; - padding-top: 1rem; - border-top: 1px solid; - border-color: #e0e0e0; -webkit-flex: none; -ms-flex: none; flex: none; @@ -613,6 +607,12 @@ exports[`useModal should render error modal correctly 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + margin-top: 24px; + margin-left: 1rem; + margin-right: 1rem; + padding-top: 1rem; + border-top: 1px solid; + border-color: #e0e0e0; } .c11 { @@ -888,9 +888,6 @@ exports[`useModal should render info modal correctly 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - margin-bottom: 1rem; - margin-left: 1rem; - margin-right: 1rem; -webkit-flex: none; -ms-flex: none; flex: none; @@ -898,6 +895,9 @@ exports[`useModal should render info modal correctly 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + margin-bottom: 1rem; + margin-left: 1rem; + margin-right: 1rem; } .c4 { @@ -926,15 +926,15 @@ exports[`useModal should render info modal correctly 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - overflow-y: auto; - padding-left: 1rem; - padding-right: 1rem; -webkit-flex: auto; -ms-flex: auto; flex: auto; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; + overflow-y: auto; + padding-left: 1rem; + padding-right: 1rem; } .c10 { @@ -943,12 +943,6 @@ exports[`useModal should render info modal correctly 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - margin-top: 24px; - margin-left: 1rem; - margin-right: 1rem; - padding-top: 1rem; - border-top: 1px solid; - border-color: #e0e0e0; -webkit-flex: none; -ms-flex: none; flex: none; @@ -956,6 +950,12 @@ exports[`useModal should render info modal correctly 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + margin-top: 24px; + margin-left: 1rem; + margin-right: 1rem; + padding-top: 1rem; + border-top: 1px solid; + border-color: #e0e0e0; } .c11 { @@ -1231,9 +1231,6 @@ exports[`useModal should render success modal correctly 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - margin-bottom: 1rem; - margin-left: 1rem; - margin-right: 1rem; -webkit-flex: none; -ms-flex: none; flex: none; @@ -1241,6 +1238,9 @@ exports[`useModal should render success modal correctly 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + margin-bottom: 1rem; + margin-left: 1rem; + margin-right: 1rem; } .c4 { @@ -1269,15 +1269,15 @@ exports[`useModal should render success modal correctly 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - overflow-y: auto; - padding-left: 1rem; - padding-right: 1rem; -webkit-flex: auto; -ms-flex: auto; flex: auto; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; + overflow-y: auto; + padding-left: 1rem; + padding-right: 1rem; } .c10 { @@ -1286,12 +1286,6 @@ exports[`useModal should render success modal correctly 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - margin-top: 24px; - margin-left: 1rem; - margin-right: 1rem; - padding-top: 1rem; - border-top: 1px solid; - border-color: #e0e0e0; -webkit-flex: none; -ms-flex: none; flex: none; @@ -1299,6 +1293,12 @@ exports[`useModal should render success modal correctly 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + margin-top: 24px; + margin-left: 1rem; + margin-right: 1rem; + padding-top: 1rem; + border-top: 1px solid; + border-color: #e0e0e0; } .c11 { @@ -1574,9 +1574,6 @@ exports[`useModal should render warning modal correctly 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - margin-bottom: 1rem; - margin-left: 1rem; - margin-right: 1rem; -webkit-flex: none; -ms-flex: none; flex: none; @@ -1584,6 +1581,9 @@ exports[`useModal should render warning modal correctly 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + margin-bottom: 1rem; + margin-left: 1rem; + margin-right: 1rem; } .c4 { @@ -1612,15 +1612,15 @@ exports[`useModal should render warning modal correctly 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - overflow-y: auto; - padding-left: 1rem; - padding-right: 1rem; -webkit-flex: auto; -ms-flex: auto; flex: auto; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; + overflow-y: auto; + padding-left: 1rem; + padding-right: 1rem; } .c10 { @@ -1629,12 +1629,6 @@ exports[`useModal should render warning modal correctly 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - margin-top: 24px; - margin-left: 1rem; - margin-right: 1rem; - padding-top: 1rem; - border-top: 1px solid; - border-color: #e0e0e0; -webkit-flex: none; -ms-flex: none; flex: none; @@ -1642,6 +1636,12 @@ exports[`useModal should render warning modal correctly 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + margin-top: 24px; + margin-left: 1rem; + margin-right: 1rem; + padding-top: 1rem; + border-top: 1px solid; + border-color: #e0e0e0; } .c11 { diff --git a/packages/tailor-ui/src/Select/__tests__/__snapshots__/Select.spec.tsx.snap b/packages/tailor-ui/src/Select/__tests__/__snapshots__/Select.spec.tsx.snap index 4a95c3e9..795f2c59 100644 --- a/packages/tailor-ui/src/Select/__tests__/__snapshots__/Select.spec.tsx.snap +++ b/packages/tailor-ui/src/Select/__tests__/__snapshots__/Select.spec.tsx.snap @@ -11,17 +11,17 @@ exports[`Select multiple should display multi option 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - overflow: hidden; -webkit-flex: auto; -ms-flex: auto; flex: auto; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; + overflow: hidden; } .c4 { @@ -312,17 +312,17 @@ exports[`Select should render correctly 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - overflow: hidden; -webkit-flex: auto; -ms-flex: auto; flex: auto; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; + overflow: hidden; } .c4 { diff --git a/packages/tailor-ui/src/Steps/__tests__/__snapshots__/Steps.spec.tsx.snap b/packages/tailor-ui/src/Steps/__tests__/__snapshots__/Steps.spec.tsx.snap index 5ab8d613..3f260e12 100644 --- a/packages/tailor-ui/src/Steps/__tests__/__snapshots__/Steps.spec.tsx.snap +++ b/packages/tailor-ui/src/Steps/__tests__/__snapshots__/Steps.spec.tsx.snap @@ -18,13 +18,13 @@ exports[`Steps should render correctly 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - overflow: hidden; - margin-bottom: 0rem; - margin-right: 16px; - min-height: auto; -webkit-flex: auto; -ms-flex: auto; flex: auto; + margin-right: 16px; + margin-bottom: 0rem; + overflow: hidden; + min-height: auto; } .c10 { @@ -33,13 +33,13 @@ exports[`Steps should render correctly 1`] = ` display: -ms-flexbox; display: flex; box-sizing: border-box; - overflow: hidden; - margin-bottom: 0rem; - margin-right: 16px; - min-height: auto; -webkit-flex: none; -ms-flex: none; flex: none; + margin-right: 16px; + margin-bottom: 0rem; + overflow: hidden; + min-height: auto; } .c3 { diff --git a/packages/tailor-ui/src/Table/styles.ts b/packages/tailor-ui/src/Table/styles.ts index 0247d496..1b2c4929 100644 --- a/packages/tailor-ui/src/Table/styles.ts +++ b/packages/tailor-ui/src/Table/styles.ts @@ -1,7 +1,7 @@ -import styled, { StyledComponent, css } from 'styled-components'; +import styled, { css } from 'styled-components'; import { TextAlignProps, WidthProps, textAlign, width } from 'styled-system'; -export const HeadColumn: StyledComponent<'th', any, WidthProps> = styled.th` +export const HeadColumn = styled.th` padding: ${p => p.theme.paddings.xs} ${p => p.theme.paddings.sm}; font-weight: bold; diff --git a/packages/tailor-ui/src/Tabs/Tabs.tsx b/packages/tailor-ui/src/Tabs/Tabs.tsx index c7ab29e9..83061f0d 100644 --- a/packages/tailor-ui/src/Tabs/Tabs.tsx +++ b/packages/tailor-ui/src/Tabs/Tabs.tsx @@ -1,10 +1,10 @@ import React, { FC, useContext, useState } from 'react'; import styled, { css } from 'styled-components'; -import { space as styledSpace } from 'styled-system'; +import { SpaceProps, space } from 'styled-system'; import TabContext, { Size } from './TabContext'; -interface StyledTabProps { +interface StyledTabProps extends SpaceProps { size: Size; pills: boolean; active: boolean; @@ -84,7 +84,7 @@ const StyledTab = styled.a` `}; ${p => p.theme.transition /* sc-declaration */}; - ${styledSpace}; + ${space}; `; export interface TabProps { @@ -118,7 +118,7 @@ export const Tab: FC = ({ label, value, ...props }) => { ); }; -interface StyledTabsProps { +interface StyledTabsProps extends SpaceProps { /** * Make the tabs position to bottom of parent */ @@ -151,7 +151,7 @@ const StyledTabs = styled.nav` } `}; - ${styledSpace}; + ${space}; `; type TabsProps = StyledTabsProps & { diff --git a/packages/tailor-ui/src/Typography/Text.ts b/packages/tailor-ui/src/Typography/Text.ts index e267a0b4..874ef234 100644 --- a/packages/tailor-ui/src/Typography/Text.ts +++ b/packages/tailor-ui/src/Typography/Text.ts @@ -1,39 +1,15 @@ import styled from 'styled-components'; import { ColorProps, - FontFamilyProps, - FontSizeProps, - FontWeightProps, - LetterSpacingProps, - LineHeightProps, - TextAlignProps, + TypographyProps, color, compose, - fontFamily, - fontSize, - fontWeight, - letterSpacing, - lineHeight, - textAlign, + typography, } from 'styled-system'; -export type TextProps = ColorProps & - FontFamilyProps & - FontSizeProps & - FontWeightProps & - LetterSpacingProps & - LineHeightProps & - TextAlignProps; +export type TextProps = ColorProps & TypographyProps; -export const text = compose( - color, - fontFamily, - fontSize, - fontWeight, - letterSpacing, - lineHeight, - textAlign -); +export const text = compose(color, typography); const Text = styled('span')(text); diff --git a/packages/tailor-ui/src/Typography/__tests__/__snapshots__/Text.spec.tsx.snap b/packages/tailor-ui/src/Typography/__tests__/__snapshots__/Text.spec.tsx.snap index 55f21274..98ba5080 100644 --- a/packages/tailor-ui/src/Typography/__tests__/__snapshots__/Text.spec.tsx.snap +++ b/packages/tailor-ui/src/Typography/__tests__/__snapshots__/Text.spec.tsx.snap @@ -3,13 +3,13 @@ exports[`Text should render correctly 1`] = ` .c0 { color: #184480; - font-size: 1.125rem; -webkit-letter-spacing: 1.5px; -moz-letter-spacing: 1.5px; -ms-letter-spacing: 1.5px; letter-spacing: 1.5px; line-height: 2; text-align: center; + font-size: 1.125rem; } {} }); + +export default LocaleContext; diff --git a/src/theme/CodeBlock/index.js b/src/theme/CodeBlock/index.js index 1607f98d..d6ce03a1 100755 --- a/src/theme/CodeBlock/index.js +++ b/src/theme/CodeBlock/index.js @@ -10,7 +10,7 @@ import Clipboard from 'clipboard'; import Highlight, { defaultProps } from 'prism-react-renderer'; import Playground from '@theme/Playground'; -import React, { useEffect, useRef, useState } from 'react'; +import React, { useContext, useEffect, useRef, useState } from 'react'; import classnames from 'classnames'; import defaultTheme from 'prism-react-renderer/themes/palenight'; import moment from 'moment'; @@ -26,6 +26,8 @@ import * as TailorUI from 'tailor-ui'; import * as TailorUIFormik from '@tailor-ui/formik'; import * as TailorUILab from '@tailor-ui/lab'; +import LocaleContext from '../../context/LocaleContext'; + import styles from './styles.module.css'; const highlightLinesRangeRegex = /{([\d,-]+)}/; @@ -40,6 +42,7 @@ const scope = { ...ReactIconsMd, ...ReactIconsTi, ...ramda, + useLocaleContext: () => useContext(LocaleContext), moment, }; diff --git a/src/theme/Layout/index.js b/src/theme/Layout/index.js index 9772ed02..c6654104 100755 --- a/src/theme/Layout/index.js +++ b/src/theme/Layout/index.js @@ -9,12 +9,13 @@ import Footer from '@theme/Footer'; import Head from '@docusaurus/Head'; import Navbar from '@theme/Navbar'; -import React from 'react'; +import React, { useState } from 'react'; import useBaseUrl from '@docusaurus/useBaseUrl'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import { UIProvider } from 'tailor-ui'; +import { UIProvider, locales } from 'tailor-ui'; +import LocaleContext from '../../context/LocaleContext'; import './styles.css'; function Layout(props) { @@ -39,6 +40,8 @@ function Layout(props) { const metaImage = image || defaultImage; const metaImageUrl = siteUrl + useBaseUrl(metaImage); const faviconUrl = useBaseUrl(favicon); + const [locale, setLocale] = useState('en_US'); + return ( <> @@ -64,9 +67,11 @@ function Layout(props) { - -
{children}
- + + +
{children}
+ + {!noFooter &&