From 16436c9d5f5b955f7cda022f1fc75b257a0f6fa4 Mon Sep 17 00:00:00 2001 From: Arno V Date: Fri, 23 Feb 2024 13:33:21 -0500 Subject: [PATCH] Create Typography.stories.tsx --- .../src/System/Typography.stories.tsx | 249 ++++++++++++++++++ 1 file changed, 249 insertions(+) create mode 100644 packages/documentation/src/System/Typography.stories.tsx diff --git a/packages/documentation/src/System/Typography.stories.tsx b/packages/documentation/src/System/Typography.stories.tsx new file mode 100644 index 00000000..27b43c2f --- /dev/null +++ b/packages/documentation/src/System/Typography.stories.tsx @@ -0,0 +1,249 @@ +/* eslint-disable react/no-unescaped-entities */ + +import type { Story } from "@ladle/react"; + +export default { title: "System/Typography" }; + +const CommonTemplate = ({ + intro, + type, +}: { + intro: any; + type: "light" | "dark"; +}) => { + return ( + <> + {intro} + 
+				{`

+			
+			

+				We hear you, but we're not convinced that simply disabling our base
+				styles is what you really want. You don't want to have to remove
+				annoying margins every time you use a p element in a piece
+				of your dashboard UI. And I doubt you really want your blog posts to use
+				the user-agent styles either — you want them to look awesome,
+				not awful.
+			

+			

+				The @tailwindcss/typography plugin is our attempt to give
+				you what you actually want, without any of the downsides of
+				doing something stupid like disabling our base styles.
+			

+			

+				It adds a new prose and prose-{type} class
+				that you can slap on any block of vanilla HTML content and turn it into
+				a beautiful, well-formatted document:
+			

+			
{`

+  
Garlic bread with cheese: What the science tells us

+  

+    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.
+  

+  

+    But a recent study shows that the celebrated appetizer may be
+    linked to a series of rabies cases springing up around the
+    country.
+  

+  
+
`}

+			
What to expect from here on out

+			

+				What follows from here is just a bunch of absolute nonsense I've written
+				to dogfood the plugin itself. It includes every sensible typographic
+				element I could think of, like bold text, unordered
+				lists, ordered lists, code blocks, block quotes,{" "}
+				and even italics.
+			

+			
It's important to cover all of these use cases for a few reasons:

+			
    
+				
  1. We want everything to look good out of the box.
    2. 
+				
  2. 
+					Really just the first reason, that's the whole point of the plugin.
+				
    3. 
+				
  3. 
+					Here's a third pretend reason though a list with three items looks
+					more realistic than a list with two items.
+				
    4. 
+			

+			
Now we're going to try out another header style.

+			
Typography should be easy

+			

+				So that's a header for you — with any luck if we've done our job
+				correctly that will look pretty reasonable.
+			

+			
Something a wise person once told me about typography is:

+			

+				

+					Typography is pretty important if you don't want your stuff to look
+					like trash. Make it good then it won't be bad.
+				

+			

+			

+				It's probably important that images look okay here by default as well:
+			

+			

+				
+				

+					Contrary to popular belief, Lorem Ipsum is not simply random text. It
+					has roots in a piece of classical Latin literature from 45 BC, making
+					it over 2000 years old.
+				

+			

+			

+				Now I'm going to show you an example of an unordered list to make sure
+				that looks good, too:
+			

+			
    
+				
  • So here is the first item in this list.
    • 
+				
  • In this example we're keeping the items short.
    • 
+				
  • Later, we'll use longer, more complex list items.
    • 
+			

+			
And that's the end of this section.

+			
What if we stack headings?

+			
We should make sure that looks good, too.

+			

+				Sometimes you have headings directly underneath each other. In those
+				cases you often have to undo the top margin on the second heading
+				because it usually looks better for the headings to be closer together
+				than a paragraph followed by a heading should be.
+			

+			
When a heading comes after a paragraph...

+			

+				When a heading comes after a paragraph, we need a bit more space, like I
+				already mentioned above. Now let's see what a more complex list would
+				look like.
+			

+
+			
    
+				
  • 
+					
    
+						
+							I often do this thing where list items have headings.
+						
+					
    
+					
    
+						For some reason I think this looks cool which is unfortunate because
+						it's pretty annoying to get the styles right.
+					
    
+					
    
+						I often have two or three paragraphs in these list items, too, so
+						the hard part is getting the spacing between the paragraphs, list
+						item heading, and separate list items to all make sense. Pretty
+						tough honestly, you could make a strong argument that you just
+						shouldn't write this way.
+					
    
+				
    • 
+				
  • 
+					
    
+						Since this is a list, I need at least two items.
+					
    
+					
    
+						I explained what I'm doing already in the previous list item, but a
+						list wouldn't be a list if it only had one item, and we really want
+						this to look realistic. That's why I've added this second list item
+						so I actually have something to look at when writing the styles.
+					
    
+				
    • 
+				
  • 
+					
    
+						It's not a bad idea to add a third item either.
+					
    
+					
    
+						I think it probably would've been fine to just use two items but
+						three is definitely not worse, and since I seem to be having no
+						trouble making up arbitrary things to type, I might as well include
+						it. I'm going to press Enter now.
+					
    
+				
    • 
+			

+			

+				After this sort of list I usually have a closing statement or paragraph,
+				because it kinda looks weird jumping right to a heading.
+			

+			

+				We haven't used an h4 yet
+			

+			

+				But now we have. Please don't use `h5` or `h6` in your content, Medium
+				only supports two heading levels for a reason, you animals. I honestly
+				considered using a `before` pseudo-element to scream at you if you use
+				an `h5` or `h6`.
+			

+			
We still need to think about stacked headings though.

+			

+				Let's make sure we don't screw that up with `h4` elements, either.
+			

+			

+				Phew, with any luck we have styled the headings above this text and they
+				look pretty good.
+			

+			

+				Let's add a closing paragraph here so things end with a decently sized
+				block of text. I can't explain why I want things to end that way but I
+				have to assume it's because I think things will look weird or unbalanced
+				if there is a heading too close to the end of the document.
+			

+			

+				What I've written here is probably long enough, but adding this final
+				sentence can't hurt.
+			

+		
+	);
+};
+
+export const Light: Story = () => (
+	

+		

+			
Light

+			
+						The "light" typography style is designed to be used on dark
+						backgrounds.
+					

+				}
+			/>
+		

+	

+);
+
+export const Dark: Story = () => (
+	

+		

+			
Dark

+			
+						The "dark" typography style is designed to be used on light
+						backgrounds.
+					

+				}
+			/>
+		

+	

+);