import {createArticlePage} from "./ArticlePage";

export default {
  title: 'Pages/Article Page',
  parameters: {
    layout: 'fullscreen',
  },
  args: {

  },
}

const Template = ({...args}) => {
  return createArticlePage({...args});
};

export const ArticlePage = Template.bind({});
ArticlePage.args = {};

export const ArticlePageMicrosite = Template.bind({});
ArticlePageMicrosite.args = {
  styleBlock: `
    :root {
      --theme-color-primary: #003366 !important;
      --theme-color-primary-microsite: #003366 !important;
      --theme-color-primary-rgb: 230,0,126 !important;
      --theme-color-primary-dimmed-01: #335C85 !important;
      --theme-color-primary-dimmed-02: #B0C4D6 !important;
      --theme-color-primary-dimmed-03: #F9BFDF !important;
      --theme-color-primary-dimmed-04: #FCE6F2 !important;
      --theme-color-secondary: #077EAF !important;
      --theme-color-secondary-microsite: #077EAF !important;
      --theme-color-secondary-intensed: #077EAF !important;
      --theme-color-secondary-dimmed: #E6F2F7 !important;
      --theme-color-neutral: #636D76 !important;
      --theme-color-neutral-background: #EFF3F6 !important;
      --theme-color-background: #FFFFFF !important;
      --theme-color-text-intensed: #000000 !important;
      --theme-color-text: #000000 !important;
      --theme-color-link: #003366 !important;
      --theme-color-link-hover: #077EAF !important;
      --theme-color-gradient-01: #E6007E !important;
      --theme-color-gradient-02: #9f1f69 !important;
      --theme-color-gradient-03: #563f54 !important;
      }
  `
};