-
-### AccordionGroup
-
-Container for managing multiple accordions. Renders a `
` element.
-
-
-
-## Examples
-
-### With Subtitle
-
-Here's a view when using both title and subtitle props.
-
-
}
- code={accordionWithSubtitleSnippet}
-/>
-
-### Custom Trigger
-
-Here's a view when providing custom multi-line content as children.
-
-
}
- code={accordionCustomTriggerSnippet}
-/>
-
-### Default Expanded
-
-Here's a view when the panel is expanded by default.
-
-
}
- code={accordionDefaultExpandedSnippet}
-/>
-
-### Group Single Open
-
-Here's a view when only one accordion can be open at a time.
-
-
}
- code={accordionGroupSingleOpenSnippet}
-/>
-
-### Group Multiple Open
-
-Here's a view when multiple accordions can be open simultaneously.
-
-
}
- code={accordionGroupMultipleOpenSnippet}
-/>
-
-
-
-
diff --git a/docs-ui/src/content/accordion.props.ts b/docs-ui/src/content/accordion.props.ts
deleted file mode 100644
index aac983b0c3..0000000000
--- a/docs-ui/src/content/accordion.props.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-import {
- classNamePropDefs,
- stylePropDefs,
- type PropDef,
-} from '@/utils/propDefs';
-
-export const accordionPropDefs: Record
= {
- children: {
- type: 'enum',
- values: ['ReactNode', '(state: { isExpanded: boolean }) => ReactNode'],
- },
- defaultExpanded: {
- type: 'boolean',
- default: 'false',
- },
- isExpanded: {
- type: 'boolean',
- },
- onExpandedChange: {
- type: 'enum',
- values: ['(isExpanded: boolean) => void'],
- },
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const accordionTriggerPropDefs: Record = {
- level: {
- type: 'enum',
- values: ['1', '2', '3', '4', '5', '6'],
- default: '3',
- },
- title: {
- type: 'string',
- },
- subtitle: {
- type: 'string',
- },
- children: {
- type: 'enum',
- values: ['ReactNode'],
- },
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const accordionPanelPropDefs: Record = {
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const accordionGroupPropDefs: Record = {
- allowsMultiple: {
- type: 'boolean',
- default: 'false',
- },
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const accordionUsageSnippet = `import { Accordion, AccordionTrigger, AccordionPanel } from '@backstage/ui';
-
-
-
- Your content
-`;
-
-export const accordionWithSubtitleSnippet = `
-
-
- Your content here
-
-`;
-
-export const accordionCustomTriggerSnippet = `
-
-
- Custom Multi-line Trigger
-
- Click to expand additional details
-
-
-
-
- Your content here
-
-`;
-
-export const accordionDefaultExpandedSnippet = `
-
-
- Your content here
-
-`;
-
-export const accordionGroupSingleOpenSnippet = `
-
-
- Content 1
-
-
-
- Content 2
-
-`;
-
-export const accordionGroupMultipleOpenSnippet = `
-
-
- Content 1
-
-
-
- Content 2
-
-`;
diff --git a/docs-ui/src/content/avatar.props.ts b/docs-ui/src/content/avatar.props.ts
deleted file mode 100644
index 80621cdb89..0000000000
--- a/docs-ui/src/content/avatar.props.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { classNamePropDefs, stylePropDefs } from '@/utils/propDefs';
-import type { PropDef } from '@/utils/propDefs';
-
-export const avatarPropDefs: Record = {
- src: {
- type: 'string',
- },
- name: {
- type: 'string',
- },
- size: {
- type: 'enum',
- values: ['x-small', 'small', 'medium', 'large', 'x-large'],
- default: 'medium',
- responsive: true,
- },
- purpose: {
- type: 'enum',
- values: ['informative', 'decoration'],
- default: 'informative',
- },
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const snippetUsage = `import { Avatar } from '@backstage/ui';
-
-`;
-
-export const snippetSizes = `
-
-
-
-
-
-`;
-
-export const snippetFallback = ``;
-
-export const snippetPurpose = `
-
- Informative (default)
-
- Use when avatar appears alone. Announced as "Charles de Dreuille" to screen readers:
-
-
-
-
-
-
- Decoration
-
- Use when name appears adjacent to avatar. Hidden from screen readers to avoid redundancy:
-
-
-
- Charles de Dreuille
-
-
-`;
diff --git a/docs-ui/src/content/box.mdx b/docs-ui/src/content/box.mdx
deleted file mode 100644
index 66e99ec19a..0000000000
--- a/docs-ui/src/content/box.mdx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { CodeBlock } from '@/components/CodeBlock';
-import { PropsTable } from '@/components/PropsTable';
-import { Snippet } from '@/components/Snippet';
-import { BoxSnippet } from '@/snippets/stories-snippets';
-import {
- boxPropDefs,
- snippetUsage,
- boxPreviewSnippet,
- boxSimpleSnippet,
- boxResponsiveSnippet,
-} from './box.props';
-import { spacingPropDefs } from '@/utils/propDefs';
-import { PageTitle } from '@/components/PageTitle';
-import { Theming } from '@/components/Theming';
-import { BoxDefinition } from '../utils/definitions';
-import { ChangelogComponent } from '@/components/ChangelogComponent';
-
-
-
-}
- code={boxPreviewSnippet}
- align="center"
-/>
-
-## Usage
-
-
-
-## API reference
-
-### Box
-
-This is the Box component, our lowest-level component. Here are all the
-available properties.
-
-
-
-Padding and margin are used to create space around your component using our
-predefined spacing tokens. We would recommend to use padding over margin to
-avoid collapsing margins but both are available.
-
-
-
-## Examples
-
-### Simple example
-
-A simple example of how to use the Box component.
-
-
-
-### Responsive
-
-Here's a view when buttons are responsive.
-
-
-
-
-
-
diff --git a/docs-ui/src/content/box.props.ts b/docs-ui/src/content/box.props.ts
deleted file mode 100644
index 0ee45c80f4..0000000000
--- a/docs-ui/src/content/box.props.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import {
- classNamePropDefs,
- displayPropDefs,
- heightPropDefs,
- positionPropDefs,
- stylePropDefs,
- widthPropDefs,
- type PropDef,
-} from '@/utils/propDefs';
-
-export const boxPropDefs: Record = {
- as: {
- type: 'enum',
- values: ['div', 'span'],
- default: 'div',
- responsive: true,
- },
- ...widthPropDefs,
- ...heightPropDefs,
- ...positionPropDefs,
- ...displayPropDefs,
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const snippetUsage = `import { Box } from '@backstage/ui';
-
-`;
-
-export const boxPreviewSnippet = `
-
-`;
-
-export const boxSimpleSnippet = `Hello World`;
-
-export const boxResponsiveSnippet = `
- Hello World
-`;
diff --git a/docs-ui/src/content/button-icon.mdx b/docs-ui/src/content/button-icon.mdx
deleted file mode 100644
index b0595cc9bc..0000000000
--- a/docs-ui/src/content/button-icon.mdx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { PropsTable } from '@/components/PropsTable';
-import { Snippet } from '@/components/Snippet';
-import { CodeBlock } from '@/components/CodeBlock';
-import { ButtonIconSnippet } from '@/snippets/stories-snippets';
-import {
- buttonIconPropDefs,
- buttonIconUsageSnippet,
- buttonIconDefaultSnippet,
- buttonIconVariantsSnippet,
- buttonIconSizesSnippet,
- buttonIconDisabledSnippet,
- buttonIconLoadingSnippet,
- buttonIconResponsiveSnippet,
- buttonIconAsLinkSnippet,
-} from './button-icon.props';
-import { PageTitle } from '@/components/PageTitle';
-import { Theming } from '@/components/Theming';
-import { ButtonIconDefinition } from '../utils/definitions';
-import { ChangelogComponent } from '@/components/ChangelogComponent';
-
-
-
-}
- code={buttonIconDefaultSnippet}
-/>
-
-## Usage
-
-
-
-## API reference
-
-
-
-## Examples
-
-### Variants
-
-Here's a view when buttons have different variants.
-
-}
- code={buttonIconVariantsSnippet}
-/>
-
-### Sizes
-
-Here's a view when buttons have different sizes.
-
-}
- code={buttonIconSizesSnippet}
-/>
-
-### Disabled
-
-Here's a view when buttons are disabled.
-
-}
- code={buttonIconDisabledSnippet}
-/>
-
-### Loading
-
-Here's a view when buttons are in a loading state.
-
-}
- code={buttonIconLoadingSnippet}
-/>
-
-### Responsive
-
-Here's a view when buttons are responsive.
-
-
-
-
-
-
diff --git a/docs-ui/src/content/button-icon.props.ts b/docs-ui/src/content/button-icon.props.ts
deleted file mode 100644
index b063484d27..0000000000
--- a/docs-ui/src/content/button-icon.props.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import {
- classNamePropDefs,
- stylePropDefs,
- type PropDef,
-} from '@/utils/propDefs';
-
-export const buttonIconPropDefs: Record = {
- variant: {
- type: 'enum',
- values: ['primary', 'secondary'],
- default: 'primary',
- responsive: true,
- },
- size: {
- type: 'enum',
- values: ['small', 'medium'],
- default: 'medium',
- responsive: true,
- },
- icon: { type: 'enum', values: ['ReactNode'], responsive: false },
- isDisabled: { type: 'boolean', default: 'false', responsive: false },
- loading: { type: 'boolean', default: 'false', responsive: false },
- type: {
- type: 'enum',
- values: ['button', 'submit', 'reset'],
- default: 'button',
- responsive: false,
- },
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const buttonIconUsageSnippet = `import { ButtonIcon } from '@backstage/ui';
-
-`;
-
-export const buttonIconDefaultSnippet = `
- } variant="primary" />
- } variant="secondary" />
-`;
-
-export const buttonIconVariantsSnippet = `
- } variant="primary" />
- } variant="secondary" />
-`;
-
-export const buttonIconSizesSnippet = `
- } size="small" />
- } size="medium" />
-`;
-
-export const buttonIconDisabledSnippet = `} isDisabled />`;
-
-export const buttonIconLoadingSnippet = `} variant="primary" loading={isLoading} onPress={handleClick} />`;
-
-export const buttonIconResponsiveSnippet = `} variant={{ initial: 'primary', lg: 'secondary' }} />`;
-
-export const buttonIconAsLinkSnippet = `import { ButtonLink } from '@backstage/ui';
-
-
- Button
-`;
diff --git a/docs-ui/src/content/button-link.mdx b/docs-ui/src/content/button-link.mdx
deleted file mode 100644
index 4f3f376aee..0000000000
--- a/docs-ui/src/content/button-link.mdx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { PropsTable } from '@/components/PropsTable';
-import { Snippet } from '@/components/Snippet';
-import { CodeBlock } from '@/components/CodeBlock';
-import { ButtonLinkSnippet } from '@/snippets/stories-snippets';
-import {
- buttonLinkPropDefs,
- buttonLinkSnippetUsage,
- buttonLinkVariantsSnippet,
- buttonLinkSizesSnippet,
- buttonLinkIconsSnippet,
- buttonLinkDisabledSnippet,
- buttonLinkResponsiveSnippet,
-} from './button-link.props';
-import { PageTitle } from '@/components/PageTitle';
-import { Theming } from '@/components/Theming';
-import { ButtonLinkDefinition } from '../utils/definitions';
-import { ChangelogComponent } from '@/components/ChangelogComponent';
-
-
-
-}
- code={buttonLinkVariantsSnippet}
-/>
-
-## Usage
-
-
-
-## API reference
-
-
-
-## Examples
-
-### Variants
-
-Here's a view when buttons have different variants.
-
-}
- code={buttonLinkVariantsSnippet}
-/>
-
-### Sizes
-
-Here's a view when buttons have different sizes.
-
-}
- code={buttonLinkSizesSnippet}
-/>
-
-### With Icons
-
-Here's a view when buttons have icons.
-
-}
- code={buttonLinkIconsSnippet}
-/>
-
-### Disabled
-
-Here's a view when buttons are disabled.
-
-}
- code={buttonLinkDisabledSnippet}
-/>
-
-### Responsive
-
-Here's a view when buttons are responsive.
-
-
-
-
-
-
diff --git a/docs-ui/src/content/button-link.props.ts b/docs-ui/src/content/button-link.props.ts
deleted file mode 100644
index 2bd4e2196a..0000000000
--- a/docs-ui/src/content/button-link.props.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { classNamePropDefs, stylePropDefs } from '@/utils/propDefs';
-import type { PropDef } from '@/utils/propDefs';
-
-export const buttonLinkPropDefs: Record = {
- variant: {
- type: 'enum',
- values: ['primary', 'secondary'],
- default: 'primary',
- responsive: true,
- },
- size: {
- type: 'enum',
- values: ['small', 'medium'],
- default: 'medium',
- responsive: true,
- },
- iconStart: { type: 'enum', values: ['ReactNode'], responsive: false },
- iconEnd: { type: 'enum', values: ['ReactNode'], responsive: false },
- isDisabled: { type: 'boolean', default: 'false', responsive: false },
- href: { type: 'string', responsive: false },
- hrefLang: { type: 'string', responsive: false },
- target: {
- type: 'enum',
- values: ['HTMLAttributeAnchorTarget'],
- default: '_self',
- responsive: false,
- },
- rel: { type: 'string', responsive: false },
- children: { type: 'enum', values: ['ReactNode'], responsive: false },
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const buttonLinkSnippetUsage = `import { ButtonLink } from '@backstage/ui';
-
-`;
-
-export const buttonLinkVariantsSnippet = `
- } variant="primary">
- Button
-
- } variant="secondary">
- Button
-
-`;
-
-export const buttonLinkSizesSnippet = `
- Small
- Medium
-`;
-
-export const buttonLinkIconsSnippet = `
- }>Button
- }>Button
- }
- iconEnd={}>
- Button
-
-`;
-
-export const buttonLinkDisabledSnippet = `
-
- Primary
-
-
- Secondary
-
-`;
-
-export const buttonLinkResponsiveSnippet = `
- Responsive Button
-`;
diff --git a/docs-ui/src/content/button.mdx b/docs-ui/src/content/button.mdx
deleted file mode 100644
index d161c97edf..0000000000
--- a/docs-ui/src/content/button.mdx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { PropsTable } from '@/components/PropsTable';
-import { Snippet } from '@/components/Snippet';
-import { CodeBlock } from '@/components/CodeBlock';
-import { ButtonSnippet, ButtonLinkSnippet } from '@/snippets/stories-snippets';
-import {
- buttonPropDefs,
- buttonSnippetUsage,
- buttonVariantsSnippet,
- buttonSizesSnippet,
- buttonIconsSnippet,
- buttonDisabledSnippet,
- buttonLoadingSnippet,
- buttonResponsiveSnippet,
- buttonAsLinkSnippet,
-} from './button.props';
-import { ChangelogComponent } from '@/components/ChangelogComponent';
-import { PageTitle } from '@/components/PageTitle';
-import { Theming } from '@/components/Theming';
-import { ButtonDefinition } from '../utils/definitions';
-
-
-
-}
- code={buttonVariantsSnippet}
-/>
-
-## Usage
-
-
-
-## API reference
-
-
-
-## Examples
-
-### Variants
-
-Here's a view when buttons have different variants.
-
-}
- code={buttonVariantsSnippet}
-/>
-
-### Sizes
-
-Here's a view when buttons have different sizes.
-
-}
- code={buttonSizesSnippet}
-/>
-
-### With Icons
-
-Here's a view when buttons have icons.
-
-}
- code={buttonIconsSnippet}
-/>
-
-### Disabled
-
-Here's a view when buttons are disabled.
-
-}
- code={buttonDisabledSnippet}
-/>
-
-### Loading
-
-Here's a view when buttons are in a loading state.
-
-}
- code={buttonLoadingSnippet}
-/>
-
-### Responsive
-
-Here's a view when buttons are responsive.
-
-
-
-### As Link
-
-If you want to use a button as a link, please use the `ButtonLink` component.
-
-}
- code={buttonAsLinkSnippet}
-/>
-
-
-
-
diff --git a/docs-ui/src/content/button.props.ts b/docs-ui/src/content/button.props.ts
deleted file mode 100644
index e650a9f2e9..0000000000
--- a/docs-ui/src/content/button.props.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { classNamePropDefs, stylePropDefs } from '@/utils/propDefs';
-import type { PropDef } from '@/utils/propDefs';
-
-export const buttonPropDefs: Record = {
- variant: {
- type: 'enum',
- values: ['primary', 'secondary'],
- default: 'primary',
- responsive: true,
- },
- size: {
- type: 'enum',
- values: ['small', 'medium'],
- default: 'medium',
- responsive: true,
- },
- iconStart: { type: 'enum', values: ['ReactNode'], responsive: false },
- iconEnd: { type: 'enum', values: ['ReactNode'], responsive: false },
- isDisabled: { type: 'boolean', default: 'false', responsive: false },
- loading: { type: 'boolean', default: 'false', responsive: false },
- children: { type: 'enum', values: ['ReactNode'], responsive: false },
- type: {
- type: 'enum',
- values: ['button', 'submit', 'reset'],
- default: 'button',
- responsive: false,
- },
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const buttonSnippetUsage = `import { Button } from '@backstage/ui';
-
-`;
-
-export const buttonVariantsSnippet = `
-
-
-`;
-
-export const buttonSizesSnippet = `
-
-
-`;
-
-export const buttonIconsSnippet = `
- }>Button
- }>Button
- } iconEnd={}>Button
-`;
-
-export const buttonDisabledSnippet = `
-
-
-`;
-
-export const buttonResponsiveSnippet = ``;
-
-export const buttonLoadingSnippet = ``;
-
-export const buttonAsLinkSnippet = `import { ButtonLink } from '@backstage/ui';
-
-
- Button
-`;
diff --git a/docs-ui/src/content/card.mdx b/docs-ui/src/content/card.mdx
deleted file mode 100644
index c38a07e920..0000000000
--- a/docs-ui/src/content/card.mdx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { PropsTable } from '@/components/PropsTable';
-import { CardSnippet } from '@/snippets/stories-snippets';
-import { Snippet } from '@/components/Snippet';
-import { CodeBlock } from '@/components/CodeBlock';
-import {
- cardPropDefs,
- cardUsageSnippet,
- cardDefaultSnippet,
- cardHeaderPropDefs,
- cardBodyPropDefs,
- cardFooterPropDefs,
- cardLongBodySnippet,
- cardListRowSnippet,
-} from './card.props';
-import { PageTitle } from '@/components/PageTitle';
-import { Theming } from '@/components/Theming';
-import { CardDefinition } from '../utils/definitions';
-import { ChangelogComponent } from '@/components/ChangelogComponent';
-
-
-
-}
- code={cardDefaultSnippet}
-/>
-
-## Usage
-
-
-
-## API reference
-
-### Card
-
-A card component that can be used to display content in a box.
-
-
-
-### CardHeader
-
-To display a header in a card, use the `CardHeader` component. This will be fixed at the top of the card.
-
-
-
-### CardBody
-
-To display content in a card, use the `CardBody` component. This will automatically fill the card.
-
-
-
-### CardFooter
-
-To display a footer in a card, use the `CardFooter` component. This will be fixed at the bottom of the card.
-
-
-
-## Examples
-
-### With long body
-
-Here's a view when card has a long body.
-
-}
- code={cardLongBodySnippet}
- open
-/>
-
-### With list
-
-Here's a view when card has a list.
-
-}
- code={cardListRowSnippet}
- open
-/>
-
-
-
-
diff --git a/docs-ui/src/content/card.props.ts b/docs-ui/src/content/card.props.ts
deleted file mode 100644
index 70c71bdf56..0000000000
--- a/docs-ui/src/content/card.props.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import {
- classNamePropDefs,
- stylePropDefs,
- type PropDef,
-} from '@/utils/propDefs';
-
-export const cardPropDefs: Record = {
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const cardHeaderPropDefs: Record = {
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const cardBodyPropDefs: Record = {
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const cardFooterPropDefs: Record = {
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const cardUsageSnippet = `import { card } from '@backstage/ui';
-
-
- Header
- Body
- Footer
-`;
-
-export const cardDefaultSnippet = `
- Header
- Body
- Footer
-`;
-
-export const cardLongBodySnippet = `
-
- Header
-
-
-
- This is the first paragraph of a long body text that demonstrates how
- the Card component handles extensive content. The card should adjust
- accordingly to display all the text properly while maintaining its
- structure.
-
-
- Here's a second paragraph that adds more content to our card body.
- Having multiple paragraphs helps to visualize how spacing works within
- the card component.
-
-
- This third paragraph continues to add more text to ensure we have a
- proper demonstration of a card with significant content. This makes it
- easier to test scrolling behavior and overall layout when content
- exceeds the initial view.
-
-
-
- Footer
-
-`;
-
-export const cardListRowSnippet = `
-
- Header
-
-
- Hello world
- Hello world
- Hello world
- Hello world
- ...
-
-
- Footer
-
-`;
diff --git a/docs-ui/src/content/checkbox.props.ts b/docs-ui/src/content/checkbox.props.ts
deleted file mode 100644
index ce0f1033ff..0000000000
--- a/docs-ui/src/content/checkbox.props.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import {
- classNamePropDefs,
- stylePropDefs,
- type PropDef,
-} from '@/utils/propDefs';
-
-export const checkboxPropDefs: Record = {
- children: {
- type: 'enum',
- values: ['React.ReactNode'],
- responsive: false,
- },
- isSelected: {
- type: 'enum',
- values: ['boolean'],
- responsive: false,
- },
- defaultSelected: {
- type: 'enum',
- values: ['boolean'],
- responsive: false,
- },
- onChange: {
- type: 'enum',
- values: ['(isSelected: boolean) => void'],
- responsive: false,
- },
- isDisabled: {
- type: 'enum',
- values: ['boolean'],
- responsive: false,
- },
- isRequired: {
- type: 'enum',
- values: ['boolean'],
- responsive: false,
- },
- name: {
- type: 'string',
- responsive: false,
- },
- value: {
- type: 'string',
- responsive: false,
- },
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const checkboxUsageSnippet = `import { Checkbox } from '@backstage/ui';
-
-Accept terms`;
-
-export const checkboxDefaultSnippet = `Accept terms and conditions`;
-
-export const checkboxVariantsSnippet = `
- Unchecked
- Checked
- Disabled
- Checked & Disabled
-`;
diff --git a/docs-ui/src/content/container.mdx b/docs-ui/src/content/container.mdx
deleted file mode 100644
index 56c2d5d405..0000000000
--- a/docs-ui/src/content/container.mdx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { CodeBlock } from '@/components/CodeBlock';
-import { PropsTable } from '@/components/PropsTable';
-import { Snippet } from '@/components/Snippet';
-import { ContainerSnippet } from '@/snippets/stories-snippets';
-import {
- containerPropDefs,
- containerUsageSnippet,
- containerDefaultSnippet,
- containerSimpleSnippet,
- containerResponsiveSnippet,
-} from './container.props';
-import { PageTitle } from '@/components/PageTitle';
-import { Theming } from '@/components/Theming';
-import { ContainerDefinition } from '../utils/definitions';
-import { ChangelogComponent } from '@/components/ChangelogComponent';
-
-
-
-}
- code={containerDefaultSnippet}
-/>
-
-## Usage
-
-
-
-## API reference
-
-
-
-## Examples
-
-### Simple
-
-A simple example of how to use the Container component.
-
-
-
-### Responsive padding & margin
-
-The Container component also supports responsive values, making it easy to
-create responsive designs.
-
-
-
-
-
-
diff --git a/docs-ui/src/content/container.props.ts b/docs-ui/src/content/container.props.ts
deleted file mode 100644
index a4d23a8495..0000000000
--- a/docs-ui/src/content/container.props.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import {
- classNamePropDefs,
- stylePropDefs,
- gapPropDefs,
- type PropDef,
-} from '@/utils/propDefs';
-
-export const containerPropDefs: Record = {
- ...gapPropDefs,
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const containerUsageSnippet = `import { Container } from "@backstage/ui";
-
-Hello World!`;
-
-export const containerDefaultSnippet = `
-
-`;
-
-export const containerSimpleSnippet = `
- Hello World
- Hello World
- Hello World
-`;
-
-export const containerResponsiveSnippet = `
- Hello World
- Hello World
- Hello World
-`;
diff --git a/docs-ui/src/content/dialog.props.ts b/docs-ui/src/content/dialog.props.ts
deleted file mode 100644
index 162ec307dc..0000000000
--- a/docs-ui/src/content/dialog.props.ts
+++ /dev/null
@@ -1,172 +0,0 @@
-import {
- classNamePropDefs,
- stylePropDefs,
- type PropDef,
-} from '@/utils/propDefs';
-
-export const dialogTriggerPropDefs: Record = {
- children: { type: 'enum', values: ['ReactNode'], responsive: false },
- isOpen: {
- type: 'boolean',
- description: 'Whether the overlay is open by default (controlled).',
- },
- defaultOpen: {
- type: 'boolean',
- description: 'Whether the overlay is open by default (uncontrolled).',
- },
- onOpenChange: {
- type: 'enum',
- values: ['(isOpen: boolean) => void'],
- description:
- "Handler that is called when the overlay's open state changes.",
- },
-};
-
-export const dialogPropDefs: Record = {
- children: { type: 'enum', values: ['ReactNode'], responsive: false },
- isOpen: {
- type: 'boolean',
- description: 'Whether the overlay is open by default (controlled).',
- },
- defaultOpen: {
- type: 'boolean',
- description: 'Whether the overlay is open by default (uncontrolled).',
- },
- onOpenChange: {
- type: 'enum',
- values: ['(isOpen: boolean) => void'],
- description:
- "Handler that is called when the overlay's open state changes.",
- },
- width: {
- type: 'enum',
- values: ['number', 'string'],
- responsive: false,
- },
- height: {
- type: 'enum',
- values: ['number', 'string'],
- responsive: false,
- },
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const dialogHeaderPropDefs: Record = {
- children: { type: 'enum', values: ['ReactNode'], responsive: false },
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const dialogBodyPropDefs: Record = {
- children: { type: 'enum', values: ['ReactNode'], responsive: false },
- height: {
- type: 'enum',
- values: ['number', 'string'],
- responsive: false,
- },
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const dialogFooterPropDefs: Record = {
- children: { type: 'enum', values: ['ReactNode'], responsive: false },
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const dialogClosePropDefs: Record = {
- variant: {
- type: 'enum',
- values: ['primary', 'secondary', 'tertiary'],
- default: 'secondary',
- responsive: false,
- },
- children: { type: 'enum', values: ['ReactNode'], responsive: false },
- ...classNamePropDefs,
- ...stylePropDefs,
-};
-
-export const dialogUsageSnippet = `import {
- Dialog,
- DialogTrigger,
- DialogHeader,
- DialogBody,
- DialogFooter,
-} from '@backstage/ui';
-
-
-
-
-`;
-
-export const dialogDefaultSnippet = `
-
-
-`;
-
-export const dialogFixedWidthAndHeightSnippet = `
-
-
-`;
-
-export const dialogWithFormSnippet = `
-
-