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

chore: #430 update help guide component in elements #444

Merged
merged 1 commit into from
Feb 26, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
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
23 changes: 12 additions & 11 deletions packages/elements/src/components/HelpGuide/help-guide.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,21 @@ import { useHelpGuideContext } from './context'
import { Button } from '../Button'

const imageUrl = 'https://1001freedownloads.s3.amazonaws.com/vector/thumb/63319/Placeholder.png'
const contentStyles = {
maxWidth: '390px',
}

const ComponentA = () => {
const context = useHelpGuideContext()
return (
<div>
<div style={contentStyles}>
<p className="mb-5">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt ipsa minima hic rerum. Aspernatur laborum eum
vel necessitatibus dolorum alias. Sunt necessitatibus nisi repellat perspiciatis quam, iusto, fugit expedita
cupiditate quisquam totam voluptates? Facilis laudantium dolores tempora aspernatur natus minus, soluta aliquam?
Similique mollitia, placeat architecto eum dolores quam, omnis quidem iste vero tempora ipsum repellendus
voluptas, aliquam rerum molestias iure quasi totam assumenda quo veritatis. Corporis debitis, veniam sit earum
vero id impedit odio totam itaque numquam omnis non repellat fugiat nostrum nam minima modi, dignissimos ut
quibusdam praesentium sunt in beatae at nemo! Inventore blanditiis expedita pariatur amet laboriosam culpa,
nihil sed rerum natus et recusandae hic est error ab accusantium impedit earum vero quae. Alias quae
vero id impedit odio totam itaque
</p>
<Button type="button" variant="primary" onClick={context.goNext}>
Next
Expand All @@ -31,7 +32,7 @@ const ComponentB = () => {
const context = useHelpGuideContext()

return (
<div>
<div style={contentStyles}>
<p className="mb-5">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo expedita consequatur molestias! Magnam in
inventore, sunt fuga minus nihil pariatur facilis nobis modi debitis aspernatur perspiciatis quo officiis sit
Expand All @@ -51,7 +52,7 @@ const ComponentC = () => {
const context = useHelpGuideContext()

return (
<div>
<div style={contentStyles}>
<p className="mb-5">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo expedita consequatur molestias! Magnam in
inventore, sunt fuga minus nihil pariatur facilis nobis modi debitis aspernatur perspiciatis quo officiis sit
Expand All @@ -72,35 +73,35 @@ storiesOf('HelpGuide', module).add('Primary', () => {
component={ComponentA}
heading="Heading-1"
subHeading="SubHeading-1"
graphic={<img src={imageUrl} />}
graphic={<img width="200px" src={imageUrl} />}
/>
<HelpGuide.Step
id="step-2"
component={ComponentB}
heading="Heading-2"
subHeading="SubHeading-2"
graphic={<img src={imageUrl} />}
graphic={<img width="200px" src={imageUrl} />}
/>
<HelpGuide.Step
id="step-3"
component={ComponentB}
heading="Heading-3"
subHeading="SubHeading-3"
graphic={<img src={imageUrl} />}
graphic={<img width="200px" src={imageUrl} />}
/>
<HelpGuide.Step
id="step-4"
component={ComponentB}
heading="Heading-4"
subHeading="SubHeading-4"
graphic={<img src={imageUrl} />}
graphic={<img width="200px" src={imageUrl} />}
/>
<HelpGuide.Step
id="step-5"
component={ComponentC}
heading="Heading-5"
subHeading="SubHeading-5"
graphic={<img src={imageUrl} />}
graphic={<img width="200px" src={imageUrl} />}
/>
</HelpGuide>
)
Expand Down
2 changes: 1 addition & 1 deletion packages/elements/src/styles/components/help-guide.scss
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
.helpguide-component {
display: flex;
@media (min-width: 769px) {
max-width: 375px;
max-width: 500px;
}
}

Expand Down
10 changes: 5 additions & 5 deletions packages/marketplace/src/components/pages/developer-welcome.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export type DeveloperWelcomeMessageProps = DevelopeWelcomeMappedActions
export const Welcome = () => {
const { goNext } = useHelpGuideContext()
return (
<div>
<div className={styles.content}>
<p className="mb-5">
Thank you for registering as a Reapit Foundations Developer. Within this portal, you will have access to
detailed documentation on all our APIs, full access to Reapit elements and Sandbox data. All available to assist
Expand All @@ -42,7 +42,7 @@ export const Documentation = () => {
const { goNext, goPrev } = useHelpGuideContext()

return (
<div>
<div className={styles.content}>
<p className="mb-5">
As Developers, we know detailed documentation and support is paramount when building any application. Therefore,
we have created various sections to provide additional help and support. Each section can be accessed from the
Expand Down Expand Up @@ -102,7 +102,7 @@ export const Documentation = () => {
export const Submitting = () => {
const { goNext, goPrev } = useHelpGuideContext()
return (
<div>
<div className={styles.content}>
<p className="mb-5">
Once you are ready to go, you will need to submit your App. Using the &lsquo;Submit App&rsquo; option on the
left, you will need to tell us about your Application, such as what permissions it requires, the type of
Expand Down Expand Up @@ -130,7 +130,7 @@ export const Submitting = () => {
export const Managing = () => {
const { goNext, goPrev } = useHelpGuideContext()
return (
<div>
<div className={styles.content}>
<p className="mb-5">
If you need to make a change to your App, such as update a screenshot, edit text, or request additional
permissions, you can do so by clicking &lsquo;Edit App&rsquo; from the &lsquo;Apps&rsquo; page. Any change will
Expand All @@ -154,7 +154,7 @@ export const Managing = () => {
export const Support = ({ onAccept }) => {
const { goPrev } = useHelpGuideContext()
return (
<div>
<div className={styles.content}>
<p className="mb-5">
You are currently logged into our alpha release of Reapit Foundations and we are continuing to update, add
additional features and address any issues that may appear. In the meantime, if you would like to request a
Expand Down
6 changes: 6 additions & 0 deletions packages/marketplace/src/styles/pages/developer-welcome.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,9 @@
margin: 0 auto;
width: 100%;
}

.content {
@media (min-width: 769px) {
max-width: 375px;
}
}
2 changes: 1 addition & 1 deletion packages/marketplace/src/tests/badges/badge-branches.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion packages/marketplace/src/tests/badges/badge-functions.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion packages/marketplace/src/tests/badges/badge-lines.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion packages/marketplace/src/tests/badges/badge-statements.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.