oddsgate-ds 1.0.63 → 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 +1 -1
- 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 +1 -1
- 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/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
|
@@ -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
|
|
@@ -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;
|