Updated story book annotations (#18562)

* Updated story book annotations

* Updated story book annotations

* Storybook code updated for css

* Nit fix

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';

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';

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';

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';

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';

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';

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';

app/javascript/articles/__stories__/userArticle.stories.jsx

@@ -32,4 +32,4 @@ export const UserArticle = () => (
   />
 );
 
-UserArticle.story = { name: 'default' };
+UserArticle.storyName = 'default';

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';

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';

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';

app/javascript/crayons/Dropdown/__stories__/Dropdown.stories.jsx

@@ -34,6 +34,4 @@ export const Default = () => (
   </div>
 );
 
-Default.story = {
-  name: 'default',
-};
+Default.storyName = 'default';

app/javascript/crayons/MarkdownToolbar/__stories__/MarkdownToolbar.stories.jsx

@@ -25,6 +25,4 @@ export const Default = () => {
   );
 };
 
-Default.story = {
-  name: 'MarkdownToolbar',
-};
+Default.storyName = 'MarkdownToolbar';

app/javascript/crayons/MobileDrawer/__stories__/MobileDrawer.stories.jsx

@@ -31,6 +31,4 @@ export const Default = () => {
   );
 };
 
-Default.story = {
-  name: 'MobileDrawer',
-};
+Default.storyName = 'MobileDrawer';

app/javascript/crayons/MultiInput/__stories__/MultiInput.stories.jsx

@@ -43,6 +43,4 @@ Default.args = {
   showLabel: true,
 };
 
-Default.story = {
-  name: 'default',
-};
+Default.storyName = 'default';

app/javascript/crayons/MultiSelectAutocomplete/__stories__/MultiSelectAutocomplete.stories.jsx

@@ -82,6 +82,4 @@ Default.args = {
   allowUserDefinedSelections: false,
 };
 
-Default.story = {
-  name: 'default',
-};
+Default.storyName = 'default';

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';

app/javascript/crayons/Spinner/__stories__/Spinner.stories.jsx

@@ -10,6 +10,4 @@ export const Default = () => {
   return <Spinner />;
 };
 
-Default.story = {
-  name: 'default',
-};
+Default.storyName = 'default';

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';

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';

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';

app/javascript/crayons/formElements/FormField/__stories__/FormField.stories.jsx

@@ -21,6 +21,4 @@ export const RadioVariant = () => (
   </FormField>
 );
 
-RadioVariant.story = {
-  name: 'radio',
-};
+RadioVariant.storyName = 'radio';

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';

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';

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';

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';

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';

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';

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';

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';

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';

app/javascript/podcasts/__stories__/TodaysPodcasts.stories.jsx

@@ -25,4 +25,4 @@ export const Standard = () => (
   </TodaysPodcasts>
 );
 
-Standard.story = { name: 'standard' };
+Standard.storyName = 'standard';

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: [

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(/^\./, '')}';
     `);
   }