initial structure for components rewrite

2020-05-15 13:18:30 +02:00
1 parent 944afe4a3e
commit c391c007ff
@@ -1,50 +0,0 @@
-
-$headerRowHeight = 63px
-
-.tableList
-  background-color: var(--primary-background-color)
-  height: 100%;
-  width: 100%;
-
-  .tableListHeader
-    background-color: var(--ui-gray-darker)
-    color: var(--text-secondary-color)
-    display: flex
-    height: $headerRowHeight
-    line-height: $headerRowHeight
-    margin-top: 2px
-    overflow: hidden
-    width: 100%
-
-    .tableListHeaderTitle
-      color: var(--text-secondary-color)
-      font-size: 22px
-      font-weight: 300
-      line-height: $headerRowHeight
-      padding: 0 10px
-      text-align: left
-      flex: 1;
-
-    .tableListHeaderSelector
-      cursor: pointer
-      max-width: 30px
-      padding-left: 2px
-      align-items: stretch
-      flex: 1
-      justify-content: space-around
-      text-align: center
-
-      svg
-        fill: #c1d8e3
-        height: 63px
-        max-width: 11px
-
-    .numberOfItems
-      color: var(--ui-sky-blue)
-      float: right
-      font-weight: 300
-      font-size: 40px
-      max-width: 54px
-      height: $headerRowHeight
-      line-height: 66px
-      flex: 1;
@@ -1,46 +0,0 @@
-.tableListItem
-  display: flex
-  margin-left: -6px
-  margin-top: 2px
-  padding-left: 6px
-  opacity: 0.7
-  cursor: pointer;
-  width: calc(100% + 6px)
-
-  &:hover
-    opacity 1
-
-  &.selected
-    opacity 1
-    .itemIndex
-      color: $activeColor
-
-  &.hasWarning
-    .warning
-      display: block
-
-  .itemIndex
-    background-color: var(--ui-gray)
-    color: var(--text-secondary-color)
-    cursor: pointer
-    flex: 1
-    max-width: 25px
-    transition(all 0.3s ease)
-    font-size: 14px
-    font-weight: 400
-    margin-right: 6px
-    padding: 10px
-    text-align: center
-    -webkit-box-sizing: initial;
-    -moz-box-sizing: initial;
-    box-sizing: initial;
-
-  .itemContent
-    flex: 1
-    color: var(--text-secondary-color)
-    width: calc(100% - 51px);
-    font-weight: 400
-    margin-top: 9px;
-
-  .warning-icon
-    display: none
@@ -1,48 +0,0 @@
---
-name: Table List
-menu: Components
-route: /components/table-list
---
-
-import { Playground, Props } from 'docz'
-import { State } from 'react-powerplug'
-import { TableList, TableListItem } from './../index.js'
-
-# Table List
-
-## Basic usage
-
-<Playground>
-    <State initial={{
-      selectedIndex: null,
-      listItems: [
-        { label: 'Brain Left' },
-        { label: 'Brain Right' },
-        { label: 'Heart Left' },
-        { label: 'Heart Right' }
-      ]
-    }}>
-        {({ state, setState }) => (
-            <TableList headerTitle='Example Table List Header'>
-                {state.listItems.map( (item, index) => {
-                    return (
-                        <TableListItem
-                            key={`item_${index}`}
-                            itemClass={state.selectedIndex === index ? 'selected' : ''}
-                            itemIndex={index}
-                            onItemClick={() => alert('item clicked')}
-                        >
-                            <label>{item.label}</label>
-                        </TableListItem>
-                    )}
-                )}
-            </TableList>
-        )}
-
-    </State>
-
-</Playground>
-
-## API
-
-<Props of={TableList} />
@@ -1,2 +0,0 @@
-export { TableList } from './TableList';
-export { TableListItem } from './TableListItem';