chore(docs): accordion page restructure (VIV-2078)

[TaylorJ76]

No description provided.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (d61b119) to head (3b262a8).
Report is 1155 commits behind head on main.

Additional details and impacted files

@@             Coverage Diff             @@
##              main     #1981     +/-   ##
===========================================
  Coverage   100.00%   100.00%             
===========================================
  Files          123       361    +238     
  Lines         1562      7308   +5746     
  Branches       108       971    +863     
===========================================
+ Hits          1562      7308   +5746     

Flag	Coverage Δ
unittests	100.00% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[rachelbt]

I understand unifying accordion + accordion-item to the same page, especially where there's only one properly but still I find the new docs a little unclear.
We also have other components that one wraps the other and both has lots of properties (see- menu + menu-item).

• the examples iframe that contains 2 accordions are not clear enough. The seperation need to be bigger IMO.
• Maybe its better to write the property in the accordion header (like - item inside a single mode)
• Same for the expanded + size
• The icon trailing example - maybe its better to change it to a use case of + / - when open closed.
• Under code - can the slots be before events?
• we can add use case with +/- to icon and a use case of one accordion item inside action-items

[rachelbt]

Looks better now :)
in headline (in code) and in size it still look a bit off the 2 samples together. I wonder about separating them to 2 iframes. WDYT? Inexpand mode it looks great!

In code - you are missing the meta css-variable
in use case - maybe we can add the single item inside action-group
in guidelines I think we can add not to mix sizes inside accordion - either normal or condensed. Not that important though :)

[rachelbt]

sorry - a few more comments

[rachelbt]

Suggested change

	<vwc-accordion expand-mode="multiple">
	<vwc-accordion expand-mode="multi">

We have a bug... if its doesn't say "single" then its multi.
Even with expand-mode="rachel" its multi :) :) :)
I opened a ticket for this: https://jira.vonage.com/browse/VIV-2224

[rachelbt]

I still think that its not the best looks.
WDYS about this:
all closed by default. one after another

<div class="container">
	<div class="example">
		<b>Normal</b>
		<vwc-accordion expand-mode="multiple">
			<vwc-accordion-item size="normal" heading="Accordion item 1">
				This is the first item's accordion body.
			</vwc-accordion-item>
			<vwc-accordion-item size="normal" heading="Accordion item 2">
				This is the second item's accordion body.
			</vwc-accordion-item>
		</vwc-accordion>
	</div>
	<div class="example">
		<b>Condensed</b>
		<vwc-accordion expand-mode="multiple">
			<vwc-accordion-item size="condensed" heading="Accordion item 1">
				This is the first item's accordion body.
			</vwc-accordion-item>
			<vwc-accordion-item size="condensed" heading="Accordion item 2">
				This is the second item's accordion body.
			</vwc-accordion-item>
		</vwc-accordion>
	</div>
</div>

<style>
	.container {
		display: flex;
		flex-direction: column;
		gap: 48px;
		inline-size: 100%;

	}
	.example {
		flex-grow: 1;
		inline-size: 100%;
			}
	vwc-accordion {margin-top: 16px; display: block;}
</style>

[rachelbt]

I think adding the headlines is a problem.
First - we do not have inside the iframe 2 + 3 before them
It can lead to question regarding the heading size not changing according to the headline level.
I would go same as size.

[TaylorJ76]

I have changed it to include a H1 and H2. But I do think they are needed to give context to how the component should be used accessibly.