@symbo.ls/avatar 2.11.158 → 2.11.162

package/index.js

@@ -2,9 +2,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/label'
+import { StatusIndicator } from '@symbo.ls/indicator'
 
 export const Avatar = {
   extend: Img,
@@ -57,7 +55,7 @@ export const DropDownWithAvatar = {
 
 export const AvatarWithIndicator = {
   avatar: { extend: Avatar },
-  indicator: { extend: IndicatorDot },
+  indicator: { extend: StatusIndicator },
 
   props: {
     boxSize: 'fit-content fit-content',
@@ -135,38 +133,46 @@ export const AvatarChooser = {
 
 export const AvatarWithInfoSet = {
   extend: Flex,
-  avatar: { extend: AvatarWithIndicator },
-  infos: {
-    extend: InfoSet,
-    ...[
-      {
-        title: { props: { text: 'Erin Schleifer' } },
-        subTitle: { caption: { props: { text: 'email@symbols.com' } } }
-      }
-    ]
-  },
 
   props: {
     boxSize: 'fit-content',
     align: 'center flex-start',
-    gap: 'A',
-    infos: {
+    gap: 'A'
+  },
+
+  AvatarWithIndicator: {},
+
+  InfoSet: {
+    props: {
       childProps: {
         flow: 'column',
         subTitle: { caption: { whiteSpace: 'nowrap' } }
       }
-    }
+    },
+
+    ...[{
+      title: { props: { text: 'Erin Schleifer' } },
+      subTitle: { caption: { props: { text: 'email@symbols.com' } } }
+    }]
   }
 }
 
 export const AvatarInfoSetWithLabel = {
   extend: AvatarWithInfoSet,
-  avatar: { extend: Avatar },
+
+  AvatarWithIndicator: { boxSize: 'B' },
+
   infos: {
+    props: {
+      gap: 'X',
+      childProps: {
+        flow: 'row'
+      }
+    },
     ...[
       {
         title: { props: { text: 'ETHDOWN' } },
-        label: { extend: CardLabel },
+        Label: {},
         subTitle: null,
         props: { gap: 'Z' }
       },
@@ -174,45 +180,26 @@ export const AvatarInfoSetWithLabel = {
         subTitle: { props: { text: 'Short ADA with up to 4x Leverage' } }
       }
     ]
-  },
-
-  props: {
-    avatar: { boxSize: 'B' },
-    infos: {
-      gap: 'X',
-      childProps: {
-        flow: 'row'
-      }
-    }
   }
 }
 
 export const AvatarInfoSetWithButton = {
   extend: AvatarWithInfoSet,
-  avatar: { extend: Avatar },
-  infos: {
-    ...[
-      {
-        title: { props: { text: 'Wallet ID' } },
-        subTitle: { caption: { props: { text: '0xfb59...d862' } } }
-      },
-      {
-        extend: Button,
-        props: { icon: 'copyOutline' }
-      }
-    ]
-  },
 
   props: {
     padding: 'Y A Y Y',
     border: '1px solid #57575C',
     round: 'Z',
-    gap: 'Z',
-    avatar: {
-      boxSize: 'A+B',
-      round: 'Y'
-    },
-    infos: {
+    gap: 'Z'
+  },
+
+  AvatarWithIndicator: {
+    boxSize: 'A+B',
+    round: 'Y'
+  },
+
+  infos: {
+    props: {
       flow: 'row',
       align: 'center flex-start',
       gap: 'A+X',
@@ -225,40 +212,40 @@ export const AvatarInfoSetWithButton = {
           background: 'transparent'
         }
       }
-    }
+    },
+
+    ...[{
+      title: { props: { text: 'Wallet ID' } },
+      subTitle: { caption: { props: { text: '0xfb59...d862' } } }
+    }, {
+      extend: Button,
+      props: { icon: 'copyOutline' }
+    }]
   }
 }
 
 export const AvatarBundleInfoSet = {
   extend: AvatarWithInfoSet,
-  avatar: { extend: AvatarBundle },
-  infos: {
-    ...[
-      {
-        title: { props: { text: 'ETH/BNB' } },
-        CardLabel: {
-          text: '1 ETH = 240.7 BNB'
-        },
-        subTitle: null
-      }
-    ]
-  },
 
   props: {
     gap: 'Z',
     background: '#1C1C1F',
     padding: 'A A',
-    round: 'Z',
-    avatar: {
-      childProps: {
-        boxSize: 'A+A',
-        ':not(:first-child)': {
-          border: 'solid, black 0',
-          borderWidth: '1px'
-        }
+    round: 'Z'
+  },
+
+  AvatarBundle: {
+    childProps: {
+      boxSize: 'A+A',
+      ':not(:first-child)': {
+        border: 'solid, black 0',
+        borderWidth: '1px'
       }
-    },
-    infos: {
+    }
+  },
+
+  infos: {
+    props: {
       childProps: {
         flow: 'row',
         gap: 'Z',
@@ -269,6 +256,14 @@ export const AvatarBundleInfoSet = {
           padding: 'Y Z'
         }
       }
-    }
+    },
+
+    ...[{
+      title: { props: { text: 'ETH/BNB' } },
+      Label: {
+        text: '1 ETH = 240.7 BNB'
+      },
+      subTitle: null
+    }]
   }
 }

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@symbo.ls/avatar",
-  "version": "2.11.158",
+  "version": "2.11.162",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "cbed9bf1f1a15c02489444ffa264acbaf2e8d918",
+  "gitHead": "fe3359a1d6c14d38f45f5e5db10ef2056947a228",
   "dependencies": {
     "@symbo.ls/atoms": "latest",
-    "@symbo.ls/button": "latest"
+    "@symbo.ls/button": "latest",
+    "@symbo.ls/indicator": "latest"
   },
   "source": "src/index.js"
 }

package/symbols.js

@@ -0,0 +1,42 @@
+'use strict'
+
+import PACKAGE from './package.json'
+import { Avatar } from './'
+
+const key = 'Avatar'
+const title = 'Avatar'
+const description = ''
+const category = ['Atoms']
+const extend = 'Avatar'
+
+const state = {}
+const props = {}
+
+const component = {
+  extend: Avatar
+}
+
+const code = ''
+
+const settings = {
+  gridOptions: { colspan: 2, rowspan: 1 }
+}
+
+export default {
+  key,
+  title,
+  description,
+  category,
+  extend,
+
+  component,
+  code,
+  state,
+  props,
+
+  settings,
+  package: PACKAGE.name,
+  version: PACKAGE.version,
+  interactivity: [],
+  dataTypes: []
+}