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
|
|
|
module Examples.Icon exposing (example, styles)
|
|
|
|
|
|
|
|
|
|
{-|
|
|
|
|
|
|
|
|
|
|
@docs example, styles
|
|
|
|
|
|
|
|
|
|
-}
|
|
|
|
|
|
2018-03-29 13:58:41 +03:00
|
|
|
import Assets exposing (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
|
|
|
|
|
import Css.Foreign exposing (Snippet, adjacentSiblings, children, class, descendants, each, everything, media, selector, withClass)
|
2018-06-22 12:41:38 +03:00
|
|
|
import Headings
|
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 Html exposing (Html)
|
|
|
|
|
import Html.Attributes exposing (style, title)
|
|
|
|
|
import ModuleExample exposing (Category(..), ModuleExample)
|
|
|
|
|
import Nri.Ui.Colors.V1 exposing (..)
|
2018-03-29 13:58:41 +03:00
|
|
|
import Nri.Ui.Icon.V2 as Icon
|
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.Styles.V1
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{-| -}
|
2018-03-29 13:58:41 +03:00
|
|
|
example : ModuleExample msg
|
|
|
|
|
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
|
|
|
{ filename = "Nri/Ui/Icon/V1.elm"
|
|
|
|
|
, category = Icons
|
|
|
|
|
, content =
|
2018-06-22 12:41:38 +03:00
|
|
|
[ Headings.h3 [ Html.text "Icon" ]
|
|
|
|
|
, Headings.h4 [ Html.text "Images" ]
|
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
|
|
|
, Html.div [ styles.class [ Container ] ]
|
2018-03-29 13:58:41 +03:00
|
|
|
(List.map viewIcon imageIcons)
|
2018-06-22 12:41:38 +03:00
|
|
|
, Headings.h4 [ Html.text "Scalable Vector Graphics (SVGs)" ]
|
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
|
|
|
, Html.div [ styles.class [ Container ] ]
|
2018-03-29 13:58:41 +03:00
|
|
|
(List.map viewIcon svgIcons)
|
2018-06-22 12:41:38 +03:00
|
|
|
, Headings.h5 [ Html.text "Assignment Types" ]
|
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
|
|
|
, Html.div [ styles.class [ Container ] ]
|
2018-03-29 13:58:41 +03:00
|
|
|
(List.map viewIcon assignmentTypeSvgIcons)
|
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
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{-| -}
|
|
|
|
|
styles : Nri.Ui.Styles.V1.Styles id class msg
|
|
|
|
|
styles =
|
|
|
|
|
Nri.Ui.Styles.V1.styles "Examples-Icon-"
|
|
|
|
|
[ Css.Foreign.class Container
|
|
|
|
|
[ Css.displayFlex
|
|
|
|
|
, Css.flexWrap Css.wrap
|
|
|
|
|
]
|
|
|
|
|
, Css.Foreign.class (Cell Dark)
|
|
|
|
|
(cellStyles blue)
|
|
|
|
|
, Css.Foreign.class (Cell Light)
|
|
|
|
|
(cellStyles frost)
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
-- INTERNAL
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
type CssClasses
|
|
|
|
|
= Container
|
|
|
|
|
| Cell Background
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
type Background
|
|
|
|
|
= Light
|
|
|
|
|
| Dark
|
|
|
|
|
|
|
|
|
|
|
2018-03-29 13:58:41 +03:00
|
|
|
viewIcon : { alt : String, background : Background, icon : Icon.IconType } -> Html msg
|
|
|
|
|
viewIcon { alt, background, icon } =
|
|
|
|
|
Html.div [ styles.class [ Cell background ], title alt ] [ Icon.icon { alt = alt, icon = icon } ]
|
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
|
|
|
|
|
|
|
|
|
|
|
|
|
imageIcons : List { alt : String, background : Background, icon : Icon.IconType }
|
|
|
|
|
imageIcons =
|
2018-03-29 13:58:41 +03:00
|
|
|
[ { icon = Icon.add assets, background = Light, alt = "Add" }
|
|
|
|
|
, { icon = Icon.arrowLeft assets, background = Light, alt = "ArrowLeft" }
|
|
|
|
|
, { icon = Icon.arrowRight assets, background = Light, alt = "ArrowRight" }
|
|
|
|
|
, { icon = Icon.attention assets, background = Dark, alt = "Attention" }
|
|
|
|
|
, { icon = Icon.bang assets, background = Dark, alt = "Bang" }
|
|
|
|
|
, { icon = Icon.caret assets, background = Light, alt = "Caret" }
|
|
|
|
|
, { icon = Icon.checkMark assets, background = Dark, alt = "CheckMark" }
|
|
|
|
|
, { icon = Icon.checkMarkSquiggily assets, background = Dark, alt = "CheckMarkSquiggily" }
|
|
|
|
|
, { icon = Icon.close assets, background = Light, alt = "Close" }
|
|
|
|
|
, { icon = Icon.copy assets, background = Dark, alt = "Copy" }
|
|
|
|
|
, { icon = Icon.darkBlueCheckMark assets, background = Light, alt = "DarkBlueCheckMark" }
|
|
|
|
|
, { icon = Icon.equalitySign assets, background = Light, alt = "EqualitySign" }
|
|
|
|
|
, { icon = Icon.facebook assets, background = Light, alt = "Facebook" }
|
|
|
|
|
, { icon = Icon.flag assets, background = Light, alt = "Flag" }
|
|
|
|
|
, { icon = Icon.gardening assets, background = Dark, alt = "Gardening" }
|
|
|
|
|
, { icon = Icon.greenCheckMark assets, background = Light, alt = "GreenCheckMark" }
|
|
|
|
|
, { icon = Icon.help assets, background = Light, alt = "Help" }
|
|
|
|
|
, { icon = Icon.highFive assets, background = Dark, alt = "HighFive" }
|
|
|
|
|
, { icon = Icon.late assets, background = Light, alt = "Late" }
|
|
|
|
|
, { icon = Icon.lightBulb assets, background = Light, alt = "LightBulb" }
|
|
|
|
|
, { icon = Icon.lockDeprecated assets, background = Light, alt = "LockDeprecated" }
|
|
|
|
|
, { icon = Icon.logo assets, background = Light, alt = "Logo" }
|
|
|
|
|
, { icon = Icon.notStarred assets, background = Light, alt = "NotStarred" }
|
|
|
|
|
, { icon = Icon.okay assets, background = Dark, alt = "Okay" }
|
|
|
|
|
, { icon = Icon.personBlue assets, background = Light, alt = "PersonBlue" }
|
|
|
|
|
, { icon = Icon.starred assets, background = Light, alt = "Starred" }
|
|
|
|
|
, { icon = Icon.thumbsUp assets, background = Dark, alt = "ThumbsUp" }
|
|
|
|
|
, { icon = Icon.twitter assets, background = Light, alt = "Twitter" }
|
|
|
|
|
, { icon = Icon.unarchive assets, background = Light, alt = "Unarchive" }
|
|
|
|
|
, { icon = Icon.x assets, background = Dark, alt = "X" }
|
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
|
|
|
]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
svgIcons : List { alt : String, background : Background, icon : Icon.IconType }
|
|
|
|
|
svgIcons =
|
2018-03-29 13:58:41 +03:00
|
|
|
[ { icon = Icon.activity assets, background = Light, alt = "Activity" }
|
|
|
|
|
, { icon = Icon.arrowDown assets, background = Light, alt = "ArrowDown" }
|
|
|
|
|
, { icon = Icon.bulb assets, background = Light, alt = "Bulb" }
|
|
|
|
|
, { icon = Icon.calendar assets, background = Light, alt = "Calendar" }
|
|
|
|
|
, { icon = Icon.checkMarkSvg assets, background = Light, alt = "CheckMarkSvg" }
|
|
|
|
|
, { icon = Icon.class assets, background = Light, alt = "Class" }
|
|
|
|
|
, { icon = Icon.clever assets, background = Light, alt = "Clever" }
|
|
|
|
|
, { icon = Icon.clock assets, background = Light, alt = "Clock" }
|
|
|
|
|
, { icon = Icon.compassSvg assets, background = Light, alt = "CompassSvg" }
|
|
|
|
|
, { icon = Icon.document assets, background = Light, alt = "Document" }
|
|
|
|
|
, { icon = Icon.download assets, background = Light, alt = "Download" }
|
|
|
|
|
, { icon = Icon.edit assets, background = Light, alt = "Edit" }
|
|
|
|
|
, { icon = Icon.editWriting assets, background = Light, alt = "EditWriting" }
|
|
|
|
|
, { icon = Icon.exclamation assets, background = Light, alt = "Exclamation" }
|
|
|
|
|
, { icon = Icon.flipper assets, background = Light, alt = "Flipper" }
|
|
|
|
|
, { icon = Icon.footsteps assets, background = Light, alt = "Footsteps" }
|
|
|
|
|
, { icon = Icon.gear assets, background = Light, alt = "Gear" }
|
|
|
|
|
, { icon = Icon.key assets, background = Light, alt = "Key" }
|
|
|
|
|
, { icon = Icon.leaderboard assets, background = Light, alt = "Leaderboard" }
|
|
|
|
|
, { icon = Icon.lock assets, background = Light, alt = "Lock" }
|
2018-05-11 23:39:15 +03:00
|
|
|
, { icon = Icon.masteryBadge assets, background = Light, alt = "Mastery Badge" }
|
2018-03-29 13:58:41 +03:00
|
|
|
, { icon = Icon.newspaper assets, background = Light, alt = "Newspaper" }
|
|
|
|
|
, { icon = Icon.openClose assets, background = Light, alt = "OpenClose" }
|
|
|
|
|
, { icon = Icon.performance assets, background = Light, alt = "Performance" }
|
|
|
|
|
, { icon = Icon.preview assets, background = Light, alt = "Preview" }
|
|
|
|
|
, { icon = Icon.seeMore assets, background = Light, alt = "See More" }
|
|
|
|
|
, { icon = Icon.share assets, background = Light, alt = "Share" }
|
2018-04-04 19:34:42 +03:00
|
|
|
, { icon = Icon.skip assets, background = Light, alt = "Skip" }
|
2018-03-29 13:58:41 +03:00
|
|
|
, { icon = Icon.sort assets, background = Light, alt = "Sort" }
|
|
|
|
|
, { icon = Icon.sortArrow assets, background = Light, alt = "SortArrow" }
|
|
|
|
|
, { icon = Icon.speedometer assets, background = Light, alt = "Speedometer" }
|
|
|
|
|
, { icon = Icon.writingAssignment assets, background = Light, alt = "WritingAssignment" }
|
|
|
|
|
, { icon = Icon.xSvg assets, background = Light, alt = "XSvg" }
|
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
|
|
|
]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
assignmentTypeSvgIcons : List { alt : String, background : Background, icon : Icon.IconType }
|
|
|
|
|
assignmentTypeSvgIcons =
|
2018-03-29 13:58:41 +03:00
|
|
|
[ { alt = "Diagnostic", background = Light, icon = Icon.assignmentTypeDiagnostic assets }
|
|
|
|
|
, { alt = "Practice", background = Light, icon = Icon.assignmentTypePractice assets }
|
|
|
|
|
, { alt = "Quiz", background = Light, icon = Icon.assignmentTypeQuiz assets }
|
|
|
|
|
, { alt = "WritingCycle", background = Light, icon = Icon.assignmentTypeWritingCycle assets }
|
2018-04-03 03:10:32 +03:00
|
|
|
, { alt = "PeerReview", background = Light, icon = Icon.peerReview assets }
|
|
|
|
|
, { alt = "QuickWrite", background = Light, icon = Icon.quickWrite assets }
|
2018-04-03 03:17:42 +03:00
|
|
|
, { alt = "submitting", background = Light, icon = Icon.submitting assets }
|
|
|
|
|
, { alt = "rating", background = Light, icon = Icon.rating assets }
|
|
|
|
|
, { alt = "revising", background = Light, icon = Icon.revising 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
|
|
|
]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
cellStyles : Css.Color -> List Css.Style
|
|
|
|
|
cellStyles backgroundColor =
|
|
|
|
|
[ Css.width (Css.px 80)
|
|
|
|
|
, Css.height (Css.px 80)
|
|
|
|
|
, Css.margin (Css.px 10)
|
|
|
|
|
, Css.displayFlex
|
|
|
|
|
, Css.boxShadow4 (Css.px 10) (Css.px 5) (Css.px 5) navy
|
|
|
|
|
, Css.color azure
|
|
|
|
|
, Css.alignItems Css.center
|
|
|
|
|
, Css.justifyContent Css.center
|
|
|
|
|
, Css.backgroundColor backgroundColor
|
|
|
|
|
, Css.Foreign.descendants
|
|
|
|
|
[ Css.Foreign.img
|
|
|
|
|
[ Css.maxWidth (Css.pct 100)
|
|
|
|
|
, Css.maxHeight (Css.pct 100)
|
|
|
|
|
]
|
|
|
|
|
]
|
|
|
|
|
]
|
