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/components/ui/disclosure/disclosure.constants.ts

@@ -0,0 +1,4 @@
+export enum DisclosureVariant {
+  Default = 'default',
+  Arrow = 'arrow',
+}

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">
+          {renderSummaryByType(variant, title)}
-            <Icon
+
-              className="disclosure__summary--icon"
-              name={IconName.Add}
-              size={IconSize.Sm}
-              marginInlineEnd={2}
-            />
-            {title}
-          </summary>
           <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;

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;
+    }
+  }
 }

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} />
+);