{ "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": "banner", "name": "Banner", "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-banner--playground", "name": "Playground", "title": "Cloaked Design System/Status/Banner", "exportName": "Playground", "source_path": "packages/design-system/src/components/status/Banner/Banner.stories.tsx", "source_digest": "9687bbb411ae11f9014e579d4b6cc50a9ab3944ce7949938949d9d649639e2cf", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-status-banner--playground&viewMode=story" }, { "id": "cloaked-design-system-status-banner--with-eyebrow", "name": "With Eyebrow", "title": "Cloaked Design System/Status/Banner", "exportName": "WithEyebrow", "source_path": "packages/design-system/src/components/status/Banner/Banner.stories.tsx", "source_digest": "9687bbb411ae11f9014e579d4b6cc50a9ab3944ce7949938949d9d649639e2cf", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-status-banner--with-eyebrow&viewMode=story" }, { "id": "cloaked-design-system-status-banner--with-icon-action-and-dismiss", "name": "With Icon Action And Dismiss", "title": "Cloaked Design System/Status/Banner", "exportName": "WithIconActionAndDismiss", "source_path": "packages/design-system/src/components/status/Banner/Banner.stories.tsx", "source_digest": "9687bbb411ae11f9014e579d4b6cc50a9ab3944ce7949938949d9d649639e2cf", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-status-banner--with-icon-action-and-dismiss&viewMode=story" }, { "id": "cloaked-design-system-status-banner--long-content", "name": "Long Content", "title": "Cloaked Design System/Status/Banner", "exportName": "LongContent", "source_path": "packages/design-system/src/components/status/Banner/Banner.stories.tsx", "source_digest": "9687bbb411ae11f9014e579d4b6cc50a9ab3944ce7949938949d9d649639e2cf", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-status-banner--long-content&viewMode=story" }, { "id": "cloaked-design-system-status-banner--dark-theme", "name": "Dark Theme", "title": "Cloaked Design System/Status/Banner", "exportName": "DarkTheme", "source_path": "packages/design-system/src/components/status/Banner/Banner.stories.tsx", "source_digest": "9687bbb411ae11f9014e579d4b6cc50a9ab3944ce7949938949d9d649639e2cf", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-status-banner--dark-theme&viewMode=story" } ], "name": "Banner", "id": "banner", "category": "Status" }, "stories_source": { "path": "packages/design-system/src/components/status/Banner/Banner.stories.tsx", "code": "import React from 'react';\nimport type { Meta, StoryObj } from '@storybook/react-vite';\nimport { VStack } from '../../layout/VStack/VStack';\nimport { Button } from '../../primitives/Button/Button';\nimport { Icon } from '../../primitives/Icon/Icon';\nimport { disabledControl } from '../../../storybook/controlOptions';\nimport { Banner } from './Banner';\n\nconst meta: Meta = {\n title: 'Cloaked Design System/Status/Banner',\n component: Banner,\n parameters: {\n a11y: { test: 'error' },\n docs: {\n description: {\n component:\n 'Inline informational strip that stays in the flow of content — use it to explain what happens ' +\n 'next, surface a warning, or offer an optional action without blocking the user. It renders as ' +\n 'a `role=\"note\"`, so it is advisory, not a modal or a required decision. It carries no tone — ' +\n 'an error belongs in a `Card`, an `EmptyState`, or a `Toast`. Reach for `EmptyState` instead ' +\n 'when a whole region has no content to show; a Banner annotates content that is present.',\n },\n },\n },\n args: {\n title: 'What happens next',\n children: 'Cloaked has sent removal requests to broker sites. Most sites take 7-14 days to process.',\n },\n argTypes: {\n title: { control: 'text', description: 'Sentence-case heading above the message.' },\n eyebrow: { control: 'text', description: 'Short label shown above the message.' },\n icon: { ...disabledControl, description: 'Leading visual slot, usually an `Icon`.' },\n action: { ...disabledControl, description: 'Trailing action slot, usually a `Button`.' },\n onDismiss: {\n ...disabledControl,\n description: 'When provided, renders a dismiss button; omit for a non-dismissible banner.',\n },\n },\n};\nexport default meta;\ntype Story = StoryObj;\n\nexport const Playground: Story = {};\n\nexport const WithEyebrow: Story = {\n parameters: {\n docs: {\n description: {\n story: '`eyebrow` is the uppercase label form, for a short status word. Use `title` for a sentence.',\n },\n },\n },\n render: () => (\n \n \n Cloaked has sent removal requests to broker sites. Most sites take 7-14 days to process.\n \n Two of your removal requests are still waiting on the broker.\n \n ),\n};\n\nexport const WithIconActionAndDismiss: Story = {\n parameters: {\n docs: {\n description: { story: 'All three optional slots at once: leading `icon`, trailing `action`, and dismiss.' },\n },\n },\n args: {\n eyebrow: 'Action needed',\n icon: ,\n children: 'Review one item before continuing.',\n action: (\n \n ),\n onDismiss: () => undefined,\n testId: 'status-banner-action',\n },\n};\n\nexport const LongContent: Story = {\n parameters: {\n docs: {\n description: {\n story: 'Long message to check wrapping, spacing, and the dismiss affordance on narrow screens.',\n },\n },\n },\n args: {\n eyebrow: 'Long content',\n children:\n 'This banner includes a longer message so consumers can inspect wrapping, spacing, and dismiss affordances on narrow mobile screens.',\n onDismiss: () => undefined,\n testId: 'status-banner-long',\n },\n};\n\nexport const DarkTheme: Story = {\n parameters: {\n docs: { description: { story: 'Banner rendered against the dark theme surface.' } },\n },\n args: {\n eyebrow: 'Protected',\n children: 'Monitoring is active across your enabled privacy surfaces.',\n },\n globals: { theme: 'dark' },\n};\n" }, "specification": { "$schema": "../../../specs/component-spec.schema.json", "identity": { "name": "Banner", "status": "preview", "version": "1.0.0", "summary": "An inline advisory strip that annotates present content with a title or eyebrow, a message, and an optional icon, action, and dismiss control." }, "parts": [ { "id": "root", "label": "Root", "description": "Grid container carrying the neutral surface and radius.", "required": true }, { "id": "icon", "label": "Icon", "description": "Optional leading visual marker." }, { "id": "content", "label": "Content", "description": "Stacks the eyebrow, message, and optional action." }, { "id": "title", "label": "Title", "description": "Sentence-case heading above the message; the message drops to body-small beneath it." }, { "id": "eyebrow", "label": "Eyebrow", "description": "Short uppercase label above the message." }, { "id": "body", "label": "Message", "description": "Primary advisory copy." }, { "id": "action", "label": "Action", "description": "Optional trailing control." }, { "id": "dismiss", "label": "Dismiss", "description": "Optional close button." } ], "allowedDesignChoices": { "variants": { "informational": { "label": "Informational", "description": "The single neutral treatment. Banner carries no tone." } }, "sizes": {} }, "variants": [ { "id": "informational", "label": "Informational", "description": "Neutral advisory strip. Errors belong in a Card, EmptyState, or Toast.", "platforms": [ "ios", "android", "web" ] } ], "sizes": [], "measurements": [ { "id": "content-gap", "label": "Content gap", "kind": "exact", "token": "--cds-space-8", "value": 8, "unit": "px", "appliesTo": [ "root", "content" ] }, { "id": "container-inset", "label": "Container inset", "kind": "exact", "token": "--cds-space-16", "value": 16, "unit": "px", "appliesTo": [ "root" ] }, { "id": "corner-radius", "label": "Corner radius", "kind": "exact", "token": "--cds-radius-lg", "value": 20, "unit": "px", "appliesTo": [ "root" ] } ], "layout": { "alignment": "Leading icon, content column, and dismiss align to the top of the strip.", "flow": "A three-column grid: optional icon, flexible content, optional dismiss.", "notes": [ "Use EmptyState when a whole region has no content, not just a note about present content." ] }, "typographyAndColor": { "typography": [ { "label": "Title", "description": "Sentence-case heading on the body ramp.", "token": "--cds-type-body-size" }, { "label": "Eyebrow", "description": "Uses the body-small ramp, uppercased.", "token": "--cds-type-body-small-size" }, { "label": "Message", "description": "Uses the body ramp, dropping to body-small when a title is set so the heading stays the larger of the two.", "token": "--cds-type-body-size" } ], "colors": [ { "label": "Info surface", "description": "The banner always paints the neutral container tone; there is no status variant.", "token": "--cds-banner-container" }, { "label": "Eyebrow text", "description": "Primary banner text for the eyebrow and icon.", "token": "--cds-banner-text-primary" }, { "label": "Message text", "description": "Secondary banner text for the message.", "token": "--cds-banner-text-secondary" } ] }, "states": [ { "id": "info", "label": "Info", "description": "Neutral banner container." }, { "id": "titled", "label": "Titled", "description": "A title is set, so the message renders on the body-small ramp beneath it." }, { "id": "dismissible", "label": "Dismissible", "description": "Shows the close button when onDismiss is provided." } ], "behavior": [ { "label": "Advisory role", "description": "Banner is a role=note; it advises and never blocks like a modal." }, { "label": "Dismiss", "description": "Render the close button only when a dismiss handler is provided." } ], "accessibility": [ { "label": "Note landmark", "description": "The banner exposes role=note so assistive tech treats it as advisory." }, { "label": "Dismiss label", "description": "The close button carries an accessible label." } ], "contentAdaptation": [ { "label": "Wrapping message", "description": "The message wraps to multiple lines while the grid keeps the icon and dismiss aligned." }, { "label": "Optional slots", "description": "Icon, action, and dismiss each appear only when supplied." } ], "motionHaptics": { "motion": [ { "label": "Static", "description": "The banner does not animate its own entrance or exit." } ], "haptics": [ { "label": "Dismiss feedback", "description": "Host surfaces may request a light haptic on dismiss." } ] }, "platformDifferences": [] }, "specification_source": "packages/design-system/src/components/status/Banner/Banner.spec.json", "guidance": { "summary": "An inline advisory strip that annotates present content with a title or eyebrow, a message, and an optional icon, action, and dismiss control.", "guidance": [ { "heading": "Overview", "body": "An inline informational strip that stays in the flow of content. `variant` sets the\nsemantic treatment. It renders as `role=\"note\"`, so it is advisory — never a required\ndecision. Reach for `EmptyState` when a whole region has no content to show; a Banner\nannotates content that is present, and a `BottomSheet` when a choice must block progress." }, { "heading": "Slots", "body": "Optional `icon` (leading), `action` (trailing), and `onDismiss` (renders the × button)." } ], "usage": [ { "variant": "info", "use": "Neutral context — \"what happens next\", \"from Cloaked\". The only variant currently used in the app.", "axis": "Variant" }, { "variant": "success", "use": "Confirmation that a state is good or protected. Currently unused in the app.", "axis": "Variant" }, { "variant": "warning", "use": "A caution that needs attention but does not block — often paired with an `action`.", "avoid": "A hard error the user must resolve before continuing.", "axis": "Variant" }, { "variant": "danger", "use": "A problem the user should notice.", "avoid": "A required decision — Banner stays advisory (role=\"note\"); use a BottomSheet to block.", "axis": "Variant" } ], "examples": [ { "kind": "dont", "caption": "Use `variant='info'` as a passive status strip on a form screen. In light theme\n `--cds-banner-container` and `--cds-input-container` resolve to the same grey, so a filled,\n rounded, single-line banner above a column of text fields reads as a search field rather than a\n message. On form surfaces, say it in a `Text` row and keep Banner for real interruptions." } ], "source": "packages/design-system/src/components/status/Banner/Banner.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-banner", "json": "/data/visual/components/banner.json", "storybook": "/storybook/?path=/story/cloaked-design-system-status-banner--playground" } }