willba-component-library 0.0.28 → 0.0.31

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.
Files changed (43) hide show
  1. package/.storybook/main.ts +19 -19
  2. package/.storybook/preview.ts +15 -15
  3. package/lib/components/FilterBar/components/Callendar.d.ts +2 -0
  4. package/lib/components/FilterBar/components/Divider.d.ts +2 -0
  5. package/lib/components/FilterBar/components/SelectButton.d.ts +2 -0
  6. package/lib/components/FilterBar/components/SubmitButton.d.ts +2 -0
  7. package/lib/index.esm.js +17 -14
  8. package/lib/index.esm.js.map +1 -1
  9. package/lib/index.js +17 -14
  10. package/lib/index.js.map +1 -1
  11. package/lib/index.umd.js +18 -15
  12. package/lib/index.umd.js.map +1 -1
  13. package/package.json +5 -5
  14. package/rollup.config.mjs +59 -59
  15. package/src/components/Button/Button.stories.tsx +34 -34
  16. package/src/components/Button/Button.tsx +56 -56
  17. package/src/components/Button/button.css +29 -29
  18. package/src/components/Button/index.ts +1 -1
  19. package/src/components/FilterBar/FilterBar.css +2 -2
  20. package/src/components/FilterBar/FilterBar.stories.tsx +20 -20
  21. package/src/components/FilterBar/FilterBar.tsx +6 -21
  22. package/src/components/FilterBar/components/Callendar.tsx +5 -0
  23. package/src/components/FilterBar/components/Divider.tsx +5 -0
  24. package/src/components/FilterBar/components/SelectButton.tsx +9 -0
  25. package/src/components/FilterBar/components/SubmitButton.tsx +9 -0
  26. package/src/components/FilterBar/index.ts +1 -1
  27. package/src/index.ts +4 -4
  28. package/stories/Button.stories.ts +50 -50
  29. package/stories/Button.tsx +48 -48
  30. package/stories/Configure.mdx +364 -364
  31. package/stories/Header.stories.ts +27 -27
  32. package/stories/Header.tsx +56 -56
  33. package/stories/Page.stories.ts +29 -29
  34. package/stories/Page.tsx +73 -73
  35. package/stories/assets/accessibility.svg +4 -4
  36. package/stories/assets/discord.svg +15 -15
  37. package/stories/assets/github.svg +3 -3
  38. package/stories/assets/tutorials.svg +12 -12
  39. package/stories/assets/youtube.svg +4 -4
  40. package/stories/button.css +30 -30
  41. package/stories/header.css +32 -32
  42. package/stories/page.css +69 -69
  43. package/tsconfig.json +22 -22
@@ -1,48 +1,48 @@
1
- import React from 'react';
2
- import './button.css';
3
-
4
- interface ButtonProps {
5
- /**
6
- * Is this the principal call to action on the page?
7
- */
8
- primary?: boolean;
9
- /**
10
- * What background color to use
11
- */
12
- backgroundColor?: string;
13
- /**
14
- * How large should the button be?
15
- */
16
- size?: 'small' | 'medium' | 'large';
17
- /**
18
- * Button contents
19
- */
20
- label: string;
21
- /**
22
- * Optional click handler
23
- */
24
- onClick?: () => void;
25
- }
26
-
27
- /**
28
- * Primary UI component for user interaction
29
- */
30
- export const Button = ({
31
- primary = false,
32
- size = 'medium',
33
- backgroundColor,
34
- label,
35
- ...props
36
- }: ButtonProps) => {
37
- const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
38
- return (
39
- <button
40
- type="button"
41
- className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
42
- style={{ backgroundColor }}
43
- {...props}
44
- >
45
- {label}
46
- </button>
47
- );
48
- };
1
+ import React from 'react';
2
+ import './button.css';
3
+
4
+ interface ButtonProps {
5
+ /**
6
+ * Is this the principal call to action on the page?
7
+ */
8
+ primary?: boolean;
9
+ /**
10
+ * What background color to use
11
+ */
12
+ backgroundColor?: string;
13
+ /**
14
+ * How large should the button be?
15
+ */
16
+ size?: 'small' | 'medium' | 'large';
17
+ /**
18
+ * Button contents
19
+ */
20
+ label: string;
21
+ /**
22
+ * Optional click handler
23
+ */
24
+ onClick?: () => void;
25
+ }
26
+
27
+ /**
28
+ * Primary UI component for user interaction
29
+ */
30
+ export const Button = ({
31
+ primary = false,
32
+ size = 'medium',
33
+ backgroundColor,
34
+ label,
35
+ ...props
36
+ }: ButtonProps) => {
37
+ const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
38
+ return (
39
+ <button
40
+ type="button"
41
+ className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
42
+ style={{ backgroundColor }}
43
+ {...props}
44
+ >
45
+ {label}
46
+ </button>
47
+ );
48
+ };