diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-02-25 19:29:44 +0100 | 
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-02-25 19:29:44 +0100 | 
| commit | 99ae0a9d3a923ca1e998dc9b504dad607fdfd768 (patch) | |
| tree | 70ec0c29d003d462de6926f1faa09354e3ff6d90 /src/components/Form/Label | |
| parent | 774d5b4c538d93889bf743b6cd7d01a85f8715e6 (diff) | |
| parent | e26d821f738525477472e631d170d9ed218c1603 (diff) | |
refactor: split form styles and combine components
I think it is better to keep styles close to the
corresponding components. So I splitted the unique
stylesheet.
I also combine select, textarea and input components
into a single one since they share the same logic and
the same styles.
Diffstat (limited to 'src/components/Form/Label')
| -rw-r--r-- | src/components/Form/Label/Label.module.scss | 22 | ||||
| -rw-r--r-- | src/components/Form/Label/Label.tsx | 24 | 
2 files changed, 0 insertions, 46 deletions
| diff --git a/src/components/Form/Label/Label.module.scss b/src/components/Form/Label/Label.module.scss deleted file mode 100644 index c527b16..0000000 --- a/src/components/Form/Label/Label.module.scss +++ /dev/null @@ -1,22 +0,0 @@ -@use "@styles/abstracts/functions" as fun; - -.regular { -  display: block; -  color: var(--color-primary-darker); -  font-size: var(--font-size-sm); -  font-variant: small-caps; -  font-weight: 600; -} - -.settings { -  --icon-size: #{fun.convert-px(25)}; -  --toggle-width: #{fun.convert-px(45)}; -  --toggle-height: calc(var(--toggle-width) / 2); - -  display: inline-flex; -  align-items: center; -} - -.required { -  color: var(--color-secondary); -} diff --git a/src/components/Form/Label/Label.tsx b/src/components/Form/Label/Label.tsx deleted file mode 100644 index baedff0..0000000 --- a/src/components/Form/Label/Label.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import styles from './Label.module.scss'; - -type LabelKind = 'regular' | 'settings'; - -const Label = ({ -  body, -  htmlFor, -  required = false, -  kind = 'regular', -}: { -  body: string; -  htmlFor: string; -  required?: boolean; -  kind?: LabelKind; -}) => { -  return ( -    <label htmlFor={htmlFor} className={styles[kind]}> -      {body} -      {required && <span className={styles.required}> *</span>} -    </label> -  ); -}; - -export default Label; | 
