|
- Color Name
- A theme color - |
-
- {colors.map(({ themeName }) => (
- {themeName}
- ))}
- |
-
|
- Variant
- - A number level or element type - |
-
- Levels
- {levels.map(level => (
- {level}
- ))}
- - Element types - {[ - 'background', - 'disabled-border', - 'border', - 'icon', - 'active-border', - 'focus', - 'graphic', - 'default', - 'light-text', - 'hover', - 'text', - 'active', - 'dark-text', - ].map(element => ( - {element}
- ))}
- |
-
+ {row.original.color}
+
+ ),
+ },
+ {
+ Header: 'Elements',
+ Cell: ({ row }: DataTableTypes) => (
+
+ {row.original.element}
+
+ ),
+ },
+ {
+ Header: 'Levels',
+ Cell: ({ row }: DataTableTypes) => (
+
+ {row.original.level}
+
+ ),
+ },
+ ]}
+ >
+
@@ -253,37 +274,48 @@ export default function ColorsPage({ data }: IColorsPage) {
{'.{use}-{color}-{level}'}
-
-
-
- Use
- Color
- Level
-
-
-
-
-
- bg-
-
- border-
-
- text-
-
-
-
- {colors.map(({ themeName }) => (
- {themeName}-
- ))}
-
-
- {levels.map(level => (
- {level}
- ))}
-
-
-
-
+
+ {
+ return {
+ use: Object.keys(utilityClasses)[index],
+ color: themeName,
+ level: levels[index],
+ }
+ })
+ }
+ columns={[
+ {
+ Header: 'Use',
+ Cell: ({ row }: DataTableTypes) => (
+
+ {row.original.use && `${row.original.use}-`}
+
+ ),
+ },
+ {
+ Header: 'Color',
+ Cell: ({ row }: DataTableTypes) => (
+
+ {row.original.color}-
+
+ ),
+ },
+ {
+ Header: 'Level',
+ Cell: ({ row }: DataTableTypes) => (
+
+ {row.original.level}
+
+ ),
+ },
+ ]}
+ >
+
+
Background Fills
diff --git a/www/src/pages/foundations/elevation.jsx b/www/src/pages/foundations/elevation.tsx
similarity index 84%
rename from www/src/pages/foundations/elevation.jsx
rename to www/src/pages/foundations/elevation.tsx
index f30e551467d..e32dfd26704 100644
--- a/www/src/pages/foundations/elevation.jsx
+++ b/www/src/pages/foundations/elevation.tsx
@@ -4,10 +4,12 @@ import SEO from '../../components/SEO';
import Layout from '../../components/PageLayout';
import {
Button, Form, Container,
- Toast, Icon, IconButtonWithTooltip,
+ Toast, Icon, IconButtonWithTooltip, DataTable,
// eslint-disable-next-line import/no-unresolved
+// @ts-ignore
} from '~paragon-react';
// eslint-disable-next-line import/no-unresolved
+// @ts-ignore
import { Close, WbSunny, DoDisturb } from '~paragon-icons';
const boxShadowSides = ['down', 'up', 'right', 'left', 'centered'];
@@ -22,10 +24,10 @@ const controlsProps = [
{ key: 'color', name: 'Color' },
];
-const BoxShadowNode = () => {
+function BoxShadowNode() {
const [showToast, setShowToast] = useState(false);
- const isBoxShadowCopied = (level, side) => {
+ const isBoxShadowCopied = (level: number, side: string) => {
navigator.clipboard.writeText(`@include pgn-box-shadow(${level}, "${side}");`);
setShowToast(true);
};
@@ -61,9 +63,28 @@ const BoxShadowNode = () => {
);
-};
+}
+
+export interface IBoxShadowToolkit {
+ id: number,
+ updateBoxShadow: Function,
+ removeBoxShadowLayer: Function,
+ disableBoxShadowLayer: Function,
+ enableBoxShadowLayer: Function,
+ isDisabled: boolean,
+ canDelete: boolean,
+}
-const BoxShadowToolkit = ({
+export interface IBoxShadowModel {
+ x: number,
+ y: number,
+ blur: number,
+ spread: number,
+ color: string,
+ inset: boolean,
+}
+
+function BoxShadowToolkit({
id,
updateBoxShadow,
removeBoxShadowLayer,
@@ -71,8 +92,8 @@ const BoxShadowToolkit = ({
enableBoxShadowLayer,
isDisabled,
canDelete,
-}) => {
- const [boxShadowModel, setBoxShadowModel] = useState({
+}: IBoxShadowToolkit) {
+ const [boxShadowModel, setBoxShadowModel] = useState({
x: 0,
y: 0,
blur: 0,
@@ -81,7 +102,7 @@ const BoxShadowToolkit = ({
inset: false,
});
- const updateBoxShadowModel = (property, value) => {
+ const updateBoxShadowModel = (property: string, value: boolean | string) => {
global.analytics.track('openedx.paragon.elevation.generator.updated', { property, value });
const newBoxShadowModel = {
@@ -109,7 +130,7 @@ const BoxShadowToolkit = ({
max="100"
type={key === 'color' ? 'color' : 'range'}
defaultValue="0"
- onChange={(e) => updateBoxShadowModel(key, e.target.value)}
+ onChange={(e: React.ChangeEvent) => updateBoxShadowModel(key, e.target.value)}
disabled={isDisabled}
/>
@@ -162,7 +183,7 @@ const BoxShadowToolkit = ({
);
-};
+}
BoxShadowToolkit.propTypes = {
updateBoxShadow: PropTypes.func.isRequired,
@@ -174,10 +195,10 @@ BoxShadowToolkit.propTypes = {
canDelete: PropTypes.bool.isRequired,
};
-const BoxShadowGenerator = () => {
+function BoxShadowGenerator() {
const [boxShadows, setBoxShadows] = useState([{ id: 1, enabled: true, style: DEFAULT_BOX_SHADOW }]);
- const updateBoxShadow = (shadow, id) => {
+ const updateBoxShadow = (shadow: { x: string, y: string, blur: string, spread: string, color: string, inset: string }, id: number) => {
setBoxShadows(boxShadows.map(item => {
if (id === item.id) {
return {
@@ -199,12 +220,12 @@ const BoxShadowGenerator = () => {
]);
};
- const removeBoxShadowLayer = (toolkitId) => {
+ const removeBoxShadowLayer = (toolkitId: number) => {
global.analytics.track('openedx.paragon.elevation.shadow-generator.layer.removed');
setBoxShadows(boxShadows.filter((shadow) => shadow.id !== toolkitId));
};
- const disableBoxShadowLayer = (toolkitId) => {
+ const disableBoxShadowLayer = (toolkitId: number) => {
global.analytics.track('openedx.paragon.elevation.shadow-generator.layer.disabled');
const updatedBoxShadows = boxShadows
.map((shadow) => {
@@ -216,7 +237,7 @@ const BoxShadowGenerator = () => {
setBoxShadows(updatedBoxShadows);
};
- const enableBoxShadowLayer = (toolkitId) => {
+ const enableBoxShadowLayer = (toolkitId: string | number) => {
global.analytics.track('openedx.paragon.elevation.shadow-generator.layer.enabled');
const updatedBoxShadows = boxShadows
.map((shadow) => {
@@ -262,7 +283,16 @@ const BoxShadowGenerator = () => {
);
-};
+}
+
+export type DataTableTypes = {
+ row: {
+ original: {
+ side: string,
+ level: string,
+ }
+ },
+}
export default function ElevationPage() {
const levelTitle = boxShadowLevels.map(level => (
@@ -310,32 +340,32 @@ export default function ElevationPage() {
pgn-box-shadow($level, $side)
| - Direction name - | -
- {boxShadowSides.map(side => (
- {side}
- ))}
- |
-
|
- Levels
- - Box-shadows elevation levels - |
-
- {boxShadowLevels.map(level => (
- {level}
- ))}
- |
-
+ {row.original.side}
+
+ ),
+ },
+ {
+ Header: 'Levels',
+ Cell: ({ row }: DataTableTypes) => (
+
+ {row.original.level}
+
+ ),
+ },
+ ]}
+ >
+
- Headings- |
- ||
|---|---|---|
| Desktop | -Mobile | -CSS Class | -
+ Headings+
+ - Heading {headingSize} + + Heading {row.original.size} |
-
- - Heading {headingSize} - - |
-
- .h{headingSize}
- |
-
|
- Heading Label - |
-
- .heading-label
- |
- |
- Body- |
- ||
| Desktop & Mobile | -CSS Class | -|
|
- Large Body - |
-
- .lead
- |
- |
|
- Body - |
- ||
|
- Small Body - |
-
- .small
- |
- |
|
- Extra Small Body - |
-
- .x-small
- |
- |
|
- Micro Body - |
-
- .micro
- |
- |
- Display- |
- ||
| Desktop | -Mobile | -CSS Class | -
|
- - Display {displaySize} - - |
-
- - Display {displaySize} - - |
-
- .display-{displaySize}
- |
-
- Links- |
- ||
| - Standalone Link - | -
-
- The default style for a tags that don't appear in
- a p tag.
-
- |
- |
|
- - An{' '} - - inline link - {' '} - in a sentence. - - |
-
-
- For links inside a p or with the{' '}
- .inline-link class name.
-
- |
- |
| - - Muted, Standalone Link - - | -
-
- .muted-link not in a p tag.
-
- |
- |
|
- - An{' '} - - muted, inline link - {' '} - in a sentence. - - |
-
-
- For .muted-link links inside a p or
- with the .inline-link class name.
-
- |
-
- Decoration and Emphasis- |
- |
|---|---|
| Style | -CSS Class | -
|
- Lowercase text. - |
-
- .text-lowercase
- |
-
|
- uppercase text. - |
-
- .text-uppercase
- |
-
|
- capitalize text. - |
-
- .text-capitalize
- |
-
|
- No decorations. - |
-
- .text-decoration-none
- |
-
|
- Italic text. - |
-
- .text-italic
- |
-
|
- Bold text. - |
-
- .font-weight-bold
- |
-
|
- Regular text. - |
-
- .font-weight-normal
- |
-
- Alignment- |
- |
|---|---|
| Style | -CSS Class | -
|
- left text. - |
-
- .text-left
- |
-
|
- right text. - |
-
- .text-right
- |
-
|
- center text. - |
-
- .text-center
- |
-
|
- justify text. -- At the edge of forever tendrils of gossamer clouds corpus - callosum culture Vangelis dispassionate extraterrestrial - observer. - - |
-
- .text-justify
- |
-
|
- wrap text. - |
-
- .text-wrap
- |
-
|
- nowrap text. - |
-
- .text-nowrap
- |
-
+ Heading {row.original.size} +
+
+ .h{row.original.size}
+
+ ),
+ },
+ ]}
+ >
+ + {row.original.text} +
+ ), + }, + { + Header: 'CSS Class', + Cell: ({ row }: DataTableTypes) => ( +
+ .{row.original.className}
+
+ ),
+ }
+ ]}
+ >
+ + {row.original.text} +
+ ), + }, + { + Header: 'CSS Class', + Cell: ({ row }: DataTableTypes) => ( +
+ .{row.original.className}
+
+ ),
+ }
+ ]}
+ >
+