From 78a475fd7a3566547c690313ce3fa6f088f2b236 Mon Sep 17 00:00:00 2001 From: unix Date: Wed, 22 Apr 2020 09:02:31 +0800 Subject: [PATCH 1/3] feat(card): add footer component --- components/card/card-footer.tsx | 52 +++++++++++++++++++++++++++++++++ components/card/card.tsx | 48 ++++++++++++++++++++++++++---- components/card/index.ts | 4 +++ 3 files changed, 98 insertions(+), 6 deletions(-) create mode 100644 components/card/card-footer.tsx diff --git a/components/card/card-footer.tsx b/components/card/card-footer.tsx new file mode 100644 index 0000000..0390846 --- /dev/null +++ b/components/card/card-footer.tsx @@ -0,0 +1,52 @@ +import React from 'react' +import useTheme from '../styles/use-theme' +import withDefaults from '../utils/with-defaults' + +interface Props { + disableAutoMargin?: boolean + className?: string +} + +const defaultProps = { + disableAutoMargin: false, + className: '', +} + +type NativeAttrs = Omit, keyof Props> +export type CardFooterProps = Props & typeof defaultProps & NativeAttrs + +const CardFooter: React.FC> = ({ + children, className, disableAutoMargin, ...props +}) => { + const theme = useTheme() + + return ( +
+ {children} + +
+ ) +} + +export default withDefaults(CardFooter, defaultProps) diff --git a/components/card/card.tsx b/components/card/card.tsx index 97ec91b..0e06518 100644 --- a/components/card/card.tsx +++ b/components/card/card.tsx @@ -1,13 +1,16 @@ import React, { useMemo } from 'react' -import withDefaults from '../utils/with-defaults' import useTheme from '../styles/use-theme' import { CardTypes } from '../utils/prop-types' import { getStyles } from './styles' +import CardFooter from './card-footer' +import Image from '../image' +import { pickChild } from '../utils/collections' interface Props { hoverable?: boolean shadow?: boolean className?: string + width?: string type?: CardTypes } @@ -15,6 +18,7 @@ const defaultProps = { type: 'default' as CardTypes, hoverable: false, shadow: false, + width: '100%', className: '', } @@ -22,7 +26,7 @@ type NativeAttrs = Omit, keyof Props> export type CardProps = Props & typeof defaultProps & NativeAttrs const Card: React.FC> = React.memo(({ - children, hoverable, className, shadow, type, ...props + children, hoverable, className, shadow, type, width, ...props }) => { const theme = useTheme() const hoverShadow = useMemo(() => { @@ -34,16 +38,25 @@ const Card: React.FC> = React.memo(({ [type, theme.palette, shadow], ) + const [withoutFooterChildren, footerChildren] = pickChild(children, CardFooter) + const [withoutImageChildren, imageChildren] = pickChild(withoutFooterChildren, Image) + + return (
- {children} + {imageChildren} +
+ {withoutImageChildren} +
+ {footerChildren} +
) }) -export default withDefaults(Card, defaultProps) +type CardComponent

= React.FC

& { + Footer: typeof CardFooter + Actions: typeof CardFooter +} + +type ComponentProps = Partial & Omit & NativeAttrs + +(Card as CardComponent).defaultProps = defaultProps + +export default Card as CardComponent diff --git a/components/card/index.ts b/components/card/index.ts index 28f6097..3c4a890 100644 --- a/components/card/index.ts +++ b/components/card/index.ts @@ -1,3 +1,7 @@ import Card from './card' +import CardFooter from './card-footer' + +Card.Footer = CardFooter +Card.Actions = CardFooter export default Card From a1ea9197d183072f21faf04a89c20d79b1057812 Mon Sep 17 00:00:00 2001 From: unix Date: Wed, 22 Apr 2020 09:02:53 +0800 Subject: [PATCH 2/3] test(card): add testcase for card footer --- .../__snapshots__/footer.test.tsx.snap | 89 + .../__snapshots__/index.test.tsx.snap | 2028 +++++++++++++---- components/card/__tests__/footer.test.tsx | 27 + 3 files changed, 1658 insertions(+), 486 deletions(-) create mode 100644 components/card/__tests__/__snapshots__/footer.test.tsx.snap create mode 100644 components/card/__tests__/footer.test.tsx diff --git a/components/card/__tests__/__snapshots__/footer.test.tsx.snap b/components/card/__tests__/__snapshots__/footer.test.tsx.snap new file mode 100644 index 0000000..5d73932 --- /dev/null +++ b/components/card/__tests__/__snapshots__/footer.test.tsx.snap @@ -0,0 +1,89 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Card Footer should render correctly 1`] = ` +"

card

footer
" +`; + +exports[`Card Footer should work with disable-auto-margin 1`] = ` +"
footer
" +`; diff --git a/components/card/__tests__/__snapshots__/index.test.tsx.snap b/components/card/__tests__/__snapshots__/index.test.tsx.snap index 38ef1d4..34e0720 100644 --- a/components/card/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/card/__tests__/__snapshots__/index.test.tsx.snap @@ -9,7 +9,7 @@ initialize { "children": Array [ Object { "attribs": Object { - "class": "card ", + "class": "content", }, "children": Array [ Object { @@ -18,18 +18,41 @@ initialize { }, "children": Array [ Object { - "data": "card", - "next": Object { - "attribs": Object {}, - "children": Array [ - Object { - "data": " + "attribs": Object { + "class": "content", + }, + "children": Array [ + Object { + "attribs": Object { + "class": "card ", + }, + "children": Array [ + Object { + "attribs": Object { + "class": "content", + }, + "children": Array [ + Object { + "data": "card", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " .card { background: #fff; margin: 0; + padding: 0; width: 100%; transition: all .2s ease; - padding: 16pt 16pt; border-radius: 5px; box-shadow: none; box-sizing: border-box; @@ -38,6 +61,11 @@ initialize { border: 1px solid #eaeaea; } + .content { + width: 100%; + padding: 16pt 16pt; + } + .card:hover { box-shadow: none; } @@ -49,6 +77,187 @@ initialize { .card :global(*:last-child) { margin-bottom: 0; } + + .card :global(img) { + width: 100%; + } + + .card :global(.image) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + padding: 0; + width: 100%; + transition: all .2s ease; + border-radius: 5px; + box-shadow: none; + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid #eaeaea; + } + + .content { + width: 100%; + padding: 16pt 16pt; + } + + .card:hover { + box-shadow: none; + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + + .card :global(img) { + width: 100%; + } + + .card :global(.image) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": Object { + "attribs": Object { + "class": "content", + }, + "children": Array [ + Object { + "data": "card", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + padding: 0; + width: 100%; + transition: all .2s ease; + border-radius: 5px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid transparent; + } + + .content { + width: 100%; + padding: 16pt 16pt; + } + + .card:hover { + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + + .card :global(img) { + width: 100%; + } + + .card :global(.image) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } ", "next": null, "parent": [Circular], @@ -67,7 +276,13 @@ initialize { }, "parent": [Circular], "prev": null, - "type": "text", + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, }, Object { "attribs": Object {}, @@ -77,19 +292,24 @@ initialize { .card { background: #fff; margin: 0; + padding: 0; width: 100%; transition: all .2s ease; - padding: 16pt 16pt; border-radius: 5px; - box-shadow: none; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); box-sizing: border-box; color: #000; background-color: #fff; - border: 1px solid #eaeaea; + border: 1px solid transparent; + } + + .content { + width: 100%; + padding: 16pt 16pt; } .card:hover { - box-shadow: none; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); } .card :global(*:first-child) { @@ -99,6 +319,15 @@ initialize { .card :global(*:last-child) { margin-bottom: 0; } + + .card :global(img) { + width: 100%; + } + + .card :global(.image) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } ", "next": null, "parent": [Circular], @@ -111,40 +340,56 @@ initialize { "next": null, "parent": [Circular], "prev": Object { - "data": "card", - "next": [Circular], - "parent": [Circular], - "prev": null, - "type": "text", - }, - "type": "style", - "x-attribsNamespace": Object {}, - "x-attribsPrefix": Object {}, - }, - ], - "name": "div", - "namespace": "http://www.w3.org/1999/xhtml", - "next": Object { - "attribs": Object {}, - "children": Array [ - Object { - "data": " + "attribs": Object { + "class": "content", + }, + "children": Array [ + Object { + "attribs": Object { + "class": "card ", + }, + "children": Array [ + Object { + "attribs": Object { + "class": "content", + }, + "children": Array [ + Object { + "data": "card", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " .card { background: #fff; margin: 0; + padding: 0; width: 100%; transition: all .2s ease; - padding: 16pt 16pt; border-radius: 5px; - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); + box-shadow: none; box-sizing: border-box; color: #000; background-color: #fff; - border: 1px solid transparent; + border: 1px solid #eaeaea; + } + + .content { + width: 100%; + padding: 16pt 16pt; } .card:hover { - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); + box-shadow: none; } .card :global(*:first-child) { @@ -154,22 +399,162 @@ initialize { .card :global(*:last-child) { margin-bottom: 0; } + + .card :global(img) { + width: 100%; + } + + .card :global(.image) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } ", - "next": null, + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + padding: 0; + width: 100%; + transition: all .2s ease; + border-radius: 5px; + box-shadow: none; + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid #eaeaea; + } + + .content { + width: 100%; + padding: 16pt 16pt; + } + + .card:hover { + box-shadow: none; + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + + .card :global(img) { + width: 100%; + } + + .card :global(.image) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": Object { + "attribs": Object { + "class": "content", + }, + "children": Array [ + Object { + "data": "card", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": [Circular], "parent": [Circular], "prev": null, - "type": "text", + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, }, - ], - "name": "style", - "namespace": "http://www.w3.org/1999/xhtml", - "next": null, - "parent": [Circular], - "prev": [Circular], - "type": "style", - "x-attribsNamespace": Object {}, - "x-attribsPrefix": Object {}, - }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, "parent": [Circular], "prev": null, "type": "tag", @@ -180,174 +565,6 @@ initialize { "class": undefined, }, }, - Object { - "attribs": Object {}, - "children": Array [ - Object { - "data": " - .card { - background: #fff; - margin: 0; - width: 100%; - transition: all .2s ease; - padding: 16pt 16pt; - border-radius: 5px; - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); - box-sizing: border-box; - color: #000; - background-color: #fff; - border: 1px solid transparent; - } - - .card:hover { - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); - } - - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - ", - "next": null, - "parent": [Circular], - "prev": null, - "type": "text", - }, - ], - "name": "style", - "namespace": "http://www.w3.org/1999/xhtml", - "next": null, - "parent": [Circular], - "prev": Object { - "attribs": Object { - "class": "card ", - }, - "children": Array [ - Object { - "data": "card", - "next": Object { - "attribs": Object {}, - "children": Array [ - Object { - "data": " - .card { - background: #fff; - margin: 0; - width: 100%; - transition: all .2s ease; - padding: 16pt 16pt; - border-radius: 5px; - box-shadow: none; - box-sizing: border-box; - color: #000; - background-color: #fff; - border: 1px solid #eaeaea; - } - - .card:hover { - box-shadow: none; - } - - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - ", - "next": null, - "parent": [Circular], - "prev": null, - "type": "text", - }, - ], - "name": "style", - "namespace": "http://www.w3.org/1999/xhtml", - "next": null, - "parent": [Circular], - "prev": [Circular], - "type": "style", - "x-attribsNamespace": Object {}, - "x-attribsPrefix": Object {}, - }, - "parent": [Circular], - "prev": null, - "type": "text", - }, - Object { - "attribs": Object {}, - "children": Array [ - Object { - "data": " - .card { - background: #fff; - margin: 0; - width: 100%; - transition: all .2s ease; - padding: 16pt 16pt; - border-radius: 5px; - box-shadow: none; - box-sizing: border-box; - color: #000; - background-color: #fff; - border: 1px solid #eaeaea; - } - - .card:hover { - box-shadow: none; - } - - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - ", - "next": null, - "parent": [Circular], - "prev": null, - "type": "text", - }, - ], - "name": "style", - "namespace": "http://www.w3.org/1999/xhtml", - "next": null, - "parent": [Circular], - "prev": Object { - "data": "card", - "next": [Circular], - "parent": [Circular], - "prev": null, - "type": "text", - }, - "type": "style", - "x-attribsNamespace": Object {}, - "x-attribsPrefix": Object {}, - }, - ], - "name": "div", - "namespace": "http://www.w3.org/1999/xhtml", - "next": [Circular], - "parent": [Circular], - "prev": null, - "type": "tag", - "x-attribsNamespace": Object { - "class": undefined, - }, - "x-attribsPrefix": Object { - "class": undefined, - }, - }, - "type": "style", - "x-attribsNamespace": Object {}, - "x-attribsPrefix": Object {}, - }, ], "name": "div", "namespace": "http://www.w3.org/1999/xhtml", @@ -359,9 +576,9 @@ initialize { .card { background: #fff; margin: 0; + padding: 0; width: 100%; transition: all .2s ease; - padding: 16pt 16pt; border-radius: 5px; box-shadow: none; box-sizing: border-box; @@ -370,6 +587,11 @@ initialize { border: 1px solid #eaeaea; } + .content { + width: 100%; + padding: 16pt 16pt; + } + .card:hover { box-shadow: none; } @@ -381,6 +603,15 @@ initialize { .card :global(*:last-child) { margin-bottom: 0; } + + .card :global(img) { + width: 100%; + } + + .card :global(.image) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } ", "next": null, "parent": [Circular], @@ -415,9 +646,9 @@ initialize { .card { background: #fff; margin: 0; + padding: 0; width: 100%; transition: all .2s ease; - padding: 16pt 16pt; border-radius: 5px; box-shadow: none; box-sizing: border-box; @@ -426,6 +657,11 @@ initialize { border: 1px solid #eaeaea; } + .content { + width: 100%; + padding: 16pt 16pt; + } + .card:hover { box-shadow: none; } @@ -437,6 +673,15 @@ initialize { .card :global(*:last-child) { margin-bottom: 0; } + + .card :global(img) { + width: 100%; + } + + .card :global(.image) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } ", "next": null, "parent": [Circular], @@ -450,7 +695,7 @@ initialize { "parent": [Circular], "prev": Object { "attribs": Object { - "class": "card ", + "class": "content", }, "children": Array [ Object { @@ -459,18 +704,41 @@ initialize { }, "children": Array [ Object { - "data": "card", - "next": Object { - "attribs": Object {}, - "children": Array [ - Object { - "data": " + "attribs": Object { + "class": "content", + }, + "children": Array [ + Object { + "attribs": Object { + "class": "card ", + }, + "children": Array [ + Object { + "attribs": Object { + "class": "content", + }, + "children": Array [ + Object { + "data": "card", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " .card { background: #fff; margin: 0; + padding: 0; width: 100%; transition: all .2s ease; - padding: 16pt 16pt; border-radius: 5px; box-shadow: none; box-sizing: border-box; @@ -479,6 +747,11 @@ initialize { border: 1px solid #eaeaea; } + .content { + width: 100%; + padding: 16pt 16pt; + } + .card:hover { box-shadow: none; } @@ -490,6 +763,187 @@ initialize { .card :global(*:last-child) { margin-bottom: 0; } + + .card :global(img) { + width: 100%; + } + + .card :global(.image) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + padding: 0; + width: 100%; + transition: all .2s ease; + border-radius: 5px; + box-shadow: none; + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid #eaeaea; + } + + .content { + width: 100%; + padding: 16pt 16pt; + } + + .card:hover { + box-shadow: none; + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + + .card :global(img) { + width: 100%; + } + + .card :global(.image) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": Object { + "attribs": Object { + "class": "content", + }, + "children": Array [ + Object { + "data": "card", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + padding: 0; + width: 100%; + transition: all .2s ease; + border-radius: 5px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid transparent; + } + + .content { + width: 100%; + padding: 16pt 16pt; + } + + .card:hover { + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + + .card :global(img) { + width: 100%; + } + + .card :global(.image) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } ", "next": null, "parent": [Circular], @@ -508,7 +962,13 @@ initialize { }, "parent": [Circular], "prev": null, - "type": "text", + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, }, Object { "attribs": Object {}, @@ -518,19 +978,24 @@ initialize { .card { background: #fff; margin: 0; + padding: 0; width: 100%; transition: all .2s ease; - padding: 16pt 16pt; border-radius: 5px; - box-shadow: none; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); box-sizing: border-box; color: #000; background-color: #fff; - border: 1px solid #eaeaea; + border: 1px solid transparent; + } + + .content { + width: 100%; + padding: 16pt 16pt; } .card:hover { - box-shadow: none; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); } .card :global(*:first-child) { @@ -540,6 +1005,15 @@ initialize { .card :global(*:last-child) { margin-bottom: 0; } + + .card :global(img) { + width: 100%; + } + + .card :global(.image) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } ", "next": null, "parent": [Circular], @@ -552,40 +1026,56 @@ initialize { "next": null, "parent": [Circular], "prev": Object { - "data": "card", - "next": [Circular], - "parent": [Circular], - "prev": null, - "type": "text", - }, - "type": "style", - "x-attribsNamespace": Object {}, - "x-attribsPrefix": Object {}, - }, - ], - "name": "div", - "namespace": "http://www.w3.org/1999/xhtml", - "next": Object { - "attribs": Object {}, - "children": Array [ - Object { - "data": " + "attribs": Object { + "class": "content", + }, + "children": Array [ + Object { + "attribs": Object { + "class": "card ", + }, + "children": Array [ + Object { + "attribs": Object { + "class": "content", + }, + "children": Array [ + Object { + "data": "card", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " .card { background: #fff; margin: 0; + padding: 0; width: 100%; transition: all .2s ease; - padding: 16pt 16pt; border-radius: 5px; - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); + box-shadow: none; box-sizing: border-box; color: #000; background-color: #fff; - border: 1px solid transparent; + border: 1px solid #eaeaea; + } + + .content { + width: 100%; + padding: 16pt 16pt; } .card:hover { - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); + box-shadow: none; } .card :global(*:first-child) { @@ -595,22 +1085,162 @@ initialize { .card :global(*:last-child) { margin-bottom: 0; } + + .card :global(img) { + width: 100%; + } + + .card :global(.image) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } ", - "next": null, + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .card { + background: #fff; + margin: 0; + padding: 0; + width: 100%; + transition: all .2s ease; + border-radius: 5px; + box-shadow: none; + box-sizing: border-box; + color: #000; + background-color: #fff; + border: 1px solid #eaeaea; + } + + .content { + width: 100%; + padding: 16pt 16pt; + } + + .card:hover { + box-shadow: none; + } + + .card :global(*:first-child) { + margin-top: 0; + } + + .card :global(*:last-child) { + margin-bottom: 0; + } + + .card :global(img) { + width: 100%; + } + + .card :global(.image) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": Object { + "attribs": Object { + "class": "content", + }, + "children": Array [ + Object { + "data": "card", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": [Circular], "parent": [Circular], "prev": null, - "type": "text", + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, }, - ], - "name": "style", - "namespace": "http://www.w3.org/1999/xhtml", - "next": null, - "parent": [Circular], - "prev": [Circular], - "type": "style", - "x-attribsNamespace": Object {}, - "x-attribsPrefix": Object {}, - }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, "parent": [Circular], "prev": null, "type": "tag", @@ -621,174 +1251,6 @@ initialize { "class": undefined, }, }, - Object { - "attribs": Object {}, - "children": Array [ - Object { - "data": " - .card { - background: #fff; - margin: 0; - width: 100%; - transition: all .2s ease; - padding: 16pt 16pt; - border-radius: 5px; - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); - box-sizing: border-box; - color: #000; - background-color: #fff; - border: 1px solid transparent; - } - - .card:hover { - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); - } - - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - ", - "next": null, - "parent": [Circular], - "prev": null, - "type": "text", - }, - ], - "name": "style", - "namespace": "http://www.w3.org/1999/xhtml", - "next": null, - "parent": [Circular], - "prev": Object { - "attribs": Object { - "class": "card ", - }, - "children": Array [ - Object { - "data": "card", - "next": Object { - "attribs": Object {}, - "children": Array [ - Object { - "data": " - .card { - background: #fff; - margin: 0; - width: 100%; - transition: all .2s ease; - padding: 16pt 16pt; - border-radius: 5px; - box-shadow: none; - box-sizing: border-box; - color: #000; - background-color: #fff; - border: 1px solid #eaeaea; - } - - .card:hover { - box-shadow: none; - } - - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - ", - "next": null, - "parent": [Circular], - "prev": null, - "type": "text", - }, - ], - "name": "style", - "namespace": "http://www.w3.org/1999/xhtml", - "next": null, - "parent": [Circular], - "prev": [Circular], - "type": "style", - "x-attribsNamespace": Object {}, - "x-attribsPrefix": Object {}, - }, - "parent": [Circular], - "prev": null, - "type": "text", - }, - Object { - "attribs": Object {}, - "children": Array [ - Object { - "data": " - .card { - background: #fff; - margin: 0; - width: 100%; - transition: all .2s ease; - padding: 16pt 16pt; - border-radius: 5px; - box-shadow: none; - box-sizing: border-box; - color: #000; - background-color: #fff; - border: 1px solid #eaeaea; - } - - .card:hover { - box-shadow: none; - } - - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - ", - "next": null, - "parent": [Circular], - "prev": null, - "type": "text", - }, - ], - "name": "style", - "namespace": "http://www.w3.org/1999/xhtml", - "next": null, - "parent": [Circular], - "prev": Object { - "data": "card", - "next": [Circular], - "parent": [Circular], - "prev": null, - "type": "text", - }, - "type": "style", - "x-attribsNamespace": Object {}, - "x-attribsPrefix": Object {}, - }, - ], - "name": "div", - "namespace": "http://www.w3.org/1999/xhtml", - "next": [Circular], - "parent": [Circular], - "prev": null, - "type": "tag", - "x-attribsNamespace": Object { - "class": undefined, - }, - "x-attribsPrefix": Object { - "class": undefined, - }, - }, - "type": "style", - "x-attribsNamespace": Object {}, - "x-attribsPrefix": Object {}, - }, ], "name": "div", "namespace": "http://www.w3.org/1999/xhtml", @@ -857,7 +1319,20 @@ initialize { }, "children": Array [ Object { - "data": "card", + "attribs": Object { + "class": "content", + }, + "children": Array [ + Object { + "data": "card", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", "next": Object { "attribs": Object {}, "children": Array [ @@ -866,9 +1341,9 @@ initialize { .card { background: #fff; margin: 0; + padding: 0; width: 100%; transition: all .2s ease; - padding: 16pt 16pt; border-radius: 5px; box-shadow: none; box-sizing: border-box; @@ -877,6 +1352,11 @@ initialize { border: 1px solid #eaeaea; } + .content { + width: 100%; + padding: 16pt 16pt; + } + .card:hover { box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); } @@ -888,6 +1368,15 @@ initialize { .card :global(*:last-child) { margin-bottom: 0; } + + .card :global(img) { + width: 100%; + } + + .card :global(.image) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } ", "next": null, "parent": [Circular], @@ -906,7 +1395,13 @@ initialize { }, "parent": [Circular], "prev": null, - "type": "text", + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, }, Object { "attribs": Object {}, @@ -916,9 +1411,9 @@ initialize { .card { background: #fff; margin: 0; + padding: 0; width: 100%; transition: all .2s ease; - padding: 16pt 16pt; border-radius: 5px; box-shadow: none; box-sizing: border-box; @@ -927,6 +1422,11 @@ initialize { border: 1px solid #eaeaea; } + .content { + width: 100%; + padding: 16pt 16pt; + } + .card:hover { box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); } @@ -938,6 +1438,15 @@ initialize { .card :global(*:last-child) { margin-bottom: 0; } + + .card :global(img) { + width: 100%; + } + + .card :global(.image) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } ", "next": null, "parent": [Circular], @@ -950,11 +1459,30 @@ initialize { "next": null, "parent": [Circular], "prev": Object { - "data": "card", + "attribs": Object { + "class": "content", + }, + "children": Array [ + Object { + "data": "card", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", "next": [Circular], "parent": [Circular], "prev": null, - "type": "text", + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, }, "type": "style", "x-attribsNamespace": Object {}, @@ -969,7 +1497,20 @@ initialize { }, "children": Array [ Object { - "data": "card", + "attribs": Object { + "class": "content", + }, + "children": Array [ + Object { + "data": "card", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", "next": Object { "attribs": Object {}, "children": Array [ @@ -978,9 +1519,9 @@ initialize { .card { background: #fff; margin: 0; + padding: 0; width: 100%; transition: all .2s ease; - padding: 16pt 16pt; border-radius: 5px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); box-sizing: border-box; @@ -989,6 +1530,11 @@ initialize { border: 1px solid transparent; } + .content { + width: 100%; + padding: 16pt 16pt; + } + .card:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); } @@ -1000,6 +1546,15 @@ initialize { .card :global(*:last-child) { margin-bottom: 0; } + + .card :global(img) { + width: 100%; + } + + .card :global(.image) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } ", "next": null, "parent": [Circular], @@ -1018,7 +1573,13 @@ initialize { }, "parent": [Circular], "prev": null, - "type": "text", + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, }, Object { "attribs": Object {}, @@ -1028,9 +1589,9 @@ initialize { .card { background: #fff; margin: 0; + padding: 0; width: 100%; transition: all .2s ease; - padding: 16pt 16pt; border-radius: 5px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); box-sizing: border-box; @@ -1039,6 +1600,11 @@ initialize { border: 1px solid transparent; } + .content { + width: 100%; + padding: 16pt 16pt; + } + .card:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); } @@ -1050,6 +1616,15 @@ initialize { .card :global(*:last-child) { margin-bottom: 0; } + + .card :global(img) { + width: 100%; + } + + .card :global(.image) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } ", "next": null, "parent": [Circular], @@ -1062,11 +1637,30 @@ initialize { "next": null, "parent": [Circular], "prev": Object { - "data": "card", + "attribs": Object { + "class": "content", + }, + "children": Array [ + Object { + "data": "card", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", "next": [Circular], "parent": [Circular], "prev": null, - "type": "text", + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, }, "type": "style", "x-attribsNamespace": Object {}, @@ -1081,7 +1675,20 @@ initialize { }, "children": Array [ Object { - "data": "card", + "attribs": Object { + "class": "content", + }, + "children": Array [ + Object { + "data": "card", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", "next": Object { "attribs": Object {}, "children": Array [ @@ -1090,9 +1697,9 @@ initialize { .card { background: #fff; margin: 0; + padding: 0; width: 100%; transition: all .2s ease; - padding: 16pt 16pt; border-radius: 5px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); box-sizing: border-box; @@ -1101,6 +1708,11 @@ initialize { border: 1px solid transparent; } + .content { + width: 100%; + padding: 16pt 16pt; + } + .card:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); } @@ -1112,6 +1724,15 @@ initialize { .card :global(*:last-child) { margin-bottom: 0; } + + .card :global(img) { + width: 100%; + } + + .card :global(.image) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } ", "next": null, "parent": [Circular], @@ -1130,7 +1751,13 @@ initialize { }, "parent": [Circular], "prev": null, - "type": "text", + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, }, Object { "attribs": Object {}, @@ -1140,9 +1767,9 @@ initialize { .card { background: #fff; margin: 0; + padding: 0; width: 100%; transition: all .2s ease; - padding: 16pt 16pt; border-radius: 5px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); box-sizing: border-box; @@ -1151,6 +1778,11 @@ initialize { border: 1px solid transparent; } + .content { + width: 100%; + padding: 16pt 16pt; + } + .card:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); } @@ -1162,6 +1794,15 @@ initialize { .card :global(*:last-child) { margin-bottom: 0; } + + .card :global(img) { + width: 100%; + } + + .card :global(.image) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } ", "next": null, "parent": [Circular], @@ -1174,11 +1815,30 @@ initialize { "next": null, "parent": [Circular], "prev": Object { - "data": "card", + "attribs": Object { + "class": "content", + }, + "children": Array [ + Object { + "data": "card", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", "next": [Circular], "parent": [Circular], "prev": null, - "type": "text", + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, }, "type": "style", "x-attribsNamespace": Object {}, @@ -1224,7 +1884,20 @@ initialize { }, "children": Array [ Object { - "data": "card", + "attribs": Object { + "class": "content", + }, + "children": Array [ + Object { + "data": "card", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", "next": Object { "attribs": Object {}, "children": Array [ @@ -1233,9 +1906,9 @@ initialize { .card { background: #fff; margin: 0; + padding: 0; width: 100%; transition: all .2s ease; - padding: 16pt 16pt; border-radius: 5px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); box-sizing: border-box; @@ -1244,6 +1917,11 @@ initialize { border: 1px solid transparent; } + .content { + width: 100%; + padding: 16pt 16pt; + } + .card:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); } @@ -1255,6 +1933,15 @@ initialize { .card :global(*:last-child) { margin-bottom: 0; } + + .card :global(img) { + width: 100%; + } + + .card :global(.image) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } ", "next": null, "parent": [Circular], @@ -1273,7 +1960,13 @@ initialize { }, "parent": [Circular], "prev": null, - "type": "text", + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, }, Object { "attribs": Object {}, @@ -1283,9 +1976,9 @@ initialize { .card { background: #fff; margin: 0; + padding: 0; width: 100%; transition: all .2s ease; - padding: 16pt 16pt; border-radius: 5px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); box-sizing: border-box; @@ -1294,6 +1987,11 @@ initialize { border: 1px solid transparent; } + .content { + width: 100%; + padding: 16pt 16pt; + } + .card:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); } @@ -1305,6 +2003,15 @@ initialize { .card :global(*:last-child) { margin-bottom: 0; } + + .card :global(img) { + width: 100%; + } + + .card :global(.image) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } ", "next": null, "parent": [Circular], @@ -1317,11 +2024,30 @@ initialize { "next": null, "parent": [Circular], "prev": Object { - "data": "card", + "attribs": Object { + "class": "content", + }, + "children": Array [ + Object { + "data": "card", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", "next": [Circular], "parent": [Circular], "prev": null, - "type": "text", + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, }, "type": "style", "x-attribsNamespace": Object {}, @@ -1336,7 +2062,20 @@ initialize { }, "children": Array [ Object { - "data": "card", + "attribs": Object { + "class": "content", + }, + "children": Array [ + Object { + "data": "card", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", "next": Object { "attribs": Object {}, "children": Array [ @@ -1345,9 +2084,9 @@ initialize { .card { background: #fff; margin: 0; + padding: 0; width: 100%; transition: all .2s ease; - padding: 16pt 16pt; border-radius: 5px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); box-sizing: border-box; @@ -1356,6 +2095,11 @@ initialize { border: 1px solid transparent; } + .content { + width: 100%; + padding: 16pt 16pt; + } + .card:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); } @@ -1367,6 +2111,15 @@ initialize { .card :global(*:last-child) { margin-bottom: 0; } + + .card :global(img) { + width: 100%; + } + + .card :global(.image) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } ", "next": null, "parent": [Circular], @@ -1385,7 +2138,13 @@ initialize { }, "parent": [Circular], "prev": null, - "type": "text", + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, }, Object { "attribs": Object {}, @@ -1395,9 +2154,9 @@ initialize { .card { background: #fff; margin: 0; + padding: 0; width: 100%; transition: all .2s ease; - padding: 16pt 16pt; border-radius: 5px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); box-sizing: border-box; @@ -1406,6 +2165,11 @@ initialize { border: 1px solid transparent; } + .content { + width: 100%; + padding: 16pt 16pt; + } + .card:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); } @@ -1417,6 +2181,15 @@ initialize { .card :global(*:last-child) { margin-bottom: 0; } + + .card :global(img) { + width: 100%; + } + + .card :global(.image) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } ", "next": null, "parent": [Circular], @@ -1429,11 +2202,30 @@ initialize { "next": null, "parent": [Circular], "prev": Object { - "data": "card", + "attribs": Object { + "class": "content", + }, + "children": Array [ + Object { + "data": "card", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", "next": [Circular], "parent": [Circular], "prev": null, - "type": "text", + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, }, "type": "style", "x-attribsNamespace": Object {}, @@ -1460,7 +2252,20 @@ initialize { }, "children": Array [ Object { - "data": "card", + "attribs": Object { + "class": "content", + }, + "children": Array [ + Object { + "data": "card", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", "next": Object { "attribs": Object {}, "children": Array [ @@ -1469,9 +2274,9 @@ initialize { .card { background: #fff; margin: 0; + padding: 0; width: 100%; transition: all .2s ease; - padding: 16pt 16pt; border-radius: 5px; box-shadow: none; box-sizing: border-box; @@ -1480,6 +2285,11 @@ initialize { border: 1px solid #eaeaea; } + .content { + width: 100%; + padding: 16pt 16pt; + } + .card:hover { box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); } @@ -1491,6 +2301,15 @@ initialize { .card :global(*:last-child) { margin-bottom: 0; } + + .card :global(img) { + width: 100%; + } + + .card :global(.image) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } ", "next": null, "parent": [Circular], @@ -1509,7 +2328,13 @@ initialize { }, "parent": [Circular], "prev": null, - "type": "text", + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, }, Object { "attribs": Object {}, @@ -1519,9 +2344,9 @@ initialize { .card { background: #fff; margin: 0; + padding: 0; width: 100%; transition: all .2s ease; - padding: 16pt 16pt; border-radius: 5px; box-shadow: none; box-sizing: border-box; @@ -1530,6 +2355,11 @@ initialize { border: 1px solid #eaeaea; } + .content { + width: 100%; + padding: 16pt 16pt; + } + .card:hover { box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); } @@ -1541,6 +2371,15 @@ initialize { .card :global(*:last-child) { margin-bottom: 0; } + + .card :global(img) { + width: 100%; + } + + .card :global(.image) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } ", "next": null, "parent": [Circular], @@ -1553,11 +2392,30 @@ initialize { "next": null, "parent": [Circular], "prev": Object { - "data": "card", + "attribs": Object { + "class": "content", + }, + "children": Array [ + Object { + "data": "card", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", "next": [Circular], "parent": [Circular], "prev": null, - "type": "text", + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, }, "type": "style", "x-attribsNamespace": Object {}, @@ -1591,7 +2449,20 @@ initialize { }, "children": Array [ Object { - "data": "card", + "attribs": Object { + "class": "content", + }, + "children": Array [ + Object { + "data": "card", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", "next": Object { "attribs": Object {}, "children": Array [ @@ -1600,9 +2471,9 @@ initialize { .card { background: #fff; margin: 0; + padding: 0; width: 100%; transition: all .2s ease; - padding: 16pt 16pt; border-radius: 5px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); box-sizing: border-box; @@ -1611,6 +2482,11 @@ initialize { border: 1px solid transparent; } + .content { + width: 100%; + padding: 16pt 16pt; + } + .card:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); } @@ -1622,6 +2498,15 @@ initialize { .card :global(*:last-child) { margin-bottom: 0; } + + .card :global(img) { + width: 100%; + } + + .card :global(.image) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } ", "next": null, "parent": [Circular], @@ -1640,7 +2525,13 @@ initialize { }, "parent": [Circular], "prev": null, - "type": "text", + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, }, Object { "attribs": Object {}, @@ -1650,9 +2541,9 @@ initialize { .card { background: #fff; margin: 0; + padding: 0; width: 100%; transition: all .2s ease; - padding: 16pt 16pt; border-radius: 5px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); box-sizing: border-box; @@ -1661,6 +2552,11 @@ initialize { border: 1px solid transparent; } + .content { + width: 100%; + padding: 16pt 16pt; + } + .card:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); } @@ -1672,6 +2568,15 @@ initialize { .card :global(*:last-child) { margin-bottom: 0; } + + .card :global(img) { + width: 100%; + } + + .card :global(.image) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } ", "next": null, "parent": [Circular], @@ -1684,11 +2589,30 @@ initialize { "next": null, "parent": [Circular], "prev": Object { - "data": "card", + "attribs": Object { + "class": "content", + }, + "children": Array [ + Object { + "data": "card", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", "next": [Circular], "parent": [Circular], "prev": null, - "type": "text", + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, }, "type": "style", "x-attribsNamespace": Object {}, @@ -1705,7 +2629,20 @@ initialize { }, "children": Array [ Object { - "data": "card", + "attribs": Object { + "class": "content", + }, + "children": Array [ + Object { + "data": "card", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", "next": Object { "attribs": Object {}, "children": Array [ @@ -1714,9 +2651,9 @@ initialize { .card { background: #fff; margin: 0; + padding: 0; width: 100%; transition: all .2s ease; - padding: 16pt 16pt; border-radius: 5px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); box-sizing: border-box; @@ -1725,6 +2662,11 @@ initialize { border: 1px solid transparent; } + .content { + width: 100%; + padding: 16pt 16pt; + } + .card:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); } @@ -1736,6 +2678,15 @@ initialize { .card :global(*:last-child) { margin-bottom: 0; } + + .card :global(img) { + width: 100%; + } + + .card :global(.image) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } ", "next": null, "parent": [Circular], @@ -1754,7 +2705,13 @@ initialize { }, "parent": [Circular], "prev": null, - "type": "text", + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, }, Object { "attribs": Object {}, @@ -1764,9 +2721,9 @@ initialize { .card { background: #fff; margin: 0; + padding: 0; width: 100%; transition: all .2s ease; - padding: 16pt 16pt; border-radius: 5px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); box-sizing: border-box; @@ -1775,6 +2732,11 @@ initialize { border: 1px solid transparent; } + .content { + width: 100%; + padding: 16pt 16pt; + } + .card:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); } @@ -1786,6 +2748,15 @@ initialize { .card :global(*:last-child) { margin-bottom: 0; } + + .card :global(img) { + width: 100%; + } + + .card :global(.image) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } ", "next": null, "parent": [Circular], @@ -1798,11 +2769,30 @@ initialize { "next": null, "parent": [Circular], "prev": Object { - "data": "card", + "attribs": Object { + "class": "content", + }, + "children": Array [ + Object { + "data": "card", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", "next": [Circular], "parent": [Circular], "prev": null, - "type": "text", + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, }, "type": "style", "x-attribsNamespace": Object {}, @@ -1819,7 +2809,20 @@ initialize { }, "children": Array [ Object { - "data": "card", + "attribs": Object { + "class": "content", + }, + "children": Array [ + Object { + "data": "card", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", "next": Object { "attribs": Object {}, "children": Array [ @@ -1828,9 +2831,9 @@ initialize { .card { background: #fff; margin: 0; + padding: 0; width: 100%; transition: all .2s ease; - padding: 16pt 16pt; border-radius: 5px; box-shadow: none; box-sizing: border-box; @@ -1839,6 +2842,11 @@ initialize { border: 1px solid #eaeaea; } + .content { + width: 100%; + padding: 16pt 16pt; + } + .card:hover { box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); } @@ -1850,6 +2858,15 @@ initialize { .card :global(*:last-child) { margin-bottom: 0; } + + .card :global(img) { + width: 100%; + } + + .card :global(.image) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } ", "next": null, "parent": [Circular], @@ -1868,7 +2885,13 @@ initialize { }, "parent": [Circular], "prev": null, - "type": "text", + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, }, Object { "attribs": Object {}, @@ -1878,9 +2901,9 @@ initialize { .card { background: #fff; margin: 0; + padding: 0; width: 100%; transition: all .2s ease; - padding: 16pt 16pt; border-radius: 5px; box-shadow: none; box-sizing: border-box; @@ -1889,6 +2912,11 @@ initialize { border: 1px solid #eaeaea; } + .content { + width: 100%; + padding: 16pt 16pt; + } + .card:hover { box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12); } @@ -1900,6 +2928,15 @@ initialize { .card :global(*:last-child) { margin-bottom: 0; } + + .card :global(img) { + width: 100%; + } + + .card :global(.image) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } ", "next": null, "parent": [Circular], @@ -1912,11 +2949,30 @@ initialize { "next": null, "parent": [Circular], "prev": Object { - "data": "card", + "attribs": Object { + "class": "content", + }, + "children": Array [ + Object { + "data": "card", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", "next": [Circular], "parent": [Circular], "prev": null, - "type": "text", + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, }, "type": "style", "x-attribsNamespace": Object {}, diff --git a/components/card/__tests__/footer.test.tsx b/components/card/__tests__/footer.test.tsx new file mode 100644 index 0000000..fcdbc0f --- /dev/null +++ b/components/card/__tests__/footer.test.tsx @@ -0,0 +1,27 @@ +import React from 'react' +import { mount } from 'enzyme' +import { Card } from 'components' + +describe('Card Footer', () => { + it('should render correctly', () => { + const wrapper = mount( + +

card

+ footer + + ) + expect(wrapper.html()).toMatchSnapshot() + expect(() => wrapper.unmount()).not.toThrow() + }) + + it('should work properly when use alone', () => { + const wrapper = mount(footer) + expect(() => wrapper.unmount()).not.toThrow() + }) + + it('should work with disable-auto-margin', () => { + const wrapper = mount(footer) + expect(wrapper.html()).toMatchSnapshot() + expect(() => wrapper.unmount()).not.toThrow() + }) +}) From e507334c20771d1318f2688d5b940184e2904448 Mon Sep 17 00:00:00 2001 From: unix Date: Wed, 22 Apr 2020 09:03:10 +0800 Subject: [PATCH 3/3] docs(card): add docs for card footer docs(card): fix missing external links --- pages/en-us/components/card.mdx | 50 +++++++++++++++++++++++++++++++-- pages/zh-cn/components/card.mdx | 50 +++++++++++++++++++++++++++++++-- 2 files changed, 95 insertions(+), 5 deletions(-) diff --git a/pages/en-us/components/card.mdx b/pages/en-us/components/card.mdx index 49e06ab..fbc4c2e 100644 --- a/pages/en-us/components/card.mdx +++ b/pages/en-us/components/card.mdx @@ -1,5 +1,5 @@ import { Layout, Playground, Attributes } from 'lib/components' -import { Card, Spacer, Row, Col } from 'components' +import { Card, Spacer, Row, Col, Link, Image, Text } from 'components' export const meta = { title: 'card', @@ -10,7 +10,6 @@ export const meta = { A common container component. - + + +

ZEIT UI React

+

Modern and minimalist React UI library.

+ + Visit source code on GitHub. + + + +

ZEIT UI React

+

Modern and minimalist React UI library.

+ + Visit source code on GitHub. + + + +`} /> + + + + ZEIT UI React + Modern and minimalist React UI library. + + Visit source code on GitHub. + + +`} /> + Card.Props @@ -78,7 +114,15 @@ A common container component. | **hoverable** | add effect on hover | `boolean` | - | `false` | | **shadow** | show shadow | `boolean` | - | `false` | | **type** | card type | [CardType](#cardtype) | - | `default` | -| ... | native props | `HTMLAttributes` | `'className', ...` | - | +| **width** | CSS width value | `string` | - | `100%` | +| ... | native props | `HTMLAttributes` | `'id', className', ...` | - | + +Card.Footer.Props + +| Attribute | Description | Type | Accepted values | Default +| ---------- | ---------- | ---- | -------------- | ------ | +| **disableAutoMargin** | cancel automatic margin value | `boolean` | - | `false` | +| ... | native props | `HTMLAttributes` | `'id', className', ...` | - | CardType diff --git a/pages/zh-cn/components/card.mdx b/pages/zh-cn/components/card.mdx index 0c0a25f..cb84365 100644 --- a/pages/zh-cn/components/card.mdx +++ b/pages/zh-cn/components/card.mdx @@ -1,5 +1,5 @@ import { Layout, Playground, Attributes } from 'lib/components' -import { Card, Row, Col } from 'components' +import { Card, Row, Col, Link, Spacer, Text, Image } from 'components' export const meta = { title: '卡片 Card', @@ -72,6 +72,44 @@ export const meta = { } `} /> + + + +

ZEIT UI React

+

现代化、极简风格的 UI 库。

+ + 在 GitHub 上查看源码 + + + +

ZEIT UI React

+

现代化、极简风格的 UI 库。

+ + 在 GitHub 上查看源码 + + + +`} /> + + + + ZEIT UI React + 现代化、极简风格的 UI 库。 + + 在 GitHub 上查看源码 + + +`} /> + Card.Props @@ -80,7 +118,15 @@ export const meta = { | **hoverable** | 是否在悬停时增加阴影 | `boolean` | - | `false` | | **shadow** | 是否总是显示阴影 | `boolean` | - | `false` | | **type** | 卡片的类型 | [CardType](#cardtype) | - | `default` | -| ... | 原生属性 | `HTMLAttributes` | `'className', ...` | - | +| **width** | CSS 宽度属性 | `string` | - | `100%` | +| ... | 原生属性 | `HTMLAttributes` | `'id', className', ...` | - | + +Card.Footer.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **disableAutoMargin** | 取消自动设置的 Margin 值 | `boolean` | - | `false` | +| ... | 原生属性 | `HTMLAttributes` | `'id', className', ...` | - | CardType