Merge pull request #32 from fold-dev/minor-version-update

refactor: update Fold minor version to 0.8.0
fold-dev · Apr 7, 2024 · d8f703e · d8f703e
2 parents dc01bed + ced1691
commit d8f703e
Show file tree

Hide file tree

Showing 9 changed files with 152 additions and 47 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fold-dev/docs",
-  "version": "24.3.23.0",
+  "version": "24.4.7.0",
   "description": "UI components for product teams.",
   "scripts": {
     "prepare": "husky install",
@@ -11,8 +11,8 @@
     "prettier": "prettier --write 'src/**/*.{ts,tsx}' --print-width 120"
   },
   "dependencies": {
-    "@fold-dev/core": "^0.7.0",
-    "@fold-dev/design": "^0.7.0",
+    "@fold-dev/core": "^0.8.0",
+    "@fold-dev/design": "^0.8.0",
     "@heroicons/react": "^2.0.18",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",

diff --git a/src/layouts/docs.layout.tsx b/src/layouts/docs.layout.tsx
@@ -628,7 +628,7 @@ export default function DocsLayout(props: any) {
                                         color={Token.ColorNeonpink400}
                                         subtle
                                         fontWeight={800}>
-                                        v0.7.0
+                                        v0.8.0
                                     </Pill>
                                     <Link
                                         href="/"
@@ -734,7 +734,8 @@ export default function DocsLayout(props: any) {
                                         display="block"
                                         bgToken="surface"
                                         style={{ top: 0 }}
-                                        position="sticky">
+                                        position="sticky"
+                                        alignContent="flex-start">
                                         <Heading as="h4">On this page</Heading>
 
                                         <List

diff --git a/src/pages/docs/core/avatar.mdx b/src/pages/docs/core/avatar.mdx
@@ -13,9 +13,9 @@ export const docs = {
         'The Avatar component is useful for anywhere a user or object needs to be presented in a consistently identifiable way.',
 }
 
-export const props = [{"tags":{},"filePath":"packages/core/src/avatar/avatar.tsx","description":"","displayName":"Avatar","methods":[],"props":{"subtle":{"defaultValue":null,"description":"","name":"subtle","declarations":[{"fileName":"packages/core/src/avatar/avatar.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"packages/core/src/avatar/avatar.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"color":{"defaultValue":null,"description":"CSS hex color value","name":"color","declarations":[{"fileName":"packages/core/src/avatar/avatar.tsx","name":"TypeLiteral"},{"fileName":"fold/packages/core/src/types/index.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"icon":{"defaultValue":null,"description":"","name":"icon","declarations":[{"fileName":"packages/core/src/avatar/avatar.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"name":{"defaultValue":null,"description":"","name":"name","declarations":[{"fileName":"packages/core/src/avatar/avatar.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"src":{"defaultValue":null,"description":"","name":"src","declarations":[{"fileName":"packages/core/src/avatar/avatar.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"textProps":{"defaultValue":null,"description":"","name":"textProps","declarations":[{"fileName":"packages/core/src/avatar/avatar.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ as?: \"p\" | \"button\" | \"a\" | \"label\" | \"legend\" | \"code\" | \"span\" | \"strong\" | \"b\" | \"i\" | \"em\" | \"mark\" | \"small\" | \"del\" | \"ins\" | \"sub\" | \"sup\" | \"u\" | \"abbr\" | \"cite\" | \"kbd\" | \"s\" | \"samp\" | \"blockquote\"; ... 4 more ...; target?: string; } & AriaAttributes & CommonProps & ShorthandProps & DOMAttributes<...>"},"tags":{}},"imageProps":{"defaultValue":null,"description":"","name":"imageProps","declarations":[{"fileName":"packages/core/src/avatar/avatar.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ errorContent?: ReactNode; src?: string; objectPosition?: string; objectFit?: \"contain\" | \"cover\" | \"fill\"; alt?: string; loading?: \"eager\" | \"lazy\"; crossOrigin?: \"anonymous\" | \"use-credentials\"; ... 6 more ...; placeholderComponent?: any; } & AriaAttributes & CommonProps & ShorthandProps & DOMAttributes<...>"},"tags":{}}}},{"tags":{},"filePath":"packages/core/src/avatar/avatar.tsx","description":"","displayName":"AvatarGroup","methods":[],"props":{"animated":{"defaultValue":null,"description":"","name":"animated","declarations":[{"fileName":"packages/core/src/avatar/avatar.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"invert":{"defaultValue":null,"description":"","name":"invert","declarations":[{"fileName":"packages/core/src/avatar/avatar.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}}}}]
+export const props = [{"tags":{},"filePath":"packages/core/src/avatar/avatar.tsx","description":"","displayName":"Avatar","methods":[],"props":{"subtle":{"defaultValue":null,"description":"","name":"subtle","declarations":[{"fileName":"packages/core/src/avatar/avatar.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"size":{"defaultValue":null,"description":"","name":"size","declarations":[{"fileName":"packages/core/src/avatar/avatar.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"Size"},"tags":{}},"color":{"defaultValue":null,"description":"CSS hex color value","name":"color","declarations":[{"fileName":"packages/core/src/avatar/avatar.tsx","name":"TypeLiteral"},{"fileName":"fold/packages/core/src/types/index.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"icon":{"defaultValue":null,"description":"","name":"icon","declarations":[{"fileName":"packages/core/src/avatar/avatar.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"name":{"defaultValue":null,"description":"","name":"name","declarations":[{"fileName":"packages/core/src/avatar/avatar.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"src":{"defaultValue":null,"description":"","name":"src","declarations":[{"fileName":"packages/core/src/avatar/avatar.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"string"},"tags":{}},"textProps":{"defaultValue":null,"description":"","name":"textProps","declarations":[{"fileName":"packages/core/src/avatar/avatar.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ as?: \"p\" | \"button\" | \"a\" | \"label\" | \"legend\" | \"code\" | \"span\" | \"strong\" | \"b\" | \"i\" | \"em\" | \"mark\" | \"small\" | \"del\" | \"ins\" | \"sub\" | \"sup\" | \"u\" | \"abbr\" | \"cite\" | \"kbd\" | \"s\" | \"samp\" | \"blockquote\"; ... 4 more ...; target?: string; } & AriaAttributes & CommonProps & ShorthandProps & DOMAttributes<...>"},"tags":{}},"imageProps":{"defaultValue":null,"description":"","name":"imageProps","declarations":[{"fileName":"packages/core/src/avatar/avatar.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"{ errorContent?: ReactNode; src?: string; objectPosition?: string; objectFit?: \"contain\" | \"cover\" | \"fill\"; alt?: string; loading?: \"eager\" | \"lazy\"; crossOrigin?: \"anonymous\" | \"use-credentials\"; ... 6 more ...; placeholderComponent?: any; } & AriaAttributes & CommonProps & ShorthandProps & DOMAttributes<...>"},"tags":{}},"presence":{"defaultValue":null,"description":"","name":"presence","declarations":[{"fileName":"packages/core/src/avatar/avatar.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"\"online\" | \"busy\" | \"away\""},"tags":{}}}},{"tags":{},"filePath":"packages/core/src/avatar/avatar.tsx","description":"","displayName":"AvatarGroup","methods":[],"props":{"animated":{"defaultValue":null,"description":"","name":"animated","declarations":[{"fileName":"packages/core/src/avatar/avatar.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}},"invert":{"defaultValue":null,"description":"","name":"invert","declarations":[{"fileName":"packages/core/src/avatar/avatar.tsx","name":"TypeLiteral"}],"required":false,"type":{"name":"boolean"},"tags":{}}}}]
 
-export const css = [[["--f-avatar-border-radius","var(--f-radius-round)"],["--f-avatar-color","var(--f-color-accent)"],["--f-avatar-background-color","var(--f-color-surface-strong)"],["--f-avatar-group-overlap","-1rem"],["--f-avatar-group-overlap-small","-0.66rem"],["--f-avatar-group-spacing","1px"]]]
+export const css = [[["--f-avatar-border-radius","var(--f-radius-round)"],["--f-avatar-color","var(--f-color-accent)"],["--f-avatar-background-color","var(--f-color-surface-strong)"],["--f-avatar-group-overlap","-1rem"],["--f-avatar-group-overlap-small","-0.66rem"],["--f-avatar-group-spacing","1px"],["--f-avatar-badge-outline","0.2rem solid var(--f-color-surface)"]]]
 
 
 
@@ -282,5 +282,60 @@ export const GroupInverted = () => {
     )
 }
 ```
+### Presence
+
+export const Presence = () => (<View row gap={5} width="fit-content">
+        <Avatar size="xs" name="Etienne Dreyer" presence="online" src="/men/01.jpg"/>
+        <Avatar size="sm" name="Aubrey Moagi" presence="away" src="/men/02.jpg"/>
+        <Avatar size="md" name="Patrick Anthony" presence="busy" src="/men/03.jpg"/>
+        <Avatar size="lg" name="Charlene Singh" presence="online" src="/men/04.jpg"/>
+        <Avatar size="xl" name="Craig Pather" presence="away" src="/men/05.jpg"/>
+    </View>);
+
+<div className="story-block">
+<Presence />
+</div>
+
+<CodeComponent filename="Presence.tsx" code="ZXhwb3J0IGNvbnN0IFByZXNlbmNlID0gKCkgPT4gKAogICAgPFZpZXcKICAgICAgICByb3cKICAgICAgICBnYXA9ezV9CiAgICAgICAgd2lkdGg9ImZpdC1jb250ZW50Ij4KICAgICAgICA8QXZhdGFyCiAgICAgICAgICAgIHNpemU9InhzIgogICAgICAgICAgICBuYW1lPSJFdGllbm5lIERyZXllciIKICAgICAgICAgICAgcHJlc2VuY2U9Im9ubGluZSIKICAgICAgICAgICAgc3JjPSIvbWVuLzAxLmpwZyIKICAgICAgICAvPgogICAgICAgIDxBdmF0YXIKICAgICAgICAgICAgc2l6ZT0ic20iCiAgICAgICAgICAgIG5hbWU9IkF1YnJleSBNb2FnaSIKICAgICAgICAgICAgcHJlc2VuY2U9ImF3YXkiCiAgICAgICAgICAgIHNyYz0iL21lbi8wMi5qcGciCiAgICAgICAgLz4KICAgICAgICA8QXZhdGFyCiAgICAgICAgICAgIHNpemU9Im1kIgogICAgICAgICAgICBuYW1lPSJQYXRyaWNrIEFudGhvbnkiCiAgICAgICAgICAgIHByZXNlbmNlPSJidXN5IgogICAgICAgICAgICBzcmM9Ii9tZW4vMDMuanBnIgogICAgICAgIC8+CiAgICAgICAgPEF2YXRhcgogICAgICAgICAgICBzaXplPSJsZyIKICAgICAgICAgICAgbmFtZT0iQ2hhcmxlbmUgU2luZ2giCiAgICAgICAgICAgIHByZXNlbmNlPSJvbmxpbmUiCiAgICAgICAgICAgIHNyYz0iL21lbi8wNC5qcGciCiAgICAgICAgLz4KICAgICAgICA8QXZhdGFyCiAgICAgICAgICAgIHNpemU9InhsIgogICAgICAgICAgICBuYW1lPSJDcmFpZyBQYXRoZXIiCiAgICAgICAgICAgIHByZXNlbmNlPSJhd2F5IgogICAgICAgICAgICBzcmM9Ii9tZW4vMDUuanBnIgogICAgICAgIC8+CiAgICA8L1ZpZXc+Cik=" />
+
+```tsx
+export const Presence = () => (
+    <View
+        row
+        gap={5}
+        width="fit-content">
+        <Avatar
+            size="xs"
+            name="Etienne Dreyer"
+            presence="online"
+            src="/men/01.jpg"
+        />
+        <Avatar
+            size="sm"
+            name="Aubrey Moagi"
+            presence="away"
+            src="/men/02.jpg"
+        />
+        <Avatar
+            size="md"
+            name="Patrick Anthony"
+            presence="busy"
+            src="/men/03.jpg"
+        />
+        <Avatar
+            size="lg"
+            name="Charlene Singh"
+            presence="online"
+            src="/men/04.jpg"
+        />
+        <Avatar
+            size="xl"
+            name="Craig Pather"
+            presence="away"
+            src="/men/05.jpg"
+        />
+    </View>
+)
+```
 
 export default ({ children }) => <ComponentLayout docs={docs} props={props} css={css}>{children}</ComponentLayout>