Merge branch 'text-formatting-phonenumberfield' of https://github.com…

…/aws-amplify/amplify-ui into text-formatting-phonenumberfield

.changeset/loud-dolphins-listen.md

@@ -0,0 +1,5 @@
+---
+'@aws-amplify/ui': patch
+---
+
+Fix table styling for striped variation

.changeset/neat-shrimps-dream.md

@@ -0,0 +1,6 @@
+---
+"@aws-amplify/ui-react-liveness": patch
+"@aws-amplify/ui": patch
+---
+
+chore(liveness): type Liveness DisplayText with DisplayTextTemplate

.changeset/rich-keys-retire.md

@@ -0,0 +1,6 @@
+---
+"@aws-amplify/ui-react-liveness": patch
+"@aws-amplify/ui-react": patch
+---
+
+chore(liveness): adding a11y error label to alert icon in timeout message

docs/package.json

@@ -23,7 +23,7 @@
     "test:links": "node --require esbuild-register ./scripts/link-checker-puppeteer.ts"
   },
   "dependencies": {
-    "@aws-amplify/ui-react": "6.0.7",
+    "@aws-amplify/ui-react": "6.1.0",
     "@docsearch/react": "3",
     "@mdx-js/loader": "^2.1.0",
     "@mdx-js/mdx": "^2.1.0",

docs/src/components/CopyButton.tsx

@@ -6,14 +6,15 @@ import { trackCopy } from '@/utils/track';
 
 interface CopyButtonProps
   extends Pick<ButtonProps, 'className' | 'size' | 'variation'> {
-  copyText: string;
+  target: string;
 }
 
 export const CopyButton = ({
   className,
-  copyText,
-  size,
-  variation,
+  target,
+  size = 'small',
+  variation = 'link',
+  ...rest
 }: CopyButtonProps) => {
   const [copied, setCopied] = React.useState(false);
 
@@ -22,12 +23,13 @@ export const CopyButton = ({
     setTimeout(() => {
       setCopied(false);
     }, 2000);
-    trackCopy(copyText);
+    trackCopy(target);
   };
 
   return (
-    <CopyToClipboard text={copyText} onCopy={copy}>
+    <CopyToClipboard text={target} onCopy={copy}>
       <Button
+        {...rest}
         className={className}
         isDisabled={copied}
         size={size}

docs/src/components/Demo.tsx

@@ -21,13 +21,6 @@ export const Demo = ({
   const [copied, setCopied] = React.useState(false);
   const { tokens } = useTheme();
 
-  const copy = () => {
-    setCopied(true);
-    setTimeout(() => {
-      setCopied(false);
-    }, 2000);
-  };
-
   return (
     <View
       className="docs-component-demo"
@@ -58,11 +51,7 @@ export const Demo = ({
           position="relative"
           backgroundColor={tokens.colors.background.secondary}
         >
-          <CopyButton
-            className="example-copy-button"
-            copyText={code}
-            size="small"
-          />
+          <CopyButton className="example-copy-button" target={code} />
           <Highlight Prism={defaultProps.Prism} code={code} language="jsx">
             {({ className, style, tokens, getLineProps, getTokenProps }) => (
               <pre

docs/src/components/Example.tsx

@@ -31,12 +31,7 @@ export function ExampleCode({ children }) {
 
   return (
     <div className="example-code">
-      <CopyButton
-        className="example-copy-button"
-        copyText={text}
-        size="small"
-        variation="link"
-      />
+      <CopyButton className="example-copy-button" target={text} />
       <div ref={ref}>{children}</div>
     </div>
   );

docs/src/components/InlineFilter/InlineFilter.tsx

@@ -0,0 +1,36 @@
+import { useRouter } from 'next/router';
+import { FilterChildren } from '@aws-amplify/ui-react/internal';
+import { isString } from '@aws-amplify/ui';
+
+import { Framework } from '@/data/frameworks';
+
+export interface InlineFilterProps {
+  children: React.ReactNode;
+  /**
+   * List of platforms that will render this content. If the current platform
+   * is not in this list then the content will not be rendered
+   */
+  filters: (Framework | 'all')[];
+}
+
+/**
+ * Used to show content for filtered platforms
+ * Usage:
+ * <InlineFilter filters={['react', 'android']}>
+ *  This content will only render for react and angular platforms
+ * </InlineFilter>
+ */
+export const InlineFilter = ({ filters, children }: InlineFilterProps) => {
+  const router = useRouter();
+  const platform = router?.query?.platform;
+
+  if (!isString(platform)) {
+    return null;
+  }
+
+  return (
+    <FilterChildren allowedFilters={filters} targetFilter={platform}>
+      {children}
+    </FilterChildren>
+  );
+};

docs/src/components/InlineFilter/index.ts

@@ -0,0 +1 @@
+export { InlineFilter, type InlineFilterProps } from './InlineFilter';

docs/src/components/InstallScripts.tsx

@@ -47,12 +47,7 @@ export const TerminalCommand = ({
   return (
     <div className={`install-code__container ${variant}`}>
       <code className="install-code__content">{terminalCommand}</code>
-      <CopyButton
-        className="install-code__button"
-        copyText={terminalCommand}
-        size="small"
-        variation="link"
-      />
+      <CopyButton className="install-code__button" target={terminalCommand} />
     </div>
   );
 };

docs/src/components/Layout/index.tsx

@@ -54,6 +54,7 @@ export default function Page({
         }))
       );
     });
+    updateHeaders(); // with static rendering the mutation observer is no longer triggered on initial page view because the content has already been rendered
 
     const observer = new MutationObserver(updateHeaders);
 

docs/src/components/PrimitiveTabs.tsx

@@ -0,0 +1,22 @@
+import { PageTabLayout } from '@/components/Layout/PageTabLayout';
+import { PropsTableTab } from '@/components/propsTable/PropsTableTab';
+
+export const PrimitiveTabs = ({ children, htmlElement, mdnUrl, title }) => {
+  return (
+    <PageTabLayout
+      tabComponents={[
+        { title: 'Documentation', children },
+        {
+          title: 'Props',
+          children: (
+            <PropsTableTab
+              componentName={title}
+              htmlElement={htmlElement}
+              mdnUrl={mdnUrl}
+            />
+          ),
+        },
+      ]}
+    />
+  );
+};

docs/src/pages/[platform]/components/accordion/index.page.mdx

@@ -8,11 +8,9 @@ htmlElement: details
 supportedFrameworks: react
 ---
 
-import { Fragment } from '@/components/Fragment';
-import { PageTabLayout } from '@/components/Layout/PageTabLayout';
 import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-import { PropsTableTab } from '@/components/propsTable/PropsTableTab';
-import data from '@/data/props-table.json';
+import { PrimitiveTabs } from '@/components/PrimitiveTabs';
+import ReactPage from './react.mdx';
 
 export async function getStaticPaths() {
   return getCustomStaticPath(frontmatter.supportedFrameworks);
@@ -24,18 +22,6 @@ export async function getStaticProps() {
   return { props: {} }
 }
 
-<PageTabLayout 
-  tabComponents={[{
-    title: "Documentation", 
-    children: <Fragment>{({ platform }) => import(`./${platform}.mdx`)}</Fragment>
-  },
-  {
-    title: "Props", 
-    children: <PropsTableTab 
-                componentName={frontmatter.title} 
-                PropsData={data} 
-                htmlElement={frontmatter.htmlElement} 
-                mdnUrl={frontmatter.mdnUrl}
-              />
-  }]}
-/>
+<PrimitiveTabs {...frontmatter}>
+  <ReactPage />
+</PrimitiveTabs>

docs/src/pages/[platform]/components/alert/index.page.mdx

@@ -9,11 +9,9 @@ htmlElement: div
 supportedFrameworks: react
 ---
 
-import { Fragment } from '@/components/Fragment';
-import { PageTabLayout } from '@/components/Layout/PageTabLayout';
 import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-import { PropsTableTab } from '@/components/propsTable/PropsTableTab';
-import data from '@/data/props-table.json';
+import { PrimitiveTabs } from '@/components/PrimitiveTabs';
+import ReactPage from './react.mdx';
 
 export async function getStaticPaths() {
   return getCustomStaticPath(frontmatter.supportedFrameworks);
@@ -25,18 +23,6 @@ export async function getStaticProps() {
   return { props: {} }
 }
 
-<PageTabLayout 
-  tabComponents={[{
-    title: "Documentation", 
-    children: <Fragment>{({ platform }) => import(`./${platform}.mdx`)}</Fragment>
-  },
-  {
-    title: "Props", 
-    children: <PropsTableTab 
-                componentName={frontmatter.title} 
-                PropsData={data} 
-                htmlElement={frontmatter.htmlElement} 
-                mdnUrl={frontmatter.mdnUrl}
-              />
-  }]}
-/>
+<PrimitiveTabs {...frontmatter}>
+  <ReactPage />
+</PrimitiveTabs>

docs/src/pages/[platform]/components/autocomplete/index.page.mdx

@@ -9,11 +9,9 @@ htmlElement: input
 supportedFrameworks: react
 ---
 
-import { Fragment } from '@/components/Fragment';
-import { PageTabLayout } from '@/components/Layout/PageTabLayout';
 import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-import { PropsTableTab } from '@/components/propsTable/PropsTableTab';
-import data from '@/data/props-table.json';
+import { PrimitiveTabs } from '@/components/PrimitiveTabs';
+import ReactPage from './react.mdx';
 
 export async function getStaticPaths() {
   return getCustomStaticPath(frontmatter.supportedFrameworks);
@@ -25,18 +23,6 @@ export async function getStaticProps() {
   return { props: {} }
 }
 
-<PageTabLayout 
-  tabComponents={[{
-    title: "Documentation", 
-    children: <Fragment>{({ platform }) => import(`./${platform}.mdx`)}</Fragment>
-  },
-  {
-    title: "Props", 
-    children: <PropsTableTab 
-                componentName={frontmatter.title} 
-                PropsData={data} 
-                htmlElement={frontmatter.htmlElement} 
-                mdnUrl={frontmatter.mdnUrl}
-              />
-  }]}
-/>
+<PrimitiveTabs {...frontmatter}>
+  <ReactPage />
+</PrimitiveTabs>

docs/src/pages/[platform]/components/badge/index.page.mdx

@@ -8,11 +8,9 @@ htmlElement: span
 supportedFrameworks: react
 ---
 
-import { Fragment } from '@/components/Fragment';
-import { PageTabLayout } from '@/components/Layout/PageTabLayout';
 import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-import { PropsTableTab } from '@/components/propsTable/PropsTableTab';
-import data from '@/data/props-table.json';
+import { PrimitiveTabs } from '@/components/PrimitiveTabs';
+import ReactPage from './react.mdx';
 
 export async function getStaticPaths() {
   return getCustomStaticPath(frontmatter.supportedFrameworks);
@@ -24,18 +22,6 @@ export async function getStaticProps() {
   return { props: {} }
 }
 
-<PageTabLayout 
-  tabComponents={[{
-    title: "Documentation", 
-    children: <Fragment>{({ platform }) => import(`./${platform}.mdx`)}</Fragment>
-  },
-  {
-    title: "Props", 
-    children: <PropsTableTab 
-                componentName={frontmatter.title} 
-                PropsData={data} 
-                htmlElement={frontmatter.htmlElement} 
-                mdnUrl={frontmatter.mdnUrl}
-              />
-  }]}
-/>
+<PrimitiveTabs {...frontmatter}>
+  <ReactPage />
+</PrimitiveTabs>

docs/src/pages/[platform]/components/breadcrumbs/index.page.mdx

@@ -9,11 +9,9 @@ htmlElement: nav
 supportedFrameworks: react
 ---
 
-import { Fragment } from '@/components/Fragment';
-import { PageTabLayout } from '@/components/Layout/PageTabLayout';
 import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-import { PropsTableTab } from '@/components/propsTable/PropsTableTab';
-import data from '@/data/props-table.json';
+import { PrimitiveTabs } from '@/components/PrimitiveTabs';
+import ReactPage from './react.mdx';
 
 export async function getStaticPaths() {
   return getCustomStaticPath(frontmatter.supportedFrameworks);
@@ -25,18 +23,6 @@ export async function getStaticProps() {
   return { props: {} }
 }
 
-<PageTabLayout 
-  tabComponents={[{
-    title: "Documentation", 
-    children: <Fragment>{({ platform }) => import(`./${platform}.mdx`)}</Fragment>
-  },
-  {
-    title: "Props", 
-    children: <PropsTableTab 
-                componentName={frontmatter.title} 
-                PropsData={data} 
-                htmlElement={frontmatter.htmlElement} 
-                mdnUrl={frontmatter.mdnUrl}
-              />
-  }]}
-/>
+<PrimitiveTabs {...frontmatter}>
+  <ReactPage />
+</PrimitiveTabs>