add css handle and update readme

vtex-apps · Mar 6, 2020 · bbf5cc8 · bbf5cc8
1 parent f0bb3a2
commit bbf5cc8
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/docs/README.md b/docs/README.md
@@ -223,6 +223,7 @@ In order to apply CSS customizations in this and other blocks, follow the instru
 | `productPriceContainer`              |
 | `productPriceCurrency`               |
 | `productPrice`                       |
+| `productQuantityUnit`                |
 | `productVariationsContainer`         |
 | `productVariationsItem`              |
 | `quantityDropdownContainer`          |

diff --git a/react/ProductQuantity.tsx b/react/ProductQuantity.tsx
@@ -1,13 +1,17 @@
 import React from 'react'
 import { FormattedMessage } from 'react-intl'
+import { useCssHandles } from 'vtex.css-handles'
 
 import { useItemContext } from './components/ItemContext'
 
+const CSS_HANDLES = ['productQuantityUnit'] as const
+
 const ProductQuantity: React.FC = () => {
   const { item } = useItemContext()
+  const cssHandles = useCssHandles(CSS_HANDLES)
 
   return (
-    <span className="c-muted-1 t-body">
+    <span className={`${cssHandles.productQuantityUnit} c-muted-1 t-body`}>
       <FormattedMessage
         id="store/product-list.quantity-units"
         values={{ quantity: item.quantity }}