fix(block-section): added rtl check and css

* Added rtl class to block-section. (#957) * Update demo heading.
Esri · May 7, 2020 · 13483a8 · 13483a8
1 parent 4784404
commit 13483a8
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/src/components/calcite-block-section/calcite-block-section.tsx b/src/components/calcite-block-section/calcite-block-section.tsx
@@ -1,6 +1,7 @@
 import { Component, Element, Event, EventEmitter, Prop, h, VNode } from "@stencil/core";
 
 import { getElementDir } from "../utils/dom";
+import { CSS_UTILITY } from "../utils/resources";
 import { CSS, ICONS, TEXT } from "./resources";
 import { guid } from "../utils/guid";
 import { CalciteBlockSectionToggleDisplay } from "../interfaces";
@@ -167,7 +168,7 @@ export class CalciteBlockSection {
       );
 
     return (
-      <section aria-expanded={open.toString()}>
+      <section aria-expanded={open.toString()} class={dir ? CSS_UTILITY.rtl : null}>
         {headerNode}
         <div class={CSS.content} hidden={!open}>
           <slot />

diff --git a/src/demos/block/basic.html b/src/demos/block/basic.html
@@ -90,6 +90,18 @@ <h3>Header + content (collapsible)</h3>
               <img alt="demo" src="https://placeimg.com/640/480/nature" />
             </calcite-block-section>
           </calcite-block>
+
+          <h3>Header + content (sections w/ switch)</h3>
+
+          <calcite-block heading="Heading" summary="summary" open collapsible>
+            <calcite-block-section text="Animals" open toggle-display="switch">
+              <img alt="demo" src="https://placeimg.com/640/480/animals" />
+            </calcite-block-section>
+
+            <calcite-block-section text="Nature" open toggle-display="switch">
+              <img alt="demo" src="https://placeimg.com/640/480/nature" />
+            </calcite-block-section>
+          </calcite-block>
         </section>
       </section>
     </main>