@salutejs/plasma-new-hope 0.325.0-canary.1954.15210668888.0 → 0.325.0-canary.1962.15244720089.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/components/Note/Note.css +35 -6
- package/cjs/components/Note/Note.js +17 -3
- package/cjs/components/Note/Note.js.map +1 -1
- package/cjs/components/Note/Note.styles.js +25 -2
- package/cjs/components/Note/Note.styles.js.map +1 -1
- package/cjs/components/Note/{Note.styles_178qpj9.css → Note.styles_thpfhk.css} +2 -1
- package/cjs/components/Note/Note.tokens.js +9 -1
- package/cjs/components/Note/Note.tokens.js.map +1 -1
- package/cjs/components/PaginationDots/PaginationDot.js +59 -0
- package/cjs/components/PaginationDots/PaginationDot.js.map +1 -0
- package/cjs/components/PaginationDots/PaginationDot_baul9c.css +2 -0
- package/cjs/components/PaginationDots/PaginationDots.js +34 -0
- package/cjs/components/PaginationDots/PaginationDots.js.map +1 -0
- package/cjs/components/PaginationDots/PaginationDots_fm2ha5.css +2 -0
- package/cjs/components/PaginationDots/SmartPaginationDots.css +5 -0
- package/cjs/components/PaginationDots/SmartPaginationDots.js +47 -0
- package/cjs/components/PaginationDots/SmartPaginationDots.js.map +1 -0
- package/cjs/components/PaginationDots/usePaginationDots.js +40 -0
- package/cjs/components/PaginationDots/usePaginationDots.js.map +1 -0
- package/cjs/index.css +14 -12
- package/cjs/index.js +6 -8
- package/cjs/index.js.map +1 -1
- package/emotion/cjs/components/Note/Note.js +17 -3
- package/emotion/cjs/components/Note/Note.styles.js +27 -15
- package/emotion/cjs/components/Note/Note.tokens.js +9 -1
- package/emotion/cjs/components/PaginationDots/PaginationDot.js +35 -0
- package/emotion/cjs/components/PaginationDots/PaginationDots.js +35 -0
- package/emotion/cjs/components/PaginationDots/SmartPaginationDots.js +43 -0
- package/emotion/cjs/components/PaginationDots/index.js +26 -0
- package/emotion/cjs/components/PaginationDots/usePaginationDots.js +38 -0
- package/emotion/cjs/examples/plasma_b2c/components/Note/Note.config.js +9 -9
- package/emotion/cjs/examples/plasma_b2c/components/Note/Note.stories.tsx +1 -0
- package/emotion/cjs/examples/plasma_web/components/Note/Note.config.js +9 -9
- package/emotion/cjs/examples/plasma_web/components/Note/Note.stories.tsx +1 -0
- package/emotion/cjs/index.js +11 -11
- package/emotion/es/components/Note/Note.js +18 -4
- package/emotion/es/components/Note/Note.styles.js +26 -14
- package/emotion/es/components/Note/Note.tokens.js +9 -1
- package/emotion/es/components/PaginationDots/PaginationDot.js +28 -0
- package/emotion/es/components/PaginationDots/PaginationDots.js +28 -0
- package/emotion/es/components/PaginationDots/SmartPaginationDots.js +36 -0
- package/emotion/es/components/PaginationDots/index.js +3 -0
- package/emotion/es/components/PaginationDots/usePaginationDots.js +32 -0
- package/emotion/es/examples/plasma_b2c/components/Note/Note.config.js +9 -9
- package/emotion/es/examples/plasma_b2c/components/Note/Note.stories.tsx +1 -0
- package/emotion/es/examples/plasma_web/components/Note/Note.config.js +9 -9
- package/emotion/es/examples/plasma_web/components/Note/Note.stories.tsx +1 -0
- package/emotion/es/index.js +1 -2
- package/es/components/Note/Note.css +35 -6
- package/es/components/Note/Note.js +18 -4
- package/es/components/Note/Note.js.map +1 -1
- package/es/components/Note/Note.styles.js +25 -3
- package/es/components/Note/Note.styles.js.map +1 -1
- package/es/components/Note/{Note.styles_178qpj9.css → Note.styles_thpfhk.css} +2 -1
- package/es/components/Note/Note.tokens.js +9 -1
- package/es/components/Note/Note.tokens.js.map +1 -1
- package/es/components/PaginationDots/PaginationDot.js +54 -0
- package/es/components/PaginationDots/PaginationDot.js.map +1 -0
- package/es/components/PaginationDots/PaginationDot_baul9c.css +2 -0
- package/es/components/PaginationDots/PaginationDots.js +29 -0
- package/es/components/PaginationDots/PaginationDots.js.map +1 -0
- package/es/components/PaginationDots/PaginationDots_fm2ha5.css +2 -0
- package/es/components/PaginationDots/SmartPaginationDots.css +5 -0
- package/es/components/PaginationDots/SmartPaginationDots.js +39 -0
- package/es/components/PaginationDots/SmartPaginationDots.js.map +1 -0
- package/es/components/PaginationDots/usePaginationDots.js +36 -0
- package/es/components/PaginationDots/usePaginationDots.js.map +1 -0
- package/es/index.css +14 -12
- package/es/index.js +3 -3
- package/package.json +2 -2
- package/styled-components/cjs/components/Note/Note.js +17 -3
- package/styled-components/cjs/components/Note/Note.styles.js +14 -3
- package/styled-components/cjs/components/Note/Note.tokens.js +9 -1
- package/styled-components/cjs/components/PaginationDots/PaginationDot.js +33 -0
- package/styled-components/cjs/components/PaginationDots/PaginationDots.js +24 -0
- package/styled-components/cjs/components/PaginationDots/SmartPaginationDots.js +43 -0
- package/styled-components/cjs/components/PaginationDots/index.js +26 -0
- package/styled-components/cjs/components/PaginationDots/usePaginationDots.js +38 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Note/Note.config.js +4 -4
- package/styled-components/cjs/examples/plasma_b2c/components/Note/Note.stories.tsx +1 -0
- package/styled-components/cjs/examples/plasma_web/components/Note/Note.config.js +4 -4
- package/styled-components/cjs/examples/plasma_web/components/Note/Note.stories.tsx +1 -0
- package/styled-components/cjs/index.js +11 -11
- package/styled-components/es/components/Note/Note.js +18 -4
- package/styled-components/es/components/Note/Note.styles.js +13 -2
- package/styled-components/es/components/Note/Note.tokens.js +9 -1
- package/styled-components/es/components/PaginationDots/PaginationDot.js +26 -0
- package/styled-components/es/components/PaginationDots/PaginationDots.js +18 -0
- package/styled-components/es/components/PaginationDots/SmartPaginationDots.js +36 -0
- package/styled-components/es/components/PaginationDots/index.js +3 -0
- package/styled-components/es/components/PaginationDots/usePaginationDots.js +32 -0
- package/styled-components/es/examples/plasma_b2c/components/Note/Note.config.js +4 -4
- package/styled-components/es/examples/plasma_b2c/components/Note/Note.stories.tsx +1 -0
- package/styled-components/es/examples/plasma_web/components/Note/Note.config.js +4 -4
- package/styled-components/es/examples/plasma_web/components/Note/Note.stories.tsx +1 -0
- package/styled-components/es/index.js +1 -2
- package/types/components/Note/Note.d.ts +4 -0
- package/types/components/Note/Note.d.ts.map +1 -1
- package/types/components/Note/Note.styles.d.ts +46 -1
- package/types/components/Note/Note.styles.d.ts.map +1 -1
- package/types/components/Note/Note.tokens.d.ts +8 -0
- package/types/components/Note/Note.tokens.d.ts.map +1 -1
- package/types/components/Note/Note.types.d.ts +8 -0
- package/types/components/Note/Note.types.d.ts.map +1 -1
- package/types/components/PaginationDots/PaginationDot.d.ts +21 -0
- package/types/components/PaginationDots/PaginationDot.d.ts.map +1 -0
- package/types/components/PaginationDots/PaginationDots.d.ts +15 -0
- package/types/components/PaginationDots/PaginationDots.d.ts.map +1 -0
- package/types/components/PaginationDots/SmartPaginationDots.d.ts +15 -0
- package/types/components/PaginationDots/SmartPaginationDots.d.ts.map +1 -0
- package/types/components/PaginationDots/index.d.ts +6 -0
- package/types/components/PaginationDots/index.d.ts.map +1 -0
- package/types/components/PaginationDots/usePaginationDots.d.ts +14 -0
- package/types/components/PaginationDots/usePaginationDots.d.ts.map +1 -0
- package/types/index.d.ts +1 -2
- package/types/index.d.ts.map +1 -1
- package/cjs/components/List/List.css +0 -1
- package/cjs/components/List/List.js +0 -63
- package/cjs/components/List/List.js.map +0 -1
- package/cjs/components/List/List.styles.js +0 -9
- package/cjs/components/List/List.styles.js.map +0 -1
- package/cjs/components/List/List.styles_9yg2yl.css +0 -1
- package/cjs/components/List/List.tokens.js +0 -41
- package/cjs/components/List/List.tokens.js.map +0 -1
- package/cjs/components/List/ui/ListItem.css +0 -18
- package/cjs/components/List/ui/ListItem.js +0 -27
- package/cjs/components/List/ui/ListItem.js.map +0 -1
- package/cjs/components/List/ui/ListItem.styles.js +0 -28
- package/cjs/components/List/ui/ListItem.styles.js.map +0 -1
- package/cjs/components/List/ui/ListItem.styles_1eo5k14.css +0 -2
- package/cjs/components/List/variations/_disabled/base.js +0 -9
- package/cjs/components/List/variations/_disabled/base.js.map +0 -1
- package/cjs/components/List/variations/_disabled/base_x642ct.css +0 -1
- package/cjs/components/List/variations/_size/base.js +0 -9
- package/cjs/components/List/variations/_size/base.js.map +0 -1
- package/cjs/components/List/variations/_size/base_x642ct.css +0 -1
- package/cjs/components/List/variations/_variant/base.js +0 -9
- package/cjs/components/List/variations/_variant/base.js.map +0 -1
- package/cjs/components/List/variations/_variant/base_x642ct.css +0 -1
- package/cjs/components/List/variations/_view/base.js +0 -9
- package/cjs/components/List/variations/_view/base.js.map +0 -1
- package/cjs/components/List/variations/_view/base_x642ct.css +0 -1
- package/emotion/cjs/components/List/List.js +0 -59
- package/emotion/cjs/components/List/List.styles.js +0 -9
- package/emotion/cjs/components/List/List.tokens.js +0 -39
- package/emotion/cjs/components/List/List.types.js +0 -5
- package/emotion/cjs/components/List/index.js +0 -38
- package/emotion/cjs/components/List/ui/ListItem.js +0 -24
- package/emotion/cjs/components/List/ui/ListItem.styles.js +0 -21
- package/emotion/cjs/components/List/ui/ListItem.types.js +0 -5
- package/emotion/cjs/components/List/variations/_disabled/base.js +0 -8
- package/emotion/cjs/components/List/variations/_disabled/tokens.json +0 -1
- package/emotion/cjs/components/List/variations/_size/base.js +0 -8
- package/emotion/cjs/components/List/variations/_size/tokens.json +0 -1
- package/emotion/cjs/components/List/variations/_variant/base.js +0 -8
- package/emotion/cjs/components/List/variations/_variant/tokens.json +0 -1
- package/emotion/cjs/components/List/variations/_view/base.js +0 -8
- package/emotion/cjs/components/List/variations/_view/tokens.json +0 -1
- package/emotion/cjs/examples/plasma_b2c/components/List/List.config.js +0 -34
- package/emotion/cjs/examples/plasma_b2c/components/List/List.js +0 -12
- package/emotion/cjs/examples/plasma_b2c/components/List/List.stories.tsx +0 -60
- package/emotion/cjs/examples/plasma_web/components/List/List.config.js +0 -34
- package/emotion/cjs/examples/plasma_web/components/List/List.js +0 -12
- package/emotion/cjs/examples/plasma_web/components/List/List.stories.tsx +0 -60
- package/emotion/es/components/List/List.js +0 -50
- package/emotion/es/components/List/List.styles.js +0 -3
- package/emotion/es/components/List/List.tokens.js +0 -33
- package/emotion/es/components/List/List.types.js +0 -1
- package/emotion/es/components/List/index.js +0 -3
- package/emotion/es/components/List/ui/ListItem.js +0 -17
- package/emotion/es/components/List/ui/ListItem.styles.js +0 -14
- package/emotion/es/components/List/ui/ListItem.types.js +0 -1
- package/emotion/es/components/List/variations/_disabled/base.js +0 -2
- package/emotion/es/components/List/variations/_disabled/tokens.json +0 -1
- package/emotion/es/components/List/variations/_size/base.js +0 -2
- package/emotion/es/components/List/variations/_size/tokens.json +0 -1
- package/emotion/es/components/List/variations/_variant/base.js +0 -2
- package/emotion/es/components/List/variations/_variant/tokens.json +0 -1
- package/emotion/es/components/List/variations/_view/base.js +0 -2
- package/emotion/es/components/List/variations/_view/tokens.json +0 -1
- package/emotion/es/examples/plasma_b2c/components/List/List.config.js +0 -28
- package/emotion/es/examples/plasma_b2c/components/List/List.js +0 -6
- package/emotion/es/examples/plasma_b2c/components/List/List.stories.tsx +0 -60
- package/emotion/es/examples/plasma_web/components/List/List.config.js +0 -28
- package/emotion/es/examples/plasma_web/components/List/List.js +0 -6
- package/emotion/es/examples/plasma_web/components/List/List.stories.tsx +0 -60
- package/es/components/List/List.css +0 -1
- package/es/components/List/List.js +0 -54
- package/es/components/List/List.js.map +0 -1
- package/es/components/List/List.styles.js +0 -5
- package/es/components/List/List.styles.js.map +0 -1
- package/es/components/List/List.styles_9yg2yl.css +0 -1
- package/es/components/List/List.tokens.js +0 -36
- package/es/components/List/List.tokens.js.map +0 -1
- package/es/components/List/ui/ListItem.css +0 -18
- package/es/components/List/ui/ListItem.js +0 -19
- package/es/components/List/ui/ListItem.js.map +0 -1
- package/es/components/List/ui/ListItem.styles.js +0 -23
- package/es/components/List/ui/ListItem.styles.js.map +0 -1
- package/es/components/List/ui/ListItem.styles_1eo5k14.css +0 -2
- package/es/components/List/variations/_disabled/base.js +0 -5
- package/es/components/List/variations/_disabled/base.js.map +0 -1
- package/es/components/List/variations/_disabled/base_x642ct.css +0 -1
- package/es/components/List/variations/_size/base.js +0 -5
- package/es/components/List/variations/_size/base.js.map +0 -1
- package/es/components/List/variations/_size/base_x642ct.css +0 -1
- package/es/components/List/variations/_variant/base.js +0 -5
- package/es/components/List/variations/_variant/base.js.map +0 -1
- package/es/components/List/variations/_variant/base_x642ct.css +0 -1
- package/es/components/List/variations/_view/base.js +0 -5
- package/es/components/List/variations/_view/base.js.map +0 -1
- package/es/components/List/variations/_view/base_x642ct.css +0 -1
- package/styled-components/cjs/components/List/List.js +0 -59
- package/styled-components/cjs/components/List/List.styles.js +0 -9
- package/styled-components/cjs/components/List/List.tokens.js +0 -39
- package/styled-components/cjs/components/List/List.types.js +0 -5
- package/styled-components/cjs/components/List/index.js +0 -38
- package/styled-components/cjs/components/List/ui/ListItem.js +0 -24
- package/styled-components/cjs/components/List/ui/ListItem.styles.js +0 -19
- package/styled-components/cjs/components/List/ui/ListItem.types.js +0 -5
- package/styled-components/cjs/components/List/variations/_disabled/base.js +0 -8
- package/styled-components/cjs/components/List/variations/_disabled/tokens.json +0 -1
- package/styled-components/cjs/components/List/variations/_size/base.js +0 -8
- package/styled-components/cjs/components/List/variations/_size/tokens.json +0 -1
- package/styled-components/cjs/components/List/variations/_variant/base.js +0 -8
- package/styled-components/cjs/components/List/variations/_variant/tokens.json +0 -1
- package/styled-components/cjs/components/List/variations/_view/base.js +0 -8
- package/styled-components/cjs/components/List/variations/_view/tokens.json +0 -1
- package/styled-components/cjs/examples/plasma_b2c/components/List/List.config.js +0 -34
- package/styled-components/cjs/examples/plasma_b2c/components/List/List.js +0 -12
- package/styled-components/cjs/examples/plasma_b2c/components/List/List.stories.tsx +0 -60
- package/styled-components/cjs/examples/plasma_web/components/List/List.config.js +0 -34
- package/styled-components/cjs/examples/plasma_web/components/List/List.js +0 -12
- package/styled-components/cjs/examples/plasma_web/components/List/List.stories.tsx +0 -60
- package/styled-components/es/components/List/List.js +0 -50
- package/styled-components/es/components/List/List.styles.js +0 -3
- package/styled-components/es/components/List/List.tokens.js +0 -33
- package/styled-components/es/components/List/List.types.js +0 -1
- package/styled-components/es/components/List/index.js +0 -3
- package/styled-components/es/components/List/ui/ListItem.js +0 -17
- package/styled-components/es/components/List/ui/ListItem.styles.js +0 -12
- package/styled-components/es/components/List/ui/ListItem.types.js +0 -1
- package/styled-components/es/components/List/variations/_disabled/base.js +0 -2
- package/styled-components/es/components/List/variations/_disabled/tokens.json +0 -1
- package/styled-components/es/components/List/variations/_size/base.js +0 -2
- package/styled-components/es/components/List/variations/_size/tokens.json +0 -1
- package/styled-components/es/components/List/variations/_variant/base.js +0 -2
- package/styled-components/es/components/List/variations/_variant/tokens.json +0 -1
- package/styled-components/es/components/List/variations/_view/base.js +0 -2
- package/styled-components/es/components/List/variations/_view/tokens.json +0 -1
- package/styled-components/es/examples/plasma_b2c/components/List/List.config.js +0 -28
- package/styled-components/es/examples/plasma_b2c/components/List/List.js +0 -6
- package/styled-components/es/examples/plasma_b2c/components/List/List.stories.tsx +0 -60
- package/styled-components/es/examples/plasma_web/components/List/List.config.js +0 -28
- package/styled-components/es/examples/plasma_web/components/List/List.js +0 -6
- package/styled-components/es/examples/plasma_web/components/List/List.stories.tsx +0 -60
- package/types/components/List/List.d.ts +0 -43
- package/types/components/List/List.d.ts.map +0 -1
- package/types/components/List/List.styles.d.ts +0 -2
- package/types/components/List/List.styles.d.ts.map +0 -1
- package/types/components/List/List.tokens.d.ts +0 -34
- package/types/components/List/List.tokens.d.ts.map +0 -1
- package/types/components/List/List.types.d.ts +0 -24
- package/types/components/List/List.types.d.ts.map +0 -1
- package/types/components/List/index.d.ts +0 -5
- package/types/components/List/index.d.ts.map +0 -1
- package/types/components/List/ui/ListItem.d.ts +0 -4
- package/types/components/List/ui/ListItem.d.ts.map +0 -1
- package/types/components/List/ui/ListItem.styles.d.ts +0 -36
- package/types/components/List/ui/ListItem.styles.d.ts.map +0 -1
- package/types/components/List/ui/ListItem.types.d.ts +0 -15
- package/types/components/List/ui/ListItem.types.d.ts.map +0 -1
- package/types/components/List/variations/_disabled/base.d.ts +0 -2
- package/types/components/List/variations/_disabled/base.d.ts.map +0 -1
- package/types/components/List/variations/_size/base.d.ts +0 -2
- package/types/components/List/variations/_size/base.d.ts.map +0 -1
- package/types/components/List/variations/_variant/base.d.ts +0 -2
- package/types/components/List/variations/_variant/base.d.ts.map +0 -1
- package/types/components/List/variations/_view/base.d.ts +0 -2
- package/types/components/List/variations/_view/base.d.ts.map +0 -1
@@ -1,59 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
5
|
-
value: true
|
6
|
-
});
|
7
|
-
exports.listRoot = exports.listConfig = void 0;
|
8
|
-
var _react = /*#__PURE__*/_interopRequireWildcard(/*#__PURE__*/require("react"));
|
9
|
-
var _utils = /*#__PURE__*/require("../../utils");
|
10
|
-
var _List = /*#__PURE__*/require("./List.styles");
|
11
|
-
var _List2 = /*#__PURE__*/require("./List.tokens");
|
12
|
-
var _base = /*#__PURE__*/require("./variations/_variant/base");
|
13
|
-
var _base2 = /*#__PURE__*/require("./variations/_view/base");
|
14
|
-
var _base3 = /*#__PURE__*/require("./variations/_size/base");
|
15
|
-
var _base4 = /*#__PURE__*/require("./variations/_disabled/base");
|
16
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
17
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
18
|
-
var listRoot = exports.listRoot = function listRoot(Root) {
|
19
|
-
return /*#__PURE__*/(0, _react.forwardRef)(function (_ref, outerRootRef) {
|
20
|
-
var size = _ref.size,
|
21
|
-
view = _ref.view,
|
22
|
-
variant = _ref.variant,
|
23
|
-
disabled = _ref.disabled,
|
24
|
-
className = _ref.className,
|
25
|
-
children = _ref.children;
|
26
|
-
return /*#__PURE__*/_react["default"].createElement(Root, {
|
27
|
-
ref: outerRootRef,
|
28
|
-
size: size,
|
29
|
-
view: view,
|
30
|
-
variant: variant,
|
31
|
-
disabled: disabled,
|
32
|
-
className: (0, _utils.cx)(_List2.classes.listRoot, className)
|
33
|
-
}, children);
|
34
|
-
});
|
35
|
-
};
|
36
|
-
var listConfig = exports.listConfig = {
|
37
|
-
name: 'List',
|
38
|
-
tag: 'ul',
|
39
|
-
layout: listRoot,
|
40
|
-
base: _List.base,
|
41
|
-
variations: {
|
42
|
-
view: {
|
43
|
-
css: _base2.base
|
44
|
-
},
|
45
|
-
size: {
|
46
|
-
css: _base3.base
|
47
|
-
},
|
48
|
-
variant: {
|
49
|
-
css: _base.base
|
50
|
-
},
|
51
|
-
disabled: {
|
52
|
-
css: _base4.base
|
53
|
-
}
|
54
|
-
},
|
55
|
-
defaults: {
|
56
|
-
view: 'default',
|
57
|
-
size: 'm'
|
58
|
-
}
|
59
|
-
};
|
@@ -1,9 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.base = void 0;
|
7
|
-
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
|
-
var _List = /*#__PURE__*/require("./List.tokens");
|
9
|
-
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["display:flex;flex-direction:column;gap:var(", ");align-items:stretch;height:auto;width:100%;list-style-type:none;padding:0;margin:0;"], _List.tokens.listGap);
|
@@ -1,39 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.tokens = exports.classes = void 0;
|
7
|
-
var classes = exports.classes = {
|
8
|
-
listRoot: 'list-root',
|
9
|
-
listItem: 'list-item',
|
10
|
-
filledStretching: 'list-stretching-filled',
|
11
|
-
fixedStretching: 'list-stretching-fixed'
|
12
|
-
};
|
13
|
-
var tokens = exports.tokens = {
|
14
|
-
listGap: '--plasma-list-gap',
|
15
|
-
listWidth: '--plasma-list-width',
|
16
|
-
listItemBackground: '--plasma-list-item-background',
|
17
|
-
listItemBackgroundHover: '--plasma-list-item-background-hover',
|
18
|
-
listItemBorderRadius: '--plasma-list-item-border-radius',
|
19
|
-
listItemPaddingLeft: '--plasma-list-item-padding-left',
|
20
|
-
listItemPaddingRight: '--plasma-list-item-padding-right',
|
21
|
-
listItemPaddingTop: '--plasma-list-item-padding-top',
|
22
|
-
listItemPaddingBottom: '--plasma-list-item-padding-bottom',
|
23
|
-
listItemBorderColor: '--plasma-list-item-border-color',
|
24
|
-
listItemBorderColorHover: '--plasma-list-item-border-color-hover',
|
25
|
-
listItemBorderWidth: '--plasma-list-item-border-width',
|
26
|
-
listItemIconLeftColor: '--plasma-list-item-color-icon-left',
|
27
|
-
listItemIconRightColor: '--plasma-list-item-color-icon-right',
|
28
|
-
listItemGap: '--plasma-list-item-gap',
|
29
|
-
listItemVariantDifference: '--plasma-list-item-variant-difference',
|
30
|
-
listItemColor: '--plasma-list-item-color',
|
31
|
-
listItemColorHover: '--plasma-list-item-color-hover',
|
32
|
-
listItemFontFamily: '--plasma-list-item-font-family',
|
33
|
-
listItemFontSize: '--plasma-list-item-font-size',
|
34
|
-
listItemFontStyle: '--plasma-list-item-font-style',
|
35
|
-
listItemFontWeight: '--plasma-list-item-font-weight',
|
36
|
-
listItemLetterSpacing: '--plasma-list-item-letter-spacing',
|
37
|
-
listItemLineHeight: '--plasma-list-item-line-height',
|
38
|
-
listDisabledOpacity: '--plasma-list-disabled-opacity'
|
39
|
-
};
|
@@ -1,38 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
Object.defineProperty(exports, "ListItem", {
|
7
|
-
enumerable: true,
|
8
|
-
get: function get() {
|
9
|
-
return _ListItem.ListItem;
|
10
|
-
}
|
11
|
-
});
|
12
|
-
Object.defineProperty(exports, "listClasses", {
|
13
|
-
enumerable: true,
|
14
|
-
get: function get() {
|
15
|
-
return _List2.classes;
|
16
|
-
}
|
17
|
-
});
|
18
|
-
Object.defineProperty(exports, "listConfig", {
|
19
|
-
enumerable: true,
|
20
|
-
get: function get() {
|
21
|
-
return _List.listConfig;
|
22
|
-
}
|
23
|
-
});
|
24
|
-
Object.defineProperty(exports, "listRoot", {
|
25
|
-
enumerable: true,
|
26
|
-
get: function get() {
|
27
|
-
return _List.listRoot;
|
28
|
-
}
|
29
|
-
});
|
30
|
-
Object.defineProperty(exports, "listTokens", {
|
31
|
-
enumerable: true,
|
32
|
-
get: function get() {
|
33
|
-
return _List2.tokens;
|
34
|
-
}
|
35
|
-
});
|
36
|
-
var _List = /*#__PURE__*/require("./List");
|
37
|
-
var _ListItem = /*#__PURE__*/require("./ui/ListItem");
|
38
|
-
var _List2 = /*#__PURE__*/require("./List.tokens");
|
@@ -1,24 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.ListItem = void 0;
|
7
|
-
var _react = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("react"));
|
8
|
-
var _ListItem = /*#__PURE__*/require("./ListItem.styles");
|
9
|
-
var _excluded = ["children", "contentRight", "disabled"];
|
10
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
11
|
-
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
12
|
-
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
13
|
-
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
14
|
-
var ListItem = exports.ListItem = function ListItem(_ref) {
|
15
|
-
var children = _ref.children,
|
16
|
-
contentRight = _ref.contentRight,
|
17
|
-
disabled = _ref.disabled,
|
18
|
-
rest = _objectWithoutProperties(_ref, _excluded);
|
19
|
-
return /*#__PURE__*/_react["default"].createElement(_ListItem.StyledListItem, _extends({
|
20
|
-
disabled: disabled
|
21
|
-
}, rest), /*#__PURE__*/_react["default"].createElement(_ListItem.CellItem, {
|
22
|
-
contentRight: contentRight
|
23
|
-
}, children));
|
24
|
-
};
|
@@ -1,19 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.StyledListItem = exports.CellItem = void 0;
|
7
|
-
var _styledComponents = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("styled-components"));
|
8
|
-
var _List = /*#__PURE__*/require("../List.tokens");
|
9
|
-
var _Cell = /*#__PURE__*/require("../../Cell");
|
10
|
-
var _engines = /*#__PURE__*/require("../../../engines");
|
11
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
12
|
-
var mergedCellConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Cell.cellConfig);
|
13
|
-
var Cell = /*#__PURE__*/(0, _engines.component)(mergedCellConfig);
|
14
|
-
var CellItem = exports.CellItem = /*#__PURE__*/(0, _styledComponents["default"])(Cell).withConfig({
|
15
|
-
componentId: "plasma-new-hope__sc-1roh0z4-0"
|
16
|
-
})(["", ":100%;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":var(", ");", ":var(", ");", ":transparent;"], _Cell.cellTokens.cellWidth, _Cell.cellTokens.cellPadding, _Cell.cellTokens.cellPaddingLeftContent, _Cell.cellTokens.cellPaddingContent, _Cell.cellTokens.cellPaddingRightContent, _Cell.cellTokens.cellTextboxGap, _Cell.cellTokens.cellGap, _List.tokens.listItemGap, _Cell.cellTokens.cellColor, _List.tokens.listItemColor, _Cell.cellTokens.cellBackgroundColor);
|
17
|
-
var StyledListItem = exports.StyledListItem = /*#__PURE__*/_styledComponents["default"].li.withConfig({
|
18
|
-
componentId: "plasma-new-hope__sc-1roh0z4-1"
|
19
|
-
})(["padding:calc(var(", ") - var(", ")) var(", ") calc(var(", ") - var(", ")) var(", ");border-radius:var(", ");background:var(", ");border:var(", ") solid var(", ");box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;color:var(", ");font-size:var(", ");font-weight:var(", ");font-family:var(", ");font-style:var(", ");line-height:var(", ");letter-spacing:var(", ");&:hover{background:var(", ");border-color:var(", ");color:var(", ");}&[disabled]{cursor:not-allowed;opacity:var(", ");}"], _List.tokens.listItemPaddingTop, _List.tokens.listItemVariantDifference, _List.tokens.listItemPaddingRight, _List.tokens.listItemPaddingBottom, _List.tokens.listItemVariantDifference, _List.tokens.listItemPaddingLeft, _List.tokens.listItemBorderRadius, _List.tokens.listItemBackground, _List.tokens.listItemBorderWidth, _List.tokens.listItemBorderColor, _List.tokens.listItemColor, _List.tokens.listItemFontSize, _List.tokens.listItemFontWeight, _List.tokens.listItemFontFamily, _List.tokens.listItemFontStyle, _List.tokens.listItemLineHeight, _List.tokens.listItemLetterSpacing, _List.tokens.listItemBackgroundHover, _List.tokens.listItemBorderColorHover, _List.tokens.listItemColorHover, _List.tokens.listDisabledOpacity);
|
@@ -1 +0,0 @@
|
|
1
|
-
[]
|
@@ -1 +0,0 @@
|
|
1
|
-
[]
|
@@ -1 +0,0 @@
|
|
1
|
-
[]
|
@@ -1 +0,0 @@
|
|
1
|
-
[]
|
@@ -1,34 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.config = void 0;
|
7
|
-
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
|
-
var _List = /*#__PURE__*/require("../../../../components/List");
|
9
|
-
var config = exports.config = {
|
10
|
-
defaults: {
|
11
|
-
view: 'default',
|
12
|
-
size: 's',
|
13
|
-
variant: 'normal'
|
14
|
-
},
|
15
|
-
variations: {
|
16
|
-
view: {
|
17
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-primary);", ":transparent;", ":var(--surface-transparent-secondary);", ":transparent;", ":transparent;"], _List.listTokens.listItemColor, _List.listTokens.listItemColorHover, _List.listTokens.listItemBackground, _List.listTokens.listItemBackgroundHover, _List.listTokens.listItemBorderColor, _List.listTokens.listItemBorderColorHover)
|
18
|
-
},
|
19
|
-
size: {
|
20
|
-
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0rem;", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _List.listTokens.listItemPaddingTop, _List.listTokens.listItemPaddingLeft, _List.listTokens.listItemPaddingRight, _List.listTokens.listItemPaddingBottom, _List.listTokens.listItemBorderRadius, _List.listTokens.listItemBorderWidth, _List.listTokens.listItemGap, _List.listTokens.listItemFontFamily, _List.listTokens.listItemFontSize, _List.listTokens.listItemFontStyle, _List.listTokens.listItemFontWeight, _List.listTokens.listItemLetterSpacing, _List.listTokens.listItemLineHeight),
|
21
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.689rem;", ":0.75rem;", ":0.75rem;", ":0.689rem;", ":0.625rem;", ":0rem;", ":0.375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _List.listTokens.listItemPaddingTop, _List.listTokens.listItemPaddingLeft, _List.listTokens.listItemPaddingRight, _List.listTokens.listItemPaddingBottom, _List.listTokens.listItemBorderRadius, _List.listTokens.listItemBorderWidth, _List.listTokens.listItemGap, _List.listTokens.listItemFontFamily, _List.listTokens.listItemFontSize, _List.listTokens.listItemFontStyle, _List.listTokens.listItemFontWeight, _List.listTokens.listItemLetterSpacing, _List.listTokens.listItemLineHeight),
|
22
|
-
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":0.875rem;", ":0.875rem;", ":0.75rem;", ":0.75rem;", ":0rem;", ":0.5rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _List.listTokens.listItemPaddingTop, _List.listTokens.listItemPaddingLeft, _List.listTokens.listItemPaddingRight, _List.listTokens.listItemPaddingBottom, _List.listTokens.listItemBorderRadius, _List.listTokens.listItemBorderWidth, _List.listTokens.listItemGap, _List.listTokens.listItemFontFamily, _List.listTokens.listItemFontSize, _List.listTokens.listItemFontStyle, _List.listTokens.listItemFontWeight, _List.listTokens.listItemLetterSpacing, _List.listTokens.listItemLineHeight),
|
23
|
-
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":1rem;", ":1rem;", ":1rem;", ":0.875rem;", ":0rem;", ":0.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _List.listTokens.listItemPaddingTop, _List.listTokens.listItemPaddingLeft, _List.listTokens.listItemPaddingRight, _List.listTokens.listItemPaddingBottom, _List.listTokens.listItemBorderRadius, _List.listTokens.listItemBorderWidth, _List.listTokens.listItemGap, _List.listTokens.listItemFontFamily, _List.listTokens.listItemFontSize, _List.listTokens.listItemFontStyle, _List.listTokens.listItemFontWeight, _List.listTokens.listItemLetterSpacing, _List.listTokens.listItemLineHeight),
|
24
|
-
xl: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.3125rem;", ":1.125rem;", ":1.125rem;", ":1.3125rem;", ":1rem;", ":0rem;", ":0.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _List.listTokens.listItemPaddingTop, _List.listTokens.listItemPaddingLeft, _List.listTokens.listItemPaddingRight, _List.listTokens.listItemPaddingBottom, _List.listTokens.listItemBorderRadius, _List.listTokens.listItemBorderWidth, _List.listTokens.listItemGap, _List.listTokens.listItemFontFamily, _List.listTokens.listItemFontSize, _List.listTokens.listItemFontStyle, _List.listTokens.listItemFontWeight, _List.listTokens.listItemLetterSpacing, _List.listTokens.listItemLineHeight)
|
25
|
-
},
|
26
|
-
variant: {
|
27
|
-
normal: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":0rem;"], _List.listTokens.listDisabledOpacity, _List.listTokens.listItemVariantDifference),
|
28
|
-
tight: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.25rem;", ":0.4;"], _List.listTokens.listItemVariantDifference, _List.listTokens.listDisabledOpacity)
|
29
|
-
},
|
30
|
-
disabled: {
|
31
|
-
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":red;"], _List.listTokens.listItemBackground)
|
32
|
-
}
|
33
|
-
}
|
34
|
-
};
|
@@ -1,12 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.ListItem = exports.List = void 0;
|
7
|
-
var _List = /*#__PURE__*/require("../../../../components/List");
|
8
|
-
var _engines = /*#__PURE__*/require("../../../../engines");
|
9
|
-
var _List2 = /*#__PURE__*/require("./List.config");
|
10
|
-
var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_List.listConfig, _List2.config);
|
11
|
-
var List = exports.List = /*#__PURE__*/(0, _engines.component)(mergedConfig);
|
12
|
-
var ListItem = exports.ListItem = _List.ListItem;
|
@@ -1,60 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import type { Meta } from '@storybook/react';
|
3
|
-
import styled from 'styled-components';
|
4
|
-
|
5
|
-
import { IconChevronLeft } from '../../../../components/_Icon';
|
6
|
-
import { WithTheme } from '../../../_helpers';
|
7
|
-
|
8
|
-
import { List, ListItem } from './List';
|
9
|
-
|
10
|
-
const ChevronRight = styled(IconChevronLeft)`
|
11
|
-
transform: rotate(180deg);
|
12
|
-
`;
|
13
|
-
|
14
|
-
const meta: Meta<typeof List> = {
|
15
|
-
title: 'b2c/Data Display/List',
|
16
|
-
component: List,
|
17
|
-
decorators: [WithTheme],
|
18
|
-
argTypes: {
|
19
|
-
size: {
|
20
|
-
options: ['xl', 'l', 'm', 's', 'xs'],
|
21
|
-
control: {
|
22
|
-
type: 'select',
|
23
|
-
},
|
24
|
-
},
|
25
|
-
view: {
|
26
|
-
options: ['default'],
|
27
|
-
control: {
|
28
|
-
type: 'select',
|
29
|
-
},
|
30
|
-
},
|
31
|
-
variant: {
|
32
|
-
options: ['normal', 'tight'],
|
33
|
-
control: {
|
34
|
-
type: 'select',
|
35
|
-
},
|
36
|
-
},
|
37
|
-
},
|
38
|
-
};
|
39
|
-
|
40
|
-
export default meta;
|
41
|
-
|
42
|
-
export const Default: Story = {
|
43
|
-
args: {
|
44
|
-
view: 'default',
|
45
|
-
size: 'm',
|
46
|
-
variant: 'normal',
|
47
|
-
},
|
48
|
-
render: ({ view, size, ...rest }: StoryProps) => {
|
49
|
-
return (
|
50
|
-
<List view={view} size={size} {...rest}>
|
51
|
-
<ListItem contentRight={<ChevronRight color="inherit" size="xs" />}>Test Item 1</ListItem>
|
52
|
-
<ListItem contentRight={<ChevronRight color="inherit" size="xs" />}>Test Item 2</ListItem>
|
53
|
-
<ListItem contentRight={<ChevronRight color="inherit" size="xs" />} disabled>
|
54
|
-
Test Item 3
|
55
|
-
</ListItem>
|
56
|
-
<ListItem contentRight={<ChevronRight color="inherit" size="xs" />}>Test Item 4</ListItem>
|
57
|
-
</List>
|
58
|
-
);
|
59
|
-
},
|
60
|
-
};
|
@@ -1,34 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.config = void 0;
|
7
|
-
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
|
-
var _List = /*#__PURE__*/require("../../../../components/List");
|
9
|
-
var config = exports.config = {
|
10
|
-
defaults: {
|
11
|
-
view: 'default',
|
12
|
-
size: 's',
|
13
|
-
variant: 'normal'
|
14
|
-
},
|
15
|
-
variations: {
|
16
|
-
view: {
|
17
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-primary);", ":transparent;", ":var(--surface-transparent-secondary);", ":transparent;", ":transparent;"], _List.listTokens.listItemColor, _List.listTokens.listItemColorHover, _List.listTokens.listItemBackground, _List.listTokens.listItemBackgroundHover, _List.listTokens.listItemBorderColor, _List.listTokens.listItemBorderColorHover)
|
18
|
-
},
|
19
|
-
size: {
|
20
|
-
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0rem;", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _List.listTokens.listItemPaddingTop, _List.listTokens.listItemPaddingLeft, _List.listTokens.listItemPaddingRight, _List.listTokens.listItemPaddingBottom, _List.listTokens.listItemBorderRadius, _List.listTokens.listItemBorderWidth, _List.listTokens.listItemGap, _List.listTokens.listItemFontFamily, _List.listTokens.listItemFontSize, _List.listTokens.listItemFontStyle, _List.listTokens.listItemFontWeight, _List.listTokens.listItemLetterSpacing, _List.listTokens.listItemLineHeight),
|
21
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.689rem;", ":0.75rem;", ":0.75rem;", ":0.689rem;", ":0.625rem;", ":0rem;", ":0.375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _List.listTokens.listItemPaddingTop, _List.listTokens.listItemPaddingLeft, _List.listTokens.listItemPaddingRight, _List.listTokens.listItemPaddingBottom, _List.listTokens.listItemBorderRadius, _List.listTokens.listItemBorderWidth, _List.listTokens.listItemGap, _List.listTokens.listItemFontFamily, _List.listTokens.listItemFontSize, _List.listTokens.listItemFontStyle, _List.listTokens.listItemFontWeight, _List.listTokens.listItemLetterSpacing, _List.listTokens.listItemLineHeight),
|
22
|
-
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":0.875rem;", ":0.875rem;", ":0.75rem;", ":0.75rem;", ":0rem;", ":0.5rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _List.listTokens.listItemPaddingTop, _List.listTokens.listItemPaddingLeft, _List.listTokens.listItemPaddingRight, _List.listTokens.listItemPaddingBottom, _List.listTokens.listItemBorderRadius, _List.listTokens.listItemBorderWidth, _List.listTokens.listItemGap, _List.listTokens.listItemFontFamily, _List.listTokens.listItemFontSize, _List.listTokens.listItemFontStyle, _List.listTokens.listItemFontWeight, _List.listTokens.listItemLetterSpacing, _List.listTokens.listItemLineHeight),
|
23
|
-
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":1rem;", ":1rem;", ":1rem;", ":0.875rem;", ":0rem;", ":0.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _List.listTokens.listItemPaddingTop, _List.listTokens.listItemPaddingLeft, _List.listTokens.listItemPaddingRight, _List.listTokens.listItemPaddingBottom, _List.listTokens.listItemBorderRadius, _List.listTokens.listItemBorderWidth, _List.listTokens.listItemGap, _List.listTokens.listItemFontFamily, _List.listTokens.listItemFontSize, _List.listTokens.listItemFontStyle, _List.listTokens.listItemFontWeight, _List.listTokens.listItemLetterSpacing, _List.listTokens.listItemLineHeight),
|
24
|
-
xl: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.3125rem;", ":1.125rem;", ":1.125rem;", ":1.3125rem;", ":1rem;", ":0rem;", ":0.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _List.listTokens.listItemPaddingTop, _List.listTokens.listItemPaddingLeft, _List.listTokens.listItemPaddingRight, _List.listTokens.listItemPaddingBottom, _List.listTokens.listItemBorderRadius, _List.listTokens.listItemBorderWidth, _List.listTokens.listItemGap, _List.listTokens.listItemFontFamily, _List.listTokens.listItemFontSize, _List.listTokens.listItemFontStyle, _List.listTokens.listItemFontWeight, _List.listTokens.listItemLetterSpacing, _List.listTokens.listItemLineHeight)
|
25
|
-
},
|
26
|
-
variant: {
|
27
|
-
normal: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":0rem;"], _List.listTokens.listDisabledOpacity, _List.listTokens.listItemVariantDifference),
|
28
|
-
tight: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.25rem;", ":0.4;"], _List.listTokens.listItemVariantDifference, _List.listTokens.listDisabledOpacity)
|
29
|
-
},
|
30
|
-
disabled: {
|
31
|
-
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":red;"], _List.listTokens.listItemBackground)
|
32
|
-
}
|
33
|
-
}
|
34
|
-
};
|
@@ -1,12 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.ListItem = exports.List = void 0;
|
7
|
-
var _List = /*#__PURE__*/require("../../../../components/List");
|
8
|
-
var _engines = /*#__PURE__*/require("../../../../engines");
|
9
|
-
var _List2 = /*#__PURE__*/require("./List.config");
|
10
|
-
var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_List.listConfig, _List2.config);
|
11
|
-
var List = exports.List = /*#__PURE__*/(0, _engines.component)(mergedConfig);
|
12
|
-
var ListItem = exports.ListItem = _List.ListItem;
|
@@ -1,60 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import type { Meta } from '@storybook/react';
|
3
|
-
import styled from 'styled-components';
|
4
|
-
|
5
|
-
import { IconChevronLeft } from '../../../../components/_Icon';
|
6
|
-
import { WithTheme } from '../../../_helpers';
|
7
|
-
|
8
|
-
import { List, ListItem } from './List';
|
9
|
-
|
10
|
-
const ChevronRight = styled(IconChevronLeft)`
|
11
|
-
transform: rotate(180deg);
|
12
|
-
`;
|
13
|
-
|
14
|
-
const meta: Meta<typeof List> = {
|
15
|
-
title: 'web/Data Display/List',
|
16
|
-
component: List,
|
17
|
-
decorators: [WithTheme],
|
18
|
-
argTypes: {
|
19
|
-
size: {
|
20
|
-
options: ['xl', 'l', 'm', 's', 'xs'],
|
21
|
-
control: {
|
22
|
-
type: 'select',
|
23
|
-
},
|
24
|
-
},
|
25
|
-
view: {
|
26
|
-
options: ['default'],
|
27
|
-
control: {
|
28
|
-
type: 'select',
|
29
|
-
},
|
30
|
-
},
|
31
|
-
variant: {
|
32
|
-
options: ['normal', 'tight'],
|
33
|
-
control: {
|
34
|
-
type: 'select',
|
35
|
-
},
|
36
|
-
},
|
37
|
-
},
|
38
|
-
};
|
39
|
-
|
40
|
-
export default meta;
|
41
|
-
|
42
|
-
export const Default: Story = {
|
43
|
-
args: {
|
44
|
-
view: 'default',
|
45
|
-
size: 'm',
|
46
|
-
variant: 'normal',
|
47
|
-
},
|
48
|
-
render: ({ view, size, ...rest }: StoryProps) => {
|
49
|
-
return (
|
50
|
-
<List view={view} size={size} {...rest}>
|
51
|
-
<ListItem contentRight={<ChevronRight color="inherit" size="xs" />}>Test Item 1</ListItem>
|
52
|
-
<ListItem contentRight={<ChevronRight color="inherit" size="xs" />}>Test Item 2</ListItem>
|
53
|
-
<ListItem contentRight={<ChevronRight color="inherit" size="xs" />} disabled>
|
54
|
-
Test Item 3
|
55
|
-
</ListItem>
|
56
|
-
<ListItem contentRight={<ChevronRight color="inherit" size="xs" />}>Test Item 4</ListItem>
|
57
|
-
</List>
|
58
|
-
);
|
59
|
-
},
|
60
|
-
};
|
@@ -1,50 +0,0 @@
|
|
1
|
-
import React, { forwardRef } from 'react';
|
2
|
-
import { cx } from "../../utils";
|
3
|
-
import { base } from "./List.styles";
|
4
|
-
import { classes } from "./List.tokens";
|
5
|
-
import { base as variantCSS } from "./variations/_variant/base";
|
6
|
-
import { base as viewCSS } from "./variations/_view/base";
|
7
|
-
import { base as sizeCSS } from "./variations/_size/base";
|
8
|
-
import { base as disabledCSS } from "./variations/_disabled/base";
|
9
|
-
export var listRoot = function listRoot(Root) {
|
10
|
-
return /*#__PURE__*/forwardRef(function (_ref, outerRootRef) {
|
11
|
-
var size = _ref.size,
|
12
|
-
view = _ref.view,
|
13
|
-
variant = _ref.variant,
|
14
|
-
disabled = _ref.disabled,
|
15
|
-
className = _ref.className,
|
16
|
-
children = _ref.children;
|
17
|
-
return /*#__PURE__*/React.createElement(Root, {
|
18
|
-
ref: outerRootRef,
|
19
|
-
size: size,
|
20
|
-
view: view,
|
21
|
-
variant: variant,
|
22
|
-
disabled: disabled,
|
23
|
-
className: cx(classes.listRoot, className)
|
24
|
-
}, children);
|
25
|
-
});
|
26
|
-
};
|
27
|
-
export var listConfig = {
|
28
|
-
name: 'List',
|
29
|
-
tag: 'ul',
|
30
|
-
layout: listRoot,
|
31
|
-
base: base,
|
32
|
-
variations: {
|
33
|
-
view: {
|
34
|
-
css: viewCSS
|
35
|
-
},
|
36
|
-
size: {
|
37
|
-
css: sizeCSS
|
38
|
-
},
|
39
|
-
variant: {
|
40
|
-
css: variantCSS
|
41
|
-
},
|
42
|
-
disabled: {
|
43
|
-
css: disabledCSS
|
44
|
-
}
|
45
|
-
},
|
46
|
-
defaults: {
|
47
|
-
view: 'default',
|
48
|
-
size: 'm'
|
49
|
-
}
|
50
|
-
};
|
@@ -1,33 +0,0 @@
|
|
1
|
-
export var classes = {
|
2
|
-
listRoot: 'list-root',
|
3
|
-
listItem: 'list-item',
|
4
|
-
filledStretching: 'list-stretching-filled',
|
5
|
-
fixedStretching: 'list-stretching-fixed'
|
6
|
-
};
|
7
|
-
export var tokens = {
|
8
|
-
listGap: '--plasma-list-gap',
|
9
|
-
listWidth: '--plasma-list-width',
|
10
|
-
listItemBackground: '--plasma-list-item-background',
|
11
|
-
listItemBackgroundHover: '--plasma-list-item-background-hover',
|
12
|
-
listItemBorderRadius: '--plasma-list-item-border-radius',
|
13
|
-
listItemPaddingLeft: '--plasma-list-item-padding-left',
|
14
|
-
listItemPaddingRight: '--plasma-list-item-padding-right',
|
15
|
-
listItemPaddingTop: '--plasma-list-item-padding-top',
|
16
|
-
listItemPaddingBottom: '--plasma-list-item-padding-bottom',
|
17
|
-
listItemBorderColor: '--plasma-list-item-border-color',
|
18
|
-
listItemBorderColorHover: '--plasma-list-item-border-color-hover',
|
19
|
-
listItemBorderWidth: '--plasma-list-item-border-width',
|
20
|
-
listItemIconLeftColor: '--plasma-list-item-color-icon-left',
|
21
|
-
listItemIconRightColor: '--plasma-list-item-color-icon-right',
|
22
|
-
listItemGap: '--plasma-list-item-gap',
|
23
|
-
listItemVariantDifference: '--plasma-list-item-variant-difference',
|
24
|
-
listItemColor: '--plasma-list-item-color',
|
25
|
-
listItemColorHover: '--plasma-list-item-color-hover',
|
26
|
-
listItemFontFamily: '--plasma-list-item-font-family',
|
27
|
-
listItemFontSize: '--plasma-list-item-font-size',
|
28
|
-
listItemFontStyle: '--plasma-list-item-font-style',
|
29
|
-
listItemFontWeight: '--plasma-list-item-font-weight',
|
30
|
-
listItemLetterSpacing: '--plasma-list-item-letter-spacing',
|
31
|
-
listItemLineHeight: '--plasma-list-item-line-height',
|
32
|
-
listDisabledOpacity: '--plasma-list-disabled-opacity'
|
33
|
-
};
|
@@ -1 +0,0 @@
|
|
1
|
-
export {};
|
@@ -1,17 +0,0 @@
|
|
1
|
-
var _excluded = ["children", "contentRight", "disabled"];
|
2
|
-
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
3
|
-
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
4
|
-
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
5
|
-
import React from 'react';
|
6
|
-
import { StyledListItem, CellItem } from "./ListItem.styles";
|
7
|
-
export var ListItem = function ListItem(_ref) {
|
8
|
-
var children = _ref.children,
|
9
|
-
contentRight = _ref.contentRight,
|
10
|
-
disabled = _ref.disabled,
|
11
|
-
rest = _objectWithoutProperties(_ref, _excluded);
|
12
|
-
return /*#__PURE__*/React.createElement(StyledListItem, _extends({
|
13
|
-
disabled: disabled
|
14
|
-
}, rest), /*#__PURE__*/React.createElement(CellItem, {
|
15
|
-
contentRight: contentRight
|
16
|
-
}, children));
|
17
|
-
};
|
@@ -1,12 +0,0 @@
|
|
1
|
-
import styled from 'styled-components';
|
2
|
-
import { tokens } from "../List.tokens";
|
3
|
-
import { cellConfig, cellTokens } from "../../Cell";
|
4
|
-
import { component, mergeConfig } from "../../../engines";
|
5
|
-
var mergedCellConfig = /*#__PURE__*/mergeConfig(cellConfig);
|
6
|
-
var Cell = /*#__PURE__*/component(mergedCellConfig);
|
7
|
-
export var CellItem = /*#__PURE__*/styled(Cell).withConfig({
|
8
|
-
componentId: "plasma-new-hope__sc-1roh0z4-0"
|
9
|
-
})(["", ":100%;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":var(", ");", ":var(", ");", ":transparent;"], cellTokens.cellWidth, cellTokens.cellPadding, cellTokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, cellTokens.cellPaddingRightContent, cellTokens.cellTextboxGap, cellTokens.cellGap, tokens.listItemGap, cellTokens.cellColor, tokens.listItemColor, cellTokens.cellBackgroundColor);
|
10
|
-
export var StyledListItem = /*#__PURE__*/styled.li.withConfig({
|
11
|
-
componentId: "plasma-new-hope__sc-1roh0z4-1"
|
12
|
-
})(["padding:calc(var(", ") - var(", ")) var(", ") calc(var(", ") - var(", ")) var(", ");border-radius:var(", ");background:var(", ");border:var(", ") solid var(", ");box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;color:var(", ");font-size:var(", ");font-weight:var(", ");font-family:var(", ");font-style:var(", ");line-height:var(", ");letter-spacing:var(", ");&:hover{background:var(", ");border-color:var(", ");color:var(", ");}&[disabled]{cursor:not-allowed;opacity:var(", ");}"], tokens.listItemPaddingTop, tokens.listItemVariantDifference, tokens.listItemPaddingRight, tokens.listItemPaddingBottom, tokens.listItemVariantDifference, tokens.listItemPaddingLeft, tokens.listItemBorderRadius, tokens.listItemBackground, tokens.listItemBorderWidth, tokens.listItemBorderColor, tokens.listItemColor, tokens.listItemFontSize, tokens.listItemFontWeight, tokens.listItemFontFamily, tokens.listItemFontStyle, tokens.listItemLineHeight, tokens.listItemLetterSpacing, tokens.listItemBackgroundHover, tokens.listItemBorderColorHover, tokens.listItemColorHover, tokens.listDisabledOpacity);
|
@@ -1 +0,0 @@
|
|
1
|
-
export {};
|