tuix-webcomponents 0.0.4 → 0.0.6

package/.circleci/config.yml

@@ -0,0 +1,105 @@
+
+version: 2.1
+
+workflows:
+  git_deploy:
+    jobs:
+      - deploy-prod:
+          filters:
+            branches:
+              only: master
+      - deploy-dev:
+          filters:
+            branches:
+              only: develop
+
+jobs:
+
+  deploy-dev:
+    working_directory: ~/app
+    docker:
+      - image: mhart/alpine-node:14.15.4
+    steps:
+      - run:
+          name: install git and ssh
+          command: apk update && apk add rsync && apk add git && apk add openssh-client
+      - add_ssh_keys:
+          fingerprints:
+            - "a1:a0:00:b4:59:8d:34:81:9c:d8:ac:25:cc:e5:93:00"
+      - run:
+          name: config git
+          command: git config --global user.email "pipeline@circleci.com" && git config --global user.name "CircleCI"
+      - run:
+          name: add github.com as known host
+          command: ssh-keygen -F github.com || ssh-keyscan github.com >> ~/.ssh/known_hosts
+      - run:
+          name: checkout
+          command: git clone "$CIRCLE_REPOSITORY_URL" --branch "$CIRCLE_BRANCH" .
+      - run:
+          name: npm install
+          command: npm install
+      - run:
+          name: npm run storybook:build
+          command: npm run storybook:build
+      - run:
+          name: push build to github
+          command: |
+            git clone git@github.com:tuixdevelopment/tuix-storybook-staging.git tuix-storybook-staging
+            cp -R tuix-storybook-staging/.git .git-backup
+            cp -R tuix-storybook-staging/CNAME CNAME-backup
+            rm -rf tuix-storybook-staging
+            cp -R storybook-static tuix-storybook-staging
+            cp -R .git-backup tuix-storybook-staging/.git
+            cp -R CNAME-backup tuix-storybook-staging/CNAME
+
+            GIT_TAG="$GIT_TAG.$(date +%s)"
+
+            cd tuix-storybook-staging
+            git add .
+            git commit -m "$GIT_TAG" --allow-empty
+            git push origin master -f
+
+  deploy-prod:
+    working_directory: ~/app
+    docker:
+      - image: mhart/alpine-node:14.15.4
+    steps:
+      - run:
+          name: install git and ssh
+          command: apk update && apk add rsync && apk add git && apk add openssh-client
+      - add_ssh_keys:
+          fingerprints:
+            - "a1:a0:00:b4:59:8d:34:81:9c:d8:ac:25:cc:e5:93:00"
+      - run:
+          name: config git
+          command: git config --global user.email "pipeline@circleci.com" && git config --global user.name "CircleCI"
+      - run:
+          name: add github.com as known host
+          command: ssh-keygen -F github.com || ssh-keyscan github.com >> ~/.ssh/known_hosts
+      - run:
+          name: checkout
+          command: git clone "$CIRCLE_REPOSITORY_URL" --branch "$CIRCLE_BRANCH" .
+      - run:
+          name: npm install
+          command: npm install
+      - run:
+          name: npm run storybook:build
+          command: npm run storybook:build
+      - run:
+          name: push build to github
+          command: |
+            git clone git@github.com:tuixdevelopment/tuix-storybook-prod.git tuix-storybook-prod
+            cp -R tuix-storybook-prod/.git .git-backup
+            cp -R tuix-storybook-prod/CNAME CNAME-backup
+            rm -rf tuix-storybook-prod
+            cp -R storybook-static tuix-storybook-prod
+            cp -R .git-backup tuix-storybook-prod/.git
+            cp -R CNAME-backup tuix-storybook-prod/CNAME
+
+            GIT_TAG="0.0.0.$(date +%s)"
+
+            cd tuix-storybook-prod
+            git add .
+            git commit -m "$GIT_TAG" --allow-empty
+            git push origin master -f
+

package/.editorconfig

@@ -0,0 +1,29 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.json]
+indent_size = 2
+
+[*.{html,js,md}]
+block_comment_start = /**
+block_comment = *
+block_comment_end = */

package/.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+./node_modules/.bin/commitlint --edit $1

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+./node_modules/.bin/lint-staged --allow-empty --concurrent=true

package/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}

package/.storybook/main.js

@@ -0,0 +1,3 @@
+module.exports = {
+  stories: ['../dist/stories/**/*.stories.{js,md,mdx}'],
+};

package/.storybook/server.mjs

@@ -0,0 +1,8 @@
+import { storybookPlugin } from '@web/dev-server-storybook';
+import baseConfig from '../web-dev-server.config.mjs';
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  ...baseConfig,
+  open: '/',
+  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
+});

package/bin/build.sh

@@ -0,0 +1,9 @@
+#!/bin/sh
+
+rm -rf dist
+
+tsc
+
+cp package.json dist
+cp LICENSE dist
+cp README.md dist

package/demo/index.html

@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en-GB">
+
+<head>
+  <meta charset="utf-8">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600&display=swap" rel="stylesheet">
+  <style>
+    body {
+      background: #fafafa;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="demo"></div>
+
+  <script type="module">
+    import { html, render } from 'lit';
+    import '../dist/src/tuix-text/TuixText.js';
+    import { TextSize, TextColor, TextType } from '../dist/src/enums/tuix-text.enums.js'
+
+    render(
+      html`
+        <tuix-text size="${TextSize.XL}" color="${TextColor.Primary}" type="${TextType.Headline}">
+          Hello World
+        </tuix-text>
+      `,
+      document.querySelector('#demo')
+    );
+  </script>
+</body>
+
+</html>

package/package.json

@@ -3,22 +3,18 @@
   "description": "Webcomponent tuix-webcomponents following open-wc recommendations",
   "license": "MIT",
   "author": "tuix-webcomponents",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "type": "commonjs",
   "main": "src/index.js",
   "module": "src/index.js",
   "exports": {
     ".": "./src/index.js"
   },
-  "files": [
-    "src/**/*.{js,json}",
-    "!dist/**"
-  ],
   "scripts": {
     "prepare": "husky install",
     "analyze": "cem analyze --litelement",
     "start": "rm -rf dist && tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
-    "build": "rm -rf dist && tsc && cp package.json dist && npm run analyze -- --exclude dist",
+    "build": "./bin/build.sh && npm run analyze -- --exclude dist",
     "prepublish": "tsc && npm run analyze -- --exclude dist",
     "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
     "format": "prettier --write \"src/**/*.ts\" \"stories/**/*.ts\"",

package/src/enums/tuix-text.enums.ts

@@ -0,0 +1,27 @@
+/* eslint-disable */
+export enum TextSize {
+  XL = 'xl',
+  L = 'l',
+  M = 'm',
+  S = 's',
+  XS = 'xs',
+}
+
+export enum TextColor {
+  Primary = 'primary',
+  Secondary = 'secondary',
+  Grey = 'grey',
+  LightGrey = 'lightGrey',
+  Disabled = 'disabled',
+  Validation = 'validation',
+  Error = 'error',
+  Success = 'success',
+}
+
+export enum TextType {
+  Headline = 'headline',
+  Body = 'body',
+  Button = 'button_link',
+  Link = 'button_link',
+  Fields = 'fields',
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { TuixText } from './tuix-text/TuixText.js';

package/src/tuix-text/TuixText.ts

@@ -0,0 +1,150 @@
+import { html, css, LitElement } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+import { customElement, property } from 'lit/decorators.js';
+import { TextType, TextColor, TextSize } from '../enums/tuix-text.enums.js';
+import { ColorText } from '../utils/colors.js';
+
+@customElement('tuix-text')
+export class TuixText extends LitElement {
+  @property({ type: String })
+  size?: TextSize;
+
+  @property({ type: TextColor })
+  color?: TextColor;
+
+  @property({ type: TextType })
+  type?: TextType;
+
+  static styles = css`
+    .text {
+      font-family: 'Rubik', sans-serif;
+    }
+
+    .text.headline.xl {
+      font-size: 4rem;
+      font-weight: 600;
+      line-height: 4.4rem;
+    }
+
+    .text.headline.l {
+      font-size: 3.5rem;
+      font-weight: 600;
+      line-height: 4.2rem;
+    }
+
+    .text.headline.m {
+      font-size: 2.25rem;
+      font-weight: 500;
+      line-height: 2.7rem;
+    }
+
+    .text.headline.s {
+      font-size: 1.5rem;
+      font-weight: 500;
+      line-height: 1.8rem;
+    }
+
+    .text.headline.xs {
+      font-size: 1.125rem;
+      font-weight: 500;
+      line-height: 1.35;
+    }
+
+    .text.body.m {
+      font-size: 1rem;
+      font-weight: 300;
+      line-height: 1.4rem;
+    }
+
+    .text.body.s {
+      font-size: 0.875rem;
+      font-weight: 300;
+      line-height: 1.225rem;
+    }
+
+    .text.button_link.xl {
+      font-size: 1.25rem;
+      font-weight: 400;
+      line-height: 1.5rem;
+    }
+
+    .text.button_link.l {
+      font-size: 1.25rem;
+      font-weight: 400;
+      line-height: 1.5rem;
+    }
+
+    @media only screen and (max-width: 40rem) {
+      .text.button_link.m {
+        font-size: 1rem;
+        font-weight: 400;
+        line-height: 1.25rem;
+      }
+
+      .text.body.m {
+        line-height: 1.3rem;
+      }
+
+      .text.body.s {
+        line-height: 1.1375rem;
+      }
+
+      .text.headline.xl {
+        font-size: 3rem;
+        line-height: 3.3rem;
+      }
+      .text.headline.l {
+        font-size: 2rem;
+        line-height: 2.4rem;
+      }
+      .text.headline.m {
+        font-size: 1.5rem;
+        line-height: 1.8rem;
+      }
+      .text.headline.s {
+        font-size: 1.125rem;
+        line-height: 1.35rem;
+      }
+      .text.headline.xs {
+        font-size: 1rem;
+        line-height: 1.2rem;
+      }
+    }
+
+    @media only screen and (max-width: 20rem) {
+      .text.button_link.s {
+        font-size: 0.875rem;
+        font-weight: 400;
+        line-height: 1rem;
+      }
+      .text.button_link.xs {
+        font-size: 0.875rem;
+        font-weight: 400;
+        line-height: 1rem;
+      }
+      .text.headline.xl {
+        font-size: 1.5rem;
+        line-height: 1.8rem;
+      }
+      .text.headline.l {
+        font-size: 1.375rem;
+        line-height: 1.65rem;
+      }
+      .text.headline.m {
+        font-size: 1.25rem;
+        line-height: 1.5rem;
+      }
+    }
+  `;
+
+  getTextClass() {
+    return `${this.type} ${this.size}`;
+  }
+
+  render() {
+    return html`<slot
+      class="text ${this.getTextClass()}"
+      style="${styleMap({ color: ColorText[this.color || TextColor.Primary] })}"
+    ></slot>`;
+  }
+}

package/src/utils/colors.ts

@@ -0,0 +1,10 @@
+export const ColorText = {
+  primary: '#000000',
+  secondary: '#FFFFFF',
+  grey: '#8A8894',
+  lightGrey: '#C9C8D3',
+  disabled: '#BEC0DA',
+  validation: '#FFB82E',
+  error: '#F93232',
+  success: '#439F6E',
+};

package/stories/tuix-text.stories.ts

@@ -0,0 +1,82 @@
+import { html, TemplateResult } from 'lit';
+import '../src/tuix-text/TuixText.js';
+import { TextColor, TextSize, TextType } from '../src/enums/tuix-text.enums.js';
+
+export default {
+  title: 'TextComponent',
+  component: 'tuix-text',
+  argTypes: {
+    value: {
+      type: 'string',
+      required: true,
+      defaultValue: 'Headline 1',
+    },
+    size: {
+      control: {
+        type: 'select',
+        options: TextSize,
+      },
+    },
+    type: {
+      control: {
+        type: 'select',
+        options: TextType,
+      },
+    },
+    color: {
+      control: {
+        type: 'select',
+        options: TextColor,
+      },
+    },
+  },
+};
+
+interface Story<T> {
+  (args: T): TemplateResult;
+  args?: Partial<T>;
+  argTypes?: Record<string, unknown>;
+}
+
+interface ArgTypes {
+  size?: TextSize;
+  type?: TextType;
+  color?: TextColor;
+  value?: String;
+}
+
+const Template: Story<ArgTypes> = ({
+  color = TextColor.Primary,
+  size = TextSize.XL,
+  type = TextType.Headline,
+  value,
+}: ArgTypes) => html`
+  <div
+    style="display: flex; justify-content: center; align-items: center; height: 100vh;"
+  >
+    <tuix-text size="${size}" type="${type}" color="${color}">
+      ${value}
+    </tuix-text>
+  </div>
+`;
+
+export const headline = Template.bind({});
+headline.args = {
+  value: 'Headline 1',
+  size: TextSize.XL,
+  type: TextType.Headline,
+};
+
+export const body = Template.bind({});
+body.args = {
+  value: 'Body',
+  size: TextSize.M,
+  type: TextType.Body,
+};
+
+export const button = Template.bind({});
+button.args = {
+  value: 'Button/Link',
+  size: TextSize.XL,
+  type: TextType.Button,
+};

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "lib": ["es2017", "dom"],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "./",
+    "declaration": true,
+    "incremental": true
+  },
+  "include": ["**/*.ts", "bin/build.sh"],
+  "exclude": ["stories"]
+}

package/web-dev-server.config.mjs

@@ -0,0 +1,27 @@
+// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
+
+/** Use Hot Module replacement by adding --hmr to the start command */
+const hmr = process.argv.includes('--hmr');
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  open: '/demo/',
+  /** Use regular watch mode if HMR is not enabled. */
+  watch: !hmr,
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto'
+
+  /** Set appIndex to enable SPA routing */
+  // appIndex: 'demo/index.html',
+
+  plugins: [
+    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
+    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
+  ],
+
+  // See documentation for all available options
+});