@marigold/components 0.3.0 → 0.4.0

package/src/ValidationMessage/ValidationMessage.stories.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import type { Meta, ComponentStory } from '@storybook/react';
-import { ValidationMessage } from './ValidationMessage';
-import { Exclamation } from '@marigold/icons';
-
-export default {
-  title: 'Components/ValidationMessage',
-  argTypes: {
-    variant: {
-      control: {
-        type: 'text',
-      },
-      table: {
-        defaultValue: {
-          summary: 'error',
-        },
-      },
-    },
-  },
-} as Meta;
-
-export const Basic: ComponentStory<typeof ValidationMessage> = args => (
-  <ValidationMessage {...args}>
-    <Exclamation />
-    Validation message
-  </ValidationMessage>
-);

package/src/ValidationMessage/ValidationMessage.test.tsx

@@ -1,68 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '@marigold/system';
-import { ValidationMessage } from './ValidationMessage';
-
-const theme = {
-  space: {
-    none: 0,
-    small: 4,
-    medium: 8,
-  },
-  validation: {
-    error: {
-      p: 'medium',
-    },
-    warning: {
-      p: 'small',
-    },
-  },
-};
-
-test('supports default variant and themeSection', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <ValidationMessage title="error">error</ValidationMessage>
-    </ThemeProvider>
-  );
-  const validation = screen.getByTitle(/error/);
-
-  expect(validation).toHaveStyle(`padding: 8px`);
-});
-
-test('accepts other variant than default', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <ValidationMessage title="warning" variant="warning">
-        warning
-      </ValidationMessage>
-    </ThemeProvider>
-  );
-  const validation = screen.getByTitle(/warning/);
-
-  expect(validation).toHaveStyle(`padding: 4px`);
-});
-
-test('renders correct HTML element', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <ValidationMessage title="error">error</ValidationMessage>
-    </ThemeProvider>
-  );
-  const validation = screen.getByTitle(/error/);
-
-  expect(validation instanceof HTMLSpanElement).toBeTruthy();
-});
-
-test('accepts custom styles prop className', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <ValidationMessage className="custom-class-name" title="validation">
-        validation
-      </ValidationMessage>
-    </ThemeProvider>
-  );
-  const validation = screen.getByTitle(/validation/);
-
-  expect(validation.className).toMatch('custom-class-name');
-});

package/src/ValidationMessage/ValidationMessage.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-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,
-  className,
-  ...props
-}) => {
-  return (
-    <Box
-      as="span"
-      display="flex"
-      alignItems="center"
-      variant={`validation.${variant}`}
-      className={className}
-      {...props}
-    >
-      {children}
-    </Box>
-  );
-};

package/src/ValidationMessage/index.ts

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

package/src/VisuallyHidden/VisuallyHidden.stories.tsx

@@ -1,19 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

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

package/src/VisuallyHidden/index.ts

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

package/src/index.ts

@@ -1,34 +0,0 @@
-export * from './theme';
-
-export * from './ActionGroup';
-export * from './Alert';
-export * from './Badge';
-export * from './Box';
-export * from './Button';
-export * from './Card';
-export * from './Checkbox';
-export * from './Column';
-export * from './Columns';
-export * from './Dialog';
-export * from './Divider';
-export * from './Field';
-export * from './VisuallyHidden';
-export * from './Image';
-export * from './Inline';
-export * from './Label';
-export * from './Link';
-export * from './Menu';
-export * from './MenuItem';
-export * from './Message';
-export * from './Provider';
-export * from './Radio';
-export * from './Slider';
-export * from './Select';
-export * from './Stack';
-export * from './Text';
-export * from './Textarea';
-export * from './Input';
-export * from './Container';
-export * from './ValidationMessage';
-
-export { Item, Section } from '@react-stately/collections';

package/src/theme.ts

@@ -1,50 +0,0 @@
-import { type CSSObject, type Theme as Scales } from '@marigold/system';
-
-// 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/tsconfig.build.json

@@ -1,3 +0,0 @@
-{
-  "extends": "@marigold/tsconfig"
-}