From 0917b7c52f993373053b36e10ab6a13e8f50e527 Mon Sep 17 00:00:00 2001
From: Ariella Vu <20778143+digiwand@users.noreply.github.com>
Date: Thu, 13 Jul 2023 22:38:42 +0200
Subject: [PATCH] Add alternative summary UI with arrow icon to the Disclosure
 component (#19770)

* disclosure: add isArrowSummary option w/ UI

* disclosure.scss: add missing trailing semicolon

* Disclosure: replace isArrowSummary -> type prop

* Disclosure: alphabetize props

* Disclosure: add cursor: pointer

* storybook: add Disclosure - Type Arrow

* Disclosure: margin-left: 0 arrow type content

* Disclosure: fix margin-left: 0 arrow type

* Disclosure: support Text media query for Arrow

* Disclosure: clean rn type -> variant

* Disclosure: use size prop for arrow summary text

* Disclosure: update rest of type -> variant

* Disclosure: 1 more type -> variant

* Disclosure: TypeArrow -> VariantArrow
---
 .../ui/disclosure/disclosure.constants.ts     |  4 ++
 ui/components/ui/disclosure/disclosure.js     | 63 +++++++++++++++----
 ui/components/ui/disclosure/disclosure.scss   | 28 +++++++++
 .../ui/disclosure/disclosure.stories.js       | 20 ++++--
 4 files changed, 98 insertions(+), 17 deletions(-)
 create mode 100644 ui/components/ui/disclosure/disclosure.constants.ts

diff --git a/ui/components/ui/disclosure/disclosure.constants.ts b/ui/components/ui/disclosure/disclosure.constants.ts
new file mode 100644
index 000000000..4326545de
--- /dev/null
+++ b/ui/components/ui/disclosure/disclosure.constants.ts
@@ -0,0 +1,4 @@
+export enum DisclosureVariant {
+  Default = 'default',
+  Arrow = 'arrow',
+}
diff --git a/ui/components/ui/disclosure/disclosure.js b/ui/components/ui/disclosure/disclosure.js
index e20746308..297646c09 100644
--- a/ui/components/ui/disclosure/disclosure.js
+++ b/ui/components/ui/disclosure/disclosure.js
@@ -1,9 +1,53 @@
 import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Icon, IconName, IconSize } from '../../component-library';
+import { Icon, IconName, IconSize, Text } from '../../component-library';
+import { Color, TextVariant } from '../../../helpers/constants/design-system';
+import { DisclosureVariant } from './disclosure.constants';
 
-const Disclosure = ({ children, title, size }) => {
+/**
+ * @param {string} variant
+ * @param {string} title
+ * @param {string} size
+ * @returns {JSX.Element}
+ */
+const renderSummaryByType = (variant, title, size) => {
+  switch (variant) {
+    case DisclosureVariant.Arrow: {
+      const textVariant =
+        size === 'small' ? TextVariant.bodySm : TextVariant.bodyMd;
+
+      return (
+        <summary className="disclosure__summary is-arrow">
+          <Text color={Color.primaryDefault} variant={textVariant}>
+            {title}
+          </Text>
+          <Icon
+            className="disclosure__summary--icon"
+            color={Color.primaryDefault}
+            name={IconName.ArrowUp}
+            size={IconSize.Sm}
+            marginInlineStart={2}
+          />
+        </summary>
+      );
+    }
+    default:
+      return (
+        <summary className="disclosure__summary">
+          <Icon
+            className="disclosure__summary--icon"
+            name={IconName.Add}
+            size={IconSize.Sm}
+            marginInlineEnd={2}
+          />
+          {title}
+        </summary>
+      );
+  }
+};
+
+const Disclosure = ({ children, title, size, variant }) => {
   const disclosureFooterEl = useRef(null);
   const [open, setOpen] = useState(false);
 
@@ -23,15 +67,8 @@ const Disclosure = ({ children, title, size }) => {
     <div className="disclosure" onClick={() => setOpen((state) => !state)}>
       {title ? (
         <details>
-          <summary className="disclosure__summary">
-            <Icon
-              className="disclosure__summary--icon"
-              name={IconName.Add}
-              size={IconSize.Sm}
-              marginInlineEnd={2}
-            />
-            {title}
-          </summary>
+          {renderSummaryByType(variant, title)}
+
           <div className={classnames('disclosure__content', size)}>
             {children}
           </div>
@@ -46,13 +83,15 @@ const Disclosure = ({ children, title, size }) => {
 
 Disclosure.propTypes = {
   children: PropTypes.node.isRequired,
-  title: PropTypes.string,
   size: PropTypes.string,
+  title: PropTypes.string,
+  variant: PropTypes.string,
 };
 
 Disclosure.defaultProps = {
   size: 'normal',
   title: null,
+  variant: DisclosureVariant.Default,
 };
 
 export default Disclosure;
diff --git a/ui/components/ui/disclosure/disclosure.scss b/ui/components/ui/disclosure/disclosure.scss
index 06b9044b1..179de33db 100644
--- a/ui/components/ui/disclosure/disclosure.scss
+++ b/ui/components/ui/disclosure/disclosure.scss
@@ -7,6 +7,7 @@
     padding-bottom: 10px;
     font-weight: bold;
     display: flex;
+    cursor: pointer;
 
     &::-webkit-details-marker,
     &::marker {
@@ -23,4 +24,31 @@
       font-size: 12px;
     }
   }
+
+  // Arrow Summary
+
+  details[open] {
+    .disclosure__summary.is-arrow .disclosure__summary--icon {
+      transform: rotateX(0deg);
+    }
+  }
+
+  &__summary.is-arrow {
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+
+    &:hover {
+      opacity: 0.5;
+    }
+
+    + .disclosure__content {
+      margin-left: 0;
+    }
+
+    .disclosure__summary--icon {
+      transform: rotateX(180deg);
+      transition: 0.1s transform;
+    }
+  }
 }
diff --git a/ui/components/ui/disclosure/disclosure.stories.js b/ui/components/ui/disclosure/disclosure.stories.js
index 708ab5ed4..6b091528d 100644
--- a/ui/components/ui/disclosure/disclosure.stories.js
+++ b/ui/components/ui/disclosure/disclosure.stories.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { DisclosureVariant } from './disclosure.constants';
 import Disclosure from '.';
 
 export default {
@@ -8,20 +9,29 @@ export default {
     children: {
       control: 'text',
     },
-    title: {
-      control: 'text',
-    },
     size: {
       control: 'text',
     },
+    title: {
+      control: 'text',
+    },
+    variant: {
+      control: {
+        type: 'select',
+      },
+      options: [...Object.values(DisclosureVariant)],
+    },
   },
   args: {
-    title: 'title',
     children: 'hello world',
     size: 'normal',
+    title: 'title',
   },
 };
 
 export const DefaultStory = (args) => <Disclosure {...args} />;
-
 DefaultStory.storyName = 'Default';
+
+export const VariantArrow = (args) => (
+  <Disclosure variant={DisclosureVariant.Arrow} {...args} />
+);