diff --git a/guides/v2.2/pattern-library/containers/slideouts-modals-overlays/slideouts-modals-overalys.md b/guides/v2.2/pattern-library/containers/slideouts-modals-overlays/slideouts-modals-overalys.md index 677f911413b..67a49974e4e 100644 --- a/guides/v2.2/pattern-library/containers/slideouts-modals-overlays/slideouts-modals-overalys.md +++ b/guides/v2.2/pattern-library/containers/slideouts-modals-overlays/slideouts-modals-overalys.md @@ -32,12 +32,12 @@ _Example of panel animation_ The active panel should include the following elements: -* Content container (Panel) -* A Page title -* Close control "×" (ESC-key via keyboard) -* Button bar for actions, including a "Cancel" (ESC-key is Cancel via keyboard) -* Page content -* "Shade" to disable lower level page +* Content container (Panel) +* A Page title +* Close control "×" (ESC-key via keyboard) +* Button bar for actions, including a "Cancel" (ESC-key is Cancel via keyboard) +* Page content +* "Shade" to disable lower level page ![Example of active panel positioned over "parent"](img/slideout-panel2.png) @@ -82,7 +82,7 @@ If the form in slide-in panel creates new entities, or changes existing ones (Cr Clicking that button will: 1. Validate the form in Slideout. If form has errors, it will show the error messages following the Error Messaging Pattern. If no errors found, it will: -2. Close the Slideout and apply changes immediately (entity will be created in the database, for example). +1. Close the Slideout and apply changes immediately (entity will be created in the database, for example). ### Extend Form @@ -91,7 +91,7 @@ Clicking that button will: If the Slideout panel is a part of the form, extending it (like Advanced Inventory, or Advanced Pricing), primary action should be labeled as "Done". Clicking it will: 1. Validate the form in Slideout. If form has errors, it will show the error messages following the Error Messaging Pattern. If no errors found, it will: -2. Close the Slideout and save the contents of its form. User still has to click "Save" button on the main form to apply changes. +1. Close the Slideout and save the contents of its form. User still has to click "Save" button on the main form to apply changes. Clicking "Cancel" or clicking "×" or clicking outside of the panel (passive close) in both cases should reset contents of the current level Slideout form to default state. If user made changes to a form, he is presented with the modal window to confirm Cancellation: @@ -133,12 +133,12 @@ _Example of a Confirmation Modal_ The active modal should include the following elements: -* Content container (Modal Window) -* A Title -* Close control "×" (ESC-key via keyboard) -* Page content -* Call to action(s), including "Cancel" (ESC-key is Cancel via keyboard) -* "Shade" to disable lower level page +* Content container (Modal Window) +* A Title +* Close control "×" (ESC-key via keyboard) +* Page content +* Call to action(s), including "Cancel" (ESC-key is Cancel via keyboard) +* "Shade" to disable lower level page ### Cancel and Close controls @@ -168,10 +168,10 @@ _Sample of progress bar in modal_ Modal windows are implemented by the following Magento [jQuery](https://glossary.magento.com/jquery) widgets: -* [modal]({{ page.baseurl }}/javascript-dev-guide/widgets/widget_modal.html) -* [alert]({{ page.baseurl }}/javascript-dev-guide/widgets/widget_alert.html) (extends modal) -* [confirm]({{ page.baseurl }}/javascript-dev-guide/widgets/widget_confirm.html) (extends modal) -* [prompt]({{ page.baseurl }}/javascript-dev-guide/widgets/widget_prompt.html) (extends modal) +* [modal]({{ page.baseurl }}/javascript-dev-guide/widgets/widget_modal.html) +* [alert]({{ page.baseurl }}/javascript-dev-guide/widgets/widget_alert.html) (extends modal) +* [confirm]({{ page.baseurl }}/javascript-dev-guide/widgets/widget_confirm.html) (extends modal) +* [prompt]({{ page.baseurl }}/javascript-dev-guide/widgets/widget_prompt.html) (extends modal) ## Overlays @@ -223,8 +223,8 @@ _Data-table with Confirmation Message_ ## Assets -* [Download Slide-out Panels PSD source](src/Slide-out-Panels.psd) -* [Download Modal PSD source](src/Modal.psd) +* [Download Slide-out Panels PSD source](src/Slide-out-Panels.psd) +* [Download Modal PSD source](src/Modal.psd) ## Technical Implementation diff --git a/guides/v2.2/pattern-library/controls/Expandable_Sections/expand-collapse.md b/guides/v2.2/pattern-library/controls/Expandable_Sections/expand-collapse.md index 600b5fc057c..8cfeb370551 100644 --- a/guides/v2.2/pattern-library/controls/Expandable_Sections/expand-collapse.md +++ b/guides/v2.2/pattern-library/controls/Expandable_Sections/expand-collapse.md @@ -17,36 +17,36 @@ Required fields should not be located within a collapsed section, as this increa ### Position and dimensions -* Expandable sections can exist with or without a left sidebar. -* A level 1 expandable section has 24px top padding and 30px bottom padding of the section title. -* Level 2, 3, and 4 expandable sections have 18px top and bottom padding of the section title. Each expandable sub-section is indented by 40px. +* Expandable sections can exist with or without a left sidebar. +* A level 1 expandable section has 24px top padding and 30px bottom padding of the section title. +* Level 2, 3, and 4 expandable sections have 18px top and bottom padding of the section title. Each expandable sub-section is indented by 40px. ![Specs](img/specs.png) -* If the expandable section belongs to a [layout](https://glossary.magento.com/layout) with a sidebar, and the content area contains forms, then the form field starts at the 7th column for level 2 and at 8th column for levels 3 and 4. -* The content areas in the expandable section have 30px padding at the top and bottom. _The current design proposal accommodates 4 levels of nested expandable sections._ +* If the expandable section belongs to a [layout](https://glossary.magento.com/layout) with a sidebar, and the content area contains forms, then the form field starts at the 7th column for level 2 and at 8th column for levels 3 and 4. +* The content areas in the expandable section have 30px padding at the top and bottom. _The current design proposal accommodates 4 levels of nested expandable sections._ ### Visual appearance -* A simple expandable section is a container with a border, section header, and a toggle arrow (right aligned) to control the showing and hiding of content. +* A simple expandable section is a container with a border, section header, and a toggle arrow (right aligned) to control the showing and hiding of content. ![Simple expandable section](img/simple.png) -* A nested expandable section is a sub-section within an expandable section. The nested expandable section has all the same features as the "simple" expandable section, however the expand and collapse control is located on the left. This is to help the User more easily identify the expandable sub-sections within an expanded section. +* A nested expandable section is a sub-section within an expandable section. The nested expandable section has all the same features as the "simple" expandable section, however the expand and collapse control is located on the left. This is to help the User more easily identify the expandable sub-sections within an expanded section. ![Nested section](img/nested.png) -* When expanded, the control (chevron symbol) points upward, and it points downward when closed or collapsed. This indicates the direction the section will expand or collapse when clicked. +* When expanded, the control (chevron symbol) points upward, and it points downward when closed or collapsed. This indicates the direction the section will expand or collapse when clicked. -* The section deader title font size is 17px semibold. +* The section deader title font size is 17px semibold. ## Functional behavior -* Expandable sections should expand to become visible when the heading or toggle arrow is clicked. -* Several expandable sections can be kept open at the same time. -* When a page contains several expandable sections, all sections remain collapsed by default. -* Once the user expands or collapses a few panels, the system remembers the panels states and on a return visit the same states are displayed. -* For nested panels, if a section is collapsed, all "nested" expandable sections within that section should be collapsed as well. +* Expandable sections should expand to become visible when the heading or toggle arrow is clicked. +* Several expandable sections can be kept open at the same time. +* When a page contains several expandable sections, all sections remain collapsed by default. +* Once the user expands or collapses a few panels, the system remembers the panels states and on a return visit the same states are displayed. +* For nested panels, if a section is collapsed, all "nested" expandable sections within that section should be collapsed as well. ## Variations @@ -54,11 +54,11 @@ Required fields should not be located within a collapsed section, as this increa ![Simple section](img/simple_exp.png) -2. Nested – section that contains one or more expandable sub-sections. +1. Nested – section that contains one or more expandable sub-sections. ![Nested section](img/nested_exp.png) -3. Single expandable – section that contains only one expandable section; usually used to hide additional information. +1. Single expandable – section that contains only one expandable section; usually used to hide additional information. ![Single expandable section](img/single_exp.png) diff --git a/guides/v2.2/pattern-library/controls/button-bar/button-bar.md b/guides/v2.2/pattern-library/controls/button-bar/button-bar.md index 5bb034d2fa5..022cae9c112 100644 --- a/guides/v2.2/pattern-library/controls/button-bar/button-bar.md +++ b/guides/v2.2/pattern-library/controls/button-bar/button-bar.md @@ -8,27 +8,27 @@ For solutions not described in this article, please refer to other related patte ## When to Use -* When page level actions are necessary. +* When page level actions are necessary. ## When Not to Use -* When there is already a button bar. -* When there is a wizard bar. -* When buttons are needed but they are not page level buttons. +* When there is already a button bar. +* When there is a wizard bar. +* When buttons are needed but they are not page level buttons. ## Rules ### General Rules -* Only one button bar is allowed per page. -* Either use a button bar or a wizard bar. Both cannot be on the page. -* The buttons within the button bar must be one of the page-level buttons from [buttons pattern](../buttons/buttons.html). -* All the buttons in button bar should be visible at all time. +* Only one button bar is allowed per page. +* Either use a button bar or a wizard bar. Both cannot be on the page. +* The buttons within the button bar must be one of the page-level buttons from [buttons pattern](../buttons/buttons.html). +* All the buttons in button bar should be visible at all time. ### Location -* Button bar can be used in a page or a slide-in panel. -* Its location in either scenario must be right below the page title or the slide-in panel title. +* Button bar can be used in a page or a slide-in panel. +* Its location in either scenario must be right below the page title or the slide-in panel title. #### Button Bar Position in Page @@ -40,18 +40,18 @@ For solutions not described in this article, please refer to other related patte ### Page Level Button Order and Priority - General Rules -* There should never be more than one primary page level button on a single page. -* Primary page level buttons should always be placed on the far right of the button order. -* If a Back button is present, it should always fall on the far left of the button order. -* Buttons should be ordered by group as specified below. In situations where button groups do not apply, they should be ordered by importance. +* There should never be more than one primary page level button on a single page. +* Primary page level buttons should always be placed on the far right of the button order. +* If a Back button is present, it should always fall on the far left of the button order. +* Buttons should be ordered by group as specified below. In situations where button groups do not apply, they should be ordered by importance. ### Ordering of Button Bar Page level buttons can be logically grouped as follows: -* Regress -* Remove -* Progress +* Regress +* Remove +* Progress Groups can contain multiple CTAs but only one primary CTA. Groups should follow the below order: @@ -72,7 +72,7 @@ All buttons should be right aligned. The button bar is spread across 12 columns ## Recommendation 1. It is recommended that all buttons in button bar should only be in one line. Because the button bar is in fluid grid, it is possible for the buttons to be wrap around to the next line. -2. If you have multiple page-level buttons. We recommend using the split button rather having too many buttons that will clutter the page. +1. If you have multiple page-level buttons. We recommend using the split button rather having too many buttons that will clutter the page. ![](img/button-bar-with-splitbutton.jpg) diff --git a/guides/v2.2/pattern-library/displaying-data/tree/tree.md b/guides/v2.2/pattern-library/displaying-data/tree/tree.md index 8ddcab87272..ddc763e9a2a 100644 --- a/guides/v2.2/pattern-library/displaying-data/tree/tree.md +++ b/guides/v2.2/pattern-library/displaying-data/tree/tree.md @@ -82,9 +82,9 @@ Icons should always be placed on the left of the icon label and Icons should NOT Select All is the default state for tree with multi select functionality. When this functionality is triggered: -* All checkboxes are checked -* Complete tree DOESN’T highlight -* "Select All" link changes to "Clear All". +* All checkboxes are checked +* Complete tree DOESN’T highlight +* "Select All" link changes to "Clear All". When Clear All functionality is triggered – All the checkboxes are deselected. The "Clear All" link is only shown when everything is selected. @@ -96,25 +96,25 @@ _Note:_ The "Expand All/Collapse All" control can appear simultaneously with the #### Select Indicators -* Partial Selection – this appears when a parent has items BOTH in checked and unchecked states. Partial selection only occurs at anchor level -* Unchecked State – Item not selected and can be clicked for selection -* Checked State – item selected and can be unchecked for de-selection -* Unchecked and Inactive – this state appears when the item is unselected and not active -* Checked and Inactive – this state appears when the item is selected and not active. +* Partial Selection – this appears when a parent has items BOTH in checked and unchecked states. Partial selection only occurs at anchor level +* Unchecked State – Item not selected and can be clicked for selection +* Checked State – item selected and can be unchecked for de-selection +* Unchecked and Inactive – this state appears when the item is unselected and not active +* Checked and Inactive – this state appears when the item is selected and not active. ![](img/states.jpg) *3. Checking a checkbox for a child item should automatically change its parent state to:* -* Partially selected – if parent also contains unchecked children -* Checked – if all checkboxes for all children are in "checked" state -* Unchecked – if all children are in "unchecked" state. +* Partially selected – if parent also contains unchecked children +* Checked – if all checkboxes for all children are in "checked" state +* Unchecked – if all children are in "unchecked" state. *4. Checking a checkbox for a Parent item should automatically change its child state to:* -* Checked – if the parent state is changed from "unchecked" to "checked" state -* Unchecked – if the parent state is changed from "checked" to "unchecked" state -* Partial Selection – if parent has a partial selection state, clicking on it will deselect all the child items. +* Checked – if the parent state is changed from "unchecked" to "checked" state +* Unchecked – if the parent state is changed from "checked" to "unchecked" state +* Partial Selection – if parent has a partial selection state, clicking on it will deselect all the child items. ## Drag and Arrange @@ -172,7 +172,7 @@ The 'Add' triggers should be placed above the tree container area. (Note: the ou There are two types of items that can be added: 1. *A Group item* This is the parent item, which means there can be children. Example: a folder for the media [library](https://glossary.magento.com/library) or a new [category](https://glossary.magento.com/category). The group item can also be added to another parent group. This allows for n-level tree. -2. *An item* This is the child. Example: a media item or a sub-category. The child item will be added to whichever parent is selected or to the same parent as sibling. +1. *An item* This is the child. Example: a media item or a sub-category. The child item will be added to whichever parent is selected or to the same parent as sibling. The "add child" button should always have more importance than the "add parent" button. diff --git a/guides/v2.2/pattern-library/feedbackToUser/progressIndicator/progressIndicator.md b/guides/v2.2/pattern-library/feedbackToUser/progressIndicator/progressIndicator.md index 2703ba49edd..b5e0d2c0da4 100644 --- a/guides/v2.2/pattern-library/feedbackToUser/progressIndicator/progressIndicator.md +++ b/guides/v2.2/pattern-library/feedbackToUser/progressIndicator/progressIndicator.md @@ -8,18 +8,18 @@ The use of progress indicator should follow this guideline. ## When to Use -* Use when needing to provide feedback to the user that a process is running, especially when user initiate the process. -* When a percentage of completion can be shown and the process , use a progress bar. -* When a percentage of completion cannot be shown or the process is relatively short, use a spinner. +* Use when needing to provide feedback to the user that a process is running, especially when user initiate the process. +* When a percentage of completion can be shown and the process , use a progress bar. +* When a percentage of completion cannot be shown or the process is relatively short, use a spinner. ## When Not to Use -* When process' progress communicates well enough on its own. -* When process completes so quickly that it is distracting to show progress. If the task takes less than 500ms. -* When the process waits for the user to complete the task. -* When the user doesn't need to know something is happening -* When the process operates in the background and doesn't block user activity, progress indicator can be used but is not necessary. -* When you can use content from the operation to visualize progress. +* When process' progress communicates well enough on its own. +* When process completes so quickly that it is distracting to show progress. If the task takes less than 500ms. +* When the process waits for the user to complete the task. +* When the user doesn't need to know something is happening +* When the process operates in the background and doesn't block user activity, progress indicator can be used but is not necessary. +* When you can use content from the operation to visualize progress. ## Behavior @@ -32,8 +32,8 @@ Spinner is a gif image. ![](img/Spinner-lg.gif) 1. Process is triggered -2. Show spinner - To avoid flickering, if a process generally takes 2 seconds to complete, but can be completed under 500ms. Delay 500ms before showing the spinner. -3. Once process is completed, the spinner disappear along with other indicative elements depending on the context. +1. Show spinner - To avoid flickering, if a process generally takes 2 seconds to complete, but can be completed under 500ms. Delay 500ms before showing the spinner. +1. Once process is completed, the spinner disappear along with other indicative elements depending on the context. ### Progress Bar @@ -47,19 +47,19 @@ In general, it is not recommended to use the progress bar if the process can be This process trigger is what the user tell system to start process. It can be anything depending on the context such as a button or a drop action. -2. **Starting State** +1. **Starting State** ![](img/progressbar-starting-state.png) -3. **Progressing** +1. **Progressing** ![](img/progressbar-progressing.png) -4. **Success** +1. **Success** Once success, the page should refresh to show success status. The success status and behavior will depend on context of the scenario. (ie. open new page, stay on the same page, success message, etc.) -5. **Failed** +1. **Failed** The progress bar will disappeared and is replaced with this error message. diff --git a/guides/v2.2/pattern-library/getting-user-input/image_uploader/image_uploader.md b/guides/v2.2/pattern-library/getting-user-input/image_uploader/image_uploader.md index 0a2f45171a8..ca578a9a0da 100644 --- a/guides/v2.2/pattern-library/getting-user-input/image_uploader/image_uploader.md +++ b/guides/v2.2/pattern-library/getting-user-input/image_uploader/image_uploader.md @@ -15,8 +15,8 @@ This pattern should be used specifically to upload images, and not to upload doc ## Variations 1. Upload Single Image -2. Upload Multiple Images -3. Upload Video Content +1. Upload Multiple Images +1. Upload Video Content ## Behavior diff --git a/guides/v2.2/pattern-library/graphics/iconography/iconography.md b/guides/v2.2/pattern-library/graphics/iconography/iconography.md index c19095a9ef6..a9de3ac8288 100644 --- a/guides/v2.2/pattern-library/graphics/iconography/iconography.md +++ b/guides/v2.2/pattern-library/graphics/iconography/iconography.md @@ -81,12 +81,12 @@ From: [http://www.filamentgroup.com/lab/bulletproof_icon_fonts.html](http://www. Icons, if in fonts or not, should be very descriptive, especially if they stand on their own. If in doubt, add a descriptive text so users can find out what it means. (In the pre-touch era of web design I’d just have recommended a `title attribute, but those times are over.) 1. Don’t ever use "regular letters" for icons. Use a service like Icomoon and use the private use area (PUA) of the font. Those areas are specifically made for this usage and don’t have any letters attached to it. Screen readers won’t read letters in the PUA. -2. Use colors with enough contrast for your icons. -3. Never use an icon without a text (that you may hide). As icons are not read out, we don’t have any hint for a screen reader user what actually is on the screen, an alternative text is important as long as the content doesn’t make sense without an icon at all. +1. Use colors with enough contrast for your icons. +1. Never use an icon without a text (that you may hide). As icons are not read out, we don’t have any hint for a screen reader user what actually is on the screen, an alternative text is important as long as the content doesn’t make sense without an icon at all. From: [http://modernwebaccessibility.com/en/blog/demystify-speak-none](http://modernwebaccessibility.com/en/blog/demystify-speak-none){:target="_blank"} ## Additional resources -* [https://yatil.net/the-best-way-to-use-icon-fonts/](https://yatil.net/the-best-way-to-use-icon-fonts/){:target="_blank"} -* [http://pictos.cc/articles/using-icon-fonts/](http://pictos.cc/articles/using-icon-fonts/){:target="_blank"} +* [https://yatil.net/the-best-way-to-use-icon-fonts/](https://yatil.net/the-best-way-to-use-icon-fonts/){:target="_blank"} +* [http://pictos.cc/articles/using-icon-fonts/](http://pictos.cc/articles/using-icon-fonts/){:target="_blank"} diff --git a/guides/v2.2/pattern-library/navigation/links/links.md b/guides/v2.2/pattern-library/navigation/links/links.md index 157e4d28285..dcfc93f22b4 100644 --- a/guides/v2.2/pattern-library/navigation/links/links.md +++ b/guides/v2.2/pattern-library/navigation/links/links.md @@ -6,9 +6,9 @@ Within the Magento application, users often need to navigate through information ## When to Use -* Navigating between pages inside of the application. -* Navigating to pages outside of the application. -* Open a slide-in panel or modal (if a button could not be used) +* Navigating between pages inside of the application. +* Navigating to pages outside of the application. +* Open a slide-in panel or modal (if a button could not be used) ## When Not to Use @@ -24,22 +24,22 @@ Full Guideline Reference: [http://www.w3.org/TR/WCAG10-HTML-TECHS/#links](http:/ ### Links Text -* Clearly identify the target of each link. (Good link text should not be overly general; don't use "click here.") -* Provide a text equivalent for every non-text element +* Clearly identify the target of each link. (Good link text should not be overly general; don't use "click here.") +* Provide a text equivalent for every non-text element ### Grouping and Bypassing Links -* Group related links, identify the group (for user agents), and, until user agents do so, provide a way to bypass the group. -* Until user agents (including assistive technologies) render adjacent links distinctly, include non-link, printable characters (surrounded by spaces) between adjacent links. +* Group related links, identify the group (for user agents), and, until user agents do so, provide a way to bypass the group. +* Until user agents (including assistive technologies) render adjacent links distinctly, include non-link, printable characters (surrounded by spaces) between adjacent links. ### Keyboard Access -* Create a logical tab order through links, form controls, and objects. -* Provide keyboard shortcuts to important links (including those in client-side image maps), form controls, and groups of form controls. +* Create a logical tab order through links, form controls, and objects. +* Provide keyboard shortcuts to important links (including those in client-side image maps), form controls, and groups of form controls. ### Anchors and Target -* Until user agents allow users to turn off spawned windows, do not cause pop-ups or other windows to appear and do not change the current window without informing the user. +* Until user agents allow users to turn off spawned windows, do not cause pop-ups or other windows to appear and do not change the current window without informing the user. ## Usage Examples @@ -54,13 +54,13 @@ Full Guideline Reference: [http://www.w3.org/TR/WCAG10-HTML-TECHS/#links](http:/ **Guideline** 1. Must always locate above the title as shown. -2. Not be used if all the pages are on the same level. Breadcrumbs are intended to show hierarchy. -3. Show hierarchy and not history. To go back, users use the browser’s back button. Replicating this facility defies the purpose of having breadcrumbs. -4. Progress from the highest level to the lowest, one step at a time. -5. Have a simple link for each level. -6. Include the full page title in the [breadcrumb](https://glossary.magento.com/breadcrumb) trail. Also ensure consistency between the page address and the breadcrumb. If the page titles include keywords, then this will make your breadcrumbs both human and search engine friendly. -7. Include the full navigational path from the homepage to last level of current page. Not displaying certain levels will confuse users. -8. Never replace primary navigation. They have been devised as a secondary navigation aid and should always be used as such. +1. Not be used if all the pages are on the same level. Breadcrumbs are intended to show hierarchy. +1. Show hierarchy and not history. To go back, users use the browser’s back button. Replicating this facility defies the purpose of having breadcrumbs. +1. Progress from the highest level to the lowest, one step at a time. +1. Have a simple link for each level. +1. Include the full page title in the [breadcrumb](https://glossary.magento.com/breadcrumb) trail. Also ensure consistency between the page address and the breadcrumb. If the page titles include keywords, then this will make your breadcrumbs both human and search engine friendly. +1. Include the full navigational path from the homepage to last level of current page. Not displaying certain levels will confuse users. +1. Never replace primary navigation. They have been devised as a secondary navigation aid and should always be used as such. **Example** diff --git a/guides/v2.2/pattern-library/templates/sign-in-form/sign-in-form.md b/guides/v2.2/pattern-library/templates/sign-in-form/sign-in-form.md index d5cede4eb27..2fdf17b303c 100644 --- a/guides/v2.2/pattern-library/templates/sign-in-form/sign-in-form.md +++ b/guides/v2.2/pattern-library/templates/sign-in-form/sign-in-form.md @@ -15,19 +15,19 @@ Use this pattern when user needs to sign into the system. The user may "tab" to navigate the form in the following order: 1. First tab = active "Username" field -2. Second tab = active "Password" field -3. Third tab = focus on "Sign in" button -4. Fourth tab = focus on hyperlink ("Forgot your password?") -5. Fifth tab = return to top of the order. +1. Second tab = active "Password" field +1. Third tab = focus on "Sign in" button +1. Fourth tab = focus on hyperlink ("Forgot your password?") +1. Fifth tab = return to top of the order. ### Initial state In its initial state the sign-in [module](https://glossary.magento.com/module) consists of -* a Welcome message -* two text fields – **Username** and **Password** -* a link to retrieve the user’s password -* a button to submit the user’s credentials – **Sign in** +* a Welcome message +* two text fields – **Username** and **Password** +* a link to retrieve the user’s password +* a button to submit the user’s credentials – **Sign in** ![](img/Sign-in_initial.png) @@ -35,10 +35,10 @@ In its initial state the sign-in [module](https://glossary.magento.com/module) c In the [event](https://glossary.magento.com/event) that invalid credentials are submitted the sign-in module consists of -* an alert message informing the user that either the Username or Password is invalid -* two text fields – **Username** and **Password**, where the Username field will retain the initial entry as typed by the user and be the active field and the password field will be blank -* a link to retrieve the user’s password -* a button to submit the user’s credentials – **Sign in** +* an alert message informing the user that either the Username or Password is invalid +* two text fields – **Username** and **Password**, where the Username field will retain the initial entry as typed by the user and be the active field and the password field will be blank +* a link to retrieve the user’s password +* a button to submit the user’s credentials – **Sign in** ![](img/Sign-in_error.png) @@ -46,10 +46,10 @@ In the [event](https://glossary.magento.com/event) that invalid credentials are If the user opts to retrieve their password via the hyperlink ("Forgot your password?") the sign-in module will display -* the title **Password Help** in the style of the Welcome message from the initial state -* instructional text explaining the process for retrieving one’s password -* a text field to enter the user’s email address used at the time of registration; a button to submit the user’s email address and initiate the process – **Retrieve Password** -* a link to cancel the retrieval and return to the initial state of the sign-in module – "Back to Sign in" +* the title **Password Help** in the style of the Welcome message from the initial state +* instructional text explaining the process for retrieving one’s password +* a text field to enter the user’s email address used at the time of registration; a button to submit the user’s email address and initiate the process – **Retrieve Password** +* a link to cancel the retrieval and return to the initial state of the sign-in module – "Back to Sign in" ![](img/Sign-in_password-retrieval.png) @@ -57,9 +57,9 @@ If the user opts to retrieve their password via the hyperlink ("Forgot your pass Once a user submits their email address to retrieve their password, the module will provide a confirmation on the action via text in the module. -* the title **Password Help** in the style of the Welcome message from the initial state -* text confirming that an email has been sent -* a link to return to the initial state of the sign-in module – "Back to Sign in" +* the title **Password Help** in the style of the Welcome message from the initial state +* text confirming that an email has been sent +* a link to return to the initial state of the sign-in module – "Back to Sign in" ![](img/Sign-in_password-retrieval_confirmation.png) @@ -67,10 +67,10 @@ Once a user submits their email address to retrieve their password, the module w In the event that the user enters an invalid email address, either by mistyping or by entering an unregistered email address, the module will display an alert message. -* the title Password Help in the style of the Welcome message from the initial state -* an alert message indicating the email address failed -* a text field to enter the user’s email address used at the time of registration; a button to submit the user’s email address and initiate the process – Retrieve Password -* a link to cancel the retrieval and return to the initial state of the sign-in module – "Back to Sign in" +* the title Password Help in the style of the Welcome message from the initial state +* an alert message indicating the email address failed +* a text field to enter the user’s email address used at the time of registration; a button to submit the user’s email address and initiate the process – Retrieve Password +* a link to cancel the retrieval and return to the initial state of the sign-in module – "Back to Sign in" ![](img/Sign-in_password-retrieval_error.png) @@ -78,10 +78,10 @@ In the event that the user enters an invalid email address, either by mistyping When the user signs out of the system they are presented with the sign-in module as follows -* an alert message informing the user that sign-out was successful -* two text fields – **Username** and **Password** -* a link to retrieve the user’s password -* a button to submit the user’s credentials – **Sign in**. +* an alert message informing the user that sign-out was successful +* two text fields – **Username** and **Password** +* a link to retrieve the user’s password +* a button to submit the user’s credentials – **Sign in**. ![](img/Sign-in_successful-signout.png) diff --git a/guides/v2.2/payments-integrations/base-integration/integration-intro.md b/guides/v2.2/payments-integrations/base-integration/integration-intro.md index 7ef7218f998..86c30613c33 100644 --- a/guides/v2.2/payments-integrations/base-integration/integration-intro.md +++ b/guides/v2.2/payments-integrations/base-integration/integration-intro.md @@ -25,9 +25,9 @@ It contains all required infrastructure and you can use it as starting point. To add a new payment method, take the following high-level steps: 1. Configure general payment method module options. Described in the [Payment method module configuration]({{ page.baseurl }}/payments-integrations/base-integration/module-configuration.html) topic. -2. Configure payment method options. Described in [Payment method configuration]({{ page.baseurl }}/payments-integrations/base-integration/payment-option-config.html). -3. Implement and configure payment method facade - the [entity](https://glossary.magento.com/entity) allowing to process payment actions between Magento sales management and payment processor. Described in [Payment method facade]({{ page.baseurl }}/payments-integrations/base-integration/facade-configuration.html) and [Payment info rendering in Admin checkout]({{ page.baseurl }}/payments-integrations/base-integration/formblocktype.html) -4. Implement and configure payment actions (like authorize, void and so on). Described in [Add a gateway command]({{ page.baseurl }}/payments-integrations/base-integration/payment-action.html) +1. Configure payment method options. Described in [Payment method configuration]({{ page.baseurl }}/payments-integrations/base-integration/payment-option-config.html). +1. Implement and configure payment method facade - the [entity](https://glossary.magento.com/entity) allowing to process payment actions between Magento sales management and payment processor. Described in [Payment method facade]({{ page.baseurl }}/payments-integrations/base-integration/facade-configuration.html) and [Payment info rendering in Admin checkout]({{ page.baseurl }}/payments-integrations/base-integration/formblocktype.html) +1. Implement and configure payment actions (like authorize, void and so on). Described in [Add a gateway command]({{ page.baseurl }}/payments-integrations/base-integration/payment-action.html) Your payment method might be available from either [storefront](https://glossary.magento.com/storefront) and Admin, or both. And also can have a different configuration for each area. The keynotes on how to configure where the method can be used, and how to implement different behavior, are described in the [Configure payment method by area]({{ page.baseurl }}/payments-integrations/base-integration/admin-integration.html) topic. diff --git a/guides/v2.2/payments-integrations/signifyd/signifyd.md b/guides/v2.2/payments-integrations/signifyd/signifyd.md index 5380316d9c8..0d3ecdba0a2 100644 --- a/guides/v2.2/payments-integrations/signifyd/signifyd.md +++ b/guides/v2.2/payments-integrations/signifyd/signifyd.md @@ -48,27 +48,29 @@ These steps are enough to provide custom AVS/CVV mapping for payment integration The Signifyd service can retrieve the payment method of a placed order. The *Magento_Signifyd* module allows to map Magento and Signifyd payment codes using the predefined [XML](https://glossary.magento.com/xml) list, located in: - Magento\Signifyd\etc\signifyd_payment_mapping.xml +```text +Magento\Signifyd\etc\signifyd_payment_mapping.xml +``` To apply your mappings for the [Signifyd payment codes](https://www.signifyd.com/docs/api/#/reference/cases/create-a-case), follow these steps: 1. Add `signifyd_payment_mapping.xml` to the custom payment method implementation -2. Specify the needed mapping - -For example: - -```xml - - - - custom_payment_code - PAYMENT_CARD - - - -``` +1. Specify the needed mapping + + For example: + + ```xml + + + + custom_payment_code + PAYMENT_CARD + + + + ``` where: diff --git a/guides/v2.2/payments-integrations/vault/admin-integration.md b/guides/v2.2/payments-integrations/vault/admin-integration.md index 1a4ef00dc18..21a83037b55 100644 --- a/guides/v2.2/payments-integrations/vault/admin-integration.md +++ b/guides/v2.2/payments-integrations/vault/admin-integration.md @@ -11,8 +11,8 @@ functional_areas: To be able to use vault in [Admin](https://glossary.magento.com/admin) order creation, you need to take at least the following steps: 1. Create a token component provider and specify it in the `/etc/di.xml`. -2. Create a custom vault JS component and specify it in the component provider. -3. Create a `.phtml` template, specify it in the component provider and the corresponding [layout](https://glossary.magento.com/layout) file. +1. Create a custom vault JS component and specify it in the component provider. +1. Create a `.phtml` template, specify it in the component provider and the corresponding [layout](https://glossary.magento.com/layout) file. There are more details about these steps in the following sections. diff --git a/guides/v2.2/payments-integrations/vault/enabler.md b/guides/v2.2/payments-integrations/vault/enabler.md index 79881ec9e76..9eff6778b3d 100644 --- a/guides/v2.2/payments-integrations/vault/enabler.md +++ b/guides/v2.2/payments-integrations/vault/enabler.md @@ -14,8 +14,8 @@ Magento out-of-the-box provides mechanisms for adding this ability, but you stil These modifications are the following: 1. Adding vault enabling controls. -2. Modifying the payment component (updating of the `additional_data` property must be added). -3. Creating a request data builder. +1. Modifying the payment component (updating of the `additional_data` property must be added). +1. Creating a request data builder. The following paragraphs describe these points in details. @@ -161,4 +161,3 @@ Example from the Braintree `di.xml`: ## What's next [Storing and processing the payment related data]({{ page.baseurl }}/payments-integrations/vault/payment-token.html) - diff --git a/guides/v2.2/payments-integrations/vault/vault-intro.md b/guides/v2.2/payments-integrations/vault/vault-intro.md index 0d401923743..c045db0b363 100644 --- a/guides/v2.2/payments-integrations/vault/vault-intro.md +++ b/guides/v2.2/payments-integrations/vault/vault-intro.md @@ -29,10 +29,10 @@ You do not need to create a new [module](https://glossary.magento.com/module) fo The topics of this chapter describe how to add the vault functionality to a payment method (the payment method must be implemented using Magento payment gateway): 1. [Add vault to module dependencies]({{ page.baseurl }}/payments-integrations/vault/module-configuration.html). -2. [Configure vault general parameters]({{ page.baseurl }}/payments-integrations/vault/vault-payment-configuration.html). -3. [Add vault and payment methods entities using dependency injection configuration]({{ page.baseurl }}/payments-integrations/vault/vault-di.html). -4. [Implement the ability for customers to choose whether to use vault]({{ page.baseurl }}/payments-integrations/vault/enabler.html). -5. [Storing and processing the payment related data]({{ page.baseurl }}/payments-integrations/vault/payment-token.html). -6. [Adding and using UI_Vault component to place orders on the storefront]({{ page.baseurl }}/payments-integrations/vault/token-ui-component-provider.html). -7. [Display stored tokens for customer and process their deleting]({{ page.baseurl }}/payments-integrations/vault/customer-stored-payments.html). -8. [Using stored tokens to place an order from Admin panel]({{ page.baseurl }}/payments-integrations/vault/admin-integration.html). +1. [Configure vault general parameters]({{ page.baseurl }}/payments-integrations/vault/vault-payment-configuration.html). +1. [Add vault and payment methods entities using dependency injection configuration]({{ page.baseurl }}/payments-integrations/vault/vault-di.html). +1. [Implement the ability for customers to choose whether to use vault]({{ page.baseurl }}/payments-integrations/vault/enabler.html). +1. [Storing and processing the payment related data]({{ page.baseurl }}/payments-integrations/vault/payment-token.html). +1. [Adding and using UI_Vault component to place orders on the storefront]({{ page.baseurl }}/payments-integrations/vault/token-ui-component-provider.html). +1. [Display stored tokens for customer and process their deleting]({{ page.baseurl }}/payments-integrations/vault/customer-stored-payments.html). +1. [Using stored tokens to place an order from Admin panel]({{ page.baseurl }}/payments-integrations/vault/admin-integration.html).