You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
@spectrum-css/typography
Advanced tools
@spectrum-css/typography - npm Package Compare versions
Comparing version 7.0.0-s2-foundations.11 to 7.0.0-s2-foundations.12
| # Change Log | ||
| ## 7.0.0-s2-foundations.12 | ||
| ### Major Changes | ||
| - [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`8e772ef`](https://github.com/adobe/spectrum-css/commit/8e772efd757f5e88fd4048a5c0229472f9bf90cf) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false | ||
| ### Patch Changes | ||
| - Updated dependencies [[`8e772ef`](https://github.com/adobe/spectrum-css/commit/8e772efd757f5e88fd4048a5c0229472f9bf90cf)]: | ||
| - @spectrum-css/tokens@15.0.0-s2-foundations.12 | ||
| ## 7.0.0-s2-foundations.11 | ||
@@ -7,7 +18,7 @@ | ||
| - [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`54c5625`](https://github.com/adobe/spectrum-css/commit/54c56257bcca5872567a2bf0c5737e35b8190b05) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded | ||
| - [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded | ||
| ### Patch Changes | ||
| - Updated dependencies [[`54c5625`](https://github.com/adobe/spectrum-css/commit/54c56257bcca5872567a2bf0c5737e35b8190b05)]: | ||
| - Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]: | ||
| - @spectrum-css/tokens@15.0.0-s2-foundations.10 | ||
@@ -14,0 +25,0 @@ |
| { | ||
| "name": "@spectrum-css/typography", | ||
| "version": "7.0.0-s2-foundations.11", | ||
| "version": "7.0.0-s2-foundations.12", | ||
| "description": "The Spectrum CSS typography component", | ||
@@ -5,0 +5,0 @@ "license": "Apache-2.0", |
@@ -1,2 +0,2 @@ | ||
| import { getRandomId } from "@spectrum-css/preview/decorators"; | ||
| import { Variants } from "@spectrum-css/preview/decorators"; | ||
| import { html } from "lit"; | ||
@@ -10,6 +10,4 @@ import { classMap } from "lit/directives/class-map.js"; | ||
| import "../index.css"; | ||
| import "../themes/express.css"; | ||
| import "../themes/spectrum.css"; | ||
| export const Template = (args = {}, context = {}) => { | ||
| export const Template = (args, context) => { | ||
| let { | ||
@@ -22,3 +20,3 @@ rootClass = "spectrum-Typography", | ||
| glyph = "sans-serif", | ||
| id = getRandomId("typography"), | ||
| id, | ||
| content = [], | ||
@@ -34,88 +32,94 @@ customClasses = [], | ||
| const contentLength = content.length; | ||
| // If there is no content, return an empty string, no need for additional processing | ||
| if (content.length === 0) return html``; | ||
| if (contentLength === 0) return html``; | ||
| 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); | ||
| } | ||
| 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); | ||
| } | ||
| 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 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 }), {}), | ||
| }; | ||
| /* 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 | ||
| >`; | ||
| /* 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 | ||
| >`; | ||
| } | ||
| } | ||
| 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") | ||
| if (semantics === "code") | ||
| return html` | ||
| <code class=${classMap(classes)} style=${styleMap(customStyles)} id=${ifDefined(id)}>${c}</code> | ||
| `; | ||
| return html` | ||
| <code class=${classMap(classes)} style=${styleMap(customStyles)} id=${ifDefined(id)}>${c}</code><br/> | ||
| <span class=${classMap(classes)} style=${styleMap(customStyles)} id=${ifDefined(id)}>${c}</span> | ||
| `; | ||
| })} | ||
| `; | ||
| return html` | ||
| <span class=${classMap(classes)} style=${styleMap(customStyles)} id=${ifDefined(id)}>${c}</span><br/> | ||
| `; | ||
| }); | ||
| /** Wrap items with the spectrum-Typography wrapper if there are more than 1 items (this ensures correct margins) */ | ||
| return html`${when( | ||
| content.length > 1, | ||
| contentLength > 1, | ||
| () => html`<div class="spectrum-Typography" id=${ifDefined(id)}>${processedContent}</div>`, | ||
| () => html`${processedContent}`, | ||
| () => processedContent | ||
| )}`; | ||
| }; | ||
| export const TypographyGroup = Variants({ Template }); |
No alert changes
Improved metrics
- Total package byte prevSize
254932
0.22%- Lines of code
3385
0.06%No dependency changes