react-native-web/packages/website/storybook/1-components/Text/TextScreen.js

/* eslint-disable react/jsx-sort-props */

/**
 * @flow
 */

import PropChildren from './examples/PropChildren';
import PropNumberOfLines from './examples/PropNumberOfLines';
import PropOnPress from './examples/PropOnPress';
import React from 'react';
import UIExplorer, {
  AppText,
  Code,
  Description,
  DocItem,
  Section,
  storiesOf,
  StyleList
} from '../../ui-explorer';

const TextScreen = () => (
  <UIExplorer title="Text" url="1-components/Text">
    <Description>
      <AppText>
        Text is component for displaying text. It supports style, basic touch handling, and inherits
        typographic styles from ancestor elements.
      </AppText>
      <AppText>
        Text is unique relative to layout: child elements use text layout ("inline") rather than
        flexbox layout. This means that elements inside of a Text are not rectangles, as they wrap
        when reaching the edge of their container.
      </AppText>
      <AppText>NOTE: Text will transfer all other props to the rendered HTML element.</AppText>
    </Description>

    <Section title="Props">
      <DocItem
        name="accessibilityLabel"
        typeInfo="?string"
        description={
          <AppText>
            Overrides the text that is read by a screen reader when the user interacts with the
            element. (This is implemented using <Code>aria-label</Code>.)
          </AppText>
        }
      />

      <DocItem
        name="accessibilityLiveRegion"
        typeInfo="?enum('assertive', 'none', 'polite')"
        description={
          <AppText>
            Indicates to assistive technologies whether to notify the user when the view changes.
            The values of this attribute are expressed in degrees of importance. When regions are
            specified as <Code>polite</Code> (recommended), updates take low priority. When regions
            are specified as <Code>assertive</Code>, assistive technologies will interrupt and
            immediately notify the user. (This is implemented using <Code>aria-live</Code>.)
          </AppText>
        }
      />

      <DocItem
        label="web"
        name="accessibilityRole"
        typeInfo="?enum(roles)"
        description={
          <AppText>
            Allows assistive technologies to present and support interaction with the view in a
            manner that is consistent with user expectations for similar views of that type. For
            example, marking a touchable view with an <Code>accessibilityRole</Code> of{' '}
            <Code>button</Code>. For compatibility with React Native{' '}
            <Code>accessibilityTraits</Code> and <Code>accessibilityComponentType</Code> are mapped
            to <Code>accessibilityRole</Code>. (This is implemented using ARIA roles.)
          </AppText>
        }
      />

      <DocItem
        name="accessible"
        typeInfo="?boolean"
        description={
          <AppText>
            When <Code>true</Code>, indicates that the view is an accessibility element (i.e.,
            focusable) and groups its child content. By default, all the touchable elements and
            elements with <Code>accessibilityRole</Code> of <Code>button</Code> and{' '}
            <Code>link</Code> are accessible. (This is implemented using <Code>tabindex</Code>.)
          </AppText>
        }
      />

      <DocItem
        name="children"
        typeInfo="?any"
        description={
          <AppText>
            Child content. Nested text components will inherit the styles of their parents (only
            backgroundColor is inherited from non-<Code>Text</Code> parents).
          </AppText>
        }
        example={{
          render: () => <PropChildren />
        }}
      />

      <DocItem
        name="importantForAccessibility"
        typeInfo="?enum('auto', 'no', 'no-hide-descendants', 'yes')"
        description={[
          <AppText>
            A value of <Code>no</Code> will remove the element from the tab flow.
          </AppText>,
          <AppText>
            A value of <Code>no-hide-descendants</Code> will hide the element and its children from
            assistive technologies. (This is implemented using <Code>aria-hidden</Code>.)
          </AppText>
        ]}
      />

      <DocItem
        name="numberOfLines"
        typeInfo="?number"
        description="Truncates the text with an ellipsis after this many lines. Currently only supports `1`."
        example={{
          render: () => <PropNumberOfLines />
        }}
      />

      <DocItem name="onBlur" typeInfo="?function" />
      <DocItem name="onContextMenu" typeInfo="?function" />
      <DocItem name="onFocus" typeInfo="?function" />

      <DocItem
        name="onLayout"
        typeInfo="?function"
        description={[
          <AppText>
            Invoked on mount and layout changes with{' '}
            <Code>{'{ nativeEvent: { layout: { x, y, width, height } } }'}</Code>, where{' '}
            <Code>x</Code> and <Code>y</Code> are the offsets from the parent node.
          </AppText>
        ]}
      />

      <DocItem
        name="onPress"
        typeInfo="?function"
        description="Called when the Text is pressed"
        example={{
          render: () => <PropOnPress />
        }}
      />

      <DocItem
        name="selectable"
        typeInfo="?boolean"
        description="When false, the text is not selectable."
      />

      <DocItem
        name="style"
        typeInfo="?style"
        description={<StyleList stylePropTypes={stylePropTypes} />}
      />

      <DocItem
        name="testID"
        typeInfo="?string"
        description="Used to locate this view in end-to-end tests. The test ID is rendered to a 'data-testid' DOM attribute"
      />
    </Section>
  </UIExplorer>
);

const stylePropTypes = [
  {
    name: '...View#style'
  },
  {
    name: 'color',
    typeInfo: 'color'
  },
  {
    name: 'fontFamily',
    typeInfo: 'string'
  },
  {
    label: 'web',
    name: 'fontFeatureSettings',
    typeInfo: 'string'
  },
  {
    name: 'fontSize',
    typeInfo: 'number | string'
  },
  {
    name: 'fontStyle',
    typeInfo: 'string'
  },
  {
    name: 'fontVariant',
    typeInfo: 'Array<string>'
  },
  {
    name: 'fontWeight',
    typeInfo: 'string'
  },
  {
    name: 'letterSpacing',
    typeInfo: 'string'
  },
  {
    name: 'lineHeight',
    typeInfo: 'string'
  },
  {
    name: 'textAlign',
    typeInfo: 'enum("center", "end", "inherit", "justify", "justify-all", "left", "right", "start")'
  },
  {
    name: 'textAlignVertical',
    typeInfo: 'string'
  },
  {
    name: 'textDecorationLine',
    typeInfo: 'string'
  },
  {
    label: 'web',
    name: 'textIndent',
    typeInfo: 'string'
  },
  {
    label: 'web',
    name: 'textOverflow',
    typeInfo: 'string'
  },
  {
    label: 'web',
    name: 'textRendering',
    typeInfo: 'string'
  },
  {
    name: 'textShadowColor',
    typeInfo: 'color'
  },
  {
    name: 'textShadowOffset',
    typeInfo: '{ height: number, width: number }'
  },
  {
    name: 'textShadowRadius',
    typeInfo: 'number | string'
  },
  {
    label: 'web',
    name: 'textTransform',
    typeInfo: 'string'
  },
  {
    label: 'web',
    name: 'unicodeBidi',
    typeInfo: 'string'
  },
  {
    name: 'whiteSpace',
    typeInfo: 'string'
  },
  {
    label: 'web',
    name: 'wordWrap',
    typeInfo: 'string'
  },
  {
    name: 'writingDirection',
    typeInfo: 'string'
  }
];

storiesOf('Components', module).add('Text', TextScreen);