@innovaccer/design-system 2.7.0 → 2.9.0-0

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

@@ -0,0 +1,236 @@
+#### Speak to ALL
+
+Not everyone is going to read everything. People skim through content and if it doesn't interest them, they leave. So, write for all types of readers and keep everyone hooked.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> Successfully uploaded </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper> Update available </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        The selected file is uploaded from your desktop
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Install Latest Version
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+#### Stay FOCUSED
+
+Don't get lost in your thoughts, remove the fluff and focus on what you want to say to your users.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>Phone number not available</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper> Patient not found </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        No phone number is available for selected state.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        We could not find any profile that matches your
+        patient.
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+#### Stick to AMERICANISM
+
+Driven by our customer base we need to stick to American English and make sure our products, user interface, website and product documentation are uniform everywhere. American English prefers to go with simpler sentence structure. For example: Brits go on holidays, while Americans go on vacation.
+
+<IconWrapper>
+  American sayings:
+  <br />
+  "It's not rocket science." "Under the weather." "Break a
+  leg." "Period."
+</IconWrapper>
+
+<br />
+<br />
+<br />
+
+#### Go BASIC
+
+Going basic doesn't mean you start sounding bland and dull. You can of course add a little wink to your content.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>Specific language</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper> Definite language </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper> Consistent language </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        General language
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Vague language
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Random language
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+#### Stay with YOU
+
+Get more personal with your words. People love being spoken or written to. The word 'you' is both the subject and the object form. A single word like 'you' can refer to one or more than one person.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>
+        You are all set to install the newest version.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        Update the way you take notes with the newest
+        version of InNote.
+      </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        The new version is ready to be installed.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Update the better version of InNote.
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+#### Get more ACTIVE
+
+Users struggle with passive voice. It sounds very verbose, ambiguous and odd. They understand you better, when you use the active form.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>
+        You are reading this web page.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>Jane wrote the email.</IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        The web page is being read by you.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        The email was written by Jane.
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+#### Cut the CRAP
+
+You don't need what you don't need. No unnecessary words. No unnecessary sentences. Not that you make all the sentences short, avoid the detailing and treatment it needs. Write, to make every word tell.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>He</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>Big picture</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>Advanced</IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        He is a man who
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        This is the big picture.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        The most advanced
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+#### Go GENDERLESS
+
+Sound genderless and address your users' in the right way. Use 'they', 'them', 'their' if the user's gender is unknown.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>They, them, their, unknown</IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>LGBTQA</IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+#### Stay POSITIVE
+
+While writing always stick to being positive because nobody likes to hear negative things.
+
+<IconWrapper>
+  Better connections mean better outcomes.
+</IconWrapper>
+
+<IconWrapper>
+  Effectively engage and communicate with your patients.
+</IconWrapper>

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

@@ -0,0 +1,462 @@
+#### Dates
+
+<br />
+
+<Paragraph>
+  Spell out the day of the week and month. Use abbreviations
+  if there are space constraints
+</Paragraph>
+Format: <b>MM/DD/YYYY</b>
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> Jan 5 </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper> January 5 </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>January 5, 2011</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>Wednesday, January 5, 2011 </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper> 10/17/2018 </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>Jan, 5</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        January Fifth
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        January, 5 2011
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        January 5, 2011, Wednesday
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        10 / 17 / 2018
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+#### Months
+
+Avoid using abbreviations unless there are space constraints. Never use period or apostrophe with the abbreviations and make sure you use sentence case for writing these months.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>
+        January, February, March, April, May, June, July,
+        August, September, October, November, and December
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct,
+        Nov, and Dec
+      </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        JANUARY, FEBRUARY, MARCH, APRIL, MAY, JUNE, JULY,
+        AUGUST, SEPTEMBER, OCTOBER, NOVEMBER, AND DECEMBER
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Jan., Feb., Mar., Apr., May, Jun., Jul., Aug., Sep.,
+        Oct., Nov., and Dec.
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+#### Days of the week
+
+Avoid using abbreviations unless there are space constraints. Never use period with the abbreviations and make sure you use sentence case for writing these days of the week.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>
+        Sunday, Monday, Tuesday, Wednesday, Thursday,
+        Friday, and Saturday
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        Sun, Mon, Tue, Wed, Thu, Fri, and Sat
+      </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        SUNDAY, MONDAY, TUESDAY, WEDNESDAY, THURSDAY,
+        FRIDAY, AND SATURDAY
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Sun., Mon., Tue, Wed., Thu., Fri., & Sat. SUN.,
+        MON.,TUE.,WED.,THU.,FRI., & SAT.
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+#### Seasons
+
+Avoid referring to seasons if you can, instead try and use months or calendar quarters. If you really have to use seasons, remember to only capitalize it when it's the first word of a sentence. Otherwise keep all season in lowercase unless you are referring to an issue of a publication like (Spring 2019)
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>
+        A lot has happened since last summer.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        Fall 2019 semester ends in December.
+      </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        A lot has happened since last Summer.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        fall 2019 semester ends in December.
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+#### Time
+
+Always use 12-hour clock for writing time. Make use of AM and PM preceded by a space and in capital letters.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>2:00 PM</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>6:00 AM</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>12:00 (noon)</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>00:00 (midnight)</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>12:01 AM</IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>14:00 hrs</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>6:00 hrs</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        12:00 (midnight)
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        00:00 (noon)
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>Midnight</IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+#### Time zone
+
+Common time zones referred in U.S. Pacific standard time (PST), Mountain standard time (MST), Central daylight time (CDT), Eastern daylight time (EDT) etc.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>4:42 PM (PST)</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>2:30 AM (CST)</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        Wednesday, January 5, 2011, 9:30 PM (IST)
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        Wed, Jan 5, 2011, 9:30 PM (IST)
+      </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        4:42 p.m. pst
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        2:30 a.m. cst
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        9:30 PM (IST) January 5, 2011, Wednesday
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Jan 5, 2011, Wed, 9:30 PM (IST)
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+#### Abbreviation chart
+
+Abbreviation chart for units of time
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        unit: 'Nanosecond',
+        abbreviation: 'Do not abbreviate',
+      },
+      {
+        unit: 'Microsecond',
+        abbreviation: 'Do not abbreviate',
+      },
+      {
+        unit: 'Millisecond, milliseconds',
+        abbreviation: 'ms',
+      },
+      {
+        unit: 'Second, seconds',
+        abbreviation: 'sec, secs',
+      },
+      {
+        unit: 'Minute, minutes',
+        abbreviation: 'min, mins',
+      },
+      {
+        unit: 'Hour, hours',
+        abbreviation: 'h, hr, hrs',
+      },
+      {
+        unit: 'Day, days',
+        abbreviation: 'd',
+      },
+      {
+        unit: 'As',
+        abbreviation: 'from',
+      },
+      {
+        unit: 'Week, weeks',
+        abbreviation: 'wk, wks',
+      },
+      {
+        unit: 'Month, months',
+        abbreviation: 'mo, mos',
+      },
+      {
+        unit: 'Year. years',
+        abbreviation: 'yr, yrs',
+      },
+    ]}
+    schema={[
+      {
+        name: 'unit',
+        displayName: 'Unit',
+        width: '50%',
+        sorting: false,
+        separator: true,
+      },
+      {
+        name: 'abbreviation',
+        displayName: 'Abbreviation',
+        width: '50%',
+        sorting: false,
+        separator: true,
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+<br />
+
+#### Numbers
+
+You can use numbers in various ways and see examples which are shared below. Remember three numbers get a comma.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>887</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>3,456</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>14,785</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>You have 3 unread messages</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>12 Requests pending</IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>0,887</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>3;456</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>1,4,785</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        You have three unread messages
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        Twelve Requests Pending
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+#### Phone numbers
+
+Use dashes without space between numbers. Use a country code if referring to people outside your country.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>(555) 670-1769</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>(348) 563-6620 </IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        555 - 670 - 1769
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        (348)-563-6620
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />
+
+#### Currency
+
+Put a dollar sign '$' before the amount when talking about US currency. Use decimal and number of cents if more than 0. Follow the same with other currencies.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>$500</IconWrapper>
+    </InlineMessage>
+    <br/>
+    <br/>
+    <InlineMessage>
+      <IconWrapper>$0.50 </IconWrapper>
+    </InlineMessage>
+
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        $ 500
+        <br />
+        500$
+        <br />
+        $500 dollars
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'>
+        $ 0.50
+        <br />
+        0.50$
+      </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.
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>#2</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>#204</IconWrapper>
+    </InlineMessage>
+  </DOs>
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType='error'># 2</IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType='error'># 204</IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+<br />