Merge pull request #443 from omnifed/440-feat-make-progressbar-recipe

440 feat make progressbar recipe

docs/app/data/categories.json

@@ -7,7 +7,7 @@
   "communication": {
     "name": "Communication",
     "description": "Communication components provide useful information.",
-    "items": ["Notification", "Tag", "Tooltip"]
+    "items": ["Notification", "Progress Bar", "Tag", "Tooltip"]
   },
   "containment": {
     "name": "Containment",

docs/app/preset/utilities/doc.mdx

@@ -15,4 +15,4 @@ If you need to support multiple languages, we recommend using the `mxi` and `pxi
 | ------------------  | ------------------------- |
 | `mxi`               | x-axis margin shorthand - used to set inline margin at the start and end of an element. |
 | `pxi`          | x-axis padding shorthand - used to set inline padding at the start and end of an element. |
-| `cerbGradient`          | Custom gradient - either `purple`, `green`, or `blue` |
+| `cerbGradient`          | Custom gradient - either `purple`, 'purple-100', `green`, or `blue` |

docs/app/react/progress-bar/a11y.mdx

@@ -0,0 +1,18 @@
+---
+---
+
+import {
+  WhenToUseAdmonition
+} from '@/app/components/Admonition'
+import OverviewList from '@/app/components/OverviewList'
+
+## Use Cases
+
+<OverviewList intro="Users should be able to:" rules={[
+  'Navigate to the loading indicator with assistive technology',
+  'Understand what progress the indicator is communicating',
+]} />
+
+## Interaction &amp; Style
+
+The active indicator, which displays progress, provides visual contrast of at least 3:1 against most background colors.

docs/app/react/progress-bar/components/progress-bar-preview.tsx

@@ -0,0 +1,55 @@
+import { Tag } from '@cerberus-design/react'
+import { hstack, vstack } from '@cerberus/styled-system/patterns'
+import {
+  progressBar,
+  type ProgressBarVariantProps,
+} from '@cerberus/styled-system/recipes'
+import type { HtmlHTMLAttributes } from 'react'
+
+type ProgressBarProps = HtmlHTMLAttributes<HTMLDivElement> &
+  ProgressBarVariantProps & {
+    value: number
+  }
+
+function ProgressBar(props: ProgressBarProps) {
+  const styles = progressBar({ size: props.size, usage: props.usage })
+  const width = {
+    width: `${props.value}%`,
+  }
+
+  return (
+    <div className={styles.root}>
+      <div className={styles.bar} style={width} />
+    </div>
+  )
+}
+
+export function OverviewPreview() {
+  return (
+    <div
+      className={hstack({
+        gap: '10',
+        w: '3/4',
+      })}
+    >
+      <div
+        className={vstack({
+          gap: '4',
+          w: 'full',
+        })}
+      >
+        <ProgressBar size="sm" value={75} />
+        <Tag shape="pill">Rounded</Tag>
+      </div>
+      <div
+        className={vstack({
+          gap: '4',
+          w: 'full',
+        })}
+      >
+        <ProgressBar size="sm" usage="block" value={75} />
+        <Tag shape="pill">Block</Tag>
+      </div>
+    </div>
+  )
+}

docs/app/react/progress-bar/dev.mdx

@@ -0,0 +1,43 @@
+---
+npm: '@cerberus-design/react'
+source: 'components/ProgressBar.tsx'
+recipe: 'slots/progressBar.ts'
+---
+
+import CodePreview from '@/app/components/CodePreview'
+import {
+  NoteAdmonition
+} from '@/app/components/Admonition'
+import {
+ OverviewPreview
+} from '@/app/react/progress-bar/components/progress-bar-preview'
+
+```tsx
+import { ProgressBar } from '@cerberus-design/react'
+```
+
+## Usage
+
+<CodePreview preview={<OverviewPreview />} />
+
+## Customization
+
+You can customize the table by utilizing the `css` function. For full control, we recommend extending the recipes provided in your panda config.
+
+<CodePreview preview={<OverviewPreview />} />
+
+## API
+
+```ts showLineNumbers=false
+export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
+  size?: 'sm' | 'md'
+  usage?: 'block' | 'rounded'
+}
+
+define function ProgressBar(props: ProgressBarProps): ReactNode
+````
+
+| Name     | Default | Description                                  |
+| -------- | ------- | -------------------------------------------- |
+| size |  `md`  | The size of the progress bar. |
+| usage |  `rounded`  | The style of the progress bar. |

docs/app/react/progress-bar/guidelines.mdx

@@ -0,0 +1,24 @@
+---
+---
+
+import CodePreview from '@/app/components/CodePreview'
+import OverviewList from '@/app/components/OverviewList'
+import {
+  WhenToUseAdmonition,
+  WhenNotToUseAdmonition,
+} from '@/app/components/Admonition'
+import {
+ OverviewPreview
+} from '@/app/react/progress-bar/components/progress-bar-preview'
+
+## Usage
+
+Progress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. They communicate an app's state and indicate available actions, such as whether users can navigate away from the current screen.
+
+Display overall progress of a group rather than the progress of each item in the group.
+
+<CodePreview preview={<OverviewPreview />} />
+
+<WhenToUseAdmonition description="To communicate overall progress of a group." />
+
+<WhenNotToUseAdmonition description="To communicate individual progress within a group." />

docs/app/react/progress-bar/overview.mdx

@@ -0,0 +1,28 @@
+---
+heading: 'Progress Bar'
+description: 'Progress bars show the status of a process in real time.'
+a11y: 'forms'
+---
+
+import CodePreview from '@/app/components/CodePreview'
+import OverviewList from '@/app/components/OverviewList'
+import {
+ OverviewPreview
+} from '@/app/react/progress-bar/components/progress-bar-preview'
+
+<OverviewList rules={[
+  'Two styles: block and rounded',
+  'Use the same configuration for all instances of a process (like loading)',
+  'Never use them as decoration',
+  'They capture attention through motion',
+]} />
+
+## Example
+
+<CodePreview preview={<OverviewPreview />} />
+
+## Resources
+
+| Name     | Resource | Status                                               |
+| -------- | -------- | ---------------------------------------------------- |
+| Figma    | [Design Kit (Figma)](https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?m=auto&node-id=0-1)      |                         Private                      |

docs/app/react/progress-bar/page.tsx

@@ -0,0 +1,54 @@
+import ApiLinks from '@/app/components/ApiLinks'
+import {
+  TabPageContent,
+  TabPageContentLayout,
+} from '../../components/PageLayout'
+import FeatureHeader from '@/app/components/FeatureHeader'
+import type { MatchFeatureKind } from '@/app/components/MatchFeatureImg'
+import PageTabs from '@/app/components/PageTabs'
+
+import Overview, { frontmatter } from './overview.mdx'
+import Guidelines from './guidelines.mdx'
+import Dev, { frontmatter as devFrontmatter } from './dev.mdx'
+import A11y from './a11y.mdx'
+
+export default function ProgressBarPage() {
+  return (
+    <>
+      <TabPageContent>
+        <FeatureHeader
+          heading={frontmatter.heading}
+          description={frontmatter.description}
+          a11y={frontmatter.a11y as MatchFeatureKind}
+        />
+
+        <PageTabs
+          description="Tabs component details"
+          overview={
+            <TabPageContentLayout>
+              <Overview />
+            </TabPageContentLayout>
+          }
+          guidelines={
+            <TabPageContentLayout>
+              <Guidelines />
+            </TabPageContentLayout>
+          }
+          dev={
+            <TabPageContentLayout>
+              <main>
+                <ApiLinks {...devFrontmatter} />
+                <Dev />
+              </main>
+            </TabPageContentLayout>
+          }
+          a11y={
+            <TabPageContentLayout>
+              <A11y />
+            </TabPageContentLayout>
+          }
+        />
+      </TabPageContent>
+    </>
+  )
+}

docs/app/react/side-nav.json

@@ -35,6 +35,12 @@
     "tag": "new",
     "type": "route"
   },
+  {
+    "label": "Progress Bar",
+    "route": "/react/progress-bar",
+    "tag": "next",
+    "type": "route"
+  },
   {
     "label": "Tag",
     "route": "/react/tags",

packages/panda-preset/src/recipes/index.ts

@@ -13,6 +13,7 @@ import { fileUploader } from './slots/fileUploader'
 import { input } from './slots/input'
 import { modal } from './slots/modal'
 import { notification } from './slots/notification'
+import { progressBar } from './slots/progressBar'
 import { radio } from './slots/radio'
 import { select } from './slots/select'
 import { table } from './slots/table'
@@ -40,8 +41,9 @@ export const recipes = {
 export const slotRecipes = {
   fileUploader,
   input,
-  notification,
   modal,
+  notification,
+  progressBar,
   radio,
   select,
   table,

packages/panda-preset/src/recipes/slots/progressBar.ts

@@ -0,0 +1,76 @@
+import { defineSlotRecipe, type SlotRecipeConfig } from '@pandacss/dev'
+
+/**
+ * This module contains the progressBar recipe.
+ * @module
+ */
+
+/**
+ * Styles for the ProgressBar component
+ * @definition [ProgressBar docs](https://cerberus.digitalu.design/react/progress-bar)
+ */
+export const progressBar: Partial<SlotRecipeConfig> = defineSlotRecipe({
+  className: 'progressBar',
+  slots: ['root', 'bar'],
+
+  base: {
+    root: {
+      bgColor: 'page.bg.100',
+      position: 'relative',
+      w: 'full',
+    },
+    bar: {
+      cerbGradient: 'purple-100',
+      h: 'full',
+      left: 0,
+      position: 'absolute',
+      top: 0,
+      willChange: 'width',
+      zIndex: 'decorator',
+      _motionSafe: {
+        transitionProperty: 'width',
+        transitionDuration: '150ms',
+        transitionTimingFunction: 'ease',
+        _indeterminate: {},
+      },
+    },
+  },
+
+  variants: {
+    size: {
+      sm: {
+        root: {
+          h: '0.75rem',
+        },
+      },
+      md: {
+        root: {
+          h: '1.5rem',
+        },
+      },
+    },
+    usage: {
+      block: {
+        root: {
+          rounded: 'initial',
+        },
+        bar: {
+          rounded: 'initial',
+        },
+      },
+      rounded: {
+        root: {
+          rounded: '1.5rem',
+        },
+        bar: {
+          rounded: '1.5rem',
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+    usage: 'rounded',
+  },
+})

packages/panda-preset/src/utilities.ts

@@ -33,9 +33,9 @@ const pxi: CustomUtilityConfig<'pxi'> = {
 const cerberusGradient: CustomUtilityConfig<'cerberusGradient'> = {
   cerberusGradient: {
     className: 'cerberus-gradient',
-    values: ['green', 'blue', 'purple'],
+    values: ['green', 'blue', 'purple', 'purple-100'],
     shorthand: 'cerbGradient',
-    transform(value: 'green' | 'blue' | 'purple') {
+    transform(value: 'green' | 'blue' | 'purple' | 'purple-100') {
       const color = '#21143B'
       switch (value) {
         case 'purple':
@@ -45,6 +45,13 @@ const cerberusGradient: CustomUtilityConfig<'cerberusGradient'> = {
               'linear-gradient(to bottom left, #EFE5F8, #BB93E1)',
           }
 
+        case 'purple-100':
+          return {
+            color,
+            backgroundImage:
+              'linear-gradient(234deg, #5F00B5 -1.22%, #9F66D3 79.15%)',
+          }
+
         case 'blue':
           return {
             color,