Visitar URL original
USWDS - Button: Create story for links styled as buttons by mahoneycm · Pull Request #5435 · uswds/uswds · GitHub
Skip to content

USWDS - Button: Create story for links styled as buttons #5435

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
thisisdano merged 19 commits into from
Dec 6, 2023
Merged

USWDS - Button: Create story for links styled as buttons #5435

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
0cd4e50
Add link as button template
mahoneycm Aug 10, 2023
e32727c
Create link as button story
mahoneycm Aug 10, 2023
609ca6d
Update default LinksAsButtons content
mahoneycm Aug 11, 2023
157b8b0
Remove type, add href to links template
mahoneycm Aug 11, 2023
472c093
Remove disabled example from big button display
mahoneycm Aug 14, 2023
4703138
Disable type control
mahoneycm Aug 14, 2023
90a0deb
Remove aria_disabled from link content
mahoneycm Aug 14, 2023
033b742
Merge branch 'develop' of github.com:uswds/uswds into cm-button-link-…
mahoneycm Aug 14, 2023
4129381
Run prettier
mahoneycm Aug 14, 2023
6c504d3
Merge branch 'develop' of github.com:uswds/uswds into cm-button-link-…
mahoneycm Aug 28, 2023
01641ba
Update story to match test patterns
mahoneycm Sep 20, 2023
dc10557
Remove links as button content json file in favor of inline args
mahoneycm Oct 19, 2023
d079749
Run prettier
mahoneycm Oct 19, 2023
814f746
Add conditional black background for inverse outline buttons
mahoneycm Nov 16, 2023
fb698eb
Remove redundant arg
mahoneycm Nov 16, 2023
82ae592
Add closing div tag
Nov 16, 2023
44a9039
Run prettier
Nov 16, 2023
b60e261
Follow default story pattern for links styled as buttons
mahoneycm Nov 27, 2023
3c65452
Move links twig file to it's own folder to resolve build error
mahoneycm Nov 29, 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
22 changes: 22 additions & 0 deletions packages/usa-button/src/usa-button--links/usa-button--links.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{% if 'usa-button--outline usa-button--inverse' in modifier %}
<div class="bg-base-darkest padding-1" style="max-width: fit-content">
{% endif %}

{% if is_demo and 'usa-button--big' not in modifier %}
<a href="#" class="usa-button {{ modifier }}">Default</a>
<a href="#" class="usa-button {{ modifier }} usa-button--hover">Hover</a>
<a href="#" class="usa-button {{ modifier }} usa-button--active">Active</a>
<a href="#" class="usa-button {{ modifier }} usa-focus">Focus</a>
<a href="#" class="usa-button {{ modifier }}" aria-disabled="true">aria-disabled</a>
<a href="#" class="usa-button {{ modifier }} usa-button--unstyled">Unstyled button</a>
{% else %}
<a href="#" class="usa-button {{ modifier }}">{{ text }}</a>
{% if is_demo and 'usa-button--big' in modifier %}
<a href="#" class="usa-button {{ modifier }}" aria-disabled="true">aria-disabled</a>
<a href="#" class="usa-button {{ modifier }} usa-button--unstyled">Unstyled button</a>
{% endif %}
{% endif %}

{% if 'usa-button--outline usa-button--inverse' in modifier %}
</div>
{% endif %}
15 changes: 15 additions & 0 deletions packages/usa-button/src/usa-button.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import Component from "./usa-button.twig";
import LinkButton from "./usa-button--links/usa-button--links.twig";
import {
DefaultContent,
AccentCoolContent,
Expand Down Expand Up @@ -35,6 +36,7 @@ export default {
};

const Template = (args) => Component(args);
const LinksTemplate = (args) => LinkButton(args);

export const Default = Template.bind({});
Default.args = DefaultContent;
Expand Down Expand Up @@ -62,3 +64,16 @@ Secondary.args = SecondaryContent;

export const Unstyled = Template.bind({});
Unstyled.args = UnstyledContent;

export const LinksStyledAsButtons = LinksTemplate.bind({});
LinksStyledAsButtons.args = {
modifier: "",
text: "Link styled as button",
};
LinksStyledAsButtons.argTypes = {
type: {
table: {
disable: true,
},
},
};