mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
housekeeping for tag url (#16723)
* housekeeping for tag url * updated docs for tag url * updated docs for tag url * updated tag url component * updated stories * updated label * Some small updates * Updating test to catch failed propType Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
Nidhi Kumari
GitHub
parent
c9560b75f2
commit
52304d7910
@ -4,7 +4,7 @@ import { TagUrl } from './tag-url';
|
||||
|
||||
# Tag Url
|
||||
|
||||
The `TagUrl` is a component used to display dApp information within a container.
|
||||
The `TagUrl` is a component used to display dApp information
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-component-library-tag-url-tag-url-stories-js--default-story" />
|
||||
@ -16,6 +16,62 @@ The `TagUrl` accepts all props below as well as all [Box](/docs/ui-components-ui
|
||||
|
||||
<ArgsTable of={TagUrl} />
|
||||
|
||||
### Action Button Label
|
||||
|
||||
If we want to have a button in `TagUrl` component. You can update the `ButtonLink` component props used for the action button using `actionButtonProps`
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-component-library-tag-url-tag-url-stories-js--action-button-label" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { TagUrl } from '../../ui/component-library/tag-url';
|
||||
|
||||
<TagUrl
|
||||
label="app.uniswap.org"
|
||||
src="https://uniswap.org/favicon.ico"
|
||||
showLockIcon
|
||||
actionButtonLabel="Permissions"
|
||||
/>
|
||||
<TagUrl
|
||||
label="app.uniswap.org"
|
||||
src="https://uniswap.org/favicon.ico"
|
||||
showLockIcon
|
||||
actionButtonLabel="Action"
|
||||
/>
|
||||
<TagUrl
|
||||
label="app.uniswap.org"
|
||||
src="https://uniswap.org/favicon.ico"
|
||||
showLockIcon
|
||||
actionButtonLabel="Click"
|
||||
/>
|
||||
```
|
||||
|
||||
### Show Lock Icon
|
||||
|
||||
Use the `showLockIcon` prop to render a lock icon next to the `label`. It's intended use is to display if the url uses `https`. This logic should be added during implementation and is not included in the component.
|
||||
|
||||
Off(`undefined`) by default.
|
||||
|
||||
Props for the lock icon can be changed using the `lockIconProps`
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-component-library-tag-url-tag-url-stories-js--show-lock-icon" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { TagUrl } from '../../ui/component-library';
|
||||
|
||||
<TagUrl
|
||||
label="app.uniswap.org"
|
||||
src="https://uniswap.org/favicon.ico"
|
||||
showLockIcon
|
||||
actionButtonLabel="Permissions"
|
||||
/>
|
||||
|
||||
<TagUrl src="" label="http://notsecure.com" />
|
||||
```
|
||||
|
||||
### Src
|
||||
|
||||
Use the `src` prop with an image url to render the `AvatarFavicon`.
|
||||
@ -25,46 +81,52 @@ Use the `src` prop with an image url to render the `AvatarFavicon`.
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
|
||||
import { TagUrl } from '../../ui/component-library/tag-url';
|
||||
|
||||
<TagUrl src="https://peepeth.com/favicon-32x32.png" />
|
||||
<TagUrl src="https://1inch.exchange/assets/favicon/favicon-32x32.png"/>
|
||||
<TagUrl src="https://uniswap.org/favicon.ico" />
|
||||
|
||||
<TagUrl
|
||||
src="https://uniswap.org/favicon.ico"
|
||||
label="app.uniswap.org"
|
||||
showLockIcon
|
||||
/>
|
||||
<TagUrl
|
||||
src="https://peepeth.com/favicon-32x32.png"
|
||||
label="peepeth.com"
|
||||
showLockIcon
|
||||
/>
|
||||
<TagUrl
|
||||
src="https://1inch.exchange/assets/favicon/favicon-32x32.png"
|
||||
label="1inch.exchange"
|
||||
showLockIcon
|
||||
/>
|
||||
<TagUrl label="fallback" src="" />
|
||||
```
|
||||
|
||||
### Label
|
||||
|
||||
Use the `label` prop for the text content of the `TagUrl` component
|
||||
|
||||
Note: `TagUrl` doesn't not contain string manipulation logic to detect `https` or `http` it will display whatever is passed to `label`
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-component-library-tag-url-tag-url-stories-js--label" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
|
||||
import { TagUrl } from '../../ui/component-library/tag-url';
|
||||
|
||||
<TagUrl label="https://widget.getacute.io" />
|
||||
<TagUrl label="app.uniswap.org" />
|
||||
<TagUrl label="https://metamask.github.io" />
|
||||
|
||||
<TagUrl
|
||||
src="https://uniswap.org/favicon.ico"
|
||||
showLockIcon
|
||||
label="app.uniswap.org"
|
||||
/>
|
||||
<TagUrl
|
||||
src="https://metamask.io/icons/icon-48x48.png?v=48400a28770e10dd52a8c0e539aeb282"
|
||||
showLockIcon
|
||||
label="metamask.io"
|
||||
/>
|
||||
<TagUrl
|
||||
src=""
|
||||
showLockIcon
|
||||
label="metamask.github.io"
|
||||
/>
|
||||
```
|
||||
|
||||
### Action Button Label
|
||||
|
||||
If we want to have a button in `TagUrl` component. You can update the `ButtonLink` component props used for the action button using `actionButtonProps`
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-component-library-tag-url-tag-url-stories-js--action-button-label" />
|
||||
</Canvas>
|
||||
|
||||
### Show Lock Icon
|
||||
|
||||
Use the `showLockIcon` prop to render a lock icon next to the `label`. It's intended use is to display if the url uses `https`. Props for the lock icon can be changed using the `lockIconProps`.
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-component-library-tag-url-tag-url-stories-js--show-lock-icon" />
|
||||
</Canvas>
|
||||
|
||||
|
||||
@ -44,11 +44,12 @@ export const TagUrl = ({
|
||||
<AvatarFavicon imageSource={src} {...avatarFaviconProps} />
|
||||
{showLockIcon && (
|
||||
<Icon
|
||||
className="tag-url__lock-icon"
|
||||
className="mm-tag-url__lock-icon"
|
||||
name={ICON_NAMES.LOCK_FILLED}
|
||||
color={COLORS.ICON_ALTERNATIVE}
|
||||
size={SIZES.SM}
|
||||
aria-label="https://"
|
||||
role="img"
|
||||
{...lockIconProps}
|
||||
/>
|
||||
)}
|
||||
@ -110,6 +111,10 @@ TagUrl.propTypes = {
|
||||
* Additional classNames to be added to the TagUrl component
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* TagUrl accepts all the props from Box
|
||||
*/
|
||||
...Box.propTypes,
|
||||
};
|
||||
|
||||
export default TagUrl;
|
||||
|
||||
@ -34,7 +34,7 @@ export default {
|
||||
args: {
|
||||
label: 'app.uniswap.org',
|
||||
src: 'https://uniswap.org/favicon.ico',
|
||||
showLockIcon: false,
|
||||
showLockIcon: true,
|
||||
},
|
||||
};
|
||||
|
||||
@ -43,26 +43,46 @@ const Template = (args) => <TagUrl {...args} />;
|
||||
export const DefaultStory = Template.bind({});
|
||||
DefaultStory.storyName = 'Default';
|
||||
|
||||
export const ActionButtonLabel = Template.bind({});
|
||||
DefaultStory.args = {
|
||||
actionButtonLabel: 'Permissions',
|
||||
};
|
||||
|
||||
export const ActionButtonLabel = (args) => (
|
||||
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
|
||||
<TagUrl {...args} />
|
||||
<TagUrl {...args} actionButtonLabel="Action" />
|
||||
<TagUrl {...args} actionButtonLabel="Click" />
|
||||
</Box>
|
||||
);
|
||||
|
||||
ActionButtonLabel.args = {
|
||||
actionButtonLabel: 'Permissions',
|
||||
};
|
||||
|
||||
export const ShowLockIcon = Template.bind({});
|
||||
ShowLockIcon.args = {
|
||||
showLockIcon: true,
|
||||
};
|
||||
|
||||
export const Label = (args) => (
|
||||
export const ShowLockIcon = (args) => (
|
||||
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
|
||||
<TagUrl {...args} label="https://widget.getacute.io" />
|
||||
<TagUrl {...args} label="app.uniswap.org" />
|
||||
<TagUrl {...args} label="https://metamask.github.io" />
|
||||
<TagUrl
|
||||
{...args}
|
||||
label="app.uniswap.org"
|
||||
src="https://uniswap.org/favicon.ico"
|
||||
showLockIcon
|
||||
/>
|
||||
<TagUrl
|
||||
{...args}
|
||||
label="http://notsecure.com"
|
||||
src=""
|
||||
showLockIcon={false}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
|
||||
export const Src = (args) => (
|
||||
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
|
||||
<TagUrl
|
||||
{...args}
|
||||
label="app.uniswap.org"
|
||||
src="https://uniswap.org/favicon.ico"
|
||||
/>
|
||||
<TagUrl
|
||||
{...args}
|
||||
label="peepeth.com"
|
||||
@ -70,13 +90,21 @@ export const Src = (args) => (
|
||||
/>
|
||||
<TagUrl
|
||||
{...args}
|
||||
label="https://1inch.exchange"
|
||||
label="1inch.exchange"
|
||||
src="https://1inch.exchange/assets/favicon/favicon-32x32.png"
|
||||
/>
|
||||
<TagUrl
|
||||
{...args}
|
||||
label="app.uniswap.org"
|
||||
src="https://uniswap.org/favicon.ico"
|
||||
/>
|
||||
<TagUrl label="fallback" src="" />
|
||||
</Box>
|
||||
);
|
||||
|
||||
export const Label = (args) => (
|
||||
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
|
||||
<TagUrl {...args} />
|
||||
<TagUrl
|
||||
{...args}
|
||||
src="https://metamask.io/icons/icon-48x48.png?v=48400a28770e10dd52a8c0e539aeb282"
|
||||
label="metamask.io"
|
||||
/>
|
||||
<TagUrl {...args} src="" label="metamask.github.io" />
|
||||
</Box>
|
||||
);
|
||||
|
||||
@ -52,9 +52,9 @@ describe('TagUrl', () => {
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(container.getElementsByClassName('tag-url__lock-icon')).toHaveLength(
|
||||
1,
|
||||
);
|
||||
expect(
|
||||
container.getElementsByClassName('mm-tag-url__lock-icon'),
|
||||
).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should render avatar with custom props', () => {
|
||||
@ -105,4 +105,15 @@ describe('TagUrl', () => {
|
||||
'tag-url button',
|
||||
);
|
||||
});
|
||||
// className
|
||||
it('should render with custom className', () => {
|
||||
const { getByTestId } = render(
|
||||
<TagUrl
|
||||
label="app.uniswap.org"
|
||||
data-testid="tag-url"
|
||||
className="test-class"
|
||||
/>,
|
||||
);
|
||||
expect(getByTestId('tag-url')).toHaveClass('test-class');
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user