How to use @workday/canvas-kit-react-core - 10 common examples

import * as React from 'react';
import ColorInput from './ColorInput';
import {TextInputProps} from '@workday/canvas-kit-react-text-input';
import styled from '@emotion/styled';
import {colors} from '@workday/canvas-kit-react-core';

export interface ColorPreviewProps extends TextInputProps {
  value: string;
  id?: string;
}

const ColorPreviewComponent = styled(ColorInput)({
  backgroundColor: colors.frenchVanilla100,
  borderColor: colors.frenchVanilla100,
  pointerEvents: 'none',
});

export default class ColorPreview extends React.Component {
  public render() {
    // TODO: Standardize on prop spread location (see #150)
    const {id, value, ...elemProps} = this.props;

    return (
      
    );
  }
}

alignItems: 'center',
          fontSize: '14px',
          fontWeight: 700,
          height: 'inherit',
          transition: `color 150ms ease-out 0s`,
          cursor: 'pointer',
          '&:first-child > *': {
            marginLeft: 0,
          },
          '&:last-child > *': {
            marginRight: 0,
          },
          '& > *': {
            color: 'inherit',
            textDecoration: 'none',
            padding: `0px ${spacing.s}`,
            margin: `0 ${spacing.xxxs}`,
            display: 'flex',
            alignItems: 'center',
            height: 'inherit',
            '&:visited': {
              color: 'inherit', // Keeps visited links from becoming default purple
            },
          },
          '&:hover, &:active': {
            color: theme.linkColor, // Completes the illusion of sibling elements fading into the background on hover
          },
          '&.current': {
            color: theme.currentLinkColor,
            '& a': {
              cursor: 'default',
            },

*/
  onChange?: (value: string | number) => void;
}

const Container = styled('div')({
  [IconButtonCon as any]: {
    borderRadius: borderRadius.zero,
    borderWidth: '1px',
    marginLeft: '-1px',
    '&:first-child': {
      borderTopLeftRadius: spacing.xxxs,
      borderBottomLeftRadius: spacing.xxxs,
      marginLeft: 0,
    },
    '&:last-child': {
      borderTopRightRadius: spacing.xxxs,
      borderBottomRightRadius: spacing.xxxs,
    },
    '&:focus': {
      borderRadius: spacing.xxxs,
      zIndex: 1,
      animation: 'none', // reset focusRing animation
      transition: 'all 120ms, border-radius 1ms',
    },
  },
});

export default class IconButtonToggleGroup extends React.Component {
  static defaultProps = {
    value: 0,
  };

/**
   * Callback function when a button is selected, optional.
   * If the selected button has a value, it will be returned.
   * Otherwise, the index of the button in the group will be returned.
   */
  onChange?: (value: string | number) => void;
}

const Container = styled('div')({
  [IconButtonCon as any]: {
    borderRadius: borderRadius.zero,
    borderWidth: '1px',
    marginLeft: '-1px',
    '&:first-child': {
      borderTopLeftRadius: spacing.xxxs,
      borderBottomLeftRadius: spacing.xxxs,
      marginLeft: 0,
    },
    '&:last-child': {
      borderTopRightRadius: spacing.xxxs,
      borderBottomRightRadius: spacing.xxxs,
    },
    '&:focus': {
      borderRadius: spacing.xxxs,
      zIndex: 1,
      animation: 'none', // reset focusRing animation
      transition: 'all 120ms, border-radius 1ms',
    },
  },
});

/**
   * Callback function when a button is selected, optional.
   * If the selected button has a value, it will be returned.
   * Otherwise, the index of the button in the group will be returned.
   */
  onChange?: (value: string | number) => void;
}

const Container = styled('div')({
  [IconButtonCon as any]: {
    borderRadius: borderRadius.zero,
    borderWidth: '1px',
    marginLeft: '-1px',
    '&:first-child': {
      borderTopLeftRadius: spacing.xxxs,
      borderBottomLeftRadius: spacing.xxxs,
      marginLeft: 0,
    },
    '&:last-child': {
      borderTopRightRadius: spacing.xxxs,
      borderBottomRightRadius: spacing.xxxs,
    },
    '&:focus': {
      borderRadius: spacing.xxxs,
      zIndex: 1,
      animation: 'none', // reset focusRing animation
      transition: 'all 120ms, border-radius 1ms',
    },
  },
});

export default class IconButtonToggleGroup extends React.Component {

({onClose}) => ({
    marginRight: onClose ? spacing.m : undefined,
  })
);

const ToastSystemIcon = styled(SystemIcon)({
  marginRight: spacing.s,
  alignSelf: 'start',
});

const ActionButton = styled('button')({
  display: 'block',
  backgroundColor: 'transparent', // To prevent Safari from rendering grey 'buttonface' as bgcolor
  border: 'none',
  padding: 0,
  marginTop: spacing.xxxs,
  ...type.body2,
  ...type.variant.link,
});

const Message = styled('div')({
  wordBreak: 'break-word',
  wordWrap: 'break-word',
});

export default class Toast extends React.Component {
  static defaultProps = {
    icon: checkIcon as CanvasSystemIcon, // needed for TS2742 - https://github.com/microsoft/TypeScript/issues/29808
    iconColor: colors.greenApple400,
  };

  public render() {

fontSize: '14px',
          fontWeight: 700,
          height: 'inherit',
          transition: `color 150ms ease-out 0s`,
          cursor: 'pointer',
          '&:first-child > *': {
            marginLeft: 0,
          },
          '&:last-child > *': {
            marginRight: 0,
          },
          '& > *': {
            color: 'inherit',
            textDecoration: 'none',
            padding: `0px ${spacing.s}`,
            margin: `0 ${spacing.xxxs}`,
            display: 'flex',
            alignItems: 'center',
            height: 'inherit',
            '&:visited': {
              color: 'inherit', // Keeps visited links from becoming default purple
            },
          },
          '&:hover, &:active': {
            color: theme.linkColor, // Completes the illusion of sibling elements fading into the background on hover
          },
          '&.current': {
            color: theme.currentLinkColor,
            '& a': {
              cursor: 'default',
            },
            '&:hover, &:active': {

errorRingColor = inputColors.warning.border;
      errorRingBorderColor = colors.cantaloupe600;
    } else {
      return;
    }

    const errorStyles = {
      '& ~ div:first-of-type': {
        border: `1px solid ${errorRingColor}`,
        boxShadow: `0 0 0 1px ${errorRingColor}, 0 0 0 2px ${errorRingBorderColor}`,
      },
      '&:not(:checked):not(:disabled):not(:focus):hover ~ div:first-of-type': {
        borderColor: errorRingColor,
      },
      '&:checked ~ div:first-of-type': {
        borderColor: colors.blueberry400,
        boxShadow: `
            0 0 0 2px ${colors.frenchVanilla100},
            0 0 0 4px ${errorRingColor},
            0 0 0 5px ${errorRingBorderColor}`,
      },
    };
    return {
      ...errorStyles,
      // Error rings take precedence over focus
      ...mouseFocusBehavior({
        ...errorStyles,
        '&:not(:checked):focus ~ div:first-of-type': {
          border: `1px solid ${errorRingColor}`,
          boxShadow: `0 0 0 1px ${errorRingColor}, 0 0 0 2px ${errorRingBorderColor}`,
        },
      }),

marginTop: '-3px',
    marginLeft: '-3px',
    position: 'absolute',
    opacity: 0,

    '&:not(:disabled)': {
      cursor: 'pointer',
    },

    // States
    '&:not(:checked):not(:disabled):not(:focus):hover ~ div:first-of-type': {
      borderColor: inputColors.hoverBorder,
    },
    '&:checked ~ div:first-of-type': {
      borderColor: colors.blueberry400,
      backgroundColor: colors.blueberry400,
    },
    '&:disabled ~ div:first-of-type': {
      borderColor: inputColors.disabled.border,
      backgroundColor: inputColors.disabled.background,
    },
    '&:disabled:checked ~ div:first-of-type': {
      borderColor: colors.blueberry200,
      backgroundColor: colors.blueberry200,
    },

    // Focus
    '&:focus, &:active': {
      outline: 'none',
    },
    '&:focus ~ div:first-of-type': {
      borderColor: colors.blueberry400,

margin: 0,
    marginTop: '-3px',
    marginLeft: '-3px',
    position: 'absolute',
    opacity: 0,

    '&:not(:disabled)': {
      cursor: 'pointer',
    },

    // States
    '&:not(:checked):not(:disabled):not(:focus):hover ~ div:first-of-type': {
      borderColor: inputColors.hoverBorder,
    },
    '&:checked ~ div:first-of-type': {
      borderColor: colors.blueberry400,
      backgroundColor: colors.blueberry400,
    },
    '&:disabled ~ div:first-of-type': {
      borderColor: inputColors.disabled.border,
      backgroundColor: inputColors.disabled.background,
    },
    '&:disabled:checked ~ div:first-of-type': {
      borderColor: colors.blueberry200,
      backgroundColor: colors.blueberry200,
    },

    // Focus
    '&:focus, &:active': {
      outline: 'none',
    },
    '&:focus ~ div:first-of-type': {