+
+ ),
+ ],
+}
+
+export default meta
+
+type Story = StoryObj
+
+
+ setOpen(false)}
+ dimensions={dimensions}
+ metrics={metrics}
+ onDimensionsChange={setDimensions}
+ onMetricsChange={setMetrics}
+ onRenameColumn={handleRename}
+ onRemoveColumn={handleRemove}
+ />
+
+ )
+}
+
+export const Default: Story = {
+ render: () => onDragStart(e, index, type)}
+ onDragOver={e => onDragOver(e, index)}
+ onDragEnd={onDragEnd}
+ onDrop={e => onDrop(e, index, type)}>
+
+ )
+}
+
+export const ManageColumnsDrawer: React.FC
+
+
+ {item.label}
+
+ {showMoreActions &&
+
+ )
+
+ return (
+
+
+ {label}
+
+
+
+ {items.map((item, index) => (
+ handleDragOver(e, index, type)}
+ onDragEnd={handleDragEnd}
+ onDrop={handleDrop}
+ isDragging={dragState.draggedIndex === index && dragState.draggedType === type}
+ isDraggedOver={dragState.dragOverIndex === index && dragState.dragOverType === type}
+ onRename={onRenameColumn ? () => onRenameColumn(item.id, type) : undefined}
+ onRemove={onRemoveColumn ? () => onRemoveColumn(item.id, type) : undefined}
+ />
+ ))}
+
+
+
+ {description}
+
+
+ {dimensions.length > 0 && renderSection(dimensions, 'dimension', dimensionsLabel)}
+ {metrics.length > 0 && renderSection(metrics, 'metric', metricsLabel)}
+
+
+
+ {metrics.map(metric => (
+
+
+ )
+ },
+}
diff --git a/src/components/UXPatterns/StatisticsCard/StatisticsCard.tsx b/src/components/UXPatterns/StatisticsCard/StatisticsCard.tsx
new file mode 100644
index 0000000000..a458c89c67
--- /dev/null
+++ b/src/components/UXPatterns/StatisticsCard/StatisticsCard.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import { Card, Flex, Statistic, IconWithTooltip } from 'src/components'
+import type { ReactNode } from 'react'
+import { FontSizeHeading3, FontSizeLg, FontWeightStrong } from 'src/styles/style'
+
+export interface IStatisticsCardProps {
+ title: string
+ value: string | number
+ denominator?: string | number
+ tooltip?: ReactNode
+ valueFontSize?: string
+ denominatorFontSize?: string
+ valueFontWeight?: string | number
+}
+
+export const StatisticsCard: React.FC-
+
+
+
+
+ )}
+
+ {selected && (
+
+
+ )}
+
+ {tag && (
+
+
+
+ {typeof tag === 'string' ? (
+
+
+
+ {tag}
+
+
+ ) : (
+ tag
+ )}
+
+ )}
+
+ {
+ setIsChecked(event.target.checked)
+ }}>
+ Default (interactive)
+
+ Checked
+ Indeterminate
+ Disabled
+
+ Disabled and checked
+
+
+ )
+}
+
+const CheckboxGroupExample = () => {
+ const [selectedOptions, setSelectedOptions] = useState
+ {
+ setSelectedOptions(event.target.checked ? allValues : [])
+ }}>
+ Select all features
+
+
+ )
+}
+
+const preferenceOptions = [
+ {
+ label: 'Product updates',
+ value: 'product-updates',
+ description: 'Important improvements, release notes, and early access invitations.',
+ },
+ {
+ label: 'Webinars and events',
+ value: 'events',
+ description: 'Invitations to upcoming live sessions, workshops, and community meetups.',
+ },
+ {
+ label: 'Security advisories',
+ value: 'security',
+ description: 'Critical notifications about security and compliance-related changes.',
+ },
+]
+
+const CheckboxListExample = () => {
+ const [selectedValues, setSelectedValues] = useState
+ {
+ setSelectedOptions(values)
+ }}
+ />
+
+
+ {preferenceOptions.map(option => {
+ const isChecked = selectedValues.includes(option.value)
+ return (
+ {
+ toggleValue(option.value, event.target.checked)
+ }}>
+
+ {option.label}
+ {option.description}
+
+
+ )
+ })}
+
+ )
+}
+
+const LongLegalCopyExample = () => {
+ const [checked, setChecked] = useState(true)
+
+ return (
+
+ {
+ setChecked(event.target.checked)
+ }}>
+
+ I agree to the terms, policies, and any other legal guidelines required to use this service, including matters
+ related to privacy, data usage, third-party tools, cookies, and future updates to the agreement.
+
+
+
+ )
+}
+
+const DisabledWithTooltipExample = () => (
+
+ {/* Search Bar */}
+
+
+ }
+ placeholder={searchPlaceholder}
+ value={searchQuery}
+ onChange={e => setSearchQuery(e.target.value)}
+ allowClear
+ />
+
+
+ {/* Main Content */}
+
+ {/* Categories Panel */}
+
+
+ {/* Footer */}
+ {(showClearAllButton || showApplyButton) && (
+
+
+ {categoryTitle}
+
+
+
+ {/* Items Panel */}
+ -
+ {categories.map(category => {
+ const isSelected = selectedCategory === category.key
+ return (
+
- setSelectedCategory(category.key)}>
+ {category.icon &&
} + {category.label} +
+ )
+ })}
+
+ {loading ? (
+
+
+ {/* Description Panel */}
+ {showDescriptionPanel && (
+
+ Loading...
+
+ ) : filteredItems.length === 0 ? (
+
+ {emptyContent ??
+ ) : (
+ -
+ {filteredItems.map(item => {
+ const isChecked = selectedKeys.includes(item.key)
+ const isHovered = hoveredItem?.key === item.key
+ return (
+
- setHoveredItem(item)}
+ onMouseLeave={() => setHoveredItem(null)}>
+
handleItemToggle(item.key)}> + +{item.label} +
+ )
+ })}
+
+
+ {descriptionTitle}
+
+
+ {hoveredItem?.description ?? 'Hover over a dimension to see its description.'}
+
+
+ )}
+
+ {showClearAllButton && (
+
+ )}
+ {showApplyButton && (
+
+ )}
+
+ )}
+