From be522b38c33aa1093f07237211372945f35c838e Mon Sep 17 00:00:00 2001 From: saurabhdaware Date: Wed, 11 Dec 2024 10:49:20 +0530 Subject: [PATCH 1/2] feat: component status table update --- .../utils/storybook/componentStatusData.ts | 66 ++++++++++++++++++- 1 file changed, 65 insertions(+), 1 deletion(-) diff --git a/packages/blade/src/utils/storybook/componentStatusData.ts b/packages/blade/src/utils/storybook/componentStatusData.ts index 5e7ee333be1..458c3174956 100644 --- a/packages/blade/src/utils/storybook/componentStatusData.ts +++ b/packages/blade/src/utils/storybook/componentStatusData.ts @@ -434,11 +434,13 @@ const componentData: ComponentStatusDataType = [ description: 'Menu displays a list of actions on temporary surfaces. They allow users to action(s) from multiple options. They appear when users interact with a button, action, or other control.', releasedIn: '11.22.0', + storybookLink: 'Components/Menu', platform: 'web', }, { name: 'TopNav', status: 'released', + storybookLink: 'Components/TopNav', description: 'TopNav is a horizontal navigation component that can be used to navigate between pages.', releasedIn: '11.23.0', @@ -530,7 +532,6 @@ const componentData: ComponentStatusDataType = [ 'The popover typically provides additional context about the element or its function. A popover is always triggered by a mouse hover on desktop and on tap on mobile.', platform: 'all', }, - { name: 'SpotlightPopoverTour', status: 'released', @@ -540,6 +541,69 @@ const componentData: ComponentStatusDataType = [ 'The SpotlightPopoverTour component is used to provide context as well as enable users to take certain actions on it. These are used to highlight a new feature or provide a guided tour to a new user.', platform: 'web', }, + { + name: 'Motion Preset - Fade', + status: 'released', + releasedIn: '12.0.0', + storybookLink: 'Motion/Fade/Docs', + description: + 'The Fade component is a motion preset that animates the opacity of its children, allowing them to smoothly appear or disappear. It ensures seamless transitions while keeping the UI visually engaging.', + platform: 'web', + }, + { + name: 'Motion Preset - Move', + status: 'released', + releasedIn: '12.0.0', + storybookLink: 'Motion/Move/Docs', + description: + 'The Move component is a motion preset that animates the opacity and position of its children, allowing them to smoothly appear or disappear. It ensures seamless transitions while keeping the UI visually engaging.', + platform: 'web', + }, + { + name: 'Motion Preset - Slide', + status: 'released', + releasedIn: '12.0.0', + storybookLink: 'Motion/Slide/Docs', + description: + 'The Slide component is a motion preset that animates the children by sliding them in from outside of viewport, allowing them to smoothly appear or disappear. Unlike Move, Slide is meant to animate components from outside of viewport', + platform: 'web', + }, + { + name: 'Motion Preset - Morph', + status: 'released', + releasedIn: '12.0.0', + storybookLink: 'Motion/Morph/Docs', + description: + "Morph component is a abstraction on motion react's layout animations. It allows you to morph between 2 elements", + platform: 'web', + }, + { + name: 'Motion Preset - Scale', + status: 'released', + releasedIn: '12.0.0', + storybookLink: 'Motion/Scale/Docs', + description: + 'Scale component animates over CSS `scale` property and allows you to enlarge or shrink element on certain interactions', + platform: 'web', + }, + { + name: 'Motion Preset - AnimateInteractions', + status: 'released', + releasedIn: '12.0.0', + storybookLink: 'Motion/AnimateInteractions/Docs', + description: + 'AnimateInteractions is a component that allows you to animate child components based on interactions on parent. This is similar to doing `.parent:hover .child {}` styling in CSS.', + platform: 'web', + }, + { + name: 'Motion Preset - Stagger', + status: 'released', + releasedIn: '12.0.0', + storybookLink: 'Motion/Stagger/Docs', + description: + 'Stagger component allows you to stagger children (make them appear one after the other). Its a utility preset. You can use any of the base presets like Move, Fade, Slide inside of it', + platform: 'web', + }, ]; export type { ComponentStatuses, ComponentStatusDataType }; From 40dc4b9a3cbfcde6558475839450e1490554ee3c Mon Sep 17 00:00:00 2001 From: saurabhdaware Date: Wed, 11 Dec 2024 16:07:34 +0530 Subject: [PATCH 2/2] fix: remove Motion Presets prefix from name --- .../src/utils/storybook/componentStatusData.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/blade/src/utils/storybook/componentStatusData.ts b/packages/blade/src/utils/storybook/componentStatusData.ts index 458c3174956..24be766c444 100644 --- a/packages/blade/src/utils/storybook/componentStatusData.ts +++ b/packages/blade/src/utils/storybook/componentStatusData.ts @@ -542,7 +542,7 @@ const componentData: ComponentStatusDataType = [ platform: 'web', }, { - name: 'Motion Preset - Fade', + name: 'Fade', status: 'released', releasedIn: '12.0.0', storybookLink: 'Motion/Fade/Docs', @@ -551,7 +551,7 @@ const componentData: ComponentStatusDataType = [ platform: 'web', }, { - name: 'Motion Preset - Move', + name: 'Move', status: 'released', releasedIn: '12.0.0', storybookLink: 'Motion/Move/Docs', @@ -560,7 +560,7 @@ const componentData: ComponentStatusDataType = [ platform: 'web', }, { - name: 'Motion Preset - Slide', + name: 'Slide', status: 'released', releasedIn: '12.0.0', storybookLink: 'Motion/Slide/Docs', @@ -569,7 +569,7 @@ const componentData: ComponentStatusDataType = [ platform: 'web', }, { - name: 'Motion Preset - Morph', + name: 'Morph', status: 'released', releasedIn: '12.0.0', storybookLink: 'Motion/Morph/Docs', @@ -578,7 +578,7 @@ const componentData: ComponentStatusDataType = [ platform: 'web', }, { - name: 'Motion Preset - Scale', + name: 'Scale', status: 'released', releasedIn: '12.0.0', storybookLink: 'Motion/Scale/Docs', @@ -587,7 +587,7 @@ const componentData: ComponentStatusDataType = [ platform: 'web', }, { - name: 'Motion Preset - AnimateInteractions', + name: 'AnimateInteractions', status: 'released', releasedIn: '12.0.0', storybookLink: 'Motion/AnimateInteractions/Docs', @@ -596,7 +596,7 @@ const componentData: ComponentStatusDataType = [ platform: 'web', }, { - name: 'Motion Preset - Stagger', + name: 'Stagger', status: 'released', releasedIn: '12.0.0', storybookLink: 'Motion/Stagger/Docs',