@innovaccer/design-system 2.7.0 → 2.9.0-0

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

@@ -0,0 +1,666 @@
+---
+title: House rules
+description: Developers, Designers, Product Managers, Marketing folks and UX-ers you've got this! Use these tools to write creatively, effectively and brilliantly.
+tabs:
+  [
+    'Basics',
+    'Punctuations',
+    'Grammer',
+    'Date, Time & Numbers',
+  ]
+---
+
+<Heading>Value based punctuations</Heading>
+
+Punctuations are saving grace! The language as we know is never ending... So, to put emphasis, on certain words & sentences - stick to the brand house rules. See when, where & how to place them.
+
+#### Period
+
+Use it to end the sentence. Period always goes inside the quotation mark.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>
+        Spend more time with patients, and less on
+        paperwork.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper> "Hurry up." </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        No more partial views of patients.
+      </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Spend more time with patients. And less on
+        paperwork.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        "Hurry up”.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        No more partial views of patients
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+#### Comma
+
+Use commas to separate items in a series. When listing something use serial commas also known as Oxford comma.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>Lawson, Joy paperwork.</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        We had coffee, cheese and crackers, and
+        candies.{' '}
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        Point-of-care technology for smarter, holistic care.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        Spend more time with patients, and less on
+        paperwork.
+      </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Lawson Joy,
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        We had coffee, cheese and crackers and candies.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Point-of-care technology, for smarter, holistic
+        care.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Spend more time, with patients, and less on
+        paperwork.
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+#### Colon
+
+You can use a colon for three different things:
+
+<ul>
+  <li>Introducing a list</li>
+  <li>Putting emphasis</li>
+  <li>Separate hours from minutes</li>
+</ul>
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>
+        Make sure your password has: 8 characters 1
+        uppercase character (A, K, G etc.) 1 lowercase
+        character (h, m, b etc.) 1 numeric character (6, ,9,
+        5 etc.) 1 special character (@, #, !, etc.)
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        Remember the old saying: Be careful of what you wish
+        for.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>02:00 PM</IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Make sure your password has 8 characters 1 uppercase
+        character (A, K, G etc.) 1 lowercase character (h,
+        m, b etc.) 1 numeric character (6, ,9, 5 etc.) 1
+        special character (@, #, !, etc.)
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Remember the old saying; be careful of what you wish
+        for.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>02-36 PM</IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+#### Ellipses
+
+Use it to indicate omitted words. But remember not to get swayed away with it unnecessarily. Think, reflect and apply.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>Start typing here...</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>Please wait...</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>Loading...</IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Start typing here... in 250 characters...
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Please... Wait...
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Loading........
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+#### Exclamation point
+
+A well-timed one can make things feel alive. But try not to overuse it.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>
+       Congratulations!
+        <br />
+      You have successfully uploaded the file.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        Oh no! We didn't expect that to happen.
+        Stay connected by checking your internet settings.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        Hurray!!!
+        <br />
+        You completed all your pending tasks for today.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        Hi!
+        <br />
+        Is there anything I can help you with?</IconWrapper>
+    </InlineMessage>
+
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Congratulations!!!!
+        <br />
+        You have successfully uploaded the file.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+       Oh no!!! We didn't expect that to happen! Stay connected! By checking your internet connection!
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Hurray!!!!!!!!!!
+        <br />
+        You completed all your pending tasks for today!
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Hi !
+        <br />
+        Is there anything I can help you with?
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+#### Hyphen
+
+Use a hyphen to link words or indicate range or span.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>Omni-channel communication</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        Point-of-care technology for smarter, holistic care.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        Simplify your value-based journey.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>450-500 pages</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>Phone: (555) 670-1769</IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Omni channel communication
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Point of care technology for smarter, holistic care.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Simplify your value based journey.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        450 - 500 pages
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Phone - (555) - 670 - 1769
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+#### En dash
+
+Use it for span or range of numbers.
+
+<b>Keystrokes</b>: option+hyphen = – en dash
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>1999–2009</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        March 7–March 8 at the Sheraton Hotel
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>December 10–28, 2019</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>$90–$900</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        Australia–USA is a long flight
+      </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        1999 – 2009
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        March 7 – March 8 at the Sheraton Hotel
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        December 10–28–2019
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>$90 – $900</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Australia – USA is a long–flight
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+#### Em dash
+
+A versatile punctuation that can take place of comma, parentheses or colon depending on the context..
+
+<b>Keystrokes</b>: shift+option+hyphen = — em dash
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>
+        Please call my Manager — Jenny Wilson — on Thursday.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        My uncle loves chicken — my aunt loves salmon.
+      </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Please call my Manager—Jenny Wilson—on Thursday.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        My uncle loves chicken—my aunt loves salmon.
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+#### Question mark
+
+Use it to ask questions, and not unnecessary ones.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>
+        Hi!
+        <br />
+        Is there anything I can help you with?
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        Are you sure you want to continue?
+      </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Hi!
+        <br />
+        Is there anything I can help you with???
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Are you sure? you want to continue...
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+#### Quotation mark
+
+Use it to show someone else has said it and you can say it too. Single quotation mark is used for quotation within a quotation. Remember 'period' and 'comma' go inside the quotation marks.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>
+        "I hope you will be here," he said.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        Brian told me, "Diane said, 'This will never work.'
+        "
+      </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        "I hope you will be here", he said.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Brian told me, "Diane said, 'This will never work'.
+        "
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+#### Apostrophe
+
+This has three uses contractions, plurals & possessives.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>
+        We're on a mission to organize healthcare data.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        The writers' desks. (multiple writers)
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        Measure your network’s outcomes.
+      </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        We are on a mission to organize healthcare data.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        The writer's desks.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Measure your networks' outcomes.
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+#### Slash
+
+It has several uses but we use it for writing date of birth to separate lines in prose, shorthand for and, per, or and used for certain abbreviations like c/o care and w/o without etc.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>
+        Joy Lawson's DOB: 02/01/1943
+      </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Joy Lawson's DOB: 02 / 01 / 1943
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+#### i.e./e.g./etc./et al.
+
+##### i.e
+
+Use the word 'that is' rather than i.e. (id est), unless you have limited space.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>
+        The fever may last for a short period of time—that
+        is, three to five days.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        After work, I’ll walk over to that new sports arena,
+        i.e., Thunderdome.
+      </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        The fever may last for a short period of time—that
+        ie., three to five days.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        After work, I’ll walk over to that new sports arena,
+        ie., Thunderdome.
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+##### e.g.
+
+Use the word 'example' rather than e.g. (exempli gratia), unless you have limited space.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>
+        Many factors are important, for example class,
+        gender, age and ethnicity.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        Many countries, e.g., Australia, Hong Kong, and
+        Israel.
+      </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Many factors are important, for eg. class, gender,
+        age and ethnicity.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Many countries, eg., Australia, Hong Kong, and
+        Israel.
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+##### etc.
+
+Use the word etc. (et cetera), when listing extensively. Avoid using etc. in reference to people.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>
+        Medical devices (stents, prostheses, catheters,
+        etc.) are regulated by the FDA.
+      </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Medical devices (stents, prostheses, catheters, &
+        etc.) are regulated by the FDA.
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+##### et al.
+
+Avoid usage of et al. (et alii), unless there are more than two authors.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>
+        "This article was written by Sandra, James, Paul, et
+        al."
+      </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        "This article was written by Sandra, James, Paul, &
+        et al."
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />

package/docs/src/pages/content/placeholder-text.mdx

@@ -0,0 +1,58 @@
+---
+title: Placeholder text
+description: Use this guide to fill in your user's blanks. Navigate their way by helping, educating, and directing them.
+---
+
+#### Remember to
+
+<ul>
+  <li>Avoid redundant text</li>
+  <li>Motivate users to type</li>
+  <li>Provide values that are clear and to the point</li>
+  <li>Make your text contextual and fun</li>
+  <li>Avoid lengthy text</li>
+</ul>
+
+#### Types
+
+##### Search
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>Search</IconWrapper>
+    </InlineMessage>
+    <br />
+    <InlineMessage>
+      <IconWrapper>
+        Search by Patient's Name or EMPI
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        Search Patient, PCP or Activity
+      </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Find...
+        <br />
+        Search...
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Search by patien'ts name for e.g. Joy Lawson or EMPI
+        ID
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Search Patient e.g. Joy Lawson, PCP e.g. Dr. Philips
+        or Activity e.g. In Progress
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>