mirror of
https://github.com/rowtype-yoga/ry-blocks.git
synced 2024-09-11 21:38:06 +03:00
Update framer motion
This commit is contained in:
Mark Eibes
parent
392806003b
commit
6802898f8d
@ -1,4 +1,7 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
stories: ['../output/**/*.Story/index.js'],
|
core: {
|
||||||
addons: []
|
builder: "webpack5",
|
||||||
};
|
},
|
||||||
|
stories: ["../output/**/*.Story/index.js"],
|
||||||
|
addons: [],
|
||||||
|
}
|
||||||
|
|||||||
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"editor.formatOnSave": true,
|
"editor.formatOnSave": true,
|
||||||
"workbench.colorTheme": "Kai Light Accent",
|
"workbench.colorTheme": "Abyss",
|
||||||
"search.useGlobalIgnoreFiles": true,
|
"search.useGlobalIgnoreFiles": true,
|
||||||
"files.watcherExclude": {
|
"files.watcherExclude": {
|
||||||
"**/.spago/**": true,
|
"**/.spago/**": true,
|
||||||
|
|||||||
24
package.json
24
package.json
@ -9,9 +9,11 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.10.5",
|
"@babel/core": "^7.10.5",
|
||||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.2",
|
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.2",
|
||||||
"@storybook/addons": "^6.3.4",
|
"@storybook/addons": "^6.4.9",
|
||||||
"@storybook/react": "^6.3.4",
|
"@storybook/builder-webpack5": "^6.4.9",
|
||||||
"@storybook/theming": "^6.3.4",
|
"@storybook/manager-webpack5": "^6.4.9",
|
||||||
|
"@storybook/react": "^6.4.9",
|
||||||
|
"@storybook/theming": "^6.4.9",
|
||||||
"@testing-library/react": "^11.0.4",
|
"@testing-library/react": "^11.0.4",
|
||||||
"@testing-library/user-event": "^12.1.7",
|
"@testing-library/user-event": "^12.1.7",
|
||||||
"babel-loader": "^8.1.0",
|
"babel-loader": "^8.1.0",
|
||||||
@ -20,17 +22,15 @@
|
|||||||
"html-webpack-plugin": "^4.5.0",
|
"html-webpack-plugin": "^4.5.0",
|
||||||
"jsdom": "^16.3.0",
|
"jsdom": "^16.3.0",
|
||||||
"jsdom-global": "^3.0.2",
|
"jsdom-global": "^3.0.2",
|
||||||
"purescript": "^0.14.3",
|
|
||||||
"react-refresh": "^0.8.3",
|
"react-refresh": "^0.8.3",
|
||||||
"rimraf": "^3.0.2",
|
"rimraf": "^3.0.2",
|
||||||
"source-map": "GerHobbelt/source-map#patch-8",
|
"source-map": "GerHobbelt/source-map#patch-8",
|
||||||
"source-map-loader": "^1.1.2",
|
"source-map-loader": "^1.1.2",
|
||||||
"spago": "^0.20.3",
|
|
||||||
"svg2psreact": "^2.1.0",
|
"svg2psreact": "^2.1.0",
|
||||||
"webpack": "^4.0.0",
|
"webpack": "^5.0.0",
|
||||||
"webpack-cli": "^4.0.0",
|
"webpack-cli": "^4.9.1",
|
||||||
"webpack-dev-server": "^3.11.0",
|
"webpack-dev-server": "^4.6.0",
|
||||||
"webpack-merge": "^5.0.9"
|
"webpack-merge": "^5.8.0"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"clean": "rimraf node_modules output dce-output .spago dist/* *.lock dist",
|
"clean": "rimraf node_modules output dce-output .spago dist/* *.lock dist",
|
||||||
@ -55,9 +55,9 @@
|
|||||||
"@emotion/react": "^11.4.0",
|
"@emotion/react": "^11.4.0",
|
||||||
"@popperjs/core": "^2.6.0",
|
"@popperjs/core": "^2.6.0",
|
||||||
"downshift": "^6.1.2",
|
"downshift": "^6.1.2",
|
||||||
"framer-motion": "^4.0.3",
|
"framer-motion": "^5.3.3",
|
||||||
"react": "^16.0.0",
|
"react": "^17.0.0",
|
||||||
"react-dom": "^16.0.0",
|
"react-dom": "^17.0.0",
|
||||||
"react-intersection-observer": "^8.32.0",
|
"react-intersection-observer": "^8.32.0",
|
||||||
"react-popper": "^2.2.4",
|
"react-popper": "^2.2.4",
|
||||||
"react-syntax-highlighter": "^15.3.1"
|
"react-syntax-highlighter": "^15.3.1"
|
||||||
|
|||||||
@ -6,6 +6,7 @@ import Control.MonadZero as MZ
|
|||||||
import Data.Traversable (traverse)
|
import Data.Traversable (traverse)
|
||||||
import Data.TwoOrMore (TwoOrMore)
|
import Data.TwoOrMore (TwoOrMore)
|
||||||
import Data.TwoOrMore as TwoOrMore
|
import Data.TwoOrMore as TwoOrMore
|
||||||
|
import Effect.Class.Console as Console
|
||||||
import Effect.Unsafe (unsafePerformEffect)
|
import Effect.Unsafe (unsafePerformEffect)
|
||||||
import Foreign.Object as Object
|
import Foreign.Object as Object
|
||||||
import Framer.Motion (VariantLabel)
|
import Framer.Motion (VariantLabel)
|
||||||
@ -40,7 +41,7 @@ component =
|
|||||||
\(props ∷ Props) -> React.do
|
\(props ∷ Props) -> React.do
|
||||||
maybeAnimationVariants /\ setVariants <- useState' Nothing
|
maybeAnimationVariants /\ setVariants <- useState' Nothing
|
||||||
variantIndex /\ modVariantIndex <- useState props.activeItemIndex
|
variantIndex /\ modVariantIndex <- useState props.activeItemIndex
|
||||||
maybeDragX /\ setDragX <- useState' Nothing
|
maybeDragXRef <- useRef Nothing
|
||||||
{ scrollX, scrollY } <- useScrollPosition
|
{ scrollX, scrollY } <- useScrollPosition
|
||||||
activeLeft <- useMotionValue 0.0
|
activeLeft <- useMotionValue 0.0
|
||||||
activeWidth <- useMotionValue 0.0
|
activeWidth <- useMotionValue 0.0
|
||||||
@ -50,14 +51,16 @@ component =
|
|||||||
unless (maybeAnimationVariants == Just styles) do
|
unless (maybeAnimationVariants == Just styles) do
|
||||||
setVariants (Just styles)
|
setVariants (Just styles)
|
||||||
mempty
|
mempty
|
||||||
useLayoutEffect maybeDragX do
|
let
|
||||||
case maybeDragX, maybeAnimationVariants of
|
setDragXRef new = do
|
||||||
Just x, Just animationVariants -> do
|
writeRef maybeDragXRef new
|
||||||
let { left, width } = handleDrag { activeItemIndex: props.activeItemIndex, animationVariants, x }
|
maybeDragX <- readRef maybeDragXRef
|
||||||
activeLeft # MotionValue.set left
|
case maybeDragX, maybeAnimationVariants of
|
||||||
activeWidth # MotionValue.set width
|
Just x, Just animationVariants -> do
|
||||||
_, _ -> mempty
|
let { left, width } = handleDrag { activeItemIndex: props.activeItemIndex, animationVariants, x }
|
||||||
mempty
|
activeLeft # MotionValue.set left
|
||||||
|
activeWidth # MotionValue.set width
|
||||||
|
_, _ -> mempty
|
||||||
useEffect props.activeItemIndex do
|
useEffect props.activeItemIndex do
|
||||||
modVariantIndex (const props.activeItemIndex)
|
modVariantIndex (const props.activeItemIndex)
|
||||||
mempty
|
mempty
|
||||||
@ -84,63 +87,66 @@ component =
|
|||||||
{ className: "ry-active-segmented-element-wrapper"
|
{ className: "ry-active-segmented-element-wrapper"
|
||||||
, css: Style.activeElementWrapper
|
, css: Style.activeElementWrapper
|
||||||
, children:
|
, children:
|
||||||
[ Emotion.element Motion.div
|
[ Emotion.element Motion.div
|
||||||
{ css: Style.activeElement
|
{ css: Style.activeElement
|
||||||
, layout: Motion.layout true
|
, layout: Motion.layout true
|
||||||
, custom: Motion.customProp (({ childRefs: props.activeItemRefs, scrollX, scrollY }) ∷ Custom)
|
, custom: Motion.customProp (({ childRefs: props.activeItemRefs, scrollX, scrollY }) ∷ Custom)
|
||||||
, variants
|
, variants
|
||||||
, className: "ry-active-segmented-element"
|
, className: "ry-active-segmented-element"
|
||||||
, initial: Motion.initial $ indexToVariant props.activeItemIndex
|
, initial: Motion.initial $ indexToVariant props.activeItemIndex
|
||||||
, drag: Motion.drag "x"
|
, drag: Motion.drag "x"
|
||||||
, dragMomentum: Motion.dragMomentum false
|
, dragMomentum: Motion.dragMomentum false
|
||||||
, animate: Motion.animate $ indexToVariant variantIndex
|
, animate: Motion.animate $ indexToVariant variantIndex
|
||||||
, style:
|
, style:
|
||||||
css
|
css
|
||||||
{ left: activeLeft
|
{ left: activeLeft
|
||||||
, width: activeWidth
|
, 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:
|
, onDragStart:
|
||||||
Motion.onDragStart \_ pi -> do
|
Motion.onDragStart \_ pi -> do
|
||||||
maybeBbox <- getBoundingBoxFromRef (TwoOrMore.head props.activeItemRefs)
|
maybeBbox <- getBoundingBoxFromRef (TwoOrMore.head props.activeItemRefs)
|
||||||
for_ maybeBbox \bbox ->
|
for_ maybeBbox \bbox ->
|
||||||
setDragX (Just (pi.point.x - bbox.left))
|
setDragXRef (Just (pi.point.x - bbox.left))
|
||||||
, onDrag:
|
, onDrag:
|
||||||
Motion.onDrag \_ pi -> do
|
Motion.onDrag \_ pi -> do
|
||||||
when (isJust maybeDragX) do
|
Console.log "Marlene on the wall"
|
||||||
maybeBbox <- getBoundingBoxFromRef (TwoOrMore.head props.activeItemRefs)
|
maybeDragX <- readRef maybeDragXRef
|
||||||
for_ maybeBbox \bbox ->
|
when (isJust maybeDragX) do
|
||||||
setDragX (Just (pi.point.x - bbox.left))
|
maybeBbox <- getBoundingBoxFromRef (TwoOrMore.head props.activeItemRefs)
|
||||||
, onDragEnd:
|
for_ maybeBbox \bbox ->
|
||||||
Motion.onDragEnd \_ _ -> do
|
setDragXRef (Just (pi.point.x - bbox.left))
|
||||||
let
|
, onDragEnd:
|
||||||
x = maybeDragX # fromMaybe' \_ -> unsafeCrashWith "no x"
|
Motion.onDragEnd \_ _ -> do
|
||||||
newIdx =
|
maybeDragX <- readRef maybeDragXRef
|
||||||
findOverlapping
|
let
|
||||||
props.activeItemIndex
|
x = maybeDragX # fromMaybe' \_ -> unsafeCrashWith "no x"
|
||||||
animationVariants
|
newIdx =
|
||||||
x
|
findOverlapping
|
||||||
newItem = fromMaybe'
|
props.activeItemIndex
|
||||||
(\_ -> TwoOrMore.head props.buttonContents)
|
animationVariants
|
||||||
(props.buttonContents TwoOrMore.!! newIdx)
|
x
|
||||||
v =
|
newItem = fromMaybe'
|
||||||
animationVariants TwoOrMore.!! newIdx
|
(\_ -> TwoOrMore.head props.buttonContents)
|
||||||
# fromMaybe' \_ -> unsafeCrashWith "omg"
|
(props.buttonContents TwoOrMore.!! newIdx)
|
||||||
activeLeft # MotionValue.set v.left
|
v =
|
||||||
activeWidth # MotionValue.set v.width
|
animationVariants TwoOrMore.!! newIdx
|
||||||
props.updateActiveItem newItem newIdx
|
# fromMaybe' \_ -> unsafeCrashWith "omg"
|
||||||
setDragX Nothing
|
activeLeft # MotionValue.set v.left
|
||||||
, dragElastic: Motion.dragElastic false
|
activeWidth # MotionValue.set v.width
|
||||||
, dragConstraints: Motion.dragConstraintsBoundingBox { left: 0, right: 0, top: 0, bottom: 0 }
|
props.updateActiveItem newItem newIdx
|
||||||
, transition:
|
writeRef maybeDragXRef Nothing
|
||||||
Motion.transition
|
, dragElastic: Motion.dragElastic false
|
||||||
{ type: "tween"
|
, dragConstraints: Motion.dragConstraintsBoundingBox { left: 0, right: 0, top: 0, bottom: 0 }
|
||||||
, duration: if isJust maybeDragX then 0.0 else 0.167
|
, transition:
|
||||||
, ease: "easeOut"
|
Motion.transition
|
||||||
}
|
{ type: "tween"
|
||||||
, _aria: Object.fromHomogeneous { hidden: "true" }
|
, duration: if isJust (unsafePerformEffect (readRef maybeDragXRef)) then 0.0 else 0.167
|
||||||
}
|
, ease: "easeOut"
|
||||||
]
|
}
|
||||||
|
, _aria: Object.fromHomogeneous { hidden: "true" }
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
getStyles ∷ TwoOrMore (Ref (Nullable Node)) -> Effect (TwoOrMore BBox)
|
getStyles ∷ TwoOrMore (Ref (Nullable Node)) -> Effect (TwoOrMore BBox)
|
||||||
@ -177,12 +183,12 @@ findOverlapping activeIndex styles x =
|
|||||||
let tooFarRight = MZ.guard (x >= lst.left) $> TwoOrMore.length styles - 1
|
let tooFarRight = MZ.guard (x >= lst.left) $> TwoOrMore.length styles - 1
|
||||||
TwoOrMore.findIndex inside styles <|> tooFarLeft <|> tooFarRight
|
TwoOrMore.findIndex inside styles <|> tooFarLeft <|> tooFarRight
|
||||||
|
|
||||||
handleDrag ∷
|
handleDrag
|
||||||
{ activeItemIndex ∷ Int
|
∷ { activeItemIndex ∷ Int
|
||||||
, animationVariants ∷ TwoOrMore BBox
|
, animationVariants ∷ TwoOrMore BBox
|
||||||
, x ∷ Number
|
, x ∷ Number
|
||||||
} ->
|
}
|
||||||
{ left ∷ Number, width ∷ Number }
|
-> { left ∷ Number, width ∷ Number }
|
||||||
handleDrag { x, activeItemIndex, animationVariants } = do
|
handleDrag { x, activeItemIndex, animationVariants } = do
|
||||||
let idx = findOverlapping activeItemIndex animationVariants x
|
let idx = findOverlapping activeItemIndex animationVariants x
|
||||||
let av = animationVariants
|
let av = animationVariants
|
||||||
@ -223,8 +229,7 @@ handleDrag { x, activeItemIndex, animationVariants } = do
|
|||||||
let width = right - left
|
let width = right - left
|
||||||
if x < firstVariant.left then
|
if x < firstVariant.left then
|
||||||
{ left: firstVariant.left, width: firstVariant.width }
|
{ left: firstVariant.left, width: firstVariant.width }
|
||||||
else
|
else if x >= lastVariant.left + lastVariant.width then do
|
||||||
if x >= lastVariant.left + lastVariant.width then do
|
{ left: lastVariant.left, width: lastVariant.width }
|
||||||
{ left: lastVariant.left, width: lastVariant.width }
|
else do
|
||||||
else do
|
{ left, width }
|
||||||
{ left, width }
|
|
||||||
|
|||||||
@ -71,32 +71,34 @@ rawComponent =
|
|||||||
buttonRef <- useRef null
|
buttonRef <- useRef null
|
||||||
toggleRef <- useRef null
|
toggleRef <- useRef null
|
||||||
tapState <- useRef TapNotAllowed
|
tapState <- useRef TapNotAllowed
|
||||||
dragState /\ setDragState <- React.useState' NotDragging
|
dragStateRef <- useRef NotDragging
|
||||||
useEffect dragState do
|
let
|
||||||
case dragState of
|
setDragState new = do
|
||||||
NotDragging -> mempty
|
writeRef dragStateRef new
|
||||||
Dragging _ -> do
|
dragState <- readRef dragStateRef
|
||||||
writeRef tapState TapNotAllowed
|
case dragState of
|
||||||
DragDone { startX, endX } -> do
|
NotDragging -> mempty
|
||||||
maybeBbox <- getBoundingBoxFromRef buttonRef
|
Dragging _ -> do
|
||||||
for_ maybeBbox \bbox -> do
|
writeRef tapState TapNotAllowed
|
||||||
if endX - startX <= (bbox.left - startX) + (bbox.width / 2.0) then do
|
DragDone { startX, endX } -> do
|
||||||
setTogglePosition ToggleIsLeft
|
maybeBbox <- getBoundingBoxFromRef buttonRef
|
||||||
else do
|
for_ maybeBbox \bbox -> do
|
||||||
setTogglePosition ToggleIsRight
|
if endX - startX <= (bbox.left - startX) + (bbox.width / 2.0) then do
|
||||||
mempty
|
setTogglePosition ToggleIsLeft
|
||||||
|
else do
|
||||||
|
setTogglePosition ToggleIsRight
|
||||||
let
|
let
|
||||||
buttonVariants =
|
buttonVariants =
|
||||||
{ left:
|
{ left:
|
||||||
{ backgroundColor:
|
{ backgroundColor:
|
||||||
(Emotion.str <<< Color.cssStringRGBA <$> props.backgroundLeft)
|
(Emotion.str <<< Color.cssStringRGBA <$> props.backgroundLeft)
|
||||||
?|| (Emotion.str colour.backgroundLayer3)
|
?|| (Emotion.str colour.backgroundLayer3)
|
||||||
}
|
}
|
||||||
, right:
|
, right:
|
||||||
{ backgroundColor:
|
{ backgroundColor:
|
||||||
(Emotion.str <<< Color.cssStringRGBA <$> props.backgroundRight)
|
(Emotion.str <<< Color.cssStringRGBA <$> props.backgroundRight)
|
||||||
?|| (Emotion.str colour.success)
|
?|| (Emotion.str colour.success)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
buttonVariant = Motion.makeVariantLabels buttonVariants
|
buttonVariant = Motion.makeVariantLabels buttonVariants
|
||||||
-- components
|
-- components
|
||||||
@ -108,40 +110,43 @@ rawComponent =
|
|||||||
, css: Style.button <>? props.css
|
, css: Style.button <>? props.css
|
||||||
, variants: Motion.variants buttonVariants
|
, variants: Motion.variants buttonVariants
|
||||||
, initial:
|
, initial:
|
||||||
Motion.initial case togglePosition of
|
Motion.initial case togglePosition of
|
||||||
ToggleIsRight -> buttonVariant.right
|
ToggleIsRight -> buttonVariant.right
|
||||||
ToggleIsLeft -> buttonVariant.left
|
ToggleIsLeft -> buttonVariant.left
|
||||||
, animate:
|
, animate:
|
||||||
Motion.animate case togglePosition of
|
Motion.animate case togglePosition of
|
||||||
ToggleIsRight -> buttonVariant.right
|
ToggleIsRight -> buttonVariant.right
|
||||||
ToggleIsLeft -> buttonVariant.left
|
ToggleIsLeft -> buttonVariant.left
|
||||||
, value: show togglePosition
|
, value: show togglePosition
|
||||||
, onClick: handler preventDefault \_ -> setTogglePosition (flipToggle togglePosition)
|
, onClick: handler preventDefault \_ -> setTogglePosition (flipToggle togglePosition)
|
||||||
, style: props.style
|
, style: props.style
|
||||||
, _data: Object.singleton "testid" "toggle-testid"
|
, _data: Object.singleton "testid" "toggle-testid"
|
||||||
, role: "switch"
|
, role: "switch"
|
||||||
, _aria:
|
, _aria:
|
||||||
Object.fromHomogeneous
|
Object.fromHomogeneous
|
||||||
{ checked:
|
{ checked:
|
||||||
case togglePosition of
|
case togglePosition of
|
||||||
ToggleIsLeft -> "false"
|
ToggleIsLeft -> "false"
|
||||||
ToggleIsRight -> "true"
|
ToggleIsRight -> "true"
|
||||||
}
|
}
|
||||||
<>? (props.ariaLabel <#> Object.singleton "label")
|
<>? (props.ariaLabel <#> Object.singleton "label")
|
||||||
, ref: buttonRef
|
, ref: buttonRef
|
||||||
, children
|
, children
|
||||||
}
|
}
|
||||||
textContainer =
|
textContainer =
|
||||||
div
|
div
|
||||||
</* { className: "ry-toggle-text"
|
</*
|
||||||
|
{ className: "ry-toggle-text"
|
||||||
, css: Style.toggleTextContainer
|
, css: Style.toggleTextContainer
|
||||||
}
|
}
|
||||||
textOnContainer =
|
textOnContainer =
|
||||||
div
|
div
|
||||||
</* { className: "ry-toggle-text-on"
|
</*
|
||||||
|
{ className: "ry-toggle-text-on"
|
||||||
, css: Style.toggleText
|
, css: Style.toggleText
|
||||||
}
|
}
|
||||||
/> [ guard (togglePosition == ToggleIsRight)
|
/>
|
||||||
|
[ guard (togglePosition == ToggleIsRight)
|
||||||
$ textOn
|
$ textOn
|
||||||
[ props.left
|
[ props.left
|
||||||
?|| (Icon.component </> { icon: SVGIcon.on, stroke: Style.successTextColour })
|
?|| (Icon.component </> { icon: SVGIcon.on, stroke: Style.successTextColour })
|
||||||
@ -149,10 +154,12 @@ rawComponent =
|
|||||||
]
|
]
|
||||||
textOffContainer =
|
textOffContainer =
|
||||||
div
|
div
|
||||||
</* { className: "ry-toggle-text-off"
|
</*
|
||||||
|
{ className: "ry-toggle-text-off"
|
||||||
, css: Style.toggleText
|
, css: Style.toggleText
|
||||||
}
|
}
|
||||||
/> [ guard (togglePosition == ToggleIsLeft)
|
/>
|
||||||
|
[ guard (togglePosition == ToggleIsLeft)
|
||||||
$ textOff
|
$ textOff
|
||||||
[ props.right
|
[ props.right
|
||||||
?|| (Icon.component </> { icon: SVGIcon.off, stroke: Style.disabledTextColour })
|
?|| (Icon.component </> { icon: SVGIcon.off, stroke: Style.disabledTextColour })
|
||||||
@ -160,7 +167,8 @@ rawComponent =
|
|||||||
]
|
]
|
||||||
textOn =
|
textOn =
|
||||||
Motion.div
|
Motion.div
|
||||||
</ { className: "ry-toggle-text-container"
|
</
|
||||||
|
{ className: "ry-toggle-text-container"
|
||||||
, key: "ry-toggle-text-on-container"
|
, key: "ry-toggle-text-on-container"
|
||||||
, initial: Motion.initial $ false
|
, initial: Motion.initial $ false
|
||||||
, animate: Motion.animate $ css { scale: 1, opacity: 1 }
|
, animate: Motion.animate $ css { scale: 1, opacity: 1 }
|
||||||
@ -168,7 +176,8 @@ rawComponent =
|
|||||||
}
|
}
|
||||||
textOff =
|
textOff =
|
||||||
Motion.div
|
Motion.div
|
||||||
</ { className: "ry-toggle-text-container"
|
</
|
||||||
|
{ className: "ry-toggle-text-container"
|
||||||
, key: "ry-toggle-text-off-container"
|
, key: "ry-toggle-text-off-container"
|
||||||
, initial: Motion.initial $ false
|
, initial: Motion.initial $ false
|
||||||
, animate: Motion.animate $ css { scale: 1, opacity: 1 }
|
, animate: Motion.animate $ css { scale: 1, opacity: 1 }
|
||||||
@ -177,11 +186,12 @@ rawComponent =
|
|||||||
animateTextPresence = Motion.animatePresence </ {}
|
animateTextPresence = Motion.animatePresence </ {}
|
||||||
toggle =
|
toggle =
|
||||||
toggleCircle
|
toggleCircle
|
||||||
</> { buttonRef
|
</>
|
||||||
|
{ buttonRef
|
||||||
, toggleRef
|
, toggleRef
|
||||||
, togglePosition
|
, togglePosition
|
||||||
, onChange: setTogglePosition
|
, onChange: setTogglePosition
|
||||||
, dragState
|
, dragStateRef
|
||||||
, setDragState
|
, setDragState
|
||||||
, tapState
|
, tapState
|
||||||
}
|
}
|
||||||
@ -198,7 +208,7 @@ toggleCircle ∷
|
|||||||
, toggleRef ∷ NodeRef
|
, toggleRef ∷ NodeRef
|
||||||
, buttonRef ∷ NodeRef
|
, buttonRef ∷ NodeRef
|
||||||
, togglePosition ∷ TogglePosition
|
, togglePosition ∷ TogglePosition
|
||||||
, dragState ∷ DragState
|
, dragStateRef ∷ Ref DragState
|
||||||
, setDragState ∷ DragState -> Effect Unit
|
, setDragState ∷ DragState -> Effect Unit
|
||||||
, tapState ∷ Ref TappingState
|
, tapState ∷ Ref TappingState
|
||||||
}
|
}
|
||||||
@ -206,14 +216,14 @@ toggleCircle =
|
|||||||
unsafePerformEffect
|
unsafePerformEffect
|
||||||
$ reactComponent "ToggleCircle" do
|
$ reactComponent "ToggleCircle" do
|
||||||
\( { togglePosition
|
\( { togglePosition
|
||||||
, onChange
|
, onChange
|
||||||
, toggleRef
|
, toggleRef
|
||||||
, buttonRef
|
, buttonRef
|
||||||
, dragState
|
, dragStateRef
|
||||||
, setDragState
|
, setDragState
|
||||||
, tapState
|
, tapState
|
||||||
}
|
}
|
||||||
) -> React.do
|
) -> React.do
|
||||||
maxLeft /\ setMaxLeft <- useState' Nothing
|
maxLeft /\ setMaxLeft <- useState' Nothing
|
||||||
yPos /\ setYPos <- useState' Nothing
|
yPos /\ setYPos <- useState' Nothing
|
||||||
useEffectAlways do
|
useEffectAlways do
|
||||||
@ -236,7 +246,8 @@ toggleCircle =
|
|||||||
toggleVariant = Motion.makeVariantLabels toggleVariants
|
toggleVariant = Motion.makeVariantLabels toggleVariants
|
||||||
pure
|
pure
|
||||||
$ Motion.div
|
$ Motion.div
|
||||||
</*> { className: "ry-toggle-toggle"
|
</*>
|
||||||
|
{ className: "ry-toggle-toggle"
|
||||||
, layout: Motion.layout true
|
, layout: Motion.layout true
|
||||||
, onClick: handler stopPropagation mempty
|
, onClick: handler stopPropagation mempty
|
||||||
, onTouchStart: handler stopPropagation mempty
|
, onTouchStart: handler stopPropagation mempty
|
||||||
@ -247,67 +258,70 @@ toggleCircle =
|
|||||||
, key: if isNothing maxLeft then "initialising" else show yPos
|
, key: if isNothing maxLeft then "initialising" else show yPos
|
||||||
, dragElastic: Motion.dragElastic false
|
, dragElastic: Motion.dragElastic false
|
||||||
, dragConstraints:
|
, dragConstraints:
|
||||||
Motion.dragConstraintsBoundingBox
|
Motion.dragConstraintsBoundingBox
|
||||||
{ left:
|
{ left:
|
||||||
case togglePosition of
|
case togglePosition of
|
||||||
ToggleIsLeft -> zero
|
ToggleIsLeft -> zero
|
||||||
ToggleIsRight -> -(maxLeft <#> (_ - Style.dragWidthDelta) # fromMaybe 0.0)
|
ToggleIsRight -> 10.0 -- [WARN] Maybe this breaks down
|
||||||
, right:
|
, right:
|
||||||
case togglePosition of
|
case togglePosition of
|
||||||
ToggleIsRight -> zero
|
ToggleIsRight -> 26.0 -- [WARN] Maybe this breaks down
|
||||||
ToggleIsLeft -> maxLeft <#> (_ - Style.dragWidthDelta) # fromMaybe 0.0
|
ToggleIsLeft -> maxLeft <#> (_ - Style.dragWidthDelta) # fromMaybe 0.0
|
||||||
}
|
}
|
||||||
, variants: Motion.variants toggleVariants
|
, variants: Motion.variants toggleVariants
|
||||||
, transition: Motion.transition { type: "tween", duration: 0.33, ease: "easeOut" }
|
, transition: Motion.transition { type: "tween", duration: 0.33, ease: "easeOut" }
|
||||||
, whileTap:
|
, whileTap:
|
||||||
Motion.prop
|
Motion.prop
|
||||||
$ css
|
$ css
|
||||||
{ width: "calc(var(--s2)*0.85 + 10px)"
|
{ width: "calc(var(--s2)*0.85 + 10px)"
|
||||||
, left:
|
, left:
|
||||||
case togglePosition of
|
case togglePosition of
|
||||||
ToggleIsLeft -> Style.toggleLeft
|
ToggleIsLeft -> Style.toggleLeft
|
||||||
ToggleIsRight -> "calc(" <> Style.toggleLeft <> " - 10px)"
|
ToggleIsRight -> "calc(" <> Style.toggleLeft <> " - 10px)"
|
||||||
, transition: { type: "tween", duration: 0.10, ease: "easeInOut" }
|
, transition: { type: "tween", duration: 0.10, ease: "easeInOut" }
|
||||||
}
|
}
|
||||||
, onTapStart:
|
, onTapStart:
|
||||||
Motion.onTapStart \_ _ -> writeRef tapState TapAllowed
|
Motion.onTapStart \_ _ -> writeRef tapState TapAllowed
|
||||||
, onTap:
|
, onTap:
|
||||||
Motion.onTap \_ _ -> do
|
Motion.onTap \_ _ -> do
|
||||||
ts <- readRef tapState
|
ts <- readRef tapState
|
||||||
case ts of
|
case ts of
|
||||||
TapAllowed -> onChange (flipToggle togglePosition)
|
TapAllowed -> onChange (flipToggle togglePosition)
|
||||||
_ -> mempty
|
_ -> mempty
|
||||||
mempty
|
mempty
|
||||||
, onTapCancel:
|
, onTapCancel:
|
||||||
Motion.onTapCancel \_ _ -> do
|
Motion.onTapCancel \_ _ -> do
|
||||||
writeRef tapState TapNotAllowed
|
writeRef tapState TapNotAllowed
|
||||||
mempty
|
mempty
|
||||||
, initial: Motion.initial false
|
, initial: Motion.initial false
|
||||||
, animate:
|
, animate:
|
||||||
Motion.animate case togglePosition of
|
Motion.animate case togglePosition of
|
||||||
ToggleIsLeft -> toggleVariant.left
|
ToggleIsLeft -> toggleVariant.left
|
||||||
ToggleIsRight -> toggleVariant.right
|
ToggleIsRight -> toggleVariant.right
|
||||||
, onDragStart:
|
, onDragStart:
|
||||||
Motion.onDragStart \_ pi -> do
|
Motion.onDragStart \_ pi -> do
|
||||||
maybeBBox <- getBoundingBoxFromRef toggleRef
|
maybeBBox <- getBoundingBoxFromRef toggleRef
|
||||||
let x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)
|
let x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)
|
||||||
setDragState
|
setDragState
|
||||||
$ Dragging
|
$ Dragging
|
||||||
{ startX: x # fromMaybe pi.point.x, currentX: pi.point.x
|
{ startX: x # fromMaybe pi.point.x
|
||||||
}
|
, currentX: pi.point.x
|
||||||
|
}
|
||||||
, onDrag:
|
, onDrag:
|
||||||
Motion.onDrag \_ pi -> do
|
Motion.onDrag \_ pi -> do
|
||||||
case dragState of
|
dragState <- readRef dragStateRef
|
||||||
Dragging { startX } -> do
|
case dragState of
|
||||||
setDragState $ Dragging { startX, currentX: pi.point.x }
|
Dragging { startX } -> do
|
||||||
other -> Console.warn $ i "Unexpected drag state " (show other) " in onDragEvent"
|
setDragState $ Dragging { startX, currentX: pi.point.x }
|
||||||
|
other -> Console.warn $ i "Unexpected drag state " (show other) " in onDragEvent"
|
||||||
, onDragEnd:
|
, onDragEnd:
|
||||||
Motion.onDragEnd \_ _ -> do
|
Motion.onDragEnd \_ _ -> do
|
||||||
case dragState of
|
dragState <- readRef dragStateRef
|
||||||
Dragging { startX } -> do
|
case dragState of
|
||||||
maybeBBox <- getBoundingBoxFromRef toggleRef
|
Dragging { startX } -> do
|
||||||
let x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)
|
maybeBBox <- getBoundingBoxFromRef toggleRef
|
||||||
setDragState (DragDone { startX, endX: x # fromMaybe' \_ -> unsafeCrashWith "shit" })
|
let x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)
|
||||||
other -> Console.warn $ i "Unexpected drag state " (show other) " in onDragEndEvent"
|
setDragState (DragDone { startX, endX: x # fromMaybe' \_ -> unsafeCrashWith "shit" })
|
||||||
|
other -> Console.warn $ i "Unexpected drag state " (show other) " in onDragEndEvent"
|
||||||
, ref: toggleRef
|
, ref: toggleRef
|
||||||
}
|
}
|
||||||
|
|||||||
1
src/Yoga/Block/Icon/SVG/BG.svg
Normal file
1
src/Yoga/Block/Icon/SVG/BG.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 800 800"><path fill="#303" d="M0 0h800v800H0z"/><g fill="none" stroke="#404" stroke-width="4.1"><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"/><path d="m-31 229 268 32 153 121 213 111-294.5 44.5-207-156M370 905l-75-141"/><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"/><path d="m520-140 58.5 182.5L731-63M603 493l-64-224-302-8 133-156m532 277L539 269M390 382H102"/><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"/></g><g fill="#505"><circle cx="769" cy="229" r="7"/><circle cx="539" cy="269" r="7"/><circle cx="603" cy="493" r="7"/><circle cx="731" cy="737" r="7"/><circle cx="520" cy="660" r="7"/><circle cx="309" cy="538" r="7"/><circle cx="295" cy="764" r="7"/><circle cx="40" cy="599" r="7"/><circle cx="102" cy="382" r="7"/><circle cx="127" cy="80" r="7"/><circle cx="370" cy="105" r="7"/><circle cx="578" cy="42" r="7"/><circle cx="237" cy="261" r="7"/><circle cx="390" cy="382" r="7"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
116
src/Yoga/Block/Icon/SVG/Bg.purs
Normal file
116
src/Yoga/Block/Icon/SVG/Bg.purs
Normal file
@ -0,0 +1,116 @@
|
|||||||
|
module Yoga.Block.Icon.SVG.Bg where
|
||||||
|
|
||||||
|
import React.Basic (JSX)
|
||||||
|
import React.Basic.DOM as R
|
||||||
|
import React.Basic.DOM.SVG as SVG
|
||||||
|
|
||||||
|
bg :: JSX
|
||||||
|
bg = SVG.svg
|
||||||
|
{ xmlns: "http://www.w3.org/2000/svg"
|
||||||
|
, width: "200"
|
||||||
|
, height: "200"
|
||||||
|
, viewBox: "0 0 800 800"
|
||||||
|
, children:
|
||||||
|
[ SVG.path
|
||||||
|
{ fill: "#303"
|
||||||
|
, d: "M0 0h800v800H0z"
|
||||||
|
}
|
||||||
|
, SVG.g
|
||||||
|
{ fill: "none"
|
||||||
|
, stroke: "#404"
|
||||||
|
, 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"
|
||||||
|
}
|
||||||
|
, SVG.path
|
||||||
|
{ 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"
|
||||||
|
}
|
||||||
|
, SVG.path
|
||||||
|
{ 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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
, SVG.g
|
||||||
|
{ fill: "#505"
|
||||||
|
, children:
|
||||||
|
[ SVG.circle
|
||||||
|
{ cx: "769"
|
||||||
|
, cy: "229"
|
||||||
|
, r: "7"
|
||||||
|
}
|
||||||
|
, SVG.circle
|
||||||
|
{ cx: "539"
|
||||||
|
, cy: "269"
|
||||||
|
, r: "7"
|
||||||
|
}
|
||||||
|
, SVG.circle
|
||||||
|
{ cx: "603"
|
||||||
|
, cy: "493"
|
||||||
|
, r: "7"
|
||||||
|
}
|
||||||
|
, SVG.circle
|
||||||
|
{ cx: "731"
|
||||||
|
, cy: "737"
|
||||||
|
, r: "7"
|
||||||
|
}
|
||||||
|
, SVG.circle
|
||||||
|
{ cx: "520"
|
||||||
|
, cy: "660"
|
||||||
|
, r: "7"
|
||||||
|
}
|
||||||
|
, SVG.circle
|
||||||
|
{ cx: "309"
|
||||||
|
, cy: "538"
|
||||||
|
, r: "7"
|
||||||
|
}
|
||||||
|
, SVG.circle
|
||||||
|
{ cx: "295"
|
||||||
|
, cy: "764"
|
||||||
|
, r: "7"
|
||||||
|
}
|
||||||
|
, SVG.circle
|
||||||
|
{ cx: "40"
|
||||||
|
, cy: "599"
|
||||||
|
, r: "7"
|
||||||
|
}
|
||||||
|
, SVG.circle
|
||||||
|
{ cx: "102"
|
||||||
|
, cy: "382"
|
||||||
|
, r: "7"
|
||||||
|
}
|
||||||
|
, SVG.circle
|
||||||
|
{ cx: "127"
|
||||||
|
, cy: "80"
|
||||||
|
, r: "7"
|
||||||
|
}
|
||||||
|
, SVG.circle
|
||||||
|
{ cx: "370"
|
||||||
|
, cy: "105"
|
||||||
|
, r: "7"
|
||||||
|
}
|
||||||
|
, SVG.circle
|
||||||
|
{ cx: "578"
|
||||||
|
, cy: "42"
|
||||||
|
, r: "7"
|
||||||
|
}
|
||||||
|
, SVG.circle
|
||||||
|
{ cx: "237"
|
||||||
|
, cy: "261"
|
||||||
|
, r: "7"
|
||||||
|
}
|
||||||
|
, SVG.circle
|
||||||
|
{ cx: "390"
|
||||||
|
, cy: "382"
|
||||||
|
, r: "7"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
22
src/Yoga/Block/Icon/SVG/HeroiconCalendar.purs
Normal file
22
src/Yoga/Block/Icon/SVG/HeroiconCalendar.purs
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
module Yoga.Block.Icon.SVG.HeroiconCalendar where
|
||||||
|
|
||||||
|
import React.Basic (JSX)
|
||||||
|
import React.Basic.DOM as R
|
||||||
|
import React.Basic.DOM.SVG as SVG
|
||||||
|
|
||||||
|
heroiconCalendar :: JSX
|
||||||
|
heroiconCalendar = SVG.svg
|
||||||
|
{ xmlns: "http://www.w3.org/2000/svg"
|
||||||
|
, className:"h-6 w-6"
|
||||||
|
, fill: "none"
|
||||||
|
, viewBox: "0 0 24 24"
|
||||||
|
, stroke: "currentColor"
|
||||||
|
, children:
|
||||||
|
[ SVG.path
|
||||||
|
{ 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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
1
src/Yoga/Block/Icon/SVG/HeroiconCalendar.svg
Normal file
1
src/Yoga/Block/Icon/SVG/HeroiconCalendar.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="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"/></svg>
|
||||||
|
After Width: | Height: | Size: 284 B |
22
src/Yoga/Block/Icon/SVG/HeroiconClock.purs
Normal file
22
src/Yoga/Block/Icon/SVG/HeroiconClock.purs
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
module Yoga.Block.Icon.SVG.HeroiconClock where
|
||||||
|
|
||||||
|
import React.Basic (JSX)
|
||||||
|
import React.Basic.DOM as R
|
||||||
|
import React.Basic.DOM.SVG as SVG
|
||||||
|
|
||||||
|
heroiconClock :: JSX
|
||||||
|
heroiconClock = SVG.svg
|
||||||
|
{ xmlns: "http://www.w3.org/2000/svg"
|
||||||
|
, className:"h-6 w-6"
|
||||||
|
, fill: "none"
|
||||||
|
, viewBox: "0 0 24 24"
|
||||||
|
, stroke: "currentColor"
|
||||||
|
, children:
|
||||||
|
[ SVG.path
|
||||||
|
{ strokeLinecap: "round"
|
||||||
|
, strokeLinejoin: "round"
|
||||||
|
, strokeWidth: "2"
|
||||||
|
, d: "M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
1
src/Yoga/Block/Icon/SVG/HeroiconClock.svg
Normal file
1
src/Yoga/Block/Icon/SVG/HeroiconClock.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"/></svg>
|
||||||
|
After Width: | Height: | Size: 238 B |
22
src/Yoga/Block/Icon/SVG/HeroiconGroup.purs
Normal file
22
src/Yoga/Block/Icon/SVG/HeroiconGroup.purs
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
module Yoga.Block.Icon.SVG.HeroiconGroup where
|
||||||
|
|
||||||
|
import React.Basic (JSX)
|
||||||
|
import React.Basic.DOM as R
|
||||||
|
import React.Basic.DOM.SVG as SVG
|
||||||
|
|
||||||
|
heroiconGroup :: JSX
|
||||||
|
heroiconGroup = SVG.svg
|
||||||
|
{ xmlns: "http://www.w3.org/2000/svg"
|
||||||
|
, className:"h-6 w-6"
|
||||||
|
, fill: "none"
|
||||||
|
, viewBox: "0 0 24 24"
|
||||||
|
, stroke: "currentColor"
|
||||||
|
, children:
|
||||||
|
[ SVG.path
|
||||||
|
{ 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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
1
src/Yoga/Block/Icon/SVG/HeroiconGroup.svg
Normal file
1
src/Yoga/Block/Icon/SVG/HeroiconGroup.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="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"/></svg>
|
||||||
|
After Width: | Height: | Size: 468 B |
22
src/Yoga/Block/Icon/SVG/HeroiconMoon.purs
Normal file
22
src/Yoga/Block/Icon/SVG/HeroiconMoon.purs
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
module Yoga.Block.Icon.SVG.HeroiconMoon where
|
||||||
|
|
||||||
|
import React.Basic (JSX)
|
||||||
|
import React.Basic.DOM as R
|
||||||
|
import React.Basic.DOM.SVG as SVG
|
||||||
|
|
||||||
|
heroiconMoon :: JSX
|
||||||
|
heroiconMoon = SVG.svg
|
||||||
|
{ xmlns: "http://www.w3.org/2000/svg"
|
||||||
|
, className:"h-6 w-6"
|
||||||
|
, fill: "none"
|
||||||
|
, viewBox: "0 0 24 24"
|
||||||
|
, stroke: "currentColor"
|
||||||
|
, children:
|
||||||
|
[ SVG.path
|
||||||
|
{ 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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
1
src/Yoga/Block/Icon/SVG/HeroiconMoon.svg
Normal file
1
src/Yoga/Block/Icon/SVG/HeroiconMoon.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="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"/></svg>
|
||||||
|
After Width: | Height: | Size: 283 B |
22
src/Yoga/Block/Icon/SVG/HeroiconSun.purs
Normal file
22
src/Yoga/Block/Icon/SVG/HeroiconSun.purs
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
module Yoga.Block.Icon.SVG.HeroiconSun where
|
||||||
|
|
||||||
|
import React.Basic (JSX)
|
||||||
|
import React.Basic.DOM as R
|
||||||
|
import React.Basic.DOM.SVG as SVG
|
||||||
|
|
||||||
|
heroiconSun :: JSX
|
||||||
|
heroiconSun = SVG.svg
|
||||||
|
{ xmlns: "http://www.w3.org/2000/svg"
|
||||||
|
, className:"h-6 w-6"
|
||||||
|
, fill: "none"
|
||||||
|
, viewBox: "0 0 24 24"
|
||||||
|
, stroke: "currentColor"
|
||||||
|
, children:
|
||||||
|
[ SVG.path
|
||||||
|
{ 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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
1
src/Yoga/Block/Icon/SVG/HeroiconSun.svg
Normal file
1
src/Yoga/Block/Icon/SVG/HeroiconSun.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="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"/></svg>
|
||||||
|
After Width: | Height: | Size: 342 B |
1
src/Yoga/Block/Icon/SVG/TMP.svg
Normal file
1
src/Yoga/Block/Icon/SVG/TMP.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg viewBox="0 0 1200 1527" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><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="fill:url(#a)" transform="translate(0 -484)"/><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="fill:url(#b)" transform="translate(0 -484)"/><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="fill:url(#c)" transform="translate(0 -484)"/><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="fill:url(#d)" transform="translate(0 -484)"/><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="fill:url(#e)" transform="translate(0 -484)"/><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="fill:url(#f)" transform="translate(0 -484)"/><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="fill:#5c0bc2" transform="translate(0 -484)"/><defs><linearGradient id="a" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="rotate(90 58 542) scale(427)"><stop offset="0" style="stop-color:#e683ff;stop-opacity:1"/><stop offset="1" style="stop-color:#ff97f5;stop-opacity:1"/></linearGradient><linearGradient id="b" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 124.08 -124.08 0 600 649)"><stop offset="0" style="stop-color:#cc60ff;stop-opacity:1"/><stop offset="1" style="stop-color:#e062ff;stop-opacity:1"/></linearGradient><linearGradient id="c" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 238.356 -238.356 0 600 731.658)"><stop offset="0" style="stop-color:#a32eff;stop-opacity:1"/><stop offset="1" style="stop-color:#c03cff;stop-opacity:1"/></linearGradient><linearGradient id="d" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 452 -452 0 600 911)"><stop offset="0" style="stop-color:#8600f0;stop-opacity:1"/><stop offset="1" style="stop-color:#b659ff;stop-opacity:1"/></linearGradient><linearGradient id="e" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 359 -359 0 600 1050)"><stop offset="0" style="stop-color:#ca33ff;stop-opacity:1"/><stop offset="0" style="stop-color:#7d17ff;stop-opacity:1"/><stop offset="1" style="stop-color:#843dde;stop-opacity:1"/></linearGradient><linearGradient id="f" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 121.48 -121.48 0 600 1362.52)"><stop offset="0" style="stop-color:#6706e3;stop-opacity:1"/><stop offset="1" style="stop-color:#682de7;stop-opacity:1"/></linearGradient></defs></svg>
|
||||||
|
After Width: | Height: | Size: 3.8 KiB |
172
src/Yoga/Block/Icon/SVG/Tmp.purs
Normal file
172
src/Yoga/Block/Icon/SVG/Tmp.purs
Normal file
@ -0,0 +1,172 @@
|
|||||||
|
module Yoga.Block.Icon.SVG.Tmp where
|
||||||
|
|
||||||
|
import React.Basic (JSX)
|
||||||
|
import React.Basic.DOM as R
|
||||||
|
import React.Basic.DOM.SVG as SVG
|
||||||
|
|
||||||
|
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" }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
77
src/Yoga/Block/Icon/SVG/WhatsAppLogo.purs
Normal file
77
src/Yoga/Block/Icon/SVG/WhatsAppLogo.purs
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
module Yoga.Block.Icon.SVG.WhatsAppLogo where
|
||||||
|
|
||||||
|
import React.Basic (JSX)
|
||||||
|
import React.Basic.DOM as R
|
||||||
|
import React.Basic.DOM.SVG as SVG
|
||||||
|
|
||||||
|
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" }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
1
src/Yoga/Block/Icon/SVG/WhatsAppLogo.svg
Normal file
1
src/Yoga/Block/Icon/SVG/WhatsAppLogo.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg viewBox="0 0 1281 1067" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><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="fill:#fff;fill-rule:nonzero" transform="translate(546.49 392.227)"/><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="fill:url(#a);fill-rule:nonzero" transform="matrix(0 -406.194 -406.194 0 640.266 738.97)"/><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="fill:url(#b);fill-rule:nonzero" transform="matrix(0 -420.76 -420.76 0 640.264 746.25)"/><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="fill:#fff" transform="translate(588.995 628.453)"/><defs><linearGradient id="a" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="scale(1 -1)"><stop offset="0" style="stop-color:#20b038;stop-opacity:1"/><stop offset="1" style="stop-color:#60d66a;stop-opacity:1"/></linearGradient><linearGradient id="b" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="scale(1 -1)"><stop offset="0" style="stop-color:#f9f9f9;stop-opacity:1"/><stop offset="1" style="stop-color:white;stop-opacity:1"/></linearGradient></defs></svg>
|
||||||
|
After Width: | Height: | Size: 2.7 KiB |
@ -1,6 +1,6 @@
|
|||||||
"use strict";
|
"use strict"
|
||||||
|
|
||||||
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
|
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
plugins: [
|
plugins: [
|
||||||
@ -8,4 +8,4 @@ module.exports = {
|
|||||||
// `./dist` in our case
|
// `./dist` in our case
|
||||||
new CleanWebpackPlugin(),
|
new CleanWebpackPlugin(),
|
||||||
],
|
],
|
||||||
};
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user