search

hikaya-io / hakawati

A collection of UI components
GNU General Public License v3.0
2 stars 1 forks source link

Standardization: Clean up Hakawati to add 'scoped' styling #255

Closed ninetteadhikari closed 2 years ago

ninetteadhikari commented 2 years ago

Current behavior Add scoped styling for all the components. This needs to be done one component at a time and tested in Dots FE

To Reproduce Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Kimaiyo077 commented 2 years ago
Component is it used? Description & where it is used
HAlert None
  • Note used anywhere
HAvatar Not used
  • El-avatar is used instead in Navbar.vue and src\user\views\settings\index.vue
HBreadcrumb Used
  • src\user\views\settings\integrations\index.vue
  • src\user\views\settings\language\index.vue
  • src\user\views\settings\profile\index.vue
  • src\user\views\settings\security\index.vue
  • src\workspace\views\index.vue
HButton Used
  • Used in 39 files across the dots app
  • El-button from element is also used in some files
  • Used in website as well
HCards Used
  • Used in 21 files
  • Used in the website too
HCascader Used
  • Used once in src\data\views\TableDetails.vue
HCheckbox Used
  • Used in src\data\views\TableDetails.vue
  • El-checkbox from element used in the same file
BasicCheckbox Used
  • src\data\views\components\stepper\LayerLocationColumn.vue
  • src\maps\views\index.vue
  • src\workspaces-private\views\UpgradeWorkspaceDialog.vue
  • src\workspaces-private\views\payment\index.vue
GroupCheckbox Not used
  • Not used in any component
DateRangePicker Not used
  • Not used in any component
HDatePicker Not used
  • Not used in any component
HDialog Used
  • Used in 7 components
HDrawer Used
  • src\common\layout\components\ProfileDrawer.vue
  • src\data\views\TableDetails.vue
  • src\data\views\components\TableSettings.vue
HDropdown Used
  • src\workspaces\views\WorkspaceWelcome.vue
  • src\common\layout\components\Navbar.vue
  • src\data\views\index.vue
  • src\data\views\TablesList.vue
  • src\workspaces-private\views\billing\index.vue
  • src\workspaces-private\views\payment\index.vue
HFilter Not used
  • Not used in any component
HForm Used
  • Used across 12 files
  • El-Form also used across several files
HGrid Not used
  • HGrid and its derivatives(item and complexItem) not used in the dots app
HInput Used
  • Used across several files in the app
  • El-Input also used in several components
CollapseNav Used
  • The CollapseNav component is used in src\maps\views\index.vue
  • El-collapse from Element is used more across several components
TopNav Used
  • Main nav bar
  • src\common\layout\components\Navbar.vue
    HPageSize Not Used
    • Not used in any component
    HPagination Used
    • src\data\views\TableDetails.vue
    HSearch Used
    • src\data\views\TablesList.vue
    • src\workspaces\views\users\index.vue
    HSelect Used
    • Used across several components
    • El-select from Element is also used in some components
    GroupedSelect Not used
    • Not used in the dots app
    HSideNav Not used
    • Not used in the dots app
    HSteps Used
    • src\common\components\StepperWizard\index.vue
    HStepsV1 Not used
    • Not used in the dots app
    Steps Not Used
    • Not used in the dots app
    HSwitch Used
    • src\data\views\index.vue
    • src\data\views\components\ImportKoboForm.vue
    • src\data\views\components\TableSettings.vue
    • src\metrics\views\index.vue
    • src\workspaces-private\views\billing\index.vue
    • src\workspaces-private\views\plans\index.vue
    HTab Used
    • src\data\views\components\DataPreview.vue
    • src\metrics\views\index.vue
    • src\user\views\settings\index.vue
    • src\workspaces\views\WorkspaceSettings.vue
    HTag Used
    • src\metrics\views\index.vue
    • src\workspaces\views\users\UsersTable.vue
    DynamicTag Not used
    • Not used in the dots app
    UploadExcel Not used
    • We use El-upload in every scenario on dots
    HKoboTable Not used
    • Not used in the app
    HTable Used
    • src\metrics\views\index.vue
    OldTable Not used
    • Not used in the app
    TableBasic Not used
    • Not used in the app
    Kimaiyo077 commented 2 years ago

    Here is a list of all the components and where they are used.

    andrewtpham commented 2 years ago

    Here's a list of example storybooks that might give us an idea of how we can display examples of options and build more like a design system in storybook: