@@ -100,4 +123,7 @@ storiesOf('LabeledField', module)
)
- })
+ },
+
+ name: 'with custom error',
+}
diff --git a/stories/indicators/flash-message-container.story.js b/stories/indicators/flash-message-container.story.js
index 29b3ef6f..dbc7a288 100644
--- a/stories/indicators/flash-message-container.story.js
+++ b/stories/indicators/flash-message-container.story.js
@@ -1,5 +1,4 @@
import React from 'react'
-import { storiesOf } from '@storybook/react'
import { FlashMessageContainer } from 'src'
const successMessage = {
@@ -15,15 +14,27 @@ const failureMessage = {
props: {},
}
-storiesOf('FlashMessageContainer', module)
- .add('with one message', () => (
-
- ))
- .add('with many messages', () => (
+export default {
+ title: 'FlashMessageContainer',
+}
+
+export const WithOneMessage = {
+ render: () => ,
+
+ name: 'with one message',
+}
+
+export const WithManyMessages = {
+ render: () => (
- ))
- .add('with no messages (blank)', () => (
-
- ))
+ ),
+
+ name: 'with many messages',
+}
+
+export const WithNoMessagesBlank = {
+ render: () => ,
+ name: 'with no messages (blank)',
+}
diff --git a/stories/indicators/flash-message.story.js b/stories/indicators/flash-message.story.js
index b88e7cec..9a3585ab 100644
--- a/stories/indicators/flash-message.story.js
+++ b/stories/indicators/flash-message.story.js
@@ -1,11 +1,25 @@
import React from 'react'
-import { storiesOf } from '@storybook/react'
import { action } from '@storybook/addon-actions'
import { FlashMessage } from 'src'
-storiesOf('FlashMessage', module)
- .add('success', () => Success!)
- .add('failure', () => Failure!)
- .add('dismissable', () => (
+export default {
+ title: 'FlashMessage',
+}
+
+export const Success = {
+ render: () => Success!,
+ name: 'success',
+}
+
+export const Failure = {
+ render: () => Failure!,
+ name: 'failure',
+}
+
+export const Dismissable = {
+ render: () => (
Success!
- ))
+ ),
+
+ name: 'dismissable',
+}
diff --git a/stories/indicators/loading-container.story.js b/stories/indicators/loading-container.story.js
index 5d103321..e5ef30d0 100644
--- a/stories/indicators/loading-container.story.js
+++ b/stories/indicators/loading-container.story.js
@@ -1,19 +1,30 @@
import React from 'react'
-import { storiesOf } from '@storybook/react'
import { LoadingContainer } from 'src'
-storiesOf('LoadingContainer', module)
- .add('is loading', () => (
+export default {
+ title: 'LoadingContainer',
+}
+
+export const IsLoading = {
+ render: () => (
- ))
- .add('is not loading', () => (
+ ),
+
+ name: 'is loading',
+}
+
+export const IsNotLoading = {
+ render: () => (
This text IS NOT loading.
- ))
+ ),
+
+ name: 'is not loading',
+}
diff --git a/stories/indicators/spinner.story.js b/stories/indicators/spinner.story.js
index 784d9740..a5f2e6ec 100644
--- a/stories/indicators/spinner.story.js
+++ b/stories/indicators/spinner.story.js
@@ -1,5 +1,11 @@
import React from 'react'
-import { storiesOf } from '@storybook/react'
import { Spinner } from 'src'
-storiesOf('Spinner', module).add('default', () => )
+export default {
+ title: 'Spinner',
+}
+
+export const Default = {
+ render: () => ,
+ name: 'default',
+}
diff --git a/stories/modal.story.js b/stories/modal.story.js
index 91a98b1c..d0ac8d9e 100644
--- a/stories/modal.story.js
+++ b/stories/modal.story.js
@@ -1,9 +1,12 @@
import React, { useState } from 'react'
-import { storiesOf } from '@storybook/react'
import { Modal } from 'src'
-storiesOf('Modal', module)
- .add('default', () => {
+export default {
+ title: 'Modal',
+}
+
+export const Default = {
+ render: () => {
const [modalShown, setModalShown] = useState(true)
return (
@@ -15,8 +18,13 @@ storiesOf('Modal', module)
)
- })
- .add('with close prevented', () => {
+ },
+
+ name: 'default',
+}
+
+export const WithClosePrevented = {
+ render: () => {
const [modalShown, setModalShown] = useState(true)
return (
@@ -28,8 +36,13 @@ storiesOf('Modal', module)
)
- })
- .add('with custom class name configuration', () => {
+ },
+
+ name: 'with close prevented',
+}
+
+export const WithCustomClassNameConfiguration = {
+ render: () => {
const [modalShown, setModalShown] = useState(true)
return (
@@ -48,4 +61,7 @@ storiesOf('Modal', module)
)
- })
+ },
+
+ name: 'with custom class name configuration',
+}
diff --git a/stories/tables/sortable-table.story.js b/stories/tables/sortable-table.story.js
index a6c2df4a..0c107124 100644
--- a/stories/tables/sortable-table.story.js
+++ b/stories/tables/sortable-table.story.js
@@ -1,5 +1,4 @@
import React from 'react'
-import { storiesOf } from '@storybook/react'
import { lowerCase } from 'lodash'
import { SortableTable, TableColumn as Column, compareAtPath } from 'src'
@@ -51,15 +50,24 @@ function compareCustomValue(a, b) {
return ageA > ageB ? 1 : -1
}
-storiesOf('SortableTable', module)
- .add('default', () => (
+export default {
+ title: 'SortableTable',
+}
+
+export const Default = {
+ render: () => (
- ))
- .add('with initial column', () => (
+ ),
+
+ name: 'default',
+}
+
+export const WithInitialColumn = {
+ render: () => (
Table is sorted by "age" by default.
@@ -68,8 +76,13 @@ storiesOf('SortableTable', module)
- ))
- .add('with initial column sorted descending', () => (
+ ),
+
+ name: 'with initial column',
+}
+
+export const WithInitialColumnSortedDescending = {
+ render: () => (
Table is sorted (descending) by "age" by default.
- ))
- .add('with custom labels', () => (
+ ),
+
+ name: 'with initial column sorted descending',
+}
+
+export const WithCustomLabels = {
+ render: () => (
- ))
- .add('with custom cell component', () => (
+ ),
+
+ name: 'with custom labels',
+}
+
+export const WithCustomCellComponent = {
+ render: () => (
- ))
- .add(
- 'with additional valid DOM properties on cell component (per column)',
- () => (
-
-
-
-
-
- )
- )
- .add('with custom cell component and its row data', () => (
+ ),
+
+ name: 'with custom cell component',
+}
+
+export const WithAdditionalValidDomPropertiesOnCellComponentPerColumn = {
+ render: () => (
+
+
+
+
+
+ ),
+
+ name: 'with additional valid DOM properties on cell component (per column)',
+}
+
+export const WithCustomCellComponentAndItsRowData = {
+ render: () => (
- ))
- .add('with custom row component', () => (
+ ),
+
+ name: 'with custom cell component and its row data',
+}
+
+export const WithCustomRowComponent = {
+ render: () => (
- ))
- .add('with custom header component', () => (
+ ),
+
+ name: 'with custom row component',
+}
+
+export const WithCustomHeaderComponent = {
+ render: () => (
- ))
- .add('with column-specific custom header component', () => (
+ ),
+
+ name: 'with custom header component',
+}
+
+export const WithColumnSpecificCustomHeaderComponent = {
+ render: () => (
- ))
- .add('with disabled column', () => (
+ ),
+
+ name: 'with column-specific custom header component',
+}
+
+export const WithDisabledColumn = {
+ render: () => (
The "age" column is disabled and will not sort.
@@ -144,15 +194,25 @@ storiesOf('SortableTable', module)
- ))
- .add('with formatted column values', () => (
+ ),
+
+ name: 'with disabled column',
+}
+
+export const WithFormattedColumnValues = {
+ render: () => (
val.toFixed(1)} />
(val === 'yes' ? 'Y' : 'N')} />
- ))
- .add('with custom value getter', () => (
+ ),
+
+ name: 'with formatted column values',
+}
+
+export const WithCustomValueGetter = {
+ render: () => (
"Name And Age" column combines name and age values
@@ -162,8 +222,13 @@ storiesOf('SortableTable', module)
- ))
- .add('with custom value getter and custom sorter', () => (
+ ),
+
+ name: 'with custom value getter',
+}
+
+export const WithCustomValueGetterAndCustomSorter = {
+ render: () => (
"Name and Age" column combines name and age, sorted by age portion
@@ -179,8 +244,13 @@ storiesOf('SortableTable', module)
/>
- ))
- .add('with custom value getter, custom sorter, initial column', () => (
+ ),
+
+ name: 'with custom value getter and custom sorter',
+}
+
+export const WithCustomValueGetterCustomSorterInitialColumn = {
+ render: () => (
"Name and Age" column combines name and age, sorted by age portion,
@@ -197,4 +267,7 @@ storiesOf('SortableTable', module)
/>
- ))
+ ),
+
+ name: 'with custom value getter, custom sorter, initial column',
+}
diff --git a/stories/tables/table.story.js b/stories/tables/table.story.js
index 49e50856..ba751340 100644
--- a/stories/tables/table.story.js
+++ b/stories/tables/table.story.js
@@ -1,5 +1,4 @@
import React from 'react'
-import { storiesOf } from '@storybook/react'
import { Table, TableColumn as Column } from 'src'
const tableData = [
@@ -14,36 +13,60 @@ function CustomCell({ value }) {
return