Skip to content

Commit

Permalink
docs(PPDSC-2190): Patterns telephone number and input components pages (
Browse files Browse the repository at this point in the history 
#267)

* docs(PPDSC-2190): Patterns telephone number and input components pages.
  • Loading branch information
@Srinivasan-Ramasamy
Srinivasan-Ramasamy authored Jul 12, 2022
1 parent e2a6b24 commit 0032c6b
Show file tree
Hide file tree
Showing 17 changed files with 3,112 additions and 69 deletions.
158 changes: 158 additions & 0 deletions site/components/illustrations/patterns/forms/input-components/checkbox/checkbox.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
import React from 'react';
import {getSSRId} from 'newskit';
import {Svg} from '../../../../svg';
import {Path} from '../../../../path';
import {Rect} from '../../../../rect';

export const Checkbox: React.FC = () => {
const clip0 = getSSRId();
const clip1 = getSSRId();
const filter0 = getSSRId();

return (
<Svg
width="1490"
height="838"
viewBox="0 0 1490 838"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath={`url(#${clip0})`}>
<Path d="M0 0H1490V838H0V0Z" fill="illustrationInterface020" />
<g clipPath={`url(#${clip1})`}>
<Path
d="M368.629 -218.714C368.629 -241.106 386.799 -259.259 409.212 -259.259H1080.66C1103.08 -259.259 1121.25 -241.106 1121.25 -218.714V1106.6C1121.25 1128.99 1103.08 1147.14 1080.66 1147.14H409.212C386.799 1147.14 368.629 1128.99 368.629 1106.6V-218.714Z"
fill="illustrationInterface010"
/>
<Path
d="M425 -26.1064C425 -35.9904 431.315 -44.0029 439.104 -44.0029H1040.9C1048.69 -44.0029 1055 -35.9904 1055 -26.1064V111.101C1055 120.985 1048.69 128.997 1040.9 128.997H439.104C431.315 128.997 425 120.985 425 111.101V-26.1064Z"
fill="illustrationInterface020"
/>
</g>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M406.262 -297H1083.63C1125.19 -297 1158.89 -263.336 1158.89 -221.809V1110.48C1158.89 1152.01 1125.19 1185.67 1083.63 1185.67H406.262C364.696 1185.67 331 1152.01 331 1110.48V-221.809C331 -263.336 364.696 -297 406.262 -297ZM406.262 -259.405C385.479 -259.405 368.631 -242.572 368.631 -221.809V1110.48C368.631 1131.24 385.479 1148.08 406.262 1148.08H1083.63C1104.41 1148.08 1121.26 1131.24 1121.26 1110.48V-221.809C1121.26 -242.572 1104.41 -259.405 1083.63 -259.405H406.262Z"
fill="illustrationInterface060"
/>
<g filter={`url(#${filter0})`}>
<Rect
x="431"
y="217"
width="629"
height="45"
rx="22.5"
fill="illustrationInterface060"
/>
<Rect
x="434"
y="336"
width="84"
height="84"
rx="10.9177"
fill="illustrationInterface010"
stroke="#41A0AA"
stroke-width="6"
/>
<Rect
x="430"
y="494"
width="90"
height="90"
rx="13.9177"
fill="illustrationInterface060"
/>
<Rect
x="433"
y="658"
width="84"
height="84"
rx="10.9177"
fill="illustrationInterface010"
stroke="#41A0AA"
stroke-width="6"
/>
<Rect
x="562"
y="368"
width="327"
height="19"
rx="9.5"
fill="illustrationInterface060"
/>
<Rect
x="562"
y="529"
width="327"
height="19"
rx="9.5"
fill="illustrationInterface060"
/>
<Rect
x="561"
y="690"
width="327"
height="19"
rx="9.5"
fill="illustrationInterface060"
/>
<Path
d="M467.722 549.756L455.994 538.028L452 541.994L467.722 557.716L501.472 523.966L497.506 520L467.722 549.756Z"
fill="illustrationInterface010"
/>
</g>
</g>
<defs>
<filter
id={filter0}
x="424.994"
y="214.497"
width="640.011"
height="538.011"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset dy="2.50286" />
<feGaussianBlur stdDeviation="2.50286" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.0392157 0 0 0 0 0.0392157 0 0 0 0 0.0392157 0 0 0 0.08 0"
/>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_1437_28954"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_1437_28954"
result="shape"
/>
</filter>
<clipPath id={clip0}>
<Rect width="1490" height="838" fill="white" />
</clipPath>
<clipPath id={clip1}>
<Rect
x="368.629"
y="-259.259"
width="752.617"
height="1407.48"
rx="13.9863"
fill="white"
/>
</clipPath>
</defs>
</Svg>
);
};

export default Checkbox;
140 changes: 140 additions & 0 deletions site/components/illustrations/patterns/forms/input-components/combo-box/combo-box.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
import React from 'react';
import {getSSRId} from 'newskit';
import {Svg} from '../../../../svg';
import {Path} from '../../../../path';
import {Rect} from '../../../../rect';

export const ComboBox: React.FC = () => {
const filter0 = getSSRId();

return (
<Svg
width="1490"
height="838"
viewBox="0 0 1490 838"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<Path d="M0 0H1490V838H0V0Z" fill="illustrationInterface020" />
<g filter={`url(#${filter0})`}>
<Rect
x="380"
y="216"
width="732"
height="469"
rx="20"
fill="illustrationInterface010"
/>
<Rect
x="380"
y="421"
width="733"
height="88"
fill="illustrationBackground020"
/>
<Rect
x="379.508"
y="153"
width="351.958"
height="22.3973"
rx="11.1987"
fill="illustrationInterface060"
/>
<Path
d="M380 225.198C380 214.595 388.595 206 399.198 206H1093.8C1104.4 206 1113 214.595 1113 225.198V331H380V225.198Z"
fill="illustrationInterface060"
/>
<Rect
x="433.602"
y="262"
width="413.449"
height="11.2759"
rx="5.63794"
fill="illustrationInterface010"
/>
<Rect
x="424"
y="373"
width="234"
height="11"
rx="5.5"
fill="illustrationInterface060"
/>
<Rect
x="424"
y="459"
width="234"
height="11"
rx="5.5"
fill="illustrationInterface060"
/>
<Rect
x="424"
y="548"
width="234"
height="11"
rx="5.5"
fill="illustrationInterface060"
/>
<Rect
x="424"
y="636"
width="234"
height="11"
rx="5.5"
fill="illustrationInterface060"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M1047.62 282.578C1046.05 283.044 1044.29 282.658 1043.05 281.42L1023.5 261.874C1021.7 260.075 1021.7 257.158 1023.5 255.359C1025.3 253.56 1028.22 253.56 1030.02 255.359L1046.32 271.658L1062.63 255.349C1064.42 253.55 1067.34 253.55 1069.14 255.349C1070.94 257.148 1070.94 260.065 1069.14 261.865L1049.59 281.41C1049.03 281.98 1048.34 282.369 1047.62 282.578Z"
fill="illustrationInterface010"
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M1061.02 450.683C1061.93 449.772 1063.41 449.772 1064.32 450.683C1065.23 451.595 1065.23 453.072 1064.32 453.983L1038.65 479.65C1037.74 480.561 1036.26 480.561 1035.35 479.65L1023.68 467.983C1022.77 467.072 1022.77 465.595 1023.68 464.683C1024.59 463.772 1026.07 463.772 1026.98 464.683L1037 474.7L1061.02 450.683Z"
fill="illustrationInterface060"
/>
</g>
<defs>
<filter
id={filter0}
x="374.496"
y="150.494"
width="743.515"
height="542.023"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset dy="2.50575" />
<feGaussianBlur stdDeviation="2.50575" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.0392157 0 0 0 0 0.0392157 0 0 0 0 0.0392157 0 0 0 0.08 0"
/>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_1437_28927"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_1437_28927"
result="shape"
/>
</filter>
</defs>
</Svg>
);
};

export default ComboBox;
Loading

0 comments on commit 0032c6b

Please sign in to comment.