feat(carousel): basic working example

implement the skeleton of the carousel. still rough and not feature complete

packages/carousel/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "react",
+    "stage-2",
+    [
+      "env",
+      {
+        "targets": {
+          "browsers": ["last 2 versions", "ie >= 11"]
+        }
+      }
+    ]
+  ]
+}

packages/carousel/.npmignore

@@ -0,0 +1,3 @@
+__specs__
+src
+.babelrc

packages/carousel/.storybook/addons.js

@@ -0,0 +1,6 @@
+import '@storybook/addon-actions/register'
+
+import addons from '@storybook/addons'
+import register from '@pluralsight/ps-design-system-storybook-addon-theme/register'
+
+register(addons)

packages/carousel/.storybook/config.js

@@ -0,0 +1,14 @@
+import addons from '@storybook/addons'
+import { addDecorator, configure } from '@storybook/react'
+
+import centerDecorator from '@pluralsight/ps-design-system-storybook-addon-center'
+import themeDecorator from '@pluralsight/ps-design-system-storybook-addon-theme'
+
+addDecorator(centerDecorator)
+addDecorator(themeDecorator(addons))
+
+function loadStory() {
+  require('../src/react/__stories__/index.story.js')
+}
+
+configure(loadStory, module)

packages/carousel/.storybook/preview-head.html

@@ -0,0 +1,2 @@
+<link rel="stylesheet" href="//cloud.typography.com/6966154/6397212/css/fonts.css" />
+<link rel="stylesheet" href="//unpkg.com/@pluralsight/ps-design-system-normalize" />

packages/carousel/css.js

@@ -0,0 +1 @@
+module.exports = require('./dist/css/index.js')

packages/carousel/index.js

@@ -0,0 +1,5 @@
+const css = require('./css/index.js')
+const react = require('./react/index.js')
+const vars = require('./vars/index.js')
+
+module.exports = { css: css, react: react, vars: vars }

packages/carousel/jest.config.js

@@ -0,0 +1,9 @@
+const baseConfig = require('../../jest/base.config.js')
+const { name } = require('./package.json')
+
+module.exports = {
+  ...baseConfig,
+  displayName: name,
+  name: name,
+  testMatch: [`${__dirname}/**/*/?(*.)+(spec|test).js`]
+}

packages/carousel/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@pluralsight/ps-design-system-carousel",
+  "version": "1.0.0",
+  "description": "Carousel UI Component for the Pluralsight Design System",
+  "license": "Apache-2.0",
+  "repository": "pluralsight/design-system",
+  "main": "index.js",
+  "module": "index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "run-s build:js build:css",
+    "build:css": "build-css --useGlamor",
+    "build:js": "babel src --out-dir dist --ignore spec.js --copy-files",
+    "build:watch": "npm run build:js -- --watch",
+    "prepublish": "npm run build",
+    "storybook": "start-storybook -p 6006",
+    "test": "../../node_modules/.bin/jest",
+    "test:updateSnapshot": "npm run test -- --updateSnapshot",
+    "test:watch": "npm run test -- --watchAll"
+  },
+  "dependencies": {
+    "@pluralsight/ps-design-system-core": "*",
+    "@pluralsight/ps-design-system-filter-react-props": "*",
+    "@pluralsight/ps-design-system-theme": "*"
+  },
+  "peerDependencies": {
+    "@pluralsight/ps-design-system-normalize": "*",
+    "glamor": "^2.x.x",
+    "react": ">=16.8.6 < 17.0.0"
+  },
+  "devDependencies": {
+    "@pluralsight/ps-design-system-build": "*",
+    "@pluralsight/ps-design-system-storybook-addon-center": "*",
+    "@pluralsight/ps-design-system-storybook-addon-theme": "*",
+    "@storybook/addon-actions": "^4.0.0",
+    "@storybook/addon-storyshots": "^4.0.0",
+    "@storybook/addons": "^4.0.0",
+    "@storybook/react": "^4.0.0",
+    "babel-cli": "^6.24.1",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "npm-run-all": "^4.1.2"
+  }
+}

packages/carousel/react.js

@@ -0,0 +1 @@
+module.exports = require('./dist/react/index.js')

packages/carousel/src/css/index.js

@@ -0,0 +1,79 @@
+import core from '@pluralsight/ps-design-system-core'
+
+export const resetButton = {
+  background: 'transparent',
+  border: 'none',
+  color: 'inherit',
+  font: 'inherit',
+  lineHeight: 'normal',
+  margin: 0,
+  overflow: 'visible',
+  padding: 0,
+  width: 'auto',
+
+  MozOsxFontSmoothing: 'inherit',
+  WebkitAppearance: 'none',
+  WebkitFontSmoothing: 'inherit',
+
+  '&::-moz-focus-inner': {
+    border: 0,
+    padding: 0
+  }
+}
+
+export default {
+  '.psds-carousel': {
+    position: 'relative',
+    outline: '1px solid yellow'
+  },
+
+  '.psds-carousel__controls': {},
+  '.psds-carousel__controls__control': {
+    ...resetButton,
+    background: 'white',
+    borderRadius: '100%',
+    height: '36px',
+    position: 'absolute',
+    top: '50%',
+    width: '36px',
+
+    '&:hover': {
+      cursor: 'pointer'
+    }
+  },
+  '.psds-carousel__controls__control--prev': {
+    left: 0,
+    transform: 'translate(-50%, -50%)'
+  },
+  '.psds-carousel__controls__control--next': {
+    right: 0,
+    transform: 'translate(50%, -50%)'
+  },
+
+  '.psds-carousel__pages': {
+    display: 'flex',
+    overflow: 'hidden',
+    width: '100%'
+  },
+
+  '.psds-carousel__page': {
+    alignItems: 'flex-start',
+    display: 'flex',
+    flex: '1 0 100%',
+    margin: `0 calc(${core.layout.spacingSmall}/2)`,
+    transition: `transform ${core.motion.speedXSlow} ease-in-out`,
+
+    outline: '3px solid red',
+
+    '&:first-child': { marginLeft: 0 },
+    '&:last-child': { marginRight: 0 }
+  },
+
+  '.psds-carousel__item': {
+    margin: `0 calc(${core.layout.spacingSmall}/2)`,
+    flex: 1,
+
+    '&:first-child': { marginLeft: 0 },
+    '&:last-child': { marginRight: 0 }
+  }
+}