feat: redesign InfoCards component and update schema #414

dcshzj · 2024-08-02T06:29:16Z

Problem

InfoCards component has drifted from the Figma designs.

Solution

Breaking Changes

Yes - this PR contains breaking changes
- This will require schema changes and migrations!
No - this PR is backwards compatible

Improvements:

Redesigned InfoCards component to remove the button label.
Added no image variant of InfoCards.
Updated schema to enforce that all cards have or don't have images.
Also updated JSONForms boolean control to avoid rendering if there is a const present, similar to how we do for type properties.
Added the new InfoCards component to the auto-generated index page.

vercel · 2024-08-02T06:29:19Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
isomer-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 12, 2024 6:10am

harishv7 · 2024-08-02T07:29:13Z

...es/editing-experience/components/form-builder/renderers/controls/JsonFormsBooleanControl.tsx

-}: ControlProps) {
+  schema,
+}: ControlProps): JSX.Element {
+  if (schema.const !== undefined) {


what's schema.const?

schema.const is a JSON Schema construct where the particular property takes in a specific literal (can be string/number/boolean). In this case, if the const is defined (say it's true) then it is not meaningful to show the toggle, since the false` case is invalid.

harishv7 · 2024-08-02T07:31:40Z

apps/studio/src/components/PageEditor/constants.ts

@@ -84,6 +84,7 @@ export const DEFAULT_BLOCKS: Record<
    type: "infocards",
    title: "This is an optional title of the Infocards component",
    subtitle: "This is an optional subtitle for the Infocards component",
+    isCardsWithImages: true,


do you think there can be other states for cards? if so we can use an enum like "WithImages, TextOnly" etc. and is extensible?

Ah good point, this was the original based on designs where there was a toggle button but this has changed to use a dropdown to select the variants. Adjusted in 34dcbfd!

karrui · 2024-08-05T06:28:58Z

apps/studio/prisma/generated/generatedEnums.ts

run formatted on generated stuff pls :P

Rebase removed le

sehyunidaaa · 2024-08-12T02:00:32Z

Updated with styling tweaks. Please re-review!

sehyunidaaa · 2024-08-12T02:02:25Z

packages/components/src/templates/next/components/complex/InfoCards/InfoCards.tsx

+  "imageUrl" | "imageAlt" | "url"
+>): JSX.Element => (
+  <div
+    className={compoundStyles.cardImageContainer({ isClickableCard: !!url })}


@dcshzj I had to pass icClickableCard here as well because the hover effect applies to both InfoCardImage (hover on image) AND cardTitle (color change, arrow moves). Previously group-hover wasn't working on the InfoCardImage. Hope this is not weird in terms of practice though?

Yup this works!

karrui

lgtm if design passes design

...es/editing-experience/components/form-builder/renderers/controls/JsonFormsBooleanControl.tsx

tooling/build/package.json

karrui · 2024-08-12T06:02:45Z

tooling/build/package.json

@@ -11,5 +11,6 @@
  "devDependencies": {
    "@isomer/eslint-config": "*",
    "@isomer/prettier-config": "*"
-  }
+  },
+  "prettier": "@isomer/prettier-config"


need run formatting again since all tooling affected hehehe

Ah okay for some reason it didn't give me anything the first time round, fixed in d2a6419.

karrui · 2024-08-14T05:37:40Z

ISOM-1272

dcshzj requested a review from a team as a code owner August 2, 2024 06:29

dcshzj temporarily deployed to staging August 2, 2024 06:29 — with GitHub Actions Inactive

vercel bot deployed to Preview August 2, 2024 06:34 View deployment

dcshzj temporarily deployed to staging August 2, 2024 06:57 — with GitHub Actions Inactive

vercel bot deployed to Preview August 2, 2024 07:00 View deployment

karrui force-pushed the karrui/isom-1265-iconbutton-new-component branch 2 times, most recently from 92897bd to c50c92a Compare August 2, 2024 07:28

harishv7 reviewed Aug 2, 2024

View reviewed changes

dcshzj force-pushed the feat/redesign-infocards-component branch from c0f9b58 to 1d97a4f Compare August 5, 2024 01:45

dcshzj temporarily deployed to staging August 5, 2024 01:45 — with GitHub Actions Inactive

dcshzj force-pushed the feat/redesign-infocards-component branch from 1d97a4f to 08ffbbc Compare August 5, 2024 01:48

dcshzj temporarily deployed to staging August 5, 2024 01:49 — with GitHub Actions Inactive

vercel bot deployed to Preview August 5, 2024 01:52 View deployment

dcshzj temporarily deployed to staging August 5, 2024 02:29 — with GitHub Actions Inactive

dcshzj requested review from harishv7 and a team August 5, 2024 02:30

vercel bot deployed to Preview August 5, 2024 02:32 View deployment

karrui force-pushed the karrui/isom-1265-iconbutton-new-component branch 3 times, most recently from 910cbe3 to 7fa4c7a Compare August 5, 2024 06:26

karrui reviewed Aug 5, 2024

View reviewed changes

Base automatically changed from karrui/isom-1265-iconbutton-new-component to main August 5, 2024 06:38

dcshzj force-pushed the feat/redesign-infocards-component branch from 34dcbfd to e98e00c Compare August 5, 2024 13:45

sehyunidaaa temporarily deployed to staging August 12, 2024 01:59 — with GitHub Actions Inactive

sehyunidaaa requested a review from karrui August 12, 2024 01:59

sehyunidaaa reviewed Aug 12, 2024

View reviewed changes

vercel bot deployed to Preview August 12, 2024 02:05 View deployment

add transition to image hover

6cc58ce

sehyunidaaa temporarily deployed to staging August 12, 2024 02:19 — with GitHub Actions Inactive

vercel bot deployed to Preview August 12, 2024 02:23 View deployment

karrui approved these changes Aug 12, 2024

View reviewed changes

...es/editing-experience/components/form-builder/renderers/controls/JsonFormsBooleanControl.tsx Outdated Show resolved Hide resolved

tooling/build/package.json Outdated Show resolved Hide resolved

optical adjustment to arrow

c44b32b

sehyunidaaa temporarily deployed to staging August 12, 2024 05:27 — with GitHub Actions Inactive

vercel bot deployed to Preview August 12, 2024 05:31 View deployment

add better homepage stories to illustrate various card types

326e402

sehyunidaaa temporarily deployed to staging August 12, 2024 05:37 — with GitHub Actions Inactive

vercel bot deployed to Preview August 12, 2024 05:43 View deployment

chore: fix issues raised in comments

2e49116

dcshzj temporarily deployed to staging August 12, 2024 05:52 — with GitHub Actions Inactive

vercel bot deployed to Preview August 12, 2024 05:56 View deployment

karrui reviewed Aug 12, 2024

View reviewed changes

chore: run format fix on tooling

d2a6419

dcshzj temporarily deployed to staging August 12, 2024 06:09 — with GitHub Actions Inactive

vercel bot deployed to Preview August 12, 2024 06:10 View deployment

dcshzj merged commit 69e458f into main Aug 12, 2024
17 of 19 checks passed

dcshzj deleted the feat/redesign-infocards-component branch August 12, 2024 08:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: redesign InfoCards component and update schema #414

feat: redesign InfoCards component and update schema #414

dcshzj commented Aug 2, 2024 •

edited

Loading

vercel bot commented Aug 2, 2024 •

edited

Loading

harishv7 Aug 2, 2024

dcshzj Aug 5, 2024

harishv7 Aug 2, 2024

dcshzj Aug 5, 2024

karrui Aug 5, 2024

dcshzj Aug 5, 2024

sehyunidaaa commented Aug 12, 2024

sehyunidaaa Aug 12, 2024

dcshzj Aug 12, 2024

karrui left a comment

karrui Aug 12, 2024

dcshzj Aug 12, 2024

karrui commented Aug 14, 2024

feat: redesign InfoCards component and update schema #414

feat: redesign InfoCards component and update schema #414

Conversation

dcshzj commented Aug 2, 2024 • edited Loading

Problem

Solution

vercel bot commented Aug 2, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sehyunidaaa commented Aug 12, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

karrui left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

karrui commented Aug 14, 2024

dcshzj commented Aug 2, 2024 •

edited

Loading

vercel bot commented Aug 2, 2024 •

edited

Loading