diff --git a/templates/components.html b/templates/components.html deleted file mode 100644 index a9b566cd..00000000 --- a/templates/components.html +++ /dev/null @@ -1,145 +0,0 @@ -{% macro Icon(name, classes="") -%} - {% autoescape false %} - - {% endautoescape %} -{%- endmacro %} - -{% macro SidenavItem(label, href, active=False, icon=None, subnav=None) -%} -
  • - - {% if icon %} - {{ Icon(icon, classes="sidenav__link-icon") }} - {% endif %} - - {{label}} - - - {% if subnav and active %} - - {% endif %} -
  • -{%- endmacro %} - -{% macro Modal() -%} - -{%- endmacro %} - -{% macro EmptyState(message, actionLabel, actionHref, icon=None) -%} -
    -

    {{ message }}

    - - {% if icon %} - {{ Icon(icon) }} - {% endif %} - - {{ actionLabel }} -
    -{%- endmacro %} - -{% macro Alert(title, message=None, actions=None, level='info') -%} -{% set role = 'alertdialog' if actions else 'alert' %} -{% set levels = { - 'warning': { - 'icon': 'alert', - 'tone': 'assertive' - }, - 'error': { - 'icon': 'alert', - 'tone': 'assertive' - }, - 'info': { - 'icon': 'info', - 'tone': 'polite' - }, - 'success': { - 'icon': 'ok', - 'tone': 'polite' - } -} %} - -
    - {{ Icon(levels.get(level).get('icon'), classes='alert__icon icon--large') }} - -
    -

    {{title}}

    - - {% if message %} -
    {{ message | safe }}
    - {% endif %} - - {% if actions %} -
    {{ actions | safe }}
    - {% endif %} -
    -
    -{%- endmacro %} - -{% macro TextInput(field, placeholder='') -%} -
    - - - {{ field(placeholder=placeholder) | safe }} - - {% if field.errors %} - {% for error in field.errors %} - {{ error }} - {% endfor %} - {% endif %} -
    -{%- endmacro %} - -{% macro OptionsInput(field, inline=False) -%} -
    - -
    - - {{ field.label }} - - {% if field.description %} - {{ field.description | safe }} - {% endif %} - - {% if field.errors %} - {{ Icon('alert') }} - {% endif %} - - - {{ field() }} - - {% if field.errors %} - {% for error in field.errors %} - {{ error }} - {% endfor %} - {% endif %} - -
    -
    - -{%- endmacro %} diff --git a/templates/components/alert.html b/templates/components/alert.html new file mode 100644 index 00000000..d3385d1d --- /dev/null +++ b/templates/components/alert.html @@ -0,0 +1,39 @@ +{% from "components/icon.html" import Icon %} + +{% macro Alert(title, message=None, actions=None, level='info') -%} + {% set role = 'alertdialog' if actions else 'alert' %} + {% set levels = { + 'warning': { + 'icon': 'alert', + 'tone': 'assertive' + }, + 'error': { + 'icon': 'alert', + 'tone': 'assertive' + }, + 'info': { + 'icon': 'info', + 'tone': 'polite' + }, + 'success': { + 'icon': 'ok', + 'tone': 'polite' + } + } %} + +
    + {{ Icon(levels.get(level).get('icon'), classes='alert__icon icon--large') }} + +
    +

    {{title}}

    + + {% if message %} +
    {{ message | safe }}
    + {% endif %} + + {% if actions %} +
    {{ actions | safe }}
    + {% endif %} +
    +
    +{%- endmacro %} diff --git a/templates/components/alert.html.to b/templates/components/alert.html.to deleted file mode 100644 index 05cac613..00000000 --- a/templates/components/alert.html.to +++ /dev/null @@ -1,35 +0,0 @@ -{% set role = 'alertdialog' if actions else 'alert' %} -{% set levels = { - 'warning': { - 'icon': 'alert', - 'tone': 'assertive' - }, - 'error': { - 'icon': 'alert', - 'tone': 'assertive' - }, - 'info': { - 'icon': 'info', - 'tone': 'polite' - }, - 'success': { - 'icon': 'ok', - 'tone': 'polite' - } -} %} - -
    - {% module Icon(levels.get(level).get('icon'), classes='alert__icon icon--large') %} - -
    -

    {{title}}

    - - {% if message %} -
    {% raw message %}
    - {% end %} - - {% if actions %} -
    {% raw actions %}
    - {% end %} -
    -
    diff --git a/templates/components/empty_state.html b/templates/components/empty_state.html new file mode 100644 index 00000000..7dc6f119 --- /dev/null +++ b/templates/components/empty_state.html @@ -0,0 +1,13 @@ +{% from "components/icon.html" import Icon %} + +{% macro EmptyState(message, actionLabel, actionHref, icon=None) -%} +
    +

    {{ message }}

    + + {% if icon %} + {{ Icon(icon) }} + {% endif %} + + {{ actionLabel }} +
    +{%- endmacro %} diff --git a/templates/components/empty_state.html.to b/templates/components/empty_state.html.to deleted file mode 100644 index 30246ddb..00000000 --- a/templates/components/empty_state.html.to +++ /dev/null @@ -1,9 +0,0 @@ -
    -

    {{ message }}

    - - {% if icon %} - {% module Icon(icon) %} - {% end %} - - {{ actionLabel }} -
    diff --git a/templates/components/icon.html b/templates/components/icon.html new file mode 100644 index 00000000..42139e57 --- /dev/null +++ b/templates/components/icon.html @@ -0,0 +1,6 @@ +{% macro Icon(name, classes="") -%} + {% autoescape false %} + + {% endautoescape %} +{%- endmacro %} + diff --git a/templates/components/icon.html.to b/templates/components/icon.html.to deleted file mode 100644 index 99e74b40..00000000 --- a/templates/components/icon.html.to +++ /dev/null @@ -1,2 +0,0 @@ -{% autoescape None %} - diff --git a/templates/components/modal.html b/templates/components/modal.html new file mode 100644 index 00000000..8e483de4 --- /dev/null +++ b/templates/components/modal.html @@ -0,0 +1,9 @@ +{% macro Modal() -%} + +{%- endmacro %} diff --git a/templates/components/modal.html.to b/templates/components/modal.html.to deleted file mode 100644 index 4330adbd..00000000 --- a/templates/components/modal.html.to +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/templates/components/options_input.html b/templates/components/options_input.html new file mode 100644 index 00000000..55342c24 --- /dev/null +++ b/templates/components/options_input.html @@ -0,0 +1,27 @@ +{% macro OptionsInput(field, inline=False) -%} +
    + +
    + + {{ field.label }} + + {% if field.description %} + {{ field.description | safe }} + {% endif %} + + {% if field.errors %} + {{ Icon('alert') }} + {% endif %} + + + {{ field() }} + + {% if field.errors %} + {% for error in field.errors %} + {{ error }} + {% endfor %} + {% endif %} + +
    +
    +{%- endmacro %} diff --git a/templates/components/options_input.html.to b/templates/components/options_input.html.to deleted file mode 100644 index 8a15e041..00000000 --- a/templates/components/options_input.html.to +++ /dev/null @@ -1,25 +0,0 @@ -
    - -
    - - {{ label }} - - {% if description %} - {% raw description %} - {% end %} - - {% if errors %} - {% module Icon('alert') %} - {% end %} - - - {% raw field() %} - - {% if errors %} - {% for error in errors %} - {{ error }} - {% end %} - {% end %} - -
    -
    diff --git a/templates/components/sidenav_item.html b/templates/components/sidenav_item.html new file mode 100644 index 00000000..64f5b765 --- /dev/null +++ b/templates/components/sidenav_item.html @@ -0,0 +1,28 @@ +{% from "components/icon.html" import Icon %} + +{% macro SidenavItem(label, href, active=False, icon=None, subnav=None) -%} +
  • + + {% if icon %} + {{ Icon(icon, classes="sidenav__link-icon") }} + {% endif %} + + {{label}} + + + {% if subnav and active %} + + {% endif %} +
  • +{%- endmacro %} diff --git a/templates/components/text_input.html b/templates/components/text_input.html new file mode 100644 index 00000000..0f50ca89 --- /dev/null +++ b/templates/components/text_input.html @@ -0,0 +1,23 @@ +{% macro TextInput(field, placeholder='') -%} +
    + + + {{ field(placeholder=placeholder) | safe }} + + {% if field.errors %} + {% for error in field.errors %} + {{ error }} + {% endfor %} + {% endif %} +
    +{%- endmacro %} diff --git a/templates/components/text_input.html.to b/templates/components/text_input.html.to deleted file mode 100644 index 2a800abc..00000000 --- a/templates/components/text_input.html.to +++ /dev/null @@ -1,21 +0,0 @@ -
    - - - {% raw field(placeholder=placeholder) %} - - {% if errors %} - {% for error in errors %} - {{ error }} - {% end %} - {% end %} -
    diff --git a/templates/member_edit.html.to b/templates/member_edit.html.to index d454152c..fbe92f35 100644 --- a/templates/member_edit.html.to +++ b/templates/member_edit.html.to @@ -1,5 +1,7 @@ {% extends "base_workspace.html.to" %} +{% from "components/alert.html" import Alert %} + {% block template_vars %} {% set is_new_member = False %} {% set member_name = "Danny Knight" %} @@ -10,11 +12,12 @@ {% block workspace_content %} -{% module Alert( +{{ Alert( "UI Mock", message="

    Please note, this screen is a non-functional UI mockup.

    ", level="info" - ) %} + ) +}}
    diff --git a/templates/navigation/_sidenav_item.html.to b/templates/navigation/_sidenav_item.html.to deleted file mode 100644 index 888245bc..00000000 --- a/templates/navigation/_sidenav_item.html.to +++ /dev/null @@ -1,24 +0,0 @@ -
  • - - {% if icon %} - {% module Icon(icon, classes="sidenav__link-icon") %} - {% end %} - - {{label}} - - - {% if subnav and active %} - - {% end %} -
  • diff --git a/templates/navigation/global_navigation.html b/templates/navigation/global_navigation.html index 594bf574..79728185 100644 --- a/templates/navigation/global_navigation.html +++ b/templates/navigation/global_navigation.html @@ -1,4 +1,5 @@ -{% from "components.html" import SidenavItem %} +{% from "components/sidenav_item.html" import SidenavItem %} +