@salutejs/plasma-new-hope 0.325.0-canary.1954.15210668888.0 → 0.325.0-canary.1970.15211531960.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.
Files changed (228) hide show
  1. package/cjs/components/PaginationDots/PaginationDot.js +59 -0
  2. package/cjs/components/PaginationDots/PaginationDot.js.map +1 -0
  3. package/cjs/components/PaginationDots/PaginationDot_baul9c.css +2 -0
  4. package/cjs/components/PaginationDots/PaginationDots.js +34 -0
  5. package/cjs/components/PaginationDots/PaginationDots.js.map +1 -0
  6. package/cjs/components/PaginationDots/PaginationDots_fm2ha5.css +2 -0
  7. package/cjs/components/PaginationDots/SmartPaginationDots.css +5 -0
  8. package/cjs/components/PaginationDots/SmartPaginationDots.js +47 -0
  9. package/cjs/components/PaginationDots/SmartPaginationDots.js.map +1 -0
  10. package/cjs/components/PaginationDots/usePaginationDots.js +40 -0
  11. package/cjs/components/PaginationDots/usePaginationDots.js.map +1 -0
  12. package/cjs/index.css +6 -5
  13. package/cjs/index.js +6 -8
  14. package/cjs/index.js.map +1 -1
  15. package/emotion/cjs/components/PaginationDots/PaginationDot.js +35 -0
  16. package/emotion/cjs/components/PaginationDots/PaginationDots.js +35 -0
  17. package/emotion/cjs/components/PaginationDots/SmartPaginationDots.js +43 -0
  18. package/emotion/cjs/components/PaginationDots/index.js +26 -0
  19. package/emotion/cjs/components/PaginationDots/usePaginationDots.js +38 -0
  20. package/emotion/cjs/index.js +11 -11
  21. package/emotion/es/components/PaginationDots/PaginationDot.js +28 -0
  22. package/emotion/es/components/PaginationDots/PaginationDots.js +28 -0
  23. package/emotion/es/components/PaginationDots/SmartPaginationDots.js +36 -0
  24. package/emotion/es/components/PaginationDots/index.js +3 -0
  25. package/emotion/es/components/PaginationDots/usePaginationDots.js +32 -0
  26. package/emotion/es/index.js +1 -2
  27. package/es/components/PaginationDots/PaginationDot.js +54 -0
  28. package/es/components/PaginationDots/PaginationDot.js.map +1 -0
  29. package/es/components/PaginationDots/PaginationDot_baul9c.css +2 -0
  30. package/es/components/PaginationDots/PaginationDots.js +29 -0
  31. package/es/components/PaginationDots/PaginationDots.js.map +1 -0
  32. package/es/components/PaginationDots/PaginationDots_fm2ha5.css +2 -0
  33. package/es/components/PaginationDots/SmartPaginationDots.css +5 -0
  34. package/es/components/PaginationDots/SmartPaginationDots.js +39 -0
  35. package/es/components/PaginationDots/SmartPaginationDots.js.map +1 -0
  36. package/es/components/PaginationDots/usePaginationDots.js +36 -0
  37. package/es/components/PaginationDots/usePaginationDots.js.map +1 -0
  38. package/es/index.css +6 -5
  39. package/es/index.js +3 -3
  40. package/package.json +2 -2
  41. package/styled-components/cjs/components/PaginationDots/PaginationDot.js +33 -0
  42. package/styled-components/cjs/components/PaginationDots/PaginationDots.js +24 -0
  43. package/styled-components/cjs/components/PaginationDots/SmartPaginationDots.js +43 -0
  44. package/styled-components/cjs/components/PaginationDots/index.js +26 -0
  45. package/styled-components/cjs/components/PaginationDots/usePaginationDots.js +38 -0
  46. package/styled-components/cjs/index.js +11 -11
  47. package/styled-components/es/components/PaginationDots/PaginationDot.js +26 -0
  48. package/styled-components/es/components/PaginationDots/PaginationDots.js +18 -0
  49. package/styled-components/es/components/PaginationDots/SmartPaginationDots.js +36 -0
  50. package/styled-components/es/components/PaginationDots/index.js +3 -0
  51. package/styled-components/es/components/PaginationDots/usePaginationDots.js +32 -0
  52. package/styled-components/es/index.js +1 -2
  53. package/types/components/PaginationDots/PaginationDot.d.ts +21 -0
  54. package/types/components/PaginationDots/PaginationDot.d.ts.map +1 -0
  55. package/types/components/PaginationDots/PaginationDots.d.ts +15 -0
  56. package/types/components/PaginationDots/PaginationDots.d.ts.map +1 -0
  57. package/types/components/PaginationDots/SmartPaginationDots.d.ts +15 -0
  58. package/types/components/PaginationDots/SmartPaginationDots.d.ts.map +1 -0
  59. package/types/components/PaginationDots/index.d.ts +6 -0
  60. package/types/components/PaginationDots/index.d.ts.map +1 -0
  61. package/types/components/PaginationDots/usePaginationDots.d.ts +14 -0
  62. package/types/components/PaginationDots/usePaginationDots.d.ts.map +1 -0
  63. package/types/index.d.ts +1 -2
  64. package/types/index.d.ts.map +1 -1
  65. package/cjs/components/List/List.css +0 -1
  66. package/cjs/components/List/List.js +0 -63
  67. package/cjs/components/List/List.js.map +0 -1
  68. package/cjs/components/List/List.styles.js +0 -9
  69. package/cjs/components/List/List.styles.js.map +0 -1
  70. package/cjs/components/List/List.styles_9yg2yl.css +0 -1
  71. package/cjs/components/List/List.tokens.js +0 -41
  72. package/cjs/components/List/List.tokens.js.map +0 -1
  73. package/cjs/components/List/ui/ListItem.css +0 -18
  74. package/cjs/components/List/ui/ListItem.js +0 -27
  75. package/cjs/components/List/ui/ListItem.js.map +0 -1
  76. package/cjs/components/List/ui/ListItem.styles.js +0 -28
  77. package/cjs/components/List/ui/ListItem.styles.js.map +0 -1
  78. package/cjs/components/List/ui/ListItem.styles_1eo5k14.css +0 -2
  79. package/cjs/components/List/variations/_disabled/base.js +0 -9
  80. package/cjs/components/List/variations/_disabled/base.js.map +0 -1
  81. package/cjs/components/List/variations/_disabled/base_x642ct.css +0 -1
  82. package/cjs/components/List/variations/_size/base.js +0 -9
  83. package/cjs/components/List/variations/_size/base.js.map +0 -1
  84. package/cjs/components/List/variations/_size/base_x642ct.css +0 -1
  85. package/cjs/components/List/variations/_variant/base.js +0 -9
  86. package/cjs/components/List/variations/_variant/base.js.map +0 -1
  87. package/cjs/components/List/variations/_variant/base_x642ct.css +0 -1
  88. package/cjs/components/List/variations/_view/base.js +0 -9
  89. package/cjs/components/List/variations/_view/base.js.map +0 -1
  90. package/cjs/components/List/variations/_view/base_x642ct.css +0 -1
  91. package/emotion/cjs/components/List/List.js +0 -59
  92. package/emotion/cjs/components/List/List.styles.js +0 -9
  93. package/emotion/cjs/components/List/List.tokens.js +0 -39
  94. package/emotion/cjs/components/List/List.types.js +0 -5
  95. package/emotion/cjs/components/List/index.js +0 -38
  96. package/emotion/cjs/components/List/ui/ListItem.js +0 -24
  97. package/emotion/cjs/components/List/ui/ListItem.styles.js +0 -21
  98. package/emotion/cjs/components/List/ui/ListItem.types.js +0 -5
  99. package/emotion/cjs/components/List/variations/_disabled/base.js +0 -8
  100. package/emotion/cjs/components/List/variations/_disabled/tokens.json +0 -1
  101. package/emotion/cjs/components/List/variations/_size/base.js +0 -8
  102. package/emotion/cjs/components/List/variations/_size/tokens.json +0 -1
  103. package/emotion/cjs/components/List/variations/_variant/base.js +0 -8
  104. package/emotion/cjs/components/List/variations/_variant/tokens.json +0 -1
  105. package/emotion/cjs/components/List/variations/_view/base.js +0 -8
  106. package/emotion/cjs/components/List/variations/_view/tokens.json +0 -1
  107. package/emotion/cjs/examples/plasma_b2c/components/List/List.config.js +0 -34
  108. package/emotion/cjs/examples/plasma_b2c/components/List/List.js +0 -12
  109. package/emotion/cjs/examples/plasma_b2c/components/List/List.stories.tsx +0 -60
  110. package/emotion/cjs/examples/plasma_web/components/List/List.config.js +0 -34
  111. package/emotion/cjs/examples/plasma_web/components/List/List.js +0 -12
  112. package/emotion/cjs/examples/plasma_web/components/List/List.stories.tsx +0 -60
  113. package/emotion/es/components/List/List.js +0 -50
  114. package/emotion/es/components/List/List.styles.js +0 -3
  115. package/emotion/es/components/List/List.tokens.js +0 -33
  116. package/emotion/es/components/List/List.types.js +0 -1
  117. package/emotion/es/components/List/index.js +0 -3
  118. package/emotion/es/components/List/ui/ListItem.js +0 -17
  119. package/emotion/es/components/List/ui/ListItem.styles.js +0 -14
  120. package/emotion/es/components/List/ui/ListItem.types.js +0 -1
  121. package/emotion/es/components/List/variations/_disabled/base.js +0 -2
  122. package/emotion/es/components/List/variations/_disabled/tokens.json +0 -1
  123. package/emotion/es/components/List/variations/_size/base.js +0 -2
  124. package/emotion/es/components/List/variations/_size/tokens.json +0 -1
  125. package/emotion/es/components/List/variations/_variant/base.js +0 -2
  126. package/emotion/es/components/List/variations/_variant/tokens.json +0 -1
  127. package/emotion/es/components/List/variations/_view/base.js +0 -2
  128. package/emotion/es/components/List/variations/_view/tokens.json +0 -1
  129. package/emotion/es/examples/plasma_b2c/components/List/List.config.js +0 -28
  130. package/emotion/es/examples/plasma_b2c/components/List/List.js +0 -6
  131. package/emotion/es/examples/plasma_b2c/components/List/List.stories.tsx +0 -60
  132. package/emotion/es/examples/plasma_web/components/List/List.config.js +0 -28
  133. package/emotion/es/examples/plasma_web/components/List/List.js +0 -6
  134. package/emotion/es/examples/plasma_web/components/List/List.stories.tsx +0 -60
  135. package/es/components/List/List.css +0 -1
  136. package/es/components/List/List.js +0 -54
  137. package/es/components/List/List.js.map +0 -1
  138. package/es/components/List/List.styles.js +0 -5
  139. package/es/components/List/List.styles.js.map +0 -1
  140. package/es/components/List/List.styles_9yg2yl.css +0 -1
  141. package/es/components/List/List.tokens.js +0 -36
  142. package/es/components/List/List.tokens.js.map +0 -1
  143. package/es/components/List/ui/ListItem.css +0 -18
  144. package/es/components/List/ui/ListItem.js +0 -19
  145. package/es/components/List/ui/ListItem.js.map +0 -1
  146. package/es/components/List/ui/ListItem.styles.js +0 -23
  147. package/es/components/List/ui/ListItem.styles.js.map +0 -1
  148. package/es/components/List/ui/ListItem.styles_1eo5k14.css +0 -2
  149. package/es/components/List/variations/_disabled/base.js +0 -5
  150. package/es/components/List/variations/_disabled/base.js.map +0 -1
  151. package/es/components/List/variations/_disabled/base_x642ct.css +0 -1
  152. package/es/components/List/variations/_size/base.js +0 -5
  153. package/es/components/List/variations/_size/base.js.map +0 -1
  154. package/es/components/List/variations/_size/base_x642ct.css +0 -1
  155. package/es/components/List/variations/_variant/base.js +0 -5
  156. package/es/components/List/variations/_variant/base.js.map +0 -1
  157. package/es/components/List/variations/_variant/base_x642ct.css +0 -1
  158. package/es/components/List/variations/_view/base.js +0 -5
  159. package/es/components/List/variations/_view/base.js.map +0 -1
  160. package/es/components/List/variations/_view/base_x642ct.css +0 -1
  161. package/styled-components/cjs/components/List/List.js +0 -59
  162. package/styled-components/cjs/components/List/List.styles.js +0 -9
  163. package/styled-components/cjs/components/List/List.tokens.js +0 -39
  164. package/styled-components/cjs/components/List/List.types.js +0 -5
  165. package/styled-components/cjs/components/List/index.js +0 -38
  166. package/styled-components/cjs/components/List/ui/ListItem.js +0 -24
  167. package/styled-components/cjs/components/List/ui/ListItem.styles.js +0 -19
  168. package/styled-components/cjs/components/List/ui/ListItem.types.js +0 -5
  169. package/styled-components/cjs/components/List/variations/_disabled/base.js +0 -8
  170. package/styled-components/cjs/components/List/variations/_disabled/tokens.json +0 -1
  171. package/styled-components/cjs/components/List/variations/_size/base.js +0 -8
  172. package/styled-components/cjs/components/List/variations/_size/tokens.json +0 -1
  173. package/styled-components/cjs/components/List/variations/_variant/base.js +0 -8
  174. package/styled-components/cjs/components/List/variations/_variant/tokens.json +0 -1
  175. package/styled-components/cjs/components/List/variations/_view/base.js +0 -8
  176. package/styled-components/cjs/components/List/variations/_view/tokens.json +0 -1
  177. package/styled-components/cjs/examples/plasma_b2c/components/List/List.config.js +0 -34
  178. package/styled-components/cjs/examples/plasma_b2c/components/List/List.js +0 -12
  179. package/styled-components/cjs/examples/plasma_b2c/components/List/List.stories.tsx +0 -60
  180. package/styled-components/cjs/examples/plasma_web/components/List/List.config.js +0 -34
  181. package/styled-components/cjs/examples/plasma_web/components/List/List.js +0 -12
  182. package/styled-components/cjs/examples/plasma_web/components/List/List.stories.tsx +0 -60
  183. package/styled-components/es/components/List/List.js +0 -50
  184. package/styled-components/es/components/List/List.styles.js +0 -3
  185. package/styled-components/es/components/List/List.tokens.js +0 -33
  186. package/styled-components/es/components/List/List.types.js +0 -1
  187. package/styled-components/es/components/List/index.js +0 -3
  188. package/styled-components/es/components/List/ui/ListItem.js +0 -17
  189. package/styled-components/es/components/List/ui/ListItem.styles.js +0 -12
  190. package/styled-components/es/components/List/ui/ListItem.types.js +0 -1
  191. package/styled-components/es/components/List/variations/_disabled/base.js +0 -2
  192. package/styled-components/es/components/List/variations/_disabled/tokens.json +0 -1
  193. package/styled-components/es/components/List/variations/_size/base.js +0 -2
  194. package/styled-components/es/components/List/variations/_size/tokens.json +0 -1
  195. package/styled-components/es/components/List/variations/_variant/base.js +0 -2
  196. package/styled-components/es/components/List/variations/_variant/tokens.json +0 -1
  197. package/styled-components/es/components/List/variations/_view/base.js +0 -2
  198. package/styled-components/es/components/List/variations/_view/tokens.json +0 -1
  199. package/styled-components/es/examples/plasma_b2c/components/List/List.config.js +0 -28
  200. package/styled-components/es/examples/plasma_b2c/components/List/List.js +0 -6
  201. package/styled-components/es/examples/plasma_b2c/components/List/List.stories.tsx +0 -60
  202. package/styled-components/es/examples/plasma_web/components/List/List.config.js +0 -28
  203. package/styled-components/es/examples/plasma_web/components/List/List.js +0 -6
  204. package/styled-components/es/examples/plasma_web/components/List/List.stories.tsx +0 -60
  205. package/types/components/List/List.d.ts +0 -43
  206. package/types/components/List/List.d.ts.map +0 -1
  207. package/types/components/List/List.styles.d.ts +0 -2
  208. package/types/components/List/List.styles.d.ts.map +0 -1
  209. package/types/components/List/List.tokens.d.ts +0 -34
  210. package/types/components/List/List.tokens.d.ts.map +0 -1
  211. package/types/components/List/List.types.d.ts +0 -24
  212. package/types/components/List/List.types.d.ts.map +0 -1
  213. package/types/components/List/index.d.ts +0 -5
  214. package/types/components/List/index.d.ts.map +0 -1
  215. package/types/components/List/ui/ListItem.d.ts +0 -4
  216. package/types/components/List/ui/ListItem.d.ts.map +0 -1
  217. package/types/components/List/ui/ListItem.styles.d.ts +0 -36
  218. package/types/components/List/ui/ListItem.styles.d.ts.map +0 -1
  219. package/types/components/List/ui/ListItem.types.d.ts +0 -15
  220. package/types/components/List/ui/ListItem.types.d.ts.map +0 -1
  221. package/types/components/List/variations/_disabled/base.d.ts +0 -2
  222. package/types/components/List/variations/_disabled/base.d.ts.map +0 -1
  223. package/types/components/List/variations/_size/base.d.ts +0 -2
  224. package/types/components/List/variations/_size/base.d.ts.map +0 -1
  225. package/types/components/List/variations/_variant/base.d.ts +0 -2
  226. package/types/components/List/variations/_variant/base.d.ts.map +0 -1
  227. package/types/components/List/variations/_view/base.d.ts +0 -2
  228. package/types/components/List/variations/_view/base.d.ts.map +0 -1
@@ -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,3 +0,0 @@
1
- import { css } from 'styled-components';
2
- import { tokens } from "./List.tokens";
3
- export var base = /*#__PURE__*/css(["display:flex;flex-direction:column;gap:var(", ");align-items:stretch;height:auto;width:100%;list-style-type:none;padding:0;margin:0;"], tokens.listGap);
@@ -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,3 +0,0 @@
1
- export { listRoot, listConfig } from "./List";
2
- export { ListItem } from "./ui/ListItem";
3
- export { tokens as listTokens, classes as listClasses } from "./List.tokens";
@@ -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,2 +0,0 @@
1
- import { css } from 'styled-components';
2
- export var base = /*#__PURE__*/css([""]);
@@ -1,2 +0,0 @@
1
- import { css } from 'styled-components';
2
- export var base = /*#__PURE__*/css([""]);
@@ -1,2 +0,0 @@
1
- import { css } from 'styled-components';
2
- export var base = /*#__PURE__*/css([""]);
@@ -1,2 +0,0 @@
1
- import { css } from 'styled-components';
2
- export var base = /*#__PURE__*/css([""]);
@@ -1,28 +0,0 @@
1
- import { css } from 'styled-components';
2
- import { listTokens } from "../../../../components/List";
3
- export var config = {
4
- defaults: {
5
- view: 'default',
6
- size: 's',
7
- variant: 'normal'
8
- },
9
- variations: {
10
- view: {
11
- "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-primary);", ":transparent;", ":var(--surface-transparent-secondary);", ":transparent;", ":transparent;"], listTokens.listItemColor, listTokens.listItemColorHover, listTokens.listItemBackground, listTokens.listItemBackgroundHover, listTokens.listItemBorderColor, listTokens.listItemBorderColorHover)
12
- },
13
- size: {
14
- xs: /*#__PURE__*/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);"], listTokens.listItemPaddingTop, listTokens.listItemPaddingLeft, listTokens.listItemPaddingRight, listTokens.listItemPaddingBottom, listTokens.listItemBorderRadius, listTokens.listItemBorderWidth, listTokens.listItemGap, listTokens.listItemFontFamily, listTokens.listItemFontSize, listTokens.listItemFontStyle, listTokens.listItemFontWeight, listTokens.listItemLetterSpacing, listTokens.listItemLineHeight),
15
- s: /*#__PURE__*/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);"], listTokens.listItemPaddingTop, listTokens.listItemPaddingLeft, listTokens.listItemPaddingRight, listTokens.listItemPaddingBottom, listTokens.listItemBorderRadius, listTokens.listItemBorderWidth, listTokens.listItemGap, listTokens.listItemFontFamily, listTokens.listItemFontSize, listTokens.listItemFontStyle, listTokens.listItemFontWeight, listTokens.listItemLetterSpacing, listTokens.listItemLineHeight),
16
- m: /*#__PURE__*/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);"], listTokens.listItemPaddingTop, listTokens.listItemPaddingLeft, listTokens.listItemPaddingRight, listTokens.listItemPaddingBottom, listTokens.listItemBorderRadius, listTokens.listItemBorderWidth, listTokens.listItemGap, listTokens.listItemFontFamily, listTokens.listItemFontSize, listTokens.listItemFontStyle, listTokens.listItemFontWeight, listTokens.listItemLetterSpacing, listTokens.listItemLineHeight),
17
- l: /*#__PURE__*/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);"], listTokens.listItemPaddingTop, listTokens.listItemPaddingLeft, listTokens.listItemPaddingRight, listTokens.listItemPaddingBottom, listTokens.listItemBorderRadius, listTokens.listItemBorderWidth, listTokens.listItemGap, listTokens.listItemFontFamily, listTokens.listItemFontSize, listTokens.listItemFontStyle, listTokens.listItemFontWeight, listTokens.listItemLetterSpacing, listTokens.listItemLineHeight),
18
- xl: /*#__PURE__*/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);"], listTokens.listItemPaddingTop, listTokens.listItemPaddingLeft, listTokens.listItemPaddingRight, listTokens.listItemPaddingBottom, listTokens.listItemBorderRadius, listTokens.listItemBorderWidth, listTokens.listItemGap, listTokens.listItemFontFamily, listTokens.listItemFontSize, listTokens.listItemFontStyle, listTokens.listItemFontWeight, listTokens.listItemLetterSpacing, listTokens.listItemLineHeight)
19
- },
20
- variant: {
21
- normal: /*#__PURE__*/css(["", ":0.4;", ":0rem;"], listTokens.listDisabledOpacity, listTokens.listItemVariantDifference),
22
- tight: /*#__PURE__*/css(["", ":0.25rem;", ":0.4;"], listTokens.listItemVariantDifference, listTokens.listDisabledOpacity)
23
- },
24
- disabled: {
25
- "true": /*#__PURE__*/css(["", ":red;"], listTokens.listItemBackground)
26
- }
27
- }
28
- };
@@ -1,6 +0,0 @@
1
- import { listConfig, ListItem as ListItemComponent } from "../../../../components/List";
2
- import { component, mergeConfig } from "../../../../engines";
3
- import { config } from "./List.config";
4
- var mergedConfig = /*#__PURE__*/mergeConfig(listConfig, config);
5
- export var List = /*#__PURE__*/component(mergedConfig);
6
- export var ListItem = ListItemComponent;
@@ -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,28 +0,0 @@
1
- import { css } from 'styled-components';
2
- import { listTokens } from "../../../../components/List";
3
- export var config = {
4
- defaults: {
5
- view: 'default',
6
- size: 's',
7
- variant: 'normal'
8
- },
9
- variations: {
10
- view: {
11
- "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-primary);", ":transparent;", ":var(--surface-transparent-secondary);", ":transparent;", ":transparent;"], listTokens.listItemColor, listTokens.listItemColorHover, listTokens.listItemBackground, listTokens.listItemBackgroundHover, listTokens.listItemBorderColor, listTokens.listItemBorderColorHover)
12
- },
13
- size: {
14
- xs: /*#__PURE__*/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);"], listTokens.listItemPaddingTop, listTokens.listItemPaddingLeft, listTokens.listItemPaddingRight, listTokens.listItemPaddingBottom, listTokens.listItemBorderRadius, listTokens.listItemBorderWidth, listTokens.listItemGap, listTokens.listItemFontFamily, listTokens.listItemFontSize, listTokens.listItemFontStyle, listTokens.listItemFontWeight, listTokens.listItemLetterSpacing, listTokens.listItemLineHeight),
15
- s: /*#__PURE__*/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);"], listTokens.listItemPaddingTop, listTokens.listItemPaddingLeft, listTokens.listItemPaddingRight, listTokens.listItemPaddingBottom, listTokens.listItemBorderRadius, listTokens.listItemBorderWidth, listTokens.listItemGap, listTokens.listItemFontFamily, listTokens.listItemFontSize, listTokens.listItemFontStyle, listTokens.listItemFontWeight, listTokens.listItemLetterSpacing, listTokens.listItemLineHeight),
16
- m: /*#__PURE__*/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);"], listTokens.listItemPaddingTop, listTokens.listItemPaddingLeft, listTokens.listItemPaddingRight, listTokens.listItemPaddingBottom, listTokens.listItemBorderRadius, listTokens.listItemBorderWidth, listTokens.listItemGap, listTokens.listItemFontFamily, listTokens.listItemFontSize, listTokens.listItemFontStyle, listTokens.listItemFontWeight, listTokens.listItemLetterSpacing, listTokens.listItemLineHeight),
17
- l: /*#__PURE__*/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);"], listTokens.listItemPaddingTop, listTokens.listItemPaddingLeft, listTokens.listItemPaddingRight, listTokens.listItemPaddingBottom, listTokens.listItemBorderRadius, listTokens.listItemBorderWidth, listTokens.listItemGap, listTokens.listItemFontFamily, listTokens.listItemFontSize, listTokens.listItemFontStyle, listTokens.listItemFontWeight, listTokens.listItemLetterSpacing, listTokens.listItemLineHeight),
18
- xl: /*#__PURE__*/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);"], listTokens.listItemPaddingTop, listTokens.listItemPaddingLeft, listTokens.listItemPaddingRight, listTokens.listItemPaddingBottom, listTokens.listItemBorderRadius, listTokens.listItemBorderWidth, listTokens.listItemGap, listTokens.listItemFontFamily, listTokens.listItemFontSize, listTokens.listItemFontStyle, listTokens.listItemFontWeight, listTokens.listItemLetterSpacing, listTokens.listItemLineHeight)
19
- },
20
- variant: {
21
- normal: /*#__PURE__*/css(["", ":0.4;", ":0rem;"], listTokens.listDisabledOpacity, listTokens.listItemVariantDifference),
22
- tight: /*#__PURE__*/css(["", ":0.25rem;", ":0.4;"], listTokens.listItemVariantDifference, listTokens.listDisabledOpacity)
23
- },
24
- disabled: {
25
- "true": /*#__PURE__*/css(["", ":red;"], listTokens.listItemBackground)
26
- }
27
- }
28
- };
@@ -1,6 +0,0 @@
1
- import { listConfig, ListItem as ListItemComponent } from "../../../../components/List";
2
- import { component, mergeConfig } from "../../../../engines";
3
- import { config } from "./List.config";
4
- var mergedConfig = /*#__PURE__*/mergeConfig(listConfig, config);
5
- export var List = /*#__PURE__*/component(mergedConfig);
6
- export var ListItem = ListItemComponent;
@@ -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,43 +0,0 @@
1
- import React from 'react';
2
- import { RootProps } from '../../engines';
3
- import type { ListProps } from './List.types';
4
- export declare const listRoot: (Root: RootProps<HTMLDivElement, ListProps>) => React.ForwardRefExoticComponent<{
5
- view?: string | undefined;
6
- size?: string | undefined;
7
- variant?: string | undefined;
8
- disabled?: string | undefined;
9
- children?: React.ReactNode;
10
- className?: string | undefined;
11
- } & React.RefAttributes<HTMLDivElement>>;
12
- export declare const listConfig: {
13
- name: string;
14
- tag: string;
15
- layout: (Root: RootProps<HTMLDivElement, ListProps>) => React.ForwardRefExoticComponent<{
16
- view?: string | undefined;
17
- size?: string | undefined;
18
- variant?: string | undefined;
19
- disabled?: string | undefined;
20
- children?: React.ReactNode;
21
- className?: string | undefined;
22
- } & React.RefAttributes<HTMLDivElement>>;
23
- base: import("@linaria/core").LinariaClassName;
24
- variations: {
25
- view: {
26
- css: import("@linaria/core").LinariaClassName;
27
- };
28
- size: {
29
- css: import("@linaria/core").LinariaClassName;
30
- };
31
- variant: {
32
- css: import("@linaria/core").LinariaClassName;
33
- };
34
- disabled: {
35
- css: import("@linaria/core").LinariaClassName;
36
- };
37
- };
38
- defaults: {
39
- view: string;
40
- size: string;
41
- };
42
- };
43
- //# sourceMappingURL=List.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/components/List/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAQ9C,eAAO,MAAM,QAAQ,SAAU,UAAU,cAAc,EAAE,SAAS,CAAC;;;;;;;wCAc7D,CAAC;AAEP,eAAO,MAAM,UAAU;;;mBAhBQ,UAAU,cAAc,EAAE,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuClE,CAAC"}
@@ -1,2 +0,0 @@
1
- export declare const base: import("@linaria/core").LinariaClassName;
2
- //# sourceMappingURL=List.styles.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"List.styles.d.ts","sourceRoot":"","sources":["../../../src/components/List/List.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,0CAUhB,CAAC"}