@workday/canvas-kit-docs
Version:
Documentation components of Canvas Kit components
86 lines (85 loc) • 3.35 kB
JavaScript
import React from 'react';
import { Table } from '@workday/canvas-kit-react';
import { StatusIndicator } from '@workday/canvas-kit-preview-react';
// @ts-ignore: Cannot find module error
import { version } from '../../../lerna.json';
// When we release a new version, add the support version before the first item.
const allVersions = [
{
versionNumber: version,
documentation: 'https://github.com/Workday/canvas-kit',
},
{
versionNumber: 11,
documentation: 'https://d2krrudi3mmzzw.cloudfront.net/v11/?path=/docs/welcome--page',
},
{
versionNumber: 10,
documentation: 'https://d2krrudi3mmzzw.cloudfront.net/v10/?path=/docs/welcome--page',
},
{
versionNumber: 9,
documentation: 'https://d2krrudi3mmzzw.cloudfront.net/v9/?path=/docs/welcome--page',
},
{
versionNumber: 8,
documentation: 'https://d2krrudi3mmzzw.cloudfront.net/v8/?path=/docs/welcome--page',
},
{
versionNumber: 7,
documentation: 'https://d2krrudi3mmzzw.cloudfront.net/v7/?path=/story/welcome-getting-started--page',
},
{
versionNumber: 6,
documentation: 'https://d2krrudi3mmzzw.cloudfront.net/v7/?path=/story/welcome-getting-started--page',
},
];
const statusIndicators = {
stable: {
variant: 'blue',
label: 'Stable',
},
support: {
variant: 'green',
label: 'Support',
},
deprecated: {
variant: 'red',
label: 'No Longer Supported',
},
};
function getVersionStatusIndicator(versionNumber) {
// version from lerna is a string, so we need to do modify into a number
const currentMajorVersion = Number(version.split('.')[0]);
const modifiedVersionNumber = typeof versionNumber === 'string' ? Number(versionNumber.split('.')[0]) : versionNumber;
// if this is the current version
if (modifiedVersionNumber === currentMajorVersion) {
return statusIndicators.stable;
}
else if (modifiedVersionNumber === currentMajorVersion - 1) {
return statusIndicators.support;
}
else {
return statusIndicators.deprecated;
}
}
export const VersionTable = () => {
return (React.createElement(Table, null,
React.createElement(Table.Head, null,
React.createElement(Table.Row, null,
React.createElement(Table.Header, { scope: "col" }, "Version"),
React.createElement(Table.Header, { scope: "col" }, "Documentation"),
React.createElement(Table.Header, { scope: "col" }, "Status"))),
React.createElement(Table.Body, null, allVersions.map(item => {
const { label, variant } = getVersionStatusIndicator(item.versionNumber);
return (React.createElement(Table.Row, null,
React.createElement(Table.Cell, null,
"v",
item.versionNumber),
React.createElement(Table.Cell, null,
React.createElement("a", { href: item.documentation, target: "_blank", rel: "noreferrer" }, "Documentation")),
React.createElement(Table.Cell, null,
React.createElement(StatusIndicator, { variant: variant },
React.createElement(StatusIndicator.Label, null, label)))));
}))));
};