Complete PR 83 - Add Text Direction

CHANGELOG.md

@@ -8,6 +8,7 @@ Breaking changes:
 
 New features:
 - Add smart constructors for generic font families (#68, #136 by @Unisay and @JordanMartinez)
+- Add support for `text-direction` (#83, #137 by @vyorkin and @JordanMartinez)
 
 Bugfixes:
 

src/CSS.purs

@@ -22,6 +22,7 @@ import CSS.Size (Abs, Angle(..), Deg, Rad, Rel, Size(..), deg, em, ex, nil, pct,
 import CSS.String (class IsString, fromString) as X
 import CSS.Stylesheet (App(..), CSS, Feature(..), Keyframes(..), MediaQuery(..), MediaType(..), NotOrOnly(..), Rule(..), StyleM(..), fontFace, importUrl, key, keyframes, keyframesFromTo, prefixed, query, rule, runS, select, (?)) as X
 import CSS.Text (TextDecoration(..), blink, letterSpacing, lineThrough, noneTextDecoration, overline, textDecoration, underline) as X
+import CSS.Text.Direction (TextDirection(..), direction) as X
 import CSS.Text.Whitespace (TextWhitespace, textWhitespace, whitespaceNoWrap, whitespaceNormal, whitespacePre, whitespacePreLine, whitespacePreWrap) as X
 import CSS.Text.Transform (TextTransform, textTransform) as X
 import CSS.Text.Overflow (TextOverflow, textOverflow) as X

src/CSS/Text.purs

@@ -12,7 +12,7 @@ letterSpacing = key $ fromString "letter-spacing"
 newtype TextDecoration = TextDecoration Value
 
 derive instance eqTextDecoration :: Eq TextDecoration
-derive instance ordTextDecoration:: Ord TextDecoration
+derive instance ordTextDecoration :: Ord TextDecoration
 
 instance valTextDecoration :: Val TextDecoration where
   value (TextDecoration v) = v

src/CSS/Text/Direction.purs

@@ -0,0 +1,24 @@
+module CSS.Text.Direction where
+
+import Prelude
+import CSS.Property (class Val)
+import CSS.String (fromString)
+import CSS.Stylesheet (CSS, key)
+
+data TextDirection = Ltr | Rtl
+
+derive instance eqTextDirection :: Eq TextDirection
+derive instance ordTextDirection :: Ord TextDirection
+
+instance valTextDirection :: Val TextDirection where
+  value Ltr = fromString "ltr"
+  value Rtl = fromString "rtl"
+
+direction :: TextDirection -> CSS
+direction = key $ fromString "direction"
+
+ltr :: TextDirection
+ltr = Ltr
+
+rtl :: TextDirection
+rtl = Rtl

test/Main.purs

@@ -4,10 +4,11 @@ import Prelude
 
 import Effect (Effect)
 import Effect.Exception (error, throwException)
-import CSS (Rendered, Path(..), Predicate(..), Refinement(..), Selector(..), FontFaceSrc(..), FontFaceFormat(..), pct, renderedSheet, renderedInline, fromString, selector, block, display, render, borderBox, boxSizing, contentBox, blue, color, body, a, p, px, dashed, border, inlineBlock, red, (?), (&), (|>), (|*), (|+), byId, byClass, (@=), (^=), ($=), (*=), (~=), (|=), hover, fontFaceSrc, fontStyle, deg, zIndex, textOverflow, opacity, cursor, transform, transition, easeInOut, cubicBezier, ms)
+import CSS (Rendered, Path(..), Predicate(..), Refinement(..), Selector(..), FontFaceSrc(..), FontFaceFormat(..), pct, renderedSheet, renderedInline, fromString, selector, block, display, render, borderBox, boxSizing, contentBox, blue, color, body, a, p, px, dashed, border, inlineBlock, red, (?), (&), (|>), (|*), (|+), byId, byClass, (@=), (^=), ($=), (*=), (~=), (|=), hover, fontFaceSrc, fontStyle, deg, zIndex, textOverflow, opacity, cursor, transform, transition, easeInOut, cubicBezier, ms, direction)
 import CSS.Cursor as Cursor
 import CSS.Flexbox (flex)
 import CSS.FontStyle as FontStyle
+import CSS.Text.Direction as TextDirection
 import CSS.Text.Overflow as TextOverflow
 import CSS.Transform as Transform
 import Data.Maybe (Maybe(..))
@@ -132,6 +133,10 @@ exampleTextOverflow2 :: Rendered
 exampleTextOverflow2 = render do
   textOverflow $ TextOverflow.custom "foobar"
 
+exampleDirection :: Rendered
+exampleDirection = render do
+  direction TextDirection.rtl
+
 exampleCursor :: Rendered
 exampleCursor = render do
   cursor Cursor.notAllowed
@@ -202,6 +207,8 @@ main = do
   renderedSheet attrSpace `assertEqual` Just "p[foo~='bar'] { display: block }\n"
   renderedSheet attrHyph `assertEqual` Just "p[foo|='bar'] { display: block }\n"
 
+  renderedInline exampleDirection `assertEqual` Just "direction: rtl"
+
   renderedInline exampleCursor `assertEqual` Just "cursor: not-allowed"
 
   renderedInline scaleTransform1 `assertEqual` Just "transform: scaleX(1.0); transform: scaleY(0.5); transform: scaleZ(0.5)"