@czi-sds/mcp 0.5.2 → 0.5.4

package/data/zeroheight-exports/Corners.md

@@ -2,23 +2,16 @@
 
 Corners (border radiuses) provide visual, and often functional, distinction and help differentiate between different types of similar elements.
 
-### Types of Corners
-
-| **Example** |     | **Corner Type** |     | **Usage**                                                                                                      |
-| ----------- | --- | --------------- | --- | -------------------------------------------------------------------------------------------------------------- |
-|             |     | Large Corner    |     | Rounded elements (for example: rounded Buttons and rounded Dropdown Inputs)                                    |
-|             |     | Medium Corner   |     | Standard, default radius for corners in UI elements ( for example: square Buttons, Dialogs, square Tags, etc.) |
-|             |     | Small Corner    |     | Corners on elements that are smaller than 20px × 20px that need a square corner (for example: Checkboxes)      |
-|             |     | No Set Corner   |     | Corners for elements without any radius (for example: backgrounds on Menu Items and Table Cells)               |
-
 ### Corner Variables
 
-| **Visual** |     | **Figma Variable** |     | **CSS / SCSS Variables**               |     | **Value**              |
-| ---------- | --- | ------------------ | --- | -------------------------------------- | --- | ---------------------- |
-|            |     | `cornerL`          |     | `--sds-corner-l` `$sds-corner-l`       |     | `border-radius: 20px;` |
-|            |     | `cornerM`          |     | `--sds-corner-m` `$sds-corner-m`       |     | `border-radius: 4px;`  |
-|            |     | `cornerS`          |     | `--sds-corner-s` `$sds-corner-s`       |     | `border-radius: 2px;`  |
-|            |     | `cornerNone`       |     | `--sds-corner-none` `$sds-corner-none` |     | `border-radius: 0px;`  |
+| **Visual** |     | **Figma Variable** |     | **CSS / SCSS Variables**                     |     | **Value**              |
+| ---------- | --- | ------------------ | --- | -------------------------------------------- | --- | ---------------------- |
+|            |     | `cornerRounded`    |     | `--sds-corner-rounded` `$sds-corner-rounded` |     | `border-radius: 20px;` |
+|            |     | `cornerXl`         |     | `--sds-corner-xl` `$sds-corner-xl`           |     | `border-radius: 8px;`  |
+|            |     | `cornerL`          |     | `--sds-corner-l` `$sds-corner-l`             |     | `border-radius: 6px;`  |
+|            |     | `cornerM`          |     | `--sds-corner-m` `$sds-corner-m`             |     | `border-radius: 4px;`  |
+|            |     | `cornerS`          |     | `--sds-corner-s` `$sds-corner-s`             |     | `border-radius: 2px;`  |
+|            |     | `cornerNone`       |     | `--sds-corner-none` `$sds-corner-none`       |     | `border-radius: 0px;`  |
 
 ---
 

package/data/zeroheight-exports/Dialog.md

@@ -26,18 +26,30 @@ Dialogs may be dismissed by:
 - Clicking the close Icon Button
 - Clicking outside of the Dialog. Doing this will result in any selections the user has made being lost, so it is recommended that the `canOutsideClickClose` prop remain set to `false` (the default setting) in instances where losing entered information would be a significant burden to the user
 
+**Dialog**
+
+---
+
 ---
 
 ### Dialog Spacing
 
 In instances where the length of content contained in the Dialog results in the Dialog filling the entire height of the screen, there must be a minimum of `spaceXxl` margin above and below the Dialog window. The Dialog content scrolls when it exceeds the max-height of the dialog window; the title and any action Buttons are anchored to the top and bottom during scrolling.
 
+**Dialog Spacing (napari hub + .org)**
+
+---
+
 ---
 
 ### Dialog Backdrop
 
 A backdrop appears behind the active Dialog to bring emphasis to it as well as indicate to users that they cannot interact with the content on the page behind it.
 
+**Dialog Backdrop (napari hub + .org)**
+
+---
+
 ## Code
 
 ## Dialog Component
@@ -98,12 +110,26 @@ Persistent Dialogs are generally used in multi-step workflows where dismissing t
 
 Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
+**Default (1 button)**
+
+---
+
+---
+
+**Default (2 buttons)**
+
+---
+
+---
 
+**Default (2 buttons) + Overline + Subtitle**
 
 ---
 
 ---
 
+**Default (2 buttons) + Child Node (artwork)**
+
 ---
 
 ### Dismissible Dialog
@@ -112,26 +138,54 @@ Use this variant to allow the user the ability to manually dismiss the Dialog by
 
 Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
+**Default**
+
 ---
 
 ---
 
+**Default (1 button)**
+
+---
+
+---
+
+**Default (2 buttons)**
+
 ---
 
 ---
 
+**Default (2 buttons) + Overline + Subtitle**
+
+---
+
+---
+
+**Default (2 buttons) + Child Node (artwork)**
+
+---
+
 ---
 
 ### Dialog Spacing
 
 In instances where the length of content contained in the Dialog results in the Dialog filling the entire height of the screen, there must be a minimum of `spaceXxl` margin above and below the Dialog window. The Dialog content scrolls when it exceeds the max-height of the dialog window; title, overline, subtitle, and any action Buttons are anchored to the top and bottom during scrolling.
 
+**Dialog Spacing (CZ GE)**
+
+---
+
 ---
 
 ### Dialog Backdrop
 
 A backdrop appears behind the active Dialog to bring emphasis to it as well as indicate to users that they cannot interact with the content on the page behind it.
 
+**Dialog Backdrop (CZ GE)**
+
+---
+
 ---
 
 ## Dialog Use Cases
@@ -144,7 +198,9 @@ Nested Dialogs should only be used in specific scenarios, most notably when a us
 
 Avoid using nested dialogs when possible because it introduces layers of complexity to pages and may make it more difficult for users to anticipate the results of their actions. It may also impede usability by making it more difficult for users to quickly exit a flow. Instead, explore utilizing a multi-step Dialog workflow (see below).
 
+**Nested Dialogs (CZ GE)**
 
+---
 
 ### Multi-step Dialog Workflow
 
@@ -154,6 +210,10 @@ For a flow that takes place inside a Dialog, all steps within that workflow shou
 
 The Dialog should not be dismissible and the `canOutsideClickClose` prop should be set to `false` to prevent any accidental loss of progress.
 
+**Multi-step Workflow (CZ GE)**
+
+---
+
 ## Code
 
 ## Dialog Component
@@ -214,12 +274,26 @@ Persistent Dialogs are generally used in multi-step workflows where dismissing t
 
 Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
+**Default (1 button)**
+
+---
+
+---
+
+**Default (2 buttons)**
+
+---
+
+---
 
+**Default (2 buttons) + Overline + Subtitle**
 
 ---
 
 ---
 
+**Default (2 buttons) + Child Node (artwork)**
+
 ---
 
 ### Dismissible Dialog
@@ -228,12 +302,32 @@ Use this variant to allow the user the ability to manually dismiss the Dialog by
 
 Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
+**Default**
+
+---
+
+---
+
+**Default (1 button)**
+
 ---
 
 ---
 
+**Default (2 buttons)**
+
+---
+
+---
+
+**Default (2 buttons) + Overline + Subtitle**
+
+---
+
 ---
 
+**Default (2 buttons) + Child Node (artwork)**
+
 ---
 
 ---
@@ -242,7 +336,9 @@ Click on each state below to enter inspect view and get details on its code attr
 
 In instances where the length of content contained in the Dialog results in the Dialog filling the entire height of the screen, there must be a minimum of `spaceXxl` margin above and below the Dialog window. The Dialog content scrolls when it exceeds the max-height of the dialog window; title, overline, subtitle, and any action Buttons are anchored to the top and bottom during scrolling.
 
+**Dialog Spacing (CZ ID)**
 
+---
 
 ---
 
@@ -250,6 +346,10 @@ In instances where the length of content contained in the Dialog results in the
 
 A backdrop appears behind the active Dialog to bring emphasis to it as well as indicate to users that they cannot interact with the content on the page behind it.
 
+**Dialog Backdrop (CZ ID)**
+
+---
+
 ---
 
 ## Dialog Use Cases
@@ -262,7 +362,9 @@ Nested Dialogs should only be used in specific scenarios, most notably when a us
 
 Avoid using nested dialogs when possible because it introduces layers of complexity to pages and may make it more difficult for users to anticipate the results of their actions. It may also impede usability by making it more difficult for users to quickly exit a flow. Instead, explore utilizing a multi-step Dialog workflow (see below).
 
+**Nested Dialogs (SDS + CZ ID)**
 
+---
 
 ### Multi-step Dialog Workflow
 
@@ -272,6 +374,10 @@ For a flow that takes place inside a Dialog, all steps within that workflow shou
 
 The Dialog should not be dismissible and the `canOutsideClickClose` prop should be set to `false` to prevent any accidental loss of progress.
 
+**Multi-step Workflow (CZ ID)**
+
+---
+
 ## Code
 
 ## Dialog Component
@@ -285,8 +391,6 @@ The Dialog should not be dismissible and the `canOutsideClickClose` prop should
 
 Storybook
 
-
-
 ---
 
 A Dialog is a window element that appears on top of content to provide information or prompt the user for an action. When a Dialog is active, it disables all functionality of the page below and remains on the screen until it is either dismissed or an action has been taken.
@@ -325,6 +429,14 @@ Users can dismiss them by:
 - Clicking the close Tertiary Icon Button (Dismissible variant only)
 - Clicking outside of the Dialog. Doing this will result in any selections the user has made being lost, so it is recommended that this be disabled in instances where losing entered information would be a significant burden to the user
 
+**Preview_Guidelines_Dialog_persistent**
+
+---
+
+**Preview_Guidelines_Dialog_dismissible**
+
+---
+
 ---
 
 ### Live Instance
@@ -347,9 +459,33 @@ Persistent Dialogs are generally used:
 | 1 Button | 2 Buttons | 2 Buttons, left-aligned |
 | -------- | --------- | ----------------------- |
 
+**Dialog_Persistent_1 button**
+
+---
+
+**Dialog_Persistent_2 buttons**
+
+---
+
+**Dialog_Persistent_2 buttons, left**
+
+---
+
 | 2 Buttons, rounded | 2 Buttons + Overline + Subtitle | 2 Buttons + Artwork |
 | ------------------ | ------------------------------- | ------------------- |
 
+**Dialog_Persistent_2 buttons, rounded**
+
+---
+
+**Dialog_Persistent_overline, subtitle**
+
+---
+
+**Dialog_Persistent_artwork**
+
+---
+
 ---
 
 ### Dialog – Dismissible
@@ -359,15 +495,47 @@ Use this variant to allow the user the ability to manually dismiss the Dialog by
 | 0 Buttons | 1 Button | 2 Buttons | 2 Buttons, left-aligned |
 | --------- | -------- | --------- | ----------------------- |
 
+**Dialog_Dismissible_0 buttons**
+
+---
+
+**Dialog_Dismissible_1 button**
+
+---
+
+**Dialog_Dismissible_2 buttons**
+
+---
+
+**Dialog_Dismissible_2 buttons, left**
+
+---
+
 | 2 Buttons, rounded | 2 Buttons + Overline + Subtitle | 2 Buttons + Artwork |
 | ------------------ | ------------------------------- | ------------------- |
 
+**Dialog_Dismissible_2 buttons, rounded**
+
+---
+
+**Dialog_Dismissible_overline, subtitle**
+
+---
+
+**Dialog_Dismissible_artwork**
+
+---
+
 ---
 
 ### Dialog Spacing
 
 In instances where the length of content contained in the Dialog results in the Dialog filling the entire height of the screen, there must be a minimum of `spaceXxl` margin above and below the Dialog window. The Dialog content scrolls when it exceeds the max-height of the dialog window; title, overline, subtitle, and any action Buttons are anchored to the top and bottom during scrolling.
 
+**Dialog Spacing (SDS)**
+
+---
+
 ---
 
 ### Dialog Backdrop
@@ -376,6 +544,10 @@ A backdrop appears behind the active Dialog to bring emphasis to it as well as i
 
 The default backdrop is dark and customizable at the product level.
 
+**Dialog Backdrop (SDS)**
+
+---
+
 ---
 
 ### Dialog Use Cases
@@ -388,6 +560,10 @@ Nested Dialogs should only be used in specific scenarios, most notably when a us
 
 Avoid using nested dialogs when possible because it introduces layers of complexity to pages and may make it more difficult for users to anticipate the results of their actions. It may also impede usability by making it more difficult for users to quickly exit a flow. Instead, explore utilizing a multi-step Dialog workflow (see below).
 
+**Nested Dialogs (SDS + CZ ID)**
+
+---
+
 #### Multi-step Dialog Workflow
 
 Dialog workflows should contain no more than three steps. Workflows that are more than three steps should be designed as a full-page experience.
@@ -396,6 +572,10 @@ For a flow that takes place inside a Dialog, all steps within that workflow shou
 
 The Dialog should not be dismissible to prevent any accidental loss of progress.
 
+**Multi-step Workflow (SDS)**
+
+---
+
 ## Code
 
 > **Note:** The code examples below must install dependencies before displaying and may take extra time to load
@@ -596,15 +776,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Dialog</title>
     <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;600&display=swap"
+      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;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
       rel="stylesheet"
     />
   </head>
@@ -776,15 +955,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Dialog</title>
     <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;600&display=swap"
+      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;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
       rel="stylesheet"
     />
   </head>
@@ -957,15 +1135,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Dialog</title>
     <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;600&display=swap"
+      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;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
       rel="stylesheet"
     />
   </head>
@@ -1152,15 +1329,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Dialog</title>
     <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;600&display=swap"
+      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;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
       rel="stylesheet"
     />
   </head>

package/data/zeroheight-exports/Downloads.md

@@ -15,6 +15,18 @@ Individual files can typically be downloaded immediately. If the user can config
 
 The example flow below shows the immediate download of an individual data file. Within CZ GEN EPI, this download type is used for downloading data associated with individual phlyogenetic trees.
 
+**Flow**
+
+---
+
+---
+
+**1. Single-select**
+
+---
+
+**2B. Dropdown Menu**
+
 ---
 
 ---
@@ -25,6 +37,18 @@ If the files are small enough, users can download multiple files at once by sele
 
 The example flow below shows the immediate download of multiple data files. Within CZ GEN EPI, this download type is used is used to download data or FASTA files for one or more samples.
 
+**Flow**
+
+---
+
+---
+
+**1. Multi-select**
+
+---
+
+**2B. Download Dialog**
+
 ---
 
 ---
@@ -44,6 +68,22 @@ Individual files can typically be downloaded immediately. If the user can config
 
 The example flow below shows the immediate download of an individual data file.
 
+**CZ ID_Individual File, Immediate Download flow**
+
+---
+
+---
+
+**1. Single-select**
+
+---
+
+**2B. Download Dialog**
+
+---
+
+**2C. Dropdown Menu**
+
 ---
 
 ---
@@ -54,6 +94,18 @@ If the files are small enough, users can download multiple files at once by sele
 
 The example flow below shows the immediate download of multiple data files.
 
+**CZ ID_Multiple Files, Immediate Download flow**
+
+---
+
+---
+
+**1. Multi-select**
+
+---
+
+**2B. Download Dialog**
+
 ---
 
 ---
@@ -66,11 +118,27 @@ Once the user confirms their selection, the system will begin generating their d
 
 The example flow below shows the asynchronous download of multiple data files.
 
+**CZ ID_Multiple Files, Asynchronous Download flow**
+
+---
+
+---
+
+**1. Multi-select**
+
+---
 
+**2. Download Dialog**
 
 ---
 
+**3. Download Notification**
 
+---
+
+**4. Downloads View**
+
+---
 
 ---
 
@@ -91,6 +159,22 @@ Individual files can typically be downloaded immediately. If the user can config
 
 The example flow below uses Single Cell to show the immediate download of an individual data file.
 
+**Flow**
+
+---
+
+---
+
+**1. Single-select**
+
+---
+
+**2B. Download Dialog**
+
+---
+
+**2C. Dropdown Menu**
+
 ---
 
 ---
@@ -103,6 +187,18 @@ If the files are small enough, users can download multiple files at once by sele
 
 The example flow below uses CZ GE to show the immediate download of multiple data files.
 
+**Multiple Files, Immediate Download flow**
+
+---
+
+---
+
+**1. Multi-select**
+
+---
+
+**2B. Download Dialog**
+
 ---
 
 ---
@@ -117,4 +213,24 @@ Once the user confirms their selection, the system will begin generating their d
 
 The example flow below uses CZ ID to show the asynchronous download of multiple data files.
 
+**Flow**
+
+---
+
+---
+
+**1. Multi-select**
+
+---
+
+**2. Download Dialog**
+
+---
+
+**3. Download Notification**
+
+---
+
+**4. Downloads View**
+
 ---