@wix/design-system/dist/esm/ThemeProvider/docs/index.story.js

@wix/design-system

import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/ThemeProvider/docs/index.story.jsx",
  _this = this;
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from 'react';
import { header, tabs, tab, description, importExample, title, divider, example as baseExample, playground, api, testkit } from '@wix/wix-storybook-utils/Sections';
import { CATEGORY } from '../../../stories/storiesHierarchy';
import { floatingPanelsComponents } from '../../../.storybook/docs-employees/playground';
import ThemeProvider from '..';
import ToggleSwitch from '../../ToggleSwitch';
import Box from '../../Box';
import SectionHelper from '../../SectionHelper';
var colors = ['#2B81CB', '#3899EC', '#4EB7F5', '#C1E4FE', '#DAEFFE', '#EAF7FF', '#F4FAFE'];
var ColorsExample = function ColorsExample() {
  return /*#__PURE__*/React.createElement(Box, {
    direction: "vertical",
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 34,
      columnNumber: 3
    }
  }, "Color Palette:", /*#__PURE__*/React.createElement(Box, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 36,
      columnNumber: 5
    }
  }, colors.map(function (color, i) {
    return /*#__PURE__*/React.createElement(Box, {
      marginTop: "12px",
      background: "var(--wsr-color-".concat(i, "0, ").concat(color, ")"),
      color: "black",
      padding: "6px",
      width: "fit-content",
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 38,
        columnNumber: 9
      }
    }, "Color ", i, "0");
  })));
};
var example = function example(config) {
  return baseExample(_objectSpread({
    components: _objectSpread({
      ColorsExample: ColorsExample
    }, floatingPanelsComponents)
  }, config));
};
export default {
  category: CATEGORY.DEPRECATED,
  storyName: 'ThemeProvider',
  component: ThemeProvider,
  componentPath: '..',
  componentProps: {
    children: /*#__PURE__*/React.createElement(ToggleSwitch, {
      checked: true,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 66,
        columnNumber: 15
      }
    }),
    theme: {
      color10: '#EE5951',
      color20: '#FF6666'
    }
  },
  exampleProps: {
    // Put here presets of props, for more info:
    // https://github.com/wix/wix-ui/blob/master/packages/wix-storybook-utils/docs/usage.md
  },
  sections: [header({
    sourceUrl: "https://github.com/wix-private/wix-design-systems/tree/master/packages/wix-design-system/src/".concat(ThemeProvider.displayName, "/")
  }), tabs([tab({
    title: 'Description',
    sections: [description({
      text: /*#__PURE__*/React.createElement(SectionHelper, {
        title: "WARNING",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 89,
          columnNumber: 15
        }
      }, "This component is work in progress, please don't use this component unless you were instructed to by wsr team. ", /*#__PURE__*/React.createElement("br", {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 91,
          columnNumber: 70
        }
      }), "Note that API is not stable and can change anytime!")
    }), description({
      title: 'Description',
      text: "\nThemeProvider is a wrapper component applying custom theme styles.\nImportant: This is an experimental tool and should not be used in production unless you were instructed to.\n            "
    }), importExample("import { ThemeProvider } from '@wix/design-system';"), divider(), title('Examples'), example({
      title: 'Custom theme definition',
      text: 'Using a ThemeProvider to create a custom theme',
      source: "\n<ThemeProvider\n  theme={{\n    color10: '#EE5951',\n    color20: '#FF6666',\n    textColorPrimary: '#585dd9',\n  }}\n>\n  <Layout>\n    <Cell>\n      <ToggleSwitch checked />\n    </Cell>\n    <Cell>\n      <Text>I have a theme!</Text>\n    </Cell>\n    <Cell>\n      <ColorsExample />\n    </Cell>\n  </Layout>\n</ThemeProvider>\n            "
    }), example({
      title: 'Use a pre made theme',
      text: 'Using a pre made theme function to generate a theme (import {theme} from "@wix/design-system/themes/floatingPanels',
      source: "\n<ThemeProvider theme={theme({ mainColor: '#00aa00' })}>\n  <Layout>\n    <Cell>\n      <ToggleSwitch checked />\n    </Cell>\n    <Cell>\n      <Text>In this theme I'm #000000 by default!</Text>\n    </Cell>\n    <Cell>\n      <ColorsExample />\n    </Cell>\n  </Layout>\n</ThemeProvider>\n            "
    })]
  })].concat(_toConsumableArray([{
    title: 'API',
    sections: [api()]
  }, {
    title: 'Testkit',
    sections: [testkit()]
  }, {
    title: 'Playground',
    sections: [playground()]
  }].map(tab))))]
};