@czi-sds/mcp 0.16.0 → 0.17.0

package/data/zeroheight-exports/Lists.md

@@ -1,986 +0,0 @@
-# Lists
-
-Utilizing a list to present information makes it easier to digest or act upon when compared to showing that same content in a solid block of text.
-
-## Overview
-
-## List Variants
-
-| There are two types of Lists—Unordered Lists where the order of content does not matter and Ordered Lists which communicate a specific sequence for the content. Use a Header with either list type to help provide context to the content presented in the list. Follow the usage criteria accompanying each variant as a guide for selecting the correct List for any given use case. |     | **Jump to variant:** Unordered Ordered |
-| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | -------------------------------------- |
-
----
-
-## Lists
-
-|     | In Figma |     |     | Meets Accessibility |     |     | In napari hub + .org Codebases |
-| --- | -------- | --- | --- | ------------------- | --- | --- | ------------------------------ |
-
-### Unordered List
-
-Use when the order of the list's content does not matter.
-
-| **bodyM** | **bodyS** | **bodyXs** | **bodyXxs** |
-| --------- | --------- | ---------- | ----------- |
-
-**List**
-
----
-
-**List**
-
----
-
-**List**
-
----
-
-**List**
-
----
-
-### Ordered List
-
-Use when the list's content needs to be presented in a specific order or sequence.
-
-| **bodyM** | **bodyS** | **bodyXs** | **bodyXxs** |
-| --------- | --------- | ---------- | ----------- |
-
-**List**
-
----
-
-**List**
-
----
-
-**List**
-
----
-
-**List**
-
----
-
----
-
-### List Spacing
-
-Spacing between List Items changes based on the font mixin size used. See the table below for spacing reference.
-
-| **bodyM** | **bodyS** | **bodyXs** | **bodyXxs** |
-| --------- | --------- | ---------- | ----------- |
-
-**UL_bodyM**
-
----
-
-**UL_bodyS**
-
----
-
-**UL_bodyXs**
-
----
-
-**UL_bodyXxs**
-
----
-
----
-
-**OL_bodyM**
-
----
-
-**OL_bodyS**
-
----
-
-**OL_bodyXs**
-
----
-
-**OL_bodyXxs**
-
----
-
-## Code
-
-## List Component
-
-| Below you will find an interactive Storybook iframe for Lists. 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:** List |
-| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | --------------------------- |
-
----
-
-> 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.
-
-### List
-
-Storybook
-
----
-
-Utilizing a list to present information makes it easier to digest or act upon when compared to showing that same content in a solid block of text.
-
-## Overview
-
-## List Variants
-
-| There are two types of Lists—Unordered Lists where the order of content does not matter and Ordered Lists which communicate a specific sequence for the content. Use a Header with either list type to help provide context to the content presented in the list. Follow the usage criteria accompanying each variant as a guide for selecting the correct List for any given use case. |     | **Jump to variant:** Unordered Ordered |
-| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | -------------------------------------- |
-
----
-
-## Lists
-
-|     | In Figma |     |     | Meets Accessibility |     |     | In CZ GEN EPI Codebase |
-| --- | -------- | --- | --- | ------------------- | --- | --- | ---------------------- |
-
-### Unordered List
-
-Use when the order of the list's content does not matter.
-
-| **fontBodyL** | **fontBodyM** | **fontBodyS** | **fontBodyXs** | **fontBodyXxs** | **fontBodyXxxs** |
-| ------------- | ------------- | ------------- | -------------- | --------------- | ---------------- |
-
-**List**
-
----
-
-**List**
-
----
-
-**List**
-
----
-
-**List**
-
----
-
-**List**
-
----
-
-**List**
-
----
-
-### Ordered List
-
-Use when the list's content needs to be presented in a specific order or sequence.
-
-| **fontBodyL** | **fontBodyM** | **fontBodyS** | **fontBodyXs** | **fontBodyXxs** | **fontBodyXxxs** |
-| ------------- | ------------- | ------------- | -------------- | --------------- | ---------------- |
-
-**List**
-
----
-
-**List**
-
----
-
-**List**
-
----
-
-**List**
-
----
-
-**List**
-
----
-
-**List**
-
----
-
----
-
-### List Spacing
-
-Spacing between List Items changes based on the font mixin size used. See the table below for spacing reference.
-
-| **fontBodyL** | **fontBodyM** | **fontBodyS** | **fontBodyXs** | **fontBodyXxs** | **fontBodyXxxs** |
-| ------------- | ------------- | ------------- | -------------- | --------------- | ---------------- |
-
-**UL_fontL**
-
----
-
-**UL_fontM**
-
----
-
-**UL_fontS**
-
----
-
-**UL_fontXs**
-
----
-
-**UL_fontXxs**
-
----
-
-**UL_fontXxxs**
-
----
-
----
-
-**OL_fontL**
-
----
-
-**OL_fontM**
-
----
-
-**OL_fontS**
-
----
-
-**OL_fontXs**
-
----
-
-**OL_fontXxs**
-
----
-
-**OL_fontXxxs**
-
----
-
-## Code
-
-## List Component
-
-| Below you will find an interactive Storybook iframe for Lists. 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:** List |
-| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | --------------------------- |
-
----
-
-> This component appears as it is in the default SDS codebase. Once imported into the CZ GEN EPI codebase, use a theme file to enable the CZ GEN EPI visual appearance customization.
-
-### List
-
-Storybook
-
----
-
-Utilizing a list to present information makes it easier to digest or act upon when compared to showing that same content in a solid block of text.
-
-## Overview
-
-## List Variants
-
-| There are two types of Lists—Unordered Lists where the order of content does not matter and Ordered Lists which communicate a specific sequence for the content. Use a Header with either list type to help provide context to the content presented in the list. Follow the usage criteria accompanying each variant as a guide for selecting the correct List for any given use case. |     | **Jump to variant:** Unordered Ordered |
-| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | -------------------------------------- |
-
----
-
-## Lists
-
-|     | In Figma |     |     | Meets Accessibility |     |     | In CZ ID Codebase |
-| --- | -------- | --- | --- | ------------------- | --- | --- | ----------------- |
-
-### Unordered List
-
-Use when the order of the list's content does not matter.
-
-| **fontBodyL** | **fontBodyM** | **fontBodyS** | **fontBodyXs** | **fontBodyXxs** | **fontBodyXxxs** |
-| ------------- | ------------- | ------------- | -------------- | --------------- | ---------------- |
-
-**List**
-
----
-
-**List**
-
----
-
-**List**
-
----
-
-**List**
-
----
-
-**List**
-
----
-
-**List**
-
----
-
-### Ordered List
-
-Use when the list's content needs to be presented in a specific order or sequence.
-
-| **fontBodyL** | **fontBodyM** | **fontBodyS** | **fontBodyXs** | **fontBodyXxs** | **fontBodyXxxs** |
-| ------------- | ------------- | ------------- | -------------- | --------------- | ---------------- |
-
-**List**
-
----
-
-**List**
-
----
-
-**List**
-
----
-
-**List**
-
----
-
-**List**
-
----
-
-**List**
-
----
-
----
-
-### List Spacing
-
-Spacing between List Items changes based on the font mixin size used. See the table below for spacing reference.
-
-| **fontBodyL** | **fontBodyM** | **fontBodyS** | **fontBodyXs** | **fontBodyXxs** | **fontBodyXxxs** |
-| ------------- | ------------- | ------------- | -------------- | --------------- | ---------------- |
-
-**UL_fontL**
-
----
-
-**UL_fontM**
-
----
-
-**UL_fontS**
-
----
-
-**UL_fontXs**
-
----
-
-**UL_fontXxs**
-
----
-
-**UL_fontXxxs**
-
----
-
----
-
-**OL_fontL**
-
----
-
-**OL_fontM**
-
----
-
-**OL_fontS**
-
----
-
-**OL_fontXs**
-
----
-
-**OL_fontXxs**
-
----
-
-**OL_fontXxxs**
-
----
-
-## Code
-
-## List Component
-
-| Below you will find an interactive Storybook iframe for Lists. 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:** List |
-| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | --------------------------- |
-
----
-
-### List
-
-Storybook
-
----
-
-Utilizing a list to present information makes it easier to digest or act upon when compared to showing that same content in a solid block of text.
-
-## Guidelines
-
-## Overview
-
-|     | In Figma |     |     | Meets Accessibility |     |     | In Code |
-| --- | -------- | --- | --- | ------------------- | --- | --- | ------- |
-
-### List Variants
-
-There are two types of Lists—Unordered where the order of content does not matter and Ordered which communicate a specific sequence for the content. Use a header with either list type to help provide context to the content presented in the list.
-
-**Preview_List_Ordered**
-
----
-
-**Preview_List_Unordered**
-
----
-
----
-
-### Live Instance
-
-Interact with the live instance below and adjust the available props to better conceptualize how it will appear in product:
-
-Default
-
----
-
-### List – Ordered
-
-Use when the list's content needs to be presented in a specific order or sequence.
-
-| fontBodyL | fontBodyM | fontBodyS | fontBodyXs | fontBodyXxs | fontBodyXxxs |
-| --------- | --------- | --------- | ---------- | ----------- | ------------ |
-
-**List_Ordered_L**
-
----
-
-**List_Ordered_M**
-
----
-
-**List_Ordered_S**
-
----
-
-**List_Ordered_Xs**
-
----
-
-**List_Ordered_Xxs**
-
----
-
-**List_Ordered_Xxxs**
-
----
-
----
-
-### List – Unordered
-
-Use when the order of the list's content does not matter.
-
-| fontBodyL | fontBodyM | fontBodyS | fontBodyXs | fontBodyXxs | fontBodyXxxs |
-| --------- | --------- | --------- | ---------- | ----------- | ------------ |
-
-**List_Unordered_L**
-
----
-
-**List_Unordered_M**
-
----
-
-**List_Unordered_S**
-
----
-
-**List_Unordered_Xs**
-
----
-
-**List_Unordered_Xxs**
-
----
-
-**List_Unordered_Xxxs**
-
----
-
----
-
-### List Spacing
-
-Spacing between List Items changes based on the font size used. See the table below for spacing reference.
-
-| fontBodyL | fontBodyM | fontBodyS | fontBodyXs | fontBodyXxs | fontBodyXxxs |
-| --------- | --------- | --------- | ---------- | ----------- | ------------ |
-
-**UL_fontL**
-
----
-
-**UL_fontM**
-
----
-
-**UL_fontS**
-
----
-
-**UL_fontXs**
-
----
-
-**UL_fontXxs**
-
----
-
-**UL_fontXxxs**
-
----
-
-**OL_fontL**
-
----
-
-**OL_fontM**
-
----
-
-**OL_fontS**
-
----
-
-**OL_fontXs**
-
----
-
-**OL_fontXxs**
-
----
-
-**OL_fontXxxs**
-
----
-
-## Code
-
-> **Note:** The code examples below must install dependencies before displaying and may take extra time to load
-
-## List
-
-### SDS Source Code
-
-The component's source code in the SDS codebase can be found here.
-
-### Props
-
-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                                                                                                                                                    |
-| -------------- | ---------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ | ---- | ----- | -------------------------------------------------------------------------------------------- |
-| `marginBottom` | `"xxxs"` ` | "xxs"` ` | "xs"` `                                                                                                                                                        | "s"` ` | "m"` ` | "l"` | `"s"` | Determines the bottom margin size for the list, controlling its spacing from other elements. |
-| `ordered`      | `boolean`  | `false`  | Specifies the type of list component to render. When set to `true`, the list will be an ordered `"ol"` tag, while `false` will render an unordered `"ul"` tag. |
-
-## ListItem
-
-### SDS Source Code
-
-The component's source code in the SDS codebase can be found here.
-
-### Props
-
-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                                                                                    |
-| -------------- | ---------- | -------- | ---------------------------------------------------------------------------------------------- | ------ | --------------------------------------------------------------------------------------------- | ---- | ----- | ------------------------------------------------------------------- |
-| `fontSize`     | `"xxxs"` ` | "xxs"` ` | "xs"` `                                                                                        | "s"` ` | "m"` `                                                                                        | "l"` | `"s"` | Sets the font size for the list items, influencing their text size. |
-| `marginBottom` | `"s"` `    | "xs"` `  | "xxs"`                                                                                         | `"xs"` | Controls the bottom margin size for the list items, affecting the spacing between list items. |
-| `ordered`      | `boolean`  | `false`  | Specifies the style and spacings of the list item components based on the parent list element. |
-
-### Code examples
-
-#### Unordered list
-
-This example shows an unordered `List` of items.
-
-**/styles.css**
-
-```css
-body {
-  font-size: 13px;
-  font-weight: 400;
-  letter-spacing: 0.08px;
-  line-height: 20px;
-  text-transform: none;
-  font-family: "Inter", sans-serif;
-}
-
-h1 {
-  font-size: 1.5rem;
-}
-
-.app {
-  padding: 20px;
-}
-```
-
-**tsconfig.json**
-
-```json
-{
-  "include": ["./**/*"],
-  "compilerOptions": {
-    "strict": true,
-    "esModuleInterop": true,
-    "lib": ["dom", "es2015"],
-    "jsx": "react-jsx"
-  }
-}
-```
-
-**/App.tsx**
-
-```tsx
-import { List, ListItem } from "@czi-sds/components";
-import "./styles.css";
-
-function App() {
-  return (
-    <div className="app">
-      <List>
-        <ListItem fontSize="l" marginBottom="s">
-          fontSize=l marginBottom=s
-        </ListItem>
-        <ListItem fontSize="m" marginBottom="s">
-          fontSize=m marginBottom=s
-        </ListItem>
-        <ListItem fontSize="s" marginBottom="xs">
-          fontSize=s marginBottom=xs
-        </ListItem>
-        <ListItem fontSize="xs" marginBottom="xs">
-          fontSize=xs marginBottom=xs
-        </ListItem>
-        <ListItem fontSize="xxs" marginBottom="xs">
-          fontSize=xxs marginBottom=xs
-        </ListItem>
-        <ListItem fontSize="xxxs" marginBottom="xxs">
-          fontSize=xxxs marginBottom=xxs
-        </ListItem>
-      </List>
-    </div>
-  );
-}
-
-export default App;
-```
-
-**/index.tsx**
-
-```tsx
-import React from "react";
-import { createRoot } from "react-dom/client";
-import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
-import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
-import { Theme } from "@czi-sds/components";
-import CssBaseline from "@mui/material/CssBaseline";
-import useMediaQuery from "@mui/material/useMediaQuery";
-
-import App from "./App";
-
-const container = document.getElementById("root");
-const root = createRoot(container!);
-
-const RootApp = () => {
-  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
-  const theme = prefersDarkMode ? Theme("dark") : Theme("light");
-
-  return (
-    <StyledEngineProvider injectFirst>
-      <ThemeProvider theme={theme}>
-        <EmotionThemeProvider theme={theme}>
-          <CssBaseline />
-          <App />
-        </EmotionThemeProvider>
-      </ThemeProvider>
-    </StyledEngineProvider>
-  );
-};
-
-root.render(
-  <React.StrictMode>
-    <RootApp />
-  </React.StrictMode>
-);
-```
-
-**/public/index.html**
-
-```html
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
-    <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"
-}
-```
-
----
-
-#### Ordered List
-
-This example shows an ordered `List` of items with nested items.
-
-**/styles.css**
-
-```css
-body {
-  font-size: 13px;
-  font-weight: 400;
-  letter-spacing: 0.08px;
-  line-height: 20px;
-  text-transform: none;
-  font-family: "Inter", sans-serif;
-}
-
-h1 {
-  font-size: 1.5rem;
-}
-
-.app {
-  padding: 20px;
-}
-```
-
-**tsconfig.json**
-
-```json
-{
-  "include": ["./**/*"],
-  "compilerOptions": {
-    "strict": true,
-    "esModuleInterop": true,
-    "lib": ["dom", "es2015"],
-    "jsx": "react-jsx"
-  }
-}
-```
-
-**/App.tsx**
-
-```tsx
-import { List, ListItem, ListSubheader } from "@czi-sds/components";
-import "./styles.css";
-
-function App() {
-  return (
-    <div className="app">
-      <List
-        ordered
-        subheader={
-          <ListSubheader disableSticky>
-            Font sizes and spacing for a nested ordered list
-          </ListSubheader>
-        }
-      >
-        <ListItem ordered>
-          <span>
-            Nested List 1
-            <List ordered>
-              <ListItem ordered fontSize="l" marginBottom="s">
-                fontSize=l marginBottom=s
-              </ListItem>
-              <ListItem ordered fontSize="m" marginBottom="s">
-                fontSize=m marginBottom=s
-              </ListItem>
-              <ListItem ordered fontSize="s" marginBottom="xs">
-                fontSize=s marginBottom=xs
-              </ListItem>
-            </List>
-          </span>
-        </ListItem>
-        <ListItem ordered>
-          <span>
-            Nested List 2
-            <List ordered>
-              <ListItem ordered fontSize="l">
-                <span>
-                  Nested List 2
-                  <List ordered>
-                    <ListItem ordered fontSize="l" marginBottom="s">
-                      fontSize=l marginBottom=s
-                    </ListItem>
-                    <ListItem ordered fontSize="m" marginBottom="s">
-                      fontSize=m marginBottom=s
-                    </ListItem>
-                    <ListItem ordered fontSize="s" marginBottom="xs">
-                      fontSize=s marginBottom=xs
-                    </ListItem>
-                  </List>
-                </span>
-              </ListItem>
-              <ListItem ordered fontSize="m" marginBottom="s">
-                fontSize=m marginBottom=s
-              </ListItem>
-              <ListItem ordered fontSize="s" marginBottom="xs">
-                fontSize=s marginBottom=xs
-              </ListItem>
-            </List>
-          </span>
-        </ListItem>
-        <ListItem ordered>
-          <span>
-            Nested List 3
-            <List ordered>
-              <ListItem ordered fontSize="l" marginBottom="s">
-                fontSize=l marginBottom=s
-              </ListItem>
-              <ListItem ordered fontSize="m" marginBottom="s">
-                fontSize=m marginBottom=s
-              </ListItem>
-              <ListItem ordered fontSize="s" marginBottom="xs">
-                fontSize=s marginBottom=xs
-              </ListItem>
-            </List>
-          </span>
-        </ListItem>
-      </List>
-    </div>
-  );
-}
-
-export default App;
-```
-
-**/index.tsx**
-
-```tsx
-import React from "react";
-import { createRoot } from "react-dom/client";
-import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
-import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
-import { Theme } from "@czi-sds/components";
-import CssBaseline from "@mui/material/CssBaseline";
-import useMediaQuery from "@mui/material/useMediaQuery";
-
-import App from "./App";
-
-const container = document.getElementById("root");
-const root = createRoot(container!);
-
-const RootApp = () => {
-  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
-  const theme = prefersDarkMode ? Theme("dark") : Theme("light");
-
-  return (
-    <StyledEngineProvider injectFirst>
-      <ThemeProvider theme={theme}>
-        <EmotionThemeProvider theme={theme}>
-          <CssBaseline />
-          <App />
-        </EmotionThemeProvider>
-      </ThemeProvider>
-    </StyledEngineProvider>
-  );
-};
-
-root.render(
-  <React.StrictMode>
-    <RootApp />
-  </React.StrictMode>
-);
-```
-
-**/public/index.html**
-
-```html
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
-    <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"
-}
-```
-
----