diff --git a/package-lock.json b/package-lock.json index fe75398..73195c3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2357,9 +2357,9 @@ "dev": true }, "@zeplin/extension-model": { - "version": "2.6.0", - "resolved": "https://registry.npmjs.org/@zeplin/extension-model/-/extension-model-2.6.0.tgz", - "integrity": "sha512-pSpbr1qR/ROvMxLyMyTlmR6oFnSF201OtPQpZqsk9z/QGdC07CWJriaFyLFisP+dVr+MKAhMn9mYuTsb+CvGeg==" + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/@zeplin/extension-model/-/extension-model-2.9.0.tgz", + "integrity": "sha512-tHg9+WHClLI9bXalR6XzUPEW7uu2zpm56+ev/49MKQbxH/Uo3DKvr6j+Cw2iczFpIzvJ63wb9k14nzX3Jz42nQ==" }, "abab": { "version": "2.0.5", diff --git a/package.json b/package.json index 87ca6cf..be0c7e7 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "@babel/core": "^7.8.4", "@babel/preset-env": "^7.8.4", "@types/jest": "^25.1.2", - "@zeplin/extension-model": "^2.6.0", + "@zeplin/extension-model": "^2.9.0", "adm-zip": "^0.4.11", "ajv": "^6.12.0", "babel-jest": "^25.1.0", diff --git a/src/commands/exec.js b/src/commands/exec.js index d4fdbb4..54dbc5f 100644 --- a/src/commands/exec.js +++ b/src/commands/exec.js @@ -7,6 +7,9 @@ const { bundleName } = require("../config/constants"); const { resolveBuildPath, resolveExtensionPath } = require("../utils/paths"); const { Context, + Screen, + Component, + ComponentVariant, Version } = require("@zeplin/extension-model"); @@ -61,7 +64,42 @@ function callExtensionFunction(extension, fnName, ...args) { }).catch(error => chalk.red(error.stack)); } -function executeLayer(extension, context, version) { +function executeScreen(extension, context) { + const version = new Version(sampleData.screenVersion); + const screens = sampleData.screens.map(s => new Screen(s)); + + return Promise.all( + screens.map(screen => callExtensionFunction(extension, "screen", context, version, screen)) + ).then(results => { + console.log(chalk.underline.bold("\nScreens:")); + + results.forEach((codeData, index) => { + printCodeData(codeData, `${screens[index].name}:`); + }); + }); +} + +function executeComponent(extension, context) { + const singleComponents = sampleData.components.map(c => new Component(c)); + const variantComponents = sampleData.componentVariants.map( + variantData => new ComponentVariant(variantData) + ).reduce((cs, variant) => cs.concat(variant.components), []); + const components = singleComponents.concat(variantComponents); + + return Promise.all( + components.map(component => callExtensionFunction(extension, "component", context, component.latestVersion, component)) + ).then(results => { + console.log(chalk.underline.bold("\nComponents:")); + + results.forEach((codeData, index) => { + printCodeData(codeData, `${components[index].name}:`); + }); + }); +} + +function executeLayer(extension, context) { + const version = new Version(sampleData.screenVersion); + return Promise.all( version .layers @@ -103,17 +141,19 @@ const EXTENSION_FUNCTIONS = { layer: executeLayer, colors: executeColors, textStyles: executeTextStyles, - spacing: executeSpacing + spacing: executeSpacing, + screen: executeScreen, + component: executeComponent }; -function executeFunction(extension, fnName, context, version) { +function executeFunction(extension, fnName, context) { const fn = EXTENSION_FUNCTIONS[fnName]; if (!fn) { console.log(chalk.yellow(`Function “${fnName}” not defined.`)); return; } - fn(extension, context, version); + fn(extension, context); } function executeExtension(extension, fnName, defaultOptions = {}) { @@ -122,17 +162,18 @@ function executeExtension(extension, fnName, defaultOptions = {}) { options, project: sampleData.project }); - const version = new Version(sampleData.version); if (fnName) { - executeFunction(extension, fnName, context, version); + executeFunction(extension, fnName, context); return; } - executeFunction(extension, "layer", context, version); - executeFunction(extension, "colors", context, version); - executeFunction(extension, "textStyles", context, version); - executeFunction(extension, "spacing", context, version); + executeFunction(extension, "colors", context); + executeFunction(extension, "textStyles", context); + executeFunction(extension, "spacing", context); + executeFunction(extension, "component", context); + executeFunction(extension, "screen", context); + executeFunction(extension, "layer", context); } module.exports = function (webpackConfig, fnName, defaultOptions, shouldBuild) { diff --git a/src/sample-data/componentVariants.json b/src/sample-data/componentVariants.json new file mode 100644 index 0000000..68f5396 --- /dev/null +++ b/src/sample-data/componentVariants.json @@ -0,0 +1,2495 @@ +[ + { + "name": "Button", + "propertyDescriptors": [ + { + "id": "5fdd6c74f4da870b63352c04", + "name": "Type", + "values": [ + "error", + "default" + ] + }, + { + "id": "5fdd6c74f4da870b63352c05", + "name": "Ghost", + "values": [ + "yes", + "no" + ] + }, + { + "id": "5fdd6c74f4da870b63352c06", + "name": "State", + "values": [ + "disabled", + "default", + "hover" + ] + } + ], + "components": [ + { + "id": "5fdd6c7513adb90b6a199307", + "name": "Button / error / yes / default", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "figma", + "height": 34, + "layers": [ + { + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 56, + "height": 34 + }, + "rotation": 0, + "layers": [ + { + "shadows": [], + "name": "Button Text", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "140:8", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 12, + "letterSpacing": 0, + "fontFace": "Roboto-Regular", + "textAlign": "left", + "color": { + "r": 235, + "b": 21, + "g": 21, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 10, + "x": 10, + "width": 36, + "height": 14 + }, + "_id": "5fdd6c7513adb90b6a19930b", + "absoluteRect": { + "x": 10, + "y": 10, + "width": 36, + "height": 14 + } + } + ], + "blendMode": "normal", + "interactionLevel": "bottom", + "type": "group", + "opacity": 1, + "sourceId": "140:7", + "fills": [], + "exportable": false, + "borders": [ + { + "blendMode": "normal", + "fillType": "color", + "position": "inside", + "thickness": 1, + "opacity": 1, + "color": { + "r": 235, + "b": 21, + "g": 21, + "a": 1 + } + } + ], + "borderRadius": 5, + "shadows": [], + "_id": "5fdd6c7513adb90b6a19930a", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 56, + "height": 34 + } + } + ], + "componentNames": [], + "width": 56, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/56/34" + } + }, + "properties": [ + { + "id": "5fdd6c74f4da870b63352c04", + "value": "error" + }, + { + "id": "5fdd6c74f4da870b63352c05", + "value": "yes" + }, + { + "id": "5fdd6c74f4da870b63352c06", + "value": "default" + } + ] + }, + { + "id": "5fdd6c754cb3f47caf4b9ac3", + "name": "Button / default / no / hover", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "figma", + "height": 34, + "layers": [ + { + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 56, + "height": 34 + }, + "rotation": 0, + "layers": [ + { + "shadows": [], + "name": "Button Text", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "140:32", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 12, + "letterSpacing": 0, + "fontFace": "Roboto-Regular", + "textAlign": "left", + "color": { + "r": 255, + "b": 255, + "g": 255, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 10, + "x": 10, + "width": 36, + "height": 14 + }, + "_id": "5fdd6c754cb3f47caf4b9ac7", + "absoluteRect": { + "x": 10, + "y": 10, + "width": 36, + "height": 14 + } + } + ], + "blendMode": "normal", + "interactionLevel": "bottom", + "type": "group", + "opacity": 1, + "sourceId": "140:31", + "fills": [ + { + "color": { + "r": 165, + "b": 165, + "g": 165, + "a": 1 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [ + { + "blendMode": "normal", + "fillType": "color", + "position": "inside", + "thickness": 4, + "opacity": 1, + "color": { + "r": 48, + "b": 255, + "g": 168, + "a": 1 + } + } + ], + "borderRadius": 5, + "shadows": [], + "_id": "5fdd6c754cb3f47caf4b9ac6", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 56, + "height": 34 + } + } + ], + "componentNames": [], + "width": 56, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/56/34" + } + }, + "properties": [ + { + "id": "5fdd6c74f4da870b63352c04", + "value": "default" + }, + { + "id": "5fdd6c74f4da870b63352c05", + "value": "no" + }, + { + "id": "5fdd6c74f4da870b63352c06", + "value": "hover" + } + ] + }, + { + "id": "5fdd6c754cb3f47caf4b9acc", + "name": "Button / default / no / disabled", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "figma", + "height": 34, + "layers": [ + { + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 56, + "height": 34 + }, + "rotation": 0, + "layers": [ + { + "shadows": [], + "name": "Button Text", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "140:35", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 12, + "letterSpacing": 0, + "fontFace": "Roboto-Regular", + "textAlign": "left", + "color": { + "r": 255, + "b": 255, + "g": 255, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 10, + "x": 10, + "width": 36, + "height": 14 + }, + "_id": "5fdd6c754cb3f47caf4b9ad0", + "absoluteRect": { + "x": 10, + "y": 10, + "width": 36, + "height": 14 + } + } + ], + "blendMode": "normal", + "interactionLevel": "bottom", + "type": "group", + "opacity": 1, + "sourceId": "140:34", + "fills": [ + { + "color": { + "r": 165, + "b": 165, + "g": 165, + "a": 0.5 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "borderRadius": 5, + "shadows": [], + "_id": "5fdd6c754cb3f47caf4b9acf", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 56, + "height": 34 + } + } + ], + "componentNames": [], + "width": 56, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/56/34" + } + }, + "properties": [ + { + "id": "5fdd6c74f4da870b63352c04", + "value": "default" + }, + { + "id": "5fdd6c74f4da870b63352c05", + "value": "no" + }, + { + "id": "5fdd6c74f4da870b63352c06", + "value": "disabled" + } + ] + }, + { + "id": "5fdd6c7513adb90b6a19930f", + "name": "Button / default / yes / disabled", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "figma", + "height": 34, + "layers": [ + { + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 56, + "height": 34 + }, + "rotation": 0, + "layers": [ + { + "shadows": [], + "name": "Button Text", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "140:17", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 12, + "letterSpacing": 0, + "fontFace": "Roboto-Regular", + "textAlign": "left", + "color": { + "r": 165, + "b": 165, + "g": 165, + "a": 0.5 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 10, + "x": 10, + "width": 36, + "height": 14 + }, + "_id": "5fdd6c7513adb90b6a199313", + "absoluteRect": { + "x": 10, + "y": 10, + "width": 36, + "height": 14 + } + } + ], + "blendMode": "normal", + "interactionLevel": "bottom", + "type": "group", + "opacity": 1, + "sourceId": "140:16", + "fills": [], + "exportable": false, + "borders": [ + { + "blendMode": "normal", + "fillType": "color", + "position": "inside", + "thickness": 1, + "opacity": 1, + "color": { + "r": 165, + "b": 165, + "g": 165, + "a": 0.5 + } + } + ], + "borderRadius": 5, + "shadows": [], + "_id": "5fdd6c7513adb90b6a199312", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 56, + "height": 34 + } + } + ], + "componentNames": [], + "width": 56, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/56/34" + } + }, + "properties": [ + { + "id": "5fdd6c74f4da870b63352c04", + "value": "default" + }, + { + "id": "5fdd6c74f4da870b63352c05", + "value": "yes" + }, + { + "id": "5fdd6c74f4da870b63352c06", + "value": "disabled" + } + ] + }, + { + "id": "5fdd6c756340307cb62bae8b", + "name": "Button / error / yes / hover", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "figma", + "height": 34, + "layers": [ + { + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 56, + "height": 34 + }, + "rotation": 0, + "layers": [ + { + "shadows": [], + "name": "Button Text", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "140:14", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 12, + "letterSpacing": 0, + "fontFace": "Roboto-Regular", + "textAlign": "left", + "color": { + "r": 235, + "b": 21, + "g": 21, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 10, + "x": 10, + "width": 36, + "height": 14 + }, + "_id": "5fdd6c756340307cb62bae8f", + "absoluteRect": { + "x": 10, + "y": 10, + "width": 36, + "height": 14 + } + } + ], + "blendMode": "normal", + "interactionLevel": "bottom", + "type": "group", + "opacity": 1, + "sourceId": "140:13", + "fills": [], + "exportable": false, + "borders": [ + { + "blendMode": "normal", + "fillType": "color", + "position": "inside", + "thickness": 4, + "opacity": 1, + "color": { + "r": 48, + "b": 255, + "g": 168, + "a": 1 + } + } + ], + "borderRadius": 5, + "shadows": [], + "_id": "5fdd6c756340307cb62bae8e", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 56, + "height": 34 + } + } + ], + "componentNames": [], + "width": 56, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/56/34" + } + }, + "properties": [ + { + "id": "5fdd6c74f4da870b63352c04", + "value": "error" + }, + { + "id": "5fdd6c74f4da870b63352c05", + "value": "yes" + }, + { + "id": "5fdd6c74f4da870b63352c06", + "value": "hover" + } + ] + }, + { + "id": "5fdd6c756340307cb62bae90", + "name": "Button / error / no / disabled", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "figma", + "height": 34, + "layers": [ + { + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 56, + "height": 34 + }, + "rotation": 0, + "layers": [ + { + "shadows": [], + "name": "Button Text", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "140:26", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 12, + "letterSpacing": 0, + "fontFace": "Roboto-Regular", + "textAlign": "left", + "color": { + "r": 255, + "b": 255, + "g": 255, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 10, + "x": 10, + "width": 36, + "height": 14 + }, + "_id": "5fdd6c756340307cb62bae94", + "absoluteRect": { + "x": 10, + "y": 10, + "width": 36, + "height": 14 + } + } + ], + "blendMode": "normal", + "interactionLevel": "bottom", + "type": "group", + "opacity": 1, + "sourceId": "140:25", + "fills": [ + { + "color": { + "r": 235, + "b": 21, + "g": 21, + "a": 0.5 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "borderRadius": 5, + "shadows": [], + "_id": "5fdd6c756340307cb62bae93", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 56, + "height": 34 + } + } + ], + "componentNames": [], + "width": 56, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/56/34" + } + }, + "properties": [ + { + "id": "5fdd6c74f4da870b63352c04", + "value": "error" + }, + { + "id": "5fdd6c74f4da870b63352c05", + "value": "no" + }, + { + "id": "5fdd6c74f4da870b63352c06", + "value": "disabled" + } + ] + }, + { + "id": "5fdd6c7513adb90b6a199314", + "name": "Button / error / no / default", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "figma", + "height": 34, + "layers": [ + { + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 56, + "height": 34 + }, + "rotation": 0, + "layers": [ + { + "shadows": [], + "name": "Button Text", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "140:29", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 12, + "letterSpacing": 0, + "fontFace": "Roboto-Regular", + "textAlign": "left", + "color": { + "r": 255, + "b": 255, + "g": 255, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 10, + "x": 10, + "width": 36, + "height": 14 + }, + "_id": "5fdd6c7513adb90b6a199318", + "absoluteRect": { + "x": 10, + "y": 10, + "width": 36, + "height": 14 + } + } + ], + "blendMode": "normal", + "interactionLevel": "bottom", + "type": "group", + "opacity": 1, + "sourceId": "140:28", + "fills": [ + { + "color": { + "r": 235, + "b": 21, + "g": 21, + "a": 1 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "borderRadius": 5, + "shadows": [], + "_id": "5fdd6c7513adb90b6a199317", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 56, + "height": 34 + } + } + ], + "componentNames": [], + "width": 56, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/56/34" + } + }, + "properties": [ + { + "id": "5fdd6c74f4da870b63352c04", + "value": "error" + }, + { + "id": "5fdd6c74f4da870b63352c05", + "value": "no" + }, + { + "id": "5fdd6c74f4da870b63352c06", + "value": "default" + } + ] + }, + { + "id": "5fdd6c75f4da870b63352c15", + "name": "Button / default / no / default", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "figma", + "height": 34, + "layers": [ + { + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 56, + "height": 34 + }, + "rotation": 0, + "layers": [ + { + "shadows": [], + "name": "Button Text", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "140:38", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 12, + "letterSpacing": 0, + "fontFace": "Roboto-Regular", + "textAlign": "left", + "color": { + "r": 255, + "b": 255, + "g": 255, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 10, + "x": 10, + "width": 36, + "height": 14 + }, + "_id": "5fdd6c75f4da870b63352c19", + "absoluteRect": { + "x": 10, + "y": 10, + "width": 36, + "height": 14 + } + } + ], + "blendMode": "normal", + "interactionLevel": "bottom", + "type": "group", + "opacity": 1, + "sourceId": "140:37", + "fills": [ + { + "color": { + "r": 165, + "b": 165, + "g": 165, + "a": 1 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "borderRadius": 5, + "shadows": [], + "_id": "5fdd6c75f4da870b63352c18", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 56, + "height": 34 + } + } + ], + "componentNames": [], + "width": 56, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/56/34" + } + }, + "properties": [ + { + "id": "5fdd6c74f4da870b63352c04", + "value": "default" + }, + { + "id": "5fdd6c74f4da870b63352c05", + "value": "no" + }, + { + "id": "5fdd6c74f4da870b63352c06", + "value": "default" + } + ] + }, + { + "id": "5fdd6c75f4da870b63352c10", + "name": "Button / default / yes / default", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "figma", + "height": 34, + "layers": [ + { + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 56, + "height": 34 + }, + "rotation": 0, + "layers": [ + { + "shadows": [], + "name": "Button Text", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "140:20", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 12, + "letterSpacing": 0, + "fontFace": "Roboto-Regular", + "textAlign": "left", + "color": { + "r": 165, + "b": 165, + "g": 165, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 10, + "x": 10, + "width": 36, + "height": 14 + }, + "_id": "5fdd6c75f4da870b63352c14", + "absoluteRect": { + "x": 10, + "y": 10, + "width": 36, + "height": 14 + } + } + ], + "blendMode": "normal", + "interactionLevel": "bottom", + "type": "group", + "opacity": 1, + "sourceId": "140:19", + "fills": [], + "exportable": false, + "borders": [ + { + "blendMode": "normal", + "fillType": "color", + "position": "inside", + "thickness": 1, + "opacity": 1, + "color": { + "r": 165, + "b": 165, + "g": 165, + "a": 1 + } + } + ], + "borderRadius": 5, + "shadows": [], + "_id": "5fdd6c75f4da870b63352c13", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 56, + "height": 34 + } + } + ], + "componentNames": [], + "width": 56, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/56/34" + } + }, + "properties": [ + { + "id": "5fdd6c74f4da870b63352c04", + "value": "default" + }, + { + "id": "5fdd6c74f4da870b63352c05", + "value": "yes" + }, + { + "id": "5fdd6c74f4da870b63352c06", + "value": "default" + } + ] + }, + { + "id": "5fdd6c754cb3f47caf4b9abe", + "name": "Button / default / yes / hover", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "figma", + "height": 34, + "layers": [ + { + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 56, + "height": 34 + }, + "rotation": 0, + "layers": [ + { + "shadows": [], + "name": "Button Text", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "140:11", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 12, + "letterSpacing": 0, + "fontFace": "Roboto-Regular", + "textAlign": "left", + "color": { + "r": 165, + "b": 165, + "g": 165, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 10, + "x": 10, + "width": 36, + "height": 14 + }, + "_id": "5fdd6c754cb3f47caf4b9ac2", + "absoluteRect": { + "x": 10, + "y": 10, + "width": 36, + "height": 14 + } + } + ], + "blendMode": "normal", + "interactionLevel": "bottom", + "type": "group", + "opacity": 1, + "sourceId": "140:10", + "fills": [], + "exportable": false, + "borders": [ + { + "blendMode": "normal", + "fillType": "color", + "position": "inside", + "thickness": 4, + "opacity": 1, + "color": { + "r": 48, + "b": 255, + "g": 168, + "a": 1 + } + } + ], + "borderRadius": 5, + "shadows": [], + "_id": "5fdd6c754cb3f47caf4b9ac1", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 56, + "height": 34 + } + } + ], + "componentNames": [], + "width": 56, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/56/34" + } + }, + "properties": [ + { + "id": "5fdd6c74f4da870b63352c04", + "value": "default" + }, + { + "id": "5fdd6c74f4da870b63352c05", + "value": "yes" + }, + { + "id": "5fdd6c74f4da870b63352c06", + "value": "hover" + } + ] + }, + { + "id": "5fdd6c754cb3f47caf4b9ab9", + "name": "Button / error / no / hover", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "figma", + "height": 34, + "layers": [ + { + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 56, + "height": 34 + }, + "rotation": 0, + "layers": [ + { + "shadows": [], + "name": "Button Text", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "140:23", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 12, + "letterSpacing": 0, + "fontFace": "Roboto-Regular", + "textAlign": "left", + "color": { + "r": 255, + "b": 255, + "g": 255, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 10, + "x": 10, + "width": 36, + "height": 14 + }, + "_id": "5fdd6c754cb3f47caf4b9abd", + "absoluteRect": { + "x": 10, + "y": 10, + "width": 36, + "height": 14 + } + } + ], + "blendMode": "normal", + "interactionLevel": "bottom", + "type": "group", + "opacity": 1, + "sourceId": "140:22", + "fills": [ + { + "color": { + "r": 235, + "b": 21, + "g": 21, + "a": 1 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [ + { + "blendMode": "normal", + "fillType": "color", + "position": "inside", + "thickness": 4, + "opacity": 1, + "color": { + "r": 48, + "b": 255, + "g": 168, + "a": 1 + } + } + ], + "borderRadius": 5, + "shadows": [], + "_id": "5fdd6c754cb3f47caf4b9abc", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 56, + "height": 34 + } + } + ], + "componentNames": [], + "width": 56, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/56/34" + } + }, + "properties": [ + { + "id": "5fdd6c74f4da870b63352c04", + "value": "error" + }, + { + "id": "5fdd6c74f4da870b63352c05", + "value": "no" + }, + { + "id": "5fdd6c74f4da870b63352c06", + "value": "hover" + } + ] + }, + { + "id": "5fdd6c7513adb90b6a199302", + "name": "Button / error / yes / disabled", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "figma", + "height": 34, + "layers": [ + { + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 56, + "height": 34 + }, + "rotation": 0, + "layers": [ + { + "shadows": [], + "name": "Button Text", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "140:5", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 12, + "letterSpacing": 0, + "fontFace": "Roboto-Regular", + "textAlign": "left", + "color": { + "r": 235, + "b": 21, + "g": 21, + "a": 0.5 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 10, + "x": 10, + "width": 36, + "height": 14 + }, + "_id": "5fdd6c7513adb90b6a199306", + "absoluteRect": { + "x": 10, + "y": 10, + "width": 36, + "height": 14 + } + } + ], + "blendMode": "normal", + "interactionLevel": "bottom", + "type": "group", + "opacity": 1, + "sourceId": "140:4", + "fills": [], + "exportable": false, + "borders": [ + { + "blendMode": "normal", + "fillType": "color", + "position": "inside", + "thickness": 1, + "opacity": 1, + "color": { + "r": 235, + "b": 21, + "g": 21, + "a": 0.5 + } + } + ], + "borderRadius": 5, + "shadows": [], + "_id": "5fdd6c7513adb90b6a199305", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 56, + "height": 34 + } + } + ], + "componentNames": [], + "width": 56, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/56/34" + } + }, + "properties": [ + { + "id": "5fdd6c74f4da870b63352c04", + "value": "error" + }, + { + "id": "5fdd6c74f4da870b63352c05", + "value": "yes" + }, + { + "id": "5fdd6c74f4da870b63352c06", + "value": "disabled" + } + ] + } + ] + }, + { + "name": "Button", + "propertyDescriptors": [ + { + "id": "5fd9432d2909e35cb5a9e995", + "name": "Type", + "values": [ + "Secondary", + "Default" + ] + }, + { + "id": "5fd943832909e35cb5a9e997", + "name": "State", + "values": [ + "Default", + "Hover", + "Pressed", + "Disabled" + ] + } + ], + "components": [ + { + "id": "5fd942b92909e35cb5a9e8f7", + "name": "Button / Secondary / Hover", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "sketch", + "height": 28, + "layers": [ + { + "styleSourceId": "E90102D9-71DE-4F1F-85EA-53C94A73F909", + "borderRadius": 2, + "rotation": 0, + "blendMode": "normal", + "shadows": [], + "styleName": "Secondary button/Secondary button Hover", + "type": "shape", + "opacity": 1, + "sourceId": "3A7B6997-3D1E-4BEF-9F1C-1310E795A677", + "fills": [ + { + "color": { + "r": 237, + "b": 237, + "g": 236, + "a": 1 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + }, + { + "color": { + "r": 151, + "b": 151, + "g": 145, + "a": 0.15 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 69, + "height": 28 + }, + "_id": "5fd942b92909e35cb5a9e8fa", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 69, + "height": 28 + } + }, + { + "shadows": [], + "name": "Title", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "A7458FD3-9E7C-4C9E-93D2-CC27D1CAA2B8", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 15, + "fontFace": "Roboto-Regular", + "textAlign": "center", + "color": { + "r": 85, + "b": 86, + "g": 77, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 5, + "x": 12, + "width": 45, + "height": 18 + }, + "_id": "5fd942b92909e35cb5a9e8fb", + "absoluteRect": { + "x": 12, + "y": 5, + "width": 45, + "height": 18 + } + } + ], + "componentNames": [], + "width": 69, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/69/28" + } + }, + "properties": [ + { + "id": "5fd9432d2909e35cb5a9e995", + "value": "Secondary" + }, + { + "id": "5fd943832909e35cb5a9e997", + "value": "Hover" + } + ] + }, + { + "id": "5fd942b92909e35cb5a9e8e8", + "name": "Button / Primary button", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "sketch", + "height": 28, + "layers": [ + { + "styleSourceId": "0F3C2A8D-3244-4185-839E-635D9D6D74BD", + "borderRadius": 2, + "rotation": 0, + "blendMode": "normal", + "shadows": [], + "styleName": "Primary button/Primary button Default", + "type": "shape", + "opacity": 1, + "sourceId": "C1460302-45FB-4FA6-BA89-5946ACF01C05", + "fills": [ + { + "color": { + "r": 65, + "b": 249, + "g": 155, + "a": 1 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 69, + "height": 28 + }, + "_id": "5ff4f229f77862308a36e32b", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 69, + "height": 28 + } + }, + { + "shadows": [], + "name": "Title", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "5E4286B8-70D7-4E84-ADA3-BFED75842248", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 15, + "fontFace": "Roboto-Bold", + "textAlign": "center", + "color": { + "r": 255, + "b": 255, + "g": 255, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 5, + "x": 12, + "width": 45, + "height": 18 + }, + "_id": "5ff4f229f77862308a36e32c", + "absoluteRect": { + "x": 12, + "y": 5, + "width": 45, + "height": 18 + } + } + ], + "componentNames": [], + "width": 69, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/69/28" + } + }, + "properties": [ + { + "id": "5fd9432d2909e35cb5a9e995", + "value": "Default" + }, + { + "id": "5fd943832909e35cb5a9e997", + "value": "Default" + } + ] + }, + { + "id": "5fd942b92909e35cb5a9e907", + "name": "Button / Primary / Hover", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "sketch", + "height": 28, + "layers": [ + { + "styleSourceId": "EC47CAF0-CC43-4174-9495-3311291D2CBE", + "borderRadius": 2, + "rotation": 0, + "blendMode": "normal", + "shadows": [], + "styleName": "Primary button/Primary button Hover", + "type": "shape", + "opacity": 1, + "sourceId": "9F774FAF-227C-4812-B189-9760FB819605", + "fills": [ + { + "color": { + "r": 65, + "b": 249, + "g": 155, + "a": 1 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + }, + { + "color": { + "r": 85, + "b": 86, + "g": 77, + "a": 0.15 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 69, + "height": 28 + }, + "_id": "5fd942b92909e35cb5a9e90a", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 69, + "height": 28 + } + }, + { + "shadows": [], + "name": "Title", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "C5B7F95B-B9F7-4399-86E0-FA39F1380BC7", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 15, + "fontFace": "Roboto-Regular", + "textAlign": "center", + "color": { + "r": 255, + "b": 255, + "g": 255, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 5, + "x": 12, + "width": 45, + "height": 18 + }, + "_id": "5fd942b92909e35cb5a9e90b", + "absoluteRect": { + "x": 12, + "y": 5, + "width": 45, + "height": 18 + } + } + ], + "componentNames": [], + "width": 69, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/69/28" + } + }, + "properties": [ + { + "id": "5fd9432d2909e35cb5a9e995", + "value": "Default" + }, + { + "id": "5fd943832909e35cb5a9e997", + "value": "Hover" + } + ] + }, + { + "id": "5fd942b92909e35cb5a9e90c", + "name": "Button / Primary / Pressed", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "sketch", + "height": 28, + "layers": [ + { + "styleSourceId": "D7F655CE-89DE-49B1-B0D1-117277F0A1F0", + "borderRadius": 2, + "rotation": 0, + "blendMode": "normal", + "shadows": [], + "styleName": "Primary button/Primary button Pressed", + "type": "shape", + "opacity": 1, + "sourceId": "3D5A92C9-F520-4EB1-B564-4F4B0C3825C3", + "fills": [ + { + "color": { + "r": 65, + "b": 249, + "g": 155, + "a": 1 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + }, + { + "color": { + "r": 85, + "b": 86, + "g": 77, + "a": 0.3 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 69, + "height": 28 + }, + "_id": "5fd942b92909e35cb5a9e90f", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 69, + "height": 28 + } + }, + { + "shadows": [], + "name": "Title", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "9E27FEE2-EB7C-4AAE-BD68-1FE02B485B1B", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 15, + "fontFace": "Roboto-Regular", + "textAlign": "center", + "color": { + "r": 255, + "b": 255, + "g": 255, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 5, + "x": 12, + "width": 45, + "height": 18 + }, + "_id": "5fd942b92909e35cb5a9e910", + "absoluteRect": { + "x": 12, + "y": 5, + "width": 45, + "height": 18 + } + } + ], + "componentNames": [], + "width": 69, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/69/28" + } + }, + "properties": [ + { + "id": "5fd9432d2909e35cb5a9e995", + "value": "Default" + }, + { + "id": "5fd943832909e35cb5a9e997", + "value": "Pressed" + } + ] + }, + { + "id": "5fd942b92909e35cb5a9e8ed", + "name": "Button / Primary / Disabled", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "sketch", + "height": 28, + "layers": [ + { + "styleSourceId": "73727270-1C5C-4FD2-B06E-0D13EF0A2682", + "borderRadius": 2, + "rotation": 0, + "blendMode": "normal", + "shadows": [], + "styleName": "Primary button/Primary button Disabled", + "type": "shape", + "opacity": 1, + "sourceId": "0018722C-44E3-4EC4-88C9-403967345745", + "fills": [ + { + "color": { + "r": 65, + "b": 249, + "g": 155, + "a": 0.6 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 69, + "height": 28 + }, + "_id": "5fd942b92909e35cb5a9e8f0", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 69, + "height": 28 + } + }, + { + "shadows": [], + "name": "Title", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 0.6, + "sourceId": "B36449EB-30AD-40F5-856D-018677A7E48D", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 15, + "fontFace": "Roboto-Regular", + "textAlign": "center", + "color": { + "r": 255, + "b": 255, + "g": 255, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 5, + "x": 12, + "width": 45, + "height": 18 + }, + "_id": "5fd942b92909e35cb5a9e8f1", + "absoluteRect": { + "x": 12, + "y": 5, + "width": 45, + "height": 18 + } + } + ], + "componentNames": [], + "width": 69, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/69/28" + } + }, + "properties": [ + { + "id": "5fd9432d2909e35cb5a9e995", + "value": "Default" + }, + { + "id": "5fd943832909e35cb5a9e997", + "value": "Disabled" + } + ] + }, + { + "id": "5fd942b92909e35cb5a9e911", + "name": "Button / Secondary / Pressed", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "sketch", + "height": 28, + "layers": [ + { + "styleSourceId": "9043FFBA-7EE3-4C87-999A-21F7FB748195", + "borderRadius": 2, + "rotation": 0, + "blendMode": "normal", + "shadows": [], + "styleName": "Secondary button/Secondary button Pressed", + "type": "shape", + "opacity": 1, + "sourceId": "4E109532-B169-4895-AC7A-57BFCA36BFD7", + "fills": [ + { + "color": { + "r": 237, + "b": 237, + "g": 236, + "a": 1 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + }, + { + "color": { + "r": 151, + "b": 151, + "g": 145, + "a": 0.3 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 69, + "height": 28 + }, + "_id": "5fd942b92909e35cb5a9e914", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 69, + "height": 28 + } + }, + { + "shadows": [], + "name": "Title", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "79DB950D-0397-497A-8548-534DB9119B23", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 15, + "fontFace": "Roboto-Regular", + "textAlign": "center", + "color": { + "r": 85, + "b": 86, + "g": 77, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 5, + "x": 12, + "width": 45, + "height": 18 + }, + "_id": "5fd942b92909e35cb5a9e915", + "absoluteRect": { + "x": 12, + "y": 5, + "width": 45, + "height": 18 + } + } + ], + "componentNames": [], + "width": 69, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/69/28" + } + }, + "properties": [ + { + "id": "5fd9432d2909e35cb5a9e995", + "value": "Secondary" + }, + { + "id": "5fd943832909e35cb5a9e997", + "value": "Pressed" + } + ] + }, + { + "id": "5fd942b92909e35cb5a9e8fd", + "name": "Button / Secondary / Default", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "sketch", + "height": 28, + "layers": [ + { + "styleSourceId": "9B9568A0-C340-420D-A741-80591C706FB7", + "borderRadius": 2, + "rotation": 0, + "blendMode": "normal", + "shadows": [], + "styleName": "Secondary button/Secondary button Default", + "type": "shape", + "opacity": 1, + "sourceId": "0CADAD41-0131-48E7-9256-1AC681B4115E", + "fills": [ + { + "color": { + "r": 237, + "b": 237, + "g": 236, + "a": 1 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 69, + "height": 28 + }, + "_id": "5fd942b92909e35cb5a9e900", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 69, + "height": 28 + } + }, + { + "shadows": [], + "name": "Title", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "2DC26014-60CA-4F5A-B147-FFD659F74034", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 15, + "fontFace": "Roboto-Regular", + "textAlign": "center", + "color": { + "r": 85, + "b": 86, + "g": 77, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 5, + "x": 12, + "width": 45, + "height": 18 + }, + "_id": "5fd942b92909e35cb5a9e901", + "absoluteRect": { + "x": 12, + "y": 5, + "width": 45, + "height": 18 + } + } + ], + "componentNames": [], + "width": 69, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/69/28" + } + }, + "properties": [ + { + "id": "5fd9432d2909e35cb5a9e995", + "value": "Secondary" + }, + { + "id": "5fd943832909e35cb5a9e997", + "value": "Default" + } + ] + }, + { + "id": "5fd942b92909e35cb5a9e902", + "name": "Button / Secondary / Disabled 🐣", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "sketch", + "height": 28, + "layers": [ + { + "styleSourceId": "CC4E61B6-5C0F-4A46-A098-4214146A339E", + "borderRadius": 2, + "rotation": 0, + "blendMode": "normal", + "shadows": [], + "styleName": "Secondary button/Secondary button Disabled", + "type": "shape", + "opacity": 1, + "sourceId": "8E3B2FC0-E710-41BE-A6F5-B343D536F16F", + "fills": [ + { + "color": { + "r": 237, + "b": 237, + "g": 236, + "a": 1 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 69, + "height": 28 + }, + "_id": "5fd942b92909e35cb5a9e905", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 69, + "height": 28 + } + }, + { + "shadows": [], + "name": "Title", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 0.5, + "sourceId": "1C63B7AC-5FD6-4647-971A-D725EBB4CF45", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 15, + "fontFace": "Roboto-Regular", + "textAlign": "center", + "color": { + "r": 151, + "b": 151, + "g": 145, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 5, + "x": 12, + "width": 45, + "height": 18 + }, + "_id": "5fd942b92909e35cb5a9e906", + "absoluteRect": { + "x": 12, + "y": 5, + "width": 45, + "height": 18 + } + } + ], + "componentNames": [], + "width": 69, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/69/28" + } + }, + "properties": [ + { + "id": "5fd9432d2909e35cb5a9e995", + "value": "Secondary" + }, + { + "id": "5fd943832909e35cb5a9e997", + "value": "Disabled" + } + ] + } + ] + } +] \ No newline at end of file diff --git a/src/sample-data/components.json b/src/sample-data/components.json index 7f5e2f4..3990f0a 100644 --- a/src/sample-data/components.json +++ b/src/sample-data/components.json @@ -1,10 +1,948 @@ [ { - "name": "Simple Component", - "description": "" + "name": "Header", + "description": "", + "latestVersion": { + "snapshot": { + "assets": [ + { + "layerId": "7E3861F2-458C-4917-A698-962F2D05F508", + "layerName": " Logo", + "displayName": "logo", + "contents": [ + { + "url": "https://placekitten.com/200/299", + "density": "1x", + "format": "png" + }, + { + "url": "https://placekitten.com/200/299", + "density": "1x", + "format": "svg", + "optimized": { + "url": "https://placekitten.com/200/299", + "density": "1x", + "format": "svg", + "percent": 68 + } + }, + { + "url": "https://placekitten.com/200/299", + "density": "2x", + "format": "png" + }, + { + "url": "https://placekitten.com/200/299", + "density": "3x", + "format": "png" + } + ], + "_id": "5cb69a783fdf9e4002334764", + "size": { + "width": 32, + "height": 32 + }, + "lightness": "dark" + } + ], + "source": "sketch", + "height": 84, + "layers": [ + { + "borderRadius": 0, + "componentName": "Header bg / Orange", + "rotation": 0, + "layers": [], + "blendMode": "normal", + "interactionLevel": "bottom", + "rect": { + "y": 0, + "x": 0, + "width": 1024, + "height": 84 + }, + "type": "group", + "opacity": 1, + "sourceId": "9B5912B0-9043-450E-9830-DFB71382B34B", + "fills": [ + { + "color": { + "r": 253, + "b": 57, + "g": 189, + "a": 1 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "name": " Orange", + "shadows": [], + "_id": "5cb69a783fdf9e4002334753", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 1024, + "height": 84 + } + }, + { + "borderRadius": 0, + "componentName": "Icons / Logo", + "rotation": 0, + "layers": [ + { + "borders": [], + "rect": { + "y": 0, + "x": 0, + "width": 32, + "height": 32 + }, + "rotation": 0, + "layers": [ + { + "borderRadius": 0, + "shadows": [], + "rotation": 0, + "blendMode": "normal", + "type": "shape", + "opacity": 1, + "sourceId": "25B1FD06-178F-4901-B533-49D6D602D97F", + "fills": [ + { + "color": { + "r": 255, + "b": 255, + "g": 255, + "a": 1 + }, + "opacity": 1, + "fillType": "color" + } + ], + "exportable": false, + "borders": [], + "name": "Oval", + "rect": { + "y": 0, + "x": 0, + "width": 32, + "height": 32 + }, + "_id": "5cb69a783fdf9e4002334756", + "absoluteRect": { + "x": 12, + "y": 40, + "width": 32, + "height": 32 + } + }, + { + "borders": [], + "rect": { + "y": 1.038961038961039, + "x": 1.038961038961039, + "width": 29.92207792207792, + "height": 29.92207792207792 + }, + "rotation": 0, + "layers": [ + { + "borderRadius": 0, + "shadows": [], + "rotation": 0, + "blendMode": "normal", + "type": "shape", + "opacity": 1, + "sourceId": "090685FD-58E7-4771-AA1C-CC95CB5A51C6", + "fills": [ + { + "color": { + "r": 238, + "b": 35, + "g": 103, + "a": 1 + }, + "opacity": 1, + "fillType": "color" + } + ], + "exportable": false, + "borders": [], + "name": "Oval 1", + "rect": { + "y": 14.96103896103896, + "x": 0, + "width": 29.9220779220779, + "height": 14.96103896103896 + }, + "_id": "5cb69a783fdf9e4002334758", + "absoluteRect": { + "x": 13.03896103896104, + "y": 56, + "width": 29.9220779220779, + "height": 14.96103896103896 + } + }, + { + "borderRadius": 0, + "shadows": [], + "rotation": 0, + "blendMode": "normal", + "type": "shape", + "opacity": 1, + "sourceId": "046464D9-46C9-435D-829F-11A89045F225", + "fills": [ + { + "color": { + "r": 253, + "b": 57, + "g": 189, + "a": 1 + }, + "opacity": 1, + "fillType": "color" + } + ], + "exportable": false, + "borders": [], + "name": "Oval 1 Copy", + "rect": { + "y": 0, + "x": 0, + "width": 29.92207792207792, + "height": 14.96103896103896 + }, + "_id": "5cb69a783fdf9e4002334759", + "absoluteRect": { + "x": 13.03896103896104, + "y": 41.03896103896104, + "width": 29.92207792207792, + "height": 14.96103896103896 + } + }, + { + "borderRadius": 0, + "shadows": [], + "rotation": 0, + "blendMode": "normal", + "type": "shape", + "opacity": 1, + "sourceId": "FD5F8BED-E602-4876-AE7A-7D4073DFBAD0", + "fills": [ + { + "color": { + "r": 254, + "b": 51, + "g": 207, + "a": 1 + }, + "opacity": 1, + "fillType": "color" + } + ], + "exportable": false, + "borders": [], + "name": "Oval 2 Copy", + "rect": { + "y": 14.96103896103896, + "x": 0, + "width": 29.92207792207792, + "height": 9.044243891701518 + }, + "_id": "5cb69a783fdf9e400233475a", + "absoluteRect": { + "x": 13.03896103896104, + "y": 56, + "width": 29.92207792207792, + "height": 9.044243891701518 + } + }, + { + "borderRadius": 0, + "shadows": [], + "rotation": 0, + "blendMode": "normal", + "type": "shape", + "opacity": 1, + "sourceId": "4048E04C-29EC-4D04-AC15-8F9C0F386442", + "fills": [ + { + "color": { + "r": 246, + "b": 51, + "g": 152, + "a": 1 + }, + "opacity": 1, + "fillType": "color" + } + ], + "exportable": false, + "borders": [], + "name": "Oval 2", + "rect": { + "y": 6.170372000880511, + "x": 0, + "width": 29.92207792207792, + "height": 8.790666960158482 + }, + "_id": "5cb69a783fdf9e400233475b", + "absoluteRect": { + "x": 13.03896103896104, + "y": 47.20933303984155, + "width": 29.92207792207792, + "height": 8.790666960158482 + } + } + ], + "blendMode": "normal", + "type": "group", + "opacity": 1, + "sourceId": "F1DD6B18-4003-41ED-BC03-23F0034A60F9", + "fills": [], + "exportable": false, + "borderRadius": 0, + "name": "Group", + "shadows": [], + "_id": "5cb69a783fdf9e4002334757", + "absoluteRect": { + "x": 13.03896103896104, + "y": 41.03896103896104, + "width": 29.92207792207792, + "height": 29.92207792207792 + } + } + ], + "blendMode": "normal", + "type": "group", + "opacity": 1, + "sourceId": "D45E7D12-7EAA-4846-8A81-89EB701B56A2", + "fills": [], + "exportable": false, + "borderRadius": 0, + "name": "Group 13", + "shadows": [], + "_id": "5cb69a783fdf9e4002334755", + "absoluteRect": { + "x": 12, + "y": 40, + "width": 32, + "height": 32 + } + } + ], + "blendMode": "normal", + "interactionLevel": "top", + "rect": { + "y": 40, + "x": 12, + "width": 32, + "height": 32 + }, + "type": "group", + "opacity": 1, + "sourceId": "7E3861F2-458C-4917-A698-962F2D05F508", + "fills": [], + "exportable": true, + "borders": [], + "name": " Logo", + "shadows": [], + "_id": "5cb69a783fdf9e4002334754", + "absoluteRect": { + "x": 12, + "y": 40, + "width": 32, + "height": 32 + } + }, + { + "borderRadius": 0, + "componentName": "Header / Title / Small", + "rotation": 0, + "layers": [ + { + "shadows": [], + "name": "Title", + "rotation": 0, + "blendMode": "normal", + "content": "Title", + "type": "text", + "opacity": 1, + "sourceId": "816DF671-F304-45AD-B457-94D65357A553", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 5 + }, + "style": { + "fontSize": 14, + "fontFace": "OpenSans-Bold", + "textAlign": "center", + "color": { + "r": 255, + "b": 255, + "g": 255, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 0, + "x": 6, + "width": 72, + "height": 19 + }, + "_id": "5cb69a783fdf9e400233475d", + "absoluteRect": { + "x": 838, + "y": 53, + "width": 72, + "height": 19 + } + } + ], + "blendMode": "normal", + "interactionLevel": "bottom", + "rect": { + "y": 53, + "x": 832, + "width": 84, + "height": 31 + }, + "type": "group", + "opacity": 1, + "sourceId": "5CA70284-DF70-4553-9FEA-19FD728C0278", + "fills": [ + { + "color": { + "r": 151, + "b": 151, + "g": 145, + "a": 1 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "name": " Small", + "shadows": [], + "_id": "5cb69a783fdf9e400233475c", + "absoluteRect": { + "x": 832, + "y": 53, + "width": 84, + "height": 31 + } + }, + { + "borderRadius": 0, + "componentName": "Header / Title / Small", + "rotation": 0, + "layers": [ + { + "shadows": [], + "name": "Title", + "rotation": 0, + "blendMode": "normal", + "content": "Title", + "type": "text", + "opacity": 1, + "sourceId": "816DF671-F304-45AD-B457-94D65357A553", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 5 + }, + "style": { + "fontSize": 14, + "fontFace": "OpenSans-Bold", + "textAlign": "center", + "color": { + "r": 255, + "b": 255, + "g": 255, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 0, + "x": 6, + "width": 72, + "height": 19 + }, + "_id": "5cb69a783fdf9e400233475f", + "absoluteRect": { + "x": 922, + "y": 53, + "width": 72, + "height": 19 + } + } + ], + "blendMode": "normal", + "interactionLevel": "bottom", + "rect": { + "y": 53, + "x": 916, + "width": 84, + "height": 31 + }, + "type": "group", + "opacity": 1, + "sourceId": "5CA70284-DF70-4553-9FEA-19FD728C0278", + "fills": [ + { + "color": { + "r": 151, + "b": 151, + "g": 145, + "a": 1 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "name": " Small", + "shadows": [], + "_id": "5cb69a783fdf9e400233475e", + "absoluteRect": { + "x": 916, + "y": 53, + "width": 84, + "height": 31 + } + }, + { + "borderRadius": 0, + "componentName": "Header title / ", + "rotation": 0, + "layers": [ + { + "shadows": [], + "name": "Title", + "rotation": 0, + "blendMode": "normal", + "content": "Places", + "type": "text", + "opacity": 0.6, + "sourceId": "4ED300F5-22D4-4466-8334-F45DEA93ABB4", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 24, + "color": { + "r": 255, + "b": 255, + "g": 255, + "a": 1 + }, + "fontFace": "OpenSans-Bold" + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 0, + "x": 6, + "width": 93, + "height": 33 + }, + "_id": "5cb69a783fdf9e4002334761", + "absoluteRect": { + "x": 166, + "y": 39, + "width": 93, + "height": 33 + } + } + ], + "blendMode": "normal", + "interactionLevel": "bottom", + "rect": { + "y": 39, + "x": 160, + "width": 108, + "height": 45 + }, + "type": "group", + "opacity": 1, + "sourceId": "07BBA166-2A0D-44C3-A375-4F097D32540C", + "fills": [ + { + "color": { + "r": 151, + "b": 151, + "g": 145, + "a": 1 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "name": " ", + "shadows": [], + "_id": "5cb69a783fdf9e4002334760", + "absoluteRect": { + "x": 160, + "y": 39, + "width": 108, + "height": 45 + } + }, + { + "borderRadius": 0, + "componentName": "Header title / Selected", + "rotation": 0, + "layers": [ + { + "shadows": [], + "name": "Title", + "rotation": 0, + "blendMode": "normal", + "content": "Guides", + "type": "text", + "opacity": 1, + "sourceId": "6DC1D1B0-A8E6-4F42-A34A-7C5D938A1107", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 24, + "color": { + "r": 255, + "b": 255, + "g": 255, + "a": 1 + }, + "fontFace": "OpenSans-Bold" + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 0, + "x": 6, + "width": 93, + "height": 33 + }, + "_id": "5cb69a783fdf9e4002334763", + "absoluteRect": { + "x": 58, + "y": 39, + "width": 93, + "height": 33 + } + } + ], + "blendMode": "normal", + "interactionLevel": "bottom", + "rect": { + "y": 39, + "x": 52, + "width": 108, + "height": 45 + }, + "type": "group", + "opacity": 1, + "sourceId": "02EFBB68-FE0B-420B-8E25-A0C039C441D0", + "fills": [ + { + "color": { + "r": 151, + "b": 151, + "g": 145, + "a": 1 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "name": " Selected", + "shadows": [], + "_id": "5cb69a783fdf9e4002334762", + "absoluteRect": { + "x": 52, + "y": 39, + "width": 108, + "height": 45 + } + } + ], + "componentNames": [ + "Header / Title / Small", + "Header bg / Orange", + "Header title / ", + "Header title / Selected", + "Icons / Logo" + ], + "width": 1024, + "links": [], + "url": "https://placekitten.com/1024/84" + } + } }, { - "name": "Component with description", - "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lacus magna, elementum vel orci a, ornare molestie augue. Fusce semper pharetra augue ac condimentum. Suspendisse eget varius nulla. Vivamus feugiat ligula nec volutpat tincidunt. Curabitur iaculis purus convallis, scelerisque nulla vitae, condimentum ante. Curabitur vehicula nunc in massa congue, quis varius metus placerat. Integer feugiat, orci eu sagittis interdum, tortor nulla pulvinar mauris, egestas suscipit eros orci sit amet sem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus." + "name": "Search field", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lacus magna, elementum vel orci a, ornare molestie augue. Fusce semper pharetra augue ac condimentum. Suspendisse eget varius nulla. Vivamus feugiat ligula nec volutpat tincidunt. Curabitur iaculis purus convallis, scelerisque nulla vitae, condimentum ante. Curabitur vehicula nunc in massa congue, quis varius metus placerat. Integer feugiat, orci eu sagittis interdum, tortor nulla pulvinar mauris, egestas suscipit eros orci sit amet sem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.", + "latestVersion": { + "snapshot": { + "assets": [ + { + "layerId": "B1168488-6DDF-4E56-B8F7-00ABC3FCCEDF", + "layerName": "icSearch", + "displayName": "ic-search", + "contents": [ + { + "url": "https://placekitten.com/200/299", + "density": "3x", + "format": "png" + }, + { + "url": "https://placekitten.com/200/299", + "density": "2x", + "format": "png" + }, + { + "url": "https://placekitten.com/200/299", + "density": "1x", + "format": "png" + }, + { + "url": "https://placekitten.com/200/299", + "density": "1x", + "format": "svg", + "optimized": { + "url": "https://placekitten.com/200/299", + "density": "1x", + "format": "svg", + "percent": 76 + } + } + ], + "_id": "5cb69aad3fdf9e400233476d", + "size": { + "width": 16, + "height": 16 + }, + "lightness": "dark" + } + ], + "source": "sketch", + "height": 36, + "layers": [ + { + "borderRadius": 6, + "shadows": [], + "rotation": 0, + "blendMode": "normal", + "type": "shape", + "opacity": 1, + "sourceId": "C7734431-6C95-466F-9FED-75E060D0A2E5", + "fills": [ + { + "color": { + "r": 255, + "b": 255, + "g": 255, + "a": 1 + }, + "opacity": 1, + "fillType": "color" + } + ], + "exportable": false, + "borders": [ + { + "position": "inside", + "fillType": "color", + "thickness": 1, + "opacity": 1, + "color": { + "r": 237, + "b": 237, + "g": 236, + "a": 1 + } + } + ], + "name": "Search bar bg", + "rect": { + "y": 0, + "x": 0, + "width": 324, + "height": 36 + }, + "_id": "5cb69aad3fdf9e4002334769", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 324, + "height": 36 + } + }, + { + "borderRadius": 0, + "componentName": "icSearch", + "rotation": 0, + "layers": [ + { + "borderRadius": 0, + "shadows": [], + "rotation": 0, + "blendMode": "normal", + "type": "shape", + "opacity": 1, + "sourceId": "67839DE5-4907-4CF4-99C9-F84BDFF7359B", + "fills": [ + { + "color": { + "r": 193, + "b": 193, + "g": 190, + "a": 1 + }, + "opacity": 1, + "fillType": "color" + } + ], + "exportable": false, + "borders": [], + "name": "icSearch", + "rect": { + "y": 0, + "x": 0, + "width": 16, + "height": 16 + }, + "_id": "5cb69aad3fdf9e400233476b", + "absoluteRect": { + "x": 10, + "y": 10, + "width": 16, + "height": 16 + } + } + ], + "blendMode": "normal", + "interactionLevel": "top", + "rect": { + "y": 10, + "x": 10, + "width": 16, + "height": 16 + }, + "type": "group", + "opacity": 1, + "sourceId": "B1168488-6DDF-4E56-B8F7-00ABC3FCCEDF", + "fills": [], + "exportable": true, + "borders": [], + "name": "icSearch", + "shadows": [], + "_id": "5cb69aad3fdf9e400233476a", + "absoluteRect": { + "x": 10, + "y": 10, + "width": 16, + "height": 16 + } + }, + { + "shadows": [], + "name": "Search for a…", + "rotation": 0, + "blendMode": "normal", + "content": "Search for a…", + "type": "text", + "opacity": 1, + "sourceId": "B89E4C60-77F1-48CE-8562-135D690E886A", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 13 + }, + "style": { + "fontSize": 18, + "color": { + "r": 193, + "b": 193, + "g": 190, + "a": 1 + }, + "fontFace": "OpenSans" + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 6, + "x": 32, + "width": 268, + "height": 24 + }, + "_id": "5cb69aad3fdf9e400233476c", + "absoluteRect": { + "x": 32, + "y": 6, + "width": 268, + "height": 24 + } + } + ], + "componentNames": [ + "icSearch" + ], + "width": 324, + "links": [], + "url": "https://placekitten.com/324/36" + } + } } ] \ No newline at end of file diff --git a/src/sample-data/index.js b/src/sample-data/index.js index b32b9a3..9aad171 100644 --- a/src/sample-data/index.js +++ b/src/sample-data/index.js @@ -1,7 +1,13 @@ const project = require("./project.json"); const version = require("./version.json"); +const screens = require("./screens.json"); +const components = require("./components.json"); +const componentVariants = require("./componentVariants.json"); module.exports = { + componentVariants, + components, project, - version + screens, + screenVersion: version }; \ No newline at end of file diff --git a/src/sample-data/screens.json b/src/sample-data/screens.json index c602597..2808ca1 100644 --- a/src/sample-data/screens.json +++ b/src/sample-data/screens.json @@ -11,7 +11,7 @@ }, { "name": "Screen with 3 tags", - "description": "", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lacus magna, elementum vel orci a, ornare molestie augue. Fusce semper pharetra augue ac condimentum. Suspendisse eget varius nulla. Vivamus feugiat ligula nec volutpat tincidunt. Curabitur iaculis purus convallis, scelerisque nulla vitae, condimentum ante. Curabitur vehicula nunc in massa congue, quis varius metus placerat. Integer feugiat, orci eu sagittis interdum, tortor nulla pulvinar mauris, egestas suscipit eros orci sit amet sem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.", "tags": ["First tag", "Second tag", "Third tag"] } ] \ No newline at end of file diff --git a/src/template/src/fixtures/componentVariants.json b/src/template/src/fixtures/componentVariants.json new file mode 100644 index 0000000..68f5396 --- /dev/null +++ b/src/template/src/fixtures/componentVariants.json @@ -0,0 +1,2495 @@ +[ + { + "name": "Button", + "propertyDescriptors": [ + { + "id": "5fdd6c74f4da870b63352c04", + "name": "Type", + "values": [ + "error", + "default" + ] + }, + { + "id": "5fdd6c74f4da870b63352c05", + "name": "Ghost", + "values": [ + "yes", + "no" + ] + }, + { + "id": "5fdd6c74f4da870b63352c06", + "name": "State", + "values": [ + "disabled", + "default", + "hover" + ] + } + ], + "components": [ + { + "id": "5fdd6c7513adb90b6a199307", + "name": "Button / error / yes / default", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "figma", + "height": 34, + "layers": [ + { + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 56, + "height": 34 + }, + "rotation": 0, + "layers": [ + { + "shadows": [], + "name": "Button Text", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "140:8", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 12, + "letterSpacing": 0, + "fontFace": "Roboto-Regular", + "textAlign": "left", + "color": { + "r": 235, + "b": 21, + "g": 21, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 10, + "x": 10, + "width": 36, + "height": 14 + }, + "_id": "5fdd6c7513adb90b6a19930b", + "absoluteRect": { + "x": 10, + "y": 10, + "width": 36, + "height": 14 + } + } + ], + "blendMode": "normal", + "interactionLevel": "bottom", + "type": "group", + "opacity": 1, + "sourceId": "140:7", + "fills": [], + "exportable": false, + "borders": [ + { + "blendMode": "normal", + "fillType": "color", + "position": "inside", + "thickness": 1, + "opacity": 1, + "color": { + "r": 235, + "b": 21, + "g": 21, + "a": 1 + } + } + ], + "borderRadius": 5, + "shadows": [], + "_id": "5fdd6c7513adb90b6a19930a", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 56, + "height": 34 + } + } + ], + "componentNames": [], + "width": 56, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/56/34" + } + }, + "properties": [ + { + "id": "5fdd6c74f4da870b63352c04", + "value": "error" + }, + { + "id": "5fdd6c74f4da870b63352c05", + "value": "yes" + }, + { + "id": "5fdd6c74f4da870b63352c06", + "value": "default" + } + ] + }, + { + "id": "5fdd6c754cb3f47caf4b9ac3", + "name": "Button / default / no / hover", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "figma", + "height": 34, + "layers": [ + { + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 56, + "height": 34 + }, + "rotation": 0, + "layers": [ + { + "shadows": [], + "name": "Button Text", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "140:32", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 12, + "letterSpacing": 0, + "fontFace": "Roboto-Regular", + "textAlign": "left", + "color": { + "r": 255, + "b": 255, + "g": 255, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 10, + "x": 10, + "width": 36, + "height": 14 + }, + "_id": "5fdd6c754cb3f47caf4b9ac7", + "absoluteRect": { + "x": 10, + "y": 10, + "width": 36, + "height": 14 + } + } + ], + "blendMode": "normal", + "interactionLevel": "bottom", + "type": "group", + "opacity": 1, + "sourceId": "140:31", + "fills": [ + { + "color": { + "r": 165, + "b": 165, + "g": 165, + "a": 1 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [ + { + "blendMode": "normal", + "fillType": "color", + "position": "inside", + "thickness": 4, + "opacity": 1, + "color": { + "r": 48, + "b": 255, + "g": 168, + "a": 1 + } + } + ], + "borderRadius": 5, + "shadows": [], + "_id": "5fdd6c754cb3f47caf4b9ac6", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 56, + "height": 34 + } + } + ], + "componentNames": [], + "width": 56, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/56/34" + } + }, + "properties": [ + { + "id": "5fdd6c74f4da870b63352c04", + "value": "default" + }, + { + "id": "5fdd6c74f4da870b63352c05", + "value": "no" + }, + { + "id": "5fdd6c74f4da870b63352c06", + "value": "hover" + } + ] + }, + { + "id": "5fdd6c754cb3f47caf4b9acc", + "name": "Button / default / no / disabled", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "figma", + "height": 34, + "layers": [ + { + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 56, + "height": 34 + }, + "rotation": 0, + "layers": [ + { + "shadows": [], + "name": "Button Text", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "140:35", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 12, + "letterSpacing": 0, + "fontFace": "Roboto-Regular", + "textAlign": "left", + "color": { + "r": 255, + "b": 255, + "g": 255, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 10, + "x": 10, + "width": 36, + "height": 14 + }, + "_id": "5fdd6c754cb3f47caf4b9ad0", + "absoluteRect": { + "x": 10, + "y": 10, + "width": 36, + "height": 14 + } + } + ], + "blendMode": "normal", + "interactionLevel": "bottom", + "type": "group", + "opacity": 1, + "sourceId": "140:34", + "fills": [ + { + "color": { + "r": 165, + "b": 165, + "g": 165, + "a": 0.5 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "borderRadius": 5, + "shadows": [], + "_id": "5fdd6c754cb3f47caf4b9acf", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 56, + "height": 34 + } + } + ], + "componentNames": [], + "width": 56, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/56/34" + } + }, + "properties": [ + { + "id": "5fdd6c74f4da870b63352c04", + "value": "default" + }, + { + "id": "5fdd6c74f4da870b63352c05", + "value": "no" + }, + { + "id": "5fdd6c74f4da870b63352c06", + "value": "disabled" + } + ] + }, + { + "id": "5fdd6c7513adb90b6a19930f", + "name": "Button / default / yes / disabled", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "figma", + "height": 34, + "layers": [ + { + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 56, + "height": 34 + }, + "rotation": 0, + "layers": [ + { + "shadows": [], + "name": "Button Text", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "140:17", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 12, + "letterSpacing": 0, + "fontFace": "Roboto-Regular", + "textAlign": "left", + "color": { + "r": 165, + "b": 165, + "g": 165, + "a": 0.5 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 10, + "x": 10, + "width": 36, + "height": 14 + }, + "_id": "5fdd6c7513adb90b6a199313", + "absoluteRect": { + "x": 10, + "y": 10, + "width": 36, + "height": 14 + } + } + ], + "blendMode": "normal", + "interactionLevel": "bottom", + "type": "group", + "opacity": 1, + "sourceId": "140:16", + "fills": [], + "exportable": false, + "borders": [ + { + "blendMode": "normal", + "fillType": "color", + "position": "inside", + "thickness": 1, + "opacity": 1, + "color": { + "r": 165, + "b": 165, + "g": 165, + "a": 0.5 + } + } + ], + "borderRadius": 5, + "shadows": [], + "_id": "5fdd6c7513adb90b6a199312", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 56, + "height": 34 + } + } + ], + "componentNames": [], + "width": 56, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/56/34" + } + }, + "properties": [ + { + "id": "5fdd6c74f4da870b63352c04", + "value": "default" + }, + { + "id": "5fdd6c74f4da870b63352c05", + "value": "yes" + }, + { + "id": "5fdd6c74f4da870b63352c06", + "value": "disabled" + } + ] + }, + { + "id": "5fdd6c756340307cb62bae8b", + "name": "Button / error / yes / hover", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "figma", + "height": 34, + "layers": [ + { + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 56, + "height": 34 + }, + "rotation": 0, + "layers": [ + { + "shadows": [], + "name": "Button Text", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "140:14", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 12, + "letterSpacing": 0, + "fontFace": "Roboto-Regular", + "textAlign": "left", + "color": { + "r": 235, + "b": 21, + "g": 21, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 10, + "x": 10, + "width": 36, + "height": 14 + }, + "_id": "5fdd6c756340307cb62bae8f", + "absoluteRect": { + "x": 10, + "y": 10, + "width": 36, + "height": 14 + } + } + ], + "blendMode": "normal", + "interactionLevel": "bottom", + "type": "group", + "opacity": 1, + "sourceId": "140:13", + "fills": [], + "exportable": false, + "borders": [ + { + "blendMode": "normal", + "fillType": "color", + "position": "inside", + "thickness": 4, + "opacity": 1, + "color": { + "r": 48, + "b": 255, + "g": 168, + "a": 1 + } + } + ], + "borderRadius": 5, + "shadows": [], + "_id": "5fdd6c756340307cb62bae8e", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 56, + "height": 34 + } + } + ], + "componentNames": [], + "width": 56, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/56/34" + } + }, + "properties": [ + { + "id": "5fdd6c74f4da870b63352c04", + "value": "error" + }, + { + "id": "5fdd6c74f4da870b63352c05", + "value": "yes" + }, + { + "id": "5fdd6c74f4da870b63352c06", + "value": "hover" + } + ] + }, + { + "id": "5fdd6c756340307cb62bae90", + "name": "Button / error / no / disabled", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "figma", + "height": 34, + "layers": [ + { + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 56, + "height": 34 + }, + "rotation": 0, + "layers": [ + { + "shadows": [], + "name": "Button Text", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "140:26", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 12, + "letterSpacing": 0, + "fontFace": "Roboto-Regular", + "textAlign": "left", + "color": { + "r": 255, + "b": 255, + "g": 255, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 10, + "x": 10, + "width": 36, + "height": 14 + }, + "_id": "5fdd6c756340307cb62bae94", + "absoluteRect": { + "x": 10, + "y": 10, + "width": 36, + "height": 14 + } + } + ], + "blendMode": "normal", + "interactionLevel": "bottom", + "type": "group", + "opacity": 1, + "sourceId": "140:25", + "fills": [ + { + "color": { + "r": 235, + "b": 21, + "g": 21, + "a": 0.5 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "borderRadius": 5, + "shadows": [], + "_id": "5fdd6c756340307cb62bae93", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 56, + "height": 34 + } + } + ], + "componentNames": [], + "width": 56, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/56/34" + } + }, + "properties": [ + { + "id": "5fdd6c74f4da870b63352c04", + "value": "error" + }, + { + "id": "5fdd6c74f4da870b63352c05", + "value": "no" + }, + { + "id": "5fdd6c74f4da870b63352c06", + "value": "disabled" + } + ] + }, + { + "id": "5fdd6c7513adb90b6a199314", + "name": "Button / error / no / default", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "figma", + "height": 34, + "layers": [ + { + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 56, + "height": 34 + }, + "rotation": 0, + "layers": [ + { + "shadows": [], + "name": "Button Text", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "140:29", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 12, + "letterSpacing": 0, + "fontFace": "Roboto-Regular", + "textAlign": "left", + "color": { + "r": 255, + "b": 255, + "g": 255, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 10, + "x": 10, + "width": 36, + "height": 14 + }, + "_id": "5fdd6c7513adb90b6a199318", + "absoluteRect": { + "x": 10, + "y": 10, + "width": 36, + "height": 14 + } + } + ], + "blendMode": "normal", + "interactionLevel": "bottom", + "type": "group", + "opacity": 1, + "sourceId": "140:28", + "fills": [ + { + "color": { + "r": 235, + "b": 21, + "g": 21, + "a": 1 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "borderRadius": 5, + "shadows": [], + "_id": "5fdd6c7513adb90b6a199317", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 56, + "height": 34 + } + } + ], + "componentNames": [], + "width": 56, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/56/34" + } + }, + "properties": [ + { + "id": "5fdd6c74f4da870b63352c04", + "value": "error" + }, + { + "id": "5fdd6c74f4da870b63352c05", + "value": "no" + }, + { + "id": "5fdd6c74f4da870b63352c06", + "value": "default" + } + ] + }, + { + "id": "5fdd6c75f4da870b63352c15", + "name": "Button / default / no / default", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "figma", + "height": 34, + "layers": [ + { + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 56, + "height": 34 + }, + "rotation": 0, + "layers": [ + { + "shadows": [], + "name": "Button Text", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "140:38", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 12, + "letterSpacing": 0, + "fontFace": "Roboto-Regular", + "textAlign": "left", + "color": { + "r": 255, + "b": 255, + "g": 255, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 10, + "x": 10, + "width": 36, + "height": 14 + }, + "_id": "5fdd6c75f4da870b63352c19", + "absoluteRect": { + "x": 10, + "y": 10, + "width": 36, + "height": 14 + } + } + ], + "blendMode": "normal", + "interactionLevel": "bottom", + "type": "group", + "opacity": 1, + "sourceId": "140:37", + "fills": [ + { + "color": { + "r": 165, + "b": 165, + "g": 165, + "a": 1 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "borderRadius": 5, + "shadows": [], + "_id": "5fdd6c75f4da870b63352c18", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 56, + "height": 34 + } + } + ], + "componentNames": [], + "width": 56, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/56/34" + } + }, + "properties": [ + { + "id": "5fdd6c74f4da870b63352c04", + "value": "default" + }, + { + "id": "5fdd6c74f4da870b63352c05", + "value": "no" + }, + { + "id": "5fdd6c74f4da870b63352c06", + "value": "default" + } + ] + }, + { + "id": "5fdd6c75f4da870b63352c10", + "name": "Button / default / yes / default", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "figma", + "height": 34, + "layers": [ + { + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 56, + "height": 34 + }, + "rotation": 0, + "layers": [ + { + "shadows": [], + "name": "Button Text", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "140:20", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 12, + "letterSpacing": 0, + "fontFace": "Roboto-Regular", + "textAlign": "left", + "color": { + "r": 165, + "b": 165, + "g": 165, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 10, + "x": 10, + "width": 36, + "height": 14 + }, + "_id": "5fdd6c75f4da870b63352c14", + "absoluteRect": { + "x": 10, + "y": 10, + "width": 36, + "height": 14 + } + } + ], + "blendMode": "normal", + "interactionLevel": "bottom", + "type": "group", + "opacity": 1, + "sourceId": "140:19", + "fills": [], + "exportable": false, + "borders": [ + { + "blendMode": "normal", + "fillType": "color", + "position": "inside", + "thickness": 1, + "opacity": 1, + "color": { + "r": 165, + "b": 165, + "g": 165, + "a": 1 + } + } + ], + "borderRadius": 5, + "shadows": [], + "_id": "5fdd6c75f4da870b63352c13", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 56, + "height": 34 + } + } + ], + "componentNames": [], + "width": 56, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/56/34" + } + }, + "properties": [ + { + "id": "5fdd6c74f4da870b63352c04", + "value": "default" + }, + { + "id": "5fdd6c74f4da870b63352c05", + "value": "yes" + }, + { + "id": "5fdd6c74f4da870b63352c06", + "value": "default" + } + ] + }, + { + "id": "5fdd6c754cb3f47caf4b9abe", + "name": "Button / default / yes / hover", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "figma", + "height": 34, + "layers": [ + { + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 56, + "height": 34 + }, + "rotation": 0, + "layers": [ + { + "shadows": [], + "name": "Button Text", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "140:11", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 12, + "letterSpacing": 0, + "fontFace": "Roboto-Regular", + "textAlign": "left", + "color": { + "r": 165, + "b": 165, + "g": 165, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 10, + "x": 10, + "width": 36, + "height": 14 + }, + "_id": "5fdd6c754cb3f47caf4b9ac2", + "absoluteRect": { + "x": 10, + "y": 10, + "width": 36, + "height": 14 + } + } + ], + "blendMode": "normal", + "interactionLevel": "bottom", + "type": "group", + "opacity": 1, + "sourceId": "140:10", + "fills": [], + "exportable": false, + "borders": [ + { + "blendMode": "normal", + "fillType": "color", + "position": "inside", + "thickness": 4, + "opacity": 1, + "color": { + "r": 48, + "b": 255, + "g": 168, + "a": 1 + } + } + ], + "borderRadius": 5, + "shadows": [], + "_id": "5fdd6c754cb3f47caf4b9ac1", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 56, + "height": 34 + } + } + ], + "componentNames": [], + "width": 56, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/56/34" + } + }, + "properties": [ + { + "id": "5fdd6c74f4da870b63352c04", + "value": "default" + }, + { + "id": "5fdd6c74f4da870b63352c05", + "value": "yes" + }, + { + "id": "5fdd6c74f4da870b63352c06", + "value": "hover" + } + ] + }, + { + "id": "5fdd6c754cb3f47caf4b9ab9", + "name": "Button / error / no / hover", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "figma", + "height": 34, + "layers": [ + { + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 56, + "height": 34 + }, + "rotation": 0, + "layers": [ + { + "shadows": [], + "name": "Button Text", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "140:23", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 12, + "letterSpacing": 0, + "fontFace": "Roboto-Regular", + "textAlign": "left", + "color": { + "r": 255, + "b": 255, + "g": 255, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 10, + "x": 10, + "width": 36, + "height": 14 + }, + "_id": "5fdd6c754cb3f47caf4b9abd", + "absoluteRect": { + "x": 10, + "y": 10, + "width": 36, + "height": 14 + } + } + ], + "blendMode": "normal", + "interactionLevel": "bottom", + "type": "group", + "opacity": 1, + "sourceId": "140:22", + "fills": [ + { + "color": { + "r": 235, + "b": 21, + "g": 21, + "a": 1 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [ + { + "blendMode": "normal", + "fillType": "color", + "position": "inside", + "thickness": 4, + "opacity": 1, + "color": { + "r": 48, + "b": 255, + "g": 168, + "a": 1 + } + } + ], + "borderRadius": 5, + "shadows": [], + "_id": "5fdd6c754cb3f47caf4b9abc", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 56, + "height": 34 + } + } + ], + "componentNames": [], + "width": 56, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/56/34" + } + }, + "properties": [ + { + "id": "5fdd6c74f4da870b63352c04", + "value": "error" + }, + { + "id": "5fdd6c74f4da870b63352c05", + "value": "no" + }, + { + "id": "5fdd6c74f4da870b63352c06", + "value": "hover" + } + ] + }, + { + "id": "5fdd6c7513adb90b6a199302", + "name": "Button / error / yes / disabled", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "figma", + "height": 34, + "layers": [ + { + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 56, + "height": 34 + }, + "rotation": 0, + "layers": [ + { + "shadows": [], + "name": "Button Text", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "140:5", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 12, + "letterSpacing": 0, + "fontFace": "Roboto-Regular", + "textAlign": "left", + "color": { + "r": 235, + "b": 21, + "g": 21, + "a": 0.5 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 10, + "x": 10, + "width": 36, + "height": 14 + }, + "_id": "5fdd6c7513adb90b6a199306", + "absoluteRect": { + "x": 10, + "y": 10, + "width": 36, + "height": 14 + } + } + ], + "blendMode": "normal", + "interactionLevel": "bottom", + "type": "group", + "opacity": 1, + "sourceId": "140:4", + "fills": [], + "exportable": false, + "borders": [ + { + "blendMode": "normal", + "fillType": "color", + "position": "inside", + "thickness": 1, + "opacity": 1, + "color": { + "r": 235, + "b": 21, + "g": 21, + "a": 0.5 + } + } + ], + "borderRadius": 5, + "shadows": [], + "_id": "5fdd6c7513adb90b6a199305", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 56, + "height": 34 + } + } + ], + "componentNames": [], + "width": 56, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/56/34" + } + }, + "properties": [ + { + "id": "5fdd6c74f4da870b63352c04", + "value": "error" + }, + { + "id": "5fdd6c74f4da870b63352c05", + "value": "yes" + }, + { + "id": "5fdd6c74f4da870b63352c06", + "value": "disabled" + } + ] + } + ] + }, + { + "name": "Button", + "propertyDescriptors": [ + { + "id": "5fd9432d2909e35cb5a9e995", + "name": "Type", + "values": [ + "Secondary", + "Default" + ] + }, + { + "id": "5fd943832909e35cb5a9e997", + "name": "State", + "values": [ + "Default", + "Hover", + "Pressed", + "Disabled" + ] + } + ], + "components": [ + { + "id": "5fd942b92909e35cb5a9e8f7", + "name": "Button / Secondary / Hover", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "sketch", + "height": 28, + "layers": [ + { + "styleSourceId": "E90102D9-71DE-4F1F-85EA-53C94A73F909", + "borderRadius": 2, + "rotation": 0, + "blendMode": "normal", + "shadows": [], + "styleName": "Secondary button/Secondary button Hover", + "type": "shape", + "opacity": 1, + "sourceId": "3A7B6997-3D1E-4BEF-9F1C-1310E795A677", + "fills": [ + { + "color": { + "r": 237, + "b": 237, + "g": 236, + "a": 1 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + }, + { + "color": { + "r": 151, + "b": 151, + "g": 145, + "a": 0.15 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 69, + "height": 28 + }, + "_id": "5fd942b92909e35cb5a9e8fa", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 69, + "height": 28 + } + }, + { + "shadows": [], + "name": "Title", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "A7458FD3-9E7C-4C9E-93D2-CC27D1CAA2B8", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 15, + "fontFace": "Roboto-Regular", + "textAlign": "center", + "color": { + "r": 85, + "b": 86, + "g": 77, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 5, + "x": 12, + "width": 45, + "height": 18 + }, + "_id": "5fd942b92909e35cb5a9e8fb", + "absoluteRect": { + "x": 12, + "y": 5, + "width": 45, + "height": 18 + } + } + ], + "componentNames": [], + "width": 69, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/69/28" + } + }, + "properties": [ + { + "id": "5fd9432d2909e35cb5a9e995", + "value": "Secondary" + }, + { + "id": "5fd943832909e35cb5a9e997", + "value": "Hover" + } + ] + }, + { + "id": "5fd942b92909e35cb5a9e8e8", + "name": "Button / Primary button", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "sketch", + "height": 28, + "layers": [ + { + "styleSourceId": "0F3C2A8D-3244-4185-839E-635D9D6D74BD", + "borderRadius": 2, + "rotation": 0, + "blendMode": "normal", + "shadows": [], + "styleName": "Primary button/Primary button Default", + "type": "shape", + "opacity": 1, + "sourceId": "C1460302-45FB-4FA6-BA89-5946ACF01C05", + "fills": [ + { + "color": { + "r": 65, + "b": 249, + "g": 155, + "a": 1 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 69, + "height": 28 + }, + "_id": "5ff4f229f77862308a36e32b", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 69, + "height": 28 + } + }, + { + "shadows": [], + "name": "Title", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "5E4286B8-70D7-4E84-ADA3-BFED75842248", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 15, + "fontFace": "Roboto-Bold", + "textAlign": "center", + "color": { + "r": 255, + "b": 255, + "g": 255, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 5, + "x": 12, + "width": 45, + "height": 18 + }, + "_id": "5ff4f229f77862308a36e32c", + "absoluteRect": { + "x": 12, + "y": 5, + "width": 45, + "height": 18 + } + } + ], + "componentNames": [], + "width": 69, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/69/28" + } + }, + "properties": [ + { + "id": "5fd9432d2909e35cb5a9e995", + "value": "Default" + }, + { + "id": "5fd943832909e35cb5a9e997", + "value": "Default" + } + ] + }, + { + "id": "5fd942b92909e35cb5a9e907", + "name": "Button / Primary / Hover", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "sketch", + "height": 28, + "layers": [ + { + "styleSourceId": "EC47CAF0-CC43-4174-9495-3311291D2CBE", + "borderRadius": 2, + "rotation": 0, + "blendMode": "normal", + "shadows": [], + "styleName": "Primary button/Primary button Hover", + "type": "shape", + "opacity": 1, + "sourceId": "9F774FAF-227C-4812-B189-9760FB819605", + "fills": [ + { + "color": { + "r": 65, + "b": 249, + "g": 155, + "a": 1 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + }, + { + "color": { + "r": 85, + "b": 86, + "g": 77, + "a": 0.15 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 69, + "height": 28 + }, + "_id": "5fd942b92909e35cb5a9e90a", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 69, + "height": 28 + } + }, + { + "shadows": [], + "name": "Title", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "C5B7F95B-B9F7-4399-86E0-FA39F1380BC7", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 15, + "fontFace": "Roboto-Regular", + "textAlign": "center", + "color": { + "r": 255, + "b": 255, + "g": 255, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 5, + "x": 12, + "width": 45, + "height": 18 + }, + "_id": "5fd942b92909e35cb5a9e90b", + "absoluteRect": { + "x": 12, + "y": 5, + "width": 45, + "height": 18 + } + } + ], + "componentNames": [], + "width": 69, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/69/28" + } + }, + "properties": [ + { + "id": "5fd9432d2909e35cb5a9e995", + "value": "Default" + }, + { + "id": "5fd943832909e35cb5a9e997", + "value": "Hover" + } + ] + }, + { + "id": "5fd942b92909e35cb5a9e90c", + "name": "Button / Primary / Pressed", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "sketch", + "height": 28, + "layers": [ + { + "styleSourceId": "D7F655CE-89DE-49B1-B0D1-117277F0A1F0", + "borderRadius": 2, + "rotation": 0, + "blendMode": "normal", + "shadows": [], + "styleName": "Primary button/Primary button Pressed", + "type": "shape", + "opacity": 1, + "sourceId": "3D5A92C9-F520-4EB1-B564-4F4B0C3825C3", + "fills": [ + { + "color": { + "r": 65, + "b": 249, + "g": 155, + "a": 1 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + }, + { + "color": { + "r": 85, + "b": 86, + "g": 77, + "a": 0.3 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 69, + "height": 28 + }, + "_id": "5fd942b92909e35cb5a9e90f", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 69, + "height": 28 + } + }, + { + "shadows": [], + "name": "Title", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "9E27FEE2-EB7C-4AAE-BD68-1FE02B485B1B", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 15, + "fontFace": "Roboto-Regular", + "textAlign": "center", + "color": { + "r": 255, + "b": 255, + "g": 255, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 5, + "x": 12, + "width": 45, + "height": 18 + }, + "_id": "5fd942b92909e35cb5a9e910", + "absoluteRect": { + "x": 12, + "y": 5, + "width": 45, + "height": 18 + } + } + ], + "componentNames": [], + "width": 69, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/69/28" + } + }, + "properties": [ + { + "id": "5fd9432d2909e35cb5a9e995", + "value": "Default" + }, + { + "id": "5fd943832909e35cb5a9e997", + "value": "Pressed" + } + ] + }, + { + "id": "5fd942b92909e35cb5a9e8ed", + "name": "Button / Primary / Disabled", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "sketch", + "height": 28, + "layers": [ + { + "styleSourceId": "73727270-1C5C-4FD2-B06E-0D13EF0A2682", + "borderRadius": 2, + "rotation": 0, + "blendMode": "normal", + "shadows": [], + "styleName": "Primary button/Primary button Disabled", + "type": "shape", + "opacity": 1, + "sourceId": "0018722C-44E3-4EC4-88C9-403967345745", + "fills": [ + { + "color": { + "r": 65, + "b": 249, + "g": 155, + "a": 0.6 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 69, + "height": 28 + }, + "_id": "5fd942b92909e35cb5a9e8f0", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 69, + "height": 28 + } + }, + { + "shadows": [], + "name": "Title", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 0.6, + "sourceId": "B36449EB-30AD-40F5-856D-018677A7E48D", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 15, + "fontFace": "Roboto-Regular", + "textAlign": "center", + "color": { + "r": 255, + "b": 255, + "g": 255, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 5, + "x": 12, + "width": 45, + "height": 18 + }, + "_id": "5fd942b92909e35cb5a9e8f1", + "absoluteRect": { + "x": 12, + "y": 5, + "width": 45, + "height": 18 + } + } + ], + "componentNames": [], + "width": 69, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/69/28" + } + }, + "properties": [ + { + "id": "5fd9432d2909e35cb5a9e995", + "value": "Default" + }, + { + "id": "5fd943832909e35cb5a9e997", + "value": "Disabled" + } + ] + }, + { + "id": "5fd942b92909e35cb5a9e911", + "name": "Button / Secondary / Pressed", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "sketch", + "height": 28, + "layers": [ + { + "styleSourceId": "9043FFBA-7EE3-4C87-999A-21F7FB748195", + "borderRadius": 2, + "rotation": 0, + "blendMode": "normal", + "shadows": [], + "styleName": "Secondary button/Secondary button Pressed", + "type": "shape", + "opacity": 1, + "sourceId": "4E109532-B169-4895-AC7A-57BFCA36BFD7", + "fills": [ + { + "color": { + "r": 237, + "b": 237, + "g": 236, + "a": 1 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + }, + { + "color": { + "r": 151, + "b": 151, + "g": 145, + "a": 0.3 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 69, + "height": 28 + }, + "_id": "5fd942b92909e35cb5a9e914", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 69, + "height": 28 + } + }, + { + "shadows": [], + "name": "Title", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "79DB950D-0397-497A-8548-534DB9119B23", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 15, + "fontFace": "Roboto-Regular", + "textAlign": "center", + "color": { + "r": 85, + "b": 86, + "g": 77, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 5, + "x": 12, + "width": 45, + "height": 18 + }, + "_id": "5fd942b92909e35cb5a9e915", + "absoluteRect": { + "x": 12, + "y": 5, + "width": 45, + "height": 18 + } + } + ], + "componentNames": [], + "width": 69, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/69/28" + } + }, + "properties": [ + { + "id": "5fd9432d2909e35cb5a9e995", + "value": "Secondary" + }, + { + "id": "5fd943832909e35cb5a9e997", + "value": "Pressed" + } + ] + }, + { + "id": "5fd942b92909e35cb5a9e8fd", + "name": "Button / Secondary / Default", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "sketch", + "height": 28, + "layers": [ + { + "styleSourceId": "9B9568A0-C340-420D-A741-80591C706FB7", + "borderRadius": 2, + "rotation": 0, + "blendMode": "normal", + "shadows": [], + "styleName": "Secondary button/Secondary button Default", + "type": "shape", + "opacity": 1, + "sourceId": "0CADAD41-0131-48E7-9256-1AC681B4115E", + "fills": [ + { + "color": { + "r": 237, + "b": 237, + "g": 236, + "a": 1 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 69, + "height": 28 + }, + "_id": "5fd942b92909e35cb5a9e900", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 69, + "height": 28 + } + }, + { + "shadows": [], + "name": "Title", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 1, + "sourceId": "2DC26014-60CA-4F5A-B147-FFD659F74034", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 15, + "fontFace": "Roboto-Regular", + "textAlign": "center", + "color": { + "r": 85, + "b": 86, + "g": 77, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 5, + "x": 12, + "width": 45, + "height": 18 + }, + "_id": "5fd942b92909e35cb5a9e901", + "absoluteRect": { + "x": 12, + "y": 5, + "width": 45, + "height": 18 + } + } + ], + "componentNames": [], + "width": 69, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/69/28" + } + }, + "properties": [ + { + "id": "5fd9432d2909e35cb5a9e995", + "value": "Secondary" + }, + { + "id": "5fd943832909e35cb5a9e997", + "value": "Default" + } + ] + }, + { + "id": "5fd942b92909e35cb5a9e902", + "name": "Button / Secondary / Disabled 🐣", + "latestVersion": { + "snapshot": { + "assets": [], + "source": "sketch", + "height": 28, + "layers": [ + { + "styleSourceId": "CC4E61B6-5C0F-4A46-A098-4214146A339E", + "borderRadius": 2, + "rotation": 0, + "blendMode": "normal", + "shadows": [], + "styleName": "Secondary button/Secondary button Disabled", + "type": "shape", + "opacity": 1, + "sourceId": "8E3B2FC0-E710-41BE-A6F5-B343D536F16F", + "fills": [ + { + "color": { + "r": 237, + "b": 237, + "g": 236, + "a": 1 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "name": "Button bg", + "rect": { + "y": 0, + "x": 0, + "width": 69, + "height": 28 + }, + "_id": "5fd942b92909e35cb5a9e905", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 69, + "height": 28 + } + }, + { + "shadows": [], + "name": "Title", + "rotation": 0, + "blendMode": "normal", + "content": "Button", + "type": "text", + "opacity": 0.5, + "sourceId": "1C63B7AC-5FD6-4647-971A-D725EBB4CF45", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 15, + "fontFace": "Roboto-Regular", + "textAlign": "center", + "color": { + "r": 151, + "b": 151, + "g": 145, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 5, + "x": 12, + "width": 45, + "height": 18 + }, + "_id": "5fd942b92909e35cb5a9e906", + "absoluteRect": { + "x": 12, + "y": 5, + "width": 45, + "height": 18 + } + } + ], + "componentNames": [], + "width": 69, + "links": [], + "densityScale": 1, + "url": "https://placekitten.com/69/28" + } + }, + "properties": [ + { + "id": "5fd9432d2909e35cb5a9e995", + "value": "Secondary" + }, + { + "id": "5fd943832909e35cb5a9e997", + "value": "Disabled" + } + ] + } + ] + } +] \ No newline at end of file diff --git a/src/template/src/fixtures/components.json b/src/template/src/fixtures/components.json index 7f5e2f4..3990f0a 100644 --- a/src/template/src/fixtures/components.json +++ b/src/template/src/fixtures/components.json @@ -1,10 +1,948 @@ [ { - "name": "Simple Component", - "description": "" + "name": "Header", + "description": "", + "latestVersion": { + "snapshot": { + "assets": [ + { + "layerId": "7E3861F2-458C-4917-A698-962F2D05F508", + "layerName": " Logo", + "displayName": "logo", + "contents": [ + { + "url": "https://placekitten.com/200/299", + "density": "1x", + "format": "png" + }, + { + "url": "https://placekitten.com/200/299", + "density": "1x", + "format": "svg", + "optimized": { + "url": "https://placekitten.com/200/299", + "density": "1x", + "format": "svg", + "percent": 68 + } + }, + { + "url": "https://placekitten.com/200/299", + "density": "2x", + "format": "png" + }, + { + "url": "https://placekitten.com/200/299", + "density": "3x", + "format": "png" + } + ], + "_id": "5cb69a783fdf9e4002334764", + "size": { + "width": 32, + "height": 32 + }, + "lightness": "dark" + } + ], + "source": "sketch", + "height": 84, + "layers": [ + { + "borderRadius": 0, + "componentName": "Header bg / Orange", + "rotation": 0, + "layers": [], + "blendMode": "normal", + "interactionLevel": "bottom", + "rect": { + "y": 0, + "x": 0, + "width": 1024, + "height": 84 + }, + "type": "group", + "opacity": 1, + "sourceId": "9B5912B0-9043-450E-9830-DFB71382B34B", + "fills": [ + { + "color": { + "r": 253, + "b": 57, + "g": 189, + "a": 1 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "name": " Orange", + "shadows": [], + "_id": "5cb69a783fdf9e4002334753", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 1024, + "height": 84 + } + }, + { + "borderRadius": 0, + "componentName": "Icons / Logo", + "rotation": 0, + "layers": [ + { + "borders": [], + "rect": { + "y": 0, + "x": 0, + "width": 32, + "height": 32 + }, + "rotation": 0, + "layers": [ + { + "borderRadius": 0, + "shadows": [], + "rotation": 0, + "blendMode": "normal", + "type": "shape", + "opacity": 1, + "sourceId": "25B1FD06-178F-4901-B533-49D6D602D97F", + "fills": [ + { + "color": { + "r": 255, + "b": 255, + "g": 255, + "a": 1 + }, + "opacity": 1, + "fillType": "color" + } + ], + "exportable": false, + "borders": [], + "name": "Oval", + "rect": { + "y": 0, + "x": 0, + "width": 32, + "height": 32 + }, + "_id": "5cb69a783fdf9e4002334756", + "absoluteRect": { + "x": 12, + "y": 40, + "width": 32, + "height": 32 + } + }, + { + "borders": [], + "rect": { + "y": 1.038961038961039, + "x": 1.038961038961039, + "width": 29.92207792207792, + "height": 29.92207792207792 + }, + "rotation": 0, + "layers": [ + { + "borderRadius": 0, + "shadows": [], + "rotation": 0, + "blendMode": "normal", + "type": "shape", + "opacity": 1, + "sourceId": "090685FD-58E7-4771-AA1C-CC95CB5A51C6", + "fills": [ + { + "color": { + "r": 238, + "b": 35, + "g": 103, + "a": 1 + }, + "opacity": 1, + "fillType": "color" + } + ], + "exportable": false, + "borders": [], + "name": "Oval 1", + "rect": { + "y": 14.96103896103896, + "x": 0, + "width": 29.9220779220779, + "height": 14.96103896103896 + }, + "_id": "5cb69a783fdf9e4002334758", + "absoluteRect": { + "x": 13.03896103896104, + "y": 56, + "width": 29.9220779220779, + "height": 14.96103896103896 + } + }, + { + "borderRadius": 0, + "shadows": [], + "rotation": 0, + "blendMode": "normal", + "type": "shape", + "opacity": 1, + "sourceId": "046464D9-46C9-435D-829F-11A89045F225", + "fills": [ + { + "color": { + "r": 253, + "b": 57, + "g": 189, + "a": 1 + }, + "opacity": 1, + "fillType": "color" + } + ], + "exportable": false, + "borders": [], + "name": "Oval 1 Copy", + "rect": { + "y": 0, + "x": 0, + "width": 29.92207792207792, + "height": 14.96103896103896 + }, + "_id": "5cb69a783fdf9e4002334759", + "absoluteRect": { + "x": 13.03896103896104, + "y": 41.03896103896104, + "width": 29.92207792207792, + "height": 14.96103896103896 + } + }, + { + "borderRadius": 0, + "shadows": [], + "rotation": 0, + "blendMode": "normal", + "type": "shape", + "opacity": 1, + "sourceId": "FD5F8BED-E602-4876-AE7A-7D4073DFBAD0", + "fills": [ + { + "color": { + "r": 254, + "b": 51, + "g": 207, + "a": 1 + }, + "opacity": 1, + "fillType": "color" + } + ], + "exportable": false, + "borders": [], + "name": "Oval 2 Copy", + "rect": { + "y": 14.96103896103896, + "x": 0, + "width": 29.92207792207792, + "height": 9.044243891701518 + }, + "_id": "5cb69a783fdf9e400233475a", + "absoluteRect": { + "x": 13.03896103896104, + "y": 56, + "width": 29.92207792207792, + "height": 9.044243891701518 + } + }, + { + "borderRadius": 0, + "shadows": [], + "rotation": 0, + "blendMode": "normal", + "type": "shape", + "opacity": 1, + "sourceId": "4048E04C-29EC-4D04-AC15-8F9C0F386442", + "fills": [ + { + "color": { + "r": 246, + "b": 51, + "g": 152, + "a": 1 + }, + "opacity": 1, + "fillType": "color" + } + ], + "exportable": false, + "borders": [], + "name": "Oval 2", + "rect": { + "y": 6.170372000880511, + "x": 0, + "width": 29.92207792207792, + "height": 8.790666960158482 + }, + "_id": "5cb69a783fdf9e400233475b", + "absoluteRect": { + "x": 13.03896103896104, + "y": 47.20933303984155, + "width": 29.92207792207792, + "height": 8.790666960158482 + } + } + ], + "blendMode": "normal", + "type": "group", + "opacity": 1, + "sourceId": "F1DD6B18-4003-41ED-BC03-23F0034A60F9", + "fills": [], + "exportable": false, + "borderRadius": 0, + "name": "Group", + "shadows": [], + "_id": "5cb69a783fdf9e4002334757", + "absoluteRect": { + "x": 13.03896103896104, + "y": 41.03896103896104, + "width": 29.92207792207792, + "height": 29.92207792207792 + } + } + ], + "blendMode": "normal", + "type": "group", + "opacity": 1, + "sourceId": "D45E7D12-7EAA-4846-8A81-89EB701B56A2", + "fills": [], + "exportable": false, + "borderRadius": 0, + "name": "Group 13", + "shadows": [], + "_id": "5cb69a783fdf9e4002334755", + "absoluteRect": { + "x": 12, + "y": 40, + "width": 32, + "height": 32 + } + } + ], + "blendMode": "normal", + "interactionLevel": "top", + "rect": { + "y": 40, + "x": 12, + "width": 32, + "height": 32 + }, + "type": "group", + "opacity": 1, + "sourceId": "7E3861F2-458C-4917-A698-962F2D05F508", + "fills": [], + "exportable": true, + "borders": [], + "name": " Logo", + "shadows": [], + "_id": "5cb69a783fdf9e4002334754", + "absoluteRect": { + "x": 12, + "y": 40, + "width": 32, + "height": 32 + } + }, + { + "borderRadius": 0, + "componentName": "Header / Title / Small", + "rotation": 0, + "layers": [ + { + "shadows": [], + "name": "Title", + "rotation": 0, + "blendMode": "normal", + "content": "Title", + "type": "text", + "opacity": 1, + "sourceId": "816DF671-F304-45AD-B457-94D65357A553", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 5 + }, + "style": { + "fontSize": 14, + "fontFace": "OpenSans-Bold", + "textAlign": "center", + "color": { + "r": 255, + "b": 255, + "g": 255, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 0, + "x": 6, + "width": 72, + "height": 19 + }, + "_id": "5cb69a783fdf9e400233475d", + "absoluteRect": { + "x": 838, + "y": 53, + "width": 72, + "height": 19 + } + } + ], + "blendMode": "normal", + "interactionLevel": "bottom", + "rect": { + "y": 53, + "x": 832, + "width": 84, + "height": 31 + }, + "type": "group", + "opacity": 1, + "sourceId": "5CA70284-DF70-4553-9FEA-19FD728C0278", + "fills": [ + { + "color": { + "r": 151, + "b": 151, + "g": 145, + "a": 1 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "name": " Small", + "shadows": [], + "_id": "5cb69a783fdf9e400233475c", + "absoluteRect": { + "x": 832, + "y": 53, + "width": 84, + "height": 31 + } + }, + { + "borderRadius": 0, + "componentName": "Header / Title / Small", + "rotation": 0, + "layers": [ + { + "shadows": [], + "name": "Title", + "rotation": 0, + "blendMode": "normal", + "content": "Title", + "type": "text", + "opacity": 1, + "sourceId": "816DF671-F304-45AD-B457-94D65357A553", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 5 + }, + "style": { + "fontSize": 14, + "fontFace": "OpenSans-Bold", + "textAlign": "center", + "color": { + "r": 255, + "b": 255, + "g": 255, + "a": 1 + } + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 0, + "x": 6, + "width": 72, + "height": 19 + }, + "_id": "5cb69a783fdf9e400233475f", + "absoluteRect": { + "x": 922, + "y": 53, + "width": 72, + "height": 19 + } + } + ], + "blendMode": "normal", + "interactionLevel": "bottom", + "rect": { + "y": 53, + "x": 916, + "width": 84, + "height": 31 + }, + "type": "group", + "opacity": 1, + "sourceId": "5CA70284-DF70-4553-9FEA-19FD728C0278", + "fills": [ + { + "color": { + "r": 151, + "b": 151, + "g": 145, + "a": 1 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "name": " Small", + "shadows": [], + "_id": "5cb69a783fdf9e400233475e", + "absoluteRect": { + "x": 916, + "y": 53, + "width": 84, + "height": 31 + } + }, + { + "borderRadius": 0, + "componentName": "Header title / ", + "rotation": 0, + "layers": [ + { + "shadows": [], + "name": "Title", + "rotation": 0, + "blendMode": "normal", + "content": "Places", + "type": "text", + "opacity": 0.6, + "sourceId": "4ED300F5-22D4-4466-8334-F45DEA93ABB4", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 24, + "color": { + "r": 255, + "b": 255, + "g": 255, + "a": 1 + }, + "fontFace": "OpenSans-Bold" + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 0, + "x": 6, + "width": 93, + "height": 33 + }, + "_id": "5cb69a783fdf9e4002334761", + "absoluteRect": { + "x": 166, + "y": 39, + "width": 93, + "height": 33 + } + } + ], + "blendMode": "normal", + "interactionLevel": "bottom", + "rect": { + "y": 39, + "x": 160, + "width": 108, + "height": 45 + }, + "type": "group", + "opacity": 1, + "sourceId": "07BBA166-2A0D-44C3-A375-4F097D32540C", + "fills": [ + { + "color": { + "r": 151, + "b": 151, + "g": 145, + "a": 1 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "name": " ", + "shadows": [], + "_id": "5cb69a783fdf9e4002334760", + "absoluteRect": { + "x": 160, + "y": 39, + "width": 108, + "height": 45 + } + }, + { + "borderRadius": 0, + "componentName": "Header title / Selected", + "rotation": 0, + "layers": [ + { + "shadows": [], + "name": "Title", + "rotation": 0, + "blendMode": "normal", + "content": "Guides", + "type": "text", + "opacity": 1, + "sourceId": "6DC1D1B0-A8E6-4F42-A34A-7C5D938A1107", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 6 + }, + "style": { + "fontSize": 24, + "color": { + "r": 255, + "b": 255, + "g": 255, + "a": 1 + }, + "fontFace": "OpenSans-Bold" + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 0, + "x": 6, + "width": 93, + "height": 33 + }, + "_id": "5cb69a783fdf9e4002334763", + "absoluteRect": { + "x": 58, + "y": 39, + "width": 93, + "height": 33 + } + } + ], + "blendMode": "normal", + "interactionLevel": "bottom", + "rect": { + "y": 39, + "x": 52, + "width": 108, + "height": 45 + }, + "type": "group", + "opacity": 1, + "sourceId": "02EFBB68-FE0B-420B-8E25-A0C039C441D0", + "fills": [ + { + "color": { + "r": 151, + "b": 151, + "g": 145, + "a": 1 + }, + "fillType": "color", + "blendMode": "normal", + "opacity": 1 + } + ], + "exportable": false, + "borders": [], + "name": " Selected", + "shadows": [], + "_id": "5cb69a783fdf9e4002334762", + "absoluteRect": { + "x": 52, + "y": 39, + "width": 108, + "height": 45 + } + } + ], + "componentNames": [ + "Header / Title / Small", + "Header bg / Orange", + "Header title / ", + "Header title / Selected", + "Icons / Logo" + ], + "width": 1024, + "links": [], + "url": "https://placekitten.com/1024/84" + } + } }, { - "name": "Component with description", - "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lacus magna, elementum vel orci a, ornare molestie augue. Fusce semper pharetra augue ac condimentum. Suspendisse eget varius nulla. Vivamus feugiat ligula nec volutpat tincidunt. Curabitur iaculis purus convallis, scelerisque nulla vitae, condimentum ante. Curabitur vehicula nunc in massa congue, quis varius metus placerat. Integer feugiat, orci eu sagittis interdum, tortor nulla pulvinar mauris, egestas suscipit eros orci sit amet sem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus." + "name": "Search field", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lacus magna, elementum vel orci a, ornare molestie augue. Fusce semper pharetra augue ac condimentum. Suspendisse eget varius nulla. Vivamus feugiat ligula nec volutpat tincidunt. Curabitur iaculis purus convallis, scelerisque nulla vitae, condimentum ante. Curabitur vehicula nunc in massa congue, quis varius metus placerat. Integer feugiat, orci eu sagittis interdum, tortor nulla pulvinar mauris, egestas suscipit eros orci sit amet sem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.", + "latestVersion": { + "snapshot": { + "assets": [ + { + "layerId": "B1168488-6DDF-4E56-B8F7-00ABC3FCCEDF", + "layerName": "icSearch", + "displayName": "ic-search", + "contents": [ + { + "url": "https://placekitten.com/200/299", + "density": "3x", + "format": "png" + }, + { + "url": "https://placekitten.com/200/299", + "density": "2x", + "format": "png" + }, + { + "url": "https://placekitten.com/200/299", + "density": "1x", + "format": "png" + }, + { + "url": "https://placekitten.com/200/299", + "density": "1x", + "format": "svg", + "optimized": { + "url": "https://placekitten.com/200/299", + "density": "1x", + "format": "svg", + "percent": 76 + } + } + ], + "_id": "5cb69aad3fdf9e400233476d", + "size": { + "width": 16, + "height": 16 + }, + "lightness": "dark" + } + ], + "source": "sketch", + "height": 36, + "layers": [ + { + "borderRadius": 6, + "shadows": [], + "rotation": 0, + "blendMode": "normal", + "type": "shape", + "opacity": 1, + "sourceId": "C7734431-6C95-466F-9FED-75E060D0A2E5", + "fills": [ + { + "color": { + "r": 255, + "b": 255, + "g": 255, + "a": 1 + }, + "opacity": 1, + "fillType": "color" + } + ], + "exportable": false, + "borders": [ + { + "position": "inside", + "fillType": "color", + "thickness": 1, + "opacity": 1, + "color": { + "r": 237, + "b": 237, + "g": 236, + "a": 1 + } + } + ], + "name": "Search bar bg", + "rect": { + "y": 0, + "x": 0, + "width": 324, + "height": 36 + }, + "_id": "5cb69aad3fdf9e4002334769", + "absoluteRect": { + "x": 0, + "y": 0, + "width": 324, + "height": 36 + } + }, + { + "borderRadius": 0, + "componentName": "icSearch", + "rotation": 0, + "layers": [ + { + "borderRadius": 0, + "shadows": [], + "rotation": 0, + "blendMode": "normal", + "type": "shape", + "opacity": 1, + "sourceId": "67839DE5-4907-4CF4-99C9-F84BDFF7359B", + "fills": [ + { + "color": { + "r": 193, + "b": 193, + "g": 190, + "a": 1 + }, + "opacity": 1, + "fillType": "color" + } + ], + "exportable": false, + "borders": [], + "name": "icSearch", + "rect": { + "y": 0, + "x": 0, + "width": 16, + "height": 16 + }, + "_id": "5cb69aad3fdf9e400233476b", + "absoluteRect": { + "x": 10, + "y": 10, + "width": 16, + "height": 16 + } + } + ], + "blendMode": "normal", + "interactionLevel": "top", + "rect": { + "y": 10, + "x": 10, + "width": 16, + "height": 16 + }, + "type": "group", + "opacity": 1, + "sourceId": "B1168488-6DDF-4E56-B8F7-00ABC3FCCEDF", + "fills": [], + "exportable": true, + "borders": [], + "name": "icSearch", + "shadows": [], + "_id": "5cb69aad3fdf9e400233476a", + "absoluteRect": { + "x": 10, + "y": 10, + "width": 16, + "height": 16 + } + }, + { + "shadows": [], + "name": "Search for a…", + "rotation": 0, + "blendMode": "normal", + "content": "Search for a…", + "type": "text", + "opacity": 1, + "sourceId": "B89E4C60-77F1-48CE-8562-135D690E886A", + "fills": [], + "textStyles": [ + { + "range": { + "location": 0, + "length": 13 + }, + "style": { + "fontSize": 18, + "color": { + "r": 193, + "b": 193, + "g": 190, + "a": 1 + }, + "fontFace": "OpenSans" + } + } + ], + "exportable": false, + "borders": [], + "borderRadius": 0, + "rect": { + "y": 6, + "x": 32, + "width": 268, + "height": 24 + }, + "_id": "5cb69aad3fdf9e400233476c", + "absoluteRect": { + "x": 32, + "y": 6, + "width": 268, + "height": 24 + } + } + ], + "componentNames": [ + "icSearch" + ], + "width": 324, + "links": [], + "url": "https://placekitten.com/324/36" + } + } } ] \ No newline at end of file diff --git a/src/template/src/fixtures/index.js b/src/template/src/fixtures/index.js index 5c7d771..72c9c0a 100644 --- a/src/template/src/fixtures/index.js +++ b/src/template/src/fixtures/index.js @@ -1,8 +1,9 @@ -import { Context, Screen, Version, Component } from "@zeplin/extension-model"; +import { Context, Screen, Version, Component, ComponentVariant } from "@zeplin/extension-model"; import project from "./project.json"; import screensData from "./screens.json"; import componentsData from "./components.json"; +import componentVariantsData from "./componentVariants.json"; import versionData from "./version.json"; import { zeplin } from "../../package.json"; @@ -11,7 +12,12 @@ const defaultOptions = zeplin.options?.reduce((options, option) => { return options; }, {}); +const singleComponents = componentsData.map(data => new Component(data)); +const variantComponents = componentVariantsData.map(data => new ComponentVariant(data)).reduce( + (cs, variant) => cs.concat(variant.components), [] +); + export const context = new Context({ project, options: defaultOptions }); export const version = new Version(versionData); export const screens = screensData.map(data => new Screen(data)); -export const components = componentsData.map(data => new Component(data)); +export const components = singleComponents.concat(variantComponents); diff --git a/src/template/src/fixtures/version.json b/src/template/src/fixtures/version.json index 0e551cd..84627c5 100644 --- a/src/template/src/fixtures/version.json +++ b/src/template/src/fixtures/version.json @@ -10,7 +10,7 @@ "Simple Component", "Component with description" ], - "url": "https://cdn.zeplin.io/5e2ef1da1b3cdb167efd54f9/screens/B0E3646F-9ED1-4DE8-B83D-3AB7AF80B5DE.png", + "url": "https://placekitten.com/1024/960", "_id": "5e38085266ecb97b1faaa969", "density": "1x", "assets": [], diff --git a/src/template/src/index.test.js b/src/template/src/index.test.js index 72b8f63..02fef7d 100644 --- a/src/template/src/index.test.js +++ b/src/template/src/index.test.js @@ -64,7 +64,7 @@ screens.map(screen => { components.map(component => { describe(`Component \`${component.name}\``, () => { it("should generate code snippet", async () => { - const code = extension.component(context, version, component); + const code = extension.component(context, component.latestVersion, component); return expect(Promise.resolve(code)).resolves.toMatchSnapshot(); }); });