Init

1 files changed, 224 insertions, 0 deletions

diff --git a/test/bem/_examples.scss b/test/bem/_examples.scss
new file mode 100644
index 0000000..243ee35
--- /dev/null
+++ b/test/bem/_examples.scss
@@ -0,0 +1,224 @@
+// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations no-empty-rulesets
+
+//
+// Included test cases:
+//  - /// 1 /// - Media object
+//  - /// 2 /// - Tabs
+/// - /// 3 /// - Accordion
+//
+
+@include it('Examples') {
+    @include assert('Media object') { /// 1 ///
+        @include output {
+            @include iro-bem-object('media') {
+                display:         flex;
+                align-items:     flex-start;
+                justify-content: flex-start;
+
+                @include iro-bem-element('image') {
+                    display:  block;
+                    flex:     0 0 auto;
+                    order:    1;
+                    overflow: hidden;
+                }
+
+                @include iro-bem-element('body') {
+                    order: 2;
+                }
+
+                @include iro-bem-modifier('rtl') {
+                    justify-content: flex-end;
+
+                    @include iro-bem-element('image') {
+                        order: 2;
+                    }
+
+                    @include iro-bem-element('body') {
+                        order: 1;
+                    }
+                }
+            }
+        }
+
+        @include expect {
+            .o-media {
+                display:         flex;
+                align-items:     flex-start;
+                justify-content: flex-start;
+            }
+
+            .o-media__image {
+                display:  block;
+                flex:     0 0 auto;
+                order:    1;
+                overflow: hidden;
+            }
+
+            .o-media__body {
+                order: 2;
+            }
+
+            .o-media--rtl {
+                justify-content: flex-end;
+
+                .o-media__image {
+                    order: 2;
+                }
+
+                .o-media__body {
+                    order: 1;
+                }
+            }
+        }
+    }
+
+    @include assert('Tabs') { /// 2 ///
+        @include output {
+            @include iro-bem-component('tabs') {
+                position: relative;
+
+                @include iro-bem-element('tab') {
+                    float: left;
+                }
+
+                @include iro-bem-element('tabRadio') {
+                    position: absolute;
+                    top:      -9999px;
+                    left:     -9999px;
+
+                    &:checked {
+                        @include iro-bem-sibling-element('tabLabel') {
+                            font-weight: bold;
+                        }
+
+                        @include iro-bem-sibling-element('tabContent') {
+                            display: block;
+                        }
+                    }
+                }
+
+                @include iro-bem-element('tabLabel') {
+                    cursor: pointer;
+
+                    &:hover,
+                    &:active {
+                        text-decoration: underline;
+                    }
+                }
+
+                @include iro-bem-element('tabContent') {
+                    position: absolute;
+                    left:     0;
+                    display:  none;
+                }
+            }
+        }
+
+        @include expect {
+            .c-tabs {
+                position: relative;
+            }
+
+            .c-tabs__tab {
+                float: left;
+            }
+
+            .c-tabs__tabRadio {
+                position: absolute;
+                top:      -9999px;
+                left:     -9999px;
+            }
+
+            .c-tabs__tabRadio:checked ~ .c-tabs__tabLabel {
+                font-weight: bold;
+            }
+
+            .c-tabs__tabRadio:checked ~ .c-tabs__tabContent {
+                display: block;
+            }
+
+            .c-tabs__tabLabel {
+                cursor: pointer;
+            }
+
+            .c-tabs__tabLabel:hover,
+            .c-tabs__tabLabel:active {
+                text-decoration: underline;
+            }
+
+            .c-tabs__tabContent {
+                position: absolute;
+                left:     0;
+                display:  none;
+            }
+        }
+    }
+
+    @include assert('Accordion') { /// 3 ///
+        @include output {
+            @include iro-bem-component('accordion') {
+                @include iro-bem-element('section') {
+                    // nothing to do
+                }
+
+                @include iro-bem-element('sectionCheckbox') {
+                    position: absolute;
+                    top:      -9999px;
+                    left:     -9999px;
+
+                    &:checked {
+                        @include iro-bem-sibling-element('sectionLabel') {
+                            font-weight: bold;
+                        }
+
+                        @include iro-bem-sibling-element('sectionContent') {
+                            display: block;
+                        }
+                    }
+                }
+
+                @include iro-bem-element('sectionLabel') {
+                    cursor: pointer;
+
+                    &:hover,
+                    &:active {
+                        text-decoration: underline;
+                    }
+                }
+
+                @include iro-bem-element('sectionContent') {
+                    display: none;
+                }
+            }
+        }
+
+        @include expect {
+            .c-accordion__sectionCheckbox {
+                position: absolute;
+                top:      -9999px;
+                left:     -9999px;
+            }
+
+            .c-accordion__sectionCheckbox:checked ~ .c-accordion__sectionLabel {
+                font-weight: bold;
+            }
+
+            .c-accordion__sectionCheckbox:checked ~ .c-accordion__sectionContent {
+                display: block;
+            }
+
+            .c-accordion__sectionLabel {
+                cursor: pointer;
+            }
+
+            .c-accordion__sectionLabel:hover,
+            .c-accordion__sectionLabel:active {
+                text-decoration: underline;
+            }
+
+            .c-accordion__sectionContent {
+                display:  none;
+            }
+        }
+    }
+}