fix(documentation): edit on Github breaks page without stories attach…

…ed (#2267)

Fix Changelog and search for icons page after
#2132. If
`storyIdToCSFFile` is not defined for example on docs page without
stories attached, it breaks the whole page.

![image](https://github.com/swisspost/design-system/assets/12294151/0fea4b6e-ee95-4300-8c5c-17c0af0600ae)

.changeset/clean-files-wonder.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Added attached stories to changelog and search-icons pages to fix "Edit this page on Github" feature.

packages/documentation/.storybook/blocks/footer.tsx

@@ -35,12 +35,14 @@ function getGitHubUrl(path: String) {
   return `${BASEURL}${path.replace(/^\./, '').replace(/\.stories\.ts$/, '.docs.mdx')}`;
 }
 
-export default (params: { pathToStoryFile: String }) => (
+export default (params: { pathToStoryFile?: String }) => (
   <>
     <div className="container mt-huge font-size-18 text-end">
-      <a href={getGitHubUrl(params.pathToStoryFile)} target="_blank" rel="noopener">
-        Edit this page on GitHub
-      </a>
+      {params.pathToStoryFile && (
+        <a href={getGitHubUrl(params.pathToStoryFile)} target="_blank" rel="noopener">
+          Edit this page on GitHub
+        </a>
+      )}
     </div>
     <footer className="docs-footer mt-huge bg-light">
       <div className="container">

packages/documentation/.storybook/blocks/layout.tsx

@@ -3,6 +3,7 @@ import { PropsWithChildren } from 'react';
 import '../styles/layout.scss';
 import Footer from './footer';
 import Header from './header';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 function shouldShowHeader() {
   return new URLSearchParams(window.location.search).get('id') === 'home--docs';
@@ -18,13 +19,14 @@ export default (props: PropsWithChildren<DocsContainerProps>) => {
     context.channel.data.docsPrepared[0].parameters.layout === 'fullscreen'
       ? 'container-fluid'
       : 'container';
-  const pathToStoryFile = context.storyIdToCSFFile.values().next().value.meta.parameters.fileName;
+  const pathToStoryFile = context?.storyIdToCSFFile?.values()?.next()?.value?.meta
+    ?.parameters?.fileName;
   return (
     <DocsContainer context={context}>
       <Unstyled>
         {shouldShowHeader() && <Header />}
         <div className={container}>{children}</div>
-        {shouldShowFooter() && <Footer pathToStoryFile={pathToStoryFile} />}
+        {shouldShowFooter() && <Footer pathToStoryFile={ifDefined(pathToStoryFile)} />}
       </Unstyled>
     </DocsContainer>
   );

packages/documentation/src/stories/components/input/input.docs.mdx

@@ -28,6 +28,8 @@ The following examples show the different characteristics of the component. Thes
 Wrap a pair of `<input>` and `<label>` elements in a `.form-floating` container to enable floating labels.<br/>
 But note that the `<input>` element must come first, so we can ensure the correct styles.
 
+Ensure that `placeholder` attribute is set (even with an empty value) so the label can act as a placeholder when no value is set.
+
     <Canvas of={InputStories.FloatingLabel} />
 
 ### Sizing

packages/documentation/src/stories/icons/search-icons/search-icons.blocks.tsx

@@ -48,6 +48,7 @@ export class Search extends React.Component {
               id="IconSearchFilter_Freetext"
               type="text"
               className="form-control"
+              placeholder=""
               value={this.state.freetext}
               onChange={this.searchFreetext.bind(this)}
               ref={this.freetextRef}

packages/documentation/src/stories/icons/search-icons/search-icons.docs.mdx

@@ -1,7 +1,8 @@
 import { Meta } from '@storybook/blocks';
 import { Search } from './search-icons.blocks';
+import * as SearchIcons from './search-icons.stories';
 
-<Meta title="Icons/Search for Icons" />
+<Meta of={SearchIcons} />
 
 # Search for icons
 

packages/documentation/src/stories/icons/search-icons/search-icons.stories.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+
+const meta: Meta = {
+  title: 'Icons/Search for Icons',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};

packages/documentation/src/stories/misc/changelog/changelog.docs.mdx

@@ -1,9 +1,8 @@
 import { Markdown, Meta } from '@storybook/blocks';
 import changelog from '../../../../../styles/CHANGELOG.md?raw';
 import { CodeOrSourceMdx } from '../../utilities/markdown/CodeOrSourceMdx';
+import ChangelogStories from './changelog.stories';
 
-<Meta
-  title="Misc/Changelog"
-/>
+<Meta of={ChangelogStories}/>
 
 <Markdown options={{ overrides: { code: CodeOrSourceMdx } }}>{changelog}</Markdown>

packages/documentation/src/stories/misc/changelog/changelog.stories.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+
+const meta: Meta = {
+  title: 'Misc/Changelog',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};