feat: migrate course UI from supabase (#615)
* chore: fix storybook build * chore: implement theming * community list not showing properly * refactor: migrate Chip component to @cio/ui/custom/chip - Updated imports for the Chip component across multiple files to use the new location in the @cio/ui package. - Replaced the previous Chip implementation with a new version that utilizes a Badge for better styling and functionality. - Adjusted related components to ensure consistent usage of the updated Chip component. * fix: align course sidebar design to match organization design (#611) * fix: align course sidebar design to match organization design * feat: add hideSearch prop to AppHeader and update sidebar layout --------- Co-authored-by: Rotimi Best <[email protected]> * refactor: replace PrimaryButton with Button component across multiple files - Updated various components to use the new Button component from @cio/ui/base/button instead of the deprecated PrimaryButton. - Ensured consistent button usage throughout the application for improved styling and functionality. - Removed the PrimaryButton component and its associated constants from the codebase. * refactor: standardize button and input usage across components - Replaced instances of deprecated components such as TextField, TextArea, and IconButton with their updated counterparts (InputField, TextareaField, and updated IconButton). - Ensured consistent event handling by changing `onClick` to `onclick` for better alignment with Svelte's event binding conventions. - Removed unused components and streamlined imports to enhance code maintainability and readability. * chore: themeing, course card, use $features * refactor: centralize UI components and update modal implementations - Refactored various components to centralize UI elements, improving discoverability and maintainability. - Replaced deprecated modal components with the new Dialog component for consistent modal behavior across the application. - Removed unused components and streamlined imports to enhance code clarity and reduce complexity. * feat: add new documentation and refactor org and lms UI components - Introduced new documentation files for Auth Flow, Breadcrumbs Refactoring, Page and Route Creation, and Route Page Setup to enhance developer onboarding and reference. - Refactored various UI components, including the Course Sidebar and Lesson Modal, to improve layout and functionality. - Removed deprecated components and streamlined imports for better maintainability. - Updated translations across multiple languages to ensure consistency in user experience. * refactor: update UI components and improve styling consistency - Refactored various components to enhance styling consistency, including updates to button and text color classes. - Removed deprecated components and streamlined imports for better maintainability. - Replaced instances of PageBody with a more flexible Page component structure across multiple routes. - Updated translations and UI elements to align with the new design system. - Deleted unused components to reduce code complexity and improve clarity. * update output.css --------- Co-authored-by: Abdulmuizz Hamzat <[email protected]>
This commit is contained in:
Rotimi Best
co-authored by
Abdulmuizz Hamzat
Abdulmuizz Hamzat
parent
e6a3cf9332
commit
9fb6c7cbaa
@@ -0,0 +1,2 @@
|
||||
export const FIELDS = ['disabled', 'class', 'type', 'tooltip', 'tooltipSide'] as string[];
|
||||
|
||||
@@ -0,0 +1,114 @@
|
||||
<script module>
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import { IconButton } from '@cio/ui/custom/icon-button';
|
||||
import SettingsIcon from '@lucide/svelte/icons/settings';
|
||||
import HeartIcon from '@lucide/svelte/icons/heart';
|
||||
import TrashIcon from '@lucide/svelte/icons/trash';
|
||||
import EditIcon from '@lucide/svelte/icons/edit';
|
||||
import SaveIcon from '@lucide/svelte/icons/save';
|
||||
import SearchIcon from '@lucide/svelte/icons/search';
|
||||
import { FIELDS } from './fields';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Molecules/IconButton',
|
||||
component: IconButton,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
controls: {
|
||||
include: FIELDS
|
||||
}
|
||||
},
|
||||
tags: ['autodocs']
|
||||
});
|
||||
</script>
|
||||
|
||||
<Story name="Default">
|
||||
{#snippet template()}
|
||||
<IconButton>
|
||||
<SettingsIcon />
|
||||
</IconButton>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="With Tooltip">
|
||||
{#snippet template()}
|
||||
<IconButton tooltip="Settings">
|
||||
<SettingsIcon />
|
||||
</IconButton>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Disabled">
|
||||
{#snippet template()}
|
||||
<IconButton disabled>
|
||||
<SettingsIcon />
|
||||
</IconButton>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Disabled With Tooltip">
|
||||
{#snippet template()}
|
||||
<IconButton tooltip="Settings" disabled>
|
||||
<SettingsIcon />
|
||||
</IconButton>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Multiple Icons">
|
||||
{#snippet template()}
|
||||
<div class="ui:flex ui:items-center ui:gap-4">
|
||||
<IconButton tooltip="Settings">
|
||||
<SettingsIcon />
|
||||
</IconButton>
|
||||
<IconButton tooltip="Like">
|
||||
<HeartIcon />
|
||||
</IconButton>
|
||||
<IconButton tooltip="Delete">
|
||||
<TrashIcon />
|
||||
</IconButton>
|
||||
<IconButton tooltip="Edit">
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
<IconButton tooltip="Save">
|
||||
<SaveIcon />
|
||||
</IconButton>
|
||||
<IconButton tooltip="Search">
|
||||
<SearchIcon />
|
||||
</IconButton>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Tooltip Positions">
|
||||
{#snippet template()}
|
||||
<div class="ui:flex ui:flex-col ui:items-center ui:gap-8 ui:p-8">
|
||||
<IconButton tooltip="Top tooltip" tooltipSide="top">
|
||||
<SettingsIcon />
|
||||
</IconButton>
|
||||
<div class="ui:flex ui:items-center ui:gap-8">
|
||||
<IconButton tooltip="Left tooltip" tooltipSide="left">
|
||||
<SettingsIcon />
|
||||
</IconButton>
|
||||
<IconButton tooltip="Right tooltip" tooltipSide="right">
|
||||
<SettingsIcon />
|
||||
</IconButton>
|
||||
</div>
|
||||
<IconButton tooltip="Bottom tooltip" tooltipSide="bottom">
|
||||
<SettingsIcon />
|
||||
</IconButton>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="With Click Handler">
|
||||
{#snippet template()}
|
||||
<IconButton
|
||||
tooltip="Click me"
|
||||
onclick={() => {
|
||||
alert('IconButton clicked!');
|
||||
}}
|
||||
>
|
||||
<SettingsIcon />
|
||||
</IconButton>
|
||||
{/snippet}
|
||||
</Story>
|
||||
Reference in New Issue
Block a user