fix card & avatar circular dependencies

symbo-ls · Aug 31, 2023 · 4273b65 · 4273b65
1 parent 742e88a
commit 4273b65
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 49 deletions.
diff --git a/uikit/domql/Avatar/index.js b/uikit/domql/Avatar/index.js
@@ -4,7 +4,7 @@ import { Img, Flex } from '@symbo.ls/atoms'
 import { Button } from '@symbo.ls/button'
 import { IndicatorDot } from '@symbo.ls/accessories'
 import { InfoSet } from '@symbo.ls/infoset'
-import { CardLabel } from '@symbo.ls/card'
+import { CardLabel } from '@symbo.ls/label'
 
 export const Avatar = {
   extend: Img,
@@ -20,6 +20,41 @@ export const Avatar = {
   }
 }
 
+export const DropDownWithAvatar = {
+  extend: Flex,
+  avatar: { extend: Avatar },
+  list: {
+    childExtend: { tag: 'H6' },
+    ...[{ props: { text: 'eth' } }]
+  },
+  downArrow: {
+    extend: Button,
+    props: { icon: 'arrowDown' }
+  },
+
+  props: {
+    boxSize: 'fit-content fit-content',
+    align: 'center flex-start',
+    padding: 'Y Z',
+    gap: 'Z',
+    round: 'Z',
+    background: 'rgba(28, 28, 31, 1)',
+    avatar: { boxSize: 'A+Y' },
+    list: {
+      childProps: {
+        fontSize: 'Z',
+        textTransform: 'uppercase'
+      }
+    },
+    downArrow: {
+      padding: '0',
+      background: 'transparent',
+      color: 'white',
+      fontSize: 'Y'
+    }
+  }
+}
+
 export const AvatarWithIndicator = {
   avatar: { extend: Avatar },
   indicator: { extend: IndicatorDot },

diff --git a/uikit/domql/Card/index.js b/uikit/domql/Card/index.js
@@ -4,54 +4,9 @@ import { Flex } from '@symbo.ls/atoms'
 import { Button } from '@symbo.ls/button'
 import { InfoSet } from '@symbo.ls/infoset'
 import { Icon } from '@symbo.ls/icon'
-import { Avatar } from '@symbo.ls/avatar'
+import { Avatar, DropDownWithAvatar } from '@symbo.ls/avatar'
 import { BalancesIndicator } from '@symbo.ls/accessories'
-
-export const CardLabel = {
-  props: {
-    text: '-2.902x',
-    fontSize: 'Y',
-    background: '#F4454E',
-    boxSize: 'fit-content fit-content',
-    padding: 'W Y',
-    round: 'Y'
-  }
-}
-
-export const DropDownWithAvatar = {
-  extend: Flex,
-  avatar: { extend: Avatar },
-  list: {
-    childExtend: { tag: 'H6' },
-    ...[{ props: { text: 'eth' } }]
-  },
-  downArrow: {
-    extend: Button,
-    props: { icon: 'arrowDown' }
-  },
-
-  props: {
-    boxSize: 'fit-content fit-content',
-    align: 'center flex-start',
-    padding: 'Y Z',
-    gap: 'Z',
-    round: 'Z',
-    background: 'rgba(28, 28, 31, 1)',
-    avatar: { boxSize: 'A+Y' },
-    list: {
-      childProps: {
-        fontSize: 'Z',
-        textTransform: 'uppercase'
-      }
-    },
-    downArrow: {
-      padding: '0',
-      background: 'transparent',
-      color: 'white',
-      fontSize: 'Y'
-    }
-  }
-}
+import { CardLabel } from '@symbo.ls/label'
 
 export const AmountWithLabel = {
   extend: Flex,
@@ -69,6 +24,7 @@ export const AmountWithLabel = {
     }
   }
 }
+
 export const Card = {
   extend: InfoSet,
 

diff --git a/uikit/domql/Label/index.js b/uikit/domql/Label/index.js
@@ -21,3 +21,14 @@ export const Label = {
     props: ({ parent }) => ({ text: parent.props.emoji })
   }
 }
+
+export const CardLabel = {
+  props: {
+    text: '-2.902x',
+    fontSize: 'Y',
+    background: '#F4454E',
+    boxSize: 'fit-content fit-content',
+    padding: 'W Y',
+    round: 'Y'
+  }
+}
diff --git a/uikit/domql/index.js b/uikit/domql/index.js
@@ -4,6 +4,7 @@
 
 export * from '@symbo.ls/atoms'
 export * from '@symbo.ls/box'
+export * from '@symbo.ls/infoset'
 export * from '@symbo.ls/avatar'
 export * from '@symbo.ls/button'
 export * from '@symbo.ls/dialog'
@@ -31,7 +32,6 @@ export * from '@symbo.ls/steps'
 export * from '@symbo.ls/table'
 export * from '@symbo.ls/chat'
 export * from '@symbo.ls/card'
-export * from '@symbo.ls/infoset'
 export * from '@symbo.ls/accessories'
 export * from '@symbo.ls/icontextwithnotification'
 export * from '@symbo.ls/textcomponents'