[Shared-UX] Migrate Toolbar component from presentation to shared-ux

packages/shared-ux/button_toolbar/README.mdx

@@ -1,9 +1,23 @@
 ---
-id: sharedUX/ButtonToolbar
-slug: /shared-ux/button-toolbar
-title: Button Toolbar
-description: 
-tags: ['shared-ux', 'component']
-date: 2022-06-14
+id: sharedUX/Components/Toolbar
+slug: /shared-ux/components/button_toolbar
+title: Toolbar
+summary: An implementation of the popover, primary button, icon button group and add from library button
+tags: ['shared-ux', 'component', 'toolbar']
+date: 2022-07-28
 ---
 
+This `toolbar` component accepts a `children` prop. Children can include a `popover` or a generic `button`. It can also include the `IconButtonGroup` and `AddFromLibrary` component for soltuions. 
+Styling of the popover and button follow the primary styles.
+
+
+```jsx
+   <Toolbar>
+      {{
+        primaryButton,
+        iconButtonGroup,
+        extraButtons,
+        addFromLibraryButton,
+      }}
+    </Toolbar>
+```

packages/shared-ux/button_toolbar/src/buttons/icon_button_group/icon_button_group.stories.tsx

@@ -21,7 +21,7 @@ export default {
   },
 };
 
-const quickButtons = [
+const iconButtons = [
   {
     label: 'Text',
     onClick: action('onTextClick'),
@@ -65,7 +65,7 @@ const argTypes = {
 type Params = Record<keyof typeof argTypes, any>;
 
 export const IconButtonGroup = ({ buttonCount }: Params) => {
-  return <Component legend="Example icon group" buttons={quickButtons.slice(0, buttonCount)} />;
+  return <Component legend="Example icon group" buttons={iconButtons.slice(0, buttonCount)} />;
 };
 
 IconButtonGroup.argTypes = argTypes;

packages/shared-ux/button_toolbar/src/index.ts

@@ -16,3 +16,7 @@ export type {
 
 export { ToolbarPopover } from './popover';
 export type { ToolbarPopoverProps } from './popover';
+
+export { Toolbar } from './toolbar';
+export type { ToolbarProps } from './toolbar';
+export type { ToolbarButton } from './toolbar';

packages/shared-ux/button_toolbar/src/popover/popover.mdx

@@ -7,5 +7,5 @@ tags: ['shared-ux', 'component']
 date: 2022-03-28
 ---
 
-This component is a thing wrapper around `EuiPopover` that handles open and close state. Its open and close state is controlled by a `ToolbarButton` button component. 
+This component is a thin wrapper around `EuiPopover` that handles open and close state. Its open and close state is controlled by a `ToolbarButton` button component. 
 This popover requires a label and children. 

packages/shared-ux/button_toolbar/src/toolbar/index.ts

@@ -0,0 +1,13 @@
+/*
+ * 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 { Toolbar } from './toolbar';
+
+export type { Props as ToolbarProps } from './toolbar';
+
+export type { ToolbarButton } from './toolbar';