@thecb/components 3.1.10 → 3.1.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -13,10 +13,11 @@ This library contains Citybase React components for use across all current and f
|
|
|
13
13
|
- [Version bumping](#version-bumping)
|
|
14
14
|
- [Publishing new versions to NPM](#publishing-new-versions-to-npm)
|
|
15
15
|
- [Consuming in your application](#consuming-in-your-application)
|
|
16
|
+
|
|
16
17
|
- [Adding to existing application](#adding-to-existing-application)
|
|
17
18
|
- [Local import and development](#local-import-and-development)
|
|
18
19
|
- [Importing and using components](#importing-and-using-components)
|
|
19
|
-
|
|
20
|
+
|
|
20
21
|
<!-- /TOC -->
|
|
21
22
|
|
|
22
23
|
## Development setup
|
|
@@ -58,7 +59,7 @@ Please include new component stories as this library will also be a sandbox.
|
|
|
58
59
|
|
|
59
60
|
- New components may be added to this library via pull request. Only components that are currently used in, or expected to be used in, more than one CB frontend should be present in this library. Very niche application specific components should be kept in the `components/atoms` and `components/molecules` directory of their parent application.
|
|
60
61
|
|
|
61
|
-
- Almost all components in this library, and almost all newly added components, should be as "dumb" as possible. Ideally avoid introducing components that have tight integrations with application state. Forms and form components that make use of redux-freeform are an exception to this rule.
|
|
62
|
+
- Almost all components in this library, and almost all newly added components, should be as "dumb" as possible. Ideally avoid introducing components that have tight integrations with application state. Forms and form components that make use of redux-freeform are an exception to this rule.
|
|
62
63
|
|
|
63
64
|
- If a non-form component contains integration with application state, or business logic specific to a particular application, breaking the component up into styled/layout atoms and an application specific molecule that consumes them is the best practice. An example of this can be observed with the `Header` and `Footer` molecules in Navigate Frontend. Both of these molcules make use of component library atoms such as `NavHeader` to layout out content. NFE then has `Header` and `Footer` molecules which live in the NFE components directory and use NFE specific business logic to provide content to these atoms, resulting in a complete `Header` and `Footer`.
|
|
64
65
|
|
|
@@ -78,7 +79,7 @@ Please include new component stories as this library will also be a sandbox.
|
|
|
78
79
|
|
|
79
80
|
### Publishing new versions to NPM
|
|
80
81
|
|
|
81
|
-
- While GitHub will handle bumping the version of the library with every PR merge to master, publishing an update version of the library to NPM requires creating a release using the `release` script. This script triggers an action in the repo to create a release tagged with a publication date. After a new release is created,
|
|
82
|
+
- While GitHub will handle bumping the version of the library with every PR merge to master, publishing an update version of the library to NPM requires creating a release using the `release` script. This script triggers an action in the repo to create a release tagged with a publication date. After a new release is created, manually run `yarn build && yarn publish` in your repo directory to publish a new version to NPM. When yarn asks you what version to publish, enter the same number that it gives you, as this number will already reflect the increase in version from the auto version bump action.
|
|
82
83
|
|
|
83
84
|
- Once a new version of the library is published to NPM, you may either manually update your application's `package.json` to request that new version, or wait until the following morning when dependabot will pick up the change and create an update PR for you.
|
|
84
85
|
|
|
@@ -86,12 +87,12 @@ Please include new component stories as this library will also be a sandbox.
|
|
|
86
87
|
|
|
87
88
|
### Adding to existing application
|
|
88
89
|
|
|
89
|
-
- Run `yarn add @thecb/components`.
|
|
90
|
+
- Run `yarn add @thecb/components`.
|
|
90
91
|
- To verify it installed successfully, make sure it is in the applicaton's `package.json` file.
|
|
91
92
|
|
|
92
93
|
### Local import and development
|
|
93
94
|
|
|
94
|
-
If you are developing locally, you can add or make changes to components in the `@thecb/components` package and see those changes in the application running locally by linking the `@thecb/components` package to your application.
|
|
95
|
+
If you are developing locally, you can add or make changes to components in the `@thecb/components` package and see those changes in the application running locally by linking the `@thecb/components` package to your application.
|
|
95
96
|
Open the `@thecb/components`, and in the command line
|
|
96
97
|
|
|
97
98
|
- Run `yarn build`
|
|
@@ -104,7 +105,7 @@ You should see a success message, and directions on how to link this package int
|
|
|
104
105
|
Now the package is linked locally and you can make changes to the `@thecb/components` and you’ll see the changes in the application running `@thecb/components`. To unlink the package, in the application running `@thecb/components` and in the command line
|
|
105
106
|
|
|
106
107
|
- Run `yarn unlink @thecb/components`
|
|
107
|
-
- Run `yarn install`
|
|
108
|
+
- Run `yarn install` ` --``force `
|
|
108
109
|
|
|
109
110
|
Next go to the `@thecb/components` and in the command line
|
|
110
111
|
|
|
@@ -116,9 +117,9 @@ Now the package is unlinked, and you’re using the version on NPM.
|
|
|
116
117
|
|
|
117
118
|
To use components, you need to import the desired components inside the file you’d like them in. For example, to import the `<ButtonWithAction />` component into a file
|
|
118
119
|
|
|
119
|
-
- `import { ButtonWithAction } from` `"``@thecb/components``"
|
|
120
|
+
- `import { ButtonWithAction } from` ` "``@thecb/components``"``; `
|
|
120
121
|
|
|
121
|
-
You can alias the component by
|
|
122
|
+
You can alias the component by
|
|
122
123
|
|
|
123
124
|
- `import { ButtonWithAction as MyButton } from "@thecb/components";`
|
|
124
125
|
|
package/dist/index.cjs.js
CHANGED
|
@@ -13545,10 +13545,12 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
|
|
|
13545
13545
|
url = _ref$url === void 0 ? "/" : _ref$url,
|
|
13546
13546
|
_ref$disabled = _ref.disabled,
|
|
13547
13547
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
13548
|
+
_ref$fileLink = _ref.fileLink,
|
|
13549
|
+
fileLink = _ref$fileLink === void 0 ? false : _ref$fileLink,
|
|
13548
13550
|
extraStyles = _ref.extraStyles,
|
|
13549
13551
|
_ref$newTab = _ref.newTab,
|
|
13550
13552
|
newTab = _ref$newTab === void 0 ? false : _ref$newTab,
|
|
13551
|
-
otherProps = _objectWithoutProperties(_ref, ["url", "disabled", "extraStyles", "newTab"]);
|
|
13553
|
+
otherProps = _objectWithoutProperties(_ref, ["url", "disabled", "fileLink", "extraStyles", "newTab"]);
|
|
13552
13554
|
|
|
13553
13555
|
var ButtonWithLinkWrapper = function ButtonWithLinkWrapper(_ref2) {
|
|
13554
13556
|
var children = _ref2.children,
|
|
@@ -13561,7 +13563,7 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
|
|
|
13561
13563
|
return safeChildren(children, /*#__PURE__*/React__default.createElement("span", null));
|
|
13562
13564
|
}
|
|
13563
13565
|
|
|
13564
|
-
return R.test(URL_TEST, url) ? /*#__PURE__*/React__default.createElement(ExternalLink, {
|
|
13566
|
+
return R.test(URL_TEST, url) || fileLink ? /*#__PURE__*/React__default.createElement(ExternalLink, {
|
|
13565
13567
|
href: url,
|
|
13566
13568
|
tabIndex: "-1",
|
|
13567
13569
|
newTab: newTab,
|
package/package.json
CHANGED
|
@@ -8,6 +8,7 @@ import ButtonWithAction from "../button-with-action";
|
|
|
8
8
|
const ButtonWithLink = ({
|
|
9
9
|
url = "/",
|
|
10
10
|
disabled = false,
|
|
11
|
+
fileLink = false,
|
|
11
12
|
extraStyles,
|
|
12
13
|
newTab = false,
|
|
13
14
|
...otherProps
|
|
@@ -22,7 +23,7 @@ const ButtonWithLink = ({
|
|
|
22
23
|
if (disabled) {
|
|
23
24
|
return safeChildren(children, <span />);
|
|
24
25
|
}
|
|
25
|
-
return R.test(URL_TEST, url) ? (
|
|
26
|
+
return R.test(URL_TEST, url) || fileLink ? (
|
|
26
27
|
<ExternalLink
|
|
27
28
|
href={url}
|
|
28
29
|
tabIndex="-1"
|
package/.tool-versions
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
nodejs 10.13.0
|