From f82976a85c793035f28846dc8d75474322651cc0 Mon Sep 17 00:00:00 2001 From: katiegoines Date: Thu, 5 Sep 2024 13:28:09 -0700 Subject: [PATCH 1/5] added caption to tables --- src/components/MDXComponents/MDXTable.tsx | 26 +++++++++++++++++++++-- src/styles/table.scss | 4 ++++ 2 files changed, 28 insertions(+), 2 deletions(-) diff --git a/src/components/MDXComponents/MDXTable.tsx b/src/components/MDXComponents/MDXTable.tsx index 31f07b8142f..e628a40c171 100644 --- a/src/components/MDXComponents/MDXTable.tsx +++ b/src/components/MDXComponents/MDXTable.tsx @@ -1,18 +1,40 @@ import { ScrollView } from '@aws-amplify/ui-react'; -import { HTMLAttributes, ReactNode } from 'react'; +import { HTMLAttributes, ReactNode, useEffect, useRef, useState } from 'react'; interface MDXTableProps extends HTMLAttributes { children: ReactNode; } export const MDXTable: React.FC = ({ children, ...props }) => { + const ref = useRef(null); + const [caption, setCaption] = useState(''); + + useEffect(() => { + const getHeading = (el) => { + if (el?.previousElementSibling?.tagName.startsWith('H')) { + setCaption(el.previousElementSibling.textContent); + } else { + getHeading(ref.current?.previousElementSibling); + } + }; + getHeading(ref.current); + }, []); + + const tableId = caption.includes(' ') ? caption.split(' ').join('') : caption; + return ( - {children}
+ + + {children} +
Table: {caption}
 ); }; diff --git a/src/styles/table.scss b/src/styles/table.scss index c881ce78f1b..2606b1112cd 100644 --- a/src/styles/table.scss +++ b/src/styles/table.scss @@ -19,6 +19,10 @@ table:not([class]) { background-color: var(--amplify-colors-neutral-10); } } + caption { + visibility: hidden; + line-height: 0; + } } .scrollview { From 173655e783e48b28d1cc955802348fe4fcaec839 Mon Sep 17 00:00:00 2001 From: katiegoines Date: Thu, 5 Sep 2024 13:39:22 -0700 Subject: [PATCH 2/5] fix test --- src/components/MDXComponents/MDXTable.tsx | 2 +- .../MDXComponents/__tests__/MDXTable.test.tsx | 99 ++++++++++--------- 2 files changed, 52 insertions(+), 49 deletions(-) diff --git a/src/components/MDXComponents/MDXTable.tsx b/src/components/MDXComponents/MDXTable.tsx index e628a40c171..0d23bcec839 100644 --- a/src/components/MDXComponents/MDXTable.tsx +++ b/src/components/MDXComponents/MDXTable.tsx @@ -14,7 +14,7 @@ export const MDXTable: React.FC = ({ children, ...props }) => { if (el?.previousElementSibling?.tagName.startsWith('H')) { setCaption(el.previousElementSibling.textContent); } else { - getHeading(ref.current?.previousElementSibling); + getHeading(el?.previousElementSibling); } }; getHeading(ref.current); diff --git a/src/components/MDXComponents/__tests__/MDXTable.test.tsx b/src/components/MDXComponents/__tests__/MDXTable.test.tsx index 6290b28bbe6..a4110eb01ac 100644 --- a/src/components/MDXComponents/__tests__/MDXTable.test.tsx +++ b/src/components/MDXComponents/__tests__/MDXTable.test.tsx @@ -4,54 +4,57 @@ import { MDXTable } from '../MDXTable'; describe('MDXTable', () => { it('should render table', () => { render( - - - - - Amplify Authenticator - Amplify Libraries - - - - - - Description - - - Open source drop-in UI component for authentication - - - Low-level building blocks for implementing authentication - - - - - Benefits - - - Automatically integrates with your existing Amplify configuration - and allows you to easily add the entire authentication flow to - your application. You can then customize themes to adjust colors - and styling as needed. - - - Gives you full control over the UI and logic implementation. - - - - - Constraints - - - Dependent on Amplify CLI for provisioning resources. - - - Requires the building of screens and frontend logic to enable the - sign-in and registration experiences. - - - - +
+

Heading

+ + + + + Amplify Authenticator + Amplify Libraries + + + + + + Description + + + Open source drop-in UI component for authentication + + + Low-level building blocks for implementing authentication + + + + + Benefits + + + Automatically integrates with your existing Amplify + configuration and allows you to easily add the entire + authentication flow to your application. You can then customize + themes to adjust colors and styling as needed. + + + Gives you full control over the UI and logic implementation. + + + + + Constraints + + + Dependent on Amplify CLI for provisioning resources. + + + Requires the building of screens and frontend logic to enable + the sign-in and registration experiences. + + + + +
); const tableHeading = screen.getByText('Amplify Authenticator'); From 6936db33a14993e7692cf92e82da64421a7f9d2e Mon Sep 17 00:00:00 2001 From: katiegoines Date: Thu, 5 Sep 2024 13:40:26 -0700 Subject: [PATCH 3/5] changing page to test --- src/pages/[platform]/start/migrate-to-gen2/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/[platform]/start/migrate-to-gen2/index.mdx b/src/pages/[platform]/start/migrate-to-gen2/index.mdx index 2ec72c4aee0..51858e37d4e 100644 --- a/src/pages/[platform]/start/migrate-to-gen2/index.mdx +++ b/src/pages/[platform]/start/migrate-to-gen2/index.mdx @@ -82,7 +82,7 @@ The tables below present a feature matrix for Gen 1 customers who are considerin | First class SAML support | No | Yes | | Import auth | Yes | No | -### Data +### Data changing this page to test | Feature | Gen 1 | Gen2 | |---|---|---| From c5789f30ce49daed79c6f4c21f9d3be14891b545 Mon Sep 17 00:00:00 2001 From: katiegoines Date: Thu, 5 Sep 2024 14:50:26 -0700 Subject: [PATCH 4/5] remove testing code --- src/pages/[platform]/start/migrate-to-gen2/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/[platform]/start/migrate-to-gen2/index.mdx b/src/pages/[platform]/start/migrate-to-gen2/index.mdx index 51858e37d4e..b3e718da3e1 100644 --- a/src/pages/[platform]/start/migrate-to-gen2/index.mdx +++ b/src/pages/[platform]/start/migrate-to-gen2/index.mdx @@ -82,7 +82,7 @@ The tables below present a feature matrix for Gen 1 customers who are considerin | First class SAML support | No | Yes | | Import auth | Yes | No | -### Data changing this page to test +### | Feature | Gen 1 | Gen2 | |---|---|---| From 4288fc2ba7c13787d74f93c7f86142320ebb794e Mon Sep 17 00:00:00 2001 From: katiegoines Date: Thu, 5 Sep 2024 14:51:03 -0700 Subject: [PATCH 5/5] remove testing code --- src/pages/[platform]/start/migrate-to-gen2/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/[platform]/start/migrate-to-gen2/index.mdx b/src/pages/[platform]/start/migrate-to-gen2/index.mdx index b3e718da3e1..2ec72c4aee0 100644 --- a/src/pages/[platform]/start/migrate-to-gen2/index.mdx +++ b/src/pages/[platform]/start/migrate-to-gen2/index.mdx @@ -82,7 +82,7 @@ The tables below present a feature matrix for Gen 1 customers who are considerin | First class SAML support | No | Yes | | Import auth | Yes | No | -### +### Data | Feature | Gen 1 | Gen2 | |---|---|---|