oro_stylebook:
    options: 'Options'
    main_content:
          sub_title_main: 'Oro StyleBook'
          sub_title_one: 'Color Coding'
          sub_title_two: 'UI Library Structure and Navigation'
          text_content: '<p>Oro StyleBook is a UI elements and components library that helps developers and designers use the recommended templates to build or customize the Oro application pages. The information in the UI library may be used in two different ways.</p><p style="padding-left:20px;"><i class="fas fa-caret-right"></i> <strong>When you modify your Oro application layout</strong>, you can copy the element`s source code to your custom form or page in the Oro application to preserve the overall look and feel consistency.<br><i class="fas fa-caret-right"></i> <strong>After you have modified your Oro application styles or layout</strong>, you can use the StyleBook to check how updated styles affect the UI elements (see <a href="https://doc.oroinc.com/frontend/storefront/css/">Oro Styles Architecture</a>,  <a href="https://doc.oroinc.com/frontend/storefront/css/assets-css/">Styles Organization</a>, and <a href="https://doc.oroinc.com/frontend/storefront/how-to/">Customization</a> for more information on the UI customization).</p>'
          text_content_first: 'For every UI element, library provides a short description, a source code sample that may be copied to reproduce a similar component, and a preview of the sample in the current UI theme. The following color-coding is used to simplify orientation in the library:<div class="style-book-group-element__description">The optional description of the UI element or design component may be highlighted with a red ribbon on the left.</div><div class="playground-source"><pre class="language-markup"><code class="style-book-group-element__code language-scss"><span class="token comment">// The code samples are marked with a blue ribbon.</span></code></pre></div><div class="style-book-group-element__preview">The UI element preview is rendered in a light-gray box.<br></div>'
          text_content_second: 'Most of the OroCommerce management console and storefront UI elements are included and grouped into the following categories: <br><p style="padding-left:20px;"><i class="fas fa-caret-right"></i> <a href="configs/">General Look and Feel</a><br><i class="fas fa-caret-right"></i> <a href="forms/">Form Elements</a><br><i class="fas fa-caret-right"></i> <a href="grid/">Grid Elements</a><br><i class="fas fa-caret-right"></i> <a href="jscomponents/">JS Components</a></p>Use the tabs at the top of the page to switch between the categories.<br>In the category, use the elements navigation tree on the left to jump to the element`s description, preview and code sample.'
    nav:
        title: Elements
        header_menu_title: Category
    groups:
        forms:
            title: 'Form Elements'
            content: 'This section provides a preview and code sample for every form element that is available out-of-the box in your Oro application. Preview is autogenerated and takes into account the current theme and layout configuration. The preview dynamically updates after you refresh the page and clear the Oro application cache.'
            form_text:
                title: Text Input
                one_line:
                    title: One-Line
                textarea:
                    title: Multi-line
                password:
                    title: Password
            form_datetime:
                title: Date and Time Picker
            form_select:
                title: Single Option Select
                drop_down:
                    title: Via Drop-Down
                checkbox:
                    title: Via Checkbox
                radio:
                    title: Via a Radio
                radio_list:
                    title: Via Radio List
            form_checkboxes:
                title: Multiple Option Select
                checkbox:
                    title: Via Checkbox
                drop_down:
                    title: Via Drop-Down
            buttons:
                title: Buttons
                default:
                    title: Default Button
                action:
                    title: Action Button
                info:
                    title: Info Button
                primary:
                    title: Primary Button
                link:
                    title: Link Button
                large_size:
                    title: Large Button (type 1, --large)
                size_l:
                    title: Large Button (type 2, --size-l)
                size_m:
                    title: Medium Button (--size-m)
                size_s:
                    title: Small Button (--size-s)
            buttons_group:
                title: Buttons Group
                drop_down_group:
                    title: Drop-Down Button Group
                inline_group:
                    title: Inline Icon Button Group
                inline_btn_group:
                    title: Horizontal Text Button Group
                inline_group_vertical:
                    title: Vertical Text Button Group
            notifications:
                title: Notifications
                error:
                    title: Error
                    description: 'The following code samples may be used to display notifications in a flash block. <br><br><strong>Error</strong>'
                success:
                    title: Success
                    description: '<strong>Success</strong>'
                warning:
                    title: Warning
                    description: '<strong>Warning</strong>'
            notification_message:
                title: Notification Message
                error:
                    title: Error
                    description: 'The following code samples may be used to display notification messages in the UI. <br><br><strong>Error</strong>'
                warning:
                    title: Warning
                    description: '<strong>Warning</strong>'
                success:
                    title: Success
                    description: '<strong>Success</strong>'

        jscomponent:
            title: 'JS Components'
            content: '<p>This section lists main javascript components that are available out-of-the box in your Oro application. <br> 1. Customize generic parts of the component in the CONFIG tab. <br> 2. Test your customized component in the preview sandbox. <br> 3. Copy the html and/or js code sample of what you have configured from the How to add in HTML/JS? tabs. <br> <br> Note: Preview is autogenerated and takes into account current theme and layout configuration. The preview dynamically updates after you refresh the page and clear the Oro application cache.</p>'
            tabs:
                howtouse:
                    config: 'Config'
                    html: 'How to add in HTML?'
                    js: 'How to add in JS?'
                    mediator: 'Use with mediator'
                mediator:
                    common: 'Common'
                    grid: 'Grid'
                    message: 'Message'            
            modal:
                title: 'Modal'
                description: 'The modal component helps you configure the modal dialog UI view and behavior. This component is recommended for the short messages and alerts that require a user to explicitly confirm the action. For a preview, configure the dialog in the Config tab and click the Open Modal button to see it in action.'
            datagrid:
                title: 'Datagrid'
                description: 'The datagrid helps you embed the datagrid with related controls (filters, view configuration, line and mass actions) in the custom location in Oro application. For more information, see the <a href="https://github.com/oroinc/platform/blob/master/src/Oro/Bundle/DataGridBundle/Resources/doc/frontend/datagrid.md">Oro bundle documentation</a>.'
            loading_mask:
                title: 'Loading Mask'
                description: 'With this JS component, you can preview the Loading mask for the inline element and a full-page loading. Test the hideDelay option by changing the value and clicking Toggle Loading or Execute full-page loading. For more information, see the <a href="https://github.com/oroinc/platform/blob/master/src/Oro/Bundle/UIBundle/Resources/doc/reference/client-side/loading-mask-view.md">Oro bundle documentation</a>.'
            dialog_widget:
                title: 'Dialog Widget'
                description: 'The dialog widget provides more flexible configuration of the pop-up panel. You can optionally make the dialog modal to restrict interaction with the background page while the dialog is open. You can  control the text shown in the dialog, and the size.'
            collapse_widgets:
                title: 'Collapse Widgets'
                description: 'The collapse widget toggles the content visibility of the content.'
                definition: 'The collapse is base on bootstrap collapse. Options can be passed via data attributes or JavaScript. More details are available at <a href="https://getbootstrap.com/docs/4.6/components/collapse/">Bootstrap Collapse</a>.'
                options:
                    name: 'Name'
                    type: 'Type'
                    default: 'Default'
                    description: 'Description'
                    selector: 'selector'
                    boolean: 'boolean'
                    string: 'string'
                    parent: 'If parent is provided, then all collapsible elements will work as accordion.'
                    toggle: 'Toggles the collapsible element on initialization.'
                    stateId: 'The unique key wil be used to save the collapse state to the Local Storage.'
                    checkOverflow: 'If turned on, the trigger element will be shown only if the collapsible element overflows its bounds horizontally.<br>Requires adding <span class="bold">"collapse-overflow"</span> class to the collapsible element.'
                    hideClass: 'An extra class will be added to the collapsible element if it is <span class="bold">hidden</span>.'
                    showClass: 'An extra class will be added to the collapsible element if it is <span class="bold">visible</span>.'
                    triggerHideClass: 'An extra class will be added to the trigger element if the collapsible one is <span class="bold">hidden</span>.'
                    triggerShowClass: 'An extra class will be added to the trigger element if the collapsible one is <span class="bold">visible</span>.<br>Requires adding the <span class="bold">"data-icon"</span> attribute by an icon element.'
                    triggerIconHideClass: 'An extra class will be added to the trigger icon element if the collapsible one is <span class="bold">hidden</span>.<br>Requires adding the <span class="bold">"data-icon"</span> attribute by an icon element.'
                    triggerIconShowClass: 'An extra class will be added to the trigger icon element if the collapsible one is <span class="bold">visible</span>.'
                    collapsedTitle: 'The provided value will be used as a <span class="bold">"title"</span> attribute of the trigger element if the collapsible one is <span class="bold">hidden</span>.'
                    expandedTitle: 'The provided value will be used as a <span class="bold">"title"</span> attribute of the trigger element if the collapsible one is <span class="bold">visible</span>.'
                    collapsedAriaLabel: 'The provided value will be used as a <span class="bold">"aria-label"</span> attribute of the trigger element if the collapsible one is <span class="bold">hidden</span>.'
                    expandedAriaLabel: 'The provided value will be used as a <span class="bold">"aria-label"</span> attribute of the trigger element if the collapsible one is <span class="bold">visible</span>.'
                    collapsedText: 'The provided value will be used as a <span class="bold">"tex"</span> for the trigger element if the collapsible one is <span class="bold">hidden</span>.<br>Requires wrapping the text by an element with a <span class="bold">"data-text"</span> attribute.'
                    expandedText: 'The provided value will be used as a <span class="bold">"tex"</span> for the trigger element if the collapsible one is <span class="bold">visible</span>.<br>Requires wrapping the text by an element with a  <span class="bold">"data-text"</span> attribute.'
                simple:
                    title: 'Simple Collapse'
                simple_hide_trigger:
                    title: 'Hide Trigger element'
                overflow:
                    title: 'Overflow Collapse'
                dynamic:
                    title: 'Dynamic Collapse'
                    description: 'The collapse may be initialized programmatically depending on use case. For example determined by the viewport.'
                accordion:
                    title: 'Accordion'
            fullscreen_popup_view:
                title: 'Fullscreen Popup View'
                description: 'The fullscreen popup view helps you show the rendered html content, view, and selector in a fullscreen pop-up. The page header renders with an icon specified as a `popupIcon`, the `popupLabel` as a title, and the Close button. The `contentTemplate` may contain raw html that you would expect inside the body tag.'
            scroll_view:
                title: 'Scroll View'
                description: 'Preview of the horizontal and vertical scroll.'
            scroll_shadow_view:
                title: 'Scroll Shadow View'
                description: 'Adds a fade to the top and bottom of the scrollbox to hint at more content. It dynamically disappears when you reach the bottom of the list.<br>Requires to have <code class="language-html">data-scroll-target</code> attribute on itself or its children to which scroll hints will be applied.'
            googlemaps_view:
                title: 'Google Map View'
                description: 'Preview of the Google Map embedded into the Oro application content. Note: The valid API key is necessary for the preview to render. Ensure you have generated and provided the Google API key in the <a href="https://doc.oroinc.com/user/back-office/system/configuration/system/integrations/google-integration-settings/">Google integartion settings</a> in Oro application configuration.'
            list_slider:
                title: 'List Slider Component'
                description: 'The promo image slider helps you embed and configure the responsive carousel in the Oro application. It the carousel you may display a set of blocks with html content (e.g. images, landing pages, banners).'
            dom_relocation:
                title: 'DOM Relocation View'
                description: 'DOM relocation view helps you move the DOM element between containers when the browser window is resized. For example, you can move the menu from the top into the hamburger menu. For more information, see the <a href="https://github.com/oroinc/customer-portal/blob/master/src/Oro/Bundle/FrontendBundle/Resources/doc/components/dom-relocation-view.md">Oro bundle documentation</a>.'
            sticky_panel_view:
                title: 'Sticky Panel View'
                description: 'The sticky panel helps you pin the content block to the top of the page whenever it moves outside the visible area. Click the button to preview the sticky effect. For more information, see the <a href="https://github.com/oroinc/customer-portal/blob/master/src/Oro/Bundle/FrontendBundle/Resources/doc/components/sticky-panel-view.md">Oro bundle documentation</a>'
                button:
                    sticky_on: 'Disable sticky mode'
                    sticky_off: 'Enable sticky mode'
            mediator:
                title: 'Mediator'
                description: 'This section previews the existing mediators. The mediators are handlers for event triggers that help inform the related processes of the changes or the events. For more information, see the <a href="https://github.com/oroinc/platform/blob/master/src/Oro/Bundle/UIBundle/Resources/doc/reference/mediator-handlers.md">Oro bundle documentation</a>'
            popup_gallery:
                title: 'Popup Gallery Widget'
                description: 'The popup gallery widget helps you display the set of images as a gallery. See <a href="https://doc.oroinc.com/user/back-office/system/configuration/commerce/product/global-product-images/#image-gallery">image gallery configuration</a> as a sample use case.'
            viewport_manager:
                title: 'Viewport Manager'
                description: 'The viewport manager previews available screen types that can be used in Oro application styles. For more information, see the <a href="https://github.com/oroinc/platform/blob/master/src/Oro/Bundle/UIBundle/Resources/doc/reference/client-side/viewport-manager.md">Oro bundle documentation</a>.'
            lazy_init:
                title: 'Lazy Init View'
                description: 'With lazy init view, you can postpone the content loading until it reaches the visible area.'
            zoom_widget:
                title: 'Zoom Widget'
                description: 'The zoom widget helps you embed the image and the zoomed preview next to the image.'
            input_widgets:
                title: 'Input Widgets'
                number:
                    title: 'Input Number Widget'
                    description: 'The input number widget captures the positive numbers in a mobile-friendly way via the numeric on-screen keyboard.'
                select2:
                    title: 'Select2 Widget'
                    description: 'The select2 widget helps you embed the select2 boxes to enable flexible and user-frienldy controls for chosing from multiple options.'
        grid:
            title: 'Grid Elements'
            content: 'This section provides a preview and code sample for every UI element that is available out-of-the box in your Oro application. When UI and layout customization affects these elements, the preview dynamically updates after you refresh the page and clear the Oro application cache.'
            text_content: 'This section provides a preview and code sample for every UI element that is available out-of-the box in your Oro application.'
            text_content_first: 'When UI and layout customization affects these elements, the preview dynamically updates after you refresh the page and clear the Oro application cache.'
            how_it_works:
                title: How it works
                description: 'A grid or table may contain up to 12 columns. Every column is designed using <code class="language-html">&lt;div&gt;</code> element that takes proportional share of the screen in the desktop view and stretches to occupy the 100% width of the screen in mobile view. You can control relative width of the columns (like in 1/X) using <code class="language-html">grid-col-X</code> prefix. <br>The schematic wireframe samples below illustrate how OroCommerce with your active theme aligns the cells in the row and the text inside the cells depending on the number of the columns.'
            grid_gap:
                title: Grid gap
                description: 'To control a spare space between the columns and the rows, you can use the <code class="language-html">$grid-gap</code> scss variable that modifies vertical or horizontal spaces between items globally. Also you can use css-variable <code class="language-html">--grid-gap</code> for local spaces modification.'
            columns:
                title: Columns
                three_columns:
                    title: Three columns
                    description: 'Three equal-width columns can be created by using the <code class="language-html">.grid-col-4</code> class.'
                columns_count:
                    title: Columns count
                    description: 'By default grid provide a 12-column grid template, but developer can change this value globally via the <code class="language-html">$grid-column-count</code> scss variable. Also can be override column count with css-variable <code class="language-html">--grid-column-count</code> locally'
            starts:
                title: Starts
                description: 'The start classes aim to provide additional offset between grid items, but they are not the same as margin. CSS Grid creates a grid template through styles. The start classes tell the browser which column the grid item should start from. For that developer can use special classes like <code class="language-html">.grid-start-x</code>'
            template:
                title: Grid column template
                description: 'For implement custom grid column proportions you need to use the <code class="language-html">$grid-template-columns</code> scss variable or css variable <code class="language-html">--grid-template-columns</code> to override template locally'
            alignment:
                title: Alignment
                description: 'Use speciall classes to align grid items. With <code class="language-html">.grid-place-content-%align%</code> or <code class="language-html">.grid-place-items-%align%</code> class you can align all items in a grid and with <code class="language-html">.grid-place-self-%align%</code> class on a specific item you can set alignment for this item'
            responsive:
                title: Responsive
                description: 'Use responsive classes to adjust grid layout across viewports. With <code class="language-html">.grid-col-%breakpoint%-X</code> class you can set column span for specific viewport.'
        tiles:
            title: 'Tiles'
            description: 'The tiles system is designed for simple tasks where you need to build a responsive grid with similar items. There are several css variables to control the parameters of tiles. Use <code class="language-html">--tiles-column-count</code> to control the number of tiles in a row. There are also two variables to control the indentation between tiles: <code class="language-html">--tiles-row-gap</code> and <code class="language-html">--tiles-column-gap</code>'
        configs:
            title: 'General Look and Feel'
            content: 'This section provides a preview and code sample for every UI element that is available out-of-the box in your Oro application.'
            colors:
                title: Colors
                description: 'To use color for some element you should use <code class="language-markup">get-color</code> function. Example and usage of this function are described in <strong>Functions</strong> section. The example of using a certain color in the code is given under every color preview.'
            typography:
                title: Typography
                description: 'This section provides a preview for the text-based elements with the existing typography properties applied. The following settings apply to all text elements: <code class="language-markup">font-family: $base-font</code>, <code class="language-markup">font-size: $base-font-size</code>, and <code class="language-markup">line-height: $base-line-height</code>. The iconic font (<code class="language-markup">font-family: $icon-font</code>) is used for rendering graphic elements, like icons. The default and recommended parameters are shown in the preview.'
            custom_fonts:
                title: Custom fonts
                description: 'This section describe how add custom fonts to your application. You can use Google fonts import or import local fonts, which use <code class="language-markup">@font-face</code> mixin'
            headings:
                title: Headings
                description: 'Global config for all headings'
            sizes:
                title: Sizes
                description: 'This section provides a preview of the scss properties related to the common screen sizes and offsets used in Oro application.'
            functions:
                title: Functions
                description: 'This section provides a preview of the scss functions that may be used in Oro application styles.'
            mixins:
                title: Mixins
                description: 'SCSS mixins group reusable css properties that may be applied to multiple css selectors (classes or ids) via the @include mixin_name() directive.'
            animation:
                title: Animation
                description: 'Add one of the following classes to the element you want to animate: <code class="language-markup">fade-in</code>, <code class="language-markup">fade-out</code>, <code class="language-markup">fade-in-down</code>, <code class="language-markup">fade-in-up</code>, <code class="language-markup">slide-in-down</code>, <code class="language-markup">slide-in-up</code>'

            text_typography_font: '$base-font:'
            text_typography_font_minor: '$base-font-minor:'
            text_typography_font_icons: '$icon-font:'
            text_typography_font_icons_custom: '$base-font-icon:'
            text_typography_line_height: '$base-line-height:'
            text_typography_root: '$root-font-size'
            text_typography_base: '$base-font-size'
            text_typography_base_s: '$base-font-size--s'
            text_typography_base_m: '$base-font-size--m'
            text_typography_base_l: '$base-font-size--l'
            text_typography_base_large: '$base-font-size--large'
