@highpoint/ui-elements v17.0.0-alpha1

HighPoint UI Elements

Library of common UI elements used by HighPoint's web applications.

Installation

yarn add @highpoint/ui-elements

Development

Run yarn dev to start the development server. When you make a change to the src files, the dist files will be rebuilt and server will automatically update.

Usage

Import the components from @highpoint/ui-elements. For example:

import { Checkbox } from '@highpoint/ui-elements';

NOTE: Because tree-shaking is sub-par, we recommend you use babel-plugin-transform-imports to transform the import statements so only the components you use get included in your bundle.

Example .babelrc:

{
  "plugins": [
    [
      "transform-imports",
      {
        "@highpoint/ui-elements": {
          "transform": "@highpoint/ui-elements/dist/es/${member}",
          "preventFullImport": true
        },
        "@highpoint/ui-elements/icons": {
          "transform": "@highpoint/ui-elements/dist/es/icons/${member}",
          "preventFullImport": true
        }
      }
    ]
  ]
}

Components

BackButton

Component to display a link that goes back in PeopleSoft's history.

If a function is passed as the child (render-props), it will be passed props � { label } � for display.

NOTE: This component will only produce output in a non-Fluid PeopleSoft environment.

Props

BackButton.propTypes = {
  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
  className: PropTypes.string
};

Example

<BackButton className="go-back">
  <span>Go Back</span>
</BackButton>

<BackButton>
  {({ label }) => (
    <span className="go-back">Go Back</span>
  )}
</BackButton>

Scrollbar

Component to tweak native scrollbar styles.

BackWrapper

Component to generate props required to display a link that goes back in PeopleSoft's history. The component does not produce any HTML itself.

Provides the following props to children: { label, url }.

NOTE: This component will only produce output in a non-Fluid PeopleSoft environment.

Props

BackWrapper.propTypes = {
  children: PropTypes.func
};

Example

<BackWrapper>
  {({ label, url }) => (
    <a href={url}>Go Back</a>
  )}
</BackWrapper>

Checkbox

Component to display an accessible, styled checkbox.

Props

Checkbox.propTypes = {
  checked: PropTypes.bool,
  className: PropTypes.string,
  color: PropTypes.string,
  defaultChecked: PropTypes.bool,
  id: PropTypes.string,
  label: PropTypes.node.isRequired,
  labelClassName: PropTypes.string,
  name: PropTypes.string,
  onChange: PropTypes.func,
  title: PropTypes.string
};

Example

<Checkbox
  checked={true}
  label={
    <span class="sr-only">
      The Label
    </span>
  }
  id="the-checkbox"
  onChange={this.onChange}
/>

Clickable

Component to display an accessible, clickable element for use when a <button> is not an option. Defaults to using a <div> as its element.

Props

Clickable.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
  onClick: PropTypes.func.isRequired,
  role: PropTypes.string,
  tabIndex: PropTypes.number,
  tag: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
  title: PropTypes.string
};

Example

<Clickable
  className="styled-button"
  onClick={this.onClick}
>
  <div className="inner-button">
    A Clickable Element
  </div>
</Clickable>

GradeColor

Render component that provides the color value given a grade point.

Props

GradeColor.propTypes = {
  children: PropTypes.func.isRequired,
  gradePoints: PropTypes.number.isRequired,
  includeInGPA: PropTypes.bool
};

Example

<GradeColor gradePoints={2.7} includeInGPA>
  {({ color }) => <div style={{color}}>C</div>}
</GradeColor>

Icon

Component to display an SVG icon.

NOTE: Requires babel-plugin-inline-react-svg.

Props

Icon.propTypes = {
  className: PropTypes.string,
  icon: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired
};

Example

import CartIcon from './cart.svg';

<Icon icon={CartIcon} />

InAppWrapper

Component that sends an is-alive post message to the parent (if one exists) and listens for responses. If an in-mobile, in-cx, or in-hybrid response is, received appropriate CSS classes are applied to the <html> element and the callback function is executed.

This component is primarily used in applications that will be wrapped by HighPoint Mobile or Highpoint Campus Experience.

Props

InAppWrapper.propTypes = {
  children: PropTypes.node.isRequired,
  inHybrid: PropTypes.func,
  inMobile: PropTypes.func,
  inCampusExperience: PropTypes.func
};

Example

<InAppWrapper inCampusExperience={() => console.log("is in CX")}>
  <App />
</InAppWrapper>

DEPRECATED (use InAppWrapper)

InMobileWrapper

Component that sends an is-alive post message to the parent (if one exists) and listens for responses. If an in-mobile or in-hybrid response is, received appropriate CSS classes are applied to the <html> element.

This component is primarily used in applications that will be wrapped by HighPoint Mobile.

Props

InMobileWrapper.propTypes = {
  children: PropTypes.node.isRequired,
  inHybrid: PropTypes.func,
  inMobile: PropTypes.func
};

Example

<InMobileWrapper>
  <App />
</InMobileWrapper>

NewWindow

Component to display an anchor that opens an duplicate of the current window. It is especially useful in PeopleSoft environments.

Props

NewWindow.propTypes = {
  children: PropTypes.node.isRequired,
  className: PropTypes.string
};

Example

<NewWindow>New Window</NewWindow>

OnEscapeListener

Component that listens for the "Escape" key to be pressed and runs a function when that happens.

Props

OnEscapeListener.propTypes = {
  children: PropTypes.node.isRequired,
  onEscape: PropTypes.func.isRequired
};

Example

<OnEscapeListener onEscape={this.closeMenu}>
  <Menu isOpen={this.state.menuIsOpen}>
    <MenuItem>Menu Item 1</MenuItem>
    <MenuItem>Menu Item 2</MenuItem>
  </Menu>
</OnEscapeListener>

OnNetworkChange

Component that listens for changes in the browser's online/offline status and runs a function when it changes.

Props

OnNetworkChange.propTypes = {
  children: PropTypes.node.isRequired,
  onNetworkChange: PropTypes.func.isRequired
};

Example

<OnNetworkChange onNetworkChange={this.onNetworkChange}>
  <App isOnline={this.state.isOnline} />
</OnNetworkChange>

Radio

Component to display an accessible, styled radio button.

Props

Radio.propTypes = {
  checked: PropTypes.bool,
  className: PropTypes.string,
  color: PropTypes.string,
  defaultChecked: PropTypes.bool,
  id: PropTypes.string,
  label: PropTypes.node.isRequired,
  labelClassName: PropTypes.string,
  name: PropTypes.string,
  onChange: PropTypes.func,
  title: PropTypes.string
};

Example

<Radio
  checked={true}
  label={
    <span class="sr-only">
      The Label
    </span>
  }
  id="the-radio"
  onChange={this.onChange}
/>

Switch

Component to display an accessible, styled switch.

Props

Switch.propTypes = {
  checked: PropTypes.bool,
  defaultChecked: PropTypes.bool,
  className: PropTypes.string,
  color: PropTypes.string,
  id: PropTypes.string,
  label: PropTypes.node.isRequired,
  labelClassName: PropTypes.string,
  name: PropTypes.string,
  onChange: PropTypes.func,
  title: PropTypes.string
};

Example

<Switch
  checked={true}
  label={
    <span class="sr-only">
      The Label
    </span>
  }
  id="the-switch"
  onChange={this.onChange}
/>

Button

Component to display Material-UI Buttons following style guide.

Props

This is in addition to all Material-UI Button props.

Button.propTypes = {
  variant: PropTypes.oneOf(['primary', 'secondary', 'destructive']).isRequired
};

Example

<Button variant={primary}>
  Primary
</Button>

IconButton

Component to render accessible icon button with tooltip.

Props

This is in addition to all Material-UI Button props.

IconButton.propTypes = {
  title: PropTypes.string.isRequired,
  className: PropTypes.string,
  style: PropTypes.object,
  fullWidth: PropTypes.bool,
  children: PropTypes.node
};

Example

<IconButton title="Expand Menu" variant="outlined">
  <SmallDotsMenu />
</IconButton>

ComboBox

Component to render a searchable select combobox.

Props

Additional props will be passed to the Downshift component.

ComboBox.propTypes = {
  label: PropTypes.string,
  value: PropTypes.string,
  onChange: PropTypes.func,
  options: PropTypes.arrayOf(PropTypes.array),
  disabled: PropTypes.bool,
  required: PropTypes.bool,
  showRequired: PropTypes.bool,
  displayNoneText: PropTypes.string,
  placeholder: PropTypes.string,
  className: PropTypes.string,
  fullWidth: PropTypes.bool,
  error: PropTypes.bool,
  helperText: PropTypes.string,
  inputClass: PropTypes.string,
  id: PropTypes.string,
  renderValue: PropTypes.func,
  searchable: PropTypes.bool,
  noOptionsText: PropTypes.string,
  textFieldProps: PropTypes.object,
  classes: PropTypes.object
};

Example

<ComboBox
  label="Combobox"
  value={state.selectValue}
  onChange={newVal => onChange(newVal)}
  options={Array.from({length: 7}, (v, i) => [i.toString(), `Option ${i.toString()}`])}
/>

MultiSelect

Component to render a multiselect box.

Props

Additional props will be passed to the Downshift component.

MultiSelect.propTypes = {
  label: PropTypes.string,
  value: PropTypes.array,
  onChange: PropTypes.func,
  options: PropTypes.arrayOf(PropTypes.array),
  disabled: PropTypes.bool,
  required: PropTypes.bool,
  showRequired: PropTypes.bool,
  placeholder: PropTypes.string,
  className: PropTypes.string,
  fullWidth: PropTypes.bool,
  error: PropTypes.bool,
  helperText: PropTypes.string,
  inputClass: PropTypes.string,
  id: PropTypes.string,
  renderValue: PropTypes.func,
  searchable: PropTypes.bool,
  noOptionsText: PropTypes.string,
  textFieldProps: PropTypes.object,
  classes: PropTypes.object,
  showAllOption: PropTypes.bool
};

Example

<MultiSelect
  label="MultiSelect"
  value={state.selectValue}
  onChange={newVal => onChange(newVal)}
  options={Array.from({length: 7}, (v, i) => [i.toString(), `Option ${i.toString()}`])}
/>

Notification

Component to display a notification at the top-right corner of the screen

Props

Notification.propTypes = {
  classes: PropTypes.object,
  open: PropTypes.bool.isRequired,
  icon: PropTypes.node.isRequired,
  title: PropTypes.string.isRequired,
  message: PropTypes.string.isRequired,
  onClose: PropTypes.func.isRequired,
  cancelText: PropTypes.string,
  confirmText: PropTypes.string,
  onConfirm: PropTypes.func,
  onCancel: PropTypes.func
};

Any other properties supplied will be spread to the MUI Snackbar component.

Example

<Notification
  open={true}
  icon={<Warning />}
  title="warning!"
  message="this is the most incredible message ever."
  onCancel={console.log}
  onConfirm={console.log}
  onClose={console.log}
/>

ModalNotification

Component to display a notification inside a modal.

Props

ModalNotification.propTypes = {
  classes: PropTypes.object,
  open: PropTypes.bool.isRequired,
  variant: PropTypes.oneOf(['success', 'failure']),
  message: PropTypes.string.isRequired,
  onClose: PropTypes.func.isRequired
};

Example

<ModalNotification
  open={true}
  onClose={console.log}
  variant="success"
  message="This is a notification message"
/>

DatePicker

Component for Date selection. (Note: This component needs to be wrapped in the material-ui-pickers MuiPickersUtilsProvider component with the proper utils declaration. https://material-ui-pickers.dev/getting-started/installation)

Props

Any additional props will be passed to the material-ui-pickers InlineDatePicker component.

DatePicker.propTypes = {
  label: PropTypes.node.isRequired,
  required: PropTypes.bool,
  onChange: PropTypes.func.isRequired,
  minDate: PropTypes.object,
  maxDate: PropTypes.object,
  value: PropTypes.object,
  fullWidth: PropTypes.bool,
  onlyCalendar: PropTypes.bool,
  bordered: PropTypes.bool
};

Example

<DatePicker
  label="Date"
  onChange={date => setDate(date)}
  value={state.date}
/>

PrintSection

The PrintSection component renders some markup only when printing.

Props

PrintSection.propTypes = {
  children: PropTypes.node.isRequired
};

Example

<PrintSection>
    {"This is the content that will be printed"}
</PrintSection>

Slider

The Slider component renders a read only input with a Slider inside a popover once you click on the input.

Props

Slider.propTypes = {
  label: PropTypes.string.isRequired,
  value: PropTypes.any.isRequired,
  onChange: PropTypes.func.isRequired,
  id: PropTypes.string,
  inputProps: PropTypes.object, // props for the input
  renderValue: PropTypes.func
};
// and also any MUI Slider props.

Example

  const [value, onChange] = useState(0);
  <Slider label="Available Seats" value={value} onChange={onChange} />;

Theme

import { Theme } from '@highpoint/ui-elements';

Theme.Provider

Wrap your app in <Provider /> to theme your Material UI components and make them match the style-guide

const config = {
  sansSerifFont: 'Arial',
  primaryAlt: 'FFF',
  primaryColor: 'F00',
  primaryText: '000'
};

<Theme.Provider config={config}> {children} </Theme.Provider>

Typography variants

header 1 -> h1
header 2 -> h2
header 3 -> h3
header 4 -> h4
basic -> body1
small -> body2
tiny -> caption

Theme.Consumer

Render Prop. Access themeObject.

<Theme.Consumer> {themeObject => children} </Theme.Consumer>

themeObject.color

const color = {
  primary,
  secondary,
  primaryDark,
  general: {
    background,
    secondaryBackground,
    line
  },
  text: {
    primary,
    secondary,
    primaryContrast
  },
  icons: {
    default,
    positive,
    negative,
    warning,
    pinned,
    friends
  }
};

Example

const redButton = css`
  button {
    background-color: ${color.icons.negative};
  }
`;

themeObject.font

const font = {
  weights: {
    light,
    regular,
    text,
    medium,
    semibold
  },
  family
};

Example

const mediumWeight = css`
  font-family: ${font.family};
`;

// or

const mediumWeight = css({
  fontWeight: font.weights.medium
});

themeObject.classes

Theme utility classes

const classes = {
  font: { light, regular, text, medium, semibold }
};

Example

const { classes } = Theme;

// This will change the h2 font weight to semibold
<Typography variant="h2" className={classes.font.semibold}> semi bold text </Typography>

Icons

Available icons: https://app.zeplin.io/project/5bf300cc350a363ec3e3a645/screen/5bf6765c9dcaf67e957c50ec

Import them like this:

import { Warning } from '@highpoint/ui-elements/icons';

Utilities

Utility functions to encapsulate common tasks.

Import them like this:

import { Utilities } from @highpoint/ui-elements;

const { isFramed } = Utilities;

datePicker

Grab default props for MaterialUI picker components.

generateId

Generates a unique ID, suitable for use as an element's id attribute.

getCrefUrl

Take a URL that was produced by %ContentReference and modifies parts of it to match the current URL.

Note: this assumes that the user is on a PeopleSoft-served page.

isFluidLayout

Determines if the page is being viewed within a Fluid wrapper.

isFramed

Determines if the page is being displayed inside an <iframe>.

isInPortal

Determines if the page is being displayed within a PeopleSoft portal.