From 47a5ee040df9b9711e16f1a86b4ad59ed939d015 Mon Sep 17 00:00:00 2001 From: TheoryOfNekomata Date: Sat, 7 Nov 2020 23:37:37 +0800 Subject: [PATCH] Improve styling --- .../components/MenuGraphics/MenuGraphics.tsx | 50 ++++++ .../react-common-docs/src/components/Nav.tsx | 22 +-- .../src/components/NavLink/NavLink.tsx | 150 ++++++++++++++++++ .../src/components/Playground.tsx | 37 ++--- .../src/components/Sidebar.tsx | 12 +- .../src/pages/components/TextInput.mdx | 2 +- .../components/TextInput/TextInput.tsx | 2 + 7 files changed, 241 insertions(+), 34 deletions(-) create mode 100644 packages/react-common-docs/src/components/MenuGraphics/MenuGraphics.tsx create mode 100644 packages/react-common-docs/src/components/NavLink/NavLink.tsx diff --git a/packages/react-common-docs/src/components/MenuGraphics/MenuGraphics.tsx b/packages/react-common-docs/src/components/MenuGraphics/MenuGraphics.tsx new file mode 100644 index 0000000..505b4b7 --- /dev/null +++ b/packages/react-common-docs/src/components/MenuGraphics/MenuGraphics.tsx @@ -0,0 +1,50 @@ +import * as React from 'react' +import * as PropTypes from 'prop-types' +import styled from 'styled-components' +import { Icon } from '@tesseract-design/react-common' + +const Image = styled('img')({ + display: 'block', + maxWidth: '100%', + maxHeight: '100%', +}) + +export type MenuGraphicsKind = 'icon' | 'image' + +export const propTypes = { + kind: PropTypes.oneOf(['icon', 'image']).isRequired, + alt: PropTypes.string, + id: PropTypes.string.isRequired, +} + +type Props = PropTypes.InferProps + +const MenuGraphics: React.FC = ({ + kind, + alt, + id, +}) => { + switch (kind) { + case 'icon': + return ( + + ) + case 'image': + return ( + {alt} + ) + default: + break + } + + return null +} + +MenuGraphics.propTypes = propTypes + +export default MenuGraphics diff --git a/packages/react-common-docs/src/components/Nav.tsx b/packages/react-common-docs/src/components/Nav.tsx index db5e171..dc18ba9 100644 --- a/packages/react-common-docs/src/components/Nav.tsx +++ b/packages/react-common-docs/src/components/Nav.tsx @@ -1,6 +1,7 @@ import * as React from 'react' import Link from 'next/link' import styled from 'styled-components' +import NavLink from './NavLink/NavLink' const StyledLink = styled('a')({ display: 'block', @@ -11,8 +12,9 @@ const Container = styled('span')({ display: 'flex', alignItems: 'center', padding: '0 1rem', - height: '2rem', + height: '100%', margin: '0 0 0 auto', + boxSizing: 'border-box', '@media (min-width: 720px)': { maxWidth: 360, }, @@ -66,11 +68,10 @@ const Nav = ({ href={value} passHref > - - - {key} - - + ) } @@ -79,11 +80,10 @@ const Nav = ({ href={data} passHref > - - - {data} - - + ) } diff --git a/packages/react-common-docs/src/components/NavLink/NavLink.tsx b/packages/react-common-docs/src/components/NavLink/NavLink.tsx new file mode 100644 index 0000000..2765106 --- /dev/null +++ b/packages/react-common-docs/src/components/NavLink/NavLink.tsx @@ -0,0 +1,150 @@ +import * as React from 'react' +import * as PropTypes from 'prop-types' +import styled from 'styled-components' +import { Icon } from '@tesseract-design/react-common' +import MenuGraphics, { propTypes as menuGraphicsPropTypes } from '../MenuGraphics/MenuGraphics' + +const Link = styled('a')({ + display: 'block', + height: 'var(--size-link, 4rem)', + textDecoration: 'none', + position: 'relative', + '::before': { + display: 'block', + content: "''", + position: 'absolute', + top: 0, + left: 0, + width: '100%', + height: '100%', + backgroundColor: 'currentColor', + opacity: 0, + zIndex: -1, + }, + '::after': { + display: 'block', + content: "''", + position: 'absolute', + top: 0, + left: 0, + width: '0.25rem', + height: '100%', + backgroundColor: 'currentColor', + opacity: 0, + zIndex: -1, + }, + ':hover::before': { + opacity: 0.25, + }, + ':hover::after': { + opacity: 0.5, + }, +}) + +const LinkText = styled('span')({ + alignSelf: 'center', + display: 'block', + lineHeight: 1.25, + gridColumnStart: 2, + ':first-child': { + gridColumnStart: 1, + }, + ':last-child': { + gridColumnEnd: 4, + }, +}) + +const LinkTitle = styled('strong')({ + display: 'block', +}) + +const LinkSubtitle = styled('span')({ + display: 'block', +}) + +const IndicatorContainer = styled('span')({ + alignSelf: 'center', + lineHeight: 0, +}) + +const MenuGraphicsContainer = styled('span')({ + display: 'block', + padding: '0.5rem', + lineHeight: 0, +}) + +export const basePropTypes = { + as: PropTypes.string, + href: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, + subtitle: PropTypes.string, + graphics: PropTypes.shape(menuGraphicsPropTypes), + indicator: PropTypes.string, +} + +const propTypes = { + ...basePropTypes, + enclosingComponent: PropTypes.elementType, + as: PropTypes.elementType, +} + +type Props = PropTypes.InferProps + +const NavLink = React.forwardRef(( + { + enclosingComponent: EnclosingComponent = React.Fragment, + href, + title, + graphics, + subtitle, + indicator, + onClick, + }, + ref +) => ( + + + { + graphics as object + && ( + + + + ) + } + + + {title} + + { + subtitle as string + && ( + + {subtitle} + + ) + } + + { + indicator as string + && ( + + + + ) + } + + +)) + +NavLink.propTypes = propTypes + +export default NavLink diff --git a/packages/react-common-docs/src/components/Playground.tsx b/packages/react-common-docs/src/components/Playground.tsx index 5a0e6f6..c970ccf 100644 --- a/packages/react-common-docs/src/components/Playground.tsx +++ b/packages/react-common-docs/src/components/Playground.tsx @@ -4,6 +4,7 @@ import { LiveEditor, LivePreview } from 'react-live' +import pascalCase from 'pascal-case' import styled from 'styled-components' const Figure = styled('figure')({ @@ -23,24 +24,24 @@ const Playground = ({ .join('\n') return ( -
-
- { - label - && ( -
- {label} -
- ) - } -
- - - - -
-
-
+
+ { + label + && ( +
+ {label} +
+ ) + } +
+ + + + +
+
) } diff --git a/packages/react-common-docs/src/components/Sidebar.tsx b/packages/react-common-docs/src/components/Sidebar.tsx index a59d7be..013f70c 100644 --- a/packages/react-common-docs/src/components/Sidebar.tsx +++ b/packages/react-common-docs/src/components/Sidebar.tsx @@ -2,7 +2,6 @@ import styled from 'styled-components' import Nav from './Nav' import Link from 'next/link' import * as React from 'react' -import { Checkbox } from '@tesseract-design/react-common' const StyledLink = styled('a')({ display: 'block', @@ -16,6 +15,7 @@ const Container = styled('span')({ padding: '0 1rem', height: '2rem', margin: '0 0 0 auto', + boxSizing: 'border-box', '@media (min-width: 720px)': { maxWidth: 360, }, @@ -41,13 +41,17 @@ const Base = styled('aside')({ }, }) +const NavWrapper = styled('nav')({ + '--size-link': '3rem', +}) + const Sidebar = ({ data, brand: Brand, }) => { const [dark, setDark] = React.useState(false) - const toggleDarkMode = b => () => { + const toggleDarkMode = (b: boolean) => () => { setDark(b) } @@ -74,7 +78,7 @@ const Sidebar = ({ onChange={toggleDarkMode(!dark)} /> - + ) } diff --git a/packages/react-common-docs/src/pages/components/TextInput.mdx b/packages/react-common-docs/src/pages/components/TextInput.mdx index 86887eb..be4ff72 100644 --- a/packages/react-common-docs/src/pages/components/TextInput.mdx +++ b/packages/react-common-docs/src/pages/components/TextInput.mdx @@ -34,7 +34,7 @@ act as guide to the user on how long the expected input values are. components={{ TextInput }} code={`
- I am and I live in . + I am and I live in .
`} /> diff --git a/packages/react-common/components/TextInput/TextInput.tsx b/packages/react-common/components/TextInput/TextInput.tsx index 312a764..f66b6e9 100644 --- a/packages/react-common/components/TextInput/TextInput.tsx +++ b/packages/react-common/components/TextInput/TextInput.tsx @@ -4,6 +4,8 @@ import styled from 'styled-components' import stringify from '../../services/stringify' import { Size, SizeMap } from '../../services/utilities' +// TODO implement web-client text inputs! + const MIN_HEIGHTS: SizeMap = { small: '2.5rem', medium: '3rem',