docs(account-settings): starting docs (#3084)

* Update links

* Barebone pages

* Update description

* Use DeveloperPreview

* Move ReactPropsTable to `@components`

* Remove unnecessary space

* Update index.page.mdx

docs/src/data/links.tsx

@@ -128,6 +128,23 @@ export const connectedComponents: ComponentNavItem[] = [
     platforms: ['react', 'vue', 'angular', 'react-native'],
     tertiary: true,
   },
+  {
+    href: '/connected-components/account-settings',
+    label: 'Account Settings',
+    platforms: ['react'],
+  },
+  {
+    href: '/connected-components/account-settings/change-password',
+    label: 'Change Password',
+    platforms: ['react'],
+    tertiary: true,
+  },
+  {
+    href: '/connected-components/account-settings/delete-user',
+    label: 'Delete User',
+    platforms: ['react'],
+    tertiary: true,
+  },
   {
     href: '/connected-components/geo',
     label: 'Geo',

docs/src/pages/[platform]/connected-components/account-settings/DeveloperPreview.tsx

@@ -0,0 +1,15 @@
+import { Alert } from '@aws-amplify/ui-react';
+import { useRouter } from 'next/router';
+
+export const DeveloperPreview = () => {
+  const {
+    query: { platform = 'react' },
+  } = useRouter();
+  if (platform !== 'react') return null;
+
+  return (
+    <Alert variation="info" heading="Developer Preview">
+      Account Settings components are currently in developer preview.
+    </Alert>
+  );
+};

docs/src/pages/[platform]/connected-components/account-settings/change-password/index.page.mdx

@@ -0,0 +1,13 @@
+---
+title: ChangePassword
+metaTitle: ChangePassword
+description: ChangePassword component enables end users to change their password.
+supportedFrameworks: react
+---
+
+import { Fragment } from '@/components/Fragment';
+import { DeveloperPreview } from '../DeveloperPreview';
+
+<DeveloperPreview />
+
+<Fragment>{({ platform }) => import(`./${platform}.mdx`)}</Fragment>

docs/src/pages/[platform]/connected-components/account-settings/change-password/react.mdx

@@ -0,0 +1,3 @@
+## Change Password
+
+TODO

docs/src/pages/[platform]/connected-components/account-settings/delete-user/index.page.mdx

@@ -0,0 +1,13 @@
+---
+title: DeleteUser
+metaTitle: DeleteUser
+description: DeleteUser component allows end users to delete their account permanently from their app.
+supportedFrameworks: react
+---
+
+import { Fragment } from '@/components/Fragment';
+import { DeveloperPreview } from '../DeveloperPreview';
+
+<DeveloperPreview />
+
+<Fragment>{({ platform }) => import(`./${platform}.mdx`)}</Fragment>

docs/src/pages/[platform]/connected-components/account-settings/delete-user/react.mdx

@@ -0,0 +1,2 @@
+## Delete User
+TODO

docs/src/pages/[platform]/connected-components/account-settings/index.page.mdx

@@ -0,0 +1,27 @@
+---
+title: Account Settings
+description: Amplify UI provides account settings components to manage account settings.
+supportedFrameworks: react
+---
+
+import { Fragment } from '@/components/Fragment';
+import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
+import { DeveloperPreview } from './DeveloperPreview';
+
+
+export async function getStaticPaths() {
+  return getCustomStaticPath(frontmatter.supportedFrameworks);
+}
+
+{/*  `getStaticProps` is required to prevent "Error: getStaticPaths was added without a getStaticProps. Without getStaticProps, getStaticPaths does nothing" */}
+
+export async function getStaticProps() {
+  return { props: {} }
+}
+
+<DeveloperPreview />
+
+## Account Settings
+
+TODO
+

docs/src/pages/[platform]/connected-components/in-app-messaging/index.page.mdx

@@ -5,12 +5,12 @@ supportedFrameworks: react|react-native
 ---
 
 import { Fragment } from '@/components/Fragment';
+import ReactPropsTable from '@/components/propsTable/ReactPropsTable';
 import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
 
 import { 
   IN_APP_MESSAGE_DISPLAY_PROPS, 
   MESSAGE_COMPONENTS, 
-  ReactPropsTable,
   USE_IN_APP_MESSAGING_API, 
 } from './props';
 

docs/src/pages/[platform]/connected-components/in-app-messaging/props/index.ts

@@ -1,4 +1,3 @@
-export { default as ReactPropsTable } from './ReactPropsTable';
 export {
   IN_APP_MESSAGE_DISPLAY_PROPS,
   MESSAGE_COMPONENTS,

docs/src/pages/[platform]/connected-components/in-app-messaging/props/styles.react-native.mdx

@@ -1,4 +1,4 @@
-import ReactPropsTable from './ReactPropsTable';
+import ReactPropsTable from '@/components/propsTable/ReactPropsTable';
 import { REACT_NATIVE_MESSAGE_STYLE_PROPS } from './props';
 
 <ReactPropsTable props={REACT_NATIVE_MESSAGE_STYLE_PROPS} />

docs/src/pages/[platform]/connected-components/in-app-messaging/props/styles.react.mdx

@@ -1,4 +1,4 @@
-import ReactPropsTable from './ReactPropsTable';
+import ReactPropsTable from '@/components/propsTable/ReactPropsTable';
 import { REACT_MESSAGE_STYLE_PROPS } from './props';
 
 >The default In-App Messaging components do not handle dark mode using the `ThemeProvider` at this time