Skip to content

Commit 87e450b

Browse files
victorhmpvictorhmp
authored
Merge pull request #34 from vtex-apps/feature/docs-migration
Docs structure migration
2 parents f1f5f54 + 7f5ebe7 commit 87e450b

File tree

2 files changed

+210
-2
lines changed

2 files changed

+210
-2
lines changed

‎docs/README.md‎

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
# Store Icons
2+
3+
[![Build Status](https://travis-ci.org/vtex-apps/store-icons.svg?branch=master)](https://travis-ci.org/vtex-apps/store-icons)
4+
5+
## Description
6+
7+
All Store icons components.
8+
9+
**Disclaimer:** Don't fork this project, use, contribute, or open issue with your feature request.
10+
11+
## Release schedule
12+
13+
| Release | Status | Initial Release | Maintenance LTS Start | End-of-life | Store Compatibility |
14+
| :-----: | :-----------------: | :-------------: | :-------------------: | :---------: | :-----------------: |
15+
| [0.x] | **Current Release** | 2019-01-30 | ----------- | ---------- | 2.x |
16+
17+
## Table of Contents
18+
19+
- [Store Icons](#store-icons)
20+
- [Description](#description)
21+
- [Release schedule](#release-schedule)
22+
- [Table of Contents](#table-of-contents)
23+
- [Concept](#concept)
24+
- [Usage](#usage)
25+
- [Dedicated Icon](#dedicated-icon)
26+
- [Generic Icon](#generic-icon)
27+
- [Icons](#icons)
28+
- [Props](#props)
29+
- [Icons List](#icons-list)
30+
- [Brand](#brand)
31+
- [High Priority Actions](#high-priority-actions)
32+
- [Middle Priority Actions](#middle-priority-actions)
33+
- [Informational](#informational)
34+
- [Navigation](#navigation)
35+
- [Status Indicators](#status-indicators)
36+
- [Customize](#customize)
37+
- [Overwriting the default IconPack](#overwriting-the-default-iconpack)
38+
- [Nomenclature](#nomenclature)
39+
- [Icon Intention](#icon-intention)
40+
- [Troubleshooting](#troubleshooting)
41+
- [Contributing](#contributing)
42+
- [Tests](#tests)
43+
44+
## Concept
45+
46+
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)
47+
48+
## Usage
49+
50+
First of all, add into the dependencies of your `manifest.json` and use it as an npm module:
51+
52+
```json
53+
"dependencies": {
54+
"vtex.store-icons": "0.x"
55+
}
56+
```
57+
58+
### Dedicated Icon
59+
60+
Import the desired icon and use it into your code, for example:
61+
62+
```js
63+
import { IconMenu } from 'vtex.store-icons'
64+
65+
const YourComponent = props => (
66+
<IconMenu />
67+
)
68+
```
69+
70+
You can see [here](#icon-list) a list of every available icon.
71+
72+
### Generic Icon
73+
74+
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.
75+
76+
For example:
77+
78+
```js
79+
import { Icon } from 'vtex.store-icons'
80+
81+
const YourComponent = props => <Icon id="hpa-cart" />
82+
```
83+
84+
⚠️ This component is meant to be used on icons there aren't common throughout the store. Choose [`dedicated`](#dedicated-icon) components whenever possible.
85+
86+
## Icons
87+
88+
### Props
89+
90+
Any icon can receive the following props:
91+
92+
| Property | Description | Type | Default value |
93+
| --- | --- | --- | --- |
94+
| size | Desired size | `Number` | 16 |
95+
| isActive | desc | `Boolean` | true |
96+
| activeClassName | The className it should have if active | `String` | 🚫 |
97+
| mutedClassName | The className it should have if not active | `String` | 🚫 |
98+
99+
Obs: **...props**: It is important to notice that any other `<svg>` prop passed will work with an icon as well.
100+
101+
#### Enhanced Props
102+
103+
Some components support modifiers. These are props that define the icon type, orientation, state or shape.
104+
105+
| Modifier | Possible values |
106+
| --- | --- |
107+
| type | `filled` `line` `outline` |
108+
| orientation | `up` `down` `left` `right` |
109+
| state | `on` `off` |
110+
| shape | `square` `rounded` `circle` |
111+
112+
### Icon List
113+
114+
#### Brand
115+
| Component | id | Type | Orientation | State| Shape |
116+
| --- | --- | --- | --- | --- | --- |
117+
| [IconSocial](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconSocial.js) | `social` | 🚫 | 🚫 | 🚫 | square \| rounded \| circle |
118+
119+
#### High Priority Actions
120+
| Component | id | Type | Orientation | State| Shape |
121+
| --- | --- | --- | --- | --- | --- |
122+
| [IconArrowBack](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconArrowBack.js) | `arrow-back` | 🚫 | 🚫 | 🚫 | 🚫 |
123+
| [IconAssistantSales](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconAssistantSales.js) |`assistant-sales` | 🚫 | 🚫 | 🚫 | 🚫 |
124+
| [IconProfile](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconProfile.js) | `profile` | 🚫 | 🚫 | 🚫 | 🚫 |
125+
| [IconCart](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconCart.js) | `cart` | 🚫 | 🚫 | 🚫 | 🚫 |
126+
| [IconSearch](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconSearch.js) | `search` | 🚫 | 🚫 | 🚫 | 🚫 |
127+
| [IconDelete](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconDelete.js) | `delete` | 🚫 | 🚫 | 🚫 | 🚫 |
128+
| [IconMenu](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconMenu.js) | `menu` | 🚫 | 🚫 | 🚫 | 🚫 |
129+
| [IconLocationMarker](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconLocationMarker.js) | `location-marker` | 🚫 | 🚫 | 🚫 | 🚫 |
130+
131+
#### Middle Priority Actions
132+
| Component | id | Type | Orientation | State| Shape |
133+
| --- | --- | --- | --- | --- | --- |
134+
| [IconEyesight](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconEyesight.js) | `eyesight` | filled \| outline | 🚫 | on \| off | 🚫 |
135+
| [IconMinus](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconMinus.js) | `minus` | filled \| outline \| line | 🚫 | 🚫 brands
136+
| [IconPlus](https://github.com/vtex-apps/store-icons/blobrandseact/IconPlus.js) | `plus` | filled \| outline \| line | 🚫 | 🚫 | 🚫 |brands
137+
| [IconSingleItem](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconSingleItem.js) | `single-item` | 🚫 | 🚫 | 🚫 | 🚫 |
138+
| [IconList](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconList.js) | `list` | 🚫 | 🚫 | 🚫 | 🚫 |
139+
| [IconGallery](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconGallery.js) | `gallery` | 🚫 | 🚫 | 🚫 | 🚫 |
140+
| [IconRemove](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconRemove.js) | `remove` | 🚫 | 🚫 | 🚫 | 🚫 |
141+
| [IconSwap](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconSwap.js) | `swap` | 🚫 | 🚫 | 🚫 | 🚫 |
142+
| [IconHeart](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconHeart.js) | `heart` | 🚫 | 🚫 | 🚫 | 🚫 |
143+
| [IconGlobe](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconGlobe.js) | `globe` | 🚫 | 🚫 | 🚫 | 🚫 |
144+
145+
#### Informational
146+
| Component | id | Type | Orientation | State| Shape |
147+
| --- | --- | --- | --- | --- | --- |
148+
149+
#### Navigation
150+
| Component | id | Type | Orientation | State| Shape |
151+
| --- | --- | --- | --- | --- | --- |
152+
| [IconCaret](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconCaret.js) | `caret` | 🚫 | up \| down \| left \| right | 🚫 | 🚫 | true \| false |
153+
154+
#### Status Indicators
155+
| Component | id | Type | Orientation | State| Shape |
156+
| --- | --- | --- | --- | --- | --- |
157+
| [IconClose](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconClose.js) | `close` | filled \| outline | 🚫 | 🚫 | 🚫 |
158+
| [IconCheck](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconCheck.js) | `check` | filled \| outline \| line | 🚫 | 🚫 | 🚫 |
159+
160+
## Customize
161+
162+
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.
163+
164+
### Overwriting the default IconPack
165+
166+
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:
167+
168+
1. On your [`store-theme`](https://github.com/vtex-apps/store-theme/tree/master/styles) create a new folder called `iconpacks`
169+
170+
2. Create a file called `iconpack.svg`
171+
172+
3. Declare your icon IDs (use the default `iconpack` as an example in how to do that properly).
173+
174+
### Nomenclature
175+
176+
The naming convention is: [`intention`](#icon-intention)-[`id`](#icon-list)--[`?modifiers`](#enhanced-props)
177+
178+
Where the `modifiers` follows the rule:
179+
`?type`--`?orientation`--`?state`--`?shape`
180+
181+
**🤓 ? stands for optional inputs**
182+
183+
#### Icon Intention
184+
`bnd` **Brand** - Display logos, brands or advertisements.
185+
186+
`hpa` **High priority actions** - Actions that are important to the global context.
187+
188+
`mpa` **Mild priority actions** - Actions that are important only to the current component context.
189+
190+
`inf` **Informational** - Represents information display or actions that, when triggered, reveal further details about the current context.
191+
192+
`nav` **Navigation** - Actions that triggers navigation.
193+
194+
`sti` **Status indicators** - Indicates the current item/component semantic status.
195+
196+
197+
## Troubleshooting
198+
199+
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.
200+
201+
## Contributing
202+
203+
Check it out [how to contribute](https://github.com/vtex-apps/awesome-io#contributing) with this project.
204+
205+
## Tests
206+
207+
To execute our tests go to `react/` folder and run `yarn test`

‎manifest.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@
1111
},
1212
"builders": {
1313
"react": "3.x",
14-
"styles": "1.x"
14+
"styles": "1.x",
15+
"docs": "0.x"
1516
},
1617
"$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
17-
}
18+
}

0 commit comments

Comments
 (0)