Skip to content

Commit

Permalink
Merge pull request canonical#14373 from minkyngkm/wd-12509-update-pro…
Browse files Browse the repository at this point in the history 
…-css

WD-12509 Remove @extend p-heading--2 on the pro shops
  • Loading branch information
@minkyngkm
minkyngkm authored Oct 2, 2024
2 parents 297686f + 99be82e commit 3774902
Show file tree
Hide file tree
Showing 5 changed files with 215 additions and 181 deletions.
130 changes: 74 additions & 56 deletions static/js/src/advantage/distributor/components/DistributorShopForm/DistributorShopForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,68 +8,86 @@ import AddSubscriptions from "./AddSubscriptions/AddSubscriptions";
const DistributorShopForm = () => {
return (
<form className="distributor-shop-selector">
<Strip includeCol={false} className="u-no-padding--top">
<ol className="p-stepped-list">
<li className="p-stepped-list__item">
<Strip includeCol={false} className="u-no-padding--top">
<Row>
<Col size={6}>
<h2 className="p-stepped-list__title">
Verify deal registration information
</h2>
</Col>
<Col size={6}>
<DealRegistration />
</Col>
</Row>
</Strip>
<Row>
<hr className="p-rule is-muted" />
</Row>
</li>
<li className="p-stepped-list__item">
<Strip includeCol={false} className="u-no-padding--top">
<Row>
<Col size={6}>
<h2 className="p-stepped-list__title">
Fill in technical user&lsquo;s contact
</h2>
</Col>
<Col size={6}>
<TechnicalUserContact />
</Col>
</Row>
</Strip>
</li>
<Row>
<Col size={6}>
<h2>Verify deal registration information</h2>
</Col>
<Col size={6}>
<DealRegistration />
</Col>
<hr className="p-rule is-muted" />
</Row>
</Strip>
<Row>
<hr className="p-rule is-muted" />
</Row>
<Strip includeCol={false} className="u-no-padding--top">
<li className="p-stepped-list__item">
<Strip includeCol={false} className="u-no-padding--top">
<Row>
<Col size={6}>
<h2 className="p-stepped-list__title">Select your currency</h2>
</Col>
<Col size={6}>
<Currency />
</Col>
</Row>
</Strip>
</li>
<Row>
<Col size={6}>
<h2>Fill in technical user&lsquo;s contact</h2>
</Col>
<Col size={6}>
<TechnicalUserContact />
</Col>
<hr className="p-rule is-muted" />
</Row>
</Strip>
<Row>
<hr className="p-rule is-muted" />
</Row>
<Strip includeCol={false} className="u-no-padding--top">
<li className="p-stepped-list__item">
<Strip includeCol={false} className="u-no-padding--top">
<Row>
<Col size={6}>
<h2 className="p-stepped-list__title">Add subscriptions</h2>
</Col>
<Col size={6}>
<AddSubscriptions />
</Col>
</Row>
</Strip>
</li>
<Row>
<Col size={6}>
<h2>Select your currency</h2>
</Col>
<Col size={6}>
<Currency />
</Col>
<hr className="p-rule is-muted" />
</Row>
</Strip>
<Row>
<hr className="p-rule is-muted" />
</Row>
<Strip includeCol={false} className="u-no-padding--top">
<Row>
<Col size={6}>
<h2>Add subscriptions</h2>
</Col>
<Col size={6}>
<AddSubscriptions />
</Col>
</Row>
</Strip>
<Row>
<hr className="p-rule is-muted" />
</Row>
<Strip includeCol={false} className="u-no-padding--top">
<Row>
<Col size={6}>
<h2>Select the subscription duration</h2>
</Col>
<Col size={6}>
<Duration />
</Col>
</Row>
</Strip>
<li className="p-stepped-list__item">
<Strip includeCol={false} className="u-no-padding--top">
<Row>
<Col size={6}>
<h2 className="p-stepped-list__title">
Select the subscription duration
</h2>
</Col>
<Col size={6}>
<Duration />
</Col>
</Row>
</Strip>
</li>
</ol>
</form>
);
};
Expand Down
4 changes: 3 additions & 1 deletion static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@ const Feature = () => {
<>
<Row>
<Col size={6}>
<h2>What security coverage do you need?</h2>
<h2 className="p-stepped-list__title">
What security coverage do you need?
</h2>
</Col>
<Col size={6}>
<div
Expand Down
149 changes: 86 additions & 63 deletions static/js/src/advantage/subscribe/react/components/Form/Form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,81 +18,104 @@ const Form = () => {

return (
<form className="product-selector">
<Strip includeCol={false}>
<Col size={6}>
<h2>Who will be using this subscription?</h2>
</Col>
<Col size={6}>
<ProductUser />
</Col>
</Strip>
{productUser !== ProductUsers.myself ? (
<>
<Row>
<hr />
</Row>
<ol className="p-stepped-list">
<li className="p-stepped-list__item">
<Strip includeCol={false}>
<Col size={6}>
<h2>What are you setting up?</h2>
<h2 className="p-stepped-list__title">
Who will be using this subscription?
</h2>
</Col>
<Col size={6}>
<ProductType />
<ProductUser />
</Col>
</Strip>
{!disabled && (
<>
<Row>
<hr />
</Row>
</li>
{productUser !== ProductUsers.myself ? (
<>
<Row>
<hr />
</Row>
<li className="p-stepped-list__item">
<Strip includeCol={false}>
<Col size={6}>
<h2>For how many machines?</h2>
<h2 className="p-stepped-list__title">
What are you setting up?
</h2>
</Col>
<Col size={6}>
<Quantity />
<ProductType />
</Col>
</Strip>
<Row>
<hr />
</Row>

<Strip includeCol={false}>
<Col size={6}>
<h2>What Ubuntu LTS version are you running?</h2>
<p style={{ marginLeft: "3.6rem" }}>
{" "}
Ubuntu Pro is available for Ubuntu 16.04 LTS and higher.
<br />{" "}
<a href="/contact-us/form?product=pro">
Are you using an older version?
</a>
</p>
</Col>
<Col size={6}>
<Version />
</Col>
</Strip>
<Row>
<hr />
</Row>
<Strip includeCol={false}>
<Feature />
</Strip>
<Row>
<hr />
</Row>
<Strip includeCol={false}>
<Col size={12}>
<h2>Do you also need phone and ticket support?</h2>
</Col>
<Col size={12}>
<Support />
</Col>
</Strip>
</>
)}
</>
) : null}
</li>
{!disabled && (
<>
<Row>
<hr />
</Row>
<li className="p-stepped-list__item">
<Strip includeCol={false}>
<Col size={6}>
<h2 className="p-stepped-list__title">
For how many machines?
</h2>
</Col>
<Col size={6}>
<Quantity />
</Col>
</Strip>
</li>
<Row>
<hr />
</Row>
<li className="p-stepped-list__item">
<Strip includeCol={false}>
<Col size={6}>
<h2 className="p-stepped-list__title">
What Ubuntu LTS version are you running?
</h2>
<p style={{ marginLeft: "3.6rem" }}>
{" "}
Ubuntu Pro is available for Ubuntu 16.04 LTS and higher.
<br />{" "}
<a href="/contact-us/form?product=pro">
Are you using an older version?
</a>
</p>
</Col>
<Col size={6}>
<Version />
</Col>
</Strip>
</li>
<Row>
<hr />
</Row>
<li className="p-stepped-list__item">
<Strip includeCol={false}>
<Feature />
</Strip>
</li>
<Row>
<hr />
</Row>
<li className="p-stepped-list__item">
<Strip includeCol={false}>
<Col size={12}>
<h2 className="p-stepped-list__title">
Do you also need phone and ticket support?
</h2>
</Col>
<Col size={12}>
<Support />
</Col>
</Strip>
</li>
</>
)}
</>
) : null}
</ol>
</form>
);
};
Expand Down
Loading

0 comments on commit 3774902

Please sign in to comment.