diff --git a/.github/workflows/amplify-deploy.yml b/.github/workflows/amplify-deploy.yml index 61df75cc34..b2209182ca 100644 --- a/.github/workflows/amplify-deploy.yml +++ b/.github/workflows/amplify-deploy.yml @@ -33,6 +33,13 @@ on: required: false type: string default: 'build' + destination-dir: + required: false + type: string + default: '/' + sub-domain-suffix: + required: true + type: string env: AMPLIFY_ID: ${{ inputs.amplify-app-id }} @@ -63,13 +70,13 @@ jobs: with: script-name: "${{inputs.build-script }} --filter=${{ inputs.package-name }}" # Create Github Deployment - - name: Create Docs GitHub deployment + - name: Create GitHub deployment if: ${{ github.event_name == 'pull_request' }} uses: chrnorm/deployment-action@55729fcebec3d284f60f5bcabbd8376437d696b1 # v2.0.7 id: deploy with: token: ${{ secrets.GITHUB_TOKEN }} - environment: "${{ inputs.package-name}}-pr-${{ github.event.number }}" + environment: "${{ inputs.sub-domain-suffix }}-pr-${{ github.event.number }}" # Zip dist folder - name: Zip build output shell: bash @@ -86,10 +93,11 @@ jobs: aws-region: ${{ env.AWS_REGION }} aws-bucket: ${{ env.BUCKET_NAME }} bucket-root: "/" - destination-dir: "/" + destination-dir: "${{ inputs.destination-dir }}" file-path: "${{inputs.package-dist-directory}}/${{ env.ZIP_NAME }}" content-type: "application/zip" public: true + output-file-url: 'true' # Create branch on Amplify - name: Create Amplify branch shell: bash @@ -106,13 +114,14 @@ jobs: aws amplify start-deployment \ --app-id ${{ env.AMPLIFY_ID }} \ --branch-name ${{ env.BRANCH_NAME }} \ - --source-url s3://${{ env.BUCKET_NAME }}/${{ env.ZIP_NAME }} + --source-url ${{ steps.upload-s3.outputs.file-url }} # Set env vars for domain name association - name: Set environment variables for domain name association if: github.event_name == 'pull_request' + env: + SUB_DOMAIN_SUFFIX: ${{ inputs.sub-domain-suffix }} run: | - PACKAGE_NAME_SUFFIX=$(echo "${{ inputs.package-name }}" | sed -e 's/^pie-//') - echo "SUB_DOMAIN=pr${{ github.event.number }}-$PACKAGE_NAME_SUFFIX" >> $GITHUB_ENV + echo "SUB_DOMAIN=pr${{ github.event.number }}-$SUB_DOMAIN_SUFFIX" >> $GITHUB_ENV - name: Get existing domain associations if: github.event_name == 'pull_request' diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index f016cb51ad..71328ac8de 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -204,6 +204,25 @@ jobs: package-dist-directory: ./apps/pie-storybook/dist bucket-name-preview: 'pie-storybook-preview' bucket-name-main: 'pie-storybook' + sub-domain-suffix: 'storybook' + secrets: inherit + + # Workflow task that deploys an instance of storybook used for test suites to run against + deploy-storybook-testing: + needs: unit-tests + if: (needs.check-change-type.outputs.web-components-change == 'true' || needs.check-change-type.outputs.storybook-change == 'true') || github.ref == 'refs/heads/main' + uses: ./.github/workflows/amplify-deploy.yml + with: + os: ubuntu-latest + node-version: 20 + amplify-app-id: d3eyargno6okyn + package-name: 'pie-storybook' + package-dist-directory: ./apps/pie-storybook/dist + bucket-name-preview: 'pie-storybook-preview' + bucket-name-main: 'pie-storybook' + destination-dir: 'testing' + build-script: 'build:testing' + sub-domain-suffix: 'storybook-testing' secrets: inherit # TODO: DSW-1151 - Move this into a reusable action so it's not duplicated @@ -274,6 +293,7 @@ jobs: package-dist-directory: ./apps/pie-docs/dist bucket-name-preview: 'pie-docs-preview' bucket-name-main: 'pie-docs' + sub-domain-suffix: 'docs' secrets: inherit browser-tests-docs: diff --git a/.github/workflows/closed.yml b/.github/workflows/closed.yml index c766f8765d..e5fa83f61e 100644 --- a/.github/workflows/closed.yml +++ b/.github/workflows/closed.yml @@ -12,6 +12,7 @@ jobs: outputs: hasDocsEnv: ${{ steps.list-environments.outputs.hasDocsEnv }} hasStorybookEnv: ${{ steps.list-environments.outputs.hasStorybookEnv }} + hasStorybookTestingEnv: ${{ steps.list-environments.outputs.hasStorybookTestingEnv }} steps: - name: Checkout uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 @@ -36,11 +37,13 @@ jobs: const envList = environments.data.environments.map(env => env.name); // Check for existence of specific environments - const hasDocsEnv = envList.includes(`pie-docs-pr-${pull_number}`); - const hasStorybookEnv = envList.includes(`pie-storybook-pr-${pull_number}`); + const hasDocsEnv = envList.includes(`docs-pr-${pull_number}`); + const hasStorybookEnv = envList.includes(`storybook-pr-${pull_number}`); + cosnt hasStorybookTestingEnv = envList.includes(`storybook-testing-pr-${pull_number}`); core.setOutput('hasDocsEnv', hasDocsEnv); core.setOutput('hasStorybookEnv', hasStorybookEnv); + core.setOutput('hasStorybookTestingEnv', hasStorybookTestingEnv); - name: Delete associated docs environments if: steps.list-environments.outputs.hasDocsEnv == 'true' @@ -52,7 +55,7 @@ jobs: aws-region: 'eu-west-1' aws-access-key-id: ${{ secrets.AWS_KEY_ID }} aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} - environment-name: pie-docs-pr-${{ github.event.number }} + environment-name: docs-pr-${{ github.event.number }} branch-name: 'pr${{ github.event.number }}' - name: Delete associated storybook environment @@ -65,5 +68,18 @@ jobs: aws-region: 'eu-west-1' aws-access-key-id: ${{ secrets.AWS_KEY_ID }} aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} - environment-name: pie-storybook-pr-${{ github.event.number }} + environment-name: storybook-pr-${{ github.event.number }} + branch-name: 'pr${{ github.event.number }}' + + - name: Delete associated storybook testing environments + if: steps.list-environments.outputs.hasStorybookTestingEnv == 'true' + uses: ./.github/actions/amplify-teardown + with: + gh-app-id: ${{ secrets.GH_APP_ID }} + gh-app-private-key: ${{ secrets.GH_APP_PRIVATE_KEY }} + amplify-app-id: d3eyargno6okyn + aws-region: 'eu-west-1' + aws-access-key-id: ${{ secrets.AWS_KEY_ID }} + aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} + environment-name: storybook-testing-pr-${{ github.event.number }} branch-name: 'pr${{ github.event.number }}' \ No newline at end of file diff --git a/apps/pie-storybook/.storybook/main.ts b/apps/pie-storybook/.storybook/main.ts index c6b381645e..1d1069d151 100644 --- a/apps/pie-storybook/.storybook/main.ts +++ b/apps/pie-storybook/.storybook/main.ts @@ -1,10 +1,17 @@ import type { StorybookConfig } from '@storybook/web-components-vite'; +const isBrowserTesting = process.env.BROWSER_TESTING === 'true'; + const config: StorybookConfig = { - stories: [ - "../stories/**/*.mdx", - "../stories/**/*.stories.@(js|ts|tsx)" - ], + stories: isBrowserTesting + ? [ + "../stories/**/*.test.mdx", + "../stories/**/*.test.stories.@(js|ts|tsx)" + ] + : [ + "../stories/**/*.mdx", + "../stories/**/!(*.test).stories.@(js|ts|tsx)" + ], addons: [ "@storybook/addon-essentials", "@storybook/addon-a11y", @@ -20,6 +27,6 @@ const config: StorybookConfig = { docs: { autodocs: false } -} +}; export default config; diff --git a/apps/pie-storybook/package.json b/apps/pie-storybook/package.json index b86e7d3598..2394d9565c 100644 --- a/apps/pie-storybook/package.json +++ b/apps/pie-storybook/package.json @@ -5,7 +5,9 @@ "description": "Storybook for PIE Design System components", "scripts": { "dev": "storybook dev -p 6006", + "dev:testing": "BROWSER_TESTING=true storybook dev -p 6006", "build": "storybook build --output-dir dist && cp -R ./static ./dist", + "build:testing": "BROWSER_TESTING=true storybook build --output-dir dist && cp -R ./static ./dist", "lint:scripts": "run -T eslint .", "lint:scripts:fix": "run -T eslint . --fix" }, diff --git a/apps/pie-storybook/stories/pie-divider.test.stories.ts b/apps/pie-storybook/stories/pie-divider.test.stories.ts new file mode 100644 index 0000000000..58195acad7 --- /dev/null +++ b/apps/pie-storybook/stories/pie-divider.test.stories.ts @@ -0,0 +1,68 @@ +import { html } from 'lit'; +import { ifDefined } from 'lit/directives/if-defined.js'; +import { type Meta } from '@storybook/web-components'; + +import '@justeattakeaway/pie-divider'; +import { + type DividerProps, variants, orientations, defaultProps, +} from '@justeattakeaway/pie-divider'; + +import { createStory, type TemplateFunction } from '../utilities'; + +type DividerStoryMeta = Meta; + +const defaultArgs: DividerProps = { ...defaultProps }; + +const dividerStoryMeta: DividerStoryMeta = { + title: 'Divider', + component: 'pie-divider', + argTypes: { + variant: { + description: 'Set the variant of the divider. To change this, view the other story.', + control: { disable: true }, + options: variants, + defaultValue: { + summary: defaultProps.variant, + }, + }, + label: { + description: 'The label text for the divider.', + control: { + type: 'text', + defaultValue: { + summary: 'Label', + }, + }, + }, + orientation: { + description: 'Set the orientation of the divider.', + control: 'select', + options: orientations, + defaultValue: { + summary: defaultProps.orientation, + }, + }, + }, + args: defaultArgs, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/R2rBfzJP0hG0MZorq6FLZ1/%5BCore%5D-Components-%E2%9A%AA%EF%B8%8F-%5BPIE-2.0%5D?node-id=876-1227&node-type=CANVAS&t=v6qypWzZqWE6lPxm-0', + }, + }, +}; + +export default dividerStoryMeta; + +const Template : TemplateFunction = ({ variant, label, orientation }) => html` +
+ +
+ `; + +const createDividerStory = createStory(Template, defaultArgs); + +export const Default = createDividerStory(); +export const Inverse = createDividerStory({ variant: 'inverse' }, { bgColor: 'dark (container-dark)' }); +export const Labelled = createDividerStory({ label: 'Label' }); +export const LargeTextContent = createDividerStory({ label: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quas inventore quasi ullam, sed ab odio dicta, tempore' }); diff --git a/apps/pie-storybook/turbo.json b/apps/pie-storybook/turbo.json index eb7a7d9aaf..95d0a43d1f 100644 --- a/apps/pie-storybook/turbo.json +++ b/apps/pie-storybook/turbo.json @@ -11,12 +11,28 @@ "^generate:component-statuses" ] }, + "dev:testing": { + "cache": false, + "dependsOn": [ + "^build", + "copy:component-statuses" + ] + }, "build": { "cache": true, "dependsOn": [ "^build", "^generate:component-statuses" - ] + ], + "outputs": ["dist/**"] + }, + "build:testing": { + "cache": true, + "dependsOn": [ + "^build", + "^generate:component-statuses" + ], + "outputs": ["dist/**"] } } -} +} \ No newline at end of file diff --git a/package.json b/package.json index 45a5ff3c32..19fe2241fc 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "analyse-component-bundles": "bundlewatch --config bundlewatch.config.json", "watch": "turbo run watch --filter=!pie-monorepo", "build": "cross-env-shell turbo run build --filter=!'./apps/examples/*' --filter=!pie-monorepo --token=${TURBO_TOKEN}", + "build:testing": "cross-env-shell turbo run build:testing --filter=!'./apps/examples/*' --filter=!pie-monorepo --token=${TURBO_TOKEN}", "build:dev": "cross-env-shell turbo run build:dev --filter=!'./apps/examples/*' --filter=!pie-monorepo --token=${TURBO_TOKEN}", "build:examples": "cross-env-shell turbo run build:examples --filter=!pie-monorepo --token=${TURBO_TOKEN}", "build:react-wrapper": "cross-env-shell turbo run build:react-wrapper --filter=!pie-monorepo --token=${TURBO_TOKEN}", @@ -32,6 +33,7 @@ "clean": "turbo run clean --filter=!pie-monorepo", "cz": "./packages/tools/pie-monorepo-utils/git-hooks/check-branch-name.js $(git symbolic-ref --short HEAD) && ./node_modules/cz-customizable/standalone.js", "dev": "turbo run dev --filter=!pie-monorepo", + "dev:testing": "turbo run dev:testing --filter=!pie-monorepo", "generate:component-statuses": "turbo run generate:component-statuses --filter=!pie-monorepo", "generate:examples": "cross-env-shell turbo run generate:examples --filter=!pie-monorepo --token=${TURBO_TOKEN}", "lint:config:fix": "eslint --fix turbo.json (packages|apps)/**/turbo.json",