Pass story parameters to tab options

oblador · May 10, 2022 · 5a3796e · 5a3796e
1 parent dc35f4b
commit 5a3796e
Show file tree

Hide file tree

Showing 88 changed files with 16 additions and 12 deletions.
diff --git a/examples/react/.loki/reference/chrome_a4_Media_with_dark_scheme_queries.png b/examples/react/.loki/reference/chrome_a4_Media_with_dark_scheme_queries.png
diff --git a/...me_a4_Media_with_color_scheme_queries.png → ...me_a4_Media_with_light_scheme_queries.png b/...me_a4_Media_with_color_scheme_queries.png → ...me_a4_Media_with_light_scheme_queries.png
diff --git a/..._dark_Media_with_color_scheme_queries.png → ...phone7_Media_with_dark_scheme_queries.png b/..._dark_Media_with_color_scheme_queries.png → ...phone7_Media_with_dark_scheme_queries.png
diff --git a/...hone7_Media_with_color_scheme_queries.png → ...hone7_Media_with_light_scheme_queries.png b/...hone7_Media_with_color_scheme_queries.png → ...hone7_Media_with_light_scheme_queries.png
diff --git a/...ples/react/.loki/reference/chrome_iphone7_dark_Animation_with_CSS_animation.png b/...ples/react/.loki/reference/chrome_iphone7_dark_Animation_with_CSS_animation.png
diff --git a/...eference/chrome_iphone7_dark_Animation_with_CSS_animation_on_pseudo_element.png b/...eference/chrome_iphone7_dark_Animation_with_CSS_animation_on_pseudo_element.png
diff --git a/...les/react/.loki/reference/chrome_iphone7_dark_Animation_with_CSS_transition.png b/...les/react/.loki/reference/chrome_iphone7_dark_Animation_with_CSS_transition.png
diff --git a/...chrome_iphone7_dark_Animation_with_CSS_transition_with_will_change_property.png b/...chrome_iphone7_dark_Animation_with_CSS_transition_with_will_change_property.png
diff --git a/examples/react/.loki/reference/chrome_iphone7_dark_Animation_with_react_motion.png b/examples/react/.loki/reference/chrome_iphone7_dark_Animation_with_react_motion.png
diff --git a/.../.loki/reference/chrome_iphone7_dark_Asynchronous_render_Logo_with_1s_delay.png b/.../.loki/reference/chrome_iphone7_dark_Asynchronous_render_Logo_with_1s_delay.png
diff --git a/.../.loki/reference/chrome_iphone7_dark_Asynchronous_render_Logo_without_delay.png b/.../.loki/reference/chrome_iphone7_dark_Asynchronous_render_Logo_without_delay.png
diff --git a/...e/chrome_iphone7_dark_Asynchronous_render_createAsyncCallback_with_1s_delay.png b/...e/chrome_iphone7_dark_Asynchronous_render_createAsyncCallback_with_1s_delay.png
diff --git a/examples/react/.loki/reference/chrome_iphone7_dark_CSF_404_Error.png b/examples/react/.loki/reference/chrome_iphone7_dark_CSF_404_Error.png
diff --git a/examples/react/.loki/reference/chrome_iphone7_dark_CSF_TODO.png b/examples/react/.loki/reference/chrome_iphone7_dark_CSF_TODO.png
diff --git a/...react/.loki/reference/chrome_iphone7_dark_Decorators_Custom_Chrome_Selector.png b/...react/.loki/reference/chrome_iphone7_dark_Decorators_Custom_Chrome_Selector.png
diff --git a/...ct/.loki/reference/chrome_iphone7_dark_Decorators_Overflow_With_One_Element.png b/...ct/.loki/reference/chrome_iphone7_dark_Decorators_Overflow_With_One_Element.png
diff --git a/...oki/reference/chrome_iphone7_dark_Decorators_Overflow_With_Several_Elements.png b/...oki/reference/chrome_iphone7_dark_Decorators_Overflow_With_Several_Elements.png
diff --git a/examples/react/.loki/reference/chrome_iphone7_dark_Fetch_Components_fetch_fail.png b/examples/react/.loki/reference/chrome_iphone7_dark_Fetch_Components_fetch_fail.png
diff --git a/examples/react/.loki/reference/chrome_iphone7_dark_FocusedInput_default.png b/examples/react/.loki/reference/chrome_iphone7_dark_FocusedInput_default.png
diff --git a/examples/react/.loki/reference/chrome_iphone7_dark_Hover_default.png b/examples/react/.loki/reference/chrome_iphone7_dark_Hover_default.png
diff --git a/examples/react/.loki/reference/chrome_iphone7_dark_Long_Element_default.png b/examples/react/.loki/reference/chrome_iphone7_dark_Long_Element_default.png
diff --git a/...react/.loki/reference/chrome_iphone7_dark_Long_Element_non_integer_Viewport.png b/...react/.loki/reference/chrome_iphone7_dark_Long_Element_non_integer_Viewport.png
diff --git a/examples/react/.loki/reference/chrome_iphone7_dark_Media_with_media_queries.png b/examples/react/.loki/reference/chrome_iphone7_dark_Media_with_media_queries.png
diff --git a/...ct/.loki/reference/chrome_iphone7_dark_Multiple_elements_Invisible_elements.png b/...ct/.loki/reference/chrome_iphone7_dark_Multiple_elements_Invisible_elements.png
diff --git a/...eact/.loki/reference/chrome_iphone7_dark_Multiple_elements_Stacked_elements.png b/...eact/.loki/reference/chrome_iphone7_dark_Multiple_elements_Stacked_elements.png
diff --git a/...rence/chrome_iphone7_dark_Multiple_elements_Stacked_elements_with_a_wrapper.png b/...rence/chrome_iphone7_dark_Multiple_elements_Stacked_elements_with_a_wrapper.png
diff --git a/examples/react/.loki/reference/chrome_iphone7_dark_Positions_Absolute.png b/examples/react/.loki/reference/chrome_iphone7_dark_Positions_Absolute.png
diff --git a/examples/react/.loki/reference/chrome_iphone7_dark_Positions_Fixed.png b/examples/react/.loki/reference/chrome_iphone7_dark_Positions_Fixed.png
diff --git a/examples/react/.loki/reference/chrome_iphone7_dark_Positions_Nested.png b/examples/react/.loki/reference/chrome_iphone7_dark_Positions_Nested.png
diff --git a/.../react/.loki/reference/chrome_iphone7_dark_Positions_Nested_Overflow_Hidden.png b/.../react/.loki/reference/chrome_iphone7_dark_Positions_Nested_Overflow_Hidden.png
diff --git a/...s/react/.loki/reference/chrome_iphone7_dark_Positions_Overflow_Hidden_Fixed.png b/...s/react/.loki/reference/chrome_iphone7_dark_Positions_Overflow_Hidden_Fixed.png
diff --git a/...eact/.loki/reference/chrome_iphone7_dark_Positions_Overflow_Hidden_Relative.png b/...eact/.loki/reference/chrome_iphone7_dark_Positions_Overflow_Hidden_Relative.png
diff --git a/examples/react/.loki/reference/chrome_iphone7_dark_Positions_Relative_Wrapper.png b/examples/react/.loki/reference/chrome_iphone7_dark_Positions_Relative_Wrapper.png
diff --git a/...t/.loki/reference/chrome_iphone7_dark_Positions_Slider_With_Nested_Overflow.png b/...t/.loki/reference/chrome_iphone7_dark_Positions_Slider_With_Nested_Overflow.png
diff --git a/examples/react/.loki/reference/chrome_iphone7_dark_Text_With_External_Font.png b/examples/react/.loki/reference/chrome_iphone7_dark_Text_With_External_Font.png
diff --git a/examples/react/.loki/reference/chrome_iphone7_dark_Zero_height_with_padding.png b/examples/react/.loki/reference/chrome_iphone7_dark_Zero_height_with_padding.png
diff --git a/examples/react/.loki/reference/chrome_iphone7_dark_isLokiRunning_default.png b/examples/react/.loki/reference/chrome_iphone7_dark_isLokiRunning_default.png
diff --git a/examples/react/.loki/reference/chrome_laptop_Animation_with_CSS_animation.png b/examples/react/.loki/reference/chrome_laptop_Animation_with_CSS_animation.png
diff --git a/...loki/reference/chrome_laptop_Animation_with_CSS_animation_on_pseudo_element.png b/...loki/reference/chrome_laptop_Animation_with_CSS_animation_on_pseudo_element.png
diff --git a/examples/react/.loki/reference/chrome_laptop_Animation_with_CSS_transition.png b/examples/react/.loki/reference/chrome_laptop_Animation_with_CSS_transition.png
diff --git a/...rence/chrome_laptop_Animation_with_CSS_transition_with_will_change_property.png b/...rence/chrome_laptop_Animation_with_CSS_transition_with_will_change_property.png
diff --git a/examples/react/.loki/reference/chrome_laptop_CSF_404_Error.png b/examples/react/.loki/reference/chrome_laptop_CSF_404_Error.png
diff --git a/examples/react/.loki/reference/chrome_laptop_CSF_TODO.png b/examples/react/.loki/reference/chrome_laptop_CSF_TODO.png
diff --git a/examples/react/.loki/reference/chrome_laptop_Decorators_Custom_Chrome_Selector.png b/examples/react/.loki/reference/chrome_laptop_Decorators_Custom_Chrome_Selector.png
diff --git a/...es/react/.loki/reference/chrome_laptop_Decorators_Overflow_With_One_Element.png b/...es/react/.loki/reference/chrome_laptop_Decorators_Overflow_With_One_Element.png
diff --git a/...act/.loki/reference/chrome_laptop_Decorators_Overflow_With_Several_Elements.png b/...act/.loki/reference/chrome_laptop_Decorators_Overflow_With_Several_Elements.png
diff --git a/examples/react/.loki/reference/chrome_laptop_Fetch_Components_fetch_fail.png b/examples/react/.loki/reference/chrome_laptop_Fetch_Components_fetch_fail.png
diff --git a/examples/react/.loki/reference/chrome_laptop_FocusedInput_default.png b/examples/react/.loki/reference/chrome_laptop_FocusedInput_default.png
diff --git a/examples/react/.loki/reference/chrome_laptop_Media_with_color_scheme_queries.png b/examples/react/.loki/reference/chrome_laptop_Media_with_color_scheme_queries.png
diff --git a/examples/react/.loki/reference/chrome_laptop_Media_with_media_queries.png b/examples/react/.loki/reference/chrome_laptop_Media_with_media_queries.png
diff --git a/examples/react/.loki/reference/chrome_laptop_Text_With_External_Font.png b/examples/react/.loki/reference/chrome_laptop_Text_With_External_Font.png
diff --git a/examples/react/.loki/reference/chrome_laptop_dark_Animation_with_CSS_animation.png b/examples/react/.loki/reference/chrome_laptop_dark_Animation_with_CSS_animation.png
diff --git a/...reference/chrome_laptop_dark_Animation_with_CSS_animation_on_pseudo_element.png b/...reference/chrome_laptop_dark_Animation_with_CSS_animation_on_pseudo_element.png
diff --git a/...ples/react/.loki/reference/chrome_laptop_dark_Animation_with_CSS_transition.png b/...ples/react/.loki/reference/chrome_laptop_dark_Animation_with_CSS_transition.png
diff --git a/.../chrome_laptop_dark_Animation_with_CSS_transition_with_will_change_property.png b/.../chrome_laptop_dark_Animation_with_CSS_transition_with_will_change_property.png
diff --git a/examples/react/.loki/reference/chrome_laptop_dark_Animation_with_react_motion.png b/examples/react/.loki/reference/chrome_laptop_dark_Animation_with_react_motion.png
diff --git a/...t/.loki/reference/chrome_laptop_dark_Asynchronous_render_Logo_with_1s_delay.png b/...t/.loki/reference/chrome_laptop_dark_Asynchronous_render_Logo_with_1s_delay.png
diff --git a/...t/.loki/reference/chrome_laptop_dark_Asynchronous_render_Logo_without_delay.png b/...t/.loki/reference/chrome_laptop_dark_Asynchronous_render_Logo_without_delay.png
diff --git a/...ce/chrome_laptop_dark_Asynchronous_render_createAsyncCallback_with_1s_delay.png b/...ce/chrome_laptop_dark_Asynchronous_render_createAsyncCallback_with_1s_delay.png
diff --git a/examples/react/.loki/reference/chrome_laptop_dark_CSF_404_Error.png b/examples/react/.loki/reference/chrome_laptop_dark_CSF_404_Error.png
diff --git a/examples/react/.loki/reference/chrome_laptop_dark_CSF_TODO.png b/examples/react/.loki/reference/chrome_laptop_dark_CSF_TODO.png
diff --git a/.../react/.loki/reference/chrome_laptop_dark_Decorators_Custom_Chrome_Selector.png b/.../react/.loki/reference/chrome_laptop_dark_Decorators_Custom_Chrome_Selector.png
diff --git a/...act/.loki/reference/chrome_laptop_dark_Decorators_Overflow_With_One_Element.png b/...act/.loki/reference/chrome_laptop_dark_Decorators_Overflow_With_One_Element.png
diff --git a/...loki/reference/chrome_laptop_dark_Decorators_Overflow_With_Several_Elements.png b/...loki/reference/chrome_laptop_dark_Decorators_Overflow_With_Several_Elements.png
diff --git a/examples/react/.loki/reference/chrome_laptop_dark_Fetch_Components_fetch_fail.png b/examples/react/.loki/reference/chrome_laptop_dark_Fetch_Components_fetch_fail.png
diff --git a/examples/react/.loki/reference/chrome_laptop_dark_FocusedInput_default.png b/examples/react/.loki/reference/chrome_laptop_dark_FocusedInput_default.png
diff --git a/examples/react/.loki/reference/chrome_laptop_dark_Hover_default.png b/examples/react/.loki/reference/chrome_laptop_dark_Hover_default.png
diff --git a/examples/react/.loki/reference/chrome_laptop_dark_Long_Element_default.png b/examples/react/.loki/reference/chrome_laptop_dark_Long_Element_default.png
diff --git a/.../react/.loki/reference/chrome_laptop_dark_Long_Element_non_integer_Viewport.png b/.../react/.loki/reference/chrome_laptop_dark_Long_Element_non_integer_Viewport.png
diff --git a/...es/react/.loki/reference/chrome_laptop_dark_Media_with_color_scheme_queries.png b/...es/react/.loki/reference/chrome_laptop_dark_Media_with_color_scheme_queries.png
diff --git a/examples/react/.loki/reference/chrome_laptop_dark_Media_with_media_queries.png b/examples/react/.loki/reference/chrome_laptop_dark_Media_with_media_queries.png
diff --git a/...act/.loki/reference/chrome_laptop_dark_Multiple_elements_Invisible_elements.png b/...act/.loki/reference/chrome_laptop_dark_Multiple_elements_Invisible_elements.png
diff --git a/...react/.loki/reference/chrome_laptop_dark_Multiple_elements_Stacked_elements.png b/...react/.loki/reference/chrome_laptop_dark_Multiple_elements_Stacked_elements.png
diff --git a/...erence/chrome_laptop_dark_Multiple_elements_Stacked_elements_with_a_wrapper.png b/...erence/chrome_laptop_dark_Multiple_elements_Stacked_elements_with_a_wrapper.png
diff --git a/examples/react/.loki/reference/chrome_laptop_dark_Positions_Absolute.png b/examples/react/.loki/reference/chrome_laptop_dark_Positions_Absolute.png
diff --git a/examples/react/.loki/reference/chrome_laptop_dark_Positions_Fixed.png b/examples/react/.loki/reference/chrome_laptop_dark_Positions_Fixed.png
diff --git a/examples/react/.loki/reference/chrome_laptop_dark_Positions_Nested.png b/examples/react/.loki/reference/chrome_laptop_dark_Positions_Nested.png
diff --git a/...s/react/.loki/reference/chrome_laptop_dark_Positions_Nested_Overflow_Hidden.png b/...s/react/.loki/reference/chrome_laptop_dark_Positions_Nested_Overflow_Hidden.png
diff --git a/...es/react/.loki/reference/chrome_laptop_dark_Positions_Overflow_Hidden_Fixed.png b/...es/react/.loki/reference/chrome_laptop_dark_Positions_Overflow_Hidden_Fixed.png
diff --git a/...react/.loki/reference/chrome_laptop_dark_Positions_Overflow_Hidden_Relative.png b/...react/.loki/reference/chrome_laptop_dark_Positions_Overflow_Hidden_Relative.png
diff --git a/examples/react/.loki/reference/chrome_laptop_dark_Positions_Relative_Wrapper.png b/examples/react/.loki/reference/chrome_laptop_dark_Positions_Relative_Wrapper.png
diff --git a/...ct/.loki/reference/chrome_laptop_dark_Positions_Slider_With_Nested_Overflow.png b/...ct/.loki/reference/chrome_laptop_dark_Positions_Slider_With_Nested_Overflow.png
diff --git a/examples/react/.loki/reference/chrome_laptop_dark_Text_With_External_Font.png b/examples/react/.loki/reference/chrome_laptop_dark_Text_With_External_Font.png
diff --git a/examples/react/.loki/reference/chrome_laptop_dark_Zero_height_with_padding.png b/examples/react/.loki/reference/chrome_laptop_dark_Zero_height_with_padding.png
diff --git a/examples/react/.loki/reference/chrome_laptop_dark_isLokiRunning_default.png b/examples/react/.loki/reference/chrome_laptop_dark_isLokiRunning_default.png
diff --git a/examples/react/.loki/reference/chrome_laptop_isLokiRunning_default.png b/examples/react/.loki/reference/chrome_laptop_isLokiRunning_default.png
diff --git a/examples/react/loki.config.js b/examples/react/loki.config.js
@@ -7,20 +7,10 @@ module.exports = {
       width: 1366,
       height: 768,
     },
-    'chrome.laptop.dark': {
-      target: 'chrome.docker',
-      width: 1366,
-      height: 768,
-      features: [{ name: 'prefers-color-scheme', value: 'dark' }],
-    },
     'chrome.iphone7': {
       target: 'chrome.docker',
       preset: 'iPhone 7',
     },
-    'chrome.iphone7.dark': {
-      target: 'chrome.docker',
-      preset: 'iPhone 7 Dark Mode',
-    },
     'chrome.a4': {
       target: 'chrome.docker',
       preset: 'A4 Paper',

diff --git a/examples/react/src/api/Media.stories.js b/examples/react/src/api/Media.stories.js
@@ -11,8 +11,22 @@ export const MediaAwareComponent = () => (
 
 MediaAwareComponent.storyName = 'with media queries';
 
-export const FeaturesAwareComponent = () => (
+export const LightSchemeComponent = () => (
   <div className="FeaturesAwareComponent" />
 );
 
-FeaturesAwareComponent.storyName = 'with color scheme queries';
+LightSchemeComponent.parameters = {
+  loki: { features: [{ name: 'prefers-color-scheme', value: 'light' }] },
+};
+
+LightSchemeComponent.storyName = 'with light scheme queries';
+
+export const DarkSchemeComponent = () => (
+  <div className="FeaturesAwareComponent" />
+);
+
+DarkSchemeComponent.parameters = {
+  loki: { features: [{ name: 'prefers-color-scheme', value: 'dark' }] },
+};
+
+DarkSchemeComponent.storyName = 'with dark scheme queries';