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

exports[`Box layout 1`] = `
Object {
  "box": Object {
    "axisX1": 0,
    "axisX2": 110,
    "axisY": 30,
    "height": 60,
    "width": 110,
  },
  "children": Array [
    Object {
      "box": Object {
        "axisX1": 5,
        "axisX2": 95,
        "axisY": 10,
        "height": 50,
        "width": 100,
      },
    },
  ],
  "props": Object {
    "contentTransform": "translate(5 5)",
    "height": 60,
    "labelTransform": "translate(0 NaN)",
    "rectTransform": "translate(0 0)",
    "width": 110,
  },
}
`;

exports[`Box layout using axis anchors from child 1`] = `
Object {
  "box": Object {
    "axisX1": 10,
    "axisX2": 100,
    "axisY": 15,
    "height": 60,
    "width": 110,
  },
  "children": Array [
    Object {
      "box": Object {
        "axisX1": 5,
        "axisX2": 95,
        "axisY": 10,
        "height": 50,
        "width": 100,
      },
    },
  ],
  "props": Object {
    "contentTransform": "translate(5 5)",
    "height": 60,
    "labelTransform": "translate(0 NaN)",
    "rectTransform": "translate(0 0)",
    "useAnchors": true,
    "width": 110,
  },
}
`;

exports[`Box layout with a label and using axis anchors from child 1`] = `
Object {
  "box": Object {
    "axisX1": 55,
    "axisX2": 145,
    "axisY": 25,
    "height": 70,
    "width": 200,
  },
  "children": Array [
    Object {
      "box": Object {
        "axisX1": 5,
        "axisX2": 95,
        "axisY": 10,
        "height": 50,
        "width": 100,
      },
    },
  ],
  "props": Object {
    "contentTransform": "translate(50 15)",
    "height": 60,
    "label": "Test label",
    "labelTransform": "translate(0 10)",
    "rectTransform": "translate(0 10)",
    "useAnchors": true,
    "width": 200,
  },
}
`;

exports[`Box layout with a label that is narrower than the box 1`] = `
Object {
  "box": Object {
    "axisX1": 0,
    "axisX2": 110,
    "axisY": 40,
    "height": 70,
    "width": 110,
  },
  "children": Array [
    Object {
      "box": Object {
        "axisX1": 5,
        "axisX2": 95,
        "axisY": 10,
        "height": 50,
        "width": 100,
      },
    },
  ],
  "props": Object {
    "contentTransform": "translate(5 15)",
    "height": 60,
    "label": "Test label",
    "labelTransform": "translate(0 10)",
    "rectTransform": "translate(0 10)",
    "width": 110,
  },
}
`;

exports[`Box layout with a label that is wider than the box 1`] = `
Object {
  "box": Object {
    "axisX1": 0,
    "axisX2": 200,
    "axisY": 40,
    "height": 70,
    "width": 200,
  },
  "children": Array [
    Object {
      "box": Object {
        "axisX1": 5,
        "axisX2": 95,
        "axisY": 10,
        "height": 50,
        "width": 100,
      },
    },
  ],
  "props": Object {
    "contentTransform": "translate(50 15)",
    "height": 60,
    "label": "Test label",
    "labelTransform": "translate(0 10)",
    "rectTransform": "translate(0 10)",
    "width": 200,
  },
}
`;

exports[`Box rendering 1`] = `
<Fragment>
  <rect
    rx={3}
    ry={3}
  />
  <g>
    Example
  </g>
</Fragment>
`;

exports[`Box rendering with a corner radius 1`] = `
<Fragment>
  <rect
    rx={5}
    ry={5}
  />
  <g>
    Example
  </g>
</Fragment>
`;

exports[`Box rendering with a label 1`] = `
<Fragment>
  <rect
    rx={3}
    ry={3}
  />
  <text
    style={
      Object {
        "fontFamily": "Arial",
        "fontSize": "12px",
      }
    }
  >
    Test box
  </text>
  <g>
    Example
  </g>
</Fragment>
`;

exports[`Box rendering with props from layout 1`] = `
<Fragment>
  <rect
    height={50}
    rx={3}
    ry={3}
    style={
      Object {
        "fill": "#dae9e5",
        "stroke": "#6b6659",
        "strokeWidth": "1px",
      }
    }
    transform="RECT TRANSFORM"
    width={100}
  />
  <text
    style={
      Object {
        "fontFamily": "Arial",
        "fontSize": "12px",
      }
    }
    transform="LABEL TRANSFORM"
  >
    Test box
  </text>
  <g
    transform="CONTENT TRANSFORM"
  >
    Example
  </g>
</Fragment>
`;

exports[`Box themes rendering a "anchor" Box 1`] = `
<Fragment>
  <rect
    rx={3}
    ry={3}
    style={
      Object {
        "fill": "#6b6659",
      }
    }
  />
  <g>
    Example
  </g>
</Fragment>
`;

exports[`Box themes rendering a "capture" Box 1`] = `
<Fragment>
  <rect
    rx={3}
    ry={3}
    style={
      Object {
        "fillOpacity": 0,
        "stroke": "#908c83",
        "strokeDasharray": "6,2",
        "strokeWidth": "2px",
      }
    }
  />
  <g>
    Example
  </g>
</Fragment>
`;

exports[`Box themes rendering a "charClass" Box 1`] = `
<Fragment>
  <rect
    rx={3}
    ry={3}
    style={
      Object {
        "fill": "#cbcbba",
      }
    }
  />
  <g>
    Example
  </g>
</Fragment>
`;

exports[`Box themes rendering a "escape" Box 1`] = `
<Fragment>
  <rect
    rx={3}
    ry={3}
    style={
      Object {
        "fill": "#bada55",
        "stroke": "#6b6659",
        "strokeWidth": "1px",
      }
    }
  />
  <g>
    Example
  </g>
</Fragment>
`;

exports[`Box themes rendering a "literal" Box 1`] = `
<Fragment>
  <rect
    rx={3}
    ry={3}
    style={
      Object {
        "fill": "#dae9e5",
        "stroke": "#6b6659",
        "strokeWidth": "1px",
      }
    }
  />
  <g>
    Example
  </g>
</Fragment>
`;