diff --git a/package.json b/package.json index 80a1131..1e675ad 100644 --- a/package.json +++ b/package.json @@ -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", @@ -235,5 +235,6 @@ }, "resolutions": { "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.cd77847.0" - } + }, + "packageManager": "yarn@1.22.21+sha1.1959a18351b811cdeedbd484a8f86c3cc3bbaf72" } diff --git a/src/buttons/connectivity-button.stories.tsx b/src/buttons/connectivity-button.stories.tsx new file mode 100644 index 0000000..20c80cc --- /dev/null +++ b/src/buttons/connectivity-button.stories.tsx @@ -0,0 +1,34 @@ +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import React from 'react'; + +import ConnectivityButton, { ConnectivityTransport } from './connectivity-button'; + +const Basic: ComponentStory = (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; diff --git a/src/buttons/connectivity-button.tsx b/src/buttons/connectivity-button.tsx new file mode 100644 index 0000000..a8e1ec2 --- /dev/null +++ b/src/buttons/connectivity-button.tsx @@ -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 = ({ + 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 = ( + + {transport !== ConnectivityTransport.Bluetooth && + (available ? : )} + {transport !== ConnectivityTransport.Internet && + (available ? : )} + + ); + return ( + + + {icons} + {title && ( + + {title} + + )} + {status !== undefined && } + + + ); +}; + +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; diff --git a/src/buttons/index.ts b/src/buttons/index.ts index d6a3922..d91b128 100644 --- a/src/buttons/index.ts +++ b/src/buttons/index.ts @@ -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'; @@ -11,6 +12,9 @@ export { Button, ButtonProps, ButtonType, + ConnectivityButton, + ConnectivityButtonProps, + ConnectivityTransport, FilterButton, FilterButtonProps, GhostButton, diff --git a/src/icons/connectivity.tsx b/src/icons/connectivity.tsx new file mode 100644 index 0000000..6476ade --- /dev/null +++ b/src/icons/connectivity.tsx @@ -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 = ({ status }) => { + const colorScheme = useAppColorScheme(); + const color = status ? colorScheme.success : colorScheme.error; + return ( + + + + + + + + + + + + + ); +}; + +// 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 ( + + + + ); +}; + +// 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 ( + + + + ); +}; + +// 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 ( + + + + ); +}; + +// 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 ( + + + + + ); +}; diff --git a/src/icons/index.ts b/src/icons/index.ts index 083ed31..03a254e 100644 --- a/src/icons/index.ts +++ b/src/icons/index.ts @@ -1,3 +1,4 @@ +export * from './connectivity'; export * from './credential'; export * from './entity'; export * from './history';