add tests and some styles

docs/src/demos/components/TextField/index.ts

@@ -4,3 +4,4 @@ export * from './textfield-req.demo';
 export * from './textfield-error.demo';
 export * from './textfield-number.demo';
 export * from './textfield-types.demo';
+export * from './textfield-group.demo';

docs/src/demos/components/TextField/textfield-group.demo.tsx

@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import { Stack, TextField, FieldBaseGroup, Radio } from '@marigold/components';
+
+export const GroupTextField = () => {
+  const [value, setValue] = useState<string>('');
+  const error = value.length > 0 && !/^\d+$/.test(value);
+
+  return (
+    <FieldBaseGroup labelWidth="20%">
+      <Stack space="small">
+        <TextField label="Name" />
+        <TextField
+          label="Promo Code"
+          description="You'll find your promo code on the back of your ticket."
+          errorMessage="Your promo code is not valid! Please review your input."
+          value={value}
+          onChange={setValue}
+          error={error}
+          inputMode="numeric"
+          pattern="[0-9]*"
+        />
+        <Radio.Group label="Choose">
+          <Radio value="1">One</Radio>
+          <Radio value="2">Two</Radio>
+          <Radio value="3">Three</Radio>
+          <Radio value="4">Four</Radio>
+        </Radio.Group>
+      </Stack>
+    </FieldBaseGroup>
+  );
+};

docs/src/pages/components/text-field.mdx

@@ -12,6 +12,8 @@ The `<TextField>` is a form component which allows user to enter text with a key
 
 It has many properties that it brings with it. You can set label for labeling the `<TextField>` itself, a `description` which behaves as help text. It is also possible to add error messages by adding the `error` and `errorMessage` prop. Another often used property is the `required` prop. You can also write all other HTML input properties down.
 
+The `<FieldBaseGroup>` is a component to layout the label and the fieldbase itself. On that you can use `labelWidth` which is a string type to set the width of the label. Because the label is set to the left side in the core theme, it has only an impact on that.
+
 <Preview>
   <TextField label="Try me" description="You should really try this!" />
 </Preview>
@@ -150,10 +152,18 @@ The example shows how to set the `error` and `errorMessage` properties. If you f
 
 ```
 
-### Use different `input` methods
+### Use different input methods
 
 In this example you can see different types of inputs, like email, date or telephone number.
 
 ```tsx preview file=components/TextField/textfield-types.demo.tsx
 
 ```
+
+### Using with FieldBaseGroup
+
+This example shows how to use the `<FieldBaseGroup>` together with some form components like the `<TextField>` and `<Radio>`. It is build for the Core and has only impact of that.
+
+```tsx preview file=components/TextField/textfield-group.demo.tsx
+
+```

packages/components/src/FieldBase/FieldBase.stories.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import type { Meta, ComponentStory } from '@storybook/react';
 import { FieldBase } from './FieldBase';
 import { Select } from '../Select';
-import { Box } from '@marigold/system';
 import { FieldBaseGroup } from './FieldBaseGroup';
 import { TextField } from '../TextField';
 import { RadioGroup } from '../Radio/RadioGroup';

packages/components/src/FieldBase/FieldBaseGroup.test.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { FieldBase } from './FieldBase';
+import { FieldBaseGroup } from './FieldBaseGroup';
+
+test('renders FieldBaseGroup', () => {
+  render(
+    <FieldBaseGroup>
+      <FieldBase label="Label" description="Description">
+        <input type="text" />
+      </FieldBase>
+    </FieldBaseGroup>
+  );
+
+  const group = screen.getByText('Label').parentElement;
+  expect(group).toBeInTheDocument();
+});
+
+test('renders FieldBaseGroup by default without label width', () => {
+  render(
+    <FieldBaseGroup>
+      <FieldBase label="Label" description="Description">
+        <input type="text" />
+      </FieldBase>
+    </FieldBaseGroup>
+  );
+
+  const label = screen.getByText('Label');
+  expect(label).not.toHaveAttribute('labelWidth');
+});
+
+test('renders FieldBaseGroup  with label width', () => {
+  render(
+    <FieldBaseGroup labelWidth="20px">
+      <FieldBase label="Label" description="Description">
+        <input type="text" />
+      </FieldBase>
+    </FieldBaseGroup>
+  );
+
+  const label = screen.getByText('Label');
+  expect(label).toHaveStyle('width: 20px');
+});
+
+test('renders FieldBaseGroups children', () => {
+  render(
+    <FieldBaseGroup labelWidth="20px">
+      <FieldBase label="Label" description="Description">
+        <input type="text" />
+      </FieldBase>
+    </FieldBaseGroup>
+  );
+
+  expect(screen.getByText('Label')).toBeInTheDocument();
+  expect(screen.getByText('Description')).toBeInTheDocument();
+});

packages/components/src/FieldBase/FieldBaseGroup.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { createContext, ReactNode, useContext } from 'react';
 
 export interface FieldBaseGroupContextProps {

packages/components/src/FieldBase/index.ts

@@ -1 +1,2 @@
 export * from './FieldBase';
+export * from './FieldBaseGroup';

packages/components/src/Label/Label.test.tsx

@@ -76,3 +76,15 @@ test('can render as <span>', () => {
   const label = screen.getByText(/label/);
   expect(label instanceof HTMLSpanElement).toBeTruthy();
 });
+
+test('accepts labelwidth', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Label as="span" labelWidth="100px">
+        label
+      </Label>
+    </ThemeProvider>
+  );
+  const label = screen.getByText(/label/);
+  expect(label).toHaveStyle('width: 100px');
+});

packages/components/src/Label/Label.tsx

@@ -39,7 +39,6 @@ export const Label = ({
       aria-required={required}
       __baseCSS={{
         display: 'flex',
-        flexDirection: 'row',
         width: labelWidth,
       }}
       css={styles}

packages/components/src/index.ts

@@ -15,6 +15,7 @@ export * from './Columns';
 export * from './Container';
 export * from './Dialog';
 export * from './Divider';
+export * from './FieldBase';
 export * from './Footer';
 export * from './Header';
 export * from './Headline';

themes/theme-b2b/src/components/Field.style.ts

@@ -0,0 +1,7 @@
+import type { Theme } from '@marigold/components';
+
+export const Field: Theme['components']['Field'] = {
+  base: {
+    flexDirection: 'column',
+  },
+};

themes/theme-b2b/src/components/index.ts

@@ -4,6 +4,7 @@ export * from './Card.style';
 export * from './Checkbox.style';
 export * from './Dialog.style';
 export * from './Divider.style';
+export * from './Field.style';
 export * from './Headline.style';
 export * from './HelpText.style';
 export * from './Image.style';

themes/theme-unicorn/src/components/Field.style.ts

@@ -0,0 +1,7 @@
+import type { Theme } from '@marigold/components';
+
+export const Field: Theme['components']['Field'] = {
+  base: {
+    flexDirection: 'column',
+  },
+};

themes/theme-unicorn/src/components/index.ts

@@ -4,6 +4,7 @@ export * from './Card.style';
 export * from './Checkbox.style';
 export * from './Dialog.style';
 export * from './Divider.style';
+export * from './Field.style';
 export * from './Headline.style';
 export * from './HelpText.style';
 export * from './Image.style';