@ainias42/react-bootstrap-mobile 1.0.13 → 1.0.15
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/ActionSheet/ActionSheet.d.ts +2 -2
- package/dist/Components/Clickable/Clickable.d.ts +2 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/Components/ActionSheet/ActionSheet.tsx +2 -2
- package/src/Components/Clickable/Clickable.tsx +2 -2
- package/src/Components/Colors.stories.tsx +102 -0
- package/src/scss/_colors.scss +3 -0
package/package.json
CHANGED
|
@@ -12,9 +12,9 @@ import { withMemo } from '../../helper/withMemo';
|
|
|
12
12
|
import baseStyles from '../../scss/baseClasses.module.scss';
|
|
13
13
|
import classNames from 'classnames';
|
|
14
14
|
import styles from './actionSheet.module.scss';
|
|
15
|
-
import type { ForwardedRef } from 'react';
|
|
16
15
|
import type { IconSource } from '../Icon/BaseIcon';
|
|
17
16
|
import type { RbmComponentProps } from '../RbmComponentProps';
|
|
17
|
+
import type { Ref } from 'react';
|
|
18
18
|
|
|
19
19
|
export type ActionSheetAction<ActionData> = {
|
|
20
20
|
name: string;
|
|
@@ -34,7 +34,7 @@ export type ActionSheetProps = RbmComponentProps<{
|
|
|
34
34
|
actions: ActionSheetAction<any>[];
|
|
35
35
|
cancelText?: string;
|
|
36
36
|
onClose?: () => void;
|
|
37
|
-
ref?:
|
|
37
|
+
ref?: Ref<ActionSheetHandle>;
|
|
38
38
|
}>;
|
|
39
39
|
|
|
40
40
|
export const ActionSheet = withMemo(function ActionSheet({
|
|
@@ -5,7 +5,7 @@ import { useListener } from '../Hooks/useListener';
|
|
|
5
5
|
import { withMemo } from '../../helper/withMemo';
|
|
6
6
|
import classNames from 'classnames';
|
|
7
7
|
import styles from './clickable.module.scss';
|
|
8
|
-
import type { ForwardedRef, MouseEvent, PointerEvent, MouseEvent as ReactMouseEvent } from 'react';
|
|
8
|
+
import type { ForwardedRef, MouseEvent, PointerEvent, MouseEvent as ReactMouseEvent , Ref} from 'react';
|
|
9
9
|
import type { OptionalListener } from '../Hooks/useListener';
|
|
10
10
|
import type { RbmComponentProps } from '../RbmComponentProps';
|
|
11
11
|
|
|
@@ -42,7 +42,7 @@ export type ClickableProps<
|
|
|
42
42
|
tabIndex?: number;
|
|
43
43
|
draggable?: boolean;
|
|
44
44
|
title?: string;
|
|
45
|
-
ref?:
|
|
45
|
+
ref?: Ref<HrefType extends string ? HTMLAnchorElement : HTMLSpanElement>;
|
|
46
46
|
hiddenLink?: boolean;
|
|
47
47
|
} & OnClickListener<OnClickData> &
|
|
48
48
|
OnPointerDownListener<OnMouseDownData> &
|
|
@@ -36,6 +36,11 @@ export const Default: Story = {
|
|
|
36
36
|
...baseColors,
|
|
37
37
|
};
|
|
38
38
|
|
|
39
|
+
const longtext =
|
|
40
|
+
`Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet`.split(
|
|
41
|
+
' ',
|
|
42
|
+
);
|
|
43
|
+
|
|
39
44
|
return (
|
|
40
45
|
<div>
|
|
41
46
|
{ObjectHelper.entries(textColors).map(([category, colors]) => (
|
|
@@ -70,6 +75,103 @@ export const Default: Story = {
|
|
|
70
75
|
</Grid>
|
|
71
76
|
</BaseBlock>
|
|
72
77
|
))}
|
|
78
|
+
{ObjectHelper.entries(textColors).map(([category, colors]) => (
|
|
79
|
+
<BaseBlock>
|
|
80
|
+
<Text emphasized={true}>Long Text - {category}</Text>
|
|
81
|
+
<Grid>
|
|
82
|
+
{colors.map((color) => (
|
|
83
|
+
<>
|
|
84
|
+
<GridItem
|
|
85
|
+
size={4}
|
|
86
|
+
style={{ backgroundColor: 'var(--foreground-primary)', padding: '0.4rem' }}
|
|
87
|
+
>
|
|
88
|
+
<Text style={{ color: `var(--${color})` }}>
|
|
89
|
+
[{color} | foreground-primary] Lorem ipsum dolor sit amet, consetetur
|
|
90
|
+
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
|
|
91
|
+
magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
|
|
92
|
+
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
|
|
93
|
+
Lorem ipsum dolor sit amet.
|
|
94
|
+
</Text>
|
|
95
|
+
</GridItem>
|
|
96
|
+
<GridItem
|
|
97
|
+
size={4}
|
|
98
|
+
style={{ backgroundColor: 'var(--foreground-secondary)', padding: '0.4rem' }}
|
|
99
|
+
>
|
|
100
|
+
<Text style={{ color: `var(--${color})` }}>
|
|
101
|
+
[{color} | foreground-secondary] Lorem ipsum dolor sit amet, consetetur
|
|
102
|
+
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
|
|
103
|
+
magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
|
|
104
|
+
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
|
|
105
|
+
Lorem ipsum dolor sit amet.
|
|
106
|
+
</Text>
|
|
107
|
+
</GridItem>
|
|
108
|
+
<GridItem
|
|
109
|
+
size={4}
|
|
110
|
+
style={{ backgroundColor: 'var(--foreground-tertiary)', padding: '0.4rem' }}
|
|
111
|
+
>
|
|
112
|
+
<Text style={{ color: `var(--${color})` }}>
|
|
113
|
+
[{color} | foreground-tertiary] Lorem ipsum dolor sit amet, consetetur
|
|
114
|
+
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
|
|
115
|
+
magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
|
|
116
|
+
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
|
|
117
|
+
Lorem ipsum dolor sit amet.
|
|
118
|
+
</Text>
|
|
119
|
+
</GridItem>
|
|
120
|
+
</>
|
|
121
|
+
))}
|
|
122
|
+
</Grid>
|
|
123
|
+
</BaseBlock>
|
|
124
|
+
))}
|
|
125
|
+
{ObjectHelper.entries(textColors).map(([category, colors]) => (
|
|
126
|
+
<BaseBlock>
|
|
127
|
+
<Text emphasized={true}>Long Text Single Words - {category}</Text>
|
|
128
|
+
<Grid>
|
|
129
|
+
{colors.map((color) => (
|
|
130
|
+
<>
|
|
131
|
+
<GridItem
|
|
132
|
+
size={4}
|
|
133
|
+
style={{ backgroundColor: 'var(--foreground-primary)', padding: '0.4rem' }}
|
|
134
|
+
>
|
|
135
|
+
<Text style={{ color: `var(--text-primary)` }}>
|
|
136
|
+
[{color} | foreground-primary]
|
|
137
|
+
</Text>
|
|
138
|
+
{longtext.map((word, i) => (
|
|
139
|
+
<Text style={{ color: `var(--${i % 6 === 0 ? color : 'text-primary'})` }}>
|
|
140
|
+
{word}{' '}
|
|
141
|
+
</Text>
|
|
142
|
+
))}
|
|
143
|
+
</GridItem>
|
|
144
|
+
<GridItem
|
|
145
|
+
size={4}
|
|
146
|
+
style={{ backgroundColor: 'var(--foreground-secondary)', padding: '0.4rem' }}
|
|
147
|
+
>
|
|
148
|
+
<Text style={{ color: `var(--text-primary)` }}>
|
|
149
|
+
[{color} | foreground-secondary]
|
|
150
|
+
</Text>
|
|
151
|
+
{longtext.map((word, i) => (
|
|
152
|
+
<Text style={{ color: `var(--${i % 6 === 5 ? color : 'text-primary'})` }}>
|
|
153
|
+
{word}{' '}
|
|
154
|
+
</Text>
|
|
155
|
+
))}
|
|
156
|
+
</GridItem>
|
|
157
|
+
<GridItem
|
|
158
|
+
size={4}
|
|
159
|
+
style={{ backgroundColor: 'var(--foreground-tertiary)', padding: '0.4rem' }}
|
|
160
|
+
>
|
|
161
|
+
<Text style={{ color: `var(--text-primary)` }}>
|
|
162
|
+
[{color} | foreground-tertiary]
|
|
163
|
+
</Text>
|
|
164
|
+
{longtext.map((word, i) => (
|
|
165
|
+
<Text style={{ color: `var(--${i % 6 === 0 ? color : 'text-primary'})` }}>
|
|
166
|
+
{word}{' '}
|
|
167
|
+
</Text>
|
|
168
|
+
))}
|
|
169
|
+
</GridItem>
|
|
170
|
+
</>
|
|
171
|
+
))}
|
|
172
|
+
</Grid>
|
|
173
|
+
</BaseBlock>
|
|
174
|
+
))}
|
|
73
175
|
</div>
|
|
74
176
|
);
|
|
75
177
|
},
|
package/src/scss/_colors.scss
CHANGED
|
@@ -72,6 +72,9 @@
|
|
|
72
72
|
|
|
73
73
|
--box-shadow-color: rgb(255 255 255 / 12%);
|
|
74
74
|
--flavor-pale-accent: #172554; // blue 900
|
|
75
|
+
--flavor-accent: #3b82f6; // blue 500
|
|
76
|
+
--flavor-pale-destructive: #f87171;
|
|
77
|
+
--flavor-pale-constructive: #22c55e;
|
|
75
78
|
}
|
|
76
79
|
|
|
77
80
|
.#{$material}, &.#{$material} {
|