export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
}

import '@instructure/canvas-theme'

import React from 'react'
import {ApplyTheme} from '@instructure/ui-themeable'
import '@instructure/canvas-high-contrast-theme'
import '@instructure/canvas-theme'

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
}

export const globalTypes = {
  canvasTheme: {
    name: 'Canvas Theme',
    description: 'Default or High Contrast',
    defaultValue: 'canvas',
    toolbar: {
      icon: 'user',
      items: ['canvas', 'canvas-high-contrast']
    }
  }
}

const canvasThemeProvider = (Story, context) => {
  const canvasTheme = context.globals.canvasTheme
  return (
    <ApplyTheme theme={ApplyTheme.generateTheme(canvasTheme)}>
      <Story {...context}/>
    </ApplyTheme>
  )
}

export const decorators = [canvasThemeProvider]

Add high contrast to storybook
Add high contrast to storybook

closes OUT-4252

flag=none

Test-plan: - Click user icon in global toolbar
 - Switch between 'canvas' and 'canvas-high-contrast'
 - Verify that components display in expected contrast
 - Verify that all stories are rendering as expected and that
   'canvas' theme option displays stories as they were before
   this PS
Change-Id: I0d139e228ee01f2c3bc45d6b20e69acce88cfae1
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/258545
Tested-by: Service Cloud Jenkins <9144042a601061f88f1e1d7a1753ea3e2972119d@instructure.com>
Reviewed-by: Manoel Quirino <2f47f75c3182f071e1410d24f7ab0d255a1149f4@instructure.com>
Reviewed-by: Michael Brewer-Davis <785693f4c81267e5b88c0f98d39b56a39a2b6910@instructure.com>
QA-Review: Chrystal Langston <d2663071bf6fe682e3f489a1b66462ff19cc17ab@instructure.com>
Product-Review: Jody Sailor
