@sats-group/ui-lib 74.2.0 → 75.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sats-group/ui-lib",
-  "version": "74.2.0",
+  "version": "75.0.0",
   "description": "SATS web user interface library",
   "engines": {
     "node": "^18 || ^20",
@@ -23,6 +23,7 @@
   "author": "developer@sats.no",
   "license": "UNLICENSED",
   "peerDependencies": {
+    "@sats-group/icons": "^8.0.0",
     "classnames": "^2.5.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"

package/react/select/select.scss

@@ -1,6 +1,7 @@
 @use '../../tokens/corner-radius';
 @use '../../tokens/light';
 @use '../../tokens/spacing';
+@use '../../tokens/font-sizes';
 
 .select {
   display: flex;
@@ -35,44 +36,25 @@
   &__chevron {
     color: light.$on-surface-primary-default;
     position: absolute;
-    right: 13px;
+    right: clamp(spacing.$s, 2vw, spacing.$m);
     top: 50%;
     transform: translateY(-50%);
     pointer-events: none;
-  }
-
-  &__icon {
-    color: light.$on-surface-primary-default;
-    position: absolute;
-    left: 13px;
-    top: 50%;
-    width: 20px;
-    transform: translateY(-50%);
-
-    svg {
-      display: block;
-      max-width: 100%;
-      height: auto;
-    }
-  }
-
-  :root &--icon {
-    select {
-      padding-left: 40px; // NOTE: Space for icon
-    }
+    display: flex;
+    align-items: center
   }
 
   select {
+    @include font-sizes.normal(basic);
     color: light.$on-surface-primary-default;
     appearance: none;
     background-color: transparent;
     border: 1px solid light.$ge-border-default;
     display: block;
-    font-size: 16px;
-    font-family: 'Inter', sans-serif;
-    line-height: 1.25;
-    padding: 13px 15px;
-    padding-right: 35px; // NOTE: Space for chevron icon
+    padding-top: clamp(spacing.$xs, 2vw, spacing.$s);
+    padding-bottom: clamp(spacing.$xs, 2vw, spacing.$s);
+    padding-left: clamp(spacing.$s, 2vw, spacing.$m);
+    padding-right: spacing.$l; // NOTE: Space for chevron icon
     position: relative;
     width: 100%;
     border-radius: corner-radius.$s;
@@ -82,11 +64,6 @@
         &:not(:disabled) {
           background-color: light.$surface-primary-hover;
           border-color: light.$surface-primary-hover;
-
-          ~ .select__chevron,
-          ~ .select__icon {
-            color: light.$on-surface-primary-default;
-          }
         }
       }
     }
@@ -95,11 +72,6 @@
       &:not(:disabled) {
         background-color: light.$surface-primary-default;
         border-color: light.$ge-border-focused;
-
-        ~ .select__chevron,
-        ~ .select__icon {
-          color: light.$on-surface-primary-default;
-        }
       }
     }
 
@@ -111,8 +83,7 @@
     &:disabled {
       color: light.$on-surface-primary-disabled;
 
-      ~ .select__chevron,
-      ~ .select__icon {
+      ~ .select__native-wrapper {
         color: light.$on-surface-primary-disabled;
       }
     }

package/react/select/select.tsx

@@ -3,9 +3,9 @@ import * as React from 'react';
 
 import useInputValidation from '../use-input-validation';
 
-import ChevronDown from './chevron-down';
 import Option from '../select-option/select-option';
 import Text from '../text';
+import SvgArrowDown from '@sats-group/icons/18/arrow-down';
 
 import { labelPositions, Select as Props } from './select.types';
 
@@ -18,7 +18,6 @@ const RefSelect = React.forwardRef<
     {
       children,
       className,
-      icon,
       isLabelVisible = true,
       label,
       labelPosition = labelPositions.stacked,
@@ -43,7 +42,6 @@ const RefSelect = React.forwardRef<
       <label
         className={cn('select', className, {
           'select--error': error,
-          'select--icon': icon,
           [`select--label-position-${labelPosition}`]: labelPosition
             ? labelPositions[labelPosition]
             : undefined,
@@ -79,8 +77,9 @@ const RefSelect = React.forwardRef<
               <Option key={option.value} {...option} />
             ))}
           </select>
-          {icon && <div className="select__icon">{icon}</div>}
-          <ChevronDown className="select__chevron" />
+          <span className="select__chevron">
+            <SvgArrowDown />
+          </span>
         </div>
 
         {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}

package/react/select/select.types.ts

@@ -9,7 +9,6 @@ export const labelPositions = {
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type Select<OptionExtra = any> = {
-  icon?: React.ReactNode;
   isLabelVisible?: boolean;
   label?: string;
   labelPosition?: ObjectValues<typeof labelPositions>;

package/tokens/font-sizes.scss

@@ -41,8 +41,8 @@ $headline: (
   font-weight: bold;
   text-transform: uppercase;
   @if map.has-key($headline, $size) {
-    font-size: map-get(map-get($headline, $size), fallback);
-    font-size: map-get(map-get($headline, $size), clamp);
+    font-size: map.get(map.get($headline, $size), fallback);
+    font-size: map.get(map.get($headline, $size), clamp);
   } @else {
     @error "Size #{$size} does not exist on Headline.";
   }
@@ -87,8 +87,8 @@ $normal: (
   @if map.has-key($normal, $size) {
     font-family: font-names.$brand, sans-serif;
     font-weight: normal;
-    font-size: map-get(map-get($normal, $size), fallback);
-    font-size: map-get(map-get($normal, $size), clamp);
+    font-size: map.get(map.get($normal, $size), fallback);
+    font-size: map.get(map.get($normal, $size), clamp);
   } @else {
     @error "Size #{$size} does not exist on Normal.";
   }

package/react/select/chevron-down.tsx

@@ -1,24 +0,0 @@
-import * as React from 'react';
-
-const ChevronDown: React.FunctionComponent<{ className?: string }> = ({
-  className,
-}) => (
-  <svg
-    width="14"
-    height="8"
-    viewBox="0 0 14 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <path
-      d="M12 1.5L7 6.5L2 1.5"
-      stroke="currentColor"
-      strokeWidth="1.8"
-      strokeMiterlimit="10"
-      strokeLinecap="square"
-    />
-  </svg>
-);
-
-export default ChevronDown;

package/react/select-option/README.md

@@ -1,3 +0,0 @@
-# SelectOption
-
-This component is not intended to be used directly. It is used by `Select` internally but needs to live in a separate folder in order for a TypeScript file to be created for it.