From fa86210e071d5a16ecf464ea918e9ca688fce482 Mon Sep 17 00:00:00 2001 From: Arthur Xavier Date: Fri, 6 Dec 2019 16:55:37 -0300 Subject: [PATCH 01/17] Add Banner component --- docs/App.jsx | 2 +- docs/Examples2/Banner.example.purs | 102 +++++++++++++++++++ docs/index.html | 1 + src/Lumi/Components2/Banner.purs | 155 +++++++++++++++++++++++++++++ src/Lumi/Components2/Box.purs | 15 ++- src/Lumi/Styles.purs | 1 + src/Lumi/Styles/Banner.purs | 29 ++++++ src/Lumi/Styles/Box.purs | 8 ++ src/Lumi/Styles/Responsive.purs | 19 ++++ 9 files changed, 329 insertions(+), 3 deletions(-) create mode 100644 docs/Examples2/Banner.example.purs create mode 100644 src/Lumi/Components2/Banner.purs create mode 100644 src/Lumi/Styles/Banner.purs create mode 100644 src/Lumi/Styles/Responsive.purs diff --git a/docs/App.jsx b/docs/App.jsx index 7da53525..75a2c155 100644 --- a/docs/App.jsx +++ b/docs/App.jsx @@ -116,7 +116,7 @@ const componentLoaders = [ "Wizard" ].map(fromComponentPath); -const componentv2Loaders = ["Box", "Button", "ButtonGroup", "Link", "Slat"].map( +const componentv2Loaders = ["Banner", "Box", "Button", "ButtonGroup", "Link", "Slat"].map( fromComponentPathv2 ); diff --git a/docs/Examples2/Banner.example.purs b/docs/Examples2/Banner.example.purs new file mode 100644 index 00000000..87015114 --- /dev/null +++ b/docs/Examples2/Banner.example.purs @@ -0,0 +1,102 @@ +module Lumi.Components2.Examples.Banner where + +import Prelude + +import Data.Array (intercalate) +import Lumi.Components (LumiProps, lumiElement) +import Lumi.Components.Button as Button +import Lumi.Components.Example (example) +import Lumi.Components.Spacing (Space(..), vspace) +import Lumi.Components.Text (h2_, p_, subsectionHeader_) +import Lumi.Components2.Box (box) +import Lumi.Components2.Banner as Banner +import Lumi.Styles.Box (FlexAlign(..), _alignSelf) +import React.Basic (JSX, fragment) +import React.Basic.DOM as R + +docs :: JSX +docs = + intercalate (vspace S8) + [ p_ "TODO" + + , h2_ "TODO" + , example + $ fragment + $ allColors + $ _alignSelf Stretch + $ _ { content = loremIpsum } + + , h2_ "TODO" + , example + $ fragment + $ allColors + $ _alignSelf Stretch + $ _ { dismissable = true + , content = importantMessage + } + + , h2_ "TODO" + , example + $ fragment + $ allColors + $ _alignSelf Stretch + $ Banner.actionBanner actions + $ _ { content = loremIpsum } + + , h2_ "TODO" + , example + $ fragment + $ allColors + $ _alignSelf Stretch + $ Banner.actionBanner actions + $ _ { dismissable = true + , content = importantMessage + } + + ] + where + allColors :: (LumiProps Banner.BannerProps -> LumiProps Banner.BannerProps) -> Array JSX + allColors props = + [ lumiElement Banner.banner + $ Banner._listSpaced + $ props + , lumiElement Banner.banner + $ Banner._listSpaced + $ Banner.primary + $ props + , lumiElement Banner.banner + $ Banner._listSpaced + $ Banner.active + $ props + , lumiElement Banner.banner + $ Banner._listSpaced + $ Banner.warning + $ props + , lumiElement Banner.banner + $ Banner._listSpaced + $ Banner.error + $ props + ] + + loremIpsum :: Array JSX + loremIpsum = [ R.text "Lorem ipsum dolor sit amet, consectetur adipiscing elit." ] + + importantMessage :: Array JSX + importantMessage = + [ lumiElement box + $ _ { content = + [ subsectionHeader_ "An important title" + , R.text "Here's some important message about your account." + ] + } + ] + + actions :: Array JSX + actions = + [ Button.button Button.primary + { title = "Try again" + } + , Button.button Button.linkStyle + { title = "View error" + } + ] diff --git a/docs/index.html b/docs/index.html index 4bfe7087..bf39f8a3 100644 --- a/docs/index.html +++ b/docs/index.html @@ -18,6 +18,7 @@ "Roboto", "Droid Sans", Ubuntu, "Helvetica Neue", Helvetica, sans-serif; margin: 0; + font-size: 1.4rem; } diff --git a/src/Lumi/Components2/Banner.purs b/src/Lumi/Components2/Banner.purs new file mode 100644 index 00000000..a8776eb6 --- /dev/null +++ b/src/Lumi/Components2/Banner.purs @@ -0,0 +1,155 @@ +module Lumi.Components2.Banner + ( Banner + , BannerProps + , banner + , actionBanner + , primary + , active + , warning + , error + , module Styles.Banner + ) where + +import Prelude + +import Color (lighten) +import Data.Foldable (fold) +import Data.Monoid as Monoid +import Data.Tuple.Nested ((/\)) +import Effect.Unsafe (unsafePerformEffect) +import Lumi.Components (LumiComponent, PropsModifier, lumiComponent, lumiElement) +import Lumi.Components.Icon as Icon +import Lumi.Components.Spacing (Space(..)) +import Lumi.Components2.Box (box) +import Lumi.Styles (color, css, nested, prop, str, styleModifier, styleModifier_) +import Lumi.Styles.Banner (banner) as S +import Lumi.Styles.Border (_listSpaced, _listCompact) as Styles.Banner +import Lumi.Styles.Box (FlexAlign(..), _align, _column, _fill, _interactive, _justify, _row) as S +import Lumi.Styles.Responsive (desktopQuery) +import Lumi.Styles.Responsive (onDesktop) as S +import Lumi.Styles.Theme (LumiTheme(..), useTheme) +import React.Basic (JSX) +import React.Basic.DOM as R +import React.Basic.DOM.Events (capture_) +import React.Basic.Hooks (useState) +import React.Basic.Hooks as React + +data Banner = Banner + +type BannerProps = + ( component :: Banner + , dismissable :: Boolean + , content :: Array JSX + ) + +banner :: LumiComponent BannerProps +banner = + unsafePerformEffect do + lumiComponent "Banner" defaults \props -> React.do + theme <- useTheme + visible /\ setVisible <- useState true + pure + $ Monoid.guard visible + $ lumiElement box + $ styleModifier props.css + $ S.banner + $ _ { className = props.className + , content = + [ lumiElement box + $ S.onDesktop S._row + $ S._align S.Center + $ S._fill + $ _ { content = props.content } + , Monoid.guard props.dismissable + $ lumiElement box + $ dismissButtonStyle + $ _ { content = + [ Icon.icon + { style: R.css { fontSize: "12px" } + , type_: Icon.Remove + } + ] + , onClick = capture_ $ setVisible \_ -> false + } + ] + } + where + defaults :: Record BannerProps + defaults = + { component: Banner + , content: [] + , dismissable: false + } + + dismissButtonStyle :: forall props. PropsModifier props + dismissButtonStyle = + S._interactive + >>> styleModifier \(LumiTheme { colors }) -> + css + { padding: str "8px" + , margin: str "0 -8px 0 8px" + , "&:hover": nested $ css + { color: color colors.black1 + } + } + +actionBanner :: Array JSX -> PropsModifier BannerProps +actionBanner actions f = + f >>> \props -> props + { content = + [ lumiElement box + $ S._column + $ S._fill + $ S.onDesktop (S._row >>> S._align S.Center) + $ _ { content = + [ lumiElement box + $ S._fill + $ _ { content = props.content } + , lumiElement box + $ S._row + $ S._align S.Center + $ S._justify S.End + $ styleModifier_ + ( fold + [ css + { margin: str "8px 0 0" + , "& :not(:first-child)": nested $ css + { marginLeft: prop S8 + } + } + , desktopQuery $ css { margin: str "0 0 0 8px" } + ] + ) + $ _ { content = actions } + ] + } + ] + } + +primary :: forall props. PropsModifier (component :: Banner | props) +primary = + styleModifier \(LumiTheme { colors }) -> + css + { backgroundColor: color colors.primary3 + } + +active :: forall props. PropsModifier (component :: Banner | props) +active = + styleModifier \(LumiTheme { colors }) -> + css + { backgroundColor: color $ lighten 0.4137 $ colors.accent1 + } + +warning :: forall props. PropsModifier (component :: Banner | props) +warning = + styleModifier \(LumiTheme { colors }) -> + css + { backgroundColor: color $ lighten 0.4137 $ colors.accent2 + } + +error :: forall props. PropsModifier (component :: Banner | props) +error = + styleModifier \(LumiTheme { colors }) -> + css + { backgroundColor: color $ lighten 0.4137 $ colors.accent3 + } diff --git a/src/Lumi/Components2/Box.purs b/src/Lumi/Components2/Box.purs index ba1f37dc..138f173b 100644 --- a/src/Lumi/Components2/Box.purs +++ b/src/Lumi/Components2/Box.purs @@ -1,6 +1,7 @@ module Lumi.Components2.Box where import Prelude + import Effect.Unsafe (unsafePerformEffect) import Lumi.Components (LumiComponent, lumiComponent) import Lumi.Styles (toCSS) @@ -9,19 +10,29 @@ import Lumi.Styles.Theme (useTheme) import React.Basic (JSX) import React.Basic.DOM as R import React.Basic.Emotion as E +import React.Basic.Events (EventHandler, handler_) import React.Basic.Hooks as React type BoxProps - = ( content :: Array JSX ) + = ( content :: Array JSX + , onClick :: EventHandler + ) box :: LumiComponent BoxProps box = unsafePerformEffect do - lumiComponent "Box" { content: [] } \props -> React.do + lumiComponent "Box" defaults \props -> React.do theme <- useTheme pure $ E.element R.div' { children: props.content , className: props.className , css: toCSS theme props Styles.Box.box + , onClick: props.onClick } + where + defaults :: Record BoxProps + defaults = + { content: [] + , onClick: handler_ mempty + } diff --git a/src/Lumi/Styles.purs b/src/Lumi/Styles.purs index de20f602..ac9d9b00 100644 --- a/src/Lumi/Styles.purs +++ b/src/Lumi/Styles.purs @@ -6,6 +6,7 @@ module Lumi.Styles ) where import Prelude + import Lumi.Components (PropsModifier, LumiProps, propsModifier) import Lumi.Styles.Theme (LumiTheme) import React.Basic.Emotion hiding (element) as Emotion diff --git a/src/Lumi/Styles/Banner.purs b/src/Lumi/Styles/Banner.purs new file mode 100644 index 00000000..831a15b6 --- /dev/null +++ b/src/Lumi/Styles/Banner.purs @@ -0,0 +1,29 @@ +module Lumi.Styles.Banner where + +import Prelude + +import Data.Foldable (fold) +import Lumi.Components (PropsModifier) +import Lumi.Styles (color, css, str, styleModifier) +import Lumi.Styles.Border (_round) as S +import Lumi.Styles.Box (FlexAlign(..), _align, _row, box) as S +import Lumi.Styles.Responsive (desktopQuery) +import Lumi.Styles.Theme (LumiTheme(..)) + +banner :: forall props. PropsModifier props +banner = + S.box + >>> S._row + >>> S._align S.Center + >>> S._round + >>> styleModifier \(LumiTheme { colors }) -> + fold + [ css + { backgroundColor: color colors.black4 + , color: color colors.black + , padding: str "12px 16px" + } + , desktopQuery $ css + { padding: str "12px 24px" + } + ] diff --git a/src/Lumi/Styles/Box.purs b/src/Lumi/Styles/Box.purs index 46860df2..6d9ca208 100644 --- a/src/Lumi/Styles/Box.purs +++ b/src/Lumi/Styles/Box.purs @@ -25,6 +25,11 @@ _row = styleModifier_ $ css { flexDirection: str "row" } +_column :: forall props. PropsModifier props +_column = + styleModifier_ + $ css { flexDirection: str "column" } + _wrap :: forall props. PropsModifier props _wrap = styleModifier_ @@ -61,6 +66,9 @@ _align a = styleModifier_ $ css { alignItems: prop a } _alignSelf :: forall props. FlexAlign -> PropsModifier props _alignSelf a = styleModifier_ $ css { alignSelf: prop a } +_fill :: forall props. PropsModifier props +_fill = styleModifier_ $ css { flex: str "1" } + _interactive :: forall props. PropsModifier props _interactive = styleModifier_ diff --git a/src/Lumi/Styles/Responsive.purs b/src/Lumi/Styles/Responsive.purs new file mode 100644 index 00000000..e354d1eb --- /dev/null +++ b/src/Lumi/Styles/Responsive.purs @@ -0,0 +1,19 @@ +module Lumi.Styles.Responsive where + +import Prelude + +import Lumi.Components (PropsModifier) +import Lumi.Styles (Style, css, nested, styleModifier) + +desktopQuery :: Style -> Style +desktopQuery style = + css + { "@media (min-width: 860px)": nested style + } + +onDesktop :: forall props. PropsModifier () -> PropsModifier props +onDesktop m = + styleModifier \theme -> + desktopQuery + $ (m identity mempty).css + $ theme From ba0cda6211b436bd3bc4fc3e881872879a406929 Mon Sep 17 00:00:00 2001 From: Arthur Xavier Date: Fri, 20 Dec 2019 10:52:30 -0300 Subject: [PATCH 02/17] Finish documentation of banner component --- docs/Examples2/Banner.example.purs | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/docs/Examples2/Banner.example.purs b/docs/Examples2/Banner.example.purs index 87015114..5716ec75 100644 --- a/docs/Examples2/Banner.example.purs +++ b/docs/Examples2/Banner.example.purs @@ -17,37 +17,33 @@ import React.Basic.DOM as R docs :: JSX docs = intercalate (vspace S8) - [ p_ "TODO" + [ p_ "Banners are small pieces of informative content that draw the attention of the user through color and that may require user action." - , h2_ "TODO" + , h2_ "round (default), spaced list, non-dismissable" , example $ fragment $ allColors - $ _alignSelf Stretch $ _ { content = loremIpsum } - , h2_ "TODO" + , h2_ "round (default), spaced list, dismissable" , example $ fragment $ allColors - $ _alignSelf Stretch $ _ { dismissable = true , content = importantMessage } - , h2_ "TODO" + , h2_ "action banner, round (default), spaced list, non-dismissable" , example $ fragment $ allColors - $ _alignSelf Stretch $ Banner.actionBanner actions $ _ { content = loremIpsum } - , h2_ "TODO" + , h2_ "action banner, round (default), spaced list, dismissable" , example $ fragment $ allColors - $ _alignSelf Stretch $ Banner.actionBanner actions $ _ { dismissable = true , content = importantMessage @@ -58,21 +54,26 @@ docs = allColors :: (LumiProps Banner.BannerProps -> LumiProps Banner.BannerProps) -> Array JSX allColors props = [ lumiElement Banner.banner + $ _alignSelf Stretch $ Banner._listSpaced $ props , lumiElement Banner.banner + $ _alignSelf Stretch $ Banner._listSpaced $ Banner.primary $ props , lumiElement Banner.banner + $ _alignSelf Stretch $ Banner._listSpaced $ Banner.active $ props , lumiElement Banner.banner + $ _alignSelf Stretch $ Banner._listSpaced $ Banner.warning $ props , lumiElement Banner.banner + $ _alignSelf Stretch $ Banner._listSpaced $ Banner.error $ props From c363f1187c405fe807e21f7ceca1d7c7d2fbc140 Mon Sep 17 00:00:00 2001 From: Arthur Xavier Date: Fri, 20 Dec 2019 10:53:03 -0300 Subject: [PATCH 03/17] Fix styling of dismiss button --- src/Lumi/Components2/Banner.purs | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/Lumi/Components2/Banner.purs b/src/Lumi/Components2/Banner.purs index a8776eb6..56209801 100644 --- a/src/Lumi/Components2/Banner.purs +++ b/src/Lumi/Components2/Banner.purs @@ -24,7 +24,7 @@ import Lumi.Components2.Box (box) import Lumi.Styles (color, css, nested, prop, str, styleModifier, styleModifier_) import Lumi.Styles.Banner (banner) as S import Lumi.Styles.Border (_listSpaced, _listCompact) as Styles.Banner -import Lumi.Styles.Box (FlexAlign(..), _align, _column, _fill, _interactive, _justify, _row) as S +import Lumi.Styles.Box (FlexAlign(..), _align, _alignSelf, _column, _fill, _interactive, _justify, _row) as S import Lumi.Styles.Responsive (desktopQuery) import Lumi.Styles.Responsive (onDesktop) as S import Lumi.Styles.Theme (LumiTheme(..), useTheme) @@ -56,12 +56,14 @@ banner = $ _ { className = props.className , content = [ lumiElement box - $ S.onDesktop S._row - $ S._align S.Center + $ S._align S.Stretch + $ S.onDesktop (S._row >>> S._align S.Center) $ S._fill $ _ { content = props.content } , Monoid.guard props.dismissable $ lumiElement box + $ S._alignSelf S.Start + $ S.onDesktop (S._alignSelf S.Center) $ dismissButtonStyle $ _ { content = [ Icon.icon From 12e0ab05b74d97b4630a3afb68b12a727f98b9ba Mon Sep 17 00:00:00 2001 From: Arthur Xavier Date: Fri, 20 Dec 2019 10:53:36 -0300 Subject: [PATCH 04/17] Code review suggestion --- src/Lumi/Components2/Banner.purs | 8 ++++---- src/Lumi/Styles/Box.purs | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Lumi/Components2/Banner.purs b/src/Lumi/Components2/Banner.purs index 56209801..a5867576 100644 --- a/src/Lumi/Components2/Banner.purs +++ b/src/Lumi/Components2/Banner.purs @@ -24,7 +24,7 @@ import Lumi.Components2.Box (box) import Lumi.Styles (color, css, nested, prop, str, styleModifier, styleModifier_) import Lumi.Styles.Banner (banner) as S import Lumi.Styles.Border (_listSpaced, _listCompact) as Styles.Banner -import Lumi.Styles.Box (FlexAlign(..), _align, _alignSelf, _column, _fill, _interactive, _justify, _row) as S +import Lumi.Styles.Box (FlexAlign(..), _align, _alignSelf, _column, _flex, _interactive, _justify, _row) as S import Lumi.Styles.Responsive (desktopQuery) import Lumi.Styles.Responsive (onDesktop) as S import Lumi.Styles.Theme (LumiTheme(..), useTheme) @@ -58,7 +58,7 @@ banner = [ lumiElement box $ S._align S.Stretch $ S.onDesktop (S._row >>> S._align S.Center) - $ S._fill + $ S._flex $ _ { content = props.content } , Monoid.guard props.dismissable $ lumiElement box @@ -101,11 +101,11 @@ actionBanner actions f = { content = [ lumiElement box $ S._column - $ S._fill + $ S._flex $ S.onDesktop (S._row >>> S._align S.Center) $ _ { content = [ lumiElement box - $ S._fill + $ S._flex $ _ { content = props.content } , lumiElement box $ S._row diff --git a/src/Lumi/Styles/Box.purs b/src/Lumi/Styles/Box.purs index 6d9ca208..b3ea629e 100644 --- a/src/Lumi/Styles/Box.purs +++ b/src/Lumi/Styles/Box.purs @@ -66,8 +66,8 @@ _align a = styleModifier_ $ css { alignItems: prop a } _alignSelf :: forall props. FlexAlign -> PropsModifier props _alignSelf a = styleModifier_ $ css { alignSelf: prop a } -_fill :: forall props. PropsModifier props -_fill = styleModifier_ $ css { flex: str "1" } +_flex :: forall props. PropsModifier props +_flex = styleModifier_ $ css { flex: str "1" } _interactive :: forall props. PropsModifier props _interactive = From c34920e323eab29d4af33021e521550ff56bdb6e Mon Sep 17 00:00:00 2001 From: kimi spencer Date: Tue, 21 Apr 2020 17:41:42 +0300 Subject: [PATCH 05/17] Banner updates --- docs/Examples2/Banner.example.purs | 69 ++++++++++++++++++++++++++++++ src/Lumi/Components2/Banner.purs | 22 ++++++++-- src/Lumi/Styles/Banner.purs | 4 +- 3 files changed, 89 insertions(+), 6 deletions(-) diff --git a/docs/Examples2/Banner.example.purs b/docs/Examples2/Banner.example.purs index 5716ec75..e3b1259a 100644 --- a/docs/Examples2/Banner.example.purs +++ b/docs/Examples2/Banner.example.purs @@ -6,6 +6,8 @@ import Data.Array (intercalate) import Lumi.Components (LumiProps, lumiElement) import Lumi.Components.Button as Button import Lumi.Components.Example (example) +import Lumi.Components.Images (avatar) +import Lumi.Components.Size (large) import Lumi.Components.Spacing (Space(..), vspace) import Lumi.Components.Text (h2_, p_, subsectionHeader_) import Lumi.Components2.Box (box) @@ -25,6 +27,14 @@ docs = $ allColors $ _ { content = loremIpsum } + , h2_ "round (default), spaced list, non-dismissable with icon" + , example + $ fragment + $ allColors + $ _ { content = loremIpsum + , icon = bannerIcon + } + , h2_ "round (default), spaced list, dismissable" , example $ fragment @@ -33,6 +43,38 @@ docs = , content = importantMessage } + , h2_ "action banner, round (default), spaced list, non-dismissable" + , example + $ fragment + $ allColors + $ Banner.actionBanner simpleActions + $ _ { content = loremIpsum } + + , h2_ "action banner, round (default), spaced list, dismissable" + , example + $ fragment + $ allColors + $ Banner.actionBanner simpleActions + $ _ { dismissable = true + , content = importantMessage + } + + , h2_ "action banner, round (default), spaced list, non-dismissable" + , example + $ fragment + $ allColors + $ Banner.actionBanner twoButtonActions + $ _ { content = loremIpsum } + + , h2_ "action banner, round (default), spaced list, dismissable" + , example + $ fragment + $ allColors + $ Banner.actionBanner twoButtonActions + $ _ { dismissable = true + , content = importantMessage + } + , h2_ "action banner, round (default), spaced list, non-dismissable" , example $ fragment @@ -92,6 +134,33 @@ docs = } ] + bannerIcon :: Array JSX + bannerIcon = + [ avatar + { image: R.img { src: "https://s3.amazonaws.com/lumi-blog/avatars/_x600/flexo.jpg" } + , size: large + , style: R.css { height: "40px", width: "40px" } + } + ] + + simpleActions :: Array JSX + simpleActions = + [ Button.button Button.primary + { title = "Submit" + } + ] + + twoButtonActions :: Array JSX + twoButtonActions = + [ Button.button Button.secondary + { title = "Clear" + , style = R.css { backgroundColor: "transparent" } + } + , Button.button Button.primary + { title = "Submit" + } + ] + actions :: Array JSX actions = [ Button.button Button.primary diff --git a/src/Lumi/Components2/Banner.purs b/src/Lumi/Components2/Banner.purs index a5867576..3310883d 100644 --- a/src/Lumi/Components2/Banner.purs +++ b/src/Lumi/Components2/Banner.purs @@ -13,6 +13,7 @@ module Lumi.Components2.Banner import Prelude import Color (lighten) +import Data.Array as Array import Data.Foldable (fold) import Data.Monoid as Monoid import Data.Tuple.Nested ((/\)) @@ -21,7 +22,7 @@ import Lumi.Components (LumiComponent, PropsModifier, lumiComponent, lumiElement import Lumi.Components.Icon as Icon import Lumi.Components.Spacing (Space(..)) import Lumi.Components2.Box (box) -import Lumi.Styles (color, css, nested, prop, str, styleModifier, styleModifier_) +import Lumi.Styles (color, css, int, nested, prop, str, styleModifier, styleModifier_) import Lumi.Styles.Banner (banner) as S import Lumi.Styles.Border (_listSpaced, _listCompact) as Styles.Banner import Lumi.Styles.Box (FlexAlign(..), _align, _alignSelf, _column, _flex, _interactive, _justify, _row) as S @@ -39,6 +40,7 @@ data Banner = Banner type BannerProps = ( component :: Banner , dismissable :: Boolean + , icon :: Array JSX , content :: Array JSX ) @@ -55,7 +57,16 @@ banner = $ S.banner $ _ { className = props.className , content = - [ lumiElement box + [ Monoid.guard (not Array.null props.icon) + $ lumiElement box + $ styleModifier_ + ( css + { marginRight: int 16 + } + ) + $ _ { content = props.icon + } + , lumiElement box $ S._align S.Stretch $ S.onDesktop (S._row >>> S._align S.Center) $ S._flex @@ -81,6 +92,7 @@ banner = { component: Banner , content: [] , dismissable: false + , icon: [] } dismissButtonStyle :: forall props. PropsModifier props @@ -114,12 +126,14 @@ actionBanner actions f = $ styleModifier_ ( fold [ css - { margin: str "8px 0 0" + { margin: str "16px 0 0" , "& :not(:first-child)": nested $ css { marginLeft: prop S8 } } - , desktopQuery $ css { margin: str "0 0 0 8px" } + , desktopQuery $ css + { margin: str "0 0 0 40px" + } ] ) $ _ { content = actions } diff --git a/src/Lumi/Styles/Banner.purs b/src/Lumi/Styles/Banner.purs index 831a15b6..59551ad2 100644 --- a/src/Lumi/Styles/Banner.purs +++ b/src/Lumi/Styles/Banner.purs @@ -21,9 +21,9 @@ banner = [ css { backgroundColor: color colors.black4 , color: color colors.black - , padding: str "12px 16px" + , padding: str "16px" } , desktopQuery $ css - { padding: str "12px 24px" + { padding: str "16px 24px" } ] From b2ea6abc919283d7b957fd5c51c49d19dcf94c2f Mon Sep 17 00:00:00 2001 From: kimi spencer Date: Tue, 21 Apr 2020 18:41:59 +0300 Subject: [PATCH 06/17] action button alignment variations --- docs/Examples2/Banner.example.purs | 43 ++++++++++++++++-------------- src/Lumi/Components2/Banner.purs | 38 +++++++++++++++++++++++--- 2 files changed, 57 insertions(+), 24 deletions(-) diff --git a/docs/Examples2/Banner.example.purs b/docs/Examples2/Banner.example.purs index e3b1259a..f03157cf 100644 --- a/docs/Examples2/Banner.example.purs +++ b/docs/Examples2/Banner.example.purs @@ -10,7 +10,6 @@ import Lumi.Components.Images (avatar) import Lumi.Components.Size (large) import Lumi.Components.Spacing (Space(..), vspace) import Lumi.Components.Text (h2_, p_, subsectionHeader_) -import Lumi.Components2.Box (box) import Lumi.Components2.Banner as Banner import Lumi.Styles.Box (FlexAlign(..), _alignSelf) import React.Basic (JSX, fragment) @@ -25,13 +24,13 @@ docs = , example $ fragment $ allColors - $ _ { content = loremIpsum } + $ _ { content = loremIpsum_ } , h2_ "round (default), spaced list, non-dismissable with icon" , example $ fragment $ allColors - $ _ { content = loremIpsum + $ _ { content = loremIpsum_ , icon = bannerIcon } @@ -40,7 +39,8 @@ docs = $ fragment $ allColors $ _ { dismissable = true - , content = importantMessage + , title = bannerTitle + , content = loremIpsum } , h2_ "action banner, round (default), spaced list, non-dismissable" @@ -48,7 +48,7 @@ docs = $ fragment $ allColors $ Banner.actionBanner simpleActions - $ _ { content = loremIpsum } + $ _ { content = loremIpsum_ } , h2_ "action banner, round (default), spaced list, dismissable" , example @@ -56,7 +56,8 @@ docs = $ allColors $ Banner.actionBanner simpleActions $ _ { dismissable = true - , content = importantMessage + , title = bannerTitle + , content = loremIpsum } , h2_ "action banner, round (default), spaced list, non-dismissable" @@ -64,7 +65,7 @@ docs = $ fragment $ allColors $ Banner.actionBanner twoButtonActions - $ _ { content = loremIpsum } + $ _ { content = loremIpsum_ } , h2_ "action banner, round (default), spaced list, dismissable" , example @@ -72,7 +73,8 @@ docs = $ allColors $ Banner.actionBanner twoButtonActions $ _ { dismissable = true - , content = importantMessage + , title = bannerTitle + , content = loremIpsum } , h2_ "action banner, round (default), spaced list, non-dismissable" @@ -80,7 +82,7 @@ docs = $ fragment $ allColors $ Banner.actionBanner actions - $ _ { content = loremIpsum } + $ _ { content = loremIpsum_ } , h2_ "action banner, round (default), spaced list, dismissable" , example @@ -88,7 +90,8 @@ docs = $ allColors $ Banner.actionBanner actions $ _ { dismissable = true - , content = importantMessage + , title = bannerTitle + , content = loremIpsum } ] @@ -121,17 +124,17 @@ docs = $ props ] + loremIpsum_ :: Array JSX + loremIpsum_ = [ R.text "Lorem ipsum dolor sit amet, consectetur adipiscing elit." ] + loremIpsum :: Array JSX - loremIpsum = [ R.text "Lorem ipsum dolor sit amet, consectetur adipiscing elit." ] - - importantMessage :: Array JSX - importantMessage = - [ lumiElement box - $ _ { content = - [ subsectionHeader_ "An important title" - , R.text "Here's some important message about your account." - ] - } + loremIpsum = + [ R.text "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius erat a purus fermentum luctus. Sed porta nisi eget mauris facilisis, a accumsan erat feugiat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque maximus mauris nulla." + ] + + bannerTitle :: Array JSX + bannerTitle = + [ subsectionHeader_ "Lorem ipsum dolor sit amet" ] bannerIcon :: Array JSX diff --git a/src/Lumi/Components2/Banner.purs b/src/Lumi/Components2/Banner.purs index 3310883d..6c3b6b33 100644 --- a/src/Lumi/Components2/Banner.purs +++ b/src/Lumi/Components2/Banner.purs @@ -41,6 +41,7 @@ type BannerProps = ( component :: Banner , dismissable :: Boolean , icon :: Array JSX + , title :: Array JSX , content :: Array JSX ) @@ -67,10 +68,26 @@ banner = $ _ { content = props.icon } , lumiElement box - $ S._align S.Stretch - $ S.onDesktop (S._row >>> S._align S.Center) + $ S._column $ S._flex - $ _ { content = props.content } + $ _ { content = + [ Monoid.guard (not Array.null props.title) + $ lumiElement box + $ S._alignSelf S.Start + $ styleModifier_ + ( css + { marginBottom: int 8 + } + ) + $ _ { content = props.title + } + , lumiElement box + $ S._align S.Stretch + $ S.onDesktop (S._row >>> S._align S.Center) + $ S._flex + $ _ { content = props.content } + ] + } , Monoid.guard props.dismissable $ lumiElement box $ S._alignSelf S.Start @@ -90,6 +107,7 @@ banner = defaults :: Record BannerProps defaults = { component: Banner + , title: [] , content: [] , dismissable: false , icon: [] @@ -114,7 +132,19 @@ actionBanner actions f = [ lumiElement box $ S._column $ S._flex - $ S.onDesktop (S._row >>> S._align S.Center) + $ S.onDesktop (S._row) + $ styleModifier_ + ( fold + [ css + { alignItems: str "flex-end" + } + , desktopQuery $ css + { alignItems: if (not Array.null props.title) + then str "flex-end" + else str "center" + } + ] + ) $ _ { content = [ lumiElement box $ S._flex From cba6358cf55d107ac9c09297e5498776a05136d7 Mon Sep 17 00:00:00 2001 From: kimi spencer Date: Sat, 2 May 2020 14:07:17 +0300 Subject: [PATCH 07/17] cleanup --- src/Lumi/Components2/Box.purs | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Lumi/Components2/Box.purs b/src/Lumi/Components2/Box.purs index ea676330..f61b064b 100644 --- a/src/Lumi/Components2/Box.purs +++ b/src/Lumi/Components2/Box.purs @@ -10,7 +10,6 @@ import Lumi.Styles.Theme (useTheme) import React.Basic (JSX) import React.Basic.DOM as R import React.Basic.Emotion as E -import React.Basic.Events (EventHandler, handler_) import React.Basic.Hooks as React type BoxProps From c40f66c2a446698049c547a1c7395156659ac9c8 Mon Sep 17 00:00:00 2001 From: kimi spencer Date: Mon, 4 May 2020 14:37:03 +0300 Subject: [PATCH 08/17] style fixes --- docs/Examples2/Banner.example.purs | 37 +++++++++++++++++++++++++ src/Lumi/Components2/Banner.purs | 43 +++++++++++++++++++----------- src/Lumi/Styles/Banner.purs | 2 +- 3 files changed, 65 insertions(+), 17 deletions(-) diff --git a/docs/Examples2/Banner.example.purs b/docs/Examples2/Banner.example.purs index 7fb6f410..74e7ea03 100644 --- a/docs/Examples2/Banner.example.purs +++ b/docs/Examples2/Banner.example.purs @@ -26,6 +26,14 @@ docs = $ allColors $ _ { content = loremIpsum_ } + , h2_ "round (default), spaced list, dismissable" + , example + $ fragment + $ allColors + $ _ { content = loremIpsum_ + , dismissable = true + } + , h2_ "round (default), spaced list, non-dismissable with icon" , example $ fragment @@ -34,6 +42,15 @@ docs = , icon = bannerIcon } + , h2_ "round (default), spaced list, dismissable with icon" + , example + $ fragment + $ allColors + $ _ { dismissable = true + , content = loremIpsum_ + , icon = bannerIcon + } + , h2_ "round (default), spaced list, dismissable" , example $ fragment @@ -43,6 +60,15 @@ docs = , content = loremIpsum } + , h2_ "action banner, round (default), spaced list, non-dismissable with icon" + , example + $ fragment + $ allColors + $ Banner.actionBanner simpleActions + $ _ { content = loremIpsum_ + , icon = bannerIcon + } + , h2_ "action banner, round (default), spaced list, non-dismissable" , example $ fragment @@ -60,6 +86,17 @@ docs = , content = loremIpsum } + , h2_ "action banner, round (default), spaced list, dismissable with icon" + , example + $ fragment + $ allColors + $ Banner.actionBanner simpleActions + $ _ { dismissable = true + , title = bannerTitle + , content = loremIpsum + , icon = bannerIcon + } + , h2_ "action banner, round (default), spaced list, non-dismissable" , example $ fragment diff --git a/src/Lumi/Components2/Banner.purs b/src/Lumi/Components2/Banner.purs index 60785997..67ccbd93 100644 --- a/src/Lumi/Components2/Banner.purs +++ b/src/Lumi/Components2/Banner.purs @@ -58,20 +58,12 @@ banner = $ S.banner $ _ { className = props.className , content = - [ Monoid.guard (not Array.null props.icon) - $ box - $ style_ - ( css - { marginRight: int 16 - } - ) - $ _ { content = props.icon - } - , box + [ box $ S._column + $ S._alignSelf S.Center $ style_ ( css - { flex: str "1" } + { flex: str "1", width: str "100%" } ) $ _ { content = [ Monoid.guard (not Array.null props.title) @@ -85,19 +77,37 @@ banner = $ _ { content = props.title } , box - $ S._align S.Stretch - $ S.onDesktop (S._row >>> S._align S.Center) + $ S._align S.Center + $ S._row $ style_ ( css { flex: str "1" } ) - $ _ { content = props.content } + $ _ { content = + [ Monoid.guard (not Array.null props.icon) + $ box + $ S._alignSelf S.Start + $ S.onDesktop (S._alignSelf S.Center) + $ style_ + ( fold + [ css + { marginRight: int 16 + } + , desktopQuery $ css + { alignSelf: str "center" + } + ] + ) + $ _ { content = props.icon + } + ] + <> props.content + } ] } , Monoid.guard props.dismissable $ box $ S._alignSelf S.Start - -- $ S.onDesktop (S._alignSelf S.Center) $ dismissButtonStyle $ _ { content = [ Icon.icon @@ -105,7 +115,7 @@ banner = , type_: Icon.Remove } ] - -- , onClick = capture_ $ setVisible \_ -> false + , onClick = capture_ $ setVisible \_ -> false } ] } @@ -148,6 +158,7 @@ actionBanner actions f = { alignItems: str "flex-end" } , desktopQuery $ css + -- @NOTE positioning of the action button changes dependent on if there is a banner title or not { alignItems: if (not Array.null props.title) then str "flex-end" else str "center" diff --git a/src/Lumi/Styles/Banner.purs b/src/Lumi/Styles/Banner.purs index d4e8b454..8a0ea3cd 100644 --- a/src/Lumi/Styles/Banner.purs +++ b/src/Lumi/Styles/Banner.purs @@ -6,7 +6,7 @@ import Data.Foldable (fold) import Lumi.Components (PropsModifier) import Lumi.Styles (color, css, str, style) import Lumi.Styles.Border (_round) as S -import Lumi.Styles.Box (FlexAlign(..), _align, _row, box) as S +import Lumi.Styles.Box (FlexAlign(..), _align, _column, _row, box) as S import Lumi.Styles.Responsive (desktopQuery) import Lumi.Styles.Theme (LumiTheme(..)) From c798475d54d0ea571bfa007db1433a833ae9b13b Mon Sep 17 00:00:00 2001 From: kimi spencer Date: Mon, 4 May 2020 14:47:00 +0300 Subject: [PATCH 09/17] code review --- docs/Examples2/Banner.example.purs | 11 +++-- src/Lumi/Components2/Banner.purs | 68 ++++++++++++++++-------------- 2 files changed, 41 insertions(+), 38 deletions(-) diff --git a/docs/Examples2/Banner.example.purs b/docs/Examples2/Banner.example.purs index 74e7ea03..c4bd3606 100644 --- a/docs/Examples2/Banner.example.purs +++ b/docs/Examples2/Banner.example.purs @@ -3,6 +3,7 @@ module Lumi.Components2.Examples.Banner where import Prelude import Data.Array (intercalate) +import Data.Maybe (Maybe(..)) import Lumi.Components (LumiProps) import Lumi.Components.Button as Button import Lumi.Components.Example (example) @@ -169,19 +170,17 @@ docs = [ R.text "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius erat a purus fermentum luctus. Sed porta nisi eget mauris facilisis, a accumsan erat feugiat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque maximus mauris nulla." ] - bannerTitle :: Array JSX + bannerTitle :: Maybe JSX bannerTitle = - [ subsectionHeader_ "Lorem ipsum dolor sit amet" - ] + Just $ subsectionHeader_ "Lorem ipsum dolor sit amet" - bannerIcon :: Array JSX + bannerIcon :: Maybe JSX bannerIcon = - [ avatar + Just $ avatar { image: R.img { src: "https://s3.amazonaws.com/lumi-blog/avatars/_x600/flexo.jpg" } , size: large , style: R.css { height: "40px", width: "40px" } } - ] simpleActions :: Array JSX simpleActions = diff --git a/src/Lumi/Components2/Banner.purs b/src/Lumi/Components2/Banner.purs index 67ccbd93..4ba4dded 100644 --- a/src/Lumi/Components2/Banner.purs +++ b/src/Lumi/Components2/Banner.purs @@ -13,8 +13,8 @@ module Lumi.Components2.Banner import Prelude import Color (lighten) -import Data.Array as Array import Data.Foldable (fold) +import Data.Maybe (Maybe(..), isJust) import Data.Monoid as Monoid import Data.Tuple.Nested ((/\)) import Effect.Unsafe (unsafePerformEffect) @@ -40,8 +40,8 @@ data Banner = Banner type BannerProps = ( component :: Banner , dismissable :: Boolean - , icon :: Array JSX - , title :: Array JSX + , icon :: Maybe JSX + , title :: Maybe JSX , content :: Array JSX ) @@ -66,16 +66,18 @@ banner = { flex: str "1", width: str "100%" } ) $ _ { content = - [ Monoid.guard (not Array.null props.title) - $ box - $ S._alignSelf S.Start - $ style_ - ( css - { marginBottom: int 8 + [ case props.title of + Just title -> + box + $ S._alignSelf S.Start + $ style_ + ( css + { marginBottom: int 8 + } + ) + $ _ { content = [ title ] } - ) - $ _ { content = props.title - } + _ -> mempty , box $ S._align S.Center $ S._row @@ -84,22 +86,24 @@ banner = { flex: str "1" } ) $ _ { content = - [ Monoid.guard (not Array.null props.icon) - $ box - $ S._alignSelf S.Start - $ S.onDesktop (S._alignSelf S.Center) - $ style_ - ( fold - [ css - { marginRight: int 16 - } - , desktopQuery $ css - { alignSelf: str "center" - } - ] - ) - $ _ { content = props.icon - } + [ case props.icon of + Just icon -> + box + $ S._alignSelf S.Start + $ S.onDesktop (S._alignSelf S.Center) + $ style_ + ( fold + [ css + { marginRight: int 16 + } + , desktopQuery $ css + { alignSelf: str "center" + } + ] + ) + $ _ { content = [ icon ] + } + _ -> mempty ] <> props.content } @@ -115,7 +119,7 @@ banner = , type_: Icon.Remove } ] - , onClick = capture_ $ setVisible \_ -> false + -- , onClick = capture_ $ setVisible \_ -> false } ] } @@ -123,10 +127,10 @@ banner = defaults :: Record BannerProps defaults = { component: Banner - , title: [] + , title: Nothing , content: [] , dismissable: false - , icon: [] + , icon: Nothing } dismissButtonStyle :: forall props. PropsModifier props @@ -159,7 +163,7 @@ actionBanner actions f = } , desktopQuery $ css -- @NOTE positioning of the action button changes dependent on if there is a banner title or not - { alignItems: if (not Array.null props.title) + { alignItems: if (isJust props.title) then str "flex-end" else str "center" } From 5901b21b5c651473ff6fddee2a640739e2f1e0f1 Mon Sep 17 00:00:00 2001 From: kimi spencer Date: Mon, 4 May 2020 14:55:36 +0300 Subject: [PATCH 10/17] style review --- src/Lumi/Components2/Banner.purs | 3 +++ src/Lumi/Styles/Banner.purs | 6 ++++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/Lumi/Components2/Banner.purs b/src/Lumi/Components2/Banner.purs index 4ba4dded..7c2ef5d3 100644 --- a/src/Lumi/Components2/Banner.purs +++ b/src/Lumi/Components2/Banner.purs @@ -140,6 +140,9 @@ banner = css { padding: str "8px" , margin: str "0 -8px 0 8px" + , position: str "absolute" + , top: int 8 + , right: int 16 , "&:hover": nested $ css { color: color colors.black1 } diff --git a/src/Lumi/Styles/Banner.purs b/src/Lumi/Styles/Banner.purs index 8a0ea3cd..a5597f6d 100644 --- a/src/Lumi/Styles/Banner.purs +++ b/src/Lumi/Styles/Banner.purs @@ -4,9 +4,9 @@ import Prelude import Data.Foldable (fold) import Lumi.Components (PropsModifier) -import Lumi.Styles (color, css, str, style) +import Lumi.Styles (color, css, int, str, style) import Lumi.Styles.Border (_round) as S -import Lumi.Styles.Box (FlexAlign(..), _align, _column, _row, box) as S +import Lumi.Styles.Box (FlexAlign(..), _align, _row, box) as S import Lumi.Styles.Responsive (desktopQuery) import Lumi.Styles.Theme (LumiTheme(..)) @@ -22,8 +22,10 @@ banner = { backgroundColor: color colors.black4 , color: color colors.black , padding: str "16px" + , position: str "relative" } , desktopQuery $ css { padding: str "16px 24px" + , maxWidth: int 1000 } ] From b033b5297918f976efc16bdd5121d4c4e78f857c Mon Sep 17 00:00:00 2001 From: kimi spencer Date: Mon, 4 May 2020 15:13:21 +0300 Subject: [PATCH 11/17] dismissable button fix --- src/Lumi/Components2/Banner.purs | 36 ++++++++++++++++---------------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/Lumi/Components2/Banner.purs b/src/Lumi/Components2/Banner.purs index 7c2ef5d3..1e694b82 100644 --- a/src/Lumi/Components2/Banner.purs +++ b/src/Lumi/Components2/Banner.purs @@ -22,7 +22,7 @@ import Lumi.Components (LumiComponent, PropsModifier, lumiComponent) import Lumi.Components.Icon as Icon import Lumi.Components.Spacing (Space(..)) import Lumi.Components2.Box (box) -import Lumi.Styles (color, css, int, nested, prop, str, style, style_) +import Lumi.Styles (color, css, int, nested, prop, str, style, style_, toCSS) import Lumi.Styles.Banner (banner) as S import Lumi.Styles.Border (_listSpaced, _listCompact) as Styles.Banner import Lumi.Styles.Box (FlexAlign(..), _align, _alignSelf, _column, _interactive, _justify, _row) as S @@ -31,6 +31,7 @@ import Lumi.Styles.Responsive (onDesktop) as S import Lumi.Styles.Theme (LumiTheme(..), useTheme) import React.Basic (JSX) import React.Basic.DOM as R +import React.Basic.Emotion as E import React.Basic.DOM.Events (capture_) import React.Basic.Hooks (useState) import React.Basic.Hooks as React @@ -73,6 +74,7 @@ banner = $ style_ ( css { marginBottom: int 8 + , maxWidth: str "calc(100% - 24px)" } ) $ _ { content = [ title ] @@ -109,18 +111,18 @@ banner = } ] } - , Monoid.guard props.dismissable - $ box - $ S._alignSelf S.Start - $ dismissButtonStyle - $ _ { content = - [ Icon.icon - { style: R.css { fontSize: "12px" } - , type_: Icon.Remove - } - ] - -- , onClick = capture_ $ setVisible \_ -> false - } + , Monoid.guard props.dismissable + $ E.element R.div' + { children: + [ Icon.icon + { style: R.css { fontSize: "12px" } + , type_: Icon.Remove + } + ] + , className: "" + , css: theme # toCSS dismissButtonStyle + , onClick: capture_ $ setVisible \_ -> false + } ] } where @@ -138,11 +140,9 @@ banner = S._interactive <<< style \(LumiTheme { colors }) -> css - { padding: str "8px" - , margin: str "0 -8px 0 8px" - , position: str "absolute" - , top: int 8 - , right: int 16 + { position: str "absolute" + , top: int 16 + , right: int 24 , "&:hover": nested $ css { color: color colors.black1 } From 1850b550138748dccab5a7a05df927a22caac396 Mon Sep 17 00:00:00 2001 From: kimi spencer Date: Mon, 4 May 2020 22:27:37 +0300 Subject: [PATCH 12/17] code reivew fixes --- src/Lumi/Components2/Banner.purs | 102 ++++++++++++++++--------------- src/Lumi/Styles/Banner.purs | 8 ++- src/Lumi/Styles/Box.purs | 5 ++ 3 files changed, 64 insertions(+), 51 deletions(-) diff --git a/src/Lumi/Components2/Banner.purs b/src/Lumi/Components2/Banner.purs index 1e694b82..e5767f06 100644 --- a/src/Lumi/Components2/Banner.purs +++ b/src/Lumi/Components2/Banner.purs @@ -22,10 +22,11 @@ import Lumi.Components (LumiComponent, PropsModifier, lumiComponent) import Lumi.Components.Icon as Icon import Lumi.Components.Spacing (Space(..)) import Lumi.Components2.Box (box) +import Lumi.Components2.Button (button) import Lumi.Styles (color, css, int, nested, prop, str, style, style_, toCSS) import Lumi.Styles.Banner (banner) as S import Lumi.Styles.Border (_listSpaced, _listCompact) as Styles.Banner -import Lumi.Styles.Box (FlexAlign(..), _align, _alignSelf, _column, _interactive, _justify, _row) as S +import Lumi.Styles.Box (FlexAlign(..), _align, _alignSelf, _column, _flex, _interactive, _justify, _row) as S import Lumi.Styles.Responsive (desktopQuery) import Lumi.Styles.Responsive (onDesktop) as S import Lumi.Styles.Theme (LumiTheme(..), useTheme) @@ -55,16 +56,18 @@ banner = pure $ Monoid.guard visible $ box - $ style props.css $ S.banner + $ style props.css $ _ { className = props.className , content = [ box $ S._column + $ S._flex $ S._alignSelf S.Center + $ S._align S.Stretch + -- @TODO remove this $ style_ - ( css - { flex: str "1", width: str "100%" } + ( css { border: str "1px dashed" } ) $ _ { content = [ case props.title of @@ -74,7 +77,7 @@ banner = $ style_ ( css { marginBottom: int 8 - , maxWidth: str "calc(100% - 24px)" + , border: str "1px dashed green" } ) $ _ { content = [ title ] @@ -83,10 +86,7 @@ banner = , box $ S._align S.Center $ S._row - $ style_ - ( css - { flex: str "1" } - ) + $ S._flex $ _ { content = [ case props.icon of Just icon -> @@ -94,14 +94,9 @@ banner = $ S._alignSelf S.Start $ S.onDesktop (S._alignSelf S.Center) $ style_ - ( fold - [ css - { marginRight: int 16 - } - , desktopQuery $ css - { alignSelf: str "center" - } - ] + ( css + { marginRight: int 16 + } ) $ _ { content = [ icon ] } @@ -111,18 +106,18 @@ banner = } ] } - , Monoid.guard props.dismissable - $ E.element R.div' - { children: - [ Icon.icon - { style: R.css { fontSize: "12px" } - , type_: Icon.Remove - } - ] - , className: "" - , css: theme # toCSS dismissButtonStyle - , onClick: capture_ $ setVisible \_ -> false - } + , Monoid.guard props.dismissable + $ button + $ S._alignSelf S.Start + $ dismissButtonStyle + $ _ { content = + [ Icon.icon + { style: R.css { fontSize: "12px" } + , type_: Icon.Remove + } + ] + -- , onPress = capture_ $ setVisible \_ -> false + } ] } where @@ -140,11 +135,23 @@ banner = S._interactive <<< style \(LumiTheme { colors }) -> css - { position: str "absolute" - , top: int 16 - , right: int 24 + { + -- position: str "absolute" + -- , top: int 16 + -- , right: int 24 + ariaLabel: str "dismiss" + , outline: str "none" + -- , border: str "none" + , background: str "none" + , color: color colors.black1 + , minWidth: str "initial" , "&:hover": nested $ css { color: color colors.black1 + , border: str "none" + , background: str "none" + } + , "&:focus": nested $ css + { boxShadow: str "none" } } @@ -154,29 +161,27 @@ actionBanner actions f = { content = [ box $ S._column + $ S.onDesktop (S._row) + $ S._flex + $ S._align S.End + -- @TODO remove this $ style_ - ( css - { flex: str "1" } + ( css { border: str "1px dashed pink" } ) - $ S.onDesktop (S._row) $ style_ - ( fold - [ css - { alignItems: str "flex-end" - } - , desktopQuery $ css - -- @NOTE positioning of the action button changes dependent on if there is a banner title or not - { alignItems: if (isJust props.title) - then str "flex-end" - else str "center" - } - ] + ( desktopQuery $ css + -- @NOTE positioning of the action button changes dependent on if there is a banner title or not + { alignItems: if (isJust props.title) + then str "flex-end" + else str "center" + } ) $ _ { content = [ box + $ S._flex + -- @TODO remove this $ style_ - ( css - { flex: str "1" } + ( css { border: str "1px dashed blue" } ) $ _ { content = props.content } , box @@ -187,6 +192,7 @@ actionBanner actions f = ( fold [ css { margin: str "16px 0 0" + , border: str "1px dashed red" , "& :not(:first-child)": nested $ css { marginLeft: prop S8 } diff --git a/src/Lumi/Styles/Banner.purs b/src/Lumi/Styles/Banner.purs index a5597f6d..16831adb 100644 --- a/src/Lumi/Styles/Banner.purs +++ b/src/Lumi/Styles/Banner.purs @@ -7,14 +7,16 @@ import Lumi.Components (PropsModifier) import Lumi.Styles (color, css, int, str, style) import Lumi.Styles.Border (_round) as S import Lumi.Styles.Box (FlexAlign(..), _align, _row, box) as S -import Lumi.Styles.Responsive (desktopQuery) +import Lumi.Styles.Responsive (desktopQuery, onDesktop) import Lumi.Styles.Theme (LumiTheme(..)) banner :: forall props. PropsModifier props banner = S.box <<< S._row - <<< S._align S.Center + -- <<< S._align S.Center + <<< S._align S.Baseline + <<< onDesktop (S._align S.Center) <<< S._round <<< style \(LumiTheme { colors }) -> fold @@ -22,7 +24,7 @@ banner = { backgroundColor: color colors.black4 , color: color colors.black , padding: str "16px" - , position: str "relative" + -- , position: str "relative" } , desktopQuery $ css { padding: str "16px 24px" diff --git a/src/Lumi/Styles/Box.purs b/src/Lumi/Styles/Box.purs index 87fd6fee..ee70fbb4 100644 --- a/src/Lumi/Styles/Box.purs +++ b/src/Lumi/Styles/Box.purs @@ -36,6 +36,11 @@ _wrap = style_ $ css { flexWrap: str "wrap" } +_flex :: StyleModifier +_flex = + style_ + $ css { flex: str "1" } + data FlexAlign = Start | End From 1a719cb893c1bc7f1e0ef8fb76ed97508428363c Mon Sep 17 00:00:00 2001 From: kimi spencer Date: Tue, 12 May 2020 14:26:39 +0300 Subject: [PATCH 13/17] cleanup + wrap up fixes --- docs/Examples2/Banner.example.purs | 42 ------------------------------ src/Lumi/Components2/Banner.purs | 28 +++++--------------- src/Lumi/Styles/Banner.purs | 2 -- 3 files changed, 7 insertions(+), 65 deletions(-) diff --git a/docs/Examples2/Banner.example.purs b/docs/Examples2/Banner.example.purs index c4bd3606..b028fae2 100644 --- a/docs/Examples2/Banner.example.purs +++ b/docs/Examples2/Banner.example.purs @@ -77,27 +77,6 @@ docs = $ Banner.actionBanner simpleActions $ _ { content = loremIpsum_ } - , h2_ "action banner, round (default), spaced list, dismissable" - , example - $ fragment - $ allColors - $ Banner.actionBanner simpleActions - $ _ { dismissable = true - , title = bannerTitle - , content = loremIpsum - } - - , h2_ "action banner, round (default), spaced list, dismissable with icon" - , example - $ fragment - $ allColors - $ Banner.actionBanner simpleActions - $ _ { dismissable = true - , title = bannerTitle - , content = loremIpsum - , icon = bannerIcon - } - , h2_ "action banner, round (default), spaced list, non-dismissable" , example $ fragment @@ -105,33 +84,12 @@ docs = $ Banner.actionBanner twoButtonActions $ _ { content = loremIpsum_ } - , h2_ "action banner, round (default), spaced list, dismissable" - , example - $ fragment - $ allColors - $ Banner.actionBanner twoButtonActions - $ _ { dismissable = true - , title = bannerTitle - , content = loremIpsum - } - , h2_ "action banner, round (default), spaced list, non-dismissable" , example $ fragment $ allColors $ Banner.actionBanner actions $ _ { content = loremIpsum_ } - - , h2_ "action banner, round (default), spaced list, dismissable" - , example - $ fragment - $ allColors - $ Banner.actionBanner actions - $ _ { dismissable = true - , title = bannerTitle - , content = loremIpsum - } - ] where allColors :: (LumiProps Banner.BannerProps -> LumiProps Banner.BannerProps) -> Array JSX diff --git a/src/Lumi/Components2/Banner.purs b/src/Lumi/Components2/Banner.purs index e5767f06..cb58d9ae 100644 --- a/src/Lumi/Components2/Banner.purs +++ b/src/Lumi/Components2/Banner.purs @@ -65,10 +65,6 @@ banner = $ S._flex $ S._alignSelf S.Center $ S._align S.Stretch - -- @TODO remove this - $ style_ - ( css { border: str "1px dashed" } - ) $ _ { content = [ case props.title of Just title -> @@ -77,7 +73,6 @@ banner = $ style_ ( css { marginBottom: int 8 - , border: str "1px dashed green" } ) $ _ { content = [ title ] @@ -116,7 +111,7 @@ banner = , type_: Icon.Remove } ] - -- , onPress = capture_ $ setVisible \_ -> false + , onPress = setVisible \_ -> false } ] } @@ -135,16 +130,16 @@ banner = S._interactive <<< style \(LumiTheme { colors }) -> css - { - -- position: str "absolute" - -- , top: int 16 - -- , right: int 24 - ariaLabel: str "dismiss" + { ariaLabel: str "dismiss" , outline: str "none" - -- , border: str "none" + , border: str "none" , background: str "none" , color: color colors.black1 , minWidth: str "initial" + , padding: int 0 + , "@media (min-width: 860px)": nested $ css + { padding: int 0 + } , "&:hover": nested $ css { color: color colors.black1 , border: str "none" @@ -164,10 +159,6 @@ actionBanner actions f = $ S.onDesktop (S._row) $ S._flex $ S._align S.End - -- @TODO remove this - $ style_ - ( css { border: str "1px dashed pink" } - ) $ style_ ( desktopQuery $ css -- @NOTE positioning of the action button changes dependent on if there is a banner title or not @@ -179,10 +170,6 @@ actionBanner actions f = $ _ { content = [ box $ S._flex - -- @TODO remove this - $ style_ - ( css { border: str "1px dashed blue" } - ) $ _ { content = props.content } , box $ S._row @@ -192,7 +179,6 @@ actionBanner actions f = ( fold [ css { margin: str "16px 0 0" - , border: str "1px dashed red" , "& :not(:first-child)": nested $ css { marginLeft: prop S8 } diff --git a/src/Lumi/Styles/Banner.purs b/src/Lumi/Styles/Banner.purs index 16831adb..1f363cb3 100644 --- a/src/Lumi/Styles/Banner.purs +++ b/src/Lumi/Styles/Banner.purs @@ -14,7 +14,6 @@ banner :: forall props. PropsModifier props banner = S.box <<< S._row - -- <<< S._align S.Center <<< S._align S.Baseline <<< onDesktop (S._align S.Center) <<< S._round @@ -24,7 +23,6 @@ banner = { backgroundColor: color colors.black4 , color: color colors.black , padding: str "16px" - -- , position: str "relative" } , desktopQuery $ css { padding: str "16px 24px" From 89e7ee2c9c1977296d3f4436ff0fd22e505a93ed Mon Sep 17 00:00:00 2001 From: kimi spencer Date: Tue, 12 May 2020 16:47:00 +0300 Subject: [PATCH 14/17] dismiss button --- src/Lumi/Components2/Banner.purs | 38 ++++++++++++++------------------ 1 file changed, 16 insertions(+), 22 deletions(-) diff --git a/src/Lumi/Components2/Banner.purs b/src/Lumi/Components2/Banner.purs index cb58d9ae..7630277a 100644 --- a/src/Lumi/Components2/Banner.purs +++ b/src/Lumi/Components2/Banner.purs @@ -22,7 +22,6 @@ import Lumi.Components (LumiComponent, PropsModifier, lumiComponent) import Lumi.Components.Icon as Icon import Lumi.Components.Spacing (Space(..)) import Lumi.Components2.Box (box) -import Lumi.Components2.Button (button) import Lumi.Styles (color, css, int, nested, prop, str, style, style_, toCSS) import Lumi.Styles.Banner (banner) as S import Lumi.Styles.Border (_listSpaced, _listCompact) as Styles.Banner @@ -102,17 +101,17 @@ banner = ] } , Monoid.guard props.dismissable - $ button - $ S._alignSelf S.Start - $ dismissButtonStyle - $ _ { content = - [ Icon.icon - { style: R.css { fontSize: "12px" } - , type_: Icon.Remove - } - ] - , onPress = setVisible \_ -> false - } + $ E.element R.button' + { css: theme # toCSS dismissButtonStyle + , children: + [ Icon.icon + { style: R.css { fontSize: "12px" } + , type_: Icon.Remove + } + ] + , onClick: capture_ $ setVisible \_ -> false + , className: "banner-dismiss" + } ] } where @@ -128,25 +127,17 @@ banner = dismissButtonStyle :: forall props. PropsModifier props dismissButtonStyle = S._interactive + <<< S._alignSelf S.Start <<< style \(LumiTheme { colors }) -> css { ariaLabel: str "dismiss" - , outline: str "none" , border: str "none" , background: str "none" , color: color colors.black1 - , minWidth: str "initial" , padding: int 0 - , "@media (min-width: 860px)": nested $ css - { padding: int 0 - } - , "&:hover": nested $ css - { color: color colors.black1 - , border: str "none" - , background: str "none" - } , "&:focus": nested $ css { boxShadow: str "none" + , outline: str "none" } } @@ -165,6 +156,9 @@ actionBanner actions f = { alignItems: if (isJust props.title) then str "flex-end" else str "center" + , border: if (isJust props.title) + then str "1px dashed red" + else str "1px dashed blue" } ) $ _ { content = From 2de0742e0a47159f7b56a12f52793fd0a2b887ff Mon Sep 17 00:00:00 2001 From: kimi spencer Date: Tue, 12 May 2020 17:03:47 +0300 Subject: [PATCH 15/17] action button alignment --- src/Lumi/Components2/Banner.purs | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/src/Lumi/Components2/Banner.purs b/src/Lumi/Components2/Banner.purs index 7630277a..5b4858ba 100644 --- a/src/Lumi/Components2/Banner.purs +++ b/src/Lumi/Components2/Banner.purs @@ -150,17 +150,6 @@ actionBanner actions f = $ S.onDesktop (S._row) $ S._flex $ S._align S.End - $ style_ - ( desktopQuery $ css - -- @NOTE positioning of the action button changes dependent on if there is a banner title or not - { alignItems: if (isJust props.title) - then str "flex-end" - else str "center" - , border: if (isJust props.title) - then str "1px dashed red" - else str "1px dashed blue" - } - ) $ _ { content = [ box $ S._flex From b0035256d8e68c38d691155eb1279818f70b621c Mon Sep 17 00:00:00 2001 From: kimi spencer Date: Wed, 13 May 2020 10:58:39 +0300 Subject: [PATCH 16/17] actionBanner alignments --- src/Lumi/Components2/Banner.purs | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Lumi/Components2/Banner.purs b/src/Lumi/Components2/Banner.purs index 5b4858ba..1720597f 100644 --- a/src/Lumi/Components2/Banner.purs +++ b/src/Lumi/Components2/Banner.purs @@ -14,7 +14,7 @@ import Prelude import Color (lighten) import Data.Foldable (fold) -import Data.Maybe (Maybe(..), isJust) +import Data.Maybe (Maybe(..)) import Data.Monoid as Monoid import Data.Tuple.Nested ((/\)) import Effect.Unsafe (unsafePerformEffect) @@ -130,8 +130,7 @@ banner = <<< S._alignSelf S.Start <<< style \(LumiTheme { colors }) -> css - { ariaLabel: str "dismiss" - , border: str "none" + { border: str "none" , background: str "none" , color: color colors.black1 , padding: int 0 @@ -147,9 +146,9 @@ actionBanner actions f = { content = [ box $ S._column - $ S.onDesktop (S._row) + $ S._align S.Start + $ S.onDesktop (S._row <<< S._align S.Center) $ S._flex - $ S._align S.End $ _ { content = [ box $ S._flex @@ -157,7 +156,8 @@ actionBanner actions f = , box $ S._row $ S._align S.Center - $ S._justify S.End + $ S._alignSelf S.End + $ S.onDesktop (S._alignSelf S.Center) $ style_ ( fold [ css From 3958aab89571ca11a920c3a7619989608062c688 Mon Sep 17 00:00:00 2001 From: kimi spencer Date: Wed, 13 May 2020 12:44:30 +0300 Subject: [PATCH 17/17] actionBanner + dismissable --- docs/Examples2/Banner.example.purs | 11 ++++++++++- src/Lumi/Components2/Banner.purs | 4 ++-- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/docs/Examples2/Banner.example.purs b/docs/Examples2/Banner.example.purs index b028fae2..bc86200f 100644 --- a/docs/Examples2/Banner.example.purs +++ b/docs/Examples2/Banner.example.purs @@ -52,7 +52,7 @@ docs = , icon = bannerIcon } - , h2_ "round (default), spaced list, dismissable" + , h2_ "round (default), spaced list, dismissable with title" , example $ fragment $ allColors @@ -90,6 +90,15 @@ docs = $ allColors $ Banner.actionBanner actions $ _ { content = loremIpsum_ } + + , h2_ "action banner, round (default), spaced list, dismissable" + , example + $ fragment + $ allColors + $ Banner.actionBanner simpleActions + $ _ { content = loremIpsum_ + , dismissable = true + } ] where allColors :: (LumiProps Banner.BannerProps -> LumiProps Banner.BannerProps) -> Array JSX diff --git a/src/Lumi/Components2/Banner.purs b/src/Lumi/Components2/Banner.purs index 1720597f..6442b25b 100644 --- a/src/Lumi/Components2/Banner.purs +++ b/src/Lumi/Components2/Banner.purs @@ -25,7 +25,7 @@ import Lumi.Components2.Box (box) import Lumi.Styles (color, css, int, nested, prop, str, style, style_, toCSS) import Lumi.Styles.Banner (banner) as S import Lumi.Styles.Border (_listSpaced, _listCompact) as Styles.Banner -import Lumi.Styles.Box (FlexAlign(..), _align, _alignSelf, _column, _flex, _interactive, _justify, _row) as S +import Lumi.Styles.Box (FlexAlign(..), _align, _alignSelf, _column, _flex, _interactive, _row) as S import Lumi.Styles.Responsive (desktopQuery) import Lumi.Styles.Responsive (onDesktop) as S import Lumi.Styles.Theme (LumiTheme(..), useTheme) @@ -167,7 +167,7 @@ actionBanner actions f = } } , desktopQuery $ css - { margin: str "0 0 0 40px" + { margin: str "0 20px" } ] )