// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`SmartUiComponent disable all inputs 1`] = `
<Stack
  className="widgetRendererContainer"
  tokens={
    Object {
      "childrenGap": 10,
    }
  }
>
  <StackItem />
  <div
    key="description"
  >
    <Stack
      className="widgetRendererContainer"
      tokens={
        Object {
          "childrenGap": 10,
        }
      }
    >
      <StackItem>
        <Stack>
          <Stack>
            <Text
              aria-labelledby="description-label"
              id="description-text-display"
              style={
                Object {
                  "whiteSpace": "pre-line",
                }
              }
            >
              this is an example description text.
               
              <StyledLinkBase
                href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
                target="_blank"
              >
                Click here for more information.
              </StyledLinkBase>
            </Text>
          </Stack>
        </Stack>
      </StackItem>
    </Stack>
  </div>
  <div
    key="throughput"
  >
    <Stack
      className="widgetRendererContainer"
      tokens={
        Object {
          "childrenGap": 10,
        }
      }
    >
      <StackItem>
        <Stack>
          <Stack>
            <StyledLabelBase
              id="throughput-label"
            >
              <ToolTipLabelComponent
                label="Throughput (input)"
              />
            </StyledLabelBase>
            <Stack
              styles={
                Object {
                  "root": Object {
                    "width": 400,
                  },
                }
              }
              tokens={
                Object {
                  "childrenGap": 2,
                }
              }
            >
              <StyledSpinButton
                aria-labelledby="throughput-label"
                ariaLabel="Throughput (input)"
                disabled={true}
                id="throughput-spinner-input"
                labelPosition={0}
                max={500}
                min={400}
                onDecrement={[Function]}
                onIncrement={[Function]}
                onValidate={[Function]}
                step={10}
              />
            </Stack>
          </Stack>
        </Stack>
      </StackItem>
    </Stack>
  </div>
  <div
    key="throughput2"
  >
    <Stack
      className="widgetRendererContainer"
      tokens={
        Object {
          "childrenGap": 10,
        }
      }
    >
      <StackItem>
        <Stack>
          <Stack>
            <StyledLabelBase
              id="throughput2-label"
            >
              <ToolTipLabelComponent
                label="Throughput (Slider)"
              />
            </StyledLabelBase>
            <div
              id="throughput2-slider-input"
            >
              <StyledSliderBase
                ariaLabel="Throughput (Slider)"
                disabled={true}
                max={500}
                min={400}
                onChange={[Function]}
                step={10}
                styles={
                  Object {
                    "root": Object {
                      "width": 400,
                    },
                    "valueLabel": Object {
                      "color": "#393939",
                      "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
                      "fontSize": 12,
                    },
                  }
                }
              />
            </div>
          </Stack>
        </Stack>
      </StackItem>
    </Stack>
  </div>
  <div
    key="throughput3"
  >
    <Stack
      className="widgetRendererContainer"
      tokens={
        Object {
          "childrenGap": 10,
        }
      }
    >
      <StackItem>
        <StyledMessageBar
          messageBarType={1}
        >
          Error: 
          label, truelabel and falselabel are required for boolean input 'throughput3'
        </StyledMessageBar>
      </StackItem>
    </Stack>
  </div>
  <div
    key="containerId"
  >
    <Stack
      className="widgetRendererContainer"
      tokens={
        Object {
          "childrenGap": 10,
        }
      }
    >
      <StackItem>
        <Stack>
          <Stack>
            <StyledLabelBase
              id="containerId-label"
            >
              <ToolTipLabelComponent
                label="Container id"
              />
            </StyledLabelBase>
            <StyledTextFieldBase
              aria-labelledby="containerId-label"
              disabled={true}
              id="containerId-textField-input"
              onChange={[Function]}
              styles={
                Object {
                  "root": Object {
                    "width": 400,
                  },
                }
              }
              type="text"
              value=""
            />
          </Stack>
        </Stack>
      </StackItem>
    </Stack>
  </div>
  <div
    key="analyticalStore"
  >
    <Stack
      className="widgetRendererContainer"
      tokens={
        Object {
          "childrenGap": 10,
        }
      }
    >
      <StackItem>
        <Stack>
          <Stack>
            <StyledLabelBase
              id="analyticalStore-label"
            >
              <ToolTipLabelComponent
                label="Analytical Store"
              />
            </StyledLabelBase>
            <StyledToggleBase
              aria-labelledby="analyticalStore-label"
              checked={false}
              disabled={true}
              id="analyticalStore-toggle-input"
              offText="Disabled"
              onChange={[Function]}
              onText="Enabled"
              styles={
                Object {
                  "root": Object {
                    "width": 400,
                  },
                }
              }
            />
          </Stack>
        </Stack>
      </StackItem>
    </Stack>
  </div>
  <div
    key="database"
  >
    <Stack
      className="widgetRendererContainer"
      tokens={
        Object {
          "childrenGap": 10,
        }
      }
    >
      <StackItem>
        <Stack>
          <Stack>
            <StyledLabelBase
              id="database-label"
            >
              <ToolTipLabelComponent
                label="Database"
              />
            </StyledLabelBase>
            <Dropdown
              aria-labelledby="database-label"
              disabled={true}
              id="database-dropdown-input"
              onChange={[Function]}
              options={
                Array [
                  Object {
                    "key": "db1",
                    "text": "Database 1",
                  },
                  Object {
                    "key": "db2",
                    "text": "Database 2",
                  },
                  Object {
                    "key": "db3",
                    "text": "Database 3",
                  },
                ]
              }
              selectedKey="db2"
              styles={
                Object {
                  "dropdown": Object {
                    "color": "#393939",
                    "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
                    "fontSize": 12,
                  },
                  "root": Object {
                    "width": 400,
                  },
                }
              }
            />
          </Stack>
        </Stack>
      </StackItem>
    </Stack>
  </div>
</Stack>
`;

exports[`SmartUiComponent should render and honor input's hidden, disabled state 1`] = `
<Stack
  className="widgetRendererContainer"
  tokens={
    Object {
      "childrenGap": 10,
    }
  }
>
  <StackItem />
  <div
    key="description"
  >
    <Stack
      className="widgetRendererContainer"
      tokens={
        Object {
          "childrenGap": 10,
        }
      }
    >
      <StackItem>
        <Stack>
          <Stack>
            <Text
              aria-labelledby="description-label"
              id="description-text-display"
              style={
                Object {
                  "whiteSpace": "pre-line",
                }
              }
            >
              this is an example description text.
               
              <StyledLinkBase
                href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
                target="_blank"
              >
                Click here for more information.
              </StyledLinkBase>
            </Text>
          </Stack>
        </Stack>
      </StackItem>
    </Stack>
  </div>
  <div
    key="throughput"
  >
    <Stack
      className="widgetRendererContainer"
      tokens={
        Object {
          "childrenGap": 10,
        }
      }
    >
      <StackItem>
        <Stack>
          <Stack>
            <StyledLabelBase
              id="throughput-label"
            >
              <ToolTipLabelComponent
                label="Throughput (input)"
              />
            </StyledLabelBase>
            <Stack
              styles={
                Object {
                  "root": Object {
                    "width": 400,
                  },
                }
              }
              tokens={
                Object {
                  "childrenGap": 2,
                }
              }
            >
              <StyledSpinButton
                aria-labelledby="throughput-label"
                ariaLabel="Throughput (input)"
                id="throughput-spinner-input"
                labelPosition={0}
                max={500}
                min={400}
                onDecrement={[Function]}
                onIncrement={[Function]}
                onValidate={[Function]}
                step={10}
              />
            </Stack>
          </Stack>
        </Stack>
      </StackItem>
    </Stack>
  </div>
  <div
    key="throughput2"
  >
    <Stack
      className="widgetRendererContainer"
      tokens={
        Object {
          "childrenGap": 10,
        }
      }
    >
      <StackItem>
        <Stack>
          <Stack>
            <StyledLabelBase
              id="throughput2-label"
            >
              <ToolTipLabelComponent
                label="Throughput (Slider)"
              />
            </StyledLabelBase>
            <div
              id="throughput2-slider-input"
            >
              <StyledSliderBase
                ariaLabel="Throughput (Slider)"
                max={500}
                min={400}
                onChange={[Function]}
                step={10}
                styles={
                  Object {
                    "root": Object {
                      "width": 400,
                    },
                    "valueLabel": Object {
                      "color": "#393939",
                      "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
                      "fontSize": 12,
                    },
                  }
                }
              />
            </div>
          </Stack>
        </Stack>
      </StackItem>
    </Stack>
  </div>
  <div
    key="throughput3"
  >
    <Stack
      className="widgetRendererContainer"
      tokens={
        Object {
          "childrenGap": 10,
        }
      }
    >
      <StackItem>
        <StyledMessageBar
          messageBarType={1}
        >
          Error: 
          label, truelabel and falselabel are required for boolean input 'throughput3'
        </StyledMessageBar>
      </StackItem>
    </Stack>
  </div>
  <div
    key="containerId"
  >
    <Stack
      className="widgetRendererContainer"
      tokens={
        Object {
          "childrenGap": 10,
        }
      }
    >
      <StackItem>
        <Stack>
          <Stack>
            <StyledLabelBase
              id="containerId-label"
            >
              <ToolTipLabelComponent
                label="Container id"
              />
            </StyledLabelBase>
            <StyledTextFieldBase
              aria-labelledby="containerId-label"
              id="containerId-textField-input"
              onChange={[Function]}
              styles={
                Object {
                  "root": Object {
                    "width": 400,
                  },
                }
              }
              type="text"
              value=""
            />
          </Stack>
        </Stack>
      </StackItem>
    </Stack>
  </div>
  <div
    key="analyticalStore"
  >
    <Stack
      className="widgetRendererContainer"
      tokens={
        Object {
          "childrenGap": 10,
        }
      }
    >
      <StackItem>
        <Stack>
          <Stack>
            <StyledLabelBase
              id="analyticalStore-label"
            >
              <ToolTipLabelComponent
                label="Analytical Store"
              />
            </StyledLabelBase>
            <StyledToggleBase
              aria-labelledby="analyticalStore-label"
              checked={false}
              id="analyticalStore-toggle-input"
              offText="Disabled"
              onChange={[Function]}
              onText="Enabled"
              styles={
                Object {
                  "root": Object {
                    "width": 400,
                  },
                }
              }
            />
          </Stack>
        </Stack>
      </StackItem>
    </Stack>
  </div>
  <div
    key="database"
  >
    <Stack
      className="widgetRendererContainer"
      tokens={
        Object {
          "childrenGap": 10,
        }
      }
    >
      <StackItem>
        <Stack>
          <Stack>
            <StyledLabelBase
              id="database-label"
            >
              <ToolTipLabelComponent
                label="Database"
              />
            </StyledLabelBase>
            <Dropdown
              aria-labelledby="database-label"
              id="database-dropdown-input"
              onChange={[Function]}
              options={
                Array [
                  Object {
                    "key": "db1",
                    "text": "Database 1",
                  },
                  Object {
                    "key": "db2",
                    "text": "Database 2",
                  },
                  Object {
                    "key": "db3",
                    "text": "Database 3",
                  },
                ]
              }
              selectedKey="db2"
              styles={
                Object {
                  "dropdown": Object {
                    "color": "#393939",
                    "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
                    "fontSize": 12,
                  },
                  "root": Object {
                    "width": 400,
                  },
                }
              }
            />
          </Stack>
        </Stack>
      </StackItem>
    </Stack>
  </div>
</Stack>
`;
