Skip to content

Commit e42ec8c

Browse files
FrontendlandFrontendland
committed
✨ Add AspectRatio component
1 parent d698776 commit e42ec8c

File tree

12 files changed

+199
-15
lines changed

12 files changed

+199
-15
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,7 @@ import { Accordion } from 'webcoreui/react'
202202

203203
- [Accordion](https://github.com/Frontendland/webcoreui/tree/main/src/components/Accordion)
204204
- [Alert](https://github.com/Frontendland/webcoreui/tree/main/src/components/Alert)
205+
- [AspectRatio](https://github.com/Frontendland/webcoreui/tree/main/src/components/AspectRatio)
205206
- [Avatar](https://github.com/Frontendland/webcoreui/tree/main/src/components/Avatar)
206207
- [Badge](https://github.com/Frontendland/webcoreui/tree/main/src/components/Badge)
207208
- [Breadcrumb](https://github.com/Frontendland/webcoreui/tree/main/src/components/Breadcrumb)

‎src/blocks/BlogCard/blog-card.module.scss‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,7 @@
2020
}
2121

2222
img {
23-
@include border-radius();
2423
@include size('w100%');
25-
26-
object-fit: cover;
2724
}
2825

2926
strong {

‎src/blocks/Hero/hero.module.scss‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,7 @@
2020
}
2121

2222
img {
23-
@include border-radius();
2423
@include size('w100%');
25-
26-
object-fit: cover;
2724
}
2825

2926
svg {

‎src/components/AspectRatio/AspectRatio.astro‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
import type { AspectRatioProps } from './aspectratio'
3+
4+
import styles from './aspect-ratio.module.scss'
5+
6+
interface Props extends AspectRatioProps {}
7+
8+
const {
9+
ratio,
10+
className
11+
} = Astro.props
12+
13+
const classes = [
14+
styles.ratio,
15+
className
16+
]
17+
---
18+
19+
<div class:list={classes} style={`aspect-ratio: ${ratio.replace(':', '/')};`}>
20+
<slot />
21+
</div>

‎src/components/AspectRatio/AspectRatio.svelte‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<script lang="ts">
2+
import type { AspectRatioProps } from './aspectratio'
3+
4+
import { classNames } from '../../utils/classNames'
5+
6+
import styles from './aspect-ratio.module.scss'
7+
8+
export let ratio: AspectRatioProps['ratio'] = ''
9+
export let className: AspectRatioProps['className'] = ''
10+
11+
const classes = classNames([
12+
styles.ratio,
13+
className
14+
])
15+
</script>
16+
17+
<div class={classes} style={`aspect-ratio: ${ratio.replace(':', '/')};`}>
18+
<slot />
19+
</div>

‎src/components/AspectRatio/AspectRatio.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react'
2+
import type { ReactAspectRatioProps } from './aspectratio'
3+
4+
import { classNames } from '../../utils/classNames'
5+
6+
import styles from './aspect-ratio.module.scss'
7+
8+
const AspectRatio = ({
9+
ratio,
10+
children,
11+
className
12+
}: ReactAspectRatioProps) => {
13+
const classes = classNames([
14+
styles.ratio,
15+
className
16+
])
17+
18+
return (
19+
<div
20+
className={classes}
21+
style={{ aspectRatio: ratio.replace(':', '/') }}
22+
>
23+
{children}
24+
</div>
25+
)
26+
}
27+
28+
export default AspectRatio

‎src/components/AspectRatio/aspect-ratio.module.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@import '../../scss/config.scss';
2+
3+
.ratio {
4+
@include layout(flex);
5+
@include size('w100%');
6+
7+
* {
8+
@include size(100%);
9+
}
10+
}

‎src/components/AspectRatio/aspectratio.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export type AspectRatioProps = {
2+
ratio: string
3+
className?: string
4+
}
5+
6+
export type ReactAspectRatioProps = {
7+
children: React.ReactNode
8+
} & AspectRatioProps

‎src/pages/components/aspect-ratio.astro‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
---
2+
import ComponentWrapper from '@static/ComponentWrapper.astro'
3+
import Layout from '@static/Layout.astro'
4+
5+
import AstroAspectRatio from '@components/AspectRatio/AspectRatio.astro'
6+
import SvelteAspectRatio from '@components/AspectRatio/AspectRatio.svelte'
7+
import ReactAspectRatio from '@components/AspectRatio/AspectRatio.tsx'
8+
9+
import { getSections } from '@helpers'
10+
11+
const sections = getSections({
12+
title: 'aspect ratios',
13+
components: [AstroAspectRatio, SvelteAspectRatio, ReactAspectRatio]
14+
})
15+
---
16+
17+
<Layout>
18+
<h1>AspectRatio</h1>
19+
<div class="grid md-2 lg-3">
20+
<ComponentWrapper type="Astro">
21+
<AstroAspectRatio ratio="16/9">
22+
<img src="../img/placeholder1.png" />
23+
</AstroAspectRatio>
24+
</ComponentWrapper>
25+
26+
<ComponentWrapper type="Svelte">
27+
<SvelteAspectRatio ratio="16/9">
28+
<img src="../img/placeholder2.png" />
29+
</SvelteAspectRatio>
30+
</ComponentWrapper>
31+
32+
<ComponentWrapper type="React">
33+
<ReactAspectRatio ratio="16/9">
34+
<img src="../img/placeholder3.png" />
35+
</ReactAspectRatio>
36+
</ComponentWrapper>
37+
</div>
38+
39+
{sections.map(section => (
40+
<h1>{section.title}</h1>
41+
<Fragment>
42+
{section.subTitle && <h2 set:html={section.subTitle} />}
43+
</Fragment>
44+
<div class="grid md-2 lg-3">
45+
<ComponentWrapper title="Default">
46+
<section.component ratio="16/9">
47+
<img src="../img/placeholder1.png" />
48+
</section.component>
49+
</ComponentWrapper>
50+
51+
<ComponentWrapper title="Alternate syntax">
52+
<section.component ratio="16:9">
53+
<img src="../img/placeholder2.png" />
54+
</section.component>
55+
</ComponentWrapper>
56+
57+
<ComponentWrapper title="Custom styles">
58+
<section.component ratio="16:9" className="ratio">
59+
<img src="../img/placeholder3.png" />
60+
</section.component>
61+
</ComponentWrapper>
62+
63+
<ComponentWrapper title="1:1">
64+
<section.component ratio="1">
65+
<img src="../img/placeholder1.png" />
66+
</section.component>
67+
</ComponentWrapper>
68+
69+
<ComponentWrapper title="4:3">
70+
<section.component ratio="4/3">
71+
<img src="../img/placeholder2.png" />
72+
</section.component>
73+
</ComponentWrapper>
74+
75+
<ComponentWrapper title="21:9">
76+
<section.component ratio="21/9">
77+
<img src="../img/placeholder3.png" />
78+
</section.component>
79+
</ComponentWrapper>
80+
</div>
81+
))}
82+
</Layout>
83+
84+
<style lang="scss" is:global>
85+
@import '../../scss/config.scss';
86+
87+
.ratio {
88+
@include background(primary-50);
89+
90+
img {
91+
object-fit: contain;
92+
}
93+
}
94+
</style>

‎src/pages/components/carousel.astro‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -236,8 +236,6 @@ const sections = getSections({
236236

237237
img {
238238
@include size('w100%', h150px);
239-
240-
object-fit: cover;
241239
}
242240

243241
.img-li {

0 commit comments

Comments
 (0)