@jobber/design 0.63.0 → 0.64.0

package/README.md

@@ -12,7 +12,10 @@ npm install @jobber/design
 ## Usage
 
 `@jobber/design` ships `foundation.css`. It also provides utilities for getting
-icons svg path.
+an icon svg path, and icon styles as a JS object for use in a React `style`
+attribute. We also ship a dark mode as both individual tokens (dark.theme.css)
+and a full theme file (dark.mode.css). We ship our semantic styles as well
+`semantic.css`
 
 ### CSS
 
@@ -31,7 +34,8 @@ Import the `@jobber/design` stylesheet into your own css
 
 For web, if `design/foundation.css` is already included you do not need to
 import it for every css file. For React Native, you need to import
-`design/foundation.css` in every css files that needs it.
+`design/foundation` in every css files that needs it. Soon, this manual approach
+will be replaced by a ThemeProvider.
 
 #### icons
 
@@ -40,10 +44,11 @@ Import the `getIcon` utility into your JavaScript/Typescript file
 ```tsx
 import { getIcon } from "@jobber/design";
 
-const { svgClassNames, paths, viewBox } = getIcon({
+const { svgStyle, paths, viewBox } = getIcon({
   name: "dashboard",
   color: "green",
   size: "large",
+  platform: "web",
 });
 ```
 
@@ -54,15 +59,13 @@ You can also get the type definitions for `IconNames`, `IconColorNames`, and
 import type { IconNames, IconColorNames, IconSizes } from "@jobber/design";
 ```
 
-If you need the actual css files for icons, you can import them from
+If you need the actual js style files for icons, you can import them from
 `@jobber/design/icons`. You may not need these files for the web but they might
 be required for React Native
 
 ```css
 @import "@jobber/design/foundation.css";
-@import "@jobber/design/icons/Icon";
-@import "@jobber/design/icons/Sizes";
-@import "@jobber/design/icons/Colors";
+@import {iconStyles, iconSizes, iconColors} from "@jobber/design";
 ```
 
 ### PostCSS
@@ -73,7 +76,7 @@ Inject `@jobber/foundation` into your css with `postcss`
 module.exports = {
   plugins: [
     require("postcss-preset-env")({
-      importFrom: ["@jobber/design"],
+      importFrom: ["@jobber/design/dist/foundation.css"],
     }),
   ],
 };
@@ -85,15 +88,13 @@ To use `tokens` with React Native, add the following to the file containing your
 project's global styling:
 
 ```ts
-// Import from `foundation.native` instead of `foundation` because foundation
-// would resolve the typescript for the web foundation instead of the React Native version.
-import { tokens as mobileFoundationBase } from "@jobber/design/foundation.native";
+import { tokens, androidTokens, iosTokens } from "@jobber/design";
 import { Platform } from "react-native";
 
-const tokens: typeof mobileFoundationBase = Platform.select({
-  ios: () => require("@jobber/design/foundation.ios").tokens,
-  android: () => require("@jobber/design/foundation.android").tokens,
-  default: () => require("@jobber/design/foundation.native").tokens,
+export const tokens: typeof AndroidTokens = Platform.select({
+  ios: () => iosTokens,
+  android: () => androidTokens,
+  default: () => androidTokens,
 })();
 
 export const GlobalStyling = {
@@ -101,3 +102,16 @@ export const GlobalStyling = {
   ...otherStyles,
 };
 ```
+
+## Adding a new set of tokens
+
+1. Adding a new token file under `src/tokens` that follows the same format as
+   above and in the other files (platformOverrides is a special file and should
+   not be copied).
+1. Importing your new token file in `allTokens.ts` and adding it to the tokenMap
+   in the same file.
+1. At this point, your token contents should start showing up in all the built
+   output via `npm run build` in the design package (or just `npm install` from
+   the root of the project)
+
+## For How The Platform Works see HOWTHISWORKS.md

package/dist/{icons/iconMap.d.ts → assets/icon.map.d.ts}

@@ -1,165 +1,166 @@
-export declare const iconMap: {
-    icons: {
-        add: string[];
-        addNote: string[];
-        addTag: string[];
-        address: string[];
-        afterDate: string[];
-        alert: string[];
-        angieslist: string[];
-        apple: string[];
-        apps: string[];
-        archive: string[];
-        arrowDown: string[];
-        arrowLeft: string[];
-        arrowRight: string[];
-        arrowUp: string[];
-        automate: string[];
-        availability: string[];
-        backArrow: string[];
-        badInvoice: string[];
-        batch: string[];
-        beforeDate: string[];
-        calendar: string[];
-        camera: string[];
-        chat: string[];
-        checkbox: string[];
-        checkmark: string[];
-        chemical: string[];
-        clearFilters: string[];
-        clients: string[];
-        clockIn: string[];
-        clockOut: string[];
-        cog: string[];
-        company: string[];
-        compose: string[];
-        condition: string[];
-        copy: string[];
-        cross: string[];
-        customize: string[];
-        dashboard: string[];
-        directions: string[];
-        download: string[];
-        drag: string[];
-        dropdown: string[];
-        edit: string[];
-        email: string[];
-        embed: string[];
-        engine: string[];
-        event: string[];
-        excel: string[];
-        expense: string[];
-        export: string[];
-        eye: string[];
-        eyeCrossed: string[];
-        facebook: string[];
-        file: string[];
-        filter: string[];
-        fuel: string[];
-        future: string[];
-        gift: string[];
-        google: string[];
-        googlePlay: string[];
-        grid: string[];
-        happyFace: string[];
-        help: string[];
-        home: string[];
-        image: string[];
-        import: string[];
-        instagram: string[];
-        invoice: string[];
-        invoiceLater: string[];
-        job: string[];
-        jobForms: string[];
-        jobOnHold: string[];
-        knot: string[];
-        link: string[];
-        linkedIn: string[];
-        list: string[];
-        loadingCheck: string[];
-        "lock-1": string[];
-        lock: string[];
-        logout: string[];
-        markSent: string[];
-        marketing: string[];
-        menu: string[];
-        minus: string[];
-        minus2: string[];
-        money: string[];
-        more: string[];
-        moveMarker: string[];
-        moveVisits: string[];
-        note: string[];
-        offline: string[];
-        onlineBooking: string[];
-        paidInvoice: string[];
-        paperclip: string[];
-        payment: string[];
-        pdf: string[];
-        percent: string[];
-        person: string[];
-        phone: string[];
-        pinned: string[];
-        plus: string[];
-        plus2: string[];
-        presentation: string[];
-        printer: string[];
-        property: string[];
-        quickbooks: string[];
-        quote: string[];
-        recurring: string[];
-        redo: string[];
-        reminder: string[];
-        reports: string[];
-        request: string[];
-        runningTimer: string[];
-        schedule: string[];
-        search: string[];
-        sendInvoice: string[];
-        sendMessage: string[];
-        share: string[];
-        signature: string[];
-        sliderCenter: string[];
-        sliderStart: string[];
-        sms: string[];
-        sms2: string[];
-        sneaker: string[];
-        sort: string[];
-        sparkles: string[];
-        star: string[];
-        starFill: string[];
-        starHalf: string[];
-        starburst: string[];
-        sun: string[];
-        sync: string[];
-        syncAlert: string[];
-        tableColumns: string[];
-        tag: string[];
-        task: string[];
-        textBox: string[];
-        textField: string[];
-        thumbsUp: string[];
-        timeline: string[];
-        timer: string[];
-        today: string[];
-        transfer: string[];
-        trash: string[];
-        twitter: string[];
-        unPinned: string[];
-        unscheduled: string[];
-        updateStatus: string[];
-        upload: string[];
-        user: string[];
-        userSwitch: string[];
-        userUnassigned: string[];
-        vcard: string[];
-        video: string[];
-        visit: string[];
-        wallet: string[];
-        word: string[];
-        work: string[];
-        xero: string[];
-        yelp: string[];
-        youtube: string[];
-    };
-};
+declare const _default: {
+    icons: {
+        add: string[];
+        addNote: string[];
+        addTag: string[];
+        address: string[];
+        afterDate: string[];
+        alert: string[];
+        angieslist: string[];
+        apple: string[];
+        apps: string[];
+        archive: string[];
+        arrowDown: string[];
+        arrowLeft: string[];
+        arrowRight: string[];
+        arrowUp: string[];
+        automate: string[];
+        availability: string[];
+        backArrow: string[];
+        badInvoice: string[];
+        batch: string[];
+        beforeDate: string[];
+        calendar: string[];
+        camera: string[];
+        chat: string[];
+        checkbox: string[];
+        checkmark: string[];
+        chemical: string[];
+        clearFilters: string[];
+        clients: string[];
+        clockIn: string[];
+        clockOut: string[];
+        cog: string[];
+        company: string[];
+        compose: string[];
+        condition: string[];
+        copy: string[];
+        cross: string[];
+        customize: string[];
+        dashboard: string[];
+        directions: string[];
+        download: string[];
+        drag: string[];
+        dropdown: string[];
+        edit: string[];
+        email: string[];
+        embed: string[];
+        engine: string[];
+        event: string[];
+        excel: string[];
+        expense: string[];
+        export: string[];
+        eye: string[];
+        eyeCrossed: string[];
+        facebook: string[];
+        file: string[];
+        filter: string[];
+        fuel: string[];
+        future: string[];
+        gift: string[];
+        google: string[];
+        googlePlay: string[];
+        grid: string[];
+        happyFace: string[];
+        help: string[];
+        home: string[];
+        image: string[];
+        import: string[];
+        instagram: string[];
+        invoice: string[];
+        invoiceLater: string[];
+        job: string[];
+        jobForms: string[];
+        jobOnHold: string[];
+        knot: string[];
+        link: string[];
+        linkedIn: string[];
+        list: string[];
+        loadingCheck: string[];
+        "lock-1": string[];
+        lock: string[];
+        logout: string[];
+        markSent: string[];
+        marketing: string[];
+        menu: string[];
+        minus: string[];
+        minus2: string[];
+        money: string[];
+        more: string[];
+        moveMarker: string[];
+        moveVisits: string[];
+        note: string[];
+        offline: string[];
+        onlineBooking: string[];
+        paidInvoice: string[];
+        paperclip: string[];
+        payment: string[];
+        pdf: string[];
+        percent: string[];
+        person: string[];
+        phone: string[];
+        pinned: string[];
+        plus: string[];
+        plus2: string[];
+        presentation: string[];
+        printer: string[];
+        property: string[];
+        quickbooks: string[];
+        quote: string[];
+        recurring: string[];
+        redo: string[];
+        reminder: string[];
+        reports: string[];
+        request: string[];
+        runningTimer: string[];
+        schedule: string[];
+        search: string[];
+        sendInvoice: string[];
+        sendMessage: string[];
+        share: string[];
+        signature: string[];
+        sliderCenter: string[];
+        sliderStart: string[];
+        sms: string[];
+        sms2: string[];
+        sneaker: string[];
+        sort: string[];
+        sparkles: string[];
+        star: string[];
+        starFill: string[];
+        starHalf: string[];
+        starburst: string[];
+        sun: string[];
+        sync: string[];
+        syncAlert: string[];
+        tableColumns: string[];
+        tag: string[];
+        task: string[];
+        textBox: string[];
+        textField: string[];
+        thumbsUp: string[];
+        timeline: string[];
+        timer: string[];
+        today: string[];
+        transfer: string[];
+        trash: string[];
+        twitter: string[];
+        unPinned: string[];
+        unscheduled: string[];
+        updateStatus: string[];
+        upload: string[];
+        user: string[];
+        userSwitch: string[];
+        userUnassigned: string[];
+        vcard: string[];
+        video: string[];
+        visit: string[];
+        wallet: string[];
+        word: string[];
+        work: string[];
+        xero: string[];
+        yelp: string[];
+        youtube: string[];
+    };
+};
+export default _default;