@innovaccer/design-system 2.7.0 → 2.9.0-0

package/docs/src/pages/content/rules.mdx

@@ -0,0 +1,136 @@
+---
+title: Rules guidelines
+description: Use this guide to make DOs & DONTs components.
+---
+
+Use this guide to make DOs & DONTs components.
+
+#### Single
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> Create account </IconWrapper>
+    </InlineMessage>
+  </DOs>
+
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType = 'error'> Create a new account </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+<br />
+
+#### Multiple
+
+<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 />
+
+#### Multi-line
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> This is where all the care conversations happen between the team members. </IconWrapper>
+    </InlineMessage>
+  </DOs>
+
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType = 'error'> This is where all the care conversations happen between the team members. </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+<br />
+
+#### Multi-line with a heading
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>
+        <b>Here's to new beginnings! Let all your care conversations happen here</b>
+      </IconWrapper>
+      <p class='ml-7'>This is where all the care conversations happen between the team members.</p>
+    </InlineMessage>
+  </DOs>
+
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType = 'error'> <b>No Messages</b> </IconWrapper>
+      <p class='ml-7'>This is where all the care conversations happen between the team members.</p>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+<br />
+
+#### Multi-line with a heading
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> 
+        <b>Here's to new beginnings! Let all your care conversations happen here</b>
+      </IconWrapper>
+      <div class='ml-7'>
+        <p>Let all your care conversations happen here.</p>
+        <Button>Start conversation</Button>
+      </div>
+    </InlineMessage>
+  </DOs>
+
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType = 'error'> <b>No Messages</b> </IconWrapper>
+      <div class='ml-7'>
+        <p>This is where all the care conversations happen between the team members.</p>
+        <Button>Begin conversation</Button>
+      </div>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+<br />
+
+#### Landscape
+
+<Rules isPortraitMode={true} BgColor='#f4f4f4'>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>
+        <b>Here's to new beginnings! Here's to new beginnings Here's to new</b>
+      </IconWrapper>
+      <p class='ml-7' >Let all your care conversations happen here.</p>
+    </InlineMessage>
+  </DOs>
+
+  <DONTs>
+    <InlineMessage> 
+      <IconWrapper iconType = 'error'> <b>No Messages</b> </IconWrapper>
+      <p class='ml-7'>This is where all the care conversations happen between the team members.</p>
+    </InlineMessage>
+  </DONTs>
+</Rules>

package/docs/src/pages/content/voice-and-tone-guidelines/index.mdx

@@ -0,0 +1,7 @@
+---
+title: Voice and tone guidelines
+description: Our voice and tone is our identity. It helps us build trust, connection and a memorable image for our brand. Use it to make the content distinct, effective and consistent for all products and features.
+tabs: ['Voice and tone', 'Usage']
+---
+
+Our voice and tone is our identity. It helps us build trust, connection and a memorable image for our brand. Use it to make the content distinct, effective and consistent for all products and features.

package/docs/src/pages/content/voice-and-tone-guidelines/tabs/usage.mdx

@@ -0,0 +1,309 @@
+#### Daily tasks and activities
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> 
+        <b>Here's to new beginnings!</b>
+      </IconWrapper>
+      <div class='ml-7'>
+        Let all your care conversations happen here.
+        <Button class='mt-6' >Start conversation</Button>
+      </div>
+    </InlineMessage>
+    <br/>
+    <InlineMessage>
+      <IconWrapper> 
+        <b>Ahead of schedule? </b>
+      </IconWrapper>
+      <div class='ml-7 mb-0'>We don't see any appointments at the moment. Feel free to search for patients instead.</div>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper> 
+        <b>890 of 1020 patients uploaded...</b>
+      </IconWrapper>
+      <div class='ml-7'>
+        Phew! Just a couple more to go.
+        <div class='d-flex mt-6'>
+          <Button>View patients</Button>
+          <Button class='ml-4'>Download report</Button>
+        </div>
+      </div>
+    </InlineMessage>
+  </DOs>
+
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType = 'error'>
+        <b>No Messages</b>
+      </IconWrapper>
+      <div class='ml-7'>
+        This is where all the care conversations happen between the team members.
+        <Button class='mt-6'>Begin conversation</Button>
+      </div>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType = 'error'>
+        <b>No Appointments</b>
+      </IconWrapper>
+      <div class='ml-7'>You have got no appointments for today!</div>
+    </InlineMessage>
+    <br/>
+    <InlineMessage>
+      <IconWrapper iconType = 'error'> 
+        <b>Please wait...</b>
+      </IconWrapper>
+      <div class='ml-7'>
+        890 of 1020 patients uploaded!
+        <div class='d-flex mt-6'>
+          <Button>View patients</Button>
+          <Button class='ml-4'>Download report</Button>
+        </div>
+      </div>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+#### Progress and completion messages
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>
+        <b>You nailed it!</b>
+      </IconWrapper>
+      <div class='ml-7'>
+        You finished all your activities for the day. Enjoy the rest.
+      </div>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        <b>Feedback submitted successfully!</b>
+      </IconWrapper>
+      <div class='ml-7'>
+        Thank you for giving us your feedback. That's how we'll improve and make things better for you.
+      </div>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        <b>Kudos! </b>
+      </IconWrapper>
+      <div class='ml-7'>
+        You've filled all the quality gaps.
+      </div>
+    </InlineMessage>
+  </DOs>
+
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType = 'error'>
+        <b>No activities pending!</b>
+      </IconWrapper>
+      <div class='ml-7'>
+        You have finished all your activities. 
+      </div>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType = 'error'>
+        <b>Feedback submitted</b>
+      </IconWrapper>
+      <div class='ml-7'>
+        Thanks for sharing your experience. Once submitted, this action can't be undone. 
+      </div>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType = 'error'>
+        No open quality gaps.
+      </IconWrapper>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+#### Features and updates
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> 
+        <b>Things are about to get better! </b>
+      </IconWrapper>
+      <div class='ml-7'>
+        A new and improved version of InNote is available. 
+        <div class='d-flex mt-6'>
+          <Button>Upgrade now</Button>
+          <Button class='ml-4'>Remind me later</Button>
+        </div>
+      </div>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper> 
+        <b>Track referrals and get notified at every step.</b>
+      </IconWrapper>
+      <div class='ml-7'>
+        Stay connected with social workers to better understand client's needs.
+        <Button class='mt-6' >Get started</Button>
+      </div>
+    </InlineMessage>
+  </DOs>
+
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType = 'error'>
+        <b>Update to new version</b>
+      </IconWrapper>
+      <div class='ml-7'>
+        A new software update is available. Please download now.
+        <div class='d-flex mt-6'>
+          <Button>Download now</Button>
+          <Button class='ml-4'>Remind me later</Button>
+        </div>
+      </div>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType = 'error'>
+        <b>Coordinate and track bidirectional referrals across the network.</b>
+      </IconWrapper>
+      <div class='ml-7'>
+        Connect with social workers to better understand client's needs and problems.
+        <Button class='mt-6'>Get started</Button>
+      </div>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+#### Empty states
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper>
+        <b>Together we can do so much!</b>
+      </IconWrapper>
+      <div class='ml-7'>
+        Start adding your first community resource here.
+        <Button class='mt-6' >Add resource(s)</Button>
+      </div>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        <b>Somethings are not in our hands</b>
+      </IconWrapper>
+      <div class='ml-7'>
+        Sorry, we are facing a technical issue at the moment.
+        <Button class='mt-6' >Try again</Button>
+      </div>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper> 
+        <b>This page doesn't exist </b>
+      </IconWrapper>
+      <div class='ml-7'>
+        You seem to have followed a dead link. Trust us, this only happens once in a blue moon.  
+        <div class='d-flex mt-6'>
+          <Button>Go back</Button>
+          <Button class='ml-4'>Home</Button>
+        </div>
+      </div>
+    </InlineMessage>
+  </DOs>
+
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType = 'error'> 
+        <b>No community resources!</b>
+      </IconWrapper>
+      <div class='ml-7'>
+        Add resources by clicking the button below.
+        <Button class='mt-6'>Add a community resource</Button>
+      </div>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType = 'error'>
+        <b>Oops! Something went wrong</b>
+      </IconWrapper>
+      <div class='ml-7'>
+        Please try again.
+      </div>
+    </InlineMessage>
+    <br/> <br/>
+    <InlineMessage>
+      <IconWrapper iconType = 'error'> 
+        <b>Error 404</b>
+      </IconWrapper>
+      <div class='ml-7'>
+        Page not found!
+      </div>
+    </InlineMessage>
+  </DONTs>
+</Rules>
+
+#### Error messages
+
+<Rules>
+  <DOs>
+    <InlineMessage>
+      <IconWrapper> 
+        These passwords look poles apart. Please recheck.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        <b>Oh no!</b>
+      </IconWrapper>
+      <div class='ml-7'>
+        You have stepped into the most deserted space called 404. Let's get you back home.
+      </div>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper> 
+        Hey, that mobile number looks familiar. Want to sign in?
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper>
+        <b>Your upload failed! </b>
+      </IconWrapper>
+      <div class='ml-7'>
+        Don't worry this is not the last resort.
+        <div class='d-flex mt-6'>
+          <Button>Try again</Button>
+          <Button class='ml-4'>Download report</Button>
+        </div>
+      </div>
+    </InlineMessage>
+  </DOs>
+
+  <DONTs>
+    <InlineMessage>
+      <IconWrapper iconType = 'error'> 
+        Passwords do not match.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType = 'error'> 
+        <b>Error 404</b>
+      </IconWrapper>
+      <div class='ml-7'>Page not found!</div>
+    </InlineMessage>
+    <br/>
+    <InlineMessage>
+      <IconWrapper iconType = 'error'> 
+        Mobile number already registered please sign in to proceed.
+      </IconWrapper>
+    </InlineMessage>
+    <InlineMessage>
+      <IconWrapper iconType = 'error'>
+        <b>Upload failed!</b>
+      </IconWrapper>
+      <div class='ml-7'>
+        Try again,<br/>
+        Fail again,<br/>
+        Fail better!
+        <div class='d-flex mt-6'>
+          <Button>Try again</Button>
+          <Button class='ml-4'>Download report</Button>
+        </div>
+      </div>
+    </InlineMessage>
+  </DONTs>  
+</Rules>

package/docs/src/pages/content/voice-and-tone-guidelines/tabs/voice-and-tone.mdx

@@ -0,0 +1,38 @@
+---
+title: Voice and tone guidelines
+description: Our voice and tone is our identity. It helps us build trust, connection and a memorable image for our brand. Use it to make the content distinct, effective and consistent for all products and features.
+tabs: ['Voice and tone', 'Usage']
+---
+
+#### Voice
+
+**Purposeful**
+
+Our center is our customers and we always put their needs before ours. We take charge to provide our customers with an instant solution. By building every feature, every button, and every copy with an aim to serve a purpose.
+
+**Friendly**
+
+We are friendly but never cocky. We are approachable, honest and reliable, always willing to help our customers. Because making our customers heroes is top of our list.
+
+**Optimistic to the core**
+
+Optimism is in our DNA and we want to imbibe that in every aspect of our brand. We are constantly building things which are meaningful and impactful for our customers. Because we truly believe in what we are doing.
+
+<br />
+
+#### Tone
+
+Our tone varies according to our customers' needs. We are conversational, empathetic and direct but never blunt, too emotional or robotic in our messaging. We sound clear, concise and friendly when addressing an email. But we are more optimistic, friendly, and purpose-driven for our product & feature content. We always stick to the brand voice and use the right tone to convey our message across.
+
+<br />
+
+#### Things to remember
+
+<ul>
+  <li>Be friendly but never cocky</li>
+  <li>Be empathetic but never too emotional</li>
+  <li>Be optimistic but never overconfident</li>
+  <li>Be direct but never robotic</li>
+  <li>Be conversational but never blunt</li>
+  <li>Be concise but never odd</li>
+</ul>

package/docs/src/pages/contributions.mdx

@@ -0,0 +1,16 @@
+---
+description: Instructions for developing and contributing. Here's how you can contribute.
+date: 15 June 2021
+---
+
+Using design system font:
+The css sets the font family as 'Nunito Sans' for the body. To add this font in your project you need to load this font. The recommended way to do it is by adding the following google font cdn link to your app's head.
+Updating Font:
+If you don't add the font described above font family will not be affected by css. However, if you want to update the font family update it via the following css variable.
+
+--font-family
+Reset Styles
+As BEM is used reset.css is not used and no style reset is done.
+
+Polyfill for IE
+For css variables to work on IE we use a polyfill at runtime to achieve dynamic theming through variables. Please add the following polyfill in your page.

package/docs/src/pages/foundations/colors.mdx

@@ -0,0 +1,149 @@
+---
+title: Colors
+description: Maintaining consistent and engaging digital interfaces, whether applications or experiences, demands extended guidance around color usage
+date: 15 June 2021
+showMobile: true
+---
+
+export const PRIMARY_COLORS = [
+  {
+    name: 'Jal - Darker',
+    backgroundColor: 'var(--primary-darker)',
+    hexCode: '#003365',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+  {
+    name: 'Jal - Dark',
+    backgroundColor: 'var(--primary-dark)',
+    hexCode: '#00509F',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+  {
+    name: 'Jal - Default',
+    backgroundColor: 'var(--primary)',
+    hexCode: '#0070DD',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+  {
+    name: 'Jal - Light',
+    backgroundColor: 'var(--primary-light)',
+    hexCode: '#4F9DE7',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+  {
+    name: 'Jal - Lighter',
+    backgroundColor: 'var(--primary-lighter)',
+    hexCode: '#97C5F0',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+  {
+    name: 'Jal - Lightest',
+    backgroundColor: 'var(--primary-lightest)',
+    hexCode: '#DCECF9',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+];
+
+export const ALERT_COLORS = [
+  {
+    name: 'Jal - Darker',
+    backgroundColor: 'var(--alert-darker)',
+    hexCode: '#631919',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+  {
+    name: 'Jal - Dark',
+    backgroundColor: 'var(--alert-dark)',
+    hexCode: '#9C2828',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+  {
+    name: 'Jal - Default',
+    backgroundColor: 'var(--alert)',
+    hexCode: '#D93737',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+  {
+    name: 'Jal - Light',
+    backgroundColor: 'var(--alert-light)',
+    hexCode: '#EB776C',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+  {
+    name: 'Jal - Lighter',
+    backgroundColor: 'var(--alert-lighter)',
+    hexCode: '#F7ADA5',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+  {
+    name: 'Jal - Lightest',
+    backgroundColor: 'var(--alert-lightest)',
+    hexCode: '#F9E2E2',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+];
+
+export const WARNING_COLORS = [
+  {
+    name: 'Haldi - Darker',
+    backgroundColor: 'var(--warning-darker)',
+    hexCode: '#6B4A06',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+  {
+    name: 'Haldi - Dark',
+    backgroundColor: 'var(--warning-dark)',
+    hexCode: '#B78707',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+  {
+    name: 'Haldi - Default',
+    backgroundColor: 'var(--warning)',
+    hexCode: '#FFC208',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+  {
+    name: 'Haldi - Light',
+    backgroundColor: 'var(--warning-light)',
+    hexCode: '#FFD462',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+  {
+    name: 'Haldi - Lighter',
+    backgroundColor: 'var(--warning-lighter)',
+    hexCode: '#FFE597',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+  {
+    name: 'Haldi - Lightest',
+    backgroundColor: 'var(--warning-lightest)',
+    hexCode: '#FFF5C7',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+];
+
+#### Primary color
+
+<br />
+
+##### Jal
+
+<Row className='mb-10'>
+  <Colors colorData={PRIMARY_COLORS} />
+</Row>
+
+#### Secondary colors
+
+<br />
+
+##### Mirch
+
+<Row className='mb-10'>
+  <Colors colorData={ALERT_COLORS} />
+</Row>
+
+##### Haldi
+
+<Row>
+  <Colors colorData={WARNING_COLORS} />
+</Row>