spawntree
/
ihk24


			
				
					
						
						
							
							import { themes, defaultTheme } from '../stories/_global/styles/themes.config';
import '../stories/_global/styles/themes.scss';
import '../stories/_global/styles/main.scss';
import '../stories/_global/styles/fonts.scss';
import '../stories/_global/styles/icons.scss';
import '../stories/_global/styles/pictograms.scss';
import '../stories/_global/styles/pictograms-mapper.scss';
import '../stories/_global/styles/typography.scss';
import '../stories/_global/styles/grid.scss';
import '../stories/_global/styles/storybook-preview.scss';
import '../stories/_global/scripts/ihk';

const customViewports = {
  Phone: {
    name: 'Phone',
    styles: {
      width: '380px',
      height: '720px',
    },
  },
  Tablet: {
    name: 'Tablet',
    styles: {
      width: '768px',
      height: '1024px',
    }
  }
};

export const parameters = {
  layout: 'padded',
  actions: {},
  viewport: { options: customViewports },

  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },

  backgrounds: {
    options: {
      white: {
        name: 'white',
        value: '#FFFFFF',
      },

      primary: {
        name: 'primary',
        value: '#003366',
      },

      secondary: {
        name: 'secondary',
        value: '#56BD66',
      },

      lightblue: {
        name: 'lightblue',
        value: '#E3EBF5',
      }
    }
  },

  a11y: {
    // 'todo' - show a11y violations in the test UI only
    // 'error' - fail CI on a11y violations
    // 'off' - skip a11y checks entirely
    test: 'todo'
  }
}

export const globalTypes = {
  theme: {
    name: 'Theme',
    description: 'Theme für alle Komponenten (data-theme am <html>-Element)',
    toolbar: {
      title: 'Theme',
      icon: 'paintbrush',
      items: themes.map(({ name, value }) => ({ value, title: name })),
      dynamicTitle: true,
    },
  },
};

export const initialGlobals = {
  backgrounds: {
    value: 'white'
  },
  theme: defaultTheme,
};
export const tags = ['autodocs'];

export const decorators = [
  (Story, context) => {
    document.documentElement.setAttribute('data-theme', context.globals.theme ?? defaultTheme);
    document.body.classList.add('variant-base');
    return Story();
  },
];