Update Avatar prop names

sumup-oss · May 6, 2021 · b5426d9 · b5426d9
1 parent daca439
commit b5426d9
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 31 deletions.
diff --git a/packages/circuit-ui/components/Avatar/Avatar.stories.tsx b/packages/circuit-ui/components/Avatar/Avatar.stories.tsx
@@ -28,28 +28,28 @@ export default {
   },
   argTypes: {
     imageUrl: { control: 'text' },
-    variant: { control: { type: 'radio', options: ['square', 'round'] } },
-    size: { control: { type: 'radio', options: ['large', 'small'] } },
+    variant: { control: { type: 'radio', options: ['business', 'person'] } },
+    size: { control: { type: 'radio', options: ['yotta', 'giga'] } },
   },
 };
 
 export const base = (args: AvatarProps): JSX.Element => <Avatar {...args} />;
 base.args = {
   imageUrl: 'https://upload.wikimedia.org/wikipedia/en/8/86/Avatar_Aang.png',
-  variant: 'round',
-  size: 'large',
+  variant: 'person',
+  size: 'yotta',
 };
 
 export const sizes = (): JSX.Element => (
   <Stack>
     <Avatar
-      size="large"
-      variant="round"
+      size="yotta"
+      variant="person"
       imageUrl="https://upload.wikimedia.org/wikipedia/en/8/86/Avatar_Aang.png"
     />
     <Avatar
-      size="small"
-      variant="round"
+      size="giga"
+      variant="person"
       imageUrl="https://upload.wikimedia.org/wikipedia/en/8/86/Avatar_Aang.png"
     />
   </Stack>
@@ -58,19 +58,19 @@ export const sizes = (): JSX.Element => (
 export const identity = (): JSX.Element => (
   <Stack>
     <Avatar
-      variant="round"
+      variant="person"
       imageUrl="https://upload.wikimedia.org/wikipedia/en/8/86/Avatar_Aang.png"
     />
-    <Avatar variant="round" />
+    <Avatar variant="person" />
   </Stack>
 );
 
 export const object = (): JSX.Element => (
   <Stack>
     <Avatar
-      variant="square"
+      variant="business"
       imageUrl="https://source.unsplash.com/EcWFOYOpkpY"
     />
-    <Avatar variant="square" />
+    <Avatar variant="business" />
   </Stack>
 );
diff --git a/packages/circuit-ui/components/Avatar/Avatar.tsx b/packages/circuit-ui/components/Avatar/Avatar.tsx
@@ -22,17 +22,17 @@ import styled, { StyleProps } from '../../styles/styled';
 export interface AvatarProps
   extends Omit<HTMLAttributes<HTMLDivElement>, 'size'> {
   /**
-   * Image to render
+   * The URL of the Avatar image
    */
   imageUrl?: string;
   /**
-   * Shape of the Avatar
+   * The variant of the Avatar, either representing a person or a business
    */
-  variant?: 'square' | 'round';
+  variant?: 'person' | 'business';
   /**
-   * Size of the Avatar
+   * The size of the Avatar
    */
-  size?: 'small' | 'large';
+  size?: 'giga' | 'yotta';
   /**
    * Alternative DOM element to render
    */
@@ -45,28 +45,26 @@ export interface AvatarProps
 }
 
 const avatarSizes = {
-  large: '96px',
-  small: '48px',
+  yotta: '96px',
+  giga: '48px',
 };
 
 const placeholders = {
-  round:
-    "<svg width='96' height='96' viewBox='0 0 96 96' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M48 18C40.268 18 34 24.268 34 32C34 39.732 40.268 46 48 46C55.732 46 62 39.732 62 32C62 24.268 55.732 18 48 18Z' fill='white'/><path d='M47.9998 88C61.53 88 73.4913 81.2822 80.73 71C73.4913 60.7178 61.53 54 47.9997 54C34.4695 54 22.5083 60.7178 15.2695 71C22.5083 81.2822 34.4695 88 47.9998 88Z' fill='white'/></svg>",
-  square:
-    "<svg width='96' height='96' viewBox='0 0 96 96' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M30 25C30 20.0294 34.0294 16 39 16C43.9706 16 48 20.0294 48 25C48 29.9706 43.9706 34 39 34C34.0294 34 30 29.9706 30 25Z' fill='white'/><path d='M41.1571 60.5691L30.6742 48.3905C29.0304 46.4808 26.0517 46.5483 24.496 48.5304L8 69.5483V81.9998C8 85.3135 10.6863 87.9998 14 87.9998H19.9592L41.1571 60.5691Z' fill='white'/><path d='M70.4856 32.878C72.0409 30.876 75.0425 30.8075 76.6876 32.7363L87.9996 45.9986V81.9986C87.9996 85.3123 85.3133 87.9986 81.9996 87.9986H27.6611L70.4856 32.878Z' fill='white'/></svg>",
+  person: `<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M48 18C40.268 18 34 24.268 34 32C34 39.732 40.268 46 48 46C55.732 46 62 39.732 62 32C62 24.268 55.732 18 48 18Z" fill="white"/><path d="M47.9998 88C61.53 88 73.4913 81.2822 80.73 71C73.4913 60.7178 61.53 54 47.9997 54C34.4695 54 22.5083 60.7178 15.2695 71C22.5083 81.2822 34.4695 88 47.9998 88Z" fill="white"/></svg>`,
+  business: `<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M30 25C30 20.0294 34.0294 16 39 16C43.9706 16 48 20.0294 48 25C48 29.9706 43.9706 34 39 34C34.0294 34 30 29.9706 30 25Z" fill="white"/><path d="M41.1571 60.5691L30.6742 48.3905C29.0304 46.4808 26.0517 46.5483 24.496 48.5304L8 69.5483V81.9998C8 85.3135 10.6863 87.9998 14 87.9998H19.9592L41.1571 60.5691Z" fill="white"/><path d="M70.4856 32.878C72.0409 30.876 75.0425 30.8075 76.6876 32.7363L87.9996 45.9986V81.9986C87.9996 85.3123 85.3133 87.9986 81.9996 87.9986H27.6611L70.4856 32.878Z" fill="white"/></svg>`,
 };
 
 const baseStyles = ({
   theme,
   imageUrl,
-  variant = 'square',
-  size = 'large',
+  variant = 'person',
+  size = 'yotta',
 }: AvatarProps & StyleProps) => css`
   display: block;
   width: ${avatarSizes[size]};
   height: ${avatarSizes[size]};
   box-shadow: inset 0 0 0 ${theme.borderWidth.kilo} rgba(0, 0, 0, 0.1);
-  border-radius: ${variant === 'round'
+  border-radius: ${variant === 'person'
     ? theme.borderRadius.circle
     : theme.borderRadius.tera};
   border: none;

diff --git a/packages/circuit-ui/components/ImageInput/ImageInput.stories.tsx b/packages/circuit-ui/components/ImageInput/ImageInput.stories.tsx
@@ -27,10 +27,6 @@ export default {
   parameters: {
     docs: { page: docs },
   },
-  argTypes: {
-    label: { control: 'text' },
-    variant: { control: { type: 'radio', options: ['square', 'round'] } },
-  },
 };
 
 export const base = (args: ImageInputProps): JSX.Element => (

diff --git a/packages/circuit-ui/components/ImageInput/ImageInput.tsx b/packages/circuit-ui/components/ImageInput/ImageInput.tsx
@@ -78,7 +78,7 @@ export const ImageInput = ({
       <Image
         as="label"
         imageUrl={imageUrl}
-        size="large"
+        variant="business"
         htmlFor={id}
         {...props}
       >