Source code
Revision control
Copy as Markdown
Other Tools
import figma, { html } from "@figma/code-connect/html"
/**
* -- This file was auto-generated by `figma connect create` --
* `props` includes a mapping from Figma properties and variants to
* suggested values. You should update this to match the props of your
* code component, and update the `example` function to return the
* code example you'd like to see in Figma
*/
figma.connect(
{
props: {
message: figma.boolean("Message", {
true: "Your message here",
false: undefined,
}),
action: figma.boolean("Action", {
true: html`<moz-button slot="actions" label="Label"></moz-button>`,
false: undefined,
}),
supportPage: figma.boolean("hasLearnMore", {
true: "sumo-slug",
false: undefined,
}),
heading: figma.boolean("hasHeading", {
true: figma.string("Heading"),
false: undefined,
}),
type: figma.enum("Type", {
Success: "success",
Warning: "warning",
Critical: "critical",
}),
theme: figma.enum("Theme", {
Light: "light",
Dark: "dark",
}),
},
example: (props) => html`\
<moz-message-bar
type=${props.type}
message=${props.message}
heading=${props.heading}
support-page=${props.supportPage}>${props.action}</moz-message-bar>`,
},
)