Remove size from Banner

pagopa · Dec 17, 2024 · 8c5fbbe · 8c5fbbe
1 parent ad30a4a
commit 8c5fbbe
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 72 deletions.
diff --git a/example/src/pages/Advice.tsx b/example/src/pages/Advice.tsx
@@ -133,7 +133,6 @@ const renderBanner = () => (
         <ComponentViewerBox name={`Banner · Big size, ${color} variant`}>
           <Banner
             color={color}
-            size="big"
             title="Banner title"
             pictogramName="charity"
             action="Action text"
@@ -142,7 +141,6 @@ const renderBanner = () => (
           <VSpacer size={24} />
           <Banner
             color={color}
-            size="big"
             content={
               "Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
             }
@@ -151,7 +149,6 @@ const renderBanner = () => (
           <VSpacer size={24} />
           <Banner
             color={color}
-            size="big"
             content={
               "Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
             }
@@ -162,7 +159,6 @@ const renderBanner = () => (
           <VSpacer size={24} />
           <Banner
             color={color}
-            size="big"
             title="Banner title"
             content={
               "Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
@@ -172,7 +168,6 @@ const renderBanner = () => (
           <VSpacer size={24} />
           <Banner
             color={color}
-            size="big"
             title="Banner title"
             content={
               "Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
@@ -187,7 +182,6 @@ const renderBanner = () => (
         >
           <Banner
             color={color}
-            size="big"
             title="Banner title"
             content={
               "Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
@@ -199,7 +193,6 @@ const renderBanner = () => (
           <VSpacer size={24} />
           <Banner
             color={color}
-            size="big"
             content={
               "Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
             }
@@ -210,39 +203,6 @@ const renderBanner = () => (
             labelClose="Nascondi questo banner"
           />
         </ComponentViewerBox>
-        <ComponentViewerBox name={`Banner · Small size, ${color} variant`}>
-          <Banner
-            color={color}
-            size="small"
-            title="Banner title"
-            content={
-              "Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
-            }
-            pictogramName="charity"
-            action="Dona anche tu"
-            onPress={onLinkPress}
-          />
-          <VSpacer size={24} />
-          <Banner
-            color={color}
-            size="small"
-            content={
-              "Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
-            }
-            action="Dona anche tu"
-            onPress={onLinkPress}
-            pictogramName="charity"
-          />
-          <VSpacer size={24} />
-          <Banner
-            color={color}
-            size="small"
-            content={
-              "Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
-            }
-            pictogramName="charity"
-          />
-        </ComponentViewerBox>
       </React.Fragment>
     ))}
   </>

diff --git a/src/components/banner/Banner.tsx b/src/components/banner/Banner.tsx
@@ -11,8 +11,6 @@ import Animated from "react-native-reanimated";
 import {
   IOBannerBigSpacing,
   IOBannerRadius,
-  IOBannerSmallHSpacing,
-  IOBannerSmallVSpacing,
   IOStyles,
   useIOExperimentalDesign,
   useIOTheme,
@@ -31,24 +29,22 @@ import { VSpacer } from "../spacer";
 import { BodySmall, buttonTextFontSize, H6, IOText } from "../typography";
 
 /* Styles */
-const sizePictogramBig: IOPictogramSizeScale = 80;
-const sizePictogramSmall: IOPictogramSizeScale = 64;
+const sizePictogram: IOPictogramSizeScale = 80;
 const closeButtonDistanceFromEdge: number = 6;
 const closeButtonOpacity = 0.6;
-const sizeBigPadding = IOBannerBigSpacing;
-const sizeSmallHPadding = IOBannerSmallHSpacing;
-const sizeSmallVPadding = IOBannerSmallVSpacing;
+const bannerPadding = IOBannerBigSpacing;
 
 const styles = StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "flex-start",
     alignContent: "center",
+    padding: bannerPadding,
     borderRadius: IOBannerRadius,
     borderCurve: "continuous"
   },
   bleedPictogram: {
-    marginRight: -sizeBigPadding
+    marginRight: -bannerPadding
   },
   closeIconButton: {
     position: "absolute",
@@ -61,7 +57,6 @@ const styles = StyleSheet.create({
 /* Component Types */
 
 type BaseBannerProps = WithTestID<{
-  size: "big" | "small";
   color: "neutral" | "turquoise";
   pictogramName: IOPictogramsBleed;
   viewRef?: React.RefObject<View>;
@@ -137,7 +132,6 @@ const mapBackgroundColorDarkMode: Record<
 
 export const Banner = ({
   viewRef,
-  size,
   color,
   pictogramName,
   title,
@@ -168,9 +162,7 @@ export const Banner = ({
     backgroundColor:
       themeType === "dark"
         ? hexToRgba(IOColors[mapBackgroundColorDarkMode[color]], 0.1)
-        : IOColors[mapBackgroundColorLightMode[color]],
-    paddingVertical: size === "big" ? sizeBigPadding : sizeSmallVPadding,
-    paddingHorizontal: size === "big" ? sizeBigPadding : sizeSmallHPadding
+        : IOColors[mapBackgroundColorLightMode[color]]
   };
 
   /* Generates a complete fallbackAccessibilityLabel by concatenating the title, content, and action
@@ -233,10 +225,7 @@ export const Banner = ({
         )}
       </View>
       <View style={[styles.bleedPictogram, IOStyles.selfCenter]}>
-        <PictogramBleed
-          name={pictogramName}
-          size={size === "big" ? sizePictogramBig : sizePictogramSmall}
-        />
+        <PictogramBleed name={pictogramName} size={sizePictogram} />
       </View>
       {onClose && labelClose && (
         <View style={styles.closeIconButton}>

diff --git a/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap b/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap
@@ -41,11 +41,10 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
           "borderCurve": "continuous",
           "borderRadius": 8,
           "flexDirection": "row",
+          "padding": 16,
         },
         {
           "backgroundColor": "#F4F5F8",
-          "paddingHorizontal": 16,
-          "paddingVertical": 16,
         },
         {
           "transform": [
@@ -320,11 +319,10 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
           "borderCurve": "continuous",
           "borderRadius": 8,
           "flexDirection": "row",
+          "padding": 16,
         },
         {
           "backgroundColor": "#F4F5F8",
-          "paddingHorizontal": 16,
-          "paddingVertical": 16,
         },
         {
           "transform": [

diff --git a/src/components/banner/__test__/banner.test.tsx b/src/components/banner/__test__/banner.test.tsx
@@ -13,7 +13,6 @@ describe("Test Banner Components", () => {
     const advice = TestRenderer.create(
       <Banner
         color="neutral"
-        size="big"
         title="Banner title"
         pictogramName="charity"
         action="Action text"
@@ -30,7 +29,6 @@ describe("Test Banner Components - Experimental Enabled", () => {
     const advice = TestRendererWithExperimentalEnabledContextProvider(
       <Banner
         color="neutral"
-        size="big"
         title="Banner title"
         pictogramName="charity"
         action="Action text"

diff --git a/src/core/IOSpacing.ts b/src/core/IOSpacing.ts
@@ -30,8 +30,6 @@ export type IOAlertSpacing = (typeof IOAlertSpacing)[number];
 // Values used in the `<Banner>` component
 export type IOBannerSpacing = Extract<IOSpacingScale, 12 | 16>;
 export const IOBannerBigSpacing: IOBannerSpacing = 16;
-export const IOBannerSmallHSpacing: IOBannerSpacing = 16;
-export const IOBannerSmallVSpacing: IOBannerSpacing = 12;
 
 // Values used in the `<Tag>` component
 export type IOTagSpacing = Extract<IOSpacingScale, 6 | 8>;

diff --git a/stories/components/banner/Banner.stories.tsx b/stories/components/banner/Banner.stories.tsx
@@ -10,10 +10,6 @@ const meta = {
   title: "Components/Banner/Banner",
   component: Banner,
   argTypes: {
-    size: {
-      options: ["small", "big"],
-      control: { type: "radio" }
-    },
     color: {
       options: ["neutral", "turquoise"],
       control: { type: "radio" }
@@ -32,7 +28,6 @@ const meta = {
   args: {
     title: "Banner Title",
     content: "Banner content",
-    size: "big",
     pictogramName: "charity",
     color: "neutral"
   },
@@ -51,13 +46,12 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Partial<Story> = {
   render: args => {
-    const { size, color, title, content, pictogramName } = args;
+    const { color, title, content, pictogramName } = args;
     const viewRef = React.createRef<View>();
     return (
       <Banner
         content={content}
         title={title}
-        size={size}
         color={color}
         pictogramName={pictogramName}
         viewRef={viewRef}