@jobber/design 0.27.9 → 0.28.0

package/src/icons/Colors.css

@@ -0,0 +1,187 @@
+.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

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,102 @@
+.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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,14 @@
+.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

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

package/src/icons/getIcon.test.ts

@@ -0,0 +1,73 @@
+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

@@ -0,0 +1,116 @@
+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",
+  });
+}