@orangesk/orange-design-system 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": false,
   "engines": {
     "node": "18.x"

package/src/components/Forms/Autocomplete/Autocomplete.mdx

@@ -117,6 +117,10 @@ When rendering a select element is not feasible, for example due to fetching sea
   />
 </Preview>
 
+## With search icon
+
+More about usage with search icon can be found in [Addons documentation](/components/forms/addons).
+
 ## JS module reference
 
 Autocomplete is backed with [accessible-autocomplete | see docs](https://alphagov.github.io/accessible-autocomplete)
@@ -136,7 +140,7 @@ const myAutocomplete = new window.myApp.Autocomplete(
     // fuction that populates search results
     source: (query, populateResults) => {
       // you can filter filter items based on your preference, for example you
-      // can use indexOf() or startsWith() function inside filter, or any different way to filter items 
+      // can use indexOf() or startsWith() function inside filter, or any different way to filter items
       const filteredResults = cities.filter(
         city => city.toLowerCase().indexOf(query.toLowerCase()) !== -1
       );
@@ -153,11 +157,11 @@ const myAutocomplete = new window.myApp.Autocomplete(
     },
     defaultValue: '',
     templates: {
-      // inputValue is a function that receives one argument, the currently selected suggestion. 
+      // inputValue is a function that receives one argument, the currently selected suggestion.
       // It returns the string value to be inserted into the input.
       // example
       inputValue: result => result && result.name ,
-      // suggestion is a function that receives one argument, a suggestion to be displayed. 
+      // suggestion is a function that receives one argument, a suggestion to be displayed.
       // It is used when rendering suggestions, and should return a string, which can contain HTML.
       // example
       suggestion: result => result && \`<strong>\${result.name}</strong>\`,

package/src/components/Forms/Group/Group.mdx

@@ -8,7 +8,8 @@ import Group from './';
 
 # Seach Icon
 
-Add search icon to element using `.input--search-icon`. Icon is visible when element is not focused and doesn't have value. It's required to set empty placeholder. Does not apply for radios and checkboxes.
+Add search icon to element using `.input--search-icon`. Icon is visible when element is not focused and doesn't have value.
+It's required to set empty placeholder. Usage with placeholder is described in [the example below](#search-icon-with-placeholder). Does not apply for radios and checkboxes.
 
 <Preview>
   <Autocomplete
@@ -49,6 +50,61 @@ Add search icon to element using `.input--search-icon`. Icon is visible when ele
   />
 </Preview>
 
+## Search icon with placeholder
+
+When using displaying search icon on input with placeholder, it's required to set the `.input--search-icon-with-placeholder` class on the input element.
+Does not apply for radios and checkboxes.
+
+### Usage with Autocomplete
+
+<Preview>
+  <Autocomplete
+    id="search-autocomplete"
+    options={[
+      '',
+      'apple',
+      'apricot',
+      'banana',
+      'blueberry',
+      'fig',
+      'lime',
+      'lemon',
+      'mango',
+      'orange',
+      'raspberry',
+      'watermelon',
+    ]}
+    data-autocomplete-config={JSON.stringify({
+      customInputClassName: 'input--search-icon-with-placeholder',
+      placeholder: "Select fruit"
+    })}
+    placeholder=""
+  />
+</Preview>
+
+### Usage with TextInput
+
+Regular input
+
+<Preview>
+  <TextInput
+    id="search-1"
+    htmlType="text"
+    className="input--search-icon-with-placeholder"
+    placeholder="Search"
+  />
+</Preview>
+
+Large input
+<Preview>
+  <TextInput
+    id="search-1"
+    htmlType="text"
+    className="input--search-icon-with-placeholder text-input--large"
+    placeholder="Search"
+  />
+</Preview>
+
 # Control Group
 
 Add prefixes and suffixes to control elements. Does not apply for radios and checkboxes.

package/src/components/Forms/Label/styles/style.scss

@@ -2,4 +2,8 @@
 
 .label {
   @include mixins.base();
+
+  &[for] {
+    cursor: pointer;
+  }
 }

package/src/components/Forms/TextInput/styles/config.scss

@@ -56,3 +56,5 @@ $widths: (
     max-width: 100%,
   ),
 );
+
+$background-image-search-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"><path fill="%23999999" fill-rule="evenodd" d="m19.82 18-5.64-5.65a7.81 7.81 0 1 0-1.83 1.82L18 19.82a.63.63 0 0 0 .88 0l.94-.94a.63.63 0 0 0 0-.88Zm-12-4.88a5.32 5.32 0 1 1 0-10.63 5.32 5.32 0 0 1 0 10.63Z" clip-rule="evenodd"/></svg>');

package/src/components/Forms/TextInput/styles/mixins.scss

@@ -49,17 +49,32 @@
   @include generate.css-map($config, $width);
 }
 
-@mixin search-icon {
-  background-image: url('data:image/svg+xml,<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_7771_16629)"><path fill-rule="evenodd" clip-rule="evenodd" d="M19.415 18.1651L13.999 12.7501C15.0907 11.2188 15.5669 9.33307 15.3331 7.46704C15.0993 5.601 14.1727 3.89101 12.737 2.6763C11.3013 1.46159 9.46147 0.830902 7.58249 0.909364C5.70351 0.987826 3.92267 1.7697 2.59325 3.09988C1.26383 4.43006 0.482974 6.21135 0.405586 8.09037C0.328198 9.9694 0.959933 11.8089 2.17547 13.2439C3.391 14.6789 5.10152 15.6045 6.96769 15.8372C8.83385 16.0699 10.7193 15.5927 12.25 14.5001L17.666 19.9151C17.7787 20.0272 17.9311 20.0901 18.09 20.0901C18.2489 20.0901 18.4014 20.0272 18.514 19.9151L19.416 19.0131C19.5278 18.9004 19.5905 18.7481 19.5905 18.5891C19.5905 18.4304 19.5268 18.2779 19.415 18.1651ZM7.89602 13.4941C6.54408 13.4941 5.24751 12.9571 4.29155 12.0011C3.33558 11.0451 2.79852 9.74858 2.79852 8.39664C2.79852 7.0447 3.33558 5.74813 4.29155 4.79216C5.24751 3.83619 6.54408 3.29914 7.89602 3.29914C9.24796 3.29914 10.5445 3.83619 11.5005 4.79216C12.4565 5.74813 12.9935 7.0447 12.9935 8.39664C12.9935 9.74858 12.4565 11.0451 11.5005 12.0011C10.5445 12.9571 9.24796 13.4941 7.89602 13.4941Z" fill="%23999999"/></g><defs><clipPath id="clip0_7771_16629"><rect width="20" height="20" fill="white" transform="translate(0 0.5)"/></clipPath></defs></svg>');
+@mixin search-icon-base {
+  background-image: config.$background-image-search-icon;
   background-repeat: no-repeat;
   @include generate.css-map(config.$background-search, 'default');
 
   &.text-input--large {
     @include generate.css-map(config.$background-search, 'large');
   }
+}
+
+@mixin search-icon {
+  @include search-icon-base;
+
+  &:not(:placeholder-shown),
+  &:focus {
+    background-image: none;
+  }
+}
+
+@mixin search-icon-with-placeholder {
+  @include search-icon-base;
+
+  padding-left: convert.to-rem(40px);
 
   &:not(:placeholder-shown),
   &:focus {
-    background-image: none;      
+    background-image: config.$background-image-search-icon;
   }
 }

package/src/components/Forms/TextInput/styles/style.scss

@@ -22,3 +22,7 @@
 .input--search-icon {
   @include mixins.search-icon();
 }
+
+.input--search-icon-with-placeholder {
+  @include mixins.search-icon-with-placeholder();
+}

package/src/components/Grid/styles/mixins.scss

@@ -40,6 +40,14 @@
       flex-shrink: 1;
       flex-grow: 1;
     }
+
+    > [data-same-height-child] {
+      flex-grow: 0 !important;
+    }
+
+    > :not([data-same-height-child]) {
+      flex-grow: 1 !important;
+    }
   }
 }