@ebay/skin 16.0.0 → 16.1.0-0

package/.github/workflows/jekyll-gh-pages.yml

@@ -38,7 +38,7 @@ jobs:
       - name: Build with Jekyll
         uses: actions/jekyll-build-pages@v1
         with:
-          source: ./
+          source: ./docs
           destination: ./_site
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1

package/.percy.yml

@@ -1,6 +1,7 @@
 version: 2
 snapshot:
-  widths: [602]
-  device-pixel-ratio: 2
+    widths: [320,512,768,1280]
+discovery:
+    device-pixel-ratio: 2
 storybook:
-  include: []
+    include: []

package/.prettierrc.json

@@ -1,12 +1 @@
-{
-    "printWidth": 100,
-    "singleQuote": true,
-    "overrides": [
-        {
-            "files": ["**/*.css", "**/*.html", "**/*.less", "**/*.json", "**/*.yml", "**/*.md"],
-            "options": {
-                "singleQuote": false
-            }
-        }
-    ]
-}
+{}

package/.storybook/main.js

@@ -1,46 +1,50 @@
-const path = require('path');
+const path = require("path");
 
 console.log(`STORYBOOK_DS: ${process.env.STORYBOOK_DS}`);
 
 module.exports = {
-	core: {
-		builder: "webpack5",
-	},
-	stories: [`../src/less/index.stories.js`, '../src/less/**/*.stories.js', '../src/less/**/stories/**/*.stories.js'],
-	webpackFinal: async (config, { configType }) => {
-		config.module.rules.push({
-			test: /\.less/,
-			use: [
-				'style-loader',
-				'css-loader',
-				{
-					loader: 'postcss-loader',
-					options: {
-					  postcssOptions: {
-						plugins: [
-						  [
-							'autoprefixer',
-							{
-							  // Options
-							},
-						  ],
-						],
-					  },
-					}
-				},
-				{
-					loader: "less-loader",
-					options: {
-						lessOptions: {
-							globalVars: {
-								ds: `ds${process.env.STORYBOOK_DS}`
-							},
-						}
-					},
-				},
-			]
-		});
+    core: {
+        builder: "webpack5",
+    },
+    stories: [
+        `../src/less/index.stories.js`,
+        "../src/less/**/*.stories.js",
+        "../src/less/**/stories/**/*.stories.js",
+    ],
+    webpackFinal: async (config, { configType }) => {
+        config.module.rules.push({
+            test: /\.less/,
+            use: [
+                "style-loader",
+                "css-loader",
+                {
+                    loader: "postcss-loader",
+                    options: {
+                        postcssOptions: {
+                            plugins: [
+                                [
+                                    "autoprefixer",
+                                    {
+                                        // Options
+                                    },
+                                ],
+                            ],
+                        },
+                    },
+                },
+                {
+                    loader: "less-loader",
+                    options: {
+                        lessOptions: {
+                            globalVars: {
+                                ds: `ds${process.env.STORYBOOK_DS}`,
+                            },
+                        },
+                    },
+                },
+            ],
+        });
 
-		return config;
-	}
+        return config;
+    },
 };

package/.storybook/manager.js

@@ -1,9 +1,9 @@
-import { addons } from '@storybook/addons';
-import theme from './theme';
+import { addons } from "@storybook/addons";
+import theme from "./theme";
 
 addons.setConfig({
-  theme,
-  sidebar: {
-    showRoots: false,
-  },
+    theme,
+    sidebar: {
+        showRoots: false,
+    },
 });

package/.storybook/preview-head.html

@@ -504,6 +504,20 @@
       clip-rule="evenodd"
     />
   </symbol>
+  <symbol viewBox="0 0 16 16" id="icon-bookmark-16">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5.5 3a.5.5 0 0 0-.5.5v8.086l2.293-2.293a1 1 0 0 1 1.414 0L11 11.586V3.5a.5.5 0 0 0-.5-.5h-5ZM3 3.5A2.5 2.5 0 0 1 5.5 1h5A2.5 2.5 0 0 1 13 3.5V14a1 1 0 0 1-1.707.707L8 11.414l-3.293 3.293A1 1 0 0 1 3 14V3.5Z"
+    />
+  </symbol>
+  <symbol viewBox="0 0 24 24" id="icon-bookmark-24">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7 3a1 1 0 0 0-1 1v15.586l5.293-5.293a1 1 0 0 1 1.414 0L18 19.586V4a1 1 0 0 0-1-1H7ZM4 4a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v18a1 1 0 0 1-1.707.707L12 16.414l-6.293 6.293A1 1 0 0 1 4 22V4Z"
+    />
+  </symbol>
   <symbol viewBox="0 0 10 16" id="icon-brand-authorized-seller-16-fit">
     <path d="M6 6.14a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" />
     <path
@@ -3526,16 +3540,6 @@
       clip-rule="evenodd"
     />
   </symbol>
-  <symbol viewBox="0 0 300 300" id="icon-image-placeholder">
-    <path
-      d="M175.241 121.603a9.465 9.465 0 0 1-9.465 9.465 9.466 9.466 0 1 1 9.465-9.465Z"
-    />
-    <path
-      fill-rule="evenodd"
-      d="M211 192.068c0 10.456-8.476 18.931-18.931 18.931h-84.138c-10.456 0-18.931-8.475-18.931-18.931V107.93C89 97.475 97.475 89 107.93 89h84.138C202.524 89 211 97.474 211 107.93v84.138ZM107.931 99.516h84.138a8.413 8.413 0 0 1 8.414 8.414v66.184l-21.523-21.523a5.26 5.26 0 0 0-7.437 0l-14.777 14.777-21.571-26.964a5.255 5.255 0 0 0-8.106-.129L99.517 172.55v-64.62a8.414 8.414 0 0 1 8.414-8.414Zm-8.414 89.233 31.42-36.807 21.267 26.584a5.258 5.258 0 0 0 7.825.433l15.212-15.213 25.242 25.242v3.08a8.414 8.414 0 0 1-8.414 8.414h-84.138a8.414 8.414 0 0 1-8.414-8.414v-3.319Z"
-      clip-rule="evenodd"
-    />
-  </symbol>
   <symbol viewBox="0 0 16 16" id="icon-inbox-16">
     <path
       fill-rule="evenodd"
@@ -6107,11 +6111,35 @@
       clip-rule="evenodd"
     />
   </symbol>
+  <symbol viewBox="0 0 16 16" id="icon-play-filled-16-colored">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Z"
+      fill="#fff"
+      fill-opacity=".88"
+    />
+    <path
+      d="M11.514 8.857a1 1 0 0 0 0-1.714l-5-3A1 1 0 0 0 5 5v6a1 1 0 0 0 1.514.857l5-3Z"
+      fill="#191919"
+    />
+  </symbol>
   <symbol viewBox="0 0 24 24" id="icon-play-filled-24">
     <path
       d="M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12ZM9.53 6.152A1 1 0 0 0 8 7v10a1 1 0 0 0 1.53.848l8-5a1 1 0 0 0 0-1.696l-8-5Z"
     />
   </symbol>
+  <symbol viewBox="0 0 24 24" id="icon-play-filled-24-colored">
+    <path
+      d="M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12Z"
+      fill="#fff"
+      fill-opacity=".88"
+    />
+    <path
+      d="m9.53 6.152 8 5a1 1 0 0 1 0 1.696l-8 5A1 1 0 0 1 8 17V7a1 1 0 0 1 1.53-.848Z"
+      fill="#191919"
+    />
+  </symbol>
   <symbol viewBox="0 0 20 12" id="icon-postepay-12-colored">
     <rect
       x=".5"
@@ -7469,7 +7497,7 @@
       clip-rule="evenodd"
     />
   </symbol>
-  <symbol viewBox="0 0 16 16" id="icon-zoom-In-16">
+  <symbol viewBox="0 0 16 16" id="icon-zoom-in-16">
     <path
       d="M7 4.5a.5.5 0 0 0-1 0V6H4.5a.5.5 0 0 0 0 1H6v1.5a.5.5 0 0 0 1 0V7h1.5a.5.5 0 0 0 0-1H7V4.5Z"
     />
@@ -7497,6 +7525,16 @@
       clip-rule="evenodd"
     />
   </symbol>
+  <symbol viewBox="0 0 300 300" id="image-placeholder">
+    <path
+      d="M175.241 121.603a9.465 9.465 0 0 1-9.465 9.465 9.466 9.466 0 1 1 9.465-9.465Z"
+    />
+    <path
+      fill-rule="evenodd"
+      d="M211 192.068c0 10.456-8.476 18.931-18.931 18.931h-84.138c-10.456 0-18.931-8.475-18.931-18.931V107.93C89 97.475 97.475 89 107.93 89h84.138C202.524 89 211 97.474 211 107.93v84.138ZM107.931 99.516h84.138a8.413 8.413 0 0 1 8.414 8.414v66.184l-21.523-21.523a5.26 5.26 0 0 0-7.437 0l-14.777 14.777-21.571-26.964a5.255 5.255 0 0 0-8.106-.129L99.517 172.55v-64.62a8.414 8.414 0 0 1 8.414-8.414Zm-8.414 89.233 31.42-36.807 21.267 26.584a5.258 5.258 0 0 0 7.825.433l15.212-15.213 25.242 25.242v3.08a8.414 8.414 0 0 1-8.414 8.414h-84.138a8.414 8.414 0 0 1-8.414-8.414v-3.319Z"
+      clip-rule="evenodd"
+    />
+  </symbol>
   <symbol viewBox="0 0 132 24" fill="none" id="star-rating-0">
     <path
       fill-rule="evenodd"

package/.storybook/theme.js

@@ -1,18 +1,18 @@
-import { create } from '@storybook/theming';
+import { create } from "@storybook/theming";
 
 export default create({
-    base: 'light',
+    base: "light",
 
     // Typography
     fontBase: '"Market Sans", Arial',
-    colorSecondary: '#5388FF',
-    appBg: '#EEF8FF',
+    colorSecondary: "#5388FF",
+    appBg: "#EEF8FF",
 
     // Brand assets
-    brandTitle: 'eBayUI Core',
-    brandUrl: '/',
+    brandTitle: "eBayUI Core",
+    brandUrl: "/",
     brandImage:
-        'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/EBay_logo.svg/1280px-EBay_logo.svg.png',
-    brandIcon: 'https://pages.ebay.com/favicon.ico',
-    brandTarget: '/',
+        "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/EBay_logo.svg/1280px-EBay_logo.svg.png",
+    brandIcon: "https://pages.ebay.com/favicon.ico",
+    brandTarget: "/",
 });

package/.stylelintrc

@@ -1,78 +1,85 @@
 {
-  "extends": [
-    "stylelint-config-standard",
-    "stylelint-prettier/recommended"
-  ],
-  "ignoreFiles": [
-    "dist/mixins/**/*",
-    "dist/variables/**/*",
-    "**/*.min.css",
-    "**/*.js",
-    "**/*.svg"
-  ],
-  "rules": {
-    "comment-empty-line-before": null,
-    "no-descending-specificity": null,
-    "no-duplicate-selectors": null,
-    "rule-empty-line-before": null,
-    "color-function-notation": "legacy",
-    "property-no-vendor-prefix": null,
-    "selector-no-vendor-prefix": null,
-    "selector-class-pattern": null,
-    "alpha-value-notation": "number",
-    "value-no-vendor-prefix": null,
-    "import-notation": "string",
-    "at-rule-empty-line-before": null,
-    "value-keyword-case": [
-
-      "lower",
-      {
-        "camelCaseSvgKeywords": true
-      }
+    "extends": [
+        "stylelint-config-standard",
+        "stylelint-prettier/recommended"
     ],
-    "function-no-unknown": [
-      true,
-      {
-        "ignoreFunctions": ["fade"]
-      }
-    ]
-  },
-  "overrides": [
-    {
-      "files": [
-        "**/*.less"
-      ],
-      "customSyntax": "postcss-less",
-      "plugins": [
-        "stylelint-order",
-        "stylelint-no-unsupported-browser-features"
-      ],
-      "rules": {
-        "at-rule-no-unknown": [
-          true,
-          {
-            "ignoreAtRules": [
-              "icon-mixin"
-            ]
-          }
+    "ignoreFiles": [
+        "dist/mixins/**/*",
+        "dist/variables/**/*",
+        "**/*.min.css",
+        "**/*.js",
+        "**/*.svg"
+    ],
+    "rules": {
+        "comment-empty-line-before": null,
+        "no-descending-specificity": null,
+        "no-duplicate-selectors": null,
+        "rule-empty-line-before": null,
+        "color-function-notation": "legacy",
+        "property-no-vendor-prefix": null,
+        "selector-no-vendor-prefix": null,
+        "selector-class-pattern": null,
+        "alpha-value-notation": "number",
+        "value-no-vendor-prefix": null,
+        "import-notation": "string",
+        "declaration-block-no-redundant-longhand-properties": null,
+        "at-rule-empty-line-before": null,
+        "media-feature-range-notation": "prefix",
+        "value-keyword-case": [
+            "lower",
+            {
+                "camelCaseSvgKeywords": true
+            }
         ],
-        "declaration-empty-line-before": null,
         "function-no-unknown": [
-          true,
-          {
-            "ignoreFunctions": ["fade", "shade", "tint"]
-          }
-        ],
-        "no-descending-specificity": true,
-        "no-duplicate-selectors": true,
-        "order/properties-alphabetical-order": true,
-        "plugin/no-unsupported-browser-features": [
-          null,
-          {
-            "severity": "warning"
-          }
+            true,
+            {
+                "ignoreFunctions": [
+                    "fade"
+                ]
+            }
         ]
-      }
-    }
-  ]
-}
+    },
+    "overrides": [
+        {
+            "files": [
+                "**/*.less"
+            ],
+            "customSyntax": "postcss-less",
+            "plugins": [
+                "stylelint-order",
+                "stylelint-no-unsupported-browser-features"
+            ],
+            "rules": {
+                "at-rule-no-unknown": [
+                    true,
+                    {
+                        "ignoreAtRules": [
+                            "icon-mixin"
+                        ]
+                    }
+                ],
+                "declaration-empty-line-before": null,
+                "function-no-unknown": [
+                    true,
+                    {
+                        "ignoreFunctions": [
+                            "fade",
+                            "shade",
+                            "tint"
+                        ]
+                    }
+                ],
+                "no-descending-specificity": true,
+                "no-duplicate-selectors": true,
+                "order/properties-alphabetical-order": true,
+                "plugin/no-unsupported-browser-features": [
+                    null,
+                    {
+                        "severity": "warning"
+                    }
+                ]
+            }
+        }
+    ]
+}

package/ICON-CREATION.md

@@ -2,63 +2,40 @@
 
 Skin uses the SVG tag to deliver all iconography. This guide will help you properly add or modify SVG files for the Skin library.
 
-## Step 1: Set up the icon
+## Step 1: Import the SVG
 
-First you should use a graphics editor, like Illustrator or Sketch, to export the SVG markup. For our examples we will use Sketch.
+In order to import the SVG into Skin, all you need to do is drop the SVG into `src/svg/icon` directory. The icon name will be the way the icon will be imported into Skin. If the icon does not have `icon-` prefix, it will be renamed automatically to include the prefix.
+The viewbox given will be translated to the `width` and `height` that the icons is going to use.
 
--   Open the necessary icon Sketch file
--   Copy the icon layer (right-click > copy ... or [Command ⌘] + [c] on Mac when the layer is highlighted). This should be the 24x24 layer only. It should contain the glyph altogether, with the 24x24 bounding box and the paths.
-    > ![copy layer](https://user-images.githubusercontent.com/105656/39767546-43b5c59c-52a4-11e8-8fcd-f8ede4764ef9.png)
--   Open a new file ([Command ⌘] + [n] on a Mac)
--   Paste the icon layer in the new file ([Command ⌘] + v ... or right-click > paste)
--   Reset the icon (X,Y) to (0,0)
-    > ![reset coordinates](https://user-images.githubusercontent.com/105656/39767589-5b3ad2ac-52a4-11e8-8bd7-39560f653af4.png)
+**Couple of Notes**
 
-## Step 2: Import the SVG
+-   We should not apply fill on base icons. We use `fill: currentColor` to be able to change the color on icons
+-   We should not apply base sizes. We will apply those using CSS
+-   If there is a `<use>` tag, move necessary attributes to the `<path>` and remove this tag
+    -   Specific attributes to look for: `fill` (if it needs to be different), `fill-rule`, etc.
+-   In all cases, remove the `id` from the `<path>`, as it is unnecessary
+-   If `id` is needed for certain `clip-path` or such, make sure it is unique
 
--   Run the command `node/scripts importSVG path/to/icon.svg name-of-svg iconfile`.
--   For example: `node/scripts importSVG ~/Downloads/new-icon.svg icon-photo photo` will import the new-icon svg into the `photo.svg` file with an `id="icon-photo"`
-    -   Ensure the `fill` is set to the correct color (this is set to black as an example, but could be different based on design)
-    -   If there is a `<use>` tag, move necessary attributes to the `<path>` and remove this tag
-        -   Specific attributes to look for: `fill` (if it needs to be different), `fill-rule`, etc.
-    -   In all cases, remove the `id` from the `<path>`, as it is unnecessary
+## Step 2: Run scripts
 
-## Step 3: Run the generate images script
-
-Run `node scripts/generate-images.js gen` to generate the CSS definition for the icon. This will take the width/height from the `viewBox` and create a CSS selector for the given icon.
-If the width/height is incorrect from the SVG `viewBox`, you need to manually add the width/height using the icon mixin (See the `Adding CSS manually` section)
-
--   The documentation will be updated automatically.
+To properly setup the icon after it is placed in the `src/svg/icon` directory, run `node scripts genSVG` from the root of the skin project. This will properly setup the icon in docs, in the `icon.svg` bundle, and generate the CSS needed for the icon.
+Afterward, you should run `npm run build` in order to also copy all those files to `dist`.
 
 ## Appendix
 
-## Adding CSS manually
+## Star-rating
 
-This step is only needed when the CSS generated from the `generate-images` does not align up correctly.
+Star rating icons are the only unique set of icons. These will not recieve an `icon-` prefix
 
--   Add the icon `id` into the `skip` array in `scripts/image-config.json`
--   Create two new variables in `/src/less/less/ds6/variables.less` for the width and height of your icon
--   Use the width and height values from the SVG width and height, **rounded to the nearest tens decimal place**
+## Skip skin docs
 
-```less
-@ds6-icon-following-width: 21.5px;
-@ds6-icon-following-height: 19.4px;
-```
+If you do not want an icon to show up in the skin docs, add the name of the icon in `docs/_data/icons.yaml` under `skipDocs` key. Then rerun `step 2` scripts.
 
--   Add a mixin for your icon in `/src/less/less/ds6/mixins.less`
--   Add the CSS class and reference the new mixin in `/src/less/icon/ds6/icon.less`
+## Skip CSS generation
 
-```less
-.icon--following {
-    .icon-mixin("icon-following", { .icon-following() });
-}
-```
+In order to skip an icon to have it's CSS be generated add the name of the icon in `docs/_data/icons.yaml` under `skip` key. Then rerun `step 2` scripts.
+This can be done for certain icons which might want to have different sizes than those specified in the `viewbox`
 
-## Adding a new icon file pack
+## Script changes
 
--   Add a new `.svg` file in `src/svg`. Add the `<?xml>` and `<svg>` tag as in other files in that directory.
--   Add a new section in `docs/_data/icons.yaml`. See `scripts/README.md` for more info on the keys. No need to add list and smallList as those keys are autogenerated.
--   Add a new `.less` file into `src/less/icon`. This should follow the same syntax as the other files in that directory. (importing base icon and the generated icon).
--   Add the icons in the new svg file using `scripts importSVG` command
--   Run `node scripts genSVG`
--   Run `npm run build`
+Any script changes needed should be done in `scripts/generate-images.js`.

package/README.md

@@ -1,4 +1,4 @@
-[![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/eBay/skin)
+[![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/79bdc98e/eBay-Skin)
 
 # Skin