docs(PPDSC-2187): Patterns date picker and email address pages (#237)

* docs(PPDSC-2187): Patterns date picker and email address pages
newscorp-ghfb · Jun 28, 2022 · afa630e · afa630e
1 parent 42dd2f5
commit afa630e
Show file tree

Hide file tree

Showing 14 changed files with 3,273 additions and 68 deletions.
diff --git a/site/components/illustrations/patterns/forms/date-picker/error-state.tsx b/site/components/illustrations/patterns/forms/date-picker/error-state.tsx
diff --git a/site/components/illustrations/patterns/forms/date-picker/hero.tsx b/site/components/illustrations/patterns/forms/date-picker/hero.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import {getSSRId} from 'newskit';
+import {Svg} from '../../../svg';
+import {Path} from '../../../path';
+import {Rect} from '../../../rect';
+
+export const Hero: 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"
+    >
+      <Rect width="1490" height="838" fill="illustrationBackground020" />
+      <g filter={`url(#${filter0})`}>
+        <Path
+          d="M520 587.522C520 609.877 538.123 628 560.478 628L934.904 628C957.26 628 975.383 609.877 975.383 587.522L975.383 316.316L520 316.316L520 587.522Z"
+          fill="illustrationInterface010"
+        />
+        <Path
+          d="M975.383 245.478C975.383 223.123 957.26 205 934.904 205L560.479 205C538.123 205 520 223.123 520 245.478L520 316.316L975.383 316.316L975.383 245.478Z"
+          fill="illustrationInterface060"
+        />
+        <Path
+          d="M899.486 562.223L947.555 569.812L975.383 550.585V587.522C975.383 609.877 957.261 628 934.905 628H899.486V562.223Z"
+          fill="illustrationShadow010"
+        />
+        <Path
+          d="M897.414 550.079C941.483 566.27 975.383 550.079 975.383 550.079C975.383 593.113 940.448 628 897.414 628C879.753 581.449 897.414 550.079 897.414 550.079Z"
+          fill="illustrationBorder010"
+        />
+        <Path
+          d="M638.4 409.882V370.842H706.748V550.079H662.828V409.882H638.4Z"
+          fill="illustrationInterface070"
+        />
+        <Path
+          d="M734.131 516.442C739.724 512.022 742.274 509.976 741.78 510.303C757.901 497.045 770.567 486.16 779.778 477.648C789.155 469.136 797.05 460.215 803.466 450.885C809.881 441.555 813.089 432.47 813.089 423.631C813.089 416.92 811.526 411.682 808.401 407.917C805.275 404.153 800.587 402.27 794.336 402.27C788.085 402.27 783.151 404.644 779.532 409.391C776.077 413.974 774.35 420.521 774.35 429.033H733.637C733.966 415.12 736.927 403.498 742.52 394.168C748.278 384.838 755.762 377.963 764.974 373.543C774.35 369.124 784.713 366.914 796.064 366.914C815.638 366.914 830.361 371.906 840.231 381.891C850.265 391.876 855.282 404.889 855.282 420.93C855.282 438.445 849.278 454.732 837.27 469.791C825.261 484.686 809.963 499.254 791.375 513.495H857.996V547.624H734.131V516.442Z"
+          fill="illustrationInterface070"
+        />
+      </g>
+      <defs>
+        <filter
+          id={filter0}
+          x="503.809"
+          y="196.904"
+          width="487.766"
+          height="455.383"
+          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="8.09569" />
+          <feGaussianBlur stdDeviation="8.09569" />
+          <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_29087"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_1437_29087"
+            result="shape"
+          />
+        </filter>
+      </defs>
+    </Svg>
+  );
+};
+
+export default Hero;
diff --git a/site/components/illustrations/patterns/forms/date-picker/how-to-use/long-term.tsx b/site/components/illustrations/patterns/forms/date-picker/how-to-use/long-term.tsx
diff --git a/site/components/illustrations/patterns/forms/date-picker/how-to-use/mobile.tsx b/site/components/illustrations/patterns/forms/date-picker/how-to-use/mobile.tsx
diff --git a/site/components/illustrations/patterns/forms/date-picker/how-to-use/short-term.tsx b/site/components/illustrations/patterns/forms/date-picker/how-to-use/short-term.tsx
diff --git a/site/components/illustrations/patterns/forms/date-picker/tip.tsx b/site/components/illustrations/patterns/forms/date-picker/tip.tsx
diff --git a/site/components/illustrations/patterns/forms/email-address/error-state.tsx b/site/components/illustrations/patterns/forms/email-address/error-state.tsx
diff --git a/site/components/illustrations/patterns/forms/email-address/hero.tsx b/site/components/illustrations/patterns/forms/email-address/hero.tsx
@@ -0,0 +1,153 @@
+import React from 'react';
+import {getSSRId} from 'newskit';
+import {Svg} from '../../../svg';
+import {Path} from '../../../path';
+import {Rect} from '../../../rect';
+
+export const Hero: React.FC = () => {
+  const filter0 = getSSRId();
+  const filter1 = getSSRId();
+
+  return (
+    <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="illustrationBackground020" />
+      <Rect width="1490" height="838" fill="illustrationBackground020" />
+      <g filter={`url(#${filter0})`}>
+        <Path
+          d="M515.436 373.421C514.791 373.062 514.164 372.664 513.621 372.164C507.313 366.36 507.442 355.576 514.139 350.017L737.983 208.299C743.292 203.892 751.01 203.901 756.309 208.322L966.113 351.092C972.646 356.543 972.914 366.355 966.928 372.165C966.386 372.691 965.756 373.116 965.105 373.501L756.928 496.481C756.277 496.865 755.667 497.313 755.049 497.748C750.232 501.141 743.793 501.23 738.882 497.969C738.267 497.561 737.659 497.14 737.013 496.781L515.436 373.421Z"
+          fill="illustrationPalette030"
+        />
+        <Path
+          d="M515.436 373.421C514.791 373.062 514.164 372.664 513.621 372.164C507.313 366.36 507.442 355.576 514.139 350.017L737.983 208.299C743.292 203.892 751.01 203.901 756.309 208.322L966.113 351.092C972.646 356.543 972.914 366.355 966.928 372.165C966.386 372.691 965.756 373.116 965.105 373.501L756.928 496.481C756.277 496.865 755.667 497.313 755.049 497.748C750.232 501.141 743.793 501.23 738.882 497.969C738.267 497.561 737.659 497.14 737.013 496.781L515.436 373.421Z"
+          fill="illustrationPalette030"
+        />
+        <Path
+          d="M515.436 373.421C514.791 373.062 514.164 372.664 513.621 372.164C507.313 366.36 507.442 355.576 514.139 350.017L737.983 208.299C743.292 203.892 751.01 203.901 756.309 208.322L966.113 351.092C972.646 356.543 972.914 366.355 966.928 372.165C966.386 372.691 965.756 373.116 965.105 373.501L756.928 496.481C756.277 496.865 755.667 497.313 755.049 497.748C750.232 501.141 743.793 501.23 738.882 497.969C738.267 497.561 737.659 497.14 737.013 496.781L515.436 373.421Z"
+          fill="illustrationPalette030"
+        />
+        <g filter={`url(#${filter1})`}>
+          <Path
+            d="M570.452 264.426C570.452 260.507 573.642 257.331 577.577 257.331H901.757C905.692 257.331 908.882 260.507 908.882 264.426V400.955C908.882 403.467 907.549 405.791 905.376 407.067L748.566 499.155C746.367 500.446 743.642 500.467 741.424 499.21L574.054 404.388C571.827 403.126 570.452 400.772 570.452 398.22V264.426Z"
+            fill="white"
+          />
+        </g>
+        <Path
+          d="M626.56 304.339C623.609 304.339 621.217 306.721 621.217 309.661C621.217 312.6 623.609 314.982 626.56 314.982H851.883C854.835 314.982 857.227 312.6 857.227 309.661C857.227 306.721 854.835 304.339 851.883 304.339H626.56Z"
+          fill="illustrationInterface040"
+        />
+        <Path
+          d="M626.56 336.269C623.609 336.269 621.217 338.652 621.217 341.591C621.217 344.53 623.609 346.913 626.56 346.913H851.883C854.835 346.913 857.227 344.53 857.227 341.591C857.227 338.652 854.835 336.269 851.883 336.269H626.56Z"
+          fill="illustrationInterface040"
+        />
+        <Path
+          d="M621.217 373.521C621.217 370.582 623.609 368.199 626.56 368.199H851.883C854.835 368.199 857.227 370.582 857.227 373.521C857.227 376.46 854.835 378.843 851.883 378.843H626.56C623.609 378.843 621.217 376.46 621.217 373.521Z"
+          fill="illustrationInterface040"
+        />
+        <Path
+          d="M626.56 400.13C623.609 400.13 621.217 402.512 621.217 405.452C621.217 408.391 623.609 410.773 626.56 410.773H851.883C854.835 410.773 857.227 408.391 857.227 405.452C857.227 402.512 854.835 400.13 851.883 400.13H626.56Z"
+          fill="illustrationInterface040"
+        />
+        <Path
+          d="M524.412 627.675C510.833 627.675 504.456 611.258 513.876 602.104C514.461 601.536 515.154 601.076 515.892 600.661L733.668 478.292C734.358 477.904 735.005 477.45 735.633 477.01C735.711 476.955 735.789 476.901 735.867 476.846C741.058 473.219 748.007 473.25 753.167 476.935C753.237 476.985 753.307 477.035 753.377 477.086C753.943 477.491 754.528 477.91 755.147 478.273L963.58 600.721C964.243 601.111 964.867 601.537 965.4 602.05C974.905 611.2 968.522 627.675 954.921 627.675H524.412Z"
+          fill="illustrationPalette050"
+          stroke="#41A0AA"
+          stroke-width="0.803337"
+        />
+        <Path
+          d="M516.312 371.212C515.667 370.853 515.04 370.454 514.495 369.956C509.414 365.321 508.524 357.855 511.896 352.234C510.078 354.617 509 357.588 509 360.811V613.592C509 621.43 515.38 627.783 523.25 627.783H956.974C964.844 627.783 971.224 621.43 971.224 613.592V360.811C971.224 359.005 970.885 357.277 970.267 355.688C971.752 360.586 970.526 366.137 966.595 369.955C966.053 370.481 965.423 370.907 964.772 371.291L757.158 493.976C756.613 494.297 756.097 494.663 755.582 495.029L755.578 495.031L755.575 495.034C755.476 495.104 755.377 495.174 755.278 495.243C750.475 498.626 744.056 498.715 739.16 495.464L739.043 495.386L738.858 495.263C738.345 494.92 737.831 494.576 737.291 494.276L516.312 371.212Z"
+          fill="illustrationPalette040"
+        />
+        <Path
+          d="M524.442 629C510.47 629 503.91 612.136 513.607 602.732C514.227 602.131 514.952 601.652 515.706 601.23L733.907 478.828C734.661 478.406 735.364 477.901 736.072 477.406C741.414 473.679 748.564 473.711 753.874 477.498C754.513 477.953 755.147 478.417 755.824 478.814L964.663 601.293C965.34 601.69 965.994 602.134 966.559 602.677C976.343 612.077 969.775 629 955.782 629H524.442Z"
+          fill="illustrationInterface070"
+        />
+        <Path
+          d="M524.442 629C510.47 629 503.91 612.136 513.607 602.732C514.227 602.131 514.952 601.652 515.706 601.23L733.907 478.828C734.661 478.406 735.364 477.901 736.072 477.406C741.414 473.679 748.564 473.711 753.874 477.498C754.513 477.953 755.147 478.417 755.824 478.814L964.663 601.293C965.34 601.69 965.994 602.134 966.559 602.677C976.343 612.077 969.775 629 955.782 629H524.442Z"
+          fill="illustrationInterface070"
+        />
+        <Path
+          d="M524.442 629C510.47 629 503.91 612.136 513.607 602.732C514.227 602.131 514.952 601.652 515.706 601.23L733.907 478.828C734.661 478.406 735.364 477.901 736.072 477.406C741.414 473.679 748.564 473.711 753.874 477.498C754.513 477.953 755.147 478.417 755.824 478.814L964.663 601.293C965.34 601.69 965.994 602.134 966.559 602.677C976.343 612.077 969.775 629 955.782 629H524.442Z"
+          fill="illustrationInterface070"
+        />
+      </g>
+      <defs>
+        <filter
+          id={filter0}
+          x="493"
+          y="197"
+          width="494.224"
+          height="456"
+          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="8" />
+          <feGaussianBlur stdDeviation="8" />
+          <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_29171"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_1437_29171"
+            result="shape"
+          />
+        </filter>
+        <filter
+          id={filter1}
+          x="554.452"
+          y="249.331"
+          width="370.43"
+          height="274.808"
+          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="8" />
+          <feGaussianBlur stdDeviation="8" />
+          <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_29171"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_1437_29171"
+            result="shape"
+          />
+        </filter>
+      </defs>
+    </Svg>
+  );
+};
+
+export default Hero;