fix: snapshots

razorpay · Jul 21, 2023 · 25ef73f · 25ef73f
1 parent fb71f54
commit 25ef73f
Show file tree

Hide file tree

Showing 3 changed files with 256 additions and 79 deletions.
diff --git a/packages/blade/src/components/Tag/Tag.tsx b/packages/blade/src/components/Tag/Tag.tsx
@@ -1,15 +1,19 @@
 import React from 'react';
+import styled from 'styled-components';
 import { Box } from '~components/Box';
 import type { StyledPropsBlade } from '~components/Box/styledProps';
 import { getStyledProps } from '~components/Box/styledProps';
+import type { IconButtonProps } from '~components/Button/IconButton';
 import { IconButton } from '~components/Button/IconButton';
-import type { IconComponent } from '~components/Icons';
+import type { IconComponent, IconProps } from '~components/Icons';
 import { CloseIcon } from '~components/Icons';
+import type { TextProps } from '~components/Typography';
 import { Text } from '~components/Typography';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
 import type { StringChildrenType, TestID } from '~utils/types';
 import { isReactNative } from '~utils';
 import BaseBox from '~components/Box/BaseBox';
+import type { PaddingProps } from '~components/Box/BaseBox/types/spacingTypes';
 
 type TagProps = {
   /**
@@ -38,54 +42,111 @@ type TagProps = {
    * Disable tag
    */
   isDisabled?: boolean;
+
+  /**
+   *
+   */
+  _isTagFocussed?: boolean;
 } & StyledPropsBlade &
   TestID;
 
+const FocussableTag = styled(BaseBox)<{ isTagFocussed: TagProps['_isTagFocussed'] }>((props) => {
+  if (props.isTagFocussed) {
+    return {
+      outline: `1px solid ${props.theme.colors.surface.background.level1.lowContrast}`,
+      boxShadow: `0px 0px 0px 4px ${props.theme.colors.brand.primary[400]}`,
+    };
+  }
+
+  return {};
+});
+const Desktop = ({ children }: { children: (React.ReactElement | null)[] }): React.ReactElement => (
+  <Box display={{ base: 'none', m: 'flex' }} alignItems="center">
+    {children}
+  </Box>
+);
+
+const Mobile = ({ children }: { children: (React.ReactElement | null)[] }): React.ReactElement => (
+  <Box display={{ base: 'flex', m: 'none' }} alignItems="center">
+    {children}
+  </Box>
+);
+
 const Tag = ({
   size = 'medium',
   icon: Icon,
   onDismiss,
   children,
   isDisabled,
   testID,
+  _isTagFocussed,
   ...styledProps
 }: TagProps): React.ReactElement | null => {
   const textColor = isDisabled
     ? 'surface.text.placeholder.lowContrast'
     : 'surface.text.subtle.lowContrast';
 
+  const mediumPadding: PaddingProps['padding'] = {
+    base: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],
+    m: ['spacing.1', 'spacing.2', 'spacing.1', 'spacing.3'],
+  };
+
+  const largePadding: PaddingProps['padding'] = {
+    base: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],
+    m: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],
+  };
+
+  const getLeadingIcon = ({ size }: { size: IconProps['size'] }): React.ReactElement | null =>
+    Icon ? <Icon color={textColor} size={size} marginRight="spacing.2" /> : null;
+
+  const getTagText = ({
+    size,
+  }: {
+    size: TextProps<{ variant: 'body' }>['size'];
+  }): React.ReactElement => (
+    <Text marginRight="spacing.2" color={textColor} size={size}>
+      {children}
+    </Text>
+  );
+
+  const getCloseIcon = ({ size }: { size: IconButtonProps['size'] }): React.ReactElement => (
+    <IconButton
+      size={size}
+      icon={CloseIcon}
+      accessibilityLabel={`Close ${children} tag`}
+      isDisabled={isDisabled}
+      onClick={() => {
+        onDismiss();
+      }}
+    />
+  );
+
   return (
-    <BaseBox
+    <FocussableTag
       display={(isReactNative() ? 'flex' : 'inline-flex') as never}
       alignSelf={isReactNative() ? 'center' : undefined}
       flexDirection="row"
       flexWrap="nowrap"
       backgroundColor="brand.gray.a100.lowContrast"
       borderRadius="max"
-      padding={
-        size === 'medium'
-          ? ['spacing.1', 'spacing.2', 'spacing.1', 'spacing.3']
-          : ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4']
-      }
+      padding={size === 'medium' ? mediumPadding : largePadding}
       {...getStyledProps(styledProps)}
       {...metaAttribute({ name: MetaConstants.Tag, testID })}
+      isTagFocussed={_isTagFocussed}
     >
       <Box display="flex" flexDirection="row" flexWrap="nowrap" alignItems="center">
-        {Icon ? <Icon color={textColor} size="small" marginRight="spacing.2" /> : null}
-        <Text marginRight="spacing.2" color={textColor} size="small">
-          {children}
-        </Text>
-        <IconButton
-          size="small"
-          icon={CloseIcon}
-          accessibilityLabel={`Close ${children} tag`}
-          isDisabled={isDisabled}
-          onClick={() => {
-            onDismiss();
-          }}
-        />
+        <Desktop>
+          {getLeadingIcon({ size: 'small' })}
+          {getTagText({ size: 'small' })}
+          {getCloseIcon({ size: 'small' })}
+        </Desktop>
+        <Mobile>
+          {getLeadingIcon({ size: size === 'large' ? 'medium' : 'small' })}
+          {getTagText({ size: size === 'large' ? 'medium' : 'small' })}
+          {getCloseIcon({ size: size === 'large' ? 'medium' : 'small' })}
+        </Mobile>
       </Box>
-    </BaseBox>
+    </FocussableTag>
   );
 };
 

diff --git a/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.ssr.test.tsx.snap b/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.ssr.test.tsx.snap
@@ -1,48 +1,86 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Tag /> should render tag 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><div data-blade-component=\\"tag\\" class=\\"BaseBox-bmPWx igZojE\\"><div data-blade-component=\\"box\\" class=\\"BaseBox-bmPWx eEphev\\"><p class=\\"StyledBaseText-dVBfTO haBWCr\\" data-blade-component=\\"text\\">in:User</p><button type=\\"button\\" aria-label=\\"Close in:User tag\\" data-blade-component=\\"icon-button\\" class=\\"StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 gvuEeM\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"12px\\" viewBox=\\"0 0 24 24\\" width=\\"12px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><path d=\\"M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z\\" fill=\\"currentColor\\" data-blade-component=\\"svg-path\\"></path></svg></button></div></div></div>"`;
+exports[`<Tag /> should render tag 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><div data-blade-component=\\"tag\\" class=\\"BaseBox-bmPWx Tag__FocussableTag-jmwb4r-0 iZePvJ\\"><div data-blade-component=\\"box\\" class=\\"BaseBox-bmPWx eEphev\\"><div data-blade-component=\\"box\\" class=\\"BaseBox-bmPWx jAnJkS\\"><p class=\\"StyledBaseText-dVBfTO haBWCr\\" data-blade-component=\\"text\\">in:User</p><button type=\\"button\\" aria-label=\\"Close in:User tag\\" data-blade-component=\\"icon-button\\" class=\\"StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 gvuEeM\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"12px\\" viewBox=\\"0 0 24 24\\" width=\\"12px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><path d=\\"M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z\\" fill=\\"currentColor\\" data-blade-component=\\"svg-path\\"></path></svg></button></div><div data-blade-component=\\"box\\" class=\\"BaseBox-bmPWx ghxtYm\\"><p class=\\"StyledBaseText-dVBfTO haBWCr\\" data-blade-component=\\"text\\">in:User</p><button type=\\"button\\" aria-label=\\"Close in:User tag\\" data-blade-component=\\"icon-button\\" class=\\"StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 gvuEeM\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"12px\\" viewBox=\\"0 0 24 24\\" width=\\"12px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><path d=\\"M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z\\" fill=\\"currentColor\\" data-blade-component=\\"svg-path\\"></path></svg></button></div></div></div></div>"`;
 
 exports[`<Tag /> should render tag 2`] = `
 <div
   data-reactroot=""
   id="root"
 >
   <div
-    class="BaseBox-bmPWx igZojE"
+    class="BaseBox-bmPWx Tag__FocussableTag-jmwb4r-0 iZePvJ"
     data-blade-component="tag"
   >
     <div
       class="BaseBox-bmPWx eEphev"
       data-blade-component="box"
     >
-      <p
-        class="StyledBaseText-dVBfTO haBWCr"
-        data-blade-component="text"
+      <div
+        class="BaseBox-bmPWx jAnJkS"
+        data-blade-component="box"
       >
-        in:User
-      </p>
-      <button
-        aria-label="Close in:User tag"
-        class="StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 gvuEeM"
-        data-blade-component="icon-button"
-        type="button"
+        <p
+          class="StyledBaseText-dVBfTO haBWCr"
+          data-blade-component="text"
+        >
+          in:User
+        </p>
+        <button
+          aria-label="Close in:User tag"
+          class="StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 gvuEeM"
+          data-blade-component="icon-button"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="Svgweb__StyledSvg-vcmjs8-0"
+            data-blade-component="icon"
+            fill="none"
+            height="12px"
+            viewBox="0 0 24 24"
+            width="12px"
+          >
+            <path
+              d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
+              data-blade-component="svg-path"
+              fill="currentColor"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="BaseBox-bmPWx ghxtYm"
+        data-blade-component="box"
       >
-        <svg
-          aria-hidden="true"
-          class="Svgweb__StyledSvg-vcmjs8-0"
-          data-blade-component="icon"
-          fill="none"
-          height="12px"
-          viewBox="0 0 24 24"
-          width="12px"
+        <p
+          class="StyledBaseText-dVBfTO haBWCr"
+          data-blade-component="text"
+        >
+          in:User
+        </p>
+        <button
+          aria-label="Close in:User tag"
+          class="StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 gvuEeM"
+          data-blade-component="icon-button"
+          type="button"
         >
-          <path
-            d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
-            data-blade-component="svg-path"
-            fill="currentColor"
-          />
-        </svg>
-      </button>
+          <svg
+            aria-hidden="true"
+            class="Svgweb__StyledSvg-vcmjs8-0"
+            data-blade-component="icon"
+            fill="none"
+            height="12px"
+            viewBox="0 0 24 24"
+            width="12px"
+          >
+            <path
+              d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
+              data-blade-component="svg-path"
+              fill="currentColor"
+            />
+          </svg>
+        </button>
+      </div>
     </div>
   </div>
 </div>