Skip to content

Commit

Permalink
docs(PPDSC-2290): Audio player documentation (#353)
Browse files Browse the repository at this point in the history 
* docs(PPDSC-2290): Audio player documentation ui.
  • Loading branch information
@Srinivasan-Ramasamy
Srinivasan-Ramasamy authored Sep 6, 2022
1 parent c6e5ac1 commit 9d8c650
Show file tree
Hide file tree
Showing 33 changed files with 8,710 additions and 62 deletions.
163 changes: 103 additions & 60 deletions site/components/illustrations/components/audio-player-illustration.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,95 +1,138 @@
import React from 'react';
import {getSSRId} from 'newskit';
import {Svg} from '../svg';
import {Path} from '../path';
import {Rect} from '../rect';
import {Circle} from '../circle';
import {Svg} from '../svg';

export const AudioPlayerIllustration: React.FC = () => {
const mask0 = getSSRId();
const mask1 = getSSRId();
const mask2 = getSSRId();

return (
<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" />
<Circle cx="672.5" cy="379.5" r="187.5" fill="illustrationPalette050" />
<Rect width="1490" height="838" fill="illustrationBackground020" />
<mask
id={mask0}
mask-type="alpha"
maskUnits="userSpaceOnUse"
x="466"
y="174"
width="413"
height="412"
>
<Path
d="M619.097 181.501C509.228 210.94 443.972 323.668 473.344 433.285C502.716 542.902 615.593 607.899 725.462 578.46C835.331 549.02 900.587 436.293 871.216 326.675C841.844 217.058 728.967 152.062 619.097 181.501Z"
fill="white"
/>
</mask>
<g mask={`url(#${mask0})`}>
<Path
d="M619.097 181.501C509.228 210.94 443.972 323.668 473.344 433.285C502.716 542.902 615.593 607.899 725.462 578.46C835.331 549.02 900.587 436.293 871.216 326.675C841.844 217.058 728.967 152.062 619.097 181.501Z"
fill="illustrationInterface080"
/>
</g>
<mask
id={mask1}
mask-type="alpha"
maskUnits="userSpaceOnUse"
x="466"
y="174"
x="533"
y="225"
width="413"
height="412"
>
<Path
d="M619.097 181.501C509.228 210.94 443.972 323.668 473.344 433.285C502.716 542.902 615.593 607.899 725.462 578.46C835.331 549.02 900.587 436.293 871.216 326.675C841.844 217.058 728.967 152.062 619.097 181.501Z"
fill="white"
/>
</mask>
<g mask={`url(#${mask1})`}>
<Path
d="M619.097 181.501C509.228 210.94 443.972 323.668 473.344 433.285C502.716 542.902 615.593 607.899 725.462 578.46C835.331 549.02 900.587 436.293 871.216 326.675C841.844 217.058 728.967 152.062 619.097 181.501Z"
fill="illustrationPalette060"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M886.162 346.106C867.471 237.879 807.247 212.784 805.86 212.042C765.329 190.353 676.778 150.216 614.397 172.615C552.016 195.015 489.525 328.375 554.968 392.686C614.106 450.801 603.956 516.088 645.647 539.731C687.339 563.375 746.731 565.202 803.226 537.92C859.72 510.639 904.853 454.333 886.162 346.106Z"
fill="illustrationPalette050"
/>
<mask id="path-2-inside-1_1003_33761" fill="white">
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M540.182 484.284C510.81 374.667 576.066 261.94 685.935 232.5C795.804 203.061 908.682 268.058 938.054 377.675C967.425 487.292 902.169 600.02 792.3 629.459C682.431 658.898 569.553 593.902 540.182 484.284ZM644.657 368.429L722.756 424.964C726.865 427.939 726.865 434.061 722.756 437.036L644.657 493.571C639.73 497.138 632.837 493.618 632.837 487.536V374.464C632.837 368.382 639.73 364.862 644.657 368.429ZM769.837 374C767.628 374 765.837 375.791 765.837 378V483C765.837 485.209 767.628 487 769.837 487H791.837C794.047 487 795.837 485.209 795.837 483V378C795.837 375.791 794.047 374 791.837 374H769.837ZM819.837 378C819.837 375.791 821.628 374 823.837 374H845.837C848.047 374 849.837 375.791 849.837 378V483C849.837 485.209 848.047 487 845.837 487H823.837C821.628 487 819.837 485.209 819.837 483V378Z"
/>
</mask>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M888.055 236.891C935.526 304.051 916.762 349.295 916.417 350.424C906.336 383.413 892.838 429.044 847.724 450.316C802.609 471.589 729.552 450.788 728.019 450.235C697.678 439.293 697.838 388.622 679.338 356.59C659.463 322.176 643.891 292.481 653.554 257.843C663.216 223.205 708.51 198.865 742.095 179.481C774.841 160.581 840.583 169.731 888.055 236.891Z"
fill="illustrationPalette040"
d="M540.182 484.284C510.81 374.667 576.066 261.94 685.935 232.5C795.804 203.061 908.682 268.058 938.054 377.675C967.425 487.292 902.169 600.02 792.3 629.459C682.431 658.898 569.553 593.902 540.182 484.284ZM644.657 368.429L722.756 424.964C726.865 427.939 726.865 434.061 722.756 437.036L644.657 493.571C639.73 497.138 632.837 493.618 632.837 487.536V374.464C632.837 368.382 639.73 364.862 644.657 368.429ZM769.837 374C767.628 374 765.837 375.791 765.837 378V483C765.837 485.209 767.628 487 769.837 487H791.837C794.047 487 795.837 485.209 795.837 483V378C795.837 375.791 794.047 374 791.837 374H769.837ZM819.837 378C819.837 375.791 821.628 374 823.837 374H845.837C848.047 374 849.837 375.791 849.837 378V483C849.837 485.209 848.047 487 845.837 487H823.837C821.628 487 819.837 485.209 819.837 483V378Z"
fill="white"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M903.968 233.418C931.211 271.958 920.442 297.922 920.244 298.57C914.459 317.501 906.713 343.687 880.824 355.895C854.934 368.103 813.01 356.166 812.13 355.848C794.718 349.569 794.81 320.491 784.193 302.109C772.787 282.359 763.852 265.319 769.397 245.441C774.942 225.564 800.934 211.596 820.207 200.472C838.999 189.626 876.726 194.877 903.968 233.418Z"
fill="illustrationPalette030"
d="M685.935 232.5L686.194 233.466L686.194 233.466L685.935 232.5ZM540.182 484.284L541.148 484.026L541.148 484.026L540.182 484.284ZM938.054 377.675L939.019 377.416L939.019 377.416L938.054 377.675ZM792.3 629.459L792.041 628.493L792.041 628.493L792.3 629.459ZM722.756 424.964L723.342 424.154L723.342 424.154L722.756 424.964ZM644.657 368.429L645.243 367.618L645.243 367.618L644.657 368.429ZM722.756 437.036L722.169 436.226L722.169 436.226L722.756 437.036ZM644.657 493.571L644.071 492.761L644.071 492.761L644.657 493.571ZM685.676 231.534C575.276 261.116 509.7 374.391 539.216 484.543L541.148 484.026C511.919 374.944 576.856 262.763 686.194 233.466L685.676 231.534ZM939.019 377.416C909.504 267.263 796.077 201.953 685.676 231.534L686.194 233.466C795.532 204.169 907.859 268.852 937.088 377.934L939.019 377.416ZM792.559 630.425C902.959 600.843 968.535 487.569 939.019 377.416L937.088 377.934C966.316 487.015 901.379 599.196 792.041 628.493L792.559 630.425ZM539.216 484.543C568.731 594.696 682.158 660.007 792.559 630.425L792.041 628.493C682.703 657.79 570.376 593.107 541.148 484.026L539.216 484.543ZM723.342 424.154L645.243 367.618L644.071 369.239L722.169 425.774L723.342 424.154ZM723.342 437.846C728.003 434.472 728.003 427.528 723.342 424.154L722.169 425.774C725.727 428.35 725.727 433.65 722.169 436.226L723.342 437.846ZM645.243 494.381L723.342 437.846L722.169 436.226L644.071 492.761L645.243 494.381ZM631.837 487.536C631.837 494.434 639.656 498.426 645.243 494.381L644.071 492.761C639.805 495.849 633.837 492.801 633.837 487.536H631.837ZM631.837 374.464V487.536H633.837V374.464H631.837ZM645.243 367.618C639.656 363.573 631.837 367.566 631.837 374.464H633.837C633.837 369.198 639.805 366.151 644.071 369.239L645.243 367.618ZM766.837 378C766.837 376.343 768.181 375 769.837 375V373C767.076 373 764.837 375.239 764.837 378H766.837ZM766.837 483V378H764.837V483H766.837ZM769.837 486C768.181 486 766.837 484.657 766.837 483H764.837C764.837 485.761 767.076 488 769.837 488V486ZM791.837 486H769.837V488H791.837V486ZM794.837 483C794.837 484.657 793.494 486 791.837 486V488C794.599 488 796.837 485.761 796.837 483H794.837ZM794.837 378V483H796.837V378H794.837ZM791.837 375C793.494 375 794.837 376.343 794.837 378H796.837C796.837 375.238 794.599 373 791.837 373V375ZM769.837 375H791.837V373H769.837V375ZM823.837 373C821.076 373 818.837 375.239 818.837 378H820.837C820.837 376.343 822.181 375 823.837 375V373ZM845.837 373H823.837V375H845.837V373ZM850.837 378C850.837 375.238 848.599 373 845.837 373V375C847.494 375 848.837 376.343 848.837 378H850.837ZM850.837 483V378H848.837V483H850.837ZM845.837 488C848.599 488 850.837 485.761 850.837 483H848.837C848.837 484.657 847.494 486 845.837 486V488ZM823.837 488H845.837V486H823.837V488ZM818.837 483C818.837 485.761 821.076 488 823.837 488V486C822.181 486 820.837 484.657 820.837 483H818.837ZM818.837 378V483H820.837V378H818.837Z"
fill="#2B4AAB"
mask="url(#path-2-inside-1_1003_33761)"
/>
</mask>
<g mask={`url(#${mask0})`}>
<mask
id={mask1}
mask-type="alpha"
maskUnits="userSpaceOnUse"
x="533"
y="225"
width="413"
height="412"
>
<Path
d="M540.827 484.155C511.527 374.806 576.624 262.352 686.227 232.983C795.831 203.615 908.433 268.455 937.733 377.804C967.033 487.154 901.937 599.608 792.333 628.976C682.729 658.344 570.127 593.504 540.827 484.155Z"
fill="white"
stroke="#E0E7FF"
/>
</mask>
<g mask={`url(#${mask1})`}>
<Path
d="M686.098 232.5C576.228 261.94 510.972 374.667 540.344 484.284C569.716 593.902 682.593 658.898 792.462 629.459C902.332 600.02 967.588 487.292 938.216 377.675C908.844 268.058 795.967 203.061 686.098 232.5Z"
fill="illustrationPalette070"
/>
</g>
<mask
id={mask2}
mask-type="alpha"
maskUnits="userSpaceOnUse"
x="533"
y="225"
width="413"
height="412"
>
<Path
d="M540.827 484.155C511.527 374.806 576.624 262.352 686.227 232.983C795.831 203.615 908.433 268.455 937.733 377.804C967.033 487.154 901.937 599.608 792.333 628.976C682.729 658.344 570.127 593.504 540.827 484.155Z"
fill="white"
stroke="#E0E7FF"
/>
</mask>
<g mask={`url(#${mask2})`}>
<Path
d="M686.098 232.5C576.228 261.94 510.972 374.667 540.344 484.284C569.716 593.902 682.593 658.898 792.462 629.459C902.332 600.02 967.588 487.292 938.216 377.675C908.844 268.058 795.967 203.061 686.098 232.5Z"
fill="illustrationPalette070"
/>
<Path
d="M872.624 263.482C872.666 263.505 872.76 263.548 872.903 263.616C875.16 264.67 889.694 271.463 906.147 290.097C923.649 309.919 943.339 343.164 952.669 397.19C962.001 451.222 955.392 492.24 939.444 523.138C923.496 554.037 898.181 574.865 870.008 588.47C813.639 615.691 754.422 613.846 712.894 590.296C692.865 578.937 684.893 557.883 675.232 532.37C674.929 531.57 674.624 530.766 674.318 529.958C664.248 503.407 651.97 472.467 622.319 443.329C589.797 411.37 589.01 362.193 604.221 318.096C611.823 296.06 623.409 275.333 636.979 258.723C650.553 242.107 666.086 229.644 681.567 224.085C712.609 212.939 750.218 217.34 785.186 227.276C820.14 237.208 852.375 252.647 872.624 263.482Z"
fill="illustrationPalette060"
stroke="#446BE4"
/>
<Path
d="M982.939 401.277C982.949 401.243 982.976 401.17 983.017 401.058C983.66 399.303 987.791 388.014 986.668 369.448C985.474 349.698 978.331 321.686 954.647 288.179C907.276 221.162 841.802 212.18 809.346 230.913C807.519 231.967 805.657 233.036 803.77 234.12C788.295 243.008 771.04 252.918 756.158 264.337C739.455 277.155 725.823 291.816 721.036 308.976C711.437 343.385 726.881 372.9 746.772 407.34C751.423 415.393 754.894 424.606 757.958 434.042C759.352 438.333 760.662 442.676 761.961 446.98C762.091 447.409 762.22 447.838 762.35 448.266C763.777 452.992 765.199 457.66 766.712 462.161C772.781 480.21 780.266 495.382 795.189 500.764C795.911 501.025 814.518 506.356 838.582 508.963C862.656 511.571 892.083 511.439 914.511 500.863C958.914 479.926 972.554 435.273 982.613 402.346C982.722 401.988 982.831 401.632 982.939 401.277Z"
fill="illustrationPalette050"
stroke="#446BE4"
/>
<Path
d="M986.767 349.424C986.773 349.404 986.788 349.362 986.812 349.298C987.18 348.291 989.539 341.845 988.898 331.233C988.215 319.941 984.131 303.904 970.561 284.706C943.419 246.308 905.96 241.226 887.458 251.905C886.409 252.51 885.341 253.123 884.258 253.745C875.376 258.847 865.487 264.526 856.959 271.07C847.385 278.417 839.607 286.795 836.879 296.575C831.398 316.223 840.207 333.084 851.627 352.858C854.308 357.5 856.305 362.803 858.065 368.223C858.865 370.687 859.618 373.182 860.363 375.651C860.438 375.898 860.512 376.144 860.586 376.39C861.406 379.102 862.221 381.777 863.088 384.357C866.572 394.719 870.841 403.327 879.3 406.378L879.304 406.379L879.314 406.382L879.351 406.394C879.381 406.403 879.423 406.416 879.474 406.431C879.577 406.462 879.719 406.503 879.898 406.554C880.256 406.654 880.761 406.792 881.399 406.958C882.674 407.289 884.478 407.732 886.701 408.217C891.147 409.187 897.261 410.324 904.153 411.071C917.959 412.567 934.796 412.485 947.611 406.442C973.007 394.467 980.81 368.924 986.586 350.014C986.647 349.817 986.707 349.62 986.767 349.424Z"
fill="illustrationPalette040"
stroke="#577FFB"
/>
</g>
</g>
<Circle cx="288.5" cy="191.5" r="87.5" fill="illustrationPalette030" />
<Circle cx="997" cy="454" r="60" fill="illustrationPalette070" />
<Circle cx="399" cy="562" r="38" fill="illustrationPalette070" />
<Circle cx="566" cy="104" r="16" fill="illustrationPalette070" />
<Circle cx="1151.5" cy="215.5" r="23.5" fill="illustrationPalette020" />
<Circle cx="1120" cy="631" r="18" fill="illustrationPalette040" />
<Circle cx="191.5" cy="434.5" r="9.5" fill="illustrationPalette020" />
<Circle
cx="355.5"
cy="242.5"
r="87"
fill="illustrationPalette030"
stroke="#87A4FC"
/>
<Circle cx="1064" cy="505" r="60" fill="illustrationPalette070" />
<Circle cx="466" cy="613" r="38" fill="illustrationPalette070" />
<Circle cx="633" cy="155" r="16" fill="illustrationPalette070" />
<Circle cx="1218.5" cy="266.5" r="23.5" fill="illustrationPalette020" />
<Circle
cx="1187"
cy="682"
r="17.5"
fill="illustrationPalette040"
stroke="#577FFB"
/>
<Circle cx="258.5" cy="485.5" r="9.5" fill="illustrationPalette020" />
<Path
d="M655.918 373.964L577.819 317.429C572.893 313.862 566 317.382 566 323.464L566 436.536C566 442.618 572.893 446.138 577.819 442.571L655.918 386.036C660.027 383.061 660.027 376.939 655.918 373.964Z"
fillRule="evenodd"
clipRule="evenodd"
d="M722.918 424.964L644.819 368.429C639.893 364.862 633 368.382 633 374.464L633 487.536C633 493.618 639.893 497.138 644.819 493.571L722.918 437.036C727.027 434.061 727.027 427.939 722.918 424.964ZM766 378C766 375.791 767.791 374 770 374H792C794.209 374 796 375.791 796 378V483C796 485.209 794.209 487 792 487H770C767.791 487 766 485.209 766 483V378ZM824 374C821.791 374 820 375.791 820 378V483C820 485.209 821.791 487 824 487H846C848.209 487 850 485.209 850 483V378C850 375.791 848.209 374 846 374H824Z"
fill="white"
/>
<Rect x="699" y="323" width="30" height="113" rx="4" fill="white" />
<Rect x="753" y="323" width="30" height="113" rx="4" fill="white" />
</Svg>
);
};

export default AudioPlayerIllustration;
Loading

0 comments on commit 9d8c650

Please sign in to comment.