From 82b07cfdd7739ec6aba7661e36cf79a33b1bf9d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20F=C3=BCrhoff?=
 <12294151+imagoiq@users.noreply.github.com>
Date: Mon, 20 Nov 2023 09:26:39 +0100
Subject: [PATCH] fix(documentation): edit on Github breaks page without
 stories attached (#2267)

Fix Changelog and search for icons page after
https://github.com/swisspost/design-system/pull/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                      |  5 +++++
 packages/documentation/.storybook/blocks/footer.tsx   | 10 ++++++----
 packages/documentation/.storybook/blocks/layout.tsx   |  6 ++++--
 .../src/stories/components/input/input.docs.mdx       |  2 ++
 .../icons/search-icons/search-icons.blocks.tsx        |  1 +
 .../stories/icons/search-icons/search-icons.docs.mdx  |  3 ++-
 .../icons/search-icons/search-icons.stories.ts        | 11 +++++++++++
 .../src/stories/misc/changelog/changelog.docs.mdx     |  5 ++---
 .../src/stories/misc/changelog/changelog.stories.ts   | 11 +++++++++++
 9 files changed, 44 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/clean-files-wonder.md
 create mode 100644 packages/documentation/src/stories/icons/search-icons/search-icons.stories.ts
 create mode 100644 packages/documentation/src/stories/misc/changelog/changelog.stories.ts

diff --git a/.changeset/clean-files-wonder.md b/.changeset/clean-files-wonder.md
new file mode 100644
index 0000000000..a973c09117
--- /dev/null
+++ b/.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.
diff --git a/packages/documentation/.storybook/blocks/footer.tsx b/packages/documentation/.storybook/blocks/footer.tsx
index 4475b58911..75d20668eb 100644
--- a/packages/documentation/.storybook/blocks/footer.tsx
+++ b/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">
diff --git a/packages/documentation/.storybook/blocks/layout.tsx b/packages/documentation/.storybook/blocks/layout.tsx
index f6708bedfe..f9ffee8d66 100644
--- a/packages/documentation/.storybook/blocks/layout.tsx
+++ b/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>
   );
diff --git a/packages/documentation/src/stories/components/input/input.docs.mdx b/packages/documentation/src/stories/components/input/input.docs.mdx
index 0917b9953e..5e0242b618 100644
--- a/packages/documentation/src/stories/components/input/input.docs.mdx
+++ b/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
diff --git a/packages/documentation/src/stories/icons/search-icons/search-icons.blocks.tsx b/packages/documentation/src/stories/icons/search-icons/search-icons.blocks.tsx
index e2608fc428..ea23fb2dd7 100644
--- a/packages/documentation/src/stories/icons/search-icons/search-icons.blocks.tsx
+++ b/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}
diff --git a/packages/documentation/src/stories/icons/search-icons/search-icons.docs.mdx b/packages/documentation/src/stories/icons/search-icons/search-icons.docs.mdx
index d703cdf1d9..1caa334a3b 100644
--- a/packages/documentation/src/stories/icons/search-icons/search-icons.docs.mdx
+++ b/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
 
diff --git a/packages/documentation/src/stories/icons/search-icons/search-icons.stories.ts b/packages/documentation/src/stories/icons/search-icons/search-icons.stories.ts
new file mode 100644
index 0000000000..4ea7e28385
--- /dev/null
+++ b/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 = {};
diff --git a/packages/documentation/src/stories/misc/changelog/changelog.docs.mdx b/packages/documentation/src/stories/misc/changelog/changelog.docs.mdx
index 135fe55d39..5e5be9e5c5 100644
--- a/packages/documentation/src/stories/misc/changelog/changelog.docs.mdx
+++ b/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>
diff --git a/packages/documentation/src/stories/misc/changelog/changelog.stories.ts b/packages/documentation/src/stories/misc/changelog/changelog.stories.ts
new file mode 100644
index 0000000000..5ca0967d50
--- /dev/null
+++ b/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 = {};