@marigold/components 0.0.3 → 0.3.1

package/src/Inline/Inline.test.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@marigold/system';
+
+import { Inline } from './Inline';
+import { Text } from '../Text';
+
+// Setup
+// ---------------
+const theme = {
+  space: {
+    none: 0,
+    small: 2,
+    medium: 4,
+    large: 8,
+  },
+};
+
+const getLeftPadding = (element: HTMLElement) =>
+  getComputedStyle(element).getPropertyValue('padding-left');
+
+test('default space is "none"', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Inline>
+        <Text>first</Text>
+        <Text>second</Text>
+      </Inline>
+    </ThemeProvider>
+  );
+  const first = screen.getByText(/first/).parentElement!;
+  const second = screen.getByText(/second/).parentElement!;
+
+  expect(getLeftPadding(first)).toEqual('');
+  expect(second).toHaveStyle(`padding-left: 0px`);
+});
+
+test('accepts and uses spacing from theme', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Inline space="small">
+        <Text>first</Text>
+        <Text>second</Text>
+      </Inline>
+    </ThemeProvider>
+  );
+  const first = screen.getByText(/first/);
+  const second = screen.getByText(/second/);
+
+  expect(getLeftPadding(first)).toEqual('');
+  expect(second.parentElement).toHaveStyle(`padding-left: 2px`);
+});
+
+test('supports nesting', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Inline space="large">
+        <Inline space="small" data-testid="leftInline">
+          <Text>first</Text>
+          <Text>second</Text>
+        </Inline>
+        <Inline space="small" data-testid="rightInline">
+          <Text>third</Text>
+          <Text>fourth</Text>
+        </Inline>
+      </Inline>
+    </ThemeProvider>
+  );
+  const first = screen.getByText(/first/);
+  const second = screen.getByText(/second/);
+  const leftInline = screen.getByTestId('leftInline');
+
+  const third = screen.getByText(/third/);
+  const fourth = screen.getByText(/fourth/);
+  const rightInline = screen.getByTestId('rightInline');
+
+  expect(getLeftPadding(leftInline.parentElement!)).toEqual('');
+  expect(rightInline.parentElement).toHaveStyle(`padding-left: 8px`);
+
+  expect(getLeftPadding(first.parentElement!)).toEqual('');
+  expect(second.parentElement).toHaveStyle(`padding-left: 2px`);
+
+  expect(getLeftPadding(third.parentElement!)).toEqual('');
+  expect(fourth.parentElement).toHaveStyle(`padding-left: 2px`);
+});
+
+test('renders div per default', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Inline data-testid="inline">
+        <Text>first</Text>
+        <Text>second</Text>
+      </Inline>
+    </ThemeProvider>
+  );
+
+  const inline = screen.getByTestId('inline');
+  expect(inline instanceof HTMLDivElement).toBeTruthy();
+});

package/src/Inline/Inline.tsx

@@ -0,0 +1,38 @@
+import React, { Children } from 'react';
+import flattenChildren from 'react-keyed-flatten-children';
+
+import { ResponsiveStyleValue } from '@marigold/system';
+
+import { Box } from '../Box';
+
+export type InlineProps = {
+  space?: ResponsiveStyleValue<string>;
+  align?: 'top' | 'center' | 'bottom';
+};
+
+const ALIGNMENT = {
+  top: 'flex-start',
+  center: 'center',
+  bottom: 'flex-end',
+};
+
+export const Inline: React.FC<InlineProps> = ({
+  space = 'none',
+  align = 'center',
+  children,
+  ...props
+}) => (
+  <Box
+    display="inline-flex"
+    css={{ '> * + *': { pl: space } }}
+    alignItems={ALIGNMENT[align]}
+    {...props}
+  >
+    {Children.map(
+      flattenChildren(children) as unknown as React.ReactElement,
+      (child: React.ReactElement) => (
+        <Box>{React.cloneElement(child, {}, child.props.children)}</Box>
+      )
+    )}
+  </Box>
+);

package/src/Inline/index.ts

@@ -0,0 +1 @@
+export * from './Inline';

package/src/Input/Input.stories.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Input } from './Input';
+import { Label } from '../Label';
+
+export default {
+  title: 'Components/Input',
+  argTypes: {
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: '?',
+      table: {
+        defaultValue: {
+          summary: '__default',
+        },
+      },
+    },
+    type: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'date',
+        'datetime-local',
+        'email',
+        'month',
+        'number',
+        'password',
+        'search',
+        'tel',
+        'text',
+        'time',
+        'time',
+        'url',
+        'week',
+      ],
+      defaultValue: 'text',
+      table: {
+        defaultValue: {
+          summary: 'text',
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Input> = args => (
+  <Label htmlFor="input">
+    Label
+    <Input id="input" placeholder="Placeholder..." {...args} />
+  </Label>
+);

package/src/Input/Input.test.tsx

@@ -4,12 +4,16 @@ import { ThemeProvider } from '@marigold/system';
 import { Input } from './Input';
 
 const theme = {
+  fonts: {
+    body: 'Inter',
+    forms: 'Roboto',
+  },
   input: {
-    default: {
-      fontFamily: 'Inter',
+    __default: {
+      fontFamily: 'body',
     },
     input2: {
-      fontFamily: 'Roboto',
+      fontFamily: 'forms',
     },
   },
 };

package/src/Input/Input.tsx

@@ -2,12 +2,24 @@ import React from 'react';
 import { ComponentProps } from '@marigold/types';
 import { Box } from '../Box';
 
+// Theme Extension
+// ---------------
+export interface InputThemeExtension<Value> {
+  input?: {
+    [key: string]: Value;
+  };
+}
+
+// Props
+// ---------------
 export type InputProps = {
   variant?: string;
 } & ComponentProps<'input'>;
 
+// Component
+// ---------------
 export const Input: React.FC<InputProps> = ({
-  variant = 'default',
+  variant = '',
   type = 'text',
   ...props
 }) => <Box {...props} as="input" type={type} variant={`input.${variant}`} />;

package/src/Label/Label.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Label } from './Label';
+
+export default {
+  title: 'Components/Label',
+  argTypes: {
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: '?',
+      table: {
+        defaultValue: {
+          summary: 'above',
+        },
+      },
+    },
+    htmlFor: {
+      control: {
+        type: 'text',
+      },
+      defaultValue: 'input',
+    },
+    required: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Adds required Icon to label',
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Label> = args => (
+  <Label {...args}>Label</Label>
+);

package/src/Label/Label.test.tsx

@@ -4,17 +4,25 @@ import { ThemeProvider } from '@marigold/system';
 import { Label } from './Label';
 
 const theme = {
+  fonts: {
+    body: 'Inter Regular',
+    label: 'Oswald',
+  },
   label: {
-    default: {
-      fontFamily: 'Inter Regular',
+    above: {
+      fontFamily: 'body',
     },
     myLabel: {
-      fontFamily: 'Oswald Regular',
+      fontFamily: 'label',
     },
   },
+  colors: {
+    text: 'black',
+    disabled: 'gray',
+  },
 };
 
-test('supports default variant and themeSection', () => {
+test('supports default variant and styles', () => {
   render(
     <ThemeProvider theme={theme}>
       <Label htmlFor="labelId">label</Label>
@@ -23,6 +31,7 @@ test('supports default variant and themeSection', () => {
   const label = screen.getByText(/label/);
 
   expect(label).toHaveStyle(`font-family: Inter Regular`);
+  expect(label).toHaveStyle(`color: black`);
 });
 
 test('supports other variant than default', () => {
@@ -35,7 +44,7 @@ test('supports other variant than default', () => {
   );
   const label = screen.getByText(/label/);
 
-  expect(label).toHaveStyle(`font-family: Oswald Regular`);
+  expect(label).toHaveStyle(`font-family: Oswald`);
 });
 
 test('supports htmlFor prop', () => {
@@ -49,6 +58,32 @@ test('supports htmlFor prop', () => {
   expect(label).toHaveAttribute('for');
 });
 
+test('supports required prop', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Label htmlFor="labelId" required>
+        label
+      </Label>
+    </ThemeProvider>
+  );
+  const label = screen.getByText(/label/);
+  const parent = label.parentElement;
+
+  expect(parent instanceof HTMLSpanElement).toBeTruthy();
+});
+
+test('supports color prop', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Label htmlFor="labelId" color="disabled">
+        label
+      </Label>
+    </ThemeProvider>
+  );
+  const label = screen.getByText(/label/);
+  expect(label).toHaveStyle(`color: gray`);
+});
+
 test('renders <label> element', () => {
   render(
     <ThemeProvider theme={theme}>

package/src/Label/Label.tsx

@@ -1,18 +1,64 @@
 import React from 'react';
+
 import { ComponentProps } from '@marigold/types';
+import { Required } from '@marigold/icons';
+import { ResponsiveStyleValue } from '@marigold/system';
+
 import { Box } from '../Box';
 
-export type LabelProps = {
-  htmlFor: string;
+// Theme Extension
+// ---------------
+export interface LabelThemeExtension<Value> {
+  label?: {
+    [key: string]: Value;
+  };
+}
+
+// LabelBase
+// ---------------
+export type LabelBaseProps = {
+  htmlFor?: string;
   variant?: string;
+  required?: boolean;
+  color?: ResponsiveStyleValue<string>;
 } & ComponentProps<'label'>;
 
+export const LabelBase: React.FC<LabelProps> = ({
+  variant = 'above',
+  required,
+  color = 'text',
+  children,
+  ...props
+}) => {
+  return (
+    <Box
+      {...props}
+      as="label"
+      __baseCSS={{ color: color }}
+      variant={`label.${variant}`}
+    >
+      {children}
+    </Box>
+  );
+};
+
+// Label
+// ---------------
+export type LabelProps = {
+  required?: boolean;
+} & LabelBaseProps;
+
 export const Label: React.FC<LabelProps> = ({
-  variant = 'default',
+  required,
   children,
   ...props
-}) => (
-  <Box {...props} as="label" variant={`label.${variant}`}>
-    {children}
-  </Box>
-);
+}) => {
+  return required ? (
+    <Box as="span" display="inline-flex" alignItems="center">
+      <LabelBase {...props}>{children}</LabelBase>
+      {required && <Box as={Required} size={16} css={{ color: 'error' }} />}
+    </Box>
+  ) : (
+    <LabelBase {...props}>{children}</LabelBase>
+  );
+};

package/src/Link/Link.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Link } from './Link';
+import { Text } from '../Text';
+
+export default {
+  title: 'Components/Link',
+  argTypes: {
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: '?',
+      table: {
+        defaultValue: {
+          summary: 'link',
+        },
+      },
+    },
+    href: {
+      control: {
+        type: 'text',
+      },
+      description: 'The URL to direct to',
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Link> = args => (
+  <Text>
+    <Link href="https://marigold-ui.io" target="_blank" {...args}>
+      Marigold Docs
+    </Link>
+  </Text>
+);

package/src/Link/Link.test.tsx

@@ -4,64 +4,94 @@ import { ThemeProvider } from '@marigold/system';
 import { Link } from './Link';
 
 const theme = {
-  link: {
-    normal: {
-      fontFamily: 'Inter',
+  fonts: {
+    link: 'Inter',
+    body: 'Oswald',
+  },
+  text: {
+    link: {
+      fontFamily: 'link',
     },
     second: {
-      fontFamily: 'Oswald',
+      fontFamily: 'body',
     },
   },
 };
 
-test('supports default variant and themeSection', () => {
+test('uses `text.link` as default variant', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Link href="#!" title="link">
-        Link
-      </Link>
+      <Link href="#!">Link</Link>
     </ThemeProvider>
   );
-  const link = screen.getByTitle(/link/);
+  const link = screen.getByText(/Link/);
 
   expect(link).toHaveStyle(`font-family: Inter`);
 });
 
-test('accepts other variant than default', () => {
+test('allows to change variants via `variant` prop (with "text" prefix)', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Link href="#!" title="link" variant="second">
+      <Link href="#!" variant="second">
         Link
       </Link>
     </ThemeProvider>
   );
-  const link = screen.getByTitle(/link/);
+  const link = screen.getByText(/Link/);
 
   expect(link).toHaveStyle(`font-family: Oswald`);
 });
 
-test('renders correct HTML element', () => {
+test('renders a <a> element by default', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Link href="#!" title="link">
-        Link
-      </Link>
+      <Link href="#!">Link</Link>
     </ThemeProvider>
   );
-  const link = screen.getByTitle(/link/);
+  const link = screen.getByText(/Link/);
 
   expect(link instanceof HTMLAnchorElement).toBeTruthy();
 });
 
-test('accepts custom styles prop className', () => {
+test('accepts custom className', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Link href="#!" className="custom-class-name" title="link">
-        link
+      <Link href="#!" className="custom-class-name">
+        Link
       </Link>
     </ThemeProvider>
   );
-  const link = screen.getByTitle(/link/);
+  const link = screen.getByText(/Link/);
 
   expect(link.className).toMatch('custom-class-name');
 });
+
+test('accepts other routing components', () => {
+  const RouterLink = React.forwardRef<
+    HTMLSpanElement,
+    { to: string; children?: React.ReactNode }
+  >(() => <span>I am a Router Link!</span>);
+
+  render(
+    <ThemeProvider theme={theme}>
+      <Link as={RouterLink} to="/Home">
+        Link
+      </Link>
+    </ThemeProvider>
+  );
+
+  const link = screen.getByText('I am a Router Link!');
+  expect(link).toBeTruthy();
+});
+
+test('a link can be disabled via aria attributes', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Link href="#!" disabled={true}>
+        Link
+      </Link>
+    </ThemeProvider>
+  );
+  const link = screen.getByText(/Link/);
+  expect(link.getAttribute('aria-disabled')).toEqual('true');
+});

package/src/Link/Link.tsx

@@ -1,17 +1,43 @@
-import React from 'react';
-import { ComponentProps } from '@marigold/types';
-import { Box } from '../Box';
+import React, { useRef } from 'react';
+import { useLink } from '@react-aria/link';
+import { PolymorphicComponent, PolymorphicProps } from '@marigold/types';
 
-export type LinkProps = {
-  variant?: string;
-} & ComponentProps<'a'>;
+import { Text, TextOwnProps } from '../Text';
 
-export const Link: React.FC<LinkProps> = ({
-  variant = 'normal',
+// Theme Extension
+// ---------------
+export interface LinkThemeExtension<Value> {
+  link?: Value;
+}
+
+// Props
+// ---------------
+export type LinkOwnProps = { disabled?: boolean } & TextOwnProps;
+export type LinkProps = PolymorphicProps<LinkOwnProps, 'a'>;
+
+// Component
+// ---------------
+export const Link = (({
+  as = 'a',
+  variant = 'link',
   children,
+  disabled,
   ...props
-}) => (
-  <Box {...props} as="a" variant={`link.${variant}`}>
-    {children}
-  </Box>
-);
+}: LinkProps) => {
+  const ref = useRef<any>();
+  const { linkProps } = useLink(
+    {
+      // We typecast here because the element could very well be a `span`
+      ...(props as PolymorphicProps<LinkOwnProps, any>),
+      elementType: typeof as === 'string' ? as : 'span',
+      isDisabled: disabled,
+    },
+    ref
+  );
+
+  return (
+    <Text {...props} {...linkProps} as={as} variant={variant} ref={ref}>
+      {children}
+    </Text>
+  );
+}) as PolymorphicComponent<LinkOwnProps, 'a'>;