From b60c21f1311c54bc3b722669d777da9198dd3b9a Mon Sep 17 00:00:00 2001
From: Marionne Patel <95588923+marionnegp@users.noreply.github.com>
Date: Tue, 5 Nov 2024 01:02:56 -0500
Subject: [PATCH] docs(accordion): update best practices (#2029)
* docs(accordion): update best practices
* docs(accordion): fix image and add color-palette to examples
* docs(accordion): add back width and height of images
* docs(accordion): fix width-adjustment value
---
elements/rh-accordion/docs/20-guidelines.md | 85 ++++++++++++++-----
...ordion-best-practices-mixing-themes-do.svg | 43 ++++++++++
...dion-best-practices-mixing-themes-dont.svg | 49 +++++++++++
.../accordion-best-practices-one-panel-do.svg | 26 ++++++
...ccordion-best-practices-one-panel-dont.svg | 15 ++++
...ion-best-practices-text-readability-do.svg | 49 +++++++++++
...n-best-practices-text-readability-dont.svg | 49 +++++++++++
7 files changed, 294 insertions(+), 22 deletions(-)
create mode 100644 elements/rh-accordion/docs/accordion-best-practices-mixing-themes-do.svg
create mode 100644 elements/rh-accordion/docs/accordion-best-practices-mixing-themes-dont.svg
create mode 100644 elements/rh-accordion/docs/accordion-best-practices-one-panel-do.svg
create mode 100644 elements/rh-accordion/docs/accordion-best-practices-one-panel-dont.svg
create mode 100644 elements/rh-accordion/docs/accordion-best-practices-text-readability-do.svg
create mode 100644 elements/rh-accordion/docs/accordion-best-practices-text-readability-dont.svg
diff --git a/elements/rh-accordion/docs/20-guidelines.md b/elements/rh-accordion/docs/20-guidelines.md
index 0d72e8496d..4d9634a89e 100644
--- a/elements/rh-accordion/docs/20-guidelines.md
+++ b/elements/rh-accordion/docs/20-guidelines.md
@@ -166,35 +166,76 @@ smaller.
## Best practices
-### One panel
-Do not display one panel only, use an expandable section instead.
+### One panel
-
-
-
+
+
+
+
+
+ Use accordion in groups of two or more.
+
+
+
+
+
+
+ Do not display one panel only.
+
+
### Text readability
-Text within panels should not exceed `750px` to maintain optimal readability.
+
+
+
+
-
-
-
+ The text in a panel should be limited to a maximum width of 750px, which maintains optimal readability.
+
+
+
+
+
+
+
+ Do not allow text within panels to fill the entire width of a panel, if the text would exceed a width of 750px.
+
### Mixing themes
-Do not use a dark theme accordion in a light theme environment and vice versa.
+
+
+
+
+
+ An accordion group should match the theme of the container it’s in. This ensures that all of the text is visible and has adequate color contrast.
+
+
+
+
+
+
+ Do not use a light theme accordion in a dark theme environment and vice versa because it may cause accessibility and usability issues.
+
+
-
-
-
diff --git a/elements/rh-accordion/docs/accordion-best-practices-mixing-themes-do.svg b/elements/rh-accordion/docs/accordion-best-practices-mixing-themes-do.svg
new file mode 100644
index 0000000000..c80ec218db
--- /dev/null
+++ b/elements/rh-accordion/docs/accordion-best-practices-mixing-themes-do.svg
@@ -0,0 +1,43 @@
+
diff --git a/elements/rh-accordion/docs/accordion-best-practices-mixing-themes-dont.svg b/elements/rh-accordion/docs/accordion-best-practices-mixing-themes-dont.svg
new file mode 100644
index 0000000000..3548cbee33
--- /dev/null
+++ b/elements/rh-accordion/docs/accordion-best-practices-mixing-themes-dont.svg
@@ -0,0 +1,49 @@
+
diff --git a/elements/rh-accordion/docs/accordion-best-practices-one-panel-do.svg b/elements/rh-accordion/docs/accordion-best-practices-one-panel-do.svg
new file mode 100644
index 0000000000..1665df4241
--- /dev/null
+++ b/elements/rh-accordion/docs/accordion-best-practices-one-panel-do.svg
@@ -0,0 +1,26 @@
+
diff --git a/elements/rh-accordion/docs/accordion-best-practices-one-panel-dont.svg b/elements/rh-accordion/docs/accordion-best-practices-one-panel-dont.svg
new file mode 100644
index 0000000000..1b8dc825e7
--- /dev/null
+++ b/elements/rh-accordion/docs/accordion-best-practices-one-panel-dont.svg
@@ -0,0 +1,15 @@
+
diff --git a/elements/rh-accordion/docs/accordion-best-practices-text-readability-do.svg b/elements/rh-accordion/docs/accordion-best-practices-text-readability-do.svg
new file mode 100644
index 0000000000..4d7d57d6ff
--- /dev/null
+++ b/elements/rh-accordion/docs/accordion-best-practices-text-readability-do.svg
@@ -0,0 +1,49 @@
+
diff --git a/elements/rh-accordion/docs/accordion-best-practices-text-readability-dont.svg b/elements/rh-accordion/docs/accordion-best-practices-text-readability-dont.svg
new file mode 100644
index 0000000000..fa895e5f35
--- /dev/null
+++ b/elements/rh-accordion/docs/accordion-best-practices-text-readability-dont.svg
@@ -0,0 +1,49 @@
+