@innovaccer/design-system 2.7.0 → 2.9.0-0

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

@@ -0,0 +1,144 @@
+---
+title: Button guidelines
+description: Use this guide to make your labels predictable and consequential. Your users depend on them, give it some thought and time.
+tabs: ['Confusing buttons', 'Button glossary']
+---
+
+#### A
+
+<br />
+
+##### Access
+
+Use it to give permission to enter a website or give access to secured content.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> Access denied </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Access Denied!
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+##### Accept
+
+Lets the user agree to an action. See also: Decline
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> Accept and continue </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Accept & continue
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+<br />
+
+##### Activate
+
+Use it to make an account or profile active.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> Activate account </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Activate Your Account!
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+<br />
+<br />
+
+#### B
+
+<br />
+
+##### Back
+
+Lets the user return to the previous step, page or a window.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> Go back </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Go back instead
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+##### Browse
+
+Use it to locate and select desired files or documents from a local or a remote system.
+
+<Rules>
+	<DOs>
+		<InlineMessage>
+			<IconWrapper> Browse </IconWrapper>
+		</InlineMessage>
+		<InlineMessage>
+			<IconWrapper> Browse files </IconWrapper>
+		</InlineMessage>
+	</DOs>
+	<DONTs>
+		<InlineMessage>
+			<IconWrapper iconType = 'error'> Browsing... </IconWrapper>
+		</InlineMessage>
+		<InlineMessage>
+			<IconWrapper iconType = 'error'> Browse another file </IconWrapper>
+		</InlineMessage>
+	</DONTs>
+
+</Rules>
+
+<br />
+<br />
+
+#### C
+
+<br />
+
+##### Cancel
+
+Use it to cancel the existing action and close the current modal, dialog, page etc.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> Cancel </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'> Abort </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>

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

@@ -0,0 +1,184 @@
+#### Take the right Actions
+
+<br />
+
+##### Create vs New
+
+<br />
+
+**CREATE**
+
+Lets the user start something from scratch like creating an account or a group etc. Prefer 'Create' over 'New'.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> Create account </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper> Create group </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Create a new account
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Create this group
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+<br />
+
+**NEW**
+
+Lets the user create a new object like documents, files, folders etc.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> New document </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper> New referral </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Create new document
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Create new referral
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+<br />
+
+##### Cancel vs Discard
+
+**CANCEL**
+
+Use it to cancel the existing action and close the current modal, dialog, or page.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> Cancel </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper> Cancel appointment </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'> Abort </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Cancel the appointment
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+<br />
+
+**DISCARD**
+
+Lets the user create a new object like documents, files, folders etc.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> Discard changes </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Discard the changes?
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+<br />
+
+##### Exit vs Quit
+
+**EXIT**
+
+Lets the user leave the existing application or website by closing the page or window. Prefer 'Exit' over 'Quit'.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> Exit </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>Exit page </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+<br />
+
+**QUIT**
+
+Use it to shut the application and exit the page.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> Quit </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'> Quit app </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+<br />
+
+#### Remember to
+
+<ul>
+  <li>Use verbs for initiating an action</li>
+  <li>
+    Use consistent words for labels throughout the product
+  </li>
+  <li>
+    Use sentence case for labels and buttons even if the
+    text is long
+  </li>
+  <li>
+    Keep your microcopy short and crisp without getting
+    vague
+  </li>
+  <li>Avoid punctuations for microcopy</li>
+  <li>
+    Avoid unnecessary words such as 'a', 'an', 'the' etc
+  </li>
+  <li>
+    Avoid the use of Ampersand, always use the full word
+    'and'
+  </li>
+  <li>
+    Avoid tricky words, stick to simple recognizable words
+  </li>
+  <li>Avoid using branded terms for labels and buttons</li>
+</ul>

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

@@ -0,0 +1,107 @@
+---
+title: Email guidelines
+description: Use these guiding principles to make you emails authentic, relevant and focused.
+---
+
+#### Writing subject lines
+
+Write a direct subject line to avoid confusion.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>
+        Action required: Confirm your email address
+      </IconWrapper>
+    </InlineMessage>
+    <br />
+    <InlineMessage>
+      <IconWrapper>
+        Welcome to Innovaccer-app: Here's how to take your
+        first step
+      </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Confirm email address on Innovaccer app to proceed
+        further
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        New account: Login to Innovaccer
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+#### Writing salutations
+
+Greet your recipients appropriately. Make use of professional salutations. Use ‘Hi’ or ‘Hello’ instead of ‘Yo’ and ‘Hey’.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>
+        Hello James, As requested, we have updated your
+        email from maryjames05@innovaccer.com to
+        james.mary@innovaccer.com. You can also go to the
+        innovaccer-app to see the changes.
+      </IconWrapper>
+    </InlineMessage>
+    <div class='ml-7'>
+      <Button>Go to app</Button>
+      <br />
+      If you didn't make this request, please ignore the
+      email or reach out to the support team.
+    </div>
+    <InlineMessage>
+      <IconWrapper>
+        Hi James, Sorry! We had to lock your account because
+        we didn’t see you for the last 90 days. Please
+        submit a request to the system administrator to get
+        it unlocked.
+      </IconWrapper>
+    </InlineMessage>
+    <div class='ml-7'>
+      <Button>Send request</Button>
+      <br />
+      If you didn't make this request, please ignore the
+      email or reach out to the support team.
+    </div>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Hey, As requested, we have updated your email from
+        maryjames05@innovaccer.com to
+        james.mary@innovaccer.com. You can also go to the
+        innovaccer-app to see the changes.
+      </IconWrapper>
+    </InlineMessage>
+    <div class='ml-7'>
+      <Button>Send request</Button>
+      <br />
+      If you didn't make this request, please ignore the
+      email or reach out to the support team.
+    </div>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Yo, Sorry! We had to lock your account because we
+        didn’t see you for the last 90 days. Please submit a
+        request to the system administrator to get it
+        unlocked.
+      </IconWrapper>
+    </InlineMessage>
+    <div class='ml-7'>
+      <Button>Send request</Button>
+      <br />
+      If you didn't make this request, please ignore the
+      email or reach out to the support team.
+    </div>
+  </DONTs>
+</Rules>
+<br />

package/docs/src/pages/content/empty-states.mdx

@@ -0,0 +1,8 @@
+---
+title: Empty states
+description: Never let your users go empty-handed. Turn the dead-end into a delightful experience. Use this guide to educate, direct, and amaze your users
+---
+
+#### Give delightful experience
+
+Turn the dead-end into a delightful experience

package/docs/src/pages/content/error-messages.mdx

@@ -0,0 +1,165 @@
+---
+title: Error messages
+description: Your error messages could be the last straw for users to move forward or abort the process in the middle. Use this guide to help users navigate their way and turn their delay into an experience.
+---
+
+#### Remember to
+
+<ul>
+  <li>Provide a solution to users</li>
+  <li>Avoid using technical jargons </li>
+  <li>Put statements in positive form</li>
+  <li>Don't take the humor overboard</li>
+  <li>Avoid using condescending language</li>
+  <li>Avoid using the word ‘error’ in the error message</li>
+  <li>Avoid error summaries with long paragraphs</li>
+  <li>Avoid sounding robotic to the user</li>
+</ul>
+
+#### Inline validation errors
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>
+        Hey, that mobile number looks familiar. Want to sign
+        in?
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        Sorry! We don't recognize that ID. Please try again.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        These passwords look poles apart. Please recheck.
+      </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Mobile number already registered please sign in to
+        proceed.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Organization Code/ID entered is not valid. Try
+        again.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Passwords do not match.
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+#### Blocking errors
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>
+        <b>Somethings are not in our hands</b>
+      </IconWrapper>
+    </InlineMessage>
+    <div className='ml-7'>
+      Breathe in... Breathe out... Breathe in... Breathe
+      out... Till the time we fix this issue for you.
+    </div>
+    <InlineMessage>
+      <IconWrapper>
+        <b>Oh no!</b>
+      </IconWrapper>
+    </InlineMessage>
+    <div className='ml-7'>
+      You have stepped into the most deserted space called
+      404. Let's get you back home.
+    </div>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        <div>
+          <b>Oops! Something went wrong</b>
+        </div>
+      </IconWrapper>
+    </InlineMessage>
+    <div className='ml-7'>
+      Please wait while we are trying to fix the issue.
+    </div>
+    <br />
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        <b>Error 404</b>
+      </IconWrapper>
+    </InlineMessage>
+    <div className='ml-7'>Page not found!</div>
+  </DONTs>
+</Rules>
+<br />
+
+#### Warning errors
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>
+        You've still got some unfinished goals.
+      </IconWrapper>
+      <div class='ml-7'>
+        <div class='d-flex mt-6'>
+          <Button>Continue</Button>
+          <Button class='ml-4'>Go back</Button>
+        </div>
+      </div>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        <b>Your upload failed!</b>
+      </IconWrapper>
+      <div class='ml-7'>
+        Don't worry this is not the last resort.
+        <Button class='mt-6'>Try again</Button>
+        <Button class='mt-6'>Download report</Button>
+      </div>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        There are some unfinished goals!
+      </IconWrapper>
+    </InlineMessage>
+    <br />
+    <br />
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        <b>Upload failed!</b>
+      </IconWrapper>
+      <div class='ml-7'>
+        Try again, Fail again, Fail better!
+        <Button class='mt-6'>Try again</Button>
+        <Button class='mt-6'>Download report</Button>
+      </div>
+    </InlineMessage>
+
+  </DONTs>
+</Rules>
+<br />
+
+#### Checklist to remember
+
+<ul>
+  <li>Be direct but never robotic</li>
+  <li>Be friendly but never cocky</li>
+  <li>Don't take the humor overboard</li>
+  <li>Don't take the humor overboard</li>
+  <li>Avoid technical jargons</li>
+  <li>Sound positive</li>
+</ul>