agroptima-design-system 0.2.1 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",
@@ -8,8 +8,7 @@
     "build-storybook": "storybook build",
     "lint": "eslint",
     "lint:fix": "eslint src --fix",
-    "publish-chromatic": "npx chromatic --exit-zero-on-changes",
-    "chromatic": "npx chromatic --exit-zero-on-changes"
+    "publish-chromatic": "npx chromatic --exit-zero-on-changes"
   },
   "dependencies": {
     "@storybook/addon-designs": "^7.0.5",

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/atoms/Multiselect.scss

@@ -1,6 +1,7 @@
 @use '../settings/color_alias';
 @use '../settings/typography';
 @use '../settings/config';
+@use '../settings/depth';
 
 .multiselect-group {
   display: flex;
@@ -124,6 +125,7 @@
   }
 
   .multiselect-options {
+    z-index: depth.$z-dropdown-options;
     margin: 0;
     padding: config.$space-1x 0rem;
     text-align: left;

package/src/atoms/Multiselect.tsx

@@ -14,6 +14,8 @@ export interface MultiselectProps
   invalid?: boolean
   label: string
   selectedLabel?: string
+  hideLabel?: boolean
+  selected?: Option[]
 }
 
 export function Multiselect({
@@ -26,9 +28,13 @@ export function Multiselect({
   options,
   label,
   selectedLabel = 'items selected',
+  hideLabel = false,
+  selected,
 }: MultiselectProps): React.JSX.Element {
   const [showOptionsList, setShowOptionsList] = useState(false)
-  const [selectedOptionsIds, setSelectedOptionsIds] = useState<string[]>([])
+  const [selectedOptionsIds, setSelectedOptionsIds] = useState<string[]>(
+    selected?.map((option) => option.id) || [],
+  )
 
   const optionsListOpenClass = showOptionsList ? 'open' : ''
   const filledSelectClass = selectedOptionsIds.length > 0 ? 'filled' : ''
@@ -70,7 +76,7 @@ export function Multiselect({
 
   return (
     <div className={`multiselect-group ${variant}`}>
-      <span className="multiselect-label">{label}</span>
+      {!hideLabel && <span className="multiselect-label">{label}</span>}
       <div className="multiselect-container">
         <div
           className={cssClasses}

package/src/atoms/Select.scss

@@ -1,6 +1,7 @@
 @use '../settings/color_alias';
 @use '../settings/typography';
 @use '../settings/config';
+@use '../settings/depth';
 
 .select-group {
   display: flex;
@@ -63,6 +64,7 @@
     }
 
     .select-options {
+      z-index: depth.$z-dropdown-options;
       border-radius: config.$corner-radius-xxs;
       background: color_alias.$neutral-white;
       box-shadow:

package/src/atoms/Select.tsx

@@ -12,6 +12,8 @@ export interface SelectProps extends React.ComponentPropsWithoutRef<'select'> {
   options: Option[]
   invalid?: boolean
   label: string
+  hideLabel?: boolean
+  selected?: Option
 }
 
 export function Select({
@@ -23,11 +25,13 @@ export function Select({
   name,
   options,
   label,
+  hideLabel = false,
+  selected,
 }: SelectProps): React.JSX.Element {
   const [showOptionsList, setShowOptionsList] = useState(false)
   const [selectedOption, setSelectedOption] = useState<Option>({
-    id: '',
-    label: '',
+    id: selected?.id || '',
+    label: selected?.label || '',
   })
 
   const optionsListOpenClass = showOptionsList ? 'open' : ''
@@ -58,7 +62,7 @@ export function Select({
 
   return (
     <div className={`select-group ${variant}`}>
-      <span className="select-label">{label}</span>
+      {!hideLabel && <span className="select-label">{label}</span>}
       <div className="select-container">
         <div
           className={cssClasses}

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/_depth.scss

@@ -0,0 +1,8 @@
+// Source: https://www.smashingmagazine.com/2021/02/css-z-index-large-projects/
+
+// Utils
+$base: 0;
+$above: 1; // use this for all values above the base
+$below: -1; // and this for all values below the base
+
+$z-dropdown-options: $base + $above;

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,16 @@ 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.
+- Select and Multiselect can hide its label with `hideLabel` prop.
+- Select and Multiselect can load preselected options with `selected` prop.
+
 ## 0.2.1
 
 - Colors have been updated due to accessibility issues.

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).
 

package/src/stories/Multiselect.stories.ts

@@ -33,6 +33,9 @@ const meta = {
     options: {
       description: 'Array of values to be displayed on the select list',
     },
+    selected: {
+      description: 'Array of values to be displayed as selected',
+    },
   },
 }
 
@@ -51,6 +54,7 @@ export const Primary: Story = {
     variant: 'primary',
     disabled: false,
     invalid: false,
+    hideLabel: false,
     helpText: 'This text can help you',
     name: 'example',
     label: 'Videogames',
@@ -67,3 +71,30 @@ export const Primary: Story = {
   },
   parameters: figmaPrimaryDesign,
 }
+
+export const PrimaryWithSelectedOptions: Story = {
+  args: {
+    variant: 'primary',
+    disabled: false,
+    invalid: false,
+    hideLabel: false,
+    helpText: 'This text can help you',
+    name: 'example',
+    label: 'Videogames',
+    selectedLabel: 'videogames selected',
+    placeholder: 'Select your favourite videogames...',
+    options: [
+      { id: '1', label: 'The Legend of Zelda: Ocarina of Time' },
+      { id: '2', label: 'Spyro the Dragon' },
+      { id: '3', label: 'Halo' },
+      { id: '4', label: 'Tetris' },
+      { id: '5', label: 'Super Mario Bros' },
+      { id: '6', label: 'Red Dead Redemption' },
+    ],
+    selected: [
+      { id: '2', label: 'Spyro the Dragon' },
+      { id: '1', label: 'The Legend of Zelda: Ocarina of Time' },
+    ],
+  },
+  parameters: figmaPrimaryDesign,
+}

package/src/stories/Select.stories.ts

@@ -30,6 +30,9 @@ const meta = {
     options: {
       description: 'Array of values to be displayed on the select list',
     },
+    selected: {
+      description: 'Value to be displayed as selected',
+    },
   },
 }
 
@@ -51,12 +54,33 @@ export const Primary: Story = {
     helpText: 'This text can help you',
     name: 'example',
     label: 'Videogames',
+    hideLabel: false,
+    placeholder: 'Select your favourite gaming system...',
+    options: [
+      { id: '1', label: 'Nintendo Switch' },
+      { id: '2', label: 'PlayStation 5' },
+      { id: '3', label: 'Xbox Series S/X' },
+    ],
+  },
+  parameters: figmaPrimaryDesign,
+}
+
+export const PrimaryWithSelectedOptions: Story = {
+  args: {
+    variant: 'primary',
+    disabled: false,
+    invalid: false,
+    helpText: 'This text can help you',
+    name: 'example',
+    label: 'Videogames',
+    hideLabel: false,
     placeholder: 'Select your favourite gaming system...',
     options: [
       { id: '1', label: 'Nintendo Switch' },
       { id: '2', label: 'PlayStation 5' },
       { id: '3', label: 'Xbox Series S/X' },
     ],
+    selected: { id: '2', label: 'PlayStation 5' },
   },
   parameters: figmaPrimaryDesign,
 }