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}
>
-
+
+
+
);
}