@jobber/design 0.28.2 → 0.28.3-pre.2

package/src/icons/Colors.css

@@ -1,187 +0,0 @@
-.white {
-  fill: var(--color-white);
-}
-
-.grey {
-  fill: var(--color-grey);
-}
-
-.greyBlue {
-  fill: var(--color-greyBlue);
-}
-
-.greyBlueDark {
-  fill: var(--color-greyBlue--dark);
-}
-
-.blue {
-  fill: var(--color-blue);
-}
-
-.lightBlue {
-  fill: var(--color-lightBlue);
-}
-
-.green {
-  fill: var(--color-green);
-}
-
-.yellow {
-  fill: var(--color-yellow);
-}
-
-.red {
-  fill: var(--color-red);
-}
-
-.navy {
-  fill: var(--color-navy);
-}
-
-.orange {
-  fill: var(--color-orange);
-}
-
-.interactive {
-  fill: var(--color-interactive);
-}
-
-.interactiveHover {
-  fill: var(--color-interactive--hover);
-}
-
-.destructive {
-  fill: var(--color-destructive);
-}
-
-.destructiveHover {
-  fill: var(--color-destructive--hover);
-}
-
-.interactiveSubtle {
-  fill: var(--color-interactive--subtle);
-}
-
-.interactiveSubtleHover {
-  fill: var(--color-interactive--subtle--hover);
-}
-
-.disabled {
-  fill: var(--color-disabled);
-}
-
-.disabledSecondary {
-  fill: var(--color-disabled--secondary);
-}
-
-.focus {
-  fill: var(--color-focus);
-}
-
-.critical {
-  fill: var(--color-critical);
-}
-
-.criticalSurface {
-  fill: var(--color-critical--surface);
-}
-
-.criticalOnSurface {
-  fill: var(--color-critical--onSurface);
-}
-
-.warning {
-  fill: var(--color-warning);
-}
-
-.warningSurface {
-  fill: var(--color-warning--surface);
-}
-
-.warningOnSurface {
-  fill: var(--color-warning--onSurface);
-}
-
-.success {
-  fill: var(--color-success);
-}
-
-.successSurface {
-  fill: var(--color-success--surface);
-}
-
-.successOnSurface {
-  fill: var(--color-success--onSurface);
-}
-
-.informative {
-  fill: var(--color-informative);
-}
-
-.informativeSurface {
-  fill: var(--color-informative--surface);
-}
-
-.informativeOnSurface {
-  fill: var(--color-informative--onSurface);
-}
-
-.inactive {
-  fill: var(--color-inactive);
-}
-
-.inactiveSurface {
-  fill: var(--color-inactive--surface);
-}
-
-.inactiveOnSurface {
-  fill: var(--color-inactive--onSurface);
-}
-
-.heading {
-  fill: var(--color-heading);
-}
-
-.text {
-  fill: var(--color-text);
-}
-
-.textSecondary {
-  fill: var(--color-text--secondary);
-}
-
-.textReverse {
-  fill: var(--color-text--reverse);
-}
-
-.textReverseSecondary {
-  fill: var(--color-text--reverse--secondary);
-}
-
-.surface {
-  fill: var(--color-surface);
-}
-
-.surfaceHover {
-  fill: var(--color-surface--hover);
-}
-
-.surfaceActive {
-  fill: var(--color-surface--active);
-}
-
-.surfaceBackground {
-  fill: var(--color-surface--background);
-}
-
-.surfaceReverse {
-  fill: var(--color-surface--reverse);
-}
-
-.brand {
-  fill: var(--color-brand);
-}
-
-.brandHighlight {
-  fill: var(--color-brand--highlight);
-}

package/src/icons/Colors.css.d.ts

@@ -1,51 +0,0 @@
-declare const styles: {
-  readonly "white": string;
-  readonly "grey": string;
-  readonly "greyBlue": string;
-  readonly "greyBlueDark": string;
-  readonly "blue": string;
-  readonly "lightBlue": string;
-  readonly "green": string;
-  readonly "yellow": string;
-  readonly "red": string;
-  readonly "navy": string;
-  readonly "orange": string;
-  readonly "interactive": string;
-  readonly "interactiveHover": string;
-  readonly "destructive": string;
-  readonly "destructiveHover": string;
-  readonly "interactiveSubtle": string;
-  readonly "interactiveSubtleHover": string;
-  readonly "disabled": string;
-  readonly "disabledSecondary": string;
-  readonly "focus": string;
-  readonly "critical": string;
-  readonly "criticalSurface": string;
-  readonly "criticalOnSurface": string;
-  readonly "warning": string;
-  readonly "warningSurface": string;
-  readonly "warningOnSurface": string;
-  readonly "success": string;
-  readonly "successSurface": string;
-  readonly "successOnSurface": string;
-  readonly "informative": string;
-  readonly "informativeSurface": string;
-  readonly "informativeOnSurface": string;
-  readonly "inactive": string;
-  readonly "inactiveSurface": string;
-  readonly "inactiveOnSurface": string;
-  readonly "heading": string;
-  readonly "text": string;
-  readonly "textSecondary": string;
-  readonly "textReverse": string;
-  readonly "textReverseSecondary": string;
-  readonly "surface": string;
-  readonly "surfaceHover": string;
-  readonly "surfaceActive": string;
-  readonly "surfaceBackground": string;
-  readonly "surfaceReverse": string;
-  readonly "brand": string;
-  readonly "brandHighlight": string;
-};
-export = styles;
-

package/src/icons/Icon.css

@@ -1,102 +0,0 @@
-.icon {
-  fill: var(--color-greyBlue);
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.longArrowUp {
-  transform: rotate(90deg);
-}
-
-.longArrowDown {
-  transform: rotate(-90deg);
-}
-
-.thumbsDown {
-  transform: scaleY(-1);
-}
-
-.person,
-.clients,
-.company,
-.property {
-  fill: var(--color-teal);
-}
-
-.job,
-.jobOnHold {
-  fill: var(--color-job);
-}
-
-.visit,
-.moveVisits {
-  fill: var(--color-lime);
-}
-
-.event {
-  fill: var(--color-yellow);
-}
-
-.quote {
-  fill: var(--color-quote);
-}
-
-.request {
-  fill: var(--color-request);
-}
-
-.task {
-  fill: var(--color-navy);
-}
-
-.userUnassigned,
-.reminder,
-.trash {
-  fill: var(--color-destructive);
-}
-
-.checkmark {
-  fill: var(--color-success);
-}
-
-.timer {
-  fill: var(--color-lightBlue);
-}
-
-.invoice,
-.invoiceLater,
-.sendInvoice,
-.paidInvoice {
-  fill: var(--color-invoice);
-}
-
-.badInvoice {
-  fill: var(--color-critical);
-}
-
-.payment,
-.expense {
-  fill: var(--color-orange);
-}
-
-.archive {
-  fill: var(--color-blue);
-}
-
-.video {
-  fill: var(--color-lightBlue);
-}
-
-/* non-Atlantis colors to match brand colors of these file-types */
-
-.excel {
-  fill: rgb(31, 115, 71);
-}
-
-.pdf {
-  fill: rgb(195, 27, 0);
-}
-
-.word {
-  fill: rgb(41, 86, 154);
-}

package/src/icons/Icon.css.d.ts

@@ -1,37 +0,0 @@
-declare const styles: {
-  readonly "icon": string;
-  readonly "longArrowUp": string;
-  readonly "longArrowDown": string;
-  readonly "thumbsDown": string;
-  readonly "person": string;
-  readonly "clients": string;
-  readonly "company": string;
-  readonly "property": string;
-  readonly "job": string;
-  readonly "jobOnHold": string;
-  readonly "visit": string;
-  readonly "moveVisits": string;
-  readonly "event": string;
-  readonly "quote": string;
-  readonly "request": string;
-  readonly "task": string;
-  readonly "userUnassigned": string;
-  readonly "reminder": string;
-  readonly "trash": string;
-  readonly "checkmark": string;
-  readonly "timer": string;
-  readonly "invoice": string;
-  readonly "invoiceLater": string;
-  readonly "sendInvoice": string;
-  readonly "paidInvoice": string;
-  readonly "badInvoice": string;
-  readonly "payment": string;
-  readonly "expense": string;
-  readonly "archive": string;
-  readonly "video": string;
-  readonly "excel": string;
-  readonly "pdf": string;
-  readonly "word": string;
-};
-export = styles;
-

package/src/icons/Sizes.css

@@ -1,14 +0,0 @@
-.small {
-  width: var(--base-unit);
-  height: var(--base-unit);
-}
-
-.base {
-  width: calc(var(--base-unit) * 1.5);
-  height: calc(var(--base-unit) * 1.5);
-}
-
-.large {
-  width: calc(var(--base-unit) * 2);
-  height: calc(var(--base-unit) * 2);
-}

package/src/icons/Sizes.css.d.ts

@@ -1,7 +0,0 @@
-declare const styles: {
-  readonly "small": string;
-  readonly "base": string;
-  readonly "large": string;
-};
-export = styles;
-

package/src/icons/getIcon.test.ts

@@ -1,73 +0,0 @@
-import { getIcon } from "./getIcon";
-import { iconMap } from "./iconMap";
-
-it("returns dashboard icon", () => {
-  const name = "dashboard";
-  const { svgClassNames, pathClassNames, paths, viewBox } = getIcon({
-    name,
-  });
-  expect(svgClassNames).toBe("icon base");
-  expect(pathClassNames).toBe("");
-  expect(paths).toEqual(iconMap.icons[name]);
-  expect(viewBox).toBe("0 0 1024 1024");
-});
-
-it("returns apple icon", () => {
-  const name = "apple";
-  const { svgClassNames, pathClassNames, paths, viewBox } = getIcon({
-    name,
-  });
-  expect(svgClassNames).toBe("icon base");
-  expect(pathClassNames).toBe("");
-  expect(paths).toEqual(iconMap.icons[name]);
-  expect(viewBox).toBe("0 0 1024 1024");
-});
-
-it("returns large arrowDown icon", () => {
-  const name = "arrowDown";
-  const size = "large";
-  const { svgClassNames, pathClassNames, paths, viewBox } = getIcon({
-    name,
-    size,
-  });
-  expect(svgClassNames).toBe(`icon ${size}`);
-  expect(pathClassNames).toBe("");
-  expect(paths).toEqual(iconMap.icons[name]);
-  expect(viewBox).toBe("0 0 1024 1024");
-});
-
-it("returns thumbsDown icon", () => {
-  const name = "thumbsDown";
-  const mapedName = "thumbsUp";
-  const { svgClassNames, pathClassNames, paths, viewBox } = getIcon({
-    name,
-  });
-  expect(svgClassNames).toBe("icon base thumbsDown");
-  expect(pathClassNames).toBe("");
-  expect(paths).toEqual(iconMap.icons[mapedName]);
-  expect(viewBox).toBe("0 0 1024 1024");
-});
-
-it("returns small more icon", () => {
-  const name = "more";
-  const size = "small";
-  const { svgClassNames, pathClassNames, paths, viewBox } = getIcon({
-    name,
-    size,
-  });
-  expect(svgClassNames).toBe(`icon ${size}`);
-  expect(pathClassNames).toBe("");
-  expect(paths).toEqual(iconMap.icons[name]);
-  expect(viewBox).toBe("0 0 1024 1024");
-});
-
-it("returns truck icon properties", () => {
-  const name = "truck";
-  const { svgClassNames, pathClassNames, paths, viewBox } = getIcon({
-    name,
-  });
-  expect(svgClassNames).toBe("icon base");
-  expect(pathClassNames).toBe("");
-  expect(paths).toEqual([]);
-  expect(viewBox).toBe("0 0 1024 1024");
-});

package/src/icons/getIcon.ts

@@ -1,116 +0,0 @@
-import classnames from "classnames";
-import styles from "./Icon.css";
-import sizes from "./Sizes.css";
-import colors from "./Colors.css";
-import { iconMap } from "./iconMap";
-
-export const iconClassMap = getInvertedClassMap(styles);
-export const sizesClassMap = getInvertedClassMap(sizes);
-export const colorsClassMap = getInvertedClassMap(colors);
-
-function getInvertedClassMap(classMap: Record<string, string>) {
-  return Object.keys(classMap).reduce(
-    (acc, value) => ({
-      ...acc,
-      [classMap[value]]: value,
-    }),
-    {},
-  );
-}
-
-export type IconNames =
-  | keyof typeof iconMap.icons
-  | "longArrowUp"
-  | "longArrowDown"
-  | "remove"
-  | "thumbsDown"
-  | "truck";
-export type IconColorNames = keyof typeof colors;
-export type IconSizes = keyof typeof sizes;
-interface IconProps {
-  /** The icon to show.  */
-  readonly name: IconNames;
-
-  /**
-   * Changes the size to small or large.
-   * @default base
-   */
-  readonly size?: IconSizes;
-
-  /**
-   * Determines the color of the icon. Some icons have a default system colour
-   * like quotes, jobs, and invoices. Others that doesn't have a system colour
-   * falls back to greyBlueDark.
-   */
-  readonly color?: IconColorNames;
-}
-
-export function getIcon({ name, color, size = "base" }: IconProps) {
-  const svgClassNames = classnames(styles.icon, sizes[size], {
-    [styles.longArrowUp]: name === "longArrowUp",
-    [styles.longArrowDown]: name === "longArrowDown",
-    [styles.thumbsDown]: name === "thumbsDown",
-  });
-
-  const pathClassNames = getPathClassNames(name, color);
-  const paths = getPaths(name);
-  const viewBox = `0 0 ${iconMap.height} ${iconMap.height}`;
-  return { svgClassNames, pathClassNames, paths, viewBox } as const;
-}
-
-function getPaths(name: IconNames) {
-  const iconName = mapToCorrectIcon(name);
-  if (iconName === "truck") {
-    return [];
-  } else {
-    return iconMap.icons[iconName];
-  }
-}
-
-function mapToCorrectIcon(name: IconNames) {
-  switch (name) {
-    case "longArrowUp":
-      return "backArrow";
-    case "longArrowDown":
-      return "backArrow";
-    case "remove":
-      return "cross";
-    case "thumbsDown":
-      return "thumbsUp";
-    default:
-      return name;
-  }
-}
-function getPathClassNames(name: string, color?: IconColorNames) {
-  return classnames(color && colors[color], {
-    [styles.person]: name === "person",
-    [styles.clients]: name === "clients",
-    [styles.company]: name === "company",
-    [styles.property]: name === "property",
-    [styles.userUnassigned]: name === "userUnassigned",
-    [styles.job]: name === "job",
-    [styles.jobOnHold]: name === "jobOnHold",
-    [styles.visit]: name === "visit",
-    [styles.moveVisits]: name === "moveVisits",
-    [styles.event]: name === "event",
-    [styles.request]: name === "request",
-    [styles.reminder]: name === "reminder",
-    [styles.trash]: name === "trash",
-    [styles.task]: name === "task",
-    [styles.timer]: name === "timer",
-    [styles.quote]: name === "quote",
-    [styles.invoice]: name === "invoice",
-    [styles.checkmark]: name === "checkmark",
-    [styles.invoiceLater]: name === "invoiceLater",
-    [styles.badInvoice]: name === "badInvoice",
-    [styles.sendInvoice]: name === "sendInvoice",
-    [styles.paidInvoice]: name === "paidInvoice",
-    [styles.payment]: name === "payment",
-    [styles.expense]: name === "expense",
-    [styles.archive]: name === "archive",
-    [styles.excel]: name === "excel",
-    [styles.pdf]: name === "pdf",
-    [styles.word]: name === "word",
-    [styles.video]: name === "video",
-  });
-}