@khanacademy/perseus 0.4.3 → 1.0.0

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 (50) hide show
  1. package/.eslintrc.js +6 -1
  2. package/CHANGELOG.md +34 -0
  3. package/dist/es/index.js +1078 -1299
  4. package/dist/es/index.js.map +1 -1
  5. package/dist/index.js +1077 -1304
  6. package/dist/index.js.map +1 -1
  7. package/dist/strings.js +0 -4
  8. package/package.json +9 -8
  9. package/src/multi-items/__tests__/__snapshots__/multi-renderer_test.js.snap +110 -110
  10. package/src/perseus-api.jsx +10 -36
  11. package/src/perseus-types.js +0 -138
  12. package/src/styles/constants.js +0 -2
  13. package/src/styles/variables.less +0 -2
  14. package/src/types.js +18 -35
  15. package/src/util.js +0 -6
  16. package/src/version.js +1 -1
  17. package/src/widgets/__testdata__/base-radio_testdata.js +22 -0
  18. package/src/widgets/__tests__/__snapshots__/group_test.jsx.snap +110 -110
  19. package/src/widgets/__tests__/__snapshots__/radio_test.jsx.snap +1136 -1160
  20. package/src/widgets/__tests__/radio/base-radio_test.jsx +243 -41
  21. package/src/widgets/__tests__/radio/choice-icon_test.jsx +67 -0
  22. package/src/widgets/__tests__/radio/choice_test.jsx +201 -0
  23. package/src/widgets/__tests__/radio/focus-ring_test.jsx +23 -0
  24. package/src/widgets/__tests__/radio/option-status_test.jsx +65 -0
  25. package/src/widgets/passage/__tests__/passage-markdown_test.jsx +0 -9
  26. package/src/widgets/passage/get-line-height-for-node.js +4 -5
  27. package/src/widgets/passage/passage-markdown.jsx +176 -120
  28. package/src/widgets/passage.jsx +48 -46
  29. package/src/widgets/radio/__stories__/base-radio.stories.jsx +164 -17
  30. package/src/widgets/radio/__stories__/choice-icon.stories.jsx +202 -111
  31. package/src/widgets/radio/__stories__/choice-none-above.stories.jsx +21 -6
  32. package/src/widgets/radio/__stories__/choice.stories.jsx +138 -0
  33. package/src/widgets/radio/__stories__/focus-ring.stories.jsx +29 -23
  34. package/src/widgets/radio/__stories__/option-status.stories.jsx +93 -99
  35. package/src/widgets/radio/base-radio.jsx +483 -556
  36. package/src/widgets/radio/choice-icon/choice-icon.jsx +155 -0
  37. package/src/widgets/radio/choice-icon/cross-out-line.jsx +55 -0
  38. package/src/widgets/radio/choice-icon/library-choice-icon.jsx +219 -0
  39. package/src/widgets/radio/choice-icon/sat-choice-icon.jsx +129 -0
  40. package/src/widgets/radio/choice-icon/shared-styles.js +17 -0
  41. package/src/widgets/radio/choice-none-above.jsx +49 -40
  42. package/src/widgets/radio/choice.jsx +282 -353
  43. package/src/widgets/radio/choice.jsx.fixture.js +0 -18
  44. package/src/widgets/radio/focus-ring.jsx +29 -22
  45. package/src/widgets/radio/option-status.jsx +58 -36
  46. package/src/widgets/radio/widget.jsx +181 -136
  47. package/src/widgets/radio.jsx +16 -17
  48. package/src/widgets/radio/__stories__/cross-out-button.stories.jsx +0 -64
  49. package/src/widgets/radio/choice-icon.jsx +0 -469
  50. package/src/widgets/radio/cross-out-button.jsx +0 -134
package/src/widgets/radio/__stories__/option-status.stories.jsx CHANGED
@@ -3,116 +3,110 @@ import * as React from "react";
3
3
 
4
4
  import OptionStatus from "../option-status.jsx";
5
5
 
6
- type StoryArgs = {||};
6
+ type StoryArgs = {|
7
+ crossedOut: boolean,
8
+ checked: boolean,
9
+ correct: boolean,
10
+ previouslyAnswered: boolean,
11
+ reviewMode: boolean,
12
+ satStyling: boolean,
13
+ |};
7
14
 
8
15
  type Story = {|
9
16
  title: string,
17
+ args: StoryArgs,
10
18
  |};
11
19
 
12
20
  export default ({
13
21
  title: "Perseus/Widgets/Radio/Option Status",
22
+ args: {
23
+ crossedOut: false,
24
+ checked: false,
25
+ correct: false,
26
+ previouslyAnswered: false,
27
+ reviewMode: true,
28
+ satStyling: false,
29
+ },
14
30
  }: Story);
15
31
 
16
- export const CheckedCorrectPreviouslyAnswered = (
17
- args: StoryArgs,
18
- ): React.Node => {
19
- return (
20
- <OptionStatus
21
- crossedOut={false}
22
- checked={true}
23
- correct={true}
24
- previouslyAnswered={true}
25
- />
26
- );
27
- };
28
-
29
- export const CheckedCorrectNotPreviouslyAnswered = (
30
- args: StoryArgs,
31
- ): React.Node => {
32
- return (
33
- <OptionStatus
34
- crossedOut={false}
35
- checked={true}
36
- correct={true}
37
- previouslyAnswered={false}
38
- />
39
- );
40
- };
41
-
42
- export const CheckedNotCorrectPreviouslyAnswered = (
43
- args: StoryArgs,
44
- ): React.Node => {
45
- return (
46
- <OptionStatus
47
- crossedOut={false}
48
- checked={true}
49
- correct={false}
50
- previouslyAnswered={true}
51
- />
52
- );
53
- };
54
-
55
- export const CheckedNotCorrectNotPreviouslyAnswered = (
56
- args: StoryArgs,
57
- ): React.Node => {
58
- return (
59
- <OptionStatus
60
- crossedOut={false}
61
- checked={true}
62
- correct={false}
63
- previouslyAnswered={false}
64
- />
65
- );
66
- };
67
-
68
- export const NotCheckedCorrectPreviouslyAnswered = (
69
- args: StoryArgs,
70
- ): React.Node => {
71
- return (
72
- <OptionStatus
73
- crossedOut={false}
74
- checked={false}
75
- correct={true}
76
- previouslyAnswered={true}
77
- />
78
- );
79
- };
80
-
81
- export const NotCheckedCorrectNotPreviouslyAnswered = (
82
- args: StoryArgs,
83
- ): React.Node => {
84
- return (
85
- <OptionStatus
86
- crossedOut={false}
87
- checked={false}
88
- correct={true}
89
- previouslyAnswered={false}
90
- />
91
- );
32
+ export const Interactive = (args: StoryArgs): React.Node => {
33
+ return <OptionStatus {...args} />;
92
34
  };
93
35
 
94
- export const NotCheckedNotCorrectPreviouslyAnswered = (
95
- args: StoryArgs,
96
- ): React.Node => {
97
- return (
98
- <OptionStatus
99
- crossedOut={false}
100
- checked={false}
101
- correct={false}
102
- previouslyAnswered={true}
103
- />
104
- );
105
- };
106
-
107
- export const NotCheckedNotCorrectNotPreviouslyAnswered = (
108
- args: StoryArgs,
109
- ): React.Node => {
36
+ export const AllPossibleOutputs = (args: StoryArgs): React.Node => {
110
37
  return (
111
- <OptionStatus
112
- crossedOut={false}
113
- checked={false}
114
- correct={false}
115
- previouslyAnswered={false}
116
- />
38
+ <>
39
+ <div>
40
+ Checked Correct:
41
+ <OptionStatus
42
+ crossedOut={false}
43
+ checked={true}
44
+ correct={true}
45
+ previouslyAnswered={true}
46
+ reviewMode={true}
47
+ satStyling={false}
48
+ />
49
+ </div>
50
+ <hr />
51
+ <div>
52
+ Checked Not Correct:
53
+ <OptionStatus
54
+ crossedOut={false}
55
+ checked={true}
56
+ correct={false}
57
+ previouslyAnswered={true}
58
+ reviewMode={true}
59
+ satStyling={false}
60
+ />
61
+ </div>
62
+ <hr />
63
+ <div>
64
+ Not Checked Correct:
65
+ <OptionStatus
66
+ crossedOut={false}
67
+ checked={false}
68
+ correct={true}
69
+ previouslyAnswered={true}
70
+ reviewMode={true}
71
+ satStyling={false}
72
+ />
73
+ </div>
74
+ <hr />
75
+ <div>
76
+ Not Checked Not Correct Previously Answered:
77
+ <OptionStatus
78
+ crossedOut={false}
79
+ checked={false}
80
+ correct={false}
81
+ previouslyAnswered={true}
82
+ reviewMode={true}
83
+ satStyling={false}
84
+ />
85
+ </div>
86
+ <hr />
87
+ <div>
88
+ Not Checked Not Correct Not Previously Answered:
89
+ <OptionStatus
90
+ crossedOut={false}
91
+ checked={false}
92
+ correct={false}
93
+ previouslyAnswered={false}
94
+ reviewMode={true}
95
+ satStyling={false}
96
+ />
97
+ </div>
98
+ <hr />
99
+ <div>
100
+ Crossed Out Correct:
101
+ <OptionStatus
102
+ crossedOut={true}
103
+ checked={false}
104
+ correct={true}
105
+ previouslyAnswered={false}
106
+ reviewMode={true}
107
+ satStyling={false}
108
+ />
109
+ </div>
110
+ </>
117
111
  );
118
112
  };