ButtonTextWithAddIcon shared component

web/packages/shared/components/ButtonTextWithAddIcon/ButtonTextWithAddIcon.story.tsx

@@ -0,0 +1,50 @@
+/**
+ * Teleport
+ * Copyright (C) 2023  Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React, { useState } from 'react';
+
+import { ButtonTextWithAddIcon } from './ButtonTextWithAddIcon';
+
+export default {
+  title: 'Shared',
+};
+
+export const Button = () => {
+  const [label, setLabel] = useState('Add Item (click me)');
+  return (
+    <div style={{ width: '300px' }}>
+      <ButtonTextWithAddIcon label={'Add Item'} onClick={() => null} />
+      <ButtonTextWithAddIcon
+        label={label}
+        onClick={() => setLabel('Add More Item (click me)')}
+      />
+      <ButtonTextWithAddIcon
+        label={'Add Item Disabled'}
+        onClick={() => null}
+        disabled={true}
+      />
+      <ButtonTextWithAddIcon
+        label={'Add Item with Medium Icon Size'}
+        onClick={() => null}
+        iconSize={'medium'}
+      />
+    </div>
+  );
+};
+
+Button.storyName = 'ButtonTextWithAddIcon';

web/packages/shared/components/ButtonTextWithAddIcon/ButtonTextWithAddIcon.test.tsx

@@ -0,0 +1,46 @@
+/**
+ * Teleport
+ * Copyright (C) 2023  Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+
+import { render, fireEvent, screen } from 'design/utils/testing';
+
+import { ButtonTextWithAddIcon } from './ButtonTextWithAddIcon';
+
+test('buttonTextWithAddIcon', () => {
+  const onClick = jest.fn();
+  const label = 'Add Item';
+
+  const { rerender } = render(
+    <ButtonTextWithAddIcon label={label} onClick={() => onClick('click')} />
+  );
+
+  expect(screen.getByText('Add Item')).toBeInTheDocument();
+  fireEvent.click(screen.getByText('Add Item'));
+
+  expect(onClick).toHaveBeenCalledWith('click');
+
+  rerender(
+    <ButtonTextWithAddIcon
+      label={label}
+      onClick={() => onClick('click')}
+      disabled={true}
+    />
+  );
+  expect(screen.getByText('Add Item')).toBeDisabled();
+});

web/packages/shared/components/ButtonTextWithAddIcon/ButtonTextWithAddIcon.tsx

@@ -0,0 +1,58 @@
+/**
+ * Teleport
+ * Copyright (C) 2023  Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+import { ButtonText } from 'design';
+import { Add as AddIcon } from 'design/Icon';
+
+export const ButtonTextWithAddIcon = ({
+  label,
+  onClick,
+  disabled,
+  iconSize = 12,
+}: {
+  label: string;
+  onClick: () => void;
+  disabled?: boolean;
+  iconSize?: number | 'small' | 'medium' | 'large' | 'extraLarge';
+}) => {
+  return (
+    <ButtonText
+      onClick={onClick}
+      css={`
+        padding-left: 0px;
+        &:disabled {
+          .icon-add {
+            opacity: 0.35;
+          }
+          pointer-events: none;
+        }
+      `}
+      disabled={disabled}
+    >
+      <AddIcon
+        className="icon-add"
+        size={iconSize}
+        css={`
+          margin-right: 3px;
+        `}
+      />
+      {label}
+    </ButtonText>
+  );
+};

web/packages/shared/components/ButtonTextWithAddIcon/index.ts

@@ -0,0 +1,19 @@
+/**
+ * Teleport
+ * Copyright (C) 2023  Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export { ButtonTextWithAddIcon } from './ButtonTextWithAddIcon';

web/packages/teleport/src/Discover/Shared/LabelsCreater/LabelsCreater.tsx

@@ -17,11 +17,12 @@
  */
 
 import React from 'react';
-import { Box, Flex, ButtonIcon, ButtonText, Text } from 'design';
+import { Box, Flex, ButtonIcon, Text } from 'design';
 import * as Icons from 'design/Icon';
 import FieldInput from 'shared/components/FieldInput';
 import { useValidation, Validator } from 'shared/components/Validation';
 import { requiredField } from 'shared/components/Validation/rules';
+import { ButtonTextWithAddIcon } from 'shared/components/ButtonTextWithAddIcon';
 
 import { ResourceLabel } from 'teleport/services/agents';
 
@@ -174,30 +175,12 @@ export function LabelsCreater({
           );
         })}
       </Box>
-      <ButtonText
+      <ButtonTextWithAddIcon
+        label="Add New Label"
         onClick={addLabel}
-        css={`
-          padding-left: 0px;
-          &:disabled {
-            .icon-add {
-              opacity: 0.35;
-            }
-            pointer-events: none;
-          }
-        `}
         disabled={disableBtns}
-      >
-        <Icons.Add
-          className="icon-add"
-          disabled={disableBtns}
-          size="small"
-          css={`
-            margin-top: -2px;
-            margin-right: 3px;
-          `}
-        />
-        Add New Label
-      </ButtonText>
+        iconSize="small"
+      />
     </>
   );
 }