2018-06-22 20:39:00 +03:00
|
|
|
module Examples.Icon exposing (example)
|
Extract `Nri.Icon` from the monolith
The recommendation is to break the styles API rather than the view API
when moving something out of the monolith into this repo.
`Nri.Icon` is not really setup for that sort of breakage.
If we would prefer to have the styles break rather than the view,
that will take more work.
Work that can be done independent of the extraction.
The transition in the monolith ought to look something like:
```elm
module Nri.Icon exposing (..)
import Html exposing (Html)
import Nri.SvgSprite
import Nri.Ui.Icon.V1 exposing (Assets, IconType)
icon : { alt : String, icon : IconType } -> Html msg
icon config =
Nri.Ui.Icon.V1.icon assets
assets : Assets {}
assets =
{ activity = Nri.SvgSprite.activity
, arrowDown = Nri.SvgSprite.arrowDown
, attention_svg = Nri.Assets.attention_svg
...
}
```
So hopefully, the change is still very small on the monolith side.
There's maybe a bigger concern than which API breaks.
`Nri.Icon` has some behavior for a11y.
We could definitely change the internals over during the extraction.
But, since all of these changes are value-level changes,
it's very likely that we'll break something in the process.
That's a bigger concern because instead of affecting
the handful of Engineers working at NRI,
we would be affecting the millions of people using the site.
We shouldn't fear making those kinds of changes.
However, we should make them when we can give them the appropriate
attention they deserve.
Not when one person is trying to move as fast as possible to avoid
race conditions of moving modules between repos.
2018-03-29 03:34:56 +03:00
|
|
|
|
|
|
|
|
{-|
|
|
|
|
|
|
|
|
|
|
@docs example, styles
|
|
|
|
|
|
|
|
|
|
-}
|
|
|
|
|
|
2018-06-22 20:39:00 +03:00
|
|
|
import Assets exposing (Assets, assets)
|
Extract `Nri.Icon` from the monolith
The recommendation is to break the styles API rather than the view API
when moving something out of the monolith into this repo.
`Nri.Icon` is not really setup for that sort of breakage.
If we would prefer to have the styles break rather than the view,
that will take more work.
Work that can be done independent of the extraction.
The transition in the monolith ought to look something like:
```elm
module Nri.Icon exposing (..)
import Html exposing (Html)
import Nri.SvgSprite
import Nri.Ui.Icon.V1 exposing (Assets, IconType)
icon : { alt : String, icon : IconType } -> Html msg
icon config =
Nri.Ui.Icon.V1.icon assets
assets : Assets {}
assets =
{ activity = Nri.SvgSprite.activity
, arrowDown = Nri.SvgSprite.arrowDown
, attention_svg = Nri.Assets.attention_svg
...
}
```
So hopefully, the change is still very small on the monolith side.
There's maybe a bigger concern than which API breaks.
`Nri.Icon` has some behavior for a11y.
We could definitely change the internals over during the extraction.
But, since all of these changes are value-level changes,
it's very likely that we'll break something in the process.
That's a bigger concern because instead of affecting
the handful of Engineers working at NRI,
we would be affecting the millions of people using the site.
We shouldn't fear making those kinds of changes.
However, we should make them when we can give them the appropriate
attention they deserve.
Not when one person is trying to move as fast as possible to avoid
race conditions of moving modules between repos.
2018-03-29 03:34:56 +03:00
|
|
|
import Css
|
2018-11-13 02:38:19 +03:00
|
|
|
import Css.Global
|
2018-06-22 20:39:00 +03:00
|
|
|
import Html.Styled as Html exposing (Html)
|
|
|
|
|
import Html.Styled.Attributes exposing (css, style, title)
|
Extract `Nri.Icon` from the monolith
The recommendation is to break the styles API rather than the view API
when moving something out of the monolith into this repo.
`Nri.Icon` is not really setup for that sort of breakage.
If we would prefer to have the styles break rather than the view,
that will take more work.
Work that can be done independent of the extraction.
The transition in the monolith ought to look something like:
```elm
module Nri.Icon exposing (..)
import Html exposing (Html)
import Nri.SvgSprite
import Nri.Ui.Icon.V1 exposing (Assets, IconType)
icon : { alt : String, icon : IconType } -> Html msg
icon config =
Nri.Ui.Icon.V1.icon assets
assets : Assets {}
assets =
{ activity = Nri.SvgSprite.activity
, arrowDown = Nri.SvgSprite.arrowDown
, attention_svg = Nri.Assets.attention_svg
...
}
```
So hopefully, the change is still very small on the monolith side.
There's maybe a bigger concern than which API breaks.
`Nri.Icon` has some behavior for a11y.
We could definitely change the internals over during the extraction.
But, since all of these changes are value-level changes,
it's very likely that we'll break something in the process.
That's a bigger concern because instead of affecting
the handful of Engineers working at NRI,
we would be affecting the millions of people using the site.
We shouldn't fear making those kinds of changes.
However, we should make them when we can give them the appropriate
attention they deserve.
Not when one person is trying to move as fast as possible to avoid
race conditions of moving modules between repos.
2018-03-29 03:34:56 +03:00
|
|
|
import ModuleExample exposing (Category(..), ModuleExample)
|
2019-10-01 02:07:13 +03:00
|
|
|
import Nri.Ui.AssignmentIcon.V1 as AssignmentIcon
|
Extract `Nri.Icon` from the monolith
The recommendation is to break the styles API rather than the view API
when moving something out of the monolith into this repo.
`Nri.Icon` is not really setup for that sort of breakage.
If we would prefer to have the styles break rather than the view,
that will take more work.
Work that can be done independent of the extraction.
The transition in the monolith ought to look something like:
```elm
module Nri.Icon exposing (..)
import Html exposing (Html)
import Nri.SvgSprite
import Nri.Ui.Icon.V1 exposing (Assets, IconType)
icon : { alt : String, icon : IconType } -> Html msg
icon config =
Nri.Ui.Icon.V1.icon assets
assets : Assets {}
assets =
{ activity = Nri.SvgSprite.activity
, arrowDown = Nri.SvgSprite.arrowDown
, attention_svg = Nri.Assets.attention_svg
...
}
```
So hopefully, the change is still very small on the monolith side.
There's maybe a bigger concern than which API breaks.
`Nri.Icon` has some behavior for a11y.
We could definitely change the internals over during the extraction.
But, since all of these changes are value-level changes,
it's very likely that we'll break something in the process.
That's a bigger concern because instead of affecting
the handful of Engineers working at NRI,
we would be affecting the millions of people using the site.
We shouldn't fear making those kinds of changes.
However, we should make them when we can give them the appropriate
attention they deserve.
Not when one person is trying to move as fast as possible to avoid
race conditions of moving modules between repos.
2018-03-29 03:34:56 +03:00
|
|
|
import Nri.Ui.Colors.V1 exposing (..)
|
2019-07-23 17:53:43 +03:00
|
|
|
import Nri.Ui.Heading.V2 as Heading
|
2019-05-29 20:20:30 +03:00
|
|
|
import Nri.Ui.Icon.V5 as Icon
|
2019-07-23 17:09:07 +03:00
|
|
|
import Nri.Ui.Text.V4 as Text
|
Extract `Nri.Icon` from the monolith
The recommendation is to break the styles API rather than the view API
when moving something out of the monolith into this repo.
`Nri.Icon` is not really setup for that sort of breakage.
If we would prefer to have the styles break rather than the view,
that will take more work.
Work that can be done independent of the extraction.
The transition in the monolith ought to look something like:
```elm
module Nri.Icon exposing (..)
import Html exposing (Html)
import Nri.SvgSprite
import Nri.Ui.Icon.V1 exposing (Assets, IconType)
icon : { alt : String, icon : IconType } -> Html msg
icon config =
Nri.Ui.Icon.V1.icon assets
assets : Assets {}
assets =
{ activity = Nri.SvgSprite.activity
, arrowDown = Nri.SvgSprite.arrowDown
, attention_svg = Nri.Assets.attention_svg
...
}
```
So hopefully, the change is still very small on the monolith side.
There's maybe a bigger concern than which API breaks.
`Nri.Icon` has some behavior for a11y.
We could definitely change the internals over during the extraction.
But, since all of these changes are value-level changes,
it's very likely that we'll break something in the process.
That's a bigger concern because instead of affecting
the handful of Engineers working at NRI,
we would be affecting the millions of people using the site.
We shouldn't fear making those kinds of changes.
However, we should make them when we can give them the appropriate
attention they deserve.
Not when one person is trying to move as fast as possible to avoid
race conditions of moving modules between repos.
2018-03-29 03:34:56 +03:00
|
|
|
|
|
|
|
|
|
|
|
|
|
{-| -}
|
2018-03-29 13:58:41 +03:00
|
|
|
example : ModuleExample msg
|
|
|
|
|
example =
|
2019-05-03 19:56:43 +03:00
|
|
|
{ name = "Nri.Ui.Icon.V4"
|
Extract `Nri.Icon` from the monolith
The recommendation is to break the styles API rather than the view API
when moving something out of the monolith into this repo.
`Nri.Icon` is not really setup for that sort of breakage.
If we would prefer to have the styles break rather than the view,
that will take more work.
Work that can be done independent of the extraction.
The transition in the monolith ought to look something like:
```elm
module Nri.Icon exposing (..)
import Html exposing (Html)
import Nri.SvgSprite
import Nri.Ui.Icon.V1 exposing (Assets, IconType)
icon : { alt : String, icon : IconType } -> Html msg
icon config =
Nri.Ui.Icon.V1.icon assets
assets : Assets {}
assets =
{ activity = Nri.SvgSprite.activity
, arrowDown = Nri.SvgSprite.arrowDown
, attention_svg = Nri.Assets.attention_svg
...
}
```
So hopefully, the change is still very small on the monolith side.
There's maybe a bigger concern than which API breaks.
`Nri.Icon` has some behavior for a11y.
We could definitely change the internals over during the extraction.
But, since all of these changes are value-level changes,
it's very likely that we'll break something in the process.
That's a bigger concern because instead of affecting
the handful of Engineers working at NRI,
we would be affecting the millions of people using the site.
We shouldn't fear making those kinds of changes.
However, we should make them when we can give them the appropriate
attention they deserve.
Not when one person is trying to move as fast as possible to avoid
race conditions of moving modules between repos.
2018-03-29 03:34:56 +03:00
|
|
|
, category = Icons
|
|
|
|
|
, content =
|
2018-06-22 20:41:31 +03:00
|
|
|
[ viewIconSection "Mastery Icons"
|
2018-06-22 20:39:00 +03:00
|
|
|
[ { icon = Icon.gardening, background = Dark, alt = "Gardening" }
|
|
|
|
|
, { icon = Icon.highFive, background = Dark, alt = "HighFive" }
|
|
|
|
|
, { icon = Icon.okay, background = Dark, alt = "Okay" }
|
|
|
|
|
, { icon = Icon.thumbsUp, background = Dark, alt = "ThumbsUp" }
|
|
|
|
|
, { icon = Icon.masteryBadge, background = Light, alt = "Badge " }
|
|
|
|
|
]
|
|
|
|
|
, viewIconSection "Stars and Flags"
|
|
|
|
|
[ { icon = Icon.starred, background = Light, alt = "Starred" }
|
|
|
|
|
, { icon = Icon.notStarred, background = Light, alt = "NotStarred" }
|
|
|
|
|
, { icon = Icon.flag, background = Light, alt = "Flag" }
|
|
|
|
|
]
|
2019-10-01 02:58:36 +03:00
|
|
|
, viewAssignmentIconSection "Nri.Ui.AssignmentIcon.V1."
|
2019-10-01 02:18:37 +03:00
|
|
|
[ ( "diagnostic", AssignmentIcon.diagnostic )
|
2019-10-01 02:23:47 +03:00
|
|
|
, ( "practice", AssignmentIcon.practice )
|
2019-10-01 02:28:13 +03:00
|
|
|
, ( "quiz", AssignmentIcon.quiz )
|
2019-10-01 02:31:36 +03:00
|
|
|
, ( "quickWrite", AssignmentIcon.quickWrite )
|
2019-10-01 02:33:44 +03:00
|
|
|
, ( "guidedDraft", AssignmentIcon.guidedDraft )
|
2019-10-01 02:18:37 +03:00
|
|
|
, ( "peerReview", AssignmentIcon.peerReview )
|
2019-10-01 02:46:08 +03:00
|
|
|
, ( "selfReview", AssignmentIcon.selfReview )
|
2019-10-01 02:18:37 +03:00
|
|
|
]
|
2018-06-22 20:39:00 +03:00
|
|
|
, viewIconSection "Assignment Types"
|
2019-10-01 02:47:02 +03:00
|
|
|
[ { icon = Icon.submitting, background = Light, alt = "Submitting" }
|
2018-06-22 20:39:00 +03:00
|
|
|
, { icon = Icon.rating, background = Light, alt = "Rating" }
|
|
|
|
|
, { icon = Icon.revising, background = Light, alt = "Revising" }
|
2018-10-16 00:22:58 +03:00
|
|
|
, { icon = Icon.assignmentTypeWritingCycle, background = Light, alt = "WritingCycle" }
|
2018-06-22 20:39:00 +03:00
|
|
|
, { icon = Icon.writingAssignment, background = Light, alt = "WritingAssignment" }
|
|
|
|
|
]
|
2018-06-22 21:24:06 +03:00
|
|
|
, viewIconSection "Student Assignment Actions"
|
|
|
|
|
[ { icon = Icon.assignmentStartButtonPrimary, background = Light, alt = "Start primary" }
|
|
|
|
|
, { icon = Icon.assignmentStartButtonSecondary, background = Light, alt = "Start secondary" }
|
|
|
|
|
]
|
|
|
|
|
, viewIconSection "Teacher Assignment Actions"
|
2018-06-22 20:39:00 +03:00
|
|
|
[ { icon = Icon.unarchive, background = Light, alt = "Unarchive" }
|
|
|
|
|
, { icon = Icon.share, background = Light, alt = "Share" }
|
|
|
|
|
, { icon = Icon.seeMore, background = Light, alt = "See More" }
|
|
|
|
|
, { icon = Icon.preview, background = Light, alt = "Preview" }
|
|
|
|
|
, { icon = Icon.performance, background = Light, alt = "Performance" }
|
|
|
|
|
, { icon = Icon.openClose, background = Light, alt = "OpenClose" }
|
2019-05-03 18:53:10 +03:00
|
|
|
, { icon = Icon.download, background = Light, alt = "Download" }
|
2018-06-22 20:39:00 +03:00
|
|
|
]
|
|
|
|
|
, viewIconSection "Edit"
|
|
|
|
|
[ { icon = Icon.edit, background = Light, alt = "Edit" }
|
|
|
|
|
, { icon = Icon.editWriting, background = Light, alt = "EditWriting" }
|
|
|
|
|
]
|
|
|
|
|
, viewIconSection "Humans"
|
|
|
|
|
[ { icon = Icon.class, background = Light, alt = "Class" }
|
|
|
|
|
, { icon = Icon.leaderboard, background = Light, alt = "Leaderboard" }
|
|
|
|
|
, { icon = Icon.personBlue, background = Light, alt = "PersonBlue" }
|
|
|
|
|
]
|
|
|
|
|
, viewIconSection "Social Media"
|
|
|
|
|
[ { icon = Icon.facebook, background = Light, alt = "Facebook" }
|
|
|
|
|
, { icon = Icon.twitter, background = Light, alt = "Twitter" }
|
|
|
|
|
, { icon = Icon.clever, background = Light, alt = "Clever" }
|
|
|
|
|
]
|
|
|
|
|
, viewIconSection "Arrows and Carets"
|
|
|
|
|
[ { icon = Icon.arrowDown, background = Light, alt = "ArrowDown" }
|
|
|
|
|
, { icon = Icon.sortArrow, background = Light, alt = "SortArrow" }
|
|
|
|
|
]
|
|
|
|
|
, viewIconSection "Checkmarks"
|
|
|
|
|
[ { icon = Icon.checkMarkSvg, background = Light, alt = "CheckMarkSvg" }
|
|
|
|
|
]
|
|
|
|
|
, viewIconSection "Xs"
|
|
|
|
|
[ { icon = Icon.xSvg, background = Light, alt = "XSvg" }
|
|
|
|
|
]
|
|
|
|
|
, viewIconSection "Bangs"
|
|
|
|
|
[ { icon = Icon.exclamation, background = Light, alt = "Exclamation" }
|
|
|
|
|
, { icon = Icon.attention, background = Dark, alt = "Attention" }
|
|
|
|
|
]
|
|
|
|
|
, viewIconSection "Bulbs and Tips"
|
|
|
|
|
[ { icon = Icon.bulb, background = Light, alt = "Bulb" }
|
|
|
|
|
, { icon = Icon.lightBulb, background = Light, alt = "LightBulb" }
|
2019-05-03 18:53:10 +03:00
|
|
|
, { icon = Icon.helpSvg, background = Light, alt = "Help" }
|
2018-06-22 20:39:00 +03:00
|
|
|
]
|
|
|
|
|
, viewIconSection "Locks and keys"
|
|
|
|
|
[ { icon = Icon.key, background = Light, alt = "Key" }
|
|
|
|
|
, { icon = Icon.lock, background = Light, alt = "Lock" }
|
|
|
|
|
]
|
|
|
|
|
, viewIconSection "Time"
|
|
|
|
|
[ { icon = Icon.calendar, background = Light, alt = "Calendar" }
|
|
|
|
|
, { icon = Icon.clock, background = Light, alt = "Clock" }
|
|
|
|
|
]
|
|
|
|
|
, viewIconSection "Uncategorized (SVGs)"
|
|
|
|
|
[ { icon = Icon.activity, background = Light, alt = "Activity" }
|
|
|
|
|
, { icon = Icon.compassSvg, background = Light, alt = "CompassSvg" }
|
|
|
|
|
, { icon = Icon.document, background = Light, alt = "Document" }
|
|
|
|
|
, { icon = Icon.flipper, background = Light, alt = "Flipper" }
|
|
|
|
|
, { icon = Icon.footsteps, background = Light, alt = "Footsteps" }
|
|
|
|
|
, { icon = Icon.gear, background = Light, alt = "Gear" }
|
2018-08-14 00:41:09 +03:00
|
|
|
, { icon = Icon.pen, background = Light, alt = "Pen" }
|
2018-06-22 20:39:00 +03:00
|
|
|
, { icon = Icon.newspaper, background = Light, alt = "Newspaper" }
|
|
|
|
|
, { icon = Icon.sort, background = Light, alt = "Sort" }
|
|
|
|
|
, { icon = Icon.speedometer, background = Light, alt = "Speedometer" }
|
2019-06-04 01:28:24 +03:00
|
|
|
, { icon = Icon.skip, background = Light, alt = "Skip" }
|
2019-06-04 01:43:28 +03:00
|
|
|
, { icon = Icon.equalitySign, background = Light, alt = "EqualitySign" }
|
2019-06-04 02:35:12 +03:00
|
|
|
, { icon = Icon.logo, background = Light, alt = "Logo" }
|
2018-06-22 20:39:00 +03:00
|
|
|
]
|
Extract `Nri.Icon` from the monolith
The recommendation is to break the styles API rather than the view API
when moving something out of the monolith into this repo.
`Nri.Icon` is not really setup for that sort of breakage.
If we would prefer to have the styles break rather than the view,
that will take more work.
Work that can be done independent of the extraction.
The transition in the monolith ought to look something like:
```elm
module Nri.Icon exposing (..)
import Html exposing (Html)
import Nri.SvgSprite
import Nri.Ui.Icon.V1 exposing (Assets, IconType)
icon : { alt : String, icon : IconType } -> Html msg
icon config =
Nri.Ui.Icon.V1.icon assets
assets : Assets {}
assets =
{ activity = Nri.SvgSprite.activity
, arrowDown = Nri.SvgSprite.arrowDown
, attention_svg = Nri.Assets.attention_svg
...
}
```
So hopefully, the change is still very small on the monolith side.
There's maybe a bigger concern than which API breaks.
`Nri.Icon` has some behavior for a11y.
We could definitely change the internals over during the extraction.
But, since all of these changes are value-level changes,
it's very likely that we'll break something in the process.
That's a bigger concern because instead of affecting
the handful of Engineers working at NRI,
we would be affecting the millions of people using the site.
We shouldn't fear making those kinds of changes.
However, we should make them when we can give them the appropriate
attention they deserve.
Not when one person is trying to move as fast as possible to avoid
race conditions of moving modules between repos.
2018-03-29 03:34:56 +03:00
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2018-06-22 20:39:00 +03:00
|
|
|
viewIconSection :
|
|
|
|
|
String
|
|
|
|
|
-> List { alt : String, background : Background, icon : Assets -> Icon.IconType }
|
|
|
|
|
-> Html msg
|
|
|
|
|
viewIconSection headerText icons =
|
|
|
|
|
Html.section []
|
2019-07-23 17:53:43 +03:00
|
|
|
[ Heading.h2 [] [ Html.text headerText ]
|
2018-06-22 20:39:00 +03:00
|
|
|
, Html.div [ css [ Css.displayFlex, Css.flexWrap Css.wrap ] ]
|
|
|
|
|
(List.map viewIcon icons)
|
Extract `Nri.Icon` from the monolith
The recommendation is to break the styles API rather than the view API
when moving something out of the monolith into this repo.
`Nri.Icon` is not really setup for that sort of breakage.
If we would prefer to have the styles break rather than the view,
that will take more work.
Work that can be done independent of the extraction.
The transition in the monolith ought to look something like:
```elm
module Nri.Icon exposing (..)
import Html exposing (Html)
import Nri.SvgSprite
import Nri.Ui.Icon.V1 exposing (Assets, IconType)
icon : { alt : String, icon : IconType } -> Html msg
icon config =
Nri.Ui.Icon.V1.icon assets
assets : Assets {}
assets =
{ activity = Nri.SvgSprite.activity
, arrowDown = Nri.SvgSprite.arrowDown
, attention_svg = Nri.Assets.attention_svg
...
}
```
So hopefully, the change is still very small on the monolith side.
There's maybe a bigger concern than which API breaks.
`Nri.Icon` has some behavior for a11y.
We could definitely change the internals over during the extraction.
But, since all of these changes are value-level changes,
it's very likely that we'll break something in the process.
That's a bigger concern because instead of affecting
the handful of Engineers working at NRI,
we would be affecting the millions of people using the site.
We shouldn't fear making those kinds of changes.
However, we should make them when we can give them the appropriate
attention they deserve.
Not when one person is trying to move as fast as possible to avoid
race conditions of moving modules between repos.
2018-03-29 03:34:56 +03:00
|
|
|
]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
type Background
|
|
|
|
|
= Light
|
|
|
|
|
| Dark
|
|
|
|
|
|
|
|
|
|
|
2018-06-22 20:39:00 +03:00
|
|
|
toColor : Background -> Css.Color
|
|
|
|
|
toColor background =
|
|
|
|
|
case background of
|
|
|
|
|
Dark ->
|
|
|
|
|
blue
|
|
|
|
|
|
|
|
|
|
Light ->
|
|
|
|
|
frost
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
viewIcon : { alt : String, background : Background, icon : Assets -> Icon.IconType } -> Html msg
|
2018-03-29 13:58:41 +03:00
|
|
|
viewIcon { alt, background, icon } =
|
2018-06-22 20:39:00 +03:00
|
|
|
Html.div
|
|
|
|
|
[ css
|
|
|
|
|
[ Css.margin (Css.px 10)
|
|
|
|
|
, Css.width (Css.px 160)
|
|
|
|
|
, Css.boxShadow4 (Css.px 10) (Css.px 5) (Css.px 5) navy
|
|
|
|
|
, Css.displayFlex
|
|
|
|
|
, Css.flexDirection Css.column
|
|
|
|
|
, Css.alignItems Css.center
|
|
|
|
|
, Css.justifyContent Css.flexStart
|
|
|
|
|
]
|
|
|
|
|
]
|
|
|
|
|
[ Html.div
|
|
|
|
|
[ css
|
|
|
|
|
[ Css.displayFlex
|
|
|
|
|
, Css.alignItems Css.center
|
|
|
|
|
, Css.justifyContent Css.center
|
|
|
|
|
, Css.backgroundColor (toColor background)
|
|
|
|
|
, Css.height (Css.px 80)
|
|
|
|
|
, Css.width (Css.px 80)
|
|
|
|
|
, Css.margin (Css.px 10)
|
2019-04-06 02:30:26 +03:00
|
|
|
, Css.color green
|
2018-11-13 02:38:19 +03:00
|
|
|
, Css.Global.descendants
|
|
|
|
|
[ Css.Global.img
|
2018-06-22 20:39:00 +03:00
|
|
|
[ Css.maxWidth (Css.pct 100)
|
|
|
|
|
, Css.maxHeight (Css.pct 100)
|
|
|
|
|
]
|
|
|
|
|
]
|
|
|
|
|
]
|
|
|
|
|
, title alt
|
|
|
|
|
]
|
|
|
|
|
[ Icon.icon { alt = alt, icon = icon assets }
|
Extract `Nri.Icon` from the monolith
The recommendation is to break the styles API rather than the view API
when moving something out of the monolith into this repo.
`Nri.Icon` is not really setup for that sort of breakage.
If we would prefer to have the styles break rather than the view,
that will take more work.
Work that can be done independent of the extraction.
The transition in the monolith ought to look something like:
```elm
module Nri.Icon exposing (..)
import Html exposing (Html)
import Nri.SvgSprite
import Nri.Ui.Icon.V1 exposing (Assets, IconType)
icon : { alt : String, icon : IconType } -> Html msg
icon config =
Nri.Ui.Icon.V1.icon assets
assets : Assets {}
assets =
{ activity = Nri.SvgSprite.activity
, arrowDown = Nri.SvgSprite.arrowDown
, attention_svg = Nri.Assets.attention_svg
...
}
```
So hopefully, the change is still very small on the monolith side.
There's maybe a bigger concern than which API breaks.
`Nri.Icon` has some behavior for a11y.
We could definitely change the internals over during the extraction.
But, since all of these changes are value-level changes,
it's very likely that we'll break something in the process.
That's a bigger concern because instead of affecting
the handful of Engineers working at NRI,
we would be affecting the millions of people using the site.
We shouldn't fear making those kinds of changes.
However, we should make them when we can give them the appropriate
attention they deserve.
Not when one person is trying to move as fast as possible to avoid
race conditions of moving modules between repos.
2018-03-29 03:34:56 +03:00
|
|
|
]
|
2018-06-22 20:41:31 +03:00
|
|
|
, Text.mediumBody [ Html.text alt ]
|
Extract `Nri.Icon` from the monolith
The recommendation is to break the styles API rather than the view API
when moving something out of the monolith into this repo.
`Nri.Icon` is not really setup for that sort of breakage.
If we would prefer to have the styles break rather than the view,
that will take more work.
Work that can be done independent of the extraction.
The transition in the monolith ought to look something like:
```elm
module Nri.Icon exposing (..)
import Html exposing (Html)
import Nri.SvgSprite
import Nri.Ui.Icon.V1 exposing (Assets, IconType)
icon : { alt : String, icon : IconType } -> Html msg
icon config =
Nri.Ui.Icon.V1.icon assets
assets : Assets {}
assets =
{ activity = Nri.SvgSprite.activity
, arrowDown = Nri.SvgSprite.arrowDown
, attention_svg = Nri.Assets.attention_svg
...
}
```
So hopefully, the change is still very small on the monolith side.
There's maybe a bigger concern than which API breaks.
`Nri.Icon` has some behavior for a11y.
We could definitely change the internals over during the extraction.
But, since all of these changes are value-level changes,
it's very likely that we'll break something in the process.
That's a bigger concern because instead of affecting
the handful of Engineers working at NRI,
we would be affecting the millions of people using the site.
We shouldn't fear making those kinds of changes.
However, we should make them when we can give them the appropriate
attention they deserve.
Not when one person is trying to move as fast as possible to avoid
race conditions of moving modules between repos.
2018-03-29 03:34:56 +03:00
|
|
|
]
|
2019-10-01 02:07:13 +03:00
|
|
|
|
|
|
|
|
|
2019-10-01 02:18:37 +03:00
|
|
|
viewAssignmentIconSection : String -> List ( String, Html msg ) -> Html msg
|
2019-10-01 02:07:13 +03:00
|
|
|
viewAssignmentIconSection headerText icons =
|
|
|
|
|
Html.section []
|
|
|
|
|
[ Heading.h2 [] [ Html.text headerText ]
|
|
|
|
|
, Html.div [ css [ Css.displayFlex, Css.flexWrap Css.wrap ] ]
|
|
|
|
|
(List.map viewAssignmentIcon icons)
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
|
2019-10-01 02:18:37 +03:00
|
|
|
viewAssignmentIcon : ( String, Html msg ) -> Html msg
|
|
|
|
|
viewAssignmentIcon ( name, assignmentIcon ) =
|
2019-10-01 02:07:13 +03:00
|
|
|
Html.div
|
|
|
|
|
[ css
|
|
|
|
|
[ Css.margin (Css.px 10)
|
|
|
|
|
, Css.width (Css.px 160)
|
|
|
|
|
, Css.boxShadow4 (Css.px 10) (Css.px 5) (Css.px 5) navy
|
|
|
|
|
, Css.displayFlex
|
|
|
|
|
, Css.flexDirection Css.column
|
|
|
|
|
, Css.alignItems Css.center
|
|
|
|
|
, Css.justifyContent Css.flexStart
|
|
|
|
|
]
|
|
|
|
|
]
|
|
|
|
|
[ Html.div
|
|
|
|
|
[ css
|
2019-10-01 02:18:37 +03:00
|
|
|
[ Css.height (Css.px 80)
|
2019-10-01 02:07:13 +03:00
|
|
|
, Css.width (Css.px 80)
|
|
|
|
|
, Css.margin (Css.px 10)
|
|
|
|
|
, Css.color green
|
|
|
|
|
]
|
|
|
|
|
]
|
|
|
|
|
[ assignmentIcon
|
|
|
|
|
]
|
2019-10-01 02:18:37 +03:00
|
|
|
, Text.mediumBody [ Html.text name ]
|
2019-10-01 02:07:13 +03:00
|
|
|
]
|
