diff --git a/packages/ui-toolkit/src/index.js b/packages/ui-toolkit/src/index.js index d6249603..596c5f1c 100644 --- a/packages/ui-toolkit/src/index.js +++ b/packages/ui-toolkit/src/index.js @@ -5,7 +5,6 @@ export { default as Button } from './button'; export { default as Breadcrumb, Item as BreadcrumbItem } from './breadcrumb'; export { default as calc } from './calc'; export { default as Label } from './label'; -export { Ul, Li } from './list'; export { default as paperEffect } from './paper-effect'; export { H1, H2, H3 } from './text/headings'; export { default as P } from './text/p'; @@ -78,3 +77,11 @@ export { Brand as HeaderBrand, Item as HeaderItem } from './header'; + +export { + default as SectionList, + Item as SectionListItem, + Anchor as SectionListAnchor, + Link as SectionListLink, + NavLink as SectionListNavLink +} from './section-list'; diff --git a/packages/ui-toolkit/src/list/index.js b/packages/ui-toolkit/src/list/index.js deleted file mode 100644 index 2ae57134..00000000 --- a/packages/ui-toolkit/src/list/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { default as Ul } from './ul'; -export { default as Li } from './li'; diff --git a/packages/ui-toolkit/src/list/li.js b/packages/ui-toolkit/src/list/li.js deleted file mode 100644 index cd8471e2..00000000 --- a/packages/ui-toolkit/src/list/li.js +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; -import remcalc from 'remcalc'; -import Baseline from '../baseline'; - -const StyledLi = styled.li` - display: inline-block; - - & + & { - margin-left: ${remcalc(24)}; - } - - & a { - color: ${props => props.theme.text}; - text-decoration: none; - padding-bottom: ${remcalc(6)}; - - &.active { - cursor: default; - color: ${props => props.theme.primary}; - border-bottom: ${remcalc(2)} solid ${props => props.theme.primary}; - } - } -`; - -/** - * @example ./usage.md - */ -const Li = ({ children, ...rest }) => - - {children} - ; - -export default Baseline(Li); diff --git a/packages/ui-toolkit/src/list/ul.js b/packages/ui-toolkit/src/list/ul.js deleted file mode 100644 index fe90c0f7..00000000 --- a/packages/ui-toolkit/src/list/ul.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; -import remcalc from 'remcalc'; -import Baseline from '../baseline'; -import typography from '../typography'; - -const StyledUl = styled.ul` - ${typography.fontFamily}; - ${typography.semibold}; - - list-style-type: none; - margin-bottom: ${remcalc(33)}; -`; - -/** - * @example ./usage.md - */ -const Ul = ({ children, ...rest }) => - - {children} - ; - -export default Baseline(Ul); diff --git a/packages/ui-toolkit/src/list/usage.md b/packages/ui-toolkit/src/list/usage.md deleted file mode 100644 index b081b339..00000000 --- a/packages/ui-toolkit/src/list/usage.md +++ /dev/null @@ -1,28 +0,0 @@ -``` -const Ul = require('./ul').default; -const Li = require('./li').default; - - -``` diff --git a/packages/ui-toolkit/src/section-list/index.js b/packages/ui-toolkit/src/section-list/index.js new file mode 100644 index 00000000..2a3227e8 --- /dev/null +++ b/packages/ui-toolkit/src/section-list/index.js @@ -0,0 +1,22 @@ +import React from 'react'; +import styled from 'styled-components'; + +import Baseline from '../baseline'; + +const UnorderedList = styled.ul` + list-style-type: none; + padding: 0; + margin: 0; +`; + +/** + * @example ./usage.md + */ +const SectionList = ({ children, ...rest }) => + + {children} + ; + +export default Baseline(SectionList); + +export { default as Item, Anchor, Link, NavLink } from './item'; diff --git a/packages/ui-toolkit/src/section-list/item.js b/packages/ui-toolkit/src/section-list/item.js new file mode 100644 index 00000000..de41fdb6 --- /dev/null +++ b/packages/ui-toolkit/src/section-list/item.js @@ -0,0 +1,51 @@ +import React from 'react'; +import styled, { css } from 'styled-components'; +import { A } from 'normalized-styled-components'; +import { NavLink as RRNavLink, Link as RRLink } from 'react-router-dom'; +import remcalc from 'remcalc'; + +import Baseline from '../baseline'; +import typography from '../typography'; + +const Li = styled.li` + ${typography.fontFamily}; + ${typography.normal}; + + display: inline-block; + font-size: ${remcalc(15)}; + line-height: 1.6; + margin-right: ${remcalc(23)}; +`; + +const Item = ({ children, ...rest }) => +
  • + {children} +
    • ; + +export default Baseline(Item); + +const style = css` + ${typography.fontFamily}; + ${typography.normal}; + + color: ${props => props.theme.secondary}; + text-decoration: none; + cursor: pointer; + + &.active { + color: ${props => props.theme.primary}; + cursor: default; + } +`; + +export const Anchor = Baseline(A.extend` + ${style}; +`); + +export const NavLink = Baseline(styled(RRNavLink)` + ${style}; +`); + +export const Link = Baseline(styled(RRLink)` + ${style}; +`); diff --git a/packages/ui-toolkit/src/section-list/usage.md b/packages/ui-toolkit/src/section-list/usage.md new file mode 100644 index 00000000..46870544 --- /dev/null +++ b/packages/ui-toolkit/src/section-list/usage.md @@ -0,0 +1,37 @@ +``` +const Item = require('./item').default; +const Link = require('./link').default; + + + + + Overview + + + + + Services + + + + + Instances + + + + + Versions + + + + + Manifest + + + + + Settings + + + +``` diff --git a/packages/ui-toolkit/styleguide.config.js b/packages/ui-toolkit/styleguide.config.js index 96981a90..40c616e3 100644 --- a/packages/ui-toolkit/styleguide.config.js +++ b/packages/ui-toolkit/styleguide.config.js @@ -64,8 +64,7 @@ module.exports = { 'src/form/select.js', 'src/form/toggle.js', 'src/header/index.js', - 'src/list/ul.js', - 'src/list/li.js', + 'src/section-list/index.js', 'src/topology/index.js', 'src/tooltip/tooltip.js', 'src/close-button/index.js',