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.

Sign up for GitHub

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-2268): Accordion documentation #292

Merged
merged 15 commits into from
Jul 21, 2022
Merged

docs(PPDSC-2268): Accordion documentation #292

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
64bde1b
docs(PPDSC-2268): accordion doc site page initial ui
Srinivasan-Ramasamy Jul 14, 2022
20fdd51
docs(PPDSC-2268): accordion doc site ui section changes
Srinivasan-Ramasamy Jul 15, 2022
e69a92e
docs(PPDSC-2268): unorder section ui fixes
Srinivasan-Ramasamy Jul 15, 2022
f207a96
docs(PPDSC-2268): unorder ui fixes
Srinivasan-Ramasamy Jul 15, 2022
893b5d1
docs(PPDSC-2268): accessibility section fixes
Srinivasan-Ramasamy Jul 18, 2022
9a5bb2a
Merge branch 'main' into docs/PPDSC-2268-accordion-page
Srinivasan-Ramasamy Jul 18, 2022
0a99757
docs(PPDSC-2268): unit test fix for build fail
Srinivasan-Ramasamy Jul 18, 2022
f87838b
Merge branch 'main' into docs/PPDSC-2268-accordion-page
Srinivasan-Ramasamy Jul 18, 2022
f8f808b
docs(PPDSC-2268): illustrations update
Srinivasan-Ramasamy Jul 19, 2022
c748e3d
docs(PPDSC-2268): ui fix
Srinivasan-Ramasamy Jul 19, 2022
4140628
docs(PPDSC-2268): ui changes
Srinivasan-Ramasamy Jul 19, 2022
aa575c1
docs(PPDSC-2268): ui fixes
Srinivasan-Ramasamy Jul 19, 2022
65cab9c
docs(PPDSC-2268): seo section bottom has extra space fix
Srinivasan-Ramasamy Jul 19, 2022
5d5479b
docs(PPDSC-2268): seo section unit test fix
Srinivasan-Ramasamy Jul 19, 2022
0b50e69
docs(PPDSC-2268): code review fixes
Srinivasan-Ramasamy Jul 21, 2022
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
154 changes: 154 additions & 0 deletions site/components/illustrations/components/accordion/anatomy.tsx
View file
Open in desktop

Large diffs are not rendered by default.

263 changes: 263 additions & 0 deletions site/components/illustrations/components/accordion/behaviours/allexpandedonload.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,263 @@
import React from 'react';
import {getSSRId} from 'newskit';
import {Svg} from '../../../svg';
import {Path} from '../../../path';
import {Rect} from '../../../rect';

export const AllExpandedOnLoad: React.FC = () => {
const clip0 = getSSRId();
const filter0 = getSSRId();
const filter1 = getSSRId();
const filter2 = getSSRId();
const filter3 = getSSRId();
const filter4 = 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="illustrationBackground020" />
<g filter={`url(#${filter0})`}>
<Path
d="M295 -159H1195V144H295V-159Z"
fill="illustrationInterface010"
/>
<Path
d="M350 -159H1140V81C1140 85.4183 1136.42 89 1132 89H358C353.582 89 350 85.4183 350 81V-159Z"
fill="illustrationInterface020"
/>
</g>
<g filter={`url(#${filter1})`}>
<Path
d="M295 150H1195V300H295V150Z"
fill="illustrationInterface010"
/>
<Path
d="M1114.68 238.666L1099 223.018L1083.32 238.666L1078.5 233.849L1099 213.349L1119.5 233.849L1114.68 238.666Z"
fill="illustrationHighlight010"
/>
<Path
d="M350 225C350 218.373 357.873 213 367.586 213H999.414C1009.13 213 1017 218.373 1017 225C1017 231.627 1009.13 237 999.414 237H367.586C357.873 237 350 231.627 350 225Z"
fill="illustrationInterface030"
/>
</g>
<g filter={`url(#${filter2})`}>
<Path
d="M295 301H1195V604H295V301Z"
fill="illustrationInterface010"
/>
<Path
d="M350 301H1140V541C1140 545.418 1136.42 549 1132 549H358C353.582 549 350 545.418 350 541V301Z"
fill="illustrationInterface020"
/>
</g>
<g filter={`url(#${filter3})`}>
<Path
d="M295 610H1195V760H295V610Z"
fill="illustrationInterface010"
/>
<Path
d="M1114.68 698.666L1099 683.018L1083.32 698.666L1078.5 693.849L1099 673.349L1119.5 693.849L1114.68 698.666Z"
fill="illustrationHighlight010"
/>
<Path
d="M350 685C350 678.373 357.873 673 367.586 673H999.414C1009.13 673 1017 678.373 1017 685C1017 691.627 1009.13 697 999.414 697H367.586C357.873 697 350 691.627 350 685Z"
fill="illustrationInterface030"
/>
</g>
<g filter={`url(#${filter4})`}>
<Path
d="M295 761H1195V1064H295V761Z"
fill="illustrationInterface010"
/>
<Path
d="M350 761H1140V1001C1140 1005.42 1136.42 1009 1132 1009H358C353.582 1009 350 1005.42 350 1001V761Z"
fill="illustrationInterface020"
/>
</g>
</g>
<defs>
<filter
id={filter0}
x="279"
y="-167"
width="932"
height="335"
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_1820_58607"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_1820_58607"
result="shape"
/>
</filter>
<filter
id={filter1}
x="279"
y="142"
width="932"
height="182"
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_1820_58607"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_1820_58607"
result="shape"
/>
</filter>
<filter
id={filter2}
x="279"
y="293"
width="932"
height="335"
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_1820_58607"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_1820_58607"
result="shape"
/>
</filter>
<filter
id={filter3}
x="279"
y="602"
width="932"
height="182"
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_1820_58607"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_1820_58607"
result="shape"
/>
</filter>
<filter
id={filter4}
x="279"
y="753"
width="932"
height="335"
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_1820_58607"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_1820_58607"
result="shape"
/>
</filter>
<clipPath id={clip0}>
<Rect width="1490" height="838" fill="white" />
</clipPath>
</defs>
</Svg>
);
};

export default AllExpandedOnLoad;
Loading