@codecademy/gamut-patterns 1.0.0-alpha.dd1efc.0 → 1.0.0-alpha.f6cb5a.0

package/dist/svg/DotLoose.svg

@@ -0,0 +1,40 @@
+<svg>
+  <pattern
+    id="dotLoose"
+    x="0"
+    y="0"
+    width="16"
+    height="16"
+    patternUnits="userSpaceOnUse"
+  >
+    <rect width="0.5" height="0.5" fill="currentColor" fillOpacity="0.5" />
+    <rect
+      y="1"
+      width="0.5"
+      height="0.5"
+      fill="currentColor"
+      fillOpacity="0.5"
+    />
+    <rect y="0.5" width="0.5" height="0.5" fill="currentColor" />
+    <rect
+      x="1"
+      width="0.5"
+      height="0.5"
+      fill="currentColor"
+      fillOpacity="0.5"
+    />
+    <rect
+      x="1"
+      y="1"
+      width="0.5"
+      height="0.5"
+      fill="currentColor"
+      fillOpacity="0.5"
+    />
+    <rect x="1" y="0.5" width="0.5" height="0.5" fill="currentColor" />
+    <rect x="0.5" width="0.5" height="0.5" fill="currentColor" />
+    <rect x="0.5" y="1" width="0.5" height="0.5" fill="currentColor" />
+    <rect x="0.5" y="0.5" width="0.5" height="0.5" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#dotLoose)" />
+</svg>

package/dist/svg/DotRegular.svg

@@ -0,0 +1,13 @@
+<svg>
+  <pattern
+    id="dotRegular"
+    x="0"
+    y="0"
+    width="8"
+    height="8"
+    patternUnits="userSpaceOnUse"
+  >
+    <circle cx="0.5" cy="0.5" r="0.5" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#dotRegular)" />
+</svg>

package/dist/svg/ExDense.svg

@@ -0,0 +1,17 @@
+<svg>
+  <pattern
+    id="exDense"
+    x="0"
+    y="0"
+    width="4"
+    height="4"
+    patternUnits="userSpaceOnUse"
+  >
+    <rect x="1" width="1" height="1" fill="currentColor" />
+    <rect y="1" width="1" height="1" fill="currentColor" />
+    <rect x="1" y="2" width="1" height="1" fill="currentColor" />
+    <rect x="3" width="1" height="1" fill="currentColor" />
+    <rect x="3" y="2" width="1" height="1" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#exDense)" />
+</svg>

package/dist/svg/ExLoose.svg

@@ -0,0 +1,17 @@
+<svg>
+  <pattern
+    id="exLoose"
+    x="0"
+    y="0"
+    width="16"
+    height="16"
+    patternUnits="userSpaceOnUse"
+  >
+    <rect x="1" width="1" height="1" fill="currentColor" />
+    <rect y="1" width="1" height="1" fill="currentColor" />
+    <rect x="1" y="2" width="1" height="1" fill="currentColor" />
+    <rect x="15" width="1" height="1" fill="currentColor" />
+    <rect x="15" y="2" width="1" height="1" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#exLoose)" />
+</svg>

package/dist/svg/ExRegular.svg

@@ -0,0 +1,17 @@
+<svg>
+  <pattern
+    id="exRegular"
+    x="0"
+    y="0"
+    width="8"
+    height="8"
+    patternUnits="userSpaceOnUse"
+  >
+    <rect x="1" width="1" height="1" fill="currentColor" />
+    <rect y="1" width="1" height="1" fill="currentColor" />
+    <rect x="1" y="2" width="1" height="1" fill="currentColor" />
+    <rect x="7" width="1" height="1" fill="currentColor" />
+    <rect x="7" y="2" width="1" height="1" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#exRegular)" />
+</svg>

package/dist/svg/FlowerDense.svg

@@ -0,0 +1,16 @@
+<svg>
+  <pattern
+    id="flowerDense"
+    x="0"
+    y="0"
+    width="4"
+    height="4"
+    patternUnits="userSpaceOnUse"
+  >
+    <rect width="1" height="1" fill="currentColor" />
+    <rect x="1" y="1" width="1" height="1" fill="currentColor" />
+    <rect y="2" width="1" height="1" fill="currentColor" />
+    <rect x="3" y="1" width="1" height="1" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#flowerDense)" />
+</svg>

package/dist/svg/FlowerLoose.svg

@@ -0,0 +1,16 @@
+<svg>
+  <pattern
+    id="flowerLoose"
+    x="0"
+    y="0"
+    width="16"
+    height="16"
+    patternUnits="userSpaceOnUse"
+  >
+    <rect width="1" height="1" fill="currentColor" />
+    <rect x="1" y="1" width="1" height="1" fill="currentColor" />
+    <rect y="2" width="1" height="1" fill="currentColor" />
+    <rect x="15" y="1" width="1" height="1" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#flowerLoose)" />
+</svg>

package/dist/svg/FlowerRegular.svg

@@ -0,0 +1,16 @@
+<svg>
+  <pattern
+    id="flowerRegular"
+    x="0"
+    y="0"
+    width="8"
+    height="8"
+    patternUnits="userSpaceOnUse"
+  >
+    <rect width="1" height="1" fill="currentColor" />
+    <rect x="1" y="1" width="1" height="1" fill="currentColor" />
+    <rect y="2" width="1" height="1" fill="currentColor" />
+    <rect x="7" y="1" width="1" height="1" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#flowerRegular)" />
+</svg>

package/dist/svg/GridDense.svg

@@ -0,0 +1,16 @@
+<svg>
+  <pattern
+    id="gridDense"
+    x="0"
+    y="0"
+    width="4"
+    height="4"
+    patternUnits="userSpaceOnUse"
+  >
+    <rect width="1" height="1" fill="currentColor" />
+    <rect y="2" width="1" height="1" fill="currentColor" />
+    <rect x="2" width="1" height="1" fill="currentColor" />
+    <rect x="2" y="2" width="1" height="1" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#gridDense)" />
+</svg>

package/dist/svg/GridLoose.svg

@@ -0,0 +1,16 @@
+<svg>
+  <pattern
+    id="gridLoose"
+    x="0"
+    y="0"
+    width="16"
+    height="16"
+    patternUnits="userSpaceOnUse"
+  >
+    <rect width="1" height="1" fill="currentColor" />
+    <rect y="8" width="1" height="1" fill="currentColor" />
+    <rect x="8" width="1" height="1" fill="currentColor" />
+    <rect x="8" y="8" width="1" height="1" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#gridLoose)" />
+</svg>

package/dist/svg/GridRegular.svg

@@ -0,0 +1,16 @@
+<svg>
+  <pattern
+    id="gridRegular"
+    x="0"
+    y="0"
+    width="8"
+    height="8"
+    patternUnits="userSpaceOnUse"
+  >
+    <rect width="1" height="1" fill="currentColor" />
+    <rect y="4" width="1" height="1" fill="currentColor" />
+    <rect x="4" width="1" height="1" fill="currentColor" />
+    <rect x="4" y="4" width="1" height="1" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#gridRegular)" />
+</svg>

package/dist/svg/Herringbone.svg

@@ -0,0 +1,19 @@
+<svg>
+    <pattern
+      id="herringbone"
+      x="0"
+      y="0"
+      width="4"
+      height="4"
+      patternUnits="userSpaceOnUse"
+    >
+      <rect y="1" width="1" height="1" fill="herringbone" />
+      <rect x="1" y="2" width="1" height="1" fill="herringbone" />
+      <rect x="3" width="1" height="1" fill="herringbone" />
+      <rect x="2" width="1" height="1" fill="herringbone" />
+      <rect x="3" y="1" width="1" height="1" fill="herringbone" />
+      <rect x="3" y="3" width="1" height="1" fill="herringbone" />
+      <rect y="3" width="1" height="1" fill="herringbone" />
+    </pattern>
+    <rect x="0" y="0" width="100%" height="100%" fill="url(#herringbone)" />
+</svg>

package/dist/svg/RainDense.svg

@@ -0,0 +1,14 @@
+<svg>
+  <pattern
+    id="rainDense"
+    x="0"
+    y="0"
+    width="4"
+    height="4"
+    patternUnits="userSpaceOnUse"
+  >
+    <rect width="1" height="1" fill="currentColor" />
+    <rect x="1" y="1" width="1" height="1" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#rainDense)" />
+</svg>

package/dist/svg/RainLoose.svg

@@ -0,0 +1,14 @@
+<svg>
+  <pattern
+    id="rainLoose"
+    x="0"
+    y="0"
+    width="16"
+    height="16"
+    patternUnits="userSpaceOnUse"
+  >
+    <rect width="1" height="1" fill="currentColor" />
+    <rect x="1" y="1" width="1" height="1" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#rainLoose)" />
+</svg>

package/dist/svg/RainRegular.svg

@@ -0,0 +1,14 @@
+<svg>
+  <pattern
+    id="rainRegular"
+    x="0"
+    y="0"
+    width="8"
+    height="8"
+    patternUnits="userSpaceOnUse"
+  >
+    <rect width="1" height="1" fill="currentColor" />
+    <rect x="1" y="1" width="1" height="1" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#rainRegular)" />
+</svg>

package/dist/svg/StripeDense.svg

@@ -0,0 +1,20 @@
+<svg>
+  <pattern
+    id="stripeDense"
+    x="0"
+    y="0"
+    width="4"
+    height="4"
+    patternUnits="userSpaceOnUse"
+  >
+    <rect x="1" width="1" height="1" fill="currentColor" />
+    <rect width="1" height="1" fill="currentColor" />
+    <rect x="2" width="1" height="1" fill="currentColor" />
+    <rect x="3" width="1" height="1" fill="currentColor" />
+    <rect x="1" y="2" width="1" height="1" fill="currentColor" />
+    <rect y="2" width="1" height="1" fill="currentColor" />
+    <rect x="2" y="2" width="1" height="1" fill="currentColor" />
+    <rect x="3" y="2" width="1" height="1" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#stripeDense)" />
+</svg>

package/dist/svg/StripeLoose.svg

@@ -0,0 +1,44 @@
+<svg>
+  <pattern
+    id="stripeLoose"
+    x="0"
+    y="0"
+    width="16"
+    height="16"
+    patternUnits="userSpaceOnUse"
+  >
+    <rect x="1" width="1" height="1" fill="currentColor" />
+    <rect width="1" height="1" fill="currentColor" />
+    <rect x="2" width="1" height="1" fill="currentColor" />
+    <rect x="3" width="1" height="1" fill="currentColor" />
+    <rect x="1" y="8" width="1" height="1" fill="currentColor" />
+    <rect y="8" width="1" height="1" fill="currentColor" />
+    <rect x="2" y="8" width="1" height="1" fill="currentColor" />
+    <rect x="3" y="8" width="1" height="1" fill="currentColor" />
+    <rect x="5" width="1" height="1" fill="currentColor" />
+    <rect x="4" width="1" height="1" fill="currentColor" />
+    <rect x="6" width="1" height="1" fill="currentColor" />
+    <rect x="7" width="1" height="1" fill="currentColor" />
+    <rect x="5" y="8" width="1" height="1" fill="currentColor" />
+    <rect x="4" y="8" width="1" height="1" fill="currentColor" />
+    <rect x="6" y="8" width="1" height="1" fill="currentColor" />
+    <rect x="7" y="8" width="1" height="1" fill="currentColor" />
+    <rect x="9" width="1" height="1" fill="currentColor" />
+    <rect x="8" width="1" height="1" fill="currentColor" />
+    <rect x="10" width="1" height="1" fill="currentColor" />
+    <rect x="11" width="1" height="1" fill="currentColor" />
+    <rect x="9" y="8" width="1" height="1" fill="currentColor" />
+    <rect x="8" y="8" width="1" height="1" fill="currentColor" />
+    <rect x="10" y="8" width="1" height="1" fill="currentColor" />
+    <rect x="11" y="8" width="1" height="1" fill="currentColor" />
+    <rect x="13" width="1" height="1" fill="currentColor" />
+    <rect x="12" width="1" height="1" fill="currentColor" />
+    <rect x="14" width="1" height="1" fill="currentColor" />
+    <rect x="15" width="1" height="1" fill="currentColor" />
+    <rect x="13" y="8" width="1" height="1" fill="currentColor" />
+    <rect x="12" y="8" width="1" height="1" fill="currentColor" />
+    <rect x="14" y="8" width="1" height="1" fill="currentColor" />
+    <rect x="15" y="8" width="1" height="1" fill="currentColor" />
+  </pattern>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#stripeLoose)" />
+</svg>

package/dist/svg/StripeRegular.svg

@@ -0,0 +1,28 @@
+<svg>
+    <pattern
+      id="stripeRegular"
+      x="0"
+      y="0"
+      width="8"
+      height="8"
+      patternUnits="userSpaceOnUse"
+    >
+      <rect x="1" width="1" height="1" fill="currentColor" />
+      <rect width="1" height="1" fill="currentColor" />
+      <rect x="2" width="1" height="1" fill="currentColor" />
+      <rect x="3" width="1" height="1" fill="currentColor" />
+      <rect x="1" y="4" width="1" height="1" fill="currentColor" />
+      <rect y="4" width="1" height="1" fill="currentColor" />
+      <rect x="2" y="4" width="1" height="1" fill="currentColor" />
+      <rect x="3" y="4" width="1" height="1" fill="currentColor" />
+      <rect x="5" width="1" height="1" fill="currentColor" />
+      <rect x="4" width="1" height="1" fill="currentColor" />
+      <rect x="6" width="1" height="1" fill="currentColor" />
+      <rect x="7" width="1" height="1" fill="currentColor" />
+      <rect x="5" y="4" width="1" height="1" fill="currentColor" />
+      <rect x="4" y="4" width="1" height="1" fill="currentColor" />
+      <rect x="6" y="4" width="1" height="1" fill="currentColor" />
+      <rect x="7" y="4" width="1" height="1" fill="currentColor" />
+    </pattern>
+    <rect x="0" y="0" width="100%" height="100%" fill="url(#stripeRegular)" />
+  </svg>

package/dist/types.d.ts

@@ -1,141 +1 @@
-import { StyleProps } from '@codecademy/variance';
-import { SVGProps } from 'react';
-declare const patternStyles: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").Compose<[import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
-    readonly display: {
-        readonly property: "display";
-    };
-    readonly overflow: {
-        readonly property: "overflow";
-    };
-    readonly overflowX: {
-        readonly property: "overflowX";
-    };
-    readonly overflowY: {
-        readonly property: "overflowY";
-    };
-    readonly width: {
-        readonly property: "width";
-        readonly transform: (value: string | number) => string | 0;
-    };
-    readonly minWidth: {
-        readonly property: "minWidth";
-        readonly transform: (value: string | number) => string | 0;
-    };
-    readonly maxWidth: {
-        readonly property: "maxWidth";
-        readonly transform: (value: string | number) => string | 0;
-    };
-    readonly height: {
-        readonly property: "height";
-        readonly transform: (value: string | number) => string | 0;
-    };
-    readonly minHeight: {
-        readonly property: "minHeight";
-        readonly transform: (value: string | number) => string | 0;
-    };
-    readonly maxHeight: {
-        readonly property: "maxHeight";
-        readonly transform: (value: string | number) => string | 0;
-    };
-    readonly verticalAlign: {
-        readonly property: "verticalAlign";
-    };
-    readonly justifySelf: {
-        readonly property: "justifySelf";
-    };
-    readonly alignSelf: {
-        readonly property: "alignSelf";
-    };
-    readonly gridArea: {
-        readonly property: "gridArea";
-    };
-}>>, import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
-    readonly position: {
-        readonly property: "position";
-    };
-    readonly top: {
-        readonly property: "top";
-        readonly transform: (value: string | number) => string | 0;
-    };
-    readonly right: {
-        readonly property: "right";
-        readonly transform: (value: string | number) => string | 0;
-    };
-    readonly bottom: {
-        readonly property: "bottom";
-        readonly transform: (value: string | number) => string | 0;
-    };
-    readonly left: {
-        readonly property: "left";
-        readonly transform: (value: string | number) => string | 0;
-    };
-    readonly zIndex: {
-        readonly property: "zIndex";
-    };
-    readonly opacity: {
-        readonly property: "opacity";
-    };
-}>>, import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
-    readonly p: {
-        readonly property: "padding";
-        readonly scale: "spacing";
-    };
-    readonly px: {
-        readonly property: "padding";
-        readonly properties: readonly ["paddingLeft", "paddingRight"];
-        readonly scale: "spacing";
-    };
-    readonly py: {
-        readonly property: "padding";
-        readonly properties: readonly ["paddingTop", "paddingBottom"];
-        readonly scale: "spacing";
-    };
-    readonly pt: {
-        readonly property: "paddingTop";
-        readonly scale: "spacing";
-    };
-    readonly pb: {
-        readonly property: "paddingBottom";
-        readonly scale: "spacing";
-    };
-    readonly pr: {
-        readonly property: "paddingRight";
-        readonly scale: "spacing";
-    };
-    readonly pl: {
-        readonly property: "paddingLeft";
-        readonly scale: "spacing";
-    };
-    readonly m: {
-        readonly property: "margin";
-        readonly scale: "spacing";
-    };
-    readonly mx: {
-        readonly property: "margin";
-        readonly properties: readonly ["marginLeft", "marginRight"];
-        readonly scale: "spacing";
-    };
-    readonly my: {
-        readonly property: "margin";
-        readonly properties: readonly ["marginTop", "marginBottom"];
-        readonly scale: "spacing";
-    };
-    readonly mt: {
-        readonly property: "marginTop";
-        readonly scale: "spacing";
-    };
-    readonly mb: {
-        readonly property: "marginBottom";
-        readonly scale: "spacing";
-    };
-    readonly mr: {
-        readonly property: "marginRight";
-        readonly scale: "spacing";
-    };
-    readonly ml: {
-        readonly property: "marginLeft";
-        readonly scale: "spacing";
-    };
-}>>]>>;
-export declare type PatternProps = SVGProps<SVGSVGElement> & StyleProps<typeof patternStyles>;
-export {};
+export type { PatternProps } from './props';

package/dist/types.js

@@ -1,3 +0,0 @@
-import { system } from '@codecademy/gamut-styles';
-import { variance } from '@codecademy/variance';
-var patternStyles = variance.compose(system.layout, system.positioning, system.space);

package/dist/usePatternId.d.ts

@@ -0,0 +1 @@
+export declare function usePatternId(id: string): string;

package/dist/usePatternId.js

@@ -0,0 +1,10 @@
+import { useMemo } from 'react';
+var counter = {};
+export function usePatternId(id) {
+  return useMemo(function () {
+    var key = id.toLowerCase();
+    var idCounter = (counter === null || counter === void 0 ? void 0 : counter[key]) || 0;
+    counter[key] = idCounter;
+    return "".concat(id, "-pattern-").concat(counter[key] += 1);
+  }, [id]);
+}

package/emotion-plugin.js

@@ -0,0 +1,46 @@
+const plugin = (api) => {
+  const vistor = {
+    JSXElement(path) {
+      // We only want to find SVG element
+      if (path.get('openingElement.name').isJSXIdentifier({ name: 'svg' })) {
+        // Update the opening and closing tags to the styled component identifier
+        const emotionTag = api.types.jsxIdentifier('Svg');
+        path.get('openingElement.name').replaceWith(emotionTag);
+        path.get('closingElement.name').replaceWith(emotionTag);
+      }
+    },
+    JSXAttribute(path) {
+      const valuePath = path.get('value');
+      const attrName = path.get('name').toString();
+      if (attrName === 'id' && valuePath.isStringLiteral()) {
+        valuePath.replaceWith(
+          api.types.jsxExpressionContainer(
+            api.template.ast('patternId').expression
+          )
+        );
+      }
+
+      if (
+        attrName === 'fill' &&
+        valuePath.isStringLiteral() &&
+        valuePath.toString().includes('url')
+      ) {
+        valuePath.replaceWith(
+          api.types.jsxExpressionContainer(
+            api.template.ast('`url(#${patternId})`').expression
+          )
+        );
+      }
+    },
+  };
+
+  return {
+    visitor: {
+      Program(path) {
+        path.traverse(vistor);
+      },
+    },
+  };
+};
+
+module.exports = plugin;

package/index-template.js

@@ -0,0 +1,10 @@
+const path = require('path');
+
+function indexTemplate(files) {
+  const exportEntries = files.map((file) => {
+    const basename = path.basename(file, path.extname(file));
+    return `export * from './${basename}';`;
+  });
+  return exportEntries.join('\n');
+}
+module.exports = indexTemplate;

package/jest.config.js

@@ -0,0 +1 @@
+module.exports = require('../../jest.config.base')('gamut-patterns');