fix: some docs pages

carbon-design-system · Aug 29, 2023 · bd94990 · bd94990
1 parent f0a63e6
commit bd94990
Show file tree

Hide file tree

Showing 17 changed files with 187 additions and 109 deletions.
diff --git a/packages/ibm-products/src/components/CreateSidePanel/CreateSidePanel.stories.js b/packages/ibm-products/src/components/CreateSidePanel/CreateSidePanel.stories.js
@@ -29,21 +29,10 @@ import { CreateSidePanel } from './CreateSidePanel';
 
 import styles from './_storybook-styles.scss';
 import DocsPage from './CreateSidePanel.docs-page';
+import { sidePanelDecorator } from '../../global/decorators/sidePanelDecorator';
 
 const blockClass = `${pkg.prefix}--create-side-panel`;
 
-export default {
-  title: getStoryTitle(CreateSidePanel.displayName),
-  component: CreateSidePanel,
-  tags: ['autodocs'],
-  parameters: {
-    styles,
-    docs: {
-      page: DocsPage,
-    },
-  },
-};
-
 const prefix = 'create-side-panel-stories__';
 
 const defaultStoryProps = {
@@ -70,6 +59,19 @@ const renderUIShellHeader = () => (
   />
 );
 
+export default {
+  title: getStoryTitle(CreateSidePanel.displayName),
+  component: CreateSidePanel,
+  tags: ['autodocs'],
+  parameters: {
+    styles,
+    docs: {
+      page: DocsPage,
+    },
+  },
+  decorators: [sidePanelDecorator(renderUIShellHeader, prefix)],
+};
+
 const DefaultTemplate = ({ ...args }) => {
   const carbonPrefix = usePrefix();
   const [open, setOpen] = useState(false);

diff --git a/packages/ibm-products/src/components/CreateSidePanel/_storybook-styles.scss b/packages/ibm-products/src/components/CreateSidePanel/_storybook-styles.scss
@@ -8,6 +8,7 @@
 @use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing';
+@use '../../global/decorators/side-panel-decorator' as *;
 
 $block-class: #{c4p-settings.$pkg-prefix}--create-side-panel;
 $story-prefix: create-side-panel-stories__;
@@ -27,3 +28,5 @@ $story-prefix: create-side-panel-stories__;
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--number__control-btn::after {
   background-color: $field-02;
 }
+
+@include side-panel-decorator($story-prefix);
diff --git a/packages/ibm-products/src/components/DataSpreadsheet/_storybook-styles.scss b/packages/ibm-products/src/components/DataSpreadsheet/_storybook-styles.scss
@@ -5,8 +5,13 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-$story-anchor: 'data-spreadsheet';
-div[id*='#{$story-anchor}'] .docs-story > div:first-child > div:first-child {
+$story-anchor: 'DataSpreadsheet';
+
+$story-anchor: 'DataSpreadsheet';
+div[data-story-title*='#{$story-anchor}']
+  .docs-story
+  > div:first-child
+  > div:first-child {
   overflow: auto;
   width: 100%;
 }
diff --git a/packages/ibm-products/src/components/Datagrid/_storybook-styles.scss b/packages/ibm-products/src/components/Datagrid/_storybook-styles.scss
@@ -128,8 +128,11 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
   }
 }
 
-$story-anchor: 'datagrid';
-div[id*='#{$story-anchor}'] .docs-story > div:first-child > div:first-child {
+$story-anchor: 'Datagrid';
+div[data-story-title*='#{$story-anchor}']
+  .docs-story
+  > div:first-child
+  > div:first-child {
   overflow: auto;
   width: 100%;
 }
diff --git a/packages/ibm-products/src/components/EditSidePanel/EditSidePanel.stories.js b/packages/ibm-products/src/components/EditSidePanel/EditSidePanel.stories.js
@@ -30,28 +30,7 @@ import { EditSidePanel } from '.';
 
 import styles from './_storybook-styles.scss';
 import { StoryDocsPage } from '../../global/js/utils/StoryDocsPage';
-
-export default {
-  title: getStoryTitle(EditSidePanel.displayName),
-  component: EditSidePanel,
-  tags: ['autodocs'],
-  // TODO: Define argTypes for props not represented by standard JS types.
-  argTypes: {
-    title: { control: { type: 'text' } },
-    subtitle: { control: { type: 'text' } },
-    formTitle: { control: { type: 'text' } },
-    formDescription: { control: { type: 'text' } },
-    open: { control: { disable: true } },
-  },
-  parameters: {
-    styles,
-    docs: {
-      page: () => (
-        <StoryDocsPage altGuidelinesHref="https://pages.github.ibm.com/cdai-design/pal/patterns/edit/usage#side-panel-edit" />
-      ),
-    },
-  },
-};
+import { sidePanelDecorator } from '../../global/decorators/sidePanelDecorator';
 
 const defaultStoryProps = {
   title: 'Edit platform quotas',
@@ -75,19 +54,44 @@ const renderUIShellHeader = () => (
   />
 );
 
+const prefix = 'edit-side-panel-stories__';
+
+export default {
+  title: getStoryTitle(EditSidePanel.displayName),
+  component: EditSidePanel,
+  tags: ['autodocs'],
+  // TODO: Define argTypes for props not represented by standard JS types.
+  argTypes: {
+    title: { control: { type: 'text' } },
+    subtitle: { control: { type: 'text' } },
+    formTitle: { control: { type: 'text' } },
+    formDescription: { control: { type: 'text' } },
+    open: { control: { disable: true } },
+  },
+  parameters: {
+    layout: 'fullscreen',
+    styles,
+    docs: {
+      page: () => (
+        <StoryDocsPage altGuidelinesHref="https://pages.github.ibm.com/cdai-design/pal/patterns/edit/usage#side-panel-edit" />
+      ),
+    },
+  },
+  decorators: [sidePanelDecorator(renderUIShellHeader, prefix)],
+};
+
 /**
  * TODO: Declare template(s) for one or more scenarios.
  */
 const Template = (args) => {
-  const prefix = 'edit-side-panel-stories__';
   const carbonPrefix = usePrefix();
   const items = ['Day(s)', 'Month(s)', 'Year(s)'];
   const [open, setOpen] = useState(false);
   const [topicValue, setTopicValue] = useState('Cluster management');
   return (
     <>
       {renderUIShellHeader()}
-      <Grid id="ibm-products-page-content">
+      <Grid id="ibm-products-page-content" className="story-content">
         <Column lg={{ span: 2, start: 8 }}>
           <Button onClick={() => setOpen(!open)}>
             {open ? 'Close side panel' : 'Open side panel'}

diff --git a/packages/ibm-products/src/components/EditSidePanel/_storybook-styles.scss b/packages/ibm-products/src/components/EditSidePanel/_storybook-styles.scss
@@ -5,11 +5,12 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use 'ALIAS_STORY_STYLE_CONFIG' as *;
+@use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
+@use '../../global/decorators/side-panel-decorator' as *;
 
-$block-class: #{$pkg-prefix}--edit-side-panel;
+$block-class: #{c4p-settings.$pkg-prefix}--edit-side-panel;
 $story-prefix: edit-side-panel-stories__;
 
 .#{$story-prefix}example-container {
@@ -19,11 +20,13 @@ $story-prefix: edit-side-panel-stories__;
   grid-template-columns: 1fr 1fr;
 }
 
-.#{$story-prefix}example-form-group .#{$carbon-prefix}--label {
+.#{$story-prefix}example-form-group .#{c4p-settings.$carbon-prefix}--label {
   margin-bottom: 0;
 }
 
-.#{$block-class} .#{$carbon-prefix}--number__control-btn::before,
-.#{$block-class} .#{$carbon-prefix}--number__control-btn::after {
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--number__control-btn::before,
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--number__control-btn::after {
   background-color: $field-02;
 }
+
+@include side-panel-decorator($story-prefix);
diff --git a/packages/ibm-products/src/components/EditTearsheetNarrow/_storybook-styles.scss b/packages/ibm-products/src/components/EditTearsheetNarrow/_storybook-styles.scss
@@ -5,6 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-// @use 'ALIAS_STORY_STYLE_CONFIG';
+// @use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
 
 // TODO: add any additional styles used by EditTearsheetNarrow.stories.js
diff --git a/packages/ibm-products/src/components/ExportModal/ExportModal.stories.js b/packages/ibm-products/src/components/ExportModal/ExportModal.stories.js
@@ -58,12 +58,10 @@ const defaultProps = {
   inputType: 'text',
 };
 
-const Template = ({ open, ...args }, context) => {
-  return <ExportModal {...args} open={context.viewMode !== 'docs' && open} />;
-};
-
-const TemplateWithState = (args) => {
-  const [open, setOpen] = useState(false);
+const Template = ({ storyInitiallyOpen = false, ...args }, context) => {
+  const [open, setOpen] = useState(
+    context.viewMode !== 'docs' && storyInitiallyOpen
+  );
   const [loading, setLoading] = useState(false);
   const [successful, setSuccessful] = useState(false);
   const [error, setError] = useState(false);
@@ -104,14 +102,14 @@ const TemplateWithState = (args) => {
   );
 };
 
-export const WithSuccessMessage = prepareStory(TemplateWithState, {
+export const WithSuccessMessage = prepareStory(Template, {
   args: {
     ...defaultProps,
     successful: true,
   },
 });
 
-export const WithErrorMessage = prepareStory(TemplateWithState, {
+export const WithErrorMessage = prepareStory(Template, {
   args: {
     ...defaultProps,
     successful: false,
@@ -121,6 +119,7 @@ export const WithErrorMessage = prepareStory(TemplateWithState, {
 export const Standard = prepareStory(Template, {
   args: {
     ...defaultProps,
+    storyInitiallyOpen: true,
   },
 });
 
@@ -131,6 +130,7 @@ export const WithExtensionValidation = prepareStory(Template, {
     filename: '',
     invalidInputText: 'File must have valid extension .pdf',
     body: 'File must be exported in a PDF format.',
+    storyInitiallyOpen: true,
   },
 });
 
@@ -149,5 +149,6 @@ export const WithPreformattedExtensions = prepareStory(Template, {
       },
     ],
     preformattedExtensionsLabel: 'Choose an export format',
+    storyInitiallyOpen: true,
   },
 });
diff --git a/packages/ibm-products/src/components/SidePanel/SidePanel.js b/packages/ibm-products/src/components/SidePanel/SidePanel.js
@@ -431,12 +431,14 @@ export let SidePanel = React.forwardRef(
       if (includeOverlay && open) {
         bodyElement.style.overflow = 'hidden';
       } else if (includeOverlay && !open) {
-        bodyElement.style.overflow = 'initial';
+        bodyElement.style.overflow = '';
       }
       if (includeOverlay && !preventCloseOnClickOutside) {
         document.addEventListener('click', handleOutsideClick);
       }
       return () => {
+        const bodyElement = document.body;
+        bodyElement.style.overflow = '';
         document.removeEventListener('click', handleOutsideClick);
       };
     }, [