4439e63f - figspec-react

feat(components): Figma File support

Changes

13 changed files (+2487/-61)

packages/components/.storybook/preview.js
- @@ -2,11 +2,12 @@ import { setCustomElements } from "@storybook/web-components";
  import "../src"; - import FigspecViewer from "../src/FigspecViewer?spec"; + import FigspecFileViewer from "../src/FigspecViewer/FigspecFileViewer?spec"; + import FigspecFrameViewer from "../src/FigspecViewer/FigspecFrameViewer?spec"; // A list of components to parse using web-component-analyzer. // Only components here appear at Docs table. - const components = [FigspecViewer]; + const components = [FigspecFileViewer, FigspecFrameViewer]; const spec = components.reduce( (a, b) => ({ ...a, ...b, tags: [...a.tags, ...b.tags] }),
packages/components/src/FigspecViewer/FigspecFileViewer.stories.js (new)
- @@ -0,0 +1,51 @@
  + import { action } from "@storybook/addon-actions"; + + import { html } from "lit-html"; + + import demoJson from "../__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/file.json"; + import image2_5 from "../__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/2:5.svg"; + import image2_9 from "../__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/2:9.svg"; + import image2_13 from "../__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/2:13.svg"; + import image64_1 from "../__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/64:1.svg"; + import image93_14 from "../__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/93:14.svg"; + import image93_32 from "../__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/93:32.svg"; + + export default { + title: "Components/figspec-file-viewer", + component: "figspec-file-viewer", + parameters: { + layout: "fullscreen", + docs: { + inlineStories: false, + iframeHeight: 600, + }, + }, + }; + + const Template = (args) => html` + <figspec-file-viewer + style=" + min-width: 100%; + min-height: 100vh; + font-family: sans-serif; + " + .documentNode=${args.documentNode} + .renderedImages=${args.renderedImages || {}} + .panSpeed=${args.panSpeed || 500} + .zoomSpeed=${args.zoomSpeed || 500} + zoom-margin=${args.zoomMargin || 50} + ></figspec-file-viewer> + `; + + export const Defaults = Template.bind({}); + Defaults.args = { + documentNode: demoJson, + renderedImages: { + "2:5": image2_5, + "2:9": image2_9, + "2:13": image2_13, + "64:1": image64_1, + "93:14": image93_14, + "93:32": image93_32, + }, + };
packages/components/src/FigspecViewer/FigspecFileViewer.ts (new)
- @@ -0,0 +1,226 @@
  + import type * as Figma from "figma-js"; + + import { LitElement, css, html, property } from "lit-element"; + + import * as ErrorMessage from "./ErrorMessage"; + + import { ViewerMixin } from "./ViewerMixin"; + + import { extendStyles } from "./utils"; + + // TODO: Move docs for props in mixins (waiting for support at web-component-analyzer) + /** + * A Figma spec viewer. Displays a rendered image alongside sizing guides. + * @element figspec-file-viewer + * + * @property {number} [panX=0] + * Current pan offset in px for X axis. + * This is a "before the scale" value. + * + * @property {number} [panY=0] + * Current pan offset in px for Y axis. + * This is a "before the scale" value. + * + * @property {number} [scale=1] + * Current zoom level, where 1.0 = 100%. + * + * @property {number} [zoomSpeed=500] + * How fast zooming when do ctrl+scroll / pinch gestures. + * Available values: 1 ~ 1000 + * @attr [zoom-speed=500] See docs for `zoomSpeed` property. + * + * @property {number} [panSpeed=500] + * How fast panning when scroll vertically or horizontally. + * This does not affect to dragging with middle button pressed. + * Available values: 1 ~ 1000. + * @attr [pan-speed=500] See docs for `panSpeed` property. + * + * @property {Figma.Node | null} [selectedNode=null] + * Current selected node. + * + * @property {number} [zoomMargin=50] + * The minimum margin for the preview canvas in px. Will be used when the preview + * setting a default zooming scale for the canvas. + * @attr [zoom-margin=50] See docs for `zoomMargin` property. + * + * @fires scalechange When a user zoom-in or zoom-out the preview. + * @fires positionchange When a user panned the preview. + * @fires nodeselect When a user selected / unselected a node. + */ + export class FigspecFileViewer extends ViewerMixin(LitElement) { + /** + * A response of "GET file nodes" API. + * https://www.figma.com/developers/api#get-file-nodes-endpoint + */ + @property({ + type: Object, + attribute: "document-node", + }) + documentNode: Figma.FileResponse | null = null; + + /** + * A record of rendered images, where key is an ID of the node, + * value is an URI of the image. + * https://www.figma.com/developers/api#get-images-endpoint + */ + @property({ + type: Object, + attribute: "rendered-images", + }) + renderedImages: Record<string, string> | null = null; + + /** + * Current selected page (node whose type is "CANVAS"). + */ + selectedPage: Figma.Canvas | null = null; + + /** @private */ + get isMovable(): boolean { + return !!(this.renderedImages && this.documentNode); + } + + /** @private */ + get __images() { + return this.renderedImages || {}; + } + + /** @private */ + get error() { + if (!this.documentNode || !this.renderedImages) { + return ErrorMessage.ErrorMessage({ + title: "Parameter error", + children: html`<span> + Both <code>document-node</code> and <code>rendered-images</code> are + required. + </span>`, + }); + } + + if (super.error) { + return super.error; + } + } + + static get styles() { + return extendStyles(super.styles, [ + css` + :host { + --figspec-control-bg-default: #fcfcfc; + --figspec-control-fg-default: #333; + + --control-bg: var( + --figspec-control-bg, + var(--figspec-control-bg-default) + ); + --control-fg: var( + --figspec-control-bg, + var(--figspec-control-fg-default) + ); + --control-shadow: var( + --figspec-control-shadow, + 0 2px 4px rgba(0, 0, 0, 0.3) + ); + --padding: var(--figspec-control-padding, 8px 16px); + + display: flex; + flex-direction: column; + } + + @media (prefers-color-scheme: dark) { + :host { + --figspec-control-bg-default: #222; + --figspec-control-fg-default: #fff; + } + } + + .controls { + flex-shrink: 0; + padding: var(--padding); + + background-color: var(--control-bg); + box-shadow: var(--control-shadow); + color: var(--control-fg); + } + + .view { + position: relative; + flex-grow: 1; + flex-shrink: 1; + } + `, + ]); + } + + render() { + return html` + <div class="controls"> + <select @change=${this.#handlePageChange}> + ${this.documentNode?.document.children.map( + (c) => html`<option value=${c.id}>${c.name}</option>` + )} + </select> + </div> + + <div class="view">${super.render()}</div> + `; + } + + connectedCallback() { + super.connectedCallback(); + + if (this.documentNode) { + this.#selectFirstPage(); + + if (this.selectedPage) { + this.__updateTree(this.selectedPage); + this.resetZoom(); + } + } + } + + updated(changedProperties: Parameters<LitElement["updated"]>[0]) { + super.updated(changedProperties); + + if (changedProperties.has("documentNode")) { + this.#selectFirstPage(); + + if (this.selectedPage) { + this.__updateTree(this.selectedPage); + this.resetZoom(); + } + } + + if (changedProperties.has("renderedImages")) { + this.__updateEffectMargins(); + } + } + + #selectFirstPage = () => { + if (!this.documentNode) { + this.selectedPage = null; + return; + } + + this.selectedPage = + this.documentNode.document.children.filter( + (c): c is Figma.Canvas => c.type === "CANVAS" + )[0] ?? null; + }; + + #handlePageChange = (ev: Event) => { + const target = ev.currentTarget as HTMLSelectElement; + + this.selectedPage = + (this.documentNode?.document.children.find( + (c) => c.id === target.value + ) as Figma.Canvas) ?? null; + + if (this.selectedPage) { + this.__updateTree(this.selectedPage); + this.resetZoom(); + this.__updateEffectMargins(); + this.panX = 0; + this.panY = 0; + } + }; + }
packages/components/src/FigspecViewer/ViewerMixin.ts
- @@ -37,7 +37,9 @@ __images: Record<string, string>;
  readonly error?: string | TemplateResult | Error | null; - updateTree(node: Figma.Node): void; + __updateTree(node: Figma.Node): void; + __updateEffectMargins(): void; + resetZoom(): void; } export const ViewerMixin = <T extends Constructor<LitElement>>(
- @@ -54,9 +56,7 @@ static get styles() {
  // @ts-ignore const styles = super.styles; - return extendStyles( - styles, - [ + return extendStyles(styles, [ css` :host { --bg: var(--figspec-viewer-bg, #666);
- @@ -119,11 +119,10 @@ pointer-events: none;
  z-index: calc(var(--z-index) + 2); } `, - Node.styles, - ErrorMessage.styles, - DistanceGuide.styles, - ] - ); + Node.styles, + ErrorMessage.styles, + DistanceGuide.styles, + ]); } get __images(): Record<string, string> {
- @@ -132,7 +131,7 @@ }
  // Cached values #canvasSize?: Figma.Rect; - #canvasMargin?: Margin; + #effectMargins?: Record<string, Margin>; #flattenedNodes?: readonly SizedNode[]; constructor(...args: any[]) {
- @@ -144,10 +143,11 @@ });
  } get error(): string | Error | null | TemplateResult | undefined { - if (!this.#canvasSize || !this.#canvasMargin || !this.#flattenedNodes) { + if (!this.#canvasSize || !this.#flattenedNodes) { return ErrorMessage.ErrorMessage({ title: "Error", - children: "Please call `updateTree/1` method with a valid parameter.", + children: + "Please call `__updateTree/1` method with a valid parameter.", }); }
- @@ -173,7 +173,6 @@
  return this.error; } - const margin = this.#canvasMargin!; const canvasSize = this.#canvasSize!; const reverseScale = 1 / this.scale;
- @@ -201,21 +200,35 @@ >
  ${Object.entries(this.__images).map(([nodeId, uri]) => { const node = this.#getNodeById(nodeId); - if (!node) { + if ( + !node || + !("absoluteBoundingBox" in node) || + !this.#effectMargins?.[node.id] + ) { return null; } + + const margin = this.#effectMargins[node.id]; return html` - <img - class="rendered-image" - src="${uri}" - style=" - margin-top: ${-margin.top}px; - margin-left: ${-margin.left}px; - width: ${canvasSize.width + margin.left + margin.right}px; - height: ${canvasSize.height + margin.top + margin.bottom}px; - " - /> + <img class="rendered-image" src="${uri}" + style=${styleMap({ + top: `${node.absoluteBoundingBox.y - canvasSize.y}px`, + left: `${node.absoluteBoundingBox.x - canvasSize.x}px`, + marginTop: `${-margin.top}px`, + marginLeft: `${-margin.left}px`, + width: + node.absoluteBoundingBox.width + + margin.left + + margin.right + + "px", + height: + node.absoluteBoundingBox.height + + margin.top + + margin.bottom + + "px", + })}" + " /> `; })} ${this.selectedNode &&
- @@ -279,10 +292,14 @@
  connectedCallback() { super.connectedCallback(); - this.#resetZoom(); + this.resetZoom(); + } + + updated(changedProperties: Parameters<LitElement["updated"]>[0]) { + super.updated(changedProperties); } - updateTree(node: Figma.Node) { + __updateTree(node: Figma.Node) { if ( !( node.type === "CANVAS" ||
- @@ -299,24 +316,39 @@ this.#canvasSize =
  node.type === "CANVAS" ? getCanvasSize(node) : node.absoluteBoundingBox; this.#flattenedNodes = flattenNode(node); - this.#canvasMargin = getCanvasMargin( - this.#canvasSize, - this.#flattenedNodes - ); // Since above properties aren't "attribute", their changes does not // trigger an update. We need to manually request an update. this.requestUpdate(); } - #handleNodeClick = (node: SizedNode) => (ev: MouseEvent) => { - ev.preventDefault(); - ev.stopPropagation(); + __updateEffectMargins() { + if (!this.__images) { + return; + } - this.selectedNode = node; - }; + const containers = Object.keys(this.__images) + .map(this.#getNodeById) + .filter((n): n is NonNullable<typeof n> => !!n); - #resetZoom = () => { + this.#effectMargins = containers.reduce<Record<string, Margin>>( + (margin, node) => { + if (!("absoluteBoundingBox" in node)) { + return margin; + } + + return { + ...margin, + [node.id]: getEffectMargin(node, flattenNode(node)), + }; + }, + {} + ); + + this.requestUpdate(); + } + + resetZoom() { if (this.#canvasSize) { // Set initial zoom level based on element size const { width, height } = this.#canvasSize;
- @@ -330,6 +362,13 @@ const hDiff = elementHeight / (height + this.zoomMargin * 2);
  this.scale = Math.min(wDiff, hDiff, 1); } + } + + #handleNodeClick = (node: SizedNode) => (ev: MouseEvent) => { + ev.preventDefault(); + ev.stopPropagation(); + + this.selectedNode = node; }; #getNodeById = (id: string): Figma.Node | null => {
- @@ -370,8 +409,8 @@ height: Math.abs(Math.min(...bottom) - minY),
  }; } - function getCanvasMargin( - canvasSize: Figma.Rect, + function getEffectMargin( + container: SizedNode, nodes: readonly SizedNode[] ): Margin { const points = nodes.map((node) => {
- @@ -450,10 +489,16 @@ left: Math.min(...points.map((p) => p.left)),
  }; return { - top: canvasSize.y - bounds.top, - right: bounds.right - canvasSize.x - canvasSize.width, - bottom: bounds.bottom - canvasSize.y - canvasSize.height, - left: canvasSize.x - bounds.left, + top: container.absoluteBoundingBox.y - bounds.top, + right: + bounds.right - + container.absoluteBoundingBox.x - + container.absoluteBoundingBox.width, + bottom: + bounds.bottom - + container.absoluteBoundingBox.y - + container.absoluteBoundingBox.height, + left: container.absoluteBoundingBox.x - bounds.left, }; }
packages/components/src/FigspecViewer/index.stories.js > packages/components/src/FigspecViewer/FigspecFrameViewer.stories.js
- @@ -6,8 +6,8 @@ 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", - component: "figspec-viewer", + title: "Components/figspec-frame-viewer", + component: "figspec-frame-viewer", parameters: { layout: "fullscreen", docs: {
- @@ -18,7 +18,7 @@ },
  }; const Template = (args) => html` - <figspec-viewer + <figspec-frame-viewer style=" min-width: 100%; min-height: 100vh;
- @@ -29,7 +29,7 @@ rendered-image=${args.renderedImage || ""}
  .panSpeed=${args.panSpeed || 500} .zoomSpeed=${args.zoomSpeed || 500} zoom-margin=${args.zoomMargin || 50} - ></figspec-viewer> + ></figspec-frame-viewer> `; export const Defaults = Template.bind({});
- @@ -55,7 +55,7 @@
  WithoutRequiredValues.args = {}; export const Events = (args) => html` - <figspec-viewer + <figspec-frame-viewer style=" min-width: 100%; min-height: 100vh;
- @@ -69,7 +69,7 @@ zoom-margin=${args.zoomMargin || 50}
  @scalechange=${action("scalechange")} @positionchange=${action("positionchange")} @nodeselect=${action("nodeselect")} - ></figspec-viewer> + ></figspec-frame-viewer> `; Events.args = { nodes: demoJson,
packages/components/src/FigspecViewer/index.ts > packages/components/src/FigspecViewer/FigspecFrameViewer.ts
- @@ -2,18 +2,16 @@ import type * as Figma from "figma-js";
  import { LitElement, html, property } from "lit-element"; - import * as DistanceGuide from "./DistanceGuide"; import * as ErrorMessage from "./ErrorMessage"; - import * as Node from "./Node"; import { ViewerMixin } from "./ViewerMixin"; - import { extendStyles, SizedNode } from "./utils"; + import { SizedNode } from "./utils"; // TODO: Move docs for props in mixins (waiting for support at web-component-analyzer) /** * A Figma spec viewer. Displays a rendered image alongside sizing guides. - * @element figspec-viewer + * @element figspec-frame-viewer * * @property {number} [panX=0] * Current pan offset in px for X axis.
- @@ -49,7 +47,7 @@ * @fires scalechange When a user zoom-in or zoom-out the preview.
  * @fires positionchange When a user panned the preview. * @fires nodeselect When a user selected / unselected a node. */ - export class FigspecViewer extends ViewerMixin(LitElement) { + export class FigspecFrameViewer extends ViewerMixin(LitElement) { /** * A response of "GET file nodes" API. * https://www.figma.com/developers/api#get-file-nodes-endpoint
- @@ -132,7 +130,9 @@ connectedCallback() {
  super.connectedCallback(); if (this.documentNode) { - this.updateTree(this.documentNode); + this.__updateTree(this.documentNode); + this.__updateEffectMargins(); + this.resetZoom(); } }
- @@ -142,7 +142,12 @@
  if (changedProperties.has("nodes")) { if (!this.documentNode) return; - this.updateTree(this.documentNode); + this.__updateTree(this.documentNode); + this.resetZoom(); + } + + if (changedProperties.has("renderedImage")) { + this.__updateEffectMargins(); } } }
packages/components/src/__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/2:13.svg (new)
- @@ -0,0 +1,21 @@
  + <svg width="126" height="41" viewBox="0 0 126 41" fill="none" xmlns="http://www.w3.org/2000/svg"> + <g filter="url(#filter0_d)"> + <rect x="1" y="1" width="124" height="38" rx="4" fill="url(#paint0_linear)"/> + <path d="M34.7845 25.45V14.7859H38.2709C39.4281 14.7859 40.2972 15.0252 40.8783 15.5037C41.4642 15.9822 41.7572 16.6902 41.7572 17.6277C41.7572 18.1258 41.6156 18.5677 41.3324 18.9534C41.0492 19.3343 40.6635 19.6297 40.1752 19.8397C40.7513 20.0008 41.2054 20.3084 41.5375 20.7625C41.8744 21.2117 42.0428 21.7488 42.0428 22.3738C42.0428 23.3309 41.7328 24.0828 41.1127 24.6297C40.4926 25.1766 39.6161 25.45 38.4833 25.45H34.7845ZM36.1908 20.4622V24.3001H38.5126C39.1669 24.3001 39.682 24.1317 40.058 23.7947C40.4388 23.4529 40.6293 22.9842 40.6293 22.3885C40.6293 21.1043 39.931 20.4622 38.5345 20.4622H36.1908ZM36.1908 19.3343H38.3148C38.9301 19.3343 39.4208 19.1805 39.787 18.8729C40.1581 18.5652 40.3436 18.1478 40.3436 17.6204C40.3436 17.0345 40.1727 16.6097 39.8309 16.346C39.4891 16.0775 38.9691 15.9432 38.2709 15.9432H36.1908V19.3343ZM51.6376 14.7859V22.0369C51.6327 23.0428 51.3153 23.8655 50.6854 24.5052C50.0604 25.1448 49.2108 25.5037 48.1366 25.5818L47.7631 25.5965C46.5961 25.5965 45.6659 25.2816 44.9725 24.6517C44.2792 24.0218 43.9276 23.1551 43.9178 22.0516V14.7859H45.3094V22.0076C45.3094 22.7791 45.5219 23.3797 45.9467 23.8094C46.3715 24.2342 46.9769 24.4466 47.7631 24.4466C48.559 24.4466 49.1669 24.2342 49.5868 23.8094C50.0116 23.3846 50.224 22.7864 50.224 22.015V14.7859H51.6376ZM61.225 15.9432H57.7972V25.45H56.3983V15.9432H52.9779V14.7859H61.225V15.9432ZM70.2924 15.9432H66.8646V25.45H65.4657V15.9432H62.0453V14.7859H70.2924V15.9432ZM79.8724 20.4622C79.8724 21.5071 79.6967 22.4202 79.3451 23.2015C78.9935 23.9778 78.4955 24.5711 77.851 24.9813C77.2064 25.3914 76.4545 25.5965 75.5951 25.5965C74.7552 25.5965 74.0106 25.3914 73.3612 24.9813C72.7118 24.5662 72.2064 23.9778 71.8451 23.2161C71.4886 22.4495 71.3055 21.5633 71.2958 20.5574V19.7884C71.2958 18.763 71.474 17.8572 71.8304 17.0711C72.1869 16.285 72.6898 15.6844 73.3392 15.2693C73.9935 14.8494 74.7406 14.6395 75.5804 14.6395C76.4349 14.6395 77.1869 14.847 77.8363 15.262C78.4906 15.6722 78.9935 16.2703 79.3451 17.0565C79.6967 17.8377 79.8724 18.7484 79.8724 19.7884V20.4622ZM78.4735 19.7737C78.4735 18.5091 78.2196 17.5399 77.7118 16.866C77.204 16.1873 76.4935 15.848 75.5804 15.848C74.6918 15.848 73.9911 16.1873 73.4784 16.866C72.9706 17.5399 72.7094 18.4774 72.6947 19.6785V20.4622C72.6947 21.6878 72.951 22.6522 73.4637 23.3553C73.9813 24.0535 74.6918 24.4026 75.5951 24.4026C76.5033 24.4026 77.2064 24.0731 77.7045 23.4139C78.2025 22.7498 78.4589 21.8001 78.4735 20.5648V19.7737ZM90.1776 25.45H88.764L83.3954 17.2322V25.45H81.9818V14.7859H83.3954L88.7787 23.0403V14.7859H90.1776V25.45Z" fill="white"/> + </g> + <defs> + <filter id="filter0_d" x="0" y="1" width="126" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> + <feFlood flood-opacity="0" result="BackgroundImageFix"/> + <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/> + <feOffset dy="1"/> + <feGaussianBlur stdDeviation="0.5"/> + <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/> + <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/> + <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/> + </filter> + <linearGradient id="paint0_linear" x1="125" y1="39" x2="-0.950612" y2="20.9509" gradientUnits="userSpaceOnUse"> + <stop offset="0.325967" stop-color="#51B441"/> + <stop offset="1" stop-color="#61C451"/> + </linearGradient> + </defs> + </svg>
packages/components/src/__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/2:5.svg (new)
- @@ -0,0 +1,21 @@
  + <svg width="130" height="44" viewBox="0 0 130 44" fill="none" xmlns="http://www.w3.org/2000/svg"> + <g filter="url(#filter0_d)"> + <rect x="2" y="1" width="126" height="40" rx="4" fill="url(#paint0_linear)"/> + <path d="M35.4453 27V15.625H39.1641C40.3984 15.625 41.3255 15.8802 41.9453 16.3906C42.5703 16.901 42.8828 17.6562 42.8828 18.6562C42.8828 19.1875 42.7318 19.6589 42.4297 20.0703C42.1276 20.4766 41.7161 20.7917 41.1953 21.0156C41.8099 21.1875 42.2943 21.5156 42.6484 22C43.0078 22.4792 43.1875 23.0521 43.1875 23.7188C43.1875 24.7396 42.8568 25.5417 42.1953 26.125C41.5339 26.7083 40.599 27 39.3906 27H35.4453ZM36.9453 21.6797V25.7734H39.4219C40.1198 25.7734 40.6693 25.5938 41.0703 25.2344C41.4766 24.8698 41.6797 24.3698 41.6797 23.7344C41.6797 22.3646 40.9349 21.6797 39.4453 21.6797H36.9453ZM36.9453 20.4766H39.2109C39.8672 20.4766 40.3906 20.3125 40.7812 19.9844C41.1771 19.6562 41.375 19.2109 41.375 18.6484C41.375 18.0234 41.1927 17.5703 40.8281 17.2891C40.4635 17.0026 39.9089 16.8594 39.1641 16.8594H36.9453V20.4766ZM53.4219 15.625V23.3594C53.4167 24.4323 53.0781 25.3099 52.4062 25.9922C51.7396 26.6745 50.8333 27.0573 49.6875 27.1406L49.2891 27.1562C48.0443 27.1562 47.0521 26.8203 46.3125 26.1484C45.5729 25.4766 45.1979 24.5521 45.1875 23.375V15.625H46.6719V23.3281C46.6719 24.151 46.8984 24.7917 47.3516 25.25C47.8047 25.7031 48.4505 25.9297 49.2891 25.9297C50.138 25.9297 50.7865 25.7031 51.2344 25.25C51.6875 24.7969 51.9141 24.1589 51.9141 23.3359V15.625H53.4219ZM63.6484 16.8594H59.9922V27H58.5V16.8594H54.8516V15.625H63.6484V16.8594ZM73.3203 16.8594H69.6641V27H68.1719V16.8594H64.5234V15.625H73.3203V16.8594ZM83.5391 21.6797C83.5391 22.7943 83.3516 23.7682 82.9766 24.6016C82.6016 25.4297 82.0703 26.0625 81.3828 26.5C80.6953 26.9375 79.8932 27.1562 78.9766 27.1562C78.0807 27.1562 77.2865 26.9375 76.5938 26.5C75.901 26.0573 75.362 25.4297 74.9766 24.6172C74.5964 23.7995 74.401 22.8542 74.3906 21.7812V20.9609C74.3906 19.8672 74.5807 18.901 74.9609 18.0625C75.3411 17.224 75.8776 16.5833 76.5703 16.1406C77.2682 15.6927 78.0651 15.4688 78.9609 15.4688C79.8724 15.4688 80.6745 15.6901 81.3672 16.1328C82.0651 16.5703 82.6016 17.2083 82.9766 18.0469C83.3516 18.8802 83.5391 19.8516 83.5391 20.9609V21.6797ZM82.0469 20.9453C82.0469 19.5964 81.776 18.5625 81.2344 17.8438C80.6927 17.1198 79.9349 16.7578 78.9609 16.7578C78.013 16.7578 77.2656 17.1198 76.7188 17.8438C76.1771 18.5625 75.8984 19.5625 75.8828 20.8438V21.6797C75.8828 22.987 76.1562 24.0156 76.7031 24.7656C77.2552 25.5104 78.013 25.8828 78.9766 25.8828C79.9453 25.8828 80.6953 25.5312 81.2266 24.8281C81.7578 24.1198 82.0312 23.1068 82.0469 21.7891V20.9453ZM94.5312 27H93.0234L87.2969 18.2344V27H85.7891V15.625H87.2969L93.0391 24.4297V15.625H94.5312V27Z" fill="white"/> + </g> + <defs> + <filter id="filter0_d" x="0" y="0" width="130" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> + <feFlood flood-opacity="0" result="BackgroundImageFix"/> + <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/> + <feOffset dy="1"/> + <feGaussianBlur stdDeviation="1"/> + <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/> + <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/> + <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/> + </filter> + <linearGradient id="paint0_linear" x1="128" y1="41" x2="-0.157829" y2="23.2714" gradientUnits="userSpaceOnUse"> + <stop offset="0.325967" stop-color="#51B441"/> + <stop offset="1" stop-color="#61C451"/> + </linearGradient> + </defs> + </svg>
packages/components/src/__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/2:9.svg (new)
- @@ -0,0 +1,21 @@
  + <svg width="130" height="44" viewBox="0 0 130 44" fill="none" xmlns="http://www.w3.org/2000/svg"> + <g filter="url(#filter0_d)"> + <rect x="2" y="1" width="126" height="40" rx="4" fill="url(#paint0_linear)"/> + <path d="M35.4453 27V15.625H39.1641C40.3984 15.625 41.3255 15.8802 41.9453 16.3906C42.5703 16.901 42.8828 17.6562 42.8828 18.6562C42.8828 19.1875 42.7318 19.6589 42.4297 20.0703C42.1276 20.4766 41.7161 20.7917 41.1953 21.0156C41.8099 21.1875 42.2943 21.5156 42.6484 22C43.0078 22.4792 43.1875 23.0521 43.1875 23.7188C43.1875 24.7396 42.8568 25.5417 42.1953 26.125C41.5339 26.7083 40.599 27 39.3906 27H35.4453ZM36.9453 21.6797V25.7734H39.4219C40.1198 25.7734 40.6693 25.5938 41.0703 25.2344C41.4766 24.8698 41.6797 24.3698 41.6797 23.7344C41.6797 22.3646 40.9349 21.6797 39.4453 21.6797H36.9453ZM36.9453 20.4766H39.2109C39.8672 20.4766 40.3906 20.3125 40.7812 19.9844C41.1771 19.6562 41.375 19.2109 41.375 18.6484C41.375 18.0234 41.1927 17.5703 40.8281 17.2891C40.4635 17.0026 39.9089 16.8594 39.1641 16.8594H36.9453V20.4766ZM53.4219 15.625V23.3594C53.4167 24.4323 53.0781 25.3099 52.4062 25.9922C51.7396 26.6745 50.8333 27.0573 49.6875 27.1406L49.2891 27.1562C48.0443 27.1562 47.0521 26.8203 46.3125 26.1484C45.5729 25.4766 45.1979 24.5521 45.1875 23.375V15.625H46.6719V23.3281C46.6719 24.151 46.8984 24.7917 47.3516 25.25C47.8047 25.7031 48.4505 25.9297 49.2891 25.9297C50.138 25.9297 50.7865 25.7031 51.2344 25.25C51.6875 24.7969 51.9141 24.1589 51.9141 23.3359V15.625H53.4219ZM63.6484 16.8594H59.9922V27H58.5V16.8594H54.8516V15.625H63.6484V16.8594ZM73.3203 16.8594H69.6641V27H68.1719V16.8594H64.5234V15.625H73.3203V16.8594ZM83.5391 21.6797C83.5391 22.7943 83.3516 23.7682 82.9766 24.6016C82.6016 25.4297 82.0703 26.0625 81.3828 26.5C80.6953 26.9375 79.8932 27.1562 78.9766 27.1562C78.0807 27.1562 77.2865 26.9375 76.5938 26.5C75.901 26.0573 75.362 25.4297 74.9766 24.6172C74.5964 23.7995 74.401 22.8542 74.3906 21.7812V20.9609C74.3906 19.8672 74.5807 18.901 74.9609 18.0625C75.3411 17.224 75.8776 16.5833 76.5703 16.1406C77.2682 15.6927 78.0651 15.4688 78.9609 15.4688C79.8724 15.4688 80.6745 15.6901 81.3672 16.1328C82.0651 16.5703 82.6016 17.2083 82.9766 18.0469C83.3516 18.8802 83.5391 19.8516 83.5391 20.9609V21.6797ZM82.0469 20.9453C82.0469 19.5964 81.776 18.5625 81.2344 17.8438C80.6927 17.1198 79.9349 16.7578 78.9609 16.7578C78.013 16.7578 77.2656 17.1198 76.7188 17.8438C76.1771 18.5625 75.8984 19.5625 75.8828 20.8438V21.6797C75.8828 22.987 76.1562 24.0156 76.7031 24.7656C77.2552 25.5104 78.013 25.8828 78.9766 25.8828C79.9453 25.8828 80.6953 25.5312 81.2266 24.8281C81.7578 24.1198 82.0312 23.1068 82.0469 21.7891V20.9453ZM94.5312 27H93.0234L87.2969 18.2344V27H85.7891V15.625H87.2969L93.0391 24.4297V15.625H94.5312V27Z" fill="#E0E0E0"/> + </g> + <defs> + <filter id="filter0_d" x="0" y="0" width="130" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> + <feFlood flood-opacity="0" result="BackgroundImageFix"/> + <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/> + <feOffset dy="1"/> + <feGaussianBlur stdDeviation="1"/> + <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/> + <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/> + <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/> + </filter> + <linearGradient id="paint0_linear" x1="128" y1="41" x2="-0.157829" y2="23.2714" gradientUnits="userSpaceOnUse"> + <stop offset="0.325967" stop-color="#A6B4A4"/> + <stop offset="1" stop-color="#BDC4BC"/> + </linearGradient> + </defs> + </svg>
packages/components/src/__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/93:14.svg (new)
- @@ -0,0 +1,4 @@
  + <svg width="456" height="270" viewBox="0 0 456 270" fill="none" xmlns="http://www.w3.org/2000/svg"> + <rect width="456" height="270" fill="white"/> + <path d="M376.418 126.54H380.306C381.226 126.54 381.942 126.772 382.454 127.236C382.966 127.7 383.222 128.348 383.222 129.18C383.222 130.012 382.966 130.66 382.454 131.124C381.942 131.588 381.226 131.82 380.306 131.82H378.29V135H376.418V126.54ZM380.066 130.404C381.002 130.404 381.47 130 381.47 129.192C381.47 128.776 381.354 128.468 381.122 128.268C380.89 128.068 380.538 127.968 380.066 127.968H378.29V130.404H380.066ZM389.183 133.128H385.247L384.443 135H382.559L386.447 126.54H387.947L391.835 135H389.987L389.183 133.128ZM388.571 131.712L387.215 128.544L385.859 131.712H388.571ZM399.581 130.332V134.472C399.173 134.672 398.693 134.828 398.141 134.94C397.589 135.052 397.021 135.108 396.437 135.108C395.541 135.108 394.765 134.936 394.109 134.592C393.453 134.24 392.949 133.74 392.597 133.092C392.245 132.436 392.069 131.66 392.069 130.764C392.069 129.884 392.241 129.12 392.585 128.472C392.937 127.816 393.437 127.312 394.085 126.96C394.733 126.608 395.489 126.432 396.353 126.432C396.961 126.432 397.525 126.516 398.045 126.684C398.573 126.852 399.009 127.084 399.353 127.38L398.765 128.712C398.373 128.432 397.989 128.232 397.613 128.112C397.245 127.984 396.845 127.92 396.413 127.92C394.781 127.92 393.965 128.868 393.965 130.764C393.965 131.74 394.177 132.468 394.601 132.948C395.025 133.428 395.665 133.668 396.521 133.668C396.985 133.668 397.445 133.608 397.901 133.488V131.628H396.245V130.332H399.581ZM401.168 126.54H407V127.992H402.992V129.972H406.76V131.424H402.992V133.548H407V135H401.168V126.54ZM417.405 133.5V135H411.585V133.62L414.405 130.632C414.997 130.008 415.293 129.432 415.293 128.904C415.293 128.232 414.909 127.896 414.141 127.896C413.789 127.896 413.421 127.968 413.037 128.112C412.653 128.248 412.277 128.448 411.909 128.712L411.321 127.38C411.657 127.092 412.089 126.864 412.617 126.696C413.145 126.52 413.685 126.432 414.237 126.432C415.117 126.432 415.817 126.644 416.337 127.068C416.865 127.492 417.129 128.06 417.129 128.772C417.129 129.26 417.025 129.712 416.817 130.128C416.617 130.544 416.277 131.008 415.797 131.52L413.913 133.5H417.405Z" fill="#666666"/> + </svg>
packages/components/src/__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/93:32.svg (new)
- @@ -0,0 +1,4 @@
  + <svg width="456" height="270" viewBox="0 0 456 270" fill="none" xmlns="http://www.w3.org/2000/svg"> + <rect width="456" height="270" fill="white"/> + <path d="M376.43 126.54H380.318C381.238 126.54 381.954 126.772 382.466 127.236C382.978 127.7 383.234 128.348 383.234 129.18C383.234 130.012 382.978 130.66 382.466 131.124C381.954 131.588 381.238 131.82 380.318 131.82H378.302V135H376.43V126.54ZM380.078 130.404C381.014 130.404 381.482 130 381.482 129.192C381.482 128.776 381.366 128.468 381.134 128.268C380.902 128.068 380.55 127.968 380.078 127.968H378.302V130.404H380.078ZM389.195 133.128H385.259L384.455 135H382.571L386.459 126.54H387.959L391.847 135H389.999L389.195 133.128ZM388.583 131.712L387.227 128.544L385.871 131.712H388.583ZM399.592 130.332V134.472C399.184 134.672 398.704 134.828 398.152 134.94C397.6 135.052 397.032 135.108 396.448 135.108C395.552 135.108 394.776 134.936 394.12 134.592C393.464 134.24 392.96 133.74 392.608 133.092C392.256 132.436 392.08 131.66 392.08 130.764C392.08 129.884 392.252 129.12 392.596 128.472C392.948 127.816 393.448 127.312 394.096 126.96C394.744 126.608 395.5 126.432 396.364 126.432C396.972 126.432 397.536 126.516 398.056 126.684C398.584 126.852 399.02 127.084 399.364 127.38L398.776 128.712C398.384 128.432 398 128.232 397.624 128.112C397.256 127.984 396.856 127.92 396.424 127.92C394.792 127.92 393.976 128.868 393.976 130.764C393.976 131.74 394.188 132.468 394.612 132.948C395.036 133.428 395.676 133.668 396.532 133.668C396.996 133.668 397.456 133.608 397.912 133.488V131.628H396.256V130.332H399.592ZM401.18 126.54H407.012V127.992H403.004V129.972H406.772V131.424H403.004V133.548H407.012V135H401.18V126.54ZM415.809 130.644C416.305 130.788 416.685 131.04 416.949 131.4C417.221 131.752 417.357 132.184 417.357 132.696C417.357 133.44 417.073 134.028 416.505 134.46C415.937 134.884 415.169 135.096 414.201 135.096C413.617 135.096 413.057 135.012 412.521 134.844C411.985 134.676 411.549 134.444 411.213 134.148L411.801 132.816C412.569 133.36 413.341 133.632 414.117 133.632C414.629 133.632 415.001 133.544 415.233 133.368C415.465 133.184 415.581 132.9 415.581 132.516C415.581 132.14 415.465 131.868 415.233 131.7C415.001 131.532 414.629 131.448 414.117 131.448H412.905V129.996H413.913C414.401 129.996 414.761 129.912 414.993 129.744C415.233 129.576 415.353 129.316 415.353 128.964C415.353 128.62 415.249 128.356 415.041 128.172C414.833 127.988 414.533 127.896 414.141 127.896C413.789 127.896 413.421 127.968 413.037 128.112C412.653 128.248 412.281 128.448 411.921 128.712L411.333 127.38C411.669 127.092 412.101 126.864 412.629 126.696C413.165 126.52 413.713 126.432 414.273 126.432C414.849 126.432 415.353 126.528 415.785 126.72C416.217 126.904 416.549 127.168 416.781 127.512C417.021 127.856 417.141 128.256 417.141 128.712C417.141 129.168 417.021 129.568 416.781 129.912C416.549 130.248 416.225 130.492 415.809 130.644Z" fill="#666666"/> + </svg>
packages/components/src/__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/file.json (new)
- @@ -0,0 +1,2021 @@
  + { + "document": { + "id": "0:0", + "name": "Document", + "type": "DOCUMENT", + "children": [ + { + "id": "0:1", + "name": "Components", + "type": "CANVAS", + "children": [ + { + "id": "2:5", + "name": "Button", + "type": "COMPONENT", + "blendMode": "PASS_THROUGH", + "children": [ + { + "id": "2:3", + "name": "Rectangle", + "type": "RECTANGLE", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -364, + "y": -338, + "width": 126, + "height": 40 + }, + "constraints": { + "vertical": "SCALE", + "horizontal": "SCALE" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "GRADIENT_LINEAR", + "gradientHandlePositions": [ + { + "x": 0.9999999333541432, + "y": 1.000000198606502 + }, + { + "x": 0.007325909144767162, + "y": 8.150171737497658e-8 + }, + { + "x": 1.5000000358727652, + "y": -10.385504555878239 + } + ], + "gradientStops": [ + { + "color": { + "r": 0.31956079602241516, + "g": 0.7074577212333679, + "b": 0.2564148008823395, + "a": 1 + }, + "position": 0.32596686482429504 + }, + { + "color": { + "r": 0.3817959129810333, + "g": 0.7685589790344238, + "b": 0.31883448362350464, + "a": 1 + }, + "position": 1 + } + ] + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "effects": [], + "cornerRadius": 4, + "rectangleCornerRadii": [ + 4, + 4, + 4, + 4 + ] + }, + { + "id": "2:4", + "name": "BUTTON", + "type": "TEXT", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -332, + "y": -327, + "width": 62, + "height": 19 + }, + "constraints": { + "vertical": "SCALE", + "horizontal": "SCALE" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "OUTSIDE", + "effects": [], + "characters": "BUTTON", + "style": { + "fontFamily": "Roboto", + "fontPostScriptName": null, + "fontWeight": 400, + "textAutoResize": "WIDTH_AND_HEIGHT", + "fontSize": 16, + "textAlignHorizontal": "CENTER", + "textAlignVertical": "CENTER", + "letterSpacing": 0, + "lineHeightPx": 18.75, + "lineHeightPercent": 100, + "lineHeightUnit": "INTRINSIC_%" + }, + "layoutVersion": 0, + "characterStyleOverrides": [], + "styleOverrideTable": {} + } + ], + "absoluteBoundingBox": { + "x": -364, + "y": -338, + "width": 126, + "height": 40 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "clipsContent": false, + "background": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "fills": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "backgroundColor": { + "r": 0, + "g": 0, + "b": 0, + "a": 0 + }, + "exportSettings": [ + { + "suffix": "", + "format": "PDF", + "constraint": { + "type": "SCALE", + "value": 1 + } + } + ], + "effects": [ + { + "type": "DROP_SHADOW", + "visible": true, + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.15000000596046448 + }, + "blendMode": "NORMAL", + "offset": { + "x": 0, + "y": 1 + }, + "radius": 2 + } + ], + "transitionNodeID": "2:13", + "transitionDuration": 300, + "transitionEasing": "EASE_IN_AND_OUT" + }, + { + "id": "2:13", + "name": "Button__Active", + "type": "COMPONENT", + "blendMode": "PASS_THROUGH", + "children": [ + { + "id": "2:10", + "name": "Button", + "type": "INSTANCE", + "blendMode": "PASS_THROUGH", + "children": [ + { + "id": "I2:10;2:3", + "name": "Rectangle", + "type": "RECTANGLE", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -190, + "y": -337, + "width": 124, + "height": 38 + }, + "constraints": { + "vertical": "SCALE", + "horizontal": "SCALE" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "GRADIENT_LINEAR", + "gradientHandlePositions": [ + { + "x": 0.9999999333541432, + "y": 1.000000198606502 + }, + { + "x": 0.007325909144767162, + "y": 8.150171737497658e-8 + }, + { + "x": 1.5000000358727652, + "y": -10.385504555878239 + } + ], + "gradientStops": [ + { + "color": { + "r": 0.31956079602241516, + "g": 0.7074577212333679, + "b": 0.2564148008823395, + "a": 1 + }, + "position": 0.32596686482429504 + }, + { + "color": { + "r": 0.3817959129810333, + "g": 0.7685589790344238, + "b": 0.31883448362350464, + "a": 1 + }, + "position": 1 + } + ] + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "effects": [], + "cornerRadius": 4, + "rectangleCornerRadii": [ + 4, + 4, + 4, + 4 + ] + }, + { + "id": "I2:10;2:4", + "name": "BUTTON", + "type": "TEXT", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -157.5079345703125, + "y": -326.54998779296875, + "width": 58, + "height": 18 + }, + "constraints": { + "vertical": "SCALE", + "horizontal": "SCALE" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "OUTSIDE", + "effects": [], + "characters": "BUTTON", + "style": { + "fontFamily": "Roboto", + "fontPostScriptName": null, + "fontWeight": 400, + "textAutoResize": "WIDTH_AND_HEIGHT", + "fontSize": 15, + "textAlignHorizontal": "CENTER", + "textAlignVertical": "CENTER", + "letterSpacing": 0, + "lineHeightPx": 17.578125, + "lineHeightPercent": 100, + "lineHeightUnit": "INTRINSIC_%" + }, + "layoutVersion": 0, + "characterStyleOverrides": [], + "styleOverrideTable": {} + } + ], + "absoluteBoundingBox": { + "x": -190, + "y": -337, + "width": 124, + "height": 38 + }, + "preserveRatio": true, + "constraints": { + "vertical": "SCALE", + "horizontal": "SCALE" + }, + "clipsContent": false, + "background": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "fills": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "backgroundColor": { + "r": 0, + "g": 0, + "b": 0, + "a": 0 + }, + "effects": [ + { + "type": "DROP_SHADOW", + "visible": true, + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.25 + }, + "blendMode": "NORMAL", + "offset": { + "x": 0, + "y": 1 + }, + "radius": 1 + } + ], + "componentId": "2:5" + } + ], + "absoluteBoundingBox": { + "x": -191, + "y": -338, + "width": 126, + "height": 40 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "clipsContent": false, + "background": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "fills": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "backgroundColor": { + "r": 0, + "g": 0, + "b": 0, + "a": 0 + }, + "exportSettings": [ + { + "suffix": "", + "format": "PDF", + "constraint": { + "type": "SCALE", + "value": 1 + } + } + ], + "effects": [] + }, + { + "id": "2:9", + "name": "Button__Disabled", + "type": "COMPONENT", + "blendMode": "PASS_THROUGH", + "children": [ + { + "id": "2:6", + "name": "Button", + "type": "INSTANCE", + "blendMode": "PASS_THROUGH", + "children": [ + { + "id": "I2:6;2:3", + "name": "Rectangle", + "type": "RECTANGLE", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -364, + "y": -259, + "width": 126, + "height": 40 + }, + "constraints": { + "vertical": "SCALE", + "horizontal": "SCALE" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "GRADIENT_LINEAR", + "gradientHandlePositions": [ + { + "x": 0.9999999333541432, + "y": 1.000000198606502 + }, + { + "x": 0.007325909144767162, + "y": 8.150171737497658e-8 + }, + { + "x": 1.5000000358727652, + "y": -10.385504555878239 + } + ], + "gradientStops": [ + { + "color": { + "r": 0.6527005434036255, + "g": 0.7074577212333679, + "b": 0.6437865495681763, + "a": 1 + }, + "position": 0.32596686482429504 + }, + { + "color": { + "r": 0.7421205639839172, + "g": 0.7685589790344238, + "b": 0.7378166317939758, + "a": 1 + }, + "position": 1 + } + ] + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "effects": [], + "cornerRadius": 4, + "rectangleCornerRadii": [ + 4, + 4, + 4, + 4 + ] + }, + { + "id": "I2:6;2:4", + "name": "BUTTON", + "type": "TEXT", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -332, + "y": -248, + "width": 62, + "height": 19 + }, + "constraints": { + "vertical": "SCALE", + "horizontal": "SCALE" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 0.8777292370796204, + "g": 0.8777292370796204, + "b": 0.8777292370796204, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "OUTSIDE", + "effects": [], + "characters": "BUTTON", + "style": { + "fontFamily": "Roboto", + "fontPostScriptName": null, + "fontWeight": 400, + "textAutoResize": "WIDTH_AND_HEIGHT", + "fontSize": 16, + "textAlignHorizontal": "CENTER", + "textAlignVertical": "CENTER", + "letterSpacing": 0, + "lineHeightPx": 18.75, + "lineHeightPercent": 100, + "lineHeightUnit": "INTRINSIC_%" + }, + "layoutVersion": 0, + "characterStyleOverrides": [], + "styleOverrideTable": {} + } + ], + "absoluteBoundingBox": { + "x": -364, + "y": -259, + "width": 126, + "height": 40 + }, + "constraints": { + "vertical": "SCALE", + "horizontal": "SCALE" + }, + "clipsContent": false, + "background": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "fills": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "backgroundColor": { + "r": 0, + "g": 0, + "b": 0, + "a": 0 + }, + "effects": [ + { + "type": "DROP_SHADOW", + "visible": true, + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.15000000596046448 + }, + "blendMode": "NORMAL", + "offset": { + "x": 0, + "y": 1 + }, + "radius": 2 + } + ], + "transitionNodeID": "2:13", + "transitionDuration": 300, + "transitionEasing": "EASE_IN_AND_OUT", + "componentId": "2:5" + } + ], + "absoluteBoundingBox": { + "x": -364, + "y": -259, + "width": 126, + "height": 40 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "clipsContent": false, + "background": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "fills": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "backgroundColor": { + "r": 0, + "g": 0, + "b": 0, + "a": 0 + }, + "exportSettings": [ + { + "suffix": "", + "format": "PDF", + "constraint": { + "type": "SCALE", + "value": 1 + } + } + ], + "effects": [] + } + ], + "backgroundColor": { + "r": 0.8980392217636108, + "g": 0.8980392217636108, + "b": 0.8980392217636108, + "a": 1 + }, + "prototypeStartNodeID": "2:5", + "prototypeDevice": { + "type": "NONE", + "rotation": "NONE" + }, + "exportSettings": [] + }, + { + "id": "64:0", + "name": "Sample pages", + "type": "CANVAS", + "children": [ + { + "id": "64:1", + "name": "Components", + "type": "FRAME", + "blendMode": "PASS_THROUGH", + "children": [ + { + "id": "64:2", + "name": "Button", + "type": "INSTANCE", + "blendMode": "PASS_THROUGH", + "children": [ + { + "id": "I64:2;2:3", + "name": "Rectangle", + "type": "RECTANGLE", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -295, + "y": -273, + "width": 126, + "height": 40 + }, + "constraints": { + "vertical": "SCALE", + "horizontal": "SCALE" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "GRADIENT_LINEAR", + "gradientHandlePositions": [ + { + "x": 0.9999999333541432, + "y": 1.000000198606502 + }, + { + "x": 0.007325909144767162, + "y": 8.150171737497658e-8 + }, + { + "x": 1.5000000358727652, + "y": -10.385504555878239 + } + ], + "gradientStops": [ + { + "color": { + "r": 0.31956079602241516, + "g": 0.7074577212333679, + "b": 0.2564148008823395, + "a": 1 + }, + "position": 0.32596686482429504 + }, + { + "color": { + "r": 0.3817959129810333, + "g": 0.7685589790344238, + "b": 0.31883448362350464, + "a": 1 + }, + "position": 1 + } + ] + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "effects": [], + "cornerRadius": 4, + "rectangleCornerRadii": [ + 4, + 4, + 4, + 4 + ] + }, + { + "id": "I64:2;2:4", + "name": "BUTTON", + "type": "TEXT", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -263, + "y": -262, + "width": 62, + "height": 19 + }, + "constraints": { + "vertical": "SCALE", + "horizontal": "SCALE" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "OUTSIDE", + "effects": [], + "characters": "BUTTON", + "style": { + "fontFamily": "Roboto", + "fontPostScriptName": null, + "fontWeight": 400, + "textAutoResize": "WIDTH_AND_HEIGHT", + "fontSize": 16, + "textAlignHorizontal": "CENTER", + "textAlignVertical": "CENTER", + "letterSpacing": 0, + "lineHeightPx": 18.75, + "lineHeightPercent": 100, + "lineHeightUnit": "INTRINSIC_%" + }, + "layoutVersion": 0, + "characterStyleOverrides": [], + "styleOverrideTable": {} + } + ], + "absoluteBoundingBox": { + "x": -295, + "y": -273, + "width": 126, + "height": 40 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "clipsContent": false, + "background": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "fills": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "backgroundColor": { + "r": 0, + "g": 0, + "b": 0, + "a": 0 + }, + "effects": [ + { + "type": "DROP_SHADOW", + "visible": true, + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.15000000596046448 + }, + "blendMode": "NORMAL", + "offset": { + "x": 0, + "y": 1 + }, + "radius": 2 + } + ], + "componentId": "2:5" + }, + { + "id": "64:5", + "name": "Button__Active", + "type": "INSTANCE", + "blendMode": "PASS_THROUGH", + "children": [ + { + "id": "I64:5;2:10", + "name": "Button", + "type": "INSTANCE", + "blendMode": "PASS_THROUGH", + "children": [ + { + "id": "I64:5;2:10;2:3", + "name": "Rectangle", + "type": "RECTANGLE", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -294, + "y": -136, + "width": 124, + "height": 38 + }, + "constraints": { + "vertical": "SCALE", + "horizontal": "SCALE" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "GRADIENT_LINEAR", + "gradientHandlePositions": [ + { + "x": 0.9999999333541432, + "y": 1.000000198606502 + }, + { + "x": 0.007325909144767162, + "y": 8.150171737497658e-8 + }, + { + "x": 1.5000000358727652, + "y": -10.385504555878239 + } + ], + "gradientStops": [ + { + "color": { + "r": 0.31956079602241516, + "g": 0.7074577212333679, + "b": 0.2564148008823395, + "a": 1 + }, + "position": 0.32596686482429504 + }, + { + "color": { + "r": 0.3817959129810333, + "g": 0.7685589790344238, + "b": 0.31883448362350464, + "a": 1 + }, + "position": 1 + } + ] + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "effects": [], + "cornerRadius": 4, + "rectangleCornerRadii": [ + 4, + 4, + 4, + 4 + ] + }, + { + "id": "I64:5;2:10;2:4", + "name": "BUTTON", + "type": "TEXT", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -261.5079345703125, + "y": -125.55000305175781, + "width": 58, + "height": 18 + }, + "constraints": { + "vertical": "SCALE", + "horizontal": "SCALE" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "OUTSIDE", + "effects": [], + "characters": "BUTTON", + "style": { + "fontFamily": "Roboto", + "fontPostScriptName": null, + "fontWeight": 400, + "textAutoResize": "WIDTH_AND_HEIGHT", + "fontSize": 15, + "textAlignHorizontal": "CENTER", + "textAlignVertical": "CENTER", + "letterSpacing": 0, + "lineHeightPx": 17.578125, + "lineHeightPercent": 100, + "lineHeightUnit": "INTRINSIC_%" + }, + "layoutVersion": 0, + "characterStyleOverrides": [], + "styleOverrideTable": {} + } + ], + "absoluteBoundingBox": { + "x": -294, + "y": -136, + "width": 124, + "height": 38 + }, + "preserveRatio": true, + "constraints": { + "vertical": "SCALE", + "horizontal": "SCALE" + }, + "clipsContent": false, + "background": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "fills": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "backgroundColor": { + "r": 0, + "g": 0, + "b": 0, + "a": 0 + }, + "effects": [ + { + "type": "DROP_SHADOW", + "visible": true, + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.25 + }, + "blendMode": "NORMAL", + "offset": { + "x": 0, + "y": 1 + }, + "radius": 1 + } + ], + "componentId": "2:5" + } + ], + "absoluteBoundingBox": { + "x": -295, + "y": -137, + "width": 126, + "height": 40 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "clipsContent": false, + "background": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "fills": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "backgroundColor": { + "r": 0, + "g": 0, + "b": 0, + "a": 0 + }, + "effects": [], + "componentId": "2:13" + }, + { + "id": "64:9", + "name": "Button__Disabled", + "type": "INSTANCE", + "blendMode": "PASS_THROUGH", + "children": [ + { + "id": "I64:9;2:6", + "name": "Button", + "type": "INSTANCE", + "blendMode": "PASS_THROUGH", + "children": [ + { + "id": "I64:9;2:6;2:3", + "name": "Rectangle", + "type": "RECTANGLE", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -91, + "y": -273, + "width": 126, + "height": 40 + }, + "constraints": { + "vertical": "SCALE", + "horizontal": "SCALE" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "GRADIENT_LINEAR", + "gradientHandlePositions": [ + { + "x": 0.9999999333541432, + "y": 1.000000198606502 + }, + { + "x": 0.007325909144767162, + "y": 8.150171737497658e-8 + }, + { + "x": 1.5000000358727652, + "y": -10.385504555878239 + } + ], + "gradientStops": [ + { + "color": { + "r": 0.6527005434036255, + "g": 0.7074577212333679, + "b": 0.6437865495681763, + "a": 1 + }, + "position": 0.32596686482429504 + }, + { + "color": { + "r": 0.7421205639839172, + "g": 0.7685589790344238, + "b": 0.7378166317939758, + "a": 1 + }, + "position": 1 + } + ] + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "effects": [], + "cornerRadius": 4, + "rectangleCornerRadii": [ + 4, + 4, + 4, + 4 + ] + }, + { + "id": "I64:9;2:6;2:4", + "name": "BUTTON", + "type": "TEXT", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -59, + "y": -262, + "width": 62, + "height": 19 + }, + "constraints": { + "vertical": "SCALE", + "horizontal": "SCALE" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 0.8777292370796204, + "g": 0.8777292370796204, + "b": 0.8777292370796204, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "OUTSIDE", + "effects": [], + "characters": "BUTTON", + "style": { + "fontFamily": "Roboto", + "fontPostScriptName": null, + "fontWeight": 400, + "textAutoResize": "WIDTH_AND_HEIGHT", + "fontSize": 16, + "textAlignHorizontal": "CENTER", + "textAlignVertical": "CENTER", + "letterSpacing": 0, + "lineHeightPx": 18.75, + "lineHeightPercent": 100, + "lineHeightUnit": "INTRINSIC_%" + }, + "layoutVersion": 0, + "characterStyleOverrides": [], + "styleOverrideTable": {} + } + ], + "absoluteBoundingBox": { + "x": -91, + "y": -273, + "width": 126, + "height": 40 + }, + "constraints": { + "vertical": "SCALE", + "horizontal": "SCALE" + }, + "clipsContent": false, + "background": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "fills": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "backgroundColor": { + "r": 0, + "g": 0, + "b": 0, + "a": 0 + }, + "effects": [ + { + "type": "DROP_SHADOW", + "visible": true, + "color": { + "r": 0, + "g": 0, + "b": 0, + "a": 0.15000000596046448 + }, + "blendMode": "NORMAL", + "offset": { + "x": 0, + "y": 1 + }, + "radius": 2 + } + ], + "componentId": "2:5" + } + ], + "absoluteBoundingBox": { + "x": -91, + "y": -273, + "width": 126, + "height": 40 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "clipsContent": false, + "background": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "fills": [ + { + "blendMode": "NORMAL", + "visible": false, + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "backgroundColor": { + "r": 0, + "g": 0, + "b": 0, + "a": 0 + }, + "effects": [], + "componentId": "2:9" + }, + { + "id": "64:13", + "name": "Normal button", + "type": "TEXT", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -295, + "y": -329, + "width": 125, + "height": 15 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 0.20000000298023224, + "g": 0.20000000298023224, + "b": 0.20000000298023224, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "OUTSIDE", + "effects": [], + "characters": "Normal button", + "style": { + "fontFamily": "Nunito Sans", + "fontPostScriptName": "NunitoSans-ExtraBold", + "fontWeight": 800, + "textCase": "UPPER", + "fontSize": 12, + "textAlignHorizontal": "LEFT", + "textAlignVertical": "CENTER", + "letterSpacing": 0, + "lineHeightPx": 14.0625, + "lineHeightPercent": 100, + "lineHeightUnit": "INTRINSIC_%" + }, + "layoutVersion": 0, + "characterStyleOverrides": [], + "styleOverrideTable": {} + }, + { + "id": "64:14", + "name": "A button. Nothing special.", + "type": "TEXT", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -295, + "y": -308, + "width": 125, + "height": 30 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 0.20000000298023224, + "g": 0.20000000298023224, + "b": 0.20000000298023224, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "OUTSIDE", + "effects": [], + "characters": "A button. Nothing special.", + "style": { + "fontFamily": "Nunito Sans", + "fontPostScriptName": "NunitoSans-Regular", + "fontWeight": 400, + "fontSize": 10, + "textAlignHorizontal": "LEFT", + "textAlignVertical": "TOP", + "letterSpacing": 0, + "lineHeightPx": 11.71875, + "lineHeightPercent": 100, + "lineHeightUnit": "INTRINSIC_%" + }, + "layoutVersion": 0, + "characterStyleOverrides": [], + "styleOverrideTable": {} + }, + { + "id": "64:17", + "name": "Active button", + "type": "TEXT", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -295, + "y": -193, + "width": 125, + "height": 15 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 0.20000000298023224, + "g": 0.20000000298023224, + "b": 0.20000000298023224, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "OUTSIDE", + "effects": [], + "characters": "Active button", + "style": { + "fontFamily": "Nunito Sans", + "fontPostScriptName": "NunitoSans-ExtraBold", + "fontWeight": 800, + "textCase": "UPPER", + "fontSize": 12, + "textAlignHorizontal": "LEFT", + "textAlignVertical": "CENTER", + "letterSpacing": 0, + "lineHeightPx": 14.0625, + "lineHeightPercent": 100, + "lineHeightUnit": "INTRINSIC_%" + }, + "layoutVersion": 0, + "characterStyleOverrides": [], + "styleOverrideTable": {} + }, + { + "id": "64:18", + "name": "Pressed button.", + "type": "TEXT", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -295, + "y": -172, + "width": 125, + "height": 30 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 0.20000000298023224, + "g": 0.20000000298023224, + "b": 0.20000000298023224, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "OUTSIDE", + "effects": [], + "characters": "Pressed button.", + "style": { + "fontFamily": "Nunito Sans", + "fontPostScriptName": "NunitoSans-Regular", + "fontWeight": 400, + "fontSize": 10, + "textAlignHorizontal": "LEFT", + "textAlignVertical": "TOP", + "letterSpacing": 0, + "lineHeightPx": 11.71875, + "lineHeightPercent": 100, + "lineHeightUnit": "INTRINSIC_%" + }, + "layoutVersion": 0, + "characterStyleOverrides": [], + "styleOverrideTable": {} + }, + { + "id": "64:15", + "name": "Disabled button", + "type": "TEXT", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -91, + "y": -329, + "width": 125, + "height": 15 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 0.20000000298023224, + "g": 0.20000000298023224, + "b": 0.20000000298023224, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "OUTSIDE", + "effects": [], + "characters": "Disabled button", + "style": { + "fontFamily": "Nunito Sans", + "fontPostScriptName": "NunitoSans-ExtraBold", + "fontWeight": 800, + "textCase": "UPPER", + "fontSize": 12, + "textAlignHorizontal": "LEFT", + "textAlignVertical": "CENTER", + "letterSpacing": 0, + "lineHeightPx": 14.0625, + "lineHeightPercent": 100, + "lineHeightUnit": "INTRINSIC_%" + }, + "layoutVersion": 0, + "characterStyleOverrides": [], + "styleOverrideTable": {} + }, + { + "id": "64:16", + "name": "Inactive button. No hover effects. Not clickable.", + "type": "TEXT", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": -91, + "y": -308, + "width": 125, + "height": 30 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 0.20000000298023224, + "g": 0.20000000298023224, + "b": 0.20000000298023224, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "OUTSIDE", + "effects": [], + "characters": "Inactive button. No hover effects. Not clickable.", + "style": { + "fontFamily": "Nunito Sans", + "fontPostScriptName": "NunitoSans-Regular", + "fontWeight": 400, + "fontSize": 10, + "textAlignHorizontal": "LEFT", + "textAlignVertical": "TOP", + "letterSpacing": 0, + "lineHeightPx": 11.71875, + "lineHeightPercent": 100, + "lineHeightUnit": "INTRINSIC_%" + }, + "layoutVersion": 0, + "characterStyleOverrides": [], + "styleOverrideTable": {} + } + ], + "absoluteBoundingBox": { + "x": -358, + "y": -348, + "width": 456, + "height": 270 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "clipsContent": true, + "background": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "backgroundColor": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + }, + "exportSettings": [ + { + "suffix": "", + "format": "PNG", + "constraint": { + "type": "SCALE", + "value": 1 + } + } + ], + "effects": [] + }, + { + "id": "93:14", + "name": "Page2", + "type": "FRAME", + "blendMode": "PASS_THROUGH", + "children": [ + { + "id": "93:18", + "name": "Page 2", + "type": "TEXT", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": 431, + "y": -224, + "width": 125, + "height": 15 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 0.4000000059604645, + "g": 0.4000000059604645, + "b": 0.4000000059604645, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "OUTSIDE", + "effects": [], + "characters": "Page 2", + "style": { + "fontFamily": "Nunito Sans", + "fontPostScriptName": "NunitoSans-ExtraBold", + "fontWeight": 800, + "textCase": "UPPER", + "fontSize": 12, + "textAlignHorizontal": "RIGHT", + "textAlignVertical": "CENTER", + "letterSpacing": 0, + "lineHeightPx": 14.0625, + "lineHeightPercent": 100, + "lineHeightUnit": "INTRINSIC_%" + }, + "layoutVersion": 0, + "characterStyleOverrides": [], + "styleOverrideTable": {} + } + ], + "absoluteBoundingBox": { + "x": 138, + "y": -348, + "width": 456, + "height": 270 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "clipsContent": true, + "background": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "backgroundColor": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + }, + "effects": [] + }, + { + "id": "93:32", + "name": "Page3", + "type": "FRAME", + "blendMode": "PASS_THROUGH", + "children": [ + { + "id": "93:33", + "name": "Page 3", + "type": "TEXT", + "blendMode": "PASS_THROUGH", + "absoluteBoundingBox": { + "x": 927, + "y": -224, + "width": 125, + "height": 15 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 0.4000000059604645, + "g": 0.4000000059604645, + "b": 0.4000000059604645, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "OUTSIDE", + "effects": [], + "characters": "Page 3", + "style": { + "fontFamily": "Nunito Sans", + "fontPostScriptName": "NunitoSans-ExtraBold", + "fontWeight": 800, + "textCase": "UPPER", + "fontSize": 12, + "textAlignHorizontal": "RIGHT", + "textAlignVertical": "CENTER", + "letterSpacing": 0, + "lineHeightPx": 14.0625, + "lineHeightPercent": 100, + "lineHeightUnit": "INTRINSIC_%" + }, + "layoutVersion": 0, + "characterStyleOverrides": [], + "styleOverrideTable": {} + } + ], + "absoluteBoundingBox": { + "x": 634, + "y": -348, + "width": 456, + "height": 270 + }, + "constraints": { + "vertical": "TOP", + "horizontal": "LEFT" + }, + "clipsContent": true, + "background": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "fills": [ + { + "blendMode": "NORMAL", + "type": "SOLID", + "color": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + } + } + ], + "strokes": [], + "strokeWeight": 1, + "strokeAlign": "INSIDE", + "backgroundColor": { + "r": 1, + "g": 1, + "b": 1, + "a": 1 + }, + "effects": [] + } + ], + "backgroundColor": { + "r": 0.8980392217636108, + "g": 0.8980392217636108, + "b": 0.8980392217636108, + "a": 1 + }, + "prototypeStartNodeID": "64:1", + "prototypeDevice": { + "type": "NONE", + "rotation": "NONE" + } + } + ] + }, + "components": { + "2:5": { + "key": "cb3025cfa73c3757bc3e1bab6e34f9cbf49eb14a", + "name": "Button", + "description": "" + }, + "2:13": { + "key": "1526a8ddee35680a3ca5002e0c00605c0e7095cd", + "name": "Button__Active", + "description": "" + }, + "2:9": { + "key": "01a68bd6ca97410342a7b361aaed70e3f7784655", + "name": "Button__Disabled", + "description": "" + } + }, + "schemaVersion": 0, + "styles": {}, + "name": "storybook-addon-designs-sample", + "lastModified": "2020-10-08T07:37:10.103851Z", + "thumbnailUrl": "https://s3-alpha-sig.figma.com/thumbnails/40585359-6295-4d7d-93d1-9536b4890845?Expires=1604880000&Signature=e90P3U~o-qwGxqB~UQh1mbYpWu9i-K8kai~1rQLPquqDRVWLgkpYvv1iehcAuPothV5UfU5xWJUcvWsmM6kcp6zFPmhddSNBohrtoJcAC-nhJlaF7hIWCjvwCN4Pch7Ft2RB2rSIHCu0zwRcCF45Rfwz54D75ENP-Z~hIMpVgXKVljzetVK7QSP7e8hAr2rLvcgBEb~gewBeOlcypkVlWnbvq~UM6I0tSAbUcownYOO46WZRfWjuIoQ~m1TNSp5Xf~tO7Uwu7b8vNRzWpoCaMtIxQWbn0c0Pr8o4BBRX1glqHggEhdl8OEe8LVIpZ6BRx69zDVWilmHzsICbrgQboQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA", + "version": "504642761", + "role": "owner" + }
packages/components/src/index.ts
- @@ -1,7 +1,13 @@
  - import { FigspecViewer } from "./FigspecViewer"; + import { FigspecFrameViewer } from "./FigspecViewer/FigspecFrameViewer"; + import { FigspecFileViewer } from "./FigspecViewer/FigspecFileViewer"; - if (!customElements.get("figspec-viewer")) { - customElements.define("figspec-viewer", FigspecViewer); + if (!customElements.get("figspec-file-viewer")) { + customElements.define("figspec-file-viewer", FigspecFileViewer); } - export { FigspecViewer } from "./FigspecViewer"; + if (!customElements.get("figspec-frame-viewer")) { + customElements.define("figspec-frame-viewer", FigspecFrameViewer); + } + + export { FigspecFrameViewer }; + export { FigspecFileViewer };

Authored by: Shota Fuji
Authored at: 2020-11-07 17:13:15 +0000
Committed by: Shota Fuji
Committed at: 2020-11-07 17:22:54 +0000
Signature: View
-----BEGIN PGP SIGNATURE----- iQIzBAABCgAdFiEEYof/sgNLAuLXA3fOnEu5BpUyr2cFAl+m1+8ACgkQnEu5BpUy r2fxfQ//fH10lD8Pz/m/lhf4b+I2+P6/qaSNS3Sl3bxy9mgq6chLf3dDKdLXpqnP uX3XIrM36kL+I2n8fmhJHbM5JwiXCVEP7Qe13uQoFs1nqVOViXz1JQiALkBw/L+p hHc3zs4Pj5SmRtVa8Dysi/Y9MQmpVlJJVjVGqfsJrUIDhyGyQrHWB8PfaEehDda4 EPGLrl5F2Y7gkJoH2XqbGoLvyDyefggn6ncO1P934rmaeng/nPxJ0GSLH0NlTC/D e4C1TpxZ1ZaMYiPwZLsQCIfbPIQpDXpthI8css3X55xZP7NkDBh2nwpjtBasvaGJ CtLv7F1UpZcP0SL8pzqpCv+SONj4gJ4OxbgoXGQefD9Qqafv7b6RlxgUP3fJA2yH AO4VVc/hcDlH5wD/PnbUrhvZyFW/aib8fukibuliOotBnPVbeZtioIqhkWmnYuS7 kuU5Z008b4r+g476plFx2xaurtP6T4GP3+gQXyORxtDqTFVxL9s0CZC7oYp54rqx nGm5wUbE8ehZ3xl8V3tk/mFTqyQdJYMo1pO/aczRnYzlwFlns6MZJH5VKtYdtnNn hyODmAGpKAXNQWvHs6NRksQ9cN4xZo4H/ezuVq235riH6Zgsb+W8KGraAhTJfNit Pmfe9B8+vfWf6wzG5NDQax7vFzDT+Rwgn1qiqSI20q+ITryAZLU= =jML0 -----END PGP SIGNATURE-----
Object name: 4439e63f7750f7c7d52c2ee888d72a1616bb5b70
Parent: 1f79281a
Tab width