89 lines
2.6 KiB
TypeScript
89 lines
2.6 KiB
TypeScript
import figma, { html } from "@figma/code-connect/html";
|
|
|
|
// Desktop v3 (newest)
|
|
figma.connect(
|
|
"https://www.figma.com/design/3WoKOSGtaSjhUHKldHCXbc/Desktop-v3?node-id=243-1299&m=dev",
|
|
{
|
|
props: {
|
|
heading: figma.boolean("Show heading", {
|
|
true: figma.string("Heading"),
|
|
false: undefined,
|
|
}),
|
|
message: figma.boolean("Show message", {
|
|
true: figma.string("Message"),
|
|
false: undefined,
|
|
}),
|
|
type: figma.enum("Type", {
|
|
Success: "success",
|
|
Warning: "warning",
|
|
Critical: "critical",
|
|
Information: "information",
|
|
}),
|
|
supportPage: figma.boolean("Show support link", {
|
|
true: "sumo-slug",
|
|
}),
|
|
action: figma.boolean("Show action", {
|
|
true: html`<moz-button slot="actions" label="Label"></moz-button
|
|
><moz-button slot="actions" label="Label"></moz-button>`,
|
|
false: undefined,
|
|
}),
|
|
buttonGroupProps: figma.nestedProps("Button group", {
|
|
additionalAction: figma.boolean("Show 3rd button", {
|
|
true: html`<moz-button slot="actions" label="Label"></moz-button>`,
|
|
false: undefined,
|
|
}),
|
|
}),
|
|
},
|
|
example: props =>
|
|
html`<moz-message-bar
|
|
type=${props.type}
|
|
message=${props.message}
|
|
heading=${props.heading}
|
|
support-page=${props.supportPage}
|
|
>${props.action}${props.buttonGroupProps
|
|
.additionalAction}</moz-message-bar
|
|
>`,
|
|
}
|
|
);
|
|
|
|
// Desktop Components (deprecated)
|
|
figma.connect(
|
|
"https://www.figma.com/design/2ruSnPauajQGprFy6K333u/Desktop-Components?node-id=8922-12259&m=dev",
|
|
{
|
|
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
|
|
>`,
|
|
}
|
|
);
|