Uses of ibm-carbone-styles

Question

I decided to use https://angular.carbondesignsystem.com/?path=/story/welcome--to-carbon-angular this styles inside my frontend.

I took 'Accordion' from the list and tried to implement it to my project.

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.

What I need? I need to have TableComponent and inside this component to call storybook(index.js).

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 https://imgur.com/a/m4NiGbR

2 questions in which I need help.

1. How to connect styles to this story?
2. How to implement this story inside of TableComponent?

index.js

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', () => ({
    template: `
    <ibm-accordion>
      <ibm-accordion-item title="Section 1 title" (selected)="selected($event)">Test message</ibm-accordion-item>
            <ibm-accordion-item title="Section 2 title" (selected)="selected($event)">Test message 2</ibm-accordion-item>
            <ibm-accordion-item title="Section 3 title" (selected)="selected($event)">Test message 3</ibm-accordion-item>
            <ibm-accordion-item title="Section 4 title" (selected)="selected($event)">Test message 4</ibm-accordion-item>
        </ibm-accordion>
    `,
props: {
  items: [
    {
      content: 'one',
    },
    {
      content: 'two',
    },
    {
      content: 'three',
    },
    {
      content: 'four',
    },
  ],
  selected: action('item expanded'),
},
}))

.add('Skeleton', () => ({
    template: `
   <div style="width: 500px">
       <ibm-accordion skeleton="true">
    <ibm-accordion-item expanded="true"></ibm-accordion-item>
    <ibm-accordion-item></ibm-accordion-item>
    <ibm-accordion-item></ibm-accordion-item>
    <ibm-accordion-item></ibm-accordion-item>
  </ibm-accordion>
        </div>
`,
 })); 

.storybook/config.js (folder in the root folder of frontend project)

import { configure } from '@storybook/angular';
import '../src/styles.scss';

function loadStories() {
 require('../stories/index.js');
}

configure(loadStories, module);

.storybook/tsconfig.json

{
  "extends": "../tsconfig.json",
   "exclude": [
   "../src/test.ts",
   "../src/**/*.spec.ts",
   "../projects/**/*.spec.ts",
   "**/*.stories.ts"
   ],
  "include": [
    "../src/**/*",
    "../projects/**/*"
  ]
}

Answer 1

First of, your project structure looks a bit unusual. You shouldn't have to create stories or use storybook, unless that's something you actually need in your project. carbon-components-angular uses it for demos.

Give carbon-angular-starter a go for a very good base for projects of any size. We use it and recommend it for our internal stuff.

On custom tables

If you want to put non-string values in cells (as is the case here), you'd use custom templates and provide data (if needed) for them.

Your component template needs this:

Your table:
<ibm-table [model]="model"></ibm-table>

<!-- example template: -->
<ng-template #customTableItemTemplate let-data="data">
    <a [routerLink]="data.link">{{data.name}} {{data.surname}}</a>
</ng-template>

Your component code needs this:

customTableItemTemplate: TemplateRef<any>; // provides access to template based on #customTableItemTemplate

this.customModel.data = [
    [new TableItem({data: "asdf"}), new TableItem({data: {name: "Lessy", link: "/table"}, template: this.customTableItemTemplate})],
    [new TableItem({data: "csdf"}), new TableItem({data: "swer"})],
    [new TableItem({data: "bsdf"}), new TableItem({data: {name: "Alice", surname: "Bob"}, template: this.customTableItemTemplate})],
    [new TableItem({data: "csdf"}), new TableItem({data: "twer"})],
 ];

let-data="data" gives you access to data from new TableItem({data: {name: "Lessy", link: "/table"}, template: this.customTableItemTemplate}) and you can simply access it with data.myProperty as in <a [routerLink]="data.link">{{data.name}} {{data.surname}}</a>

In your case template will contain something like:

<ng-template #customTableItemTemplate>
      <ibm-accordion>
            <ibm-accordion-item title="Section 1 title" (selected)="selected($event)">Test message</ibm-accordion-item>
            <ibm-accordion-item title="Section 2 title" (selected)="selected($event)">Test message 2</ibm-accordion-item>
            <ibm-accordion-item title="Section 3 title" (selected)="selected($event)">Test message 3</ibm-accordion-item>
            <ibm-accordion-item title="Section 4 title" (selected)="selected($event)">Test message 4</ibm-accordion-item>
        </ibm-accordion>
</ng-template>

and might not need to use data.

More details in carbon components angular table documentation.