agroptima-design-system 0.2.2 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/EmptyState.scss

@@ -0,0 +1,36 @@
+@use '../settings/color_alias';
+@use '../settings/typography';
+@use '../settings/config';
+@use '../settings/depth';
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+
+  > p {
+    margin-top: config.$space-2x;
+  }
+
+  &:not(:has(> .button)) {
+    > p {
+      margin-top: 0;
+    }
+  }
+
+  &.primary {
+    > .icon {
+      width: 4.25rem;
+      height: 4.25rem;
+      > svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    > p {
+      @include typography.empty-state-text;
+    }
+  }
+}

package/src/atoms/EmptyState.tsx

@@ -0,0 +1,35 @@
+import { Button } from './Button'
+import './EmptyState.scss'
+import { Icon, IconType } from './Icon'
+
+export type Variant = 'primary'
+
+interface callToAction {
+  (event: React.MouseEvent<HTMLButtonElement, MouseEvent>): any
+}
+
+export interface EmptyStateProps extends React.ComponentPropsWithoutRef<'div'> {
+  icon?: IconType
+  text?: string
+  variant?: Variant
+  buttonLabel?: string
+  action?: callToAction
+}
+
+export function EmptyState({
+  icon = 'EmptyState',
+  text = 'No data',
+  variant = 'primary',
+  buttonLabel,
+  action,
+}: EmptyStateProps): React.JSX.Element {
+  const cssClasses = ['empty-state', variant].join(' ')
+
+  return (
+    <div className={cssClasses}>
+      <Icon name={icon} />
+      <p>{text}</p>
+      {buttonLabel && action && <Button label={buttonLabel} onClick={action} />}
+    </div>
+  )
+}

package/src/icons/empty-customize.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 69 68"><g clip-path="url(#empty-customize__a)"><path d="M68.5 30.468 53.503 11.646a3.858 3.858 0 0 0-1.293-1.06 3.6 3.6 0 0 0-1.586-.386H18.376c-1.106 0-2.158.545-2.879 1.446L.5 30.468V40.8h68V30.468Z" fill="url(#empty-customize__b)"/><path d="M65.1 39.549 51.599 24.89a3.439 3.439 0 0 0-1.18-.81 3.656 3.656 0 0 0-1.434-.28h-28.97c-.994 0-1.966.385-2.614 1.09L3.9 39.55v8.05h61.2v-8.051Z" fill="url(#empty-customize__c)"/><path d="M68.498 50.22c0 1.277-.601 2.424-1.55 3.193l-.194.15a4.458 4.458 0 0 1-2.616.837H4.862a4.48 4.48 0 0 1-1.521-.263l-.235-.09a4.342 4.342 0 0 1-1.897-1.545A4.055 4.055 0 0 1 .5 50.219V30.6h16.498c1.822 0 3.29 1.431 3.29 3.168v.022c0 1.738 1.486 3.14 3.308 3.14h21.806c.876 0 1.716-.333 2.336-.924.62-.59.97-1.392.972-2.228 0-1.744 1.47-3.178 3.29-3.178h16.5l-.002 19.62Z" fill="url(#empty-customize__d)"/></g><defs><linearGradient id="empty-customize__b" x1="34.5" y1="10.2" x2="34.5" y2="23.955" gradientUnits="userSpaceOnUse"><stop stop-color="#5F0F40"/><stop offset="1" stop-color="#90446D"/></linearGradient><linearGradient id="empty-customize__c" x1="42.667" y1="47.6" x2="42.667" y2="22.535" gradientUnits="userSpaceOnUse"><stop stop-color="#FCF0F6"/><stop offset="1" stop-color="#EDB8D1"/></linearGradient><linearGradient id="empty-customize__d" x1="34.5" y1="30.6" x2="34.5" y2="54.4" gradientUnits="userSpaceOnUse"><stop stop-color="#BF6C97"/><stop offset="1" stop-color="#EDB8D1"/></linearGradient><clipPath id="empty-customize__a"><path fill="#fff" transform="translate(.5)" d="M0 0h68v68H0z"/></clipPath></defs></svg>

package/src/icons/index.tsx

@@ -9,6 +9,7 @@ import CheckboxInactive from './checkbox-inactive.svg'
 import Close from './close.svg'
 import Done from './done.svg'
 import EditColumns from './edit-columns.svg'
+import EmptyState from './empty-customize.svg'
 import Error from './error.svg'
 import Export from './export.svg'
 import Info from './info.svg'
@@ -31,6 +32,7 @@ export {
   Close,
   Done,
   EditColumns,
+  EmptyState,
   Error,
   Export,
   Info,

package/src/settings/_typography.scss

@@ -104,3 +104,13 @@ $font-primary: $font-base-stretch $text-base-style $font-base-weight #{$text-bas
   font-size: 1rem;
   line-height: 1.5rem; /* 150% */
 }
+
+@mixin empty-state-text {
+  font-style: $text-base-style;
+  font-variant: $text-base-style;
+  font-weight: 400;
+  font-family: $font-base-family;
+  color: color_alias.$neutral-color-1000;
+  font-size: 1rem;
+  text-align: center;
+}

package/src/stories/Changelog.stories.mdx

@@ -3,6 +3,10 @@ import { Meta } from "@storybook/addon-docs";
 <Meta title="Changelog" />
 # Changelog
 
+## 0.3.0
+
+- Empty State component is added to Storybook.
+
 ## 0.2.2
 
 - Select and Multiselect options dropdown have a higher z-index.

package/src/stories/EmptyState.stories.ts

@@ -0,0 +1,52 @@
+import { EmptyState } from '../atoms/EmptyState'
+import { StoryObj } from '@storybook/react'
+
+const meta = {
+  title: 'Design System/Atoms/EmptyState',
+  component: EmptyState,
+  tags: ['autodocs'],
+  argTypes: {
+    icon: {
+      description: 'A default icon is set for the empty state.',
+    },
+    text: {
+      description: 'Label used to describe the empty state.',
+    },
+    variant: {
+      description: 'Variant used.',
+    },
+    buttonLabel: {
+      description: 'Label used on the button.',
+    },
+    action: {
+      description: 'Action called when button is pressed.',
+    },
+  },
+}
+
+const figmaPrimaryDesign = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/DN2ova21vWqCRvPspBXgI1/Design-System?type=design&node-id=1719-258&mode=dev',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const PrimaryCustom: Story = {
+  args: {
+    variant: 'primary',
+    text: 'There are no videogames yet. You can import videogames to your list.',
+    buttonLabel: 'Import videogames',
+    action: (event) => console.log('click: ', event),
+  },
+  parameters: figmaPrimaryDesign,
+}
+
+export const PrimaryBasic: Story = {
+  args: {
+    variant: 'primary',
+  },
+  parameters: figmaPrimaryDesign,
+}

package/src/stories/Icons.stories.mdx

@@ -5,7 +5,7 @@ import * as Icons from '../icons'
 
 # Icons
 
-📁 You can find the source icons on this [link]( https://drive.google.com/drive/folders/16L5iR5KnDP9kfeCF-mDU0C0LiJZi0cwi).
+📁 You can find the source icons on this [link](https://groupeisagri.sharepoint.com/sites/Maya_Espana/Drive%20Agroptima/Forms/AllItems.aspx?id=%2Fsites%2FMaya%5FEspana%2FDrive%20Agroptima%2F06%20%2D%20DESIGN%2F01%2E%20Bodegas%2FDesign%20system%2FRecursos%2Ficons&viewid=c0618b1a%2Dc398%2D461b%2D85e6%2Df088fc5fee72).
 
 ℹ️ If you need to edit the svgo default options, check this [link](https://stackoverflow.com/a/70360615).