agroptima-design-system 0.26.0-beta.9 → 0.26.1

package/.storybook/main.ts

@@ -17,8 +17,7 @@ const config: StorybookConfig = {
     getAbsolutePath('@storybook/addon-interactions'),
     '@storybook/addon-a11y',
     '@storybook/addon-designs',
-    '@storybook/addon-mdx-gfm',
-    '@chromatic-com/storybook'
+    '@chromatic-com/storybook',
   ],
 
   framework: {
@@ -60,7 +59,7 @@ const config: StorybookConfig = {
   },
 
   typescript: {
-    reactDocgen: 'react-docgen-typescript'
-  }
+    reactDocgen: 'react-docgen-typescript',
+  },
 }
 export default config

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.26.0-beta.9",
+  "version": "0.26.1",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",
@@ -17,7 +17,6 @@
   "dependencies": {
     "@storybook/addon-designs": "^8.0.3",
     "@storybook/addon-viewport": "^8.3.2",
-    "agroptima-design-system": "^0.26.0-beta.3",
     "next": "^14.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -29,7 +28,6 @@
     "@storybook/addon-essentials": "^8.3.2",
     "@storybook/addon-interactions": "^8.3.2",
     "@storybook/addon-links": "^8.3.2",
-    "@storybook/addon-mdx-gfm": "^8.3.2",
     "@storybook/blocks": "^8.3.2",
     "@storybook/nextjs": "^8.3.2",
     "@storybook/react": "^8.3.2",

package/src/atoms/Button/BaseButton.tsx

@@ -2,6 +2,7 @@ import NextLink from 'next/link'
 
 interface CommonProps {
   disabled?: boolean
+  visible?: boolean
 }
 
 type HtmlButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>
@@ -15,7 +16,12 @@ export type BaseButtonProps =
 const hasHref = (props: HtmlButtonProps | AnchorProps): props is AnchorProps =>
   'href' in props
 
-export function BaseButton({ children, ...props }: BaseButtonProps) {
+export function BaseButton({
+  children,
+  visible = true,
+  ...props
+}: BaseButtonProps) {
+  if (!visible) return null
   if (hasHref(props)) {
     return (
       <NextLink href={props.href || ''} {...props}>

package/src/atoms/Button/Button.scss

@@ -54,12 +54,12 @@
   }
 
   &.primary-outlined {
+    border: 1px solid color_alias.$primary-color-600;
     @include button-style(
       color_alias.$neutral-white,
       color_alias.$primary-color-600,
       color_alias.$primary-color-50
     );
-    border: 1px solid color_alias.$primary-color-600;
   }
 
   &.primary-ghost {
@@ -95,12 +95,12 @@
   }
 
   &.error-outlined {
+    border: 1px solid color_alias.$error-color-600;
     @include button-style(
       color_alias.$neutral-white,
       color_alias.$error-color-600,
       color_alias.$error-color-50
     );
-    border: 1px solid color_alias.$error-color-600;
   }
 
   &.error-ghost {
@@ -136,12 +136,13 @@
   }
 
   &.success-outlined {
+    border: 1px solid color_alias.$success-color-1000;
+
     @include button-style(
       color_alias.$neutral-white,
       color_alias.$neutral-color-900,
       color_alias.$success-color-50
     );
-    border: 1px solid color_alias.$success-color-1000;
   }
 
   &.success-ghost {
@@ -177,12 +178,12 @@
   }
 
   &.warning-outlined {
+    border: 1px solid color_alias.$warning-color-1000;
     @include button-style(
       color_alias.$neutral-white,
       color_alias.$neutral-color-900,
       color_alias.$warning-color-50
     );
-    border: 1px solid color_alias.$warning-color-1000;
   }
 
   &.warning-ghost {
@@ -206,12 +207,12 @@
   }
 
   &.info-outlined {
+    border: 1px solid color_alias.$info-color-600;
     @include button-style(
       color_alias.$neutral-white,
       color_alias.$info-color-600,
       color_alias.$info-color-50
     );
-    border: 1px solid color_alias.$info-color-600;
   }
 
   &.info-ghost {
@@ -235,12 +236,12 @@
   }
 
   &.neutral-outlined {
+    border: 1px solid color_alias.$neutral-color-100;
     @include button-style(
       color_alias.$neutral-white,
       color_alias.$neutral-color-1000,
       color_alias.$neutral-color-50
     );
-    border: 1px solid color_alias.$neutral-color-100;
   }
 
   &.neutral-ghost {

package/src/atoms/Button/IconButton.tsx

@@ -11,7 +11,6 @@ interface CustomProps {
   icon: IconType
   variant?: Variant
   disabled?: boolean
-  visible?: boolean
   accessibilityLabel: string
 }
 
@@ -21,12 +20,9 @@ export function IconButton({
   accessibilityLabel,
   icon,
   disabled,
-  visible = true,
   variant = 'primary',
   ...props
 }: IconButtonProps) {
-  if (!visible) return null
-
   return (
     <BaseButton
       disabled={disabled}

package/src/atoms/Drawer.tsx

@@ -11,7 +11,7 @@ export interface DrawerProps extends React.ComponentPropsWithoutRef<'div'> {
   variant?: Variant
   title: string
   buttons: ButtonProps[]
-  onCloseDrawer: () => void
+  onClose: () => void
 }
 
 export function Drawer({
@@ -21,7 +21,7 @@ export function Drawer({
   title,
   buttons,
   children,
-  onCloseDrawer,
+  onClose,
   ...props
 }: DrawerProps): React.JSX.Element {
   const cssClasses = classNames('drawer', variant, className)
@@ -40,7 +40,7 @@ export function Drawer({
           <IconButton
             icon="Close"
             accessibilityLabel="Close"
-            onClick={onCloseDrawer}
+            onClick={onClose}
           />
         </div>
         <div className="scroll-area">

package/src/atoms/Input.scss

@@ -1,7 +1,7 @@
 @use '../settings/color_alias';
 @use '../settings/typography/form' as typography;
 @use '../settings/config';
-@import 'button/Button.scss';
+@import './button/Button.scss';
 
 .input-group {
   @include typography.input-text;
@@ -127,7 +127,10 @@
   }
   &.file .input-container {
     padding: 0;
-    border: none;
+    border: transparent;
+    &:has(input:focus) {
+      border: transparent;
+    }
     input {
       color: color_alias.$neutral-color-600;
       &::before {

package/src/atoms/Modal.scss

@@ -48,6 +48,7 @@
         display: flex;
         gap: config.$space-2x;
         align-items: flex-start;
+        padding-bottom: config.$space-2x;
 
         .icon {
           margin-top: 4px;

package/src/icons/download.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 6.706h-4.571V0H6.57v6.706H2l8 7.823 8-7.823ZM8.857 8.94V2.235h2.286v6.706h1.337L10 11.366 7.52 8.942h1.337ZM2 16.765h16V19H2v-2.235Z" fill="#161C26"/></svg>

package/src/icons/index.tsx

@@ -17,6 +17,7 @@ import Delete from './delete.svg'
 import Done from './done.svg'
 import DoubleArrowLeft from './double-arrow-left.svg'
 import DoubleArrowRight from './double-arrow-right.svg'
+import Download from './download.svg'
 import Edit from './edit.svg'
 import EditColumns from './edit-columns.svg'
 import EmptyState from './empty-customize.svg'
@@ -37,6 +38,7 @@ import Settings from './settings.svg'
 import Show from './show.svg'
 import ShowOff from './show-off.svg'
 import Sorter from './sorter.svg'
+import Upload from './upload.svg'
 import UserMenu from './user-menu.svg'
 import Warning from './warning.svg'
 import DeliveryNote from './delivery-note.svg'
@@ -63,6 +65,7 @@ export {
   Done,
   DoubleArrowLeft,
   DoubleArrowRight,
+  Download,
   Edit,
   EditColumns,
   EmptyState,
@@ -84,6 +87,7 @@ export {
   Show,
   ShowOff,
   Sorter,
+  Upload,
   UserMenu,
   Warning,
 }

package/src/icons/upload.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M6.571 14.53h6.858V7.823H18L10 0 2 7.824h4.571v6.705ZM10 3.162l2.48 2.425h-1.337v6.706H8.857V5.588H7.52L10 3.163ZM2 16.765h16V19H2v-2.235Z" fill="#161C26"/></svg>

package/src/stories/Button.stories.ts

@@ -37,6 +37,10 @@ const meta = {
       description:
         'If a link is provided, the component will be rendered as NextLink, otherwise as button',
     },
+    visible: {
+      description: 'Is the button visible?',
+      control: { type: 'boolean', default: true },
+    },
   },
 }
 

package/src/stories/Changelog.mdx

@@ -4,6 +4,11 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+# 0.26.1
+
+* Fix import button
+* Fix Mixed Declarations in scss files
+
 # 0.26.0
 
 * Add CheckableTag & CheckableTagGroup components.
@@ -11,6 +16,12 @@ import { Meta } from "@storybook/blocks";
 * Add Dot option to Badge component.
 * Add Drawer component.
 
+# 0.25.8
+
+* Remove focus style for file Input component
+* Download and Upload icons
+* Add visible prop to buttons
+
 # 0.25.7
 
 * Add styles for file Input component

package/tests/Drawer.spec.tsx

@@ -10,7 +10,7 @@ describe('Drawer', () => {
       <Drawer
         id="videogames-filters"
         title="Filters"
-        onCloseDrawer={jest.fn()}
+        onClose={jest.fn()}
         buttons={[
           {
             label: 'Clear',