@czi-sds/mcp 0.5.2 → 0.5.4

package/data/zeroheight-exports/Accordion.md

@@ -11,7 +11,13 @@ Accordions are elements that can be used by designers to hide or reveal content.
 
 Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
+**Accordion**
 
+---
+
+---
+
+**Accordion**
 
 ---
 
@@ -21,6 +27,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.
 
+**Accordion spacing**
+
+---
+
 ## Code
 
 ## Accordion Component
@@ -51,8 +61,20 @@ Once expanded, the content revealed within the Accordion can be whatever the des
 
 Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
+**Accordion**
+
+---
+
+---
+
+**Accordion**
+
+---
+
 ---
 
+**Accordion**
+
 ---
 
 ---
@@ -61,6 +83,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.
 
+**Accordion spacing**
+
+---
+
 ## Code
 
 ## Accordion Component
@@ -74,8 +100,6 @@ These rules establish how much margin should exist between and around elements.
 
 Storybook
 
-
-
 ---
 
 Accordions are expandable/collapsable elements that hide and reveal content to help control the amount of information presented to the user at one time.
@@ -93,6 +117,14 @@ Accordions are elements that can be used to hide or reveal content. Use the head
 
 The Accordion indicator arrow may appear to the left or the right of the header. Accordions may show a subtitle below the header text. Accordions may show bottom divider lines to help visually separate them from one another.
 
+**Preview_Guidelines_Accordion_toggleLeft**
+
+---
+
+**Preview_Guidelines_Accordion_toggleRight**
+
+---
+
 ---
 
 ### Live Instance
@@ -110,6 +142,22 @@ Left-aligned toggles works well when the Accordion's container is wide, because
 | Default | Default + Divider | Default + Subtitle | Expanded |
 | ------- | ----------------- | ------------------ | -------- |
 
+**toggleLeft_collapsed_no subtitle_no underline**
+
+---
+
+**toggleLeft_collapsed_no subtitle_underlined**
+
+---
+
+**toggleLeft_collapsed_subtitle_no underline**
+
+---
+
+**toggleLeft_expanded_no subtitle_no underline**
+
+---
+
 ---
 
 ### Accordion – Right Toggle
@@ -119,12 +167,32 @@ Use when there's a preference for the Accordion toggle to appear to the right of
 | Default | Default + Divider | Default + Subtitle | Expanded |
 | ------- | ----------------- | ------------------ | -------- |
 
+**toggleRight_collapsed_no subtitle_no underline_n**
+
+---
+
+**toggleRight_collapsed_no subtitle_underlined_n**
+
+---
+
+**toggleRight_collapsed_subtitle_no underline**
+
+---
+
+**toggleRight_expanded_no subtitle_no underline**
+
+---
+
 ---
 
 ### Accordion Spacing
 
 These rules establish how much margin should exist between and around elements.
 
+**Accordion spacing**
+
+---
+
 ## Code
 
 > **Note:** The code examples below must install dependencies before displaying and may take extra time to load
@@ -223,9 +291,7 @@ function App() {
   return (
     <div className="app">
       <Accordion id="accordion-1" useDivider={false} togglePosition="right">
-        <AccordionHeader id={`accordion-1-header`}>
-          Accordion Header
-        </AccordionHeader>
+        <AccordionHeader>Accordion Header</AccordionHeader>
         <AccordionDetails>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
           malesuada lacus ex, sit amet blandit leo lobortis eget.
@@ -285,15 +351,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Accordion</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>
@@ -378,10 +443,7 @@ 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"
-        >
+        <AccordionHeader subtitle="Explore the functionalities of our amazing product">
           Product Features
         </AccordionHeader>
         <AccordionDetails>
@@ -479,15 +541,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Accordion</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,10 +633,7 @@ 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"
-        >
+        <AccordionHeader subtitle="Explore the functionalities of our amazing product">
           Product Features
         </AccordionHeader>
         <AccordionDetails>
@@ -678,15 +736,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Accordion</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/Banner.md

@@ -24,10 +24,20 @@ If additional context or information is needed beyond the space available on the
 
 When the information being communicated on the Banner is intended to remain persistent on the screen and is not manually dismissible by the user, use a persistent Banner. To allow the user to manually dismiss the Banner, use a dismissible Banner.
 
+**Default (Persistent)**
 
+---
 
 ---
 
+**Default (Dismissible)**
+
+---
+
+---
+
+**Hover (Dismissible)**
+
 ---
 
 ### Secondary Banner
@@ -38,8 +48,20 @@ If additional context or information is needed beyond the space available on the
 
 When the information being communicated on the Banner is intended to remain persistent on the screen and is not manually dismissible by the user, use a persistent Banner. To allow the user to manually dismiss the Banner, use a dismissible Banner.
 
+**Default (Persistent)**
+
+---
+
 ---
 
+**Default (Dismissible)**
+
+---
+
+---
+
+**Hover (Dismissible)**
+
 ---
 
 ---
@@ -48,6 +70,10 @@ When the information being communicated on the Banner is intended to remain pers
 
 These rules establish how much margin should exist between and around elements.
 
+**Banner spacing**
+
+---
+
 ## Code
 
 ## Banner Component
@@ -82,6 +108,14 @@ Both Banner variants can optionally be set to be manually dismissible by the use
 
 Banners span the full width of the page.
 
+**Preview_Guidelines_Banner_Primary**
+
+---
+
+**Preview_Guidelines_Banner_Secondary**
+
+---
+
 ---
 
 ### Live Instance
@@ -103,6 +137,18 @@ When the information being communicated on the Banner is intended to remain pers
 | Default (Persistent) | Default (Dismissible) | Hover (Dismissible) |
 | -------------------- | --------------------- | ------------------- |
 
+**Banner_Primary_Persistent_Default**
+
+---
+
+**Banner_Primary_Dismissible_Default**
+
+---
+
+**Banner_Primary_Dismissible_Hover**
+
+---
+
 ---
 
 ### Banner – Secondary
@@ -116,12 +162,28 @@ When the information being communicated on the Banner is intended to remain pers
 | Default (Persistent) | Default (Dismissible) | Hover (Dismissible) |
 | -------------------- | --------------------- | ------------------- |
 
+**Banner_Secondary_Persistent_Default**
+
+---
+
+**Banner_Secondary_Dismissible_Default**
+
+---
+
+**Banner_Secondary_Dismissible_Hover**
+
+---
+
 ---
 
 ### Banner Spacing
 
 These rules establish how much margin should exist between and around elements.
 
+**Banner spacing**
+
+---
+
 ---
 
 ### Intent Variations
@@ -135,11 +197,43 @@ Each intent is demonstrated below using the Dismissible variant for reference. R
 | Info | Negative | Notice | Positive |
 | ---- | -------- | ------ | -------- |
 
+**Banner_Primary_Intent_Info**
+
+---
+
+**Banner_Primary_Intent_Negative**
+
+---
+
+**Banner_Primary_Intent_Notice**
+
+---
+
+**Banner_Primary_Intent_Positive**
+
+---
+
 #### Secondary
 
 | Info | Negative | Notice | Positive |
 | ---- | -------- | ------ | -------- |
 
+**Banner_Secondary_Intent_Info**
+
+---
+
+**Banner_Secondary_Intent_Negative**
+
+---
+
+**Banner_Secondary_Intent_Notice**
+
+---
+
+**Banner_Secondary_Intent_Positive**
+
+---
+
 ## Code
 
 > **Note:** The code examples below must install dependencies before displaying and may take extra time to load
@@ -155,11 +249,12 @@ The component's source code in the SDS codebase 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                                                                                                                                                                                                                                                                            |
-| -------------- | -------------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| -------------- | -------------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ---------------------------------------- |
 | `dismissed`    | `bool`               | `false`      | If `true`, the banner has been dismissed by the user.                                                                                                                                                                                                                                  |
 | `dismissible`  | `bool`               | `true`       | If `true`, the banner can be dismissed by the user.                                                                                                                                                                                                                                    |
 | `sdsType`      | `"primary"` `        | "secondary"` | `primary`                                                                                                                                                                                                                                                                              | The `primary` variant has a `400` background color and white text color. The `secondary` variant has a `100` background color and `primary` text color. |
 | `icon`         | `ReactNode`          | `-`          | The icon to be displayed within the banner. If not provided, a`InfoCircle` icon will be displayed.                                                                                                                                                                                     |
+| `intent`       | `"info"              | "notice"     | "negative"                                                                                                                                                                                                                                                                             | "positive"`                                                                                                                                             | `info` | The intent color of the Banner component |
 | `sdsIconProps` | `Partial<IconProps>` | `-`          | Additional props to be passed to the icon component.                                                                                                                                                                                                                                   |
 | `onClose`      | `fn`                 | `-`          | Callback fired when the component requests to be closed. When provided and no `action` prop is set, a close icon button is displayed that triggers the callback when clicked. **Signature:**`function(event: React.SyntheticEvent) => void` `event`. The event source of the callback. |
 
@@ -270,15 +365,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Banner</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>
@@ -413,15 +507,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Banner</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>
@@ -560,15 +653,14 @@ root.render(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Banner</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>