orcs-design-system 3.2.4 → 3.2.6

package/es/components/Avatar/Avatar.stories.js

@@ -5,328 +5,344 @@ import Box from "../Box";
 import Spacer from "../Spacer";
 import StyledLink from "../StyledLink";
 import Avatar from ".";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: "Components/Avatar",
   component: Avatar
 };
-export var defaultAvatar = function defaultAvatar() {
-  return /*#__PURE__*/React.createElement(Avatar, {
-    title: "Ayden Lundgre",
-    initials: "AL",
-    subtitle: "Senior Business Analyst",
-    image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos"
-  });
-};
+export const defaultAvatar = () => /*#__PURE__*/_jsx(Avatar, {
+  title: "Ayden Lundgre",
+  initials: "AL",
+  subtitle: "Senior Business Analyst",
+  image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos"
+});
 defaultAvatar.storyName = "Default";
-export var noImage = function noImage() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    my: "r"
-  }, /*#__PURE__*/React.createElement(Avatar, {
+export const noImage = () => /*#__PURE__*/_jsxs(Spacer, {
+  my: "r",
+  children: [/*#__PURE__*/_jsx(Avatar, {
     title: "Ayden Lundgre",
     subtitle: "Senior Business Analyst",
     initials: "AL"
-  }), /*#__PURE__*/React.createElement(Avatar, {
+  }), /*#__PURE__*/_jsx(Avatar, {
     title: "Ayden Lundgre",
     subtitle: "Senior Business Analyst",
     initials: "AL",
     whiteInitials: true
-  }));
-};
+  })]
+});
 noImage.storyName = "No image";
-export var imageOnly = function imageOnly() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    my: 4
-  }, /*#__PURE__*/React.createElement(Avatar, {
+export const imageOnly = () => /*#__PURE__*/_jsx(Spacer, {
+  my: 4,
+  children: /*#__PURE__*/_jsx(Avatar, {
     image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos"
-  }));
-};
+  })
+});
 imageOnly.storyName = "Image only";
-export var iconOnly = function iconOnly() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    my: 4
-  }, /*#__PURE__*/React.createElement(Avatar, {
+export const iconOnly = () => /*#__PURE__*/_jsx(Spacer, {
+  my: 4,
+  children: /*#__PURE__*/_jsx(Avatar, {
     title: "Ayden Lundgre",
     subtitle: "Senior Business Analyst"
-  }));
-};
+  })
+});
 iconOnly.storyName = "Icon only";
-export var nameLink = function nameLink() {
-  return /*#__PURE__*/React.createElement(Avatar, {
-    title: /*#__PURE__*/React.createElement(StyledLink, {
-      href: "#"
-    }, "Ayden Lundgre"),
-    subtitle: "Senior Business Analyst",
-    initials: "AL",
-    image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos",
-    imageAlt: "Avatar for Ayden Lundgre"
-  });
-};
+export const nameLink = () => /*#__PURE__*/_jsx(Avatar, {
+  title: /*#__PURE__*/_jsx(StyledLink, {
+    href: "#",
+    children: "Ayden Lundgre"
+  }),
+  subtitle: "Senior Business Analyst",
+  initials: "AL",
+  image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos",
+  imageAlt: "Avatar for Ayden Lundgre"
+});
 nameLink.storyName = "Name as link";
-export var small = function small() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    my: 4
-  }, /*#__PURE__*/React.createElement(Avatar, {
+export const small = () => /*#__PURE__*/_jsxs(Spacer, {
+  my: 4,
+  children: [/*#__PURE__*/_jsx(Avatar, {
     sizing: "small",
     title: "Ayden Lundgre",
     subtitle: "Senior Business Analyst",
     initials: "AL"
-  }), /*#__PURE__*/React.createElement(Avatar, {
+  }), /*#__PURE__*/_jsx(Avatar, {
     sizing: "small",
     title: "Ayden Lundgre",
     subtitle: "Senior Business Analyst",
     initials: "AL",
     image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos"
-  }), /*#__PURE__*/React.createElement(Avatar, {
+  }), /*#__PURE__*/_jsx(Avatar, {
     sizing: "small",
-    title: /*#__PURE__*/React.createElement(StyledLink, {
-      href: "#"
-    }, "Ayden Lundgre"),
+    title: /*#__PURE__*/_jsx(StyledLink, {
+      href: "#",
+      children: "Ayden Lundgre"
+    }),
     subtitle: "Senior Business Analyst",
     imageAlt: "Avatar for Ayden Lundgre",
     initials: "AL",
     image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos"
-  }));
-};
+  })]
+});
 small.storyName = "Small";
-export var large = function large() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    my: 4
-  }, /*#__PURE__*/React.createElement(Avatar, {
+export const large = () => /*#__PURE__*/_jsxs(Spacer, {
+  my: 4,
+  children: [/*#__PURE__*/_jsx(Avatar, {
     sizing: "large",
     title: "Ayden Lundgre",
     titleLevel: "H1",
     subtitle: "Senior Business Analyst",
     initials: "AL"
-  }), /*#__PURE__*/React.createElement(Avatar, {
+  }), /*#__PURE__*/_jsx(Avatar, {
     sizing: "large",
     title: "Ayden Lundgre",
     subtitle: "Senior Business Analyst",
     initials: "AL",
     image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos"
-  }), /*#__PURE__*/React.createElement(Avatar, {
+  }), /*#__PURE__*/_jsx(Avatar, {
     sizing: "large",
-    title: /*#__PURE__*/React.createElement(StyledLink, {
-      href: "#"
-    }, "Ayden Lundgre"),
+    title: /*#__PURE__*/_jsx(StyledLink, {
+      href: "#",
+      children: "Ayden Lundgre"
+    }),
     subtitle: "Senior Business Analyst",
     imageAlt: "Avatar for Ayden Lundgre",
     initials: "AL",
     image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos"
-  }));
-};
+  })]
+});
 large.storyName = "Large";
-export var titleLevel = function titleLevel() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    my: 4
-  }, /*#__PURE__*/React.createElement(Avatar, {
+export const titleLevel = () => /*#__PURE__*/_jsx(Spacer, {
+  my: 4,
+  children: /*#__PURE__*/_jsx(Avatar, {
     sizing: "large",
     title: "Ayden Lundgre",
     titleLevel: "H1",
     subtitle: "Senior Business Analyst",
     initials: "AL"
-  }));
-};
+  })
+});
 titleLevel.storyName = "Title Level";
-export var subtitleContent = function subtitleContent() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    my: 4
-  }, /*#__PURE__*/React.createElement(Avatar, {
+export const subtitleContent = () => /*#__PURE__*/_jsxs(Spacer, {
+  my: 4,
+  children: [/*#__PURE__*/_jsx(Avatar, {
     sizing: "large",
-    title: /*#__PURE__*/React.createElement(StyledLink, {
-      href: "#"
-    }, "Ayden Lundgre"),
+    title: /*#__PURE__*/_jsx(StyledLink, {
+      href: "#",
+      children: "Ayden Lundgre"
+    }),
     imageAlt: "Avatar for Ayden Lundgre",
     initials: "AL",
     image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos",
-    subtitleContent: /*#__PURE__*/React.createElement(Badge, {
-      mt: "xs"
-    }, "Senior Business Analyst")
-  }), /*#__PURE__*/React.createElement(Avatar, {
+    subtitleContent: /*#__PURE__*/_jsx(Badge, {
+      mt: "xs",
+      children: "Senior Business Analyst"
+    })
+  }), /*#__PURE__*/_jsx(Avatar, {
     sizing: "large",
-    title: /*#__PURE__*/React.createElement(StyledLink, {
-      href: "#"
-    }, "Ayden Lundgre"),
+    title: /*#__PURE__*/_jsx(StyledLink, {
+      href: "#",
+      children: "Ayden Lundgre"
+    }),
     initials: "AL",
     image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos",
     imageAlt: "Avatar for Ayden Lundgre",
-    subtitleContent: /*#__PURE__*/React.createElement(Flex, {
-      flexWrap: "wrap"
-    }, /*#__PURE__*/React.createElement(Spacer, {
-      mr: "xs",
-      mt: "xs"
-    }, /*#__PURE__*/React.createElement(Badge, null, "Senior Business Analyst"), /*#__PURE__*/React.createElement(Badge, {
-      variant: "warning"
-    }, "Scrum Master")))
-  }));
-};
+    subtitleContent: /*#__PURE__*/_jsx(Flex, {
+      flexWrap: "wrap",
+      children: /*#__PURE__*/_jsxs(Spacer, {
+        mr: "xs",
+        mt: "xs",
+        children: [/*#__PURE__*/_jsx(Badge, {
+          children: "Senior Business Analyst"
+        }), /*#__PURE__*/_jsx(Badge, {
+          variant: "warning",
+          children: "Scrum Master"
+        })]
+      })
+    })
+  })]
+});
 subtitleContent.storyName = "Custom subtitle content";
-export var localTime = function localTime() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    my: 4
-  }, /*#__PURE__*/React.createElement(Avatar, {
+export const localTime = () => /*#__PURE__*/_jsx(Spacer, {
+  my: 4,
+  children: /*#__PURE__*/_jsx(Avatar, {
     sizing: "large",
-    title: /*#__PURE__*/React.createElement(StyledLink, {
-      href: "#"
-    }, "Ayden Lundgre"),
+    title: /*#__PURE__*/_jsx(StyledLink, {
+      href: "#",
+      children: "Ayden Lundgre"
+    }),
     initials: "AL",
     image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos",
     imageAlt: "Avatar for Ayden Lundgre",
-    subtitleContent: /*#__PURE__*/React.createElement(Badge, {
-      mt: "xs"
-    }, "Senior Business Analyst"),
+    subtitleContent: /*#__PURE__*/_jsx(Badge, {
+      mt: "xs",
+      children: "Senior Business Analyst"
+    }),
     localTime: "12:03pm local time"
-  }));
-};
+  })
+});
 localTime.storyName = "With local time";
-export var inverted = function inverted() {
-  return /*#__PURE__*/React.createElement(Box, {
-    bg: "greyDarkest",
-    p: "r"
-  }, /*#__PURE__*/React.createElement(Spacer, {
-    my: 4
-  }, /*#__PURE__*/React.createElement(Avatar, {
-    type: "inverted",
-    title: "Ayden Lundgre",
-    subtitle: "Senior Business Analyst",
-    initials: "AL",
-    image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos"
-  }), /*#__PURE__*/React.createElement(Avatar, {
-    type: "inverted",
-    title: /*#__PURE__*/React.createElement(StyledLink, {
-      href: "#"
-    }, "Ayden Lundgre"),
-    subtitle: "Senior Business Analyst",
-    initials: "AL",
-    image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos",
-    imageAlt: "Avatar for Ayden Lundgre"
-  }), /*#__PURE__*/React.createElement(Avatar, {
-    type: "inverted",
-    sizing: "small",
-    title: "Ayden Lundgre",
-    subtitle: "Senior Business Analyst",
-    initials: /*#__PURE__*/React.createElement(StyledLink, {
-      href: "#"
-    }, "AL")
-  }), /*#__PURE__*/React.createElement(Avatar, {
-    type: "inverted",
-    sizing: "small",
-    title: /*#__PURE__*/React.createElement(StyledLink, {
-      href: "#"
-    }, "Ayden Lundgre"),
-    subtitle: "Senior Business Analyst",
-    initials: "AL",
-    image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos",
-    imageAlt: "Avatar for Ayden Lundgre"
-  })));
-};
+export const inverted = () => /*#__PURE__*/_jsx(Box, {
+  bg: "greyDarkest",
+  p: "r",
+  children: /*#__PURE__*/_jsxs(Spacer, {
+    my: 4,
+    children: [/*#__PURE__*/_jsx(Avatar, {
+      type: "inverted",
+      title: "Ayden Lundgre",
+      subtitle: "Senior Business Analyst",
+      initials: "AL",
+      image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos"
+    }), /*#__PURE__*/_jsx(Avatar, {
+      type: "inverted",
+      title: /*#__PURE__*/_jsx(StyledLink, {
+        href: "#",
+        children: "Ayden Lundgre"
+      }),
+      subtitle: "Senior Business Analyst",
+      initials: "AL",
+      image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos",
+      imageAlt: "Avatar for Ayden Lundgre"
+    }), /*#__PURE__*/_jsx(Avatar, {
+      type: "inverted",
+      sizing: "small",
+      title: "Ayden Lundgre",
+      subtitle: "Senior Business Analyst",
+      initials: /*#__PURE__*/_jsx(StyledLink, {
+        href: "#",
+        children: "AL"
+      })
+    }), /*#__PURE__*/_jsx(Avatar, {
+      type: "inverted",
+      sizing: "small",
+      title: /*#__PURE__*/_jsx(StyledLink, {
+        href: "#",
+        children: "Ayden Lundgre"
+      }),
+      subtitle: "Senior Business Analyst",
+      initials: "AL",
+      image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos",
+      imageAlt: "Avatar for Ayden Lundgre"
+    })]
+  })
+});
 inverted.storyName = "Inverted";
-export var alternateShapes = function alternateShapes() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    my: 4
-  }, /*#__PURE__*/React.createElement(Avatar, {
+export const alternateShapes = () => /*#__PURE__*/_jsxs(Spacer, {
+  my: 4,
+  children: [/*#__PURE__*/_jsx(Avatar, {
     shape: "square",
-    title: /*#__PURE__*/React.createElement(StyledLink, {
-      href: "#"
-    }, "Innovation Lab"),
+    title: /*#__PURE__*/_jsx(StyledLink, {
+      href: "#",
+      children: "Innovation Lab"
+    }),
     subtitle: "15 team members",
     image: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80",
     imageAlt: "Avatar for Innovation Lab",
     sizing: "large"
-  }), /*#__PURE__*/React.createElement(Avatar, {
+  }), /*#__PURE__*/_jsx(Avatar, {
     shape: "square",
-    title: /*#__PURE__*/React.createElement(StyledLink, {
-      href: "#"
-    }, "Innovation Lab"),
+    title: /*#__PURE__*/_jsx(StyledLink, {
+      href: "#",
+      children: "Innovation Lab"
+    }),
     subtitle: "15 team members",
     image: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80",
     imageAlt: "Avatar for Innovation Lab"
-  }), /*#__PURE__*/React.createElement(Avatar, {
+  }), /*#__PURE__*/_jsx(Avatar, {
     shape: "square",
     sizing: "small",
-    title: /*#__PURE__*/React.createElement(StyledLink, {
-      href: "#"
-    }, "Innovation Lab"),
+    title: /*#__PURE__*/_jsx(StyledLink, {
+      href: "#",
+      children: "Innovation Lab"
+    }),
     subtitle: "15 team members",
     initials: "IL",
     imageAlt: "Avatar for Innovation Lab"
-  }), /*#__PURE__*/React.createElement(Avatar, {
+  }), /*#__PURE__*/_jsx(Avatar, {
     shape: "square",
     sizing: "small",
-    title: /*#__PURE__*/React.createElement(StyledLink, {
-      href: "#"
-    }, "Innovation Lab"),
+    title: /*#__PURE__*/_jsx(StyledLink, {
+      href: "#",
+      children: "Innovation Lab"
+    }),
     subtitle: "15 team members",
     imageAlt: "Avatar for Innovation Lab"
-  }), /*#__PURE__*/React.createElement(Avatar, {
+  }), /*#__PURE__*/_jsx(Avatar, {
     shape: "hexagon",
-    title: /*#__PURE__*/React.createElement(StyledLink, {
-      href: "#"
-    }, "Innovation Lab"),
+    title: /*#__PURE__*/_jsx(StyledLink, {
+      href: "#",
+      children: "Innovation Lab"
+    }),
     subtitle: "15 team members",
     image: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80",
     imageAlt: "Avatar for Innovation Lab",
     sizing: "large"
-  }), /*#__PURE__*/React.createElement(Avatar, {
+  }), /*#__PURE__*/_jsx(Avatar, {
     shape: "hexagon",
-    title: /*#__PURE__*/React.createElement(StyledLink, {
-      href: "#"
-    }, "Innovation Lab"),
+    title: /*#__PURE__*/_jsx(StyledLink, {
+      href: "#",
+      children: "Innovation Lab"
+    }),
     subtitle: "15 team members",
     image: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80",
     imageAlt: "Avatar for Innovation Lab"
-  }), /*#__PURE__*/React.createElement(Avatar, {
+  }), /*#__PURE__*/_jsx(Avatar, {
     shape: "hexagon",
     sizing: "small",
-    title: /*#__PURE__*/React.createElement(StyledLink, {
-      href: "#"
-    }, "Innovation Lab"),
+    title: /*#__PURE__*/_jsx(StyledLink, {
+      href: "#",
+      children: "Innovation Lab"
+    }),
     subtitle: "15 team members",
     initials: "IL",
     imageAlt: "Avatar for Innovation Lab"
-  }), /*#__PURE__*/React.createElement(Avatar, {
+  }), /*#__PURE__*/_jsx(Avatar, {
     shape: "hexagon",
     sizing: "small",
-    title: /*#__PURE__*/React.createElement(StyledLink, {
-      href: "#"
-    }, "Innovation Lab"),
+    title: /*#__PURE__*/_jsx(StyledLink, {
+      href: "#",
+      children: "Innovation Lab"
+    }),
     subtitle: "15 team members",
     imageAlt: "Avatar for Innovation Lab"
-  }), /*#__PURE__*/React.createElement(Avatar, {
+  }), /*#__PURE__*/_jsx(Avatar, {
     shape: "tag",
-    title: /*#__PURE__*/React.createElement(StyledLink, {
-      href: "#"
-    }, "Javascript"),
+    title: /*#__PURE__*/_jsx(StyledLink, {
+      href: "#",
+      children: "Javascript"
+    }),
     subtitle: "Tagged 123 times",
     image: "https://images.unsplash.com/photo-1627398242454-45a1465c2479?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2148&q=80",
     imageAlt: "Avatar for Javascript",
     sizing: "large"
-  }), /*#__PURE__*/React.createElement(Avatar, {
+  }), /*#__PURE__*/_jsx(Avatar, {
     shape: "tag",
-    title: /*#__PURE__*/React.createElement(StyledLink, {
-      href: "#"
-    }, "Javascript"),
+    title: /*#__PURE__*/_jsx(StyledLink, {
+      href: "#",
+      children: "Javascript"
+    }),
     subtitle: "Tagged 123 times",
     image: "https://images.unsplash.com/photo-1627398242454-45a1465c2479?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2148&q=80",
     imageAlt: "Avatar for Javascript"
-  }), /*#__PURE__*/React.createElement(Avatar, {
+  }), /*#__PURE__*/_jsx(Avatar, {
     shape: "tag",
     sizing: "small",
-    title: /*#__PURE__*/React.createElement(StyledLink, {
-      href: "#"
-    }, "Javascript"),
+    title: /*#__PURE__*/_jsx(StyledLink, {
+      href: "#",
+      children: "Javascript"
+    }),
     subtitle: "Tagged 123 times",
     initials: "JS",
     imageAlt: "Avatar for Javascript"
-  }), /*#__PURE__*/React.createElement(Avatar, {
+  }), /*#__PURE__*/_jsx(Avatar, {
     shape: "tag",
     sizing: "small",
-    title: /*#__PURE__*/React.createElement(StyledLink, {
-      href: "#"
-    }, "Javascript"),
+    title: /*#__PURE__*/_jsx(StyledLink, {
+      href: "#",
+      children: "Javascript"
+    }),
     subtitle: "Tagged 123 times",
     imageAlt: "Avatar for Javascript"
-  }));
-};
+  })]
+});
 alternateShapes.storyName = "Alternate Shapes";
 defaultAvatar.__docgenInfo = {
   "description": "",