Changes

4 changed files (+15/-15)

• packages/components/.storybook/preview.js
  • @@ -2,11 +2,11 @@ import { setCustomElements } from "@storybook/web-components";
    import "../src"; - import FigmaViewer from "../src/FigmaViewer?spec"; + import FigspecViewer from "../src/FigspecViewer?spec"; // A list of components to parse using web-component-analyzer. // Only components here appear at Docs table. - const components = [FigmaViewer]; + const components = [FigspecViewer]; const spec = components.reduce( (a, b) => ({ ...a, ...b, tags: [...a.tags, ...b.tags] }),
• packages/components/src/FigmaViewer.stories.js > packages/components/src/FigspecViewer/index.stories.js
  • @@ -1,16 +1,15 @@
    import { html } from "lit-html"; - import demoJson from "./__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/64:1.json"; - import demoImage from "./__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/64:1.svg"; + import demoJson from "../__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/64:1.json"; + import demoImage from "../__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/64:1.svg"; export default { title: "Components/figspec-viewer", - // TODO: Rename - component: "figma-viewer", + component: "figspec-viewer", }; const Template = (args) => html` - <figma-viewer + <figspec-viewer style=" min-width: 100%; min-height: 400px;
  • @@ -20,7 +19,7 @@ .nodes=${args.nodes}
    rendered-image=${args.renderedImage || ""} .panSpeed=${args.panSpeed || 500} .zoomSpeed=${args.zoomSpeed || 500} - ></figma-viewer> + ></figspec-viewer> `; export const Defaults = Template.bind({});
• packages/components/src/FigmaViewer.ts > packages/components/src/FigspecViewer/index.ts
  • @@ -1,13 +1,14 @@
    - import * as Figma from "figma-js"; + import type * as Figma from "figma-js"; import { LitElement, TemplateResult, css, html, property } from "lit-element"; type SizedNode = Extract<Figma.Node, { absoluteBoundingBox: any }>; /** - * @element figma-viewer + * A Figma spec viewer. Displays a rendered image alongside sizing guides. + * @element figspec-viewer */ - export class FigmaViewer extends LitElement { + export class FigspecViewer extends LitElement { /** * A response of "GET file nodes" API. * https://www.figma.com/developers/api#get-file-nodes-endpoint
• packages/components/src/index.ts
  • @@ -1,12 +1,12 @@
    - import { FigmaViewer } from "./FigmaViewer"; + import { FigspecViewer } from "./FigspecViewer"; import { FigmaViewerGuide } from "./FigmaViewerGuide"; - if (!customElements.get("figma-viewer")) { - customElements.define("figma-viewer", FigmaViewer); + if (!customElements.get("figspec-viewer")) { + customElements.define("figspec-viewer", FigspecViewer); } if (!customElements.get("figma-viewer-guide")) { customElements.define("figma-viewer-guide", FigmaViewerGuide); } - export { FigmaViewer } from "./FigmaViewer"; + export { FigspecViewer } from "./FigspecViewer";