aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/molecules/layout
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/molecules/layout')
-rw-r--r--src/components/molecules/layout/modal.module.scss21
-rw-r--r--src/components/molecules/layout/modal.stories.tsx57
-rw-r--r--src/components/molecules/layout/modal.test.tsx9
-rw-r--r--src/components/molecules/layout/modal.tsx48
4 files changed, 0 insertions, 135 deletions
diff --git a/src/components/molecules/layout/modal.module.scss b/src/components/molecules/layout/modal.module.scss
deleted file mode 100644
index 2fff562..0000000
--- a/src/components/molecules/layout/modal.module.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.wrapper {
- padding: var(--spacing-md);
- background: var(--color-bg-secondary);
- border: fun.convert-px(4) solid;
- border-image: radial-gradient(
- ellipse at top,
- var(--color-primary-lighter) 20%,
- var(--color-primary) 100%
- )
- 1;
- box-shadow: fun.convert-px(2) fun.convert-px(-2) fun.convert-px(3)
- fun.convert-px(-1) var(--color-shadow-dark);
-}
-
-.icon {
- --icon-size: #{fun.convert-px(30)};
-
- margin-right: var(--spacing-2xs);
-}
diff --git a/src/components/molecules/layout/modal.stories.tsx b/src/components/molecules/layout/modal.stories.tsx
deleted file mode 100644
index 396e89e..0000000
--- a/src/components/molecules/layout/modal.stories.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import Cog from '@components/atoms/icons/cog';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ModalComponent from './modal';
-
-export default {
- title: 'Molecules/Layout',
- component: ModalComponent,
- argTypes: {
- children: {
- control: {
- type: 'text',
- },
- description: 'The modal body.',
- type: {
- name: 'string',
- required: true,
- },
- },
- icon: {
- control: {
- type: 'select',
- },
- description: 'The title icon.',
- options: ['', 'cogs', 'search'],
- table: {
- category: 'Options',
- },
- type: {
- name: 'string',
- required: false,
- },
- },
- title: {
- control: {
- type: 'text',
- },
- description: 'The modal title.',
- table: {
- category: 'Options',
- },
- type: {
- name: 'string',
- required: false,
- },
- },
- },
-} as ComponentMeta<typeof ModalComponent>;
-
-const Template: ComponentStory<typeof ModalComponent> = (args) => (
- <ModalComponent {...args} />
-);
-
-export const Modal = Template.bind({});
-Modal.args = {
- children:
- 'Inventore natus dignissimos aut illum modi asperiores. Et voluptatibus delectus.',
-};
diff --git a/src/components/molecules/layout/modal.test.tsx b/src/components/molecules/layout/modal.test.tsx
deleted file mode 100644
index 14fb224..0000000
--- a/src/components/molecules/layout/modal.test.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { render, screen } from '@test-utils';
-import Modal from './modal';
-
-describe('Modal', () => {
- it('renders a title', () => {
- render(<Modal title="A custom title" />);
- expect(screen.getByText('A custom title')).toBeInTheDocument();
- });
-});
diff --git a/src/components/molecules/layout/modal.tsx b/src/components/molecules/layout/modal.tsx
deleted file mode 100644
index 4dc3b0a..0000000
--- a/src/components/molecules/layout/modal.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import Heading from '@components/atoms/headings/heading';
-import dynamic from 'next/dynamic';
-import { FC, ReactNode } from 'react';
-import styles from './modal.module.scss';
-
-export type Icons = 'cogs' | 'search';
-
-export type ModalProps = {
- icon?: Icons;
- title?: string;
-};
-
-const CogIcon = dynamic<ReactNode>(() => import('@components/atoms/icons/cog'));
-const SearchIcon = dynamic<ReactNode>(
- () => import('@components/atoms/icons/magnifying-glass')
-);
-
-/**
- * Modal component
- *
- * Render a modal component with an optional title and icon.
- */
-const Modal: FC<ModalProps> = ({ children, icon, title }) => {
- const getIcon = (id: Icons) => {
- switch (id) {
- case 'cogs':
- return <CogIcon />;
- case 'search':
- return <SearchIcon />;
- default:
- return <></>;
- }
- };
-
- return (
- <div className={styles.wrapper}>
- {title && (
- <Heading isFake={true} level={3}>
- {icon && <span className={styles.icon}>{getIcon(icon)}</span>}
- {title}
- </Heading>
- )}
- {children}
- </div>
- );
-};
-
-export default Modal;