@spark-web/text - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

dist/declarations/src/context.d.ts

@@ -5,3 +5,3 @@ /// <reference types="react" />
     tone: "disabled" | "link" | "placeholder" | "muted" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "caution" | "critical" | "info" | "positive" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
-    weight: "medium" | "strong" | "regular";
+    weight: "regular" | "semibold";
 } | undefined>;
@@ -11,3 +11,3 @@ export declare function useTextContext(): {
     tone: "disabled" | "link" | "placeholder" | "muted" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "caution" | "critical" | "info" | "positive" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
-    weight: "medium" | "strong" | "regular";
+    weight: "regular" | "semibold";
 } | undefined;

dist/declarations/src/defaultTextProps.d.ts

@@ -14,4 +14,4 @@ import type { ReactNode } from 'react';
     tone: "disabled" | "link" | "placeholder" | "muted" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "caution" | "critical" | "info" | "positive" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
-    weight: "medium" | "strong" | "regular";
+    weight: "regular" | "semibold";
 };
 export {};

dist/declarations/src/Text.d.ts

 import type { BoxProps } from '@spark-web/box';
+import type { DataAttributeMap } from '@spark-web/utils/internal';
 import type { CSSProperties, ReactNode } from 'react';
@@ -21,2 +22,4 @@ import type { TextOverflowStrategy } from './useOverflowStrategy';
     children?: ReactNode;
+    /** Sets data attributes on the component. */
+    data?: DataAttributeMap;
     /** An identifier which must be unique in the whole document. */
@@ -23,0 +26,0 @@ id?: BoxProps['id'];

dist/spark-web-text.cjs.dev.js

@@ -66,3 +66,3 @@ 'use strict';
   var styles = {
-    fontWeight: typography.fontWeight.strong
+    fontWeight: typography.fontWeight.semibold
   };
@@ -186,2 +186,3 @@ return /*#__PURE__*/jsxRuntime.jsx("strong", {
       children = _ref.children,
+      data = _ref.data,
       id = _ref.id,
@@ -226,2 +227,3 @@ align = _ref.align,
       as: as !== null && as !== void 0 ? as : 'span',
+      data: data,
       ref: forwardedRef,
@@ -250,2 +252,3 @@ id: id,
       as: as,
+      data: data,
       ref: forwardedRef,
@@ -252,0 +255,0 @@ id: id,

dist/spark-web-text.cjs.prod.js

@@ -66,3 +66,3 @@ 'use strict';
   var styles = {
-    fontWeight: typography.fontWeight.strong
+    fontWeight: typography.fontWeight.semibold
   };
@@ -186,2 +186,3 @@ return /*#__PURE__*/jsxRuntime.jsx("strong", {
       children = _ref.children,
+      data = _ref.data,
       id = _ref.id,
@@ -226,2 +227,3 @@ align = _ref.align,
       as: as !== null && as !== void 0 ? as : 'span',
+      data: data,
       ref: forwardedRef,
@@ -250,2 +252,3 @@ id: id,
       as: as,
+      data: data,
       ref: forwardedRef,
@@ -252,0 +255,0 @@ id: id,

dist/spark-web-text.esm.js

@@ -62,3 +62,3 @@ import { useContext, createContext, useMemo } from 'react';
   var styles = {
-    fontWeight: typography.fontWeight.strong
+    fontWeight: typography.fontWeight.semibold
   };
@@ -182,2 +182,3 @@ return /*#__PURE__*/jsx("strong", {
       children = _ref.children,
+      data = _ref.data,
       id = _ref.id,
@@ -222,2 +223,3 @@ align = _ref.align,
       as: as !== null && as !== void 0 ? as : 'span',
+      data: data,
       ref: forwardedRef,
@@ -246,2 +248,3 @@ id: id,
       as: as,
+      data: data,
       ref: forwardedRef,
@@ -248,0 +251,0 @@ id: id,

package.json

 {
   "name": "@spark-web/text",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "license": "MIT",
   "main": "dist/spark-web-text.cjs.js",
   "module": "dist/spark-web-text.esm.js",
+  "files": [
+    "dist"
+  ],
   "dependencies": {
     "@babel/runtime": "^7.14.6",
     "@emotion/css": "^11.7.1",
-    "@spark-web/box": "^1.0.3",
-    "@spark-web/theme": "^2.0.2",
-    "@spark-web/utils": "^1.1.1"
+    "@spark-web/box": "^1.0.4",
+    "@spark-web/theme": "^3.0.0",
+    "@spark-web/utils": "^1.1.2"
   },
@@ -14,0 +17,0 @@ "devDependencies": {

README.md

@@ -14,3 +14,3 @@ ---
     <Text size="large">large regular</Text>
-    <Text size="large" weight="medium">
+    <Text size="large" weight="semibold">
       large medium
@@ -24,3 +24,3 @@ </Text>
     <Text size="standard">standard regular</Text>
-    <Text size="standard" weight="medium">
+    <Text size="standard" weight="semibold">
       standard medium
@@ -34,3 +34,3 @@ </Text>
     <Text size="small">small regular</Text>
-    <Text size="small" weight="medium">
+    <Text size="small" weight="semibold">
       small medium
@@ -44,3 +44,3 @@ </Text>
     <Text size="xsmall">xsmall regular</Text>
-    <Text size="xsmall" weight="medium">
+    <Text size="xsmall" weight="semibold">
       xsmall medium
@@ -115,2 +115,13 @@ </Text>
 
+### Weight
+
+Text is available in two weight: `regular` and `semibold`.
+
+```jsx live
+<Inline gap="small">
+  <Text weight="regular">Regular</Text>
+  <Text weight="semibold">Semibold</Text>
+</Inline>
+```
+
 ### Contrast
@@ -134,10 +145,18 @@
 
-| Prop              | Type                                  | Default | Description                                                                  |
-| ----------------- | ------------------------------------- | ------- | ---------------------------------------------------------------------------- |
-| children          | React.ReactNode                       |         | The text content to be rendered.                                             |
-| id?               | string                                |         | Sets a unique idenitifier for the component.                                 |
-| tabularNumbers?   | boolean                               |         | When enabled, numbers will be the same width. Similar to a monospaced font.  |
-| transform?        | CSSProperties['textTransform']        |         | Transforms the text casing.                                                  |
-| align?            | 'left' \| 'center' \| 'right'         |         | Sets the horizontal alignment of the component. Used if displaying as block. |
-| inline?           | boolean                               |         | Indicates if text should be inline or not.                                   |
-| overflowStrategy? | 'nowrap' \| 'truncate' \| 'breakword' |         | Sets how text behaves with regards to overflow. Used if displaying as block. |
+| Prop              | Type                                                            | Default | Description                                                                  |
+| ----------------- | --------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------- |
+| align?            | 'left' \| 'center' \| 'right'                                   |         | Sets the horizontal alignment of the component. Used if displaying as block. |
+| children          | React.ReactNode                                                 |         | The text content to be rendered.                                             |
+| data?             | [DataAttributeMap][data-attribute-map]                          |         | Sets data attributes on the component.                                       |
+| id?               | string                                                          |         | Sets a unique idenitifier for the component.                                 |
+| inline?           | boolean                                                         |         | Indicates if text should be inline or not.                                   |
+| overflowStrategy? | 'nowrap' \| 'truncate' \| 'breakword'                           |         | Sets how text behaves with regards to overflow. Used if displaying as block. |
+| tabularNumbers?   | boolean                                                         |         | When enabled, numbers will be the same width. Similar to a monospaced font.  |
+| tone?             | keyof [BrighteTheme][brighte-theme]['color']['foreground']      |         | The tone of the text.                                                        |
+| transform?        | CSSProperties['textTransform']                                  |         | Transforms the text casing.                                                  |
+| weight?           | keyof [BrighteTheme][brighte-theme]['typography']['fontweight'] |         | The weight of the text.                                                      |
+
+[brighte-theme]:
+  https://github.com/brighte-labs/spark-web/blob/e503bea4f7668d187ec7a78f99c5ed374417588b/packages/theme/src/makeTheme.ts#L158
+[data-attribute-map]:
+  https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1

No alert changes

Improved metrics

Number of lines in readme file

157

increased by13.77%

Worsened metrics

Total package byte prevSize

36898

decreased by-21.23%

Number of package files

15

decreased by-40%

Lines of code

857

decreased by-25.28%

Dependency changes

• - Removed@capsizecss/metrics@0.1.0(transitive)

• - Removed@spark-web/theme@2.0.2(transitive)

• Updated@spark-web/box@^1.0.4

• Updated@spark-web/theme@^3.0.0

• Updated@spark-web/utils@^1.1.2