1
1
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-23 05:31:49 +03:00

Adds css helpers to Button

This commit is contained in:
Tessa Kelly 2022-03-04 17:16:57 -08:00
parent c6f8f7a854
commit d849f3ae75
2 changed files with 67 additions and 2 deletions
src/Nri/Ui/Button
styleguide-app/Examples

View File

@ -1,13 +1,14 @@
module Nri.Ui.Button.V10 exposing
( button, link
, Attribute
, icon, custom, css, nriDescription, testId, id
, onClick
, href, linkSpa, linkExternal, linkWithMethod, linkWithTracking, linkExternalWithTracking
, small, medium, large, modal
, exactWidth, boundedWidth, unboundedWidth, fillContainerWidth
, primary, secondary, danger, premium
, enabled, unfulfilled, disabled, error, loading, success
, icon, custom, nriDescription, testId, id
, css, notMobileCss, mobileCss, quizEngineMobileCss
, delete
, toggleButton
)
@ -32,7 +33,6 @@ module Nri.Ui.Button.V10 exposing
@docs button, link
@docs Attribute
@docs icon, custom, css, nriDescription, testId, id
## Behavior
@ -57,6 +57,16 @@ module Nri.Ui.Button.V10 exposing
@docs enabled, unfulfilled, disabled, error, loading, success
## Customization
@docs icon, custom, nriDescription, testId, id
### CSS
@docs css, notMobileCss, mobileCss, quizEngineMobileCss
# Commonly-used buttons
@docs delete
@ -70,6 +80,7 @@ import Accessibility.Styled.Widget as Widget
import ClickableAttributes exposing (ClickableAttributes)
import Css exposing (Style)
import Css.Global
import Css.Media
import Html.Styled as Styled
import Html.Styled.Attributes as Attributes
import Html.Styled.Events as Events
@ -80,6 +91,7 @@ import Nri.Ui.Colors.Extra as ColorsExtra
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Fonts.V1
import Nri.Ui.Html.Attributes.V2 as ExtraAttributes
import Nri.Ui.MediaQuery.V1 as MediaQuery
import Nri.Ui.Svg.V1 as NriSvg exposing (Svg)
import Svg
import Svg.Attributes
@ -182,6 +194,39 @@ css styles =
)
{-| Equivalent to:
ClickableText.css
[ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.notMobile ] styles ]
-}
notMobileCss : List Style -> Attribute msg
notMobileCss styles =
css [ Css.Media.withMedia [ MediaQuery.notMobile ] styles ]
{-| Equivalent to:
ClickableText.css
[ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.mobile ] styles ]
-}
mobileCss : List Style -> Attribute msg
mobileCss styles =
css [ Css.Media.withMedia [ MediaQuery.mobile ] styles ]
{-| Equivalent to:
ClickableText.css
[ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.quizEngineMobile ] styles ]
-}
quizEngineMobileCss : List Style -> Attribute msg
quizEngineMobileCss styles =
css [ Css.Media.withMedia [ MediaQuery.quizEngineMobile ] styles ]
-- LINKING, CLICKING, and TRACKING BEHAVIOR

View File

@ -166,6 +166,26 @@ initDebugControls =
, ( "success", Button.success )
]
)
|> CommonControls.css
{ moduleName = "Button"
, use = Button.css
, default = "border: 2px solid red;"
}
|> CommonControls.mobileCss
{ moduleName = "Button"
, use = Button.mobileCss
, default = "[role=img] { display: none !important; }"
}
|> CommonControls.quizEngineMobileCss
{ moduleName = "Button"
, use = Button.quizEngineMobileCss
, default = "[role=img] { display: none !important; }"
}
|> CommonControls.notMobileCss
{ moduleName = "Button"
, use = Button.notMobileCss
, default = ""
}
)