fed6bb7 · rowtype-yoga/ry-blocks

.storybook/preview-head.html+6−1

@@ -1,2 +1,7 @@

11<link href="https://rsms.me/inter/inter.css" rel="stylesheet">

2−<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/victormono@latest/dist/index.min.css">

2+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/victormono@latest/dist/index.min.css">

3+<style>

4+#storybook-root {

5+ height: 100%;

6+}

7+</style>

src/Yoga/Block.purs+8−2

@@ -123,8 +123,14 @@ stack = el stack'

123123stack_ ∷ Array JSX → JSX

124124stack_ = stack {}

125125

126−switcher ∷ ∀ p q. Union p q Switcher.Props ⇒ ReactComponent { | p }

127−switcher = Switcher.component

126+switcher' ∷ ∀ p q. Union p q Switcher.Props ⇒ ReactComponent { | p }

127+switcher' = Switcher.component

128+

129+switcher ∷ ∀ p q. Lacks "children" p ⇒ Union p q Switcher.PropsNoChildren ⇒ { | p } → Array JSX → JSX

130+switcher = el switcher'

131+

132+switcher_ ∷ Array JSX → JSX

133+switcher_ = switcher {}

128134

129135toggle ∷ ∀ p q. Union p q Toggle.Props ⇒ ReactComponent { | p }

130136toggle = Toggle.component

src/Yoga/Block/Atom/Button.purs+2

@@ -1,5 +1,7 @@

11module Yoga.Block.Atom.Button

22 ( module Yoga.Block.Atom.Button.View

3+ , module Yoga.Block.Atom.Button.Style

34 ) where

45

56import Yoga.Block.Atom.Button.View (component, Props, PropsNoChildren)

7+import Yoga.Block.Atom.Button.Style (style)

src/Yoga/Block/Atom/Button/Style.purs+44−19

@@ -3,12 +3,16 @@ module Yoga.Block.Atom.Button.Style where

33import Yoga.Prelude.Style

44

55import Data.Interpolate (i)

6−import Fahrtwind (background', hover, zIndex)

7−import Yoga.Block.Container.Style (col, colour, size)

6+import Unsafe.Coerce (unsafeCoerce)

87

98type Props :: forall k. (Type -> k) -> Row k -> Row k

109type Props f r =

1110 ( css ∷ f Style

11+ , width :: f StyleProperty

12+ , backgroundCol :: f StyleProperty

13+ , borderCol :: f StyleProperty

14+ , textCol :: f StyleProperty

15+ , hoverBackgroundCol :: f StyleProperty

1216 | r

1317 )

1418

@@ -35,11 +39,25 @@ backgroundAnimation =

3539 , "to": css { backgroundPosition: str "100% 50%" }

3640 }

3741

42+varOr :: String -> StyleProperty -> StyleProperty

43+varOr varName alternative = str $ "var(" <> varName <> ", " <> unsafeCoerce alternative <> ")"

44+

45+style =

46+ { background: prefix <> "background"

47+ , textCol: prefix <> "color"

48+ , borderCol: prefix <> "border-color"

49+ , width: prefix <> "width"

50+ , hoverBackgroundCol: prefix <> "hover-background-color"

51+ }

52+ where

53+ prefix = "--ry-button-"

54+

3855button ∷ Style

3956button =

4057 inlineFlex <>

4158 css

42− { background: str colour.backgroundLayer5

59+ { background: varOr style.background (str colour.backgroundLayer5)

60+ , width: varOr style.width auto

4361 , borderWidth: int 0

4462 , position: relative

4563 , overflow: hidden

@@ -47,9 +65,10 @@ button =

4765 , padding: str "calc(var(--s-1) * 0.8) var(--s0)"

4866 , paddingBottom: str "calc(var(--s-1) * 0.8 + 1px)"

4967 , justifyContent: center

68+ , textAlign: str "start"

5069 , alignItems: center

5170 , borderRadius: var "--s-1"

52− , color: str colour.text

71+ , color: varOr style.textCol (str colour.text)

5372 , touchAction: manipulation

5473 , boxSizing: borderBox

5574 , fontSize: str size.text.interactive

@@ -61,17 +80,23 @@ button =

6180 , "& > .ry-drip": nested (zIndex 0)

6281 , "& > :not(.ry-drip)": nested (zIndex 1)

6382 , """&[data-button-shape="flat"]""":

64− nested $ hover (background' col.highlightAlpha10) <> css

65− { background: str "transparent"

66− , boxShadow: none

67− , color: str colour.highlightTextOnBackground

68− , "&:active": nest { boxShadow: none }

69− , """&[data-button-type="primary"]""":

70− nest

71− { background: str colour.highlight

72− , boxShadow: none

83+ nested

84+ $

85+ ( hover $ css

86+ { background: varOr style.hoverBackgroundCol col.highlightAlpha10

7387 }

74− }

88+ )

89+ <> css

90+ { background: varOr style.background (str "transparent")

91+ , boxShadow: none

92+ , color: varOr style.textCol (str colour.highlightTextOnBackground)

93+ , "&:active": nest { boxShadow: none }

94+ , """&[data-button-type="primary"]""":

95+ nest

96+ { background: str colour.highlight

97+ , boxShadow: none

98+ }

99+ }

75100 , """&[data-button-shape="pill"]""":

76101 nest

77102 { borderRadius: str "calc(var(--s1) * 0.85)"

@@ -80,14 +105,14 @@ button =

80105 }

81106 , """&[data-button-type="primary"]""":

82107 nest

83− { background: gradientBackground

108+ { background: varOr style.background gradientBackground

84109 , backgroundSize: str "200% 200%"

85110 , fontWeight: str "500"

86111 , letterSpacing: str "calc(var(--s-5)* (0.1))"

87112 , animation: backgroundAnimation <> str " alternate ease-out 10s infinite"

88113 , boxShadow: str "0 1px 4px 0px rgba(0,0,0,0.40)"

89114 , borderColor: str "transparent"

90− , color: str colour.highlightText

115+ , color: varOr style.textCol (str colour.highlightText)

91116 , "&:focus-visible":

92117 nest

93118 { borderColor: col.background

@@ -99,7 +124,7 @@ button =

99124 }

100125 , """&[data-button-type="dangerous"]""":

101126 nest

102− { color: str $ colour.interfaceDangerousText

127+ { color: varOr style.textCol (str colour.interfaceDangerousText)

103128 , background: str $ colour.interfaceBackgroundDangerous

104129 , fontWeight: str "500"

105130 , letterSpacing: str "calc(var(--s-5) * -0.10)"

@@ -112,12 +137,12 @@ button =

112137 , "&:active":

113138 nest

114139 { boxShadow: str $ "inset 0 1px calc(var(--s0) * var(--dark-mode) + var(--s-2) * var(--light-mode)) rgba(0,0,0, calc(0.18 * var(--dark-mode) + 0.09 * var(--light-mode)))"

115− , transform: str "scale3d(0.96,0.96,0.36)"

140+ , transform: str "scale3d(0.98,0.98, 0.98)"

116141 , transition: str "transform 100ms ease"

117142 }

118143 , "&:disabled, &:disabled:active":

119144 nest

120− { color: str colour.interfaceTextDisabled

145+ { color: varOr style.textCol (str colour.interfaceTextDisabled)

121146 , boxShadow: none

122147 , background: str colour.interfaceBackgroundDisabled

123148 , transform: str "none"

src/Yoga/Block/Atom/Button/View.purs+13−1

@@ -3,17 +3,20 @@ module Yoga.Block.Atom.Button.View where

33import Yoga.Prelude.View

44

55import Data.Array as Array

6+import Data.Tuple (uncurry)

67import Effect.Uncurried (runEffectFn1)

78import Foreign.Object as Object

9+import React.Basic.DOM as R

810import React.Basic.Hooks as React

911import Record.Unsafe (unsafeGet, unsafeSet)

12+import Unsafe.Coerce (unsafeCoerce)

1013import Untagged.Union (uorToMaybe)

1114import Yoga.Block.Atom.Button.Style as Style

1215import Yoga.Block.Atom.Button.Types (ButtonShape, ButtonType, renderButtonShape, renderButtonType)

1316import Yoga.Block.Atom.Button.Types as Button

1417import Yoga.Block.Container.Style (colour)

1518import Yoga.Block.Hook.UseDrip (useDrip)

16−import Yoga.Block.Internal (ButtonWritablePropsNoChildrenF)

19+import Yoga.Block.Internal (ButtonWritablePropsNoChildrenF, objectToStyle, toStyleObject)

1720import Yoga.Block.Quark.Drip.View as Drip

1821

1922type PropsF :: forall k. (Type -> k) -> Row k -> Row k

@@ -93,5 +96,14 @@ rawComponent =

9396 props'

9497 { className: "ry-button"

9598 , css: Style.button <>? props.css

99+ , style: objectToStyle

100+ ( foldMap (uncurry toStyleObject)

101+ [ Style.style.background /\ props.backgroundCol

102+ , Style.style.textCol /\ props.textCol

103+ , Style.style.borderCol /\ props.borderCol

104+ , Style.style.width /\ props.width

105+ , Style.style.hoverBackgroundCol /\ props.hoverBackgroundCol

106+ ]

107+ )

96108 , _data

97109 }

src/Yoga/Block/Container/Style.purs+1−1

@@ -111,7 +111,7 @@ mkGlobal maybeMode =

111111 { "html, body":

112112 nested

113113 $ css

114− { minHeight: 100.0 # percent

114+ { height: 100.0 # percent

115115 , minWidth: 100.0 # percent

116116 , "WebkitTextSizeAdjust": 100.0 # percent

117117 }

src/Yoga/Block/Internal.purs+39−28

@@ -1,48 +1,51 @@

11module Yoga.Block.Internal

2− ( mkForwardRefComponent

3− , mkForwardRefComponentEffect

4− , forwardedRefAsMaybe

5− , unsafeEmotion

6− , unsafeDiv

7− , dangerous

8− , deleteUndefineds

2+ ( ButtonReadableProps

3+ , ButtonReadablePropsF

4+ , ButtonReadablePropsNoChildrenF

5+ , ButtonWritableProps

6+ , ButtonWritablePropsF

7+ , ButtonWritablePropsNoChildrenF

98 , DivProps

109 , DivPropsF

1110 , DivPropsNoChildren

1211 , DivPropsNoChildrenF

1312 , InputReadableProps

14− , InputWritableProps

1513 , InputReadablePropsF

14+ , InputWritableProps

1615 , InputWritablePropsF

17− , ButtonWritableProps

18− , ButtonReadableProps

19− , ButtonReadablePropsF

20− , ButtonReadablePropsNoChildrenF

21− , ButtonWritablePropsF

22− , ButtonWritablePropsNoChildrenF

2316 , NodeRef

17+ , createRef

18+ , dangerous

19+ , deleteUndefineds

20+ , emotionButton

2421 , emotionDiv

2522 , emotionInput

26− , emotionButton

27− , module Yoga.Block.Internal.OptionalProp

28− , module Yoga.Block.Internal.CSS

29− , unsafeUnionDroppingUndefined

30− , unsafeMergeSecond

31− , unsafeAddProps

32− , createRef

23+ , findElementByIdInDocument

24+ , focusNodeRef

25+ , forwardedRefAsMaybe

3326 , getBoundingBoxFromRef

3427 , getClientDimensionsFromRef

3528 , getElementFromRef

3629 , getHTMLElementFromRef

30+ , getOffsetDimensionsFromRef

3731 , getOffsetHeightFromRef

3832 , getOffsetWidthFromRef

39− , getOffsetDimensionsFromRef

33+ , getScrollDimensionsFromRef

4034 , getScrollHeightFromRef

4135 , getScrollWidthFromRef

42− , getScrollDimensionsFromRef

43− , findElementByIdInDocument

44− , focusNodeRef

45− ) where

36+ , mkForwardRefComponent

37+ , mkForwardRefComponentEffect

38+ , module Yoga.Block.Internal.CSS

39+ , module Yoga.Block.Internal.OptionalProp

40+ , objectToStyle

41+ , toStyleObject

42+ , unsafeAddProps

43+ , unsafeDiv

44+ , unsafeEmotion

45+ , unsafeMergeSecond

46+ , unsafeUnionDroppingUndefined

47+ )

48+ where

4649

4750import Prelude

4851

@@ -57,11 +60,12 @@ import Data.Traversable (for, for_)

5760import Effect (Effect)

5861import Effect.Unsafe (unsafePerformEffect)

5962import Foreign.Object (Object)

63+import Foreign.Object as Object

6064import Prim.Row (class Lacks, class Union)

6165import Prim.Row as Row

62−import Prim.RowList as RL

6366import React.Basic.DOM (CSS, unsafeCreateDOMComponent)

64−import React.Basic.Emotion (Style)

67+import React.Basic.DOM as R

68+import React.Basic.Emotion (Style, StyleProperty)

6569import React.Basic.Emotion as E

6670import React.Basic.Events (EventHandler)

6771import React.Basic.Hooks (JSX, ReactComponent, Ref, Render, readRefMaybe)

@@ -106,6 +110,13 @@ focusNodeRef ref = do

106110 maybeHTMLElement <- getHTMLElementFromRef ref

107111 for_ maybeHTMLElement focus

108112

113+objectToStyle :: Object StyleProperty -> R.CSS

114+objectToStyle = unsafeCoerce

115+

116+toStyleObject :: String -> OptionalProp StyleProperty -> Object StyleProperty

117+toStyleObject styleName prop =

118+ (prop <#> Object.singleton styleName) ?|| mempty

119+

109120findElementByIdInDocument ∷ String -> Effect (Maybe Element)

110121findElementByIdInDocument id = do

111122 doc <- window >>= document

src/Yoga/Block/Layout/Sidebar/Style.purs+18−36

@@ -8,7 +8,7 @@ data SidebarSide

88 = SidebarLeft

99 | SidebarRight

1010

11−derive instance eqSidebarSide :: Eq SidebarSide

11+derive instance Eq SidebarSide

1212

1313type Props :: forall k. (Type -> k) -> Row k -> Row k

1414type Props f r =

@@ -23,44 +23,26 @@ type Props f r =

2323 | r

2424 )

2525

26−sidebar ∷ ∀ p. { | Props OptionalProp p } -> Style

27−sidebar props = styles <>? props.css

26+sidebarContainer ∷ ∀ p. { | Props OptionalProp p } -> Style

27+sidebarContainer props = styles <>? props.css

2828 where

2929 adjustedSpace = props.space <#> \s -> if s == "0" then "0px" else s

30−

3130 space = adjustedSpace ?|| "1rem"

32−

33− side = props.side ?|| SidebarLeft

34−

35− contentMin = props.contentMin ?|| "50%"

36−

37− nonSidebarStyle =

38− nest

39− { flexBasis: _0

40− , flexGrow: "999" # str

41− , minWidth: i "calc(" contentMin " - " space " - " space ")" # str

42− }

43−

4431 styles =

4532 css

46− { overflow: hidden

47− , "& > *":

48− nested

49− $ flex

50− <> css

51− { flexWrap: if props.reverseOnWrap # isTruthy then str "wrap-reverse" else wrap

52− , margin: "calc(" <> space <> " / 2 * -1)" # str

53− , alignItems: props.noStretch # foldMap if _ then str "flex-start" else mempty

54− }

55− , "& > * > *":

56− nest

57− { margin: "calc(" <> space <> " / 2)" # str

58− , flexGrow: "1" # str

59− , flexBasis: props.sideWidth # foldMap str

60− }

61− <> foldMap (nest <<< { flexBasis: _ } <<< str) props.sideWidth

62− <> foldMap nested props.sideBarCss

33+ { display: str "flex"

34+ , flexWrap: wrap

35+ , gap: str space

6336 }

64− <> case side of

65− SidebarLeft -> css { "& > * > :last-child": nonSidebarStyle }

66− SidebarRight -> css { "& > * > :first-child": nonSidebarStyle }

37+

38+sidebar ∷ Style

39+sidebar = css { flexBasis: 20.0 # rem, flexGrow: int 1 }

40+

41+notSidebar ∷ ∀ p. { | Props OptionalProp p } -> Style

42+notSidebar props = css

43+ { flexBasis: int 0

44+ , flexGrow: int 999

45+ , minInlineSize: str contentMin

46+ }

47+ where

48+ contentMin = props.contentMin ?|| "50%"

src/Yoga/Block/Layout/Sidebar/View.purs+21−11

@@ -3,7 +3,8 @@ module Yoga.Block.Layout.Sidebar.View (component, Props, PropsF) where

33import Yoga.Prelude.View

44

55import Data.Array as Array

6−import React.Basic.DOM (div_)

6+import React.Basic.DOM (aside', div')

7+import React.Basic.Emotion as Emotion

78import Yoga.Block.Layout.Sidebar.Style (SidebarSide(..))

89import Yoga.Block.Layout.Sidebar.Style as Style

910

@@ -26,19 +27,28 @@ rawComponent ∷ ∀ p. ReactComponent { | p }

2627rawComponent =

2728 mkForwardRefComponent "Sidebar" do

2829 \(props ∷ { | PropsOptional }) ref -> React.do

29− let

30− flipChildren =

31− if (props.side ?|| SidebarLeft) == SidebarRight then

32− Array.reverse else identity

30+ let

31+ flipChildren =

32+ if (props.side ?|| SidebarLeft) == SidebarRight then

33+ Array.reverse

34+ else identity

35+

3336 pure

3437 $ emotionDiv ref

3538 props

36− { className: "ry-sidebar " <>? props.className

37− , css: Style.sidebar props

39+ { className: "ry-sidebar__container " <>? props.className

40+ , css: Style.sidebarContainer props

3841 , children:

39− [ div_ $ flipChildren

40− [ div_ [ props.sidebar ]

41− , div_ props.children

42+ flipChildren

43+ [ Emotion.element aside'

44+ { className: "ry-sidebar__sidebar"

45+ , css: Style.sidebar

46+ , children: [ props.sidebar ]

47+ }

48+ , Emotion.element div'

49+ { className: "ry-sidebar__not-sidebar"

50+ , css: Style.notSidebar props

51+ , children: props.children

52+ }

4253 ]

43− ]

4454 }

src/Yoga/Block/Layout/Stack/Style.purs+6−3

@@ -2,6 +2,8 @@ module Yoga.Block.Layout.Stack.Style where

22

33import Yoga.Prelude.Style

44

5+import Data.Interpolate (i)

6+

57type Props ∷ forall k. (Type -> k) -> Row k -> Row k

68type Props f r =

79 ( css ∷ f Style

@@ -14,10 +16,9 @@ stack ∷ ∀ p. { | Props OptionalProp p } -> Style

1416stack props = splitStyles <> styles <>? props.css

1517 where

1618 styles =

17− flex <>

19+ flexCol <>

1820 css

1921 { margin: _0

20− , flexDirection: column

2122 , justifyContent: flexStart

2223 , "& > *":

2324 nest

@@ -38,6 +39,8 @@ stack props = splitStyles <> styles <>? props.css

3839 { "&:only-child": nest { height: 100.0 # percent }

3940 }

4041

41− nthChild n = "& > div:nth-of-type(" <> show n <> ")"

42+ -- This is really n-th child, but emotion has trouble with it so we hack it as per

43+ -- https://github.com/emotion-js/emotion/issues/1105#issuecomment-1126025608

44+ nthChild n = i "& > :nth-of-type(" n "):not(style):not(:nth-of-type(" n ") ~ *), & > style + *"

4245

4346 nthChildStyle n = (nthChild n) ~: { marginBottom: auto }

src/Yoga/Block/Layout/Stack/View.purs+1−2

@@ -35,10 +35,9 @@ rawComponent =

3535 let safeChildren = reactChildrenToArray (unsafeCoerce props.children)

3636 -- Wrapping children to use `:nth-of-type` instead of `:nth-child`

3737 -- in CSS because the latter is problematic in SSR

38− let wrappedChildren = safeChildren <#> \c -> div </ {} /> [ c ]

3938 pure

4039 $ emotionDiv ref props

4140 { className: "ry-stack " <>? props.className

4241 , css: Style.stack props

43− , children: wrappedChildren

42+ , children: safeChildren

4443 }

src/Yoga/Block/Layout/Switcher.purs+1−1

@@ -2,4 +2,4 @@ module Yoga.Block.Layout.Switcher

22 ( module Yoga.Block.Layout.Switcher.View

33 ) where

44

5−import Yoga.Block.Layout.Switcher.View (component, Props)

5+import Yoga.Block.Layout.Switcher.View (component, Props, PropsNoChildren)

src/Yoga/Block/Layout/Switcher/Style.purs+21−24

@@ -9,6 +9,7 @@ type Props ∷ ∀ k. (Type → k) → Row k → Row k

99type Props f r =

1010 ( css ∷ f Style

1111 , space ∷ f String

12+ , rowGap ∷ f String

1213 , threshold ∷ f String

1314 , limit ∷ f Int

1415 | r

@@ -19,36 +20,32 @@ switcher props = styles <>? props.css

1920 where

2021 limit = props.limit ?|| 4

2122 space = (props.space <#> \s → if s == "0" then "0px" else s) ?|| "var(--s1)"

23+ rowGap = props.rowGap ?|| space

2224 threshold = props.threshold ?|| "60ch"

2325

2426 lastKey ∷ String

2527 lastKey =

26− "" -- this is for readability

27−

28− <> i "& > * > :nth-last-child(n+" (limit + 1) "), "

29− <> i "& > * > :nth-last-child(n+" (limit + 1) ") ~ *"

28+ i "& > * > :nth-last-child(n+" (limit + 1) "), "

29+ ("& > * > :nth-last-child(n+")

30+ (limit + 1)

31+ ") ~ *"

3032

3133 nthLastChild ∷ Style

32− nthLastChild =

33− unsafeCoerce

34− (Object.singleton lastKey { flexBasis: _100percent })

34+ nthLastChild = unsafeCoerce $

35+ Object.singleton lastKey

36+ { flexBasis: _100percent }

3537

3638 styles ∷ Style

3739 styles =

38− nthLastChild

39− <> css

40− { "& > *":

41− nested

42− $ flex

43− <> css

44− { flexWrap: wrap

45− , margin: i "calc((" space " / 2) * -1)" # str

46− }

47− , "& > * > *":

48− nest

49− { flexGrow: str "1"

50− , flexBasis:

51− i "calc((" threshold " - (100% - " space ")) * 999)" # str

52− , margin: "calc(" <> space <> " / 2)" # str

53− }

54− }

40+ css

41+ { display: str "flex"

42+ , flexWrap: str "wrap"

43+ , gap: str space

44+ , rowGap: str rowGap

45+ , "--threshold": str threshold

46+ , "& > *": nested $ css

47+ { flexGrow: int 1

48+ , flexBasis: str "calc((var(--threshold) - 100%) * 999)"

49+ }

50+ }

51+ <> nthLastChild

src/Yoga/Block/Layout/Switcher/View.purs+12−6

@@ -1,19 +1,25 @@

1−module Yoga.Block.Layout.Switcher.View (component, Props, PropsF) where

1+module Yoga.Block.Layout.Switcher.View (component, Props, PropsNoChildren, PropsF) where

22

33import Yoga.Prelude.View

4+

45import React.Basic.DOM as R

6+import Yoga.Block.Internal (DivPropsNoChildrenF)

57import Yoga.Block.Layout.Switcher.Style as Style

68

7−type PropsF f =

9+type PropsF :: forall k. (Type -> k) -> Row k -> Row k

10+type PropsF f r =

811 ( className ∷ f String

9− | Style.Props f DivProps

12+ | Style.Props f r

1013 )

1114

15+type PropsNoChildren =

16+ PropsF Id (DivPropsNoChildrenF Id ())

17+

1218type Props =

13− PropsF Id

19+ PropsF Id (DivPropsF Id ())

1420

1521type PropsOptional =

16− PropsF OptionalProp

22+ PropsF OptionalProp (DivProps)

1723

1824component ∷ ∀ p p_. Union p p_ Props => ReactComponent { | p }

1925component = rawComponent

@@ -26,5 +32,5 @@ rawComponent =

2632 $ emotionDiv ref props

2733 { className: "ry-switcher " <>? props.className

2834 , css: Style.switcher props

29− , children: [ R.div_ props.children ]

35+ , children: props.children

3036 }

stories/Story/Yoga/Block/Layout.purs+45−10

@@ -5,12 +5,14 @@ module Story.Yoga.Block.Atom.Layout

55

66import Yoga.Prelude.Style

77

8+import Fahrtwind as F

89import Fahrtwind as FW

9−import React.Basic (JSX, element)

10+import React.Basic (JSX, element, fragment)

1011import React.Basic.DOM as R

1112import React.Basic.Emotion as E

1213import Storybook (Meta, meta, metaDecorator)

1314import Yoga.Block as Block

15+import Yoga.Block.Atom.Button.Types (ButtonShape(..), ButtonType(..))

1416import Yoga.Block.Container.Style as Styles

1517import Yoga.Block.Layout.Types (AlignItems(..), JustifyContent(..))

1618

@@ -20,7 +22,7 @@ default = meta

2022 , component: mempty

2123 , decorators:

2224 [ metaDecorator \storyFn ->

23− R.div_

25+ fragment

2426 [ element E.global { styles: Styles.global }

2527 , storyFn

2628 ]

@@ -32,22 +34,55 @@ bg = FW.background'

3234colBox co = Block.box { css: FW.roundedDefault <> bg co }

3335

3436layout :: Effect JSX

35−layout = pure $ Block.box { padding: sizeStyle.s, css: bg col.highlight }

37+layout = pure $ Block.box { css: heightFull <> background' col.backgroundBright3 }

3638 [ Block.sidebar

37− { sidebar: colBox col.backgroundLayer2 [ R.text "Sidebar" ]

38− , sideWidth: size."4xl"

39+ { sidebar: Block.stack

40+ { space: sizeStyle.xxs

41+ , splitAfter: 1

42+ }

43+ [ Block.button

44+ { buttonShape: Flat

45+ , css: widthFull

46+ , backgroundCol: col.backgroundLayer4

47+ , hoverBackgroundCol: col.backgroundLayer4

48+ , textCol: str (colour.text)

49+ }

50+ [ Block.box

51+ { css: textLeft <> widthFull

52+ , padding: str "0"

53+ }

54+ [ R.text "Sidebar First" ]

55+ ]

56+ , colBox col.backgroundLayer3 [ R.text "Sidebar Second" ]

57+ ]

58+ , space: "8px"

59+ , sideWidth: size."3xl"

60+ , css: heightFull

3961 }

4062 [ Block.stack

41− { space: sizeStyle.xl

63+ { space: sizeStyle.s

4264 , css: FW.background' col.backgroundLayer1

4365 , splitAfter: 1

4466 }

45− [ Block.cluster { space: size.m, rowSpace: size.s, justifyContent: JEnd, alignItems: ACenter }

46− [ colBox col.backgroundLayer4 [ R.text "Child Row 1 1" ], colBox col.backgroundLayer4 [ R.text "Child Row 1 2" ] ]

67+ [ colBox col.backgroundLayer1

68+ [ Block.cluster { space: size.m, rowSpace: size.s, justifyContent: JEnd, alignItems: ACenter }

69+ [ Block.button

70+ { buttonType: Primary

71+ }

72+ [ R.text "Sign up" ]

73+ , Block.button {} [ R.text "Sign in" ]

74+ ]

75+ ]

4776 , Block.cluster { space: size.s, rowSpace: size.zero }

48− [ colBox col.backgroundLayer4 [ R.text "Child Row 2 1" ], colBox col.backgroundLayer4 [ R.text "Child Row 2 2" ] ]

77+ [ colBox col.backgroundLayer4 [ R.text "Child Row 2 1" ]

78+ , colBox col.backgroundLayer4 [ R.text "Child Row 2 2" ]

79+ ]

80+ , Block.switcher { rowGap: "8px" }

81+ [ colBox col.backgroundLayer4 [ R.text "Switch me up" ]

82+ , colBox col.backgroundLayer4 [ R.text "Switch me too" ]

83+ , colBox col.backgroundLayer4 [ R.text "Switchy" ]

84+ ]

4985 ]

5086 ]

51−

5287 ]

5388