diff --git a/lib/components/Avatar/Avatar.stories.js b/lib/components/Avatar/Avatar.stories.js index 5ca6d555..bf2ddd50 100644 --- a/lib/components/Avatar/Avatar.stories.js +++ b/lib/components/Avatar/Avatar.stories.js @@ -46,6 +46,7 @@ export const imageOnly = () => ( + ); imageOnly.storyName = "Image only"; diff --git a/lib/components/Avatar/index.js b/lib/components/Avatar/index.js index b4a48b9d..4f3f2bef 100644 --- 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 */