1

I am using Storybook 7.0 and Lit 2.0. When I click "Show Code" in a story, it only displays the tag for the component and not any of the properties that were set. Is there a way to get the "Show Code" option to display the tags and all the properties that were set when using Lit?

import { html } from "lit";
import type { Meta, StoryObj } from "@storybook/web-components";
import { DateFormatterProps } from ".";
import ".";

const Template = (args: DateFormatterProps) => {
  return html`
    <date-formatter 
      .date=${args.date} 
      .showHoursAndMinutes=${args.showHoursAndMinutes}
      .showDateOnly=${args.showDateOnly}
      .digitOnlyFormat=${args.digitOnlyFormat}
      .showSeconds=${args.showSeconds}
      ></date-formatter>
  `;
}

const meta: Meta<DateFormatterProps> = {
  title: "Date Formatter",
  tags: ['autodocs'],
  render: Template,
  parameters: {
    docs: {
      description: {
        component: "",
      },
    },
  },
  argTypes: {
    date: { control: "date",  description: "Date to format, can be a date object or a string that is valid for the Date constructor" },
  }
};
export default meta;

type Story = StoryObj;
export const Default: Story = {
  args: {
    date: new Date(),
    showHoursAndMinutes: true,
    showDateOnly: false,
    digitOnlyFormat: false,
    showSeconds: false,
  }
};
Tyler
  • 1,019
  • 12
  • 27

0 Answers0