removing sass and refactoring strings component

Author: rshen91

src/plugins/shared_ux/public/components/solution_toolbar/items/add_from_library.tsx

@@ -6,11 +6,16 @@
  * Side Public License, v 1.
  */
 
+import { i18n } from '@kbn/i18n';
 import React from 'react';
-import { ComponentStrings } from '../../../i18n/components';
 import { SolutionToolbarButton, Props as SolutionToolbarButtonProps } from './button';
 
-const { SolutionToolbar: strings } = ComponentStrings;
+const strings = {
+  getLibraryButtonLabel: () =>
+    i18n.translate('presentationUtil.solutionToolbar.libraryButtonLabel', {
+      defaultMessage: 'Add from library',
+    }),
+};
 
 export type Props = Omit<SolutionToolbarButtonProps, 'iconType' | 'label'>;
 

src/plugins/shared_ux/public/components/solution_toolbar/items/primary_button.tsx

@@ -15,13 +15,5 @@ export interface Props extends Omit<SolutionToolbarButtonProps, 'primary'> {
 }
 
 export const PrimaryActionButton = ({ isDarkModeEnabled, ...props }: Props) => (
-  <SolutionToolbarButton
-    primary={true}
-    className={`solutionToolbar__primaryButton ${
-      isDarkModeEnabled
-        ? 'solutionToolbar__primaryButton--dark'
-        : 'solutionToolbar__primaryButton--light'
-    }`}
-    {...props}
-  />
+  <SolutionToolbarButton primary={true} {...props} />
 );

src/plugins/shared_ux/public/components/solution_toolbar/items/quick_group.tsx

@@ -8,10 +8,23 @@
 
 import React from 'react';
 import { EuiButtonGroup, htmlIdGenerator, EuiButtonGroupOptionProps } from '@elastic/eui';
-import { ComponentStrings } from '../../../i18n/components';
-
-const { QuickButtonGroup: strings } = ComponentStrings;
+import { i18n } from '@kbn/i18n';
 
+const strings = {
+  QuickButtonGroup: {
+    getAriaButtonLabel: (createType: string) =>
+      i18n.translate('presentationUtil.solutionToolbar.quickButton.ariaButtonLabel', {
+        defaultMessage: `Create new {createType}`,
+        values: {
+          createType,
+        },
+      }),
+    getLegend: () =>
+      i18n.translate('presentationUtil.solutionToolbar.quickButton.legendLabel', {
+        defaultMessage: 'Quick create',
+      }),
+  },
+};
 export interface QuickButtonProps extends Pick<EuiButtonGroupOptionProps, 'iconType'> {
   createType: string;
   onClick: () => void;
@@ -26,7 +39,7 @@ type Option = EuiButtonGroupOptionProps & Omit<QuickButtonProps, 'createType'>;
 export const QuickButtonGroup = ({ buttons }: Props) => {
   const buttonGroupOptions: Option[] = buttons.map((button: QuickButtonProps, index) => {
     const { createType: label, ...rest } = button;
-    const title = strings.getAriaButtonLabel(label);
+    const title = strings.QuickButtonGroup.getAriaButtonLabel(label);
 
     return {
       ...rest,
@@ -46,7 +59,7 @@ export const QuickButtonGroup = ({ buttons }: Props) => {
     <EuiButtonGroup
       buttonSize="m"
       className="quickButtonGroup"
-      legend={strings.getLegend()}
+      legend={strings.QuickButtonGroup.getLegend()}
       options={buttonGroupOptions}
       onChange={onChangeIconsMulti}
       type="multi"

src/plugins/shared_ux/public/components/toolbar_button/toolbar_button.component.tsx

@@ -7,7 +7,6 @@
  */
 
 import React from 'react';
-import './toolbar_button.scss';
 import { EuiButton, PropsOf, EuiButtonProps } from '@elastic/eui';
 import classNames from 'classnames';