@spark-web/text 1.1.0 → 1.1.2
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/CHANGELOG.md +213 -0
- package/README.md +67 -81
- package/dist/declarations/src/{defaultTextProps.d.ts → default-text-props.d.ts} +1 -1
- package/dist/declarations/src/index.d.ts +10 -10
- package/dist/declarations/src/{Strong.d.ts → strong.d.ts} +0 -0
- package/dist/declarations/src/{Text.d.ts → text.d.ts} +2 -2
- package/dist/declarations/src/{useForegroundTone.d.ts → use-foreground-tone.d.ts} +0 -0
- package/dist/declarations/src/{useOverflowStrategy.d.ts → use-overflow-strategy.d.ts} +0 -0
- package/dist/declarations/src/{useText.d.ts → use-text.d.ts} +1 -1
- package/dist/spark-web-text.cjs.dev.js +9 -16
- package/dist/spark-web-text.cjs.prod.js +9 -16
- package/dist/spark-web-text.esm.js +9 -16
- package/package.json +15 -8
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,213 @@
|
|
|
1
|
+
# @spark-web/text
|
|
2
|
+
|
|
3
|
+
## 1.1.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#246](https://github.com/brighte-labs/spark-web/pull/246)
|
|
8
|
+
[`de99b9c`](https://github.com/brighte-labs/spark-web/commit/de99b9c7f72373bd1902cf67f5cfec9a1e1db01c)
|
|
9
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Remove
|
|
10
|
+
destructuring from theme object
|
|
11
|
+
|
|
12
|
+
- [#218](https://github.com/brighte-labs/spark-web/pull/218)
|
|
13
|
+
[`6fc8d1b`](https://github.com/brighte-labs/spark-web/commit/6fc8d1bc37e25d0cd622bc37f68a1d92eb5961b5)
|
|
14
|
+
Thanks [@nderkim](https://github.com/nderkim)! - Rename files to kebab case
|
|
15
|
+
|
|
16
|
+
- [#222](https://github.com/brighte-labs/spark-web/pull/222)
|
|
17
|
+
[`7f93c45`](https://github.com/brighte-labs/spark-web/commit/7f93c45bbae8c765e10df9d0dd7615473797749b)
|
|
18
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update
|
|
19
|
+
dependencies
|
|
20
|
+
|
|
21
|
+
- [#242](https://github.com/brighte-labs/spark-web/pull/242)
|
|
22
|
+
[`6df05f7`](https://github.com/brighte-labs/spark-web/commit/6df05f764e4181c140d6547d6b897d0210468f6a)
|
|
23
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - - Add homepage
|
|
24
|
+
and repository keys to package.json
|
|
25
|
+
- Add CHANGELOG and README to files key in package.json
|
|
26
|
+
- Updated dependencies
|
|
27
|
+
[[`adc5e9e`](https://github.com/brighte-labs/spark-web/commit/adc5e9e6c99acd117f3261edcefdb5573132441b),
|
|
28
|
+
[`de99b9c`](https://github.com/brighte-labs/spark-web/commit/de99b9c7f72373bd1902cf67f5cfec9a1e1db01c),
|
|
29
|
+
[`6fc8d1b`](https://github.com/brighte-labs/spark-web/commit/6fc8d1bc37e25d0cd622bc37f68a1d92eb5961b5),
|
|
30
|
+
[`7f93c45`](https://github.com/brighte-labs/spark-web/commit/7f93c45bbae8c765e10df9d0dd7615473797749b),
|
|
31
|
+
[`62f7de8`](https://github.com/brighte-labs/spark-web/commit/62f7de8a2e1df5ae088c093d3acdaa868d3f61fe),
|
|
32
|
+
[`6df05f7`](https://github.com/brighte-labs/spark-web/commit/6df05f764e4181c140d6547d6b897d0210468f6a)]:
|
|
33
|
+
- @spark-web/box@1.1.0
|
|
34
|
+
- @spark-web/theme@3.1.0
|
|
35
|
+
- @spark-web/utils@1.2.3
|
|
36
|
+
|
|
37
|
+
## 1.1.1
|
|
38
|
+
|
|
39
|
+
### Patch Changes
|
|
40
|
+
|
|
41
|
+
- [#208](https://github.com/brighte-labs/spark-web/pull/208)
|
|
42
|
+
[`1ea26ef`](https://github.com/brighte-labs/spark-web/commit/1ea26ef04a3b45875ed0dd2326eeab1fbe1e4bc5)
|
|
43
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Lower required
|
|
44
|
+
node version
|
|
45
|
+
|
|
46
|
+
- Updated dependencies
|
|
47
|
+
[[`1ea26ef`](https://github.com/brighte-labs/spark-web/commit/1ea26ef04a3b45875ed0dd2326eeab1fbe1e4bc5)]:
|
|
48
|
+
- @spark-web/box@1.0.9
|
|
49
|
+
- @spark-web/theme@3.0.6
|
|
50
|
+
- @spark-web/utils@1.2.2
|
|
51
|
+
|
|
52
|
+
## 1.1.0
|
|
53
|
+
|
|
54
|
+
### Minor Changes
|
|
55
|
+
|
|
56
|
+
- [#192](https://github.com/brighte-labs/spark-web/pull/192)
|
|
57
|
+
[`9ff0c4b`](https://github.com/brighte-labs/spark-web/commit/9ff0c4b4cc83e0e1ab609d0bcdb01458b654263e)
|
|
58
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Spread consumer
|
|
59
|
+
props onto Text
|
|
60
|
+
|
|
61
|
+
### Patch Changes
|
|
62
|
+
|
|
63
|
+
- [#197](https://github.com/brighte-labs/spark-web/pull/197)
|
|
64
|
+
[`94016d8`](https://github.com/brighte-labs/spark-web/commit/94016d84e26bbe55833bbcbab847a2cce6041538)
|
|
65
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update packages
|
|
66
|
+
|
|
67
|
+
- Updated dependencies
|
|
68
|
+
[[`94016d8`](https://github.com/brighte-labs/spark-web/commit/94016d84e26bbe55833bbcbab847a2cce6041538)]:
|
|
69
|
+
- @spark-web/box@1.0.8
|
|
70
|
+
- @spark-web/theme@3.0.5
|
|
71
|
+
- @spark-web/utils@1.2.1
|
|
72
|
+
|
|
73
|
+
## 1.0.7
|
|
74
|
+
|
|
75
|
+
### Patch Changes
|
|
76
|
+
|
|
77
|
+
- [#173](https://github.com/brighte-labs/spark-web/pull/173)
|
|
78
|
+
[`90b7e9c`](https://github.com/brighte-labs/spark-web/commit/90b7e9cf4eb7e864d765c74b22c3dedf3d262e25)
|
|
79
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update babel
|
|
80
|
+
dependency
|
|
81
|
+
|
|
82
|
+
- Updated dependencies
|
|
83
|
+
[[`90b7e9c`](https://github.com/brighte-labs/spark-web/commit/90b7e9cf4eb7e864d765c74b22c3dedf3d262e25),
|
|
84
|
+
[`c3867af`](https://github.com/brighte-labs/spark-web/commit/c3867af7b77dfae3580ab63a5d5c9e8452f2da62)]:
|
|
85
|
+
- @spark-web/box@1.0.7
|
|
86
|
+
- @spark-web/theme@3.0.3
|
|
87
|
+
- @spark-web/utils@1.2.0
|
|
88
|
+
|
|
89
|
+
## 1.0.6
|
|
90
|
+
|
|
91
|
+
### Patch Changes
|
|
92
|
+
|
|
93
|
+
- [#167](https://github.com/brighte-labs/spark-web/pull/167)
|
|
94
|
+
[`4f79350`](https://github.com/brighte-labs/spark-web/commit/4f793508fdb43ddd452f0d59a3126101f9fa5459)
|
|
95
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update Babel
|
|
96
|
+
|
|
97
|
+
- Updated dependencies
|
|
98
|
+
[[`4f79350`](https://github.com/brighte-labs/spark-web/commit/4f793508fdb43ddd452f0d59a3126101f9fa5459),
|
|
99
|
+
[`60f7281`](https://github.com/brighte-labs/spark-web/commit/60f7281c4a194d934a2ce561cad47e737b0fb48e)]:
|
|
100
|
+
- @spark-web/box@1.0.6
|
|
101
|
+
- @spark-web/theme@3.0.2
|
|
102
|
+
- @spark-web/utils@1.1.5
|
|
103
|
+
|
|
104
|
+
## 1.0.5
|
|
105
|
+
|
|
106
|
+
### Patch Changes
|
|
107
|
+
|
|
108
|
+
- [#113](https://github.com/brighte-labs/spark-web/pull/113)
|
|
109
|
+
[`156236d`](https://github.com/brighte-labs/spark-web/commit/156236d2474aee66a0b8e2030635f9c08a5b78ba)
|
|
110
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update
|
|
111
|
+
dependencies
|
|
112
|
+
|
|
113
|
+
- Updated dependencies
|
|
114
|
+
[[`156236d`](https://github.com/brighte-labs/spark-web/commit/156236d2474aee66a0b8e2030635f9c08a5b78ba)]:
|
|
115
|
+
- @spark-web/box@1.0.5
|
|
116
|
+
- @spark-web/theme@3.0.1
|
|
117
|
+
- @spark-web/utils@1.1.3
|
|
118
|
+
|
|
119
|
+
## 1.0.4
|
|
120
|
+
|
|
121
|
+
### Patch Changes
|
|
122
|
+
|
|
123
|
+
- [#83](https://github.com/brighte-labs/spark-web/pull/83)
|
|
124
|
+
[`1ef4f82`](https://github.com/brighte-labs/spark-web/commit/1ef4f82df999c487b79cd216c17ca5735e444fc5)
|
|
125
|
+
Thanks [@ChristopherMitchell242](https://github.com/ChristopherMitchell242)! -
|
|
126
|
+
Data attribute added to component props to allow consumers to attach custom
|
|
127
|
+
attributes to components
|
|
128
|
+
|
|
129
|
+
* [#65](https://github.com/brighte-labs/spark-web/pull/65)
|
|
130
|
+
[`182a53a`](https://github.com/brighte-labs/spark-web/commit/182a53a484892df48754e89dd714459a7f69fcff)
|
|
131
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Remove "Inter"
|
|
132
|
+
font, change font-weights and font-sizes.
|
|
133
|
+
|
|
134
|
+
- [#87](https://github.com/brighte-labs/spark-web/pull/87)
|
|
135
|
+
[`5744b68`](https://github.com/brighte-labs/spark-web/commit/5744b6820f626b93a14e11e1fbd96bcbe1b12b27)
|
|
136
|
+
Thanks [@ChristopherMitchell242](https://github.com/ChristopherMitchell242)! -
|
|
137
|
+
Data attribute added to component props to allow consumers to attach
|
|
138
|
+
customattributes to components
|
|
139
|
+
|
|
140
|
+
* [#52](https://github.com/brighte-labs/spark-web/pull/52)
|
|
141
|
+
[`82ab744`](https://github.com/brighte-labs/spark-web/commit/82ab744f198466810f3386bc459b8ab4d57c820e)
|
|
142
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Add files array
|
|
143
|
+
to package.json files
|
|
144
|
+
|
|
145
|
+
* Updated dependencies
|
|
146
|
+
[[`182a53a`](https://github.com/brighte-labs/spark-web/commit/182a53a484892df48754e89dd714459a7f69fcff),
|
|
147
|
+
[`82ab744`](https://github.com/brighte-labs/spark-web/commit/82ab744f198466810f3386bc459b8ab4d57c820e),
|
|
148
|
+
[`df618d9`](https://github.com/brighte-labs/spark-web/commit/df618d92d534e06f06ecedc95ea6bdd51cdc906b)]:
|
|
149
|
+
- @spark-web/theme@3.0.0
|
|
150
|
+
- @spark-web/box@1.0.4
|
|
151
|
+
- @spark-web/utils@1.1.2
|
|
152
|
+
|
|
153
|
+
## 1.0.3
|
|
154
|
+
|
|
155
|
+
### Patch Changes
|
|
156
|
+
|
|
157
|
+
- [#42](https://github.com/brighte-labs/spark-web/pull/42)
|
|
158
|
+
[`435779a`](https://github.com/brighte-labs/spark-web/commit/435779aa42bd635bbf43e1fd41724c666402caa2)
|
|
159
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Prevent multiple
|
|
160
|
+
versions of React
|
|
161
|
+
|
|
162
|
+
- Updated dependencies
|
|
163
|
+
[[`435779a`](https://github.com/brighte-labs/spark-web/commit/435779aa42bd635bbf43e1fd41724c666402caa2)]:
|
|
164
|
+
- @spark-web/box@1.0.3
|
|
165
|
+
- @spark-web/theme@2.0.2
|
|
166
|
+
- @spark-web/utils@1.1.1
|
|
167
|
+
|
|
168
|
+
## 1.0.2
|
|
169
|
+
|
|
170
|
+
### Patch Changes
|
|
171
|
+
|
|
172
|
+
- [#40](https://github.com/brighte-labs/spark-web/pull/40)
|
|
173
|
+
[`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)
|
|
174
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Add
|
|
175
|
+
@babel/transform-runtime
|
|
176
|
+
|
|
177
|
+
- Updated dependencies
|
|
178
|
+
[[`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)]:
|
|
179
|
+
- @spark-web/box@1.0.2
|
|
180
|
+
- @spark-web/theme@2.0.1
|
|
181
|
+
- @spark-web/utils@1.0.2
|
|
182
|
+
|
|
183
|
+
## 1.0.1
|
|
184
|
+
|
|
185
|
+
### Patch Changes
|
|
186
|
+
|
|
187
|
+
- [#36](https://github.com/brighte-labs/spark-web/pull/36)
|
|
188
|
+
[`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)
|
|
189
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update Babel
|
|
190
|
+
config
|
|
191
|
+
|
|
192
|
+
- Updated dependencies
|
|
193
|
+
[[`aebff30`](https://github.com/brighte-labs/spark-web/commit/aebff30c86cb0a9db22b545c46159ce0d1c14afb),
|
|
194
|
+
[`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)]:
|
|
195
|
+
- @spark-web/theme@2.0.0
|
|
196
|
+
- @spark-web/box@1.0.1
|
|
197
|
+
- @spark-web/utils@1.0.1
|
|
198
|
+
|
|
199
|
+
## 1.0.0
|
|
200
|
+
|
|
201
|
+
### Major Changes
|
|
202
|
+
|
|
203
|
+
- [#27](https://github.com/brighte-labs/spark-web/pull/27)
|
|
204
|
+
[`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)
|
|
205
|
+
Thanks [@JedWatson](https://github.com/JedWatson)! - Initial Version
|
|
206
|
+
|
|
207
|
+
### Patch Changes
|
|
208
|
+
|
|
209
|
+
- Updated dependencies
|
|
210
|
+
[[`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)]:
|
|
211
|
+
- @spark-web/box@1.0.0
|
|
212
|
+
- @spark-web/theme@1.0.0
|
|
213
|
+
- @spark-web/utils@1.0.0
|
package/README.md
CHANGED
|
@@ -9,44 +9,26 @@ Constrained, purposeful text styles as a component.
|
|
|
9
9
|
## Examples
|
|
10
10
|
|
|
11
11
|
```jsx live
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
<
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
</
|
|
30
|
-
</
|
|
31
|
-
|
|
32
|
-
<Text size="small">small regular</Text>
|
|
33
|
-
<Text size="small" weight="semibold">
|
|
34
|
-
small medium
|
|
35
|
-
</Text>
|
|
36
|
-
<Text size="small" weight="strong">
|
|
37
|
-
small strong
|
|
38
|
-
</Text>
|
|
39
|
-
</Stack>
|
|
40
|
-
<Stack gap="small">
|
|
41
|
-
<Text size="xsmall">xsmall regular</Text>
|
|
42
|
-
<Text size="xsmall" weight="semibold">
|
|
43
|
-
xsmall medium
|
|
44
|
-
</Text>
|
|
45
|
-
<Text size="xsmall" weight="strong">
|
|
46
|
-
xsmall strong
|
|
47
|
-
</Text>
|
|
48
|
-
</Stack>
|
|
49
|
-
</Columns>
|
|
12
|
+
const textSizes = ['large', 'standard', 'small', 'xsmall'];
|
|
13
|
+
|
|
14
|
+
return (
|
|
15
|
+
<Columns collapseBelow="tablet" gap="xlarge">
|
|
16
|
+
<Stack gap="large">
|
|
17
|
+
{textSizes.map(textSize => (
|
|
18
|
+
<Text key={textSize} size={textSize} weight="regular">
|
|
19
|
+
Text {textSize} regular
|
|
20
|
+
</Text>
|
|
21
|
+
))}
|
|
22
|
+
</Stack>
|
|
23
|
+
<Stack gap="large">
|
|
24
|
+
{textSizes.map(textSize => (
|
|
25
|
+
<Text key={textSize} size={textSize} weight="semibold">
|
|
26
|
+
Text {textSize} regular
|
|
27
|
+
</Text>
|
|
28
|
+
))}
|
|
29
|
+
</Stack>
|
|
30
|
+
</Columns>
|
|
31
|
+
);
|
|
50
32
|
```
|
|
51
33
|
|
|
52
34
|
### Align
|
|
@@ -67,30 +49,24 @@ Use the `overflowStrategy` prop to manage how `Text` behaves with regard to
|
|
|
67
49
|
overflow.
|
|
68
50
|
|
|
69
51
|
```jsx live
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
52
|
+
const overflowStrategies = ['truncate', 'nowrap', 'breakword'];
|
|
53
|
+
|
|
54
|
+
return (
|
|
55
|
+
<Stack gap="large" style={{ width: 200 }}>
|
|
56
|
+
<Stack gap="small">
|
|
57
|
+
<Text weight="semibold">Default</Text>
|
|
58
|
+
<Text>The quick brown fox jumps over the lazy dog.</Text>
|
|
59
|
+
</Stack>
|
|
60
|
+
{overflowStrategies.map(overflowStrategy => (
|
|
61
|
+
<Stack key={overflowStrategy} gap="small">
|
|
62
|
+
<Text weight="semibold">{overflowStrategy}</Text>
|
|
63
|
+
<Text overflowStrategy={overflowStrategy}>
|
|
64
|
+
The quick brown fox jumps over the lazy dog.
|
|
65
|
+
</Text>
|
|
66
|
+
</Stack>
|
|
67
|
+
))}
|
|
80
68
|
</Stack>
|
|
81
|
-
|
|
82
|
-
<Text weight="strong">No wrap</Text>
|
|
83
|
-
<Text overflowStrategy="nowrap">
|
|
84
|
-
The quick brown fox jumps over the lazy dog.
|
|
85
|
-
</Text>
|
|
86
|
-
</Stack>
|
|
87
|
-
<Stack gap="small">
|
|
88
|
-
<Text weight="strong">Break word</Text>
|
|
89
|
-
<Text overflowStrategy="breakword">
|
|
90
|
-
The_quick_brown_fox_jumps_over_the_lazy dog.
|
|
91
|
-
</Text>
|
|
92
|
-
</Stack>
|
|
93
|
-
</Stack>
|
|
69
|
+
);
|
|
94
70
|
```
|
|
95
71
|
|
|
96
72
|
### Tone
|
|
@@ -99,14 +75,35 @@ The foreground colour of text can be set by applying a `tone`. In addition to
|
|
|
99
75
|
the foundation tones, “muted” provides a way to de-emphasise text.
|
|
100
76
|
|
|
101
77
|
```jsx live
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
78
|
+
const textTones = [
|
|
79
|
+
'neutral', // Default
|
|
80
|
+
'accent',
|
|
81
|
+
'caution',
|
|
82
|
+
'critical',
|
|
83
|
+
'disabled',
|
|
84
|
+
'fieldAccent',
|
|
85
|
+
'info',
|
|
86
|
+
'link',
|
|
87
|
+
'muted',
|
|
88
|
+
'placeholder',
|
|
89
|
+
'positive',
|
|
90
|
+
'primary',
|
|
91
|
+
'primaryActive',
|
|
92
|
+
'primaryHover',
|
|
93
|
+
'secondary',
|
|
94
|
+
'secondaryActive',
|
|
95
|
+
'secondaryHover',
|
|
96
|
+
];
|
|
97
|
+
|
|
98
|
+
return (
|
|
99
|
+
<Columns collapseBelow="tablet" gap="large" template={[1, 1]}>
|
|
100
|
+
{textTones.map(tone => (
|
|
101
|
+
<Text key={tone} tone={tone}>
|
|
102
|
+
{tone}
|
|
103
|
+
</Text>
|
|
104
|
+
))}
|
|
105
|
+
</Columns>
|
|
106
|
+
);
|
|
110
107
|
```
|
|
111
108
|
|
|
112
109
|
### Weight
|
|
@@ -138,18 +135,7 @@ tones “neutral” and “muted” will be inverted.
|
|
|
138
135
|
|
|
139
136
|
## Props
|
|
140
137
|
|
|
141
|
-
|
|
142
|
-
| ----------------- | --------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------- |
|
|
143
|
-
| align? | 'left' \| 'center' \| 'right' | | Sets the horizontal alignment of the component. Used if displaying as block. |
|
|
144
|
-
| children | React.ReactNode | | The text content to be rendered. |
|
|
145
|
-
| data? | [DataAttributeMap][data-attribute-map] | | Sets data attributes on the component. |
|
|
146
|
-
| id? | string | | Sets a unique idenitifier for the component. |
|
|
147
|
-
| inline? | boolean | | Indicates if text should be inline or not. |
|
|
148
|
-
| overflowStrategy? | 'nowrap' \| 'truncate' \| 'breakword' | | Sets how text behaves with regards to overflow. Used if displaying as block. |
|
|
149
|
-
| tabularNumbers? | boolean | | When enabled, numbers will be the same width. Similar to a monospaced font. |
|
|
150
|
-
| tone? | keyof [BrighteTheme][brighte-theme]['color']['foreground'] | | The tone of the text. |
|
|
151
|
-
| transform? | CSSProperties['textTransform'] | | Transforms the text casing. |
|
|
152
|
-
| weight? | keyof [BrighteTheme][brighte-theme]['typography']['fontweight'] | | The weight of the text. |
|
|
138
|
+
<PropsTable displayName="Text" />
|
|
153
139
|
|
|
154
140
|
Extra props are also passed into the underlying [`Box`](/package/box) component.
|
|
155
141
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
export { useTextContext } from './context';
|
|
2
|
-
export { DefaultTextPropsProvider, useDefaultTextProps, } from './
|
|
3
|
-
export { Strong } from './
|
|
4
|
-
export { Text } from './
|
|
5
|
-
export { useForegroundTone } from './
|
|
6
|
-
export { useOverflowStrategy } from './
|
|
7
|
-
export { createTextStyles, useText } from './
|
|
8
|
-
export type { StrongProps } from './
|
|
9
|
-
export type { TextProps } from './
|
|
10
|
-
export type { ForegroundTone } from './
|
|
11
|
-
export type { TextOverflowStrategy } from './
|
|
2
|
+
export { DefaultTextPropsProvider, useDefaultTextProps, } from './default-text-props';
|
|
3
|
+
export { Strong } from './strong';
|
|
4
|
+
export { Text } from './text';
|
|
5
|
+
export { useForegroundTone } from './use-foreground-tone';
|
|
6
|
+
export { useOverflowStrategy } from './use-overflow-strategy';
|
|
7
|
+
export { createTextStyles, useText } from './use-text';
|
|
8
|
+
export type { StrongProps } from './strong';
|
|
9
|
+
export type { TextProps } from './text';
|
|
10
|
+
export type { ForegroundTone } from './use-foreground-tone';
|
|
11
|
+
export type { TextOverflowStrategy } from './use-overflow-strategy';
|
|
File without changes
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import type { BoxProps } from '@spark-web/box';
|
|
2
2
|
import type { DataAttributeMap } from '@spark-web/utils/internal';
|
|
3
3
|
import type { CSSProperties, ReactNode } from 'react';
|
|
4
|
-
import type { TextOverflowStrategy } from './
|
|
5
|
-
import type { UseTextProps } from './
|
|
4
|
+
import type { TextOverflowStrategy } from './use-overflow-strategy';
|
|
5
|
+
import type { UseTextProps } from './use-text';
|
|
6
6
|
declare type InlineProps = {
|
|
7
7
|
align?: never;
|
|
8
8
|
/** Display as an inline element. */
|
|
File without changes
|
|
File without changes
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { BrighteTextDefinition, BrighteTheme } from '@spark-web/theme';
|
|
2
|
-
import type { ForegroundTone } from './
|
|
2
|
+
import type { ForegroundTone } from './use-foreground-tone';
|
|
3
3
|
export declare type UseTextProps = {
|
|
4
4
|
/** Apply leading-trim styles. */
|
|
5
5
|
baseline?: boolean;
|
|
@@ -59,12 +59,9 @@ var useDefaultTextProps = function useDefaultTextProps(_ref2) {
|
|
|
59
59
|
|
|
60
60
|
var Strong = function Strong(_ref) {
|
|
61
61
|
var children = _ref.children;
|
|
62
|
-
|
|
63
|
-
var _useTheme = theme.useTheme(),
|
|
64
|
-
typography = _useTheme.typography;
|
|
65
|
-
|
|
62
|
+
var theme$1 = theme.useTheme();
|
|
66
63
|
var styles = {
|
|
67
|
-
fontWeight: typography.fontWeight.semibold
|
|
64
|
+
fontWeight: theme$1.typography.fontWeight.semibold
|
|
68
65
|
};
|
|
69
66
|
return /*#__PURE__*/jsxRuntime.jsx("strong", {
|
|
70
67
|
className: css.css(styles),
|
|
@@ -129,16 +126,12 @@ function useText(_ref) {
|
|
|
129
126
|
size = _ref.size,
|
|
130
127
|
tone = _ref.tone,
|
|
131
128
|
weight = _ref.weight;
|
|
132
|
-
|
|
133
|
-
var _useTheme = theme.useTheme(),
|
|
134
|
-
typography = _useTheme.typography,
|
|
135
|
-
utils = _useTheme.utils;
|
|
136
|
-
|
|
129
|
+
var theme$1 = theme.useTheme();
|
|
137
130
|
var color = useForegroundTone(tone);
|
|
138
|
-
var
|
|
139
|
-
mobile =
|
|
140
|
-
tablet =
|
|
141
|
-
var responsiveStyles = utils.responsiveStyles({
|
|
131
|
+
var _theme$typography$tex = theme$1.typography.text[size],
|
|
132
|
+
mobile = _theme$typography$tex.mobile,
|
|
133
|
+
tablet = _theme$typography$tex.tablet;
|
|
134
|
+
var responsiveStyles = theme$1.utils.responsiveStyles({
|
|
142
135
|
mobile: createTextStyles(mobile, {
|
|
143
136
|
includeTrims: baseline
|
|
144
137
|
}),
|
|
@@ -148,8 +141,8 @@ function useText(_ref) {
|
|
|
148
141
|
});
|
|
149
142
|
var styles = [{
|
|
150
143
|
color: color,
|
|
151
|
-
fontFamily: typography.fontFamily.sans.name,
|
|
152
|
-
fontWeight: typography.fontWeight[weight]
|
|
144
|
+
fontFamily: theme$1.typography.fontFamily.sans.name,
|
|
145
|
+
fontWeight: theme$1.typography.fontWeight[weight]
|
|
153
146
|
}, responsiveStyles];
|
|
154
147
|
return styles;
|
|
155
148
|
}
|
|
@@ -59,12 +59,9 @@ var useDefaultTextProps = function useDefaultTextProps(_ref2) {
|
|
|
59
59
|
|
|
60
60
|
var Strong = function Strong(_ref) {
|
|
61
61
|
var children = _ref.children;
|
|
62
|
-
|
|
63
|
-
var _useTheme = theme.useTheme(),
|
|
64
|
-
typography = _useTheme.typography;
|
|
65
|
-
|
|
62
|
+
var theme$1 = theme.useTheme();
|
|
66
63
|
var styles = {
|
|
67
|
-
fontWeight: typography.fontWeight.semibold
|
|
64
|
+
fontWeight: theme$1.typography.fontWeight.semibold
|
|
68
65
|
};
|
|
69
66
|
return /*#__PURE__*/jsxRuntime.jsx("strong", {
|
|
70
67
|
className: css.css(styles),
|
|
@@ -129,16 +126,12 @@ function useText(_ref) {
|
|
|
129
126
|
size = _ref.size,
|
|
130
127
|
tone = _ref.tone,
|
|
131
128
|
weight = _ref.weight;
|
|
132
|
-
|
|
133
|
-
var _useTheme = theme.useTheme(),
|
|
134
|
-
typography = _useTheme.typography,
|
|
135
|
-
utils = _useTheme.utils;
|
|
136
|
-
|
|
129
|
+
var theme$1 = theme.useTheme();
|
|
137
130
|
var color = useForegroundTone(tone);
|
|
138
|
-
var
|
|
139
|
-
mobile =
|
|
140
|
-
tablet =
|
|
141
|
-
var responsiveStyles = utils.responsiveStyles({
|
|
131
|
+
var _theme$typography$tex = theme$1.typography.text[size],
|
|
132
|
+
mobile = _theme$typography$tex.mobile,
|
|
133
|
+
tablet = _theme$typography$tex.tablet;
|
|
134
|
+
var responsiveStyles = theme$1.utils.responsiveStyles({
|
|
142
135
|
mobile: createTextStyles(mobile, {
|
|
143
136
|
includeTrims: baseline
|
|
144
137
|
}),
|
|
@@ -148,8 +141,8 @@ function useText(_ref) {
|
|
|
148
141
|
});
|
|
149
142
|
var styles = [{
|
|
150
143
|
color: color,
|
|
151
|
-
fontFamily: typography.fontFamily.sans.name,
|
|
152
|
-
fontWeight: typography.fontWeight[weight]
|
|
144
|
+
fontFamily: theme$1.typography.fontFamily.sans.name,
|
|
145
|
+
fontWeight: theme$1.typography.fontWeight[weight]
|
|
153
146
|
}, responsiveStyles];
|
|
154
147
|
return styles;
|
|
155
148
|
}
|
|
@@ -55,12 +55,9 @@ var useDefaultTextProps = function useDefaultTextProps(_ref2) {
|
|
|
55
55
|
|
|
56
56
|
var Strong = function Strong(_ref) {
|
|
57
57
|
var children = _ref.children;
|
|
58
|
-
|
|
59
|
-
var _useTheme = useTheme(),
|
|
60
|
-
typography = _useTheme.typography;
|
|
61
|
-
|
|
58
|
+
var theme = useTheme();
|
|
62
59
|
var styles = {
|
|
63
|
-
fontWeight: typography.fontWeight.semibold
|
|
60
|
+
fontWeight: theme.typography.fontWeight.semibold
|
|
64
61
|
};
|
|
65
62
|
return /*#__PURE__*/jsx("strong", {
|
|
66
63
|
className: css(styles),
|
|
@@ -125,16 +122,12 @@ function useText(_ref) {
|
|
|
125
122
|
size = _ref.size,
|
|
126
123
|
tone = _ref.tone,
|
|
127
124
|
weight = _ref.weight;
|
|
128
|
-
|
|
129
|
-
var _useTheme = useTheme(),
|
|
130
|
-
typography = _useTheme.typography,
|
|
131
|
-
utils = _useTheme.utils;
|
|
132
|
-
|
|
125
|
+
var theme = useTheme();
|
|
133
126
|
var color = useForegroundTone(tone);
|
|
134
|
-
var
|
|
135
|
-
mobile =
|
|
136
|
-
tablet =
|
|
137
|
-
var responsiveStyles = utils.responsiveStyles({
|
|
127
|
+
var _theme$typography$tex = theme.typography.text[size],
|
|
128
|
+
mobile = _theme$typography$tex.mobile,
|
|
129
|
+
tablet = _theme$typography$tex.tablet;
|
|
130
|
+
var responsiveStyles = theme.utils.responsiveStyles({
|
|
138
131
|
mobile: createTextStyles(mobile, {
|
|
139
132
|
includeTrims: baseline
|
|
140
133
|
}),
|
|
@@ -144,8 +137,8 @@ function useText(_ref) {
|
|
|
144
137
|
});
|
|
145
138
|
var styles = [{
|
|
146
139
|
color: color,
|
|
147
|
-
fontFamily: typography.fontFamily.sans.name,
|
|
148
|
-
fontWeight: typography.fontWeight[weight]
|
|
140
|
+
fontFamily: theme.typography.fontFamily.sans.name,
|
|
141
|
+
fontWeight: theme.typography.fontWeight[weight]
|
|
149
142
|
}, responsiveStyles];
|
|
150
143
|
return styles;
|
|
151
144
|
}
|
package/package.json
CHANGED
|
@@ -1,18 +1,25 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-web/text",
|
|
3
|
-
"version": "1.1.
|
|
4
|
-
"
|
|
3
|
+
"version": "1.1.2",
|
|
4
|
+
"homepage": "https://github.com/brighte-labs/spark-web#readme",
|
|
5
|
+
"repository": {
|
|
6
|
+
"type": "git",
|
|
7
|
+
"url": "https://github.com/brighte-labs/spark-web.git",
|
|
8
|
+
"directory": "packages/text"
|
|
9
|
+
},
|
|
5
10
|
"main": "dist/spark-web-text.cjs.js",
|
|
6
11
|
"module": "dist/spark-web-text.esm.js",
|
|
7
12
|
"files": [
|
|
8
|
-
"
|
|
13
|
+
"CHANGELOG.md",
|
|
14
|
+
"dist",
|
|
15
|
+
"README.md"
|
|
9
16
|
],
|
|
10
17
|
"dependencies": {
|
|
11
|
-
"@babel/runtime": "^7.
|
|
18
|
+
"@babel/runtime": "^7.19.0",
|
|
12
19
|
"@emotion/css": "^11.9.0",
|
|
13
|
-
"@spark-web/box": "^1.0
|
|
14
|
-
"@spark-web/theme": "^3.0
|
|
15
|
-
"@spark-web/utils": "^1.2.
|
|
20
|
+
"@spark-web/box": "^1.1.0",
|
|
21
|
+
"@spark-web/theme": "^3.1.0",
|
|
22
|
+
"@spark-web/utils": "^1.2.3"
|
|
16
23
|
},
|
|
17
24
|
"devDependencies": {
|
|
18
25
|
"@types/react": "^17.0.12",
|
|
@@ -22,6 +29,6 @@
|
|
|
22
29
|
"react": ">=17.0.2"
|
|
23
30
|
},
|
|
24
31
|
"engines": {
|
|
25
|
-
"node": ">=
|
|
32
|
+
"node": ">=14"
|
|
26
33
|
}
|
|
27
34
|
}
|