Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(PPDSC-2288): Flag documentation #358

Merged
merged 17 commits into from
Sep 6, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 23 additions & 10 deletions site/components/illustrations/components/flag-illustration.tsx
Original file line number Diff line number Diff line change
@@ -1,39 +1,52 @@
import React from 'react';
import {Svg} from '../svg';
import {Path} from '../path';
import {Rect} from '../rect';
import {Svg} from '../svg';

export const FlagIllustration: React.FC = () => (
<Svg
width="1344"
height="759"
viewBox="0 0 1344 759"
width="1490"
height="838"
viewBox="0 0 1490 838"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<Rect width="1344" height="759" fill="illustrationBackground020" />
<Rect width="1490" height="838" fill="illustrationBackground020" />
<Path
d="M774 386C774 352.863 747.137 326 714 326H521C482.892 326 452 356.892 452 395V575C452 581.627 457.373 587 464 587H714C747.137 587 774 560.137 774 527V386Z"
d="M813 426C813 392.863 786.137 366 753 366H560C521.892 366 491 396.892 491 435V615C491 621.627 496.373 627 503 627H753C786.137 627 813 600.137 813 567V426Z"
fill="illustrationPalette060"
/>
<Path
d="M552 458H774V558.5L748.5 529H582C565.431 529 552 515.569 552 499V458Z"
d="M591 498H813V598.5L787.5 569H621C604.431 569 591 555.569 591 539V498Z"
fill="illustrationPalette070"
/>
<mask id="path-4-inside-1_983_55878" fill="white">
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M986.796 211C997.449 211 1002.82 223.847 995.337 231.429L873.751 354.624C869.166 359.269 869.135 366.728 873.682 371.412L995.737 497.141C1003.12 504.751 997.732 517.5 987.126 517.5H663.202C661.412 517.5 659.636 517.669 657.897 518H617.5C602.864 518 591 529.864 591 544.5V271C591 237.863 617.863 211 651 211H986.796ZM591.041 545.991L591 546V544.5C591 545 591.014 545.497 591.041 545.991Z"
/>
</mask>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M947.796 171C958.449 171 963.82 183.847 956.337 191.429L834.751 314.624C830.166 319.269 830.135 326.728 834.682 331.412L956.737 457.141C964.124 464.751 958.732 477.5 948.126 477.5H624.202C622.412 477.5 620.636 477.669 618.897 478H578.5C563.864 478 552 489.864 552 504.5V231C552 197.863 578.863 171 612 171H947.796ZM552.041 505.991L552 506V504.5C552 505 552.014 505.497 552.041 505.991Z"
d="M986.796 211C997.449 211 1002.82 223.847 995.337 231.429L873.751 354.624C869.166 359.269 869.135 366.728 873.682 371.412L995.737 497.141C1003.12 504.751 997.732 517.5 987.126 517.5H663.202C661.412 517.5 659.636 517.669 657.897 518H617.5C602.864 518 591 529.864 591 544.5V271C591 237.863 617.863 211 651 211H986.796ZM591.041 545.991L591 546V544.5C591 545 591.014 545.497 591.041 545.991Z"
fill="illustrationPalette040"
/>
<Path
d="M995.337 231.429L994.626 230.727L994.626 230.727L995.337 231.429ZM873.751 354.624L873.039 353.921L873.039 353.921L873.751 354.624ZM873.682 371.412L874.399 370.715L874.399 370.715L873.682 371.412ZM995.737 497.141L995.019 497.838L995.737 497.141ZM657.897 518V519H657.991L658.084 518.982L657.897 518ZM591 546H590V547.246L591.217 546.976L591 546ZM591.041 545.991L591.258 546.967L592.087 546.783L592.04 545.935L591.041 545.991ZM996.049 232.132C1004.16 223.918 998.337 210 986.796 210V212C996.562 212 1001.49 223.777 994.626 230.727L996.049 232.132ZM874.463 355.326L996.049 232.132L994.626 230.727L873.039 353.921L874.463 355.326ZM874.399 370.715C870.231 366.422 870.26 359.585 874.463 355.326L873.039 353.921C868.072 358.954 868.039 367.034 872.964 372.108L874.399 370.715ZM996.454 496.445L874.399 370.715L872.964 372.108L995.019 497.838L996.454 496.445ZM987.126 518.5C998.615 518.5 1004.46 504.688 996.454 496.445L995.019 497.838C1001.79 504.813 996.848 516.5 987.126 516.5V518.5ZM663.202 518.5H987.126V516.5H663.202V518.5ZM658.084 518.982C659.762 518.663 661.475 518.5 663.202 518.5V516.5C661.349 516.5 659.511 516.675 657.71 517.018L658.084 518.982ZM617.5 519H657.897V517H617.5V519ZM592 544.5C592 530.417 603.417 519 617.5 519V517C602.312 517 590 529.312 590 544.5H592ZM590 271V544.5H592V271H590ZM651 210C617.311 210 590 237.311 590 271H592C592 238.415 618.415 212 651 212V210ZM986.796 210H651V212H986.796V210ZM591.217 546.976L591.258 546.967L590.824 545.015L590.783 545.024L591.217 546.976ZM590 544.5V546H592V544.5H590ZM592.04 545.935C592.013 545.46 592 544.982 592 544.5H590C590 545.019 590.014 545.534 590.043 546.046L592.04 545.935Z"
fill="#577FFB"
mask="url(#path-4-inside-1_983_55878)"
/>
<Rect
x="541"
y="529"
x="580"
y="569"
width="233"
height="58"
rx="29"
fill="illustrationPalette060"
/>
</Svg>
);

export default FlagIllustration;
153 changes: 153 additions & 0 deletions site/components/illustrations/components/flag/anatomy.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
import React from 'react';
import {Svg} from '../../svg';
import {Path} from '../../path';
import {Rect} from '../../rect';

export const Anatomy: React.FC = () => (
<Svg
width="1490"
height="838"
viewBox="0 0 1490 838"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<Rect width="1490" height="838" fill="illustrationBackground010" />
<Rect
x="445"
y="329"
width="608"
height="184"
fill="illustrationInterface020"
/>
<Rect x="445.5" y="329.5" width="607" height="183" stroke="#AEBFFF" />
<Path
d="M597 420C597 442.091 579.091 460 557 460C534.909 460 517 442.091 517 420C517 397.909 534.909 380 557 380C579.091 380 597 397.909 597 420Z"
fill="illustrationAnatomySubtle"
/>
<Path
d="M597 420C597 442.091 579.091 460 557 460C534.909 460 517 442.091 517 420C517 397.909 534.909 380 557 380C579.091 380 597 397.909 597 420Z"
fill="illustrationAnatomySubtle"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M557 459.5C578.815 459.5 596.5 441.815 596.5 420C596.5 398.185 578.815 380.5 557 380.5C535.185 380.5 517.5 398.185 517.5 420C517.5 441.815 535.185 459.5 557 459.5ZM557 460C579.091 460 597 442.091 597 420C597 397.909 579.091 380 557 380C534.909 380 517 397.909 517 420C517 442.091 534.909 460 557 460Z"
fill="illustrationAnatomySubtle"
/>
<Path
d="M981 419C981 441.091 963.091 459 941 459C918.909 459 901 441.091 901 419C901 396.909 918.909 379 941 379C963.091 379 981 396.909 981 419Z"
fill="illustrationAnatomySubtle"
/>
<Path
d="M981 419C981 441.091 963.091 459 941 459C918.909 459 901 441.091 901 419C901 396.909 918.909 379 941 379C963.091 379 981 396.909 981 419Z"
fill="illustrationAnatomySubtle"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M941 458.5C962.815 458.5 980.5 440.815 980.5 419C980.5 397.185 962.815 379.5 941 379.5C919.185 379.5 901.5 397.185 901.5 419C901.5 440.815 919.185 458.5 941 458.5ZM941 459C963.091 459 981 441.091 981 419C981 396.909 963.091 379 941 379C918.909 379 901 396.909 901 419C901 441.091 918.909 459 941 459Z"
fill="illustrationAnatomySubtle"
/>
<Rect
x="630"
y="664"
width="38.5134"
height="38.5134"
rx="19.2567"
fill="illustrationPalette040"
/>
<Path
d="M645.119 687.388C646.469 686.263 647.546 685.327 648.348 684.581C649.15 683.822 649.818 683.034 650.352 682.218C650.887 681.402 651.154 680.6 651.154 679.812C651.154 679.094 650.986 678.531 650.648 678.123C650.31 677.715 649.79 677.511 649.086 677.511C648.383 677.511 647.841 677.751 647.461 678.229C647.081 678.693 646.884 679.333 646.87 680.15H644C644.056 678.461 644.556 677.181 645.498 676.308C646.455 675.436 647.665 675 649.128 675C650.732 675 651.963 675.429 652.822 676.287C653.68 677.132 654.109 678.25 654.109 679.643C654.109 680.74 653.814 681.789 653.223 682.788C652.632 683.787 651.956 684.659 651.197 685.405C650.437 686.136 649.445 687.023 648.221 688.064H654.447V690.512H644.021V688.317L645.119 687.388Z"
fill="white"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M648 664V572H650V664H648Z"
fill="illustrationPalette040"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M645 572.571V570.714H938.65C940.092 570.714 941.26 569.467 941.26 567.928V463.5H943V567.928C943 570.493 941.053 572.571 938.65 572.571H645Z"
fill="illustrationPalette040"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M649 572.5V570.643H560.35C558.908 570.643 557.74 569.396 557.74 567.857V465H556V567.857C556 570.421 557.947 572.5 560.35 572.5H649Z"
fill="illustrationPalette040"
/>
<Path
d="M659.398 438.188H676.481V446.339H649V395.084H659.398V438.188Z"
fill="illustrationPalette040"
/>
<Path
d="M680.416 425.852C680.416 421.74 681.233 418.093 682.867 414.911C684.55 411.729 686.803 409.281 689.625 407.567C692.497 405.854 695.691 404.997 699.206 404.997C702.276 404.997 704.95 405.609 707.228 406.833C709.555 408.057 711.412 409.599 712.798 411.459V405.658H723.27V446.339H712.798V440.391C711.461 442.3 709.605 443.891 707.228 445.164C704.901 446.388 702.202 447 699.132 447C695.666 447 692.497 446.119 689.625 444.356C686.803 442.594 684.55 440.122 682.867 436.94C681.233 433.709 680.416 430.013 680.416 425.852ZM712.798 425.999C712.798 423.502 712.303 421.372 711.313 419.61C710.322 417.799 708.986 416.428 707.302 415.498C705.619 414.519 703.811 414.029 701.88 414.029C699.949 414.029 698.167 414.494 696.533 415.425C694.899 416.355 693.562 417.725 692.522 419.537C691.532 421.299 691.037 423.404 691.037 425.852C691.037 428.3 691.532 430.453 692.522 432.314C693.562 434.125 694.899 435.52 696.533 436.499C698.216 437.478 699.999 437.968 701.88 437.968C703.811 437.968 705.619 437.503 707.302 436.573C708.986 435.594 710.322 434.223 711.313 432.461C712.303 430.649 712.798 428.495 712.798 425.999Z"
fill="illustrationPalette040"
/>
<Path
d="M743.824 411.606C745.161 409.648 746.993 408.057 749.32 406.833C751.697 405.609 754.395 404.997 757.416 404.997C760.931 404.997 764.1 405.854 766.922 407.567C769.794 409.281 772.047 411.729 773.681 414.911C775.365 418.044 776.206 421.691 776.206 425.852C776.206 430.013 775.365 433.709 773.681 436.94C772.047 440.122 769.794 442.594 766.922 444.356C764.1 446.119 760.931 447 757.416 447C754.346 447 751.647 446.413 749.32 445.238C747.042 444.014 745.21 442.447 743.824 440.538V446.339H733.426V392H743.824V411.606ZM765.586 425.852C765.586 423.404 765.066 421.299 764.026 419.537C763.036 417.725 761.699 416.355 760.015 415.425C758.381 414.494 756.599 414.029 754.668 414.029C752.786 414.029 751.004 414.519 749.32 415.498C747.686 416.428 746.349 417.799 745.309 419.61C744.319 421.421 743.824 423.551 743.824 425.999C743.824 428.446 744.319 430.576 745.309 432.387C746.349 434.198 747.686 435.594 749.32 436.573C751.004 437.503 752.786 437.968 754.668 437.968C756.599 437.968 758.381 437.478 760.015 436.499C761.699 435.52 763.036 434.125 764.026 432.314C765.066 430.502 765.586 428.348 765.586 425.852Z"
fill="illustrationPalette040"
/>
<Path
d="M822.012 425.117C822.012 426.586 821.913 427.908 821.715 429.083H791.635C791.883 432.02 792.923 434.321 794.755 435.985C796.587 437.65 798.84 438.482 801.513 438.482C805.375 438.482 808.124 436.842 809.758 433.562H820.973C819.784 437.478 817.507 440.709 814.14 443.255C810.773 445.752 806.638 447 801.736 447C797.775 447 794.21 446.143 791.041 444.43C787.922 442.668 785.471 440.195 783.688 437.013C781.955 433.831 781.089 430.16 781.089 425.999C781.089 421.789 781.955 418.093 783.688 414.911C785.421 411.729 787.847 409.281 790.967 407.567C794.086 405.854 797.676 404.997 801.736 404.997C805.648 404.997 809.139 405.83 812.208 407.494C815.328 409.158 817.729 411.533 819.413 414.617C821.146 417.652 822.012 421.152 822.012 425.117ZM811.243 422.18C811.193 419.537 810.228 417.432 808.346 415.865C806.465 414.25 804.162 413.442 801.439 413.442C798.864 413.442 796.686 414.225 794.903 415.792C793.17 417.309 792.106 419.439 791.71 422.18H811.243Z"
fill="illustrationPalette040"
/>
<Path d="M840 392V446.339H829.602V392H840Z" fill="illustrationPalette040" />
<Path
d="M625 353C625 356.314 622.314 359 619 359C615.686 359 613 356.314 613 353C613 349.686 615.686 347 619 347C622.314 347 625 349.686 625 353Z"
fill="illustrationPalette040"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M620 166L620 350L618 350L618 166L620 166Z"
fill="illustrationPalette040"
/>
<Rect
x="600"
y="129"
width="38.5134"
height="38.5134"
rx="19.2567"
fill="illustrationPalette040"
/>
<Path
d="M616 142.801V140H621.086V155.832H618.047V142.801H616Z"
fill="white"
/>
<Path
d="M786 403C786 406.314 783.314 409 780 409C776.686 409 774 406.314 774 403C774 399.686 776.686 397 780 397C783.314 397 786 399.686 786 403Z"
fill="illustrationPalette040"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M781 166L781 401L779 401L779 166L781 166Z"
fill="illustrationPalette040"
/>
<Rect
x="761"
y="129"
width="38.5134"
height="38.5134"
rx="19.2567"
fill="illustrationPalette040"
/>
<Path
d="M775.211 144.411C775.281 143.004 775.774 141.921 776.688 141.161C777.617 140.387 778.834 140 780.339 140C781.367 140 782.246 140.183 782.978 140.549C783.709 140.9 784.258 141.386 784.624 142.005C785.004 142.61 785.193 143.299 785.193 144.073C785.193 144.96 784.961 145.712 784.497 146.331C784.047 146.936 783.505 147.344 782.872 147.555V147.64C783.688 147.893 784.321 148.343 784.771 148.991C785.236 149.638 785.468 150.468 785.468 151.481C785.468 152.325 785.271 153.078 784.877 153.739C784.497 154.4 783.927 154.921 783.167 155.301C782.422 155.667 781.521 155.85 780.466 155.85C778.876 155.85 777.582 155.449 776.583 154.647C775.584 153.845 775.056 152.663 775 151.101H777.87C777.898 151.79 778.131 152.346 778.567 152.768C779.017 153.176 779.629 153.38 780.403 153.38C781.12 153.38 781.669 153.183 782.049 152.789C782.443 152.381 782.64 151.861 782.64 151.228C782.64 150.383 782.373 149.778 781.838 149.413C781.303 149.047 780.473 148.864 779.348 148.864H778.736V146.437H779.348C781.345 146.437 782.344 145.769 782.344 144.432C782.344 143.827 782.161 143.356 781.796 143.018C781.444 142.68 780.93 142.511 780.255 142.511C779.594 142.511 779.08 142.694 778.714 143.06C778.363 143.412 778.159 143.862 778.102 144.411H775.211Z"
fill="white"
/>
<Path
d="M948 460C948 463.314 945.314 466 942 466C938.686 466 936 463.314 936 460C936 456.686 938.686 454 942 454C945.314 454 948 456.686 948 460Z"
fill="illustrationPalette040"
/>
<Path
d="M563 460C563 463.314 560.314 466 557 466C553.686 466 551 463.314 551 460C551 456.686 553.686 454 557 454C560.314 454 563 456.686 563 460Z"
fill="illustrationPalette040"
/>
</Svg>
);

export default Anatomy;
Loading