CATALYST UI library

UI components for Catalyst Applications

Setup

After Cloning Down this Repository...

• Install dependencies: npm install
• Run Storybook: npm run storybook
• Visit: localhost 6006

Components

LystThemeProvider

Code Sandbox Example ** Must wrap root App component with LystThemeProvider ** ** Else render individual Lyst components as children of LystThemeProvider **

Props

| Name | Allowed Values | Description | | ----- | :-----------------------: | -------------------------: | | theme | 'orange', 'green', 'blue' | Color selection from Theme |

LystLoading

Code Sandbox Example

Props

| Name | Allowed Values | Description | | --------- | :-------------------------------: | ---------------: | | color | 'primary', 'secondary', 'inherit' | Color selection | | size | any number | Size of SVG | | thickness | any number | Thickness of SVG |

LystDrawer

CodeSandbox Example

Props

| Name | Allowed Values | Description | | --------- | :--------------------------: | ---------------------: | | menuItems | Array (see below for schema) | items of the menuItems | | open | boolean | open/close drawer |

interface menuItems: [
  {
    name: string,
    icon: Material UI Icon,
    subItems: [
      {
        name: string,
        path: string
      }
    ]
  }
]

Example

import PersonOutline from '@material-ui/icons/PersonOutline';

[
  {
    name: 'Current Resident',
    icon: PersonOutline,
    subItems: [
      {
        name: 'homepage',
        path: `/current-resident/home`
      }
    ]
  }
]

LystLoginForm

Code Sandbox Example

Props

| Name | Allowed Values | Description | | ------------ | :------------------------------: | -------------------------: | | handleChange | Function | Callback function onChange | | required | boolean | Applies required flag | | type | 'password', 'username' | Type of input Field | | variant | 'outlined', 'filled', 'standard' | Styles for input |

LystTypography

Code Sandbox Example

Props

| Name | Allowed Values | Description | | ------- | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | ------------------------: | | variant | "h1", "h2", "h3", "h4', "h5", "h6", "display1", "display2", "display3", "display4", "title", "caption", "headline", "inherit", "overline", "body1", "body2", "subtitle1", "subtitle2" | Font size/color Variation |