Docplanner Mobile UI

Edit page

Introduction

⚙️ – Core

🧬 – Organisms

Icon @deprecated use DpIcons instead

A simple component to represent any kind of steps or categories

Properties

name

MobileUiKitIconsId

required

Name of the icon

color

string | undefined

#627282

Color

size

"xs" | "sm" | "md" | "lg" | "xxs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | undefined

Size based on 4px scale

offset

"left" | "right" | "top" | "bottom" | undefined

Offset to better align the icon to content

onPress

(() => void) | undefined

onPress callback

All icons



























































































































































































































































































































































































































() => {
  const [alertVisible, toggleAlert] = useState(false)
  const timeout = useRef(null)
  const handleCopy = icon => () => {
    timeout.current && clearTimeout(timeout.current)
    toggleAlert(false)
    navigator.clipboard.writeText(icon).then(() => toggleAlert(true))
  }
  useEffect(() => {
    if (alertVisible) {
      timeout.current = setTimeout(() => toggleAlert(false), 3000)
    }
    return () => {
      timeout.current && clearTimeout(timeout.current)
    }
  }, [alertVisible])
  const icons = Object.values(MobileUiKitIcons)
  return (
    <View>
      <Row
        style={{
          height: 100,
        }}
      >
        {alertVisible && (
          <Row>
            <Icon name="verified-check" color="turquoiseDark" />
            <Roboto color="turquoiseDark"> Icon name copied!</Roboto>
          </Row>
        )}
      </Row>
      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
        {icons.map(icon => (
          <Icon key={icon} onPress={handleCopy(icon)} name={icon} />
        ))}
      </View>
    </View>
  )
}

() => {
  const [alertVisible, toggleAlert] = useState(false)
  const timeout = useRef(null)
  const handleCopy = icon => () => {
    timeout.current && clearTimeout(timeout.current)
    toggleAlert(false)
    navigator.clipboard.writeText(icon).then(() => toggleAlert(true))
  }
  useEffect(() => {
    if (alertVisible) {
      timeout.current = setTimeout(() => toggleAlert(false), 3000)
    }
    return () => {
      timeout.current && clearTimeout(timeout.current)
    }
  }, [alertVisible])
  const icons = Object.values(MobileUiKitIcons)
  return (
    <View>
      <Row
        style={{
          height: 100,
        }}
      >
        {alertVisible && (
          <Row>
            <Icon name="verified-check" color="turquoiseDark" />
            <Roboto color="turquoiseDark"> Icon name copied!</Roboto>
          </Row>
        )}
      </Row>
      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
        {icons.map(icon => (
          <Icon key={icon} onPress={handleCopy(icon)} name={icon} />
        ))}
      </View>
    </View>
  )
}

Basic usage



<Row>
  <Icon name="docplanner" />
</Row>

<Row>
  <Icon name="docplanner" />
</Row>

Colors



<Row>
  <Icon name="docplanner" />
  <Icon color="blue" name="docplanner" />
  <Icon color="turquoise" name="docplanner" />
  <Icon color="purple" name="docplanner" />
  <Icon color="yellow" name="docplanner" />
  <Icon color="red" name="docplanner" />
</Row>

<Row>
  <Icon name="docplanner" />
  <Icon color="blue" name="docplanner" />
  <Icon color="turquoise" name="docplanner" />
  <Icon color="purple" name="docplanner" />
  <Icon color="yellow" name="docplanner" />
  <Icon color="red" name="docplanner" />
</Row>

Regular icon sizes



<Row>
  <Icon size="xs" name="docplanner" />
  <Icon size="md" name="docplanner" />
  <Icon size="lg" name="docplanner" />
  <Icon size="xl" name="docplanner" />
  <Icon size="2xl" name="docplanner" />
  <Icon size="3xl" name="docplanner" />
  <Icon size="4xl" name="docplanner" />
  <Icon size="5xl" name="docplanner" />
</Row>

<Row>
  <Icon size="xs" name="docplanner" />
  <Icon size="md" name="docplanner" />
  <Icon size="lg" name="docplanner" />
  <Icon size="xl" name="docplanner" />
  <Icon size="2xl" name="docplanner" />
  <Icon size="3xl" name="docplanner" />
  <Icon size="4xl" name="docplanner" />
  <Icon size="5xl" name="docplanner" />
</Row>

Clickable icon sizes

Please note extra bit of padding around the icon to make the clickable area bigger.



<Row>
  <Icon onPress={() => {}} size="xs" name="docplanner" />
  <Icon onPress={() => {}} size="md" name="docplanner" />
  <Icon onPress={() => {}} size="lg" name="docplanner" />
  <Icon onPress={() => {}} size="xl" name="docplanner" />
  <Icon onPress={() => {}} size="2xl" name="docplanner" />
  <Icon onPress={() => {}} size="3xl" name="docplanner" />
  <Icon onPress={() => {}} size="4xl" name="docplanner" />
  <Icon onPress={() => {}} size="5xl" name="docplanner" />
</Row>

<Row>
  <Icon onPress={() => {}} size="xs" name="docplanner" />
  <Icon onPress={() => {}} size="md" name="docplanner" />
  <Icon onPress={() => {}} size="lg" name="docplanner" />
  <Icon onPress={() => {}} size="xl" name="docplanner" />
  <Icon onPress={() => {}} size="2xl" name="docplanner" />
  <Icon onPress={() => {}} size="3xl" name="docplanner" />
  <Icon onPress={() => {}} size="4xl" name="docplanner" />
  <Icon onPress={() => {}} size="5xl" name="docplanner" />
</Row>

Offset

Having an extra bit of padding in a clickable icon sometimes makes it difficult to align it properly. For this reason, we added offset prop that neutralizes this padding with a negative margin.

Problem



First item

Second item

<View>
  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
    <Icon onPress={() => {}} size="sm" name="close" />
    <Roboto>First item</Roboto>
  </View>
  <DpDivider />
  <View
    style={{
      flexDirection: 'row',
      alignItems: 'center',
      paddingVertical: 12,
    }}
  >
    <Roboto>Second item</Roboto>
  </View>
</View>

<View>
  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
    <Icon onPress={() => {}} size="sm" name="close" />
    <Roboto>First item</Roboto>
  </View>
  <DpDivider />
  <View
    style={{
      flexDirection: 'row',
      alignItems: 'center',
      paddingVertical: 12,
    }}
  >
    <Roboto>Second item</Roboto>
  </View>
</View>

Solution

Adding offset to <Icon />



First item

Second item

<View>
  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
    <Icon onPress={() => {}} offset="left" size="sm" name="close" />
    <Roboto>First item</Roboto>
  </View>
  <DpDivider />
  <View
    style={{
      flexDirection: 'row',
      alignItems: 'center',
      paddingVertical: 12,
    }}
  >
    <Roboto>Second item</Roboto>
  </View>
</View>

<View>
  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
    <Icon onPress={() => {}} offset="left" size="sm" name="close" />
    <Roboto>First item</Roboto>
  </View>
  <DpDivider />
  <View
    style={{
      flexDirection: 'row',
      alignItems: 'center',
      paddingVertical: 12,
    }}
  >
    <Roboto>Second item</Roboto>
  </View>
</View>

Docplanner Mobile UI

Icon @deprecated use DpIcons instead

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

Properties