@integrigo/integrigo-ui 1.1.6 → 1.1.9

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 (8) hide show
  1. package/lib/components/molecules/InfoCard/InfoCard.d.ts +3 -1
  2. package/lib/components/molecules/InfoCard/InfoCard.stories.d.ts +1 -0
  3. package/lib/index.esm.js +10 -10
  4. package/lib/index.js +10 -10
  5. package/package.json +1 -1
  6. package/src/components/atoms/Nav/Nav.tsx +1 -0
  7. package/src/components/molecules/InfoCard/InfoCard.stories.tsx +7 -0
  8. package/src/components/molecules/InfoCard/InfoCard.tsx +37 -31
package/lib/components/molecules/InfoCard/InfoCard.d.ts CHANGED
@@ -1,7 +1,9 @@
1
- import React from 'react';
1
+ import React from "react";
2
2
  export interface InfoCardProps {
3
3
  title: string;
4
4
  body: React.ReactNode;
5
5
  background?: React.ReactNode;
6
+ inverse?: boolean;
7
+ size?: 's' | 'm' | 'l' | 'xl' | 'xxl';
6
8
  }
7
9
  export declare const InfoCard: React.FC<InfoCardProps>;
package/lib/components/molecules/InfoCard/InfoCard.stories.d.ts CHANGED
@@ -4,3 +4,4 @@ declare const _default: ComponentMeta<React.FC<import("./InfoCard").InfoCardProp
4
4
  export default _default;
5
5
  export declare const Basic: ComponentStory<React.FC<import("./InfoCard").InfoCardProps>>;
6
6
  export declare const WithBackground: ComponentStory<React.FC<import("./InfoCard").InfoCardProps>>;
7
+ export declare const Inversed: ComponentStory<React.FC<import("./InfoCard").InfoCardProps>>;
package/lib/index.esm.js CHANGED
@@ -62,24 +62,24 @@ var templateObject_1$3;
62
62
 
63
63
  var Typography = { Body: Body, Hero: Hero, Label: Label };
64
64
 
65
- var Nav = styled.nav(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n font-size: var(--font-size-l);\n font-weight: ", ";\n cursor: pointer;\n white-space: nowrap;\n width: min-content;\n transition: color var(--transition-speed);\n\n &:hover {\n color: ", ";\n }\n"], ["\n font-size: var(--font-size-l);\n font-weight: ", ";\n cursor: pointer;\n white-space: nowrap;\n width: min-content;\n transition: color var(--transition-speed);\n\n &:hover {\n color: ", ";\n }\n"])), function (p) { return p.active ? 'var(--font-bold)' : 'var(--font-medium)'; }, function (p) { return p.active ? 'auto' : 'var(--color-green)'; });
65
+ var Nav = styled.nav(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n font-size: var(--font-size-l);\n font-weight: ", ";\n cursor: pointer;\n white-space: nowrap;\n width: min-content;\n transition: color var(--transition-speed);\n padding: var(--padding-s) var(--padding-l);\n\n &:hover {\n color: ", ";\n }\n"], ["\n font-size: var(--font-size-l);\n font-weight: ", ";\n cursor: pointer;\n white-space: nowrap;\n width: min-content;\n transition: color var(--transition-speed);\n padding: var(--padding-s) var(--padding-l);\n\n &:hover {\n color: ", ";\n }\n"])), function (p) { return p.active ? 'var(--font-bold)' : 'var(--font-medium)'; }, function (p) { return p.active ? 'auto' : 'var(--color-green)'; });
66
66
  Nav.displayName = 'Nav';
67
67
  var templateObject_1$2;
68
68
 
69
69
  var InfoCard = function (_a) {
70
- var title = _a.title, body = _a.body, background = _a.background;
70
+ var title = _a.title, body = _a.body, background = _a.background, _b = _a.inverse, inverse = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'l' : _c;
71
71
  return (React.createElement(Root, null,
72
72
  React.createElement(Background, null, background),
73
- React.createElement(CardBody, null,
74
- React.createElement(Hero, { size: "l" }, title),
75
- React.createElement(Body, { size: "l" }, body))));
73
+ React.createElement(CardBody, { inverse: inverse },
74
+ React.createElement(Hero, { size: size }, title),
75
+ React.createElement(Body, { size: size }, body))));
76
76
  };
77
- var Root = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n padding: 0;\n position: relative;\n\n & > ", " {\n \n }\n\n & > ", " > * {\n }\n\n & > ", " > p {\n margin: 0;\n }\n"], ["\n padding: 0;\n position: relative;\n\n & > ", " {\n \n }\n\n & > ", " > * {\n }\n\n & > ", " > p {\n margin: 0;\n }\n"])), Card, Card, Card);
78
- Root.displayName = 'Root';
79
- var CardBody = styled(Card)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n\n & > * {\n margin: 0;\n margin-bottom: var(--padding-m);\n }\n\n & > p {\n margin: 0;\n }\n"], ["\n position: relative;\n\n & > * {\n margin: 0;\n margin-bottom: var(--padding-m);\n }\n\n & > p {\n margin: 0;\n }\n"])));
80
- CardBody.displayName = 'CardBody';
77
+ var Root = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n padding: 0;\n position: relative;\n\n & > ", " {\n }\n\n & > ", " > * {\n }\n\n & > ", " > p {\n margin: 0;\n }\n"], ["\n padding: 0;\n position: relative;\n\n & > ", " {\n }\n\n & > ", " > * {\n }\n\n & > ", " > p {\n margin: 0;\n }\n"])), Card, Card, Card);
78
+ Root.displayName = "Root";
79
+ var CardBody = styled(Card)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n\n & > * {\n margin: 0;\n margin-bottom: var(--padding-m);\n color: ", ";\n }\n\n & > p {\n margin: 0;\n }\n"], ["\n position: relative;\n\n & > * {\n margin: 0;\n margin-bottom: var(--padding-m);\n color: ", ";\n }\n\n & > p {\n margin: 0;\n }\n"])), function (p) { return p.inverse ? 'var(--color-white)' : 'var(--color-navy)'; });
80
+ CardBody.displayName = "CardBody";
81
81
  var Background = styled(Card)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 24px 24px 0px 0px;\n position: relative;\n height: 100%;\n margin-bottom: -24px;\n padding: 0;\n overflow: hidden;\n"], ["\n border-radius: 24px 24px 0px 0px;\n position: relative;\n height: 100%;\n margin-bottom: -24px;\n padding: 0;\n overflow: hidden;\n"])));
82
- Background.displayName = 'Background';
82
+ Background.displayName = "Background";
83
83
  var templateObject_1$1, templateObject_2, templateObject_3;
84
84
 
85
85
  var Color;
package/lib/index.js CHANGED
@@ -71,24 +71,24 @@ var templateObject_1$3;
71
71
 
72
72
  var Typography = { Body: Body, Hero: Hero, Label: Label };
73
73
 
74
- var Nav = styled__default["default"].nav(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n font-size: var(--font-size-l);\n font-weight: ", ";\n cursor: pointer;\n white-space: nowrap;\n width: min-content;\n transition: color var(--transition-speed);\n\n &:hover {\n color: ", ";\n }\n"], ["\n font-size: var(--font-size-l);\n font-weight: ", ";\n cursor: pointer;\n white-space: nowrap;\n width: min-content;\n transition: color var(--transition-speed);\n\n &:hover {\n color: ", ";\n }\n"])), function (p) { return p.active ? 'var(--font-bold)' : 'var(--font-medium)'; }, function (p) { return p.active ? 'auto' : 'var(--color-green)'; });
74
+ var Nav = styled__default["default"].nav(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n font-size: var(--font-size-l);\n font-weight: ", ";\n cursor: pointer;\n white-space: nowrap;\n width: min-content;\n transition: color var(--transition-speed);\n padding: var(--padding-s) var(--padding-l);\n\n &:hover {\n color: ", ";\n }\n"], ["\n font-size: var(--font-size-l);\n font-weight: ", ";\n cursor: pointer;\n white-space: nowrap;\n width: min-content;\n transition: color var(--transition-speed);\n padding: var(--padding-s) var(--padding-l);\n\n &:hover {\n color: ", ";\n }\n"])), function (p) { return p.active ? 'var(--font-bold)' : 'var(--font-medium)'; }, function (p) { return p.active ? 'auto' : 'var(--color-green)'; });
75
75
  Nav.displayName = 'Nav';
76
76
  var templateObject_1$2;
77
77
 
78
78
  var InfoCard = function (_a) {
79
- var title = _a.title, body = _a.body, background = _a.background;
79
+ var title = _a.title, body = _a.body, background = _a.background, _b = _a.inverse, inverse = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'l' : _c;
80
80
  return (React__default["default"].createElement(Root, null,
81
81
  React__default["default"].createElement(Background, null, background),
82
- React__default["default"].createElement(CardBody, null,
83
- React__default["default"].createElement(Hero, { size: "l" }, title),
84
- React__default["default"].createElement(Body, { size: "l" }, body))));
82
+ React__default["default"].createElement(CardBody, { inverse: inverse },
83
+ React__default["default"].createElement(Hero, { size: size }, title),
84
+ React__default["default"].createElement(Body, { size: size }, body))));
85
85
  };
86
- var Root = styled__default["default"].div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n padding: 0;\n position: relative;\n\n & > ", " {\n \n }\n\n & > ", " > * {\n }\n\n & > ", " > p {\n margin: 0;\n }\n"], ["\n padding: 0;\n position: relative;\n\n & > ", " {\n \n }\n\n & > ", " > * {\n }\n\n & > ", " > p {\n margin: 0;\n }\n"])), Card, Card, Card);
87
- Root.displayName = 'Root';
88
- var CardBody = styled__default["default"](Card)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n\n & > * {\n margin: 0;\n margin-bottom: var(--padding-m);\n }\n\n & > p {\n margin: 0;\n }\n"], ["\n position: relative;\n\n & > * {\n margin: 0;\n margin-bottom: var(--padding-m);\n }\n\n & > p {\n margin: 0;\n }\n"])));
89
- CardBody.displayName = 'CardBody';
86
+ var Root = styled__default["default"].div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n padding: 0;\n position: relative;\n\n & > ", " {\n }\n\n & > ", " > * {\n }\n\n & > ", " > p {\n margin: 0;\n }\n"], ["\n padding: 0;\n position: relative;\n\n & > ", " {\n }\n\n & > ", " > * {\n }\n\n & > ", " > p {\n margin: 0;\n }\n"])), Card, Card, Card);
87
+ Root.displayName = "Root";
88
+ var CardBody = styled__default["default"](Card)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n\n & > * {\n margin: 0;\n margin-bottom: var(--padding-m);\n color: ", ";\n }\n\n & > p {\n margin: 0;\n }\n"], ["\n position: relative;\n\n & > * {\n margin: 0;\n margin-bottom: var(--padding-m);\n color: ", ";\n }\n\n & > p {\n margin: 0;\n }\n"])), function (p) { return p.inverse ? 'var(--color-white)' : 'var(--color-navy)'; });
89
+ CardBody.displayName = "CardBody";
90
90
  var Background = styled__default["default"](Card)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 24px 24px 0px 0px;\n position: relative;\n height: 100%;\n margin-bottom: -24px;\n padding: 0;\n overflow: hidden;\n"], ["\n border-radius: 24px 24px 0px 0px;\n position: relative;\n height: 100%;\n margin-bottom: -24px;\n padding: 0;\n overflow: hidden;\n"])));
91
- Background.displayName = 'Background';
91
+ Background.displayName = "Background";
92
92
  var templateObject_1$1, templateObject_2, templateObject_3;
93
93
 
94
94
  exports.Color = void 0;
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "registry": "https://npm.pkg.github.com/integrigo"
5
5
  },
6
- "version": "1.1.6",
6
+ "version": "1.1.9",
7
7
  "main": "lib/index.js",
8
8
  "module": "lib/index.esm.js",
9
9
  "types": "lib/index.d.ts",
package/src/components/atoms/Nav/Nav.tsx CHANGED
@@ -11,6 +11,7 @@ export const Nav = styled.nav<NavProps>`
11
11
  white-space: nowrap;
12
12
  width: min-content;
13
13
  transition: color var(--transition-speed);
14
+ padding: var(--padding-s) var(--padding-l);
14
15
 
15
16
  &:hover {
16
17
  color: ${p => p.active ? 'auto' : 'var(--color-green)' };
package/src/components/molecules/InfoCard/InfoCard.stories.tsx CHANGED
@@ -23,3 +23,10 @@ WithBackground.args = {
23
23
  body: 'This is body',
24
24
  background: <div style={{ width: '100%', height: '240px', backgroundColor: 'var(--color-ecru)'}}/>
25
25
  };
26
+
27
+ export const Inversed = Template.bind({});
28
+ Inversed.args = {
29
+ title: "Title",
30
+ body: 'This is body',
31
+ inverse: true
32
+ };
package/src/components/molecules/InfoCard/InfoCard.tsx CHANGED
@@ -1,61 +1,67 @@
1
- import React from 'react'
2
- import styled from 'styled-components'
3
- import { Card } from '../../atoms/Card'
4
- import { Hero } from '../../atoms/Typography/Hero'
5
- import { Body } from '../../atoms/Typography/Body'
1
+ import React from "react";
2
+ import styled from "styled-components";
3
+ import { Card } from "../../atoms/Card";
4
+ import { Hero } from "../../atoms/Typography/Hero";
5
+ import { Body } from "../../atoms/Typography/Body";
6
6
 
7
7
  export interface InfoCardProps {
8
- title: string
9
- body: React.ReactNode
10
- background?: React.ReactNode
8
+ title: string;
9
+ body: React.ReactNode;
10
+ background?: React.ReactNode;
11
+ inverse?: boolean;
12
+ size?: 's' | 'm' | 'l' | 'xl' | 'xxl'
11
13
  }
12
14
 
13
- export const InfoCard: React.FC<InfoCardProps> = ({ title, body, background }) => {
15
+ export const InfoCard: React.FC<InfoCardProps> = ({
16
+ title,
17
+ body,
18
+ background,
19
+ inverse = false,
20
+ size = 'l'
21
+ }) => {
14
22
  return (
15
23
  <Root>
16
- <Background>
17
- {background}
18
- </Background>
19
- <CardBody>
20
- <Hero size="l">{title}</Hero>
21
- <Body size="l">{body}</Body>
24
+ <Background>{background}</Background>
25
+ <CardBody inverse={inverse}>
26
+ <Hero size={size}>{title}</Hero>
27
+ <Body size={size}>{body}</Body>
22
28
  </CardBody>
23
29
  </Root>
24
- )
25
- }
30
+ );
31
+ };
26
32
 
27
33
  const Root = styled.div`
28
34
  padding: 0;
29
35
  position: relative;
30
36
 
31
37
  & > ${Card} {
32
-
33
38
  }
34
39
 
35
40
  & > ${Card} > * {
36
- }
41
+ }
37
42
 
38
- & > ${Card} > p {
39
- margin: 0;
40
- }
41
- `
43
+ & > ${Card} > p {
44
+ margin: 0;
45
+ }
46
+ `;
42
47
 
43
- Root.displayName = 'Root'
48
+ Root.displayName = "Root";
44
49
 
45
- const CardBody = styled(Card)`
50
+ const CardBody = styled(Card)<{ inverse: boolean }>`
46
51
  position: relative;
47
52
 
48
53
  & > * {
49
- margin: 0;
50
- margin-bottom: var(--padding-m);
54
+ margin: 0;
55
+ margin-bottom: var(--padding-m);
56
+ color: ${p => p.inverse ? 'var(--color-white)' : 'var(--color-navy)'};
51
57
  }
52
58
 
53
59
  & > p {
54
60
  margin: 0;
55
61
  }
56
- `
62
+ `;
57
63
 
58
- CardBody.displayName = 'CardBody'
64
+ CardBody.displayName = "CardBody";
59
65
 
60
66
  const Background = styled(Card)`
61
67
  border-radius: 24px 24px 0px 0px;
@@ -64,6 +70,6 @@ const Background = styled(Card)`
64
70
  margin-bottom: -24px;
65
71
  padding: 0;
66
72
  overflow: hidden;
67
- `
73
+ `;
68
74
 
69
- Background.displayName = 'Background'
75
+ Background.displayName = "Background";