@axinom/mosaic-ui 0.45.0-rc.12 → 0.45.0-rc.14

package/dist/components/Tabs/Tab/CustomTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomTab.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/Tab/CustomTab.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,0BAA0B,EAAO,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGvE,eAAO,MAAM,SAAS,EAAE,0BAA0B,CAAC,QAAQ,CA2B1D,CAAC"}
+{"version":3,"file":"CustomTab.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/Tab/CustomTab.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,0BAA0B,EAAO,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGvE,eAAO,MAAM,SAAS,EAAE,0BAA0B,CAAC,QAAQ,CA4B1D,CAAC"}

package/dist/components/Tabs/TabList/ScrollContainer/ScrollContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollContainer.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tabs/TabList/ScrollContainer/ScrollContainer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EA+BnC,CAAC"}
+{"version":3,"file":"ScrollContainer.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tabs/TabList/ScrollContainer/ScrollContainer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAiCnC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.45.0-rc.12",
+  "version": "0.45.0-rc.14",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,7 +32,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.18-rc.12",
+    "@axinom/mosaic-core": "^0.4.18-rc.14",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.11.8",
     "clsx": "^1.1.0",
@@ -105,5 +105,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3d1d61402edfb5b7fe5281f95791d31a4fb34174"
+  "gitHead": "e1e4397be63c7f2dd8b33831ab8938554a5c59e8"
 }

package/src/components/FormStation/FormStation.stories.tsx

@@ -318,6 +318,7 @@ export const TabbedContent: StoryObj<typeof Details> = (() => {
         shortDescription: Yup.string().required().label('Short Description'),
         cast: Yup.array<DetailsValues>().of(Yup.string()).min(1).label('Cast'),
       }),
+      edgeToEdgeContent: true,
       initialData: {
         loading: false,
         data: {
@@ -371,83 +372,103 @@ export const TabbedContent: StoryObj<typeof Details> = (() => {
                 ]}
                 as={SelectField}
               />
-
-              <Field
-                name="shortDescription"
-                label="Short Description"
-                placeholder="Enter a short description..."
-                as={SingleLineTextField}
-              />
-              <Field
-                name="longDescription"
-                label="Long Description"
-                placeholder="Enter a description..."
-                as={SingleLineTextField}
-              />
-              <Field name="cast" label="Cast" as={CustomTagsField} />
-              <Field name="released" label="Released" as={DateTimeTextField} />
-              <Field
-                name="password"
-                label="Password"
-                as={SingleLineTextField}
-                type="password"
-              />
-
-              <Field
-                name="licenses"
-                label="License Countries"
-                tagsOptions={[
-                  { value: 'DE', key: 'Germany' },
-                  { value: 'EE', key: 'Estonia' },
-                  { value: 'LK', key: 'Sri Lanka' },
-                ]}
-                as={TagsField}
-                displayKey="key"
-                valueKey="value"
-              />
-              <Field
-                name="list"
-                label="Subtitles"
-                columns={[
-                  {
-                    propertyName: 'id',
-                    label: 'Id',
-                    size: '50px',
-                  },
-                  {
-                    propertyName: 'locale',
-                    label: 'Locale',
-                    dataEntryRender: createInputRenderer({
-                      placeholder: 'Enter Locale',
-                    }),
-                  },
-                  {
-                    propertyName: 'country',
-                    label: 'Country',
-                    dataEntryRender: createSelectRenderer({
-                      options: [
-                        { value: 'Country 10', label: 'Country 10' },
-                        { value: 'Country 11', label: 'Country 11' },
-                        { value: 'Country 12', label: 'Country 12' },
-                      ],
-                      placeholder: 'Enter Country',
-                    }),
-                  },
-                ]}
-                data={listData}
-                positionPropertyName={'position'}
-                allowReordering={true}
-                allowRowDragging={true}
-                allowNewData={true}
-                as={DynamicDataListField}
-              />
-              <Field name="archived" label="Set Archived" as={CheckboxField} />
-              <Field
-                name="timestamp"
-                label="Timestamp"
-                mask="00:00:00.000"
-                as={MaskedSingleLineTextField}
-              />
+              <Tabs>
+                <TabList>
+                  <Tab>Nested Tab 1</Tab>
+                  <Tab>Nested Tab 2</Tab>
+                </TabList>
+                <TabPanel>
+                  <FormGrid>
+                    <Field
+                      name="shortDescription"
+                      label="Short Description"
+                      placeholder="Enter a short description..."
+                      as={SingleLineTextField}
+                    />
+                    <Field
+                      name="longDescription"
+                      label="Long Description"
+                      placeholder="Enter a description..."
+                      as={SingleLineTextField}
+                    />
+                    <Field name="cast" label="Cast" as={CustomTagsField} />
+                    <Field
+                      name="released"
+                      label="Released"
+                      as={DateTimeTextField}
+                    />
+                    <Field
+                      name="password"
+                      label="Password"
+                      as={SingleLineTextField}
+                      type="password"
+                    />
+                  </FormGrid>
+                </TabPanel>
+                <TabPanel>
+                  <FormGrid>
+                    <Field
+                      name="licenses"
+                      label="License Countries"
+                      tagsOptions={[
+                        { value: 'DE', key: 'Germany' },
+                        { value: 'EE', key: 'Estonia' },
+                        { value: 'LK', key: 'Sri Lanka' },
+                      ]}
+                      as={TagsField}
+                      displayKey="key"
+                      valueKey="value"
+                    />
+                    <Field
+                      name="list"
+                      label="Subtitles"
+                      columns={[
+                        {
+                          propertyName: 'id',
+                          label: 'Id',
+                          size: '50px',
+                        },
+                        {
+                          propertyName: 'locale',
+                          label: 'Locale',
+                          dataEntryRender: createInputRenderer({
+                            placeholder: 'Enter Locale',
+                          }),
+                        },
+                        {
+                          propertyName: 'country',
+                          label: 'Country',
+                          dataEntryRender: createSelectRenderer({
+                            options: [
+                              { value: 'Country 10', label: 'Country 10' },
+                              { value: 'Country 11', label: 'Country 11' },
+                              { value: 'Country 12', label: 'Country 12' },
+                            ],
+                            placeholder: 'Enter Country',
+                          }),
+                        },
+                      ]}
+                      data={listData}
+                      positionPropertyName={'position'}
+                      allowReordering={true}
+                      allowRowDragging={true}
+                      allowNewData={true}
+                      as={DynamicDataListField}
+                    />
+                    <Field
+                      name="archived"
+                      label="Set Archived"
+                      as={CheckboxField}
+                    />
+                    <Field
+                      name="timestamp"
+                      label="Timestamp"
+                      mask="00:00:00.000"
+                      as={MaskedSingleLineTextField}
+                    />
+                  </FormGrid>
+                </TabPanel>
+              </Tabs>
             </FormGrid>
           </TabPanel>
           <TabPanel>

package/src/components/Tabs/Tab/CustomTab.scss

@@ -4,32 +4,31 @@
   @include boxSizing;
 
   display: grid;
-  height: 49px;
-  min-width: 180px;
-  background-color: $blue;
-  color: white;
-  font-size: 16px;
-  border: 1px solid $blue;
+  height: 50px;
+  color: $blue;
+  font-size: 14px;
+  font-weight: bold;
   border-bottom: none;
 
-  padding: 0 15px;
+  padding: 0 20px;
 
   cursor: pointer;
+  outline: none;
 
   &.selected {
     background: white;
-    color: $dark-gray;
-    border: 1px solid $light-gray;
-    border-bottom: none;
+    color: $dark-blue;
   }
 
-  &.disabled {
-    background-color: $dark-gray;
-    cursor: default;
+  &:hover:not(.selected):not(.disabled) {
+    background-color: $blue;
+    transition: background-color $confirmation-transition linear;
+    color: white;
   }
 
-  &:focus {
-    outline: none;
+  &.disabled {
+    color: $gray;
+    cursor: default;
   }
 }
 

package/src/components/Tabs/Tab/CustomTab.tsx

@@ -22,6 +22,7 @@ export const CustomTab: ReactTabsFunctionComponent<TabProps> = ({
       {...otherProps}
       className={classes.tab}
       selectedClassName={classes.selected}
+      disabledClassName={classes.disabled}
       data-test-id="tab"
     >
       <div className={classes.content} ref={ref}>

package/src/components/Tabs/TabList/CustomTabList.scss

@@ -4,4 +4,6 @@
   border: none;
   margin: 0;
   padding: 0;
+  background-color: $light-gray-2;
+  border-top: 1px solid $light-gray-2;
 }

package/src/components/Tabs/TabList/ScrollContainer/ScrollContainer.scss

@@ -7,8 +7,7 @@
   width: 100%;
   white-space: nowrap;
   grid-auto-flow: column;
-  grid-auto-columns: minmax(max-content, auto);
-  gap: 2px;
+  grid-auto-columns: min-content;
 
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
@@ -21,11 +20,9 @@
 
 .container {
   display: grid;
-  // grid-template-columns: 50px auto 50px;
 
   &.scroll {
     grid-template-columns: 50px auto 50px;
-    gap: 2px;
   }
 }
 

package/src/components/Tabs/TabList/ScrollContainer/ScrollContainer.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import React from 'react';
-import { Button } from '../../../Buttons';
+import { Button, ButtonContext } from '../../../Buttons';
 import { IconName } from '../../../Icons';
 import classes from './ScrollContainer.scss';
 import { useScroll } from './useScroll';
@@ -18,6 +18,7 @@ export const ScrollContainer: React.FC = ({ children }) => {
   return (
     <div className={clsx(classes.container, { [classes.scroll]: showScroll })}>
       <Button
+        buttonContext={ButtonContext.Icon}
         icon={IconName.ChevronLeft}
         onButtonClicked={scrollLeft}
         className={clsx({ [classes.hide]: !showScroll })}
@@ -29,6 +30,7 @@ export const ScrollContainer: React.FC = ({ children }) => {
       </div>
 
       <Button
+        buttonContext={ButtonContext.Icon}
         icon={IconName.ChevronRight}
         onButtonClicked={scrollRight}
         className={clsx({ [classes.hide]: !showScroll })}

package/src/components/Tabs/TabPanel/CustomTabPanel.scss

@@ -1,7 +1,6 @@
 @import '../../../styles/common.scss';
 
 .tabpanel {
-  border-bottom: 1px solid $light-gray;
   display: none;
 
   &.selected {

package/src/components/Tabs/Tabs.stories.tsx

@@ -8,13 +8,14 @@ import { Tab, TabList, TabPanel, Tabs } from '.';
 import { createGroups } from '../../helpers/storybook';
 
 const groups = createGroups({
-  Storybook: ['amount'],
+  Storybook: ['amount', 'disabled'],
 });
 
 type TabsStoryComponentProps = React.FC<
   typeof Tabs & {
     amount: number;
     selectedIndex?: number;
+    disabled?: boolean;
   }
 >;
 
@@ -29,6 +30,11 @@ const meta: Meta<TabsStoryComponentProps> = {
       type: 'number',
       control: { type: 'number', min: 0, max: 30 },
     },
+    disabled: {
+      ...groups.disabled,
+      description: '<b>[Storybook only]</b> Disable the tabs.',
+      type: 'boolean',
+    },
     children: {
       table: {
         disable: true,
@@ -40,13 +46,20 @@ const meta: Meta<TabsStoryComponentProps> = {
   },
 };
 
-const generateItems = (count: number): [JSX.Element[], JSX.Element[]] => {
+const generateItems = (
+  count: number,
+  disabled?: boolean,
+): [JSX.Element[], JSX.Element[]] => {
   const tabs = [];
   const panels = [];
 
   for (let i = 0; i < count; i++) {
     const title = faker.random.words(faker.datatype.number({ min: 1, max: 3 }));
-    tabs.push(<Tab key={i}>{title}</Tab>);
+    tabs.push(
+      <Tab key={i} disabled={disabled}>
+        {title}
+      </Tab>,
+    );
     panels.push(
       <TabPanel key={i}>
         <h2>{title}</h2>
@@ -62,7 +75,7 @@ export default meta;
 
 export const Default: StoryObj<TabsStoryComponentProps> = {
   render: (props) => {
-    const [tabs, panels] = generateItems(props.amount);
+    const [tabs, panels] = generateItems(props.amount, props.disabled);
 
     return (
       <Tabs>