diff --git a/app/javascript/CommentSubscription/__stories__/CommentSubscription.stories.jsx b/app/javascript/CommentSubscription/__stories__/CommentSubscription.stories.jsx
index 2c9da0149..49b16317b 100644
--- a/app/javascript/CommentSubscription/__stories__/CommentSubscription.stories.jsx
+++ b/app/javascript/CommentSubscription/__stories__/CommentSubscription.stories.jsx
@@ -27,9 +27,7 @@ export const Unsubscribed = () => (
   />
 );
 
-Unsubscribed.story = {
-  name: 'unsubscribed',
-};
+Unsubscribed.storyName = 'unsubscribed';
 
 export const Subscribed = () => (
   <CommentSubscription
@@ -42,9 +40,7 @@ export const Subscribed = () => (
   />
 );
 
-Subscribed.story = {
-  name: 'subscribed',
-};
+Subscribed.storyName = 'subscribed';
 
 export const SubscribedButNotDefault = () => (
   <CommentSubscription
@@ -57,6 +53,5 @@ export const SubscribedButNotDefault = () => (
   />
 );
 
-SubscribedButNotDefault.story = {
-  name: 'subscribed (with comment type other than the default',
-};
+SubscribedButNotDefault.storyName =
+  'subscribed (with comment type other than the default';
diff --git a/app/javascript/Search/__stories__/SearchForm.stories.jsx b/app/javascript/Search/__stories__/SearchForm.stories.jsx
index 7b1285e0c..4af9d51c5 100644
--- a/app/javascript/Search/__stories__/SearchForm.stories.jsx
+++ b/app/javascript/Search/__stories__/SearchForm.stories.jsx
@@ -30,17 +30,13 @@ export default {
 
 export const NoSearchTerm = () => <SearchForm {...commonProps} searchTerm="" />;
 
-NoSearchTerm.story = {
-  name: 'no search term',
-};
+NoSearchTerm.storyName = 'no search term';
 
 export const WithSearchTerm = () => (
   <SearchForm {...commonProps} searchTerm="Hello" />
 );
 
-WithSearchTerm.story = {
-  name: 'with search term',
-};
+WithSearchTerm.storyName = 'with search term';
 
 export const WithFocus = () => (
   <FocusedForm>
@@ -48,6 +44,4 @@ export const WithFocus = () => (
   </FocusedForm>
 );
 
-WithFocus.story = {
-  name: 'with focus',
-};
+WithFocus.storyName = 'with focus';
diff --git a/app/javascript/Snackbar/__stories__/Snackbar.stories.jsx b/app/javascript/Snackbar/__stories__/Snackbar.stories.jsx
index 5c8e5f5c8..9d3be4665 100644
--- a/app/javascript/Snackbar/__stories__/Snackbar.stories.jsx
+++ b/app/javascript/Snackbar/__stories__/Snackbar.stories.jsx
@@ -45,6 +45,5 @@ export const SimulateAddingSnackbarItems = () => {
   );
 };
 
-SimulateAddingSnackbarItems.story = {
-  name: 'simulating adding multiple snackbar items',
-};
+SimulateAddingSnackbarItems.storyName =
+  'simulating adding multiple snackbar items';
diff --git a/app/javascript/Snackbar/__stories__/SnackbarItem.stories.jsx b/app/javascript/Snackbar/__stories__/SnackbarItem.stories.jsx
index e3930eb91..068c4af04 100644
--- a/app/javascript/Snackbar/__stories__/SnackbarItem.stories.jsx
+++ b/app/javascript/Snackbar/__stories__/SnackbarItem.stories.jsx
@@ -10,9 +10,7 @@ export const JustAMessage = () => (
   <SnackbarItem message="File uploaded successfully" />
 );
 
-JustAMessage.story = {
-  name: 'message only',
-};
+JustAMessage.storyName = 'message only';
 
 export const WithOneAction = () => (
   <SnackbarItem
@@ -21,9 +19,7 @@ export const WithOneAction = () => (
   />
 );
 
-WithOneAction.story = {
-  name: 'with one action',
-};
+WithOneAction.storyName = 'with one action';
 
 export const WithActions = () => (
   <SnackbarItem
@@ -35,6 +31,4 @@ export const WithActions = () => (
   />
 );
 
-WithActions.story = {
-  name: 'with actions',
-};
+WithActions.storyName = 'with actions';
diff --git a/app/javascript/articles/__stories__/Article.stories.jsx b/app/javascript/articles/__stories__/Article.stories.jsx
index f2f5d656d..4c254f16b 100644
--- a/app/javascript/articles/__stories__/Article.stories.jsx
+++ b/app/javascript/articles/__stories__/Article.stories.jsx
@@ -32,9 +32,7 @@ export const DefaultArticle = () => (
   />
 );
 
-DefaultArticle.story = {
-  name: 'default',
-};
+DefaultArticle.storyName = 'default';
 
 export const IsFeatured = () => (
   <Article
@@ -46,9 +44,7 @@ export const IsFeatured = () => (
   />
 );
 
-IsFeatured.story = {
-  name: 'is featured',
-};
+IsFeatured.storyName = 'is featured';
 
 export const WithOrganization = () => (
   <Article
@@ -59,9 +55,7 @@ export const WithOrganization = () => (
   />
 );
 
-WithOrganization.story = {
-  name: 'with organization',
-};
+WithOrganization.storyName = 'with organization';
 
 export const WithFlareTag = () => (
   <Article
@@ -72,9 +66,7 @@ export const WithFlareTag = () => (
   />
 );
 
-WithFlareTag.story = {
-  name: 'with flare tag',
-};
+WithFlareTag.storyName = 'with flare tag';
 
 export const WithSnippetResult = () => (
   <Article
@@ -85,9 +77,7 @@ export const WithSnippetResult = () => (
   />
 );
 
-WithSnippetResult.story = {
-  name: 'with snippet result',
-};
+WithSnippetResult.storyName = 'with snippet result';
 
 export const WithReactions = () => (
   <Article
@@ -98,9 +88,7 @@ export const WithReactions = () => (
   />
 );
 
-WithReactions.story = {
-  name: 'with reactions',
-};
+WithReactions.storyName = 'with reactions';
 
 export const WithComments = () => (
   <Article
@@ -111,9 +99,7 @@ export const WithComments = () => (
   />
 );
 
-WithComments.story = {
-  name: 'with comments',
-};
+WithComments.storyName = 'with comments';
 
 export const OnReadingList = () => (
   <Article
@@ -124,6 +110,4 @@ export const OnReadingList = () => (
   />
 );
 
-OnReadingList.story = {
-  name: 'on reading list',
-};
+OnReadingList.storyName = 'on reading list';
diff --git a/app/javascript/articles/__stories__/LoadingArticle.stories.jsx b/app/javascript/articles/__stories__/LoadingArticle.stories.jsx
index 0291e8298..b1710853a 100644
--- a/app/javascript/articles/__stories__/LoadingArticle.stories.jsx
+++ b/app/javascript/articles/__stories__/LoadingArticle.stories.jsx
@@ -11,12 +11,8 @@ export default {
 
 export const DefaultArticle = () => <LoadingArticle />;
 
-DefaultArticle.story = {
-  name: 'default',
-};
+DefaultArticle.storyName = 'default';
 
 export const FeaturedLoading = () => <LoadingArticle version="featured" />;
 
-FeaturedLoading.story = {
-  name: 'featured',
-};
+FeaturedLoading.storyName = 'featured';
diff --git a/app/javascript/articles/__stories__/podcastArticle.stories.jsx b/app/javascript/articles/__stories__/podcastArticle.stories.jsx
index cd058561e..fa7bdff2a 100644
--- a/app/javascript/articles/__stories__/podcastArticle.stories.jsx
+++ b/app/javascript/articles/__stories__/podcastArticle.stories.jsx
@@ -35,9 +35,7 @@ export const Podcast = () => (
   />
 );
 
-Podcast.story = {
-  name: 'podcast',
-};
+Podcast.storyName = 'podcast';
 
 export const PodcastEpisode = () => (
   <Article
@@ -50,4 +48,4 @@ export const PodcastEpisode = () => (
   />
 );
 
-PodcastEpisode.story = { name: 'podcast episode' };
+PodcastEpisode.storyName = 'podcast episode';
diff --git a/app/javascript/articles/__stories__/userArticle.stories.jsx b/app/javascript/articles/__stories__/userArticle.stories.jsx
index 53d3d715c..cdf98b0e5 100644
--- a/app/javascript/articles/__stories__/userArticle.stories.jsx
+++ b/app/javascript/articles/__stories__/userArticle.stories.jsx
@@ -32,4 +32,4 @@ export const UserArticle = () => (
   />
 );
 
-UserArticle.story = { name: 'default' };
+UserArticle.storyName = 'default';
diff --git a/app/javascript/articles/__stories__/videoArticles.stories.jsx b/app/javascript/articles/__stories__/videoArticles.stories.jsx
index d727ef962..28d8b7546 100644
--- a/app/javascript/articles/__stories__/videoArticles.stories.jsx
+++ b/app/javascript/articles/__stories__/videoArticles.stories.jsx
@@ -34,7 +34,7 @@ export const Default = () => (
   />
 );
 
-Default.story = { name: 'default' };
+Default.storyName = 'default';
 
 export const VideoArticleWithFlareTag = () => (
   <Article
@@ -47,4 +47,4 @@ export const VideoArticleWithFlareTag = () => (
   />
 );
 
-VideoArticleWithFlareTag.story = { name: 'video with flare tag' };
+VideoArticleWithFlareTag.storyName = 'video with flare tag';
diff --git a/app/javascript/crayons/Button/__stories__/Button.stories.jsx b/app/javascript/crayons/Button/__stories__/Button.stories.jsx
index b1cf16605..873393582 100644
--- a/app/javascript/crayons/Button/__stories__/Button.stories.jsx
+++ b/app/javascript/crayons/Button/__stories__/Button.stories.jsx
@@ -86,9 +86,7 @@ export const Default = () => (
   </Button>
 );
 
-Default.story = {
-  name: 'Buttons',
-};
+Default.storyName = 'Buttons';
 
 export const ButtonWithIcon = () => {
   const Icon = () => (
@@ -162,6 +160,4 @@ export const ButtonWithIcon = () => {
   );
 };
 
-ButtonWithIcon.story = {
-  name: 'Buttons with Icon',
-};
+ButtonWithIcon.storyName = 'Buttons with Icon';
diff --git a/app/javascript/crayons/ButtonGroup/__stories__/ButtonGroup.stories.jsx b/app/javascript/crayons/ButtonGroup/__stories__/ButtonGroup.stories.jsx
index d718317f8..bfc951050 100644
--- a/app/javascript/crayons/ButtonGroup/__stories__/ButtonGroup.stories.jsx
+++ b/app/javascript/crayons/ButtonGroup/__stories__/ButtonGroup.stories.jsx
@@ -16,9 +16,7 @@ export const Default = () => {
   );
 };
 
-Default.story = {
-  name: 'Text buttons',
-};
+Default.storyName = 'Text buttons';
 
 export const TextIcon = () => {
   const Icon = () => (
@@ -40,6 +38,4 @@ export const TextIcon = () => {
   );
 };
 
-TextIcon.story = {
-  name: 'Text button + Icon',
-};
+TextIcon.storyName = 'Text button + Icon';
diff --git a/app/javascript/crayons/Dropdown/__stories__/Dropdown.stories.jsx b/app/javascript/crayons/Dropdown/__stories__/Dropdown.stories.jsx
index 7b016a6e0..689258f83 100644
--- a/app/javascript/crayons/Dropdown/__stories__/Dropdown.stories.jsx
+++ b/app/javascript/crayons/Dropdown/__stories__/Dropdown.stories.jsx
@@ -34,6 +34,4 @@ export const Default = () => (
   </div>
 );
 
-Default.story = {
-  name: 'default',
-};
+Default.storyName = 'default';
diff --git a/app/javascript/crayons/MarkdownToolbar/__stories__/MarkdownToolbar.stories.jsx b/app/javascript/crayons/MarkdownToolbar/__stories__/MarkdownToolbar.stories.jsx
index 406af206b..849a1e45c 100644
--- a/app/javascript/crayons/MarkdownToolbar/__stories__/MarkdownToolbar.stories.jsx
+++ b/app/javascript/crayons/MarkdownToolbar/__stories__/MarkdownToolbar.stories.jsx
@@ -25,6 +25,4 @@ export const Default = () => {
   );
 };
 
-Default.story = {
-  name: 'MarkdownToolbar',
-};
+Default.storyName = 'MarkdownToolbar';
diff --git a/app/javascript/crayons/MobileDrawer/__stories__/MobileDrawer.stories.jsx b/app/javascript/crayons/MobileDrawer/__stories__/MobileDrawer.stories.jsx
index 82b76a845..d25c52538 100644
--- a/app/javascript/crayons/MobileDrawer/__stories__/MobileDrawer.stories.jsx
+++ b/app/javascript/crayons/MobileDrawer/__stories__/MobileDrawer.stories.jsx
@@ -31,6 +31,4 @@ export const Default = () => {
   );
 };
 
-Default.story = {
-  name: 'MobileDrawer',
-};
+Default.storyName = 'MobileDrawer';
diff --git a/app/javascript/crayons/MultiInput/__stories__/MultiInput.stories.jsx b/app/javascript/crayons/MultiInput/__stories__/MultiInput.stories.jsx
index 785cfa6d8..aa6175702 100644
--- a/app/javascript/crayons/MultiInput/__stories__/MultiInput.stories.jsx
+++ b/app/javascript/crayons/MultiInput/__stories__/MultiInput.stories.jsx
@@ -43,6 +43,4 @@ Default.args = {
   showLabel: true,
 };
 
-Default.story = {
-  name: 'default',
-};
+Default.storyName = 'default';
diff --git a/app/javascript/crayons/MultiSelectAutocomplete/__stories__/MultiSelectAutocomplete.stories.jsx b/app/javascript/crayons/MultiSelectAutocomplete/__stories__/MultiSelectAutocomplete.stories.jsx
index c767d1d25..a6d8e065b 100644
--- a/app/javascript/crayons/MultiSelectAutocomplete/__stories__/MultiSelectAutocomplete.stories.jsx
+++ b/app/javascript/crayons/MultiSelectAutocomplete/__stories__/MultiSelectAutocomplete.stories.jsx
@@ -82,6 +82,4 @@ Default.args = {
   allowUserDefinedSelections: false,
 };
 
-Default.story = {
-  name: 'default',
-};
+Default.storyName = 'default';
diff --git a/app/javascript/crayons/Notice/__stories__/notice.html.stories.jsx b/app/javascript/crayons/Notice/__stories__/notice.html.stories.jsx
index 05cfc6263..7467e7228 100644
--- a/app/javascript/crayons/Notice/__stories__/notice.html.stories.jsx
+++ b/app/javascript/crayons/Notice/__stories__/notice.html.stories.jsx
@@ -14,9 +14,7 @@ export const Default = () => (
   <div className="crayons-notice">This is Default Notice content.</div>
 );
 
-Default.story = {
-  name: 'default',
-};
+Default.storyName = 'default';
 
 export const Danger = () => (
   <div className="crayons-notice crayons-notice--danger">
@@ -24,9 +22,7 @@ export const Danger = () => (
   </div>
 );
 
-Danger.story = {
-  name: 'danger',
-};
+Danger.storyName = 'danger';
 
 export const Warning = () => (
   <div className="crayons-notice crayons-notice--warning">
@@ -34,9 +30,7 @@ export const Warning = () => (
   </div>
 );
 
-Warning.story = {
-  name: 'warning',
-};
+Warning.storyName = 'warning';
 
 export const Success = () => (
   <div className="crayons-notice crayons-notice--success">
@@ -44,9 +38,7 @@ export const Success = () => (
   </div>
 );
 
-Success.story = {
-  name: 'success',
-};
+Success.storyName = 'success';
 
 export const Info = () => (
   <div className="crayons-notice crayons-notice--info">
@@ -54,6 +46,4 @@ export const Info = () => (
   </div>
 );
 
-Info.story = {
-  name: 'info',
-};
+Info.storyName = 'info';
diff --git a/app/javascript/crayons/Spinner/__stories__/Spinner.stories.jsx b/app/javascript/crayons/Spinner/__stories__/Spinner.stories.jsx
index ac47fe599..e37d02bf3 100644
--- a/app/javascript/crayons/Spinner/__stories__/Spinner.stories.jsx
+++ b/app/javascript/crayons/Spinner/__stories__/Spinner.stories.jsx
@@ -10,6 +10,4 @@ export const Default = () => {
   return <Spinner />;
 };
 
-Default.story = {
-  name: 'default',
-};
+Default.storyName = 'default';
diff --git a/app/javascript/crayons/avatarsAndLogos/Avatar/__stories__/avatars.html.stories.jsx b/app/javascript/crayons/avatarsAndLogos/Avatar/__stories__/avatars.html.stories.jsx
index 4d5d1e448..97780d893 100644
--- a/app/javascript/crayons/avatarsAndLogos/Avatar/__stories__/avatars.html.stories.jsx
+++ b/app/javascript/crayons/avatarsAndLogos/Avatar/__stories__/avatars.html.stories.jsx
@@ -20,7 +20,7 @@ export const Default = () => (
   </span>
 );
 
-Default.story = { name: 'default (small)' };
+Default.storyName = 'default (small)';
 
 export const Large = () => (
   <span className="crayons-avatar crayons-avatar--l">
@@ -32,7 +32,7 @@ export const Large = () => (
   </span>
 );
 
-Large.story = { name: 'large' };
+Large.storyName = 'large';
 
 export const ExtraLarge = () => (
   <span className="crayons-avatar crayons-avatar--xl">
@@ -44,7 +44,7 @@ export const ExtraLarge = () => (
   </span>
 );
 
-ExtraLarge.story = { title: 'extra large' };
+ExtraLarge.title = 'extra large';
 
 export const DoubleXL = () => (
   <span className="crayons-avatar crayons-avatar--2xl">
@@ -56,7 +56,7 @@ export const DoubleXL = () => (
   </span>
 );
 
-DoubleXL.story = { name: '2XL' };
+DoubleXL.storyName = '2XL';
 
 export const TripleXL = () => (
   <span className="crayons-avatar crayons-avatar--3xl">
@@ -68,4 +68,4 @@ export const TripleXL = () => (
   </span>
 );
 
-TripleXL.story = { name: '3XL' };
+TripleXL.storyName = '3XL';
diff --git a/app/javascript/crayons/avatarsAndLogos/Logo/__stories__/logos.html.stories.jsx b/app/javascript/crayons/avatarsAndLogos/Logo/__stories__/logos.html.stories.jsx
index c1d73df1c..3b6031702 100644
--- a/app/javascript/crayons/avatarsAndLogos/Logo/__stories__/logos.html.stories.jsx
+++ b/app/javascript/crayons/avatarsAndLogos/Logo/__stories__/logos.html.stories.jsx
@@ -20,7 +20,7 @@ export const Default = () => (
   </span>
 );
 
-Default.story = { name: 'default (small)' };
+Default.storyName = 'default (small)';
 
 export const Large = () => (
   <span className="crayons-logo crayons-logo--l">
@@ -32,7 +32,7 @@ export const Large = () => (
   </span>
 );
 
-Large.story = { name: 'large' };
+Large.storyName = 'large';
 
 export const ExtraLarge = () => (
   <span className="crayons-logo crayons-logo--xl">
@@ -44,7 +44,7 @@ export const ExtraLarge = () => (
   </span>
 );
 
-ExtraLarge.story = { name: 'extra large' };
+ExtraLarge.storyName = 'extra large';
 
 export const DoubleXL = () => (
   <span className="crayons-logo crayons-logo--2xl">
@@ -56,7 +56,7 @@ export const DoubleXL = () => (
   </span>
 );
 
-DoubleXL.story = { name: '2XL' };
+DoubleXL.storyName = '2XL';
 
 export const TripleXL = () => (
   <span className="crayons-logo crayons-logo--3xl">
@@ -68,4 +68,4 @@ export const TripleXL = () => (
   </span>
 );
 
-TripleXL.story = { name: '3XL' };
+TripleXL.storyName = '3XL';
diff --git a/app/javascript/crayons/formElements/Checkbox/__stories__/checkbox.html.stories.jsx b/app/javascript/crayons/formElements/Checkbox/__stories__/checkbox.html.stories.jsx
index 68d577dfc..f6e8200fe 100644
--- a/app/javascript/crayons/formElements/Checkbox/__stories__/checkbox.html.stories.jsx
+++ b/app/javascript/crayons/formElements/Checkbox/__stories__/checkbox.html.stories.jsx
@@ -12,29 +12,25 @@ export const Default = () => (
   <input type="checkbox" className="crayons-checkbox" />
 );
 
-Default.story = {
-  name: 'default',
-};
+Default.storyName = 'default';
 
 export const Checked = () => (
   <input type="checkbox" className="crayons-checkbox" checked />
 );
 
-Checked.story = { name: 'checked' };
+Checked.storyName = 'checked';
 
 export const Disabled = () => (
   <input type="checkbox" className="crayons-checkbox" disabled />
 );
 
-Disabled.story = { name: 'disabled' };
+Disabled.storyName = 'disabled';
 
 export const CheckedAndDisabled = () => (
   <input type="checkbox" className="crayons-checkbox" checked disabled />
 );
 
-CheckedAndDisabled.story = {
-  name: 'checked (disabled)',
-};
+CheckedAndDisabled.storyName = 'checked (disabled)';
 
 export const CheckboxWithLabel = () => (
   <div className="crayons-field crayons-field--checkbox">
@@ -45,7 +41,7 @@ export const CheckboxWithLabel = () => (
   </div>
 );
 
-CheckboxWithLabel.story = { name: 'checkbox with <label />' };
+CheckboxWithLabel.storyName = 'checkbox with <label />';
 
 export const CheckboxWithLabelAndDisabled = () => (
   <div className="crayons-field crayons-field--checkbox">
@@ -59,9 +55,8 @@ export const CheckboxWithLabelAndDisabled = () => (
   </div>
 );
 
-CheckboxWithLabelAndDisabled.story = {
-  name: 'checkbox with <label /> and description',
-};
+CheckboxWithLabelAndDisabled.storyName =
+  'checkbox with <label /> and description';
 
 export const CheckboxGroup = () => (
   <Fieldset>
@@ -101,6 +96,4 @@ export const CheckboxGroup = () => (
   </Fieldset>
 );
 
-CheckboxGroup.story = {
-  name: 'checkbox group',
-};
+CheckboxGroup.storyName = 'checkbox group';
diff --git a/app/javascript/crayons/formElements/FormField/__stories__/FormField.stories.jsx b/app/javascript/crayons/formElements/FormField/__stories__/FormField.stories.jsx
index 0fbe2dbe9..e9b16e144 100644
--- a/app/javascript/crayons/formElements/FormField/__stories__/FormField.stories.jsx
+++ b/app/javascript/crayons/formElements/FormField/__stories__/FormField.stories.jsx
@@ -21,6 +21,4 @@ export const RadioVariant = () => (
   </FormField>
 );
 
-RadioVariant.story = {
-  name: 'radio',
-};
+RadioVariant.storyName = 'radio';
diff --git a/app/javascript/crayons/formElements/RadioButton/__stories__/RadioButton.stories.jsx b/app/javascript/crayons/formElements/RadioButton/__stories__/RadioButton.stories.jsx
index 428b320df..2e121ee9c 100644
--- a/app/javascript/crayons/formElements/RadioButton/__stories__/RadioButton.stories.jsx
+++ b/app/javascript/crayons/formElements/RadioButton/__stories__/RadioButton.stories.jsx
@@ -18,9 +18,7 @@ export const Default = () => (
   />
 );
 
-Default.story = {
-  name: 'default',
-};
+Default.storyName = 'default';
 
 export const AdditionalCssClassName = () => (
   <RadioButton
@@ -31,6 +29,4 @@ export const AdditionalCssClassName = () => (
   />
 );
 
-AdditionalCssClassName.story = {
-  name: 'additional CSS class',
-};
+AdditionalCssClassName.storyName = 'additional CSS class';
diff --git a/app/javascript/crayons/formElements/RadioButton/__stories__/radioButton.html.stories.jsx b/app/javascript/crayons/formElements/RadioButton/__stories__/radioButton.html.stories.jsx
index fe815495a..3ae3cd99d 100644
--- a/app/javascript/crayons/formElements/RadioButton/__stories__/radioButton.html.stories.jsx
+++ b/app/javascript/crayons/formElements/RadioButton/__stories__/radioButton.html.stories.jsx
@@ -8,25 +8,25 @@ export const Default = () => (
   <input type="radio" name="n1" className="crayons-radio" />
 );
 
-Default.story = { name: 'default' };
+Default.storyName = 'default';
 
 export const Checked = () => (
   <input type="radio" name="n1" className="crayons-radio" checked />
 );
 
-Checked.story = { name: 'checked' };
+Checked.storyName = 'checked';
 
 export const Disabled = () => (
   <input type="radio" name="n2" className="crayons-radio" disabled />
 );
 
-Disabled.story = { name: 'disabled' };
+Disabled.storyName = 'disabled';
 
 export const CheckedAndDisabled = () => (
   <input type="radio" name="n2" className="crayons-radio" checked disabled />
 );
 
-CheckedAndDisabled.story = { name: 'checked (disabled)' };
+CheckedAndDisabled.storyName = 'checked (disabled)';
 
 export const WithLabel = () => (
   <div className="crayons-field crayons-field--radio">
@@ -37,7 +37,7 @@ export const WithLabel = () => (
   </div>
 );
 
-WithLabel.story = { name: 'with <label />' };
+WithLabel.storyName = 'with <label />';
 
 export const WithLabelAndDescription = () => (
   <div className="crayons-field crayons-field--radio">
@@ -51,7 +51,7 @@ export const WithLabelAndDescription = () => (
   </div>
 );
 
-WithLabelAndDescription.story = { name: 'with <label /> and description' };
+WithLabelAndDescription.storyName = 'with <label /> and description';
 
 export const RadioButtonGroup = () => (
   <Fieldset>
@@ -76,4 +76,4 @@ export const RadioButtonGroup = () => (
   </Fieldset>
 );
 
-RadioButtonGroup.story = { name: 'radio button group' };
+RadioButtonGroup.storyName = 'radio button group';
diff --git a/app/javascript/crayons/formElements/Select/__stories__/Select.stories.jsx b/app/javascript/crayons/formElements/Select/__stories__/Select.stories.jsx
index 5a32b8c0f..07087827e 100644
--- a/app/javascript/crayons/formElements/Select/__stories__/Select.stories.jsx
+++ b/app/javascript/crayons/formElements/Select/__stories__/Select.stories.jsx
@@ -19,6 +19,4 @@ export const Default = () => {
   return <Select />;
 };
 
-Default.story = {
-  name: 'default',
-};
+Default.storyName = 'default';
diff --git a/app/javascript/crayons/formElements/Text/__stories__/multilineText.html.stories.jsx b/app/javascript/crayons/formElements/Text/__stories__/multilineText.html.stories.jsx
index b84343ad8..f59ffced1 100644
--- a/app/javascript/crayons/formElements/Text/__stories__/multilineText.html.stories.jsx
+++ b/app/javascript/crayons/formElements/Text/__stories__/multilineText.html.stories.jsx
@@ -13,7 +13,7 @@ export const Default = () => (
   />
 );
 
-Default.story = { name: 'default' };
+Default.storyName = 'default';
 
 export const Disabled = () => (
   <textarea
@@ -25,4 +25,4 @@ export const Disabled = () => (
   </textarea>
 );
 
-Disabled.story = { name: 'disabled' };
+Disabled.storyName = 'disabled';
diff --git a/app/javascript/crayons/formElements/Text/__stories__/text.html.stories.jsx b/app/javascript/crayons/formElements/Text/__stories__/text.html.stories.jsx
index a8f121cd2..3da5bc892 100644
--- a/app/javascript/crayons/formElements/Text/__stories__/text.html.stories.jsx
+++ b/app/javascript/crayons/formElements/Text/__stories__/text.html.stories.jsx
@@ -12,7 +12,7 @@ export const Default = () => (
   />
 );
 
-Default.story = { name: 'default' };
+Default.storyName = 'default';
 
 export const Disabled = () => (
   <input
@@ -24,7 +24,7 @@ export const Disabled = () => (
   />
 );
 
-Disabled.story = { name: 'disabled' };
+Disabled.storyName = 'disabled';
 
 export const WithLabelAndDescriptions = () => (
   <div className="crayons-field">
@@ -46,6 +46,4 @@ export const WithLabelAndDescriptions = () => (
   </div>
 );
 
-WithLabelAndDescriptions.story = {
-  name: 'with <label /> and descriptions',
-};
+WithLabelAndDescriptions.storyName = 'with <label /> and descriptions';
diff --git a/app/javascript/crayons/navigation/NavigationTabs/__stories__/navigationTab.html.stories.jsx b/app/javascript/crayons/navigation/NavigationTabs/__stories__/navigationTab.html.stories.jsx
index a9189fd1f..6da7f65ff 100644
--- a/app/javascript/crayons/navigation/NavigationTabs/__stories__/navigationTab.html.stories.jsx
+++ b/app/javascript/crayons/navigation/NavigationTabs/__stories__/navigationTab.html.stories.jsx
@@ -70,9 +70,7 @@ export const Default = () => {
   );
 };
 
-Default.story = {
-  name: 'default',
-};
+Default.storyName = 'default';
 
 export const Buttons = () => (
   <nav className="crayons-tabs" aria-label="View post options">
@@ -91,6 +89,4 @@ export const Buttons = () => (
     </ul>
   </nav>
 );
-Buttons.story = {
-  name: 'buttons',
-};
+Buttons.storyName = 'buttons';
diff --git a/app/javascript/crayons/typography/__stories__/typography.stories.jsx b/app/javascript/crayons/typography/__stories__/typography.stories.jsx
index 51c0a257a..e5b94792b 100644
--- a/app/javascript/crayons/typography/__stories__/typography.stories.jsx
+++ b/app/javascript/crayons/typography/__stories__/typography.stories.jsx
@@ -62,9 +62,7 @@ export const SampleTexts = () => (
   </div>
 );
 
-SampleTexts.story = {
-  name: 'sample texts',
-};
+SampleTexts.storyName = 'sample texts';
 
 export const DefaultLineHeight = () => (
   <div className="sample-texts">
@@ -81,7 +79,7 @@ export const DefaultLineHeight = () => (
   </div>
 );
 
-DefaultLineHeight.story = { name: 'default line height' };
+DefaultLineHeight.storyName = 'default line height';
 
 export const TightLineHeight = () => (
   <div className="sample-texts">
@@ -100,6 +98,4 @@ export const TightLineHeight = () => (
   </div>
 );
 
-TightLineHeight.story = {
-  name: 'tight line height',
-};
+TightLineHeight.storyName = 'tight line height';
diff --git a/app/javascript/crayons/typography/__stories__/typographyAccented.stories.jsx b/app/javascript/crayons/typography/__stories__/typographyAccented.stories.jsx
index aa2fbde61..e8435dbf4 100644
--- a/app/javascript/crayons/typography/__stories__/typographyAccented.stories.jsx
+++ b/app/javascript/crayons/typography/__stories__/typographyAccented.stories.jsx
@@ -31,6 +31,4 @@ export const SampleTexts = () => (
   </div>
 );
 
-SampleTexts.story = {
-  name: 'sample texts',
-};
+SampleTexts.storyName = 'sample texts';
diff --git a/app/javascript/podcasts/__stories__/PodcastEpisode.stories.jsx b/app/javascript/podcasts/__stories__/PodcastEpisode.stories.jsx
index b28f6680e..14be24394 100644
--- a/app/javascript/podcasts/__stories__/PodcastEpisode.stories.jsx
+++ b/app/javascript/podcasts/__stories__/PodcastEpisode.stories.jsx
@@ -9,4 +9,4 @@ export default { title: 'App Components/Podcasts/Episode' };
 
 export const Standard = () => <PodcastEpisode episode={podcastArticle} />;
 
-Standard.story = { name: 'standard' };
+Standard.storyName = 'standard';
diff --git a/app/javascript/podcasts/__stories__/TodaysPodcasts.stories.jsx b/app/javascript/podcasts/__stories__/TodaysPodcasts.stories.jsx
index 09d0e6e5b..db07a1a6a 100644
--- a/app/javascript/podcasts/__stories__/TodaysPodcasts.stories.jsx
+++ b/app/javascript/podcasts/__stories__/TodaysPodcasts.stories.jsx
@@ -25,4 +25,4 @@ export const Standard = () => (
   </TodaysPodcasts>
 );
 
-Standard.story = { name: 'standard' };
+Standard.storyName = 'standard';
diff --git a/bin/__tests__/generate-css-utility-classes-docs.test.js b/bin/__tests__/generate-css-utility-classes-docs.test.js
index ab3915b1b..4f20a118c 100755
--- a/bin/__tests__/generate-css-utility-classes-docs.test.js
+++ b/bin/__tests__/generate-css-utility-classes-docs.test.js
@@ -52,7 +52,7 @@ describe('generateUtilityClassesDocumentation', () => {
 \`}</code></pre>
     </div>
 
-    _color_some_utility_class.story = { name: 'color-some-utility-class' };
+    _color_some_utility_class.storyName = 'color-some-utility-class';
     `;
     const styleSheet = {
       cssRules: [
@@ -108,7 +108,7 @@ describe('generateUtilityClassesDocumentation', () => {
 \`}</code></pre>
     </div>
 
-    _color_some_utility_class.story = { name: 'color-some-utility-class' };
+    _color_some_utility_class.storyName = 'color-some-utility-class';
     `;
     const styleSheet = {
       cssRules: [
@@ -159,7 +159,7 @@ describe('generateUtilityClassesDocumentation', () => {
 \`}</code></pre>
     </div>
 
-    _color_some_utility_class.story = { name: 'color-some-utility-class' };
+    _color_some_utility_class.storyName = 'color-some-utility-class';
     `;
     const styleSheet = {
       cssRules: [
@@ -208,7 +208,7 @@ describe('generateUtilityClassesDocumentation', () => {
 \`}</code></pre>
     </div>
 
-    _color_some_utility_class.story = { name: 'color-some-utility-class' };
+    _color_some_utility_class.storyName = 'color-some-utility-class';
     `;
     const styleSheet = {
       cssRules: [
diff --git a/bin/generate-css-utility-classes-docs.js b/bin/generate-css-utility-classes-docs.js
index eb1f6a0ba..c269aa25d 100755
--- a/bin/generate-css-utility-classes-docs.js
+++ b/bin/generate-css-utility-classes-docs.js
@@ -120,10 +120,7 @@ function generateUtilityClassStories(cssProperty, cssRules) {
       })}\`}</code></pre>
     </div>
 
-    ${sanitizedCssClassName}.story = { name: '${className.replace(
-      /^\./,
-      '',
-    )}' };
+    ${sanitizedCssClassName}.storyName = '${className.replace(/^\./, '')}';
     `);
   }