feat(CC-batch-3): review-athon round 1 followup

Author: mattnolting

packages/code-connect/components/Banner/NonStatusBanner.figma.tsx

@@ -16,11 +16,11 @@ figma.connect(
         Red: 'red',
         Orangered: 'orangered',
         Orange: 'orange',
+        Yellow: 'yellow',
         Green: 'green',
+        Teal: 'teal',
         Blue: 'blue',
-        Purple: 'purple',
-        Yellow: 'yellow',
-        Teal: 'teal'
+        Purple: 'purple'
       })
     },
     example: (props) => <Banner color={props.color}>{props.text}</Banner>

packages/code-connect/components/Breadcrumbs/BreadcrumbItem.figma.tsx

@@ -12,12 +12,18 @@ figma.connect(
       text: figma.string('Text'),
 
       // enum
+      isActive: figma.enum('State', {
+        'No link': true
+      }),
       to: figma.enum('State', {
         Link: '#',
-        Hover: '#',
-        'No link': undefined
+        Hover: '#'
       })
     },
-    example: (props) => <BreadcrumbItem to={props.to}>{props.text}</BreadcrumbItem>
+    example: (props) => (
+      <BreadcrumbItem to={props.to} isActive={props.isActive}>
+        {props.text}
+      </BreadcrumbItem>
+    )
   }
 );

packages/code-connect/components/Breadcrumbs/ExpandableBreadcrumbs.figma.tsx

@@ -10,6 +10,7 @@ figma.connect(
     props: {
       children: figma.children('*')
     },
-    example: (props) => <BreadcrumbItem>{props.children}</BreadcrumbItem>
+    // TODO: MATT: Add dropdown for isDropdown
+    example: (props) => <BreadcrumbItem isDropdown>{props.children}</BreadcrumbItem>
   }
 );

packages/code-connect/components/CodeBlock/CodeBlock.figma.tsx

@@ -1,22 +1,30 @@
 import figma from '@figma/code-connect';
-import { CodeBlock, CodeBlockCode, ExpandableSectionToggle } from '@patternfly/react-core';
+import { CodeBlock, CodeBlockCode, ExpandableSection, ExpandableSectionToggle } from '@patternfly/react-core';
 
 figma.connect(
   CodeBlock,
   'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=9802-5857',
   {
     props: {
-      // TODO: FIGMA: Configure Editor Text as a base component for CodeBlock
+      // TODO: DESIGN: Configure Editor Text as a base component for CodeBlock
       // Currently using placeholder string, but should be a multi-select property with options like "Copy", "Download", "Edit", "Share", "Delete"
       editorText: 'code block code',
 
-      // TODO: FIGMA: Configure Actions layer to contain CodeBlockAction components
+      // TODO: DESIGN: Configure Actions layer to contain CodeBlockAction components
       // Currently using placeholder string, but should be a multi-select property with options like "Copy", "Download", "Edit", "Share", "Delete"
       actions: `action1, action2, action3, action4, action5`,
 
-      // TODO: FIGMA: ExpandableSectionToggle needs proper configuration
+      // TODO: DESIGN: ExpandableSectionToggle needs proper configuration
       // Current implementation has undefined variables and function calls
-      expandableSection: figma.boolean('Expandable', {
+      expandableSectionContent: figma.boolean('Expandable', {
+        true: (
+          <ExpandableSection isExpanded={true} isDetached contentId="code-block-expand">
+            Expandable content
+          </ExpandableSection>
+        ),
+        false: undefined
+      }),
+      expandableSectionToggle: figma.boolean('Expandable', {
         true: (
           <ExpandableSectionToggle onToggle={() => {}} contentId="code-block-id">
             Show More
@@ -27,8 +35,11 @@ figma.connect(
     },
     example: (props) => (
       <CodeBlock actions={props.actions}>
-        <CodeBlockCode>{props.editorText}</CodeBlockCode>
-        {props.expandableSection}
+        <CodeBlockCode>
+          {props.editorText}
+          {props.expandableSectionToggle}
+        </CodeBlockCode>
+        {props.expandableSectionContent}
       </CodeBlock>
     )
   }

packages/code-connect/components/CodeEditor/CodeEditor.figma.tsx

@@ -1,14 +1,16 @@
 import figma from '@figma/code-connect';
 import { CodeEditor } from '@patternfly/react-code-editor';
 
+// TODO: DESIGN: Add support for actions, wrap each action in the appropriate compnent
+// TODO: DESIGN: When shortcuts is removed, presentation breaks
 // Documentation for CodeEditor can be found at https://www.patternfly.org/components/code-editor
 
 figma.connect(
   CodeEditor,
   'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=16994-184502',
   {
     props: {
-      // TODO: FIGMA: configure options for actions
+      // TODO: DESIGN: configure options for actions
       actions: 'action1, action2, action3, action4, action5',
 
       // boolean
@@ -18,17 +20,18 @@ figma.connect(
       isMinimapVisible: figma.enum('Type', { 'Mini Map': true }),
 
       children: figma.children('*')
+
+      // Add viewshortcuts
+      // ifshortcuts is true
     },
     example: (props) => (
       <CodeEditor
-        actions={props.actions}
         isLineNumbersVisible={props.showsLineNumbers}
         isMinimapVisible={props.isMinimapVisible}
+        /* if no content is passed to code and isUploadEnabled is true, the editor will be display EmptyState */
         code="code editor contents"
-        height="500px"
-      >
-        {props.children}
-      </CodeEditor>
+        height="400px"
+      />
     )
   }
 );