Component guidelines

UX Specification

Components are designed according to Zeplin design created by UX guild.

A component will be named with a CamelCase convention.

Every component folder should be a single component.

Prop Rule	Description
dataHook	Every component should accept a `dataHook` property which is applied as a `data-hook` attribute on the component's root element. This attribute is use as a selector in tests. A component can extend `WixComponent` in order to be a pure component and have the `dataHook` prop applied automatically.
className	The convension for allowing styling of the component's root element is by exposing a `className` property.

Prop Rule	Description
initialPropName	props which set an initial value to an identical uncontrolled state, should be named with an `initial` prefix. Read More About Controlled & Uncontrolled Components
xxxProps	If the component is wrapping another component (or native DOM element) and its props is needed - pass it with the convention of xxxProps. for example inputProps tooltipProps, etc..

For common typography, components should use the Text or Heading components.
In some cases where you can not use a component, you can use the typography-helpers.scss file directly.

Add propTypes to each component and document each property with a /** */ comment on above. (AutoDocs will make use of it)