NavigationTabs Styling

.changeset/twenty-actors-tease.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-tabs": minor
+---
+
+NavigationTabs: Update styles to handle different scenarios

.storybook/preview.tsx

@@ -1,4 +1,4 @@
 import * as React from "react";
 import wonderBlocksTheme from "./wonder-blocks-theme";
 import {Decorator} from "@storybook/react";
 import {semanticColor} from "@khanacademy/wonder-blocks-tokens";
@@ -115,9 +115,42 @@
     );
 };
 
+/**
+ * Wraps a story with `<div dir="rtl">` so it is shown in rtl mode.
+ */
+const withLanguageDirection: Decorator = (Story, context) => {
+    if (context.globals.direction === "rtl") {
+        return (
+            <div dir="rtl">
+                <Story />
+            </div>
+        )
+    } else {
+        return <Story />
+    }
+}
+
+/**
+ * Wraps a story with styling that simulates [zoom](https://developer.mozilla.org/en-US/docs/Web/CSS/zoom).
+ *
+ * Note: It is still important to test with real browser zoom in different
+ * browsers. For example, using the CSS zoom property in Safari looks a bit
+ * different than when you zoom in the browser.
+ */
+const withZoom: Decorator = (Story, context) => {
+    if (context.globals.zoom) {
+        return (
+            <div style={{ zoom: context.globals.zoom }}>
+                <Story />
+            </div>
+        )
+    }
+    return <Story />
+}
+
 const preview: Preview = {
     parameters,
-    decorators: [withThemeSwitcher],
+    decorators: [withThemeSwitcher, withLanguageDirection, withZoom],
     globalTypes: {
         // Allow the user to select a theme from the toolbar.
         theme: {
@@ -143,6 +176,48 @@
                 dynamicTitle: true,
             },
         },
+        direction: {
+            description: "The language direction to use",
+            toolbar: {
+                title: "Language Direction",
+                icon: "globe",
+                items: [
+                    {
+                        value: "ltr",
+                        icon: "arrowrightalt",
+                        title: "Left to Right",
+                    },
+                    {
+                        value: "rtl",
+                        icon: "arrowleftalt",
+                        title: "Right to Left",
+                    },
+                ],
+                dynamicTitle: true,
+            },
+        },
+        zoom: {
+            description: "Preset zoom level",
+            toolbar: {
+                title: "Zoom Presets",
+                icon: "zoom",
+                items: [
+                    {
+                        // undefined so the there is no zoom value set
+                        value: undefined,
+                        title: "default",
+                    },
+                    {
+                        value: "2",
+                        title: "200%",
+                    },
+                    {
+                        value: "4",
+                        title: "400%",
+                    },
+                ],
+            },
+        }
     },
 
     tags: ["autodocs"],

__docs__/components/all-variants.tsx

@@ -5,7 +5,9 @@ import {StyleSheet} from "aphrodite";
 import {addStyle} from "@khanacademy/wonder-blocks-core";
 import {
     border,
+    breakpoint,
     semanticColor,
+    sizing,
     spacing,
 } from "@khanacademy/wonder-blocks-tokens";
 
@@ -14,6 +16,7 @@ import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 const StyledTable = addStyle("table");
 const StyledTh = addStyle("th");
 const StyledTd = addStyle("td");
+const StyledUl = addStyle("ul");
 
 type Variant = {name: string; props: StrictArgs};
 
@@ -22,7 +25,7 @@ type Props = {
      * The children as a function that receives the state props used to render
      * each variant of the component.
      */
-    children: (props: any) => React.ReactNode;
+    children: (props: any, name: string) => React.ReactNode;
     /**
      * The categories to display in the table as columns.
      */
@@ -31,59 +34,125 @@ type Props = {
      * The states to display in the table as rows.
      */
     columns: Array<Variant>;
+    /**
+     * The layout for AllVariants.
+     * - `responsive`: variants will be displayed in a table at larger screen
+     * sizes and in a list at smaller screen sizes
+     * - `list`: variants will always be displayed in a list
+     */
+    layout?: "responsive" | "list";
 };
 
 /**
  * A table that displays all possible variants of a component.
  */
-export function AllVariants({children, columns, rows}: Props) {
+export function AllVariants(props: Props) {
+    const {children, rows, columns, layout = "responsive"} = props;
+
     return (
-        <StyledTable style={styles.table}>
-            <thead>
-                <tr>
-                    <StyledTh style={styles.cell}>
-                        <LabelLarge>Category / State</LabelLarge>
-                    </StyledTh>
-                    {columns.map((col, index) => (
-                        <StyledTh key={index} scope="col" style={styles.cell}>
-                            <LabelLarge>{col.name}</LabelLarge>
-                        </StyledTh>
-                    ))}
-                </tr>
-            </thead>
-            <tbody>
-                {rows.map((row, idx) => (
-                    <tr key={idx}>
-                        <StyledTh scope="row" style={styles.cell}>
-                            <LabelLarge>{row.name}</LabelLarge>
-                        </StyledTh>
-                        {columns.map((col) => (
-                            <StyledTd
-                                key={col.name}
-                                style={[
-                                    styles.cell,
-                                    {
-                                        border: `${border.width.hairline}px dashed ${semanticColor.border.primary}`,
-                                    },
-                                ]}
-                            >
-                                {children({
-                                    ...row.props,
-                                    ...col.props,
-                                })}
-                            </StyledTd>
+        <>
+            {layout === "responsive" && (
+                <StyledTable style={[styles.table]}>
+                    <thead>
+                        <tr>
+                            <StyledTh style={styles.cell}>
+                                <LabelLarge>Category / State</LabelLarge>
+                            </StyledTh>
+                            {columns.map((col, index) => (
+                                <StyledTh
+                                    key={index}
+                                    scope="col"
+                                    style={styles.cell}
+                                >
+                                    <LabelLarge>{col.name}</LabelLarge>
+                                </StyledTh>
+                            ))}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {rows.map((row, idx) => (
+                            <tr key={idx}>
+                                <StyledTh scope="row" style={styles.cell}>
+                                    <LabelLarge>{row.name}</LabelLarge>
+                                </StyledTh>
+                                {columns.map((col) => (
+                                    <StyledTd
+                                        key={col.name}
+                                        style={[
+                                            styles.cell,
+                                            {
+                                                border: `${border.width.hairline}px dashed ${semanticColor.border.primary}`,
+                                            },
+                                        ]}
+                                    >
+                                        {children(
+                                            {
+                                                ...row.props,
+                                                ...col.props,
+                                            },
+                                            `${row.name} ${col.name}`,
+                                        )}
+                                    </StyledTd>
+                                ))}
+                            </tr>
                         ))}
-                    </tr>
-                ))}
-            </tbody>
-        </StyledTable>
+                    </tbody>
+                </StyledTable>
+            )}
+            <StyledUl
+                style={[
+                    styles.list,
+                    layout === "responsive" && styles.listResponsive,
+                ]}
+            >
+                {rows.map((row) => {
+                    return columns.map((column) => {
+                        return (
+                            <li key={`${row.name} ${column.name}`}>
+                                <LabelLarge>
+                                    Column: {column.name}, Row: {row.name}
+                                </LabelLarge>
+
+                                <div
+                                    style={{
+                                        padding: sizing.size_100,
+                                        marginBlock: sizing.size_100,
+                                        border: `${border.width.hairline}px dashed ${semanticColor.border.primary}`,
+                                    }}
+                                >
+                                    {children(
+                                        {...column.props, ...row.props},
+                                        `${row.name} ${column.name}`,
+                                    )}
+                                </div>
+                            </li>
+                        );
+                    });
+                })}
+            </StyledUl>
+        </>
     );
 }
 
 const styles = StyleSheet.create({
     table: {
         borderCollapse: "collapse",
         textAlign: "left",
+        [breakpoint.mediaQuery.smOrSmaller]: {
+            display: "none",
+        },
+    },
+    list: {
+        margin: 0,
+        padding: 0,
+        listStyle: "none",
+        display: "flex",
+        flexDirection: "column",
+    },
+    listResponsive: {
+        [breakpoint.mediaQuery.mdOrLarger]: {
+            display: "none",
+        },
     },
     cell: {
         margin: spacing.medium_16,

__docs__/components/scenarios-layout.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import type {StrictArgs} from "@storybook/react";
+import {StyleSheet} from "aphrodite";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
+import {sizing} from "@khanacademy/wonder-blocks-tokens";
+
+type Props = {
+    scenarios: {name: string; props: StrictArgs}[];
+    children: (props: any, name: string) => React.ReactNode;
+};
+
+/**
+ * Useful for stories that show different scenarios.
+ *
+ * Normally, ScenariosLayout is used for different cases at rest state.
+ */
+export const ScenariosLayout = (props: Props) => {
+    const {scenarios, children} = props;
+    return (
+        <View style={styles.container}>
+            {scenarios.map((scenario) => {
+                return (
+                    <View key={scenario.name} style={styles.scenario}>
+                        <LabelLarge>{scenario.name}</LabelLarge>
+                        {children(scenario.props, scenario.name)}
+                    </View>
+                );
+            })}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        gap: sizing.size_200,
+        alignItems: "flex-start",
+    },
+    scenario: {
+        gap: sizing.size_100,
+        maxWidth: "100%",
+    },
+});

__docs__/components/text-for-testing.ts

@@ -0,0 +1,5 @@
+export const rtlText = "هذا الرابط مكتوب باللغة العربية";
+export const longText =
+    "Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua";
+export const longTextWithNoWordBreak =
+    "Loremipsumdolorsitametconsecteturadipiscingelitseddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua";