rowtype-yoga/ry-blocks
1
0
Fork 0
mirror of https://github.com/rowtype-yoga/ry-blocks.git synced 2024-09-17 16:27:33 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix toValue in select

Browse Source
This commit is contained in:
Mark Eibes 2023-04-19 16:51:49 +02:00
parent dbba07fafc
commit 2015e4ab6c
127 changed files with 2846 additions and 2193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

179
src/React/Basic/SyntaxHighlighter/Component.purs
View File

@ -46,119 +46,124 @@ mkHighlighterTheme ∷
{ grey ∷ Color
, highlightColour ∷ Color
, textColour ∷ Color
} ->
} →
HighlighterTheme
mkHighlighterTheme theme =
{ hljs:
css
{ display: "inline"
, overflowX: "auto"
, color: Color.cssStringRGBA $ Color.mix HSL (Color.desaturate 0.5 theme.highlightColour) (Color.desaturate 0.3 theme.textColour) 0.4
}
css
{ display: "inline"
, overflowX: "auto"
, color: Color.cssStringRGBA $ Color.mix HSL
(Color.desaturate 0.5 theme.highlightColour)
(Color.desaturate 0.3 theme.textColour)
0.4
}
, "hljs-keyword":
css
{ color: "var(--highlight)"
, fontWeight: "normal"
}
css
{ color: "var(--highlight)"
, fontWeight: "normal"
}
, "hljs-symbol":
css
{ color: Color.cssStringRGBA $ theme.highlightColour
}
css
{ color: Color.cssStringRGBA $ theme.highlightColour
}
, "hljs-type":
css
{ color: Color.cssStringRGBA theme.highlightColour
, fontWeight: "normal"
}
css
{ color: Color.cssStringRGBA theme.highlightColour
, fontWeight: "normal"
}
, "hljs-string":
css
{ color: Color.cssStringRGBA $ theme.highlightColour # Color.rotateHue (-15.0)
}
css
{ color: Color.cssStringRGBA $ theme.highlightColour # Color.rotateHue
(-15.0)
}
, "hljs-title":
css
{ color: Color.cssStringRGBA $ theme.highlightColour # Color.rotateHue 15.0
}
css
{ color: Color.cssStringRGBA $ theme.highlightColour # Color.rotateHue
15.0
}
, "hljs-comment":
css
{ color: Color.cssStringRGBA $ theme.grey
}
css
{ color: Color.cssStringRGBA $ theme.grey
}
, "hljs-selector-tag":
css
{ color: "yellow"
, fontWeight: "bold"
}
css
{ color: "yellow"
, fontWeight: "bold"
}
, "hljs-literal":
css
{ color: "green"
, fontWeight: "bold"
}
css
{ color: "green"
, fontWeight: "bold"
}
, "hljs-section":
css
{ color: "darkslateblue"
, fontWeight: "bold"
}
css
{ color: "darkslateblue"
, fontWeight: "bold"
}
, "hljs-link":
css
{ color: "yellow"
}
css
{ color: "yellow"
}
, "hljs-subst":
css
{ color: "#ddd"
}
css
{ color: "#ddd"
}
, "hljs-name":
css
{ color: "#d88"
, fontWeight: "bold"
}
css
{ color: "#d88"
, fontWeight: "bold"
}
, "hljs-attribute":
css
{ color: "hotpink"
}
css
{ color: "hotpink"
}
, "hljs-bullet":
css
{ color: "#d88"
}
css
{ color: "#d88"
}
, "hljs-built_in":
css
{ color: "#d88"
}
css
{ color: "#d88"
}
, "hljs-addition":
css
{ color: "#d88"
}
css
{ color: "#d88"
}
, "hljs-variable":
css
{ color: "#d88"
}
css
{ color: "#d88"
}
, "hljs-template-tag":
css
{ color: "#d88"
}
css
{ color: "#d88"
}
, "hljs-template-variable":
css
{ color: "#d88"
}
css
{ color: "#d88"
}
, "hljs-quote":
css
{ color: "#777"
}
css
{ color: "#777"
}
, "hljs-deletion":
css
{ color: "#777"
}
css
{ color: "#777"
}
, "hljs-meta":
css
{ color: "#777"
}
css
{ color: "#777"
}
, "hljs-doctag":
css
{ fontWeight: "bold"
}
css
{ fontWeight: "bold"
}
, "hljs-strong":
css
{ fontWeight: "bold"
}
css
{ fontWeight: "bold"
}
, "hljs-emphasis":
css
{ fontStyle: "italic"
}
css
{ fontStyle: "italic"
}
}

54
src/React/Basic/SyntaxHighlighter/Story.purs
View File

@ -11,18 +11,18 @@ import React.Basic.SyntaxHighlighter.Component as SH
import Yoga.Block.Container.Style as Styles
default ∷
{ decorators ∷ Array (Effect JSX -> JSX)
{ decorators ∷ Array (Effect JSX → JSX)
, title ∷ String
}
default =
{ title: "React Syntax Highlighter"
, decorators:
[ \storyFn ->
R.div_
[ element E.global { styles: Styles.global }
, unsafePerformEffect storyFn
]
]
[ \storyFn →
R.div_
[ element E.global { styles: Styles.global }
, unsafePerformEffect storyFn
]
]
}
syntaxHighlighter ∷ Effect JSX
@ -33,42 +33,42 @@ syntaxHighlighter = do
, element SH.syntaxHighlighter
{ language: "purescript"
, style:
mkHighlighterTheme
{ grey: Color.rgb 80 80 80
, highlightColour: Color.rgb 30 220 190
, textColour: Color.rgb 220 220 220
}
mkHighlighterTheme
{ grey: Color.rgb 80 80 80
, highlightColour: Color.rgb 30 220 190
, textColour: Color.rgb 220 220 220
}
, children: exampleCode
}
, R.h2_ [ R.text "Javascript Example" ]
, element SH.syntaxHighlighter
{ language: "javascript"
, style:
mkHighlighterTheme
{ grey: Color.rgb 50 50 50
, highlightColour: Color.rgb 230 20 90
, textColour: Color.rgb 250 250 250
}
mkHighlighterTheme
{ grey: Color.rgb 50 50 50
, highlightColour: Color.rgb 230 20 90
, textColour: Color.rgb 250 250 250
}
, children:
"""undefined is not a function"""
"""undefined is not a function"""
}
, R.h2_ [ R.text "Go Example" ]
, element SH.syntaxHighlighter
{ language: "golang"
, style:
mkHighlighterTheme
{ grey: Color.rgb 50 50 50
, highlightColour: Color.rgb 200 70 190
, textColour: Color.rgb 250 250 250
}
mkHighlighterTheme
{ grey: Color.rgb 50 50 50
, highlightColour: Color.rgb 200 70 190
, textColour: Color.rgb 250 250 250
}
, children:
"""if err != nil { log.Fatalf("hohoho") }"""
"""if err != nil { log.Fatalf("hohoho") }"""
}
]
where
exampleCode ∷ String
exampleCode =
"""module Main where
exampleCode ∷ String
exampleCode =
"""module Main where
import Prelude
import Effect (Effect)
import Effect.Console (log)

70
src/React/DndKit.purs
View File

@ -40,14 +40,14 @@ foreign import closestCorners ∷ CollisionDetection
foreign import data SensorDescriptor ∷ Type
dndContext ∷ ∀ p q. Union p q DndContextProps => ReactComponent { | p }
dndContext ∷ ∀ p q. Union p q DndContextProps ⇒ ReactComponent { | p }
dndContext = dndContextImpl
active ∷ EventFn SyntheticEvent (Maybe Draggable)
active = unsafeEventFn \e -> toMaybe (unsafeCoerce e).active
active = unsafeEventFn \e → toMaybe (unsafeCoerce e).active
over ∷ EventFn SyntheticEvent (Maybe Draggable)
over = unsafeEventFn \e -> toMaybe (unsafeCoerce e).over
over = unsafeEventFn \e → toMaybe (unsafeCoerce e).over
type Draggable =
{ id ∷ String }
@ -61,16 +61,16 @@ type SortableContextProps =
-- | `items` is the sorted array of the unique ids associated to each sortable item
foreign import sortableContextImpl ∷ ∀ props. ReactComponent { | props }
sortableContext ∷ ∀ p q. Union p q SortableContextProps => ReactComponent { | p }
sortableContext ∷ ∀ p q. Union p q SortableContextProps ⇒ ReactComponent { | p }
sortableContext = sortableContextImpl
useSortable ∷ SortableArgs -> Hook (UseSortable SortableArgs) SortableResult
useSortable ∷ SortableArgs → Hook (UseSortable SortableArgs) SortableResult
useSortable args =
map toSortableResult
$ unsafeHook
$ runEffectFn1 useSortableImpl args
foreign import data UseSortable ∷ Type -> Type -> Type
foreign import data UseSortable ∷ Type → Type → Type
foreign import useSortableImpl ∷
EffectFn1
@ -83,16 +83,16 @@ type SortableArgs =
type SortableResultImpl =
{ attributes ∷
{ "aria-describedby" ∷ String
, "aria-pressed" ∷ String
, "aria-roledescription" ∷ String
, role ∷ String
, tabIndex ∷ Int
}
{ "aria-describedby" ∷ String
, "aria-pressed" ∷ String
, "aria-roledescription" ∷ String
, role ∷ String
, tabIndex ∷ Int
}
, listeners ∷
{ onKeyDown ∷ EventHandler
, onPointerDown ∷ EventHandler
}
{ onKeyDown ∷ EventHandler
, onPointerDown ∷ EventHandler
}
, setNodeRef ∷ Ref (Nullable Node)
, transform ∷ Foreign
, transition ∷ Foreign
@ -100,20 +100,20 @@ type SortableResultImpl =
type SortableResult =
{ attributes ∷
{ _aria ∷ Object String
, role ∷ String
, tabIndex ∷ Int
}
{ _aria ∷ Object String
, role ∷ String
, tabIndex ∷ Int
}
, listeners ∷
{ onKeyDown ∷ EventHandler
, onPointerDown ∷ EventHandler
}
{ onKeyDown ∷ EventHandler
, onPointerDown ∷ EventHandler
}
, setNodeRef ∷ Ref (Nullable Node)
, transform ∷ Foreign
, transition ∷ Foreign
}
toSortableResult ∷ SortableResultImpl -> SortableResult
toSortableResult ∷ SortableResultImpl → SortableResult
toSortableResult sri =
Builder.build
( Builder.modify (Proxy ∷ _ "attributes")
@ -123,12 +123,12 @@ toSortableResult sri =
<<< Builder.delete (Proxy ∷ _ "aria-pressed")
<<< Builder.delete (Proxy ∷ _ "aria-roledescription")
<<< Builder.insert (Proxy ∷ _ "_aria")
( Object.fromHomogeneous
{ describedby: sri.attributes."aria-describedby"
, pressed: sri.attributes."aria-pressed"
, roledescription: sri.attributes."aria-roledescription"
}
)
( Object.fromHomogeneous
{ describedby: sri.attributes."aria-describedby"
, pressed: sri.attributes."aria-pressed"
, roledescription: sri.attributes."aria-roledescription"
}
)
)
)
)
@ -146,12 +146,12 @@ foreign import restrictToFirstScrollableAncestor ∷ Modifier
foreign import restrictToWindowEdges ∷ Modifier
arrayMove ∷ ∀ a. Int -> Int -> Array a -> Array a
arrayMove ∷ ∀ a. Int → Int → Array a → Array a
arrayMove source target arr = runFn3 arrayMoveImpl arr source target
foreign import arrayMoveImpl ∷ ∀ a. Fn3 (Array a) Int Int (Array a)
foreign import cssToString ∷ Foreign -> String
foreign import cssToString ∷ Foreign → String
foreign import data Sensor ∷ Type
@ -161,18 +161,18 @@ foreign import keyboardSensor ∷ Sensor
foreign import pointerSensor ∷ Sensor
foreign import data UseSensor ∷ Type -> Type
foreign import data UseSensor ∷ Type → Type
foreign import useSensorImpl ∷ ∀ args. Fn2 Sensor { | args } SensorDescriptor
useSensor ∷ ∀ r. Sensor -> Record r -> SensorDescriptor
useSensor ∷ ∀ r. Sensor → Record r → SensorDescriptor
useSensor sensor args = runFn2 useSensorImpl sensor args
foreign import data UseSensors ∷ Type -> Type
foreign import data UseSensors ∷ Type → Type
foreign import useSensorsImpl ∷ EffectFn1 (Array SensorDescriptor) Sensors
useSensors ∷ ∀ hooks. Array SensorDescriptor -> Hook hooks Sensors
useSensors ∷ ∀ hooks. Array SensorDescriptor → Hook hooks Sensors
useSensors args =
unsafeHook
$ runEffectFn1 useSensorsImpl args

40
src/Web/DOM/ResizeObserver.purs
View File

@ -36,32 +36,32 @@ data ResizeObserverBoxOptions
| ContentBox
| DevicePixelContentBox
optionsToFFI ∷ ResizeObserverBoxOptions -> String
optionsToFFI ∷ ResizeObserverBoxOptions → String
optionsToFFI BorderBox = "border-box"
optionsToFFI ContentBox = "content-box"
optionsToFFI DevicePixelContentBox = "device-pixel-content-box"
foreign import resizeObserver
∷ ( Array ResizeObserverEntry
-> ResizeObserver
-> Effect Unit
)
-> Effect ResizeObserver
foreign import resizeObserver ∷
( Array ResizeObserverEntry →
ResizeObserver →
Effect Unit
) →
Effect ResizeObserver
foreign import _observe ∷ ∀ r. Record r -> ResizeObserver -> Element -> Effect Unit
foreign import _observe ∷ ∀ r. Record r → ResizeObserver → Element → Effect Unit
observe
∷ ResizeObserverBoxOptions
-> ResizeObserver
-> Element
-> Effect Unit
observe ∷
ResizeObserverBoxOptions →
ResizeObserver →
Element →
Effect Unit
observe options = _observe { box: optionsToFFI options }
foreign import unobserve
∷ ResizeObserver
-> Element
-> Effect Unit
foreign import unobserve ∷
ResizeObserver →
Element →
Effect Unit
foreign import disconnect
∷ ResizeObserver
-> Effect Unit
foreign import disconnect ∷
ResizeObserver →
Effect Unit

74
src/Yoga.purs
View File

@ -11,27 +11,27 @@ import Record as Record
import Type.Proxy (Proxy(..))
import Unsafe.Coerce (unsafeCoerce)
div'
∷ ∀ attrs attrs_. Union attrs attrs_ Props_div ⇒ ReactComponent (Record attrs)
div' ∷
∀ attrs attrs_. Union attrs attrs_ Props_div ⇒ ReactComponent (Record attrs)
div' = R.div'
span'
∷ ∀ attrs attrs_. Union attrs attrs_ Props_span ⇒ ReactComponent (Record attrs)
span' ∷
∀ attrs attrs_. Union attrs attrs_ Props_span ⇒ ReactComponent (Record attrs)
span' = R.span'
button'
∷ ∀ attrs attrs_
. Union attrs attrs_ Props_button
⇒ ReactComponent (Record attrs)
button' ∷
∀ attrs attrs_.
Union attrs attrs_ Props_button ⇒
ReactComponent (Record attrs)
button' = R.button'
el
∷ ∀ props
. Lacks "children" props
⇒ ReactComponent { children ∷ Array JSX | props }
→ Record props
→ Array JSX
→ JSX
el ∷
∀ props.
Lacks "children" props ⇒
ReactComponent { children ∷ Array JSX | props } →
Record props →
Array JSX →
JSX
el x props children =
Hooks.element x (Record.insert (Proxy ∷ Proxy "children") children props)
@ -39,39 +39,39 @@ infixl 5 el as </
infixr 0 DF.apply as />
leaf
∷ ∀ props
. Lacks "children" props
⇒ ReactComponent { | props }
→ Record props
→ JSX
leaf ∷
∀ props.
Lacks "children" props ⇒
ReactComponent { | props } →
Record props →
JSX
leaf x props = Hooks.element x props
infixl 5 leaf as </>
styled
∷ ∀ props
. Lacks "children" props
⇒ ReactComponent { children ∷ Array JSX | props }
→ { css ∷ Emotion.Style | props }
→ Array JSX
→ JSX
styled ∷
∀ props.
Lacks "children" props ⇒
ReactComponent { children ∷ Array JSX | props } →
{ css ∷ Emotion.Style | props } →
Array JSX →
JSX
styled x props children =
( unsafeCoerce Emotion.element
∷ ∀ r. ReactComponent { | r } → { css ∷ Emotion.Style | r } → JSX
( unsafeCoerce Emotion.element ∷
∀ r. ReactComponent { | r } → { css ∷ Emotion.Style | r } → JSX
) x
(Record.insert (Proxy ∷ Proxy "children") children props)
infixl 5 styled as </*
styledLeaf
∷ ∀ props
. ReactComponent { | props }
→ { css ∷ Emotion.Style | props }
→ JSX
styledLeaf ∷
∀ props.
ReactComponent { | props } →
{ css ∷ Emotion.Style | props } →
JSX
styledLeaf x =
( unsafeCoerce Emotion.element
∷ ∀ r. ReactComponent { | r } → { css ∷ Emotion.Style | r } → JSX
( unsafeCoerce Emotion.element ∷
∀ r. ReactComponent { | r } → { css ∷ Emotion.Style | r } → JSX
) x
infixl 5 styledLeaf as </*>

2
src/Yoga/Block.purs
View File

@ -142,7 +142,7 @@ icon' = Icon.component
input' ∷ ∀ p q. Union p q Input.Props ⇒ ReactComponent { | p }
input' = Input.component
input ∷ ∀ p q. Union p q Input.Props ⇒ { | p } → JSX
input ∷ ∀ p q. Union p q Input.Props ⇒ { | p } → JSX
input = React.element input'
image ∷ ∀ p q. Union p q Image.Props ⇒ { | p } → JSX

16
src/Yoga/Block/Atom/Button/Types.purs
View File

@ -29,11 +29,11 @@ instance BoundedEnum ButtonType where
fromEnum = genericFromEnum
toEnum = genericToEnum
renderButtonType ∷ ButtonType -> String
renderButtonType ∷ ButtonType → String
renderButtonType = case _ of
Primary -> "primary"
Generic -> "generic"
Dangerous -> "dangerous"
Primary → "primary"
Generic → "generic"
Dangerous → "dangerous"
data ButtonShape
= Rounded
@ -57,8 +57,8 @@ instance BoundedEnum ButtonShape where
fromEnum = genericFromEnum
toEnum = genericToEnum
renderButtonShape ∷ ButtonShape -> String
renderButtonShape ∷ ButtonShape → String
renderButtonShape = case _ of
Rounded -> "rounded"
Pill -> "pill"
Flat -> "flat"
Rounded → "rounded"
Pill → "pill"
Flat → "flat"

26
src/Yoga/Block/Atom/Button/View.purs
View File

@ -19,7 +19,7 @@ import Yoga.Block.Hook.UseDrip (useDrip)
import Yoga.Block.Internal (ButtonWritablePropsNoChildrenF, objectToStyle, toStyleObject)
import Yoga.Block.Quark.Drip.View as Drip
type PropsF :: forall k. (Type -> k) -> Row k -> Row k
type PropsF ∷ ∀ k. (Type → k) → Row k → Row k
type PropsF f r =
( buttonType ∷ f ButtonType
, buttonShape ∷ f ButtonShape
@ -36,30 +36,30 @@ type Props =
type PropsOptional =
PropsF OptionalProp (ButtonReadableProps)
component ∷ ∀ p p_. Union p p_ Props => ReactComponent { | p }
component ∷ ∀ p p_. Union p p_ Props ⇒ ReactComponent { | p }
component = rawComponent
rawComponent ∷ ∀ p. ReactComponent { | p }
rawComponent =
mkForwardRefComponent "Button" do
\(props ∷ { | PropsOptional }) propsRef -> React.do
backupRef <- React.useRef null
\(props ∷ { | PropsOptional }) propsRef → React.do
backupRef ← React.useRef null
let ref = forwardedRefAsMaybe propsRef # fromMaybe backupRef
let buttonType = props.buttonType ?|| Button.Generic
let buttonShape = props.buttonShape ?|| Button.Rounded
let
rippleʔ = props.ripple # opToMaybe # case buttonShape of
Button.Flat -> case buttonType of
Button.Primary ->
Button.Flat → case buttonType of
Button.Primary →
fromMaybe colour.highlightLighter >>> Just
_ -> fromMaybe colour.highlightAlpha50 >>> Just
_ -> identity
dripValues <- useDrip ref
_ → fromMaybe colour.highlightAlpha50 >>> Just
_ → identity
dripValues ← useDrip ref
let propsChildren = unsafeGet "children" props # reactChildrenToArray
let
children = reactChildrenFromArray case rippleʔ of
Nothing -> propsChildren
Just rippleColour -> do
Nothing → propsChildren
Just rippleColour → do
Array.cons
( Drip.component
</>
@ -76,11 +76,11 @@ rawComponent =
let
onClick = case unsafeGet "onClick" props # uorToMaybe of
Just givenHandler -> handler syntheticEvent \e -> do
Just givenHandler → handler syntheticEvent \e → do
void $ runEffectFn1 givenHandler e
void $ runEffectFn1 dripValues.onClick e
Nothing -> dripValues.onClick
Nothing → dripValues.onClick
let
props' = props
# unsafeSet "onClick" onClick

4
src/Yoga/Block/Atom/Icon/Style.purs
View File

@ -3,7 +3,7 @@ module Yoga.Block.Atom.Icon.Style where
import Yoga.Prelude.Style
import Yoga.Block.Container.Style (colour)
type Props ∷ forall k. (Type -> k) -> Row k -> Row k
type Props ∷ ∀ k. (Type → k) → Row k → Row k
type Props f r =
( css ∷ f Style
, colour ∷ f StyleProperty
@ -16,7 +16,7 @@ type Props f r =
| r
)
span ∷ ∀ r. { | Props OptionalProp r } -> Style
span ∷ ∀ r. { | Props OptionalProp r } → Style
span props =
inlineFlex <>
css

21
src/Yoga/Block/Atom/Icon/View.purs
View File

@ -16,17 +16,18 @@ type PropsF f =
| Style.Props f (MandatoryProps ())
)
component ∷ ∀ p p_. Union p p_ Props => ReactComponent { | MandatoryProps p }
component ∷ ∀ p p_. Union p p_ Props ⇒ ReactComponent { | MandatoryProps p }
component = rawComponent
rawComponent ∷ ∀ p. ReactComponent { | p }
rawComponent =
mkForwardRefComponent "Yoga Icon" \(props ∷ { | PropsF OptionalProp }) ref -> React.do
pure
$ span'
</*
{ className: "ry-icon" <>? props.className
, css: Style.span props
, ref
}
/> [ props.icon ]
mkForwardRefComponent "Yoga Icon" \(props ∷ { | PropsF OptionalProp }) ref →
React.do
pure
$ span'
</*
{ className: "ry-icon" <>? props.className
, css: Style.span props
, ref
}
/> [ props.icon ]

4
src/Yoga/Block/Atom/Image/Style.purs
View File

@ -2,11 +2,11 @@ module Yoga.Block.Atom.Image.Style where
import Yoga.Prelude.Style
type Props :: forall k. (Type -> k) -> Row k -> Row k
type Props ∷ ∀ k. (Type → k) → Row k → Row k
type Props f r =
( css ∷ f Style
| r
)
style :: forall r. { | Props OptionalProp r } -> Style
style ∷ ∀ r. { | Props OptionalProp r } → Style
style props = css {} <>? props.css

21
src/Yoga/Block/Atom/Image/Types.purs
View File

@ -29,10 +29,10 @@ derive instance Eq CrossOrigin
derive instance Ord CrossOrigin
derive newtype instance Show CrossOrigin
crossOriginAnonymous :: CrossOrigin
crossOriginAnonymous ∷ CrossOrigin
crossOriginAnonymous = CrossOrigin "anonymous"
crossOriginUseCredentials :: CrossOrigin
crossOriginUseCredentials ∷ CrossOrigin
crossOriginUseCredentials = CrossOrigin "use-credentials"
newtype Decoding = Decoding String
@ -41,10 +41,10 @@ derive instance Eq Decoding
derive instance Ord Decoding
derive newtype instance Show Decoding
decodingSync :: Decoding
decodingSync ∷ Decoding
decodingSync = Decoding "sync"
decodingAsync :: Decoding
decodingAsync ∷ Decoding
decodingAsync = Decoding "async"
newtype Loading = Loading String
@ -53,10 +53,10 @@ derive instance Eq Loading
derive instance Ord Loading
derive newtype instance Show Loading
loadingEager :: Loading
loadingEager ∷ Loading
loadingEager = Loading "eager"
loadingLazy :: Loading
loadingLazy ∷ Loading
loadingLazy = Loading "lazy"
newtype ReferrerPolicy = ReferrerPolicy String
@ -69,7 +69,8 @@ referrerPolicyNoReferrer ∷ ReferrerPolicy
referrerPolicyNoReferrer = ReferrerPolicy "no-referrer"
refererPolicyNoReferrerWhenDowngrade ∷ ReferrerPolicy
refererPolicyNoReferrerWhenDowngrade = ReferrerPolicy "no-referrer-when-downgrade"
refererPolicyNoReferrerWhenDowngrade = ReferrerPolicy
"no-referrer-when-downgrade"
referrerPolicyOrigin ∷ ReferrerPolicy
referrerPolicyOrigin = ReferrerPolicy "origin"
@ -84,13 +85,15 @@ referrerPolicyStrictOrigin ∷ ReferrerPolicy
referrerPolicyStrictOrigin = ReferrerPolicy "strict-origin"
referrerPolicyStrictOriginWhenCrossOrigin ∷ ReferrerPolicy
referrerPolicyStrictOriginWhenCrossOrigin = ReferrerPolicy "strict-origin-when-cross-origin"
referrerPolicyStrictOriginWhenCrossOrigin = ReferrerPolicy
"strict-origin-when-cross-origin"
referrerPolicySameOrigin ∷ ReferrerPolicy
referrerPolicySameOrigin = ReferrerPolicy "same-origin"
referrerPolicySameOriginWhenCrossOrigin ∷ ReferrerPolicy
referrerPolicySameOriginWhenCrossOrigin = ReferrerPolicy "same-origin-when-cross-origin"
referrerPolicySameOriginWhenCrossOrigin = ReferrerPolicy
"same-origin-when-cross-origin"
referrerPolicyNever ∷ ReferrerPolicy
referrerPolicyNever = ReferrerPolicy "never"

4
src/Yoga/Block/Atom/Input/Hook/UseTypingPlaceholders.purs
View File

@ -27,8 +27,8 @@ newtype UseTypingPlaceholders hooks = UseTypingPlaceholders
derive instance Newtype (UseTypingPlaceholders hooks) _
useTypingPlaceholders
∷ String → Array String → Hook UseTypingPlaceholders NodeRef
useTypingPlaceholders ∷
String → Array String → Hook UseTypingPlaceholders NodeRef
useTypingPlaceholders defaultPlaceholder otherPlaceholders = coerceHook React.do
let placeholders = NEA.cons' defaultPlaceholder otherPlaceholders
inputRef ← React.useRef Nullable.null

128
src/Yoga/Block/Atom/Input/Story.purs
View File

@ -24,14 +24,14 @@ import Yoga.Block.Atom.Input.View (passwordIcon)
import Yoga.Block.Container.Style (colour)
import Yoga.Block.Container.Style as Styles
default
∷ { decorators ∷ Array (Effect JSX -> JSX)
, title ∷ String
}
default ∷
{ decorators ∷ Array (Effect JSX → JSX)
, title ∷ String
}
default =
{ title: "Atom/Input"
, decorators:
[ \storyFn ->
[ \storyFn →
R.div_
[ element E.global { styles: Styles.global }
, unsafePerformEffect storyFn
@ -47,16 +47,36 @@ input = do
[ R.h1_ [ R.text "Input Examples" ]
, R.h3_ [ R.text "With a label" ]
, Block.cluster {}
[ element Input.component { label: nes (Proxy ∷ _ "This has a label"), value: "And text", onChange: handler_ mempty }
, element Input.component { label: nes (Proxy ∷ _ "This z` gggj"), value: "", onChange: handler_ mempty }
, element Input.component { label: nes (Proxy ∷ _ "This has a label"), placeholder: "A j very g long y placeholder, too..." }
, element Input.component { label: nes (Proxy ∷ _ "Pig nose"), leading: R.text "🐽🤣" }
, element Input.component { label: nes (Proxy ∷ _ "Pig nose"), trailing: R.text "🤫" }
, element Input.component { label: nes (Proxy ∷ _ "Pig nose"), leading: R.text "🌭" }
, element Input.component { sizeVariant: SizeSmall, label: nes (Proxy ∷ _ "Small") }
, element Input.component { sizeVariant: SizeTiny, label: nes (Proxy ∷ _ "Tiny") }
, element Input.component { sizeVariant: SizeSmall, placeholder: "Small without label" }
, element Input.component { sizeVariant: SizeTiny, placeholder: "Tiny without label" }
[ element Input.component
{ label: nes (Proxy ∷ _ "This has a label")
, value: "And text"
, onChange: handler_ mempty
}
, element Input.component
{ label: nes (Proxy ∷ _ "This z` gggj")
, value: ""
, onChange: handler_ mempty
}
, element Input.component
{ label: nes (Proxy ∷ _ "This has a label")
, placeholder: "A j very g long y placeholder, too..."
}
, element Input.component
{ label: nes (Proxy ∷ _ "Pig nose"), leading: R.text "🐽🤣" }
, element Input.component
{ label: nes (Proxy ∷ _ "Pig nose"), trailing: R.text "🤫" }
, element Input.component
{ label: nes (Proxy ∷ _ "Pig nose"), leading: R.text "🌭" }
, element Input.component
{ sizeVariant: SizeSmall, label: nes (Proxy ∷ _ "Small") }
, element Input.component
{ sizeVariant: SizeTiny, label: nes (Proxy ∷ _ "Tiny") }
, element Input.component
{ sizeVariant: SizeSmall
, placeholder: "Small without label"
}
, element Input.component
{ sizeVariant: SizeTiny, placeholder: "Tiny without label" }
, Block.box
{ background: colour.backgroundLayer3
}
@ -77,13 +97,30 @@ input = do
, leading: R.text "🌭"
}
]
, element Input.component { label: nes (Proxy ∷ _ "Pig nose"), leading: R.text "⭐", trailing: R.text "🔮" }
, element Input.component
{ label: nes (Proxy ∷ _ "Pig nose")
, leading: R.text "⭐"
, trailing: R.text "🔮"
}
]
, R.h2_ [ R.text "Generic Input" ]
, Input.component </> { value: "A Generic Input", onChange: handler_ mempty }
, Input.component </>
{ value: "A Generic Input", onChange: handler_ mempty }
, R.h2_ [ R.text "Validation on text Input" ]
, element Input.component { type: HTMLInput.Text, label: nes (Proxy ∷ _ "Is undefined a function?"), value: "Yes, why not?", onChange: handler_ mempty, _aria: Object.singleton "invalid" "true" }
, element Input.component { type: HTMLInput.Text, label: nes (Proxy ∷ _ "What's the type of null?"), value: "object", onChange: handler_ mempty, _aria: Object.singleton "invalid" "false" }
, element Input.component
{ type: HTMLInput.Text
, label: nes (Proxy ∷ _ "Is undefined a function?")
, value: "Yes, why not?"
, onChange: handler_ mempty
, _aria: Object.singleton "invalid" "true"
}
, element Input.component
{ type: HTMLInput.Text
, label: nes (Proxy ∷ _ "What's the type of null?")
, value: "object"
, onChange: handler_ mempty
, _aria: Object.singleton "invalid" "false"
}
, R.h2_ [ R.text "Required fields" ]
, element Input.component
{ type: HTMLInput.Text
@ -95,21 +132,49 @@ input = do
{ type: HTMLInput.Text
, label: nes (Proxy ∷ _ "Is undefined really a function?")
}
, Input.component </> { type: HTMLInput.Text, label: nes (Proxy ∷ _ "Now this is really just excessively long and you should avoid it.") }
, Input.component </>
{ type: HTMLInput.Text
, label: nes
( Proxy ∷
_
"Now this is really just excessively long and you should avoid it."
)
}
, Input.component
</>
{ css: E.css { width: E.str "500px" }
, type: HTMLInput.Text
, label: nes (Proxy ∷ _ "You can avoid this problem by setting a custom width")
, label: nes
( Proxy ∷
_
"You can avoid this problem by setting a custom width"
)
}
, R.h2_ [ R.text "Password" ]
, passComponent </> {}
, R.h2_ [ R.text "Text Input" ]
, element Input.component { type: HTMLInput.Text, value: "Some text", onChange: handler_ mempty }
, element Input.component { type: HTMLInput.Text, placeholder: "Placeholder", onChange: handler_ mempty }
, element Input.component { type: HTMLInput.Text, value: "", label: NonEmptyString "Heinzi", onChange: handler_ mempty }
, element Input.component
{ type: HTMLInput.Text
, value: "Some text"
, onChange: handler_ mempty
}
, element Input.component
{ type: HTMLInput.Text
, placeholder: "Placeholder"
, onChange: handler_ mempty
}
, element Input.component
{ type: HTMLInput.Text
, value: ""
, label: NonEmptyString "Heinzi"
, onChange: handler_ mempty
}
, R.h2_ [ R.text "Search Input" ]
, element Input.component { type: HTMLInput.Search, placeholder: "Search...", onChange: handler_ mempty }
, element Input.component
{ type: HTMLInput.Search
, placeholder: "Search..."
, onChange: handler_ mempty
}
-- , element Input.component { type: "submit" }
-- , R.h2_ [ R.text "Radio" ]
-- , element Input.component { type: "radio" }
@ -127,14 +192,17 @@ input = do
passComponent =
unsafePerformEffect
$ reactComponent "Password Example" do
\{} -> React.do
password /\ setPassword <- React.useState' ""
hidePassword /\ modifyHidePassword <- React.useState true
\{} → React.do
password /\ setPassword ← React.useState' ""
hidePassword /\ modifyHidePassword ← React.useState true
pure
$ Input.component
</>
{ type: if hidePassword then HTMLInput.Password else HTMLInput.Text
, trailing: passwordIcon </> { hidePassword, modifyHidePassword }
{ type:
if hidePassword then HTMLInput.Password
else HTMLInput.Text
, trailing: passwordIcon </>
{ hidePassword, modifyHidePassword }
, value: password
, onChange: handler targetValue (traverse_ setPassword)
, label: nes (Proxy ∷ _ "Password")

44
src/Yoga/Block/Atom/Input/Types.purs
View File

@ -29,26 +29,26 @@ data HTMLInputType
derive instance eqHTMLInput ∷ Eq HTMLInputType
toString ∷ HTMLInputType -> String
toString ∷ HTMLInputType → String
toString = case _ of
Checkbox -> "checkbox"
Color -> "color"
Date -> "date"
DatetimeLocal -> "datetime-local"
Email -> "email"
File -> "file"
Hidden -> "hidden"
Image -> "image"
Month -> "month"
Number -> "number"
Password -> "password"
Radio -> "radio"
Range -> "range"
Reset -> "reset"
Search -> "search"
Submit -> "submit"
Tel -> "tel"
Text -> "text"
Time -> "time"
Url -> "url"
Week -> "week"
Checkbox → "checkbox"
Color → "color"
Date → "date"
DatetimeLocal → "datetime-local"
Email → "email"
File → "file"
Hidden → "hidden"
Image → "image"
Month → "month"
Number → "number"
Password → "password"
Radio → "radio"
Range → "range"
Reset → "reset"
Search → "search"
Submit → "submit"
Tel → "tel"
Text → "text"
Time → "time"
Url → "url"
Week → "week"

83
src/Yoga/Block/Atom/Input/View.purs
View File

@ -24,7 +24,7 @@ import Yoga.Block.Atom.Input.View.Label as Label
import Yoga.Block.Container.Style (colour)
import Yoga.Block.Icon.SVG as SVGIcon
type PropsF ∷ ∀ k. (Type -> k) -> Row k -> Row k
type PropsF ∷ ∀ k. (Type → k) → Row k → Row k
type PropsF f r =
( leading ∷ f JSX
, trailing ∷ f JSX
@ -41,10 +41,10 @@ type Props =
type PropsOptional =
PropsF OptionalProp (InputReadableProps)
component ∷ ∀ p q. Union p q Props => ReactComponent { | p }
component ∷ ∀ p q. Union p q Props ⇒ ReactComponent { | p }
component = rawComponent
mkLeftIcon ∷ JSX -> JSX
mkLeftIcon ∷ JSX → JSX
mkLeftIcon icon =
div'
</*
@ -56,28 +56,29 @@ mkLeftIcon icon =
rawComponent ∷ ∀ p. ReactComponent (Record p)
rawComponent =
mkForwardRefComponent "YogaInput" do
\(props ∷ { | PropsOptional }) propsRef -> React.do
backupId <- useId
hasFocus /\ setHasFocus <- useState' false
inputBackupRef ∷ NodeRef <- useRef null
\(props ∷ { | PropsOptional }) propsRef → React.do
backupId ← useId
hasFocus /\ setHasFocus ← useState' false
inputBackupRef ∷ NodeRef ← useRef null
let inputRef = props.inputRef ?|| inputBackupRef
backupRef ∷ NodeRef <- useRef null
backupRef ∷ NodeRef ← useRef null
let ref = forwardedRefAsMaybe propsRef # fromMaybe backupRef
let
maybeValue ∷ Maybe String
maybeValue = props.value # opToMaybe
internalValue /\ setValue <- useState' ""
internalValue /\ setValue ← useState' ""
let
hasValue = case maybeValue of
Just v -> v /= ""
Nothing -> internalValue /= ""
Just v → v /= ""
Nothing → internalValue /= ""
aria ∷ Object String
aria = props._aria # opToMaybe # fold
labelId ∷ String
labelId = props.id ?|| backupId # (_ <> "-label")
renderSmallLabel = isTruthy props.forceSmallLabel || hasFocus || hasValue
renderSmallLabel = isTruthy props.forceSmallLabel || hasFocus ||
hasValue
renderLargeLabel ∷ Boolean
renderLargeLabel = not renderSmallLabel
@ -85,7 +86,7 @@ rawComponent =
maybeLabelText ∷ Maybe NonEmptyString
maybeLabelText = props.label # opToMaybe
mkLabel ∷ NonEmptyString -> JSX
mkLabel ∷ NonEmptyString → JSX
mkLabel labelText =
Label.component
</>
@ -117,15 +118,15 @@ rawComponent =
maybePlaceholder ∷ Maybe String
maybePlaceholder = do
given <- props.placeholder # opToMaybe
given ← props.placeholder # opToMaybe
if isJust maybeLabelText && hasFocus then Just given else Nothing
onBlur = handler_ do
when hasFocus $ setHasFocus false
el <- getHTMLElementFromRef ref
el ← getHTMLElementFromRef ref
let inputEl = InputElement.fromHTMLElement =<< el
for_ inputEl \ie -> do
v <- InputElement.value ie
for_ inputEl \ie → do
v ← InputElement.value ie
setValue v
onFocus = handler_ (unless hasFocus $ setHasFocus true)
@ -148,7 +149,12 @@ rawComponent =
theInput =
HTMLInput.componentOptional
</>
( ( (cast ∷ _ -> { | HTMLInput.PropsF OptionalProp (InputWritablePropsF OptionalProp ()) })
( ( ( cast ∷
_ →
{ | HTMLInput.PropsF OptionalProp
(InputWritablePropsF OptionalProp ())
}
)
( ( inputProps
# RB.build
( RB.delete (Proxy ∷ _ "leading")
@ -166,7 +172,8 @@ rawComponent =
Container.rawContainer
</
{ hasFocus: hasFocus
, isInvalid: aria # Object.lookup "invalid" <#> (_ == "true") # maybeToOp
, isInvalid: aria # Object.lookup "invalid" <#> (_ == "true") #
maybeToOp
, css: props.css
, background: props.background
, borderColour: props.borderColour
@ -176,29 +183,29 @@ rawComponent =
, sizeVariant: props.sizeVariant
}
/>
[ leading # foldMap \l -> div' </ {} /> [ l ]
[ leading # foldMap \l → div' </ {} /> [ l ]
, theInput
, trailing # foldMap \t -> div' </ {} /> [ t ]
, trailing # foldMap \t → div' </ {} /> [ t ]
]
pure
$ case maybeLabelText of
Nothing -> inputContainer
Just labelText ->
Nothing → inputContainer
Just labelText →
div "ry-label-and-input-wrapper"
(Style.labelAndInputWrapper <>? props.css)
[ inputContainer, mkLabel labelText ]
passwordIcon
∷ ReactComponent
{ hidePassword ∷ Boolean
, modifyHidePassword ∷ (Boolean -> Boolean) -> Effect Unit
}
passwordIcon ∷
ReactComponent
{ hidePassword ∷ Boolean
, modifyHidePassword ∷ (Boolean → Boolean) → Effect Unit
}
passwordIcon =
unsafePerformEffect
$ reactComponent "Password Icon" \props -> React.do
$ reactComponent "Password Icon" \props → React.do
pure $ div'
</*
{ onClick: handler preventDefault \_ -> props.modifyHidePassword not
{ onClick: handler preventDefault \_ → props.modifyHidePassword not
, className: "ry-input-right-icon-container"
, css: Style.rightIconContainer
}
@ -215,7 +222,13 @@ passwordIcon =
, initial: M.initial $ css { scaleY: 0.2 }
, animate: M.animate $ css { scaleY: 1.0 }
, exit: M.exit $ css {}
, transition: M.transition { scaleY: { type: "spring", duration: 0.12, bounce: 0.00 } }
, transition: M.transition
{ scaleY:
{ type: "spring"
, duration: 0.12
, bounce: 0.00
}
}
}
/>
[ Icon.component
@ -231,7 +244,13 @@ passwordIcon =
, initial: M.initial $ css { scaleY: 1.0 }
, animate: M.animate $ css { scaleY: 0.4 }
, exit: M.exit $ css { scaleY: 0.2 }
, transition: M.transition { scaleY: { type: "spring", duration: 0.12, bounce: 0.00 } }
, transition: M.transition
{ scaleY:
{ type: "spring"
, duration: 0.12
, bounce: 0.00
}
}
}
/>
[ Icon.component

17
src/Yoga/Block/Atom/Input/View/HTMLInput.purs
View File

@ -12,7 +12,7 @@ import Yoga.Block.Atom.Input.Style as Style
import Yoga.Block.Atom.Input.Types (HTMLInputType)
import Yoga.Block.Atom.Input.Types as HTMLInput
type PropsF :: forall k. (Type -> k) -> Row k -> Row k
type PropsF ∷ ∀ k. (Type → k) → Row k → Row k
type PropsF f r =
( type ∷ f HTMLInputType
| Style.Props f r
@ -24,18 +24,23 @@ type Props =
type PropsOptional =
PropsF OptionalProp (InputReadableProps)
component ∷ ∀ p q. Union p q Props => ReactComponent { | p }
component ∷ ∀ p q. Union p q Props ⇒ ReactComponent { | p }
component = rawComponent
componentOptional ∷ ∀ p q. Union p q (PropsF OptionalProp (InputWritablePropsF OptionalProp ())) => ReactComponent { | p }
componentOptional ∷
∀ p q.
Union p q (PropsF OptionalProp (InputWritablePropsF OptionalProp ())) ⇒
ReactComponent { | p }
componentOptional = rawComponent
rawComponent ∷ ∀ p. ReactComponent { | p }
rawComponent =
mkForwardRefComponent "Input" do
\(props ∷ { | PropsOptional }) ref -> React.do
\(props ∷ { | PropsOptional }) ref → React.do
let
inputWrapper = div' </* { className: "ry-input-wrapper", css: Style.inputWrapper }
input = emotionInput ref inputProps { className: "ry-input", css: Style.input props }
inputWrapper = div' </*
{ className: "ry-input-wrapper", css: Style.inputWrapper }
input = emotionInput ref inputProps
{ className: "ry-input", css: Style.input props }
inputProps = props { type = HTMLInput.toString <$> props.type }
pure do inputWrapper [ input ]

2
src/Yoga/Block/Atom/PopOver.purs
View File

@ -1,4 +1,2 @@
module Yoga.Block.Atom.PopOver where

14
src/Yoga/Block/Atom/Range/Story.purs
View File

@ -11,18 +11,18 @@ import React.Basic.DOM as R
import React.Basic.Emotion as E
default ∷
{ decorators ∷ Array (Effect JSX -> JSX)
{ decorators ∷ Array (Effect JSX → JSX)
, title ∷ String
}
default =
{ title: "Atom/Range"
, decorators:
[ \storyFn ->
R.div_
[ element E.global { styles: Styles.global }
, unsafePerformEffect storyFn
]
]
[ \storyFn →
R.div_
[ element E.global { styles: Styles.global }
, unsafePerformEffect storyFn
]
]
}
range ∷ Effect JSX

34
src/Yoga/Block/Atom/Segmented/Story.purs
View File

@ -14,33 +14,33 @@ import Yoga.Block.Atom.Segmented as Segmented
import Yoga.Block.Container.Style as Styles
default ∷
{ decorators ∷ Array (Effect JSX -> JSX)
{ decorators ∷ Array (Effect JSX → JSX)
, title ∷ String
}
default =
{ title: "Atom/Segmented"
, decorators:
[ \storyFn ->
R.div_
[ element E.global { styles: Styles.global }
, unsafePerformEffect storyFn
]
]
[ \storyFn →
R.div_
[ element E.global { styles: Styles.global }
, unsafePerformEffect storyFn
]
]
}
segmented ∷ Effect JSX
segmented = do
demoComponent <- makeDemoComponent
demoComponent ← makeDemoComponent
pure $ element demoComponent {}
where
makeDemoComponent =
reactComponent "Segmented Demo" \{} -> React.do
activeIndex /\ setElementIndex <- useState' 2
pure
$ element Segmented.component
{ activeIndex
, updateActiveItem: const setElementIndex
, buttonContents:
makeDemoComponent =
reactComponent "Segmented Demo" \{} → React.do
activeIndex /\ setElementIndex ← useState' 2
pure
$ element Segmented.component
{ activeIndex
, updateActiveItem: const setElementIndex
, buttonContents:
twoOrMore
{ id: "gag", value: "2" }
{ id: "nag", value: "1" }
@ -48,4 +48,4 @@ segmented = do
, { id: "four", value: "2" }
, { id: "one", value: "1" }
]
}
}

6
src/Yoga/Block/Atom/Segmented/Style.purs
View File

@ -4,7 +4,7 @@ import Yoga.Prelude.Style
import Data.Interpolate (i)
import Yoga.Block.Container.Style (colour)
type Props :: forall k. (Type -> k) -> Row k -> Row k
type Props ∷ ∀ k. (Type → k) → Row k → Row k
type Props f r =
( css ∷ f Style
| r
@ -65,7 +65,7 @@ activeElement =
, zIndex: str "3"
}
button ∷ { isFirst ∷ Boolean, isLast ∷ Boolean } -> Style
button ∷ { isFirst ∷ Boolean, isLast ∷ Boolean } → Style
button _ =
css
{ background: color transparent
@ -89,7 +89,7 @@ button _ =
, userSelect: none
}
buttonContent ∷ { isFirst ∷ Boolean, isLast ∷ Boolean } -> Style
buttonContent ∷ { isFirst ∷ Boolean, isLast ∷ Boolean } → Style
buttonContent { isFirst, isLast } =
flex <>
css

229
src/Yoga/Block/Atom/Segmented/View.purs
View File

@ -29,135 +29,140 @@ import Yoga.Block.Hook.UseWindowResize (useWindowResize)
type Props =
{ buttonContents ∷ TwoOrMore Item
, activeIndex ∷ Int
, updateActiveItem ∷ Item -> Int -> Effect Unit
, updateActiveItem ∷ Item → Int → Effect Unit
}
component ∷ ReactComponent Props
component =
unsafePerformEffect
$ reactComponent "Segmented" \({ buttonContents, activeIndex, updateActiveItem } ∷ Props) -> React.do
-------------------------------------------
-- Store button refs for animation purposes
itemRefs /\ setItemRefs ∷ Maybe (TwoOrMore _) /\ _ <- useState' Nothing
useLayoutEffectOnce do
refs <- traverse (const createRef) buttonContents
setItemRefs (Just refs)
mempty
windowSize /\ setWindowSize <- useState' zero
-------------------------------------------
-- Support keyboard input
let
maxIndex = TwoOrMore.length buttonContents - 1
updateIndex idx = do
let
newItem = fromMaybe'
(\_ -> TwoOrMore.head buttonContents)
(buttonContents TwoOrMore.!! idx)
updateActiveItem newItem idx
updateTo toIndex = do
for_ itemRefs do blurAtIndex activeIndex
updateIndex toIndex
for_ itemRefs do focusAtIndex toIndex
useKeyDown $ \_ _ -> case _ of
Key.Right ->
when (activeIndex < maxIndex) do
updateTo (activeIndex + 1)
Key.Left ->
when (activeIndex > 0) do
updateTo (activeIndex - 1)
Key.End -> updateTo maxIndex
Key.Home -> updateTo 0
_ -> pure unit
-------------------------------------------
-- Ensure redraw on window resize
newWindowSize <- useWindowResize
useAff newWindowSize do
let δw = abs (newWindowSize.innerWidth - windowSize.innerWidth)
let δh = abs (newWindowSize.innerHeight - windowSize.innerHeight)
delay
if δw < 10.0 || δh < 10.0 then
100.0 # Milliseconds
else
10.0 # Milliseconds
liftEffect do -- force rerender
refs <- traverse (const createRef) buttonContents
$ reactComponent "Segmented"
\({ buttonContents, activeIndex, updateActiveItem } ∷ Props) → React.do
-------------------------------------------
-- Store button refs for animation purposes
itemRefs /\ setItemRefs ∷ Maybe (TwoOrMore _) /\ _ ← useState' Nothing
useLayoutEffectOnce do
refs ← traverse (const createRef) buttonContents
setItemRefs (Just refs)
setWindowSize windowSize
let
children ∷ Array JSX
children = refsAndContents <#> mapWithIndex contentToChild # maybe mempty TwoOrMore.toArray
mempty
windowSize /\ setWindowSize ← useState' zero
-------------------------------------------
-- Support keyboard input
let
maxIndex = TwoOrMore.length buttonContents - 1
updateIndex idx = do
let
newItem = fromMaybe'
(\_ → TwoOrMore.head buttonContents)
(buttonContents TwoOrMore.!! idx)
updateActiveItem newItem idx
refsAndContents ∷ Maybe (TwoOrMore (Item /\ Ref (Nullable Node)))
refsAndContents = TwoOrMore.zip buttonContents <$> itemRefs
updateTo toIndex = do
for_ itemRefs do blurAtIndex activeIndex
updateIndex toIndex
for_ itemRefs do focusAtIndex toIndex
useKeyDown $ \_ _ → case _ of
Key.Right →
when (activeIndex < maxIndex) do
updateTo (activeIndex + 1)
Key.Left →
when (activeIndex > 0) do
updateTo (activeIndex - 1)
Key.End → updateTo maxIndex
Key.Home → updateTo 0
_ → pure unit
-------------------------------------------
-- Ensure redraw on window resize
newWindowSize ← useWindowResize
useAff newWindowSize do
let δw = abs (newWindowSize.innerWidth - windowSize.innerWidth)
let δh = abs (newWindowSize.innerHeight - windowSize.innerHeight)
delay
if δw < 10.0 || δh < 10.0 then
100.0 # Milliseconds
else
10.0 # Milliseconds
liftEffect do -- force rerender
refs ← traverse (const createRef) buttonContents
setItemRefs (Just refs)
setWindowSize windowSize
let
children ∷ Array JSX
children = refsAndContents <#> mapWithIndex contentToChild # maybe
mempty
TwoOrMore.toArray
contentToChild ∷ Int -> (Item /\ Ref (Nullable Node)) -> JSX
contentToChild idx ({ id, value } /\ ref) = do
let isLast = idx + 1 == TwoOrMore.length buttonContents
let isFirst = idx == 0
button'
</*
{ key: show idx
, ref
, css: Style.button { isFirst, isLast }
, className: "ry-segmented-button"
, style: css { pointerEvents: if idx == activeIndex then "none" else "" }
, onClick: handler_ (updateIndex idx)
, role: "tab"
, tabIndex: if idx == activeIndex then 0 else -1
, id
, _aria:
Object.fromHomogeneous
{ selected: show (idx == activeIndex)
refsAndContents ∷ Maybe (TwoOrMore (Item /\ Ref (Nullable Node)))
refsAndContents = TwoOrMore.zip buttonContents <$> itemRefs
contentToChild ∷ Int → (Item /\ Ref (Nullable Node)) → JSX
contentToChild idx ({ id, value } /\ ref) = do
let isLast = idx + 1 == TwoOrMore.length buttonContents
let isFirst = idx == 0
button'
</*
{ key: show idx
, ref
, css: Style.button { isFirst, isLast }
, className: "ry-segmented-button"
, style: css
{ pointerEvents: if idx == activeIndex then "none" else ""
}
}
/>
[ span'
</*
{ className: "ry-segmented-button__content"
, css: Style.buttonContent { isFirst, isLast }
, tabIndex: if idx == activeIndex then 0 else -1
, onClick: handler_ (updateIndex idx)
, role: "tab"
, tabIndex: if idx == activeIndex then 0 else -1
, id
, _aria:
Object.fromHomogeneous
{ selected: show (idx == activeIndex)
}
}
/>
[ span'
</*
{ className: "ry-segmented-button__content"
, css: Style.buttonContent { isFirst, isLast }
, tabIndex: if idx == activeIndex then 0 else -1
}
/>
[ R.text value
]
]
pure
$ E.element R.div'
$
{ css: Style.cluster
, className: "ry-segmented-container"
, children:
[ E.element R.div'
{ className: "ry-segmented"
, css: Style.segmented
, role: "tablist"
, children:
itemRefs
# foldMap \activeItemRefs →
React.element ActiveIndicator.component
{ activeItemRefs
, activeItemIndex: activeIndex
, buttonContents
, updateActiveItem
, windowSize
}
A.: children
}
/>
[ R.text value
]
]
pure
$ E.element R.div'
$
{ css: Style.cluster
, className: "ry-segmented-container"
, children:
[ E.element R.div'
{ className: "ry-segmented"
, css: Style.segmented
, role: "tablist"
, children:
itemRefs
# foldMap \activeItemRefs ->
React.element ActiveIndicator.component
{ activeItemRefs
, activeItemIndex: activeIndex
, buttonContents
, updateActiveItem
, windowSize
}
A.: children
}
]
}
]
}
getHTMLElementAtIndex ∷ Int -> TwoOrMore (NodeRef) -> Effect (Maybe HTMLElement)
getHTMLElementAtIndex ∷ Int → TwoOrMore (NodeRef) → Effect (Maybe HTMLElement)
getHTMLElementAtIndex idx refs =
runMaybeT do
ref <- refs TwoOrMore.!! idx # pure >>> wrap
node <- React.readRefMaybe ref # wrap
ref ← refs TwoOrMore.!! idx # pure >>> wrap
node ← React.readRefMaybe ref # wrap
HTMLElement.fromNode node # pure >>> wrap
blurAtIndex ∷ Int -> TwoOrMore (Ref (Nullable Node)) -> Effect Unit
blurAtIndex ∷ Int → TwoOrMore (Ref (Nullable Node)) → Effect Unit
blurAtIndex idx refs = do
getHTMLElementAtIndex idx refs >>= traverse_ blur
focusAtIndex ∷ Int -> TwoOrMore (Ref (Nullable Node)) -> Effect Unit
focusAtIndex ∷ Int → TwoOrMore (Ref (Nullable Node)) → Effect Unit
focusAtIndex idx refs = do
getHTMLElementAtIndex idx refs >>= traverse_ focus

138
src/Yoga/Block/Atom/Segmented/View/ActiveIndicator.purs
View File

@ -29,7 +29,7 @@ type Props =
{ activeItemRefs ∷ TwoOrMore (Ref (Nullable Node))
, buttonContents ∷ TwoOrMore Item
, activeItemIndex ∷ Int
, updateActiveItem ∷ Item -> Int -> Effect Unit
, updateActiveItem ∷ Item → Int → Effect Unit
, windowSize ∷ UseWindowResize.Sizes
}
@ -37,29 +37,34 @@ component ∷ ReactComponent Props
component =
unsafePerformEffect
$ reactComponent "SegmentedActive" do
\(props ∷ Props) -> React.do
maybeAnimationVariants /\ setVariants <- useState' Nothing
variantIndex /\ modVariantIndex <- useState props.activeItemIndex
maybeDragXRef <- useRef Nothing
{ scrollX, scrollY } <- useScrollPosition
activeLeft <- useMotionValue 0.0
activeWidth <- useMotionValue 0.0
\(props ∷ Props) → React.do
maybeAnimationVariants /\ setVariants ← useState' Nothing
variantIndex /\ modVariantIndex ← useState props.activeItemIndex
maybeDragXRef ← useRef Nothing
{ scrollX, scrollY } ← useScrollPosition
activeLeft ← useMotionValue 0.0
activeWidth ← useMotionValue 0.0
useEffectAlways do
_ <- do
styles <- getStyles props.activeItemRefs
_ ← do
styles ← getStyles props.activeItemRefs
unless (maybeAnimationVariants == Just styles) do
setVariants (Just styles)
mempty
let
setDragXRef new = do
writeRef maybeDragXRef new
maybeDragX <- readRef maybeDragXRef
maybeDragX ← readRef maybeDragXRef
case maybeDragX, maybeAnimationVariants of
Just x, Just animationVariants -> do
let { left, width } = handleDrag { activeItemIndex: props.activeItemIndex, animationVariants, x }
Just x, Just animationVariants → do
let
{ left, width } = handleDrag
{ activeItemIndex: props.activeItemIndex
, animationVariants
, x
}
activeLeft # MotionValue.set left
activeWidth # MotionValue.set width
_, _ -> mempty
_, _ → mempty
useEffect props.activeItemIndex do
modVariantIndex (const props.activeItemIndex)
mempty
@ -74,14 +79,14 @@ component =
let
variants ∷ Motion.Variants
variants = case maybeAnimationVariants of
Just animationVariants ->
Just animationVariants →
animationVariants
# foldMapWithIndex
(\i s -> Object.singleton (show i) (css s))
(\i s → Object.singleton (show i) (css s))
# Motion.variantsFromObject
Nothing -> cast undefined
Nothing → cast undefined
pure $ maybeAnimationVariants
# foldMap \animationVariants ->
# foldMap \animationVariants →
Emotion.element R.div'
{ className: "ry-active-segmented-element-wrapper"
, css: Style.activeElementWrapper
@ -89,57 +94,76 @@ component =
[ Emotion.element Motion.div
{ css: Style.activeElement
, layout: Motion.layout true
, custom: Motion.customProp (({ childRefs: props.activeItemRefs, scrollX, scrollY }) ∷ Custom)
, custom: Motion.customProp
( ( { childRefs: props.activeItemRefs
, scrollX
, scrollY
}
) ∷ Custom
)
, variants
, className: "ry-active-segmented-element"
, initial: Motion.initial $ indexToVariant props.activeItemIndex
, initial: Motion.initial $ indexToVariant
props.activeItemIndex
, drag: Motion.drag "x"
, dragMomentum: Motion.dragMomentum false
, animate: Motion.animate $ indexToVariant variantIndex
, animate: Motion.animate $ indexToVariant
variantIndex
, style:
css
{ left: activeLeft
, width: activeWidth
}
, whileTap: Motion.whileTap $ css { scaleY: 0.8, scaleX: 0.95, y: -1.0 }
, whileTap: Motion.whileTap $ css
{ scaleY: 0.8, scaleX: 0.95, y: -1.0 }
, onDragStart:
Motion.onDragStart \_ pi -> do
maybeBbox <- getBoundingBoxFromRef (TwoOrMore.head props.activeItemRefs)
for_ maybeBbox \bbox ->
Motion.onDragStart \_ pi → do
maybeBbox ← getBoundingBoxFromRef
(TwoOrMore.head props.activeItemRefs)
for_ maybeBbox \bbox →
setDragXRef (Just (pi.point.x - bbox.left))
, onDrag:
Motion.onDrag \_ pi -> do
maybeDragX <- readRef maybeDragXRef
Motion.onDrag \_ pi → do
maybeDragX ← readRef maybeDragXRef
when (isJust maybeDragX) do
maybeBbox <- getBoundingBoxFromRef (TwoOrMore.head props.activeItemRefs)
for_ maybeBbox \bbox ->
maybeBbox ← getBoundingBoxFromRef
(TwoOrMore.head props.activeItemRefs)
for_ maybeBbox \bbox →
setDragXRef (Just (pi.point.x - bbox.left))
, onDragEnd:
Motion.onDragEnd \_ _ -> do
maybeDragX <- readRef maybeDragXRef
Motion.onDragEnd \_ _ → do
maybeDragX ← readRef maybeDragXRef
let
x = maybeDragX # fromMaybe' \_ -> unsafeCrashWith "no x"
x = maybeDragX # fromMaybe' \_ →
unsafeCrashWith "no x"
newIdx =
findOverlapping
props.activeItemIndex
animationVariants
x
newItem = fromMaybe'
(\_ -> TwoOrMore.head props.buttonContents)
(\_ → TwoOrMore.head props.buttonContents)
(props.buttonContents TwoOrMore.!! newIdx)
v =
animationVariants TwoOrMore.!! newIdx
# fromMaybe' \_ -> unsafeCrashWith "omg"
# fromMaybe' \_ → unsafeCrashWith "omg"
activeLeft # MotionValue.set v.left
activeWidth # MotionValue.set v.width
props.updateActiveItem newItem newIdx
writeRef maybeDragXRef Nothing
, dragElastic: Motion.dragElastic false
, dragConstraints: Motion.dragConstraintsBoundingBox { left: 0, right: 0, top: 0, bottom: 0 }
, dragConstraints: Motion.dragConstraintsBoundingBox
{ left: 0, right: 0, top: 0, bottom: 0 }
, transition:
Motion.transition
{ type: "tween"
, duration: if isJust (unsafePerformEffect (readRef maybeDragXRef)) then 0.0 else 0.167
, duration:
if
isJust
( unsafePerformEffect
(readRef maybeDragXRef)
) then 0.0
else 0.167
, ease: "easeOut"
}
, _aria: Object.fromHomogeneous { hidden: "true" }
@ -147,13 +171,15 @@ component =
]
}
getStyles ∷ TwoOrMore (Ref (Nullable Node)) -> Effect (TwoOrMore BBox)
getStyles ∷ TwoOrMore (Ref (Nullable Node)) → Effect (TwoOrMore BBox)
getStyles itemRefs = do
maybeBBs ∷ TwoOrMore (Maybe DOMRect) <- traverse getBoundingBoxFromRef itemRefs
let boundingBoxes = maybeBBs <#> (_ # fromMaybe' \_ -> unsafeCrashWith "something's wrong")
maybeBBs ∷ TwoOrMore (Maybe DOMRect) ← traverse getBoundingBoxFromRef itemRefs
let
boundingBoxes = maybeBBs <#>
(_ # fromMaybe' \_ → unsafeCrashWith "something's wrong")
pure (boundingBoxes # map (fn boundingBoxes))
where
fn ∷ TwoOrMore DOMRect -> DOMRect -> BBox
fn ∷ TwoOrMore DOMRect → DOMRect → BBox
fn boundingBoxes bb = do
let first = TwoOrMore.head boundingBoxes
{ width: bb.width
@ -165,34 +191,36 @@ getStyles itemRefs = do
type Custom =
{ childRefs ∷ TwoOrMore NodeRef, scrollX ∷ Number, scrollY ∷ Number }
indexToVariant ∷ Int -> VariantLabel
indexToVariant ∷ Int → VariantLabel
indexToVariant = show >>> unsafeCoerce
type BBox =
{ top ∷ Number, left ∷ Number, width ∷ Number, height ∷ Number }
findOverlapping ∷ Int -> TwoOrMore BBox -> Number -> Int
findOverlapping ∷ Int → TwoOrMore BBox → Number → Int
findOverlapping activeIndex styles x =
fromMaybe activeIndex do
let fst = TwoOrMore.head styles
let lst = TwoOrMore.last styles
let inside e = (e.left < x) && (e.left + e.width) >= x
let tooFarLeft = Alternative.guard (x <= fst.left + fst.width) $> 0
let tooFarRight = Alternative.guard (x >= lst.left) $> TwoOrMore.length styles - 1
let
tooFarRight = Alternative.guard (x >= lst.left) $> TwoOrMore.length styles
- 1
TwoOrMore.findIndex inside styles <|> tooFarLeft <|> tooFarRight
handleDrag
∷ { activeItemIndex ∷ Int
, animationVariants ∷ TwoOrMore BBox
, x ∷ Number
}
-> { left ∷ Number, width ∷ Number }
handleDrag ∷
{ activeItemIndex ∷ Int
, animationVariants ∷ TwoOrMore BBox
, x ∷ Number
} →
{ left ∷ Number, width ∷ Number }
handleDrag { x, activeItemIndex, animationVariants } = do
let idx = findOverlapping activeItemIndex animationVariants x
let av = animationVariants
let firstVariant = av # TwoOrMore.head
let lastVariant = av # TwoOrMore.last
let baseVariant = av TwoOrMore.!! idx # fromMaybe' \_ -> unsafeCrashWith "shit"
let baseVariant = av TwoOrMore.!! idx # fromMaybe' \_ → unsafeCrashWith "shit"
let
closestVariant =
if x >= (baseVariant.left + (baseVariant.width / 2.0)) then
@ -210,17 +238,21 @@ handleDrag { x, activeItemIndex, animationVariants } = do
let rangeEnd = greater.left + greater.width / 2.0
let range = rangeEnd - rangeStart
let ratio = ((x - rangeStart) / range)
let interpolatedWidth = (greater.width * ratio) + smaller.width * (1.0 - ratio)
let
interpolatedWidth = (greater.width * ratio) + smaller.width * (1.0 - ratio)
-- Right
let rangeStartRight = smaller.left + smaller.width
let rangeEndRight = greater.left + greater.width
let rangeRight = rangeEndRight - rangeStartRight
let ratioRight = ((x + (interpolatedWidth / 2.0) - rangeStartRight) / rangeRight)
let
ratioRight =
((x + (interpolatedWidth / 2.0) - rangeStartRight) / rangeRight)
-- Left
let rangeStartLeft = smaller.left
let rangeEndLeft = greater.left
let rangeLeft = rangeEndLeft - rangeStartLeft
let ratioLeft = (((x - (interpolatedWidth / 2.0)) - rangeStartLeft) / rangeLeft)
let
ratioLeft = (((x - (interpolatedWidth / 2.0)) - rangeStartLeft) / rangeLeft)
-- Individual
let left = rangeStartLeft + (ratioLeft * rangeLeft)
let right = rangeStartRight + (ratioRight * rangeRight)

2
src/Yoga/Block/Atom/Select/View.purs
View File

@ -30,7 +30,7 @@ component = unsafePerformEffect do
, onChange: handler targetValue
\maybeVal → traverse_ onChange do
val ← maybeVal
choices # Array.find (toString >>> (_ == val))
choices # Array.find (toValue >>> (_ == val))
}
/>

4
src/Yoga/Block/Atom/Toggle/Spec.purs
View File

@ -15,12 +15,12 @@ spec =
, ariaLabel: "Example Toggle"
}
it "has an aria-label" do
{ findByRole } <-
{ findByRole } ←
renderComponent Toggle.component
{ value: ToggleIsLeft
, ariaLabel: "Example Toggle"
}
elem <- findByRole "switch"
elem ← findByRole "switch"
shouldHaveAttributeWithValue
elem
"aria-label"

32
src/Yoga/Block/Atom/Toggle/Story.purs
View File

@ -23,8 +23,8 @@ default =
toggle ∷ Effect JSX
toggle = do
example <- mkBasicExample
darkLight <- mkDarkLightToggle
example ← mkBasicExample
darkLight ← mkDarkLightToggle
pure
$ fragment
[ R.div_
@ -36,8 +36,8 @@ toggle = do
]
where
mkBasicExample =
React.reactComponent "Toggle example" \_p -> React.do
togglePosition /\ setTogglePosition <- React.useState' ToggleIsRight
React.reactComponent "Toggle example" \_p → React.do
togglePosition /\ setTogglePosition ← React.useState' ToggleIsRight
pure
$ element Toggle.component
{ value: togglePosition
@ -46,28 +46,28 @@ toggle = do
}
mkDarkLightToggle =
React.reactComponent "Toggle dark night example" \_p -> React.do
togglePosition /\ setTogglePosition <- React.useState' ToggleIsLeft
theme /\ setTheme <- React.useState' Nothing
React.reactComponent "Toggle dark night example" \_p → React.do
togglePosition /\ setTogglePosition ← React.useState' ToggleIsLeft
theme /\ setTheme ← React.useState' Nothing
let
content =
element Toggle.component
{ value: togglePosition
, ariaLabel: "dark-light-toggle"
, onChange:
\newTogglePosition -> do
setTogglePosition newTogglePosition
setTheme case newTogglePosition of
ToggleIsRight -> Just DarkMode
ToggleIsLeft -> Just LightMode
\newTogglePosition → do
setTogglePosition newTogglePosition
setTheme case newTogglePosition of
ToggleIsRight → Just DarkMode
ToggleIsLeft → Just LightMode
, left: R.text "🌒"
, right: R.text "🌞"
, backgroundLeft:
Color.hsl 205.0 1.0 0.83
Color.hsl 205.0 1.0 0.83
, backgroundRight:
Color.hsl 260.0 0.7 0.45
Color.hsl 260.0 0.7 0.45
}
pure
$ Block.container
</ { themeVariant: theme }
/> [ content ]
</ { themeVariant: theme }
/> [ content ]

10
src/Yoga/Block/Atom/Toggle/Types.purs
View File

@ -10,10 +10,10 @@ derive instance eqTogglePosition ∷ Eq TogglePosition
instance showTogglePosition ∷ Show TogglePosition where
show = case _ of
ToggleIsLeft -> "ToggleIsLeft"
ToggleIsRight -> "ToggleIsRight"
ToggleIsLeft → "ToggleIsLeft"
ToggleIsRight → "ToggleIsRight"
flipToggle ∷ TogglePosition -> TogglePosition
flipToggle ∷ TogglePosition → TogglePosition
flipToggle = case _ of
ToggleIsLeft -> ToggleIsRight
ToggleIsRight -> ToggleIsLeft
ToggleIsLeft → ToggleIsRight
ToggleIsRight → ToggleIsLeft

5
src/Yoga/Block/Container/Spec.purs
View File

@ -12,6 +12,7 @@ spec =
void $ renderComponent Container.component {}
it "displays its children" do
let content = R.text "Test Text"
{ findByText } <- renderComponent Container.component { children: [ content ] }
elem <- findByText "Test Text"
{ findByText } ← renderComponent Container.component
{ children: [ content ] }
elem ← findByText "Test Text"
elem `textContentShouldEqual` "Test Text"

82
src/Yoga/Block/Container/Story.purs
View File

@ -23,16 +23,39 @@ container =
pure
( element Container.component
{ children:
[ el Box.component { style: css { background: colour.backgroundLayer1 } }
[ el Box.component { style: css { background: colour.backgroundLayer2 } }
[ el Box.component { style: css { background: colour.backgroundLayer3 } }
[ el Box.component { style: css { background: colour.backgroundLayer4 } }
[ el Box.component { style: css { background: colour.backgroundLayer5 } }
[ R.div { style: css { color: colour.text }, children: [ R.text "Text" ] }
, R.div { style: css { color: colour.textPaler1 }, children: [ R.text "Text Paler 1" ] }
, R.div { style: css { color: colour.textPaler2 }, children: [ R.text "Text Paler 2" ] }
, R.div { style: css { color: colour.textPaler3 }, children: [ R.text "Text Paler 3" ] }
, R.div { style: css { color: colour.textPaler4 }, children: [ R.text "Text Paler 4" ] }
[ el Box.component
{ style: css { background: colour.backgroundLayer1 } }
[ el Box.component
{ style: css { background: colour.backgroundLayer2 } }
[ el Box.component
{ style: css { background: colour.backgroundLayer3 } }
[ el Box.component
{ style: css { background: colour.backgroundLayer4 }
}
[ el Box.component
{ style: css
{ background: colour.backgroundLayer5 }
}
[ R.div
{ style: css { color: colour.text }
, children: [ R.text "Text" ]
}
, R.div
{ style: css { color: colour.textPaler1 }
, children: [ R.text "Text Paler 1" ]
}
, R.div
{ style: css { color: colour.textPaler2 }
, children: [ R.text "Text Paler 2" ]
}
, R.div
{ style: css { color: colour.textPaler3 }
, children: [ R.text "Text Paler 3" ]
}
, R.div
{ style: css { color: colour.textPaler4 }
, children: [ R.text "Text Paler 4" ]
}
]
]
]
@ -63,7 +86,11 @@ container =
{ style:
css
{ background:
"linear-gradient(90deg," <> colour.highlightRotatedForwards <> "," <> colour.highlightRotatedBackwards <> ")"
"linear-gradient(90deg,"
<> colour.highlightRotatedForwards
<> ","
<> colour.highlightRotatedBackwards
<> ")"
, color: colour.highlightText
}
}
@ -73,34 +100,42 @@ container =
, padding: E.px 1
, css:
E.css
{ background: E.str "linear-gradient(90deg, rgb(32, 37, 63) 0%, rgb(118, 74, 151) 15%, rgb(71, 107, 169) 20%, rgb(85, 167, 177) 29%, rgb(85, 167, 177) 32%, rgb(32, 37, 63) 40%, rgb(32, 37, 63) 50%, rgb(118, 74, 151) 60%, rgb(71, 107, 169) 70%, rgb(85, 167, 177) 80%, rgb(32, 37, 63) 100%)"
{ background: E.str
"linear-gradient(90deg, rgb(32, 37, 63) 0%, rgb(118, 74, 151) 15%, rgb(71, 107, 169) 20%, rgb(85, 167, 177) 29%, rgb(85, 167, 177) 32%, rgb(32, 37, 63) 40%, rgb(32, 37, 63) 50%, rgb(118, 74, 151) 60%, rgb(71, 107, 169) 70%, rgb(85, 167, 177) 80%, rgb(32, 37, 63) 100%)"
, backgroundSize: E.percent 500.0
, animation: E.str "15s linear 0s infinite normal none running"
, animation: E.str
"15s linear 0s infinite normal none running"
, animationName:
E.keyframes
{ "0%": E.css { backgroundPosition: E.str "0% center" }
, "100%": E.css { backgroundPosition: E.str "500% center" }
{ "0%": E.css
{ backgroundPosition: E.str "0% center" }
, "100%": E.css
{ backgroundPosition: E.str "500% center" }
}
, color: E.str colour.highlightText
, overflow: E.hidden
, "&::before":
E.nested
$ E.css
{ content: E.str $ "'" <> (power "Shiny boy " 50 <> "'")
{ content: E.str $ "'" <>
(power "Shiny boy " 50 <> "'")
, letterSpacing: E.str "4px"
, backgroundRepeat: E.str "repeat-x"
, whiteSpace: E.nowrap
, fontSize: E.str "12px"
, overflow: E.hidden
, animation: E.str "5s linear 0s infinite normal none running"
, animation: E.str
"5s linear 0s infinite normal none running"
, left: E.px 0
, fontWeight: E.str "800"
, position: E.relative
, height: E.px 20
, animationName:
E.keyframes
{ "100%": E.css { left: E.str "calc(-100%)" }
, "0%": E.css { left: E.str "calc(0%)" }
{ "100%": E.css
{ left: E.str "calc(-100%)" }
, "0%": E.css
{ left: E.str "calc(0%)" }
}
}
}
@ -137,12 +172,17 @@ container =
, psParagraph
, R.h3_ [ R.text "Third largest heading (h3)" ]
, psParagraph
, R.p_ [ R.text "Make sure to have the following meta tag in your head" ]
, R.p_
[ R.text "Make sure to have the following meta tag in your head"
]
, R.code_
[ R.text
"""<meta name="viewport" content="width=device-width, initial-scale=1.0">"""
]
, R.h1_ [ R.text "Very long largest heading that can result in multiple lines" ]
, R.h1_
[ R.text
"Very long largest heading that can result in multiple lines"
]
]
}
)

57
src/Yoga/Block/Hook/Key.purs
View File

@ -10,12 +10,13 @@ import Data.Tuple.Nested ((/\))
import Web.UIEvent.KeyboardEvent (KeyboardEvent)
import Web.UIEvent.KeyboardEvent as KeyboardEvent
foreign import getKeyImpl ∷ ∀ a. (a -> Maybe a) -> Maybe a -> KeyboardEvent -> Maybe Int
foreign import getKeyImpl ∷
∀ a. (a → Maybe a) → Maybe a → KeyboardEvent → Maybe Int
getKeyCode ∷ KeyboardEvent -> Maybe Int
getKeyCode ∷ KeyboardEvent → Maybe Int
getKeyCode = getKeyImpl Just Nothing
getModifiers :: KeyboardEvent -> Set Modifier
getModifiers ∷ KeyboardEvent → Set Modifier
getModifiers event =
foldl fn Set.empty
[ KeyboardEvent.metaKey /\ Command
@ -54,31 +55,31 @@ data KeyCode
derive instance Eq KeyCode
derive instance Ord KeyCode
keyCodeToInt ∷ KeyCode -> Int
keyCodeToInt ∷ KeyCode → Int
keyCodeToInt = case _ of
Backspace -> 8
Tab -> 9
Return -> 13
Escape -> 27
End -> 35
Home -> 36
Left -> 37
Up -> 38
Right -> 39
Down -> 40
Delete -> 46
Backspace → 8
Tab → 9
Return → 13
Escape → 27
End → 35
Home → 36
Left → 37
Up → 38
Right → 39
Down → 40
Delete → 46
intToKeyCode ∷ Int -> Maybe KeyCode
intToKeyCode ∷ Int → Maybe KeyCode
intToKeyCode = case _ of
8 -> Just Backspace
9 -> Just Tab
13 -> Just Return
27 -> Just Escape
35 -> Just End
36 -> Just Home
37 -> Just Left
38 -> Just Up
39 -> Just Right
40 -> Just Down
46 -> Just Delete
_ -> Nothing
8 → Just Backspace
9 → Just Tab
13 → Just Return
27 → Just Escape
35 → Just End
36 → Just Home
37 → Just Left
38 → Just Up
39 → Just Right
40 → Just Down
46 → Just Delete
_ → Nothing

19
src/Yoga/Block/Hook/Scroll.purs
View File

@ -14,25 +14,26 @@ import Web.HTML.Window (toEventTarget)
eventType ∷ EventType
eventType = EventType "scroll"
registerListener ∷ EventListener -> Effect (Effect Unit)
registerListener ∷ EventListener → Effect (Effect Unit)
registerListener listener = do
target <- window <#> toEventTarget
target ← window <#> toEventTarget
addEventListener eventType listener false target
pure $ removeEventListener eventType listener false target
newtype UseScrollPosition hooks
= UseScrollPosition (UseLayoutEffect Unit (UseState ScrollPosition hooks))
newtype UseScrollPosition hooks = UseScrollPosition
(UseLayoutEffect Unit (UseState ScrollPosition hooks))
derive instance ntUseScrollPosition ∷ Newtype (UseScrollPosition hooks) _
type ScrollPosition
= { scrollX ∷ Number, scrollY ∷ Number }
type ScrollPosition = { scrollX ∷ Number, scrollY ∷ Number }
useScrollPosition ∷ Hook UseScrollPosition ScrollPosition
useScrollPosition =
coerceHook React.do
scroll /\ setScroll <- useState' zero
scroll /\ setScroll ← useState' zero
useLayoutEffectAlways $ makeListener setScroll >>= registerListener
pure scroll
makeListener ∷ (ScrollPosition -> Effect Unit) -> Effect EventListener
makeListener setScroll = eventListener (const (window <#> unsafeCoerce >>= setScroll))
makeListener ∷ (ScrollPosition → Effect Unit) → Effect EventListener
makeListener setScroll = eventListener
(const (window <#> unsafeCoerce >>= setScroll))

16
src/Yoga/Block/Hook/UseDocumentSize.purs
View File

@ -24,17 +24,17 @@ derive instance newtypeUseDocumentSize ∷ Newtype (UseDocumentSize hooks) _
useDocumentSize ∷ Hook UseDocumentSize DocumentSize
useDocumentSize =
coerceHook React.do
scrollDimensions /\ setScrollDimensions <- React.useState' one
scrollDimensions /\ setScrollDimensions ← React.useState' one
React.useLayoutEffectAlways do
window <- HTML.window
htmlDocument <- Window.document window
window ← HTML.window
htmlDocument ← Window.document window
let document = HTMLDocument.toDocument htmlDocument
scrollDimensions' <- do
maybeDocumentElement <- Document.documentElement document
scrollDimensions' ← do
maybeDocumentElement ← Document.documentElement document
maybeDocumentElement
# maybe (pure zero) \documentElement -> do
scrollWidth <- Element.scrollWidth documentElement
scrollHeight <- Element.scrollHeight documentElement
# maybe (pure zero) \documentElement → do
scrollWidth ← Element.scrollWidth documentElement
scrollHeight ← Element.scrollHeight documentElement
pure { scrollWidth, scrollHeight }
unless (scrollDimensions' == scrollDimensions) do
setScrollDimensions scrollDimensions'

43
src/Yoga/Block/Hook/UseDrip.purs
View File

@ -7,11 +7,11 @@ import React.Basic.DOM.Events (clientX, clientY)
import React.Basic.Hooks as React
type DripReturn =
{ visible :: Boolean
, x :: Number
, y :: Number
, onClick :: EventHandler
, onComplete :: Effect Unit
{ visible ∷ Boolean
, x ∷ Number
, y ∷ Number
, onClick ∷ EventHandler
, onComplete ∷ Effect Unit
}
newtype UseDrip hooks = UseDrip
@ -19,11 +19,11 @@ newtype UseDrip hooks = UseDrip
derive instance Newtype (UseDrip hooks) _
useDrip :: NodeRef -> Hook UseDrip DripReturn
useDrip ∷ NodeRef → Hook UseDrip DripReturn
useDrip ref = coerceHook React.do
visible /\ setVisible <- React.useState' false
x /\ setX <- React.useState' zero
y /\ setY <- React.useState' zero
visible /\ setVisible ← React.useState' false
x /\ setX ← React.useState' zero
y /\ setY ← React.useState' zero
let
dripCompletedHandle = do
@ -32,18 +32,19 @@ useDrip ref = coerceHook React.do
setY zero
let
clickHandler = handler (merge { clientX, clientY }) \{ clientX, clientY } -> do
bbʔ <- getBoundingBoxFromRef ref
let
valuesʔ = ado
{ left, top } <- bbʔ
cx <- clientX
cy <- clientY
in { left, top, cx, cy }
for_ valuesʔ \{ cx, cy, left, top } -> do
setVisible true
setX (cx - left)
setY (cy - top)
clickHandler = handler (merge { clientX, clientY }) \{ clientX, clientY } →
do
bbʔ ← getBoundingBoxFromRef ref
let
valuesʔ = ado
{ left, top } ← bbʔ
cx ← clientX
cy ← clientY
in { left, top, cx, cy }
for_ valuesʔ \{ cx, cy, left, top } → do
setVisible true
setX (cx - left)
setY (cy - top)
pure
{ visible: visible

21
src/Yoga/Block/Hook/UseElementResize.purs
View File

@ -15,18 +15,19 @@ newtype UseOnElementResizeWithRef hooks = UseOnElementResizeWithRef
derive instance Newtype (UseOnElementResizeWithRef hooks) _
type OnResize = { old :: DOMRect, new :: DOMRect } -> Effect Unit
type OnResize = { old ∷ DOMRect, new ∷ DOMRect } → Effect Unit
useOnElementResizeWithRef ∷ NodeRef -> OnResize -> Hook UseOnElementResizeWithRef Unit
useOnElementResizeWithRef ∷
NodeRef → OnResize → Hook UseOnElementResizeWithRef Unit
useOnElementResizeWithRef ref onResize = coerceHook React.do
useLayoutEffectOnce do
elʔ <- getElementFromRef ref
elʔ ← getElementFromRef ref
case elʔ of
Nothing -> mempty
Just elem -> do
observer <- resizeObserver \entries _ -> do
Array.head entries # traverse_ \{ contentRect: new } -> do
getBoundingClientRect elem >>= \old ->
Nothing → mempty
Just elem → do
observer ← resizeObserver \entries _ → do
Array.head entries # traverse_ \{ contentRect: new } → do
getBoundingClientRect elem >>= \old →
onResize { old, new }
observe ContentBox observer elem
pure (unobserve observer elem)
@ -36,8 +37,8 @@ newtype UseOnElementResize hooks = UseOnElementResize
derive instance Newtype (UseOnElementResize hooks) _
useOnElementResize ∷ OnResize -> Hook UseOnElementResize NodeRef
useOnElementResize ∷ OnResize → Hook UseOnElementResize NodeRef
useOnElementResize onResize = coerceHook React.do
ref <- React.useRef null
ref ← React.useRef null
useOnElementResizeWithRef ref onResize
pure ref

49
src/Yoga/Block/Hook/UseInView.purs
View File

@ -16,36 +16,37 @@ foreign import data IntersectionObserverEntry ∷ Type
foreign import data UseInView ∷ Type → Type
type IntersectionOptions
= ( root :: Element
, rootMargin :: String
, threshold :: Number
, triggerOnce :: Boolean
, skip :: Boolean
, initialInView :: Boolean
, trackVisibility :: Boolean
, delay :: Milliseconds
)
type IntersectionOptions =
( root ∷ Element
, rootMargin ∷ String
, threshold ∷ Number
, triggerOnce ∷ Boolean
, skip ∷ Boolean
, initialInView ∷ Boolean
, trackVisibility ∷ Boolean
, delay ∷ Milliseconds
)
type InViewResultImpl
= { inView :: Boolean
, ref :: NodeRef -- not true
, entry :: UndefinedOr (Nullable IntersectionObserverEntry)
}
type InViewResultImpl =
{ inView ∷ Boolean
, ref ∷ NodeRef -- not true
, entry ∷ UndefinedOr (Nullable IntersectionObserverEntry)
}
type InViewResult
= { inView :: Boolean
, ref :: NodeRef -- not true
, entry :: Maybe IntersectionObserverEntry
}
type InViewResult =
{ inView ∷ Boolean
, ref ∷ NodeRef -- not true
, entry ∷ Maybe IntersectionObserverEntry
}
foreign import useInViewImpl :: forall r. EffectFn1 { | r } InViewResultImpl
foreign import useInViewImpl ∷ ∀ r. EffectFn1 { | r } InViewResultImpl
useInView ::
useInView ∷
∀ p p_.
Union p p_ IntersectionOptions ⇒
{ | p } -> Hook UseInView InViewResult
{ | p } →
Hook UseInView InViewResult
useInView props =
unsafeHook
$ runEffectFn1 useInViewImpl props
<#> \x -> x { entry = uorToMaybe x.entry >>= Nullable.toMaybe }
<#> \x → x { entry = uorToMaybe x.entry >>= Nullable.toMaybe }

16
src/Yoga/Block/Hook/UseKeyDown.purs
View File

@ -21,19 +21,21 @@ newtype UseKeyDown hooks = UseKeyDown
derive instance Newtype (UseKeyDown hooks) _
useKeyDown ∷ (KeyboardEvent -> Set Modifier -> KeyCode -> Effect Unit) -> Hook UseKeyDown Unit
useKeyDown ∷
(KeyboardEvent → Set Modifier → KeyCode → Effect Unit) → Hook UseKeyDown Unit
useKeyDown doWhat = do
coerceHook React.do
useEffectAlways do
listener <-
eventListener $ KeyboardEvent.fromEvent >>> traverse_ \event -> do
listener ←
eventListener $ KeyboardEvent.fromEvent >>> traverse_ \event → do
let modifiers = getModifiers event
case getKeyCode event >>= intToKeyCode of
Just keyCode -> doWhat event modifiers keyCode
Nothing -> pure unit
win <- window
Just keyCode → doWhat event modifiers keyCode
Nothing → pure unit
win ← window
addEventListener eventTypeKeyDown listener false (Win.toEventTarget win)
pure $ removeEventListener eventTypeKeyDown listener false (Win.toEventTarget win)
pure $ removeEventListener eventTypeKeyDown listener false
(Win.toEventTarget win)
eventTypeKeyDown ∷ EventType
eventTypeKeyDown = EventType "keydown"

18
src/Yoga/Block/Hook/UseKeyUp.purs
View File

@ -21,19 +21,23 @@ newtype UseKeyUp hooks = UseKeyUp
derive instance Newtype (UseKeyUp hooks) _
useKeyUp ∷ (KeyboardEvent -> Set Modifier -> KeyCode -> Effect Unit) -> Hook UseKeyUp Unit
useKeyUp ∷
(KeyboardEvent → Set Modifier → KeyCode → Effect Unit) → Hook UseKeyUp Unit
useKeyUp doWhat = do
coerceHook React.do
useEffectOnce do
listener <-
eventListener $ KeyboardEvent.fromEvent >>> traverse_ \event -> do
listener ←
eventListener $ KeyboardEvent.fromEvent >>> traverse_ \event → do
let modifiers = getModifiers event
case getKeyCode event >>= intToKeyCode of
Just keyCode -> doWhat event modifiers keyCode
Nothing -> pure unit
win <- window
Just keyCode → doWhat event modifiers keyCode
Nothing → pure unit
win ← window
addEventListener eventTypeKeyUp listener false (Win.toEventTarget win)
pure (removeEventListener eventTypeKeyUp listener false (Win.toEventTarget win))
pure
( removeEventListener eventTypeKeyUp listener false
(Win.toEventTarget win)
)
eventTypeKeyUp ∷ EventType
eventTypeKeyUp = EventType "keyup"

8
src/Yoga/Block/Hook/UseMediaQuery.purs
View File

@ -18,17 +18,17 @@ newtype UseMediaQuery hooks = UseMediaQuery
derive instance Newtype (UseMediaQuery hooks) _
useMediaQuery :: String -> Hook UseMediaQuery Boolean
useMediaQuery ∷ String → Hook UseMediaQuery Boolean
useMediaQuery query = coerceHook React.do
let check = window >>= matchMedia query >>= matches
queryMatches /\ setMatches <-
queryMatches /\ setMatches ←
React.useState' (unsafePerformEffect check)
React.useEffect query do
queryList <- window >>= matchMedia query
queryList ← window >>= matchMedia query
let target = MQL.toEventTarget queryList
listener <- eventListener (const (check >>= setMatches))
listener ← eventListener (const (check >>= setMatches))
addEventListener Event.change listener true target
pure do
removeEventListener Event.change listener true target

24
src/Yoga/Block/Hook/UseResize2.purs
View File

@ -67,18 +67,18 @@ newtype UseOnResize hooks = UseOnResize
derive instance ntUseOnResize ∷ Newtype (UseOnResize hooks) _
useOnResize
∷ ∀ d
. Duration d
⇒ d
→ ( { innerWidth ∷ Number
, innerHeight ∷ Number
, deltaWidth ∷ Number
, deltaHeight ∷ Number
}
→ Effect Unit
)
→ Hook UseOnResize Unit
useOnResize ∷
∀ d.
Duration d ⇒
d →
( { innerWidth ∷ Number
, innerHeight ∷ Number
, deltaWidth ∷ Number
, deltaHeight ∷ Number
} →
Effect Unit
) →
Hook UseOnResize Unit
useOnResize debounceBy callback =
coerceHook React.do
fiberRef ← React.useRef Nothing

10
src/Yoga/Block/Hook/UseStateEq.purs
View File

@ -9,11 +9,11 @@ import React.Basic.Hooks (UseState, Hook, coerceHook)
import React.Basic.Hooks as React
-- Thanks to
useStateEq :: forall a. Eq a => a -> Hook (UseStateEq a) (a /\ ((a -> a) -> Effect Unit))
useStateEq ∷ ∀ a. Eq a ⇒ a → Hook (UseStateEq a) (a /\ ((a → a) → Effect Unit))
useStateEq initialValue = coerceHook React.do
value /\ setValue <- React.useState initialValue
value /\ setValue ← React.useState initialValue
let
updateEq f = setValue \value' -> do
updateEq f = setValue \value' → do
let newValue = f value'
if newValue /= value' then newValue else value'
pure (value /\ updateEq)
@ -22,8 +22,8 @@ newtype UseStateEq a hooks = UseStateEq (UseState a hooks)
derive instance Newtype (UseStateEq a hooks) _
useStateEq' :: forall a. Eq a => a -> Hook (UseStateEq a) (a /\ (a -> Effect Unit))
useStateEq' ∷ ∀ a. Eq a ⇒ a → Hook (UseStateEq a) (a /\ (a → Effect Unit))
useStateEq' initialValue = coerceHook React.do
value /\ setValue <- React.useState' initialValue
value /\ setValue ← React.useState' initialValue
let updateEq newValue = when (newValue /= value) (setValue newValue)
pure (value /\ updateEq)

56
src/Yoga/Block/Hook/UseWindowResize.purs
View File

@ -22,37 +22,38 @@ import Web.HTML.Window as Window
eventType ∷ EventType
eventType = EventType "resize"
registerListener ∷ EventListener -> Effect (Effect Unit)
registerListener ∷ EventListener → Effect (Effect Unit)
registerListener listener = do
target <- HTML.window <#> Window.toEventTarget
target ← HTML.window <#> Window.toEventTarget
addEventListener eventType listener false target
pure $ removeEventListener eventType listener false target
type Sizes =
{ innerWidth ∷ Number, innerHeight ∷ Number }
newtype UseWindowResize hooks = UseWindowResize (UseLayoutEffect Unit (UseState Sizes hooks))
newtype UseWindowResize hooks = UseWindowResize
(UseLayoutEffect Unit (UseState Sizes hooks))
derive instance Newtype (UseWindowResize hooks) _
useWindowResize ∷ Hook UseWindowResize Sizes
useWindowResize =
coerceHook React.do
size /\ setSize <- React.useState' zero
size /\ setSize ← React.useState' zero
useLayoutEffect unit do
setSizeFromWindow setSize
listener <- makeListener setSize
listener ← makeListener setSize
registerListener listener
pure size
setSizeFromWindow ∷ (Sizes -> Effect Unit) -> Effect Unit
setSizeFromWindow ∷ (Sizes → Effect Unit) → Effect Unit
setSizeFromWindow setSize = do
window <- HTML.window
innerWidth <- Window.innerWidth window <#> toNumber
innerHeight <- Window.innerHeight window <#> toNumber
window ← HTML.window
innerWidth ← Window.innerWidth window <#> toNumber
innerHeight ← Window.innerHeight window <#> toNumber
setSize { innerWidth, innerHeight }
makeListener ∷ (Sizes -> Effect Unit) -> Effect EventListener
makeListener ∷ (Sizes → Effect Unit) → Effect EventListener
makeListener setSize = do
eventListener
$ const (setSizeFromWindow setSize)
@ -66,22 +67,28 @@ newtype UseOnResize hooks = UseOnResize
derive instance ntUseOnResize ∷ Newtype (UseOnResize hooks) _
useOnResize
∷ ∀ d
. Duration d
=> d
-> ({ innerWidth ∷ Number, innerHeight ∷ Number, deltaWidth ∷ Number, deltaHeight ∷ Number } -> Effect Unit)
-> Hook UseOnResize Unit
useOnResize ∷
∀ d.
Duration d ⇒
d →
( { innerWidth ∷ Number
, innerHeight ∷ Number
, deltaWidth ∷ Number
, deltaHeight ∷ Number
} →
Effect Unit
) →
Hook UseOnResize Unit
useOnResize debounceBy callback =
coerceHook React.do
mbFiber /\ setFiber <- React.useState' Nothing
size /\ setSize <- React.useState' (zero ∷ Sizes)
mbFiber /\ setFiber ← React.useState' Nothing
size /\ setSize ← React.useState' (zero ∷ Sizes)
let
layoutEffect ∷ Effect (Effect Unit)
layoutEffect = do
setSizeFromWindow (setSize ∷ Sizes -> Effect Unit)
listener ∷ EventListener <-
makeListener \(dimensions ∷ Sizes) -> do
setSizeFromWindow (setSize ∷ Sizes → Effect Unit)
listener ∷ EventListener ←
makeListener \(dimensions ∷ Sizes) → do
let
aff ∷ Aff Unit
aff = do
@ -91,10 +98,11 @@ useOnResize debounceBy callback =
let deltaWidth = abs (size.innerWidth - innerWidth)
let deltaHeight = abs (size.innerHeight - innerWidth)
setSize dimensions # liftEffect
callback { innerWidth, innerHeight, deltaWidth, deltaHeight } # liftEffect
fiber ∷ Fiber _ <- launchAff aff
callback { innerWidth, innerHeight, deltaWidth, deltaHeight } #
liftEffect
fiber ∷ Fiber _ ← launchAff aff
setFiber (Just fiber)
target ∷ EventTarget <- HTML.window <#> Window.toEventTarget
target ∷ EventTarget ← HTML.window <#> Window.toEventTarget
addEventListener eventType listener false target
pure
$ launchAff_

28
src/Yoga/Block/Icon/SVG/After.purs
View File

@ -4,15 +4,21 @@ import React.Basic (JSX)
import React.Basic.DOM as R
import React.Basic.DOM.SVG as SVG
after :: JSX
after ∷ JSX
after = SVG.svg
{ viewBox: "0 0 64 44"
, xmlns: "http://www.w3.org/2000/svg"
, xmlSpace: "preserve"
, style: R.css { fillRule: "evenodd", clipRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: "2" }
, children:
[ SVG.path
{ d: "M22.2 30.776h19.6v4.17H22.2zM22.2 19.904h19.6v4.17H22.2zM22.2 9.031h19.6v4.172H22.2zM18.2 9.203 6.943 20.46A2.155 2.155 0 0 0 6.308 22c-.001.576.228 1.13.635 1.539L18.2 34.797v-6.162l-6.638-6.644 6.638-6.632V9.203zM45.8 9.203 57.058 20.46c.409.408.639.962.635 1.54a2.178 2.178 0 0 1-.636 1.539L45.8 34.797v-6.162l6.639-6.644-6.639-6.632V9.203z"
}
]
}
{ viewBox: "0 0 64 44"
, xmlns: "http://www.w3.org/2000/svg"
, xmlSpace: "preserve"
, style: R.css
{ fillRule: "evenodd"
, clipRule: "evenodd"
, strokeLinejoin: "round"
, strokeMiterlimit: "2"
}
, children:
[ SVG.path
{ d:
"M22.2 30.776h19.6v4.17H22.2zM22.2 19.904h19.6v4.17H22.2zM22.2 9.031h19.6v4.172H22.2zM18.2 9.203 6.943 20.46A2.155 2.155 0 0 0 6.308 22c-.001.576.228 1.13.635 1.539L18.2 34.797v-6.162l-6.638-6.644 6.638-6.632V9.203zM45.8 9.203 57.058 20.46c.409.408.639.962.635 1.54a2.178 2.178 0 0 1-.636 1.539L45.8 34.797v-6.162l6.639-6.644-6.639-6.632V9.203z"
}
]
}

35
src/Yoga/Block/Icon/SVG/Background.purs
View File

@ -3,7 +3,7 @@ module Yoga.Block.Icon.SVG.Background where
import React.Basic (JSX)
import React.Basic.DOM.SVG as SVG
background :: JSX
background ∷ JSX
background = SVG.svg
{ width: "1200"
, height: "2011"
@ -13,67 +13,78 @@ background = SVG.svg
[ SVG.path
{ fillRule: "evenodd"
, clipRule: "evenodd"
, d: "m0 0 18 4.628c18 4.628 55 13.884 91 18.512s73 4.628 109 6.171c37 1.543 73 4.628 109 7.714 37 3.085 73 6.17 109 10.798 37 4.628 73 10.8 109 9.256 37-1.542 73-10.798 110-18.512 36-7.713 72-13.884 109-12.341 36 1.542 72 10.799 109 12.341 36 1.543 72-4.628 109-10.799 36-6.17 73-12.341 109-9.256 36 3.086 73 15.427 91 21.598l18 6.17V336H0V0z"
, d:
"m0 0 18 4.628c18 4.628 55 13.884 91 18.512s73 4.628 109 6.171c37 1.543 73 4.628 109 7.714 37 3.085 73 6.17 109 10.798 37 4.628 73 10.8 109 9.256 37-1.542 73-10.798 110-18.512 36-7.713 72-13.884 109-12.341 36 1.542 72 10.799 109 12.341 36 1.543 72-4.628 109-10.799 36-6.17 73-12.341 109-9.256 36 3.086 73 15.427 91 21.598l18 6.17V336H0V0z"
, fill: "url(#a)"
}
, SVG.path
{ fillRule: "evenodd"
, clipRule: "evenodd"
, d: "m1200 236.211-50-4.654c-50-4.655-150-13.965-250-41.895-100-27.929-200-74.478-300-83.788-100-9.31-200 18.619-300 27.929-100 9.31-200 0-250-4.655l-50-4.655V455h1200V236.211z"
, d:
"m1200 236.211-50-4.654c-50-4.655-150-13.965-250-41.895-100-27.929-200-74.478-300-83.788-100-9.31-200 18.619-300 27.929-100 9.31-200 0-250-4.655l-50-4.655V455h1200V236.211z"
, fill: "url(#b)"
}
, SVG.path
{ fillRule: "evenodd"
, clipRule: "evenodd"
, d: "m0 144 50 32.386c50 32.385 150 97.156 250 106.409s200-37.012 300-41.638c100-4.627 200 32.385 300 50.891s200 18.506 250 18.506h50V528H0V144z"
, d:
"m0 144 50 32.386c50 32.385 150 97.156 250 106.409s200-37.012 300-41.638c100-4.627 200 32.385 300 50.891s200 18.506 250 18.506h50V528H0V144z"
, fill: "url(#c)"
}
, SVG.path
{ fillRule: "evenodd"
, clipRule: "evenodd"
, d: "m0 266 33 28.488c34 28.487 100 85.462 167 85.462s133-56.975 200-47.479c67 9.496 133 85.463 200 104.455 67 18.991 133-18.992 200-18.992s133 37.983 200 56.975c67 18.992 133 18.992 167 18.992h33V649H0V266z"
, d:
"m0 266 33 28.488c34 28.487 100 85.462 167 85.462s133-56.975 200-47.479c67 9.496 133 85.463 200 104.455 67 18.991 133-18.992 200-18.992s133 37.983 200 56.975c67 18.992 133 18.992 167 18.992h33V649H0V266z"
, fill: "url(#d)"
}
, SVG.path
{ fillRule: "evenodd"
, clipRule: "evenodd"
, d: "m0 503.083 22-3.409c22-3.409 67-10.227 111-13.635 45-3.409 89-3.409 134 6.817 44 10.227 89 30.679 133 34.088 44 3.409 89-10.226 133-13.635 45-3.409 89 3.409 134 27.27 44 23.862 89 64.767 133 68.176 44 3.409 89-30.679 133-44.314 45-13.635 89-6.818 134 6.817 44 13.635 89 34.088 111 44.314l22 10.227V911H0V503.083z"
, d:
"m0 503.083 22-3.409c22-3.409 67-10.227 111-13.635 45-3.409 89-3.409 134 6.817 44 10.227 89 30.679 133 34.088 44 3.409 89-10.226 133-13.635 45-3.409 89 3.409 134 27.27 44 23.862 89 64.767 133 68.176 44 3.409 89-30.679 133-44.314 45-13.635 89-6.818 134 6.817 44 13.635 89 34.088 111 44.314l22 10.227V911H0V503.083z"
, fill: "url(#e)"
}
, SVG.path
{ fillRule: "evenodd"
, clipRule: "evenodd"
, d: "m0 655.221 22-1.901c22-1.901 67-5.703 111-3.802 45 1.901 89 9.505 134 20.911 44 11.405 89 26.613 133 26.613s89-15.208 133-15.208c45 0 89 15.208 134 22.812 44 7.603 89 7.603 133-5.703 44-13.307 89-39.92 133-41.821 45-1.901 89 20.91 134 34.217 44 13.307 89 17.109 111 19.01l22 1.9V968H0V655.221z"
, d:
"m0 655.221 22-1.901c22-1.901 67-5.703 111-3.802 45 1.901 89 9.505 134 20.911 44 11.405 89 26.613 133 26.613s89-15.208 133-15.208c45 0 89 15.208 134 22.812 44 7.603 89 7.603 133-5.703 44-13.307 89-39.92 133-41.821 45-1.901 89 20.91 134 34.217 44 13.307 89 17.109 111 19.01l22 1.9V968H0V655.221z"
, fill: "url(#f)"
}
, SVG.path
{ fillRule: "evenodd"
, clipRule: "evenodd"
, d: "m0 848.096 33 8.219c34 8.219 100 24.658 167 20.548 67-4.11 133-28.767 200-45.205C467 815.219 533 807 600 807s133 8.219 200 20.548c67 12.329 133 28.767 200 28.767s133-16.438 167-24.657l33-8.22V1107H0V848.096z"
, d:
"m0 848.096 33 8.219c34 8.219 100 24.658 167 20.548 67-4.11 133-28.767 200-45.205C467 815.219 533 807 600 807s133 8.219 200 20.548c67 12.329 133 28.767 200 28.767s133-16.438 167-24.657l33-8.22V1107H0V848.096z"
, fill: "url(#g)"
}
, SVG.path
{ fillRule: "evenodd"
, clipRule: "evenodd"
, d: "m0 925.667 50 18c50 18 150 54 250 54s200-36 300-60 200-36 300-18 200 66 250 90.003l50 24V1363H0V925.667z"
, d:
"m0 925.667 50 18c50 18 150 54 250 54s200-36 300-60 200-36 300-18 200 66 250 90.003l50 24V1363H0V925.667z"
, fill: "url(#h)"
}
, SVG.path
{ fillRule: "evenodd"
, clipRule: "evenodd"
, d: "m0 1056.25 25-2.42c25-2.42 75-7.26 125 0s100 26.62 150 38.72c50 12.1 100 16.94 150 14.52 50-2.42 100-12.1 150-16.94 50-4.84 100-4.84 150 2.42s100 21.77 150 36.29 100 29.04 150 26.62c50-2.42 100-21.78 125-31.46l25-9.68V1409H0v-352.75z"
, d:
"m0 1056.25 25-2.42c25-2.42 75-7.26 125 0s100 26.62 150 38.72c50 12.1 100 16.94 150 14.52 50-2.42 100-12.1 150-16.94 50-4.84 100-4.84 150 2.42s100 21.77 150 36.29 100 29.04 150 26.62c50-2.42 100-21.78 125-31.46l25-9.68V1409H0v-352.75z"
, fill: "url(#i)"
}
, SVG.path
{ fillRule: "evenodd"
, clipRule: "evenodd"
, d: "M0 1216.77v-8.62c28.5-.02 100 12.03 150 0s100-18.9 150-10.31c50 8.59 100 32.66 150 32.66s100-24.07 150-25.79c50-1.71 100 18.91 150 32.66 50 13.75 100 20.63 150 15.47 50-5.16 100-22.34 150-24.06 50-1.72 100 12.03 125 18.9l25 6.88V1457H0v-240.23z"
, d:
"M0 1216.77v-8.62c28.5-.02 100 12.03 150 0s100-18.9 150-10.31c50 8.59 100 32.66 150 32.66s100-24.07 150-25.79c50-1.71 100 18.91 150 32.66 50 13.75 100 20.63 150 15.47 50-5.16 100-22.34 150-24.06 50-1.72 100 12.03 125 18.9l25 6.88V1457H0v-240.23z"
, fill: "url(#j)"
}
, SVG.path
{ fillRule: "evenodd"
, clipRule: "evenodd"
, d: "m0 1315 40 13.4c40 13.41 120 40.21 200 58.08 80 17.87 160 26.81 240 13.41 80-13.41 160-49.15 240-35.75 80 13.41 160 75.96 240 89.36 80 13.4 160-22.34 200-40.21l40-17.87V2011H0v-696z"
, d:
"m0 1315 40 13.4c40 13.41 120 40.21 200 58.08 80 17.87 160 26.81 240 13.41 80-13.41 160-49.15 240-35.75 80 13.41 160 75.96 240 89.36 80 13.4 160-22.34 200-40.21l40-17.87V2011H0v-696z"
, fill: "#5C0BC2"
}
, SVG.defs

38
src/Yoga/Block/Icon/SVG/Before.purs
View File

@ -4,20 +4,26 @@ import React.Basic (JSX)
import React.Basic.DOM as R
import React.Basic.DOM.SVG as SVG
before :: JSX
before ∷ JSX
before = SVG.svg
{ viewBox: "0 0 64 44"
, xmlns: "http://www.w3.org/2000/svg"
, xmlSpace: "preserve"
, style: R.css { fillRule: "evenodd", clipRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: "2" }
, children:
[ SVG.path
{ style: R.css { fill: "none" }
, d: "M0 0h64v64H0z"
, transform: "scale(1 .67406)"
}
, SVG.path
{ d: "m17.894 17.332-2.95-2.952L4.003 25.32c-.392.391-.612.922-.608 1.476-.001.552.218 1.083.608 1.475l10.941 10.941 2.95-2.95-9.465-9.475 9.465-9.455zM39.571 29.936H19.96l4.467 4.171H44.04l-4.47-4.17zM59.994 14.87 49.058 3.927l-2.95 2.95 9.46 9.475-9.46 9.465 2.95 2.95L59.994 17.83c.394-.394.615-.93.611-1.488a2.076 2.076 0 0 0-.611-1.473zM19.959 23.655h19.612l4.467-4.17H24.424l-4.465 4.17zM39.571 9.031H19.96l4.465 4.172h19.612l-4.465-4.172z"
}
]
}
{ viewBox: "0 0 64 44"
, xmlns: "http://www.w3.org/2000/svg"
, xmlSpace: "preserve"
, style: R.css
{ fillRule: "evenodd"
, clipRule: "evenodd"
, strokeLinejoin: "round"
, strokeMiterlimit: "2"
}
, children:
[ SVG.path
{ style: R.css { fill: "none" }
, d: "M0 0h64v64H0z"
, transform: "scale(1 .67406)"
}
, SVG.path
{ d:
"m17.894 17.332-2.95-2.952L4.003 25.32c-.392.391-.612.922-.608 1.476-.001.552.218 1.083.608 1.475l10.941 10.941 2.95-2.95-9.465-9.475 9.465-9.455zM39.571 29.936H19.96l4.467 4.171H44.04l-4.47-4.17zM59.994 14.87 49.058 3.927l-2.95 2.95 9.46 9.475-9.46 9.465 2.95 2.95L59.994 17.83c.394-.394.615-.93.611-1.488a2.076 2.076 0 0 0-.611-1.473zM19.959 23.655h19.612l4.467-4.17H24.424l-4.465 4.17zM39.571 9.031H19.96l4.465 4.172h19.612l-4.465-4.172z"
}
]
}

17
src/Yoga/Block/Icon/SVG/Bg.purs
View File

@ -3,7 +3,7 @@ module Yoga.Block.Icon.SVG.Bg where
import React.Basic (JSX)
import React.Basic.DOM.SVG as SVG
bg :: JSX
bg ∷ JSX
bg = SVG.svg
{ xmlns: "http://www.w3.org/2000/svg"
, width: "200"
@ -20,19 +20,24 @@ bg = SVG.svg
, strokeWidth: "4.1"
, children:
[ SVG.path
{ d: "m769 229 268 31.9M927 880 731 737l-211-77-211-122-269 61 255 165-168.5 115.5L40 599l-237-106 299-111-133-153L126.5 79.5-69-63"
{ d:
"m769 229 268 31.9M927 880 731 737l-211-77-211-122-269 61 255 165-168.5 115.5L40 599l-237-106 299-111-133-153L126.5 79.5-69-63"
}
, SVG.path
{ d: "m-31 229 268 32 153 121 213 111-294.5 44.5-207-156M370 905l-75-141"
{ d:
"m-31 229 268 32 153 121 213 111-294.5 44.5-207-156M370 905l-75-141"
}
, SVG.path
{ d: "m520 660 58 182 153-105 109-138-237-106-83 167-225 104 14-226 81-156 149-113 230-40L577.5 41.5 370 105 295-36 126.5 79.5 237 261 102 382 40 599-69 737l196 143"
{ d:
"m520 660 58 182 153-105 109-138-237-106-83 167-225 104 14-226 81-156 149-113 230-40L577.5 41.5 370 105 295-36 126.5 79.5 237 261 102 382 40 599-69 737l196 143"
}
, SVG.path
{ d: "m520-140 58.5 182.5L731-63M603 493l-64-224-302-8 133-156m532 277L539 269M390 382H102"
{ d:
"m520-140 58.5 182.5L731-63M603 493l-64-224-302-8 133-156m532 277L539 269M390 382H102"
}
, SVG.path
{ d: "m-222 42 348.5 37.5L370 105l169 164 38.5-227.5L927 80 769 229l133 153-299 111 128 244M295-36l282.5 77.5M578 842l-283-78M40-201l87 281m-25 302-363-113"
{ d:
"m-222 42 348.5 37.5L370 105l169 164 38.5-227.5L927 80 769 229l133 153-299 111 128 244M295-36l282.5 77.5M578 842l-283-78M40-201l87 281m-25 302-363-113"
}
]
}

26
src/Yoga/Block/Icon/SVG/Bin.purs
View File

@ -13,16 +13,18 @@ bin =
, strokeLinejoin: "round"
, strokeMiterlimit: "2"
, children:
[ SVG.g
{ fill: "var(--stroke-colour)"
, children:
[ SVG.path
{ d: "M38.488 9.364C40.623 5.175 44.979 2.303 50 2.303c5.021 0 9.377 2.872 11.512 7.061 11.679 1.276 19.955 4.435 19.955 8.127l1.258 4.867c.204.392.31.793.31 1.2 0 4.819-14.803 8.731-33.035 8.731-18.232 0-33.035-3.912-33.035-8.731 0-.407.106-.808.31-1.2l1.258-4.867c0-3.692 8.276-6.851 19.955-8.127zm18.743-.372A111.616 111.616 0 0050 8.76c-2.489 0-4.91.081-7.231.232A9.523 9.523 0 0150 5.674a9.523 9.523 0 017.231 3.318z"
}
, SVG.path
{ d: "M80.438 30.325l-7.057 58.81c0 4.725-10.477 8.562-23.381 8.562s-23.381-3.837-23.381-8.562l-7.057-58.81C24.581 33.459 36.326 35.66 50 35.66s25.419-2.201 30.438-5.335z"
}
]
}
]
[ SVG.g
{ fill: "var(--stroke-colour)"
, children:
[ SVG.path
{ d:
"M38.488 9.364C40.623 5.175 44.979 2.303 50 2.303c5.021 0 9.377 2.872 11.512 7.061 11.679 1.276 19.955 4.435 19.955 8.127l1.258 4.867c.204.392.31.793.31 1.2 0 4.819-14.803 8.731-33.035 8.731-18.232 0-33.035-3.912-33.035-8.731 0-.407.106-.808.31-1.2l1.258-4.867c0-3.692 8.276-6.851 19.955-8.127zm18.743-.372A111.616 111.616 0 0050 8.76c-2.489 0-4.91.081-7.231.232A9.523 9.523 0 0150 5.674a9.523 9.523 0 017.231 3.318z"
}
, SVG.path
{ d:
"M80.438 30.325l-7.057 58.81c0 4.725-10.477 8.562-23.381 8.562s-23.381-3.837-23.381-8.562l-7.057-58.81C24.581 33.459 36.326 35.66 50 35.66s25.419-2.201 30.438-5.335z"
}
]
}
]
}

14
src/Yoga/Block/Icon/SVG/Checkmark.purs
View File

@ -14,11 +14,11 @@ checkmark =
, strokeLinejoin: "round"
, strokeMiterlimit: "1.5"
, children:
[ SVG.path
{ d: "M16.073 57.774l21.285 21.868 52.637-52.637"
, fill: "none"
, stroke: "var(--stroke-colour)"
, strokeWidth: "13"
}
]
[ SVG.path
{ d: "M16.073 57.774l21.285 21.868 52.637-52.637"
, fill: "none"
, stroke: "var(--stroke-colour)"
, strokeWidth: "13"
}
]
}

11
src/Yoga/Block/Icon/SVG/Cross.purs
View File

@ -13,9 +13,10 @@ cross =
, strokeLinejoin: "round"
, strokeMiterlimit: "2"
, children:
[ SVG.path
{ d: "M50 2.339c26.305 0 47.661 21.356 47.661 47.661S76.305 97.661 50 97.661 2.339 76.305 2.339 50 23.695 2.339 50 2.339zm0 38.773L31.838 22.949l-8.889 8.889L41.112 50 22.949 68.162l8.889 8.889L50 58.888l18.162 18.163 8.889-8.889L58.888 50l18.163-18.162-8.889-8.889L50 41.112z"
, fill: "var(--stroke-colour)"
}
]
[ SVG.path
{ d:
"M50 2.339c26.305 0 47.661 21.356 47.661 47.661S76.305 97.661 50 97.661 2.339 76.305 2.339 50 23.695 2.339 50 2.339zm0 38.773L31.838 22.949l-8.889 8.889L41.112 50 22.949 68.162l8.889 8.889L50 58.888l18.162 18.163 8.889-8.889L58.888 50l18.163-18.162-8.889-8.889L50 41.112z"
, fill: "var(--stroke-colour)"
}
]
}

11
src/Yoga/Block/Icon/SVG/DraggableIndicator.purs
View File

@ -13,9 +13,10 @@ draggableIndicator =
, strokeLinejoin: "round"
, strokeMiterlimit: "2"
, children:
[ SVG.path
{ d: "M12.582 55h74.836c2.76 0 5-2.24 5-5s-2.24-5-5-5H12.582c-2.76 0-5 2.24-5 5s2.24 5 5 5zM12.582 38.019h74.836c2.76 0 5-2.24 5-5s-2.24-5-5-5H12.582c-2.76 0-5 2.24-5 5s2.24 5 5 5zM12.582 71.981h74.836c2.76 0 5-2.24 5-5s-2.24-5-5-5H12.582c-2.76 0-5 2.24-5 5s2.24 5 5 5z"
, fill: "var(--stroke-colour)"
}
]
[ SVG.path
{ d:
"M12.582 55h74.836c2.76 0 5-2.24 5-5s-2.24-5-5-5H12.582c-2.76 0-5 2.24-5 5s2.24 5 5 5zM12.582 38.019h74.836c2.76 0 5-2.24 5-5s-2.24-5-5-5H12.582c-2.76 0-5 2.24-5 5s2.24 5 5 5zM12.582 71.981h74.836c2.76 0 5-2.24 5-5s-2.24-5-5-5H12.582c-2.76 0-5 2.24-5 5s2.24 5 5 5z"
, fill: "var(--stroke-colour)"
}
]
}

18
src/Yoga/Block/Icon/SVG/Ellipsis.purs
View File

@ -13,13 +13,13 @@ ellipsis =
, strokeLinejoin: "round"
, strokeMiterlimit: "2"
, children:
[ SVG.g
{ fill: "var(--stroke-colour)"
, children:
[ SVG.circle { cx: "50", cy: "50", r: "10" }
, SVG.circle { cx: "80", cy: "50", r: "10" }
, SVG.circle { cx: "20", cy: "50", r: "10" }
]
}
]
[ SVG.g
{ fill: "var(--stroke-colour)"
, children:
[ SVG.circle { cx: "50", cy: "50", r: "10" }
, SVG.circle { cx: "80", cy: "50", r: "10" }
, SVG.circle { cx: "20", cy: "50", r: "10" }
]
}
]
}

15
src/Yoga/Block/Icon/SVG/EyeClosed.purs
View File

@ -13,11 +13,12 @@ eyeClosed =
, strokeLinejoin: "round"
, strokeMiterlimit: "1.5"
, children:
[ SVG.path
{ d: "M50.173 21.996c23.346 0 42.3 27.978 42.3 27.978s-18.954 27.979-42.3 27.979c-23.346 0-42.301-27.979-42.301-27.979s18.955-27.978 42.301-27.978z"
, fill: "var(--stroke-colour)"
, stroke: "var(--stroke-colour)"
, strokeWidth: "8"
}
]
[ SVG.path
{ d:
"M50.173 21.996c23.346 0 42.3 27.978 42.3 27.978s-18.954 27.979-42.3 27.979c-23.346 0-42.301-27.979-42.301-27.979s18.955-27.978 42.301-27.978z"
, fill: "var(--stroke-colour)"
, stroke: "var(--stroke-colour)"
, strokeWidth: "8"
}
]
}

48
src/Yoga/Block/Icon/SVG/EyeOpen.purs
View File

@ -13,27 +13,29 @@ eyeOpen =
, strokeLinejoin: "round"
, strokeMiterlimit: "1.5"
, children:
[ SVG.path
{ fill: "none"
, d: "M0 0h100v100H0z"
}
, SVG.path
{ d: "M50.173 21.996c23.346 0 42.3 27.978 42.3 27.978s-18.954 27.979-42.3 27.979c-23.346 0-42.301-27.979-42.301-27.979s18.955-27.978 42.301-27.978z"
, fill: "none"
, stroke: "var(--stroke-colour)"
, strokeWidth: "8"
}
, SVG.circle
{ cx: "49.963"
, cy: "50.087"
, r: "19.869"
, fill: "none"
, stroke: "var(--stroke-colour)"
, strokeWidth: "6"
}
, SVG.path
{ d: "M49.963 40.748c5.155 0 9.339 4.184 9.339 9.339 0 5.154-4.184 9.339-9.339 9.339-5.154 0-9.339-4.185-9.339-9.339 0-5.155 4.185-9.339 9.339-9.339zm2.405 2.279a3.517 3.517 0 013.516 3.515 3.517 3.517 0 01-3.516 3.516 3.517 3.517 0 010-7.031z"
, fill: "var(--stroke-colour)"
}
]
[ SVG.path
{ fill: "none"
, d: "M0 0h100v100H0z"
}
, SVG.path
{ d:
"M50.173 21.996c23.346 0 42.3 27.978 42.3 27.978s-18.954 27.979-42.3 27.979c-23.346 0-42.301-27.979-42.301-27.979s18.955-27.978 42.301-27.978z"
, fill: "none"
, stroke: "var(--stroke-colour)"
, strokeWidth: "8"
}
, SVG.circle
{ cx: "49.963"
, cy: "50.087"
, r: "19.869"
, fill: "none"
, stroke: "var(--stroke-colour)"
, strokeWidth: "6"
}
, SVG.path
{ d:
"M49.963 40.748c5.155 0 9.339 4.184 9.339 9.339 0 5.154-4.184 9.339-9.339 9.339-5.154 0-9.339-4.185-9.339-9.339 0-5.155 4.185-9.339 9.339-9.339zm2.405 2.279a3.517 3.517 0 013.516 3.515 3.517 3.517 0 01-3.516 3.516 3.517 3.517 0 010-7.031z"
, fill: "var(--stroke-colour)"
}
]
}

66
src/Yoga/Block/Icon/SVG/Filter.purs
View File

@ -4,37 +4,37 @@ import React.Basic (JSX)
import React.Basic.DOM as R
import React.Basic.DOM.SVG as SVG
filter :: JSX
filter ∷ JSX
filter = SVG.filter
{ id: "a"
, height: "130%"
, children:
[ SVG.feGaussianBlur
{ in: "SourceAlpha"
, stdDeviation: "3"
}
, SVG.feOffset
{ dx: "2"
, dy: "2"
, result: "offsetblur"
}
, SVG.feComponentTransfer
{ children:
[ SVG.feFuncA
{ type: "linear"
, slope: ".5"
}
]
}
, SVG.feMerge
{ children:
[ SVG.feMergeNode
{
}
, SVG.feMergeNode
{ in: "SourceGraphic"
}
]
}
]
}
{ id: "a"
, height: "130%"
, children:
[ SVG.feGaussianBlur
{ in: "SourceAlpha"
, stdDeviation: "3"
}
, SVG.feOffset
{ dx: "2"
, dy: "2"
, result: "offsetblur"
}
, SVG.feComponentTransfer
{ children:
[ SVG.feFuncA
{ type: "linear"
, slope: ".5"
}
]
}
, SVG.feMerge
{ children:
[ SVG.feMergeNode
{
}
, SVG.feMergeNode
{ in: "SourceGraphic"
}
]
}
]
}

3
src/Yoga/Block/Icon/SVG/Folder.purs
View File

@ -14,7 +14,8 @@ folder =
, strokeMiterlimit: "2"
, children:
[ SVG.path
{ d: "M56.073 25.246c-6.361 0-7.669-12.345-14.898-12.345L26.127 12.9c-13.082 0-23.703 10.62-23.703 23.702v37.405c0 13.082 10.621 23.702 23.703 23.702h47.404c13.082 0 23.703-10.62 23.703-23.702 0 0-.003-28.648-.01-41.806a6.727 6.727 0 00-6.635-6.565c-9.924-.142-28.155-.39-34.516-.39zm34.277 9.768H9.304v34.062c0 12.92 6.079 21.409 17.262 21.409h46.526c11.183 0 17.262-8.489 17.262-21.409 0 0-.001-20.917-.004-34.062z"
{ d:
"M56.073 25.246c-6.361 0-7.669-12.345-14.898-12.345L26.127 12.9c-13.082 0-23.703 10.62-23.703 23.702v37.405c0 13.082 10.621 23.702 23.703 23.702h47.404c13.082 0 23.703-10.62 23.703-23.702 0 0-.003-28.648-.01-41.806a6.727 6.727 0 00-6.635-6.565c-9.924-.142-28.155-.39-34.516-.39zm34.277 9.768H9.304v34.062c0 12.92 6.079 21.409 17.262 21.409h46.526c11.183 0 17.262-8.489 17.262-21.409 0 0-.001-20.917-.004-34.062z"
, fill: "var(--stroke-colour)"
}
]

29
src/Yoga/Block/Icon/SVG/GithubLogo.purs
View File

@ -4,18 +4,19 @@ import React.Basic (JSX)
import React.Basic.DOM as R
import React.Basic.DOM.SVG as SVG
githubLogo :: JSX
githubLogo ∷ JSX
githubLogo = SVG.svg
{ width: "1024"
, height: "1024"
, fill: "none"
, xmlns: "http://www.w3.org/2000/svg"
, children:
[ SVG.path
{ fillRule: "evenodd"
, clipRule: "evenodd"
, d: "M512 0C229.12 0 0 229.12 0 512c0 226.56 146.56 417.92 350.08 485.76 25.6 4.48 35.2-10.88 35.2-24.32 0-12.16-.64-52.48-.64-95.36-128.64 23.68-161.92-31.36-172.16-60.16-5.76-14.72-30.72-60.16-52.48-72.32-17.92-9.6-43.52-33.28-.64-33.92 40.32-.64 69.12 37.12 78.72 52.48 46.08 77.44 119.68 55.68 149.12 42.24 4.48-33.28 17.92-55.68 32.64-68.48-113.92-12.8-232.96-56.96-232.96-252.8 0-55.68 19.84-101.76 52.48-137.6-5.12-12.8-23.04-65.28 5.12-135.68 0 0 42.88-13.44 140.8 52.48 40.96-11.52 84.48-17.28 128-17.28 43.52 0 87.04 5.76 128 17.28 97.92-66.56 140.8-52.48 140.8-52.48 28.16 70.4 10.24 122.88 5.12 135.68 32.64 35.84 52.48 81.28 52.48 137.6 0 196.48-119.68 240-233.6 252.8 18.56 16 34.56 46.72 34.56 94.72 0 68.48-.64 123.52-.64 140.8 0 13.44 9.6 29.44 35.2 24.32C877.44 929.92 1024 737.92 1024 512 1024 229.12 794.88 0 512 0z"
, fill: "#1B1F23"
}
]
}
{ width: "1024"
, height: "1024"
, fill: "none"
, xmlns: "http://www.w3.org/2000/svg"
, children:
[ SVG.path
{ fillRule: "evenodd"
, clipRule: "evenodd"
, d:
"M512 0C229.12 0 0 229.12 0 512c0 226.56 146.56 417.92 350.08 485.76 25.6 4.48 35.2-10.88 35.2-24.32 0-12.16-.64-52.48-.64-95.36-128.64 23.68-161.92-31.36-172.16-60.16-5.76-14.72-30.72-60.16-52.48-72.32-17.92-9.6-43.52-33.28-.64-33.92 40.32-.64 69.12 37.12 78.72 52.48 46.08 77.44 119.68 55.68 149.12 42.24 4.48-33.28 17.92-55.68 32.64-68.48-113.92-12.8-232.96-56.96-232.96-252.8 0-55.68 19.84-101.76 52.48-137.6-5.12-12.8-23.04-65.28 5.12-135.68 0 0 42.88-13.44 140.8 52.48 40.96-11.52 84.48-17.28 128-17.28 43.52 0 87.04 5.76 128 17.28 97.92-66.56 140.8-52.48 140.8-52.48 28.16 70.4 10.24 122.88 5.12 135.68 32.64 35.84 52.48 81.28 52.48 137.6 0 196.48-119.68 240-233.6 252.8 18.56 16 34.56 46.72 34.56 94.72 0 68.48-.64 123.52-.64 140.8 0 13.44 9.6 29.44 35.2 24.32C877.44 929.92 1024 737.92 1024 512 1024 229.12 794.88 0 512 0z"
, fill: "#1B1F23"
}
]
}

5
src/Yoga/Block/Icon/SVG/HeroiconCalendar.purs
View File

@ -3,7 +3,7 @@ module Yoga.Block.Icon.SVG.HeroiconCalendar where
import React.Basic (JSX)
import React.Basic.DOM.SVG as SVG
heroiconCalendar :: JSX
heroiconCalendar ∷ JSX
heroiconCalendar = SVG.svg
{ xmlns: "http://www.w3.org/2000/svg"
, className: "h-6 w-6"
@ -15,7 +15,8 @@ heroiconCalendar = SVG.svg
{ strokeLinecap: "round"
, strokeLinejoin: "round"
, strokeWidth: "2"
, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z"
, d:
"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z"
}
]
}

2
src/Yoga/Block/Icon/SVG/HeroiconClock.purs
View File

@ -3,7 +3,7 @@ module Yoga.Block.Icon.SVG.HeroiconClock where
import React.Basic (JSX)
import React.Basic.DOM.SVG as SVG
heroiconClock :: JSX
heroiconClock ∷ JSX
heroiconClock = SVG.svg
{ xmlns: "http://www.w3.org/2000/svg"
, className: "h-6 w-6"

5
src/Yoga/Block/Icon/SVG/HeroiconGroup.purs
View File

@ -3,7 +3,7 @@ module Yoga.Block.Icon.SVG.HeroiconGroup where
import React.Basic (JSX)
import React.Basic.DOM.SVG as SVG
heroiconGroup :: JSX
heroiconGroup ∷ JSX
heroiconGroup = SVG.svg
{ xmlns: "http://www.w3.org/2000/svg"
, className: "h-6 w-6"
@ -15,7 +15,8 @@ heroiconGroup = SVG.svg
{ strokeLinecap: "round"
, strokeLinejoin: "round"
, strokeWidth: "2"
, d: "M17 20h5v-2a3 3 0 0 0-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 0 1 5.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 0 1 9.288 0M15 7a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm6 3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM7 10a2 2 0 1 1-4 0 2 2 0 0 1 4 0z"
, d:
"M17 20h5v-2a3 3 0 0 0-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 0 1 5.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 0 1 9.288 0M15 7a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm6 3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM7 10a2 2 0 1 1-4 0 2 2 0 0 1 4 0z"
}
]
}

5
src/Yoga/Block/Icon/SVG/HeroiconMoon.purs
View File

@ -3,7 +3,7 @@ module Yoga.Block.Icon.SVG.HeroiconMoon where
import React.Basic (JSX)
import React.Basic.DOM.SVG as SVG
heroiconMoon :: JSX
heroiconMoon ∷ JSX
heroiconMoon = SVG.svg
{ xmlns: "http://www.w3.org/2000/svg"
, className: "h-6 w-6"
@ -15,7 +15,8 @@ heroiconMoon = SVG.svg
{ strokeLinecap: "round"
, strokeLinejoin: "round"
, strokeWidth: "2"
, d: "M20.354 15.354A9 9 0 0 1 8.646 3.646 9.003 9.003 0 0 0 12 21a9.003 9.003 0 0 0 8.354-5.646z"
, d:
"M20.354 15.354A9 9 0 0 1 8.646 3.646 9.003 9.003 0 0 0 12 21a9.003 9.003 0 0 0 8.354-5.646z"
}
]
}

5
src/Yoga/Block/Icon/SVG/HeroiconSun.purs
View File

@ -3,7 +3,7 @@ module Yoga.Block.Icon.SVG.HeroiconSun where
import React.Basic (JSX)
import React.Basic.DOM.SVG as SVG
heroiconSun :: JSX
heroiconSun ∷ JSX
heroiconSun = SVG.svg
{ xmlns: "http://www.w3.org/2000/svg"
, className: "h-6 w-6"
@ -15,7 +15,8 @@ heroiconSun = SVG.svg
{ strokeLinecap: "round"
, strokeLinejoin: "round"
, strokeWidth: "2"
, d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364-.707-.707M6.343 6.343l-.707-.707m12.728 0-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0z"
, d:
"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364-.707-.707M6.343 6.343l-.707-.707m12.728 0-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0z"
}
]
}

26
src/Yoga/Block/Icon/SVG/Key.purs
View File

@ -13,16 +13,18 @@ key =
, strokeLinejoin: "round"
, strokeMiterlimit: "2"
, children:
[ SVG.g
{ fill: "var(--stroke-colour)"
, children:
[ SVG.path
{ d: "M30.65 43.906c14.689 0 26.614 11.937 26.614 26.64 0 14.702-11.925 26.639-26.614 26.639-14.688 0-26.614-11.937-26.614-26.639 0-14.703 11.926-26.64 26.614-26.64zm-9.215 28.741a6.454 6.454 0 010 12.907 6.454 6.454 0 010-12.907z"
}
, SVG.path
{ d: "M79.123 7.855h10.701l.833.776-47.719 44.401 2.491 2.286 45.494-43.326v12.21l-8.681 3.927-2.311 10.777-12.195 6.78-6.678 14.839-17.216 8.651-20.256-9.646L79.123 7.855z"
}
]
}
]
[ SVG.g
{ fill: "var(--stroke-colour)"
, children:
[ SVG.path
{ d:
"M30.65 43.906c14.689 0 26.614 11.937 26.614 26.64 0 14.702-11.925 26.639-26.614 26.639-14.688 0-26.614-11.937-26.614-26.639 0-14.703 11.926-26.64 26.614-26.64zm-9.215 28.741a6.454 6.454 0 010 12.907 6.454 6.454 0 010-12.907z"
}
, SVG.path
{ d:
"M79.123 7.855h10.701l.833.776-47.719 44.401 2.491 2.286 45.494-43.326v12.21l-8.681 3.927-2.311 10.777-12.195 6.78-6.678 14.839-17.216 8.651-20.256-9.646L79.123 7.855z"
}
]
}
]
}

11
src/Yoga/Block/Icon/SVG/LogoNew.purs
View File

@ -3,7 +3,7 @@ module Yoga.Block.Icon.SVG.LogoNew where
import React.Basic (JSX)
import React.Basic.DOM.SVG as SVG
logoNew :: JSX
logoNew ∷ JSX
logoNew = SVG.svg
{ viewBox: "0 0 101 100"
, xmlns: "http://www.w3.org/2000/svg"
@ -27,16 +27,19 @@ logoNew = SVG.svg
, d: "M6.055 10.556h9.702V89.88H6.055z"
}
, SVG.path
{ d: "M15.601 10.556l3.221 10.638c-.093 19.349-.065 38.698 0 58.047l-3.221 10.638V10.556z"
{ d:
"M15.601 10.556l3.221 10.638c-.093 19.349-.065 38.698 0 58.047l-3.221 10.638V10.556z"
, fill: "#f477b9"
}
, SVG.path
{ d: "M61.746 48.656l5.82 11.896v14.712l3.115 5.908h8.96l-3.115-20.62 19.4-39.812-6.624-1.897-3.115 1.897-14.18 28.671-14.18-28.671h-9.738l.007.016a44.369 44.369 0 00-4.52-.212l-16.051-1.897-3.115 5.249v52.992l3.115 4.284h8.96l-3.39-24.528 2.511-2.614 17.391 24.733 6.004 2.213h10.362L45.915 54.647c7.178-.707 14.007-.214 15.831-5.991zm-18.17-19.854c8.259 0 10.362 2.26 10.362 10.44 0 9.194-2.103 10.44-10.362 10.44H33.37v-20.88h10.206z"
{ d:
"M61.746 48.656l5.82 11.896v14.712l3.115 5.908h8.96l-3.115-20.62 19.4-39.812-6.624-1.897-3.115 1.897-14.18 28.671-14.18-28.671h-9.738l.007.016a44.369 44.369 0 00-4.52-.212l-16.051-1.897-3.115 5.249v52.992l3.115 4.284h8.96l-3.39-24.528 2.511-2.614 17.391 24.733 6.004 2.213h10.362L45.915 54.647c7.178-.707 14.007-.214 15.831-5.991zm-18.17-19.854c8.259 0 10.362 2.26 10.362 10.44 0 9.194-2.103 10.44-10.362 10.44H33.37v-20.88h10.206z"
, fill: "#f477b9"
, fillRule: "nonzero"
}
, SVG.path
{ d: "M64.861 46.759l5.82 11.897v22.516h8.96V58.656L99.04 18.843h-9.738l-14.18 28.672-14.18-28.672s-12.628-.196-14.251-.196H27.525v62.329h8.96V56.044h4.986l17.53 24.932h10.362L51.755 55.81c7.178-.706 11.282-3.273 13.106-9.051zm-18.17-19.853c8.258 0 10.362 2.259 10.362 10.44 0 9.193-2.104 10.44-10.362 10.44H36.485v-20.88h10.206z"
{ d:
"M64.861 46.759l5.82 11.897v22.516h8.96V58.656L99.04 18.843h-9.738l-14.18 28.672-14.18-28.672s-12.628-.196-14.251-.196H27.525v62.329h8.96V56.044h4.986l17.53 24.932h10.362L51.755 55.81c7.178-.706 11.282-3.273 13.106-9.051zm-18.17-19.853c8.258 0 10.362 2.259 10.362 10.44 0 9.193-2.104 10.44-10.362 10.44H36.485v-20.88h10.206z"
, fill: "#aaffef"
, fillRule: "nonzero"
}

11
src/Yoga/Block/Icon/SVG/Moon.purs
View File

@ -13,9 +13,10 @@ moon =
, strokeLinejoin: "round"
, strokeMiterlimit: "1.5"
, children:
[ SVG.path
{ d: "M53.984 14.646c1.707.195 3.42.519 5.128.977 18.733 5.019 29.867 24.303 24.847 43.036-5.019 18.732-24.303 29.866-43.036 24.846-13.577-3.638-23.163-14.769-25.499-27.753a28.518 28.518 0 008.408 3.788c15.237 4.082 30.921-4.973 35.004-20.21 2.376-8.867.302-17.887-4.852-24.684z"
, fill: "var(--stroke-colour)"
}
]
[ SVG.path
{ d:
"M53.984 14.646c1.707.195 3.42.519 5.128.977 18.733 5.019 29.867 24.303 24.847 43.036-5.019 18.732-24.303 29.866-43.036 24.846-13.577-3.638-23.163-14.769-25.499-27.753a28.518 28.518 0 008.408 3.788c15.237 4.082 30.921-4.973 35.004-20.21 2.376-8.867.302-17.887-4.852-24.684z"
, fill: "var(--stroke-colour)"
}
]
}

8
src/Yoga/Block/Icon/SVG/Murmuras.purs
View File

File diff suppressed because one or more lines are too long

59
src/Yoga/Block/Icon/SVG/MurmurasLogos.purs
View File

@ -4,30 +4,37 @@ import React.Basic (JSX)
import React.Basic.DOM as R
import React.Basic.DOM.SVG as SVG
murmurasLogos :: JSX
murmurasLogos ∷ JSX
murmurasLogos = SVG.svg
{ viewBox: "0 0 400 400"
, xmlns: "http://www.w3.org/2000/svg"
, xmlSpace: "preserve"
, style: R.css { fillRule: "evenodd", clipRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: "2" }
, children:
[ SVG.path
{ style: R.css { fill: "none" }
, d: "M0 0h400v400H0z"
}
, SVG.path
{ style: R.css { fill: "#f7f7f7" }
, d: "M0 0h400v400H0z"
}
, SVG.path
{ d: "M681.275 65.243a3.897 3.897 0 0 1-2.823-1.219l-3.015-3.199a1.42 1.42 0 0 1-.337-1.362 1.42 1.42 0 0 1 .992-.994l35.69-10.01a.18.18 0 0 0 .067-.307 15.207 15.207 0 0 0-9.76-3.565c-1.368 0-2.732.186-4.057.553a4.045 4.045 0 0 1-4.012-1.12l-17.703-18.796a.165.165 0 0 0-.07-.046l-18.234-6.13a.175.175 0 0 0-.19.275l17.9 22.232a4.03 4.03 0 0 1-.133 5.214l-4.493 5.039c-.673.755-1.57 1.322-2.575 1.442a3.884 3.884 0 0 1-1.867-.232l-3.614-1.393a1.43 1.43 0 0 1-.552-2.284l4.705-5.28a.173.173 0 0 0 .006-.225l-24.694-30.671a4.066 4.066 0 0 1-.165-4.839 4.048 4.048 0 0 1 4.596-1.515l32.881 11.055c.627.21 1.2.575 1.653 1.06l16.797 17.83c.039.042.094.06.15.051a23.236 23.236 0 0 1 22.933 9.964l1.063 1.58a4.042 4.042 0 0 1 .443 3.643 4.05 4.05 0 0 1-2.7 2.494l-37.834 10.61a3.87 3.87 0 0 1-1.048.145M660.78 76.944a3.617 3.617 0 0 1-.12 4.676l-11.514 12.92c-.115.13.01.33.176.283l42.295-11.863c.137-.039.176-.221.066-.31a13.046 13.046 0 0 0-8.159-2.88c-1.172 0-2.343.16-3.479.474a3.623 3.623 0 0 1-3.598-1.006l-15.311-16.254a.163.163 0 0 0-.07-.045l-15.29-5.14c-.164-.056-.3.138-.191.273l15.194 18.872h.001zm-22.957 28.48a3.603 3.603 0 0 1-3.07-1.701 3.648 3.648 0 0 1 .37-4.324l17.998-20.195a.174.174 0 0 0 .006-.225l-21.315-26.475a3.646 3.646 0 0 1-.15-4.338 3.63 3.63 0 0 1 4.12-1.36l28.489 9.577a3.62 3.62 0 0 1 1.48.948l14.502 15.395c.038.04.094.059.149.051a20.25 20.25 0 0 1 19.913 8.697l.857 1.27c.282.416.513.873.609 1.365.39 2-.836 3.75-2.569 4.236L638.8 105.29a3.626 3.626 0 0 1-.977.134"
, style: R.css { fill: "#002340", fillRule: "nonzero" }
, transform: "scale(2.22036) rotate(-12.17 512.83 2982.762)"
}
, SVG.path
{ d: "M740.866 49.008a4.33 4.33 0 0 1-.14 5.596l-15.206 17.06c-.115.13.01.33.177.283l54.922-15.405a.18.18 0 0 0 .069-.306 16.737 16.737 0 0 0-10.891-4.05c-1.508 0-3.009.205-4.462.608a4.35 4.35 0 0 1-4.306-1.204l-19.398-20.592a.163.163 0 0 0-.07-.045l-20.32-6.832c-.165-.055-.3.138-.191.273l19.816 24.614zm-28.819 35.596a4.31 4.31 0 0 1-3.674-2.037 4.362 4.362 0 0 1 .44-5.175l22.908-25.701a.175.175 0 0 0 .005-.225L704.638 17.82a4.365 4.365 0 0 1-.178-5.191A4.343 4.343 0 0 1 709.39 11l35.999 12.102a4.344 4.344 0 0 1 1.77 1.136L765.59 43.8c.04.041.095.06.151.051a25.347 25.347 0 0 1 25.072 10.863l1.092 1.619c.333.494.607 1.037.722 1.62.47 2.393-.992 4.493-3.072 5.076l-76.34 21.412c-.38.108-.773.162-1.168.162"
, style: R.css { fill: "#002340", fillRule: "nonzero" }
, transform: "scale(2.22036) rotate(-12.17 512.83 2982.762)"
}
]
}
{ viewBox: "0 0 400 400"
, xmlns: "http://www.w3.org/2000/svg"
, xmlSpace: "preserve"
, style: R.css
{ fillRule: "evenodd"
, clipRule: "evenodd"
, strokeLinejoin: "round"
, strokeMiterlimit: "2"
}
, children:
[ SVG.path
{ style: R.css { fill: "none" }
, d: "M0 0h400v400H0z"
}
, SVG.path
{ style: R.css { fill: "#f7f7f7" }
, d: "M0 0h400v400H0z"
}
, SVG.path
{ d:
"M681.275 65.243a3.897 3.897 0 0 1-2.823-1.219l-3.015-3.199a1.42 1.42 0 0 1-.337-1.362 1.42 1.42 0 0 1 .992-.994l35.69-10.01a.18.18 0 0 0 .067-.307 15.207 15.207 0 0 0-9.76-3.565c-1.368 0-2.732.186-4.057.553a4.045 4.045 0 0 1-4.012-1.12l-17.703-18.796a.165.165 0 0 0-.07-.046l-18.234-6.13a.175.175 0 0 0-.19.275l17.9 22.232a4.03 4.03 0 0 1-.133 5.214l-4.493 5.039c-.673.755-1.57 1.322-2.575 1.442a3.884 3.884 0 0 1-1.867-.232l-3.614-1.393a1.43 1.43 0 0 1-.552-2.284l4.705-5.28a.173.173 0 0 0 .006-.225l-24.694-30.671a4.066 4.066 0 0 1-.165-4.839 4.048 4.048 0 0 1 4.596-1.515l32.881 11.055c.627.21 1.2.575 1.653 1.06l16.797 17.83c.039.042.094.06.15.051a23.236 23.236 0 0 1 22.933 9.964l1.063 1.58a4.042 4.042 0 0 1 .443 3.643 4.05 4.05 0 0 1-2.7 2.494l-37.834 10.61a3.87 3.87 0 0 1-1.048.145M660.78 76.944a3.617 3.617 0 0 1-.12 4.676l-11.514 12.92c-.115.13.01.33.176.283l42.295-11.863c.137-.039.176-.221.066-.31a13.046 13.046 0 0 0-8.159-2.88c-1.172 0-2.343.16-3.479.474a3.623 3.623 0 0 1-3.598-1.006l-15.311-16.254a.163.163 0 0 0-.07-.045l-15.29-5.14c-.164-.056-.3.138-.191.273l15.194 18.872h.001zm-22.957 28.48a3.603 3.603 0 0 1-3.07-1.701 3.648 3.648 0 0 1 .37-4.324l17.998-20.195a.174.174 0 0 0 .006-.225l-21.315-26.475a3.646 3.646 0 0 1-.15-4.338 3.63 3.63 0 0 1 4.12-1.36l28.489 9.577a3.62 3.62 0 0 1 1.48.948l14.502 15.395c.038.04.094.059.149.051a20.25 20.25 0 0 1 19.913 8.697l.857 1.27c.282.416.513.873.609 1.365.39 2-.836 3.75-2.569 4.236L638.8 105.29a3.626 3.626 0 0 1-.977.134"
, style: R.css { fill: "#002340", fillRule: "nonzero" }
, transform: "scale(2.22036) rotate(-12.17 512.83 2982.762)"
}
, SVG.path
{ d:
"M740.866 49.008a4.33 4.33 0 0 1-.14 5.596l-15.206 17.06c-.115.13.01.33.177.283l54.922-15.405a.18.18 0 0 0 .069-.306 16.737 16.737 0 0 0-10.891-4.05c-1.508 0-3.009.205-4.462.608a4.35 4.35 0 0 1-4.306-1.204l-19.398-20.592a.163.163 0 0 0-.07-.045l-20.32-6.832c-.165-.055-.3.138-.191.273l19.816 24.614zm-28.819 35.596a4.31 4.31 0 0 1-3.674-2.037 4.362 4.362 0 0 1 .44-5.175l22.908-25.701a.175.175 0 0 0 .005-.225L704.638 17.82a4.365 4.365 0 0 1-.178-5.191A4.343 4.343 0 0 1 709.39 11l35.999 12.102a4.344 4.344 0 0 1 1.77 1.136L765.59 43.8c.04.041.095.06.151.051a25.347 25.347 0 0 1 25.072 10.863l1.092 1.619c.333.494.607 1.037.722 1.62.47 2.393-.992 4.493-3.072 5.076l-76.34 21.412c-.38.108-.773.162-1.168.162"
, style: R.css { fill: "#002340", fillRule: "nonzero" }
, transform: "scale(2.22036) rotate(-12.17 512.83 2982.762)"
}
]
}

18
src/Yoga/Block/Icon/SVG/Off.purs
View File

@ -13,13 +13,13 @@ off =
, strokeLinejoin: "round"
, strokeMiterlimit: "1.5"
, children:
[ SVG.circle
{ cx: "50"
, cy: "50"
, r: "32"
, fill: "none"
, stroke: "var(--stroke-colour)"
, strokeWidth: "17"
}
]
[ SVG.circle
{ cx: "50"
, cy: "50"
, r: "32"
, fill: "none"
, stroke: "var(--stroke-colour)"
, strokeWidth: "17"
}
]
}

14
src/Yoga/Block/Icon/SVG/On.purs
View File

@ -14,11 +14,11 @@ on =
, strokeLinejoin: "round"
, strokeMiterlimit: "1.5"
, children:
[ SVG.path
{ d: "M50 10v80"
, fill: "none"
, stroke: "var(--stroke-colour)"
, strokeWidth: "17"
}
]
[ SVG.path
{ d: "M50 10v80"
, fill: "none"
, stroke: "var(--stroke-colour)"
, strokeWidth: "17"
}
]
}

106
src/Yoga/Block/Icon/SVG/Pixel4.purs
View File

@ -4,57 +4,57 @@ import React.Basic (JSX)
import React.Basic.DOM as R
import React.Basic.DOM.SVG as SVG
pixel4 :: JSX
pixel4 ∷ JSX
pixel4 = SVG.svg
{ xmlns: "http://www.w3.org/2000/svg"
, height: "1475"
, width: "690"
, children:
[ SVG.rect
{ strokeLinejoin: "round"
, fillRule: "evenodd"
, rx: "100"
, ry: "100"
, height: "1467"
, width: "684"
, stroke: "#ddd"
, strokeLinecap: "round"
, y: "4"
, x: "4"
, strokeWidth: "4"
}
, SVG.rect
{ fillRule: "evenodd"
, rx: "55"
, ry: "55"
, height: "1310"
, width: "630"
, y: "105"
, x: "29"
, fill: "#ddd"
}
, SVG.circle
{ strokeLinejoin: "round"
, cx: "190.56"
, strokeLinecap: "round"
, stroke: "#444"
, cy: "68.889"
, r: "10"
, strokeWidth: "3"
, fill: "none"
}
, SVG.rect
{ strokeLinejoin: "round"
, rx: "5"
, ry: "5"
, height: "12.5"
, width: "80"
, stroke: "#444"
, strokeLinecap: "round"
, y: "61.5"
, x: "309"
, strokeWidth: "3"
, fill: "none"
}
]
}
{ xmlns: "http://www.w3.org/2000/svg"
, height: "1475"
, width: "690"
, children:
[ SVG.rect
{ strokeLinejoin: "round"
, fillRule: "evenodd"
, rx: "100"
, ry: "100"
, height: "1467"
, width: "684"
, stroke: "#ddd"
, strokeLinecap: "round"
, y: "4"
, x: "4"
, strokeWidth: "4"
}
, SVG.rect
{ fillRule: "evenodd"
, rx: "55"
, ry: "55"
, height: "1310"
, width: "630"
, y: "105"
, x: "29"
, fill: "#ddd"
}
, SVG.circle
{ strokeLinejoin: "round"
, cx: "190.56"
, strokeLinecap: "round"
, stroke: "#444"
, cy: "68.889"
, r: "10"
, strokeWidth: "3"
, fill: "none"
}
, SVG.rect
{ strokeLinejoin: "round"
, rx: "5"
, ry: "5"
, height: "12.5"
, width: "80"
, stroke: "#444"
, strokeLinecap: "round"
, y: "61.5"
, x: "309"
, strokeWidth: "3"
, fill: "none"
}
]
}

11
src/Yoga/Block/Icon/SVG/Plus.purs
View File

@ -13,9 +13,10 @@ plus =
, strokeLinejoin: "round"
, strokeMiterlimit: "2"
, children:
[ SVG.path
{ d: "M50.302 2.596c26.33 0 47.707 21.376 47.707 47.706 0 26.33-21.377 47.707-47.707 47.707-26.33 0-47.706-21.377-47.706-47.707 0-26.33 21.376-47.706 47.706-47.706zm8.466 38.248V17.378H40.456v23.466H16.99v18.312h23.466v23.466h18.312V59.156h23.466V40.844H58.768z"
, fill: "var(--stroke-colour)"
}
]
[ SVG.path
{ d:
"M50.302 2.596c26.33 0 47.707 21.376 47.707 47.706 0 26.33-21.377 47.707-47.707 47.707-26.33 0-47.706-21.377-47.706-47.707 0-26.33 21.376-47.706 47.706-47.706zm8.466 38.248V17.378H40.456v23.466H16.99v18.312h23.466v23.466h18.312V59.156h23.466V40.844H58.768z"
, fill: "var(--stroke-colour)"
}
]
}

11
src/Yoga/Block/Icon/SVG/QuestionMark.purs
View File

@ -13,9 +13,10 @@ questionMark =
, strokeLinejoin: "round"
, strokeMiterlimit: "2"
, children:
[ SVG.path
{ d: "M50 10.037c22.056 0 39.963 17.907 39.963 39.963S72.056 89.963 50 89.963 10.037 72.056 10.037 50 27.944 10.037 50 10.037zM48.871 77.03c2.87 0 5.326-2.384 5.351-5.351-.025-2.918-2.481-5.301-5.351-5.301-2.967 0-5.374 2.383-5.35 5.301-.024 2.967 2.383 5.351 5.35 5.351zm-4.255-15.176h8.098v-.632c.049-5.156 1.727-7.515 5.691-9.947 4.474-2.675 7.271-6.323 7.271-11.892 0-8.22-6.396-13.375-15.686-13.375-8.512 0-15.418 4.718-15.661 13.959h8.657c.219-4.572 3.526-6.761 6.955-6.761 3.721 0 6.713 2.481 6.713 6.299 0 3.405-2.262 5.739-5.205 7.587-4.304 2.676-6.785 5.375-6.833 14.13v.632z"
, fill: "var(--stroke-colour)"
}
]
[ SVG.path
{ d:
"M50 10.037c22.056 0 39.963 17.907 39.963 39.963S72.056 89.963 50 89.963 10.037 72.056 10.037 50 27.944 10.037 50 10.037zM48.871 77.03c2.87 0 5.326-2.384 5.351-5.351-.025-2.918-2.481-5.301-5.351-5.301-2.967 0-5.374 2.383-5.35 5.301-.024 2.967 2.383 5.351 5.35 5.351zm-4.255-15.176h8.098v-.632c.049-5.156 1.727-7.515 5.691-9.947 4.474-2.675 7.271-6.323 7.271-11.892 0-8.22-6.396-13.375-15.686-13.375-8.512 0-15.418 4.718-15.661 13.959h8.657c.219-4.572 3.526-6.761 6.955-6.761 3.721 0 6.713 2.481 6.713 6.299 0 3.405-2.262 5.739-5.205 7.587-4.304 2.676-6.785 5.375-6.833 14.13v.632z"
, fill: "var(--stroke-colour)"
}
]
}

31
src/Yoga/Block/Icon/SVG/SimpleKey.purs
View File

@ -13,19 +13,20 @@ simpleKey =
, strokeLinejoin: "round"
, strokeMiterlimit: "2"
, children:
[ SVG.g
{ fill: "var(--stroke-colour)"
, children:
[ SVG.ellipse
{ cx: "30.65"
, cy: "70.546"
, rx: "26.614"
, ry: "26.639"
}
, SVG.path
{ d: "M79.123 7.855h10.701l.833.776.266 3.361v12.21l-8.681 3.927-2.311 10.777-12.195 6.78-6.678 14.839-17.216 8.651-20.256-9.646L79.123 7.855z"
}
]
}
]
[ SVG.g
{ fill: "var(--stroke-colour)"
, children:
[ SVG.ellipse
{ cx: "30.65"
, cy: "70.546"
, rx: "26.614"
, ry: "26.639"
}
, SVG.path
{ d:
"M79.123 7.855h10.701l.833.776.266 3.361v12.21l-8.681 3.927-2.311 10.777-12.195 6.78-6.678 14.839-17.216 8.651-20.256-9.646L79.123 7.855z"
}
]
}
]
}

42
src/Yoga/Block/Icon/SVG/Spd.purs
View File

@ -4,22 +4,28 @@ import React.Basic (JSX)
import React.Basic.DOM as R
import React.Basic.DOM.SVG as SVG
spd :: JSX
spd ∷ JSX
spd = SVG.svg
{ viewBox: "0 0 1184 1184"
, xmlns: "http://www.w3.org/2000/svg"
, xmlSpace: "preserve"
, style: R.css { fillRule: "evenodd", clipRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: "2" }
, children:
[ SVG.path
{ style: R.css { fill: "#ed1c24", fillRule: "nonzero" }
, d: "M.346.347H283.81V283.81H.346z"
, transform: "scale(4.16667)"
}
, SVG.path
{ d: "M92.653 175.291h38.716c22.255 0 28.062 16.116 28.062 28.852 0 17.125-7.125 29.783-29.155 29.783h-12.692v28.865H92.653v-87.5zm24.71 39.777h1.931c8.261 0 16.404.477 16.404-10.227 0-10.209-7.562-10.215-16.404-10.215h-1.931v20.442zM164.923 175.291h36.95c24.309 0 39.089 19.1 39.089 43.64 0 24.541-14.896 43.86-39.089 43.86h-36.95v-87.5zm25.073 67.497h2.709c13.544 0 23.689-7.974 23.689-23.857 0-13.346-8.872-22.876-23.458-22.876h-2.94v46.733zM72.959 199.508c-4.767-3.084-12.477-4.907-16.122-4.907-4.463 0-10.181 1.251-10.181 6.113 0 5.093 5.65 6.062 10.786 7.435 0 0 6.304 1.377 8.995 2.26C78.039 214.214 86.7 218.3 86.7 233.732c0 8.681-2.231 17.117-9.67 23.021-7.314 5.788-17.109 8.696-26.531 8.696-11.777 0-23.466-2.855-33.33-10.909l10.891-18.29c6.075 4.978 13.265 9.506 21.572 9.506 5.702 0 11.3-1.708 11.3-7.844 0-6.366-9.054-6.712-14.276-8.047-11.268-2.879-25.291-6.664-25.291-27.04 0-17.711 13.513-29.287 32.234-29.287 9.422 0 21.427 4.328 29.734 8.727l-10.374 17.243z"
, style: R.css { fill: "#fff", fillRule: "nonzero" }
, transform: "scale(4.16667)"
}
]
}
{ viewBox: "0 0 1184 1184"
, xmlns: "http://www.w3.org/2000/svg"
, xmlSpace: "preserve"
, style: R.css
{ fillRule: "evenodd"
, clipRule: "evenodd"
, strokeLinejoin: "round"
, strokeMiterlimit: "2"
}
, children:
[ SVG.path
{ style: R.css { fill: "#ed1c24", fillRule: "nonzero" }
, d: "M.346.347H283.81V283.81H.346z"
, transform: "scale(4.16667)"
}
, SVG.path
{ d:
"M92.653 175.291h38.716c22.255 0 28.062 16.116 28.062 28.852 0 17.125-7.125 29.783-29.155 29.783h-12.692v28.865H92.653v-87.5zm24.71 39.777h1.931c8.261 0 16.404.477 16.404-10.227 0-10.209-7.562-10.215-16.404-10.215h-1.931v20.442zM164.923 175.291h36.95c24.309 0 39.089 19.1 39.089 43.64 0 24.541-14.896 43.86-39.089 43.86h-36.95v-87.5zm25.073 67.497h2.709c13.544 0 23.689-7.974 23.689-23.857 0-13.346-8.872-22.876-23.458-22.876h-2.94v46.733zM72.959 199.508c-4.767-3.084-12.477-4.907-16.122-4.907-4.463 0-10.181 1.251-10.181 6.113 0 5.093 5.65 6.062 10.786 7.435 0 0 6.304 1.377 8.995 2.26C78.039 214.214 86.7 218.3 86.7 233.732c0 8.681-2.231 17.117-9.67 23.021-7.314 5.788-17.109 8.696-26.531 8.696-11.777 0-23.466-2.855-33.33-10.909l10.891-18.29c6.075 4.978 13.265 9.506 21.572 9.506 5.702 0 11.3-1.708 11.3-7.844 0-6.366-9.054-6.712-14.276-8.047-11.268-2.879-25.291-6.664-25.291-27.04 0-17.711 13.513-29.287 32.234-29.287 9.422 0 21.427 4.328 29.734 8.727l-10.374 17.243z"
, style: R.css { fill: "#fff", fillRule: "nonzero" }
, transform: "scale(4.16667)"
}
]
}

79
src/Yoga/Block/Icon/SVG/Spinner2.purs
View File

@ -4,43 +4,44 @@ import React.Basic (JSX)
import React.Basic.DOM as R
import React.Basic.DOM.SVG as SVG
spinner2 :: JSX
spinner2 ∷ JSX
spinner2 = SVG.svg
{ width: "24"
, height: "24"
, xmlns: "http://www.w3.org/2000/svg"
, children:
[ SVG.style
{ children:
[ R.text "@keyframes spinner_qtyZ{0%{r:0}25%{r:3px;cx:4px}50%{r:3px;cx:12px}75%{r:3px;cx:20px}to{r:0;cx:20px}}.spinner_nOfF{animation:spinner_qtyZ 2s cubic-bezier(.36,.6,.31,1) infinite}"
]
}
, SVG.circle
{ className:"spinner_nOfF"
, cx: "4"
, cy: "12"
, r: "3"
}
, SVG.circle
{ className:"spinner_nOfF"
, cx: "4"
, cy: "12"
, r: "3"
, style: R.css { animationDelay: "-.5s" }
}
, SVG.circle
{ className:"spinner_nOfF"
, cx: "4"
, cy: "12"
, r: "3"
, style: R.css { animationDelay: "-1s" }
}
, SVG.circle
{ className:"spinner_nOfF"
, cx: "4"
, cy: "12"
, r: "3"
, style: R.css { animationDelay: "-1.5s" }
}
]
}
{ width: "24"
, height: "24"
, xmlns: "http://www.w3.org/2000/svg"
, children:
[ SVG.style
{ children:
[ R.text
"@keyframes spinner_qtyZ{0%{r:0}25%{r:3px;cx:4px}50%{r:3px;cx:12px}75%{r:3px;cx:20px}to{r:0;cx:20px}}.spinner_nOfF{animation:spinner_qtyZ 2s cubic-bezier(.36,.6,.31,1) infinite}"
]
}
, SVG.circle
{ className: "spinner_nOfF"
, cx: "4"
, cy: "12"
, r: "3"
}
, SVG.circle
{ className: "spinner_nOfF"
, cx: "4"
, cy: "12"
, r: "3"
, style: R.css { animationDelay: "-.5s" }
}
, SVG.circle
{ className: "spinner_nOfF"
, cx: "4"
, cy: "12"
, r: "3"
, style: R.css { animationDelay: "-1s" }
}
, SVG.circle
{ className: "spinner_nOfF"
, cx: "4"
, cy: "12"
, r: "3"
, style: R.css { animationDelay: "-1.5s" }
}
]
}

23
src/Yoga/Block/Icon/SVG/Sun.purs
View File

@ -13,15 +13,16 @@ sun =
, strokeLinejoin: "round"
, strokeMiterlimit: "2"
, children:
[ SVG.circle
{ cx: "50"
, cy: "49.997"
, r: "24.82"
, fill: "var(--stroke-colour)"
}
, SVG.path
{ d: "M2.239 51.966c0 1.64 1.33 2.971 2.971 2.971h13.417a2.971 2.971 0 002.971-2.971v-3.823a2.97 2.97 0 00-2.971-2.971H5.21a2.97 2.97 0 00-2.971 2.971v3.823zM78.415 51.966a2.972 2.972 0 002.971 2.971h13.418a2.971 2.971 0 002.971-2.971v-3.823a2.97 2.97 0 00-2.971-2.971H81.386a2.971 2.971 0 00-2.971 2.971v3.823zM17.581 85.183a2.972 2.972 0 004.202 0l9.487-9.488a2.97 2.97 0 000-4.201l-2.703-2.703a2.97 2.97 0 00-4.202 0l-9.487 9.487a2.972 2.972 0 000 4.202l2.703 2.703zM71.446 31.318a2.972 2.972 0 004.202 0l9.487-9.488a2.969 2.969 0 000-4.201l-2.703-2.704a2.97 2.97 0 00-4.201 0l-9.488 9.488a2.972 2.972 0 000 4.202l2.703 2.703zM14.878 17.629a2.97 2.97 0 000 4.201l9.487 9.488a2.972 2.972 0 004.202 0l2.703-2.703a2.972 2.972 0 000-4.202l-9.487-9.488a2.972 2.972 0 00-4.202 0l-2.703 2.704zM68.743 71.494a2.97 2.97 0 000 4.201l9.488 9.488a2.97 2.97 0 004.201 0l2.703-2.703a2.97 2.97 0 000-4.202l-9.487-9.487a2.97 2.97 0 00-4.202 0l-2.703 2.703zM48.095 2.286a2.97 2.97 0 00-2.971 2.971v13.417a2.97 2.97 0 002.971 2.971h3.823a2.97 2.97 0 002.971-2.971V5.257a2.97 2.97 0 00-2.971-2.971h-3.823zM48.095 78.463a2.97 2.97 0 00-2.971 2.971v13.417a2.97 2.97 0 002.971 2.971h3.823a2.97 2.97 0 002.971-2.971V81.434a2.97 2.97 0 00-2.971-2.971h-3.823z"
, fill: "var(--stroke-colour)"
}
]
[ SVG.circle
{ cx: "50"
, cy: "49.997"
, r: "24.82"
, fill: "var(--stroke-colour)"
}
, SVG.path
{ d:
"M2.239 51.966c0 1.64 1.33 2.971 2.971 2.971h13.417a2.971 2.971 0 002.971-2.971v-3.823a2.97 2.97 0 00-2.971-2.971H5.21a2.97 2.97 0 00-2.971 2.971v3.823zM78.415 51.966a2.972 2.972 0 002.971 2.971h13.418a2.971 2.971 0 002.971-2.971v-3.823a2.97 2.97 0 00-2.971-2.971H81.386a2.971 2.971 0 00-2.971 2.971v3.823zM17.581 85.183a2.972 2.972 0 004.202 0l9.487-9.488a2.97 2.97 0 000-4.201l-2.703-2.703a2.97 2.97 0 00-4.202 0l-9.487 9.487a2.972 2.972 0 000 4.202l2.703 2.703zM71.446 31.318a2.972 2.972 0 004.202 0l9.487-9.488a2.969 2.969 0 000-4.201l-2.703-2.704a2.97 2.97 0 00-4.201 0l-9.488 9.488a2.972 2.972 0 000 4.202l2.703 2.703zM14.878 17.629a2.97 2.97 0 000 4.201l9.487 9.488a2.972 2.972 0 004.202 0l2.703-2.703a2.972 2.972 0 000-4.202l-9.487-9.488a2.972 2.972 0 00-4.202 0l-2.703 2.704zM68.743 71.494a2.97 2.97 0 000 4.201l9.488 9.488a2.97 2.97 0 004.201 0l2.703-2.703a2.97 2.97 0 000-4.202l-9.487-9.487a2.97 2.97 0 00-4.202 0l-2.703 2.703zM48.095 2.286a2.97 2.97 0 00-2.971 2.971v13.417a2.97 2.97 0 002.971 2.971h3.823a2.97 2.97 0 002.971-2.971V5.257a2.97 2.97 0 00-2.971-2.971h-3.823zM48.095 78.463a2.97 2.97 0 00-2.971 2.971v13.417a2.97 2.97 0 002.971 2.971h3.823a2.97 2.97 0 002.971-2.971V81.434a2.97 2.97 0 00-2.971-2.971h-3.823z"
, fill: "var(--stroke-colour)"
}
]
}

356
src/Yoga/Block/Icon/SVG/Tmp.purs
View File

@ -4,169 +4,195 @@ import React.Basic (JSX)
import React.Basic.DOM as R
import React.Basic.DOM.SVG as SVG
tmp :: JSX
tmp ∷ JSX
tmp = SVG.svg
{ viewBox: "0 0 1200 1527"
, xmlns: "http://www.w3.org/2000/svg"
, xmlSpace: "preserve"
, style: R.css { fillRule: "evenodd", clipRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: "2" }
, children:
[ SVG.path
{ d: "m0 503.083 22-3.409c22-3.409 67-10.227 111-13.635 45-3.409 89-3.409 134 6.817 44 10.227 89 30.679 133 34.088 44 3.409 89-10.226 133-13.635 45-3.409 89 3.409 134 27.27 44 23.862 89 64.767 133 68.176 44 3.409 89-30.679 133-44.314 45-13.635 89-6.818 134 6.817 44 13.635 89 34.088 111 44.314l22 10.227V1211H0V503.083z"
, style: R.css { fill: "url(#a)" }
, transform: "translate(0 -484)"
}
, SVG.path
{ d: "m0 655.221 22-1.901c22-1.901 67-5.703 111-3.802 45 1.901 89 9.505 134 20.911 44 11.405 89 26.613 133 26.613s89-15.208 133-15.208c45 0 89 15.208 134 22.812 44 7.603 89 7.603 133-5.703 44-13.307 89-39.92 133-41.821 45-1.901 89 20.91 134 34.217 44 13.307 89 17.109 111 19.01l22 1.9V1318H0V655.221z"
, style: R.css { fill: "url(#b)" }
, transform: "translate(0 -484)"
}
, SVG.path
{ d: "m0 848.096 33 8.219c34 8.219 100 24.658 167 20.548 67-4.11 133-28.767 200-45.205C467 815.219 533 807 600 807s133 8.219 200 20.548c67 12.329 133 28.767 200 28.767s133-16.438 167-24.657l33-8.22V1377H0V848.096z"
, style: R.css { fill: "url(#c)" }
, transform: "translate(0 -484)"
}
, SVG.path
{ d: "m0 925.667 50 18c50 18 150 54 250 54s200-36 300-60 200-36 300-18 200 66 250 90.003l50 24V1683H0V925.667z"
, style: R.css { fill: "url(#d)" }
, transform: "translate(0 -484)"
}
, SVG.path
{ d: "m0 1056.25 25-2.42c25-2.42 75-7.26 125 0s100 26.62 150 38.72c50 12.1 100 16.94 150 14.52 50-2.42 100-12.1 150-16.94 50-4.84 100-4.84 150 2.42s100 21.77 150 36.29 100 29.04 150 26.62c50-2.42 100-21.78 125-31.46l25-9.68V1669H0v-612.75z"
, style: R.css { fill: "url(#e)" }
, transform: "translate(0 -484)"
}
, SVG.path
{ d: "M0 1737v-528.85c28.5-.02 100 12.03 150 0s100-18.9 150-10.31c50 8.59 100 32.66 150 32.66s100-24.07 150-25.79c50-1.71 100 18.91 150 32.66 50 13.75 100 20.63 150 15.47 50-5.16 100-22.34 150-24.06 50-1.72 100 12.03 125 18.9l25 6.88V1737H0z"
, style: R.css { fill: "url(#f)" }
, transform: "translate(0 -484)"
}
, SVG.path
{ d: "m0 1315 40 13.4c40 13.41 120 40.21 200 58.08 80 17.87 160 26.81 240 13.41 80-13.41 160-49.15 240-35.75 80 13.41 160 75.96 240 89.36 80 13.4 160-22.34 200-40.21l40-17.87V2011H0v-696z"
, style: R.css { fill: "#5c0bc2" }
, transform: "translate(0 -484)"
}
, SVG.defs
{ children:
[ SVG.linearGradient
{ id: "a"
, x1: "0"
, y1: "0"
, x2: "1"
, y2: "0"
, gradientUnits: "userSpaceOnUse"
, gradientTransform: "rotate(90 58 542) scale(427)"
, children:
[ SVG.stop
{ offset: "0"
, style: R.css { stopColor: "#e683ff", stopOpacity: "1" }
}
, SVG.stop
{ offset: "1"
, style: R.css { stopColor: "#ff97f5", stopOpacity: "1" }
}
]
}
, SVG.linearGradient
{ id: "b"
, x1: "0"
, y1: "0"
, x2: "1"
, y2: "0"
, gradientUnits: "userSpaceOnUse"
, gradientTransform: "matrix(0 124.08 -124.08 0 600 649)"
, children:
[ SVG.stop
{ offset: "0"
, style: R.css { stopColor: "#cc60ff", stopOpacity: "1" }
}
, SVG.stop
{ offset: "1"
, style: R.css { stopColor: "#e062ff", stopOpacity: "1" }
}
]
}
, SVG.linearGradient
{ id: "c"
, x1: "0"
, y1: "0"
, x2: "1"
, y2: "0"
, gradientUnits: "userSpaceOnUse"
, gradientTransform: "matrix(0 238.356 -238.356 0 600 731.658)"
, children:
[ SVG.stop
{ offset: "0"
, style: R.css { stopColor: "#a32eff", stopOpacity: "1" }
}
, SVG.stop
{ offset: "1"
, style: R.css { stopColor: "#c03cff", stopOpacity: "1" }
}
]
}
, SVG.linearGradient
{ id: "d"
, x1: "0"
, y1: "0"
, x2: "1"
, y2: "0"
, gradientUnits: "userSpaceOnUse"
, gradientTransform: "matrix(0 452 -452 0 600 911)"
, children:
[ SVG.stop
{ offset: "0"
, style: R.css { stopColor: "#8600f0", stopOpacity: "1" }
}
, SVG.stop
{ offset: "1"
, style: R.css { stopColor: "#b659ff", stopOpacity: "1" }
}
]
}
, SVG.linearGradient
{ id: "e"
, x1: "0"
, y1: "0"
, x2: "1"
, y2: "0"
, gradientUnits: "userSpaceOnUse"
, gradientTransform: "matrix(0 359 -359 0 600 1050)"
, children:
[ SVG.stop
{ offset: "0"
, style: R.css { stopColor: "#ca33ff", stopOpacity: "1" }
}
, SVG.stop
{ offset: "0"
, style: R.css { stopColor: "#7d17ff", stopOpacity: "1" }
}
, SVG.stop
{ offset: "1"
, style: R.css { stopColor: "#843dde", stopOpacity: "1" }
}
]
}
, SVG.linearGradient
{ id: "f"
, x1: "0"
, y1: "0"
, x2: "1"
, y2: "0"
, gradientUnits: "userSpaceOnUse"
, gradientTransform: "matrix(0 121.48 -121.48 0 600 1362.52)"
, children:
[ SVG.stop
{ offset: "0"
, style: R.css { stopColor: "#6706e3", stopOpacity: "1" }
}
, SVG.stop
{ offset: "1"
, style: R.css { stopColor: "#682de7", stopOpacity: "1" }
}
]
}
]
}
]
}
{ viewBox: "0 0 1200 1527"
, xmlns: "http://www.w3.org/2000/svg"
, xmlSpace: "preserve"
, style: R.css
{ fillRule: "evenodd"
, clipRule: "evenodd"
, strokeLinejoin: "round"
, strokeMiterlimit: "2"
}
, children:
[ SVG.path
{ d:
"m0 503.083 22-3.409c22-3.409 67-10.227 111-13.635 45-3.409 89-3.409 134 6.817 44 10.227 89 30.679 133 34.088 44 3.409 89-10.226 133-13.635 45-3.409 89 3.409 134 27.27 44 23.862 89 64.767 133 68.176 44 3.409 89-30.679 133-44.314 45-13.635 89-6.818 134 6.817 44 13.635 89 34.088 111 44.314l22 10.227V1211H0V503.083z"
, style: R.css { fill: "url(#a)" }
, transform: "translate(0 -484)"
}
, SVG.path
{ d:
"m0 655.221 22-1.901c22-1.901 67-5.703 111-3.802 45 1.901 89 9.505 134 20.911 44 11.405 89 26.613 133 26.613s89-15.208 133-15.208c45 0 89 15.208 134 22.812 44 7.603 89 7.603 133-5.703 44-13.307 89-39.92 133-41.821 45-1.901 89 20.91 134 34.217 44 13.307 89 17.109 111 19.01l22 1.9V1318H0V655.221z"
, style: R.css { fill: "url(#b)" }
, transform: "translate(0 -484)"
}
, SVG.path
{ d:
"m0 848.096 33 8.219c34 8.219 100 24.658 167 20.548 67-4.11 133-28.767 200-45.205C467 815.219 533 807 600 807s133 8.219 200 20.548c67 12.329 133 28.767 200 28.767s133-16.438 167-24.657l33-8.22V1377H0V848.096z"
, style: R.css { fill: "url(#c)" }
, transform: "translate(0 -484)"
}
, SVG.path
{ d:
"m0 925.667 50 18c50 18 150 54 250 54s200-36 300-60 200-36 300-18 200 66 250 90.003l50 24V1683H0V925.667z"
, style: R.css { fill: "url(#d)" }
, transform: "translate(0 -484)"
}
, SVG.path
{ d:
"m0 1056.25 25-2.42c25-2.42 75-7.26 125 0s100 26.62 150 38.72c50 12.1 100 16.94 150 14.52 50-2.42 100-12.1 150-16.94 50-4.84 100-4.84 150 2.42s100 21.77 150 36.29 100 29.04 150 26.62c50-2.42 100-21.78 125-31.46l25-9.68V1669H0v-612.75z"
, style: R.css { fill: "url(#e)" }
, transform: "translate(0 -484)"
}
, SVG.path
{ d:
"M0 1737v-528.85c28.5-.02 100 12.03 150 0s100-18.9 150-10.31c50 8.59 100 32.66 150 32.66s100-24.07 150-25.79c50-1.71 100 18.91 150 32.66 50 13.75 100 20.63 150 15.47 50-5.16 100-22.34 150-24.06 50-1.72 100 12.03 125 18.9l25 6.88V1737H0z"
, style: R.css { fill: "url(#f)" }
, transform: "translate(0 -484)"
}
, SVG.path
{ d:
"m0 1315 40 13.4c40 13.41 120 40.21 200 58.08 80 17.87 160 26.81 240 13.41 80-13.41 160-49.15 240-35.75 80 13.41 160 75.96 240 89.36 80 13.4 160-22.34 200-40.21l40-17.87V2011H0v-696z"
, style: R.css { fill: "#5c0bc2" }
, transform: "translate(0 -484)"
}
, SVG.defs
{ children:
[ SVG.linearGradient
{ id: "a"
, x1: "0"
, y1: "0"
, x2: "1"
, y2: "0"
, gradientUnits: "userSpaceOnUse"
, gradientTransform: "rotate(90 58 542) scale(427)"
, children:
[ SVG.stop
{ offset: "0"
, style: R.css
{ stopColor: "#e683ff", stopOpacity: "1" }
}
, SVG.stop
{ offset: "1"
, style: R.css
{ stopColor: "#ff97f5", stopOpacity: "1" }
}
]
}
, SVG.linearGradient
{ id: "b"
, x1: "0"
, y1: "0"
, x2: "1"
, y2: "0"
, gradientUnits: "userSpaceOnUse"
, gradientTransform: "matrix(0 124.08 -124.08 0 600 649)"
, children:
[ SVG.stop
{ offset: "0"
, style: R.css
{ stopColor: "#cc60ff", stopOpacity: "1" }
}
, SVG.stop
{ offset: "1"
, style: R.css
{ stopColor: "#e062ff", stopOpacity: "1" }
}
]
}
, SVG.linearGradient
{ id: "c"
, x1: "0"
, y1: "0"
, x2: "1"
, y2: "0"
, gradientUnits: "userSpaceOnUse"
, gradientTransform:
"matrix(0 238.356 -238.356 0 600 731.658)"
, children:
[ SVG.stop
{ offset: "0"
, style: R.css
{ stopColor: "#a32eff", stopOpacity: "1" }
}
, SVG.stop
{ offset: "1"
, style: R.css
{ stopColor: "#c03cff", stopOpacity: "1" }
}
]
}
, SVG.linearGradient
{ id: "d"
, x1: "0"
, y1: "0"
, x2: "1"
, y2: "0"
, gradientUnits: "userSpaceOnUse"
, gradientTransform: "matrix(0 452 -452 0 600 911)"
, children:
[ SVG.stop
{ offset: "0"
, style: R.css
{ stopColor: "#8600f0", stopOpacity: "1" }
}
, SVG.stop
{ offset: "1"
, style: R.css
{ stopColor: "#b659ff", stopOpacity: "1" }
}
]
}
, SVG.linearGradient
{ id: "e"
, x1: "0"
, y1: "0"
, x2: "1"
, y2: "0"
, gradientUnits: "userSpaceOnUse"
, gradientTransform: "matrix(0 359 -359 0 600 1050)"
, children:
[ SVG.stop
{ offset: "0"
, style: R.css
{ stopColor: "#ca33ff", stopOpacity: "1" }
}
, SVG.stop
{ offset: "0"
, style: R.css
{ stopColor: "#7d17ff", stopOpacity: "1" }
}
, SVG.stop
{ offset: "1"
, style: R.css
{ stopColor: "#843dde", stopOpacity: "1" }
}
]
}
, SVG.linearGradient
{ id: "f"
, x1: "0"
, y1: "0"
, x2: "1"
, y2: "0"
, gradientUnits: "userSpaceOnUse"
, gradientTransform: "matrix(0 121.48 -121.48 0 600 1362.52)"
, children:
[ SVG.stop
{ offset: "0"
, style: R.css
{ stopColor: "#6706e3", stopOpacity: "1" }
}
, SVG.stop
{ offset: "1"
, style: R.css
{ stopColor: "#682de7", stopOpacity: "1" }
}
]
}
]
}
]
}

3
src/Yoga/Block/Icon/SVG/Warn.purs
View File

@ -14,7 +14,8 @@ warn =
, strokeMiterlimit: "2"
, children:
[ SVG.path
{ d: "M41.478 15.313a9.704 9.704 0 0117.044 0L91.27 75.397a9.706 9.706 0 01-8.522 14.351H17.252A9.705 9.705 0 018.73 75.397l32.748-60.084zM50 77.357c2.909 0 5.432-2.432 5.455-5.455-.023-2.977-2.546-5.409-5.455-5.409-3 0-5.477 2.432-5.454 5.409C44.523 74.925 47 77.357 50 77.357zm5.046-44.137H44.932l.909 29.591h8.318l.887-29.591z"
{ d:
"M41.478 15.313a9.704 9.704 0 0117.044 0L91.27 75.397a9.706 9.706 0 01-8.522 14.351H17.252A9.705 9.705 0 018.73 75.397l32.748-60.084zM50 77.357c2.909 0 5.432-2.432 5.455-5.455-.023-2.977-2.546-5.409-5.455-5.409-3 0-5.477 2.432-5.454 5.409C44.523 74.925 47 77.357 50 77.357zm5.046-44.137H44.932l.909 29.591h8.318l.887-29.591z"
, fill: "var(--stroke-colour)"
}
]

153
src/Yoga/Block/Icon/SVG/WhatsAppLogo.purs
View File

@ -4,74 +4,87 @@ import React.Basic (JSX)
import React.Basic.DOM as R
import React.Basic.DOM.SVG as SVG
whatsAppLogo :: JSX
whatsAppLogo ∷ JSX
whatsAppLogo = SVG.svg
{ viewBox: "0 0 1281 1067"
, xmlns: "http://www.w3.org/2000/svg"
, xmlSpace: "preserve"
, style: R.css { fillRule: "evenodd", clipRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: "2" }
, children:
[ SVG.path
{ d: "m0 287.286 6.333 3.754c26.611 15.791 57.12 24.143 88.231 24.16h.068c95.544 0 173.307-77.745 173.348-173.297.014-46.307-17.997-89.849-50.727-122.603-32.732-32.753-76.251-50.802-122.556-50.821-95.62 0-173.381 77.734-173.419 173.283-.013 32.743 9.148 64.631 26.502 92.224l4.126 6.555-17.517 63.947L0 287.286zm-115.686 66.737 29.589-108.039c-18.25-31.619-27.852-67.489-27.838-104.236.046-114.958 93.603-208.485 208.567-208.485 55.789.024 108.153 21.738 147.533 61.145 39.374 39.41 61.05 91.795 61.031 147.509-.049 114.952-93.619 208.496-208.564 208.496-.008 0 .005 0 0 0h-.09c-34.903-.014-69.202-8.768-99.664-25.381l-110.564 28.991z"
, style: R.css { fill: "#fff", fillRule: "nonzero" }
, transform: "translate(546.49 392.227)"
}
, SVG.path
{ d: "M.505.494A.488.488 0 0 1 .257.427L0 .498.069.235a.496.496 0 1 1 .436.259zM.009-.002zm0 0z"
, style: R.css { fill: "url(#a)", fillRule: "nonzero" }
, transform: "matrix(0 -406.194 -406.194 0 640.266 738.97)"
}
, SVG.path
{ d: "M.505.494A.488.488 0 0 1 .257.427L0 .498.069.235a.496.496 0 1 1 .436.259zM.27.337l.015.01a.412.412 0 1 0-.193-.349c0 .074.02.147.058.21l.009.015-.041.156L.27.337zM.009-.002zm0 0z"
, style: R.css { fill: "url(#b)", fillRule: "nonzero" }
, transform: "matrix(0 -420.76 -420.76 0 640.264 746.25)"
}
, SVG.path
{ d: "M0-181.636c-3.904-8.678-8.013-8.852-11.727-9.004-3.037-.13-6.515-.122-9.987-.122-3.474 0-9.121 1.305-13.895 6.52-4.778 5.215-18.242 17.821-18.242 43.46 0 25.642 18.676 50.417 21.279 53.897 2.606 3.475 36.052 57.771 89.021 78.66 44.022 17.359 52.98 13.906 62.535 13.038 9.555-.869 30.832-12.604 35.175-24.773 4.343-12.167 4.343-22.596 3.04-24.776-1.303-2.172-4.777-3.475-9.989-6.081-5.212-2.606-30.832-15.215-35.61-16.952-4.777-1.737-8.252-2.606-11.726 2.611-3.475 5.212-13.456 16.947-16.497 20.422-3.04 3.483-6.08 3.917-11.292 1.311-5.212-2.614-21.996-8.111-41.907-25.864-15.492-13.812-25.951-30.87-28.992-36.087-3.04-5.212-.325-8.035 2.289-10.633 2.34-2.335 5.212-6.083 7.818-9.126 2.6-3.043 3.469-5.215 5.206-8.69 1.737-3.48.869-6.523-.434-9.129S4.634-171.332 0-181.636"
, style: R.css { fill: "#fff" }
, transform: "translate(588.995 628.453)"
}
, SVG.defs
{ children:
[ SVG.linearGradient
{ id: "a"
, x1: "0"
, y1: "0"
, x2: "1"
, y2: "0"
, gradientUnits: "userSpaceOnUse"
, gradientTransform: "scale(1 -1)"
, children:
[ SVG.stop
{ offset: "0"
, style: R.css { stopColor: "#20b038", stopOpacity: "1" }
}
, SVG.stop
{ offset: "1"
, style: R.css { stopColor: "#60d66a", stopOpacity: "1" }
}
]
}
, SVG.linearGradient
{ id: "b"
, x1: "0"
, y1: "0"
, x2: "1"
, y2: "0"
, gradientUnits: "userSpaceOnUse"
, gradientTransform: "scale(1 -1)"
, children:
[ SVG.stop
{ offset: "0"
, style: R.css { stopColor: "#f9f9f9", stopOpacity: "1" }
}
, SVG.stop
{ offset: "1"
, style: R.css { stopColor: "white", stopOpacity: "1" }
}
]
}
]
}
]
}
{ viewBox: "0 0 1281 1067"
, xmlns: "http://www.w3.org/2000/svg"
, xmlSpace: "preserve"
, style: R.css
{ fillRule: "evenodd"
, clipRule: "evenodd"
, strokeLinejoin: "round"
, strokeMiterlimit: "2"
}
, children:
[ SVG.path
{ d:
"m0 287.286 6.333 3.754c26.611 15.791 57.12 24.143 88.231 24.16h.068c95.544 0 173.307-77.745 173.348-173.297.014-46.307-17.997-89.849-50.727-122.603-32.732-32.753-76.251-50.802-122.556-50.821-95.62 0-173.381 77.734-173.419 173.283-.013 32.743 9.148 64.631 26.502 92.224l4.126 6.555-17.517 63.947L0 287.286zm-115.686 66.737 29.589-108.039c-18.25-31.619-27.852-67.489-27.838-104.236.046-114.958 93.603-208.485 208.567-208.485 55.789.024 108.153 21.738 147.533 61.145 39.374 39.41 61.05 91.795 61.031 147.509-.049 114.952-93.619 208.496-208.564 208.496-.008 0 .005 0 0 0h-.09c-34.903-.014-69.202-8.768-99.664-25.381l-110.564 28.991z"
, style: R.css { fill: "#fff", fillRule: "nonzero" }
, transform: "translate(546.49 392.227)"
}
, SVG.path
{ d:
"M.505.494A.488.488 0 0 1 .257.427L0 .498.069.235a.496.496 0 1 1 .436.259zM.009-.002zm0 0z"
, style: R.css { fill: "url(#a)", fillRule: "nonzero" }
, transform: "matrix(0 -406.194 -406.194 0 640.266 738.97)"
}
, SVG.path
{ d:
"M.505.494A.488.488 0 0 1 .257.427L0 .498.069.235a.496.496 0 1 1 .436.259zM.27.337l.015.01a.412.412 0 1 0-.193-.349c0 .074.02.147.058.21l.009.015-.041.156L.27.337zM.009-.002zm0 0z"
, style: R.css { fill: "url(#b)", fillRule: "nonzero" }
, transform: "matrix(0 -420.76 -420.76 0 640.264 746.25)"
}
, SVG.path
{ d:
"M0-181.636c-3.904-8.678-8.013-8.852-11.727-9.004-3.037-.13-6.515-.122-9.987-.122-3.474 0-9.121 1.305-13.895 6.52-4.778 5.215-18.242 17.821-18.242 43.46 0 25.642 18.676 50.417 21.279 53.897 2.606 3.475 36.052 57.771 89.021 78.66 44.022 17.359 52.98 13.906 62.535 13.038 9.555-.869 30.832-12.604 35.175-24.773 4.343-12.167 4.343-22.596 3.04-24.776-1.303-2.172-4.777-3.475-9.989-6.081-5.212-2.606-30.832-15.215-35.61-16.952-4.777-1.737-8.252-2.606-11.726 2.611-3.475 5.212-13.456 16.947-16.497 20.422-3.04 3.483-6.08 3.917-11.292 1.311-5.212-2.614-21.996-8.111-41.907-25.864-15.492-13.812-25.951-30.87-28.992-36.087-3.04-5.212-.325-8.035 2.289-10.633 2.34-2.335 5.212-6.083 7.818-9.126 2.6-3.043 3.469-5.215 5.206-8.69 1.737-3.48.869-6.523-.434-9.129S4.634-171.332 0-181.636"
, style: R.css { fill: "#fff" }
, transform: "translate(588.995 628.453)"
}
, SVG.defs
{ children:
[ SVG.linearGradient
{ id: "a"
, x1: "0"
, y1: "0"
, x2: "1"
, y2: "0"
, gradientUnits: "userSpaceOnUse"
, gradientTransform: "scale(1 -1)"
, children:
[ SVG.stop
{ offset: "0"
, style: R.css
{ stopColor: "#20b038", stopOpacity: "1" }
}
, SVG.stop
{ offset: "1"
, style: R.css
{ stopColor: "#60d66a", stopOpacity: "1" }
}
]
}
, SVG.linearGradient
{ id: "b"
, x1: "0"
, y1: "0"
, x2: "1"
, y2: "0"
, gradientUnits: "userSpaceOnUse"
, gradientTransform: "scale(1 -1)"
, children:
[ SVG.stop
{ offset: "0"
, style: R.css
{ stopColor: "#f9f9f9", stopOpacity: "1" }
}
, SVG.stop
{ offset: "1"
, style: R.css
{ stopColor: "white", stopOpacity: "1" }
}
]
}
]
}
]
}

470
src/Yoga/Block/Icon/SVG/Yoga1.purs
View File

@ -4,220 +4,258 @@ import React.Basic (JSX)
import React.Basic.DOM as R
import React.Basic.DOM.SVG as SVG
yoga1 :: JSX
yoga1 ∷ JSX
yoga1 = SVG.svg
{ viewBox: "0 0 2000 2000"
, xmlns: "http://www.w3.org/2000/svg"
, xmlSpace: "preserve"
, style: R.css { fillRule: "evenodd", clipRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: "2" }
, children:
[ SVG.path
{ d: "M1514.4 1322.9c-12.9-7.3-28.1-11.2-43.7-11.2l-444.8-.9-444.8.9c-15.6 0-30.8 3.9-43.7 11.2l-280 158.1c-10.9 6.1-5.7 20.4 7.4 20.4H1787c13.1 0 18.3-14.3 7.4-20.4l-280-158.1z"
, style: R.css { fill: "url(#a)", fillRule: "nonzero" }
}
, SVG.path
{ d: "M1308 1318.9c-.6-2.5-1.2-5.1-1.8-7.6l-42-.1c14.9 62.4 31.8 124.4 50.7 185.9.4 1.4.9 2.9 1.3 4.3h42.7c-18.9-60.3-35.9-121.1-50.9-182.5zM1143.7 1328l.3-17-40.9-.1c-1.1 60-.2 120.1 2.7 180.1.2 3.5.4 7 .5 10.5h41c-3.1-57.8-4.3-115.6-3.6-173.5zM1509.3 1447.7c-31.1-41.1-61-83.1-89.7-125.7-2.3-3.4-4.6-6.9-6.9-10.3l-48.4-.1c42.6 65.1 87.9 128.5 135.9 190h50.8c-14.1-17.9-28.1-35.8-41.7-53.9zM958.8 1310.9c-4.5 59-8.9 117.9-13.4 176.9-.3 4.6-.7 9.1-1 13.7h40.9c4.3-56.8 8.6-113.7 12.9-170.5.5-6.7 1-13.4 1.5-20.2l-40.9.1zM652.1 1371.6c17.6-19.6 34.5-39.7 51-60.1l-51.7.1c-.6.8-1.3 1.5-1.9 2.3-7.4 8.8-15 17.5-22.6 26.1-14.9 16.8-30.3 33.2-46 49.2-32.2 32.7-66 64-101.5 93.5-7.6 6.4-15.4 12.6-23.1 18.8h62.4c47.3-40.4 92-83.8 133.4-129.9zM884.7 1354.4c8.5-14.5 16.9-28.9 25.4-43.4l-46.9.1c-33.1 56.6-66.2 113.2-99.3 169.7-4 6.9-8 13.8-12.1 20.6h46.9c28.7-48.9 57.3-98 86-147z"
, style: R.css { fill: "#fffdfd", fillRule: "nonzero" }
}
, SVG.g
{ children:
[ SVG.path
{ d: "M660.2 670.2c-3.3-17-16.9-29.1-29.4-40-1.9-1.7-4.4-.5-5.2 1.3-14.6.8-29.8 16.2-30.7 29.6-.5 8.2 1.3 16.5 3.4 24.4 1.7 6.4 4 13 8.6 18 9.9 10.7 28.4 7.9 39.7 1.2 12.3-7.1 16.2-21.3 13.6-34.5zM631.4 799.7c-8.2-8-23.3-14.4-23.2-27.7 0-3.6-4.6-4.3-6.2-1.9-1-.3-2.2-.1-3.2.8-3.6 3.4-9.4 1.6-13.7.8-4.7-.9-9.3-1.4-14.1-.5-9.1 1.8-16.8 8.3-21.9 15.9-6.2 9.2-8.1 20.5-8.4 31.3-.2 5.8.1 11.5.5 17.3.3 5.4.6 11.2 3.6 15.9 2.5 3.9 6.8 6.9 11.6 6.8 4.9-.1 8.7-3.2 12.6-5.8 10.4-6.7 22 .3 32.1 3.9 9.9 3.5 20.2 3.6 29-2.7 7.7-5.5 12.5-14 13.4-23.4 1-11.2-4.1-22.8-12.1-30.7z"
, style: R.css { fill: "#151b35", fillRule: "nonzero" }
}
, SVG.path
{ d: "M799.8 1183.9c2.9-1.9 215.9-207.9 243-212.1 41.8-6.5 430.3 21 430.3 21l-270.7 56.3-165.9 27.5-159.1 200.5-77.6-93.2z"
, style: R.css { fill: "#5b94cb", fillRule: "nonzero" }
}
, SVG.path
{ d: "M578.5 801.6s-10.2 63.8 10.2 78.5c20.3 14.7 116.9 49.2 124.6 85.4 7.6 36.2-3.8 70.7 5.1 94 8.9 23.3 95.8 142.1 122.4 133.7 26.7-8.4 190.7-212.2 225.6-211.5 35 .6 252.1 3.9 329.6-3.9 77.5-7.8 139.6-30.2 191.7-37.3 52.1-7.1 79.9-5.8 81.8 7.8 1.9 13.6 2.8 22.6-37.8 34.9-40.7 12.3-83.5 17.4-88 38.8-4.4 21.3-25 59.7-57.4 35.1s-29-35.7-49.4-28.5c-20.3 7.1-201.7 78.9-253.2 76-49.4-2.8-76.7-18.6-84.9-9.5-8.2 9.1-89.6 136.5-107.4 172.1-17.8 35.6-66.8 133.6-135.4 136.8-68.6 3.2-106.8 8.4-136-33-29.2-41.4-45.8-127.4-83.3-168.2-37.5-40.7-115-138.4-132.8-177.9-17.8-39.5-24-87.5-17-117.3 7-29.8 26.5-76.7 28.4-150.5l63.2 44.5z"
, style: R.css { fill: "url(#b)", fillRule: "nonzero" }
}
, SVG.path
{ d: "M636.5 694.8c-2.1-55.1-50.1-71.3-50.1-71.3-116.6 16.7-97 102.8-79.5 148.8 17.5 46 62.7 47.2 96.5 47.1 20.4-.1 29.1-25.7 32.4-60.1 3.7-.7 17.6-5.3 17.5-9.3-.1-3.7-11.2-23.2-15.3-30.3-.7-8.3-1.2-16.7-1.5-24.9z"
, style: R.css { fill: "url(#c)", fillRule: "nonzero" }
}
, SVG.path
{ d: "M718.3 1059.5c-8.9-23.3 2.5-57.8-5.1-94-3-14.5-20.3-28.6-41.2-41.4-28.7 13-47.9-13.9-104.2-31.4-3.7-1.1-7.2-2-10.6-2.7-25.4-5.2-51.6 6.2-64.3 28.8-5.4 9.7-8.8 22.1-7.4 37.8.1 1.5.2 2.9.2 4.1 2.8 21.3 8.9 43.9 18.1 64.3 17.8 39.5 95.3 137.1 132.8 177.9 3.2 3.5 6.2 7.2 9.1 11.3 88.8-20.6 126.8-76.2 126.8-76.2-26-31.6-49.8-66.9-54.2-78.5zm-185.9-39.8c-47.1-58.3-12.6-97-12.6-97l135.9 110.5s-76 44.9-123.3-13.5z"
, style: R.css { fill: "#fffdfd", fillRule: "nonzero" }
}
, SVG.path
{ d: "M512.8 934.5c3.3-7.6 7-11.8 7-11.8l5.9 4.8c.3-1 .5-2 .5-3 0-5.8-4.7-10.4-10.4-10.4-5.8 0-10.4 4.7-10.4 10.4-.1 4.7 3.1 8.7 7.4 10z"
, style: R.css { fill: "#f6b734", fillRule: "nonzero" }
}
, SVG.circle
{ cx: "576.8"
, cy: "1092.1"
, r: "10.4"
, style: R.css { fill: "#f6b734" }
}
, SVG.path
{ d: "M526.2 1021.3c2.2 0 4.3-.7 6-1.9-4.8-5.9-8.7-11.6-11.9-17.1-2.7 1.9-4.5 5-4.5 8.6 0 5.7 4.6 10.4 10.4 10.4zM618.5 1170.2c-3 0-5.6 1.2-7.5 3.2 4.7 5.6 9.2 10.9 13.5 15.8 2.7-1.9 4.5-5 4.5-8.5 0-5.9-4.7-10.5-10.5-10.5z"
, style: R.css { fill: "#f6b734", fillRule: "nonzero" }
}
, SVG.circle
{ cx: "720.3"
, cy: "1124"
, r: "10.4"
, style: R.css { fill: "#f6b734" }
}
, SVG.circle
{ cx: "660.3"
, cy: "1081.7"
, r: "10.4"
, style: R.css { fill: "#f6b734" }
}
, SVG.circle
{ cx: "670.8"
, cy: "1144.8"
, r: "10.4"
, style: R.css { fill: "#f6b734" }
}
, SVG.path
{ d: "M692.9 1188.7c-5.8 0-10.4 4.7-10.4 10.4 0 1.2.2 2.3.6 3.4 6.7-2.7 13-5.5 19-8.5-1.9-3.1-5.3-5.3-9.2-5.3z"
, style: R.css { fill: "#f6b734", fillRule: "nonzero" }
}
, SVG.circle
{ cx: "682.5"
, cy: "965.5"
, r: "10.4"
, style: R.css { fill: "#f6b734" }
}
, SVG.g
{ children:
[ SVG.path
{ d: "M655.7 1159.6c.6-4.5 0-10-5.2-11.2-2.8-.7-5.6.6-8.5-.1-3.3-.8-5.7-3.4-6.6-6.5-.8-2.8-5.2-1.6-4.4 1.2 1.3 4.7 5 8.5 9.8 9.7 2.7.7 5-.2 7.7 0 3.6.3 3.1 4.2 2.7 6.9-.4 2.8 4.1 2.8 4.5 0zM555.7 1063.9c4.1-4.4.7-10.2-4.3-11.8-3.3-1-7-.3-10.2-1.5-3.6-1.4-5.6-4.8-6.2-8.4-.5-2.9-4.9-1.7-4.4 1.2.8 4.6 3.5 8.8 7.7 10.9 2.3 1.2 4.8 1.4 7.3 1.6 1.7.1 10.3 1.2 6.9 4.8-2 2.1 1.2 5.3 3.2 3.2zM624.4 1077.8c3-1.8 5.2-4.8 5.9-8.3.4-2.1.3-4.2.5-6.3.1-1.7 1.7-7.6 4.5-5 2.1 2 5.3-1.2 3.2-3.2-2.1-1.9-5-2.4-7.6-1-3.2 1.7-4.3 5.3-4.6 8.7-.4 4.7-.1 9.5-5.1 11.7-4.3 1.9-8.7-.7-10.5-4.7-1.2-2.7-5.1-.4-3.9 2.3 2.9 6.6 11.2 9.6 17.6 5.8zM632.4 944.3c-1.5 2.2-1.9 4.8-2.5 7.4-.3 1.3-2.7 8.6-4.9 5-1.5-2.5-5.5-.2-3.9 2.3 2.8 4.5 9 3.3 11.5-1 1.6-2.8 1.6-5.9 2.5-8.9 1.2-3.9 4.8-5.8 8.7-5.3 2.9.4 2.9-4.2 0-4.5-4.3-.6-8.8 1.3-11.4 5zM755.4 1130.6c-7.7 1.1-13.3 7.6-15.7 14.7-1 2.8 3.4 3.9 4.4 1.2 1.5-4.4 4.5-8.5 8.8-10.5 5.3-2.4 10.2.3 15.3 1.8 1.3.4 2.6.7 4 .9.4-.5.5-.7.5-.7-1.3-1.5-2.5-3.1-3.8-4.6-.2-.1-.4-.1-.6-.2-4.3-1.5-8.4-3.3-12.9-2.6zM651.4 1186.3c-1.7-2.4-5.6-.1-3.9 2.3 4.4 6.1-3.2 12-8.4 16.8.9 1.1 1.9 2.2 2.8 3.4 1.1-1.2 2.3-2.3 3.6-3.4 5.1-4.6 10.8-12.2 5.9-19.1zM500.1 934.9c-3.9 2.5-6.6 6.4-7.3 11-.4 2.4 0 4.6.6 7 .4 1.5 2.6 8.8-1.4 7.3-2.7-1-3.9 3.4-1.2 4.4 5.3 1.9 8.7-3.6 8.1-8.2-.3-3-1.9-5.8-1.8-8.9.2-3.6 2.2-6.7 5.2-8.6 2.6-1.7.3-5.6-2.2-4zM705 977.4c.4-2.9-4.2-2.9-4.5 0-.8 6.5 5.8 10.3 11.6 9.4 1.3-.2 2.5-.6 3.7-1.1-.1-1.6-.2-3.3-.3-5-3.8 2-11.3 3.1-10.5-3.3zM579.4 922c0-3.3 1.8-6.3 4.9-7.6 3.6-1.4 6.7.2 9.7 2.1 4.3 2.8 9.6 5.6 14.5 2.4 2.4-1.6.2-5.5-2.3-3.9-3.9 2.6-8.1-1.3-11.3-3.3-2.8-1.7-5.8-2.7-9-2.4-6.5.7-10.9 6.2-11 12.6-.1 3.1 4.4 3.1 4.5.1zM694.5 1096.8c3.9-4.4 7-9.6 5.4-15.6-.8-2.8-5.1-1.6-4.4 1.2 2.3 8.3-8.3 13.8-11.3 20.6-2.5 5.6-1 12.4 5.1 14.7 2.7 1 3.9-3.3 1.2-4.4-3.2-1.2-3.5-5.2-2.4-8 1.2-3.3 4-5.8 6.4-8.5zM724.6 1170.7c-6.2.5-14.4.4-15.6-7.4-.4-2.9-4.8-1.7-4.4 1.2 1.4 8.9 10.7 11.5 18.4 10.8 2.1-.2 4.3-.6 6.3-.2 1 .2 1.8.6 2.4 1.1 1.3-.9 2.5-1.8 3.8-2.7-2.7-2.7-6.9-3.1-10.9-2.8zM726.4 1180.1c.8-.5 1.5-1 2.3-1.5-1.1-.3-2 .5-2.3 1.5zM679.4 942c.5-5.6 8.2-.7 10.2.8 2.6 1.9 5.2 3.5 8.2 4.6 1.8.6 3.7.9 5.5.9-2-2.2-4.3-4.5-6.8-6.7-2.7-1.5-5.3-3.5-7.7-4.8-5.4-3-13.3-2.1-13.9 5.3-.3 2.8 4.3 2.7 4.5-.1zM587.4 1144.7c1 1.3 2.1 2.6 3.1 3.8 2.5-.9 4.7-2.8 6-5.7 1.9-4.2.5-8.3-1.2-12.2-1-2.3-2.4-5-1.7-7.6.8-2.7 3.5-4 6.2-3.7 2.9.3 2.9-4.2 0-4.5-8-.8-12.5 7-10.1 14 1.3 3.8 4.6 8.1 2.6 12.2-1 2.4-2.9 3.5-4.9 3.7z"
, style: R.css { fill: "#a36da7", fillRule: "nonzero" }
}
]
}
, SVG.path
{ d: "M793.6 1161.7c-33.1 75.4-127.1 89.2-127.1 89.2 5.7 12.4 11 25.5 16.1 38.6 10 3.3 18.8 6 19.4 5.7 1.3-.6 95-92.7 114.6-112-7.1-5.5-14.9-13-23-21.5z"
, style: R.css { fill: "#fffdfd", fillRule: "nonzero" }
}
, SVG.path
{ d: "M1066.4 981.6c-35-.6-198.9 203.1-225.6 211.5-8.3 2.6-22.2-7-37.9-22.1-10.3 21.4-44.7 76.2-130.8 92.5 16.5 38.7 29.7 81.7 47.9 107.5 29.2 41.4 67.4 36.2 136 33 68.6-3.2 117.6-101.5 135.4-137.1 17.8-35.6 99.1-163 107.4-172.1 8.3-9.1 35.5 6.8 84.9 9.5 45 2.5 189.4-52 238.5-70.5 1.5-15.9-.1-36.1-10.4-57.9-5.2.7-10.5 1.3-15.9 1.8-77.5 7.8-294.6 4.6-329.5 3.9z"
, style: R.css { fill: "url(#d)", fillRule: "nonzero" }
}
, SVG.path
{ d: "M1395.8 1043.7c10.4-3.8 19.3-7.2 26.4-9.9 1.5-15.9-.1-36.1-10.4-57.9-5.2.7-10.5 1.3-15.9 1.8-3.4.3-7 .7-10.9 1 6 12.9 15.9 39.5 10.8 65z"
, style: R.css { fill: "#fffdfd", fillRule: "nonzero" }
}
, SVG.path
{ d: "M716.5 1244.8c20.9 9.8 27.9 34.4 39.4 52.5 6.4 10.1 14.4 18.7 24.9 24.6 10.6 6 22.6 9.1 34.7 9.9 57 3.4 98.7-46.2 126.8-89.5 31.2-48.2 54.3-102.2 94.7-143.9 18.4-19 40.2-35.2 65.3-44.1 29.6-10.4 61.2-8.8 92.1-7.5 31.2 1.3 62.2.4 93.2-4 31.3-4.4 62.1-12 91.8-22.7 7.1-2.6 14.2-5.3 21.2-8.2 3.8-1.6 2.1-7.8-1.7-6.2-57.8 23.9-120.2 36-182.7 35.3-31.2-.4-62.7-4.1-93.7 1.4-26.2 4.6-49.9 16.9-70.5 33.5-44 35.6-70 86.7-97.9 134.7-14.7 25.3-30.4 50.4-50.4 71.9-18 19.4-40.5 36.4-67 41.5-24 4.6-51.3-1.1-67.9-20-14.8-16.8-20-40.2-36.2-55.9-3.7-3.6-8-6.6-12.7-8.8-3.8-1.8-7.1 3.7-3.4 5.5z"
, style: R.css { fill: "#fffdfd", fillRule: "nonzero" }
}
, SVG.path
{ d: "M772.6 1213.6c15.4 33.9 20.7 71.5 13.9 108.1-.8 4.1 5.5 5.8 6.2 1.7 7.2-38.5 1.6-77.5-14.5-113.1-1.8-3.7-7.3-.4-5.6 3.3z"
, style: R.css { fill: "#fffdfd", fillRule: "nonzero" }
}
, SVG.path
{ d: "M519.8 922.7s31-36.9 85.4 4.9c54.3 41.7 152.3 114.5 165.9 122.2 13.6 7.8 93.1 26.2 150.4 46.6 57.2 20.4 107.7 25.2 140.7 24.3 33-1 65 19.4 71.8 23.3 6.8 3.9-1 35.9-15.5 36.9-14.6 1-63.1 14.6-87.3 3.9-24.3-10.7-40.7-27.5-67.9-25.9-27.2 1.6-103.8-13.9-142.6-25.5s-124.2-35.9-146.5-47.5c-22.3-11.6-118.4-54.3-142.6-78.6-24.4-24.4-27.3-65.2-11.8-84.6z"
, style: R.css { fill: "url(#e)", fillRule: "nonzero" }
}
, SVG.path
{ d: "M632.6 631.6c-24.1-19-58.1-26.8-88.2-21.7-31.1 5.3-52.2 33.5-66.7 59.3-7.6 13.5-11.4 29.6-21.8 41.4-9 10.2-26.4 16.7-26.8 32.3-.2 7.9 4.4 14.6 6.6 21.9 2.3 7.4-.5 12.7-5.1 18.5-3.9 4.9-8.4 10-9.1 16.5-.8 7.2 3.5 12.9 7.8 18.3 2.6 3.2 5 6.4 6.1 10.5 1.1 3.9 1.3 8 1.8 12 1 7.8 3.9 15.4 11.8 18.5 8.6 3.4 17.7.2 25.6-3.6 9.9-4.8 19.8-9 30.9-5.2.5.2 1 .2 1.4.2 8.2 2.6 17.5.9 23.7-5.4 6.9-6.9 8.2-16.9 5.1-25.9-2.8-7.8-9.9-16.5-8.5-25.2 1.5-9.1 13.1-12.6 19.5-17.6 7.5-5.9 12.7-14.9 14.2-24.4 1.7-10.7-2-20-5.1-30.1-1.6-5.1-2.7-10.5-1.6-15.8 1-4.6 3.5-8.8 6.6-12.3 7.1-7.9 16.9-12.3 26.7-15.9 11.4-4.2 23.2-8 32.5-16 8-6.8 13.9-16.5 13.5-27.2.4-.9.3-2.1-.9-3.1z"
, style: R.css { fill: "#1c2246", fillRule: "nonzero" }
}
]
}
, SVG.defs
{ children:
[ SVG.linearGradient
{ id: "b"
, x1: "0"
, y1: "0"
, x2: "1"
, y2: "0"
, gradientUnits: "userSpaceOnUse"
, gradientTransform: "rotate(-135.047 935.926 373.35) scale(962.362)"
, children:
[ SVG.stop
{ offset: "0"
, style: R.css { stopColor: "#ff956e", stopOpacity: "1" }
}
, SVG.stop
{ offset: "1"
, style: R.css { stopColor: "#e87054", stopOpacity: "1" }
}
]
}
, SVG.linearGradient
{ id: "c"
, x1: "0"
, y1: "0"
, x2: "1"
, y2: "0"
, gradientUnits: "userSpaceOnUse"
, gradientTransform: "rotate(-135.047 483.856 263.204) scale(185.823)"
, children:
[ SVG.stop
{ offset: "0"
, style: R.css { stopColor: "#ff956e", stopOpacity: "1" }
}
, SVG.stop
{ offset: "1"
, style: R.css { stopColor: "#e87054", stopOpacity: "1" }
}
]
}
, SVG.linearGradient
{ id: "d"
, x1: "0"
, y1: "0"
, x2: "1"
, y2: "0"
, gradientUnits: "userSpaceOnUse"
, gradientTransform: "scale(178.61) rotate(86.92 -.587 6.444)"
, children:
[ SVG.stop
{ offset: "0"
, style: R.css { stopColor: "#8aadd7", stopOpacity: "1" }
}
, SVG.stop
{ offset: "1"
, style: R.css { stopColor: "#5b94cb", stopOpacity: "1" }
}
]
}
, SVG.linearGradient
{ id: "e"
, x1: "0"
, y1: "0"
, x2: "1"
, y2: "0"
, gradientUnits: "userSpaceOnUse"
, gradientTransform: "scale(-608.847) rotate(44.953 1.68 -3.09)"
, children:
[ SVG.stop
{ offset: "0"
, style: R.css { stopColor: "#ff956e", stopOpacity: "1" }
}
, SVG.stop
{ offset: "1"
, style: R.css { stopColor: "#e87054", stopOpacity: "1" }
}
]
}
, SVG.radialGradient
{ id: "a"
, cx: "0"
, cy: "0"
, r: "1"
, gradientUnits: "userSpaceOnUse"
, gradientTransform: "matrix(678.54 0 0 569.293 786.739 1406.13)"
, children:
[ SVG.stop
{ offset: "0"
, style: R.css { stopColor: "#944e9b", stopOpacity: "1" }
}
, SVG.stop
{ offset: "1"
, style: R.css { stopColor: "#a36da7", stopOpacity: "1" }
}
]
}
]
}
]
}
{ viewBox: "0 0 2000 2000"
, xmlns: "http://www.w3.org/2000/svg"
, xmlSpace: "preserve"
, style: R.css
{ fillRule: "evenodd"
, clipRule: "evenodd"
, strokeLinejoin: "round"
, strokeMiterlimit: "2"
}
, children:
[ SVG.path
{ d:
"M1514.4 1322.9c-12.9-7.3-28.1-11.2-43.7-11.2l-444.8-.9-444.8.9c-15.6 0-30.8 3.9-43.7 11.2l-280 158.1c-10.9 6.1-5.7 20.4 7.4 20.4H1787c13.1 0 18.3-14.3 7.4-20.4l-280-158.1z"
, style: R.css { fill: "url(#a)", fillRule: "nonzero" }
}
, SVG.path
{ d:
"M1308 1318.9c-.6-2.5-1.2-5.1-1.8-7.6l-42-.1c14.9 62.4 31.8 124.4 50.7 185.9.4 1.4.9 2.9 1.3 4.3h42.7c-18.9-60.3-35.9-121.1-50.9-182.5zM1143.7 1328l.3-17-40.9-.1c-1.1 60-.2 120.1 2.7 180.1.2 3.5.4 7 .5 10.5h41c-3.1-57.8-4.3-115.6-3.6-173.5zM1509.3 1447.7c-31.1-41.1-61-83.1-89.7-125.7-2.3-3.4-4.6-6.9-6.9-10.3l-48.4-.1c42.6 65.1 87.9 128.5 135.9 190h50.8c-14.1-17.9-28.1-35.8-41.7-53.9zM958.8 1310.9c-4.5 59-8.9 117.9-13.4 176.9-.3 4.6-.7 9.1-1 13.7h40.9c4.3-56.8 8.6-113.7 12.9-170.5.5-6.7 1-13.4 1.5-20.2l-40.9.1zM652.1 1371.6c17.6-19.6 34.5-39.7 51-60.1l-51.7.1c-.6.8-1.3 1.5-1.9 2.3-7.4 8.8-15 17.5-22.6 26.1-14.9 16.8-30.3 33.2-46 49.2-32.2 32.7-66 64-101.5 93.5-7.6 6.4-15.4 12.6-23.1 18.8h62.4c47.3-40.4 92-83.8 133.4-129.9zM884.7 1354.4c8.5-14.5 16.9-28.9 25.4-43.4l-46.9.1c-33.1 56.6-66.2 113.2-99.3 169.7-4 6.9-8 13.8-12.1 20.6h46.9c28.7-48.9 57.3-98 86-147z"
, style: R.css { fill: "#fffdfd", fillRule: "nonzero" }
}
, SVG.g
{ children:
[ SVG.path
{ d:
"M660.2 670.2c-3.3-17-16.9-29.1-29.4-40-1.9-1.7-4.4-.5-5.2 1.3-14.6.8-29.8 16.2-30.7 29.6-.5 8.2 1.3 16.5 3.4 24.4 1.7 6.4 4 13 8.6 18 9.9 10.7 28.4 7.9 39.7 1.2 12.3-7.1 16.2-21.3 13.6-34.5zM631.4 799.7c-8.2-8-23.3-14.4-23.2-27.7 0-3.6-4.6-4.3-6.2-1.9-1-.3-2.2-.1-3.2.8-3.6 3.4-9.4 1.6-13.7.8-4.7-.9-9.3-1.4-14.1-.5-9.1 1.8-16.8 8.3-21.9 15.9-6.2 9.2-8.1 20.5-8.4 31.3-.2 5.8.1 11.5.5 17.3.3 5.4.6 11.2 3.6 15.9 2.5 3.9 6.8 6.9 11.6 6.8 4.9-.1 8.7-3.2 12.6-5.8 10.4-6.7 22 .3 32.1 3.9 9.9 3.5 20.2 3.6 29-2.7 7.7-5.5 12.5-14 13.4-23.4 1-11.2-4.1-22.8-12.1-30.7z"
, style: R.css { fill: "#151b35", fillRule: "nonzero" }
}
, SVG.path
{ d:
"M799.8 1183.9c2.9-1.9 215.9-207.9 243-212.1 41.8-6.5 430.3 21 430.3 21l-270.7 56.3-165.9 27.5-159.1 200.5-77.6-93.2z"
, style: R.css { fill: "#5b94cb", fillRule: "nonzero" }
}
, SVG.path
{ d:
"M578.5 801.6s-10.2 63.8 10.2 78.5c20.3 14.7 116.9 49.2 124.6 85.4 7.6 36.2-3.8 70.7 5.1 94 8.9 23.3 95.8 142.1 122.4 133.7 26.7-8.4 190.7-212.2 225.6-211.5 35 .6 252.1 3.9 329.6-3.9 77.5-7.8 139.6-30.2 191.7-37.3 52.1-7.1 79.9-5.8 81.8 7.8 1.9 13.6 2.8 22.6-37.8 34.9-40.7 12.3-83.5 17.4-88 38.8-4.4 21.3-25 59.7-57.4 35.1s-29-35.7-49.4-28.5c-20.3 7.1-201.7 78.9-253.2 76-49.4-2.8-76.7-18.6-84.9-9.5-8.2 9.1-89.6 136.5-107.4 172.1-17.8 35.6-66.8 133.6-135.4 136.8-68.6 3.2-106.8 8.4-136-33-29.2-41.4-45.8-127.4-83.3-168.2-37.5-40.7-115-138.4-132.8-177.9-17.8-39.5-24-87.5-17-117.3 7-29.8 26.5-76.7 28.4-150.5l63.2 44.5z"
, style: R.css { fill: "url(#b)", fillRule: "nonzero" }
}
, SVG.path
{ d:
"M636.5 694.8c-2.1-55.1-50.1-71.3-50.1-71.3-116.6 16.7-97 102.8-79.5 148.8 17.5 46 62.7 47.2 96.5 47.1 20.4-.1 29.1-25.7 32.4-60.1 3.7-.7 17.6-5.3 17.5-9.3-.1-3.7-11.2-23.2-15.3-30.3-.7-8.3-1.2-16.7-1.5-24.9z"
, style: R.css { fill: "url(#c)", fillRule: "nonzero" }
}
, SVG.path
{ d:
"M718.3 1059.5c-8.9-23.3 2.5-57.8-5.1-94-3-14.5-20.3-28.6-41.2-41.4-28.7 13-47.9-13.9-104.2-31.4-3.7-1.1-7.2-2-10.6-2.7-25.4-5.2-51.6 6.2-64.3 28.8-5.4 9.7-8.8 22.1-7.4 37.8.1 1.5.2 2.9.2 4.1 2.8 21.3 8.9 43.9 18.1 64.3 17.8 39.5 95.3 137.1 132.8 177.9 3.2 3.5 6.2 7.2 9.1 11.3 88.8-20.6 126.8-76.2 126.8-76.2-26-31.6-49.8-66.9-54.2-78.5zm-185.9-39.8c-47.1-58.3-12.6-97-12.6-97l135.9 110.5s-76 44.9-123.3-13.5z"
, style: R.css { fill: "#fffdfd", fillRule: "nonzero" }
}
, SVG.path
{ d:
"M512.8 934.5c3.3-7.6 7-11.8 7-11.8l5.9 4.8c.3-1 .5-2 .5-3 0-5.8-4.7-10.4-10.4-10.4-5.8 0-10.4 4.7-10.4 10.4-.1 4.7 3.1 8.7 7.4 10z"
, style: R.css { fill: "#f6b734", fillRule: "nonzero" }
}
, SVG.circle
{ cx: "576.8"
, cy: "1092.1"
, r: "10.4"
, style: R.css { fill: "#f6b734" }
}
, SVG.path
{ d:
"M526.2 1021.3c2.2 0 4.3-.7 6-1.9-4.8-5.9-8.7-11.6-11.9-17.1-2.7 1.9-4.5 5-4.5 8.6 0 5.7 4.6 10.4 10.4 10.4zM618.5 1170.2c-3 0-5.6 1.2-7.5 3.2 4.7 5.6 9.2 10.9 13.5 15.8 2.7-1.9 4.5-5 4.5-8.5 0-5.9-4.7-10.5-10.5-10.5z"
, style: R.css { fill: "#f6b734", fillRule: "nonzero" }
}
, SVG.circle
{ cx: "720.3"
, cy: "1124"
, r: "10.4"
, style: R.css { fill: "#f6b734" }
}
, SVG.circle
{ cx: "660.3"
, cy: "1081.7"
, r: "10.4"
, style: R.css { fill: "#f6b734" }
}
, SVG.circle
{ cx: "670.8"
, cy: "1144.8"
, r: "10.4"
, style: R.css { fill: "#f6b734" }
}
, SVG.path
{ d:
"M692.9 1188.7c-5.8 0-10.4 4.7-10.4 10.4 0 1.2.2 2.3.6 3.4 6.7-2.7 13-5.5 19-8.5-1.9-3.1-5.3-5.3-9.2-5.3z"
, style: R.css { fill: "#f6b734", fillRule: "nonzero" }
}
, SVG.circle
{ cx: "682.5"
, cy: "965.5"
, r: "10.4"
, style: R.css { fill: "#f6b734" }
}
, SVG.g
{ children:
[ SVG.path
{ d:
"M655.7 1159.6c.6-4.5 0-10-5.2-11.2-2.8-.7-5.6.6-8.5-.1-3.3-.8-5.7-3.4-6.6-6.5-.8-2.8-5.2-1.6-4.4 1.2 1.3 4.7 5 8.5 9.8 9.7 2.7.7 5-.2 7.7 0 3.6.3 3.1 4.2 2.7 6.9-.4 2.8 4.1 2.8 4.5 0zM555.7 1063.9c4.1-4.4.7-10.2-4.3-11.8-3.3-1-7-.3-10.2-1.5-3.6-1.4-5.6-4.8-6.2-8.4-.5-2.9-4.9-1.7-4.4 1.2.8 4.6 3.5 8.8 7.7 10.9 2.3 1.2 4.8 1.4 7.3 1.6 1.7.1 10.3 1.2 6.9 4.8-2 2.1 1.2 5.3 3.2 3.2zM624.4 1077.8c3-1.8 5.2-4.8 5.9-8.3.4-2.1.3-4.2.5-6.3.1-1.7 1.7-7.6 4.5-5 2.1 2 5.3-1.2 3.2-3.2-2.1-1.9-5-2.4-7.6-1-3.2 1.7-4.3 5.3-4.6 8.7-.4 4.7-.1 9.5-5.1 11.7-4.3 1.9-8.7-.7-10.5-4.7-1.2-2.7-5.1-.4-3.9 2.3 2.9 6.6 11.2 9.6 17.6 5.8zM632.4 944.3c-1.5 2.2-1.9 4.8-2.5 7.4-.3 1.3-2.7 8.6-4.9 5-1.5-2.5-5.5-.2-3.9 2.3 2.8 4.5 9 3.3 11.5-1 1.6-2.8 1.6-5.9 2.5-8.9 1.2-3.9 4.8-5.8 8.7-5.3 2.9.4 2.9-4.2 0-4.5-4.3-.6-8.8 1.3-11.4 5zM755.4 1130.6c-7.7 1.1-13.3 7.6-15.7 14.7-1 2.8 3.4 3.9 4.4 1.2 1.5-4.4 4.5-8.5 8.8-10.5 5.3-2.4 10.2.3 15.3 1.8 1.3.4 2.6.7 4 .9.4-.5.5-.7.5-.7-1.3-1.5-2.5-3.1-3.8-4.6-.2-.1-.4-.1-.6-.2-4.3-1.5-8.4-3.3-12.9-2.6zM651.4 1186.3c-1.7-2.4-5.6-.1-3.9 2.3 4.4 6.1-3.2 12-8.4 16.8.9 1.1 1.9 2.2 2.8 3.4 1.1-1.2 2.3-2.3 3.6-3.4 5.1-4.6 10.8-12.2 5.9-19.1zM500.1 934.9c-3.9 2.5-6.6 6.4-7.3 11-.4 2.4 0 4.6.6 7 .4 1.5 2.6 8.8-1.4 7.3-2.7-1-3.9 3.4-1.2 4.4 5.3 1.9 8.7-3.6 8.1-8.2-.3-3-1.9-5.8-1.8-8.9.2-3.6 2.2-6.7 5.2-8.6 2.6-1.7.3-5.6-2.2-4zM705 977.4c.4-2.9-4.2-2.9-4.5 0-.8 6.5 5.8 10.3 11.6 9.4 1.3-.2 2.5-.6 3.7-1.1-.1-1.6-.2-3.3-.3-5-3.8 2-11.3 3.1-10.5-3.3zM579.4 922c0-3.3 1.8-6.3 4.9-7.6 3.6-1.4 6.7.2 9.7 2.1 4.3 2.8 9.6 5.6 14.5 2.4 2.4-1.6.2-5.5-2.3-3.9-3.9 2.6-8.1-1.3-11.3-3.3-2.8-1.7-5.8-2.7-9-2.4-6.5.7-10.9 6.2-11 12.6-.1 3.1 4.4 3.1 4.5.1zM694.5 1096.8c3.9-4.4 7-9.6 5.4-15.6-.8-2.8-5.1-1.6-4.4 1.2 2.3 8.3-8.3 13.8-11.3 20.6-2.5 5.6-1 12.4 5.1 14.7 2.7 1 3.9-3.3 1.2-4.4-3.2-1.2-3.5-5.2-2.4-8 1.2-3.3 4-5.8 6.4-8.5zM724.6 1170.7c-6.2.5-14.4.4-15.6-7.4-.4-2.9-4.8-1.7-4.4 1.2 1.4 8.9 10.7 11.5 18.4 10.8 2.1-.2 4.3-.6 6.3-.2 1 .2 1.8.6 2.4 1.1 1.3-.9 2.5-1.8 3.8-2.7-2.7-2.7-6.9-3.1-10.9-2.8zM726.4 1180.1c.8-.5 1.5-1 2.3-1.5-1.1-.3-2 .5-2.3 1.5zM679.4 942c.5-5.6 8.2-.7 10.2.8 2.6 1.9 5.2 3.5 8.2 4.6 1.8.6 3.7.9 5.5.9-2-2.2-4.3-4.5-6.8-6.7-2.7-1.5-5.3-3.5-7.7-4.8-5.4-3-13.3-2.1-13.9 5.3-.3 2.8 4.3 2.7 4.5-.1zM587.4 1144.7c1 1.3 2.1 2.6 3.1 3.8 2.5-.9 4.7-2.8 6-5.7 1.9-4.2.5-8.3-1.2-12.2-1-2.3-2.4-5-1.7-7.6.8-2.7 3.5-4 6.2-3.7 2.9.3 2.9-4.2 0-4.5-8-.8-12.5 7-10.1 14 1.3 3.8 4.6 8.1 2.6 12.2-1 2.4-2.9 3.5-4.9 3.7z"
, style: R.css
{ fill: "#a36da7", fillRule: "nonzero" }
}
]
}
, SVG.path
{ d:
"M793.6 1161.7c-33.1 75.4-127.1 89.2-127.1 89.2 5.7 12.4 11 25.5 16.1 38.6 10 3.3 18.8 6 19.4 5.7 1.3-.6 95-92.7 114.6-112-7.1-5.5-14.9-13-23-21.5z"
, style: R.css { fill: "#fffdfd", fillRule: "nonzero" }
}
, SVG.path
{ d:
"M1066.4 981.6c-35-.6-198.9 203.1-225.6 211.5-8.3 2.6-22.2-7-37.9-22.1-10.3 21.4-44.7 76.2-130.8 92.5 16.5 38.7 29.7 81.7 47.9 107.5 29.2 41.4 67.4 36.2 136 33 68.6-3.2 117.6-101.5 135.4-137.1 17.8-35.6 99.1-163 107.4-172.1 8.3-9.1 35.5 6.8 84.9 9.5 45 2.5 189.4-52 238.5-70.5 1.5-15.9-.1-36.1-10.4-57.9-5.2.7-10.5 1.3-15.9 1.8-77.5 7.8-294.6 4.6-329.5 3.9z"
, style: R.css { fill: "url(#d)", fillRule: "nonzero" }
}
, SVG.path
{ d:
"M1395.8 1043.7c10.4-3.8 19.3-7.2 26.4-9.9 1.5-15.9-.1-36.1-10.4-57.9-5.2.7-10.5 1.3-15.9 1.8-3.4.3-7 .7-10.9 1 6 12.9 15.9 39.5 10.8 65z"
, style: R.css { fill: "#fffdfd", fillRule: "nonzero" }
}
, SVG.path
{ d:
"M716.5 1244.8c20.9 9.8 27.9 34.4 39.4 52.5 6.4 10.1 14.4 18.7 24.9 24.6 10.6 6 22.6 9.1 34.7 9.9 57 3.4 98.7-46.2 126.8-89.5 31.2-48.2 54.3-102.2 94.7-143.9 18.4-19 40.2-35.2 65.3-44.1 29.6-10.4 61.2-8.8 92.1-7.5 31.2 1.3 62.2.4 93.2-4 31.3-4.4 62.1-12 91.8-22.7 7.1-2.6 14.2-5.3 21.2-8.2 3.8-1.6 2.1-7.8-1.7-6.2-57.8 23.9-120.2 36-182.7 35.3-31.2-.4-62.7-4.1-93.7 1.4-26.2 4.6-49.9 16.9-70.5 33.5-44 35.6-70 86.7-97.9 134.7-14.7 25.3-30.4 50.4-50.4 71.9-18 19.4-40.5 36.4-67 41.5-24 4.6-51.3-1.1-67.9-20-14.8-16.8-20-40.2-36.2-55.9-3.7-3.6-8-6.6-12.7-8.8-3.8-1.8-7.1 3.7-3.4 5.5z"
, style: R.css { fill: "#fffdfd", fillRule: "nonzero" }
}
, SVG.path
{ d:
"M772.6 1213.6c15.4 33.9 20.7 71.5 13.9 108.1-.8 4.1 5.5 5.8 6.2 1.7 7.2-38.5 1.6-77.5-14.5-113.1-1.8-3.7-7.3-.4-5.6 3.3z"
, style: R.css { fill: "#fffdfd", fillRule: "nonzero" }
}
, SVG.path
{ d:
"M519.8 922.7s31-36.9 85.4 4.9c54.3 41.7 152.3 114.5 165.9 122.2 13.6 7.8 93.1 26.2 150.4 46.6 57.2 20.4 107.7 25.2 140.7 24.3 33-1 65 19.4 71.8 23.3 6.8 3.9-1 35.9-15.5 36.9-14.6 1-63.1 14.6-87.3 3.9-24.3-10.7-40.7-27.5-67.9-25.9-27.2 1.6-103.8-13.9-142.6-25.5s-124.2-35.9-146.5-47.5c-22.3-11.6-118.4-54.3-142.6-78.6-24.4-24.4-27.3-65.2-11.8-84.6z"
, style: R.css { fill: "url(#e)", fillRule: "nonzero" }
}
, SVG.path
{ d:
"M632.6 631.6c-24.1-19-58.1-26.8-88.2-21.7-31.1 5.3-52.2 33.5-66.7 59.3-7.6 13.5-11.4 29.6-21.8 41.4-9 10.2-26.4 16.7-26.8 32.3-.2 7.9 4.4 14.6 6.6 21.9 2.3 7.4-.5 12.7-5.1 18.5-3.9 4.9-8.4 10-9.1 16.5-.8 7.2 3.5 12.9 7.8 18.3 2.6 3.2 5 6.4 6.1 10.5 1.1 3.9 1.3 8 1.8 12 1 7.8 3.9 15.4 11.8 18.5 8.6 3.4 17.7.2 25.6-3.6 9.9-4.8 19.8-9 30.9-5.2.5.2 1 .2 1.4.2 8.2 2.6 17.5.9 23.7-5.4 6.9-6.9 8.2-16.9 5.1-25.9-2.8-7.8-9.9-16.5-8.5-25.2 1.5-9.1 13.1-12.6 19.5-17.6 7.5-5.9 12.7-14.9 14.2-24.4 1.7-10.7-2-20-5.1-30.1-1.6-5.1-2.7-10.5-1.6-15.8 1-4.6 3.5-8.8 6.6-12.3 7.1-7.9 16.9-12.3 26.7-15.9 11.4-4.2 23.2-8 32.5-16 8-6.8 13.9-16.5 13.5-27.2.4-.9.3-2.1-.9-3.1z"
, style: R.css { fill: "#1c2246", fillRule: "nonzero" }
}
]
}
, SVG.defs
{ children:
[ SVG.linearGradient
{ id: "b"
, x1: "0"
, y1: "0"
, x2: "1"
, y2: "0"
, gradientUnits: "userSpaceOnUse"
, gradientTransform:
"rotate(-135.047 935.926 373.35) scale(962.362)"
, children:
[ SVG.stop
{ offset: "0"
, style: R.css
{ stopColor: "#ff956e", stopOpacity: "1" }
}
, SVG.stop
{ offset: "1"
, style: R.css
{ stopColor: "#e87054", stopOpacity: "1" }
}
]
}
, SVG.linearGradient
{ id: "c"
, x1: "0"
, y1: "0"
, x2: "1"
, y2: "0"
, gradientUnits: "userSpaceOnUse"
, gradientTransform:
"rotate(-135.047 483.856 263.204) scale(185.823)"
, children:
[ SVG.stop
{ offset: "0"
, style: R.css
{ stopColor: "#ff956e", stopOpacity: "1" }
}
, SVG.stop
{ offset: "1"
, style: R.css
{ stopColor: "#e87054", stopOpacity: "1" }
}
]
}
, SVG.linearGradient
{ id: "d"
, x1: "0"
, y1: "0"
, x2: "1"
, y2: "0"
, gradientUnits: "userSpaceOnUse"
, gradientTransform: "scale(178.61) rotate(86.92 -.587 6.444)"
, children:
[ SVG.stop
{ offset: "0"
, style: R.css
{ stopColor: "#8aadd7", stopOpacity: "1" }
}
, SVG.stop
{ offset: "1"
, style: R.css
{ stopColor: "#5b94cb", stopOpacity: "1" }
}
]
}
, SVG.linearGradient
{ id: "e"
, x1: "0"
, y1: "0"
, x2: "1"
, y2: "0"
, gradientUnits: "userSpaceOnUse"
, gradientTransform:
"scale(-608.847) rotate(44.953 1.68 -3.09)"
, children:
[ SVG.stop
{ offset: "0"
, style: R.css
{ stopColor: "#ff956e", stopOpacity: "1" }
}
, SVG.stop
{ offset: "1"
, style: R.css
{ stopColor: "#e87054", stopOpacity: "1" }
}
]
}
, SVG.radialGradient
{ id: "a"
, cx: "0"
, cy: "0"
, r: "1"
, gradientUnits: "userSpaceOnUse"
, gradientTransform:
"matrix(678.54 0 0 569.293 786.739 1406.13)"
, children:
[ SVG.stop
{ offset: "0"
, style: R.css
{ stopColor: "#944e9b", stopOpacity: "1" }
}
, SVG.stop
{ offset: "1"
, style: R.css
{ stopColor: "#a36da7", stopOpacity: "1" }
}
]
}
]
}
]
}

13
src/Yoga/Block/Internal/CSS.purs
View File

@ -20,13 +20,20 @@ left = str "left"
_100percent ∷ StyleProperty
_100percent = percent 100.0
nest ∷ ∀ r rl. RowToList r rl => HomogeneousRowList rl StyleProperty => Record r -> StyleProperty
nest ∷
∀ r rl.
RowToList r rl ⇒
HomogeneousRowList rl StyleProperty ⇒
Record r →
StyleProperty
nest = nested <<< css
nestDynamic ∷
∀ r.
Homogeneous r StyleProperty =>
String -> { | r } -> Style
Homogeneous r StyleProperty ⇒
String →
{ | r } →
Style
nestDynamic key sp =
unsafeCoerce
$ Object.singleton key (css sp)

52
src/Yoga/Block/Internal/OptionalProp.purs
View File

@ -17,55 +17,55 @@ import Unsafe.Coerce (unsafeCoerce)
import Untagged.Castable (class Castable, cast)
import Untagged.Union (UndefinedOr, defined, fromUndefinedOr, maybeToUor, uorToMaybe)
type Id :: forall k. k -> k
type Id ∷ ∀ k. k → k
type Id a = a
newtype OptionalProp a = OptionalProp (UndefinedOr a)
setOrDelete
∷ ∀ r a rNoA key
. IsSymbol key
=> Cons key a rNoA r
=> Proxy key
-> OptionalProp a
-> { | r }
-> { | r }
setOrDelete ∷
∀ r a rNoA key.
IsSymbol key ⇒
Cons key a rNoA r ⇒
Proxy key →
OptionalProp a →
{ | r } →
{ | r }
setOrDelete key v = case opToMaybe v of
Nothing -> unsafeDelete (reflectSymbol key)
Just v' -> set key v'
Nothing → unsafeDelete (reflectSymbol key)
Just v' → set key v'
asOptional ∷ ∀ a. a -> OptionalProp a
asOptional ∷ ∀ a. a → OptionalProp a
asOptional = cast
asMaybe ∷ ∀ a. a -> Maybe a
asMaybe ∷ ∀ a. a → Maybe a
asMaybe = asOptional >>> opToMaybe
composeHandler ∷ EventHandler -> OptionalProp EventHandler -> EventHandler
composeHandler ∷ EventHandler → OptionalProp EventHandler → EventHandler
composeHandler handler propsHandler =
mkEffectFn1 \a -> do
mkEffectFn1 \a → do
for_ (handler # asMaybe) $ flip runEffectFn1 a
for_ (propsHandler # opToMaybe) $ flip runEffectFn1 a
unsafeUnOptional ∷ ∀ a. OptionalProp a -> a
unsafeUnOptional ∷ ∀ a. OptionalProp a → a
unsafeUnOptional = unsafeCoerce
unsafeUnMaybe ∷ ∀ a. Maybe a -> a
unsafeUnMaybe ∷ ∀ a. Maybe a → a
unsafeUnMaybe = maybeToOp >>> unsafeUnOptional
opToMaybe ∷ ∀ a. OptionalProp a -> Maybe a
opToMaybe ∷ ∀ a. OptionalProp a → Maybe a
opToMaybe (OptionalProp x) = uorToMaybe x
maybeToOp ∷ ∀ a. Maybe a -> OptionalProp a
maybeToOp ∷ ∀ a. Maybe a → OptionalProp a
maybeToOp mb = OptionalProp (maybeToUor mb)
derive instance ntOptionalProp ∷ Newtype (OptionalProp a) _
instance semigroupOptionalProp ∷ Semigroup a => Semigroup (OptionalProp a) where
instance semigroupOptionalProp ∷ Semigroup a ⇒ Semigroup (OptionalProp a) where
append (OptionalProp a) (OptionalProp b) =
OptionalProp
(maybeToUor (uorToMaybe a <> uorToMaybe b))
instance monoidOptionalProp ∷ Monoid a => Monoid (OptionalProp a) where
instance monoidOptionalProp ∷ Monoid a ⇒ Monoid (OptionalProp a) where
mempty = OptionalProp (defined mempty)
instance foldableOptionalProp ∷ Foldable OptionalProp where
@ -81,21 +81,21 @@ instance altOptionalProp ∷ Alt OptionalProp where
instance castableOptionalProp ∷ Castable a (OptionalProp a)
getOr ∷ ∀ a. a -> OptionalProp a -> a
getOr ∷ ∀ a. a → OptionalProp a → a
getOr default (OptionalProp o) = fromUndefinedOr default o
getOrFlipped ∷ ∀ a. OptionalProp a -> a -> a
getOrFlipped ∷ ∀ a. OptionalProp a → a → a
getOrFlipped = flip getOr
ifTrue ∷ ∀ a. a -> a -> OptionalProp Boolean -> a
ifTrue ∷ ∀ a. a → a → OptionalProp Boolean → a
ifTrue v alt x = if (x ?|| false) then v else alt
isTruthy ∷ OptionalProp Boolean -> Boolean
isTruthy ∷ OptionalProp Boolean → Boolean
isTruthy = getOr false
infixr 5 getOrFlipped as ?||
appendIfDefined ∷ ∀ a. (Semigroup a) => a -> OptionalProp a -> a
appendIfDefined ∷ ∀ a. (Semigroup a) ⇒ a → OptionalProp a → a
appendIfDefined a undefOrA = maybe a (a <> _) (opToMaybe undefOrA)
infixr 7 appendIfDefined as <>?

4
src/Yoga/Block/Layout/Box/Spec.purs
View File

@ -12,10 +12,10 @@ spec =
void
$ renderComponent Box.component {}
it "accepts div props" do
{ findByText } <-
{ findByText } ←
renderComponent Box.component
{ role: "Heinz"
, children: [ R.text "Find me!" ]
}
elem <- findByText "Find me!"
elem ← findByText "Find me!"
elem `shouldHaveAttribute` "role"

116
src/Yoga/Block/Layout/Box/Story.purs
View File

@ -16,14 +16,14 @@ import Yoga.Block.Container.Style (colour)
import Yoga.Block.Container.Style as Styles
import Yoga.Block.Layout.Box as Box
default
∷ { decorators ∷ Array (Effect JSX -> JSX)
, title ∷ String
}
default ∷
{ decorators ∷ Array (Effect JSX → JSX)
, title ∷ String
}
default =
{ title: "Layout/Box"
, decorators:
[ \storyFn ->
[ \storyFn →
R.div_
[ element E.global { styles: Styles.global }
, unsafePerformEffect storyFn
@ -39,59 +39,92 @@ box =
, Block.stack {}
[ Box.component </ myBox "var(--s1)" /> [ R.text "Shadow" ]
, cluster
[ Box.component </ colBox1 F.pink._300 "var(--s0)" /> [ colText1 F.pink._300 "text" ]
, Box.component </ colBox1 F.pink._500 "var(--s0)" /> [ colText1 F.pink._500 "text" ]
, Box.component </ colBox1 F.pink._700 "var(--s0)" /> [ colText1 F.pink._700 "text" ]
[ Box.component </ colBox1 F.pink._300 "var(--s0)" />
[ colText1 F.pink._300 "text" ]
, Box.component </ colBox1 F.pink._500 "var(--s0)" />
[ colText1 F.pink._500 "text" ]
, Box.component </ colBox1 F.pink._700 "var(--s0)" />
[ colText1 F.pink._700 "text" ]
]
, cluster
[ Box.component </ colBox1 F.purple._300 "var(--s-1)" /> [ colText1 F.purple._300 "text" ]
, Box.component </ colBox1 F.purple._500 "var(--s0)" /> [ colText1 F.purple._500 "text" ]
, Box.component </ colBox1 F.purple._700 "var(--s0)" /> [ colText1 F.purple._700 "text" ]
[ Box.component </ colBox1 F.purple._300 "var(--s-1)" />
[ colText1 F.purple._300 "text" ]
, Box.component </ colBox1 F.purple._500 "var(--s0)" />
[ colText1 F.purple._500 "text" ]
, Box.component </ colBox1 F.purple._700 "var(--s0)" />
[ colText1 F.purple._700 "text" ]
]
, cluster
[ Box.component </ colBox1 F.violet._300 "var(--s-1)" /> [ colText1 F.violet._300 "text" ]
, Box.component </ colBox1 F.violet._500 "var(--s0)" /> [ colText1 F.violet._500 "text" ]
, Box.component </ colBox1 F.violet._700 "var(--s0)" /> [ colText1 F.violet._700 "text" ]
[ Box.component </ colBox1 F.violet._300 "var(--s-1)" />
[ colText1 F.violet._300 "text" ]
, Box.component </ colBox1 F.violet._500 "var(--s0)" />
[ colText1 F.violet._500 "text" ]
, Box.component </ colBox1 F.violet._700 "var(--s0)" />
[ colText1 F.violet._700 "text" ]
]
, cluster
[ Box.component </ colBox1 F.blue._300 "var(--s0)" /> [ colText1 F.blue._700 "text" ]
, Box.component </ colBox1 F.blue._500 "var(--s0)" /> [ colText1 F.blue._500 "text" ]
, Box.component </ colBox1 F.blue._700 "var(--s0)" /> [ colText1 F.blue._700 "text" ]
[ Box.component </ colBox1 F.blue._300 "var(--s0)" />
[ colText1 F.blue._700 "text" ]
, Box.component </ colBox1 F.blue._500 "var(--s0)" />
[ colText1 F.blue._500 "text" ]
, Box.component </ colBox1 F.blue._700 "var(--s0)" />
[ colText1 F.blue._700 "text" ]
]
, cluster
[ Box.component </ colBox1 F.lightBlue._300 "var(--s0)" /> [ colText1 F.lightBlue._700 "text" ]
, Box.component </ colBox1 F.lightBlue._500 "var(--s0)" /> [ colText1 F.lightBlue._500 "text" ]
, Box.component </ colBox1 F.lightBlue._700 "var(--s0)" /> [ colText1 F.lightBlue._700 "text" ]
[ Box.component </ colBox1 F.lightBlue._300 "var(--s0)" />
[ colText1 F.lightBlue._700 "text" ]
, Box.component </ colBox1 F.lightBlue._500 "var(--s0)" />
[ colText1 F.lightBlue._500 "text" ]
, Box.component </ colBox1 F.lightBlue._700 "var(--s0)" />
[ colText1 F.lightBlue._700 "text" ]
]
, cluster
[ Box.component </ colBox1 F.teal._300 "var(--s-1)" /> [ colText1 F.teal._300 "text" ]
, Box.component </ colBox1 F.teal._500 "var(--s0)" /> [ colText1 F.teal._500 "text" ]
, Box.component </ colBox1 F.teal._700 "var(--s0)" /> [ colText1 F.teal._700 "text" ]
[ Box.component </ colBox1 F.teal._300 "var(--s-1)" />
[ colText1 F.teal._300 "text" ]
, Box.component </ colBox1 F.teal._500 "var(--s0)" />
[ colText1 F.teal._500 "text" ]
, Box.component </ colBox1 F.teal._700 "var(--s0)" />
[ colText1 F.teal._700 "text" ]
]
, cluster
[ Box.component </ colBox1 F.emerald._300 "var(--s0)" /> [ colText1 F.emerald._300 "text" ]
, Box.component </ colBox1 F.emerald._500 "var(--s0)" /> [ colText1 F.emerald._500 "text" ]
, Box.component </ colBox1 F.emerald._700 "var(--s0)" /> [ colText1 F.emerald._700 "text" ]
[ Box.component </ colBox1 F.emerald._300 "var(--s0)" />
[ colText1 F.emerald._300 "text" ]
, Box.component </ colBox1 F.emerald._500 "var(--s0)" />
[ colText1 F.emerald._500 "text" ]
, Box.component </ colBox1 F.emerald._700 "var(--s0)" />
[ colText1 F.emerald._700 "text" ]
]
, cluster
[ Box.component </ colBox1 F.lime._300 "var(--s-1)" /> [ colText1 F.lime._300 "text" ]
, Box.component </ colBox1 F.lime._500 "var(--s0)" /> [ colText1 F.lime._500 "text" ]
, Box.component </ colBox1 F.lime._700 "var(--s0)" /> [ colText1 F.lime._700 "text" ]
[ Box.component </ colBox1 F.lime._300 "var(--s-1)" />
[ colText1 F.lime._300 "text" ]
, Box.component </ colBox1 F.lime._500 "var(--s0)" />
[ colText1 F.lime._500 "text" ]
, Box.component </ colBox1 F.lime._700 "var(--s0)" />
[ colText1 F.lime._700 "text" ]
]
, cluster
[ Box.component </ colBox1 F.yellow._300 "var(--s-1)" /> [ colText1 F.yellow._300 "text" ]
, Box.component </ colBox1 F.yellow._500 "var(--s0)" /> [ colText1 F.yellow._500 "text" ]
, Box.component </ colBox1 F.yellow._700 "var(--s0)" /> [ colText1 F.yellow._700 "text" ]
[ Box.component </ colBox1 F.yellow._300 "var(--s-1)" />
[ colText1 F.yellow._300 "text" ]
, Box.component </ colBox1 F.yellow._500 "var(--s0)" />
[ colText1 F.yellow._500 "text" ]
, Box.component </ colBox1 F.yellow._700 "var(--s0)" />
[ colText1 F.yellow._700 "text" ]
]
, cluster
[ Box.component </ colBox1 F.red._300 "var(--s-1)" /> [ colText1 F.red._300 "text" ]
, Box.component </ colBox1 F.red._500 "var(--s0)" /> [ colText1 F.red._500 "text" ]
, Box.component </ colBox1 F.red._700 "var(--s0)" /> [ colText1 F.red._700 "text" ]
[ Box.component </ colBox1 F.red._300 "var(--s-1)" />
[ colText1 F.red._300 "text" ]
, Box.component </ colBox1 F.red._500 "var(--s0)" />
[ colText1 F.red._500 "text" ]
, Box.component </ colBox1 F.red._700 "var(--s0)" />
[ colText1 F.red._700 "text" ]
]
, cluster
[ Box.component </ colBox1 F.rose._300 "var(--s-1)" /> [ colText1 F.rose._300 "text" ]
, Box.component </ colBox1 F.rose._500 "var(--s0)" /> [ colText1 F.rose._500 "text" ]
, Box.component </ colBox1 F.rose._700 "var(--s0)" /> [ colText1 F.rose._700 "text" ]
[ Box.component </ colBox1 F.rose._300 "var(--s-1)" />
[ colText1 F.rose._300 "text" ]
, Box.component </ colBox1 F.rose._500 "var(--s0)" />
[ colText1 F.rose._500 "text" ]
, Box.component </ colBox1 F.rose._700 "var(--s0)" />
[ colText1 F.rose._700 "text" ]
]
]
]
@ -123,5 +156,10 @@ box =
(myBox depth)
{ background = cssStringRGBA col1
, borderRadius = E.str "var(--s1)"
, style = R.css { width: "33%", padding: "20px", textAlign: "center", fontWeight: 500 }
, style = R.css
{ width: "33%"
, padding: "20px"
, textAlign: "center"
, fontWeight: 500
}
}

4
src/Yoga/Block/Layout/Box/Style.purs
View File

@ -2,7 +2,7 @@ module Yoga.Block.Layout.Box.Style where
import Yoga.Prelude.Style
type Props ∷ forall k. (Type -> k) -> Row k -> Row k
type Props ∷ ∀ k. (Type → k) → Row k → Row k
type Props f r =
( css ∷ f Style
, padding ∷ f StyleProperty
@ -18,7 +18,7 @@ type Props f r =
| r
)
box ∷ ∀ p. { | Props OptionalProp p } -> Style
box ∷ ∀ p. { | Props OptionalProp p } → Style
box props = styles <>? props.css
where
styles =

12
src/Yoga/Block/Layout/Box/View.purs
View File

@ -1,4 +1,10 @@
module Yoga.Block.Layout.Box.View (component, Props, PropsNoChildren, PropsNoChildrenF, PropsF) where
module Yoga.Block.Layout.Box.View
( component
, Props
, PropsNoChildren
, PropsNoChildrenF
, PropsF
) where
import Yoga.Prelude.View
import Yoga.Block.Internal (DivPropsNoChildren)
@ -23,13 +29,13 @@ type PropsNoChildren =
type PropsOptional =
PropsF OptionalProp
component ∷ ∀ p p_. Union p p_ Props => ReactComponent { | p }
component ∷ ∀ p p_. Union p p_ Props ⇒ ReactComponent { | p }
component = rawComponent
rawComponent ∷ ∀ p. ReactComponent { | p }
rawComponent =
mkForwardRefComponent "Box" do
\(props ∷ { | PropsOptional }) ref -> React.do
\(props ∷ { | PropsOptional }) ref → React.do
pure
$ emotionDiv
ref

4
src/Yoga/Block/Layout/Centre/Spec.purs
View File

@ -12,10 +12,10 @@ spec =
void
$ renderComponent Centre.component {}
it "accepts div props" do
{ findByText } <-
{ findByText } ←
renderComponent Centre.component
{ role: "Heinz"
, children: [ R.text "Find me!" ]
}
elem <- findByText "Find me!"
elem ← findByText "Find me!"
elem `shouldHaveAttribute` "role"

23
src/Yoga/Block/Layout/Centre/Story.purs
View File

@ -13,14 +13,14 @@ import React.Basic.Emotion as E
import Yoga.Block.Container.Style as Styles
import Yoga.Block.Layout.Centre as Centre
default
∷ { decorators ∷ Array (Effect JSX -> JSX)
, title ∷ String
}
default ∷
{ decorators ∷ Array (Effect JSX → JSX)
, title ∷ String
}
default =
{ title: "Layout/Centre"
, decorators:
[ \storyFn ->
[ \storyFn →
R.div
{ children:
[ element E.global { styles: Styles.global }
@ -42,17 +42,24 @@ centre =
, element Centre.component
{ children: [ R.text "Default" ]
, style:
css { backgroundColor: cssStringRGBA F.orange._500, color: "black" }
css
{ backgroundColor: cssStringRGBA F.orange._500
, color: "black"
}
}
, element Centre.component
{ children: [ R.text "Text Centred" ]
, style:
css { backgroundColor: cssStringRGBA F.violet._500, color: "white" }
css
{ backgroundColor: cssStringRGBA F.violet._500
, color: "white"
}
, andText: true
}
, element Centre.component
{ children: [ R.text "With gutters" ]
, style: css { backgroundColor: cssStringRGBA F.pink._700, color: "white" }
, style: css
{ backgroundColor: cssStringRGBA F.pink._700, color: "white" }
, gutters: 3.0 # E.em
}
, E.element Centre.component

4
src/Yoga/Block/Layout/Cluster/Spec.purs
View File

@ -13,11 +13,11 @@ spec =
void
$ renderComponent Cluster.component {}
it "accepts div props" do
{ findByTestId } <-
{ findByTestId } ←
renderComponent Cluster.component
{ role: "Heinz"
, _data: Object.fromHomogeneous { testid: "cluster" }
, children: [ R.text "Find me!" ]
}
elem <- findByTestId "cluster"
elem ← findByTestId "cluster"
shouldHaveAttributeWithValue elem "role" "Heinz"

19
src/Yoga/Block/Layout/Cluster/Story.purs
View File

@ -16,14 +16,14 @@ import Yoga.Block.Container.Style (colour)
import Yoga.Block.Container.Style as Styles
import Yoga.Block.Layout.Cluster as Cluster
default
∷ { decorators ∷ Array (Effect JSX -> JSX)
, title ∷ String
}
default ∷
{ decorators ∷ Array (Effect JSX → JSX)
, title ∷ String
}
default =
{ title: "Layout/Cluster"
, decorators:
[ \storyFn ->
[ \storyFn →
R.div_
[ element E.global { styles: Styles.global }
, unsafePerformEffect storyFn
@ -40,7 +40,8 @@ cluster =
, children:
[ R.h2_ [ R.text "No Options" ]
, el Cluster.component
{ style: css { backgroundColor: cssStringRGBA F.blue._500 } }
{ style: css { backgroundColor: cssStringRGBA F.blue._500 }
}
[ power
( R.div
{ children: [ R.text "Content" ]
@ -63,11 +64,13 @@ cluster =
}
[ R.div
{ children: [ R.text "Child 1" ]
, style: css { backgroundColor: cssStringRGBA F.pink._500 }
, style: css
{ backgroundColor: cssStringRGBA F.pink._500 }
}
, R.div
{ children: [ R.text "Child 2" ]
, style: css { backgroundColor: cssStringRGBA F.emerald._700 }
, style: css
{ backgroundColor: cssStringRGBA F.emerald._700 }
}
]
]

20
src/Yoga/Block/Layout/Cluster/Style.purs
View File

@ -4,29 +4,33 @@ import Yoga.Prelude.Style
import Yoga.Block.Layout.Types (AlignItems, JustifyContent, alignToString, justifyToString)
type Props :: forall k. (Type -> k) -> Row k -> Row k
type Props ∷ ∀ k. (Type → k) → Row k → Row k
type Props f r =
( css ∷ f Style
, space ∷ f String
, rowSpace :: f String
, justifyContent :: f JustifyContent
, alignItems :: f AlignItems
, rowSpace ∷ f String
, justifyContent ∷ f JustifyContent
, alignItems ∷ f AlignItems
, justify ∷ f String
, align ∷ f String
| r
)
cluster ∷ ∀ p. { | Props OptionalProp p } -> Style
cluster ∷ ∀ p. { | Props OptionalProp p } → Style
cluster props = styles <>? props.css
where
space = (props.space <#> \x -> if x == "0" then "0px" else x) ?|| "var(--s1)"
space = (props.space <#> \x → if x == "0" then "0px" else x) ?|| "var(--s1)"
styles =
css
{ display: str "flex"
, flexWrap: wrap
, alignItems: ((str <<< alignToString) <$> props.alignItems) ?|| (str <$> props.align) ?|| center
, justifyContent: ((str <<< justifyToString) <$> props.justifyContent) ?|| (str <$> props.justify) ?|| flexStart
, alignItems: ((str <<< alignToString) <$> props.alignItems)
?|| (str <$> props.align)
?|| center
, justifyContent: ((str <<< justifyToString) <$> props.justifyContent)
?|| (str <$> props.justify)
?|| flexStart
, gap: str space
, rowGap: (str <$> props.rowSpace) ?|| str space
}

16
src/Yoga/Block/Layout/Cluster/View.purs
View File

@ -1,4 +1,10 @@
module Yoga.Block.Layout.Cluster.View (component, Props, PropsF, PropsNoChildren, PropsNoChildrenF) where
module Yoga.Block.Layout.Cluster.View
( component
, Props
, PropsF
, PropsNoChildren
, PropsNoChildrenF
) where
import Yoga.Prelude.View
@ -9,8 +15,8 @@ import Yoga.Block.Layout.Cluster.Style as Style
type PropsNoChildrenF f =
( className ∷ f String
, wrapper ∷ f (Array JSX -> JSX)
, childWrapper ∷ f (Array JSX -> JSX)
, wrapper ∷ f (Array JSX → JSX)
, childWrapper ∷ f (Array JSX → JSX)
| Style.Props f + DivPropsNoChildren
)
@ -28,13 +34,13 @@ type PropsNoChildren =
type PropsOptional =
PropsF OptionalProp
component ∷ ∀ p p_. Union p p_ Props => ReactComponent { | p }
component ∷ ∀ p p_. Union p p_ Props ⇒ ReactComponent { | p }
component = rawComponent
rawComponent ∷ ∀ p. ReactComponent { | p }
rawComponent =
mkForwardRefComponent "Cluster" do
\(props ∷ { | PropsOptional }) ref -> React.do
\(props ∷ { | PropsOptional }) ref → React.do
-- Must be careful here because React fiddles with children
let safeChildren = reactChildrenToArray (unsafeCoerce props.children)
let wrappedChildren = safeChildren

4
src/Yoga/Block/Layout/Cover/Spec.purs
View File

@ -12,10 +12,10 @@ spec =
void
$ renderComponent Cover.component {}
it "accepts div props" do
{ findByText } <-
{ findByText } ←
renderComponent Cover.component
{ role: "Heinz"
, children: [ R.text "Find me!" ]
}
elem <- findByText "Find me!"
elem ← findByText "Find me!"
elem `shouldHaveAttribute` "role"

36
src/Yoga/Block/Layout/Cover/Story.purs
View File

@ -14,14 +14,14 @@ import Yoga.Block as Block
import Yoga.Block.Container.Style as Styles
import Yoga.Block.Layout.Cover as Cover
default
∷ { decorators ∷ Array (Effect JSX -> JSX)
, title ∷ String
}
default ∷
{ decorators ∷ Array (Effect JSX → JSX)
, title ∷ String
}
default =
{ title: "Layout/Cover"
, decorators:
[ \storyFn ->
[ \storyFn →
R.div
{ children:
[ element E.global { styles: Styles.global }
@ -42,12 +42,14 @@ cover =
[ R.h2_ [ R.text "The Cover" ]
, element Cover.component
{ children: [ R.text "Default" ]
, style: css { backgroundColor: cssStringRGBA F.orange._500, color: "black" }
, style: css
{ backgroundColor: cssStringRGBA F.orange._500, color: "black" }
, minHeight: E.px 300
}
, element Cover.component
{ children: [ R.text "With Header and Footer" ]
, style: css { backgroundColor: cssStringRGBA F.violet._500, color: "white" }
, style: css
{ backgroundColor: cssStringRGBA F.violet._500, color: "white" }
, header: R.text "Header"
, footer: R.text "Footer"
, minHeight: E.px 300
@ -55,13 +57,19 @@ cover =
, Block.cluster_
[ element Cover.component
{ children: [ R.text "With Header only" ]
, style: css { backgroundColor: cssStringRGBA F.violet._600, color: "white" }
, style: css
{ backgroundColor: cssStringRGBA F.violet._600
, color: "white"
}
, header: R.text "Header"
, minHeight: E.px 300
}
, element Cover.component
{ children: [ R.text "With Header only centre in remaining" ]
, style: css { backgroundColor: cssStringRGBA F.violet._600, color: "white" }
, style: css
{ backgroundColor: cssStringRGBA F.violet._600
, color: "white"
}
, header: R.text "Header"
, minHeight: E.px 300
, centreInRemaining: true
@ -70,13 +78,19 @@ cover =
, Block.cluster_
[ element Cover.component
{ children: [ R.text "With Footer only" ]
, style: css { backgroundColor: cssStringRGBA F.emerald._700, color: "white" }
, style: css
{ backgroundColor: cssStringRGBA F.emerald._700
, color: "white"
}
, footer: R.text "Footer"
, minHeight: E.px 300
}
, element Cover.component
{ children: [ R.text "With Footer only centre in remaining" ]
, style: css { backgroundColor: cssStringRGBA F.teal._600, color: "white" }
, style: css
{ backgroundColor: cssStringRGBA F.teal._600
, color: "white"
}
, footer: R.text "Footer"
, minHeight: E.px 300
, centreInRemaining: true

75
src/Yoga/Block/Layout/Cover/View.purs
View File

@ -1,4 +1,10 @@
module Yoga.Block.Layout.Cover.View (component, Props, PropsF, PropsNoChildrenF, PropsNoChildren) where
module Yoga.Block.Layout.Cover.View
( component
, Props
, PropsF
, PropsNoChildrenF
, PropsNoChildren
) where
import Yoga.Prelude.View
@ -28,36 +34,59 @@ type Props =
type PropsOptional =
PropsF OptionalProp
component ∷ ∀ p p_. Union p p_ Props => ReactComponent { | p }
component ∷ ∀ p p_. Union p p_ Props ⇒ ReactComponent { | p }
component = rawComponent
rawComponent ∷ ∀ p. ReactComponent { | p }
rawComponent =
mkForwardRefComponent "Cover" do
\(props ∷ { | PropsOptional }) ref -> React.do
let
{ header, footer } = if props.centreInRemaining # isTruthy then
{ header: props.header # foldMap \jsx -> R.div' </* { className: "header", css: Style.header props } /> [ jsx ]
, footer: props.footer # foldMap \jsx -> R.div' </* { className: "footer", css: Style.footer props } /> [ jsx ]
\(props ∷ { | PropsOptional }) ref → React.do
let
{ header, footer } =
if props.centreInRemaining # isTruthy then
{ header: props.header # foldMap \jsx → R.div'
</* { className: "header", css: Style.header props }
/> [ jsx ]
, footer: props.footer # foldMap \jsx → R.div'
</* { className: "footer", css: Style.footer props }
/> [ jsx ]
}
else
case opToMaybe props.header, opToMaybe props.footer of
Just headerJSX, Just footerJSX ->
{ header: R.div' </* { className: "header", css: Style.header props } /> [ headerJSX ]
, footer: R.div' </* { className: "footer", css: Style.footer props } /> [ footerJSX ]
}
Just headerJSX, Nothing ->
{ header: R.div' </* { className: "header", css: Style.header props } /> [ headerJSX ]
, footer: R.div' </* { className: "footer", css: Style.footer props <> Style.invisible } /> [ headerJSX ]
}
Nothing, Just footerJSX ->
{ header: R.div' </* { className: "header", css: Style.header props <> Style.invisible } /> [ footerJSX ]
, footer: R.div' </* { className: "footer", css: Style.footer props } /> [ footerJSX ]
}
Nothing, Nothing -> mempty
main =
R.div' </* { className: "main", css: Style.main } /> props.children
Just headerJSX, Just footerJSX →
{ header: R.div'
</* { className: "header", css: Style.header props }
/> [ headerJSX ]
, footer: R.div'
</* { className: "footer", css: Style.footer props }
/> [ footerJSX ]
}
Just headerJSX, Nothing →
{ header: R.div'
</* { className: "header", css: Style.header props }
/> [ headerJSX ]
, footer: R.div'
</*
{ className: "footer"
, css: Style.footer props <> Style.invisible
}
/> [ headerJSX ]
}
Nothing, Just footerJSX →
{ header: R.div'
</*
{ className: "header"
, css: Style.header props <> Style.invisible
}
/> [ footerJSX ]
, footer: R.div'
</* { className: "footer", css: Style.footer props }
/> [ footerJSX ]
}
Nothing, Nothing → mempty
main =
R.div' </* { className: "main", css: Style.main } /> props.children
pure
$ emotionDiv
ref

6
src/Yoga/Block/Layout/Grid/Spec.purs
View File

@ -12,11 +12,11 @@ spec =
void
$ renderComponent Grid.component { children: [] }
it "accepts div props" do
{ findByText } <-
{ findByText } ←
renderComponent Grid.component
{ role: "Heinz"
, children: [ R.text "Find me!" ]
}
elem <- findByText "Find me!"
parent <- elem # getParentOrFailWith "Grid has no parent"
elem ← findByText "Find me!"
parent ← elem # getParentOrFailWith "Grid has no parent"
parent `shouldHaveAttribute` "role"

31
src/Yoga/Block/Layout/Grid/Story.purs
View File

@ -12,18 +12,18 @@ import React.Basic.DOM as R
import React.Basic.Emotion as E
default ∷
{ decorators ∷ Array (Effect JSX -> JSX)
{ decorators ∷ Array (Effect JSX → JSX)
, title ∷ String
}
default =
{ title: "Layout/Grid"
, decorators:
[ \storyFn ->
R.div_
[ element E.global { styles: Styles.global }
, unsafePerformEffect storyFn
]
]
[ \storyFn →
R.div_
[ element E.global { styles: Styles.global }
, unsafePerformEffect storyFn
]
]
}
grid ∷ Effect JSX
@ -34,10 +34,19 @@ grid =
[ R.h2_ [ R.text "No Options" ]
, element Grid.component
{ children:
[ R.div { children: [ R.text "Grid" ], style: css { backgroundColor: "teal" } }
, R.div { children: [ R.text $ power "Content " 10 ], style: css { backgroundColor: "darkslateblue" } }
, R.div { children: [ R.text $ power "Content " 10 ], style: css { backgroundColor: "darkslateblue" } }
]
[ R.div
{ children: [ R.text "Grid" ]
, style: css { backgroundColor: "teal" }
}
, R.div
{ children: [ R.text $ power "Content " 10 ]
, style: css { backgroundColor: "darkslateblue" }
}
, R.div
{ children: [ R.text $ power "Content " 10 ]
, style: css { backgroundColor: "darkslateblue" }
}
]
, style: css { backgroundColor: "oldlace" }
}
]

8
src/Yoga/Block/Layout/Grid/Style.purs
View File

@ -2,7 +2,7 @@ module Yoga.Block.Layout.Grid.Style where
import Yoga.Prelude.Style
type Props :: forall k. (Type -> k) -> Row k -> Row k
type Props ∷ ∀ k. (Type → k) → Row k → Row k
type Props f r =
( css ∷ f Style
, min ∷ f String
@ -10,12 +10,14 @@ type Props f r =
| r
)
grid ∷ ∀ p. { | Props OptionalProp p } -> Style
grid ∷ ∀ p. { | Props OptionalProp p } → Style
grid props = styles <>? props.css
where
styles =
css
{ display: str "grid"
, gridGap: props.gridGap ?|| var "--s1"
, gridTemplateColumns: str $ "repeat(auto-fit, minmax(min(" <> (props.min ?|| "20rem") <> ", 100%), 1fr))"
, gridTemplateColumns: str $ "repeat(auto-fit, minmax(min("
<> (props.min ?|| "20rem")
<> ", 100%), 1fr))"
}

17
src/Yoga/Block/Layout/Imposter/Story.purs
View File

@ -13,18 +13,18 @@ import React.Basic.Emotion as E
import Yoga (el)
default ∷
{ decorators ∷ Array (Effect JSX -> JSX)
{ decorators ∷ Array (Effect JSX → JSX)
, title ∷ String
}
default =
{ title: "Layout/Imposter"
, decorators:
[ \storyFn ->
R.div_
[ element E.global { styles: Styles.global }
, unsafePerformEffect storyFn
]
]
[ \storyFn →
R.div_
[ element E.global { styles: Styles.global }
, unsafePerformEffect storyFn
]
]
}
imposter ∷ Effect JSX
@ -37,7 +37,8 @@ imposter =
{ style: css { backgroundColor: "hotpink" }
}
[ R.div_
$ [ power
$
[ power
( R.div
{ children: [ R.text "Content" ]
, style: css { backgroundColor: "teal" }

28
src/Yoga/Block/Layout/Imposter/Style.purs
View File

@ -3,7 +3,7 @@ module Yoga.Block.Layout.Imposter.Style where
import Yoga.Prelude.Style
import Data.Interpolate (i)
type Props :: forall k. (Type -> k) -> Row k -> Row k
type Props ∷ ∀ k. (Type → k) → Row k → Row k
type Props f r =
( css ∷ f Style
, margin ∷ f String
@ -12,20 +12,22 @@ type Props f r =
| r
)
imposter ∷ ∀ p. { | Props OptionalProp p } -> Style
imposter ∷ ∀ p. { | Props OptionalProp p } → Style
imposter props = styles <>? props.css
where
styles =
css
{ position: (props.fixed <#> if _ then fixed else absolute) ?|| absolute
, top: 50.0 # percent
, left: 50.0 # percent
, transform: str "translate(-50%,-50%)"
, zIndex: str "5"
, "&:.contain":
styles =
css
{ position: (props.fixed <#> if _ then fixed else absolute) ?|| absolute
, top: 50.0 # percent
, left: 50.0 # percent
, transform: str "translate(-50%,-50%)"
, zIndex: str "5"
, "&:.contain":
nest
{ overflow: auto
, maxWidth: str $ i "calc(100% - (" (getOr "0px" props.margin) " * 2))"
, maxHeight: str $ i "calc(100% - (" (getOr "0px" props.margin) " * 2))"
, maxWidth: str $ i "calc(100% - (" (getOr "0px" props.margin)
" * 2))"
, maxHeight: str $ i "calc(100% - (" (getOr "0px" props.margin)
" * 2))"
}
}
}

4
src/Yoga/Block/Layout/Imposter/View.purs
View File

@ -14,13 +14,13 @@ type Props =
type PropsOptional =
PropsF OptionalProp
component ∷ ∀ p q. Union p q Props => ReactComponent { | p }
component ∷ ∀ p q. Union p q Props ⇒ ReactComponent { | p }
component = rawComponent
rawComponent ∷ ∀ p. ReactComponent { | p }
rawComponent =
mkForwardRefComponent "Imposter" do
\(props ∷ { | PropsOptional }) ref -> React.do
\(props ∷ { | PropsOptional }) ref → React.do
pure
$ emotionDiv ref props
{ className: "ry-imposter " <>? props.className

6
src/Yoga/Block/Layout/Sidebar/Spec.purs
View File

@ -12,12 +12,12 @@ spec =
void
$ renderComponent Sidebar.component { sidebar: mempty, children: [] }
it "accepts div props" do
{ findByText } <-
{ findByText } ←
renderComponent Sidebar.component
{ role: "Heinz"
, children: [ R.text "Find me!" ]
, sidebar: mempty
}
elem <- findByText "Find me!"
parent <- elem # getParentOrFailWith "Sidebar has no parent"
elem ← findByText "Find me!"
parent ← elem # getParentOrFailWith "Sidebar has no parent"
parent `shouldHaveAttribute` "role"

Some files were not shown because too many files have changed in this diff Show More