@telus-uds/system-theme-tokens 2.21.0 → 2.23.0

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @telus-uds/system-theme-tokens
 
-This log was last generated on Thu, 20 Apr 2023 19:05:54 GMT and should not be manually modified.
+This log was last generated on Thu, 27 Apr 2023 14:32:16 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.23.0
+
+Thu, 27 Apr 2023 14:32:16 GMT
+
+### Minor changes
+
+- Added Video components to componets.js and themes (wlsdud194@hotmail.com)
+- add 'SplashButtonWithDetails' & 'SplashButton' to components schema (kyle.king2@telus.com)
+- add tokens to storycard (mauricio.batresmontejo@telus.com)
+- Countdown is now multibrand (akshay.pandey1@telus.com)
+- add 'Icon' to 'IconButton" schema (kyle.king2@telus.com)
+- add tokens to terms and conditions component (mauricio.batresmontejo@telus.com)
+- Testimonial multi-brand (samuraix221@hotmail.com)
+
+## 2.22.0
+
+Mon, 24 Apr 2023 21:42:02 GMT
+
+### Minor changes
+
+- update tokens for blockquote component (evander.owusu@telus.com)
+- add Listbox component (mauricio.batresmontejo@telus.com)
+- add 'Icon' to 'IconButton" schema (kyle.king2@telus.com)
+
 ## 2.21.0
 
-Thu, 20 Apr 2023 19:05:54 GMT
+Thu, 20 Apr 2023 19:13:33 GMT
 
 ### Minor changes
 

package/appearances.js

@@ -74,6 +74,8 @@ const checked = {
   type: 'state'
 }
 
+const disabled = { values: [true], type: 'state' }
+
 module.exports = {
   // system-wide appearances
   system: {
@@ -84,6 +86,7 @@ module.exports = {
       type: 'state'
     }
   },
+  SplashButton: { hover },
   Button: { focus, hover, pressed, inactive, selected },
   PreviewCard: { pressed, hover, focus },
   ButtonDropdown: { focus, hover, pressed, inactive, selected, open },
@@ -111,6 +114,22 @@ module.exports = {
       type: 'state'
     }
   },
+  ListBox: {
+    focus,
+    hover,
+    pressed,
+    expanded,
+    current: {
+      description: 'When the current item is selected',
+      values: [true],
+      type: 'state'
+    },
+    isChild: {
+      description: 'when the item is child of another child',
+      values: [true],
+      type: 'state'
+    }
+  },
   Modal: {
     maxWidth: {
       description:
@@ -153,6 +172,7 @@ module.exports = {
   },
   ProgressBar: { inactive },
   QuickLinksList: { hover, focus, pressed },
+  QuantitySelector: { focus, hover, disabled, pressed },
   Radio: { checked, error, focus, hover, inactive },
   RadioCard: { pressed, checked, error, focus, hover, inactive },
   Search: { hover, focus: inputFocus, inactive },
@@ -182,9 +202,11 @@ module.exports = {
       type: 'state'
     }
   },
+  StoryCard: { focus, hover, pressed },
   TabsItem: { focus, hover, pressed, selected },
   TagsItem: { focus, hover, pressed, inactive, selected },
   TextInput: { validation, hover, inactive, focus: inputFocus },
+  TermsAndConditions: { expanded },
   ToggleSwitch: { focus, hover, pressed, inactive, selected },
   TooltipButton: { focus, hover, pressed },
   SkipLink: { focus }

package/components.js

@@ -1,22 +1,26 @@
 // Define the required components and their supported tokens
 module.exports = {
-  Toast: {
-    containerBackgroundColor: 'color',
-    containerGap: 'size',
-    animationHeightBefore: 'size',
-    animationHeightAfter: 'size',
-    animationPaddingBottomBefore: 'size',
-    animationPaddingBottomAfter: 'size',
-    animationPaddingTopBefore: 'size',
-    animationPaddingTopAfter: 'size',
-    animationBackgroundColorBefore: 'color',
-    animationBackgroundColorAfter: 'color',
-    animationColorBefore: 'color',
-    animationColorAfter: 'color',
-    animationDivColorBefore: 'color',
-    animationDivColorAfter: 'color',
-    animationFillColorBefore: 'color',
-    animationFillColorAfter: 'color'
+  SplashButton: {
+    playIcon: 'icon',
+    playIconColor: 'color',
+    buttonContentBackground: 'color',
+    buttonContentChildrenBackground: 'color'
+  },
+  SplashButtonWithDetails: {
+    playIcon: 'icon',
+    playIconColor: 'color',
+    buttonContentBackground: 'color',
+    buttonContentChildrenBackground: 'color',
+    buttonBackground: 'color',
+    buttonBorderColor: 'color',
+    buttonRadius: 'radius',
+    buttonLeftPosition: 'size',
+    buttonBottomPosition: 'size',
+    buttonMinHeight: 'size',
+    buttonPaddingLeft: 'size',
+    buttonPaddingRight: 'size',
+    detailsContainerPadding: 'size',
+    playIconContainerBackground: 'color'
   },
   Table: {
     // variant: compact
@@ -39,6 +43,69 @@ module.exports = {
     size: 'size',
     thickness: 'border'
   },
+  Video: {
+    borderColor: 'color',
+    pauseIcon: 'icon',
+    replayIcon: 'icon',
+    playIcon: 'icon'
+  },
+  VideoMiddleControlButton: {
+    width: 'size',
+    height: 'size',
+    background: 'color',
+    iconColor: 'color'
+  },
+  VideoControlBar: {
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingLeftCompactMode: 'size',
+    paddingRightCompactMode: 'size',
+    menuBottom: 'size',
+    menuRight: 'size',
+    menuMarginLeft: 'size',
+    captionsIcon: 'icon',
+    settingsIcon: 'icon',
+    minimizeIcon: 'icon',
+    maximizeIcon: 'icon'
+  },
+  VideoButton: {
+    color: 'color'
+  },
+  VideoMenu: {
+    padding: 'size',
+    background: 'color',
+    checkMarkWidth: 'size',
+    checkMarkHeight: 'size',
+    checkMarkSelectedColor: 'color',
+    checkMarkHoverColor: 'color',
+    checkMarkFocusColor: 'color',
+    checkMarkUnselectedColor: 'color',
+    checkMarkIcon: 'icon'
+  },
+  VideoProgressBar: {
+    thumbHeight: 'size',
+    thumbWidth: 'size',
+    thumbBackground: 'color',
+    timestampMarginLeft: 'size',
+    timestampMarginRight: 'size',
+    trackGradientStart: 'color',
+    trackGradientEnd: 'color',
+    rangeBackground: 'color'
+  },
+  VideoVolumeSlider: {
+    marginLeft: 'size',
+    marginRight: 'size',
+    thumbHeight: 'size',
+    thumbWidth: 'size',
+    thumbBackground: 'color',
+    trackGradientStart: 'color',
+    trackGradientEnd: 'color',
+    rangeBackground: 'color',
+    mutedIcon: 'icon',
+    unmutedIcon: 'icon'
+  },
   Callout: {
     background: 'color',
     gap: 'size',
@@ -59,6 +126,19 @@ module.exports = {
     itemBorderColor: 'color',
     itemPadding: 'size'
   },
+  QuantitySelector: {
+    leftIcon: 'icon',
+    rightIcon: 'icon',
+    iconSize: 'size',
+    borderColor: 'color',
+    inputBorderColor: 'color',
+    inputBackgroundColor: 'color',
+    inputBorderWidth: 'size',
+    padding: 'size',
+    backgroundColor: 'color',
+    textColor: 'color',
+    iconColor: 'color'
+  },
   Footnote: {
     footnoteBackground: 'color',
     footnoteBorderTopSizeMd: 'border',
@@ -113,6 +193,17 @@ module.exports = {
     paddingTop: 'size',
     paddingBottom: 'size'
   },
+  BlockQuote: {
+    color: 'color',
+    backgroundGradient: 'gradient',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    marginBottom: 'size',
+    width: 'size'
+  },
+
   Box: { backgroundColor: 'color', gradient: 'gradient' },
   Button: {
     borderColor: 'color',
@@ -474,6 +565,7 @@ module.exports = {
   },
   InputSupports: { space: 'integer' },
   IconButton: {
+    icon: 'icon',
     backgroundColor: 'color',
     borderRadius: 'radius',
     borderColor: 'color',
@@ -528,6 +620,38 @@ module.exports = {
     itemIconColor: 'color',
     listGutter: 'size'
   },
+  ListBox: {
+    groupBorderRadius: 'radius',
+    groupBorderWidth: 'border',
+    groupFontSize: 'size',
+    groupFontName: 'fontName',
+    groupFontWeight: 'fontWeight',
+    groupColor: 'color',
+    groupBorderColor: 'color',
+    groupBackgroundColor: 'color',
+    groupPaddingTop: 'size',
+    groupPaddingBottom: 'size',
+    groupPaddingLeft: 'size',
+    groupPaddingRight: 'size',
+    groupIcon: 'icon',
+    itemDisplay: 'show',
+    itemFontName: 'fontName',
+    itemFontWeight: 'fontWeight',
+    itemFontSize: 'size',
+    itemPaddingTop: 'size',
+    itemPaddingBottom: 'size',
+    itemPaddingLeft: 'size',
+    itemPaddingRight: 'size',
+    itemColor: 'color',
+    itemBackgroundColor: 'color',
+    itemBorderBackgroundColor: 'color',
+    itemBorderLeftColor: 'color',
+    itemBorderLeftWidth: 'border',
+    itemBorderWidth: 'border',
+    itemTextDecoration: 'textLine',
+    itemOutline: 'border',
+    shadow: 'shadow'
+  },
   OrderedList: {
     headerFontWeight: 'fontWeight',
     headerFontName: 'fontName',
@@ -1036,6 +1160,26 @@ module.exports = {
     paddingVertical: 'size',
     borderRadius: 'radius'
   },
+  StoryCard: {
+    outerBorderColor: 'color',
+    outerBorderGap: 'size',
+    outerBorderWidth: 'border',
+    flex: 'integer',
+    backgroundColor: 'color',
+    borderColor: 'color',
+    borderRadius: 'radius',
+    borderWidth: 'border',
+    paddingBottom: 'size',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    minWidth: 'size',
+    shadow: 'shadow',
+    contentAlignItems: 'flexAlign',
+    contentJustifyContent: 'flexJustifyContent',
+    contentFlexGrow: 'integer',
+    contentFlexShrink: 'integer'
+  },
   Tabs: {
     nextIcon: 'icon',
     previousIcon: 'icon',
@@ -1117,6 +1261,55 @@ module.exports = {
     outerBorderGap: 'size',
     outerBackgroundColor: 'color'
   },
+  Testimonial: {
+    testimonialContainerGap: 'size',
+    quoteContainerGap: 'size',
+    iconColor: 'color',
+    dividerBorder: 'border',
+    dividerBackgroundColor: 'color',
+    figcaptionGap: 'size',
+    textColor: 'color',
+    imageSize: 'size',
+    icon: 'icon'
+  },
+  TermsAndConditions: {
+    contentPaddingBottom: 'size',
+    contentPaddingLeft: 'size',
+    mdContentPaddingBottom: 'size',
+    mdContentPaddingLeft: 'size',
+    orderedPadding: 'size',
+    unorderedPadding: 'size',
+    listFontName: 'fontName',
+    listFontWeight: 'fontWeight',
+    listFontSize: 'fontSize',
+    listLineHeight: 'lineHeight',
+    listColor: 'color',
+    listMarginBottom: 'size',
+    listMarginLeft: 'size',
+    titleColor: 'color',
+    titleFontSize: 'fontSize',
+    titleLineHeight: 'lineHeight',
+    titlePaddingLeft: 'size',
+    expandIconContainerBorder: 'border',
+    expandIconContainerBorderColor: 'color',
+    expandIconContainerHeight: 'size',
+    expandIconContainerMarginX: 'size',
+    expandIconContainerMarginY: 'size',
+    expandIconContainerWidth: 'size',
+    expandIconContainerAlignItems: 'flexAlign',
+    expandIconContainerJustifyContent: 'flexJustifyContent',
+    expandTitleColor: 'color',
+    expandTitleFontSize: 'size',
+    expandTitleLineHeight: 'lineHeight',
+    expandTitleMarginX: 'size',
+    expandTitleMarginY: 'size',
+    expandBaseBorderWidth: 'border',
+    expandContentPaddingBottom: 'size',
+    expandContentPaddingLeft: 'size',
+    expandContentPaddingRight: 'size',
+    expandContentPaddingTop: 'size',
+    icon: 'icon'
+  },
   TextArea: { minLines: 'integer', maxLines: 'integer' },
   TextInput: {
     backgroundColor: 'color',
@@ -1145,6 +1338,24 @@ module.exports = {
     iconSize: 'size',
     iconColor: 'color'
   },
+  Toast: {
+    containerBackgroundColor: 'color',
+    containerGap: 'size',
+    animationHeightBefore: 'size',
+    animationHeightAfter: 'size',
+    animationPaddingBottomBefore: 'size',
+    animationPaddingBottomAfter: 'size',
+    animationPaddingTopBefore: 'size',
+    animationPaddingTopAfter: 'size',
+    animationBackgroundColorBefore: 'color',
+    animationBackgroundColorAfter: 'color',
+    animationColorBefore: 'color',
+    animationColorAfter: 'color',
+    animationDivColorBefore: 'color',
+    animationDivColorAfter: 'color',
+    animationFillColorBefore: 'color',
+    animationFillColorAfter: 'color'
+  },
   ToggleSwitch: {
     borderColor: 'color',
     borderWidth: 'border',
@@ -1252,6 +1463,22 @@ module.exports = {
     fontScaleCap: 'fontSize',
     letterSpacing: 'letterSpacing'
   },
+  Countdown: {
+    containerBorderRadius: 'radius',
+    containerGradient: 'gradient',
+    containerInverseBorder: 'border',
+    containerInverseBorderColor: 'color',
+    containerPaddingBottomTop: 'size',
+    containerPaddingLeftRight: 'size',
+    inverseBorderColor: 'color',
+    labelBorderColor: 'color',
+    textFontSize: 'fontSize',
+    textLineHeight: 'lineHeight',
+    labelFontSize: 'fontSize',
+    labelLineHeight: 'lineHeight',
+    textTimerFontWeight: 'fontWeight',
+    textTimerFontName: 'fontName'
+  },
   Skeleton: {
     color: 'color',
     size: 'size',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/system-theme-tokens",
-  "version": "2.21.0",
+  "version": "2.23.0",
   "description": "Theme token schema for UDS",
   "keywords": [
     "system"