@czi-sds/mcp 0.2.1 → 0.3.0

package/data/zeroheight-exports/Intent.md

@@ -0,0 +1,47 @@
+# Intent
+
+Intent components provide additional context to users communicating as to why a negative, notice, or positive intent may have been triggered.
+
+## Guidelines
+
+## Overview
+
+|  | In Figma |   |  | Meets Accessibility |   |  | In Code |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+
+Intent Messages can be paired with any Input component (Checkbox, Radio, Text Input, Search Input, Dropdown Input) to communicate statuses or issues with user-supplied responses. There are three intents that Intent Message can display—negative, notice, and positive. Each Intent type has a default icon that accompanies it, though these defaults can be swapped out for any icon desired.
+
+Intent messages can be stacked, e.g., different message types can be combined meaning, for example, a user’s response to an input could theoretically have both negative and notice messages accompanying it.
+
+Input Message is not a standalone component within Figma, but is instead built into each Input component individually. Each Input component has a `show intentMessage` prop that toggles visibility of the message(s) on or off.
+
+Optionally, an Intent Indicator can be displayed to the left of an Input. When enabled, a colored border will appear to help increase visibility of Intent Messages within that group, making it easier for users to see when a response requires their attention. This is especially useful in long forms where users might have to skim through many pages to find the responses they need to update or fix.
+
+The Intent Indicator is a standalone component within Figma. It has an empty slot within it that is meant to be filled with the Input component  designers want the Intent Indicator displayed alongside (or group of components in the case of Checkboxes or Radios where multiple are likely combined under one field label to present a range of options for responses to users).
+
+#### Intent Message
+
+As mentioned above, Intent Message is not a standalone component within Figma, but is instead built into each Input component individually. If needed multiple Intent Message types can be stacked to communicate more than one intent per Input.
+
+The example below shows Intent Message displayed in conjunction with Text Input for reference. See the documentation for each Input component for examples specific to that Input type.
+
+| Negative | Negative + Notice | Notice | Notice + Positive | Positive |
+| --- | --- | --- | --- | --- |
+
+#### Intent Indicator
+
+The example below shows Intent Indicator displayed in conjunction with a range of Input types for reference. See the documentation for each Input component for examples specific to that Input type.
+
+| Empty (Negative) | Negative | Notice | Positive |
+| --- | --- | --- | --- |
+
+---
+
+### Intent Spacing
+
+These rules establish how much margin should exist between and around elements.
+
+## Code
+
+>**Note:** Code details coming soon
+

package/data/zeroheight-exports/Introduction-to-Bases.md

@@ -0,0 +1,36 @@
+# Introduction to Bases
+
+Bases are the very basic elements that all components are created from.
+
+|  |   | **Bases** *Foundational Elements*  These basic building blocks are designed in a scalable way using coded variables which establishes a universal language between design and engineering that transcends pixel counts and hex codes, while also making components easily adjustable for use by other brands or products.  For example, if another brand uses a different primary color in their palette, they need only to update that color variable in one location in their codebase, and the change will cascade throughout their entire project. |   |
+| --- | --- | --- | --- |
+
+### Bases
+
+---
+
+Bases are the very basic elements that all components are created from.
+
+|  |   | **Bases** *Foundational Elements*  These basic building blocks are designed in a scalable way using coded variables which establishes a universal language between design and engineering that transcends pixel counts and hex codes, while also making components easily adjustable for use by other brands or products.  For example, if another brand uses a different primary color in their palette, they need only to update that color variable in one location in their codebase, and the change will cascade throughout their entire project. |   |
+| --- | --- | --- | --- |
+
+### Bases
+
+---
+
+Bases are the very basic elements that all components are created from.
+
+|  |   | **Bases** *Foundational Elements*  These basic building blocks are designed in a scalable way using coded variables which establishes a universal language between design and engineering that transcends pixel counts and hex codes, while also making components easily adjustable for use by other brands or products.  For example, if another brand uses a different primary color in their palette, they need only to update that color variable in one location in their codebase, and the change will cascade throughout their entire project. |   |
+| --- | --- | --- | --- |
+
+### Bases
+
+---
+
+Bases are the very basic elements that all components are created from.
+
+|  |   | **Bases** *Foundational Elements*  These basic building blocks are designed in a scalable way using coded variables which establishes a universal language between design and engineering that transcends pixel counts and hex codes, while also making components easily adjustable for use by other brands or products.  For example, if another brand uses a different primary color in their palette, they need only to update that color variable in one location in their codebase, and the change will cascade throughout their entire project. |   |
+| --- | --- | --- | --- |
+
+### Bases
+

package/data/zeroheight-exports/Introduction-to-Cells.md

@@ -0,0 +1,36 @@
+# Introduction to Cells
+
+Cells are guidelines for flows and functionality that often span multiple pages or screens, combining Bases, Genes, and DNA. 
+
+|  |   | **Cells** *Flows*  Cells are created when multiple Bases, Genes, and DNA are combined to create multi-step and occasionally multi-page flows. They serve as guidelines for designers and engineers to follow and are not self-contained components in and of themselves. Instead, they provide best practices for designers and engineers to consider when implementing similar functionality in their products. |   |
+| --- | --- | --- | --- |
+
+### Cells
+
+---
+
+Cells are guidelines for flows and functionality that often span multiple pages or screens, combining Bases, Genes, and DNA. 
+
+|  |   | **Cells** *Flows*  Cells are created when multiple Bases, Genes, and DNA are combined to create multi-step and occasionally multi-page flows. They serve as guidelines for designers and engineers to follow and are not self-contained components in and of themselves. Instead, they provide best practices for designers and engineers to consider when implementing similar functionality in their products. |   |
+| --- | --- | --- | --- |
+
+### Cells
+
+---
+
+Cells are guidelines for flows and functionality that often span multiple pages or screens, combining Bases, Genes, and DNA.
+
+|  |   | **Cells** *Flows*  Cells are created when multiple Bases, Genes, and DNA are combined to create multi-step and occasionally multi-page flows. They serve as guidelines for designers and engineers to follow and are not self-contained components in and of themselves. Instead, they provide best practices for designers and engineers to consider when implementing similar functionality in their products. |   |
+| --- | --- | --- | --- |
+
+### Cells
+
+---
+
+Cells are guidelines for flows and functionality that often span multiple pages or screens, combining Bases, Genes, and DNA. 
+
+|  |   | **Cells** *Flows*  Cells are created when multiple Bases, Genes, and DNA are combined to create multi-step and occasionally multi-page flows. They serve as guidelines for designers and engineers to follow and are not self-contained components in and of themselves. Instead, they provide best practices for designers and engineers to consider when implementing similar functionality in their products. |   |
+| --- | --- | --- | --- |
+
+### Cells
+

package/data/zeroheight-exports/Introduction-to-DNA.md

@@ -0,0 +1,36 @@
+# Introduction to DNA
+
+DNA are complex components that are made from a combination of Bases and Genes.
+
+|  |   | **DNA** *Complex Elements*  DNA are created when multiple Bases and Genes are combined together. They are functionally more complex and are used throughout the UI as self-contained elements that aid users in completing tasks, viewing and interacting with data and information, making selections, and communicating decisions in the product. |   |
+| --- | --- | --- | --- |
+
+### DNA
+
+---
+
+DNA are complex components that are made from a combination of Bases and Genes.
+
+|  |   | **DNA** *Complex Elements*  DNA are created when multiple Bases and Genes are combined together. They are functionally more complex and are used throughout the UI as self-contained elements that aid users in completing tasks, viewing and interacting with data and information, making selections, and communicating decisions in the product. |   |
+| --- | --- | --- | --- |
+
+### DNA
+
+---
+
+DNA are complex components that are made from a combination of Bases and Genes.
+
+|  |   | **DNA** *Complex Elements*  DNA are created when multiple Bases and Genes are combined together. They are functionally more complex and are used throughout the UI as self-contained elements that aid users in completing tasks, viewing and interacting with data and information, making selections, and communicating decisions in the product. |   |
+| --- | --- | --- | --- |
+
+### DNA
+
+---
+
+DNA are complex components that are made from a combination of Bases and Genes.
+
+|  |   | **DNA** *Complex Elements*  DNA are created when multiple Bases and Genes are combined together. They are functionally more complex and are used throughout the UI as self-contained elements that aid users in completing tasks, viewing and interacting with data and information, making selections, and communicating decisions in the product. |   |
+| --- | --- | --- | --- |
+
+### DNA
+

package/data/zeroheight-exports/Introduction-to-Genes.md

@@ -0,0 +1,36 @@
+# Introduction to Genes
+
+Genes are simple components that can be made of multiple bases.
+
+|  |   | **Genes** *Simple Elements*  Combine multiple Bases together and a Gene will be formed. These simple elements serve as the smallest functional pieces of a UI that users can interact with. They establish consistent patterns that can be easily used across the product or be combined together to create more complex interactions and flows. |   |
+| --- | --- | --- | --- |
+
+### Genes
+
+---
+
+Genes are simple components that can be made of multiple bases.
+
+|  |   | **Genes** *Simple Elements*  Combine multiple Bases together and a Gene will be formed. These simple elements serve as the smallest functional pieces of a UI that users can interact with. They establish consistent patterns that can be easily used across the product or be combined together to create more complex interactions and flows. |   |
+| --- | --- | --- | --- |
+
+### Genes
+
+---
+
+Genes are simple components that can be made of multiple bases.
+
+|  |   | **Genes** *Simple Elements*  Combine multiple Bases together and a Gene will be formed. These simple elements serve as the smallest functional pieces of a UI that users can interact with. They establish consistent patterns that can be easily used across the product or be combined together to create more complex interactions and flows. |   |
+| --- | --- | --- | --- |
+
+### Genes
+
+---
+
+Genes are simple components that can be made of multiple bases.
+
+|  |   | **Genes** *Simple Elements*  Combine multiple Bases together and a Gene will be formed. These simple elements serve as the smallest functional pieces of a UI that users can interact with. They establish consistent patterns that can be easily used across the product or be combined together to create more complex interactions and flows. |   |
+| --- | --- | --- | --- |
+
+### Genes
+

package/data/zeroheight-exports/Introduction.md

@@ -0,0 +1,116 @@
+# Introduction
+
+Welcome to the Science Design System! As we grow we want to make sure we are creating a consistent experience for our users and that both designers and engineers are reusing components to ensure consistency and not duplicate efforts.
+
+This Design System should be consistent with the code base and needs to stay up-to-date, we will communicate and help each other do so! As we design and build features, we will prioritize what’s in the Design System, unless there is a good reason to create a new component.
+
+### Design System Elements
+
+Our design system is made up of a structure of elements:
+
+|  |   | **Bases** *Foundational Elements* Bases are the very basic elements that all components are created from. |   |
+| --- | --- | --- | --- |
+|   |   |   |   |
+|  |   | **Genes** *Simple Elements* Genes are simple components that can be made of multiple bases. |   |
+|   |   |   |   |
+|  |   | **DNA** *Complex Elements* DNA are complex components that are made from a combination of Bases and Genes. |   |
+|   |   |   |   |
+|  |   | **Chromosomes** *Pages* Chromosomes are pages that contain multiple elements, combining Bases, Genes, and DNA. |   |
+|   |   |   |   |
+|  |   | **Cells** *Flows* Cells are multi-page flows with different functions, combining all previous element types: Bases, Genes, DNA, and Chromosomes. |   |
+
+### Goals
+
+Utilizing a design system helps us accomplish the following goals:
+
+|  **Component** **Consistency** |   |  **Cohesive Design and Code Language** |   |  **Expedite the Design and Engineering Process** |
+| --- | --- | --- | --- | --- |
+| Clearly defined and documented components ensure a consistent experience for users. Our components are designed and built in a reusable and scalable way. |   | We want to make sure what is in design files and the codebase are the same with shared naming. We want to make sure it’s in sync, to help our collaboration during development. |   | With these definitions, it will be easier for design and implementation to have clarity on which components to use. We’re eliminating guesswork to speed up the process. |
+
+---
+
+Welcome to the CZ GEN EPI Design System! As we grow we want to make sure we are creating a consistent experience for our users and that both designers and engineers are reusing components to ensure consistency and not duplicate efforts.
+
+This Design System should be consistent with the code base and needs to stay up-to-date, we will communicate and help each other do so! As we design and build features, we will prioritize what’s in the Design System, unless there is a good reason to create a new component.
+
+### Design System Elements
+
+Our design system is made up of a structure of elements:
+
+|  |   | **Bases** *Foundational Elements* Bases are the very basic elements that all components are created from. |   |
+| --- | --- | --- | --- |
+|   |   |   |   |
+|  |   | **Genes** *Simple Elements* Genes are simple components that can be made of multiple bases. |   |
+|   |   |   |   |
+|  |   | **DNA** *Complex Elements* DNA are complex components that are made from a combination of Bases and Genes. |   |
+|   |   |   |   |
+|  |   | **Chromosomes** *Pages* Chromosomes are pages like our project page that include filters, search, and the table. |   |
+|   |   |   |   |
+|  |   | **Cells** *Flows* Cells are multi-page flows with different functions. For example, the download flow spans the project page, download selection, and download page. |   |
+
+### Goals
+
+Utilizing a design system helps us accomplish the following goals:
+
+|  **Component** **Consistency** |   |  **Cohesive Design and Code Language** |   |  **Expedite the Design and Engineering Process** |
+| --- | --- | --- | --- | --- |
+| Clearly defined and documented components ensure a consistent experience for users. Our components are designed and built in a reusable and scalable way. |   | We want to make sure what is in design files and the codebase are the same with shared naming. We want to make sure it’s in sync, to help our collaboration during development. |   | With these definitions, it will be easier for design and implementation to have clarity on which components to use. We’re eliminating guesswork to speed up the process. |
+
+---
+
+Welcome to the CZ ID Design System! As we grow we want to make sure we are creating a consistent experience for our users and that both designers and engineers are reusing components to ensure consistency and not duplicate efforts.
+
+This Design System should be consistent with the code base and needs to stay up-to-date, we will communicate and help each other do so! As we design and build features, we will prioritize what’s in the Design System, unless there is a good reason to create a new component.
+
+### Design System Elements
+
+Our design system is made up of a structure of elements:
+
+|  |   | **Bases** *Foundational Elements* Bases are the very basic elements that all components are created from. |   |
+| --- | --- | --- | --- |
+|   |   |   |   |
+|  |   | **Genes** *Simple Elements* Genes are simple components that can be made of multiple bases. |   |
+|   |   |   |   |
+|  |   | **DNA** *Complex Elements* DNA are complex components that are made from a combination of Bases and Genes. |   |
+|   |   |   |   |
+|  |   | **Chromosomes** *Pages* Chromosomes are pages like our project page that include filters, search, and the table. |   |
+|   |   |   |   |
+|  |   | **Cells** *Flows* Cells are multi-page flows with different functions. For example, the download flow spans the project page, download selection, and download page. |   |
+
+### Goals
+
+Utilizing a design system helps us accomplish the following goals:
+
+|  **Component** **Consistency** |   |  **Cohesive Design and Code Language** |   |  **Expedite the Design and Engineering Process** |
+| --- | --- | --- | --- | --- |
+| Clearly defined and documented components ensure a consistent experience for users. Our components are designed and built in a reusable and scalable way. |   | We want to make sure what is in design files and the codebase are the same with shared naming. We want to make sure it’s in sync, to help our collaboration during development. |   | With these definitions, it will be easier for design and implementation to have clarity on which components to use. We’re eliminating guesswork to speed up the process. |
+
+---
+
+Welcome to the Science Design System! As it grows we want to ensure a consistent experience for all users and that designers and engineers are reusing components to ensure consistency and not duplicate efforts.
+
+This Design System should be consistent with the code base and needs to stay up-to-date, we will communicate and help each other do so! As we design and build features, we will prioritize what’s in the Design System, unless there is a good reason to create a new component.
+
+### Design System Elements
+
+Our design system is made up of a structure of elements:
+
+|  |   | **Bases** *Foundational Elements* Bases are the very basic elements that all components are created from. |   |
+| --- | --- | --- | --- |
+|   |   |   |   |
+|  |   | **Genes** *Simple Elements* Genes are simple components that can be made of multiple bases. |   |
+|   |   |   |   |
+|  |   | **DNA** *Complex Elements* DNA are complex components that are made from a combination of Bases and Genes. |   |
+|   |   |   |   |
+|  |   | **Chromosomes** *Pages* Chromosomes are pages like our project page that include filters, search, and the table.  |   |
+|   |   |   |   |
+|  |   | **Cells** *Flows* Cells are multi-page flows with different functions. For example, the download flow spans the project page, download selection, and download page. |   |
+
+### Goals
+
+Utilizing a design system helps us accomplish the following goals:
+
+|  **Component** **Consistency** |   |  **Cohesive Design and Code Language** |   |  **Expedite the Design and Engineering Process** |
+| --- | --- | --- | --- | --- |
+| Clearly defined and documented components ensure a consistent experience for users. Our components are designed and built in a reusable and scalable way. |   | We want to make sure what is in design files and the codebase are the same with shared naming. We want to make sure it’s in sync, to help our collaboration during development. |   | With these definitions, it will be easier for design and implementation to have clarity on which components to use. We’re eliminating guesswork to speed up the process. |
+