@wix/design-system
Version:
@wix/design-system
127 lines (126 loc) • 6.27 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _Sections = require("@wix/wix-storybook-utils/Sections");
var _storiesHierarchy = require("../../../stories/storiesHierarchy");
var _playground = require("../../../.storybook/docs-employees/playground");
var _ = _interopRequireDefault(require(".."));
var _ToggleSwitch = _interopRequireDefault(require("../../ToggleSwitch"));
var _Box = _interopRequireDefault(require("../../Box"));
var _SectionHelper = _interopRequireDefault(require("../../SectionHelper"));
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/ThemeProvider/docs/index.story.jsx",
_this = void 0;
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) { (0, _defineProperty2["default"])(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; }
var colors = ['#2B81CB', '#3899EC', '#4EB7F5', '#C1E4FE', '#DAEFFE', '#EAF7FF', '#F4FAFE'];
var ColorsExample = function ColorsExample() {
return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
direction: "vertical",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 3
}
}, "Color Palette:", /*#__PURE__*/_react["default"].createElement(_Box["default"], {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 36,
columnNumber: 5
}
}, colors.map(function (color, i) {
return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
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 (0, _Sections.example)(_objectSpread({
components: _objectSpread({
ColorsExample: ColorsExample
}, _playground.floatingPanelsComponents)
}, config));
};
var _default = exports["default"] = {
category: _storiesHierarchy.CATEGORY.DEPRECATED,
storyName: 'ThemeProvider',
component: _["default"],
componentPath: '..',
componentProps: {
children: /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
checked: true,
__self: void 0,
__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: [(0, _Sections.header)({
sourceUrl: "https://github.com/wix-private/wix-design-systems/tree/master/packages/wix-design-system/src/".concat(_["default"].displayName, "/")
}), (0, _Sections.tabs)([(0, _Sections.tab)({
title: 'Description',
sections: [(0, _Sections.description)({
text: /*#__PURE__*/_react["default"].createElement(_SectionHelper["default"], {
title: "WARNING",
__self: void 0,
__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["default"].createElement("br", {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 91,
columnNumber: 70
}
}), "Note that API is not stable and can change anytime!")
}), (0, _Sections.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 "
}), (0, _Sections.importExample)("import { ThemeProvider } from '@wix/design-system';"), (0, _Sections.divider)(), (0, _Sections.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((0, _toConsumableArray2["default"])([{
title: 'API',
sections: [(0, _Sections.api)()]
}, {
title: 'Testkit',
sections: [(0, _Sections.testkit)()]
}, {
title: 'Playground',
sections: [(0, _Sections.playground)()]
}].map(_Sections.tab))))]
};