Skip to content

Commit

Permalink
refactor: refactoring Table on docs site
Browse files Browse the repository at this point in the history
  • Loading branch information
@PKulkoRaccoonGang
PKulkoRaccoonGang committed Dec 21, 2022
1 parent d1b7d77 commit 05ca9c9
Show file tree
Hide file tree
Showing 3 changed files with 310 additions and 463 deletions.
192 changes: 112 additions & 80 deletions www/src/pages/foundations/colors.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import SEO from '../../components/SEO';
import MeasuredItem from '../../components/MeasuredItem';
import Layout from '../../components/PageLayout';
// @ts-ignore
import { Container } from '~paragon-react'; // eslint-disable-line
import { Container, DataTable } from '~paragon-react'; // eslint-disable-line

const utilityClasses = {
bg: (color: string, level: number) => (level ? `bg-${color}-${level}` : `bg-${color}`),
Expand Down Expand Up @@ -36,6 +36,22 @@ const colors: IColors[] = [

const levels = [100, 200, 300, 400, 500, 600, 700, 800, 900];

const elements = [
'background',
'disabled-border',
'border',
'icon',
'active-border',
'focus',
'graphic',
'default',
'light-text',
'hover',
'text',
'active',
'dark-text',
];

export type ParseColorTypes = {
[key: string]: string | null;
};
Expand Down Expand Up @@ -122,6 +138,17 @@ export interface IColorsPage {
},
}

export type DataTableTypes = {
row: {
original: {
color: string,
element: string,
level: string,
use: string,
}
},
}

// eslint-disable-next-line react/prop-types
export default function ColorsPage({ data }: IColorsPage) {
parseColors(data.allCssUtilityClasses.nodes); // eslint-disable-line react/prop-types
Expand Down Expand Up @@ -180,54 +207,48 @@ export default function ColorsPage({ data }: IColorsPage) {
later upgrade paths easier. Paragon may begin to adopt CSS variables
for theming and attempt to eliminate mixins from the public api.
</p>

<table className="table pgn-doc__table">
<tbody>
<tr>
<td>
<strong>Color Name</strong>
<br />A theme color
</td>
<td>
{colors.map(({ themeName }) => (
<code key={themeName} className="mr-2">{themeName}</code>
))}
</td>
</tr>
<tr>
<td>
<strong>Variant</strong>
<br />
<p>A number level or element type</p>
</td>
<td>
<strong className="d-block">Levels </strong>
{levels.map(level => (
<code key={level} className="mr-2">{level}</code>
))}
<br />
<strong className="d-block">Element types </strong>
{[
'background',
'disabled-border',
'border',
'icon',
'active-border',
'focus',
'graphic',
'default',
'light-text',
'hover',
'text',
'active',
'dark-text',
].map(element => (
<code key={element} className="mr-2">{element}</code>
))}
</td>
</tr>
</tbody>
</table>
<div className="w-sm-50 mb-4">
<DataTable
itemCount={3}
data={
colors.map(({ themeName }, index) => {
return {
element: elements[index],
color: themeName,
level: levels[index],
}
})
}
columns={[
{
Header: 'Color Names',
Cell: ({ row }: DataTableTypes) => (
<code style={{ fontSize: '16px' }}>
{row.original.color}
</code>
),
},
{
Header: 'Elements',
Cell: ({ row }: DataTableTypes) => (
<code style={{ fontSize: '16px' }}>
{row.original.element}
</code>
),
},
{
Header: 'Levels',
Cell: ({ row }: DataTableTypes) => (
<code style={{ fontSize: '16px' }}>
{row.original.level}
</code>
),
},
]}
>
<DataTable.Table/>
</DataTable>
</div>

<h4>Example</h4>
<code className="d-block mb-2 bg-gray-100 p-3">
Expand All @@ -253,37 +274,48 @@ export default function ColorsPage({ data }: IColorsPage) {
<p>
<code>{'.{use}-{color}-{level}'}</code>
</p>
<table className="table w-50">
<thead>
<tr>
<th>Use</th>
<th>Color</th>
<th>Level</th>
</tr>
</thead>
<tbody>
<tr>
<td className="align-top pr-4">
<code>bg-</code>
<br />
<code>border-</code>
<br />
<code>text-</code>
<br />
</td>
<td className="align-top pr-4">
{colors.map(({ themeName }) => (
<code key={themeName} className="d-block">{themeName}-</code>
))}
</td>
<td className="align-top pr-4">
{levels.map(level => (
<code key={level} className="d-block">{level}</code>
))}
</td>
</tr>
</tbody>
</table>
<div className="w-sm-50 mb-4">
<DataTable
itemCount={3}
data={
colors.map(({ themeName }, index) => {
return {
use: Object.keys(utilityClasses)[index],
color: themeName,
level: levels[index],
}
})
}
columns={[
{
Header: 'Use',
Cell: ({ row }: DataTableTypes) => (
<code style={{ fontSize: '16px' }}>
{row.original.use && `${row.original.use}-`}
</code>
),
},
{
Header: 'Color',
Cell: ({ row }: DataTableTypes) => (
<code style={{ fontSize: '16px' }}>
{row.original.color}-
</code>
),
},
{
Header: 'Level',
Cell: ({ row }: DataTableTypes) => (
<code style={{ fontSize: '16px' }}>
{row.original.level}
</code>
),
},
]}
>
<DataTable.Table/>
</DataTable>
</div>

<h3>Background Fills</h3>
<div className="d-flex flex-wrap">
Expand Down
Loading

0 comments on commit 05ca9c9

Please sign in to comment.