@redneckz/wildless-cms-uni-blocks 0.2.60 → 0.2.61
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/BaseTile.d.ts +2 -1
- package/dist/BaseTile.js +2 -15
- package/dist/BaseTile.js.map +1 -1
- package/dist/Blocks.d.ts +3 -1
- package/dist/Blocks.js +2 -0
- package/dist/Blocks.js.map +1 -1
- package/dist/ContentPage.js +1 -1
- package/dist/ContentPage.js.map +1 -1
- package/dist/Icons/AppleIcon.js +1 -1
- package/dist/Icons/AppleIcon.js.map +1 -1
- package/dist/MobileBlocks.d.ts +1 -0
- package/dist/MobileBlocks.js +2 -0
- package/dist/MobileBlocks.js.map +1 -1
- package/dist/ProductBlockInner.js +2 -1
- package/dist/ProductBlockInner.js.map +1 -1
- package/dist/StepsBlock.js +2 -1
- package/dist/StepsBlock.js.map +1 -1
- package/dist/TextBlock.d.ts +14 -0
- package/dist/TextBlock.js +36 -0
- package/dist/TextBlock.js.map +1 -0
- package/dist/types.d.ts +0 -1
- package/dist/ui-kit/Button.js +1 -1
- package/dist/ui-kit/Title.d.ts +11 -0
- package/dist/ui-kit/Title.js +17 -0
- package/dist/ui-kit/Title.js.map +1 -0
- package/lib/BaseTile.d.ts +2 -1
- package/lib/BaseTile.js +2 -15
- package/lib/BaseTile.js.map +1 -1
- package/lib/Blocks.d.ts +3 -1
- package/lib/Blocks.js +2 -0
- package/lib/Blocks.js.map +1 -1
- package/lib/ContentPage.js +1 -1
- package/lib/ContentPage.js.map +1 -1
- package/lib/Icons/AppleIcon.js +1 -1
- package/lib/Icons/AppleIcon.js.map +1 -1
- package/lib/MobileBlocks.d.ts +1 -0
- package/lib/MobileBlocks.js +2 -0
- package/lib/MobileBlocks.js.map +1 -1
- package/lib/ProductBlockInner.js +2 -1
- package/lib/ProductBlockInner.js.map +1 -1
- package/lib/StepsBlock.js +2 -1
- package/lib/StepsBlock.js.map +1 -1
- package/lib/TextBlock.d.ts +14 -0
- package/lib/TextBlock.js +34 -0
- package/lib/TextBlock.js.map +1 -0
- package/lib/common.css +1 -1
- package/lib/types.d.ts +0 -1
- package/lib/ui-kit/Button.js +1 -1
- package/lib/ui-kit/Title.d.ts +11 -0
- package/lib/ui-kit/Title.js +15 -0
- package/lib/ui-kit/Title.js.map +1 -0
- package/package.json +1 -1
- package/src/BaseTile.tsx +8 -17
- package/src/Blocks.ts +3 -0
- package/src/ContentPage.page.json +12 -0
- package/src/ContentPage.tsx +1 -1
- package/src/Icons/AppleIcon.tsx +1 -1
- package/src/MobileBlocks.ts +2 -0
- package/src/ProductBlockInner.tsx +3 -2
- package/src/StepsBlock.tsx +2 -1
- package/src/TextBlock.fixture.tsx +116 -0
- package/src/TextBlock.tsx +72 -0
- package/src/Tile.tsx +1 -1
- package/src/common.css +15 -15
- package/src/setup-fixture.ts +6 -2
- package/src/types.ts +0 -2
- package/src/ui-kit/Button.tsx +1 -1
- package/src/ui-kit/Title.tsx +25 -0
package/lib/StepsBlock.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepsBlock.js","sourceRoot":"","sources":["../src/StepsBlock.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAE5E,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,MAAM,KAAK,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE,iBAAiB,EAAE,CAAC;AAc9D,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAkB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7E,OAAO,CACL,mBACE,SAAS,EAAE,+EACT,SAAS,IAAI,EACf,EAAE,aAEF,
|
|
1
|
+
{"version":3,"file":"StepsBlock.js","sourceRoot":"","sources":["../src/StepsBlock.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAE5E,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,MAAM,KAAK,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE,iBAAiB,EAAE,CAAC;AAc9D,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAkB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7E,OAAO,CACL,mBACE,SAAS,EAAE,+EACT,SAAS,IAAI,EACf,EAAE,aAEF,KAAC,KAAK,IAAC,SAAS,EAAC,2CAA2C,YAAE,KAAK,GAAS,EAC3E,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,CACf,0BACE,cAAK,SAAS,EAAC,kCAAkC,YAC9C,QAAQ,CAAC,cAAK,SAAS,EAAC,iCAAiC,GAAO,CAAC,CAChE,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAChD,GACG,EACN,cAAK,SAAS,EAAC,oCAAoC,YAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,GAAO,IAClF,CACP,CAAC,CAAC,CAAC,IAAI,IACA,CACX,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,cAAc,GAAG,CAAC,IAAU,EAAE,CAAS,EAAE,EAAE;IAC/C,OAAO,CACL,cAAqB,SAAS,EAAC,iDAAiD,YAC9E,cAAK,SAAS,EAAC,0GAA0G,YACtH,CAAC,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAC/D,eAAM,SAAS,EAAC,+CAA+C,YAAE,CAAC,GAAG,CAAC,GAAQ,CAC/E,GACG,IALE,MAAM,CAAC,CAAC,CAAC,CAMb,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,IAAU,EAAE,CAAS,EAAE,EAAE;IAChD,OAAO,CACL,cAAqB,SAAS,EAAC,2DAA2D,YACxF,eAAK,SAAS,EAAC,WAAW,aACxB,aAAI,SAAS,EAAC,qDAAqD,YAAE,IAAI,CAAC,KAAK,GAAM,EACpF,IAAI,CAAC,WAAW,IAAI,CACnB,cAAK,SAAS,EAAC,8CAA8C,YAAE,IAAI,CAAC,WAAW,GAAO,CACvF,IACG,IANE,MAAM,CAAC,CAAC,CAAC,CAOb,CACP,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { UniBlockProps, Picture } from './types';
|
|
2
|
+
declare type TextBlockVersion = 'primary' | 'secondary' | 'secondary-light';
|
|
3
|
+
declare type TextBlockIconVersion = 'none' | 'small' | 'big';
|
|
4
|
+
export interface TextBlockContent {
|
|
5
|
+
title?: string;
|
|
6
|
+
description?: string;
|
|
7
|
+
blockVersion?: TextBlockVersion;
|
|
8
|
+
iconVersion?: TextBlockIconVersion;
|
|
9
|
+
image?: Picture;
|
|
10
|
+
}
|
|
11
|
+
export interface TextBlockProps extends TextBlockContent, UniBlockProps {
|
|
12
|
+
}
|
|
13
|
+
export declare const TextBlock: (props: import("@redneckz/uni-jsx").PropsWithChildren<TextBlockProps, any>, context?: any) => any;
|
|
14
|
+
export {};
|
package/lib/TextBlock.js
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
|
|
2
|
+
import { JSX } from '@redneckz/uni-jsx';
|
|
3
|
+
import { Img } from './Img.js';
|
|
4
|
+
const textBlockStyleMaps = {
|
|
5
|
+
primary: {
|
|
6
|
+
background: 'bg-white',
|
|
7
|
+
icon: 'bg-primary-main text-white',
|
|
8
|
+
title: 'text-base',
|
|
9
|
+
description: 'text-secondary-text',
|
|
10
|
+
},
|
|
11
|
+
secondary: {
|
|
12
|
+
background: 'bg-primary-main',
|
|
13
|
+
icon: 'bg-white text-primary-main',
|
|
14
|
+
title: 'text-white',
|
|
15
|
+
description: 'text-white',
|
|
16
|
+
},
|
|
17
|
+
'secondary-light': {
|
|
18
|
+
background: 'bg-primary-main/10',
|
|
19
|
+
icon: 'bg-primary-main text-white',
|
|
20
|
+
title: 'text-base',
|
|
21
|
+
description: 'text-secondary-text',
|
|
22
|
+
},
|
|
23
|
+
};
|
|
24
|
+
export const TextBlock = JSX(({ title, description, blockVersion = 'primary', iconVersion, image, className }) => {
|
|
25
|
+
const textBlockStyleMap = textBlockStyleMaps[blockVersion];
|
|
26
|
+
return (_jsxs("section", { className: `font-sans px-9 py-4 flex ${textBlockStyleMap.background} ${className || ''}`, children: [iconVersion && iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null, iconVersion && iconVersion === 'big' ? renderImage(image) : null, _jsxs("div", { className: "py-0.5", children: [title && _jsx("div", { className: `font-medium mb-1 ${textBlockStyleMap.title}`, children: title }), description && (_jsx("div", { className: `text-sm ${textBlockStyleMap.description}`, children: description }))] })] }));
|
|
27
|
+
});
|
|
28
|
+
function renderIcon(className) {
|
|
29
|
+
return (_jsx("div", { className: `pt-1.5 pr-4`, children: _jsx("div", { className: `rounded-full h-4 w-4 text-center text-xs ${className}`, children: "i" }) }));
|
|
30
|
+
}
|
|
31
|
+
function renderImage(image) {
|
|
32
|
+
return image?.src ? _jsx(Img, { className: "pt-0.5 pr-3", image: image }) : null;
|
|
33
|
+
}
|
|
34
|
+
//# sourceMappingURL=TextBlock.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextBlock.js","sourceRoot":"","sources":["../src/TextBlock.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAe5B,MAAM,kBAAkB,GAGpB;IACF,OAAO,EAAE;QACP,UAAU,EAAE,UAAU;QACtB,IAAI,EAAE,4BAA4B;QAClC,KAAK,EAAE,WAAW;QAClB,WAAW,EAAE,qBAAqB;KACnC;IACD,SAAS,EAAE;QACT,UAAU,EAAE,iBAAiB;QAC7B,IAAI,EAAE,4BAA4B;QAClC,KAAK,EAAE,YAAY;QACnB,WAAW,EAAE,YAAY;KAC1B;IACD,iBAAiB,EAAE;QACjB,UAAU,EAAE,oBAAoB;QAChC,IAAI,EAAE,4BAA4B;QAClC,KAAK,EAAE,WAAW;QAClB,WAAW,EAAE,qBAAqB;KACnC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAC1B,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,GAAG,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IAClF,MAAM,iBAAiB,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAC3D,OAAO,CACL,mBACE,SAAS,EAAE,4BAA4B,iBAAiB,CAAC,UAAU,IAAI,SAAS,IAAI,EAAE,EAAE,aAEvF,WAAW,IAAI,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,EAClF,WAAW,IAAI,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EACjE,eAAK,SAAS,EAAC,QAAQ,aACpB,KAAK,IAAI,cAAK,SAAS,EAAE,oBAAoB,iBAAiB,CAAC,KAAK,EAAE,YAAG,KAAK,GAAO,EACrF,WAAW,IAAI,CACd,cAAK,SAAS,EAAE,WAAW,iBAAiB,CAAC,WAAW,EAAE,YAAG,WAAW,GAAO,CAChF,IACG,IACE,CACX,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,UAAU,CAAC,SAAiB;IACnC,OAAO,CACL,cAAK,SAAS,EAAE,aAAa,YAC3B,cAAK,SAAS,EAAE,4CAA4C,SAAS,EAAE,kBAAS,GAC5E,CACP,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,KAAe;IAClC,OAAO,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,KAAC,GAAG,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,KAAK,GAAI,CAAC,CAAC,CAAC,IAAI,CAAC;AAC3E,CAAC"}
|
package/lib/common.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import "../fonts/ubuntu/ubuntu.css";[data-theme=pc]{--color-primary-main:#42ab44;--color-primary-hover:#248341;--color-primary-active:#245f34;--color-secondary-hover:#c5e2c6;--color-secondary-active:#d8f2d9}[data-theme=bc]{--color-primary-main:#83b83e;--color-primary-hover:#5c921d;--color-primary-active:#3c5e10;--color-secondary-hover:#e8f4d9;--color-secondary-active:#d8e3ca}[data-theme=eo]{--color-primary-main:#ddb63d;--color-primary-hover:#bb9727;--color-primary-active:#7e630c;--color-secondary-hover:#f1ecdd;--color-secondary-active:#e5dec7}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.absolute{position:absolute}.relative{position:relative}.sticky{position:-webkit-sticky;position:sticky}.top-4{top:1rem}.right-4{right:1rem}.bottom-0{bottom:0}.right-0{right:0}.left-0{left:0}.-bottom-2{bottom:-.5rem}.top-0{top:0}.z-10{z-index:10}.col-span-12{grid-column:span 12/span 12}.col-span-8{grid-column:span 8/span 8}.col-span-4{grid-column:span 4/span 4}.col-span-6{grid-column:span 6/span 6}.m-0{margin:0}.-mx-20{margin-left:-5rem;margin-right:-5rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.my-4{margin-bottom:1rem;margin-top:1rem}.mx-3{margin-left:.75rem;margin-right:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mt-9{margin-top:2.25rem}.mt-auto{margin-top:auto}.ml-7{margin-left:1.75rem}.mt-2\.5{margin-top:.625rem}.mt-2{margin-top:.5rem}.ml-2{margin-left:.5rem}.ml-4{margin-left:1rem}.mb-6{margin-bottom:1.5rem}.mt-6{margin-top:1.5rem}.mb-3\.5{margin-bottom:.875rem}.mb-3{margin-bottom:.75rem}.mt-5{margin-top:1.25rem}.mb-1{margin-bottom:.25rem}.mr-8{margin-right:2rem}.mt-4{margin-top:1rem}.mb-2{margin-bottom:.5rem}.ml-auto{margin-left:auto}.mr-5{margin-right:1.25rem}.mr-7{margin-right:1.75rem}.mr-2{margin-right:.5rem}.ml-2\.5{margin-left:.625rem}.box-border{box-sizing:border-box}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-full{height:100%}.h-\[70px\]{height:70px}.h-8{height:2rem}.h-\[90px\]{height:90px}.h-4{height:1rem}.h-\[50px\]{height:50px}.h-\[3px\]{height:3px}.h-0\.5{height:.125rem}.h-0{height:0}.h-\[100px\]{height:100px}.h-\[1px\]{height:1px}.h-\[8px\]{height:8px}.h-\[2px\]{height:2px}.h-\[24px\]{height:24px}.min-h-\[70px\]{min-height:70px}.min-h-\[90px\]{min-height:90px}.min-h-\[50px\]{min-height:50px}.min-h-\[100px\]{min-height:100px}.min-h-\[320px\]{min-height:320px}.min-h-\[32px\]{min-height:32px}.min-h-\[8px\]{min-height:8px}.w-\[70px\]{width:70px}.w-full{width:100%}.w-8{width:2rem}.w-\[125px\]{width:125px}.w-\[90px\]{width:90px}.w-\[50px\]{width:50px}.w-\[100px\]{width:100px}.w-\[276px\]{width:276px}.w-\[280px\]{width:280px}.w-\[235px\]{width:235px}.w-\[24px\]{width:24px}.w-\[8px\]{width:8px}.w-\[36px\]{width:36px}.w-10{width:2.5rem}.min-w-\[70px\]{min-width:70px}.min-w-\[90px\]{min-width:90px}.min-w-\[600px\]{min-width:600px}.min-w-\[50px\]{min-width:50px}.min-w-\[100px\]{min-width:100px}.min-w-\[32px\]{min-width:32px}.min-w-\[8px\]{min-width:8px}.max-w-\[600px\]{max-width:600px}.max-w-\[47rem\]{max-width:47rem}.max-w-\[580px\]{max-width:580px}.max-w-min{max-width:-webkit-min-content;max-width:-moz-min-content;max-width:min-content}.max-w-\[292px\]{max-width:292px}.max-w-\[170px\]{max-width:170px}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.grow-0{flex-grow:0}.basis-full{flex-basis:100%}.basis-0{flex-basis:0px}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@-webkit-keyframes progress{0%{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes progress{0%{transform:translateX(-100%)}to{transform:translateX(0)}}.animate-slide{-webkit-animation:progress linear;animation:progress linear}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.resize{resize:both}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-3{gap:.75rem}.gap-5{gap:1.25rem}.gap-1{gap:.25rem}.gap-6{gap:1.5rem}.gap-4{gap:1rem}.gap-32{gap:8rem}.gap-11{gap:2.75rem}.gap-\[14px\]{gap:14px}.gap-2{gap:.5rem}.gap-3\.5{gap:.875rem}.gap-x-24{-moz-column-gap:6rem;column-gap:6rem}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-l-full{border-bottom-left-radius:9999px;border-top-left-radius:9999px}.rounded-r-full{border-bottom-right-radius:9999px;border-top-right-radius:9999px}.rounded-tl-lg{border-top-left-radius:.5rem}.rounded-bl-3xl{border-bottom-left-radius:1.5rem}.rounded-br-3xl{border-bottom-right-radius:1.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-0{border-width:0}.border-x-0{border-left-width:0;border-right-width:0}.border-t{border-top-width:1px}.border-r{border-right-width:1px}.border-solid{border-style:solid}.border-none{border-style:none}.border-main{--tw-border-opacity:1;border-color:rgb(240 244 240/var(--tw-border-opacity))}.border-main-divider{--tw-border-opacity:1;border-color:rgb(235 237 240/var(--tw-border-opacity))}.border-primary-main{border-color:var(--color-primary-main)}.border-transparent{border-color:transparent}.border-y-main-divider{--tw-border-opacity:1;border-bottom-color:rgb(235 237 240/var(--tw-border-opacity));border-top-color:rgb(235 237 240/var(--tw-border-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-main{--tw-bg-opacity:1;background-color:rgb(240 244 240/var(--tw-bg-opacity))}.bg-secondary-text{--tw-bg-opacity:1;background-color:rgb(125 126 127/var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-secondary-light{--tw-bg-opacity:1;background-color:rgb(245 247 249/var(--tw-bg-opacity))}.bg-inherit{background-color:inherit}.bg-primary-main{background-color:var(--color-primary-main)}.bg-main-divider{--tw-bg-opacity:1;background-color:rgb(235 237 240/var(--tw-bg-opacity))}.bg-secondary-dark{--tw-bg-opacity:1;background-color:rgb(226 228 229/var(--tw-bg-opacity))}.p-12{padding:3rem}.p-10{padding:2.5rem}.p-20{padding:5rem}.p-2{padding:.5rem}.p-\[10px\]{padding:10px}.p-\[26px\]{padding:26px}.p-9{padding:2.25rem}.p-0{padding:0}.px-0{padding-left:0;padding-right:0}.py-4{padding-bottom:1rem;padding-top:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-12{padding-left:3rem;padding-right:3rem}.py-12{padding-bottom:3rem;padding-top:3rem}.px-\[88px\]{padding-left:88px;padding-right:88px}.px-3{padding-left:.75rem;padding-right:.75rem}.px-9{padding-left:2.25rem;padding-right:2.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-8{padding-bottom:2rem;padding-top:2rem}.py-5{padding-bottom:1.25rem;padding-top:1.25rem}.py-6{padding-bottom:1.5rem;padding-top:1.5rem}.py-\[5px\]{padding-bottom:5px;padding-top:5px}.px-20{padding-left:5rem;padding-right:5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-4{padding-left:1rem;padding-right:1rem}.pb-2{padding-bottom:.5rem}.pt-0{padding-top:0}.pl-11{padding-left:2.75rem}.pt-4{padding-top:1rem}.pt-10{padding-top:2.5rem}.pl-\[50px\]{padding-left:50px}.pb-\[50px\]{padding-bottom:50px}.pr-\[7\.5rem\]{padding-right:7.5rem}.pl-2\.5{padding-left:.625rem}.pt-2\.5{padding-top:.625rem}.pb-1\.5{padding-bottom:.375rem}.pr-\[6\.25rem\]{padding-right:6.25rem}.pl-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-1{padding-bottom:.25rem}.pt-1{padding-top:.25rem}.pr-28{padding-right:7rem}.pr-9{padding-right:2.25rem}.pr-\[4\.75rem\]{padding-right:4.75rem}.pr-\[9\.4rem\]{padding-right:9.4rem}.pt-\[3px\]{padding-top:3px}.pt-\[5px\]{padding-top:5px}.pt-5{padding-top:1.25rem}.pb-8{padding-bottom:2rem}.pl-4{padding-left:1rem}.pl-\[170px\]{padding-left:170px}.text-left{text-align:left}.text-center{text-align:center}.font-sans{font-family:Ubuntu,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-base{font-size:1rem;line-height:1.5rem}.text-title-lg{font-size:2.5rem;line-height:3rem}.text-title{font-size:2rem;line-height:2.5rem}.text-title-sm{font-size:1.75rem;line-height:2.5rem}.text-title-xs{font-size:1.5rem;line-height:1.875rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.375rem}.text-xs{font-size:.75rem;line-height:1.125rem}.text-xxs{font-size:.625rem;line-height:.625rem}.font-medium{font-weight:500}.font-normal{font-weight:400}.text-primary-text{--tw-text-opacity:1;color:rgb(28 28 28/var(--tw-text-opacity))}.text-secondary-text{--tw-text-opacity:1;color:rgb(125 126 127/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-secondary-light{--tw-text-opacity:1;color:rgb(245 247 249/var(--tw-text-opacity))}.text-primary-main{color:var(--color-primary-main)}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.no-underline{-webkit-text-decoration-line:none;text-decoration-line:none}.shadow-\[0_8px_32px_0px_\#00000014\]{--tw-shadow:0 8px 32px 0px #00000014;--tw-shadow-colored:0 8px 32px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.duration-1000{transition-duration:1s}.rotate-180{transform:rotate(180deg)}.-translate-x-full{transform:translateX(-100%)}.visited\:text-secondary-text:visited{color:#7d7e7f}.hover\:bg-primary-hover:hover{background-color:var(--color-primary-hover)}.hover\:bg-secondary-hover:hover{background-color:var(--color-secondary-hover)}.hover\:text-primary-text:hover{--tw-text-opacity:1;color:rgb(28 28 28/var(--tw-text-opacity))}.hover\:text-primary-main:hover{color:var(--color-primary-main)}.hover\:text-secondary-active:hover{color:var(--color-secondary-active)}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.active\:bg-primary-active:active{background-color:var(--color-primary-active)}.active\:bg-secondary-active:active{background-color:var(--color-secondary-active)}.group:hover .group-hover\:text-primary-text{--tw-text-opacity:1;color:rgb(28 28 28/var(--tw-text-opacity))}@media (min-width:1280px) and (max-width:1535px){.xl\:w-\[220px\]{width:220px}.xl\:gap-8{gap:2rem}.xl\:gap-5{gap:1.25rem}}
|
|
1
|
+
@import "../fonts/ubuntu/ubuntu.css";[data-theme=pc]{--color-primary-main:66,171,68;--color-primary-hover:36,131,65;--color-primary-active:36,95,52;--color-secondary-hover:216,242,217;--color-secondary-active:197,226,198}[data-theme=bc]{--color-primary-main:131,184,62;--color-primary-hover:92,146,29;--color-primary-active:60,94,16;--color-secondary-hover:232,244,217;--color-secondary-active:216,227,202}[data-theme=eo]{--color-primary-main:221,182,61;--color-primary-hover:187,151,39;--color-primary-active:126,99,12;--color-secondary-hover:241,236,221;--color-secondary-active:229,222,199}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.absolute{position:absolute}.relative{position:relative}.sticky{position:-webkit-sticky;position:sticky}.top-4{top:1rem}.right-4{right:1rem}.bottom-0{bottom:0}.right-0{right:0}.left-0{left:0}.-bottom-2{bottom:-.5rem}.top-0{top:0}.z-10{z-index:10}.col-span-12{grid-column:span 12/span 12}.col-span-8{grid-column:span 8/span 8}.col-span-4{grid-column:span 4/span 4}.col-span-6{grid-column:span 6/span 6}.m-0{margin:0}.-mx-20{margin-left:-5rem;margin-right:-5rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.my-4{margin-bottom:1rem;margin-top:1rem}.mx-3{margin-left:.75rem;margin-right:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mt-9{margin-top:2.25rem}.mt-auto{margin-top:auto}.ml-7{margin-left:1.75rem}.mt-2\.5{margin-top:.625rem}.mt-2{margin-top:.5rem}.ml-2{margin-left:.5rem}.ml-4{margin-left:1rem}.mb-6{margin-bottom:1.5rem}.mt-6{margin-top:1.5rem}.mb-3\.5{margin-bottom:.875rem}.mb-3{margin-bottom:.75rem}.mt-5{margin-top:1.25rem}.mb-1{margin-bottom:.25rem}.mr-8{margin-right:2rem}.mt-4{margin-top:1rem}.mb-2{margin-bottom:.5rem}.ml-auto{margin-left:auto}.mr-5{margin-right:1.25rem}.mr-7{margin-right:1.75rem}.mr-2{margin-right:.5rem}.ml-2\.5{margin-left:.625rem}.box-border{box-sizing:border-box}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-full{height:100%}.h-\[70px\]{height:70px}.h-8{height:2rem}.h-\[90px\]{height:90px}.h-4{height:1rem}.h-\[50px\]{height:50px}.h-\[3px\]{height:3px}.h-0\.5{height:.125rem}.h-0{height:0}.h-\[100px\]{height:100px}.h-\[1px\]{height:1px}.h-\[8px\]{height:8px}.h-\[2px\]{height:2px}.h-\[24px\]{height:24px}.min-h-\[70px\]{min-height:70px}.min-h-\[90px\]{min-height:90px}.min-h-\[50px\]{min-height:50px}.min-h-\[100px\]{min-height:100px}.min-h-\[320px\]{min-height:320px}.min-h-\[32px\]{min-height:32px}.min-h-\[8px\]{min-height:8px}.w-\[70px\]{width:70px}.w-full{width:100%}.w-8{width:2rem}.w-\[125px\]{width:125px}.w-\[90px\]{width:90px}.w-\[50px\]{width:50px}.w-\[100px\]{width:100px}.w-\[276px\]{width:276px}.w-4{width:1rem}.w-\[280px\]{width:280px}.w-\[235px\]{width:235px}.w-\[24px\]{width:24px}.w-\[8px\]{width:8px}.w-\[36px\]{width:36px}.w-10{width:2.5rem}.min-w-\[70px\]{min-width:70px}.min-w-\[90px\]{min-width:90px}.min-w-\[600px\]{min-width:600px}.min-w-\[50px\]{min-width:50px}.min-w-\[100px\]{min-width:100px}.min-w-\[32px\]{min-width:32px}.min-w-\[8px\]{min-width:8px}.max-w-\[600px\]{max-width:600px}.max-w-\[47rem\]{max-width:47rem}.max-w-\[580px\]{max-width:580px}.max-w-min{max-width:-webkit-min-content;max-width:-moz-min-content;max-width:min-content}.max-w-\[292px\]{max-width:292px}.max-w-\[170px\]{max-width:170px}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.grow-0{flex-grow:0}.basis-full{flex-basis:100%}.basis-0{flex-basis:0px}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@-webkit-keyframes progress{0%{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes progress{0%{transform:translateX(-100%)}to{transform:translateX(0)}}.animate-slide{-webkit-animation:progress linear;animation:progress linear}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.resize{resize:both}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-3{gap:.75rem}.gap-5{gap:1.25rem}.gap-1{gap:.25rem}.gap-6{gap:1.5rem}.gap-4{gap:1rem}.gap-32{gap:8rem}.gap-11{gap:2.75rem}.gap-\[14px\]{gap:14px}.gap-2{gap:.5rem}.gap-3\.5{gap:.875rem}.gap-x-24{-moz-column-gap:6rem;column-gap:6rem}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-l-full{border-bottom-left-radius:9999px;border-top-left-radius:9999px}.rounded-r-full{border-bottom-right-radius:9999px;border-top-right-radius:9999px}.rounded-tl-lg{border-top-left-radius:.5rem}.rounded-bl-3xl{border-bottom-left-radius:1.5rem}.rounded-br-3xl{border-bottom-right-radius:1.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-0{border-width:0}.border-x-0{border-left-width:0;border-right-width:0}.border-t{border-top-width:1px}.border-r{border-right-width:1px}.border-solid{border-style:solid}.border-none{border-style:none}.border-main{--tw-border-opacity:1;border-color:rgba(240,244,240,var(--tw-border-opacity))}.border-main-divider{--tw-border-opacity:1;border-color:rgba(235,237,240,var(--tw-border-opacity))}.border-primary-main{--tw-border-opacity:1;border-color:rgba(var(--color-primary-main),var(--tw-border-opacity))}.border-transparent{border-color:transparent}.border-y-main-divider{--tw-border-opacity:1;border-bottom-color:rgba(235,237,240,var(--tw-border-opacity));border-top-color:rgba(235,237,240,var(--tw-border-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-main{--tw-bg-opacity:1;background-color:rgba(240,244,240,var(--tw-bg-opacity))}.bg-secondary-text{--tw-bg-opacity:1;background-color:rgba(125,126,127,var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-secondary-light{--tw-bg-opacity:1;background-color:rgba(245,247,249,var(--tw-bg-opacity))}.bg-inherit{background-color:inherit}.bg-primary-main{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-main),var(--tw-bg-opacity))}.bg-primary-main\/10{background-color:rgba(var(--color-primary-main),.1)}.bg-main-divider{--tw-bg-opacity:1;background-color:rgba(235,237,240,var(--tw-bg-opacity))}.bg-secondary-dark{--tw-bg-opacity:1;background-color:rgba(226,228,229,var(--tw-bg-opacity))}.p-12{padding:3rem}.p-10{padding:2.5rem}.p-20{padding:5rem}.p-2{padding:.5rem}.p-\[10px\]{padding:10px}.p-\[26px\]{padding:26px}.p-9{padding:2.25rem}.p-0{padding:0}.px-0{padding-left:0;padding-right:0}.py-4{padding-bottom:1rem;padding-top:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-12{padding-left:3rem;padding-right:3rem}.py-12{padding-bottom:3rem;padding-top:3rem}.px-\[88px\]{padding-left:88px;padding-right:88px}.px-3{padding-left:.75rem;padding-right:.75rem}.px-9{padding-left:2.25rem;padding-right:2.25rem}.py-0\.5{padding-bottom:.125rem;padding-top:.125rem}.py-0{padding-bottom:0;padding-top:0}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-8{padding-bottom:2rem;padding-top:2rem}.py-5{padding-bottom:1.25rem;padding-top:1.25rem}.py-6{padding-bottom:1.5rem;padding-top:1.5rem}.py-\[5px\]{padding-bottom:5px;padding-top:5px}.px-20{padding-left:5rem;padding-right:5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-4{padding-left:1rem;padding-right:1rem}.pb-2{padding-bottom:.5rem}.pt-0{padding-top:0}.pl-11{padding-left:2.75rem}.pt-4{padding-top:1rem}.pt-10{padding-top:2.5rem}.pl-\[50px\]{padding-left:50px}.pb-\[50px\]{padding-bottom:50px}.pr-\[7\.5rem\]{padding-right:7.5rem}.pl-2\.5{padding-left:.625rem}.pt-2\.5{padding-top:.625rem}.pb-1\.5{padding-bottom:.375rem}.pr-\[6\.25rem\]{padding-right:6.25rem}.pl-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-1{padding-bottom:.25rem}.pt-1{padding-top:.25rem}.pt-1\.5{padding-top:.375rem}.pr-4{padding-right:1rem}.pt-0\.5{padding-top:.125rem}.pr-3{padding-right:.75rem}.pr-28{padding-right:7rem}.pr-9{padding-right:2.25rem}.pr-\[4\.75rem\]{padding-right:4.75rem}.pr-\[9\.4rem\]{padding-right:9.4rem}.pt-\[3px\]{padding-top:3px}.pt-\[5px\]{padding-top:5px}.pt-5{padding-top:1.25rem}.pb-8{padding-bottom:2rem}.pl-4{padding-left:1rem}.pl-\[170px\]{padding-left:170px}.text-left{text-align:left}.text-center{text-align:center}.font-sans{font-family:Ubuntu,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-base{font-size:1rem;line-height:1.5rem}.text-title{font-size:2rem;line-height:2.5rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.375rem}.text-xs{font-size:.75rem;line-height:1.125rem}.text-title-sm{font-size:1.75rem;line-height:2.5rem}.text-xxs{font-size:.625rem;line-height:.625rem}.text-title-lg{font-size:2.5rem;line-height:3rem}.text-title-xs{font-size:1.5rem;line-height:1.875rem}.font-medium{font-weight:500}.font-normal{font-weight:400}.text-primary-text{--tw-text-opacity:1;color:rgba(28,28,28,var(--tw-text-opacity))}.text-secondary-text{--tw-text-opacity:1;color:rgba(125,126,127,var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-primary-main{--tw-text-opacity:1;color:rgba(var(--color-primary-main),var(--tw-text-opacity))}.text-secondary-light{--tw-text-opacity:1;color:rgba(245,247,249,var(--tw-text-opacity))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.no-underline{-webkit-text-decoration-line:none;text-decoration-line:none}.shadow-\[0_8px_32px_0px_\#00000014\]{--tw-shadow:0 8px 32px 0px #00000014;--tw-shadow-colored:0 8px 32px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.duration-1000{transition-duration:1s}.rotate-180{transform:rotate(180deg)}.-translate-x-full{transform:translateX(-100%)}.visited\:text-secondary-text:visited{color:rgba(125,126,127,var(--tw-text-opacity))}.hover\:bg-primary-hover:hover{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-hover),var(--tw-bg-opacity))}.hover\:bg-secondary-hover:hover{--tw-bg-opacity:1;background-color:rgba(var(--color-secondary-hover),var(--tw-bg-opacity))}.hover\:text-primary-text:hover{--tw-text-opacity:1;color:rgba(28,28,28,var(--tw-text-opacity))}.hover\:text-primary-main:hover{--tw-text-opacity:1;color:rgba(var(--color-primary-main),var(--tw-text-opacity))}.hover\:text-secondary-active:hover{--tw-text-opacity:1;color:rgba(var(--color-secondary-active),var(--tw-text-opacity))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.active\:bg-primary-active:active{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-active),var(--tw-bg-opacity))}.active\:bg-secondary-active:active{--tw-bg-opacity:1;background-color:rgba(var(--color-secondary-active),var(--tw-bg-opacity))}.group:hover .group-hover\:text-primary-text{--tw-text-opacity:1;color:rgba(28,28,28,var(--tw-text-opacity))}@media (min-width:1280px) and (max-width:1535px){.xl\:w-\[220px\]{width:220px}.xl\:gap-8{gap:2rem}.xl\:gap-5{gap:1.25rem}}
|
package/lib/types.d.ts
CHANGED
|
@@ -4,7 +4,6 @@ import type { ContentPageContext } from './ContentPageContext';
|
|
|
4
4
|
export declare type ColorPalette = 'pc' | 'bc' | 'eo';
|
|
5
5
|
export declare type BlockVersion = 'primary' | 'secondary';
|
|
6
6
|
export declare type ButtonVersion = 'primary' | 'secondary';
|
|
7
|
-
export declare type TitleSize = 'S' | 'M' | 'L' | 'XL';
|
|
8
7
|
export interface BlockDef {
|
|
9
8
|
type: string;
|
|
10
9
|
style?: string[];
|
package/lib/ui-kit/Button.js
CHANGED
|
@@ -11,7 +11,7 @@ const buttonDisabledStyleMap = {
|
|
|
11
11
|
const styleButton = 'inline-block rounded-md px-8 py-2 text-center font-sans';
|
|
12
12
|
export const Button = JSX(({ className, text, href, target, onClick, children, disabled, version = 'primary', ariaLabel, }) => {
|
|
13
13
|
if (disabled) {
|
|
14
|
-
return (_jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel,
|
|
14
|
+
return (_jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: "-1", className: `${styleButton} select-none ${buttonDisabledStyleMap[version]} ${className || ''}`, children: children ? (_jsx("div", { children: children })) : (_jsx("div", { className: "text-sm font-medium py-1.5", children: text })) }));
|
|
15
15
|
}
|
|
16
16
|
return (_jsx("a", { className: `${styleButton} no-underline ${buttonStyleMap[version]} ${className || ''}`, href: href, target: target, onClick: onClick, "aria-label": ariaLabel, children: children ? (_jsx("div", { children: children })) : (_jsx("div", { className: "text-sm font-medium py-1.5", children: text })) }));
|
|
17
17
|
});
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export declare enum SizeTableClass {
|
|
2
|
+
'XL' = "text-title-lg",
|
|
3
|
+
'L' = "text-title",
|
|
4
|
+
'M' = "text-title-sm",
|
|
5
|
+
'S' = "text-title-xs"
|
|
6
|
+
}
|
|
7
|
+
export declare type TitleSize = keyof typeof SizeTableClass;
|
|
8
|
+
export interface TitleProps extends Partial<HTMLHeadingElement> {
|
|
9
|
+
size?: TitleSize;
|
|
10
|
+
}
|
|
11
|
+
export declare const Title: (props: import("@redneckz/uni-jsx").PropsWithChildren<TitleProps, any>, context?: any) => any;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
|
|
2
|
+
import { JSX } from '@redneckz/uni-jsx';
|
|
3
|
+
export var SizeTableClass;
|
|
4
|
+
(function (SizeTableClass) {
|
|
5
|
+
SizeTableClass["XL"] = "text-title-lg";
|
|
6
|
+
SizeTableClass["L"] = "text-title";
|
|
7
|
+
SizeTableClass["M"] = "text-title-sm";
|
|
8
|
+
SizeTableClass["S"] = "text-title-xs";
|
|
9
|
+
})(SizeTableClass || (SizeTableClass = {}));
|
|
10
|
+
export const Title = JSX(({ size = 'L', className, children, ...rest }) => {
|
|
11
|
+
const Tag = size === 'XL' ? 'h1' : 'h2';
|
|
12
|
+
return (_jsx(Tag, { className: getClasses(SizeTableClass[size], className), ...rest, children: children }));
|
|
13
|
+
});
|
|
14
|
+
const getClasses = (...classes) => classes.filter(Boolean).join(' ');
|
|
15
|
+
//# sourceMappingURL=Title.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Title.js","sourceRoot":"","sources":["../../src/ui-kit/Title.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,MAAM,CAAN,IAAY,cAKX;AALD,WAAY,cAAc;IACxB,sCAAsB,CAAA;IACtB,kCAAkB,CAAA;IAClB,qCAAqB,CAAA;IACrB,qCAAqB,CAAA;AACvB,CAAC,EALW,cAAc,KAAd,cAAc,QAKzB;AAQD,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAa,CAAC,EAAE,IAAI,GAAG,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IACpF,MAAM,GAAG,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IACxC,OAAO,CACL,KAAC,GAAG,IAAC,SAAS,EAAE,UAAU,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,KAAM,IAAI,YAClE,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,UAAU,GAAG,CAAC,GAAG,OAA+B,EAAE,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC"}
|
package/package.json
CHANGED
package/src/BaseTile.tsx
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { JSX } from '@redneckz/uni-jsx';
|
|
2
2
|
import { Img } from './Img';
|
|
3
|
-
import type { BlockVersion, Picture, UniBlockProps
|
|
3
|
+
import type { BlockVersion, Picture, UniBlockProps } from './types';
|
|
4
4
|
import { BlockItem } from './ui-kit/BlockItem';
|
|
5
5
|
import type { IconButtonProps } from './ui-kit/IconButton';
|
|
6
6
|
import { IconButton } from './ui-kit/IconButton';
|
|
7
|
+
import { Title } from './ui-kit/Title';
|
|
8
|
+
import type { TitleSize } from './ui-kit/Title';
|
|
7
9
|
import { useLink } from './useLink';
|
|
8
10
|
import { getColSpan } from './utils/getColSpan';
|
|
9
11
|
|
|
@@ -37,7 +39,11 @@ export const BaseTile = JSX<BaseTileProps>(
|
|
|
37
39
|
const { handlerDecorator } = context;
|
|
38
40
|
return (
|
|
39
41
|
<div className={`font-sans flex flex-col grow h-full`}>
|
|
40
|
-
{title &&
|
|
42
|
+
{title && (
|
|
43
|
+
<Title size={titleSize || getTitleSizeByClassName(className)} className={TITLE_CLASSES}>
|
|
44
|
+
{title}
|
|
45
|
+
</Title>
|
|
46
|
+
)}
|
|
41
47
|
<div className="flex grow justify-between">
|
|
42
48
|
<div className="flex flex-col justify-between items-start">
|
|
43
49
|
<div>
|
|
@@ -62,21 +68,6 @@ export const BaseTile = JSX<BaseTileProps>(
|
|
|
62
68
|
},
|
|
63
69
|
);
|
|
64
70
|
|
|
65
|
-
function renderTitle(title: string, titleSize: TitleSize) {
|
|
66
|
-
switch (titleSize) {
|
|
67
|
-
case 'XL':
|
|
68
|
-
return <h1 className={`${TITLE_CLASSES} text-title-lg`}>{title}</h1>;
|
|
69
|
-
case 'L':
|
|
70
|
-
return <h2 className={`${TITLE_CLASSES} text-title`}>{title}</h2>;
|
|
71
|
-
case 'M':
|
|
72
|
-
return <h2 className={`${TITLE_CLASSES} text-title-sm`}>{title}</h2>;
|
|
73
|
-
case 'S':
|
|
74
|
-
return <h2 className={`${TITLE_CLASSES} text-title-xs`}>{title}</h2>;
|
|
75
|
-
default:
|
|
76
|
-
return <h2 className={`${TITLE_CLASSES} text-title`}>{title}</h2>;
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
|
|
80
71
|
function getTitleSizeByClassName(className: string = '') {
|
|
81
72
|
const colSpan = getColSpan(className);
|
|
82
73
|
if (colSpan <= 4) {
|
package/src/Blocks.ts
CHANGED
|
@@ -12,6 +12,7 @@ import { ProductTile, ProductTileContent } from './ProductTile';
|
|
|
12
12
|
import { BaseTileContent } from './BaseTile';
|
|
13
13
|
import { PromoTile, PromoTileContent } from './PromoTile';
|
|
14
14
|
import { Tile } from './Tile';
|
|
15
|
+
import { TextBlock, TextBlockContent } from './TextBlock';
|
|
15
16
|
|
|
16
17
|
export const Blocks = {
|
|
17
18
|
Header,
|
|
@@ -19,6 +20,7 @@ export const Blocks = {
|
|
|
19
20
|
Placeholder,
|
|
20
21
|
Tile,
|
|
21
22
|
PromoTile,
|
|
23
|
+
TextBlock,
|
|
22
24
|
ProductTile,
|
|
23
25
|
ProductBlock,
|
|
24
26
|
StepsBlock,
|
|
@@ -33,6 +35,7 @@ export type BlockContent =
|
|
|
33
35
|
| FooterContent
|
|
34
36
|
| PlaceholderContent
|
|
35
37
|
| BaseTileContent
|
|
38
|
+
| TextBlockContent
|
|
36
39
|
| ProductTileContent
|
|
37
40
|
| PromoTileContent
|
|
38
41
|
| ProductBlockInnerContent
|
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
"type": "Header",
|
|
17
17
|
"style": ["col-span-12", "-mx-20", "mb-5", "shadow-[0_8px_32px_0px_#00000014]"],
|
|
18
18
|
"content": {
|
|
19
|
+
"defaultLocation": "Москва",
|
|
19
20
|
"topItems": [
|
|
20
21
|
{
|
|
21
22
|
"href": "https://rshb.ru/",
|
|
@@ -687,6 +688,17 @@
|
|
|
687
688
|
]
|
|
688
689
|
}
|
|
689
690
|
},
|
|
691
|
+
{
|
|
692
|
+
"type": "TextBlock",
|
|
693
|
+
"style": ["col-span-12"],
|
|
694
|
+
"content": {
|
|
695
|
+
"title": "Все карты Россельхозбанка работают",
|
|
696
|
+
"description": "Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка",
|
|
697
|
+
"blockVersion": "primary",
|
|
698
|
+
"iconVersion": "small"
|
|
699
|
+
}
|
|
700
|
+
},
|
|
701
|
+
|
|
690
702
|
{
|
|
691
703
|
"type": "Footer",
|
|
692
704
|
"style": ["col-span-12"],
|
package/src/ContentPage.tsx
CHANGED
|
@@ -37,7 +37,7 @@ export const ContentPage = JSX<ContentPageProps>(
|
|
|
37
37
|
}) => {
|
|
38
38
|
return (
|
|
39
39
|
<section className="relative" data-theme={colorPalette}>
|
|
40
|
-
<div className={`grid grid-cols-12 gap-1 ${style2className(pageStyle)} ${className}`}>
|
|
40
|
+
<div className={`grid grid-cols-12 gap-1 ${style2className(pageStyle)} ${className || ''}`}>
|
|
41
41
|
{blocks?.length ? blocks.map(renderBlock) : null}
|
|
42
42
|
</div>
|
|
43
43
|
{likeControl && (
|
package/src/Icons/AppleIcon.tsx
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export const AppleIcon = (props?: Record<string, any>) => (
|
|
2
2
|
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
3
|
-
<g
|
|
3
|
+
<g clipPath="url(#a)">
|
|
4
4
|
<path
|
|
5
5
|
d="M19.406 12.761c-.023-3.028 2.793-4.511 2.93-4.572-1.603-2.073-4.075-2.357-4.968-2.377-2.083-.204-4.098 1.117-5.174 1.117-1.076 0-2.725-1.097-4.488-1.056-2.266.04-4.395 1.198-5.563 3.007-2.404 3.698-.618 9.124 1.694 12.09 1.145 1.464 2.496 3.09 4.259 3.028 1.717-.06 2.358-.975 4.441-.975 2.06 0 2.656.975 4.465.935 1.854-.02 3.022-1.463 4.12-2.947 1.329-1.666 1.855-3.332 1.878-3.413 0 0-3.549-1.2-3.594-4.837Zm-3.389-8.92c.916-1.037 1.557-2.419 1.374-3.841-1.35.061-3.022.833-3.984 1.829-.847.894-1.625 2.337-1.42 3.698 1.512.102 3.069-.67 4.03-1.686Z"
|
|
6
6
|
fill="#42AB44"
|
package/src/MobileBlocks.ts
CHANGED
|
@@ -8,6 +8,7 @@ import { ProductBlock } from './ProductBlock';
|
|
|
8
8
|
import { ProductGallery } from './ProductGallery';
|
|
9
9
|
import { ProductTile } from './ProductTile';
|
|
10
10
|
import { StepsBlock } from './StepsBlock';
|
|
11
|
+
import { TextBlock } from './TextBlock';
|
|
11
12
|
import { Tile } from './Tile';
|
|
12
13
|
|
|
13
14
|
export const MobileBlocks = {
|
|
@@ -18,6 +19,7 @@ export const MobileBlocks = {
|
|
|
18
19
|
ProductTile,
|
|
19
20
|
ProductBlock,
|
|
20
21
|
StepsBlock,
|
|
22
|
+
TextBlock,
|
|
21
23
|
BenefitsBlock,
|
|
22
24
|
ProductGallery,
|
|
23
25
|
ExchangeRateTile,
|
|
@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
|
|
|
2
2
|
import { EmptyWalletIcon, PercentageSquareIcon, CalendarIcon } from './Icons/index';
|
|
3
3
|
import type { UniBlockProps, Benefit } from './types';
|
|
4
4
|
import { BaseTile } from './BaseTile';
|
|
5
|
+
import { Title } from './ui-kit/Title';
|
|
5
6
|
import type { BaseTileContent } from './BaseTile';
|
|
6
7
|
import { Img } from './Img';
|
|
7
8
|
|
|
@@ -19,9 +20,9 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
|
|
|
19
20
|
<div className={`flex grow justify-between items-stretch ${className || ''}`}>
|
|
20
21
|
<div className={'flex flex-col'}>
|
|
21
22
|
{title && (
|
|
22
|
-
<
|
|
23
|
+
<Title size="XL" className="font-medium m-0 mb-4 whitespace-pre-wrap max-w-[600px]">
|
|
23
24
|
{title}
|
|
24
|
-
</
|
|
25
|
+
</Title>
|
|
25
26
|
)}
|
|
26
27
|
<BaseTile context={context} description={description} items={items} buttons={buttons}>
|
|
27
28
|
{benefits?.length ? (
|
package/src/StepsBlock.tsx
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { JSX } from '@redneckz/uni-jsx';
|
|
2
2
|
import { NewDocIcon, PassSendIcon, ActualBalanceIcon } from './Icons/index';
|
|
3
3
|
import type { UniBlockProps } from './types';
|
|
4
|
+
import { Title } from './ui-kit/Title';
|
|
4
5
|
import { joinList } from './utils/joinList';
|
|
5
6
|
|
|
6
7
|
const ICONS = { NewDocIcon, PassSendIcon, ActualBalanceIcon };
|
|
@@ -24,7 +25,7 @@ export const StepsBlock = JSX<StepsBlockProps>(({ className, title, steps }) =>
|
|
|
24
25
|
className || ''
|
|
25
26
|
}`}
|
|
26
27
|
>
|
|
27
|
-
<
|
|
28
|
+
<Title className="font-medium m-0 max-w-[47rem] text-center">{title}</Title>
|
|
28
29
|
{steps?.length ? (
|
|
29
30
|
<div>
|
|
30
31
|
<div className="flex mt-9 items-center px-[88px]">
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
import { context } from './setup-fixture';
|
|
2
|
+
import { TextBlock } from './TextBlock';
|
|
3
|
+
import { Picture } from './types';
|
|
4
|
+
|
|
5
|
+
const image: Picture = {
|
|
6
|
+
src: 'bank-card.png',
|
|
7
|
+
format: 'webp',
|
|
8
|
+
size: {
|
|
9
|
+
width: 48,
|
|
10
|
+
height: 48,
|
|
11
|
+
},
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export default (
|
|
15
|
+
<div className="font-sans overflow-hidden">
|
|
16
|
+
<div>
|
|
17
|
+
<p>Private clients</p>
|
|
18
|
+
<div className="flex flex-col gap-6" data-theme="pc">
|
|
19
|
+
<TextBlock
|
|
20
|
+
context={context}
|
|
21
|
+
title="Все карты Россельхозбанка работают"
|
|
22
|
+
description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
|
|
23
|
+
blockVersion="primary"
|
|
24
|
+
iconVersion="small"
|
|
25
|
+
/>
|
|
26
|
+
<TextBlock
|
|
27
|
+
context={context}
|
|
28
|
+
title="Все карты Россельхозбанка работают"
|
|
29
|
+
description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
|
|
30
|
+
blockVersion="primary"
|
|
31
|
+
iconVersion="big"
|
|
32
|
+
image={image}
|
|
33
|
+
/>
|
|
34
|
+
<TextBlock
|
|
35
|
+
context={context}
|
|
36
|
+
title="Все карты Россельхозбанка работают"
|
|
37
|
+
description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
|
|
38
|
+
blockVersion="primary"
|
|
39
|
+
iconVersion="none"
|
|
40
|
+
/>
|
|
41
|
+
<TextBlock
|
|
42
|
+
context={context}
|
|
43
|
+
description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
|
|
44
|
+
blockVersion="primary"
|
|
45
|
+
iconVersion="small"
|
|
46
|
+
/>
|
|
47
|
+
<TextBlock
|
|
48
|
+
context={context}
|
|
49
|
+
title="Все карты Россельхозбанка работают"
|
|
50
|
+
description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
|
|
51
|
+
blockVersion="secondary"
|
|
52
|
+
iconVersion="small"
|
|
53
|
+
/>
|
|
54
|
+
<TextBlock
|
|
55
|
+
context={context}
|
|
56
|
+
title="Все карты Россельхозбанка работают"
|
|
57
|
+
description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
|
|
58
|
+
blockVersion="secondary-light"
|
|
59
|
+
iconVersion="small"
|
|
60
|
+
/>
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
<div>
|
|
64
|
+
<p>Business clients</p>
|
|
65
|
+
<div className="flex flex-col gap-6" data-theme="bc">
|
|
66
|
+
<TextBlock
|
|
67
|
+
context={context}
|
|
68
|
+
title="Все карты Россельхозбанка работают"
|
|
69
|
+
description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
|
|
70
|
+
blockVersion="primary"
|
|
71
|
+
iconVersion="small"
|
|
72
|
+
/>
|
|
73
|
+
<TextBlock
|
|
74
|
+
context={context}
|
|
75
|
+
title="Все карты Россельхозбанка работают"
|
|
76
|
+
description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
|
|
77
|
+
blockVersion="secondary"
|
|
78
|
+
iconVersion="small"
|
|
79
|
+
/>
|
|
80
|
+
<TextBlock
|
|
81
|
+
context={context}
|
|
82
|
+
title="Все карты Россельхозбанка работают"
|
|
83
|
+
description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
|
|
84
|
+
blockVersion="secondary-light"
|
|
85
|
+
iconVersion="small"
|
|
86
|
+
/>
|
|
87
|
+
</div>
|
|
88
|
+
</div>
|
|
89
|
+
<div>
|
|
90
|
+
<p>Ecosystem own</p>
|
|
91
|
+
<div className="flex flex-col gap-6" data-theme="eo">
|
|
92
|
+
<TextBlock
|
|
93
|
+
context={context}
|
|
94
|
+
title="Все карты Россельхозбанка работают"
|
|
95
|
+
description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
|
|
96
|
+
blockVersion="primary"
|
|
97
|
+
iconVersion="small"
|
|
98
|
+
/>
|
|
99
|
+
<TextBlock
|
|
100
|
+
context={context}
|
|
101
|
+
title="Все карты Россельхозбанка работают"
|
|
102
|
+
description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
|
|
103
|
+
blockVersion="secondary"
|
|
104
|
+
iconVersion="small"
|
|
105
|
+
/>
|
|
106
|
+
<TextBlock
|
|
107
|
+
context={context}
|
|
108
|
+
title="Все карты Россельхозбанка работают"
|
|
109
|
+
description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
|
|
110
|
+
blockVersion="secondary-light"
|
|
111
|
+
iconVersion="small"
|
|
112
|
+
/>
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
);
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { JSX } from '@redneckz/uni-jsx';
|
|
2
|
+
import type { UniBlockProps, Picture } from './types';
|
|
3
|
+
import { Img } from './Img';
|
|
4
|
+
|
|
5
|
+
type TextBlockVersion = 'primary' | 'secondary' | 'secondary-light';
|
|
6
|
+
type TextBlockIconVersion = 'none' | 'small' | 'big';
|
|
7
|
+
|
|
8
|
+
export interface TextBlockContent {
|
|
9
|
+
title?: string;
|
|
10
|
+
description?: string;
|
|
11
|
+
blockVersion?: TextBlockVersion;
|
|
12
|
+
iconVersion?: TextBlockIconVersion;
|
|
13
|
+
image?: Picture;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export interface TextBlockProps extends TextBlockContent, UniBlockProps {}
|
|
17
|
+
|
|
18
|
+
const textBlockStyleMaps: Record<
|
|
19
|
+
TextBlockVersion,
|
|
20
|
+
{ background: string; icon: string; title: string; description: string }
|
|
21
|
+
> = {
|
|
22
|
+
primary: {
|
|
23
|
+
background: 'bg-white',
|
|
24
|
+
icon: 'bg-primary-main text-white',
|
|
25
|
+
title: 'text-base',
|
|
26
|
+
description: 'text-secondary-text',
|
|
27
|
+
},
|
|
28
|
+
secondary: {
|
|
29
|
+
background: 'bg-primary-main',
|
|
30
|
+
icon: 'bg-white text-primary-main',
|
|
31
|
+
title: 'text-white',
|
|
32
|
+
description: 'text-white',
|
|
33
|
+
},
|
|
34
|
+
'secondary-light': {
|
|
35
|
+
background: 'bg-primary-main/10',
|
|
36
|
+
icon: 'bg-primary-main text-white',
|
|
37
|
+
title: 'text-base',
|
|
38
|
+
description: 'text-secondary-text',
|
|
39
|
+
},
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
export const TextBlock = JSX<TextBlockProps>(
|
|
43
|
+
({ title, description, blockVersion = 'primary', iconVersion, image, className }) => {
|
|
44
|
+
const textBlockStyleMap = textBlockStyleMaps[blockVersion];
|
|
45
|
+
return (
|
|
46
|
+
<section
|
|
47
|
+
className={`font-sans px-9 py-4 flex ${textBlockStyleMap.background} ${className || ''}`}
|
|
48
|
+
>
|
|
49
|
+
{iconVersion && iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null}
|
|
50
|
+
{iconVersion && iconVersion === 'big' ? renderImage(image) : null}
|
|
51
|
+
<div className="py-0.5">
|
|
52
|
+
{title && <div className={`font-medium mb-1 ${textBlockStyleMap.title}`}>{title}</div>}
|
|
53
|
+
{description && (
|
|
54
|
+
<div className={`text-sm ${textBlockStyleMap.description}`}>{description}</div>
|
|
55
|
+
)}
|
|
56
|
+
</div>
|
|
57
|
+
</section>
|
|
58
|
+
);
|
|
59
|
+
},
|
|
60
|
+
);
|
|
61
|
+
|
|
62
|
+
function renderIcon(className: string) {
|
|
63
|
+
return (
|
|
64
|
+
<div className={`pt-1.5 pr-4`}>
|
|
65
|
+
<div className={`rounded-full h-4 w-4 text-center text-xs ${className}`}>i</div>
|
|
66
|
+
</div>
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
function renderImage(image?: Picture) {
|
|
71
|
+
return image?.src ? <Img className="pt-0.5 pr-3" image={image} /> : null;
|
|
72
|
+
}
|
package/src/Tile.tsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { JSX } from '@redneckz/uni-jsx';
|
|
2
|
-
import type { BlockVersion,
|
|
2
|
+
import type { BlockVersion, UniBlockProps } from './types';
|
|
3
3
|
import { BaseTile } from './BaseTile';
|
|
4
4
|
import type { BaseTileContent } from './BaseTile';
|
|
5
5
|
import { getColSpan } from './utils/getColSpan';
|
package/src/common.css
CHANGED
|
@@ -2,27 +2,27 @@
|
|
|
2
2
|
|
|
3
3
|
/* Private clients | Green */
|
|
4
4
|
[data-theme='pc'] {
|
|
5
|
-
--color-primary-main:
|
|
6
|
-
--color-primary-hover:
|
|
7
|
-
--color-primary-active:
|
|
8
|
-
--color-secondary-hover:
|
|
9
|
-
--color-secondary-active:
|
|
5
|
+
--color-primary-main: 66, 171, 68;
|
|
6
|
+
--color-primary-hover: 36, 131, 65;
|
|
7
|
+
--color-primary-active: 36, 95, 52;
|
|
8
|
+
--color-secondary-hover: 216, 242, 217;
|
|
9
|
+
--color-secondary-active: 197, 226, 198;
|
|
10
10
|
}
|
|
11
11
|
/* Business clients | Light-Green */
|
|
12
12
|
[data-theme='bc'] {
|
|
13
|
-
--color-primary-main:
|
|
14
|
-
--color-primary-hover:
|
|
15
|
-
--color-primary-active:
|
|
16
|
-
--color-secondary-hover:
|
|
17
|
-
--color-secondary-active:
|
|
13
|
+
--color-primary-main: 131, 184, 62;
|
|
14
|
+
--color-primary-hover: 92, 146, 29;
|
|
15
|
+
--color-primary-active: 60, 94, 16;
|
|
16
|
+
--color-secondary-hover: 232, 244, 217;
|
|
17
|
+
--color-secondary-active: 216, 227, 202;
|
|
18
18
|
}
|
|
19
19
|
/* Ecosystem own | Yellow */
|
|
20
20
|
[data-theme='eo'] {
|
|
21
|
-
--color-primary-main:
|
|
22
|
-
--color-primary-hover:
|
|
23
|
-
--color-primary-active:
|
|
24
|
-
--color-secondary-hover:
|
|
25
|
-
--color-secondary-active:
|
|
21
|
+
--color-primary-main: 221, 182, 61;
|
|
22
|
+
--color-primary-hover: 187, 151, 39;
|
|
23
|
+
--color-primary-active: 126, 99, 12;
|
|
24
|
+
--color-secondary-hover: 241, 236, 221;
|
|
25
|
+
--color-secondary-active: 229, 222, 199;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
@tailwind components;
|
package/src/setup-fixture.ts
CHANGED
|
@@ -32,11 +32,15 @@ export const context: ContentPageContext = {
|
|
|
32
32
|
return { data };
|
|
33
33
|
},
|
|
34
34
|
useGeolocation: (defaultLocation) => {
|
|
35
|
-
const [city, setCity] = useState(
|
|
35
|
+
const [city, setCity] = useState(
|
|
36
|
+
globalThis.localStorage.getItem('location') || defaultLocation,
|
|
37
|
+
);
|
|
36
38
|
|
|
37
39
|
const getCity = () => {
|
|
38
40
|
DaData.getFetcherAddress().then((_) => {
|
|
39
|
-
|
|
41
|
+
const location = _ || defaultLocation;
|
|
42
|
+
globalThis.localStorage.setItem('location', location);
|
|
43
|
+
setCity(location);
|
|
40
44
|
});
|
|
41
45
|
};
|
|
42
46
|
|
package/src/types.ts
CHANGED
|
@@ -16,8 +16,6 @@ export type ColorPalette = 'pc' | 'bc' | 'eo';
|
|
|
16
16
|
|
|
17
17
|
export type BlockVersion = 'primary' | 'secondary';
|
|
18
18
|
export type ButtonVersion = 'primary' | 'secondary';
|
|
19
|
-
export type TitleSize = 'S' | 'M' | 'L' | 'XL';
|
|
20
|
-
|
|
21
19
|
export interface BlockDef {
|
|
22
20
|
type: string;
|
|
23
21
|
style?: string[];
|