fix: hide the cross icon when onClose is undefined (#116)

* fix: hide the cross icon when onClose is undefined * update version from v0.0.35 to v0.0.36 * change: add dismissAction prop instead of onClose * fix: comments for MR --------- Co-authored-by: sami <sami.anki@getluko.com>
GetLuko · Sep 20, 2023 · 83b2be5 · 83b2be5
1 parent a68b37f
commit 83b2be5
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 28 deletions.
diff --git a/packages/sandbox/e2e/android/screenshots/CardCarousel.png b/packages/sandbox/e2e/android/screenshots/CardCarousel.png
diff --git a/packages/sandbox/e2e/ios/screenshots/CardCarousel.png b/packages/sandbox/e2e/ios/screenshots/CardCarousel.png
diff --git a/packages/sandbox/src/app/sandbox/docs/card-carousel.doc.tsx b/packages/sandbox/src/app/sandbox/docs/card-carousel.doc.tsx
@@ -3,15 +3,23 @@ import React from 'react';
 
 import { DocList } from '../components/DocList';
 
+const DISMISS_ACTION = {
+  accessibilityLabel: 'close',
+  onDismiss: () => console.log('onDismiss pressed'),
+};
+
 const docs = [
   <CardCarousel
+    key={0}
     size="large"
     title="Test title"
     description="description bla bla bla bla bla bla bla blla bla bla bla bla bla bla"
     tag={{ text: 'Card 1', iconName: 'Backpack' }}
     media={{ uri: 'https://legacy.reactjs.org/logo-og.png' }}
+    dismissAction={DISMISS_ACTION}
   />,
   <CardCarousel
+    key={1}
     size="large"
     title="Test title"
     description="description bla bla bla bla bla bla bla blla bla bla bla bla bla bla"
@@ -20,16 +28,26 @@ const docs = [
       uri: 'https://dfstudio-d420.kxcdn.com/wordpress/wp-content/uploads/2019/06/digital_camera_photo-1080x675.jpg',
     }}
     isLoading
+    dismissAction={DISMISS_ACTION}
+  />,
+  <CardCarousel
+    key={2}
+    title=""
+    size="large"
+    isSkeleton
+    dismissAction={DISMISS_ACTION}
   />,
-  <CardCarousel title="" size="large" isSkeleton />,
   <CardCarousel
+    key={3}
     size="small"
     title="Test title"
     description="description bla bla bla bla bla bla bla blla bla bla bla bla bla bla"
     iconName="Backpack"
     media={{ uri: 'https://legacy.reactjs.org/logo-og.png' }}
+    dismissAction={DISMISS_ACTION}
   />,
   <CardCarousel
+    key={4}
     size="small"
     title="Test title"
     description="description bla bla bla bla bla bla bla blla bla bla bla bla bla bla"
@@ -38,8 +56,15 @@ const docs = [
     media={{
       uri: 'https://dfstudio-d420.kxcdn.com/wordpress/wp-content/uploads/2019/06/digital_camera_photo-1080x675.jpg',
     }}
+    dismissAction={DISMISS_ACTION}
+  />,
+  <CardCarousel
+    key={5}
+    title=""
+    size="small"
+    isSkeleton
+    dismissAction={DISMISS_ACTION}
   />,
-  <CardCarousel title="" size="small" isSkeleton />,
 ];
 
 export const CardCarouselSandbox = () => <DocList docs={docs} />;

diff --git a/packages/streamline/package.json b/packages/streamline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@getluko/streamline",
-  "version": "0.0.35",
+  "version": "0.0.36",
   "author": "luko",
   "description": "Luko Design System using react-native for iOS and Android",
   "main": "dist/packages/streamline/index.js",

diff --git a/packages/streamline/src/components/cards/card-carousel/card-carousel.spec.tsx b/packages/streamline/src/components/cards/card-carousel/card-carousel.spec.tsx
@@ -20,6 +20,10 @@ describe('CardCarousel', () => {
     testID: 'card-carousel',
     accessibilityLabel: 'Card Carousel',
     isSkeleton: false,
+    dismissAction: {
+      accessibilityLabel: 'close',
+      onDismiss: jest.fn(),
+    },
   };
 
   it('renders properly', () => {

diff --git a/packages/streamline/src/components/cards/card-carousel/card-carousel.tsx b/packages/streamline/src/components/cards/card-carousel/card-carousel.tsx
@@ -24,6 +24,7 @@ export const CardCarousel = (props: CardCarouselProps) => {
     size,
     title,
     description,
+    dismissAction,
     onPress,
     onPressIn,
     onPressOut,
@@ -32,7 +33,6 @@ export const CardCarousel = (props: CardCarouselProps) => {
     isLoading,
     testID,
     media,
-    onClose,
   } = props;
 
   const isSmall = size === 'small';
@@ -41,6 +41,10 @@ export const CardCarousel = (props: CardCarouselProps) => {
 
   const [handlePress, isResolving] = usePress({ onPress: onPress });
 
+  const [handleOnDismiss, isDismissing] = usePress({
+    onPress: dismissAction?.onDismiss,
+  });
+
   if (isSkeleton) return <CardCarouselSkeleton size={size} testID={testID} />;
 
   return (
@@ -67,31 +71,37 @@ export const CardCarousel = (props: CardCarouselProps) => {
         style={StyleSheet.absoluteFillObject}
       />
       <Box
-        flexDirection="row-reverse"
+        flexDirection="row"
         justifyContent="space-between"
         alignItems="center"
       >
-        <ButtonIcon
-          testID={`${testID}-close-button`}
-          isLoading={isLoading || isResolving}
-          iconName="Cross"
-          accessibilityLabel="close"
-          appearance="light"
-          onPress={onClose}
-          withContainer
-        />
+        <Box>
+          {isSmall && props.iconName ? (
+            <Icon iconName={props.iconName} color="PURE_WHITE_1000" />
+          ) : null}
 
-        {size === 'large' && props.tag ? (
-          <Tag
-            text={props.tag.text}
-            iconName={props.tag.iconName}
-            appearance="dark"
-          />
-        ) : null}
+          {!isSmall && props.tag ? (
+            <Tag
+              text={props.tag.text}
+              iconName={props.tag.iconName}
+              appearance="dark"
+            />
+          ) : null}
+        </Box>
 
-        {size === 'small' && props.iconName ? (
-          <Icon iconName={props.iconName} color="PURE_WHITE_1000" />
-        ) : null}
+        <Box>
+          {dismissAction ? (
+            <ButtonIcon
+              testID={`${testID}-close-button`}
+              isLoading={isDismissing || isLoading}
+              iconName="Cross"
+              accessibilityLabel={dismissAction.accessibilityLabel}
+              appearance="light"
+              onPress={handleOnDismiss}
+              withContainer
+            />
+          ) : null}
+        </Box>
       </Box>
 
       <Box>

diff --git a/packages/streamline/src/components/cards/card-carousel/card-carousel.types.ts b/packages/streamline/src/components/cards/card-carousel/card-carousel.types.ts
@@ -4,12 +4,12 @@ import { CardHeaderProps } from '../../../primitives/card/card-header/card-heade
 import { CardProps } from '../../../primitives/card/card.types';
 import { IconsName, Size } from '../../../primitives/icon/icon.types';
 
-type DefaultProps = Pick<
+export type DefaultProps = Pick<
   CardProps,
   'accessibilityLabel' | 'testID' | 'onPress' | 'onPressIn' | 'onPressOut'
 > &
   Omit<CardHeaderProps, 'colors' | 'title' | 'iconName'> & {
-    onClose?: () => void;
+    dismissAction?: DismissAction;
     /**
      * Handle the close button press event
      */
@@ -44,12 +44,17 @@ type DefaultProps = Pick<
     isSkeleton?: boolean;
   };
 
-type SmallCardCarouselProps = DefaultProps & {
+export type DismissAction = {
+  accessibilityLabel: string;
+  onDismiss: () => unknown;
+};
+
+export type SmallCardCarouselProps = DefaultProps & {
   size: 'small';
   iconName?: IconsName;
 };
 
-type LargeCardCarouselProps = DefaultProps & {
+export type LargeCardCarouselProps = DefaultProps & {
   size: 'large';
   tag?: {
     text: string;