diff --git a/.changeset/quick-ghosts-yell.md b/.changeset/quick-ghosts-yell.md new file mode 100644 index 0000000000..a80bd86396 --- /dev/null +++ b/.changeset/quick-ghosts-yell.md @@ -0,0 +1,5 @@ +--- +"@stackoverflow/stacks": minor +--- + +Update prose component to SHINE styles diff --git a/MIGRATION_GUIDE.md b/MIGRATION_GUIDE.md index 14008c9166..b65d639f33 100755 --- a/MIGRATION_GUIDE.md +++ b/MIGRATION_GUIDE.md @@ -157,6 +157,9 @@ The Post Summary component has changed dramatically. Please refer to the docs fo #### Popover - The new popovers no longer include an arrow element. The `s-popover--arrow` css class has been removed, and any markup using it (e.g. `
`) should be deleted from the codebases as part of the migration. +#### Prose +- `xs` and `md` sizes removed + #### Select - `md` and `xl` sizes removed diff --git a/packages/stacks-classic/lib/components/prose/prose.a11y.test.ts b/packages/stacks-classic/lib/components/prose/prose.a11y.test.ts new file mode 100644 index 0000000000..7cd258d0cd --- /dev/null +++ b/packages/stacks-classic/lib/components/prose/prose.a11y.test.ts @@ -0,0 +1,16 @@ +import { runA11yTests } from "../../test/a11y-test-utils"; +import "../../index"; +import proseTestHTML from "./prose.test.setup"; + +describe("prose", () => { + runA11yTests({ + baseClass: "s-prose", + modifiers: { + primary: ["sm"], + }, + children: { + default: proseTestHTML, + }, + tag: "article", + }); +}); diff --git a/packages/stacks-classic/lib/components/prose/prose.less b/packages/stacks-classic/lib/components/prose/prose.less index 3aa0fd07f9..52391aef0d 100644 --- a/packages/stacks-classic/lib/components/prose/prose.less +++ b/packages/stacks-classic/lib/components/prose/prose.less @@ -46,29 +46,15 @@ }); // MODIFIERS - &&__xs, - &&__sm, - &&__md { + &&__sm { --_pr-h1-fs: 1.75em; --_pr-h2-fs: 1.375em; --_pr-h3-fs: 1.25em; --_pr-h4-fs: 1.125em; --_pr-h5-fs: 1em; - } - - &&__xs { --_pr-fs: var(--fs-caption); - --_pr-lh: var(--lh-sm); - } - - &&__sm { - --_pr-fs: var(--fs-body1); --_pr-lh: var(--lh-md); - } - - &&__md { - --_pr-fs: var(--fs-body3); - --_pr-lh: var(--lh-xl); + --_pr-code-fs: var(--fs-caption); } // CHILD ELEMENTS @@ -77,11 +63,13 @@ color: var(--theme-link-color, var(--theme-secondary-400)); // When contained within a link, we want the code to be link-colored } + // Code blocks use ems to maintain sizes relative to the surrounding text > code { - padding: var(--su2) var(--su4); - color: var(--black-600); background-color: var(--black-200); - border-radius: var(--br-md); + color: var(--black-600); + // TODO verify this font size is appropriate with a Windows font stack + font-size: .875em; + padding: 0.1875em 0.375em; } } @@ -254,7 +242,7 @@ margin-bottom: calc(@pr-spacing-condensed + 0.1em); // Add some more spacing on the bottom for a little extra optical alignment } - margin-bottom:@pr-spacing; + margin-bottom: @pr-spacing; margin-top: 0; } @@ -364,7 +352,7 @@ p { --_pr-img-mb: 0; - a { + a:not([class]) { text-decoration: underline; } @@ -429,7 +417,7 @@ > * { opacity: var(--_pr-soiler-child-o); - transition: @pr-spoiler-transition; + transition: var(--_pr-spoiler-transition); visibility: var(--_pr-soiler-child-visibility); // hidden elements don't respond to mouse events, but still retain their space } diff --git a/packages/stacks-classic/lib/components/prose/prose.test.setup.ts b/packages/stacks-classic/lib/components/prose/prose.test.setup.ts new file mode 100644 index 0000000000..a592870922 --- /dev/null +++ b/packages/stacks-classic/lib/components/prose/prose.test.setup.ts @@ -0,0 +1,112 @@ +// Sample HTML for the prose component +const sampleHTMLFragment = `Markdown is intended to be as easy-to-read and easy-to-write as is feasible. Readability, however, is emphasized above all else.`; +const sampleListItems = ` +
  • ${sampleHTMLFragment}
    • +
  • Item 2
    • +
  • +
      +
    1. ${sampleHTMLFragment}
      2. +
    2. Item 2
      3. +
    3. Item 3
      4. +
    +
    • +
  • Item 4
    • +
  • + +
    • +`; + +export default ` +

    Code block

    +
    <article class="s-prose">
+  <h1>Garlic bread with cheese: What the science tells us</h1>
+  <p>
+    For years parents have espoused the health benefits of eating garlic bread with cheese to their
+    children, with the food earning such an iconic status in our culture that kids will often dress
+    up as warm, cheesy loaf for Halloween.
+  </p>
+  <p>
+    But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
+    springing up around the country.
+  </p>
+  <!-- ... -->
+</article>
    + +

    Headings

    +

    Heading 1: ${sampleHTMLFragment}

    +

    Heading 2: ${sampleHTMLFragment}

    +

    Heading 3: ${sampleHTMLFragment}

    +

    Heading 4: ${sampleHTMLFragment}

    +
    Heading 5: ${sampleHTMLFragment}
    +
    Heading 6: ${sampleHTMLFragment}
    + +

    Paragraphs

    +

    Paragraph 1: ${sampleHTMLFragment}

    +

    Paragraph 2: ${sampleHTMLFragment}

    + +

    Unordered list w/ nested ordered list

    + + +

    Ordered list w/ nested unordered list

    +
      + ${sampleListItems} +
    + +

    Blockquote

    +
    +

    This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

    +

    ${sampleHTMLFragment}

    +
    + +

    Image

    +

    Sample checkerboard image

    + +

    Table

    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    WrestlerOriginFinisher
    Bret "The Hitman" HartCalgary, ABSharpshooter
    Stone Cold Steve AustinAustin, TXStone Cold Stunner
    Randy SavageSarasota, FLElbow Drop
    VaderBoulder, COVader Bomb
    Razor RamonChuluota, FLRazor’s Edge
    +
    + +

    Odd text

    +

    ☺🐉 ᵃᵉⁱᵒᵘ ₐₑᵢₒᵤ s̶t̶r̶i̶k̶e̶o̶u̶t̶ Z̸̧̦̥͔̻̞̟͔͒̓̄̓͐͆͋̃̅͆̓͘̚͝͝à̷̛̜͇̺̖̯̭͓̱̱̣̺̲̪̰l̷̢̳̤̮͈͎̩̱̳̱̱̞͆͂̽̀̃͒̿̄̅͊͘͘̚͠͝ͅg̷͙͋o̶̧̩̓̓͌̄͊͐̓̇̏͝ ̶̛͚͖͍̦͕̞͈͆̋̓̈̏̈̓̊̅͆͘͜t̸̬̮̖̖͙͔̮͊̔͊͌́̈́͒̇͒̽̑̎̚̕͠ė̶̖̰̬͙͙̇̈͌͘͜͜x̴͔̎t̶̖́̒̏͒͌̈́̏͊̒̉ͅ ̵̨͍̬͔̼̣̘̖͍͖̘͍͋̑͛̂̾̋ḧ̸̡̘̬̲̣̺́́̿̀̈ͅé̷̦̰̻̤̲̺̠̏͒̉͛̍͌̍ͅr̶̩̯̱̜͆̌̾͌̑̇̊͒̃̀̽̍̚é̴̜̉̇̿̈́͌̕.̸̢̱͔̲̫̇͌̽̌͂͊͊̈́̇

    +`; diff --git a/packages/stacks-classic/lib/components/prose/prose.visual.test.ts b/packages/stacks-classic/lib/components/prose/prose.visual.test.ts new file mode 100644 index 0000000000..71322b3ae9 --- /dev/null +++ b/packages/stacks-classic/lib/components/prose/prose.visual.test.ts @@ -0,0 +1,23 @@ +import "../../index"; +import { html } from "@open-wc/testing"; +import { runVisualTests } from "../../test/visual-test-utils"; +import proseTestHTML from "./prose.test.setup"; + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +const template = ({ component, testid, className }: any) => html` +
    + ${component} +
    +`; +describe("prose", () => { + runVisualTests({ + baseClass: "s-prose", + modifiers: { + primary: ["sm"], + }, + children: { + default: proseTestHTML, + }, + template, + }); +}); diff --git a/packages/stacks-classic/lib/exports/__snapshots__/color-mixins.less.test.ts.snap b/packages/stacks-classic/lib/exports/__snapshots__/color-mixins.less.test.ts.snap index 3f735e0992..cae66ce29a 100644 --- a/packages/stacks-classic/lib/exports/__snapshots__/color-mixins.less.test.ts.snap +++ b/packages/stacks-classic/lib/exports/__snapshots__/color-mixins.less.test.ts.snap @@ -376,7 +376,7 @@ body .themed { --highlight-attribute: hsl(206, 98.5%, 29%); --highlight-bg: hsl(0, 0%, 96.5%); --highlight-color: var(--black-600); - --highlight-comment: hsl(210, 8%, 43.5%); + --highlight-comment: var(--black-400); --highlight-deletion: var(--red-500); --highlight-keyword: hsl(206, 98.5%, 29%); --highlight-literal: hsl(27, 99%, 36%); diff --git a/packages/stacks-classic/lib/exports/__snapshots__/color.less.test.ts.snap b/packages/stacks-classic/lib/exports/__snapshots__/color.less.test.ts.snap index 0d8197b5a2..229a822212 100644 --- a/packages/stacks-classic/lib/exports/__snapshots__/color.less.test.ts.snap +++ b/packages/stacks-classic/lib/exports/__snapshots__/color.less.test.ts.snap @@ -164,7 +164,7 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed { --highlight-attribute: hsl(206, 98.5%, 29%); --highlight-bg: hsl(0, 0%, 96.5%); --highlight-color: var(--black-600); - --highlight-comment: hsl(210, 8%, 43.5%); + --highlight-comment: var(--black-400); --highlight-deletion: var(--red-500); --highlight-keyword: hsl(206, 98.5%, 29%); --highlight-literal: hsl(27, 99%, 36%); @@ -305,7 +305,7 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed { --highlight-attribute: var(--blue-400); --highlight-bg: hsl(0, 2%, 11%); --highlight-color: var(--black); - --highlight-comment: hsl(0, 0%, 60%); + --highlight-comment: var(--black-400); --highlight-deletion: var(--red-500); --highlight-keyword: var(--blue-400); --highlight-literal: hsl(27, 95%, 65%); @@ -444,7 +444,7 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed { --highlight-attribute: var(--blue-400); --highlight-bg: hsl(0, 2%, 11%); --highlight-color: var(--black); - --highlight-comment: hsl(0, 0%, 60%); + --highlight-comment: var(--black-400); --highlight-deletion: var(--red-500); --highlight-keyword: var(--blue-400); --highlight-literal: hsl(27, 95%, 65%); @@ -583,7 +583,7 @@ body.theme-highcontrast.theme-system .theme-light__forced { --highlight-attribute: hsl(215, 100%, 35%); --highlight-bg: hsl(0, 0%, 96.5%); --highlight-color: var(--black-600); - --highlight-comment: hsl(213, 7%, 33%); + --highlight-comment: var(--black-400); --highlight-deletion: var(--red-400); --highlight-keyword: hsl(215, 100%, 35%); --highlight-literal: hsl(16, 94%, 31%); @@ -704,7 +704,7 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced { --highlight-attribute: hsl(200, 57%, 85%); --highlight-bg: hsl(0, 0%, 10%); --highlight-color: hsl(0, 0%, 100%); - --highlight-comment: hsl(0, 0%, 99%); + --highlight-comment: var(--black-400); --highlight-deletion: var(--red-500); --highlight-keyword: hsl(200, 57%, 85%); --highlight-literal: hsl(36, 96%, 71%); @@ -825,7 +825,7 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced { --highlight-attribute: hsl(200, 57%, 85%); --highlight-bg: hsl(0, 0%, 10%); --highlight-color: hsl(0, 0%, 100%); - --highlight-comment: hsl(0, 0%, 99%); + --highlight-comment: var(--black-400); --highlight-deletion: var(--red-500); --highlight-keyword: hsl(200, 57%, 85%); --highlight-literal: hsl(36, 96%, 71%); diff --git a/packages/stacks-classic/lib/exports/color-sets.less b/packages/stacks-classic/lib/exports/color-sets.less index ca699eec3f..0ea8da1c7a 100644 --- a/packages/stacks-classic/lib/exports/color-sets.less +++ b/packages/stacks-classic/lib/exports/color-sets.less @@ -526,7 +526,7 @@ attribute: hsl(206, 98.5%, 29%); bg: hsl(0, 0%, 96.5%); color: var(--black-600); - comment: hsl(210, 8%, 43.5%); + comment: var(--black-400); deletion: var(--red-500); keyword: hsl(206, 98.5%, 29%); literal: hsl(27, 99%, 36%); @@ -540,7 +540,7 @@ attribute: var(--blue-400); bg: hsl(0, 2%, 11%); color: var(--black); - comment: hsl(0, 0%, 60%); + comment: var(--black-400); deletion: var(--red-500); keyword:var(--blue-400); literal: hsl(27, 95%, 65%); @@ -554,7 +554,7 @@ attribute: hsl(215, 100%, 35%); bg: hsl(0, 0%, 96.5%); color: var(--black-600); - comment: hsl(213, 7%, 33%); + comment: var(--black-400); deletion: var(--red-400); keyword: hsl(215, 100%, 35%); literal: hsl(16, 94%, 31%); @@ -568,7 +568,7 @@ attribute: hsl(200, 57%, 85%); bg: hsl(0, 0%, 10%); color: hsl(0, 0%, 100%); - comment: hsl(0, 0%, 99%); + comment: var(--black-400); deletion: var(--red-500); keyword: hsl(200, 57%, 85%); literal: hsl(36, 96%, 71%); diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-dark-sm.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-dark-sm.ico new file mode 100644 index 0000000000..2da0dfc637 --- /dev/null +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-dark-sm.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:66dab01d54862fa9dc3712e99e15c07d3c32073e993184b71e0587357eff187e +size 231504 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-dark.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-dark.ico new file mode 100644 index 0000000000..46362e049b --- /dev/null +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-dark.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0376d08ddf1e667727477c9cac8c5f870ac01aa8487f3d27f58bba935b55173b +size 273039 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-highcontrast-dark-sm.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-highcontrast-dark-sm.ico new file mode 100644 index 0000000000..b230fb5ff2 --- /dev/null +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-highcontrast-dark-sm.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c3d2f2dadb5f9b3eaca7f6a34eaa25789d6ca27565b4e0113fc36ece8030d7b3 +size 228171 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-highcontrast-dark.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-highcontrast-dark.ico new file mode 100644 index 0000000000..844fa21b43 --- /dev/null +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-highcontrast-dark.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:48bb44495a1c503a2665522f3901b47ce55bab1848224e0aa4f1ce94a82decd6 +size 269482 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-highcontrast-light-sm.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-highcontrast-light-sm.ico new file mode 100644 index 0000000000..ab325281ef --- /dev/null +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-highcontrast-light-sm.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a6716b086c860655f6fa4c15a06749b04eda1fd7afc4566486a46de1c01a6f87 +size 268264 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-highcontrast-light.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-highcontrast-light.ico new file mode 100644 index 0000000000..398793dbf8 --- /dev/null +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-highcontrast-light.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:2380253ff0de254b8195a4ad41751e03d13eba04ec3cff096b4cb24ae1ad18e2 +size 316554 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-light-sm.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-light-sm.ico new file mode 100644 index 0000000000..0412090246 --- /dev/null +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-light-sm.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:78f1abe7b1aa74c5eae8c65cb4c50fd7f6fa59907ccb211a8be2a463bd90c07a +size 268089 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-light.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-light.ico new file mode 100644 index 0000000000..1c06664249 --- /dev/null +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-prose-light.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:512c66c819f3de47360bfc194b66e84c5c836c4b8b0ea496a238e09d58fb3692 +size 316221 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-dark-sm.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-dark-sm.ico new file mode 100644 index 0000000000..f7d9d9b85a --- /dev/null +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-dark-sm.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b14eb8b8810c7519f3e6dce61b87b34dfdb584ddbc265297f543fc21b20323db +size 315543 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-dark.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-dark.ico new file mode 100644 index 0000000000..f97b225422 --- /dev/null +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-dark.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:417be4ba436e7175b47d4cfdd13aa53d881cc7a2389930fb6fa919085c0f767e +size 373224 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-highcontrast-dark-sm.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-highcontrast-dark-sm.ico new file mode 100644 index 0000000000..62a80561f5 --- /dev/null +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-highcontrast-dark-sm.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:cbbb9211f40549a5ffd6ba1c660c8f1136dc13fd7b1de2c6c5a9276f033c50d5 +size 313898 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-highcontrast-dark.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-highcontrast-dark.ico new file mode 100644 index 0000000000..e5b42c9ece --- /dev/null +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-highcontrast-dark.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:88e031bc3e6be92e0e0c05851f9dbd909321f326c1aabb4408ff8d82e859e00e +size 371544 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-highcontrast-light-sm.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-highcontrast-light-sm.ico new file mode 100644 index 0000000000..8c38748d20 --- /dev/null +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-highcontrast-light-sm.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ac92f586c4d365cfa9905c72c30d696f39b05a1898de6a6c9adce4a9d87d3ce3 +size 364061 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-highcontrast-light.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-highcontrast-light.ico new file mode 100644 index 0000000000..c5fbe3d2c8 --- /dev/null +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-highcontrast-light.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:abc85e936673c7a117c6d523a66d62d8f52300e08d903e2980eca75a2e9877ff +size 431388 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-light-sm.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-light-sm.ico new file mode 100644 index 0000000000..0b5b342176 --- /dev/null +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-light-sm.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:04be81ba026d23fc7df4ee66341bace03c850b3369093eb1d0f5293b9631a747 +size 363946 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-light.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-light.ico new file mode 100644 index 0000000000..e55bd16d70 --- /dev/null +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-prose-light.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:9094e92aaf9690b3ceef58b76e1fe29e9c21239585bce9858697e95a7543b9e3 +size 431069 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-dark-sm.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-dark-sm.ico new file mode 100644 index 0000000000..6f69bf6e1c --- /dev/null +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-dark-sm.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ee89a62f1272cf12f79646e6e1194faf940bfd41a86b83655909e19b24ebe68b +size 306786 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-dark.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-dark.ico new file mode 100644 index 0000000000..e30d541bd2 --- /dev/null +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-dark.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5b0cf5f328352dec90f2c5364e5bb3173873a4a999893cc7b82c52e532750c14 +size 365178 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-highcontrast-dark-sm.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-highcontrast-dark-sm.ico new file mode 100644 index 0000000000..94617eff6a --- /dev/null +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-highcontrast-dark-sm.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:dc053e00d5cdd700982ae0e982a0cc4b4654c283156decabc734b1d5e1635306 +size 305279 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-highcontrast-dark.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-highcontrast-dark.ico new file mode 100644 index 0000000000..d7b734a3b4 --- /dev/null +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-highcontrast-dark.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:cac71705dc75d7c18ef0f87233141c17a633b2e35e8d98dc164a7aa3eb2045bd +size 361934 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-highcontrast-light-sm.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-highcontrast-light-sm.ico new file mode 100644 index 0000000000..092cfb489d --- /dev/null +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-highcontrast-light-sm.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b425a15eef6d6a6a3f0b5b59ccfe6c08ceaf400ca676112fd3ef9cb9505a03e0 +size 326608 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-highcontrast-light.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-highcontrast-light.ico new file mode 100644 index 0000000000..b84cc3229b --- /dev/null +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-highcontrast-light.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c8140b821b0b03a50b9f00b725ec7853710fa602390b5aad45f18e905bab5da4 +size 387965 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-light-sm.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-light-sm.ico new file mode 100644 index 0000000000..4857fd7093 --- /dev/null +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-light-sm.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:93c699578fcf44e6917f97f24a4c2f5f85f174fb10bf27d56d12e9caa9ba672f +size 326489 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-light.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-light.ico new file mode 100644 index 0000000000..61b5bc3016 --- /dev/null +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-prose-light.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:08f02041b6fc3db3d97e27c5f22829e8019f194ff8cb7d55e7a66b8e0c13b6e7 +size 387909 diff --git a/packages/stacks-docs/.eleventy.js b/packages/stacks-docs/.eleventy.js index 16ad2d080b..d803890aaf 100644 --- a/packages/stacks-docs/.eleventy.js +++ b/packages/stacks-docs/.eleventy.js @@ -59,15 +59,19 @@ module.exports = function(eleventyConfig) { eleventyConfig.addLiquidFilter("extractHeadings", function(content) { const $ = cheerio.load(content); const headings = []; - + $('h2, h3').each((i, el) => { + // Exclude headings inside presentational areas (e.g. examples, demos) + if ($(el).closest('[role="presentation"]').length > 0) { + return; + } headings.push({ level: parseInt(el.tagName[1]), text: $(el).text(), id: $(el).attr('id') }); }); - + return headings; }); diff --git a/packages/stacks-docs/_data/components/code-blocks.json b/packages/stacks-docs/_data/components/code-blocks.json new file mode 100644 index 0000000000..ceda5424a9 --- /dev/null +++ b/packages/stacks-docs/_data/components/code-blocks.json @@ -0,0 +1,19 @@ +{ + "classes": [ + { + "class": ".s-code-block", + "applies": "N/A", + "description": "Adds proper styling to pre-formatted code." + }, + { + "class": ".linenums", + "applies": ".s-code-block", + "description": "Adds a line numbers column to the code block." + }, + { + "class": ".linenums:<n>", + "applies": ".s-code-block", + "description": "Adds a line numbers column to the code block starting at a number <n>." + } + ] +} diff --git a/packages/stacks-docs/_data/components/prose.json b/packages/stacks-docs/_data/components/prose.json new file mode 100644 index 0000000000..faaaea6041 --- /dev/null +++ b/packages/stacks-docs/_data/components/prose.json @@ -0,0 +1,14 @@ +{ + "classes": [ + { + "class": ".s-prose", + "applies": "N/A", + "description": "Adds proper styling for rendered Markdown." + }, + { + "class": ".s-prose__sm", + "applies": ".s-prose", + "description": "Decreases the base font size and line height." + } + ] +} diff --git a/packages/stacks-docs/_data/site-navigation.json b/packages/stacks-docs/_data/site-navigation.json index bde5a98e19..f26014e237 100644 --- a/packages/stacks-docs/_data/site-navigation.json +++ b/packages/stacks-docs/_data/site-navigation.json @@ -339,7 +339,8 @@ }, { "title": "Prose", - "url": "/product/components/prose/" + "url": "/product/components/prose/", + "new": true }, { "title": "Sidebar widgets", diff --git a/packages/stacks-docs/product/components/code-blocks.html b/packages/stacks-docs/product/components/code-blocks.html index 7e026ca1eb..56018d9a3b 100644 --- a/packages/stacks-docs/product/components/code-blocks.html +++ b/packages/stacks-docs/product/components/code-blocks.html @@ -10,27 +10,19 @@ - - + + - - - - - - - - - - - - - - - + {% for item in code-blocks.classes %} + + + + + + {% endfor %}
    ClassApplies toClassApplies to Output
    .s-code-blockpreAdds proper styling to pre-formatted code.
    .linenums.s-code-blockAdds a line numbers column to the code block.
    .linenums:<n>.s-code-blockAdds a line numbers column to the code block starting at a number <n>.
    {{ item.class }}{{ item.applies }}{{ item.description }}
    diff --git a/packages/stacks-docs/product/components/prose.html b/packages/stacks-docs/product/components/prose.html index 7ed7bcfdcb..56e50cb520 100644 --- a/packages/stacks-docs/product/components/prose.html +++ b/packages/stacks-docs/product/components/prose.html @@ -4,33 +4,26 @@ description: The prose component provides proper styling for rendered Markdown. tags: components --- + +{% assign expandBtnContainerClasses = "ps-sticky bg-white z-popover py16 t64 bb bc-black-200 sm:py8" %} +
    {% header "h2", "Classes" %}
    - + - - - - - - - - - - - - - - - - + {% for item in components.prose.classes %} + + + + + {% endfor %}
    ClassClass Output
    .s-proseAdds proper styling for rendered Markdown.
    .s-prose__xsOur most compact version with the smallest font size and line height.
    .s-prose__smDecreases the base font size and line height.
    .s-prose__mdIncreases the base font size and line height.
    {{ item.class }}{{ item.description }}
    @@ -39,82 +32,44 @@ {% header "h2", "Examples" %} {% header "h3", "Minimal" %}

    We modified this test document from the folks at Tailwind to demonstrate and explain our design choices.

    -
    -
    - -
    -
    - {% header "h3", "Answer" %} -

    The following is a real-world answer taken from Stack Overflow

    -
    -
    - +
    +
    +
    -
    - - {% header "h3", "Link preview" %} -

    Let’s see what a link preview looks like within the prose component.

    -
    -
    -
    -
    -
    -
    - {% icon "GitHub" %} -
    - -
    -
    -{% highlight js %} -linenums'use strict'; - -module.exports = function(grunt) { - grunt.initConfig({ - pkg: grunt.file.readJSON('package.json'), - version: '<%= pkg.version %>', - - // Shell commands for use in Grunt tasks - shell: { - eleventyBuild: { - command: 'npx @11ty/eleventy', - options: { - stderr: false, - execOptions: { - cwd: 'docs' - } - } +{% highlight html %} +
    + … +
    {% endhighlight %} -
    -
    - https://github.com/StackExchange/Stacks/blob/develop/Gruntfile.js -
    (truncated)
    -
    -
    +
    +
    {% header "h3", "Full Markdown spec" %}

    This example includes the full kitchen-sink collection of everything the Markdown spec includes.

    -
    -{% highlight html %} -
    - … -
    -{% endhighlight %} -
    +
    +
    + +
    +
    @@ -124,63 +79,52 @@
    {% header "h2", "Sizing" %} - {% header "h3", "Extra Small" %} -
    -{% highlight html %} -
    - … -
    -{% endhighlight %} -
    - -
    -
    - {% header "h3", "Small" %}

    In ancilliary content like comments or side-discussions, it may be appropriate to add the small variation.

    -
    +
    +
    + +
    {% highlight html %}
    …
    {% endhighlight %} -
    +
    -
    -
    - - {% header "h3", "Default" %} -
    -{% highlight html %} -
    - … -
    -{% endhighlight %} -
    - -
    -
    - - {% header "h3", "Medium" %} -

    Depending on the context for displaying the prose component, it may be appropriate to size text up to maintain readability.

    -
    -{% highlight html %} -
    - … -
    -{% endhighlight %} -
    -
    + \ No newline at end of file