bpk-component-overlay-css

bpk-component-overlay

Backpack overlay component.

Installation

npm install bpk-component-overlay --save-dev

Usage

import React from 'react';
import BpkText from 'bpk-component-text';
import BpkOverlay, { BORDER_RADIUS_STYLES, OVERLAY_TYPES } from 'bpk-component-overlay';

export default () => (
  <div>
    { /* Basic example */}
    <BpkOverlay>
      <BpkText>Hotels in Canada</BpkText>
    </BpkOverlay>

    { /* With the tint invisible */}
    <BpkOverlay overlayType={OVERLAY_TYPES.none}>
      <BpkText>Hotels in Canada</BpkText>
    </BpkOverlay>

    { /* With a border radius style */}
    <BpkOverlay borderRadiusStyle={BORDER_RADIUS_STYLES.sm}>
      <BpkText>Hotels in Canada</BpkText>
    </BpkOverlay>

    { /* With foreground content */}
    <BpkOverlay foregroundContent={<BpkText>Visit Ottawa</BpkText>}>
      <BpkText>Hotels in Canada</BpkText>
    </BpkOverlay>
  </div>
);

Props

Property	PropType	Required	Default Value
children	Node	true	-
borderRadiusStyle	oneOf(BORDER_RADIUS_STYLES.none, BORDER_RADIUS_STYLES.sm)	false	BORDER_RADIUS_STYLES.none
className	string	false	null
foregroundContent	Node	false	null
overlayType	oneOf(OVERLAY_TYPES)	false	OVERLAY_TYPES.tint