From f929e8cd87fd0e5fb7a3d9f9f5e4d95991a4fd93 Mon Sep 17 00:00:00 2001 From: Ofek Ashery Date: Fri, 1 May 2020 17:14:53 +0300 Subject: [PATCH 1/5] docs(icons): add icons docs fix(icons): fix icon names in build --- lib/components/displays/icons.tsx | 59 +++++++++++++++++++++++++ lib/data/metadata-en-us.json | 1 - pages/en-us/components/icons.mdx | 72 +++++++++++++++++++++++++++++++ 3 files changed, 131 insertions(+), 1 deletion(-) create mode 100644 lib/components/displays/icons.tsx delete mode 100644 lib/data/metadata-en-us.json create mode 100644 pages/en-us/components/icons.mdx diff --git a/lib/components/displays/icons.tsx b/lib/components/displays/icons.tsx new file mode 100644 index 0000000..81e94a2 --- /dev/null +++ b/lib/components/displays/icons.tsx @@ -0,0 +1,59 @@ +import React from 'react' +import { Card, Input, Text, useInput } from 'components' +import * as Icon from '@zeit-ui/react-icons' + +const Icons: React.FC = () => { + const { state: query, bindings } = useInput('') + const icons = Object.entries(Icon).filter( + ([name]) => !query || name.toLowerCase().includes(query.toLowerCase()) + ) + + return ( + <> +

Icons Gallery

+ + } placeholder="Search" {...bindings} /> +
+ {icons.map(([name, Component]) => ( +
+ + + {name} + +
+ ))} +
+ + + + ) +} + +export default Icons diff --git a/lib/data/metadata-en-us.json b/lib/data/metadata-en-us.json deleted file mode 100644 index 423d56c..0000000 --- a/lib/data/metadata-en-us.json +++ /dev/null @@ -1 +0,0 @@ -[{"name":"guide","children":[{"name":"getting-started","children":[{"name":"introduction","url":"/en-us/guide/introduction","index":5,"group":"getting-started"},{"name":"installation","url":"/en-us/guide/installation","index":10,"group":"getting-started"},{"name":"Server Render","url":"/en-us/guide/server-render","index":15,"group":"getting-started"}]},{"name":"customization","children":[{"name":"Colors","url":"/en-us/guide/colors","index":100,"group":"customization"},{"name":"Themes","url":"/en-us/guide/themes","index":100,"group":"customization"}]}]},{"name":"components","children":[{"name":"General","children":[{"name":"button","url":"/en-us/components/button","index":100,"group":"General"},{"name":"Code","url":"/en-us/components/code","index":100,"group":"General"},{"name":"Spacer","url":"/en-us/components/spacer","index":100,"group":"General"},{"name":"text","url":"/en-us/components/text","index":100,"group":"General"}]},{"name":"layout","children":[{"name":"layout","url":"/en-us/components/layout","index":100,"group":"layout"}]},{"name":"Surfaces","children":[{"name":"card","url":"/en-us/components/card","index":100,"group":"Surfaces"},{"name":"collapse","url":"/en-us/components/collapse","index":100,"group":"Surfaces"},{"name":"fieldset","url":"/en-us/components/fieldset","index":100,"group":"Surfaces"}]},{"name":"Data Entry","children":[{"name":"Auto-Complete","url":"/en-us/components/auto-complete","index":100,"group":"Data Entry"},{"name":"checkbox","url":"/en-us/components/checkbox","index":100,"group":"Data Entry"},{"name":"Input","url":"/en-us/components/input","index":100,"group":"Data Entry"},{"name":"radio","url":"/en-us/components/radio","index":100,"group":"Data Entry"},{"name":"select","url":"/en-us/components/select","index":100,"group":"Data Entry"},{"name":"Slider","url":"/en-us/components/slider","index":100,"group":"Data Entry"},{"name":"textarea","url":"/en-us/components/textarea","index":100,"group":"Data Entry"},{"name":"Toggle","url":"/en-us/components/toggle","index":100,"group":"Data Entry"}]},{"name":"Data Display","children":[{"name":"avatar","url":"/en-us/components/avatar","index":100,"group":"Data Display"},{"name":"Badge","url":"/en-us/components/badge","index":100,"group":"Data Display"},{"name":"Capacity","url":"/en-us/components/capacity","index":100,"group":"Data Display"},{"name":"Description","url":"/en-us/components/description","index":100,"group":"Data Display"},{"name":"Display","url":"/en-us/components/display","index":100,"group":"Data Display"},{"name":"Dot","url":"/en-us/components/dot","index":100,"group":"Data Display"},{"name":"File-Tree","url":"/en-us/components/file-tree","index":100,"group":"Data Display"},{"name":"Image","url":"/en-us/components/image","index":100,"group":"Data Display"},{"name":"keyboard","url":"/en-us/components/keyboard","index":100,"group":"Data Display"},{"name":"Popover","url":"/en-us/components/popover","index":100,"group":"Data Display"},{"name":"Table","url":"/en-us/components/table","index":100,"group":"Data Display"},{"name":"Tag","url":"/en-us/components/tag","index":100,"group":"Data Display"},{"name":"Tooltip","url":"/en-us/components/tooltip","index":100,"group":"Data Display"},{"name":"User","url":"/en-us/components/user","index":100,"group":"Data Display"}]},{"name":"Feedback","children":[{"name":"Loading","url":"/en-us/components/loading","index":100,"group":"Feedback"},{"name":"modal","url":"/en-us/components/modal","index":100,"group":"Feedback"},{"name":"note","url":"/en-us/components/note","index":100,"group":"Feedback"},{"name":"Progress","url":"/en-us/components/progress","index":100,"group":"Feedback"},{"name":"Spinner","url":"/en-us/components/spinner","index":100,"group":"Feedback"},{"name":"toast","url":"/en-us/components/toast","index":100,"group":"Feedback"}]},{"name":"Navigation","children":[{"name":"link","url":"/en-us/components/link","index":100,"group":"Navigation"},{"name":"tabs","url":"/en-us/components/tabs","index":100,"group":"Navigation"},{"name":"button-dropdown","url":"/en-us/components/button-dropdown","index":101,"group":"Navigation"}]},{"name":"Others","children":[{"name":"Divider","url":"/en-us/components/divider","index":100,"group":"Others"},{"name":"Snippet","url":"/en-us/components/snippet","index":100,"group":"Others"}]},{"name":"Utils","children":[{"name":"use-body-scroll","url":"/en-us/components/use-body-scroll","index":100,"group":"Utils"},{"name":"use-click-away","url":"/en-us/components/use-click-away","index":100,"group":"Utils"},{"name":"use-clipboard","url":"/en-us/components/use-clipboard","index":100,"group":"Utils"},{"name":"use-current-state","url":"/en-us/components/use-current-state","index":100,"group":"Utils"}]}]},{"name":"customization","children":[]}] diff --git a/pages/en-us/components/icons.mdx b/pages/en-us/components/icons.mdx new file mode 100644 index 0000000..9de9f1b --- /dev/null +++ b/pages/en-us/components/icons.mdx @@ -0,0 +1,72 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import Title from 'lib/components/playground/title' +import { Spacer } from 'components' +import * as Icon from '@zeit-ui/react-icons' +import Github from '@zeit-ui/react-icons/github' +import IconsGallery from 'lib/components/displays/icons' + +export const meta = { + title: 'Icons', + group: 'General', +} + +## Icons + +Display semantic vector graphics in SVG format. + + + +``` +// with yarn +yarn add @zeit-ui/react-icons + +// with npm +npm install @zeit-ui/react-icons +``` + +<Playground + title="Import" + scope={{ Icon, Github }} + code={` +// import * as Icon from '@zeit-ui/react-icons' +// or +// import { Github } from '@zeit-ui/react-icons' +// or, for tree-shaking: +// import Github from '@zeit-ui/react-icons/github' + +<> + <Icon.Github /> + <Github /> +</> +`} /> + +<Playground + title="Color" + scope={{ Github }} + code={` +<Github color="red" /> +`} +/> + +<Playground + title="Size" + scope={{ Github }} + code={` +<Github size={36} /> +`} +/> + +<IconsGallery /> + +<Attributes edit="/pages/en-us/components/icons.mdx"> +<Attributes.Title>Icon.Props</Attributes.Title> + +| Attribute | Description | Type | Accepted values | Default | +| --------- | ------------ | --------------- | -------------------------------- | ------- | +| **color** | Icon color | `string` | - | - | +| **size** | Icon size | `number` | - | - | +| ... | Native props | `SVGAttributes` | `'id', 'name', 'className', ...` | - | + +</Attributes> + +export default ({ children }) => <Layout meta={meta}>{children}</Layout> From b37c98e4deaf17d7e8f0f18293e5b19d2c37976f Mon Sep 17 00:00:00 2001 From: Ofek Ashery <ofek.ashery@gmail.com> Date: Fri, 1 May 2020 19:19:54 +0300 Subject: [PATCH 2/5] docs(icons): use tabs for installing script --- lib/components/displays/icons.tsx | 8 +++++++- pages/en-us/components/icons.mdx | 23 +++++++++++++---------- 2 files changed, 20 insertions(+), 11 deletions(-) diff --git a/lib/components/displays/icons.tsx b/lib/components/displays/icons.tsx index 81e94a2..680472c 100644 --- a/lib/components/displays/icons.tsx +++ b/lib/components/displays/icons.tsx @@ -1,8 +1,9 @@ import React from 'react' -import { Card, Input, Text, useInput } from 'components' +import { Card, Input, Text, useInput, useTheme } from 'components' import * as Icon from '@zeit-ui/react-icons' const Icons: React.FC = () => { + const theme = useTheme() const { state: query, bindings } = useInput('') const icons = Object.entries(Icon).filter( ([name]) => !query || name.toLowerCase().includes(query.toLowerCase()) @@ -51,6 +52,11 @@ const Icons: React.FC = () => { min-width: 0px; height: 100px; } + @media only screen and (max-width: ${theme.layout.breakpointMobile}) { + .icon-item { + flex-basis: 33%; + } + } `}</style> </> ) diff --git a/pages/en-us/components/icons.mdx b/pages/en-us/components/icons.mdx index 9de9f1b..943136b 100644 --- a/pages/en-us/components/icons.mdx +++ b/pages/en-us/components/icons.mdx @@ -1,6 +1,6 @@ import { Layout, Playground, Attributes } from 'lib/components' import Title from 'lib/components/playground/title' -import { Spacer } from 'components' +import { Spacer, Tabs, Snippet } from 'components' import * as Icon from '@zeit-ui/react-icons' import Github from '@zeit-ui/react-icons/github' import IconsGallery from 'lib/components/displays/icons' @@ -15,18 +15,20 @@ export const meta = { Display semantic vector graphics in SVG format. <Title title="Installation" desc="Install the package in your project directory." /> - -``` -// with yarn -yarn add @zeit-ui/react-icons - -// with npm -npm install @zeit-ui/react-icons -``` +<Tabs initialValue="yarn"> + <Tabs.Item label="Yarn" value="yarn"> + <Spacer y={0.6} /> + <Snippet width="400px">yarn add @zeit-ui/react-icons</Snippet> + </Tabs.Item> + <Tabs.Item label="npm" value="npm"> + <Spacer y={0.6} /> + <Snippet width="400px">npm i @zeit-ui/react-icons</Snippet> + </Tabs.Item> +</Tabs> <Playground title="Import" - scope={{ Icon, Github }} + scope={{ Icon, Github, Spacer }} code={` // import * as Icon from '@zeit-ui/react-icons' // or @@ -36,6 +38,7 @@ npm install @zeit-ui/react-icons <> <Icon.Github /> + <Spacer x={1} inline /> <Github /> </> `} /> From a3bcfa33ef742d623e537f99f754c7b7163d9d66 Mon Sep 17 00:00:00 2001 From: unix <unix.bio@gmail.com> Date: Sat, 2 May 2020 23:33:05 +0800 Subject: [PATCH 3/5] fix(card): reset only recent element styles docs: update icons styles --- .../__snapshots__/footer.test.tsx.snap | 16 +- .../__snapshots__/index.test.tsx.snap | 1440 +++++++++++------ components/card/card-content.tsx | 8 + components/card/card.tsx | 8 - lib/components/displays/icons.tsx | 35 +- lib/components/icons/logo.tsx | 8 +- lib/data/metadata-en-us.json | 1 + pages/en-us/components/icons.mdx | 13 +- 8 files changed, 1018 insertions(+), 511 deletions(-) create mode 100644 lib/data/metadata-en-us.json diff --git a/components/card/__tests__/__snapshots__/footer.test.tsx.snap b/components/card/__tests__/__snapshots__/footer.test.tsx.snap index 7890e02..0adf8ed 100644 --- a/components/card/__tests__/__snapshots__/footer.test.tsx.snap +++ b/components/card/__tests__/__snapshots__/footer.test.tsx.snap @@ -6,6 +6,14 @@ exports[`Card Footer should render correctly 1`] = ` width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } </style></div><footer class=\\"auto-margin \\">footer<style> footer { padding: 8pt 16pt; @@ -45,14 +53,6 @@ exports[`Card Footer should render correctly 1`] = ` box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } diff --git a/components/card/__tests__/__snapshots__/index.test.tsx.snap b/components/card/__tests__/__snapshots__/index.test.tsx.snap index 23d5e42..8c1840e 100644 --- a/components/card/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/card/__tests__/__snapshots__/index.test.tsx.snap @@ -43,6 +43,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -72,6 +80,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -120,14 +136,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -185,14 +193,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -228,6 +228,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -257,6 +265,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -309,6 +325,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -344,6 +368,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -376,6 +408,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -405,6 +445,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -453,14 +501,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -518,14 +558,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -561,6 +593,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -590,6 +630,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -674,14 +722,6 @@ initialize { 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%; } @@ -739,14 +779,6 @@ initialize { 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%; } @@ -792,6 +824,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -821,6 +861,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -869,14 +917,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -934,14 +974,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -977,6 +1009,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -1006,6 +1046,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -1058,6 +1106,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -1093,6 +1149,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -1125,6 +1189,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -1154,6 +1226,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -1202,14 +1282,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -1267,14 +1339,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -1310,6 +1374,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -1339,6 +1411,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -1427,6 +1507,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -1462,6 +1550,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -1504,6 +1600,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -1533,6 +1637,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -1581,14 +1693,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -1646,14 +1750,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -1689,6 +1785,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -1718,6 +1822,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -1770,6 +1882,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -1805,6 +1925,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -1837,6 +1965,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -1866,6 +2002,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -1914,14 +2058,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -1979,14 +2115,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -2022,6 +2150,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -2051,6 +2187,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -2135,14 +2279,6 @@ initialize { 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%; } @@ -2200,14 +2336,6 @@ initialize { 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%; } @@ -2253,6 +2381,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -2282,6 +2418,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -2330,14 +2474,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -2395,14 +2531,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -2438,6 +2566,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -2467,6 +2603,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -2519,6 +2663,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -2554,6 +2706,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -2586,6 +2746,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -2615,6 +2783,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -2663,14 +2839,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -2728,14 +2896,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -2771,6 +2931,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -2800,6 +2968,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -2920,14 +3096,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -2985,14 +3153,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -3048,6 +3208,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -3077,6 +3245,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -3125,14 +3301,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -3190,14 +3358,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -3233,6 +3393,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -3262,6 +3430,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -3314,6 +3490,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -3349,6 +3533,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -3381,6 +3573,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -3410,6 +3610,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -3458,14 +3666,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -3523,14 +3723,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -3566,6 +3758,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -3595,6 +3795,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -3679,14 +3887,6 @@ initialize { 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%; } @@ -3744,14 +3944,6 @@ initialize { 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%; } @@ -3797,6 +3989,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -3826,6 +4026,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -3874,14 +4082,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -3939,14 +4139,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -3982,6 +4174,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -4011,6 +4211,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -4063,6 +4271,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -4098,6 +4314,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -4130,6 +4354,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -4159,6 +4391,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -4207,14 +4447,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -4272,14 +4504,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -4315,6 +4539,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -4344,6 +4576,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -4432,6 +4672,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -4467,6 +4715,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -4509,6 +4765,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -4538,6 +4802,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -4586,14 +4858,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -4651,14 +4915,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -4694,6 +4950,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -4723,6 +4987,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -4775,6 +5047,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -4810,6 +5090,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -4842,6 +5130,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -4871,6 +5167,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -4919,14 +5223,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -4984,14 +5280,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -5027,6 +5315,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -5056,6 +5352,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -5140,14 +5444,6 @@ initialize { 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%; } @@ -5205,14 +5501,6 @@ initialize { 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%; } @@ -5258,6 +5546,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -5287,6 +5583,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -5335,14 +5639,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -5400,14 +5696,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -5443,6 +5731,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -5472,6 +5768,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -5524,6 +5828,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -5559,6 +5871,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -5591,6 +5911,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -5620,6 +5948,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -5668,14 +6004,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -5733,14 +6061,6 @@ initialize { box-shadow: none; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } @@ -5776,6 +6096,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -5805,6 +6133,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -5982,6 +6318,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -6011,6 +6355,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -6059,14 +6411,6 @@ initialize { box-shadow: 0 5px 10px 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%; } @@ -6124,14 +6468,6 @@ initialize { box-shadow: 0 5px 10px 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%; } @@ -6167,6 +6503,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -6196,6 +6540,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -6260,6 +6612,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -6289,6 +6649,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -6337,14 +6705,6 @@ initialize { 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%; } @@ -6402,14 +6762,6 @@ initialize { 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%; } @@ -6445,6 +6797,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -6474,6 +6834,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -6538,6 +6906,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -6567,6 +6943,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -6615,14 +6999,6 @@ initialize { 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%; } @@ -6680,14 +7056,6 @@ initialize { 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%; } @@ -6723,6 +7091,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -6752,6 +7128,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -6847,6 +7231,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -6876,6 +7268,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -6924,14 +7324,6 @@ initialize { 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%; } @@ -6989,14 +7381,6 @@ initialize { 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%; } @@ -7032,6 +7416,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -7061,6 +7453,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -7125,6 +7525,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -7154,6 +7562,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -7202,14 +7618,6 @@ initialize { 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%; } @@ -7267,14 +7675,6 @@ initialize { 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%; } @@ -7310,6 +7710,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -7339,6 +7747,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -7415,6 +7831,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -7444,6 +7868,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -7492,14 +7924,6 @@ initialize { box-shadow: 0 5px 10px 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%; } @@ -7557,14 +7981,6 @@ initialize { box-shadow: 0 5px 10px 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%; } @@ -7600,6 +8016,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -7629,6 +8053,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -7712,6 +8144,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -7741,6 +8181,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -7789,14 +8237,6 @@ initialize { 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%; } @@ -7854,14 +8294,6 @@ initialize { 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%; } @@ -7897,6 +8329,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -7926,6 +8366,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -7992,6 +8440,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -8021,6 +8477,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -8069,14 +8533,6 @@ initialize { 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%; } @@ -8134,14 +8590,6 @@ initialize { 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%; } @@ -8177,6 +8625,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -8206,6 +8662,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -8272,6 +8736,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -8301,6 +8773,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -8349,14 +8829,6 @@ initialize { box-shadow: 0 5px 10px 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%; } @@ -8414,14 +8886,6 @@ initialize { box-shadow: 0 5px 10px 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%; } @@ -8457,6 +8921,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], @@ -8486,6 +8958,14 @@ initialize { width: 100%; padding: 16pt 16pt; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } ", "next": null, "parent": [Circular], diff --git a/components/card/card-content.tsx b/components/card/card-content.tsx index 805b184..cea60e1 100644 --- a/components/card/card-content.tsx +++ b/components/card/card-content.tsx @@ -26,6 +26,14 @@ const CardContent: React.FC<React.PropsWithChildren<CardContentProps>> = ({ width: 100%; padding: ${theme.layout.gap} ${theme.layout.gap}; } + + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; + } `}</style> </div> ) diff --git a/components/card/card.tsx b/components/card/card.tsx index f17682e..ffeb4bf 100644 --- a/components/card/card.tsx +++ b/components/card/card.tsx @@ -69,14 +69,6 @@ const Card: React.FC<React.PropsWithChildren<CardProps>> = ({ box-shadow: ${hoverShadow}; } - .card :global(*:first-child) { - margin-top: 0; - } - - .card :global(*:last-child) { - margin-bottom: 0; - } - .card :global(img) { width: 100%; } diff --git a/lib/components/displays/icons.tsx b/lib/components/displays/icons.tsx index 680472c..b64f635 100644 --- a/lib/components/displays/icons.tsx +++ b/lib/components/displays/icons.tsx @@ -8,6 +8,9 @@ const Icons: React.FC = () => { const icons = Object.entries(Icon).filter( ([name]) => !query || name.toLowerCase().includes(query.toLowerCase()) ) + const clickHandler = (name: string) => { + console.log(name) + } return ( <> @@ -16,11 +19,9 @@ const Icons: React.FC = () => { <Input width="100%" icon={<Icon.Search />} placeholder="Search" {...bindings} /> <div className="icons-grid"> {icons.map(([name, Component]) => ( - <div className="icon-item" key={name}> + <div className="icon-item" key={name} onClick={() => clickHandler(name)}> <Component /> - <Text type="secondary" small> - {name} - </Text> + <Text type="secondary" small>{name}</Text> </div> ))} </div> @@ -40,6 +41,7 @@ const Icons: React.FC = () => { display: flex; flex-wrap: wrap; margin-top: 8pt; + justify-content: space-around; } .icon-item { @@ -48,13 +50,32 @@ const Icons: React.FC = () => { align-items: center; justify-content: space-evenly; flex-grow: 0; - flex-basis: 25%; + flex-basis: 125px; min-width: 0px; - height: 100px; + height: 95px; + margin: 12px 5px; + border-radius: ${theme.layout.radius}; + box-sizing: border-box; + cursor: pointer; + user-select: none; + transition: all 150ms ease-in-out; } + + .icon-item > :global(small) { + display: inline-block; + width: 90%; + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + } + + .icon-item:hover { + box-shadow: ${theme.expressiveness.shadowMedium}; + } + @media only screen and (max-width: ${theme.layout.breakpointMobile}) { .icon-item { - flex-basis: 33%; + flex-basis: 30%; } } `}</style> diff --git a/lib/components/icons/logo.tsx b/lib/components/icons/logo.tsx index 9df4a13..d4c4e70 100644 --- a/lib/components/icons/logo.tsx +++ b/lib/components/icons/logo.tsx @@ -1,9 +1,7 @@ import React from 'react' import { useTheme } from 'components/index' - - -export const LogoIcon: React.FC<React.SVGAttributes<any>> = React.memo(({ ...props }) => { +export const LogoIcon: React.FC<React.SVGAttributes<any>> = ({ ...props }) => { const theme = useTheme() return ( <svg width="25" viewBox="0 0 114 100" fill="none" {...props}> @@ -25,6 +23,6 @@ export const LogoIcon: React.FC<React.SVGAttributes<any>> = React.memo(({ ...pro `}</style> </svg> ) -}) +} -export default LogoIcon +export default React.memo(LogoIcon) diff --git a/lib/data/metadata-en-us.json b/lib/data/metadata-en-us.json new file mode 100644 index 0000000..c87c1e1 --- /dev/null +++ b/lib/data/metadata-en-us.json @@ -0,0 +1 @@ +[{"name":"guide","children":[{"name":"getting-started","children":[{"name":"introduction","url":"/en-us/guide/introduction","index":5,"group":"getting-started"},{"name":"installation","url":"/en-us/guide/installation","index":10,"group":"getting-started"},{"name":"Server Render","url":"/en-us/guide/server-render","index":15,"group":"getting-started"}]},{"name":"customization","children":[{"name":"Colors","url":"/en-us/guide/colors","index":100,"group":"customization"},{"name":"Themes","url":"/en-us/guide/themes","index":100,"group":"customization"}]}]},{"name":"components","children":[{"name":"General","children":[{"name":"button","url":"/en-us/components/button","index":100,"group":"General"},{"name":"Code","url":"/en-us/components/code","index":100,"group":"General"},{"name":"Icons","url":"/en-us/components/icons","index":100,"group":"General"},{"name":"Spacer","url":"/en-us/components/spacer","index":100,"group":"General"},{"name":"text","url":"/en-us/components/text","index":100,"group":"General"}]},{"name":"layout","children":[{"name":"layout","url":"/en-us/components/layout","index":100,"group":"layout"}]},{"name":"Surfaces","children":[{"name":"card","url":"/en-us/components/card","index":100,"group":"Surfaces"},{"name":"collapse","url":"/en-us/components/collapse","index":100,"group":"Surfaces"},{"name":"fieldset","url":"/en-us/components/fieldset","index":100,"group":"Surfaces"}]},{"name":"Data Entry","children":[{"name":"Auto-Complete","url":"/en-us/components/auto-complete","index":100,"group":"Data Entry"},{"name":"checkbox","url":"/en-us/components/checkbox","index":100,"group":"Data Entry"},{"name":"Input","url":"/en-us/components/input","index":100,"group":"Data Entry"},{"name":"radio","url":"/en-us/components/radio","index":100,"group":"Data Entry"},{"name":"select","url":"/en-us/components/select","index":100,"group":"Data Entry"},{"name":"Slider","url":"/en-us/components/slider","index":100,"group":"Data Entry"},{"name":"textarea","url":"/en-us/components/textarea","index":100,"group":"Data Entry"},{"name":"Toggle","url":"/en-us/components/toggle","index":100,"group":"Data Entry"}]},{"name":"Data Display","children":[{"name":"avatar","url":"/en-us/components/avatar","index":100,"group":"Data Display"},{"name":"Badge","url":"/en-us/components/badge","index":100,"group":"Data Display"},{"name":"Capacity","url":"/en-us/components/capacity","index":100,"group":"Data Display"},{"name":"Description","url":"/en-us/components/description","index":100,"group":"Data Display"},{"name":"Display","url":"/en-us/components/display","index":100,"group":"Data Display"},{"name":"Dot","url":"/en-us/components/dot","index":100,"group":"Data Display"},{"name":"File-Tree","url":"/en-us/components/file-tree","index":100,"group":"Data Display"},{"name":"Image","url":"/en-us/components/image","index":100,"group":"Data Display"},{"name":"keyboard","url":"/en-us/components/keyboard","index":100,"group":"Data Display"},{"name":"Popover","url":"/en-us/components/popover","index":100,"group":"Data Display"},{"name":"Table","url":"/en-us/components/table","index":100,"group":"Data Display"},{"name":"Tag","url":"/en-us/components/tag","index":100,"group":"Data Display"},{"name":"Tooltip","url":"/en-us/components/tooltip","index":100,"group":"Data Display"},{"name":"User","url":"/en-us/components/user","index":100,"group":"Data Display"}]},{"name":"Feedback","children":[{"name":"Loading","url":"/en-us/components/loading","index":100,"group":"Feedback"},{"name":"modal","url":"/en-us/components/modal","index":100,"group":"Feedback"},{"name":"note","url":"/en-us/components/note","index":100,"group":"Feedback"},{"name":"Progress","url":"/en-us/components/progress","index":100,"group":"Feedback"},{"name":"Spinner","url":"/en-us/components/spinner","index":100,"group":"Feedback"},{"name":"toast","url":"/en-us/components/toast","index":100,"group":"Feedback"}]},{"name":"Navigation","children":[{"name":"link","url":"/en-us/components/link","index":100,"group":"Navigation"},{"name":"tabs","url":"/en-us/components/tabs","index":100,"group":"Navigation"},{"name":"button-dropdown","url":"/en-us/components/button-dropdown","index":101,"group":"Navigation"}]},{"name":"Others","children":[{"name":"Divider","url":"/en-us/components/divider","index":100,"group":"Others"},{"name":"Snippet","url":"/en-us/components/snippet","index":100,"group":"Others"}]},{"name":"Utils","children":[{"name":"use-body-scroll","url":"/en-us/components/use-body-scroll","index":100,"group":"Utils"},{"name":"use-click-away","url":"/en-us/components/use-click-away","index":100,"group":"Utils"},{"name":"use-clipboard","url":"/en-us/components/use-clipboard","index":100,"group":"Utils"},{"name":"use-current-state","url":"/en-us/components/use-current-state","index":100,"group":"Utils"}]}]},{"name":"customization","children":[]}] diff --git a/pages/en-us/components/icons.mdx b/pages/en-us/components/icons.mdx index 943136b..b30bff3 100644 --- a/pages/en-us/components/icons.mdx +++ b/pages/en-us/components/icons.mdx @@ -52,10 +52,17 @@ Display semantic vector graphics in SVG format. /> <Playground - title="Size" - scope={{ Github }} + title="Sizes" + scope={{ Github, Spacer }} code={` -<Github size={36} /> +<> + <Github size={16} /> <Spacer inline x={.35} /> + <Github size={20} /> <Spacer inline x={.35} /> + <Github size={24} /> <Spacer inline x={.35} /> + <Github size={28} /> <Spacer inline x={.35} /> + <Github size={32} /> <Spacer inline x={.35} /> + <Github size={36} /> +</> `} /> From ed8d36897d3a39174966b281d1d738516ce17a94 Mon Sep 17 00:00:00 2001 From: unix <unix.bio@gmail.com> Date: Sun, 3 May 2020 00:07:00 +0800 Subject: [PATCH 4/5] fix(modal): reset only recent element styles --- .../modal/__tests__/__snapshots__/index.test.tsx.snap | 8 ++++++-- components/modal/modal-content.tsx | 8 ++++++-- lib/components/displays/icons-cell.tsx | 0 3 files changed, 12 insertions(+), 4 deletions(-) create mode 100644 lib/components/displays/icons-cell.tsx diff --git a/components/modal/__tests__/__snapshots__/index.test.tsx.snap b/components/modal/__tests__/__snapshots__/index.test.tsx.snap index bdcb41c..caf69b0 100644 --- a/components/modal/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/modal/__tests__/__snapshots__/index.test.tsx.snap @@ -35,8 +35,12 @@ exports[`Modal should render correctly 1`] = ` padding: 16pt 0 8pt 0; } - .content :global(p) { - margin: 0; + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; } </style><div></div><footer><button class=\\"\\">Cancel</button><style> button { diff --git a/components/modal/modal-content.tsx b/components/modal/modal-content.tsx index 3947261..53a0c2d 100644 --- a/components/modal/modal-content.tsx +++ b/components/modal/modal-content.tsx @@ -27,8 +27,12 @@ const ModalContent: React.FC<ModalContentProps> = ({ padding: ${theme.layout.gap} 0 ${theme.layout.gapHalf} 0; } - .content :global(p) { - margin: 0; + .content > :global(*:first-child) { + margin-top: 0; + } + + .content > :global(*:last-child) { + margin-bottom: 0; } `}</style> </> diff --git a/lib/components/displays/icons-cell.tsx b/lib/components/displays/icons-cell.tsx new file mode 100644 index 0000000..e69de29 From 9b8b046015990e619ebaa8d954b15802d5bb8128 Mon Sep 17 00:00:00 2001 From: unix <unix.bio@gmail.com> Date: Sun, 3 May 2020 00:12:57 +0800 Subject: [PATCH 5/5] docs: copy import string when cell clicked --- lib/components/displays/icons-cell.tsx | 71 +++++++++++++++++++++++ lib/components/displays/icons.tsx | 79 +++++++++++--------------- 2 files changed, 105 insertions(+), 45 deletions(-) diff --git a/lib/components/displays/icons-cell.tsx b/lib/components/displays/icons-cell.tsx index e69de29..3e8b46d 100644 --- a/lib/components/displays/icons-cell.tsx +++ b/lib/components/displays/icons-cell.tsx @@ -0,0 +1,71 @@ +import React from 'react' +import { Text, useTheme } from 'components' + +export const getFileName = (name: string): string => { + return name.replace(/^(.)/, g => g.toLowerCase()) +} + +export const getImportString = (name: string) => { + const fileName = getFileName(name) + const single = `import ${name} from '@zeit-ui/react-icons/${fileName}'` + const normal = `import { ${name} } from '@zeit-ui/react-icons'` + return { + single, normal, + } +} + +interface Props { + component: React.ComponentType<any> + name: string + onClick: (name: string) => void +} + +const IconsCell: React.FC<Props> = ({ + component: Component, name, onClick +}) => { + const theme = useTheme() + return ( + <div className="icon-item" key={name} onClick={() => onClick(name)}> + <Component /> + <Text type="secondary" small>{name}</Text> + <style jsx>{` + .icon-item { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + flex-grow: 0; + flex-basis: 125px; + min-width: 0px; + height: 95px; + margin: 12px 5px; + border-radius: ${theme.layout.radius}; + box-sizing: border-box; + cursor: pointer; + user-select: none; + transition: all 150ms ease-in-out; + } + + .icon-item > :global(small) { + display: inline-block; + width: 90%; + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + } + + .icon-item:hover { + box-shadow: ${theme.expressiveness.shadowMedium}; + } + + @media only screen and (max-width: ${theme.layout.breakpointMobile}) { + .icon-item { + flex-basis: 30%; + } + } + `}</style> + </div> + ) +} + +export default React.memo(IconsCell) diff --git a/lib/components/displays/icons.tsx b/lib/components/displays/icons.tsx index b64f635..e5fc087 100644 --- a/lib/components/displays/icons.tsx +++ b/lib/components/displays/icons.tsx @@ -1,15 +1,32 @@ -import React from 'react' -import { Card, Input, Text, useInput, useTheme } from 'components' +import React, { useState } from 'react' +import { Card, Input, useInput, Modal, useModal, Snippet } from 'components' import * as Icon from '@zeit-ui/react-icons' +import IconsCell, { getImportString } from './icons-cell' + +const ImportSnippet: React.FC<React.PropsWithChildren<{}>> = ({ children }) => { + return ( + <Snippet> + {children} + <style jsx>{` + :global(pre:before) { + display: none; + } + `}</style> + </Snippet> + ) +} const Icons: React.FC = () => { - const theme = useTheme() + const { setVisible, bindings: modalBindings } = useModal() const { state: query, bindings } = useInput('') + const [importStr, setImportStr] = useState({ title: '', single: '', normal: '' }) const icons = Object.entries(Icon).filter( ([name]) => !query || name.toLowerCase().includes(query.toLowerCase()) ) - const clickHandler = (name: string) => { - console.log(name) + const onCellClick = (name: string) => { + const { single, normal } = getImportString(name) + setImportStr({ title: name, single, normal }) + setVisible(true) } return ( @@ -18,13 +35,20 @@ const Icons: React.FC = () => { <Card> <Input width="100%" icon={<Icon.Search />} placeholder="Search" {...bindings} /> <div className="icons-grid"> - {icons.map(([name, Component]) => ( - <div className="icon-item" key={name} onClick={() => clickHandler(name)}> - <Component /> - <Text type="secondary" small>{name}</Text> - </div> + {icons.map(([name, component], index) => ( + <IconsCell name={name} component={component} key={`${name}-${index}`} + onClick={onCellClick} /> ))} </div> + <Modal {...modalBindings}> + <Modal.Title>{importStr.title}</Modal.Title> + <Modal.Content> + <p>Import:</p> + <ImportSnippet>{importStr.normal}</ImportSnippet> + <p>Import single component:</p> + <ImportSnippet>{importStr.single}</ImportSnippet> + </Modal.Content> + </Modal> </Card> <style jsx>{` .title { @@ -43,41 +67,6 @@ const Icons: React.FC = () => { margin-top: 8pt; justify-content: space-around; } - - .icon-item { - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-evenly; - flex-grow: 0; - flex-basis: 125px; - min-width: 0px; - height: 95px; - margin: 12px 5px; - border-radius: ${theme.layout.radius}; - box-sizing: border-box; - cursor: pointer; - user-select: none; - transition: all 150ms ease-in-out; - } - - .icon-item > :global(small) { - display: inline-block; - width: 90%; - text-align: center; - overflow: hidden; - text-overflow: ellipsis; - } - - .icon-item:hover { - box-shadow: ${theme.expressiveness.shadowMedium}; - } - - @media only screen and (max-width: ${theme.layout.breakpointMobile}) { - .icon-item { - flex-basis: 30%; - } - } `}</style> </> )