diff --git a/example/src/pages/Advice.tsx b/example/src/pages/Advice.tsx index 6f939b51..3170adff 100644 --- a/example/src/pages/Advice.tsx +++ b/example/src/pages/Advice.tsx @@ -133,7 +133,6 @@ const renderBanner = () => ( ( ( ( ( ( > ( ( labelClose="Nascondi questo banner" /> - - - - - - - ))} diff --git a/src/components/banner/Banner.tsx b/src/components/banner/Banner.tsx index 2e1c2d58..499c6cbe 100644 --- 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; @@ -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 = ({ )} - + {onClose && labelClose && ( diff --git a/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap b/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap index 30adbaef..aca8c436 100644 --- 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 index 0c461395..311adb56 100644 --- 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( { const advice = TestRendererWithExperimentalEnabledContextProvider( ` component export type IOBannerSpacing = Extract; export const IOBannerBigSpacing: IOBannerSpacing = 16; -export const IOBannerSmallHSpacing: IOBannerSpacing = 16; -export const IOBannerSmallVSpacing: IOBannerSpacing = 12; // Values used in the `` component export type IOTagSpacing = Extract; diff --git a/stories/components/banner/Banner.stories.tsx b/stories/components/banner/Banner.stories.tsx index 643f5fe6..150a7014 100644 --- 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; export const Primary: Partial = { render: args => { - const { size, color, title, content, pictogramName } = args; + const { color, title, content, pictogramName } = args; const viewRef = React.createRef(); return (