Source code
Revision control
Copy as Markdown
Other Tools
// Desktop v3 (newest)
import figma from "figma";
const heading = figma.selectedInstance.getBoolean("Show heading", {
true: figma.selectedInstance.getString("Heading"),
false: undefined,
});
const message = figma.selectedInstance.getBoolean("Show message", {
true: figma.selectedInstance.getString("Message"),
false: undefined,
});
const type = figma.selectedInstance.getEnum("Type", {
Success: "success",
Warning: "warning",
Critical: "critical",
Information: "information",
});
const supportPage = figma.selectedInstance.getBoolean("Show support link", {
true: "sumo-slug",
});
const action = figma.selectedInstance.getBoolean("Show action", {
true: '<moz-button slot="actions" label="Label"></moz-button\n ><moz-button slot="actions" label="Label"></moz-button>',
false: undefined,
});
const buttonGroupProps = (function () {
const nestedLayer14 = figma.selectedInstance.findInstance("Button group");
return {
additionalAction:
nestedLayer14.type !== "ERROR"
? nestedLayer14.getBoolean("Show 3rd button", {
true: '<moz-button slot="actions" label="Label"></moz-button>',
false: undefined,
})
: undefined,
};
})();
export default {
id: "moz-message-bar-desktop-v3",
example: figma.code`<moz-message-bar
${type ? `type="${type}"` : ""}
${message ? `message="${message}"` : ""}
${heading ? `heading="${heading}"` : ""}
${supportPage ? `support-page="${supportPage}"` : ""}
>${action ?? ""}${buttonGroupProps.additionalAction ?? ""}</moz-message-bar
>`,
};