react-native-ui-lib 8.0.1 → 8.1.0

package/src/components/numberInput/__tests__/index.spec.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { NumberInputDriver } from "../NumberInput.driver";
+import NumberInput from "../index";
+const TEST_ID = 'numberInput';
+const onChangeNumber = () => {};
+const defaultProps = {
+  testID: TEST_ID,
+  placeholder: 'Placeholder',
+  centered: true,
+  onChangeNumber
+};
+const TestCase = props => {
+  return <NumberInput {...defaultProps} {...props} />;
+};
+describe('NumberInput', () => {
+  it('Should display formatted number', async () => {
+    const renderTree = render(<TestCase />);
+    const numberInputDriver = NumberInputDriver({
+      renderTree,
+      testID: TEST_ID
+    });
+    expect(numberInputDriver.exists()).toBe(true);
+    numberInputDriver.changeText('1234567');
+    expect(await numberInputDriver.getValue()).toEqual('12,345.67');
+  });
+  it('Should update number when fractionDigits change', async () => {
+    const renderTree = render(<TestCase />);
+    const numberInputDriver = NumberInputDriver({
+      renderTree,
+      testID: TEST_ID
+    });
+    numberInputDriver.changeText('1234567');
+    expect(await numberInputDriver.getValue()).toEqual('12,345.67');
+    renderTree.rerender(<TestCase fractionDigits={4} />);
+    expect(await numberInputDriver.getValue()).toEqual('123.4567');
+  });
+});

package/src/components/numberInput/numberInput.api.json

@@ -60,24 +60,149 @@
       "description": "Most of TextField's props can be applied, except for ones that are passed directly via named props."
     }
   ],
-  "snippet": [
-    "<NumberInput initialValue={1506$1} onChange={onChange$2} placeholder={'Price$3'}/>"
-  ],
+  "snippet": ["<NumberInput initialValue={1506$1} onChange={onChange$2} placeholder={'Price$3'}/>"],
   "docs": {
     "hero": {
       "title": "NumberInput",
-      "description": "Number Input to create an input with a formatted number"
+      "description": "Number Input allows users to enter numeric values (e.g., amount, price, quantity.) in a single line input field, using a masked input.\nNumber Input comes as a stand alone input- as main or only input in a screen.",
+      "type": "hero",
+      "layout": "horizontal",
+      "content": [
+        {
+          "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/NumberInput/NumberInput_Overview_Hero.png"
+        }
+      ]
     },
     "tabs": [
+      {
+        "title": "Overview",
+        "sections": [
+          {
+            "type": "section",
+            "title": "Usage Examples",
+            "description": "markdown:The number input uses masked input, it allows the user to easily enter fixed set input where a certain format is needed (in this case- numeric values for prices with decimals, amounts, weight).  \\n  \\n\nThe masked input allows a more focused typing format, compared to the Main Input which allows the user to type more freely.",
+            "content": [
+              {
+                "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=14802-145014&m=dev&embed-host=share"
+              },
+              {
+                "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=14802-145037&m=dev&embed-host=share"
+              },
+              {
+                "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=14802-145069&m=dev&embed-host=share"
+              }
+            ]
+          },
+          {
+            "type": "table",
+            "columns": ["Type", "Component"],
+            "items": [
+              {
+                "title": "Currency",
+                "description": "",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/NumberInput/NumberInput_Overview_Type_Currency.png"
+                  }
+                ]
+              },
+              {
+                "title": "Percentage",
+                "description": "",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/NumberInput/NumberInput_Overview_Type_Percentage.png"
+                  }
+                ]
+              },
+              {
+                "title": "Weight",
+                "description": "",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/NumberInput/NumberInput_Overview_Type_Weight.png"
+                  }
+                ]
+              },
+              {
+                "title": "Number only",
+                "description": "",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/NumberInput/NumberInput_Overview_Type_NumberOnly.png"
+                  }
+                ]
+              }
+            ],
+            "title": "Number Types",
+            "description": "markdown:The price input supports the usage of prefix, sufix or none; depending on the case.  The supported number types presets are: Currency, Percentage, Weight, or number only.  \\n  \\n\nDon’t use it to enter unique numeric values such as phone numbers or dates."
+          },
+          {
+            "type": "table",
+            "columns": ["State", "Component"],
+            "items": [
+              {
+                "title": "Inactive",
+                "description": "Label - $textDefault\\n\nValue - $textDefault\\n\nDivider - $outlineDisabled",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/NumberInput/NumberInput_Overview_State_Inactive.png"
+                  }
+                ]
+              },
+              {
+                "title": "Active / Typing",
+                "description": "Once in focus, Keyboard opens\\n\nLabel - $textDefault\\n\nValue - $textDefault\\n\nDivider - $outlinePrimary",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/NumberInput/NumberInput_Overview_State_Active.png"
+                  }
+                ]
+              },
+              {
+                "title": "Disabled",
+                "description": "Label - $textDisabled\\n\nValue - $textDisabled\\n\nDivider - $outlineDisabled",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/NumberInput/NumberInput_Overview_State_Disabled.png"
+                  }
+                ]
+              },
+              {
+                "title": "Validation error",
+                "description": "markdown:An error can be caused when the entered amount is higher than the max value.  \\n  \\n\nLabel - $textDefault\\n\nValue - $textDefault\\n\nValidation message - $textDangerLight Validation\\n\nicon - $iconDangerLight\\n\nDivider - $outlineDanger",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/NumberInput/NumberInput_Overview_State_ValidationError.png"
+                  }
+                ]
+              }
+            ],
+            "title": "States",
+            "description": "markdown:NumberInput comes as stand alone Input, as Main or only input in a screen  \\n  \\n\n**Style:**  \\n  \\n\nLabel is optional\\n\nLabel & error message- “bodySmallMedium”\\n\nNumber - “text30M”\\n\nCurrency / Percentage- “text50M”\\n"
+          },
+          {
+            "type": "section",
+            "title": "Specs",
+            "description": "markdown:Max width S5 padding from screen’s edge.\\n\nS4 inside padding.",
+            "content": [
+              {
+                "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/NumberInput/NumberInput_Overview_Specs.png"
+              }
+            ]
+          }
+        ]
+      },
       {
         "title": "UX Guidelines",
         "sections": [
           {
             "type": "section",
+            "title": "Do’s & Don'ts",
+            "description": "",
             "content": [
               {
-                "value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=8539-460248&embed-host=share",
-                "height": 1600
+                "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/NumberInput/NumberInput_UXGuidelines_DosAndDonts.png"
               }
             ]
           }

package/src/components/overlay/index.js

@@ -4,6 +4,7 @@ import { StyleSheet, Image } from 'react-native';
 import { Colors } from "../../style";
 import View from "../view";
 import Assets from "../../assets";
+import Constants from "../../commons/Constants";
 const OVERLY_TYPES = {
   VERTICAL: 'vertical',
   TOP: 'top',
@@ -109,7 +110,7 @@ class Overlay extends PureComponent {
 const styles = StyleSheet.create({
   container: {
     ...StyleSheet.absoluteFillObject,
-    width: undefined
+    width: Constants.isWeb ? '100%' : undefined
   },
   top: {
     bottom: undefined,

package/src/components/pageControl/pageControl.api.json

@@ -75,7 +75,14 @@
   "docs": {
     "hero": {
       "title": "PageControl",
-      "description": "Page indicator, typically used in paged scroll-views"
+      "description": "Page Control provides orientation by showing the total number of items and indicating the currently visible item.\nIt is most commonly used in components such as galleries, card carousels, and slideshows.",
+      "type": "hero",
+      "layout": "horizontal",
+      "content": [
+        {
+          "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/PageControl/Preview.png"
+        }
+      ]
     },
     "tabs": [
       {
@@ -91,6 +98,173 @@
             ]
           }
         ]
+      },
+      {
+        "title": "Overview",
+        "sections": [
+          {
+            "type": "section",
+            "title": "Usage Examples",
+            "description": "",
+            "content": [
+              {
+                "value": "\"https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=13804-18246&embed-host=share\""
+              }
+            ]
+          },
+          {
+            "type": "table",
+            "columns": [
+              "Point of reference",
+              "Swipe forward (left)",
+              "Swipe back (right)"
+            ],
+            "items": [
+              {
+                "title": "1st item",
+                "description": "",
+                "content": [
+                  {
+                    "props": {
+                      "numOfPages": 7,
+                      "currentPage": 1
+                    }
+                  },
+                  {
+                    "props": {
+                      "numOfPages": 7,
+                      "currentPage": 7
+                    }
+                  }
+                ]
+              },
+              {
+                "title": "2nd item",
+                "description": "",
+                "content": [
+                  {
+                    "props": {
+                      "numOfPages": 7,
+                      "currentPage": 2
+                    }
+                  },
+                  {
+                    "props": {
+                      "numOfPages": 7,
+                      "currentPage": 6
+                    }
+                  }
+                ]
+              },
+              {
+                "title": "3rd item",
+                "description": "",
+                "content": [
+                  {
+                    "props": {
+                      "numOfPages": 7,
+                      "currentPage": 3
+                    }
+                  },
+                  {
+                    "props": {
+                      "numOfPages": 10,
+                      "currentPage": 4
+                    }
+                  }
+                ]
+              },
+              {
+                "title": "4th item",
+                "description": ""
+              },
+              {
+                "title": "5th item up to 3rd from the last",
+                "description": "",
+                "content": [
+                  {
+                    "props": {
+                      "numOfPages": 10,
+                      "currentPage": 5
+                    }
+                  },
+                  {
+                    "props": {
+                      "numOfPages": 10,
+                      "currentPage": 4
+                    }
+                  }
+                ]
+              },
+              {
+                "title": "3rd from the last",
+                "description": "",
+                "content": [
+                  {
+                    "props": {
+                      "numOfPages": 10,
+                      "currentPage": 8
+                    }
+                  },
+                  {
+                    "props": {
+                      "numOfPages": 10,
+                      "currentPage": 3
+                    }
+                  }
+                ]
+              },
+              {
+                "title": "One before last item",
+                "description": "",
+                "content": [
+                  {
+                    "props": {
+                      "numOfPages": 10,
+                      "currentPage": 9
+                    }
+                  },
+                  {
+                    "props": {
+                      "numOfPages": 10,
+                      "currentPage": 2
+                    }
+                  }
+                ]
+              },
+              {
+                "title": "Last item",
+                "description": "",
+                "content": [
+                  {
+                    "props": {
+                      "numOfPages": 10,
+                      "currentPage": 10
+                    }
+                  },
+                  {
+                    "props": {
+                      "numOfPages": 10,
+                      "currentPage": 1
+                    }
+                  }
+                ]
+              }
+            ],
+            "title": "Page control display",
+            "description": ""
+          },
+          {
+            "type": "section",
+            "title": "Spec",
+            "description": "",
+            "content": [
+              {
+                "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/PageControl/spec.png"
+              }
+            ]
+          }
+        ]
       }
     ]
   }