@highpoint/ui-elements NPM

HighPoint UI Elements

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

Installation

yarn add @highpoint/ui-elements

Usage

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

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

Usage (Icons)

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

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

Typescript

If you are using typescript, to get full theme support, add 'node_modules/@highpoint/ui-elements/types' to the 'typeRoots' field in tsconfig.json.

Components

Live Component Demos and Documentation

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://packages.pages.mhighpoint.com/ui-elements/storybook/?path=/docs/icons--primary

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.

Development

Run yarn storybook 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.