Skip to content

Add back the top banner about “buttons vs links” in the Button doc page #325

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

Merged
merged 2 commits into from
May 30, 2022
Merged

Add back the top banner about “buttons vs links” in the Button doc page #325

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0c0c444
added back the top banner about “buttons vs links” in the `Button` do…
didoo May 27, 2022
188396a
added back banner for links too
didoo May 30, 2022
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
27 changes: 16 additions & 11 deletions packages/components/tests/dummy/app/components/dummy-link-cta-button-banner/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,30 @@
<section class="dummy-link-cta-button-banner">
<h3>Links, Buttons, CTAs...oh my!</h3>
<h3>Links, Buttons, Links that look like Buttons...oh my!</h3>
<h4>When to use a Link</h4>
<p>A link navigates the user to a new destination via a URL or route. Use
<LinkTo @route="components.link.inline"><code>Link::Inline</code></LinkTo>
within a body of text and
<LinkTo @route="components.link.standalone"><code>Link::Standalone</code></LinkTo>
outside of a body of text, ie. on its own or in a list.</p>
<h4>When to use a CTA</h4>
<p>A CTA is a link that looks like a button. It navigates the user to a new destination via a URL or route, but has
more visual weight than a standard link. Use a
<LinkTo @route="components.button"><code>Button</code></LinkTo>
as a link (with
<code>@href</code>
or
<code>@route</code>) to guide the user and encourage interaction. Use sparingly as overuse dilutes its importance.</p>
<h4>When to use a Button</h4>
<p>A button triggers an action within the page, ie. opening a dropdown or submitting a form.
<LinkTo @route="components.button"><code>Button</code></LinkTo>
is offered in a variety of visual weights to provide flexibility in use. Please refer to the Design Guidelines to
learn more about the different variants.
is offered in a variety of visual weights to provide flexibility in use. Please refer to the
<LinkTo @route="components.button">Design Guidelines</LinkTo>
to learn more about the different variants.
</p>
<h4>When to use a Link that looks like a Button</h4>
<p>Occasionally there is a need to display a link with more prominence (ie. a CTA or
<em>Cancel</em>
next to
<em>Submit</em>), so the
<LinkTo @route="components.button"><code>Button</code></LinkTo>
component offers support to be used as a link (with
<code>@href</code>
or
<code>@route</code>). Please refer to the
<LinkTo @route="components.button">How to use</LinkTo>
section to learn more.</p>
<h4>Want to learn more?</h4>
<p><a href="https://medium.com/@h_locke/links-vs-buttons-e8b523660fb3" target="_blank" rel="noopener noreferrer">Links
vs Buttons</a>
Expand Down
2 changes: 1 addition & 1 deletion packages/components/tests/dummy/app/templates/components/button.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<h2 class="dummy-h2">Button component</h2>

{{! <DummyLinkCtaButtonBanner /> }}
<DummyLinkCtaButtonBanner />

<section>
<h3 class="dummy-h3" id="component-api"><a href="#component-api" class="dummy-link-section">§</a> Component API</h3>
Expand Down
2 changes: 0 additions & 2 deletions packages/components/tests/dummy/app/templates/components/link/inline.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@
Link::Inline
</h2>

{{! <DummyLinkCtaButtonBanner /> }}

<section>
<div class="dummy-banner dummy-banner--info">
<p class="dummy-paragraph">👀 <strong>Notice</strong> 👀</p>
Expand Down
2 changes: 0 additions & 2 deletions packages/components/tests/dummy/app/templates/components/link/standalone.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@

<h2 class="dummy-h2">Link::Standalone</h2>

{{! <DummyLinkCtaButtonBanner /> }}

<section>
<h3 class="dummy-h3" id="overview"><a href="#overview">§</a> Overview</h3>

Expand Down