@spark-web/text 1.0.2 → 1.0.5

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.
Files changed (19) hide show
  1. package/README.md +32 -13
  2. package/dist/declarations/src/Text.d.ts +4 -1
  3. package/dist/declarations/src/context.d.ts +6 -6
  4. package/dist/declarations/src/defaultTextProps.d.ts +3 -3
  5. package/dist/declarations/src/useText.d.ts +1 -1
  6. package/dist/spark-web-text.cjs.dev.js +4 -1
  7. package/dist/spark-web-text.cjs.prod.js +4 -1
  8. package/dist/spark-web-text.esm.js +4 -1
  9. package/package.json +15 -9
  10. package/CHANGELOG.md +0 -48
  11. package/src/Strong.tsx +0 -13
  12. package/src/Text.stories.tsx +0 -20
  13. package/src/Text.tsx +0 -113
  14. package/src/context.ts +0 -13
  15. package/src/defaultTextProps.tsx +0 -48
  16. package/src/index.ts +0 -17
  17. package/src/useForegroundTone.ts +0 -36
  18. package/src/useOverflowStrategy.ts +0 -28
  19. package/src/useText.ts +0 -56
package/README.md CHANGED
@@ -11,7 +11,7 @@ Constrained, purposeful text styles as a component.
11
11
  <Columns gap="large" collapseBelow="wide">
12
12
  <Stack gap="medium">
13
13
  <Text size="large">large regular</Text>
14
- <Text size="large" weight="medium">
14
+ <Text size="large" weight="semibold">
15
15
  large medium
16
16
  </Text>
17
17
  <Text size="large" weight="strong">
@@ -20,7 +20,7 @@ Constrained, purposeful text styles as a component.
20
20
  </Stack>
21
21
  <Stack gap="medium">
22
22
  <Text size="standard">standard regular</Text>
23
- <Text size="standard" weight="medium">
23
+ <Text size="standard" weight="semibold">
24
24
  standard medium
25
25
  </Text>
26
26
  <Text size="standard" weight="strong">
@@ -29,7 +29,7 @@ Constrained, purposeful text styles as a component.
29
29
  </Stack>
30
30
  <Stack gap="small">
31
31
  <Text size="small">small regular</Text>
32
- <Text size="small" weight="medium">
32
+ <Text size="small" weight="semibold">
33
33
  small medium
34
34
  </Text>
35
35
  <Text size="small" weight="strong">
@@ -38,7 +38,7 @@ Constrained, purposeful text styles as a component.
38
38
  </Stack>
39
39
  <Stack gap="small">
40
40
  <Text size="xsmall">xsmall regular</Text>
41
- <Text size="xsmall" weight="medium">
41
+ <Text size="xsmall" weight="semibold">
42
42
  xsmall medium
43
43
  </Text>
44
44
  <Text size="xsmall" weight="strong">
@@ -108,6 +108,17 @@ the foundation tones, “muted” provides a way to de-emphasise text.
108
108
  </Inline>
109
109
  ```
110
110
 
111
+ ### Weight
112
+
113
+ Text is available in two weight: `regular` and `semibold`.
114
+
115
+ ```jsx live
116
+ <Inline gap="small">
117
+ <Text weight="regular">Regular</Text>
118
+ <Text weight="semibold">Semibold</Text>
119
+ </Inline>
120
+ ```
121
+
111
122
  ### Contrast
112
123
 
113
124
  To ensure text has sufficient contrast, when on a dark background the foreground
@@ -126,12 +137,20 @@ tones “neutral” and “muted” will be inverted.
126
137
 
127
138
  ## Props
128
139
 
129
- | Prop | Type | Default | Description |
130
- | ----------------- | ------------------------------------- | ------- | ---------------------------------------------------------------------------- |
131
- | children | React.ReactNode | | The text content to be rendered. |
132
- | id? | string | | Sets a unique idenitifier for the component. |
133
- | tabularNumbers? | boolean | | When enabled, numbers will be the same width. Similar to a monospaced font. |
134
- | transform? | CSSProperties['textTransform'] | | Transforms the text casing. |
135
- | align? | 'left' \| 'center' \| 'right' | | Sets the horizontal alignment of the component. Used if displaying as block. |
136
- | inline? | boolean | | Indicates if text should be inline or not. |
137
- | overflowStrategy? | 'nowrap' \| 'truncate' \| 'breakword' | | Sets how text behaves with regards to overflow. Used if displaying as block. |
140
+ | Prop | Type | Default | Description |
141
+ | ----------------- | --------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------- |
142
+ | align? | 'left' \| 'center' \| 'right' | | Sets the horizontal alignment of the component. Used if displaying as block. |
143
+ | children | React.ReactNode | | The text content to be rendered. |
144
+ | data? | [DataAttributeMap][data-attribute-map] | | Sets data attributes on the component. |
145
+ | id? | string | | Sets a unique idenitifier for the component. |
146
+ | inline? | boolean | | Indicates if text should be inline or not. |
147
+ | overflowStrategy? | 'nowrap' \| 'truncate' \| 'breakword' | | Sets how text behaves with regards to overflow. Used if displaying as block. |
148
+ | tabularNumbers? | boolean | | When enabled, numbers will be the same width. Similar to a monospaced font. |
149
+ | tone? | keyof [BrighteTheme][brighte-theme]['color']['foreground'] | | The tone of the text. |
150
+ | transform? | CSSProperties['textTransform'] | | Transforms the text casing. |
151
+ | weight? | keyof [BrighteTheme][brighte-theme]['typography']['fontweight'] | | The weight of the text. |
152
+
153
+ [brighte-theme]:
154
+ https://github.com/brighte-labs/spark-web/blob/e503bea4f7668d187ec7a78f99c5ed374417588b/packages/theme/src/makeTheme.ts#L158
155
+ [data-attribute-map]:
156
+ https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
package/dist/declarations/src/Text.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import type { BoxProps } from '@spark-web/box';
2
+ import type { DataAttributeMap } from '@spark-web/utils/internal';
2
3
  import type { CSSProperties, ReactNode } from 'react';
3
4
  import type { TextOverflowStrategy } from './useOverflowStrategy';
4
5
  import type { UseTextProps } from './useText';
@@ -18,6 +19,8 @@ declare type BlockProps = {
18
19
  export declare type TextProps = Partial<UseTextProps> & {
19
20
  /** The text content. */
20
21
  children?: ReactNode;
22
+ /** Sets data attributes on the component. */
23
+ data?: DataAttributeMap;
21
24
  /** An identifier which must be unique in the whole document. */
22
25
  id?: BoxProps['id'];
23
26
  /** When enabled, numbers will be the same width. Similar to a monospaced font. */
@@ -27,6 +30,6 @@ export declare type TextProps = Partial<UseTextProps> & {
27
30
  } & (InlineProps | BlockProps);
28
31
  export declare const Text: <Comp extends import("react").ElementType<any> = "div">(props: {
29
32
  as?: Comp | undefined;
30
- ref?: import("react").Ref<Comp extends "symbol" | "clipPath" | "filter" | "mask" | "marker" | "text" | "circle" | "svg" | "animate" | "animateMotion" | "animateTransform" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap | "set" ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "clipPath" | "filter" | "mask" | "marker" | "text" | "circle" | "svg" | "animate" | "animateMotion" | "animateTransform" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | "set">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
33
+ ref?: import("react").Ref<Comp extends "symbol" | "text" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap | "set" ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "text" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | "set">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
31
34
  } & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & TextProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
32
35
  export {};
package/dist/declarations/src/context.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  /// <reference types="react" />
2
2
  export declare const TextContext: import("react").Context<{
3
- size: "large" | "small" | "xsmall" | "standard";
4
- tone: "disabled" | "link" | "placeholder" | "muted" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "caution" | "critical" | "info" | "positive" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
5
- weight: "medium" | "strong" | "regular";
3
+ size: "xsmall" | "small" | "standard" | "large";
4
+ tone: "caution" | "critical" | "info" | "positive" | "muted" | "disabled" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "link" | "placeholder" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
5
+ weight: "regular" | "semibold";
6
6
  } | undefined>;
7
7
  export declare function useTextContext(): {
8
- size: "large" | "small" | "xsmall" | "standard";
9
- tone: "disabled" | "link" | "placeholder" | "muted" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "caution" | "critical" | "info" | "positive" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
10
- weight: "medium" | "strong" | "regular";
8
+ size: "xsmall" | "small" | "standard" | "large";
9
+ tone: "caution" | "critical" | "info" | "positive" | "muted" | "disabled" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "link" | "placeholder" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
10
+ weight: "regular" | "semibold";
11
11
  } | undefined;
package/dist/declarations/src/defaultTextProps.d.ts CHANGED
@@ -9,8 +9,8 @@ export declare function DefaultTextPropsProvider({ children, size, tone, weight,
9
9
  children: ReactNode;
10
10
  }): JSX.Element;
11
11
  export declare const useDefaultTextProps: ({ size: sizeProp, tone: toneProp, weight: weightProp, }: DefaultTextProps) => {
12
- size: "large" | "small" | "xsmall" | "standard";
13
- tone: "disabled" | "link" | "placeholder" | "muted" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "caution" | "critical" | "info" | "positive" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
14
- weight: "medium" | "strong" | "regular";
12
+ size: "xsmall" | "small" | "standard" | "large";
13
+ tone: "caution" | "critical" | "info" | "positive" | "muted" | "disabled" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "link" | "placeholder" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
14
+ weight: "regular" | "semibold";
15
15
  };
16
16
  export {};
package/dist/declarations/src/useText.d.ts CHANGED
@@ -10,7 +10,7 @@ export declare type UseTextProps = {
10
10
  /** The weight of the text. */
11
11
  weight: keyof BrighteTheme['typography']['fontWeight'];
12
12
  };
13
- export declare function useText({ baseline, size, tone, weight }: UseTextProps): (import("@emotion/css").CSSObject | undefined)[];
13
+ export declare function useText({ baseline, size, tone, weight }: UseTextProps): (import("@emotion/serialize").CSSObject | undefined)[];
14
14
  export declare function createTextStyles({ fontSize, lineHeight, trims }: BrighteTextDefinition, { includeTrims }?: {
15
15
  includeTrims?: boolean | undefined;
16
16
  }): {
package/dist/spark-web-text.cjs.dev.js CHANGED
@@ -63,7 +63,7 @@ var Strong = function Strong(_ref) {
63
63
  typography = _useTheme.typography;
64
64
 
65
65
  var styles = {
66
- fontWeight: typography.fontWeight.strong
66
+ fontWeight: typography.fontWeight.semibold
67
67
  };
68
68
  return /*#__PURE__*/jsxRuntime.jsx("strong", {
69
69
  className: css.css(styles),
@@ -182,6 +182,7 @@ function createTextStyles(_ref2) {
182
182
  var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
183
183
  var as = _ref.as,
184
184
  children = _ref.children,
185
+ data = _ref.data,
185
186
  id = _ref.id,
186
187
  align = _ref.align,
187
188
  baselineProp = _ref.baseline,
@@ -221,6 +222,7 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
221
222
  if (inline) {
222
223
  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
223
224
  as: as !== null && as !== void 0 ? as : 'span',
225
+ data: data,
224
226
  ref: forwardedRef,
225
227
  id: id,
226
228
  className: css.css(styles),
@@ -244,6 +246,7 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
244
246
  value: textContextValue,
245
247
  children: /*#__PURE__*/jsxRuntime.jsx(box.Box, {
246
248
  as: as,
249
+ data: data,
247
250
  ref: forwardedRef,
248
251
  id: id,
249
252
  className: css.css(styles),
package/dist/spark-web-text.cjs.prod.js CHANGED
@@ -63,7 +63,7 @@ var Strong = function Strong(_ref) {
63
63
  typography = _useTheme.typography;
64
64
 
65
65
  var styles = {
66
- fontWeight: typography.fontWeight.strong
66
+ fontWeight: typography.fontWeight.semibold
67
67
  };
68
68
  return /*#__PURE__*/jsxRuntime.jsx("strong", {
69
69
  className: css.css(styles),
@@ -182,6 +182,7 @@ function createTextStyles(_ref2) {
182
182
  var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
183
183
  var as = _ref.as,
184
184
  children = _ref.children,
185
+ data = _ref.data,
185
186
  id = _ref.id,
186
187
  align = _ref.align,
187
188
  baselineProp = _ref.baseline,
@@ -221,6 +222,7 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
221
222
  if (inline) {
222
223
  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
223
224
  as: as !== null && as !== void 0 ? as : 'span',
225
+ data: data,
224
226
  ref: forwardedRef,
225
227
  id: id,
226
228
  className: css.css(styles),
@@ -244,6 +246,7 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
244
246
  value: textContextValue,
245
247
  children: /*#__PURE__*/jsxRuntime.jsx(box.Box, {
246
248
  as: as,
249
+ data: data,
247
250
  ref: forwardedRef,
248
251
  id: id,
249
252
  className: css.css(styles),
package/dist/spark-web-text.esm.js CHANGED
@@ -59,7 +59,7 @@ var Strong = function Strong(_ref) {
59
59
  typography = _useTheme.typography;
60
60
 
61
61
  var styles = {
62
- fontWeight: typography.fontWeight.strong
62
+ fontWeight: typography.fontWeight.semibold
63
63
  };
64
64
  return /*#__PURE__*/jsx("strong", {
65
65
  className: css(styles),
@@ -178,6 +178,7 @@ function createTextStyles(_ref2) {
178
178
  var Text = forwardRefWithAs(function (_ref, forwardedRef) {
179
179
  var as = _ref.as,
180
180
  children = _ref.children,
181
+ data = _ref.data,
181
182
  id = _ref.id,
182
183
  align = _ref.align,
183
184
  baselineProp = _ref.baseline,
@@ -217,6 +218,7 @@ var Text = forwardRefWithAs(function (_ref, forwardedRef) {
217
218
  if (inline) {
218
219
  return /*#__PURE__*/jsx(Box, {
219
220
  as: as !== null && as !== void 0 ? as : 'span',
221
+ data: data,
220
222
  ref: forwardedRef,
221
223
  id: id,
222
224
  className: css(styles),
@@ -240,6 +242,7 @@ var Text = forwardRefWithAs(function (_ref, forwardedRef) {
240
242
  value: textContextValue,
241
243
  children: /*#__PURE__*/jsx(Box, {
242
244
  as: as,
245
+ data: data,
243
246
  ref: forwardedRef,
244
247
  id: id,
245
248
  className: css(styles),
package/package.json CHANGED
@@ -1,20 +1,26 @@
1
1
  {
2
2
  "name": "@spark-web/text",
3
+ "version": "1.0.5",
3
4
  "license": "MIT",
4
- "version": "1.0.2",
5
5
  "main": "dist/spark-web-text.cjs.js",
6
6
  "module": "dist/spark-web-text.esm.js",
7
- "devDependencies": {
8
- "@types/react": "^17.0.12"
9
- },
7
+ "files": [
8
+ "dist"
9
+ ],
10
10
  "dependencies": {
11
- "@babel/runtime": "^7.14.6",
12
- "@emotion/css": "^11.7.1",
13
- "@spark-web/box": "^1.0.2",
14
- "@spark-web/theme": "^2.0.1",
15
- "@spark-web/utils": "^1.0.2",
11
+ "@babel/runtime": "^7.18.0",
12
+ "@emotion/css": "^11.9.0",
13
+ "@spark-web/box": "^1.0.5",
14
+ "@spark-web/theme": "^3.0.1",
15
+ "@spark-web/utils": "^1.1.3"
16
+ },
17
+ "devDependencies": {
18
+ "@types/react": "^17.0.12",
16
19
  "react": "^17.0.2"
17
20
  },
21
+ "peerDependencies": {
22
+ "react": ">=17.0.2"
23
+ },
18
24
  "engines": {
19
25
  "node": ">= 14.13"
20
26
  }
package/CHANGELOG.md DELETED
@@ -1,48 +0,0 @@
1
- # @spark-web/text
2
-
3
- ## 1.0.2
4
-
5
- ### Patch Changes
6
-
7
- - [#40](https://github.com/brighte-labs/spark-web/pull/40)
8
- [`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)
9
- Thanks [@lukebennett88](https://github.com/lukebennett88)! - Add
10
- @babel/transform-runtime
11
-
12
- - Updated dependencies
13
- [[`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)]:
14
- - @spark-web/box@1.0.2
15
- - @spark-web/theme@2.0.1
16
- - @spark-web/utils@1.0.2
17
-
18
- ## 1.0.1
19
-
20
- ### Patch Changes
21
-
22
- - [#36](https://github.com/brighte-labs/spark-web/pull/36)
23
- [`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)
24
- Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update Babel
25
- config
26
-
27
- - Updated dependencies
28
- [[`aebff30`](https://github.com/brighte-labs/spark-web/commit/aebff30c86cb0a9db22b545c46159ce0d1c14afb),
29
- [`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)]:
30
- - @spark-web/theme@2.0.0
31
- - @spark-web/box@1.0.1
32
- - @spark-web/utils@1.0.1
33
-
34
- ## 1.0.0
35
-
36
- ### Major Changes
37
-
38
- - [#27](https://github.com/brighte-labs/spark-web/pull/27)
39
- [`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)
40
- Thanks [@JedWatson](https://github.com/JedWatson)! - Initial Version
41
-
42
- ### Patch Changes
43
-
44
- - Updated dependencies
45
- [[`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)]:
46
- - @spark-web/box@1.0.0
47
- - @spark-web/theme@1.0.0
48
- - @spark-web/utils@1.0.0
package/src/Strong.tsx DELETED
@@ -1,13 +0,0 @@
1
- import { css } from '@emotion/css';
2
- import { useTheme } from '@spark-web/theme';
3
- import type { ReactNode } from 'react';
4
-
5
- export type StrongProps = {
6
- children: ReactNode;
7
- };
8
-
9
- export const Strong = ({ children }: StrongProps) => {
10
- const { typography } = useTheme();
11
- const styles = { fontWeight: typography.fontWeight.strong };
12
- return <strong className={css(styles)}>{children}</strong>;
13
- };
package/src/Text.stories.tsx DELETED
@@ -1,20 +0,0 @@
1
- import type { ComponentMeta, ComponentStory } from '@storybook/react';
2
-
3
- import type { TextProps } from './Text';
4
- import { Text } from './Text';
5
-
6
- export default {
7
- title: 'Typography / Text',
8
- component: Text,
9
- } as ComponentMeta<typeof Text>;
10
-
11
- const LinkStory: ComponentStory<typeof Text> = (args: TextProps) => (
12
- <Text {...args} />
13
- );
14
-
15
- export const Default = LinkStory.bind({});
16
-
17
- Default.args = {
18
- children:
19
- 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rhoncus ex purus, nec rutrum lorem placerat vestibulum. Ut sit amet libero non tellus aliquam pretium nec ac dui. Vivamus erat nibh, placerat vitae nisi eu, aliquet auctor dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;',
20
- };
package/src/Text.tsx DELETED
@@ -1,113 +0,0 @@
1
- import { css } from '@emotion/css';
2
- import type { BoxProps } from '@spark-web/box';
3
- import { Box } from '@spark-web/box';
4
- import { forwardRefWithAs } from '@spark-web/utils/ts';
5
- import type { CSSProperties, ReactNode } from 'react';
6
- import { useMemo } from 'react';
7
-
8
- import { TextContext, useTextContext } from './context';
9
- import { useDefaultTextProps } from './defaultTextProps';
10
- import type { TextOverflowStrategy } from './useOverflowStrategy';
11
- import { useOverflowStrategy } from './useOverflowStrategy';
12
- import type { UseTextProps } from './useText';
13
- import { useText } from './useText';
14
-
15
- type InlineProps = {
16
- align?: never;
17
- /** Display as an inline element. */
18
- inline?: boolean;
19
- overflowStrategy?: never;
20
- };
21
- type BlockProps = {
22
- /** The horizontal alignment. */
23
- align?: 'left' | 'center' | 'right';
24
- inline?: never;
25
- /** Manage how text behaves with regard to overflow. */
26
- overflowStrategy?: TextOverflowStrategy;
27
- };
28
-
29
- export type TextProps = Partial<UseTextProps> & {
30
- /** The text content. */
31
- children?: ReactNode;
32
- /** An identifier which must be unique in the whole document. */
33
- id?: BoxProps['id'];
34
- /** When enabled, numbers will be the same width. Similar to a monospaced font. */
35
- tabularNumbers?: boolean;
36
- /** Transform the text casing. */
37
- transform?: CSSProperties['textTransform'];
38
- } & (InlineProps | BlockProps);
39
-
40
- export const Text = forwardRefWithAs<'div', TextProps>(
41
- (
42
- {
43
- // box props
44
- as,
45
- children,
46
- id,
47
-
48
- //text props
49
- align,
50
- baseline: baselineProp,
51
- inline,
52
- overflowStrategy,
53
- size: sizeProp,
54
- tabularNumbers,
55
- tone: toneProp,
56
- transform,
57
- weight: weightProp,
58
- },
59
- forwardedRef
60
- ) => {
61
- const overflowStyles = useOverflowStrategy(overflowStrategy);
62
- const textContext = useTextContext();
63
- const { size, tone, weight } = useDefaultTextProps({
64
- size: sizeProp ?? textContext?.size,
65
- tone: toneProp ?? textContext?.tone,
66
- weight: weightProp ?? textContext?.weight,
67
- });
68
- const baseline = !inline && baselineProp;
69
- const textStyles = useText({ baseline, size, tone, weight });
70
- const styles = [
71
- textStyles,
72
- {
73
- display: inline ? 'inline' : 'block',
74
- fontVariantNumeric: tabularNumbers ? 'tabular-nums' : undefined,
75
- textAlign: align,
76
- textTransform: transform,
77
- },
78
- ];
79
-
80
- // early exit for inline variant
81
- if (inline) {
82
- return (
83
- <Box
84
- as={as ?? 'span'}
85
- ref={forwardedRef}
86
- id={id}
87
- className={css(styles)}
88
- >
89
- {children}
90
- </Box>
91
- );
92
- }
93
-
94
- // prepare block variant
95
- const content = overflowStrategy ? (
96
- <span className={css(overflowStyles)}>{children}</span>
97
- ) : (
98
- children
99
- );
100
- const textContextValue = useMemo(
101
- () => ({ size, tone, weight }),
102
- [size, tone, weight]
103
- );
104
-
105
- return (
106
- <TextContext.Provider value={textContextValue}>
107
- <Box as={as} ref={forwardedRef} id={id} className={css(styles)}>
108
- {content}
109
- </Box>
110
- </TextContext.Provider>
111
- );
112
- }
113
- );
package/src/context.ts DELETED
@@ -1,13 +0,0 @@
1
- import { createContext, useContext } from 'react';
2
-
3
- import type { useDefaultTextProps } from './defaultTextProps';
4
-
5
- type TextContextType = ReturnType<typeof useDefaultTextProps>;
6
-
7
- export const TextContext = createContext<TextContextType | undefined>(
8
- undefined
9
- );
10
-
11
- export function useTextContext() {
12
- return useContext(TextContext);
13
- }
package/src/defaultTextProps.tsx DELETED
@@ -1,48 +0,0 @@
1
- import type { ReactNode } from 'react';
2
- import { createContext, useContext, useMemo } from 'react';
3
-
4
- import type { UseTextProps } from './useText';
5
-
6
- type DefaultTextProps = {
7
- size?: NonNullable<UseTextProps['size']>;
8
- tone?: NonNullable<UseTextProps['tone']>;
9
- weight?: NonNullable<UseTextProps['weight']>;
10
- };
11
-
12
- const DefaultTextPropsContext = createContext<DefaultTextProps>({
13
- size: undefined,
14
- tone: undefined,
15
- weight: undefined,
16
- });
17
-
18
- export function DefaultTextPropsProvider({
19
- children,
20
- size,
21
- tone,
22
- weight,
23
- }: DefaultTextProps & { children: ReactNode }) {
24
- const defaultTextProps = useMemo(
25
- () => ({ size, tone, weight }),
26
- [size, tone, weight]
27
- );
28
-
29
- return (
30
- <DefaultTextPropsContext.Provider value={defaultTextProps}>
31
- {children}
32
- </DefaultTextPropsContext.Provider>
33
- );
34
- }
35
-
36
- export const useDefaultTextProps = ({
37
- size: sizeProp,
38
- tone: toneProp,
39
- weight: weightProp,
40
- }: DefaultTextProps) => {
41
- const { size, tone, weight } = useContext(DefaultTextPropsContext);
42
-
43
- return {
44
- size: sizeProp ?? size ?? 'standard',
45
- tone: toneProp ?? tone ?? 'neutral',
46
- weight: weightProp ?? weight ?? 'regular',
47
- };
48
- };
package/src/index.ts DELETED
@@ -1,17 +0,0 @@
1
- export { useTextContext } from './context';
2
- export {
3
- DefaultTextPropsProvider,
4
- useDefaultTextProps,
5
- } from './defaultTextProps';
6
- export { Strong } from './Strong';
7
- export { Text } from './Text';
8
- export { useForegroundTone } from './useForegroundTone';
9
- export { useOverflowStrategy } from './useOverflowStrategy';
10
- export { createTextStyles, useText } from './useText';
11
-
12
- // types
13
-
14
- export type { StrongProps } from './Strong';
15
- export type { TextProps } from './Text';
16
- export type { ForegroundTone } from './useForegroundTone';
17
- export type { TextOverflowStrategy } from './useOverflowStrategy';
package/src/useForegroundTone.ts DELETED
@@ -1,36 +0,0 @@
1
- import { useBackgroundLightness } from '@spark-web/box';
2
- import type { BrighteTheme } from '@spark-web/theme';
3
- import { useTheme } from '@spark-web/theme';
4
-
5
- export type ForegroundTone = keyof Omit<
6
- BrighteTheme['color']['foreground'],
7
- 'neutralInverted' | 'mutedInverted'
8
- >;
9
-
10
- const invertableTones = {
11
- neutral: {
12
- dark: 'neutralInverted',
13
- light: 'neutral',
14
- },
15
- muted: {
16
- dark: 'mutedInverted',
17
- light: 'muted',
18
- },
19
- link: {
20
- dark: 'neutralInverted',
21
- light: 'link',
22
- },
23
- } as const;
24
-
25
- export function useForegroundTone(tone: ForegroundTone) {
26
- const theme = useTheme();
27
- const backgroundLightness = useBackgroundLightness();
28
-
29
- if (tone in invertableTones) {
30
- return theme.color.foreground[
31
- invertableTones[tone as keyof typeof invertableTones][backgroundLightness]
32
- ];
33
- }
34
-
35
- return theme.color.foreground[tone];
36
- }
package/src/useOverflowStrategy.ts DELETED
@@ -1,28 +0,0 @@
1
- const strategyMap = {
2
- truncate: {
3
- display: 'block',
4
- overflow: 'hidden',
5
- textOverflow: 'ellipsis',
6
- whiteSpace: 'nowrap',
7
- },
8
- nowrap: {
9
- whiteSpace: 'nowrap',
10
- },
11
- // https://css-tricks.com/better-line-breaks-for-long-urls/
12
- breakword: {
13
- display: 'block',
14
- overflowWrap: 'break-word',
15
- wordBreak: 'break-word',
16
- wordWrap: 'break-word',
17
- },
18
- } as const;
19
-
20
- export type TextOverflowStrategy = keyof typeof strategyMap;
21
-
22
- export function useOverflowStrategy(strategy?: TextOverflowStrategy) {
23
- if (!strategy) {
24
- return null;
25
- }
26
-
27
- return strategyMap[strategy];
28
- }
package/src/useText.ts DELETED
@@ -1,56 +0,0 @@
1
- import type { BrighteTextDefinition, BrighteTheme } from '@spark-web/theme';
2
- import { useTheme } from '@spark-web/theme';
3
-
4
- import type { ForegroundTone } from './useForegroundTone';
5
- import { useForegroundTone } from './useForegroundTone';
6
-
7
- export type UseTextProps = {
8
- /** Apply leading-trim styles. */
9
- baseline?: boolean;
10
- /** The size of the text. */
11
- size: keyof BrighteTheme['typography']['text'];
12
- /** The tone of the text. */
13
- tone: ForegroundTone;
14
- /** The weight of the text. */
15
- weight: keyof BrighteTheme['typography']['fontWeight'];
16
- };
17
-
18
- export function useText({ baseline = true, size, tone, weight }: UseTextProps) {
19
- const { typography, utils } = useTheme();
20
- const color = useForegroundTone(tone);
21
- const { mobile, tablet } = typography.text[size];
22
- const responsiveStyles = utils.responsiveStyles({
23
- mobile: createTextStyles(mobile, { includeTrims: baseline }),
24
- tablet: createTextStyles(tablet, { includeTrims: baseline }),
25
- });
26
-
27
- const styles = [
28
- {
29
- color,
30
- fontFamily: typography.fontFamily.sans.name,
31
- fontWeight: typography.fontWeight[weight],
32
- },
33
- responsiveStyles,
34
- ];
35
-
36
- return styles;
37
- }
38
-
39
- export function createTextStyles(
40
- { fontSize, lineHeight, trims }: BrighteTextDefinition,
41
- { includeTrims = true } = {}
42
- ) {
43
- const pseudo = { content: '" "', display: 'table' };
44
- const leadingTrim = includeTrims
45
- ? {
46
- '::before': { ...pseudo, marginBottom: trims.capHeightTrim },
47
- '::after': { ...pseudo, marginTop: trims.baselineTrim },
48
- }
49
- : null;
50
-
51
- return {
52
- fontSize,
53
- lineHeight,
54
- ...leadingTrim,
55
- };
56
- }