{
"v": 0,
"components": {
"design-tokens-color-brand-colors": {
"id": "design-tokens-color-brand-colors",
"name": "ColorSwatchGroup",
"path": "../../packages/design-tokens/stories/BrandColors.stories.tsx",
"jsDocTags": {},
"reactDocgen": {
"description": "",
"methods": [],
"displayName": "ColorSwatchGroup",
"definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-tokens/stories/components/ColorSwatchGroup/ColorSwatchGroup.tsx",
"actualName": "ColorSwatchGroup",
"exportName": "ColorSwatchGroup",
"props": {
"swatchData": {
"required": true,
"tsType": {
"name": "signature",
"type": "object",
"raw": "{\n [colorName: string]: ColorPalette | ColorDetails;\n}",
"signature": {
"properties": [
{
"key": {
"name": "string"
},
"value": {
"name": "union",
"raw": "ColorPalette | ColorDetails",
"elements": [
{
"name": "signature",
"type": "object",
"raw": "{\n [shade: string]: ColorDetails;\n}",
"signature": {
"properties": [
{
"key": {
"name": "string"
},
"value": {
"name": "signature",
"type": "object",
"raw": "{\n value: string; // Hex value or alias to another color\n type?: string; // Type usually color\n parent?: string; // Parent category or group of the color\n description?: string; // Description or notes about the color\n}",
"signature": {
"properties": [
{
"key": "value",
"value": {
"name": "string",
"required": true
}
},
{
"key": "type",
"value": {
"name": "string",
"required": false
}
},
{
"key": "parent",
"value": {
"name": "string",
"required": false
}
},
{
"key": "description",
"value": {
"name": "string",
"required": false
}
}
]
},
"required": true
}
}
]
}
},
{
"name": "signature",
"type": "object",
"raw": "{\n value: string; // Hex value or alias to another color\n type?: string; // Type usually color\n parent?: string; // Parent category or group of the color\n description?: string; // Description or notes about the color\n}",
"signature": {
"properties": [
{
"key": "value",
"value": {
"name": "string",
"required": true
}
},
{
"key": "type",
"value": {
"name": "string",
"required": false
}
},
{
"key": "parent",
"value": {
"name": "string",
"required": false
}
},
{
"key": "description",
"value": {
"name": "string",
"required": false
}
}
]
},
"required": true
}
],
"required": true
}
}
]
}
},
"description": "The color object"
},
"textBackgroundColor": {
"required": false,
"tsType": {
"name": "string"
},
"description": "The color of text background that contains the name of the color defaults to background.default",
"defaultValue": {
"value": "'transparent'",
"computed": false
}
},
"theme": {
"required": false,
"tsType": {
"name": "union",
"raw": "string | undefined",
"elements": [
{
"name": "string"
},
{
"name": "undefined"
}
]
},
"description": "Hex code value of the theme (light or dark mode) this is used to help determine the text color of each swatch when opacity is involved\nDefault is light theme #ffffff",
"defaultValue": {
"value": "'#ffffff'",
"computed": false
}
}
}
},
"stories": [
{
"id": "design-tokens-color-brand-colors--figma",
"name": "Figma",
"snippet": "const Figma = () => {\n const { brandColor } = useJsonColor();\n return ;\n};"
},
{
"id": "design-tokens-color-brand-colors--css",
"name": "CSS",
"snippet": "const CSS = () => {\n const cssBrandColors = getCSSVariablesFromStylesheet('--brand-colors');\n return (\n
\n {/* Mapping through each brand color and rendering a ColorSwatch component for it */}\n {Object.values(cssBrandColors).map(({ color, resolvedColor, name }) => (\n \n ))}\n
\n {/* Mapping through each brand color and rendering a ColorSwatch component for it */}\n {Object.entries(brandColorJS).map(([name, color]) => (\n \n ))}\n
\n);"
}
],
"import": "import { AvatarFavicon } from '@metamask/design-system-react';\nimport { SAMPLE_AVATARFAVICON_URIS } from './AvatarFavicon.dev';"
},
"react-components-avatargroup": {
"id": "react-components-avatargroup",
"name": "AvatarGroup",
"path": "../../packages/design-system-react/src/components/AvatarGroup/AvatarGroup.stories.tsx",
"jsDocTags": {},
"reactDocgen": {
"description": "",
"methods": [],
"displayName": "AvatarGroup",
"definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react/src/components/AvatarGroup/AvatarGroup.tsx",
"actualName": "AvatarGroup",
"exportName": "AvatarGroup",
"props": {
"overflowTextProps": {
"required": false,
"tsType": {
"name": "intersection",
"raw": "ComponentProps<'div'> &\nAvatarBasePropsShared & {\n /**\n * Optional test id for querying in tests.\n */\n 'data-testid'?: string;\n /**\n * Optional props to be passed to the Text component when rendering fallback text\n * Only used when fallbackText is provided and no children\n */\n fallbackTextProps?: Partial<\n React.HTMLAttributes & TextProps\n >;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a div element\n *\n * @default false\n */\n asChild?: boolean;\n}",
"elements": [
{
"name": "ComponentProps",
"elements": [
{
"name": "literal",
"value": "'div'"
}
],
"raw": "ComponentProps<'div'>"
},
{
"name": "AvatarBasePropsShared"
},
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * Optional test id for querying in tests.\n */\n 'data-testid'?: string;\n /**\n * Optional props to be passed to the Text component when rendering fallback text\n * Only used when fallbackText is provided and no children\n */\n fallbackTextProps?: Partial<\n React.HTMLAttributes & TextProps\n >;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a div element\n *\n * @default false\n */\n asChild?: boolean;\n}",
"signature": {
"properties": [
{
"key": "data-testid",
"value": {
"name": "string",
"required": false
},
"description": "Optional test id for querying in tests."
},
{
"key": "fallbackTextProps",
"value": {
"name": "Partial",
"elements": [
{
"name": "intersection",
"raw": "React.HTMLAttributes & TextProps",
"elements": [
{
"name": "ReactHTMLAttributes",
"raw": "React.HTMLAttributes",
"elements": [
{
"name": "HTMLSpanElement"
}
]
},
{
"name": "intersection",
"raw": "TextPropsShared & {\n /**\n * Optional prop for inline styles\n */\n style?: CSSProperties;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to apply text transformation to the content.\n * Options: Uppercase, Lowercase, Capitalize, Normal\n */\n textTransform?: TextTransform;\n /**\n * Optional prop to control the text alignment within its container.\n * Options: Left, Center, Right, Justify\n */\n textAlign?: TextAlign;\n /**\n * Optional prop to determine how text should wrap when it reaches the edge of its container.\n * Options: BreakWord, Anywhere, Normal\n */\n overflowWrap?: OverflowWrap;\n /**\n * Optional boolean that adds an ellipsis (...) when text overflows its container.\n *\n * @default false\n */\n ellipsis?: boolean;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a default DOM element.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Optional prop for testing purposes\n */\n 'data-testid'?: string;\n}",
"elements": [
{
"name": "TextPropsShared"
},
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * Optional prop for inline styles\n */\n style?: CSSProperties;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to apply text transformation to the content.\n * Options: Uppercase, Lowercase, Capitalize, Normal\n */\n textTransform?: TextTransform;\n /**\n * Optional prop to control the text alignment within its container.\n * Options: Left, Center, Right, Justify\n */\n textAlign?: TextAlign;\n /**\n * Optional prop to determine how text should wrap when it reaches the edge of its container.\n * Options: BreakWord, Anywhere, Normal\n */\n overflowWrap?: OverflowWrap;\n /**\n * Optional boolean that adds an ellipsis (...) when text overflows its container.\n *\n * @default false\n */\n ellipsis?: boolean;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a default DOM element.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Optional prop for testing purposes\n */\n 'data-testid'?: string;\n}",
"signature": {
"properties": [
{
"key": "style",
"value": {
"name": "CSSProperties",
"required": false
},
"description": "Optional prop for inline styles"
},
{
"key": "className",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop for additional CSS classes to be applied to the Text component."
},
{
"key": "textTransform",
"value": {
"name": "TextTransform",
"required": false
},
"description": "Optional prop to apply text transformation to the content.\nOptions: Uppercase, Lowercase, Capitalize, Normal"
},
{
"key": "textAlign",
"value": {
"name": "TextAlign",
"required": false
},
"description": "Optional prop to control the text alignment within its container.\nOptions: Left, Center, Right, Justify"
},
{
"key": "overflowWrap",
"value": {
"name": "OverflowWrap",
"required": false
},
"description": "Optional prop to determine how text should wrap when it reaches the edge of its container.\nOptions: BreakWord, Anywhere, Normal"
},
{
"key": "ellipsis",
"value": {
"name": "boolean",
"required": false
},
"description": "Optional boolean that adds an ellipsis (...) when text overflows its container.\n\n@default false"
},
{
"key": "asChild",
"value": {
"name": "boolean",
"required": false
},
"description": "Optional boolean that determines if the component should merge its props onto its immediate child\ninstead of rendering a default DOM element.\n\n@default false"
},
{
"key": "data-testid",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop for testing purposes"
}
]
}
}
]
}
]
}
],
"raw": "Partial<\n React.HTMLAttributes & TextProps\n>",
"required": false
},
"description": "Optional props to be passed to the Text component when rendering fallback text\nOnly used when fallbackText is provided and no children"
},
{
"key": "asChild",
"value": {
"name": "boolean",
"required": false
},
"description": "Optional boolean that determines if the component should merge its props onto its immediate child\ninstead of rendering a div element\n\n@default false"
}
]
}
}
]
},
"description": "Optional prop to pass additional AvatarBase props to the overflow Text element."
},
"className": {
"required": false,
"tsType": {
"name": "string"
},
"description": "Optional prop for additional CSS classes to be applied to the AvatarGroup component.\nThese classes will be merged with the component's default classes using twMerge."
},
"style": {
"required": false,
"tsType": {
"name": "ReactCSSProperties",
"raw": "React.CSSProperties"
},
"description": "Optional CSS styles to be applied to the component.\nShould be used sparingly and only for dynamic styles that can't be achieved with className."
},
"size": {
"defaultValue": {
"value": "'md'",
"computed": false
},
"required": false
},
"max": {
"defaultValue": {
"value": "4",
"computed": false
},
"required": false
},
"isReverse": {
"defaultValue": {
"value": "false",
"computed": false
},
"required": false
}
}
},
"stories": [
{
"id": "react-components-avatargroup--default",
"name": "Default",
"snippet": "const Default = () => ;"
},
{
"id": "react-components-avatargroup--variant",
"name": "Variant",
"snippet": "const Variant = () => (\n
\n);"
}
],
"import": "import { AvatarGroup } from '@metamask/design-system-react';\nimport { AvatarGroupVariant, AvatarGroupSize } from '@metamask/design-system-shared';"
},
"react-components-avataricon": {
"id": "react-components-avataricon",
"name": "AvatarIcon",
"path": "../../packages/design-system-react/src/components/AvatarIcon/AvatarIcon.stories.tsx",
"jsDocTags": {},
"reactDocgen": {
"description": "",
"methods": [],
"displayName": "AvatarIcon",
"definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react/src/components/AvatarIcon/AvatarIcon.tsx",
"actualName": "AvatarIcon",
"exportName": "AvatarIcon",
"props": {
"iconProps": {
"required": false,
"tsType": {
"name": "Omit",
"elements": [
{
"name": "intersection",
"raw": "SVGProps &\nIconPropsShared & {\n /**\n * Additional CSS classes to be added to the component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n /**\n * Optional prop to add a test id to the icon\n */\n 'data-testid'?: string;\n}",
"elements": [
{
"name": "SVGProps",
"elements": [
{
"name": "ComponentPropsWithoutRef",
"elements": [
{
"name": "literal",
"value": "'svg'"
}
],
"raw": "ComponentPropsWithoutRef<'svg'>"
}
],
"raw": "SVGProps"
},
{
"name": "IconPropsShared"
},
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * Additional CSS classes to be added to the component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n /**\n * Optional prop to add a test id to the icon\n */\n 'data-testid'?: string;\n}",
"signature": {
"properties": [
{
"key": "className",
"value": {
"name": "string",
"required": false
},
"description": "Additional CSS classes to be added to the component.\nThese classes will be merged with the component's default classes using twMerge."
},
{
"key": "style",
"value": {
"name": "ReactCSSProperties",
"raw": "React.CSSProperties",
"required": false
},
"description": "Optional CSS styles to be applied to the component.\nShould be used sparingly and only for dynamic styles that can't be achieved with className."
},
{
"key": "data-testid",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop to add a test id to the icon"
}
]
}
}
]
},
{
"name": "literal",
"value": "'name'"
}
],
"raw": "Omit"
},
"description": "Optional props to be passed to the Icon component"
},
"size": {
"defaultValue": {
"value": "'md'",
"computed": false
},
"required": false
},
"severity": {
"defaultValue": {
"value": "'neutral'",
"computed": false
},
"required": false
}
}
},
"stories": [
{
"id": "react-components-avataricon--default",
"name": "Default",
"snippet": "const Default = () => ;"
},
{
"id": "react-components-avataricon--icon-name-story",
"name": "IconName",
"snippet": "const IconNameStory = () => (\n
\n);"
}
],
"import": "import { AvatarToken } from '@metamask/design-system-react';\nimport { SAMPLE_AVATARTOKEN_URIS } from './AvatarToken.dev';"
},
"react-components-badgecount": {
"id": "react-components-badgecount",
"name": "BadgeCount",
"path": "../../packages/design-system-react/src/components/BadgeCount/BadgeCount.stories.tsx",
"jsDocTags": {},
"reactDocgen": {
"description": "",
"methods": [],
"displayName": "BadgeCount",
"definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react/src/components/BadgeCount/BadgeCount.tsx",
"actualName": "BadgeCount",
"exportName": "BadgeCount",
"props": {
"textProps": {
"required": false,
"tsType": {
"name": "Partial",
"elements": [
{
"name": "intersection",
"raw": "TextPropsShared & {\n /**\n * Optional prop for inline styles\n */\n style?: CSSProperties;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to apply text transformation to the content.\n * Options: Uppercase, Lowercase, Capitalize, Normal\n */\n textTransform?: TextTransform;\n /**\n * Optional prop to control the text alignment within its container.\n * Options: Left, Center, Right, Justify\n */\n textAlign?: TextAlign;\n /**\n * Optional prop to determine how text should wrap when it reaches the edge of its container.\n * Options: BreakWord, Anywhere, Normal\n */\n overflowWrap?: OverflowWrap;\n /**\n * Optional boolean that adds an ellipsis (...) when text overflows its container.\n *\n * @default false\n */\n ellipsis?: boolean;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a default DOM element.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Optional prop for testing purposes\n */\n 'data-testid'?: string;\n}",
"elements": [
{
"name": "TextPropsShared"
},
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * Optional prop for inline styles\n */\n style?: CSSProperties;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to apply text transformation to the content.\n * Options: Uppercase, Lowercase, Capitalize, Normal\n */\n textTransform?: TextTransform;\n /**\n * Optional prop to control the text alignment within its container.\n * Options: Left, Center, Right, Justify\n */\n textAlign?: TextAlign;\n /**\n * Optional prop to determine how text should wrap when it reaches the edge of its container.\n * Options: BreakWord, Anywhere, Normal\n */\n overflowWrap?: OverflowWrap;\n /**\n * Optional boolean that adds an ellipsis (...) when text overflows its container.\n *\n * @default false\n */\n ellipsis?: boolean;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a default DOM element.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Optional prop for testing purposes\n */\n 'data-testid'?: string;\n}",
"signature": {
"properties": [
{
"key": "style",
"value": {
"name": "CSSProperties",
"required": false
},
"description": "Optional prop for inline styles"
},
{
"key": "className",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop for additional CSS classes to be applied to the Text component."
},
{
"key": "textTransform",
"value": {
"name": "TextTransform",
"required": false
},
"description": "Optional prop to apply text transformation to the content.\nOptions: Uppercase, Lowercase, Capitalize, Normal"
},
{
"key": "textAlign",
"value": {
"name": "TextAlign",
"required": false
},
"description": "Optional prop to control the text alignment within its container.\nOptions: Left, Center, Right, Justify"
},
{
"key": "overflowWrap",
"value": {
"name": "OverflowWrap",
"required": false
},
"description": "Optional prop to determine how text should wrap when it reaches the edge of its container.\nOptions: BreakWord, Anywhere, Normal"
},
{
"key": "ellipsis",
"value": {
"name": "boolean",
"required": false
},
"description": "Optional boolean that adds an ellipsis (...) when text overflows its container.\n\n@default false"
},
{
"key": "asChild",
"value": {
"name": "boolean",
"required": false
},
"description": "Optional boolean that determines if the component should merge its props onto its immediate child\ninstead of rendering a default DOM element.\n\n@default false"
},
{
"key": "data-testid",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop for testing purposes"
}
]
}
}
]
}
],
"raw": "Partial"
},
"description": "Optional props to be passed to the Text component used by count"
},
"className": {
"required": false,
"tsType": {
"name": "string"
},
"description": "Optional prop for additional CSS classes to be applied to the BadgeCount component.\nThese classes will be merged with the component's default classes using twMerge.",
"defaultValue": {
"value": "''",
"computed": false
}
},
"style": {
"required": false,
"tsType": {
"name": "ReactCSSProperties",
"raw": "React.CSSProperties"
},
"description": "Optional CSS styles to be applied to the component.\nShould be used sparingly and only for dynamic styles that can't be achieved with className."
},
"size": {
"defaultValue": {
"value": "'md'",
"computed": false
},
"required": false
},
"max": {
"defaultValue": {
"value": "99",
"computed": false
},
"required": false
}
}
},
"stories": [
{
"id": "react-components-badgecount--default",
"name": "Default",
"snippet": "const Default = () => ;"
},
{
"id": "react-components-badgecount--size",
"name": "Size",
"snippet": "const Size = () => (\n
\n);"
}
],
"import": "import { BadgeCount } from '@metamask/design-system-react';\nimport { BadgeCountSize } from '@metamask/design-system-shared';"
},
"react-components-badgeicon": {
"id": "react-components-badgeicon",
"name": "BadgeIcon",
"path": "../../packages/design-system-react/src/components/BadgeIcon/BadgeIcon.stories.tsx",
"jsDocTags": {},
"reactDocgen": {
"description": "",
"methods": [],
"displayName": "BadgeIcon",
"definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react/src/components/BadgeIcon/BadgeIcon.tsx",
"actualName": "BadgeIcon",
"exportName": "BadgeIcon",
"props": {
"iconProps": {
"required": false,
"tsType": {
"name": "Omit",
"elements": [
{
"name": "intersection",
"raw": "SVGProps &\nIconPropsShared & {\n /**\n * Additional CSS classes to be added to the component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n /**\n * Optional prop to add a test id to the icon\n */\n 'data-testid'?: string;\n}",
"elements": [
{
"name": "SVGProps",
"elements": [
{
"name": "ComponentPropsWithoutRef",
"elements": [
{
"name": "literal",
"value": "'svg'"
}
],
"raw": "ComponentPropsWithoutRef<'svg'>"
}
],
"raw": "SVGProps"
},
{
"name": "IconPropsShared"
},
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * Additional CSS classes to be added to the component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n /**\n * Optional prop to add a test id to the icon\n */\n 'data-testid'?: string;\n}",
"signature": {
"properties": [
{
"key": "className",
"value": {
"name": "string",
"required": false
},
"description": "Additional CSS classes to be added to the component.\nThese classes will be merged with the component's default classes using twMerge."
},
{
"key": "style",
"value": {
"name": "ReactCSSProperties",
"raw": "React.CSSProperties",
"required": false
},
"description": "Optional CSS styles to be applied to the component.\nShould be used sparingly and only for dynamic styles that can't be achieved with className."
},
{
"key": "data-testid",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop to add a test id to the icon"
}
]
}
}
]
},
{
"name": "literal",
"value": "'name'"
}
],
"raw": "Omit"
},
"description": "Optional prop to pass additional properties to the icon"
},
"className": {
"required": false,
"tsType": {
"name": "string"
},
"description": "Optional prop for additional CSS classes to be applied to the BadgeIcon component.\nThese classes will be merged with the component's default classes using twMerge.",
"defaultValue": {
"value": "''",
"computed": false
}
},
"style": {
"required": false,
"tsType": {
"name": "ReactCSSProperties",
"raw": "React.CSSProperties"
},
"description": "Optional CSS styles to be applied to the component.\nShould be used sparingly and only for dynamic styles that can't be achieved with className."
}
}
},
"stories": [
{
"id": "react-components-badgeicon--default",
"name": "Default",
"snippet": "const Default = () => ;"
},
{
"id": "react-components-badgeicon--icon-name-story",
"name": "IconName",
"snippet": "const IconNameStory = () => (\n
\n);"
}
],
"import": "import {\n AvatarAccount,\n AvatarNetwork,\n AvatarToken,\n BadgeCount,\n BadgeNetwork,\n BadgeStatus,\n BadgeWrapper,\n ButtonIcon,\n} from '@metamask/design-system-react';\nimport { BadgeWrapperPosition, BadgeWrapperPositionAnchorShape } from '@metamask/design-system-shared';"
},
"react-components-banneralert": {
"id": "react-components-banneralert",
"name": "BannerAlert",
"path": "../../packages/design-system-react/src/components/BannerAlert/BannerAlert.stories.tsx",
"jsDocTags": {},
"reactDocgen": {
"description": "",
"methods": [],
"displayName": "BannerAlert",
"definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react/src/components/BannerAlert/BannerAlert.tsx",
"actualName": "BannerAlert",
"exportName": "BannerAlert",
"props": {
"titleProps": {
"required": false,
"tsType": {
"name": "Partial",
"elements": [
{
"name": "intersection",
"raw": "TextPropsShared & {\n /**\n * Optional prop for inline styles\n */\n style?: CSSProperties;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to apply text transformation to the content.\n * Options: Uppercase, Lowercase, Capitalize, Normal\n */\n textTransform?: TextTransform;\n /**\n * Optional prop to control the text alignment within its container.\n * Options: Left, Center, Right, Justify\n */\n textAlign?: TextAlign;\n /**\n * Optional prop to determine how text should wrap when it reaches the edge of its container.\n * Options: BreakWord, Anywhere, Normal\n */\n overflowWrap?: OverflowWrap;\n /**\n * Optional boolean that adds an ellipsis (...) when text overflows its container.\n *\n * @default false\n */\n ellipsis?: boolean;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a default DOM element.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Optional prop for testing purposes\n */\n 'data-testid'?: string;\n}",
"elements": [
{
"name": "TextPropsShared"
},
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * Optional prop for inline styles\n */\n style?: CSSProperties;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to apply text transformation to the content.\n * Options: Uppercase, Lowercase, Capitalize, Normal\n */\n textTransform?: TextTransform;\n /**\n * Optional prop to control the text alignment within its container.\n * Options: Left, Center, Right, Justify\n */\n textAlign?: TextAlign;\n /**\n * Optional prop to determine how text should wrap when it reaches the edge of its container.\n * Options: BreakWord, Anywhere, Normal\n */\n overflowWrap?: OverflowWrap;\n /**\n * Optional boolean that adds an ellipsis (...) when text overflows its container.\n *\n * @default false\n */\n ellipsis?: boolean;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a default DOM element.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Optional prop for testing purposes\n */\n 'data-testid'?: string;\n}",
"signature": {
"properties": [
{
"key": "style",
"value": {
"name": "CSSProperties",
"required": false
},
"description": "Optional prop for inline styles"
},
{
"key": "className",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop for additional CSS classes to be applied to the Text component."
},
{
"key": "textTransform",
"value": {
"name": "TextTransform",
"required": false
},
"description": "Optional prop to apply text transformation to the content.\nOptions: Uppercase, Lowercase, Capitalize, Normal"
},
{
"key": "textAlign",
"value": {
"name": "TextAlign",
"required": false
},
"description": "Optional prop to control the text alignment within its container.\nOptions: Left, Center, Right, Justify"
},
{
"key": "overflowWrap",
"value": {
"name": "OverflowWrap",
"required": false
},
"description": "Optional prop to determine how text should wrap when it reaches the edge of its container.\nOptions: BreakWord, Anywhere, Normal"
},
{
"key": "ellipsis",
"value": {
"name": "boolean",
"required": false
},
"description": "Optional boolean that adds an ellipsis (...) when text overflows its container.\n\n@default false"
},
{
"key": "asChild",
"value": {
"name": "boolean",
"required": false
},
"description": "Optional boolean that determines if the component should merge its props onto its immediate child\ninstead of rendering a default DOM element.\n\n@default false"
},
{
"key": "data-testid",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop for testing purposes"
}
]
}
}
]
}
],
"raw": "Partial"
},
"description": "Optional props for the title `Text` when the title is a string."
},
"descriptionProps": {
"required": false,
"tsType": {
"name": "Partial",
"elements": [
{
"name": "intersection",
"raw": "TextPropsShared & {\n /**\n * Optional prop for inline styles\n */\n style?: CSSProperties;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to apply text transformation to the content.\n * Options: Uppercase, Lowercase, Capitalize, Normal\n */\n textTransform?: TextTransform;\n /**\n * Optional prop to control the text alignment within its container.\n * Options: Left, Center, Right, Justify\n */\n textAlign?: TextAlign;\n /**\n * Optional prop to determine how text should wrap when it reaches the edge of its container.\n * Options: BreakWord, Anywhere, Normal\n */\n overflowWrap?: OverflowWrap;\n /**\n * Optional boolean that adds an ellipsis (...) when text overflows its container.\n *\n * @default false\n */\n ellipsis?: boolean;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a default DOM element.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Optional prop for testing purposes\n */\n 'data-testid'?: string;\n}",
"elements": [
{
"name": "TextPropsShared"
},
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * Optional prop for inline styles\n */\n style?: CSSProperties;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to apply text transformation to the content.\n * Options: Uppercase, Lowercase, Capitalize, Normal\n */\n textTransform?: TextTransform;\n /**\n * Optional prop to control the text alignment within its container.\n * Options: Left, Center, Right, Justify\n */\n textAlign?: TextAlign;\n /**\n * Optional prop to determine how text should wrap when it reaches the edge of its container.\n * Options: BreakWord, Anywhere, Normal\n */\n overflowWrap?: OverflowWrap;\n /**\n * Optional boolean that adds an ellipsis (...) when text overflows its container.\n *\n * @default false\n */\n ellipsis?: boolean;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a default DOM element.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Optional prop for testing purposes\n */\n 'data-testid'?: string;\n}",
"signature": {
"properties": [
{
"key": "style",
"value": {
"name": "CSSProperties",
"required": false
},
"description": "Optional prop for inline styles"
},
{
"key": "className",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop for additional CSS classes to be applied to the Text component."
},
{
"key": "textTransform",
"value": {
"name": "TextTransform",
"required": false
},
"description": "Optional prop to apply text transformation to the content.\nOptions: Uppercase, Lowercase, Capitalize, Normal"
},
{
"key": "textAlign",
"value": {
"name": "TextAlign",
"required": false
},
"description": "Optional prop to control the text alignment within its container.\nOptions: Left, Center, Right, Justify"
},
{
"key": "overflowWrap",
"value": {
"name": "OverflowWrap",
"required": false
},
"description": "Optional prop to determine how text should wrap when it reaches the edge of its container.\nOptions: BreakWord, Anywhere, Normal"
},
{
"key": "ellipsis",
"value": {
"name": "boolean",
"required": false
},
"description": "Optional boolean that adds an ellipsis (...) when text overflows its container.\n\n@default false"
},
{
"key": "asChild",
"value": {
"name": "boolean",
"required": false
},
"description": "Optional boolean that determines if the component should merge its props onto its immediate child\ninstead of rendering a default DOM element.\n\n@default false"
},
{
"key": "data-testid",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop for testing purposes"
}
]
}
}
]
}
],
"raw": "Partial"
},
"description": "Optional props for the description `Text` when description is a string."
},
"childrenWrapperProps": {
"required": false,
"tsType": {
"name": "Partial",
"elements": [
{
"name": "intersection",
"raw": "TextPropsShared & {\n /**\n * Optional prop for inline styles\n */\n style?: CSSProperties;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to apply text transformation to the content.\n * Options: Uppercase, Lowercase, Capitalize, Normal\n */\n textTransform?: TextTransform;\n /**\n * Optional prop to control the text alignment within its container.\n * Options: Left, Center, Right, Justify\n */\n textAlign?: TextAlign;\n /**\n * Optional prop to determine how text should wrap when it reaches the edge of its container.\n * Options: BreakWord, Anywhere, Normal\n */\n overflowWrap?: OverflowWrap;\n /**\n * Optional boolean that adds an ellipsis (...) when text overflows its container.\n *\n * @default false\n */\n ellipsis?: boolean;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a default DOM element.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Optional prop for testing purposes\n */\n 'data-testid'?: string;\n}",
"elements": [
{
"name": "TextPropsShared"
},
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * Optional prop for inline styles\n */\n style?: CSSProperties;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to apply text transformation to the content.\n * Options: Uppercase, Lowercase, Capitalize, Normal\n */\n textTransform?: TextTransform;\n /**\n * Optional prop to control the text alignment within its container.\n * Options: Left, Center, Right, Justify\n */\n textAlign?: TextAlign;\n /**\n * Optional prop to determine how text should wrap when it reaches the edge of its container.\n * Options: BreakWord, Anywhere, Normal\n */\n overflowWrap?: OverflowWrap;\n /**\n * Optional boolean that adds an ellipsis (...) when text overflows its container.\n *\n * @default false\n */\n ellipsis?: boolean;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a default DOM element.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Optional prop for testing purposes\n */\n 'data-testid'?: string;\n}",
"signature": {
"properties": [
{
"key": "style",
"value": {
"name": "CSSProperties",
"required": false
},
"description": "Optional prop for inline styles"
},
{
"key": "className",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop for additional CSS classes to be applied to the Text component."
},
{
"key": "textTransform",
"value": {
"name": "TextTransform",
"required": false
},
"description": "Optional prop to apply text transformation to the content.\nOptions: Uppercase, Lowercase, Capitalize, Normal"
},
{
"key": "textAlign",
"value": {
"name": "TextAlign",
"required": false
},
"description": "Optional prop to control the text alignment within its container.\nOptions: Left, Center, Right, Justify"
},
{
"key": "overflowWrap",
"value": {
"name": "OverflowWrap",
"required": false
},
"description": "Optional prop to determine how text should wrap when it reaches the edge of its container.\nOptions: BreakWord, Anywhere, Normal"
},
{
"key": "ellipsis",
"value": {
"name": "boolean",
"required": false
},
"description": "Optional boolean that adds an ellipsis (...) when text overflows its container.\n\n@default false"
},
{
"key": "asChild",
"value": {
"name": "boolean",
"required": false
},
"description": "Optional boolean that determines if the component should merge its props onto its immediate child\ninstead of rendering a default DOM element.\n\n@default false"
},
{
"key": "data-testid",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop for testing purposes"
}
]
}
}
]
}
],
"raw": "Partial"
},
"description": "Optional props for the children wrapper `Text` when children is a string."
},
"onClose": {
"required": false,
"tsType": {
"name": "MouseEventHandler",
"elements": [
{
"name": "HTMLButtonElement"
}
],
"raw": "MouseEventHandler"
},
"description": "Optional click handler for the close button.\nIf provided, a close button is shown."
},
"closeButtonProps": {
"required": false,
"tsType": {
"name": "intersection",
"raw": "Omit<\n Partial,\n 'iconName' | 'onClick'\n> & {\n /**\n * Optional test id for the close button element.\n */\n 'data-testid'?: string;\n}",
"elements": [
{
"name": "Omit",
"elements": [
{
"name": "Partial",
"elements": [
{
"name": "intersection",
"raw": "ComponentProps<'button'> &\nButtonIconPropsShared & {\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Required prop to provide an accessible label for the button\n */\n ariaLabel: string;\n /**\n * Optional prop for additional CSS classes to be applied to the ButtonIcon component\n */\n className?: string;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n}",
"elements": [
{
"name": "ComponentProps",
"elements": [
{
"name": "literal",
"value": "'button'"
}
],
"raw": "ComponentProps<'button'>"
},
{
"name": "ButtonIconPropsShared"
},
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Required prop to provide an accessible label for the button\n */\n ariaLabel: string;\n /**\n * Optional prop for additional CSS classes to be applied to the ButtonIcon component\n */\n className?: string;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n}",
"signature": {
"properties": [
{
"key": "iconProps",
"value": {
"name": "Partial",
"elements": [
{
"name": "intersection",
"raw": "SVGProps &\nIconPropsShared & {\n /**\n * Additional CSS classes to be added to the component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n /**\n * Optional prop to add a test id to the icon\n */\n 'data-testid'?: string;\n}",
"elements": [
{
"name": "SVGProps",
"elements": [
{
"name": "ComponentPropsWithoutRef",
"elements": [
{
"name": "literal",
"value": "'svg'"
}
],
"raw": "ComponentPropsWithoutRef<'svg'>"
}
],
"raw": "SVGProps"
},
{
"name": "IconPropsShared"
},
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * Additional CSS classes to be added to the component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n /**\n * Optional prop to add a test id to the icon\n */\n 'data-testid'?: string;\n}",
"signature": {
"properties": [
{
"key": "className",
"value": {
"name": "string",
"required": false
},
"description": "Additional CSS classes to be added to the component.\nThese classes will be merged with the component's default classes using twMerge."
},
{
"key": "style",
"value": {
"name": "ReactCSSProperties",
"raw": "React.CSSProperties",
"required": false
},
"description": "Optional CSS styles to be applied to the component.\nShould be used sparingly and only for dynamic styles that can't be achieved with className."
},
{
"key": "data-testid",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop to add a test id to the icon"
}
]
}
}
]
}
],
"raw": "Partial",
"required": false
},
"description": "Optional prop to pass additional properties to the icon"
},
{
"key": "ariaLabel",
"value": {
"name": "string",
"required": true
},
"description": "Required prop to provide an accessible label for the button"
},
{
"key": "className",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop for additional CSS classes to be applied to the ButtonIcon component"
},
{
"key": "style",
"value": {
"name": "ReactCSSProperties",
"raw": "React.CSSProperties",
"required": false
},
"description": "Optional CSS styles to be applied to the component.\nShould be used sparingly and only for dynamic styles that can't be achieved with className."
}
]
}
}
]
}
],
"raw": "Partial"
},
{
"name": "union",
"raw": "'iconName' | 'onClick'",
"elements": [
{
"name": "literal",
"value": "'iconName'"
},
{
"name": "literal",
"value": "'onClick'"
}
]
}
],
"raw": "Omit<\n Partial,\n 'iconName' | 'onClick'\n>"
},
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * Optional test id for the close button element.\n */\n 'data-testid'?: string;\n}",
"signature": {
"properties": [
{
"key": "data-testid",
"value": {
"name": "string",
"required": false
},
"description": "Optional test id for the close button element."
}
]
}
}
]
},
"description": "Optional props for the close `ButtonIcon`.\nOnly used when `onClose` is provided."
},
"iconProps": {
"required": false,
"tsType": {
"name": "Omit",
"elements": [
{
"name": "intersection",
"raw": "SVGProps &\nIconPropsShared & {\n /**\n * Additional CSS classes to be added to the component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n /**\n * Optional prop to add a test id to the icon\n */\n 'data-testid'?: string;\n}",
"elements": [
{
"name": "SVGProps",
"elements": [
{
"name": "ComponentPropsWithoutRef",
"elements": [
{
"name": "literal",
"value": "'svg'"
}
],
"raw": "ComponentPropsWithoutRef<'svg'>"
}
],
"raw": "SVGProps"
},
{
"name": "IconPropsShared"
},
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * Additional CSS classes to be added to the component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n /**\n * Optional prop to add a test id to the icon\n */\n 'data-testid'?: string;\n}",
"signature": {
"properties": [
{
"key": "className",
"value": {
"name": "string",
"required": false
},
"description": "Additional CSS classes to be added to the component.\nThese classes will be merged with the component's default classes using twMerge."
},
{
"key": "style",
"value": {
"name": "ReactCSSProperties",
"raw": "React.CSSProperties",
"required": false
},
"description": "Optional CSS styles to be applied to the component.\nShould be used sparingly and only for dynamic styles that can't be achieved with className."
},
{
"key": "data-testid",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop to add a test id to the icon"
}
]
}
}
]
},
{
"name": "union",
"raw": "'name' | 'size' | 'color'",
"elements": [
{
"name": "literal",
"value": "'name'"
},
{
"name": "literal",
"value": "'size'"
},
{
"name": "literal",
"value": "'color'"
}
]
}
],
"raw": "Omit"
},
"description": ""
},
"severity": {
"defaultValue": {
"value": "'info'",
"computed": false
},
"required": false
}
}
},
"stories": [
{
"id": "react-components-banneralert--default",
"name": "Default",
"snippet": "const Default = () => ;"
},
{
"id": "react-components-banneralert--severity",
"name": "Severity",
"snippet": "const Severity = () =>
\n This is a neutral banner.\n \n This is an info banner.\n \n This is a success banner.\n \n This is a warning banner.\n \n This is a danger banner.\n \n
;"
},
{
"id": "react-components-banneralert--title",
"name": "Title",
"snippet": "const Title = () => ;"
},
{
"id": "react-components-banneralert--description",
"name": "Description",
"snippet": "const Description = () => ;"
},
{
"id": "react-components-banneralert--children",
"name": "Children",
"snippet": "const Children = () => \n Children can include richer content and can be any React node.\n \n;"
},
{
"id": "react-components-banneralert--action-button-on-click",
"name": "Action Button On Click",
"snippet": "const ActionButtonOnClick = () => Use actionButtonLabel for the text and actionButtonOnClick for interaction.;"
},
{
"id": "react-components-banneralert--action-button-layout",
"name": "Action Button Layout",
"snippet": "const ActionButtonLayout = () =>
\n undefined}\n onClose={() => undefined}\n title=\"End\"\n description=\"One-line description for short copy.\"\n actionButtonLayout={BannerBaseActionButtonLayout.End} />\n undefined}\n onClose={() => undefined}\n title=\"Below\"\n description=\"Use Below when the body is longer or wraps across multiple lines so the action stays under the content.\"\n actionButtonLayout={BannerBaseActionButtonLayout.Below} />\n
;"
},
{
"id": "react-components-banneralert--on-close",
"name": "On Close",
"snippet": "const OnClose = () => Use the close icon to trigger onClose.;"
}
],
"import": "import { BannerAlert, Text } from '@metamask/design-system-react';\nimport { BannerAlertSeverity } from '.';\nimport { IconName } from '../Icon';"
},
"react-components-bannerbase": {
"id": "react-components-bannerbase",
"name": "BannerBase",
"path": "../../packages/design-system-react/src/components/BannerBase/BannerBase.stories.tsx",
"jsDocTags": {},
"reactDocgen": {
"description": "",
"methods": [],
"displayName": "BannerBase",
"definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react/src/components/BannerBase/BannerBase.tsx",
"actualName": "BannerBase",
"exportName": "BannerBase",
"props": {
"titleProps": {
"required": false,
"tsType": {
"name": "Partial",
"elements": [
{
"name": "intersection",
"raw": "TextPropsShared & {\n /**\n * Optional prop for inline styles\n */\n style?: CSSProperties;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to apply text transformation to the content.\n * Options: Uppercase, Lowercase, Capitalize, Normal\n */\n textTransform?: TextTransform;\n /**\n * Optional prop to control the text alignment within its container.\n * Options: Left, Center, Right, Justify\n */\n textAlign?: TextAlign;\n /**\n * Optional prop to determine how text should wrap when it reaches the edge of its container.\n * Options: BreakWord, Anywhere, Normal\n */\n overflowWrap?: OverflowWrap;\n /**\n * Optional boolean that adds an ellipsis (...) when text overflows its container.\n *\n * @default false\n */\n ellipsis?: boolean;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a default DOM element.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Optional prop for testing purposes\n */\n 'data-testid'?: string;\n}",
"elements": [
{
"name": "TextPropsShared"
},
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * Optional prop for inline styles\n */\n style?: CSSProperties;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to apply text transformation to the content.\n * Options: Uppercase, Lowercase, Capitalize, Normal\n */\n textTransform?: TextTransform;\n /**\n * Optional prop to control the text alignment within its container.\n * Options: Left, Center, Right, Justify\n */\n textAlign?: TextAlign;\n /**\n * Optional prop to determine how text should wrap when it reaches the edge of its container.\n * Options: BreakWord, Anywhere, Normal\n */\n overflowWrap?: OverflowWrap;\n /**\n * Optional boolean that adds an ellipsis (...) when text overflows its container.\n *\n * @default false\n */\n ellipsis?: boolean;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a default DOM element.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Optional prop for testing purposes\n */\n 'data-testid'?: string;\n}",
"signature": {
"properties": [
{
"key": "style",
"value": {
"name": "CSSProperties",
"required": false
},
"description": "Optional prop for inline styles"
},
{
"key": "className",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop for additional CSS classes to be applied to the Text component."
},
{
"key": "textTransform",
"value": {
"name": "TextTransform",
"required": false
},
"description": "Optional prop to apply text transformation to the content.\nOptions: Uppercase, Lowercase, Capitalize, Normal"
},
{
"key": "textAlign",
"value": {
"name": "TextAlign",
"required": false
},
"description": "Optional prop to control the text alignment within its container.\nOptions: Left, Center, Right, Justify"
},
{
"key": "overflowWrap",
"value": {
"name": "OverflowWrap",
"required": false
},
"description": "Optional prop to determine how text should wrap when it reaches the edge of its container.\nOptions: BreakWord, Anywhere, Normal"
},
{
"key": "ellipsis",
"value": {
"name": "boolean",
"required": false
},
"description": "Optional boolean that adds an ellipsis (...) when text overflows its container.\n\n@default false"
},
{
"key": "asChild",
"value": {
"name": "boolean",
"required": false
},
"description": "Optional boolean that determines if the component should merge its props onto its immediate child\ninstead of rendering a default DOM element.\n\n@default false"
},
{
"key": "data-testid",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop for testing purposes"
}
]
}
}
]
}
],
"raw": "Partial"
},
"description": "Optional props for the title `Text` when the title is a string."
},
"descriptionProps": {
"required": false,
"tsType": {
"name": "Partial",
"elements": [
{
"name": "intersection",
"raw": "TextPropsShared & {\n /**\n * Optional prop for inline styles\n */\n style?: CSSProperties;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to apply text transformation to the content.\n * Options: Uppercase, Lowercase, Capitalize, Normal\n */\n textTransform?: TextTransform;\n /**\n * Optional prop to control the text alignment within its container.\n * Options: Left, Center, Right, Justify\n */\n textAlign?: TextAlign;\n /**\n * Optional prop to determine how text should wrap when it reaches the edge of its container.\n * Options: BreakWord, Anywhere, Normal\n */\n overflowWrap?: OverflowWrap;\n /**\n * Optional boolean that adds an ellipsis (...) when text overflows its container.\n *\n * @default false\n */\n ellipsis?: boolean;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a default DOM element.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Optional prop for testing purposes\n */\n 'data-testid'?: string;\n}",
"elements": [
{
"name": "TextPropsShared"
},
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * Optional prop for inline styles\n */\n style?: CSSProperties;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to apply text transformation to the content.\n * Options: Uppercase, Lowercase, Capitalize, Normal\n */\n textTransform?: TextTransform;\n /**\n * Optional prop to control the text alignment within its container.\n * Options: Left, Center, Right, Justify\n */\n textAlign?: TextAlign;\n /**\n * Optional prop to determine how text should wrap when it reaches the edge of its container.\n * Options: BreakWord, Anywhere, Normal\n */\n overflowWrap?: OverflowWrap;\n /**\n * Optional boolean that adds an ellipsis (...) when text overflows its container.\n *\n * @default false\n */\n ellipsis?: boolean;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a default DOM element.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Optional prop for testing purposes\n */\n 'data-testid'?: string;\n}",
"signature": {
"properties": [
{
"key": "style",
"value": {
"name": "CSSProperties",
"required": false
},
"description": "Optional prop for inline styles"
},
{
"key": "className",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop for additional CSS classes to be applied to the Text component."
},
{
"key": "textTransform",
"value": {
"name": "TextTransform",
"required": false
},
"description": "Optional prop to apply text transformation to the content.\nOptions: Uppercase, Lowercase, Capitalize, Normal"
},
{
"key": "textAlign",
"value": {
"name": "TextAlign",
"required": false
},
"description": "Optional prop to control the text alignment within its container.\nOptions: Left, Center, Right, Justify"
},
{
"key": "overflowWrap",
"value": {
"name": "OverflowWrap",
"required": false
},
"description": "Optional prop to determine how text should wrap when it reaches the edge of its container.\nOptions: BreakWord, Anywhere, Normal"
},
{
"key": "ellipsis",
"value": {
"name": "boolean",
"required": false
},
"description": "Optional boolean that adds an ellipsis (...) when text overflows its container.\n\n@default false"
},
{
"key": "asChild",
"value": {
"name": "boolean",
"required": false
},
"description": "Optional boolean that determines if the component should merge its props onto its immediate child\ninstead of rendering a default DOM element.\n\n@default false"
},
{
"key": "data-testid",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop for testing purposes"
}
]
}
}
]
}
],
"raw": "Partial"
},
"description": "Optional props for the description `Text` when description is a string."
},
"childrenWrapperProps": {
"required": false,
"tsType": {
"name": "Partial",
"elements": [
{
"name": "intersection",
"raw": "TextPropsShared & {\n /**\n * Optional prop for inline styles\n */\n style?: CSSProperties;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to apply text transformation to the content.\n * Options: Uppercase, Lowercase, Capitalize, Normal\n */\n textTransform?: TextTransform;\n /**\n * Optional prop to control the text alignment within its container.\n * Options: Left, Center, Right, Justify\n */\n textAlign?: TextAlign;\n /**\n * Optional prop to determine how text should wrap when it reaches the edge of its container.\n * Options: BreakWord, Anywhere, Normal\n */\n overflowWrap?: OverflowWrap;\n /**\n * Optional boolean that adds an ellipsis (...) when text overflows its container.\n *\n * @default false\n */\n ellipsis?: boolean;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a default DOM element.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Optional prop for testing purposes\n */\n 'data-testid'?: string;\n}",
"elements": [
{
"name": "TextPropsShared"
},
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * Optional prop for inline styles\n */\n style?: CSSProperties;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to apply text transformation to the content.\n * Options: Uppercase, Lowercase, Capitalize, Normal\n */\n textTransform?: TextTransform;\n /**\n * Optional prop to control the text alignment within its container.\n * Options: Left, Center, Right, Justify\n */\n textAlign?: TextAlign;\n /**\n * Optional prop to determine how text should wrap when it reaches the edge of its container.\n * Options: BreakWord, Anywhere, Normal\n */\n overflowWrap?: OverflowWrap;\n /**\n * Optional boolean that adds an ellipsis (...) when text overflows its container.\n *\n * @default false\n */\n ellipsis?: boolean;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a default DOM element.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Optional prop for testing purposes\n */\n 'data-testid'?: string;\n}",
"signature": {
"properties": [
{
"key": "style",
"value": {
"name": "CSSProperties",
"required": false
},
"description": "Optional prop for inline styles"
},
{
"key": "className",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop for additional CSS classes to be applied to the Text component."
},
{
"key": "textTransform",
"value": {
"name": "TextTransform",
"required": false
},
"description": "Optional prop to apply text transformation to the content.\nOptions: Uppercase, Lowercase, Capitalize, Normal"
},
{
"key": "textAlign",
"value": {
"name": "TextAlign",
"required": false
},
"description": "Optional prop to control the text alignment within its container.\nOptions: Left, Center, Right, Justify"
},
{
"key": "overflowWrap",
"value": {
"name": "OverflowWrap",
"required": false
},
"description": "Optional prop to determine how text should wrap when it reaches the edge of its container.\nOptions: BreakWord, Anywhere, Normal"
},
{
"key": "ellipsis",
"value": {
"name": "boolean",
"required": false
},
"description": "Optional boolean that adds an ellipsis (...) when text overflows its container.\n\n@default false"
},
{
"key": "asChild",
"value": {
"name": "boolean",
"required": false
},
"description": "Optional boolean that determines if the component should merge its props onto its immediate child\ninstead of rendering a default DOM element.\n\n@default false"
},
{
"key": "data-testid",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop for testing purposes"
}
]
}
}
]
}
],
"raw": "Partial"
},
"description": "Optional props for the children wrapper `Text` when children is a string."
},
"onClose": {
"required": false,
"tsType": {
"name": "MouseEventHandler",
"elements": [
{
"name": "HTMLButtonElement"
}
],
"raw": "MouseEventHandler"
},
"description": "Optional click handler for the close button.\nIf provided, a close button is shown."
},
"closeButtonProps": {
"required": false,
"tsType": {
"name": "intersection",
"raw": "Omit<\n Partial,\n 'iconName' | 'onClick'\n> & {\n /**\n * Optional test id for the close button element.\n */\n 'data-testid'?: string;\n}",
"elements": [
{
"name": "Omit",
"elements": [
{
"name": "Partial",
"elements": [
{
"name": "intersection",
"raw": "ComponentProps<'button'> &\nButtonIconPropsShared & {\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Required prop to provide an accessible label for the button\n */\n ariaLabel: string;\n /**\n * Optional prop for additional CSS classes to be applied to the ButtonIcon component\n */\n className?: string;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n}",
"elements": [
{
"name": "ComponentProps",
"elements": [
{
"name": "literal",
"value": "'button'"
}
],
"raw": "ComponentProps<'button'>"
},
{
"name": "ButtonIconPropsShared"
},
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Partial;\n /**\n * Required prop to provide an accessible label for the button\n */\n ariaLabel: string;\n /**\n * Optional prop for additional CSS classes to be applied to the ButtonIcon component\n */\n className?: string;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n}",
"signature": {
"properties": [
{
"key": "iconProps",
"value": {
"name": "Partial",
"elements": [
{
"name": "intersection",
"raw": "SVGProps &\nIconPropsShared & {\n /**\n * Additional CSS classes to be added to the component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n /**\n * Optional prop to add a test id to the icon\n */\n 'data-testid'?: string;\n}",
"elements": [
{
"name": "SVGProps",
"elements": [
{
"name": "ComponentPropsWithoutRef",
"elements": [
{
"name": "literal",
"value": "'svg'"
}
],
"raw": "ComponentPropsWithoutRef<'svg'>"
}
],
"raw": "SVGProps"
},
{
"name": "IconPropsShared"
},
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * Additional CSS classes to be added to the component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n /**\n * Optional prop to add a test id to the icon\n */\n 'data-testid'?: string;\n}",
"signature": {
"properties": [
{
"key": "className",
"value": {
"name": "string",
"required": false
},
"description": "Additional CSS classes to be added to the component.\nThese classes will be merged with the component's default classes using twMerge."
},
{
"key": "style",
"value": {
"name": "ReactCSSProperties",
"raw": "React.CSSProperties",
"required": false
},
"description": "Optional CSS styles to be applied to the component.\nShould be used sparingly and only for dynamic styles that can't be achieved with className."
},
{
"key": "data-testid",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop to add a test id to the icon"
}
]
}
}
]
}
],
"raw": "Partial",
"required": false
},
"description": "Optional prop to pass additional properties to the icon"
},
{
"key": "ariaLabel",
"value": {
"name": "string",
"required": true
},
"description": "Required prop to provide an accessible label for the button"
},
{
"key": "className",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop for additional CSS classes to be applied to the ButtonIcon component"
},
{
"key": "style",
"value": {
"name": "ReactCSSProperties",
"raw": "React.CSSProperties",
"required": false
},
"description": "Optional CSS styles to be applied to the component.\nShould be used sparingly and only for dynamic styles that can't be achieved with className."
}
]
}
}
]
}
],
"raw": "Partial"
},
{
"name": "union",
"raw": "'iconName' | 'onClick'",
"elements": [
{
"name": "literal",
"value": "'iconName'"
},
{
"name": "literal",
"value": "'onClick'"
}
]
}
],
"raw": "Omit<\n Partial,\n 'iconName' | 'onClick'\n>"
},
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * Optional test id for the close button element.\n */\n 'data-testid'?: string;\n}",
"signature": {
"properties": [
{
"key": "data-testid",
"value": {
"name": "string",
"required": false
},
"description": "Optional test id for the close button element."
}
]
}
}
]
},
"description": "Optional props for the close `ButtonIcon`.\nOnly used when `onClose` is provided."
},
"actionButtonLayout": {
"defaultValue": {
"value": "'below'",
"computed": false
},
"required": false
},
"backgroundColor": {
"defaultValue": {
"value": "'bg-default'",
"computed": false
},
"required": false
}
}
},
"stories": [
{
"id": "react-components-bannerbase--default",
"name": "Default",
"snippet": "const Default = () => undefined}\n onClose={() => undefined}\n closeButtonProps={{\n 'data-testid': 'banner-base-close-button',\n }}\n startAccessory={} />;"
},
{
"id": "react-components-bannerbase--title",
"name": "Title",
"snippet": "const Title = () => ;"
},
{
"id": "react-components-bannerbase--description",
"name": "Description",
"snippet": "const Description = () => ;"
},
{
"id": "react-components-bannerbase--children",
"name": "Children",
"snippet": "const Children = () => \n Children can include richer content and can be any React node.\n \n;"
},
{
"id": "react-components-bannerbase--action-button-on-click",
"name": "Action Button On Click",
"snippet": "const ActionButtonOnClick = () => undefined}\n actionButtonProps={{\n endIconName: IconName.Arrow2Right,\n }}>Use actionButtonLabel for the text and the action handler prop for interaction.;"
},
{
"id": "react-components-bannerbase--action-button-layout",
"name": "Action Button Layout",
"snippet": "const ActionButtonLayout = () =>
\n undefined}\n onClose={() => undefined}\n closeButtonProps={{\n 'data-testid': 'banner-base-close-button',\n }}\n title=\"End\"\n description=\"One-line description for short copy.\"\n actionButtonLayout={BannerBaseActionButtonLayout.End}\n startAccessory={} />\n undefined}\n onClose={() => undefined}\n closeButtonProps={{\n 'data-testid': 'banner-base-close-button',\n }}\n title=\"Below\"\n description=\"Use Below when the body is longer or wraps across multiple lines so the action stays under the content.\"\n actionButtonLayout={BannerBaseActionButtonLayout.Below}\n startAccessory={} />\n
\n);"
}
],
"import": "import { Button } from '@metamask/design-system-react';\nimport { IconName } from '@metamask/design-system-shared';"
},
"react-components-button-variants-buttonprimary": {
"id": "react-components-button-variants-buttonprimary",
"name": "ButtonPrimary",
"path": "../../packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx",
"jsDocTags": {},
"reactDocgen": {
"description": "",
"methods": [],
"displayName": "ButtonPrimary",
"definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx",
"actualName": "ButtonPrimary",
"exportName": "ButtonPrimary",
"props": {
"className": {
"required": false,
"tsType": {
"name": "string"
},
"description": "Optional prop for additional CSS classes to be applied to the ButtonBase component.\nThese classes will be merged with the component's default classes using twMerge."
},
"textProps": {
"required": false,
"tsType": {
"name": "Partial",
"elements": [
{
"name": "intersection",
"raw": "TextPropsShared & {\n /**\n * Optional prop for inline styles\n */\n style?: CSSProperties;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to apply text transformation to the content.\n * Options: Uppercase, Lowercase, Capitalize, Normal\n */\n textTransform?: TextTransform;\n /**\n * Optional prop to control the text alignment within its container.\n * Options: Left, Center, Right, Justify\n */\n textAlign?: TextAlign;\n /**\n * Optional prop to determine how text should wrap when it reaches the edge of its container.\n * Options: BreakWord, Anywhere, Normal\n */\n overflowWrap?: OverflowWrap;\n /**\n * Optional boolean that adds an ellipsis (...) when text overflows its container.\n *\n * @default false\n */\n ellipsis?: boolean;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a default DOM element.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Optional prop for testing purposes\n */\n 'data-testid'?: string;\n}",
"elements": [
{
"name": "TextPropsShared"
},
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * Optional prop for inline styles\n */\n style?: CSSProperties;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to apply text transformation to the content.\n * Options: Uppercase, Lowercase, Capitalize, Normal\n */\n textTransform?: TextTransform;\n /**\n * Optional prop to control the text alignment within its container.\n * Options: Left, Center, Right, Justify\n */\n textAlign?: TextAlign;\n /**\n * Optional prop to determine how text should wrap when it reaches the edge of its container.\n * Options: BreakWord, Anywhere, Normal\n */\n overflowWrap?: OverflowWrap;\n /**\n * Optional boolean that adds an ellipsis (...) when text overflows its container.\n *\n * @default false\n */\n ellipsis?: boolean;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a default DOM element.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Optional prop for testing purposes\n */\n 'data-testid'?: string;\n}",
"signature": {
"properties": [
{
"key": "style",
"value": {
"name": "CSSProperties",
"required": false
},
"description": "Optional prop for inline styles"
},
{
"key": "className",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop for additional CSS classes to be applied to the Text component."
},
{
"key": "textTransform",
"value": {
"name": "TextTransform",
"required": false
},
"description": "Optional prop to apply text transformation to the content.\nOptions: Uppercase, Lowercase, Capitalize, Normal"
},
{
"key": "textAlign",
"value": {
"name": "TextAlign",
"required": false
},
"description": "Optional prop to control the text alignment within its container.\nOptions: Left, Center, Right, Justify"
},
{
"key": "overflowWrap",
"value": {
"name": "OverflowWrap",
"required": false
},
"description": "Optional prop to determine how text should wrap when it reaches the edge of its container.\nOptions: BreakWord, Anywhere, Normal"
},
{
"key": "ellipsis",
"value": {
"name": "boolean",
"required": false
},
"description": "Optional boolean that adds an ellipsis (...) when text overflows its container.\n\n@default false"
},
{
"key": "asChild",
"value": {
"name": "boolean",
"required": false
},
"description": "Optional boolean that determines if the component should merge its props onto its immediate child\ninstead of rendering a default DOM element.\n\n@default false"
},
{
"key": "data-testid",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop for testing purposes"
}
]
}
}
]
}
],
"raw": "Partial"
},
"description": "Optional props to be passed to the Text component when children is a string"
},
"asChild": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Optional boolean that determines if the component should merge its props onto its immediate child\ninstead of rendering a button element\n\n@default false"
},
"loadingTextProps": {
"required": false,
"tsType": {
"name": "Partial",
"elements": [
{
"name": "intersection",
"raw": "TextPropsShared & {\n /**\n * Optional prop for inline styles\n */\n style?: CSSProperties;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to apply text transformation to the content.\n * Options: Uppercase, Lowercase, Capitalize, Normal\n */\n textTransform?: TextTransform;\n /**\n * Optional prop to control the text alignment within its container.\n * Options: Left, Center, Right, Justify\n */\n textAlign?: TextAlign;\n /**\n * Optional prop to determine how text should wrap when it reaches the edge of its container.\n * Options: BreakWord, Anywhere, Normal\n */\n overflowWrap?: OverflowWrap;\n /**\n * Optional boolean that adds an ellipsis (...) when text overflows its container.\n *\n * @default false\n */\n ellipsis?: boolean;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a default DOM element.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Optional prop for testing purposes\n */\n 'data-testid'?: string;\n}",
"elements": [
{
"name": "TextPropsShared"
},
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * Optional prop for inline styles\n */\n style?: CSSProperties;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to apply text transformation to the content.\n * Options: Uppercase, Lowercase, Capitalize, Normal\n */\n textTransform?: TextTransform;\n /**\n * Optional prop to control the text alignment within its container.\n * Options: Left, Center, Right, Justify\n */\n textAlign?: TextAlign;\n /**\n * Optional prop to determine how text should wrap when it reaches the edge of its container.\n * Options: BreakWord, Anywhere, Normal\n */\n overflowWrap?: OverflowWrap;\n /**\n * Optional boolean that adds an ellipsis (...) when text overflows its container.\n *\n * @default false\n */\n ellipsis?: boolean;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a default DOM element.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Optional prop for testing purposes\n */\n 'data-testid'?: string;\n}",
"signature": {
"properties": [
{
"key": "style",
"value": {
"name": "CSSProperties",
"required": false
},
"description": "Optional prop for inline styles"
},
{
"key": "className",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop for additional CSS classes to be applied to the Text component."
},
{
"key": "textTransform",
"value": {
"name": "TextTransform",
"required": false
},
"description": "Optional prop to apply text transformation to the content.\nOptions: Uppercase, Lowercase, Capitalize, Normal"
},
{
"key": "textAlign",
"value": {
"name": "TextAlign",
"required": false
},
"description": "Optional prop to control the text alignment within its container.\nOptions: Left, Center, Right, Justify"
},
{
"key": "overflowWrap",
"value": {
"name": "OverflowWrap",
"required": false
},
"description": "Optional prop to determine how text should wrap when it reaches the edge of its container.\nOptions: BreakWord, Anywhere, Normal"
},
{
"key": "ellipsis",
"value": {
"name": "boolean",
"required": false
},
"description": "Optional boolean that adds an ellipsis (...) when text overflows its container.\n\n@default false"
},
{
"key": "asChild",
"value": {
"name": "boolean",
"required": false
},
"description": "Optional boolean that determines if the component should merge its props onto its immediate child\ninstead of rendering a default DOM element.\n\n@default false"
},
{
"key": "data-testid",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop for testing purposes"
}
]
}
}
]
}
],
"raw": "Partial"
},
"description": "Optional props to be passed to the loading Text component"
},
"startIconName": {
"required": false,
"tsType": {
"name": "IconName"
},
"description": "Optional prop to specify an icon to show at the start of the button"
},
"startIconProps": {
"required": false,
"tsType": {
"name": "Partial",
"elements": [
{
"name": "intersection",
"raw": "SVGProps &\nIconPropsShared & {\n /**\n * Additional CSS classes to be added to the component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n /**\n * Optional prop to add a test id to the icon\n */\n 'data-testid'?: string;\n}",
"elements": [
{
"name": "SVGProps",
"elements": [
{
"name": "ComponentPropsWithoutRef",
"elements": [
{
"name": "literal",
"value": "'svg'"
}
],
"raw": "ComponentPropsWithoutRef<'svg'>"
}
],
"raw": "SVGProps"
},
{
"name": "IconPropsShared"
},
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * Additional CSS classes to be added to the component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n /**\n * Optional prop to add a test id to the icon\n */\n 'data-testid'?: string;\n}",
"signature": {
"properties": [
{
"key": "className",
"value": {
"name": "string",
"required": false
},
"description": "Additional CSS classes to be added to the component.\nThese classes will be merged with the component's default classes using twMerge."
},
{
"key": "style",
"value": {
"name": "ReactCSSProperties",
"raw": "React.CSSProperties",
"required": false
},
"description": "Optional CSS styles to be applied to the component.\nShould be used sparingly and only for dynamic styles that can't be achieved with className."
},
{
"key": "data-testid",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop to add a test id to the icon"
}
]
}
}
]
}
],
"raw": "Partial"
},
"description": "Optional prop to pass additional properties to the start icon"
},
"startAccessory": {
"required": false,
"tsType": {
"name": "ReactReactNode",
"raw": "React.ReactNode"
},
"description": "Optional prop for a custom element to show at the start of the button"
},
"endIconName": {
"required": false,
"tsType": {
"name": "IconName"
},
"description": "Optional prop to specify an icon to show at the end of the button"
},
"endIconProps": {
"required": false,
"tsType": {
"name": "Partial",
"elements": [
{
"name": "intersection",
"raw": "SVGProps &\nIconPropsShared & {\n /**\n * Additional CSS classes to be added to the component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n /**\n * Optional prop to add a test id to the icon\n */\n 'data-testid'?: string;\n}",
"elements": [
{
"name": "SVGProps",
"elements": [
{
"name": "ComponentPropsWithoutRef",
"elements": [
{
"name": "literal",
"value": "'svg'"
}
],
"raw": "ComponentPropsWithoutRef<'svg'>"
}
],
"raw": "SVGProps"
},
{
"name": "IconPropsShared"
},
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * Additional CSS classes to be added to the component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n /**\n * Optional prop to add a test id to the icon\n */\n 'data-testid'?: string;\n}",
"signature": {
"properties": [
{
"key": "className",
"value": {
"name": "string",
"required": false
},
"description": "Additional CSS classes to be added to the component.\nThese classes will be merged with the component's default classes using twMerge."
},
{
"key": "style",
"value": {
"name": "ReactCSSProperties",
"raw": "React.CSSProperties",
"required": false
},
"description": "Optional CSS styles to be applied to the component.\nShould be used sparingly and only for dynamic styles that can't be achieved with className."
},
{
"key": "data-testid",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop to add a test id to the icon"
}
]
}
}
]
}
],
"raw": "Partial"
},
"description": "Optional prop to pass additional properties to the end icon"
},
"endAccessory": {
"required": false,
"tsType": {
"name": "ReactReactNode",
"raw": "React.ReactNode"
},
"description": "Optional prop for a custom element to show at the end of the button"
},
"loadingIconProps": {
"required": false,
"tsType": {
"name": "Partial",
"elements": [
{
"name": "intersection",
"raw": "SVGProps &\nIconPropsShared & {\n /**\n * Additional CSS classes to be added to the component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n /**\n * Optional prop to add a test id to the icon\n */\n 'data-testid'?: string;\n}",
"elements": [
{
"name": "SVGProps",
"elements": [
{
"name": "ComponentPropsWithoutRef",
"elements": [
{
"name": "literal",
"value": "'svg'"
}
],
"raw": "ComponentPropsWithoutRef<'svg'>"
}
],
"raw": "SVGProps"
},
{
"name": "IconPropsShared"
},
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * Additional CSS classes to be added to the component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n /**\n * Optional prop to add a test id to the icon\n */\n 'data-testid'?: string;\n}",
"signature": {
"properties": [
{
"key": "className",
"value": {
"name": "string",
"required": false
},
"description": "Additional CSS classes to be added to the component.\nThese classes will be merged with the component's default classes using twMerge."
},
{
"key": "style",
"value": {
"name": "ReactCSSProperties",
"raw": "React.CSSProperties",
"required": false
},
"description": "Optional CSS styles to be applied to the component.\nShould be used sparingly and only for dynamic styles that can't be achieved with className."
},
{
"key": "data-testid",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop to add a test id to the icon"
}
]
}
}
]
}
],
"raw": "Partial"
},
"description": "Optional prop to pass additional properties to the loading icon"
},
"style": {
"required": false,
"tsType": {
"name": "ReactCSSProperties",
"raw": "React.CSSProperties"
},
"description": "Optional CSS styles to be applied to the component.\nShould be used sparingly and only for dynamic styles that can't be achieved with className."
},
"aria-label": {
"required": false,
"tsType": {
"name": "string"
},
"description": "Optional accessible label for the button. Use when the button text doesn't fully describe its purpose.\nThis will be used as the aria-label attribute."
},
"aria-labelledby": {
"required": false,
"tsType": {
"name": "string"
},
"description": "Optional ID of an element that labels the button.\nThis will be used as the aria-labelledby attribute."
},
"aria-describedby": {
"required": false,
"tsType": {
"name": "string"
},
"description": "Optional ID of an element that describes the button.\nThis will be used as the aria-describedby attribute."
},
"aria-pressed": {
"required": false,
"tsType": {
"name": "union",
"raw": "boolean | 'mixed'",
"elements": [
{
"name": "boolean"
},
{
"name": "literal",
"value": "'mixed'"
}
]
},
"description": "Optional prop to indicate if the button is pressed (for toggle buttons).\nThis will be used as the aria-pressed attribute."
},
"aria-expanded": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Optional prop to indicate if the button controls a collapsible element.\nThis will be used as the aria-expanded attribute."
},
"aria-controls": {
"required": false,
"tsType": {
"name": "string"
},
"description": "Optional prop to indicate if the button controls another element.\nThis will be used as the aria-controls attribute."
},
"aria-haspopup": {
"required": false,
"tsType": {
"name": "union",
"raw": "| boolean\n| 'false'\n| 'true'\n| 'menu'\n| 'listbox'\n| 'tree'\n| 'grid'\n| 'dialog'",
"elements": [
{
"name": "boolean"
},
{
"name": "literal",
"value": "'false'"
},
{
"name": "literal",
"value": "'true'"
},
{
"name": "literal",
"value": "'menu'"
},
{
"name": "literal",
"value": "'listbox'"
},
{
"name": "literal",
"value": "'tree'"
},
{
"name": "literal",
"value": "'grid'"
},
{
"name": "literal",
"value": "'dialog'"
}
]
},
"description": "Optional prop to indicate if the button has a popup (menu, listbox, tree, grid, or dialog).\nThis will be used as the aria-haspopup attribute."
},
"isDanger": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Optional prop that when true, applies error/danger styling to the button\n\n@default false"
},
"isInverse": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Optional prop that when true, applies dark theme styling to the button\n\n@default false"
}
}
},
"stories": [
{
"id": "react-components-button-variants-buttonprimary--default",
"name": "Default",
"snippet": "const Default = () => Primary button;"
},
{
"id": "react-components-button-variants-buttonprimary--is-danger",
"name": "Is Danger",
"snippet": "const IsDanger = () => Danger button;"
},
{
"id": "react-components-button-variants-buttonprimary--is-inverse",
"name": "Is Inverse",
"snippet": "const IsInverse = () =>
;"
},
{
"id": "react-components-button-variants-buttonprimary--is-full-width",
"name": "Is Full Width",
"snippet": "const IsFullWidth = () => Full width button;"
},
{
"id": "react-components-button-variants-buttonprimary--start-icon-name",
"name": "Start Icon Name",
"snippet": "const StartIconName = () => With start icon;"
},
{
"id": "react-components-button-variants-buttonprimary--end-icon-name",
"name": "End Icon Name",
"snippet": "const EndIconName = () => With end icon;"
},
{
"id": "react-components-button-variants-buttonprimary--is-loading",
"name": "Is Loading",
"snippet": "const IsLoading = () => Loading button;"
},
{
"id": "react-components-button-variants-buttonprimary--is-disabled",
"name": "Is Disabled",
"snippet": "const IsDisabled = () => Disabled button;"
}
],
"import": "import { ButtonPrimary } from '@metamask/design-system-react';\nimport { IconName } from '@metamask/design-system-shared';"
},
"react-components-button-variants-buttonsecondary": {
"id": "react-components-button-variants-buttonsecondary",
"name": "ButtonSecondary",
"path": "../../packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx",
"jsDocTags": {},
"reactDocgen": {
"description": "",
"methods": [],
"displayName": "ButtonSecondary",
"definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx",
"actualName": "ButtonSecondary",
"exportName": "ButtonSecondary",
"props": {
"className": {
"required": false,
"tsType": {
"name": "string"
},
"description": "Optional prop for additional CSS classes to be applied to the ButtonBase component.\nThese classes will be merged with the component's default classes using twMerge."
},
"textProps": {
"required": false,
"tsType": {
"name": "Partial",
"elements": [
{
"name": "intersection",
"raw": "TextPropsShared & {\n /**\n * Optional prop for inline styles\n */\n style?: CSSProperties;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to apply text transformation to the content.\n * Options: Uppercase, Lowercase, Capitalize, Normal\n */\n textTransform?: TextTransform;\n /**\n * Optional prop to control the text alignment within its container.\n * Options: Left, Center, Right, Justify\n */\n textAlign?: TextAlign;\n /**\n * Optional prop to determine how text should wrap when it reaches the edge of its container.\n * Options: BreakWord, Anywhere, Normal\n */\n overflowWrap?: OverflowWrap;\n /**\n * Optional boolean that adds an ellipsis (...) when text overflows its container.\n *\n * @default false\n */\n ellipsis?: boolean;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a default DOM element.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Optional prop for testing purposes\n */\n 'data-testid'?: string;\n}",
"elements": [
{
"name": "TextPropsShared"
},
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * Optional prop for inline styles\n */\n style?: CSSProperties;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to apply text transformation to the content.\n * Options: Uppercase, Lowercase, Capitalize, Normal\n */\n textTransform?: TextTransform;\n /**\n * Optional prop to control the text alignment within its container.\n * Options: Left, Center, Right, Justify\n */\n textAlign?: TextAlign;\n /**\n * Optional prop to determine how text should wrap when it reaches the edge of its container.\n * Options: BreakWord, Anywhere, Normal\n */\n overflowWrap?: OverflowWrap;\n /**\n * Optional boolean that adds an ellipsis (...) when text overflows its container.\n *\n * @default false\n */\n ellipsis?: boolean;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a default DOM element.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Optional prop for testing purposes\n */\n 'data-testid'?: string;\n}",
"signature": {
"properties": [
{
"key": "style",
"value": {
"name": "CSSProperties",
"required": false
},
"description": "Optional prop for inline styles"
},
{
"key": "className",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop for additional CSS classes to be applied to the Text component."
},
{
"key": "textTransform",
"value": {
"name": "TextTransform",
"required": false
},
"description": "Optional prop to apply text transformation to the content.\nOptions: Uppercase, Lowercase, Capitalize, Normal"
},
{
"key": "textAlign",
"value": {
"name": "TextAlign",
"required": false
},
"description": "Optional prop to control the text alignment within its container.\nOptions: Left, Center, Right, Justify"
},
{
"key": "overflowWrap",
"value": {
"name": "OverflowWrap",
"required": false
},
"description": "Optional prop to determine how text should wrap when it reaches the edge of its container.\nOptions: BreakWord, Anywhere, Normal"
},
{
"key": "ellipsis",
"value": {
"name": "boolean",
"required": false
},
"description": "Optional boolean that adds an ellipsis (...) when text overflows its container.\n\n@default false"
},
{
"key": "asChild",
"value": {
"name": "boolean",
"required": false
},
"description": "Optional boolean that determines if the component should merge its props onto its immediate child\ninstead of rendering a default DOM element.\n\n@default false"
},
{
"key": "data-testid",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop for testing purposes"
}
]
}
}
]
}
],
"raw": "Partial"
},
"description": "Optional props to be passed to the Text component when children is a string"
},
"asChild": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Optional boolean that determines if the component should merge its props onto its immediate child\ninstead of rendering a button element\n\n@default false"
},
"loadingTextProps": {
"required": false,
"tsType": {
"name": "Partial",
"elements": [
{
"name": "intersection",
"raw": "TextPropsShared & {\n /**\n * Optional prop for inline styles\n */\n style?: CSSProperties;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to apply text transformation to the content.\n * Options: Uppercase, Lowercase, Capitalize, Normal\n */\n textTransform?: TextTransform;\n /**\n * Optional prop to control the text alignment within its container.\n * Options: Left, Center, Right, Justify\n */\n textAlign?: TextAlign;\n /**\n * Optional prop to determine how text should wrap when it reaches the edge of its container.\n * Options: BreakWord, Anywhere, Normal\n */\n overflowWrap?: OverflowWrap;\n /**\n * Optional boolean that adds an ellipsis (...) when text overflows its container.\n *\n * @default false\n */\n ellipsis?: boolean;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a default DOM element.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Optional prop for testing purposes\n */\n 'data-testid'?: string;\n}",
"elements": [
{
"name": "TextPropsShared"
},
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * Optional prop for inline styles\n */\n style?: CSSProperties;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to apply text transformation to the content.\n * Options: Uppercase, Lowercase, Capitalize, Normal\n */\n textTransform?: TextTransform;\n /**\n * Optional prop to control the text alignment within its container.\n * Options: Left, Center, Right, Justify\n */\n textAlign?: TextAlign;\n /**\n * Optional prop to determine how text should wrap when it reaches the edge of its container.\n * Options: BreakWord, Anywhere, Normal\n */\n overflowWrap?: OverflowWrap;\n /**\n * Optional boolean that adds an ellipsis (...) when text overflows its container.\n *\n * @default false\n */\n ellipsis?: boolean;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a default DOM element.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Optional prop for testing purposes\n */\n 'data-testid'?: string;\n}",
"signature": {
"properties": [
{
"key": "style",
"value": {
"name": "CSSProperties",
"required": false
},
"description": "Optional prop for inline styles"
},
{
"key": "className",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop for additional CSS classes to be applied to the Text component."
},
{
"key": "textTransform",
"value": {
"name": "TextTransform",
"required": false
},
"description": "Optional prop to apply text transformation to the content.\nOptions: Uppercase, Lowercase, Capitalize, Normal"
},
{
"key": "textAlign",
"value": {
"name": "TextAlign",
"required": false
},
"description": "Optional prop to control the text alignment within its container.\nOptions: Left, Center, Right, Justify"
},
{
"key": "overflowWrap",
"value": {
"name": "OverflowWrap",
"required": false
},
"description": "Optional prop to determine how text should wrap when it reaches the edge of its container.\nOptions: BreakWord, Anywhere, Normal"
},
{
"key": "ellipsis",
"value": {
"name": "boolean",
"required": false
},
"description": "Optional boolean that adds an ellipsis (...) when text overflows its container.\n\n@default false"
},
{
"key": "asChild",
"value": {
"name": "boolean",
"required": false
},
"description": "Optional boolean that determines if the component should merge its props onto its immediate child\ninstead of rendering a default DOM element.\n\n@default false"
},
{
"key": "data-testid",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop for testing purposes"
}
]
}
}
]
}
],
"raw": "Partial"
},
"description": "Optional props to be passed to the loading Text component"
},
"startIconName": {
"required": false,
"tsType": {
"name": "IconName"
},
"description": "Optional prop to specify an icon to show at the start of the button"
},
"startIconProps": {
"required": false,
"tsType": {
"name": "Partial",
"elements": [
{
"name": "intersection",
"raw": "SVGProps &\nIconPropsShared & {\n /**\n * Additional CSS classes to be added to the component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n /**\n * Optional prop to add a test id to the icon\n */\n 'data-testid'?: string;\n}",
"elements": [
{
"name": "SVGProps",
"elements": [
{
"name": "ComponentPropsWithoutRef",
"elements": [
{
"name": "literal",
"value": "'svg'"
}
],
"raw": "ComponentPropsWithoutRef<'svg'>"
}
],
"raw": "SVGProps"
},
{
"name": "IconPropsShared"
},
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * Additional CSS classes to be added to the component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n /**\n * Optional prop to add a test id to the icon\n */\n 'data-testid'?: string;\n}",
"signature": {
"properties": [
{
"key": "className",
"value": {
"name": "string",
"required": false
},
"description": "Additional CSS classes to be added to the component.\nThese classes will be merged with the component's default classes using twMerge."
},
{
"key": "style",
"value": {
"name": "ReactCSSProperties",
"raw": "React.CSSProperties",
"required": false
},
"description": "Optional CSS styles to be applied to the component.\nShould be used sparingly and only for dynamic styles that can't be achieved with className."
},
{
"key": "data-testid",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop to add a test id to the icon"
}
]
}
}
]
}
],
"raw": "Partial"
},
"description": "Optional prop to pass additional properties to the start icon"
},
"startAccessory": {
"required": false,
"tsType": {
"name": "ReactReactNode",
"raw": "React.ReactNode"
},
"description": "Optional prop for a custom element to show at the start of the button"
},
"endIconName": {
"required": false,
"tsType": {
"name": "IconName"
},
"description": "Optional prop to specify an icon to show at the end of the button"
},
"endIconProps": {
"required": false,
"tsType": {
"name": "Partial",
"elements": [
{
"name": "intersection",
"raw": "SVGProps &\nIconPropsShared & {\n /**\n * Additional CSS classes to be added to the component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n /**\n * Optional prop to add a test id to the icon\n */\n 'data-testid'?: string;\n}",
"elements": [
{
"name": "SVGProps",
"elements": [
{
"name": "ComponentPropsWithoutRef",
"elements": [
{
"name": "literal",
"value": "'svg'"
}
],
"raw": "ComponentPropsWithoutRef<'svg'>"
}
],
"raw": "SVGProps"
},
{
"name": "IconPropsShared"
},
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * Additional CSS classes to be added to the component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n /**\n * Optional prop to add a test id to the icon\n */\n 'data-testid'?: string;\n}",
"signature": {
"properties": [
{
"key": "className",
"value": {
"name": "string",
"required": false
},
"description": "Additional CSS classes to be added to the component.\nThese classes will be merged with the component's default classes using twMerge."
},
{
"key": "style",
"value": {
"name": "ReactCSSProperties",
"raw": "React.CSSProperties",
"required": false
},
"description": "Optional CSS styles to be applied to the component.\nShould be used sparingly and only for dynamic styles that can't be achieved with className."
},
{
"key": "data-testid",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop to add a test id to the icon"
}
]
}
}
]
}
],
"raw": "Partial"
},
"description": "Optional prop to pass additional properties to the end icon"
},
"endAccessory": {
"required": false,
"tsType": {
"name": "ReactReactNode",
"raw": "React.ReactNode"
},
"description": "Optional prop for a custom element to show at the end of the button"
},
"loadingIconProps": {
"required": false,
"tsType": {
"name": "Partial",
"elements": [
{
"name": "intersection",
"raw": "SVGProps &\nIconPropsShared & {\n /**\n * Additional CSS classes to be added to the component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n /**\n * Optional prop to add a test id to the icon\n */\n 'data-testid'?: string;\n}",
"elements": [
{
"name": "SVGProps",
"elements": [
{
"name": "ComponentPropsWithoutRef",
"elements": [
{
"name": "literal",
"value": "'svg'"
}
],
"raw": "ComponentPropsWithoutRef<'svg'>"
}
],
"raw": "SVGProps"
},
{
"name": "IconPropsShared"
},
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * Additional CSS classes to be added to the component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n /**\n * Optional prop to add a test id to the icon\n */\n 'data-testid'?: string;\n}",
"signature": {
"properties": [
{
"key": "className",
"value": {
"name": "string",
"required": false
},
"description": "Additional CSS classes to be added to the component.\nThese classes will be merged with the component's default classes using twMerge."
},
{
"key": "style",
"value": {
"name": "ReactCSSProperties",
"raw": "React.CSSProperties",
"required": false
},
"description": "Optional CSS styles to be applied to the component.\nShould be used sparingly and only for dynamic styles that can't be achieved with className."
},
{
"key": "data-testid",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop to add a test id to the icon"
}
]
}
}
]
}
],
"raw": "Partial"
},
"description": "Optional prop to pass additional properties to the loading icon"
},
"style": {
"required": false,
"tsType": {
"name": "ReactCSSProperties",
"raw": "React.CSSProperties"
},
"description": "Optional CSS styles to be applied to the component.\nShould be used sparingly and only for dynamic styles that can't be achieved with className."
},
"aria-label": {
"required": false,
"tsType": {
"name": "string"
},
"description": "Optional accessible label for the button. Use when the button text doesn't fully describe its purpose.\nThis will be used as the aria-label attribute."
},
"aria-labelledby": {
"required": false,
"tsType": {
"name": "string"
},
"description": "Optional ID of an element that labels the button.\nThis will be used as the aria-labelledby attribute."
},
"aria-describedby": {
"required": false,
"tsType": {
"name": "string"
},
"description": "Optional ID of an element that describes the button.\nThis will be used as the aria-describedby attribute."
},
"aria-pressed": {
"required": false,
"tsType": {
"name": "union",
"raw": "boolean | 'mixed'",
"elements": [
{
"name": "boolean"
},
{
"name": "literal",
"value": "'mixed'"
}
]
},
"description": "Optional prop to indicate if the button is pressed (for toggle buttons).\nThis will be used as the aria-pressed attribute."
},
"aria-expanded": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Optional prop to indicate if the button controls a collapsible element.\nThis will be used as the aria-expanded attribute."
},
"aria-controls": {
"required": false,
"tsType": {
"name": "string"
},
"description": "Optional prop to indicate if the button controls another element.\nThis will be used as the aria-controls attribute."
},
"aria-haspopup": {
"required": false,
"tsType": {
"name": "union",
"raw": "| boolean\n| 'false'\n| 'true'\n| 'menu'\n| 'listbox'\n| 'tree'\n| 'grid'\n| 'dialog'",
"elements": [
{
"name": "boolean"
},
{
"name": "literal",
"value": "'false'"
},
{
"name": "literal",
"value": "'true'"
},
{
"name": "literal",
"value": "'menu'"
},
{
"name": "literal",
"value": "'listbox'"
},
{
"name": "literal",
"value": "'tree'"
},
{
"name": "literal",
"value": "'grid'"
},
{
"name": "literal",
"value": "'dialog'"
}
]
},
"description": "Optional prop to indicate if the button has a popup (menu, listbox, tree, grid, or dialog).\nThis will be used as the aria-haspopup attribute."
},
"isDanger": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Optional prop that when true, applies error/danger styling to the button\n\n@default false"
},
"isInverse": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Optional prop that when true, applies inverse styling to the button\n\n@default false"
}
}
},
"stories": [
{
"id": "react-components-button-variants-buttonsecondary--default",
"name": "Default",
"snippet": "const Default = () => Secondary button;"
},
{
"id": "react-components-button-variants-buttonsecondary--is-danger",
"name": "Is Danger",
"snippet": "const IsDanger = () => Danger button;"
},
{
"id": "react-components-button-variants-buttonsecondary--is-inverse",
"name": "Is Inverse",
"snippet": "const IsInverse = () =>
;"
},
{
"id": "react-components-button-variants-buttonsecondary--is-full-width",
"name": "Is Full Width",
"snippet": "const IsFullWidth = () => Full width button;"
},
{
"id": "react-components-button-variants-buttonsecondary--start-icon-name",
"name": "Start Icon Name",
"snippet": "const StartIconName = () => With start icon;"
},
{
"id": "react-components-button-variants-buttonsecondary--end-icon-name",
"name": "End Icon Name",
"snippet": "const EndIconName = () => With end icon;"
},
{
"id": "react-components-button-variants-buttonsecondary--is-loading",
"name": "Is Loading",
"snippet": "const IsLoading = () => Loading button;"
},
{
"id": "react-components-button-variants-buttonsecondary--is-disabled",
"name": "Is Disabled",
"snippet": "const IsDisabled = () => Disabled button;"
}
],
"import": "import { ButtonSecondary } from '@metamask/design-system-react';\nimport { IconName } from '@metamask/design-system-shared';"
},
"react-components-button-variants-buttontertiary": {
"id": "react-components-button-variants-buttontertiary",
"name": "ButtonTertiary",
"path": "../../packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx",
"jsDocTags": {},
"reactDocgen": {
"description": "",
"methods": [],
"displayName": "ButtonTertiary",
"definedInFile": "/home/runner/work/metamask-design-system/metamask-design-system/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx",
"actualName": "ButtonTertiary",
"exportName": "ButtonTertiary",
"props": {
"className": {
"required": false,
"tsType": {
"name": "string"
},
"description": "Optional prop for additional CSS classes to be applied to the ButtonBase component.\nThese classes will be merged with the component's default classes using twMerge."
},
"textProps": {
"required": false,
"tsType": {
"name": "Partial",
"elements": [
{
"name": "intersection",
"raw": "TextPropsShared & {\n /**\n * Optional prop for inline styles\n */\n style?: CSSProperties;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to apply text transformation to the content.\n * Options: Uppercase, Lowercase, Capitalize, Normal\n */\n textTransform?: TextTransform;\n /**\n * Optional prop to control the text alignment within its container.\n * Options: Left, Center, Right, Justify\n */\n textAlign?: TextAlign;\n /**\n * Optional prop to determine how text should wrap when it reaches the edge of its container.\n * Options: BreakWord, Anywhere, Normal\n */\n overflowWrap?: OverflowWrap;\n /**\n * Optional boolean that adds an ellipsis (...) when text overflows its container.\n *\n * @default false\n */\n ellipsis?: boolean;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a default DOM element.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Optional prop for testing purposes\n */\n 'data-testid'?: string;\n}",
"elements": [
{
"name": "TextPropsShared"
},
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * Optional prop for inline styles\n */\n style?: CSSProperties;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to apply text transformation to the content.\n * Options: Uppercase, Lowercase, Capitalize, Normal\n */\n textTransform?: TextTransform;\n /**\n * Optional prop to control the text alignment within its container.\n * Options: Left, Center, Right, Justify\n */\n textAlign?: TextAlign;\n /**\n * Optional prop to determine how text should wrap when it reaches the edge of its container.\n * Options: BreakWord, Anywhere, Normal\n */\n overflowWrap?: OverflowWrap;\n /**\n * Optional boolean that adds an ellipsis (...) when text overflows its container.\n *\n * @default false\n */\n ellipsis?: boolean;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a default DOM element.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Optional prop for testing purposes\n */\n 'data-testid'?: string;\n}",
"signature": {
"properties": [
{
"key": "style",
"value": {
"name": "CSSProperties",
"required": false
},
"description": "Optional prop for inline styles"
},
{
"key": "className",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop for additional CSS classes to be applied to the Text component."
},
{
"key": "textTransform",
"value": {
"name": "TextTransform",
"required": false
},
"description": "Optional prop to apply text transformation to the content.\nOptions: Uppercase, Lowercase, Capitalize, Normal"
},
{
"key": "textAlign",
"value": {
"name": "TextAlign",
"required": false
},
"description": "Optional prop to control the text alignment within its container.\nOptions: Left, Center, Right, Justify"
},
{
"key": "overflowWrap",
"value": {
"name": "OverflowWrap",
"required": false
},
"description": "Optional prop to determine how text should wrap when it reaches the edge of its container.\nOptions: BreakWord, Anywhere, Normal"
},
{
"key": "ellipsis",
"value": {
"name": "boolean",
"required": false
},
"description": "Optional boolean that adds an ellipsis (...) when text overflows its container.\n\n@default false"
},
{
"key": "asChild",
"value": {
"name": "boolean",
"required": false
},
"description": "Optional boolean that determines if the component should merge its props onto its immediate child\ninstead of rendering a default DOM element.\n\n@default false"
},
{
"key": "data-testid",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop for testing purposes"
}
]
}
}
]
}
],
"raw": "Partial"
},
"description": "Optional props to be passed to the Text component when children is a string"
},
"asChild": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Optional boolean that determines if the component should merge its props onto its immediate child\ninstead of rendering a button element\n\n@default false"
},
"loadingTextProps": {
"required": false,
"tsType": {
"name": "Partial",
"elements": [
{
"name": "intersection",
"raw": "TextPropsShared & {\n /**\n * Optional prop for inline styles\n */\n style?: CSSProperties;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to apply text transformation to the content.\n * Options: Uppercase, Lowercase, Capitalize, Normal\n */\n textTransform?: TextTransform;\n /**\n * Optional prop to control the text alignment within its container.\n * Options: Left, Center, Right, Justify\n */\n textAlign?: TextAlign;\n /**\n * Optional prop to determine how text should wrap when it reaches the edge of its container.\n * Options: BreakWord, Anywhere, Normal\n */\n overflowWrap?: OverflowWrap;\n /**\n * Optional boolean that adds an ellipsis (...) when text overflows its container.\n *\n * @default false\n */\n ellipsis?: boolean;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a default DOM element.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Optional prop for testing purposes\n */\n 'data-testid'?: string;\n}",
"elements": [
{
"name": "TextPropsShared"
},
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * Optional prop for inline styles\n */\n style?: CSSProperties;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to apply text transformation to the content.\n * Options: Uppercase, Lowercase, Capitalize, Normal\n */\n textTransform?: TextTransform;\n /**\n * Optional prop to control the text alignment within its container.\n * Options: Left, Center, Right, Justify\n */\n textAlign?: TextAlign;\n /**\n * Optional prop to determine how text should wrap when it reaches the edge of its container.\n * Options: BreakWord, Anywhere, Normal\n */\n overflowWrap?: OverflowWrap;\n /**\n * Optional boolean that adds an ellipsis (...) when text overflows its container.\n *\n * @default false\n */\n ellipsis?: boolean;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a default DOM element.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Optional prop for testing purposes\n */\n 'data-testid'?: string;\n}",
"signature": {
"properties": [
{
"key": "style",
"value": {
"name": "CSSProperties",
"required": false
},
"description": "Optional prop for inline styles"
},
{
"key": "className",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop for additional CSS classes to be applied to the Text component."
},
{
"key": "textTransform",
"value": {
"name": "TextTransform",
"required": false
},
"description": "Optional prop to apply text transformation to the content.\nOptions: Uppercase, Lowercase, Capitalize, Normal"
},
{
"key": "textAlign",
"value": {
"name": "TextAlign",
"required": false
},
"description": "Optional prop to control the text alignment within its container.\nOptions: Left, Center, Right, Justify"
},
{
"key": "overflowWrap",
"value": {
"name": "OverflowWrap",
"required": false
},
"description": "Optional prop to determine how text should wrap when it reaches the edge of its container.\nOptions: BreakWord, Anywhere, Normal"
},
{
"key": "ellipsis",
"value": {
"name": "boolean",
"required": false
},
"description": "Optional boolean that adds an ellipsis (...) when text overflows its container.\n\n@default false"
},
{
"key": "asChild",
"value": {
"name": "boolean",
"required": false
},
"description": "Optional boolean that determines if the component should merge its props onto its immediate child\ninstead of rendering a default DOM element.\n\n@default false"
},
{
"key": "data-testid",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop for testing purposes"
}
]
}
}
]
}
],
"raw": "Partial"
},
"description": "Optional props to be passed to the loading Text component"
},
"startIconName": {
"required": false,
"tsType": {
"name": "IconName"
},
"description": "Optional prop to specify an icon to show at the start of the button"
},
"startIconProps": {
"required": false,
"tsType": {
"name": "Partial",
"elements": [
{
"name": "intersection",
"raw": "SVGProps &\nIconPropsShared & {\n /**\n * Additional CSS classes to be added to the component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n /**\n * Optional prop to add a test id to the icon\n */\n 'data-testid'?: string;\n}",
"elements": [
{
"name": "SVGProps",
"elements": [
{
"name": "ComponentPropsWithoutRef",
"elements": [
{
"name": "literal",
"value": "'svg'"
}
],
"raw": "ComponentPropsWithoutRef<'svg'>"
}
],
"raw": "SVGProps"
},
{
"name": "IconPropsShared"
},
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * Additional CSS classes to be added to the component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n /**\n * Optional prop to add a test id to the icon\n */\n 'data-testid'?: string;\n}",
"signature": {
"properties": [
{
"key": "className",
"value": {
"name": "string",
"required": false
},
"description": "Additional CSS classes to be added to the component.\nThese classes will be merged with the component's default classes using twMerge."
},
{
"key": "style",
"value": {
"name": "ReactCSSProperties",
"raw": "React.CSSProperties",
"required": false
},
"description": "Optional CSS styles to be applied to the component.\nShould be used sparingly and only for dynamic styles that can't be achieved with className."
},
{
"key": "data-testid",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop to add a test id to the icon"
}
]
}
}
]
}
],
"raw": "Partial"
},
"description": "Optional prop to pass additional properties to the start icon"
},
"startAccessory": {
"required": false,
"tsType": {
"name": "ReactReactNode",
"raw": "React.ReactNode"
},
"description": "Optional prop for a custom element to show at the start of the button"
},
"endIconName": {
"required": false,
"tsType": {
"name": "IconName"
},
"description": "Optional prop to specify an icon to show at the end of the button"
},
"endIconProps": {
"required": false,
"tsType": {
"name": "Partial",
"elements": [
{
"name": "intersection",
"raw": "SVGProps &\nIconPropsShared & {\n /**\n * Additional CSS classes to be added to the component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n /**\n * Optional prop to add a test id to the icon\n */\n 'data-testid'?: string;\n}",
"elements": [
{
"name": "SVGProps",
"elements": [
{
"name": "ComponentPropsWithoutRef",
"elements": [
{
"name": "literal",
"value": "'svg'"
}
],
"raw": "ComponentPropsWithoutRef<'svg'>"
}
],
"raw": "SVGProps"
},
{
"name": "IconPropsShared"
},
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * Additional CSS classes to be added to the component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n /**\n * Optional prop to add a test id to the icon\n */\n 'data-testid'?: string;\n}",
"signature": {
"properties": [
{
"key": "className",
"value": {
"name": "string",
"required": false
},
"description": "Additional CSS classes to be added to the component.\nThese classes will be merged with the component's default classes using twMerge."
},
{
"key": "style",
"value": {
"name": "ReactCSSProperties",
"raw": "React.CSSProperties",
"required": false
},
"description": "Optional CSS styles to be applied to the component.\nShould be used sparingly and only for dynamic styles that can't be achieved with className."
},
{
"key": "data-testid",
"value": {
"name": "string",
"required": false
},
"description": "Optional prop to add a test id to the icon"
}
]
}
}
]
}
],
"raw": "Partial"
},
"description": "Optional prop to pass additional properties to the end icon"
},
"endAccessory": {
"required": false,
"tsType": {
"name": "ReactReactNode",
"raw": "React.ReactNode"
},
"description": "Optional prop for a custom element to show at the end of the button"
},
"loadingIconProps": {
"required": false,
"tsType": {
"name": "Partial",
"elements": [
{
"name": "intersection",
"raw": "SVGProps