@workday/canvas-kit-react 8.0.0-alpha.150-next.2 → 8.0.0-alpha.155-next.0

package/text/index.ts

@@ -0,0 +1,3 @@
+export * from './lib/Text';
+export * from './lib/TypeLevelComponents';
+export * from './lib/LabelText';

package/text/lib/LabelText.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import {Property} from 'csstype';
+import {createComponent, styled, StyledType} from '@workday/canvas-kit-react/common';
+import {Text, TextProps} from '@workday/canvas-kit-react/text';
+import {inputColors} from '@workday/canvas-kit-react/tokens';
+
+export interface TypeLabelProps extends TextProps {
+  cursor?: Property.Cursor;
+  disabled?: boolean;
+}
+
+const StyledLabel = styled(Text.as('label'))<StyledType & TypeLabelProps>(
+  ({cursor, disabled, variant}) => ({
+    color: disabled && variant !== 'inverse' ? inputColors.disabled.text : undefined,
+    cursor: cursor && !disabled ? cursor : 'default',
+    opacity: disabled && variant === 'inverse' ? '.4' : '1',
+  })
+);
+
+export const LabelText = createComponent('label')({
+  displayName: 'Label',
+  Component: (elemProps: TypeLabelProps, ref, Element) => {
+    return <StyledLabel ref={ref} as={Element} typeLevel="subtext.large" {...elemProps} />;
+  },
+});

package/text/lib/Text.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import {createComponent} from '@workday/canvas-kit-react/common';
+// type changes no need
+import {type, CanvasTypeHierarchy, CanvasTypeVariants} from '@workday/canvas-kit-react/tokens';
+import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
+
+export interface TextProps extends BoxProps {
+  /**
+   * Type token as string with level and size separated by dot.
+   */
+   typeLevel?: `${keyof CanvasTypeHierarchy}.${'large'|'medium'|'small'}`;
+  /**
+   * Type variant token names: `error`, `hint` or `inverse`.
+   */
+  variant?: keyof CanvasTypeVariants;
+}
+
+/**
+ * Function returns updated props by token and variant values
+ */
+const validateProps = ({typeLevel, variant, ...props}: TextProps) => {
+  let updatedProps: any = props;
+  const tokenPropNames = [
+    'color',
+    'fontFamily',
+    'fontSize',
+    'fontWeight',
+    'letterSpacing',
+    'lineHeight',
+  ];
+
+  /*
+  If token provided it updates undefined values of token styles:
+  `fontFamily`, `fontSize`, `lineHeight`, `fontWeight`, `color` 
+  by replacing them by token value
+  */
+  if (typeLevel) {
+    const [level, size] = typeLevel.split('.') as [
+      keyof CanvasTypeHierarchy,
+      'large' | 'medium' | 'small'
+    ];
+    const tokenProps = type.levels[level][size];
+
+    tokenPropNames.forEach(item => {
+      if (!props[item as keyof typeof props]) {
+        updatedProps[item] = tokenProps[item as keyof typeof tokenProps];
+      }
+    });
+  }
+
+  // If variant provided it updates color value by variant color
+  if (variant) {
+    updatedProps = {...updatedProps, ...type.variants[variant]};
+  }
+
+  return updatedProps;
+};
+
+export const Text = createComponent('span')({
+  displayName: 'Text',
+  Component: ({children, ...elemProps}: TextProps, ref, Element) => (
+    <Box ref={ref} as={Element} {...validateProps(elemProps)}>
+      {children}
+    </Box>
+  ),
+});

package/text/lib/TypeLevelComponents.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {Text, TextProps} from '@workday/canvas-kit-react/text';
+
+/**
+ * Props interface for type level specific component:
+ * Title, Heading, BodyText, Subtext.
+ */
+export interface TypeLevelProps extends Omit<TextProps, 'typeLevel'> {
+  size: 'large' | 'medium' | 'small';
+}
+
+export const Subtext = createComponent('p')({
+  displayName: 'Subtext',
+  Component: ({size, ...elemProps}: TypeLevelProps, ref, Element) => {
+    const typeLevel = `subtext.${size}` as TextProps['typeLevel'];
+    return <Text ref={ref} as={Element} typeLevel={typeLevel} {...elemProps} />;
+  },
+});
+
+export const BodyText = createComponent('p')({
+  displayName: 'BodyText',
+  Component: ({size, ...elemProps}: TypeLevelProps, ref, Element) => {
+    const typeLevel = `body.${size}` as TextProps['typeLevel'];
+    return <Text ref={ref} as={Element} typeLevel={typeLevel} {...elemProps} />;
+  },
+});
+
+export const Heading = createComponent('h2')({
+  displayName: 'Heading',
+  Component: ({size, ...elemProps}: TypeLevelProps, ref, Element) => {
+    const typeLevel = `heading.${size}` as TextProps['typeLevel'];
+    return <Text ref={ref} as={Element} typeLevel={typeLevel} {...elemProps} />;
+  },
+});
+
+export const Title = createComponent('h1')({
+  displayName: 'Title',
+  Component: ({size, ...elemProps}: TypeLevelProps, ref, Element) => {
+    const typeLevel = `title.${size}` as TextProps['typeLevel'];
+    return <Text ref={ref} as={Element} typeLevel={typeLevel} {...elemProps} />;
+  },
+});

package/text/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../dist/commonjs/text",
+  "module": "../dist/es6/text",
+  "sideEffects": false,
+  "types": "../dist/es6/text"
+}