import { storiesOf } from '@storybook/angular';
import {
  abstract,
  breakpointManager,
  colors,
  commenting,
  componentsStructure,
  constants,
  cssRuleset,
  defualtFlag,
  globalFlag,
  introduction,
  lists,
  maps,
  mediaQueriesUsage,
  multipleVariablesOrMaps,
  namingConventions,
  numbers,
  responsiveWebDesignAndBreakpoints,
  selectorNesting,
  shameFile,
  strings,
  syntaxAndFormatting,
  variables
} from './SCSS';
// storiesOf("MUST READ", module).add("SCSS");
export const storiesSCSS = storiesOf('SCSS GUIDELINES', module)
  .add('Introduction', () => ({ template: introduction }))
  .add('SYNTAX AND FORMATING', () => ({ template: syntaxAndFormatting }))
  .add('STRINGS', () => ({ template: strings }))
  .add('NUMBERS', () => ({ template: numbers }))
  .add('COLORS', () => ({ template: colors }))
  .add('LISTS', () => ({ template: lists }))
  .add('MAPS', () => ({ template: maps }))
  .add('CSS RULESET', () => ({ template: cssRuleset }))
  .add('SELECTOR NESTING', () => ({ template: selectorNesting }))
  .add('NAMING CONVENTIONS', () => ({ template: namingConventions }))
  .add('CONSTANTS', () => ({ template: constants }))
  .add('COMMENTING', () => ({ template: commenting }))
  .add('COMPONENTS', () => ({ template: componentsStructure }))
  .add('SHAME FILE', () => ({ template: shameFile }))
  .add('RESPONSIVE WEB DESIGN & BREAKPOINTS', () => ({ template: responsiveWebDesignAndBreakpoints }))
  .add('BREAKPOINT MANAGER', () => ({ template: breakpointManager }))
  .add('MEDIA QUERIES USAGE', () => ({ template: mediaQueriesUsage }))
  .add('VARIABLES', () => ({ template: variables }))
  .add('!default FLAG', () => ({ template: defualtFlag }))
  .add('!global Flag', () => ({ template: globalFlag }))
  .add('MULTIPLE VARIABLES OR MAPS', () => ({ template: multipleVariablesOrMaps }))
  .add('ADITIONAL INFO(must read)', () => ({ template: abstract }));
