Skip to content

Commit

Permalink
Add progress component (#514)
Browse files Browse the repository at this point in the history
  • Loading branch information
micheal-parks committed Apr 24, 2024
1 parent 72fccc1 commit ae57665
Show file tree
Hide file tree
Showing 9 changed files with 105 additions and 37 deletions.
2 changes: 1 addition & 1 deletion packages/core/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@viamrobotics/prime-core",
"version": "0.0.113",
"version": "0.0.114",
"publishConfig": {
"access": "public"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/lib/button/button.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ For user triggered actions.
import cx from 'classnames';
import { Icon, type IconName } from '$lib';
import { preventHandler } from '$lib/prevent-handler';
import Progress from './progress.svelte';
import Progress from '../progress/progress.svelte';
/** Whether or not the button accepts clicks. */
export let disabled = false;
Expand Down
35 changes: 0 additions & 35 deletions packages/core/src/lib/button/progress.svelte

This file was deleted.

1 change: 1 addition & 0 deletions packages/core/src/lib/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ export { preventHandler, preventKeyboardHandler } from './prevent-handler';

export * from './select';

export { default as Progress } from './progress/progress.svelte';
export { default as Switch } from './switch.svelte';
export { default as Radio } from './radio.svelte';
export { default as Table, type TableVariant } from './table/table.svelte';
Expand Down
45 changes: 45 additions & 0 deletions packages/core/src/lib/progress/progress.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<script lang="ts">
import cx from 'classnames';
export let size: 'small' | 'medium' | 'large' = 'small';
export let variant: 'dark' | 'light' = 'dark';
</script>

<div
class={cx(
'container -ml-1 flex h-4 w-4 items-center justify-center p-[1.5px]',
{
'': size === 'small',
'scale-[1.125]': size === 'medium',
'scale-[1.5]': size === 'large',
}
)}
>
{#each { length: 8 } as _, index}
<div
style="
transform: rotate({index * 45}deg);
animation-delay: {index * 100}ms;
"
class="pill absolute -mt-[0.5px] h-px w-[3px] rounded-[1px] {variant ===
'dark'
? 'bg-gray-8'
: 'bg-white'}"
/>
{/each}
</div>

<style>
.pill {
transform-origin: 6.5px 0.5px;
animation: 0.8s linear 0s infinite fadeout;
}
@keyframes fadeout {
0% {
opacity: 1;
}
100% {
opacity: 0.2;
}
}
</style>
6 changes: 6 additions & 0 deletions packages/core/src/routes/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ import {
Modal,
CodeSnippet,
RangeInput,
Progress,
} from '$lib';
import { uniqueId } from 'lodash-es';
Expand Down Expand Up @@ -519,6 +520,11 @@ const onHoverDelayMsInput = (event: Event) => {
<h1 class="text-2xl">Breadcrumbs</h1>
<Breadcrumbs crumbs={['Chocolate Chip', 'Oatmeal Raisin']} />

<!-- Progress -->
<Progress size="small" />
<Progress size="medium" />
<Progress size="large" />

<!-- Button -->
<h1 class="text-2xl">Button</h1>

Expand Down
1 change: 1 addition & 0 deletions packages/storybook/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"check-lint": "pnpm run _prettier --check && pnpm run _eslint",
"format": "pnpm run _prettier --write",
"storybook": "storybook dev -p 6006",
"dev": "storybook dev -p 6006",
"build": "storybook build --docs -o prime",
"_prettier": "prettier \"**/*.{js,cjs,ts,svelte,css,json,yml,yaml,md,mdx}\"",
"_eslint": "eslint \".*.cjs\" \"**/*.{js,cjs,ts,svelte}\""
Expand Down
26 changes: 26 additions & 0 deletions packages/storybook/src/stories/progress.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import * as ProgressStories from './progress.stories.svelte';

<Meta title='Elements/Progress' />

# Progress

```ts
import { Progress } from '@viamrobotics/prime-core';
```

<Canvas>
<Story of={ProgressStories.Default} />
</Canvas>

<Canvas>
<Story of={ProgressStories.Light} />
</Canvas>

<Canvas>
<Story of={ProgressStories.Medium} />
</Canvas>

<Canvas>
<Story of={ProgressStories.Large} />
</Canvas>
24 changes: 24 additions & 0 deletions packages/storybook/src/stories/progress.stories.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<script lang="ts">
import { Meta, Story } from '@storybook/addon-svelte-csf';
import { Progress } from '@viamrobotics/prime-core';
</script>

<Meta title="Elements/Progress" />

<Story name="Default">
<Progress />
</Story>

<Story name="Light">
<div class="-m-10 bg-gray-9 p-10">
<Progress variant="light" />
</div>
</Story>

<Story name="Medium">
<Progress size="medium" />
</Story>

<Story name="Large">
<Progress size="large" />
</Story>

0 comments on commit ae57665

Please sign in to comment.