simplifying components, added === true on conditional props

symbo-ls · Oct 20, 2024 · f558ae0 · f558ae0
1 parent 4b7f817
commit f558ae0
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 21 deletions.
diff --git a/packages/preview/index.js b/packages/preview/index.js
@@ -1,5 +1,6 @@
 'use strict'
 
+export * from './pages/Colors'
 export * from './pages/Styleguide'
 export * from './pages/Component'
 export * from './pages/Components'
diff --git a/packages/preview/pages/Colors.js b/packages/preview/pages/Colors.js
@@ -0,0 +1,7 @@
+'use strict'
+
+export const Colors = {
+}
+
+export const Themes = {
+}
diff --git a/packages/preview/pages/Styleguide.js b/packages/preview/pages/Styleguide.js
@@ -2,7 +2,7 @@
 
 import { Colors, Typography, Shadows, Icons, Spacing, Shapes } from '../articles'
 
-export const StyleguidePage = {
+export const Styleguide = {
   extend: 'Flex',
   tag: 'main',
 

diff --git a/packages/uikit/Atoms/Media.js b/packages/uikit/Atoms/Media.js
@@ -129,14 +129,14 @@ const applyVariableProps = (key, props, result, element) => {
 
 const applyConditionalCaseProps = (key, props, result, element) => {
   const caseKey = key.slice(1)
-  const isPropTrue = element.props[caseKey] || element.state[caseKey] || element[caseKey]
+  const isPropTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey]
   if (!isPropTrue) return // remove classname if not here
   return overwriteDeep(result, convertPropsToClass(props, result, element))
 }
 
 const applyConditionalFalsyProps = (key, props, result, element) => {
   const caseKey = key.slice(1)
-  const isPropTrue = element.props[caseKey] || element.state[caseKey] || element[caseKey]
+  const isPropTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey]
   if (!isPropTrue) return overwriteDeep(result, convertPropsToClass(props, result, element))
 }
 

diff --git a/packages/uikit/Avatar/symbols.js b/packages/uikit/Avatar/symbols.js
@@ -12,7 +12,7 @@ const extend = 'Avatar'
 const state = {}
 const props = {}
 
-const component = {
+const value = {
   extend: Avatar
 }
 
@@ -29,7 +29,7 @@ export default {
   category,
   extend,
 
-  component,
+  value,
   code,
   state,
   props,

diff --git a/packages/uikit/Dropdown/index.js b/packages/uikit/Dropdown/index.js
@@ -16,6 +16,8 @@ export const DropdownList = {
     style: { listStyleType: 'none' },
     transition: 'B defaultBezier',
     transitionProperty: 'transform, opacity, visibility',
+    children: ({ props }) => props.options || [],
+    childrenAs: 'props',
 
     '.hidden': {
       transform: 'translate3d(0,10%,0)',
@@ -27,8 +29,8 @@ export const DropdownList = {
   childExtend: {
     extend: 'Button',
     state: {},
-    props: ({ key, state }) => ({
-      active: state.active === key,
+    props: {
+      isActive: ({ key, state }) => state.active === key,
       position: 'relative',
       round: '0',
       align: 'center flex-end',
@@ -45,7 +47,7 @@ export const DropdownList = {
       },
 
       Icon: {
-        active: state.active === key,
+        isActive: ({ key, state }) => state.active === key,
         name: 'checkmark',
         opacity: '0.1',
         '.active': { opacity: '1' }
@@ -56,10 +58,8 @@ export const DropdownList = {
         '@light': { border: 'gray11, solid' },
         borderWidth: '1px 0 0'
       }
-    })
-  },
-
-  $propsCollection: ({ props }) => props.options
+    }
+  }
 }
 
 export const DropdownParent = {

diff --git a/packages/uikit/Pills/index.js b/packages/uikit/Pills/index.js
@@ -13,8 +13,8 @@ export const Pills = {
         boxSize: 'Y2',
         round: 'A',
         background: 'currentColor',
-        active: parseInt(key) === parseInt(state.active || parent.props.active),
-        '!active': { opacity: 0.35 }
+        isActive: parseInt(key) === parseInt(state.active || parent.props.active),
+        '!isActive': { opacity: 0.35 }
       })
     },
     on: {

diff --git a/packages/uikit/TimePicker/TimeSwitcher.js b/packages/uikit/TimePicker/TimeSwitcher.js
@@ -1,7 +1,5 @@
 'use strict'
 
-import { Button } from '@symbo.ls/button'
-
 const props = {
   boxSize: 'C B2',
   flow: 'column',
@@ -15,9 +13,8 @@ export const TimeSwitcher = {
   extend: 'Flex',
 
   childExtend: {
-    extend: Button,
-    props: ({ state, key }) => ({
-      active: state.activeShift === key,
+    extend: 'Button',
+    props: {
       padding: '0',
       flex: '1',
       width: '100%',
@@ -27,8 +24,9 @@ export const TimeSwitcher = {
       background: 'transparent',
       color: 'currentColor',
       lineHeight: '1',
-      '.active': { theme: 'primary' }
-    }),
+      isActive: ({ state, key }) => state.activeShift === key,
+      '.isActive': { theme: 'primary' }
+    },
     on: {
       click: (ev, { key, state }) => {
         state.update({ activeShift: key })