New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@primer/component-metadata
Advanced tools
@primer/component-metadata - npm Package Compare versions
Comparing version 0.4.1 to 0.5.0-rc.fe8ce61
| { | ||
| "$schema": "./metadata.schema.json", | ||
| "components": { | ||
| "action_bar": { | ||
| "id": "action_bar", | ||
| "displayName": "Action bar", | ||
| "description": "Use action bar to contain a collection of horizontally aligned icon buttons." | ||
| }, | ||
| "action_list": { | ||
| "id": "action_list", | ||
| "displayName": "Action list", | ||
| "description": "Use action list to list items that can be activated or selected. ActionList is the base component for many menu-type components, including ActionMenu and SelectPanel." | ||
| }, | ||
| "action_menu": { | ||
| "id": "action_menu", | ||
| "displayName": "Action menu", | ||
| "description": "Use action menu to create a menu of actions that expands through a trigger button." | ||
| }, | ||
| "anchored_overlay": { | ||
| "id": "anchored_overlay", | ||
| "displayName": "Anchored Overlay", | ||
| "description": "Use anchored overlay to provide an anchor that will open a floating overlay positioned relative to the anchor. The overlay can be opened and navigated using keyboard or mouse." | ||
| }, | ||
| "auto_complete": { | ||
| "id": "auto_complete", | ||
| "displayName": "Auto complete", | ||
| "description": "Use auto complete to render a text input that allows a user to quickly filter through a list of options to pick one or more values." | ||
| }, | ||
| "auto_complete_item": { | ||
| "id": "auto_complete_item", | ||
| "displayName": "Auto complete item", | ||
| "description": "Use auto complete item to list the results of an auto-completed search." | ||
| }, | ||
| "avatar": { | ||
@@ -14,2 +44,42 @@ "id": "avatar", | ||
| }, | ||
| "avatar_pair": { | ||
| "id": "avatar_pair", | ||
| "displayName": "Avatar pair", | ||
| "description": "Use avatar pair to display two avatars when one is secondary to the other." | ||
| }, | ||
| "avatar_stack": { | ||
| "id": "avatar_stack", | ||
| "displayName": "Avatar stack", | ||
| "description": "Use an avatar stack to display two or more avatars in an inline stack" | ||
| }, | ||
| "base_button": { | ||
| "id": "base_button", | ||
| "displayName": "Base button", | ||
| "description": "Use base button to render an unstyled <button> tag that can be customized." | ||
| }, | ||
| "blank_slate": { | ||
| "id": "blank_slate", | ||
| "displayName": "Blank slate", | ||
| "description": "Use blank slate when there is a lack of content within a page or section." | ||
| }, | ||
| "border_box": { | ||
| "id": "border_box", | ||
| "displayName": "Border box", | ||
| "description": "Use border box to render a Box component with a border." | ||
| }, | ||
| "border_box_header": { | ||
| "id": "border_box_header", | ||
| "displayName": "Border box header", | ||
| "description": "Use border box header inside a border box component to render its header slot." | ||
| }, | ||
| "box": { | ||
| "id": "box", | ||
| "displayName": "Box", | ||
| "description": "Use box as a low-level utility component that accepts styled system props to enable custom theme-aware styling." | ||
| }, | ||
| "branch_name": { | ||
| "id": "branch_name", | ||
| "displayName": "Branch name", | ||
| "description": "Use BranchName as a label-type component rendered as an <a> tag by default with monospace font." | ||
| }, | ||
| "breadcrumbs": { | ||
@@ -25,2 +95,247 @@ "id": "breadcrumbs", | ||
| }, | ||
| "button": { | ||
| "id": "button", | ||
| "displayName": "Button", | ||
| "description": "Use button for the main actions on a page or form." | ||
| }, | ||
| "button_group": { | ||
| "id": "button_group", | ||
| "displayName": "Button group", | ||
| "description": "Use button group to render a series of buttons." | ||
| }, | ||
| "button_marketing": { | ||
| "id": "button_marketing", | ||
| "displayName": "Button marketing", | ||
| "description": "Use button marketing for actions (e.g. in forms)." | ||
| }, | ||
| "checkbox": { | ||
| "id": "checkbox", | ||
| "displayName": "Checkbox", | ||
| "description": "Use checkboxes to toggle between checked and unchecked states in a list or as a standalone form field." | ||
| }, | ||
| "checkbox_group": { | ||
| "id": "checkbox_group", | ||
| "displayName": "Checkbox group", | ||
| "description": "Use checkbox group to render a set of checkboxes to let users make one or more selections from a short list of options." | ||
| }, | ||
| "circle_badge": { | ||
| "id": "circle_badge", | ||
| "displayName": "Circle badge", | ||
| "description": "Use circle badge to visually connect logos of third-party services like in the marketplace." | ||
| }, | ||
| "circle_octicon": { | ||
| "id": "circle_octicon", | ||
| "displayName": "Circle octicon", | ||
| "description": "Use circle octicon to render any Octicon with a circle background. CircleOcticons are most commonly used to represent the status of a pull request in the comment timeline." | ||
| }, | ||
| "clipboard_copy": { | ||
| "id": "clipboard_copy", | ||
| "displayName": "Clipboard copy", | ||
| "description": "Use clipboard copy to copy element text content or input values to the clipboard." | ||
| }, | ||
| "close_button": { | ||
| "id": "close_button", | ||
| "displayName": "Close button", | ||
| "description": "Use close button to render an × without default button styles." | ||
| }, | ||
| "counter": { | ||
| "id": "counter", | ||
| "displayName": "Counter", | ||
| "description": "Use counter to add a count to navigational elements and buttons." | ||
| }, | ||
| "counter_label": { | ||
| "id": "counter_label", | ||
| "displayName": "Counter label", | ||
| "description": "Use the counter label component to add a count to navigational elements and buttons." | ||
| }, | ||
| "details": { | ||
| "id": "details", | ||
| "displayName": "Details", | ||
| "description": "Use details component to reveal content after clicking a button." | ||
| }, | ||
| "dialog": { | ||
| "id": "dialog", | ||
| "displayName": "Dialog", | ||
| "description": "Use dialog component for all modals. It renders on top of the rest of the app with an overlay." | ||
| }, | ||
| "dropdown": { | ||
| "id": "dropdown", | ||
| "displayName": "Dropdown", | ||
| "description": "Use dropdown for a lightweight context menu for housing navigation and actions." | ||
| }, | ||
| "dropdown_menu": { | ||
| "id": "dropdown_menu", | ||
| "displayName": "Dropdown menu", | ||
| "description": "Use dropdown menu for a lightweight context menu for housing navigation and actions." | ||
| }, | ||
| "filter_list": { | ||
| "id": "filter_list", | ||
| "displayName": "Filter list", | ||
| "description": "Use filter list component as a menu with filter options that filter the main content of the page." | ||
| }, | ||
| "filtered_search": { | ||
| "id": "filtered_search", | ||
| "displayName": "Filtered search", | ||
| "description": "Use filtered search component helps style an ActionMenu and a TextInput side-by-side." | ||
| }, | ||
| "flash": { | ||
| "id": "flash", | ||
| "displayName": "Flash", | ||
| "description": "Use flash component to inform users of successful or pending actions." | ||
| }, | ||
| "flex": { | ||
| "id": "flex", | ||
| "displayName": "Flex", | ||
| "description": "Use flex to make an element lay out its content using the flexbox model." | ||
| }, | ||
| "flex_item": { | ||
| "id": "flex_item", | ||
| "displayName": "Flex item", | ||
| "description": "Use flex item to specify the ability of a flex item to alter its dimensions to fill available space." | ||
| }, | ||
| "form_control": { | ||
| "id": "form_control", | ||
| "displayName": "Form control", | ||
| "description": "Use form control to render a labelled input and, optionally, associated validation text and/or hint text." | ||
| }, | ||
| "header": { | ||
| "id": "header", | ||
| "displayName": "Header", | ||
| "description": "Use the header component to create a header that has all of its items aligned vertically with consistent horizontal spacing." | ||
| }, | ||
| "heading": { | ||
| "id": "heading", | ||
| "displayName": "Heading", | ||
| "description": "Use heading to communicate page organization and hierarchy." | ||
| }, | ||
| "hellip_button": { | ||
| "id": "hellip_button", | ||
| "displayName": "Hellip button", | ||
| "description": "Use hellip button to render a button with a hellip." | ||
| }, | ||
| "hidden_text_expander": { | ||
| "id": "hidden_text_expander", | ||
| "displayName": "Hidden text expander", | ||
| "description": "Use hidden text expander to indicate and toggle hidden text." | ||
| }, | ||
| "icon_button": { | ||
| "id": "icon_button", | ||
| "displayName": "Icon button", | ||
| "description": "Use icon button as an accessible button component with no text and only icon." | ||
| }, | ||
| "image": { | ||
| "id": "image", | ||
| "displayName": "Image", | ||
| "description": "Use image to render images." | ||
| }, | ||
| "image_crop": { | ||
| "id": "image_crop", | ||
| "displayName": "Image crop", | ||
| "description": "Use image crop as a client-side mechanism to crop images." | ||
| }, | ||
| "inline_autocomplete": { | ||
| "id": "inline_autocomplete", | ||
| "displayName": "Inline autocomplete", | ||
| "description": "Use inline autocomplete to provide suggestions for an input or textarea." | ||
| }, | ||
| "label": { | ||
| "id": "label", | ||
| "displayName": "Label", | ||
| "description": "Use label component to add contextual metadata to a design." | ||
| }, | ||
| "label_group": { | ||
| "id": "label_group", | ||
| "displayName": "Label group", | ||
| "description": "Use label group component to add commonly used margins and other layout constraints to groups of labels." | ||
| }, | ||
| "layout": { | ||
| "id": "layout", | ||
| "displayName": "Layout", | ||
| "description": "Use layout to build a main/sidebar layout." | ||
| }, | ||
| "link": { | ||
| "id": "link", | ||
| "displayName": "Link", | ||
| "description": "Use link for navigating from one page to another." | ||
| }, | ||
| "local_time": { | ||
| "id": "local_time", | ||
| "displayName": "Local time", | ||
| "description": "Use local time to format a date and time in the user's preferred locale format." | ||
| }, | ||
| "markdown": { | ||
| "id": "markdown", | ||
| "displayName": "Markdown", | ||
| "description": "Use markdown to wrap markdown content." | ||
| }, | ||
| "markdown_editor": { | ||
| "id": "markdown_editor", | ||
| "displayName": "Markdown editor", | ||
| "description": "Use markdown editor for a full-featured Markdown input." | ||
| }, | ||
| "markdown_viewer": { | ||
| "id": "markdown_viewer", | ||
| "displayName": "Markdown viewer", | ||
| "description": "Use markdown viewer to display rendered Markdown and facilitate interaction." | ||
| }, | ||
| "menu": { | ||
| "id": "menu", | ||
| "displayName": "Menu", | ||
| "description": "Use menu to create vertical lists of navigational links." | ||
| }, | ||
| "nav_list": { | ||
| "id": "nav_list", | ||
| "displayName": "Nav list", | ||
| "description": "Use a nav list to render a vertical list of navigation links." | ||
| }, | ||
| "navigation_tab": { | ||
| "id": "navigation_tab", | ||
| "displayName": "Navigation tab", | ||
| "description": "Use navigation tab as part of the navigation components such as Primer::Alpha::TabNav and Primer::Alpha::UnderlineNav and don't use it by itself." | ||
| }, | ||
| "octicon": { | ||
| "id": "octicon", | ||
| "displayName": "Octicon", | ||
| "description": "Use octicon to render an octicon with system arguments." | ||
| }, | ||
| "octicon_symbols": { | ||
| "id": "octicon_symbols", | ||
| "displayName": "Octicon symbols", | ||
| "description": "Use octicon symbols to render a symbol dictionary using a list of Octicon." | ||
| }, | ||
| "overlay": { | ||
| "id": "overlay", | ||
| "displayName": "Overlay", | ||
| "description": "Use overlay to provide a flexible floating surface for displaying transient content such as menus, selection options, dialogs, and more." | ||
| }, | ||
| "page_layout": { | ||
| "id": "page_layout", | ||
| "displayName": "Page layout", | ||
| "description": "Use the page layout component to define the header, main, pane, and footer areas of a page." | ||
| }, | ||
| "pagehead": { | ||
| "id": "pagehead", | ||
| "displayName": "Pagehead", | ||
| "description": "Use pagehead to provide a clear, separated page title." | ||
| }, | ||
| "pagination": { | ||
| "id": "pagination", | ||
| "displayName": "Pagination", | ||
| "description": "Use pagination to display a sequence of links that allow navigation to discrete, related pages." | ||
| }, | ||
| "pointer_box": { | ||
| "id": "pointer_box", | ||
| "displayName": "Poiner box", | ||
| "description": "Use pointer box as a custom, bordered box with a caret pointer." | ||
| }, | ||
| "popover": { | ||
| "id": "popover", | ||
| "displayName": "Popover", | ||
| "description": "Use popover to bring attention to specific user interface elements and suggest an action or to guide users through a new experience." | ||
| }, | ||
| "portal": { | ||
| "id": "portal", | ||
| "displayName": "Portal", | ||
| "description": "Use portals to create a separation between the logical React component hierarchy and the physical DOM." | ||
| }, | ||
| "progress_bar": { | ||
@@ -35,4 +350,154 @@ "id": "progress_bar", | ||
| } | ||
| }, | ||
| "radio": { | ||
| "id": "radio", | ||
| "displayName": "Radio", | ||
| "description": "Use radio when a user needs to select one option from a list." | ||
| }, | ||
| "radio_group": { | ||
| "id": "radio_group", | ||
| "displayName": "Radio group", | ||
| "description": "Use radio group to render a set of radio inputs to let users make a single selection from a short list of options." | ||
| }, | ||
| "segmented_control": { | ||
| "id": "segmented_control", | ||
| "displayName": "Segmented control", | ||
| "description": "Use a segmented control to let users select an option from a short list and immediately apply the selection." | ||
| }, | ||
| "select": { | ||
| "id": "select", | ||
| "displayName": "Select", | ||
| "description": "Use a select input when a user needs to select one option from a long list." | ||
| }, | ||
| "select_panel": { | ||
| "id": "select_panel", | ||
| "displayName": "Select panel", | ||
| "description": "Use a select panel to provides an anchor that will open an overlay with a list of selectable items, and a text input to filter the selectable items." | ||
| }, | ||
| "side_nav": { | ||
| "id": "side_nav", | ||
| "displayName": "Side nav", | ||
| "description": "Use side nav for a vertical list of navigational links, typically used on the left side of a page." | ||
| }, | ||
| "spinner": { | ||
| "id": "spinner", | ||
| "displayName": "Spinner", | ||
| "description": "Use spinner to let users know that content is being loaded." | ||
| }, | ||
| "split_page_layout": { | ||
| "id": "split_page_layout", | ||
| "displayName": "Split page layout", | ||
| "description": "Use split page layout to provide structure for a split page layout, including independent scrolling for the pane and content regions. Useful for responsive list/detail patterns, when an item in the pane updates the page content on selection." | ||
| }, | ||
| "state": { | ||
| "id": "state", | ||
| "displayName": "State", | ||
| "description": "Use state for rendering the status of an item." | ||
| }, | ||
| "state_label": { | ||
| "id": "state_label", | ||
| "displayName": "State label", | ||
| "description": "Use state label to show the status of an issue or pull request." | ||
| }, | ||
| "styled_octicon": { | ||
| "id": "styled_octicon", | ||
| "displayName": "Styled octicon", | ||
| "description": "Use styled octicon to render an Octicon as a component." | ||
| }, | ||
| "sub_nav": { | ||
| "id": "sub_nav", | ||
| "displayName": "Sub nav", | ||
| "description": "Use the sub nav component for navigation on a dashboard-type interface with another set of navigation components above it." | ||
| }, | ||
| "subhead": { | ||
| "id": "subhead", | ||
| "displayName": "Subhead", | ||
| "description": "Use subhead as the start of a section." | ||
| }, | ||
| "tab_container": { | ||
| "id": "tab_container", | ||
| "displayName": "Tab container", | ||
| "description": "Use tab container to create tabbed content with keyboard support." | ||
| }, | ||
| "tab_nav": { | ||
| "id": "tab_nav", | ||
| "displayName": "Tab nav", | ||
| "description": "Use tab nav to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page." | ||
| }, | ||
| "tab_panels": { | ||
| "id": "tab_panels", | ||
| "displayName": "Tab panels", | ||
| "description": "Use tab panels for tabs with panel navigation." | ||
| }, | ||
| "text": { | ||
| "id": "text", | ||
| "displayName": "Text", | ||
| "description": "Use text as a wrapper component that will apply typography styles to the text inside." | ||
| }, | ||
| "text_field": { | ||
| "id": "text_field", | ||
| "displayName": "Text field", | ||
| "description": "Use text field outside a form." | ||
| }, | ||
| "text_input": { | ||
| "id": "text_input", | ||
| "displayName": "Text input", | ||
| "description": "Use text input as a form component to add default styling to the native text input." | ||
| }, | ||
| "text_input_with_tokens": { | ||
| "id": "text_input_with_tokens", | ||
| "displayName": "Text input with tokens", | ||
| "description": "Use text input with tokens to show multiple values in one field." | ||
| }, | ||
| "textarea": { | ||
| "id": "textarea", | ||
| "displayName": "Textarea", | ||
| "description": "Use text area for multi-line text input form fields." | ||
| }, | ||
| "time_ago": { | ||
| "id": "time_ago", | ||
| "displayName": "Time ago", | ||
| "description": "Use time ago to display a time relative to how long ago it was." | ||
| }, | ||
| "timeline": { | ||
| "id": "timeline", | ||
| "displayName": "Timeline", | ||
| "description": "The timeline component is used to display items on a vertical timeline, connected by Timeline.Badge elements." | ||
| }, | ||
| "timeline_item": { | ||
| "id": "timeline_item", | ||
| "displayName": "Timeline item", | ||
| "description": "Use timeline item to display items on a vertical timeline, connected by badge elements." | ||
| }, | ||
| "toggle_switch": { | ||
| "id": "toggle_switch", | ||
| "displayName": "Toggle switch", | ||
| "description": "Use toggle switch to toggle a setting on or off, and immediately saves the change." | ||
| }, | ||
| "token": { | ||
| "id": "token", | ||
| "displayName": "Token", | ||
| "description": "Use token to represents a piece of data. They are typically used to show a collection of related attributes." | ||
| }, | ||
| "tooltip": { | ||
| "id": "tooltip", | ||
| "displayName": "Tooltip", | ||
| "description": "Use tooltip component to add context to elements on the page." | ||
| }, | ||
| "truncate": { | ||
| "id": "truncate", | ||
| "displayName": "Truncate", | ||
| "description": "Use truncate to shorten overflowing text with an ellipsis." | ||
| }, | ||
| "underline_nav": { | ||
| "id": "underline_nav", | ||
| "displayName": "Underline nav", | ||
| "description": "Use underline nav to allow tab like navigation with overflow behaviour in your UI." | ||
| }, | ||
| "underline_panels": { | ||
| "id": "underline_panels", | ||
| "displayName": "Underline panels", | ||
| "description": "Use underline panels to style tabs with an associated panel and an underlined selected state." | ||
| } | ||
| } | ||
| } |
| { | ||
| "name": "@primer/component-metadata", | ||
| "version": "0.4.1", | ||
| "version": "0.5.0-rc.fe8ce61", | ||
| "main": "metadata.json", | ||
@@ -5,0 +5,0 @@ "files": [ |
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by469.35%
22808
- Number of package files
- increased by33.33%
4
- Lines of code
- increased by1328.57%
500
Worsened metrics
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes