aidos-ui 3.0.29 → 3.0.31

package/src/jss.tsx

@@ -137,23 +137,23 @@ const getCSS = (key: string, value): [string, string] => {
   return [cssProp, cssValue];
 };
 
-const flattenJSStyle = (jsStyle: JSStyle): Styles => {
-  if (!jsStyle) {
+const flattenJSStyle = (jss: JSStyle): Styles => {
+  if (!jss) {
     return {};
-  } else if (Array.isArray(jsStyle)) {
+  } else if (Array.isArray(jss)) {
     // @ts-ignore
-    return jsStyle.reduce((acc: Styles, jsStyle: JSStyle) => {
-      return { ...acc, ...flattenJSStyle(jsStyle) };
+    return jss.reduce((acc: Styles, jss: JSStyle) => {
+      return { ...acc, ...flattenJSStyle(jss) };
     }, {});
   } else {
-    return jsStyle;
+    return jss;
   }
 };
 
-export const jss = (jsStyle: JSStyle): string => {
-  jsStyle = flattenJSStyle(jsStyle);
+export const toClassnames = (jss: JSStyle): string => {
+  jss = flattenJSStyle(jss);
 
-  const stylesStack = Object.entries(jsStyle);
+  const stylesStack = Object.entries(jss);
   const classNames = [];
 
   while (stylesStack.length) {
@@ -572,27 +572,27 @@ export const TABLET_MEDIA = `@media (min-width: ${MOBILE}px) and (max-width: ${T
 export const LAPTOP_MEDIA = `@media (min-width: ${TABLET}px) and (max-width: ${LAPTOP}px)`;
 export const DESKTOP_MEDIA = `@media (min-width: ${LAPTOP}px)`;
 
-export function mobile(jsStyle: JSStyle): { [key: string]: JSStyle } {
+export function mobile(jss: JSStyle): { [key: string]: JSStyle } {
   return {
-    [MOBILE_MEDIA]: jsStyle,
+    [MOBILE_MEDIA]: jss,
   };
 }
 
-export function tablet(jsStyle: JSStyle): { [key: string]: JSStyle } {
+export function tablet(jss: JSStyle): { [key: string]: JSStyle } {
   return {
-    [TABLET_MEDIA]: jsStyle,
+    [TABLET_MEDIA]: jss,
   };
 }
 
-export function laptop(jsStyle: JSStyle): { [key: string]: JSStyle } {
+export function laptop(jss: JSStyle): { [key: string]: JSStyle } {
   return {
-    [LAPTOP_MEDIA]: jsStyle,
+    [LAPTOP_MEDIA]: jss,
   };
 }
 
-export function desktop(jsStyle: JSStyle): { [key: string]: JSStyle } {
+export function desktop(jss: JSStyle): { [key: string]: JSStyle } {
   return {
-    [DESKTOP_MEDIA]: jsStyle,
+    [DESKTOP_MEDIA]: jss,
   };
 }
 

package/src/pages/Calendar.mdx

@@ -15,10 +15,10 @@ The calendar component is can be used to represent months, and is customisable t
     </Box>
   )}
   cell={({ today, date, outOfMonth }) => (
-    <Box relative={true} jsStyle={{ opacity: outOfMonth ? 0.2 : 1 }}>
+    <Box relative={true} jss={{ opacity: outOfMonth ? 0.2 : 1 }}>
       {today && (
         <Badge
-          jsStyle={{
+          jss={{
             position: "absolute",
             top: "50%",
             transform: "translateY(-50%) translateX(-75%)",
@@ -40,10 +40,10 @@ The calendar component is can be used to represent months, and is customisable t
     </Box>
   )}
   cell={({ today, date, outOfMonth }) => (
-    <Box relative={true} jsStyle={{ opacity: outOfMonth ? 0.2 : 1 }}>
+    <Box relative={true} jss={{ opacity: outOfMonth ? 0.2 : 1 }}>
       {today && (
         <Badge
-          jsStyle={{
+          jss={{
             position: "absolute",
             top: "50%",
             transform: "translateY(-50%) translateX(-75%)",

package/src/pages/Card.mdx

@@ -20,7 +20,7 @@ Cards can be used to make give cohesion to some UI elements, grouping them visua
     onValueChange={() => {}}
   />
   <TextArea
-    jsStyle={{
+    jss={{
       resize: "vertical",
     }}
     name="message"
@@ -30,7 +30,7 @@ Cards can be used to make give cohesion to some UI elements, grouping them visua
     onValueChange={() => {}}
   />
   <Button
-    jsStyle={{ animation: "all 1s ease-out" }}
+    jss={{ animation: "all 1s ease-out" }}
     onClick={() => {}}
     type="submit"
     label="Subscribe"
@@ -51,7 +51,7 @@ Cards can be used to make give cohesion to some UI elements, grouping them visua
     onValueChange={() => {}}
   />
   <TextArea
-    jsStyle={{
+    jss={{
       resize: "vertical",
     }}
     name="message"
@@ -61,7 +61,7 @@ Cards can be used to make give cohesion to some UI elements, grouping them visua
     onValueChange={() => {}}
   />
   <Button
-    jsStyle={{ animation: "all 1s ease-out" }}
+    jss={{ animation: "all 1s ease-out" }}
     onClick={() => {}}
     type="submit"
     label="Subscribe"

package/src/pages/FlexLayout.mdx

@@ -14,7 +14,7 @@ Because flex is so common there are a `Row` and a `Column` components, with a lo
 
 <Column gap="medium">
   <Row
-    jsStyle={{ border: `1px solid ${cssVar("--highlight")}` }}
+    jss={{ border: `1px solid ${cssVar("--highlight")}` }}
     justify="space-around"
     align="center"
   >
@@ -23,7 +23,7 @@ Because flex is so common there are a `Row` and a `Column` components, with a lo
     <Badge />
   </Row>
   <Row
-    jsStyle={{ border: `1px solid ${cssVar("--highlight")}` }}
+    jss={{ border: `1px solid ${cssVar("--highlight")}` }}
     justify="space-evenly"
     align="center"
   >
@@ -32,7 +32,7 @@ Because flex is so common there are a `Row` and a `Column` components, with a lo
     <Badge />
   </Row>
   <Row
-    jsStyle={{ border: `1px solid ${cssVar("--highlight")}` }}
+    jss={{ border: `1px solid ${cssVar("--highlight")}` }}
     justify="space-between"
     align="center"
   >
@@ -45,7 +45,7 @@ Because flex is so common there are a `Row` and a `Column` components, with a lo
 ```js
 <Column gap="medium">
   <Row
-    jsStyle={{ border: `1px solid ${cssVar("--highlight")}` }}
+    jss={{ border: `1px solid ${cssVar("--highlight")}` }}
     justify="space-around"
     align="center"
   >
@@ -54,7 +54,7 @@ Because flex is so common there are a `Row` and a `Column` components, with a lo
     <Badge />
   </Row>
   <Row
-    jsStyle={{ border: `1px solid ${cssVar("--highlight")}` }}
+    jss={{ border: `1px solid ${cssVar("--highlight")}` }}
     justify="space-evenly"
     align="center"
   >
@@ -63,7 +63,7 @@ Because flex is so common there are a `Row` and a `Column` components, with a lo
     <Badge />
   </Row>
   <Row
-    jsStyle={{ border: `1px solid ${cssVar("--highlight")}` }}
+    jss={{ border: `1px solid ${cssVar("--highlight")}` }}
     justify="space-between"
     align="center"
   >

package/src/pages/Tabs.mdx

@@ -45,7 +45,7 @@ The `Tabs` component is made of a horizontal container with the role `tablist`,
         href: "/Tabs",
         addOn: (
           <Badge
-            jsStyle={{ margin: cssVar("--spacing-m") }}
+            jss={{ margin: cssVar("--spacing-m") }}
             color="highlight"
             size="medium"
           />
@@ -72,7 +72,7 @@ The `Tabs` component is made of a horizontal container with the role `tablist`,
         href: "/Tabs",
         addOn: (
           <Badge
-            jsStyle={{ margin: cssVar("--spacing-m") }}
+            jss={{ margin: cssVar("--spacing-m") }}
             color="highlight"
             size="medium"
           />
@@ -124,7 +124,7 @@ The `Tabs` component is made of a horizontal container with the role `tablist`,
         href: "/Tabs",
         addOn: (
           <Badge
-            jsStyle={{ margin: cssVar("--spacing-m") }}
+            jss={{ margin: cssVar("--spacing-m") }}
             color="highlight"
             size="medium"
           />
@@ -151,7 +151,7 @@ The `Tabs` component is made of a horizontal container with the role `tablist`,
         href: "/Tabs",
         addOn: (
           <Badge
-            jsStyle={{ margin: cssVar("--spacing-m") }}
+            jss={{ margin: cssVar("--spacing-m") }}
             color="highlight"
             size="medium"
           />
@@ -166,3 +166,260 @@ The `Tabs` component is made of a horizontal container with the role `tablist`,
 ```
 
 ---
+
+## Tabs as buttons
+
+You can also use the `Tabs` component with buttons instead of links by omitting the `href` property in the tabs.
+
+<Column gap="medium">
+  <Tabs
+    aria-controls="foo"
+    tabs={[
+      {
+        selected: true,
+        label: "Tab 1",
+      },
+      {
+        selected: false,
+        label: "Tab 2",
+      },
+      {
+        selected: false,
+        label: "Tab 3",
+      },
+    ]}
+  />
+  <Tabs
+    aria-controls="foo"
+    tabs={[
+      {
+        selected: false,
+        label: "Tab 1",
+      },
+      {
+        selected: true,
+        label: "Tab 2",
+      },
+      {
+        addOn: (
+          <Badge
+            jss={{ margin: cssVar("--spacing-m") }}
+            color="highlight"
+            size="medium"
+          />
+        ),
+        selected: false,
+        label: "Tab 3",
+      },
+    ]}
+  />
+  <Tabs
+    aria-controls="foo"
+    tabs={[
+      {
+        selected: false,
+        label: "Tab 1",
+      },
+      {
+        selected: false,
+        label: "Tab 2",
+      },
+      {
+        addOn: (
+          <Badge
+            jss={{ margin: cssVar("--spacing-m") }}
+            color="highlight"
+            size="medium"
+          />
+        ),
+        addOnPosition: "end",
+        selected: true,
+        label: "Tab 3",
+      },
+    ]}
+  />
+</Column>
+
+```js
+<Column gap="medium">
+  <Tabs
+    aria-controls="foo"
+    tabs={[
+      {
+        selected: true,
+        label: "Tab 1",
+      },
+      {
+        selected: false,
+        label: "Tab 2",
+      },
+      {
+        selected: false,
+        label: "Tab 3",
+      },
+    ]}
+  />
+  <Tabs
+    aria-controls="foo"
+    tabs={[
+      {
+        selected: false,
+        label: "Tab 1",
+      },
+      {
+        selected: true,
+        label: "Tab 2",
+      },
+      {
+        addOn: (
+          <Badge
+            jss={{ margin: cssVar("--spacing-m") }}
+            color="highlight"
+            size="medium"
+          />
+        ),
+        selected: false,
+        label: "Tab 3",
+      },
+    ]}
+  />
+  <Tabs
+    aria-controls="foo"
+    tabs={[
+      {
+        selected: false,
+        label: "Tab 1",
+      },
+      {
+        selected: false,
+        label: "Tab 2",
+      },
+      {
+        addOn: (
+          <Badge
+            jss={{ margin: cssVar("--spacing-m") }}
+            color="highlight"
+            size="medium"
+          />
+        ),
+        addOnPosition: "end",
+        selected: true,
+        label: "Tab 3",
+      },
+    ]}
+  />
+</Column>
+```
+
+## Label pre renderers
+
+You can customize how tab labels are rendered by providing a `labelRenderer` function that takes the label value and returns a ReactNode.
+
+<Column>
+  <Tabs
+    aria-controls="foo"
+    labelRenderer={(value) => value.split(" ").map((word, index) => index % 2 === 0 ? <strong key={index}>{word} </strong> : word + " ")}
+    tabs={[
+      {
+        href: "/Tabs",
+        selected: true,
+        label: "Bold Tab 1",
+      },
+      {
+        href: "/Tabs",
+        selected: false,
+        label: "Bold Tab 2",
+      },
+      {
+        href: "/Tabs",
+        selected: false,
+        label: "Bold Tab 3",
+      },
+    ]}
+  />
+</Column>
+
+```js
+<Column>
+  <Tabs
+    aria-controls="foo"
+    labelRenderer={(value) => value.split(" ").map((word, index) => index % 2 === 0 ? <strong key={index}>{word} </strong> : word + " ")}
+    tabs={[
+      {
+        href: "/Tabs",
+        selected: true,
+        label: "Bold Tab 1",
+      },
+      {
+        href: "/Tabs",
+        selected: false,
+        label: "Bold Tab 2",
+      },
+      {
+        href: "/Tabs",
+        selected: false,
+        label: "Bold Tab 3",
+      },
+    ]}
+  />
+</Column>
+```
+
+
+## Custom tab styles
+
+You can provide custom styles to individual tabs using the `tabJSStyle` prop, which can either be a style object or a function that receives the tab's selected state.
+
+<Column>
+  <Tabs
+    aria-controls="foo"
+    tabJSStyle={(data) => ({
+      borderBottom: data.selected ? "2px solid cyan" : "2px solid magenta",
+    })}
+    tabs={[
+      {
+        href: "/Tabs",
+        selected: true,
+        label: "Styled Tab 1",
+      },
+      {
+        href: "/Tabs",
+        selected: false,
+        label: "Styled Tab 2",
+      },
+      {
+        href: "/Tabs",
+        selected: false,
+        label: "Styled Tab 3",
+      },
+    ]}
+  />
+</Column>
+
+```js
+<Column>
+  <Tabs
+    aria-controls="foo"
+    tabJSStyle={(data) => ({
+      borderBottom: data.selected ? "2px solid cyan" : "2px solid magenta",
+    })}
+    tabs={[
+      {
+        href: "/Tabs",
+        selected: true,
+        label: "Styled Tab 1",
+      },
+      {
+        href: "/Tabs",
+        selected: false,
+        label: "Styled Tab 2",
+      },
+      {
+        href: "/Tabs",
+        selected: false,
+        label: "Styled Tab 3",
+      },
+    ]}
+  />
+</Column>
+```

package/src/pages/TextPairing.mdx

@@ -11,7 +11,7 @@ The `TextPairing` is a seemingly simple component that can be used to represent
 In its simplest form a `TextPairing` is formed of two text elements (headline and body) laid out vertically. However it accepts multiple props to enable much more complex representations.
 
 <Column
-  jsStyle={{ [" > *"]: { borderBottom: `1px solid ${cssVar("--divider")}` } }}
+  jss={{ [" > *"]: { borderBottom: `1px solid ${cssVar("--divider")}` } }}
 >
   <TextPairing headline="Headline" body="Body" />
   <TextPairing headline="Headline" headlineBold body="Body" />
@@ -82,7 +82,7 @@ In its simplest form a `TextPairing` is formed of two text elements (headline an
 
 ```js
 <Column
-  jsStyle={{ [" > *"]: { borderBottom: `1px solid ${cssVar("--divider")}` } }}
+  jss={{ [" > *"]: { borderBottom: `1px solid ${cssVar("--divider")}` } }}
 >
   <TextPairing headline="Headline" body="Body" />
   <TextPairing headline="Headline" headlineBold body="Body" />

package/src/pages/TimeInput.mdx

@@ -6,7 +6,7 @@ import { Icon } from "../Icon";
 
 The `TimeInput` component can be used to get the time (hour and minute) from the user.
 
-<Column gap="medium" jsStyle={{ maxWidth: 150 }}>
+<Column gap="medium" jss={{ maxWidth: 150 }}>
   <TimeInput time={new Date()} onTimeChange={() => {}} />
   <TimeInput
     addOn={<Icon icon="fa-clock-o" color="primary" size="medium" />}
@@ -38,7 +38,7 @@ The `TimeInput` component can be used to get the time (hour and minute) from the
 </Column>
 
 ```js
-<Column gap="medium" jsStyle={{ maxWidth: 150 }}>
+<Column gap="medium" jss={{ maxWidth: 150 }}>
   <TimeInput time={new Date()} onTimeChange={() => {}} />
   <TimeInput
     addOn={<Icon icon="fa-clock-o" color="primary" size="medium" />}

package/src/pages/_app.tsx

@@ -241,7 +241,7 @@ export default function App({ Component, pageProps }: AppProps) {
         <Providers themes={{ light: lightTheme, dark: darkTheme }}>
           <DocsMDXProvider>
             <BaseView
-              jsStyle={[
+              jss={[
                 {
                   height: "100%",
                   overflow: "hidden",
@@ -282,7 +282,7 @@ export default function App({ Component, pageProps }: AppProps) {
               ]}
             >
               <Row
-                jsStyle={{
+                jss={{
                   gridArea: "header",
                   borderBottom: `1px solid ${cssVar("--divider")}`,
                 }}
@@ -320,7 +320,7 @@ export default function App({ Component, pageProps }: AppProps) {
                   />
                   <IconButton
                     aria-label={showList ? "Hide list" : "Open list"}
-                    jsStyle={[
+                    jss={[
                       laptop({ display: "none" }),
                       desktop({ display: "none" }),
                     ]}
@@ -334,7 +334,7 @@ export default function App({ Component, pageProps }: AppProps) {
               </Row>
               <ListDivider />
               <Column
-                jsStyle={[
+                jss={[
                   {
                     gridArea: "list",
                     zIndex: 1,
@@ -364,7 +364,7 @@ export default function App({ Component, pageProps }: AppProps) {
                   bare
                   id="main-list"
                   navigation={true}
-                  jsStyle={[{ overflow: "scroll" }]}
+                  jss={[{ overflow: "scroll" }]}
                   ariaLabel={"API"}
                 >
                   {(isQuerying ? queriedPages : pages).map((element, index) => {
@@ -424,7 +424,7 @@ export default function App({ Component, pageProps }: AppProps) {
                 </List>
               </Column>
               <BaseView
-                jsStyle={[
+                jss={[
                   {
                     borderLeft: `1px solid ${cssVar("--divider")}`,
                     gridArea: "content",

package/src/pages/css-in-js.mdx

@@ -106,7 +106,7 @@ For example:
 
 <Row justify="center">
   <Button
-    jsStyle={{ border: `10px solid ${cssVar("--warning")}` }}
+    jss={{ border: `10px solid ${cssVar("--warning")}` }}
     label="Hello"
     color="positive"
     onClick={() => {}}
@@ -116,7 +116,7 @@ For example:
 ```js
 <Row justify="center">
   <Button
-    jsStyle={{ border: `10px solid ${cssVar("--warning")}` }}
+    jss={{ border: `10px solid ${cssVar("--warning")}` }}
     label="Hello"
     color="positive"
     onClick={() => {}}