{ "version": "0.2.0-preview.1", "content_digest": "70ac710f4d22dce040e7ac593379ba8aca9dcb59a0b9c0f839819cae0e2bb721", "status": "preview", "authority": { "repository": "cloakedinc/design", "path": "packages/design-system", "catalog": "packages/design-system/catalog.json", "status": "preview" }, "provenance": { "repo": "cloakedinc/automation", "commit": "f96f416e1c3bfbfaffcd155a88b87b18b8bb25f1", "path": "packages/design-system", "imported_spec_status": "approved" }, "adaptations": [ { "id": "button-content-gap", "status": "preview", "description": "Use the specification's 4px content gap instead of the inherited 8px implementation gap." }, { "id": "keyboard-focus", "status": "preview", "description": "Add visible Button and Input keyboard focus and an overridable inset focus default for shared button resets, including FAQ cards and ListItem rows." }, { "id": "supporting-text-contrast", "status": "preview", "description": "Map light secondary text to the existing grey-04-strong primitive for readable helper text on white and cream." }, { "id": "danger-text-contrast", "status": "preview", "description": "Separate readable danger text/borders from destructive fills; preserve the primary danger-button fill and label pair." }, { "id": "preview-status", "status": "preview", "description": "Local components, specs and token adaptations await human sign-off; upstream approved status is provenance only." }, { "id": "motion-comparison-accessibility", "status": "preview", "description": "Preserve the original MotionShowcase comparisons while requiring explicit replay, responding to live reduced-motion changes, and keeping duration tracks usable on small screens." }, { "id": "list-item-ownership", "status": "preview", "description": "List owns listitem wrappers for its content rows, while section labels stay outside the row count and standalone rows retain their existing semantics." }, { "id": "card-delta-text-contrast", "status": "preview", "description": "Mix Card.Delta foregrounds from 60% existing tone solid and 40% primary text for readable contrast in both themes; preserve the four original tone fills." }, { "id": "carousel-keyboard-access", "status": "preview", "description": "Keep all native-scrolling carousel slide controls exposed to assistive technology and keyboard navigation; pause autoplay while focus is inside the carousel." } ], "id": "emptystate", "name": "EmptyState", "category": "Status", "contract_status": "preview", "contract_kind": "source-derived", "review": { "local_status": "not-reviewed", "source_approval": null, "imported_spec_status": "approved", "spec_origin": "imported-adapted", "local_spec_source_status": "approved", "imported_source_revision": "f96f416e1c3bfbfaffcd155a88b87b18b8bb25f1", "note": "Inherited specification status is provenance, not approval of the current local implementation or extracted contract." }, "approval": "required", "visual_reference": { "stories": [ { "id": "cloaked-design-system-status-emptystate--playground", "name": "Playground", "title": "Cloaked Design System/Status/EmptyState", "exportName": "Playground", "source_path": "packages/design-system/src/components/status/EmptyState/EmptyState.stories.tsx", "source_digest": "97255d640c3165566d35ac7c23ff2b3ad9b45dad7825c50bc7aa4b6368870e3b", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-status-emptystate--playground&viewMode=story" }, { "id": "cloaked-design-system-status-emptystate--default", "name": "Default", "title": "Cloaked Design System/Status/EmptyState", "exportName": "Default", "source_path": "packages/design-system/src/components/status/EmptyState/EmptyState.stories.tsx", "source_digest": "97255d640c3165566d35ac7c23ff2b3ad9b45dad7825c50bc7aa4b6368870e3b", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-status-emptystate--default&viewMode=story" }, { "id": "cloaked-design-system-status-emptystate--with-icon", "name": "With Icon", "title": "Cloaked Design System/Status/EmptyState", "exportName": "WithIcon", "source_path": "packages/design-system/src/components/status/EmptyState/EmptyState.stories.tsx", "source_digest": "97255d640c3165566d35ac7c23ff2b3ad9b45dad7825c50bc7aa4b6368870e3b", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-status-emptystate--with-icon&viewMode=story" }, { "id": "cloaked-design-system-status-emptystate--with-action", "name": "With Action", "title": "Cloaked Design System/Status/EmptyState", "exportName": "WithAction", "source_path": "packages/design-system/src/components/status/EmptyState/EmptyState.stories.tsx", "source_digest": "97255d640c3165566d35ac7c23ff2b3ad9b45dad7825c50bc7aa4b6368870e3b", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-status-emptystate--with-action&viewMode=story" }, { "id": "cloaked-design-system-status-emptystate--start-aligned", "name": "Start Aligned", "title": "Cloaked Design System/Status/EmptyState", "exportName": "StartAligned", "source_path": "packages/design-system/src/components/status/EmptyState/EmptyState.stories.tsx", "source_digest": "97255d640c3165566d35ac7c23ff2b3ad9b45dad7825c50bc7aa4b6368870e3b", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-status-emptystate--start-aligned&viewMode=story" }, { "id": "cloaked-design-system-status-emptystate--padded", "name": "Padded", "title": "Cloaked Design System/Status/EmptyState", "exportName": "Padded", "source_path": "packages/design-system/src/components/status/EmptyState/EmptyState.stories.tsx", "source_digest": "97255d640c3165566d35ac7c23ff2b3ad9b45dad7825c50bc7aa4b6368870e3b", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-status-emptystate--padded&viewMode=story" }, { "id": "cloaked-design-system-status-emptystate--long-content", "name": "Long Content", "title": "Cloaked Design System/Status/EmptyState", "exportName": "LongContent", "source_path": "packages/design-system/src/components/status/EmptyState/EmptyState.stories.tsx", "source_digest": "97255d640c3165566d35ac7c23ff2b3ad9b45dad7825c50bc7aa4b6368870e3b", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-status-emptystate--long-content&viewMode=story" }, { "id": "cloaked-design-system-status-emptystate--dark-theme", "name": "Dark Theme", "title": "Cloaked Design System/Status/EmptyState", "exportName": "DarkTheme", "source_path": "packages/design-system/src/components/status/EmptyState/EmptyState.stories.tsx", "source_digest": "97255d640c3165566d35ac7c23ff2b3ad9b45dad7825c50bc7aa4b6368870e3b", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-status-emptystate--dark-theme&viewMode=story" } ], "name": "EmptyState", "id": "emptystate", "category": "Status" }, "stories_source": { "path": "packages/design-system/src/components/status/EmptyState/EmptyState.stories.tsx", "code": "import React from 'react';\nimport type { Meta, StoryObj } from '@storybook/react-vite';\nimport { Button } from '../../primitives/Button/Button';\nimport { Icon } from '../../primitives/Icon/Icon';\nimport { SPACE_OPTIONS, disabledControl, selectArgType } from '../../../storybook/controlOptions';\nimport { EmptyState } from './EmptyState';\nimport type { EmptyStateAlign } from './EmptyState';\n\nconst EMPTY_STATE_ALIGN_OPTIONS = ['center', 'start'] as const satisfies readonly EmptyStateAlign[];\n\nconst meta: Meta = {\n title: 'Cloaked Design System/Status/EmptyState',\n component: EmptyState,\n parameters: {\n a11y: { test: 'error' },\n docs: {\n description: {\n component:\n 'Full-region placeholder for when there is nothing to show — an empty list, a search with no ' +\n 'hits, or a queue that has been cleared. It centers a title, optional description, optional ' +\n 'icon, and an optional recovery `action`. Use it when a whole area is empty; use `Banner` ' +\n 'instead to annotate content that IS present (a note or warning alongside real data).',\n },\n },\n },\n args: {\n title: 'No results found',\n description: 'Try changing your filters or searching for something else.',\n },\n argTypes: {\n align: {\n ...selectArgType(EMPTY_STATE_ALIGN_OPTIONS),\n description: 'Text alignment and horizontal placement of the block.',\n },\n padding: {\n ...selectArgType(SPACE_OPTIONS),\n description: 'Outer padding as a `--cds-space-*` token. Defaults to `32`.',\n },\n icon: { ...disabledControl, description: 'Optional visual shown above the title.' },\n action: { ...disabledControl, description: 'Optional recovery action, usually a `Button`.' },\n },\n};\nexport default meta;\ntype Story = StoryObj;\n\nexport const Playground: Story = {};\n\nexport const Default: Story = {\n args: {\n title: 'No results found',\n description: 'Try changing your filters or searching for something else.',\n },\n};\n\nexport const WithIcon: Story = {\n args: {\n title: 'No messages yet',\n description: 'New alerts will appear here when there is activity.',\n icon: ,\n },\n};\n\nexport const WithAction: Story = {\n args: {\n title: 'No scans yet',\n description: 'Run your first scan to see what information is exposed.',\n action: (\n \n ),\n },\n};\n\nexport const StartAligned: Story = {\n parameters: {\n docs: { description: { story: '`align=\"start\"` for left-aligned empty states inside a panel.' } },\n },\n args: {\n align: 'start',\n title: 'Nothing to review',\n description: 'Completed items will move out of this queue.',\n },\n};\n\nexport const Padded: Story = {\n parameters: {\n docs: { description: { story: 'Custom `padding` token (`24`) overriding the default `32`.' } },\n },\n args: {\n title: 'No exposure found',\n description: 'Your monitored details look clear right now.',\n icon: ,\n padding: 24,\n },\n};\n\nexport const LongContent: Story = {\n parameters: {\n docs: { description: { story: 'Long copy to check wrapping and vertical spacing with a recovery action.' } },\n },\n args: {\n title: 'Nothing matched your current filters',\n description:\n 'This longer message checks wrapping and vertical spacing when the empty state needs to explain what happened and what the user can do next.',\n action: (\n \n ),\n },\n};\n\nexport const DarkTheme: Story = {\n parameters: {\n docs: { description: { story: 'EmptyState with an icon and action rendered against the dark theme surface.' } },\n },\n args: {\n title: 'No exposure found',\n description: 'Your monitored details look clear right now.',\n icon: ,\n action: (\n \n ),\n },\n globals: { theme: 'dark' },\n};\n" }, "specification": { "$schema": "../../../specs/component-spec.schema.json", "identity": { "name": "EmptyState", "status": "preview", "version": "1.0.0", "summary": "A calm full-region placeholder that centers a title, optional description, icon, and recovery action when an area has nothing to show." }, "parts": [ { "id": "root", "label": "Root", "description": "Column that stacks the icon, copy, and action with outer padding.", "required": true }, { "id": "icon", "label": "Icon", "description": "Optional round visual above the title." }, { "id": "copy", "label": "Copy", "description": "Title plus optional description." }, { "id": "action", "label": "Action", "description": "Optional recovery control, usually a Button." } ], "allowedDesignChoices": { "variants": { "placeholder": { "label": "Placeholder", "description": "The single empty/no-results treatment." } }, "sizes": {}, "alignments": { "center": { "label": "Center", "description": "Centers the block and its text." }, "start": { "label": "Start", "description": "Left-aligns the block and its text inside a panel." } } }, "variants": [ { "id": "placeholder", "label": "Placeholder", "description": "Centered empty-region treatment.", "platforms": [ "ios", "android", "web" ] } ], "sizes": [], "measurements": [ { "id": "content-gap", "label": "Content gap", "kind": "exact", "token": "--cds-space-16", "value": 16, "unit": "px", "appliesTo": [ "root" ] }, { "id": "icon-size", "label": "Icon container size", "kind": "exact", "token": "--cds-size-56", "value": 56, "unit": "px", "appliesTo": [ "icon" ] }, { "id": "default-padding", "label": "Default outer padding", "kind": "exact", "token": "--cds-space-32", "value": 32, "unit": "px", "appliesTo": [ "root" ], "notes": "The padding prop selects a spacing step; 32 is the default." } ], "layout": { "alignment": "Icon, copy, and action stack vertically; alignment controls horizontal placement and text alignment.", "flow": "A single column with a max-width copy block capped at 320.", "notes": [ "Use Banner to annotate content that is present rather than a whole empty region." ] }, "typographyAndColor": { "typography": [ { "label": "Title", "description": "Uses the h4 ramp.", "token": "--cds-type-h4-size" }, { "label": "Description", "description": "Uses the body ramp.", "token": "--cds-type-body-size" } ], "colors": [ { "label": "Title", "description": "Primary text for the title.", "token": "--cds-text-primary" }, { "label": "Description", "description": "Secondary text for supporting copy and the icon.", "token": "--cds-text-secondary" }, { "label": "Icon surface", "description": "The icon sits on a raised surface disc.", "token": "--cds-bg-surface" } ] }, "states": [ { "id": "center", "label": "Centered", "description": "Content centered on both the horizontal axis and text." }, { "id": "start", "label": "Start aligned", "description": "Content left-aligned inside a panel." }, { "id": "with-icon", "label": "With icon", "description": "Shows the round icon disc above the title." }, { "id": "with-action", "label": "With action", "description": "Shows a recovery action below the copy." } ], "behavior": [ { "label": "Alignment", "description": "Set align to center for standalone screens or start for in-panel placeholders." }, { "label": "Recovery action", "description": "Offer an action only when the user can meaningfully resolve the empty state." } ], "accessibility": [ { "label": "Heading", "description": "The title renders as a heading so the empty region is announced." }, { "label": "Actionable copy", "description": "Describe the next step in the description rather than relying on the icon." } ], "contentAdaptation": [ { "label": "Copy width", "description": "The copy column caps its width so long descriptions stay readable." }, { "label": "Optional slots", "description": "Icon, description, and action each render only when provided." } ], "motionHaptics": { "motion": [ { "label": "Static", "description": "EmptyState does not animate on appearance." } ], "haptics": [ { "label": "No feedback", "description": "The container requests no haptics; its action button owns any feedback." } ] }, "platformDifferences": [] }, "specification_source": "packages/design-system/src/components/status/EmptyState/EmptyState.spec.json", "guidance": { "summary": "A calm full-region placeholder that centers a title, optional description, icon, and recovery action when an area has nothing to show.", "guidance": [ { "heading": "Overview", "body": "A full-region placeholder for when a whole area has nothing to show — a title, optional description\nand icon, and an optional recovery `action`." }, { "heading": "When to use", "body": "Reach for `EmptyState` when an entire region is empty and you want to explain why and offer a way\nforward — a cleared queue, a search with no hits, a list before its first item. Pass an `action`\n(usually a `Button`) when there's a recovery path.\n\n- Content IS present and you're annotating it (a note or warning alongside real data)? Use `Banner`.\n- The region isn't empty, it's still loading? Use `Skeleton` to preserve the layout while it loads." } ], "usage": [], "examples": [], "source": "packages/design-system/src/components/status/EmptyState/EmptyState.mdx", "status": "local-preview", "note": "Guidance is read from local documentation, originally imported from the frozen source. Platform assertions in guidance are not parity verification." }, "links": { "human": "/component-emptystate", "json": "/data/visual/components/emptystate.json", "storybook": "/storybook/?path=/story/cloaked-design-system-status-emptystate--playground" } }