[V3][RL] Amend description of motion tokens

LifeSG · Oct 5, 2024 · bed52a2 · bed52a2
1 parent ac6d040
commit bed52a2
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 13 deletions.
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -39,7 +39,7 @@ const preview: Preview = {
                         "Typography",
                         "Breakpoint",
                         "Spacing",
-                        "Animation",
+                        "Motion",
                     ],
                     "Core",
                     ["Typography", "Icon"],

diff --git a/stories/theme/motion/a-motion-introduction.mdx b/stories/theme/motion/a-motion-introduction.mdx
@@ -9,13 +9,15 @@ import { DocInfo, DocNote } from "stories/storybook-common";
 import { Motion } from "@lifesg/react-design-system/theme";
 ```
 
-Motions help to signal a change in state.
+Animations help to signal a change in state.
 
-For positioning, movement, or property changes, use CSS animations or transitions.
-The design system provides tokens to control **duration** and **speed**.
+The design system provides tokens to control **duration** and **speed**. These
+can be used in CSS animations or transitions to animate positioning, movement,
+or property changes.
 
-For content that can be expanded or collapsed, use the `react-spring`
-[library](https://www.npmjs.com/package/react-spring) to animate height or width.
+For dynamically-sized content that can be expanded or collapsed, use the
+`react-spring` [library](https://www.npmjs.com/package/react-spring) to animate
+height or width.
 
 ## Collections
 

diff --git a/stories/theme/motion/b-motion-lifesg.mdx b/stories/theme/motion/b-motion-lifesg.mdx
@@ -4,7 +4,7 @@ import { MotionDisplay } from "../doc-elements";
 
 <Meta title="Foundations/Motion/LifeSG" />
 
-# LifeSG animation
+# LifeSG motion
 
 This is the motion set used when the `motionScheme` is `"lifesg"`.
 

diff --git a/tests/theme/theme-motion.spec.tsx b/tests/theme/theme-motion.spec.tsx
@@ -4,12 +4,12 @@ import { render } from "@testing-library/react";
 import { Motion } from "../../src";
 import { ThemeSpec } from "../../src/theme/types";
 
-const StyledAnimationTest = styled.div`
+const StyledMotionTest = styled.div`
     transition: transform ${Motion["duration-500"]}, ${Motion["ease-default"]};
 `;
 
-describe("StyledAnimationTest", () => {
-    it("should apply correct animation styles based on the theme", () => {
+describe("StyledMotionTest", () => {
+    it("should apply correct motion styles based on the theme", () => {
         const mockTheme: ThemeSpec = {
             colourScheme: "lifesg",
             fontScheme: "lifesg",
@@ -25,7 +25,7 @@ describe("StyledAnimationTest", () => {
 
         const { container } = render(
             <ThemeProvider theme={mockTheme}>
-                <StyledAnimationTest />
+                <StyledMotionTest />
             </ThemeProvider>
         );
 
@@ -35,7 +35,7 @@ describe("StyledAnimationTest", () => {
         );
     });
 
-    it("should apply correct animation styles when overriding animation token", () => {
+    it("should apply correct motion styles when overriding motion token", () => {
         const overrideTheme: ThemeSpec = {
             colourScheme: "lifesg",
             fontScheme: "lifesg",
@@ -57,7 +57,7 @@ describe("StyledAnimationTest", () => {
 
         const { container } = render(
             <ThemeProvider theme={overrideTheme}>
-                <StyledAnimationTest />
+                <StyledMotionTest />
             </ThemeProvider>
         );