Update StudioCard footer and Accordion focus state (#10803)

* 663541 Update StudioCard footer and Accordion focus state

Author: praneshg239

packages/ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@harnessio/ui",
   "description": "Harness Canary UI component library",
-  "version": "0.0.271",
+  "version": "0.0.272",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",

packages/ui/src/components/studio-card/studio-card-types.ts

@@ -15,9 +15,7 @@ export interface StudioCardHeaderProps {
   actions: JSX.Element | null
 }
 
-export interface StudioCardFooterProps {
-  message?: string
-}
+export interface StudioCardFooterProps {}
 
 export interface StudioCardMessageProps {
   message?: string

packages/ui/src/components/studio-card/studio-card.tsx

@@ -220,12 +220,16 @@ function Tag({ tagText, icon }: PropsWithChildren<{ tagText: string; icon?: Icon
  * Footer Component
  * ====================
  */
-function Footer({ message }: StudioCardFooterProps): JSX.Element | null {
+function Footer({ children }: PropsWithChildren<StudioCardFooterProps>): JSX.Element {
   return (
     <div className="cn-studio-card-footer">
-      <Text color="foreground-3" variant="caption-normal">
-        {message}
-      </Text>
+      {typeof children === 'string' ? (
+        <Text color="foreground-3" variant="caption-normal">
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
     </div>
   )
 }

packages/ui/tailwind-utils-config/components/accordion.ts

@@ -9,6 +9,17 @@ export default {
       gap: 'var(--cn-accordion-sm-card-gap-y)'
     },
 
+    '.cn-accordion-item-header button': {
+      '&:focus': {
+        outline: 'none'
+      },
+
+      '&:focus-visible': {
+        outline: 'var(--cn-focus)',
+        '@apply outline-offset-cn-tight': ''
+      }
+    },
+
     '&-md': {
       minWidth: 'var(--cn-accordion-md-min-width)',
       '--cn-accordion-sm-gap': 'var(--cn-accordion-md-gap)',

packages/ui/tailwind-utils-config/components/table-v2.ts

@@ -73,7 +73,7 @@ export default {
     '&:where(.cn-table-v2-highlight-hover) tbody > tr': {
       '&:hover, &:has(.cn-table-v2-cell-clickable-block:focus-visible)': {
         '&>td': {
-          backgroundColor: 'var(--cn-bg-2)'
+          backgroundColor: 'var(--cn-state-hover)'
         }
       }
     },