@trimble-oss/moduswebcomponents-mcp 1.0.0

package/versions/base/component-docs/modus-wc-icon.json

@@ -0,0 +1,722 @@
+{
+  "description": "A customizable icon component used to render Modus icons. <b>This component requires Modus icons to be installed in the host application. See [Modus Icon Usage](/docs/documentation-modus-icon-usage--docs) for steps.</b>",
+  "properties": [
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the i element.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 23
+    },
+    {
+      "name": "decorative",
+      "type": "boolean",
+      "description": "Indicates that the icon is decorative. When true, sets aria-hidden to hide the icon from screen readers.",
+      "default": "true",
+      "mutable": false,
+      "end_line": 26
+    },
+    {
+      "name": "name",
+      "type": "string",
+      "description": "The icon name, should match the CSS class in the icon font.",
+      "default": null,
+      "mutable": false,
+      "end_line": 29
+    },
+    {
+      "name": "size",
+      "type": "DaisySize",
+      "description": "The icon size, can be \"sm\", \"md\", \"lg\" (a custom size can be specified in CSS). This adjusts the font size for the icon.",
+      "default": "'md'",
+      "mutable": false,
+      "end_line": 32
+    },
+    {
+      "name": "variant",
+      "type": "'outlined' | 'solid'",
+      "description": "The icon variant, can be \"outlined\" or \"solid\".",
+      "default": null,
+      "mutable": false,
+      "end_line": 35
+    }
+  ],
+  "events": [],
+  "methods": [],
+  "slots": [],
+  "examples": {
+    "basic": "<modus-wc-icon\n  aria-label=\"Alert icon\"\n  custom-class=\"${ifDefined(args['custom-class'])}\"\n  ?decorative=\"${args.decorative}\"\n  name=\"${args.name}\"\n  size=\"${args.size}\"\n  variant=\"${ifDefined(args.variant)}\"\n>\n</modus-wc-icon>",
+    "variations": [],
+    "args": {
+      "custom-class": "''",
+      "decorative": "false",
+      "name": "'alert'",
+      "size": "'md'"
+    },
+    "argTypes": {},
+    "usage": []
+  },
+  "tag": "modus-wc-icon",
+  "storyExample": {
+    "template": "<modus-wc-icon\n  aria-label=\"Alert icon\"\n  custom-class=\"${ifDefined(args['custom-class'])}\"\n  ?decorative=\"${args.decorative}\"\n  name=\"${args.name}\"\n  size=\"${args.size}\"\n  variant=\"${ifDefined(args.variant)}\"\n>\n</modus-wc-icon>",
+    "args": {
+      "custom-class": "''",
+      "decorative": "false",
+      "name": "'alert'",
+      "size": "'md'"
+    },
+    "argTypes": {},
+    "events": [],
+    "fullContent": "import { Meta, StoryObj } from '@storybook/web-components';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { createShadowHostClass } from '../../providers/shadow-dom/shadow-host-helper';\nimport { DaisySize } from '../types';\n\ninterface IconArgs {\n  'custom-class'?: string;\n  decorative: boolean;\n  name: string;\n  size: DaisySize;\n  variant?: 'outlined' | 'solid';\n}\n\nconst meta: Meta<IconArgs> = {\n  title: 'Components/Icon',\n  component: 'modus-wc-icon',\n  args: {\n    'custom-class': '',\n    decorative: false,\n    name: 'alert',\n    size: 'md',\n  },\n  argTypes: {\n    size: {\n      control: { type: 'select' },\n      options: ['xs', 'sm', 'md', 'lg'],\n    },\n    variant: {\n      control: { type: 'select' },\n      options: ['outlined', 'solid'],\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<IconArgs>;\n\nconst Template: Story = {\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<modus-wc-icon\n  aria-label=\"Alert icon\"\n  custom-class=\"${ifDefined(args['custom-class'])}\"\n  ?decorative=\"${args.decorative}\"\n  name=\"${args.name}\"\n  size=\"${args.size}\"\n  variant=\"${ifDefined(args.variant)}\"\n>\n</modus-wc-icon>\n    `;\n  },\n};\n\nexport const Default: Story = { ...Template };\n\nexport const CustomColor: Story = {\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<style>\n  .red-icon {\n    color: red;\n  }\n</style>\n<modus-wc-icon\n  aria-label=\"Red alert icon\"\n  custom-class=\"red-icon\"\n  name=\"alert\"\n  size=\"${args.size}\"\n>\n</modus-wc-icon>\n    `;\n  },\n};\n\nexport const CustomIcons: Story = {\n  args: {\n    'custom-class': 'icon-font tc-icon-cloud-queue',\n    decorative: false,\n    name: '',\n    size: 'lg',\n  },\n  decorators: [\n    (story) => html`\n      <link\n        rel=\"stylesheet\"\n        href=\"https://resources.connect.trimble.com/1.12.0/fonts/icon-font.min.css\"\n      />\n      ${story()}\n    `,\n  ],\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<modus-wc-icon\n  aria-label=\"Cloud Queue icon\"\n  custom-class=\"${ifDefined(args['custom-class'])}\"\n  ?decorative=\"${args.decorative}\"\n  name=\"${args.name}\"\n  size=\"${args.size}\"\n>\n</modus-wc-icon>\n    `;\n  },\n};\n\nexport const ShadowDomParent: Story = {\n  render: (args) => {\n    // Create a unique shadow host for icon component\n    if (!customElements.get('icon-shadow-host')) {\n      const IconShadowHost = createShadowHostClass<IconArgs>({\n        componentTag: 'modus-wc-icon',\n        propsMapper: (v: IconArgs, el: HTMLElement) => {\n          const iconEl = el as unknown as {\n            customClass: string;\n            decorative: boolean;\n            name: string;\n            size: string;\n            variant: string;\n          };\n          iconEl.customClass = v['custom-class'] || '';\n          iconEl.decorative = Boolean(v.decorative);\n          iconEl.name = v.name;\n          iconEl.size = v.size;\n          iconEl.variant = v.variant ?? 'outlined';\n        },\n      });\n      customElements.define('icon-shadow-host', IconShadowHost);\n    }\n\n    return html`<icon-shadow-host .props=${{ ...args }}></icon-shadow-host>`;\n  },\n};\n\nexport const Migration: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story: `\n#### Breaking Changes\n\n  - Requires <b>Modus Icons</b> to be installed in the host application see [Modus Icon Usage](/docs/documentation-modus-icon-usage--docs).\n  - The \\`color\\` property has been removed in favor of using CSS for styling.\n  - The \\`iconClick\\` event has been removed. Use the \\`click\\` event on the host element instead.\n  - In 1.0 the \\`size\\` prop accepted any numeric string (e.g., \\`'16'\\`, \\`'24'\\`, \\`'32'\\`) to set the icon's\n  width and height. 2.0 uses preset sizes: \\`sm\\`, \\`md\\`, \\`lg\\`, and can use CSS for custom sizes.\n\n#### Prop Mapping\n\n| 1.0 Prop | 2.0 Prop | Notes                                                |\n|----------|----------|------------------------------------------------------|\n| color    |          | Not carried over, use CSS instead                    |\n| name     | name     |                                                      |\n| size     | size     | Numeric values changed to \\`sm\\`, \\`md\\`, \\`lg\\`, use CSS for custom sizes |\n\n#### Event Mapping\n\n| 1.0 Event | 2.0 Event | Notes                                                         |\n|-----------|-----------|---------------------------------------------------------------|\n| iconClick |           | Not carried over, use \\`click\\` event on host element instead |\n        `,\n      },\n    },\n    controls: { disable: true },\n    canvas: { disable: true },\n  },\n  render: () => html`<div></div>`,\n};\n"
+  },
+  "availableIcons": {
+    "total": 638,
+    "variants": [
+      "solid",
+      "outlined"
+    ],
+    "note": "All icons are available in both solid and outlined variants.",
+    "source": "https://modus-icons.trimble.com/",
+    "iconNames": [
+      "3d_terrain",
+      "accessibility",
+      "accessibility_circle",
+      "add",
+      "add_bold",
+      "add_circle",
+      "add_heavy",
+      "address",
+      "advanced_instructions",
+      "ai_stars",
+      "alarm_add",
+      "alarm_off",
+      "alarm_on",
+      "alert",
+      "alert_outlined",
+      "align_bottom",
+      "align_center_horiz",
+      "align_center_vert",
+      "align_left",
+      "align_right",
+      "align_top",
+      "angle_90",
+      "antenna",
+      "apps",
+      "arc",
+      "arrow_back",
+      "arrow_down",
+      "arrow_down_circle",
+      "arrow_expand_diagonal_left",
+      "arrow_expand_diagonal_right",
+      "arrow_left",
+      "arrow_left_circle",
+      "arrow_next",
+      "arrow_right",
+      "arrow_right_circle",
+      "arrow_up",
+      "arrow_up_circle",
+      "artificial_intelligence",
+      "backup_restore_cloud",
+      "backup_restore_file",
+      "bar_graph",
+      "bar_graph_line",
+      "bar_graph_square",
+      "barcode",
+      "battery_0_horizontal",
+      "battery_0_vertical",
+      "battery_25_horizontal",
+      "battery_25_vertical",
+      "battery_50_horizontal",
+      "battery_50_vertical",
+      "battery_75_horizontal",
+      "battery_75_vertical",
+      "battery_charging_horizontal",
+      "battery_charging_vertical",
+      "battery_full_horizontal",
+      "battery_full_vertical",
+      "between",
+      "bolt",
+      "bookings",
+      "bookings_open",
+      "box_select",
+      "briefcase",
+      "brightness",
+      "brush",
+      "bug",
+      "bug_report",
+      "building_corporate",
+      "buildings",
+      "calculate",
+      "calculator",
+      "calculator_symbols",
+      "calendar",
+      "calendar_add",
+      "calendar_and_key",
+      "calendar_blank",
+      "calendar_booking",
+      "calendar_cancel",
+      "calendar_check",
+      "calendar_clock",
+      "calendar_event",
+      "calendar_loading_unloading",
+      "calendar_loading_unloading_date",
+      "calendar_plus",
+      "calendar_rebook",
+      "calendar_reserve",
+      "calendar_show",
+      "calendar_time_slot",
+      "calendar_week",
+      "camera",
+      "camera_disabled",
+      "camera_photo_add",
+      "cancel_circle",
+      "cancel_square",
+      "cancel_square_outlined",
+      "caret_down",
+      "caret_down_bold",
+      "caret_left",
+      "caret_left_bold",
+      "caret_right",
+      "caret_right_bold",
+      "caret_up",
+      "caret_up_bold",
+      "cell_merge",
+      "cell_properties",
+      "cell_split",
+      "certificate",
+      "chat",
+      "check",
+      "check_bold",
+      "check_circle",
+      "check_circle_outlined",
+      "check_heavy",
+      "chevron_double_down",
+      "chevron_double_left",
+      "chevron_double_right",
+      "chevron_double_up",
+      "chevron_left",
+      "chevron_left_bold",
+      "chevron_right",
+      "chevron_right_bold",
+      "circle_notch",
+      "circle_outline",
+      "clipboard",
+      "clipboard_actions",
+      "clipboard_check",
+      "clipboard_empty",
+      "clipboard_planning",
+      "clock",
+      "clock_add",
+      "clock_checkmark",
+      "clock_delay_warning",
+      "clock_delayed",
+      "clock_locked",
+      "clock_question_mark",
+      "close",
+      "close_bold",
+      "close_heavy",
+      "cloud",
+      "cloud_connected",
+      "cloud_disconnected",
+      "cloud_download",
+      "cloud_upload",
+      "code",
+      "coffee_cup",
+      "collapse",
+      "collapse_bold",
+      "color_picker",
+      "column_copy",
+      "column_cut",
+      "column_delete",
+      "column_insert_after",
+      "column_insert_before",
+      "column_paste_after",
+      "column_paste_before",
+      "column_properties",
+      "columns",
+      "combine",
+      "comment",
+      "comment_add",
+      "comment_empty",
+      "comment_message",
+      "comment_message_disabled",
+      "compare_arrows",
+      "compass",
+      "component",
+      "contacts",
+      "contrast",
+      "control_compass",
+      "copy_content",
+      "costs",
+      "credit_card",
+      "crop",
+      "cube",
+      "curly_brackets",
+      "cursor",
+      "cursor_add",
+      "cursor_remove",
+      "dashboard",
+      "data_missing",
+      "data_transfer_off",
+      "day_mostly_cloudy",
+      "day_partly_cloudy",
+      "delete",
+      "delivery_truck",
+      "delivery_truck_allocate",
+      "delivery_truck_motion",
+      "document",
+      "download",
+      "download_line",
+      "download_xls",
+      "drag_corner",
+      "drag_horizontal",
+      "drag_indicator",
+      "drag_vertical",
+      "drivers",
+      "drizzle",
+      "drone",
+      "earnings_statement",
+      "edit_combination",
+      "email",
+      "email_add",
+      "envelope",
+      "eraser",
+      "exclamation_mark",
+      "expand",
+      "expand_bold",
+      "expand_less",
+      "expand_less_bold",
+      "expand_less_circle",
+      "expand_more",
+      "expand_more_bold",
+      "expand_more_circle",
+      "export",
+      "factory",
+      "fast_forward",
+      "fast_rewind",
+      "file",
+      "file_bar_graph",
+      "file_check_in",
+      "file_check_out",
+      "file_cloud",
+      "file_copy",
+      "file_edit",
+      "file_merge",
+      "file_missing",
+      "file_new",
+      "file_secure",
+      "file_table",
+      "file_type_bmpf",
+      "file_type_csv",
+      "file_type_cur",
+      "file_type_doc",
+      "file_type_ico",
+      "file_type_key",
+      "file_type_log",
+      "file_type_numbers",
+      "file_type_pdf",
+      "file_type_pem",
+      "file_type_rfi",
+      "file_type_rfq",
+      "file_type_rtf",
+      "file_type_text",
+      "file_type_tif",
+      "file_type_tmp",
+      "file_type_xls",
+      "filter",
+      "filter_list",
+      "filter_list_off",
+      "filter_off",
+      "first_page",
+      "flag",
+      "flag_finish",
+      "floorplan",
+      "flowchart",
+      "fog",
+      "folder_closed",
+      "folder_locked",
+      "folder_new",
+      "folder_open",
+      "folder_personal",
+      "folder_project",
+      "folder_public",
+      "folder_share",
+      "folder_unlocked",
+      "footprints",
+      "forestry",
+      "forklift",
+      "forklift_packages",
+      "form_send",
+      "frame",
+      "freight_market",
+      "freight_matching",
+      "freight_trolley",
+      "full_screen",
+      "function",
+      "gantt_chart",
+      "gavel",
+      "gears",
+      "greater_than_equal_to",
+      "group_items",
+      "hail",
+      "hail_heavy",
+      "hail_light",
+      "hammer",
+      "hand",
+      "hard_hat",
+      "headset",
+      "heart",
+      "helicopter",
+      "help",
+      "help_outlined",
+      "history",
+      "home",
+      "hourglass",
+      "ice",
+      "icons_shapes",
+      "image",
+      "image_add",
+      "image_disabled",
+      "image_scene",
+      "in_cab_device",
+      "in_field_device",
+      "info",
+      "info_outlined",
+      "info_token",
+      "inspect",
+      "invoice",
+      "invoice_euro",
+      "invoice_pound",
+      "invoice_yen",
+      "item_begins_with",
+      "item_contains",
+      "item_does_not_contain",
+      "item_does_not_equal",
+      "item_ends_with",
+      "item_equals",
+      "key",
+      "key_api",
+      "keyboard",
+      "keyboard_keys",
+      "labs",
+      "language",
+      "last_page",
+      "launch",
+      "launch_bold",
+      "layer",
+      "learn",
+      "less_than_equal_to",
+      "lightbulb_off",
+      "lightbulb_on",
+      "lightning",
+      "line_diagonal",
+      "line_graph",
+      "link",
+      "link_broken",
+      "link_off",
+      "list_bulleted",
+      "list_numbered",
+      "list_shapes",
+      "location",
+      "location_add",
+      "location_add_multiple",
+      "location_arrow",
+      "location_disabled",
+      "location_point",
+      "lock",
+      "lock_open",
+      "magic_wand",
+      "manage_accounts",
+      "manage_people",
+      "map",
+      "map_2d",
+      "map_edit",
+      "map_marker",
+      "map_marker_circle",
+      "map_marker_multiple",
+      "map_markers",
+      "map_poi",
+      "master_data",
+      "megaphone",
+      "menu",
+      "menu_circle",
+      "mic",
+      "mix",
+      "mobile_app_version",
+      "monetarization",
+      "moon",
+      "more_circle",
+      "more_horizontal",
+      "more_vertical",
+      "mouse",
+      "move",
+      "move_last_down",
+      "move_last_left",
+      "move_last_right",
+      "move_last_up",
+      "night_mostly_cloudy",
+      "night_partly_cloudy",
+      "no_package",
+      "no_truck",
+      "not_synced_bold",
+      "notifications",
+      "notifications_off",
+      "object_mirror",
+      "object_outline",
+      "object_rotate",
+      "offers",
+      "overcast",
+      "package",
+      "package_delivered",
+      "package_delivery",
+      "package_missing",
+      "package_pickup",
+      "package_sent",
+      "packages",
+      "pager",
+      "paint_bucket",
+      "palette",
+      "pan",
+      "paper_plane",
+      "paperclip",
+      "password",
+      "pause_circle",
+      "payment_instant",
+      "pen",
+      "pencil",
+      "people_add",
+      "people_couple",
+      "people_group",
+      "person",
+      "person_account",
+      "person_add",
+      "person_clock",
+      "person_edit",
+      "person_remove",
+      "phone",
+      "phone_call",
+      "phone_hang_up",
+      "phone_mobile",
+      "pin",
+      "pin_add",
+      "pin_straight",
+      "pin_straight_cancel",
+      "play_circle",
+      "point_marker_tool",
+      "polygon",
+      "polygon_area_tool",
+      "polygon_concave",
+      "polygon_cone",
+      "polygon_drag_rectangle",
+      "polygon_line_tool",
+      "polygon_merge",
+      "polygon_select",
+      "printer",
+      "pulse",
+      "qr_code",
+      "question",
+      "quick_login",
+      "rain",
+      "rain_heavy",
+      "rain_icy",
+      "raindrop",
+      "redo",
+      "redo_bold",
+      "refresh",
+      "refresh_bold",
+      "remove",
+      "remove_bold",
+      "remove_circle",
+      "remove_heavy",
+      "reply",
+      "reservations",
+      "rewind",
+      "row_add",
+      "row_copy",
+      "row_cut",
+      "row_delete",
+      "row_highlighted",
+      "row_insert_after",
+      "row_insert_before",
+      "row_paste_after",
+      "row_paste_before",
+      "row_properties",
+      "row_remove",
+      "rows_show_less",
+      "rows_show_more",
+      "rss_feed",
+      "ruler",
+      "satellite",
+      "save_as",
+      "save_disk",
+      "scan_barcode",
+      "schema",
+      "scissors",
+      "screen",
+      "screenshot",
+      "search",
+      "select_link_add",
+      "server",
+      "server_round",
+      "service_rep",
+      "settings",
+      "share",
+      "shield",
+      "shopping_cart",
+      "shopping_cart_minus",
+      "shopping_cart_plus",
+      "shortcut",
+      "shovel",
+      "show_less_caret",
+      "show_more_caret",
+      "sign_in",
+      "sign_out",
+      "signal",
+      "smiley_dissatisfied",
+      "smiley_dissatisfied_outlined",
+      "smiley_neutral",
+      "smiley_neutral_outlined",
+      "smiley_satisfied",
+      "smiley_satisfied_outlined",
+      "smiley_somewhat_dissatisfied",
+      "smiley_somewhat_dissatisfied_outlined",
+      "smiley_somewhat_satisfied",
+      "smiley_somewhat_satisfied_outlined",
+      "snow_heavy",
+      "snow_light",
+      "snow_particle",
+      "snowflake",
+      "snowflakes",
+      "sort",
+      "sort_alpha_down",
+      "sort_alpha_up",
+      "sort_arrow_down",
+      "sort_arrow_up",
+      "sort_down",
+      "sort_up",
+      "stamp",
+      "star",
+      "star_half",
+      "star_locked",
+      "star_northern",
+      "star_outlined",
+      "stars",
+      "stop_circle",
+      "street_measurement",
+      "submit_expense",
+      "sun",
+      "swap",
+      "switch_account",
+      "switch_left",
+      "switch_right",
+      "sync",
+      "sync_bold",
+      "sync_off",
+      "table",
+      "tablet",
+      "tag",
+      "tag_disabled",
+      "template",
+      "text_align_left",
+      "text_align_right",
+      "text_bold",
+      "text_centered",
+      "text_grow",
+      "text_input",
+      "text_input_long",
+      "text_input_short",
+      "text_italic",
+      "text_marker",
+      "text_shrink",
+      "text_strikethrough",
+      "text_truncated",
+      "text_underlined",
+      "thermometer_cold",
+      "thermometer_hot",
+      "thumbs_down",
+      "thumbs_up",
+      "thunderstorm_heavy",
+      "thunderstorm_light",
+      "ticket",
+      "ticket_plane",
+      "time_off_work",
+      "time_slot_not_reserved",
+      "time_slot_reserved",
+      "timer",
+      "timer_countdown",
+      "timesheet",
+      "timesheet_approve",
+      "toggle_center",
+      "toggle_left_panel",
+      "toggle_off",
+      "toggle_on",
+      "toggle_right_panel",
+      "traffic_cone",
+      "trailer",
+      "tree_structure",
+      "triangle_down",
+      "triangle_left",
+      "triangle_right",
+      "triangle_up",
+      "trimble_logo",
+      "trip_list",
+      "truck_add",
+      "truck_circle",
+      "truck_circle_eu",
+      "truck_warning_delay",
+      "tune",
+      "tune_circle",
+      "uncombine",
+      "undo",
+      "undo_bold",
+      "unfold_less",
+      "unfold_more",
+      "unit_selector",
+      "unsorted_arrows",
+      "update",
+      "upload",
+      "upload_xls",
+      "user_account",
+      "user_active",
+      "user_guide",
+      "user_inactive",
+      "user_passkey",
+      "user_permissions",
+      "video",
+      "video_add",
+      "video_disabled",
+      "view_grid",
+      "view_list",
+      "visibility_off",
+      "visibility_on",
+      "volume_down",
+      "volume_mute",
+      "volume_up",
+      "vr_xr",
+      "warehouse",
+      "warning",
+      "warning_outlined",
+      "web",
+      "wheelbarrow",
+      "widgets",
+      "wifi",
+      "wifi_no_internet",
+      "wifi_off",
+      "wind",
+      "window",
+      "window_dock_undock",
+      "window_fit",
+      "window_resize",
+      "window_side_panel",
+      "window_template",
+      "window_views",
+      "window_wireframe",
+      "wintery_mix",
+      "wrench",
+      "zoom_box",
+      "zoom_in",
+      "zoom_out"
+    ]
+  }
+}