components#ButtonSingleLine TypeScript Examples

The following examples show how to use components#ButtonSingleLine. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: ExposedHelpButton.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
ExposedHelpButton = () => {
  const onPress = useCallback(() => {
    Linking.openURL(`https://nema.gov.mn`).catch(error => captureException('An error occurred', error));
  }, []);

  // if (cta === '') {
  //   return <ErrorBox marginTop="m" />;
  // }

  return (
    <Box alignSelf="stretch" marginTop="s" marginBottom="m">
      <ButtonSingleLine text="Тусламж авах" variant="thinFlatBlue" externalLink onPress={onPress} />
    </Box>
  );
}
Example #2
Source File: Tip.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
Tip = () => {
  const i18n = useI18n();
  return (
    <Box backgroundColor="green2" borderRadius={10} paddingVertical="m" marginTop="m" marginBottom="m">
      <Box flexDirection="row" paddingLeft="s" paddingRight="m">
        <Box flex={0} paddingTop="xxs" marginRight="xxs">
          <Icon name="icon-lightbulb" size={21} />
        </Box>
        <Box flex={1}>
          <Text color="bodyTextWhite" variant="bodyTitle" fontWeight="bold">
            {i18n.translate('Home.DiagnosedView.Tip.Title')}
          </Text>
          <Text marginTop="s" color="bodyTextWhite" variant="bodyDescription">
            Та доорх сайтаас COVID-19 халдварын талаарх дэлгэрэнгүй мэдээлэл авах боломжтой
          </Text>
        </Box>
      </Box>

      <Box paddingHorizontal="m" paddingTop="s" marginTop="s">
        <ButtonSingleLine
          text="Тусламж авах"
          variant="thinFlatNeutralGrey"
          externalLink="icon-external-arrow-lightgreen"
          onPress={() => Linking.openURL(`https://covid19.mohs.mn`)}
        />
      </Box>
    </Box>
  );
}
Example #3
Source File: DiagnosedShareView.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
DiagnosedShareView = ({isBottomSheetExpanded}: {isBottomSheetExpanded: boolean}) => {
  const i18n = useI18n();
  const navigation = useNavigation();
  const toDataShare = useCallback(async () => {
    const initialTekUploadComplete = await AsyncStorage.getItem(INITIAL_TEK_UPLOAD_COMPLETE);
    const screen = initialTekUploadComplete === 'false' ? 'Step2' : 'TekUploadSubsequentDays';
    return navigation.navigate('DataSharing', {screen});
  }, [navigation]);
  const autoFocusRef = useAccessibilityAutoFocus(!isBottomSheetExpanded);

  return (
    <BaseHomeView iconName="icon-share-diagnose" testID="diagnosedShare">
      <Text focusRef={autoFocusRef} variant="bodyTitle" color="darkText" marginBottom="m" accessibilityRole="header">
        {i18n.translate('Home.DiagnosedShareView.Title')}
      </Text>
      <Text variant="bodyDescription" color="lightText" marginBottom="m">
        {i18n.translate('Home.DiagnosedShareView.Body1')}
      </Text>
      <Text variant="bodyDescription" color="lightText">
        <Text variant="bodyDescription" color="lightText">
          {i18n.translate('Home.DiagnosedShareView.Body2')}
        </Text>
        {i18n.translate('Home.DiagnosedShareView.Body3')}
      </Text>
      <Box alignSelf="stretch" marginTop="l" marginBottom="m">
        <ButtonSingleLine
          text={i18n.translate('Home.DiagnosedShareView.ButtonCTA')}
          variant="bigFlat"
          onPress={toDataShare}
          iconName="icon-chevron-white"
        />
      </Box>
    </BaseHomeView>
  );
}
Example #4
Source File: ExposureNotificationsDisabledView.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
ExposureNotificationsDisabledView = ({isBottomSheetExpanded}: {isBottomSheetExpanded: boolean}) => {
  const i18n = useI18n();
  const startExposureNotificationService = useStartExposureNotificationService();

  const toSettings = useCallback(() => {
    Linking.openSettings();
  }, []);

  const startEn = useCallback(() => {
    startExposureNotificationService();
  }, [startExposureNotificationService]);

  const onPress = () => {
    if (Platform.OS === 'android') {
      return startEn();
    }
    return toSettings();
  };
  const autoFocusRef = useAccessibilityAutoFocus(!isBottomSheetExpanded);
  return (
    <BaseHomeView iconName="icon-disabled" testID="exposureNotificationsDisabled">
      <Text focusRef={autoFocusRef} variant="bodyTitle" color="darkText" marginBottom="m" accessibilityRole="header">
        {i18n.translate('Home.EnDisabled.Title')}
      </Text>
      <Text variant="bodyDescription" color="lightText">
        {i18n.translate('Home.EnDisabled.Body1')}
      </Text>
      <Box alignSelf="stretch" marginBottom="m" marginTop="l">
        <ButtonSingleLine
          text={i18n.translate('Home.EnDisabled.CTA')}
          variant="danger50Flat"
          internalLink
          onPress={onPress}
        />
      </Box>
    </BaseHomeView>
  );
}
Example #5
Source File: ExposureNotificationsUnauthorizedView.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
ExposureNotificationsUnauthorizedView = ({isBottomSheetExpanded}: {isBottomSheetExpanded: boolean}) => {
  const i18n = useI18n();
  const startExposureNotificationService = useStartExposureNotificationService();

  const toSettings = useCallback(() => {
    Linking.openSettings();
  }, []);

  const startEn = useCallback(() => {
    startExposureNotificationService();
  }, [startExposureNotificationService]);

  const onPress = () => {
    if (Platform.OS === 'android') {
      return startEn();
    }
    return toSettings();
  };
  const autoFocusRef = useAccessibilityAutoFocus(!isBottomSheetExpanded);
  return (
    <BaseHomeView iconName="icon-disabled" testID="exposureNotificationsDisabled">
      <Text focusRef={autoFocusRef} variant="bodyTitle" color="darkText" marginBottom="m" accessibilityRole="header">
        {i18n.translate('Home.EnDisabled.Title')}
      </Text>
      <Text variant="bodyDescription" color="lightText">
        {i18n.translate('Home.EnUnauthorized.Body1')}
      </Text>
      <Box alignSelf="stretch" marginBottom="m" marginTop="l">
        <ButtonSingleLine
          text={i18n.translate('Home.EnDisabled.CTA')}
          variant="danger50Flat"
          internalLink
          onPress={onPress}
        />
      </Box>
    </BaseHomeView>
  );
}
Example #6
Source File: FrameworkUnavailableView.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
FrameworkUnavailableView = ({isBottomSheetExpanded}: {isBottomSheetExpanded: boolean}) => {
  const i18n = useI18n();

  const onHelp = useCallback(() => {
    Linking.openURL(i18n.translate('Info.HelpUrl')).catch(error => captureException('An error occurred', error));
  }, [i18n]);

  const autoFocusRef = useAccessibilityAutoFocus(!isBottomSheetExpanded);
  return (
    <BaseHomeView iconName="error-icon">
      <Text focusRef={autoFocusRef} variant="bodyTitle" color="darkText" marginBottom="m" accessibilityRole="header">
        {i18n.translate('Home.FrameworkUnavailable.Title')}
      </Text>
      <TextMultiline
        variant="bodyDescription"
        color="lightText"
        marginBottom="m"
        text={i18n.translate('Home.FrameworkUnavailable.Body')}
      />
      <Box alignSelf="stretch" marginBottom="m" marginTop="l">
        <ButtonSingleLine
          text={i18n.translate('Home.FrameworkUnavailable.CTA')}
          variant="danger50Flat"
          externalLink
          onPress={onHelp}
        />
      </Box>
    </BaseHomeView>
  );
}
Example #7
Source File: UnknownProblemView.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
UnknownProblemView = ({isBottomSheetExpanded}: {isBottomSheetExpanded: boolean}) => {
  const i18n = useI18n();

  const onHelp = useCallback(() => {
    Linking.openURL(i18n.translate('Info.HelpUrl')).catch(error => captureException('An error occurred', error));
  }, [i18n]);

  const autoFocusRef = useAccessibilityAutoFocus(!isBottomSheetExpanded);
  return (
    <BaseHomeView iconName="error-icon" testID="unknownProblem">
      <Text focusRef={autoFocusRef} variant="bodyTitle" color="darkText" marginBottom="m" accessibilityRole="header">
        {i18n.translate('Home.UnknownProblem.Title')}
      </Text>
      <Text marginBottom="m" variant="bodyDescription" color="lightText">
        {i18n.translate('Home.UnknownProblem.Body')}
      </Text>
      <Box alignSelf="stretch" marginBottom="m" marginTop="l">
        <ButtonSingleLine
          text={i18n.translate('Home.UnknownProblem.CTA')}
          variant="danger50Flat"
          externalLink
          onPress={onHelp}
        />
      </Box>
    </BaseHomeView>
  );
}
Example #8
Source File: NoRegionView.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
NoRegionView = () => {
  const i18n = useI18n();
  const navigation = useNavigation();
  const autoFocusRef = useAccessibilityAutoFocus(true);

  const onChooseRegion = useCallback(() => navigation.navigate('RegionSelect'), [navigation]);

  return (
    <Box>
      <Text
        testID="noCodeHeader"
        focusRef={autoFocusRef}
        variant="bodyTitle"
        marginBottom="l"
        accessibilityRole="header"
      >
        {i18n.translate('DataUpload.NoCode.NoRegion.Title')}
      </Text>
      <TextMultiline marginBottom="l" text={i18n.translate('DataUpload.NoCode.NoRegion.Body')} />
      <ButtonSingleLine
        text={i18n.translate('DataUpload.NoCode.NoRegion.ChooseRegionCTA')}
        variant="bigFlatDarkGrey"
        internalLink
        onPress={onChooseRegion}
      />
    </Box>
  );
}
Example #9
Source File: HowItWorks.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
HowItWorks = (props: Pick<ItemViewProps, 'isActive'>) => {
  const i18n = useI18n();
  const navigation = useNavigation();
  const onLearnMore = useCallback(() => navigation.navigate('Tutorial'), [navigation]);

  return (
    <ItemView
      {...props}
      image={require('assets/onboarding/how-it-works.png')}
      altText={i18n.translate('Onboarding.HowItWorks.ImageAltText')}
      header={i18n.translate('Onboarding.HowItWorks.Title')}
      item="step-3"
    >
      <>
        <Box marginRight="s">
          <BulletPointCheck listAccessibile="listStart" text={i18n.translate('Onboarding.HowItWorks.Body1')} />
          <BulletPointCheck listAccessibile="item" text={i18n.translate('Onboarding.HowItWorks.Body2')} />
          <BulletPointCheck listAccessibile="listEnd" text={i18n.translate('Onboarding.HowItWorks.Body3')} />
        </Box>
        <Box alignSelf="stretch" marginTop="m" marginBottom="l">
          <Box>
            <ButtonSingleLine
              testID="howItWorksCTA"
              text={i18n.translate('Onboarding.HowItWorks.HowItWorksCTA')}
              variant="bigFlatLink"
              internalLink
              onPress={onLearnMore}
            />
          </Box>
        </Box>
      </>
    </ItemView>
  );
}
Example #10
Source File: Step0Screen.tsx    From mobile with Apache License 2.0 5 votes vote down vote up 
Step0Screen = () => {
  const i18n = useI18n();
  const navigation = useNavigation();
  const onNext = useCallback(() => navigation.navigate('FormView'), [navigation]);

  return (
    <BaseDataSharingView showBackButton={false}>
      <ScrollView style={styles.flex}>
        <Box paddingHorizontal="m">
          <Text
            color="lightBlack"
            variant="bodyTitle2"
            marginBottom="l"
            accessibilityRole="header"
            accessibilityAutoFocus
          >
            {i18n.translate('DataUpload.Step0.Title')}
          </Text>

          <Text marginBottom="l">
            <Text fontWeight="normal" color="lightText" variant="bodyDescription">
              {i18n.translate('DataUpload.Step0.List.1a')}
            </Text>
            <Text color="lightText" variant="bodyDescription">
              {i18n.translate('DataUpload.Step0.List.1b')}
            </Text>
          </Text>
          <Text marginBottom="l">
            <Text fontWeight="normal" color="lightText" variant="bodyDescription">
              {i18n.translate('DataUpload.Step0.List.2a')}
            </Text>
            <Text color="lightText" variant="bodyDescription">
              {i18n.translate('DataUpload.Step0.List.2b')}
            </Text>
          </Text>
          <Text marginBottom="l">
            <Text fontWeight="normal" color="lightText" variant="bodyDescription">
              {i18n.translate('DataUpload.Step0.List.3a')}
            </Text>
            <Text color="lightText" variant="bodyDescription">
              {i18n.translate('DataUpload.Step0.List.3b')}
            </Text>
          </Text>
          <Text marginBottom="l">
            <Text fontWeight="normal" color="lightText" variant="bodyDescription">
              {i18n.translate('DataUpload.Step0.Body1')}
            </Text>
            <Text color="lightText" variant="bodyDescription">
              {i18n.translate('DataUpload.Step0.Body2')}
            </Text>
          </Text>

          <Box marginTop="m">
            <Button variant="thinFlat" text={i18n.translate('DataUpload.Step0.CTA')} onPress={onNext} />
          </Box>

          <Box marginTop="m" marginBottom="m">
            <ButtonSingleLine
              text={i18n.translate('DataUpload.Step0.NoCode')}
              variant="bigFlatDarkGrey"
              // color="textColorDark"
              internalLink
              onPress={onNext}
            />
          </Box>
        </Box>
      </ScrollView>
    </BaseDataSharingView>
  );
}
Example #11
Source File: ClearExposureView.tsx    From mobile with Apache License 2.0 5 votes vote down vote up 
ClearExposureView = () => {
  const i18n = useI18n();
  const [clearExposedStatus] = useClearExposedStatus();
  const onClearExposedState = useCallback(() => {
    Alert.alert(i18n.translate('Home.ExposureDetected.Dismiss.Confirm.Body'), undefined, [
      {
        text: i18n.translate('Home.ExposureDetected.Dismiss.Confirm.Cancel'),
        onPress: () => {},
        style: 'cancel',
      },
      {
        text: i18n.translate('Home.ExposureDetected.Dismiss.Confirm.Accept'),
        onPress: () => {
          clearExposedStatus();
        },
        style: 'default',
      },
    ]);
  }, [clearExposedStatus, i18n]);
  return (
    <Box>
      <Text variant="bodyTitle" marginBottom="m" accessibilityRole="header">
        {i18n.translate('Home.ExposureDetected.Dismiss.Title')}
      </Text>

      <Text marginBottom="m">
        <Text>{i18n.translate('Home.ExposureDetected.Dismiss.Body')}</Text>
      </Text>

      <Box alignSelf="stretch" marginTop="s" marginBottom="m">
        <ButtonSingleLine
          iconName="icon-check-white"
          text={i18n.translate('Home.ExposureDetected.Dismiss.CTA')}
          onPress={onClearExposedState}
          variant="bigFlatPurple"
        />
      </Box>
    </Box>
  );
}
Example #12
Source File: LocationOffView.tsx    From mobile with Apache License 2.0 5 votes vote down vote up 
LocationOffView = ({isBottomSheetExpanded}: {isBottomSheetExpanded: boolean}) => {
  const i18n = useI18n();
  const startExposureNotificationService = useStartExposureNotificationService();

  const toSettings = useCallback(() => {
    Linking.openSettings();
  }, []);

  const startEn = useCallback(() => {
    startExposureNotificationService();
  }, [startExposureNotificationService]);

  const onPress = () => {
    if (Platform.OS === 'android') {
      return startEn();
    }
    return toSettings();
  };
  const autoFocusRef = useAccessibilityAutoFocus(!isBottomSheetExpanded);
  return (
    <BaseHomeView iconName="error-icon">
      <Text focusRef={autoFocusRef} variant="bodyTitle" color="darkText" marginBottom="m" accessibilityRole="header">
        {i18n.translate('Home.EnDisabled.Title')}
      </Text>
      <Text variant="bodyDescription" color="lightText">
        {i18n.translate('Home.EnDisabled.Body1')}
      </Text>
      <Box alignSelf="stretch" marginBottom="l" marginTop="l">
        <ButtonSingleLine
          text={i18n.translate('Home.EnDisabled.CTA')}
          variant="danger50Flat"
          internalLink
          onPress={onPress}
        />
      </Box>
      <Box marginBottom="m">
        <Text marginBottom="m" variant="bodyTitle" color="darkText">
          {i18n.translate('Home.EnDisabled.AndroidTitle2')}
        </Text>
        <Text marginBottom="m" variant="bodyDescription" color="lightText">
          {i18n.translate('Home.EnDisabled.AndroidBody1')}
        </Text>
        <Text>
          <Text variant="bodyDescription" color="lightText">
            {i18n.translate('Home.EnDisabled.AndroidBody2a')}
          </Text>
          <Text variant="bodyDescription" color="darkText" fontWeight="bold">
            {i18n.translate('Home.EnDisabled.AndroidBody2b')}
          </Text>
          <Text variant="bodyDescription" color="lightText">
            {i18n.translate('Home.EnDisabled.AndroidBody2c')}
          </Text>
        </Text>
      </Box>
    </BaseHomeView>
  );
}
Example #13
Source File: Permissions.tsx    From mobile with Apache License 2.0 5 votes vote down vote up 
Permissions = (props: Pick<ItemViewProps, 'isActive'>) => {
  const i18n = useI18n();
  const onPrivacy = useCallback(() => {
    Linking.openURL(i18n.translate('Info.PrivacyUrl')).catch(error => captureException('An error occurred', error));
  }, [i18n]);

  return (
    <ItemView
      {...props}
      image={require('assets/onboarding/permission.png')}
      altText={i18n.translate('Onboarding.Permissions.ImageAltText')}
      header={i18n.translate('Onboarding.Permissions.Title')}
      item="step-5"
    >
      <>
        <Box marginBottom="m">
          <Markdown
            style={{
              body: styles.bodyContent,
            }}
          >
            {i18n.translate('Onboarding.Permissions.Body1')}
          </Markdown>
        </Box>
        <Box marginBottom="l">
          <Markdown
            style={{
              body: styles.bodyContent,
            }}
          >
            {i18n.translate('Onboarding.Permissions.Body2')}
          </Markdown>
        </Box>
        <Box alignSelf="stretch" marginTop="m" marginBottom="l">
          <Box>
            <ButtonSingleLine
              testID="privacyPolicyCTA"
              text={i18n.translate('Onboarding.Permissions.PrivacyButtonCTA')}
              variant="bigFlatLink"
              externalLink
              onPress={onPrivacy}
            />
          </Box>
        </Box>
      </>
    </ItemView>
  );
}