[WIP] Breadcrumb

.storybook/themes/index.js

@@ -7,7 +7,8 @@ const space    = [0, 4, 8, 16, 32].map(value => `${value}px`)
       space.l  = space[3]
       space.xl = space[4]
 
-const lineHeights         = [0.25, 1, 1.25, 1.75]
+const lineHeights         = [0.25, 1, 1.25, 1.75, 2]
+      lineHeights.header  = lineHeights[4]
       lineHeights.heading = lineHeights[2]
       lineHeights.body    = lineHeights[3]
 

.storybook/themes/rg6-theme.js

@@ -13,4 +13,5 @@ export const colors = {
 
 export const shadows = {
   m: '0 4px 16px rgba(0,0,0,.175)',
+  toolbar: '0 4px 4px 0px rgba(0, 0, 0, .175)',
 }

src/Atoms/Button/Button.jsx

@@ -3,6 +3,7 @@ import css from '@styled-system/css'
 import Input from '../Input'
 
 const Button = styled(Input)`
+  cursor: pointer;
   &:hover {
     ${css({ bg: 'midgray', borderColor: 'lightgray' })};
   }

src/Atoms/Select/Select.jsx

@@ -1,7 +1,12 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
 import {
-  space, typography, border, color, shadow,
+  space,
+  typography,
+  border,
+  color,
+  shadow,
+  position,
 } from 'styled-system'
 
 import { useOnClickOutside } from '../../hooks'
@@ -14,11 +19,11 @@ const Container = styled(Button)`
 
 const Options = styled.div`
   ${({ openOnTop }) => openOnTop ? 'bottom: 100%;' : 'top: 100%;'}
+  ${({ stickToLeft }) => stickToLeft ? 'left: 0;' : 'right: 0;'}
   display:    ${({ open }) => open ? 'block' : 'none'};
   position:   absolute;
   border:     1px solid;
   min-width:  160px;
-  left:       0;
   text-align: left;
   z-index:    300;
 
@@ -41,7 +46,12 @@ Options.defaultProps = {
 }
 
 const Select = ({
-  label, options = [], openOnTop, onChange, ...props
+  label,
+  options = [],
+  openOnTop,
+  stickToLeft = true,
+  onChange,
+  ...props
 }) => {
   const [open, setOpen] = useState(false)
   const ref = useOnClickOutside(() => setOpen(false))
@@ -51,12 +61,12 @@ const Select = ({
   }
 
   return (
-    <Container data-testid='select' {...props} ref={ref} onClick={() => setOpen(!open)}>
+    <Container data-testid='select' {...props} ref={ref} onClick={() => options.length > 0 && setOpen(!open)}>
       {label}
-      <Options open={open} openOnTop={openOnTop}>
-        {options.map(option => (
-          <Option key={option} data-testid={`option-${option}`} onClick={() => select(option)}>
-            { option }
+      <Options open={open} openOnTop={openOnTop} stickToLeft={stickToLeft}>
+        {options.map(({ value, label }) => (
+          <Option key={value} data-testid={`option-${value}`} onClick={() => select(value)}>
+            { label }
           </Option>
         ))}
       </Options>

src/Atoms/Select/Select.stories.jsx

@@ -24,7 +24,7 @@ export const select = () => {
         openOnTop={openOnTop}
         label={text('label', 'Select...')}
         onChange={action('change')}
-        options={['1', '2', '3', '4', '5'].map(n => `option ${n}`)}
+        options={['1', '2', '3', '4', '5'].map(n => ({ value: n, label: `option ${n}` }))}
       />
     </Container>
   )

src/Atoms/Separator/README.md

@@ -0,0 +1 @@
+## Separator

src/Atoms/Separator/Separator.jsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components'
+
+import { Typo } from '../../Atoms'
+
+const Separator = styled(Typo)``
+
+Separator.defaultProps = {
+  color:      'midgray',
+  lineHeight: 'header',
+  children:   '|',
+}
+
+export default Separator

src/Atoms/Separator/Separator.stories.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { text  } from '@storybook/addon-knobs'
+
+import Separator from './index'
+
+import markdown from './README.md'
+
+export default {
+  title: 'Atoms/Separator',
+}
+
+export const separator = () => (
+  <Separator separator={text('Separator', '|')}/>
+)
+
+separator.story = {
+  parameters: {
+    notes: { markdown },
+    jest:  ['Separator.test.jsx'],
+  },
+}

src/Atoms/Separator/Separator.test.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import userEvent from '@testing-library/user-event'
+
+import Separator from './index'
+
+// TODO: implement test for Separator
+it.todo('Separator should be tested')

src/Atoms/Separator/index.js

@@ -0,0 +1,3 @@
+import Separator from './Separator'
+
+export default Separator

src/Atoms/Typo/Typo.jsx

@@ -1,9 +1,10 @@
 import styled from 'styled-components'
-import { typography, color } from 'styled-system'
+import { typography, color, space } from 'styled-system'
 
 const Typo = styled.span`
   ${typography}
   ${color}
+  ${space}
 `
 
 Typo.defaultProps = {

src/Atoms/index.js

@@ -5,3 +5,4 @@ export { default as Select } from './Select'
 export { default as Option } from './Select/Option'
 export { default as Typo } from './Typo'
 export { default as Banner } from './Banner'
+export { default as Separator } from './Separator'

src/Organisms/Header/Breadcrumbs/Breadcrumb/Breadcrumb.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Select } from '../../../../Atoms'
+
+const StyledSelect = styled(Select)`
+  &:hover {
+    background-color: transparent;
+  }
+
+  cursor: ${({ pointer }) => pointer ? 'pointer' : 'auto'}
+`
+
+const Breadcrumb = ({ children, siblings = [], icon, onSiblingSelect = () => {} }) =>
+  <StyledSelect
+    bg="transparent"
+    border="0"
+    pointer={siblings.length > 0}
+    label={children}
+    onChange={onSiblingSelect}
+    options={siblings.map(({ id, name }) => ({ value: id, label: name }))}
+  />
+
+export default Breadcrumb

src/Organisms/Header/Breadcrumbs/Breadcrumb/Breadcrumb.stories.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { action } from '@storybook/addon-actions'
+import { text, number } from '@storybook/addon-knobs'
+
+import Breadcrumb from './index'
+
+import markdown from './README.md'
+
+export default {
+  title: 'Organisms/Header/Breadcrumbs/Breadcrumb',
+}
+
+const siblings = [
+  { id: 9302, name: 'Node 1' },
+  { id: 4302, name: 'Node 2' },
+  { id: 8302, name: 'Node 3' },
+]
+
+export const breadcrumb = () => (
+  <Breadcrumb
+    siblings={siblings}
+    onSiblingSelect={action('sibling selected')}
+  >
+    { text('Title', 'Node 24') }
+  </Breadcrumb>
+)
+
+breadcrumb.story = {
+  parameters: {
+    notes: { markdown },
+    jest:  ['Breadcrumb.test.jsx'],
+  },
+}

src/Organisms/Header/Breadcrumbs/Breadcrumb/Breadcrumb.test.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import userEvent from '@testing-library/user-event'
+
+import Breadcrumb from './index'
+
+// TODO: implement test for Breadcrumb
+it.todo('Header should be tested')

src/Organisms/Header/Breadcrumbs/Breadcrumb/README.md

@@ -0,0 +1 @@
+## Breadcrumb

src/Organisms/Header/Breadcrumbs/Breadcrumb/index.js

@@ -0,0 +1,3 @@
+import Breadcrumb from './Breadcrumb'
+
+export default Breadcrumb

src/Organisms/Header/Breadcrumbs/Breadcrumbs.jsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Separator } from '../../../Atoms'
+
+const Container = styled.ol`
+  display: flex;
+  padding: 0;
+  margin: 0;
+
+  & li {
+    list-style: none;
+  }
+`
+
+const insertSeparators = (items, separator) =>
+  items.reduce((acc, current, index) => {
+    if (index < items.length - 1) {
+      acc = acc.concat(
+        current,
+        <Separator key={`separator-${index}`}>
+          {separator}
+        </Separator>
+      )
+    } else {
+      acc.push(current)
+    }
+
+    return acc
+  }, [])
+
+const Breadcrumbs = ({ children, separator = '>', collapse = 5 }) => (
+  <Container>
+    {insertSeparators(
+      React.Children.toArray(children).map(
+        (child, index) => (
+          <li key={`child-${index}`}>
+            {child}
+          </li>
+        )
+      ),
+      separator
+    )}
+  </Container>
+)
+
+export default Breadcrumbs

src/Organisms/Header/Breadcrumbs/Breadcrumbs.stories.jsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import { action } from '@storybook/addon-actions'
+import { text, number } from '@storybook/addon-knobs'
+
+import Breadcrumbs from './index'
+import Breadcrumb from './Breadcrumb'
+
+import markdown from './README.md'
+
+export default {
+  title: 'Organisms/Header/Breadcrumbs',
+}
+
+const treePath = [
+  {
+    id:       9302,
+    name:     'Node 1',
+    siblings: [
+      { id: 918, name: 'Node 918' },
+      { id: 915, name: 'Node 915' },
+    ],
+  },
+  { id: 4302, name: 'Node 2' },
+  {
+    id:       8302,
+    name:     'Node 3',
+    siblings: [
+      { id: 20, name: 'Node 20' },
+      { id: 9107, name: 'Node 9107' },
+    ],
+  },
+]
+
+export const breadcrumbs = () => (
+  <Breadcrumbs
+    menuPath={'views'}
+    treePath={treePath.map(({ id, name }, index) => ({ id, name: text(`Node ${index}`, name) }))}
+    collapse={number('Collapse', 3)}
+    separator={text('Separator', '/')}
+  >
+    {treePath.map(({ id, name, siblings }, index) => (
+      <Breadcrumb
+        key={id}
+        icon={'test'}
+        onSiblingSelect={action('sibling selected')}
+        siblings={siblings}
+      >
+        {text(`Node ${index}`, name)}
+      </Breadcrumb>
+    ))}
+  </Breadcrumbs>
+)
+breadcrumbs.story = {
+  parameters: {
+    notes: { markdown },
+    jest:  ['Breadcrumbs.test.jsx'],
+  },
+}

src/Organisms/Header/Breadcrumbs/Breadcrumbs.test.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import userEvent from '@testing-library/user-event'
+
+import Breadcrumbs from './index'
+
+// TODO: implement test for Breadcrumbs
+it.todo('Header should be tested')

src/Organisms/Header/Breadcrumbs/README.md

@@ -0,0 +1 @@
+## Breadcrumbs

src/Organisms/Header/Breadcrumbs/index.js

@@ -0,0 +1,3 @@
+import Breadcrumbs from './Breadcrumbs'
+
+export default Breadcrumbs

src/Templates/Toolbar/README.md

@@ -0,0 +1 @@
+## Toolbar

src/Templates/Toolbar/Toolbar.jsx

@@ -0,0 +1,18 @@
+import styled from 'styled-components'
+import { color, border, shadow } from 'styled-system'
+
+const Toolbar = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 5px;
+  ${color}
+  ${border}
+  ${shadow}
+`
+
+Toolbar.defaultProps = {
+  bg:        'lightgray',
+  boxShadow: 'toolbar',
+}
+
+export default Toolbar