added new accordion with updated styles

Author: rubydong

packages/compass-indexes/src/components/create-index-form/create-index-form.tsx

@@ -21,6 +21,7 @@ import { usePreference } from 'compass-preferences-model/provider';
 import IndexFlowSection from './index-flow-section';
 import QueryFlowSection from './query-flow-section';
 import toNS from 'mongodb-ns';
+import CreateIndexOptionsAccordion from './create-index-options-accordion';
 
 const createIndexModalFieldsStyles = css({
   margin: `${spacing[600]}px 0 ${spacing[800]}px 0`,
@@ -165,28 +166,52 @@ function CreateIndexForm({
           collectionName={collectionName}
         />
       )}
-
-      {/* TODO in CLOUDP-314036: update the accordion design */}
-      <Accordion data-testid="create-index-modal-toggle-options" text="Options">
-        <div
-          data-testid="create-index-modal-options"
-          className={createIndexModalOptionStyles}
+      {showIndexesGuidanceVariant ? (
+        <CreateIndexOptionsAccordion>
+          <div
+            data-testid="create-index-modal-options"
+            className={createIndexModalOptionStyles}
+          >
+            <CheckboxInput name="unique"></CheckboxInput>
+            <CollapsibleInput name="name"></CollapsibleInput>
+            <CollapsibleInput name="expireAfterSeconds"></CollapsibleInput>
+            <CollapsibleInput name="partialFilterExpression"></CollapsibleInput>
+            <CollapsibleInput name="wildcardProjection"></CollapsibleInput>
+            <CollapsibleInput name="collation"></CollapsibleInput>
+            {hasColumnstoreIndexesSupport(serverVersion) && (
+              <CollapsibleInput name="columnstoreProjection"></CollapsibleInput>
+            )}
+            <CheckboxInput name="sparse"></CheckboxInput>
+            {showRollingIndexOption && (
+              <CheckboxInput name="buildInRollingProcess"></CheckboxInput>
+            )}
+          </div>
+        </CreateIndexOptionsAccordion>
+      ) : (
+        <Accordion
+          data-testid="create-index-modal-toggle-options"
+          text="Options"
         >
-          <CheckboxInput name="unique"></CheckboxInput>
-          <CollapsibleInput name="name"></CollapsibleInput>
-          <CollapsibleInput name="expireAfterSeconds"></CollapsibleInput>
-          <CollapsibleInput name="partialFilterExpression"></CollapsibleInput>
-          <CollapsibleInput name="wildcardProjection"></CollapsibleInput>
-          <CollapsibleInput name="collation"></CollapsibleInput>
-          {hasColumnstoreIndexesSupport(serverVersion) && (
-            <CollapsibleInput name="columnstoreProjection"></CollapsibleInput>
-          )}
-          <CheckboxInput name="sparse"></CheckboxInput>
-          {showRollingIndexOption && (
-            <CheckboxInput name="buildInRollingProcess"></CheckboxInput>
-          )}
-        </div>
-      </Accordion>
+          <div
+            data-testid="create-index-modal-options"
+            className={createIndexModalOptionStyles}
+          >
+            <CheckboxInput name="unique"></CheckboxInput>
+            <CollapsibleInput name="name"></CollapsibleInput>
+            <CollapsibleInput name="expireAfterSeconds"></CollapsibleInput>
+            <CollapsibleInput name="partialFilterExpression"></CollapsibleInput>
+            <CollapsibleInput name="wildcardProjection"></CollapsibleInput>
+            <CollapsibleInput name="collation"></CollapsibleInput>
+            {hasColumnstoreIndexesSupport(serverVersion) && (
+              <CollapsibleInput name="columnstoreProjection"></CollapsibleInput>
+            )}
+            <CheckboxInput name="sparse"></CheckboxInput>
+            {showRollingIndexOption && (
+              <CheckboxInput name="buildInRollingProcess"></CheckboxInput>
+            )}
+          </div>
+        </Accordion>
+      )}
     </>
   );
 }

packages/compass-indexes/src/components/create-index-form/create-index-options-accordion.tsx

@@ -0,0 +1,84 @@
+import {
+  Body,
+  css,
+  cx,
+  Icon,
+  palette,
+  useDarkMode,
+} from '@mongodb-js/compass-components';
+import React, { useState } from 'react';
+
+const buttonLightThemeStyles = css({
+  color: palette.gray.dark2,
+});
+const buttonDarkThemeStyles = css({
+  color: palette.white,
+});
+
+const buttonStyles = css({
+  fontWeight: 'bold',
+  display: 'flex',
+  alignItems: 'center',
+  paddingLeft: 0,
+  paddingRight: 0,
+  border: 'none',
+  background: 'none',
+  boxShadow: 'none',
+  '&:hover': {
+    cursor: 'pointer',
+  },
+});
+
+const buttonIconContainerStyles = css({
+  marginLeft: '4px',
+});
+
+const iconDarkThemeStyles = css({
+  color: palette.gray.base,
+});
+
+const iconLightThemeStyles = css({
+  color: palette.gray.dark1,
+});
+
+const CreateIndexOptionsAccordion = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [open, setOpen] = useState(false);
+  const darkMode = useDarkMode();
+
+  const onOpenChange = () => {
+    setOpen(!open);
+  };
+
+  return (
+    <>
+      <button
+        className={cx(
+          darkMode ? buttonDarkThemeStyles : buttonLightThemeStyles,
+          buttonStyles
+        )}
+        type="button"
+        aria-expanded={open ? 'true' : 'false'}
+        onClick={onOpenChange}
+      >
+        <Body baseFontSize={16} weight="medium">
+          Options
+        </Body>
+        <Icon
+          className={
+            (cx(darkMode ? iconDarkThemeStyles : iconLightThemeStyles),
+            buttonIconContainerStyles)
+          }
+          glyph={open ? 'ChevronDown' : 'ChevronRight'}
+        />
+      </button>
+
+      {open && <>{children}</>}
+    </>
+  );
+};
+
+export default CreateIndexOptionsAccordion;