Skip to content

Commit

Permalink
chore: Add the dark variant to HeaderFirstLevel for retrocompatibility (
Browse files Browse the repository at this point in the history 
#102)

## Short description
This PR includes the dark variant of header first level for
retrocompatibility puropse

## How to test
Example app > HeaderFirstLevel page

<img height="600"
src="https://github.com/pagopa/io-app-design-system/assets/3959405/6a8d3178-ab0a-409e-849d-755c1b6a1e54"/>

---------

Co-authored-by: Damiano Plebani <[email protected]>
  • Loading branch information
@CrisTofani @dmnplb
CrisTofani and dmnplb authored Oct 13, 2023
1 parent 6803ab8 commit 2e625e4
Show file tree
Hide file tree
Showing 4 changed files with 100 additions and 75 deletions.
138 changes: 69 additions & 69 deletions example/ios/ExampleApp/Info.plist
View file
Original file line number Diff line number Diff line change
@@ -1,73 +1,73 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>CFBundleDevelopmentRegion</key>
<string>en</string>
<key>CFBundleDisplayName</key>
<string>ExampleApp</string>
<key>CFBundleExecutable</key>
<string>$(EXECUTABLE_NAME)</string>
<key>CFBundleIdentifier</key>
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
<key>CFBundleInfoDictionaryVersion</key>
<string>6.0</string>
<key>CFBundleName</key>
<string>$(PRODUCT_NAME)</string>
<key>CFBundlePackageType</key>
<string>APPL</string>
<key>CFBundleShortVersionString</key>
<string>$(MARKETING_VERSION)</string>
<key>CFBundleSignature</key>
<string>????</string>
<key>CFBundleVersion</key>
<string>$(CURRENT_PROJECT_VERSION)</string>
<key>LSRequiresIPhoneOS</key>
<true/>
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
<key>NSLocationWhenInUseUsageDescription</key>
<string/>
<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
<key>UIRequiredDeviceCapabilities</key>
<array>
<string>armv7</string>
</array>
<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
<key>CADisableMinimumFrameDurationOnPhone</key>
<true/>
<key>UIAppFonts</key>
<array>
<string>TitilliumWeb-Black.ttf</string>
<string>TitilliumWeb-Bold.ttf</string>
<string>TitilliumWeb-BoldItalic.ttf</string>
<string>TitilliumWeb-ExtraLight.ttf</string>
<string>TitilliumWeb-ExtraLightItalic.ttf</string>
<string>TitilliumWeb-Italic.ttf</string>
<string>TitilliumWeb-Light.ttf</string>
<string>TitilliumWeb-LightItalic.ttf</string>
<string>TitilliumWeb-Regular.ttf</string>
<string>TitilliumWeb-SemiBold.ttf</string>
<string>TitilliumWeb-SemiBoldItalic.ttf</string>
<string>ReadexPro-Regular.ttf</string>
<string>DMMono-Medium.ttf</string>
</array>
</dict>
<dict>
<key>CFBundleDevelopmentRegion</key>
<string>en</string>
<key>CFBundleDisplayName</key>
<string>ExampleApp</string>
<key>CFBundleExecutable</key>
<string>$(EXECUTABLE_NAME)</string>
<key>CFBundleIdentifier</key>
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
<key>CFBundleInfoDictionaryVersion</key>
<string>6.0</string>
<key>CFBundleName</key>
<string>$(PRODUCT_NAME)</string>
<key>CFBundlePackageType</key>
<string>APPL</string>
<key>CFBundleShortVersionString</key>
<string>$(MARKETING_VERSION)</string>
<key>CFBundleSignature</key>
<string>????</string>
<key>CFBundleVersion</key>
<string>$(CURRENT_PROJECT_VERSION)</string>
<key>LSRequiresIPhoneOS</key>
<true/>
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
<key>NSLocationWhenInUseUsageDescription</key>
<string/>
<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
<key>UIRequiredDeviceCapabilities</key>
<array>
<string>armv7</string>
</array>
<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
<key>UIViewControllerBasedStatusBarAppearance</key>
<true/>
<key>CADisableMinimumFrameDurationOnPhone</key>
<true/>
<key>UIAppFonts</key>
<array>
<string>TitilliumWeb-Black.ttf</string>
<string>TitilliumWeb-Bold.ttf</string>
<string>TitilliumWeb-BoldItalic.ttf</string>
<string>TitilliumWeb-ExtraLight.ttf</string>
<string>TitilliumWeb-ExtraLightItalic.ttf</string>
<string>TitilliumWeb-Italic.ttf</string>
<string>TitilliumWeb-Light.ttf</string>
<string>TitilliumWeb-LightItalic.ttf</string>
<string>TitilliumWeb-Regular.ttf</string>
<string>TitilliumWeb-SemiBold.ttf</string>
<string>TitilliumWeb-SemiBoldItalic.ttf</string>
<string>ReadexPro-Regular.ttf</string>
<string>DMMono-Medium.ttf</string>
</array>
</dict>
</plist>
2 changes: 2 additions & 0 deletions example/src/navigation/navigator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,6 +194,8 @@ const AppNavigator = () => (
name={APP_ROUTES.COMPONENTS.HEADER_FIRST_LEVEL.route}
component={HeaderFirstLevelScreen}
options={{
statusBarTranslucent: true,
statusBarStyle: "light",
headerTitle: APP_ROUTES.COMPONENTS.HEADER_FIRST_LEVEL.title,
headerBackTitleVisible: false
}}
Expand Down
1 change: 1 addition & 0 deletions example/src/pages/HeaderFirstLevel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export const HeaderFirstLevelScreen = () => {
navigation.setOptions({
header: () => (
<HeaderFirstLevel
backgroundColor="dark"
title={"Pagina"}
type="singleAction"
firstAction={{
Expand Down
34 changes: 28 additions & 6 deletions src/components/layout/HeaderFirstLevel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import { ActionProp } from "./common";

type CommonProps = WithTestID<{
title: string;
// This Prop will be removed once all the screens on the first level routing will be refactored
backgroundColor?: "light" | "dark";
}>;

interface Base extends CommonProps {
Expand Down Expand Up @@ -42,7 +44,8 @@ interface ThreeActions extends CommonProps {

export type HeaderFirstLevel = Base | OneAction | TwoActions | ThreeActions;

const HEADER_BG_COLOR: IOColors = "white";
const HEADER_BG_COLOR_LIGHT: IOColors = "white";
const HEADER_BG_COLOR_DARK: IOColors = "bluegrey";

const styles = StyleSheet.create({
headerInner: {
Expand All @@ -59,6 +62,7 @@ export const HeaderFirstLevel = ({
title,
type,
testID,
backgroundColor = "light",
firstAction,
secondAction,
thirdAction
Expand All @@ -69,32 +73,50 @@ export const HeaderFirstLevel = ({
<View
style={{
paddingTop: insets.top,
backgroundColor: IOColors[HEADER_BG_COLOR]
backgroundColor:
backgroundColor === "light"
? IOColors[HEADER_BG_COLOR_LIGHT]
: IOColors[HEADER_BG_COLOR_DARK]
}}
accessibilityRole="header"
testID={testID}
>
<View style={styles.headerInner}>
<H3 style={{ flexShrink: 1 }} numberOfLines={1}>
<H3
style={{ flexShrink: 1 }}
numberOfLines={1}
color={backgroundColor === "dark" ? "white" : undefined}
>
{title}
</H3>
<View style={[IOStyles.row, { flexShrink: 0 }]}>
{type === "threeActions" && (
<>
<IconButton {...thirdAction} color="neutral" />
<IconButton
{...thirdAction}
color={backgroundColor === "dark" ? "contrast" : "neutral"}
/>
{/* Ideally, with the "gap" flex property,
we can get rid of these ugly constructs */}
<HSpacer size={16} />
</>
)}
{(type === "twoActions" || type === "threeActions") && (
<>
<IconButton {...secondAction} color="neutral" />
<IconButton
{...secondAction}
color={backgroundColor === "dark" ? "contrast" : "neutral"}
/>
{/* Same as above */}
<HSpacer size={16} />
</>
)}
{type !== "base" && <IconButton {...firstAction} color="neutral" />}
{type !== "base" && (
<IconButton
{...firstAction}
color={backgroundColor === "dark" ? "contrast" : "neutral"}
/>
)}
</View>
</View>
</View>
Expand Down

0 comments on commit 2e625e4

Please sign in to comment.