@innovaccer/design-system 2.13.3 → 2.13.4-2

package/docs/src/pages/content/button-guidelines/tabs/confusing-buttons.mdx

@@ -1,8 +1,9 @@
 #### Take the right Actions
+Take the right actions in order to move towards your goals. Use them to make your labels predictable and consequential.
 
 <br />
 
-##### Create vs New
+##### Create vs. New
 
 <br />
 
@@ -33,8 +34,6 @@ Lets the user start something from scratch like creating an account or a group e
   </DONTs>
 </Rules>
 
-<br />
-
 **NEW**
 
 Lets the user create a new object like documents, files, folders etc.
@@ -64,7 +63,7 @@ Lets the user create a new object like documents, files, folders etc.
 
 <br />
 
-##### Cancel vs Discard
+##### Cancel vs. Discard
 
 **CANCEL**
 
@@ -91,8 +90,6 @@ Use it to cancel the existing action and close the current modal, dialog, or pag
   </DONTs>
 </Rules>
 
-<br />
-
 **DISCARD**
 
 Lets the user create a new object like documents, files, folders etc.
@@ -114,6 +111,482 @@ Lets the user create a new object like documents, files, folders etc.
 
 <br />
 
+##### Done vs. Ok
+
+**DONE**
+
+Use it to show the user their task is finished and can return back to the previous page or window.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> Done </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'> Over </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+**OK**
+
+Indicates confirmation of an action. Here both letters remains in uppercase. Never use ‘Close’ adjacent to ‘OK’.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> OK </IconWrapper>
+    </InlineMessage>
+     <InlineMessage>
+      <IconWrapper> OK, got it </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        O.k, Ok, ok
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        OK, got it!
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+<br />
+
+##### Export vs. Download
+
+<br />
+
+**EXPORT**
+
+Use export when the user wants to save documents or files in a different format to another location.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> Export all </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper> Export as PDF </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Export everything
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Export into PDF
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+**DOWNLOAD**
+
+Use download when the user wants to transfer files from a remote to a local system. 
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> Download </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper> Download update </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Click here to download
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Yes, download this update now
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+<br />
+
+##### Edit vs. Change
+
+**EDIT**
+
+Use it to modify or change data, value, or text to the current window or page. 
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> Edit </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper> Edit profile </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'> Manage, Change </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'> Edit my profile </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+**CHANGE**
+
+Use it to make modifications or changes to the existing window or page.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> Change group </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Change the group
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+<br />
+
+##### Search vs. Find
+
+**SEARCH**
+
+Use the search label to indicate an attempt to find information on a computer, database or on the internet. Prefer 'Search' over 'Find'. 
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> Search </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper> Advanced search </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'> SEARCH... </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'> Let's Advanced Search </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+**FIND**
+
+Use it to show the process of locating a specific file, document, or any other object on a computer or on the internet.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> Find... </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper> Find out more </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Find here.......
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Click here to Find out more
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+<br />
+
+##### Select vs. Choose
+
+**SELECT**
+
+Use it to select data, value or item from the table. 
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> Select </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper> Select all </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'> Pick </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'> Select all items  </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+**CHOOSE**
+
+Use it to make a more subjective decision like choosing files, groups, or templates.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> Choose files </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Choose these files
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+<br />
+
+##### Import vs. Upload
+
+**IMPORT**
+
+Use import when the user wants to transfer files from one format to another usually within a new file. 
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> Import all </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper> Import template </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'> Import altogether </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'> Import this template </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+**UPLOAD**
+
+Use upload when the user wants to transfer files from a local to a remote system via internet.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> Upload </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper> Upload files </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Click here to upload
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Upload files
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+<br />
+
+##### Delete vs. Remove
+
+**DELETE**
+
+Lets the user eliminate or erase an existing object forever. 
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> Delete </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper> Delete account </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'> Move to trash </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'> Delete this account </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+**REMOVE**
+
+Lets the user remove files, accounts or groups from the current window or page.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> Remove </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper> Remove account </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Delete, Discard
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Remove this account
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+<br />
+
+##### Apply vs. Save
+
+**APPLY**
+
+Lets the user make changes or modifications to a file or document before closing the window.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> Apply changes </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper> Apply filters </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'> Save changes </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'> Apply these filters </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+**SAVE**
+
+Use it to save data or pending modifications to a file or document before closing the window. 
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> Save as </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper> Save and continue </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper> Save changes </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Save As
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Save & continue
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+       Apply changes
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+<br />
+
+##### Close vs. Dismiss
+
+**CLOSE**
+
+Use it to close existing dialog, modal, or page. Never use ‘Close’ adjacent to ‘OK’.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> Close </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper> Save and close </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper> Submit and close </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'> Close this window </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'> Save & close </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'> Submit & close </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+**DISMISS**
+
+Lets the user leave the existing page or window.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> Dismiss </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Dismiss this page
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+<br />
+
 ##### Exit vs Quit
 
 **EXIT**
@@ -133,8 +606,6 @@ Lets the user leave the existing application or website by closing the page or w
   </DONTs>
 </Rules>
 
-<br />
-
 **QUIT**
 
 Use it to shut the application and exit the page.

package/docs/src/pages/content/email-guidelines.mdx

@@ -145,7 +145,7 @@ Greet your recipients appropriately. Make use of professional salutations. Use
 
 #### Email tone
 
-use a friendly tone.
+Use a friendly tone.
 
 <Rules>
   <DOs>
@@ -184,7 +184,7 @@ use a friendly tone.
   </DONTs>
 </Rules>
 
-#### Avoid Acronyms
+#### Avoid acronyms
 
 Avoid using emoticons and acronyms.
 
@@ -307,7 +307,7 @@ Keep the length of the content concise.
   </DONTs>
 </Rules>
 
-#### Using puctuations
+#### Using punctuations
 
 Use exclamation points sparingly.
 

package/docs/src/pages/content/house-rules/tabs/date,-time-&-numbers.mdx

@@ -437,6 +437,30 @@ Put a dollar sign '$' before the amount when talking about US currency. Use deci
 </Rules>
 <br />
 
+#### Percentage (%)
+
+Per cent is generally used in UK and 'percent' is used is US. When you have space constraints just use the symbol of percent %.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>Increases time by 80%</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>Fifty-five percent of your customers are unaware.</IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>Increases time by 80 %</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>Fifty-five per cent of your customers are unaware.</IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
 #### Hash (#)
 
 A hash has many uses but it is majorly used as 'hashtag' on various social media platforms. We use it only for showing serial numbers.

package/docs/src/pages/content/house-rules/tabs/grammer.mdx

@@ -152,7 +152,7 @@ Capitalization chart for slippery words
 </Card>
 <br />
 
-#### Tile case
+#### Title case
 
 In title case the first letters of the words are capitalized except conjunctions, prepositions and articles. Grammatically speaking the title case has some complex rules when it comes to writing. It generally needs a subjective point of view.
 
@@ -238,7 +238,7 @@ Write all email addresses and website URLs in lower case.
 </Rules>
 <br />
 
-#### All Caps
+#### All caps
 
 Use all caps without putting period in the end.
 
@@ -742,3 +742,43 @@ Some major spelling differences in American English. American English is more ob
   </DONTs>
 </Rules>
 <br />
+
+#### Contractions
+
+Use it to help your writing and not ruin it. Avoid overuse of would've, should've, or could've it's difficult to translate in other languages make sure you use it wisely.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>Isn't</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        She'll
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>Weren't</IconWrapper>
+    </InlineMessage>
+  </DOs>
+
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+      Is not
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+       She will
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Were not
+      </IconWrapper>
+    </InlineMessage>
+
+  </DONTs>
+</Rules>
+<br />

package/docs/src/pages/content/house-rules/tabs/punctuations.mdx

@@ -543,6 +543,38 @@ It has several uses but we use it for writing date of birth to separate lines in
 </Rules>
 <br />
 
+#### Ampersand
+
+Try and use it as less as possible. Use it only when space is limited.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>
+        Mr. & Mrs. Johnson
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        Select region & organization
+      </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Mr. David Johnson & Mrs. Grace Johnson
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Select region, patient & organization first
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
 #### i.e./e.g./etc./et al.
 
 ##### i.e