@spectrum-css/typography - npm Package Compare versions

Comparing version 7.0.0-s2-foundations.13 to 7.0.0-s2-foundations.14

CHANGELOG.md

 # Change Log
 
+## 7.0.0-s2-foundations.14
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65) Thanks [@pfulton](https://github.com/pfulton)! - Bug fixes to S1 & Express theming across all components
+
+### Patch Changes
+
+- Updated dependencies [[`11a0032`](https://github.com/adobe/spectrum-css/commit/11a00323addbf28b9430d27d9cbc5f30bc851b65)]:
+  - @spectrum-css/tokens@15.0.0-s2-foundations.21
+
 ## 7.0.0-s2-foundations.13
@@ -160,2 +171,8 @@
 
+## 6.1.2
+
+### Patch Changes
+
+- [#3045](https://github.com/adobe/spectrum-css/pull/3045) [`5d6e03f`](https://github.com/adobe/spectrum-css/commit/5d6e03f30891f9171f1a600b06d534ee85719277) Thanks [@castastrophe](https://github.com/castastrophe)! - Improve changeset suggestions by using exports instead of files in component packages
+
 ## 6.1.1
@@ -162,0 +179,0 @@

metadata/mods.md

@@ -18,2 +18,4 @@ | Modifiable custom properties                                   |
 | `--mod-body-margin`                                            |
+| `--mod-body-margin-end`                                        |
+| `--mod-body-margin-start`                                      |
 | `--mod-body-sans-serif-emphasized-font-style`                  |
@@ -56,2 +58,4 @@ | `--mod-body-sans-serif-emphasized-font-weight`                 |
 | `--mod-code-line-height`                                       |
+| `--mod-code-margin-end`                                        |
+| `--mod-code-margin-start`                                      |
 | `--mod-code-strong-emphasized-font-style`                      |
@@ -58,0 +62,0 @@ | `--mod-code-strong-emphasized-font-weight`                     |

package.json

 {
 	"name": "@spectrum-css/typography",
-	"version": "7.0.0-s2-foundations.13",
+	"version": "7.0.0-s2-foundations.14",
 	"description": "The Spectrum CSS typography component",
@@ -16,3 +16,12 @@ "license": "Apache-2.0",
 	},
-	"main": "dist/index.css",
+	"exports": {
+		".": "./dist/index.css",
+		"./CHANGELOG.md": "./CHANGELOG.md",
+		"./index-*.css": "./dist/index-*.css",
+		"./index.css": "./dist/index.css",
+		"./metadata.json": "./metadata/metadata.json",
+		"./metadata/*": "./metadata/*",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
+	},
 	"files": [
@@ -22,5 +31,6 @@ "dist/*",
 		"package.json",
-		"stories/template.js",
-		"metadata/mods.md"
+		"stories/*",
+		"metadata/*"
 	],
+	"main": "dist/index.css",
 	"peerDependencies": {
@@ -27,0 +37,0 @@ "@spectrum-css/tokens": ">=14"

stories/template.js

@@ -1,2 +0,2 @@
-import { Variants } from "@spectrum-css/preview/decorators";
+import { getRandomId } from "@spectrum-css/preview/decorators";
 import { html } from "lit";
@@ -10,9 +10,10 @@ import { classMap } from "lit/directives/class-map.js";
 import "../index.css";
+import "../themes/spectrum.css";
+/* Must be imported last */
 import "../themes/express.css";
-import "../themes/spectrum.css";
 
-export const Template = (args, context) => {
+export const Template = (args = {}, context = {}) => {
 	let {
-		rootClass = "spectrum-Typography",
-		semantics = "body",
+		rootClass,
+		semantics,
 		size = "m",
@@ -22,6 +23,7 @@ variant,
 		glyph = "sans-serif",
-		id,
+		id = getRandomId("typography"),
 		content = [],
 		customClasses = [],
 		customStyles = {},
+		skipLineBreak = false,
 	} = args;
@@ -34,94 +36,83 @@
 
-	const contentLength = content.length;
-
 	// If there is no content, return an empty string, no need for additional processing
-	if (contentLength === 0) return html``;
+	if (content.length === 0) return html``;
 
-	const processedContent = html`
-		${content.map((c) => {
-			/* If the content is an object (but not a lit object), we need to merge the object with the template */
-			if (typeof c !== "string" && (typeof c === "object" && !c._$litType$)) {
-				return Template({ ...args, ...c }, context);
-			}
+	const processedContent = content.map((c) => {
+		/* If the content is an object (but not a lit object), we need to merge the object with the template */
+		if (typeof c !== "string" && (typeof c === "object" && !c._$litType$)) {
+			return Template({ ...args, ...c }, context);
+		}
 
-			if (typeof semantics === "undefined") {
-				return html`
-					<div
-						class=${classMap({
-							"spectrum-Typography": true,
-							...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-						})}
-						id=${ifDefined(id)}
-					>${c}</div>`;
-			}
+		if (typeof semantics === "undefined") {
+			return html`
+				<div
+					class=${classMap({
+						"spectrum-Typography": true,
+						...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+					})}
+					id=${ifDefined(id)}
+				>${c}</div>`;
+		}
 
-			rootClass = `spectrum-${capitalize(semantics)}`;
+		rootClass = `spectrum-${capitalize(semantics)}`;
 
-			const classes = {
-				[rootClass]: true,
-				[`${rootClass}--${glyph}`]:
-					typeof semantics !== "undefined" &&
-					typeof glyph !== "undefined" &&
-					glyph !== "sans-serif",
-				[`${rootClass}--size${size?.toUpperCase()}`]:
-					typeof semantics !== "undefined" && typeof size !== "undefined",
-				[`${rootClass}--${weight}`]:
-					typeof semantics !== "undefined" && typeof weight !== "undefined",
-				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-			};
+		const classes = {
+			[rootClass]: true,
+			[`${rootClass}--${glyph}`]: typeof glyph !== "undefined" && glyph !== "sans-serif",
+			[`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined",
+			[`${rootClass}--${weight}`]: typeof weight !== "undefined",
+			...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+		};
 
-			/* Variants are additive and exist within the wrapper tags */
-			if (variant && Array.isArray(variant)) {
-				if (["strong", "emphasized"].every((i) => variant.includes(i))) {
-					c = html`<span
-						class=${classMap({
-						[`${rootClass}-strong`]: true,
-						[`${rootClass}-emphasized`]: true,
-					})}
-						>${c}</span
-					>`;
-				}
-				else if (variant.includes("strong")) {
-					c = html`<strong
-						class=${classMap({ [`${rootClass}-strong`]: true })}
-						>${c}</strong
-					>`;
-				}
-				else if (variant.includes("emphasized")) {
-					c = html`<em
-						class=${classMap({ [`${rootClass}-emphasized`]: true })}
-						>${c}</em
-					>`;
-				}
+		/* Variants are additive and exist within the wrapper tags */
+		if (variant && Array.isArray(variant)) {
+			if (["strong", "emphasized"].every((i) => variant.includes(i))) {
+				c = html`<span
+					class=${classMap({
+					[`${rootClass}-strong`]: true,
+					[`${rootClass}-emphasized`]: true,
+				})}
+					>${c}</span
+				>`;
 			}
+			else if (variant.includes("strong")) {
+				c = html`<strong
+					class=${classMap({ [`${rootClass}-strong`]: true })}
+					>${c}</strong
+				>`;
+			}
+			else if (variant.includes("emphasized")) {
+				c = html`<em
+					class=${classMap({ [`${rootClass}-emphasized`]: true })}
+					>${c}</em
+				>`;
+			}
+		}
 
-			if (semantics === "heading")
-				return html`
-					<h2 class=${classMap(classes)} style=${styleMap(customStyles)} id=${ifDefined(id)}>${c}</h2>
-				`;
+		if (semantics === "heading")
+			return html`
+				<h2 class=${classMap(classes)} style=${styleMap(customStyles)} id=${ifDefined(id)}>${c}</h2>
+			`;
 
-			if (semantics === "body")
-				return html`
-					<p class=${classMap(classes)} style=${styleMap(customStyles)} id=${ifDefined(id)}>${c}</p>
-				`;
+		if (semantics === "body")
+			return html`
+				<p class=${classMap(classes)} style=${styleMap(customStyles)} id=${ifDefined(id)}>${c}</p>
+			`;
 
-			if (semantics === "code")
-				return html`
-					<code class=${classMap(classes)} style=${styleMap(customStyles)} id=${ifDefined(id)}>${c}</code>
-				`;
-
+		if (semantics === "code")
 			return html`
-				<span class=${classMap(classes)} style=${styleMap(customStyles)} id=${ifDefined(id)}>${c}</span>
+				<code class=${classMap(classes)} style=${styleMap(customStyles)} id=${ifDefined(id)}>${c}</code>${when(!skipLineBreak, () => html`<br/>`)}
 			`;
-		})}
-	`;
 
+		return html`
+			<span class=${classMap(classes)} style=${styleMap(customStyles)} id=${ifDefined(id)}>${c}</span>${when(!skipLineBreak, () => html`<br/>`)}
+		`;
+	});
+
 	/** Wrap items with the spectrum-Typography wrapper if there are more than 1 items (this ensures correct margins) */
 	return html`${when(
-		contentLength > 1,
+		content.length > 1,
 		() => html`<div class="spectrum-Typography" id=${ifDefined(id)}>${processedContent}</div>`,
-		() => processedContent
+		() => html`${processedContent}`,
 	)}`;
 };
-
-export const TypographyGroup = Variants({ Template });

No alert changes

Improved metrics

Total package byte prevSize

268118

4.88%

Number of package files

20

42.86%

Worsened metrics

Lines of code

2823

-16.6%

No dependency changes