Merge pull request #147 from orchestrated-io/add-new-props-to-avarta-…

…0834 feat: add uppercase prop to avatar component
orchestrated-io · Aug 25, 2021 · 4bc2643 · 4bc2643
2 parents fc10a6c + ee3f49d
commit 4bc2643
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/lib/components/Avatar/Avatar.stories.js b/lib/components/Avatar/Avatar.stories.js
@@ -46,6 +46,7 @@ export const imageOnly = () => (
   <Spacer my={4}>
     <Avatar image="https://uifaces.co/our-content/donated/gPZwCbdS.jpg" />
     <Avatar initials="AL" />
+    <Avatar initials="Fun" uppercase={false} shape="hexagon" />
   </Spacer>
 );
 imageOnly.storyName = "Image only";

diff --git a/lib/components/Avatar/index.js b/lib/components/Avatar/index.js
@@ -101,7 +101,7 @@ const Shape = styled("div")(
       alignItems: "center",
       justifyContent: "center",
       textAlign: "center",
-      textTransform: "uppercase",
+      textTransform: `${(props) => (props.uppercase ? "uppercase" : "none")}`,
       a: {
         color: "greyDarkest"
       },
@@ -191,6 +191,7 @@ const Avatar = ({
   type,
   theme,
   shape,
+  uppercase = true,
   whiteInitials,
   ...props
 }) => {
@@ -209,6 +210,7 @@ const Avatar = ({
             type={type}
             className={type == "inverted" ? "inverted" : ""}
             whiteInitials={whiteInitials}
+            uppercase={uppercase}
           >
             {initials ? (
               initials
@@ -251,6 +253,8 @@ Avatar.propTypes = {
   initials: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   /** Turns white initials on for custom `Circle` backgrounds */
   whiteInitials: PropTypes.bool,
+  /** Specifies whether to use uppercase for initials */
+  uppercase: PropTypes.bool,
   /** Specifies title / name as just plain text, or an element like a hyperlink or react router link */
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   /** Specifies subtitle / role */