components#Text TypeScript Examples

The following examples show how to use components#Text. 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: ItemView.tsx    From mobile with Apache License 2.0 6 votes vote down vote up
ItemView = ({item, image, isActive, altText, header, children}: ItemViewProps) => {
  const i18n = useI18n();
  const autoFocusRef = useAccessibilityAutoFocus(isActive);

  return (
    <>
      <Text focusRef={autoFocusRef} marginBottom="s" marginTop="s" color="darkText">
        <Text fontSize={24} fontWeight="bold" color="infoBlockNeutralText">
          {[i18n.translate('Onboarding.Step'), onboardingData.indexOf(item) + 1].join(' ')}
        </Text>
        {[i18n.translate('Onboarding.Of'), onboardingData.length].join('')}
      </Text>
      {image ? (
        <Box marginTop="xxxs" marginBottom="l">
          <Image accessible style={styles.image} source={image} accessibilityLabel={altText} />
        </Box>
      ) : null}

      <Text variant="bodyTitle" color="headerText" marginBottom="l" accessibilityRole="header">
        {header}
      </Text>
      {children}
    </>
  );
}
Example #2
Source File: powered-by.tsx    From geist-ui with MIT License 6 votes vote down vote up
PoweredBy: React.FC<unknown> = () => {
  return (
    <div className="powered-by">
      <Text mb={0} font="14px" type="secondary">
        Geist is an open source project from the community.
      </Text>
      <Text mt={0} font="14px" type="secondary">
        And is powered by{' '}
        <Link color target="_blank" rel="noreferrer nofollow" href="/powered-by-netlify">
          Netlify
        </Link>
        .
      </Text>
      <style jsx>{`
        .powered-by {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          margin-top: 30px;
        }
      `}</style>
    </div>
  )
}
Example #3
Source File: RegionPicker.tsx    From mobile with Apache License 2.0 6 votes vote down vote up
RegionItem_ = ({code, onPress, name, flagIcon, selected}: RegionItemProps) => (
  <>
    <TouchableOpacity onPress={() => onPress(code)} accessibilityRole="radio" accessibilityState={{selected}}>
      <Box paddingVertical="s" flexDirection="row" alignContent="center" justifyContent="space-between">
        <Box flexDirection="row" alignItems="center" paddingVertical="s">
          <Image source={flagIcon} style={styles.flag} />
          <Text variant="bodyText" color="overlayBodyText" marginHorizontal="m">
            {name}
          </Text>
        </Box>
        <Box alignSelf="center">{selected && <Icon size={32} name="icon-check" />}</Box>
      </Box>
    </TouchableOpacity>
    <Box height={1} marginHorizontal="-m" backgroundColor="overlayBackground" />
  </>
)
Example #4
Source File: attributes.tsx    From geist-ui with MIT License 6 votes vote down vote up
Attributes: React.FC<React.PropsWithChildren<AttributesProps>> = React.memo(
  ({ edit, children }) => {
    const { isChinese } = useConfigs()
    const path = edit.replace('/pages', 'pages')
    const apiTitles = useMemo(() => {
      if (React.Children.count(children) === 0) return null
      return (
        <>
          <Spacer h={1} />
          <h3>
            <VirtualAnchor>APIs</VirtualAnchor>
            {isChinese && ' / 接口文档'}
          </h3>
          <AttributesTable>{children}</AttributesTable>
        </>
      )
    }, [children, isChinese])

    return (
      <>
        {apiTitles}
        <Divider font="12px" mt="80px">
          <Text p b type="secondary" style={{ userSelect: 'none' }}>
            {isChinese ? '文档贡献者' : 'Contributors'}
          </Text>
        </Divider>
        <Contributors path={path} />
      </>
    )
  },
)
Example #5
Source File: ItemView.tsx    From mobile with Apache License 2.0 6 votes vote down vote up
ItemView = ({item, image, isActive}: ItemViewProps) => {
  const i18n = useI18n();
  const autoFocusRef = useAccessibilityAutoFocus(isActive);

  return (
    <>
      <Box marginHorizontal="-m" marginTop="s" marginBottom="l">
        <Image
          accessible
          ref={autoFocusRef}
          style={styles.image}
          source={image}
          accessibilityLabel={i18n.translate(`Tutorial.${item}AltText`)}
        />
      </Box>
      <Text variant="bodyTitle" color="headerText" marginBottom="l" accessible accessibilityRole="header">
        {i18n.translate(`Tutorial.${item}Title`)}
      </Text>
      <TextMultiline text={i18n.translate(`Tutorial.${item}`)} variant="bodyText" color="darkText" marginBottom="l" />
    </>
  );
}
Example #6
Source File: index.test.tsx    From geist-ui with MIT License 5 votes vote down vote up
describe('Text', () => {
  it('should render P element in the default', () => {
    const wrapper = mount(<Text>test-value</Text>)
    expect(wrapper.find('p')).not.toBe(0)
    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should work with different styles', () => {
    const wrapper = mount(
      <div>
        <Text type="secondary">test-value</Text>
        <Text type="success">test-value</Text>
        <Text type="warning">test-value</Text>
        <Text type="error">test-value</Text>
      </div>,
    )
    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('the specified element should be rendered', () => {
    const elements = [
      'h1',
      'h2',
      'h3',
      'h4',
      'h5',
      'h6',
      'p',
      'small',
      'span',
      'del',
      'i',
      'em',
      'b',
    ]
    const wrapper = mount(
      <div>
        {elements.map((el, index) => {
          const prop = { [el]: true }
          return (
            <Text {...prop} key={`${el}-${index}`}>
              test-value
            </Text>
          )
        })}
      </div>,
    )
    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('the combined style should be rendered', () => {
    const wrapper = mount(
      <Text p b del>
        test-value
      </Text>,
    )
    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should render default color when type missing', () => {
    const Mock = Text as any
    const wrapper = mount(<Mock type="unknow">test-value</Mock>)
    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should be able to specify the size of text', () => {
    let wrapper = mount(<Text font={14}>test-value</Text>)
    expect(wrapper.html()).toMatchSnapshot()

    wrapper = mount(<Text font="12rem">test-value</Text>)
    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })
})
Example #7
Source File: Language.tsx    From mobile with Apache License 2.0 5 votes vote down vote up
LanguageScreen = () => {
  const i18n = useI18n();
  const navigation = useNavigation();
  const close = useCallback(() => navigation.goBack(), [navigation]);
  const {setLocale} = useStorage();
  const toggle = useCallback(
    (newLocale: 'en' | 'mn') => () => {
      setLocale(newLocale);
    },
    [setLocale],
  );

  return (
    <Box backgroundColor="overlayBackground" flex={1}>
      <SafeAreaView style={styles.flex}>
        <Toolbar
          title=""
          navIcon="icon-back-arrow"
          navText={i18n.translate('LanguageSelect.Close')}
          navLabel={i18n.translate('LanguageSelect.Close')}
          onIconClicked={close}
        />
        <ScrollView>
          <Text
            paddingHorizontal="m"
            variant="bodyTitle"
            color="bodyText"
            accessibilityRole="header"
            accessibilityAutoFocus
          >
            {i18n.translate('LanguageSelect.Title')}
          </Text>
          <Box
            marginHorizontal="m"
            paddingHorizontal="m"
            borderRadius={10}
            overflow="hidden"
            marginTop="m"
            accessibilityRole="radiogroup"
          >
            <LanguageSelectItem
              onPress={toggle('en')}
              text={i18n.translate('LanguageSelect.En')}
              isActive={i18n.locale === 'en'}
            />
            <LanguageSelectItem
              onPress={toggle('mn')}
              text={i18n.translate('LanguageSelect.Mn')}
              isActive={i18n.locale === 'mn'}
              lastItem
            />
          </Box>
        </ScrollView>
      </SafeAreaView>
    </Box>
  );
}
Example #8
Source File: icons-cell.tsx    From geist-ui with MIT License 5 votes vote down vote up
IconsCell: React.FC<Props> = ({ component: Component, name, onClick }) => {
  const theme = useTheme()
  return (
    <div className="icon-item" key={name} onClick={() => onClick(name)}>
      <Component />
      <Text type="secondary" small>
        {name}
      </Text>
      <style jsx>{`
        .icon-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-evenly;
          flex-grow: 0;
          flex-basis: 125px;
          min-width: 0px;
          height: 95px;
          margin: 12px 5px;
          border-radius: ${theme.layout.radius};
          box-sizing: border-box;
          cursor: pointer;
          user-select: none;
          transition: all 150ms ease-in-out;
        }

        .icon-item > :global(small) {
          display: inline-block;
          width: 90%;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .icon-item:hover {
          box-shadow: ${theme.expressiveness.shadowMedium};
        }

        @media only screen and (max-width: ${theme.layout.breakpointMobile}) {
          .icon-item {
            flex-basis: 30%;
          }
        }
      `}</style>
    </div>
  )
}
Example #9
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 #10
Source File: codes.tsx    From geist-ui with MIT License 4 votes vote down vote up
CustomizationCodes: React.FC<unknown> = () => {
  const DefaultTheme = Themes.getPresetStaticTheme()
  const theme = useTheme()
  const { isChinese } = useConfigs()
  const codeTheme = makeCodeTheme(theme)
  const { copy } = useClipboard()
  const { setToast } = useToasts()

  const deepDifferents = useMemo(
    () => ({
      ...getDeepDifferents(DefaultTheme, theme),
      type: CUSTOM_THEME_TYPE,
    }),
    [DefaultTheme, theme],
  )
  const userCodes = useMemo(() => {
    return `const myTheme = ${JSON.stringify(deepDifferents, null, 2)}

/***
 *  Usage::
 *
 *  export const App = () => {
 *    return (
 *      <GeistProvider themes={[myTheme]} themeType="${CUSTOM_THEME_TYPE}">
 *        <CssBaseline />
 *        <YourComponent />
 *      </GeistProvider>
 *    )
 *  }
 **/`
  }, [deepDifferents])

  const copyCode = () => {
    copy(userCodes)
    setToast({ text: 'Theme code copied.' })
  }

  return (
    <div className="custom-codes">
      <h3 className="title">{isChinese ? '主题代码' : 'Theme Codes'}</h3>
      <Spacer h={1} />
      {isChinese ? (
        <Text>
          这里是你所有的变更,点击 <Code>copy</Code> 按钮即可使用在你自己的项目中。
        </Text>
      ) : (
        <Text>
          This is all your changes, click <Code>copy</Code> to use it in your own project.
        </Text>
      )}
      <Spacer h={2} />
      <div className="codes">
        <div className="copy" onClick={copyCode}>
          <CopyIcon />
        </div>
        <LiveProvider code={userCodes} disabled theme={codeTheme}>
          <LiveEditor />
        </LiveProvider>
      </div>
      <Spacer h={5} />
      <style jsx>{`
        .custom-codes {
          display: flex;
          flex-direction: column;
          flex: 1;
          margin: 3rem auto 2.5rem;
          text-align: center;
        }

        .title {
          text-align: center;
          width: 80%;
          margin: 0 auto;
          display: inline-block;
          background: ${theme.palette.foreground};
          color: ${theme.palette.background};
          font-size: 1rem;
          line-height: 1rem;
          padding: ${theme.layout.gap} 0;
          text-transform: uppercase;
          letter-spacing: 1.5px;
        }

        .codes {
          width: 80%;
          margin: 0 auto;
          border: 1px solid ${theme.palette.border};
          border-radius: ${theme.layout.radius};
          overflow: hidden;
          padding: calc(0.6 * ${theme.layout.gap}) ${theme.layout.gap};
          position: relative;
        }

        .copy {
          position: absolute;
          right: 1rem;
          top: 1rem;
          z-index: 2000;
          color: ${theme.palette.accents_3};
          cursor: pointer;
          user-select: none;
          transition: color 200ms ease;
          --snippet-font-size: 16px;
        }

        .copy:hover {
          color: ${theme.palette.accents_6};
        }

        @media only screen and (max-width: ${theme.layout.breakpointMobile}) {
          .title,
          .codes {
            width: 90vw;
          }
        }
      `}</style>
    </div>
  )
}