Merge pull request #39 from vtex-apps/feature/bookmark

Breno Calazans · web-flow · commit 40ff080d6270 · 2019-12-27T17:09:59.000-03:00
Add Bookmark
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
+- Icon Bookmark.
 
 ## [0.14.0] - 2019-11-22
 ### Added
diff --git a/README.md b/README.md
diff --git a/docs/ICONPACK.md b/docs/ICONPACK.md
@@ -77,6 +77,8 @@ We use a series of prefixes to help us understand what an specific icon means.
 | ![](docs/mpa-clone--outline.svg)  | mpa-clone--outline | 
 | ![](docs/mpa-clone--filled.svg)  | mpa-clone--filled | 
 | ![](docs/mpa-edit--outline.svg)  | mpa-edit--outline | 
+| ![](docs/mpa-bookmark--filled.svg)  | mpa-bookmark--filled | 
+| ![](docs/mpa-bookmark--outline.svg)  | mpa-bookmark--outline | 
 | ![](docs/mpa-edit--filled.svg)  | mpa-edit--filled | 
 | ![](docs/mpa-external-link--line.svg)  | mpa-external-link--line | 
 | ![](docs/mpa-external-link--outline.svg)  | mpa-external-link--outline | 
diff --git a/docs/README.md b/docs/README.md
@@ -43,7 +43,7 @@ All Store icons components.
 
 ## Concept
 
-This project is based on [SVG fragment identifiers](https://css-tricks.com/svg-fragment-identifiers-work/). All store icons are served by Render SDK, and with HTML tag `<use>` we can render a fragment from our icon pack. If you want to know the complete list of fragment SVG's, [see here](https://github.com/vtex-apps/store-icons/blob/master/ICONPACK.md)
+This project is based on [SVG fragment identifiers](https://css-tricks.com/svg-fragment-identifiers-work/). All store icons are served by Render SDK, and with HTML tag `<use>` we can render a fragment from our icon pack. If you want to know the complete list of fragment SVG's, [see here](https://github.com/vtex-apps/store-icons/blob/master/docs/ICONPACK.md)
 
 ## Usage
 
@@ -145,6 +145,7 @@ Some components support modifiers. These are props that define the icon type, or
 | [IconSwap](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconSwap.js)             | `swap`        | 🚫                        | 🚫          | 🚫        | 🚫    |
 | [IconHeart](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconHeart.js)           | `heart`       | 🚫                        | 🚫          | 🚫        | 🚫    |
 | [IconGlobe](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconGlobe.js)           | `globe`       | 🚫                        | 🚫          | 🚫        | 🚫    |
+| [IconBookmark](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconBookmark.js)     | `bookmark`    | filled \| outline         | 🚫          | 🚫        | 🚫    |
 
 #### Navigation
 
@@ -165,7 +166,7 @@ In the [usage](#usage) section, we discuss two ways of using icons. These ways e
 
 ### Overwriting the default IconPack
 
-As mentioned before, all icon IDs are stored at the [iconpack.svg](https://github.com/vtex-apps/store-icons/blob/master/ICONPACK.md) file. You can overwrite the default one by:
+As mentioned before, all icon IDs are stored at the [iconpack.svg](https://github.com/vtex-apps/store-icons/blob/master/docs/ICONPACK.md) file. You can overwrite the default one by:
 
 1. On your [`store-theme`](https://github.com/vtex-apps/store-theme/tree/master/styles) create a new folder called `iconpacks`
 
diff --git a/docs/mpa-bookmark--filled.svg b/docs/mpa-bookmark--filled.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16">
+      <g id="mpa-bookmark--filled">
+        <path d="M3.33333 0C2.05 0 1 0.9 1 2V16L8 13L15 16V2C15 0.9 13.95 0 12.6667 0H3.33333Z" fill="#000000"></path>
+      </g>
+    </svg>
diff --git a/docs/mpa-bookmark--outline.svg b/docs/mpa-bookmark--outline.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16">
+      <g id="mpa-bookmark--outline">
+        <path d="M13 2V13.3L8 11.9L3 13.3V2H13ZM13 0H3C1.9 0 1 0.9 1 2V16L8 14L15 16V2C15 0.9 14.1 0 13 0Z" fill="#000000"></path>
+      </g>
+    </svg>
diff --git a/docs/script/scrap-svg.js b/docs/script/scrap-svg.js
@@ -23,7 +23,7 @@ $('g').toArray().map(element => {
 })
 
 const BASELINE_PATH = path.join(__dirname, 'baseline.md')
-const ICONPACK_PATH = path.join(__dirname, '..', '..', 'ICONPACK.md')
+const ICONPACK_PATH = path.join(__dirname, '..', 'ICONPACK.md')
 
 fs.copyFile(BASELINE_PATH, ICONPACK_PATH, (err) => {
   if (err) throw err
diff --git a/react/IconBookmark.tsx b/react/IconBookmark.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+import Icon from './components/Icon'
+import { getType } from './utils/helpers'
+
+const IconBoomark = ({ type = 'outline', ...props }: EnhancedIconProps) => {
+  const typeModifier = getType(type, 'filled, outline')
+  return <Icon id={`mpa-bookmark${typeModifier}`} {...props} />
+}
+
+export default IconBoomark
diff --git a/react/package.json b/react/package.json
@@ -30,7 +30,7 @@
     "tslint": "^5.11.0",
     "tslint-config-vtex": "^2.0.0",
     "tslint-eslint-rules": "^5.4.0",
-    "typescript": "3.5.2"
+    "typescript": "3.7.3"
   },
   "resolutions": {
     "babel-core": "^7.0.0-bridge.0"
diff --git a/react/yarn.lock b/react/yarn.lock
@@ -4919,10 +4919,10 @@ type-check@~0.3.2:
   dependencies:
     prelude-ls "~1.1.2"
 
-typescript@3.5.2:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.5.2.tgz#a09e1dc69bc9551cadf17dba10ee42cf55e5d56c"
-  integrity sha512-7KxJovlYhTX5RaRbUdkAXN1KUZ8PwWlTzQdHV6xNqvuFOs7+WBo10TQUqT19Q/Jz2hk5v9TQDIhyLhhJY4p5AA==
+typescript@3.7.3:
+  version "3.7.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.3.tgz#b36840668a16458a7025b9eabfad11b66ab85c69"
+  integrity sha512-Mcr/Qk7hXqFBXMN7p7Lusj1ktCBydylfQM/FZCk5glCNQJrCUKPkMHdo9R0MTFWsC/4kPFvDS0fDPvukfCkFsw==
 
 typescript@^3.3.3333:
   version "3.5.3"
diff --git a/store/interfaces.json b/store/interfaces.json
@@ -82,5 +82,8 @@
   },
   "icon-swap": {
     "component": "IconSwap"
+  },
+  "icon-bookmark": {
+    "component": "IconBookmark"
   }
 }
diff --git a/styles/iconpacks/iconpack.svg b/styles/iconpacks/iconpack.svg
@@ -103,6 +103,12 @@
     <g id="mpa-edit--outline">
       <path d="M11.7 0.3C11.3 -0.1 10.7 -0.1 10.3 0.3L0.3 10.3C0.1 10.5 0 10.7 0 11V15C0 15.6 0.4 16 1 16H5C5.3 16 5.5 15.9 5.7 15.7L15.7 5.7C16.1 5.3 16.1 4.7 15.7 4.3L11.7 0.3ZM4.6 14H2V11.4L8 5.4L10.6 8L4.6 14ZM12 6.6L9.4 4L11 2.4L13.6 5L12 6.6Z" fill="currentColor"/>
     </g>
+    <g id="mpa-bookmark--filled">
+      <path d="M3.33333 0C2.05 0 1 0.9 1 2V16L8 13L15 16V2C15 0.9 13.95 0 12.6667 0H3.33333Z" fill="currentColor"/>
+    </g>
+    <g id="mpa-bookmark--outline">
+      <path d="M13 2V13.3L8 11.9L3 13.3V2H13ZM13 0H3C1.9 0 1 0.9 1 2V16L8 14L15 16V2C15 0.9 14.1 0 13 0Z" fill="currentColor"/>
+    </g>
     <g id="mpa-edit--filled">
       <path d="M8.1 3.5L0.3 11.3C0.1 11.5 0 11.7 0 12V15C0 15.6 0.4 16 1 16H4C4.3 16 4.5 15.9 4.7 15.7L12.5 7.9L8.1 3.5Z" fill="currentColor"/>
       <path d="M15.7 3.3L12.7 0.3C12.3 -0.1 11.7 -0.1 11.3 0.3L9.5 2.1L13.9 6.5L15.7 4.7C16.1 4.3 16.1 3.7 15.7 3.3Z" fill="currentColor"/>
