From 33329ace2711b139938af05006ed6f00a65f6b99 Mon Sep 17 00:00:00 2001 From: sarahgm <38324334+sarahgm@users.noreply.github.com> Date: Mon, 27 Feb 2023 15:04:35 +0100 Subject: [PATCH] chore: refa and components and support icons (#2824) Co-authored-by: Sebastian Sebald --- .changeset/healthy-dancers-explode.md | 6 ++ .../FieldGroup/bookings-form.demo.tsx | 8 +-- docs/src/demos/components/Input/index.ts | 3 - .../components/Input/input-disabled.demo.tsx | 8 --- .../components/Input/input-type.demo.tsx | 18 ------ .../src/demos/components/Input/input.demo.tsx | 8 --- .../components/Label/label-input.demo.tsx | 4 +- docs/src/demos/components/index.ts | 1 - docs/src/pages/components/number-field.mdx | 4 -- .../components/src/Input/Input.stories.tsx | 18 +++++- packages/components/src/Input/Input.test.tsx | 63 +++++++++++++++++-- packages/components/src/Input/Input.tsx | 56 ++++++++++++----- packages/components/src/Input/InputField.tsx | 27 ++++++++ packages/components/src/Input/index.ts | 1 + .../src/NumberField/NumberField.test.tsx | 31 ++------- .../src/NumberField/NumberField.tsx | 22 +++---- .../src/TextField/TextField.test.tsx | 39 +----------- .../components/src/TextField/TextField.tsx | 32 +++++----- 18 files changed, 190 insertions(+), 159 deletions(-) create mode 100644 .changeset/healthy-dancers-explode.md delete mode 100644 docs/src/demos/components/Input/index.ts delete mode 100644 docs/src/demos/components/Input/input-disabled.demo.tsx delete mode 100644 docs/src/demos/components/Input/input-type.demo.tsx delete mode 100644 docs/src/demos/components/Input/input.demo.tsx mode change 100755 => 100644 packages/components/src/Input/Input.tsx create mode 100755 packages/components/src/Input/InputField.tsx diff --git a/.changeset/healthy-dancers-explode.md b/.changeset/healthy-dancers-explode.md new file mode 100644 index 0000000000..5e5b0642a4 --- /dev/null +++ b/.changeset/healthy-dancers-explode.md @@ -0,0 +1,6 @@ +--- +"@marigold/docs": patch +"@marigold/components": minor +--- + +chore: refa and components and support icons diff --git a/docs/src/demos/components/FieldGroup/bookings-form.demo.tsx b/docs/src/demos/components/FieldGroup/bookings-form.demo.tsx index 24829656b8..ec6fe03703 100644 --- a/docs/src/demos/components/FieldGroup/bookings-form.demo.tsx +++ b/docs/src/demos/components/FieldGroup/bookings-form.demo.tsx @@ -7,7 +7,6 @@ import { ThemeProvider, Stack, FieldBase, - Input, Select, TextArea, } from '@marigold/components'; @@ -31,11 +30,10 @@ export const BookingForm = () => ( - {/* This shouldn't be used, we need to fix it */} - - + + @@ -54,7 +52,7 @@ export const BookingForm = () => ( {/* This shouldn't be used, we need to fix it */} - + diff --git a/docs/src/demos/components/Input/index.ts b/docs/src/demos/components/Input/index.ts deleted file mode 100644 index c5b8fd8dab..0000000000 --- a/docs/src/demos/components/Input/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './input.demo'; -export * from './input-disabled.demo'; -export * from './input-type.demo'; diff --git a/docs/src/demos/components/Input/input-disabled.demo.tsx b/docs/src/demos/components/Input/input-disabled.demo.tsx deleted file mode 100644 index 1701bf61bf..0000000000 --- a/docs/src/demos/components/Input/input-disabled.demo.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { Input, Label } from '@marigold/components'; - -export const DisabledInput = () => ( - -); diff --git a/docs/src/demos/components/Input/input-type.demo.tsx b/docs/src/demos/components/Input/input-type.demo.tsx deleted file mode 100644 index 4d093caa52..0000000000 --- a/docs/src/demos/components/Input/input-type.demo.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { Input, Label, Stack } from '@marigold/components'; - -export const InputType = () => ( - - - - - -); diff --git a/docs/src/demos/components/Input/input.demo.tsx b/docs/src/demos/components/Input/input.demo.tsx deleted file mode 100644 index 01b99fbcb8..0000000000 --- a/docs/src/demos/components/Input/input.demo.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { Label, Input } from '@marigold/components'; - -export const BasicInput = () => ( - -); diff --git a/docs/src/demos/components/Label/label-input.demo.tsx b/docs/src/demos/components/Label/label-input.demo.tsx index 3e35718e1f..07843c7df4 100644 --- a/docs/src/demos/components/Label/label-input.demo.tsx +++ b/docs/src/demos/components/Label/label-input.demo.tsx @@ -3,6 +3,8 @@ import { Label, Input } from '@marigold/components'; export const LabelInput = () => ( ); diff --git a/docs/src/demos/components/index.ts b/docs/src/demos/components/index.ts index 815d83d998..d95bb06683 100644 --- a/docs/src/demos/components/index.ts +++ b/docs/src/demos/components/index.ts @@ -26,7 +26,6 @@ export * from './Headline'; export * from './Icon'; export * from './Image'; export * from './Inline'; -export * from './Input'; export * from './Inset'; export * from './Label'; export * from './Link'; diff --git a/docs/src/pages/components/number-field.mdx b/docs/src/pages/components/number-field.mdx index acb69bedcf..a96ff62fc9 100644 --- a/docs/src/pages/components/number-field.mdx +++ b/docs/src/pages/components/number-field.mdx @@ -36,10 +36,6 @@ To import the component you just have to use this code below. import { NumberField } from '@marigold/components'; ``` -### Appearance - - - ### Props = args => ( - + + + ); Basic.parameters = { chromatic: { viewports: [320, 1200] }, theme: isChromatic() ? 'b2b' : 'stacked', }; + +export const WithIcons: ComponentStory = args => ( + + + + + +); diff --git a/packages/components/src/Input/Input.test.tsx b/packages/components/src/Input/Input.test.tsx index c9f8675418..d2c15a777b 100644 --- a/packages/components/src/Input/Input.test.tsx +++ b/packages/components/src/Input/Input.test.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import { ThemeProvider } from '@marigold/system'; import { Input } from './Input'; +import { Delete, Search } from '@marigold/icons'; const theme = { fonts: { @@ -25,10 +26,12 @@ const theme = { test('supports default variant and themeSection', () => { render( - + + + ); - const input = screen.getByTitle('input'); + const input = screen.getByTestId('input'); expect(input).toHaveStyle(`font-family: Inter`); }); @@ -36,10 +39,12 @@ test('supports default variant and themeSection', () => { test('accepts other variant than default', () => { render( - + + + ); - const input = screen.getByTitle('input'); + const input = screen.getByTestId('input'); expect(input).toHaveStyle(`font-family: Roboto`); }); @@ -47,7 +52,9 @@ test('accepts other variant than default', () => { test('renders correct HTML element', () => { render( - + + + ); const input = screen.getByTitle('input'); @@ -58,10 +65,54 @@ test('renders correct HTML element', () => { test('supports custom prop', () => { render( - + + + ); const input = screen.getByTitle('input'); expect(input).toHaveAttribute('placeholder'); }); + +test('renders correct HTML Div element', () => { + render( + + + + + + ); + const input = screen.getByTestId('input'); + + expect(input instanceof HTMLDivElement).toBeTruthy(); +}); + +test('renders space prop', () => { + render( + + + + + + ); + const input = screen.getByTestId('input'); + + expect(input).toHaveStyle('gap: 4px'); +}); + +test('renders icons within', () => { + render( + + + + + + + + ); + const input = screen.getByTestId('input'); + + // eslint-disable-next-line testing-library/no-node-access + expect(input.children).toBeTruthy(); +}); diff --git a/packages/components/src/Input/Input.tsx b/packages/components/src/Input/Input.tsx old mode 100755 new mode 100644 index a6a043cedc..9e147e1f3d --- a/packages/components/src/Input/Input.tsx +++ b/packages/components/src/Input/Input.tsx @@ -1,6 +1,12 @@ -import React, { forwardRef } from 'react'; +import { + Box, + ResponsiveStyleValue, + ThemeExtension, + useComponentStyles, +} from '@marigold/system'; import { HtmlProps } from '@marigold/types'; -import { Box, ThemeExtension, useComponentStyles } from '@marigold/system'; +import React, { ReactNode } from 'react'; +import { InputField } from './InputField'; // Theme Extension // --------------- @@ -8,20 +14,42 @@ export interface InputThemeExtension extends ThemeExtension<'Input'> {} // Props // --------------- -export interface InputOwnProps extends Omit, 'size'> { - size?: string; +export interface InputProps extends Omit, 'size'> { + children: ReactNode; + space?: ResponsiveStyleValue; variant?: string; + size?: string; } -export interface InputProps - extends Omit, 'size'>, - InputOwnProps {} - // Component // --------------- -export const Input = forwardRef( - ({ variant, size, type = 'text', ...props }: InputOwnProps, ref) => { - const styles = useComponentStyles('Input', { variant, size }); - return ; - } -); +export const Input = ({ + space = 'xsmall', + children, + variant, + size, + ...props +}: InputProps) => { + const [leading, input, trailing] = React.Children.toArray(children); + + const styles = useComponentStyles('Input', { variant, size }); + + return ( + + {leading} + {input} + {trailing} + + ); +}; + +Input.Field = InputField; diff --git a/packages/components/src/Input/InputField.tsx b/packages/components/src/Input/InputField.tsx new file mode 100755 index 0000000000..3bb409ddbd --- /dev/null +++ b/packages/components/src/Input/InputField.tsx @@ -0,0 +1,27 @@ +import React, { forwardRef } from 'react'; +import { HtmlProps } from '@marigold/types'; +import { Box } from '@marigold/system'; + +// Props +// --------------- +export interface InputFieldOwnProps extends Omit, 'size'> {} + +export interface InputFieldProps + extends Omit, 'size'>, + InputFieldOwnProps {} + +// Component +// --------------- +export const InputField = forwardRef( + ({ type = 'text', ...props }: InputFieldOwnProps, ref) => { + return ( + + ); + } +); diff --git a/packages/components/src/Input/index.ts b/packages/components/src/Input/index.ts index ba9fe7ebc6..bb7a7b1263 100644 --- a/packages/components/src/Input/index.ts +++ b/packages/components/src/Input/index.ts @@ -1 +1,2 @@ +export * from './InputField'; export * from './Input'; diff --git a/packages/components/src/NumberField/NumberField.test.tsx b/packages/components/src/NumberField/NumberField.test.tsx index d8490b2b8e..99c2c016e2 100644 --- a/packages/components/src/NumberField/NumberField.test.tsx +++ b/packages/components/src/NumberField/NumberField.test.tsx @@ -134,7 +134,10 @@ test('input can be styled via "Input" styles', () => { ); const numberField = screen.getByTestId('number-field'); - expect(numberField).toHaveStyle(`border-color: ${theme.colors.blue}`); + // eslint-disable-next-line testing-library/no-node-access + expect(numberField.parentElement).toHaveStyle( + `border-color: ${theme.colors.blue}` + ); }); test('group and stepper can styled via "NumberField" styles', () => { @@ -152,32 +155,6 @@ test('group and stepper can styled via "NumberField" styles', () => { expect(steppers[1]).toHaveStyle(`color: ${theme.colors.black}`); }); -test('passes down variant and size', () => { - render( - - - - ); - - const numberField = screen.getByTestId('number-field'); - expect(numberField).toHaveStyle(`color: ${theme.colors.lime}`); - expect(numberField).toHaveStyle(`font-size: ${theme.fontSizes['small-1']}px`); - - const label = screen.getByText('Label'); - expect(label).toHaveStyle(`color: ${theme.colors.lime}`); - expect(label).toHaveStyle(`font-size: ${theme.fontSizes['small-1']}px`); - - const description = screen.getByText('Description'); - expect(description).toHaveStyle(`color: ${theme.colors.lime}`); - expect(description).toHaveStyle(`font-size: ${theme.fontSizes['small-1']}px`); -}); - test('allows to set width via prop', () => { render( diff --git a/packages/components/src/NumberField/NumberField.tsx b/packages/components/src/NumberField/NumberField.tsx index 45144bf845..10c07b403c 100644 --- a/packages/components/src/NumberField/NumberField.tsx +++ b/packages/components/src/NumberField/NumberField.tsx @@ -151,17 +151,17 @@ export const NumberField = forwardRef( {...decrementButtonProps} /> )} - + + + {showStepper && ( { ); const textField = screen.getByTestId('text-field'); - expect(textField).toHaveStyle(`border-color: ${theme.colors.blue}`); -}); - -test('passes down variant and size', () => { - render( - - - + expect(textField.parentElement).toHaveStyle( + `border-color: ${theme.colors.blue}` ); - - const textField = screen.getByTestId('text-field'); - expect(textField).toHaveStyle(`color: ${theme.colors.lime}`); - expect(textField).toHaveStyle(`font-size: ${theme.fontSizes['small-1']}px`); - - const label = screen.getByText('Label'); - expect(label).toHaveStyle(`color: ${theme.colors.lime}`); - expect(label).toHaveStyle(`font-size: ${theme.fontSizes['small-1']}px`); - - const description = screen.getByText('Description'); - expect(description).toHaveStyle(`color: ${theme.colors.lime}`); - expect(description).toHaveStyle(`font-size: ${theme.fontSizes['small-1']}px`); }); test('takes full width by default', () => { diff --git a/packages/components/src/TextField/TextField.tsx b/packages/components/src/TextField/TextField.tsx index 9c10a3eaa9..6b2f6da6a7 100644 --- a/packages/components/src/TextField/TextField.tsx +++ b/packages/components/src/TextField/TextField.tsx @@ -65,13 +65,13 @@ export const TextField = forwardRef( ); const { hoverProps, isHovered } = useHover({}); - const { focusProps, isFocusVisible } = useFocusRing({ + const { focusProps, isFocused } = useFocusRing({ isTextInput: true, autoFocus, }); const stateProps = useStateProps({ hover: isHovered, - focus: isFocusVisible, + focus: isFocused, disabled, readOnly, error, @@ -92,19 +92,21 @@ export const TextField = forwardRef( size={size} width={width} > - + + + ); }