feat(focal-conceal-move): renames to focal conceal move from conceal move

Author: itsdouges

packages/yubaba/src/FocalTarget/__docs__/docs.mdx

@@ -11,18 +11,18 @@ import FocalTarget from '../index';
 
 Used to explicitly mark the focal element,
 only a handful of animations require this component to be used,
-for example [ConcealMove](/conceal-move).
+for example [FocalConcealMove](/focal-conceal-move).
 
 > **Tip -** See [Moving using a focal target](/advanced-usage#moving-using-a-focal-target) for more information on how to use this component.
 
 ## Usage
 
 ```js
-import { FocalTarget, ConcealMove } from 'yubaba';
+import { FocalTarget, FocalConcealMove } from 'yubaba';
 
 const ItemDetails = ({ title, recipients, body, index }) => (
   <Baba name={`item-${index}`}>
-    <ConcealMove>
+    <FocalConcealMove>
       {baba => (
         <div {...baba}>
           <FocalTarget>
@@ -37,7 +37,7 @@ const ItemDetails = ({ title, recipients, body, index }) => (
           {body}
         </div>
       )}
-    </ConcealMove>
+    </FocalConcealMove>
   </Baba>
 );
 ```

packages/yubaba/src/__docs__/3-advanced-usage/EmailChain.tsx

@@ -22,7 +22,7 @@ import {
 import * as Styled from './styled';
 import { WrappedBaba as Baba } from '../../Baba';
 import FocalRevealMove from '../../animations/FocalRevealMove';
-import ConcealMove from '../../animations/ConcealMove';
+import FocalConcealMove from '../../animations/FocalConcealMove';
 import FocalTarget from '../../FocalTarget';
 
 const EmailChain = () => {
@@ -68,7 +68,7 @@ const EmailChain = () => {
 
   const screen = (props: any) => (
     <Baba name={`card-${props.index}`}>
-      <ConcealMove>
+      <FocalConcealMove>
         {baba => (
           <Styled.Screen
             innerRef={baba.ref}
@@ -110,7 +110,7 @@ const EmailChain = () => {
             </ListItem>
           </Styled.Screen>
         )}
-      </ConcealMove>
+      </FocalConcealMove>
     </Baba>
   );
 

packages/yubaba/src/__docs__/3-advanced-usage/docs.mdx

@@ -30,7 +30,7 @@ import { WrappedBaba as Baba } from '../../Baba';
 import { WrappedVisibilityManager as VisibilityManager } from '../../VisibilityManager';
 import CircleExpand from '../../animations/CircleExpand';
 import FocalRevealMove from '../../animations/FocalRevealMove';
-import ConcealMove from '../../animations/ConcealMove';
+import FocalConcealMove from '../../animations/FocalConcealMove';
 import FocalTarget from '../../FocalTarget';
 import Move from '../../animations/Move';
 import CircleShrink from '../../animations/CircleShrink';
@@ -211,7 +211,7 @@ used together can produce a really cool transition between states.
 
 At times we want to move all content at once but have it originate from a focal point.
 The [FocalTarget](/focal-target) component exists to mark the focal element so animations who care can use it.
-Two examples of animations who can use it are [Move](/move), [ConcealMove](/conceal-move).
+Two examples of animations who can use it are [Move](/move), [FocalConcealMove](/focal-conceal-move).
 
 <Playground>
   <Styled.Center>

…animations/ConcealMove/__docs__/docs.mdx …tions/FocalConcealMove/__docs__/docs.mdxpackages/yubaba/src/animations/ConcealMove/__docs__/docs.mdx renamed to packages/yubaba/src/animations/FocalConcealMove/__docs__/docs.mdx packages/yubaba/src/animations/ConcealMove/__docs__/docs.mdx renamed to packages/yubaba/src/animations/FocalConcealMove/__docs__/docs.mdx

@@ -1,6 +1,6 @@
 ---
-name: ConcealMove
-route: /conceal-move
+name: FocalConcealMove
+route: /focal-conceal-move
 menu: Focal animations
 ---
 
@@ -20,14 +20,14 @@ import PlayButton from '@material-ui/icons/PlayArrow';
 import BackIcon from '@material-ui/icons/ArrowBack';
 import MoreVert from '@material-ui/icons/MoreVert';
 import { lighten } from 'polished';
-import ConcealMove from '../index';
+import FocalConcealMove from '../index';
 import Noop from '../../Noop';
 import Baba from '../../../Baba';
 import FocalTarget from '../../../FocalTarget';
 import * as Styled from './styled';
 import albumArt from './images/foster.jpg';
 
-# ConcealMove
+# FocalConcealMove
 
 Useful for transitioning from a child to a parent,
 will shrink from the container to the focal element.
@@ -36,15 +36,15 @@ Requires the use of the [FocalTarget](/focal-target) component to specify the fo
 ## Usage
 
 ```js
-import Baba, { ConcealMove, FocalTarget } from 'yubaba';
+import Baba, { FocalConcealMove, FocalTarget } from 'yubaba';
 ```
 
 > **Tip -** Click the back button in the album art to conceal it.
 
 <Playground>
   {() => {
     const revealingImage = ({ albumArt }) => (
-      <Baba name="conceal-move">
+      <Baba name="focal-conceal-move">
         {({ ref, style }) => (
           <Link to="/details">
             <Styled.BackgroundImage src={albumArt} style={style} innerRef={ref} />
@@ -73,8 +73,8 @@ import Baba, { ConcealMove, FocalTarget } from 'yubaba';
     );
 
     const albumDetails = ({ color, albumArt, name, artist, songs }) => (
-      <Baba name="conceal-move">
-        <ConcealMove>
+      <Baba name="focal-conceal-move">
+        <FocalConcealMove>
           {(baba) => (
             <div {...baba}>
               <Styled.DetailsRoot color={color}>
@@ -147,7 +147,7 @@ import Baba, { ConcealMove, FocalTarget } from 'yubaba';
               </Styled.DetailsRoot>
             </div>
           )}
-        </ConcealMove>
+        </FocalConcealMove>
       </Baba>
     );
 
@@ -200,7 +200,7 @@ import Baba, { ConcealMove, FocalTarget } from 'yubaba';
 
 ## Props
 
-<PropsTable of={ConcealMove} />
+<PropsTable of={FocalConcealMove} />
 
 ## Troubleshooting
 

…s/ConcealMove/__docs__/images/foster.jpg …alConcealMove/__docs__/images/foster.jpgpackages/yubaba/src/animations/ConcealMove/__docs__/images/foster.jpg renamed to packages/yubaba/src/animations/FocalConcealMove/__docs__/images/foster.jpg packages/yubaba/src/animations/ConcealMove/__docs__/images/foster.jpg renamed to packages/yubaba/src/animations/FocalConcealMove/__docs__/images/foster.jpg

@@ -13,7 +13,7 @@ import { zIndexStack } from '../../lib/style';
 import { dynamic } from '../../lib/duration';
 import { Duration } from '../types';
 
-export interface ConcealMoveProps extends CollectorChildrenProps {
+export interface FocalConcealMoveProps extends CollectorChildrenProps {
   /**
    * How long the animation should take over {duration}ms.
    */
@@ -30,7 +30,7 @@ export interface ConcealMoveProps extends CollectorChildrenProps {
   timingFunction: string;
 }
 
-export default class ConcealMove extends React.Component<ConcealMoveProps> {
+export default class FocalConcealMove extends React.Component<FocalConcealMoveProps> {
   static defaultProps = {
     duration: 'dynamic',
     timingFunction: standard(),

…imations/ConcealMove/__docs__/styled.tsx …ons/FocalConcealMove/__docs__/styled.tsxpackages/yubaba/src/animations/ConcealMove/__docs__/styled.tsx renamed to packages/yubaba/src/animations/FocalConcealMove/__docs__/styled.tsx packages/yubaba/src/animations/ConcealMove/__docs__/styled.tsx renamed to packages/yubaba/src/animations/FocalConcealMove/__docs__/styled.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { Toggler } from 'yubaba-common';
 import Baba from '../../Baba';
 import Target from '../../FocalTarget';
-import ConcealMove from './index';
+import FocalConcealMove from './index';
 
 const Container = styled.div`
   margin: 100px auto;
@@ -76,7 +76,7 @@ const build = (width: number, height: number, orientation: Orientation) => (
     {({ shown, toggle }) => (
       <React.Fragment>
         {shown && (
-          <Baba name={`conceal-move-${orientation}`}>
+          <Baba name={`focal-conceal-move-${orientation}`}>
             {baba => (
               <ListItem
                 onClick={() => toggle()}
@@ -91,8 +91,8 @@ const build = (width: number, height: number, orientation: Orientation) => (
         )}
 
         {shown || (
-          <Baba name={`conceal-move-${orientation}`}>
-            <ConcealMove>
+          <Baba name={`focal-conceal-move-${orientation}`}>
+            <FocalConcealMove>
               {baba => (
                 // We use a wrapper div here because the child centers it's children via flexbox.
                 // Since it centers it with flexbox when we transition it around our assumptions change
@@ -112,15 +112,15 @@ const build = (width: number, height: number, orientation: Orientation) => (
                   </TallListItem>
                 </div>
               )}
-            </ConcealMove>
+            </FocalConcealMove>
           </Baba>
         )}
       </React.Fragment>
     )}
   </Toggler>
 );
 
-storiesOf('yubaba/ConcealMove', module)
+storiesOf('yubaba/FocalConcealMove', module)
   .addDecorator(story => <Container>{story()}</Container>)
   .add('TargetHeight', () => build(200, 200, 'vertical'))
   .add('TargetWidth', () => build(200, 200, 'horizontal'))

…aba/src/animations/ConcealMove/index.tsx …rc/animations/FocalConcealMove/index.tsxpackages/yubaba/src/animations/ConcealMove/index.tsx renamed to packages/yubaba/src/animations/FocalConcealMove/index.tsx packages/yubaba/src/animations/ConcealMove/index.tsx renamed to packages/yubaba/src/animations/FocalConcealMove/index.tsx

@@ -1,5 +1,12 @@
 export { WrappedBaba as default } from './Baba';
 
+/**
+ * Nexst major version TODO
+ * - Remove FocalMove
+ * - Remove ConcealMove
+ * - Remove BabaManager
+ */
+
 export { default as Wait } from './Wait';
 export { default as Noop } from './animations/Noop';
 export { default as CrossFadeMove } from './animations/CrossFadeMove';
@@ -10,7 +17,8 @@ export { default as CircleExpand } from './animations/CircleExpand';
 export { default as CircleShrink } from './animations/CircleShrink';
 export { default as FocalReveal } from './animations/FocalReveal';
 export { default as RevealMove, default as FocalRevealMove } from './animations/FocalRevealMove';
-export { default as ConcealMove } from './animations/ConcealMove';
+export { default as FocalConcealMove, default as ConcealMove } from './animations/FocalConcealMove';
+export { default as FocalFocalConcealMove } from './animations/FocalConcealMove';
 export { default as ReshapingContainer } from './animations/ReshapingContainer';
 export { default as RevealReshapingContainer } from './animations/RevealReshapingContainer';
 export { default as Reveal } from './animations/Reveal';