(DOCSP-44517): Added new component guidelines. (#181)

* (DOCSP-44517): Added new component guidelines.

* (DOCSP-44517): Incorporated Steph's feedback.

* (DOCSP-44517): Incorporated Steph's feedback.

* (DOCSP-44517): Incorporated feedback.

Author: corryroot

source/images/callout-anatomy.png

@@ -10,6 +10,20 @@ Callouts or admonitions emphasize important or helpful information.
 To avoid clutter on the page and to preserve visual impact, use callouts
 sparingly.
 
+Callout Anatomy
+---------------
+
+A callout contains the following parts:
+
+1. Label that indicates the callout type
+2. Optional title
+3. Body text
+
+.. figure:: /images/callout-anatomy.png
+   :alt: callout anatomy
+   :align: center
+   :figwidth: 700px
+
 Callout Types
 -------------
 
@@ -50,62 +64,47 @@ You can use the following callouts:
        lose data, compromise data integrity, or disrupt operations if
        they don't follow instructions carefully.
      - ``.. warning:: <title>``
-   * - Example
-     - Presents a scenario that illustrates or demonstrates a concept in
-       the text.
-     - ``.. example:: <title>``
-   * - See
-     - Provides a link to a topic or section directly related to the
-       preceding text. You might use ``see`` to link to content with
-       necessary procedures, definitions, or deployment considerations
-       and impacts.
-     - ``.. see::``
-   * - See also
-     - Provides a link to topics or sections that are generally related 
-       to or provide useful context for the preceding text. You might
-       use ``seealso`` to link to content that provides background
-       information, deeper context, or common related tasks.
-     - ``.. seealso::``
 
 Callout Guidelines
 ------------------
 
-When creating callouts, use the following guidelines:
-
--  Use the callout type to convey the kind of information you want 
-   to communicate. Don't rely on color to convey intensity.
+When you create callouts, use the following guidelines:
 
--  Use the correct {+rst+} directive to create the callout. Don't 
-   attempt to create callouts using boldface, headings, or custom
-   :abbr:`CSS (Cascading Style Sheets)`.
+- Use the appropriate callout type to convey the kind of information 
+  you want to communicate. 
 
 - Don't stack multiple callouts directly after one another, as these can
-  distract users. To avoid stacking callouts, group supplemental information
-  from callouts into a dedicated section.
+  distract users. To avoid stacking callouts, group supplemental 
+  information from callouts into a dedicated section. For callouts of 
+  the same type, use a single callout that contains separate paragraphs 
+  or an unordered list.
 
-- If possible, don't use callouts in tables and option lists
+- If possible, don't use callouts in tables and option lists.
   Callouts reduce the scannability of tables and options lists.
 
--  Avoid nesting callouts inside tables and other elements.
+- Avoid nesting callouts inside tables, code blocks, and other elements.
 
--  Avoid nesting code blocks inside callouts.
+- Place a callout as close as possible to the information that it
+  emphasizes or clarifies.
 
--  Place a callout as close as possible to the information that it
-   emphasizes or clarifies.
+- Use callouts for long form text and avoid using callouts for links 
+  only.
 
--  Avoid stacking callouts of the same type. For example, avoid adding
-   one labeled note directly after another labeled note. Instead, use
-   a single callout that contains separate paragraphs or an unordered list.
+- Use callouts only when needed and avoid overcrowding the 
+  page with callouts.
 
 The following callouts might appear in existing documentation but are
 deprecated. Don't use these callouts in new content:
 
 - ``.. admonition::``
 - ``.. caution::``
 - ``.. danger::``
+- ``.. example::``
+- ``.. see::``
+- ``.. see also::``
 - ``.. topic::``
 
 Nested Components
 -----------------
 
-Do not nest components. To learn more, see :ref:`nested-components`.
+Don't nest components. To learn more, see :ref:`nested-components`.

source/images/callout-label.png

@@ -0,0 +1,55 @@
+.. _collapsible-sections:
+
+====================
+Collapsible Sections
+====================
+
+.. default-domain:: mongodb
+
+Collapsible sections let you hide and show dynamic content. 
+
+Collapsible Section Anatomy
+---------------------------
+
+A collapsible section contains the following parts:
+
+1. Section title
+2. Short description of the content in the section
+3. Chevron to expand and collapse the section
+4. Section content
+
+.. figure:: /images/collapsible-section-anatomy.png
+   :alt: collapsible section anatomy
+   :align: center
+   :figwidth: 700px
+
+Collapsible Section Syntax
+--------------------------
+
+The following example shows the syntax for a collapsible section:
+
+.. code-block::
+
+   .. collapsible::
+      :heading: Prerequisites
+      :sub_heading: Complete the previous steps in the tutorial and install dependencies
+      :expanded: 
+
+      Body content goes here.
+
+Collapsible Section Guidelines
+------------------------------
+
+When you create collapsible sections, use the following 
+guidelines:
+
+- Make the title short and concise.
+
+- For the subheader, write a very one-line description with a 
+  period at the end. Don't exceed one line.
+
+- Don't hide essential information in a collapsible section. Include 
+  only secondary information, like prerequisite and 
+  troubleshooting information, in a collapsed section. Use the 
+  ``:expanded:`` option for sections that should display expanded 
+  by default.

source/images/collapsible-section-anatomy.png

@@ -14,6 +14,7 @@ instructions for applying style conventions.
    :maxdepth: 1
 
    /style-guide/style/abbreviations
+   /style-guide/style/collapsible-sections
    /style-guide/style/callouts
    /style-guide/style/capitalization
    /style-guide/style/citations
@@ -26,10 +27,12 @@ instructions for applying style conventions.
    /style-guide/style/glossaries
    /style-guide/style/ip-addresses
    /style-guide/style/keyboard-keys
+   /style-guide/style/language-selectors
    /style-guide/style/links-and-cross-references
    /style-guide/style/lists
    /style-guide/style/messages
    /style-guide/style/names
+   /style-guide/style/next-buttons
    /style-guide/style/numbers
    /style-guide/style/parameters
    Placeholders for APIs </style-guide/style/cloud-account-info>

source/images/collapsible-section-subheader.png

@@ -0,0 +1,103 @@
+.. _language-selectors:
+
+=============================
+Method and Language Selectors
+=============================
+
+.. default-domain:: mongodb
+
+Method and language selectors let you provide dynamic content based on 
+the selected method and language.
+
+Method and Language Selector Anatomy
+------------------------------------
+
+A method and language selector contains the following parts:
+
+1. Radio boxes with different method options (up to six)
+2. Optional method description
+3. Language selector drop-down (drivers only)
+
+.. figure:: /images/language-selectors-anatomy.png
+   :alt: method and language selectors anatomy
+   :align: center
+   :figwidth: 700px
+
+Method and Language Selector Syntax
+-----------------------------------
+
+The following example shows the syntax for a method selector:
+
+.. code-block::
+
+   .. method-selector::
+
+      .. method-option::
+         :id: driver
+
+         .. method-description::
+
+            .. include:: /includes/description-drivers.rst
+      
+            .. tabs-selector:: drivers
+
+The following example shows the syntax for a language selector:
+
+.. code-block::
+
+   .. tabs-drivers::
+         
+      .. tab:: 
+         :tabid: compass
+         
+         .. include:: /includes/steps-gswa-connect-to-cluster-compass.rst
+         
+      .. tab::
+         :tabid: csharp
+         
+         .. include:: /includes/steps-gswa-driver-connect-csharp.rst
+         
+      .. tab:: 
+         :tabid: go
+         
+         .. include:: /includes/steps-gswa-driver-connect-go.rst
+         
+      .. tab:: 
+         :tabid: java-sync
+         
+         .. include:: /includes/steps-gswa-driver-connect-java.rst
+         
+      .. tab:: 
+         :tabid: python
+                  
+          .. include:: /includes/steps-gswa-driver-connect.rst
+         
+      .. tab::
+         :tabid: nodejs
+               
+         .. include:: /includes/steps-gswa-driver-connect-node.rst
+
+Method and Language Selector Guidelines
+---------------------------------------
+
+When you create method and language selectors, use the following 
+guidelines:
+
+- Add a language selector only when :guilabel:`Driver` is the selected 
+  method.
+
+- Include a minimum of two options and a maximum of six options per 
+  method selector. You may have only one instance of a method selector 
+  per page.
+
+  .. figure:: /images/method-selector-options.png
+     :alt: method selector options
+     :align: center
+     :figwidth: 700px
+
+- The optional method description may not exceed two lines.
+
+  .. figure:: /images/method-selector-description.png
+     :alt: method selector description
+     :align: center
+     :figwidth: 700px

source/images/language-selector-driver-method.png

@@ -0,0 +1,55 @@
+.. _next-buttons:
+
+============
+Next Buttons
+============
+
+.. default-domain:: mongodb
+
+Next buttons provide extra navigation at the top of a page. 
+
+Next Button Anatomy
+-------------------
+
+A next button contains the following parts:
+
+1. Button with a right arrow
+2. Next label
+3. Title of the next page
+4. Step "X of Y" label at the top of the page title
+
+.. figure:: /images/next-button-anatomy.png
+   :alt: next button anatomy
+   :align: center
+   :figwidth: 700px
+
+Next Button Syntax
+------------------
+
+The following example shows the syntax for a next button:
+
+.. code-block::
+
+   .. multi-page-tutorial::
+      :show-next-top:
+
+The following example shows the syntax for defining multi-step 
+tutorials in the ``snooty.toml`` file:
+
+.. code-block::
+
+   multi_page_tutorials = [
+    "/get-started-cli",
+    "/get-started-ui"
+   ]
+
+Next Button Guidelines
+----------------------
+
+When you create next buttons, use the following guidelines:
+
+- Use next buttons at the top of the page only in multi-step tutorial 
+  pages.
+
+- Use next and back buttons on the bottom of the page to follow the 
+  structure of the table of contents.