@marigold/components 0.2.0 → 0.3.3

package/src/Radio/RadioIcon.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { conditional, State, SVG } from '@marigold/system';
+
+import { Box } from '../Box';
+
+// Radio Icon
+// ---------------
+export type RadioIconProps = {
+  variant?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  error?: boolean;
+  children?: never;
+};
+
+export const RadioIcon: React.FC<RadioIconProps> = ({
+  variant = '',
+  checked = false,
+  disabled = false,
+  error = false,
+}) => {
+  const conditionalStates: State = disabled
+    ? {
+        disabled: disabled,
+      }
+    : {
+        checked: checked,
+        error: error,
+      };
+
+  return (
+    <SVG
+      width="16"
+      height="32"
+      viewBox="0 0 16 32"
+      fill="none"
+      aria-hidden="true"
+    >
+      <Box
+        variant={conditional(`radio.${variant}`, conditionalStates)}
+        as="circle"
+        cx="8"
+        cy="16"
+        r="7.5"
+      />
+      {checked && <circle fill="white" cx="8" cy="16" r="3" />}
+    </SVG>
+  );
+};

package/src/Select/ListBox.tsx

@@ -20,6 +20,7 @@ export const ListBox = (props: ListBoxProps) => {
   return (
     <Box
       as="ul"
+      p="none"
       css={{
         listStyle: 'none',
       }}

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

@@ -1,10 +1,22 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
 import { Select } from './Select';
 import { Item } from '@marigold/components';
 
-<Meta
-  title="Components/Select"
-  argTypes={{
+export default {
+  title: 'Components/Select',
+  argTypes: {
+    label: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        defaultValue: {
+          summary: 'Select label',
+        },
+      },
+      defaultValue: 'Favorite Color',
+    },
     placeholder: {
       control: {
         type: 'text',
@@ -57,22 +69,13 @@ import { Item } from '@marigold/components';
     width: {
       control: 'number',
     },
-  }}
-/>
-
-# Select
+  },
+} as Meta;
 
-export const Template = args => (
-  <Select label="Favorite Color" htmlFor="id" {...args}>
-    {/* Storybook crashes with imported <Item> component
-      <Item>Red</Item>
-      <Item>Orange</Item>
-      <Item>Yellow</Item> */}
+export const Basic: ComponentStory<typeof Select> = args => (
+  <Select {...args}>
+    <Item>Red</Item>
+    <Item>Orange</Item>
+    <Item>Yellow</Item>
   </Select>
 );
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />

package/src/Select/Select.test.tsx

@@ -6,14 +6,28 @@ import { Item, MarigoldProvider, Section } from '..';
 import { Select } from './Select';
 
 const theme = {
+  colors: {
+    red: 'red',
+  },
+  fonts: {
+    body: 'Inter',
+  },
   button: {
     select: {
-      fontFamily: 'Inter',
+      fontFamily: 'body',
       errorOpened: {
         color: 'red',
       },
     },
   },
+  label: {
+    above: {
+      fontSize: '8px',
+    },
+    inline: {
+      fontSize: '14px',
+    },
+  },
 };
 
 test('supports button select variant', () => {
@@ -29,6 +43,30 @@ test('supports button select variant', () => {
   expect(select).toHaveStyle(`font-family: Inter`);
 });
 
+test('supports default labelVariant', () => {
+  render(
+    <MarigoldProvider theme={theme}>
+      <Select label="MyLabel" data-testid="selectId">
+        <Item>1</Item>
+      </Select>
+    </MarigoldProvider>
+  );
+  const label = screen.getAllByText('MyLabel');
+  expect(label[0]).toHaveStyle(`font-size: 8px`);
+});
+
+test('supports other labelVariant than default', () => {
+  render(
+    <MarigoldProvider theme={theme}>
+      <Select label="MyLabel" data-testid="selectId" labelVariant="inline">
+        <Item>1</Item>
+      </Select>
+    </MarigoldProvider>
+  );
+  const label = screen.getAllByText('MyLabel');
+  expect(label[0]).toHaveStyle(`font-size: 14px`);
+});
+
 test('accepts custom styles prop className', () => {
   render(
     <MarigoldProvider theme={theme}>

package/src/Select/Select.tsx

@@ -19,7 +19,25 @@ import { ValidationMessage } from '../ValidationMessage';
 import { ListBox } from './ListBox';
 import { Popover } from './Popover';
 
+// Theme Extension
+// ---------------
+export interface SelectThemeExtension<Value> {
+  select?: {
+    __default: Value;
+    disabled?: Value;
+    listbox?: {
+      __default: Value;
+      error?: Value;
+    };
+    section?: Value;
+    option?: Value;
+  };
+}
+
+// Props
+// ---------------
 export type SelectProps = {
+  labelVariant?: string;
   placeholder?: string;
   disabled?: boolean;
   required?: boolean;
@@ -30,7 +48,10 @@ export type SelectProps = {
   AriaSelectProps<object> &
   SingleSelection;
 
+// Component
+// ---------------
 export const Select = ({
+  labelVariant = 'above',
   placeholder = 'Select an option',
   disabled,
   required,
@@ -75,11 +96,7 @@ export const Select = ({
     <Box position="relative" display="inline-block" width={width && width}>
       {props.label && (
         <Box>
-          <Label
-            {...labelProps}
-            htmlFor={labelProps.id}
-            variant={disabled ? 'disabled' : 'above'}
-          >
+          <Label {...labelProps} htmlFor={labelProps.id} variant={labelVariant}>
             {required ? (
               <Box as="span" display="inline-flex" alignItems="center">
                 {props.label}
@@ -122,11 +139,7 @@ export const Select = ({
           {state.selectedItem ? state.selectedItem.rendered : placeholder}
         </Box>
         {state.isOpen && !disabled ? (
-          <Box
-            as={ArrowUp}
-            size={16}
-            css={{ fill: disabled ? 'disabled' : 'text' }}
-          />
+          <Box as={ArrowUp} size={16} css={{ fill: 'text' }} />
         ) : (
           <Box
             as={ArrowDown}
@@ -141,9 +154,7 @@ export const Select = ({
           {...overlayProps}
           {...positionProps}
           css={{
-            width: width
-              ? width
-              : triggerRef.current && triggerRef.current.offsetWidth + 'px',
+            width: triggerRef.current && triggerRef.current.offsetWidth + 'px',
           }}
           ref={overlayRef as Ref<HTMLDivElement>}
           isOpen={state.isOpen}

package/src/Slider/Slider.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Slider } from './Slider';
+
+export default {
+  title: 'Components/Slider',
+  argTypes: {
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: 'Style',
+      table: {
+        defaultValue: {
+          summary: '__default',
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Slider> = args => (
+  <Slider name="vol" min="0" max="50" {...args} />
+);

package/src/Slider/Slider.test.tsx

@@ -4,12 +4,16 @@ import { ThemeProvider } from '@marigold/system';
 import { Slider } from './Slider';
 
 const theme = {
-  form: {
-    slider: {
-      fontFamily: 'Oswald Regular',
+  fonts: {
+    regular: 'Oswald Regular',
+    body: 'Inter',
+  },
+  slider: {
+    __default: {
+      fontFamily: 'regular',
     },
-    range: {
-      fontFamily: 'Inter',
+    special: {
+      fontFamily: 'body',
     },
   },
 };
@@ -28,7 +32,7 @@ test('supports default variant and themeSection', () => {
 test('accepts other variant than default', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Slider variant="range" title="slider" />
+      <Slider variant="special" title="slider" />
     </ThemeProvider>
   );
   const slider = screen.getByTitle(/slider/);

package/src/Slider/Slider.tsx

@@ -1,23 +1,35 @@
 import React from 'react';
-import { useStyles } from '@marigold/system';
 import { ComponentProps } from '@marigold/types';
 
+import { Box } from '../Box';
+
+// Theme Extension
+// ---------------
+export interface SliderThemeExtension<Value> {
+  slider?: {
+    [key: string]: Value;
+  };
+}
+
+// Props
+// ---------------
 export type SliderProps = {
   variant?: string;
 } & ComponentProps<'input'>;
 
+// Component
+// ---------------
 export const Slider: React.FC<SliderProps> = ({
-  variant = 'slider',
+  variant = '',
   className,
   ...props
-}) => {
-  const classNames = useStyles({
-    variant: `form.${variant}`,
-    css: {
-      verticalAlign: 'middle',
-    },
-    className,
-  });
-
-  return <input type="range" className={classNames} {...props} />;
-};
+}) => (
+  <Box
+    as="input"
+    type="range"
+    css={{ verticalAlign: 'middle' }}
+    variant={`slider.${variant}`}
+    className={className}
+    {...props}
+  />
+);

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