1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-24 19:10:22 +01:00

Updated all instances of "Component API" to "Props" in storybook documentation (#15324)

* replaced Component API with Props

* replaced Component API with Props in DOCUMENTATION.stories.mdx

* removed base avatar component
This commit is contained in:
Nidhi Kumari 2022-07-27 00:22:40 +05:30 committed by GitHub
parent 1db0ee87ec
commit 7424e98416
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
42 changed files with 45 additions and 45 deletions

View File

@ -50,7 +50,7 @@ import React from 'react';
import BuyIcon from '../icon/overview-buy-icon.component'; import BuyIcon from '../icon/overview-buy-icon.component';
// The mdx file to document component API and usage // The mdx file to document props and usage
import README from './README.mdx'; import README from './README.mdx';
import Button from '.'; import Button from '.';
@ -149,7 +149,7 @@ Now the storybook components are complete, the `README.mdx` documentation should
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
<!-- import the component to use for the ArgsTable under ## Component API --> <!-- import the component to use for the ArgsTable under ## Props -->
import Button from '.'; import Button from '.';
@ -167,9 +167,9 @@ Buttons communicate actions that users can take.
<Story id="ui-components-ui-button-button-stories-js--default-story" /> <Story id="ui-components-ui-button-button-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
<!-- Display the component API using the ArgsTable. Use JSDoc style comments in the PropTypes of your component to add descriptions for props. See button.component.js Button.propTypes for an example of jsDoc style comments <!-- Display the Props using the ArgsTable. Use JSDoc style comments in the PropTypes of your component to add descriptions for props. See button.component.js Button.propTypes for an example of jsDoc style comments
--> -->
<ArgsTable of={Button} /> <ArgsTable of={Button} />

View File

@ -9,6 +9,6 @@ Account List Item is referred for each account item on the Account List's compon
<Story id="ui-components-app-account-list-item-account-list-item-stories-js--default-story" /> <Story id="ui-components-app-account-list-item-account-list-item-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={AccountListItem} /> <ArgsTable of={AccountListItem} />

View File

@ -10,7 +10,7 @@ A card component that displays information and the status of a snap. The `SnapSe
<Story id="ui-components-app-flask-snap-settings-card-snap-settings-card-stories-js--default-story" /> <Story id="ui-components-app-flask-snap-settings-card-snap-settings-card-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={SnapSettingsCard} /> <ArgsTable of={SnapSettingsCard} />

View File

@ -23,7 +23,7 @@ trees to contain.
<Story id="ui-components-app-metamask-translation-metamask-translation-stories-js--default-story" /> <Story id="ui-components-app-metamask-translation-metamask-translation-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
<!-- <!--
ArgsTable doesn't work with SectionShape ArgsTable doesn't work with SectionShape

View File

@ -10,6 +10,6 @@ dApp requesting a signature from the user. This component appears for eth_signTy
<Story id="ui-components-app-signature-request-signature-request-original-stories-js--default-story" /> <Story id="ui-components-app-signature-request-signature-request-original-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={SignatureRequestOriginal} /> <ArgsTable of={SignatureRequestOriginal} />

View File

@ -10,6 +10,6 @@ dApp requesting a signature from the user.
<Story id="ui-components-app-signature-request-signature-request-stories-js--default-story" /> <Story id="ui-components-app-signature-request-signature-request-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={SignatureRequest} /> <ArgsTable of={SignatureRequest} />

View File

@ -10,6 +10,6 @@ Transaction detail that includes estimated gas fees. Intended to be used as an a
<Story id="ui-components-app-transaction-detail-item-transaction-detail-item-stories-js--default-story" /> <Story id="ui-components-app-transaction-detail-item-transaction-detail-item-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={TransactionDetailItem} /> <ArgsTable of={TransactionDetailItem} />

View File

@ -10,7 +10,7 @@ Show transaction detail including estimated gas fee and total fee.
<Story id="ui-components-app-transaction-detail-transaction-detail-stories-js--default-story" /> <Story id="ui-components-app-transaction-detail-transaction-detail-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={TransactionDetail} /> <ArgsTable of={TransactionDetail} />

View File

@ -10,7 +10,7 @@ Popup component that give the user information. Actionable Message component can
<Story id="ui-components-ui-actionable-message-actionable-message-stories-js--default-story" /> <Story id="ui-components-ui-actionable-message-actionable-message-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={ActionableMessage} /> <ArgsTable of={ActionableMessage} />

View File

@ -10,6 +10,6 @@ Alert element used to notify the user about some information or warning.
<Story id="ui-components-ui-alert-alert-stories-js--default-alert" /> <Story id="ui-components-ui-alert-alert-stories-js--default-alert" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={Alert} /> <ArgsTable of={Alert} />

View File

@ -12,7 +12,7 @@ Box is a utility component that can be used for layout or as a base for other UI
<Story id="ui-components-ui-box-box-stories-js--default-story" /> <Story id="ui-components-ui-box-box-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
| Name | Description | Default | | Name | Description | Default |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |

View File

@ -11,6 +11,6 @@ Breadcrumbs element is used to represent the current index out of total.
<Story id="ui-components-ui-breadcrumbs-breadcrumbs-stories-js--default-breadcrumbs" /> <Story id="ui-components-ui-breadcrumbs-breadcrumbs-stories-js--default-breadcrumbs" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={Breadcrumbs} /> <ArgsTable of={Breadcrumbs} />

View File

@ -10,7 +10,7 @@ Button Group is a wrapper for buttons to align them horizontally
<Story id="ui-components-ui-button-group-button-group-stories-js--default-story" /> <Story id="ui-components-ui-button-group-button-group-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={ButtonGroup} /> <ArgsTable of={ButtonGroup} />

View File

@ -10,7 +10,7 @@ Buttons communicate actions that users can take.
<Story id="ui-components-ui-button-button-stories-js--default-story" /> <Story id="ui-components-ui-button-button-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={Button} /> <ArgsTable of={Button} />

View File

@ -10,7 +10,7 @@ Cards are used to group related content or actions together.
<Story id="ui-components-ui-card-card-stories-js--default-story" /> <Story id="ui-components-ui-card-card-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
The `Card` component extends the `Box` component. See the `Box` component for an extended list of props. The `Card` component extends the `Box` component. See the `Box` component for an extended list of props.

View File

@ -10,6 +10,6 @@ A small interactive box that can be toggled by the user to indicate an affirmati
<Story id="ui-components-ui-check-box-check-box-stories-js--default-story" /> <Story id="ui-components-ui-check-box-check-box-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={CheckBox} /> <ArgsTable of={CheckBox} />

View File

@ -10,6 +10,6 @@ Chips are compact elements that represent an input, status, or action.
<Story id="ui-components-ui-chip-chip-stories-js--default-story" /> <Story id="ui-components-ui-chip-chip-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={Chip} /> <ArgsTable of={Chip} />

View File

@ -10,7 +10,7 @@ Confusable allows to filter out any characters that look very similar to English
<Story id="ui-components-ui-confusable-confusable-stories-js--default-confusable" /> <Story id="ui-components-ui-confusable-confusable-stories-js--default-confusable" />
</Canvas> </Canvas>
## Component API ## Props
| Name | Description | Default | | Name | Description | Default |
| ----- | ----------- | ------- | | ----- | ----------- | ------- |

View File

@ -10,6 +10,6 @@ Dialog element is to create popup dialogs
<Story id="ui-components-ui-dialog-dialog-stories-js--default-dialog" /> <Story id="ui-components-ui-dialog-dialog-stories-js--default-dialog" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={Dialog} /> <ArgsTable of={Dialog} />

View File

@ -10,7 +10,7 @@ A toggleable menu that allows the user to choose one value from a predefined lis
<Story id="ui-components-ui-dropdown-dropdown-stories-js--default-story" /> <Story id="ui-components-ui-dropdown-dropdown-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={Dropdown} /> <ArgsTable of={Dropdown} />

View File

@ -10,6 +10,6 @@ This component highlights error messages
<Story id="ui-components-ui-error-message-error-message-stories-js--default-story" /> <Story id="ui-components-ui-error-message-error-message-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={ErrorMessage} /> <ArgsTable of={ErrorMessage} />

View File

@ -10,6 +10,6 @@ The ExportTextContainer component enables to copy the input text or save it as a
<Story id="ui-components-ui-export-text-container-export-text-stories-js--default-export-text-container" /> <Story id="ui-components-ui-export-text-container-export-text-stories-js--default-export-text-container" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={ExportTextContainer} /> <ArgsTable of={ExportTextContainer} />

View File

@ -10,7 +10,7 @@ Various data fields available for forms and pages.
<Story id="ui-components-ui-form-field-form-field-stories-js--default-story" /> <Story id="ui-components-ui-form-field-form-field-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={FormField} /> <ArgsTable of={FormField} />

View File

@ -10,6 +10,6 @@ The HexToDecimal component renders hex as a decimal
<Story id="ui-components-ui-hex-to-decimal-hex-to-decimal-stories-js--default-hex-to-decimal" /> <Story id="ui-components-ui-hex-to-decimal-hex-to-decimal-stories-js--default-hex-to-decimal" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={HexToDecimal} /> <ArgsTable of={HexToDecimal} />

View File

@ -10,7 +10,7 @@ Icon component that takes an image src and uses `onError` to fallback to the fir
<Story id="ui-components-ui-icon-with-fallback-icon-with-fallback-stories-js--default-story" /> <Story id="ui-components-ui-icon-with-fallback-icon-with-fallback-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={IconWithFallback} /> <ArgsTable of={IconWithFallback} />

View File

@ -22,7 +22,7 @@ A range of SVG icon components
> 💡 A lot of the our icons have different props and are not consistent we will need to work on fixing this. > 💡 A lot of the our icons have different props and are not consistent we will need to work on fixing this.
## Component API ## Props
<ArgsTable of={IconCaretLeft} /> <ArgsTable of={IconCaretLeft} />

View File

@ -10,7 +10,7 @@ An identifier component that can be supplied an image or randomly generates one
<Story id="ui-components-ui-identicon-identicon-stories-js--default-story" /> <Story id="ui-components-ui-identicon-identicon-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={Identicon} /> <ArgsTable of={Identicon} />

View File

@ -10,7 +10,7 @@ Text labels that appear when the user hovers over
<Story id="ui-components-ui-info-tooltip-info-tooltip-stories-js--default-story" /> <Story id="ui-components-ui-info-tooltip-info-tooltip-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={InfoTooltip} /> <ArgsTable of={InfoTooltip} />

View File

@ -10,6 +10,6 @@ Logo components that are theme compatible
<Story id="ui-components-ui-logo-logo-stories-js--default-story" /> <Story id="ui-components-ui-logo-logo-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={LogoWyre} /> <ArgsTable of={LogoWyre} />

View File

@ -10,6 +10,6 @@ A multiple-exclusion scope for a set of radio buttons.
<Story id="ui-components-ui-radio-group-radio-group-stories-js--default-story" /> <Story id="ui-components-ui-radio-group-radio-group-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={RadioGroup} /> <ArgsTable of={RadioGroup} />

View File

@ -10,7 +10,7 @@ SiteIcon uses the `IconBorder` and `IconWithFallback` components to create an ic
<Story id="ui-components-ui-site-icon-site-icon-stories-js--default-story" /> <Story id="ui-components-ui-site-icon-site-icon-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={SiteIcon} /> <ArgsTable of={SiteIcon} />

View File

@ -10,7 +10,7 @@ Text fields allow users to enter text into a UI.
<Story id="ui-components-ui-text-field-text-field-stories-js--default-story" /> <Story id="ui-components-ui-text-field-text-field-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={TextField} /> <ArgsTable of={TextField} />

View File

@ -10,6 +10,6 @@ TextArea allows users to enter text into the UI
<Story id="ui-components-ui-textarea-textarea-stories-js--default-story" /> <Story id="ui-components-ui-textarea-textarea-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={TextArea} /> <ArgsTable of={TextArea} />

View File

@ -10,6 +10,6 @@ Button that toggles state on or off. Wraps <a href="https://gdowens.github.io/re
<Story id="ui-components-ui-toggle-button-toggle-button-stories-js--default-story" /> <Story id="ui-components-ui-toggle-button-toggle-button-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={ToggleButton} /> <ArgsTable of={ToggleButton} />

View File

@ -10,7 +10,7 @@ Good typography improves readability, legibility and hierarchy of information.
<Story id="ui-components-ui-typography-typography-stories-js--default-story" /> <Story id="ui-components-ui-typography-typography-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={Typography} /> <ArgsTable of={Typography} />

View File

@ -9,6 +9,6 @@ Popover to update nickname of an address
<Story id="ui-components-ui-update-nickname-popover-update-nickname-popover-stories-js--default-story" /> <Story id="ui-components-ui-update-nickname-popover-update-nickname-popover-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={UpdateNicknamePopover} /> <ArgsTable of={UpdateNicknamePopover} />

View File

@ -26,6 +26,6 @@ An example input that works, to enable the `Add Custom Token` button is `0xAAAAA
### Personal address error ### Personal address error
To show the personal address detected error, input the address <PersonalAddress/> in the `Token Contract Address` field. To show the personal address detected error, input the address <PersonalAddress/> in the `Token Contract Address` field.
## Component API ## Props
<ArgsTable of={ImportToken} /> <ArgsTable of={ImportToken} />

View File

@ -7,6 +7,6 @@ import SendGasRow from '.';
<Story id="ui-pages-send-send-content-send-gas-row-send-gas-row-stories-js--default-story" /> <Story id="ui-pages-send-send-content-send-gas-row-send-gas-row-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={SendGasRow} /> <ArgsTable of={SendGasRow} />

View File

@ -10,7 +10,7 @@ A CountdownTimer displays a timer that ticks down, communicating to the user the
<Story id="ui-pages-swaps-countdown-timer-countdown-timer-stories-js--default-story" /> <Story id="ui-pages-swaps-countdown-timer-countdown-timer-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={CountdownTimer} /> <ArgsTable of={CountdownTimer} />

View File

@ -10,6 +10,6 @@ Dropdown to choose cryptocurrency with amount input field.
<Story id="ui-pages-swaps-dropdown-input-pair-dropdown-input-pair-stories-js--default-story" /> <Story id="ui-pages-swaps-dropdown-input-pair-dropdown-input-pair-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={DropdownInputPair} /> <ArgsTable of={DropdownInputPair} />

View File

@ -9,6 +9,6 @@ MainQuoteSummary displays the quote of a swap.
<Story id="ui-pages-swaps-main-quote-summary-main-quote-summary-stories-js--default-story" /> <Story id="ui-pages-swaps-main-quote-summary-main-quote-summary-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
<ArgsTable of={MainQuoteSummary} /> <ArgsTable of={MainQuoteSummary} />

View File

@ -10,7 +10,7 @@ Portal page for user to auth the access of their account
<Story id="ui-pages-unlock-page-unlock-page-stories-js--default-story" /> <Story id="ui-pages-unlock-page-unlock-page-stories-js--default-story" />
</Canvas> </Canvas>
## Component API ## Props
<!-- <!--
ArgsTable doesn't work with SectionShape ArgsTable doesn't work with SectionShape