Design Studio

Design Studio allows you to quickly design, test and deploy DO application.
It gives you a lot of capabilities without the need to code.

Requirements to DO target

Target should have conventional folders and files structure
CSS variables listed in src/styles/studio-variables.less should meet available branding/components variables:

body {
  --base-body-background: #f6f6f6;
  --base-border-color: #dde0ec;
  --base-brand-color: #017aff;
  --base-brand-color-contrast: #ffffff;
  --base-color: #465a6a;
  --base-disabled-color: #d6e5f8;
  --base-error-color: #e44343;
  --base-focused-color: #017aff;
  --base-label-color: #8893aa;
  --base-success-color: #1ea03f;

  --base-font-family: 'Inter UI', sans-serif;
  --base-font-size: 16px;
  --base-font-weight: 400;
  --base-letter-spacing: normal;
  --base-line-height: 19px;

  --base-logo: url('/assets/logo-desktop.svg');
  --base-header-logo: url('/assets/logo-mobile.svg');

  --base-form-background: #ffffff;
  --base-form-color: var(--base-color);
  --base-form-border-radius: 7px;
  --base-form-box-shadow: 0 11px 14px -10px #aec1f7;
}

Layout components should have property isLayout set to true in order to properly propagate changes in component properties

src/layouts/main.yml

components:
  footer: !include ../components/footer.yml
!component as: LayoutWithSidebar
isLayout: true # Required for DS to understand how to change properties in nested layout items
items:
  !property name: items
footer:
  - !ref components: footer

Application localization should be done using nested translation keys for more convinient work with translation tools in Design Studio
For all page to properly work in preview mode, use flowExport studio settings key and describe export data for each route, e.g.:

{
  "calculator": {
    "loanPurposeList": {
      "Business": "Business",
      "Personal": "Personal"
    }
  },
  "employment-info": {
    "employmentTypeList": {
      "Employed": "Employed",
      "Self-Employed": "Self-Employed"
    }
  }
}

Design Studio settings available in application configuration

Parameter	Description
`country`	Used to define global formats (currency, date format, phone number mask etc.)
`flowExport`	Mocked flow export to display pages in DesignStudio correctly
`logo`	Logo to be displayed in projects list
`name`	Project name to be displayed in DesignStudio, `title` will be used as a default value
`previewUrl`	Link to preview environment

Example configuration

title: "Zenoo Demo Project"
...
studioSettings:
  country: "Mexico"
  flowExport: !include ./flowExport.json
  logo: "/assets/logo.png"
  name: "ZenooBank"
  previewUrl: "https://onboarding.zenoo.com/"