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:

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

Usage (Icons)

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

`js
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';
`

$3

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

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

{children}
`

#### Typography variants

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

$3

Render Prop. Access themeObject.

`
{themeObject => children}
`

#### 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
semi bold text
`

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