-
Notifications
You must be signed in to change notification settings - Fork 146
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(blade): add motion tokens (#438)
Co-authored-by: Kamlesh Chandnani <[email protected]>
- Loading branch information
1 parent
7072204
commit a20b608
Showing
30 changed files
with
676 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| --- | ||
| "@razorpay/blade": minor | ||
| --- | ||
|
|
||
| feat(blade): add motion tokens | ||
|
|
||
| ### Motion tokens | ||
| We have added tokens for | ||
| 1. Delay | ||
| 2. Duration | ||
| 3. Easing | ||
|
|
||
| You can find a detailed RFC for motion here: [View Formatted RFC](https://github.com/razorpay/blade/blob/rfc/2022-03-22-motion-rfc/rfcs/2022-03-22-motion-rfc.md) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import styled from 'styled-components'; | ||
|
|
||
| const MovingDiv = styled.div` | ||
| height: 40px; | ||
| width: 40px; | ||
| background-color: ${(props) => props.theme.colors.brand.primary[500]}; | ||
| animation: ${(props) => `move 3s ${props.easing || 'linear'} infinite`}; | ||
| @keyframes move { | ||
| 0% { | ||
| transform: translateX(0px); | ||
| } | ||
| 50% { | ||
| transform: translateX(100px); | ||
| } | ||
| 100% { | ||
| transform: translateX(0px); | ||
| } | ||
| } | ||
| `; | ||
|
|
||
| export default MovingDiv; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,199 @@ | ||
| import { Meta, DocsContainer } from '@storybook/addon-docs'; | ||
| import styled from 'styled-components'; | ||
| import { useTheme, BladeProvider } from '../../src/components'; | ||
| import { paymentTheme, bankingTheme } from '../../src/tokens'; | ||
| import makeMotionTime from '../../src/utils/makeMotionTime'; | ||
| import MovingDiv from '../components/MovingDiv'; | ||
|
|
||
| <Meta | ||
| title="Tokens/Motion" | ||
| parameters={{ | ||
| docs: { | ||
| container: ({ children, context }) => { | ||
| const getThemeTokens = () => { | ||
| if (context.globals.themeTokens === 'paymentTheme') { | ||
| return paymentTheme; | ||
| } | ||
| if (context.globals.themeTokens === 'bankingTheme') { | ||
| return bankingTheme; | ||
| } | ||
| return null; | ||
| }; | ||
| return ( | ||
| <DocsContainer context={context}> | ||
| <BladeProvider | ||
| key={`${context.globals.themeTokens}-${context.globals.colorScheme}`} | ||
| themeTokens={getThemeTokens()} | ||
| colorScheme={context.globals.colorScheme} | ||
| > | ||
| {children} | ||
| </BladeProvider> | ||
| </DocsContainer> | ||
| ); | ||
| }, | ||
| }, | ||
| }} | ||
| /> | ||
|
|
||
| # 🎬 Motion | ||
|
|
||
| export const Motion = () => { | ||
| const { theme } = useTheme(); | ||
| return ( | ||
| <> | ||
| <h3>Delay (in milliseconds)</h3> | ||
| <table> | ||
| <tbody> | ||
| {Object.entries(theme.motion.delay).map(([key, value]) => ( | ||
| <tr key={key}> | ||
| <td>{`theme.motion.delay.${key}`}</td> | ||
| <td>{value}</td> | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| <h3>Duration (in milliseconds)</h3> | ||
| <table> | ||
| <tbody> | ||
| {Object.entries(theme.motion.duration).map(([key, value]) => ( | ||
| <tr key={key}> | ||
| <td>{`theme.motion.duration.${key}`}</td> | ||
| <td>{value}</td> | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| <h3>Easing</h3> | ||
| <h4>standard</h4> | ||
| <table> | ||
| <tbody> | ||
| {Object.entries(theme.motion.easing.standard).map(([key, value]) => ( | ||
| <tr key={key}> | ||
| <td>{`theme.motion.easing.standard.${key}`}</td> | ||
| <td>{value}</td> | ||
| <td style={{ width: '150px' }}> | ||
| <MovingDiv theme={theme} easing={theme.motion.easing.standard[key]}></MovingDiv> | ||
| </td> | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| <h4>entrance</h4> | ||
| <table> | ||
| <tbody> | ||
| {Object.entries(theme.motion.easing.entrance).map(([key, value]) => ( | ||
| <tr key={key}> | ||
| <td>{`theme.motion.easing.entrance.${key}`}</td> | ||
| <td>{value}</td> | ||
| <td style={{ width: '150px' }}> | ||
| <MovingDiv theme={theme} easing={theme.motion.easing.entrance[key]}></MovingDiv> | ||
| </td> | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| <h4>exit</h4> | ||
| <table> | ||
| <tbody> | ||
| {Object.entries(theme.motion.easing.exit).map(([key, value]) => ( | ||
| <tr key={key}> | ||
| <td>{`theme.motion.easing.exit.${key}`}</td> | ||
| <td>{value}</td> | ||
| <td style={{ width: '150px' }}> | ||
| <MovingDiv theme={theme} easing={theme.motion.easing.exit[key]}></MovingDiv> | ||
| </td> | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export const MotionExample = () => { | ||
| const { theme } = useTheme(); | ||
| const ExampleDiv = styled.div` | ||
| height: 50px; | ||
| width: 50px; | ||
| border-radius: 25px; | ||
| background-color: ${(props) => props.theme.colors.brand.primary[500]}; | ||
| animation: ${(props) => | ||
| `resize ${makeMotionTime(props.theme.motion.duration.xgentle)} ${ | ||
| props.theme.motion.easing.standard.effective | ||
| } infinite`}; | ||
| @keyframes resize { | ||
| 0% { | ||
| transform: scale(1); | ||
| } | ||
| 50% { | ||
| transform: scale(1.5); | ||
| } | ||
| 100% { | ||
| transform: scale(1); | ||
| } | ||
| } | ||
| `; | ||
| return <ExampleDiv theme={theme} easing={theme.motion.easing.standard.effective}></ExampleDiv>; | ||
| }; | ||
|
|
||
| <Motion /> | ||
|
|
||
| ## Example Usage | ||
|
|
||
| If we want to create a circle that scales up and down with a **duration** of `xgentle` and an **easing** of `standard.effective` | ||
|
|
||
| 1. Ensure you've followed all the steps under ["Guides/Usage"](https://master--61c19ee8d3d282003ac1d81c.chromatic.com//?path=/story/guides-usage--page&globals=measureEnabled:false) to setup your theme with `<BladeProvider>` | ||
| 2. Your theme tokens will be automatically available to `styled-components` as a `theme` prop | ||
| 3. Create a component using `styled-components` that looks like this: | ||
|
|
||
| ```jsx | ||
| import styled from 'styled-components'; | ||
| import { makeMotionTime } from '@razorpay/blade/utils'; | ||
|
|
||
| const ExampleDiv = styled.div` | ||
| height: 50px; | ||
| width: 50px; | ||
| border-radius: 25px; | ||
| background-color: ${(props) => props.theme.colors.brand.primary[500]}; | ||
| animation: ${(props) => | ||
| `resize ${makeMotionTime(props.theme.motion.duration.xgentle)} ${ | ||
| props.theme.motion.easing.standard.effective | ||
| } infinite`}; | ||
| @keyframes resize { | ||
| 0% { | ||
| transform: scale(1); | ||
| } | ||
| 50% { | ||
| transform: scale(1.5); | ||
| } | ||
| 100% { | ||
| transform: scale(1); | ||
| } | ||
| } | ||
| `; | ||
| ``` | ||
|
|
||
| 4. You can also access your motion tokens using the `useTheme` hook | ||
|
|
||
| ```jsx | ||
| import { useTheme } from '@razorpay/blade/components'; | ||
| import { makeMotionTime } from '@razorpay/blade/utils'; | ||
|
|
||
| const CustomComponent = () => { | ||
| const { theme } = useTheme(); | ||
| const easing = theme.motion.easing.standard.effective; | ||
| const duration = makeMotionTime(theme.motion.duration.xgentle); | ||
| const delay = makeMotionTime(theme.motion.delay.short); | ||
|
|
||
| return ( | ||
| ... | ||
| ); | ||
| }; | ||
| ``` | ||
|
|
||
| > Note: `makeMotionTime` is a helper function that converts `duration` & `delay` to a platform specific unit for web & native. You should always use this helper function while consuming `duration` & `delay` tokens | ||
| ### Output: | ||
|
|
||
| <br /> | ||
| <MotionExample /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 change: 1 addition & 0 deletions
1
packages/blade/src/components/BladeProvider/__tests__/paymentLightTheme/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default } from './paymentLightTheme'; |
2 changes: 2 additions & 0 deletions
2
...ges/blade/src/components/BladeProvider/__tests__/paymentLightTheme/paymentLightTheme.d.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| // @TODO: figure out if we can just declare types from here and then export it. So this way we don't have to do this dirty `.web` thing | ||
| export { default } from './paymentLightTheme.web'; |
31 changes: 31 additions & 0 deletions
31
...lade/src/components/BladeProvider/__tests__/paymentLightTheme/paymentLightTheme.native.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import { Easing } from 'react-native-reanimated'; | ||
|
|
||
| import type { Theme } from '../../'; | ||
| import paymentLightThemeWeb from './paymentLightTheme.web'; | ||
|
|
||
| const paymentLightTheme: Theme = { | ||
| ...paymentLightThemeWeb, | ||
| motion: { | ||
| ...paymentLightThemeWeb.motion, | ||
| easing: { | ||
| standard: { | ||
| attentive: Easing.bezier(0.5, 0, 0.3, 1.5), | ||
| effective: Easing.bezier(0.3, 0, 0.2, 1), | ||
| revealing: Easing.bezier(0.5, 0, 0, 1), | ||
| wary: Easing.bezier(1, 0.5, 0, 0.5), | ||
| }, | ||
| entrance: { | ||
| attentive: Easing.bezier(0.5, 0, 0.3, 1.5), | ||
| effective: Easing.bezier(0, 0, 0.2, 1), | ||
| revealing: Easing.bezier(0, 0, 0, 1), | ||
| }, | ||
| exit: { | ||
| attentive: Easing.bezier(0.7, 0, 0.5, 1), | ||
| effective: Easing.bezier(0.17, 0, 1, 1), | ||
| revealing: Easing.bezier(0.5, 0, 1, 1), | ||
| }, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export default paymentLightTheme; |
Oops, something went wrong.