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
2024-11-28 14:56:35 +01:00 · 2022-07-27 00:22:40 +05:30 · 2022-07-27 00:22:40 +05:30 · 7424e98416
commit 7424e98416
parent 1db0ee87ec
42 changed files with 45 additions and 45 deletions
--- a/.storybook/2.DOCUMENTATION.stories.mdx
+++ b/.storybook/2.DOCUMENTATION.stories.mdx
@ -50,7 +50,7 @@ import React from 'react';

 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 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 the component to use for the ArgsTable under ## Component API  -->
+<!-- import the component to use for the ArgsTable under ## Props  -->

 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" />
 </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} />
--- a/ui/components/app/account-list-item/README.mdx
+++ b/ui/components/app/account-list-item/README.mdx
@ -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" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={AccountListItem} />
--- a/ui/components/app/flask/snap-settings-card/README.mdx
+++ b/ui/components/app/flask/snap-settings-card/README.mdx
@ -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" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={SnapSettingsCard} />

--- a/ui/components/app/metamask-translation/README.mdx
+++ b/ui/components/app/metamask-translation/README.mdx
@ -23,7 +23,7 @@ trees to contain.
  <Story id="ui-components-app-metamask-translation-metamask-translation-stories-js--default-story" />
 </Canvas>

-## Component API
+## Props

 <!--
 ArgsTable doesn't work with SectionShape
--- a/ui/components/app/signature-request-original/README.mdx
+++ b/ui/components/app/signature-request-original/README.mdx
@ -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" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={SignatureRequestOriginal} />
--- a/ui/components/app/signature-request/README.mdx
+++ b/ui/components/app/signature-request/README.mdx
@ -10,6 +10,6 @@ dApp requesting a signature from the user.
  <Story id="ui-components-app-signature-request-signature-request-stories-js--default-story" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={SignatureRequest} />
--- a/ui/components/app/transaction-detail-item/README.mdx
+++ b/ui/components/app/transaction-detail-item/README.mdx
@ -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" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={TransactionDetailItem} />
--- a/ui/components/app/transaction-detail/README.mdx
+++ b/ui/components/app/transaction-detail/README.mdx
@ -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" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={TransactionDetail} />

--- a/ui/components/ui/actionable-message/README.mdx
+++ b/ui/components/ui/actionable-message/README.mdx
@ -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" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={ActionableMessage} />

--- a/ui/components/ui/alert/README.mdx
+++ b/ui/components/ui/alert/README.mdx
@ -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" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={Alert} />
--- a/ui/components/ui/box/README.mdx
+++ b/ui/components/ui/box/README.mdx
@ -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" />
 </Canvas>

-## Component API
+## Props

 | Name            | Description                                                                                                                                                                                                                                                                             | Default            |
 | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
--- a/ui/components/ui/breadcrumbs/README.mdx
+++ b/ui/components/ui/breadcrumbs/README.mdx
@ -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" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={Breadcrumbs} />
--- a/ui/components/ui/button-group/README.mdx
+++ b/ui/components/ui/button-group/README.mdx
@ -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" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={ButtonGroup} />

--- a/ui/components/ui/button/README.mdx
+++ b/ui/components/ui/button/README.mdx
@ -10,7 +10,7 @@ Buttons communicate actions that users can take.
  <Story id="ui-components-ui-button-button-stories-js--default-story" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={Button} />

--- a/ui/components/ui/card/README.mdx
+++ b/ui/components/ui/card/README.mdx
@ -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" />
 </Canvas>

-## Component API
+## Props

 The `Card` component extends the `Box` component. See the `Box` component for an extended list of props.

--- a/ui/components/ui/check-box/README.mdx
+++ b/ui/components/ui/check-box/README.mdx
@ -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" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={CheckBox} />
--- a/ui/components/ui/chip/README.mdx
+++ b/ui/components/ui/chip/README.mdx
@ -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" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={Chip} />
--- a/ui/components/ui/confusable/README.mdx
+++ b/ui/components/ui/confusable/README.mdx
@ -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" />
 </Canvas>

-## Component API
+## Props

 | Name  | Description | Default |
 | ----- | ----------- | ------- |
--- a/ui/components/ui/dialog/README.mdx
+++ b/ui/components/ui/dialog/README.mdx
@ -10,6 +10,6 @@ Dialog element is to create popup dialogs
  <Story id="ui-components-ui-dialog-dialog-stories-js--default-dialog" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={Dialog} />
--- a/ui/components/ui/dropdown/README.mdx
+++ b/ui/components/ui/dropdown/README.mdx
@ -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" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={Dropdown} />

--- a/ui/components/ui/error-message/README.mdx
+++ b/ui/components/ui/error-message/README.mdx
@ -10,6 +10,6 @@ This component highlights error messages
  <Story id="ui-components-ui-error-message-error-message-stories-js--default-story" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={ErrorMessage} />
--- a/ui/components/ui/export-text-container/README.mdx
+++ b/ui/components/ui/export-text-container/README.mdx
@ -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" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={ExportTextContainer} />
--- a/ui/components/ui/form-field/README.mdx
+++ b/ui/components/ui/form-field/README.mdx
@ -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" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={FormField} />

--- a/ui/components/ui/hex-to-decimal/README.mdx
+++ b/ui/components/ui/hex-to-decimal/README.mdx
@ -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" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={HexToDecimal} />
--- a/ui/components/ui/icon-with-fallback/README.mdx
+++ b/ui/components/ui/icon-with-fallback/README.mdx
@ -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" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={IconWithFallback} />

--- a/ui/components/ui/icon/README.mdx
+++ b/ui/components/ui/icon/README.mdx
@ -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.

-## Component API
+## Props

 <ArgsTable of={IconCaretLeft} />

--- a/ui/components/ui/identicon/README.mdx
+++ b/ui/components/ui/identicon/README.mdx
@ -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" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={Identicon} />

--- a/ui/components/ui/info-tooltip/README.mdx
+++ b/ui/components/ui/info-tooltip/README.mdx
@ -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" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={InfoTooltip} />

--- a/ui/components/ui/logo/README.mdx
+++ b/ui/components/ui/logo/README.mdx
@ -10,6 +10,6 @@ Logo components that are theme compatible
  <Story id="ui-components-ui-logo-logo-stories-js--default-story" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={LogoWyre} />
--- a/ui/components/ui/radio-group/README.mdx
+++ b/ui/components/ui/radio-group/README.mdx
@ -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" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={RadioGroup} />
--- a/ui/components/ui/site-icon/README.mdx
+++ b/ui/components/ui/site-icon/README.mdx
@ -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" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={SiteIcon} />

--- a/ui/components/ui/text-field/README.mdx
+++ b/ui/components/ui/text-field/README.mdx
@ -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" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={TextField} />

--- a/ui/components/ui/textarea/README.mdx
+++ b/ui/components/ui/textarea/README.mdx
@ -10,6 +10,6 @@ TextArea allows users to enter text into the UI
  <Story id="ui-components-ui-textarea-textarea-stories-js--default-story" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={TextArea} />
--- a/ui/components/ui/toggle-button/README.mdx
+++ b/ui/components/ui/toggle-button/README.mdx
@ -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" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={ToggleButton} />
--- a/ui/components/ui/typography/README.mdx
+++ b/ui/components/ui/typography/README.mdx
@ -10,7 +10,7 @@ Good typography improves readability, legibility and hierarchy of information.
  <Story id="ui-components-ui-typography-typography-stories-js--default-story" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={Typography} />

--- a/ui/components/ui/update-nickname-popover/README.mdx
+++ b/ui/components/ui/update-nickname-popover/README.mdx
@ -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" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={UpdateNicknamePopover} />
--- a/ui/pages/import-token/README.mdx
+++ b/ui/pages/import-token/README.mdx
@ -26,6 +26,6 @@ An example input that works, to enable the `Add Custom Token` button is `0xAAAAA
 ### Personal address error
 To show the personal address detected error, input the address <PersonalAddress/> in the `Token Contract Address` field.

-## Component API
+## Props

 <ArgsTable of={ImportToken} />
--- a/ui/pages/send/send-content/send-gas-row/README.mdx
+++ b/ui/pages/send/send-content/send-gas-row/README.mdx
@ -7,6 +7,6 @@ import SendGasRow from '.';
  <Story id="ui-pages-send-send-content-send-gas-row-send-gas-row-stories-js--default-story" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={SendGasRow} />
--- a/ui/pages/swaps/countdown-timer/README.mdx
+++ b/ui/pages/swaps/countdown-timer/README.mdx
@ -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" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={CountdownTimer} />

--- a/ui/pages/swaps/dropdown-input-pair/README.mdx
+++ b/ui/pages/swaps/dropdown-input-pair/README.mdx
@ -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" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={DropdownInputPair} />
--- a/ui/pages/swaps/main-quote-summary/README.mdx
+++ b/ui/pages/swaps/main-quote-summary/README.mdx
@ -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" />
 </Canvas>

-## Component API
+## Props

 <ArgsTable of={MainQuoteSummary} />
--- a/ui/pages/unlock-page/README.mdx
+++ b/ui/pages/unlock-page/README.mdx
@ -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" />
 </Canvas>

-## Component API
+## Props

 <!--
 ArgsTable doesn't work with SectionShape