renamed style and prop names

ui/components/component-library/tag-url/README.mdx

@@ -18,11 +18,11 @@ The `Tag` accepts all props below as well as all [Box](/docs/ui-components-ui-bo
 
 ### Image Source
 
-The image url of the `AvatarFavicon` to be rendered.
+Use the `imageSource` prop with an image url to render the  `AvatarFavicon`.
 
 ### Label
 
-The text content of the `TagUrl` component
+Use the `label` prop for the text content of the `TagUrl` component
 
 ### Cta
 

ui/components/component-library/tag-url/tag-url.js

@@ -5,61 +5,57 @@ import Box from '../../ui/box/box';
 import { Text } from '../text';
 import {
   ALIGN_ITEMS,
+  BORDER_RADIUS,
   COLORS,
-  JUSTIFY_CONTENT,
+  DISPLAY,
   SIZES,
   TEXT,
 } from '../../../helpers/constants/design-system';
 import { AvatarFavicon } from '../avatar-favicon';
 import { ButtonLink } from '../button-link';
-import { Icon, ICON_NAMES } from '../icon';
 
 export const TagUrl = ({
   label,
+  labelProps,
+  actionButtonLabel,
+  actionButtonProps,
+  avatarFaviconImageSource,
+  avatarFaviconProps,
   className,
-  imageSource,
-  cta,
-  faviconProps,
-  buttonProps,
-  textProps,
-  fallbackIconProps,
   ...props
 }) => {
   return (
     <Box
-      className={classnames('tag-url', className)}
+      className={classnames('mm-tag-url', className)}
       backgroundColor={COLORS.BACKGROUND_DEFAULT}
       borderColor={COLORS.BORDER_DEFAULT}
       borderWidth={1}
-      justifyContent={JUSTIFY_CONTENT.CENTER}
       alignItems={ALIGN_ITEMS.CENTER}
-      borderRadius={SIZES.XL}
+      paddingLeft={2}
+      paddingRight={4}
+      gap={2}
+      borderRadius={BORDER_RADIUS.PILL}
+      display={DISPLAY.INLINE_FLEX}
       {...props}
     >
       <AvatarFavicon
-        className="tag-url__favicon"
-        imageSource={imageSource}
-        {...faviconProps}
+        imageSource={avatarFaviconImageSource}
+        {...avatarFaviconProps}
       />
-      <Icon
-        className="tag-url__lock-icon"
-        name={ICON_NAMES.LOCK_FILLED}
-        color={COLORS.ICON_DEFAULT}
-        size={SIZES.SM}
-        aria-label="https://"
-        {...fallbackIconProps}
-      />
-      <Text className="tag-url__label" variant={TEXT.BODY_MD} {...textProps}>
+      <Text variant={TEXT.BODY_MD} ellipsis {...labelProps}>
         {label}
       </Text>
-      {cta?.label && (
+      {actionButtonLabel && (
         <ButtonLink
           as="a"
-          className="tag-url__button-link"
-          href="#"
-          {...buttonProps}
+          size={SIZES.SM}
+          paddingLeft={0}
+          paddingRight={0}
+          marginLeft={2}
+          marginRight={2}
+          {...actionButtonProps}
         >
-          {cta.label}
+          {actionButtonLabel}
         </ButtonLink>
       )}
     </Box>
@@ -68,33 +64,29 @@ export const TagUrl = ({
 
 TagUrl.propTypes = {
   /**
-   * The imageSource accepts the string of the image to be rendered
-   */
-  imageSource: PropTypes.string,
-  /**
-   * The text content of the TagUrl component
+   * The avatarFaviconImageSource accepts the string of the image to be rendered
    */
-  label: PropTypes.string,
+  avatarFaviconImageSource: PropTypes.string,
   /**
-   * If we want a button in TagUrl component.
+   * It accepts all the props from Avatar Favicon
    */
-  cta: PropTypes.object,
+  avatarFaviconProps: PropTypes.shape(AvatarFavicon.PropTypes),
   /**
-   * It accepts all the props from ButtonLink
+   * The text content of the TagUrl component
    */
-  buttonProps: PropTypes.shape(ButtonLink.PropTypes),
+  label: PropTypes.string,
   /**
-   * It accepts all the props from Avatar Favicon
+   * It accepts all the props from Text Component
    */
-  faviconProps: PropTypes.shape(AvatarFavicon.PropTypes),
+  labelProps: PropTypes.shape(Text.PropTypes),
   /**
-   * It accepts all the props from Icon
+   * If we want a button in TagUrl component.
    */
-  fallbackIconProps: PropTypes.shape(Icon.PropTypes),
+  actionButtonLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   /**
-   * It accepts all the props from Text Component
+   * It accepts all the props from ButtonLink
    */
-  textProps: PropTypes.shape(Text.PropTypes),
+  actionButtonProps: PropTypes.shape(ButtonLink.PropTypes),
   /**
    * Additional classNames to be added to the TagUrl component
    */

ui/components/component-library/tag-url/tag-url.scss

@@ -1,25 +1,4 @@
-.tag-url {
-  width: max-content;
-  padding: 8px 16px 8px 8px;
-  max-width: 326px;
-  max-height: 48px;
-
-  &__favicon {
-    margin-right: 8px;
-  }
-
-  &__button-link {
-    padding-right: 0 !important;
-  }
-
-  &__lock-icon {
-    margin-right: 8px !important;
-  }
-
-
-  &__label {
-    overflow: hidden;
-    height: 22px;
-    text-overflow: ellipsis;
-  }
+.mm-tag-url {
+  height: 48px;
+  max-width: 100%;
 }

ui/components/component-library/tag-url/tag-url.stories.js

@@ -15,31 +15,26 @@ export default {
     label: {
       control: 'text',
     },
-    imageSource: {
+    avatarFaviconImageSource: {
       control: 'text',
     },
     cta: {
       control: 'object',
     },
   },
   args: {
-    label: 'app.uniswap.org',
-    imageSource: 'https://uniswap.org/favicon.ico',
-    cta: {
-      label: '',
-    },
+    label:
+      'https://app.uniswap.orghttps://app.uniswap.orghttps://app.uniswap.orghttps://app.uniswap.orghttps://app.uniswap.org',
+    avatarFaviconImageSource: 'https://uniswap.org/favicon.ico',
   },
 };
 
-const Template = (args) => {
-  return <TagUrl {...args} />;
-};
+const Template = (args) => <TagUrl {...args} />;
 
 export const DefaultStory = Template.bind({});
 DefaultStory.storyName = 'Default';
 
-export const WithCta = (args) => <TagUrl {...args} cta={{ label: 'Action' }} />;
-
-export const TextOverflow = (args) => (
-  <TagUrl {...args} label="aohfioahonrfrishparhpahrigpahvgbjnbhgvbjnkhb" />
-);
+export const ActionButtonLabel = Template.bind({});
+ActionButtonLabel.args = {
+  actionButtonLabel: 'Permissions',
+};