@scality/core-ui 0.148.0 → 0.149.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 (4) 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/package.json +1 -1
  4. package/src/lib/components/accordion/Accordion.component.tsx +12 -6
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scality/core-ui",
3
- "version": "0.148.0",
3
+ "version": "0.149.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
  };