{"_id":"@bolttech/ob-molecules-product-card","_rev":"5-137c4a01a907c836d26e6c28a9869e23","name":"@bolttech/ob-molecules-product-card","dist-tags":{"latest":"1.1.1"},"versions":{"1.0.0":{"name":"@bolttech/ob-molecules-product-card","version":"1.0.0","_id":"@bolttech/ob-molecules-product-card@1.0.0","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"dist":{"shasum":"67d860a9d54f49e1142582b5e79ccee4093dd3c0","tarball":"https://registry.npmjs.org/@bolttech/ob-molecules-product-card/-/ob-molecules-product-card-1.0.0.tgz","fileCount":10,"integrity":"sha512-PkFLk8Z1oKsJDrT7Dfp24N+7sPtPjQg5LQHW22JQgxgNytYaAHBltLgmN/nlpy36Q3uv4XaUTcFkNWw8f9HMGw==","signatures":[{"sig":"MEQCIG+Vy6/6LGoy+ctNpAZo17xFNE+A2gc7v8ulJQTELNE+AiBN/l+SsWlE69FXDkfYvw/FFS5otb7LfewsDSah8BnybA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":165997},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"0730e13f84730186b0e5c33e95f0f59c1838167f","_npmUser":{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},"_npmVersion":"11.10.1","description":"```bash npx nx g @nx/react:lib ${lib_name} ```","directories":{},"_nodeVersion":"22.17.1","dependencies":{"@bolttech/ui-utils":"0.6.5"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-molecules-product-card_1.0.0_1778516549666_0.6951433104884903","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@bolttech/ob-molecules-product-card","version":"1.0.1","_id":"@bolttech/ob-molecules-product-card@1.0.1","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"dist":{"shasum":"8cdba06ea5a8d1ec28446630707b9da98185679f","tarball":"https://registry.npmjs.org/@bolttech/ob-molecules-product-card/-/ob-molecules-product-card-1.0.1.tgz","fileCount":5,"integrity":"sha512-nO/2z/545IiJtyrxt8k8qD9FYuOOCxw94J5m1FR+I7zIKQLeeR2T7sy2XyQt82IVs0jhCvx3doYWRQ/+Lwvhww==","signatures":[{"sig":"MEUCIQCONRfpXYELw4KJqGp1pBQkO+SkOG3EeYoOPmYIC5yF1gIgXhCoUiyzsEHYM3GkbVFNWxYCNJgyM0131s4svGK/1eM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":159916},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"0cd639b5d5c1820de6a964a30aad848c07eae5c1","_npmUser":{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"},"_npmVersion":"10.9.4","description":"```bash npx nx g @nx/react:lib ${lib_name} ```","directories":{},"_nodeVersion":"22.22.0","dependencies":{"react":"19.1.2","classnames":"^2.5.1","@bolttech/ui-utils":"0.6.7","@bolttech/atoms-tag":"0.22.2","@bolttech/ob-atoms-tag":"1.0.1","@bolttech/ob-atoms-icon":"1.0.1","@bolttech/ob-atoms-price":"1.0.1","@bolttech/ob-atoms-button":"1.0.1","@bolttech/ob-atoms-divider":"1.0.1","@material-symbols/font-300":"^0.5.5","@bolttech/ob-atoms-checkbox":"1.0.1","@bolttech/ob-atoms-description-wrapper":"1.0.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-molecules-product-card_1.0.1_1780927844565_0.08908876438246294","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@bolttech/ob-molecules-product-card","version":"1.0.2","_id":"@bolttech/ob-molecules-product-card@1.0.2","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"dist":{"shasum":"bc2605b5f03f8c136536a8fe452ba2e25a0432de","tarball":"https://registry.npmjs.org/@bolttech/ob-molecules-product-card/-/ob-molecules-product-card-1.0.2.tgz","fileCount":5,"integrity":"sha512-BiVhVVmYzSK6w+Qv2Uet/0iqN41k0yyHbfsDmN8Ze2n1TdprQA6Xvua7itMkS5XlA6vwnXV8+VoDYOWDoORhDw==","signatures":[{"sig":"MEUCIAJvRPf0QbAUhDY0IE0UxFpuBNqBVjqJF3KauR/XAQjxAiEA8nYfRRPqIgQ3bUbV+xBccFuIXN10cJ7EvfdYHZ1x2jQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":159912},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"219a70cd0e5bee0e01a795c76ff7645af8e0bee2","_npmUser":{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},"_npmVersion":"11.10.1","description":"```bash npx nx g @nx/react:lib ${lib_name} ```","directories":{},"_nodeVersion":"22.17.1","dependencies":{"react":"19.1.2","classnames":"^2.5.1","@bolttech/ui-utils":"0.6.7","@bolttech/atoms-tag":"0.22.3","@bolttech/ob-atoms-tag":"1.0.1","@bolttech/ob-atoms-icon":"1.0.1","@bolttech/ob-atoms-price":"1.0.1","@bolttech/ob-atoms-button":"1.0.1","@bolttech/ob-atoms-divider":"1.0.1","@material-symbols/font-300":"^0.5.5","@bolttech/ob-atoms-checkbox":"1.0.1","@bolttech/ob-atoms-description-wrapper":"1.0.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-molecules-product-card_1.0.2_1782832418500_0.2990680176096532","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@bolttech/ob-molecules-product-card","version":"1.1.0","_id":"@bolttech/ob-molecules-product-card@1.1.0","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"dist":{"shasum":"f49adcdc2b8515f850307e37931f099f58d0a470","tarball":"https://registry.npmjs.org/@bolttech/ob-molecules-product-card/-/ob-molecules-product-card-1.1.0.tgz","fileCount":10,"integrity":"sha512-X+G5VTZU04tsLHJCucOwRtMgYuO/Q/p6CvtThL2H26ToxU5ZNJxxsNYZvWWD+puah1vPl68VKk6UhiLzlquX6w==","signatures":[{"sig":"MEUCIQCk1K1tLgI96/41e1czeB9AeV/caJU3g1iBA83m657uWgIgckgQyTJ+TSsmU65olOKFHbgKKUUOyObuumrYQsvjIcI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":166594},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"de7d1744d20682afd72556d2d475f0cb7ee24db7","_npmUser":{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},"_npmVersion":"10.9.8","description":"```bash npx nx g @nx/react:lib ${lib_name} ```","directories":{},"_nodeVersion":"22.17.1","dependencies":{"react":"19.1.2","classnames":"^2.5.1","@bolttech/ui-utils":"0.6.7","@bolttech/atoms-tag":"0.22.3","@bolttech/ob-atoms-tag":"1.0.1","@bolttech/ob-atoms-icon":"1.0.1","@bolttech/ob-atoms-price":"1.0.1","@bolttech/ob-atoms-button":"1.0.1","@bolttech/ob-atoms-divider":"1.0.1","@material-symbols/font-300":"^0.5.5","@bolttech/ob-atoms-checkbox":"1.0.1","@bolttech/ob-atoms-description-wrapper":"1.0.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-molecules-product-card_1.1.0_1788779970951_0.1343732416281005","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"@bolttech/ob-molecules-product-card","version":"1.1.1","dependencies":{"@material-symbols/font-300":"^0.5.5","@bolttech/ui-utils":"0.6.7","@bolttech/atoms-tag":"0.22.3","react":"19.1.2","classnames":"^2.5.1","@bolttech/ob-atoms-checkbox":"1.0.1","@bolttech/ob-atoms-description-wrapper":"1.0.1","@bolttech/ob-atoms-icon":"1.0.1","@bolttech/ob-atoms-price":"1.0.1","@bolttech/ob-atoms-button":"1.0.1","@bolttech/ob-atoms-divider":"1.0.1","@bolttech/ob-atoms-tag":"1.0.1"},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","_id":"@bolttech/ob-molecules-product-card@1.1.1","gitHead":"8792d415f7f06aba0a01cdc30343fbb10dda7b02","description":"The **ProductCard** component is a versatile React component designed to display product information, coverages, add-ons, and buttons for actions.","_nodeVersion":"22.17.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-7YTLeeO67ktknaUHjUPm9FZOh1F9AamWuFfuMq1vf916e+3s1jQqzr/ZJ7aDo8jwgDuasFgEB33XuwrieuW8nA==","shasum":"5db39af48005d01570c640558e4fcf27ec74c50a","tarball":"https://registry.npmjs.org/@bolttech/ob-molecules-product-card/-/ob-molecules-product-card-1.1.1.tgz","fileCount":9,"unpackedSize":172773,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEtmr5QnZhvhYFWs3AAhT1mix4Uctn82adX6rdDumgjIAiEAw2bwbNCjNrEzkgFIKyjSYvSqK/Cc9+Ks1JfZLPuzlLY="}]},"_npmUser":{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},"directories":{},"maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ob-molecules-product-card_1.1.1_1788797014820_0.8516449977809595"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-11T16:22:29.550Z","modified":"2026-09-07T16:03:35.136Z","1.0.0":"2026-05-11T16:22:29.824Z","1.0.1":"2026-06-08T14:10:44.774Z","1.0.2":"2026-06-30T15:13:38.631Z","1.1.0":"2026-09-07T11:19:31.107Z","1.1.1":"2026-09-07T16:03:34.978Z"},"description":"The **ProductCard** component is a versatile React component designed to display product information, coverages, add-ons, and buttons for actions.","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"readme":"# Product Card Component\n\nThe **ProductCard** component is a versatile React component designed to display product information, coverages, add-ons, and buttons for actions.\n\n## Installation\n\nTo use the **ProductCard** component, you need to install the required dependencies:\n\n```bash\nnpm install @bolttech/molecules-product-card\n```\n\nor\n\n```bash\nyarn add @bolttech/molecules-product-card\n```\n\n## Usage\n\nYou can utilize the **ProductCard** component by importing it and including it in your JSX. Here's an example:\n\n```jsx\nimport React from 'react';\nimport {ProductCard} from '@bolttech/molecules-product-card/ob';\n\nfunction App() {\n // Sample data\n const productInfo = {\n productName: 'Product Name',\n productDescription: 'Product Description',\n productValue: '100.00',\n productCurrencyValue: '$',\n productDuration: '1 year',\n compareLabel: 'Compare',\n compareAction: () => console.log('Compare button clicked'),\n productImg: 'image-url.png',\n };\n\n const coverages = [\n {name: 'Coverage 1', value: 'Value 1'},\n {name: 'Coverage 2', value: 'Value 2'},\n ];\n\n const addOns = {\n additionalValue: '20.00',\n additionalValueCurrency: '$',\n checkboxLabel: 'Optional',\n checkboxId: 'optional-checkbox',\n specialDetails: [\n {label: 'Special Detail 1', icon: 'icon_name_1'},\n {label: 'Special Detail 2', icon: 'icon_name_2'},\n ],\n };\n\n const [isOpen, setIsOpen] = useState(false);\n\n const buttons = {\n showMoreButtonLabel: 'Show More',\n hideProductDetailsLabel: 'Hide Details',\n buyButtonLabel: 'Buy Now',\n buyButtonAction: () => console.log('Buy button clicked'),\n showMoreAction: (isOpenParam: boolean) => setIsOpen(isOpenParam),\n };\n\n const productDetails = {\n coveragesContainer: [\n {\n titleContainer: 'Coverage Details',\n coverages: [\n {name: 'Coverage 1', value: 'Value 1'},\n {name: 'Coverage 2', value: 'Value 2'},\n ],\n },\n ],\n };\n\n return (\n {/* Product Card component */}\n \n
Dynamic Content (Top)
\n
Dynamic Content (Bottom)
\n
...rest
\n \n );\n}\n\nexport default App;\n```\n\n## Props\n\nThe **ProductCard** component accepts the following props:\n\n| Prop | Type | Description |\n| ----------------- | ---------------- | --------------------------------------------------------- | ----------------------------------------- |\n| `productInfo` | `object` | Object containing information about the product. |\n| `coverages` | `array` | Array of coverages to display. |\n| `addOns` | `object` | Object containing information about add-ons. |\n| `buttons` | `object` | Object containing information about action buttons. |\n| `productDetails` | `object` | Object containing detailed information about the product. |\n| `dataTestId` | `string` | The data-testid attribute for testing purposes. |\n| `isOpen` | `boolean` | Boolean prop that controls if plan card is open or not. |\n| `isCompareActive` | `boolean` | Boolean prop that controls if compare is active or not. |\n| `children` | `React.ReactNode | React.ReactNode[]` | Content that will appear in details area, |\n\nthe first item will be above of coveragesContainer and the rest will be bellow.\n\nThe `productInfo` object should have the following properties:\n\n- `productName`: The name of the product.\n- `productDescription`: Description of the product (optional).\n- `productValue`: The product's value.\n- `productCurrencyValue`: Currency symbol for the product value.\n- `productDuration`: Duration of the product (optional).\n- `compareLabel`: Text for the compare button (optional).\n- `compareAction`: Callback function for the compare button (optional).\n- `productImg`: URL or React component for the product image (optional).\n\nThe `coverages` array should contain objects with `name` and `value` properties.\n\nThe `addOns` object should have the following properties:\n\n- `additionalValue`: Additional value for add-ons.\n- `additionalValueCurrency`: Currency symbol for the additional value.\n- `checkboxLabel`: Label for the optional checkbox.\n- `checkboxId`: ID for the optional checkbox.\n- `specialDetails`: Array of special details for add-ons.\n\nThe `buttons` object should have the following properties:\n\n- `showMoreButtonLabel`: Label for the \"Show More\" button.\n- `hideProductDetailsLabel`: Label for the \"Hide Details\" button.\n- `buyButtonLabel`: Label for the \"Buy Now\" button.\n- `buyButtonAction`: Callback function for the \"Buy Now\" button.\n- `showMoreAction`: The callback function for control if details section is open or not.\n\nThe `productDetails` object should have the following properties:\n\n- `coveragesContainer`: Array of objects with title and coverages.\n\n## Functionality\n\nThe **ProductCard** component provides the following functionality:\n\n- Display: Renders product information, coverages, add-ons, and buttons.\n- Price Calculation: Calculates the current product price based on selected options.\n- Toggling: Toggles product details and compare state.\n- Action Buttons: Triggers actions for compare and buy buttons.\n\n## Contribution\n\nContributions to the **ProductCard** component are welcomed. If you encounter issues or have suggestions for improvements, feel free to open an issue or submit a pull request on the component's Bitbucket repository.\n","readmeFilename":"README.md"}