Updated accordion extra action demo to show different arrow styling

Author: TAYTS

src-docs/src/views/accordion/accordion_extra.js

@@ -1,13 +1,37 @@
 import React from 'react';
 
-import { EuiAccordion, EuiButton } from '../../../../src/components';
+import { EuiAccordion, EuiButton, EuiSpacer } from '../../../../src/components';
 
 export default () => (
-  <EuiAccordion
-    id="accordionExtra"
-    buttonContent="Click to open"
-    extraAction={<EuiButton size="s">Extra action!</EuiButton>}
-    paddingSize="l">
-    <div>Opened content.</div>
-  </EuiAccordion>
+  <>
+    <EuiAccordion
+      id="accordionExtra"
+      buttonContent="Click to open (Arrow on the left)"
+      extraAction={<EuiButton size="s">Extra action!</EuiButton>}
+      paddingSize="l">
+      <div>Opened content.</div>
+    </EuiAccordion>
+
+    <EuiSpacer />
+
+    <EuiAccordion
+      id="accordionExtra"
+      arrowDisplay="right"
+      buttonContent="Click to open (Arrow on the right)"
+      extraAction={<EuiButton size="s">Extra action!</EuiButton>}
+      paddingSize="l">
+      <div>Opened content.</div>
+    </EuiAccordion>
+
+    <EuiSpacer />
+
+    <EuiAccordion
+      id="accordionExtra"
+      arrowDisplay="none"
+      buttonContent="Click to open"
+      extraAction={<EuiButton size="s">Extra action!</EuiButton>}
+      paddingSize="l">
+      <div>Opened content.</div>
+    </EuiAccordion>
+  </>
 );