@czi-sds/mcp 0.3.0 → 0.4.0

package/data/zeroheight-exports/Accordion.md

@@ -4,14 +4,14 @@ To help control the amount of information presented to the user, Accordions are
 
 ## Overview
 
-|  | In Figma |   |  | Meets Accessibility |   |  | In napari hub + .org Codebases |
-| --- | --- | --- | --- | --- | --- | --- | --- |
+|     | In Figma |     |     | Meets Accessibility |     |     | In napari hub + .org Codebases |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ------------------------------ |
 
 Accordions are elements that can be used by designers to hide or reveal content. Use the header text to communicate what type of content the user can expect to see when the Accordion is expanded.
 
 Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
- 
+
 
 ---
 
@@ -25,12 +25,12 @@ These rules establish how much margin should exist between and around elements.
 
 ## Accordion Component
 
-| Below you will find an interactive Storybook iframe for Accordions.  Tabs within each iframe provide a different set of tools: The Controls tab allows you to see and adjust all available props. The Actions tab shows you data displayed by event handler arguments. |   | **Jump to component:** Accordion |
-| --- | --- | --- |
+| Below you will find an interactive Storybook iframe for Accordions. Tabs within each iframe provide a different set of tools: The Controls tab allows you to see and adjust all available props. The Actions tab shows you data displayed by event handler arguments. |     | **Jump to component:** Accordion |
+| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | -------------------------------- |
 
 ---
 
->This component appears as it is in the default SDS codebase. Once imported into the napari hub or napari.org codebases, use a theme file to enable the napari visual appearance customization.
+> This component appears as it is in the default SDS codebase. Once imported into the napari hub or napari.org codebases, use a theme file to enable the napari visual appearance customization.
 
 ### Accordion
 
@@ -42,8 +42,8 @@ To help control the amount of information presented to the user, Accordions are
 
 ## Overview
 
-|  | In Figma |   |  | Meets Accessibility |   |  | In CZ ID Codebase |
-| --- | --- | --- | --- | --- | --- | --- | --- |
+|     | In Figma |     |     | Meets Accessibility |     |     | In CZ ID Codebase |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ----------------- |
 
 Accordions are elements that can be used by designers to hide or reveal content. Use the header text to communicate what type of content the user can expect to see when the Accordion is expanded. They can optionally include a bottom-positioned divider line to help visually separate an Accordion from the one below it.
 
@@ -65,8 +65,8 @@ These rules establish how much margin should exist between and around elements.
 
 ## Accordion Component
 
-| Below you will find an interactive Storybook iframe for Accordions.  Tabs within each iframe provide a different set of tools: The Controls tab allows you to see and adjust all available props. The Actions tab shows you data displayed by event handler arguments. |   | **Jump to component:** Accordion |
-| --- | --- | --- |
+| Below you will find an interactive Storybook iframe for Accordions. Tabs within each iframe provide a different set of tools: The Controls tab allows you to see and adjust all available props. The Actions tab shows you data displayed by event handler arguments. |     | **Jump to component:** Accordion |
+| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | -------------------------------- |
 
 ---
 
@@ -74,7 +74,7 @@ These rules establish how much margin should exist between and around elements.
 
 Storybook
 
- 
+
 
 ---
 
@@ -84,8 +84,8 @@ Accordions are expandable/collapsable elements that hide and reveal content to h
 
 ## Overview
 
-|  | In Figma |   |  | Meets Accessibility |   |  | In Code |
-| --- | --- | --- | --- | --- | --- | --- | --- |
+|     | In Figma |     |     | Meets Accessibility |     |     | In Code |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ------- |
 
 ### Accordion Variants
 
@@ -107,8 +107,8 @@ Default
 
 Left-aligned toggles works well when the Accordion's container is wide, because a right-aligned toggle would be far from the header text and it is less obvious that the two elements are related.
 
-| Default | Default + Divider | Default + Subtitle  | Expanded |
-| --- | --- | --- | --- |
+| Default | Default + Divider | Default + Subtitle | Expanded |
+| ------- | ----------------- | ------------------ | -------- |
 
 ---
 
@@ -117,7 +117,7 @@ Left-aligned toggles works well when the Accordion's container is wide, because
 Use when there's a preference for the Accordion toggle to appear to the right of its header text. The toggle icon right aligns to the right edge of the Accordion's container.
 
 | Default | Default + Divider | Default + Subtitle | Expanded |
-| --- | --- | --- | --- |
+| ------- | ----------------- | ------------------ | -------- |
 
 ---
 
@@ -127,7 +127,7 @@ These rules establish how much margin should exist between and around elements.
 
 ## Code
 
->**Note:** The code examples below must install dependencies before displaying and may take extra time to load
+> **Note:** The code examples below must install dependencies before displaying and may take extra time to load
 
 ## Accordion
 
@@ -139,14 +139,14 @@ The component's source code in the SDS codebase can be found here.
 
 The SDS `Accordion` component introduces a couple new props that aren't part of the MUI version, that make it easier to implement options that may be needed in CZI products:
 
-* **`useDivider`****:** this boolean prop adds a horizontal line below the accordion, which can help to visually separate it from other accordions if they are stacked
-* **`togglePosition`****:** takes `right` (default) or `left` as values, and specifies where the baked-in Chevron icon that acts as a visual toggle sits
+- **`useDivider`\*\***:\*\* this boolean prop adds a horizontal line below the accordion, which can help to visually separate it from other accordions if they are stacked
+- **`togglePosition`\*\***:\*\* takes `right` (default) or `left` as values, and specifies where the baked-in Chevron icon that acts as a visual toggle sits
 
-Additionally, there are a couple of MUI props that are not currently supported by the SDS `Accordion`  component:
+Additionally, there are a couple of MUI props that are not currently supported by the SDS `Accordion` component:
 
-* **`defaultExpanded`****:** this boolean prop has no effect when used
-* **`expanded`****:** this boolean prop is not recommended to be used with the SDS `Accordion` component, because it forces the accordion to remain open even when the user clicks it as though to close it
-* **`disableGutters`****:** this boolean prop is not needed with the SDS accordion design, and has no effect 
+- **`defaultExpanded`\*\***:\*\* this boolean prop has no effect when used
+- **`expanded`\*\***:\*\* this boolean prop is not recommended to be used with the SDS `Accordion` component, because it forces the accordion to remain open even when the user clicks it as though to close it
+- **`disableGutters`\*\***:\*\* this boolean prop is not needed with the SDS accordion design, and has no effect
 
 ### MUI Documentation
 
@@ -156,15 +156,15 @@ Documentation for the underlying MUI component can be found here.
 
 Any custom SDS props and MUI props required for implementation are found on the table below. See the MUI documentation for additional optional props.
 
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `id` | `string` | `-` | A unique id for each accordion item. |
-| `disabled` | `bool` | `false` | The `disabled` prop, when set to true, prevents user interaction with the Accordion component, keeping it in a static state. |
-| `togglePosition` | `"right"` `| "left"` | `right` | Position of the toggle chevron icon. |
-| `subtitle`				 | `string` | `-` | A text that will be displayed as a subtitle beneath the accordion title. |
-| `useDivider` | `bool` | `false` | Display a divider line between accordion items. |
+| Name             | Type        | Default | Description                                                                                                                  |
+| ---------------- | ----------- | ------- | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ |
+| `id`             | `string`    | `-`     | A unique id for each accordion item.                                                                                         |
+| `disabled`       | `bool`      | `false` | The `disabled` prop, when set to true, prevents user interaction with the Accordion component, keeping it in a static state. |
+| `togglePosition` | `"right"` ` | "left"` | `right`                                                                                                                      | Position of the toggle chevron icon. |
+| `subtitle`       | `string`    | `-`     | A text that will be displayed as a subtitle beneath the accordion title.                                                     |
+| `useDivider`     | `bool`      | `false` | Display a divider line between accordion items.                                                                              |
 
-There are more props that can be used with the `InputDropdown`  component, via those available to MUI's `Accordion` component.
+There are more props that can be used with the `InputDropdown` component, via those available to MUI's `Accordion` component.
 
 ### Code examples
 
@@ -197,13 +197,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -213,17 +211,18 @@ h1 {
 
 ```tsx
 // Most minimal Accordion (just has the basic requirements)
-      
-import { Accordion, AccordionHeader, AccordionDetails } from "@czi-sds/components";
+
+import {
+  Accordion,
+  AccordionHeader,
+  AccordionDetails,
+} from "@czi-sds/components";
 import "./styles.css";
 
 function App() {
   return (
     <div className="app">
-      <Accordion
-      id="accordion-1"
-      useDivider={false}
-      togglePosition="right">
+      <Accordion id="accordion-1" useDivider={false} togglePosition="right">
         <AccordionHeader id={`accordion-1-header`}>
           Accordion Header
         </AccordionHeader>
@@ -276,13 +275,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -303,13 +301,24 @@ root.render(
     <div id="root"></div>
   </body>
 </html>
-
 ```
 
 **/package.json**
 
 ```json
-{"dependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-scripts":"^4.0.0"},"devDependencies":{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0","typescript":"^4.0.0"},"main":"/index.tsx"}
+{
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^4.0.0"
+  },
+  "main": "/index.tsx"
+}
 ```
 
 ---
@@ -343,13 +352,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -359,56 +366,63 @@ h1 {
 
 ```tsx
 // Most minimal InputDropdown (just has the basic requirements)
-      
-import { Accordion, AccordionHeader, AccordionDetails } from "@czi-sds/components";
+
+import {
+  Accordion,
+  AccordionHeader,
+  AccordionDetails,
+} from "@czi-sds/components";
 import "./styles.css";
 
 function App() {
   return (
     <div className="app">
-      <Accordion
-      id="accordion-1"
-      useDivider={true}
-      togglePosition="right">
-        <AccordionHeader id={`accordion-1-header`} subtitle="Explore the functionalities of our amazing product">
+      <Accordion id="accordion-1" useDivider={true} togglePosition="right">
+        <AccordionHeader
+          id={`accordion-1-header`}
+          subtitle="Explore the functionalities of our amazing product"
+        >
           Product Features
         </AccordionHeader>
         <AccordionDetails>
-          Unveil the multitude of features that make our product stand out. From seamless 
-          integration with your existing workflow to advanced customization options, 
-          each feature has been meticulously crafted to empower you. Navigate through 
-          this section to discover how our product can revolutionize the way you work.
+          Unveil the multitude of features that make our product stand out. From
+          seamless integration with your existing workflow to advanced
+          customization options, each feature has been meticulously crafted to
+          empower you. Navigate through this section to discover how our product
+          can revolutionize the way you work.
         </AccordionDetails>
       </Accordion>
-      <Accordion
-      id="accordion-2"
-      useDivider={true}
-      togglePosition="right">
-        <AccordionHeader id={`accordion-2-header`} subtitle="Answers to commonly asked questions about our service">
+      <Accordion id="accordion-2" useDivider={true} togglePosition="right">
+        <AccordionHeader
+          id={`accordion-2-header`}
+          subtitle="Answers to commonly asked questions about our service"
+        >
           FAQ Section
         </AccordionHeader>
         <AccordionDetails>
-          Delve into a comprehensive compilation of frequently asked questions and their 
-          detailed answers. This section is your go-to resource for clarifying any doubts 
-          you might have about our service. Whether it's about pricing, compatibility, 
-          or functionality, we've got you covered with clear and concise explanations, 
-          ensuring a smooth and informed experience.
+          Delve into a comprehensive compilation of frequently asked questions
+          and their detailed answers. This section is your go-to resource for
+          clarifying any doubts you might have about our service. Whether it's
+          about pricing, compatibility, or functionality, we've got you covered
+          with clear and concise explanations, ensuring a smooth and informed
+          experience.
         </AccordionDetails>
       </Accordion>
-      
-      <Accordion
-      id="accordion-3"
-      useDivider={false}
-      togglePosition="right">
-        <AccordionHeader id={`accordion-3-header`} subtitle="Enhance your skills with our collection of educational materials">
+
+      <Accordion id="accordion-3" useDivider={false} togglePosition="right">
+        <AccordionHeader
+          id={`accordion-3-header`}
+          subtitle="Enhance your skills with our collection of educational materials"
+        >
           Learning Resources
         </AccordionHeader>
         <AccordionDetails>
-          Embark on a journey of continuous improvement with our treasure trove of learning 
-          materials. This section hosts an array of tutorials, guides, and insightful 
-          articles designed to enhance your skills and deepen your understanding. 
-          Whether you're a beginner or an expert, these resources offer valuable 
-          insights to help you grow and excel in your endeavors.
+          Embark on a journey of continuous improvement with our treasure trove
+          of learning materials. This section hosts an array of tutorials,
+          guides, and insightful articles designed to enhance your skills and
+          deepen your understanding. Whether you're a beginner or an expert,
+          these resources offer valuable insights to help you grow and excel in
+          your endeavors.
         </AccordionDetails>
       </Accordion>
     </div>
@@ -455,13 +469,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -482,13 +495,24 @@ root.render(
     <div id="root"></div>
   </body>
 </html>
-
 ```
 
 **/package.json**
 
 ```json
-{"dependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-scripts":"^4.0.0"},"devDependencies":{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0","typescript":"^4.0.0"},"main":"/index.tsx"}
+{
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^4.0.0"
+  },
+  "main": "/index.tsx"
+}
 ```
 
 ---
@@ -522,13 +546,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -538,57 +560,68 @@ h1 {
 
 ```tsx
 // Most minimal InputDropdown (just has the basic requirements)
-      
-import { Accordion, AccordionHeader, AccordionDetails } from "@czi-sds/components";
+
+import {
+  Accordion,
+  AccordionHeader,
+  AccordionDetails,
+} from "@czi-sds/components";
 import "./styles.css";
 
 function App() {
   return (
     <div className="app">
-      <Accordion
-      id="accordion-1"
-      useDivider={true}
-      togglePosition="right">
-        <AccordionHeader id={`accordion-1-header`} subtitle="Explore the functionalities of our amazing product">
+      <Accordion id="accordion-1" useDivider={true} togglePosition="right">
+        <AccordionHeader
+          id={`accordion-1-header`}
+          subtitle="Explore the functionalities of our amazing product"
+        >
           Product Features
         </AccordionHeader>
         <AccordionDetails>
-          Unveil the multitude of features that make our product stand out. From seamless 
-          integration with your existing workflow to advanced customization options, 
-          each feature has been meticulously crafted to empower you. Navigate through 
-          this section to discover how our product can revolutionize the way you work.
+          Unveil the multitude of features that make our product stand out. From
+          seamless integration with your existing workflow to advanced
+          customization options, each feature has been meticulously crafted to
+          empower you. Navigate through this section to discover how our product
+          can revolutionize the way you work.
         </AccordionDetails>
       </Accordion>
       <Accordion
         disabled={true}
-      id="accordion-2"
-      useDivider={true}
-      togglePosition="right">
-        <AccordionHeader id={`accordion-2-header`} subtitle="Answers to commonly asked questions about our service">
+        id="accordion-2"
+        useDivider={true}
+        togglePosition="right"
+      >
+        <AccordionHeader
+          id={`accordion-2-header`}
+          subtitle="Answers to commonly asked questions about our service"
+        >
           FAQ Section
         </AccordionHeader>
         <AccordionDetails>
-          Delve into a comprehensive compilation of frequently asked questions and their 
-          detailed answers. This section is your go-to resource for clarifying any doubts 
-          you might have about our service. Whether it's about pricing, compatibility, 
-          or functionality, we've got you covered with clear and concise explanations, 
-          ensuring a smooth and informed experience.
+          Delve into a comprehensive compilation of frequently asked questions
+          and their detailed answers. This section is your go-to resource for
+          clarifying any doubts you might have about our service. Whether it's
+          about pricing, compatibility, or functionality, we've got you covered
+          with clear and concise explanations, ensuring a smooth and informed
+          experience.
         </AccordionDetails>
       </Accordion>
-      
-      <Accordion
-      id="accordion-3"
-      useDivider={false}
-      togglePosition="right">
-        <AccordionHeader id={`accordion-3-header`} subtitle="Enhance your skills with our collection of educational materials">
+
+      <Accordion id="accordion-3" useDivider={false} togglePosition="right">
+        <AccordionHeader
+          id={`accordion-3-header`}
+          subtitle="Enhance your skills with our collection of educational materials"
+        >
           Learning Resources
         </AccordionHeader>
         <AccordionDetails>
-          Embark on a journey of continuous improvement with our treasure trove of learning 
-          materials. This section hosts an array of tutorials, guides, and insightful 
-          articles designed to enhance your skills and deepen your understanding. 
-          Whether you're a beginner or an expert, these resources offer valuable 
-          insights to help you grow and excel in your endeavors.
+          Embark on a journey of continuous improvement with our treasure trove
+          of learning materials. This section hosts an array of tutorials,
+          guides, and insightful articles designed to enhance your skills and
+          deepen your understanding. Whether you're a beginner or an expert,
+          these resources offer valuable insights to help you grow and excel in
+          your endeavors.
         </AccordionDetails>
       </Accordion>
     </div>
@@ -635,13 +668,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -662,14 +694,24 @@ root.render(
     <div id="root"></div>
   </body>
 </html>
-
 ```
 
 **/package.json**
 
 ```json
-{"dependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-scripts":"^4.0.0"},"devDependencies":{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0","typescript":"^4.0.0"},"main":"/index.tsx"}
+{
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^4.0.0"
+  },
+  "main": "/index.tsx"
+}
 ```
 
 ---
-