HighPoint UI elements
Library of common UI elements used by HighPoint's web applications.
yarn add @highpoint/ui-elements
Import the components from @highpoint/ui-elements. For example:
``js`
import { Checkbox } from '@highpoint/ui-elements';
Import the components from @highpoint/ui-elements/icons. For example:
`js`
import { ChevronLeft } from '@highpoint/ui-elements/icons';
If you are using typescript, to get full theme support, add 'node_modules/@highpoint/ui-elements/types' to the 'typeRoots' field in tsconfig.json.
Live Component Demos and Documentation
``
import { Theme } from '@highpoint/ui-elements';
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'
};
`
#### Typography variants
``
header 1 -> h1
header 2 -> h2
header 3 -> h3
header 4 -> h4
basic -> body1
small -> body2
tiny -> caption
Render Prop. Access themeObject.
``
#### 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
`
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';
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
#### isInPortal
Determines if the page is being displayed within a PeopleSoft portal.
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.