feat: add code connect for FilterBar, StatusIndicator, and SupplementaryInfo (#786)

Kurt Doherty · web-flow · commit 5d5cc527abfb · 2025-09-16T08:54:43.000+10:00
diff --git a/figma.config.json b/figma.config.json
@@ -1,7 +1,7 @@
 {
   "codeConnect": {
     "include": [
-      "src/core/{accordion,avatar,badge,bottom-bar,breadcrumbs,button,button-group,chip,chip-group,chip-select,compact-select-native,divider,empty-data,features,folder-tabs,link,primary-tabs,secondary-tabs,select-native,split-button,tag,tag-group,tooltip}/**/*.{tsx,jsx}"
+      "src/core/{accordion,avatar,badge,bottom-bar,breadcrumbs,button,button-group,chip,chip-group,chip-select,compact-select-native,divider,empty-data,features,filter-bar,folder-tabs,link,primary-tabs,secondary-tabs,select-native,split-button,status-indicator,supplementary-info,tag,tag-group,tooltip}/**/*.{tsx,jsx}"
     ],
     "importPaths": {
       "src/core/*": "@reapit/elements/core/*",
@@ -31,6 +31,10 @@
       "<EMPTY_DATA_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=86-1823",
       "<FEATURE_ITEM_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12955-37788",
       "<FEATURES_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=2355-9645",
+      "<FILTER_BAR_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=13476-49354",
+      "<FILTER_BAR_APPLIED_FILTERS_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=13476-28224",
+      "<FILTER_BAR_LEFT_CONTENT_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=13523-12761",
+      "<FILTER_BAR_RIGHT_CONTENT_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=13476-43996",
       "<FOLDER_TAB_ITEM_CONTENT_SM_2XL_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=15238-28409",
       "<FOLDER_TAB_ITEM_SM_2XL_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=15238-28306",
       "<FOLDER_TAB_ITEM_CONTENT_XS_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=15238-28415",
@@ -45,11 +49,16 @@
       "<SPLIT_BUTTON_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=2356-10273",
       "<PRIMARY_TAB_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=60-1049",
       "<PRIMARY_TABS_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=7076-9436",
+      "<SECONDARY_TAB_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=209-5342",
+      "<SECONDARY_TABS_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=7076-9436",
+      "<STATUS_INDICATOR_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=5722-7495",
+      "<SUPPLEMENTARY_INFO_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=11918-14145",
+      "<SUPPLEMENTARY_INFO_ITEM_BASE_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=11918-14088",
+      "<SUPPLEMENTARY_INFO_ITEM_SM_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=11918-14107",
+      "<SUPPLEMENTARY_INFO_ITEM_XS_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=11918-14126",
       "<TAG_GROUP_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=118-6272",
       "<TAG_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=55-982",
-      "<TOOLTIP_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=6462-8381",
-      "<SECONDARY_TAB_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=209-5342",
-      "<SECONDARY_TABS_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=7076-9436"
+      "<TOOLTIP_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=6462-8381"
     }
   }
 }
diff --git a/src/core/button/button.figma.tsx b/src/core/button/button.figma.tsx
@@ -26,7 +26,6 @@ figma.connect(Button, '<BUTTON_URL>', {
   },
   example: (props) => (
     <Button
-      // NOTE: Use AnchorButton when needing to navigate
       disabled={props.disabled}
       hasNoPadding={props.hasNoPadding}
       iconLeft={props.iconLeft}
diff --git a/src/core/filter-bar/applied-filters/applied-filters.figma.tsx b/src/core/filter-bar/applied-filters/applied-filters.figma.tsx
@@ -0,0 +1,9 @@
+import figma from '@figma/code-connect'
+import { FilterBar } from '../filter-bar'
+
+figma.connect(FilterBar.AppliedFilters, '<FILTER_BAR_APPLIED_FILTERS_URL>', {
+  props: {
+    children: figma.children('*'),
+  },
+  example: (props) => <FilterBar.AppliedFilters>{props.children}</FilterBar.AppliedFilters>,
+})
diff --git a/src/core/filter-bar/applied-filters/applied-filters.tsx b/src/core/filter-bar/applied-filters/applied-filters.tsx
@@ -26,3 +26,5 @@ export function FilterBarAppliedFilters({ action, children, ...rest }: FilterBar
     </ElFilterBarAppliedFilters>
   )
 }
+
+FilterBarAppliedFilters.displayName = 'FilterBar.AppliedFilters'
diff --git a/src/core/filter-bar/filter-bar.figma.tsx b/src/core/filter-bar/filter-bar.figma.tsx
@@ -0,0 +1,17 @@
+import figma from '@figma/code-connect'
+import { FilterBar } from './filter-bar'
+
+figma.connect(FilterBar, '<FILTER_BAR_URL>', {
+  props: {
+    appliedFilters: figma.children('Applied filters'),
+    leftContent: figma.children('Left content'),
+    rightContent: figma.children('Right content'),
+  },
+  example: (props) => (
+    <FilterBar
+      appliedFilters={props.appliedFilters}
+      leftContent={props.leftContent}
+      rightContent={props.rightContent}
+    />
+  ),
+})
diff --git a/src/core/filter-bar/left-content/left-content.figma.tsx b/src/core/filter-bar/left-content/left-content.figma.tsx
@@ -0,0 +1,9 @@
+import figma from '@figma/code-connect'
+import { FilterBar } from '../filter-bar'
+
+figma.connect(FilterBar.LeftContent, '<FILTER_BAR_LEFT_CONTENT_URL>', {
+  props: {
+    children: figma.children('*'),
+  },
+  example: (props) => <FilterBar.LeftContent>{props.children}</FilterBar.LeftContent>,
+})
diff --git a/src/core/filter-bar/left-content/left-content.tsx b/src/core/filter-bar/left-content/left-content.tsx
@@ -16,3 +16,5 @@ export type FilterBarLeftContentProps = FilterBarLeftContent.Props
 export function FilterBarLeftContent(props: FilterBarLeftContent.Props) {
   return <ElFilterBarLeftContent {...props} />
 }
+
+FilterBarLeftContent.displayName = 'FilterBar.LeftContent'
diff --git a/src/core/filter-bar/right-content/right-content.figma.tsx b/src/core/filter-bar/right-content/right-content.figma.tsx
@@ -0,0 +1,9 @@
+import figma from '@figma/code-connect'
+import { FilterBar } from '../filter-bar'
+
+figma.connect(FilterBar.RightContent, '<FILTER_BAR_RIGHT_CONTENT_URL>', {
+  props: {
+    children: figma.children('*'),
+  },
+  example: (props) => <FilterBar.RightContent>{props.children}</FilterBar.RightContent>,
+})
diff --git a/src/core/filter-bar/right-content/right-content.tsx b/src/core/filter-bar/right-content/right-content.tsx
@@ -17,3 +17,5 @@ export type FilterBarRightContentProps = FilterBarRightContent.Props
 export function FilterBarRightContent(props: FilterBarRightContent.Props) {
   return <ElFilterBarRightContent {...props} />
 }
+
+FilterBarRightContent.displayName = 'FilterBar.RightContent'
diff --git a/src/core/status-indicator/status-indicator.figma.tsx b/src/core/status-indicator/status-indicator.figma.tsx
@@ -0,0 +1,19 @@
+import figma from '@figma/code-connect'
+import { StatusIndicator } from './status-indicator'
+
+figma.connect(StatusIndicator, '<STATUS_INDICATOR_URL>', {
+  props: {
+    children: figma.string('Label'),
+    variant: figma.enum('Style', {
+      Neutral: 'neutral',
+      Success: 'success',
+      Pending: 'pending',
+      Warning: 'warning',
+      Danger: 'danger',
+      Inactive: 'inactive',
+      'Accent 1': 'accent_1',
+      'Accent 2': 'accent_2',
+    }),
+  },
+  example: (props) => <StatusIndicator variant={props.variant}>{props.children}</StatusIndicator>,
+})
diff --git a/src/core/status-indicator/status-indicator.tsx b/src/core/status-indicator/status-indicator.tsx
@@ -11,7 +11,7 @@ export namespace StatusIndicator {
     /** The label of the status indicator. */
     children: ReactNode
     /** The variant of the status indicator. */
-    variant: 'neutral' | 'success' | 'pending' | 'warning' | 'danger' | 'inactive' | 'accent1' | 'accent2'
+    variant: 'neutral' | 'success' | 'pending' | 'warning' | 'danger' | 'inactive' | 'accent_1' | 'accent_2'
   }
 }
 
diff --git a/src/core/status-indicator/styles.ts b/src/core/status-indicator/styles.ts
@@ -43,11 +43,11 @@ export const ElStatusIndicator = styled.strong`
     background: var(--comp-status-colour-icon-inactive);
   }
 
-  &[data-variant='accent1']::before {
+  &[data-variant='accent_1']::before {
     background: var(--comp-status-colour-icon-accent_1);
   }
 
-  &[data-variant='accent2']::before {
+  &[data-variant='accent_2']::before {
     background: var(--comp-status-colour-icon-accent_2);
   }
 `
diff --git a/src/core/supplementary-info/styles.ts b/src/core/supplementary-info/styles.ts
@@ -45,10 +45,10 @@ export const ElSupplementaryInfoList = styled.ul`
   &[data-colour='danger'] {
     color: var(--colour-text-error);
   }
-  &[data-colour='accent-1'] {
+  &[data-colour='accent_1'] {
     color: var(--colour-text-accent_1);
   }
-  &[data-colour='accent-2'] {
+  &[data-colour='accent_2'] {
     color: var(--colour-text-accent_2);
   }
 `
@@ -108,10 +108,10 @@ export const ElSupplementaryInfoItem = styled.li`
   &[data-colour='danger'] {
     color: var(--colour-text-error);
   }
-  &[data-colour='accent-1'] {
+  &[data-colour='accent_1'] {
     color: var(--colour-text-accent_1);
   }
-  &[data-colour='accent-2'] {
+  &[data-colour='accent_2'] {
     color: var(--colour-text-accent_2);
   }
 
@@ -135,26 +135,26 @@ export const ElSupplementaryInfoItem = styled.li`
   [data-size='base'] &[data-colour='pending'],
   [data-size='base'] &[data-colour='warning'],
   [data-size='base'] &[data-colour='danger'],
-  [data-size='base'] &[data-colour='accent-1'],
-  [data-size='base'] &[data-colour='accent-2'] {
+  [data-size='base'] &[data-colour='accent_1'],
+  [data-size='base'] &[data-colour='accent_2'] {
     ${font('base', 'medium')}
   }
   [data-size='sm'] &[data-colour='neutral'],
   [data-size='sm'] &[data-colour='success'],
   [data-size='sm'] &[data-colour='pending'],
   [data-size='sm'] &[data-colour='warning'],
   [data-size='sm'] &[data-colour='danger'],
-  [data-size='sm'] &[data-colour='accent-1'],
-  [data-size='sm'] &[data-colour='accent-2'] {
+  [data-size='sm'] &[data-colour='accent_1'],
+  [data-size='sm'] &[data-colour='accent_2'] {
     ${font('sm', 'medium')}
   }
   [data-size='xs'] &[data-colour='neutral'],
   [data-size='xs'] &[data-colour='success'],
   [data-size='xs'] &[data-colour='pending'],
   [data-size='xs'] &[data-colour='warning'],
   [data-size='xs'] &[data-colour='danger'],
-  [data-size='xs'] &[data-colour='accent-1'],
-  [data-size='xs'] &[data-colour='accent-2'] {
+  [data-size='xs'] &[data-colour='accent_1'],
+  [data-size='xs'] &[data-colour='accent_2'] {
     ${font('xs', 'medium')}
   }
 `
diff --git a/src/core/supplementary-info/supplementary-info-item.figma.tsx b/src/core/supplementary-info/supplementary-info-item.figma.tsx
@@ -0,0 +1,56 @@
+import figma from '@figma/code-connect'
+import { SupplementaryInfo } from './supplementary-info'
+
+figma.connect(SupplementaryInfo.Item, '<SUPPLEMENTARY_INFO_ITEM_BASE_URL>', {
+  props: {
+    children: figma.textContent('Value'),
+    colour: figma.enum('Style', {
+      Primary: 'primary',
+      Secondary: 'secondary',
+      Neutral: 'neutral',
+      Success: 'success',
+      Pending: 'pending',
+      Warning: 'warning',
+      Danger: 'danger',
+      'Accent 1': 'accent_1',
+      'Accent 2': 'accent_2',
+    }),
+  },
+  example: (props) => <SupplementaryInfo.Item colour={props.colour}>{props.children}</SupplementaryInfo.Item>,
+})
+
+figma.connect(SupplementaryInfo.Item, '<SUPPLEMENTARY_INFO_ITEM_SM_URL>', {
+  props: {
+    children: figma.textContent('Value'),
+    colour: figma.enum('Style', {
+      Primary: 'primary',
+      Secondary: 'secondary',
+      Neutral: 'neutral',
+      Success: 'success',
+      Pending: 'pending',
+      Warning: 'warning',
+      Danger: 'danger',
+      'Accent 1': 'accent_1',
+      'Accent 2': 'accent_2',
+    }),
+  },
+  example: (props) => <SupplementaryInfo.Item colour={props.colour}>{props.children}</SupplementaryInfo.Item>,
+})
+
+figma.connect(SupplementaryInfo.Item, '<SUPPLEMENTARY_INFO_ITEM_XS_URL>', {
+  props: {
+    children: figma.textContent('Value'),
+    colour: figma.enum('Style', {
+      Primary: 'primary',
+      Secondary: 'secondary',
+      Neutral: 'neutral',
+      Success: 'success',
+      Pending: 'pending',
+      Warning: 'warning',
+      Danger: 'danger',
+      'Accent 1': 'accent_1',
+      'Accent 2': 'accent_2',
+    }),
+  },
+  example: (props) => <SupplementaryInfo.Item colour={props.colour}>{props.children}</SupplementaryInfo.Item>,
+})
diff --git a/src/core/supplementary-info/supplementary-info-item.tsx b/src/core/supplementary-info/supplementary-info-item.tsx
@@ -10,8 +10,8 @@ export type SupplementaryInfoColour =
   | 'pending'
   | 'warning'
   | 'danger'
-  | 'accent-1'
-  | 'accent-2'
+  | 'accent_1'
+  | 'accent_2'
 
 export namespace SupplementaryInfoItem {
   export interface Props extends HTMLAttributes<HTMLLIElement> {
@@ -36,3 +36,5 @@ export function SupplementaryInfoItem({ children, colour = 'inherit', ...rest }:
     </ElSupplementaryInfoItem>
   )
 }
+
+SupplementaryInfoItem.displayName = 'SupplementaryInfo.Item'
diff --git a/src/core/supplementary-info/supplementary-info.figma.tsx b/src/core/supplementary-info/supplementary-info.figma.tsx
@@ -0,0 +1,14 @@
+import figma from '@figma/code-connect'
+import { SupplementaryInfo } from './supplementary-info'
+
+figma.connect(SupplementaryInfo, '<SUPPLEMENTARY_INFO_URL>', {
+  props: {
+    children: figma.children('Supp text *'),
+    size: figma.enum('Size', {
+      base: 'base',
+      sm: 'sm',
+      xs: 'xs',
+    }),
+  },
+  example: (props) => <SupplementaryInfo size={props.size}>{props.children}</SupplementaryInfo>,
+})
diff --git a/src/storybook/changelog.mdx b/src/storybook/changelog.mdx
@@ -25,6 +25,7 @@ Beta versions should be relatively stable but subject to occssional breaking cha
 - **feat:** Added Figma Code Connect for `BottomBar`, `ButtonGroup`, `ChipSelect` and `CompactSelectNative`.
 - **feat:** Added Figma Code Connect for `Divider`, `EmptyData`, `SelectNative`, and `SplitButton`.
 - **feat:** Added Figma Code Connect for `FolderTabs`, `PrimaryTabs`, `SecondaryTabs`, and `Tooltip`.
+- **feat:** Added Figma Code Connect for `FilterBar`, `StatusIndicator`, and `SupplementaryInfo`.
 
 ### **5.0.0-beta.51 - 12/09/25**
 

Original file line number	Diff line number	Diff line change
`@@ -26,3 +26,5 @@ export function FilterBarAppliedFilters({ action, children, ...rest }: FilterBar`
`26`	`26`	`</ElFilterBarAppliedFilters>`
`27`	`27`	`)`
`28`	`28`	`}`
	`29`	`+`
	`30`	`+FilterBarAppliedFilters.displayName = 'FilterBar.AppliedFilters'`
Original file line number	Diff line number	Diff line change
`@@ -16,3 +16,5 @@ export type FilterBarLeftContentProps = FilterBarLeftContent.Props`
`16`	`16`	`export function FilterBarLeftContent(props: FilterBarLeftContent.Props) {`
`17`	`17`	`return <ElFilterBarLeftContent {...props} />`
`18`	`18`	`}`
	`19`	`+`
	`20`	`+FilterBarLeftContent.displayName = 'FilterBar.LeftContent'`
Original file line number	Diff line number	Diff line change
`@@ -17,3 +17,5 @@ export type FilterBarRightContentProps = FilterBarRightContent.Props`
`17`	`17`	`export function FilterBarRightContent(props: FilterBarRightContent.Props) {`
`18`	`18`	`return <ElFilterBarRightContent {...props} />`
`19`	`19`	`}`
	`20`	`+`
	`21`	`+FilterBarRightContent.displayName = 'FilterBar.RightContent'`