aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/organisms
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/organisms')
-rw-r--r--src/components/organisms/forms/comment-form.tsx14
-rw-r--r--src/components/organisms/layout/summary.module.scss7
2 files changed, 16 insertions, 5 deletions
diff --git a/src/components/organisms/forms/comment-form.tsx b/src/components/organisms/forms/comment-form.tsx
index 5ff4ea4..b2c725f 100644
--- a/src/components/organisms/forms/comment-form.tsx
+++ b/src/components/organisms/forms/comment-form.tsx
@@ -1,6 +1,9 @@
import Button from '@components/atoms/buttons/button';
import Form, { type FormProps } from '@components/atoms/forms/form';
-import Heading, { type HeadingLevel } from '@components/atoms/headings/heading';
+import Heading, {
+ type HeadingProps,
+ type HeadingLevel,
+} from '@components/atoms/headings/heading';
import Spinner from '@components/atoms/loaders/spinner';
import LabelledField from '@components/molecules/forms/labelled-field';
import { FC, ReactNode, useState } from 'react';
@@ -34,7 +37,11 @@ export type CommentFormProps = Pick<FormProps, 'className'> & {
*/
title?: string;
/**
- * The title level.
+ * The form title alignment. Default: left.
+ */
+ titleAlignment?: HeadingProps['alignment'];
+ /**
+ * The title level. Default: 2.
*/
titleLevel?: HeadingLevel;
};
@@ -44,6 +51,7 @@ const CommentForm: FC<CommentFormProps> = ({
parentId,
saveComment,
title,
+ titleAlignment,
titleLevel = 2,
...props
}) => {
@@ -117,7 +125,7 @@ const CommentForm: FC<CommentFormProps> = ({
{...props}
>
{title && (
- <Heading id={formId} level={titleLevel}>
+ <Heading id={formId} level={titleLevel} alignment={titleAlignment}>
{title}
</Heading>
)}
diff --git a/src/components/organisms/layout/summary.module.scss b/src/components/organisms/layout/summary.module.scss
index 7e86dd2..62dfc0e 100644
--- a/src/components/organisms/layout/summary.module.scss
+++ b/src/components/organisms/layout/summary.module.scss
@@ -29,8 +29,11 @@
&:hover {
.icon {
- transform: scaleX(1.4);
- transform-origin: left;
+ --icon-size: #{fun.convert-px(35)};
+
+ :global {
+ animation: pulse 1.5s ease-in-out 0.2s infinite;
+ }
}
}
}