include Labels & Text section

aws-amplify · Nov 22, 2022 · 3bff7ff · 3bff7ff
1 parent fa52664
commit 3bff7ff
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 5 deletions.
diff --git a/...omponents/authenticator/customization/customization.labels-and-text.flutter.mdx b/...omponents/authenticator/customization/customization.labels-and-text.flutter.mdx
@@ -1,5 +1,3 @@
-## Labels & Text
-
 Using a similar technique as [Internationalization (I18n)](#internationalization-i18n), you can customize the labels and text of the components.
 
 Instead of implementing full fledged localization through the use of arb file, the example below shows how customize _only_ the text within the "Sign In" button and the titles of the username, email and password fields:

diff --git a/...ents/authenticator/customization/customization.labels-and-text.react-native.mdx b/...ents/authenticator/customization/customization.labels-and-text.react-native.mdx
@@ -0,0 +1,51 @@
+import { Expander, ExpanderItem, Text } from '@aws-amplify/ui-react';
+
+Using the same techniques as [Internationalization (I18n)](#internationalization-i18n), you can customize the labels and text of the components:
+
+<Expander type="single" isCollapsible>
+  <ExpanderItem title={<Text fontWeight="bold">Sign In</Text>} value="sign-in">
+    ```js
+    I18n.putVocabulariesForLanguage('en', {
+      'Sign In': 'Login', // Tab header
+      'Sign in': 'Log in', // Button label
+      'Sign in to your account': 'Welcome Back!',
+      Username: 'Enter your username', // Username label
+      Password: 'Enter your password', // Password label
+      'Forgot your password?': 'Reset Password',
+    });
+    ```
+  </ExpanderItem>
+
+  <ExpanderItem title={<Text fontWeight="bold">Sign Up</Text>} value="sign-up">
+    ```js
+    I18n.putVocabulariesForLanguage('en', {
+      'Create Account': 'Register', // Link text
+      'Create a new account': 'New User', // Header text
+      'Confirm Password': 'Confirm your password', // Confirm Password label
+      Email: 'Enter your email',
+      'Phone Number': 'Enter your phone number',
+    });
+    ```
+  </ExpanderItem>
+
+  <ExpanderItem title={<Text fontWeight="bold">Reset Password</Text>} value="reset-password">
+    ```js
+    I18n.putVocabulariesForLanguage('en', {
+      'Reset your password': 'Forgot your password?',
+      'Enter your username': 'Username or Email',
+      'Send code': 'Reset my password',
+      'Back to Sign In': 'Back to Login',
+    });
+    ```
+  </ExpanderItem>
+
+  <ExpanderItem title={<Text fontWeight="bold">Setup TOTP</Text>} value="setup-totp">
+    ```js
+    I18n.putVocabulariesForLanguage('en', {
+      Code: '2FA Code',
+      Confirm: 'Confirm 2FA',
+      'Back to Sign In': 'Back to Login',
+    });
+    ```
+  </ExpanderItem>
+</Expander>
diff --git a/...ed-components/authenticator/customization/customization.labels-and-text.web.mdx b/...ed-components/authenticator/customization/customization.labels-and-text.web.mdx
@@ -5,8 +5,6 @@ import { Expander, ExpanderItem, Text } from '@aws-amplify/ui-react';
 
 import { LabelsAndTextDemo } from './LabelsAndTextDemo';
 
-## Labels & Text
-
 Using the same techniques as [Internationalization (I18n)](#internationalization-i18n), you can customize the labels and text of the components:
 
 <Expander type="single" defaultValue="default-values" isCollapsible>

diff --git a/...ages/[platform]/connected-components/authenticator/customization/index.page.mdx b/...ages/[platform]/connected-components/authenticator/customization/index.page.mdx
@@ -41,7 +41,9 @@ export async function getStaticProps() {
   {({ platform }) => import(`./customization.i18n.${platform}.mdx`)}
 </Fragment>
 
-<Fragment useCommonWebContent platforms={['web', 'flutter']}>
+## Labels & Text
+
+<Fragment useCommonWebContent>
   {({ platform }) => import(`./customization.labels-and-text.${platform}.mdx`)}
 </Fragment>