+
+ - Class
pos-tip- Font family
+ - Color
+ - Size
+ - Weight
+ - Line height
+
+
+
+ {% render 'modules/common-styling/tip', content: 'The quick brown fox jumps over the lazy dog' %}
+
+ {% capture code %}{% raw %}
+ {% render 'modules/common-styling/tip', content: 'The quick brown fox jumps over the lazy dog' %}
+ {% endraw %}{% endcapture %}
+
+
{{ code | lstrip | rstrip }}
+
+
+
+
+
+
+ Links
+
+
+
+
+
Lorem ipsum dolor sit amet
consectetur adipisicing elit. Aut quisquam nemo ipsam
quo placeat voluptate voluptates doloribus magnam error dolorum vero corrupti
aliquam nobis nesciunt, qui debitis cumque perferendis provident?
+ {% render 'modules/common-styling/tip', content: 'When overwriting the
<a> classes, please remember to also overwrite the debug classes used in the style guide:
pos-debug-link-hover,
pos-debug-link-active,
pos-debug-link-focus.' %}
+
+
+
+
+
+
+
+
+
+
+ Buttons
+
+
+
+
+
Default
+
+
+
+
+ - Class
pos-button
+
+{% capture code %}{% raw %}
+
+{% endraw %}{% endcapture %}
+
+
{{ code | lstrip | rstrip }}
+
+
+
Primary
+
+
+
+
+ - Class
pos-button pos-button-primary
+
+{% capture code %}{% raw %}
+
+{% endraw %}{% endcapture %}
+
+
{{ code | lstrip | rstrip }}
+
+
+
+
+
+
Default small
+
+
+
+
+ - Class
pos-button pos-button-small
+
+{% capture code %}{% raw %}
+
+{% endraw %}{% endcapture %}
+
+
{{ code | lstrip | rstrip }}
+
+
+
Primary small
+
+
+
+
+ - Class
pos-button pos-button-small pos-button-small
+
+{% capture code %}{% raw %}
+
+{% endraw %}{% endcapture %}
+
+
{{ code | lstrip | rstrip }}
+
+
+
<button> classes, please remember to also overwrite the debug classes used in the style guide: pos-debug-button-hover, pos-debug-button-active, pos-debug-button-focus-visible.' %}
+
+
+
+
+ |
+ Default |
+ Primary |
+ Default small |
+ Primary small |
+
+
+
+
+ | Enabled |
+ |
+ |
+ |
+ |
+
+
+ | Hover |
+ |
+ |
+ |
+ |
+
+
+ | Active |
+ |
+ |
+ |
+ |
+
+
+ | Focused |
+ |
+ |
+ |
+ |
+
+
+ | Disabled |
+ |
+ |
+ |
+ |
+
+
+ | Icon |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ | Link |
+ Link |
+ Link |
+ Link |
+ Link |
+
+
+
+
+
+
+
+
+
+ Forms
+ There are two ways for styling form controlls. You can add a pos-form class to a container and make all the child inputs styled automatically or you can add one of the following classes to any single input to style it separately.
+
+ Basic example
+
+{% capture code %}{% raw %}
+
+{% endraw %}{% endcapture %}
+
+
{{ code | lstrip | rstrip }}
+
Containers
+
+
+
+
+
+
+ - Class
pos-form
+
Used for complex forms that needs more manual customized styling. No automatic labels styling, no automatic spacing between elements.
+
+
+
+
+
+ - Class
pos-form pos-form-simple
+
Used for simple forms that can be styled automatically. Styles the labels and spacing between items as well. You can just throw this class onto the container and forget about styling each separate control.
+
+
+
Rows
+
+
+
+
+ - Class
pos-form-fieldset- Properties
--pos-gap-text-text
+{% capture code %}{% raw %}
+
+{% endraw %}{% endcapture %}
+
+
{{ code | lstrip | rstrip }}
+
+
+
+
+
+
+ - Class
pos-form-fieldset-combined
+{% capture code %}{% raw %}
+
+{% endraw %}{% endcapture %}
+
+
{{ code | lstrip | rstrip }}
+
+
+
+
Labels
+
+
+ {% render 'modules/common-styling/tip', content: 'Labels that are placed in a
fieldset that has a
reqired input will automatically be marked with an asterisk.' %}
+
+
+
+
+ {% capture code %}{% raw %}
+
+ {% endraw %}{% endcapture %}
+
+
{{ code | lstrip | rstrip }}
+
+
+
+
+
+
Radio
+
+
+
+
+
+
Checkbox
+
+
+
+
+
Text inputs
+
+
+
+
+
+
+
+ - Class
pos-form-input
+
+{% capture code %}{% raw %}
+
+{% endraw %}{% endcapture %}
+
+
{{ code | lstrip | rstrip }}
+
+
+ {% render 'modules/common-styling/tip', content: 'When overwriting the
<input> classes, please remember to also overwrite the debug classes used in the style guide:
pos-debug-form-input-hover,
pos-debug-form-input-focus-visible.' %}
+
+
+
+
+
+
+
+
+
+
+ - Class
pos-form-input
+
+ {% capture code %}{% raw %}
+
+ {% endraw %}{% endcapture %}
+
+
{{ code | lstrip | rstrip }}
+
+
+ {% render 'modules/common-styling/tip', content: 'When overwriting the
<input> classes, please remember to also overwrite the debug classes used in the style guide:
pos-debug-form-input-hover,
pos-debug-form-input-focus-visible.' %}
+
+
+
+
+
+
+ |
+ Placeholder |
+ Filled |
+
+
+
+
+ | Default |
+ |
+ |
+
+
+ | Hover |
+ |
+ |
+
+
+ | Focused |
+ |
+ |
+
+
+ | Disabled |
+ |
+ |
+
+
+ | Error |
+ |
+ |
+
+
+
+
+
Password input
+
+
+
+
+ - name
- Input
name attribute string
+ - id
- Input
id attribute string
+ - value
- Current input value string
+ - class
- Class list added to input container string
+ - meter
- If you want to show the password strength meter bool
+
+ {% render 'modules/common-styling/tip', content: 'Strong passwords consists of small and capitalized letters, numbers, special signs and are at least 6 characters long. Remember to provide clear instructios for your users.' %}
+
+
+
+ {% render 'modules/common-styling/forms/password', name: 'styleguide-form-password-test', id: 'styleguide-form-password-test', value: '123456', meter: true %}
+
+{% capture code %}{% raw %}
+{% render 'modules/common-styling/forms/password',
+ name: 'styleguide-form-password-test',
+ value: '123',
+ id: 'styleguide-form-password-test',
+ meter: true
+%}
+{% endraw %}{% endcapture %}
+
+
{{ code | lstrip | rstrip }}
+
+
+
Select
+
+
+
+
+ - class
pos-form-select
+
+
+
+
+
+
+
Multiselect
+
+
+
+
+ - id
- Unique ID for the input string
+ - list
+ -
+ an array of objects with items to show, must include 'value' and 'label' array
+ [ { value: 'item1value', label: 'Item 1 label' }, { value: 'item2value', label: 'Item 2 label' } ]
+
+ - selected
+ -
+ array with selected values (the same as in the 'list') array
+ [ 'item2value' ]
+
+ - form
- the
<form> element that the multiselect corresponds to string
+ - name
- the
name="" property for the multiselect checkboxes string
+ - required
- at least one option is required bool
+ - combine_selected
- if you want to combine selected items into a single element ('2 selected' instead of displaying names) bool
+ - multiline
- if you want the list to extend vertically if there are more items than fit the single line bool
+ - showFilter
- allow to filter the list of options with a text input bool
+ - placeholder
- translation key for the main select input placeholder string
+ - placeholder_filter
- translation key for the filter input placeholder string
+ - placeholder_empty
- translation key shown when the filter brings no results string
+
+
+
+
+ {% liquid
+ assign example_list = '' | split: ''
+
+ for i in (i..10)
+ assign value = 'value' | append: i
+ assign label = 'Label for value ' | append: i
+ assign example_item = '{}' | parse_json | hash_merge: value: value, label: label
+ assign example_list = example_list | add_to_array: example_item
+ assign selected = '["value0", "value5", "value6"]' | parse_json
+ endfor
+ %}
+ {% render 'modules/common-styling/forms/multiselect', name: 'styleguide-form-multiselect-test-1', id: 'styleguide-form-multiselect-test-1', list: example_list, showFilter: true, combine_selected: true %}
+ {% render 'modules/common-styling/forms/multiselect', name: 'styleguide-form-multiselect-test-2', id: 'styleguide-form-multiselect-test-2', list: example_list, showFilter: true %}
+ {% render 'modules/common-styling/forms/multiselect', name: 'styleguide-form-multiselect-test-3', id: 'styleguide-form-multiselect-test-3', list: example_list, showFilter: false, multiline: true %}
+ {% render 'modules/common-styling/forms/multiselect', name: 'styleguide-form-multiselect-test-4', id: 'styleguide-form-multiselect-test-4', list: example_list, selected: selected, showFilter: true, combine_selected: true %}
+
+{% capture code %}{% raw %}
+{% render 'modules/common-styling/forms/multiselect',
+ name: 'styleguide-form-multiselect-test',
+ id: 'styleguide-form-multiselect-test'
+%}
+{% endraw %}{% endcapture %}
+
+
{{ code | lstrip | rstrip }}
+
+
+
Error handling
+
+ There are two partials that can be helpful when dealing with forms validation. One can be added to the input itself to handle usability code and the other can output the error message.
+
+ {% liquid
+ assign errors = '{ "styleguide-example-error": ["This is a field with two errors", "This is the second error"] }' | parse_json
+ %}
+
+
+ {% render 'modules/common-styling/forms/error_list', name: 'styleguide-example-error', errors: errors['styleguide-example-error'] %}
+{% capture code %}{% raw %}
+
+
+{% render 'modules/common-styling/forms/error_list', name: 'styleguide-example-error', errors: errors['styleguide-example-error'] %}
+{% endraw %}{% endcapture %}
+
+
+
{{ code | lstrip | rstrip }}
+
+
+
+
+
+
+ Boxes
+
+
+
+
+
The quick brown fox jumps over the lazy dog
+
+ {% capture code %}{% raw %}
+
+ {% endraw %}{% endcapture %}
+
+
{{ code | lstrip | rstrip }}
+
+
+ - class
pos-card- props
--pos-padding-card, --pos-radius-card, --pos-color-content-background
+
+
+
+
The quick brown fox jumps over the lazy dog
+
+ {% capture code %}{% raw %}
+
+ {% endraw %}{% endcapture %}
+
+
{{ code | lstrip | rstrip }}
+
+
+ - class
pos-card pos-card-highlighted- props
--pos-padding-card, --pos-radius-card, --pos-color-highlight-background
+
+
Content card
+
+
+ {% render 'modules/common-styling/content/card', url: '/', image: 'https://picsum.photos/1000/400', title: 'Lorem ipsum dolor sit amet', content: 'Quisque vel velit mi. Proin malesuada iaculis viverra. Vestibulum tristique sollicitudin rhoncus. Vivamus sollicitudin nisi in lorem gravida aliquam.', footer: '
Aside item' %}
+{% capture code %}{% raw %}
+{% render 'modules/common-styling/content/card', url: '/', image: 'https://picsum.photos/1000/400', title: 'Title', content: 'Content', footer: '
Aside item' %}
+{% endraw %}{% endcapture %}
+
+
{{ code | lstrip | rstrip }}
+
+
+
+ {% render 'modules/common-styling/content/card', url: '/', image: 'https://picsum.photos/1000/400?random=2', title: 'Lorem ipsum dolor sit amet', content: 'Quisque vel velit mi. Proin malesuada iaculis viverra. Vestibulum tristique sollicitudin rhoncus. Vivamus sollicitudin nisi in lorem gravida aliquam.', footer: 'Cras lacinia lorem', highlighted: true %}
+{% capture code %}{% raw %}
+{% render 'modules/common-styling/content/card', url: '/', image: 'https://picsum.photos/1000/400', title: 'Title', content: 'Content', footer: 'Footer', highlighted: true %}
+{% endraw %}{% endcapture %}
+
+
{{ code | lstrip | rstrip }}
+
+
+
+
+
+
+
+ Tables
+
+
+
+{% capture code %}{% raw %}
+
+
+ Column 1
+ Column 2
+ Column 3
+
+
+
+ -
+ Column 1
+ Content 1
+
+ -
+ Column 1
+ Content 2
+
+ -
+ Column 3
+ 321
+
+
+
+{% endraw %}{% endcapture %}
+
+
{{ code | lstrip | rstrip }}
+
+
+
+
+
+
+ Column 1
+ Column 2
+ Column 3
+
+
+
+ -
+ Column 1
+ Content 1
+
+ -
+ Column 1
+ Content 2
+
+ -
+ Column 3
+ 321
+
+
+
+ -
+ Column 1
+ Content 2
+
+ -
+ Column 2
+ Content 2
+
+ -
+ Column 3
+ 123
+
+
+
+
+
+ - class
pos-table- props
--pos-padding-cell
+
+
+
+{% capture code %}{% raw %}
+
+
+ Column 1
+ Column 2
+ Column 3
+
+
+
+ -
+ Column 1
+ Content 1
+
+ -
+ Column 1
+ Content 2
+
+ -
+ Column 3
+ 321
+
+
+
+{% endraw %}{% endcapture %}
+
+
{{ code | lstrip | rstrip }}
+
+
+
+
+
+
+ Column 1
+ Column 2
+ Column 3
+
+
+
+ -
+ Column 1
+ Content 1
+
+ -
+ Column 1
+ Content 2
+
+ -
+ Column 3
+ 321
+
+
+
+ -
+ Column 1
+ Content 2
+
+ -
+ Column 2
+ Content 2
+
+ -
+ Column 3
+ 123
+
+
+
+
+
+ - class
pos-table- props
--pos-padding-cell
+
+
+
+
+
+
+ Toasts
+
+
+
+
A standard platformOS way of showing toast notifications would be to store and get the messages in the session.
+
Adding the following code to your application `layout` file will initialize the module:
+{% capture code %}{% raw %}
+{% liquid
+ function flash = 'modules/core/commands/session/get', key: 'sflash'
+ if context.location.pathname != flash.from or flash.force_clear
+ function _ = 'modules/core/commands/session/clear', key: 'sflash'
+ endif
+ theme_render_rc 'modules/common-styling/toasts', params: flash
+%}
+{% endraw %}{% endcapture %}
+
+
{{ code | lstrip | rstrip }}
+
+
+
Then, you can use the following JavaScript to show a message on page:
+{% capture code %}{% raw %}
+new pos.modules.toast('[severity]', '[message]');
+{% endraw %}{% endcapture %}
+
+
{{ code | lstrip | rstrip }}
+
+
+
+ - severity
- how important the message is -
error, success, info string
+ - message
- user-readable message for the toast notification string
+
+
+
+
+
+
Error notification
+
+
+
+
+
+
Info notification
+
+
+
+
+
+
Success notification
+
+
+
+
+
+
+
+
+
+ Navigation
+
+ Pagination
+
+ {% liquid
+ render 'modules/common-styling/pagination', count: 20, active: 7, maxCount: 10
+ %}
+
+{% capture code %}{% raw %}
+render 'modules/common-styling/pagination', count: [total number of pages], active: [current page]
+{% endraw %}{% endcapture %}
+
+
{{ code | lstrip | rstrip }}
+
Popover
+
+
+
+
+ The quick brown fox jumps over the lazy dog
+
+
+
+ The quick brown fox jumps over the lazy dog
+
+{% endraw %}{% endcapture %}
+
+
{{ code | lstrip | rstrip }}
+
Popover menu
+
+
+
+
+
+
+
+
+
+{% endraw %}{% endcapture %}
+
+
{{ code | lstrip | rstrip }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ The quick brown fox jumps over the lazy dog
+
+
+
+
+
+
+ The quick brown fox jumps over the lazy dog
+
+
\ No newline at end of file
diff --git a/modules/common-styling/public/views/partials/content/card.liquid b/modules/common-styling/public/views/partials/content/card.liquid
new file mode 100644
index 0000000..d995b0c
--- /dev/null
+++ b/modules/common-styling/public/views/partials/content/card.liquid
@@ -0,0 +1,47 @@
+{% comment %}
+
+ content card with an image, title and a description
+
+ url - (string) where the card should link to
+ image - (object or URL) platformOS generated object with image versions or just an URL to specific image
+ title - (string) card title that will be linked
+ content - (string) card description
+ footer - (string) secondary related content
+
+ highlighted - (bool) should the card be distinguished among other cards
+
+{% endcomment %}
+
+
+
+
+
+ {% if url != blank %}
+
+ {% endif %}
+ {% if image.versions %}
+
+
+ 
+
+ {% elsif image %}
+
+ 
+
+ {% endif %}
+ {% if title %}
+ {{ title }}
+ {% endif %}
+ {% if url != blank %}
+
+ {% endif %}
+
+ {{ content | html_safe }}
+
+ {% if footer %}
+
+ {% endif %}
+
+
\ No newline at end of file
diff --git a/modules/common-styling/public/views/partials/forms/error_input_handler.liquid b/modules/common-styling/public/views/partials/forms/error_input_handler.liquid
new file mode 100644
index 0000000..4e830a5
--- /dev/null
+++ b/modules/common-styling/public/views/partials/forms/error_input_handler.liquid
@@ -0,0 +1,3 @@
+{% if errors %}
+ aria-invalid="true" aria-describedby="pos-form-{{ name }}-error"
+{% endif %}
\ No newline at end of file
diff --git a/modules/common-styling/public/views/partials/forms/error_list.liquid b/modules/common-styling/public/views/partials/forms/error_list.liquid
new file mode 100644
index 0000000..02f878d
--- /dev/null
+++ b/modules/common-styling/public/views/partials/forms/error_list.liquid
@@ -0,0 +1,7 @@
+{% if errors %}
+
+{% endif %}
\ No newline at end of file
diff --git a/modules/common-styling/public/views/partials/forms/hcaptcha.liquid b/modules/common-styling/public/views/partials/forms/hcaptcha.liquid
new file mode 100644
index 0000000..da174f8
--- /dev/null
+++ b/modules/common-styling/public/views/partials/forms/hcaptcha.liquid
@@ -0,0 +1,13 @@
+{% if context.constants.VERIFY_HCAPTCHA == "true" %}
+
+ {% elsif context.environment == 'staging' %}
+
+
+
+ {% endif %}
+
\ No newline at end of file
diff --git a/modules/common-styling/public/views/partials/forms/multiselect.liquid b/modules/common-styling/public/views/partials/forms/multiselect.liquid
new file mode 100644
index 0000000..c379c28
--- /dev/null
+++ b/modules/common-styling/public/views/partials/forms/multiselect.liquid
@@ -0,0 +1,94 @@
+{% comment %}
+ Multiselect input component
+
+ Arguments:
+ - id (string) unique ID of the input
+
+ - list (array, required) an array of objects with items to show, must include 'value' and 'label'
+ [ { value: 'item1value', label: 'Item 1 label' }, { value: 'item2value', label: 'Item 2 label' } ]
+ - selected (array) array with selected values (the same as in the 'list')
+ [ 'item2value' ]
+
+ - form (string) the