@transferwise/components 0.0.0-experimental-94f7ff7 → 0.0.0-experimental-5b8e94e

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.
@@ -1 +1 @@
1
- {"version":3,"file":"DefinitionList.js","sources":["../../src/definitionList/DefinitionList.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport ActionButton from '../actionButton';\nimport { Layout } from '../common';\n\nexport interface DefinitionListDefinition {\n action?: {\n label: string;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n };\n title: React.ReactNode;\n value: React.ReactNode;\n key: string;\n}\n\nexport type DefinitionListLayout =\n `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;\n\nexport interface DefinitionListProps {\n definitions?: DefinitionListDefinition[];\n layout?: DefinitionListLayout;\n muted?: boolean;\n}\n\nconst isLayoutHorizontal = (layout: DefinitionListLayout) =>\n layout === Layout.HORIZONTAL_LEFT_ALIGNED ||\n layout === Layout.HORIZONTAL_RIGHT_ALIGNED ||\n layout === Layout.HORIZONTAL_JUSTIFIED;\n\nconst getAlignmentClasses = (\n layout: DefinitionListLayout,\n action: DefinitionListDefinition['action'],\n) => {\n const classes = ['d-flex'];\n\n if (action) {\n if (isLayoutHorizontal(layout)) {\n classes.push('align-items-center');\n } else {\n classes.push('align-items-start');\n }\n }\n\n if (layout === Layout.HORIZONTAL_RIGHT_ALIGNED) {\n classes.push('text-sm-right tw-definition-list--right-aligned-desktop');\n } else {\n classes.push('justify-content-between');\n }\n\n if (layout === Layout.HORIZONTAL_JUSTIFIED) {\n classes.push('text-sm-justify');\n }\n\n return classes;\n};\n\nconst defaultDefinitions = [] satisfies DefinitionListProps['definitions'];\n\nexport default function DefinitionList({\n definitions = defaultDefinitions,\n layout = 'VERTICAL_TWO_COLUMN',\n muted,\n}: DefinitionListProps) {\n return (\n <dl\n className={clsx('tw-definition-list d-flex ', {\n 'text-muted': muted,\n 'flex-column': layout === Layout.VERTICAL_ONE_COLUMN,\n 'tw-definition-list--columns flex-column flex-row--sm':\n layout === Layout.VERTICAL_TWO_COLUMN,\n 'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout),\n })}\n >\n {definitions\n .filter((definition) => definition)\n .map(({ action, title, value, key }) => (\n <div key={key} className=\"tw-definition-list__item\">\n <dt>{title}</dt>\n <dd className={clsx(...getAlignmentClasses(layout, action))}>\n <div>{value}</div>\n {action ? (\n <div\n className={clsx(\n isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2',\n 'tw-definition-list__action',\n )}\n >\n <ActionButton className=\"tw-definition-list__button\" onClick={action.onClick}>\n {action.label}\n </ActionButton>\n </div>\n ) : null}\n </dd>\n </div>\n ))}\n </dl>\n );\n}\n"],"names":["isLayoutHorizontal","layout","Layout","HORIZONTAL_LEFT_ALIGNED","HORIZONTAL_RIGHT_ALIGNED","HORIZONTAL_JUSTIFIED","getAlignmentClasses","action","classes","push","defaultDefinitions","DefinitionList","definitions","muted","_jsx","className","clsx","VERTICAL_ONE_COLUMN","VERTICAL_TWO_COLUMN","children","filter","definition","map","title","value","key","_jsxs","ActionButton","onClick","label"],"mappings":"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"}
1
+ {"version":3,"file":"DefinitionList.js","sources":["../../src/definitionList/DefinitionList.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport ActionButton from '../actionButton';\nimport { Layout } from '../common';\n\nexport interface DefinitionListDefinition {\n action?: {\n label: string;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n };\n title: React.ReactNode;\n value: React.ReactNode;\n key: string;\n}\n\ntype DefinitionListLayout =\n `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;\n\nexport interface DefinitionListProps {\n definitions?: DefinitionListDefinition[];\n layout?: DefinitionListLayout;\n muted?: boolean;\n}\n\nconst isLayoutHorizontal = (layout: DefinitionListLayout) =>\n layout === Layout.HORIZONTAL_LEFT_ALIGNED ||\n layout === Layout.HORIZONTAL_RIGHT_ALIGNED ||\n layout === Layout.HORIZONTAL_JUSTIFIED;\n\nconst getAlignmentClasses = (\n layout: DefinitionListLayout,\n action: DefinitionListDefinition['action'],\n) => {\n const classes = ['d-flex'];\n\n if (action) {\n if (isLayoutHorizontal(layout)) {\n classes.push('align-items-center');\n } else {\n classes.push('align-items-start');\n }\n }\n\n if (layout === Layout.HORIZONTAL_RIGHT_ALIGNED) {\n classes.push('text-sm-right tw-definition-list--right-aligned-desktop');\n } else {\n classes.push('justify-content-between');\n }\n\n if (layout === Layout.HORIZONTAL_JUSTIFIED) {\n classes.push('text-sm-justify');\n }\n\n return classes;\n};\n\nconst defaultDefinitions = [] satisfies DefinitionListProps['definitions'];\n\nexport default function DefinitionList({\n definitions = defaultDefinitions,\n layout = 'VERTICAL_TWO_COLUMN',\n muted,\n}: DefinitionListProps) {\n return (\n <dl\n className={clsx('tw-definition-list d-flex ', {\n 'text-muted': muted,\n 'flex-column': layout === Layout.VERTICAL_ONE_COLUMN,\n 'tw-definition-list--columns flex-column flex-row--sm':\n layout === Layout.VERTICAL_TWO_COLUMN,\n 'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout),\n })}\n >\n {definitions\n .filter((definition) => definition)\n .map(({ action, title, value, key }) => (\n <div key={key} className=\"tw-definition-list__item\">\n <dt>{title}</dt>\n <dd className={clsx(...getAlignmentClasses(layout, action))}>\n <div>{value}</div>\n {action ? (\n <div\n className={clsx(\n isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2',\n 'tw-definition-list__action',\n )}\n >\n <ActionButton className=\"tw-definition-list__button\" onClick={action.onClick}>\n {action.label}\n </ActionButton>\n </div>\n ) : null}\n </dd>\n </div>\n ))}\n </dl>\n );\n}\n"],"names":["isLayoutHorizontal","layout","Layout","HORIZONTAL_LEFT_ALIGNED","HORIZONTAL_RIGHT_ALIGNED","HORIZONTAL_JUSTIFIED","getAlignmentClasses","action","classes","push","defaultDefinitions","DefinitionList","definitions","muted","_jsx","className","clsx","VERTICAL_ONE_COLUMN","VERTICAL_TWO_COLUMN","children","filter","definition","map","title","value","key","_jsxs","ActionButton","onClick","label"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"DefinitionList.mjs","sources":["../../src/definitionList/DefinitionList.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport ActionButton from '../actionButton';\nimport { Layout } from '../common';\n\nexport interface DefinitionListDefinition {\n action?: {\n label: string;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n };\n title: React.ReactNode;\n value: React.ReactNode;\n key: string;\n}\n\nexport type DefinitionListLayout =\n `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;\n\nexport interface DefinitionListProps {\n definitions?: DefinitionListDefinition[];\n layout?: DefinitionListLayout;\n muted?: boolean;\n}\n\nconst isLayoutHorizontal = (layout: DefinitionListLayout) =>\n layout === Layout.HORIZONTAL_LEFT_ALIGNED ||\n layout === Layout.HORIZONTAL_RIGHT_ALIGNED ||\n layout === Layout.HORIZONTAL_JUSTIFIED;\n\nconst getAlignmentClasses = (\n layout: DefinitionListLayout,\n action: DefinitionListDefinition['action'],\n) => {\n const classes = ['d-flex'];\n\n if (action) {\n if (isLayoutHorizontal(layout)) {\n classes.push('align-items-center');\n } else {\n classes.push('align-items-start');\n }\n }\n\n if (layout === Layout.HORIZONTAL_RIGHT_ALIGNED) {\n classes.push('text-sm-right tw-definition-list--right-aligned-desktop');\n } else {\n classes.push('justify-content-between');\n }\n\n if (layout === Layout.HORIZONTAL_JUSTIFIED) {\n classes.push('text-sm-justify');\n }\n\n return classes;\n};\n\nconst defaultDefinitions = [] satisfies DefinitionListProps['definitions'];\n\nexport default function DefinitionList({\n definitions = defaultDefinitions,\n layout = 'VERTICAL_TWO_COLUMN',\n muted,\n}: DefinitionListProps) {\n return (\n <dl\n className={clsx('tw-definition-list d-flex ', {\n 'text-muted': muted,\n 'flex-column': layout === Layout.VERTICAL_ONE_COLUMN,\n 'tw-definition-list--columns flex-column flex-row--sm':\n layout === Layout.VERTICAL_TWO_COLUMN,\n 'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout),\n })}\n >\n {definitions\n .filter((definition) => definition)\n .map(({ action, title, value, key }) => (\n <div key={key} className=\"tw-definition-list__item\">\n <dt>{title}</dt>\n <dd className={clsx(...getAlignmentClasses(layout, action))}>\n <div>{value}</div>\n {action ? (\n <div\n className={clsx(\n isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2',\n 'tw-definition-list__action',\n )}\n >\n <ActionButton className=\"tw-definition-list__button\" onClick={action.onClick}>\n {action.label}\n </ActionButton>\n </div>\n ) : null}\n </dd>\n </div>\n ))}\n </dl>\n );\n}\n"],"names":["isLayoutHorizontal","layout","Layout","HORIZONTAL_LEFT_ALIGNED","HORIZONTAL_RIGHT_ALIGNED","HORIZONTAL_JUSTIFIED","getAlignmentClasses","action","classes","push","defaultDefinitions","DefinitionList","definitions","muted","_jsx","className","clsx","VERTICAL_ONE_COLUMN","VERTICAL_TWO_COLUMN","children","filter","definition","map","title","value","key","_jsxs","ActionButton","onClick","label"],"mappings":"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"}
1
+ {"version":3,"file":"DefinitionList.mjs","sources":["../../src/definitionList/DefinitionList.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport ActionButton from '../actionButton';\nimport { Layout } from '../common';\n\nexport interface DefinitionListDefinition {\n action?: {\n label: string;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n };\n title: React.ReactNode;\n value: React.ReactNode;\n key: string;\n}\n\ntype DefinitionListLayout =\n `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;\n\nexport interface DefinitionListProps {\n definitions?: DefinitionListDefinition[];\n layout?: DefinitionListLayout;\n muted?: boolean;\n}\n\nconst isLayoutHorizontal = (layout: DefinitionListLayout) =>\n layout === Layout.HORIZONTAL_LEFT_ALIGNED ||\n layout === Layout.HORIZONTAL_RIGHT_ALIGNED ||\n layout === Layout.HORIZONTAL_JUSTIFIED;\n\nconst getAlignmentClasses = (\n layout: DefinitionListLayout,\n action: DefinitionListDefinition['action'],\n) => {\n const classes = ['d-flex'];\n\n if (action) {\n if (isLayoutHorizontal(layout)) {\n classes.push('align-items-center');\n } else {\n classes.push('align-items-start');\n }\n }\n\n if (layout === Layout.HORIZONTAL_RIGHT_ALIGNED) {\n classes.push('text-sm-right tw-definition-list--right-aligned-desktop');\n } else {\n classes.push('justify-content-between');\n }\n\n if (layout === Layout.HORIZONTAL_JUSTIFIED) {\n classes.push('text-sm-justify');\n }\n\n return classes;\n};\n\nconst defaultDefinitions = [] satisfies DefinitionListProps['definitions'];\n\nexport default function DefinitionList({\n definitions = defaultDefinitions,\n layout = 'VERTICAL_TWO_COLUMN',\n muted,\n}: DefinitionListProps) {\n return (\n <dl\n className={clsx('tw-definition-list d-flex ', {\n 'text-muted': muted,\n 'flex-column': layout === Layout.VERTICAL_ONE_COLUMN,\n 'tw-definition-list--columns flex-column flex-row--sm':\n layout === Layout.VERTICAL_TWO_COLUMN,\n 'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout),\n })}\n >\n {definitions\n .filter((definition) => definition)\n .map(({ action, title, value, key }) => (\n <div key={key} className=\"tw-definition-list__item\">\n <dt>{title}</dt>\n <dd className={clsx(...getAlignmentClasses(layout, action))}>\n <div>{value}</div>\n {action ? (\n <div\n className={clsx(\n isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2',\n 'tw-definition-list__action',\n )}\n >\n <ActionButton className=\"tw-definition-list__button\" onClick={action.onClick}>\n {action.label}\n </ActionButton>\n </div>\n ) : null}\n </dd>\n </div>\n ))}\n </dl>\n );\n}\n"],"names":["isLayoutHorizontal","layout","Layout","HORIZONTAL_LEFT_ALIGNED","HORIZONTAL_RIGHT_ALIGNED","HORIZONTAL_JUSTIFIED","getAlignmentClasses","action","classes","push","defaultDefinitions","DefinitionList","definitions","muted","_jsx","className","clsx","VERTICAL_ONE_COLUMN","VERTICAL_TWO_COLUMN","children","filter","definition","map","title","value","key","_jsxs","ActionButton","onClick","label"],"mappings":"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"}
@@ -54,7 +54,6 @@
54
54
  "neptune.UploadButton.allFileTypes": "Alle Dateiformate",
55
55
  "neptune.UploadButton.dropFiles": "Datei zum Hochladen in dieses Feld ziehen",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}, kleiner als {size} MB",
57
- "neptune.UploadButton.maximumFiles": "Maximal {maxFiles} Dateien.",
58
57
  "neptune.UploadButton.uploadFile": "Datei hochladen",
59
58
  "neptune.UploadButton.uploadFiles": "Dateien hochladen",
60
59
  "neptune.UploadInput.deleteModalBody": "Wenn du diese Datei entfernst, wird sie aus unserem System gelöscht werden.",
@@ -56,7 +56,6 @@ var de = {
56
56
  "neptune.UploadButton.allFileTypes": "Alle Dateiformate",
57
57
  "neptune.UploadButton.dropFiles": "Datei zum Hochladen in dieses Feld ziehen",
58
58
  "neptune.UploadButton.instructions": "{fileTypes}, kleiner als {size} MB",
59
- "neptune.UploadButton.maximumFiles": "Maximal {maxFiles} Dateien.",
60
59
  "neptune.UploadButton.uploadFile": "Datei hochladen",
61
60
  "neptune.UploadButton.uploadFiles": "Dateien hochladen",
62
61
  "neptune.UploadInput.deleteModalBody": "Wenn du diese Datei entfernst, wird sie aus unserem System gelöscht werden.",
@@ -1 +1 @@
1
- {"version":3,"file":"de.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"de.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -54,7 +54,6 @@ var de = {
54
54
  "neptune.UploadButton.allFileTypes": "Alle Dateiformate",
55
55
  "neptune.UploadButton.dropFiles": "Datei zum Hochladen in dieses Feld ziehen",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}, kleiner als {size} MB",
57
- "neptune.UploadButton.maximumFiles": "Maximal {maxFiles} Dateien.",
58
57
  "neptune.UploadButton.uploadFile": "Datei hochladen",
59
58
  "neptune.UploadButton.uploadFiles": "Dateien hochladen",
60
59
  "neptune.UploadInput.deleteModalBody": "Wenn du diese Datei entfernst, wird sie aus unserem System gelöscht werden.",
@@ -1 +1 @@
1
- {"version":3,"file":"de.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"de.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -54,7 +54,6 @@
54
54
  "neptune.UploadButton.allFileTypes": "Tutti i tipi di file",
55
55
  "neptune.UploadButton.dropFiles": "Rilascia file per iniziare a caricare",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}, minore di {size}MB",
57
- "neptune.UploadButton.maximumFiles": "Max {maxFiles} file.",
58
57
  "neptune.UploadButton.uploadFile": "Carica un file",
59
58
  "neptune.UploadButton.uploadFiles": "Carica i file",
60
59
  "neptune.UploadInput.deleteModalBody": "Rimuovere questo file lo cancellerà dal nostro sistema.",
@@ -56,7 +56,6 @@ var it = {
56
56
  "neptune.UploadButton.allFileTypes": "Tutti i tipi di file",
57
57
  "neptune.UploadButton.dropFiles": "Rilascia file per iniziare a caricare",
58
58
  "neptune.UploadButton.instructions": "{fileTypes}, minore di {size}MB",
59
- "neptune.UploadButton.maximumFiles": "Max {maxFiles} file.",
60
59
  "neptune.UploadButton.uploadFile": "Carica un file",
61
60
  "neptune.UploadButton.uploadFiles": "Carica i file",
62
61
  "neptune.UploadInput.deleteModalBody": "Rimuovere questo file lo cancellerà dal nostro sistema.",
@@ -1 +1 @@
1
- {"version":3,"file":"it.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"it.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -54,7 +54,6 @@ var it = {
54
54
  "neptune.UploadButton.allFileTypes": "Tutti i tipi di file",
55
55
  "neptune.UploadButton.dropFiles": "Rilascia file per iniziare a caricare",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}, minore di {size}MB",
57
- "neptune.UploadButton.maximumFiles": "Max {maxFiles} file.",
58
57
  "neptune.UploadButton.uploadFile": "Carica un file",
59
58
  "neptune.UploadButton.uploadFiles": "Carica i file",
60
59
  "neptune.UploadInput.deleteModalBody": "Rimuovere questo file lo cancellerà dal nostro sistema.",
@@ -1 +1 @@
1
- {"version":3,"file":"it.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"it.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -54,7 +54,6 @@
54
54
  "neptune.UploadButton.allFileTypes": "ไฟล์ทุกประเภท",
55
55
  "neptune.UploadButton.dropFiles": "วางไฟล์เพื่อเริ่มการอัปโหลด",
56
56
  "neptune.UploadButton.instructions": "{fileTypes} น้อยกว่า {size} MB",
57
- "neptune.UploadButton.maximumFiles": "สูงสุด {maxFiles} ไฟล์",
58
57
  "neptune.UploadButton.uploadFile": "อัปโหลดไฟล์",
59
58
  "neptune.UploadButton.uploadFiles": "อัปโหลดไฟล์",
60
59
  "neptune.UploadInput.deleteModalBody": "การลบไฟล์นี้จะลบออกจากระบบของเรา",
@@ -56,7 +56,6 @@ var th = {
56
56
  "neptune.UploadButton.allFileTypes": "ไฟล์ทุกประเภท",
57
57
  "neptune.UploadButton.dropFiles": "วางไฟล์เพื่อเริ่มการอัปโหลด",
58
58
  "neptune.UploadButton.instructions": "{fileTypes} น้อยกว่า {size} MB",
59
- "neptune.UploadButton.maximumFiles": "สูงสุด {maxFiles} ไฟล์",
60
59
  "neptune.UploadButton.uploadFile": "อัปโหลดไฟล์",
61
60
  "neptune.UploadButton.uploadFiles": "อัปโหลดไฟล์",
62
61
  "neptune.UploadInput.deleteModalBody": "การลบไฟล์นี้จะลบออกจากระบบของเรา",
@@ -1 +1 @@
1
- {"version":3,"file":"th.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"th.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -54,7 +54,6 @@ var th = {
54
54
  "neptune.UploadButton.allFileTypes": "ไฟล์ทุกประเภท",
55
55
  "neptune.UploadButton.dropFiles": "วางไฟล์เพื่อเริ่มการอัปโหลด",
56
56
  "neptune.UploadButton.instructions": "{fileTypes} น้อยกว่า {size} MB",
57
- "neptune.UploadButton.maximumFiles": "สูงสุด {maxFiles} ไฟล์",
58
57
  "neptune.UploadButton.uploadFile": "อัปโหลดไฟล์",
59
58
  "neptune.UploadButton.uploadFiles": "อัปโหลดไฟล์",
60
59
  "neptune.UploadInput.deleteModalBody": "การลบไฟล์นี้จะลบออกจากระบบของเรา",
@@ -1 +1 @@
1
- {"version":3,"file":"th.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"th.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -8,11 +8,12 @@ export interface DefinitionListDefinition {
8
8
  value: React.ReactNode;
9
9
  key: string;
10
10
  }
11
- export type DefinitionListLayout = `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;
11
+ type DefinitionListLayout = `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;
12
12
  export interface DefinitionListProps {
13
13
  definitions?: DefinitionListDefinition[];
14
14
  layout?: DefinitionListLayout;
15
15
  muted?: boolean;
16
16
  }
17
17
  export default function DefinitionList({ definitions, layout, muted, }: DefinitionListProps): import("react").JSX.Element;
18
+ export {};
18
19
  //# sourceMappingURL=DefinitionList.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"DefinitionList.d.ts","sourceRoot":"","sources":["../../../src/definitionList/DefinitionList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,MAAM,WAAW,wBAAwB;IACvC,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;KACtD,CAAC;IACF,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,MAAM,oBAAoB,GAC9B,GAAG,MAAM,CAAC,mBAAmB,GAAG,MAAM,CAAC,mBAAmB,GAAG,MAAM,CAAC,oBAAoB,GAAG,MAAM,CAAC,uBAAuB,GAAG,MAAM,CAAC,wBAAwB,EAAE,CAAC;AAEhK,MAAM,WAAW,mBAAmB;IAClC,WAAW,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACzC,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAoCD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,WAAgC,EAChC,MAA8B,EAC9B,KAAK,GACN,EAAE,mBAAmB,+BAmCrB"}
1
+ {"version":3,"file":"DefinitionList.d.ts","sourceRoot":"","sources":["../../../src/definitionList/DefinitionList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,MAAM,WAAW,wBAAwB;IACvC,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;KACtD,CAAC;IACF,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC;CACb;AAED,KAAK,oBAAoB,GACvB,GAAG,MAAM,CAAC,mBAAmB,GAAG,MAAM,CAAC,mBAAmB,GAAG,MAAM,CAAC,oBAAoB,GAAG,MAAM,CAAC,uBAAuB,GAAG,MAAM,CAAC,wBAAwB,EAAE,CAAC;AAEhK,MAAM,WAAW,mBAAmB;IAClC,WAAW,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACzC,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAoCD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,WAAgC,EAChC,MAA8B,EAC9B,KAAK,GACN,EAAE,mBAAmB,+BAmCrB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-94f7ff7",
3
+ "version": "0.0.0-experimental-5b8e94e",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -91,13 +91,13 @@
91
91
  "rollup": "^4.18.1",
92
92
  "rollup-preserve-directives": "^1.1.1",
93
93
  "storybook": "^8.2.2",
94
- "@transferwise/neptune-css": "0.0.0-experimental-94f7ff7",
95
- "@wise/components-theming": "1.6.1",
96
- "@transferwise/less-config": "3.1.0"
94
+ "@transferwise/less-config": "3.1.0",
95
+ "@transferwise/neptune-css": "0.0.0-experimental-5b8e94e",
96
+ "@wise/components-theming": "1.6.1"
97
97
  },
98
98
  "peerDependencies": {
99
99
  "@transferwise/icons": "^3.13.1",
100
- "@transferwise/neptune-css": "0.0.0-experimental-94f7ff7",
100
+ "@transferwise/neptune-css": "0.0.0-experimental-5b8e94e",
101
101
  "@wise/art": "^2.16",
102
102
  "@wise/components-theming": "^1.0.0",
103
103
  "react": ">=18",
@@ -11,6 +11,28 @@ const withContainer = (Story: any) => (
11
11
  </div>
12
12
  );
13
13
 
14
+ /**
15
+ * Used for showing multiple components within a Canvas.
16
+ * @decorator
17
+ */
18
+ const withComponentGrid =
19
+ (maxWidth = 'auto') =>
20
+ (Story: any) => (
21
+ <div
22
+ style={{
23
+ width: '100%',
24
+ placeItems: 'center',
25
+ justifyContent: 'center',
26
+ display: 'flex',
27
+ flexWrap: 'wrap',
28
+ gap: '2rem',
29
+ maxWidth,
30
+ }}
31
+ >
32
+ <Story />
33
+ </div>
34
+ );
35
+
14
36
  /**
15
37
  * Not all stories need access to all controls as it causes unnecessary UI noise.
16
38
  */
@@ -47,24 +69,6 @@ const augmentIconProps = ({ start = 'Freeze', end = 'ArrowRight' } = {}) => ({
47
69
  },
48
70
  });
49
71
 
50
- /**
51
- * Used for showing multiple components within a Canvas.
52
- * @decorator
53
- */
54
- const withComponentGrid = (columns: number) => (Story: any) => (
55
- <div
56
- style={{
57
- display: 'grid',
58
- gap: '2rem',
59
- gridTemplateColumns: `repeat(${columns}, auto)`,
60
- justifyItems: 'center',
61
- alignItems: 'center',
62
- }}
63
- >
64
- <Story />
65
- </div>
66
- );
67
-
68
72
  /**
69
73
  * Convenience controls for previewing rich markup,
70
74
  * not otherwise possible via Storybook
@@ -308,7 +312,7 @@ export const Sentiment: StoryObj<PreviewStoryArgs> = {
308
312
  previewIconEnd: false,
309
313
  previewAvatars: false,
310
314
  },
311
- decorators: [withComponentGrid(2)],
315
+ decorators: [withComponentGrid('30rem')],
312
316
  parameters: augmentIconProps(),
313
317
  };
314
318
 
@@ -347,7 +351,7 @@ export const Priority: StoryObj<PreviewStoryArgs> = {
347
351
  previewIconEnd: false,
348
352
  previewAvatars: false,
349
353
  },
350
- decorators: [withComponentGrid(4)],
354
+ decorators: [withComponentGrid()],
351
355
  };
352
356
 
353
357
  /**
@@ -381,7 +385,7 @@ export const Size: StoryObj<PreviewStoryArgs> = {
381
385
  previewIconEnd: false,
382
386
  previewAvatars: false,
383
387
  },
384
- decorators: [withComponentGrid(3)],
388
+ decorators: [withComponentGrid()],
385
389
  };
386
390
 
387
391
  /**
@@ -417,7 +421,7 @@ export const Disabled: StoryObj<PreviewStoryArgs> = {
417
421
 
418
422
  return (
419
423
  <Button {...props} {...previewProps}>
420
- Button as anchor
424
+ Disabled button
421
425
  </Button>
422
426
  );
423
427
  },
@@ -464,7 +468,7 @@ export const DisplayBlock: StoryObj<PreviewStoryArgs> = {
464
468
 
465
469
  return (
466
470
  <Button {...props} {...previewProps}>
467
- Button as anchor
471
+ Full-width button
468
472
  </Button>
469
473
  );
470
474
  },
@@ -529,7 +533,7 @@ export const WithIcons: StoryObj<PreviewStoryArgs> = {
529
533
  size: 'md',
530
534
  },
531
535
  parameters: augmentIconProps(),
532
- decorators: [withComponentGrid(3)],
536
+ decorators: [withComponentGrid()],
533
537
  };
534
538
 
535
539
  /**
@@ -599,7 +603,7 @@ export const WithAvatars: StoryObj<PreviewStoryArgs> = {
599
603
  },
600
604
  },
601
605
  },
602
- decorators: [withComponentGrid(4)],
606
+ decorators: [withComponentGrid()],
603
607
  };
604
608
 
605
609
  /**
@@ -0,0 +1,91 @@
1
+ import { shallow, mount } from 'enzyme';
2
+
3
+ import { DefinitionList } from '..';
4
+ import { Layout } from '../common';
5
+
6
+ const {
7
+ VERTICAL_TWO_COLUMN,
8
+ VERTICAL_ONE_COLUMN,
9
+ HORIZONTAL_LEFT_ALIGNED,
10
+ HORIZONTAL_RIGHT_ALIGNED,
11
+ HORIZONTAL_JUSTIFIED,
12
+ } = Layout;
13
+
14
+ describe('DefinitionList', () => {
15
+ const someDefinitions = () => [{ title: 'First', value: 'first value', key: 'first' }, null];
16
+
17
+ const withLayout = (layout) =>
18
+ shallow(<DefinitionList layout={layout} definitions={someDefinitions()} />);
19
+
20
+ const listHasClass = (layout, className) =>
21
+ withLayout(layout).find('dl.tw-definition-list').hasClass(className);
22
+
23
+ const valueHasClass = (layout, className) =>
24
+ withLayout(layout).find('dl.tw-definition-list dd').hasClass(className);
25
+
26
+ it('applies correct flex class', () => {
27
+ const colClass = 'flex-column';
28
+
29
+ expect(listHasClass(VERTICAL_ONE_COLUMN, colClass)).toBe(true);
30
+ expect(listHasClass(VERTICAL_TWO_COLUMN, colClass)).toBe(true);
31
+ expect(listHasClass(HORIZONTAL_LEFT_ALIGNED, colClass)).toBe(true);
32
+ expect(listHasClass(HORIZONTAL_RIGHT_ALIGNED, colClass)).toBe(true);
33
+ expect(listHasClass(HORIZONTAL_JUSTIFIED, colClass)).toBe(true);
34
+ });
35
+
36
+ it('applies correct class for vertical two-column layout', () => {
37
+ const colClass = 'tw-definition-list--columns flex-column flex-row--sm';
38
+
39
+ expect(listHasClass(VERTICAL_TWO_COLUMN, colClass)).toBe(true);
40
+ expect(listHasClass(VERTICAL_ONE_COLUMN, colClass)).toBe(false);
41
+ expect(listHasClass(HORIZONTAL_LEFT_ALIGNED, colClass)).toBe(false);
42
+ expect(listHasClass(HORIZONTAL_RIGHT_ALIGNED, colClass)).toBe(false);
43
+ expect(listHasClass(HORIZONTAL_JUSTIFIED, colClass)).toBe(false);
44
+ });
45
+
46
+ it('applies correct class for horiztonal layouts', () => {
47
+ const rowClass = 'tw-definition-list--horizontal flex-column';
48
+
49
+ expect(listHasClass(VERTICAL_TWO_COLUMN, rowClass)).toBe(false);
50
+ expect(listHasClass(VERTICAL_ONE_COLUMN, rowClass)).toBe(false);
51
+ expect(listHasClass(HORIZONTAL_LEFT_ALIGNED, rowClass)).toBe(true);
52
+ expect(listHasClass(HORIZONTAL_RIGHT_ALIGNED, rowClass)).toBe(true);
53
+ expect(listHasClass(HORIZONTAL_JUSTIFIED, rowClass)).toBe(true);
54
+ });
55
+
56
+ it('applies correct class for alignment', () => {
57
+ expect(valueHasClass(VERTICAL_TWO_COLUMN, 'd-flex justify-content-between')).toBe(true);
58
+ expect(valueHasClass(VERTICAL_ONE_COLUMN, 'd-flex justify-content-between')).toBe(true);
59
+ expect(valueHasClass(HORIZONTAL_LEFT_ALIGNED, 'd-flex justify-content-between')).toBe(true);
60
+ expect(valueHasClass(HORIZONTAL_RIGHT_ALIGNED, 'text-sm-right')).toBe(true);
61
+ expect(valueHasClass(HORIZONTAL_JUSTIFIED, 'text-sm-justify')).toBe(true);
62
+ });
63
+
64
+ it('has muted text class on title and value when muted flag is passed', () => {
65
+ const muted = shallow(<DefinitionList muted definitions={someDefinitions()} />);
66
+ const notMuted = shallow(<DefinitionList definitions={someDefinitions()} />);
67
+
68
+ expect(muted.find('dl.tw-definition-list').hasClass('text-muted')).toBe(true);
69
+ expect(notMuted.find('dl.tw-definition-list').hasClass('text-muted')).toBe(false);
70
+ });
71
+
72
+ it('shows action button when one is passed in', () => {
73
+ const buttonSpy = jest.fn();
74
+
75
+ const definitionList = mount(
76
+ <DefinitionList
77
+ definitions={[
78
+ {
79
+ title: 'Name',
80
+ value: 'Jenkins',
81
+ key: '1',
82
+ action: { label: 'A button', onClick: buttonSpy },
83
+ },
84
+ ]}
85
+ />,
86
+ );
87
+
88
+ definitionList.find('button').simulate('click');
89
+ expect(buttonSpy).toHaveBeenCalledTimes(1);
90
+ });
91
+ });
@@ -1,29 +1,19 @@
1
1
  import { action } from '@storybook/addon-actions';
2
+ import { select, text, boolean } from '@storybook/addon-knobs';
2
3
 
3
4
  import { Layout } from '../common';
4
5
 
5
- import DefinitionList, { type DefinitionListLayout } from './DefinitionList';
6
- import { lorem10 } from '../test-utils';
7
- import Section from '../section';
8
- import Header from '../header';
6
+ import DefinitionList from './DefinitionList';
9
7
 
10
8
  export default {
11
9
  component: DefinitionList,
12
10
  title: 'Typography/DefinitionList',
13
11
  };
14
12
 
15
- const layouts: DefinitionListLayout[] = [
16
- Layout.VERTICAL_TWO_COLUMN,
17
- Layout.VERTICAL_ONE_COLUMN,
18
- Layout.HORIZONTAL_JUSTIFIED,
19
- Layout.HORIZONTAL_LEFT_ALIGNED,
20
- Layout.HORIZONTAL_RIGHT_ALIGNED,
21
- ];
22
-
23
13
  const definitions = [
24
14
  {
25
- title: 'Definition List title',
26
- value: 'Definition List value',
15
+ title: text('title', 'Editable title'),
16
+ value: text('value', 'Editable value'),
27
17
  key: 'first',
28
18
  },
29
19
  {
@@ -33,57 +23,67 @@ const definitions = [
33
23
  },
34
24
  {
35
25
  title: 'Long strings will wrap',
36
- value: lorem10,
26
+ value: 'And values with long words will eventuallybreakontothenextline',
37
27
  key: 'third',
38
28
  },
39
29
  ];
40
30
 
41
31
  export const Basic = () => {
42
- return layouts.map((layout) => (
43
- <Section key={layout}>
44
- <Header title={`Instace of: ${layout}`} />
45
- <DefinitionList layout={layout} definitions={definitions} />
46
- </Section>
47
- ));
32
+ const muted = boolean('muted', false);
33
+ const layout = select(
34
+ 'layout',
35
+ [
36
+ Layout.VERTICAL_TWO_COLUMN,
37
+ Layout.VERTICAL_ONE_COLUMN,
38
+ Layout.HORIZONTAL_JUSTIFIED,
39
+ Layout.HORIZONTAL_LEFT_ALIGNED,
40
+ Layout.HORIZONTAL_RIGHT_ALIGNED,
41
+ ],
42
+ Layout.HORIZONTAL_LEFT_ALIGNED,
43
+ );
44
+
45
+ return <DefinitionList layout={layout} muted={muted} definitions={definitions} />;
48
46
  };
49
47
 
50
48
  export const WithActionButtons = () => {
51
- return (
52
- <>
53
- {layouts.map((layout) => (
54
- <Section key={layout}>
55
- <Header title={`Instace of: ${layout}`} />
56
- <DefinitionList
57
- key={layout}
58
- layout={layout}
59
- definitions={[
60
- ...definitions,
61
- {
62
- title: 'Action buttons are useful',
63
- value: lorem10,
64
- key: 'fourth',
65
- action: {
66
- label: 'Epic button',
67
- onClick: action(lorem10),
68
- },
69
- },
70
- {
71
- title: 'tiny',
72
- value: 'tiny',
73
- key: 'fifth',
74
- action: {
75
- label: 'Epic button',
76
- onClick: action(lorem10),
77
- },
78
- },
79
- ]}
80
- />
81
- </Section>
82
- ))}
83
- </>
49
+ const muted = boolean('muted', false);
50
+ const layout = select(
51
+ 'layout',
52
+ [
53
+ Layout.VERTICAL_TWO_COLUMN,
54
+ Layout.VERTICAL_ONE_COLUMN,
55
+ Layout.HORIZONTAL_JUSTIFIED,
56
+ Layout.HORIZONTAL_LEFT_ALIGNED,
57
+ Layout.HORIZONTAL_RIGHT_ALIGNED,
58
+ ],
59
+ Layout.HORIZONTAL_LEFT_ALIGNED,
84
60
  );
85
- };
86
61
 
87
- export const Muted = () => {
88
- return <DefinitionList muted definitions={definitions} />;
62
+ return (
63
+ <DefinitionList
64
+ layout={layout}
65
+ muted={muted}
66
+ definitions={[
67
+ ...definitions,
68
+ {
69
+ title: 'Action buttons are useful',
70
+ value: 'You can do all kinds of neat things with actions buttons!',
71
+ key: 'fourth',
72
+ action: {
73
+ label: 'Epic button',
74
+ onClick: action('Probably the best action event you have ever seen, in the world!'),
75
+ },
76
+ },
77
+ {
78
+ title: 'tiny',
79
+ value: 'tiny',
80
+ key: 'fifth',
81
+ action: {
82
+ label: 'Epic button',
83
+ onClick: action('Hello from the Tiny Button :)'),
84
+ },
85
+ },
86
+ ]}
87
+ />
88
+ );
89
89
  };
@@ -13,7 +13,7 @@ export interface DefinitionListDefinition {
13
13
  key: string;
14
14
  }
15
15
 
16
- export type DefinitionListLayout =
16
+ type DefinitionListLayout =
17
17
  `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;
18
18
 
19
19
  export interface DefinitionListProps {
package/src/i18n/de.json CHANGED
@@ -54,7 +54,6 @@
54
54
  "neptune.UploadButton.allFileTypes": "Alle Dateiformate",
55
55
  "neptune.UploadButton.dropFiles": "Datei zum Hochladen in dieses Feld ziehen",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}, kleiner als {size} MB",
57
- "neptune.UploadButton.maximumFiles": "Maximal {maxFiles} Dateien.",
58
57
  "neptune.UploadButton.uploadFile": "Datei hochladen",
59
58
  "neptune.UploadButton.uploadFiles": "Dateien hochladen",
60
59
  "neptune.UploadInput.deleteModalBody": "Wenn du diese Datei entfernst, wird sie aus unserem System gelöscht werden.",
package/src/i18n/it.json CHANGED
@@ -54,7 +54,6 @@
54
54
  "neptune.UploadButton.allFileTypes": "Tutti i tipi di file",
55
55
  "neptune.UploadButton.dropFiles": "Rilascia file per iniziare a caricare",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}, minore di {size}MB",
57
- "neptune.UploadButton.maximumFiles": "Max {maxFiles} file.",
58
57
  "neptune.UploadButton.uploadFile": "Carica un file",
59
58
  "neptune.UploadButton.uploadFiles": "Carica i file",
60
59
  "neptune.UploadInput.deleteModalBody": "Rimuovere questo file lo cancellerà dal nostro sistema.",
package/src/i18n/th.json CHANGED
@@ -54,7 +54,6 @@
54
54
  "neptune.UploadButton.allFileTypes": "ไฟล์ทุกประเภท",
55
55
  "neptune.UploadButton.dropFiles": "วางไฟล์เพื่อเริ่มการอัปโหลด",
56
56
  "neptune.UploadButton.instructions": "{fileTypes} น้อยกว่า {size} MB",
57
- "neptune.UploadButton.maximumFiles": "สูงสุด {maxFiles} ไฟล์",
58
57
  "neptune.UploadButton.uploadFile": "อัปโหลดไฟล์",
59
58
  "neptune.UploadButton.uploadFiles": "อัปโหลดไฟล์",
60
59
  "neptune.UploadInput.deleteModalBody": "การลบไฟล์นี้จะลบออกจากระบบของเรา",
@@ -0,0 +1,56 @@
1
+ import { shallow, mount } from 'enzyme';
2
+
3
+ import SlidingPanel from './SlidingPanel';
4
+
5
+ describe('SlidingPanel', () => {
6
+ let component;
7
+ const props = {
8
+ open: true,
9
+ position: 'left',
10
+ children: null,
11
+ className: undefined,
12
+ slidingPanelPositionFixed: false,
13
+ showSlidingPanelBorder: false,
14
+ testId: undefined,
15
+ };
16
+
17
+ it('renders with right props', () => {
18
+ component = mount(<SlidingPanel {...props} />);
19
+ expect(component.find(SlidingPanel)).toHaveLength(1);
20
+ expect(component.find(SlidingPanel).props()).toStrictEqual({ ...props });
21
+ });
22
+
23
+ it('renders CSSTransition with right props', () => {
24
+ component = shallow(<SlidingPanel {...props} />);
25
+
26
+ expect(cssTransition()).toHaveLength(1);
27
+
28
+ expect(cssTransition().props()).toEqual({
29
+ className: 'sliding-panel sliding-panel--open-left',
30
+ children: null,
31
+ });
32
+ });
33
+
34
+ it('adds fixed class', () => {
35
+ component = shallow(<SlidingPanel {...props} slidingPanelPositionFixed />);
36
+ expect(cssTransition().prop('className')).toBe(
37
+ 'sliding-panel sliding-panel--open-left sliding-panel--fixed',
38
+ );
39
+ });
40
+
41
+ it('adds border classes if showSlidingPanelBorder is set to true', () => {
42
+ component = shallow(<SlidingPanel {...props} showSlidingPanelBorder />);
43
+ expect(cssTransition().prop('className')).toBe(
44
+ 'sliding-panel sliding-panel--open-left sliding-panel--border-left',
45
+ );
46
+ component = shallow(<SlidingPanel {...props} showSlidingPanelBorder={false} position="left" />);
47
+ expect(cssTransition().prop('className')).toBe('sliding-panel sliding-panel--open-left');
48
+
49
+ component = shallow(<SlidingPanel {...props} showSlidingPanelBorder position="top" />);
50
+ expect(cssTransition().prop('className')).toBe(
51
+ 'sliding-panel sliding-panel--open-top sliding-panel--border-top',
52
+ );
53
+ });
54
+
55
+ const cssTransition = () => component.find('div');
56
+ });
@@ -1,69 +0,0 @@
1
- import { render, screen } from '../test-utils';
2
- import SlidingPanel, { SlidingPanelProps } from './SlidingPanel';
3
-
4
- describe('SlidingPanel', () => {
5
- const initialProps: SlidingPanelProps = {
6
- open: true,
7
- children: <div data-testid="content">Content</div>,
8
- testId: 'wrapper',
9
- };
10
-
11
- const customRender = (overrides: Partial<SlidingPanelProps> = {}) =>
12
- render(<SlidingPanel {...initialProps} {...overrides} />);
13
-
14
- describe('open', () => {
15
- it('should respect open=false', () => {
16
- customRender({ open: false });
17
- expect(screen.queryByTestId('wrapper')).not.toBeInTheDocument();
18
- });
19
-
20
- it('should respect open=true', () => {
21
- customRender();
22
- expect(screen.getByTestId('wrapper')).toBeInTheDocument();
23
- });
24
- });
25
-
26
- describe('position', () => {
27
- it(`should default to 'left'`, () => {
28
- customRender();
29
- expect(screen.queryByTestId('wrapper')).toHaveClass(`sliding-panel--open-left`);
30
- });
31
-
32
- (['left', 'right', 'top', 'bottom'] as const).forEach((position) => {
33
- describe(position, () => {
34
- it(`should add the classname`, () => {
35
- customRender({ position });
36
- expect(screen.queryByTestId('wrapper')).toHaveClass(`sliding-panel--open-${position}`);
37
- });
38
-
39
- it(`should add the classname for 'showSlidingPanelBorder'`, () => {
40
- customRender({ position, showSlidingPanelBorder: true });
41
- expect(screen.queryByTestId('wrapper')).toHaveClass(`sliding-panel--border-${position}`);
42
- });
43
- });
44
- });
45
- });
46
-
47
- it('should render children', () => {
48
- customRender();
49
- expect(screen.getByTestId('content')).toBeInTheDocument();
50
- });
51
-
52
- it('should respect className', () => {
53
- const className = 'customClass';
54
- customRender({ className });
55
- expect(screen.getByTestId('wrapper')).toHaveClass(className);
56
- });
57
-
58
- describe('slidingPanelPositionFixed', () => {
59
- it('should not be fixed by default', () => {
60
- customRender();
61
- expect(screen.getByTestId('wrapper')).not.toHaveClass('sliding-panel--fixed');
62
- });
63
-
64
- it('should respect slidingPanelPositionFixed=true', () => {
65
- customRender({ slidingPanelPositionFixed: true });
66
- expect(screen.getByTestId('wrapper')).toHaveClass('sliding-panel--fixed');
67
- });
68
- });
69
- });