@learningpool/ui 1.6.0 → 1.6.1

package/.storybook/manager.js

@@ -0,0 +1,34 @@
+// .storybook/manager.js
+
+import { addons } from '@storybook/addons';
+import learningpoolTheme from './learningpoolTheme';
+
+addons.setConfig({
+  isFullscreen: false,
+  showNav: true,
+  showPanel: true,
+  panelPosition: 'bottom',
+  enableShortcuts: true,
+  isToolshown: true,
+  theme: learningpoolTheme,
+  selectedPanel: undefined,
+  initialActive: 'sidebar',
+  sidebar: {
+    showRoots: false,
+    collapsedRoots: [
+      'Getting Started',
+      'Guidelines',
+      'Components',
+      'Templates',
+      'Pages',
+      'other'
+    ],
+  },
+  toolbar: {
+    title: { hidden: false, },
+    zoom: { hidden: false, },
+    eject: { hidden: false, },
+    copy: { hidden: false, },
+    fullscreen: { hidden: false, },
+  },
+});

package/.storybook/preview-head.html

@@ -0,0 +1,212 @@
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/icon?family=Material+Icons"
+/>
+<style type="text/css">
+  @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+  /* @font-face {
+    font-weight: 400 700;
+    font-family: 'AudiType';
+    font-style: normal;
+    font-stretch: 100% 130%;
+    src: url('https://assets.audi.com/audi-fonts/1/AudiTypeVF.woff2')
+      format('woff2-variations');
+    font-display: swap;
+  } */
+
+  .sb-show-main {
+    margin: 0;
+    /* padding: 0.5em !important; */
+  }
+
+  .sbdocs-p,
+  .sbdocs-li,
+  .sbdocs-ul,
+  .sbdocs-ol,
+  .sbdocs-table,
+  .sbdocs-h1,
+  .sbdocs-h2,
+  .sbdocs-h3,
+  .sbdocs-h4,
+  .sbdocs-h5,
+  .sbdocs-h6,
+  .sbdocs-title {
+    color: #333 !important;
+    -webkit-font-smoothing: antialiased !important;
+  }
+
+  .sbdocs-p,
+  .sbdocs-li,
+  .sbdocs-ul,
+  .sbdocs-ol,
+  .sbdocs-table {
+    font-weight: 400 !important;
+    font-size: 16px !important;
+    /* font-family: AudiType, sans-serif !important; */
+    font-style: normal !important;
+    font-stretch: 105% !important;
+    line-height: 26px !important;
+  }
+
+  .sbdocs > strong,
+  .sbdocs-table th {
+    font-weight: 700 !important;
+    /* font-family: AudiType, sans-serif !important; */
+    font-style: normal !important;
+    font-stretch: 105% !important;
+  }
+
+  .sbdocs-a {
+    padding-bottom: 0.06125em !important;
+    color: #003366 !important;
+    font-weight: 700 !important;
+    font-size: inherit !important;
+    font-style: normal !important;
+    font-stretch: 105.25% !important;
+    line-height: inherit !important;
+    border-bottom: 1px solid #003366 !important;
+    transition: color 0.3s linear, border 0.3s linear !important;
+  }
+
+  .sbdocs-p,
+  .sbdocs-li,
+  .sbdocs-ul,
+  .sbdocs-ol {
+    margin-bottom: 0.5rem;
+  }
+
+  .sbdocs-h1,
+  .sbdocs-h2,
+  .sbdocs-h3,
+  .sbdocs-h4,
+  .sbdocs-h5,
+  .sbdocs-h6,
+  .sbdocs-title {
+    margin: 1.1em 0 0 0 !important;
+    padding: 0 !important;
+
+    font-weight: 700 !important;
+    /* font-family: AudiType, sans-serif !important; */
+    font-stretch: 130% !important;
+
+    letter-spacing: -0.015em;
+
+    border-bottom: none !important;
+  }
+
+  /* Fixed Headlines */
+
+  /* Order 1 */
+  .sbdocs-h1,
+  .sbdocs-title {
+    margin-top: 0 !important;
+
+    font-size: 40px !important;
+    line-height: 60px !important;
+  }
+
+  /* Order 2 */
+  .sbdocs-h2 {
+    font-size: 32px !important;
+    line-height: 48px !important;
+  }
+
+  /* Order 3 */
+  .sbdocs-h3 {
+    font-size: 24px !important;
+    line-height: 36px !important;
+  }
+
+  /* Order 4 */
+  .sbdocs-h4,
+  .sbdocs-h5,
+  .sbdocs-h6 {
+    font-size: 18px !important;
+    line-height: 28px !important;
+  }
+
+  .tabbutton {
+    font-size: 16px !important;
+    /* font-family: AudiType, sans-serif; */
+    font-stretch: 105%;
+    line-height: normal !important;
+    font-weight: normal !important;
+
+    border-bottom-width: 2px !important;
+    border-top-width: 2px !important;
+  }
+
+  /* .subheading {
+    font-size: 14px !important;
+    color: #003366 !important;
+    letter-spacing: 2px !important;
+  } */
+
+
+  .sbdocs-section-container {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    margin-bottom: 50px !important;
+  }
+
+  .sbdocs-section-img {
+    max-width: 200px !important;
+    width: 100%;
+    height: auto;
+    margin-right: 25px;
+    flex: 1;
+  }
+
+  .sbdocs-section-text {
+    display: flex;
+    flex-direction: column;
+    flex-basis: 75%;
+  }
+
+  .sbdocs-section-container a {
+    border-bottom: 0 !important;
+  }
+
+  .sbdocs-edit-link {
+    float: right;
+  }
+
+  /*
+   * Hide the "stories" heading.
+   * We just visually hide it, but don't remove it from the DOM
+   * to preseve the heading hierarchy for screen readers.
+   */
+   .sbdocs-content #stories {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+  }
+
+  /* Hide the docblock-argstable section on the All Stories and Examples pages */
+  .sbdocs-content div[id*="all-stories--default"] + div .docblock-argstable,
+  .sbdocs-content div[id*="all-stories--default"] + div.docblock-emptyblock,
+  .sbdocs-content div[id*="examples--default"] + div .docblock-argstable,
+  .sbdocs-content div[id*="examples--default"] + div.docblock-emptyblock  {
+    display: none;
+  }
+
+  /* Style the avatars list */
+  .sbdocs-content .sbdocs-avatar-list {
+    border-bottom: none !important;
+  }
+
+  .sbdocs-content .sbdocs-avatar {
+    background-color: grey;
+    border-radius: 50%;
+    margin: 0.25rem 0.25rem 0.25rem 0;
+    max-width: 70px;
+    width: 70px;
+  }
+
+</style>

package/.storybook/preview.js

@@ -0,0 +1,120 @@
+// .storybook/preview.js
+
+import learningpoolTheme from './learningpoolTheme'
+import { withTests } from '@storybook/addon-jest'
+
+import results from '../.jest-test-results.json'
+
+// @TODO: Pull from Design Tokens when module is available
+const customViewports = {
+  small: {
+    name: 'S (600px)',
+    styles: {
+      height: '100%',
+      width: '600px',
+    },
+  },
+  medium: {
+    name: 'M (900px)',
+    styles: {
+      height: '100%',
+      width: '900px',
+    },
+  },
+  large: {
+    name: 'L (1200px)',
+    styles: {
+      height: '100%',
+      width: '1200px',
+    },
+  },
+  extraLarge: {
+    name: 'XL (1536px)',
+    styles: {
+      height: '100%',
+      width: '1536px',
+    },
+  },
+};
+
+export const decorators = [
+  withTests({
+    results,
+  }),
+]
+
+// or global addParameters
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  docs: {
+    theme: learningpoolTheme,
+  },
+  layout: 'centered',
+  options: {
+    storySort: {
+      method: 'alphabetical',
+      order: [
+        'Introduction',
+        'Getting Started', [
+          '*'
+        ],
+        'Guidelines', [
+          'Accessibility', ['Overview', 'Principles', 'Assistive Technology', 'Heirarchy', 'Typography', 'Color and Contrast', 'Writing', 'Imagery', 'Sound and Motion', '*'],
+        ],
+        'Components', [
+          'Inputs', [
+            'Autocomplete', ['Overview', 'Accessibility', 'Properties', '*'],
+            'Button', ['Overview', 'Accessibility', 'Properties', '*'],
+            'Checkbox', ['Overview', 'Accessibility', 'Properties', '*'],
+            'Radio', ['Overview', 'Accessibility', 'Properties', '*'],
+            'Select', ['Overview', 'Accessibility', 'Properties', '*'],
+            'Slider', ['Overview', 'Accessibility', 'Properties', '*'],
+            'Switch', ['Overview', 'Accessibility', 'Properties', '*'],
+            'TextField', ['Overview', 'Accessibility', 'Properties', '*'],
+            'ToggleButton', ['Overview', 'Accessibility', 'Properties', '*'],
+          ],
+          'Data Display', [
+            'Avatar', ['Overview', 'Accessibility', 'Properties', '*'],
+            'Chip', ['Overview', 'Accessibility', 'Properties', '*'],
+            'List', ['Overview', 'Accessibility', 'Properties', '*'],
+            'Tooltip', ['Overview', 'Accessibility', 'Properties', '*'],
+          ],
+          'Feedback', [
+            'Alert', ['Overview', 'Accessibility', 'Properties', '*'],
+          ],
+          'Landmarks', [
+            'Header', ['Overview', 'Accessibility', 'Properties', '*'],
+          ],
+          'Navigation', [
+            'Drawer', ['Overview', 'Accessibility', 'Properties', '*'],
+            'Vertical Navigation', ['Overview', 'Accessibility', 'Properties', '*'],
+            'Mobile Navigation', ['Overview', 'Accessibility', 'Properties', '*'],
+          ]
+        ],
+        'Templates', [
+          'Button', ['Overview', 'Accessibility', 'Properties', '*'],
+        ],
+        'Pages', [
+          'Button', ['Overview', 'Accessibility', 'Properties', '*'],
+        ],
+        'Experimental', [
+          'Button', ['Overview', 'Accessibility', 'Properties', '*'],
+        ],
+        'Roadmap',
+        'Contact Us',
+        '*',
+        'WIP'
+      ],
+      locales: ''
+    },
+  },
+  viewport: {
+    viewports: customViewports,
+  },
+};

package/.storybook/storybook-sort.js

@@ -0,0 +1,54 @@
+export const storySort = options => (a, b) => {
+    // Debug.
+    // console.log({a, b});
+
+    // If the two stories have the same story kind, then use the default
+    // ordering, which is the order they are defined in the story file.
+    if (a[1].kind === b[1].kind) {
+      return 0;
+    }
+
+    const storyKindA = a[1].kind.split('/');
+    const storyKindB = b[1].kind.split('/');
+    let depth = 0;
+    let nameA, nameB, indexA, indexB, index;
+    let ordering = options.order || [];
+
+    while (true) {
+      nameA = storyKindA[depth] ? storyKindA[depth] : '';
+      nameB = storyKindB[depth] ? storyKindB[depth] : '';
+
+      if (nameA === nameB) {
+        // If a nested array is provided for a name, use it for ordering.
+        index = ordering.indexOf(nameA);
+        if (index !== -1 && Array.isArray(ordering[index + 1])) {
+          ordering = ordering[index + 1];
+        }
+
+        // We'll need to look at the next part of the name.
+        depth++;
+        continue;
+      }
+      else {
+        // Look for the names in the given `ordering` array.
+        indexA = ordering.indexOf(nameA);
+        indexB = ordering.indexOf(nameB);
+
+        // If at least one of the names is found, sort by the `ordering` array.
+        if (indexA !== -1 || indexB !== -1) {
+          // If one of the names is not found in `ordering`, list it last.
+          if (indexA === -1) {
+            indexA = ordering.length;
+          }
+          if (indexB === -1) {
+            indexB = ordering.length;
+          }
+
+          return indexA - indexB;
+        }
+      }
+
+      // Otherwise, use alphabetical order.
+      return nameA.localeCompare(nameB);
+    }
+  };

package/CHANGELOG.md

@@ -0,0 +1,6 @@
+## [1.6.1](https://github.com/HT2-Labs/design-system/compare/v1.6.0...v1.6.1) (2023-02-07)
+
+
+### Bug Fixes
+
+* **AnimationLibrary:** Swapping out framer-motion to react-spring [DS-604] ([#144](https://github.com/HT2-Labs/design-system/issues/144)) ([8b95ade](https://github.com/HT2-Labs/design-system/commit/8b95ade36dca5ba9351d87086a0ff360331fd3ed))

package/amplify.yml

@@ -0,0 +1,16 @@
+version: 1
+frontend:
+  phases:
+    preBuild:
+      commands:
+        - npm install
+    build:
+      commands:
+        - npm run build
+  artifacts:
+    baseDirectory: /storybook-static
+    files:
+      - '**/*'
+  cache:
+    paths:
+      - node_modules/**/*

package/babel.config.json

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    ["@babel/preset-env", {
+        "modules": "commonjs",
+        "targets": {
+          "node": "current"
+        }
+      }
+    ],
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ],
+  "plugins": []
+ }