From 7fd11d99f8a547e4acb89b9f9159b92e208dc90f Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 20 May 2022 22:12:43 +0200 Subject: chore: update images styles --- .../molecules/images/responsive-image.module.scss | 46 ++++++++++++++++++---- .../molecules/images/responsive-image.stories.tsx | 17 ++++++++ .../molecules/images/responsive-image.tsx | 14 ++++++- .../organisms/layout/overview.module.scss | 14 +++---- src/components/organisms/layout/overview.tsx | 2 +- src/styles/pages/article.module.scss | 2 +- src/styles/pages/partials/_article-media.scss | 17 ++++++-- src/styles/pages/partials/_article-wp-blocks.scss | 32 +++++++++------ 8 files changed, 111 insertions(+), 33 deletions(-) (limited to 'src') diff --git a/src/components/molecules/images/responsive-image.module.scss b/src/components/molecules/images/responsive-image.module.scss index 3a4f283..8a1d51f 100644 --- a/src/components/molecules/images/responsive-image.module.scss +++ b/src/components/molecules/images/responsive-image.module.scss @@ -1,26 +1,49 @@ @use "@styles/abstracts/functions" as fun; +.caption { + margin: 0; + padding: fun.convert-px(4) var(--spacing-2xs); + background: var(--color-bg-secondary); + border: fun.convert-px(1) solid var(--color-border-light); + font-size: var(--font-size-sm); + font-weight: 500; +} + .wrapper { display: flex; flex-flow: column; width: fit-content; - margin: 0; + margin: 0 auto; position: relative; text-align: center; -} -.caption { - margin: 0; - padding: fun.convert-px(4) var(--spacing-2xs); - background: var(--color-bg-secondary); - border: fun.convert-px(1) solid var(--color-border-light); - font-weight: 500; + &--has-borders { + .caption { + margin-top: fun.convert-px(4); + } + } + + &--has-borders#{&}--has-link { + .link { + padding: fun.convert-px(4); + } + } + + &--has-borders#{&}--no-link { + padding: fun.convert-px(4); + border: fun.convert-px(1) solid var(--color-border); + box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0 + var(--color-shadow); + } } .link { display: flex; flex-flow: column; background: none; + border: fun.convert-px(1) solid var(--color-border); + box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0 + var(--color-shadow); text-decoration: none; .caption { @@ -29,6 +52,11 @@ &:hover, &:focus { + box-shadow: 0 0 fun.convert-px(2) 0 var(--color-shadow-light), + fun.convert-px(2) fun.convert-px(2) fun.convert-px(4) fun.convert-px(1) + var(--color-shadow-light), + fun.convert-px(4) fun.convert-px(4) fun.convert-px(8) fun.convert-px(2) + var(--color-shadow-light); transform: scale(var(--scale-up, 1.05)); } @@ -40,6 +68,8 @@ } &:active { + box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) + fun.convert-px(1) var(--color-shadow-light); transform: scale(var(--scale-down, 0.95)); .caption { diff --git a/src/components/molecules/images/responsive-image.stories.tsx b/src/components/molecules/images/responsive-image.stories.tsx index 35d9116..4294208 100644 --- a/src/components/molecules/images/responsive-image.stories.tsx +++ b/src/components/molecules/images/responsive-image.stories.tsx @@ -7,6 +7,9 @@ import ResponsiveImage from './responsive-image'; export default { title: 'Molecules/Images/ResponsiveImage', component: ResponsiveImage, + args: { + withBorders: false, + }, argTypes: { alt: { control: { @@ -75,6 +78,20 @@ export default { required: true, }, }, + withBorders: { + control: { + type: 'boolean', + }, + description: 'Add borders around the image.', + table: { + category: 'Styles', + defaultValue: { summary: false }, + }, + type: { + name: 'boolean', + required: false, + }, + }, }, } as ComponentMeta; diff --git a/src/components/molecules/images/responsive-image.tsx b/src/components/molecules/images/responsive-image.tsx index d07dd6c..4541df8 100644 --- a/src/components/molecules/images/responsive-image.tsx +++ b/src/components/molecules/images/responsive-image.tsx @@ -31,6 +31,10 @@ export type ResponsiveImageProps = Omit< * The image width. */ width: number | string; + /** + * Wrap the image with borders. + */ + withBorders?: boolean; }; /** @@ -45,10 +49,18 @@ const ResponsiveImage: FC = ({ layout, objectFit, target, + withBorders, ...props }) => { + const bordersModifier = withBorders + ? 'wrapper--has-borders' + : 'wrapper--no-borders'; + const linkModifier = target ? 'wrapper--has-link' : 'wrapper--no-link'; + return ( -
+
{target ? ( = ({ className = '', cover, meta }) => {
{cover && ( )} diff --git a/src/styles/pages/article.module.scss b/src/styles/pages/article.module.scss index 04acad9..a5299fe 100644 --- a/src/styles/pages/article.module.scss +++ b/src/styles/pages/article.module.scss @@ -11,7 +11,7 @@ margin-right: var(--spacing-2xs); padding: var(--spacing-2xs) var(--spacing-xs); - &__icon { + figure { max-width: fun.convert-px(22); margin-right: var(--spacing-2xs); } diff --git a/src/styles/pages/partials/_article-media.scss b/src/styles/pages/partials/_article-media.scss index 8359881..0cd3654 100644 --- a/src/styles/pages/partials/_article-media.scss +++ b/src/styles/pages/partials/_article-media.scss @@ -1,11 +1,20 @@ +@use "@styles/abstracts/functions" as fun; + @mixin styles { figure { - margin: var(--spacing-md) 0; + display: flex; + flex-flow: column; + width: fit-content; + margin: 0 auto; + position: relative; + text-align: center; } figcaption { - margin-top: var(--spacing-xs); - font-size: var(--font-size-sm); - text-align: center; + margin: 0; + padding: fun.convert-px(4) var(--spacing-2xs); + background: var(--color-bg-secondary); + border: fun.convert-px(1) solid var(--color-border-light); + font-weight: 500; } } diff --git a/src/styles/pages/partials/_article-wp-blocks.scss b/src/styles/pages/partials/_article-wp-blocks.scss index f75a4d5..33e59a1 100644 --- a/src/styles/pages/partials/_article-wp-blocks.scss +++ b/src/styles/pages/partials/_article-wp-blocks.scss @@ -62,6 +62,24 @@ } } + .wp-block-image { + display: flex; + flex-flow: column; + width: fit-content; + margin: 0 auto; + padding: fun.convert-px(4); + position: relative; + border: fun.convert-px(1) solid var(--color-border); + box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0 + var(--color-shadow); + text-align: center; + + figcaption { + margin-top: fun.convert-px(4); + font-size: var(--font-size-sm); + } + } + .wp-block-gallery { display: grid; grid-template-columns: minmax(0, 1fr); @@ -142,18 +160,10 @@ } } } - } - .wp-block-image { - img { - display: block; - margin: auto; - box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow), - fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 - var(--color-shadow-light), - fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0 - var(--color-shadow-light); - text-align: center; + .wp-block-image img { + height: 100%; + object-fit: cover; } } -- cgit v1.2.3