agroptima-design-system 0.2.1 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "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/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/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/stories/Changelog.stories.mdx

@@ -3,6 +3,12 @@ import { Meta } from "@storybook/addon-docs";
 <Meta title="Changelog" />
 # Changelog
 
+## 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/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,
 }