[CI 3213] Create zero results page

[VincentGalloro]

TODO (in future PR): Make the fonts look nicer

[linear]

CI-3213 [MVP] Create Zero Results Page

Business Outcome:

• As a Consumer I want Zero Results to be handled OOO so that I can fully port over my current implementation to use Constructor's OS UI Library

Definition of done:

• Create a component for Zero Results
  • Might render Browse and Search differently
• Use it in Search/Browse Grid if available
• Simple Tests
• Simple Documentation

Additional notes

Screenshot 2024-03-02 at 2.52.23 AM.png

Figma link : https://www.figma.com/file/bWsxaLJGgHTX9ystM0Ko5Z/Open-Source-Demo?type=design&node-id=289-35578&mode=design&t=QUyBZ4zxNmXeptFy-4

[Mudaafi]

I know it's a simple component but could we make it into it's own separate component file? We'll need to reuse it for Browse in the future so I think it makes sense to have it separately.

On a separate note, could we also add another story under SearchResults? This would be specifically for zero results. We'll want to track changes to it via chromatic. Something like this should work:

export const ZeroResults: Story = {
  render: (args) => (
    <CioPlp apiKey={DEMO_API_KEY}>
      <div>Example Url: https://www.example.com?q=cvwdacoknqeauosd1</div>
      <br />
      <SearchResults {...args} />
    </CioPlp>
  ),
  decorators: [
    (Story) => {
      const url = new URL(window.location as any);
      // eslint-disable-next-line @cspell/spellchecker
      url.searchParams.set('q', 'cvwdacoknqeauosd1');
      window.history.pushState({}, '', url);

      return <Story />;
    },
  ],
};

[Mudaafi]

I also added the font-change story CI-3432 👍 I can take it later today

[VincentGalloro]

I know it's a simple component but could we make it into it's own separate component file? We'll need to reuse it for Browse in the future so I think it makes sense to have it separately.

On a separate note, could we also add another story under SearchResults? This would be specifically for zero results. We'll want to track changes to it via chromatic. Something like this should work:

export const ZeroResults: Story = {
  render: (args) => (
    <CioPlp apiKey={DEMO_API_KEY}>
      <div>Example Url: https://www.example.com?q=cvwdacoknqeauosd1</div>
      <br />
      <SearchResults {...args} />
    </CioPlp>
  ),
  decorators: [
    (Story) => {
      const url = new URL(window.location as any);
      // eslint-disable-next-line @cspell/spellchecker
      url.searchParams.set('q', 'cvwdacoknqeauosd1');
      window.history.pushState({}, '', url);

      return <Story />;
    },
  ],
};

done. It's failing the spellcheck check even with the eslint line but hopefully that's not an issue

[Mudaafi]

lgtm! We'll probably want to replace
// eslint-disable-next-line @cspell/spellchecker

with
/* cspell:disable-next-line */

That'll probably fix the failing spellcheck