diff --git a/packages/core/src/__docs__/3-advanced-usage/docs.mdx b/packages/core/src/__docs__/3-advanced-usage/docs.mdx index f552bac..09558f1 100644 --- a/packages/core/src/__docs__/3-advanced-usage/docs.mdx +++ b/packages/core/src/__docs__/3-advanced-usage/docs.mdx @@ -29,7 +29,7 @@ import * as Styled from './styled'; import { WrappedMotion as Motion } from '../../Motion'; import { WrappedVisibilityManager as VisibilityManager } from '../../VisibilityManager'; import CircleExpand from '../../motions/CircleExpand'; -import TripeHoverMenu from '../../motions/ReshapingContainer/__docz__/TripeHoverMenu'; +import TripeHoverMenu from '../../motions/RevealReshapingContainer/__docz__/TripeHoverMenu'; import FocalRevealMove from '../../motions/FocalRevealMove'; import FocalConcealMove from '../../motions/FocalConcealMove'; import FocalTarget from '../../FocalTarget'; diff --git a/packages/core/src/motions/ReshapingContainer/__docz__/docs.mdx b/packages/core/src/motions/ReshapingContainer/__docz__/docs.mdx deleted file mode 100644 index 4b3763a..0000000 --- a/packages/core/src/motions/ReshapingContainer/__docz__/docs.mdx +++ /dev/null @@ -1,46 +0,0 @@ ---- -name: ReshapingContainer -route: /reshaping-container -menu: Composite experiences ---- - -import { Playground, Props } from 'docz'; -import ReshapingContainer from '../index'; -import TripeHoverMenu from './TripeHoverMenu'; - -# ReshapingContainer - -A composite experience that is made up of the [Move](/move) motion and some extra markup for the floating background. -It has been made to be able to efficiently have the parent container resize around its children after state changes. - -This is useful for anything where you want the background to nicely reshape itself around its children, -for example a hover menu! - -> **Tip -** When we say _efficiently_ we mean it 🙌! _Only_ `transform` is utilised. - -## Usage - - - - - -```js -import { ReshapingContainer } from '@element-motion/core'; - -({ children }) => ( - - {motion => {children}} - -); -``` - -## Props - - diff --git a/packages/core/src/motions/RevealReshapingContainer/__docz__/NotificationPill/images/avatar.jpg b/packages/core/src/motions/RevealReshapingContainer/__docz__/NotificationPill/images/avatar.jpg new file mode 100644 index 0000000..eb17bd6 Binary files /dev/null and b/packages/core/src/motions/RevealReshapingContainer/__docz__/NotificationPill/images/avatar.jpg differ diff --git a/packages/core/src/motions/RevealReshapingContainer/__docz__/NotificationPill/index.tsx b/packages/core/src/motions/RevealReshapingContainer/__docz__/NotificationPill/index.tsx new file mode 100644 index 0000000..bd34b5b --- /dev/null +++ b/packages/core/src/motions/RevealReshapingContainer/__docz__/NotificationPill/index.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import * as Common from '@element-motion/dev'; +import * as Styled from './styled'; +import ReshapingContainer from '../../../RevealReshapingContainer'; + +const avatar = require('./images/avatar.jpg'); + +const NotificationPill = () => ( + + val + 1}> + {toggler => ( + + {motion => ( + toggler.set(toggler.shown + 1)}> + + {Styled.messages(toggler.shown)} + + )} + + )} + + +); + +export default NotificationPill; diff --git a/packages/core/src/motions/RevealReshapingContainer/__docz__/NotificationPill/styled.tsx b/packages/core/src/motions/RevealReshapingContainer/__docz__/NotificationPill/styled.tsx new file mode 100644 index 0000000..cf280ce --- /dev/null +++ b/packages/core/src/motions/RevealReshapingContainer/__docz__/NotificationPill/styled.tsx @@ -0,0 +1,46 @@ +import styled from 'styled-components'; + +const avatarSize = '18px'; + +export const MessageNotification = styled.div` + display: flex; + align-items: center; + font-size: 14px; + font-weight: 600; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + cursor: pointer; +`; + +export const AlignCenter = styled.div` + text-align: center; +`; + +export const NotificationText = styled.span` + width: calc(100% - ${avatarSize}); + padding-right: 12px; + overflow: hidden; + text-overflow: ellipsis; +`; + +export const Avatar = styled.img` + border-radius: 50%; + height: ${avatarSize}; + width: ${avatarSize}; + flex-shrink: 0; + margin-right: 6px; + object-fit: cover; + background-color: #ccc; +`; + +export const messages = (index: number = 0) => { + const msgs = [ + 'seriously help me i cant get past genchrio', + 'sekiro is so hard meh', + 'hello???', + 'how do i cheese it????', + ]; + return msgs[index % msgs.length]; +}; diff --git a/packages/core/src/motions/ReshapingContainer/__docz__/TripeHoverMenu.tsx b/packages/core/src/motions/RevealReshapingContainer/__docz__/TripeHoverMenu/index.tsx similarity index 54% rename from packages/core/src/motions/ReshapingContainer/__docz__/TripeHoverMenu.tsx rename to packages/core/src/motions/RevealReshapingContainer/__docz__/TripeHoverMenu/index.tsx index c157fd1..8e6d2db 100644 --- a/packages/core/src/motions/ReshapingContainer/__docz__/TripeHoverMenu.tsx +++ b/packages/core/src/motions/RevealReshapingContainer/__docz__/TripeHoverMenu/index.tsx @@ -1,11 +1,10 @@ import * as React from 'react'; import * as Common from '@element-motion/dev'; // eslint-disable-line import/no-extraneous-dependencies import { Transition } from 'react-transition-group'; // eslint-disable-line import/no-extraneous-dependencies -import ReshapingContainer from '../index'; +import RevealReshapingContainer from '../../index'; import * as Styled from './styled'; const menuPosition = [200, 100, 20]; -const innerTimeout = { enter: 200, exit: 300 }; const TripeHoverMenu = () => ( ( right: menuPosition[toggler.shown.shown], }} > - ( > {motion => ( - - {tstate => ( - - - Pricing - Find out how much tripe you can buy for $100 - - - Billing - Need an invoice? Look in here - - - Connect - Find other tripe enthusiasts? Check here first - - - )} - + {toggler.shown.shown === '0' && ( + + + Pricing + Find out how much tripe you can buy for $100 + + + Billing + Need an invoice? Look in here + + + Connect + Find other tripe enthusiasts? Check here first + + + )} - - {tstate => ( - - - Recipes - Find the best way to cook it - - - )} - + {toggler.shown.shown === '1' && ( + + + Recipes + Find the best way to cook it + + + )} - - {tstate => ( - - About Tripe - Customers - Jobs - - )} - + {toggler.shown.shown === '2' && ( + + About Tripe + Customers + Jobs + + )} )} - + )} diff --git a/packages/core/src/motions/ReshapingContainer/__docz__/styled.tsx b/packages/core/src/motions/RevealReshapingContainer/__docz__/TripeHoverMenu/styled.tsx similarity index 90% rename from packages/core/src/motions/ReshapingContainer/__docz__/styled.tsx rename to packages/core/src/motions/RevealReshapingContainer/__docz__/TripeHoverMenu/styled.tsx index 32cb644..387c507 100644 --- a/packages/core/src/motions/ReshapingContainer/__docz__/styled.tsx +++ b/packages/core/src/motions/RevealReshapingContainer/__docz__/TripeHoverMenu/styled.tsx @@ -12,13 +12,7 @@ const opac = { exiting: 0, }; -const pos = { - exiting: 'absolute', -}; - -export const InnerMenu = styled.div<{ state: string }>` - opacity: ${props => opac[props.state]}; - position: ${props => pos[props.state]}; +export const InnerMenu = styled.div` top: 0; `; diff --git a/packages/core/src/motions/RevealReshapingContainer/__docz__/docs.mdx b/packages/core/src/motions/RevealReshapingContainer/__docz__/docs.mdx index 0e7af07..d2a65cc 100644 --- a/packages/core/src/motions/RevealReshapingContainer/__docz__/docs.mdx +++ b/packages/core/src/motions/RevealReshapingContainer/__docz__/docs.mdx @@ -1,27 +1,67 @@ --- -name: RevealReshapingContainer -route: /reveal-reshaping-container +name: ReshapingContainer +route: /reshaping-container menu: Composite experiences --- import { Playground, Props } from 'docz'; import * as Common from '@element-motion/dev'; -import RevealReshapingContainer from '../index'; +import TripeMenu from './TripeHoverMenu'; +import NotificationPill from './NotificationPill'; +import ReshapingContainer from '../index'; import * as Styled from './styled'; -# RevealReshapingContainer +# ReshapingContainer -A composite experience that is made up of [Reveal](/reveal) and [ReshapingContainer](/reshaping-container). -It will do everything the reshaping container does plus keeping the children within the container when resizing. - -This is useful for any experience that does not change its position, -only dimensions. -For example a modal dialog! +A composite experience that is made up of [Move](/move) and [Reveal](/reveal). ## Usage + + + + ```js -import { RevealReshapingContainer } from '@element-motion/core'; +import { ReshapingContainer } from '@element-motion/core'; + +({ message, avatar }) => ( + + {motion => ( + + + {message} + + )} + +); +``` + + + + + +```js +import { ReshapingContainer } from '@element-motion/core'; + +({ children }) => ( + + {motion => {children}} + +); ``` @@ -30,7 +70,7 @@ import { RevealReshapingContainer } from '@element-motion/core'; - )} - + )} @@ -76,7 +116,7 @@ import { RevealReshapingContainer } from '@element-motion/core'; ## Props - + ## Caveats diff --git a/packages/core/src/motions/RevealReshapingContainer/index.tsx b/packages/core/src/motions/RevealReshapingContainer/index.tsx index 0a3b5f2..8130ab2 100644 --- a/packages/core/src/motions/RevealReshapingContainer/index.tsx +++ b/packages/core/src/motions/RevealReshapingContainer/index.tsx @@ -3,6 +3,7 @@ import { WrappedMotion as Motion } from '../../Motion'; import { CollectorChildrenAsFunction } from '../../Collector'; import ReshapingContainer, { ReshapingContainerProps } from '../ReshapingContainer'; import Reveal from '../Reveal'; +import Move from '../Move'; interface RevealReshapingContainerProps extends ReshapingContainerProps { /** @@ -69,21 +70,23 @@ export default class RevealReshapingContainer extends React.PureComponent< {reshaping => ( - - {motion => - children({ - ...motion, - style: { - ...motion.style, - ...reshaping.style, - }, - }) - } - + + + {motion => + children({ + ...motion, + style: { + ...motion.style, + ...reshaping.style, + }, + }) + } + + )} diff --git a/packages/core/src/motions/RevealReshapingContainer/stories.tsx b/packages/core/src/motions/RevealReshapingContainer/stories.tsx index 645848c..2929b89 100644 --- a/packages/core/src/motions/RevealReshapingContainer/stories.tsx +++ b/packages/core/src/motions/RevealReshapingContainer/stories.tsx @@ -24,7 +24,6 @@ storiesOf('@element-motion/core/RevealReshapingContainer', module) {toggler => (