feat(rebound): add flip option

Flip mirrors the current divider vertically.

Author: openscript

src/components/ReboundDivider.tsx

@@ -4,24 +4,25 @@ import { CustomSVGElement } from '../elements/CustomSVGElement';
 type Props = {
   rebound: number;
   height: number;
+  flip?: boolean;
   primaryColor: string;
   secondaryColor?: string;
 };
 
-export function ReboundDivider({ rebound, height, primaryColor, secondaryColor }: Props) {
+export function ReboundDivider({ rebound, height, flip, primaryColor, secondaryColor }: Props) {
   const viewBox = `0 0 100 ${height}`;
-  const points = `0,${height} ${rebound},0 100,${height}`;
+  const points = flip ? `0,0 ${rebound},${height} 100,0` : `0,${height} ${rebound},0 100,${height}`;
 
   return (
     <CustomSVGElement
       css={css`
-        background-color: ${secondaryColor || 'transparent'};
+        background-color: ${flip ? primaryColor : secondaryColor || 'transparent'};
         width: 100%;
         height: ${height}px;
       `}
       viewBox={viewBox}
     >
-      <polygon points={points} fill={primaryColor} />
+      <polygon points={points} fill={flip ? secondaryColor : primaryColor} />
     </CustomSVGElement>
   );
 }

src/components/ReboundSection.tsx

@@ -1,14 +1,16 @@
-import { css, SerializedStyles } from '@emotion/react';
+/* eslint-disable no-nested-ternary */
+import { css } from '@emotion/react';
 import { ElementType, HTMLProps } from 'react';
 
 type Props = {
   rebound: number;
-  as?: ElementType;
   bottomRebound?: number;
   height: number;
   bottomHeight?: number;
-  primaryColor?: string;
   position?: 'top' | 'bottom' | 'both';
+  flip?: 'top' | 'bottom' | 'both' | 'none';
+  primaryColor?: string;
+  as?: ElementType;
 };
 
 export function ReboundSection({
@@ -19,38 +21,32 @@ export function ReboundSection({
   height,
   bottomHeight,
   primaryColor,
-  position,
+  position = 'top',
+  flip = 'none',
   ...props
 }: Props & HTMLProps<HTMLElement>) {
   const baseStyles = css`
     background-color: ${primaryColor ?? '#000000'};
   `;
-  let styles: SerializedStyles;
+  const polygon = [
+    position === 'top' ? '0 100%' : flip !== 'none' && flip !== 'bottom' ? `0 100%` : `0 calc(100% - ${bottomHeight ?? height}px)`,
+    position === 'top'
+      ? '0 100%'
+      : flip !== 'none' && flip !== 'bottom'
+      ? `${`${bottomRebound ?? rebound}%`} calc(100% - ${bottomHeight ?? height}px)`
+      : `${`${bottomRebound ?? rebound}%`} 100%`,
+    position === 'top' ? '100% 100%' : flip !== 'none' && flip !== 'bottom' ? '100% 100%' : `100% calc(100% - ${bottomHeight ?? height}px)`,
+    position === 'bottom' ? '100% 0' : flip !== 'none' && flip !== 'top' ? '100% 0' : `100% ${height}px`,
+    position === 'bottom' ? '100% 0' : flip !== 'none' && flip !== 'top' ? `${rebound}% ${height}px` : `${rebound}% 0`,
+    position === 'bottom' ? '0 0' : flip !== 'none' && flip !== 'top' ? `0 0` : `0 ${height}px`,
+  ];
+
+  const styles = css`
+    ${position !== 'top' ? `border-bottom: ${bottomHeight ?? height}px solid transparent;` : ''}
+    ${position !== 'bottom' ? `border-top: ${height}px solid transparent;` : ''}
+    clip-path: polygon(${polygon.join(',')});
+  `;
 
-  if (position === 'bottom') {
-    styles = css`
-      border-bottom: ${height}px solid transparent;
-      clip-path: polygon(0 0, 0 calc(100% - ${height}px), ${rebound}% 100%, 100% calc(100% - ${height}px), 100% 0);
-    `;
-  } else if (position === 'both') {
-    styles = css`
-      border-top: ${height}px solid transparent;
-      border-bottom: ${bottomHeight ?? height}px solid transparent;
-      clip-path: polygon(
-        0 ${height}px,
-        0 calc(100% - ${bottomHeight ?? height}px),
-        ${`${bottomRebound ?? rebound}%`} 100%,
-        100% calc(100% - ${bottomHeight ?? height}px),
-        100% ${height}px,
-        ${`${rebound}%`} 0
-      );
-    `;
-  } else {
-    styles = css`
-      border-top: ${height}px solid transparent;
-      clip-path: polygon(0 ${height}px, 0 100%, 100% 100%, 100% ${height}px, ${rebound}% 0);
-    `;
-  }
   // eslint-disable-next-line react/jsx-props-no-spreading
   return <Section css={[baseStyles, styles, externalStyles]} {...props} />;
 }

stories/ReboundDivider.stories.tsx

@@ -34,11 +34,13 @@ export default {
 export function Basic({
   rebound,
   height,
+  flip,
   primaryColor,
   secondaryColor,
 }: {
   rebound: number;
   height: number;
+  flip: boolean;
   primaryColor: string;
   secondaryColor: string;
 }) {
@@ -50,7 +52,7 @@ export function Basic({
           color: #000;
         `}
       />
-      <ReboundDivider rebound={rebound} height={height} primaryColor={primaryColor} secondaryColor={secondaryColor} />
+      <ReboundDivider rebound={rebound} height={height} flip={flip} primaryColor={primaryColor} secondaryColor={secondaryColor} />
       <SectionDummy
         css={css`
           background-color: ${primaryColor};

stories/ReboundSection.stories.tsx

@@ -39,23 +39,18 @@ export default {
   },
 };
 
-export function Basic({
-  rebound,
-  bottomRebound,
-  height,
-  bottomHeight,
-  primaryColor,
-  secondaryColor,
-  position,
-}: {
+type StoryProps = {
   rebound: number;
-  bottomRebound: number;
+  bottomRebound?: number;
   height: number;
-  bottomHeight: number;
-  primaryColor: string;
-  secondaryColor: string;
-  position?: 'bottom' | 'top';
-}) {
+  bottomHeight?: number;
+  position?: 'top' | 'bottom' | 'both';
+  flip?: 'top' | 'bottom' | 'both' | 'none';
+  primaryColor?: string;
+  secondaryColor?: string;
+};
+
+export function Basic({ rebound, bottomRebound, height, bottomHeight, primaryColor, secondaryColor, position, flip }: StoryProps) {
   return (
     <Fragment>
       <SectionDummy
@@ -72,6 +67,7 @@ export function Basic({
         bottomHeight={bottomHeight}
         primaryColor={primaryColor}
         position={position}
+        flip={flip}
         css={css`
           color: #fff;
           margin-top: -${height}px;
@@ -108,15 +104,8 @@ export function BackgroundImages({
   primaryColor,
   secondaryColor,
   position,
-}: {
-  rebound: number;
-  bottomRebound: number;
-  height: number;
-  bottomHeight: number;
-  primaryColor: string;
-  secondaryColor: string;
-  position?: 'bottom' | 'top';
-}) {
+  flip,
+}: StoryProps) {
   return (
     <Fragment>
       <SectionDummy
@@ -137,6 +126,7 @@ export function BackgroundImages({
         bottomHeight={bottomHeight}
         primaryColor={primaryColor}
         position={position}
+        flip={flip}
         css={css`
           color: #fff;
           background-image: url(./res/photo.jpg);