Merge pull request #42 from vtex-apps/feature/css-handles

victorhmp · web-flow · commit 0624dae6fa69 · 2020-01-30T18:57:00.000-03:00
Add CSS handles
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- CSS handles to all icons.
 
 ## [0.15.0] - 2019-12-27
 ### Added
diff --git a/docs/README.md b/docs/README.md
@@ -1,19 +1,11 @@
+📢 Use this project, [contribute](https://github.com/vtex-apps/store-icons) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).
+
 # Store Icons
 
 [![Build Status](https://travis-ci.org/vtex-apps/store-icons.svg?branch=master)](https://travis-ci.org/vtex-apps/store-icons)
 
-## Description
-
 All Store icons components.
 
-**Disclaimer:** Don't fork this project, use, contribute, or open issue with your feature request.
-
-## Release schedule
-
-| Release |       Status        | Initial Release | Maintenance LTS Start | End-of-life | Store Compatibility |
-| :-----: | :-----------------: | :-------------: | :-------------------: | :---------: | :-----------------: |
-|  [0.x]  | **Current Release** |   2019-01-30    |      -----------      | ----------  |         2.x         |
-
 ## Table of Contents
 
 - [Store Icons](#store-icons)
@@ -197,14 +189,36 @@ Where the `modifiers` follows the rule:
 
 `sti` **Status indicators** - Indicates the current item/component semantic status.
 
-## Troubleshooting
-
-You can check if others are passing through similar issues [here](https://github.com/vtex-apps/store-icons/issues). Also feel free to [open issues](https://github.com/vtex-apps/store-icons/issues/new) or contribute with pull requests.
-
-## Contributing
-
-Check it out [how to contribute](https://github.com/vtex-apps/awesome-io#contributing) with this project.
-
-## Tests
-
-To execute our tests go to `react/` folder and run `yarn test`
+## CSS Customization
+
+In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).
+
+| CSS Handles          |
+| -------------------- |
+| 'arrowBackIcon'      |
+| 'assistantSalesIcon' |
+| 'caretIcon'          |
+| 'cartIcon'           |
+| 'checkIcon'          |
+| 'closeIcon'          |
+| 'deleteIcon'         |
+| 'equalsIcon'         |
+| 'eyeSightIcon'       |
+| 'filterIcon'         |
+| 'globeIcon'          |
+| 'gridIcon'           |
+| 'heartIcon'          |
+| 'homeIcon'           |
+| 'inlineGridIcon'     |
+| 'locationInputIcon'  |
+| 'locationMarkerIcon' |
+| 'menuIcon'           |
+| 'minusIcon'          |
+| 'plusIcon'           |
+| 'profileIcon'        |
+| 'removeIcon'         |
+| 'searchIcon'         |
+| 'singleGridIcon'     |
+| 'socialIcon'         |
+| 'starIcon'           |
+| 'swapIcon'           |
diff --git a/manifest.json b/manifest.json
@@ -9,6 +9,9 @@
     "prereleasy": "yarn && node docs/script/scrap-svg.js",
     "postreleasy": "vtex publish --verbose"
   },
+  "dependencies": {
+    "vtex.css-handles": "0.x"
+  },
   "builders": {
     "react": "3.x",
     "styles": "1.x",
diff --git a/react/IconArrowBack.tsx b/react/IconArrowBack.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import Icon from './components/Icon'
 
 const IconArrowBack = (props: IconProps) => {
-  return <Icon id="hpa-arrow-back" {...props} />
+  return <Icon id="hpa-arrow-back" handle="arrowBackIcon" {...props} />
 }
 
 export default IconArrowBack
diff --git a/react/IconAssistantSales.tsx b/react/IconAssistantSales.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import Icon from './components/Icon'
 
 const IconAssistantSales = (props: IconProps) => {
-  return <Icon id="hpa-telemarketing" {...props} />
+  return <Icon id="hpa-telemarketing" handle="assistantSalesIcon" {...props} />
 }
 
 export default IconAssistantSales
diff --git a/react/IconCaret.tsx b/react/IconCaret.tsx
@@ -7,9 +7,9 @@ const IconCaret = ({ orientation, thin = false, ...props }: CaretProps) => {
   const orientationModifier = getOrientation(orientation)
   const id: string = classnames({
     [`nav-thin-caret${orientationModifier}`]: thin,
-    [`nav-caret${orientationModifier}`]: !thin
+    [`nav-caret${orientationModifier}`]: !thin,
   })
-  return <Icon id={id} {...props} />
+  return <Icon id={id} handle="caretIcon" {...props} />
 }
 
 export default IconCaret
diff --git a/react/IconCart.tsx b/react/IconCart.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import Icon from './components/Icon'
 
 const IconCart = (props: IconProps) => {
-  return <Icon id="hpa-cart" {...props} />
+  return <Icon id="hpa-cart" handle="cartIcon" {...props} />
 }
 
 export default IconCart
diff --git a/react/IconCheck.tsx b/react/IconCheck.tsx
@@ -5,9 +5,7 @@ import Icon from './components/Icon'
 
 const IconCheck = ({ type, ...props }: EnhancedIconProps) => {
   const typeModifier = getType(type)
-  return <Icon id={`sti-check${typeModifier}`} {...props} />
+  return <Icon handle="checkIcon" id={`sti-check${typeModifier}`} {...props} />
 }
 
-
-
 export default IconCheck
diff --git a/react/IconClose.tsx b/react/IconClose.tsx
@@ -5,7 +5,7 @@ import { getType } from './utils/helpers'
 
 const IconClose = ({ type = 'filled', ...props }: EnhancedIconProps) => {
   const typeModifier = getType(type)
-  return <Icon id={`sti-close${typeModifier}`} {...props} />
+  return <Icon handle="closeIcon" id={`sti-close${typeModifier}`} {...props} />
 }
 
 export default IconClose
diff --git a/react/IconDelete.tsx b/react/IconDelete.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import Icon from './components/Icon'
 
 const IconDelete = (props: IconProps) => {
-  return <Icon id="hpa-delete" {...props} />
+  return <Icon id="hpa-delete" handle="deleteIcon" {...props} />
 }
 
 export default IconDelete
diff --git a/react/IconEquals.tsx b/react/IconEquals.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import Icon from './components/Icon'
 
 const IconEquals = (props: IconProps) => {
-  return <Icon id="sti-equals" {...props} />
+  return <Icon id="sti-equals" handle="equalsIcon" {...props} />
 }
 
 export default IconEquals
diff --git a/react/IconEyeSight.tsx b/react/IconEyeSight.tsx
@@ -6,7 +6,13 @@ import { getType, getState } from './utils/helpers'
 const IconEyeSight = ({ type, state, ...props }: EnhancedIconProps) => {
   const typeModifier = getType(type, 'filled, outline')
   const stateModifier = getState(state)
-  return <Icon id={`mpa-eyesight${typeModifier}${stateModifier}`} {...props} />
+  return (
+    <Icon
+      id={`mpa-eyesight${typeModifier}${stateModifier}`}
+      handle="eyeSightIcon"
+      {...props}
+    />
+  )
 }
 
 export default IconEyeSight
diff --git a/react/IconFilter.tsx b/react/IconFilter.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import Icon from './components/Icon'
 
 const IconFilter = (props: IconProps) => {
-  return <Icon id="mpa-filter-settings" {...props} />
+  return <Icon id="mpa-filter-settings" handle="filterIcon" {...props} />
 }
 
 export default IconFilter
diff --git a/react/IconGlobe.tsx b/react/IconGlobe.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import Icon from './components/Icon'
 
 const IconGlobe = (props: IconProps) => {
-  return <Icon id="mpa-globe" {...props} />
+  return <Icon id="mpa-globe" handle="globeIcon" {...props} />
 }
 
 export default IconGlobe
diff --git a/react/IconGrid.tsx b/react/IconGrid.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import Icon from './components/Icon'
 
 const IconGrid = (props: IconProps) => {
-  return <Icon id="mpa-gallery" {...props} />
+  return <Icon id="mpa-gallery" handle="gridIcon" {...props} />
 }
 
 export default IconGrid
diff --git a/react/IconHeart.tsx b/react/IconHeart.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import Icon from './components/Icon'
 
 const IconHeart = (props: IconProps) => {
-  return <Icon id="mpa-heart" {...props} />
+  return <Icon id="mpa-heart" handle="heartIcon" {...props} />
 }
 
 export default IconHeart
diff --git a/react/IconHome.tsx b/react/IconHome.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import Icon from './components/Icon'
 
 const IconHome = (props: IconProps) => {
-  return <Icon id="nav-home" {...props} />
+  return <Icon id="nav-home" handle="homeIcon" {...props} />
 }
 
 export default IconHome
diff --git a/react/IconInlineGrid.tsx b/react/IconInlineGrid.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import Icon from './components/Icon'
 
 const IconInlineGrid = (props: IconProps) => {
-  return <Icon id="mpa-list-items" {...props} />
+  return <Icon id="mpa-list-items" handle="inlineGridIcon" {...props} />
 }
 
 export default IconInlineGrid
diff --git a/react/IconLocationInput.tsx b/react/IconLocationInput.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
 
- import Icon from './components/Icon'
+import Icon from './components/Icon'
 
- const IconLocationInput = (props: IconProps) => {
-  return <Icon id="mpa-location-input" {...props} />
+const IconLocationInput = (props: IconProps) => {
+  return <Icon id="mpa-location-input" handle="locationInputIcon" {...props} />
 }
 
- export default IconLocationInput
+export default IconLocationInput
diff --git a/react/IconLocationMarker.tsx b/react/IconLocationMarker.tsx
@@ -3,7 +3,9 @@ import React from 'react'
 import Icon from './components/Icon'
 
 const IconLocationMarker = (props: IconProps) => {
-  return <Icon id="hpa-location-marker" {...props} />
+  return (
+    <Icon id="hpa-location-marker" handle="locationMarkerIcon" {...props} />
+  )
 }
 
 export default IconLocationMarker
diff --git a/react/IconMenu.tsx b/react/IconMenu.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import Icon from './components/Icon'
 
 const IconMenu = (props: IconProps) => {
-  return <Icon id="hpa-hamburguer-menu" {...props} />
+  return <Icon id="hpa-hamburguer-menu" handle="menuIcon" {...props} />
 }
 
 export default IconMenu
diff --git a/react/IconMinus.tsx b/react/IconMinus.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import Icon from './components/Icon'
 
 const IconMinus = (props: IconProps) => {
-  return <Icon id="nav-minus" {...props} />
+  return <Icon id="nav-minus" handle="minusIcon" {...props} />
 }
 
 export default IconMinus
diff --git a/react/IconPlus.tsx b/react/IconPlus.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import Icon from './components/Icon'
 
 const IconPlus = (props: IconProps) => {
-  return <Icon id="nav-plus" {...props} />
+  return <Icon id="nav-plus" handle="plusIcon" {...props} />
 }
 
 export default IconPlus
diff --git a/react/IconProfile.tsx b/react/IconProfile.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import Icon from './components/Icon'
 
 const IconProfile = (props: IconProps) => {
-  return <Icon id="hpa-profile" {...props} />
+  return <Icon id="hpa-profile" handle="profileIcon" {...props} />
 }
 
 export default IconProfile
diff --git a/react/IconRemove.tsx b/react/IconRemove.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import Icon from './components/Icon'
 
 const IconRemove = (props: IconProps) => {
-  return <Icon id="mpa-remove" {...props} />
+  return <Icon id="mpa-remove" handle="removeIcon" {...props} />
 }
 
 export default IconRemove
diff --git a/react/IconSearch.tsx b/react/IconSearch.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import Icon from './components/Icon'
 
 const IconSearch = (props: IconProps) => {
-  return <Icon id="hpa-search" {...props} />
+  return <Icon id="hpa-search" handle="searchIcon" {...props} />
 }
 
 export default IconSearch
diff --git a/react/IconSingleGrid.tsx b/react/IconSingleGrid.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import Icon from './components/Icon'
 
 const IconSingleGrid = (props: IconProps) => {
-  return <Icon id="mpa-single-item" {...props} />
+  return <Icon id="mpa-single-item" handle="singleGridIcon" {...props} />
 }
 
 export default IconSingleGrid
diff --git a/react/IconSocial.tsx b/react/IconSocial.tsx
@@ -13,7 +13,12 @@ const IconSocial = ({ network, size, background, shape, ...props }: Props) => {
 
   return (
     <span {...wrapperProps}>
-      <Icon id={`bnd-${network}`} size={reducedIconSize} {...props} />
+      <Icon
+        id={`bnd-${network}`}
+        handle="socialIcon"
+        size={reducedIconSize}
+        {...props}
+      />
     </span>
   )
 }
diff --git a/react/IconStar.tsx b/react/IconStar.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import Icon from './components/Icon'
 
 const IconStar = (props: IconProps) => {
-  return <Icon id="inf-star" {...props} />
+  return <Icon id="inf-star" handle="starIcon" {...props} />
 }
 
 export default IconStar
diff --git a/react/IconSwap.tsx b/react/IconSwap.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import Icon from './components/Icon'
 
 const IconSwap = (props: IconProps) => {
-  return <Icon id="mpa-swap" {...props} />
+  return <Icon id="mpa-swap" handle="swapIcon" {...props} />
 }
 
 export default IconSwap
diff --git a/react/__mocks__/vtex.css-handles.ts b/react/__mocks__/vtex.css-handles.ts
@@ -0,0 +1,3 @@
+export function useCssHandles() {
+  return { handle: 'handle' }
+}
diff --git a/react/__tests__/__snapshots__/Icon.test.tsx.snap b/react/__tests__/__snapshots__/Icon.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`Icon should match snapshot 1`] = `
 <DocumentFragment>
   <svg
+    class=" "
     fill="none"
     height="20"
     viewBox="0 0 16 16"
diff --git a/react/components/Icon.tsx b/react/components/Icon.tsx
diff --git a/react/typings/global.d.ts b/react/typings/global.d.ts

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ import React from 'react'`
`3`	`3`	`import Icon from './components/Icon'`
`4`	`4`
`5`	`5`	`const IconArrowBack = (props: IconProps) => {`
`6`		`- return <Icon id="hpa-arrow-back" {...props} />`
	`6`	`+ return <Icon id="hpa-arrow-back" handle="arrowBackIcon" {...props} />`
`7`	`7`	`}`
`8`	`8`
`9`	`9`	`export default IconArrowBack`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ import React from 'react'`
`3`	`3`	`import Icon from './components/Icon'`
`4`	`4`
`5`	`5`	`const IconAssistantSales = (props: IconProps) => {`
`6`		`- return <Icon id="hpa-telemarketing" {...props} />`
	`6`	`+ return <Icon id="hpa-telemarketing" handle="assistantSalesIcon" {...props} />`
`7`	`7`	`}`
`8`	`8`
`9`	`9`	`export default IconAssistantSales`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ import React from 'react'`
`3`	`3`	`import Icon from './components/Icon'`
`4`	`4`
`5`	`5`	`const IconCart = (props: IconProps) => {`
`6`		`- return <Icon id="hpa-cart" {...props} />`
	`6`	`+ return <Icon id="hpa-cart" handle="cartIcon" {...props} />`
`7`	`7`	`}`
`8`	`8`
`9`	`9`	`export default IconCart`
Original file line number	Diff line number	Diff line change
`@@ -5,9 +5,7 @@ import Icon from './components/Icon'`
`5`	`5`
`6`	`6`	`const IconCheck = ({ type, ...props }: EnhancedIconProps) => {`
`7`	`7`	`const typeModifier = getType(type)`
`8`		- return <Icon id={`sti-check${typeModifier}`} {...props} />
	`8`	+ return <Icon handle="checkIcon" id={`sti-check${typeModifier}`} {...props} />
`9`	`9`	`}`
`10`	`10`
`11`		`-`
`12`		`-`
`13`	`11`	`export default IconCheck`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@ import { getType } from './utils/helpers'`
`5`	`5`
`6`	`6`	`const IconClose = ({ type = 'filled', ...props }: EnhancedIconProps) => {`
`7`	`7`	`const typeModifier = getType(type)`
`8`		- return <Icon id={`sti-close${typeModifier}`} {...props} />
	`8`	+ return <Icon handle="closeIcon" id={`sti-close${typeModifier}`} {...props} />
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`export default IconClose`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ import React from 'react'`
`3`	`3`	`import Icon from './components/Icon'`
`4`	`4`
`5`	`5`	`const IconDelete = (props: IconProps) => {`
`6`		`- return <Icon id="hpa-delete" {...props} />`
	`6`	`+ return <Icon id="hpa-delete" handle="deleteIcon" {...props} />`
`7`	`7`	`}`
`8`	`8`
`9`	`9`	`export default IconDelete`