Betterzon/doku/Frontend_Components_Diagram.drawio

<mxfile host="app.diagrams.net" modified="2020-11-21T14:29:34.626Z" agent="5.0 (Windows)" etag="ss7xjs7FesZQh2QN3Gut" version="13.8.6" type="github">
  <diagram id="FyC4D4z9-ciyvm6mCPSM" name="Page-1">
    <mxGraphModel dx="982" dy="554" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <mxCell id="4B3KDj_cxHq1nRbI7J67-1" value="Landing / Home - Page" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=26;fillColor=none;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;" vertex="1" parent="1">
          <mxGeometry x="130" y="40" width="150" height="40" as="geometry" />
        </mxCell>
        <mxCell id="4B3KDj_cxHq1nRbI7J67-5" value="Search / PLP" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=26;fillColor=none;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;" vertex="1" parent="1">
          <mxGeometry x="360" y="40" width="160" height="104" as="geometry" />
        </mxCell>
        <mxCell id="4B3KDj_cxHq1nRbI7J67-6" value="- searchTerm" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=top;spacingLeft=4;spacingRight=4;overflow=hidden;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;" vertex="1" parent="4B3KDj_cxHq1nRbI7J67-5">
          <mxGeometry y="26" width="160" height="26" as="geometry" />
        </mxCell>
        <mxCell id="4B3KDj_cxHq1nRbI7J67-7" value="- numberOfProducts" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=top;spacingLeft=4;spacingRight=4;overflow=hidden;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;" vertex="1" parent="4B3KDj_cxHq1nRbI7J67-5">
          <mxGeometry y="52" width="160" height="26" as="geometry" />
        </mxCell>
        <mxCell id="4B3KDj_cxHq1nRbI7J67-8" value="- sortBy" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=top;spacingLeft=4;spacingRight=4;overflow=hidden;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;" vertex="1" parent="4B3KDj_cxHq1nRbI7J67-5">
          <mxGeometry y="78" width="160" height="26" as="geometry" />
        </mxCell>
        <mxCell id="4B3KDj_cxHq1nRbI7J67-9" value="PDP" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=26;fillColor=none;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;" vertex="1" parent="1">
          <mxGeometry x="600" y="40" width="160" height="52" as="geometry" />
        </mxCell>
        <mxCell id="4B3KDj_cxHq1nRbI7J67-10" value="- product_id" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=top;spacingLeft=4;spacingRight=4;overflow=hidden;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;" vertex="1" parent="4B3KDj_cxHq1nRbI7J67-9">
          <mxGeometry y="26" width="160" height="26" as="geometry" />
        </mxCell>
        <mxCell id="4B3KDj_cxHq1nRbI7J67-13" value="" style="endArrow=none;dashed=1;html=1;" edge="1" parent="1">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint y="200" as="sourcePoint" />
            <mxPoint x="820" y="200" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="4B3KDj_cxHq1nRbI7J67-23" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" edge="1" parent="1" source="4B3KDj_cxHq1nRbI7J67-14">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="200" y="80" as="targetPoint" />
            <Array as="points">
              <mxPoint x="200" y="120" />
              <mxPoint x="200" y="120" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="4B3KDj_cxHq1nRbI7J67-24" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" edge="1" parent="1" source="4B3KDj_cxHq1nRbI7J67-14">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="360" y="144" as="targetPoint" />
            <Array as="points">
              <mxPoint x="200" y="180" />
              <mxPoint x="360" y="180" />
              <mxPoint x="360" y="144" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="4B3KDj_cxHq1nRbI7J67-25" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" edge="1" parent="1" source="4B3KDj_cxHq1nRbI7J67-14">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="600" y="92" as="targetPoint" />
            <Array as="points">
              <mxPoint x="200" y="180" />
              <mxPoint x="600" y="180" />
              <mxPoint x="600" y="92" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="4B3KDj_cxHq1nRbI7J67-14" value="&lt;div&gt;Navigation&lt;/div&gt;&lt;div&gt;Bar / Header&lt;br&gt;&lt;/div&gt;" style="html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
          <mxGeometry x="160" y="240" width="80" height="40" as="geometry" />
        </mxCell>
        <mxCell id="4B3KDj_cxHq1nRbI7J67-20" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=1;entryDx=0;entryDy=0;" edge="1" parent="1" source="4B3KDj_cxHq1nRbI7J67-15" target="4B3KDj_cxHq1nRbI7J67-14">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="4B3KDj_cxHq1nRbI7J67-15" value="&lt;div&gt;Profile&lt;/div&gt;&lt;div&gt;Popover&lt;br&gt;&lt;/div&gt;" style="html=1;" vertex="1" parent="1">
          <mxGeometry x="280" y="320" width="80" height="40" as="geometry" />
        </mxCell>
        <mxCell id="4B3KDj_cxHq1nRbI7J67-21" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="4B3KDj_cxHq1nRbI7J67-16" target="4B3KDj_cxHq1nRbI7J67-14">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="4B3KDj_cxHq1nRbI7J67-26" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" edge="1" parent="1" source="4B3KDj_cxHq1nRbI7J67-16">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="220" y="80" as="targetPoint" />
            <Array as="points">
              <mxPoint x="440" y="190" />
              <mxPoint x="220" y="190" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="4B3KDj_cxHq1nRbI7J67-16" value="&lt;div&gt;Search&lt;/div&gt;&lt;div&gt;Field&lt;br&gt;&lt;/div&gt;" style="html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
          <mxGeometry x="400" y="240" width="80" height="40" as="geometry" />
        </mxCell>
        <mxCell id="4B3KDj_cxHq1nRbI7J67-27" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.75;entryY=1;entryDx=0;entryDy=0;fillColor=#f8cecc;strokeColor=#b85450;" edge="1" parent="1" source="4B3KDj_cxHq1nRbI7J67-18" target="4B3KDj_cxHq1nRbI7J67-1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="560" y="170" />
              <mxPoint x="243" y="170" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="4B3KDj_cxHq1nRbI7J67-28" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=1;entryDx=0;entryDy=0;fillColor=#f8cecc;strokeColor=#b85450;" edge="1" parent="1" source="4B3KDj_cxHq1nRbI7J67-18" target="4B3KDj_cxHq1nRbI7J67-5">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="560" y="170" />
              <mxPoint x="440" y="170" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="4B3KDj_cxHq1nRbI7J67-18" value="&lt;div&gt;Product&lt;/div&gt;&lt;div&gt;List&lt;br&gt;&lt;/div&gt;" style="html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
          <mxGeometry x="520" y="240" width="80" height="40" as="geometry" />
        </mxCell>
        <mxCell id="4B3KDj_cxHq1nRbI7J67-29" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=1;entryDx=0;entryDy=0;fillColor=#dae8fc;strokeColor=#6c8ebf;" edge="1" parent="1" source="4B3KDj_cxHq1nRbI7J67-19" target="4B3KDj_cxHq1nRbI7J67-9">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="4B3KDj_cxHq1nRbI7J67-30" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.839;entryY=1.004;entryDx=0;entryDy=0;entryPerimeter=0;fillColor=#dae8fc;strokeColor=#6c8ebf;" edge="1" parent="1" source="4B3KDj_cxHq1nRbI7J67-19" target="4B3KDj_cxHq1nRbI7J67-8">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="680" y="160" />
              <mxPoint x="494" y="160" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="4B3KDj_cxHq1nRbI7J67-31" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" edge="1" parent="1" source="4B3KDj_cxHq1nRbI7J67-19">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="260" y="80" as="targetPoint" />
            <Array as="points">
              <mxPoint x="680" y="160" />
              <mxPoint x="260" y="160" />
              <mxPoint x="260" y="80" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="4B3KDj_cxHq1nRbI7J67-19" value="&lt;div&gt;Page&lt;/div&gt;&lt;div&gt;Footer&lt;/div&gt;" style="html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
          <mxGeometry x="640" y="240" width="80" height="40" as="geometry" />
        </mxCell>
        <mxCell id="4B3KDj_cxHq1nRbI7J67-32" value="Pages" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
          <mxGeometry x="10" y="72" width="40" height="20" as="geometry" />
        </mxCell>
        <mxCell id="4B3KDj_cxHq1nRbI7J67-33" value="Components" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
          <mxGeometry x="20" y="250" width="40" height="20" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>