From f21b0856b4c3e2c861f01768f8f4f8b09c96448e Mon Sep 17 00:00:00 2001 From: unix Date: Mon, 27 Apr 2020 21:49:55 +0800 Subject: [PATCH 1/3] feat(text): add blockquote --- .../styles/css-baseline/css-baseline.tsx | 17 ++++ components/text/child.tsx | 14 --- components/text/text.tsx | 49 +++++----- pages/en-us/components/text.mdx | 45 ++++++++- pages/zh-cn/components/text.mdx | 93 +++++++++++++------ 5 files changed, 152 insertions(+), 66 deletions(-) diff --git a/components/styles/css-baseline/css-baseline.tsx b/components/styles/css-baseline/css-baseline.tsx index 4f47588..53230f1 100644 --- a/components/styles/css-baseline/css-baseline.tsx +++ b/components/styles/css-baseline/css-baseline.tsx @@ -253,6 +253,23 @@ const CSSBaseline: React.FC> = React.memo(({ list-style: none; } + blockquote { + padding: calc(.667 * ${theme.layout.gap}) ${theme.layout.gap}; + color: ${theme.palette.accents_5}; + background-color: ${theme.palette.accents_1}; + border-radius: ${theme.layout.radius}; + margin: 1.5rem 0; + border: 1px solid ${theme.palette.border}; + } + + blockquote :global(*:first-child) { + margin-top: 0; + } + + blockquote :global(*:last-child) { + margin-bottom: 0; + } + ::selection { background-color: ${theme.palette.selection}; color: ${theme.palette.foreground}; diff --git a/components/text/child.tsx b/components/text/child.tsx index b886cd8..ddcc30e 100644 --- a/components/text/child.tsx +++ b/components/text/child.tsx @@ -4,20 +4,6 @@ import useTheme from '../styles/use-theme' import { NormalTypes } from '../utils/prop-types' import { ZeitUIThemesPalette } from '../styles/themes' -export const ComponentTypes: Array = [ - 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'small', -] - -export const ComponentModifiedElements: { [key: string]: string } = { - bold: 'b', - b: 'b', - italic: 'i', - i: 'i', - desc: 'desc', - description: 'desc', - del: 'del', -} - export interface Props { tag: keyof JSX.IntrinsicElements type?: NormalTypes diff --git a/components/text/text.tsx b/components/text/text.tsx index 2a6c12e..c2cb9c0 100644 --- a/components/text/text.tsx +++ b/components/text/text.tsx @@ -17,6 +17,7 @@ interface Props { span?: boolean del?: boolean em?: boolean + blockquote?: boolean className?: string type?: NormalTypes } @@ -35,6 +36,7 @@ const defaultProps = { span: false, del: false, em: false, + blockquote: false, className: '', type: 'default' as NormalTypes, } @@ -44,7 +46,9 @@ type ElementMap = { [key in (keyof JSX.IntrinsicElements)]?: boolean } type NativeAttrs = Omit, keyof Props> export type TextProps = Props & typeof defaultProps & NativeAttrs -const getModifierChild = (tags: Array, children: ReactNode) => { +type TextRenderableElements = Array + +const getModifierChild = (tags: TextRenderableElements, children: ReactNode) => { if (!tags.length) return children const nextTag = tags.slice(1, tags.length) return ( @@ -54,23 +58,16 @@ const getModifierChild = (tags: Array, children: Re ) } -const getModifiers = (inlineElements: ElementMap, children: ReactNode) => { - const names = Object.keys(inlineElements) - .filter((name: keyof JSX.IntrinsicElements) => inlineElements[name]) - if (!names.length) return children - - return getModifierChild(names as Array, children) -} - const Text: React.FC> = React.memo(({ - h1, h2, h3, h4, h5, h6, p, b, small, i, span, del, em, children, className, ...props + h1, h2, h3, h4, h5, h6, p, b, small, i, span, del, em, blockquote, + children, className, ...props }) => { - const elements: ElementMap = { h1, h2, h3, h4, h5, h6, p, small } - const inlineElements: ElementMap = { b, small, i, span, del, em } + const elements: ElementMap = { h1, h2, h3, h4, h5, h6, p, blockquote } + const inlineElements: ElementMap = { span, small, b, em, i, del } const names = Object.keys(elements) - .filter((name: keyof JSX.IntrinsicElements) => elements[name]) + .filter((name: keyof JSX.IntrinsicElements) => elements[name]) as TextRenderableElements const inlineNames = Object.keys(inlineElements) - .filter((name: keyof JSX.IntrinsicElements) => inlineElements[name]) + .filter((name: keyof JSX.IntrinsicElements) => inlineElements[name]) as TextRenderableElements /** * Render element "p" only if no element is found. @@ -82,16 +79,20 @@ const Text: React.FC> = React.memo(({ * */ - const notSpecialElement = !names[0] - const defaultElement = (inlineNames[0] || 'p') as keyof JSX.IntrinsicElements - const tag = notSpecialElement ? defaultElement : (names[0]) as keyof JSX.IntrinsicElements - const modifers = useMemo( - () => { - if (notSpecialElement) return children - return getModifiers(inlineElements, children) - }, - [inlineElements, children], - ) + const tag = useMemo(() => { + if (names[0]) return names[0] + if (inlineNames[0]) return inlineNames[0] + return 'p' as keyof JSX.IntrinsicElements + }, [names, inlineNames]) + + const renderableChildElements = inlineNames + .filter((name: keyof JSX.IntrinsicElements) => name !== tag) as TextRenderableElements + + const modifers = useMemo(() => { + if (!renderableChildElements.length) return children + return getModifierChild(renderableChildElements, children) + }, [renderableChildElements, children]) + return ( {modifers} ) diff --git a/pages/en-us/components/text.mdx b/pages/en-us/components/text.mdx index 02a0bf5..1ec87e3 100644 --- a/pages/en-us/components/text.mdx +++ b/pages/en-us/components/text.mdx @@ -61,6 +61,38 @@ Display text using well-defined typographic styles. `} /> + + Our mission is to make cloud computing accessible to everyone. + +`} /> + + + + Our mission is to make cloud computing accessible to everyone. + + + Our mission is to make cloud computing accessible to everyone. + + + Our mission is to make cloud computing accessible to everyone. + + + Our mission is to make cloud computing accessible to everyone. + + + Our mission is to make cloud computing accessible to everyone. + + +`} /> + TextTypes + +```ts +type TextTypes = 'default' + | 'secondary' + | 'success' + | 'warning' + | 'error' +``` + export default ({ children }) => {children} diff --git a/pages/zh-cn/components/text.mdx b/pages/zh-cn/components/text.mdx index 17825f5..f41ba30 100644 --- a/pages/zh-cn/components/text.mdx +++ b/pages/zh-cn/components/text.mdx @@ -14,19 +14,14 @@ export const meta = { title="标题" scope={{ Text }} code={` -() => { - const text = 'JavaScript 是一门编程语言。' - return ( - <> - {text} - {text} - {text} - {text} - {text} - {text} - - ) -} +<> + JavaScript 是一门编程语言。 + JavaScript 是一门编程语言。 + JavaScript 是一门编程语言。 + JavaScript 是一门编程语言。 + JavaScript 是一门编程语言。 + JavaScript 是一门编程语言。 + `} /> - 函数 用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。 + 函数用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。 - 函数 用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。 + 函数用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。 + + +`} /> + + + 事件能为网页添加真实的交互能力。 + +`} /> + + + + 中间的代理服务器必须转发未经修改的端到端消息头，并且必须缓存它们。 + + + 中间的代理服务器必须转发未经修改的端到端消息头，并且必须缓存它们。 + + + 中间的代理服务器必须转发未经修改的端到端消息头，并且必须缓存它们。 + + + 中间的代理服务器必须转发未经修改的端到端消息头，并且必须缓存它们。 + + + 中间的代理服务器必须转发未经修改的端到端消息头，并且必须缓存它们。 `} /> @@ -67,12 +95,12 @@ export const meta = { code={` <> - 函数 用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。 + 函数用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。 - 函数 用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。 - 函数 用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。 + 函数用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。 + 函数用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。 `} /> @@ -95,17 +123,28 @@ export const meta = { | 属性 | 描述 | 类型 | 推荐值 | 默认 | ---------- | ---------- | ---- | -------------- | ------ | -| **p** | component name | `boolean` | - | `true` | -| **h1 - h6** | component name | `boolean` | - | `false` | -| **small** | component name | `boolean` | - | `false` | -| **span** | component name | `boolean` | - | `false` | -| **del** | component name | `boolean` | - | `false` | -| **i** | component name | `boolean` | - | `false` | -| **em** | component name | `boolean` | - | `false` | -| **b** | component name | `boolean` | - | `false` | -| **type** | text type | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` | +| **p** | 渲染的组件名 | `boolean` | - | `true` | +| **h1 - h6** | 渲染的组件名 | `boolean` | - | `false` | +| **small** | 渲染的组件名 | `boolean` | - | `false` | +| **span** | 渲染的组件名 | `boolean` | - | `false` | +| **del** | 渲染的组件名 | `boolean` | - | `false` | +| **i** | 渲染的组件名 | `boolean` | - | `false` | +| **em** | 渲染的组件名 | `boolean` | - | `false` | +| **b** | 渲染的组件名 | `boolean` | - | `false` | +| **blockquote** | 渲染的组件名 | `boolean` | - | `false` | +| **type** | 文字类型 | `NormalTypes` | [TextTypes](#texttypes) | `default` | | ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - | +TextTypes + +```ts +type TextTypes = 'default' + | 'secondary' + | 'success' + | 'warning' + | 'error' +``` + export default ({ children }) => {children} From 834b17a54d604e2b4139d34851e9cfa6c28c87cc Mon Sep 17 00:00:00 2001 From: unix Date: Mon, 27 Apr 2020 21:52:43 +0800 Subject: [PATCH 2/3] test: update spanshots --- .../__snapshots__/baseline.test.tsx.snap | 34 +++++++++++++++++++ .../__snapshots__/index.test.tsx.snap | 6 +--- 2 files changed, 35 insertions(+), 5 deletions(-) diff --git a/components/styles/__tests__/__snapshots__/baseline.test.tsx.snap b/components/styles/__tests__/__snapshots__/baseline.test.tsx.snap index b525e59..cb089f2 100644 --- a/components/styles/__tests__/__snapshots__/baseline.test.tsx.snap +++ b/components/styles/__tests__/__snapshots__/baseline.test.tsx.snap @@ -248,6 +248,23 @@ initialize { list-style: none; } + blockquote { + padding: calc(.667 * 16pt) 16pt; + color: #666; + background-color: #fafafa; + border-radius: 5px; + margin: 1.5rem 0; + border: 1px solid #eaeaea; + } + + blockquote :global(*:first-child) { + margin-top: 0; + } + + blockquote :global(*:last-child) { + margin-bottom: 0; + } + ::selection { background-color: #79ffe1; color: #000; @@ -541,6 +558,23 @@ initialize { list-style: none; } + blockquote { + padding: calc(.667 * 16pt) 16pt; + color: #888; + background-color: #111; + border-radius: 5px; + margin: 1.5rem 0; + border: 1px solid #333; + } + + blockquote :global(*:first-child) { + margin-top: 0; + } + + blockquote :global(*:last-child) { + margin-bottom: 0; + } + ::selection { background-color: #f81ce5; color: #fff; diff --git a/components/text/__tests__/__snapshots__/index.test.tsx.snap b/components/text/__tests__/__snapshots__/index.test.tsx.snap index f6ef3ae..82f9922 100644 --- a/components/text/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/text/__tests__/__snapshots__/index.test.tsx.snap @@ -81,11 +81,7 @@ exports[`Text the specified element should be rendered 1`] = ` p { color: inherit; } - test-valuetest-value