Skip to content

Commit

Permalink
Merge pull request #72 from vtex-apps/loc/fix/10797
Browse files Browse the repository at this point in the history 
Fixes of i18n on readme.md
  • Loading branch information
@carolinamenezes
carolinamenezes authored Jun 13, 2023
2 parents fba2f74 + 871f7c9 commit 354c773
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 35 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.

## [Unreleased]

### Fixed

- Fixes of i18n on readme file.

## [0.16.2] - 2022-06-13
### Fixed
- Removed transition from in `"Overlay"`.
Expand Down
76 changes: 41 additions & 35 deletions docs/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,29 @@
📢 Use this project, [contribute](https://github.com/vtex-apps/drawer) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).

# Store Drawer
# Drawer

<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->

This component allows you to have a sliding drawer for your menus. This is specially handy for mobile layouts.
The **Drawer** component is a sliding panel that displays additional options and menus when expanded. It is typically used in mobile layouts and responsive web designs where screen space is limited.

![drawer](https://github.com/vtex-apps/reviews-and-ratings/assets/60782333/46358b77-e41a-4014-8443-c65cbe947fc2)

When closed, the **Drawer** component is represented by an icon button positioned at the edge of the screen. Upon interaction, the drawer slides into view, revealing its content. Users can interact with the exposed content, perform actions, and navigate menus. To dismiss the drawer, users can either tap outside the drawer or use the close button.

## Configuration

Add the app to your theme's dependencies on the `manifest.json`, for example:
1. Open your store theme in the code editor of your preference.
2. Open the `manifest.json` file and add the `vtex.store-drawer` app to your store theme dependencies as in the following:

```json
"dependencies": {
"vtex.store-drawer": "0.x"
}
```

Then, you need to add the `drawer` block into your app. The following is an example taken from [Store Theme](https://github.com/vtex-apps/store-theme).
2. Add the `drawer` block to your app. The following example is from the [Store Theme](https://github.com/vtex-apps/store-theme).

```json
"drawer": {
Expand All @@ -39,7 +44,7 @@ Then, you need to add the `drawer` block into your app. The following is an exam
},
```

There is also a block that can be used for customizing the icon that triggers the opening of the drawer, it's called `"drawer-trigger"` and can be used as follows:
3. Use the `drawer-trigger` block to customize the icon that triggers the opening of the drawer as follows:

```json
"drawer": {
Expand All @@ -57,7 +62,7 @@ There is also a block that can be used for customizing the icon that triggers th
"props": {
"text": "Open drawer"
}
}
}

"menu#drawer": {
"children": [
Expand All @@ -71,11 +76,10 @@ There is also a block that can be used for customizing the icon that triggers th
},
```

And there is a block that enables customization of the header that contains the button which closes the drawer.
It's called `"drawer-header"` and can be used in a similar way as `"drawer-trigger"`, here is an example:
4. Use the `drawer-header` block to customize the header containing the button that closes the drawer. For example:

```jsonc
// inside blocks.json
```json
// blocks.json
{
"drawer": {
"blocks": ["drawer-header#my-drawer"]
Expand All @@ -91,10 +95,12 @@ It's called `"drawer-header"` and can be used in a similar way as `"drawer-trigg
}
```

If you're using this component by itself, you just need to import it inside the component you want to use it in. Here's an example:
### Using the Drawer as a standalone component

If you are using this component as a standalone module, you will need to import it into the specific component where you want to use it. For example:

```tsx
import { Drawer, DrawerHeader, DrawerCloseButton } from 'vtex.store-drawer'
import { Drawer, DrawerHeader, DrawerCloseButton } from "vtex.store-drawer";

const Menu = () => (
<Drawer
Expand All @@ -113,42 +119,42 @@ const Menu = () => (
<li>Link 6</li>
</ul>
</Drawer>
)
);
```

## Configuration
### Props

The `drawer` block accepts a few props that allow you to customize it.
#### `drawer`

| Prop name | Type | Description | Default value |
| -------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | -------------- |
| `maxWidth` | `number` or `string` | Define the open Drawer's maximum width. | `450` |
| `isFullWidth` | `Boolean` | Control whether or not the open Drawer should occupy the full available width. | `false` |
| `slideDirection` | `'horizontal'`&#124;`'vertical'`&#124;`'rightToLeft'`&#124;`'leftToRight'` | Controls the opening animation's direction. | `'horizontal'` |
| `backdropMode` | `'default'`&#124;`'none'` | Controls if it should display the backdrop when the Drawer is open |
| `renderingStrategy` | `'lazy'`&#124;`'eager'` | Controls if it should render the children only when clicked (`lazy`) or as soon as the page loads (`eager`). Enabling the `eager` strategy may increase SEO performance, but the page may be rendered slower | `'lazy'`
| `customPixelEventId` | `string` | Store event ID responsible for triggering the `drawer` to automatically open itself on the interface. | `undefined` |
| `customPixelEventName` | `string` | Store event name responsible for triggering the `drawer` to automatically open itself on the interface. Some examples are: `'addToCart'` and `'removeFromCart'` events. Notice that using this prop will make the drawer open in **every** event with the specified name if no `customPixelEventId` is specified. | `undefined` |
| Prop name | Type | Description | Default value |
| ---------------------- | -------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `maxWidth` | `number` or `string` | Defines the maximum width of the open drawer. | `450` |
| `isFullWidth` | `boolean` | Controls whether the open drawer should occupy the full available width. | `false` |
| `slideDirection` | `'horizontal'`&#124;`'vertical'`&#124;`'rightToLeft'`&#124;`'leftToRight'` | Controls the direction of the opening animation for the drawer. | `'horizontal'` |
| `backdropMode` | `'default'`&#124;`'none'` | Controls whether the backdrop should be displayed when the drawer is open. | |
| `renderingStrategy` | `'lazy'`&#124;`'eager'` | Controls the rendering strategy for the children of the drawer component. It determines whether the children should be rendered only when the drawer is clicked (`lazy`) or immediately when the page loads (`eager`). Enabling the `eager` strategy may improve SEO performance. However, it may also result in slower page rendering. | `'lazy'` |
| `customPixelEventId` | `string` | Defines the store event ID responsible for triggering the `drawer` to automatically open on the interface. | `undefined` |
| `customPixelEventName` | `string` | Defines the store event name responsible for triggering the `drawer` to automatically open on the interface. Some examples are: `'addToCart'` and `'removeFromCart'` events. Note that if no `customPixelEventId` is set, using this prop will cause the drawer to open in every event with the specified name. | `undefined` |

The `drawer-close-button` block accepts the following props to customize it:
#### `drawer-close-button`

| Prop name | Type | Description | Default value |
| --------- | ------------------------ | --------------------------------------------- | ------------- |
| `size` | `Number` | Define the size of the icon inside the button | `30` |
| `type` | `'filled'`&#124;`'line'` | Define the type of the icon | `'line'` |
| `text` | `String` | Define the text inside the button. If `text` is defined, the icon will not be rendered. | `undefined` |
| Prop name | Type | Description | Default value |
| --------- | ------------------------ | -------------------------------------------------------------------------------------- | ------------- |
| `size` | `number` | Defines the size of the icon inside the button. | `30` |
| `type` | `'filled'`&#124;`'line'` | Defines the type of the icon. | `'line'` |
| `text` | `string` | Defines the text inside the button. The icon will not be rendered if `text` is defined. | `undefined` |

The `drawer-trigger` block accepts the following prop to customize it:
#### `drawer-trigger`

| Prop name | Type | Description | Default value |
| -------------------- | -------- | --------------------------------------------------------------------- | ------------- |
| Prop name | Type | Description | Default value |
| -------------------- | -------- | ---------------------------------------------------------------------------------- | ------------- |
| `customPixelEventId` | `string` | Defines the event ID to be sent whenever users interact with the Drawer component. | `undefined` |

## 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).
In order to apply CSS customizations to this and other blocks, follow the instructions in [Using CSS handles for store customizations](https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization).

| CSS Handles |
| CSS handles |
| ------------------------ |
| `drawer` |
| `opened` |
Expand Down

0 comments on commit 354c773

Please sign in to comment.