@scality/core-ui 0.148.0 → 0.150.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 (7) hide show
  1. package/dist/components/accordion/Accordion.component.d.ts.map +1 -1
  2. package/dist/components/accordion/Accordion.component.js +9 -4
  3. package/dist/components/constants.d.ts +1 -1
  4. package/dist/components/constants.d.ts.map +1 -1
  5. package/package.json +1 -1
  6. package/src/lib/components/accordion/Accordion.component.tsx +12 -6
  7. package/src/lib/components/constants.ts +8 -2
package/dist/components/accordion/Accordion.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Accordion.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/accordion/Accordion.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAUxC,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AA4BF,eAAO,MAAM,SAAS,mCAAoC,cAAc,4CAuDvE,CAAC"}
1
+ {"version":3,"file":"Accordion.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/accordion/Accordion.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAUxC,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAkCF,eAAO,MAAM,SAAS,mCAAoC,cAAc,4CAuDvE,CAAC"}
package/dist/components/accordion/Accordion.component.js CHANGED
@@ -5,6 +5,10 @@ import { Box } from '../box/Box';
5
5
  import { Icon } from '../icon/Icon.component';
6
6
  import styled from 'styled-components';
7
7
  import { Text } from '../text/Text.component';
8
+ const AccordionContainer = styled(Box) `
9
+ width: 100%;
10
+ height: auto;
11
+ `;
8
12
  const AccordionHeader = styled.button `
9
13
  -webkit-appearance: none;
10
14
  -moz-appearance: none;
@@ -15,8 +19,9 @@ const AccordionHeader = styled.button `
15
19
  background-color: transparent;
16
20
  color: ${(props) => props.theme.textPrimary};
17
21
  padding: 0;
22
+ font-family: 'Lato';
18
23
  `;
19
- const AccordionContainer = styled.div `
24
+ const AccordionContent = styled.div `
20
25
  overflow: hidden;
21
26
  opacity: ${(props) => (props.isOpen ? 1 : 0)};
22
27
  transition:
@@ -26,17 +31,17 @@ const AccordionContainer = styled.div `
26
31
  visibility: ${(props) => (props.isOpen ? 'visible' : 'hidden')};
27
32
  `;
28
33
  const Wrapper = styled.div `
29
- padding: ${spacing.r8} 0 ${spacing.r8} ${spacing.r20};
34
+ padding: ${spacing.r8} 0 ${spacing.r8} 0;
30
35
  `;
31
36
  export const Accordion = ({ title, id, style, children }) => {
32
37
  const [isOpen, setIsOpen] = useState(false);
33
38
  const handleToggleContent = (e) => {
34
39
  setIsOpen((prev) => !prev);
35
40
  };
36
- return (_jsxs(Box, { style: { width: '100%', height: 'auto' }, children: [_jsx("h3", { style: { margin: 0 }, children: _jsx(AccordionHeader, { type: "button", id: `Accordion-header-${id}`, onClick: handleToggleContent, "aria-controls": id, "aria-expanded": isOpen, onKeyDown: (e) => (e.key === 'Enter' || e.key === ' ') && handleToggleContent, children: _jsxs(Stack, { direction: "horizontal", gap: "r8", children: [_jsx(Icon, { name: "Chevron-up", size: "lg", style: {
41
+ return (_jsxs(AccordionContainer, { children: [_jsx("h3", { style: { margin: 0 }, children: _jsx(AccordionHeader, { type: "button", id: `Accordion-header-${id}`, onClick: handleToggleContent, "aria-controls": id, "aria-expanded": isOpen, onKeyDown: (e) => (e.key === 'Enter' || e.key === ' ') && handleToggleContent, children: _jsxs(Stack, { direction: "horizontal", gap: "r8", children: [_jsx(Icon, { name: "Chevron-up", size: "lg", style: {
37
42
  transform: isOpen ? 'rotate(0deg)' : 'rotate(180deg)',
38
43
  transition: 'transform 0.3s ease-in',
39
- } }), _jsx(Text, { isEmphazed: true, children: title })] }) }) }), _jsx(AccordionContainer, { ref: (element) => {
44
+ } }), _jsx(Text, { isEmphazed: true, children: title })] }) }) }), _jsx(AccordionContent, { ref: (element) => {
40
45
  if (isOpen) {
41
46
  element === null || element === void 0 ? void 0 : element.style.setProperty('height', element.scrollHeight + 'px');
42
47
  }
package/dist/components/constants.d.ts CHANGED
@@ -23,5 +23,5 @@ export type QueryTimeSpan = {
23
23
  };
24
24
  export declare const queryTimeSpansCodes: QueryTimeSpan[];
25
25
  export declare const NAN_STRING = "NAN";
26
- export type Status = 'unknown' | 'healthy' | 'warning' | 'critical';
26
+ export type Status = 'none' | 'unknown' | 'info' | 'healthy' | 'warning' | 'critical';
27
27
  //# sourceMappingURL=constants.d.ts.map
package/dist/components/constants.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/lib/components/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,EAAE;KAAG,GAAG,IAAI,IAAI,GAAG,GAAG;CAQ7C,CAAC;AACF,MAAM,MAAM,IAAI,GACZ,SAAS,GACT,OAAO,GACP,MAAM,GACN,OAAO,GACP,QAAQ,GACR,MAAM,GACN,SAAS,CAAC;AAEd,MAAM,MAAM,OAAO,GAAI,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAG9E,eAAO,MAAM,qBAAqB,WAAW,CAAC;AAC9C,eAAO,MAAM,4BAA4B,YAAY,CAAC;AACtD,eAAO,MAAM,mBAAmB,WAAW,CAAC;AAE5C,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAC7C,eAAO,MAAM,sBAAsB,kBAAkB,CAAC;AACtD,eAAO,MAAM,aAAa,gBAAgB,CAAC;AAE3C,eAAO,MAAM,+BAA+B,QAAmB,CAAC;AAChE,eAAO,MAAM,sCAAsC,QAAe,CAAC;AACnE,eAAO,MAAM,6BAA6B,QAAU,CAAC;AAErD,eAAO,MAAM,gCAAgC,QAAU,CAAC;AACxD,eAAO,MAAM,uCAAuC,MAAM,CAAC;AAC3D,eAAO,MAAM,8BAA8B,KAAK,CAAC;AACjD,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IAEd,KAAK,EAAE,MAAM,CAAC;IAEd,QAAQ,EAAE,MAAM,CAAC;IAEjB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AACF,eAAO,MAAM,mBAAmB,EAAE,aAAa,EAmB9C,CAAC;AACF,eAAO,MAAM,UAAU,QAAQ,CAAC;AAChC,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC"}
1
+ {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/lib/components/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,EAAE;KAAG,GAAG,IAAI,IAAI,GAAG,GAAG;CAQ7C,CAAC;AACF,MAAM,MAAM,IAAI,GACZ,SAAS,GACT,OAAO,GACP,MAAM,GACN,OAAO,GACP,QAAQ,GACR,MAAM,GACN,SAAS,CAAC;AAEd,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAG7E,eAAO,MAAM,qBAAqB,WAAW,CAAC;AAC9C,eAAO,MAAM,4BAA4B,YAAY,CAAC;AACtD,eAAO,MAAM,mBAAmB,WAAW,CAAC;AAE5C,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAC7C,eAAO,MAAM,sBAAsB,kBAAkB,CAAC;AACtD,eAAO,MAAM,aAAa,gBAAgB,CAAC;AAE3C,eAAO,MAAM,+BAA+B,QAAmB,CAAC;AAChE,eAAO,MAAM,sCAAsC,QAAe,CAAC;AACnE,eAAO,MAAM,6BAA6B,QAAU,CAAC;AAErD,eAAO,MAAM,gCAAgC,QAAU,CAAC;AACxD,eAAO,MAAM,uCAAuC,MAAM,CAAC;AAC3D,eAAO,MAAM,8BAA8B,KAAK,CAAC;AACjD,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IAEd,KAAK,EAAE,MAAM,CAAC;IAEd,QAAQ,EAAE,MAAM,CAAC;IAEjB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AACF,eAAO,MAAM,mBAAmB,EAAE,aAAa,EAmB9C,CAAC;AACF,eAAO,MAAM,UAAU,QAAQ,CAAC;AAChC,MAAM,MAAM,MAAM,GACd,MAAM,GACN,SAAS,GACT,MAAM,GACN,SAAS,GACT,SAAS,GACT,UAAU,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scality/core-ui",
3
- "version": "0.148.0",
3
+ "version": "0.150.0",
4
4
  "description": "Scality common React component library",
5
5
  "author": "Scality Engineering",
6
6
  "license": "SEE LICENSE IN LICENSE",
package/src/lib/components/accordion/Accordion.component.tsx CHANGED
@@ -15,6 +15,11 @@ export type AccordionProps = {
15
15
  style?: React.CSSProperties;
16
16
  };
17
17
 
18
+ const AccordionContainer = styled(Box)`
19
+ width: 100%;
20
+ height: auto;
21
+ `;
22
+
18
23
  const AccordionHeader = styled.button`
19
24
  -webkit-appearance: none;
20
25
  -moz-appearance: none;
@@ -25,8 +30,9 @@ const AccordionHeader = styled.button`
25
30
  background-color: transparent;
26
31
  color: ${(props) => props.theme.textPrimary};
27
32
  padding: 0;
33
+ font-family: 'Lato';
28
34
  `;
29
- const AccordionContainer = styled.div<{
35
+ const AccordionContent = styled.div<{
30
36
  isOpen: boolean;
31
37
  }>`
32
38
  overflow: hidden;
@@ -38,7 +44,7 @@ const AccordionContainer = styled.div<{
38
44
  visibility: ${(props) => (props.isOpen ? 'visible' : 'hidden')};
39
45
  `;
40
46
  const Wrapper = styled.div`
41
- padding: ${spacing.r8} 0 ${spacing.r8} ${spacing.r20};
47
+ padding: ${spacing.r8} 0 ${spacing.r8} 0;
42
48
  `;
43
49
 
44
50
  export const Accordion = ({ title, id, style, children }: AccordionProps) => {
@@ -53,7 +59,7 @@ export const Accordion = ({ title, id, style, children }: AccordionProps) => {
53
59
  };
54
60
 
55
61
  return (
56
- <Box style={{ width: '100%', height: 'auto' }}>
62
+ <AccordionContainer>
57
63
  <h3 style={{ margin: 0 }}>
58
64
  <AccordionHeader
59
65
  type="button"
@@ -79,7 +85,7 @@ export const Accordion = ({ title, id, style, children }: AccordionProps) => {
79
85
  </AccordionHeader>
80
86
  </h3>
81
87
 
82
- <AccordionContainer
88
+ <AccordionContent
83
89
  ref={(element) => {
84
90
  if (isOpen) {
85
91
  element?.style.setProperty('height', element.scrollHeight + 'px');
@@ -93,7 +99,7 @@ export const Accordion = ({ title, id, style, children }: AccordionProps) => {
93
99
  role="region"
94
100
  >
95
101
  <Wrapper style={style}>{children}</Wrapper>
96
- </AccordionContainer>
97
- </Box>
102
+ </AccordionContent>
103
+ </AccordionContainer>
98
104
  );
99
105
  };
package/src/lib/components/constants.ts CHANGED
@@ -16,7 +16,7 @@ export type Size =
16
16
  | 'huge'
17
17
  | 'massive';
18
18
  // Replace the "success" by "health", but keep the key in the color-palette for the moment.
19
- export type Variant = 'base' | 'selected' | 'healthy' | 'warning' | 'danger';
19
+ export type Variant = 'base' | 'selected' | 'healthy' | 'warning' | 'danger';
20
20
  // metric chart
21
21
  // url query
22
22
  export const QUERY_LAST_SEVEN_DAYS = 'now-7d';
@@ -64,4 +64,10 @@ export const queryTimeSpansCodes: QueryTimeSpan[] = [
64
64
  },
65
65
  ];
66
66
  export const NAN_STRING = 'NAN';
67
- export type Status = 'unknown' | 'healthy' | 'warning' | 'critical';
67
+ export type Status =
68
+ | 'none'
69
+ | 'unknown'
70
+ | 'info'
71
+ | 'healthy'
72
+ | 'warning'
73
+ | 'critical';