if-attr.ftd

-- boolean present: false

-- my-ds.page: Conditional Attributes


-- ds.markdown: 

`ftd` supports `if` expression to decide the value of attribute, based on the
arguments, or global variables.


-- ds.h2: Priority Order

The priority of conditional attributes is in increasing order (low -> high) i.e.
the condition at bottom has higher priority than the above conditions. The value of 
attribute with no condition is taken as default.


-- ds.h2: Examples

Lets understand it better with few examples


-- ds.h3: Example 1:


-- ds.code: Conditional Attribute using variable
lang: ftd

\-- boolean present: false

\-- component foo1:
caption name:

\-- ftd.text:
color: $inherited.colors.text
color if { $present }: $inherited.colors.cta-primary.text
color if { !$present }: $inherited.colors.error.text
text: $foo1.name

\-- end: foo1


\-- foo1: hello

-- ds.markdown:

Output:


-- ftd.row:
border-width.px: 1
border-color: $inherited.colors.text
padding.px: 10
width: fill-container

-- foo1: hello

-- end: ftd.row


-- ds.markdown:

Here, in above sample code, the attribute or style `color` has default value as 
`grey` and it follows the conditional statements. According to the value of the 
variable `present` (in this case, it is `false`), the value of the style `color` 
is set (in this case, it's `red`).


-- ds.h3: Example 2:


-- ds.code: Conditional Attribute with default
lang: ftd

\-- boolean present: false

\-- component foo2:
caption name:

\-- ftd.text:
color: $inherited.colors.text
color if { $present }: $inherited.colors.error.text
text: $foo2.name

\-- end: foo2

\-- foo2: hello


-- ds.markdown:

Output:


-- ftd.row:
border-width.px: 1
border-color: $inherited.colors.text
padding.px: 10
width: fill-container

-- foo2: hello


-- end: ftd.row


-- ds.markdown:

Here, in above sample code, no conditional statement is satisfied, so the value of 
style `color` is set to its default value (i.e. `grey`).


-- ds.h3: Example 3:


-- ds.code: Conditional Attribute using arguments
lang: ftd

\-- component foo3:
caption name:
optional string yes:

\-- ftd.text:
color: $inherited.colors.text
color if { foo3.yes != NULL }: $inherited.colors.cta-secondary.base
text: $foo3.name

\-- end: foo3


\-- foo3: hello
yes: world

-- ds.markdown:

Output:


-- ftd.row:
border-width.px: 1
border-color: $inherited.colors.text
padding.px: 10
width: fill-container



-- foo3: hello
yes: world


-- end: ftd.row


-- ds.markdown:

Here, in above sample code, we have defined the argument `yes` of optional string 
type. If `yes` is passed then `color if $yes is not null` condition would be 
satisfied and the `color` gets set to `blue`.


-- ds.h3: Example 4:


-- ds.code: Conditional Attribute deciding priority
lang: ftd

\-- boolean present: false

\-- component foo4:
caption name:
optional string yes:

\-- ftd.text:
color: $inherited.colors.text
color if { $present }: $inherited.colors.cta-primary.text
color if { !$present}: $inherited.colors.cta-secondary.base
color if { foo4.yes != NULL }: $inherited.colors.success.text
text: $foo4.name

\-- end: foo4

\-- foo4: hello
yes: world

-- ds.markdown:

Output:


-- ftd.row:
border-width.px: 1
border-color: $inherited.colors.text
padding.px: 10
width: fill-container

;; This one is not working as expected
;; Text color should be green but showing blue



-- foo4: hello
yes: world


-- end: ftd.row


-- ds.markdown:

Here, in above sample code, both `color if not present: blue` and
`color if $yes is not null: green` are satisfied, so according to the precedence
rule, the value of attribute/style is set to value in last satisfied condition, 
i.e., `color if $yes is not null: green` has highest priority. So the `color` gets
set to `green`.


-- ds.h1: Note: Does not yet work well with event handling

Conditional attributes only work with the variables defined in the document, and
do not get updated when the value of the variable changes as a response to events.


-- end: my-ds.page






-- component foo1:
caption name:

-- ftd.text:
color: $inherited.colors.text
color if { $present }: $inherited.colors.cta-primary.text
color if { !$present }: $inherited.colors.error.text
text: $foo1.name

-- end: foo1










-- component foo2:
caption name:

-- ftd.text:
color: $inherited.colors.text
color if { $present }: $inherited.colors.error.text
text: $foo2.name

-- end: foo2










-- component foo3:
caption name:
optional string yes:

-- ftd.text:
color: $inherited.colors.text
color if { foo3.yes != NULL }: $inherited.colors.cta-secondary.base
text: $foo3.name

-- end: foo3










-- component foo4:
caption name:
optional string yes:

-- ftd.text:
color: $inherited.colors.text
color if { $present }: $inherited.colors.cta-primary.text
color if { !$present}: $inherited.colors.cta-secondary.base
color if { foo4.yes != NULL }: $inherited.colors.success.text
text: $foo4.name

-- end: foo4