Skip to content

Commit

Permalink
📒 docs(display): Added docs for display
Browse files Browse the repository at this point in the history
  • Loading branch information
@Spiderpig86
Spiderpig86 committed Sep 29, 2020
1 parent ce3f124 commit 450e94d
Show file tree
Hide file tree
Showing 6 changed files with 228 additions and 3 deletions.
3 changes: 2 additions & 1 deletion cirrus-docs/src/App.tsx
View file
Expand Up @@ -57,7 +57,7 @@ import {
} from './pages/layout';

import './App.scss';
import { ClearfixUtilsPage } from './pages/utilities';
import { ClearfixUtilsPage, DisplayUtilsPage } from './pages/utilities';

function App() {
library.add(fas);
Expand Down Expand Up @@ -128,6 +128,7 @@ function App() {
<DefaultLayoutRoute path="/layout/spacing" component={SpacingPage} />

<DefaultLayoutRoute path="/utils/clearfix" component={ClearfixUtilsPage} />
<DefaultLayoutRoute path="/utils/display" component={DisplayUtilsPage} />

<BlankLayoutRoute component={_404} />
</Switch>
Expand Down
204 changes: 204 additions & 0 deletions cirrus-docs/src/pages/utilities/display/index.tsx
View file
@@ -0,0 +1,204 @@
import React from 'react';
import { Link } from 'react-router-dom';

import { TableOfContents } from '../../../layouts/components/toc';
import { Headline } from '../../../layouts/components/headline';
import { Pagination } from '../../../layouts/components/pagination';
import { CodeBlock } from '../../../layouts/components/codeblock';
import { Capitalize } from '../../../utils/string';
import { toc } from './toc';

export const DisplayUtilsPage: React.FC<any> = (props) => {
const displayNames = ['none', 'inline', 'inline-block', 'block', 'table', 'table-row', 'table-cell'];
const displays = [
{
name: 'none',
example: (
<div className="u-text-center">
<div className="bg-indigo-200 px-2 py-1 m-1 u-round">a</div>
<div className="bg-indigo-200 px-2 py-1 m-1 u-round u-none">b</div>
<div className="bg-indigo-200 px-2 py-1 m-1 u-round">c</div>
</div>
),
code: `<div class="bg-indigo-200 px-2 py-1 m-1 u-round">a</div>
<div class="bg-indigo-200 px-2 py-1 m-1 u-round u-none">b</div>
<div class="bg-indigo-200 px-2 py-1 m-1 u-round">c</div>`,
},
{
name: 'inline',
example: (
<div className="bg-red-200">
<div className="bg-indigo-200 px-2 py-1 m-1 u-round u-inline">a</div>
<div className="bg-indigo-200 px-2 py-1 m-1 u-round u-inline">b</div>
<div className="bg-indigo-200 px-2 py-1 m-1 u-round u-inline">c</div>
</div>
),
code: `<div class="bg-indigo-200 px-2 py-1 m-1 u-round u-inline">a</div>
<div class="bg-indigo-200 px-2 py-1 m-1 u-round u-inline">b</div>
<div class="bg-indigo-200 px-2 py-1 m-1 u-round u-inline">c</div>`,
},
{
name: 'inline-block',
example: (
<div>
<div className="bg-indigo-200 px-2 py-1 m-1 u-round u-inline-block">a</div>
<div className="bg-indigo-200 px-2 py-1 m-1 u-round u-inline-block">b</div>
<div className="bg-indigo-200 px-2 py-1 m-1 u-round u-inline-block">c</div>
</div>
),
code: `<div class="bg-indigo-200 px-2 py-1 m-1 u-round u-inline-block">a</div>
<div class="bg-indigo-200 px-2 py-1 m-1 u-round u-inline-block">b</div>
<div class="bg-indigo-200 px-2 py-1 m-1 u-round u-inline-block">c</div>`,
},
{
name: 'block',
example: (
<div>
<div className="bg-indigo-200 px-2 py-1 m-1 u-round u-block">a</div>
<div className="bg-indigo-200 px-2 py-1 m-1 u-round u-block">b</div>
<div className="bg-indigo-200 px-2 py-1 m-1 u-round u-block">c</div>
</div>
),
code: `<div class="bg-indigo-200 px-2 py-1 m-1 u-round u-block">a</div>
<div class="bg-indigo-200 px-2 py-1 m-1 u-round u-block">b</div>
<div class="bg-indigo-200 px-2 py-1 m-1 u-round u-block">c</div>`,
},
{
name: 'table',
example: (
<div className="u-table w-100">
<div className="u-table-row">
<div className="u-table-cell bg-indigo-200 px-4 py-2">1</div>
<div className="u-table-cell bg-indigo-300 px-4 py-2">2</div>
<div className="u-table-cell bg-indigo-200 px-4 py-2">Loooong 3</div>
</div>
<div className="u-table-row">
<div className="u-table-cell bg-indigo-300 px-4 py-2">Loooong 4</div>
<div className="u-table-cell bg-indigo-200 px-4 py-2">5</div>
<div className="u-table-cell bg-indigo-300 px-4 py-2">6</div>
</div>
</div>
),
code: `<div class="u-table w-100">
<div class="u-table-row">
<div class="u-table-cell bg-indigo-200 px-4 py-2">1</div>
<div class="u-table-cell bg-indigo-300 px-4 py-2">2</div>
<div class="u-table-cell bg-indigo-200 px-4 py-2">Loooong 3</div>
</div>
<div class="u-table-row">
<div class="u-table-cell bg-indigo-300 px-4 py-2">Loooong 4</div>
<div class="u-table-cell bg-indigo-200 px-4 py-2">5</div>
<div class="u-table-cell bg-indigo-300 px-4 py-2">6</div>
</div>
</div>`,
description: (
<p>
You can re-create the table layout using the <code>u-table</code> class. The rows, columns, and
cells can be styled with <code>u-table-row</code>, <code>u-table-column</code>, and{' '}
<code>u-table-cell</code> classes.
</p>
),
},
];
const classTable = displayNames.map((display) => {
return {
class: `u-${display}`,
style: `display: ${display};`,
};
});

return (
<main className="page-layout">
<div>
<section className="padtop" id="display">
<div className="content">
<Headline title="Display" link="#display" />
<div className="divider"></div>
<span className="tag-container group-tags">
<div className="tag tag--dark">Added</div>
<div className="tag tag--info">0.6.0</div>
</span>
<p>These are utility classes that control the display of elements.</p>

<table className="table fixed-head u-text-left">
<thead>
<tr>
<th
style={{
width: '200px',
}}
>
Class
</th>
<th>Styles</th>
</tr>
</thead>
<tbody
style={{
height: '400px',
}}
>
{classTable.map((row) => (
<tr>
<td
style={{
width: '200px',
}}
>
<code className="text-blue-600 bg-blue-100">{row.class}</code>
</td>
<td>
<code>{row.style}</code>
</td>
</tr>
))}
</tbody>
</table>
</div>
</section>

<section className="padtop" id="examples">
<div className="content">
<Headline title="Examples" link="#examples" size="4" />
<div className="divider"></div>

{displays.map((display) => {
return (
<>
<h6>{Capitalize(display.name)}</h6>

{display.description ?? (
<p>
Set the <code>u-{display.name}</code> class to make the element display with{' '}
<code>{display.name}</code>.
</p>
)}

<div className="p-3 bg-indigo-100 u-round">{display.example}</div>
<div className="space"></div>
<CodeBlock code={display.code} language="htmlbars" />
<div className="space large"></div>
</>
);
})}

<h6>Flexbox & Friends</h6>
<p>
For documentation for flexbox, view it{' '}
<Link to="./flexbox" className="u u-LR">
here
</Link>
.
</p>
</div>
</section>

<Pagination
prevLink={{ name: 'Clearfix', link: './clearfix' }}
nextLink={{ name: 'Flexbox', link: './flexbox' }}
/>
</div>
<TableOfContents entries={toc} />
</main>
);
};
15 changes: 15 additions & 0 deletions cirrus-docs/src/pages/utilities/display/toc.ts
View file
@@ -0,0 +1,15 @@
import { TableOfContentsEntry } from '../../../layouts/components/toc';

export const toc: TableOfContentsEntry[] = [
{
name: 'Display',
anchor: '#display',
children: [
{
name: 'Examples',
anchor: '#examples',
children: null,
},
],
},
];
3 changes: 2 additions & 1 deletion cirrus-docs/src/pages/utilities/index.ts
View file
@@ -1 +1,2 @@
export { ClearfixUtilsPage } from './clearfix';
export { ClearfixUtilsPage } from './clearfix';
export { DisplayUtilsPage } from './display';
2 changes: 1 addition & 1 deletion cirrus-docs/src/static/css/cirrus.min.css
View file

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions cirrus-docs/src/utils/string.ts
View file
Expand Up @@ -3,4 +3,8 @@ export function FormatString(str: string, ...val: string[]) {
str = str.replace(new RegExp(`\\(${index}\\)`, 'g'), val[index]);
}
return str;
}

export function Capitalize(str: string): string {
return str.charAt(0).toUpperCase() + str.substring(1);
}

0 comments on commit 450e94d

Please sign in to comment.