Skip to content

Commit

Permalink
Added connectivity status button
Browse files Browse the repository at this point in the history
  • Loading branch information
@procivisAG
procivisAG committed Oct 10, 2024
1 parent 851fc32 commit 36c2b5e
Show file tree
Hide file tree
Showing 6 changed files with 236 additions and 2 deletions.
5 changes: 3 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@procivis/one-react-native-components",
"version": "0.1.58",
"version": "0.1.59",
"author": "Procivis AG (https://procivis.ch)",
"license": "Apache-2.0",
"description": "Common Procivis ONE UI components for react-native",
Expand Down Expand Up @@ -235,5 +235,6 @@
},
"resolutions": {
"@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.cd77847.0"
}
},
"packageManager": "[email protected]+sha1.1959a18351b811cdeedbd484a8f86c3cc3bbaf72"
}
34 changes: 34 additions & 0 deletions src/buttons/connectivity-button.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import type { ComponentMeta, ComponentStory } from '@storybook/react';
import React from 'react';

import ConnectivityButton, { ConnectivityTransport } from './connectivity-button';

const Basic: ComponentStory<typeof ConnectivityButton> = (args) => <ConnectivityButton {...args} />;

Basic.args = {
available: true,
disabled: false,
status: true,
title: 'Connectivity message',
transport: ConnectivityTransport.Internet,
};

export { Basic as ConnectivityButton };

export default {
title: 'base/button/Connectivity Button',
component: ConnectivityButton,
argTypes: {
transport: {
options: [ConnectivityTransport.Internet, ConnectivityTransport.Bluetooth, ConnectivityTransport.All],
control: { type: 'radio' },
},
onPress: { action: 'onPress' },
},
parameters: {
design: {
type: 'figma',
url: 'https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=4237-32033&node-type=frame&t=TJ4R3WHLQ1CsXNeT-0',
},
},
} as ComponentMeta<typeof ConnectivityButton>;
84 changes: 84 additions & 0 deletions src/buttons/connectivity-button.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
import React, { FC } from 'react';
import { StyleSheet, View } from 'react-native';

import { TouchableHighlight } from '../accessibility';
import {
ConnectivityBluetoothOffIcon,
ConnectivityBluetoothOnIcon,
ConnectivityInternetOffIcon,
ConnectivityInternetOnIcon,
ConnectivityStatusIcon,
} from '../icons/connectivity';
import { Typography } from '../text';
import { useAppColorScheme } from '../theme';

export enum ConnectivityTransport {
Internet = 'Internet',
Bluetooth = 'Bluetooth',
All = 'All',
}

export type ConnectivityButtonProps = {
available: boolean;
disabled?: boolean;
onPress?: () => void;
status?: boolean;
title?: string;
transport: ConnectivityTransport;
};

const ConnectivityButton: FC<ConnectivityButtonProps> = ({
available,
disabled,
onPress,
status,
title,
transport,
}) => {
const colorScheme = useAppColorScheme();

const backgroundColor = status === undefined ? colorScheme.grayDark : colorScheme.white;
const opacity = disabled ? 0.7 : 1.0;
const icons = (
<View style={styles.icons}>
{transport !== ConnectivityTransport.Bluetooth &&
(available ? <ConnectivityInternetOnIcon /> : <ConnectivityInternetOffIcon />)}
{transport !== ConnectivityTransport.Internet &&
(available ? <ConnectivityBluetoothOnIcon /> : <ConnectivityBluetoothOffIcon />)}
</View>
);
return (
<TouchableHighlight onPress={onPress} style={styles.button}>
<View style={[styles.container, { backgroundColor, opacity }]}>
{icons}
{title && (
<Typography color={colorScheme.text} preset="s">
{title}
</Typography>
)}
{status !== undefined && <ConnectivityStatusIcon status={status} />}
</View>
</TouchableHighlight>
);
};

const styles = StyleSheet.create({
button: {
borderRadius: 20,
overflow: 'hidden',
},
container: {
alignItems: 'center',
flexDirection: 'row',
height: 40,
paddingHorizontal: 12,
paddingVertical: 9,
},
icons: {
alignItems: 'center',
flexDirection: 'row',
gap: 5,
},
});

export default ConnectivityButton;
4 changes: 4 additions & 0 deletions src/buttons/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import BackButton, { BackButtonIcon, BackButtonProps } from './back-button';
import { Button, ButtonProps, ButtonType } from './button';
import ConnectivityButton, { ConnectivityButtonProps, ConnectivityTransport } from './connectivity-button';
import FilterButton, { FilterButtonProps } from './filter-button';
import GhostButton, { GhostButtonProps } from './ghost-button';
import ScanButton, { ScanButtonProps } from './scan-button';
Expand All @@ -11,6 +12,9 @@ export {
Button,
ButtonProps,
ButtonType,
ConnectivityButton,
ConnectivityButtonProps,
ConnectivityTransport,
FilterButton,
FilterButtonProps,
GhostButton,
Expand Down
110 changes: 110 additions & 0 deletions src/icons/connectivity.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
import React, { FC } from 'react';
import Svg, { G, Path } from 'react-native-svg';

import { useAppColorScheme } from '../theme';

export type ConnectivityStatusIconProps = {
status: boolean;
};

// https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=415-5402&node-type=frame&t=KNaBp0XLna0p48rq-0
export const ConnectivityStatusIcon: FC<ConnectivityStatusIconProps> = ({ status }) => {
const colorScheme = useAppColorScheme();
const color = status ? colorScheme.success : colorScheme.error;
return (
<Svg fill="none" height={16} viewBox="0 0 16 16" width={16}>
<G opacity={0.1}>
<Path
d="M7.997 14c-.82 0-1.593-.157-2.316-.47a6.05 6.05 0 01-1.916-1.296 6.184 6.184 0 01-1.295-1.916A5.77 5.77 0 012 8c0-.82.157-1.593.47-2.318A6.15 6.15 0 015.675 2.47 5.762 5.762 0 017.99 2c.825 0 1.599.157 2.322.47a6.129 6.129 0 011.916 1.302c.554.55.987 1.186 1.3 1.91A5.77 5.77 0 0114 8a5.77 5.77 0 01-.47 2.318 6.134 6.134 0 01-3.216 3.212 5.762 5.762 0 01-2.317.47z"
fill={color}
/>
<Path
d="M3.055 12.939l.003.002a7.048 7.048 0 002.227 1.507c.854.37 1.761.552 2.712.552.951 0 1.858-.182 2.712-.552a7.133 7.133 0 003.738-3.733A6.77 6.77 0 0015 8a6.77 6.77 0 00-.553-2.715 7.063 7.063 0 00-1.512-2.222 7.13 7.13 0 00-2.224-1.51A6.776 6.776 0 007.991 1c-.951 0-1.86.183-2.714.553h0-.002a7.15 7.15 0 00-3.722 3.732l.917.397-.917-.397A6.77 6.77 0 001 8c0 .952.183 1.86.553 2.715l.917-.397-.917.397c.362.837.864 1.58 1.502 2.224z"
stroke={colorScheme.white}
strokeOpacity={0.2}
strokeWidth={2}
/>
</G>
<G opacity={0.2}>
<Path
d="M7.998 12a3.841 3.841 0 01-1.544-.314 4.033 4.033 0 01-1.277-.863 4.12 4.12 0 01-.863-1.278A3.847 3.847 0 014 8c0-.547.104-1.062.314-1.545A4.1 4.1 0 016.45 4.314C6.932 4.104 7.447 4 7.994 4c.55 0 1.066.105 1.548.314.483.209.909.498 1.277.867.37.367.658.791.867 1.274.21.483.314.998.314 1.545 0 .547-.104 1.062-.313 1.545a4.087 4.087 0 01-2.145 2.141c-.482.21-.997.314-1.544.314z"
fill={color}
/>
<Path
d="M4.467 11.527h0l.002.003c.46.46.991.819 1.59 1.075a4.841 4.841 0 001.94.395c.676 0 1.326-.13 1.939-.395a5.088 5.088 0 002.666-2.662A4.846 4.846 0 0013 8c0-.678-.13-1.33-.396-1.942a5.043 5.043 0 00-1.078-1.585A5.086 5.086 0 009.94 3.396 4.85 4.85 0 007.994 3c-.678 0-1.329.13-1.942.396h0-.001a5.1 5.1 0 00-1.582 1.078l.708.707-.708-.707a5.075 5.075 0 00-1.073 1.584A4.846 4.846 0 003 8c0 .678.13 1.33.396 1.942a5.121 5.121 0 001.07 1.585z"
stroke={colorScheme.white}
strokeOpacity={0.2}
strokeWidth={2}
/>
</G>
<Path
d="M7.999 10a1.92 1.92 0 01-.772-.157 2.016 2.016 0 01-1.07-1.07A1.923 1.923 0 016 8c0-.274.052-.531.157-.773a2.038 2.038 0 011.068-1.07A1.92 1.92 0 017.997 6c.275 0 .533.052.774.157a2.043 2.043 0 011.072 1.07c.105.242.157.5.157.773 0 .274-.052.531-.157.773a2.044 2.044 0 01-1.072 1.07A1.92 1.92 0 018 10z"
fill={color}
/>
<Path
d="M5.879 10.116h0l.002.002c.275.275.593.49.95.644.372.16.764.238 1.168.238.404 0 .797-.078 1.168-.238A3.045 3.045 0 0010.76 9.17C10.92 8.798 11 8.405 11 8c0-.405-.078-.798-.24-1.17a3.043 3.043 0 00-1.592-1.59A2.925 2.925 0 007.999 5a2.92 2.92 0 00-1.17.24h0-.002a3.05 3.05 0 00-.945.644l.707.707-.707-.707a3.037 3.037 0 00-.642.946C5.08 7.202 5 7.595 5 8c0 .405.078.798.24 1.17.153.354.366.672.639.946z"
stroke={colorScheme.white}
strokeOpacity={0.2}
strokeWidth={2}
/>
</Svg>
);
};

// https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=4236-31963&node-type=frame&t=YdbLaKqcnnWN4fBV-0
export const ConnectivityInternetOnIcon: FC = () => {
const colorScheme = useAppColorScheme();
return (
<Svg fill="none" height={20} viewBox="0 0 20 20" width={20}>
<Path
d="M2.744 9.542c0-.592.068-1.164.205-1.716a6.932 6.932 0 01.608-1.565c.264-.497.586-.95.964-1.36.132-.146.28-.22.444-.22a.506.506 0 01.417.185c.11.124.15.26.123.41a.866.866 0 01-.218.438 5.44 5.44 0 00-1.06 1.75 5.833 5.833 0 00-.37 2.078c0 .734.124 1.429.37 2.085.246.652.6 1.233 1.06 1.743a.866.866 0 01.218.438.466.466 0 01-.123.41.525.525 0 01-.417.191.615.615 0 01-.444-.225 6.615 6.615 0 01-1.32-2.12 6.994 6.994 0 01-.457-2.522zm2.878 0c0-.501.082-.98.246-1.435.164-.46.394-.875.69-1.244a.533.533 0 01.438-.233.54.54 0 01.437.185.44.44 0 01.116.403 1.11 1.11 0 01-.205.444c-.196.26-.346.55-.45.869a3.22 3.22 0 00-.158 1.011c0 .356.05.695.15 1.019.1.319.253.606.458.861.11.15.178.299.205.444a.44.44 0 01-.116.404.553.553 0 01-.875-.048 4.277 4.277 0 01-.936-2.68zm3.151 0a1.24 1.24 0 01.602-1.066c.186-.114.396-.171.628-.171.228 0 .433.057.616.17a1.222 1.222 0 01.608 1.067c0 .246-.066.47-.198.67a1.23 1.23 0 01-.506.438v6.145a.604.604 0 01-.144.424.463.463 0 01-.376.164.496.496 0 01-.382-.164.62.62 0 01-.144-.424V10.65a1.22 1.22 0 01-.513-.438 1.222 1.222 0 01-.191-.67zm3.794 2.728a.457.457 0 01-.123-.403c.032-.146.102-.295.212-.445.205-.255.357-.542.458-.861.1-.324.15-.663.15-1.019 0-.355-.052-.692-.157-1.011a2.97 2.97 0 00-.451-.869c-.11-.15-.18-.298-.212-.444a.457.457 0 01.123-.403.533.533 0 01.43-.185.54.54 0 01.445.233c.296.369.526.783.69 1.244.164.455.246.934.246 1.435a4.263 4.263 0 01-.936 2.68.553.553 0 01-.875.048zm2.05 1.948a.485.485 0 01-.13-.41.918.918 0 01.226-.438c.46-.51.814-1.091 1.06-1.743.246-.656.37-1.351.37-2.085 0-.733-.124-1.426-.37-2.078a5.438 5.438 0 00-1.06-1.75.918.918 0 01-.225-.437.484.484 0 01.13-.41.506.506 0 01.417-.185c.168 0 .316.073.444.219a6.705 6.705 0 011.565 2.926c.142.55.212 1.123.212 1.715 0 .884-.155 1.725-.465 2.523a6.517 6.517 0 01-1.312 2.119.6.6 0 01-.444.226.525.525 0 01-.417-.192z"
fill={colorScheme.text}
/>
</Svg>
);
};

// https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=4236-31963&node-type=frame&t=YdbLaKqcnnWN4fBV-0
export const ConnectivityInternetOffIcon: FC = () => {
const colorScheme = useAppColorScheme();
return (
<Svg fill="none" height={20} viewBox="0 0 20 20" width={20}>
<Path
d="M5.382 14.218a.525.525 0 01-.417.191.615.615 0 01-.444-.225 6.615 6.615 0 01-1.32-2.12 6.994 6.994 0 01-.457-2.522c0-.752.111-1.472.335-2.16a6.594 6.594 0 01.957-1.88l.8.8c-.315.46-.557.964-.725 1.51a5.837 5.837 0 00-.253 1.73c0 .734.123 1.429.37 2.085.245.652.598 1.233 1.059 1.743a.866.866 0 01.218.438.466.466 0 01-.123.41zm2.051-1.948a.553.553 0 01-.875-.048 4.277 4.277 0 01-.451-4.655l.854.854c-.072.173-.13.353-.17.54-.037.187-.055.38-.055.581 0 .356.05.695.15 1.019.1.319.253.606.458.861.11.15.178.299.205.444a.44.44 0 01-.116.404zm2.57 5.113a.496.496 0 01-.382-.164.62.62 0 01-.144-.424v-5.851l1.046 1.045v4.806a.604.604 0 01-.144.424.463.463 0 01-.376.164zm3.958-6.009l-.875-.868c.06-.146.103-.3.13-.465.032-.164.048-.33.048-.499 0-.355-.052-.692-.157-1.011a2.97 2.97 0 00-.451-.869c-.11-.15-.18-.298-.212-.444a.457.457 0 01.123-.403.532.532 0 01.43-.185.54.54 0 01.445.233c.296.369.526.783.69 1.244.164.455.246.934.246 1.435 0 .328-.036.647-.109.957a3.91 3.91 0 01-.308.875zm2.092 2.099l-.813-.814a5.61 5.61 0 00.67-1.462 5.807 5.807 0 00.232-1.655c0-.733-.123-1.426-.37-2.078a5.438 5.438 0 00-1.059-1.75.918.918 0 01-.225-.437.484.484 0 01.13-.41.506.506 0 01.417-.185c.168 0 .316.073.444.219a6.705 6.705 0 011.565 2.926c.142.55.212 1.123.212 1.715 0 .725-.105 1.42-.314 2.085a7.046 7.046 0 01-.889 1.846zm-.089 2.687L3.701 3.896a.502.502 0 01-.15-.37c0-.15.05-.275.15-.375A.49.49 0 014.077 3c.145 0 .27.05.376.15l12.256 12.263c.105.1.158.224.158.37a.513.513 0 01-.158.376.488.488 0 01-.369.15.525.525 0 01-.376-.15z"
fill={colorScheme.text}
/>
</Svg>
);
};

// https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=4236-31968&node-type=frame&t=YdbLaKqcnnWN4fBV-0
export const ConnectivityBluetoothOnIcon: FC = () => {
const colorScheme = useAppColorScheme();
return (
<Svg fill="none" height={20} viewBox="0 0 20 20" width={20}>
<Path
d="M13.823 12.406L11.064 10l2.756-2.378a.492.492 0 00.035-.716l-3.65-3.793A.376.376 0 009.935 3a.344.344 0 00-.346.337v5.288l-2.697-2.29a.549.549 0 00-.753.046.518.518 0 00.05.753L9.589 10l-3.378 2.84a.516.516 0 00-.053.748l.01.009c.196.219.54.24.765.047l2.656-2.3v5.306c0 .194.16.35.36.35.1 0 .193-.04.262-.11l3.647-3.765a.496.496 0 00-.035-.719zm-3.097-7.253l1.96 2.06c.025.024.022.065-.006.09L10.72 8.96c-.04.035-.106.007-.106-.046V5.196c.003-.06.075-.085.112-.044zm-.109 9.656v-3.696c0-.054.066-.082.106-.047l1.96 1.656c.028.022.028.062.006.09l-1.96 2.041c-.04.04-.112.013-.112-.044z"
fill={colorScheme.text}
/>
</Svg>
);
};

// https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=4236-31968&node-type=frame&t=YdbLaKqcnnWN4fBV-0
export const ConnectivityBluetoothOffIcon: FC = () => {
const colorScheme = useAppColorScheme();
return (
<Svg fill="none" height={20} viewBox="0 0 20 20" width={20}>
<Path
d="M13.82 7.622l-1.897 1.637-.772-.664 1.529-1.292c.028-.025.03-.066.006-.09l-1.96-2.06c-.037-.04-.109-.015-.112.044v2.936l-1.025-.88V3.337c0-.184.156-.337.347-.337.1 0 .2.04.269.112l3.65 3.794a.492.492 0 01-.035.716z"
fill={colorScheme.text}
/>
<Path
clipRule="evenodd"
d="M13.552 13.44l2.957 2.54c.112.091.24.132.386.121a.488.488 0 00.357-.178.513.513 0 00.128-.387.49.49 0 00-.185-.356L4.045 3.88a.525.525 0 00-.386-.122.49.49 0 00-.364.179.51.51 0 00-.121.386c.01.146.07.264.178.357l2.75 2.362a.537.537 0 00.087.092l1.108.934 2.27 1.95-3.356 2.823a.516.516 0 00-.053.747l.01.009c.196.219.54.24.765.047l2.656-2.3v5.306c0 .194.16.35.36.35.1 0 .193-.04.262-.11l3.341-3.45zm-2.935 1.37v-3.697c0-.054.066-.082.106-.047l1.96 1.656c.028.022.028.062.006.09l-1.96 2.041c-.04.04-.112.013-.112-.044z"
fill={colorScheme.text}
fillRule="evenodd"
/>
</Svg>
);
};
1 change: 1 addition & 0 deletions src/icons/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export * from './connectivity';
export * from './credential';
export * from './entity';
export * from './history';
Expand Down

0 comments on commit 36c2b5e

Please sign in to comment.