fix: pr feedback and examples improvements

twilio-labs · Jun 26, 2023 · 6d84c3e · 6d84c3e
1 parent 24a3a50
commit 6d84c3e
Show file tree

Hide file tree

Showing 12 changed files with 187 additions and 74 deletions.
diff --git a/internal-docs/engineering/developer-workflow.md b/internal-docs/engineering/developer-workflow.md
@@ -30,7 +30,7 @@ All our work is stored in Jira and we have an [active sprint](https://issues.cor
 
 We work in 2 week sprints.
 
-Pick a ticket that you feel comfortable working on, assign it to yourself to let others know you’re working on it, and pull it into the “In Progress” column. Try to limit in-progress tickets to 1 or 2 at a time.
+Pick a ticket that you feel comfortable working on, assign it to yourself to let others know you’re working on it, and pull it into the “In-progress” column. Try to limit in-progress tickets to 1 or 2 at a time.
 
 ## Branching
 

diff --git a/packages/paste-core/components/status/src/constants.tsx b/packages/paste-core/components/status/src/constants.tsx
@@ -38,7 +38,7 @@ export const StatusObject: StatusBadges = {
   ProcessInProgress: {
     badgeVariant: 'default',
     icon: (
-      <ProcessInProgressIcon color="colorTextIconNeutral" decorative={false} size="sizeIcon10" title="In progress" />
+      <ProcessInProgressIcon color="colorTextIconNeutral" decorative={false} size="sizeIcon10" title="In-progress" />
     ),
     color: 'colorTextNeutral',
   },

diff --git a/packages/paste-core/components/status/stories/StatusMenu.stories.tsx b/packages/paste-core/components/status/stories/StatusMenu.stories.tsx
@@ -40,7 +40,7 @@ const ProcessStatusMenu: React.FC<React.PropsWithChildren<{variant: StatusMenuBa
           <StatusMenuItemChild variant="ProcessError">Error</StatusMenuItemChild>
         </StatusMenuItem>
         <StatusMenuItem {...menu} onClick={onClick} variant="default">
-          <StatusMenuItemChild variant="ProcessInProgress">In progress</StatusMenuItemChild>
+          <StatusMenuItemChild variant="ProcessInProgress">In-progress</StatusMenuItemChild>
         </StatusMenuItem>
         <StatusMenuItem {...menu} onClick={onClick} variant="default">
           <StatusMenuItemChild variant="ProcessDisabled">Disabled</StatusMenuItemChild>
@@ -201,7 +201,7 @@ const ProcessObject = {
   },
   InProgress: {
     variant: 'ProcessInProgress',
-    children: 'In progress',
+    children: 'In-progress',
   },
   Disabled: {
     variant: 'ProcessDisabled',
@@ -315,7 +315,7 @@ export const Process: StoryFn = () => (
     <ProcessStatusMenu variant="ProcessWarning">Warning</ProcessStatusMenu>
     <ProcessStatusMenu variant="ProcessSuccess">Success</ProcessStatusMenu>
     <ProcessStatusMenu variant="ProcessNeutral">Neutral</ProcessStatusMenu>
-    <ProcessStatusMenu variant="ProcessInProgress">In Progress</ProcessStatusMenu>
+    <ProcessStatusMenu variant="ProcessInProgress">In-progress</ProcessStatusMenu>
     <ProcessStatusMenu variant="ProcessDisabled">Disabled</ProcessStatusMenu>
     <ProcessStatusMenu variant="ProcessDraft">Draft</ProcessStatusMenu>
   </Stack>

diff --git a/packages/paste-website/src/component-examples/DescriptionListExamples.ts b/packages/paste-website/src/component-examples/DescriptionListExamples.ts
@@ -53,8 +53,8 @@ const DescriptionListExample = () => {
             <ProcessInProgressIcon
               color="colorTextIconNeutral"
               decorative={false}
-              title="in progress" />
-            <Text as="span" marginLeft="space20">In progress</Text>
+              title="In-progress" />
+            <Text as="span" marginLeft="space20">In-progress</Text>
           </Box>
         </DescriptionListDetails>
       </DescriptionListSet>

diff --git a/packages/paste-website/src/component-examples/StatusMenuExamples.ts b/packages/paste-website/src/component-examples/StatusMenuExamples.ts
@@ -17,7 +17,7 @@ export const ProcessObject = {
   },
   InProgress: {
     variant: 'ProcessInProgress',
-    children: 'In progress',
+    children: 'In-progress',
   },
   Disabled: {
     variant: 'ProcessDisabled',
@@ -27,7 +27,7 @@ export const ProcessObject = {
     variant: 'ProcessDraft',
     children: 'Draft',
   },
-};
+} as const;
 export const processStatusMenuExample = `
 const ProcessStatusMenu = () => {
   const [process, setProcess] = React.useState(ProcessObject.Success);
@@ -42,28 +42,77 @@ const ProcessStatusMenu = () => {
         {process.children}
       </StatusMenuBadge>
       <StatusMenu {...menu} aria-label="Preferences">
-        <StatusMenuItem {...menu} onClick={() => onClick('Success')} variant="default">
-          <StatusMenuItemChild variant="ProcessSuccess">Complete</StatusMenuItemChild>
-        </StatusMenuItem>
-        <StatusMenuItem {...menu} onClick={() => onClick('Neutral')} variant="default">
-          <StatusMenuItemChild variant="ProcessNeutral">In review</StatusMenuItemChild>
-        </StatusMenuItem>
-        <StatusMenuItem {...menu} onClick={() => onClick('Warning')} variant="default">
-          <StatusMenuItemChild variant="ProcessWarning">Needs attention</StatusMenuItemChild>
-        </StatusMenuItem>
-        <StatusMenuItem {...menu} onClick={() => onClick('Error')} variant="default">
-          <StatusMenuItemChild variant="ProcessError">Rejected</StatusMenuItemChild>
-        </StatusMenuItem>
-        <StatusMenuItem {...menu} onClick={() => onClick('InProgress')} variant="default">
-          <StatusMenuItemChild variant="ProcessInProgress">In progress</StatusMenuItemChild>
-        </StatusMenuItem>
-        <StatusMenuItem {...menu} onClick={() => onClick('Disabled')} variant="default">
-          <StatusMenuItemChild variant="ProcessDisabled">Paused</StatusMenuItemChild>
-        </StatusMenuItem>
-        <StatusMenuItem {...menu} onClick={() => onClick('Draft')} variant="default">
-          <StatusMenuItemChild variant="ProcessDraft">Draft</StatusMenuItemChild>
-        </StatusMenuItem>
-      </Menu>
+        <StatusMenuItemRadio
+          {...menu}
+          name="process"
+          value="success"
+          checked={process.children === ProcessObject.Success.children}
+          onClick={() => onClick('Success')}
+          variant="default"
+        >
+          <StatusMenuItemChild variant="ProcessSuccess">{ProcessObject.Success.children}</StatusMenuItemChild>
+        </StatusMenuItemRadio>
+        <StatusMenuItemRadio
+          {...menu}
+          name="process"
+          value="neutral"
+          checked={process.children === ProcessObject.Neutral.children}
+          onClick={() => onClick('Neutral')}
+          variant="default"
+        >
+          <StatusMenuItemChild variant="ProcessNeutral">{ProcessObject.Neutral.children}</StatusMenuItemChild>
+        </StatusMenuItemRadio>
+        <StatusMenuItemRadio
+          {...menu}
+          name="process"
+          value="warning"
+          checked={process.children === ProcessObject.Warning.children}
+          onClick={() => onClick('Warning')}
+          variant="default"
+        >
+          <StatusMenuItemChild variant="ProcessWarning">{ProcessObject.Warning.children}</StatusMenuItemChild>
+        </StatusMenuItemRadio>
+        <StatusMenuItemRadio
+          {...menu}
+          name="process"
+          value="error"
+          checked={process.children === ProcessObject.Error.children}
+          onClick={() => onClick('Error')}
+          variant="default"
+        >
+          <StatusMenuItemChild variant="ProcessError">{ProcessObject.Error.children}</StatusMenuItemChild>
+        </StatusMenuItemRadio>
+        <StatusMenuItemRadio
+          {...menu}
+          name="process"
+          value="InProgress"
+          checked={process.children === ProcessObject.InProgress.children}
+          onClick={() => onClick('InProgress')}
+          variant="default"
+        >
+          <StatusMenuItemChild variant="ProcessInProgress">{ProcessObject.InProgress.children}</StatusMenuItemChild>
+        </StatusMenuItemRadio>
+        <StatusMenuItemRadio
+          {...menu}
+          name="process"
+          value="disabled"
+          checked={process.children === ProcessObject.Disabled.children}
+          onClick={() => onClick('Disabled')}
+          variant="default"
+        >
+          <StatusMenuItemChild variant="ProcessDisabled">{ProcessObject.Disabled.children}</StatusMenuItemChild>
+        </StatusMenuItemRadio>
+        <StatusMenuItemRadio
+          {...menu}
+          name="process"
+          value="draft"
+          checked={process.children === ProcessObject.Draft.children}
+          onClick={() => onClick('Draft')}
+          variant="default"
+        >
+          <StatusMenuItemChild variant="ProcessDraft">{ProcessObject.Draft.children}</StatusMenuItemChild>
+        </StatusMenuItemRadio>
+      </StatusMenu>
     </>
   );
 };

diff --git a/packages/paste-website/src/component-examples/StatusPatternExamples.tsx b/packages/paste-website/src/component-examples/StatusPatternExamples.tsx
@@ -34,7 +34,7 @@ export const ProcessNeutral = (): JSX.Element => {
 };
 
 export const ProcessInProgress = (): JSX.Element => {
-  return <ProcessInProgressIcon color="colorTextIconNeutral" decorative={false} title="In Progress" />;
+  return <ProcessInProgressIcon color="colorTextIconNeutral" decorative={false} title="In-progress" />;
 };
 
 export const ProcessDisabled = (): JSX.Element => {
@@ -103,8 +103,8 @@ export const processStatusExamples = `
     <ProcessInProgressIcon
       color="colorTextIconNeutral"
       decorative={false}
-      title="in progress" />
-    <Text marginLeft="space20">In Progress</Text>
+      title="In-progress" />
+    <Text marginLeft="space20">In-progress</Text>
   </Box>
   <Box display="flex">
     <ProcessDisabledIcon

diff --git a/packages/paste-website/src/components/Roadmap/constants.ts b/packages/paste-website/src/components/Roadmap/constants.ts
@@ -1,6 +1,6 @@
 export const Statuses = {
   TODO: 'To do',
-  IN_PROGRESS: 'In progress',
+  IN_PROGRESS: 'In-progress',
   COMPLETE: 'Complete',
   AT_RISK: 'At risk',
 } as const;