brainly-style-guide - npm Package Compare versions

Comparing version 189.0.0 to 190.0.0

commonjs/components/form-elements/Select.js

@@ -41,2 +41,11 @@ "use strict";
 
+var getOptionElement = function getOptionElement(_ref) {
+  var value = _ref.value,
+      text = _ref.text;
+  return /*#__PURE__*/React.createElement("option", {
+    key: value,
+    value: value
+  }, text);
+};
+
 var Select = function Select(props) {
@@ -70,9 +79,15 @@ var _classnames;
   }, _defineProperty(_classnames, "sg-select--".concat(String(color)), color), _defineProperty(_classnames, "sg-select--".concat(String(size)), size && size !== 'm'), _classnames), className);
-  var optionsElements = options.map(function (_ref) {
-    var value = _ref.value,
-        text = _ref.text;
-    return /*#__PURE__*/React.createElement("option", {
-      key: value,
-      value: value
-    }, text);
+  var optionsElements = options.map(function (item, index) {
+    if (item.options) {
+      return /*#__PURE__*/React.createElement("optgroup", {
+        key: item.label + index,
+        label: item.label
+      }, item.options.map(getOptionElement));
+    }
+
+    if (item.text || item.value) {
+      return getOptionElement(item);
+    }
+
+    return null;
   });
@@ -79,0 +94,0 @@ return /*#__PURE__*/React.createElement("div", {

esm/components/form-elements/Select.js

@@ -16,2 +16,11 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
+var getOptionElement = function getOptionElement(_ref) {
+  var value = _ref.value,
+      text = _ref.text;
+  return /*#__PURE__*/React.createElement("option", {
+    key: value,
+    value: value
+  }, text);
+};
+
 var Select = function Select(props) {
@@ -45,9 +54,15 @@ var _classnames;
   }, _defineProperty(_classnames, "sg-select--".concat(String(color)), color), _defineProperty(_classnames, "sg-select--".concat(String(size)), size && size !== 'm'), _classnames), className);
-  var optionsElements = options.map(function (_ref) {
-    var value = _ref.value,
-        text = _ref.text;
-    return /*#__PURE__*/React.createElement("option", {
-      key: value,
-      value: value
-    }, text);
+  var optionsElements = options.map(function (item, index) {
+    if (item.options) {
+      return /*#__PURE__*/React.createElement("optgroup", {
+        key: item.label + index,
+        label: item.label
+      }, item.options.map(getOptionElement));
+    }
+
+    if (item.text || item.value) {
+      return getOptionElement(item);
+    }
+
+    return null;
   });
@@ -54,0 +69,0 @@ return /*#__PURE__*/React.createElement("div", {

package.json

 {
   "name": "brainly-style-guide",
-  "version": "189.0.0",
+  "version": "190.0.0",
   "description": "Brainly Front-End Style Guide",
@@ -5,0 +5,0 @@ "repository": "https://github.com/brainly/style-guide.git",

src/components/form-elements/pages/select-interactive.jsx

@@ -11,2 +11,11 @@ import * as React from 'react';
 
+const exampleGroupedOptions = [
+  {value: 'option0', text: 'Option 0'},
+  {
+    label: 'Label',
+    options: exampleOptions,
+  },
+  {value: 'option4', text: 'Option 4'},
+];
+
 const Selects = () => {
@@ -42,2 +51,6 @@ const settings = [
       </DocsActiveBlock>
+
+      <DocsActiveBlock backgroundColor="dark" settings={settings}>
+        <Select options={exampleGroupedOptions} size="m" color="white" />
+      </DocsActiveBlock>
     </div>
@@ -44,0 +57,0 @@ );

src/components/form-elements/pages/select.jsx

@@ -12,2 +12,17 @@ import * as React from 'react';
 ];
+
+const exampleGroupedOptions = [
+  {value: 'option1', text: 'Option1'},
+  {value: 'option2', text: 'Select selector'},
+  {
+    label: 'Label text',
+    options: [
+      {value: 'option21', text: 'Option1'},
+      {value: 'option22', text: 'Select selector'},
+      {value: 'option23', text: 'Select selector'},
+    ],
+  },
+  {value: 'option3', text: 'Select selector'},
+];
+
 const exampleProps = {
@@ -61,2 +76,5 @@ options: exampleOptions,
     </DocsBlock>
+    <DocsBlock info="With grouped options">
+      <Select {...exampleProps} options={exampleGroupedOptions} fullWidth />
+    </DocsBlock>
   </div>
@@ -63,0 +81,0 @@ );

src/components/form-elements/README.md

@@ -65,2 +65,14 @@ # Form elements
 ]} />
+
+<Select options={[
+    {value: 'option1', text: 'Option1'},
+    {
+        label: 'Label',
+        options: [
+            {value: 'option11', text: 'Option11'},
+            {value: 'option12', text: 'Option12'}
+        ]
+    }
+    {value: 'option2', text: 'Option2'},
+]} />
 ```
@@ -74,3 +86,13 @@
 </select>
+
+<select class="sg-select__element">
+    <option value="option1">Option1</option>
+    <optgroup label="Label">
+        <option value="option11">Option 11</option>
+        <option value="option12">Option 12</option>
+    </optgroup>
+    <option value="option2">Option2</option>
+</select>
+
 ```
 

src/components/form-elements/Select.jsx

@@ -10,5 +10,9 @@ // @flow strict
   text: string,
-  ...
 };
 
+type GroupedOptionsPropsType = {
+  label: string,
+  options: $ReadOnlyArray<OptionsPropsType>,
+};
+
 type SelectSizeType = 'm' | 'l';
@@ -76,6 +80,7 @@
    * Optional array of options of the select
-   * @example <Select size="m" options={[{value: 'option1', text: 'Option1'},{value: 'option2', text: 'Select selector'}]} />
+   * @example <Select size="m" options={[{value:"option1",text:"Option1"},{label:"Label title",options:[{value:"option1",text:"Option1"},{value:"option2",text:"Select selector"}]},{value:"option2",text:"Select selector"}]} />
    */
-  options?: Array<OptionsPropsType>,
+  options?: $ReadOnlyArray<GroupedOptionsPropsType | OptionsPropsType>,
   /**
+  /**
    * Additional class names
@@ -87,2 +92,8 @@ */
 
+const getOptionElement = ({value, text}: OptionsPropsType) => (
+  <option key={value} value={value}>
+    {text}
+  </option>
+);
+
 const Select = (props: SelectPropsType) => {
@@ -121,8 +132,19 @@ const {
   );
-  const optionsElements = options.map(({value, text}) => (
-    <option key={value} value={value}>
-      {text}
-    </option>
-  ));
 
+  const optionsElements = options.map((item, index) => {
+    if (item.options) {
+      return (
+        <optgroup key={item.label + index} label={item.label}>
+          {item.options.map(getOptionElement)}
+        </optgroup>
+      );
+    }
+
+    if (item.text || item.value) {
+      return getOptionElement(item);
+    }
+
+    return null;
+  });
+
   return (
@@ -129,0 +151,0 @@ <div className={selectClass}>

src/components/form-elements/Select.spec.jsx

@@ -10,2 +10,16 @@ import * as React from 'react';
 
+const exampleGroupedOptions = [
+  {value: 'option1', text: 'Option1'},
+  {value: 'option2', text: 'Select selector'},
+  {
+    label: 'Label text',
+    options: [
+      {value: 'option31', text: 'Option1'},
+      {value: 'option32', text: 'Select selector'},
+      {value: 'option33', text: 'Select selector'},
+    ],
+  },
+  {value: 'option4', text: 'Select selector'},
+];
+
 const voidFunction = () => undefined;
@@ -25,2 +39,13 @@
 
+test('render grouped options', () => {
+  const select = shallow(<Select options={exampleGroupedOptions} />);
+
+  expect(select.find('option')).toHaveLength(6);
+
+  const optGroup = select.find('optgroup');
+
+  expect(optGroup).toHaveLength(1);
+  expect(optGroup.prop('label')).toEqual('Label text');
+});
+
 test('choose options', () => {
@@ -27,0 +52,0 @@ const select = render(

No alert changes

Improved metrics

Total package byte prevSize

9248108

increased by0.04%

Lines of code

40038

increased by0.23%

No dependency changes