@marigold/components 0.2.0 → 0.3.0

package/src/Stack/Stack.stories.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Stack } from './Stack';
+import { Text } from '../Text';
+
+export default {
+  title: 'Components/Stack',
+  argTypes: {
+    space: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'none',
+        'xxsmall',
+        'xsmall',
+        'small',
+        'medium',
+        'large',
+        'xlarge',
+        'xxlarge',
+      ],
+      description: 'Responsive Style Value',
+      table: {
+        defaultValue: {
+          summary: 'none',
+        },
+      },
+    },
+    align: {
+      control: {
+        type: 'select',
+      },
+      options: ['left', 'right', 'center'],
+      description: 'HTML element style',
+      table: {
+        defaultValue: {
+          summary: 'left',
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Stack> = args => (
+  <Stack {...args}>
+    <Text as="h2" variant="headline2">
+      Heading
+    </Text>
+    <Text>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+      dignissim dapibus elit, vel egestas felis pharetra non. Cras malesuada,
+      massa nec ultricies efficitur, lectus ante consequat magna, a porttitor
+      massa ex ut quam.
+    </Text>
+  </Stack>
+);

package/src/Stack/Stack.test.tsx

@@ -16,20 +16,26 @@ const theme = {
   },
 };
 
+const getTopPadding = (element: HTMLElement) =>
+  getComputedStyle(element).getPropertyValue('padding-top');
+
 test('default space is "none"', () => {
   render(
     <ThemeProvider theme={theme}>
       <Stack>
         <Text>first</Text>
         <Text>second</Text>
+        <Text>third</Text>
       </Stack>
     </ThemeProvider>
   );
-  const first = screen.getByText(/first/);
-  const second = screen.getByText(/second/);
+  const first = screen.getByText(/first/).parentElement!;
+  const second = screen.getByText(/second/).parentElement!;
+  const third = screen.getByText(/third/).parentElement!;
 
-  expect(first).toHaveStyle(`padding-top: 0px`);
+  expect(getTopPadding(first)).toEqual('');
   expect(second).toHaveStyle(`padding-top: 0px`);
+  expect(third).toHaveStyle(`padding-top: 0px`);
 });
 
 test('accepts and uses spacing from theme', () => {
@@ -38,14 +44,17 @@ test('accepts and uses spacing from theme', () => {
       <Stack space="small">
         <Text>first</Text>
         <Text>second</Text>
+        <Text>third</Text>
       </Stack>
     </ThemeProvider>
   );
   const first = screen.getByText(/first/);
   const second = screen.getByText(/second/);
+  const third = screen.getByText(/third/);
 
-  expect(first.parentElement).toHaveStyle(`padding-top: 0px`);
+  expect(getTopPadding(first)).toEqual('');
   expect(second.parentElement).toHaveStyle(`padding-top: 2px`);
+  expect(third.parentElement).toHaveStyle(`padding-top: 2px`);
 });
 
 test('aligns children left by default', () => {
@@ -104,13 +113,13 @@ test('supports nesting', () => {
   const fourth = screen.getByText(/fourth/);
   const lowerStack = screen.getByTestId('lowerStack');
 
-  expect(upperStack.parentElement).toHaveStyle(`padding-top: 0px`);
+  expect(getTopPadding(upperStack.parentElement!)).toEqual('');
   expect(lowerStack.parentElement).toHaveStyle(`padding-top: 8px`);
 
-  expect(first.parentElement).toHaveStyle(`padding-top: 0px`);
+  expect(getTopPadding(first.parentElement!)).toEqual('');
   expect(second.parentElement).toHaveStyle(`padding-top: 2px`);
 
-  expect(third.parentElement).toHaveStyle(`padding-top: 0px`);
+  expect(getTopPadding(third.parentElement!)).toEqual('');
   expect(fourth.parentElement).toHaveStyle(`padding-top: 2px`);
 });
 

package/src/Text/{Text.stories.mdx → Text.stories.tsx}

@@ -1,15 +1,16 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
 import { Text } from './Text';
 
-<Meta
-  title="Components/Text"
-  argTypes={{
+export default {
+  title: 'Components/Text',
+  argTypes: {
     as: {
       control: {
         type: 'select',
       },
-      options: ['span', 'p'],
-      description: 'Set inline',
+      options: ['span', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+      description: 'Set HTML element',
       table: {
         defaultValue: {
           summary: 'span',
@@ -20,8 +21,16 @@ import { Text } from './Text';
       control: {
         type: 'select',
       },
-      options: ['body', 'heading'],
-      description: 'Doesnt matter',
+      options: [
+        'body',
+        'headline1',
+        'headline2',
+        'headline3',
+        'headline4',
+        'headline5',
+        'headline6',
+      ],
+      description: 'CHoose between body and different headlines',
       table: {
         defaultValue: {
           summary: 'body',
@@ -39,12 +48,10 @@ import { Text } from './Text';
         },
       },
     },
-  }}
-/>
+  },
+} as Meta;
 
-# Text
-
-export const Template = args => (
+export const Basic: ComponentStory<typeof Text> = args => (
   <Text {...args}>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
     dignissim dapibus elit, vel egestas felis pharetra non. Cras malesuada,
@@ -52,9 +59,3 @@ export const Template = args => (
     massa ex ut quam.
   </Text>
 );
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />

package/src/Text/Text.test.tsx

@@ -15,7 +15,7 @@ const theme = {
     body: {
       fontFamily: 'Oswald Regular',
     },
-    heading: {
+    headline1: {
       fontFamily: 'Inter',
     },
   },
@@ -35,7 +35,7 @@ test('uses `text.body` as default variant', () => {
 test('allows to change variants via `variant` prop (with "text" prefix)', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Text variant="heading">text</Text>
+      <Text variant="headline1">text</Text>
     </ThemeProvider>
   );
   const text = screen.getByText(/text/);

package/src/Text/Text.tsx

@@ -7,6 +7,16 @@ import {
 
 import { Box, BoxOwnProps } from '../Box';
 
+// Theme Extension
+// ---------------
+export interface TextThemeExtension<Value> {
+  text?: {
+    [key: string]: Value;
+  };
+}
+
+// Props
+// ---------------
 export type TextOwnProps = {
   align?: ResponsiveStyleValue<string>;
   color?: ResponsiveStyleValue<string>;
@@ -17,6 +27,8 @@ export type TextOwnProps = {
 
 export type TextProps = PolymorphicPropsWithRef<TextOwnProps, 'span'>;
 
+// Component
+// ---------------
 export const Text: PolymorphicComponentWithRef<TextOwnProps, 'span'> =
   forwardRef(
     (

package/src/Textarea/{Textarea.stories.mdx → Textarea.stories.tsx}

@@ -1,16 +1,17 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Textarea } from '../Textarea';
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Textarea } from '.';
 
-<Meta
-  title="Components/Textarea"
-  argTypes={{
+export default {
+  title: 'Components/Textarea',
+  argTypes: {
     variant: {
       control: {
         type: 'text',
       },
       table: {
         defaultValue: {
-          summary: 'default',
+          summary: '__default',
         },
       },
     },
@@ -18,18 +19,15 @@ import { Textarea } from '../Textarea';
       control: {
         type: 'text',
       },
-      description: 'Text above',
+      description: 'Label text',
+      defaultValue: 'Textarea Label',
     },
     htmlFor: {
       control: {
         type: 'text',
       },
       description: 'Bind to label',
-      table: {
-        defaultValue: {
-          summary: 'textarea',
-        },
-      },
+      defaultValue: 'textareaId',
     },
     error: {
       control: {
@@ -58,17 +56,9 @@ import { Textarea } from '../Textarea';
         },
       },
     },
-  }}
-/>
+  },
+} as Meta;
 
-# Textarea
-
-export const Template = args => (
-  <Textarea placeholder="Placeholder..." label="Textarea Label" {...args} />
+export const Basic: ComponentStory<typeof Textarea> = args => (
+  <Textarea placeholder="Placeholder..." {...args} />
 );
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />

package/src/Textarea/Textarea.test.tsx

@@ -4,12 +4,16 @@ import { ThemeProvider } from '@marigold/system';
 import { Textarea } from '../Textarea';
 
 const theme = {
+  fonts: {
+    body: 'Inter Regular',
+    fancy: 'Roboto',
+  },
   textarea: {
-    default: {
-      fontFamily: 'Inter Regular',
+    __default: {
+      fontFamily: 'body',
     },
     textarea2: {
-      fontFamily: 'Roboto',
+      fontFamily: 'fancy',
     },
   },
 };

package/src/Textarea/Textarea.tsx

@@ -6,6 +6,16 @@ import { ValidationMessage } from '../ValidationMessage';
 import { Label } from '../Label';
 import { Box } from '../Box';
 
+// Theme Extension
+// ---------------
+export interface TextareaThemeExtension<Value> {
+  textarea?: {
+    [key: string]: Value;
+  };
+}
+
+// Props
+// ---------------
 export type TextareaProps = {
   variant?: string;
   label?: string;
@@ -15,8 +25,10 @@ export type TextareaProps = {
   errorMessage?: string;
 } & ComponentProps<'textarea'>;
 
+// Component
+// ---------------
 export const Textarea: React.FC<TextareaProps> = ({
-  variant = 'default',
+  variant = '',
   htmlFor = 'textarea',
   label,
   error,

package/src/ValidationMessage/{ValidationMessage.stories.mdx → ValidationMessage.stories.tsx}

@@ -1,36 +1,27 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
 import { ValidationMessage } from './ValidationMessage';
 import { Exclamation } from '@marigold/icons';
 
-<Meta
-  title="Components/ValidationMessage"
-  argTypes={{
+export default {
+  title: 'Components/ValidationMessage',
+  argTypes: {
     variant: {
       control: {
         type: 'text',
       },
-      description: '?',
       table: {
         defaultValue: {
           summary: 'error',
         },
       },
     },
-  }}
-/>
+  },
+} as Meta;
 
-# ValidationMessage
-
-
-export const Template = args => (
+export const Basic: ComponentStory<typeof ValidationMessage> = args => (
   <ValidationMessage {...args}>
     <Exclamation />
     Validation message
   </ValidationMessage>
 );
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />

package/src/ValidationMessage/ValidationMessage.test.tsx

@@ -4,12 +4,17 @@ import { ThemeProvider } from '@marigold/system';
 import { ValidationMessage } from './ValidationMessage';
 
 const theme = {
+  space: {
+    none: 0,
+    small: 4,
+    medium: 8,
+  },
   validation: {
     error: {
-      p: '8px',
+      p: 'medium',
     },
     warning: {
-      p: '4px',
+      p: 'small',
     },
   },
 };

package/src/ValidationMessage/ValidationMessage.tsx

@@ -3,10 +3,22 @@ import { ComponentProps } from '@marigold/types';
 
 import { Box } from '../Box';
 
+// Theme Extension
+// ---------------
+export interface ValidationMessageThemeExtension<Value> {
+  validation?: {
+    [key: string]: Value;
+  };
+}
+
+// Props
+// ---------------
 export type ValidationMessageProps = {
   variant?: string;
 } & ComponentProps<'span'>;
 
+// Component
+// ---------------
 export const ValidationMessage: React.FC<ValidationMessageProps> = ({
   variant = 'error',
   children,

package/src/VisuallyHidden/VisuallyHidden.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+
+import { VisuallyHidden } from './VisuallyHidden';
+import { Text } from '../Text';
+
+export default {
+  title: 'Components/Hidden',
+} as Meta;
+
+export const Basic: ComponentStory<typeof VisuallyHidden> = ({
+  children,
+  ...args
+}) => (
+  <>
+    <Text>The Text below is visually hidden</Text>
+    <VisuallyHidden {...args}>Invisible!</VisuallyHidden>
+  </>
+);

package/src/VisuallyHidden/VisuallyHidden.test.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { VisuallyHidden } from './VisuallyHidden';
+
+test('is visually hidden', () => {
+  render(<VisuallyHidden>Default</VisuallyHidden>);
+  const hidden = screen.getByText('Default');
+
+  expect(hidden).toHaveStyle(`overflow: hidden`);
+});

package/src/VisuallyHidden/VisuallyHidden.tsx

@@ -0,0 +1 @@
+export { VisuallyHidden } from '@react-aria/visually-hidden';

package/src/VisuallyHidden/index.ts

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

package/src/index.ts

@@ -12,9 +12,9 @@ export * from './Columns';
 export * from './Dialog';
 export * from './Divider';
 export * from './Field';
-export * from './Heading';
-export * from './Hidden';
+export * from './VisuallyHidden';
 export * from './Image';
+export * from './Inline';
 export * from './Label';
 export * from './Link';
 export * from './Menu';

package/src/theme.ts

@@ -1,49 +1,50 @@
-export type CSSObject = object;
+import { type CSSObject, type Theme as Scales } from '@marigold/system';
 
-export type BaseTheme = {
-  breakpoints: string[];
-  space: {
-    none: number;
-    xxsmall: number;
-    xsmall: number;
-    small: number;
-    medium: number;
-    large: number;
-    xlarge: number;
-    xxlarge: number;
-  };
-  fonts: {
-    body: string;
-    heading: string;
-  };
-  fontSizes: {
-    xxsmall: string;
-    xsmall: string;
-    small: string;
-    medium: string;
-    large: string;
-    xlarge: string;
-  };
-  fontWeights: {
-    body: number;
-    heading: number;
-    bold: number;
-  };
-  lineHeights: {
-    body: number;
-    heading: number;
-  };
-  colors: {
-    text: string;
-    background: string;
-    primary: string;
-    secondary: string;
-    disabled: string;
-    error: string;
-    warning: string;
-    info: string;
-    success: string;
-    [key: string]: string;
-  };
-  [key: string]: CSSObject;
-};
+// Provider
+// ---------------
+import { type RootThemeExtension } from './Provider';
+
+// Components
+// ---------------
+import { type AlertThemeExtension } from './Alert';
+import { type BadgeThemeExtension } from './Badge';
+import { type ButtonThemeExtension } from './Button';
+import { type CardThemeExtension } from './Card';
+import { type CheckboxThemeExtension } from './Checkbox';
+import { type DividerThemeExtension } from './Divider';
+import { type ImageThemeExtension } from './Image';
+import { type InputThemeExtension } from './Input';
+import { type LabelThemeExtension } from './Label';
+import { type LinkThemeExtension } from './Link';
+import { type MenuThemeExtension } from './Menu';
+import { type MenuItemThemeExtension } from './MenuItem';
+import { type MessageThemeExtension } from './Message';
+import { type RadioThemeExtension } from './Radio';
+import { type SelectThemeExtension } from './Select';
+import { type SliderThemeExtension } from './Slider';
+import { type TextThemeExtension } from './Text';
+import { type TextareaThemeExtension } from './Textarea';
+import { type ValidationMessageThemeExtension } from './ValidationMessage';
+
+export interface Theme
+  extends Scales,
+    RootThemeExtension<CSSObject>,
+    AlertThemeExtension<CSSObject>,
+    BadgeThemeExtension<CSSObject>,
+    ButtonThemeExtension<CSSObject>,
+    CardThemeExtension<CSSObject>,
+    CheckboxThemeExtension<CSSObject>,
+    DividerThemeExtension<CSSObject>,
+    ImageThemeExtension<CSSObject>,
+    InputThemeExtension<CSSObject>,
+    LabelThemeExtension<CSSObject>,
+    LinkThemeExtension<CSSObject>,
+    MenuThemeExtension<CSSObject>,
+    MenuItemThemeExtension<CSSObject>,
+    MessageThemeExtension<CSSObject>,
+    RadioThemeExtension<CSSObject>,
+    SelectThemeExtension<CSSObject>,
+    SliderThemeExtension<CSSObject>,
+    TextThemeExtension<CSSObject>,
+    TextareaThemeExtension<CSSObject>,
+    ValidationMessageThemeExtension<CSSObject> {}

package/dist/Box/Box.d.ts

@@ -1,47 +0,0 @@
-import { CSSObject, ResponsiveStyleValue } from '@marigold/system';
-import { PolymorphicPropsWithRef, PolymorphicComponentWithRef } from '@marigold/types';
-export declare type BoxOwnProps = {
-    className?: string;
-    variant?: string | string[];
-    css?: CSSObject;
-    display?: ResponsiveStyleValue<string>;
-    height?: ResponsiveStyleValue<number | string>;
-    width?: ResponsiveStyleValue<number | string>;
-    minWidth?: ResponsiveStyleValue<number | string>;
-    maxWidth?: ResponsiveStyleValue<number | string>;
-    position?: ResponsiveStyleValue<string>;
-    top?: ResponsiveStyleValue<number | string>;
-    bottom?: ResponsiveStyleValue<number | string>;
-    right?: ResponsiveStyleValue<number | string>;
-    left?: ResponsiveStyleValue<number | string>;
-    zIndex?: ResponsiveStyleValue<number | string>;
-    p?: ResponsiveStyleValue<number | string>;
-    px?: ResponsiveStyleValue<number | string>;
-    py?: ResponsiveStyleValue<number | string>;
-    pt?: ResponsiveStyleValue<number | string>;
-    pb?: ResponsiveStyleValue<number | string>;
-    pl?: ResponsiveStyleValue<number | string>;
-    pr?: ResponsiveStyleValue<number | string>;
-    m?: ResponsiveStyleValue<number | string>;
-    mx?: ResponsiveStyleValue<number | string>;
-    my?: ResponsiveStyleValue<number | string>;
-    mt?: ResponsiveStyleValue<number | string>;
-    mb?: ResponsiveStyleValue<number | string>;
-    ml?: ResponsiveStyleValue<number | string>;
-    mr?: ResponsiveStyleValue<number | string>;
-    flexDirection?: ResponsiveStyleValue<string>;
-    flexWrap?: ResponsiveStyleValue<string>;
-    flexShrink?: ResponsiveStyleValue<number | string>;
-    flexGrow?: ResponsiveStyleValue<number | string>;
-    alignItems?: ResponsiveStyleValue<string>;
-    justifyContent?: ResponsiveStyleValue<string>;
-    bg?: ResponsiveStyleValue<number | string>;
-    border?: ResponsiveStyleValue<number | string>;
-    borderRadius?: ResponsiveStyleValue<number | string>;
-    boxShadow?: ResponsiveStyleValue<number | string>;
-    opacity?: ResponsiveStyleValue<number | string>;
-    overflow?: ResponsiveStyleValue<string>;
-    transition?: ResponsiveStyleValue<number | string>;
-};
-export declare type BoxProps = PolymorphicPropsWithRef<BoxOwnProps, 'div'>;
-export declare const Box: PolymorphicComponentWithRef<BoxOwnProps, 'div'>;

package/dist/Box/index.d.ts

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

package/dist/Heading/Heading.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { ComponentProps } from '@marigold/types';
-export declare type HeadingProps = {
-    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-    variant?: string;
-} & ComponentProps<'h1'>;
-export declare const Heading: React.FC<HeadingProps>;

package/dist/Heading/index.d.ts

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

package/dist/Hidden/Hidden.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare type HiddenProps = {
-    show?: boolean;
-};
-export declare const Hidden: React.FC<HiddenProps>;

package/dist/Hidden/index.d.ts

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