import { Meta } from "@storybook/addon-docs";
import { Check, Close } from "neetoicons";
import NoDataTodo from "../assets/images/no-data-do.png";
import ArchiveExample from "../assets/images/archive.png";
import DeactivateExample from "../assets/images/deactivate.png";

<Meta
  title="Foundation/Language"
  parameters={{
    viewMode: "docs",
    layout: "fullscreen",
    previewTabs: {
      canvas: { hidden: true },
    },
  }}
/>

<style>
  {`
  .story-demo-table tr{
    background: transparent !important;
  }
  .demo-do-dont-wrap{
    display: flex;
    gap: 16px;
    margin: 24px 0;
  }
  .sbdocs-wrapper{
    padding: 0 !important;
  }
  .sbdocs-content{
    max-width: 100% !important;
  }
  .table-of-content-list{

  }
  .table-of-content-list a{
    color: #000 !important;
    font-size: 15px !important;
  }
  .table-of-content-list a:hover,
  .table-of-content-list a:focus{
    text-decoration: underline;
  }
  .neeto-language-page-wrapper{
    margin-left:auto !important;
    margin-right:auto !important;
  }
  `}
</style>

export const data = [
  { id: "general-language", title: "General language" },
  { id: "headings-and-subheadings", title: "Headings and subheadings" },
  { id: "buttons", title: "Buttons" },
  { id: "links", title: "Links" },
  { id: "create-vs-add", title: "Create vs. add" },
  { id: "save-vs-done", title: "Save vs. done" },
  { id: "archive-vs-deactivate", title: "Archive vs. deactivate" },
  { id: "cancel-action", title: "Cancel action" },
  { id: "confirmations", title: "Confirmations" },
  { id: "error-text", title: "Error text" },
  { id: "help-text", title: "Help text" },
  { id: "toastr-messages", title: "Toastr messages" },
  { id: "no-data-screens", title: "No data screens" },
  { id: "references", title: "References" },
];

<div class="flex gap-6 relative p-12 max-w-6xl neeto-language-page-wrapper">
<div class="flex-grow min-w-0">

<div class="neeto-language-page">

<h2 id="general-language">
  <a href="#general-language">General language</a>
</h2>

Products should speak consistently, just as they should act and look
consistently.

**Clear and understandable**

- Ensure decisions about grammar and mechanics are research-informed and tested.
- Avoid language that’s overly opinionated, funny, or trendy.

**Likeable, credible, and accountable**

- Vary sentence style and structure for readability and relatability.
- Avoid language that’s overly opinionated, funny, or trendy.

**Friendly, honest and responsible**

- Describe only what’s needed, without unnecessary decoration.
- Avoid creating new concepts and only name things when necessary.

<br />

<h2 id="neeto-products">
  <a href="#neeto-products">
    Use the word "neeto products" over "neeto applications" or "neeto apps".
  </a>
</h2>

<div className="demo-do-dont-wrap flex gap-4">
  <div className="demo-do-dont__box demo-do-dont__box--do neeto-ui-border-success-500 neeto-ui-shadow-md w-80 rounded border-t-4 p-6">
    <h4 className="flex items-center gap-3">
      <Check size={30} className="neeto-ui-text-success-500" /> Do
    </h4>
    <ul>
      <li>neeto products</li>
    </ul>
  </div>
  <div className="demo-do-dont__box demo-do-dont__box--dont neeto-ui-border-error-500 neeto-ui-shadow-md w-80 rounded border-t-4 p-6">
    <h4 className="flex items-center gap-3">
      <Close size={30} className="neeto-ui-text-error-500" /> Don’t
    </h4>
    <ul>
      <li>neeto applications</li>
      <li>neeto apps</li>
    </ul>
  </div>
</div>
<br />

<h2 id="headings-and-subheadings">
  <a href="#headings-and-subheadings">Headings and subheadings</a>
</h2>

- Avoid using punctuation such as periods, commas, or semicolons
- Write in sentence case, capitalize the first word and proper nouns only
- Keep headings to a single sentence

<div className="demo-do-dont-wrap flex gap-4">
  <div className="demo-do-dont__box demo-do-dont__box--do neeto-ui-border-success-500 neeto-ui-shadow-md w-80 rounded border-t-4 p-6">
    <h4 className="flex items-center gap-3">
      <Check size={30} className="neeto-ui-text-success-500" /> Do
    </h4>
    <ul>
      <li>Add new form</li>
      <li>Add new form</li>
      <li>Outbound notifications</li>
      <li>Automation rules</li>
      <li>Allow SMS conversations</li>
      <li>Secure your account with two-step authentication</li>
    </ul>
  </div>
  <div className="demo-do-dont__box demo-do-dont__box--dont neeto-ui-border-error-500 neeto-ui-shadow-md w-80 rounded border-t-4 p-6">
    <h4 className="flex items-center gap-3">
      <Close size={30} className="neeto-ui-text-error-500" /> Don’t
    </h4>
    <ul>
      <li>Add form</li>
      <li>Add a new form</li>
      <li>Outbound Notifications</li>
      <li>Automation Rules.</li>
      <li>Allow SMS conversations!</li>
      <li>Two-step authentication</li>
    </ul>
  </div>
</div>
<br />

<h2 id="buttons">
  <a href="#buttons">Buttons</a>
</h2>

- Avoid unnecessary words and articles such as "the", "an", or "a"
- Write in sentence case, capitalize the first word and proper nouns only
- Buttons should always lead with a strong verb that encourages action
- To provide enough context to users, use the "verb" + "noun" content formula on
  buttons except in the case of common actions like "Done", "Close", "Cancel",
  or "OK"

<div className="demo-do-dont-wrap flex gap-4">
  <div className="demo-do-dont__box demo-do-dont__box--do neeto-ui-border-success-500 neeto-ui-shadow-md w-80 rounded border-t-4 p-6">
    <h4 className="flex items-center gap-3">
      <Check size={30} className="neeto-ui-text-success-500" /> Do
    </h4>
    <ul>
      <li>Explore themes</li>
      <li>Save changes</li>
      <li>Add new form</li>
      <li>Add new form</li>
    </ul>
  </div>
  <div className="demo-do-dont__box demo-do-dont__box--dont neeto-ui-border-error-500 neeto-ui-shadow-md w-80 rounded border-t-4 p-6">
    <h4 className="flex items-center gap-3">
      <Close size={30} className="neeto-ui-text-error-500" /> Don’t
    </h4>
    <ul>
      <li>Themes</li>
      <li>Save Changes</li>
      <li>Add form</li>
      <li>Add a new form</li>
    </ul>
  </div>
</div>
<br />

<h2 id="links">
  <a href="#links">Links</a>
</h2>

- Use the meaningful piece of text into the link itself, rather than filler
  words like "Here" or "Read More"

<div className="demo-do-dont-wrap flex gap-4">
  <div className="demo-do-dont__box demo-do-dont__box--do neeto-ui-border-success-500 neeto-ui-shadow-md w-80 rounded border-t-4 p-6">
    <h4 className="flex items-center gap-3">
      <Check size={30} className="neeto-ui-text-success-500" /> Do
    </h4>
    <ul>
      <li>
        See{" "}
        <a
          href="https://neetodeskhelp.neetokb.com/articles/understanding-ticket-statuses"
          rel="noopener"
        >
          neetoDesk's ticket status
        </a>
        {" "}documentation for more information.
      </li>
    </ul>
  </div>
  <div className="demo-do-dont__box demo-do-dont__box--dont neeto-ui-border-error-500 neeto-ui-shadow-md w-80 rounded border-t-4 p-6">
    <h4 className="flex items-center gap-3">
      <Close size={30} className="neeto-ui-text-error-500" /> Don’t
    </h4>
    <ul>
      <li>
        <a
          href="https://neetodeskhelp.neetokb.com/articles/understanding-ticket-statuses"
          rel="noopener"
        >
          Click here
        </a>
        {" "}to see neetoDesk's ticket status documentation for more information.
      </li>
    </ul>
  </div>
</div>
<br />
<br />

<h2 id="create-vs-add">
  <a href="#create-vs-add">Create vs. add</a>
</h2>

Avoid using the term "Create User." Instead, use "Add User."

The word "Create" is more technical and commonly used by developers. However, in
everyday language, people usually say "Add this user" instead of "Create a
user."

<br />
<br />

<h2 id="save-vs-done">
  <a href="#save-vs-done">Save vs. done</a>
</h2>

**Saving immediately to a database**

Use "Save" as the default for any action that saves immediately to a database.

**Deferred saves**

Sometimes, when users confirm a set of changes inside a modal or sheet, these
changes are applied as unsaved changes to the current page. In other words, the
changes made weren’t immediately saved to the database. When this happens, don’t
use the verb "Save" as the call to action because it would be misleading.

Use the adjective "Done" for deferred saves. When the modal or sheet closes,
then merchants can save all of the changes they made.

Most deferred saves happen when confirming changes in Add, Edit, Manage, and
Select modals and sheets.

<br />

<h2 id="archive-vs-deactivate">
  <a href="#archive-vs-deactivate">Archive vs. deactivate</a>
</h2>

**Archive**

- Use "Archive" for non people or non-human entities. For example, a client is
  not a person, so we should use the term Archive.
- When archiving a client, display an alert message that says, "You are
  archiving a client <b>client_name</b>"

<img src={ArchiveExample} width="400" />

<br />

**Deactivate**

- Use "Deactivate" for people or human entity. For example member is a human
  entity, so we should use the term Deactivate.
- When deactivating a team member, display an alert message that says, "You are
  deactivating the member <b>member_name</b>."

<img src={DeactivateExample} width="400" />
<br />

<h2 id="cancel-action">
  <a href="#cancel-action">Cancel</a>
</h2>

- Use “Cancel” button for users to back out of any changes made on a page,
  modal, pane etc.
- "Cancel" button should be enabled always.
- When the "Cancel" button is pressed, changes automatically get discarded, and
  it should take the user back to the previous screen/page.

**Edge case**

If there is no logical "previous" page to go back to.

For example, if we are on the home/root page,

- Here "Cancel" button should be disabled initially.
- If the user changes anything on the form, "Cancel" should be enabled.
  <br />
  <br />

<h2 id="confirmations">
  <a href="#confirmations">Confirmations</a>
</h2>

<a
  href="https://witty-tern-16b.notion.site/Confirmation-modal-best-practices-ef707f480cdd42e1bbcd3abea065a0d9"
  target="_blank"
>
  Best practices
</a>

<br />
<br />

<h2 id="error-text">
  <a href="#error-text">Error text</a>
</h2>

When creating error messages, be specific, helpful, and polite.

- Instead of saying "This field is required." specify the field name. For
  example, you could say "Phone number is a required field."
- Always add periods to sentences.
- Be pleasant and polite to the user. Avoid using negative language or blaming
  the user. For example, instead of saying "You did not enter your phone
  number." you could say "Please enter your phone number."
- Help the user to get out of the situation. If possible, provide a way for the
  user to correct the error. For example, you could provide a link to a
  knowledge base article or a way to reset the form.
- Be specific about the error. The message "Something went wrong" is not very
  helpful. Try to provide as specific of an error message as possible. This will
  help the user understand what they did wrong and how to fix it.
- Implement eager validations to validate fields upon blur. This will enable
  users to interact with the form freely until they are prepared to submit it.
- Speak human language. Do not use technical terms or jargon that the user may
  not understand. For example, instead of saying "Error 401," you could say "You
  are not authorized to delete this agent. Please contact your organization
  admin for permission."

<br />
<br />

<h2 id="help-text">
  <a href="#help-text">Help text</a>
</h2>

When guiding users through complex operations, use help text to be precise,
informative, and humble.

- Be precise. The help text should be clear and concise, and it should tell the
  user exactly what they need to do.

- Be informative. The help text should provide enough information for the user
  to complete the operation. For example, if you are guiding the user through
  the process of creating a new account, you could provide information about the
  required fields and the steps involved in the process.

- Be humble. Use positive language and do not blame the user.

- Link to a KB article. If the help text is not enough to help the user, you
  could link to a knowledge base article that provides more detailed
  information.

<br />
<br />

<h2 id="toastr-messages">
  <a href="#toastr-messages">Toastr messages</a>
</h2>

- Use the appropriate Toastr type. There are four types of Toastr messages:
  error, warning, success and info. Use the appropriate type for the message you
  are trying to convey. For example, use an error Toastr for critical errors
  that need to be fixed immediately, a warning Toastr for errors that can be
  ignored, and an info Toastr for informational messages.

- Keep Toastr messages brief. Toastr messages are short-lived and user
  dismiss-able. Avoid lengthy messages that may disrupt the user experience.

- Use clear and concise language. The user should be able to understand the
  message without having to read it multiple times.

- Be specific about the error. If the message indicates an error, provide users
  with as much information as possible about what went wrong. This will help
  them to diagnose and address the issue more effectively.

- Avoid autoclosing error Toastrs. Allow users to take their time in handling
  critical issues.

- Link to a knowledge base article or a video tutorial if the user needs more
  help. If the user is unable to fix the error themselves, provide them with a
  link to a knowledge base article or a video tutorial that can help them.

<br />
<br />

<h2 id="no-data-screens">
  <a href="#no-data-screens">No data screens</a>
</h2>

<div className="demo-do-dont-wrap flex gap-4">
  <div className="demo-do-dont__box demo-do-dont__box--do neeto-ui-border-success-500 neeto-ui-shadow-md w-80 rounded border-t-4 p-6">
    <h4 className="flex items-center gap-3">
      <Check size={30} className="neeto-ui-text-success-500" /> Do
    </h4>
    <img src={NoDataTodo} />
  </div>
  <div className="demo-do-dont__box demo-do-dont__box--dont neeto-ui-border-error-500 neeto-ui-shadow-md w-80 rounded border-t-4 p-6">
    <h4 className="flex items-center gap-3">
      <Close size={30} className="neeto-ui-text-error-500" /> Don’t
    </h4>
    <ul>
      <li>
        <p>No articles found.</p>
        <p>We couldn't find any articles. Try creating one.</p>
      </li>
      <li>Looks like you don't have any forms!</li>
      <li>
        <p>No changelogs found</p>
        <p>We couldn’t find any changelogs. You can add a new one.</p>
      </li>
      <li>
        <p>No Quizzes</p>
        <p>We do not have any quizzes to show here</p>
      </li>
      <li>No Assignments yet</li>
      <li>
        <p>No tasks found.</p>
        <p>
          No tasks for you right now. You can go to projects and assign tasks to
          yourself
        </p>
      </li>
      <li>
        <p>Start building user tests</p>
        <p>
          You haven't created any test yet. Create your first test here and
          share it with your testers.
        </p>
      </li>
      <li>
        <p>No Courses found.</p>
        <p>We couldn't find any courses. Try creating one.</p>
      </li>
      <li>Looks like you don't have any deals.</li>
      <li>
        <p>There aren't any projects added yet.</p>
        <p>Use the following button to add the first project.</p>
      </li>
    </ul>
  </div>
</div>

<h2 id="references">
  <a href="#references">References</a>
</h2>

- [Spectrum](https://spectrum.adobe.com/page/voice-and-tone/) from Adobe.
- [Polaris](https://polaris.shopify.com/content/actionable-language#create-vs--add)
  from Shopify.

</div>
</div>
<div className="flex-shrink-0 w-60 sticky top-0 max-h-screen overflow-y-auto">
  <h3>Table of contents</h3>
  <ul className="table-of-content-list">
    {data.map(item => (
      <li key={item.id}>
        <a href={`#${item.id}`} className="text-sm text-black hover:text-blue-800">{item.title}</a>
      </li>
    ))}
  </ul>
</div>
</div>
