diff --git a/.github/workflows/deploy-github-pages.yml b/.github/workflows/deploy-github-pages.yml
index a1699e3..1f7fbac 100644
--- a/.github/workflows/deploy-github-pages.yml
+++ b/.github/workflows/deploy-github-pages.yml
@@ -3,6 +3,9 @@ name: Deploy GitHub Pages preview
on:
workflow_dispatch:
+# Note: GitHub Pages must be enabled on the repository with "GitHub Actions" as the source
+# (Settings → Pages → Build and deployment → Source → GitHub Actions)
+# Fork contributors must enable this on their fork before running this workflow.
permissions:
contents: read
pages: write
diff --git a/.gitignore b/.gitignore
index f697378..12be62a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,19 +1,15 @@
-
-# OS and IDE generated files #
-##############################
+# OS and IDE generated files
.DS_Store
.vscode
.history
.idea
.editorconfig
.cursor
+.claude/
-# npm yarn
+# npm
node_modules
-package.lock
-yarn-error.log
-.pnp.*
-.yarn/*
+package-lock.json
# gatsby files
.env
@@ -27,14 +23,16 @@ cypress/screenshots
# lerna
lerna-debug.log
-# local actions
-.actrc
-.secrets
-local-test.yml
+# static
+_site
+
+# Super-linter outputs
+super-linter-output
+super-linter.log
-# yalc
-.yalc
-yalc.lock
+# GitHub Actions leftovers
+github_conf
-# local
+# local dev
tmp
+linter-report.txt
diff --git a/.markdownlint-cli2.jsonc b/.markdownlint-cli2.jsonc
new file mode 100644
index 0000000..ee4126d
--- /dev/null
+++ b/.markdownlint-cli2.jsonc
@@ -0,0 +1,12 @@
+{
+ // Ignore files referenced by .gitignore (only valid at root)
+ "gitignore": true,
+
+ // Define glob expressions to ignore
+ "ignores": [
+ "node_modules/",
+ "coverage/",
+ ".github/",
+ "src/pages/config.md"
+ ]
+}
diff --git a/.markdownlint.yml b/.markdownlint.yml
index 1c9f0fb..d250e1d 100644
--- a/.markdownlint.yml
+++ b/.markdownlint.yml
@@ -18,8 +18,7 @@ MD007: false
MD013: false
# MD024/no-duplicate-heading - Multiple headings with the same content
-MD024:
- siblings_only: true
+MD024: false
# MD025/single-title/single-h1 - Multiple top-level headings in the same document
MD025:
@@ -37,19 +36,19 @@ MD033:
- InlineAlert
- Edition
- SuperHero
+ - CodeBlock
+ - Fragment
+ - Cards
+ - HorizontalLine
# MD034/no-bare-urls - Bare URL used
MD034: false
-# MD035/hr-style - Horizontal rule style
-MD035:
- style: "---"
-
# MD041/first-line-heading/first-line-h1 - First line in file should be a top level heading
MD041: false
# MD045/no-alt-text - Images should have alternate text
-MD045: false
+MD045: true
# MD046/code-block-style - Code block style
MD046:
@@ -66,5 +65,17 @@ MD049: false
MD050:
style: asterisk
+# MD052/reference-links-images - Reference links and images should have a title attribute (disabled for flexibility)
+MD052: false
+
+# MD054/link-image-style - Link and image style (disabled for flexibility)
+MD054:
+ autolink: false
+ url_inline: false
+
+# MD055/table-pipe-style - Require leading and trailing pipes (matches AM023)
+MD055:
+ style: leading_and_trailing
+
# MD060/table-column-style - Table column style (disabled for flexible formatting)
MD060: false
diff --git a/dev.mjs b/dev.mjs
deleted file mode 100644
index 84605fa..0000000
--- a/dev.mjs
+++ /dev/null
@@ -1,39 +0,0 @@
-// content/docs
-// serve static on 3001
-
-import express from 'express';
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-import { execSync } from 'child_process';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
-const PORT = process.env.DEV_PORT || 3003;
-
-const getCurrentBranch = () => {
- try {
- return execSync('git branch --show-current', { encoding: 'utf8' }).trim();
- } catch (error) {
- console.warn('Could not determine git branch, defaulting to "main"');
- return 'main';
- }
-};
-
-const currentBranch = getCurrentBranch();
-const DOCS_DIRECTORY = process.env.DIRECTORY || './src/pages';
-
-const app = express();
-console.log(path.resolve(__dirname, `./${DOCS_DIRECTORY}`));
-app.use(
- express.static(path.resolve(__dirname, `./${DOCS_DIRECTORY}`), {
- setHeaders: (res) => {
- res.setHeader('last-modified', new Date().toGMTString());
- res.setHeader('local-branch-name', currentBranch);
- },
- }),
-);
-
-app.listen(PORT, () => {
- console.debug(`Docs dev server is running on port ${PORT}`);
-});
\ No newline at end of file
diff --git a/package.json b/package.json
index 9165e0b..14dd560 100644
--- a/package.json
+++ b/package.json
@@ -6,18 +6,24 @@
"type": "git",
"url": "https://github.com/AdobeDocs/commerce-admin-developer"
},
- "config": {
- "sitePath": "commerce/admin-developer"
- },
"scripts": {
- "dev": "node ./dev.mjs",
+ "dev": "npx --yes github:AdobeDocs/adp-devsite-utils dev",
+ "buildNavigation": "npx --yes github:AdobeDocs/adp-devsite-utils buildNavigation -v",
+ "buildRedirections": "npx --yes github:AdobeDocs/adp-devsite-utils buildRedirections -v",
+ "renameFiles": "npx --yes github:AdobeDocs/adp-devsite-utils renameFiles -v",
+ "normalizeLinks": "npx --yes github:AdobeDocs/adp-devsite-utils normalizeLinks -v",
+ "buildSiteWideBanner": "npx --yes github:AdobeDocs/adp-devsite-utils buildSiteWideBanner -v",
+ "buildSiteMetadata": "npx --yes github:AdobeDocs/adp-devsite-utils buildSiteMetadata -v",
+ "buildContributors": "npx --yes github:AdobeDocs/adp-devsite-utils buildContributors -v",
"lint": "npx --yes github:AdobeDocs/adp-devsite-utils runLint -v",
+ "lint:errorOnly": "npx --yes github:AdobeDocs/adp-devsite-utils runLint",
+ "link:externalLinkOnly": "npx --yes github:AdobeDocs/adp-devsite-utils runLint --external-links-only -v",
+ "link:checkAllLinks": "npx --yes github:AdobeDocs/adp-devsite-utils runLint --internal-links-only --external-links-only -v",
+ "redirectCheck:stage": "npx --yes github:AdobeDocs/adp-devsite-utils redirectChecker stage --verbose",
+ "redirectCheck:prod": "npx --yes github:AdobeDocs/adp-devsite-utils redirectChecker prod --verbose",
"lint:md": "npx --yes markdownlint-cli2 'src/pages/**/*.md' '*.md'",
"lint:md:fix": "npx --yes markdownlint-cli2 --fix 'src/pages/**/*.md' '*.md'",
"test": "npx --yes jest",
"test:config": "npx --yes jest tests/config.test.js"
- },
- "devDependencies": {
- "express": "5.2.1"
}
}
diff --git a/src/pages/adp-site-metadata.json b/src/pages/adp-site-metadata.json
new file mode 100644
index 0000000..59fd870
--- /dev/null
+++ b/src/pages/adp-site-metadata.json
@@ -0,0 +1 @@
+{"total":3,"offset":0,"limit":3,"data":[{"key":"contributors","value":"src/pages/contributors.json"},{"key":"get-credentials","value":null},{"key":"site-wide-banner","value":null}],":type":"sheet"}
\ No newline at end of file
diff --git a/src/pages/contributors.json b/src/pages/contributors.json
new file mode 100644
index 0000000..949def9
--- /dev/null
+++ b/src/pages/contributors.json
@@ -0,0 +1 @@
+{"total":53,"offset":0,"limit":53,"data":[{"page":"/","avatars":["https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/14320591?v=4","https://avatars.githubusercontent.com/u/13662379?v=4","https://avatars.githubusercontent.com/u/11652541?v=4","https://avatars.githubusercontent.com/u/57922?v=4"],"lastUpdated":"11/12/2025"},{"page":"/config","avatars":["https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/14320591?v=4"],"lastUpdated":"11/17/2025"},{"page":"/pattern-library/","avatars":["https://avatars.githubusercontent.com/u/13662379?v=4","https://avatars.githubusercontent.com/u/12731225?v=4"],"lastUpdated":"9/11/2023"},{"page":"/pattern-library/containers/","avatars":["https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"9/11/2023"},{"page":"/pattern-library/containers/slideouts-modals-overlays","avatars":["https://avatars.githubusercontent.com/u/38460853?v=4","https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/13662379?v=4","https://avatars.githubusercontent.com/u/6391769?v=4"],"lastUpdated":"3/12/2026"},{"page":"/pattern-library/containers/static-content","avatars":["https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"10/28/2024"},{"page":"/pattern-library/containers/tabs","avatars":["https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"11/14/2025"},{"page":"/pattern-library/controls/","avatars":["https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"9/11/2023"},{"page":"/pattern-library/controls/button-bar","avatars":["https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"10/28/2024"},{"page":"/pattern-library/controls/buttons","avatars":["https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"11/14/2025"},{"page":"/pattern-library/controls/expand-collapse","avatars":["https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"10/28/2024"},{"page":"/pattern-library/controls/view-controller","avatars":["https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"11/14/2025"},{"page":"/pattern-library/displaying-data/","avatars":["https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"9/11/2023"},{"page":"/pattern-library/displaying-data/datatable","avatars":["https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/14320591?v=4","https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"11/14/2025"},{"page":"/pattern-library/displaying-data/filters","avatars":["https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/14320591?v=4","https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"11/12/2025"},{"page":"/pattern-library/displaying-data/tile","avatars":["https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"10/28/2024"},{"page":"/pattern-library/displaying-data/tree","avatars":["https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"10/28/2024"},{"page":"/pattern-library/feedback-to-user/","avatars":["https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"9/11/2023"},{"page":"/pattern-library/feedback-to-user/progress-indicator","avatars":["https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"11/13/2025"},{"page":"/pattern-library/general/","avatars":["https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"9/11/2023"},{"page":"/pattern-library/general/accessibility-guidelines","avatars":["https://avatars.githubusercontent.com/u/38460853?v=4","https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"3/12/2026"},{"page":"/pattern-library/getting-user-input/","avatars":["https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"9/11/2023"},{"page":"/pattern-library/getting-user-input/date-time-selector","avatars":["https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"11/14/2025"},{"page":"/pattern-library/getting-user-input/form-elements","avatars":["https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"11/14/2025"},{"page":"/pattern-library/getting-user-input/image-uploader","avatars":["https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"11/14/2025"},{"page":"/pattern-library/getting-user-input/row-pattern","avatars":["https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"11/14/2025"},{"page":"/pattern-library/getting-user-input/select-from-list","avatars":["https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"11/14/2025"},{"page":"/pattern-library/getting-user-input/use-default-config","avatars":["https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"11/14/2025"},{"page":"/pattern-library/graphics/","avatars":["https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"9/11/2023"},{"page":"/pattern-library/graphics/iconography","avatars":["https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/14320591?v=4","https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"11/14/2025"},{"page":"/pattern-library/navigation/","avatars":["https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"9/11/2023"},{"page":"/pattern-library/navigation/links","avatars":["https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"11/14/2025"},{"page":"/pattern-library/navigation/wizard","avatars":["https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"10/28/2024"},{"page":"/pattern-library/staging-patterns/","avatars":["https://avatars.githubusercontent.com/u/14320591?v=4","https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"3/18/2026"},{"page":"/pattern-library/staging-patterns/module","avatars":["https://avatars.githubusercontent.com/u/14320591?v=4","https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"3/18/2026"},{"page":"/pattern-library/staging-patterns/timeline-dashboard","avatars":["https://avatars.githubusercontent.com/u/14320591?v=4","https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"3/18/2026"},{"page":"/pattern-library/templates/","avatars":["https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"9/11/2023"},{"page":"/pattern-library/templates/address-form","avatars":["https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"9/11/2023"},{"page":"/pattern-library/templates/sign-in-form","avatars":["https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"11/13/2025"},{"page":"/style-guide/","avatars":["https://avatars.githubusercontent.com/u/13662379?v=4","https://avatars.githubusercontent.com/u/12731225?v=4"],"lastUpdated":"9/11/2023"},{"page":"/style-guide/content/","avatars":["https://avatars.githubusercontent.com/u/12731225?v=4"],"lastUpdated":"11/17/2025"},{"page":"/style-guide/content/buttons-and-links","avatars":["https://avatars.githubusercontent.com/u/38460853?v=4","https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/14320591?v=4","https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"3/12/2026"},{"page":"/style-guide/content/capitalization","avatars":["https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/14320591?v=4","https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"11/13/2025"},{"page":"/style-guide/content/content-formats","avatars":["https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/14320591?v=4","https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"11/14/2025"},{"page":"/style-guide/content/errors-and-messages","avatars":["https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"9/11/2023"},{"page":"/style-guide/content/headings-and-organization","avatars":["https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"9/11/2023"},{"page":"/style-guide/content/number-formats","avatars":["https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/14320591?v=4","https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"11/14/2025"},{"page":"/style-guide/content/voice-and-tone","avatars":["https://avatars.githubusercontent.com/u/38460853?v=4","https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"3/12/2026"},{"page":"/style-guide/design/","avatars":["https://avatars.githubusercontent.com/u/12731225?v=4"],"lastUpdated":"11/17/2025"},{"page":"/style-guide/design/color","avatars":["https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"9/11/2023"},{"page":"/style-guide/design/iconography","avatars":["https://avatars.githubusercontent.com/u/12731225?v=4","https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"11/14/2025"},{"page":"/style-guide/design/page-grids","avatars":["https://avatars.githubusercontent.com/u/13662379?v=4","https://avatars.githubusercontent.com/u/12731225?v=4"],"lastUpdated":"9/11/2023"},{"page":"/style-guide/design/typography","avatars":["https://avatars.githubusercontent.com/u/13662379?v=4"],"lastUpdated":"9/11/2023"}],":type":"sheet"}
\ No newline at end of file
diff --git a/src/pages/pattern-library/containers/slideouts-modals-overlays.md b/src/pages/pattern-library/containers/slideouts-modals-overlays.md
index ec1f93d..535e396 100644
--- a/src/pages/pattern-library/containers/slideouts-modals-overlays.md
+++ b/src/pages/pattern-library/containers/slideouts-modals-overlays.md
@@ -60,17 +60,17 @@ Close and cancel controls
The user may also click or tap in the "alley" (shaded area) to the left of the active panel to cancel/close the panel. This passive control allows the user to drill down to the desired level without the need to close each panel via the cancel or close controls.
-
+
When two panels are open (one over the other), only the topmost is active. Clicking or tapping the in the "alley" (on the edge of the lower panel) the top active panel closes, making the panel underneath active.
-
+
Passive close "zone" - one level down
Clicking or tapping the "alley" that represents the parent page (lowest level) will slide each panel out of view, closing them, and return the user to the parent page. It is recommended that no more than two panels be used in any given "task flow".
-
+
Passive close "zone" - two levels down
@@ -81,7 +81,7 @@ There are two general ways of using Slideout — "Subflow" and "Extend Form".
### Sub Flow
-
+
If the form in slide-in panel creates new entities, or changes existing ones (Create Product Configurations, Add Attribute) primary action in the Slideout Button Bar should be a noun explaining the panel resulting action: "Generate Configurations", "Create Attribute", etc.
Clicking that button will:
@@ -91,7 +91,7 @@ Clicking that button will:
### Extend Form
-
+
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:
@@ -101,7 +101,7 @@ If the Slideout panel is a part of the form, extending it (like Advanced Invento
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:
-
+
Clicking "Yes, Cancel" closes the Modal and Slideout, then resets form to default state. Clicking "Do not Cancel" closes the Modal.
@@ -109,19 +109,19 @@ Clicking "Yes, Cancel" closes the Modal and Slideout, then resets form to defaul
In its final position the panel does not snap to the page-grid of the parent page, but rather should respect some distance from the left edge of the browser. This distance provides an "alley" that creates a page-over-page metaphor. This distance should be some % of the viewport, rather than a fixed pixel width, to accommodate for variations in browser widths.
-
+
Panel position in relation to browser edge
A 12-column page-grid is nested inside the content area of the slideout panel, with an additional 15px of padding added to the left edge.
-
+
Nested page-grid with additional padding
This method of nesting a 12-column page-grid inside the slideout panel is repeated with each subsequent panel. This is done so that the panels can easily accommodate established page templates used in the Commerce framework. With each additional panel, the position of the active panel should indent to create the page-over-page metaphor and allow a zone(s) for the passive close interaction mentioned above.
-
+
## Modals
@@ -129,7 +129,7 @@ This method of nesting a 12-column page-grid inside the slideout panel is repeat
When an action is taken that triggers a modal, the modal window should appear center-aligned in the user's browser window. The modal should appear to fade in or grow from the center of the screen. The timing of this animation should be set to about 0.3s. When the modal is triggered, the parent page should become disabled and shaded while the modal is active.
-
+
Example of a Confirmation Modal
@@ -148,7 +148,7 @@ The active modal should include the following elements:
Every modal should include a close control ( × ) in the upper right corner as well as a "Cancel" link or button. Additionally, if the user clicks or taps the shaded area outside of the modal container the modal will cancel and close. The ESC-key via keyboard will close/cancel the active modal window.
-
+
Modal "Cancel" and "Close" controls
@@ -156,7 +156,7 @@ Modal "Cancel" and "Close" controls
The modal should be center-aligned in the user's browser window and be 75% of the viewport width. The content within the modal window should flex accordingly to the width of the browser window and the modal width.
-
+
The distance of the modal to the top of the browser should have a fixed distance and NOT be percentage-based. This will insure that the "title" and top "close control" will be visible if the modal window is taller than the viewport. Within the content area of the modal window itself there should be 30px padding.
diff --git a/src/pages/pattern-library/containers/static-content.md b/src/pages/pattern-library/containers/static-content.md
index 3bc1311..92fd10e 100644
--- a/src/pages/pattern-library/containers/static-content.md
+++ b/src/pages/pattern-library/containers/static-content.md
@@ -31,11 +31,11 @@ The following example, shows two sets of parent & child containers. Each parent
The parent container structure: title, rule, content.
-
+
#### Styling
-Note that because the children containers can be any variations of other content containers, refer to other variations for styling. 
+Note that because the children containers can be any variations of other content containers, refer to other variations for styling. 
### Title with Body of Text
@@ -43,7 +43,7 @@ Note that because the children containers can be any variations of other content
**Height:** as needed
-
+
### Title with Differentiated Rows
@@ -53,7 +53,7 @@ Note that because the children containers can be any variations of other content
This is used to clearly separate information for users to easily digest. The first row should be grey, and then, the rows alternate between grey and white.
-
+
### Pricing Breakdown chart
@@ -63,4 +63,4 @@ This is used to clearly separate information for users to easily digest. The fir
This is used to clearly separate information for users to easily digest.
-
+
diff --git a/src/pages/pattern-library/controls/button-bar.md b/src/pages/pattern-library/controls/button-bar.md
index e783ed7..d7eb99e 100644
--- a/src/pages/pattern-library/controls/button-bar.md
+++ b/src/pages/pattern-library/controls/button-bar.md
@@ -37,11 +37,11 @@ For solutions not described in this article, please refer to other related patte
#### Button Bar Position in Page
-
+
#### Button Bar Position in Slide-in Panel
-
+
### Page Level Button Order and Priority - General Rules
@@ -60,26 +60,26 @@ Page level buttons can be logically grouped as follows:
Groups can contain multiple CTAs but only one primary CTA. Groups should follow the below order:
-
+
### Ordering by Importance
There should never be more than one primary page level CTA on the same page. Page level CTAs should assume an ascending order of importance from left to right wherever possible, i.e. least important buttons followed by most important.
-
+
## Style
All buttons should be right aligned. The button bar is spread across 12 columns and should be fluid.
-
+
## 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.
1. If you have multiple page-level buttons. We recommend using the split button rather having too many buttons that will clutter the page.
-
+
## Sticky button bar
@@ -87,11 +87,11 @@ To ensure page level actions are always visible, The button bar should stick to
### Initial State
-
+
### After user scrolls, the button bar sticks to the browser
-
+
## Accessibility
diff --git a/src/pages/pattern-library/controls/buttons.md b/src/pages/pattern-library/controls/buttons.md
index c775f22..896c81c 100644
--- a/src/pages/pattern-library/controls/buttons.md
+++ b/src/pages/pattern-library/controls/buttons.md
@@ -48,7 +48,7 @@ defined style.
### Page Level Button
-
+
#### Font details
@@ -87,7 +87,7 @@ Left/Right margin spacing should not be less than 20px
### Dropdown Buttons
-
+
#### Font details
@@ -131,7 +131,7 @@ Left/Right margin spacing should not be less than 20px
### Tertiary Buttons
-
+
#### Font details
@@ -167,11 +167,11 @@ Left/Right margin spacing should not be less than 20px
#### Tertiary Button Example
-
+
### Quaternary Buttons
-
+
Quaternary buttons are only after all the buttons hierarchy have been used.
@@ -217,7 +217,7 @@ Left/Right margin spacing should not be less than 10px
#### Quaternary Button Example
-
+
### Toggle Buttons
@@ -285,7 +285,7 @@ Left/Right margin spacing should not be less than 10px
#### Examples of toggle buttons
-
+
## Accessibility
diff --git a/src/pages/pattern-library/controls/view-controller.md b/src/pages/pattern-library/controls/view-controller.md
index 6f31a89..e0870ed 100644
--- a/src/pages/pattern-library/controls/view-controller.md
+++ b/src/pages/pattern-library/controls/view-controller.md
@@ -19,7 +19,7 @@ Only use for switching between views of data set.
Follow are variations of icons to use for their corresponding data set views:
-
+
## Behavior
@@ -27,21 +27,21 @@ User switches between the views using the view controller. User can click on the
In this case, user select data table view control, the data table view is shown.
-
+
Then, the user can also switch back to tile view in this example.
-
+
## Placement
The view control should always be placed as the most right item on the same row as filter options.
-
+
## Style
-
+
## Accessibility
diff --git a/src/pages/pattern-library/displaying-data/datatable.md b/src/pages/pattern-library/displaying-data/datatable.md
index 111cf4c..2c5e85f 100644
--- a/src/pages/pattern-library/displaying-data/datatable.md
+++ b/src/pages/pattern-library/displaying-data/datatable.md
@@ -36,7 +36,7 @@ This specification defines the following features for the data-table:
* Multiple item select and edit
* Image/Thumbnail placement
-
+
## Data-table Visual Architecture
@@ -53,9 +53,9 @@ The data-table will contain the following elements where applicable and as neede
The data-table will be designed in such a way that any of the above controls can be removed, collapsing the table gracefully.
-
+
-
+
## Pagination
@@ -68,7 +68,7 @@ Pagination controls allow the user to easily page through and organize data. Pag
* 'Next' button
* 'Previous' button when applicable
-
+
### Pagination Rules
@@ -79,37 +79,37 @@ Pagination controls allow the user to easily page through and organize data. Pag
* 'Skip to' will be instantiated once the value is changed and [Return] or [Tab] is clicked.
* A custom number of items per page can be set by selecting the "Custom" link which will allow users to specify a number. This number can be edited.
-
+
-
+
-
+
## Mass Actions
A common theme across the existing application user experience includes mass actions that can be taken. This is a convention used on both data-table and non-data-table pages. Not all pages have these action buttons. This document will not attempt to capture all actions that appear here or how they might be redesigned. This document will make note that these actions exist on many of the data-table pages and will use the area directly above the table to indicate placement of such action buttons where they might be needed.
-
+
Actions will be positioned above the table . Each table will have it's own set of actions, some tables will have no actions. This new proposal removes the submit button which is currently visible next to the "Actions" drop down selector. In the event that any confirmations are needed for actions, modal dialogs will be used.
-
+
### Single Actions
These actions will appear within the data area of the table where applicable. When this action column is applicable, it will always appear on the far right of the table . Single actions will allow users to take action on a record within the table . In most cases, no more than one action will appear here. In the event that additional actions are needed, they will appear in the form of a drop down. These actions are specific to the single record in which they are associated. In the event that a user selects multiple items in the table, these actions will be disabled or hidden.
-
+
### Messaging and Confirmation
There are times when an action needs to be confirmed. In these cases, the user's task will be interrupted with a message asking the user to confirm the operation before proceeding. This message is presented via a modal dialog.
-
+
Once an action is taken, success/fail messaging should appear as an overlay which fades away. Certain actions mayrequire that an Undo action be provided. This experience should be the same whether a single file is being deleted via the "actions" button for that record or 1 or more files have been selected via a checkbox and deleted via the mass actions delete.
-
+
## Table Control
@@ -131,17 +131,17 @@ The keyword search function and table controls will be:
As the table scrolls, the table controls will dynamically condense to a single row. All functionality of the controls will remain available.
-
+
The persistent header will reactivate when you scroll back up:
-
+
### Multiple Data-tables on Page
The header will stick to the first table until the user scrolls past the bottom of that table . The header will have the same behavior for each subsequent data-table.
-
+
### Interactions
@@ -164,24 +164,24 @@ The data-table will remain in the current viewport when the user:
The table can be scrolled horizontally. And to keep the row identifiable, the checkbox column and first column will be sticky. In creating the grid, the first column must always be an identifiable attribute such as name.
-
+
If there are more columns than can be shown in one view, the vertical scroll bar should appear for navigating to the rest of the column options as seen in the image below. Only 6 options should be shown per each vertical column, we should ensure that the all area of panel will be visible above the page fold.
-
+
In the example below, the first column is "Name" rather than "Customer ID."
This horizontal scroll should still work with page scroll and sticky header.
-
+
## Search
When the user enters a keyword in the search field and submits the query (by clicking the spyglass icon), the table will display only records that contain the designated keyword. The search term is displayed as a "chip" below the search field (and inline with any additional filters that were applied). In this layout, additional search terms can be paired with the initial term to further refine the results. Each time a term is submitted, the data is filtered, the term is displayed as a "chip" and the search field returns to it's initial state (it does not retain the term entered my the user).
-
+
-
+
### Autocomplete
@@ -189,19 +189,19 @@ As text is added to the search field, the system will suggest terms and phrases
* No more than 5 suggestions should be displayed at a time
-
+
### Search/Filter Tags
Once a search term or filter is applied and results are loaded into the table, the terms or parameters used to filter by are displayed in the minified version of the "filter chip(s)". If the user removes all the tags, the filters row would disappear.
-
+
### Error Checking/Validation
There will be no form validation or error checking for search queries since any combination of characters may be searched. Messaging will display in the data area when no results can be returned.
-
+
### User Flow
@@ -211,21 +211,21 @@ Upon conducting a query, a result set is returned based on the above rules. Once
The user will be able to select which columns are visible from here. Settings will also be contained in a panel that can be activated by clicking on the columns action. Users will also have the ability to cancel out of this prompt, as well as reset (restore) the table back to it's default column view. These settings will be 'sticky' per table, so users returning to any particular table will see the table the way it was last configured.
-
+
-
+
### Custom Views
Custom views allow the user to save the state of a table. When a view is saved, the table settings will be stored. These settings include column visibility and position, as well as any filter or search that has been applied to the table. Saving a 'view' will be done via a dropdown control. Saved views will be available per table.
-
+
### Editing Saved Views
Views can be named or deleted by clicking an edit icon. Refer to "Adding a custom value to drop down list" above for more detailed behavior.
-
+
## Filters
@@ -235,23 +235,23 @@ Filters allow users to customize the display of information in an associated dat
To access the Advanced Filters the user may click/tap the "Filters" button found in the table controls area. When activated, the button transforms into a tab and displays the available filters in a 'drawer' which opens between the table controls and the table data. The available filters are determined by the columns present in the table; therefore, if the user customizes the column visibility of the table to show some columns and hide others, the corresponding filters for these columns will display or hide in the filter 'drawer'.
-
+
Not all columns may be filtered (such as **Actions** or checkbox select) and therefore will not be presented in the list of filters even though their columns are visible in the data-table.
-
+
To apply filters, the user sets the desired parameters in the input fields of the appropriate filters. The action initiated by clicking/tapping the "Apply" button (found in the advanced filters area). When applied, the advanced filter 'drawer' closes and the data-table refreshes to display the filtered data. The applied filters are indicated to the user in the form of filter 'tags' that appear between the filter button and the table data. Filter 'tag' are listed in the order that they are applied and each individual 'tag' has a control for removing it.
-
+
### Removing Filters
Users may remove a filter setting by clicking/tapping the remove control next to the filter 'tag'. Doing so removes the particular filter from the *query*, the table refreshes and the data excluded by that filter then appears in the table. The user can quickly remove all applied filters by clicking/tapping the "clear all" link that follows the list of 'filter tags'.
-
+
## Data Table Views
@@ -278,7 +278,7 @@ This will be handled by the 'Reset' function in the settings drop down button. A
This feature will allow users to make bulk selections to items within any given data-table. Because users may be dealing with many "pages" of data, this function needs to be specific in respect to what is being selected. Thus a drop down will be used to allow for multiple options for selecting records.
-
+
This drop down will include the following:
@@ -293,11 +293,11 @@ This drop down only needs to appear where more than one page of data is availabl
The total number of records loaded into the table will display above the column headers.
-
+
As items are selected on the grid, a count for the number of items selected should be displayed next to the total count. This will give the user confidence that records are selected though they may not be on the current page view.
-
+
### Select
@@ -308,19 +308,19 @@ For tables which require a select column:
* Users may select multiple rows by using the checkboxes or the select all function.
* Selected rows will be indicated by a checked box and a highlight and/or border style which will delineate the selected rows from unselected rows.
-
+
### Toggle Switches
Some data-tables will be used to display "settings" content. In these instances a checkbox is not ideal for the experience, as it can be confusing to the user when pre-selected settings are displayed. Switches make the action and intent more clear to the user for these tasks. Therefore, if switches are present, checkboxes should not; the two should never be used in the same table. Since switches replace the functionality of checkboxes they should be the first column of the data-table.
-
+
### Single Select Button
The data table can also accommodate buttons in rows, and has a special case in the "Single Select" button. This button functions not unlike a typical radio button control, but is used instead of the radio button when the task flow or experience in the Admin application are better served with the more implicit action of selecting a single choice from a data table. This provides greater visibility and immediate confirmation of the action to the user. The use of this should be carefully considered in the context of the experience to determine if it provides greater understanding to the user than radio buttons.
-
+
## Editing
@@ -337,13 +337,13 @@ Not all data-tables will allow for inline editing.
* Once a row becomes editable, action buttons will appear below the row allowing a user to commit or cancel the edit.
* Editable fields will have a left-to-right tab order. [Tab] and [Enter] will set focus on the next editable field in the tab order, unless the focus is set to the last field in the tab order in which case [Enter] will commit the edit while [Tab] will set focus to the Save button.
-
+
-
+
Inline editing may require error handling on some fields. This should be done using real-time field validation. Some fields may allow for only a specific set of values. In these instances, a select or multi-select interaction should be used.
-
+
## Miscellaneous Features
@@ -355,7 +355,7 @@ Some data-tables will allow users to arrange columns in a customized order. A us
When dropped on an area that is not highlighted (or off target of the highlighted area) the column will return to it's original position. If the user wishes to maintain this position for future viewing, they must set a "Saved View", otherwise the default column order will prevail for following sessions.
-
+
### Drag and Drop Rows
@@ -367,27 +367,27 @@ Inline editing functionality should not be available for tables that require dra
### Single rows may be arranged via drag and drop
-
+
### Multiple rows may also be arranged via drag and drop
-
+
### Thumbnails
In cases where an image is associated with the data, as in the case of a product, the data-table will display a thumbnail view of the primary or default image (typically the first image in a series of image). By default the thumbnail image will appear to the far left of the table (after select checkboxes when present). The thumbnail image is a 'clickable target' independent of the typical click behavior of the row.
-
+
When the thumbnail is clicked a modal is presented over the data-table to provide a larger, more detailed view of the image. This modal should contain a heading that corresponds to the associated product name; a close control for the modal; a hyperlink that redirects the user to the details page.
-
+
### Parent-Child relationships
The data-table will support parent-child relationships. Parent and child records will be delineated via style and/or iconography. Parent nodes will be expandable/collapsible.
-
+
## Interactions
@@ -399,7 +399,7 @@ General interaction should follow standard web conventions. Interaction around d
* Horizontal scrollbars will be present whenever the data-table's width expands beyond the browser's viewport.
* The data-table controls should not expand with the table , instead the controls will float as the table is scrolled in both the vertical and horizontal direction.
-
+
### Column Headers
@@ -414,7 +414,7 @@ General interaction should follow standard web conventions. Interaction around d
Cursors will be used to indicate which actions the user can take in any particular situation. While cursors may differ slightly depending on operating system and browser, the below cursors are examples of what should be used per standard web conventions:
-
+
## Summary
diff --git a/src/pages/pattern-library/displaying-data/filters.md b/src/pages/pattern-library/displaying-data/filters.md
index fa35f02..c7d81db 100644
--- a/src/pages/pattern-library/displaying-data/filters.md
+++ b/src/pages/pattern-library/displaying-data/filters.md
@@ -13,13 +13,13 @@ Filters allow users to customize the display of information in an associated dat
A search box associated with a data-table allows users to filter table data by entering a term(s) in the field and clicking/tapping the search icon. The table refreshes to display only rows of data that have a relationship to this 'keyword'. The term(s) is displayed as a filter 'tag' in an area just beneath the search box. Users may add subsequent search terms to create a combination of filtering parameters to more specifically filter data.
-
+
-
+
In the event that the user enters a term that is not found in the data, the table will display a message to the user: "Your search term did not return any results". When this happens the user-entered term will remain in the search field for the user's reference.
-
+
Applied search terms (filters) may be removed by clicking the remove control, just as with any other filter.
@@ -27,23 +27,23 @@ Applied search terms (filters) may be removed by clicking the remove control, ju
To access the Advanced Filters the user may click/tap the "Filters" button found in the table controls area. When activated, the button transforms into a tab and displays the available filters in a 'drawer' which opens between the table controls and the table data. The available filters are determined by the columns present in the table; therefore, if the user customizes the column visibility of the table to show some columns and hide others, the corresponding filters for these columns will display or hide in the filter 'drawer'.
-
+
Not all columns may be filtered (i.e. **Actions** or checkbox select) and therefore will not be presented in the list of filters even though their columns are visible in the data-table.
-
+
To apply filters, the user sets the desired parameters in the input fields of the appropriate filters. The action initiated by clicking/tapping the "Apply" button (found in the advanced filters area). When applied, the advanced filter 'drawer' closes and the data-table refreshes to display the filtered data. The applied filters are indicated to the user in the form of filter 'tags' that appear between the filter button and the table data. Filter 'tag' are listed in the order that they are applied and each individual 'tag' has a control for removing it.
-
+
## Removing Filters
Users may remove a filter setting by clicking/tapping the remove control next to the filter 'tag'. Doing so removes the particular filter from the *query*, the table refreshes and the data excluded by that filter then appears in the table. The user can quickly remove all applied filters by clicking/tapping the "clear all" link that follows the list of 'filter tags'.
-
+
## Future Capabilities
@@ -53,6 +53,6 @@ Additional capabilities have been designed to further increase the functionality
In some unique instances a table may have "Quick Filters" associated with it. These Quick Filters allow the user to filter data based on pre-determined parameters, and are intended to help users quickly filter data to perform a *common user task* - reporting functions. Not every data-table will have Quick Filters. "Search Term" filtering and Advanced Filtering may be used in conjunction with Quick Filters. Quick Filters may be removed in the same manner as other filters via the remove control.
-
+
-
+
diff --git a/src/pages/pattern-library/displaying-data/tile.md b/src/pages/pattern-library/displaying-data/tile.md
index 58c06d4..697ece1 100644
--- a/src/pages/pattern-library/displaying-data/tile.md
+++ b/src/pages/pattern-library/displaying-data/tile.md
@@ -23,7 +23,7 @@ This topic contains examples of the Tile pattern used in the Admin with function
Tiles will be needed anytime there is a grid view option available. Tiles are a visual representation of the data table and are easily scan-able.
-
+
## Drag and Drop
@@ -37,34 +37,34 @@ The X in the top right corner of the tile will remove the tile from the category
To make a product a Hero Product, the user must select the checkbox and/or the Hero Product link to promote the tile to the top of the category. When the checkbox and/or Hero Product link is selected, a 1-2 second alert stating "This product is now a hero product" will appear and fade away. (The user has the option to opt out of these alerts.) Once a tile becomes a "Hero" a 1px yellow stroke highlights the tile at the top of the category.
-
+
## Removing Hero Product Checkbox and Link
To remove a product from the hero space, the user must deselect the checkbox and/or click the Hero Product link. When the checkbox and/or Hero Product link is selected, a 1-2 second alert stating, "This product is being removed" will appear and fade away. (The user has the option to opt out of these alerts.) Once selected, the tile will move to the first position in the category.
-
+
## Advancing Position
The user has the ability to advance a tile to the first position in the category and/or the last position in a category by selecting either the move first position icon, move up one icon, move down one icon or move last position icon. These icons help a user quickly move products around in a category and across multiple pages.
-
+
## Numerical Input
Clicking in the input field will allow the user to manually enter a numeric order and have the tile move to the position entered. If a tile is already in the chosen position, the tile will then move one space to the right and the new numeric value entered will take the position. Once the user enters a numeric value, using the keyboard and hitting return will move the tile to the entered position.
-
+
## Hero Product Section
Once a tile becomes a "Hero" a 1px yellow stroke highlights the tile at the top of the category. The user can have infinite hero products in a category. When there is more than one product highlighted in the hero space at the top of the category, the user can drag and drop tiles within the highlighted hero space. (Ex: A user can drag and drop the first hero tile to the last hero position as long as it is on the same page) The advance position icons and numeric input field are not active while a tile is in the hero position. To activate the advance position and numeric input field, the user must remove the tile from the hero space.
-
+
## Styling and Spacing
For specific details concerning styling including fonts, colors and effects and spacing and padding, please refer to the source PSD files and exports located on Box or contact the Commerce Product Design and User Experience team.
-
+
diff --git a/src/pages/pattern-library/displaying-data/tree.md b/src/pages/pattern-library/displaying-data/tree.md
index 1d47f22..0a61590 100644
--- a/src/pages/pattern-library/displaying-data/tree.md
+++ b/src/pages/pattern-library/displaying-data/tree.md
@@ -19,7 +19,7 @@ Tree component will be needed anytime it is required to navigate though multiple
The tree consists of two main "Anchors" and "Links":
-
+
### Anchors
@@ -49,13 +49,13 @@ The arrow to the left of the item can be used to expand or collapses the childre
Clicking "Expand All" will open all the nodes in the tree structure. Expand All link is the default state. Once "Expand All" is clicked the link changes to "Collapse All" If user manually expand all the items, this control should also be changed to "Collapse All."
-
+
### Collapse All
Clicking "Collapse All" will condense all the nodes in the tree structure. Once "Collapse All" is clicked link changes to "Expand All". If user manually collapsed all the items, this control should also be changed to "Collapse All."
-
+
## Usage: Navigation
@@ -63,7 +63,7 @@ This is used to navigate to the detail page of the selected item in the admin or
When tree is used to display more information on the same page the item clicked remains in selected state.
-
+
## Usage: Multi-Select
@@ -71,7 +71,7 @@ This is used when multiple selection of items are needed.
### Multi Select without Icon
-
+
### Multi Select with Icon
@@ -79,7 +79,7 @@ This tree has all functionality of multi-select tree along with having icons. Ic
Icons should always be placed on the left of the icon label and Icons should NOT be used as default feature for trees pattern.
-
+
### Behavior and Details of Multi Select Tree
@@ -97,7 +97,7 @@ Otherwise, the link remain "Select All."
_Note:_ The "Expand All/Collapse All" control can appear simultaneously with the "Select All/Clear All" control. They operate independently.
-
+
#### Select Indicators
@@ -107,7 +107,7 @@ _Note:_ The "Expand All/Collapse All" control can appear simultaneously with the
* 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.
-
+
_3. Checking a checkbox for a child item should automatically change its parent state to:_
@@ -136,15 +136,15 @@ Checkboxes and Drag handles are mutually exclusive features. i.e. Tree structure
_Notes:_ Moving the Items in the tree will also affect the parent – child relationship.
-
+
### Type 1. Drag and Arrange with Icon
-
+
### Type 2. Drag and Arrange without Icon
-
+
## Action Menu
@@ -154,11 +154,11 @@ The action icon is not required for the tree. It only appear as needed.
_Step 1:_ User click on the action icon.
-
+
_Step 2:_ The list of available actions against this item is shown.
-
+
_Move Up_ Once clicked, the item should be moved up within the parent. If the item is the first child, it cannot be moved up and the option will be disabled.
@@ -181,20 +181,20 @@ There are two types of items that can be added:
The "add child" button should always have more importance than the "add parent" button.
-
+
## Interaction
_Step 1:_ User click on the add button.
-
+
_Step 2:_ A [slide-out panel](../containers/slideouts-modals-overlays.md) should opens up to get the details of what to be added.
_Step 3:_ The item is added. The placement of the items will be determined as stated above.
-
+
## Style
-
+
diff --git a/src/pages/pattern-library/feedback-to-user/progress-indicator.md b/src/pages/pattern-library/feedback-to-user/progress-indicator.md
index 44d394d..22ced57 100644
--- a/src/pages/pattern-library/feedback-to-user/progress-indicator.md
+++ b/src/pages/pattern-library/feedback-to-user/progress-indicator.md
@@ -46,7 +46,7 @@ In general, it is not recommended to use the progress bar if the process can be
**States Diagram:**
-
+
1. **Process Trigger**
@@ -54,11 +54,11 @@ In general, it is not recommended to use the progress bar if the process can be
1. **Starting State**
- 
+ 
1. **Progressing**
- 
+ 
1. **Success**
@@ -68,11 +68,11 @@ In general, it is not recommended to use the progress bar if the process can be
The progress bar will disappeared and is replaced with this error message.
- 
+ 
## Variations
-
+
## Style
@@ -80,10 +80,10 @@ In general, it is not recommended to use the progress bar if the process can be
The spinner can be any of these 4 sizes.
-
+
### Progress Bar
Refer to Messaging Pattern for final styling on error message.
-
+
diff --git a/src/pages/pattern-library/getting-user-input/date-time-selector.md b/src/pages/pattern-library/getting-user-input/date-time-selector.md
index accc1d1..9975178 100644
--- a/src/pages/pattern-library/getting-user-input/date-time-selector.md
+++ b/src/pages/pattern-library/getting-user-input/date-time-selector.md
@@ -17,27 +17,27 @@ Use this element whenever a date, date range, time or time range needs to be gat
### Single Date Picker
-
+
### Date Range Picker
-
+
### Single Time Picker
-
+
### Time Range Picker
-
+
### Single Date and Time Picker
-
+
### Date and Time Range Picker
-
+
## Formats
@@ -74,7 +74,7 @@ The following applies to ranges only:
* The calendar/time widget will require a unique style for active and inactive areas
* User will not be able to select date or time on the To area until selection is made on the From area first
-
+
(Styles will support a disabled state for areas which depend on sequence for ranges)
@@ -117,33 +117,33 @@ MM/DD/YYYY can be confused with DD/MM/YYYY, so please assume the following:
Field selection works the same as a typical text field with
-
+
## Style
**Single Date Picker:**
-
+
**Date Range Picker:**
-
+
**Single Time Picker:**
-
+
**Time Range Picker:**
-
+
**Single Date and Time Picker:**
-
+
**Date and Time Range Picker:**
-
+
## Accessibility
@@ -178,7 +178,7 @@ Keyboard navigation on days that are not included the currently displayed month
* Ctrl+Space multiple selection of certain days.
* Esc closes a DatePicker that is opened as a Popup.
-Do not implement keyboard navigation schemes that would place more than one calendar day in the tab order at any time as this impacts the usability of keyboard navigation. For example, using HTML anchors for the gridcells places them all in the tab order impacting the usability of keyboard navigation.
+Do not implement keyboard navigation schemes that would place more than one calendar day in the tab order at any time as this impacts the usability of keyboard navigation. For example, using HTML anchors for the grid cells places them all in the tab order impacting the usability of keyboard navigation.
### WAI-ARIA Roles, States, and Properties
@@ -191,7 +191,7 @@ Do not implement keyboard navigation schemes that would place more than one cale
* When a day is selected it should have aria-selected="true" otherwise it should be set to "false" or removed.
* Changes in aria states, identified here, as well as focus, should be clearly styled to show the user where their point of regard is and what days are selected.
-When the datepicker is active a calendar day of the week should always have focus. This can be achieved by setting the tabindex on that day as appropriate and then using script to give it focus. Alternatively, the grid container could set aria-activedescendant to the id of the currently focused gridcell. Keep in mind that older browsers may not support aria-activedescendant.
+When the date picker is active a calendar day of the week should always have focus. This can be achieved by setting the tabindex on that day as appropriate and then using script to give it focus. Alternatively, the grid container could set aria-activedescendant to the id of the currently focused gridcell. Keep in mind that older browsers may not support aria-activedescendant.
### Time Picker Widget
diff --git a/src/pages/pattern-library/getting-user-input/form-elements.md b/src/pages/pattern-library/getting-user-input/form-elements.md
index 219ad95..3c2bca5 100644
--- a/src/pages/pattern-library/getting-user-input/form-elements.md
+++ b/src/pages/pattern-library/getting-user-input/form-elements.md
@@ -23,24 +23,24 @@ In most cases every text field, text box, radio button group, checkbox or checkb
**Example of label-top:**
-
+
**Example of label-left:**
-
+
## "Required" Indicator
As a matter of best practices, any input that is required in order to be successfully submitted should clearly bear an indication. This is achieved by including an asterisk in relation to the form element. The asterisk should precede the label whenever the label appears above the form field. However, for left-aligned form labels the asterisk should follow the label, thus appearing between the label and form field –this improves scanability making it less likely that the user will overlook the required fields.
-
+
## Focus State
To assist the user, the form element with `.focus()` will display a subtle blue stroke to indicate that the element is currently "active". Focus can be re-directed by "tabbing" or
otherwise selecting outside the form element that has focus.
-
+
## Form Elements and the Page Grid
@@ -48,30 +48,30 @@ For _label-left_ form elements the amount of horizontal real estate allowed for
**Grid and label-left form:**
-
+
**Grid and label-top form:**
-
+
## Text Field
Text fields are used to collect alphanumeric input directly from the user. As a matter of design, the length of the field should be comparable to the length of information to be collected. This can passively set an expectation on the part of the user as to how much or what type of information is to be provided.
-
+
### Additional Text Field
In cases where some, but not every, user may want to provide additional information (such as Building or Room Number as part of an address) an additional field may be paired with the initial text field. In these cases, if it is 'reasonably clear' what this additional field is
for, a label may not be necessary for the additional field. However, as a rule each form element should have a label.
-
+
### "Re-sizable" Text Field
It may be advantageous to allow the text area to be 'stretched' by the user to accommodate the amount of data input. This is most useful when the amount of data or character-count is unlimited and/or the amount of text to be entered large or unpredictable ('comments' for instance). When presenting this a re-sizable area to the user it is crucial to include the "grabber" icon in the lower-right corner of the field to indicate this functionality to the user.
-
+
In cases where a re-sizable text field is not desired, reasonable space should be provided to collect the data. If the text entered then exceeds the area, the text should flow upward, keeping the most recent text in view.
@@ -79,43 +79,43 @@ In cases where a re-sizable text field is not desired, reasonable space should b
Often times a text field will be paired with a checkbox to enable some behavior associated with the data provided ("Keep me signed in" on a log in screen for example). In these instances, most often, including a label for the checkbox element is not required or needed. A slight indentation of the sub-elemental checkbox can help inform the user that the elements are related and not two distinct form elements.
-
+
### Text Field with Icon Trigger or Button
A control may be placed inside (overlaid on) a text field to "trigger" a more sophisticated
or robust interaction, as in the case of something like **date picker**. The icon should appear on the far right end of the field. Once a user has interacted with the control and a value is set, the value should display in the field, as well as the control (icon). This of course allows the user to edit the field if they so desire.
-
+
When an ancillary or sub-action must be performed using the data input (or selected from) a particular element a, "button" may be required to initiate the sub-action and should be located in close proximity to the form element. If the sub-action involves a single form field an icon should be used and should directly follow the form element.
If the sub-action involves a set of form elements, as with **sign-in**, a more traditional "button" should follow the group. The button should follow the application UI style for buttons. A link may be substituted for a button, however doing so may reduce the 'find-ability' of the call to
action.
-
+
## Checkboxes
Checkboxes should be used in cases where one or many options may be selected. A checkboxes may also be used in cases where the user may wish to 'opt in' or enable an action or setting. Checkboxes may be used in relation to other form elements as well.
-
+
If there is a _parent-child_ relationship of associated checkboxes there should be some visual distinction for the user between "some" checked and "all" checked, in the event that the child elements are hidden from view as in a expandable section.
-
+
## Radio Buttons
Radio buttons should be used in cases of 'yes' or 'no'. The pair of radio buttons may be arranged either vertically or horizontally. Radio buttons may often have a default or preferred selection. This preferred selection should be the first button of the pair whenever possible. In some instances when only a single selection may be made but there are several options to choose from, all of the radio button in the set may appear un-selected or 'empty'. Once a user has made a selection however the selected state should be evident and be visible henceforth, even if the user changes the selection - it cannot be returned to the initial 'un-selected' state.
-
+
## Drop Down Selector - Single
A drop down selector may be used when two or more options are available, but only one of the options may be selected. However whenever only two options are available the use of a drop down element should be weighed against the use of radio buttons.
-
+
Best practices suggest that a drop down selector should not be used for 'binary' or Yes/No selections, radio buttons are preferable in these situations. If the selection is not mandatory, a checkbox is preferred. If visibility of the list of options is desired or advantageous for the user or if the list of options is lengthy (say more than 6) a 'list box' should be used instead of a dropdown.
@@ -127,62 +127,62 @@ When selecting multiple options and a drop down element is the desired implement
The advantage of a list box is that it exposes more options to the user. The list can be made scroll-able when space is a consideration and/or the list is long. A list box is mandatory when the list of options exceeds 6 items.
-
+
## Attribute Builder - 'Chips'
In instances where to user wishes to build a list of one or many, as in a list of email addresses for a distribution list or a set of color swatches for a product, an "attribute" builder may be employed. This is presented as a typical form field, but when the user _clicks_ into it a drop down list is revealed. The user may then select from the list as with a typical drop down or may begin typing to narrow the list, auto-suggest functionality would also apply to make this process more efficient. The selected options are then rendered as 'chips' in the field. The user can select as many as desired and the 'chip' fill in like bricks, wrapping to the next line when there is not enough space. These chips can then be removed either by clicking/tapping the chip in the field or 'backspacing' on the keyboard will remove each chip in reverse order (right to left inline).
-
+
## Form Field Validation
Client-side validation should be used whenever possible to assist the user in completing an error-free form prior to submitting the data. A validation check should be triggered when the user redirects focus (clicks or tabs out of a field). A notification message should appear when an error was made. This message should appear in immediate proximity of the form element where the error occurred. This same style should be applied when messaging errors returned from server-side validation checks. Please refer to [Admin Errors and Messages Writing](../../style-guide/content/errors-and-messages.md) documentation for more details.
-
+
## Disabled Form Field
It may be necessary in some instances to display a form element but disable it so that the user cannot interact with it. Disabling can indicate a conflict with other related form elements, that an "opt in" is required to enable the feature, or that the proper level of authentication has not been obtained by the user.
-
+
## Units and Measurement Indicators
In some cases it may be beneficial to indicate to the user the "unit" of the data to be
input, such as currency or weight. This is accomplished by including standard symbolic indicator of the "unit", such as using €to denote the currency Euros. The indicator may either precede the input area or follow the input area.
-
+
## Field Masking
Some fields may benefit the user by providing an indication of the desired format of the data to be input. The mask should appear when the field gains "focus".
-
+
## Read-only Form Data
It may be necessary or advantageous to display form field data that cannot be changed or edited. In these cases the form label should appear to provide context for the "read-only" data, but not the field bounding-box so that it is clear to the user that the data cannot be edited.
-
+
## Progressive Disclosure
In some instances rather than displaying a form element in a disabled state, it may be preferred to hide the element until the user takes an action to 'opt in'. Once the user takes the action to opt in the enabled field(s) is dynamically presented (becomes visible) to the user.
-
+
## Contextual Help tooltip
Akin to progressive disclosure is "contextual help". This may be used whenever it is likely the user will require or benefit from additional information regarding a form element. The advantage of "contextual help" over standard help text is that it provides more space for copy or when the majority of users would not need the information to complete the task. Its drawback is that it is hidden from 100% of the users and requires explicit action to reveal it. "Contextual help" should be used sparingly to minimize clutter. The user taps the icon to reveal the contextual help tooltip. Then taps again to close it.
-
+
## Help text
"Help text" may be associated with individual form elements. This text is used to provide specific details, helpful hints, or cautionary messages relating to the particular form element with which it is associated. Help text is always visible so care should be taken to ensure that the text is **necessary**, **helpful**, **clear** and **concise**. As with "Contextual Help", help text should be used judiciously.
-
+
## Styling and Spacing
@@ -190,7 +190,7 @@ For specific details concerning styling including fonts, colors and effects and
**Sample of specs:**
-
+
## Accessibility
diff --git a/src/pages/pattern-library/getting-user-input/image-uploader.md b/src/pages/pattern-library/getting-user-input/image-uploader.md
index 31a383e..e458f64 100644
--- a/src/pages/pattern-library/getting-user-input/image-uploader.md
+++ b/src/pages/pattern-library/getting-user-input/image-uploader.md
@@ -29,29 +29,29 @@ This pattern should be used specifically to upload images, and not to upload doc
The Image Uploader allows the user to browse for images to upload to the Admin application. This can accommodate single or multiple image upload. To initiate this behavior the user clicking on the "Upload Image" link (target area). The user then proceeds to select the desired images via the browser, using SHIFT + click or ALT/COMMAND + click to select multiple image files.
-
+
**Uploading via Drag and Drop:**
The user may also upload images (single or multiple) by dragging the desired images onto the Image Upload target area.
-
+
**Uploading Video Content:**
To upload a video to the Admin application the user taps the "Add Video" button.
-
+
-
+
A video settings panel is revealed that allows the user to provide the URL location of the video, write a description and upload a preview image for the video. The user taps the "Save" button to upload the information.
-
+
Once the video information is saved, the video settings panel closes and the user is returned to the image uploader (section) where the video preview image now appear.
-
+
@@ -60,23 +60,24 @@ Currently the application does not allow Drag and Drop for Video Content.
**Drag to Arrange Order:**
The order in which images are displayed can be arranged by dragging the image or video to the desired position.
-![](../../_images/pattern-library/image-uploader-arrange.jpg">
+
+
**Image Settings:**
In some areas of the Admin application uploaded images my have additional settings that effect the display of these images on the Storefront (e.g. Product Creation). These settings can be accessed via the "gear" icon found on the image thumbnail.
-
+
**Deleting an Image:**
Likewise, an image may be removed from the Admin application by tapping the "trashcan" icon.
-
+
## Dimensions
-
+
## Accessibility
diff --git a/src/pages/pattern-library/getting-user-input/row-pattern.md b/src/pages/pattern-library/getting-user-input/row-pattern.md
index 6cd9cdc..409b4de 100644
--- a/src/pages/pattern-library/getting-user-input/row-pattern.md
+++ b/src/pages/pattern-library/getting-user-input/row-pattern.md
@@ -48,23 +48,23 @@ The delete control _CAN_ allow the user to remove all rows, even the initial row
The "Add" link however should always be present to allow the user to add a row, even in the event of deleting all rows.
-
+
## Pagination
For better performance, the Row Pattern pagination should be enabled automatically whenever 20 (or more) rows are present. Once pagination is enabled an "Order" column should be appended to allow the user to rearrange the rows.
-
+
Once pagination is enabled an "Order" column should be appended to allow the user to rearrange the rows.
-
+
## Examples
Typically the Row Pattern will span either 8 or 12 columns for the page grid, depending on the layout of the page or panel on which it appears. The Row Pattern should accommodate all typical form elements as are necessary, but discretion should be used to insure the elements within the row are easy to read and interact with and do not become to cramped within the space.
-
+
## Accessibility
diff --git a/src/pages/pattern-library/getting-user-input/select-from-list.md b/src/pages/pattern-library/getting-user-input/select-from-list.md
index 8762e68..dea06fe 100644
--- a/src/pages/pattern-library/getting-user-input/select-from-list.md
+++ b/src/pages/pattern-library/getting-user-input/select-from-list.md
@@ -19,25 +19,25 @@ When user need to select item(s) from a list of items, and each item can be iden
This variation is good for Multi Selection with many options (10+), when the option does not need to be shown immediately or when space needs to be preserved.
-
+
### Single Select Dropdown
This variation is good for Single Selection with many options (10+), when the option does not need to be shown immediately or when space needs to be preserved.mmediately or when space needs to be preserved.
-
+
### Multi-Select List Box
The advantage of a list box is that it exposes more options to the user. The list can be made scroll-able when space is a consideration and/or the list is long. A list box is mandatory when the list of options exceeds 6 items.
-
+
### Single Select List Box
The advantage of a list box is that it exposes more options to the user. The list can be made scroll-able when space is a consideration and/or the list is long. A list box is mandatory when the list of options exceeds 6 items.
-
+
## Accessibility
diff --git a/src/pages/pattern-library/getting-user-input/use-default-config.md b/src/pages/pattern-library/getting-user-input/use-default-config.md
index cd42c74..6f5cc98 100644
--- a/src/pages/pattern-library/getting-user-input/use-default-config.md
+++ b/src/pages/pattern-library/getting-user-input/use-default-config.md
@@ -19,11 +19,11 @@ When the value of a textfield does not have a default value set.
## Behavior
-
+
## Style
-
+
## Variations
@@ -33,13 +33,13 @@ There are two variations. The behavior and style remains the same. The label is
Value is taken from default scope and user needs to switch to default scope to change the default value
-
+
### "Use Configuration Value"
Value is set in Stores > Store configuration and user has to go there to change the default.
-
+
## Accessibility
diff --git a/src/pages/pattern-library/graphics/iconography.md b/src/pages/pattern-library/graphics/iconography.md
index 658f3cd..164a461 100644
--- a/src/pages/pattern-library/graphics/iconography.md
+++ b/src/pages/pattern-library/graphics/iconography.md
@@ -23,7 +23,7 @@ Typically icons should represent a single, unique concept and be used consistent
In the Admin UI icons have a simple, flat, single-color, 2D, style. This style prevents the loss of detail at smaller sizes and makes the shapes easier to comprehend.
-
+
## Creating Icons
@@ -43,11 +43,11 @@ Any icon that is intended for general use in the UI should be submitted to the C
Here is a guide to help you get started creating your own icon:
-
+
How to use the icon grid:
-
+
## Icon Fonts
diff --git a/src/pages/pattern-library/navigation/links.md b/src/pages/pattern-library/navigation/links.md
index 2cdefde..7ed6326 100644
--- a/src/pages/pattern-library/navigation/links.md
+++ b/src/pages/pattern-library/navigation/links.md
@@ -21,7 +21,7 @@ When initiating an action or a process
## Style
-
+
## Accessibility
@@ -50,9 +50,9 @@ Full Guideline Reference for Links: [https://www.w3.org/TR/WCAG10-HTML-TECHS/](h
### Links in forms/body of text that goes to an external page
-
+
-
+
### Breadcrumbs
@@ -69,4 +69,4 @@ Full Guideline Reference for Links: [https://www.w3.org/TR/WCAG10-HTML-TECHS/](h
**Example:**
-
+
diff --git a/src/pages/pattern-library/navigation/wizard.md b/src/pages/pattern-library/navigation/wizard.md
index 4fffe31..71851b4 100644
--- a/src/pages/pattern-library/navigation/wizard.md
+++ b/src/pages/pattern-library/navigation/wizard.md
@@ -33,7 +33,7 @@ Use this pattern when the user needs to go through a process to accomplish a tas
The whole structure must be responsive and fluid.
-
+
**1. Wizard Title:**
@@ -63,7 +63,7 @@ This should always be in the format "Step #: Step Label".
Refer to below for basic styling. The special cases of styling can be found under variations.
-
+
## Interaction and Behavior
@@ -92,7 +92,7 @@ If the user is creating a new flow using wizard, the future steps can be disable
**Other Navigation** (besides back and next buttons)
-
+
## Variations
@@ -100,27 +100,27 @@ If the user is creating a new flow using wizard, the future steps can be disable
In the first step, back button is disabled.
-
+
-
+
In the last step, next button is disabled.
-
+
### 2.Process with Save Functionality at Any Step
In the first step, back button is disabled, and next button is enabled. Save button is present so the user who only need to edit specific step, can 'Save' right after they are done editing.
-
+
Any other steps, Save button is present. Both 'Back' and 'Next' buttons are enabled.
-
+
'Next' button becomes disabled. The user will use 'Save' button for saving.
-
+
### 3. Process with many steps that cannot fit in the given section
@@ -128,4 +128,4 @@ It is not recommended to have too many steps for a wizard. But if a use case ari
(for specific styling of this variation, refer to the link to .psd files in Assets.)
-
+
diff --git a/src/pages/pattern-library/staging-patterns/module.md b/src/pages/pattern-library/staging-patterns/module.md
index 65dff15..bbf77f9 100644
--- a/src/pages/pattern-library/staging-patterns/module.md
+++ b/src/pages/pattern-library/staging-patterns/module.md
@@ -25,36 +25,36 @@ The scheduled changes module, as defined below, should only be used with stage-a
When no updates are available to be displayed on the timeline.
-
+
### Multiple Updates View
Shows when several updates are scheduled for a stage-able entity.
-
+
### Single Update View
When a single update is scheduled, the module's default height is the same as the Multiple Updates View. Users can re-size the module, using the dragger at the bottom of the module.
-
+
### Loading More Updates
The "Load More" button appears at the bottom of the list of scheduled updates. By default, 5 scheduled updates are displayed. To view more, users can click "Load More" to add the next set of scheduled updates.
-
+
## Styling
### No Updates View
-
+
### Single Update View - minimum height
-
+
### Multiple Updates View style
-
+
diff --git a/src/pages/pattern-library/staging-patterns/timeline-dashboard.md b/src/pages/pattern-library/staging-patterns/timeline-dashboard.md
index 098d7d4..2693c8e 100644
--- a/src/pages/pattern-library/staging-patterns/timeline-dashboard.md
+++ b/src/pages/pattern-library/staging-patterns/timeline-dashboard.md
@@ -39,7 +39,7 @@ These are the individual changes contained within an update.
### What markers mean on timeline
-
+
1. The user can scroll the timeline to see upcoming updates by tapping the arrow on an update, scrolling the timeline with scroll control, or the right arrow.
@@ -47,50 +47,50 @@ These are the individual changes contained within an update.
As the default state, this view shows completed, active and scheduled updates on the dashboard. The timeline's default date range is 1 week, which can be changed and customized.Updates are displayed in chronological order, with the most recent start date on top.
-
+
### Update Summary, in Overlay Window
When clicked, a bar on the timeline spawns an overlay window, showing a summary of the objects contained in the update. The window includes controls to edit or preview the update.
-
+
### 4-Week Zoom Control
A slider control at the bottom of the page allows users to zoom out from 1 week to 4 weeks, viewing a bigger timeline of updates.
-
+
### "Load More" Control
On the default timeline view, the number of updates displayed is set to 10. Clicking "Load More" adds more updates on the timeline. A grid menu control changes the number of items displayed per page.
-
+
### Horizontal Scrolling for Future Updates
A horizontal scrollbar at the bottom of the timeline provides the capability to view future updates that do not fit inside the span of the page. This scrollbar is usually not displayed.
-
+
### Prioritized Timeline View, with Drag and Drop
This is a variation of the timeline. This view only appears when stage-able entities on the timeline need to be ordered by priority. In the example displayed below – the priority scale has been used to display the sort order of the rules. To re-arrange the order, an item on the timeline can be dragged and moved.
-
+
### Data Table View
This is an alternative view to the timeline in data table format. The functionalities of the timeline and the data table are consistent except for the pagination feature, which is used for data table view only.
-
+
## Styling
### Updates schedule
-
+
### Update Summary, in Overlay Window
-
+
diff --git a/src/pages/pattern-library/templates/address-form.md b/src/pages/pattern-library/templates/address-form.md
index dd22b6e..2f61e9b 100644
--- a/src/pages/pattern-library/templates/address-form.md
+++ b/src/pages/pattern-library/templates/address-form.md
@@ -30,7 +30,7 @@ The only variation of this pattern at this time is the North American Address En
| ZIP/Postal Code | Text Field | Yes |
| Country | Dropdown (Default can be localized) | Yes |
-
+
## Styling
@@ -38,7 +38,7 @@ This pattern will follow the Form standards established in the Form Elements and
## Usage Example
-
+
## Assets
diff --git a/src/pages/pattern-library/templates/sign-in-form.md b/src/pages/pattern-library/templates/sign-in-form.md
index 32a3042..1be7344 100644
--- a/src/pages/pattern-library/templates/sign-in-form.md
+++ b/src/pages/pattern-library/templates/sign-in-form.md
@@ -34,7 +34,7 @@ In its initial state the sign-in module consists of
* a link to retrieve the user's password
* a button to submit the user's credentials – **Sign in**
-
+
### Error state
@@ -45,7 +45,7 @@ In the event that invalid credentials are submitted the sign-in module consists
* a link to retrieve the user's password
* a button to submit the user's credentials – **Sign in**
-
+
### Password retrieval
@@ -56,7 +56,7 @@ If the user opts to retrieve their password via the hyperlink ("Forgot your pass
* 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"
-
+
### Confirmation of password retrieval
@@ -66,7 +66,7 @@ Once a user submits their email address to retrieve their password, the module w
* 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"
-
+
### Error of password retrieval
@@ -77,7 +77,7 @@ In the event that the user enters an invalid email address, either by mistyping
* 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"
-
+
### Successful sign-out
@@ -88,7 +88,7 @@ When the user signs out of the system they are presented with the sign-in module
* a link to retrieve the user's password
* a button to submit the user's credentials – **Sign in**.
-
+
## Style
@@ -98,24 +98,24 @@ The module container should be centered in the browser and should be some percen
### Initial state
-
+
### Error state
-
+
### Password Retrieval
-
+
### Confirmation of password retrieval
-
+
### Error of password retrieval
-
+
### Successful sign-out
-
+
diff --git a/src/pages/style-guide/design/color.md b/src/pages/style-guide/design/color.md
index 68b3fd4..79cf692 100644
--- a/src/pages/style-guide/design/color.md
+++ b/src/pages/style-guide/design/color.md
@@ -9,4 +9,4 @@ keywords:
Our color palette reflects our brand personality. It meets accessibility standards and provides clear legibility, hierarchy, navigation, and messaging.
-
+
diff --git a/src/pages/style-guide/design/iconography.md b/src/pages/style-guide/design/iconography.md
index 76b2217..f287296 100644
--- a/src/pages/style-guide/design/iconography.md
+++ b/src/pages/style-guide/design/iconography.md
@@ -29,7 +29,7 @@ However, an icon or a design element in an icon can sometimes serve different fu
In the Admin, icons have a simple, flat, single-color, and two-dimensional style. This style prevents loss of detail at smaller sizes and makes the shapes easier to recognize.
-
+
## Creating icons
@@ -57,11 +57,11 @@ For any icon to be used in Admin, ask the Adobe Commerce Product Team to review
Here's one method to get started:
-
+
Learn how to use the icon grid:
-
+
## Icon fonts
diff --git a/src/pages/style-guide/design/page-grids.md b/src/pages/style-guide/design/page-grids.md
index 53fd64e..dfd8ef3 100644
--- a/src/pages/style-guide/design/page-grids.md
+++ b/src/pages/style-guide/design/page-grids.md
@@ -13,7 +13,7 @@ In the Admin, a grid is used on all pages to establish global layouts for page t
- The 12-column grid's minimum width spans 984px. The grid expands its layout across larger screens.
- For views smaller than 984px, a page's layout doesn't change as the page shrinks to fit smaller screen widths.
-
+
## Slide-out grid
@@ -33,7 +33,7 @@ When a panel spawns, it slides from right to left atop and almost completely ove
Standard layout within the edges of a browser screen
-
+
(Panel position in relation to browser edge)
@@ -43,7 +43,7 @@ Spacing:
Slide-out content is contained in a 12-column page grid, with additional 15px padding on the left edge. The gutter spacing at left is fluid, based on browser width.
-
+
(Nested page-grid with additional padding)
@@ -53,4 +53,4 @@ Nested slide-outs:
For multiple panels displayed, additional gutter space is used at left to show a small sliver of a Slide-out below another Slide-out.
-
+