@symbo.ls/dropdown 1.1.5 → 1.2.0

package/index.js

@@ -1,41 +1,52 @@
 'use strict'
 
-import { IconText } from '@symbo.ls/icon-text'
-
-import { styleRow, styleRowActive, styleDropDown } from './style'
+import { Flex } from '@symbo.ls/atoms'
+import { Button } from '@symbo.ls/button'
 
 export const DropdownList = {
-  style: styleDropDown,
-  tag: 'ul',
+  extend: Flex,
 
-  state: {
-    active: 0
+  props: {
+    padding: '0 Y',
+    maxHeight: 'G',
+    flow: 'column',
+    theme: 'quaternary',
+    overflow: 'hidden auto',
+    style: { listStyleType: 'none' }
   },
 
-  childExtends: {
-    tag: 'li',
+  childExtend: {
+    extend: Button,
 
-    style: styleRow,
     props: (el, s) => ({
-      depth: 0,
-      round: 0
-      // theme: el.parent.props.rowTheme
-    }),
-
-    span: {
-      extends: [IconText],
-      props: {
-        icon: 'checkmark',
-        text: ''
-      }
-    },
-    class: {
-      active: (element, state) => (state.active === element.key) ? styleRowActive : {}
-    },
-    on: {
-      click: (event, element, state) => {
-        state.update({ active: element.key })
+      active: s.active === el.key,
+      position: 'relative',
+      round: '0',
+      align: 'center flex-end',
+      flow: 'row-reverse',
+      padding: 'Z2 C Z2 Y2',
+      margin: '0',
+      gap: 'Y2',
+      theme: 'quaternary .child',
+
+      ':hover': {
+        style: {
+          svg: { opacity: '0.5' }
+        }
+      },
+
+      icon: {
+        active: s.active === el.key,
+        name: 'checkmark',
+        opacity: '0.1',
+        '.active': { opacity: '1' }
+      },
+
+      ':not(:first-child)': {
+        '@dark': { border: 'gray4 .65, solid' },
+        '@light': { border: 'gray11, solid' },
+        borderWidth: '1px 0 0'
       }
-    }
+    })
   }
 }

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@symbo.ls/dropdown",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "8590863dfd2c60cbe59db0b4bb8239c8a7585259",
+  "gitHead": "769d39aee2ab66f0d64b1e0052893442857e7432",
   "dependencies": {
-    "@symbo.ls/icon-text": "latest",
-    "@symbo.ls/shape": "latest"
+    "@symbo.ls/atoms": "latest",
+    "@symbo.ls/button": "latest"
   },
   "source": "src/index.js"
 }

package/style.js

@@ -1,37 +0,0 @@
-'use strict'
-
-export const styleDropDown = {
-  listStyleType: 'none',
-  padding: '4px',
-  maxHeight: '17.6em'
-}
-
-export const styleRow = {
-  height: `${42 / 16}em`,
-  width: `${178 / 16}em`,
-  position: 'relative',
-  padding: 0,
-  span: {
-    height: '100%',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: '0 10px',
-    margin: '0 6px',
-    svg: { display: 'none' }
-  },
-  '&:not(:last-child) > span': {
-    borderBottom: '.5px solid rgba(0, 0, 0, .12)'
-  }
-}
-
-export const styleRowActive = {
-  // '&:not(:last-child) > span': {
-  //   borderBottom: 'none'
-  // },
-  'span > svg': { display: 'inline' }
-}
-
-export const styleSelectDropdown = {
-  color: 'red'
-}