-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Activation panel 3000 (#18452)
- Loading branch information
1 parent
b52ed5c
commit 2d4f26b
Showing
14 changed files
with
272 additions
and
11 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+553 Bytes
frontend/__snapshots__/lemon-ui-lemon-progress-circle--template.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
58 changes: 58 additions & 0 deletions
58
frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelActivation.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import { useValues } from 'kea' | ||
| import { ActivationTask } from 'lib/components/ActivationSidebar/ActivationSidebar' | ||
| import { ActivationTaskType, activationLogic } from 'lib/components/ActivationSidebar/activationLogic' | ||
| import { ProfessorHog } from 'lib/components/hedgehogs' | ||
| import { LemonProgressCircle } from 'lib/lemon-ui/LemonProgressCircle' | ||
| import { LemonIconProps } from 'lib/lemon-ui/icons' | ||
|
|
||
| export const SidePanelActivation = (): JSX.Element => { | ||
| const { activeTasks, completionPercent, completedTasks } = useValues(activationLogic) | ||
|
|
||
| return ( | ||
| <div className="p-4 space-y-2"> | ||
| <h2>Quick Start</h2> | ||
| <p>Use our Quick Start guide to learn about everything PostHog can do for you and your product.</p> | ||
| <div className="flex items-center justify-center"> | ||
| <div className="flex flex-col items-center"> | ||
| <LemonProgressCircle progress={completionPercent / 100} size={100} className="text-primary"> | ||
| <span className="text-2xl">{activeTasks.length}</span> | ||
| </LemonProgressCircle> | ||
| <p className="text-muted mt-2 ">still to go</p> | ||
| </div> | ||
| <div className="h-60"> | ||
| <ProfessorHog className="max-h-full w-auto object-contain" /> | ||
| </div> | ||
| </div> | ||
| {activeTasks.length > 0 && ( | ||
| <div> | ||
| <h4>What's next?</h4> | ||
| <ul className="space-y-2"> | ||
| {activeTasks.map((task: ActivationTaskType) => ( | ||
| <ActivationTask key={task.id} {...task} /> | ||
| ))} | ||
| </ul> | ||
| </div> | ||
| )} | ||
| {completedTasks.length > 0 && ( | ||
| <div> | ||
| <h4>Completed</h4> | ||
| <ul className="space-y-2"> | ||
| {completedTasks.map((task: ActivationTaskType) => ( | ||
| <ActivationTask key={task.id} {...task} /> | ||
| ))} | ||
| </ul> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export const SidePanelActivationIcon = ({ className }: { className: LemonIconProps['className'] }): JSX.Element => { | ||
| const { activeTasks, completionPercent } = useValues(activationLogic) | ||
|
|
||
| return ( | ||
| <LemonProgressCircle progress={completionPercent / 100} size={20} className={className}> | ||
| <span className="text-xs font-bold">{activeTasks.length}</span> | ||
| </LemonProgressCircle> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
23 changes: 23 additions & 0 deletions
23
frontend/src/lib/lemon-ui/LemonProgressCircle/LemonProgressCircle.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| .LemonProgressCircle { | ||
| display: inline-block; | ||
| position: relative; | ||
| vertical-align: text-bottom; | ||
|
|
||
| circle { | ||
| transition: stroke-dashoffset 0.35s; | ||
| transform: rotate(-90deg); | ||
| transform-origin: 50% 50%; | ||
| } | ||
|
|
||
| .LemonProgressCircle__content { | ||
| position: absolute; | ||
| inset: 0; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .LemonButton__icon & { | ||
| display: inline-flex; | ||
| } | ||
| } |
104 changes: 104 additions & 0 deletions
104
frontend/src/lib/lemon-ui/LemonProgressCircle/LemonProgressCircle.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| import { Meta, StoryFn, StoryObj } from '@storybook/react' | ||
| import { LemonProgressCircle, LemonProgressCircleProps } from './LemonProgressCircle' | ||
| import { useEffect, useState } from 'react' | ||
| import { LemonButton } from '../LemonButton' | ||
| import { IconGear } from '@posthog/icons' | ||
| import { LemonCheckbox } from '../LemonCheckbox' | ||
|
|
||
| type Story = StoryObj<typeof LemonProgressCircle> | ||
| const meta: Meta<typeof LemonProgressCircle> = { | ||
| title: 'Lemon UI/Lemon Progress Circle', | ||
| component: LemonProgressCircle, | ||
| parameters: { | ||
| docs: { | ||
| description: { | ||
| component: ` | ||
| [Related Figma area](https://www.figma.com/file/Y9G24U4r04nEjIDGIEGuKI/PostHog-Design-System-One?node-id=3139%3A1388) | ||
| Lemon Labels provide common styling and options for labeling form elements. They can be used directly but most commonly should be used via the \`Field\` component. | ||
| `, | ||
| }, | ||
| }, | ||
| }, | ||
| args: { | ||
| progress: 0.3, | ||
| }, | ||
| tags: ['autodocs'], | ||
| } | ||
| export default meta | ||
|
|
||
| export const Template: StoryFn<typeof LemonProgressCircle> = (props: LemonProgressCircleProps) => { | ||
| return <LemonProgressCircle {...props} /> | ||
| } | ||
|
|
||
| export const Basic: Story = Template.bind({}) | ||
| Basic.args = { | ||
| progress: 0.3, | ||
| } | ||
|
|
||
| export const Overview = (): JSX.Element => { | ||
| const [progress, setProgress] = useState(0.2) | ||
| const [animate, setAnimate] = useState(false) | ||
|
|
||
| useEffect(() => { | ||
| if (!animate) { | ||
| return | ||
| } | ||
| const interval = setInterval(() => { | ||
| setProgress((progress) => { | ||
| const newProgress = progress + 0.1 | ||
| return newProgress > 1 ? newProgress - 1 : newProgress | ||
| }) | ||
| }, 500) | ||
| return () => clearInterval(interval) | ||
| }, [animate]) | ||
|
|
||
| return ( | ||
| <div className="flex flex-col gap-2"> | ||
| <LemonCheckbox checked={animate} onChange={setAnimate} bordered label={'Animate'} /> | ||
| <LemonProgressCircle progress={progress} /> | ||
| <LemonProgressCircle progress={progress} strokePercentage={0.5} size={30} /> | ||
|
|
||
| <span className="flex items-center gap-2"> | ||
| <LemonButton | ||
| icon={<LemonProgressCircle progress={progress} />} | ||
| status="primary" | ||
| sideIcon={<IconGear />} | ||
| type="secondary" | ||
| size="small" | ||
| > | ||
| In a button! | ||
| </LemonButton> | ||
|
|
||
| <LemonButton | ||
| icon={<LemonProgressCircle progress={progress} size={20} />} | ||
| status="primary" | ||
| sideIcon={<IconGear />} | ||
| type="secondary" | ||
| > | ||
| In a button! | ||
| </LemonButton> | ||
|
|
||
| <LemonButton | ||
| icon={<LemonProgressCircle progress={progress} size={24} />} | ||
| status="primary" | ||
| sideIcon={<IconGear />} | ||
| type="secondary" | ||
| size="large" | ||
| > | ||
| In a button! | ||
| </LemonButton> | ||
| </span> | ||
|
|
||
| <LemonProgressCircle progress={progress} size={40}> | ||
| <span className="font-semibold text-sm">{(100 * progress).toFixed(0)}</span> | ||
| </LemonProgressCircle> | ||
|
|
||
| <span> | ||
| Here is one inline <LemonProgressCircle progress={progress} /> with some text... | ||
| </span> | ||
| </div> | ||
| ) | ||
| } |
62 changes: 62 additions & 0 deletions
62
frontend/src/lib/lemon-ui/LemonProgressCircle/LemonProgressCircle.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import clsx from 'clsx' | ||
| import './LemonProgressCircle.scss' | ||
|
|
||
| export type LemonProgressCircleProps = { | ||
| strokePercentage?: number | ||
| backgroundStrokeOpacity?: number | ||
| size?: number | ||
| progress: number | ||
| children?: React.ReactNode | ||
| className?: string | ||
| } | ||
|
|
||
| export const LemonProgressCircle = ({ | ||
| strokePercentage = 0.2, | ||
| backgroundStrokeOpacity = 0.2, | ||
| size = 16, | ||
| progress, | ||
| children, | ||
| className, | ||
| }: LemonProgressCircleProps): JSX.Element => { | ||
| const radius = size / 2 | ||
| const stroke = radius * strokePercentage | ||
| const circumference = size * Math.PI | ||
| const strokeDashoffset = circumference - progress * circumference | ||
|
|
||
| return ( | ||
| <span | ||
| className={clsx('LemonProgressCircle', className)} | ||
| // eslint-disable-next-line react/forbid-dom-props | ||
| style={{ | ||
| height: size, | ||
| width: size, | ||
| }} | ||
| > | ||
| <svg height={size} width={size}> | ||
| <circle | ||
| stroke="currentColor" | ||
| strokeOpacity={backgroundStrokeOpacity} | ||
| fill="transparent" | ||
| strokeWidth={stroke} | ||
| r={radius - stroke / 2} | ||
| cx={radius} | ||
| cy={radius} | ||
| /> | ||
|
|
||
| <circle | ||
| stroke="currentColor" | ||
| fill="transparent" | ||
| strokeWidth={stroke} | ||
| strokeDasharray={circumference + ' ' + circumference} | ||
| // eslint-disable-next-line react/forbid-dom-props | ||
| style={{ strokeDashoffset }} | ||
| r={radius - stroke / 2} | ||
| cx={radius} | ||
| cy={radius} | ||
| /> | ||
| </svg> | ||
|
|
||
| {children ? <span className="LemonProgressCircle__content">{children}</span> : null} | ||
| </span> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './LemonProgressCircle' |