chore: add a NoScript component

4 files changed, 97 insertions, 0 deletions

diff --git a/src/components/atoms/layout/no-script.module.scss b/src/components/atoms/layout/no-script.module.scss
new file mode 100644
index 0000000..d8712af
--- /dev/null
+++ b/src/components/atoms/layout/no-script.module.scss
@@ -0,0 +1,19 @@
+@use "@styles/abstracts/functions" as fun;
+
+.noscript {
+  color: var(--color-primary-darker);
+
+  &--top {
+    padding: var(--spacing-xs) var(--spacing-sm);
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 10;
+    background: var(--color-bg);
+    border-bottom: fun.convert-px(3) solid var(--color-border);
+    font-size: var(--font-size-sm);
+    font-weight: 600;
+    text-align: center;
+  }
+}
diff --git a/src/components/atoms/layout/no-script.stories.tsx b/src/components/atoms/layout/no-script.stories.tsx
new file mode 100644
index 0000000..474e2fb
--- /dev/null
+++ b/src/components/atoms/layout/no-script.stories.tsx
@@ -0,0 +1,46 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import NoScriptComponent from './no-script';
+
+export default {
+  title: 'Atoms/Layout',
+  component: NoScriptComponent,
+  args: {
+    position: 'initial',
+  },
+  argTypes: {
+    message: {
+      control: {
+        type: 'text',
+      },
+      description: 'A message to display when Javascript is disabled.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    position: {
+      control: {
+        type: 'select',
+      },
+      description: 'The message position.',
+      options: ['initial', 'top'],
+      table: {
+        category: 'Options',
+        defaultValue: 'initial',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+  },
+} as ComponentMeta<typeof NoScriptComponent>;
+
+const Template: ComponentStory<typeof NoScriptComponent> = (args) => (
+  <NoScriptComponent {...args} />
+);
+
+export const NoScript = Template.bind({});
+NoScript.args = {
+  message: 'A noscript only message.',
+};
diff --git a/src/components/atoms/layout/no-script.test.tsx b/src/components/atoms/layout/no-script.test.tsx
new file mode 100644
index 0000000..9ed9c4c
--- /dev/null
+++ b/src/components/atoms/layout/no-script.test.tsx
@@ -0,0 +1,11 @@
+import { render, screen } from '@test-utils';
+import NoScript from './no-script';
+
+const message = 'A noscript message.';
+
+describe('NoScript', () => {
+  it('renders a message', () => {
+    render(<NoScript message={message} />);
+    expect(screen.getByText(message)).toBeInTheDocument();
+  });
+});
diff --git a/src/components/atoms/layout/no-script.tsx b/src/components/atoms/layout/no-script.tsx
new file mode 100644
index 0000000..6358cf8
--- /dev/null
+++ b/src/components/atoms/layout/no-script.tsx
@@ -0,0 +1,21 @@
+import { VFC } from 'react';
+import styles from './no-script.module.scss';
+
+export type NoScriptProps = {
+  /**
+   * The noscript message.
+   */
+  message: string;
+  /**
+   * The message position. Default: initial.
+   */
+  position?: 'initial' | 'top';
+};
+
+const NoScript: VFC<NoScriptProps> = ({ message, position = 'initial' }) => {
+  const positionClass = styles[`noscript--${position}`];
+
+  return <div className={`${styles.noscript} ${positionClass}`}>{message}</div>;
+};
+
+export default NoScript;