orcs-design-system 3.3.48 → 3.3.49
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 +5 -52
- package/es/components/Tag/index.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -36,15 +36,7 @@ A new browser window will open with a random localhost port. ORCS runs [Storyboo
|
|
|
36
36
|
|
|
37
37
|
All library components and files are located in `/lib`. Static files are located in `/assets`.
|
|
38
38
|
|
|
39
|
-
### Viewing changes in
|
|
40
|
-
|
|
41
|
-
As an alternative to `npm link` you can run `npm run dist` and then copy the `es` folder directly into TD or PM:
|
|
42
|
-
|
|
43
|
-
`cp -R es/ ../../../team-directory/node_modules/orcs-design-system/`
|
|
44
|
-
|
|
45
|
-
**_This has now been been made easier with using Nodemon and a custom script. Read on for how to set this up._**
|
|
46
|
-
|
|
47
|
-
### Working with orcs locally (hot reloading).
|
|
39
|
+
### Viewing local orcs changes in other projects (with hot reloading)
|
|
48
40
|
|
|
49
41
|
1. `cp .env.example .env`
|
|
50
42
|
2. OPTIONAL: Update `WORKING_DIR` in `.env` if orcs resides in a different working directory to your project. Else-wise Orcs will assume the project is one level up from itself.
|
|
@@ -63,39 +55,6 @@ snapshot: {
|
|
|
63
55
|
|
|
64
56
|
Now you can make any changes in orcs and it will build and then copy the es from the build into your project's node_modules. Run `npm install` in your project dir if you want to revert to the npm installation.
|
|
65
57
|
|
|
66
|
-
### Symlinking with `npm link`
|
|
67
|
-
|
|
68
|
-
##### We haven't had much success with this recently
|
|
69
|
-
|
|
70
|
-
If you need to do `npm link` in your local environment you might encounter the following issues:
|
|
71
|
-
|
|
72
|
-
- https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react
|
|
73
|
-
- https://github.com/styled-components/styled-components/issues/2379
|
|
74
|
-
|
|
75
|
-
Both react and styled-components cause duplicate instance issue after npm link, to fix that we need to ensure both app project and lib project are sharing the same instance of them.
|
|
76
|
-
|
|
77
|
-
In `orcs-design-system` folder:
|
|
78
|
-
|
|
79
|
-
```
|
|
80
|
-
npm link {PATH_APP_REPO}/node_modules/react
|
|
81
|
-
npm link {PATH_APP_REPO}/node_modules/styled-components
|
|
82
|
-
npm link
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
In `{PATH_APP_REPO}`:
|
|
86
|
-
|
|
87
|
-
```
|
|
88
|
-
npm i orcs-design-system
|
|
89
|
-
npm link orcs-design-system
|
|
90
|
-
npm start
|
|
91
|
-
```
|
|
92
|
-
|
|
93
|
-
### Testing
|
|
94
|
-
|
|
95
|
-
```
|
|
96
|
-
npm run test
|
|
97
|
-
```
|
|
98
|
-
|
|
99
58
|
### Publishing changes
|
|
100
59
|
|
|
101
60
|
In order to publish a new version, you will have to patch and push your changes.
|
|
@@ -105,11 +64,11 @@ After your changes have been merged to master, from your master branch:
|
|
|
105
64
|
npm version patch
|
|
106
65
|
```
|
|
107
66
|
|
|
108
|
-
|
|
67
|
+
This will bump version patch number and make a commit to current branch.
|
|
109
68
|
|
|
110
69
|
### Deploying to GitHub Pages
|
|
111
70
|
|
|
112
|
-
ORCS automatically deploys to GitHub Pages when a new version is published. To manually deploy:
|
|
71
|
+
ORCS automatically deploys to GitHub Pages when a new version is published and merged to master. To manually deploy:
|
|
113
72
|
|
|
114
73
|
```
|
|
115
74
|
npm run deploy-storybook
|
|
@@ -138,17 +97,11 @@ import { Box } from "orcs-design-system"
|
|
|
138
97
|
|
|
139
98
|
The [ORCS Storybook](https://orchestrated-io.github.io/orcs-design-system) contains documentation for each component, including code examples and props tables.
|
|
140
99
|
|
|
141
|
-
For components with subcomponents, each subcomponent must be imported. For example, to use `Tabs`:
|
|
142
|
-
|
|
143
|
-
```
|
|
144
|
-
import { TabsContainer, Tab } from "orcs-design-system"
|
|
145
|
-
```
|
|
146
|
-
|
|
147
100
|
### Using Styled System props
|
|
148
101
|
|
|
149
|
-
The design system components are built with [Styled System](https://styled-system
|
|
102
|
+
The design system components are built with [Styled System](https://github.com/styled-system/styled-system) props. Generally, components can access the `space` and `layout` prop categories, with additional prop categories on a per-component basis. Check the _Properties_ section in a component's documentation to see what props it can use. Custom props will be listed in the props table.
|
|
150
103
|
|
|
151
|
-
As a guide to using these props, see the [Styled System reference table](https://styled-system
|
|
104
|
+
As a guide to using these props, see the [Styled System reference table](https://github.com/styled-system/styled-system/blob/master/docs/table.md).
|
|
152
105
|
|
|
153
106
|
The design system's theme scales are contained in [systemtheme](https://github.com/orchestrated-io/orcs-design-system/blob/master/packages/orcs-design-system/lib/systemtheme.js).
|
|
154
107
|
|
|
@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
11
11
|
const TagWrapper = styled.div.withConfig({
|
|
12
12
|
displayName: "Tag__TagWrapper",
|
|
13
13
|
componentId: "sc-1dh2aa8-0"
|
|
14
|
-
})(["", " ", " display:flex;align-items:stretch;height:
|
|
14
|
+
})(["", " ", " display:flex;align-items:stretch;height:auto;max-height:max-content;min-height:", ";justify-content:center;> button{margin:0;}"], space, layout, props => props.small ? themeGet("tagScale.tagHeightSmall") : themeGet("tagScale.tagHeightDefault"));
|
|
15
15
|
const TagValue = styled.button.attrs(props => ({
|
|
16
16
|
"aria-pressed": props.selected
|
|
17
17
|
})).withConfig({
|