mirror of
https://github.com/rowtype-yoga/ry-blocks.git
synced 2024-09-17 16:27:33 +03:00
Improvements
This commit is contained in:
Mark Eibes
parent
bd742ee096
commit
fe3ef512d5
@ -1,6 +1,8 @@
|
||||
<link href="https://rsms.me/inter/inter.css" rel="stylesheet">
|
||||
<link rel="preconnect" href="https://rsms.me/">
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
|
||||
<style>
|
||||
#storybook-root {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
116
packages.dhall
116
packages.dhall
@ -1,103 +1,3 @@
|
||||
{-
|
||||
Welcome to your new Dhall package-set!
|
||||
|
||||
Below are instructions for how to edit this file for most use
|
||||
cases, so that you don't need to know Dhall to use it.
|
||||
|
||||
## Use Cases
|
||||
|
||||
Most will want to do one or both of these options:
|
||||
1. Override/Patch a package's dependency
|
||||
2. Add a package not already in the default package set
|
||||
|
||||
This file will continue to work whether you use one or both options.
|
||||
Instructions for each option are explained below.
|
||||
|
||||
### Overriding/Patching a package
|
||||
|
||||
Purpose:
|
||||
- Change a package's dependency to a newer/older release than the
|
||||
default package set's release
|
||||
- Use your own modified version of some dependency that may
|
||||
include new API, changed API, removed API by
|
||||
using your custom git repo of the library rather than
|
||||
the package set's repo
|
||||
|
||||
Syntax:
|
||||
where `entityName` is one of the following:
|
||||
- dependencies
|
||||
- repo
|
||||
- version
|
||||
-------------------------------
|
||||
let upstream = --
|
||||
in upstream
|
||||
with packageName.entityName = "new value"
|
||||
-------------------------------
|
||||
|
||||
Example:
|
||||
-------------------------------
|
||||
let upstream = --
|
||||
in upstream
|
||||
with halogen.version = "master"
|
||||
with halogen.repo = "https://example.com/path/to/git/repo.git"
|
||||
|
||||
with halogen-vdom.version = "v4.0.0"
|
||||
with halogen-vdom.dependencies = [ "extra-dependency" ] # halogen-vdom.dependencies
|
||||
-------------------------------
|
||||
|
||||
### Additions
|
||||
|
||||
Purpose:
|
||||
- Add packages that aren't already included in the default package set
|
||||
|
||||
Syntax:
|
||||
where `<version>` is:
|
||||
- a tag (i.e. "v4.0.0")
|
||||
- a branch (i.e. "master")
|
||||
- commit hash (i.e. "701f3e44aafb1a6459281714858fadf2c4c2a977")
|
||||
-------------------------------
|
||||
let upstream = --
|
||||
in upstream
|
||||
with new-package-name =
|
||||
{ dependencies =
|
||||
[ "dependency1"
|
||||
, "dependency2"
|
||||
]
|
||||
, repo =
|
||||
"https://example.com/path/to/git/repo.git"
|
||||
, version =
|
||||
"<version>"
|
||||
}
|
||||
-------------------------------
|
||||
|
||||
Example:
|
||||
-------------------------------
|
||||
let upstream = --
|
||||
in upstream
|
||||
with benchotron =
|
||||
{ dependencies =
|
||||
[ "arrays"
|
||||
, "exists"
|
||||
, "profunctor"
|
||||
, "strings"
|
||||
, "quickcheck"
|
||||
, "lcg"
|
||||
, "transformers"
|
||||
, "foldable-traversable"
|
||||
, "exceptions"
|
||||
, "node-fs"
|
||||
, "node-buffer"
|
||||
, "node-readline"
|
||||
, "datetime"
|
||||
, "now"
|
||||
]
|
||||
, repo =
|
||||
"https://github.com/hdgarrood/purescript-benchotron.git"
|
||||
, version =
|
||||
"v7.0.0"
|
||||
}
|
||||
-------------------------------
|
||||
-}
|
||||
let upstream =
|
||||
https://github.com/purescript/package-sets/releases/download/psc-0.15.4-20221107/packages.dhall
|
||||
sha256:cd0c29e8a69cf70b714ce3ee91c57c02b3d20a1118e35dd8405f33aa80177849
|
||||
@ -134,23 +34,9 @@ in upstream
|
||||
, "web-uievents"
|
||||
]
|
||||
}
|
||||
-- with foreign-generic =
|
||||
-- { repo =
|
||||
-- "https://github.com/working-group-purescript-es/purescript-foreign-generic.git"
|
||||
-- , version = "v0.15.0-updates"
|
||||
-- , dependencies =
|
||||
-- [ "effect"
|
||||
-- , "exceptions"
|
||||
-- , "foreign"
|
||||
-- , "foreign-object"
|
||||
-- , "identity"
|
||||
-- , "ordered-collections"
|
||||
-- , "record"
|
||||
-- ]
|
||||
-- }
|
||||
with fahrtwind =
|
||||
{ repo = "https://github.com/rowtype-yoga/purescript-fahrtwind.git"
|
||||
, version = "v1.0.1"
|
||||
, version = "98afb47610b0422744039e9900d513e37b1935de"
|
||||
, dependencies =
|
||||
[ "arrays"
|
||||
, "colors"
|
||||
|
||||
@ -23,6 +23,7 @@ import Yoga.Block.Layout.Imposter as Imposter
|
||||
import Yoga.Block.Layout.Sidebar as Sidebar
|
||||
import Yoga.Block.Layout.Stack as Stack
|
||||
import Yoga.Block.Layout.Switcher as Switcher
|
||||
import Yoga.Block.Layout.Layers as Layers
|
||||
import Yoga.Block.Molecule.Breadcrumbs as Breadcrumbs
|
||||
import Yoga.Block.Molecule.Modal as Modal
|
||||
import Yoga.Block.Molecule.ReadMore as ReadMore
|
||||
@ -157,6 +158,22 @@ layer' = Layer.component
|
||||
layer ∷ { | Layer.Props } → JSX
|
||||
layer = React.element layer'
|
||||
|
||||
layers' ∷
|
||||
∀ p q. Union p q Layers.Props ⇒ ReactComponent { | p }
|
||||
layers' = Layers.component
|
||||
|
||||
layers ∷
|
||||
∀ p q.
|
||||
Lacks "children" p ⇒
|
||||
Union p q Layers.PropsNoChildren ⇒
|
||||
{ | p } →
|
||||
Array JSX →
|
||||
JSX
|
||||
layers = el layers'
|
||||
|
||||
layers_ ∷ Array JSX → JSX
|
||||
layers_ = layers {}
|
||||
|
||||
range ∷ ∀ p q. Union p q Range.Props ⇒ ReactComponent { | p }
|
||||
range = Range.component
|
||||
|
||||
|
||||
@ -2,12 +2,12 @@ module Yoga.Block.Atom.Checkbox.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
|
||||
, size ∷ f Number
|
||||
, stroke :: f String
|
||||
, strokeWidth :: f Number
|
||||
, stroke ∷ f String
|
||||
, strokeWidth ∷ f Number
|
||||
| r
|
||||
)
|
||||
|
||||
@ -27,6 +27,7 @@ checkmark =
|
||||
}
|
||||
}
|
||||
|
||||
checkmarkChecked ∷ Style
|
||||
checkmarkChecked =
|
||||
block
|
||||
<> widthFull
|
||||
@ -40,14 +41,23 @@ checkmarkChecked =
|
||||
, stroke: str "currentColor"
|
||||
, strokeWidth: int 4
|
||||
, animation: str
|
||||
"checkmarkAnimation .25s cubic-bezier(0.35, 0, 0.45, 1) forwards"
|
||||
"checkmarkAnimation 0s cubic-bezier(0.35, 0, 0.45, 1) forwards"
|
||||
, animationName: keyframes
|
||||
{ to: css { strokeDashoffset: int 0 } }
|
||||
, animationDelay: str "125ms"
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
checkmarkContainer :: Style
|
||||
checkmarkCheckedAnimated ∷ Style
|
||||
checkmarkCheckedAnimated = css
|
||||
{ animation: str
|
||||
"checkmarkAnimation .25s cubic-bezier(0.35, 0, 0.45, 1) forwards"
|
||||
, animationName: keyframes
|
||||
{ to: css { strokeDashoffset: int 0 } }
|
||||
, animationDelay: str "125ms"
|
||||
}
|
||||
|
||||
checkmarkContainer ∷ Style
|
||||
checkmarkContainer =
|
||||
background' col.highlight
|
||||
<> textCol' col.highlightText
|
||||
@ -62,20 +72,22 @@ checkmarkContainer =
|
||||
<> roundness
|
||||
<> ignoreClicks
|
||||
|
||||
checkmarkContainerChecked :: Style
|
||||
checkmarkContainerChecked ∷ Style
|
||||
checkmarkContainerChecked =
|
||||
css { clipPath: str "circle(100%)" }
|
||||
|
||||
checkmarkContainerNotChecked :: Style
|
||||
checkmarkContainerNotChecked ∷ Style
|
||||
checkmarkContainerNotChecked =
|
||||
css { clipPath: str "circle(0%)" }
|
||||
|
||||
checkboxBorder ∷ Int
|
||||
checkboxBorder = 2
|
||||
|
||||
roundness ∷ Style
|
||||
roundness =
|
||||
roundedDefault
|
||||
|
||||
container :: Style
|
||||
container ∷ Style
|
||||
container =
|
||||
width' sizeStyle.l
|
||||
<> height' sizeStyle.l
|
||||
@ -95,7 +107,9 @@ container =
|
||||
<> roundness
|
||||
<> css
|
||||
{ boxShadow:
|
||||
str $ "0px 1px 12px 7px " <> colourWithDarkLightAlpha.highlight { darkAlpha: 0.8, lightAlpha: 0.4 }
|
||||
str $ "0px 1px 12px 7px " <>
|
||||
colourWithDarkLightAlpha.highlight
|
||||
{ darkAlpha: 0.8, lightAlpha: 0.4 }
|
||||
}
|
||||
<> border 1
|
||||
<> borderCol' (str $ colourWithAlpha.highlight 0.1)
|
||||
@ -110,7 +124,7 @@ container =
|
||||
)
|
||||
)
|
||||
|
||||
checkbox :: Style
|
||||
checkbox ∷ Style
|
||||
checkbox = (css { appearance: none })
|
||||
<> widthFull
|
||||
<> heightFull
|
||||
|
||||
@ -28,7 +28,11 @@ rawComponent ∷ ∀ p. ReactComponent { | p }
|
||||
rawComponent = mkForwardRefComponent "Checkbox"
|
||||
\(props ∷ { | PropsF OptionalProp }) ref → React.do
|
||||
checkedBackup /\ setChecked ← React.useState' false
|
||||
hasChanged /\ setHasChanged ← React.useState' false
|
||||
let checked = props.checked ?|| checkedBackup
|
||||
useEffect checked do
|
||||
when (not hasChanged) do setHasChanged true
|
||||
mempty
|
||||
pure $ div "ry-checkbox-container" Style.container
|
||||
[ R.input' </*>
|
||||
{ className: "ry-checkbox"
|
||||
@ -53,8 +57,9 @@ rawComponent = mkForwardRefComponent "Checkbox"
|
||||
</*
|
||||
{ className: "ry-checkmark"
|
||||
, css: Style.checkmark <>
|
||||
if checked then
|
||||
Style.checkmarkChecked
|
||||
if checked && hasChanged then
|
||||
Style.checkmarkCheckedAnimated <> Style.checkmarkChecked
|
||||
else if checked then Style.checkmarkChecked
|
||||
else Style.checkmark
|
||||
, xmlns: "http://www.w3.org/2000/svg"
|
||||
, viewBox: "0 0 52 52"
|
||||
|
||||
4
src/Yoga/Block/Atom/PopOver.purs
Normal file
4
src/Yoga/Block/Atom/PopOver.purs
Normal file
@ -0,0 +1,4 @@
|
||||
module Yoga.Block.Atom.PopOver where
|
||||
|
||||
|
||||
|
||||
34
src/Yoga/Block/Atom/PopOver/Style.purs
Normal file
34
src/Yoga/Block/Atom/PopOver/Style.purs
Normal file
@ -0,0 +1,34 @@
|
||||
module Yoga.Block.Atom.PopOver.Style where
|
||||
|
||||
import Yoga.Prelude.Style
|
||||
|
||||
popOverStyle ∷ Style
|
||||
popOverStyle =
|
||||
roundedXl
|
||||
<> shadowLg
|
||||
<> border 1
|
||||
<> borderBottom 0
|
||||
<>
|
||||
( borderGradient
|
||||
{ borderGradient: linearGradientString' 90
|
||||
[ colourWithDarkLightAlpha.backgroundInverted
|
||||
{ darkAlpha: 0.18, lightAlpha: 0.0 }
|
||||
, colourWithDarkLightAlpha.backgroundInverted
|
||||
{ darkAlpha: 0.45, lightAlpha: 0.0 }
|
||||
, colourWithDarkLightAlpha.backgroundInverted
|
||||
{ darkAlpha: 0.18, lightAlpha: 0.0 }
|
||||
]
|
||||
, backgroundGradient: linearGradientString' 0
|
||||
[ colourWithAlpha.backgroundBright2 0.97
|
||||
, colourWithAlpha.backgroundBright2 0.97
|
||||
]
|
||||
}
|
||||
)
|
||||
|
||||
popOverSeparatorCol ∷ String
|
||||
popOverSeparatorCol =
|
||||
colour.backgroundLayer3
|
||||
|
||||
popOverSelection ∷ Style
|
||||
popOverSelection = background' $ str $ colourWithDarkLightAlpha.highlight
|
||||
{ darkAlpha: 0.2, lightAlpha: 0.2 }
|
||||
@ -129,7 +129,8 @@ mkGlobal maybeMode =
|
||||
}
|
||||
<> variables
|
||||
<> fontVariables
|
||||
{ main: """"Inter V", "Inter var", Inter"""
|
||||
{ main: "Inter, sans-serif"
|
||||
, mainVariable: "'Inter var', sans-serif"
|
||||
, mono:
|
||||
"Jetbrains Mono, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console"
|
||||
}
|
||||
@ -220,8 +221,8 @@ defaultColours =
|
||||
, highlightDarker: withAlpha 0.15 (Color.darken 0.2 highlight)
|
||||
, highlightDisabled: (desaturate 0.60 >>> lighten 0.5) highlight
|
||||
, highlightLighter: withAlpha 0.2 (Color.lighten 0.2 highlight)
|
||||
, highlightRotatedBackwards: highlight # rotateHue (-13.0) # darken 0.05
|
||||
, highlightRotatedForwards: highlight # rotateHue 13.0 # darken 0.05 #
|
||||
, highlightRotatedBackwards: highlight # rotateHue (-24.0) # darken 0.05
|
||||
, highlightRotatedForwards: highlight # rotateHue 24.0 # darken 0.05 #
|
||||
saturate 0.1
|
||||
, highlightText
|
||||
, highlightTextOnBackground: highlight # rotateHue 3.0 # darken 0.15 #
|
||||
@ -244,10 +245,10 @@ defaultColours =
|
||||
, success
|
||||
, successText
|
||||
, text: text
|
||||
, textPaler1: text # lighten 0.1 # desaturate 0.04
|
||||
, textPaler2: text # lighten 0.2 # desaturate 0.08
|
||||
, textPaler3: text # lighten 0.3 # desaturate 0.12
|
||||
, textPaler4: text # lighten 0.4 # desaturate 0.16
|
||||
, textPaler1: text # lighten 0.05 # desaturate 0.02
|
||||
, textPaler2: text # lighten 0.10 # desaturate 0.04
|
||||
, textPaler3: text # lighten 0.15 # desaturate 0.06
|
||||
, textPaler4: text # lighten 0.20 # desaturate 0.08
|
||||
, textInverted: lightBg
|
||||
, textInvertedPaler1: textDark # darken 0.1 # desaturate 0.02
|
||||
, textInvertedPaler2: textDark # darken 0.2 # desaturate 0.04
|
||||
@ -314,9 +315,9 @@ defaultColours =
|
||||
, successText
|
||||
, text: textDark
|
||||
, textPaler1: textDark # darken 0.1 # desaturate 0.02
|
||||
, textPaler2: textDark # darken 0.2 # desaturate 0.04
|
||||
, textPaler3: textDark # darken 0.3 # desaturate 0.06
|
||||
, textPaler4: textDark # darken 0.4 # desaturate 0.08
|
||||
, textPaler2: textDark # darken 0.17 # desaturate 0.04
|
||||
, textPaler3: textDark # darken 0.24 # desaturate 0.06
|
||||
, textPaler4: textDark # darken 0.31 # desaturate 0.08
|
||||
, textInverted: darkBg
|
||||
, textInvertedPaler1: darkBg # lighten 0.1 # desaturate 0.02
|
||||
, textInvertedPaler2: darkBg # lighten 0.2 # desaturate 0.04
|
||||
@ -523,7 +524,7 @@ darkModeRGBVariables =
|
||||
variables ∷ Style
|
||||
variables =
|
||||
css
|
||||
{ "--ratio": "1.61" # str
|
||||
{ "--ratio": "1.618" # str
|
||||
, "--line-height": str "var(--ratio)"
|
||||
, "--line-height-small": str "calc(var(--ratio) * 0.8)"
|
||||
, "--s-6": str "calc(var(--s-5) / var(--ratio))"
|
||||
@ -624,11 +625,16 @@ boxShadow =
|
||||
, default: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"
|
||||
}
|
||||
|
||||
fontVariables ∷ { main ∷ String, mono ∷ String } → Style
|
||||
fontVariables { main, mono } =
|
||||
fontVariables ∷ { main ∷ String, mainVariable ∷ String, mono ∷ String } → Style
|
||||
fontVariables { main, mainVariable, mono } =
|
||||
css
|
||||
{ "--main-font": str $ main <>
|
||||
""", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol""""
|
||||
, "@supports (font-variation-settings: normal)": nested $
|
||||
css
|
||||
{ "--main-font": str $ mainVariable <>
|
||||
""", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol""""
|
||||
}
|
||||
, "--mono-font": str $ mono <> ", monospace, monospace"
|
||||
}
|
||||
|
||||
|
||||
@ -23,14 +23,14 @@ import Yoga.Block.Container.Style as Styles
|
||||
type PropsF f =
|
||||
( children ∷ Array JSX
|
||||
, themeVariant ∷ f (Maybe DarkOrLightMode)
|
||||
, onPreferredSystemThemeChange ∷ f (DarkOrLightMode -> Effect Unit)
|
||||
, globalStyles :: f E.Style
|
||||
, onPreferredSystemThemeChange ∷ f (DarkOrLightMode → Effect Unit)
|
||||
, globalStyles ∷ f E.Style
|
||||
)
|
||||
|
||||
type Props =
|
||||
(| PropsF Id)
|
||||
|
||||
component ∷ ∀ p q. Union p q Props => ReactComponent { | p }
|
||||
component ∷ ∀ p q. Union p q Props ⇒ ReactComponent { | p }
|
||||
component = rawComponent
|
||||
|
||||
mkPrefersDark ∷ Effect MediaQueryList
|
||||
@ -42,16 +42,17 @@ mkPrefersLight = matchMedia "(prefers-color-scheme: light)" =<< window
|
||||
rawComponent ∷ ∀ p. ReactComponent { | p }
|
||||
rawComponent =
|
||||
mkForwardRefComponent "Container" do
|
||||
\(props@{ children } ∷ { | PropsF OptionalProp }) _ref -> React.do
|
||||
\(props@{ children } ∷ { | PropsF OptionalProp }) _ref → React.do
|
||||
let propsThemeVariant = props.themeVariant # opToMaybe # join
|
||||
let notifySystemThemeChanged = props.onPreferredSystemThemeChange ?|| mempty
|
||||
systemThemeVariant /\ setSystemThemeVariant <- React.useState' Nothing
|
||||
let
|
||||
notifySystemThemeChanged = props.onPreferredSystemThemeChange ?|| mempty
|
||||
systemThemeVariant /\ setSystemThemeVariant ← React.useState' Nothing
|
||||
useEffect propsThemeVariant do
|
||||
for_ propsThemeVariant setDarkOrLightMode
|
||||
mempty
|
||||
useEffectOnce do
|
||||
prefersDarkMediaQuery <- mkPrefersDark
|
||||
prefersLightMediaQuery <- mkPrefersLight
|
||||
prefersDarkMediaQuery ← mkPrefersDark
|
||||
prefersLightMediaQuery ← mkPrefersLight
|
||||
-- Init system preference
|
||||
whenM (matches prefersDarkMediaQuery) do
|
||||
setSystemThemeVariant (Just DarkMode)
|
||||
@ -60,34 +61,39 @@ rawComponent =
|
||||
setSystemThemeVariant (Just LightMode)
|
||||
notifySystemThemeChanged LightMode
|
||||
-- Dark Mode listener
|
||||
darkModeListener <-
|
||||
eventListener \_ -> do
|
||||
darkModeListener ←
|
||||
eventListener \_ → do
|
||||
whenM (matches prefersDarkMediaQuery) do
|
||||
setSystemThemeVariant (Just DarkMode)
|
||||
notifySystemThemeChanged DarkMode
|
||||
addEventListener Event.change darkModeListener true (MediaQueryList.toEventTarget prefersDarkMediaQuery)
|
||||
addEventListener Event.change darkModeListener true
|
||||
(MediaQueryList.toEventTarget prefersDarkMediaQuery)
|
||||
-- Light Mode listener
|
||||
lightModeListener <-
|
||||
eventListener \_ -> do
|
||||
lightModeListener ←
|
||||
eventListener \_ → do
|
||||
whenM (matches prefersLightMediaQuery) do
|
||||
setSystemThemeVariant (Just LightMode)
|
||||
notifySystemThemeChanged LightMode
|
||||
addEventListener Event.change darkModeListener true (MediaQueryList.toEventTarget prefersDarkMediaQuery)
|
||||
addEventListener Event.change lightModeListener true (MediaQueryList.toEventTarget prefersLightMediaQuery)
|
||||
addEventListener Event.change darkModeListener true
|
||||
(MediaQueryList.toEventTarget prefersDarkMediaQuery)
|
||||
addEventListener Event.change lightModeListener true
|
||||
(MediaQueryList.toEventTarget prefersLightMediaQuery)
|
||||
pure do
|
||||
removeEventListener Event.change darkModeListener true (MediaQueryList.toEventTarget prefersDarkMediaQuery)
|
||||
removeEventListener Event.change lightModeListener true (MediaQueryList.toEventTarget prefersLightMediaQuery)
|
||||
removeEventListener Event.change darkModeListener true
|
||||
(MediaQueryList.toEventTarget prefersDarkMediaQuery)
|
||||
removeEventListener Event.change lightModeListener true
|
||||
(MediaQueryList.toEventTarget prefersLightMediaQuery)
|
||||
pure
|
||||
$ fragment
|
||||
$ Array.cons
|
||||
( element E.global
|
||||
{ styles: F.globalStyles <> (_ <>? props.globalStyles)
|
||||
case propsThemeVariant, systemThemeVariant of
|
||||
Nothing, Nothing -> Styles.global
|
||||
Just Styles.DarkMode, _ -> Styles.darkMode
|
||||
Just Styles.LightMode, _ -> Styles.lightMode
|
||||
Nothing, Just DarkMode -> Styles.darkMode
|
||||
Nothing, Just LightMode -> Styles.lightMode
|
||||
Nothing, Nothing → Styles.global
|
||||
Just Styles.DarkMode, _ → Styles.darkMode
|
||||
Just Styles.LightMode, _ → Styles.lightMode
|
||||
Nothing, Just DarkMode → Styles.darkMode
|
||||
Nothing, Just LightMode → Styles.lightMode
|
||||
}
|
||||
)
|
||||
children
|
||||
children
|
||||
|
||||
@ -14,13 +14,14 @@ type Props =
|
||||
type PropsOptional =
|
||||
PropsF OptionalProp
|
||||
|
||||
component ∷ ∀ p p_. Union p p_ Props => ReactComponent { children ∷ Array JSX | p }
|
||||
component ∷
|
||||
∀ p p_. Union p p_ Props ⇒ ReactComponent { children ∷ Array JSX | p }
|
||||
component = rawComponent
|
||||
|
||||
rawComponent ∷ ∀ p. ReactComponent { | p }
|
||||
rawComponent =
|
||||
mkForwardRefComponent "Grid" do
|
||||
\(props ∷ { | PropsOptional }) ref -> React.do
|
||||
\(props ∷ { | PropsOptional }) ref → React.do
|
||||
pure
|
||||
$ emotionDiv ref props
|
||||
{ className: "ry-grid " <>? props.className
|
||||
|
||||
5
src/Yoga/Block/Layout/Layers.purs
Normal file
5
src/Yoga/Block/Layout/Layers.purs
Normal file
@ -0,0 +1,5 @@
|
||||
module Yoga.Block.Layout.Layers
|
||||
( module Yoga.Block.Layout.Layers.View
|
||||
) where
|
||||
|
||||
import Yoga.Block.Layout.Layers.View (component, Props, PropsNoChildren)
|
||||
23
src/Yoga/Block/Layout/Layers/Style.purs
Normal file
23
src/Yoga/Block/Layout/Layers/Style.purs
Normal file
@ -0,0 +1,23 @@
|
||||
module Yoga.Block.Layout.Layers.Style where
|
||||
|
||||
import Yoga.Prelude.Style
|
||||
|
||||
type Props ∷ ∀ k. (Type → k) → Row k → Row k
|
||||
type Props f r =
|
||||
( css ∷ f Style
|
||||
, width ∷ f StyleProperty
|
||||
, height ∷ f StyleProperty
|
||||
| r
|
||||
)
|
||||
|
||||
layers ∷ ∀ p. { | Props OptionalProp p } → Style
|
||||
layers props = styles <>? props.css
|
||||
where
|
||||
styles = displayGrid <>
|
||||
css
|
||||
{ "& > *": nested (css { gridArea: str "1 / 1 / 1 / 1" })
|
||||
, width: props.width ?|| (str "fit-content")
|
||||
, height: props.height ?|| (str "fit-content")
|
||||
, gridTemplateColumns: str "1fr"
|
||||
, gridTemplateRows: str "1fr"
|
||||
}
|
||||
38
src/Yoga/Block/Layout/Layers/View.purs
Normal file
38
src/Yoga/Block/Layout/Layers/View.purs
Normal file
@ -0,0 +1,38 @@
|
||||
module Yoga.Block.Layout.Layers.View where
|
||||
|
||||
import Yoga.Prelude.View
|
||||
|
||||
import Yoga.Block.Internal (DivPropsNoChildren)
|
||||
import Yoga.Block.Layout.Layers.Style as Style
|
||||
|
||||
type PropsNoChildrenF f =
|
||||
( className ∷ f String
|
||||
| Style.Props f DivPropsNoChildren
|
||||
)
|
||||
|
||||
type PropsF f =
|
||||
( children ∷ Array JSX
|
||||
| PropsNoChildrenF f
|
||||
)
|
||||
|
||||
type Props =
|
||||
PropsF Id
|
||||
|
||||
type PropsNoChildren =
|
||||
PropsNoChildrenF Id
|
||||
|
||||
type PropsOptional =
|
||||
PropsF OptionalProp
|
||||
|
||||
component ∷ ∀ p q. Union p q Props ⇒ ReactComponent { | p }
|
||||
component = rawComponent
|
||||
|
||||
rawComponent ∷ ∀ p. ReactComponent { | p }
|
||||
rawComponent =
|
||||
mkForwardRefComponent "Imposter" do
|
||||
\(props ∷ { | PropsOptional }) ref → React.do
|
||||
pure
|
||||
$ emotionDiv ref props
|
||||
{ className: "ry-layers " <>? props.className
|
||||
, css: Style.layers props
|
||||
}
|
||||
@ -4,15 +4,16 @@ 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
|
||||
, space ∷ f StyleProperty
|
||||
, splitAfter ∷ f Int
|
||||
, childCss ∷ f Style
|
||||
| r
|
||||
)
|
||||
|
||||
stack ∷ ∀ p. { | Props OptionalProp p } -> Style
|
||||
stack ∷ ∀ p. { | Props OptionalProp p } → Style
|
||||
stack props = splitStyles <> styles <>? props.css
|
||||
where
|
||||
styles =
|
||||
@ -26,13 +27,16 @@ stack props = splitStyles <> styles <>? props.css
|
||||
, marginBottom: _0
|
||||
}
|
||||
, "& > * + *":
|
||||
nest
|
||||
{ margin: _0
|
||||
, marginTop: props.space ?|| (1.5 # rem)
|
||||
}
|
||||
nested
|
||||
$ css
|
||||
{ margin: _0
|
||||
, marginTop: props.space ?|| (1.5 # rem)
|
||||
}
|
||||
<>? props.childCss
|
||||
}
|
||||
|
||||
splitStyles = props.splitAfter # foldMap \n -> onlyChildStyle <> nthChildStyle n
|
||||
splitStyles = props.splitAfter # foldMap \n → onlyChildStyle <> nthChildStyle
|
||||
n
|
||||
where
|
||||
onlyChildStyle =
|
||||
css
|
||||
@ -41,6 +45,7 @@ stack props = splitStyles <> styles <>? props.css
|
||||
|
||||
-- This is really n-th child, but emotion has trouble with it so we hack it as per
|
||||
-- https://github.com/emotion-js/emotion/issues/1105#issuecomment-1126025608
|
||||
nthChild n = i "& > :nth-of-type(" n "):not(style):not(:nth-of-type(" n ") ~ *), & > style + *"
|
||||
nthChild n = i "& > :nth-of-type(" n "):not(style):not(:nth-of-type(" n
|
||||
") ~ *), & > style + *"
|
||||
|
||||
nthChildStyle n = (nthChild n) ~: { marginBottom: auto }
|
||||
|
||||
@ -1,4 +1,10 @@
|
||||
module Yoga.Block.Layout.Stack.View (component, Props, PropsNoChildren, PropsNoChildrenF, PropsF) where
|
||||
module Yoga.Block.Layout.Stack.View
|
||||
( component
|
||||
, Props
|
||||
, PropsNoChildren
|
||||
, PropsNoChildrenF
|
||||
, PropsF
|
||||
) where
|
||||
|
||||
import Yoga.Prelude.View
|
||||
import Unsafe.Coerce (unsafeCoerce)
|
||||
@ -24,13 +30,13 @@ type PropsNoChildren =
|
||||
type PropsOptional =
|
||||
PropsF OptionalProp
|
||||
|
||||
component ∷ ∀ p q. Union p q Props => ReactComponent { children ∷ Array JSX | p }
|
||||
component ∷ ∀ p q. Union p q Props ⇒ ReactComponent { children ∷ Array JSX | p }
|
||||
component = rawComponent
|
||||
|
||||
rawComponent ∷ ∀ p. ReactComponent { | p }
|
||||
rawComponent =
|
||||
mkForwardRefComponent "Stack" 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)
|
||||
-- Wrapping children to use `:nth-of-type` instead of `:nth-child`
|
||||
|
||||
@ -2,6 +2,9 @@ module Yoga.Block.Molecule.Typeahead.Style where
|
||||
|
||||
import Yoga.Prelude.Style
|
||||
|
||||
import Story.Yoga.Block.Atom.PopOver.Story as PopOverStyle
|
||||
import Yoga.Block.Atom.PopOver.Style as PopOverStyle
|
||||
|
||||
type Props f r = (| r)
|
||||
|
||||
resultsContainer ∷ Style
|
||||
@ -27,13 +30,12 @@ resultsContainer =
|
||||
<> border 1
|
||||
<> borderSolid
|
||||
<> borderCol' col.inputBorder
|
||||
<> PopOverStyle.popOverStyle
|
||||
<> css { ".TypeaheadList": nested (pXY 0 <> mXY 0) }
|
||||
|
||||
resultContainer ∷ Style
|
||||
resultContainer =
|
||||
pX 0
|
||||
<> cursorPointer
|
||||
<> overflowHidden
|
||||
(pX 0 <> cursorPointer <> overflowHidden)
|
||||
|
||||
item ∷ Style
|
||||
item =
|
||||
|
||||
@ -402,7 +402,7 @@ mkTypeaheadView
|
||||
scrollBar'
|
||||
{ background: col.backgroundBright2
|
||||
, col: col.backgroundBright4
|
||||
, width: sizeStyle.m
|
||||
, width: sizeStyle.s
|
||||
, borderRadius: E.px 5
|
||||
, borderWidth: E.px 2
|
||||
}
|
||||
|
||||
58
src/Yoga/Block/Typography/Heading/Style.purs
Normal file
58
src/Yoga/Block/Typography/Heading/Style.purs
Normal file
@ -0,0 +1,58 @@
|
||||
module Yoga.Block.Typography.Heading.Style where
|
||||
|
||||
import Yoga.Prelude.Style
|
||||
|
||||
baseH ∷ Style
|
||||
baseH = mXY zero <> pXY zero
|
||||
|
||||
h1 ∷ Style
|
||||
h1 = baseH <> text6xl <> lineHeight "1.2em"
|
||||
|
||||
h2 ∷ Style
|
||||
h2 = baseH <> text5xl <> css { fontWeight: str "680" } <> lineHeight "1.2em"
|
||||
|
||||
h3 ∷ Style
|
||||
h3 = baseH <> text4xl <> css { fontWeight: str "620" } <> lineHeight "1.2em"
|
||||
|
||||
h4 ∷ Style
|
||||
h4 = baseH <> text3xl <> fontSemibold <> lineHeight "1.2em"
|
||||
|
||||
h5 ∷ Style
|
||||
h5 = baseH <> text2xl <> fontMedium <> pB' sizeStyle.xs
|
||||
|
||||
h6 ∷ Style
|
||||
h6 = baseH <> textXl <> fontNormal <> pB'
|
||||
sizeStyle.xxs
|
||||
|
||||
highlight ∷ Style
|
||||
highlight =
|
||||
textLinearGradient 20
|
||||
[ colour.highlightRotatedBackwards
|
||||
, colour.highlightTextOnBackground
|
||||
, colour.highlightRotatedForwards
|
||||
] <> css
|
||||
{ "&::selection": nested
|
||||
(textCol' col.highlightText <> css { textFillColor: col.highlightText })
|
||||
}
|
||||
|
||||
title ∷ Style
|
||||
title = baseH <> textDefault <> fontMedium
|
||||
|
||||
subtitle ∷ Style
|
||||
subtitle = baseH <> textDefault <> trackingTight <> fontNormal
|
||||
<> textCol' col.textPaler2
|
||||
|
||||
tag ∷ Style
|
||||
tag = roundedFull
|
||||
<> border 1
|
||||
<> borderSolid
|
||||
<> borderCol' col.backgroundBright6
|
||||
<> background' col.backgroundBright4
|
||||
<> textCol' col.textPaler3
|
||||
<> fontMedium
|
||||
<> pX' sizeStyle.s
|
||||
<> pY' sizeStyle."3xs"
|
||||
<> textSm
|
||||
<> textTransformUppercase
|
||||
<> trackingWide
|
||||
<> shadowSm
|
||||
@ -5,12 +5,11 @@ module Yoga.Prelude.Style
|
||||
, module Yoga.Block.Internal.OptionalProp
|
||||
, module Yoga.Block.Internal.CSS
|
||||
, module Fahrtwind
|
||||
|
||||
, module Yoga.Block.Container.Style
|
||||
) where
|
||||
|
||||
import Fahrtwind
|
||||
import Color (Color, ColorSpace(..), Interpolator, brightness, complementary, contrast, cssStringHSLA, cssStringRGBA, darken, desaturate, distance, fromHexString, fromInt, graytone, hsl, hsla, hsv, hsva, isLight, isReadable, lab, lch, lighten, luminance, mix, mixCubehelix, rgb, rgb', rgba, rgba', rotateHue, saturate, toGray, toHSLA, toHSVA, toHexString, toLCh, toLab, toRGBA, toRGBA', toXYZ, xyz)
|
||||
import Fahrtwind (BlendMode(..), TailwindColor, acceptClicks, active, afterElement, alignSelfCenter, alignSelfEnd, alignSelfStart, amber, attributeValueStyle, background, background', backgroundBlendMode, backgroundImage, backgroundImage', backgroundNoRepeat, backgroundPosition, backgroundRepeat, backgroundRepeatX, backgroundRepeatY, backgroundSize, backgroundSize', base, basePopper, beforeElement, black, blendModeToStyleProperty, block, blue, blueGray, blurredBackground, blurredBackground', border, borderBottom, borderCol, borderCol', borderLeft, borderNone, borderRight, borderSolid, borderTop, bottom, bottom', boxSizingBorderBox, boxSizingContentBox, checked, content, coolGray, cursorAuto, cursorDefault, cursorHelp, cursorMove, cursorNotAllowed, cursorPointer, cursorText, cursorWait, cyan, default, disabled, displayGrid, displayNone, divideCol, divideX, divideXReverse, divideY, divideYReverse, emerald, empty, enabled, evenChild, fadeInAndOutAnimationName, first, firstChild, firstLetter, firstLine, firstOfType, flex, flexCol, flexGrow, flexNoWrap, flexRow, flexShrink, flexWrap, flexWrapReverse, focus, focusWithin, fontBlack, fontBold, fontExtrabold, fontExtralight, fontFamilyOrMono, fontFamilyOrSans, fontFamilyOrSerif, fontLight, fontMedium, fontNormal, fontSemiMedium, fontSemibold, fontSize, fontSize', fontThin, fuchsia, full, fullscreen, gap, globalStyles, gray, green, headShakeAnimationName, height, height', heightFull, heightScreen, hover, hue, ignoreClicks, inRange, indeterminate, indigo, infiniteSpinAnimation, inlineBlock, inlineFlex, inlineGrid, invalid, invisible, isolate, isolationAuto, itemsAround, itemsBetween, itemsCenter, itemsEnd, itemsEvenly, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifySelfCenter, justifySelfEnd, justifySelfStart, justifyStart, lastChild, lastOfType, left, left', level3, level3Popper, level4, level4Popper, level5, level5Popper, lightBlue, lightness, lime, lineHeight, lineHeight', linearGradient, linearGradientStops, linearGradientStopsString, linearGradientString, link, m', mB, mB', mL, mL', mR, mR', mT, mT', mX, mX', mXAuto, mXY, mY, mY', maxHeight, maxHeight', maxWidth, maxWidth', minHeight, minHeight', minWidth, minWidth', mixBlendMode, mkRotate, mkShadow, mkTranslate, nest, notification, notificationPopper, nthChild, nthOfType, oddChild, onlyChild, onlyOfType, opacity, optional, orange, outOfRange, outlineNone, overflowHidden, overflowScroll, overflowVisible, overflowXHidden, overflowXScroll, overflowYHidden, overflowYScroll, overlay, overlayPopper, p', pB, pB', pL, pL', pR, pR', pT, pT', pX, pX', pXY, pY, pY', pink, placeholder, pointerEventsAuto, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionStatic, positionSticky, pseudoLeft, pseudoRight, purple, readOnly, readWrite, red, required, right, right', root, rose, rotate, rounded, rounded2xl, rounded3xl, roundedDefault, roundedFull, roundedLg, roundedMd, roundedNone, roundedSm, roundedXl, saturation, scaleAnimationName, scope, screen2xl, screenHeight, screenLg, screenMd, screenSm, screenWidth, screenXl, selection, shadow, shadow', shadowDefault, shadowDefaultCol, shadowLg, shadowLgCol, shadowMd, shadowMdCol, shadowSm, shadowSmCol, shadowXl, shadowXlCol, shadowXxl, shadowXxlCol, shadows, spinAnimationName, svgBackgroundImage, target, teal, templateCols, templateRows, text2xl, text3xl, text4xl, text5xl, text6xl, text7xl, text8xl, text9xl, textBase, textCenter, textCol, textCol', textDefault, textJustify, textLeft, textLg, textOverflowEllipsis, textRight, textSized, textSm, textTransformUppercase, textXl, textXs, top, top', topmost, tracking, trackingNormal, trackingTight, trackingTighter, trackingWide, trackingWider, trackingWidest, transform, transform', transformMany, transition, transition', transitionRec, translate, trueGray, underline, userSelectNone, userSelectText, valid, variables, violet, visible, visited, warmGray, white, width, width', widthAndHeight, widthAndHeight', widthFull, widthScreen, withAlpha, withHue, withLightness, withSaturation, yellow, zIndex)
|
||||
import React.Basic.Emotion (class IsStyle, class IsStyleProperty, Style, StyleProperty, absolute, auto, baseline, borderBox, center, ch, ch2, ch4, cm, cm2, cm4, color, column, contentBox, css, element, elementKeyed, ellipsis, em, em2, em4, ex, ex2, ex4, fallbacks, fixed, flexEnd, flexStart, global, grid, hidden, important, inches, inches2, inches4, inherit, initial, int, keyframes, manipulation, maxContent, merge, minContent, mm, mm2, mm4, nested, none, nowrap, num, pc, pc2, pc4, percent, percent2, percent4, pointer, preWrap, prop, pt, pt2, pt4, px, px', px2, px2', px4, px4', relative, rem, rem2, rem4, revert, row, scroll, solid, spaceAround, spaceBetween, spaceEvenly, sticky, str, stretch, style, unset, url, var, vh, vh2, vh4, vmax, vmax2, vmax4, vmin, vmin2, vmin4, vw, vw2, vw4, wrap)
|
||||
import Yoga.Block.Container.Style (col, colour, colourWithAlpha, colourWithDarkLightAlpha, size, sizeStyle)
|
||||
import Yoga.Block.Internal.CSS (_0, _100percent, nestDynamic, (~:), transparent)
|
||||
|
||||
@ -29,9 +29,9 @@ import Yoga.Block.Container.Style as Styles
|
||||
import Yoga.Block.Layout.Types (JustifyContent(..))
|
||||
|
||||
type Props =
|
||||
{ checked :: UndefinedOr Boolean
|
||||
, id :: String
|
||||
, onChecked :: Boolean -> Effect Unit
|
||||
{ checked ∷ UndefinedOr Boolean
|
||||
, id ∷ String
|
||||
, onChecked ∷ Boolean → Effect Unit
|
||||
}
|
||||
|
||||
default ∷ Meta Props
|
||||
@ -40,7 +40,7 @@ default = meta
|
||||
, component: pure $ React.element Checkbox.rawComponent
|
||||
, tags: [ "docsPage" ]
|
||||
, decorators:
|
||||
[ metaDecorator \storyFn ->
|
||||
[ metaDecorator \storyFn →
|
||||
R.div_
|
||||
[ element E.global { styles: Styles.global }
|
||||
, storyFn
|
||||
@ -52,9 +52,9 @@ checkbox ∷ Story Props
|
||||
checkbox = story args argTypes
|
||||
where
|
||||
args =
|
||||
{ checked: cast undefined :: UndefinedOr Boolean
|
||||
{ checked: cast undefined ∷ UndefinedOr Boolean
|
||||
, id: "example"
|
||||
, onChecked: LogAction \(x :: Boolean) -> "Checkbox is: " <> show x
|
||||
, onChecked: LogAction \(x ∷ Boolean) → "Checkbox is: " <> show x
|
||||
}
|
||||
|
||||
argTypes = inferArgTypes args
|
||||
@ -64,11 +64,12 @@ checkbox = story args argTypes
|
||||
-- # setRequired { buttonType: false }
|
||||
-- # setRequired { buttonShape: false }
|
||||
|
||||
withLabel :: Effect JSX
|
||||
withLabel ∷ Effect JSX
|
||||
withLabel = do
|
||||
pure $ Block.cluster { space: size.xl, justifyContent: JEvenly }
|
||||
[ Block.stack { space: E.str size.m } (toLabelled <$> [ "a", "b", "c" ])
|
||||
, Block.stack { space: E.str size.m } (toReverseLabelled <$> [ "d", "e", "f" ])
|
||||
, Block.stack { space: E.str size.m }
|
||||
(toReverseLabelled <$> [ "d", "e", "f" ])
|
||||
]
|
||||
where
|
||||
toLabelled x =
|
||||
|
||||
41
stories/Story/Yoga/Block/Atom/PopOver.purs
Normal file
41
stories/Story/Yoga/Block/Atom/PopOver.purs
Normal file
@ -0,0 +1,41 @@
|
||||
module Story.Yoga.Block.Atom.PopOver.Story where
|
||||
|
||||
import Yoga.Prelude.View
|
||||
|
||||
import Fahrtwind (divideY, withAlpha)
|
||||
import React.Basic.DOM as R
|
||||
import React.Basic.Emotion as E
|
||||
import Storybook (metaDecorator)
|
||||
import Yoga.Block as Block
|
||||
import Yoga.Block.Atom.PopOver.Style as PopOverStyle
|
||||
import Yoga.Block.Container.Style as Styles
|
||||
import Yoga.Prelude.Style as S
|
||||
|
||||
default =
|
||||
{ title: "Atom/PopOver"
|
||||
, decorators:
|
||||
[ metaDecorator \storyFn →
|
||||
R.div_
|
||||
[ element E.global { styles: Styles.global }
|
||||
, storyFn
|
||||
]
|
||||
]
|
||||
}
|
||||
|
||||
popover ∷ Effect JSX
|
||||
popover = do
|
||||
pure $
|
||||
R.div_
|
||||
[ R.h2_ [ R.text "Image" ]
|
||||
, Block.box { css: PopOverStyle.popOverStyle }
|
||||
[ Block.stack
|
||||
{ space: S.sizeStyle.s
|
||||
, childCss: S.pT' S.sizeStyle.s
|
||||
, css: divideY 1 <> S.divideCol'
|
||||
(S.str PopOverStyle.popOverSeparatorCol)
|
||||
}
|
||||
[ R.div_ [ R.text "My PopOver" ]
|
||||
, R.div_ [ R.text "My OtherPopOver" ]
|
||||
]
|
||||
]
|
||||
]
|
||||
@ -7,6 +7,7 @@ import Yoga.Prelude.Style
|
||||
|
||||
import Data.Tuple.Nested ((/\))
|
||||
import Effect.Unsafe (unsafePerformEffect)
|
||||
import Fahrtwind (text3xl)
|
||||
import Fahrtwind as F
|
||||
import Fahrtwind as FW
|
||||
import React.Basic (JSX, element, fragment)
|
||||
@ -105,6 +106,45 @@ leftSidebar = Block.sidebar
|
||||
}
|
||||
[ R.text "Sidebar First" ]
|
||||
]
|
||||
, Block.box
|
||||
{ css:
|
||||
border 1
|
||||
<> roundedXl
|
||||
<> transition
|
||||
"border-color 0.5s ease-in-out, background 0.2s ease-in-out"
|
||||
<> borderCol' (col.backgroundLayer2)
|
||||
<> shadowXl
|
||||
<>
|
||||
( hover
|
||||
( borderGradient
|
||||
{ borderGradient: linearGradientString' 35
|
||||
[ colourWithAlpha.highlightRotatedBackwards 0.5
|
||||
, colourWithAlpha.highlightTextOnBackground 0.8
|
||||
, colourWithAlpha.highlightTextOnBackground 0.8
|
||||
, colourWithAlpha.highlightRotatedForwards 0.5
|
||||
]
|
||||
, backgroundGradient: linearGradientString' 0
|
||||
[ colour.backgroundLayer2
|
||||
, colour.backgroundLayer2
|
||||
]
|
||||
}
|
||||
)
|
||||
)
|
||||
}
|
||||
[ R.text "Hi" ]
|
||||
|
||||
, Block.centre_
|
||||
[ Block.layers
|
||||
{ css: text6xl <> hover
|
||||
( infiniteSpinAnimation <> css
|
||||
{ transformOrigin: str "center center" }
|
||||
)
|
||||
}
|
||||
|
||||
[ Block.centre { andText: true } [ Block.box_ [ R.text "O" ] ]
|
||||
, Block.centre { andText: true } [ Block.box_ [ R.text "=" ] ]
|
||||
]
|
||||
]
|
||||
, colBox col.backgroundLayer3 [ R.text "Sidebar Second" ]
|
||||
]
|
||||
, space: "8px"
|
||||
|
||||
@ -2,9 +2,10 @@ module Story.Yoga.Block.Molecule.Modal.Story (default, modal) where
|
||||
|
||||
import Prelude
|
||||
|
||||
import Color (cssStringRGBA)
|
||||
import Data.Tuple.Nested ((/\))
|
||||
import Effect (Effect)
|
||||
import Fahrtwind (background', mXY, roundedLg, textXl)
|
||||
import Fahrtwind (background', blue, border, borderBottom, borderGradient, lightBlue, linearGradientString', mXY, roundedLg, shadowLg, textXl, withAlpha)
|
||||
import React.Basic (JSX, element, fragment)
|
||||
import React.Basic.DOM as R
|
||||
import React.Basic.Emotion as E
|
||||
@ -13,11 +14,12 @@ import React.Basic.Hooks (bind, component, element, useState') as React
|
||||
import Storybook (Meta, meta, metaDecorator)
|
||||
import Yoga ((/>), (</*), (</>))
|
||||
import Yoga.Block as Block
|
||||
import Yoga.Block.Molecule.Modal as Modal
|
||||
import Yoga.Block.Container.Style (col)
|
||||
import Yoga.Block.Container.Style as Styles
|
||||
import Yoga.Block.Icon.SVG as SVGIcon
|
||||
import Yoga.Block.Layout.Types (JustifyContent(..))
|
||||
import Yoga.Block.Molecule.Modal as Modal
|
||||
import Yoga.Prelude.Style (colour, colourWithAlpha, colourWithDarkLightAlpha)
|
||||
|
||||
default ∷ Meta Modal.Props
|
||||
default = meta
|
||||
@ -53,7 +55,28 @@ modal = (_ $ unit) <$> React.component "ModalExample" \_ → React.do
|
||||
]
|
||||
where
|
||||
modalContent dismiss =
|
||||
Block.box { css: background' col.backgroundBright4 <> roundedLg }
|
||||
Block.box
|
||||
{ css: background' col.backgroundBright4 <> roundedLg
|
||||
<> shadowLg
|
||||
<> border 1
|
||||
<> borderBottom 0
|
||||
<>
|
||||
( borderGradient
|
||||
{ borderGradient: linearGradientString' 90
|
||||
[ colourWithDarkLightAlpha.backgroundInverted
|
||||
{ darkAlpha: 0.18, lightAlpha: 0.0 }
|
||||
, colourWithDarkLightAlpha.backgroundInverted
|
||||
{ darkAlpha: 0.45, lightAlpha: 0.0 }
|
||||
, colourWithDarkLightAlpha.backgroundInverted
|
||||
{ darkAlpha: 0.18, lightAlpha: 0.0 }
|
||||
]
|
||||
, backgroundGradient: linearGradientString' 0
|
||||
[ colour.backgroundLayer2
|
||||
, colour.backgroundLayer2
|
||||
]
|
||||
}
|
||||
)
|
||||
}
|
||||
[ Block.stack { splitAfter: 2 }
|
||||
[ Block.cluster { space: "0", justifyContent: JBetween }
|
||||
[ R.h2' </* { css: textXl <> mXY 0 } /> [ R.text "Skandal!" ]
|
||||
|
||||
52
stories/Story/Yoga/Block/Typography/Typography.purs
Normal file
52
stories/Story/Yoga/Block/Typography/Typography.purs
Normal file
@ -0,0 +1,52 @@
|
||||
module Story.Yoga.Block.Typography.Story where
|
||||
|
||||
import Yoga.Prelude.View
|
||||
|
||||
import React.Basic.DOM as R
|
||||
import React.Basic.Emotion as E
|
||||
import Storybook (metaDecorator)
|
||||
import Yoga.Block as Block
|
||||
import Yoga.Block.Container.Style (size)
|
||||
import Yoga.Block.Container.Style as Styles
|
||||
import Yoga.Block.Typography.Heading.Style as HeadingStyle
|
||||
import Yoga.Prelude.Style (sizeStyle)
|
||||
|
||||
default =
|
||||
{ title: "Typography"
|
||||
, decorators:
|
||||
[ metaDecorator \storyFn →
|
||||
R.div_
|
||||
[ element E.global { styles: Styles.global }
|
||||
, storyFn
|
||||
]
|
||||
]
|
||||
}
|
||||
|
||||
headings ∷ Effect JSX
|
||||
headings = do
|
||||
let text = "Franz jagt im komplett verwahrlosten Taxi quer durch Bayern"
|
||||
pure $
|
||||
Block.box_
|
||||
[ R.h2_ [ R.text "Headings" ]
|
||||
, Block.stack_
|
||||
[ R.h1' </* { css: HeadingStyle.h1 } /> [ R.text $ "H1 " <> text ]
|
||||
, R.h2' </* { css: HeadingStyle.h2 } /> [ R.text $ "H2 " <> text ]
|
||||
, R.h3' </* { css: HeadingStyle.h3 } /> [ R.text $ "H3 " <> text ]
|
||||
, R.h4' </* { css: HeadingStyle.h4 } /> [ R.text $ "H4 " <> text ]
|
||||
, R.h5' </* { css: HeadingStyle.h5 } /> [ R.text $ "H5 " <> text ]
|
||||
, R.h6' </* { css: HeadingStyle.h6 } /> [ R.text $ "H6 " <> text ]
|
||||
]
|
||||
, R.h3' </* { css: HeadingStyle.h3 <> HeadingStyle.highlight } />
|
||||
[ R.text text ]
|
||||
, R.h3' </* { css: HeadingStyle.title } />
|
||||
[ R.text "Small Title" ]
|
||||
, R.h4' </* { css: HeadingStyle.subtitle } />
|
||||
[ R.text "Some more info about this" ]
|
||||
, R.p' </ {} />
|
||||
[ R.text "Franz jagt im komplett verwahrlosten Taxi quer durch Bayern"
|
||||
]
|
||||
, Block.cluster { space: size.xs }
|
||||
[ R.span' </* { css: HeadingStyle.tag } /> [ R.text "Hi" ]
|
||||
, R.span' </* { css: HeadingStyle.tag } /> [ R.text "Hohohoho" ]
|
||||
]
|
||||
]
|
||||
Loading…
Reference in New Issue
Block a user