@weareconceptstudio/account 2.1.17 → 2.1.18
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/components/AccountButton/style.d.ts.map +1 -1
- package/dist/components/AccountButton/style.js +2 -42
- package/dist/components/AccountButton/style.js.map +1 -1
- package/dist/utils/createAccountButtonEntry.d.ts +3 -5
- package/dist/utils/createAccountButtonEntry.d.ts.map +1 -1
- package/dist/utils/createAccountButtonEntry.js +13 -2
- package/dist/utils/createAccountButtonEntry.js.map +1 -1
- package/package.json +1 -1
- package/templates/account.buttons.md +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../src/components/AccountButton/style.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../src/components/AccountButton/style.js"],"names":[],"mappings":"AAEA,yFAAyF;AACzF,qPA0CE;;AAEF,iPA0eE"}
|
|
@@ -1,25 +1,13 @@
|
|
|
1
1
|
import styled from 'styled-components';
|
|
2
|
-
import { ACCOUNT_BUTTON_CLASS_NAMES } from '../../utils/buttonClassNames';
|
|
3
|
-
const { base, wrapBase, variants } = ACCOUNT_BUTTON_CLASS_NAMES;
|
|
4
2
|
/** Wrapper when a project provides a custom button component via accountConfig.button */
|
|
5
3
|
export const AccountButtonCustomWrap = styled.div `
|
|
6
4
|
display: inline-flex;
|
|
7
5
|
|
|
8
|
-
&[data-account-button-layout='block']
|
|
9
|
-
&.${wrapBase}--auth,
|
|
10
|
-
&.${wrapBase}--checkout,
|
|
11
|
-
&.${wrapBase}--full-width,
|
|
12
|
-
&.auth,
|
|
13
|
-
&.checkout,
|
|
14
|
-
&.full-width {
|
|
6
|
+
&[data-account-button-layout='block'] {
|
|
15
7
|
width: 100%;
|
|
16
8
|
display: flex;
|
|
17
9
|
align-items: stretch;
|
|
18
10
|
|
|
19
|
-
> .${base},
|
|
20
|
-
> .${variants.auth},
|
|
21
|
-
> .${variants.submit},
|
|
22
|
-
> .${variants.checkout},
|
|
23
11
|
> * {
|
|
24
12
|
width: 100% !important;
|
|
25
13
|
max-width: 100% !important;
|
|
@@ -36,38 +24,10 @@ export const AccountButtonCustomWrap = styled.div `
|
|
|
36
24
|
}
|
|
37
25
|
}
|
|
38
26
|
|
|
39
|
-
&[data-account-button-layout='fit']
|
|
40
|
-
&.${wrapBase}--submit,
|
|
41
|
-
&.${wrapBase}--cancel,
|
|
42
|
-
&.${wrapBase}--link,
|
|
43
|
-
&.${wrapBase}--link-sm,
|
|
44
|
-
&.${wrapBase}--link-lg,
|
|
45
|
-
&.${wrapBase}--promo,
|
|
46
|
-
&.${wrapBase}--balance,
|
|
47
|
-
&.${wrapBase}--outline,
|
|
48
|
-
&.${wrapBase}--icon,
|
|
49
|
-
&.submit,
|
|
50
|
-
&.cancel,
|
|
51
|
-
&.link,
|
|
52
|
-
&.link-sm,
|
|
53
|
-
&.link-lg,
|
|
54
|
-
&.promo,
|
|
55
|
-
&.balance,
|
|
56
|
-
&.outline,
|
|
57
|
-
&.icon {
|
|
27
|
+
&[data-account-button-layout='fit'] {
|
|
58
28
|
width: fit-content;
|
|
59
29
|
display: inline-flex;
|
|
60
30
|
|
|
61
|
-
> .${base},
|
|
62
|
-
> .${variants.submit},
|
|
63
|
-
> .${variants.cancel},
|
|
64
|
-
> .${variants.link},
|
|
65
|
-
> .${variants['link-sm']},
|
|
66
|
-
> .${variants['link-lg']},
|
|
67
|
-
> .${variants.promo},
|
|
68
|
-
> .${variants.balance},
|
|
69
|
-
> .${variants.outline},
|
|
70
|
-
> .${variants.icon},
|
|
71
31
|
> * {
|
|
72
32
|
width: auto !important;
|
|
73
33
|
max-width: none !important;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/components/AccountButton/style.js"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,
|
|
1
|
+
{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/components/AccountButton/style.js"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,yFAAyF;AACzF,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ChD,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sCAiWC,CAAC,KAAK,EAAE,EAAE,CAC7C,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,wBAAwB,qBAAqB,CAAC,KAAK,EAAE,EAAE,CACtF,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,oBAAoB;;;;;;;;;;;;;;;;;;sCAkBhB,CAAC,KAAK,EAAE,EAAE,CAC7C,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,uBAAuB,qBAAqB,CAAC,KAAK,EAAE,EAAE,CACrF,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,oBAAoB;;;;;;;;;;;;;;;;;;sCAkBhB,CAAC,KAAK,EAAE,EAAE,CAC7C,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,uBAAuB,qBAAqB,CAAC,KAAK,EAAE,EAAE,CACrF,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,oBAAoB;;;;;;;;;;;;;;;;;;sCAkBhB,CAAC,KAAK,EAAE,EAAE,CAC7C,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,uBAAuB,qBAAqB,CAAC,KAAK,EAAE,EAAE,CACrF,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,qBAAqB;;;;;;;;;;;;;;;;;;sCAkBjB,CAAC,KAAK,EAAE,EAAE,CAC7C,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,wBAAwB,qBAAqB,CAAC,KAAK,EAAE,EAAE,CACtF,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,kBAAkB;;;;;;;;;;;;;;;;;;sCAkBd,CAAC,KAAK,EAAE,EAAE,CAC7C,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,qBAAqB,qBAAqB,CAAC,KAAK,EAAE,EAAE,CACnF,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,mBAAmB;;;;;;;;;;;;;;;;;;sCAkBf,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,sBAAsB;;;;;;;;;;;;;;;;;CAiBrG,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
export function createAccountButtonEntry(component:
|
|
2
|
-
component:
|
|
3
|
-
props:
|
|
4
|
-
className: string;
|
|
5
|
-
};
|
|
1
|
+
export function createAccountButtonEntry(component: React.ComponentType, variant: string, config?: object): {
|
|
2
|
+
component: import("react").ComponentType<{}>;
|
|
3
|
+
props: any;
|
|
6
4
|
};
|
|
7
5
|
//# sourceMappingURL=createAccountButtonEntry.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createAccountButtonEntry.d.ts","sourceRoot":"","sources":["../../src/utils/createAccountButtonEntry.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"createAccountButtonEntry.d.ts","sourceRoot":"","sources":["../../src/utils/createAccountButtonEntry.js"],"names":[],"mappings":"AA8BO,oDAJI,MAAM,aAAa,WACnB,MAAM,WACN,MAAM;;;EAahB"}
|
|
@@ -14,10 +14,21 @@
|
|
|
14
14
|
* 'link-sm': createAccountButtonEntry(MyButton, 'link-sm', { btnType: 'underline' }),
|
|
15
15
|
* },
|
|
16
16
|
* }
|
|
17
|
+
*
|
|
18
|
+
* // Optional BEM overrides (same 3rd argument):
|
|
19
|
+
* createAccountButtonEntry(MyButton, 'submit', {
|
|
20
|
+
* btnType: 'primary',
|
|
21
|
+
* classNamesConfig: { variants: { submit: 'account-button--save' } },
|
|
22
|
+
* })
|
|
17
23
|
*/
|
|
18
24
|
import { getAccountButtonClassName } from './buttonClassNames';
|
|
19
|
-
|
|
20
|
-
|
|
25
|
+
/**
|
|
26
|
+
* @param {React.ComponentType} component - Project button component
|
|
27
|
+
* @param {string} variant - Semantic account button type (auth, submit, checkout, …)
|
|
28
|
+
* @param {object} [config] - Props for the button component; optional `classNamesConfig` for BEM overrides
|
|
29
|
+
*/
|
|
30
|
+
export const createAccountButtonEntry = (component, variant, config = {}) => {
|
|
31
|
+
const { classNamesConfig, className: propClassName, ...restProps } = config;
|
|
21
32
|
const { button: defaultButtonClass } = getAccountButtonClassName(variant, classNamesConfig);
|
|
22
33
|
return {
|
|
23
34
|
component,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createAccountButtonEntry.js","sourceRoot":"","sources":["../../src/utils/createAccountButtonEntry.js"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"createAccountButtonEntry.js","sourceRoot":"","sources":["../../src/utils/createAccountButtonEntry.js"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D;;;;GAIG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,MAAM,GAAG,EAAE,EAAE,EAAE;IAC3E,MAAM,EAAE,gBAAgB,EAAE,SAAS,EAAE,aAAa,EAAE,GAAG,SAAS,EAAE,GAAG,MAAM,CAAC;IAC5E,MAAM,EAAE,MAAM,EAAE,kBAAkB,EAAE,GAAG,yBAAyB,CAAC,OAAO,EAAE,gBAAgB,CAAC,CAAC;IAE5F,OAAO;QACN,SAAS;QACT,KAAK,EAAE;YACN,GAAG,SAAS;YACZ,SAAS,EAAE,CAAC,kBAAkB,EAAE,aAAa,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;SACxE;KACD,CAAC;AACH,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -89,7 +89,7 @@ accountConfig: {
|
|
|
89
89
|
}
|
|
90
90
|
```
|
|
91
91
|
|
|
92
|
-
`createAccountButtonEntry(Component, variant,
|
|
92
|
+
`createAccountButtonEntry(Component, variant, config?)` automatically adds `account-button` + `account-button--{variant}` to the component `className`. Pass button props (`btnType`, `className`, …) in `config`; optional BEM overrides via `config.classNamesConfig`.
|
|
93
93
|
|
|
94
94
|
### 2. Override BEM class tokens
|
|
95
95
|
|