mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-09 00:19:13 +08:00
Update DocumentFormatting stories and tweak styling
This commit is contained in:
domyen
parent
06ec78c20c
commit
df2543a9fd
@ -78,7 +78,7 @@ const Wrapper = styled.div(
|
||||
|
||||
/* GitHub inspired Markdown styles loosely from https://gist.github.com/tuzz/3331384 */
|
||||
|
||||
body > *:first-child {
|
||||
body > *:first-of-type {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
@ -118,13 +118,13 @@ const Wrapper = styled.div(
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h2:first-child,
|
||||
h1:first-child,
|
||||
h1:first-child + h2,
|
||||
h3:first-child,
|
||||
h4:first-child,
|
||||
h5:first-child,
|
||||
h6:first-child {
|
||||
h2:first-of-type,
|
||||
h1:first-of-type,
|
||||
h1:first-of-type + h2,
|
||||
h3:first-of-type,
|
||||
h4:first-of-type,
|
||||
h5:first-of-type,
|
||||
h6:first-of-type {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
@ -186,35 +186,35 @@ const Wrapper = styled.div(
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body > h2:first-child {
|
||||
body > h2:first-of-type {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
body > h1:first-child {
|
||||
body > h1:first-of-type {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
body > h1:first-child + h2 {
|
||||
body > h1:first-of-type + h2 {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
body > h3:first-child,
|
||||
body > h4:first-child,
|
||||
body > h5:first-child,
|
||||
body > h6:first-child {
|
||||
body > h3:first-of-type,
|
||||
body > h4:first-of-type,
|
||||
body > h5:first-of-type,
|
||||
body > h6:first-of-type {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
a:first-child h1,
|
||||
a:first-child h2,
|
||||
a:first-child h3,
|
||||
a:first-child h4,
|
||||
a:first-child h5,
|
||||
a:first-child h6 {
|
||||
a:first-of-type h1,
|
||||
a:first-of-type h2,
|
||||
a:first-of-type h3,
|
||||
a:first-of-type h4,
|
||||
a:first-of-type h5,
|
||||
a:first-of-type h6 {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
@ -237,8 +237,8 @@ const Wrapper = styled.div(
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
ul :first-child,
|
||||
ol :first-child {
|
||||
ul :first-of-type,
|
||||
ol :first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@ -259,11 +259,11 @@ const Wrapper = styled.div(
|
||||
margin: 15px 0 5px;
|
||||
}
|
||||
|
||||
dl dt:first-child {
|
||||
dl dt:first-of-type {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
dl dt > :first-child {
|
||||
dl dt > :first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@ -276,7 +276,7 @@ const Wrapper = styled.div(
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
dl dd > :first-child {
|
||||
dl dd > :first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@ -290,7 +290,7 @@ const Wrapper = styled.div(
|
||||
color: ${props.theme.color.dark};
|
||||
}
|
||||
|
||||
blockquote > :first-child {
|
||||
blockquote > :first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@ -309,7 +309,7 @@ const Wrapper = styled.div(
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table tr:nth-child(2n) {
|
||||
table tr:nth-of-type(2n) {
|
||||
background-color: ${props.theme.color.lighter};
|
||||
}
|
||||
|
||||
@ -328,8 +328,8 @@ const Wrapper = styled.div(
|
||||
padding: 6px 13px;
|
||||
}
|
||||
|
||||
table tr th :first-child,
|
||||
table tr td :first-child {
|
||||
table tr th :first-of-type,
|
||||
table tr td :first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import React from 'react';
|
||||
|
||||
import Markdown from 'markdown-to-jsx';
|
||||
import DocumentFormatting from './DocumentFormatting';
|
||||
import markdownSample from './DocumentFormattingSample.md';
|
||||
|
||||
export default {
|
||||
Component: DocumentFormatting,
|
||||
@ -16,14 +18,15 @@ export default {
|
||||
],
|
||||
};
|
||||
|
||||
export const sampleDocument = () => (
|
||||
// This is Markdown to HTML from https://markdown-it.github.io/
|
||||
// Use by wrapping DOM in this component
|
||||
export const withMarkdown = () => (
|
||||
<DocumentFormatting>
|
||||
<p>
|
||||
Wrap your components in <code>DocumentFormatting</code> to get text styles for body content
|
||||
</p>
|
||||
<h1>h1 Heading 😎</h1>
|
||||
<Markdown>{markdownSample}</Markdown>
|
||||
</DocumentFormatting>
|
||||
);
|
||||
|
||||
export const withDOM = () => (
|
||||
<DocumentFormatting>
|
||||
<h1>h1 Heading</h1>
|
||||
<h2>h2 Heading</h2>
|
||||
<h3>h3 Heading</h3>
|
||||
<h4>h4 Heading</h4>
|
||||
@ -183,98 +186,5 @@ export const sampleDocument = () => (
|
||||
title="The Stormtroopocat"
|
||||
/>
|
||||
</p>
|
||||
<p>Like links, Images also have a footnote style syntax</p>
|
||||
<p>
|
||||
<img src="https://octodex.github.com/images/dojocat.jpg" alt="Alt text" title="The Dojocat" />
|
||||
</p>
|
||||
<p>With a reference later in the document defining the URL location:</p>
|
||||
<h2>Plugins</h2>
|
||||
<p>
|
||||
The killer feature of <code>markdown-it</code> is very effective support of
|
||||
<a href="https://www.npmjs.org/browse/keyword/markdown-it-plugin">syntax plugins</a>.
|
||||
</p>
|
||||
<h3>
|
||||
<a href="https://github.com/markdown-it/markdown-it-emoji">Emojies</a>
|
||||
</h3>
|
||||
<blockquote>
|
||||
<p>Classic markup: 😉 :crush: 😢 :tear: 😆 😋</p>
|
||||
<p>Shortcuts (emoticons): 😃 😦 😎 😉</p>
|
||||
</blockquote>
|
||||
<p>
|
||||
see{' '}
|
||||
<a href="https://github.com/markdown-it/markdown-it-emoji#change-output">
|
||||
how to change output
|
||||
</a>{' '}
|
||||
with twemoji.
|
||||
</p>
|
||||
<h3>
|
||||
<a href="https://github.com/markdown-it/markdown-it-sub">Subscript</a> /{' '}
|
||||
<a href="https://github.com/markdown-it/markdown-it-sup">Superscript</a>
|
||||
</h3>
|
||||
<ul>
|
||||
<li>
|
||||
19<sup>th</sup>
|
||||
</li>
|
||||
<li>
|
||||
H<sub>2</sub>O
|
||||
</li>
|
||||
</ul>
|
||||
<h3>
|
||||
<a href="https://github.com/markdown-it/markdown-it-deflist">Definition lists</a>
|
||||
</h3>
|
||||
<dl>
|
||||
<dt>Term 1</dt>
|
||||
<dd>
|
||||
<p>Definition 1 with lazy continuation.</p>
|
||||
</dd>
|
||||
<dt>
|
||||
Term 2 with <em>inline markup</em>
|
||||
</dt>
|
||||
<dd>
|
||||
<p>Definition 2</p>
|
||||
<pre>
|
||||
<code> some code, part of Definition 2</code>
|
||||
</pre>
|
||||
<p>Third paragraph of definition 2.</p>
|
||||
</dd>
|
||||
</dl>
|
||||
<p>
|
||||
<em>Compact style:</em>
|
||||
</p>
|
||||
<dl>
|
||||
<dt>Term 1</dt>
|
||||
<dd>Definition 1</dd>
|
||||
<dt>Term 2</dt>
|
||||
<dd>Definition 2a</dd>
|
||||
<dd>Definition 2b</dd>
|
||||
</dl>
|
||||
<p>
|
||||
<em>Compact style:</em>
|
||||
</p>
|
||||
<dl>
|
||||
<dt>Term 1</dt>
|
||||
<dd>Definition 1</dd>
|
||||
<dt>Term 2</dt>
|
||||
<dd>Definition 2a</dd>
|
||||
<dd>Definition 2b</dd>
|
||||
</dl>
|
||||
<h3>
|
||||
<a href="https://github.com/markdown-it/markdown-it-abbr">Abbreviations</a>
|
||||
</h3>
|
||||
<p>
|
||||
This is <abbr title="Hyper Text Markup Language">HTML</abbr> abbreviation example.
|
||||
</p>
|
||||
<p>
|
||||
It converts “<abbr title="Hyper Text Markup Language">HTML</abbr>”, but keep intact partial
|
||||
entries like “xxxHTMLyyy” and so on.
|
||||
</p>
|
||||
<h3>
|
||||
<a href="https://github.com/markdown-it/markdown-it-container">Custom containers</a>
|
||||
</h3>
|
||||
<div className="warning">
|
||||
<p>
|
||||
<em>here be dragons</em>
|
||||
</p>
|
||||
</div>
|
||||
</DocumentFormatting>
|
||||
);
|
||||
|
||||
125
lib/components/src/typography/DocumentFormattingSample.md
Normal file
125
lib/components/src/typography/DocumentFormattingSample.md
Normal file
@ -0,0 +1,125 @@
|
||||
# h1 Heading
|
||||
|
||||
## h2 Heading
|
||||
|
||||
### h3 Heading
|
||||
|
||||
#### h4 Heading
|
||||
|
||||
##### h5 Heading
|
||||
|
||||
###### h6 Heading
|
||||
|
||||
## Typographic replacements
|
||||
|
||||
Enable typographer option to see result.
|
||||
|
||||
(c) (C) (r) (R) (tm) (TM) (p) (P) +-
|
||||
|
||||
test.. test... test..... test?..... test!....
|
||||
|
||||
!!!!!! ???? ,, -- ---
|
||||
|
||||
"Smartypants, double quotes" and 'single quotes'
|
||||
|
||||
## Emphasis
|
||||
|
||||
**This is bold text**
|
||||
|
||||
**This is bold text**
|
||||
|
||||
_This is italic text_
|
||||
|
||||
_This is italic text_
|
||||
|
||||
~~Strikethrough~~
|
||||
|
||||
## Blockquotes
|
||||
|
||||
> Blockquotes can also be nested...
|
||||
>
|
||||
> > ...by using additional greater-than signs right next to each other...
|
||||
> >
|
||||
> > > ...or with spaces between arrows.
|
||||
|
||||
## Lists
|
||||
|
||||
Unordered
|
||||
|
||||
- Create a list by starting a line with `+`, `-`, or `*`
|
||||
- Sub-lists are made by indenting 2 spaces:
|
||||
- Marker character change forces new list start:
|
||||
- Ac tristique libero volutpat at
|
||||
* Facilisis in pretium nisl aliquet
|
||||
- Nulla volutpat aliquam velit
|
||||
- Very easy!
|
||||
|
||||
Ordered
|
||||
|
||||
1. Lorem ipsum dolor sit amet
|
||||
2. Consectetur adipiscing elit
|
||||
3. Integer molestie lorem at massa
|
||||
|
||||
1) You can use sequential numbers...
|
||||
1) ...or keep all the numbers as `1.`
|
||||
|
||||
Start numbering with offset:
|
||||
|
||||
57. foo
|
||||
1. bar
|
||||
|
||||
## Code
|
||||
|
||||
Inline `code`
|
||||
|
||||
Indented code
|
||||
|
||||
// Some comments
|
||||
line 1 of code
|
||||
line 2 of code
|
||||
line 3 of code
|
||||
|
||||
Block code "fences"
|
||||
|
||||
```
|
||||
Sample text here...
|
||||
```
|
||||
|
||||
Syntax highlighting
|
||||
|
||||
```js
|
||||
var foo = function(bar) {
|
||||
return bar++;
|
||||
};
|
||||
|
||||
console.log(foo(5));
|
||||
```
|
||||
|
||||
## Tables
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ------------------------------------------------------------------------- |
|
||||
| data | path to data files to supply the data that will be passed into templates. |
|
||||
| engine | engine to be used for processing templates. Handlebars is the default. |
|
||||
| ext | extension to be used for dest files. |
|
||||
|
||||
Right aligned columns
|
||||
|
||||
| Option | Description |
|
||||
| -----: | ------------------------------------------------------------------------: |
|
||||
| data | path to data files to supply the data that will be passed into templates. |
|
||||
| engine | engine to be used for processing templates. Handlebars is the default. |
|
||||
| ext | extension to be used for dest files. |
|
||||
|
||||
## Links
|
||||
|
||||
[link text](http://dev.nodeca.com)
|
||||
|
||||
[link with title](http://nodeca.github.io/pica/demo/ 'title text!')
|
||||
|
||||
Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
|
||||
|
||||
## Images
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user