login button component

[nprimak]

🎫 Ticket

LG-11902

🛠 Summary of changes

Creating a login button component where the workbench preview will be embedded into the agency logo page for the dev docs for LG-11728

Refer to the Figma design here: https://www.figma.com/file/Vii2kxbapRsAXr3M8K2Ecy/UX-Guide%3A-Sign-in-button-examples-and-images-(LG-10129)?type=design&node-id=69-1626&mode=design&t=3jmQmschHLz26SXP-0

[zachmargolis]

do we typically indent by 2 in CSS like we do for our other files? (.js, .rb)

[nprimak]

surprised the linter didn't fix it - yes I will fix!

[aduth]

Looks like our linter isn't checking these component stylesheets. I can help put together a fix for that

identity-idp/package.json

Line 14 in dd963f1

"lint:css": "stylelint 'app/assets/stylesheets/**/*.scss' 'app/javascript/**/*.scss'",

[aduth]

I'm not sure I follow if / how this class is extended to be a subclass of ButtonComponent, where if it were a subclass, I'd expect we wouldn't duplicate usa-button here, and we'd be deferring the rendering to ButtonComponent in some way.

I might suggest avoiding making this a subclass. If we wanted, we could reuse behaviors of ButtonComponent by rendering it in the template: render ButtonComponent.new(...) instead of content_tag(:button, ...)

[nprimak]

Yeah the only thing I was extending was making the button get bigger but I easily remedied that by just adding

classes << 'usa-button--big' if big

on line 25

[aduth]

Somewhat related to the prior point about subclassing: color is not a property of ButtonComponent, so I wouldn't expect we'd be passing it this way. Currently, it's being passed through as an attribute of the button tag, which is unexpected:

<button color="primary-darker" class="usa-button login-button login-button--primary-darker"> 
  Sign in with <span class="login-button__logo login-button__logo-white">Login.gov</span>
</button>

[aduth]

I think this'll be all set after this batch of comments 👍

[aduth]

LGTM after the lint issue is resolved.

[aduth]

LGTM!