diff --git a/CHANGELOG.md b/CHANGELOG.md index f4f66f6..4a23d2d 100644 --- 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 deleted file mode 100644 index 717aa42..0000000 --- a/README.md +++ /dev/null @@ -1,207 +0,0 @@ -# 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) - - [Description](#description) - - [Release schedule](#release-schedule) - - [Table of Contents](#table-of-contents) - - [Concept](#concept) - - [Usage](#usage) - - [Dedicated Icon](#dedicated-icon) - - [Generic Icon](#generic-icon) - - [Icons](#icons) - - [Props](#props) - - [Icons List](#icons-list) - - [Brand](#brand) - - [High Priority Actions](#high-priority-actions) - - [Middle Priority Actions](#middle-priority-actions) - - [Informational](#informational) - - [Navigation](#navigation) - - [Status Indicators](#status-indicators) - - [Customize](#customize) - - [Overwriting the default IconPack](#overwriting-the-default-iconpack) - - [Nomenclature](#nomenclature) - - [Icon Intention](#icon-intention) - - [Troubleshooting](#troubleshooting) - - [Contributing](#contributing) - - [Tests](#tests) - -## 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 `` 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) - -## Usage - -First of all, add into the dependencies of your `manifest.json` and use it as an npm module: - -```json -"dependencies": { - "vtex.store-icons": "0.x" -} -``` - -### Dedicated Icon - -Import the desired icon and use it into your code, for example: - -```js -import { IconMenu } from 'vtex.store-icons' - -const YourComponent = props => ( - -) -``` - -You can see [here](#icon-list) a list of every available icon. - -### Generic Icon - -The API provides a generic icon, The `Icon` component. You can choose from any other icon passing only the `id` from the respective one you want to add. - -For example: - -```js -import { Icon } from 'vtex.store-icons' - -const YourComponent = props => -``` - -⚠️ This component is meant to be used on icons there aren't common throughout the store. Choose [`dedicated`](#dedicated-icon) components whenever possible. - -## Icons - -### Props - -Any icon can receive the following props: - -| Property | Description | Type | Default value | -| --- | --- | --- | --- | -| size | Desired size | `Number` | 16 | -| isActive | desc | `Boolean` | true | -| activeClassName | The className it should have if active | `String` | 🚫 | -| mutedClassName | The className it should have if not active | `String` | 🚫 | - -Obs: **...props**: It is important to notice that any other `` prop passed will work with an icon as well. - -#### Enhanced Props - -Some components support modifiers. These are props that define the icon type, orientation, state or shape. - -| Modifier | Possible values | -| --- | --- | -| type | `filled` `line` `outline` | -| orientation | `up` `down` `left` `right` | -| state | `on` `off` | -| shape | `square` `rounded` `circle` | - -### Icon List - -#### Brand -| Component | id | Type | Orientation | State| Shape | -| --- | --- | --- | --- | --- | --- | -| [IconSocial](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconSocial.js) | `social` | 🚫 | 🚫 | 🚫 | square \| rounded \| circle | - -#### High Priority Actions -| Component | id | Type | Orientation | State| Shape | -| --- | --- | --- | --- | --- | --- | -| [IconArrowBack](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconArrowBack.js) | `arrow-back` | 🚫 | 🚫 | 🚫 | 🚫 | -| [IconAssistantSales](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconAssistantSales.js) |`assistant-sales` | 🚫 | 🚫 | 🚫 | 🚫 | -| [IconProfile](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconProfile.js) | `profile` | 🚫 | 🚫 | 🚫 | 🚫 | -| [IconCart](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconCart.js) | `cart` | 🚫 | 🚫 | 🚫 | 🚫 | -| [IconSearch](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconSearch.js) | `search` | 🚫 | 🚫 | 🚫 | 🚫 | -| [IconDelete](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconDelete.js) | `delete` | 🚫 | 🚫 | 🚫 | 🚫 | -| [IconMenu](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconMenu.js) | `menu` | 🚫 | 🚫 | 🚫 | 🚫 | -| [IconLocationMarker](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconLocationMarker.js) | `location-marker` | 🚫 | 🚫 | 🚫 | 🚫 | - -#### Middle Priority Actions -| Component | id | Type | Orientation | State| Shape | -| --- | --- | --- | --- | --- | --- | -| [IconEyesight](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconEyesight.js) | `eyesight` | filled \| outline | 🚫 | on \| off | 🚫 | -| [IconMinus](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconMinus.js) | `minus` | filled \| outline \| line | 🚫 | 🚫 brands -| [IconPlus](https://github.com/vtex-apps/store-icons/blobrandseact/IconPlus.js) | `plus` | filled \| outline \| line | 🚫 | 🚫 | 🚫 |brands -| [IconSingleItem](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconSingleItem.js) | `single-item` | 🚫 | 🚫 | 🚫 | 🚫 | -| [IconList](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconList.js) | `list` | 🚫 | 🚫 | 🚫 | 🚫 | -| [IconGallery](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconGallery.js) | `gallery` | 🚫 | 🚫 | 🚫 | 🚫 | -| [IconRemove](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconRemove.js) | `remove` | 🚫 | 🚫 | 🚫 | 🚫 | -| [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` | 🚫 | 🚫 | 🚫 | 🚫 | - -#### Informational -| Component | id | Type | Orientation | State| Shape | -| --- | --- | --- | --- | --- | --- | - -#### Navigation -| Component | id | Type | Orientation | State| Shape | -| --- | --- | --- | --- | --- | --- | -| [IconCaret](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconCaret.js) | `caret` | 🚫 | up \| down \| left \| right | 🚫 | 🚫 | true \| false | - -#### Status Indicators -| Component | id | Type | Orientation | State| Shape | -| --- | --- | --- | --- | --- | --- | -| [IconClose](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconClose.js) | `close` | filled \| outline | 🚫 | 🚫 | 🚫 | -| [IconCheck](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconCheck.js) | `check` | filled \| outline \| line | 🚫 | 🚫 | 🚫 | - -## Customize - -In the [usage](#usage) section, we discuss two ways of using icons. These ways extend to customization, so, prefer to change an existing Icon so that you can use the [dedicated](#dedicated-icon) version. You can check how to override and name icons below. - -### 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: - -1. On your [`store-theme`](https://github.com/vtex-apps/store-theme/tree/master/styles) create a new folder called `iconpacks` - -2. Create a file called `iconpack.svg` - -3. Declare your icon IDs (use the default `iconpack` as an example in how to do that properly). - -### Nomenclature - -The naming convention is: [`intention`](#icon-intention)-[`id`](#icon-list)--[`?modifiers`](#enhanced-props) - -Where the `modifiers` follows the rule: -`?type`--`?orientation`--`?state`--`?shape` - -**🤓 ? stands for optional inputs** - -#### Icon Intention -`bnd` **Brand** - Display logos, brands or advertisements. - -`hpa` **High priority actions** - Actions that are important to the global context. - -`mpa` **Mild priority actions** - Actions that are important only to the current component context. - -`inf` **Informational** - Represents information display or actions that, when triggered, reveal further details about the current context. - -`nav` **Navigation** - Actions that triggers navigation. - -`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` diff --git a/ICONPACK.md b/docs/ICONPACK.md similarity index 97% rename from ICONPACK.md rename to docs/ICONPACK.md index d9c5015..daa63a9 100644 --- a/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 index 321e1e0..d365b7a 100644 --- 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 `` 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 `` 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 new file mode 100644 index 0000000..c164823 --- /dev/null +++ b/docs/mpa-bookmark--filled.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/docs/mpa-bookmark--outline.svg b/docs/mpa-bookmark--outline.svg new file mode 100644 index 0000000..fbd1858 --- /dev/null +++ b/docs/mpa-bookmark--outline.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/docs/script/scrap-svg.js b/docs/script/scrap-svg.js index e74e735..b8fac3b 100644 --- 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 new file mode 100644 index 0000000..9cb4f62 --- /dev/null +++ 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 +} + +export default IconBoomark diff --git a/react/package.json b/react/package.json index 41e0c83..fced883 100644 --- 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 index df5cb8b..85be2f1 100644 --- 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 index a1455d0..28af89a 100644 --- 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 index fe1c1d7..f65b6d1 100644 --- a/styles/iconpacks/iconpack.svg +++ b/styles/iconpacks/iconpack.svg @@ -103,6 +103,12 @@ + + + + + +