@telus-uds/components-base 1.42.0 → 1.44.0

package/CHANGELOG.md

@@ -1,12 +1,33 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 19 May 2023 04:52:38 GMT and should not be manually modified.
+This log was last generated on Wed, 24 May 2023 23:40:09 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.44.0
+
+Wed, 24 May 2023 23:40:09 GMT
+
+### Minor changes
+
+- alignSelf works for stackview links bug fix (akshay.pandey1@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.27.0
+
+## 1.43.0
+
+Wed, 24 May 2023 01:43:02 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:52:38 GMT
+Fri, 19 May 2023 04:57:25 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

@@ -58,6 +58,7 @@
       },
       "Table": {
         "tablePaddingBottom": "size",
+        "cellMinWidth": "size",
         "cellHeadingBackground": "color",
         "cellHeadingBoxShadowColor": "color",
         "cellBoxShadowColor": "color",

package/lib/Link/LinkBase.js

@@ -101,12 +101,14 @@ const selectDecorationStyles = _ref4 => {
   let {
     color,
     textLine,
-    textLineStyle
+    textLineStyle,
+    alignSelf
   } = _ref4;
   return {
     color,
     textDecorationLine: textLine,
     textDecorationStyle: textLineStyle,
+    alignSelf,
     ..._Platform.default.select({
       web: {
         // 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-module/Link/LinkBase.js

@@ -76,12 +76,14 @@ const selectDecorationStyles = _ref4 => {
   let {
     color,
     textLine,
-    textLineStyle
+    textLineStyle,
+    alignSelf
   } = _ref4;
   return {
     color,
     textDecorationLine: textLine,
     textDecorationStyle: textLineStyle,
+    alignSelf,
     ...Platform.select({
       web: {
         // 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/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.27.0",
     "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.42.0"
+  "version": "1.44.0"
 }

package/src/Link/LinkBase.jsx

@@ -67,10 +67,11 @@ const selectBlockStyles = (
     themeOptions
   })
 
-const selectDecorationStyles = ({ color, textLine, textLineStyle }) => ({
+const selectDecorationStyles = ({ color, textLine, textLineStyle, alignSelf }) => ({
   color,
   textDecorationLine: textLine,
   textDecorationStyle: textLineStyle,
+  alignSelf,
   ...Platform.select({
     web: {
       // TODO: https://github.com/telus/universal-design-system/issues/487
@@ -147,7 +148,8 @@ const LinkBase = forwardRef(
     return (
       <InlinePressable
         {...selectedProps}
-        inlineFlex={hasIcon} // assuming links without icons should be inline (even if they are long)
+        inlineFlex={hasIcon}
+        // assuming links without icons should be inline (even if they are long)
         ref={ref}
         style={(linkState) => {
           const themeTokens = resolveLinkTokens(linkState)

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 = {