Revert "Implement new inputs and select components"

web/packages/design/src/Checkbox/Checkbox.tsx

@@ -34,7 +34,7 @@ interface CheckboxInputProps {
   disabled?: boolean;
   id?: string;
   name?: string;
-  readOnly?: boolean;
+  readonly?: boolean;
   role?: string;
   type?: 'checkbox' | 'radio';
   value?: string;

web/packages/design/src/Icon/Icon.tsx

@@ -19,7 +19,7 @@
 import React, { PropsWithChildren } from 'react';
 import styled from 'styled-components';
 
-import { space, color, borderRadius, SpaceProps } from 'design/system';
+import { space, color, borderRadius } from 'design/system';
 
 export function Icon({
   size = 'medium',
@@ -65,14 +65,28 @@ const StyledIcon = styled.span`
 
 export type IconSize = 'small' | 'medium' | 'large' | 'extraLarge' | number;
 
-export type IconProps = SpaceProps & {
+export type IconProps = {
   size?: IconSize;
   color?: string;
   title?: string;
+  m?: number | string;
+  mr?: number | string;
+  ml?: number | string;
+  mb?: number | string;
+  mt?: number | string;
+  my?: number | string;
+  mx?: number | string;
+  p?: number | string;
+  pr?: number | string;
+  pl?: number | string;
+  pb?: number | string;
+  pt?: number | string;
+  py?: number | string;
+  px?: number | string;
   role?: string;
   style?: React.CSSProperties;
   borderRadius?: number;
-  onClick?: React.MouseEventHandler;
+  onClick?: () => void;
   disabled?: boolean;
   as?: any;
   to?: string;

web/packages/shared/@types/react-select.d.ts → web/packages/design/src/Input/Input.story.jsx

@@ -1,6 +1,6 @@
-/**
+/*
  * Teleport
- * Copyright (C) 2024 Gravitational, Inc.
+ * 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
@@ -16,16 +16,19 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-// Declare custom props via module augmentation, per
-// https://react-select.com/typescript#custom-select-props
+import React from 'react';
 
-import type {} from 'react-select/base';
-// This import is necessary for module augmentation.
-// It allows us to extend the 'Props' interface in the 'react-select/base' module
-// and add our custom property 'myCustomProp' to it.
+import Input from '.';
 
-declare module 'react-select/base' {
-  export interface Props {
-    customProps?: Record<string, any>;
-  }
-}
+export default {
+  title: 'Design/Inputs',
+};
+
+export const Inputs = () => (
+  <>
+    <Input mb={4} placeholder="Enter SomeText" />
+    <Input mb={4} hasError={true} defaultValue="This field has an error" />
+    <Input mb={4} readOnly defaultValue="Read-only field" />
+    <Input mb={4} disabled defaultValue="Disabled field" />
+  </>
+);

web/packages/design/src/Input/Input.test.tsx → web/packages/design/src/Input/Input.test.js

@@ -18,24 +18,15 @@
 
 import React from 'react';
 
-import { render, screen, theme } from 'design/utils/testing';
+import { render, theme } from 'design/utils/testing';
 
 import Input from './Input';
 
 describe('design/Input', () => {
-  it('forwards a ref', () => {
-    const ref = jest.fn();
-    render(<Input ref={ref} defaultValue="foo" />);
-    expect(ref).toHaveBeenCalledWith(expect.objectContaining({ value: 'foo' }));
-  });
   it('respects hasError prop', () => {
-    render(<Input hasError={true} />);
-    expect(screen.getByRole('textbox')).toHaveStyle({
-      'border-color': theme.colors.interactive.solid.danger.default.background,
+    let { container } = render(<Input hasError={true} />);
+    expect(container.firstChild).toHaveStyle({
+      'border-color': theme.colors.error.main,
     });
-    expect(screen.getByRole('graphics-symbol')).toHaveAttribute(
-      'aria-label',
-      'Error'
-    );
   });
 });