@telus-uds/system-theme-tokens 3.2.0 → 4.0.0

package/CHANGELOG.md

@@ -1,12 +1,35 @@
 # Change Log - @telus-uds/system-theme-tokens
 
-This log was last generated on Thu, 19 Dec 2024 04:54:39 GMT and should not be manually modified.
+This log was last generated on Fri, 31 Jan 2025 20:49:18 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 4.0.0
+
+Fri, 31 Jan 2025 20:49:18 GMT
+
+### Major changes
+
+- Add CommonJS builds along with ESM (shahzaibkhalidmalik@outlook.com)
+- Bump @telus-uds/system-constants to v3.0.0
+
+### Minor changes
+
+- `Table`: add rowHoverBackgroundColor token (guillermo.peitzner@telus.com)
+
+## 3.3.0
+
+Fri, 10 Jan 2025 21:49:25 GMT
+
+### Minor changes
+
+- `MultiSelectFilter`: add label and button icon tokens (kristina.kirpichnikova@telus.com)
+- `Search`: `leftIcon` and `leftIconColor` tokens added to customize the new icon in the left side of the component (35577399+JoshHC@users.noreply.github.com)
+- `PriceLockup`: new tokens `centsPaddingTop` and `currencySymbolPaddingTop` added to the component (35577399+JoshHC@users.noreply.github.com)
+
 ## 3.2.0
 
-Thu, 19 Dec 2024 04:54:39 GMT
+Thu, 19 Dec 2024 05:02:20 GMT
 
 ### Minor changes
 

package/babel.config.cjs

@@ -0,0 +1,14 @@
+module.exports = (api) => {
+  const isModule = api.env('module')
+  return {
+    presets: [
+      [
+        '@babel/preset-env',
+        {
+          targets: { node: 'current' },
+          modules: isModule ? false : 'cjs'
+        }
+      ]
+    ]
+  }
+}

package/bin/android/build.js

@@ -3,7 +3,7 @@ import { resolve, dirname } from 'path'
 import { fileURLToPath } from 'url'
 import chalk from 'chalk'
 
-import components from '../../components.js'
+import components from '../../src/components.js'
 import tokensTemplate from './templates/component.js'
 import modelsTemplate from './templates/model.js'
 // TODO: Prettier doesn't yet support import assertions

package/bin/ios/build.js

@@ -5,7 +5,7 @@ import chalk from 'chalk'
 
 import { fileURLToPath } from 'url'
 
-import components from '../../components.js'
+import components from '../../src/components.js'
 import tokensTemplate from './templates/component.js'
 import modelsTemplate from './templates/model.js'
 // TODO: Prettier doesn't yet support import assertions

package/bin/ios/tokens.js

@@ -1,5 +1,5 @@
 import deepMerge from 'lodash.merge'
-import rnTokens from '../../tokens.js'
+import rnTokens from '../../src/tokens.js'
 import { types } from './types.js'
 
 export default deepMerge({}, rnTokens, {

package/build/cjs/appearances.js

@@ -0,0 +1,435 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _systemConstants = require("@telus-uds/system-constants");
+/*
+ * shared appearances
+ */
+const focus = {
+  description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+  values: [true, false],
+  type: 'state',
+  platforms: ['rn', 'web'] // In most cases, Native Apps team want to skip focus state
+};
+const inputFocus = {
+  description: 'Focus states for some input elements are well supported across web, RN, ios and android',
+  values: [true],
+  type: 'state'
+};
+const hover = {
+  description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+  values: [true, false],
+  type: 'state',
+  platforms: ['rn', 'web'] // Native Apps team currently want to skip ios / android hover
+};
+const pressed = {
+  description: 'Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.',
+  values: [true, false],
+  type: 'state'
+};
+const inactive = {
+  description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
+  values: [true],
+  type: 'state'
+};
+const selected = {
+  description: 'Applies while an interactive component is the currently selected one in a set of states or components, for example a button in a `ButtonGroup`.',
+  values: [true],
+  type: 'state'
+};
+const expanded = {
+  description: 'Applies when an ExpandCollapse panel is open and the content inside is visible',
+  values: [true, false],
+  type: 'state'
+};
+const validation = {
+  description: 'Validation states for form inputs',
+  values: ['error', 'success', 'warning'],
+  type: 'state'
+};
+const open = {
+  description: 'Applies when a ButtonDropdown is open.',
+  values: [true],
+  type: 'state'
+};
+
+// TODO this is used in radio and checkbox, should re-use validation state above?
+const error = {
+  values: [true],
+  type: 'state'
+};
+const checked = {
+  description: 'Corresponds to a selected state for a checkbox or radio',
+  values: [true],
+  type: 'state'
+};
+const disabled = {
+  values: [true],
+  type: 'state'
+};
+var _default = exports.default = {
+  // system-wide appearances
+  system: {
+    viewport: {
+      description: 'The size label for the current screen viewport based on the current screen width',
+      values: _systemConstants.viewports.keys,
+      type: 'state'
+    }
+  },
+  ActionCard: {
+    hover,
+    validation
+  },
+  SplashButton: {
+    hover
+  },
+  Button: {
+    focus,
+    hover,
+    pressed,
+    inactive,
+    selected
+  },
+  PreviewCard: {
+    pressed,
+    hover,
+    focus
+  },
+  ButtonDropdown: {
+    focus,
+    hover,
+    pressed,
+    inactive,
+    selected,
+    open
+  },
+  ButtonGroupItem: {
+    focus,
+    hover,
+    pressed,
+    inactive,
+    selected
+  },
+  Card: {
+    focus,
+    hover,
+    pressed,
+    selected
+  },
+  CardGroup: {
+    pressed,
+    selected,
+    focus,
+    hover
+  },
+  CarouselTabsPanelItem: {
+    focus,
+    hover,
+    pressed,
+    inactive,
+    selected
+  },
+  CarouselThumbnail: {
+    focus,
+    hover,
+    pressed
+  },
+  Checkbox: {
+    checked,
+    error,
+    focus,
+    hover,
+    inactive
+  },
+  CheckboxCard: {
+    pressed,
+    checked,
+    error,
+    focus,
+    hover,
+    inactive
+  },
+  ChevronLink: {
+    focus,
+    hover,
+    pressed
+  },
+  ColourToggle: {
+    focus,
+    hover,
+    pressed,
+    selected
+  },
+  DatePicker: {
+    pressed,
+    selected,
+    focus
+  },
+  DownloadApp: {
+    focus,
+    hover,
+    pressed
+  },
+  ExpandCollapseControl: {
+    pressed,
+    hover,
+    focus,
+    expanded
+  },
+  ExpandCollapseMiniControl: {
+    focus
+  },
+  ExpandCollapsePanel: {
+    expanded
+  },
+  Feedback: {
+    validation
+  },
+  HorizontalScrollButton: {
+    focus,
+    hover,
+    pressed
+  },
+  IconButton: {
+    focus,
+    hover,
+    pressed
+  },
+  Link: {
+    focus,
+    hover,
+    pressed,
+    iconPosition: {
+      description: 'Theme styles to be applied to icon links depending on where the icon is in relation to the link text',
+      values: ['left', 'right', 'inline'],
+      type: 'state'
+    },
+    quiet: {
+      description: 'When it is true, it does not show the decoration',
+      values: [true, false],
+      type: 'state'
+    }
+  },
+  Listbox: {
+    focus,
+    hover,
+    pressed,
+    expanded,
+    current: {
+      description: 'When the current item is selected',
+      values: [true, false],
+      type: 'state'
+    },
+    isChild: {
+      description: 'when the item is child of another child',
+      values: [true, false],
+      type: 'state'
+    }
+  },
+  Modal: {
+    maxWidth: {
+      description: 'Whether a modal should expand responsively to the maximum of 8 layout columns width',
+      values: [true],
+      type: 'state'
+    },
+    width: {
+      description: 'The width of the modal',
+      values: ['s', 'm', 'l', 'xl'],
+      type: 'state'
+    }
+  },
+  MultiSelectFilter: {
+    maxHeight: {
+      description: 'Whether MultiselectFilter modal should expand responsively to content or a set maximu height',
+      values: [true],
+      type: 'state'
+    },
+    maxWidth: {
+      description: 'Whether MultiselectFilter modal should expand to content or a set maximuh width',
+      values: [true],
+      type: 'state'
+    }
+  },
+  NavigationBar: {
+    focus,
+    pressed,
+    hover,
+    selected,
+    expanded,
+    viewport: {
+      description: 'The size label for the current screen viewport based on the current screen width',
+      values: _systemConstants.viewports.keys,
+      type: 'state'
+    }
+  },
+  Notification: {
+    system: {
+      values: [true],
+      type: 'state'
+    },
+    validation
+  },
+  PaginationPageButton: {
+    focus,
+    hover,
+    pressed,
+    selected
+  },
+  PaginationSideButton: {
+    focus,
+    hover,
+    pressed,
+    selected,
+    direction: {
+      values: ['previous', 'next'],
+      description: "Determines which way does the button navigate in Pagination's context",
+      type: 'state'
+    },
+    compact: {
+      values: [true],
+      description: 'Determines if the "Next" and "Previous" labels should be omitted',
+      type: 'state'
+    }
+  },
+  ProgressBar: {
+    inactive
+  },
+  QuickLinksList: {
+    hover,
+    focus,
+    pressed
+  },
+  QuickLinksFeatureItem: {
+    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
+  },
+  SearchButton: {
+    hover,
+    focus,
+    pressed,
+    inactive
+  },
+  Select: {
+    validation,
+    hover,
+    focus: inputFocus,
+    inactive,
+    active: {
+      values: [true],
+      type: 'state'
+    }
+  },
+  SideNavItem: {
+    active: {
+      description: 'Used to mark currently active Item or and ItemGroup containing the currently active Item',
+      values: [true, false],
+      type: 'state'
+    },
+    type: {
+      description: '`parent` being the toggle button for an ItemsGroup, and `child` an element of the ItemGroup',
+      values: ['child', 'parent'],
+      type: 'state'
+    },
+    expanded,
+    hover,
+    focus
+  },
+  SideNavItemGroup: {
+    expanded
+  },
+  spacingScale: {
+    space: {
+      description: 'Index of the intended position on the spacing scale',
+      values: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+      type: 'state'
+    }
+  },
+  StoryCard: {
+    focus,
+    hover,
+    pressed
+  },
+  TabsItem: {
+    focus,
+    hover,
+    pressed,
+    selected
+  },
+  TabBarItem: {
+    focus,
+    hover,
+    pressed,
+    selected
+  },
+  TagsItem: {
+    focus,
+    hover,
+    pressed,
+    inactive,
+    selected
+  },
+  TextInput: {
+    validation,
+    hover,
+    inactive,
+    focus: inputFocus
+  },
+  TermsAndConditions: {
+    expanded,
+    focus,
+    hover,
+    pressed
+  },
+  ToggleSwitch: {
+    focus,
+    hover,
+    pressed,
+    inactive,
+    selected
+  },
+  TooltipButton: {
+    focus,
+    hover,
+    pressed
+  },
+  VideoPickerThumbnail: {
+    focus,
+    hover,
+    pressed,
+    selected
+  },
+  SkipLink: {
+    focus,
+    pressed
+  }
+};