Docplanner Mobile UI

Edit page

Introduction

⚙️ – Core

🧬 – Organisms

DpText

Docplanner provides a constrained, purposeful set of typographic styles.

Properties

type

TextStyleProps | undefined

{ family: fonts.roboto.regular, style: apply(C.font4, C.line6), }

Text style. Default is texTypes.body.regular. Can be overriden by passing a custom style prop object.

color

string | undefined

#1b2734

Font color. Default is palette.gray900 (#1b2734).

align

Alignment | undefined

Alignment.Left

Text alignment. Default is left.

children

string | Element | undefined

Text content

Basic usage

Hello world

<DpText type={textTypes.body.regular} color={palette.blue}>
  Hello world
</DpText>

<DpText type={textTypes.body.regular} color={palette.blue}>
  Hello world
</DpText>

Overwrite styles

You can overwrite the styles using the prop style.

Hello world

<DpText
  type={textTypes.body.regular}
  color={palette.blue}
  style={{
    color: palette.red,
    fontSize: 20,
  }}
>
  Hello world
</DpText>

<DpText
  type={textTypes.body.regular}
  color={palette.blue}
  style={{
    color: palette.red,
    fontSize: 20,
  }}
>
  Hello world
</DpText>

Variations

Hello world

<Row>
  <DpText type={textTypes.body.regular}>Hello world</DpText>
  <DpText
    type={textTypes.heading.h1SemiBold}
    color={palette.blueDark}
    align={Alignment.Center}
  >
    Hello world
  </DpText>
  <DpText type={textTypes.badge.regular} color={palette.red}>
    Hello world
  </DpText>
  <DpText type={textTypes.heading.h3SemiBold} color={palette.turquoise}>
    Hello world
  </DpText>
</Row>

<Row>
  <DpText type={textTypes.body.regular}>Hello world</DpText>
  <DpText
    type={textTypes.heading.h1SemiBold}
    color={palette.blueDark}
    align={Alignment.Center}
  >
    Hello world
  </DpText>
  <DpText type={textTypes.badge.regular} color={palette.red}>
    Hello world
  </DpText>
  <DpText type={textTypes.heading.h3SemiBold} color={palette.turquoise}>
    Hello world
  </DpText>
</Row>

Font styles

Heading - H1semibold



Heading - H2regular



Heading - H2semibold



Heading - H3regular



Heading - H3semibold



Body - Regular



Body - Medium



Body - Smallregular



Body - Smallmedium



Body - Xsmallregular



Body - Xsmallmedium



Badge - Regular



() => {
  const [showInfo, toggleInfo] = useState(false)
  const showToast = useToast()
  return (
    <View>
      {Object.keys(textTypes).map(heading =>
        Object.keys(textTypes[heading]).map(subKey => {
          const copyText = `<DpText type={textTypes.${heading}.${subKey}} >`
          return (
            <View style={[C.itemsCenter, C.justifyCenter]}>
              <DpText type={textTypes[heading][subKey]}>
                {_.capitalize(heading)} - {_.capitalize(subKey)}
              </DpText>
              <DpSpacer />
              <TouchableOpacity
                onPress={() => toggleInfo(!showInfo)}
                style={[
                  C.bgLightGray,
                  C.px2,
                  C.mb2,
                  C.row,
                  C.itemsCenter,
                  C.radius2,
                ]}
              >
                <DpText
                  type={textTypes.body.smallRegular}
                  color={palette.purple}
                >
                  {copyText}
                </DpText>
                <DpIcon
                  name={DpIcons.ActionCopy}
                  color={palette.purple}
                  onPress={() => {
                    navigator.clipboard.writeText(copyText.toString())
                    showToast({
                      actionText: 'Dismiss',
                      icon: DpIcons.ActionCopy,
                      onAction: () => alert('Action'),
                      message: 'Copied to Clipboard: ' + copyText,
                    })
                    toggleInfo(!showInfo)
                  }}
                />
              </TouchableOpacity>
              {showInfo &&
                Object.entries(textTypes[heading][subKey]).map(
                  ([key, val]) => (
                    <Row style={[C.my2]}>
                      <DpText
                        type={textTypes.body.medium}
                        color={palette.purple}
                      >
                        {_.capitalize(key)}:
                      </DpText>
                      <DpText
                        style={[C.bgLightGray, C.p1, C.ml2, C.radius2]}
                        type={textTypes.body.smallRegular}
                        color={palette.purple}
                      >
                        {JSON.stringify(val)}
                      </DpText>
                    </Row>
                  ),
                )}
              <DpSpacer size={4} />
            </View>
          )
        }),
      )}
    </View>
  )
}

() => {
  const [showInfo, toggleInfo] = useState(false)
  const showToast = useToast()
  return (
    <View>
      {Object.keys(textTypes).map(heading =>
        Object.keys(textTypes[heading]).map(subKey => {
          const copyText = `<DpText type={textTypes.${heading}.${subKey}} >`
          return (
            <View style={[C.itemsCenter, C.justifyCenter]}>
              <DpText type={textTypes[heading][subKey]}>
                {_.capitalize(heading)} - {_.capitalize(subKey)}
              </DpText>
              <DpSpacer />
              <TouchableOpacity
                onPress={() => toggleInfo(!showInfo)}
                style={[
                  C.bgLightGray,
                  C.px2,
                  C.mb2,
                  C.row,
                  C.itemsCenter,
                  C.radius2,
                ]}
              >
                <DpText
                  type={textTypes.body.smallRegular}
                  color={palette.purple}
                >
                  {copyText}
                </DpText>
                <DpIcon
                  name={DpIcons.ActionCopy}
                  color={palette.purple}
                  onPress={() => {
                    navigator.clipboard.writeText(copyText.toString())
                    showToast({
                      actionText: 'Dismiss',
                      icon: DpIcons.ActionCopy,
                      onAction: () => alert('Action'),
                      message: 'Copied to Clipboard: ' + copyText,
                    })
                    toggleInfo(!showInfo)
                  }}
                />
              </TouchableOpacity>
              {showInfo &&
                Object.entries(textTypes[heading][subKey]).map(
                  ([key, val]) => (
                    <Row style={[C.my2]}>
                      <DpText
                        type={textTypes.body.medium}
                        color={palette.purple}
                      >
                        {_.capitalize(key)}:
                      </DpText>
                      <DpText
                        style={[C.bgLightGray, C.p1, C.ml2, C.radius2]}
                        type={textTypes.body.smallRegular}
                        color={palette.purple}
                      >
                        {JSON.stringify(val)}
                      </DpText>
                    </Row>
                  ),
                )}
              <DpSpacer size={4} />
            </View>
          )
        }),
      )}
    </View>
  )
}

Alignment

Start

Center

End

<Row>
  <Cell>
    <DpText align={Alignment.Left}>Start</DpText>
  </Cell>
  <Cell>
    <DpText align={Alignment.Center}>Center</DpText>
  </Cell>
  <Cell>
    <DpText align={Alignment.Right}>End</DpText>
  </Cell>
</Row>

<Row>
  <Cell>
    <DpText align={Alignment.Left}>Start</DpText>
  </Cell>
  <Cell>
    <DpText align={Alignment.Center}>Center</DpText>
  </Cell>
  <Cell>
    <DpText align={Alignment.Right}>End</DpText>
  </Cell>
</Row>

Docplanner Mobile UI

DpText

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Properties

Basic usage

Overwrite styles

Variations

Font styles

Alignment

Properties