@czi-sds/mcp 0.5.2 → 0.5.4

package/data/zeroheight-exports/Filters.md

@@ -14,26 +14,62 @@ Users can filter using any combination of Filter options presented to them—see
 | **Closed** | **Open** | **Active** |
 | ---------- | -------- | ---------- |
 
+**Filter_Closed**
+
+---
+
+**Filter_Open**
+
+---
+
+**Filter_Active**
+
+---
+
 ### Filter Variants
 
+**Default**
+
+---
+
+---
+
+**Default + Search**
+
 ---
 
 ### Filter Example
 
 The example below shows Filters being used as part of the plugin search on napari hub.
 
+**Filter_Example**
+
+---
+
 ---
 
 ### Filter Spacing
 
 These rules establish how much margin should exist between and around elements. Follow spacing rules for Dropdown Menus for spacing guidance for the Filter Input.
 
+**Filter_Spacing**
+
+---
+
 ---
 
 ## Filtering Logic
 
 Filtering logic is handled at the product level; however, this section offers some suggestions for best practices to consider when establishing filtering logic.
 
+**Between filter categories: use "AND"**
+
+---
+
+**Within filter categories: use "OR"**
+
+---
+
 ## Code
 
 ## Filter Components
@@ -67,32 +103,74 @@ The Dropdown Menu that is activated when the Filter Label is clicked displays th
 | **Closed** | **Open** | **Active** |
 | ---------- | -------- | ---------- |
 
+**Complex Filter_Closed**
+
+---
+
+**Complex Filter_Open**
+
+---
+
+**Complex Filter_Active**
+
+---
+
 ### Filter Variants
 
+**Single-select**
+
+---
+
+---
+
+**Single-select + Search**
+
 ---
 
 ---
 
+**Multi-select**
+
+---
+
 ---
 
+**Multi-select + Search**
 
+---
 
 ### Filter Example
 
 The example below shows Complex Filters being used as part of a Basic Panel in CZ GEN EPI.
 
+**Complex Filter_Example**
+
+---
+
 ---
 
 ### Filter Spacing
 
 These rules establish how much margin should exist between and around elements. Follow spacing rules for Dropdown Menus for spacing guidance for the Complex Filter Input.
 
+**Complex Filter_Spacing**
+
+---
+
 ---
 
 ## Filtering Logic
 
 Filtering logic is handled at the product level, however, this section offers some suggestions for best practices to consider when establishing filtering logic.
 
+**Between filter categories: use "AND"**
+
+---
+
+---
+
+**Within filter categories: use "OR"**
+
 ---
 
 ## Code
@@ -130,15 +208,29 @@ Filters are used to narrow down large amounts of data based on specific criteria
 
 Use the Simple Filter when there are only a few options to filter on or there are only a few filter categories needed for a given dataset. Simple Filters are comprised of a Filter Label combined with a Filter Input that is Single-select (Radio Lockup), Multi-select (Checkbox Lockup), or a Range (Slider) depending on the filtering needs of the dataset. In contrast to Complex Filters which keep filter options contained within a Dropdown Menu, Simple Filters have all of the options for each filter exposed in the UI and viewable by the user. Users can filter using any combination of Filter options presented to them—see the Filtering Logic section below for an overview of how applied Filters affect the dataset being filtered.
 
+**Single-select**
+
+---
+
+---
+
+**Multi-select**
+
+---
+
 ---
 
+**Range**
+
 ---
 
 ### Simple Filter Example
 
 The example below shows Simple Filters being used as part of a Basic Panel in CZ ID.
 
+**Simple Filter_Example**
 
+---
 
 ---
 
@@ -146,6 +238,10 @@ The example below shows Simple Filters being used as part of a Basic Panel in CZ
 
 These rules establish how much margin should exist between and around elements.
 
+**Simple Filter Spacing**
+
+---
+
 ---
 
 ## Complex Filter
@@ -160,34 +256,80 @@ The Dropdown Menu that is activated when the Filter Label is clicked displays th
 | **Closed** | **Open** | **Active** |
 | ---------- | -------- | ---------- |
 
+**Complex Filter_Closed**
+
+---
+
+**Complex Filter_Open**
+
+---
+
+**Complex Filter_Active**
+
+---
+
 ### Complex Filter Variants
 
+**Single-select**
+
+---
+
+---
+
+**Single-select + Search**
+
 ---
 
 ---
 
+**Multi-select**
+
 ---
 
 ---
 
+**Multi-select + Search**
 
+---
+
+---
+
+**Range**
+
+---
 
 ### Complex Filter Example
 
 The example below shows Complex Filters being used as part of a Basic Panel in CZ ID.
 
+**Complex Filter_Example**
+
+---
+
 ---
 
 ### Complex Filter Spacing
 
 These rules establish how much margin should exist between and around elements. Follow spacing rules for Dropdown Menus for spacing guidance for the Complex Filter Input.
 
+**Complex Filter_Spacing**
+
+---
+
 ---
 
 ## Filtering Logic
 
 Filtering logic is handled at the product level, however, this section offers some suggestions for best practices to consider when establishing filtering logic.
 
+**Between filter categories: use “AND”**
+
+---
+
+---
+
+**Within filter category: use “OR”**
+
 ---
 
 ## Code
@@ -220,6 +362,14 @@ Filters are used to narrow down large amounts of data based on specific criteria
 
 ### Visual Preview
 
+**Preview_Guidelines_Filter_Simple**
+
+---
+
+**Preview_Guidelines_Filter_Complex**
+
+---
+
 ---
 
 ## Simple Filter
@@ -240,18 +390,38 @@ Use Simple Filter when there are only a few filter categories or a few options p
 | Single-select | Multi-select | Range |
 | ------------- | ------------ | ----- |
 
+**Simple Filter_Single-select**
+
+---
+
+**Simple Filter_Multi-select**
+
+---
+
+**Simple Filter_Range**
+
+---
+
 ---
 
 ### Simple Filter example
 
 The example below shows Simple Filters being used as part of a Basic Panel (documentation to come) in CZ ID.
 
+**Simple Filter_Example**
+
+---
+
 ---
 
 ### Simple Filter Spacing
 
 These rules establish how much margin should exist between and around elements.
 
+**Simple Filter Spacing**
+
+---
+
 ---
 
 ## Complex Filter
@@ -276,29 +446,77 @@ The Dropdown Menu triggered when the Dropdown Input is clicked can be Single-sel
 | Single-select | Single-select + Search | Multi-select | Multi-select + Search | Range |
 | ------------- | ---------------------- | ------------ | --------------------- | ----- |
 
+**Complex Filter_Input_Single-select**
+
+---
+
+**Complex Filter_Input_Single-select + Search**
+
+---
+
+**Complex Filter_Input_Multi-select**
+
+---
+
+**Complex Filter_Input_Multi-select + Search**
+
+---
+
+**Complex Filter_Input_Range**
+
+---
+
 #### **Complex Filter states**
 
 | Closed | Open | Active |
 | ------ | ---- | ------ |
 
+**Complex Filter_Closed**
+
+---
+
+**Complex Filter_Open**
+
+---
+
+**Complex Filter_Active**
+
+---
+
 ---
 
 ### Complex Filter example
 
 The example below shows Complex Filters being used as part of a Basic Panel (documentation to come) in CZ ID.
 
+**Complex Filter_Example**
+
+---
+
 ---
 
 ### Complex Filter Spacing
 
 These rules establish how much margin should exist between and around elements. Follow spacing rules for Dropdown Menus for spacing guidance for the Complex Filter Input.
 
+**Complex Filter_Spacing**
+
+---
+
 ---
 
 ### Filtering Logic
 
 Filtering logic is handled at the product level, however, this section offers some suggestions for best practices to consider when establishing filtering logic.
 
+**Between filter categories: use "AND"**
+
+---
+
+**Within filter categories: use "OR"**
+
+---
+
 ## Code
 
 ## Filter Components
@@ -308,6 +526,14 @@ Filtering logic is handled at the product level, however, this section offers so
 
 ### Visual Preview
 
+**Preview_Code_Filter_Simple**
+
+---
+
+**Preview_Code_Filter_Complex**
+
+---
+
 > **Note:** The code examples below must install dependencies before displaying and may take extra time to load
 
 ---
@@ -484,15 +710,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Filters</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>
@@ -666,15 +891,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Filters</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>
@@ -849,15 +1073,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Filters</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/Getting-Started.md

@@ -89,8 +89,6 @@ npm i czifui
 yarn add czifui
 ```
 
-
-
 SDS currently uses Material UI v5
 
 czifui installs without direct dependencies to prevent version errors. Please ensure the following peer dependencies are also installed:
@@ -482,8 +480,6 @@ export const Tag = styled.div`
 `;
 ```
 
-
-
 4. **CSS & SCSS Variables** - Variables for the `defaultTheme` to use if your app doesn't support `@emotion/styled`
 
 ```css
@@ -549,8 +545,6 @@ import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
 </StylesProvider>;
 ```
 
-
-
 3. If you need to override the default SDS theme, please follow the instructions here.
 
 ---
@@ -1113,10 +1107,14 @@ To use the default theme in your React application, complete the following:
 ```html
 // installs the sds font from google fonts
 
-<link rel="preconnect" href="https://fonts.gstatic.com" />
-
+<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=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400;1,600;1,700&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;500;600&display=swap"
   rel="stylesheet"
 />
 ```

package/data/zeroheight-exports/Hero.md

@@ -20,6 +20,18 @@ For example: if the screen is `1200px` wide, the width of the content area would
 | Breakpoint: Large | Breakpoint: Medium | Breakpoint: Small |
 | ----------------- | ------------------ | ----------------- |
 
+**Preview_Guidelines_Hero_large**
+
+---
+
+**Preview_Guidelines_Hero_medium**
+
+---
+
+**Preview_Guidelines_Hero_small**
+
+---
+
 #### Background Fill Options
 
 The Hero component background can be filled with any CSS color, including gradients, or any type of media such as images, videos, GIFs, etc.
@@ -27,6 +39,14 @@ The Hero component background can be filled with any CSS color, including gradie
 | Color | Media |
 | ----- | ----- |
 
+**Hero_background_color**
+
+---
+
+**Hero_background_image**
+
+---
+
 #### Darkening Mask
 
 The darkening mask is an overlay element used to subtly dim the Hero's background, thereby enhancing the visibility and focus on the overlay elements; the mask's opacity can be set by the team implementing it.
@@ -34,6 +54,14 @@ The darkening mask is an overlay element used to subtly dim the Hero's backgroun
 | Disabled | Enabled |
 | -------- | ------- |
 
+**Hero_darkening mask_false**
+
+---
+
+**Hero_darkening mask_true**
+
+---
+
 #### Darkening Vignette
 
 The darkening vignette is an overlay element positioned at the top of Hero that subtly fades from solid to transparent, smoothing the transition from the Header Navigation to the Hero background.
@@ -41,6 +69,14 @@ The darkening vignette is an overlay element positioned at the top of Hero that
 | Disabled | Enabled |
 | -------- | ------- |
 
+**Hero_darkening vignette_false**
+
+---
+
+**Hero_darkening vignette_true**
+
+---
+
 #### Overlay Content Visibility
 
 Overlay content elements (title text, caption text, and content slot) can be used or not depending on teams' needs; the examples below show one element hidden at a time to demonstrate, but any combination of elements can be used.
@@ -48,6 +84,22 @@ Overlay content elements (title text, caption text, and content slot) can be use
 | All elements displayed | Title hidden | Caption hidden | Content slot hidden |
 | ---------------------- | ------------ | -------------- | ------------------- |
 
+**Hero_overlay content_options_all visible**
+
+---
+
+**Hero_overlay content_options_no title**
+
+---
+
+**Hero_overlay content_options_no caption**
+
+---
+
+**Hero_overlay content_options_no slot**
+
+---
+
 #### Text Alignment Options
 
 Alignment settings apply to both title and caption text.
@@ -55,17 +107,65 @@ Alignment settings apply to both title and caption text.
 | Left-aligned | Center-aligned | Right-aligned |
 | ------------ | -------------- | ------------- |
 
+**Hero_overlay text_alignment_left-aligned**
+
+---
+
+**Hero_overlay text_alignment_center-aligned**
+
+---
+
+**Hero_overlay text_alignment_right-aligned**
+
+---
+
 #### Overlay Content Position
 
 | Top-left | Top | Top-right |
 | -------- | --- | --------- |
 
+**Hero_overlay content_position_top-left**
+
+---
+
+**Hero_overlay content_position_top**
+
+---
+
+**Hero_overlay content_position_top-right**
+
+---
+
 | Left | Center | Right |
 | ---- | ------ | ----- |
 
+**Hero_overlay content_position_left**
+
+---
+
+**Hero_overlay content_position_center**
+
+---
+
+**Hero_overlay content_position_right**
+
+---
+
 | Bottom-left | Bottom | Bottom-right |
 | ----------- | ------ | ------------ |
 
+**Hero_overlay content_position_bottom-left**
+
+---
+
+**Hero_overlay content_position_bottom**
+
+---
+
+**Hero_overlay content_position_bottom-right**
+
+---
+
 #### Overlay Media Options
 
 In addition to overlay content, media (images, videos, GIFs, etc.) can be optionally overlayed on top of the Hero component's background; it can take whatever size or shape teams need.
@@ -73,17 +173,69 @@ In addition to overlay content, media (images, videos, GIFs, etc.) can be option
 | Overlay media hidden | Overlay media displayed | Larger overlay media | Smaller overlay media |
 | -------------------- | ----------------------- | -------------------- | --------------------- |
 
+**Hero_overlay image_false**
+
+---
+
+**Hero_overlay image_true**
+
+---
+
+**Hero_overlay image_true_larger**
+
+---
+
+**Hero_overlay image_true_smaller**
+
+---
+
 #### Overlay Media Position
 
 | Top-left | Top | Top-right |
 | -------- | --- | --------- |
 
+**Hero_overlay image_position_top-left**
+
+---
+
+**Hero_overlay image_position_top**
+
+---
+
+**Hero_overlay image_position_top-right**
+
+---
+
 | Left | Center | Right |
 | ---- | ------ | ----- |
 
+**Hero_overlay image_position_left**
+
+---
+
+**Hero_overlay image_position_center**
+
+---
+
+**Hero_overlay image_position_right**
+
+---
+
 | Bottom-left | Bottom | Bottom-right |
 | ----------- | ------ | ------------ |
 
+**Hero_overlay image_position_bottom-left**
+
+---
+
+**Hero_overlay image_position_bottom**
+
+---
+
+**Hero_overlay image_position_bottom-right**
+
+---
+
 ## Code
 
 > **Note:** Code details coming soon