@mrshmllw/smores-react 1.4.0 → 1.5.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.
package/README.md CHANGED
@@ -92,7 +92,6 @@ Every time you make changes in Smores and you wan’t to see it in local
92
92
  run
93
93
 
94
94
  ```
95
- npm run build
96
95
  yalc publish —private
97
96
  ```
98
97
 
@@ -1,7 +1,9 @@
1
1
  import { FC } from 'react';
2
2
  declare type AccordionProps = {
3
3
  title: string;
4
+ subTitle?: string;
4
5
  borderTop?: boolean;
6
+ fullBorder?: boolean;
5
7
  };
6
8
  export declare const Accordion: FC<AccordionProps>;
7
9
  export {};
@@ -3,23 +3,48 @@ import styled, { css } from 'styled-components';
3
3
  import { Box } from '../Box';
4
4
  import { Icon } from '../Icon';
5
5
  import { theme } from '../theme';
6
- export const Accordion = ({ title, children, borderTop = false, }) => {
6
+ import { Text } from '../Text';
7
+ export const Accordion = ({ title, children, borderTop = false, subTitle, fullBorder = false, }) => {
7
8
  const [isOpen, setIsOpen] = useState(false);
8
- return (React.createElement(Wrapper, { isOpen: isOpen, borderTop: borderTop },
9
- React.createElement(TopContainer, { flex: true, alignItems: "center", justifyContent: "space-between", onClick: () => setIsOpen(!isOpen) },
10
- React.createElement(Title, null, title),
9
+ return (React.createElement(Wrapper, { isOpen: isOpen, borderTop: borderTop, fullBorder: fullBorder },
10
+ React.createElement(TopContainer, { flex: true, alignItems: "center", justifyContent: "space-between", onClick: () => setIsOpen(!isOpen), fullBorder: fullBorder, isOpen: isOpen },
11
+ React.createElement(TitleContainer, null,
12
+ React.createElement(Title, null, title),
13
+ subTitle && (React.createElement(Text, { tag: "label", color: "grey8", typo: "label" }, subTitle))),
11
14
  React.createElement(CaretIcon, { render: "caret", size: 24, color: "blue7", isOpen: isOpen, borderTop: borderTop })),
12
15
  isOpen && React.createElement(React.Fragment, null, children)));
13
16
  };
14
- const Wrapper = styled(Box)(({ isOpen, borderTop }) => css `
17
+ const Wrapper = styled(Box)(({ isOpen, borderTop, fullBorder }) => css `
15
18
  border-bottom: 1px solid ${theme.colors.grey3};
16
19
  padding-bottom: ${isOpen && '16px'};
17
20
  border-top: ${borderTop && `1px solid ${theme.colors.grey3}`};
21
+
22
+ ${fullBorder &&
23
+ css `
24
+ border: 1px solid ${theme.colors.grey3};
25
+ border-radius: 8px;
26
+ margin-bottom: 14px;
27
+ padding: 20px 15px;
28
+ `}
18
29
  `);
19
- const TopContainer = styled(Box) `
20
- padding: 15px 0;
21
- cursor: pointer;
30
+ const TitleContainer = styled.div `
31
+ display: flex;
32
+ flex-direction: column;
22
33
  `;
34
+ const TopContainer = styled(Box)(({ isOpen, fullBorder }) => css `
35
+ padding: 15px 0px;
36
+ cursor: pointer;
37
+
38
+ ${fullBorder &&
39
+ css `
40
+ padding: 0px;
41
+ `}
42
+
43
+ ${isOpen &&
44
+ css `
45
+ margin-bottom: 14px;
46
+ `}
47
+ `);
23
48
  const Title = styled.h2 `
24
49
  color: ${theme.colors.blue7};
25
50
  font-size: 16px;
@@ -1 +1 @@
1
- {"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAOhC,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,EAC5C,KAAK,EACL,QAAQ,EACR,SAAS,GAAG,KAAK,GAClB,EAAE,EAAE;IACH,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE3C,OAAO,CACL,oBAAC,OAAO,IAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS;QAC3C,oBAAC,YAAY,IACX,IAAI,QACJ,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,eAAe,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC;YAEjC,oBAAC,KAAK,QAAE,KAAK,CAAS;YACtB,oBAAC,SAAS,IACR,MAAM,EAAC,OAAO,EACd,IAAI,EAAE,EAAE,EACR,KAAK,EAAC,OAAO,EACb,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,GACpB,CACW;QACd,MAAM,IAAI,0CAAG,QAAQ,CAAI,CAClB,CACX,CAAA;AACH,CAAC,CAAA;AAOD,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CACzB,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;+BACD,KAAK,CAAC,MAAM,CAAC,KAAK;sBAC3B,MAAM,IAAI,MAAM;kBACpB,SAAS,IAAI,aAAa,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE;GAC7D,CACF,CAAA;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;CAG/B,CAAA;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,EAAE,CAAA;WACZ,KAAK,CAAC,MAAM,CAAC,KAAK;;;iBAGZ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;CACxC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAC5B,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;iBACJ,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,cAAc;;GAExD,CACF,CAAA"}
1
+ {"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAS9B,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,EAC5C,KAAK,EACL,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,UAAU,GAAG,KAAK,GACnB,EAAE,EAAE;IACH,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE3C,OAAO,CACL,oBAAC,OAAO,IAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU;QACnE,oBAAC,YAAY,IACX,IAAI,QACJ,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,eAAe,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,EACjC,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM;YAEd,oBAAC,cAAc;gBACb,oBAAC,KAAK,QAAE,KAAK,CAAS;gBACrB,QAAQ,IAAI,CACX,oBAAC,IAAI,IAAC,GAAG,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IACzC,QAAQ,CACJ,CACR,CACc;YAEjB,oBAAC,SAAS,IACR,MAAM,EAAC,OAAO,EACd,IAAI,EAAE,EAAE,EACR,KAAK,EAAC,OAAO,EACb,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,GACpB,CACW;QACd,MAAM,IAAI,0CAAG,QAAQ,CAAI,CAClB,CACX,CAAA;AACH,CAAC,CAAA;AAQD,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CACzB,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;+BACb,KAAK,CAAC,MAAM,CAAC,KAAK;sBAC3B,MAAM,IAAI,MAAM;kBACpB,SAAS,IAAI,aAAa,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE;;MAE1D,UAAU;IACZ,GAAG,CAAA;0BACmB,KAAK,CAAC,MAAM,CAAC,KAAK;;;;KAIvC;GACF,CACF,CAAA;AAED,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGhC,CAAA;AACD,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,CAC9B,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;MAI3B,UAAU;IACZ,GAAG,CAAA;;KAEF;;MAEC,MAAM;IACR,GAAG,CAAA;;KAEF;GACF,CACF,CAAA;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,EAAE,CAAA;WACZ,KAAK,CAAC,MAAM,CAAC,KAAK;;;iBAGZ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;CACxC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAC5B,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;iBACJ,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,cAAc;;GAExD,CACF,CAAA"}
@@ -4,4 +4,6 @@ declare namespace _default {
4
4
  }
5
5
  export default _default;
6
6
  export const Default: any;
7
+ export const SubTitle: any;
8
+ export const FullBorder: any;
7
9
  import { Accordion } from "./Accordion";
@@ -6,4 +6,12 @@ export default {
6
6
  };
7
7
  const Template = (args) => (React.createElement(Accordion, Object.assign({}, args, { title: "How it works" }), "Lots of brilliant information about this beautiful component"));
8
8
  export const Default = Template.bind({});
9
+ export const SubTitle = Template.bind({});
10
+ SubTitle.args = {
11
+ subTitle: 'subTitle',
12
+ };
13
+ export const FullBorder = Template.bind({});
14
+ FullBorder.args = {
15
+ fullBorder: true,
16
+ };
9
17
  //# sourceMappingURL=Accordion.stories.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Accordion.stories.js","sourceRoot":"","sources":["../../src/Accordion/Accordion.stories.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,SAAS;CACrB,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,CACzB,oBAAC,SAAS,oBAAK,IAAI,IAAE,KAAK,EAAC,cAAc,oEAE7B,CACb,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}
1
+ {"version":3,"file":"Accordion.stories.js","sourceRoot":"","sources":["../../src/Accordion/Accordion.stories.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,SAAS;CACrB,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,CACzB,oBAAC,SAAS,oBAAK,IAAI,IAAE,KAAK,EAAC,cAAc,oEAE7B,CACb,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEzC,QAAQ,CAAC,IAAI,GAAG;IACd,QAAQ,EAAE,UAAU;CACrB,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE3C,UAAU,CAAC,IAAI,GAAG;IAChB,UAAU,EAAE,IAAI;CACjB,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mrshmllw/smores-react",
3
- "version": "1.4.0",
3
+ "version": "1.5.0",
4
4
  "main": "./dist/index.js",
5
5
  "description": "Collection of React components used by Marshmallow Technology",
6
6
  "keywords": [