add specification filter

docs/README.md

@@ -150,7 +150,20 @@ You also can use other blocks to wrap the blocks provided by the Product Specifi
 | Prop name             | Type       | Description            | Default value |
 | --------------------- | ---------- | --------------------- | ------------- |
 | `specificationGroups` | `[string]` | Array of specification group names to be hidden or shown (according to what is defined in the `type` property) by the `product-specification-group` block. | `undefined`            |
-| `type`       | `enum`     | Whether the specification group names passed to the `specificationGroups` prop should be displayed or hidden on the UI. Possible values are: `hide` (hides specification groups declared in the `specificationGroups` prop) or `show` (only shows the specification groups declared in the `specificationGroups` prop). | `undefined`            |
+| `type`       | `enum`     | Whether the specification group names passed to the `specificationGroups` prop should be displayed or hidden on the UI. Possible values are: `hide` (hides specification groups declared in the `specificationGroups` prop) or `show` (only shows the specification groups declared in the `specificationGroups` prop). | `hide`            |
+
+### `product-specification` props
+
+| Prop name | Type     | Description                                                 | Default value |
+| --------- | -------- | ----------------------------------------------------------- | ------------- |
+| `filter`  | `object` | Filters the specifications that should be displayed by the block. | `undefined`    |
+
+- **`filter` object:**
+
+| Prop name             | Type       | Description            | Default value |
+| --------------------- | ---------- | --------------------- | ------------- |
+| `specificationNames` | `[string]` | Array of specification group names to be hidden or shown (according to what is defined in the `type` property) by the `product-specification-group` block. | `undefined`            |
+| `type`       | `enum`     | Whether the specification group names passed to the `specificationNames` prop should be displayed or hidden on the UI. Possible values are: `hide` (hides specification groups declared in the `specificationNames` prop) or `show` (only shows the specification groups declared in the `specificationNames` prop). | `hide`            |
 
 #### `product-specification-text` props
 

react/ProductSpecification.tsx

@@ -2,17 +2,34 @@ import React, { FC, useContext } from 'react'
 import { Specification } from 'vtex.product-context'
 
 import { useProductSpecificationGroup } from './ProductSpecificationGroup'
+import { filterSpecification, identityNoop } from './utils/filterSpecifications'
 
-const ProductSpecificationGroup: FC = ({ children }) => {
+interface ProductSpecificationGroupProps {
+  filter?: {
+    type: 'hide' | 'show'
+    specificationNames: string[]
+  }
+}
+
+
+const ProductSpecificationGroup: FC<ProductSpecificationGroupProps> = ({ children, filter = {type: 'show', specificationNames: []} }) => {
   const group = useProductSpecificationGroup()
 
   if (!group) {
     return null
   }
+
+  const specifications = filterSpecification({
+    specifications: group.specifications,
+    filters: {
+      hide: filter.type === 'show' ? (specification: string) => filter.specificationNames.includes(specification) : identityNoop,
+      show: filter.type === 'hide' ? (specification: string) => !filter.specificationNames.includes(specification) : identityNoop
+    }
+  })
 
   return (
     <>
-      {group.specifications.map((specification, index) => (
+      {specifications.map((specification, index) => (
         <ProductSpecificationProvider key={index} specification={specification}>
           {children}
         </ProductSpecificationProvider>

react/package.json

@@ -20,7 +20,7 @@
     "@vtex/tsconfig": "^0.4.4",
     "apollo-cache-inmemory": "^1.6.5",
     "graphql": "^14.6.0",
-    "typescript": "3.8.3",
+    "typescript": "3.9.7",
     "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@0.4.2/public/@types/vtex.css-handles",
     "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.111.1/public/@types/vtex.render-runtime"
   }

react/utils/filterSpecifications.ts

@@ -0,0 +1,18 @@
+import { Specification } from "vtex.product-context"
+
+type noopFunction = <T extends any>(x: T) => T
+export const identityNoop = <T extends any>(x: T) => x // type the generics better, if possible.
+
+type specificationFilterFunction = (specificationName: string) => boolean
+
+interface UseFilterSpecification {
+  specifications: Array<Specification>
+  filters: {
+    show: specificationFilterFunction | noopFunction ,
+    hide: specificationFilterFunction | noopFunction,
+  }
+}
+
+export const filterSpecification = ({ specifications, filters: { show, hide } }: UseFilterSpecification) =>{ 
+   return specifications.filter(({ originalName }) => show(originalName) && hide(originalName))
+}

react/yarn.lock

@@ -5282,12 +5282,7 @@ typedarray-to-buffer@^3.1.5:
   dependencies:
     is-typedarray "^1.0.0"
 
-typescript@3.8.3:
-  version "3.8.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.8.3.tgz#409eb8544ea0335711205869ec458ab109ee1061"
-  integrity sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==
-
-typescript@^3.9.7:
+typescript@3.9.7, typescript@^3.9.7:
   version "3.9.7"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa"
   integrity sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==