@telus-uds/components-web 1.2.0 → 1.4.0

package/lib-module/Callout/Callout.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Icon, selectSystemProps, Typography, useThemeTokens } from '@telus-uds/components-base';
+import { htmlAttrs } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+
+const verticalAlignToFlex = verticalAlign => {
+  switch (verticalAlign) {
+    case 'top':
+      return 'flex-start';
+
+    case 'middle':
+      return 'center';
+
+    case 'bottom':
+      return 'flex-end';
+
+    default:
+      return 'top';
+  }
+};
+
+const CalloutContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Callout__CalloutContainer",
+  componentId: "components-web__sc-1a7ptx-0"
+})(_ref => {
+  let {
+    rounded,
+    verticalAlign = 'top',
+    background,
+    gap,
+    borderRadius,
+    padding
+  } = _ref;
+  return {
+    background,
+    display: 'flex',
+    gap,
+    borderRadius,
+    padding,
+    justifyContent: `${rounded ? 'center' : 'flex-start'}`,
+    alignItems: verticalAlignToFlex(verticalAlign)
+  };
+});
+
+const Callout = _ref2 => {
+  let {
+    icon,
+    children,
+    verticalAlign = 'top',
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref2;
+  const {
+    background,
+    gap,
+    borderRadius,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    color
+  } = useThemeTokens('Callout', tokens, variant);
+  const {
+    rounded = false,
+    size = 'medium'
+  } = variant;
+  return /*#__PURE__*/_jsxs(CalloutContainer, {
+    size: size,
+    rounded: rounded,
+    "data-testid": "callout-container",
+    verticalAlign: verticalAlign,
+    background: background,
+    gap: gap,
+    borderRadius: borderRadius,
+    padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
+    ...selectProps(rest),
+    children: [icon && /*#__PURE__*/_jsx(Icon, {
+      icon: icon,
+      variant: {
+        rank: 'primary',
+        size
+      }
+    }), /*#__PURE__*/_jsx(Typography, {
+      variant: {
+        size,
+        compact: size === 'small'
+      },
+      tokens: {
+        color
+      },
+      children: children
+    })]
+  });
+};
+
+Callout.propTypes = { ...selectedSystemPropTypes,
+  icon: PropTypes.elementType,
+  children: PropTypes.node.isRequired,
+  verticalAlign: PropTypes.oneOf(['top', 'middle', 'bottom'])
+};
+export default Callout;

package/lib-module/Callout/index.js

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

package/lib-module/DatePicker/CalendarContainer.js

@@ -0,0 +1,208 @@
+import styled from 'styled-components';
+import defaultReactDatesCss from './reactDatesCss';
+const CalendarContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CalendarContainer",
+  componentId: "components-web__sc-qdc1tg-0"
+})(_ref => {
+  let {
+    daySize,
+    validation,
+    remainingTokens,
+    calendarMonthFontTokens,
+    dayPickerNavigationButtonTokens,
+    defaultFontTokens
+  } = _ref;
+  return `
+  ${defaultReactDatesCss}
+  > div {
+    z-index: 3;
+  }
+  .SingleDatePicker,
+  .SingleDatePickerInput {
+    display: block;
+  }
+  .SingleDatePicker_picker {
+    box-shadow: none;
+    border: 1px solid ${remainingTokens.singleDatePickerBorderColor};
+    border-radius: ${remainingTokens.singleDatePickerRadius};
+    padding: ${remainingTokens.singleDatePickerPaddingTopBottom}px ${remainingTokens.singleDatePickerLeftRight}px;
+    z-index: 3;
+  }
+  .DateInput {
+    width: 100%;
+    border: 2px solid ${remainingTokens.dateInputBorderColor};
+    border-radius: ${remainingTokens.dateInputBorderRadius};
+    ${validation === 'error' && `input { border-color: ${remainingTokens.invalidInputMixin}; }`};
+    ${validation === 'success' && `input { border-color: ${remainingTokens.validInputMixin}; }`};
+  }
+  .DateInput:hover {
+    border: 2px solid ${remainingTokens.dateInputHoverBorderColor};
+  }
+  .DateInput:focus {
+    border: 2px solid ${remainingTokens.dateInputFocusBorderColor};
+  }
+  .SingleDatePickerInput__withBorder {
+    border: 0 !important;
+  }
+  .DateInput_input {
+    box-sizing: border-box;
+    padding: 1rem;
+    border: 1px solid ${remainingTokens.dateInputInsideBorderColor};
+    border-radius: 4px;
+    min-height: 3.25rem;
+    color: ${remainingTokens.dateInputInsideColor};
+    font-weight: 400;
+    font-size: 1rem;
+    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
+  }
+  .DateInput_fang {
+    transform: translateY(2px);
+    z-index: 4;
+    left: ${(daySize * 8.5 - 20) / 2}px;
+  }
+  .DateInput_fangStroke {
+    stroke: ${remainingTokens.dateInputStrokeColor};
+  }
+  .CalendarMonth_caption {
+    color: ${remainingTokens.calendarMonthCaptionColor};
+    font-family: ${calendarMonthFontTokens.fontFamily};
+    font-size: ${remainingTokens.calendarMonthCaptionFontSize};
+    font-weight: ${calendarMonthFontTokens.fontWeight};
+    line-height: ${remainingTokens.calendarMonthCaptionLineHeight};
+    padding-bottom: ${remainingTokens.calendarMonthCaptionPaddingBottom}px;
+  }
+  .DayPicker__withBorder {
+    box-shadow: none;
+  }
+  .DayPickerNavigation_button {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    border: 1px solid ${remainingTokens.dayPickerNavigationButtonBorderColor};
+    background-color: ${remainingTokens.dayPickerNavigationButtonBackgroundColor};
+    border-radius: 50%;
+    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
+    max-height: ${remainingTokens.dayPickerNavigationButtonMaxHeight}px;
+    max-width: ${remainingTokens.dayPickerNavigationButtonMaxWidth}px;
+    position: absolute;
+    top: 18px;
+    line-height: 0.78;
+    padding: ${remainingTokens.dayPickerNavigationButtonPadding}px;
+    cursor: pointer;
+    user-select: none;
+    &:nth-child(1) {
+      left: ${remainingTokens.dayPickerNavigationButtonChildLeft}px;
+    }
+    &:nth-child(2) {
+      right: ${remainingTokens.dayPickerNavigationButtonChildRight}px;
+      i {
+        font-family: 'TELUS Core Icons';
+        display: inline-block;
+        font-weight: normal;
+        font-style: normal;
+        speak: none;
+        text-decoration: inherit;
+        text-transform: none;
+        text-rendering: auto;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        line-height: 1;
+        vertical-align: middle;
+        &:before {
+          content: '\\F107';
+          display: inline-block;
+        }
+      }
+    }
+    & svg {
+      fill: ${remainingTokens.dayPickerNavigationButtonChildSvgFill};
+    }
+  }
+  .DayPickerNavigation_button__default:focus,
+  .DayPickerNavigation_button__default:hover {
+    border: 1px solid ${remainingTokens.dayPickerNavigationButtonDefaultHoverBorderColor};
+  }
+  .DayPickerNavigation_svg__horizontal {
+    fill: ${remainingTokens.dayPickerNavigationSVGHorizontalFill};
+  }
+  .DayPicker_weekHeader {
+    color: ${remainingTokens.dayPickerWeekHeaderColor};
+    font-family: ${dayPickerNavigationButtonTokens.fontFamily};
+    font-weight: ${dayPickerNavigationButtonTokens.fontWeight};
+    font-feature-settings: 'ss01' on, 'ss03' on, 'ss08' on;
+    line-height: ${remainingTokens.dayPickerWeekHeaderLineHeight};
+    & small {
+      font-size: ${remainingTokens.dayPickerWeekHeaderSmall};
+    }
+    & li {
+      max-width: ${daySize}px !important;
+    }
+  }
+  .CalendarDay__default {
+    padding: 0px;
+    position: relative;
+    background-clip: padding-box;
+    border: ${remainingTokens.calendarDayDefaultBorder} solid ${remainingTokens.calendarDayDefaultBorderColor};
+    vertical-align: middle;
+    font-family: ${defaultFontTokens.fontFamily};
+    font-weight: ${defaultFontTokens.fontWeight}
+    font-feature-settings: 'ss01' on, 'ss03' on, 'ss08' on;
+    font-size: ${remainingTokens.calendarDayDefaultFontSize};
+    line-height: ${daySize - 3}px !important;
+    color: ${remainingTokens.calendarDayDefaultColor};
+    text-decoration: none;
+    transition: all 0.3s;
+    &:before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      height: ${remainingTokens.calendarDayDefaultBeforeHeight}px;
+      width: ${remainingTokens.calendarDayDefaultBeforeWidth}px;
+      border-radius: 50%;
+      background: transparent;
+      transition: all 0.3s;
+      z-index: -1;
+    }
+  }
+  .CalendarDay__default:hover,
+  .CalendarDay__selected,
+  .CalendarDay__selected:active,
+  .CalendarDay__selected:hover {
+    background: none;
+    border: 1px solid ${remainingTokens.calendarDaySelectedHoverBorderColor};
+    color: ${remainingTokens.calendarDaySelectedHoverColor};
+    text-decoration: none;
+    z-index: 0;
+    &:before {
+      background: ${remainingTokens.calendarDaySelectedHoverBeforeBackground};
+    }
+  }
+  .CalendarDay__default.CalendarDay__selected,
+  .CalendarDay__default.CalendarDay__selected:active
+    .CalendarDay__default.CalendarDay__selected:hover {
+    color: ${remainingTokens.calendarDayDefaultCalendarDaySelectedHoverColor};
+    text-decoration: none;
+    &:before {
+      background: ${remainingTokens.calendarDayDefaultCalendarDaySelectedHoverBackground};
+    }
+  }
+  .CalendarDay__blocked_out_of_range,
+  .CalendarDay__blocked_out_of_range:active,
+  .CalendarDay__blocked_out_of_range:hover,
+  .CalendarDay__blocked_calendar,
+  .CalendarDay__blocked_calendar:active,
+  .CalendarDay__blocked_calendar:hover {
+    font-weight: 300;
+    background: ${remainingTokens.calendarDayBlockedCalendarHoverBackground};
+    background-clip: padding-box;
+    color: ${remainingTokens.calendarDayBlockedCalendarHoverColor};
+    text-decoration: none;
+    &:before {
+      content: none;
+    }
+  }
+`;
+});
+export default CalendarContainer;

package/lib-module/DatePicker/DatePicker.js

@@ -0,0 +1,302 @@
+import React, { forwardRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import momentPropTypes from 'react-moment-proptypes';
+import 'react-dates/initialize';
+import SingleDatePicker from 'react-dates/lib/components/SingleDatePicker';
+import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerSingleDateController';
+import { Icon, InputSupports, selectSystemProps, useCopy, useViewport, useThemeTokens, applyTextStyles } from '@telus-uds/components-base';
+import CalendarContainer from './CalendarContainer';
+import dictionary from './dictionary';
+import { htmlAttrs } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+
+const getResponsiveDaySize = function () {
+  let inline = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  let viewport = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'md';
+  let responsiveDaySize;
+
+  if (viewport === 'xs') {
+    responsiveDaySize = inline ? undefined : 36;
+  } else {
+    responsiveDaySize = inline ? 60 : 44;
+  }
+
+  return responsiveDaySize;
+};
+
+const getIcon = icon => /*#__PURE__*/_jsx(Icon, {
+  icon: icon,
+  variant: {
+    size: 'small'
+  }
+});
+
+const MonthCenterContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DatePicker__MonthCenterContainer",
+  componentId: "components-web__sc-mz8fi3-0"
+})({
+  display: 'flex',
+  justifyContent: 'center'
+});
+/**
+ * Use DatePicker to select a date on a calendar.
+ *
+ * ## Usage Criteria
+ *
+ * - Use DatePicker to select a date on a calendar
+ * - Available in 2 formats: Overlay and Inline
+ *
+ * ### Overlay DatePicker
+ * - Use Overlay to display in a modal container
+ * - Use Overlay whenever possible as it is the most accessible solution; the input form field is type-accessible and optimized for mobile customers
+ * - Includes an input form field to allow manual key-in of dates
+ * - Opens the modal when the input form field receives focus
+ * - Width expands 100% until max-width of 340px
+ *
+ * ### Inline DatePicker
+ * - Use Inline to display the DatePicker in a larger vieweable area; allows the customer to quickly and easily date availability
+ * - Does not include an input form field
+ * - Optimized for keyboard interaction and tablet touch
+ * - Recommended for viewports greater than or equal to 576px
+ */
+
+const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var _dictionary$copy;
+
+  let {
+    copy = 'en',
+    id,
+    date,
+    feedback,
+    inline,
+    isDayDisabled,
+    label,
+    onDateChange,
+    hint,
+    hintPosition = 'inline',
+    tooltip,
+    tokens,
+    variant = {},
+    validation,
+    ...rest
+  } = _ref;
+  const [inputDate, setInputDate] = useState(date);
+  const [isFocused, setIsFocused] = useState(false);
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
+
+  const onFocusChange = _ref2 => {
+    let {
+      focused
+    } = _ref2;
+    setIsFocused(focused);
+  };
+
+  const onChange = value => {
+    setInputDate(value);
+    if (onDateChange) onDateChange(value);
+  };
+
+  const viewport = useViewport();
+  const daySize = getResponsiveDaySize(inline, viewport);
+  const value = date ?? inputDate;
+  const HiddenInputFieldContainer = /*#__PURE__*/styled.div.withConfig({
+    displayName: "DatePicker__HiddenInputFieldContainer",
+    componentId: "components-web__sc-mz8fi3-1"
+  })(["height:", ";width:", ";overflow:hidden;"], props => props.height, props => props.width);
+  const {
+    hiddenInputFieldContainerHeight,
+    hiddenInputFieldContainerWidth,
+    previousIcon,
+    nextIcon,
+    ...remainingTokens
+  } = useThemeTokens('DatePicker', tokens, variant, {
+    viewport
+  });
+  const defaultFontTokens = applyTextStyles({
+    fontName: remainingTokens.calendarDayDefaultFontName,
+    fontWeight: remainingTokens.calendarDayDefaultFontWeight
+  });
+  const calendarMonthFontTokens = applyTextStyles({
+    fontName: remainingTokens.calendarMonthCaptionFontName,
+    fontWeight: remainingTokens.calendarMonthCaptionFontWeight
+  });
+  const dayPickerNavigationButtonTokens = applyTextStyles({
+    fontName: remainingTokens.dayPickerWeekHeaderFontName,
+    fontWeight: remainingTokens.dayPickerWeekHeaderFontWeight
+  });
+  return /*#__PURE__*/_jsx(CalendarContainer, { ...selectProps(rest),
+    daySize: daySize,
+    validation: validation,
+    remainingTokens: remainingTokens,
+    calendarMonthFontTokens: calendarMonthFontTokens,
+    dayPickerNavigationButtonTokens: dayPickerNavigationButtonTokens,
+    defaultFontTokens: defaultFontTokens,
+    children: /*#__PURE__*/_jsx(InputSupports, {
+      copy: copy,
+      feedback: feedback,
+      hint: hint,
+      hintPosition: hintPosition,
+      label: ((_dictionary$copy = dictionary[copy]) === null || _dictionary$copy === void 0 ? void 0 : _dictionary$copy.roleDescription) ?? label,
+      nativeID: id,
+      tooltip: tooltip,
+      validation: validation,
+      children: inline ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(HiddenInputFieldContainer, {
+          height: hiddenInputFieldContainerHeight,
+          width: hiddenInputFieldContainerWidth,
+          children: /*#__PURE__*/_jsx("input", {
+            ref: ref,
+            id: id,
+            type: "text",
+            value: (value === null || value === void 0 ? void 0 : value.format('YYYY-MM-DD')) ?? '',
+            readOnly: true
+          })
+        }), /*#__PURE__*/_jsx(DayPickerSingleDateController, {
+          date: value,
+          onDateChange: onChange,
+          focused: isFocused,
+          onFocusChange: onFocusChange,
+          numberOfMonths: 1,
+          hideKeyboardShortcutsPanel: true,
+          keepOpenOnDateSelect: false,
+          daySize: daySize,
+          navPrev: getIcon(previousIcon),
+          navNext: getIcon(nextIcon),
+          isOutsideRange: isDayDisabled,
+          phrases: getCopy(),
+          renderMonthElement: _ref3 => {
+            let {
+              month
+            } = _ref3;
+            return /*#__PURE__*/_jsx(MonthCenterContainer, {
+              children: /*#__PURE__*/_jsxs("div", {
+                children: [dictionary[copy] ? dictionary[copy].months[month.month()] : month.format('MMMM'), ' ', month.year()]
+              })
+            });
+          },
+          renderWeekHeaderElement: day => /*#__PURE__*/_jsx("div", {
+            children: dictionary[copy] ? dictionary[copy].weekDays[day] : day
+          })
+        })]
+      }) : /*#__PURE__*/_jsx(SingleDatePicker, {
+        ref: ref,
+        id: id,
+        date: value,
+        onDateChange: onChange,
+        focused: isFocused,
+        onFocusChange: onFocusChange,
+        numberOfMonths: 1,
+        hideKeyboardShortcutsPanel: true,
+        displayFormat: "DD / MM / YYYY",
+        placeholder: "DD / MM / YYYY",
+        keepOpenOnDateSelect: false,
+        daySize: daySize,
+        navPrev: getIcon(previousIcon),
+        navNext: getIcon(nextIcon),
+        isOutsideRange: isDayDisabled,
+        phrases: getCopy(),
+        renderMonthElement: _ref4 => {
+          let {
+            month
+          } = _ref4;
+          return /*#__PURE__*/_jsx(MonthCenterContainer, {
+            children: /*#__PURE__*/_jsxs("div", {
+              children: [dictionary[copy] ? dictionary[copy].months[month.month()] : month.format('MMMM'), ' ', month.year()]
+            })
+          });
+        },
+        renderWeekHeaderElement: day => /*#__PURE__*/_jsx("div", {
+          children: dictionary[copy] ? dictionary[copy].weekDays[day] : day
+        })
+      })
+    })
+  });
+});
+DatePicker.displayName = 'DatePicker';
+DatePicker.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * A unique identifier.
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   *  Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: PropTypes.oneOf(['en', 'fr']),
+
+  /**
+   * A Moment instance representing the currently selected date, i.e. `moment()`
+   */
+  date: momentPropTypes.momentObj,
+
+  /**
+   * A detailed description of validation error/success or additional instructions.
+   * Visual variant is determined based on the `validation` prop.
+   */
+  feedback: PropTypes.string,
+
+  /**
+   * Event triggered every time a new date is clicked on
+   * @param {Moment} date The new date that was selected
+   */
+  onDateChange: PropTypes.func,
+
+  /**
+   * A function determining whether a given date should be disabled
+   * @param {Moment} date The date to optionally disable
+   * @returns {bool}
+   */
+  isDayDisabled: PropTypes.func,
+
+  /**
+   * The field label to be displayed above the calendar
+   */
+  label: PropTypes.string,
+
+  /**
+   * A flag determining if the calendar picker is standalone or an input with overlay
+   */
+  inline: PropTypes.bool,
+
+  /**
+   * A short description of the expected input.
+   */
+  hint: PropTypes.string,
+
+  /**
+   * Position of the hint relative to label. Use `below` to display a larger hint below the label.
+   */
+  hintPosition: PropTypes.oneOf(['inline', 'below']),
+
+  /**
+   * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
+   */
+  tooltip: PropTypes.string,
+
+  /**
+   * Use to visually mark an input as valid or invalid.
+   */
+  validation: PropTypes.oneOf(['error', 'success'])
+};
+DatePicker.defaultProps = {
+  copy: 'en',
+  date: undefined,
+  feedback: undefined,
+  inline: false,
+  isDayDisabled: undefined,
+  label: undefined,
+  hint: undefined,
+  hintPosition: 'inline',
+  tooltip: undefined,
+  onDateChange: () => {},
+  validation: undefined
+};
+export default DatePicker;