The Component Language.

Simple, modular React components that build Xalgorithms Foundation interfaces.

Installation

Icons

Type

Buttons

Inputs

Layout

Installation

For installation, download the package into your project folder.

$ yarn add xf-material-components

$ yarn add xf-material-components

For React projects import GlobalStyle into the root of your app and add the GlobalStyle component into your code.

// App.js

import { Button, InputText, InputDate } from 'xf-material-components'
import GlobalStyle from 'xf-material-components/config/global.styles'
  
function App() {
  return (
    <div className="App">
      <GlobalStyle />
      <header className="App-header">
        <Button>Hello World</Button>
        <InputText />
        <InputDate />
      </header>
    </div>
  );
}

// App.js

import { Button, InputText, InputDate } from 'xf-material-components'
import GlobalStyle from 'xf-material-components/config/global.styles'
  
function App() {
  return (
    <div className="App">
      <GlobalStyle />
      <header className="App-header">
        <Button>Hello World</Button>
        <InputText />
        <InputDate />
      </header>
    </div>
  );
}

For next.js projects, import the rootStyle into your index.js file.

// index.js

  import 'xf-material-components/config/rootStyle.css'

// index.js

  import 'xf-material-components/config/rootStyle.css'

Icons

<Icon name="callendar"/>
<Icon name="ArrowRight" />
<Icon name="ArrowLeft" />
<Icon name="Upload" />
<Icon name="Download" />
<Icon name="Reset" />
<Icon name="Trash" />
<Icon name="External" />
<Icon name="Add" />
<Icon name="Toggle" />
<Icon name="Info" />
<Icon name="Settings" />
<Icon name="Standards" />
<Icon name="Edit" />

<Icon name="callendar"/>
<Icon name="ArrowRight" />
<Icon name="ArrowLeft" />
<Icon name="Upload" />
<Icon name="Download" />
<Icon name="Reset" />
<Icon name="Trash" />
<Icon name="External" />
<Icon name="Add" />
<Icon name="Toggle" />
<Icon name="Info" />
<Icon name="Settings" />
<Icon name="Standards" />
<Icon name="Edit" />

Type

Titles

Rules as data

<h1>Rules as data</h1>
<h2>Rules as data</h2>
<h3>Rules as data</h3>
<h4>Rules as data</h4>
<h5>Rules as data</h5>

<h1>Rules as data</h1>
<h2>Rules as data</h2>
<h3>Rules as data</h3>
<h4>Rules as data</h4>
<h5>Rules as data</h5>

Serif Contrast

Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit

<h2 className="baskervilleHeadline">Your text</h2>

<h2 className="baskervilleHeadline">Your text</h2>

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ridiculus tempor, dignissim lectus justo, etiam condimentum.

Link

Italic

inline codehighlight

// paragraph
  
<p>Text<p>
<p className="baskerville">Text<p>

// inline elements

<a>Link</a>
<i>Italic</i>
<p className="baskerville"><i>Italic</i></p>
<code>inline code</code>
<mark>highlight</mark>

// paragraph
  
<p>Text<p>
<p className="baskerville">Text<p>

// inline elements

<a>Link</a>
<i>Italic</i>
<p className="baskerville"><i>Italic</i></p>
<code>inline code</code>
<mark>highlight</mark>

Code Block

import React from 'react'
import { CodeArea } from 'xf-material-components'

const YourFunction = () => {
  const yourCode = ˴this is how you use a code block˴
  return (
    <CodeArea code={yourCode}/>
  )
}

export default YourFunction

import React from 'react'
import { CodeArea } from 'xf-material-components'

const YourFunction = () => {
  const yourCode = ˴this is how you use a code block˴
  return (
    <CodeArea code={yourCode}/>
  )
}

export default YourFunction

Buttons

import React from 'react'
  import { Button } from 'xf-material-components'

  const YourFunction = () => {
    return (
      <Button>Hello World </Button>
      <Button type="clear">Hello World</Button>
      <Button type="disabled">Hello World</Button>
      <Button type="wide">Hello World</Button>  
    )
  }
  
  export default YourFunction

import React from 'react'
  import { Button } from 'xf-material-components'

  const YourFunction = () => {
    return (
      <Button>Hello World </Button>
      <Button type="clear">Hello World</Button>
      <Button type="disabled">Hello World</Button>
      <Button type="wide">Hello World</Button>  
    )
  }
  
  export default YourFunction

Inputs

Input Date

import React from 'react'
import { InputDate } from 'xf-material-components'

const YourFunction = () => {
  return (
    <InputDate 
      value={yourString} 
      placeHolder={yourString} 
      onChange={yourFunction} 
    />
  )
}

export default YourFunction

import React from 'react'
import { InputDate } from 'xf-material-components'

const YourFunction = () => {
  return (
    <InputDate 
      value={yourString} 
      placeHolder={yourString} 
      onChange={yourFunction} 
    />
  )
}

export default YourFunction

Input Text

An error

import React from 'react'
import { InputText } from 'xf-material-components'

const YourFunction = () => {
  return (
    <InputText 
      value={yourString} 
      placeHolder={yourString} 
      onChange={yourFunction} 
      errorMessage={yourString}
    />
  )
}

export default YourFunction

import React from 'react'
import { InputText } from 'xf-material-components'

const YourFunction = () => {
  return (
    <InputText 
      value={yourString} 
      placeHolder={yourString} 
      onChange={yourFunction} 
      errorMessage={yourString}
    />
  )
}

export default YourFunction

Text Area

An Error

import React from 'react'
import { TextArea } from 'xf-material-components'

const YourFunction = () => {
  return (
    <InputText 
      value={yourString} 
      placeHolder={yourString} 
      onChange={yourFunction} 
      errorMessage={yourString}
    />
  )
}

export default YourFunction

import React from 'react'
import { TextArea } from 'xf-material-components'

const YourFunction = () => {
  return (
    <InputText 
      value={yourString} 
      placeHolder={yourString} 
      onChange={yourFunction} 
      errorMessage={yourString}
    />
  )
}

export default YourFunction

Check

// need to add logic
import React from 'react'
import { InputCheck } from 'xf-material-components'

const YourFunction = () => {
  return (
    <InputCheck />
  )
}

export default YourFunction

// need to add logic
import React from 'react'
import { InputCheck } from 'xf-material-components'

const YourFunction = () => {
  return (
    <InputCheck />
  )
}

export default YourFunction

Slider

import React from 'react'
import { InputSlider } from 'xf-material-components'

const YourFunction = () => {
  return (
    <InputSlider onChange={yourFunction} />
  )
}

export default YourFunction

import React from 'react'
import { InputSlider } from 'xf-material-components'

const YourFunction = () => {
  return (
    <InputSlider onChange={yourFunction} />
  )
}

export default YourFunction

Dropdown

import React from 'react'
import { InputDropdown } from 'xf-material-components'

const YourFunction = () => {
  return (
    <InputDropdown
      onChange={yourFunction}
      options={[
        { value: 'yourValue', label: 'yourLabel' }
      ]} 
     />
  )
}

export default YourFunction

import React from 'react'
import { InputDropdown } from 'xf-material-components'

const YourFunction = () => {
  return (
    <InputDropdown
      onChange={yourFunction}
      options={[
        { value: 'yourValue', label: 'yourLabel' }
      ]} 
     />
  )
}

export default YourFunction