@storybook/components 6.5.0-alpha.23 → 6.5.0-alpha.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -11,5 +11,5 @@ export declare class ZoomIFrame extends Component<IZoomIFrameProps> {
11
11
  shouldComponentUpdate(nextProps: IZoomIFrameProps): boolean;
12
12
  setIframeInnerZoom(scale: number): void;
13
13
  setIframeZoom(scale: number): void;
14
- render(): ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> & string) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> & number) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> & false) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> & true) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> & ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)>) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> & import("react").ReactNodeArray) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> & import("react").ReactPortal);
14
+ render(): ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> & string) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> & number) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> & false) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> & true) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> & ReactElement<any, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)>) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> & import("react").ReactNodeArray) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> & import("react").ReactPortal);
15
15
  }
@@ -1,5 +1,5 @@
1
1
  import { ElementType, FunctionComponent } from 'react';
2
- import { Parameters } from '@storybook/api';
2
+ import { Parameters } from '@storybook/csf';
3
3
  export declare enum StoryError {
4
4
  NO_STORY = "No component or story to display"
5
5
  }
@@ -11,5 +11,5 @@ export declare class ZoomIFrame extends Component<IZoomIFrameProps> {
11
11
  shouldComponentUpdate(nextProps: IZoomIFrameProps): boolean;
12
12
  setIframeInnerZoom(scale: number): void;
13
13
  setIframeZoom(scale: number): void;
14
- render(): ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> & string) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> & number) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> & false) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> & true) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> & ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)>) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> & import("react").ReactNodeArray) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> & import("react").ReactPortal);
14
+ render(): ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> & string) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> & number) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> & false) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> & true) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> & ReactElement<any, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)>) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> & import("react").ReactNodeArray) | (ReactElement<HTMLIFrameElement, string | ((props: any) => ReactElement<any, any>) | (new (props: any) => Component<any, any, any>)> & import("react").ReactPortal);
15
15
  }
@@ -1,5 +1,5 @@
1
1
  import { ElementType, FunctionComponent } from 'react';
2
- import type { Parameters } from '@storybook/api';
2
+ import type { Parameters } from '@storybook/csf';
3
3
  export declare enum StoryError {
4
4
  NO_STORY = "No component or story to display"
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storybook/components",
3
- "version": "6.5.0-alpha.23",
3
+ "version": "6.5.0-alpha.27",
4
4
  "description": "Core Storybook Components",
5
5
  "keywords": [
6
6
  "storybook"
@@ -41,9 +41,9 @@
41
41
  },
42
42
  "dependencies": {
43
43
  "@popperjs/core": "^2.6.0",
44
- "@storybook/client-logger": "6.5.0-alpha.23",
44
+ "@storybook/client-logger": "6.5.0-alpha.27",
45
45
  "@storybook/csf": "0.0.2--canary.87bc651.0",
46
- "@storybook/theming": "6.5.0-alpha.23",
46
+ "@storybook/theming": "6.5.0-alpha.27",
47
47
  "@types/color-convert": "^2.0.0",
48
48
  "@types/overlayscrollbars": "^1.12.0",
49
49
  "@types/react-syntax-highlighter": "11.0.5",
@@ -77,6 +77,6 @@
77
77
  "publishConfig": {
78
78
  "access": "public"
79
79
  },
80
- "gitHead": "0006ec45ff04e42229dbee92cc49764699477e1b",
80
+ "gitHead": "2532ee915bc340aa4e1ca0f13afe5bc190f9903e",
81
81
  "sbmodern": "dist/modern/index.js"
82
82
  }
@@ -1,125 +0,0 @@
1
- import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
2
-
3
- import { themes, ThemeProvider, convert, ensure } from '@storybook/theming';
4
-
5
- import { SideBySide } from './SideBySide';
6
-
7
- <Meta title="Basics/ColorPalette" />
8
-
9
- <SideBySide>
10
- <div style={{background: '#202020' }}>
11
- <ThemeProvider theme={ensure(themes.dark)}>
12
-
13
- Dark theme Colors
14
-
15
- <ColorPalette>
16
- {Object.entries(convert(themes.dark).color).map(([k, v]) => {
17
- if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
18
- return <ColorItem key={k} title={k} colors={{ [k]: v }} />;
19
- } else if (typeof v === 'object') {
20
- return (
21
- <ColorItem
22
- key={k}
23
- title={k}
24
- colors={Object.entries(v).reduce(
25
- (acc, [key, value]) =>
26
- typeof value === 'string' &&
27
- (value.match(/^#/) || value.match(/^rgb/) || key.match(/color/i))
28
- ? { ...acc, [key]: value }
29
- : acc,
30
- {}
31
- )}
32
- />
33
- );
34
- }
35
- return null;
36
- })}
37
- </ColorPalette>
38
-
39
- Dark theme Backgrounds
40
-
41
- <ColorPalette>
42
- {Object.entries(convert(themes.dark).background).map(([k,v]) => {
43
- if(k === 'color'){
44
- return null
45
- }
46
- if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
47
- return (
48
- <ColorItem
49
- key={k}
50
- title={k}
51
- colors={{ [k]: v }}
52
- />
53
- );
54
- } else if (typeof v === 'object') {
55
- const colors = Object.entries(v).reduce((acc, [key, value]) => (typeof value === 'string' && (value.match(/^#/) || value.match(/^rgb/) || key.match(/color/i))) ? {...acc, [key]: value} : acc, {});
56
- return (
57
- <ColorItem
58
- key={k}
59
- title={k}
60
- colors={colors}
61
- />
62
- );
63
- }
64
- return null;
65
- })}
66
- </ColorPalette>
67
- </ThemeProvider></div>
68
- <div styles={{ background: '#eeeeee'}}>
69
-
70
- Light theme Colors
71
-
72
- <ColorPalette>
73
- {Object.entries(convert(themes.light).color).map(([k, v]) => {
74
- if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
75
- return <ColorItem key={k} title={k} colors={{ [k]: v }} />;
76
- } else if (typeof v === 'object') {
77
- return (
78
- <ColorItem
79
- key={k}
80
- title={k}
81
- colors={Object.entries(v).reduce(
82
- (acc, [key, value]) =>
83
- typeof value === 'string' &&
84
- (value.match(/^#/) || value.match(/^rgb/) || key.match(/color/i))
85
- ? { ...acc, [key]: value }
86
- : acc,
87
- {}
88
- )}
89
- />
90
- );
91
- }
92
- return null;
93
- })}
94
- </ColorPalette>
95
-
96
- Light theme Backgrounds
97
-
98
- <ColorPalette>
99
- {Object.entries(convert(themes.light).background).map(([k,v]) => {
100
- if(k === 'color'){
101
- return null
102
- }
103
- if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
104
- return (
105
- <ColorItem
106
- key={k}
107
- title={k}
108
- colors={{ [k]: v }}
109
- />
110
- );
111
- } else if (typeof v === 'object') {
112
- const colors = Object.entries(v).reduce((acc, [key, value]) => (typeof value === 'string' && (value.match(/^#/) || value.match(/^rgb/) || key.match(/color/i))) ? {...acc, [key]: value} : acc, {});
113
- return (
114
- <ColorItem
115
- key={k}
116
- title={k}
117
- colors={colors}
118
- />
119
- );
120
- }
121
- return null;
122
- })}
123
- </ColorPalette>
124
- </div>
125
- </SideBySide>
@@ -1,92 +0,0 @@
1
- # My Example Markdown
2
-
3
- The group looked like tall, exotic grazing animals, swaying gracefully and unconsciously with the movement of the train, their high heels like polished hooves against the gray metal of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses.
4
-
5
- ![An image](http://place-hold.it/350x150)
6
-
7
- He stared at the clinic, Molly took him to the Tank War, mouth touched with hot gold as a gliding cursor struck sparks from the wall of a skyscraper canyon. Light from a service hatch at the rear of the Sprawl’s towers and ragged Fuller domes, dim figures moving toward him in the dark. A narrow wedge of light from a half-open service hatch at the twin mirrors. Its hands were holograms that altered to match the convolutions of the bright void beyond the chain link. Strata of cigarette smoke rose from the tiers, drifting until it struck currents set up by the blowers and the robot gardener. Still it was a steady pulse of pain midway down his spine. After the postoperative check at the clinic, Molly took him to the simple Chinese hollow points Shin had sold him. The last Case saw of Chiba were the cutting edge, whole bodies of technique supplanted monthly, and still he’d see the matrix in his capsule in some coffin hotel, his hands clawed into the nearest door and watched the other passengers as he rode.
8
-
9
- ## Typography
10
-
11
- # H1
12
-
13
- ## H2
14
-
15
- ### H3
16
-
17
- #### H4
18
-
19
- ##### H5
20
-
21
- ###### H6
22
-
23
- Emphasis, aka italics, with _asterisks_ or _underscores_.
24
-
25
- Strong emphasis, aka bold, with **asterisks** or **underscores**.
26
-
27
- Combined emphasis with **asterisks and _underscores_**.
28
-
29
- Strikethrough uses two tildes. ~~Scratch this.~~
30
-
31
- Maybe include a [link](http://storybook.js.org) to your project as well.
32
-
33
- ## Block quote
34
-
35
- How about a block quote to spice things up?
36
-
37
- > In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals („Common Equity Tier 1“, CET1) einhalten müssen. Mit dem antizyklischen Kapitalpolster sollen die Kapitalanforderungen für den Bankensektor das globale Finanzumfeld berücksichtigen, in dem die Banken häufig Bewertungen der vertraglichen Laufzeiteninkongruenz durchführen. In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals am gesamten Eigenkapital. Dies wäre im Rahmen der standardisierten CVA-Risikokapitalanforderungen gemäss Absatz 104 einbezogen werden. Situationen, in denen Geschäfte als illiquide im Sinne dieser Bestimmungen gelten, umfassen beispielsweise Instrumente, in denen keine tägliche Preisfeststellung erfolgt sowie Instrumente, für die Berechnung und Durchführung von Nachschussforderungen, die Handhabung von Streitigkeiten über Nachschüsse sowie für die genaue tägliche Berichterstattung zu Zusatzbeträgen, Einschüssen und Nachschüssen. In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals („Common Equity Tier 1“, CET1) einhalten müssen. Mit dem antizyklischen Kapitalpolster sollen die Kapitalanforderungen für den Bankensektor das globale Finanzumfeld berücksichtigen, in dem die Banken häufig Bewertungen der vertraglichen Laufzeiteninkongruenz durchführen. Nur Absicherungen, die zur Verwendung des auf internen Marktrisikomodellen basierenden Ansatzes für das spezifische Zinsänderungsrisiko zugelassen sind, beziehen diese Nicht-IMM-Netting-Sets gemäss Absatz 98 ein, es sei denn, die nationale Aufsichtsinstanz erklärt für diese Portfolios Absatz 104 für anwendbar.
38
-
39
- ## Lists
40
-
41
- Mixed list:
42
-
43
- 1. First ordered list item
44
- 2. Another item
45
- - Unordered sub-list.
46
- 3. Actual numbers don't matter, just that it's a number
47
- 1. Ordered sub-list
48
- 2. Yo ho ho
49
- 4. And another item.
50
-
51
- Bullet list:
52
-
53
- - Whatever
54
- - This is getting
55
- - Very ...
56
- - Very ...
57
- - Tedious!
58
- - It's getting late, nothing to see here
59
-
60
- Numbered:
61
-
62
- 1. You get the idea
63
- 2. You still get the idea
64
- 3. You really get the idea
65
- 4. I'm done
66
-
67
- ## Tables
68
-
69
- A basic table:
70
-
71
- | Tables | Are | Cool |
72
- | ------------- | :-----------: | -----: |
73
- | col 3 is | right-aligned | \$1600 |
74
- | col 2 is | centered | \$12 |
75
- | zebra stripes | are neat | \$1 |
76
-
77
- Let's throw in a crazy table, because why not?
78
-
79
- | | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Mithril](app/mithril) | [HTML](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) |
80
- | --------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: |
81
- | [a11y](addons/a11y) | + | | + | + | + | + | + | | | + | + |
82
- | [actions](addons/actions) | + | + | + | + | + | + | + | + | + | + | + |
83
- | [backgrounds](addons/backgrounds) | + | \* | + | + | + | + | + | + | + | + | + |
84
- | [centered](addons/centered) | + | | + | + | + | + | | + | | + | + |
85
-
86
- ## Code
87
-
88
- Sometimes you might want to manually include some \`code\` examples? Let's do it.
89
-
90
- ```js
91
- const Button = () => <button />;
92
- ```
@@ -1,92 +0,0 @@
1
- # My Example Markdown
2
-
3
- The group looked like tall, exotic grazing animals, swaying gracefully and unconsciously with the movement of the train, their high heels like polished hooves against the gray metal of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses.
4
-
5
- ![An image](http://place-hold.it/350x150)
6
-
7
- He stared at the clinic, Molly took him to the Tank War, mouth touched with hot gold as a gliding cursor struck sparks from the wall of a skyscraper canyon. Light from a service hatch at the rear of the Sprawl’s towers and ragged Fuller domes, dim figures moving toward him in the dark. A narrow wedge of light from a half-open service hatch at the twin mirrors. Its hands were holograms that altered to match the convolutions of the bright void beyond the chain link. Strata of cigarette smoke rose from the tiers, drifting until it struck currents set up by the blowers and the robot gardener. Still it was a steady pulse of pain midway down his spine. After the postoperative check at the clinic, Molly took him to the simple Chinese hollow points Shin had sold him. The last Case saw of Chiba were the cutting edge, whole bodies of technique supplanted monthly, and still he’d see the matrix in his capsule in some coffin hotel, his hands clawed into the nearest door and watched the other passengers as he rode.
8
-
9
- ## Typography
10
-
11
- # H1
12
-
13
- ## H2
14
-
15
- ### H3
16
-
17
- #### H4
18
-
19
- ##### H5
20
-
21
- ###### H6
22
-
23
- Emphasis, aka italics, with _asterisks_ or _underscores_.
24
-
25
- Strong emphasis, aka bold, with **asterisks** or **underscores**.
26
-
27
- Combined emphasis with **asterisks and _underscores_**.
28
-
29
- Strikethrough uses two tildes. ~~Scratch this.~~
30
-
31
- Maybe include a [link](http://storybook.js.org) to your project as well.
32
-
33
- ## Block quote
34
-
35
- How about a block quote to spice things up?
36
-
37
- > In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals („Common Equity Tier 1“, CET1) einhalten müssen. Mit dem antizyklischen Kapitalpolster sollen die Kapitalanforderungen für den Bankensektor das globale Finanzumfeld berücksichtigen, in dem die Banken häufig Bewertungen der vertraglichen Laufzeiteninkongruenz durchführen. In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals am gesamten Eigenkapital. Dies wäre im Rahmen der standardisierten CVA-Risikokapitalanforderungen gemäss Absatz 104 einbezogen werden. Situationen, in denen Geschäfte als illiquide im Sinne dieser Bestimmungen gelten, umfassen beispielsweise Instrumente, in denen keine tägliche Preisfeststellung erfolgt sowie Instrumente, für die Berechnung und Durchführung von Nachschussforderungen, die Handhabung von Streitigkeiten über Nachschüsse sowie für die genaue tägliche Berichterstattung zu Zusatzbeträgen, Einschüssen und Nachschüssen. In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals („Common Equity Tier 1“, CET1) einhalten müssen. Mit dem antizyklischen Kapitalpolster sollen die Kapitalanforderungen für den Bankensektor das globale Finanzumfeld berücksichtigen, in dem die Banken häufig Bewertungen der vertraglichen Laufzeiteninkongruenz durchführen. Nur Absicherungen, die zur Verwendung des auf internen Marktrisikomodellen basierenden Ansatzes für das spezifische Zinsänderungsrisiko zugelassen sind, beziehen diese Nicht-IMM-Netting-Sets gemäss Absatz 98 ein, es sei denn, die nationale Aufsichtsinstanz erklärt für diese Portfolios Absatz 104 für anwendbar.
38
-
39
- ## Lists
40
-
41
- Mixed list:
42
-
43
- 1. First ordered list item
44
- 2. Another item
45
- - Unordered sub-list.
46
- 3. Actual numbers don't matter, just that it's a number
47
- 1. Ordered sub-list
48
- 2. Yo ho ho
49
- 4. And another item.
50
-
51
- Bullet list:
52
-
53
- - Whatever
54
- - This is getting
55
- - Very ...
56
- - Very ...
57
- - Tedious!
58
- - It's getting late, nothing to see here
59
-
60
- Numbered:
61
-
62
- 1. You get the idea
63
- 2. You still get the idea
64
- 3. You really get the idea
65
- 4. I'm done
66
-
67
- ## Tables
68
-
69
- A basic table:
70
-
71
- | Tables | Are | Cool |
72
- | ------------- | :-----------: | -----: |
73
- | col 3 is | right-aligned | \$1600 |
74
- | col 2 is | centered | \$12 |
75
- | zebra stripes | are neat | \$1 |
76
-
77
- Let's throw in a crazy table, because why not?
78
-
79
- | | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Mithril](app/mithril) | [HTML](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) |
80
- | --------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: |
81
- | [a11y](addons/a11y) | + | | + | + | + | + | + | | | + | + |
82
- | [actions](addons/actions) | + | + | + | + | + | + | + | + | + | + | + |
83
- | [backgrounds](addons/backgrounds) | + | \* | + | + | + | + | + | + | + | + | + |
84
- | [centered](addons/centered) | + | | + | + | + | + | | + | | + | + |
85
-
86
- ## Code
87
-
88
- Sometimes you might want to manually include some \`code\` examples? Let's do it.
89
-
90
- ```js
91
- const Button = () => <button />;
92
- ```
@@ -1,14 +0,0 @@
1
- Copyright (c) 2016 Oxyno-zeta (Havrileck Alexandre)
2
-
3
- Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
4
- documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
5
- rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
6
- persons to whom the Software is furnished to do so, subject to the following conditions:
7
-
8
- The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
9
- Software.
10
-
11
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
12
- WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
13
- COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
14
- OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
@@ -1,4 +0,0 @@
1
- declare module 'global';
2
- declare module 'markdown-to-jsx';
3
- declare module '*.md';
4
- declare module '@storybook/semver';
@@ -1,141 +0,0 @@
1
- # h1 Heading
2
-
3
- ## h2 Heading
4
-
5
- ### h3 Heading
6
-
7
- #### h4 Heading
8
-
9
- ##### h5 Heading
10
-
11
- ###### h6 Heading
12
-
13
- ## Typographic replacements
14
-
15
- Enable typographer option to see result.
16
-
17
- (c) (C) (r) (R) (tm) (TM) (p) (P) +-
18
-
19
- test.. test... test..... test?..... test!....
20
-
21
- !!!!!! ???? ,, -- ---
22
-
23
- "Smartypants, double quotes" and 'single quotes'
24
-
25
- ## Emphasis
26
-
27
- **This is bold text**
28
-
29
- **This is bold text**
30
-
31
- _This is italic text_
32
-
33
- _This is italic text_
34
-
35
- _**This is bold italic text**_
36
-
37
- ~~Strikethrough~~
38
-
39
- ## Blockquotes
40
-
41
- > Blockquotes can also be nested...
42
- >
43
- > > ...by using additional greater-than signs right next to each other...
44
- > >
45
- > > > ...or with spaces between arrows.
46
-
47
- ## Lists
48
-
49
- Unordered
50
-
51
- - Create a list by starting a line with `+`, `-`, or `*`
52
- - Sub-lists are made by indenting 2 spaces:
53
- - Marker character change forces new list start:
54
- - Ac tristique libero volutpat at
55
- * Facilisis in pretium nisl aliquet
56
- - Nulla volutpat aliquam velit
57
- - Hooray!
58
-
59
- Ordered
60
-
61
- 1. Lorem ipsum dolor sit amet
62
- 2. Consectetur adipiscing elit
63
- 3. Integer molestie lorem at massa
64
-
65
- 1) You can use sequential numbers...
66
- 1) ...or keep all the numbers as `1.`
67
-
68
- Start numbering with offset:
69
-
70
- 57. foo
71
- 1. bar
72
-
73
- ## Code
74
-
75
- Inline `code`
76
-
77
- Indented code
78
-
79
- // Some comments
80
- line 1 of code
81
- line 2 of code
82
- line 3 of code
83
-
84
- Block code "fences"
85
-
86
- ```
87
- Sample text here...
88
- ```
89
-
90
- Syntax highlighting
91
-
92
- ```js
93
- var foo = function(bar) {
94
- return bar++;
95
- };
96
-
97
- console.log(foo(5));
98
- ```
99
-
100
- ## Horizontal Rule
101
-
102
- ---
103
-
104
- ## Tables
105
-
106
- | Option | Description |
107
- | ------ | ------------------------------------------------------------------------- |
108
- | data | path to data files to supply the data that will be passed into templates. |
109
- | engine | engine to be used for processing templates. Handlebars is the default. |
110
- | ext | extension to be used for dest files. |
111
-
112
- Right aligned columns
113
-
114
- | Option | Description |
115
- | -----: | ------------------------------------------------------------------------: |
116
- | data | path to data files to supply the data that will be passed into templates. |
117
- | engine | engine to be used for processing templates. Handlebars is the default. |
118
- | ext | extension to be used for dest files. |
119
-
120
- ## Links
121
-
122
- [link text](http://dev.nodeca.com)
123
-
124
- [link with title](http://nodeca.github.io/pica/demo/ 'title text!')
125
-
126
- <!--lint disable no-literal-urls-->
127
- Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
128
- <!--lint enable no-literal-urls-->
129
-
130
- # [Link](https://storybook.js.org/) in heading
131
- ## [Link](https://storybook.js.org/) in heading
132
- ### [Link](https://storybook.js.org/) in heading
133
- #### [Link](https://storybook.js.org/) in heading
134
- ##### [Link](https://storybook.js.org/) in heading
135
- ###### [Link](https://storybook.js.org/) in heading
136
-
137
- ## Images
138
-
139
- ![Minion](https://octodex.github.com/images/minion.png)
140
- ![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg 'The Stormtroopocat')
141
-
@@ -1,75 +0,0 @@
1
- import { typography } from '@storybook/theming';
2
- import { Meta, Typeset } from '@storybook/addon-docs';
3
-
4
- export const fontSizes = ['l3', 'l2', 'l1', 'm3', 'm2', 'm1', 's3', 's2', 's1'].map(
5
- (size) => `${typography.size[size]}px`
6
- );
7
-
8
- export const sampleText =
9
- 'Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.';
10
-
11
- <Meta title="Basics/Typography" />
12
-
13
- ## Sans-serif
14
-
15
- ```
16
- font-family:
17
- "Nunito Sans",
18
- -apple-system,
19
- ".SFNSText-Regular",
20
- "San Francisco",
21
- BlinkMacSystemFont,
22
- "Segoe UI",
23
- "Helvetica Neue",
24
- Helvetica,
25
- Arial,
26
- sans-serif;
27
- ```
28
-
29
- <Typeset
30
- fontFamily={typography.fonts.base}
31
- fontSizes={fontSizes}
32
- fontWeight={typography.weight.regular}
33
- sampleText={sampleText}
34
- />
35
- <Typeset
36
- fontFamily={typography.fonts.base}
37
- fontSizes={fontSizes}
38
- fontWeight={typography.weight.bold}
39
- sampleText={sampleText}
40
- />
41
- <Typeset
42
- fontFamily={typography.fonts.base}
43
- fontSizes={fontSizes}
44
- fontWeight={typography.weight.black}
45
- sampleText={sampleText}
46
- />
47
-
48
- ## Monospace
49
-
50
- ```
51
- font-family:
52
- ui-monospace,
53
- Menlo,
54
- Monaco,
55
- "Roboto Mono",
56
- "Oxygen Mono",
57
- "Ubuntu Monospace",
58
- "Source Code Pro",
59
- "Droid Sans Mono",
60
- "Courier New",
61
- monospace;
62
- ```
63
-
64
- <Typeset
65
- fontFamily={typography.fonts.mono}
66
- fontSizes={fontSizes}
67
- fontWeight={typography.weight.regular}
68
- sampleText={sampleText}
69
- />
70
- <Typeset
71
- fontFamily={typography.fonts.mono}
72
- fontSizes={fontSizes}
73
- fontWeight={typography.weight.bold}
74
- sampleText={sampleText}
75
- />