Merge pull request #21 from vtex-apps/improvement/element-ids

Improves id attribution
vtex-apps · Oct 23, 2019 · 36f5c46 · 36f5c46
2 parents ceb539d + a7a6713
commit 36f5c46
Show file tree

Hide file tree

Showing 9 changed files with 18 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Changed
+
+- Improvements to `id` attribution of some elements.
+
 ## [0.11.3] - 2019-10-23
 
 ### Added

diff --git a/react/Image.tsx b/react/Image.tsx
@@ -9,7 +9,7 @@ const Image: FunctionComponent = () => {
 
   return (
     <div
-      id={`${item.id}-image`}
+      id={`image-${item.id}`}
       className={opaque(item.availability)}
       style={{ minWidth: '96px' }}
     >

diff --git a/react/Price.tsx b/react/Price.tsx
@@ -20,13 +20,13 @@ const Price: StorefrontFunctionComponent<TextAlignProp> = ({ textAlign }) => {
       <div>
         {item.listPrice !== item.price && (
           <div
-            id={`${item.id}-list-price`}
+            id={`list-price-${item.id}`}
             className="c-muted-1 strike t-mini mb2"
           >
             <FormattedCurrency value={(item.listPrice * item.quantity) / 100} />
           </div>
         )}
-        <div id={`${item.id}-price`} className="div fw6 fw5-m">
+        <div id={`price-${item.id}`} className="div fw6 fw5-m">
           <FormattedPrice value={(item.sellingPrice * item.quantity) / 100} />
         </div>
       </div>

diff --git a/react/ProductBrand.tsx b/react/ProductBrand.tsx
@@ -8,7 +8,7 @@ const ProductBrand: FunctionComponent = () => {
 
   return (
     <div
-      id={`${item.id}-brand-name`}
+      id={`brand-name-${item.id}`}
       className={`ttu f7 fw6 c-muted-1 fw5-m ${opaque(item.availability)}`}
     >
       {item.additionalInfo.brandName}

diff --git a/react/ProductName.tsx b/react/ProductName.tsx
@@ -8,7 +8,7 @@ const ProductName: FunctionComponent = () => {
 
   return (
     <a
-      id={`${item.id}-name`}
+      id={`name-${item.id}`}
       className={`c-on-base t-title lh-copy fw6 no-underline fw5-m ${opaque(
         item.availability
       )}`}

diff --git a/react/ProductVariations.tsx b/react/ProductVariations.tsx
@@ -11,7 +11,7 @@ const ProductVariations: FunctionComponent = () => {
       {item.skuSpecifications.map((spec: SKUSpecification) => {
         return (
           <div
-            id={`${item.id}-${spec.fieldName}-specification`}
+            id={`specification-${item.id}-${spec.fieldName}`}
             key={spec.fieldName}
           >
             {`${spec.fieldName}: ${spec.fieldValues.join(', ')}`}

diff --git a/react/QuantitySelector.tsx b/react/QuantitySelector.tsx
@@ -14,12 +14,12 @@ const QuantitySelector: FunctionComponent = () => {
 
   return (
     <div
-      id={`${item.id}-selector`}
       className={`${opaque(item.availability)} ${styles.quantity} ${
         styles.quantitySelector
       }`}
     >
       <Selector
+        id={item.id}
         value={item.quantity}
         maxValue={MAX_ITEM_QUANTITY}
         onChange={onQuantityChange}

diff --git a/react/UnitPrice.tsx b/react/UnitPrice.tsx
@@ -14,6 +14,7 @@ const UnitPrice: StorefrontFunctionComponent<TextAlignProp> = ({
 
   return item.quantity > 1 && item.sellingPrice > 0 ? (
     <div
+      id={`unit-price-${item.id}`}
       className={`t-mini c-muted-1 lh-title ${styles.quantity} ${opaque(
         item.availability
       )} ${parseTextAlign(textAlign)}`}

diff --git a/react/components/QuantitySelector.tsx b/react/components/QuantitySelector.tsx
@@ -23,6 +23,7 @@ enum SelectorType {
 }
 
 interface Props {
+  id: string
   value: number
   maxValue: number
   onChange: (value: number) => void
@@ -67,6 +68,7 @@ const getDropdownOptions = (maxValue: number, intl: InjectedIntl) => {
 }
 
 const QuantitySelector: FunctionComponent<Props & InjectedIntlProps> = ({
+  id,
   value,
   maxValue,
   onChange,
@@ -129,6 +131,7 @@ const QuantitySelector: FunctionComponent<Props & InjectedIntlProps> = ({
       <div>
         <div className="dn-m">
           <Dropdown
+            id={`quantity-dropdown-mobile-${id}`}
             options={dropdownOptions}
             size="small"
             value={normalizedValue}
@@ -139,6 +142,7 @@ const QuantitySelector: FunctionComponent<Props & InjectedIntlProps> = ({
         </div>
         <div className="dn db-m">
           <Dropdown
+            id={`quantity-dropdown-${id}`}
             options={dropdownOptions}
             value={normalizedValue}
             onChange={(event: any) => handleDropdownChange(event.target.value)}
@@ -153,6 +157,7 @@ const QuantitySelector: FunctionComponent<Props & InjectedIntlProps> = ({
       <div>
         <div className="dn-m">
           <Input
+            id={`quantity-input-mobile-${id}`}
             size="small"
             value={curDisplayValue}
             maxLength={MAX_INPUT_LENGTH}
@@ -165,6 +170,7 @@ const QuantitySelector: FunctionComponent<Props & InjectedIntlProps> = ({
         </div>
         <div className="dn db-m">
           <Input
+            id={`quantity-input-${id}`}
             value={curDisplayValue}
             maxLength={MAX_INPUT_LENGTH}
             onChange={(event: any) => handleInputChange(event.target.value)}