@telus-uds/components-base 0.0.2-prerelease.6 → 0.0.2-prerelease.7

package/lib/Select/Select.js

@@ -0,0 +1,272 @@
+import React, { useState } from 'react';
+import { View, Platform, StyleSheet } from 'react-native';
+import PropTypes from 'prop-types';
+import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
+import { componentPropType, getTokensPropType, useInputValue, variantProp } from '../utils';
+import Picker from './Picker';
+import InputSupports from '../InputSupports';
+import inputSupportsProps from '../InputSupports/propTypes';
+
+const selectInputStyles = ({
+  backgroundColor,
+  color,
+  borderWidth = 0,
+  borderColor,
+  borderRadius,
+  paddingTop,
+  paddingBottom,
+  paddingLeft = 0,
+  paddingRight,
+  fontName,
+  fontSize,
+  fontWeight,
+  lineHeight,
+  icon,
+  iconSize = 0,
+  validationIcon,
+  validationIconSize = 0,
+  height
+}, inactive) => {
+  // Subtract border width from padding so overall input width/height doesn't
+  // jump around if the border width changes (avoiding NaN and negative padding)
+  const offsetBorder = value => typeof value === 'number' ? Math.max(0, value - borderWidth) : value;
+
+  const textStyles = applyTextStyles({
+    fontName,
+    fontSize,
+    lineHeight,
+    fontWeight
+  });
+  const webStyles = Platform.select({
+    web: {
+      appearance: 'none',
+      WebkitAppearance: 'none',
+      // since iOS Safari needs a prefix
+      outline: 'none',
+      cursor: inactive ? 'not-allowed' : undefined,
+      opacity: inactive ? 1 : undefined // override Chrome's default fadeout of a disabled select
+
+    }
+  });
+  let paddingWithIcons = paddingRight;
+
+  if (Platform.OS !== 'android') {
+    if (icon) {
+      paddingWithIcons += iconSize;
+    }
+
+    if (validationIcon) {
+      paddingWithIcons += validationIconSize;
+    }
+  }
+
+  return {
+    backgroundColor,
+    color,
+    borderWidth,
+    borderColor,
+    borderRadius,
+    paddingLeft: offsetBorder(paddingLeft),
+    paddingRight: offsetBorder(paddingWithIcons),
+    paddingTop: offsetBorder(paddingTop),
+    paddingBottom: offsetBorder(paddingBottom),
+    height,
+    ...textStyles,
+    ...webStyles
+  };
+};
+
+const selectOuterBorderStyles = ({
+  outerBackgroundColor,
+  outerBorderWidth = 0,
+  outerBorderColor,
+  outerBorderRadius = 0
+}) => {
+  // Use negative margins so that the outer border doesn't expand the input's bounding box
+  const margin = -1 * outerBorderWidth; // Account for the border width since we style it as an outline
+
+  const borderRadius = outerBorderRadius + outerBorderWidth;
+  return {
+    background: outerBackgroundColor,
+    borderWidth: outerBorderWidth,
+    borderColor: outerBorderColor,
+    borderRadius,
+    marginTop: margin,
+    marginBottom: margin,
+    marginLeft: margin,
+    marginRight: margin
+  };
+};
+
+const selectIconTokens = ({
+  iconSize,
+  iconColor
+}) => ({
+  size: iconSize,
+  color: iconColor
+});
+
+const selectIconContainerStyles = ({
+  paddingRight,
+  paddingBottom
+}) => ({
+  paddingRight,
+  paddingBottom
+});
+
+const selectValidationIconTokens = ({
+  validationIconSize,
+  validationIconColor
+}) => ({
+  size: validationIconSize,
+  color: validationIconColor
+});
+
+const selectValidationIconContainerStyles = ({
+  icon,
+  iconSize = 0,
+  paddingRight = 0,
+  paddingBottom
+}) => ({
+  paddingRight: icon ? paddingRight + iconSize : paddingRight,
+  paddingBottom
+});
+/**
+ * A basic form single-choice select component. Use in forms or individually to receive user's input.
+ *
+ * ## Usage criteria
+ * - Include a `placeholder` to provide instructions such as "Please select..." as an unselectable option (recommended)
+ * - Use when options are between 7-15 (recommended)
+ * - For options are 6 and under, use `Radio` groups or `ButtonGroup`.
+ * - For options 15 and above, look for alternatives (e.g grouping into categories, or input field with auto-complete etc.)
+ *
+ * ## Controlled component
+ * If it is required that the state of the `Select` be controlled by the application or other external methods,
+ * `value` and `onChange` props must be passed to the `Select`.
+ * If the `Select` value should not be changed by user input, a `readOnly` prop must be provided.
+ *
+ * ## Uncontrolled component
+ * If it is not necessary to control the `Select` state, you can create one without a value prop.
+ * In this case its value can be accessed within the `onChange` callback. Use the `initialValue` prop to set the
+ * default value for an uncontrolled `Select`.
+ *
+ * ## Getting feedback for entered values
+ * Use the `feedback` prop to give the user feedback regarding their selection.
+ * You can affirm that the user's selection was correct, or highlight errors that must be corrected, using the `validation` prop.
+ * Keep feedback text as brief as possible, should be limited to text and links.
+ *
+ * ## Using a tooltip
+ * When a more in-depth explanation is needed to fill out a `Select` properly, the tooltip prop may be used.
+ *
+ * ## Grouping options
+ * `Select` supports option groups. Use a `Select.Group` component to render an `<optgroup>` element with its items.
+ * NOTE: this does not work on native platforms - the grouped items will be shown at the same level as the non-grouped items.
+ *
+ */
+
+
+const Select = ({
+  value,
+  initialValue,
+  onChange,
+  children,
+  inactive,
+  readOnly,
+  placeholder,
+  validation,
+  tokens,
+  variant,
+  testID,
+  ...rest
+}) => {
+  const {
+    currentValue,
+    setValue
+  } = useInputValue({
+    value,
+    initialValue,
+    onChange,
+    readOnly
+  });
+  const [isFocused, setIsFocused] = useState(false);
+
+  const handleFocus = () => setIsFocused(true);
+
+  const handleBlur = () => setIsFocused(false);
+
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleMouseOver = () => setIsHovered(true);
+
+  const handleMouseOut = () => setIsHovered(false);
+
+  const {
+    props: supportsProps
+  } = inputSupportsProps.select(rest);
+  const themeTokens = useThemeTokens('Select', tokens, variant, {
+    focus: isFocused,
+    hover: isHovered,
+    inactive,
+    validation
+  });
+  const {
+    icon: IconComponent,
+    validationIcon: ValidationIconComponent
+  } = themeTokens;
+  return /*#__PURE__*/React.createElement(InputSupports, supportsProps, ({
+    a11yProps,
+    inputId
+  }) => /*#__PURE__*/React.createElement(View, {
+    style: selectOuterBorderStyles(themeTokens)
+  }, /*#__PURE__*/React.createElement(Picker, Object.assign({
+    style: selectInputStyles(themeTokens, inactive),
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onMouseOver: handleMouseOver,
+    onMouseOut: handleMouseOut,
+    onChange: setValue,
+    value: currentValue,
+    inactive: inactive,
+    placeholder: placeholder !== undefined ? {
+      label: placeholder,
+      value: ''
+    } : undefined
+  }, a11yProps, {
+    nativeID: inputId,
+    testID: testID
+  }), children), ValidationIconComponent && /*#__PURE__*/React.createElement(View, {
+    pointerEvents: "none",
+    style: [staticStyles.iconContainer, selectValidationIconContainerStyles(themeTokens)]
+  }, /*#__PURE__*/React.createElement(ValidationIconComponent, {
+    tokens: selectValidationIconTokens(themeTokens)
+  })), IconComponent && Platform.OS !== 'android' &&
+  /*#__PURE__*/
+  // we can't hide the default caret of a native picker on android
+  React.createElement(View, {
+    pointerEvents: "none",
+    style: [staticStyles.iconContainer, selectIconContainerStyles(themeTokens)]
+  }, /*#__PURE__*/React.createElement(IconComponent, {
+    tokens: selectIconTokens(themeTokens)
+  }))));
+};
+
+Select.propTypes = { ...inputSupportsProps.types,
+  initialValue: PropTypes.string,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  children: componentPropType(['Item', 'Group']),
+  inactive: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  placeholder: PropTypes.string,
+  tokens: getTokensPropType('Select'),
+  variant: variantProp.propType,
+  testID: PropTypes.string
+};
+export default Select;
+const staticStyles = StyleSheet.create({
+  iconContainer: {
+    position: 'absolute',
+    right: 0,
+    bottom: 0
+  }
+});

package/lib/Select/index.js

@@ -0,0 +1,6 @@
+import Select from './Select';
+import Group from './Group';
+import Item from './Item';
+Select.Group = Group;
+Select.Item = Item;
+export default Select;

package/lib/Skeleton/Skeleton.js

@@ -0,0 +1,119 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Platform } from 'react-native';
+import propTypes from 'prop-types';
+import StackView from '../StackView';
+import { useThemeTokens } from '../ThemeProvider';
+import { getTokensPropType, useSpacingScale, variantProp } from '../utils';
+
+const selectSkeletonStyles = ({
+  color,
+  radius,
+  fadeAnimation
+}) => ({
+  backgroundColor: color,
+  borderRadius: radius,
+  opacity: fadeAnimation
+});
+
+const selectLineStyles = ({
+  skeletonHeight,
+  lineWidth
+}) => ({
+  width: lineWidth,
+  height: skeletonHeight
+});
+
+const selectShapeStyles = ({
+  skeletonHeight
+}) => ({
+  height: skeletonHeight,
+  width: skeletonHeight
+});
+
+const selectSquareStyles = ({
+  radius
+}) => ({
+  borderRadius: radius
+});
+
+const Skeleton = ({
+  tokens,
+  variant,
+  size,
+  characters,
+  lines,
+  shape = 'line'
+}) => {
+  const themeTokens = useThemeTokens('Skeleton', tokens, variant);
+  const skeletonHeight = useSpacingScale(size || themeTokens.size);
+  const fadeAnimation = useRef(new Animated.Value(0)).current;
+
+  const getLineWidth = () => {
+    if (characters) {
+      return characters * themeTokens.baseWidth;
+    }
+
+    return themeTokens.characters * themeTokens.baseWidth;
+  };
+
+  useEffect(() => {
+    const fade = Animated.sequence([Animated.timing(fadeAnimation, {
+      toValue: 1,
+      duration: 1000,
+      useNativeDriver: Platform.OS !== 'web'
+    }), Animated.timing(fadeAnimation, {
+      toValue: 0,
+      duration: 1000,
+      useNativeDriver: Platform.OS !== 'web'
+    })]);
+    Animated.loop(fade).start();
+  }, [fadeAnimation]);
+
+  const getStyledBasedOnShape = () => {
+    if (shape === 'circle') {
+      return selectShapeStyles({
+        skeletonHeight
+      });
+    }
+
+    if (shape === 'box') {
+      return [selectShapeStyles({
+        skeletonHeight
+      }), selectSquareStyles({
+        radius: themeTokens.squareRadius
+      })];
+    }
+
+    return selectLineStyles({
+      skeletonHeight,
+      lineWidth: getLineWidth()
+    });
+  };
+
+  const renderSkeleton = (index = 0) => /*#__PURE__*/React.createElement(Animated.View, {
+    testID: "skeleton",
+    key: `skeleton-${index + 1}`,
+    style: [selectSkeletonStyles({ ...themeTokens,
+      fadeAnimation
+    }), getStyledBasedOnShape()]
+  });
+
+  if (lines) {
+    const arrayOfSkeletons = [...Array(lines)];
+    return /*#__PURE__*/React.createElement(StackView, {
+      space: themeTokens.spaceBetweenLines
+    }, arrayOfSkeletons.map((_, index) => renderSkeleton(index)));
+  }
+
+  return renderSkeleton();
+};
+
+Skeleton.propTypes = {
+  tokens: getTokensPropType('Skeleton'),
+  variant: variantProp.propType,
+  size: propTypes.number,
+  characters: propTypes.number,
+  lines: propTypes.number,
+  shape: propTypes.oneOf(['line', 'circle', 'box'])
+};
+export default Skeleton;

package/lib/Skeleton/index.js

@@ -0,0 +1,2 @@
+import Skeleton from './Skeleton';
+export default Skeleton;

package/lib/Tags/Tags.js

@@ -0,0 +1,217 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Platform, Text, View } from 'react-native';
+import ButtonBase from '../Button/ButtonBase';
+import { StackWrap, getStackedContent } from '../StackView';
+import { useViewport } from '../ViewportProvider';
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
+import { a11yProps, pressProps, variantProp, getTokensPropType, selectTokens } from '../utils/propTypes';
+import { useMultipleInputValues } from '../utils/input';
+import { getPressHandlersWithArgs } from '../utils/pressability';
+
+const selectIconTextTokens = ({
+  icon,
+  iconPosition,
+  iconSpace,
+  iconSize,
+  iconColor,
+  iconBackground,
+  iconBorderRadius,
+  iconAlignSelf,
+  iconPadding,
+  iconTranslateX,
+  iconTranslateY
+}) => ({
+  icon,
+  iconPosition,
+  iconSpace,
+  iconWrapperStyle: {
+    backgroundColor: iconBackground,
+    borderRadius: iconBorderRadius,
+    alignSelf: iconAlignSelf,
+    padding: iconPadding,
+    ...Platform.select({
+      // TODO: https://github.com/telus/universal-design-system/issues/487
+      web: {
+        transition: 'color 200ms, background 200ms'
+      }
+    })
+  },
+  iconTokens: {
+    size: iconSize,
+    color: iconColor,
+    translateX: iconTranslateX,
+    translateY: iconTranslateY
+  }
+});
+
+const Tags = ({
+  variant,
+  tokens,
+  items = [],
+  values,
+  initialValues,
+  maxValues,
+  onChange,
+  readOnly = false,
+  inactive = false,
+  accessibilityRole = Platform.select({
+    web: 'group',
+    default: 'none'
+  }),
+  ...rest
+}) => {
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('Tags', tokens, variant, {
+    viewport
+  });
+  const stackTokens = selectTokens('StackView', themeTokens);
+  const {
+    direction,
+    space
+  } = themeTokens;
+  const getItemTokens = useThemeTokensCallback('TagsItem', tokens, variant);
+
+  const getButtonTokens = buttonState => selectTokens('Button', getItemTokens(buttonState));
+
+  const {
+    currentValues,
+    toggleOneValue
+  } = useMultipleInputValues({
+    initialValues,
+    values,
+    maxValues,
+    onChange,
+    readOnly
+  });
+  const a11y = a11yProps.select({
+    accessibilityRole,
+    ...rest
+  });
+  const itemA11yRole = 'checkbox';
+  return /*#__PURE__*/React.createElement(StackWrap, Object.assign({}, a11y, {
+    space: space,
+    direction: direction,
+    tokens: stackTokens
+  }), items.map(({
+    label,
+    id = label,
+    accessibilityLabel
+  }, index) => {
+    const isSelected = currentValues.includes(id); // Pass an object of relevant component state as first argument for any passed-in press handlers
+
+    const pressHandlers = getPressHandlersWithArgs(rest, [{
+      id,
+      label,
+      currentValues
+    }]);
+
+    const handlePress = () => {
+      if (pressHandlers.onPress) pressHandlers.onPress();
+      toggleOneValue(id);
+    };
+
+    const itemA11y = {
+      accessibilityState: {
+        checked: isSelected
+      },
+      accessibilityRole: itemA11yRole,
+      accessibilityLabel,
+      ...a11yProps.getPositionInSet(items.length, index)
+    };
+    return /*#__PURE__*/React.createElement(ButtonBase, Object.assign({
+      key: id
+    }, pressHandlers, {
+      onPress: handlePress,
+      tokens: getButtonTokens,
+      selected: isSelected,
+      inactive: inactive
+    }, itemA11y), ({
+      textStyles,
+      ...buttonState
+    }) => {
+      // TODO: once Icon/IconButton designs are stable, see if this sort of styling around
+      // an icon should go in Icon itself, or possibly via an IconText token set. Related issues:
+      // - Icon: https://github.com/telus/universal-design-system/issues/327
+      // - IconButton: https://github.com/telus/universal-design-system/issues/281
+      // - Token sets: https://github.com/telus/universal-design-system/issues/782
+      const itemTokens = getItemTokens(buttonState);
+      const {
+        iconTokens,
+        iconPosition,
+        iconSpace,
+        iconWrapperStyle,
+        icon: IconComponent
+      } = selectIconTextTokens(itemTokens);
+      const iconContent = IconComponent ? /*#__PURE__*/React.createElement(View, {
+        style: iconWrapperStyle
+      }, /*#__PURE__*/React.createElement(IconComponent, {
+        tokens: iconTokens
+      })) : null;
+      const textContent = /*#__PURE__*/React.createElement(Text, {
+        style: textStyles
+      }, label);
+      return getStackedContent(iconPosition === 'left' ? [iconContent, textContent] : [textContent, iconContent], {
+        space: iconSpace,
+        direction: 'row'
+      });
+    });
+  }));
+};
+
+Tags.propTypes = { ...a11yProps.propTypes,
+  ...pressProps.propTypes,
+  tokens: getTokensPropType('Tags'),
+  variant: variantProp.propType,
+
+  /**
+   * If provided, sets a maximum number of items a user may select at once.
+   */
+  maxValues: PropTypes.number,
+
+  /**
+   * The options a user may select
+   */
+  items: PropTypes.arrayOf(PropTypes.shape({
+    /**
+     * The text displayed to the user in the button, describing this option,
+     * passed to the button as its child.
+     */
+    label: PropTypes.string.isRequired,
+
+    /**
+     * An optional accessibility label may be passed to ButtonGroup Buttons
+     * which is applied as normal for a React Native accessibilityLabel prop.
+     */
+    accessibilityLabel: PropTypes.string,
+
+    /**
+     * An optional unique string may be provided to identify this option,
+     * which will be used in code and passed to any onChange function.
+     * If not provided, the label is used.
+     */
+    id: PropTypes.string
+  })),
+
+  /**
+   * If provided, this function is called when the current selection is changed
+   * and is passed an array of the `id`s of all currently selected `items`.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * If the selected item(s) in the button group are to be controlled externally by
+   * a parent component, pass an array of strings as well as an `onChange` handler.
+   * Passing an array for "values" makes the ButtonGroup a "controlled" component that
+   * expects its state to be handled via `onChange` and so doesn't handle it itself.
+   */
+  values: PropTypes.arrayOf(PropTypes.string),
+
+  /**
+   * If `values` is not passed, making the ButtonGroup an "uncontrolled" component
+   * managing its own selected state, a default set of selections may be provided.
+   * Changing the `initialValues` does not change the user's selections.
+   */
+  initialValues: PropTypes.arrayOf(PropTypes.string)
+};
+export default Tags;

package/lib/Tags/index.js

@@ -0,0 +1,2 @@
+import Tags from './Tags';
+export default Tags;

package/lib/TextInput/TextArea.js

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { Platform } from 'react-native';
+import { getTokensPropType, variantProp } from '../utils';
+import InputSupports from '../InputSupports';
+import TextInputBase from './TextInputBase';
+import { useThemeTokens } from '../ThemeProvider';
+import inputSupportProps from '../InputSupports/propTypes';
+import textInputPropTypes from './propTypes';
+/**
+ * Use to collect long-form information such as product feedback or support queries.
+ * Due to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.
+ * The `TextArea` height will automatically increase when new lines are added - this behavior can be limited within the theme.
+ *
+ * ## Controlled component
+ * If it is required that the state of the `TextArea` be controlled by the application or other external methods,
+ * `value` and `onChange` props must be passed to the `TextArea`.
+ * If the `TextArea` value should not be changed by user input, a `readOnly` prop must be provided.
+ *
+ * ## Uncontrolled component
+ * If it is not necessary to control the `TextArea` state, you can create one without a value prop.
+ * In this case its value can be accessed within the `onChange` callback.
+ *
+ * ## Getting feedback for entered values
+ * Use the `feedback` prop to give the user feedback regarding their input.
+ * You can affirm that the user's input was correct, or highlight errors that must be corrected, using the `validation` prop.
+ * Keep feedback text as brief as possible, should be limited to text and links.
+ *
+ * ## Supplying a hint
+ * Use the `hint` prop to succinctly clarify attributes of the expected input data, such as the expected format,
+ * or an indicator that the field is optional.
+ * It is a more usable and accessible option than the HTML `placeholder` attribute.
+ */
+
+function TextArea({
+  tokens,
+  variant = {},
+  ...remainingProps
+}) {
+  const themeTokens = useThemeTokens('TextArea', tokens, variant);
+  const [inputHeight, setInputHeight] = useState(); // adjust the text area's height as new lines are added to the content
+
+  const onHeightChange = ({
+    nativeEvent: {
+      contentSize: {
+        height
+      }
+    }
+  }) => {
+    // on native this is happens out of the box
+    if (Platform.OS === 'web') {
+      setInputHeight(height);
+    }
+  };
+
+  const {
+    props: supportsProps,
+    rest
+  } = inputSupportProps.select(remainingProps);
+  const inputProps = { ...rest,
+    variant: { ...variant,
+      validation: supportsProps.validation
+    },
+    multiline: true,
+    onContentSizeChange: onHeightChange,
+    height: inputHeight,
+    tokens: themeTokens
+  };
+  return /*#__PURE__*/React.createElement(InputSupports, supportsProps, ({
+    a11yProps,
+    inputId
+  }) => /*#__PURE__*/React.createElement(TextInputBase, Object.assign({}, inputProps, a11yProps, {
+    nativeID: inputId
+  })));
+}
+
+TextArea.propTypes = { ...inputSupportProps.types,
+  ...textInputPropTypes,
+  tokens: getTokensPropType('TextArea', 'TextInput'),
+  // TODO: support both TextArea and TextInput tokens
+  variant: variantProp.propType
+};
+export default TextArea;