Create custom flow UI

stories/pages/CommunicationMethodsPage.stories.js

@@ -1,20 +1,20 @@
-import { CardsScreen } from "../../app/create/screens/card/CardsScreen";
+import { CommunicationMethodsScreen } from "../../app/create/screens/card/CommunicationMethodsScreen";
 
 export default {
-  title: "Pages/Create Flow/Cards",
-  component: CardsScreen,
+  title: "Pages/Create Flow/Communication methods",
+  component: CommunicationMethodsScreen,
   parameters: {
     layout: "fullscreen",
     docs: {
       description: {
         component:
-          "Communication / card selection step with modals and responsive layout.",
+          "Communication methods step (`/create/communication-methods`): card stack, modals, responsive layout.",
       },
     },
   },
   decorators: [
     (Story) => (
-      <div className="min-h-screen bg-black flex items-center justify-center">
+      <div className="flex min-h-screen items-center justify-center bg-black">
         <Story />
       </div>
     ),

stories/progress/ProportionBar.stories.js

@@ -31,6 +31,7 @@ export default {
         "2-0",
         "2-1",
         "2-2",
+        "2-3",
         "3-0",
         "3-1",
         "3-2",
@@ -86,6 +87,7 @@ export const AllStates = {
       <ProportionBar {..._args} progress="2-0" />
       <ProportionBar {..._args} progress="2-1" />
       <ProportionBar {..._args} progress="2-2" />
+      <ProportionBar {..._args} progress="2-3" />
       <ProportionBar {..._args} progress="3-0" />
       <ProportionBar {..._args} progress="3-1" />
       <ProportionBar {..._args} progress="3-2" />