@sats-group/ui-lib 87.1.0 → 87.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sats-group/ui-lib",
-  "version": "87.1.0",
+  "version": "87.2.1",
   "description": "SATS web user interface library",
   "author": "developer@sats.no",
   "license": "UNLICENSED",

package/react/components.js

@@ -1,2 +1,2 @@
-const e=["badge","banner","bomb","button","checkbox","chip","chip-selected","collapse","confirmation","context-menu","cropped-image","div-button","dropdown-list","expander","filter","filter-wrapper","flag","form-content","hidden-input","link","link-button","link-card","message","message-field","modal","navigation-card","pagination","progress-bar","radio","scale-bar","search","select","select-option","tag","text","text-area","text-input","toggle","toolbox","visually-button","visually-hidden"],t=[".badge",".banner",".bomb",".button",".checkbox",".chip",".chip-selected",".collapse",".confirmation",".context-menu",".cropped-image",".div-button",".dropdown-list",".expander",".filter",".filter-wrapper",".flag",".form-content",".hidden-input",".link",".link-button",".link-card",".message",".message-field",".modal",".navigation-card",".pagination",".progress-bar",".radio",".scale-bar",".search",".select",".select-option",".tag",".text",".text-area",".text-input",".toggle",".toolbox",".visually-button",".visually-hidden"];export{e as names,t as selectors};
+const e=["badge","banner","bomb","button","checkbox","chip","chip-selected","collapse","confirmation","context-menu","cropped-image","div-button","dropdown-list","expander","filter","filter-wrapper","flag","form-content","hidden-input","link","link-button","link-card","message","message-field","modal","navigation-card","pagination","progress-bar","radio","scale-bar","search","segmented-controller","select","select-option","tag","text","text-area","text-input","toggle","toolbox","visually-button","visually-hidden"],t=[".badge",".banner",".bomb",".button",".checkbox",".chip",".chip-selected",".collapse",".confirmation",".context-menu",".cropped-image",".div-button",".dropdown-list",".expander",".filter",".filter-wrapper",".flag",".form-content",".hidden-input",".link",".link-button",".link-card",".message",".message-field",".modal",".navigation-card",".pagination",".progress-bar",".radio",".scale-bar",".search",".segmented-controller",".select",".select-option",".tag",".text",".text-area",".text-input",".toggle",".toolbox",".visually-button",".visually-hidden"];export{e as names,t as selectors};
 //# sourceMappingURL=components.js.map

package/react/components.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../react/components.ts"],
-  "sourcesContent": ["export const names = [\n  'badge',\n  'banner',\n  'bomb',\n  'button',\n  'checkbox',\n  'chip',\n  'chip-selected',\n  'collapse',\n  'confirmation',\n  'context-menu',\n  'cropped-image',\n  'div-button',\n  'dropdown-list',\n  'expander',\n  'filter',\n  'filter-wrapper',\n  'flag',\n  'form-content',\n  'hidden-input',\n  'link',\n  'link-button',\n  'link-card',\n  'message',\n  'message-field',\n  'modal',\n  'navigation-card',\n  'pagination',\n  'progress-bar',\n  'radio',\n  'scale-bar',\n  'search',\n  'select',\n  'select-option',\n  'tag',\n  'text',\n  'text-area',\n  'text-input',\n  'toggle',\n  'toolbox',\n  'visually-button',\n  'visually-hidden',\n];\n\nexport const selectors = [\n  '.badge',\n  '.banner',\n  '.bomb',\n  '.button',\n  '.checkbox',\n  '.chip',\n  '.chip-selected',\n  '.collapse',\n  '.confirmation',\n  '.context-menu',\n  '.cropped-image',\n  '.div-button',\n  '.dropdown-list',\n  '.expander',\n  '.filter',\n  '.filter-wrapper',\n  '.flag',\n  '.form-content',\n  '.hidden-input',\n  '.link',\n  '.link-button',\n  '.link-card',\n  '.message',\n  '.message-field',\n  '.modal',\n  '.navigation-card',\n  '.pagination',\n  '.progress-bar',\n  '.radio',\n  '.scale-bar',\n  '.search',\n  '.select',\n  '.select-option',\n  '.tag',\n  '.text',\n  '.text-area',\n  '.text-input',\n  '.toggle',\n  '.toolbox',\n  '.visually-button',\n  '.visually-hidden',\n];\n"],
-  "mappings": "AAAO,MAAMA,EAAQ,CACnB,QACA,SACA,OACA,SACA,WACA,OACA,gBACA,WACA,eACA,eACA,gBACA,aACA,gBACA,WACA,SACA,iBACA,OACA,eACA,eACA,OACA,cACA,YACA,UACA,gBACA,QACA,kBACA,aACA,eACA,QACA,YACA,SACA,SACA,gBACA,MACA,OACA,YACA,aACA,SACA,UACA,kBACA,iBACF,EAEaC,EAAY,CACvB,SACA,UACA,QACA,UACA,YACA,QACA,iBACA,YACA,gBACA,gBACA,iBACA,cACA,iBACA,YACA,UACA,kBACA,QACA,gBACA,gBACA,QACA,eACA,aACA,WACA,iBACA,SACA,mBACA,cACA,gBACA,SACA,aACA,UACA,UACA,iBACA,OACA,QACA,aACA,cACA,UACA,WACA,mBACA,kBACF",
+  "sourcesContent": ["export const names = [\n  'badge',\n  'banner',\n  'bomb',\n  'button',\n  'checkbox',\n  'chip',\n  'chip-selected',\n  'collapse',\n  'confirmation',\n  'context-menu',\n  'cropped-image',\n  'div-button',\n  'dropdown-list',\n  'expander',\n  'filter',\n  'filter-wrapper',\n  'flag',\n  'form-content',\n  'hidden-input',\n  'link',\n  'link-button',\n  'link-card',\n  'message',\n  'message-field',\n  'modal',\n  'navigation-card',\n  'pagination',\n  'progress-bar',\n  'radio',\n  'scale-bar',\n  'search',\n  'segmented-controller',\n  'select',\n  'select-option',\n  'tag',\n  'text',\n  'text-area',\n  'text-input',\n  'toggle',\n  'toolbox',\n  'visually-button',\n  'visually-hidden',\n];\n\nexport const selectors = [\n  '.badge',\n  '.banner',\n  '.bomb',\n  '.button',\n  '.checkbox',\n  '.chip',\n  '.chip-selected',\n  '.collapse',\n  '.confirmation',\n  '.context-menu',\n  '.cropped-image',\n  '.div-button',\n  '.dropdown-list',\n  '.expander',\n  '.filter',\n  '.filter-wrapper',\n  '.flag',\n  '.form-content',\n  '.hidden-input',\n  '.link',\n  '.link-button',\n  '.link-card',\n  '.message',\n  '.message-field',\n  '.modal',\n  '.navigation-card',\n  '.pagination',\n  '.progress-bar',\n  '.radio',\n  '.scale-bar',\n  '.search',\n  '.segmented-controller',\n  '.select',\n  '.select-option',\n  '.tag',\n  '.text',\n  '.text-area',\n  '.text-input',\n  '.toggle',\n  '.toolbox',\n  '.visually-button',\n  '.visually-hidden',\n];\n"],
+  "mappings": "AAAO,MAAMA,EAAQ,CACnB,QACA,SACA,OACA,SACA,WACA,OACA,gBACA,WACA,eACA,eACA,gBACA,aACA,gBACA,WACA,SACA,iBACA,OACA,eACA,eACA,OACA,cACA,YACA,UACA,gBACA,QACA,kBACA,aACA,eACA,QACA,YACA,SACA,uBACA,SACA,gBACA,MACA,OACA,YACA,aACA,SACA,UACA,kBACA,iBACF,EAEaC,EAAY,CACvB,SACA,UACA,QACA,UACA,YACA,QACA,iBACA,YACA,gBACA,gBACA,iBACA,cACA,iBACA,YACA,UACA,kBACA,QACA,gBACA,gBACA,QACA,eACA,aACA,WACA,iBACA,SACA,mBACA,cACA,gBACA,SACA,aACA,UACA,wBACA,UACA,iBACA,OACA,QACA,aACA,cACA,UACA,WACA,mBACA,kBACF",
   "names": ["names", "selectors"]
 }

package/react/segmented-controller/index.d.ts

@@ -0,0 +1,2 @@
+import SegmentedController from './segmented-controller';
+export default SegmentedController;

package/react/segmented-controller/index.js

@@ -0,0 +1,2 @@
+import e from"./segmented-controller";var r=e;export{r as default};
+//# sourceMappingURL=index.js.map

package/react/segmented-controller/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../react/segmented-controller/index.ts"],
+  "sourcesContent": ["import SegmentedController from './segmented-controller';\nexport default SegmentedController;\n"],
+  "mappings": "AAAA,OAAOA,MAAyB,yBAChC,IAAOC,EAAQD",
+  "names": ["SegmentedController", "segmented_controller_default"]
+}

package/react/segmented-controller/segmented-controller.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { SegmentedController as Props } from './segmented-controller.types';
+declare const SegmentedController: React.FunctionComponent<Props>;
+export default SegmentedController;

package/react/segmented-controller/segmented-controller.js

@@ -0,0 +1,2 @@
+var f=Object.defineProperty,x=Object.defineProperties;var y=Object.getOwnPropertyDescriptors;var g=Object.getOwnPropertySymbols;var T=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable;var u=(o,e,t)=>e in o?f(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,i=(o,e)=>{for(var t in e||(e={}))T.call(e,t)&&u(o,t,e[t]);if(g)for(var t of g(e))$.call(e,t)&&u(o,t,e[t]);return o},a=(o,e)=>x(o,y(e));import s,{useState as z}from"react";import _ from"classnames";import p from"../text";const P=({tabs:o,onSelectionChange:e})=>{const[t,b]=z(o!=null?o:[]),r=t?t.length:0,n=t.findIndex(l=>l.isSelected),v=l=>{b(d=>d.map((m,c)=>a(i({},m),{isSelected:c===l}))),e==null||e(l)};return s.createElement("div",{className:"segmented-controller"},s.createElement("div",{className:_("segmented-controller__tabs",{[`segmented-controller__tabs--col-${r}`]:r,[`segmented-controller__tabs--selected-${n}`]:n})},s.createElement("div",{className:_("segmented-controller__indicator",{[`segmented-controller__indicator--col-${r}`]:r,[`segmented-controller__indicator--pos-${n}`]:n})}),t?t.map(({label:l,isSelected:d,leadingIcon:m,button:c},N)=>s.createElement("button",a(i({},c),{key:l,onClick:()=>v(N),type:"button",className:_("segmented-controller__tab",{"segmented-controller__tab--selected":d})}),s.createElement(p,{className:"segmented-controller__tab-title",size:p.sizes.small,theme:p.themes.emphasis},m?s.createElement("div",{className:"segmented-controller__tab-icon"},m):null,s.createElement("div",{className:"segmented-controller__tab-label"},l)))):null))};var F=P;export{F as default};
+//# sourceMappingURL=segmented-controller.js.map

package/react/segmented-controller/segmented-controller.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../react/segmented-controller/segmented-controller.tsx"],
+  "sourcesContent": ["import React, { useState } from 'react';\nimport cn from 'classnames';\nimport Text from '../text';\n\nimport type { SegmentedController as Props } from './segmented-controller.types';\n\nconst SegmentedController: React.FunctionComponent<Props> = ({\n  tabs,\n  onSelectionChange,\n}) => {\n  const [localTabs, setLocalTabs] = useState(tabs ?? []);\n  const columnCount = localTabs ? localTabs.length : 0;\n  const selectedIndex = localTabs.findIndex(tab => tab.isSelected);\n  const changeView = (clickedIndex: number) => {\n    setLocalTabs(prevTabs =>\n      prevTabs.map((tab, index) => ({\n        ...tab,\n        isSelected: index === clickedIndex,\n      })),\n    );\n    onSelectionChange?.(clickedIndex);\n  };\n\n  return (\n    <div className=\"segmented-controller\">\n      <div\n        className={cn('segmented-controller__tabs', {\n          [`segmented-controller__tabs--col-${columnCount}`]: columnCount,\n          [`segmented-controller__tabs--selected-${selectedIndex}`]:\n            selectedIndex,\n        })}\n      >\n        <div\n          className={cn('segmented-controller__indicator', {\n            [`segmented-controller__indicator--col-${columnCount}`]:\n              columnCount,\n            [`segmented-controller__indicator--pos-${selectedIndex}`]:\n              selectedIndex,\n          })}\n        />\n        {localTabs\n          ? localTabs.map(\n              ({ label, isSelected, leadingIcon, button }, index) => (\n                <button\n                  {...button}\n                  key={label}\n                  onClick={() => changeView(index)}\n                  type=\"button\"\n                  className={cn('segmented-controller__tab', {\n                    'segmented-controller__tab--selected': isSelected,\n                  })}\n                >\n                  <Text\n                    className=\"segmented-controller__tab-title\"\n                    size={Text.sizes.small}\n                    theme={Text.themes.emphasis}\n                  >\n                    {leadingIcon ? (\n                      <div className=\"segmented-controller__tab-icon\">\n                        {leadingIcon}\n                      </div>\n                    ) : null}\n                    <div className=\"segmented-controller__tab-label\">\n                      {label}\n                    </div>\n                  </Text>\n                </button>\n              ),\n            )\n          : null}\n      </div>\n    </div>\n  );\n};\n\nexport default SegmentedController;\n"],
+  "mappings": "6aAAA,OAAOA,GAAS,YAAAC,MAAgB,QAChC,OAAOC,MAAQ,aACf,OAAOC,MAAU,UAIjB,MAAMC,EAAsD,CAAC,CAC3D,KAAAC,EACA,kBAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAWC,CAAY,EAAIP,EAASI,GAAA,KAAAA,EAAQ,CAAC,CAAC,EAC/CI,EAAcF,EAAYA,EAAU,OAAS,EAC7CG,EAAgBH,EAAU,UAAUI,GAAOA,EAAI,UAAU,EACzDC,EAAcC,GAAyB,CAC3CL,EAAaM,GACXA,EAAS,IAAI,CAACH,EAAKI,IAAWC,EAAAC,EAAA,GACzBN,GADyB,CAE5B,WAAYI,IAAUF,CACxB,EAAE,CACJ,EACAP,GAAA,MAAAA,EAAoBO,EACtB,EAEA,OACEb,EAAA,cAAC,OAAI,UAAU,wBACbA,EAAA,cAAC,OACC,UAAWE,EAAG,6BAA8B,CAC1C,CAAC,mCAAmCO,CAAW,EAAE,EAAGA,EACpD,CAAC,wCAAwCC,CAAa,EAAE,EACtDA,CACJ,CAAC,GAEDV,EAAA,cAAC,OACC,UAAWE,EAAG,kCAAmC,CAC/C,CAAC,wCAAwCO,CAAW,EAAE,EACpDA,EACF,CAAC,wCAAwCC,CAAa,EAAE,EACtDA,CACJ,CAAC,EACH,EACCH,EACGA,EAAU,IACR,CAAC,CAAE,MAAAW,EAAO,WAAAC,EAAY,YAAAC,EAAa,OAAAC,CAAO,EAAGN,IAC3Cf,EAAA,cAAC,SAAAgB,EAAAC,EAAA,GACKI,GADL,CAEC,IAAKH,EACL,QAAS,IAAMN,EAAWG,CAAK,EAC/B,KAAK,SACL,UAAWb,EAAG,4BAA6B,CACzC,sCAAuCiB,CACzC,CAAC,IAEDnB,EAAA,cAACG,EAAA,CACC,UAAU,kCACV,KAAMA,EAAK,MAAM,MACjB,MAAOA,EAAK,OAAO,UAElBiB,EACCpB,EAAA,cAAC,OAAI,UAAU,kCACZoB,CACH,EACE,KACJpB,EAAA,cAAC,OAAI,UAAU,mCACZkB,CACH,CACF,CACF,CAEJ,EACA,IACN,CACF,CAEJ,EAEA,IAAOI,EAAQlB",
+  "names": ["React", "useState", "cn", "Text", "SegmentedController", "tabs", "onSelectionChange", "localTabs", "setLocalTabs", "columnCount", "selectedIndex", "tab", "changeView", "clickedIndex", "prevTabs", "index", "__spreadProps", "__spreadValues", "label", "isSelected", "leadingIcon", "button", "segmented_controller_default"]
+}

package/react/segmented-controller/segmented-controller.scss

@@ -0,0 +1,134 @@
+@use '../../tokens/colours';
+@use '../../tokens/spacing';
+@use '../../tokens/corner-radius';
+
+.segmented-controller {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &__indicator {
+    position: absolute;
+    top: spacing.$xxxs;
+    bottom: spacing.$xxxs;
+    left: spacing.$xxxs;
+    border-radius: corner-radius.$circle;
+    background-color: var(--surface-primary-default);
+    transition: transform 300ms ease;
+    z-index: 0;
+
+    &--pos-0 {
+      transform: translateX(0%);
+    }
+
+    &--pos-1 {
+      transform: translateX(calc(1 * (100% + #{spacing.$xxxs})));
+    }
+
+    &--pos-2 {
+      transform: translateX(calc(2 * (100% + #{spacing.$xxxs})));
+    }
+
+    &--pos-3 {
+      transform: translateX(calc(3 * (100% + #{spacing.$xxxs})));
+    }
+
+    &--col-2 {
+      width: calc((100% - (3 * #{spacing.$xxxs})) / 2);
+    }
+
+    &--col-3 {
+      width: calc((100% - (4 * #{spacing.$xxxs})) / 3);
+    }
+
+    &--col-4 {
+      width: calc((100% - (5 * #{spacing.$xxxs})) / 4);
+    }
+  }
+
+  &__tabs {
+    display: grid;
+    padding: spacing.$xxxs;
+    gap: spacing.$xxxs;
+    background-color: var(--surface-primary-disabled);
+    border-radius: corner-radius.$circle;
+    position: relative;
+    overflow: hidden;
+
+    &--col-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    &--col-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    &--col-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+
+  &__tab {
+    border-radius: corner-radius.$circle;
+    padding: spacing.$xs;
+    background-color: transparent;
+    transition: background-color 400ms ease;
+    text-align: center;
+    border: none;
+    white-space: nowrap;
+    position: relative;
+    z-index: 1;
+
+    &:focus {
+      outline: none;
+    }
+
+    &:hover {
+      background-color: var(--surface-primary-hover);
+      color: var(--on-surface-primary-hover);
+      cursor: pointer;
+      z-index: 1;
+    }
+
+    &--selected {
+      background-color: transparent;
+      color: var(--on-surface-primary-default);
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+  }
+
+  &__tab-title {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: spacing.$xs;
+    position: relative;
+  }
+
+  &__tab-label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__tab-icon {
+    flex-shrink: 0;
+    overflow: hidden;
+    display: flex;
+  }
+
+  &__children {
+    padding: spacing.$l 0;
+    opacity: 0;
+    display: none;
+
+    &--selected {
+      display: block;
+      opacity: 1;
+    }
+  }
+}

package/react/segmented-controller/segmented-controller.types.d.ts

@@ -0,0 +1,11 @@
+import type { ReactElement } from 'react';
+import type { ButtonHtmlProps } from '../types';
+export type SegmentedController = {
+    onSelectionChange?: (index: number) => void;
+    tabs: {
+        label: string;
+        isSelected: boolean;
+        leadingIcon?: ReactElement;
+        button?: ButtonHtmlProps;
+    }[];
+};

package/react/segmented-controller/segmented-controller.types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=segmented-controller.types.js.map

package/react/segmented-controller/segmented-controller.types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/react/style.scss

@@ -24,6 +24,7 @@
 @use "./radio/radio.scss";
 @use "./scale-bar/scale-bar.scss";
 @use "./search/search.scss";
+@use "./segmented-controller/segmented-controller.scss";
 @use "./select/select.scss";
 @use "./tag/tag.scss";
 @use "./text/text.scss";