@jobber/components 6.118.3-bundle-doc-9aeb47b.16 → 6.118.3-bundle-doc-7eb3517.17

package/dist/docs/AnimatedPresence/AnimatedPresence.md

@@ -62,3 +62,10 @@ example.
 ```tsx
 <AnimatedPresence initial={true}>...</AnimatedPresence>
 ```
+
+
+### Other Examples
+
+[Animated Presence Basic Example](./AnimatedPresenceBasicExample.md)
+[Animated Presence List Example](./AnimatedPresenceListExample.md)
+[Animated Presence Stepper Example](./AnimatedPresenceStepperExample.md)

package/dist/docs/AnimatedPresence/AnimatedPresenceBasicExample.md

@@ -0,0 +1,81 @@
+# Animated Presence Basic Example
+
+```tsx
+import type { ComponentProps } from "react";
+import React, { useState } from "react";
+import { AnimatedPresence } from "@jobber/components/AnimatedPresence";
+import { AnimatedSwitcher } from "@jobber/components/AnimatedSwitcher";
+import { Button } from "@jobber/components/Button";
+import { Content } from "@jobber/components/Content";
+import { Divider } from "@jobber/components/Divider";
+import { Flex } from "@jobber/components/Flex";
+import { Heading } from "@jobber/components/Heading";
+import { Text } from "@jobber/components/Text";
+
+export function AnimatedPresenceBasicExample(
+  props: Partial<ComponentProps<typeof AnimatedPresence>>,
+) {
+  const [switched, setSwitched] = useState(false);
+
+  return (
+    <Content>
+      <Flex template={["grow", "shrink"]}>
+        <Heading level={2}>Checkout</Heading>
+        <AnimatedSwitcher
+          switched={switched}
+          initialChild={
+            <Button
+              icon={"arrowDown"}
+              iconOnRight={true}
+              label={"View details"}
+              type="secondary"
+              onClick={() => setSwitched(!switched)}
+            />
+          }
+          switchTo={
+            <Button
+              icon={"arrowUp"}
+              iconOnRight={true}
+              label={"Hide details"}
+              onClick={() => setSwitched(!switched)}
+            />
+          }
+        />
+      </Flex>
+      <AnimatedPresence {...props}>
+        {switched && (
+          <Content>
+            <Flex template={["grow", "shrink"]}>
+              <Text>Monthly subscription</Text>
+              <Text>12 &#x78; $149.00</Text>
+            </Flex>
+            <Divider />
+            <Flex template={["grow", "shrink"]}>
+              <Text>Tax</Text>
+              <Text>$89.40</Text>
+            </Flex>
+            <Divider size="large" />
+          </Content>
+        )}
+
+        <Heading level={4}>
+          <Flex template={["grow", "shrink"]}>
+            <span>Total</span>
+            <span>$1,877.40/year</span>
+          </Flex>
+        </Heading>
+
+        {switched && (
+          <Content>
+            <Divider />
+            <Text variation="subdued" size="small">
+              You will be charged something. By continuing, you agree to our
+              terms and conditions.
+            </Text>
+          </Content>
+        )}
+      </AnimatedPresence>
+    </Content>
+  );
+}
+```

package/dist/docs/AnimatedPresence/AnimatedPresenceListExample.md

@@ -0,0 +1,44 @@
+# Animated Presence List Example
+
+```tsx
+import type { ComponentProps } from "react";
+import React, { useState } from "react";
+import { AnimatedPresence } from "@jobber/components/AnimatedPresence";
+import { Button } from "@jobber/components/Button";
+import { Card } from "@jobber/components/Card";
+import { Content } from "@jobber/components/Content";
+import { Flex } from "@jobber/components/Flex";
+import { Text } from "@jobber/components/Text";
+
+export function AnimatedPresenceListExample({
+  initial,
+  ...props
+}: Partial<ComponentProps<typeof AnimatedPresence>>) {
+  const [count, setCount] = useState(12);
+
+  return (
+    <Content>
+      <Flex template={["shrink", "shrink"]}>
+        <Button label="Add" onClick={() => setCount(count + 3)} />
+        <Button
+          label="Remove"
+          onClick={() => setCount(count - 3)}
+          disabled={count < 1}
+        />
+      </Flex>
+
+      <Flex template={["grow", "grow", "grow"]} align="start">
+        <AnimatedPresence initial={initial ?? true} {...props}>
+          {[...Array(count)].map((_, i) => (
+            <Card key={i}>
+              <Content>
+                <Text>Card {i + 1}</Text>
+              </Content>
+            </Card>
+          ))}
+        </AnimatedPresence>
+      </Flex>
+    </Content>
+  );
+}
+```

package/dist/docs/AnimatedPresence/AnimatedPresenceStepperExample.md

@@ -0,0 +1,70 @@
+# Animated Presence Stepper Example
+
+```tsx
+import type { ComponentProps } from "react";
+import React, { useState } from "react";
+import type { AnimatedPresenceTransitions } from "@jobber/components/AnimatedPresence";
+import { AnimatedPresence } from "@jobber/components/AnimatedPresence";
+import { Button } from "@jobber/components/Button";
+import { Card } from "@jobber/components/Card";
+import { Content } from "@jobber/components/Content";
+import { Flex } from "@jobber/components/Flex";
+import { Text } from "@jobber/components/Text";
+
+export function AnimatedPresenceStepperExample({
+  transition: transitionProp,
+  ...props
+}: Partial<ComponentProps<typeof AnimatedPresence>>) {
+  const [step, setStep] = useState(1);
+  const [transition, setTransition] = useState<AnimatedPresenceTransitions>(
+    transitionProp ?? "fromLeftToRight",
+  );
+
+  return (
+    <Content>
+      <Flex template={["shrink", "shrink"]}>
+        <Button
+          label="Previous"
+          disabled={step === 1}
+          onClick={() => {
+            setTransition("fromLeftToRight");
+            setTimeout(() => setStep(step - 1), 0);
+          }}
+        />
+        <Button
+          label="Next"
+          disabled={step === 3}
+          onClick={() => {
+            setTransition("fromRightToLeft");
+            setTimeout(() => setStep(step + 1), 0);
+          }}
+        />
+      </Flex>
+
+      <AnimatedPresence {...props} transition={transition}>
+        {step === 1 && (
+          <Card>
+            <Content>
+              <Text>Step 1</Text>
+            </Content>
+          </Card>
+        )}
+        {step === 2 && (
+          <Card>
+            <Content>
+              <Text>Step 2</Text>
+            </Content>
+          </Card>
+        )}
+        {step === 3 && (
+          <Card>
+            <Content>
+              <Text>Step 3</Text>
+            </Content>
+          </Card>
+        )}
+      </AnimatedPresence>
+    </Content>
+  );
+}
+```

package/dist/docs/AnimatedSwitcher/AnimatedSwitcher.md

@@ -10,3 +10,9 @@ Animating between 2 icons is done in a more opinionated way where it would spin
 from 1 icon to another. The animation reverses when you want to go back to the
 initial icon. See
 [AnimatedSwitcher/Icon example](/storybook/web/?path=/story/components-utilities-animatedswitcher--icon).
+
+
+### Other Examples
+
+[Animated Switcher Basic Example](./AnimatedSwitcherBasicExample.md)
+[Animated Switcher Icon Example](./AnimatedSwitcherIconExample.md)

package/dist/docs/AnimatedSwitcher/AnimatedSwitcherBasicExample.md

@@ -0,0 +1,32 @@
+# Animated Switcher Basic Example
+
+```tsx
+import React, { useState } from "react";
+import { AnimatedSwitcher } from "@jobber/components/AnimatedSwitcher";
+import { Button } from "@jobber/components/Button";
+import type { AnimatedSwitcherProps } from "../AnimatedSwitcher";
+
+export function AnimatedSwitcherBasicExample(
+  props: Partial<AnimatedSwitcherProps>,
+) {
+  const [switched, setSwitched] = useState(false);
+
+  return (
+    <AnimatedSwitcher
+      {...props}
+      switched={switched}
+      initialChild={
+        <Button label="Mark complete" onClick={() => setSwitched(true)} />
+      }
+      switchTo={
+        <Button
+          icon="checkmark"
+          label="Complete"
+          type="secondary"
+          onClick={() => setSwitched(false)}
+        />
+      }
+    />
+  );
+}
+```

package/dist/docs/AnimatedSwitcher/AnimatedSwitcherIconExample.md

@@ -0,0 +1,54 @@
+# Animated Switcher Icon Example
+
+```tsx
+import React, { useState } from "react";
+import { AnimatedSwitcher } from "@jobber/components/AnimatedSwitcher";
+import { Button } from "@jobber/components/Button";
+import { Text } from "@jobber/components/Text";
+
+export function AnimatedSwitcherIconExample() {
+  const [switched, setSwitched] = useState(false);
+
+  return (
+    <div>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-around",
+          gap: 24,
+          marginBottom: 16,
+        }}
+      >
+        <AnimatedSwitcher.Icon
+          switched={switched}
+          initialIcon="add"
+          switchToIcon="checkmark"
+        />
+        <AnimatedSwitcher.Icon
+          switched={switched}
+          initialIcon="menu"
+          switchToIcon="longArrowLeft"
+        />
+        <AnimatedSwitcher.Icon
+          switched={switched}
+          initialIcon="event"
+          switchToIcon="remove"
+        />
+        <AnimatedSwitcher.Icon
+          switched={switched}
+          initialIcon="eye"
+          switchToIcon="eyeCrossed"
+        />
+      </div>
+      <Text align="center">
+        <Button
+          label="Switch icons"
+          type="tertiary"
+          size="small"
+          onClick={() => setSwitched(!switched)}
+        />
+      </Text>
+    </div>
+  );
+}
+```

package/dist/docs/AtlantisThemeContext/AtlantisThemeContext.md

@@ -244,3 +244,10 @@ Key features:
 * Automatically updates styles when the theme changes
 * Works with React Native's StyleSheet system
 * Memoized so that the StyleSheet is only re-created when the theme changes
+
+
+### Other Examples
+
+[Atlantis Theme Context Basic Example](./AtlantisThemeContextBasicExample.md)
+[Atlantis Theme Context Force Theme For Provider Example](./AtlantisThemeContextForceThemeForProviderExample.md)
+[Atlantis Theme Context Override Tokens Example](./AtlantisThemeContextOverrideTokensExample.md)

package/dist/docs/AtlantisThemeContext/AtlantisThemeContextBasicExample.md

@@ -0,0 +1,108 @@
+# Atlantis Theme Context Basic Example
+
+```tsx
+import React from "react";
+import {
+  AtlantisThemeContextProvider,
+  updateTheme,
+  useAtlantisTheme,
+} from "@jobber/components/AtlantisThemeContext";
+import { Text } from "@jobber/components/Text";
+import { Content } from "@jobber/components/Content";
+import { Button } from "@jobber/components/Button";
+import { InlineLabel } from "@jobber/components/InlineLabel";
+import { Flex } from "@jobber/components/Flex";
+import { Box } from "@jobber/components/Box";
+
+function ChildrenComponent({
+  message = "It is possible to have multiple Atlantis Theme providers.",
+}: {
+  readonly message?: string;
+}) {
+  const { theme, tokens } = useAtlantisTheme();
+
+  return (
+    <Box background="surface" padding="base">
+      <Content>
+        <Text>{message}</Text>
+        <Text size="small">Current theme {theme}</Text>
+        <Text size="small">
+          Tokens can be accessed using tokens[token-name]
+        </Text>
+        <Text size="small">
+          For example color-surface: {tokens["color-surface"]}
+        </Text>
+        <Flex
+          gap="base"
+          align="center"
+          direction="row"
+          template={["grow", "grow"]}
+        >
+          <Button label="Set dark theme" onClick={() => updateTheme("dark")} />
+          <Button
+            label="Set light theme"
+            onClick={() => updateTheme("light")}
+          />
+        </Flex>
+      </Content>
+    </Box>
+  );
+}
+
+function SecondProviderUsage({
+  message = "ThemeProviders can update the theme for all providers on a page. ",
+}: {
+  readonly message?: string;
+}) {
+  const { theme } = useAtlantisTheme();
+
+  return (
+    <Box background="surface" padding={"base"}>
+      <Content>
+        <Text>{message}</Text>
+        <Text size="small">Current theme {theme}</Text>
+        <div style={{ display: "flex", gap: "8px" }}>
+          <InlineLabel color="red">Past due</InlineLabel>
+          <InlineLabel color="red">Changes requested</InlineLabel>
+          <InlineLabel color="yellow">Unscheduled</InlineLabel>
+          <InlineLabel color="yellow">Awaiting response</InlineLabel>
+          <InlineLabel color="green">Approved</InlineLabel>
+          <InlineLabel color="green">Paid</InlineLabel>
+          <InlineLabel color="greyBlue">Draft</InlineLabel>
+          <InlineLabel color="greyBlue">Archived</InlineLabel>
+          <InlineLabel color="lightBlue">Sent</InlineLabel>
+          <InlineLabel color="lightBlue">Converted</InlineLabel>
+        </div>
+        <Flex
+          gap="base"
+          align="center"
+          direction="row"
+          template={["grow", "grow"]}
+        >
+          <Button
+            label="Set dark theme in another provider"
+            onClick={() => updateTheme("dark")}
+          />
+          <Button
+            label="Set light theme in another provider"
+            onClick={() => updateTheme("light")}
+          />
+        </Flex>
+      </Content>
+    </Box>
+  );
+}
+
+export function AtlantisThemeContextBasicExample() {
+  return (
+    <>
+      <AtlantisThemeContextProvider>
+        <ChildrenComponent />
+      </AtlantisThemeContextProvider>
+      <AtlantisThemeContextProvider>
+        <SecondProviderUsage />
+      </AtlantisThemeContextProvider>
+    </>
+  );
+}
+```

package/dist/docs/AtlantisThemeContext/AtlantisThemeContextForceThemeForProviderExample.md

@@ -0,0 +1,108 @@
+# Atlantis Theme Context Force Theme For Provider Example
+
+```tsx
+import React from "react";
+import {
+  AtlantisThemeContextProvider,
+  updateTheme,
+  useAtlantisTheme,
+} from "@jobber/components/AtlantisThemeContext";
+import { Text } from "@jobber/components/Text";
+import { Content } from "@jobber/components/Content";
+import { Button } from "@jobber/components/Button";
+import { InlineLabel } from "@jobber/components/InlineLabel";
+import { Flex } from "@jobber/components/Flex";
+import { Box } from "@jobber/components/Box";
+
+function ChildrenComponent({
+  message = "It is possible to have multiple Atlantis Theme providers.",
+}: {
+  readonly message?: string;
+}) {
+  const { theme, tokens } = useAtlantisTheme();
+
+  return (
+    <Box background="surface" padding="base">
+      <Content>
+        <Text>{message}</Text>
+        <Text size="small">Current theme {theme}</Text>
+        <Text size="small">
+          Tokens can be accessed using tokens[token-name]
+        </Text>
+        <Text size="small">
+          For example color-surface: {tokens["color-surface"]}
+        </Text>
+        <Flex
+          gap="base"
+          align="center"
+          direction="row"
+          template={["grow", "grow"]}
+        >
+          <Button label="Set dark theme" onClick={() => updateTheme("dark")} />
+          <Button
+            label="Set light theme"
+            onClick={() => updateTheme("light")}
+          />
+        </Flex>
+      </Content>
+    </Box>
+  );
+}
+
+function SecondProviderUsage({
+  message = "ThemeProviders can update the theme for all providers on a page. ",
+}: {
+  readonly message?: string;
+}) {
+  const { theme } = useAtlantisTheme();
+
+  return (
+    <Box background="surface" padding={"base"}>
+      <Content>
+        <Text>{message}</Text>
+        <Text size="small">Current theme {theme}</Text>
+        <div style={{ display: "flex", gap: "8px" }}>
+          <InlineLabel color="red">Past due</InlineLabel>
+          <InlineLabel color="red">Changes requested</InlineLabel>
+          <InlineLabel color="yellow">Unscheduled</InlineLabel>
+          <InlineLabel color="yellow">Awaiting response</InlineLabel>
+          <InlineLabel color="green">Approved</InlineLabel>
+          <InlineLabel color="green">Paid</InlineLabel>
+          <InlineLabel color="greyBlue">Draft</InlineLabel>
+          <InlineLabel color="greyBlue">Archived</InlineLabel>
+          <InlineLabel color="lightBlue">Sent</InlineLabel>
+          <InlineLabel color="lightBlue">Converted</InlineLabel>
+        </div>
+        <Flex
+          gap="base"
+          align="center"
+          direction="row"
+          template={["grow", "grow"]}
+        >
+          <Button
+            label="Set dark theme in another provider"
+            onClick={() => updateTheme("dark")}
+          />
+          <Button
+            label="Set light theme in another provider"
+            onClick={() => updateTheme("light")}
+          />
+        </Flex>
+      </Content>
+    </Box>
+  );
+}
+
+export function AtlantisThemeContextForceThemeForProviderExample() {
+  return (
+    <>
+      <AtlantisThemeContextProvider>
+        <ChildrenComponent message="It is possible to have a provider ignore Theme Changes" />
+      </AtlantisThemeContextProvider>
+      <AtlantisThemeContextProvider dangerouslyOverrideTheme="dark">
+        <SecondProviderUsage message="This theme provider will always use the dark theme" />
+      </AtlantisThemeContextProvider>
+    </>
+  );
+}
+```

package/dist/docs/AtlantisThemeContext/AtlantisThemeContextOverrideTokensExample.md

@@ -0,0 +1,78 @@
+# Atlantis Theme Context Override Tokens Example
+
+```tsx
+import React from "react";
+import {
+  AtlantisThemeContextProvider,
+  updateTheme,
+  useAtlantisTheme,
+} from "@jobber/components/AtlantisThemeContext";
+import { Text } from "@jobber/components/Text";
+import { Content } from "@jobber/components/Content";
+import { Button } from "@jobber/components/Button";
+import { InlineLabel } from "@jobber/components/InlineLabel";
+import { Flex } from "@jobber/components/Flex";
+import { Box } from "@jobber/components/Box";
+
+function OverrideTokensComponent({ message }: { readonly message: string }) {
+  const { theme, tokens, overrideTokens } = useAtlantisTheme();
+  const customBrandColor = overrideTokens?.["custom-brand-color"];
+
+  return (
+    <Box background="surface" padding="base">
+      <Content>
+        <Text>{message}</Text>
+        <Text size="small">Current theme: {theme}</Text>
+        <Text size="small">Original color-text: {tokens["color-text"]}</Text>
+        <Text size="small">Original space-base: {tokens["space-base"]}</Text>
+        <div style={{ backgroundColor: "var(--custom-brand-color)" }}>
+          <Text size="small">Custom token example: {customBrandColor}</Text>
+        </div>
+        <div style={{ display: "flex", gap: "8px", marginTop: "16px" }}>
+          <InlineLabel color="red">Notice the custom styling</InlineLabel>
+          <InlineLabel color="green">With overridden tokens</InlineLabel>
+          <InlineLabel color="lightBlue">Applied throughout</InlineLabel>
+        </div>
+        <Flex
+          gap="base"
+          align="center"
+          direction="row"
+          template={["grow", "grow"]}
+        >
+          <Button label="Test dark theme" onClick={() => updateTheme("dark")} />
+          <Button
+            label="Test light theme"
+            onClick={() => updateTheme("light")}
+          />
+        </Flex>
+      </Content>
+    </Box>
+  );
+}
+
+export function AtlantisThemeContextOverrideTokensExample() {
+  const customTokens = {
+    "color-text": "hsl(280, 100%, 50%)",
+    "color-critical--onSurface": "blue",
+    "color-success--onSurface": "blue",
+    "color-informative--onSurface": "blue",
+    "color-interactive": "hsl(280, 100%, 50%)",
+    "color-interactive--hover": "hsl(280, 85%, 37%)",
+    "custom-brand-color": "hsl(120, 81%, 50%)",
+  };
+
+  return (
+    <>
+      <AtlantisThemeContextProvider dangerouslyOverrideTokens={customTokens}>
+        <OverrideTokensComponent message="Provider with overridden tokens" />
+      </AtlantisThemeContextProvider>
+      <AtlantisThemeContextProvider
+        dangerouslyOverrideTheme="dark"
+        dangerouslyOverrideTokens={customTokens}
+      >
+        <OverrideTokensComponent message="Provider with overridden tokens - forced dark" />
+      </AtlantisThemeContextProvider>
+    </>
+  );
+}
+```