diff options
| author | Armand Philippot <git@armandphilippot.com> | 2023-09-28 18:03:43 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2023-10-24 12:25:00 +0200 |
| commit | 837e0e904c40f7b87561c34ca3f49edd5d8d1c52 (patch) | |
| tree | 37835dd2c84ed770b5719152aab0b74d93c0878c /src/components/organisms/layout | |
| parent | d17d894f398650209c0ddd29502308de8c07bd93 (diff) | |
feat(components): replace icons with a generic Icon component
Sizes are also predefined and can be set using the `size` prop,
so the consumers should no longer adjust the size in CSS.
Diffstat (limited to 'src/components/organisms/layout')
| -rw-r--r-- | src/components/organisms/layout/summary.module.scss | 5 | ||||
| -rw-r--r-- | src/components/organisms/layout/summary.tsx | 8 |
2 files changed, 7 insertions, 6 deletions
diff --git a/src/components/organisms/layout/summary.module.scss b/src/components/organisms/layout/summary.module.scss index 9530312..5052f73 100644 --- a/src/components/organisms/layout/summary.module.scss +++ b/src/components/organisms/layout/summary.module.scss @@ -13,7 +13,8 @@ padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md); border: fun.convert-px(1) solid var(--color-primary-dark); border-radius: fun.convert-px(3); - box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0 + box-shadow: + fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0 var(--color-shadow), fun.convert-px(3) fun.convert-px(3) fun.convert-px(3) fun.convert-px(-1) var(--color-shadow-light), @@ -29,8 +30,6 @@ &:hover { .icon { - --icon-size: #{fun.convert-px(35)}; - :global { animation: pulse 1.5s ease-in-out 0.2s infinite; } diff --git a/src/components/organisms/layout/summary.tsx b/src/components/organisms/layout/summary.tsx index e7a5d48..99f6c85 100644 --- a/src/components/organisms/layout/summary.tsx +++ b/src/components/organisms/layout/summary.tsx @@ -3,10 +3,10 @@ import { useIntl } from 'react-intl'; import type { Article, Meta as MetaType } from '../../../types'; import { useReadingTime } from '../../../utils/hooks'; import { - Arrow, ButtonLink, Heading, type HeadingLevel, + Icon, Link, } from '../../atoms'; import { @@ -123,11 +123,13 @@ export const Summary: FC<SummaryProps> = ({ <ButtonLink className={styles['read-more']} to={url}> <> {readMore} - <Arrow + <Icon aria-hidden={true} className={styles.icon} // eslint-disable-next-line react/jsx-no-literals -- Direction allowed - direction="right" + orientation="right" + // eslint-disable-next-line react/jsx-no-literals -- Shape allowed + shape="arrow" /> </> </ButtonLink> |