feat: Implement clickable tag

Author: ganiirsyadi

src/@next/Tag/Tag.stories.tsx

@@ -3,6 +3,7 @@ import React, { useCallback, useState } from 'react';
 
 import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
 import { Tag, TagProps } from './Tag';
+import { Blue } from '../utilities/colors';
 
 (Tag as React.FunctionComponent<TagProps>).displayName = 'Tag';
 
@@ -25,10 +26,22 @@ export default {
         type: null,
       },
     },
+    onClick: {
+      description:
+        'A function callback to pass in to when the tag is clicked, if this is supplied, the tag will be clickable',
+      control: {
+        type: null,
+      },
+    },
     textColor: {
       description: 'Text color of the tag',
       control: 'color',
     },
+    disabled: {
+      description:
+        'A prop to disable the tag, only works when onClick is supplied',
+      control: null,
+    },
   },
 
   parameters: {
@@ -74,10 +87,47 @@ const RemoveableTemplate: Story<TagProps> = () => {
   return <>{tagMarkup}</>;
 };
 
+const ClickableTemplate: Story<TagProps> = args => {
+  return (
+    <Tag textColor={args.textColor} onClick={() => window.alert('Clicked')}>
+      Clickable Tag
+    </Tag>
+  );
+};
+
+const ClickableDisabledTemplate: Story<TagProps> = args => {
+  return (
+    <Tag
+      textColor={args.textColor}
+      onClick={() => window.alert('Clicked')}
+      disabled
+    >
+      Clickable Tag - Disabled
+    </Tag>
+  );
+};
+
 export const Default = DefaultTemplate.bind({});
 
-Default.args = {};
+Default.args = {
+  onRemove: undefined,
+  onClick: undefined,
+};
 
 export const Removeable = RemoveableTemplate.bind({});
 
 Removeable.args = {};
+
+export const Clickable = ClickableTemplate.bind({});
+
+Clickable.args = {
+  onRemove: null,
+  textColor: Blue.S99,
+};
+
+export const ClickableDisabled = ClickableDisabledTemplate.bind({});
+ClickableDisabled.args = {
+  onRemove: null,
+  textColor: Blue.S99,
+  disabled: true,
+};

src/@next/Tag/Tag.tsx

@@ -14,23 +14,40 @@ export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
   value?: string;
   onRemove?: (() => void) | null;
   textColor?: string;
+  disabled?: boolean;
 }
 
 export type TagRemoveContainerProps = React.HTMLAttributes<HTMLDivElement>;
 
 export type TagContentProps = React.HTMLAttributes<HTMLSpanElement> & TagProps;
 
 export const Tag = React.forwardRef<HTMLDivElement, TagProps>(function Tag(
-  { children, onRemove, value, textColor, ...props }: TagProps,
+  {
+    children,
+    onRemove,
+    value,
+    textColor,
+    onClick,
+    disabled,
+    ...props
+  }: TagProps,
   ref
 ) {
+  const handleTextColor = () => {
+    if (disabled) {
+      return Neutral.B85;
+    }
+
+    if (textColor) {
+      return textColor;
+    }
+
+    return Neutral.B18;
+  };
+
   const content =
     typeof children === 'string' || typeof children === 'number' ? (
-      <Typography
-        variant="caption"
-        color={textColor ?? Neutral.B18}
-        as={'span'}
-      >
+      <Typography variant="caption" color={handleTextColor()} as={'span'}>
         {children}
       </Typography>
     ) : (
@@ -51,7 +68,16 @@ export const Tag = React.forwardRef<HTMLDivElement, TagProps>(function Tag(
   );
 
   return (
-    <TagStyle ref={ref} {...props} value={value}>
+    <TagStyle
+      ref={ref}
+      {...props}
+      value={value}
+      onClick={!disabled && onClick}
+      data-clickable={!!onClick}
+      role={!!onClick ? 'button' : undefined}
+      data-disabled={disabled}
+      as={!!onClick ? 'button' : 'div'}
+    >
       <TagContentStyle data-removeable={!!onRemove}>{content}</TagContentStyle>
       {removeButton}
     </TagStyle>

src/@next/Tag/TagStyle.ts

@@ -8,6 +8,8 @@ import { TagContentProps, TagProps, TagRemoveContainerProps } from './Tag';
 export const TagContentStyle = styled.span<TagContentProps>`
   padding: ${space4} ${space8};
 
+  transform: translateY(1px);
+
   &[data-removeable='true'] {
     padding-right: 0;
   }
@@ -35,9 +37,37 @@ export const TagStyle = styled.div<TagProps>`
   display: inline-flex;
   align-items: center;
   background-color: ${Blue.S08};
-
+  border: 0;
   border-radius: ${borderRadius4};
   width: fit-content;
+  padding: 0;
+
+  &[data-clickable='true'] {
+    cursor: pointer;
+
+    &:hover {
+      outline: 1px solid ${Blue.S100}E6;
+    }
+
+    &:active {
+      outline: 1px solid ${Blue.S100};
+    }
+
+    &:focus-visible {
+      outline: 1px solid ${Blue.S100};
+      box-shadow: 0px 0px 0px 2px ${Neutral.B100}, 0px 0px 0px 4px ${Blue.S54};
+    }
+
+    &[data-disabled='true'] {
+      cursor: not-allowed;
+      outline: none;
+      background-color: ${Neutral.B95};
+      &:focus-visible {
+        outline: none;
+        box-shadow: none;
+      }
+    }
+  }
 
   @media (max-width: ${Breakpoints.large}) {
     font-size: 12px;

test/e2e/tag/tag.spec.ts

@@ -7,6 +7,12 @@ const getPage = (page: Page) =>
 const getRemoveableTagPage = (page: Page) =>
   new StoryBookPage(page, '?path=/story/next-tag--removeable');
 
+const getClickableTagPage = (page: Page) =>
+  new StoryBookPage(page, '?path=/story/next-tag--clickable');
+
+const getClickableDisabledTagPage = (page: Page) =>
+  new StoryBookPage(page, '?path=/story/next-tag--clickable-disabled');
+
 test('Tag - standard size', async ({ page }) => {
   const tagPage = getPage(page);
   await tagPage.goto();
@@ -133,3 +139,107 @@ test('removeable tag pressed state - small size', async ({ page }) => {
     'tag-removeable-pressed-small-size.png'
   );
 });
+
+test('clickable tag hover state', async ({ page }) => {
+  const tagPage = getClickableTagPage(page);
+  await tagPage.goto();
+  await tagPage.page
+    .frameLocator('internal:attr=[title="storybook-preview-iframe"i]')
+    .getByText('Clickable Tag')
+    .first()
+    .hover({ force: true });
+  await expect(tagPage.container).toHaveScreenshot('tag-clickable-hover.png');
+});
+
+test('clickable tag hover state - small size', async ({ page }) => {
+  page.setViewportSize({ width: 768, height: 600 });
+
+  const tagPage = getClickableTagPage(page);
+  await tagPage.goto();
+  await tagPage.page
+    .frameLocator('internal:attr=[title="storybook-preview-iframe"i]')
+    .getByText('Clickable Tag')
+    .first()
+    .hover({ force: true });
+  await expect(tagPage.container).toHaveScreenshot(
+    'tag-clickable-hover-small-size.png'
+  );
+});
+
+test('clickable tag active state', async ({ page }) => {
+  const tagPage = getClickableTagPage(page);
+  await tagPage.goto();
+  await tagPage.page
+    .frameLocator('internal:attr=[title="storybook-preview-iframe"i]')
+    .getByText('Clickable Tag')
+    .first()
+    .click();
+
+  await tagPage.page.mouse.down();
+  await expect(tagPage.container).toHaveScreenshot('tag-clickable-active.png');
+});
+
+test('clickable tag active state - small size', async ({ page }) => {
+  page.setViewportSize({ width: 768, height: 600 });
+
+  const tagPage = getClickableTagPage(page);
+  await tagPage.goto();
+  await tagPage.page
+    .frameLocator('internal:attr=[title="storybook-preview-iframe"i]')
+    .getByText('Clickable Tag')
+    .first()
+    .click();
+
+  await tagPage.page.mouse.down();
+  await expect(tagPage.container).toHaveScreenshot(
+    'tag-clickable-active-small-size.png'
+  );
+});
+
+test('clickable tag focus state', async ({ page }) => {
+  const tagPage = getClickableTagPage(page);
+  await tagPage.goto();
+  await tagPage.page
+    .frameLocator('internal:attr=[title="storybook-preview-iframe"i]')
+    .getByText('Clickable Tag')
+    .first()
+    .focus();
+
+  await expect(tagPage.container).toHaveScreenshot('tag-clickable-focus.png');
+});
+
+test('clickable tag focus state - small size', async ({ page }) => {
+  page.setViewportSize({ width: 768, height: 600 });
+
+  const tagPage = getClickableTagPage(page);
+  await tagPage.goto();
+  await tagPage.page
+    .frameLocator('internal:attr=[title="storybook-preview-iframe"i]')
+    .getByText('Clickable Tag')
+    .first()
+    .focus();
+
+  await expect(tagPage.container).toHaveScreenshot(
+    'tag-clickable-focus-small-size.png'
+  );
+});
+
+test('clickable tag disabled state', async ({ page }) => {
+  const tagPage = getClickableDisabledTagPage(page);
+  await tagPage.goto();
+
+  await expect(tagPage.container).toHaveScreenshot(
+    'tag-clickable-disabled.png'
+  );
+});
+
+test('clickable tag disabled state - small size', async ({ page }) => {
+  page.setViewportSize({ width: 768, height: 600 });
+
+  const tagPage = getClickableDisabledTagPage(page);
+  await tagPage.goto();
+
+  await expect(tagPage.container).toHaveScreenshot(
+    'tag-clickable-disabled-small-size.png'
+  );
+});