@czi-sds/mcp 0.5.2 → 0.5.3

package/data/zeroheight-exports/Callout.md

@@ -28,6 +28,14 @@ Click on each state below to enter inspect view and get details on its code attr
 
 
 
+**Default**
+
+---
+
+---
+
+**Default + Child Node (alert text)**
+
 ---
 
 ### Dismissible Callout
@@ -40,6 +48,14 @@ An additional block of text can be added in addition to the Callout's title if m
 
 Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
+**Default**
+
+---
+
+---
+
+**Default + Child Node (alert text)**
+
 ---
 
 ### Expandable Callout
@@ -54,16 +70,36 @@ Click on each state below to enter inspect view and get details on its code attr
 
 
 
+**Default (collapsed) + Child Node (content module)**
+
+---
+
+---
+
+**Default (expanded) + Child Node (content module)**
+
+---
+
+---
+
+**Default (collapsed) + Child Node (alert text) + Child Node (content module)**
+
 ---
 
 ---
 
+**Default (expanded) + Child Node (alert text) + Child Node (content module)**
+
 ---
 
 ### Callout Spacing
 
 These rules establish how much margin should exist between and around elements.
 
+**Callout spacing**
+
+---
+
 ---
 
 ### Intent Variations
@@ -75,9 +111,25 @@ Each intent is demonstrated below using the Persistent Callout for reference. Re
 | **Error** | **Info** |
 | --------- | -------- |
 
+**Callout**
+
+---
+
+**Callout**
+
+---
+
 | **Success** | **Warning** |
 | ----------- | ----------- |
 
+**Callout**
+
+---
+
+**Callout**
+
+---
+
 ## Code
 
 ## Callout Component
@@ -125,6 +177,14 @@ Click on each state below to enter inspect view and get details on its code attr
 
 
 
+**Default**
+
+---
+
+---
+
+**Default + Child Node (alert text)**
+
 ---
 
 
@@ -139,6 +199,14 @@ An additional block of text can be added in addition to the Callout's title if m
 
 Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
+**Default**
+
+---
+
+---
+
+**Default + Child Node (alert text)**
+
 ---
 
 ### Expandable Callout
@@ -153,10 +221,26 @@ Click on each state below to enter inspect view and get details on its code attr
 
 
 
+**Default (collapsed) + Child Node (content module)**
+
 ---
 
 ---
 
+**Default (expanded) + Child Node (content module)**
+
+---
+
+---
+
+**Default (collapsed) + Child Node (alert text) + Child Node (content module)**
+
+---
+
+---
+
+**Default (expanded) + Child Node (alert text) + Child Node (content module)**
+
 ---
 
 ---
@@ -165,6 +249,10 @@ Click on each state below to enter inspect view and get details on its code attr
 
 These rules establish how much margin should exist between and around elements.
 
+**Callout spacing**
+
+---
+
 ---
 
 ### Intent Variations
@@ -176,9 +264,25 @@ Each intent is demonstrated below using the Persistent Callout for reference. Re
 | **Error** | **Info** |
 | --------- | -------- |
 
+**Callout**
+
+---
+
+**Callout**
+
+---
+
 | **Success** | **Warning** |
 | ----------- | ----------- |
 
+**Callout**
+
+---
+
+**Callout**
+
+---
+
 ## Code
 
 ## Callout Component
@@ -209,6 +313,18 @@ Callouts come in three different variants: Persistent, Dismissible, and Expandab
 
 Callouts appear within the flow of the page, unlike Notifications which appear outside of the page's flow on top of other elements. They span the full width of their container.
 
+**Preview_Guidelines_Callout_persistent**
+
+---
+
+**Preview_Guidelines_Callout_dismissible**
+
+---
+
+**Preview_Guidelines_Callout_expandable**
+
+---
+
 ---
 
 ### Live Instance
@@ -226,6 +342,14 @@ Use Callout – Persistent when communicating information that should remain on
 | Default | Default + Alert Text |
 | ------- | -------------------- |
 
+**Callout_persistent_default**
+
+---
+
+**Callout_persistent_default+alert**
+
+---
+
 ---
 
 ### Callout – Dismissible
@@ -235,6 +359,14 @@ Use when communicating information that doesn't need to remain on the screen and
 | Default | Default + Alert Text |
 | ------- | -------------------- |
 
+**Callout_dismissible_default**
+
+---
+
+**Callout_dismissible_default+alert**
+
+---
+
 ---
 
 ### Callout – Expandable
@@ -244,12 +376,32 @@ Use when communicating a lot of information that may be useful, but isn't strict
 | Collapsed | Collapsed + Alert Text | Expanded + Content Module | Expanded + Alert Text + Content Module |
 | --------- | ---------------------- | ------------------------- | -------------------------------------- |
 
+**Callout_expandable_default**
+
+---
+
+**Callout_expandable_default+alert**
+
+---
+
+**Callout_expandable_open**
+
+---
+
+**Callout_expandable_open+alert**
+
+---
+
 ---
 
 ### Callout Spacing
 
 These rules establish how much margin should exist between and around elements.
 
+**Callout spacing**
+
+---
+
 ---
 
 ### Intent Variations
@@ -261,6 +413,22 @@ Each intent is demonstrated below using the Persistent variant for reference. Re
 | Info | Negative | Notice | Positive |
 | ---- | -------- | ------ | -------- |
 
+**Callout_intent_info**
+
+---
+
+**Callout_intent_error**
+
+---
+
+**Callout_intent_warning**
+
+---
+
+**Callout_intent_success**
+
+---
+
 ## Code
 
 > **Note:** The code examples below must install dependencies before displaying and may take extra time to load
@@ -421,15 +589,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Callout</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>
@@ -572,15 +739,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Callout</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>
@@ -739,15 +905,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Callout</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>