Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Consolidate all the animations across onboarding into the Animate component #158

Merged
merged 5 commits into from
Feb 1, 2023
Merged

Consolidate all the animations across onboarding into the Animate component #158

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
33bd7e7
consolidate all animations across onboarding
arunshenoy99 Jan 24, 2023
02f79b2
Merge branch 'trunk' of https://github.com/newfold-labs/wp-module-onb…
arunshenoy99 Jan 25, 2023
f1b5cad
modify primary, secondary steps which were merged
arunshenoy99 Jan 25, 2023
92dbf2e
animate site features
arunshenoy99 Jan 25, 2023
1244d34
Merge branch 'trunk' of https://github.com/newfold-labs/wp-module-onb…
arunshenoy99 Feb 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 43 additions & 3 deletions src/OnboardingSPA/components/Animate/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,20 @@
import classNames from 'classnames';

/**
* A Animator to show animation
*
* @param {string} type The name of Animation to be shown.
* @param { object | boolean } after The variable to look after for before showing the animation, by default true to show the children right away.
*
*/
const Animate = ( { type, after = true, children } ) => {
const Animate = ( {
type,
after = true,
children,
className = '',
duration = false,
timingFunction = false,
} ) => {
const prefix = 'animate';

/**
Expand All @@ -16,12 +25,35 @@ const Animate = ( { type, after = true, children } ) => {
function getAnimateClassName() {
if ( type ) {
let classname = '';

switch ( type ) {
// Add animation types and appropriate CSS
case 'fade-in':
classname = prefix.concat( '__fade-in' );
break;
case 'fade-in-disabled':
classname = prefix.concat( '__fade-in--disabled' );
break;
case 'fade-in-right':
classname = prefix.concat( '__fade-in--right' );
break;
case 'fade-in-left':
classname = prefix.concat( '__fade-in--left' );
break;
case 'fade-in-up':
classname = prefix.concat( '__fade-in--up' );
break;
case 'shine':
classname = prefix.concat( '__shine' );
break;
case 'shine-placeholder':
classname = prefix.concat( '__shine--placeholder' );
break;
case 'dropdown':
classname = prefix.concat( '__dropdown' );
break;
case 'load':
classname = prefix.concat( '__load' );
break;
}
return classname;
}
Expand All @@ -30,7 +62,15 @@ const Animate = ( { type, after = true, children } ) => {
return ! after ? (
<div className={ `${ prefix }__blank` }>{ children }</div>
) : (
<div className={ getAnimateClassName() }>{ children }</div>
<div
className={ classNames( getAnimateClassName(), className ) }
style={ {
animationDuration: duration,
animationTimingFunction: timingFunction,
} }
>
{ children }
</div>
);
};

Expand Down
177 changes: 168 additions & 9 deletions src/OnboardingSPA/components/Animate/stylesheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,170 @@
@keyframes fadeIn {

from {
opacity: 0;
}

to {
opacity: 1;
}
}


@keyframes fadeInRight {

from {
opacity: 0;
transform: translate3d(33%, 0, 0);
}

to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}

@keyframes fadeInLeft {

from {
opacity: 0;
transform: translate3d(-33%, 0, 0);
}

to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}

@keyframes fadeInUp {

from {
opacity: 0;
transform: translate3d(0, 33%, 0);
}

to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}

@keyframes fadeInWithDisabledClicks {

from {
opacity: 0;
pointer-events: none;
}

to {
opacity: 1;
}
}

@keyframes shine {

0% {
transform: translateX(-100%);
}

100% {
transform: translateX(100%);
}
}

@keyframes shine-placeholder {

0% {
background-position: -468px 0;
}

100% {
background-position: 468px 0;
}
}

@keyframes dropdown {

0% {
transform: rotateX(-90deg);
}

70% {
transform: rotateX(20deg);
}

100% {
transform: rotateX(0deg);
}
}

@keyframes load {

0% {
left: -100%;
}

100% {
left: 100%;
}
}

.animate {

&__blank {
opacity: 0;
pointer-events: none;
}

&__fade-in {
animation: fadeInWithDisabledClicks 500ms ease-in;
}

&__blank {
opacity: 0;
pointer-events: none;
}

&__shine {
animation: shine 1.5s linear infinite;

&--placeholder {
animation: shine-placeholder 1.5s linear infinite;
}
}

&__dropdown {
animation: dropdown 400ms ease-in-out forwards;
}

&__fade-in {

animation: fadeIn 100ms ease-in-out;

&--disabled {
animation: fadeInWithDisabledClicks 500ms ease-in;
}

&--right {
animation: fadeInRight 360ms ease-out;

@media (prefers-reduced-motion) {
animation: none !important;
translation: none !important;
}
}

&--left {
animation: fadeInLeft 360ms ease-out;

@media (prefers-reduced-motion) {
animation: none !important;
translation: none !important;
}
}

&--up {
animation: fadeInUp 360ms ease-out;

@media (prefers-reduced-motion) {
animation: none !important;
translation: none !important;
}
}
}

&__load {
animation: load 3s linear infinite;
}
}
83 changes: 46 additions & 37 deletions src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { useState } from '@wordpress/element';
import { Icon, help, box } from '@wordpress/icons';
import { Icon, help } from '@wordpress/icons';

import { CheckboxControl } from '@wordpress/components';
import Animate from '../../Animate';

/**
* Checkbox Item Component
Expand Down Expand Up @@ -40,70 +41,78 @@ const CheckboxItem = ( {
return (
<div>
<div
className={`${ className } ${isSelected && `${ className }--selected`
} ${showDescription && `${ className }--shown`}`}
className={ `${ className } ${
isSelected && `${ className }--selected`
} ${ showDescription && `${ className }--shown` }` }
>
<div className={`${ className }-container`}>
<div className={ `${ className }-container` }>
<CheckboxControl
checked={isSelected}
onChange={handleCheck}
className={`${ className }-checkbox`}
checked={ isSelected }
onChange={ handleCheck }
className={ `${ className }-checkbox` }
/>
<div className={`${ className }__contents`}>
<div className={ `${ className }__contents` }>
<div
className={`${ className }__contents-icon
${isSelected &&
`${ className }__contents-icon--selected`
}
${showDescription &&
`${ className }__contents-icon--shown`
}`}
className={ `${ className }__contents-icon
${
isSelected &&
`${ className }__contents-icon--selected`
}
${
showDescription &&
`${ className }__contents-icon--shown`
}` }
>
<div
style={{
style={ {
width: '35px',
height: '35px',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
backgroundImage: `var(${icon}${isSelected ? '--light' : ''
})`,
}}
backgroundImage: `var(${ icon }${
isSelected ? '--light' : ''
})`,
} }
/>
</div>
<div className={`${className }__contents-text`}>
<div className={ `${ className }__contents-text` }>
<div
className={`${ className }__contents-text-title ${isSelected &&
className={ `${ className }__contents-text-title ${
isSelected &&
`${ className }__contents-text-title--selected`
}`}
}` }
>
{title}
{ title }
</div>
<div className={`${ className }__contents-text-subtitle`}>
{subtitle}
<div
className={ `${ className }__contents-text-subtitle` }
>
{ subtitle }
</div>
</div>
<div
className={`${ className }__contents-help`}
onClick={handleShowDesc}
className={ `${ className }__contents-help` }
onClick={ handleShowDesc }
>
<Icon
icon={help}
style={{
icon={ help }
style={ {
width: '30px',
height: '30px',
fill: `${showDescription ? '#1C5CBA' : '#666666'
}`,
}}
fill: `${
showDescription ? '#1C5CBA' : '#666666'
}`,
} }
/>
</div>
</div>
</div>
</div>
{
showDescription && (
<div className={`${ className }__desc`}>{desc}</div>
)
}
{ showDescription && (
<Animate type={ 'dropdown' }>
<div className={ `${ className }__desc` }>{ desc }</div>
</Animate>
) }
</div>
);
};
Expand Down
1 change: 0 additions & 1 deletion src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,6 @@ $box-shadow: var(--nfd-onboarding-light-gray-highlighted);
border-left: 1px solid rgba($main-color, 0.1);
border-right: 1px solid rgba($main-color, 0.1);
border-bottom: 1px solid rgba($main-color, 0.1);
animation: dropdown 400ms ease-in-out forwards;
box-shadow: 0px 11px 8px -3px rgba($main-color, 0.20);
}
}
Loading