From a2c7f26e894ab3347b3336a94ec0717cde6db4e3 Mon Sep 17 00:00:00 2001 From: "George B. de Lima" <106821144+GeorgeLimaDev@users.noreply.github.com> Date: Fri, 12 May 2023 09:54:15 -0300 Subject: [PATCH] Fixes of i18n on infoCard.md (#1089) #### What problem is this solving? It relates to task [LOC-10581](https://vtex-dev.atlassian.net/browse/LOC-10581) and KR 23Q2-KR1 ([Review all developer portal documentation in English](https://docs.google.com/document/d/1VduAYpjqdazhyGH5DvD9c52pMu1Xfj4RDx48QNjTFU0/edit)). [LOC-10581]: https://vtex-dev.atlassian.net/browse/LOC-10581?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ --- CHANGELOG.md | 2 + docs/InfoCard.md | 109 +++++++++++++++++++++++------------------------ 2 files changed, 56 insertions(+), 55 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index bfca8a4d1..f1732cf3a 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] +### Fixed +- Fixes of i18n on infoCard.md according to task LOC-10581. ## [3.169.1] - 2023-05-11 ### Fixed diff --git a/docs/InfoCard.md b/docs/InfoCard.md index 760eb7bd6..ed9add96d 100644 --- a/docs/InfoCard.md +++ b/docs/InfoCard.md @@ -2,14 +2,13 @@ # Info Card -The `info-card` component groups information related to a single topic. They often include some text, an image, and a call-to-action button. - -![image](https://user-images.githubusercontent.com/284515/70229574-4239a100-1735-11ea-9e30-00b286e03f7c.png) +The `info-card` component groups information on a single topic. It often includes text, an image, and a call-to-action button. +![image](https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-store-components-infocard-0.png) ## Configuration -1. Import the `vtex.store-components` app to your theme's dependencies in the `manifest.json` file, as in the following example: +1. Import the `vtex.store-components` app to your theme dependencies in the `manifest.json` file, as in the following example: ```json "dependencies": { @@ -17,7 +16,7 @@ The `info-card` component groups information related to a single topic. They oft } ``` -2. Add the `info-card` block to the desired page template. +2. Add the `info-card` block to the desired page template. 3. Add the `info-card` block to the same template file using the props stated in the [Props](#props) table. For example: ```json @@ -38,71 +37,71 @@ The `info-card` component groups information related to a single topic. They oft ### Props -| Prop name | Type | Description | Default value | -| --------- | ---- | ----------- | ------------- | -| `blockClass` | `String` | Extra class name for custom styling. | `null` | -| `callToActionLinkTarget` | `LinkTargetEnum` | Where to display the call-to-action component's linked URL, as the name for a browsing context (a tab, window, or iframe) | `"_self"` | -| `callToActionMode` | `CallToActionEnum` | Mode of the call-to-action component. | `"button"` | -| `callToActionText` | `String` | Text displayed inside the call-to-action component. | `""` | -| `callToActionUrl` | `String` | URL of the call-to-action component. | `""` | -| `headline` | `String` | Headline of the Info Card. | `null` | -| `htmlId` | `String` | ID of the container element. | `null` | -| `imageUrl` | `String` | Path to the image used on desktop devices. | `""` | -| `imageActionUrl` | `String` | Redirect URL used when the image component is clicked. | `""` | -| `isFullModeStyle` | `Boolean` | Style of the Info Card component. If `true`, the image component is used as the background and text is displayed over it. | `false` | -| `linkTarget` | `LinkTargetEnum` | Where to display the linked URL when the Info Card component is clicked. | `"_self"` | -| `mobileImageUrl` | `String` | Path to the image used on mobile devices. If empty, the desktop image is used. | `null` | -| `subhead` | `String` | Text to be displayed underneath the headline. If not provided, it will not be rendered. | `null` | -| `textAlignment` | `TextAlignmentEnum` | Text alignment inside the component: `left`, `center` or `right`. This prop is ignored if `isFullModeStyle` is true. | `"left"` | -| `textMode` | `TextModeEnum` | Text mode used to process the text from `headline` and `subhead` props. | `"html"` | -| `textPosition` | `TextPositionEnum` | Position of the text component: `left`, `center` or `right`. | `"left"` | +| Prop name | Type | Description | Default value | +| ------------------------ | ------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------------- | +| `blockClass` | `String` | Extra class name for custom styling. | `null` | +| `callToActionLinkTarget` | `LinkTargetEnum` | Where to display the call-to-action component's linked URL, as the name for a browsing context (a tab, window, or iframe). | `"_self"` | +| `callToActionMode` | `CallToActionEnum` | Mode of the call-to-action component. | `"button"` | +| `callToActionText` | `string` | Text displayed inside the call-to-action component. | `""` | +| `callToActionUrl` | `string` | URL of the call-to-action component. | `""` | +| `headline` | `string` | Headline of the Info Card. | `null` | +| `htmlId` | `string` | ID of the container element. | `null` | +| `imageUrl` | `string` | Path to the image used on desktop devices. | `""` | +| `imageActionUrl` | `string` | Redirect URL used when the image component is clicked. | `""` | +| `isFullModeStyle` | `boolean` | Style of the Info Card component. If `true`, the image component is used as the background, and text is displayed over it. | `false` | +| `linkTarget` | `LinkTargetEnum` | Where to display the linked URL when the Info Card component is clicked. | `"_self"` | +| `mobileImageUrl` | `string` | Path to the image used on mobile devices. If empty, the desktop image is used. | `null` | +| `subhead` | `string` | Text to be displayed underneath the headline. If not provided, it will not be rendered. | `null` | +| `textAlignment` | `TextAlignmentEnum` | Text alignment inside the component: `left`, `center` or `right`. This prop is ignored if `isFullModeStyle` is true. | `"left"` | +| `textMode` | `TextModeEnum` | Text mode used to process the text from `headline` and `subhead` props. | `"html"` | +| `textPosition` | `TextPositionEnum` | Position of the text component: `left`, `center` or `right`. | `"left"` | #### `TextPositionEnum` possible values -| Enum name | Enum value | Description | -| --------- | ---- | ----------- | -| Left | 'left' | Text will be to the left. If `isFullModeStyle` is false, image will be on the right. | -| Center | 'center' | Text will be in the center. Not applicable if `isFullModeStyle` is false. | -| Right | 'right' | Text will be to the right. If `isFullModeStyle` is false, image will be on the left. | +| Enum name | Enum value | Description | +| --------- | ---------- | ---------------------------------------------------------------------------------------- | +| Left | 'left' | Text will be on the left. If `isFullModeStyle` is false, the image will be on the right. | +| Center | 'center' | Text will be in the center. Not applicable if `isFullModeStyle` is false. | +| Right | 'right' | Text will be on the right. If `isFullModeStyle` is false, the image will be on the left. | #### `CallToActionEnum` possible values -| Enum name | Enum value | Description | -| --------- | ---- | ----------- | -| None | `none` | Doesn't render any call-to-action component. | -| Button |`button` | Renders the call-to-action component as a button. | -| Link | `link` | Renders the call-to-action component as a text in a link format. | +| Enum name | Enum value | Description | +| --------- | ---------- | ---------------------------------------------------------------- | +| None | `none` | Does not render any call-to-action components. | +| Button | `button` | Renders the call-to-action component as a button. | +| Link | `link` | Renders the call-to-action component as a text in a link format. | #### `LinkTargetEnum` possible values -These values are the same ones supported by HTML5 anchor tags. For more information, refer to [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) documentation. +These values are the same ones supported by HTML5 anchor tags. For more information, please read the [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) documentation. -| Enum name | Enum value | Description | -| --------- | ---- | ----------- | -| Self (default) | `_self` | Opens the link in the current browsing context. | -| Blank | `_blank` | Opens the link in a new tab, but users can configure browsers to open a new window instead. | -| Parent | `_parent` | Opens the link in the parent browsing context of the current one. If no parent, behaves as `_self`. | -| Top | `_top` | Opens the link in the topmost browsing context (the "highest" context that’s an ancestor of the current one). If no ancestors, behaves as `_self`. | +| Enum name | Enum value | Description | +| -------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Self (default) | `_self` | Opens the link in the current browsing context. | +| Blank | `_blank` | Opens the link in a new tab, but users can configure browsers to open a new window instead. | +| Parent | `_parent` | Opens the link in the parent browsing context of the current one. If there is no parent, it behaves as `_self`. | +| Top | `_top` | Opens the link in the topmost browsing context (the "highest" context that is an ancestor of the current one). If there is no ancestor, it behaves as `_self`. | #### `TextModeEnum` possible values -| Enum name | Enum value | Description | -| --------- | ---- | ----------- | -| HTML | `html` | Uses HTML text for `headline` and `subhead` props. | -| Rich-Text | `rich-text` | Uses markdown text and the [`rich-text` block](https://github.com/vtex-apps/rich-text) for `headline` and `subhead` props. | +| Enum name | Enum value | Description | +| --------- | ----------- | -------------------------------------------------------------------------------------------------------------------------- | +| HTML | `html` | Uses HTML text for `headline` and `subhead` props. | +| Rich Text | `rich-text` | Uses markdown text and the [`rich-text` block](https://github.com/vtex-apps/rich-text) for `headline` and `subhead` props. | ## Customization -To apply CSS customizations in this and other blocks, follow the [Using CSS handles for store customization](https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization) guide. +To apply CSS customizations to this and other blocks, please see the [Using CSS handles for store customization](https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization) guide. -| CSS Handles | -| ---------- | +| CSS Handles | +| ----------------------------- | | `infoCardCallActionContainer` | -| `infoCardCallActionText` | -| `infoCardContainer` | -| `infoCardHeadline` | -| `infoCardImage` | -| `infoCardImageContainer` | -| `infoCardImageLinkWrapper` | -| `infoCardSubhead` | -| `infoCardTextContainer` | +| `infoCardCallActionText` | +| `infoCardContainer` | +| `infoCardHeadline` | +| `infoCardImage` | +| `infoCardImageContainer` | +| `infoCardImageLinkWrapper` | +| `infoCardSubhead` | +| `infoCardTextContainer` |