@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
97 lines (96 loc) • 7.49 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Text = exports.textStencil = void 0;
const React = __importStar(require("react"));
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const common_1 = require("@workday/canvas-kit-react/common");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const layout_1 = require("@workday/canvas-kit-react/layout");
exports.textStencil = (0, canvas_kit_styling_1.createStencil)({
base: { name: "ojxa5", styles: "box-sizing:border-box;" },
modifiers: {
typeLevel: {
// Title level styles
'title.large': { name: "ojxa6", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-large);font-size:var(--cnvs-sys-font-size-title-large);color:var(--cnvs-sys-color-text-strong);" },
'title.medium': { name: "ojxa7", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-medium);font-size:var(--cnvs-sys-font-size-title-medium);color:var(--cnvs-sys-color-text-strong);" },
'title.small': { name: "ojxa8", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-small);font-size:var(--cnvs-sys-font-size-title-small);color:var(--cnvs-sys-color-text-strong);" },
// Heading level styles
'heading.large': { name: "ojxa9", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-heading-large);font-size:var(--cnvs-sys-font-size-heading-large);color:var(--cnvs-sys-color-text-strong);" },
'heading.medium': { name: "ojxaa", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-heading-medium);font-size:var(--cnvs-sys-font-size-heading-medium);color:var(--cnvs-sys-color-text-strong);" },
'heading.small': { name: "ojxab", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-heading-small);font-size:var(--cnvs-sys-font-size-heading-small);color:var(--cnvs-sys-color-text-strong);" },
// Body level styles
'body.large': { name: "ojxac", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-large);font-size:var(--cnvs-sys-font-size-body-large);color:var(--cnvs-sys-color-text-default);" },
'body.medium': { name: "ojxad", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-medium);font-size:var(--cnvs-sys-font-size-body-medium);color:var(--cnvs-sys-color-text-default);" },
'body.small': { name: "ojxae", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-small);font-size:var(--cnvs-sys-font-size-body-small);letter-spacing:var(--cnvs-base-letter-spacing-200);color:var(--cnvs-sys-color-text-default);" },
// Subtext level styles
'subtext.large': { name: "ojxaf", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-sys-color-text-default);" },
'subtext.medium': { name: "ojxag", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-medium);font-size:var(--cnvs-sys-font-size-subtext-medium);letter-spacing:var(--cnvs-base-letter-spacing-100);color:var(--cnvs-sys-color-text-default);" },
'subtext.small': { name: "ojxah", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-small);font-size:var(--cnvs-sys-font-size-subtext-small);letter-spacing:var(--cnvs-base-letter-spacing-50);color:var(--cnvs-sys-color-text-default);" }
},
variant: {
error: { name: "ojxai", styles: "color:var(--cnvs-sys-color-text-critical-default);" },
hint: { name: "ojxaj", styles: "color:var(--cnvs-sys-color-text-hint);" },
inverse: { name: "ojxak", styles: "color:var(--cnvs-sys-color-text-inverse);" }
}
}
}, "text-e3da06");
/**
* This is a generic base component intended to render any text.
* It has `typeLevel` and `variant` style props that simplify navigating
* our type hierarchy and using [Canvas type tokens](https://canvas.workday.com/tokens/type#type-styles).
* By default, it renders a semantic `span` element,
* but you can adjust this as needed with the `as` prop.
*
* The type hierarchy is organized into four levels, which correspond to our [Canvas type
* levels](https://canvas.workday.com/tokens/type#type-styles).
*
* - `title`: Intended to be used for large page titles.
* - `heading`: Intended to be used for headings and large text.
* - `body`: Intended to be used for standard body text.
* - `subtext`: Intended to be used for small subtext content or in tight spaces.
*
* Each level has three sizes: `large`, `medium`, and `small`.
*
* You can provide any level and size to the `typeLevel` prop, and it will apply the correct styles
* accordingly. In the example below we're providing the `subtext` level and `small` size to the
* component with the value `subtext.small`.
*
* ```tsx
* import { Text } from '@workday/canvas-kit-react/text';
*
* const CustomErrorText = () => (
* <Text typeLevel="subtext.small" variant="error">
* Error Text
* </Text>
* );
* ```
*/
exports.Text = (0, common_1.createComponent)('span')({
displayName: 'Text',
Component: ({ children, typeLevel, variant, ...elemProps }, ref, Element) => {
return (React.createElement(Element, { ref: ref, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.textStencil)({ typeLevel, variant })) }, children));
},
});