aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/atoms/buttons
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2022-04-15 14:38:54 +0200
committerArmand Philippot <git@armandphilippot.com>2022-04-15 14:38:54 +0200
commitb836f0a9f8b783e3328983ad087aa2b7b297b43a (patch)
treeb2ef8841a3fc94a1fe400e53597f9338e5391858 /src/components/atoms/buttons
parent0ff94252e27a80221e221c6159761f46aa111ac3 (diff)
chore: add a CommentForm component
Diffstat (limited to 'src/components/atoms/buttons')
-rw-r--r--src/components/atoms/buttons/button.stories.tsx4
-rw-r--r--src/components/atoms/buttons/button.tsx6
-rw-r--r--src/components/atoms/buttons/buttons.module.scss8
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));
}
}
}