title: Uses of ibm-carbone-styles
body: <p>I decided to use <a href="https://angular.carbondesignsystem.com/?path=/story/welcome--to-carbon-angular" rel="nofollow noreferrer">https://angular.carbondesignsystem.com/?path=/story/welcome--to-carbon-angular</a> this styles inside my frontend.</p>
  
  <p>I took 'Accordion' from the list and tried to implement it to my project.</p>
  
  <p>Inside my angular project, I created component called table.
  In the root folder, I created stories folder and inside stories I've created index.js.</p>
  
  <p>What I need? I need to have TableComponent and inside this component to call storybook(index.js).</p>
  
  <p>Right now I run just npm run storybook and got a build of stories from index.js but without styles and when I click on each button it doesn't hide the content.
  Look through the screen <a href="https://imgur.com/a/m4NiGbR" rel="nofollow noreferrer">https://imgur.com/a/m4NiGbR</a></p>
  
  <p>2 questions in which I need help.</p>
  
  <ol>
  <li>How to connect styles to this story?</li>
  <li>How to implement this story inside of TableComponent?</li>
  </ol>
  
  <blockquote>
    <p>index.js </p>
  </blockquote>
  
  <pre><code>import { storiesOf, moduleMetadata } from '@storybook/angular';
  import { withNotes } from '@storybook/addon-notes';
  import { action } from '@storybook/addon-actions';
  import { withKnobs, boolean, object } from '@storybook/addon-knobs/angular';
  
  import { AccordionModule } from 'carbon-components-angular/accordion/accordion.module';
  import { TableComponent } from '../src/app/table/table.component';
  
  storiesOf('Accordion', module)
   .addDecorator(
     moduleMetadata({
        imports: [AccordionModule],
     })
    )
   .addDecorator(withKnobs)
    .add('Basic', () =&gt; ({
      template: `
      &lt;ibm-accordion&gt;
        &lt;ibm-accordion-item title="Section 1 title" (selected)="selected($event)"&gt;Test message&lt;/ibm-accordion-item&gt;
              &lt;ibm-accordion-item title="Section 2 title" (selected)="selected($event)"&gt;Test message 2&lt;/ibm-accordion-item&gt;
              &lt;ibm-accordion-item title="Section 3 title" (selected)="selected($event)"&gt;Test message 3&lt;/ibm-accordion-item&gt;
              &lt;ibm-accordion-item title="Section 4 title" (selected)="selected($event)"&gt;Test message 4&lt;/ibm-accordion-item&gt;
          &lt;/ibm-accordion&gt;
      `,
  props: {
    items: [
      {
        content: 'one',
      },
      {
        content: 'two',
      },
      {
        content: 'three',
      },
      {
        content: 'four',
      },
    ],
    selected: action('item expanded'),
  },
  }))
  
  .add('Skeleton', () =&gt; ({
      template: `
     &lt;div style="width: 500px"&gt;
         &lt;ibm-accordion skeleton="true"&gt;
      &lt;ibm-accordion-item expanded="true"&gt;&lt;/ibm-accordion-item&gt;
      &lt;ibm-accordion-item&gt;&lt;/ibm-accordion-item&gt;
      &lt;ibm-accordion-item&gt;&lt;/ibm-accordion-item&gt;
      &lt;ibm-accordion-item&gt;&lt;/ibm-accordion-item&gt;
    &lt;/ibm-accordion&gt;
          &lt;/div&gt;
  `,
   })); 
  </code></pre>
  
  <blockquote>
    <p>.storybook/config.js (folder in the root folder of frontend project)</p>
  </blockquote>
  
  <pre><code>import { configure } from '@storybook/angular';
  import '../src/styles.scss';
  
  function loadStories() {
   require('../stories/index.js');
  }
  
  configure(loadStories, module);
  </code></pre>
  
  <blockquote>
    <p>.storybook/tsconfig.json</p>
  </blockquote>
  
  <pre><code>{
    "extends": "../tsconfig.json",
     "exclude": [
     "../src/test.ts",
     "../src/**/*.spec.ts",
     "../projects/**/*.spec.ts",
     "**/*.stories.ts"
     ],
    "include": [
      "../src/**/*",
      "../projects/**/*"
    ]
  }
  </code></pre>