@freshworks/crayons
Version:
Crayons Web Components library
1,023 lines • 591 kB
JSON
{
"timestamp": "2023-02-09T15:53:41",
"compiler": {
"name": "@stencil/core",
"version": "2.9.0",
"typescriptVersion": "4.2.3"
},
"components": [
{
"filePath": "./src/components/accordion/accordion.tsx",
"encapsulation": "shadow",
"tag": "fw-accordion",
"readme": "# Accordion (fw-accordion)\n\nfw-accordion displays a collapsible accordion component, which expands/collapses on clicking the accordion header.\n\n## Demo\n\n### Default Accordion\n\n```html live\n<fw-accordion expanded>\n <fw-accordion-title>Header Text</fw-accordion-title>\n <fw-accordion-body>\n Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n Lorem Ipsum has been the industry's standard dummy text ever since the\n 1500s, when an unknown printer took a galley of type and scrambled it to\n make a type specimen book. It has survived not only five centuries, but also\n the leap into electronic typesetting, remaining essentially unchanged. It\n was popularised in the 1960s with the release of Letraset sheets containing\n Lorem Ipsum passages, and more recently with desktop publishing software\n like Aldus PageMaker including versions of Lorem Ipsum\n </fw-accordion-body>\n</fw-accordion>\n```\n\n### Accordion Title icon size\n\n```html live\n<fw-accordion>\n <fw-accordion-title icon-size=\"small\">Header Text</fw-accordion-title>\n <fw-accordion-body>\n Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n Lorem Ipsum has been the industry's standard dummy text ever since the\n 1500s, when an unknown printer took a galley of type and scrambled it to\n make a type specimen book. It has survived not only five centuries, but also\n the leap into electronic typesetting, remaining essentially unchanged. It\n was popularised in the 1960s with the release of Letraset sheets containing\n Lorem Ipsum passages, and more recently with desktop publishing software\n like Aldus PageMaker including versions of Lorem Ipsum\n </fw-accordion-body>\n</fw-accordion>\n<br />\n<fw-accordion>\n <fw-accordion-title>Header Text</fw-accordion-title>\n <fw-accordion-body>\n Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n Lorem Ipsum has been the industry's standard dummy text ever since the\n 1500s, when an unknown printer took a galley of type and scrambled it to\n make a type specimen book. It has survived not only five centuries, but also\n the leap into electronic typesetting, remaining essentially unchanged. It\n was popularised in the 1960s with the release of Letraset sheets containing\n Lorem Ipsum passages, and more recently with desktop publishing software\n like Aldus PageMaker including versions of Lorem Ipsum\n </fw-accordion-body>\n</fw-accordion>\n<br />\n<fw-accordion>\n <fw-accordion-title icon-size=\"large\">Header Text</fw-accordion-title>\n <fw-accordion-body>\n Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n Lorem Ipsum has been the industry's standard dummy text ever since the\n 1500s, when an unknown printer took a galley of type and scrambled it to\n make a type specimen book. It has survived not only five centuries, but also\n the leap into electronic typesetting, remaining essentially unchanged. It\n was popularised in the 1960s with the release of Letraset sheets containing\n Lorem Ipsum passages, and more recently with desktop publishing software\n like Aldus PageMaker including versions of Lorem Ipsum\n </fw-accordion-body>\n</fw-accordion>\n```\n\n### Accordion with custom toggle icons\n\n```html live\n<fw-accordion>\n <fw-accordion-title>\n <fw-icon name=\"minus\" size=\"14\" slot=\"expanded-icon\"></fw-icon>\n <fw-icon name=\"plus\" size=\"14\" slot=\"collapsed-icon\"></fw-icon>\n Header Text\n </fw-accordion-title>\n <fw-accordion-body>\n Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n Lorem Ipsum has been the industry's standard dummy text ever since the\n 1500s, when an unknown printer took a galley of type and scrambled it to\n make a type specimen book. It has survived not only five centuries, but also\n the leap into electronic typesetting, remaining essentially unchanged. It\n was popularised in the 1960s with the release of Letraset sheets containing\n Lorem Ipsum passages, and more recently with desktop publishing software\n like Aldus PageMaker including versions of Lorem Ipsum\n </fw-accordion-body>\n</fw-accordion>\n```\n\nToggle icons can be customized using named slots.\n\n| Icon | Slot Name |\n| -------------- | -------------- |\n| Expanded Icon | expanded-icon |\n| Collapsed Icon | collapsed-icon |\n\n### No Bounding Box Accordion (Borders at top and bottom only)\n\n```html live\n<fw-accordion type=\"no_bounding_box\">\n <fw-accordion-title>Header Text</fw-accordion-title>\n <fw-accordion-body>\n Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n Lorem Ipsum has been the industry's standard dummy text ever since the\n 1500s, when an unknown printer took a galley of type and scrambled it to\n make a type specimen book. It has survived not only five centuries, but also\n the leap into electronic typesetting, remaining essentially unchanged. It\n was popularised in the 1960s with the release of Letraset sheets containing\n Lorem Ipsum passages, and more recently with desktop publishing software\n like Aldus PageMaker including versions of Lorem Ipsum\n </fw-accordion-body>\n</fw-accordion>\n```\n\n### Accordion with custom CSS properties\n\n```html live\n<fw-accordion\n style=\"--fw-accordion-border: 1px solid #F5F7F9; --fw-accordion-box-shadow: 0px 1px 8px rgba(152, 152, 152, 0.13); --fw-accordion-border-radius: 4px;\"\n expanded\n>\n <fw-accordion-title\n truncate-on-overflow=\"true\"\n style=\"--fw-accordion-title-background-color: #F5F7F9; --fw-accordion-title-expanded-icon-color: #2C5CC5; --fw-accordion-title-collapsed-icon-color: #264966;\"\n >\n <fw-icon name=\"rewards\"></fw-icon>\n <span style=\"padding-left: 5px;\">Header Text</span>\n </fw-accordion-title>\n <fw-accordion-body style=\"--fw-accordion-body-background-color: #FFFFFF\">\n Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n Lorem Ipsum has been the industry's standard dummy text ever since the\n 1500s, when an unknown printer took a galley of type and scrambled it to\n make a type specimen book. It has survived not only five centuries, but also\n the leap into electronic typesetting, remaining essentially unchanged. It\n was popularised in the 1960s with the release of Letraset sheets containing\n Lorem Ipsum passages, and more recently with desktop publishing software\n like Aldus PageMaker including versions of Lorem Ipsum\n </fw-accordion-body>\n</fw-accordion>\n```\n\n## Usage\n\n<code-group>\n<code-block title=\"HTML\">\n```html\n<fw-accordion>\n <fw-accordion-title>Header Text</fw-accordion-title>\n <fw-accordion-body>\n Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum\n </fw-accordion-body>\n</fw-accordion>\n<br>\n<fw-accordion type=\"no_bounding_box\">\n <fw-accordion-title>Header Text</fw-accordion-title>\n <fw-accordion-body>\n Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum\n </fw-accordion-body>\n</fw-accordion>\n```\n</code-block>\n\n<code-block title=\"React\">\n```jsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { FwCheckbox } from \"@freshworks/crayons/react\";\nfunction App() {\n return (<div>\n <FwAccordion>\n <FwAccordionTitle>Header Text</FwAccordionTitle>\n <FwAccordionBody>\n Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum\n </FwAccordionBody>\n </FwAccordion>\n </div>)\n}\n```\n</code-block>\n</code-group>\n",
"docs": "fw-accordion displays a collapsible accordion component, which expands/collapses on clicking the accordion header.",
"docsTags": [],
"usage": {},
"props": [
{
"name": "expanded",
"type": "boolean",
"mutable": true,
"attr": "expanded",
"reflectToAttr": true,
"docs": "To manage accordion expanded or collapsed state",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "type",
"type": "\"default\" | \"no_bounding_box\"",
"mutable": false,
"attr": "type",
"reflectToAttr": false,
"docs": "The type of accordion to be displayed.\ndefault => Accordion with all borders\nno_bounding_box => Accordion with top and bottom borders only",
"docsTags": [],
"default": "'default'",
"values": [
{
"value": "default",
"type": "string"
},
{
"value": "no_bounding_box",
"type": "string"
}
],
"optional": false,
"required": false
}
],
"methods": [
{
"name": "toggle",
"returns": {
"type": "Promise<boolean>",
"docs": "promise that resolves to true"
},
"signature": "toggle() => Promise<boolean>",
"parameters": [],
"docs": "Method available from the component to toggle expanded or collapsed state of accordion",
"docsTags": [
{
"name": "returns",
"text": "promise that resolves to true"
}
]
}
],
"events": [
{
"event": "fwAccordionToggle",
"detail": "AccordionToggleEvent",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": "Triggered when the accordion is expanded or collapsed",
"docsTags": []
}
],
"listeners": [],
"styles": [
{
"name": "--fw-accordion-border",
"annotation": "prop",
"docs": "Accordion border"
},
{
"name": "--fw-accordion-border-radius",
"annotation": "prop",
"docs": "Accordion border radius"
},
{
"name": "--fw-accordion-box-shadow",
"annotation": "prop",
"docs": "Accordion box shadow"
}
],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/accordion-body/accordion-body.tsx",
"encapsulation": "shadow",
"tag": "fw-accordion-body",
"readme": "# Accordion Body (fw-accordion-body)\n\nDisplays the content inside the component.\n\n",
"docs": "Displays the content inside the component.",
"docsTags": [],
"usage": {},
"props": [],
"methods": [],
"events": [],
"listeners": [],
"styles": [
{
"name": "--fw-accordion-body-background-color",
"annotation": "prop",
"docs": "Accordion body background color"
},
{
"name": "--fw-accordion-body-font-size",
"annotation": "prop",
"docs": "Accordion body font size"
},
{
"name": "--fw-accordion-body-line-height",
"annotation": "prop",
"docs": "Accordion body line height"
},
{
"name": "--fw-accordion-body-padding",
"annotation": "prop",
"docs": "Accordion body padding"
}
],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/accordion-title/accordion-title.tsx",
"encapsulation": "shadow",
"tag": "fw-accordion-title",
"readme": "# Accordion Title (fw-accordion-title)\n\nDisplays the content inside the component.\n",
"docs": "Displays the content inside the component.",
"docsTags": [],
"usage": {},
"props": [
{
"name": "iconSize",
"type": "\"large\" | \"medium\" | \"small\"",
"mutable": false,
"attr": "icon-size",
"reflectToAttr": false,
"docs": "The size of the default icon",
"docsTags": [],
"default": "'medium'",
"values": [
{
"value": "large",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "small",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "truncateOnOverflow",
"type": "boolean",
"mutable": false,
"attr": "truncate-on-overflow",
"reflectToAttr": false,
"docs": "Truncate title on text overflow",
"docsTags": [],
"default": "true",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
}
],
"methods": [],
"events": [],
"listeners": [],
"styles": [
{
"name": "--fw-accordion-title-background-color",
"annotation": "prop",
"docs": "Accordion title background color"
},
{
"name": "--fw-accordion-title-border",
"annotation": "prop",
"docs": "Accordion title border"
},
{
"name": "--fw-accordion-title-collapsed-icon-color",
"annotation": "prop",
"docs": "Accordion title collapsed icon color"
},
{
"name": "--fw-accordion-title-expanded-icon-color",
"annotation": "prop",
"docs": "Accordion title expanded icon color"
},
{
"name": "--fw-accordion-title-font-size",
"annotation": "prop",
"docs": "Accordion title font size"
},
{
"name": "--fw-accordion-title-font-weight",
"annotation": "prop",
"docs": "Accordion title font weight"
},
{
"name": "--fw-accordion-title-line-height",
"annotation": "prop",
"docs": "Accordion title line height"
}
],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [
"fw-icon"
],
"dependencyGraph": {
"fw-accordion-title": [
"fw-icon"
],
"fw-icon": [
"fw-toast-message"
],
"fw-toast-message": [
"fw-spinner",
"fw-icon"
]
}
},
{
"filePath": "./src/components/avatar/avatar.tsx",
"encapsulation": "shadow",
"tag": "fw-avatar",
"readme": "# Avatar (fw-avatar)\n\nAvatars are used to represent a person or object.\n\n## Demo\n\n```html live\n<section>\n <fw-avatar\n size=\"medium\"\n image=\"https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80\"\n ></fw-avatar>\n <fw-avatar initials=\"PT\"></fw-avatar>\n <fw-avatar name=\"Patrick Goodwin\"></fw-avatar>\n</section>\n```\n\nAvatar of different sizes\n\n```html live\n<section>\n <fw-avatar\n size=\"medium\"\n image=\"https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80\"\n ></fw-avatar>\n <fw-avatar\n size=\"small\"\n image=\"https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80\"\n ></fw-avatar>\n</section>\n```\n\nAvatar with Light and Dark mode\n\n```html live\n<section>\n <fw-avatar mode=\"dark\" initials=\"PT\"></fw-avatar>\n <fw-avatar mode=\"light\" initials=\"PT\"></fw-avatar>\n</section>\n```\n\n## Usage\n\n<code-group>\n<code-block title=\"HTML\">\n``` html\n<section>\n <fw-avatar\n size=\"medium\"\n image=\"https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80\"></fw-avatar>\n <fw-avatar\n size=\"small\"\n image=\"https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80\"></fw-avatar>\n</section>\n<section>\n<fw-avatar size=\"medium\" image=\"https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80\"> </fw-avatar>\n<fw-avatar size=\"small\" image=\"https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80\"> </fw-avatar>\n</section>\n```\n</code-block>\n\n<code-block title=\"React\">\n```jsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { FwAvatar } from \"@freshworks/crayons/react\";\nfunction App() {\n return (<div>\n <FwAvatar image=\"https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80\"></FwAvatar>\n\n <FwAvatar mode=\"dark\" initials=\"PT\" ></FwAvatar>\n <FwAvatar mode=\"light\" initials=\"PT\" ></FwAvatar>\n\n <FwAvatar size=\"medium\" image=\"https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300 q=80\"></FwAvatar>\n <FwAvatar size=\"small\" image=\"https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80\"></FwAvatar>\n\n </div>)\n}\n```\n</code-block>\n</code-group>",
"docs": "Avatars are used to represent a person or object.",
"docsTags": [],
"usage": {},
"props": [
{
"name": "alt",
"type": "string",
"mutable": false,
"attr": "alt",
"reflectToAttr": false,
"docs": "",
"docsTags": [],
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "image",
"type": "string",
"mutable": false,
"attr": "image",
"reflectToAttr": false,
"docs": "",
"docsTags": [],
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "initials",
"type": "string",
"mutable": false,
"attr": "initials",
"reflectToAttr": false,
"docs": "",
"docsTags": [],
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "mode",
"type": "\"dark\" | \"light\"",
"mutable": false,
"attr": "mode",
"reflectToAttr": false,
"docs": "",
"docsTags": [],
"default": "'dark'",
"values": [
{
"value": "dark",
"type": "string"
},
{
"value": "light",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "name",
"type": "string",
"mutable": false,
"attr": "name",
"reflectToAttr": false,
"docs": "",
"docsTags": [],
"default": "''",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "shape",
"type": "\"circle\" | \"rounded\" | \"square\"",
"mutable": false,
"attr": "shape",
"reflectToAttr": false,
"docs": "",
"docsTags": [],
"default": "'circle'",
"values": [
{
"value": "circle",
"type": "string"
},
{
"value": "rounded",
"type": "string"
},
{
"value": "square",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "size",
"type": "\"large\" | \"medium\" | \"small\" | \"xlarge\" | \"xsmall\" | \"xxlarge\" | \"xxsmall\"",
"mutable": false,
"attr": "size",
"reflectToAttr": false,
"docs": "",
"docsTags": [],
"default": "'large'",
"values": [
{
"value": "large",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "small",
"type": "string"
},
{
"value": "xlarge",
"type": "string"
},
{
"value": "xsmall",
"type": "string"
},
{
"value": "xxlarge",
"type": "string"
},
{
"value": "xxsmall",
"type": "string"
}
],
"optional": false,
"required": false
}
],
"methods": [],
"events": [],
"listeners": [],
"styles": [],
"slots": [],
"parts": [
{
"name": "image",
"docs": ""
},
{
"name": "initials",
"docs": ""
}
],
"dependents": [
"fw-custom-cell-user",
"fw-select-option",
"fw-tag"
],
"dependencies": [],
"dependencyGraph": {
"fw-custom-cell-user": [
"fw-avatar"
],
"fw-select-option": [
"fw-avatar"
],
"fw-tag": [
"fw-avatar"
]
}
},
{
"filePath": "./src/components/button/button.tsx",
"encapsulation": "shadow",
"tag": "fw-button",
"readme": "# Button (fw-button)\n\nfw-button displays a button on the user interface and enables performing specific actions based on the button type. The button’s label can be a text, icon, or both.\n\n## Demo\n\n```html live\n<section>\n <fw-label value=\"Try themes\"></fw-label>\n <fw-button color=\"primary\"> OK </fw-button>\n <fw-button color=\"secondary\"> Secondary </fw-button>\n <fw-button color=\"danger\"> Don't Click </fw-button>\n <fw-button color=\"link\"> Link Button </fw-button>\n <fw-button color=\"text\"> Plain Text Button </fw-button>\n</section>\n\n<br />\n\n<section>\n <fw-label value=\"Try sizes\"></fw-label>\n <fw-button size=\"small\"> Small </fw-button>\n <fw-button> Default </fw-button>\n</section>\n<br />\n\n<section>\n <fw-label value=\"Try icon buttons\"></fw-label>\n <fw-button size=\"icon\"\n ><fw-icon name=\"agent\" size=\"20\" color=\"white\"></fw-icon>\n </fw-button>\n <fw-button size=\"icon\" color=\"secondary\"\n ><fw-icon name=\"phone\" size=\"20\"></fw-icon>\n </fw-button>\n</section>\n<br />\n\n<section>\n <fw-label value=\"Caret with icon\"></fw-label>\n <fw-button show-caret-icon>\n <fw-icon name=\"calendar-time\" size=\"16\" slot=\"before-label\"></fw-icon>\n Select date\n </fw-button>\n\n <fw-button color=\"link\" show-caret-icon>\n <fw-icon name=\"calendar-time\" size=\"16\" slot=\"before-label\"></fw-icon>\n Select date\n </fw-button>\n</section>\n<br />\n\n<section>\n <fw-label value=\"Loading state\"></fw-label>\n <fw-button loading> Loading </fw-button>\n <fw-button loading color=\"secondary\"> OK </fw-button>\n <fw-button loading color=\"danger\"> Don't Click </fw-button>\n</section>\n<br />\n\n<section>\n <fw-label value=\"Disabled\"></fw-label>\n <fw-button disabled color=\"primary\"> OK </fw-button>\n <fw-button disabled color=\"secondary\"> OK </fw-button>\n <fw-button disabled color=\"danger\"> Don't Click </fw-button>\n</section>\n\n<section>\n <fw-label\n value=\"Try icon + text buttons Buttons with before-label and after-label\"\n ></fw-label>\n <fw-button color=\"secondary\">\n <fw-icon slot=\"before-label\" size=\"16\" name=\"delete\"></fw-icon>\n <span>Delete</span>\n </fw-button>\n <fw-button color=\"primary\">\n <span>Copy</span>\n <fw-icon name=\"code\" size=\"16\" slot=\"after-label\"></fw-icon>\n </fw-button>\n</section>\n<br />\n```\n\n## Usage\n\n<code-group>\n<code-block title=\"HTML\">\n``` html\n<section>\n <fw-label value=\"Try themes\"></fw-label>\n <fw-button color=\"primary\"> OK </fw-button>\n <fw-button color=\"secondary\"> Secondary </fw-button>\n <fw-button color=\"danger\"> Don't Click </fw-button>\n <fw-button color=\"link\"> Link Button </fw-button>\n <fw-button color=\"text\"> Plain Text Button </fw-button>\n</section>\n\n<br />\n\n<section>\n <fw-label value=\"Try sizes\"></fw-label>\n <fw-button size=\"small\"> Small </fw-button>\n <fw-button> Default </fw-button>\n</section>\n<br />\n\n<section>\n <fw-label value=\"Try icon buttons\"></fw-label>\n <fw-button size=\"icon\"\n ><fw-icon name=\"agent\" size=\"20\" color=\"white\"></fw-icon>\n </fw-button>\n <fw-button size=\"icon\" color=\"secondary\"\n ><fw-icon name=\"phone\" size=\"20\"></fw-icon>\n </fw-button>\n</section>\n<br />\n\n<section>\n <fw-label value=\"Caret with icon\"></fw-label>\n <fw-button show-caret-icon>\n <fw-icon name=\"calendar-time\" size=\"16\" slot=\"before-label\"></fw-icon>\n Select date\n </fw-button>\n\n <fw-button color=\"link\" show-caret-icon>\n <fw-icon name=\"calendar-time\" size=\"16\" slot=\"before-label\"></fw-icon>\n Select date\n </fw-button>\n</section>\n<br />\n\n<section>\n <fw-label value=\"Loading state\"></fw-label>\n <fw-button loading> Loading </fw-button>\n <fw-button loading color=\"secondary\"> OK </fw-button>\n <fw-button loading color=\"danger\"> Don't Click </fw-button>\n</section>\n<br />\n\n<section>\n <fw-label value=\"Disabled\"></fw-label>\n <fw-button disabled color=\"primary\"> OK </fw-button>\n <fw-button disabled color=\"secondary\"> OK </fw-button>\n <fw-button disabled color=\"danger\"> Don't Click </fw-button>\n</section>\n\n<section>\n <fw-label\n value=\"Try icon + text buttons Buttons with before-label and after-label\"\n ></fw-label>\n <fw-button color=\"secondary\">\n <fw-icon slot=\"before-label\" size=\"16\" name=\"delete\"></fw-icon>\n <span>Delete</span>\n </fw-button>\n <fw-button color=\"primary\">\n <span>Copy</span>\n <fw-icon name=\"code\" size=\"16\" slot=\"after-label\"></fw-icon>\n </fw-button>\n</section>\n```\n</code-block>\n\n<code-block title=\"React\">\n```jsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { FwButton, FwIcon } from \"@freshworks/crayons/react\";\nfunction App() {\n return (<div>\n <section>\n <label>Try themes</label>\n <FwButton color=\"primary\" onFwClick={()=>console.log(\"fwClick event emitted from button\")}> OK </FwButton>\n <FwButton color=\"secondary\"> Secondary </FwButton>\n <FwButton color=\"danger\"> Don't Click </FwButton>\n <FwButton color=\"link\"> Link Button </FwButton>\n <FwButton color=\"text\"> Plain Text Button </FwButton>\n</section>\n\n<br />\n\n<section>\n <label>Try sizes</label>\n <FwButton size=\"mini\" color=\"secondary\"> Mini </FwButton>\n <FwButton size=\"small\"> Small </FwButton>\n <FwButton> Default </FwButton>\n</section>\n<br />\n\n<section>\n <label>Try icon buttons</label>\n <FwButton size=\"icon\"\n ><FwIcon name=\"agent\" color=\"white\"></FwIcon>\n </FwButton>\n <FwButton size=\"icon\" color=\"secondary\"\n ><FwIcon name=\"phone\"></FwIcon>\n </FwButton>\n</section>\n<br />\n<section>\n <label value=\"Caret with icon\"></label>\n <FwButton show-caret-icon>\n <FwIcon name=\"calendar-time\" slot=\"before-label\"></FwIcon>\n Select date\n </FwButton>\n\n <FwButton color=\"link\" show-caret-icon>\n <fw-icon name=\"calendar-time\" slot=\"before-label\" ></fw-icon>\n Select date\n </FwButton>\n</section>\n<br />\n\n<section>\n <label>Loading state</label>\n <FwButton loading> Loading </FwButton>\n <FwButton loading color=\"secondary\"> OK </FwButton>\n <FwButton loading color=\"danger\"> Don't Click </FwButton>\n</section>\n<br />\n\n<section>\n <label>Disabled</label>\n <FwButton disabled color=\"primary\"> OK </FwButton>\n <FwButton disabled color=\"secondary\"> OK </FwButton>\n <FwButton disabled color=\"danger\"> Don't Click </FwButton>\n</section>\n<br />\n<section>\n <label value=\"Try icon + text buttons Buttons with before-label and after-label\"></label>\n <FwButton color=\"secondary\">\n <FwIcon slot=\"before-label\" name=\"delete\"></FwIcon>\n <span>Delete</span>\n </FwButton>\n <FwButton color=\"primary\">\n <span>Copy</span>\n <FwIcon name=\"code\" slot=\"after-label\"></FwIcon>\n </FwButton>\n</section>\n<br />\n\n<section>\n <FwButton value=\"Try full length\"></FwButton>\n <FwButton color=\"secondary\" size=\"small\" style=\"display: block;\">Span full-width</FwButton>\n</section>\n </div>)\n```\n</code-block>\n</code-group>\n",
"docs": "fw-button displays a button on the user interface and enables performing specific actions based on the button type. The button’s label can be a text, icon, or both.",
"docsTags": [],
"usage": {},
"props": [
{
"name": "color",
"type": "\"danger\" | \"link\" | \"primary\" | \"secondary\" | \"text\"",
"mutable": false,
"attr": "color",
"reflectToAttr": false,
"docs": "Identifier of the theme based on which the button is styled.",
"docsTags": [],
"default": "'primary'",
"values": [
{
"value": "danger",
"type": "string"
},
{
"value": "link",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "text",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "disabled",
"type": "boolean",
"mutable": false,
"attr": "disabled",
"reflectToAttr": true,
"docs": "Disables the button on the interface. Default value is false.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "fileUploaderId",
"type": "string",
"mutable": false,
"attr": "file-uploader-id",
"reflectToAttr": false,
"docs": "Accepts the id of the fw-file-uploader component to upload the file.",
"docsTags": [],
"default": "''",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "loading",
"type": "boolean",
"mutable": false,
"attr": "loading",
"reflectToAttr": false,
"docs": "Loading state for the button, Default value is false.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "modalTriggerId",
"type": "string",
"mutable": false,
"attr": "modal-trigger-id",
"reflectToAttr": false,
"docs": "Accepts the id of the fw-modal component to open it on click.",
"docsTags": [],
"default": "''",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "showCaretIcon",
"type": "boolean",
"mutable": false,
"attr": "show-caret-icon",
"reflectToAttr": false,
"docs": "Caret indicator for the button, Default value is false.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "size",
"type": "\"icon\" | \"icon-small\" | \"normal\" | \"small\"",
"mutable": false,
"attr": "size",
"reflectToAttr": false,
"docs": "Size of the button.",
"docsTags": [],
"default": "'normal'",
"values": [
{
"value": "icon",
"type": "string"
},
{
"value": "icon-small",
"type": "string"
},
{
"value": "normal",
"type": "string"
},
{
"value": "small",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "throttleDelay",
"type": "number",
"mutable": false,
"attr": "throttle-delay",
"reflectToAttr": false,
"docs": "Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.",
"docsTags": [],
"default": "200",
"values": [
{
"type": "number"
}
],
"optional": false,
"required": false
},
{
"name": "type",
"type": "\"button\" | \"submit\"",
"mutable": false,
"attr": "type",
"reflectToAttr": false,
"docs": "Button type based on which actions are performed when the button is clicked.",
"docsTags": [],
"default": "'button'",
"values": [
{
"value": "button",
"type": "string"
},
{
"value": "submit",
"type": "string"
}
],
"optional": false,
"required": false
}
],
"methods": [
{
"name": "setFocus",
"returns": {
"type": "Promise<any>",
"docs": ""
},
"signature": "setFocus() => Promise<any>",
"parameters": [],
"docs": "",
"docsTags": []
}
],
"events": [
{
"event": "fwBlur",
"detail": "void",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": "Triggered when the button loses focus.",
"docsTags": []
},
{
"event": "fwClick",
"detail": "void",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": "Triggered when the button is clicked.",
"docsTags": []
},
{
"event": "fwFocus",
"detail": "void",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": "Triggered when the button comes into focus.",
"docsTags": []
}
],
"listeners": [],
"styles": [
{
"name": "--fw-button-label-vertical-padding",
"annotation": "prop",
"docs": "vertical padding for the button label"
},
{
"name": "--fw-button-min-width",
"annotation": "prop",
"docs": "minimum width for the button"
}
],
"slots": [],
"parts": [],
"dependents": [
"fw-data-table",
"fw-datepicker",
"fw-modal-footer",
"fw-pagination",
"fw-select"
],
"dependencies": [
"fw-spinner",
"fw-icon"
],
"dependencyGraph": {
"fw-button": [
"fw-spinner",
"fw-icon"
],
"fw-icon": [
"fw-toast-message"
],
"fw-toast-message": [
"fw-spinner",
"fw-icon"
],
"fw-data-table": [
"fw-button"
],
"fw-datepicker": [
"fw-button"
],
"fw-modal-footer": [
"fw-button"
],
"fw-pagination": [
"fw-button"
],
"fw-select": [
"fw-button"
]
}
},
{
"filePath": "./src/components/button-group/button-group.tsx",
"encapsulation": "shadow",
"tag": "fw-button-group",
"readme": "# Button Group (fw-button-group)\n\nButton groups can be used to group related buttons into sections.\n\n## Demo\n\n```html live\n<section>\n <fw-button-group label=\"Test\">\n <fw-button color=\"secondary\">Replace</fw-button>\n <fw-button color=\"secondary\">Modify</fw-button>\n <fw-button color=\"secondary\">Cancel</fw-button>\n </fw-button-group>\n</section>\n<br />\n\n<section>\n <fw-button-group label=\"Test\">\n <fw-button id=\"b1\" size=\"icon\" color=\"secondary\"\n ><fw-icon name=\"reply\" color=\"black\"></fw-icon>\n </fw-button>\n <fw-button id=\"b2\" size=\"icon\" color=\"secondary\"\n ><fw-icon name=\"chat-online\" color=\"black\"></fw-icon>\n </fw-button>\n <fw-button id=\"b3\" size=\"icon\" color=\"secondary\"\n ><fw-icon name=\"more-horizontal\" color=\"black\"></fw-icon>\n </fw-button>\n </fw-button-group>\n</section>\n```\n\n## Usage\n\n<code-group>\n<code-block title=\"HTML\">\n```html\n<section>\n<fw-button-group label=\"Test\">\n <fw-button color=\"secondary\">Replace</fw-button>\n <fw-button color=\"secondary\">Modify</fw-button>\n <fw-button color=\"secondary\">Cancel</fw-button>\n </fw-button-group>\n </section>\n<br/>\n<section>\n <fw-button-group label=\"Test\">\n <fw-button id=\"b1\" size=\"icon\" color=\"secondary\"><fw-icon name=\"reply\" color=\"black\" ></fw-icon> </fw-button>\n <fw-button id=\"b2\" size=\"icon\" color=\"secondary\"><fw-icon name=\"chat-online\" color=\"black\" ></fw-icon> </fw-button>\n <fw-button id=\"b3\" size=\"icon\" color=\"secondary\"><fw-icon name=\"more-horizontal\" color=\"black\" ></fw-icon> </fw-button>\n </fw-button-group>\n</section>\n```\n</code-block>\n\n<code-block title=\"React\">\n```jsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { FwButtonGroup, FwButton, FwIcon } from \"@freshworks/crayons/react\";\nfunction App() {\n return (<div>\n <FwButtonGroup>\n <FwButton color=\"secondary\"> Replace</FwButton> \n <FwButton color=\"secondary\">Modify</FwButton> \n <FwButton color=\"secondary\">Cancel</FwButton>\n </FwButtonGroup>\n\n <FwButtonGroup>\n <FwButton id=\"b1\" size=\"icon\" color=\"secondary\"><FwIcon name=\"reply\" color=\"black\"></FwIcon> </FwButton> \n <FwButton id=\"b1\" size=\"icon\" color=\"secondary\"><FwIcon name=\"chat-online\" color=\"black\"></FwIcon> </FwButton>\n <FwButton id=\"b1\" size=\"icon\" color=\"secondary\"><FwIcon name=\"more-horizontal\" color=\"black\"></FwIcon> </FwButton>\n </FwButtonGroup>\n\n </div>)\n}\n```\n</code-block>\n</code-group>\n",
"docs": "Button groups can be used to group related buttons into sections.",
"docsTags": [],
"usage": {},
"props": [
{
"name": "label",
"type": "string",
"mutable": true,
"attr": "label",
"reflectToAttr": false,
"docs": "",
"docsTags": [],
"default": "''",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
}
],
"methods": [],
"events": [],
"listeners": [],
"styles": [],
"slots": [],
"parts": [],
"dependents": [
"fw-pagination"
],
"dependencies": [],
"dependencyGraph": {
"fw-pagination": [
"fw-button-group"
]
}
},
{
"filePath": "./src/components/checkbox/checkbox.tsx",
"encapsulation": "shadow",
"tag": "fw-checkbox",
"readme": "# Checkbox (fw-checkbox)\nfw-checkbox displays a check box on the user interface and enables assigning a state (selected or deselected) to it. In the selected state, the check box displayed on the UI is highlighted and contains a check mark. \n\n## Demo\n\n```html live\n<fw-checkbox checked description=\"Agree or Disagree\">Select to agree</fw-checkbox><br><br>\n<fw-checkbox checked disabled value=\"dcb\">Disabled check box</fw-checkbox>\n```\n## Usage\n\n<code-group>\n<code-block title=\"HTML\">\n```html\n<fw-checkbox checked description=\"Agree or Disagree\">Select to agree</fw-checkbox><br><br>\n<fw-checkbox checked disabled value=\"dcb\">Disabled check box</fw-checkbox>\n```\n</code-block>\n\n<code-block title=\"React\">\n```jsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { FwCheckbox } from \"@freshworks/crayons/react\";\nfunction App() {\n return (<div>\n <FwCheckbox checked description=\"Agree or Disagree\">Select to agree</FwCheckbox><br/><br/>\n <FwCheckbox checked disabled value=\"dcb\">Disabled check box</FwCheckbox>\n </div>)\n}\n```\n</code-block>\n</code-group>\n",
"docs": "fw-checkbox displays a check box on the user interface and enables assigning a state (selected or deselected) to it. In the selected state, the check box displayed on the UI is highlighted and contains a check mark.",
"docsTags": [],
"usage": {},
"props": [
{
"name": "checked",
"type": "boolean",
"mutable": true,
"attr": "checked",
"reflectToAttr": true,
"docs": "Sets the state of the check box to selected. If the attribute’s value is undefined, the value is set to false.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "description",
"type": "string",
"mutable": false,
"attr": "description",
"reflectToAttr": false,
"docs": "Description to be displayed for the checkbox.",
"docsTags": [],
"default": "''",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "disabled",
"type": "boolean",
"mutable": true,
"attr": "disabled",
"reflectToAttr": true,
"docs": "Disables the check box on the interface. If the attribute’s value is undefined, the value is set to false.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "errorText",
"type": "string",
"mutable": false,
"attr": "error-text",
"reflectToAttr": false,
"docs": "Error text displayed below the radio group.",
"docsTags": [],
"default": "''",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "hintText",
"type": "string",
"mutable": false,
"attr": "hint-text",
"reflectToAttr": false,
"docs": "/**\n Hint text displayed below the radio group.",
"docsTags": [],
"default": "''",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "label",
"type": "string",
"mutable": false,
"attr": "label",
"reflectToAttr": false,
"docs": "",
"docsTags": [
{
"text": "Use `description` instead.\nLabel displayed on the interface, for the check box.",
"name": "deprecated"
}
],
"default": "''",
"deprecation": "Use `description` instead.\nLabel displayed on the interface, for the check box.",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "name",
"type": "string",
"mutable": false,
"attr": "name",
"reflectToAttr": false,
"docs": "Name of the component, saved as part of form data.",
"docsTags": [],
"default": "''",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "required",
"type": "boolean",
"mutable": false,
"attr": "required",
"reflectToAttr": false,
"docs": "Specifies the input box as a mandatory field and displays an asterisk next to the label. If the attribute’s value is undefined, the value is set to false.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "state",
"type": "\"error\" | \"normal\" | \"warning\"",
"mutable": false,
"attr": "state",
"reflectToAttr": false,
"docs": "Theme based on which the checkbox is styled.",
"docsTags": [],
"default": "'normal'",
"values": [
{
"value": "error",
"type": "string"
},
{
"value": "normal",
"type": "string"
},
{
"value": "warning",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "value",
"type": "string",
"mutable": false,
"attr": "value",
"reflectToAttr": false,
"docs": "Identifier corresponding to the component, that is saved when the form data is saved.",
"docsTags": [],
"default": "''",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "warningText",
"type": "string",
"mutable": false,
"attr": "warning-text",
"reflectToAttr": false,
"docs": "Warning text displayed below the radio group.",
"docsTags": [],
"default": "''",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
}
],
"methods": [
{
"name": "setFocus",
"returns": {
"type": "Promise<void>",
"docs": ""
},
"signature": "setFocus() => Promise<void>",
"parameters": [],
"docs": "Sets focus on a `fw-checkbox`.",
"docsTags": []
}
]