Merge pull request #7 from marvel-uiuc/main

Use CSS instead of js for the component styles
web-illinois · Nov 17, 2024 · a6e83ec · a6e83ec
2 parents aa73359 + d61cd3d
commit a6e83ec
Show file tree

Hide file tree

Showing 11 changed files with 228 additions and 224 deletions.
diff --git a/.github/workflows/delete_development.yml b/.github/workflows/delete_development.yml
@@ -7,13 +7,13 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-    - name: Configure AWS Credentials
-      uses: aws-actions/configure-aws-credentials@v1
-      with:
-        aws-access-key-id: ${{ vars.TOOLKIT_AWS_ACCESS_KEY }}
-        aws-secret-access-key: ${{ secrets.TOOLKIT_AWS_ACCESS_SECRET }}
-        aws-region: us-east-2
-    - name: Delete S3 bucket
-      run: aws s3 rm s3://dev.toolkit.illinois.edu/content/$COMPONENT_NAME --recursive
-    - name: Invalidate Cloudfront cache
-      run: aws cloudfront create-invalidation --distribution-id ${{ vars.TOOLKIT_AWS_CLOUDFRONT_DEV }} --paths "/$COMPONENT_NAME*"
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ vars.TOOLKIT_AWS_ACCESS_KEY }}
+          aws-secret-access-key: ${{ secrets.TOOLKIT_AWS_ACCESS_SECRET }}
+          aws-region: us-east-2
+      - name: Delete S3 bucket
+        run: aws s3 rm s3://dev.toolkit.illinois.edu/content/$COMPONENT_NAME --recursive
+      - name: Invalidate Cloudfront cache
+        run: aws cloudfront create-invalidation --distribution-id ${{ vars.TOOLKIT_AWS_CLOUDFRONT_DEV }} --paths "/$COMPONENT_NAME*"
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -12,82 +12,82 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-    - name: 'Checkout GitHub Action'
-      uses: actions/checkout@v4
-    - name: 'Get Version'
-      id: get_version
-      uses: dhkatz/[email protected]
+      - name: 'Checkout GitHub Action'
+        uses: actions/checkout@v4
+      - name: 'Get Version'
+        id: get_version
+        uses: dhkatz/[email protected]
 
-    - name: 'Check for correct naming convention'
-      if: ${{ !steps.get_version.outputs.is-semver }}
-      run: exit 1
-    - name: 'Get major version from tag'
-      run: echo "MAJORVERSION=${GITHUB_BRANCH}" >> $GITHUB_ENV
-      env: 
-        GITHUB_BRANCH: ${{ steps.get_version.outputs.major }}
-    - name: 'Get minor version from tag'
-      run: echo "MINORVERSION=${GITHUB_BRANCH}.${GITHUB_BRANCH_MINOR}" >> $GITHUB_ENV
-      env: 
-        GITHUB_BRANCH: ${{ steps.get_version.outputs.major }}
-        GITHUB_BRANCH_MINOR: ${{ steps.get_version.outputs.minor }}
-    - name: Get patch (full) version from tag
-      run: echo "FULLVERSION=${GITHUB_BRANCH}" >> $GITHUB_ENV
-      env: 
-        GITHUB_BRANCH: ${{ steps.get_version.outputs.version-without-v }}
-    - name: Get prelease version from tag
-      run: echo "PRERELEASE=${GITHUB_BRANCH}" >> $GITHUB_ENV
-      env: 
-        GITHUB_BRANCH: ${{ steps.get_version.outputs.prerelease }}
-    - name: Display major version install
-      run: echo "Installing major version ${MAJORVERSION} for ${COMPONENT_NAME}"
-    - name: Display minor version install
-      run: echo "Installing minor version ${MINORVERSION} for ${COMPONENT_NAME}"
-    - name: Display patch (full) version install
-      run: echo "Installing patch (full) version ${FULLVERSION} for ${COMPONENT_NAME}"
-    - name: Production run
-      if: ${{ steps.get_version.outputs.prerelease == '' }}
-      run: echo "Running production deployment"
-    - name: Prerelease run
-      if: ${{ steps.get_version.outputs.prerelease != '' }}
-      run: echo "Running development deployment"
+      - name: 'Check for correct naming convention'
+        if: ${{ !steps.get_version.outputs.is-semver }}
+        run: exit 1
+      - name: 'Get major version from tag'
+        run: echo "MAJORVERSION=${GITHUB_BRANCH}" >> $GITHUB_ENV
+        env:
+          GITHUB_BRANCH: ${{ steps.get_version.outputs.major }}
+      - name: 'Get minor version from tag'
+        run: echo "MINORVERSION=${GITHUB_BRANCH}.${GITHUB_BRANCH_MINOR}" >> $GITHUB_ENV
+        env:
+          GITHUB_BRANCH: ${{ steps.get_version.outputs.major }}
+          GITHUB_BRANCH_MINOR: ${{ steps.get_version.outputs.minor }}
+      - name: Get patch (full) version from tag
+        run: echo "FULLVERSION=${GITHUB_BRANCH}" >> $GITHUB_ENV
+        env:
+          GITHUB_BRANCH: ${{ steps.get_version.outputs.version-without-v }}
+      - name: Get prelease version from tag
+        run: echo "PRERELEASE=${GITHUB_BRANCH}" >> $GITHUB_ENV
+        env:
+          GITHUB_BRANCH: ${{ steps.get_version.outputs.prerelease }}
+      - name: Display major version install
+        run: echo "Installing major version ${MAJORVERSION} for ${COMPONENT_NAME}"
+      - name: Display minor version install
+        run: echo "Installing minor version ${MINORVERSION} for ${COMPONENT_NAME}"
+      - name: Display patch (full) version install
+        run: echo "Installing patch (full) version ${FULLVERSION} for ${COMPONENT_NAME}"
+      - name: Production run
+        if: ${{ steps.get_version.outputs.prerelease == '' }}
+        run: echo "Running production deployment"
+      - name: Prerelease run
+        if: ${{ steps.get_version.outputs.prerelease != '' }}
+        run: echo "Running development deployment"
 
-    - run: npm install
-    - run: npm rebuild
-    - run: npm run-script build
-    - name: Configure AWS Credentials
-      uses: aws-actions/configure-aws-credentials@v1
-      with:
-        aws-access-key-id: ${{ vars.TOOLKIT_AWS_ACCESS_KEY }}
-        aws-secret-access-key: ${{ secrets.TOOLKIT_AWS_ACCESS_SECRET }}
-        aws-region: us-east-2
+      - run: npm install
+      - run: npm rebuild
+      - run: npm run-script build
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ vars.TOOLKIT_AWS_ACCESS_KEY }}
+          aws-secret-access-key: ${{ secrets.TOOLKIT_AWS_ACCESS_SECRET }}
+          aws-region: us-east-2
 
-    - name: Deploy toolbox to S3 bucket for major version
-      if: ${{ steps.get_version.outputs.prerelease == '' }}
-      run: aws s3 sync ./dist/ s3://cdn.toolkit.illinois.edu/content/$COMPONENT_NAME/$MAJORVERSION --delete --acl bucket-owner-full-control
-    - name: Invalidate Cloudfront cache for major version
-      if: ${{ steps.get_version.outputs.prerelease == '' }}
-      run: aws cloudfront create-invalidation --distribution-id ${{ vars.TOOLKIT_AWS_CLOUDFRONT }} --paths "/$COMPONENT_NAME/$MAJORVERSION*"
-    - name: Deploy toolbox to S3 bucket for minor version
-      if: ${{ steps.get_version.outputs.prerelease == '' }}
-      run: aws s3 sync ./dist/ s3://cdn.toolkit.illinois.edu/content/$COMPONENT_NAME/$MINORVERSION --delete --acl bucket-owner-full-control
-    - name: Invalidate Cloudfront cache for minor version
-      if: ${{ steps.get_version.outputs.prerelease == '' }}
-      run: aws cloudfront create-invalidation --distribution-id ${{ vars.TOOLKIT_AWS_CLOUDFRONT }} --paths "/$COMPONENT_NAME/$MINORVERSION*"
-    - name: Deploy toolbox to S3 bucket for patch (full) version
-      if: ${{ steps.get_version.outputs.prerelease == '' }}
-      run: aws s3 sync ./dist/ s3://cdn.toolkit.illinois.edu/content/$COMPONENT_NAME/$FULLVERSION --delete --acl bucket-owner-full-control
-    - name: Invalidate Cloudfront cache for patch (full) version
-      if: ${{ steps.get_version.outputs.prerelease == '' }}
-      run: aws cloudfront create-invalidation --distribution-id ${{ vars.TOOLKIT_AWS_CLOUDFRONT }} --paths "/$COMPONENT_NAME/$FULLVERSION*"
-    - name: Deploy toolbox to S3 bucket for full version dev
-      if: ${{ steps.get_version.outputs.prerelease != '' }}
-      run: aws s3 sync ./dist/ s3://dev.toolkit.illinois.edu/content/$COMPONENT_NAME/$FULLVERSION --delete --acl bucket-owner-full-control
-    - name: Invalidate Cloudfront cache for full version dev
-      if: ${{ steps.get_version.outputs.prerelease != '' }}
-      run: aws cloudfront create-invalidation --distribution-id ${{ vars.TOOLKIT_AWS_CLOUDFRONT_DEV }} --paths "/$COMPONENT_NAME/$FULLVERSION*"
-    - name: Deploy toolbox to S3 bucket for latest dev
-      if: ${{ steps.get_version.outputs.prerelease != '' }}
-      run: aws s3 sync ./dist/ s3://dev.toolkit.illinois.edu/content/$COMPONENT_NAME/latest --delete --acl bucket-owner-full-control
-    - name: Invalidate Cloudfront cache for latest dev
-      if: ${{ steps.get_version.outputs.prerelease != '' }}
-      run: aws cloudfront create-invalidation --distribution-id ${{ vars.TOOLKIT_AWS_CLOUDFRONT_DEV }} --paths "/$COMPONENT_NAME/latest*"
+      - name: Deploy toolbox to S3 bucket for major version
+        if: ${{ steps.get_version.outputs.prerelease == '' }}
+        run: aws s3 sync ./dist/ s3://cdn.toolkit.illinois.edu/content/$COMPONENT_NAME/$MAJORVERSION --delete --acl bucket-owner-full-control
+      - name: Invalidate Cloudfront cache for major version
+        if: ${{ steps.get_version.outputs.prerelease == '' }}
+        run: aws cloudfront create-invalidation --distribution-id ${{ vars.TOOLKIT_AWS_CLOUDFRONT }} --paths "/$COMPONENT_NAME/$MAJORVERSION*"
+      - name: Deploy toolbox to S3 bucket for minor version
+        if: ${{ steps.get_version.outputs.prerelease == '' }}
+        run: aws s3 sync ./dist/ s3://cdn.toolkit.illinois.edu/content/$COMPONENT_NAME/$MINORVERSION --delete --acl bucket-owner-full-control
+      - name: Invalidate Cloudfront cache for minor version
+        if: ${{ steps.get_version.outputs.prerelease == '' }}
+        run: aws cloudfront create-invalidation --distribution-id ${{ vars.TOOLKIT_AWS_CLOUDFRONT }} --paths "/$COMPONENT_NAME/$MINORVERSION*"
+      - name: Deploy toolbox to S3 bucket for patch (full) version
+        if: ${{ steps.get_version.outputs.prerelease == '' }}
+        run: aws s3 sync ./dist/ s3://cdn.toolkit.illinois.edu/content/$COMPONENT_NAME/$FULLVERSION --delete --acl bucket-owner-full-control
+      - name: Invalidate Cloudfront cache for patch (full) version
+        if: ${{ steps.get_version.outputs.prerelease == '' }}
+        run: aws cloudfront create-invalidation --distribution-id ${{ vars.TOOLKIT_AWS_CLOUDFRONT }} --paths "/$COMPONENT_NAME/$FULLVERSION*"
+      - name: Deploy toolbox to S3 bucket for full version dev
+        if: ${{ steps.get_version.outputs.prerelease != '' }}
+        run: aws s3 sync ./dist/ s3://dev.toolkit.illinois.edu/content/$COMPONENT_NAME/$FULLVERSION --delete --acl bucket-owner-full-control
+      - name: Invalidate Cloudfront cache for full version dev
+        if: ${{ steps.get_version.outputs.prerelease != '' }}
+        run: aws cloudfront create-invalidation --distribution-id ${{ vars.TOOLKIT_AWS_CLOUDFRONT_DEV }} --paths "/$COMPONENT_NAME/$FULLVERSION*"
+      - name: Deploy toolbox to S3 bucket for latest dev
+        if: ${{ steps.get_version.outputs.prerelease != '' }}
+        run: aws s3 sync ./dist/ s3://dev.toolkit.illinois.edu/content/$COMPONENT_NAME/latest --delete --acl bucket-owner-full-control
+      - name: Invalidate Cloudfront cache for latest dev
+        if: ${{ steps.get_version.outputs.prerelease != '' }}
+        run: aws cloudfront create-invalidation --distribution-id ${{ vars.TOOLKIT_AWS_CLOUDFRONT_DEV }} --paths "/$COMPONENT_NAME/latest*"
diff --git a/.github/workflows/deploy_development.yml b/.github/workflows/deploy_development.yml
@@ -4,7 +4,7 @@ on:
     inputs:
       version:
         description: 'Version number'
-        required: true 
+        required: true
         default: ''
         type: string
 env:
@@ -14,25 +14,25 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-    - name: 'Checkout GitHub Action'
-      uses: actions/checkout@v4
-    - name: Get version from input
-      run: echo "VERSION=${GITHUB_BRANCH}" >> $GITHUB_ENV
-      env: 
-        GITHUB_BRANCH: ${{ github.event.inputs.version }}
-    - name: Display version install
-      run: echo "Installing dev version ${VERSION}"
+      - name: 'Checkout GitHub Action'
+        uses: actions/checkout@v4
+      - name: Get version from input
+        run: echo "VERSION=${GITHUB_BRANCH}" >> $GITHUB_ENV
+        env:
+          GITHUB_BRANCH: ${{ github.event.inputs.version }}
+      - name: Display version install
+        run: echo "Installing dev version ${VERSION}"
 
-    - run: npm install
-    - run: npm rebuild
-    - run: npm run-script build
-    - name: Configure AWS Credentials
-      uses: aws-actions/configure-aws-credentials@v1
-      with:
-        aws-access-key-id: ${{ vars.TOOLKIT_AWS_ACCESS_KEY }}
-        aws-secret-access-key: ${{ secrets.TOOLKIT_AWS_ACCESS_SECRET }}
-        aws-region: us-east-2
-    - name: Deploy toolbox to S3 bucket
-      run: aws s3 sync ./dist/ s3://dev.toolkit.illinois.edu/content/$COMPONENT_NAME/$VERSION --delete --acl bucket-owner-full-control
-    - name: Invalidate Cloudfront cache
-      run: aws cloudfront create-invalidation --distribution-id ${{ vars.TOOLKIT_AWS_CLOUDFRONT_DEV }} --paths "/$COMPONENT_NAME/$VERSION*"
+      - run: npm install
+      - run: npm rebuild
+      - run: npm run-script build
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ vars.TOOLKIT_AWS_ACCESS_KEY }}
+          aws-secret-access-key: ${{ secrets.TOOLKIT_AWS_ACCESS_SECRET }}
+          aws-region: us-east-2
+      - name: Deploy toolbox to S3 bucket
+        run: aws s3 sync ./dist/ s3://dev.toolkit.illinois.edu/content/$COMPONENT_NAME/$VERSION --delete --acl bucket-owner-full-control
+      - name: Invalidate Cloudfront cache
+        run: aws cloudfront create-invalidation --distribution-id ${{ vars.TOOLKIT_AWS_CLOUDFRONT_DEV }} --paths "/$COMPONENT_NAME/$VERSION*"
diff --git a/.github/workflows/deploy_development_manual.yml b/.github/workflows/deploy_development_manual.yml
@@ -4,7 +4,7 @@ on:
     inputs:
       version:
         description: 'Version number'
-        required: true 
+        required: true
         default: ''
         type: string
 env:
@@ -13,25 +13,25 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-    - name: 'Checkout GitHub Action'
-      uses: actions/checkout@v4
-    - name: Get version from input
-      run: echo "VERSION=${GITHUB_BRANCH}" >> $GITHUB_ENV
-      env: 
-        GITHUB_BRANCH: ${{ github.event.inputs.version }}
-    - name: Display version install
-      run: echo "Installing dev version ${VERSION} for component ${COMPONENT_NAME}"
+      - name: 'Checkout GitHub Action'
+        uses: actions/checkout@v4
+      - name: Get version from input
+        run: echo "VERSION=${GITHUB_BRANCH}" >> $GITHUB_ENV
+        env:
+          GITHUB_BRANCH: ${{ github.event.inputs.version }}
+      - name: Display version install
+        run: echo "Installing dev version ${VERSION} for component ${COMPONENT_NAME}"
 
-    - run: npm install
-    - run: npm rebuild
-    - run: npm run-script build
-    - name: Configure AWS Credentials
-      uses: aws-actions/configure-aws-credentials@v1
-      with:
-        aws-access-key-id: ${{ vars.TOOLKIT_AWS_ACCESS_KEY }}
-        aws-secret-access-key: ${{ secrets.TOOLKIT_AWS_ACCESS_SECRET }}
-        aws-region: us-east-2
-    - name: Deploy toolbox to S3 bucket
-      run: aws s3 sync ./dist/ s3://dev.toolkit.illinois.edu/content/$COMPONENT_NAME/$VERSION --delete --acl bucket-owner-full-control
-    - name: Invalidate Cloudfront cache
-      run: aws cloudfront create-invalidation --distribution-id ${{ vars.TOOLKIT_AWS_CLOUDFRONT_DEV }} --paths "/$COMPONENT_NAME/$VERSION*"
+      - run: npm install
+      - run: npm rebuild
+      - run: npm run-script build
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ vars.TOOLKIT_AWS_ACCESS_KEY }}
+          aws-secret-access-key: ${{ secrets.TOOLKIT_AWS_ACCESS_SECRET }}
+          aws-region: us-east-2
+      - name: Deploy toolbox to S3 bucket
+        run: aws s3 sync ./dist/ s3://dev.toolkit.illinois.edu/content/$COMPONENT_NAME/$VERSION --delete --acl bucket-owner-full-control
+      - name: Invalidate Cloudfront cache
+        run: aws cloudfront create-invalidation --distribution-id ${{ vars.TOOLKIT_AWS_CLOUDFRONT_DEV }} --paths "/$COMPONENT_NAME/$VERSION*"