36 lines
3.5 KiB
XML
36 lines
3.5 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="720" viewBox="0 0 1200 720" role="img" aria-labelledby="title desc">
|
|
<title id="title">Четыре слоя контракта компонента кнопки</title>
|
|
<desc id="desc">Центральная primary button получает отдельные слои token names, required states, semantic name role state и usage inventory. Visual payload вынесен пунктиром, потому что не доказывает результат проверки.</desc>
|
|
<rect width="1200" height="720" fill="#F7F9FC"/>
|
|
<text x="65" y="78" fill="#102A43" font-family="Arial, sans-serif" font-size="34" font-weight="700">Контракт не смешивает четыре ответственности</text>
|
|
<g font-family="Arial, sans-serif">
|
|
<rect x="430" y="250" width="340" height="190" rx="24" fill="#2457D6"/>
|
|
<text x="510" y="315" fill="#FFFFFF" font-size="30" font-weight="700">Primary button</text>
|
|
<text x="493" y="358" fill="#D9E9FF" font-size="21">один control contract</text>
|
|
<rect x="70" y="165" width="275" height="170" rx="18" fill="#E6F0FF" stroke="#2457D6" stroke-width="3"/>
|
|
<text x="102" y="213" fill="#102A43" font-size="24" font-weight="700">1. Tokens</text>
|
|
<text x="102" y="254" fill="#243B53" font-size="18">named values</text>
|
|
<text x="102" y="286" fill="#243B53" font-size="18">не владеют state</text>
|
|
<rect x="855" y="165" width="275" height="170" rx="18" fill="#E8FFF6" stroke="#1F9D73" stroke-width="3"/>
|
|
<text x="887" y="213" fill="#102A43" font-size="24" font-weight="700">2. States</text>
|
|
<text x="887" y="254" fill="#243B53" font-size="18">default · hover</text>
|
|
<text x="887" y="286" fill="#243B53" font-size="18">focus · disabled · loading</text>
|
|
<rect x="70" y="465" width="275" height="170" rx="18" fill="#F4E9FF" stroke="#805AD5" stroke-width="3"/>
|
|
<text x="102" y="513" fill="#102A43" font-size="24" font-weight="700">3. Semantics</text>
|
|
<text x="102" y="554" fill="#243B53" font-size="18">name · role · state</text>
|
|
<text x="102" y="586" fill="#243B53" font-size="18">declared, not observed</text>
|
|
<rect x="855" y="465" width="275" height="170" rx="18" fill="#FFF6DD" stroke="#D69E2E" stroke-width="3"/>
|
|
<text x="887" y="513" fill="#102A43" font-size="24" font-weight="700">4. Inventory</text>
|
|
<text x="887" y="554" fill="#243B53" font-size="18">known usage only</text>
|
|
<text x="887" y="586" fill="#243B53" font-size="18">not repository search</text>
|
|
<path d="M345 250H415" stroke="#2457D6" stroke-width="5"/><path d="M405 237l20 13-20 13" fill="#2457D6"/>
|
|
<path d="M855 250H785" stroke="#1F9D73" stroke-width="5"/><path d="M795 237l-20 13 20 13" fill="#1F9D73"/>
|
|
<path d="M345 550H415" stroke="#805AD5" stroke-width="5"/><path d="M405 537l20 13-20 13" fill="#805AD5"/>
|
|
<path d="M855 550H785" stroke="#D69E2E" stroke-width="5"/><path d="M795 537l-20 13 20 13" fill="#D69E2E"/>
|
|
<rect x="438" y="510" width="324" height="94" rx="14" fill="#FFFFFF" stroke="#486581" stroke-width="2" stroke-dasharray="8 7"/>
|
|
<text x="472" y="550" fill="#243B53" font-size="20" font-weight="700">Visual payload</text>
|
|
<text x="472" y="581" fill="#486581" font-size="16">input for later test; no result</text>
|
|
</g>
|
|
<text x="65" y="682" fill="#486581" font-family="Arial, sans-serif" font-size="18">Реальный DOM, browser tree и screenshot должны проверяться отдельным инструментом и отдельным артефактом.</text>
|
|
</svg>
|
