vendor
These are components specifically for the vendor libraries. Items that would be shared with main-app get moved to Core Components.
Initial Setup
npm install @datacamp/styleguide
Import the file
dc-vendor.scss from node_modules and remove imports for local files covered within the style guide.
Updates
npm update @datacamp/styleguideReleases will include instructions for necessary updates. For the time being updates should be implemented by the front-end team.
Diff2html
The diff2html, is currently used in teach-editor-app-v2 in the issue detail to show the diff between Submitted Answer and Solution.
Import react select vendor styles: @import {local path to the package}/vendor/components/diff2html;
<div class="d2h-wrapper dc-u-pa-24">
<div id="d2h-716523" class="d2h-file-wrapper" data-lang="">
<div class="d2h-file-header">
<span class="d2h-file-name-wrapper">
<span class="d2h-icon-wrapper">
<svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">
<path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>
</svg>
</span>
<span class="d2h-file-name">Submitted Answer </span>
<span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span>
</span>
</div>
<div class="d2h-files-diff">
<div class="d2h-file-side-diff">
<div class="d2h-code-wrapper">
<table class="d2h-diff-table">
<tbody class="d2h-diff-tbody">
<tr>
<td class="d2h-code-side-linenumber d2h-info"></td>
<td class="d2h-info">
<div class="d2h-code-side-line d2h-info">@@ -1,3 +1,11 @@</div>
</td>
</tr>
<tr>
<td class="d2h-code-side-linenumber d2h-del">
1
</td>
<td class="d2h-del">
<div class="d2h-code-side-line d2h-del">
<span class="d2h-code-line-prefix">-</span>
<span class="d2h-code-line-ctn"><del>--</del> <del>Try</del> <del>running</del> <del>me!</del></span>
</div>
</td>
</tr>
<tr>
<td class="d2h-code-side-linenumber">
2
</td>
<td class="">
<div class="d2h-code-side-line">
<span class="d2h-code-line-prefix"> </span>
<span class="d2h-code-line-ctn">SELECT 'DataCamp <3SQL'</span>
</div>
</td>
</tr>
<tr>
<td class="d2h-code-side-linenumber d2h-del">
3
</td>
<td class="d2h-del">
<div class="d2h-code-side-line d2h-del">
<span class="d2h-code-line-prefix">-</span>
<span class="d2h-code-line-ctn"><del>AS result;</del></span>
</div>
</td>
</tr>
<tr>
<td class="d2h-code-side-linenumber d2h-cntx">
</td>
<td class="d2h-cntx">
<div class="d2h-code-side-line d2h-cntx">
</div>
</td>
</tr>
<tr>
<td class="d2h-code-side-linenumber d2h-cntx">
</td>
<td class="d2h-cntx">
<div class="d2h-code-side-line d2h-cntx">
</div>
</td>
</tr>
<tr>
<td class="d2h-code-side-linenumber d2h-cntx">
</td>
<td class="d2h-cntx">
<div class="d2h-code-side-line d2h-cntx">
</div>
</td>
</tr>
<tr>
<td class="d2h-code-side-linenumber d2h-cntx">
</td>
<td class="d2h-cntx">
<div class="d2h-code-side-line d2h-cntx">
</div>
</td>
</tr>
<tr>
<td class="d2h-code-side-linenumber d2h-cntx">
</td>
<td class="d2h-cntx">
<div class="d2h-code-side-line d2h-cntx">
</div>
</td>
</tr>
<tr>
<td class="d2h-code-side-linenumber d2h-cntx">
</td>
<td class="d2h-cntx">
<div class="d2h-code-side-line d2h-cntx">
</div>
</td>
</tr>
<tr>
<td class="d2h-code-side-linenumber d2h-cntx">
</td>
<td class="d2h-cntx">
<div class="d2h-code-side-line d2h-cntx">
</div>
</td>
</tr>
<tr>
<td class="d2h-code-side-linenumber d2h-cntx">
</td>
<td class="d2h-cntx">
<div class="d2h-code-side-line d2h-cntx">
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="d2h-file-side-diff">
<div class="d2h-code-wrapper">
<table class="d2h-diff-table">
<tbody class="d2h-diff-tbody">
<tr>
<td class="d2h-code-side-linenumber d2h-info"></td>
<td class="d2h-info">
<div class="d2h-code-side-line d2h-info"></div>
</td>
</tr>
<tr>
<td class="d2h-code-side-linenumber d2h-ins">
1
</td>
<td class="d2h-ins">
<div class="d2h-code-side-line d2h-ins">
<span class="d2h-code-line-prefix">+</span>
<span class="d2h-code-line-ctn"><ins>#</ins> <ins>Plot</ins> <ins>the</ins> <ins>portfolio value and name it "Portfolio Value" </ins></span>
</div>
</td>
</tr>
<tr>
<td class="d2h-code-side-linenumber d2h-ins">
2
</td>
<td class="d2h-ins">
<div class="d2h-code-side-line d2h-ins">
<span class="d2h-code-line-prefix">+</span>
<span class="d2h-code-line-ctn"><ins>plot(data[,"value"],</ins> <ins>main</ins> <ins>=</ins> <ins>"Portfolio Value")</ins></span>
</div>
</td>
</tr>
<tr>
<td class="d2h-code-side-linenumber d2h-ins">
3
</td>
<td class="d2h-ins">
<div class="d2h-code-side-line d2h-ins">
<span class="d2h-code-line-prefix">+</span>
</div>
</td>
</tr>
<tr>
<td class="d2h-code-side-linenumber d2h-ins">
4
</td>
<td class="d2h-ins">
<div class="d2h-code-side-line d2h-ins">
<span class="d2h-code-line-prefix">+</span>
<span class="d2h-code-line-ctn"># Plot the portfolio return name it "Portfolio Return"</span>
</div>
</td>
</tr>
<tr>
<td class="d2h-code-side-linenumber d2h-ins">
5
</td>
<td class="d2h-ins">
<div class="d2h-code-side-line d2h-ins">
<span class="d2h-code-line-prefix">+</span>
<span class="d2h-code-line-ctn">plot(data[, "return"], main = "Portfolio Return")</span>
</div>
</td>
</tr>
<tr>
<td class="d2h-code-side-linenumber d2h-ins">
6
</td>
<td class="d2h-ins">
<div class="d2h-code-side-line d2h-ins">
<span class="d2h-code-line-prefix">+</span>
</div>
</td>
</tr>
<tr>
<td class="d2h-code-side-linenumber d2h-ins">
7
</td>
<td class="d2h-ins">
<div class="d2h-code-side-line d2h-ins">
<span class="d2h-code-line-prefix">+</span>
<span class="d2h-code-line-ctn"># Plot a histogram of portfolio return </span>
</div>
</td>
</tr>
<tr>
<td class="d2h-code-side-linenumber d2h-ins">
8
</td>
<td class="d2h-ins">
<div class="d2h-code-side-line d2h-ins">
<span class="d2h-code-line-prefix">+</span>
<span class="d2h-code-line-ctn">hist(data[, "return"], probability = TRUE)</span>
</div>
</td>
</tr>
<tr>
<td class="d2h-code-side-linenumber d2h-ins">
9
</td>
<td class="d2h-ins">
<div class="d2h-code-side-line d2h-ins">
<span class="d2h-code-line-prefix">+</span>
</div>
</td>
</tr>
<tr>
<td class="d2h-code-side-linenumber d2h-ins">
10
</td>
<td class="d2h-ins">
<div class="d2h-code-side-line d2h-ins">
<span class="d2h-code-line-prefix">+</span>
<span class="d2h-code-line-ctn"># Add a density line</span>
</div>
</td>
</tr>
<tr>
<td class="d2h-code-side-linenumber d2h-ins">
11
</td>
<td class="d2h-ins">
<div class="d2h-code-side-line d2h-ins">
<span class="d2h-code-line-prefix">+</span>
<span class="d2h-code-line-ctn">lines(density(data$return), col = "red", lwd = 2)</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>React Select
The React Select v2, requires adding properties className="dc-v-react-select" and
classNamePrefix="dc-v-react-select" to your react-select implementation to get DataCamp styles.
You also need to pass in components={{ DropdownIndicator }} as poperty on the Select and add this function to your component to get the correct DataCamp arrow.
const DropdownIndicator = (props) => {
return (
<components.DropdownIndicator {...props}>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path d="M.102 5.145A1.7 1.7 0 0 1 3 3.947l6.114 6.09 6.115-6.09a1.7 1.7 0 0 1 2.395 2.395l-7.3 7.299a1.7 1.7 0 0 1-2.394 0l-7.3-7.3a1.686 1.686 0 0 1-.527-1.196z" fill="#3ac" />
</svg>
</components.DropdownIndicator>
);
};
Import react select vendor styles: @import {local path to the package}/vendor/components/react-select;
React Table Pagination
React Pagination
This the pagination that is included in the React Table package. This version is designed to be used on a white background.
Import react select vendor styles: @import {local path to the package}/vendor/components/react-table-pagination;
<div class="-pagination ">
<div class="-previous">
<button type="button" class="-btn">Previous</button>
</div>
<div class="-center">
<span class="-pageInfo">Page
<div class="-pageJump">
<input type="number" value="1">
</div> of
<span class="-totalPages">1</span>
</span>
<span class="select-wrap -pageSizeOptions">
<select>
<option value="5">5 rows</option>
<option value="10">10 rows</option>
<option value="20">20 rows</option>
<option value="25">25 rows</option>
<option value="50">50 rows</option>
<option value="100">100 rows</option>
</select>
</span>
</div>
<div class="-next">
<button type="button" class="-btn">Next</button>
</div>
</div>React Pagination Shadowed
These styles are applied when you add getPaginationProps={() => ({ className: 'dc-v-react-table-pagination--shadowed' })} to your ReactTable component props. It is designed to be used on a light grey background. (ex. $dc-porcelain: #f0f4f5 )
<div class="-pagination dc-v-react-table-pagination--shadowed">
<div class="-previous">
<button type="button" class="-btn">Previous</button>
</div>
<div class="-center">
<span class="-pageInfo">Page
<div class="-pageJump">
<input type="number" value="1">
</div> of
<span class="-totalPages">1</span>
</span>
<span class="select-wrap -pageSizeOptions">
<select>
<option value="5">5 rows</option>
<option value="10">10 rows</option>
<option value="20">20 rows</option>
<option value="25">25 rows</option>
<option value="50">50 rows</option>
<option value="100">100 rows</option>
</select>
</span>
</div>
<div class="-next">
<button type="button" class="-btn">Next</button>
</div>
</div>