[SharedUX] Migrate PageTemplate > SolutionNavAvatar (#128386)

* [SharedUX] Migrate PageTemplate > SolutionNavAvatar

* Fix comment

* Renaming component

* Fix folder structure

* Fix storybook

* Style fix

* Design review

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

* Fix invalid URL path

* Fix url path

* Fix url path

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: cchaos <caroline.horn@elastic.co>

packages/kbn-shared-ux-components/src/index.ts

@@ -94,3 +94,20 @@ export const LazyIconButtonGroup = React.lazy(() =>
  * The IconButtonGroup component that is wrapped by the `withSuspence` HOC.
  */
 export const IconButtonGroup = withSuspense(LazyIconButtonGroup);
+
+/**
+ * The Lazily-loaded `KibanaSolutionAvatar` component.  Consumers should use `React.Suspense` or
+ * the withSuspense` HOC to load this component.
+ */
+export const KibanaSolutionAvatarLazy = React.lazy(() =>
+  import('./solution_avatar').then(({ KibanaSolutionAvatar }) => ({
+    default: KibanaSolutionAvatar,
+  }))
+);
+
+/**
+ * A `KibanaSolutionAvatar` component that is wrapped by the `withSuspense` HOC. This component can
+ * be used directly by consumers and will load the `KibanaPageTemplateSolutionNavAvatarLazy` component lazily with
+ * a predefined fallback and error boundary.
+ */
+export const KibanaSolutionAvatar = withSuspense(KibanaSolutionAvatarLazy);

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

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { KibanaSolutionAvatar } from './solution_avatar';

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

@@ -0,0 +1,14 @@
+.kbnSolutionAvatar {
+  @include euiBottomShadowSmall;
+
+  &--xxl {
+    @include euiBottomShadowMedium;
+    @include size(100px);
+    line-height: 100px;
+    border-radius: 100px;
+    display: inline-block;
+    background: $euiColorEmptyShade url('/assets/texture.svg') no-repeat;
+    background-size: cover, 125%;
+    text-align: center;
+  }
+}

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

@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { KibanaSolutionAvatar, KibanaSolutionAvatarProps } from './solution_avatar';
+
+export default {
+  title: 'Solution Avatar',
+  description: 'A wrapper around EuiAvatar, specifically to stylize Elastic Solutions',
+};
+
+type Params = Pick<KibanaSolutionAvatarProps, 'size' | 'name'>;
+
+export const PureComponent = (params: Params) => {
+  return <KibanaSolutionAvatar {...params} />;
+};
+
+PureComponent.argTypes = {
+  name: {
+    control: 'text',
+    defaultValue: 'Kibana',
+  },
+  size: {
+    control: 'radio',
+    options: ['s', 'm', 'l', 'xl', 'xxl'],
+    defaultValue: 'xxl',
+  },
+};

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

@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { KibanaSolutionAvatar } from './solution_avatar';
+
+describe('KibanaSolutionAvatar', () => {
+  test('renders', () => {
+    const component = shallow(<KibanaSolutionAvatar name="Solution" iconType="logoElastic" />);
+    expect(component).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,44 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import './solution_avatar.scss';
+
+import React from 'react';
+import classNames from 'classnames';
+
+import { DistributiveOmit, EuiAvatar, EuiAvatarProps } from '@elastic/eui';
+
+export type KibanaSolutionAvatarProps = DistributiveOmit<EuiAvatarProps, 'size'> & {
+  /**
+   * Any EuiAvatar size available, or `xxl` for custom large, brand-focused version
+   */
+  size?: EuiAvatarProps['size'] | 'xxl';
+};
+
+/**
+ * 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 Complains about ExclusiveUnion between `iconSize` and `iconType`, but works fine
+    <EuiAvatar
+      className={classNames(
+        'kbnSolutionAvatar',
+        {
+          [`kbnSolutionAvatar--${size}`]: size,
+        },
+        className
+      )}
+      color="plain"
+      size={size === 'xxl' ? 'xl' : size}
+      iconSize={size}
+      iconType={`logo${rest.name}`}
+      {...rest}
+    />
+  );
+};