Skip to content

Commit 2f2044e

Browse files
openscriptopenscript
committed
feat(rebound): add rebound section
1 parent 0bf4763 commit 2f2044e

File tree

3 files changed

+227
-0
lines changed

3 files changed

+227
-0
lines changed

‎src/components/ReboundSection.tsx

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { css, SerializedStyles } from '@emotion/react';
2+
import { ElementType, HTMLProps } from 'react';
3+
4+
type Props = {
5+
rebound: number;
6+
as?: ElementType;
7+
bottomRebound?: number;
8+
height: number;
9+
bottomHeight?: number;
10+
primaryColor: string;
11+
position?: 'top' | 'bottom' | 'both';
12+
};
13+
14+
export function ReboundSection({
15+
css: externalStyles,
16+
as: Section = 'section',
17+
rebound,
18+
bottomRebound,
19+
height,
20+
bottomHeight,
21+
primaryColor,
22+
position,
23+
...props
24+
}: Props & HTMLProps<HTMLElement>) {
25+
const baseStyles = css`
26+
background-color: ${primaryColor};
27+
`;
28+
let styles: SerializedStyles;
29+
30+
if (position === 'bottom') {
31+
styles = css`
32+
border-bottom: ${height}px solid transparent;
33+
clip-path: polygon(0 0, 0 calc(100% - ${height}px), ${rebound}% 100%, 100% calc(100% - ${height}px), 100% 0);
34+
`;
35+
} else if (position === 'both') {
36+
styles = css`
37+
border-top: ${height}px solid transparent;
38+
border-bottom: ${bottomHeight ?? height}px solid transparent;
39+
clip-path: polygon(
40+
0 ${height}px,
41+
0 calc(100% - ${bottomHeight ?? height}px),
42+
${`${bottomRebound ?? rebound}%`} 100%,
43+
100% calc(100% - ${bottomHeight ?? height}px),
44+
100% ${height}px,
45+
${`${rebound}%`} 0
46+
);
47+
`;
48+
} else {
49+
styles = css`
50+
border-top: ${height}px solid transparent;
51+
clip-path: polygon(0 ${height}px, 0 100%, 100% 100%, 100% ${height}px, ${rebound}% 0);
52+
`;
53+
}
54+
// eslint-disable-next-line react/jsx-props-no-spreading
55+
return <Section css={[baseStyles, styles, externalStyles]} {...props} />;
56+
}

‎src/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export { AslantDivider } from './components/AslantDivider';
22
export { AslantSection } from './components/AslantSection';
33
export { ReboundDivider } from './components/ReboundDivider';
4+
export { ReboundSection } from './components/ReboundSection';

‎stories/ReboundSection.stories.tsx

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
import { css } from '@emotion/react';
2+
import { Fragment } from 'react';
3+
import { ReboundSection } from '../src';
4+
import { SectionDummy } from './components/SectionDummy';
5+
6+
export default {
7+
title: 'Rebound/Section',
8+
component: ReboundSection,
9+
parameters: {
10+
docs: {
11+
page: null,
12+
},
13+
},
14+
argTypes: {
15+
rebound: {
16+
defaultValue: 20,
17+
control: { type: 'range', min: 0, max: 100 },
18+
},
19+
bottomRebound: {
20+
defaultValue: 40,
21+
control: { type: 'range', min: 0, max: 100 },
22+
},
23+
height: {
24+
defaultValue: 40,
25+
control: { type: 'number', min: 1 },
26+
},
27+
bottomHeight: {
28+
defaultValue: 60,
29+
control: { type: 'number', min: 1 },
30+
},
31+
primaryColor: {
32+
defaultValue: '#000',
33+
control: { type: 'color' },
34+
},
35+
secondaryColor: {
36+
defaultValue: '#FFF',
37+
control: { type: 'color' },
38+
},
39+
},
40+
};
41+
42+
export function Basic({
43+
rebound,
44+
bottomRebound,
45+
height,
46+
bottomHeight,
47+
primaryColor,
48+
secondaryColor,
49+
position,
50+
}: {
51+
rebound: number;
52+
bottomRebound: number;
53+
height: number;
54+
bottomHeight: number;
55+
primaryColor: string;
56+
secondaryColor: string;
57+
position?: 'bottom' | 'top';
58+
}) {
59+
return (
60+
<Fragment>
61+
<SectionDummy
62+
css={css`
63+
background-color: ${secondaryColor};
64+
color: #000;
65+
padding-bottom: ${height}px;
66+
`}
67+
/>
68+
<ReboundSection
69+
rebound={rebound}
70+
bottomRebound={bottomRebound}
71+
height={height}
72+
bottomHeight={bottomHeight}
73+
primaryColor={primaryColor}
74+
position={position}
75+
css={css`
76+
color: #fff;
77+
margin-top: -${height}px;
78+
margin-bottom: -${bottomHeight}px;
79+
`}
80+
>
81+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, placeat velit? Sapiente delectus, quo perspiciatis, veniam at porro
82+
consequatur, vel explicabo optio impedit necessitatibus perferendis rerum aliquid itaque fugit inventore. Omnis debitis voluptatibus
83+
sunt error laboriosam aperiam fuga. Eius, labore, aut, fugiat eligendi nam quasi doloremque dolore laudantium atque consequuntur
84+
minus! Soluta similique reiciendis beatae unde perspiciatis et! Doloribus, nostrum. Excepturi non maxime eius minus voluptate. Ad,
85+
nemo distinctio suscipit voluptatibus, dignissimos magnam modi quisquam illo nobis, a vitae unde sit consequatur eum numquam ipsa id
86+
in. Expedita, quod quam? Nam, repellendus! Assumenda impedit voluptas corporis debitis quam aut cumque, perferendis, nobis minus
87+
obcaecati quos distinctio tenetur delectus repellat error reiciendis laborum? Ratione veniam illum odio tempora ad voluptates natus?
88+
Maiores at veniam soluta neque tempore? Non molestiae eum iusto alias vel quisquam ipsum, numquam in molestias minima eius aut, ex
89+
saepe. Maxime earum molestias voluptates dicta iste iure veniam?
90+
</ReboundSection>
91+
92+
<SectionDummy
93+
css={css`
94+
background-color: ${secondaryColor};
95+
color: #000;
96+
padding-top: ${bottomHeight}px;
97+
`}
98+
/>
99+
</Fragment>
100+
);
101+
}
102+
103+
export function BackgroundImages({
104+
rebound,
105+
bottomRebound,
106+
height,
107+
bottomHeight,
108+
primaryColor,
109+
secondaryColor,
110+
position,
111+
}: {
112+
rebound: number;
113+
bottomRebound: number;
114+
height: number;
115+
bottomHeight: number;
116+
primaryColor: string;
117+
secondaryColor: string;
118+
position?: 'bottom' | 'top';
119+
}) {
120+
return (
121+
<Fragment>
122+
<SectionDummy
123+
css={css`
124+
background-color: ${secondaryColor};
125+
background-image: url(./res/photo2.jpg);
126+
background-size: cover cover;
127+
background-position: center;
128+
background-repeat: no-repeat;
129+
color: #000;
130+
padding-bottom: ${height}px;
131+
`}
132+
/>
133+
<ReboundSection
134+
rebound={rebound}
135+
bottomRebound={bottomRebound}
136+
height={height}
137+
bottomHeight={bottomHeight}
138+
primaryColor={primaryColor}
139+
position={position}
140+
css={css`
141+
color: #fff;
142+
background-image: url(./res/photo.jpg);
143+
background-size: cover cover;
144+
background-position: center;
145+
background-repeat: no-repeat;
146+
margin-top: -${height}px;
147+
margin-bottom: -${bottomHeight}px;
148+
`}
149+
>
150+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, placeat velit? Sapiente delectus, quo perspiciatis, veniam at porro
151+
consequatur, vel explicabo optio impedit necessitatibus perferendis rerum aliquid itaque fugit inventore. Omnis debitis voluptatibus
152+
sunt error laboriosam aperiam fuga. Eius, labore, aut, fugiat eligendi nam quasi doloremque dolore laudantium atque consequuntur
153+
minus! Soluta similique reiciendis beatae unde perspiciatis et! Doloribus, nostrum. Excepturi non maxime eius minus voluptate. Ad,
154+
nemo distinctio suscipit voluptatibus, dignissimos magnam modi quisquam illo nobis, a vitae unde sit consequatur eum numquam ipsa id
155+
in. Expedita, quod quam? Nam, repellendus! Assumenda impedit voluptas corporis debitis quam aut cumque, perferendis, nobis minus
156+
obcaecati quos distinctio tenetur delectus repellat error reiciendis laborum? Ratione veniam illum odio tempora ad voluptates natus?
157+
Maiores at veniam soluta neque tempore? Non molestiae eum iusto alias vel quisquam ipsum, numquam in molestias minima eius aut, ex
158+
saepe. Maxime earum molestias voluptates dicta iste iure veniam?
159+
</ReboundSection>
160+
161+
<SectionDummy
162+
css={css`
163+
background-color: ${secondaryColor};
164+
color: #000;
165+
padding-top: ${bottomHeight}px;
166+
`}
167+
/>
168+
</Fragment>
169+
);
170+
}

0 commit comments

Comments
 (0)