Example needed with MDX

[muratcorlu]

I'm trying to use this addon for documenting our web component library but couldn't figure out how to use it. Here is my related part of my MDX doc:

import { CssPropsBlock } from "@ljcl/storybook-addon-cssprops";

export const Template = (args) => html`<gr-button 
    ?secondary=${args.variant === 'secondary'} 
    ?disabled=${args.disabled} 
    ?block=${args.block} 
    ?medium=${args.size === 'medium'} 
    ?small=${args.size === 'small'}>${args.label}</gr-button>`;

# Button

Button component is the component for triggering actions.

## Button Variants

Primary button is used for main actions of the screens. Like a submit button in a form or main button of a dialog.

<Canvas>
  <Story name="Primary Button" args={{ variant: 'primary', label: 'Save' }}>
    {Template.bind({})}
  </Story>
  <Story name="Secondary Button" args={{ variant: 'secondary', label: 'Save' }}>
    {Template.bind({})}
  </Story>
</Canvas>

<CssPropsBlock
  customProperties={{
    "gr-button-display": {
      value: "inline-block",
      description: "Set display of button"
    }
  }}
/>

When I run this I can see the reference chart

But changing the value doesn't effect anything. How should I use those variables within every stories?

[ljcl]

This is working in the examples package in this repo, I suspect it might be related to iframe stories in the docs.

I've created an issue to track this in #26, accepting contribs!