@telus-uds/theme-public-mobile 1.0.0-prerelease.0 → 1.0.0

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.0.0](https://github.com/telus/universal-design-system/compare/@telus-uds/theme-public-mobile/v1.0.0-prerelease.0...@telus-uds/theme-public-mobile/v1.0.0) (2022-03-03)
+
+### Features
+
+- **components-base:** add ToggleSwitchGroup ([#1307](https://github.com/telus/universal-design-system/issues/1307)) ([402630a](https://github.com/telus/universal-design-system/commit/402630ad04c2d81c4f882fed564cf4ae33096cea))
+
+### Change summary (does not include documentation changes)
+
+#### New keys
+
+- `components.ToggleSwitch.rules.4.tokens.labelColor`
+- `components.ToggleSwitch.tokens.labelColor`
+- `components.ToggleSwitch.tokens.labelFontName`
+- `components.ToggleSwitch.tokens.labelFontSize`
+- `components.ToggleSwitch.tokens.labelFontWeight`
+- `components.ToggleSwitch.tokens.labelLineHeight`
+- `components.ToggleSwitch.tokens.labelMarginLeft`
+- `components.ToggleSwitchGroup.appearances`
+- `components.ToggleSwitchGroup.rules`
+- `components.ToggleSwitchGroup.tokens.alignItems`
+- `components.ToggleSwitchGroup.tokens.direction`
+- `components.ToggleSwitchGroup.tokens.flexGrow`
+- `components.ToggleSwitchGroup.tokens.flexShrink`
+- `components.ToggleSwitchGroup.tokens.justifyContent`
+- `components.ToggleSwitchGroup.tokens.space`
+
 ## [1.0.0-prerelease.0](https://github.com/telus/universal-design-system/compare/@telus-uds/theme-public-mobile/v0.1.0-prerelease.0...@telus-uds/theme-public-mobile/v1.0.0-prerelease.0) (2022-02-28)
 
 ### Features

package/build/schema.json

@@ -7856,6 +7856,24 @@
                 "iconColor": {
                   "$ref": "#color"
                 },
+                "labelColor": {
+                  "$ref": "#color"
+                },
+                "labelFontName": {
+                  "$ref": "#fontName"
+                },
+                "labelFontSize": {
+                  "$ref": "#fontSize"
+                },
+                "labelFontWeight": {
+                  "$ref": "#fontWeight"
+                },
+                "labelLineHeight": {
+                  "$ref": "#lineHeight"
+                },
+                "labelMarginLeft": {
+                  "$ref": "#size"
+                },
                 "switchSize": {
                   "$ref": "#size"
                 },
@@ -7898,6 +7916,12 @@
                 "trackBorderRadius",
                 "iconSize",
                 "iconColor",
+                "labelColor",
+                "labelFontName",
+                "labelFontSize",
+                "labelFontWeight",
+                "labelLineHeight",
+                "labelMarginLeft",
                 "switchSize",
                 "switchColor",
                 "switchBorderColor",
@@ -7986,6 +8010,24 @@
                       "iconColor": {
                         "$ref": "#color"
                       },
+                      "labelColor": {
+                        "$ref": "#color"
+                      },
+                      "labelFontName": {
+                        "$ref": "#fontName"
+                      },
+                      "labelFontSize": {
+                        "$ref": "#fontSize"
+                      },
+                      "labelFontWeight": {
+                        "$ref": "#fontWeight"
+                      },
+                      "labelLineHeight": {
+                        "$ref": "#lineHeight"
+                      },
+                      "labelMarginLeft": {
+                        "$ref": "#size"
+                      },
                       "switchSize": {
                         "$ref": "#size"
                       },
@@ -8022,6 +8064,101 @@
             "rules"
           ]
         },
+        "ToggleSwitchGroup": {
+          "type": "object",
+          "additionalProperties": false,
+          "properties": {
+            "appearances": {
+              "type": "object",
+              "additionalProperties": false,
+              "patternProperties": {
+                "^[a-z]+([A-Z0-9][a-z0-9]*)*$": {
+                  "$ref": "#appearance"
+                }
+              }
+            },
+            "tokens": {
+              "type": "object",
+              "additionalProperties": false,
+              "properties": {
+                "space": {
+                  "$ref": "#integer"
+                },
+                "direction": {
+                  "$ref": "#direction"
+                },
+                "alignItems": {
+                  "$ref": "#flexAlign"
+                },
+                "justifyContent": {
+                  "$ref": "#flexJustifyContent"
+                },
+                "flexGrow": {
+                  "$ref": "#integer"
+                },
+                "flexShrink": {
+                  "$ref": "#integer"
+                }
+              },
+              "required": [
+                "space",
+                "direction",
+                "alignItems",
+                "justifyContent",
+                "flexGrow",
+                "flexShrink"
+              ]
+            },
+            "rules": {
+              "type": "array",
+              "items": {
+                "type": "object",
+                "additionalProperties": false,
+                "properties": {
+                  "if": {
+                    "type": "object",
+                    "minProperties": 1
+                  },
+                  "tokens": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "properties": {
+                      "space": {
+                        "$ref": "#integer"
+                      },
+                      "direction": {
+                        "$ref": "#direction"
+                      },
+                      "alignItems": {
+                        "$ref": "#flexAlign"
+                      },
+                      "justifyContent": {
+                        "$ref": "#flexJustifyContent"
+                      },
+                      "flexGrow": {
+                        "$ref": "#integer"
+                      },
+                      "flexShrink": {
+                        "$ref": "#integer"
+                      }
+                    }
+                  },
+                  "description": {
+                    "type": "string"
+                  }
+                },
+                "required": [
+                  "if",
+                  "tokens"
+                ]
+              }
+            }
+          },
+          "required": [
+            "tokens",
+            "rules"
+          ]
+        },
         "Tooltip": {
           "type": "object",
           "additionalProperties": false,
@@ -8557,6 +8694,7 @@
         "TextArea",
         "TextInput",
         "ToggleSwitch",
+        "ToggleSwitchGroup",
         "Tooltip",
         "TooltipButton",
         "Typography",

package/build/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 28 Feb 2022 15:34:49 GMT
+ * Generated on Thu, 03 Mar 2022 12:31:56 GMT
  *
  */
 
@@ -1969,7 +1969,10 @@ module.exports = {
           if: { hover: true, selected: true },
           tokens: { borderColor: '#b6ebdb', switchColor: '#b6ebdb' }
         },
-        { if: { inactive: true }, tokens: { opacity: 0.5 } }
+        {
+          if: { inactive: true },
+          tokens: { labelColor: '#034045', opacity: 0.5 }
+        }
       ],
       tokens: {
         alignSelf: 'flex-start',
@@ -1980,6 +1983,12 @@ module.exports = {
         icon: null,
         iconColor: 'rgba(0, 0, 0, 0)',
         iconSize: 16,
+        labelColor: '#034045',
+        labelFontName: 'CerebriSans',
+        labelFontSize: 16,
+        labelFontWeight: '500',
+        labelLineHeight: 1.5,
+        labelMarginLeft: 12,
         opacity: 1,
         outerBackgroundColor: 'rgba(0, 0, 0, 0)',
         outerBorderColor: 'rgba(0, 0, 0, 0)',
@@ -2002,6 +2011,18 @@ module.exports = {
         width: 60
       }
     },
+    ToggleSwitchGroup: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        alignItems: 'flex-start',
+        direction: 'column',
+        flexGrow: 0,
+        flexShrink: 0,
+        justifyContent: 'flex-start',
+        space: 2
+      }
+    },
     Tooltip: {
       appearances: {},
       rules: [],
@@ -2159,5 +2180,5 @@ module.exports = {
       tokens: { size: 90 }
     }
   },
-  metadata: { name: 'theme-public-mobile', themeTokensVersion: '1.1.0' }
+  metadata: { name: 'theme-public-mobile', themeTokensVersion: '1.2.0' }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/theme-public-mobile",
-  "version": "1.0.0-prerelease.0",
+  "version": "1.0.0",
   "description": "Public Mobile theme",
   "keywords": [
     "public mobile"
@@ -16,7 +16,7 @@
   "dependencies": {},
   "devDependencies": {
     "@telus-uds/palette-public-mobile": "^0.1.0-prerelease.2",
-    "@telus-uds/system-theme-tokens": "^1.1.0",
+    "@telus-uds/system-theme-tokens": "^1.2.0",
     "@telus-uds/system-themes": "^0.0.1"
   },
   "peerDependencies": {

package/theme.json

@@ -2061,6 +2061,7 @@
             "inactive": true
           },
           "tokens": {
+            "labelColor": "{palette.color.parkGreen}",
             "opacity": "{palette.opacity.opacity5}"
           }
         }
@@ -2074,6 +2075,12 @@
         "icon": "{system.icon.none}",
         "iconColor": "{palette.color.transparent}",
         "iconSize": "{palette.size.size16}",
+        "labelColor": "{palette.color.parkGreen}",
+        "labelFontName": "{palette.fontName.CerebriSans}",
+        "labelFontSize": "{palette.fontSize.size16}",
+        "labelFontWeight": "{palette.fontWeight.weight500}",
+        "labelLineHeight": "{palette.lineHeight.multiply150}",
+        "labelMarginLeft": "{palette.size.size12}",
         "opacity": "{system.opacity.opaque}",
         "outerBackgroundColor": "{palette.color.transparent}",
         "outerBorderColor": "{palette.color.transparent}",
@@ -2096,6 +2103,18 @@
         "width": "{palette.size.size60}"
       }
     },
+    "ToggleSwitchGroup": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "alignItems": "{system.flexAlign.flexStart}",
+        "direction": "{system.direction.column}",
+        "flexGrow": "{system.integer.0}",
+        "flexShrink": "{system.integer.0}",
+        "justifyContent": "{system.flexJustifyContent.flexStart}",
+        "space": "{system.integer.2}"
+      }
+    },
     "Tooltip": {
       "appearances": {},
       "rules": [],