@stack-spot/portal-components 1.1.0 → 1.1.1

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/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # Changelog
2
2
 
3
+ ## [1.1.1](https://github.com/stack-spot/portal-commons/compare/portal-components@v1.1.0...portal-components@v1.1.1) (2024-06-06)
4
+
5
+
6
+ ### Bug Fixes
7
+
8
+ * Improve tour navigation texts and layout ([2c3ce04](https://github.com/stack-spot/portal-commons/commit/2c3ce0448fa998d3a2859d4df8d98d40278e5cdb))
9
+
3
10
  ## [1.1.0](https://github.com/stack-spot/portal-commons/compare/portal-components-v1.0.1...portal-components@v1.1.0) (2024-06-05)
4
11
 
5
12
 
@@ -1 +1 @@
1
- {"version":3,"file":"StepNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/Tour/StepNavigation.tsx"],"names":[],"mappings":"AACA,OAAO,yCAAyC,CAAA;AAKhD,UAAU,sBAAsB;IAC9B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,UAAU,CAAC,EAAE,sBAAsB,CAAC;IACpC;;OAEG;IACH,UAAU,CAAC,EAAE,sBAAsB,CAAC;CACrC;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,wCAAyC,eAAe,4CAsBlF,CAAA"}
1
+ {"version":3,"file":"StepNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/Tour/StepNavigation.tsx"],"names":[],"mappings":"AACA,OAAO,yCAAyC,CAAA;AAKhD,UAAU,sBAAsB;IAC9B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,UAAU,CAAC,EAAE,sBAAsB,CAAC;IACpC;;OAEG;IACH,UAAU,CAAC,EAAE,sBAAsB,CAAC;CACrC;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,wCAAyC,eAAe,4CAuBlF,CAAA"}
@@ -10,15 +10,29 @@ import { finishTourStep } from './utils.js';
10
10
  */
11
11
  export const StepNavigation = ({ stepKey, nextButton, prevButton }) => {
12
12
  const { currentStep, steps, nextStep, prevStep } = useTour();
13
- const t = useTranslate({ en: { of: 'of', back: 'back' }, pt: { of: 'de', back: 'voltar' } });
14
- return _jsxs(Flex, { w: 12, px: 5, py: 2, mt: "-1px", bg: "inverse.500", justifyContent: "space-between", children: [_jsxs(Text, { appearance: "microtext1", colorScheme: "inverse.contrastText", children: [currentStep + 1, " ", t.of, " ", steps.length] }), _jsxs(Flex, { sx: { gap: '8px' }, children: [currentStep >= 1 &&
13
+ const t = useTranslate(translations);
14
+ return _jsxs(Flex, { w: 12, px: 5, py: 2, mt: "-1px", bg: "inverse.500", justifyContent: "space-between", alignItems: "center", children: [_jsxs(Text, { appearance: "microtext1", colorScheme: "inverse.contrastText", children: [currentStep + 1, " ", t.of, " ", steps.length] }), _jsxs(Flex, { sx: { gap: '8px' }, children: [currentStep >= 1 &&
15
15
  _jsx(Button, { sx: { paddingInline: '20px' }, onClick: () => {
16
16
  prevStep?.();
17
17
  prevButton?.onClick?.();
18
- }, size: "sm", colorScheme: "light", children: prevButton?.text || t.back }), _jsx(Button, { sx: { paddingInline: '20px' }, onClick: () => {
18
+ }, size: "sm", appearance: "text", colorScheme: "light", children: prevButton?.text || t.back }), _jsx(Button, { sx: { paddingInline: '20px' }, onClick: () => {
19
19
  nextButton?.onClick?.();
20
20
  nextStep?.();
21
21
  finishTourStep(stepKey);
22
- }, size: "sm", colorScheme: "light", children: nextButton?.text || 'ok' })] })] });
22
+ }, size: "sm", colorScheme: "light", children: nextButton?.text || (currentStep < steps.length - 1 ? t.next : t.done) })] })] });
23
+ };
24
+ const translations = {
25
+ en: {
26
+ of: 'of',
27
+ back: 'Back',
28
+ next: 'Next',
29
+ done: 'Done',
30
+ },
31
+ pt: {
32
+ of: 'de',
33
+ back: 'Voltar',
34
+ next: 'Próximo',
35
+ done: 'Finalizado',
36
+ },
23
37
  };
24
38
  //# sourceMappingURL=StepNavigation.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"StepNavigation.js","sourceRoot":"","sources":["../../../src/components/Tour/StepNavigation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACjD,OAAO,yCAAyC,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAyBxC;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAmB,EAAE,EAAE;IACrF,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,OAAO,EAAE,CAAA;IAC5D,MAAM,CAAC,GAAG,YAAY,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAA;IAC5F,OAAO,MAAC,IAAI,IAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,aAAa,EAAC,cAAc,EAAC,eAAe,aACzF,MAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,WAAW,EAAC,sBAAsB,aAAE,WAAW,GAAG,CAAC,OAAG,CAAC,CAAC,EAAE,OAAG,KAAK,CAAC,MAAM,IAAQ,EAC/G,MAAC,IAAI,IAAC,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,aACrB,WAAW,IAAI,CAAC;wBACf,KAAC,MAAM,IAAC,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;gCACnD,QAAQ,EAAE,EAAE,CAAA;gCACZ,UAAU,EAAE,OAAO,EAAE,EAAE,CAAA;4BACzB,CAAC,EAAE,IAAI,EAAC,IAAI,EAAC,WAAW,EAAC,OAAO,YAC7B,UAAU,EAAE,IAAI,IAAI,CAAC,CAAC,IAAI,GACpB,EACX,KAAC,MAAM,IAAC,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;4BACnD,UAAU,EAAE,OAAO,EAAE,EAAE,CAAA;4BACvB,QAAQ,EAAE,EAAE,CAAA;4BACZ,cAAc,CAAC,OAAO,CAAC,CAAA;wBACzB,CAAC,EAAE,IAAI,EAAC,IAAI,EAAC,WAAW,EAAC,OAAO,YAC7B,UAAU,EAAE,IAAI,IAAI,IAAI,GAClB,IACJ,IACF,CAAA;AACT,CAAC,CAAA"}
1
+ {"version":3,"file":"StepNavigation.js","sourceRoot":"","sources":["../../../src/components/Tour/StepNavigation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACjD,OAAO,yCAAyC,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAyBxC;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAmB,EAAE,EAAE;IACrF,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,OAAO,EAAE,CAAA;IAC5D,MAAM,CAAC,GAAG,YAAY,CAAC,YAAY,CAAC,CAAA;IAEpC,OAAO,MAAC,IAAI,IAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,aAAa,EAAC,cAAc,EAAC,eAAe,EAAC,UAAU,EAAC,QAAQ,aAC7G,MAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,WAAW,EAAC,sBAAsB,aAAE,WAAW,GAAG,CAAC,OAAG,CAAC,CAAC,EAAE,OAAG,KAAK,CAAC,MAAM,IAAQ,EAC/G,MAAC,IAAI,IAAC,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,aACrB,WAAW,IAAI,CAAC;wBACf,KAAC,MAAM,IAAC,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;gCACnD,QAAQ,EAAE,EAAE,CAAA;gCACZ,UAAU,EAAE,OAAO,EAAE,EAAE,CAAA;4BACzB,CAAC,EAAE,IAAI,EAAC,IAAI,EAAC,UAAU,EAAC,MAAM,EAAC,WAAW,EAAC,OAAO,YAC/C,UAAU,EAAE,IAAI,IAAI,CAAC,CAAC,IAAI,GACpB,EACX,KAAC,MAAM,IAAC,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;4BACnD,UAAU,EAAE,OAAO,EAAE,EAAE,CAAA;4BACvB,QAAQ,EAAE,EAAE,CAAA;4BACZ,cAAc,CAAC,OAAO,CAAC,CAAA;wBACzB,CAAC,EAAE,IAAI,EAAC,IAAI,EAAC,WAAW,EAAC,OAAO,YAC7B,UAAU,EAAE,IAAI,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAChE,IACJ,IACF,CAAA;AACT,CAAC,CAAA;AAED,MAAM,YAAY,GAAG;IACnB,EAAE,EAAE;QACF,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;KACb;IACD,EAAE,EAAE;QACF,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,YAAY;KACnB;CACF,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stack-spot/portal-components",
3
- "version": "1.1.0",
3
+ "version": "1.1.1",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -33,15 +33,16 @@ export interface NavigationProps {
33
33
  */
34
34
  export const StepNavigation = ({ stepKey, nextButton, prevButton }: NavigationProps) => {
35
35
  const { currentStep, steps, nextStep, prevStep } = useTour()
36
- const t = useTranslate({ en: { of: 'of', back: 'back' }, pt: { of: 'de', back: 'voltar' } })
37
- return <Flex w={12} px={5} py={2} mt="-1px" bg="inverse.500" justifyContent="space-between">
36
+ const t = useTranslate(translations)
37
+
38
+ return <Flex w={12} px={5} py={2} mt="-1px" bg="inverse.500" justifyContent="space-between" alignItems="center">
38
39
  <Text appearance="microtext1" colorScheme="inverse.contrastText">{currentStep + 1} {t.of} {steps.length}</Text>
39
40
  <Flex sx={{ gap: '8px' }}>
40
41
  {currentStep >= 1 &&
41
42
  <Button sx={{ paddingInline: '20px' }} onClick={() => {
42
43
  prevStep?.()
43
44
  prevButton?.onClick?.()
44
- }} size="sm" colorScheme="light">
45
+ }} size="sm" appearance="text" colorScheme="light">
45
46
  {prevButton?.text || t.back}
46
47
  </Button>}
47
48
  <Button sx={{ paddingInline: '20px' }} onClick={() => {
@@ -49,8 +50,23 @@ export const StepNavigation = ({ stepKey, nextButton, prevButton }: NavigationPr
49
50
  nextStep?.()
50
51
  finishTourStep(stepKey)
51
52
  }} size="sm" colorScheme="light">
52
- {nextButton?.text || 'ok'}
53
+ {nextButton?.text || (currentStep < steps.length - 1 ? t.next : t.done)}
53
54
  </Button>
54
55
  </Flex>
55
56
  </Flex>
56
57
  }
58
+
59
+ const translations = {
60
+ en: {
61
+ of: 'of',
62
+ back: 'Back',
63
+ next: 'Next',
64
+ done: 'Done',
65
+ },
66
+ pt: {
67
+ of: 'de',
68
+ back: 'Voltar',
69
+ next: 'Próximo',
70
+ done: 'Finalizado',
71
+ },
72
+ }