CODEWITHSUNDEEP
storybookstenciljs
happy_story
happy_story

Reputation: 1165

How to pass props into a Stencil child component in Storybook?

I have two Stencil components. MyCard and MyButton.

MyButton.tsx

import { Component, h, Prop } from '@stencil/core';

@Component({
  tag: 'my-button',
  styleUrl: 'my-button.css',
  shadow: true,
})
export class MyButton {
  @Prop() label: string;

  render() {
    return (
       <div>
         <button>
          {this.label}
        </button>
       </div>
    );
  }
}

MyButton.stories.ts

const Template = (args) => `<my-button label="${args.label}"></my-button>`;

export const Example = Template.bind({});
Example.args = {
  label: 'my custom button'
}

MyCard.tsx

import { Component, h, Prop } from '@stencil/core';

@Component({
  tag: 'my-card',
  styleUrls: ['my-card.scss'],
  shadow: true,
})

export class MyCard {
  render() { 
      return (
        <div>
          <div>
            <my-button></my-button>
          </div>
        </div>
      )
  }
}

MyCard.stories.ts

const MyCardDefault = (args) => (
  `<my-card>
    <my-button label="${args.label}"></my-button>
  </my-card>`
)
export const CardExample = MyCardDefault.bind({});
CardExample.args = { 
  label: "CardButton"
}

If I open the MyButton component in Storybook, the args are properly passed, and the label is applied to the button, but when I open the MyCard component, the button innerHTML is empty. The props are not passed. Why? How do I pass props to a nested child component in Stencil?

Upvotes: 0

Views: 250

Answers (1)

G. Tranter
G. Tranter

Reputation: 17958

I don't know Storybook, but your MyCard component does not have any properties and does not set any properties on it's my-button element, so binding a label to the card won't do anything because MyCard doesn't use the label. I think you need:

export class MyCard {
  @Prop() label: string;

  render() { 
      return (
        <div>
          <div>
            <my-button label={this.label}></my-button>
          </div>
        </div>
      )
  }
}

Upvotes: 0

Related Questions