@orangesk/orange-design-system 2.0.0-beta.11 → 2.0.0-beta.13

package/src/components/Table/Row.tsx

@@ -14,8 +14,9 @@ interface RowProps {
 }
 
 const Row = ({ row }: RowProps) => {
-  const { headers, expandableRows } = React.useContext(TableContext);
-  return headers.map(({ key, cellProps }, index, array) => {
+  const { headers, expandableRows, isResponsive } =
+    React.useContext(TableContext);
+  return headers.map(({ key, label, cellProps }, index, array) => {
     const cell = row[key];
     const isObject = typeof cell === "object" && cell !== null;
     const value = isObject && "value" in cell ? cell.value : cell;
@@ -26,9 +27,14 @@ const Row = ({ row }: RowProps) => {
             .reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})
         : {};
     const rl = row?.expand?.length || 0;
+
     return (
       <React.Fragment key={key}>
-        <Cell {...cellProps} {...props}>
+        <Cell
+          {...cellProps}
+          {...props}
+          {...(isResponsive && { "data-label": label })}
+        >
           {value ? (value as React.ReactNode) : ""}
         </Cell>
         {index === array.length - 1 &&

package/src/components/Table/Table.tsx

@@ -23,6 +23,8 @@ interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
   headers: TableHeader[];
   /** Compact table only takes spaced needed to display its content */
   isCompact?: boolean;
+  /** Enable responsive card layout below md breakpoint for better accessibility */
+  isResponsive?: boolean;
   /** If table has horizontal scrollbar */
   isScrollable?: boolean;
   /** Different colors for even and odd rows. */
@@ -43,6 +45,7 @@ const Table: React.FC<TableProps> = ({
   rows,
   footers,
   isCompact,
+  isResponsive,
   isStriped,
   isScrollable,
   colorScheme,
@@ -60,6 +63,7 @@ const Table: React.FC<TableProps> = ({
     {
       [`${CLASS_ROOT}--striped`]: isStriped,
       [`${CLASS_ROOT}--compact`]: isCompact,
+      [`${CLASS_ROOT}--responsive`]: isResponsive,
       "is-dark": colorScheme === "dark",
       "is-light": colorScheme === "light",
     },
@@ -94,6 +98,7 @@ const Table: React.FC<TableProps> = ({
     footers,
     rows: customRows,
     expandableRows,
+    isResponsive,
   };
 
   const table = (
@@ -108,7 +113,12 @@ const Table: React.FC<TableProps> = ({
           />
         }
       >
-        <table ref={tableRef} className={classes} {...other}>
+        <table
+          ref={tableRef}
+          className={classes}
+          {...(isResponsive && { "data-table": "responsive" })}
+          {...other}
+        >
           {caption && (
             <caption {...(isScrollable && { id: captionId })}>
               {caption}

package/src/components/Table/TableContext.ts

@@ -6,6 +6,7 @@ import { TableContextType } from "./types";
 const TableContext = React.createContext<TableContextType>({
   headers: [],
   rows: [],
+  isResponsive: false,
 });
 
 export default TableContext;

package/src/components/Table/docsData.ts

@@ -208,3 +208,28 @@ export const fillRows: TableRow[] = [
     col2: "3",
   },
 ];
+
+export const responsiveHeaders: TableHeader[] = [
+  {
+    key: "account",
+    label: "Účel spracovania",
+  },
+  {
+    key: "legal",
+    label: "Právny základ a doba spracovania",
+  },
+];
+
+export const responsiveRows: TableRow[] = [
+  {
+    account: "Mesačný poplatok (bez Digitálnej odmeny)",
+    legal:
+      "Právny základ - Súhlas (čl. 6 ods. 1 písm. a) GDPR) a zmluva (čl. 6 ods. 1 písm. b) GDPR) a oprávnený záujem (čl. 6 ods. 1 písm. f) GDPR). Všeobecná doba uchovávania – Počas trvania zmluvného vzťahu.",
+  },
+  {
+    account:
+      "Online predaj tovarov a poskytovanie doplnkových a asistenčných služieb",
+    legal:
+      "Právny základ - Zmluva (čl. 6 ods. 1 písm. b) GDPR) a oprávnený záujem (čl. 6 ods. 1 písm. f) GDPR). Všeobecná doba uchovávania – Počas trvania zmluvného vzťahu a uplynutia záručnej doby na predaný tovar.",
+  },
+];

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

@@ -112,3 +112,40 @@
 @mixin compact {
   width: auto;
 }
+
+@mixin responsive-table {
+  thead {
+    display: none;
+  }
+
+  tbody,
+  tbody tr,
+  tbody td {
+    display: block;
+  }
+
+  tbody tr {
+    padding: space.get("small") 0;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  tbody td {
+    padding: space.get("medium") 0;
+    border-bottom: none;
+    text-align: left !important;
+
+    &:before {
+      content: attr(data-label);
+      display: block;
+      font-weight: 700;
+      margin-bottom: space.get("xsmall");
+    }
+
+    &:first-child {
+      padding-left: 0;
+    }
+  }
+}

package/src/components/Table/styles/style.scss

@@ -47,6 +47,12 @@
       @include mixins.compact;
     }
 
+    &--responsive {
+      @include breakpoint.get("md", "down") {
+        @include mixins.responsive-table;
+      }
+    }
+
     @each $breakpoint in ("default", "sm", "md", "lg", "xl", "xxl") {
       @include breakpoint.get($breakpoint, "down") {
         &-scrollable#{generate.variant-name($breakpoint)} {

package/src/components/Table/types.ts

@@ -37,4 +37,5 @@ export interface TableContextType {
   rows: TableRow[];
   footers?: TableRow[];
   expandableRows?: ExpandableRows;
+  isResponsive?: boolean;
 }

package/src/components/Tag/Tag.tsx

@@ -21,8 +21,6 @@ export type TagSize = "small" | "large";
 interface CommonProps {
   color?: TagColor;
   size?: TagSize;
-  /** @deprecated */
-  isInverse?: boolean;
   isDisabled?: boolean;
   className?: string;
   children?: React.ReactNode;

package/src/components/Tag/styles/style.scss

@@ -20,6 +20,38 @@
       }
     }
 
+    // Special styling for default tags inside .background-secondary parent
+    .background-secondary & {
+      // Target tags that don't have any color variant class
+      // Use negative lookahead-like approach: exclude if class contains any color variant
+      &:not([class*="--orange"]):not([class*="--black"]):not(
+          [class*="--yellow"]
+        ):not([class*="--green"]):not([class*="--blue"]):not(
+          [class*="--success"]
+        ):not([class*="--danger"]):not([class*="--info"]):not(
+          [class*="--warning"]
+        ):not([class*="--transparent"]) {
+        background-color: var(--color-surface-moderate);
+
+        // Clickable tags should have same default background but keep normal interactive states
+        &:where(button),
+        &:where(a) {
+          background-color: var(--color-surface-moderate);
+
+          &:focus-visible,
+          &:hover {
+            background-color: color.$gray-600;
+          }
+
+          &:active,
+          &.is-active {
+            color: var(--color-text-inverse);
+            background-color: var(--color-background-contrast);
+          }
+        }
+      }
+    }
+
     // Transparent class is a special variant of color, it's not possible to make transparent variant for each color at the moment.
     &--transparent {
       @include mixins.color-transparent();

package/src/components/Tooltip/InfoTooltip.tsx

@@ -26,11 +26,7 @@ const InfoTooltip: React.FC<InfoTooltipProps> = ({
     )}
     {...other}
   >
-    <Icon
-      name="assistance"
-      color="info"
-      className={cx(`${CLASS_ROOT}__icon`, className)}
-    />
+    <Icon name="assistance" className={cx(`${CLASS_ROOT}__icon`, className)} />
     <span className="sr-only">Info</span>
   </Tooltip>
 );

package/src/components/index.ts

@@ -47,6 +47,7 @@ import {
   ModalCloseButton,
   ModalTitle,
   ModalProductHeader,
+  ModalProductFooter,
 } from "./Modal";
 import { Section } from "./Section";
 import { Sticker } from "./Sticker";
@@ -156,6 +157,7 @@ export {
   Modal,
   ModalBody,
   ModalCloseButton,
+  ModalProductFooter,
   ModalProductHeader,
   ModalTitle,
   Pagination,

package/src/styles/tokens/color.scss

@@ -112,7 +112,7 @@ $colors-dark: (
 $orange: map.get($colors-light, icon-brand);
 $orange-dark: map.get($colors-light, surface-tertiary);
 $black: map.get($colors-light, icon-default);
-$white: map.get($colors-light, icon-inverse);
+$white: map.get($colors-light, text-inverse);
 $blue: map.get($colors-light, fill-accent1);
 $green: map.get($colors-light, fill-accent2);
 $pink: map.get($colors-light, fill-accent3);

package/build/components/types/src/components/Modal/ModalProductBody.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-interface ModalProductBodyProps extends React.HTMLAttributes<HTMLDivElement> {
-    subtitleSection?: React.ReactNode;
-    listSection?: React.ReactNode;
-    benefitsSection?: React.ReactNode;
-    extraPaymentsSection?: React.ReactNode;
-}
-export declare const CLASS_ROOT = "modal__product-body";
-declare const ModalProductBody: React.ForwardRefExoticComponent<ModalProductBodyProps & React.RefAttributes<HTMLDivElement>>;
-export { ModalProductBody };

package/src/components/Modal/ModalProductBody.tsx

@@ -1,52 +0,0 @@
-import React from "react";
-import cx from "classnames";
-
-interface ModalProductBodyProps extends React.HTMLAttributes<HTMLDivElement> {
-  subtitleSection?: React.ReactNode;
-  listSection?: React.ReactNode;
-  benefitsSection?: React.ReactNode;
-  extraPaymentsSection?: React.ReactNode;
-}
-
-export const CLASS_ROOT = "modal__product-body";
-
-const ModalProductBody = React.forwardRef<
-  HTMLDivElement,
-  ModalProductBodyProps
->(
-  (
-    {
-      className,
-      subtitleSection,
-      listSection,
-      benefitsSection,
-      extraPaymentsSection,
-      ...other
-    },
-    ref,
-  ) => {
-    const classes = cx(CLASS_ROOT, className);
-
-    const subtitleSectionClass = `${CLASS_ROOT}-subtitle-section`;
-    const listSectionClass = `${CLASS_ROOT}-list-section`;
-    const accordionSectionClass = `${CLASS_ROOT}-accordion-section`;
-
-    return (
-      <div className={classes} ref={ref} {...other}>
-        {subtitleSection && (
-          <div className={subtitleSectionClass}>{subtitleSection}</div>
-        )}
-        {listSection && <div className={listSectionClass}>{listSection}</div>}
-        {benefitsSection && (
-          <div className={accordionSectionClass}>{benefitsSection}</div>
-        )}
-        {extraPaymentsSection && (
-          <div className={listSectionClass}>{extraPaymentsSection}</div>
-        )}
-      </div>
-    );
-  },
-);
-ModalProductBody.displayName = "ModalProductBody";
-
-export { ModalProductBody };