@comicrelief/component-library 8.32.0 → 8.33.0

package/dist/components/Atoms/Select/Select.js

@@ -15,7 +15,7 @@ var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 const StyledSelect = _styledComponents.default.select.withConfig({
   displayName: "Select__StyledSelect",
   componentId: "sc-1atp8e3-0"
-})(["width:100%;font-size:", ";display:block;box-sizing:border-box;padding:0 ", ";padding-right:", ";margin:0;position:relative;height:48px;font-weight:400;font-family:", ";background:", " url(", ") calc(100% - 1.5rem) 14px/20px 1.5rem no-repeat;border:1px solid;border-color:", ";box-shadow:none;appearance:none;color:", ";border-radius:0.5rem;cursor:pointer;:focus{border:1px solid ", ";}@media ", "{max-width:290px;}"], _ref => {
+})(["width:100%;font-size:", ";display:block;box-sizing:border-box;padding:0 ", ";padding-right:", ";margin:0;position:relative;height:48px;font-weight:400;font-family:", ";background:", ";border:1px solid;border-color:", ";box-shadow:none;appearance:none;color:", ";border-radius:0.5rem;cursor:pointer;:focus{border:1px solid ", ";}@media ", "{max-width:290px;}"], _ref => {
   let {
     theme
   } = _ref;
@@ -27,10 +27,11 @@ const StyledSelect = _styledComponents.default.select.withConfig({
   return theme.fontFamilies(theme.font.regular);
 }, _ref3 => {
   let {
-    theme
+    theme,
+    hideArrow
   } = _ref3;
-  return theme.color('grey_light');
-}, _dropDownDarkPurple.default, _ref4 => {
+  return hideArrow ? theme.color('grey_light') : `${theme.color('grey_light')} url(${_dropDownDarkPurple.default}) calc(100% - 1.5rem) 14px/20px 1.5rem no-repeat`;
+}, _ref4 => {
   let {
     theme,
     error
@@ -66,9 +67,11 @@ const Select = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     greyDescription = false,
     className = '',
     optional = false,
+    hideArrow = false,
     ...rest
   } = _ref8;
-  const [value, setValue] = (0, _react.useState)('');
+  const initialValue = hideArrow ? options[0].value : defaultValue;
+  const [value, setValue] = (0, _react.useState)(initialValue);
   return /*#__PURE__*/_react.default.createElement(_Label.default, {
     label: label,
     hideLabel: hideLabel,
@@ -88,8 +91,10 @@ const Select = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     required: optional === false,
     hasValue: !!value,
     greyDescription: greyDescription,
-    ref: ref
-  }), /*#__PURE__*/_react.default.createElement("option", {
+    ref: ref,
+    hideArrow: hideArrow
+  }), /* empty string "" is falsy so will show */
+  !initialValue && /*#__PURE__*/_react.default.createElement("option", {
     disabled: true,
     value: ""
   }, description), options.map(option => /*#__PURE__*/_react.default.createElement("option", {

package/dist/components/Atoms/Select/Select.md

@@ -32,4 +32,16 @@
     { value: 'Option four', displayValue: 'The fourth option' }
   ]}
 />
+
+<h4>DROPDOWN MENU - hide arrow / just one option</h4>
+<Select
+    label="Label"
+    errorMsg="This is an error message"
+    description="Select an option"
+    greyDescription
+    hideArrow={true}
+    options={[
+        { value: 'Option one', displayValue: 'The first option' }
+    ]}
+/>
 ```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.32.0",
+  "version": "8.33.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Atoms/Select/Select.js

@@ -19,8 +19,9 @@ const StyledSelect = styled.select`
   height: 48px;
   font-weight: 400;
   font-family: ${({ theme }) => theme.fontFamilies(theme.font.regular)};
-  background: ${({ theme }) => theme.color('grey_light')} url(${dropDownIcon})
-    calc(100% - 1.5rem) 14px/20px 1.5rem no-repeat;
+  background: ${({ theme, hideArrow }) => (hideArrow
+    ? theme.color('grey_light')
+    : `${theme.color('grey_light')} url(${dropDownIcon}) calc(100% - 1.5rem) 14px/20px 1.5rem no-repeat`)};
   border: 1px solid;
   border-color: ${({ theme, error }) => (error ? theme.color('red') : theme.color('grey_medium'))};
   box-shadow: none;
@@ -50,11 +51,13 @@ const Select = React.forwardRef(
       greyDescription = false,
       className = '',
       optional = false,
+      hideArrow = false,
       ...rest
     },
     ref
   ) => {
-    const [value, setValue] = useState('');
+    const initialValue = hideArrow ? options[0].value : defaultValue;
+    const [value, setValue] = useState(initialValue);
 
     return (
       <Label
@@ -78,10 +81,16 @@ const Select = React.forwardRef(
           hasValue={!!value}
           greyDescription={greyDescription}
           ref={ref}
+          hideArrow={hideArrow}
         >
-          <option disabled value="">
-            {description}
-          </option>
+
+          {/* empty string "" is falsy so will show */
+            !initialValue && (
+            <option disabled value="">
+              {description}
+            </option>
+            )}
+
           {options.map(option => (
             <option key={option.value} value={option.value}>
               {option.displayValue}
@@ -111,7 +120,8 @@ Select.propTypes = {
   // className is needed so that styled(`Select`) will work
   // (as `rest` is not spread on the outermost component)
   className: PropTypes.string,
-  optional: PropTypes.bool
+  optional: PropTypes.bool,
+  hideArrow: PropTypes.bool
 };
 
 export default Select;

package/src/components/Atoms/Select/Select.md

@@ -32,4 +32,16 @@
     { value: 'Option four', displayValue: 'The fourth option' }
   ]}
 />
+
+<h4>DROPDOWN MENU - hide arrow / just one option</h4>
+<Select
+    label="Label"
+    errorMsg="This is an error message"
+    description="Select an option"
+    greyDescription
+    hideArrow={true}
+    options={[
+        { value: 'Option one', displayValue: 'The first option' }
+    ]}
+/>
 ```