
Basic example of the MappingCard component. Cards output processed JSON data. Different colors are available as well. 

```jsx
const mockData = require('../../fixtures/fixtures.js');

<OpMappingCard 
  typeSelect={mockData.typeSelect} 
  ruleSelect={mockData.ruleSelect} 
  dataHeader={mockData.dataHeader} 
  dataContent={mockData.dataContent}
  colorStates="uncomplete"
/>
```

```jsx
const mockData = require('../../fixtures/fixtures.js');
<OpMappingCard 
  typeSelect={mockData.typeSelect} 
  ruleSelect={mockData.ruleSelect} 
  dataHeader={mockData.dataHeader} 
  dataContent={mockData.dataContent}
  colorStates="saved"
/>
```

```jsx
const mockData = require('../../fixtures/fixtures.js');
<OpMappingCard 
  typeSelect={mockData.typeSelect} 
  ruleSelect={mockData.ruleSelect} 
  dataHeader={mockData.dataHeader} 
  dataContent={mockData.dataContent}
  colorStates="mapped"
/>
```

```jsx
const mockData = require('../../fixtures/fixtures.js');
<OpMappingCard 
  typeSelect={mockData.typeSelect} 
  ruleSelect={mockData.ruleSelect} 
  dataHeader={mockData.dataHeader} 
  dataContent={mockData.dataContent}
  colorStates="active"
/>
```