Design review

- Better usage example in storybook
- Added missing `color=“plain”`
- Added iconType={`logo${rest.name}`} to attempt to create the logo

packages/kbn-shared-ux-components/src/solution_avatar/solution_avatar.stories.tsx

@@ -11,7 +11,7 @@ import { KibanaSolutionAvatar, KibanaSolutionAvatarProps } from './solution_avat
 
 export default {
   title: 'Solution Avatar',
-  description: 'A wrapper around EuiAvatar, with some extra styling',
+  description: 'A wrapper around EuiAvatar, specifically to stylize Elastic Solutions',
 };
 
 type Params = Pick<KibanaSolutionAvatarProps, 'size' | 'name'>;
@@ -23,10 +23,11 @@ export const PureComponent = (params: Params) => {
 PureComponent.argTypes = {
   name: {
     control: 'text',
-    defaultValue: 'Solution Name',
+    defaultValue: 'Kibana',
   },
   size: {
     control: 'radio',
     options: ['s', 'm', 'l', 'xl', 'xxl'],
+    defaultValue: 'xxl',
   },
 };

packages/kbn-shared-ux-components/src/solution_avatar/solution_avatar.tsx

@@ -8,9 +8,9 @@
 import './solution_avatar.scss';
 
 import React from 'react';
+import classNames from 'classnames';
 
 import { DistributiveOmit, EuiAvatar, EuiAvatarProps } from '@elastic/eui';
-import classNames from 'classnames';
 
 export type KibanaSolutionAvatarProps = DistributiveOmit<EuiAvatarProps, 'size'> & {
   /**
@@ -20,11 +20,12 @@ export type KibanaSolutionAvatarProps = DistributiveOmit<EuiAvatarProps, 'size'>
 };
 
 /**
- * Applies extra styling to a typical EuiAvatar
+ * Applies extra styling to a typical EuiAvatar;
+ * The `name` value will be appended to 'logo' to configure the `iconType` unless `iconType` is provided.
  */
 export const KibanaSolutionAvatar = ({ className, size, ...rest }: KibanaSolutionAvatarProps) => {
   return (
-    // @ts-ignore
+    // @ts-ignore Complains about ExclusiveUnion between `iconSize` and `iconType`, but works fine
     <EuiAvatar
       className={classNames(
         'kbnSolutionAvatar',
@@ -33,8 +34,10 @@ export const KibanaSolutionAvatar = ({ className, size, ...rest }: KibanaSolutio
         },
         className
       )}
+      color="plain"
       size={size === 'xxl' ? 'xl' : size}
       iconSize={size}
+      iconType={`logo${rest.name}`}
       {...rest}
     />
   );