fix: set stickerProps default value and use that instead make it nullable so stickerProps={undefined} can be passed to render no sticker

Author: Carlos Lancha

packages/clay-card/src/CardWithInfo.tsx

@@ -93,11 +93,9 @@ interface IProps extends React.BaseHTMLAttributes<HTMLDivElement> {
 	/**
 	 * Values used in displaying bottom-left icon
 	 */
-	stickerProps?:
-		| (IClayStickerProps & {
-				content?: React.ReactNode;
-		  })
-		| null;
+	stickerProps?: IClayStickerProps & {
+		content?: React.ReactNode;
+	};
 
 	/**
 	 * Name of icon
@@ -125,7 +123,7 @@ export const ClayCardWithInfo: React.FunctionComponent<IProps> = ({
 	onSelectChange,
 	selected = false,
 	spritemap,
-	stickerProps,
+	stickerProps = {},
 	symbol,
 	title,
 	...otherProps
@@ -171,22 +169,20 @@ export const ClayCardWithInfo: React.FunctionComponent<IProps> = ({
 				/>
 			)}
 
-			{stickerProps !== null && (
+			{stickerProps && (
 				<ClaySticker
 					displayType={
-						stickerProps && stickerProps.displayType
+						stickerProps.displayType
 							? stickerProps.displayType
 							: 'primary'
 					}
 					position="bottom-left"
 					{...stickerProps}
 				>
-					{stickerProps ? (
-						stickerProps.children ? (
-							stickerProps.children
-						) : (
-							stickerProps.content
-						)
+					{stickerProps.children ? (
+						stickerProps.children
+					) : stickerProps.content ? (
+						stickerProps.content
 					) : (
 						<ClayIcon
 							spritemap={spritemap}

packages/clay-card/src/__tests__/__snapshots__/index.tsx.snap

@@ -2321,7 +2321,16 @@ exports[`ClayCardWithInfo renders with custom sticker 1`] = `
       >
         <span
           class="sticker-overlay"
-        />
+        >
+          <svg
+            class="lexicon-icon lexicon-icon-document-default"
+            role="presentation"
+          >
+            <use
+              xlink:href="/some/spritemap#document-default"
+            />
+          </svg>
+        </span>
       </span>
     </div>
     <div
@@ -2582,6 +2591,22 @@ exports[`ClayCardWithInfo renders with no sticker 1`] = `
                 />
               </svg>
             </div>
+            <span
+              class="sticker sticker-primary sticker-bottom-left"
+            >
+              <span
+                class="sticker-overlay"
+              >
+                <svg
+                  class="lexicon-icon lexicon-icon-document-default"
+                  role="presentation"
+                >
+                  <use
+                    xlink:href="/path/to/some/resource.svg#document-default"
+                  />
+                </svg>
+              </span>
+            </span>
           </div>
         </label>
       </div>

packages/clay-card/src/__tests__/index.tsx

@@ -850,21 +850,6 @@ describe('ClayCardWithInfo', () => {
 		expect(container).toMatchSnapshot();
 	});
 
-	it('renders with no sticker', () => {
-		const {container} = render(
-			<ClayCardWithInfo
-				href="#"
-				onSelectChange={jest.fn()}
-				selected={false}
-				spritemap="/path/to/some/resource.svg"
-				stickerProps={null}
-				title="Foo Bar"
-			/>
-		);
-
-		expect(container).toMatchSnapshot();
-	});
-
 	it('renders as file card specifying the displayType', () => {
 		const {container} = render(
 			<ClayCardWithInfo
@@ -1020,6 +1005,21 @@ describe('ClayCardWithInfo', () => {
 		expect(container).toMatchSnapshot();
 	});
 
+	it('renders with no sticker', () => {
+		const {container} = render(
+			<ClayCardWithInfo
+				href="#"
+				onSelectChange={jest.fn()}
+				selected={false}
+				spritemap="/path/to/some/resource.svg"
+				stickerProps={undefined}
+				title="Foo Bar"
+			/>
+		);
+
+		expect(container).toMatchSnapshot();
+	});
+
 	it('clicking dropdown item calls callback and not call onSelectChange', () => {
 		const onDropDownItemClick = jest.fn();
 		const onSelectChangeFn = jest.fn();