@telus-uds/components-base 1.41.0 → 1.43.0

package/CHANGELOG.md

@@ -1,12 +1,32 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 17 May 2023 00:13:27 GMT and should not be manually modified.
+This log was last generated on Wed, 24 May 2023 01:36:34 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.43.0
+
+Wed, 24 May 2023 01:36:34 GMT
+
+### Minor changes
+
+- installation, usage and license update in readme.md (srikanthkhari@gmail.com)
+- fix: list (samuraix221@hotmail.com)
+- Bump @telus-uds/system-constants to v1.2.1
+- Bump @telus-uds/system-theme-tokens to v2.26.1
+- Bump @telus-uds/browserslist-config to v1.0.5
+
+## 1.42.0
+
+Fri, 19 May 2023 04:57:25 GMT
+
+### Minor changes
+
+- update default space value for stackview component (evander.owusu@telus.com)
+
 ## 1.41.0
 
-Wed, 17 May 2023 00:13:27 GMT
+Wed, 17 May 2023 00:20:05 GMT
 
 ### Minor changes
 

package/README.md

@@ -3,3 +3,38 @@
 The UDS base components are a set of low level react-native components themed by UDS themes.
 
 Refer to the [UDS monorepo README](https://github.com/telus/universal-design-system/#readme) for details.
+
+## Install
+
+```javascript
+
+npm install @telus-uds/components-base
+```
+
+To ensure proper functionality, it is important to install the brand palette and theme since the components package does not include a default theme. For example, you can install the Telus brand palette and theme by running the following command:
+
+```javascript
+
+npm install @telus-uds/palette-allium @telus-uds/theme-allium
+```
+
+This will provide the necessary components, along with the corresponding palette and theme, for your project.
+
+## Usage
+
+1. Export component as a named export from root
+2. Wrap the UDS component in an BaseProvider
+3. Include the BaseProvider provider once at the root of your application (e.g. in App.jsx)
+
+```javascript
+
+import { BaseProvider, Button } from '@telus-uds/components-base'
+import alliumTheme from '@telus-uds/theme-allium'
+...
+  <BaseProvider defaultTheme={alliumTheme}>
+    ...
+    <Button onPress={() => {}}>Hello World!</Button>
+    ...
+  </BaseProvider>
+...
+```

package/component-docs.json

@@ -190,9 +190,17 @@
         "footnoteBodyPaddingRight": "size",
         "footnoteBodyPaddingTop": "size",
         "footnoteBodyPaddingBottom": "size",
+        "footnoteHeaderPaddingLeft": "size",
+        "footnoteHeaderPaddingRight": "size",
+        "footnoteHeaderPaddingTop": "size",
+        "footnoteHeaderPaddingBottom": "size",
         "listPaddingLeft": "size",
         "listItemMarkerFontSize": "size",
         "listItemMarkerLineHeight": "lineHeight",
+        "headerLineHeight": "size",
+        "headerFontSize": "size",
+        "headerFontName": "fontName",
+        "headerFontWeight": "fontWeight",
         "listItemColor": "color",
         "listItemFontSize": "size",
         "listItemLineHeight": "lineHeight",
@@ -9253,7 +9261,7 @@
         "props": {
           "space": {
             "defaultValue": {
-              "value": "1",
+              "value": "0",
               "computed": false
             },
             "type": {

package/lib/Button/ButtonBase.js

@@ -345,7 +345,8 @@ ButtonBase.defaultProps = {
 const staticStyles = _StyleSheet.default.create({
   row: {
     // Apply all button alignment horizontally; no vertical stacking within a button
-    flexDirection: 'row'
+    flexDirection: 'row',
+    justifyContent: 'center'
   },
   text: { ..._Platform.default.select({
       // TODO: https://github.com/telus/universal-design-system/issues/487

package/lib/List/ListItemBase.js

@@ -110,8 +110,8 @@ const ListItemBase = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
       isLastItem
     }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       style: [{
-        flexDirection: 'row',
-        flex: 'wrap'
+        flex: 1,
+        flexDirection: 'row'
       }, !title && {
         alignItems: 'center'
       }],
@@ -143,7 +143,8 @@ const staticStyles = _StyleSheet.default.create({
     flexDirection: 'row'
   },
   titleAndContentContainer: {
-    flexDirection: 'column'
+    flexDirection: 'column',
+    flexShrink: 1
   }
 });
 

package/lib/StackView/StackView.js

@@ -77,7 +77,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
 
 const StackView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
-    space = 1,
+    space = 0,
     divider,
     direction: directionProp = 'column',
     children,

package/lib-module/Button/ButtonBase.js

@@ -318,7 +318,8 @@ ButtonBase.defaultProps = {
 const staticStyles = StyleSheet.create({
   row: {
     // Apply all button alignment horizontally; no vertical stacking within a button
-    flexDirection: 'row'
+    flexDirection: 'row',
+    justifyContent: 'center'
   },
   text: { ...Platform.select({
       // TODO: https://github.com/telus/universal-design-system/issues/487

package/lib-module/List/ListItemBase.js

@@ -88,8 +88,8 @@ const ListItemBase = /*#__PURE__*/forwardRef((_ref3, ref) => {
       isLastItem
     }) : /*#__PURE__*/_jsxs(View, {
       style: [{
-        flexDirection: 'row',
-        flex: 'wrap'
+        flex: 1,
+        flexDirection: 'row'
       }, !title && {
         alignItems: 'center'
       }],
@@ -120,7 +120,8 @@ const staticStyles = StyleSheet.create({
     flexDirection: 'row'
   },
   titleAndContentContainer: {
-    flexDirection: 'column'
+    flexDirection: 'column',
+    flexShrink: 1
   }
 });
 ListItemBase.propTypes = { ...selectedSystemPropTypes,

package/lib-module/StackView/StackView.js

@@ -54,7 +54,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 
 const StackView = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
-    space = 1,
+    space = 0,
     divider,
     direction: directionProp = 'column',
     children,

package/package.json

@@ -10,8 +10,8 @@
     "@floating-ui/react-dom": "^1.0.1",
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/system-constants": "^1.2.0",
-    "@telus-uds/system-theme-tokens": "^2.26.0",
+    "@telus-uds/system-constants": "^1.2.1",
+    "@telus-uds/system-theme-tokens": "^2.26.1",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
@@ -21,7 +21,7 @@
   },
   "description": "Base components",
   "devDependencies": {
-    "@telus-uds/browserslist-config": "^1.0.4",
+    "@telus-uds/browserslist-config": "^1.0.5",
     "@testing-library/jest-native": "^4.0.1",
     "@testing-library/react": "^13.3.0",
     "@testing-library/react-hooks": "~7.0.1",
@@ -39,7 +39,7 @@
   "keywords": [
     "base"
   ],
-  "license": "UNLICENSED",
+  "license": "MIT",
   "main": "lib/index.js",
   "module": "lib-module/index.js",
   "name": "@telus-uds/components-base",
@@ -72,5 +72,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.41.0"
+  "version": "1.43.0"
 }

package/src/Button/ButtonBase.jsx

@@ -285,7 +285,8 @@ ButtonBase.defaultProps = { id: undefined }
 const staticStyles = StyleSheet.create({
   row: {
     // Apply all button alignment horizontally; no vertical stacking within a button
-    flexDirection: 'row'
+    flexDirection: 'row',
+    justifyContent: 'center'
   },
   text: {
     ...Platform.select({

package/src/List/ListItemBase.jsx

@@ -74,8 +74,8 @@ const ListItemBase = forwardRef(
           <View
             style={[
               {
-                flexDirection: 'row',
-                flex: 'wrap'
+                flex: 1,
+                flexDirection: 'row'
               },
               !title && { alignItems: 'center' }
             ]}
@@ -99,7 +99,7 @@ const staticStyles = StyleSheet.create({
   itemContainer: {
     flexDirection: 'row'
   },
-  titleAndContentContainer: { flexDirection: 'column' }
+  titleAndContentContainer: { flexDirection: 'column', flexShrink: 1 }
 })
 
 ListItemBase.propTypes = {

package/src/StackView/StackView.jsx

@@ -67,7 +67,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 const StackView = forwardRef(
   (
     {
-      space = 1,
+      space = 0,
       divider,
       direction: directionProp = 'column',
       children,