From baf0cdcda71457956038d5bdbbb6066b645e8c1d Mon Sep 17 00:00:00 2001 From: Kate Travers <8152930+ktravers@users.noreply.github.com> Date: Mon, 3 Jun 2024 14:22:47 -0400 Subject: [PATCH] include typography utility class names in example text content (#2633) ## Context Whenever I look up typography utility classes, I end up having to inspect the markup in the embedded Storybook to get the actual class name. It would be much easier if the class names were written out in the text content instead, so they could be copy/pasted directly from the page, without having to take the extra step of inspecting the page source. ## Summary This PR adds the class names to the storybook text content. ## Related https://github.com/primer/design/pull/796 --- docs/stories/utilities/Typography.stories.jsx | 78 +++++++++---------- 1 file changed, 39 insertions(+), 39 deletions(-) diff --git a/docs/stories/utilities/Typography.stories.jsx b/docs/stories/utilities/Typography.stories.jsx index b89ddb51..175093fb 100644 --- a/docs/stories/utilities/Typography.stories.jsx +++ b/docs/stories/utilities/Typography.stories.jsx @@ -4,12 +4,12 @@ export default { export const Heading = ({}) => (
Pizza 1
-Pizza 2
-Pizza 3
-Pizza 4
-Pizza 5
-Pizza 6
+Pizza .h1
+Pizza .h2
+Pizza .h3
+Pizza .h4
+Pizza .h5
+Pizza .h6
Focaccia
-Focaccia
-Focaccia
-Focaccia
-Focaccia
-Focaccia
+Focaccia .f1
+Focaccia .f2
+Focaccia .f3
+Focaccia .f4
+Focaccia .f5
+Focaccia .f6
- Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail. Jowl chuck biltong flank meatball, beef short ribs. Jowl tenderloin ground round, short loin tri-tip ribeye picanha filet mignon pig chicken kielbasa t-bone fatback. Beef ribs meatball chicken corned beef salami. + .lh-default Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail. Jowl chuck biltong flank meatball, beef short ribs. Jowl tenderloin ground round, short loin tri-tip ribeye picanha filet mignon pig chicken kielbasa t-bone fatback. Beef ribs meatball chicken corned beef salami.
- Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail. Jowl chuck biltong flank meatball, beef short ribs. Jowl tenderloin ground round, short loin tri-tip ribeye picanha filet mignon pig chicken kielbasa t-bone fatback. Beef ribs meatball chicken corned beef salami. + .lh-condensed Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail. Jowl chuck biltong flank meatball, beef short ribs. Jowl tenderloin ground round, short loin tri-tip ribeye picanha filet mignon pig chicken kielbasa t-bone fatback. Beef ribs meatball chicken corned beef salami.
- Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail. Jowl chuck biltong flank meatball, beef short ribs. Jowl tenderloin ground round, short loin tri-tip ribeye picanha filet mignon pig chicken kielbasa t-bone fatback. Beef ribs meatball chicken corned beef salami. + .lh-condensed-ultra Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail. Jowl chuck biltong flank meatball, beef short ribs. Jowl tenderloin ground round, short loin tri-tip ribeye picanha filet mignon pig chicken kielbasa t-bone fatback. Beef ribs meatball chicken corned beef salami.
Normal
-Italic
-Bold
-Semi-bold
-Light
-Uppercase
-No wrap
-Normal whitespace
-Text underline
-No underline
-Emphasized
-Small
-Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail.
-Monospace
-User Select None
-capitalize
+.text-normal
+.text-italic
+.text-bold
+.text-semibold
+.text-light
+.text-uppercase
+.no-wrap
+.ws-normal
+.text-underline
+.no-underline
+.text-emphasized
+.text-small
+.lead Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail.
+.text-mono
+.user-select-none
+.text-capitalize
Left align
-Center
-Right align
+.text-left
+.text-center
+.text-right