Adding an Arabic example to the homepage of Project Fluent

public/index.html

@@ -305,6 +305,53 @@ <h2>The Polish Translation</h2>
             </p>
           </div>
         </article>
+
+        <article>
+            <div id="example4-app" class="example-vertical"></div>
+            <div class="example-description">
+              <h2>The Arabic Translation</h2>
+
+              <p>
+
+                The Arabic translation is yet another example of how flexible Fluent can be, using the example of
+                <code>few</code> and <code>many</code>.
+
+              </p>
+              <p>
+
+                In this example we added a <code>tabs-count-full</code> variable
+                that stores all the possible plural (textual) variations of the word
+                <em>tab</em>. Arabic has
+                <a href="https://unicode-org.github.io/cldr-staging/charts/37/supplemental/language_plural_rules.html#ar"
+                  target="_blank">6 variations</a> for a numbered element.
+                0, 1, 2, few (<code>3~10, 103~110, 1003</code>), many
+                (<code>11~99, 311~399</code>) and other (<code>100~102, 200~202, 
+                  300~302, …</code>).<br>
+                After we prodive a definition for each variation all we have to do
+                then is include it in our usual messages. This reduces the amount
+                of work needed to be done by the localization community, by
+                defining the 6 possible cases of a word in one place then calling
+                it in any phrase without worrying about its integration status.
+
+              </p>
+              <p>
+
+                For this example to work we had to alter the <code>min</code> and
+                <code>max</code> parameters of the slider so it can put into
+                consideration the cases of <code>many</code> like
+                <em>11, 12, 18, …</em>.
+
+              </p>
+
+              <p>
+
+                Also adding <code>dir="auto"</code> reorganized the variables
+                to the correct order in our Arabic example since it's an RTL
+                language.
+
+              </p>
+            </div>
+          </article>
       </section>
     </div>
     <div>
@@ -337,4 +384,4 @@ <h2>The Polish Translation</h2>
       </footer>
     </div>
   </body>
-</html>
+</html>

src/controls.js

@@ -7,7 +7,7 @@ export function TextInput(props) {
     return (
         <Fragment>
             <dt>${name}</dt>
-            <dd>
+            <dd dir="auto">
                 <input
                     type="text"
                     {...props}

src/example.js

@@ -12,7 +12,7 @@ function Message(props) {
     return (
         <Fragment>
             <dt>{id}</dt>
-            <dd>{value}</dd>
+            <dd dir="auto">{value}</dd>
         </Fragment>
     );
 }

src/index.js

@@ -42,8 +42,8 @@ function Example0() {
 }
 
 ReactDOM.render(
-   <Example0 />,
-   document.getElementById('demo-app')
+    <Example0 />,
+    document.getElementById('demo-app')
 );
 
 const example1 = {
@@ -171,3 +171,43 @@ ReactDOM.render(
     </Example>,
     document.getElementById('example3-app')
 );
+
+
+
+const example4 = {
+    locale: "ar",
+    translations: ftl`
+    tabs-close-button = أغلق    
+    tabs-count-full = {$tabCount ->
+        [one] تبويب واحد
+        [two] تبويبان
+        [few] {$tabCount} تبوبات
+        [many] {$tabCount} تبويبا
+        *[other] {$tabCount} تبويب
+    }
+    tabs-close-tooltip = {tabs-close-button} {tabs-count-full}
+    tabs-close-warning =
+        أنت على وشك إغلاق  {tabs-count-full}.
+        هل أنت متأكد من المواصالة؟
+
+    ## Syncing
+
+    -sync-brand-name = حساب فيرفوكس
+
+    sync-dialog-title = {-sync-brand-name}
+    sync-headline-title = {-sync-brand-name}: أفضل طريقة لتحمل بياناتك معك أينما كنت.
+    sync-signedout-title =
+        سجل الدخول بإستخدام {-sync-brand-name} الخاص بك.
+    `,
+    externals: {
+        tabCount: 2,
+    },
+    height: "37rem",
+};
+
+ReactDOM.render(
+    <Example {...example4}>
+        <RangeInput name="tabCount" min="1" max="22" step="1" />
+    </Example>,
+    document.getElementById('example4-app')
+);