[WEB-3841] 14.6.0 - PricingCards component #486
Conversation
|
Warning Rate limit exceeded@jamiehenson has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 10 minutes and 8 seconds before requesting another review. How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. WalkthroughThe changes encompass updates across multiple files, focusing on enhancing the Storybook configuration, introducing a new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Storybook
participant FeaturedLink
participant PricingCards
User->>Storybook: View Story
Storybook->>FeaturedLink: Load Icons
FeaturedLink->>Storybook: Render with Icons
Storybook->>User: Display Story
User->>PricingCards: View Pricing
PricingCards->>PricingData: Fetch Pricing Data
PricingCards->>User: Display Pricing Options
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
| }, | ||
| }; | ||
|
|
||
| export const PlansDarkMode = { |
There was a problem hiding this comment.
It would be ace if I could leverage Storybook's dark mode plugin to change this in the manager instead of defining things twice, but I can't twist it into doing that
|
|
||
| type PricingCardsProps = { | ||
| data: PricingDataFeature[]; | ||
| theme?: Theme; |
There was a problem hiding this comment.
In time, this will be set further up in a context and accessed within the component instead of having to drill it in here
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
Outside diff range and nitpick comments (1)
src/core/Pricing/data.tsx (1)
151-151: Standardize Data Types for 'price.amount'In line 151,
price.amountis set to"Custom", a string, whereas in other instances,price.amountis a number (e.g.,0,29,399). Mixing data types can lead to potential issues and more complex handling in the component logic. Consider standardizingprice.amountto always be a number, and introduce a separate field for display purposes if needed.You could adjust the data structure like this:
-price: { amount: "Custom" }, +price: { amount: null, display: "Custom" },And update the component logic to handle the
displayfield.
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (5)
src/core/FeaturedLink/__snapshots__/FeaturedLink.stories.tsx.snapis excluded by!**/*.snapsrc/core/Meganav/__snapshots__/Meganav.stories.tsx.snapis excluded by!**/*.snapsrc/core/Pricing/__snapshots__/PricingCards.stories.tsx.snapis excluded by!**/*.snapsrc/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snapis excluded by!**/*.snapyarn.lockis excluded by!**/yarn.lock,!**/*.lock
Files selected for processing (11)
- .storybook/preview.tsx (2 hunks)
- package.json (1 hunks)
- src/core/FeaturedLink.tsx (3 hunks)
- src/core/Icon.tsx (1 hunks)
- src/core/Pricing/PricingCards.stories.tsx (1 hunks)
- src/core/Pricing/PricingCards.tsx (1 hunks)
- src/core/Pricing/data.tsx (1 hunks)
- src/core/Pricing/types.ts (1 hunks)
- src/core/styles/colors/types.ts (1 hunks)
- src/core/styles/colors/utils.ts (1 hunks)
- tailwind.config.js (4 hunks)
Files skipped from review due to trivial changes (1)
- src/core/FeaturedLink.tsx
Additional context used
Biome
src/core/Pricing/PricingCards.tsx
[error] 75-75: isNaN is unsafe. It attempts a type coercion. Use Number.isNaN instead.
See the MDN documentation for more details.
Unsafe fix: Use Number.isNaN instead.(lint/suspicious/noGlobalIsNan)
Additional comments not posted (5)
src/core/Icon.tsx (1)
5-5: Refactored to use shared utility function for color conversionThe local
convertTailwindClassToVarfunction has been replaced with an import from./styles/colors/utils. This promotes code reuse and improves maintainability.package.json (1)
30-30: Add '@tailwindcss/container-queries' DependencyThe addition of '@tailwindcss/container-queries' version '^0.1.1' enhances styling capabilities by enabling container queries in Tailwind CSS, allowing for more responsive and adaptive designs.
tailwind.config.js (3)
60-60: Addition of 'neutral-000' in ColorsAdding
'neutral-000'to the color palette enhances the theme and ensures consistent styling across components that require this specific shade.
298-301: Extending 'borderRadius' ConfigurationsDefining
borderRadiusvalues underextendis appropriate. However, ensure that you are not overriding or removing existing default TailwindborderRadiusvalues unintentionally. This ensures that any components relying on the default values remain unaffected.If you intend to keep the default values, you may want to merge them with your custom values:
extend: { borderRadius: { ...theme('borderRadius'), md: '0.1875rem', DEFAULT: '0.375rem', }, },
353-353: Include '@tailwindcss/container-queries' PluginIncluding the
@tailwindcss/container-queriesplugin enhances responsive design capabilities, allowing styles to adapt based on the container size rather than the viewport. This aligns with modern responsive design practices.
| delimiter, | ||
| }: PricingCardsProps) => { | ||
| // work out a dynamic theme colouring, using dark theme colouring as the base | ||
| const t = (color: ColorClass) => determineThemeColor("dark", theme, color); |
There was a problem hiding this comment.
Any colour class supplied to t will be flipped across the palette if the theme isn't the base theme - in this case, "dark"
There was a problem hiding this comment.
Actionable comments posted: 2
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (3)
- src/core/Pricing/PricingCards.stories.tsx (1 hunks)
- src/core/Pricing/PricingCards.tsx (1 hunks)
- src/core/styles/colors/utils.ts (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- src/core/styles/colors/utils.ts
Additional context used
GitHub Check: ESLint
src/core/Pricing/PricingCards.stories.tsx
[failure] 19-19: src/core/Pricing/PricingCards.stories.tsx#L19
'data' is missing in props validation (react/prop-types)
[failure] 19-19: src/core/Pricing/PricingCards.stories.tsx#L19
'theme' is missing in props validation (react/prop-types)
[failure] 19-19: src/core/Pricing/PricingCards.stories.tsx#L19
'delimiter' is missing in props validation (react/prop-types)src/core/Pricing/PricingCards.tsx
[failure] 45-45: src/core/Pricing/PricingCards.tsx#L45
Missing "key" prop for element in iterator (react/jsx-key)
Biome
src/core/Pricing/PricingCards.tsx
[error] 45-45: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
jamiehenson
force-pushed
the
14.6.0-pricing-stuff
branch
2 times, most recently
from
9153c41 to
d46831a
Compare
jamiehenson
force-pushed
the
14.6.0-pricing-stuff
branch
from
d46831a to
b314d30
Compare
There was a problem hiding this comment.
Really looks good! just few questions
- In mobile the featured link should they be visible all the time and not by just hover?
- In the design the gap between these texts is like 4px which seems not the same as in the storybook
So far that all I can see from design perspective
jamiehenson
force-pushed
the
14.6.0-pricing-stuff
branch
from
b314d30 to
0c8a3ea
Compare
|
Good catches, thanks @aralovelace. Ready for re-review |
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
jamiehenson
force-pushed
the
14.6.0-pricing-stuff
branch
from
0c8a3ea to
82b8019
Compare
Summary of changes
This PR adds the
PricingCardscomponent, which forms the basis of a couple of components on the Pricing page - it is being packaged as a part ofably-uias it is also needed for a dashboard page onwebsite, as well as the Pricing page onvoltaire.A Storybook link to this component is available here.
Additionally in this PR are the following things:
determineThemeColor, you can supply a reference theme, the active theme, and a color, and it will give you the correct colour for those conditions automatically without having to define two themesColorClasstypings to include hover and focus state variants of colour classes, as well as gradient classesHow do you manually test this?
Use the Storybook link, or pull down and have a look yourself.
Reviewer Tasks (optional)
Merge/Deploy Checklist
Frontend Checklist
Summary by CodeRabbit
Release Notes
New Features
PricingCardscomponent for displaying dynamic pricing options.Enhancements
Bug Fixes
iconColorprop for more flexible usage in theFeaturedLinkcomponent.Documentation
PricingCardsto enhance developer usability.