@fluentui/web-components 2.5.12 → 3.0.0-alpha.10

package/dist/esm/tree-item/tree-item.styles.js

@@ -1,227 +0,0 @@
-import { css, cssPartial } from '@microsoft/fast-element';
-import { DesignToken, disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { SystemColors } from '@microsoft/fast-web-utilities';
-import { DirectionalStyleSheetBehavior, heightNumber } from '../styles/index';
-import { accentFillRest, baseHeightMultiplier, bodyFont, controlCornerRadius, density, designUnit, disabledOpacity, focusStrokeWidth, neutralFillSecondaryRecipe, neutralFillSecondaryRest, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRecipe, neutralFillStealthRest, neutralForegroundRest, strokeWidth, } from '../design-tokens';
-import { typeRampBase } from '../styles/patterns/type-ramp';
-import { focusTreatmentBase } from '../styles/focus';
-const ltr = css `
-  .expand-collapse-button svg {
-    transform: rotate(0deg);
-  }
-  :host(.nested) .expand-collapse-button {
-    left: var(--expand-collapse-button-nested-width, calc(${heightNumber} * -1px));
-  }
-  :host([selected])::after {
-    left: calc(${focusStrokeWidth} * 1px);
-  }
-  :host([expanded]) > .positioning-region .expand-collapse-button svg {
-    transform: rotate(90deg);
-  }
-`;
-const rtl = css `
-  .expand-collapse-button svg {
-    transform: rotate(180deg);
-  }
-  :host(.nested) .expand-collapse-button {
-    right: var(--expand-collapse-button-nested-width, calc(${heightNumber} * -1px));
-  }
-  :host([selected])::after {
-    right: calc(${focusStrokeWidth} * 1px);
-  }
-  :host([expanded]) > .positioning-region .expand-collapse-button svg {
-    transform: rotate(90deg);
-  }
-`;
-export const expandCollapseButtonSize = cssPartial `((${baseHeightMultiplier} / 2) * ${designUnit}) + ((${designUnit} * ${density}) / 2)`;
-const expandCollapseHover = DesignToken.create('tree-item-expand-collapse-hover').withDefault((target) => {
-    const recipe = neutralFillStealthRecipe.getValueFor(target);
-    return recipe.evaluate(target, recipe.evaluate(target).hover).hover;
-});
-const selectedExpandCollapseHover = DesignToken.create('tree-item-expand-collapse-selected-hover').withDefault((target) => {
-    const baseRecipe = neutralFillSecondaryRecipe.getValueFor(target);
-    const buttonRecipe = neutralFillStealthRecipe.getValueFor(target);
-    return buttonRecipe.evaluate(target, baseRecipe.evaluate(target).rest).hover;
-});
-export const treeItemStyles = (context, definition) => css `
-    ${display('block')} :host {
-      contain: content;
-      position: relative;
-      outline: none;
-      color: ${neutralForegroundRest};
-      fill: currentcolor;
-      cursor: pointer;
-      font-family: ${bodyFont};
-      --expand-collapse-button-size: calc(${heightNumber} * 1px);
-      --tree-item-nested-width: 0;
-    }
-
-    .positioning-region {
-      display: flex;
-      position: relative;
-      box-sizing: border-box;
-      background: ${neutralFillStealthRest};
-      border: calc(${strokeWidth} * 1px) solid transparent;
-      border-radius: calc(${controlCornerRadius} * 1px);
-      height: calc((${heightNumber} + 1) * 1px);
-    }
-
-    :host(:${focusVisible}) .positioning-region {
-      ${focusTreatmentBase}
-    }
-
-    .positioning-region::before {
-      content: '';
-      display: block;
-      width: var(--tree-item-nested-width);
-      flex-shrink: 0;
-    }
-
-    :host(:not([disabled])) .positioning-region:hover {
-      background: ${neutralFillStealthHover};
-    }
-
-    :host(:not([disabled])) .positioning-region:active {
-      background: ${neutralFillStealthActive};
-    }
-
-    .content-region {
-      display: inline-flex;
-      align-items: center;
-      white-space: nowrap;
-      width: 100%;
-      height: calc(${heightNumber} * 1px);
-      margin-inline-start: calc(${designUnit} * 2px + 8px);
-      ${typeRampBase}
-    }
-
-    .items {
-      display: none;
-      ${
-/* Font size should be based off calc(1em + (design-unit + glyph-size-number) * 1px) -
-    update when density story is figured out */ ''} font-size: calc(1em + (${designUnit} + 16) * 1px);
-    }
-
-    .expand-collapse-button {
-      background: none;
-      border: none;
-      border-radius: calc(${controlCornerRadius} * 1px);
-      ${
-/* Width and Height should be based off calc(glyph-size-number + (design-unit * 4) * 1px) -
-    update when density story is figured out */ ''} width: calc((${expandCollapseButtonSize} + (${designUnit} * 2)) * 1px);
-      height: calc((${expandCollapseButtonSize} + (${designUnit} * 2)) * 1px);
-      padding: 0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      cursor: pointer;
-      margin: 0 6px;
-    }
-
-    .expand-collapse-button svg {
-      transition: transform 0.1s linear;
-      pointer-events: none;
-    }
-
-    .start,
-    .end {
-      display: flex;
-    }
-
-    .start {
-      ${
-/* need to swap out once we understand how horizontalSpacing will work */ ''} margin-inline-end: calc(${designUnit} * 2px + 2px);
-    }
-
-    .end {
-      ${
-/* need to swap out once we understand how horizontalSpacing will work */ ''} margin-inline-start: calc(${designUnit} * 2px + 2px);
-    }
-
-    :host(.expanded) > .items {
-      display: block;
-    }
-
-    :host([disabled]) {
-      opacity: ${disabledOpacity};
-      cursor: ${disabledCursor};
-    }
-
-    :host(.nested) .content-region {
-      position: relative;
-      margin-inline-start: var(--expand-collapse-button-size);
-    }
-
-    :host(.nested) .expand-collapse-button {
-      position: absolute;
-    }
-
-    :host(.nested) .expand-collapse-button:hover {
-      background: ${expandCollapseHover};
-    }
-
-    :host(:not([disabled])[selected]) .positioning-region {
-      background: ${neutralFillSecondaryRest};
-    }
-
-    :host(:not([disabled])[selected]) .expand-collapse-button:hover {
-      background: ${selectedExpandCollapseHover};
-    }
-
-    :host([selected])::after {
-      content: '';
-      display: block;
-      position: absolute;
-      top: calc((${heightNumber} / 4) * 1px);
-      width: 3px;
-      height: calc((${heightNumber} / 2) * 1px);
-      ${
-/* The french fry background needs to be calculated based on the selected background state for this control.
-    We currently have no way of changing that, so setting to accent-foreground-rest for the time being */ ''} background: ${accentFillRest};
-      border-radius: calc(${controlCornerRadius} * 1px);
-    }
-
-    ::slotted(fluent-tree-item) {
-      --tree-item-nested-width: 1em;
-      --expand-collapse-button-nested-width: calc(${heightNumber} * -1px);
-    }
-  `.withBehaviors(new DirectionalStyleSheetBehavior(ltr, rtl), forcedColorsStylesheetBehavior(css `
-        :host {
-          color: ${SystemColors.ButtonText};
-        }
-        .positioning-region {
-          border-color: ${SystemColors.ButtonFace};
-          background: ${SystemColors.ButtonFace};
-        }
-        :host(:not([disabled])) .positioning-region:hover,
-        :host(:not([disabled])) .positioning-region:active,
-        :host(:not([disabled])[selected]) .positioning-region {
-          background: ${SystemColors.Highlight};
-        }
-        :host .positioning-region:hover .content-region,
-        :host([selected]) .positioning-region .content-region {
-          forced-color-adjust: none;
-          color: ${SystemColors.HighlightText};
-        }
-        :host([disabled][selected]) .positioning-region .content-region {
-          color: ${SystemColors.GrayText};
-        }
-        :host([selected])::after {
-          background: ${SystemColors.HighlightText};
-        }
-        :host(:${focusVisible}) .positioning-region {
-          forced-color-adjust: none;
-          outline-color: ${SystemColors.ButtonFace};
-        }
-        :host([disabled]),
-        :host([disabled]) .content-region,
-        :host([disabled]) .positioning-region:hover .content-region {
-          opacity: 1;
-          color: ${SystemColors.GrayText};
-        }
-        :host(.nested) .expand-collapse-button:hover,
-        :host(:not([disabled])[selected]) .expand-collapse-button:hover {
-          background: ${SystemColors.ButtonFace};
-          fill: ${SystemColors.ButtonText};
-        }
-      `));

package/dist/esm/tree-item/tree-item.vscode.definition.json

@@ -1,63 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-tree-item",
-            "title": "Tree item",
-            "description": "The Fluent UI tree item element",
-            "attributes": [
-                {
-                    "name": "expanded",
-                    "title": "Expanded",
-                    "description": "Whether tree item is expanded or not",
-                    "default": false,
-                    "required": false,
-                    "type": "boolean"
-                },
-                {
-                    "name": "selected",
-                    "title": "Selected",
-                    "description": "Whether tree item is selected or not",
-                    "default": false,
-                    "required": false,
-                    "type": "boolean"
-                },
-                {
-                    "name": "disabled",
-                    "title": "Disabled",
-                    "description": "Sets the disabled state of the tree item",
-                    "type": "boolean",
-                    "default": false,
-                    "required": false
-                }
-            ],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot",
-                    "description": "The visual label of the tree item"
-                },
-                {
-                    "name": "item",
-                    "title": "Item slot",
-                    "description": "Nested fluent-tree-item elements automatically apply a slot of item for an intuitive API"
-                },
-                {
-                    "name": "expand-collapse-glyph",
-                    "title": "Expand collapse glyph slot",
-                    "description": "Slot to provide a custom visual to represent the expanded and collapsed states"
-                },
-                {
-                    "name": "start",
-                    "title": "Start slot",
-                    "description": "Contents of the start slot are positioned after the expand/collapse glyph and before the item content"
-                },
-                {
-                    "name": "end",
-                    "title": "End slot",
-                    "description": "Contents of the end slot are positioned after the item content"
-                }
-            ]
-        }
-    ]
-}

package/dist/esm/tree-view/index.js

@@ -1,27 +0,0 @@
-import { treeViewTemplate as template, TreeView } from '@microsoft/fast-foundation';
-import { treeViewStyles as styles } from './tree-view.styles';
-/**
- * The Fluent tree view Custom Element. Implements, {@link @microsoft/fast-foundation#TreeView}
- * {@link @microsoft/fast-foundation#treeViewTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-tree-view\>
- *
- */
-export const fluentTreeView = TreeView.compose({
-    baseName: 'tree-view',
-    template,
-    styles,
-});
-/**
- * Styles for TreeView
- * @public
- */
-export const treeViewStyles = styles;
-/**
- * Tree View base class
- * @public
- */
-export { TreeView };

package/dist/esm/tree-view/tree-view.stories.js

@@ -1,99 +0,0 @@
-import { fluentTreeView } from './index';
-export default {
-    title: 'Components/Tree View',
-    component: fluentTreeView,
-    argTypes: {
-        renderCollapsedNodes: {
-            control: { type: 'boolean' },
-        },
-    },
-};
-const TreeViewTemplate = ({ renderCollapsedNodes }) => `
-<style>
-div.docs-story>div:first-child {
-  height: 26em !important;
-}
-</style>
-<fluent-tree-view
-  ${renderCollapsedNodes ? `render-collapsed-nodes="${renderCollapsedNodes}` : ''}
-">
-  <fluent-tree-item>
-    Root item 1
-    <fluent-tree-item>
-      Root item 1
-      <fluent-tree-item>
-        Flowers
-        <fluent-tree-item disabled>Daisy</fluent-tree-item>
-        <fluent-tree-item>
-          Sunflower
-          <svg slot="start" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M12 5.5a1 1 0 100 2 1 1 0 000-2zm-5 1a1 1 0 112 0 1 1 0 01-2 0zm3.5-4a.5.5 0 00-1 0V3h-3C5.67 3 5 3.67 5 4.5v4c0 .83.67 1.5 1.5 1.5h7c.83 0 1.5-.67 1.5-1.5v-4c0-.83-.67-1.5-1.5-1.5h-3v-.5zM6.5 4h7c.28 0 .5.22.5.5v4a.5.5 0 01-.5.5h-7a.5.5 0 01-.5-.5v-4c0-.28.22-.5.5-.5zm3.75 14c2.62-.04 4.2-.6 5.12-1.44A3.52 3.52 0 0016.5 14h.01v-.69c0-1-.81-1.8-1.8-1.8h-3.2v-.01H5.3c-.99 0-1.8.81-1.8 1.81v.7c.04.77.25 1.75 1.13 2.55.93.84 2.5 1.4 5.12 1.44h.5zm-4.94-5.5h9.38c.45 0 .81.37.81.81v.44c0 .69-.13 1.46-.8 2.07C14 16.45 12.66 17 10 17s-4.01-.55-4.7-1.18a2.63 2.63 0 01-.8-2.07v-.44c0-.44.36-.8.8-.8z"
-            />
-          </svg>
-          <svg slot="end" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M12 5.5a1 1 0 100 2 1 1 0 000-2zm-5 1a1 1 0 112 0 1 1 0 01-2 0zm3.5-4a.5.5 0 00-1 0V3h-3C5.67 3 5 3.67 5 4.5v4c0 .83.67 1.5 1.5 1.5h7c.83 0 1.5-.67 1.5-1.5v-4c0-.83-.67-1.5-1.5-1.5h-3v-.5zM6.5 4h7c.28 0 .5.22.5.5v4a.5.5 0 01-.5.5h-7a.5.5 0 01-.5-.5v-4c0-.28.22-.5.5-.5zm3.75 14c2.62-.04 4.2-.6 5.12-1.44A3.52 3.52 0 0016.5 14h.01v-.69c0-1-.81-1.8-1.8-1.8h-3.2v-.01H5.3c-.99 0-1.8.81-1.8 1.81v.7c.04.77.25 1.75 1.13 2.55.93.84 2.5 1.4 5.12 1.44h.5zm-4.94-5.5h9.38c.45 0 .81.37.81.81v.44c0 .69-.13 1.46-.8 2.07C14 16.45 12.66 17 10 17s-4.01-.55-4.7-1.18a2.63 2.63 0 01-.8-2.07v-.44c0-.44.36-.8.8-.8z"
-            />
-          </svg>
-        </fluent-tree-item>
-        <fluent-tree-item>Rose</fluent-tree-item>
-      </fluent-tree-item>
-      <fluent-tree-item>Nested item 2</fluent-tree-item>
-      <fluent-tree-item>Nested item 3</fluent-tree-item>
-    </fluent-tree-item>
-    <fluent-tree-item>Nested item 2</fluent-tree-item>
-    <fluent-tree-item>Nested item 3</fluent-tree-item>
-  </fluent-tree-item>
-  <fluent-tree-item>
-    Root item 2
-    <fluent-divider></fluent-divider>
-    <fluent-tree-item>
-      Flowers
-      <fluent-tree-item disabled>Daisy</fluent-tree-item>
-      <fluent-tree-item>Sunflower</fluent-tree-item>
-      <fluent-tree-item>Rose</fluent-tree-item>
-    </fluent-tree-item>
-    <fluent-tree-item>Nested item 2</fluent-tree-item>
-    <fluent-tree-item>Nested item 3</fluent-tree-item>
-  </fluent-tree-item>
-  <fluent-tree-item> Root item 3 - Leaf Erikson </fluent-tree-item>
-</fluent-tree-view>`;
-export const TreeView = TreeViewTemplate.bind({});
-TreeView.args = {
-    renderCollapsedNodes: false,
-};
-const example = `
-<fluent-tree-view>
-  <fluent-tree-item>
-    Root item 1
-    <fluent-tree-item>
-      Flowers
-      <fluent-tree-item disabled>Daisy</fluent-tree-item>
-      <fluent-tree-item>Sunflower</fluent-tree-item>
-      <fluent-tree-item>Rose</fluent-tree-item>
-    </fluent-tree-item>
-    <fluent-tree-item>Nested item 2</fluent-tree-item>
-    <fluent-tree-item>Nested item 3</fluent-tree-item>
-  </fluent-tree-item>
-  <fluent-tree-item>
-    Root item 2
-    <fluent-divider></fluent-divider>
-    <fluent-tree-item>
-      Flowers
-      <fluent-tree-item disabled>Daisy</fluent-tree-item>
-      <fluent-tree-item>Sunflower</fluent-tree-item>
-      <fluent-tree-item>Rose</fluent-tree-item>
-    </fluent-tree-item>
-    <fluent-tree-item>Nested item 2</fluent-tree-item>
-    <fluent-tree-item>Nested item 3</fluent-tree-item>
-  </fluent-tree-item>
-  <fluent-tree-item> Root item 3 - Leaf Erikson </fluent-tree-item>
-</fluent-tree-view>`;
-TreeView.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};

package/dist/esm/tree-view/tree-view.styles.js

@@ -1,14 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
-export const treeViewStyles = (context, definition) => css `
-  :host([hidden]) {
-    display: none;
-  }
-
-  ${display('flex')} :host {
-    flex-direction: column;
-    align-items: stretch;
-    min-width: fit-content;
-    font-size: 0;
-  }
-`;

package/dist/esm/tree-view/tree-view.vscode.definition.json

@@ -1,26 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-tree-view",
-            "title": "Tree view",
-            "description": "The Fluent UI tree view element",
-            "attributes": [
-                {
-                    "name": "render-collapsed-nodes",
-                    "title": "Render collapsed nodes",
-                    "description": "Determines whether the tree should render nodes under collapsed items",
-                    "type": "boolean",
-                    "required": false
-                }
-            ],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot",
-                    "description": "Supports fluent-tree-item elements or elements with a role of 'treeitem'"
-                }
-            ]
-        }
-    ]
-}

package/dist/esm/utilities/behaviors.js

@@ -1,13 +0,0 @@
-import { PropertyStyleSheetBehavior } from '@microsoft/fast-foundation';
-/**
- * Behavior that will conditionally apply a stylesheet based on the elements
- * appearance property
- *
- * @param value - The value of the appearance property
- * @param styles - The styles to be applied when condition matches
- *
- * @public
- */
-export function appearanceBehavior(value, styles) {
-    return new PropertyStyleSheetBehavior('appearance', value, styles);
-}

package/dist/esm/utilities/type-ramp.js

@@ -1,12 +0,0 @@
-/** @public */
-export const StandardFontWeight = {
-    Thin: 100,
-    ExtraLight: 200,
-    Light: 300,
-    Normal: 400,
-    Medium: 500,
-    SemiBold: 600,
-    Bold: 700,
-    ExtraBold: 800,
-    Black: 900,
-};

package/karma.conf.js

@@ -1,147 +0,0 @@
-const path = require('path');
-
-const basePath = path.resolve(__dirname);
-
-const commonChromeFlags = [
-  '--no-default-browser-check',
-  '--no-first-run',
-  '--no-sandbox',
-  '--no-managed-user-acknowledgment-check',
-  '--disable-background-timer-throttling',
-  '--disable-backing-store-limit',
-  '--disable-boot-animation',
-  '--disable-cloud-import',
-  '--disable-contextual-search',
-  '--disable-default-apps',
-  '--disable-extensions',
-  '--disable-infobars',
-  '--disable-translate',
-];
-
-module.exports = function (config) {
-  let browsers;
-  if (process.env.BROWSERS) {
-    browsers = [process.env.BROWSERS];
-  } else if (config.browsers) {
-    browsers = config.browsers;
-  } else {
-    browsers = ['Chrome'];
-  }
-
-  const setup = 'setup-browser' + (config.package ? '-' + config.package : '');
-  const options = {
-    basePath,
-    browserDisconnectTimeout: 10000,
-    processKillTimeout: 10000,
-    frameworks: ['source-map-support', 'mocha', 'webpack'],
-    plugins: [
-      require('karma-mocha'),
-      require('karma-mocha-reporter'),
-      require('karma-webpack'),
-      require('karma-source-map-support'),
-      require('karma-sourcemap-loader'),
-      require('karma-coverage-istanbul-reporter'),
-      require('karma-chrome-launcher'),
-      require('karma-firefox-launcher'),
-    ],
-    files: [`dist/esm/__test__/${setup}.js`],
-    preprocessors: {
-      [`dist/esm/__test__/${setup}.js`]: ['webpack', 'sourcemap'],
-    },
-    webpackMiddleware: {
-      // webpack-dev-middleware configuration
-      // i. e.
-      stats: 'errors-only',
-    },
-    webpack: {
-      mode: 'none',
-      resolve: {
-        extensions: ['.js'],
-        modules: ['dist', 'node_modules'],
-        mainFields: ['module', 'main'],
-      },
-      devtool: 'inline-source-map',
-      performance: {
-        hints: false,
-      },
-      optimization: {
-        nodeEnv: false,
-        usedExports: true,
-        flagIncludedChunks: false,
-        sideEffects: true,
-        concatenateModules: true,
-        splitChunks: {
-          name: false,
-        },
-        runtimeChunk: false,
-        emitOnErrors: true,
-        checkWasmTypes: false,
-        minimize: false,
-      },
-      module: {
-        rules: [
-          {
-            test: /\.js\.map$/,
-            use: ['ignore-loader'],
-          },
-          {
-            test: /\.js$/,
-            enforce: 'pre',
-            use: [
-              {
-                loader: 'source-map-loader',
-              },
-            ],
-          },
-        ],
-      },
-    },
-    mime: {
-      'text/x-typescript': ['ts'],
-    },
-    reporters: [config.reporter || (process.env.CI ? 'min' : 'progress')],
-    browsers: browsers,
-    customLaunchers: {
-      ChromeDebugging: {
-        base: 'Chrome',
-        flags: [...commonChromeFlags, '--remote-debugging-port=9333'],
-        debug: true,
-      },
-      ChromeHeadlessOpt: {
-        base: 'ChromeHeadless',
-        flags: [...commonChromeFlags],
-      },
-    },
-    client: {
-      captureConsole: true,
-      mocha: {
-        bail: config['bail'],
-        ui: 'bdd',
-        timeout: 5000,
-      },
-    },
-    logLevel: config.LOG_ERROR, // to disable the WARN 404 for image requests
-  };
-
-  if (config.coverage) {
-    options.webpack.module.rules.push({
-      enforce: 'post',
-      exclude: /(__tests__|testing|node_modules|\.spec\.[tj]s$)/,
-      loader: 'istanbul-instrumenter-loader',
-      options: { esModules: true },
-      test: /\.[tj]s$/,
-    });
-    options.reporters = ['coverage-istanbul', ...options.reporters];
-    options.coverageIstanbulReporter = {
-      reports: ['html', 'text-summary', 'json', 'lcovonly', 'cobertura'],
-      dir: 'coverage',
-    };
-    options.junitReporter = {
-      outputDir: 'coverage',
-      outputFile: 'test-results.xml',
-      useBrowserName: false,
-    };
-  }
-
-  config.set(options);
-};

package/public/switches.ts

@@ -1,24 +0,0 @@
-import { Direction } from '@microsoft/fast-web-utilities';
-import { baseLayerLuminance, direction, StandardLuminance } from '../src/index';
-
-export function toggleBgMode() {
-  const storyContainer = document.querySelector<HTMLElement>('.docs-story')!;
-  const bgChecked = this.checked;
-  if (bgChecked) {
-    baseLayerLuminance.setValueFor(storyContainer, StandardLuminance.DarkMode);
-  } else {
-    baseLayerLuminance.setValueFor(storyContainer, StandardLuminance.LightMode);
-  }
-}
-
-export function toggleLtr() {
-  const storyContainer = document.querySelector<HTMLElement>('.docs-story')!;
-  const dirChecked = this.checked;
-  if (dirChecked) {
-    storyContainer.style.direction = 'rtl';
-    direction.setValueFor(storyContainer, Direction.rtl);
-  } else {
-    storyContainer.style.direction = 'ltr';
-    direction.setValueFor(storyContainer, Direction.ltr);
-  }
-}