norma-library 0.5.141 → 0.5.142

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 (5) hide show
  1. package/dist/esm/components/RangerSlider.js +7 -5
  2. package/dist/esm/components/RangerSlider.js.map +1 -1
  3. package/package.json +1 -1
  4. package/src/components/RangerSlider.tsx +7 -7
  5. package/src/stories/RangerSlider.stories.tsx +10 -19
package/dist/esm/components/RangerSlider.js CHANGED
@@ -14,6 +14,7 @@ var colorMap = {
14
14
  };
15
15
  var RangerSliderStyled = styled(MuiSlider)(function () { return ({
16
16
  height: 8,
17
+ color: colorMap['primary'],
17
18
  '& .MuiSlider-track': {
18
19
  border: 'none',
19
20
  },
@@ -36,16 +37,17 @@ var RangerSliderStyled = styled(MuiSlider)(function () { return ({
36
37
  '& .MuiSlider-valueLabel': {
37
38
  fontSize: 12,
38
39
  fontWeight: 'normal',
39
- top: 40,
40
+ top: 48,
40
41
  position: 'absolute',
41
- backgroundColor: 'unset',
42
+ transition: 'none',
42
43
  color: colorMap['primary'],
43
44
  '&:before': {
44
- display: 'none',
45
+ bottom: 'inherit',
46
+ top: '-8px',
45
47
  },
46
48
  '& *': {
47
49
  background: 'transparent',
48
- color: '#000',
50
+ color: '#FFF',
49
51
  },
50
52
  },
51
53
  '& .MuiSlider-rail': {
@@ -56,6 +58,6 @@ var RangerSliderStyled = styled(MuiSlider)(function () { return ({
56
58
  }); });
57
59
  export var RangerSlider = function (_a) {
58
60
  var _b = _a.defaultValue, defaultValue = _b === void 0 ? 50 : _b, _c = _a.color, color = _c === void 0 ? 'primary' : _c, props = __rest(_a, ["defaultValue", "color"]);
59
- return (React.createElement(RangerSliderStyled, __assign({ "aria-label": "Default", color: color }, props)));
61
+ return React.createElement(RangerSliderStyled, __assign({ "aria-label": "Default", color: color }, props));
60
62
  };
61
63
  //# sourceMappingURL=RangerSlider.js.map
package/dist/esm/components/RangerSlider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RangerSlider.js","sourceRoot":"","sources":["../../../src/components/RangerSlider.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAI9C,IAAM,QAAQ,GAAiC;IAC7C,OAAO,EAAE,OAAO,CAAC,OAAO;IACxB,OAAO,EAAE,OAAO,CAAC,OAAO;IACxB,SAAS,EAAE,OAAO,CAAC,SAAS;IAC5B,KAAK,EAAE,OAAO,CAAC,KAAK;IACpB,OAAO,EAAE,OAAO,CAAC,OAAO;IACxB,IAAI,EAAE,OAAO,CAAC,IAAI;IAClB,OAAO,EAAE,OAAO,CAAC,OAAO;CACzB,CAAC;AAEF,IAAM,kBAAkB,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,cAAM,OAAA,CAAC;IAClD,MAAM,EAAE,CAAC;IACT,oBAAoB,EAAE;QACpB,MAAM,EAAE,MAAM;KACf;IACD,oBAAoB,EAAE;QACpB,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,EAAE;QACT,eAAe,EAAE,MAAM;QACvB,MAAM,EAAE,oBAAa,QAAQ,CAAC,SAAS,CAAC,CAAE;QAC1C,oDAAoD,EAAE;YACpD,SAAS,EAAE,SAAS;SACrB;QACD,UAAU,EAAE;YACV,KAAK,EAAE,KAAK;YACZ,MAAM,EAAE,KAAK;YACb,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,OAAO;YAChB,UAAU,EAAE,QAAQ,CAAC,SAAS,CAAC;SAChC;KACF;IACD,yBAAyB,EAAE;QACzB,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,EAAE;QACP,QAAQ,EAAE,UAAU;QACpB,eAAe,EAAE,OAAO;QACxB,KAAK,EAAE,QAAQ,CAAC,SAAS,CAAC;QAC1B,UAAU,EAAE;YACV,OAAO,EAAE,MAAM;SAChB;QACD,KAAK,EAAE;YACL,UAAU,EAAE,aAAa;YACzB,KAAK,EAAE,MAAM;SACd;KACF;IACD,mBAAmB,EAAE;QACnB,KAAK,EAAE,UAAU;QACjB,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,EAAE;KACX;CACF,CAAC,EAzCiD,CAyCjD,CAAC,CAAC;AAEJ,MAAM,CAAC,IAAM,YAAY,GAAG,UAAC,EAAyE;IAAvE,IAAA,oBAAiB,EAAjB,YAAY,mBAAG,EAAE,KAAA,EAAE,aAAiB,EAAjB,KAAK,mBAAG,SAAS,KAAA,EAAK,KAAK,cAAhD,yBAAkD,CAAF;IAC3E,OAAO,CACL,oBAAC,kBAAkB,2BAAY,SAAS,EAAC,KAAK,EAAE,KAAK,IAAM,KAAK,EAAI,CACrE,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"RangerSlider.js","sourceRoot":"","sources":["../../../src/components/RangerSlider.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAI9C,IAAM,QAAQ,GAAiC;IAC7C,OAAO,EAAE,OAAO,CAAC,OAAO;IACxB,OAAO,EAAE,OAAO,CAAC,OAAO;IACxB,SAAS,EAAE,OAAO,CAAC,SAAS;IAC5B,KAAK,EAAE,OAAO,CAAC,KAAK;IACpB,OAAO,EAAE,OAAO,CAAC,OAAO;IACxB,IAAI,EAAE,OAAO,CAAC,IAAI;IAClB,OAAO,EAAE,OAAO,CAAC,OAAO;CACzB,CAAC;AAEF,IAAM,kBAAkB,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,cAAM,OAAA,CAAC;IAClD,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC1B,oBAAoB,EAAE;QACpB,MAAM,EAAE,MAAM;KACf;IACD,oBAAoB,EAAE;QACpB,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,EAAE;QACT,eAAe,EAAE,MAAM;QACvB,MAAM,EAAE,oBAAa,QAAQ,CAAC,SAAS,CAAC,CAAE;QAC1C,oDAAoD,EAAE;YACpD,SAAS,EAAE,SAAS;SACrB;QACD,UAAU,EAAE;YACV,KAAK,EAAE,KAAK;YACZ,MAAM,EAAE,KAAK;YACb,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,OAAO;YAChB,UAAU,EAAE,QAAQ,CAAC,SAAS,CAAC;SAChC;KACF;IACD,yBAAyB,EAAE;QACzB,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,EAAE;QACP,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,MAAM;QAClB,KAAK,EAAE,QAAQ,CAAC,SAAS,CAAC;QAC1B,UAAU,EAAE;YACV,MAAM,EAAE,SAAS;YACjB,GAAG,EAAE,MAAM;SACZ;QACD,KAAK,EAAE;YACL,UAAU,EAAE,aAAa;YACzB,KAAK,EAAE,MAAM;SACd;KACF;IACD,mBAAmB,EAAE;QACnB,KAAK,EAAE,UAAU;QACjB,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,EAAE;KACX;CACF,CAAC,EA3CiD,CA2CjD,CAAC,CAAC;AAEJ,MAAM,CAAC,IAAM,YAAY,GAAG,UAAC,EAAyE;IAAvE,IAAA,oBAAiB,EAAjB,YAAY,mBAAG,EAAE,KAAA,EAAE,aAAiB,EAAjB,KAAK,mBAAG,SAAS,KAAA,EAAK,KAAK,cAAhD,yBAAkD,CAAF;IAC3E,OAAO,oBAAC,kBAAkB,2BAAY,SAAS,EAAC,KAAK,EAAE,KAAK,IAAM,KAAK,EAAI,CAAC;AAC9E,CAAC,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "norma-library",
3
- "version": "0.5.141",
3
+ "version": "0.5.142",
4
4
  "private": false,
5
5
  "description": "Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.",
6
6
  "scripts": {
package/src/components/RangerSlider.tsx CHANGED
@@ -17,6 +17,7 @@ const colorMap: Record<ColorVariant, string> = {
17
17
 
18
18
  const RangerSliderStyled = styled(MuiSlider)(() => ({
19
19
  height: 8,
20
+ color: colorMap['primary'],
20
21
  '& .MuiSlider-track': {
21
22
  border: 'none',
22
23
  },
@@ -39,16 +40,17 @@ const RangerSliderStyled = styled(MuiSlider)(() => ({
39
40
  '& .MuiSlider-valueLabel': {
40
41
  fontSize: 12,
41
42
  fontWeight: 'normal',
42
- top: 40,
43
+ top: 48,
43
44
  position: 'absolute',
44
- backgroundColor: 'unset',
45
+ transition: 'none',
45
46
  color: colorMap['primary'],
46
47
  '&:before': {
47
- display: 'none',
48
+ bottom: 'inherit',
49
+ top: '-8px',
48
50
  },
49
51
  '& *': {
50
52
  background: 'transparent',
51
- color: '#000',
53
+ color: '#FFF',
52
54
  },
53
55
  },
54
56
  '& .MuiSlider-rail': {
@@ -59,7 +61,5 @@ const RangerSliderStyled = styled(MuiSlider)(() => ({
59
61
  }));
60
62
 
61
63
  export const RangerSlider = ({ defaultValue = 50, color = 'primary', ...props }: RangerSliderBaseProps) => {
62
- return (
63
- <RangerSliderStyled aria-label="Default" color={color} {...props} />
64
- );
64
+ return <RangerSliderStyled aria-label="Default" color={color} {...props} />;
65
65
  };
package/src/stories/RangerSlider.stories.tsx CHANGED
@@ -2,6 +2,7 @@ import React from 'react';
2
2
  import type { Meta, StoryObj } from '@storybook/react';
3
3
  import { RangerSlider } from '../components';
4
4
  import { ColorVariant, TextFieldSizeVariant } from '../types';
5
+ import { TextField } from '@mui/material';
5
6
 
6
7
  const colors: ColorVariant[] = ['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'];
7
8
  const sizes: TextFieldSizeVariant[] = ['small', 'medium'];
@@ -65,10 +66,6 @@ export default meta;
65
66
 
66
67
  type Story = StoryObj<typeof meta>;
67
68
 
68
- function valuetext(value: number) {
69
- return `${value}°C`;
70
- }
71
-
72
69
  export const RangerSliderBasic: Story = {
73
70
  args: {
74
71
  value: [20, 37],
@@ -80,21 +77,17 @@ export const RangerSliderBasic: Story = {
80
77
  control: { type: 'array' },
81
78
  },
82
79
  },
83
- render: (args) => {
80
+ render: args => {
84
81
  const [value, setValue] = React.useState<number[]>(args.value);
85
82
 
86
83
  const handleChange = (event: Event, newValue: number | number[]) => {
87
84
  setValue(newValue as number[]);
88
- args.onChange?.(event, newValue, 0);
85
+ args.onChange?.(event, newValue, 0);
89
86
  };
90
87
 
91
88
  return (
92
89
  <div style={{ display: 'flex', gap: '1rem', width: '480px', marginBottom: 30 }}>
93
- <RangerSlider
94
- {...args}
95
- value={value}
96
- onChange={handleChange}
97
- />
90
+ <RangerSlider {...args} value={value} onChange={handleChange} />
98
91
  </div>
99
92
  );
100
93
  },
@@ -104,7 +97,7 @@ export const RangerSliderBasic: Story = {
104
97
  export const RangerSliderFormatter: Story = {
105
98
  args: {
106
99
  value: [0, 540],
107
- valueLabelDisplay: 'on',
100
+ valueLabelDisplay: 'auto',
108
101
  getAriaLabel: () => 'Faixa de tempo',
109
102
  valueLabelFormat: (value: number) => {
110
103
  if (value < 60) {
@@ -136,21 +129,19 @@ export const RangerSliderFormatter: Story = {
136
129
  control: { type: 'array' },
137
130
  },
138
131
  },
139
- render: (args) => {
132
+ render: args => {
140
133
  const [value, setValue] = React.useState<number[]>(args.value);
141
134
 
142
135
  const handleChange = (event: Event, newValue: number | number[]) => {
143
136
  setValue(newValue as number[]);
144
- args.onChange?.(event, newValue, 0);
137
+ args.onChange?.(event, newValue, 0);
145
138
  };
146
139
 
147
140
  return (
148
141
  <div style={{ display: 'flex', gap: '1rem', width: '480px', marginBottom: 30 }}>
149
- <RangerSlider
150
- {...args}
151
- value={value}
152
- onChange={handleChange}
153
- />
142
+ {/* <TextField size="small" variant='standard' /> */}
143
+ <RangerSlider {...args} value={value} onChange={handleChange} />
144
+ {/* <TextField size="small" variant='standard' /> */}
154
145
  </div>
155
146
  );
156
147
  },