oddsgate-ds 1.0.62 → 1.0.64
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/build-storybook.log +30 -0
- package/chromatic.config.json +6 -0
- package/dist/cjs/index.js +5 -5
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/organisms/Slider/Slider.component.d.ts +1 -1
- package/dist/cjs/types/components/organisms/Slider/Slider.interface.d.ts +2 -0
- package/dist/cjs/types/components/organisms/Slider/Slider.stories.d.ts +1 -0
- package/dist/esm/index.js +5 -5
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/organisms/Slider/Slider.component.d.ts +1 -1
- package/dist/esm/types/components/organisms/Slider/Slider.interface.d.ts +2 -0
- package/dist/esm/types/components/organisms/Slider/Slider.stories.d.ts +1 -0
- package/dist/public/assets/empty-state.svg +27 -18
- package/dist/public/assets/placeholder.png +0 -0
- package/dist/types.d.ts +3 -1
- package/package.json +7 -3
- package/public/assets/empty-state.svg +27 -18
- package/public/assets/placeholder.png +0 -0
- package/src/components/atoms/Button/Button.theme.ts +0 -26
- package/src/components/molecules/BlogCard/BlogCard.component.tsx +3 -3
- package/src/components/molecules/BlogCard/BlogCard.theme.ts +1 -0
- package/src/components/molecules/NewsCard/NewsCard.component.tsx +5 -2
- package/src/components/organisms/Slider/Slider.component.tsx +2 -0
- package/src/components/organisms/Slider/Slider.interface.ts +2 -0
- package/src/components/organisms/Slider/Slider.stories.tsx +40 -0
- package/src/components/organisms/Slider/Slider.theme.ts +14 -0
- package/src/components/organisms/Tabs/Tabs.theme.ts +4 -2
- package/src/styles/utilities.ts +8 -4
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ISlider } from './Slider.interface';
|
|
3
|
-
declare const Slider: ({ arrows, dots, slidesToShow, slidesToScroll, infinite, autoplay, spacing, mediaQueries, className, style, children, onSlide, ...props }: ISlider) => React.JSX.Element;
|
|
3
|
+
declare const Slider: ({ arrows, dots, slidesToShow, slidesToScroll, infinite, autoplay, spacing, mediaQueries, mobileOnly, className, style, children, onSlide, ...props }: ISlider) => React.JSX.Element;
|
|
4
4
|
export default Slider;
|
|
@@ -3,3 +3,4 @@ import { ISlider } from './Slider.interface';
|
|
|
3
3
|
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("@storybook/types").Args>;
|
|
4
4
|
export default _default;
|
|
5
5
|
export declare const Simple: StoryObj<ISlider>;
|
|
6
|
+
export declare const MobileOnly: StoryObj<ISlider>;
|
|
@@ -1,19 +1,28 @@
|
|
|
1
|
-
<svg width="
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
<path
|
|
5
|
-
<
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
<
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
<path
|
|
13
|
-
<
|
|
14
|
-
<
|
|
15
|
-
|
|
16
|
-
<
|
|
17
|
-
<
|
|
18
|
-
|
|
1
|
+
<svg width="326" height="312" viewBox="0 0 326 312" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<ellipse cx="85.5" cy="156" rx="85" ry="84" fill="#FC3151"/>
|
|
3
|
+
<ellipse cx="240.5" cy="228" rx="85" ry="84" fill="#FC3151"/>
|
|
4
|
+
<g clip-path="url(#clip0_3960_7751)">
|
|
5
|
+
<mask id="mask0_3960_7751" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="77" y="30" width="146" height="147">
|
|
6
|
+
<ellipse cx="74.1657" cy="71.0964" rx="74.1657" ry="71.0964" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 252.971 105.64)" fill="#D9D9D9"/>
|
|
7
|
+
</mask>
|
|
8
|
+
<g mask="url(#mask0_3960_7751)">
|
|
9
|
+
<rect width="150.458" height="71.3627" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 254.1 106.015)" fill="#FC3151"/>
|
|
10
|
+
</g>
|
|
11
|
+
</g>
|
|
12
|
+
<g clip-path="url(#clip1_3960_7751)">
|
|
13
|
+
<mask id="mask1_3960_7751" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="7" y="168" width="149" height="143">
|
|
14
|
+
<ellipse cx="74.1657" cy="71.0964" rx="74.1657" ry="71.0964" transform="matrix(1 0 0 -1 7.5 310.83)" fill="#D9D9D9"/>
|
|
15
|
+
</mask>
|
|
16
|
+
<g mask="url(#mask1_3960_7751)">
|
|
17
|
+
<rect width="150.458" height="71.3627" transform="matrix(1 0 0 -1 6.4375 311.362)" fill="#FC3151"/>
|
|
18
|
+
</g>
|
|
19
|
+
</g>
|
|
20
|
+
<defs>
|
|
21
|
+
<clipPath id="clip0_3960_7751">
|
|
22
|
+
<rect width="148.331" height="71.8952" fill="white" transform="translate(202.887 155.724) rotate(-135)"/>
|
|
23
|
+
</clipPath>
|
|
24
|
+
<clipPath id="clip1_3960_7751">
|
|
25
|
+
<rect width="148.331" height="71.8952" fill="white" transform="translate(7.5 240)"/>
|
|
26
|
+
</clipPath>
|
|
27
|
+
</defs>
|
|
19
28
|
</svg>
|
|
Binary file
|
package/dist/types.d.ts
CHANGED
|
@@ -557,13 +557,15 @@ interface ISlider {
|
|
|
557
557
|
autoplay?: boolean;
|
|
558
558
|
spacing?: string;
|
|
559
559
|
mediaQueries?: object;
|
|
560
|
+
$mobileOnly?: boolean;
|
|
561
|
+
mobileOnly?: boolean;
|
|
560
562
|
onSlide?: () => void;
|
|
561
563
|
className?: string;
|
|
562
564
|
style?: CSSProperties;
|
|
563
565
|
children: React.ReactNode;
|
|
564
566
|
}
|
|
565
567
|
|
|
566
|
-
declare const Slider: ({ arrows, dots, slidesToShow, slidesToScroll, infinite, autoplay, spacing, mediaQueries, className, style, children, onSlide, ...props }: ISlider) => React__default.JSX.Element;
|
|
568
|
+
declare const Slider: ({ arrows, dots, slidesToShow, slidesToScroll, infinite, autoplay, spacing, mediaQueries, mobileOnly, className, style, children, onSlide, ...props }: ISlider) => React__default.JSX.Element;
|
|
567
569
|
|
|
568
570
|
type ICover = {
|
|
569
571
|
id?: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "oddsgate-ds",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.64",
|
|
4
4
|
"description": "Miew theme component library",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -19,13 +19,17 @@
|
|
|
19
19
|
"build-storybook": "storybook build",
|
|
20
20
|
"bump-version": "npm version patch --no-git-tag-version",
|
|
21
21
|
"lint:css": "stylelint './src/**/*.tsx'",
|
|
22
|
-
"clean": "rimraf dist"
|
|
22
|
+
"clean": "rimraf dist",
|
|
23
|
+
"chromatic": "npx chromatic --project-token=chpt_b2130961bd49687"
|
|
23
24
|
},
|
|
24
25
|
"repository": {
|
|
25
26
|
"type": "git",
|
|
26
27
|
"url": "git+https://github.com/wearemiew/miewtheme-ds.git"
|
|
27
28
|
},
|
|
28
|
-
"author":
|
|
29
|
+
"author": {
|
|
30
|
+
"name": "Rui Correia",
|
|
31
|
+
"email": "rui.correia@miew.pt"
|
|
32
|
+
},
|
|
29
33
|
"license": "MIT",
|
|
30
34
|
"devDependencies": {
|
|
31
35
|
"@chromatic-com/storybook": "^1",
|
|
@@ -1,19 +1,28 @@
|
|
|
1
|
-
<svg width="
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
<path
|
|
5
|
-
<
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
<
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
<path
|
|
13
|
-
<
|
|
14
|
-
<
|
|
15
|
-
|
|
16
|
-
<
|
|
17
|
-
<
|
|
18
|
-
|
|
1
|
+
<svg width="326" height="312" viewBox="0 0 326 312" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<ellipse cx="85.5" cy="156" rx="85" ry="84" fill="#FC3151"/>
|
|
3
|
+
<ellipse cx="240.5" cy="228" rx="85" ry="84" fill="#FC3151"/>
|
|
4
|
+
<g clip-path="url(#clip0_3960_7751)">
|
|
5
|
+
<mask id="mask0_3960_7751" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="77" y="30" width="146" height="147">
|
|
6
|
+
<ellipse cx="74.1657" cy="71.0964" rx="74.1657" ry="71.0964" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 252.971 105.64)" fill="#D9D9D9"/>
|
|
7
|
+
</mask>
|
|
8
|
+
<g mask="url(#mask0_3960_7751)">
|
|
9
|
+
<rect width="150.458" height="71.3627" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 254.1 106.015)" fill="#FC3151"/>
|
|
10
|
+
</g>
|
|
11
|
+
</g>
|
|
12
|
+
<g clip-path="url(#clip1_3960_7751)">
|
|
13
|
+
<mask id="mask1_3960_7751" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="7" y="168" width="149" height="143">
|
|
14
|
+
<ellipse cx="74.1657" cy="71.0964" rx="74.1657" ry="71.0964" transform="matrix(1 0 0 -1 7.5 310.83)" fill="#D9D9D9"/>
|
|
15
|
+
</mask>
|
|
16
|
+
<g mask="url(#mask1_3960_7751)">
|
|
17
|
+
<rect width="150.458" height="71.3627" transform="matrix(1 0 0 -1 6.4375 311.362)" fill="#FC3151"/>
|
|
18
|
+
</g>
|
|
19
|
+
</g>
|
|
20
|
+
<defs>
|
|
21
|
+
<clipPath id="clip0_3960_7751">
|
|
22
|
+
<rect width="148.331" height="71.8952" fill="white" transform="translate(202.887 155.724) rotate(-135)"/>
|
|
23
|
+
</clipPath>
|
|
24
|
+
<clipPath id="clip1_3960_7751">
|
|
25
|
+
<rect width="148.331" height="71.8952" fill="white" transform="translate(7.5 240)"/>
|
|
26
|
+
</clipPath>
|
|
27
|
+
</defs>
|
|
19
28
|
</svg>
|
|
Binary file
|
|
@@ -71,32 +71,6 @@ export const StyledButton = styled.a<IButtonSC>`
|
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
73
|
`;
|
|
74
|
-
case "secondary":
|
|
75
|
-
return css`
|
|
76
|
-
${fontSize('h5')};
|
|
77
|
-
font-weight: 700;
|
|
78
|
-
text-transform:uppercase;
|
|
79
|
-
padding: 0.8rem 1.6rem;
|
|
80
|
-
border-radius: 50px;
|
|
81
|
-
|
|
82
|
-
${props.$mode === "light" ? `
|
|
83
|
-
color: ${colors.primary50};
|
|
84
|
-
background-color: ${colors.secondary50};
|
|
85
|
-
|
|
86
|
-
&:hover{
|
|
87
|
-
color: ${colors.secondary50};
|
|
88
|
-
background-color: ${colors.primary50};
|
|
89
|
-
}
|
|
90
|
-
` : `
|
|
91
|
-
color: ${colors.secondary50};
|
|
92
|
-
background-color: ${colors.primary50};
|
|
93
|
-
|
|
94
|
-
&:hover{
|
|
95
|
-
color: ${colors.primary50};
|
|
96
|
-
background-color: ${colors.secondary50};
|
|
97
|
-
}
|
|
98
|
-
`}
|
|
99
|
-
`;
|
|
100
74
|
case "link":
|
|
101
75
|
return css`
|
|
102
76
|
${fontSize('h5')};
|
|
@@ -28,14 +28,14 @@ const BlogCard = ({
|
|
|
28
28
|
</>
|
|
29
29
|
}
|
|
30
30
|
>
|
|
31
|
-
<Heading tag={'h3'} size={'h4'} className={'fw-bold textEllipsis'}>
|
|
31
|
+
<Heading tag={'h3'} size={'h4'} className={'fw-bold textEllipsis mt-4'}>
|
|
32
32
|
{title}
|
|
33
33
|
</Heading>
|
|
34
|
-
<Heading tag={'span'} size={'captions'} className={'textEllipsis mt-
|
|
34
|
+
<Heading tag={'span'} size={'captions'} className={'textEllipsis mt-3'}>
|
|
35
35
|
{description}
|
|
36
36
|
</Heading>
|
|
37
37
|
{date && (
|
|
38
|
-
<RichText tag={'p'} className="fw-bold mt-
|
|
38
|
+
<RichText tag={'p'} className="fw-bold mt-4">
|
|
39
39
|
{date}
|
|
40
40
|
</RichText>
|
|
41
41
|
)}
|
|
@@ -24,11 +24,14 @@ const NewsCard = ({
|
|
|
24
24
|
}
|
|
25
25
|
>
|
|
26
26
|
{category && <Chip variant='light' className='mb-5'>{category}</Chip>}
|
|
27
|
-
<Heading tag={'h3'} size={variant === "featured" ? "h3" : 'h4'} className={'fw-bold textEllipsis'}>
|
|
27
|
+
<Heading tag={'h3'} size={variant === "featured" ? "h3" : 'h4'} className={'fw-bold textEllipsis mt-4'}>
|
|
28
28
|
{title}
|
|
29
29
|
</Heading>
|
|
30
|
+
<Heading tag={'span'} size={'captions'} className={'textEllipsis mt-3'}>
|
|
31
|
+
{description}
|
|
32
|
+
</Heading>
|
|
30
33
|
{date && (
|
|
31
|
-
<Heading tag={'span'} size={variant === "featured" ? "h5" : 'texts'} className={'fw-bold mt-
|
|
34
|
+
<Heading tag={'span'} size={variant === "featured" ? "h5" : 'texts'} className={'fw-bold mt-4'}>
|
|
32
35
|
{date}
|
|
33
36
|
</Heading>
|
|
34
37
|
)}
|
|
@@ -15,6 +15,7 @@ const Slider = ({
|
|
|
15
15
|
autoplay,
|
|
16
16
|
spacing,
|
|
17
17
|
mediaQueries,
|
|
18
|
+
mobileOnly,
|
|
18
19
|
className,
|
|
19
20
|
style,
|
|
20
21
|
children,
|
|
@@ -106,6 +107,7 @@ const Slider = ({
|
|
|
106
107
|
return (
|
|
107
108
|
<StyledSlider
|
|
108
109
|
$responsiveCSS={responsiveCSS}
|
|
110
|
+
$mobileOnly={mobileOnly}
|
|
109
111
|
className={className}
|
|
110
112
|
style={style}
|
|
111
113
|
>
|
|
@@ -71,3 +71,43 @@ export const Simple: StoryObj<ISlider> = {
|
|
|
71
71
|
dots: true
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
export const MobileOnly: StoryObj<ISlider> = {
|
|
77
|
+
render: args => (
|
|
78
|
+
<div
|
|
79
|
+
style={{
|
|
80
|
+
maxWidth: '750px',
|
|
81
|
+
margin: 'auto'
|
|
82
|
+
}}
|
|
83
|
+
>
|
|
84
|
+
<Slider
|
|
85
|
+
slidesToShow={2}
|
|
86
|
+
slidesToScroll={1}
|
|
87
|
+
infinite={false}
|
|
88
|
+
spacing={'1rem'}
|
|
89
|
+
mediaQueries={{
|
|
90
|
+
900: {
|
|
91
|
+
slidesToShow: 2
|
|
92
|
+
},
|
|
93
|
+
500: {
|
|
94
|
+
slidesToShow: 1
|
|
95
|
+
}
|
|
96
|
+
}}
|
|
97
|
+
{...args}
|
|
98
|
+
>
|
|
99
|
+
<div>{image}</div>
|
|
100
|
+
<div>{image}</div>
|
|
101
|
+
<div>{image}</div>
|
|
102
|
+
<div>{image}</div>
|
|
103
|
+
<div>{image}</div>
|
|
104
|
+
<div>{image}</div>
|
|
105
|
+
</Slider>
|
|
106
|
+
</div>
|
|
107
|
+
),
|
|
108
|
+
args: {
|
|
109
|
+
...Simple.args,
|
|
110
|
+
mobileOnly: true
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
@@ -120,5 +120,19 @@ export const StyledSlider = styled.div<ISlider>`
|
|
|
120
120
|
${({ $responsiveCSS }) => $responsiveCSS && `
|
|
121
121
|
${$responsiveCSS};
|
|
122
122
|
`}
|
|
123
|
+
|
|
124
|
+
${({ $mobileOnly }) => $mobileOnly && `
|
|
125
|
+
.blaze-track{
|
|
126
|
+
flex-flow: row wrap;
|
|
127
|
+
width: 100% !important;
|
|
128
|
+
max-width: 100% !important;
|
|
129
|
+
transform: none !important;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.blaze-arrows,
|
|
133
|
+
.blaze-controls{
|
|
134
|
+
display:none;
|
|
135
|
+
}
|
|
136
|
+
`}
|
|
123
137
|
}
|
|
124
138
|
`;
|
|
@@ -47,11 +47,13 @@ export const StyledTabsContent = styled.div<ITabsItem>`
|
|
|
47
47
|
border-radius: 48px 0;
|
|
48
48
|
padding: 36px;
|
|
49
49
|
|
|
50
|
-
min-height: 40rem;
|
|
51
|
-
|
|
52
50
|
opacity: 0;
|
|
53
51
|
transform: translateY(40px);
|
|
54
52
|
|
|
53
|
+
@media only screen and (min-width: ${responsiveMedia}) {
|
|
54
|
+
min-height: 40rem;
|
|
55
|
+
}
|
|
56
|
+
|
|
55
57
|
& > span{
|
|
56
58
|
display: flex;
|
|
57
59
|
align-items:center;
|
package/src/styles/utilities.ts
CHANGED
|
@@ -130,7 +130,8 @@ export const utilities: {
|
|
|
130
130
|
between: "space-between",
|
|
131
131
|
around: "space-around",
|
|
132
132
|
evenly: "space-evenly",
|
|
133
|
-
}
|
|
133
|
+
},
|
|
134
|
+
important: true,
|
|
134
135
|
},
|
|
135
136
|
"align-items": {
|
|
136
137
|
responsive: true,
|
|
@@ -141,7 +142,8 @@ export const utilities: {
|
|
|
141
142
|
center: "center",
|
|
142
143
|
baseline: "baseline",
|
|
143
144
|
stretch: "stretch",
|
|
144
|
-
}
|
|
145
|
+
},
|
|
146
|
+
important: true,
|
|
145
147
|
},
|
|
146
148
|
"align-content": {
|
|
147
149
|
responsive: true,
|
|
@@ -153,7 +155,8 @@ export const utilities: {
|
|
|
153
155
|
between: "space-between",
|
|
154
156
|
around: "space-around",
|
|
155
157
|
stretch: "stretch",
|
|
156
|
-
}
|
|
158
|
+
},
|
|
159
|
+
important: true,
|
|
157
160
|
},
|
|
158
161
|
"align-self": {
|
|
159
162
|
responsive: true,
|
|
@@ -165,7 +168,8 @@ export const utilities: {
|
|
|
165
168
|
center: "center",
|
|
166
169
|
baseline: "baseline",
|
|
167
170
|
stretch: "stretch",
|
|
168
|
-
}
|
|
171
|
+
},
|
|
172
|
+
important: true,
|
|
169
173
|
},
|
|
170
174
|
"order": {
|
|
171
175
|
responsive: true,
|