@telus-uds/components-web 2.9.0 → 2.10.0

package/src/PriceLockup/PriceLockup.jsx

@@ -226,16 +226,53 @@ const PriceLockup = ({
 
 PriceLockup.propTypes = {
   ...selectedSystemPropTypes,
+  /**
+   * Size of the component
+   *
+   * Small for pricing in product catalogue pages, medium for pricing in product comparison cards and large for pricing in banners and promo cards
+   */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /**
+   * If currency symbol other than `$` to be used
+   */
   currencySymbol: PropTypes.string,
+  /**
+   * Shows additional info above the price
+   */
   topText: PropTypes.string,
+  /**
+   * Monetary value (including decimals separated by ".")
+   */
   price: PropTypes.string.isRequired,
+  /**
+   * Shows month/year unit
+   */
   rateText: PropTypes.string,
+  /**
+   * Shows additional info below the price with a `Divider`
+   */
   bottomText: PropTypes.string,
+  /**
+   * Displays which side the currency should apperar (left, right)
+   */
   signDirection: PropTypes.oneOf(['right', 'left']),
+  /**
+   * Shows additional link for context
+   */
   footnoteLinks: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+  /**
+   * Function to be called when a footnote link is clicked
+   */
   onClickFootnote: PropTypes.func,
+  /**
+   * To show price savings comparison
+   */
   strikeThrough: PropTypes.bool,
+  /**
+   * To provide a11y text for `PriceLockup` component
+   *
+   * **Note:** a11yText will override strikethrough price, so it must include price (ie. "was 50 dollars per month")
+   */
   a11yText: PropTypes.string
 }
 

package/src/QuantitySelector/QuantitySelector.jsx

@@ -210,25 +210,64 @@ const dictionaryContentShape = PropTypes.shape({
 })
 
 QuantitySelector.propTypes = {
+  /**
+   * The id of the input field
+   */
   id: PropTypes.string,
+  /**
+   * The minimum number allowed
+   */
   minNumber: PropTypes.number,
+  /**
+   * The maximum number allowed
+   */
   maxNumber: PropTypes.number,
+  /**
+   * The callback function that is called when the value of the input field changes
+   */
   onChange: PropTypes.func,
+  /**
+   * The default value of the input field
+   */
   defaultValue: PropTypes.number,
+  /**
+   * The label of the input field
+   */
   label: PropTypes.string,
+  /**
+   * The hint of the input field
+   */
   hint: PropTypes.string,
+  /**
+   * The position of the hint. Could be shown along side the label or below it
+   */
   hintPosition: PropTypes.oneOf(['inline', 'below']),
+  /**
+   * Adds a question mark which will display a tooltip when clicked
+   */
   tooltip: PropTypes.string,
+  /**
+   * The accessibility label of the input field
+   */
   accessibilityLabel: PropTypes.string,
+  /**
+   * The dictionary object containing the content for the input field
+   */
   dictionary: PropTypes.shape({
     en: dictionaryContentShape,
     fr: dictionaryContentShape
   }),
+  /**
+   * The language to use for the copy.
+   */
   copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr'])]),
   variant: PropTypes.exact({
     alternative: PropTypes.bool
   }),
   tokens: PropTypes.oneOf([PropTypes.object, PropTypes.func]),
+  /**
+   * Sets `data-testid` attribute on the input field for testing purposes.
+   */
   testID: PropTypes.string
 }
 

package/src/Span/Span.jsx

@@ -27,6 +27,9 @@ const Span = ({ children, variant, tokens, testID, flex, ...rest }) => {
 Span.propTypes = {
   ...selectedSystemPropTypes,
   children: PropTypes.node.isRequired,
+  /**
+   * Adds `data-testid` attribute for testing
+   */
   testID: PropTypes.string,
   /**
    * Sets display to inline-flex so that children are laid out using the flex model.

package/src/Table/Table.jsx

@@ -87,6 +87,9 @@ const Table = ({ children, fullWidth = true, text = 'medium', tokens, variant, .
 Table.propTypes = {
   ...selectedSystemPropTypes,
   children: PropTypes.node,
+  /**
+   * Sets text style
+   */
   text: PropTypes.oneOf(['medium', 'small'])
 }
 

package/src/Toast/Toast.jsx

@@ -156,9 +156,21 @@ const Toast = ({ toast, copy, headline, link, tokens, variant = {}, ...rest }) =
 
 Toast.propTypes = {
   ...selectedSystemPropTypes,
+  /**
+   * If true, the toast will be displayed
+   */
   toast: PropTypes.bool,
+  /**
+   * The copy to display in the toast
+   */
   copy: PropTypes.string.isRequired,
+  /**
+   * The headline to display in the toast (before copy)
+   */
   headline: PropTypes.string,
+  /**
+   * The link to display in the toast (after copy)
+   */
   link: PropTypes.shape({
     href: PropTypes.string.isRequired,
     text: PropTypes.string.isRequired,