diff options
Diffstat (limited to 'packages/components')
8 files changed, 121 insertions, 116 deletions
diff --git a/packages/components/src/components/Button/Button.scss b/packages/components/src/components/Button/Button.scss index c86db9fad..c87198ddf 100644 --- a/packages/components/src/components/Button/Button.scss +++ b/packages/components/src/components/Button/Button.scss @@ -20,8 +20,8 @@ pointer-events: all; &.icon { - padding: 0; - gap: 0; + padding: 0px; + gap: 0px; } .button-content { @@ -44,8 +44,8 @@ width: 100%; height: 100%; z-index: 0; - left: 0; - top: 0; + left: 0px; + top: 0px; position: absolute; transition: 0.4s; } @@ -111,7 +111,7 @@ .label { position: absolute; - bottom: 0; + bottom: 0px; width: 100%; display: flex; justify-content: center; diff --git a/packages/components/src/components/Button/Button.stories.tsx b/packages/components/src/components/Button/Button.stories.tsx index 3893d9ded..9e7e8cb05 100644 --- a/packages/components/src/components/Button/Button.stories.tsx +++ b/packages/components/src/components/Button/Button.stories.tsx @@ -1,94 +1,97 @@ -import { Meta, Story } from '@storybook/react' -import React from 'react' -import * as bi from 'react-icons/bi' -import { Button, IButtonProps } from '..' -import { Colors, Size } from '../../global/globalEnums' -import { Type , getFormLabelSize } from '../../global' +import { Meta, Story } from '@storybook/react'; +import React from 'react'; +import * as bi from 'react-icons/bi'; +import { Button, IButtonProps } from '..'; +import { Type } from '../../global'; +import { Size } from '../../global/globalEnums'; export default { - title: 'Dash/Button', - component: Button, - argTypes: {}, -} as Meta<typeof Button> + title: 'Dash/Button', + component: Button, + argTypes: {}, +} as Meta<typeof Button>; -const Template: Story<IButtonProps> = (args) => <Button {...args} /> +const Template: Story<IButtonProps> = args => <Button {...args} />; -export const Primary = Template.bind({}) +export const Primary = Template.bind({}); Primary.args = { - onClick: () => {}, - text: 'Primary', - type: Type.PRIM, - style: { - fontWeight: 600 - }, - tooltip: 'Primary button' -} + onClick: () => {}, + text: 'Primary', + type: Type.PRIM, + style: { + fontWeight: 600, + }, + tooltip: 'Primary button', +}; -export const Secondary = Template.bind({}) +export const Secondary = Template.bind({}); Secondary.args = { - onClick: () => {}, - text: 'Secondary', - type: Type.SEC, - tooltip: 'Secondary button' -} + onClick: () => {}, + text: 'Secondary', + type: Type.SEC, + tooltip: 'Secondary button', + color: 'green', + background: 'yellow', +}; -export const Tertiary = Template.bind({}) +export const Tertiary = Template.bind({}); Tertiary.args = { - onClick: () => {}, - text: 'Tertiary', - type: Type.TERT, - size: Size.SMALL, -} + onClick: () => {}, + text: 'Tertiary', + type: Type.TERT, + size: Size.SMALL, + background: 'yellow', +}; -export const Small = Template.bind({}) +export const Small = Template.bind({}); Small.args = { - onClick: () => {}, - text: 'Small', - type: Type.PRIM, - size: Size.SMALL, -} + onClick: () => {}, + text: 'Small', + type: Type.PRIM, + size: Size.SMALL, +}; -export const Medium = Template.bind({}) +export const Medium = Template.bind({}); Medium.args = { - onClick: () => {}, - text: 'Medium', - type: Type.PRIM, - size: Size.MEDIUM, -} + onClick: () => {}, + text: 'Medium', + type: Type.PRIM, + size: Size.MEDIUM, +}; -export const Large = Template.bind({}) +export const Large = Template.bind({}); Large.args = { - onClick: () => {}, - text: 'Large', - type: Type.PRIM, - size: Size.LARGE, -} + onClick: () => {}, + text: 'Large', + type: Type.PRIM, + size: Size.LARGE, +}; -export const ButtonWithLeftIcon = Template.bind({}) +export const ButtonWithLeftIcon = Template.bind({}); ButtonWithLeftIcon.args = { - onClick: () => {}, - text: 'New', - icon: <bi.BiPlus />, - iconPosition: 'left', - type: Type.PRIM, -} + onClick: () => {}, + text: 'New', + icon: <bi.BiPlus />, + iconPosition: 'left', + type: Type.PRIM, +}; -export const ButtonWithRightIcon = Template.bind({}) +export const ButtonWithRightIcon = Template.bind({}); ButtonWithRightIcon.args = { - onClick: () => {}, - text: 'More', - iconPosition: 'right', - icon: <bi.BiMobile />, - type: Type.PRIM, -} + onClick: () => {}, + text: 'More', + iconPosition: 'right', + icon: <bi.BiMobile />, + type: Type.PRIM, +}; -export const Label = Template.bind({}) +export const Label = Template.bind({}); Label.args = { - onClick: () => {}, - text: 'Label', - type: Type.PRIM, - style: { - fontWeight: 600 - }, - tooltip: 'Label button' -}
\ No newline at end of file + onClick: () => {}, + text: 'Label', + type: Type.PRIM, + style: { + fontWeight: 600, + }, + tooltip: 'Label button', +}; diff --git a/packages/components/src/components/Dropdown/Dropdown.scss b/packages/components/src/components/Dropdown/Dropdown.scss index f9ea2711a..516c229a5 100644 --- a/packages/components/src/components/Dropdown/Dropdown.scss +++ b/packages/components/src/components/Dropdown/Dropdown.scss @@ -129,8 +129,8 @@ .dropdown-toggle-mini { .toggle-caret { position: absolute; - top: 0; - left: 0; + top: 0px; + left: 0px; } } } diff --git a/packages/components/src/components/EditableText/EditableText.scss b/packages/components/src/components/EditableText/EditableText.scss index 15965e97e..691b05590 100644 --- a/packages/components/src/components/EditableText/EditableText.scss +++ b/packages/components/src/components/EditableText/EditableText.scss @@ -16,18 +16,18 @@ justify-content: center; align-items: center; height: 100%; - right: 0; - top: 0; + right: 0px; + top: 0px; } .editableText-background { width: 100%; height: 100%; - z-index: -1; + z-index: -1px; position: absolute; transition: 0.4s; - top: 0; - left: 0; + top: 0px; + left: 0px; } &.primary { diff --git a/packages/components/src/components/FormInput/FormInput.scss b/packages/components/src/components/FormInput/FormInput.scss index 2554cbd01..187827724 100644 --- a/packages/components/src/components/FormInput/FormInput.scss +++ b/packages/components/src/components/FormInput/FormInput.scss @@ -58,7 +58,7 @@ .formInput-label { position: absolute; - top: 0; + top: 0px; transform: translate(0px, 8px); display: block; transition: 0.2s; diff --git a/packages/components/src/components/Overlay/Overlay.scss b/packages/components/src/components/Overlay/Overlay.scss index 5ba4f802c..2c3d9530d 100644 --- a/packages/components/src/components/Overlay/Overlay.scss +++ b/packages/components/src/components/Overlay/Overlay.scss @@ -1,9 +1,9 @@ .overlay-container { width: 100vw; height: 100vh; - top: 0; - left: 0; + top: 0px; + left: 0px; background: pink; position: absolute; pointer-events: none; -}
\ No newline at end of file +} diff --git a/packages/components/src/components/Toggle/Toggle.stories.tsx b/packages/components/src/components/Toggle/Toggle.stories.tsx index 28ab2e712..6adf63424 100644 --- a/packages/components/src/components/Toggle/Toggle.stories.tsx +++ b/packages/components/src/components/Toggle/Toggle.stories.tsx @@ -1,35 +1,37 @@ -import { Meta, Story } from '@storybook/react' -import React from 'react' -import * as bi from 'react-icons/bi' -import { IToggleProps, Toggle, ToggleType } from './Toggle' -import { Type , getFormLabelSize } from '../../global' +import { Meta, Story } from '@storybook/react'; +import React from 'react'; +import * as bi from 'react-icons/bi'; +import { Type } from '../../global'; +import { IToggleProps, Toggle, ToggleType } from './Toggle'; export default { - title: 'Dash/Toggle', - component: Toggle, - argTypes: {}, -} as Meta<typeof Toggle> + title: 'Dash/Toggle', + component: Toggle, + argTypes: {}, +} as Meta<typeof Toggle>; -const Template: Story<IToggleProps> = (args) => <Toggle {...args} /> +const Template: Story<IToggleProps> = args => <Toggle {...args} />; -export const Button = Template.bind({}) +export const Button = Template.bind({}); Button.args = { - // text: 'Button', - type: Type.TERT, - icon: <bi.BiAbacus/>, - toggleType: ToggleType.BUTTON, - tooltip: 'Test tooltip' -} + // text: 'Button', + type: Type.PRIM, + icon: <bi.BiAbacus />, + toggleType: ToggleType.BUTTON, + tooltip: 'Test tooltip', + color: 'green', + background: 'yellow', +}; -export const Checkbox = Template.bind({}) +export const Checkbox = Template.bind({}); Checkbox.args = { - type: Type.SEC, - toggleType: ToggleType.CHECKBOX -} + type: Type.SEC, + toggleType: ToggleType.CHECKBOX, +}; -export const Switch = Template.bind({}) +export const Switch = Template.bind({}); Switch.args = { - text: 'Button', - type: Type.SEC, - toggleType: ToggleType.SWITCH -}
\ No newline at end of file + text: 'Button', + type: Type.SEC, + toggleType: ToggleType.SWITCH, +}; diff --git a/packages/components/src/global/globalCssVariables.scss b/packages/components/src/global/globalCssVariables.scss index ebc44106d..99fe7fb11 100644 --- a/packages/components/src/global/globalCssVariables.scss +++ b/packages/components/src/global/globalCssVariables.scss @@ -59,7 +59,7 @@ $small-text: 9px; // $sans-serif: "Roboto Slab", sans-serif; // misc values -$search-thumnail-size: 130; +$search-thumnail-size: 130px; $topbar-height: 50px; $antimodemenu-height: 36px; |