Merge pull request #835 from strapi/enh/initials-ui-customization

[enh] Initials customization

Author: ronronscelestes

packages/strapi-design-system/src/Avatar/Avatar.js

@@ -70,24 +70,37 @@ const InitialsWrapper = styled(Flex)`
   }
 `;
 
-export const Initials = ({ children }) => {
+export const Initials = ({ children, background, textColor }) => {
   return (
     <InitialsWrapper
+      background={background}
       borderRadius="50%"
       width={`${avatarSize}px`}
       height={`${avatarSize}px`}
-      background="primary600"
       justifyContent="center"
     >
-      <Typography fontWeight="bold" textColor="buttonNeutral0" fontSize={0} textTransform="uppercase">
+      <Typography fontSize={0} fontWeight="bold" textColor={textColor} textTransform="uppercase">
         {children}
       </Typography>
     </InitialsWrapper>
   );
 };
 
+Initials.defaultProps = {
+  background: 'primary600',
+  textColor: 'buttonNeutral0',
+};
+
 Initials.propTypes = {
+  /**
+   * Initials background, default is primary600
+   */
+  background: PropTypes.string,
   children: PropTypes.node.isRequired,
+  /**
+   * Initials textColor, default is buttonNeutral0
+   */
+  textColor: PropTypes.string,
 };
 
 Avatar.defaultProps = {

packages/strapi-design-system/src/Avatar/Avatar.stories.mdx

@@ -58,6 +58,7 @@ The avatar has a feature to display a preview of its thumbnail.
   <Story name="initials">
     <Box padding={11}>
       <Initials>MF</Initials>
+      <Initials background="secondary100" textColor="secondary600">MC</Initials>
     </Box>
   </Story>
 </Canvas>