NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-11-24 00:42:29 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into tessa/icon-work

Browse Source
This commit is contained in:
Tessa 2019-06-13 17:25:56 -07:00 committed by GitHub
commit bcf228998c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 251 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
elm.json
View File

@ -50,6 +50,7 @@
"Nri.Ui.PremiumCheckbox.V2",
"Nri.Ui.PremiumCheckbox.V3",
"Nri.Ui.PremiumCheckbox.V4",
"Nri.Ui.PremiumCheckbox.V5",
"Nri.Ui.SegmentedControl.V6",
"Nri.Ui.SegmentedControl.V7",
"Nri.Ui.Select.V5",

150
src/Nri/Ui/PremiumCheckbox/V5.elm Normal file
View File

@ -0,0 +1,150 @@
module Nri.Ui.PremiumCheckbox.V5 exposing (view, Pennant(..))
{-|
@docs view, Pennant
# Changes from V4
- inlines the Config
- renames render function from `premium` to `view`
- removes dependency on Assets
-}
import Accessibility.Styled as Html exposing (Html)
import Css exposing (..)
import Html.Styled exposing (fromUnstyled)
import Html.Styled.Attributes as Attributes exposing (css)
import Nri.Ui.Checkbox.V5 as Checkbox
import Svg exposing (..)
import Svg.Attributes exposing (..)
{-| Premium is the yellow "P" pennant
PremiumWithWriting is the yellow "P+" pennant
-}
type Pennant
= Premium
| PremiumWithWriting
{-| A checkbox that should be used for premium content
- `onChange`: A message for when the user toggles the checkbox
- `onLockedClick`: A message for when the user clicks a checkbox they don't have PremiumLevel for.
If you get this message, you should show an `Nri.Ui.Premium.Model.view`
-}
view :
{ label : String
, id : String
, selected : Checkbox.IsSelected
, disabled : Bool
, isLocked : Bool
, pennant : Pennant
, onChange : Bool -> msg
, onLockedClick : msg
}
-> Html msg
view config =
Html.div
[ css
[ displayFlex
, alignItems center
]
]
[ Checkbox.viewWithLabel
{ identifier = config.id
, label = config.label
, setterMsg =
if config.isLocked then
\_ -> config.onLockedClick
else
config.onChange
, selected = config.selected
, disabled = config.disabled
, theme =
if config.isLocked then
Checkbox.Locked
else
Checkbox.Square
}
, case config.pennant of
Premium ->
premiumFlag
PremiumWithWriting ->
premiumWithWritingFlag
]
premiumFlag : Html msg
premiumFlag =
svg
[ version "1.1"
, id "Layer_1"
, Svg.Attributes.width "25"
, Svg.Attributes.height "19"
, Svg.Attributes.viewBox "0 0 25 19"
, Svg.Attributes.style "margin-left: 8px;"
]
[ Svg.title [] [ text "Premium" ]
, Svg.style [] [ text " .premium-flag-st0{fill:#FEC709;} .premium-flag-st1{fill:#146AFF;} " ]
, g [ id "Page-1" ]
[ g
[ id "icon_x2F_p-mini-pennant-yellow"
, Svg.Attributes.transform "translate(0.000000, -3.000000)"
]
[ g
[ id "Group"
, Svg.Attributes.transform "translate(0.000000, 3.750000)"
]
[ polygon
[ id "Fill-2"
, class "premium-flag-st0"
, points "12.7,0 0,0 0,13.8 0,15.8 0,17.5 7.3,17.5 24.8,17.5 19.4,8.1 24.8,0 "
]
[]
, Svg.path
[ id "P"
, class "premium-flag-st1"
, d "M7.5,3.8h4.2c1.1,0,1.9,0.3,2.5,0.8s0.9,1.2,0.9,2.1s-0.3,1.6-0.9,2.1c-0.6,0.5-1.4,0.8-2.5,0.8H9.3 v4.1H7.5V3.8z M11.5,8.1c0.6,0,1.1-0.1,1.4-0.4c0.3-0.3,0.5-0.6,0.5-1.1c0-0.5-0.2-0.9-0.5-1.1c-0.3-0.3-0.8-0.4-1.4-0.4H9.3v3 H11.5z"
]
[]
]
]
]
]
|> fromUnstyled
premiumWithWritingFlag : Html msg
premiumWithWritingFlag =
svg
[ Svg.Attributes.width "25"
, Svg.Attributes.height "18"
, Svg.Attributes.viewBox "0 0 25 18"
, Svg.Attributes.style "margin-left: 8px;"
]
[ Svg.title [] [ text "Premium with Writing" ]
, g
[ Svg.Attributes.fill "none"
, fillRule "evenodd"
]
[ Svg.path
[ Svg.Attributes.fill "#FEC709"
, d "M12.662 0H0v17.5h24.777l-5.384-9.423L24.777 0z"
]
[]
, Svg.path
[ Svg.Attributes.fill "#146AFF"
, d "M2.5 3.75h4.249c1.054 0 1.874.254 2.461.763.587.509.88 1.203.88 2.083 0 .88-.296 1.577-.887 2.09-.591.514-1.41.77-2.454.77H4.274v4.084H2.5V3.75zm4.043 4.331c.614 0 1.079-.126 1.395-.378.316-.252.474-.616.474-1.093 0-.486-.155-.855-.467-1.107-.312-.252-.78-.378-1.402-.378h-2.27v2.956h2.27zM12.85 7h1.31c.152 0 .278.127.278.288V9.57h2.283c.152 0 .279.127.279.28v1.31a.281.281 0 0 1-.279.278h-2.283v2.283a.281.281 0 0 1-.278.279h-1.31a.281.281 0 0 1-.28-.279v-2.283h-2.282A.283.283 0 0 1 10 11.16V9.85c0-.153.127-.28.288-.28h2.282V7.288c0-.161.127-.288.28-.288z"
]
[]
]
]
|> fromUnstyled

94
src/Nri/Ui/SpriteSheet.elm
View File

@ -50,8 +50,12 @@ checkmark =
, width "100%"
, height "100%"
]
[ Svg.style [] [ Svg.text " .st0{fill:currentcolor;} " ]
, Svg.path [ id "check-white", class "st0", d "M7.6,17.1c-0.5,0-1-0.2-1.4-0.6l-5.6-5.4c-0.8-0.8-0.8-2-0.1-2.8c0.8-0.8,2-0.8,2.8-0.1l4.1,4 L18.2,0.7c0.8-0.8,2-0.9,2.8-0.1s0.9,2,0.1,2.8l-12,13C8.7,16.9,8.2,17.1,7.6,17.1C7.7,17.1,7.6,17.1,7.6,17.1" ] []
[ Svg.path
[ id "check-white"
, fill "currentcolor"
, d "M7.6,17.1c-0.5,0-1-0.2-1.4-0.6l-5.6-5.4c-0.8-0.8-0.8-2-0.1-2.8c0.8-0.8,2-0.8,2.8-0.1l4.1,4 L18.2,0.7c0.8-0.8,2-0.9,2.8-0.1s0.9,2,0.1,2.8l-12,13C8.7,16.9,8.2,17.1,7.6,17.1C7.7,17.1,7.6,17.1,7.6,17.1"
]
[]
]
|> fromUnstyled
|> NriSvg.fromHtml
@ -70,7 +74,7 @@ bulb =
, width "100%"
, height "100%"
]
[ Svg.style [] [ Svg.text " .st0{fill:#FEC709;} " ]
[ Svg.style [] [ Svg.text ".blub-st0{fill:#FEC709;} " ]
, g [ id "feedback" ]
[ g [ id "dot-tip", transform "translate(-261.000000, -371.000000)" ]
[ g
@ -79,18 +83,78 @@ bulb =
]
[ g [ id "icon_x2F_bulb-yellow", transform "translate(0.859754, 0.051946)" ]
[ g [ id "Group", transform "translate(0.461538, 0.000000)" ]
[ Svg.path [ id "Fill-1", class "st0", d "M21.6,12.5H19c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h2.6c0.3,0,0.6-0.3,0.6-0.6 S21.9,12.5,21.6,12.5z" ] []
, Svg.path [ id "Fill-2", class "st0", d "M18.1,9.3c0.1,0,0.2,0,0.3-0.1l2.3-1.4C20.9,7.7,21,7.3,20.8,7c-0.2-0.3-0.5-0.4-0.8-0.2 l-2.3,1.4c-0.2,0.1-0.3,0.4-0.3,0.7C17.6,9.1,17.8,9.3,18.1,9.3L18.1,9.3z" ] []
, Svg.path [ id "Fill-3", class "st0", d "M17.1,2c-0.3-0.2-0.6-0.1-0.8,0.2l-1.5,2.2h0c-0.1,0.1-0.1,0.3-0.1,0.5c0,0.2,0.1,0.3,0.2,0.4 c0.1,0.1,0.3,0.1,0.4,0.1c0.2,0,0.3-0.1,0.4-0.3l1.5-2.2C17.4,2.6,17.4,2.2,17.1,2L17.1,2z" ] []
, Svg.path [ id "Fill-4", class "st0", d "M6.7,5.4c0.2,0,0.4-0.1,0.5-0.3c0.1-0.2,0.1-0.4,0-0.6L5.7,2.2v0C5.6,2.1,5.4,2,5.3,1.9 C5.1,1.9,5,1.9,4.9,2C4.7,2.1,4.6,2.3,4.6,2.4c0,0.2,0,0.3,0.1,0.4l1.5,2.2C6.3,5.3,6.5,5.4,6.7,5.4L6.7,5.4z" ] []
, Svg.path [ id "Fill-5", class "st0", d "M4,8.2L1.7,6.8C1.5,6.7,1.1,6.8,1,7C0.8,7.3,0.9,7.6,1.2,7.8l2.3,1.4c0.1,0.1,0.3,0.1,0.4,0.1 C4,9.2,4.1,9.1,4.2,9c0.1-0.1,0.1-0.3,0.1-0.5C4.2,8.4,4.1,8.2,4,8.2L4,8.2z" ] []
, Svg.path [ id "Fill-6", class "st0", d "M20.6,17.8l-2.2-1.4c-0.3-0.2-0.6-0.1-0.8,0.2c-0.2,0.3-0.1,0.6,0.2,0.8l2.3,1.4 c0.3,0.1,0.6,0,0.7-0.2C21,18.3,20.9,18,20.6,17.8L20.6,17.8z" ] []
, Svg.path [ id "Fill-7", class "st0", d "M3.5,16.4l-2.3,1.4h0C1.1,17.8,1,18,0.9,18.1c0,0.2,0,0.3,0.1,0.5c0.1,0.1,0.2,0.2,0.4,0.3 c0.1,0,0.3,0,0.4-0.1L4,17.4c0.3-0.2,0.3-0.5,0.2-0.8C4.1,16.4,3.7,16.3,3.5,16.4L3.5,16.4z" ] []
, Svg.path [ id "Fill-8", class "st0", d "M3.7,13.1c0-0.3-0.3-0.6-0.6-0.6H0.6c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h2.6 c0.1,0,0.3-0.1,0.4-0.2C3.7,13.4,3.7,13.2,3.7,13.1L3.7,13.1z" ] []
, Svg.path [ id "Fill-9", class "st0", d "M10.7,3.9c0.3,0,0.6-0.3,0.6-0.6V0.6C11.3,0.3,11,0,10.7,0c-0.3,0-0.6,0.3-0.6,0.6v2.7 c0,0.2,0.1,0.3,0.2,0.4S10.6,3.9,10.7,3.9L10.7,3.9z" ] []
, Svg.path [ id "Fill-10", class "st0", d "M13.4,20.2H8.9c-0.3,0-0.6,0.3-0.6,0.6c0,0.3,0.3,0.6,0.6,0.6h4.5c0.3,0,0.6-0.3,0.6-0.6 C14,20.5,13.7,20.2,13.4,20.2z" ] []
, Svg.path [ id "Fill-11", class "st0", d "M10,23.5v0.3c0,0.4,0.3,0.7,0.6,0.7h0.9c0.4,0,0.6-0.3,0.6-0.7v-0.3c0.7,0,1.3-0.7,1.3-1.4 H8.8C8.9,22.8,9.4,23.4,10,23.5L10,23.5z" ] []
, Svg.path [ id "Fill-12", class "st0", d "M11.2,6.7c-3.1,0-5.6,2.7-5.6,6v0c0,0.8,0.1,1.5,0.4,2.3c0,0.1,0.1,0.2,0.1,0.3h0 c0.2,0.6,0.6,1.1,1,1.6l1.4,2.3h5.4l1.4-2.3c0.4-0.5,0.7-1,1-1.6c0-0.1,0.1-0.2,0.1-0.3h0c0.3-0.7,0.4-1.5,0.4-2.3 C16.8,9.4,14.3,6.7,11.2,6.7L11.2,6.7z M10.9,9c-0.6,0-1.2,0.2-1.7,0.5c-1.1,0.7-1.6,1.9-1.7,3.5v0c0,0.3-0.3,0.6-0.6,0.6 c-0.1,0-0.3-0.1-0.4-0.2c-0.1-0.1-0.2-0.3-0.2-0.4c0-2.7,1.3-4,2.3-4.6c0.7-0.4,1.4-0.6,2.2-0.7c0.3,0,0.6,0.3,0.6,0.6 C11.5,8.7,11.2,9,10.9,9L10.9,9z" ] []
[ Svg.path
[ id "Fill-1"
, class "blub-st0"
, d "M21.6,12.5H19c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h2.6c0.3,0,0.6-0.3,0.6-0.6 S21.9,12.5,21.6,12.5z"
]
[]
, Svg.path
[ id "Fill-2"
, class "blub-st0"
, d "M18.1,9.3c0.1,0,0.2,0,0.3-0.1l2.3-1.4C20.9,7.7,21,7.3,20.8,7c-0.2-0.3-0.5-0.4-0.8-0.2 l-2.3,1.4c-0.2,0.1-0.3,0.4-0.3,0.7C17.6,9.1,17.8,9.3,18.1,9.3L18.1,9.3z"
]
[]
, Svg.path
[ id "Fill-3"
, class "blub-st0"
, d "M17.1,2c-0.3-0.2-0.6-0.1-0.8,0.2l-1.5,2.2h0c-0.1,0.1-0.1,0.3-0.1,0.5c0,0.2,0.1,0.3,0.2,0.4 c0.1,0.1,0.3,0.1,0.4,0.1c0.2,0,0.3-0.1,0.4-0.3l1.5-2.2C17.4,2.6,17.4,2.2,17.1,2L17.1,2z"
]
[]
, Svg.path
[ id "Fill-4"
, class "blub-st0"
, d "M6.7,5.4c0.2,0,0.4-0.1,0.5-0.3c0.1-0.2,0.1-0.4,0-0.6L5.7,2.2v0C5.6,2.1,5.4,2,5.3,1.9 C5.1,1.9,5,1.9,4.9,2C4.7,2.1,4.6,2.3,4.6,2.4c0,0.2,0,0.3,0.1,0.4l1.5,2.2C6.3,5.3,6.5,5.4,6.7,5.4L6.7,5.4z"
]
[]
, Svg.path
[ id "Fill-5"
, class "blub-st0"
, d "M4,8.2L1.7,6.8C1.5,6.7,1.1,6.8,1,7C0.8,7.3,0.9,7.6,1.2,7.8l2.3,1.4c0.1,0.1,0.3,0.1,0.4,0.1 C4,9.2,4.1,9.1,4.2,9c0.1-0.1,0.1-0.3,0.1-0.5C4.2,8.4,4.1,8.2,4,8.2L4,8.2z"
]
[]
, Svg.path
[ id "Fill-6"
, class "blub-st0"
, d "M20.6,17.8l-2.2-1.4c-0.3-0.2-0.6-0.1-0.8,0.2c-0.2,0.3-0.1,0.6,0.2,0.8l2.3,1.4 c0.3,0.1,0.6,0,0.7-0.2C21,18.3,20.9,18,20.6,17.8L20.6,17.8z"
]
[]
, Svg.path
[ id "Fill-7"
, class "blub-st0"
, d "M3.5,16.4l-2.3,1.4h0C1.1,17.8,1,18,0.9,18.1c0,0.2,0,0.3,0.1,0.5c0.1,0.1,0.2,0.2,0.4,0.3 c0.1,0,0.3,0,0.4-0.1L4,17.4c0.3-0.2,0.3-0.5,0.2-0.8C4.1,16.4,3.7,16.3,3.5,16.4L3.5,16.4z"
]
[]
, Svg.path
[ id "Fill-8"
, class "blub-st0"
, d "M3.7,13.1c0-0.3-0.3-0.6-0.6-0.6H0.6c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h2.6 c0.1,0,0.3-0.1,0.4-0.2C3.7,13.4,3.7,13.2,3.7,13.1L3.7,13.1z"
]
[]
, Svg.path
[ id "Fill-9"
, class "blub-st0"
, d "M10.7,3.9c0.3,0,0.6-0.3,0.6-0.6V0.6C11.3,0.3,11,0,10.7,0c-0.3,0-0.6,0.3-0.6,0.6v2.7 c0,0.2,0.1,0.3,0.2,0.4S10.6,3.9,10.7,3.9L10.7,3.9z"
]
[]
, Svg.path
[ id "Fill-10"
, class "blub-st0"
, d "M13.4,20.2H8.9c-0.3,0-0.6,0.3-0.6,0.6c0,0.3,0.3,0.6,0.6,0.6h4.5c0.3,0,0.6-0.3,0.6-0.6 C14,20.5,13.7,20.2,13.4,20.2z"
]
[]
, Svg.path
[ id "Fill-11"
, class "blub-st0"
, d "M10,23.5v0.3c0,0.4,0.3,0.7,0.6,0.7h0.9c0.4,0,0.6-0.3,0.6-0.7v-0.3c0.7,0,1.3-0.7,1.3-1.4 H8.8C8.9,22.8,9.4,23.4,10,23.5L10,23.5z"
]
[]
, Svg.path
[ id "Fill-12"
, class "blub-st0"
, d "M11.2,6.7c-3.1,0-5.6,2.7-5.6,6v0c0,0.8,0.1,1.5,0.4,2.3c0,0.1,0.1,0.2,0.1,0.3h0 c0.2,0.6,0.6,1.1,1,1.6l1.4,2.3h5.4l1.4-2.3c0.4-0.5,0.7-1,1-1.6c0-0.1,0.1-0.2,0.1-0.3h0c0.3-0.7,0.4-1.5,0.4-2.3 C16.8,9.4,14.3,6.7,11.2,6.7L11.2,6.7z M10.9,9c-0.6,0-1.2,0.2-1.7,0.5c-1.1,0.7-1.6,1.9-1.7,3.5v0c0,0.3-0.3,0.6-0.6,0.6 c-0.1,0-0.3-0.1-0.4-0.2c-0.1-0.1-0.2-0.3-0.2-0.4c0-2.7,1.3-4,2.3-4.6c0.7-0.4,1.4-0.6,2.2-0.7c0.3,0,0.6,0.3,0.6,0.6 C11.5,8.7,11.2,9,10.9,9L10.9,9z"
]
[]
]
]
]

4
styleguide-app/Assets.elm
View File

@ -32,8 +32,6 @@ type alias Assets =
, help : String
, hint_png : Asset
, iconFlag_png : Asset
, iconPremiumFlag_svg : Asset
, iconPremiumWithWritingFlag_svg : Asset
, icons_equals_svg : Asset
, icons_xBlue_svg : Asset
, key : String
@ -104,8 +102,6 @@ assets =
, help = "icon-help"
, hint_png = Asset "assets/images/hint.png"
, iconFlag_png = Asset "assets/images/icon-flag.png"
, iconPremiumFlag_svg = Asset "assets/images/icon_premium_flag.svg"
, iconPremiumWithWritingFlag_svg = Asset "assets/images/icon_premium_writing_flag.svg"
, icons_equals_svg = Asset "assets/images/equals.svg"
, icons_xBlue_svg = Asset "assets/images/x-blue.svg"
, key = "icon-key"

30
styleguide-app/Examples/Checkbox.elm
View File

@ -6,14 +6,13 @@ module Examples.Checkbox exposing (Msg, State, example, init, update)
-}
import Assets exposing (assets)
import Css
import Html.Styled as Html exposing (..)
import Html.Styled.Attributes exposing (css)
import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
import Nri.Ui.Checkbox.V5 as Checkbox
import Nri.Ui.Data.PremiumLevel as PremiumLevel exposing (PremiumLevel(..))
import Nri.Ui.PremiumCheckbox.V4 as PremiumCheckbox
import Nri.Ui.PremiumCheckbox.V5 as PremiumCheckbox
import Set exposing (Set)
@ -80,7 +79,7 @@ update msg state =
type alias PremiumExampleConfig =
{ disabled : Bool
, teacherPremiumLevel : PremiumLevel
, pennant : Maybe PremiumCheckbox.Pennant
, pennant : PremiumCheckbox.Pennant
}
@ -176,8 +175,7 @@ viewPremiumCheckboxes : State -> Html Msg
viewPremiumCheckboxes state =
let
checkbox config =
PremiumCheckbox.premium
assets
PremiumCheckbox.view
{ label = config.label
, id = "premium-checkbox-" ++ config.label
, selected =
@ -194,10 +192,24 @@ viewPremiumCheckboxes state =
}
in
Html.div []
[ checkbox { label = "Identify Adjectives 1 (Free)", disabled = False, isLocked = False, pennant = Nothing }
, checkbox { label = "Identify Adjectives 2 (Premium)", disabled = False, isLocked = False, pennant = Just PremiumCheckbox.Premium }
, checkbox { label = "Revising Wordy Phrases 1 (Writing)", disabled = False, isLocked = True, pennant = Just PremiumCheckbox.PremiumWithWriting }
, checkbox { label = "Revising Wordy Phrases 2 (Writing) (Disabled)", disabled = True, isLocked = True, pennant = Just PremiumCheckbox.PremiumWithWriting }
[ checkbox
{ label = "Identify Adjectives 2 (Premium)"
, disabled = False
, isLocked = False
, pennant = PremiumCheckbox.Premium
}
, checkbox
{ label = "Revising Wordy Phrases 1 (Writing)"
, disabled = False
, isLocked = True
, pennant = PremiumCheckbox.PremiumWithWriting
}
, checkbox
{ label = "Revising Wordy Phrases 2 (Writing) (Disabled)"
, disabled = True
, isLocked = True
, pennant = PremiumCheckbox.PremiumWithWriting
}
]

3
styleguide-app/assets/images/icon_premium_flag.svg
View File

@ -1,3 +0,0 @@
version https://git-lfs.github.com/spec/v1
oid sha256:3bcb4a83ca4e7c4739748a81d5f56fbedf9d9925fe1db8e9fe2e4312c3fa21d2
size 1069

3
styleguide-app/assets/images/icon_premium_writing_flag.svg
View File

@ -1,3 +0,0 @@
version https://git-lfs.github.com/spec/v1
oid sha256:16221aee450224605f8a4aae798ed2ebbba3698fac2dc101d0132729e8f5cdce
size 817