diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-04-15 14:38:54 +0200 | 
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-04-15 14:38:54 +0200 | 
| commit | b836f0a9f8b783e3328983ad087aa2b7b297b43a (patch) | |
| tree | b2ef8841a3fc94a1fe400e53597f9338e5391858 /src/components/atoms/buttons | |
| parent | 0ff94252e27a80221e221c6159761f46aa111ac3 (diff) | |
chore: add a CommentForm component
Diffstat (limited to 'src/components/atoms/buttons')
| -rw-r--r-- | src/components/atoms/buttons/button.stories.tsx | 4 | ||||
| -rw-r--r-- | src/components/atoms/buttons/button.tsx | 6 | ||||
| -rw-r--r-- | src/components/atoms/buttons/buttons.module.scss | 8 | 
3 files changed, 10 insertions, 8 deletions
| diff --git a/src/components/atoms/buttons/button.stories.tsx b/src/components/atoms/buttons/button.stories.tsx index 1061d83..d47a1ea 100644 --- a/src/components/atoms/buttons/button.stories.tsx +++ b/src/components/atoms/buttons/button.stories.tsx @@ -65,7 +65,7 @@ export default {          type: 'select',        },        description: 'Button kind.', -      options: ['primary', 'secondary', 'tertiary'], +      options: ['primary', 'secondary', 'tertiary', 'neutral'],        table: {          category: 'Options',          defaultValue: { summary: 'secondary' }, @@ -93,7 +93,7 @@ export default {          type: 'select',        },        description: 'The link shape.', -      options: ['circle', 'rectangle', 'square'], +      options: ['circle', 'rectangle', 'square', 'initial'],        table: {          category: 'Options',          defaultValue: { summary: 'rectangle' }, diff --git a/src/components/atoms/buttons/button.tsx b/src/components/atoms/buttons/button.tsx index b223046..545c5c5 100644 --- a/src/components/atoms/buttons/button.tsx +++ b/src/components/atoms/buttons/button.tsx @@ -9,7 +9,7 @@ export type ButtonProps = {    /**     * Button accessible label.     */ -  ariaLabel?: string; +  'aria-label'?: string;    /**     * Button state. Default: false.     */ @@ -25,7 +25,7 @@ export type ButtonProps = {    /**     * Button shape. Default: rectangle.     */ -  shape?: 'circle' | 'rectangle' | 'square'; +  shape?: 'circle' | 'rectangle' | 'square' | 'initial';    /**     * Button type attribute. Default: button.     */ @@ -39,7 +39,6 @@ export type ButtonProps = {   */  const Button: FC<ButtonProps> = ({    className = '', -  ariaLabel,    children,    disabled = false,    kind = 'secondary', @@ -55,7 +54,6 @@ const Button: FC<ButtonProps> = ({        type={type}        disabled={disabled}        className={`${styles.btn} ${kindClass} ${shapeClass} ${className}`} -      aria-label={ariaLabel}        {...props}      >        {children} diff --git a/src/components/atoms/buttons/buttons.module.scss b/src/components/atoms/buttons/buttons.module.scss index 87c92db..8e3e196 100644 --- a/src/components/atoms/buttons/buttons.module.scss +++ b/src/components/atoms/buttons/buttons.module.scss @@ -10,6 +10,10 @@    font-weight: 600;    transition: all 0.3s ease-in-out 0s; +  &--initial { +    border-radius: 0; +  } +    &--rectangle {      padding: var(--spacing-2xs) var(--spacing-md);    } @@ -107,7 +111,7 @@              fun.convert-px(-4) var(--color-shadow-light),            fun.convert-px(7) fun.convert-px(10) fun.convert-px(12)              fun.convert-px(-3) var(--color-shadow-light); -        transform: scale(1.1); +        transform: scale(var(--scale-up, 1.1));        }        &:focus { @@ -119,7 +123,7 @@          box-shadow: 0 0 0 0 var(--color-shadow);          color: var(--color-primary-dark);          text-decoration: underline transparent 0; -        transform: scale(0.94); +        transform: scale(var(--scale-down, 0.94));        }      }    } | 
