@aegov/design-system-react/dist/components/Dropdown/Dropdown.stories.js

A design system for the Government of the United Arab Emirates. Extending the original design system released as @aegov/design-system, this is the package specefically created for the ReactJs enviornment.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.WithIcons = exports.WithGroups = exports.Placements = exports.LanguageSelector = exports.Interactive = exports.Default = exports.ArabicDropdown = exports.Alignments = void 0;
var _react = _interopRequireDefault(require("react"));
var _Dropdown = _interopRequireDefault(require("./Dropdown"));
var _Button = _interopRequireDefault(require("../Button/Button"));
var _react2 = require("@phosphor-icons/react");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var _default = exports.default = {
  title: 'Components/Dropdown',
  component: _Dropdown.default,
  parameters: {
    layout: 'centered'
  },
  argTypes: {
    align: {
      control: 'select',
      options: ['start', 'center', 'end']
    },
    side: {
      control: 'select',
      options: ['top', 'right', 'bottom', 'left']
    }
  }
};
const ExampleTrigger = () => /*#__PURE__*/_react.default.createElement(_Button.default, {
  variant: "solid",
  styleType: "secondary"
}, /*#__PURE__*/_react.default.createElement("span", null, "Select An Option"), /*#__PURE__*/_react.default.createElement(_react2.CaretRight, {
  className: "h-4 w-4 rotate-90",
  weight: "bold"
}));

// Basic dropdown with single group
const Default = () => /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
  groups: [{
    items: [{
      label: 'Profile',
      value: 'profile'
    }, {
      label: 'Settings',
      value: 'settings'
    }, {
      label: 'Logout',
      value: 'logout'
    }]
  }]
}, /*#__PURE__*/_react.default.createElement(ExampleTrigger, null));

// Dropdown with icons
exports.Default = Default;
const WithIcons = () => /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
  groups: [{
    items: [{
      label: 'Profile',
      value: 'profile',
      icon: _react2.User
    }, {
      label: 'Notifications',
      value: 'notifications',
      icon: _react2.Bell
    }, {
      label: 'Settings',
      value: 'settings',
      icon: _react2.Gear
    }, {
      label: 'Logout',
      value: 'logout',
      icon: _react2.SignOut
    }]
  }]
}, /*#__PURE__*/_react.default.createElement(ExampleTrigger, null));

// Dropdown with multiple groups and labels
exports.WithIcons = WithIcons;
const WithGroups = () => /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
  groups: [{
    label: 'Account',
    items: [{
      label: 'Profile',
      value: 'profile',
      icon: _react2.User
    }, {
      label: 'Settings',
      value: 'settings',
      icon: _react2.Gear
    }]
  }, {
    label: 'Shopping',
    items: [{
      label: 'Cart',
      value: 'cart',
      icon: _react2.ShoppingCart
    }, {
      label: 'Orders',
      value: 'orders',
      icon: _react2.Package
    }, {
      label: 'Wishlist',
      value: 'wishlist',
      icon: _react2.Heart
    }]
  }, {
    label: 'Billing',
    items: [{
      label: 'Payment Methods',
      value: 'payment',
      icon: _react2.CreditCard
    }, {
      label: 'Subscriptions',
      value: 'subscriptions',
      icon: _react2.Package
    }]
  }]
}, /*#__PURE__*/_react.default.createElement(ExampleTrigger, null));

// Dropdown with multiple groups and labels
exports.WithGroups = WithGroups;
const ArabicDropdown = () => /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
  groups: [{
    label: 'Account',
    items: [{
      label: 'Profile',
      value: 'profile',
      icon: _react2.User
    }, {
      label: 'Settings',
      value: 'settings',
      icon: _react2.Gear
    }]
  }, {
    label: 'Shopping',
    items: [{
      label: 'Cart',
      value: 'cart',
      icon: _react2.ShoppingCart
    }, {
      label: 'Orders',
      value: 'orders',
      icon: _react2.Package
    }, {
      label: 'Wishlist',
      value: 'wishlist',
      icon: _react2.Heart
    }]
  }, {
    label: 'Billing',
    items: [{
      label: 'Payment Methods',
      value: 'payment',
      icon: _react2.CreditCard
    }, {
      label: 'Subscriptions',
      value: 'subscriptions',
      icon: _react2.Package
    }]
  }],
  dir: "rtl"
}, /*#__PURE__*/_react.default.createElement(ExampleTrigger, null));

// Language selector dropdown
exports.ArabicDropdown = ArabicDropdown;
const LanguageSelector = () => /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
  groups: [{
    items: [{
      label: 'English',
      value: 'en'
    }, {
      label: 'Arabic',
      value: 'ar'
    }]
  }]
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
  variant: "outline",
  styleType: "secondary"
}, /*#__PURE__*/_react.default.createElement(_react2.Globe, {
  className: "h-4 w-4",
  weight: "regular"
}), /*#__PURE__*/_react.default.createElement("span", null, "Language"), /*#__PURE__*/_react.default.createElement(_react2.CaretRight, {
  className: "h-4 w-4 rotate-90",
  weight: "bold"
})));

// Dropdown with different alignments
exports.LanguageSelector = LanguageSelector;
const Alignments = () => /*#__PURE__*/_react.default.createElement("div", {
  className: "flex gap-4"
}, /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
  align: "start",
  groups: [{
    items: [{
      label: 'Left aligned',
      value: '1'
    }, {
      label: 'Item 2',
      value: '2'
    }]
  }]
}, /*#__PURE__*/_react.default.createElement(ExampleTrigger, null)), /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
  align: "center",
  groups: [{
    items: [{
      label: 'Center aligned',
      value: '1'
    }, {
      label: 'Item 2',
      value: '2'
    }]
  }]
}, /*#__PURE__*/_react.default.createElement(ExampleTrigger, null)), /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
  align: "end",
  groups: [{
    items: [{
      label: 'Right aligned',
      value: '1'
    }, {
      label: 'Item 2',
      value: '2'
    }]
  }]
}, /*#__PURE__*/_react.default.createElement(ExampleTrigger, null)));

// Dropdown with different placements
exports.Alignments = Alignments;
const Placements = () => /*#__PURE__*/_react.default.createElement("div", {
  className: "flex gap-4"
}, /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
  side: "bottom",
  groups: [{
    items: [{
      label: 'Bottom placement',
      value: '1'
    }, {
      label: 'Item 2',
      value: '2'
    }]
  }]
}, /*#__PURE__*/_react.default.createElement(ExampleTrigger, null)), /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
  side: "right",
  groups: [{
    items: [{
      label: 'Right placement',
      value: '1'
    }, {
      label: 'Item 2',
      value: '2'
    }]
  }]
}, /*#__PURE__*/_react.default.createElement(ExampleTrigger, null)), /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
  side: "top",
  groups: [{
    items: [{
      label: 'Top placement',
      value: '1'
    }, {
      label: 'Item 2',
      value: '2'
    }]
  }]
}, /*#__PURE__*/_react.default.createElement(ExampleTrigger, null)), /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
  side: "left",
  groups: [{
    items: [{
      label: 'Left placement',
      value: '1'
    }, {
      label: 'Item 2',
      value: '2'
    }]
  }]
}, /*#__PURE__*/_react.default.createElement(ExampleTrigger, null)));

// Interactive dropdown with onSelect handler
exports.Placements = Placements;
const Interactive = () => {
  const handleSelect = value => {
    console.log('Selected:', value);
  };
  return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
    onSelect: handleSelect,
    groups: [{
      items: [{
        label: 'Click me',
        value: 'click-1',
        icon: _react2.Bell
      }, {
        label: 'Or me',
        value: 'click-2',
        icon: _react2.Gear
      }]
    }]
  }, /*#__PURE__*/_react.default.createElement(ExampleTrigger, null));
};
exports.Interactive = Interactive;