@thecb/components 11.8.1-beta.0 → 11.9.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/dist/index.cjs.js +836 -466
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +831 -466
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/atoms/card-type/CardType.js +47 -0
- package/src/components/atoms/card-type/CardType.stories.js +86 -0
- package/src/components/atoms/card-type/index.js +3 -0
- package/src/components/atoms/formatted-credit-card/FormattedCreditCard.js +3 -2
- package/src/components/atoms/icons/AmExLargeIcon.js +54 -0
- package/src/components/atoms/icons/DiscoverLargeIcon.js +137 -0
- package/src/components/atoms/icons/IconAdd.js +2 -2
- package/src/components/atoms/icons/MasterCardLargeIcon.js +35 -0
- package/src/components/atoms/icons/VisaLargeIcon.js +40 -0
- package/src/components/atoms/icons/index.js +9 -1
- package/src/components/atoms/index.js +1 -1
- package/src/components/atoms/password-requirements/PasswordRequirements.js +3 -3
- package/src/components/molecules/index.js +1 -0
- package/src/components/molecules/popover/Popover.js +1 -15
- package/src/components/molecules/tooltip/Tooltip.js +202 -0
- package/src/components/molecules/tooltip/Tooltip.mdx +15 -0
- package/src/components/molecules/tooltip/Tooltip.stories.js +237 -0
- package/src/components/molecules/tooltip/Tooltip.theme.js +9 -0
- package/src/components/molecules/tooltip/index.d.ts +34 -0
- package/src/components/molecules/tooltip/index.js +3 -0
- package/src/util/general.js +14 -0
- package/src/components/atoms/display-card/DisplayCard.js +0 -88
- package/src/components/atoms/display-card/DisplayCard.mdx +0 -13
- package/src/components/atoms/display-card/DisplayCard.stories.js +0 -165
- package/src/components/atoms/display-card/index.js +0 -3
|
@@ -1,165 +0,0 @@
|
|
|
1
|
-
import DisplayCard from "./DisplayCard";
|
|
2
|
-
import React from "react";
|
|
3
|
-
import { fn } from "@storybook/test";
|
|
4
|
-
|
|
5
|
-
const meta = {
|
|
6
|
-
title: "Atoms/DisplayCard",
|
|
7
|
-
component: DisplayCard,
|
|
8
|
-
parameters: {
|
|
9
|
-
layout: "centered",
|
|
10
|
-
controls: { expanded: true }
|
|
11
|
-
},
|
|
12
|
-
tags: ["!autodocs"],
|
|
13
|
-
args: {
|
|
14
|
-
title: "Display Card",
|
|
15
|
-
item: "Item text",
|
|
16
|
-
buttonText: undefined,
|
|
17
|
-
buttonAction: undefined,
|
|
18
|
-
url: undefined,
|
|
19
|
-
link: false,
|
|
20
|
-
helpText: undefined,
|
|
21
|
-
hasPopover: false,
|
|
22
|
-
popoverTriggerText: "",
|
|
23
|
-
popoverContent: "",
|
|
24
|
-
popoverExtraStyles: undefined,
|
|
25
|
-
popoverTextExtraStyles: undefined
|
|
26
|
-
},
|
|
27
|
-
argTypes: {
|
|
28
|
-
title: {
|
|
29
|
-
description: "Text that appears above the box",
|
|
30
|
-
table: {
|
|
31
|
-
type: { summary: "string" },
|
|
32
|
-
defaultValue: { summary: undefined }
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
|
-
item: {
|
|
36
|
-
description: "Text that appears in the box",
|
|
37
|
-
table: {
|
|
38
|
-
type: { summary: "string" },
|
|
39
|
-
defaultValue: { summary: undefined }
|
|
40
|
-
}
|
|
41
|
-
},
|
|
42
|
-
buttonText: {
|
|
43
|
-
description: "Text for the button or link",
|
|
44
|
-
table: {
|
|
45
|
-
type: { summary: "string" },
|
|
46
|
-
defaultValue: { summary: undefined }
|
|
47
|
-
}
|
|
48
|
-
},
|
|
49
|
-
buttonAction: {
|
|
50
|
-
description: "Callback function for the button",
|
|
51
|
-
table: {
|
|
52
|
-
type: { summary: "function" },
|
|
53
|
-
defaultValue: { summary: undefined }
|
|
54
|
-
}
|
|
55
|
-
},
|
|
56
|
-
url: {
|
|
57
|
-
description: "URL for the link",
|
|
58
|
-
table: {
|
|
59
|
-
type: { summary: "string" },
|
|
60
|
-
defaultValue: { summary: undefined }
|
|
61
|
-
}
|
|
62
|
-
},
|
|
63
|
-
link: {
|
|
64
|
-
description:
|
|
65
|
-
"Whether or not to display a link, uses the `url` and `buttonText` props",
|
|
66
|
-
table: {
|
|
67
|
-
type: { summary: "boolean" },
|
|
68
|
-
defaultValue: { summary: false }
|
|
69
|
-
}
|
|
70
|
-
},
|
|
71
|
-
helpText: {
|
|
72
|
-
description:
|
|
73
|
-
"Text rendered to the right of the `item` text and styled as italic.",
|
|
74
|
-
table: {
|
|
75
|
-
type: { summary: "string" },
|
|
76
|
-
defaultValue: { summary: undefined }
|
|
77
|
-
}
|
|
78
|
-
},
|
|
79
|
-
hasPopover: {
|
|
80
|
-
description: "Whether or not to render Popover component",
|
|
81
|
-
table: {
|
|
82
|
-
type: { summary: "boolean" },
|
|
83
|
-
defaultValue: { summary: false }
|
|
84
|
-
}
|
|
85
|
-
},
|
|
86
|
-
popoverTriggerText: {
|
|
87
|
-
table: {
|
|
88
|
-
type: { summary: "string" },
|
|
89
|
-
defaultValue: { summary: "" }
|
|
90
|
-
}
|
|
91
|
-
},
|
|
92
|
-
popoverContent: {
|
|
93
|
-
table: {
|
|
94
|
-
type: { summary: "string" },
|
|
95
|
-
defaultValue: { summary: "" }
|
|
96
|
-
}
|
|
97
|
-
},
|
|
98
|
-
popoverExtraStyles: {
|
|
99
|
-
description: "Styles for the Box that wraps the Popover content.",
|
|
100
|
-
table: {
|
|
101
|
-
type: { summary: "string" },
|
|
102
|
-
defaultValue: { summary: undefined }
|
|
103
|
-
}
|
|
104
|
-
},
|
|
105
|
-
popoverTextExtraStyles: {
|
|
106
|
-
description: "Prop passed to the Popover component, but is not used.",
|
|
107
|
-
table: {
|
|
108
|
-
type: { summary: "string" },
|
|
109
|
-
defaultValue: { summary: undefined }
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
};
|
|
114
|
-
|
|
115
|
-
export default meta;
|
|
116
|
-
|
|
117
|
-
export const Basic = {
|
|
118
|
-
render: args => <DisplayCard {...args} />
|
|
119
|
-
};
|
|
120
|
-
|
|
121
|
-
export const WithLink = {
|
|
122
|
-
args: {
|
|
123
|
-
buttonText: "Link",
|
|
124
|
-
url: "https://example.com",
|
|
125
|
-
link: true
|
|
126
|
-
},
|
|
127
|
-
render: args => <DisplayCard {...args} />
|
|
128
|
-
};
|
|
129
|
-
|
|
130
|
-
export const WithButtonAction = {
|
|
131
|
-
args: {
|
|
132
|
-
buttonText: "Button",
|
|
133
|
-
buttonAction: fn()
|
|
134
|
-
},
|
|
135
|
-
render: args => <DisplayCard {...args} />
|
|
136
|
-
};
|
|
137
|
-
|
|
138
|
-
export const WithHelpText = {
|
|
139
|
-
parameters: {
|
|
140
|
-
layout: "padded"
|
|
141
|
-
},
|
|
142
|
-
args: {
|
|
143
|
-
helpText: "Help!"
|
|
144
|
-
},
|
|
145
|
-
render: args => <DisplayCard {...args} />
|
|
146
|
-
};
|
|
147
|
-
|
|
148
|
-
export const WithPopover = {
|
|
149
|
-
args: {
|
|
150
|
-
hasPopover: true,
|
|
151
|
-
popoverTriggerText: "Popover",
|
|
152
|
-
popoverContent: "This is example popover content!"
|
|
153
|
-
},
|
|
154
|
-
render: args => <DisplayCard {...args} />
|
|
155
|
-
};
|
|
156
|
-
|
|
157
|
-
export const WithPopoverAndExtraStyles = {
|
|
158
|
-
args: {
|
|
159
|
-
hasPopover: true,
|
|
160
|
-
popoverTriggerText: "Popover",
|
|
161
|
-
popoverContent: "This is example popover content!",
|
|
162
|
-
popoverExtraStyles: "padding: 4px 8px"
|
|
163
|
-
},
|
|
164
|
-
render: args => <DisplayCard {...args} />
|
|
165
|
-
};
|