diff --git a/code/ui/.storybook/main.ts b/code/ui/.storybook/main.ts
index 373bd92a783..4883607b912 100644
--- a/code/ui/.storybook/main.ts
+++ b/code/ui/.storybook/main.ts
@@ -11,7 +11,7 @@ const config: StorybookConfig = {
},
{
directory: '../components/src/**/',
- files: '@(Button|Badge|brand|form)/*.stories.@(js|jsx|ts|tsx|mdx)',
+ files: 'syntaxhighlighter/*.stories.@(js|jsx|ts|tsx|mdx)',
titlePrefix: 'Components',
},
// '../components/src/**/*.stories.@(js|jsx|ts|tsx|mdx)',
diff --git a/code/ui/components/src/spaced/Spaced.stories.tsx b/code/ui/components/src/spaced/Spaced.stories.tsx
index 6f3ef7b8065..edb8ad45e16 100644
--- a/code/ui/components/src/spaced/Spaced.stories.tsx
+++ b/code/ui/components/src/spaced/Spaced.stories.tsx
@@ -14,59 +14,51 @@ const PlaceholderInline = styled.span(({ color }) => ({
padding: 20,
}));
-storiesOf('Basics/Spaced', module)
- .add('row', () => (
+export default {
+ title: 'Basics/Spaced',
+ component: Spaced,
+};
+
+export const Default = (args) => (
+
+);
+
+export const Column = {
+ render: (args) => (
- ))
- .add('row outer', () => (
-
- ))
- .add('row multiply', () => (
-
- ))
- .add('col', () => (
+ ),
+};
+export const Row = {
+ render: (args) => (
- ))
- .add('col outer', () => (
-
- ));
+ ),
+ argTypes: {
+ col: {
+ defaultValue: 1,
+ },
+ },
+};
diff --git a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx
index 7ebf87a91eb..fc7629b230d 100644
--- a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx
+++ b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx
@@ -1,212 +1,231 @@
import * as React from 'react';
-import { storiesOf } from '@storybook/react';
import { ThemeProvider, themes, ensure } from '@storybook/theming';
import { SyntaxHighlighter } from './lazy-syntaxhighlighter';
-storiesOf('Basics/SyntaxHighlighter', module)
- .add('bash', () => (
-
- npx npm-check-updates '/storybook/' -u && npm install
-
- ))
- .add('css', () => (
-
- {`
- .className {
- border: 1px solid hotpink;
- }
- `}
-
- ))
- .add('json', () => (
-
- {`
- {
+export default {
+ title: 'Basics/SyntaxHighlighter',
+ component: SyntaxHighlighter,
+};
+
+export const JS = {
+ args: {
+ language: 'js',
+ children: `import React, { createElement } from 'react';
+import { Good, Things } from 'life';
+
+const result = () => createElement(Good, [createElement(Things, [], { all: true }), []);
+
+console.log(result);
+export { result as default };`,
+ },
+};
+
+export const Default = JS;
+
+export const Bash = {
+ args: {
+ language: 'bash',
+ children: `npx npm-check-updates ' / storybook / ' -u && npm install`,
+ },
+};
+
+export const CSS = {
+ args: {
+ language: 'css',
+ children: `.className {
+ border: 1px solid hotpink;
+ }`,
+ },
+};
+
+export const JSON = {
+ args: {
+ language: 'json',
+ children: `{
"number": 1,
"string": "something",
"object": {
"property": "value",
},
array: [1,2,3],
+ }`,
+ },
+};
+
+export const Markdown = {
+ args: {
+ language: 'markdown',
+ children: `
+# a big header
+
+some code:
+
+\`\`\`js
+const name = "a string";
+\`\`\`
+
+> crazy`,
+ },
+};
+
+export const Yaml = {
+ args: {
+ language: 'yaml',
+ children: `
+ product:
+ - sku: BL394D
+ quantity: 4
+ description: Basketball
+ price: 450.00
+`,
+ },
+};
+
+export const JSX = {
+ args: {
+ language: 'jsx',
+ children: `import { Good, Things } from 'life';
+
+ const result = () => ;
+
+ export { result as default };
+`,
+ },
+};
+
+export const GraphQL = {
+ args: {
+ language: 'graphql',
+ children: `query HeroNameAndFriends($episode: Episode) {
+ hero(episode: $episode) {
+ name
+ friends {
+ name
}
- `}
-
- ))
- .add('markdown', () => (
-
- {`
- # a big header
+ }
+ }
+`,
+ },
+};
- some code:
-
- ~~~js
- const name = "a string";
- ~~~
-
- > crazy
-
- `}
-
- ))
- .add('yaml', () => (
-
- {`
- product:
- - sku : BL394D
- quantity : 4
- description : Basketball
- price : 450.00
- `}
-
- ))
- .add('jsx', () => (
-
- {`import { Good, Things } from 'life';
-
- const result = () => ;
-
- export { result as default };
- `}
-
- ))
- .add('js', () => (
-
- {`import React, { createElement } from 'react';
- import { Good, Things } from 'life';
-
- const result = () => createElement(Good, [createElement(Things, [], { all: true }), []);
-
- console.log(result);
-
- export { result as default };
- `}
-
- ))
- .add('graphql', () => (
-
- {`query HeroNameAndFriends($episode: Episode) {
- hero(episode: $episode) {
- name
- friends {
- name
- }
- }
- }
- `}
-
- ))
- .add('unsupported', () => (
-
- {`
- // A Hello World! program in C#.
- using System;
- namespace HelloWorld
+export const Unsupported = {
+ args: {
+ language: 'C#',
+ children: `// A Hello World! program in C#.
+ using System;
+ namespace HelloWorld
+ {
+ class Hello
+ {
+ static void Main()
{
- class Hello
- {
- static void Main()
- {
- Console.WriteLine("Hello World!");
+ Console.WriteLine("Hello World!");
- // Keep the console window open in debug mode.
- Console.WriteLine("Press any key to exit.");
- Console.ReadKey();
- }
- }
+ // Keep the console window open in debug mode.
+ Console.WriteLine("Press any key to exit.");
+ Console.ReadKey();
}
- `}
-
- ))
- .add('dark unsupported', () => {
- const theme = ensure(themes.dark);
- return (
-
-
- {`
- // A Hello World! program in C#.
- using System;
- namespace HelloWorld
- {
- class Hello
- {
- static void Main()
- {
- Console.WriteLine("Hello World!");
+ }
+ }`,
+ },
+};
- // Keep the console window open in debug mode.
- Console.WriteLine("Press any key to exit.");
- Console.ReadKey();
- }
- }
- }
- `}
-
-
- );
- })
- .add('story', () => (
-
- {`
- import React from 'react';
- import { storiesOf } from '@storybook/react';
- import { styled } from '@storybook/theming';
+export const UnsupportedDark = {
+ args: {
+ language: 'C#',
+ children: `// A Hello World! program in C#.
+ using System;
+ namespace HelloWorld
+ {
+ class Hello
+ {
+ static void Main()
+ {
+ Console.WriteLine("Hello World!");
- import Heading from './heading';
+ // Keep the console window open in debug mode.
+ Console.WriteLine("Press any key to exit.");
+ Console.ReadKey();
+ }
+ }
+ }`,
+ },
+ render: (args) => (
+
+
+
+ ),
+};
- const Holder = styled.div({
- margin: 10,
- border: '1px dashed deepskyblue',
- // overflow: 'hidden',
- });
+export const Story = {
+ args: {
+ language: 'jsx',
+ children: `import React from 'react';
+ import { storiesOf } from '@storybook/react';
+ import { styled } from '@storybook/theming';
- storiesOf('Basics|Heading', module).add('types', () => (
-
-
- DEFAULT WITH ALL CAPS
-
-
- THIS LONG DEFAULT WITH ALL CAPS & SUB
-
-
- page type
-
-
-
- page type
-
-
-
- ));
- `}
-
- ))
- .add('bordered & copy-able', () => (
-
- {`import { Good, Things } from 'life';
+ import Heading from './heading';
- const result = () => ;
+ const Holder = styled.div({
+ margin: 10,
+ border: '1px dashed deepskyblue',
+ // overflow: 'hidden',
+ });
- export { result as default };
- `}
-
- ))
- .add('padded', () => (
-
- {`import { Good, Things } from 'life';
+ storiesOf('Basics|Heading', module).add('types', () => (
+
+
+ DEFAULT WITH ALL CAPS
+
+
+ THIS LONG DEFAULT WITH ALL CAPS & SUB
+
+
+ page type
+
+
+
+ page type
+
+
+
+ ));`,
+ },
+};
- const result = () => ;
+export const BorderedCopyable = {
+ args: {
+ copyable: true,
+ bordered: true,
+ language: 'jsx',
+ children: `import { Good, Things } from 'life';
- export { result as default };
- `}
-
- ))
- .add('showLineNumbers', () => (
-
- {`import { Good, Things } from 'life';
+ const result = () => ;
- const result = () => ;
+ export { result as default };`,
+ },
+};
- export { result as default };
- `}
-
- ));
+export const Padded = {
+ args: {
+ padded: true,
+ language: 'jsx',
+ children: `import { Good, Things } from 'life';
+
+ const result = () => ;
+
+ export { result as default };`,
+ },
+};
+
+export const ShowLineNumbers = {
+ args: {
+ showLineNumbers: true,
+ language: 'jsx',
+ children: `import { Good, Things } from 'life';
+
+ const result = () => ;
+
+ export { result as default };`,
+ },
+};