docs(PPDSC-2291): Component defaults documentation

site/components/illustrations/components/hero-component-defaults-illustration.tsx

@@ -0,0 +1,168 @@
+import React from 'react';
+import {getSSRId} from 'newskit';
+import {Svg} from '../svg';
+import {Path} from '../path';
+import {Rect} from '../rect';
+import {Ellipse} from '../ellipse';
+
+export const HeroComponentDefaultsIllustration: React.FC = () => {
+  const mask0 = getSSRId();
+  const mask1 = getSSRId();
+  const filter0 = getSSRId();
+
+  return (
+    <Svg
+      width="1345"
+      height="759"
+      viewBox="0 0 1345 759"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <Rect width="1345" height="759" fill="illustrationBackground020" />
+      <Rect width="1345" height="759" fill="illustrationBackground020" />
+      <Ellipse
+        cx="517.5"
+        cy="545"
+        rx="45.5"
+        ry="46"
+        fill="illustrationInterface070"
+      />
+      <Ellipse
+        cx="408.5"
+        cy="545"
+        rx="45.5"
+        ry="46"
+        fill="illustrationPalette070"
+      />
+      <Path
+        d="M673.5 545C673.5 570.134 653.348 590.5 628.5 590.5C603.652 590.5 583.5 570.134 583.5 545C583.5 519.866 603.652 499.5 628.5 499.5C653.348 499.5 673.5 519.866 673.5 545Z"
+        fill="illustrationPalette030"
+        stroke="#87A4FC"
+      />
+      <mask id="path-5-inside-1_1318_226561" fill="white">
+        <Path d="M583 545.036C583 519.611 603.611 499 629.036 499H936.964C962.389 499 983 519.611 983 545.036V545.036C983 570.462 962.389 591.073 936.964 591.073H629.036C603.611 591.073 583 570.462 583 545.036V545.036Z" />
+      </mask>
+      <Path
+        d="M583 545.036C583 519.611 603.611 499 629.036 499H936.964C962.389 499 983 519.611 983 545.036V545.036C983 570.462 962.389 591.073 936.964 591.073H629.036C603.611 591.073 583 570.462 583 545.036V545.036Z"
+        fill="illustrationPalette040"
+      />
+      <Path
+        d="M629.036 500H936.964V498H629.036V500ZM936.964 590.073H629.036V592.073H936.964V590.073ZM629.036 590.073C604.163 590.073 584 569.909 584 545.036H582C582 571.014 603.059 592.073 629.036 592.073V590.073ZM982 545.036C982 569.909 961.837 590.073 936.964 590.073V592.073C962.941 592.073 984 571.014 984 545.036H982ZM936.964 500C961.837 500 982 520.163 982 545.036H984C984 519.059 962.941 498 936.964 498V500ZM629.036 498C603.059 498 582 519.059 582 545.036H584C584 520.163 604.163 500 629.036 500V498Z"
+        fill="#7264EF"
+        mask="url(#path-5-inside-1_1318_226561)"
+      />
+      <mask
+        id={mask0}
+        mask-type="alpha"
+        maskUnits="userSpaceOnUse"
+        x="726"
+        y="168"
+        width="257"
+        height="257"
+      >
+        <Path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M766.156 168C743.979 168 726 185.979 726 208.156V384.844C726 407.021 743.979 425 766.156 425H942.844C965.021 425 983 407.021 983 384.844V208.156C983 185.979 965.021 168 942.844 168H766.156ZM941.179 250.106C945.742 245.587 945.778 238.224 941.259 233.661C936.739 229.097 929.376 229.062 924.813 233.581L827.644 329.815L793.808 293.579C789.424 288.885 782.066 288.633 777.371 293.016C772.677 297.4 772.425 304.759 776.809 309.453L817.184 352.69C822.554 358.441 831.613 358.618 837.203 353.081L941.179 250.106Z"
+          fill="white"
+        />
+      </mask>
+      <g mask={`url(#${mask0})`}>
+        <g filter={`url(#${filter0})`}>
+          <mask
+            id={mask1}
+            mask-type="alpha"
+            maskUnits="userSpaceOnUse"
+            x="726"
+            y="168"
+            width="257"
+            height="257"
+          >
+            <Rect
+              x="726"
+              y="168"
+              width="257"
+              height="257"
+              rx="40.1562"
+              fill="white"
+            />
+          </mask>
+          <g mask={`url(#${mask1})`}>
+            <Path
+              d="M767.817 87.6682C643.907 120.87 570.312 248.003 603.437 371.628C636.562 495.253 763.864 568.556 887.774 535.355C1011.68 502.153 1085.28 375.02 1052.15 251.395C1019.03 127.77 891.726 54.4667 767.817 87.6682Z"
+              fill="illustrationPalette040"
+            />
+          </g>
+        </g>
+      </g>
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M668.981 342.899C668.756 342.674 668.756 342.309 668.981 342.084L672.777 338.288C673.002 338.063 673.367 338.063 673.592 338.288C673.817 338.513 673.817 338.878 673.592 339.103L669.796 342.899C669.571 343.124 669.206 343.124 668.981 342.899Z"
+        fill="white"
+      />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M663.217 342.899C662.992 342.674 662.992 342.309 663.217 342.084L672.777 332.524C673.002 332.298 673.367 332.298 673.592 332.524C673.817 332.749 673.817 333.114 673.592 333.339L664.032 342.899C663.807 343.124 663.442 343.124 663.217 342.899Z"
+        fill="white"
+      />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M363 175C363 171.134 365.695 168 369.02 168H657.98C661.305 168 664 171.134 664 175V252H363V175ZM389 209.5C389 207.567 390.524 206 392.404 206H581.596C583.476 206 585 207.567 585 209.5C585 211.433 583.476 213 581.596 213H392.404C390.524 213 389 211.433 389 209.5ZM633.752 204.703L626.482 211.973L619.211 204.703C618.409 203.901 617.108 203.901 616.306 204.703C615.504 205.505 615.504 206.806 616.306 207.608L625.021 216.323C625.422 216.724 625.948 216.925 626.474 216.925C627.004 216.929 627.537 216.728 627.942 216.323L636.657 207.608C637.459 206.806 637.459 205.505 636.657 204.703C635.855 203.901 634.554 203.901 633.752 204.703Z"
+        fill="illustrationPalette020"
+      />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M363 254H664V339H363V254ZM389 296.5C389 294.567 390.524 293 392.404 293H581.596C583.476 293 585 294.567 585 296.5C585 298.433 583.476 300 581.596 300H392.404C390.524 300 389 298.433 389 296.5ZM633.752 290.79L626.482 298.06L619.211 290.79C618.409 289.988 617.108 289.988 616.306 290.79C615.504 291.592 615.504 292.893 616.306 293.695L625.021 302.41C625.422 302.811 625.948 303.012 626.474 303.012C627.004 303.016 627.537 302.816 627.942 302.41L636.657 293.695C637.459 292.893 637.459 291.592 636.657 290.79C635.855 289.988 634.554 289.988 633.752 290.79Z"
+        fill="illustrationPalette030"
+      />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M363 341H664V418C664 421.866 661.305 425 657.98 425H369.02C365.695 425 363 421.866 363 418V341ZM389 382.5C389 380.567 390.555 379 392.474 379H585.526C587.445 379 589 380.567 589 382.5C589 384.433 587.445 386 585.526 386H392.474C390.555 386 389 384.433 389 382.5ZM634.142 376.877L626.872 384.148L619.602 376.877C618.799 376.075 617.499 376.075 616.696 376.877C615.894 377.679 615.894 378.98 616.696 379.782L625.412 388.498C625.813 388.899 626.338 389.099 626.864 389.099C627.395 389.103 627.927 388.903 628.332 388.498L637.048 379.782C637.85 378.98 637.85 377.679 637.048 376.877C636.245 376.075 634.945 376.075 634.142 376.877Z"
+        fill="illustrationPalette040"
+      />
+      <defs>
+        <filter
+          id={filter0}
+          x="709.938"
+          y="159.969"
+          width="289.125"
+          height="289.125"
+          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.03125" />
+          <feGaussianBlur stdDeviation="8.03125" />
+          <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_1318_226561"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_1318_226561"
+            result="shape"
+          />
+        </filter>
+      </defs>
+    </Svg>
+  );
+};
+
+export default HeroComponentDefaultsIllustration;

site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap

@@ -1640,7 +1640,7 @@ exports[`Sidebar renders correctly when closed 1`] = `
                               <span
                                 class="emotion-18"
                               >
-                                Component overrides & defaults
+                                Component defaults
                               </span>
                             </div>
                           </div>
@@ -5558,7 +5558,7 @@ exports[`Sidebar renders correctly when closed 1`] = `
                                     <span
                                       class="emotion-16"
                                     >
-                                      Component overrides & defaults
+                                      Component defaults
                                     </span>
                                   </div>
                                 </div>
@@ -9334,7 +9334,7 @@ exports[`Sidebar renders correctly when open 1`] = `
                               <span
                                 class="emotion-18"
                               >
-                                Component overrides & defaults
+                                Component defaults
                               </span>
                             </div>
                           </div>
@@ -13217,7 +13217,7 @@ exports[`Sidebar renders correctly when open 1`] = `
                                     <span
                                       class="emotion-16"
                                     >
-                                      Component overrides & defaults
+                                      Component defaults
                                     </span>
                                   </div>
                                 </div>