v0.3.1

Author: jwoo0122

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/design-system",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Design System by Channel",
   "repository": {
     "type": "git",

package.json

@@ -53,6 +53,7 @@ export default {
 const Container = styled.div`
   width: 600px;
   height: 500px;
+  position: relative;
   overflow: scroll;
   border: 1px solid ${props => props.foundation?.theme?.['bg-black-dark']};
 `
@@ -93,16 +94,18 @@ const ScrollContent = styled.div`
 
 const Template = (props) => {
   const targetRef = useRef<any>()
+  const containerRef = useRef<any>()
 
   return (
-    <Container>
+    <Container ref={containerRef}>
       <Wrapper>
         <Target ref={targetRef}>
           target
         </Target>
         <Overlay
           {...props}
           target={targetRef.current}
+          container={containerRef.current}
         >
           <Children>
             <ScrollContent>

src/components/Overlay/Overlay.stories.tsx

@@ -33,19 +33,24 @@ const rootElement =
   document.getElementById!('root') ||
   document.getElementById!('__next') as HTMLElement
 
-function getOverlayPosition({ target }: GetOverlayPositionProps): React.CSSProperties {
+function getOverlayPosition({ container, target }: GetOverlayPositionProps): React.CSSProperties {
   if (target) {
     const { top: targetTop, left: targetLeft } = target.getBoundingClientRect()
 
-    const top = targetTop - target.clientTop
-    const left = targetLeft - target.clientLeft
+    const top = container ?
+      targetTop - target.clientTop - container.getBoundingClientRect().top + container.scrollTop :
+      targetTop - target.clientTop
+    const left = container ?
+      targetLeft - target.clientLeft - container.getBoundingClientRect().left + container.scrollLeft :
+      targetLeft - target.clientLeft
 
     return { top, left }
   }
   return {}
 }
 
 function getOverlayTranslation({
+  container,
   target,
   overlay,
   placement,
@@ -54,12 +59,13 @@ function getOverlayTranslation({
   keepInContainer,
 }: GetOverlayTranslatationProps): React.CSSProperties {
   if (target) {
+    const containerElement = container || rootElement as HTMLElement
     const {
       width: rootWidth,
       height: rootHeight,
       top: rootTop,
       left: rootLeft,
-    } = rootElement.getBoundingClientRect()
+    } = containerElement.getBoundingClientRect()
     const { width: targetWidth, height: targetHeight, top: targetTop, left: targetLeft } = target.getBoundingClientRect()
     const { width: overlayWidth, height: overlayHeight } = overlay.getBoundingClientRect()
 
@@ -134,6 +140,7 @@ function getOverlayTranslation({
 }
 
 function getOverlayStyle({
+  container,
   target,
   overlay,
   placement,
@@ -142,8 +149,16 @@ function getOverlayStyle({
   keepInContainer,
 }: GetOverlayStyleProps): React.CSSProperties {
   if (target) {
-    const overlayPositionStyle = getOverlayPosition({ target })
-    const overlayTranslateStyle = getOverlayTranslation({ target, overlay, placement, marginX, marginY, keepInContainer })
+    const overlayPositionStyle = getOverlayPosition({ container, target })
+    const overlayTranslateStyle = getOverlayTranslation({
+      container,
+      target,
+      overlay,
+      placement,
+      marginX,
+      marginY,
+      keepInContainer,
+    })
 
     const combinedStyle = {
       ...overlayPositionStyle,
@@ -167,6 +182,7 @@ function Overlay(
     style,
     containerClassName = '',
     containerStyle,
+    container,
     target,
     placement = OverlayPosition.LeftCenter,
     marginX = 0,
@@ -181,7 +197,7 @@ function Overlay(
   const [overlayStyle, setOverlayStyle] = useState<React.CSSProperties>()
   const [isHidden, setIsHidden] = useState<boolean>(true)
   const overlayRef = useRef<HTMLDivElement>(null)
-  const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
   const mergedRef = useMergeRefs<HTMLDivElement>(overlayRef, forwardedRef)
 
   const handleBlockMouseWheel = useCallback((event: HTMLElementEventMap['wheel']) => {
@@ -205,14 +221,9 @@ function Overlay(
     }
   }, [onHide])
 
-  const overlay = useMemo(() => (
-    <Container
-      ref={setContainerRef}
-      className={containerClassName}
-      style={containerStyle}
-      data-testid={containerTestId}
-    >
-      <Wrapper data-testid={wrapperTestId}>
+  const overlay = useMemo(() => {
+    if (container) {
+      return (
         <StyledOverlay
           as={as}
           className={className}
@@ -227,14 +238,40 @@ function Overlay(
         >
           { children }
         </StyledOverlay>
-      </Wrapper>
-    </Container>
-  ), [
+      )
+    }
+    return (
+      <Container
+        ref={containerRef}
+        className={containerClassName}
+        style={containerStyle}
+        data-testid={containerTestId}
+      >
+        <Wrapper data-testid={wrapperTestId}>
+          <StyledOverlay
+            as={as}
+            className={className}
+            isHidden={isHidden}
+            style={{
+              ...(style || {}),
+              ...(overlayStyle || {}),
+            }}
+            ref={mergedRef}
+            data-testid={testId}
+            {...otherProps}
+          >
+            { children }
+          </StyledOverlay>
+        </Wrapper>
+      </Container>
+    )
+  }, [
     as,
     className,
     style,
     containerClassName,
     containerStyle,
+    container,
     isHidden,
     overlayStyle,
     children,
@@ -248,11 +285,12 @@ function Overlay(
   useEventHandler(document, 'click', handleHideOverlay, show)
   useEventHandler(document, 'keyup', handleKeydown, show)
   useEventHandler(target, 'click', handleClickTarget, show)
-  useEventHandler(containerRef, 'wheel', handleBlockMouseWheel, show)
+  useEventHandler(containerRef.current, 'wheel', handleBlockMouseWheel, show)
 
   useEffect(() => {
     if (show) {
       const tempOverlayStyle = getOverlayStyle({
+        container,
         target,
         overlay: overlayRef.current as HTMLElement,
         placement,
@@ -269,11 +307,11 @@ function Overlay(
       }
     }
     return noop
-  }, [show, marginX, marginY, placement, target, keepInContainer])
+  }, [show, container, marginX, marginY, placement, target, keepInContainer])
 
   if (!show) return null
 
-  return ReactDOM.createPortal(overlay, rootElement as HTMLElement)
+  return ReactDOM.createPortal(overlay, container || rootElement as HTMLElement)
 }
 
 export default forwardRef(Overlay)

src/components/Overlay/Overlay.tsx

@@ -8,6 +8,7 @@ export default interface OverlayProps extends UIComponentProps, ChildrenComponen
   show?: boolean
   containerClassName?: string
   containerStyle?: React.CSSProperties
+  container?: HTMLElement | null
   target?: HTMLElement | null
   placement?: OverlayPosition
   marginX?: number
@@ -17,6 +18,7 @@ export default interface OverlayProps extends UIComponentProps, ChildrenComponen
 }
 
 export interface GetOverlayStyleProps {
+  container?: HTMLElement | null
   target?: HTMLElement | null
   overlay: HTMLElement
   placement: OverlayPosition
@@ -26,10 +28,12 @@ export interface GetOverlayStyleProps {
 }
 
 export interface GetOverlayPositionProps {
+  container?: HTMLElement | null
   target: HTMLElement
 }
 
 export interface GetOverlayTranslatationProps {
+  container?: HTMLElement | null
   target: HTMLElement
   overlay: HTMLElement
   placement: OverlayPosition

src/components/Overlay/Overlay.types.ts

@@ -8,6 +8,7 @@ import Switch from './Switch'
 
 export default {
   title: getTitle(base),
+  component: Switch,
   argTypes: {
     onClick: { action: 'onClick' },
   },

src/components/Switch/Switch.stories.tsx

@@ -0,0 +1,19 @@
+/* External dependencies */
+import { createContext } from 'react'
+import { noop } from 'lodash-es'
+
+export interface NavigationContextProps {
+  optionIndex: number
+  showChevron: boolean
+  allowMouseMove: boolean
+  isHoveringOnPresenter: boolean
+  onClickClose: () => void
+}
+
+export const NavigationContext = createContext<NavigationContextProps>({
+  optionIndex: -1,
+  showChevron: false,
+  allowMouseMove: false,
+  isHoveringOnPresenter: false,
+  onClickClose: noop,
+})

src/contexts/NavigationContext.ts

@@ -28,7 +28,6 @@ export * from './components/Header'
 export * from './layout/GNB'
 export * from './layout/GlobalHeader'
 export * from './layout/Client'
-export * from './layout/HeaderContent'
 export * from './layout/Main'
 export * from './layout/Navigations'
 

src/index.ts

@@ -1,3 +1,5 @@
+import { insertItem, removeItem } from '../../../utils/utils'
+
 export interface NavigationState {
   initialWidth: number
   maxWidth: number
@@ -10,21 +12,24 @@ export interface LayoutState {
   sideWidth: number | null
   showSideView: boolean
   showNavigation: boolean
+  navOptions: NavigationState[]
 }
 
 export const defaultState: LayoutState = {
   sideWidth: null,
   showSideView: false,
   showNavigation: true,
+  navOptions: [],
 }
 
 export enum ActionType {
   SET_SIDE_WIDTH,
   OPEN_SIDE_VIEW,
   CLOSE_SIDE_VIEW,
   SET_SHOW_NAVIGATION,
-  ADD_NAVIGATION,
-  CLEAR_NAVIGATIONS,
+  ADD_NAV_OPTION,
+  REMOVE_NAV_OPTION,
+  CLEAR_NAV_OPTION,
 }
 
 interface SetSideWidthAction {
@@ -45,11 +50,28 @@ interface SetShowNavigationAction {
   payload: boolean
 }
 
+interface AddNavOptionAction {
+  type: ActionType.ADD_NAV_OPTION
+  payload: { index: number, option: NavigationState }
+}
+
+interface RemoveNavOptionAction {
+  type: ActionType.REMOVE_NAV_OPTION
+  payload: { index: number }
+}
+
+interface ClearNavOptionAction {
+  type: ActionType.CLEAR_NAV_OPTION
+}
+
 export type LayoutAction = (
   SetSideWidthAction |
   OpenSideViewAction |
   CloseSideViewAction |
-  SetShowNavigationAction
+  SetShowNavigationAction |
+  AddNavOptionAction |
+  RemoveNavOptionAction |
+  ClearNavOptionAction
 )
 
 function LayoutReducer(state: LayoutState = defaultState, action: LayoutAction): LayoutState {
@@ -82,6 +104,27 @@ function LayoutReducer(state: LayoutState = defaultState, action: LayoutAction):
       }
     }
 
+    case ActionType.ADD_NAV_OPTION: {
+      return {
+        ...state,
+        navOptions: insertItem(state.navOptions, action.payload.index, action.payload.option),
+      }
+    }
+
+    case ActionType.REMOVE_NAV_OPTION: {
+      return {
+        ...state,
+        navOptions: removeItem(state.navOptions, action.payload.index),
+      }
+    }
+
+    case ActionType.CLEAR_NAV_OPTION: {
+      return {
+        ...state,
+        navOptions: [],
+      }
+    }
+
     default:
       return state
   }

src/layout/Client/utils/LayoutReducer.ts

@@ -18,12 +18,12 @@ export const HeaderWrapper = styled.div.attrs(({ showSideView, sideWidth }: Head
   grid-column: 1 / 3;
 `
 
-export const LeftHeader = styled.div`
+export const ContentHeader = styled.div`
   grid-row: 1 / 2;
   grid-column: 1 / 2;
 `
 
-export const RightHeader = styled.div`
+export const CoverableHeader = styled.div`
   grid-row: 1 / 2;
   grid-column: 2 / 3;
 `