@marigold/components 0.2.0 → 0.3.3

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';

package/dist/Radio/RadioIcons.d.ts

@@ -1,9 +0,0 @@
-export declare const RadioChecked: ({ disabled, ...props }: {
-    [x: string]: any;
-    disabled?: boolean | undefined;
-}) => JSX.Element;
-export declare const RadioUnchecked: ({ disabled, error, ...props }: {
-    [x: string]: any;
-    disabled?: boolean | undefined;
-    error?: boolean | undefined;
-}) => JSX.Element;

package/src/ActionGroup/ActionGroup.stories.mdx

@@ -1,62 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { ActionGroup } from './ActionGroup';
-import { Button } from '../Button';
-
-<Meta
-  title="Components/ActionGroup"
-  argTypes={{
-    variant: {
-      control: {
-        type: 'select',
-      },
-      options: ['default'],
-      description: 'ActionGroup style',
-      table: {
-        defaultValue: {
-          summary: 'default',
-        },
-      },
-    },
-    space: {
-      control: {
-        type: 'text',
-      },
-      description: 'space between the children',
-      table: {
-        defaultValue: {
-          summary: 'none',
-        },
-      },
-    },
-    verticalAlignment: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'alignment vertical',
-      table: {
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
-  }}
-/>
-
-# ActionGroup
-
-export const Template = args => (
-  <ActionGroup {...args}>
-    <Button variant="text" size="small">
-      Cancel
-    </Button>
-    <Button variant="primary" size="small">
-      Confirm
-    </Button>
-  </ActionGroup>
-);
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />

package/src/Alert/Alert.stories.mdx

@@ -1,35 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Alert } from './Alert';
-import { Text } from '../Text';
-
-<Meta
-  title="Components/Alert"
-  argTypes={{
-    variant: {
-      control: {
-        type: 'select',
-      },
-      options: ['success', 'warning', 'error'],
-      description: 'Alerting in different colors and icons',
-      table: {
-        defaultValue: {
-          summary: 'success',
-        },
-      },
-    },
-  }}
-/>
-
-# Alert
-
-export const Template = args => (
-  <Alert {...args}>
-    <Text>Alert</Text>
-  </Alert>
-);
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />

package/src/Badge/Badge.stories.mdx

@@ -1,57 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Badge } from './Badge';
-import { Check } from '@marigold/icons';
-
-<Meta
-  title="Components/Badge"
-  argTypes={{
-    variant: {
-      control: {
-        type: 'select',
-      },
-      options: ['default'],
-      description: 'Badge style',
-      table: {
-        defaultValue: {
-          summary: 'default',
-        },
-      },
-    },
-    bgColor: {
-      control: {
-        type: 'text',
-      },
-      description: 'background',
-      table: {
-        defaultValue: {
-          summary: 'inherit',
-        },
-      },
-    },
-    borderColor: {
-      control: {
-        type: 'text',
-      },
-      description: 'Outline color',
-      table: {
-        defaultValue: {
-          summary: 'transparent',
-        },
-      },
-    },
-  }}
-/>
-
-# Badge
-
-export const Template = args => (
-  <Badge {...args}>
-    <Check /> Check
-  </Badge>
-);
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />