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.

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

PRESS2-233 Generic Step Loading State Component #83

Merged
merged 3 commits into from
Sep 30, 2022
Merged
Changes from 1 commit
Commits
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
Next Next commit
PRESS2-233 add generic step loading state component
  • Loading branch information
arunshenoy99 committed Sep 27, 2022
commit 7b709ee794622c55447f75bfa5ed0ede01e9fcee
87 changes: 87 additions & 0 deletions src/Brands/bluehost/step-loader-logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions src/OnboardingSPA/components/ImageUploader/index.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { __ } from '@wordpress/i18n';
import { useRef, useState } from '@wordpress/element';

import Loader from '../Loader';
import { ImageUploadLoader } from '../Loaders';
import { uploadImage } from '../../utils/api/uploader';

/*
@@ -51,7 +51,7 @@ const ImageUploader = ({ icon, iconSetter }) => {
function loader(){
return (
<div className="image-uploader_window">
<Loader/>
<ImageUploadLoader />
</div>);
}
function getImageUploadWindow() {
15 changes: 0 additions & 15 deletions src/OnboardingSPA/components/Loader/index.js

This file was deleted.

33 changes: 0 additions & 33 deletions src/OnboardingSPA/components/Loader/stylesheet.scss

This file was deleted.

9 changes: 9 additions & 0 deletions src/OnboardingSPA/components/Loaders/ImageUpload/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
const ImageUploadLoader = () => {
return (
<div className="image-upload-loader--loading-box">
<div className="image-upload-loader--loading-box__loader"></div>
</div>
);
};

export default ImageUploadLoader;
35 changes: 35 additions & 0 deletions src/OnboardingSPA/components/Loaders/ImageUpload/stylesheet.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
.image-upload-loader {

&--loading-box {
width: 200px;
height: 25px;
position: relative;
border-radius: 50px;
overflow: hidden;
border: 2px solid #ededed;

&__loader {
width: 100%;
height: 100%;
position: absolute;
border-radius: 50px;
background: linear-gradient(45deg, #b6b5ff, #ff9797);
left: -100%;
animation: load 3s linear infinite;
}
}

// Loading Animation
@keyframes load {

0% {
left: -100%;
}

100% {
left: 100%;
}
}

}

17 changes: 17 additions & 0 deletions src/OnboardingSPA/components/Loaders/Step/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import CommonLayout from '../../Layouts/Common';
import HeadingWithSubHeading from '../../HeadingWithSubHeading';
import NeedHelpTag from '../../NeedHelpTag';

const StepLoader = ( { title, subtitle } ) => {
return (
<CommonLayout className="step-loader" isVerticallyCentered>
<HeadingWithSubHeading title={ title } subtitle={ subtitle } />
arunshenoy99 marked this conversation as resolved.
Show resolved Hide resolved
<div className="step-loader__logo-container">
<div className="step-loader__logo"></div>
</div>
<NeedHelpTag />
</CommonLayout>
);
};

export default StepLoader;
8 changes: 8 additions & 0 deletions src/OnboardingSPA/components/Loaders/Step/stylesheet.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.step-loader {

&__logo {
width: 256px;
height: 256px;
background-image: var(--nfd-onboarding-step-loader-icon);
}
}
2 changes: 2 additions & 0 deletions src/OnboardingSPA/components/Loaders/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export { default as StepLoader } from "./Step";
export { default as ImageUploadLoader } from "./ImageUpload";
2 changes: 2 additions & 0 deletions src/OnboardingSPA/components/Loaders/stylesheet.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
@import "./ImageUpload/stylesheet";
@import "./Step/stylesheet";
1 change: 1 addition & 0 deletions src/OnboardingSPA/styles/_branding.scss
Original file line number Diff line number Diff line change
@@ -25,6 +25,7 @@ body {
--nfd-onboarding-border: 219, 219, 219;
--nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-tertiary);
--nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-light);
--nfd-onboarding-step-loader-icon: url("../../Brands/bluehost/step-loader-logo.svg");
}
&.nfd-brand-hostgator {
--wp-admin-theme-color: #2e93ee;
2 changes: 1 addition & 1 deletion src/OnboardingSPA/styles/app.scss
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@
@import "../components/Content/stylesheet";
@import "../components/Layouts/stylesheet";
@import "../components/SkipButton/stylesheet";
@import "../components/Loader/stylesheet";
@import "../components/Loaders/stylesheet.scss";
arunshenoy99 marked this conversation as resolved.
Show resolved Hide resolved
@import "../components/MiniPreview/stylesheet";
@import "../components/Tooltip/stylesheet";
@import "../components/ImageUploader/stylesheet";