@indico-data/design-system 2.15.1 → 2.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.15.1",
+  "version": "2.17.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/button/Button.stories.tsx

@@ -16,7 +16,7 @@ const meta: Meta = {
       options: ['solid', 'outline', 'text'],
       description: 'It sets the variant style for the button',
       table: {
-        category: 'Styling',
+        category: 'Props',
         type: {
           summary: 'solid | outline | text',
         },
@@ -28,7 +28,7 @@ const meta: Meta = {
       options: ['primary', 'secondary', 'warning', 'error', 'success', 'info'],
       description: 'It sets the color for the button',
       table: {
-        category: 'Styling',
+        category: 'Props',
         type: {
           summary: 'primary | secondary | warning | error | success | info',
         },
@@ -41,7 +41,7 @@ const meta: Meta = {
       description: 'It sets the size for the button',
       defaultValue: { summary: 'md' },
       table: {
-        category: 'Styling',
+        category: 'Props',
         type: {
           summary: 'sm | md | lg',
         },
@@ -49,7 +49,7 @@ const meta: Meta = {
     },
     type: {
       table: {
-        category: 'accessibility',
+        category: 'Props',
         type: {
           summary: 'button | submit | reset',
         },
@@ -63,7 +63,7 @@ const meta: Meta = {
       description:
         'Sets an icon to the left or right of the child element inside the button. It requires an icon to be set.',
       table: {
-        category: 'Styling',
+        category: 'Props',
         defaultValue: { summary: 'left' },
         type: {
           summary: 'left | right',
@@ -74,7 +74,7 @@ const meta: Meta = {
     },
     iconName: {
       table: {
-        category: 'Styling',
+        category: 'Props',
         type: {
           summary: Object.values(exampleIcons).join(' | '),
         },
@@ -87,7 +87,7 @@ const meta: Meta = {
     ariaLabel: {
       description: 'Sets the aria-label attribute for the button.',
       table: {
-        category: 'accessibility',
+        category: 'Props',
         type: {
           summary: 'string',
         },
@@ -118,7 +118,7 @@ const meta: Meta = {
       control: 'boolean',
       table: {
         type: { summary: 'true | false' },
-        category: 'Styling',
+        category: 'Props',
       },
       defaultValue: { summary: false },
       description:
@@ -128,11 +128,27 @@ const meta: Meta = {
       control: 'boolean',
       table: {
         type: { summary: 'true | false' },
-        category: 'Styling',
+        category: 'Props',
       },
       defaultValue: { summary: false },
       description: 'It disables the button',
     },
+    className: {
+      control: 'text',
+      table: {
+        category: 'Props',
+      },
+      defaultValue: { summary: '' },
+      description: 'allows the passing of classes',
+    },
+    href: {
+      control: 'text',
+      table: {
+        category: 'Props',
+      },
+      defaultValue: { summary: '' },
+      description: 'passes a href value to the button for creating links',
+    },
   },
 };
 

package/src/legacy/styles/globals/forms.ts

@@ -33,47 +33,8 @@ export const Forms = createGlobalStyle`
     font-size: ${TYPOGRAPHY.fontSize.subheadSmall};
   }
 
-  [type='color'],
-  [type='date'],
-  [type='datetime'],
-  [type='datetime-local'],
-  [type='email'],
-  [type='month'],
-  [type='number'],
-  [type='password'],
-  [type='search'],
-  [type='tel'],
-  [type='text'],
-  [type='time'],
-  [type='url'],
-  [type='week'],
-  input:not([type]),
-  textarea {
-    appearance: none;
-    border-radius: 2px;
-    box-shadow: ${formBoxShadow};
-    box-sizing: border-box;
-    margin-bottom: ${TYPOGRAPHY.spacing.half};
-    padding: ${TYPOGRAPHY.spacing.third};
-    transition: border-color ${ANIMATION.duration} ${ANIMATION.timing};
-    width: 100%;
-
-    &:focus {
-      border-color: ${COLORS.actionColor};
-      box-shadow: ${formBoxShadowFocus};
-      outline: none;
-    }
 
-    &:disabled {
-      cursor: not-allowed;
 
-      &:hover {
-        border: 1px solid ${COLORS.lightGray};
-      }
-    }
-
-
-  }
 
   textarea {
     resize: vertical;