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 } from 'design/system';
+import { space, color, borderRadius, SpaceProps } from 'design/system';
 
 export function Icon({
  size = 'medium',
@@ -65,28 +65,14 @@ const StyledIcon = styled.span`
 
 export type IconSize = 'small' | 'medium' | 'large' | 'extraLarge' | number;
 
-export type IconProps = {
+export type IconProps = SpaceProps & {
  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?: () => void;
+ onClick?: React.MouseEventHandler;
  disabled?: boolean;
  as?: any;
  to?: string;

web/packages/design/src/Input/Input.story.tsx

@@ -0,0 +1,91 @@
+/*
+ * 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 * as Icon from 'design/Icon';
+import { H2 } from 'design/Text';
+import Flex from 'design/Flex';
+import Box from 'design/Box';
+
+import Input from '.';
+
+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" />
+ <Input mb={4} disabled placeholder="Disabled field with a placeholder" />
+ <Input mb={4} icon={Icon.Magnifier} placeholder="Input with an icon" />
+ <Input
+ mb={4}
+ icon={Icon.Magnifier}
+ disabled
+ placeholder="Disabled Input with an icon"
+ />
+ <Input
+ mb={4}
+ icon={Icon.Magnifier}
+ placeholder="Input with an icon and error"
+ hasError
+ />
+ <H2 mb={2}>Sizes</H2>
+ <Flex gap={4} mb={4}>
+ <Box flex="1">
+ <Input icon={Icon.Magnifier} size="large" defaultValue="large" />
+ </Box>
+ <Box flex="1">
+ <Input icon={Icon.Magnifier} size="medium" defaultValue="medium" />
+ </Box>
+ <Box flex="1">
+ <Input icon={Icon.Magnifier} size="small" defaultValue="small" />
+ </Box>
+ </Flex>
+ <Flex gap={4}>
+ <Box flex="1">
+ <Input
+ icon={Icon.Magnifier}
+ hasError
+ size="large"
+ defaultValue="large"
+ />
+ </Box>
+ <Box flex="1">
+ <Input
+ icon={Icon.Magnifier}
+ hasError
+ size="medium"
+ defaultValue="medium"
+ />
+ </Box>
+ <Box flex="1">
+ <Input
+ icon={Icon.Magnifier}
+ hasError
+ size="small"
+ defaultValue="small"
+ />
+ </Box>
+ </Flex>
+ </>
+);

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

@@ -18,15 +18,24 @@
 
 import React from 'react';
 
-import { render, theme } from 'design/utils/testing';
+import { render, screen, 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', () => {
- let { container } = render(<Input hasError={true} />);
- expect(container.firstChild).toHaveStyle({
- 'border-color': theme.colors.error.main,
+ render(<Input hasError={true} />);
+ expect(screen.getByRole('textbox')).toHaveStyle({
+ 'border-color': theme.colors.interactive.solid.danger.default.background,
  });
+ expect(screen.getByRole('graphics-symbol')).toHaveAttribute(
+ 'aria-label',
+ 'Error'
+ );
  });
 });