@sendoutcards/quantum-design-ui 1.7.7 → 1.7.8

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.
@@ -0,0 +1,3 @@
1
+ import { FC } from 'react';
2
+ import { SVGProps } from '../types/index';
3
+ export declare const ImageSwap: FC<SVGProps>;
@@ -5,8 +5,8 @@ export declare type IconColors = keyof typeof entities.icons.colors;
5
5
  export declare type orientation = 'up' | 'down' | 'left' | 'right';
6
6
  export declare type SVGProps = {
7
7
  size: LiteralUnion<SizeType> | number;
8
- primaryColor: IconColors;
9
- secondaryColor?: IconColors;
8
+ primaryColor: LiteralUnion<IconColors>;
9
+ secondaryColor?: LiteralUnion<IconColors>;
10
10
  onClick?: () => void;
11
11
  entity: IconsEntity;
12
12
  orientation?: orientation;
@@ -231,40 +231,47 @@ declare const buttons: {
231
231
  borderRadius: string;
232
232
  };
233
233
  };
234
- primary: {
235
- backgroundColor: string;
236
- fontColor: string;
237
- fontFamily: string;
238
- };
239
- secondary: {
240
- backgroundColor: string;
241
- fontColor: string;
242
- fontFamily: string;
243
- };
244
- warning: {
245
- backgroundColor: string;
246
- fontColor: string;
247
- fontFamily: string;
248
- };
249
- success: {
250
- backgroundColor: string;
251
- fontColor: string;
252
- fontFamily: string;
253
- };
254
- danger: {
255
- backgroundColor: string;
256
- fontColor: string;
257
- fontFamily: string;
258
- };
259
- shadow: {
260
- backgroundColor: string;
261
- fontColor: string;
262
- fontFamily: string;
263
- };
264
- accent: {
265
- backgroundColor: string;
266
- fontColor: string;
267
- fontFamily: string;
234
+ types: {
235
+ primary: {
236
+ backgroundColor: string;
237
+ fontColor: string;
238
+ fontFamily: string;
239
+ };
240
+ secondary: {
241
+ backgroundColor: string;
242
+ fontColor: string;
243
+ fontFamily: string;
244
+ };
245
+ warning: {
246
+ backgroundColor: string;
247
+ fontColor: string;
248
+ fontFamily: string;
249
+ };
250
+ success: {
251
+ backgroundColor: string;
252
+ fontColor: string;
253
+ fontFamily: string;
254
+ };
255
+ danger: {
256
+ backgroundColor: string;
257
+ fontColor: string;
258
+ fontFamily: string;
259
+ };
260
+ shadow: {
261
+ backgroundColor: string;
262
+ fontColor: string;
263
+ fontFamily: string;
264
+ };
265
+ accent: {
266
+ backgroundColor: string;
267
+ fontColor: string;
268
+ fontFamily: string;
269
+ };
270
+ smoke: {
271
+ backgroundColor: string;
272
+ fontColor: string;
273
+ fontFamily: string;
274
+ };
268
275
  };
269
276
  };
270
277
  declare const inputs: {
@@ -702,40 +709,47 @@ export declare const entities: {
702
709
  borderRadius: string;
703
710
  };
704
711
  };
705
- primary: {
706
- backgroundColor: string;
707
- fontColor: string;
708
- fontFamily: string;
709
- };
710
- secondary: {
711
- backgroundColor: string;
712
- fontColor: string;
713
- fontFamily: string;
714
- };
715
- warning: {
716
- backgroundColor: string;
717
- fontColor: string;
718
- fontFamily: string;
719
- };
720
- success: {
721
- backgroundColor: string;
722
- fontColor: string;
723
- fontFamily: string;
724
- };
725
- danger: {
726
- backgroundColor: string;
727
- fontColor: string;
728
- fontFamily: string;
729
- };
730
- shadow: {
731
- backgroundColor: string;
732
- fontColor: string;
733
- fontFamily: string;
734
- };
735
- accent: {
736
- backgroundColor: string;
737
- fontColor: string;
738
- fontFamily: string;
712
+ types: {
713
+ primary: {
714
+ backgroundColor: string;
715
+ fontColor: string;
716
+ fontFamily: string;
717
+ };
718
+ secondary: {
719
+ backgroundColor: string;
720
+ fontColor: string;
721
+ fontFamily: string;
722
+ };
723
+ warning: {
724
+ backgroundColor: string;
725
+ fontColor: string;
726
+ fontFamily: string;
727
+ };
728
+ success: {
729
+ backgroundColor: string;
730
+ fontColor: string;
731
+ fontFamily: string;
732
+ };
733
+ danger: {
734
+ backgroundColor: string;
735
+ fontColor: string;
736
+ fontFamily: string;
737
+ };
738
+ shadow: {
739
+ backgroundColor: string;
740
+ fontColor: string;
741
+ fontFamily: string;
742
+ };
743
+ accent: {
744
+ backgroundColor: string;
745
+ fontColor: string;
746
+ fontFamily: string;
747
+ };
748
+ smoke: {
749
+ backgroundColor: string;
750
+ fontColor: string;
751
+ fontFamily: string;
752
+ };
739
753
  };
740
754
  };
741
755
  inputs: {
@@ -37,4 +37,6 @@ export * from "../organisms/radioOptionList/radioOptionList";
37
37
  export * from "../organisms/inviteCard/inviteCard";
38
38
  export * from "../organisms/promotionWidget/promotionWidget";
39
39
  export * from "../organisms/featureAnnouncement/featureAnnouncement";
40
+ export * from "../organisms/settingInput/settingInput";
40
41
  export * from "../organisms/releaseNote/releaseNote";
42
+ export * from "../organisms/imageUploader/imageUploader";
@@ -11,7 +11,7 @@ export declare type HOCBaseProps = {
11
11
  borderStyle?: BorderStyleDirection | BorderStyles;
12
12
  borderColor?: ColorSelection | LiteralUnion<HOCColorKeys>;
13
13
  backgroundColor?: BackgroundColor;
14
- color?: TextColor;
14
+ color?: LiteralUnion<TextColor>;
15
15
  boxShadow?: Shadows;
16
16
  height?: Height;
17
17
  width?: Width;
@@ -2,5 +2,5 @@ import { IconsEntity } from "../../theme/theming/entities";
2
2
  import { SizeType } from "../../types/global";
3
3
  import { IconColors } from "../../exports/atoms";
4
4
  import { LiteralUnion } from '../hoc-types/entityValueTypes';
5
- export declare const getIconColor: (color: IconColors, entity: IconsEntity) => string | undefined;
5
+ export declare const getIconColor: (color: LiteralUnion<IconColors>, entity: IconsEntity) => any;
6
6
  export declare const getIconSize: (size: LiteralUnion<SizeType> | number, entity: IconsEntity) => any;
@@ -180,6 +180,48 @@ export declare const useEntities: () => {
180
180
  x9: string;
181
181
  };
182
182
  buttons: {
183
+ types: {
184
+ primary: {
185
+ backgroundColor: string;
186
+ fontColor: string;
187
+ fontFamily: string;
188
+ };
189
+ secondary: {
190
+ backgroundColor: string;
191
+ fontColor: string;
192
+ fontFamily: string;
193
+ };
194
+ warning: {
195
+ backgroundColor: string;
196
+ fontColor: string;
197
+ fontFamily: string;
198
+ };
199
+ success: {
200
+ backgroundColor: string;
201
+ fontColor: string;
202
+ fontFamily: string;
203
+ };
204
+ danger: {
205
+ backgroundColor: string;
206
+ fontColor: string;
207
+ fontFamily: string;
208
+ };
209
+ shadow: {
210
+ backgroundColor: string;
211
+ fontColor: string;
212
+ fontFamily: string;
213
+ };
214
+ accent: {
215
+ backgroundColor: string;
216
+ fontColor: string;
217
+ fontFamily: string;
218
+ };
219
+ smoke: {
220
+ backgroundColor: string;
221
+ fontColor: string;
222
+ fontFamily: string;
223
+ };
224
+ };
183
225
  boxShadow: (shadow: "dark" | "mediumDark" | "mediumLight" | "light" | "xLight", color?: string | undefined, reverseOffset?: boolean | undefined) => string;
184
226
  borderSize: string;
185
227
  outlinedBackgroundColor: string;
@@ -231,41 +273,6 @@ export declare const useEntities: () => {
231
273
  borderRadius: string;
232
274
  };
233
275
  };
234
- primary: {
235
- backgroundColor: string;
236
- fontColor: string;
237
- fontFamily: string;
238
- };
239
- secondary: {
240
- backgroundColor: string;
241
- fontColor: string;
242
- fontFamily: string;
243
- };
244
- warning: {
245
- backgroundColor: string;
246
- fontColor: string;
247
- fontFamily: string;
248
- };
249
- success: {
250
- backgroundColor: string;
251
- fontColor: string;
252
- fontFamily: string;
253
- };
254
- danger: {
255
- backgroundColor: string;
256
- fontColor: string;
257
- fontFamily: string;
258
- };
259
- shadow: {
260
- backgroundColor: string;
261
- fontColor: string;
262
- fontFamily: string;
263
- };
264
- accent: {
265
- backgroundColor: string;
266
- fontColor: string;
267
- fontFamily: string;
268
- };
269
276
  };
270
277
  inputs: {
271
278
  checkbox: {
@@ -1,9 +1,10 @@
1
1
  import { FC } from 'react';
2
2
  import { TextColor } from "../../atoms/typography/text";
3
- import { SizeType, OnMouseEvent, ThemeMode } from "../../types/global";
3
+ import { SizeType, OnMouseEvent } from "../../types/global";
4
4
  import { entities } from "../../theme/theming/entities";
5
+ import { IconType } from "../../exports/atoms";
5
6
  import { DirectionType } from '../tooltip/tooltip';
6
- export declare type ButtonType = ThemeMode;
7
+ export declare type ButtonType = keyof typeof entities.buttons.types;
7
8
  export declare type ButtonProps = {
8
9
  title?: string;
9
10
  type?: ButtonType;
@@ -18,6 +19,7 @@ export declare type ButtonProps = {
18
19
  disabledCaption?: string;
19
20
  disabledDirection?: DirectionType;
20
21
  id?: string;
22
+ icon?: IconType;
21
23
  };
22
- export declare type ButtonStyle = typeof entities.buttons.primary;
24
+ export declare type ButtonStyle = typeof entities.buttons.types.primary;
23
25
  export declare const Button: FC<ButtonProps>;
@@ -3,6 +3,6 @@ export declare type StackedCardHeadProps = {
3
3
  cardImage?: string;
4
4
  cardOrientation?: 'vertical' | 'horizontal';
5
5
  quantity: number;
6
- quantityDescription?: string;
6
+ quantityDescription: string;
7
7
  };
8
8
  export declare const StackedCardHead: FC<StackedCardHeadProps>;
@@ -0,0 +1,16 @@
1
+ /// <reference types="react" />
2
+ import { FileRejection } from 'react-dropzone';
3
+ declare type AcceptedFileType = 'jpg' | 'png' | 'gif' | 'jpeg';
4
+ export declare type ImageUploaderProps = {
5
+ onUpload: (files: {
6
+ accepted: File[];
7
+ rejected: FileRejection[];
8
+ }) => void;
9
+ acceptedFiles: AcceptedFileType[];
10
+ hasMultiupload?: boolean;
11
+ maxFileSize?: number;
12
+ maxAcceptedFiles?: number;
13
+ uploadTitle?: string;
14
+ };
15
+ export declare const ImageUploader: (props: ImageUploaderProps) => JSX.Element;
16
+ export {};
@@ -0,0 +1,10 @@
1
+ import { FC } from 'react';
2
+ export declare type SettingInputProps = {
3
+ value: string | null;
4
+ settingsType: 'color' | 'image';
5
+ inactiveTitle: string;
6
+ onRemove: () => void;
7
+ onClick?: () => void;
8
+ onMouseEvent?: () => void;
9
+ };
10
+ export declare const SettingInput: FC<SettingInputProps>;
@@ -3,6 +3,6 @@ import { QuantitySliderProps } from "../../../../exports/molecules";
3
3
  export declare type CardQuantitySliderProps = {
4
4
  cardImage?: string;
5
5
  cardOrientation?: 'vertical' | 'horizontal';
6
- quantityDescription?: string;
6
+ quantityDescription: string;
7
7
  } & QuantitySliderProps;
8
8
  export declare const CardQuantitySlider: FC<CardQuantitySliderProps>;
@@ -9,4 +9,5 @@ export declare const DangerButton: any;
9
9
  export declare const ShadowButton: any;
10
10
  export declare const AccentButton: any;
11
11
  export declare const OutlinedButton: any;
12
+ export declare const SmokeButton: any;
12
13
  export declare const DisabledButton: any;
@@ -0,0 +1,5 @@
1
+ import { ImageUploaderProps } from "../../exports/organisms";
2
+ import { Meta, Story } from '@storybook/react/types-6-0';
3
+ declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
4
+ export default _default;
5
+ export declare const StoryName: Story<ImageUploaderProps>;
@@ -0,0 +1,7 @@
1
+ import { SettingInputProps } from "../../exports/organisms";
2
+ import { Meta, Story } from '@storybook/react/types-6-0';
3
+ declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
4
+ export default _default;
5
+ export declare const ColorSettings: Story<SettingInputProps>;
6
+ export declare const ImageSetting: any;
7
+ export declare const ColorSetting: any;
@@ -180,6 +180,48 @@ declare const hocs: {
180
180
  };
181
181
  };
182
182
  declare const buttons: {
183
+ types: {
184
+ primary: {
185
+ backgroundColor: string;
186
+ fontColor: string;
187
+ fontFamily: string;
188
+ };
189
+ secondary: {
190
+ backgroundColor: string;
191
+ fontColor: string;
192
+ fontFamily: string;
193
+ };
194
+ warning: {
195
+ backgroundColor: string;
196
+ fontColor: string;
197
+ fontFamily: string;
198
+ };
199
+ success: {
200
+ backgroundColor: string;
201
+ fontColor: string;
202
+ fontFamily: string;
203
+ };
204
+ danger: {
205
+ backgroundColor: string;
206
+ fontColor: string;
207
+ fontFamily: string;
208
+ };
209
+ shadow: {
210
+ backgroundColor: string;
211
+ fontColor: string;
212
+ fontFamily: string;
213
+ };
214
+ accent: {
215
+ backgroundColor: string;
216
+ fontColor: string;
217
+ fontFamily: string;
218
+ };
219
+ smoke: {
220
+ backgroundColor: string;
221
+ fontColor: string;
222
+ fontFamily: string;
223
+ };
224
+ };
183
225
  boxShadow: (shadow: "dark" | "mediumDark" | "mediumLight" | "light" | "xLight", color?: string | undefined, reverseOffset?: boolean | undefined) => string;
184
226
  borderSize: string;
185
227
  outlinedBackgroundColor: string;
@@ -231,41 +273,6 @@ declare const buttons: {
231
273
  borderRadius: string;
232
274
  };
233
275
  };
234
- primary: {
235
- backgroundColor: string;
236
- fontColor: string;
237
- fontFamily: string;
238
- };
239
- secondary: {
240
- backgroundColor: string;
241
- fontColor: string;
242
- fontFamily: string;
243
- };
244
- warning: {
245
- backgroundColor: string;
246
- fontColor: string;
247
- fontFamily: string;
248
- };
249
- success: {
250
- backgroundColor: string;
251
- fontColor: string;
252
- fontFamily: string;
253
- };
254
- danger: {
255
- backgroundColor: string;
256
- fontColor: string;
257
- fontFamily: string;
258
- };
259
- shadow: {
260
- backgroundColor: string;
261
- fontColor: string;
262
- fontFamily: string;
263
- };
264
- accent: {
265
- backgroundColor: string;
266
- fontColor: string;
267
- fontFamily: string;
268
- };
269
276
  };
270
277
  declare const inputs: {
271
278
  checkbox: {
@@ -659,6 +666,48 @@ export declare const entities: {
659
666
  x9: string;
660
667
  };
661
668
  buttons: {
669
+ types: {
670
+ primary: {
671
+ backgroundColor: string;
672
+ fontColor: string;
673
+ fontFamily: string;
674
+ };
675
+ secondary: {
676
+ backgroundColor: string;
677
+ fontColor: string;
678
+ fontFamily: string;
679
+ };
680
+ warning: {
681
+ backgroundColor: string;
682
+ fontColor: string;
683
+ fontFamily: string;
684
+ };
685
+ success: {
686
+ backgroundColor: string;
687
+ fontColor: string;
688
+ fontFamily: string;
689
+ };
690
+ danger: {
691
+ backgroundColor: string;
692
+ fontColor: string;
693
+ fontFamily: string;
694
+ };
695
+ shadow: {
696
+ backgroundColor: string;
697
+ fontColor: string;
698
+ fontFamily: string;
699
+ };
700
+ accent: {
701
+ backgroundColor: string;
702
+ fontColor: string;
703
+ fontFamily: string;
704
+ };
705
+ smoke: {
706
+ backgroundColor: string;
707
+ fontColor: string;
708
+ fontFamily: string;
709
+ };
710
+ };
662
711
  boxShadow: (shadow: "dark" | "mediumDark" | "mediumLight" | "light" | "xLight", color?: string | undefined, reverseOffset?: boolean | undefined) => string;
663
712
  borderSize: string;
664
713
  outlinedBackgroundColor: string;
@@ -710,41 +759,6 @@ export declare const entities: {
710
759
  borderRadius: string;
711
760
  };
712
761
  };
713
- primary: {
714
- backgroundColor: string;
715
- fontColor: string;
716
- fontFamily: string;
717
- };
718
- secondary: {
719
- backgroundColor: string;
720
- fontColor: string;
721
- fontFamily: string;
722
- };
723
- warning: {
724
- backgroundColor: string;
725
- fontColor: string;
726
- fontFamily: string;
727
- };
728
- success: {
729
- backgroundColor: string;
730
- fontColor: string;
731
- fontFamily: string;
732
- };
733
- danger: {
734
- backgroundColor: string;
735
- fontColor: string;
736
- fontFamily: string;
737
- };
738
- shadow: {
739
- backgroundColor: string;
740
- fontColor: string;
741
- fontFamily: string;
742
- };
743
- accent: {
744
- backgroundColor: string;
745
- fontColor: string;
746
- fontFamily: string;
747
- };
748
762
  };
749
763
  inputs: {
750
764
  checkbox: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sendoutcards/quantum-design-ui",
3
- "version": "1.7.7",
3
+ "version": "1.7.8",
4
4
  "description": "UI component library for Quantum Design System",
5
5
  "module": "dist/index.es.js",
6
6
  "jsnext:main": "dist/index.es.js",