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 (